/* ============================================================
   v4 targeted fixes - loaded LAST, overrides styles.css + v3-scoped.css
   ============================================================ */

/* ---- page goes edge-to-edge (kill default body margin) so footer is full width ---- */
body{margin:0}

/* ---- FOOTER: full-width, theme-aware (dark in dark mode, white in light) ---- */
.v3x .footer{-webkit-backdrop-filter:none;backdrop-filter:none}
.v3x[data-mode="dark"] .footer{background:#070809;border-top:1px solid rgba(255,255,255,.07)}
.v3x[data-mode="light"] .footer{background:#ffffff;border-top:1px solid #e7e7e3}
.v3x .footer .footer-grid{gap:40px}

/* ---- node map: readable pills + visible spokes + inter-node sync ring ---- */
.v3x .nm-node{background:#fff;color:#101317;border:1px solid rgba(0,0,0,.12);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.v3x .nm-node svg{color:var(--acc)}
/* every node connects to the central IVO hub (white spokes) AND to each other
   (coral ring) - continuously flowing dashes = live data exchange across the network */
/* spokes (to IVO) and ring (across nodes) render IDENTICALLY - non-scaling-stroke
   keeps stroke width + dashes constant despite the stretched viewBox */
.v3x .nm-edges line,.v3x .nm-ring{fill:none;stroke:var(--acc-2) !important;stroke-opacity:.65;stroke-width:1.6 !important;stroke-dasharray:6 5 !important;vector-effect:non-scaling-stroke;animation:nm-flow 1.8s linear infinite}
/* tighten the hub glow so it stops washing out the spokes near IVO */
.v3x .nm-hub{width:88px;height:88px;font-size:13px;box-shadow:0 0 18px -8px var(--acc-glow)}
@keyframes nm-flow{to{stroke-dashoffset:-22}}
@media (prefers-reduced-motion:reduce){.v3x .nm-edges line,.v3x .nm-ring{animation:none}}

/* ---- 6th audience tab (Agencies & Enterprise): active state + panel display ---- */
.ivo-app #m-a6:checked~.m-aud-tabs label[for=m-a6]{background:var(--aa-fill,var(--accent));border-color:var(--aa-fill,var(--accent));color:#fff}
.ivo-app #m-a6:checked~.m-aud-panels [data-p="6"]{display:block}

/* ---- m-prose / node-list checkmarks: green failed contrast on the light panel;
   recolour to the theme-aware accent (coral/blue), readable in both modes ---- */
.ivo-app .m-prose > li > svg,
.ivo-app .m-node-list > li > svg{ background:var(--accent-bg) !important; color:var(--accent-text) !important; }

/* ---- reviews slider: 9 cards, 3 visible, snap + arrows + autoplay ---- */
.v3x .testi-slider{position:relative;margin-top:48px}
.v3x .testi-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v3x .testi-track::-webkit-scrollbar{display:none}
.v3x .testi-track > .testi{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;margin-top:0;opacity:1!important;transform:none!important}
.v3x .testi-track .testi-author{margin-top:auto}   /* pin author to the bottom for equal-height cards */
.v3x .testi-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:border-color .2s,color .2s}
.v3x .testi-nav svg{width:20px;height:20px}
.v3x .testi-nav:hover{border-color:var(--acc);color:var(--acc-ink)}
.v3x .testi-nav.prev{left:-16px}
.v3x .testi-nav.next{right:-16px}
@media(max-width:860px){.v3x .testi-track > .testi{flex:0 0 calc((100% - 18px)/2)}}
@media(max-width:560px){.v3x .testi-track > .testi{flex:0 0 88%}.v3x .testi-nav{display:none}}

/* ---- supporting organizations: show the real logos (no monochrome filter) ---- */
.v3x .logos .lg{background:#fff;border-radius:10px;padding:6px 14px;height:46px;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
.v3x .logos .lg img{filter:none;opacity:1;max-height:30px}

/* ---- THE IVO PLATFORM: uniform compact card grid (matches the rest) ---- */
.v3x #platform .plat-grid{grid-template-columns:repeat(3,1fr);gap:16px}
.v3x #platform .pcard{padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);
  box-shadow:0 24px 54px -34px rgba(0,0,0,.6)}
.v3x #platform .pcard .ico{width:42px;height:42px;border-radius:12px;margin-bottom:14px}
.v3x #platform .pcard h3{font-size:17px;margin-bottom:7px}
.v3x #platform .pcard p{font-size:14px;line-height:1.5}
@media(max-width:900px){.v3x #platform .plat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.v3x #platform .plat-grid{grid-template-columns:1fr}}

/* ---- FOR DEVELOPERS: code window + 5 cards fit with no hanging row ---- */
.v3x #developers .codewin{grid-row:span 3}
.v3x #developers .dev-wide{grid-column:span 2}      /* IVO Protocol spans the right pair */
.v3x #developers .card{padding:20px}
.v3x #developers .card h3{font-size:17px}
.v3x #developers .card p{font-size:13px;line-height:1.5}

/* ---- IVO MOBILE: smaller phone placed inside the photo, top-left ---- */
.v3x #mobile .app-photo{width:78%}
.v3x #mobile .phone{
    left: 17%;
    top: -8%;
    width: 161px;
    height: 300px;
    transform: rotate(350deg);
    box-shadow: 0 26px 52px -20px rgb(255 255 255);
}
.v3x[data-mode="light"] .phone{border-color:#1e1e1e}
.v3x #mobile .app-chip{right:3%;bottom:8%}
/* compact phone internals to fit 161x300 */
.v3x #mobile .phone-scr{padding:8px 9px 4px}
.v3x #mobile .phone-bar{margin-bottom:4px;font-size:8.5px}
.v3x #mobile .phone-hi{font-size:12px}
.v3x #mobile .phone-hi span{font-size:9.5px}
.v3x #mobile .phone-bal{padding:8px 9px;margin:6px 0;border-radius:11px}
.v3x #mobile .phone-bal .l{font-size:9px}
.v3x #mobile .phone-bal .v{font-size:17px}
.v3x #mobile .phone-th{font-size:8.5px;margin:1px 0 4px;letter-spacing:.05em}
.v3x #mobile .phone-task{padding:5px 7px;margin-bottom:3px;font-size:10px;border-radius:8px;gap:6px}
.v3x #mobile .phone-tabs{padding:5px 0 0;margin-top:3px}
.v3x #mobile .phone-tabs svg{width:14px;height:14px}

/* final CTA border (per request) */
.v3x .finalcta{border:1px solid rgba(15, 18, 22, .10)}

/* video fallback: if a background video (or its poster) fails to load, show a
   branded gradient instead of an empty/transparent box */
.m-hero-video,.m-secvid video,.m-vhead-media video,.footer video,
[data-vidfolder] video,video[data-vidfolder]{
  background:linear-gradient(135deg,var(--panel-2),var(--bg-2));
}

/* ============================================================
   MEGA-MENU DROPDOWNS on the .m-nav pill - shared by the homepage and
   every generated page (Solutions/Products/Developers/Company). Uses the
   homepage --accent* tokens so it needs no other stylesheet.
   ============================================================ */
.ivo-app .m-nav-item{position:relative;display:flex;align-items:center}
.ivo-app .m-nav-item > .m-nav-trig{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px;
  color:var(--ink-3);font-weight:500;font-size:14px;background:none;border:0;cursor:pointer;font-family:inherit;
  transition:background .2s,color .2s}
.ivo-app .m-nav-item:hover > .m-nav-trig{background:var(--panel-2);color:var(--ink)}
.ivo-app .m-nav-trig .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s}
.ivo-app .m-nav-item:hover .chev{transform:rotate(180deg)}
.ivo-app .m-nav-item .drop{position:absolute;top:calc(100% + 12px);left:0;min-width:262px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:95}
.ivo-app .m-nav-item:hover .drop,.ivo-app .m-nav-item:focus-within .drop{opacity:1;visibility:visible;transform:none}
.ivo-app .m-nav-item .drop.mega{left:50%;transform:translateX(-50%) translateY(6px);display:flex;gap:8px;padding:12px;min-width:auto}
.ivo-app .m-nav-item:hover .drop.mega,.ivo-app .m-nav-item:focus-within .drop.mega{transform:translateX(-50%)}
.ivo-app .mega-col{display:flex;flex-direction:column;min-width:228px}
.ivo-app .drop-grp{padding:5px 6px}
.ivo-app .drop.mega .drop-grp{padding:3px 4px}
.ivo-app .drop-grp-h{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 8px 3px}
.ivo-app .drop a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--ink-2)}
.ivo-app .drop.mega a{padding:7px 8px;gap:9px}
.ivo-app .drop a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.ivo-app .drop a .di{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-text)}
.ivo-app .drop.mega a .di{width:28px;height:28px}
.ivo-app .drop a .di svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.ivo-app .drop a b{display:block;color:var(--ink);font-weight:560;font-size:14px}
.ivo-app .drop a small{display:block;color:var(--ink-3);font-size:12px}
.ivo-app .drop.mega a small{font-size:11px}
.m-mob-h{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:16px 0 2px}

