/* ============================================================
   MAXIMUM — index page styles
   Extracted from an inline <style> in index.html so the CSP can drop
   'unsafe-inline' from style-src-elem. Linked immediately after
   theme-green.css, the position the <style> block occupied, so the
   cascade order against site.css and the theme is unchanged.

   Scoped to what index.html actually renders. The catalog / statband /
   AI-grid / spotlight / legacy / pillars blocks that used to live here
   belonged to platform.html, company.html and maximum-ai.html, all
   deleted in redesign round 3.
   ============================================================ */
  /* ---------- motion toggle (WCAG 2.2.2 — stops the hero rotation + migration montage) ----------
     Lives in the nav next to the other persistent controls rather than as its own
     floating element: an icon-only ghost button, quiet until hover/focus, with the full
     "pause/resume background motion" meaning carried by aria-label + aria-pressed instead
     of visible text. Swaps icon via the same aria-pressed the JS already sets — no extra
     class needed. */
  .motion-toggle{display:none;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:999px;border:1px solid transparent;
    background:transparent;color:var(--paper-faint);cursor:pointer;
    transition:color .15s,border-color .15s,background .15s;}
  /* hidden per design feedback (2026-08-02) — flip display back to inline-flex to restore */
  .motion-toggle:hover{color:var(--paper);border-color:var(--line-strong);background:rgba(244,244,242,.06);}
  .motion-toggle .mt-play{display:none;}
  .motion-toggle[aria-pressed="true"] .mt-pause{display:none;}
  .motion-toggle[aria-pressed="true"] .mt-play{display:block;}
  @media (prefers-reduced-motion:reduce){.motion-toggle{display:none;}}

  /* ---------- hero ---------- */
  /* 100dvh over the 100vh fallback: mobile Safari/Chrome size 100vh to the viewport with
     the address bar collapsed, so on first load (bar expanded) the hero renders taller
     than what's visible and the vertically-centered title sits below the fold. dvh tracks
     the address bar's actual state instead. */
  .hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
    justify-content:flex-end;}
  .hero-bg{position:absolute;inset:0;z-index:0;background:#08080a;overflow:hidden;}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;
    filter:grayscale(.24) brightness(1.05) contrast(1.03) saturate(.92);
    transform:scale(1.04);transition:opacity 0.4s ease;}
  .hero-vignette{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(125% 105% at 50% 38%,transparent 46%,rgba(0,0,0,.55) 100%);}
  .hero-veil{position:absolute;inset:0;background:
      radial-gradient(120% 95% at 50% 46%,rgba(8,8,10,.28) 12%,rgba(8,8,10,.62) 80%),
      linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.34) 34% 52%,rgba(8,8,10,.97) 100%);}
  .hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:140px var(--gutter) 60px;gap:30px;}
  .hero-statement{font-weight:500;letter-spacing:-.026em;line-height:.98;
    font-size:clamp(40px,7.4vw,104px);max-width:18ch;margin:0;text-wrap:balance;}
  .hero-request{display:none;}
  /* Sits over the hero video, so it needs its own translucent treatment rather than
     .btn's border-on-ink. */
  .btn-glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.35);color:#fff;
    backdrop-filter:blur(6px);}
  .btn-glass:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);}

  /* ---------- fused platform → AI cinematic ---------- */
  .core-seq{position:relative;height:560vh;}
  /* #0c0c0e, not --ink (#171719) — this pin covers 560vh, most of the page's scroll
     distance, and needs to match the near-black the hero/migration/investors/footer
     all use rather than the lighter surface tone modals use elsewhere. */
  .csq-pin{position:sticky;top:0;height:100vh;background:#0c0c0e;}
  /* One shared background layer for all three scenes: the globe zooms continuously
     across the whole sequence, so it can't be re-mounted per scene. */
  .csq-bg{position:absolute;inset:0;z-index:0;}
  .csq-bg > *{position:absolute;inset:0;width:100%;height:100%;}
  .csq-scene{position:absolute;inset:0;display:flex;align-items:center;}
  .csq-scene .csq-canvas{position:absolute;inset:0;z-index:0;}
  .csq-scene .csq-canvas > *{position:absolute;inset:0;width:100%;height:100%;}
  .csq-scene .csq-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.62) 40%,rgba(8,8,10,.14) 72%,transparent 100%),
      radial-gradient(120% 120% at 50% 50%,transparent 40%,rgba(8,8,10,.5) 100%);}
  .csq-fg{position:relative;z-index:6;width:100%;}
  .csq-copy{max-width:640px;}
  .csq-copy .csq-h{font-size:clamp(38px,5.6vw,96px);font-weight:500;letter-spacing:-.03em;line-height:.98;margin:20px 0 0;text-wrap:balance;}
  .csq-copy .csq-sub{margin-top:22px;font-size:clamp(15px,1.35vw,19px);color:var(--paper-dim);line-height:1.5;max-width:58ch;}
  .csq-scene-b{opacity:0;pointer-events:none;}
  #csq-b .csq-copy{max-width:760px;}
  .csq-scene-c{opacity:0;pointer-events:none;}
  #csq-c{z-index:5;}
  #csq-c .csq-copy .csq-h,#csq-c .csq-copy .csq-sub{color:#fff;}
  /* Fades the whole pin to black after "engineered to defend" so the sequence hands off
     to the migration section rather than cutting. */
  .csq-endblack{position:absolute;inset:0;z-index:7;background:#0c0c0e;opacity:0;pointer-events:none;}

  /* ---------- migration engine ---------- */
  .migration{background:#0c0c0e;position:relative;overflow:hidden;min-height:88vh;
    display:flex;align-items:center;padding-block:clamp(72px,10vw,140px);}
  .mig-stage{position:absolute;inset:0;z-index:0;}
  .mig-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .18s linear;}
  .mig-gradient{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.55) 38%,rgba(12,12,14,.12) 72%,rgba(12,12,14,.4) 100%),
      linear-gradient(180deg,#0c0c0e 0%,rgba(12,12,14,0) 26%,rgba(12,12,14,0) 60%,#0c0c0e 100%);}
  /* .migration is a flex container (for align-items:center), so .wrap's max-width+auto-margins
     alone leave this shrunk to its content width and re-centered instead of stretched to
     --maxw — width:100% forces the same flex-sizing .csq-fg already gets, keeping the "Leave
     legacy behind" heading flush with "Engineered to defend" above it. */
  .mig-fg{position:relative;z-index:2;width:100%;}
  .mig-copy{max-width:60ch;text-align:left;}
  .mig-h{margin-top:20px;font-size:clamp(38px,5.6vw,96px);letter-spacing:-.03em;line-height:.98;}
  .mig-lead{margin-top:22px;max-width:56ch;}

  /* ---------- investors strip ---------- */
  .home-investors{background:#0c0c0e;text-align:center;position:relative;
    padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(120px,16vw,240px);}
  .home-investors::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
    background:linear-gradient(180deg,rgba(12,12,14,0) 0%,rgba(12,12,14,.7) 55%,#0c0c0e 100%);}
  .home-investors .inv-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);}
  .home-investors .inv-row{margin-top:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(32px,5vw,72px);}
  .home-investors .inv-row img{height:28px;width:auto;opacity:.72;filter:saturate(0);transition:opacity .2s ease;}
  .home-investors .inv-row img:hover{opacity:1;}
  .home-investors .inv-row img.inv-crv{height:88px;}
  .home-investors .inv-row img.inv-pear{height:62px;}
  .home-investors .inv-row img.inv-pnp{height:42px;}
  .home-investors .inv-row img.inv-anthemis{height:76px;}
  @media (max-width:600px){.home-investors .inv-row img{height:22px;}.home-investors .inv-row img.inv-crv{height:66px;}.home-investors .inv-row img.inv-pear{height:44px;}.home-investors .inv-row img.inv-pnp{height:32px;}.home-investors .inv-row img.inv-anthemis{height:58px;}}

  /* ---------- closing ---------- */
  .closing{text-align:center;padding-block:clamp(90px,13vw,180px);}
  .closing .display{margin-inline:auto;max-width:18ch;}

  /* Small screens drop the pinned scroll sequence to a static layout (js/page-index.js's
     mqSmall check), but the migration montage now loads on mobile too — .mig-gradient
     stays enabled here so its copy keeps the same contrast scrim over the video. */
  @media (max-width:760px){
    .rule-hide-mobile{display:none;}
    .hero-photo{display:none!important;}
    .hero-bg{background:#08080a;}
    .hero-explore{display:none;}
    .mig-lead{font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:var(--paper-dim);}
    .csq-sub-flow br{display:none;}
    #csq-c .csq-copy .csq-sub{color:var(--paper-dim);}
    .core-seq{height:auto;}
    .csq-pin{position:static;height:auto;}
    .csq-bg{position:relative;inset:auto;height:clamp(340px,84vw,460px);}
    .csq-scene{position:relative;inset:auto;display:block;padding:64px 0;}
    /* Scene B's own "ai-wing" canvas: a second dense diagram with none of the scroll-driven
       crossfade to justify it once everything is static — hidden per design feedback rather
       than shown all at once alongside the shared globe. */
    .csq-scene .csq-canvas{display:none;}
    .csq-scene-b,.csq-scene-c{opacity:1;}
    .csq-scene .csq-scrim{display:none;}
    .csq-endblack{display:none;}
  }

  /* Matches the breakpoint where the header's own Request access button disappears
     (site.css .nav-cta .btn.nav-keep.btn-solid) — this replaces it in the hero instead
     of leaving the CTA with nowhere to live below 520px. */
  @media (max-width:520px){
    .hero-request{display:flex;}
  }

  /* Same static, stacked layout as the small-viewport fallback above: js/page-index.js
     already stops driving the scroll-jack and shows all three scenes at opacity 1 under
     prefers-reduced-motion, but without this the scenes stay absolutely stacked inside a
     100vh pinned box and only the top one (scene C) is visible — this gives them the
     block layout that JS branch actually expects. */
  @media (prefers-reduced-motion:reduce){
    .csq-sub-flow br{display:none;}
    #csq-c .csq-copy .csq-sub{color:var(--paper-dim);}
    .core-seq{height:auto;}
    .csq-pin{position:static;height:auto;}
    .csq-bg{position:relative;inset:auto;height:clamp(340px,84vw,460px);}
    .csq-scene{position:relative;inset:auto;display:block;padding:64px 0;}
    /* Scene B's own "ai-wing" canvas: a second dense diagram with none of the scroll-driven
       crossfade to justify it once everything is static — hidden per design feedback rather
       than shown all at once alongside the shared globe. */
    .csq-scene .csq-canvas{display:none;}
    .csq-scene-b,.csq-scene-c{opacity:1;}
    .csq-scene .csq-scrim{display:none;}
    .csq-endblack{display:none;}
  }