/* ── Homepage mobile fixes (legacy unscoped .fgrid/.app/.phone classes whose
   mobile collapses were lost in the .ivo-app/.m- refactor) ──────────────── */
@media(max-width:600px){
  /* For developers: card grid was staying multi-column -> horizontal overflow */
  #developers .fgrid,#developers .fgrid.c2,#developers .fgrid.c4{grid-template-columns:1fr !important}
  #developers .dev-wide{grid-column:1 / -1 !important}
  #developers .codewin{grid-column:1 / -1 !important;max-width:100%;overflow-x:auto}
  /* For node owners: decorative node map's absolutely-positioned nodes overflowed */
  #nodes .nodemap{max-width:100% !important;overflow:hidden}
  /* IVO Mobile: pull the phone hard-left and lift the "Approved on the go" chip up */
  .app-visual .phone{left:17% !important;top:-19% !important;width:161px !important;height:300px !important;transform:rotate(350deg) !important;box-shadow:0 26px 52px -20px rgb(255 255 255) !important;margin-left:-26px !important}
  .app-visual .app-chip{left:auto !important;right:0 !important;bottom:auto !important;top:61% !important}
}
@media(max-width:980px){.m-mobile .m-mobile-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.m-mobile .m-mobile-cta>*{height:48px!important;width:auto!important;min-width:0;margin:0!important;padding:0 8px!important;border-radius:12px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600}}
/* Freedom-by-design: clean compact 2x2 (was tall 4:5 + staggered) */
.ivo-app .fg figure{aspect-ratio:1/1 !important}
.ivo-app .fg figure:nth-child(2),.ivo-app .fg figure:nth-child(3),.ivo-app .fg figure{margin-top:0 !important}