/* ==========================================================================
   SciMynd marketing site, v1.3 layer
   Loads after site.css and only extends it. Holds what the v1.3 rebuild added:
   the light/dark theme, the theme-following "stage" sections the viewer
   captures sit in, the hero motion, the Inside-the-app cards, the pipeline
   diagram, the Platform wheel and its phone layout, and the pricing tiers.

   Motion principle: everything that moves is either the product (captures from
   the viewer) or a slow, quiet idea made visible -- the library growing, the
   spokes carrying a persona's path, a press rippling. Nothing loops fast, nothing
   moves under text, and prefers-reduced-motion turns all of it off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Apex (was Catalyst) keeps Catalyst's slate; Canvas takes the brand blue; Private Vault is a
     darker Vault amber so the two read as related but distinct on the wheel. */
  --apex:#4B535E;          --apex-deep:#0D1638;          --apex-ink:#3A414C;
  --canvas:#0A6FD0;        --canvas-deep:#084F9E;        --canvas-ink:#0A5CB8;
  --private-vault:#C77A00; --private-vault-deep:#A35F00;

  /* The "stage": the showcase sections that hold viewer captures (Inside the app, Beyond anatomy,
     the Platform wheel). They follow the theme because the captures do -- the viewer's light theme
     behind light mode, its dark theme behind dark mode -- so a shot never sits on the wrong ground. */
  --stage-bg:#F3F7FF;
  --stage-bg-2:#FFFFFF;
  --stage-ink:#0E1638;
  --stage-muted:#4C5873;
  --stage-faint:#7D89A3;
  --stage-accent:#0A6FD0;
  --stage-grid:rgba(10,111,208,0.065);
  --stage-card:#FFFFFF;
  --stage-card-2:#F8FBFF;
  --stage-line:#DFE7F5;
  --stage-line-strong:#CBD8EF;
  --stage-media:#E9EFF9;
  --stage-glow-a:rgba(0,174,255,0.16);
  --stage-glow-b:rgba(32,85,206,0.10);
  --stage-shadow:0 30px 70px -44px rgba(14,22,56,0.45);
  --stage-ghost-bg:#FFFFFF;
  --stage-ghost-line:#CBD8EF;
  --stage-spoke:rgba(14,22,56,0.16);
  --stage-hub-a:#FFFFFF;
  --stage-hub-b:#E3ECFF;

  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* Hard-coded light values in site.css that tokens could not reach. */
html.themeable[data-theme="dark"] header.site{background:rgba(6,11,30,0.8);}
html.themeable[data-theme="dark"] .nav-link{color:var(--text-body);}
html.themeable[data-theme="dark"] .nav-link:hover,
html.themeable[data-theme="dark"] .nav-link[aria-current="page"]{color:#fff;}
html.themeable[data-theme="dark"] .nav-signin{color:var(--text);}
html.themeable[data-theme="dark"] .toggle a[aria-pressed="true"],
html.themeable[data-theme="dark"] :is(.plan-switch,.plan-period) a.active{background:var(--blue-deep);color:#fff;}
html.themeable[data-theme="dark"] .plan-badge{background:#1E3A8A;}
html.themeable[data-theme="dark"] .credit-step .n{background:#10224D;}
html.themeable[data-theme="dark"] .why-n,
html.themeable[data-theme="dark"] .pillar-n{color:#2C3E72;}
html.themeable[data-theme="dark"] .compare-wrap{box-shadow:none;}
html.themeable[data-theme="dark"] .sec-hero{
  background:radial-gradient(ellipse 74% 62% at 82% 0%,#0E1C4A 0%,var(--bg) 58%);
}
/* The module's tone as an actual bloom: a flat disc at 10% read as a grey stain, worst in Apex's slate. */
.mod-glance::before{
  top:-120px;right:-120px;width:300px;height:300px;
  background:radial-gradient(circle,var(--mod,var(--blue)) 0%,transparent 68%);opacity:.16;
}
html.themeable[data-theme="dark"] .mod-glance::before{opacity:.26;}
html.themeable[data-theme="dark"] .btn-outline{background:transparent;}
html.themeable[data-theme="dark"] .btn-outline:hover{background:var(--surface-hover);color:#fff;border-color:var(--blue);}

/* Smooth, but only once the page has settled: a theme applied on load must not animate in. */
html.theme-anim body,
html.theme-anim header.site,
html.theme-anim .stage,
html.theme-anim .mod-card,
html.theme-anim .plan,
html.theme-anim .sec-soft{transition:background-color .45s ease,color .45s ease,border-color .45s ease;}

/* --------------------------------------------------------------------------
   Header additions
   -------------------------------------------------------------------------- */
.brand-dark{display:none;}
html.themeable[data-theme="dark"] .brand-light{display:none;}
/* The on-dark lockup is 4.74:1 against the light one's 5.79:1, so it is set taller to land at the
   same width -- the wordmarks then match exactly when the theme flips. */
html.themeable[data-theme="dark"] .brand-dark{display:block;height:calc(clamp(28px,2.6vw,36px) * 1.222);width:auto;margin:-4px 0;}

.btn-launch{gap:8px;}
.btn-launch-ico{width:17px;height:17px;transition:transform .25s var(--ease-out);}
.btn-launch:hover .btn-launch-ico{transform:translate(2px,-2px);}

/* Phone header: logo, Launch App, menu (spec section 2). The button sits just left of the menu icon. */
.nav-launch-m{display:none;}
@media (max-width:1199px){
  header.site > .wrap{gap:10px;}
  .brand{margin-right:auto;}
  .nav-launch-m{display:inline-flex;height:42px;padding:0 20px;font-size:var(--sm-font-size-sm);box-shadow:var(--sh-primary);}
}
/* Below ~470px the header holds the logo, Launch App and the menu, and nothing else. */
@media (max-width:470px){
  .brand img{height:24px;}
  html.themeable[data-theme="dark"] .brand-dark{height:calc(24px * 1.222);}
  .nav-launch-m{height:40px;padding:0 16px;font-size:var(--sm-font-size-sm);}
  .nav-toggle{width:42px;height:42px;}
}
.drawer-theme{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;
  height:48px;border-radius:var(--pill);cursor:pointer;
  font-family:var(--sans);font-size:var(--sm-font-size-sm);font-weight:700;color:#fff;
  background:transparent;border:1.5px solid rgba(255,255,255,0.22);
}
.drawer-theme svg{width:18px;height:18px;}

.drawer-mods a{position:relative;}
/* Apex's slate key disappears on the always-navy drawer; use its on-dark tone (as the dark theme does). */
.drawer-mods a[href$="/platform/apex"] .dot{background:#93A3C4 !important;}
.drawer-launch{margin-left:auto;margin-right:10px;height:42px;padding:0 16px;font-size:var(--sm-font-size-sm);}
.drawer-soon{
  margin-left:auto;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;
  color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--pill);padding:4px 8px;
}
.drawer-signin{
  display:block;text-align:center;padding:12px;font-size:var(--sm-font-size-md);font-weight:700;
  color:rgba(255,255,255,0.8);
}
.drawer-signin:hover{color:#fff;}

/* --------------------------------------------------------------------------
   Status pills: the v1.3 rule ("only sell what is live") made visible.
   -------------------------------------------------------------------------- */
.status-pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:var(--sans);font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  padding:6px 10px;border-radius:var(--pill);border:1px solid;
}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.status-live{color:var(--good-ink);background:var(--good-bg-2);border-color:var(--good-line);}
.status-live::before{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);}
.status-coming{color:#8A5A00;background:#FFF6E3;border-color:#F1DCAE;}
.status-coming::before{background:transparent;border:1.5px solid currentColor;width:7px;height:7px;}
html.themeable[data-theme="dark"] .status-coming{color:#F3C46E;background:rgba(243,196,110,0.08);border-color:rgba(243,196,110,0.3);}

/* Module cards: the roadmap is a step dimmer, never hidden. */
.mod-card-top .status-pill,.mod-card-top .sm-badge{margin-left:auto;}
.mod-card.is-coming .mod-mark{filter:saturate(.55);opacity:.85;}
.mod-card.is-coming h2,.mod-card.is-coming h3{color:var(--text-strong);}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-v13{
  min-height:min(94vh,880px);
  padding:clamp(96px,11vw,150px) 0 clamp(88px,9vw,120px);
  isolation:isolate;
}
.hero-film{position:absolute;inset:0;z-index:0;overflow:hidden;}
html:not(.js) .hero-film{background:#04091A url("../../images/v13/hero-reel-poster.jpg") 62% 50% / cover no-repeat;}
@media (max-width:720px){
  html:not(.js) .hero-film{background-image:url("../../images/v13/hero-reel-poster-portrait.jpg");background-position:60% 50%;}
}
.hero-film .hero-media{transform-origin:62% 50%;}
html.js .hero-film .hero-media{animation:hero-push 14s var(--ease-soft) both;}
@keyframes hero-push{from{transform:scale(1.09);}to{transform:scale(1);}}

/* Phones on a slow connection, or asking to save data: three stills cross-fading instead of video. */
.hero-stills{position:absolute;inset:0;}
.hero-stills[hidden]{display:none;}
.hero-stills img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:hero-still 15s linear infinite;
}
.hero-stills img:nth-child(2){animation-delay:5s;}
.hero-stills img:nth-child(3){animation-delay:10s;}
@keyframes hero-still{
  0%{opacity:0;transform:scale(1.06);}
  7%{opacity:1;}
  33%{opacity:1;}
  40%{opacity:0;transform:scale(1);}
  100%{opacity:0;}
}

.hero-v13 .hero-scrim{
  background:
    linear-gradient(180deg,rgba(4,9,26,0) 62%,rgba(4,9,26,0.72) 100%),
    linear-gradient(104deg,rgba(4,9,26,0.94) 0%,rgba(8,17,46,0.84) 40%,rgba(8,17,46,0.48) 70%,rgba(8,17,46,0.22) 100%);
}
/* A blueprint grid over the scrim's dark side only, drifting very slowly: the "3D intelligence"
   in the eyebrow, said without a single extra word. */
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(111,211,255,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,211,255,0.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 64%);
  mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 64%);
}

/* Copy entrance: each element rises into place in turn; the headline's lines are masked so the
   words come up out of their own baseline rather than fading from nowhere. */
html.js .hero-in{
  opacity:0;transform:translateY(18px);
  animation:hero-in .95s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 95ms + 120ms);
}
@keyframes hero-in{to{opacity:1;transform:none;}}
.hero-line{display:block;overflow:hidden;padding:0 .12em .1em 0;margin:0 -.12em -.1em 0;}
html.js .hero-line > .hero-in{
  display:inline-block;opacity:1;transform:translateY(104%);
  animation-name:hero-line-in;animation-duration:1.05s;
}
@keyframes hero-line-in{to{transform:none;}}

.hero-v13 .hero-copy .row{margin-bottom:32px;}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 24px;}
.hero-facts li{
  display:flex;align-items:center;gap:10px;
  font-size:var(--sm-font-size-sm);font-weight:600;color:rgba(255,255,255,0.72);
}
.hero-facts li::before{
  content:'';width:15px;height:15px;border-radius:50%;flex:none;
  background:rgba(0,174,255,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%236FD3FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(111,211,255,0.4);
}

.hero-cue{
  position:absolute;left:50%;bottom:26px;z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.35);
}
.hero-cue span{
  position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-2px;
  border-radius:2px;background:#fff;
}
html.js .hero-cue span{animation:cue 2s var(--ease-soft) 2s infinite;}
@keyframes cue{0%{opacity:0;transform:translateY(0);}25%{opacity:1;}80%{opacity:0;transform:translateY(14px);}100%{opacity:0;}}
@media (max-height:760px),(max-width:720px){.hero-cue{display:none;}}

@media (max-width:720px){
  /* On a phone the hero is one screen: copy anchored to the bottom over the footage, the way a
     film title card sits, so the clip reads above it and Launch App is in thumb reach. */
  .hero-v13{
    min-height:calc(100svh - var(--header-h));
    align-items:flex-end;padding:96px 0 32px;
  }
  .hero-v13 .hero-scrim{
    background:linear-gradient(180deg,rgba(4,9,26,0.25) 0%,rgba(4,9,26,0.55) 34%,rgba(4,9,26,0.94) 70%,rgba(4,9,26,0.98) 100%);
  }
  .hero-film .hero-media{object-position:60% 50%;}
  .hero-v13 .badge-hero{font-size:var(--sm-font-size-xs);padding:8px 12px;margin-bottom:20px;letter-spacing:.08em;}
  /* Four clean lines: "Knowledge," / "grounded in expertise." / "Sourced, reviewed," / "attributable." */
  .hero-v13 .h1-hero{font-size:clamp(29px,8.1vw,36px);}
  .hero-facts{display:none;}
  .hero-v13 .hero-copy h1{margin-bottom:16px;}
  .hero-v13 .lede-hero{font-size:var(--sm-font-size-md);margin-bottom:24px;}
  .hero-v13 .hero-copy .row{margin-bottom:24px;}
  .hero-v13 .hero-copy .row .btn{flex:1 1 100%;}
  .hero-facts{gap:6px 16px;}
  .hero-facts li{font-size:var(--sm-font-size-xs);}
}

/* --------------------------------------------------------------------------
   Stage sections
   -------------------------------------------------------------------------- */
.stage{
  /* clip, not hidden: overflow:hidden makes the section a scroll container, and the pinned frame in
     Inside the app would then stick to a box that never scrolls. hidden stays as the fallback. */
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding:var(--sec-y) 0;
  background:linear-gradient(180deg,var(--stage-bg) 0%,var(--stage-bg-2) 100%);
  color:var(--stage-ink);
}
.stage-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.stage-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--stage-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--stage-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 10%,transparent 78%);
}
.stage-bg::after{
  content:'';position:absolute;inset:-20% -10% auto;height:120%;
  background:
    radial-gradient(40% 36% at 18% 12%,var(--stage-glow-a),transparent 70%),
    radial-gradient(42% 40% at 86% 40%,var(--stage-glow-b),transparent 72%);
}

/* The site's on-dark utilities were written for permanently dark panels. Inside a stage they follow
   the stage instead, so the same markup reads correctly in both themes. */
.stage h1.on-dark,.stage h2.on-dark,.stage h3.on-dark{color:var(--stage-ink);}
.stage h1.on-dark em,.stage h2.on-dark em{color:var(--stage-accent);}
.stage .eyebrow.on-dark{color:var(--stage-accent);}
.stage .btn-ghost-light{
  background:var(--stage-ghost-bg);color:var(--stage-ink);border-color:var(--stage-ghost-line);
}
.stage .btn-ghost-light:hover{color:var(--stage-ink);border-color:var(--stage-accent);}
.stage-head{max-width:860px;}
.stage-head p{color:var(--stage-muted);font-size:var(--sm-font-size-lead);line-height:1.65;}

/* --------------------------------------------------------------------------
   Themed media (Redesign/_ThemedMedia)
   -------------------------------------------------------------------------- */
.themed-media{display:block;position:relative;overflow:hidden;background:var(--stage-media);}
.themed-media picture,.themed-media img{display:block;width:100%;height:100%;}
.themed-media img{object-fit:cover;}
.themed-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease;
}
.themed-media.is-playing video{opacity:1;}
.themed-media.is-missing img{visibility:hidden;}
.themed-media.is-missing{
  background:
    linear-gradient(var(--stage-grid) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--stage-grid) 1px,transparent 1px) 0 0/28px 28px,
    var(--stage-media);
}

/* --------------------------------------------------------------------------
   Inside the app: feature cards
   -------------------------------------------------------------------------- */
.vf-grid{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:none;}
@media (max-width:1060px){.vf-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.vf-card{
  --vf-glow:color-mix(in srgb,var(--vf) 55%,transparent);
  position:relative;display:flex;flex-direction:column;
  background:var(--stage-card);border:1px solid var(--stage-line);
  border-radius:24px;overflow:hidden;
  box-shadow:var(--stage-shadow);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s ease;
}
.vf-card::after{
  /* The module-coloured edge light: invisible until the card is hovered or its loop is playing. */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--vf-glow),0 0 0 0 transparent;
  opacity:0;transition:opacity .45s ease;
}
.vf-card:hover{transform:translateY(-6px);border-color:var(--vf-glow);}
.vf-card:hover::after,.vf-card.is-active::after{opacity:1;}
.vf-card:hover{box-shadow:0 40px 80px -48px var(--vf-glow),var(--stage-shadow);}

.vf-media{position:relative;aspect-ratio:4 / 3;}
.vf-media .themed-media{position:absolute;inset:0;}
.vf-media .themed-media img{transition:transform 1.2s var(--ease-out);}
.vf-card:hover .vf-media .themed-media img{transform:scale(1.04);}
.vf-media::after{
  content:'';position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--stage-card-2) 0%,transparent));
}
.vf-copy{padding:24px 24px 28px;display:grid;gap:8px;}
.vf-n{
  font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;color:var(--vf);
  font-variant-numeric:tabular-nums;
}
html.themeable:not([data-theme="dark"]) .vf-n{filter:brightness(.8) saturate(1.2);}
.vf-copy h3{font-size:var(--sm-font-size-xl);color:var(--stage-ink);}
.vf-copy p{font-size:var(--sm-font-size-sm);line-height:1.65;color:var(--stage-muted);text-wrap:pretty;}

/* The rail reveals as one piece: cards off to the right would otherwise wait for their own
   reveal and arrive faded, finishing their fade mid-swipe. Once the first card is in, all are. */
html.js .vf-grid:has(> .vf-card.is-revealed) > .vf-card{opacity:1;transform:none;}
/* Phone: a swipeable rail, one card and a peek of the next. Only the card in view plays. */
.vf-dots{display:none;}
@media (max-width:720px){
  .vf-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 20px;
    scroll-padding-inline:var(--gutter);scrollbar-width:none;
  }
  .vf-grid::-webkit-scrollbar{display:none;}
  .vf-card{scroll-snap-align:start;}
  .vf-card:hover{transform:none;}
  .vf-dots{display:flex;justify-content:center;gap:8px;margin-top:6px;}
  .vf-dots span{
    width:7px;height:7px;border-radius:var(--pill);background:var(--stage-line-strong);
    transition:width .35s var(--ease-out),background .35s ease;
  }
  .vf-dots span.is-on{width:22px;background:var(--stage-accent);}
}

/* --------------------------------------------------------------------------
   Inside the app, desktop: the pinned viewer frame
   Six features scroll past one frame that stays put. Whichever feature crosses
   the middle of the screen takes the frame: its capture wipes in from the left
   edge behind a band of its own colour, settles from a slight zoom, and the
   tag and the rail under the frame move on. The previous shot stays underneath
   until the wipe has covered it, so the frame is never empty mid-transition.
   -------------------------------------------------------------------------- */
.vf-story{display:none;}
@media (min-width:1100px){
  .vf-story{
    display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
    gap:clamp(40px,5vw,84px);align-items:start;margin-top:clamp(8px,2vw,24px);
  }
  .stage-inside .vf-grid,.stage-inside .vf-dots{display:none;}
}
.vf-story-list{display:grid;padding:8vh 0 22vh;}
.vf-step{
  position:relative;min-height:40vh;padding-left:32px;
  display:flex;flex-direction:column;justify-content:center;
}
.vf-step::before{
  content:'';position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:var(--vf);transform:translateY(-50%);
  box-shadow:0 0 14px var(--vf);
  transition:height .7s var(--ease-out);
}
.vf-step h3{transition:color .5s var(--ease-soft);}
.vf-step:not(.is-active) h3{color:var(--stage-faint);}
.vf-step:not(.is-active) .vf-n{opacity:.6;}
.vf-step.is-active::before{height:84px;}
.vf-step .vf-n{font-size:var(--sm-font-size-xs);}
.vf-step h3{font-size:clamp(1.875rem,1.6rem + 1.2vw,2.5rem);line-height:1.1;color:var(--stage-ink);margin:12px 0 14px;}
.vf-step p{font-size:var(--sm-font-size-md);line-height:1.65;color:var(--stage-muted);max-width:40ch;text-wrap:pretty;}

.vf-story-stage{position:sticky;top:calc(var(--header-h) + max(4vh,24px));}
.vf-story-frame{
  margin:0;border-radius:24px;overflow:hidden;
  background:var(--stage-card);border:1px solid var(--stage-line-strong);
  box-shadow:0 60px 120px -60px rgba(4,9,26,0.75),var(--stage-shadow);
}
html.themeable:not([data-theme="dark"]) .vf-story-frame{background:#fff;box-shadow:0 60px 120px -64px rgba(14,22,56,0.45);}
.vf-story-bar{background:transparent;border-bottom-color:var(--stage-line);}
.vf-story-shots{position:relative;aspect-ratio:16 / 10;background:var(--stage-media);overflow:hidden;}
.vf-shot{position:absolute;inset:0;clip-path:inset(0 100% 0 0);z-index:0;}
.vf-shot.is-active{clip-path:inset(0 0 0 0);z-index:2;}
.vf-shot.was-active{clip-path:inset(0 0 0 0);z-index:1;}
html.js .vf-shot{transition:clip-path 1s cubic-bezier(.77,0,.18,1);}
html.js .vf-shot.was-active{transition:none;}
.vf-shot .themed-media{position:absolute;inset:0;transform:scale(1.07);}
html.js .vf-shot .themed-media{transition:transform 1.8s var(--ease-out);}
.vf-shot.is-active .themed-media{transform:none;}
/* The colour band riding the wipe's leading edge. */
.vf-shot::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:14%;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vf) 55%,transparent));
  opacity:0;
}
html.js .vf-shot.is-entering::after{animation:wipe-band 1s cubic-bezier(.77,0,.18,1) both;}
@keyframes wipe-band{0%{opacity:1;transform:translateX(-620%);}85%{opacity:1;}100%{opacity:0;transform:translateX(0);}}

.vf-story-tag{
  display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-top:1px solid var(--stage-line);
  font-size:var(--sm-font-size-sm);font-weight:700;color:var(--stage-ink);
}
/* A short bar in the feature's colour, the same mark as the active step's rail -- not a glowing status dot. */
.vf-story-dot{width:3px;height:14px;border-radius:2px;background:var(--story-color,var(--core));transition:background .5s ease;}
.vf-story-count{margin-left:auto;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;color:var(--stage-faint);font-variant-numeric:tabular-nums;}
.vf-story-count b{color:var(--stage-ink);}
.vf-story-rail{height:2px;margin:14px 6px 0;border-radius:2px;background:var(--stage-line);overflow:hidden;}
.vf-story-rail span{display:block;height:100%;width:calc(var(--story-p,1) / 6 * 100%);background:linear-gradient(90deg,#0A9BF0,var(--story-color,#0A9BF0));transition:width .8s var(--ease-out),background .5s ease;}

/* --------------------------------------------------------------------------
   Beyond anatomy
   -------------------------------------------------------------------------- */
.stage-beyond{padding-top:clamp(24px,3vw,40px);}
.stage-inside + .stage-beyond{background:linear-gradient(180deg,var(--stage-bg-2) 0%,var(--stage-bg) 100%);}
.beyond-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center;}
@media (min-width:980px){.beyond-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);}}
.beyond-copy h2{font-size:clamp(2.25rem,1.58rem + 2.98vw,3.25rem);margin-bottom:20px;}
.beyond-lede{font-size:var(--sm-font-size-lead);line-height:1.65;color:var(--stage-muted);max-width:52ch;text-wrap:pretty;}
.beyond-models{margin:28px 0 0;display:grid;gap:10px;max-width:460px;}
.beyond-models li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;
  background:var(--stage-card);border:1px solid var(--stage-line);
}
.beyond-models b{font-size:var(--sm-font-size-md);color:var(--stage-ink);}
.beyond-models li span:last-child{font-size:var(--sm-font-size-xs);font-weight:700;color:var(--stage-faint);letter-spacing:.02em;}
.beyond-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(0,174,255,0.18);}
.beyond-models li:nth-child(2) .beyond-dot{background:var(--core);box-shadow:0 0 0 4px rgba(255,112,21,0.18);}

.beyond-media{position:relative;aspect-ratio:16 / 12.4;}
.beyond-shot{position:absolute;margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--stage-line-strong);box-shadow:var(--stage-shadow);will-change:transform;}
.beyond-shot .themed-media{aspect-ratio:16 / 10;}
.beyond-shot-back{top:0;right:0;width:76%;}
.beyond-shot-front{left:0;bottom:0;width:78%;box-shadow:0 50px 90px -40px rgba(4,9,26,0.6);}
.beyond-shot figcaption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-size:var(--sm-font-size-xs);font-weight:700;color:#fff;
  background:rgba(8,16,43,0.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);border-radius:var(--pill);padding:8px 12px;
}

/* The turbofan and factory cycle renders (1600x1000), cross-fading. */
.beyond-shot-front.is-cycle{width:min(46%,380px);left:4%;bottom:6%;}
.shot-cycle{position:relative;display:block;aspect-ratio:16 / 10;background:#2A3A58;}
.shot-cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.shot-cycle img:first-child{opacity:1;}
/* The cycle starts only once v13.js has seen all four frames load (.is-ready): started earlier, it fades
   between images that have not arrived and the card sits on its empty fill. Until then the first frame
   holds. Each delay is 1s early so frame 1 is already fully in when the cycle starts, never fading up
   from nothing. Longhands, not the shorthand, and the delays at the same specificity: otherwise all four
   frames get one delay and fade in and out together. */
html.js .shot-cycle.is-ready img{animation-name:shot-cycle;animation-duration:14s;animation-timing-function:var(--ease-soft);animation-iteration-count:infinite;}
html.js .shot-cycle.is-ready img:nth-child(1){animation-delay:-1s;}
html.js .shot-cycle.is-ready img:nth-child(2){animation-delay:2.5s;}
html.js .shot-cycle.is-ready img:nth-child(3){animation-delay:6s;}
html.js .shot-cycle.is-ready img:nth-child(4){animation-delay:9.5s;}
@keyframes shot-cycle{0%{opacity:0;}6%,25%{opacity:1;}31%,100%{opacity:0;}}
.viewer-frame-cycle{display:block;max-width:420px;margin:28px auto;border-radius:14px;overflow:hidden;}

@media (max-width:520px){
  .beyond-shot-front.is-cycle{width:100%;}
  .beyond-media{aspect-ratio:auto;display:grid;gap:14px;}
  .beyond-shot{position:relative;width:100%;inset:auto;}
}

/* --------------------------------------------------------------------------
   Why SciMynd (home): the authorship chain
   -------------------------------------------------------------------------- */
.authorship{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:28px;}
.authorship-step{
  font-size:var(--sm-font-size-xs);color:var(--text-muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:8px 12px;
}
.authorship-step b{color:var(--navy);font-weight:800;}
.authorship-line{width:22px;height:1.5px;background:linear-gradient(90deg,var(--line-strong),var(--blue));position:relative;}
.authorship-line::after{
  content:'';position:absolute;right:-1px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--blue);
}
html.js .why-aside .authorship-line{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out) .5s;}
html.js .why-aside.is-revealed .authorship-line{transform:none;}
html.js .why-aside.is-revealed .authorship-line + .authorship-step + .authorship-line{transition-delay:.85s;}

/* --------------------------------------------------------------------------
   How it works: the library grows above steps 1-3; the visitor meets step 4.
   -------------------------------------------------------------------------- */
.pipe{display:grid;gap:clamp(22px,2.4vw,32px);}
@media (min-width:1100px){.pipe{grid-template-columns:minmax(0,3fr) minmax(260px,1.12fr);align-items:stretch;}}
.pipe-build{display:grid;gap:0;}
.pipe-library{
  position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 24px;border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(0,174,255,0.18),rgba(91,76,255,0.12));
  border:1px solid rgba(0,174,255,0.42);
}
.pipe-library-label{
  font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.pipe-library-note{margin-left:auto;font-size:var(--sm-font-size-xs);color:rgba(255,255,255,0.62);font-style:italic;font-family:var(--serif);}
/* Twelve volumes on a shelf, filling in one after another and starting again: the library is never
   finished, which is the point of putting it above the steps instead of after them. */
.pipe-library-grow{display:flex;gap:6px;align-items:flex-end;height:26px;}
.pipe-library-grow i{
  display:block;width:9px;border-radius:2px;
  background:linear-gradient(180deg,#6FD3FF,#2E7BFF);
  height:calc(14px + (var(--h,0) * 1px));opacity:.25;
}
.pipe-library-grow i:nth-child(3n){--h:8;}
.pipe-library-grow i:nth-child(3n+1){--h:3;}
.pipe-library-grow i:nth-child(3n+2){--h:11;}
/* Longhands so the per-bar delays below survive (see .shot-cycle). */
html.js .pipe.is-inview .pipe-library-grow i{animation-name:shelf;animation-duration:6s;animation-timing-function:var(--ease-soft);animation-iteration-count:2;animation-fill-mode:both;}
.pipe-library-grow i:nth-child(1){animation-delay:.0s}
.pipe-library-grow i:nth-child(2){animation-delay:.35s}
.pipe-library-grow i:nth-child(3){animation-delay:.7s}
.pipe-library-grow i:nth-child(4){animation-delay:1.05s}
.pipe-library-grow i:nth-child(5){animation-delay:1.4s}
.pipe-library-grow i:nth-child(6){animation-delay:1.75s}
.pipe-library-grow i:nth-child(7){animation-delay:2.1s}
.pipe-library-grow i:nth-child(8){animation-delay:2.45s}
.pipe-library-grow i:nth-child(9){animation-delay:2.8s}
.pipe-library-grow i:nth-child(10){animation-delay:3.15s}
.pipe-library-grow i:nth-child(11){animation-delay:3.5s}
.pipe-library-grow i:nth-child(12){animation-delay:3.85s}
@keyframes shelf{0%{opacity:.18;transform:scaleY(.5);transform-origin:bottom;}12%,100%{opacity:1;transform:none;}}

.pipe-steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:28px;}
.pipe-steps li{position:relative;}
/* Each authoring step feeds the library above it: a short riser with a bead travelling up it. */
.pipe-feed{position:absolute;left:40px;top:-27px;width:1.5px;height:27px;background:rgba(0,174,255,0.38);}
.pipe-feed i{position:absolute;left:-2.5px;bottom:0;width:6.5px;height:6.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);opacity:0;}
html.js .pipe.is-inview .pipe-feed i{animation-name:rise;animation-duration:2.8s;animation-timing-function:var(--ease-soft);animation-iteration-count:3;}
.pipe-steps li:nth-child(2) .pipe-feed i{animation-delay:.9s;}
.pipe-steps li:nth-child(3) .pipe-feed i{animation-delay:1.8s;}
@keyframes rise{0%{transform:translateY(0);opacity:0;}20%{opacity:1;}80%{opacity:1;}100%{transform:translateY(-26px);opacity:0;}}

.pipe-serve{position:relative;display:flex;flex-direction:column;gap:0;}
.pipe-steps-served{grid-template-columns:1fr;margin-top:0;}
/* From the library out to step 4: horizontal on a wide screen, where step 4 stands beside the band;
   vertical once everything stacks. */
.pipe-bridge{display:block;position:relative;height:26px;width:1.5px;margin-left:40px;background:rgba(0,174,255,0.38);}
.pipe-bridge i{position:absolute;left:-2.5px;top:0;width:6.5px;height:6.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);opacity:0;}
html.js .pipe.is-inview .pipe-bridge i{animation:drop 2.2s var(--ease-soft) .4s 3;}
@keyframes drop{0%{transform:translateY(0);opacity:0;}20%,80%{opacity:1;}100%{transform:translateY(20px);opacity:0;}}
@media (min-width:1100px){
  .pipe-serve{padding-top:0;}
  .pipe-bridge{position:absolute;left:-32px;top:30px;width:32px;height:1.5px;margin:0;}
  .pipe-bridge i{top:-2.5px;left:0;}
  @keyframes drop{0%{transform:translateX(0);opacity:0;}20%,80%{opacity:1;}100%{transform:translateX(26px);opacity:0;}}
  .pipe-steps-served li{height:100%;}
  .pipe-serve{display:grid;grid-template-rows:1fr auto;}
}
.pipe-you{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 0 24px;}
.pipe-you-link{display:block;width:1.5px;height:24px;margin-left:16px;background:linear-gradient(180deg,rgba(0,174,255,0.6),rgba(255,255,255,0.35));}
.pipe-you-node{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--navy-fixed);box-shadow:0 0 0 5px rgba(255,255,255,0.12);
}
.pipe-you-node svg{width:20px;height:20px;}
.pipe-you-label{margin-top:10px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.72);}
@media (min-width:1100px){.pipe-you{flex-direction:row;align-items:center;gap:12px;padding:16px 0 0 20px;}
  .pipe-you-link{width:1.5px;height:28px;margin:0;transform:translateY(-14px);}
  .pipe-you-label{margin:0;}
}

/* --------------------------------------------------------------------------
   Closing panel: a slow drift of light, no video to fetch.
   -------------------------------------------------------------------------- */
.cta-panel{isolation:isolate;}
.cta-panel::after{
  content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(28% 34% at 78% 70%,rgba(111,211,255,0.38),transparent 70%),
    radial-gradient(30% 30% at 20% 85%,rgba(91,76,255,0.32),transparent 70%);
}
.cta-panel > div{position:relative;}

/* Footage behind the closing panel: real event footage, pushed back under the brand blue so it reads as
   texture and the copy keeps full contrast. */
.cta-panel.has-film{background:#0A5CB8;}
.cta-film{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit;}
.cta-film video{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);transform:scale(1.04);}
.cta-film::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,rgba(10,92,184,0.62),rgba(10,92,184,0.9) 70%),
    linear-gradient(135deg,rgba(10,155,240,0.55),rgba(8,40,110,0.75));
}

/* Video figures in the news posts. */
.news-film{margin:28px 0 32px;}
.news-film video{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--r-card);background:#0B1330;border:1px solid var(--line-strong);}
.news-film figcaption{margin-top:12px;font-size:var(--sm-font-size-sm);color:var(--text-muted);text-align:center;}
.cta-tertiary{
  display:inline-flex;gap:6px;margin-top:24px;
  font-size:var(--sm-font-size-sm);font-weight:700;color:rgba(255,255,255,0.9);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,0.4);
}
.cta-tertiary:hover{color:#fff;text-decoration-color:#fff;}

/* --------------------------------------------------------------------------
   Module pages
   -------------------------------------------------------------------------- */
.mod-hero-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--sm-space-4);}
.mod-hero-eyebrow .eyebrow-bare{margin:0;}
.mod-hero::before{
  content:'';position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--mod,var(--blue)) 18%,transparent),transparent 70%);
  pointer-events:none;
}
.mod-hero{position:relative;overflow:hidden;}
.mod-hero > .wrap{position:relative;}

.coming-banner{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin:20px 0 6px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--warn-bg);border:1px solid var(--warn-line);
}
.coming-banner-tag{
  flex:none;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--warn);border-radius:var(--pill);padding:6px 10px;margin-top:1px;
}
.coming-banner p{flex:1 1 260px;font-size:var(--sm-font-size-sm);line-height:1.5;color:var(--warn-ink);font-weight:600;}

.viewer-frame{
  position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -50px rgba(14,22,56,0.6);
}
.viewer-frame .themed-media{aspect-ratio:16 / 10;}
.viewer-frame-bar{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;
  background:var(--bg-soft);border-bottom:1px solid var(--line);
}
.viewer-frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.viewer-frame-bar b{
  margin:0 auto;font-size:var(--sm-font-size-xs);font-weight:700;color:var(--text-faint);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:4px 14px;
  transform:translateX(-14px);
}
.viewer-frame figcaption{
  padding:12px 16px;font-size:var(--sm-font-size-sm);font-weight:600;color:var(--text-muted);
  border-top:1px solid var(--line);background:var(--surface);
}

.viewer-gallery-sec{padding-top:clamp(12px,2vw,24px);}
.viewer-gallery{display:grid;gap:clamp(14px,1.6vw,20px);}
@media (min-width:760px){.viewer-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}
.viewer-gallery figure{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--sh-card);}
.viewer-gallery .themed-media{aspect-ratio:16 / 10;}
.viewer-gallery .themed-media img{transition:transform 1.1s var(--ease-out);}
.viewer-gallery figure:hover .themed-media img{transform:scale(1.035);}
.viewer-gallery figcaption{
  position:absolute;left:14px;bottom:14px;
  font-size:var(--sm-font-size-xs);font-weight:700;color:#fff;
  background:rgba(8,16,43,0.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);border-radius:var(--pill);padding:8px 14px;
}
.viewer-gallery-cap{
  margin:24px auto 0;max-width:760px;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:var(--sm-font-size-md);line-height:1.5;color:var(--text-muted);
}

.feat-coming{color:var(--text-muted);}
.feat-coming .feat-mark{color:var(--text-faint);}
.feat-coming .status-pill{margin-right:6px;vertical-align:1px;}

.studio-line{
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-card);
}
.studio-line-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--bg-tint);color:var(--blue);}
.studio-line-ico svg{width:22px;height:22px;}
.studio-line p{font-size:var(--sm-font-size-md);color:var(--text-body);}

.pv-card{
  display:flex;gap:24px;align-items:flex-start;
  padding:clamp(24px,3vw,34px);border-radius:var(--r-panel);
  background:var(--surface);border:1.5px dashed var(--line-dashed);
}
.pv-mark{width:56px;height:56px;flex:none;filter:saturate(.8);}
.pv-card h2{margin:8px 0 10px;}
@media (max-width:520px){.pv-card{flex-direction:column;}}

/* SciMynd Canvas page (Views/Home/Canvas.cshtml). Copy left, studio footage right; one column under
   980px. The hero buttons point at #watch (five verbs) and #access (InMotus Studio). */
/* The hero fills the first screen under the sticky header, so the next section never peeks in below it. */
.cv-hero{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;}
/* Breadcrumb at the top with the usual hero padding and the content right under it; any spare height
   falls below the buttons, so there is no big gap above or below the breadcrumb. */
.cv-hero > .wrap{flex:1;display:flex;flex-direction:column;justify-content:flex-start;width:100%;}
.cv-hero-grid{
  display:grid;gap:clamp(30px,4vw,56px);margin-top:var(--sm-space-6);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
@media (min-width:980px){.cv-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.cv-hero-copy{max-width:600px;}
.cv-hero-copy h1{margin-top:6px;}
.cv-watch{
  position:relative;margin:0;aspect-ratio:1264 / 848;border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--stage-shadow);
}
.cv-watch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cv-watch-rec{
  position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--sm-font-size-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(8,16,43,0.62);border-radius:var(--pill);padding:6px 12px;
}
.cv-watch-dot{width:8px;height:8px;border-radius:50%;background:var(--sm-danger-text);}

.cv-card{
  display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,32px);
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
}
.cv-card h3{font-size:var(--sm-font-size-xl);line-height:1.25;color:var(--text);}
.cv-card p{font-size:var(--sm-font-size-md);line-height:1.6;color:var(--text-muted);}
.cv-card-featured{border:1.5px solid var(--blue);}
.cv-num{font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.cv-grow{flex-grow:1;}
.cv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--blue);}
.cv-link:hover{text-decoration:underline;text-underline-offset:3px;}
.cv-ways{list-style:none;}

/* #watch: five verbs, then the result band in the fixed Canvas blue, so the white text holds its contrast in both themes. */
.cv-verbs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));list-style:none;}
.cv-result{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(24px,3vw,40px);padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,48px);
  border-radius:var(--r-card);background:var(--canvas);color:#fff;
}
.cv-result > div{flex:1 1 320px;min-width:0;}
.cv-result-eyebrow{font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.85);}
.cv-result-word{font-family:var(--sans);font-weight:800;font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);line-height:1;letter-spacing:-0.03em;margin-top:6px;}
.cv-result-body{flex:1 1 320px;min-width:0;font-size:var(--sm-font-size-lg);line-height:1.55;}

/* SciMynd Amplify page (Views/Home/Amplify.cshtml): the Canvas hero frame, copy left, three uses right. */
.cv-amplify-title{font-size:clamp(2.25rem,1.7rem + 2.4vw,3.75rem);}
@media (min-width:980px){.cv-amplify-grid{grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);}}
.cv-uses{display:flex;flex-direction:column;gap:14px;list-style:none;}
.cv-use{flex-direction:row;align-items:flex-start;gap:18px;}
.cv-use h2{font-family:var(--sans);font-size:var(--sm-font-size-xl);line-height:1.25;color:var(--text);margin-bottom:4px;}
.cv-icon{width:28px;height:28px;color:var(--blue);flex:none;}

/* Apex verticals with editorial headers: the photo bleeds to the card edges and fades into it. */
.vert.has-img{padding-top:0;overflow:hidden;}
.vert-img{display:block;position:relative;margin:0 calc(-1 * clamp(22px,2.4vw,28px)) 24px;aspect-ratio:16 / 9;overflow:hidden;}
.vert-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);}
.vert-img::after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,var(--surface));}
.vert.has-img:hover .vert-img img{transform:scale(1.04);}

.fusion-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;}
.fusion-strip li{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4 / 3;}
.fusion-strip img{width:100%;height:100%;object-fit:cover;}
.fusion-strip span{
  position:absolute;left:10px;bottom:10px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.08em;color:#fff;
  background:rgba(8,16,43,0.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);border-radius:var(--pill);padding:6px 10px;
}

/* Three Why SciMynd pillars for v1.3 (the fourth is archived), so three across on a wide screen. */
@media (min-width:1180px){.pillar-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));}
  .pillar-grid:has(> :nth-child(3):last-child) .pillar{grid-template-columns:1fr;gap:10px;}
}

/* --------------------------------------------------------------------------
   Platform: the spoke wheel
   -------------------------------------------------------------------------- */
.stage-platform{padding-top:clamp(32px,4vw,56px);}
.crumbs-dark{color:var(--stage-faint);}
.crumbs-dark a{color:var(--stage-accent);}
.plat-head{max-width:920px;}
.plat-head h1{font-size:clamp(2.25rem,1.58rem + 2.98vw,3.25rem);line-height:1.1;}
.plat-head h1 em{display:block;font-style:italic;}
.plat-head p{margin-top:20px;max-width:640px;color:var(--stage-muted);font-size:var(--sm-font-size-lead);line-height:1.65;}

.roles{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(28px,3.4vw,40px);}
.roles-label{
  font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-faint);
  margin-right:4px;
}
.roles-row{display:flex;flex-wrap:wrap;gap:8px;}
.role-chip{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;
  border-radius:var(--pill);cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-size:var(--sm-font-size-sm);font-weight:700;color:var(--stage-ink);
  background:var(--stage-card);border:1px solid var(--stage-line-strong);
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .3s ease,transform .25s var(--ease-out);
}
.role-chip:hover{border-color:var(--stage-accent);transform:translateY(-1px);}
.role-ico{width:22px;height:22px;display:grid;place-items:center;color:var(--stage-accent);}
.role-ico svg{width:20px;height:20px;}
.role-chip[aria-pressed="true"]{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,#0A9BF0,#5B4CFF);
  box-shadow:0 14px 34px -14px rgba(10,155,240,0.9);
}
.role-chip[aria-pressed="true"] .role-ico{color:#fff;}
.roles-clear{
  height:40px;padding:0 16px;border-radius:var(--pill);cursor:pointer;
  font-size:var(--sm-font-size-sm);font-weight:700;color:var(--stage-ink);
  background:transparent;border:1px dashed var(--stage-line-strong);
}
.roles-clear:hover{border-color:var(--stage-accent);color:var(--stage-accent);}
.roles-clear[hidden]{display:none;}

.role-cards{margin-top:20px;}
.role-card{
  display:grid;gap:clamp(18px,2.4vw,34px);
  padding:clamp(22px,2.4vw,30px);border-radius:24px;
  background:var(--stage-card);border:1px solid var(--stage-line-strong);
  box-shadow:var(--stage-shadow);
}
.role-card[hidden]{display:none;}
.role-card.is-entering{animation:card-in .55s var(--ease-out) both;}
@keyframes card-in{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}
@media (min-width:980px){.role-card{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}}
.role-card-kicker{font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-accent);}
.role-card-panel{margin-top:8px;font-family:var(--serif);font-size:var(--sm-font-size-xl);line-height:1.25;color:var(--stage-ink);text-wrap:pretty;}
.role-card-h{margin:20px 0 10px;font-family:var(--sans);font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-faint);}
.role-uses{display:grid;gap:8px;}
.role-uses li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:var(--sm-font-size-sm);line-height:1.5;color:var(--stage-muted);}
.role-use-dot{width:9px;height:9px;border-radius:3px;margin-top:6px;background:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 20%,transparent);}
.role-uses li.is-coming .role-use-dot{background:transparent;border:1.5px solid var(--mod);box-shadow:none;}
.role-use-mod{font-weight:700;color:var(--stage-ink);}
.role-uses li.is-coming .role-use-mod{color:var(--stage-faint);}
.role-card-side{display:grid;gap:16px;align-content:start;}
.role-avail-k{display:block;margin-bottom:8px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-faint);}
.role-avail ul{display:flex;flex-wrap:wrap;gap:6px;}
.role-avail .sm-badge{white-space:normal;height:auto;min-height:var(--sm-space-6);}
.role-avail .status-pill{white-space:normal;line-height:1.25;text-transform:none;letter-spacing:0;font-size:var(--sm-font-size-xs);font-weight:700;}
.role-card-cta{margin-top:4px;}

.plat-body{display:grid;gap:clamp(20px,2.6vw,36px);margin-top:clamp(24px,3vw,40px);align-items:start;}
@media (min-width:1120px){.plat-body{grid-template-columns:minmax(0,1fr) 340px;}}

/* The side column. Below 1120px it dissolves into .plat-body's single column and the persona card
   is ordered back above the wheel (tablet) or the list (phone), right under the chips. */
@media (max-width:1119px){
  .plat-side{display:contents;}
  .plat-side .role-cards{order:-1;margin-top:0;}
  .plat-body:has(.role-card:not([hidden])){margin-top:20px;}
}
@media (min-width:1120px){
  .plat-side{
    position:sticky;top:calc(var(--header-h) + 20px);
    display:grid;gap:14px;align-content:start;
    max-height:calc(100vh - var(--header-h) - 36px);overflow:auto;overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .plat-side::-webkit-scrollbar{display:none;}
  .plat-side .mod-panel{position:static;}
  .plat-side .role-cards{margin-top:0;}
  .plat-side .role-cards:not(:has(.role-card:not([hidden]))){display:none;}
  .plat-side .role-card{grid-template-columns:1fr;align-items:start;gap:14px;padding:24px 24px 20px;}
  .plat-side .role-card-panel{font-size:var(--sm-font-size-lg);line-height:1.5;}
  .plat-side .role-uses{grid-template-columns:1fr;gap:8px;}
  .plat-side .role-uses li{font-size:var(--sm-font-size-sm);line-height:1.5;}
  /* With a persona picked, the panel's instructions give way to the card; the legend stays. */
  .mod-panel.has-role .mod-panel-empty > :not(.legend){display:none;}
  .mod-panel.has-role .legend{margin-top:0;padding-top:0;border-top:0;}
  .mod-panel.has-role:has(.mod-panel-empty:not([hidden])){padding:16px 24px;}
  /* A module opened alongside a persona: the card keeps its line and buttons, the bullets step aside
     so both fit beside the wheel. */
  .plat-side.has-module .role-card-h,.plat-side.has-module .role-uses{display:none;}
}

.wheel{
  position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:1 / 1;
  container-type:inline-size;
}
.wheel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.wheel-orbit{fill:none;stroke:var(--stage-spoke);stroke-width:1.2;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;}
.wheel-orbit-inner{stroke-dasharray:1 9;opacity:.8;}
.wheel-glow{opacity:.9;}
html.themeable:not([data-theme="dark"]) .wheel-glow{opacity:.35;}

.spoke{
  stroke:var(--stage-spoke);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:0;
  transition:stroke .35s ease,opacity .35s ease,stroke-width .35s ease;
}
.spoke.is-coming{stroke-dasharray:3 6;}
html.js .wheel:not(.is-drawn) .spoke{stroke-dasharray:600;stroke-dashoffset:600;}
html.js .wheel.is-drawn .spoke{transition:stroke-dashoffset 1.1s var(--ease-out),stroke .35s ease,opacity .35s ease;}
.wheel[data-role] .spoke{opacity:.25;}
.wheel[data-role] .spoke.is-on{
  opacity:1;stroke:var(--mod);stroke-width:2.2;
  stroke-dasharray:var(--len,600);stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mod) 60%,transparent));
}
/* Coming modules keep a dashed spoke even on a persona's path: lit means live. */
.wheel[data-role] .spoke.is-on.is-coming{stroke-dasharray:4 6;filter:none;opacity:.8;}
html.js .wheel[data-role] .spoke.is-on:not(.is-coming){animation:spoke-draw .7s var(--ease-out) both;}
@keyframes spoke-draw{from{stroke-dashoffset:var(--len,600);}to{stroke-dashoffset:0;}}

.wheel-hub{
  position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);
  width:23cqw;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;
  background:radial-gradient(circle at 50% 35%,var(--stage-hub-a),var(--stage-hub-b) 72%);
  border:1px solid var(--stage-line-strong);
  box-shadow:0 0 0 1.4cqw color-mix(in srgb,var(--stage-accent) 6%,transparent),0 30px 80px -30px rgba(46,90,255,0.55);
  text-align:center;z-index:2;
}
.wheel-hub-mark{width:4.6cqw;height:4.6cqw;color:var(--stage-accent);}
.wheel-hub b{font-family:var(--serif);font-weight:500;font-size:3.4cqw;line-height:1;color:var(--stage-ink);letter-spacing:-.012em;}
.wheel-hub span:last-child{font-size:1.15cqw;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-muted);max-width:15cqw;line-height:1.5;}
.wheel-hub-ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--stage-accent);opacity:0;}
html.js .wheel.is-drawn .wheel-hub-ring{animation:hub-ring 2.4s var(--ease-soft) .6s 2 both;}
html.js .wheel.is-drawn .wheel-hub-ring-2{animation-delay:1.8s;}
@keyframes hub-ring{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.55);opacity:0;}}

.node{
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  width:15.6cqw;min-height:9.6cqw;padding:1.1cqw .8cqw 1cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35cqw;
  border-radius:1.8cqw;cursor:pointer;text-align:center;
  background:var(--stage-card-2);border:1px solid var(--stage-line-strong);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--stage-ink);font-family:var(--sans);
  transition:transform .4s var(--ease-out),opacity .35s ease,border-color .35s ease,box-shadow .35s ease,filter .35s ease;
}
html.themeable:not([data-theme="dark"]) .node{background:#fff;}
.node-ico{width:3.3cqw;height:3.3cqw;min-width:22px;min-height:22px;}
.node-name{font-size:max(12px,1.7cqw);font-weight:800;line-height:1.1;}
.node-label{font-size:max(9.5px,1.08cqw);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-muted);line-height:1.25;}
.node-soon{
  margin-top:.25cqw;font-size:max(9px,.98cqw);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#9A6500;background:#FFF4DC;border-radius:var(--pill);padding:.25cqw .7cqw;white-space:nowrap;
}
html.themeable[data-theme="dark"] .node-soon{color:#F3C46E;background:rgba(243,196,110,0.12);}
/* Lit vs dim (spec: "a clear visual difference... a step dimmer, still easy to read"). */
.node.is-live{
  border-color:color-mix(in srgb,var(--mod) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mod) 30%,transparent),0 18px 44px -20px color-mix(in srgb,var(--mod) 70%,transparent);
}
.node.is-coming{opacity:.66;}
.node.is-coming .node-ico{filter:saturate(.45);}
.node:hover,.node:focus-visible{transform:translate(-50%,-50%) translateY(-4px);opacity:1;}
.node[aria-expanded="true"]{
  opacity:1;border-color:var(--mod);
  box-shadow:0 0 0 2px var(--mod),0 22px 54px -18px color-mix(in srgb,var(--mod) 80%,transparent);
}
.wheel[data-role] .node{opacity:.18;filter:grayscale(.8);}
.wheel[data-role] .node.is-on{
  opacity:1;filter:none;transform:translate(-50%,-50%) scale(1.05);
  border-color:var(--mod);
  box-shadow:0 0 0 1.5px var(--mod),0 24px 60px -18px color-mix(in srgb,var(--mod) 85%,transparent);
}
.wheel[data-role] .node.is-on.is-coming{border-style:dashed;}

/* Entrance: nodes pop out from the hub in wheel order once the wheel scrolls in. */
html.js .wheel:not(.is-drawn) .node{opacity:0;transform:translate(-50%,-50%) scale(.6);}
html.js .wheel.is-drawn .node{transition-delay:calc(var(--n,0) * 55ms);}
html.js .wheel.is-settled .node{transition-delay:0s;}

/* The module panel beside the wheel. */
.mod-panel{
  position:sticky;top:calc(var(--header-h) + 20px);
  padding:24px;border-radius:24px;
  background:var(--stage-card);border:1px solid var(--stage-line-strong);box-shadow:var(--stage-shadow);
  color:var(--stage-ink);
}
.mod-panel-k{display:block;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-accent);margin-bottom:10px;}
.mod-panel-empty p{font-size:var(--sm-font-size-md);line-height:1.65;color:var(--stage-muted);}
.legend{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--stage-line);}
.legend li{display:flex;align-items:center;gap:10px;font-size:var(--sm-font-size-sm);font-weight:600;color:var(--stage-muted);}
.legend-dot{width:12px;height:12px;border-radius:4px;border:1.5px solid var(--stage-accent);}
.legend-dot.is-live{background:var(--stage-accent);box-shadow:0 0 10px var(--stage-accent);}
.legend-dot.is-coming{opacity:.6;border-style:dashed;}
.mod-panel-body[hidden]{display:none;}
.mod-panel-body{display:grid;gap:14px;animation:card-in .45s var(--ease-out) both;}
.mod-panel-top{display:flex;align-items:center;gap:14px;}
.mod-panel-top img{width:48px;height:48px;flex:none;}
.mod-panel-top h2{font-size:var(--sm-font-size-2xl);color:var(--stage-ink);}
.mod-panel-label{font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-muted);}
.mod-panel-body p{font-size:var(--sm-font-size-md);line-height:1.65;color:var(--stage-muted);}
.mod-panel-body .status-pill,.mod-panel-body .sm-badge{justify-self:start;}

/* The phone list: a simple vertical list, the wheel's job done by order and outline. */
.plat-list{display:none;}
@media (max-width:1119px){.plat-body .mod-panel{position:static;}}
@media (max-width:860px){
  .wheel,.plat-body .mod-panel{display:none;}
  .plat-list{display:grid;gap:10px;}
  .plat-list li{transition:opacity .35s ease;}
  .plat-item{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
    padding:14px 16px;border-radius:18px;color:var(--stage-ink);
    background:var(--stage-card);border:1px solid var(--stage-line-strong);
    transition:border-color .3s ease,box-shadow .3s ease;
  }
  html.themeable:not([data-theme="dark"]) .plat-item{background:#fff;}
  .plat-item img{width:38px;height:38px;}
  .plat-item-copy{display:grid;gap:6px;justify-items:start;}
  .plat-item-copy b{font-size:var(--sm-font-size-md);font-weight:800;line-height:1.25;}
  .plat-item-label{display:block;margin-top:2px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stage-muted);}
  .plat-item-go{font-size:var(--sm-font-size-2xl);line-height:1;color:var(--stage-faint);}
  .plat-list li.is-coming .plat-item{opacity:.78;}
  .plat-list li.is-coming .plat-item img{filter:saturate(.45);}
  .plat-list[data-role] li{opacity:.4;}
  .plat-list[data-role] li.is-on{opacity:1;}
  .plat-list[data-role] li.is-on .plat-item{border-color:var(--mod);box-shadow:0 0 0 1px var(--mod),0 14px 34px -20px var(--mod);opacity:1;}

  /* The persona row becomes a sideways-scrolling banner pinned under the header. */
  .roles{display:block;position:sticky;top:var(--header-h);z-index:5;margin:24px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter);
    background:color-mix(in srgb,var(--stage-bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .roles-label{display:block;margin-bottom:8px;}
  .roles-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 2px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);}
  .roles-row::-webkit-scrollbar{display:none;}
  .role-chip{scroll-snap-align:start;flex:none;}
  .roles-clear{margin-top:8px;height:34px;}
  .role-card-panel{font-size:var(--sm-font-size-lg);}
}

/* Bottom sheet for module details on a phone. */
.sheet{position:fixed;inset:0;z-index:210;}
.sheet[hidden]{display:none;}
.sheet-scrim{position:absolute;inset:0;background:rgba(4,9,26,0.55);opacity:0;transition:opacity .3s ease;}
.sheet-card{
  position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto;
  padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;background:var(--stage-bg-2);color:var(--stage-ink);
  border-top:1px solid var(--stage-line-strong);
  box-shadow:0 -30px 80px -30px rgba(0,0,0,0.6);
  transform:translateY(100%);transition:transform .42s var(--ease-out);
}
html.themeable:not([data-theme="dark"]) .sheet-card{background:#fff;}
.sheet.is-open .sheet-scrim{opacity:1;}
.sheet.is-open .sheet-card{transform:none;}
.sheet-grip{position:absolute;top:10px;left:50%;width:44px;height:5px;margin-left:-24px;border-radius:3px;background:var(--stage-line-strong);}
.sheet-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--stage-line-strong);background:transparent;color:var(--stage-ink);font-size:var(--sm-font-size-xl);cursor:pointer;
}
.sheet-body .mod-panel-body{display:grid;}
/* On a tablet the sheet is a centred card rather than a full-width slab. */
@media (min-width:861px){
  .sheet-card{left:50%;right:auto;width:min(620px,calc(100% - 48px));transform:translate(-50%,100%);}
  .sheet.is-open .sheet-card{transform:translate(-50%,0);}
}
body.sheet-open{overflow:hidden;}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.plan-groups{display:flex;justify-content:center;margin-bottom:20px;}
.plan-groups .toggle a{height:48px;padding:0 28px;font-size:var(--sm-font-size-md);}
.tier-panels .tier-panel[hidden]{display:none;}
.tier-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:stretch;}
/* Tablet and up: every card the same width, rows filled evenly, and a short last row centred, so a plan added later is never left alone on a row below the fold.
   Two across on a portrait tablet, three on a landscape one, and exactly four plans as a balanced 2 x 2 (four across once the screen is wide enough). */
@media (min-width:641px){
  .tier-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;--tier-cols:2;}
  .tier-grid > *{flex:0 0 calc((100% - (var(--tier-cols) - 1) * 20px) / var(--tier-cols));min-width:0;box-sizing:border-box;}
}
@media (min-width:960px){
  .tier-grid{--tier-cols:3;}
  .tier-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))){--tier-cols:2;}
}
@media (min-width:1200px){
  .tier-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))){--tier-cols:4;}
}
.tier-count{margin:0 0 16px;text-align:center;font-size:var(--sm-font-size-sm);color:var(--text-muted);}
.tier-header{
  margin:0 0 8px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);
}
.tier h3{font-size:var(--sm-font-size-2xl);}
.tier-coming{
  margin:-6px 0 24px;padding:16px;border-radius:var(--r-md);
  background:var(--bg-soft);border:1px dashed var(--line-dashed);
}
.tier-coming ul{display:grid;gap:8px;margin:12px 0 12px;}
.tier-coming li{font-size:var(--sm-font-size-sm);line-height:1.5;color:var(--text-muted);padding-left:20px;position:relative;}
.tier-coming li::before{content:'';position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--warn);}
.tier-waitlist{font-size:var(--sm-font-size-sm);font-weight:800;color:var(--blue);}
.tier-waitlist:hover{text-decoration:underline;}
.credit-rules{max-width:880px;margin:clamp(32px,4vw,48px) auto 0;}
.credit-rules ul{display:grid;gap:10px;margin-top:14px;}

/* The card's own Monthly / Annual switch (_TierCard.cshtml), which replaced the single
   .plan-controls row above the grid: the period belongs to the card being read, so two
   cards can be compared at different periods.

   Smaller and quieter than the .plan-controls switch it replaced, and sitting between the
   tier's description and its price, where it reads as a property of the figure below it
   rather than as a control over the page. Full card width so the two options are the same
   size -- a track that shrank to its labels put "Annual" on a wider pill than "Monthly"
   and made the longer word look selected. */
.plan-period{
  display:flex;gap:4px;padding:4px;margin:0 0 16px;
  background:var(--bg-mono);
  border:1px solid var(--line-soft);
  border-radius:var(--pill);
}
.plan-period a{
  flex:1;text-align:center;
  padding:8px 10px;border-radius:var(--pill);
  font-size:var(--sm-font-size-xs);font-weight:700;color:var(--text-muted);
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.plan-period a:hover{color:var(--navy);}
.plan-period a.active{
  background:#fff;color:var(--blue);
  box-shadow:0 2px 8px -4px rgba(14,22,56,0.28);
}

/* Both periods are in the markup, so the switch needs no fetch; the one not chosen is
   display:none rather than visually hidden, because it must take up no space and must
   keep its submit button out of the tab order. */
.plan-face[hidden]{display:none;}

/* The button is the card's bottom action. .plan .btn-block pushes it down with
   margin-top:auto, which does nothing once the button sits inside a wrapper -- so the
   wrapper carries it instead, or every card's button floats up to its feature list. */
.plan-face-cta{margin-top:auto;}

/* --------------------------------------------------------------------------
   Review pass (design + QA, 2026-10-11)
   Contrast fixes first: every one of these was measured below WCAG AA.
   -------------------------------------------------------------------------- */
:root{
  --text-faint:#636E88;          /* 5.1:1 on white, 4.7:1 on the light stage */
  --stage-faint:#5F6B85;
}
html.themeable[data-theme="dark"]{--text-faint:#8592B0;--stage-faint:rgba(226,234,255,0.6);}

/* The primary gradient started at #0A9BF0, where white label text is 3:1. Deeper at both ends now. */
.btn-primary{background:linear-gradient(135deg,#0A74C8,#084F9E);}
.btn-primary:hover{box-shadow:0 22px 46px -16px rgba(10,116,200,0.9);}
.cta-panel{background:linear-gradient(135deg,#0A74C8 0%,#084F9E 100%);}
.btn-ghost-light-2{background:transparent;border:1.5px solid rgba(255,255,255,0.72);}
.btn-ghost-light-2:hover{background:rgba(255,255,255,0.12);}
.coming-banner-tag{background:#8A5A00;}
html.themeable[data-theme="dark"] .type-pill,
html.themeable[data-theme="dark"] .step-n{color:#C3CDE4;}

/* A blue focus ring vanishes on blue and navy: white there. */
.cta-panel :focus-visible,.hero :focus-visible,footer.site :focus-visible,.drawer :focus-visible,
.panel-dark :focus-visible,html.themeable[data-theme="dark"] :focus-visible{outline-color:#fff;}

/* --- Platform -------------------------------------------------------------- */
/* Coming modules are told apart by a dashed edge and a quieter icon, not by fading the whole node --
   fading took the "Coming 2027" tag below readable contrast. */
.node.is-coming{opacity:1;border-style:dashed;border-color:var(--stage-line-strong);}
.node.is-coming .node-ico{filter:grayscale(.6);opacity:.75;}
.node.is-coming .node-name{color:var(--stage-muted);}
.node-label{font-size:max(11px,1.08cqw);}
/* One line per label: "Bring your own 3D" broke as "BRING YOUR OWN / 3D". The box grows to the label
   instead (shrink-to-fit, centred by its translate), never below the common width. */
.node{width:auto;min-width:15.6cqw;}
.node-label{white-space:nowrap;}
.node-soon{font-size:max(11px,1.05cqw);color:#7A4F00;background:#FFF1D6;}
.wheel-hub span:last-child{font-size:max(11px,1.15cqw);}
/* A persona's path: live modules light in their colour; coming ones on the path get a dashed outline in
   their colour but no glow; everything off the path recedes without becoming unreadable. */
.wheel[data-role] .node{opacity:.35;filter:grayscale(.7);}
.wheel[data-role] .node.is-on{opacity:1;filter:none;}
.wheel[data-role] .node.is-on.is-coming{
  opacity:.9;transform:translate(-50%,-50%);border:1.5px dashed var(--mod);box-shadow:none;
}
.legend-dot.is-live{background:var(--stage-card);border:1.5px solid var(--stage-accent);box-shadow:0 0 10px color-mix(in srgb,var(--stage-accent) 50%,transparent);}
.legend-dot.is-coming{opacity:1;border:1.5px dashed var(--stage-muted);background:transparent;}

.plat-head h1{font-size:clamp(2.25rem,1.58rem + 2.98vw,3.25rem);}
.roles-row .roles-clear{height:44px;border-radius:var(--pill);}

/* The persona card, compact: one line, the bullets in two columns, the buttons. */
.role-card{grid-template-columns:1fr;gap:16px;padding:20px 24px;}
.role-card-panel{font-size:var(--sm-font-size-lg);margin-top:6px;}
.role-card-h{margin:12px 0 8px;}
@media (min-width:980px){
  .role-card{grid-template-columns:minmax(0,1fr) auto;align-items:end;}
  .role-uses{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;}
}
.role-card-cta{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:860px){
  /* Not sticky on a phone: pinned, the persona bar took 134px of a 760px screen. */
  .roles{position:static;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-top:20px;padding-top:0;padding-bottom:0;}
  .role-card{padding:20px 20px 20px;}
  .role-uses li{font-size:var(--sm-font-size-sm);}
  /* Keep each row's own live / coming styling and only add the path's outline. */
  .plat-list[data-role] li{opacity:.55;}
  .plat-list[data-role] li.is-on{opacity:1;}
  .plat-list[data-role] li.is-on.is-coming .plat-item{border-style:dashed;box-shadow:none;}
}

/* --- Home ------------------------------------------------------------------ */
/* The authorship chain, as a short vertical sequence: it wrapped mid-arrow at every width. */
.authorship{flex-direction:column;align-items:flex-start;gap:0;margin-top:24px;}
.authorship-line{width:1.5px;height:14px;margin-left:20px;background:linear-gradient(180deg,var(--line-strong),var(--blue));}
.authorship-line::after{right:auto;left:-2.25px;top:auto;bottom:-2px;}
html.js .why-aside .authorship-line{transform:scaleY(0);transform-origin:top;}
html.js .why-aside.is-revealed .authorship-line{transform:none;}

/* Beyond anatomy: the factory caption sat under the turbofan card. */
.beyond-shot-back figcaption{left:auto;right:14px;top:14px;bottom:auto;}
@media (max-width:520px){
  .beyond-shot-front.is-cycle{left:auto;bottom:auto;width:100%;}
}

/* --- Module pages ---------------------------------------------------------- */
/* A Coming 2027 page's "What it does" list is a roadmap, so it uses open rings, not ticks: a tick reads
   as "included". */
.feat-grid.is-roadmap .feat-mark::after{content:'';width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;}
.feat-grid.is-roadmap .feat-mark::before{opacity:.1;}
/* sm-chip is nowrap by default; these lists carry long labels plus a Coming Soon badge, so let them wrap inside their card. */
.chip-list .sm-chip{max-width:100%;height:auto;white-space:normal;}
.chip-static.is-coming{border-style:dashed;border-color:var(--line-dashed);color:var(--text-muted);background:transparent;}
.chip-static.is-coming span{margin-left:4px;font-size:var(--sm-font-size-xs);font-weight:800;letter-spacing:.08em;color:var(--warn-ink);}
.canvas-card{
  position:relative;overflow:hidden;border-radius:var(--r-panel);padding:clamp(24px,3vw,34px);
  background:linear-gradient(150deg,#0B1A44,#08102B);color:#fff;border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 40px 80px -50px rgba(4,9,26,0.8);
}
.canvas-card::before{content:'';position:absolute;top:-90px;right:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mod) 45%,transparent),transparent 70%);}
.canvas-card > *{position:relative;}
.canvas-card-mark{width:64px;height:64px;margin-bottom:20px;}
.canvas-card-facts{display:grid;gap:0;}
.canvas-card-facts > div{padding:16px 0;border-top:1px solid rgba(255,255,255,0.12);}
.canvas-card-facts dt{font-family:var(--serif);font-size:var(--sm-font-size-3xl);line-height:1.1;}
.canvas-card-facts dd{margin-top:4px;font-size:var(--sm-font-size-sm);color:rgba(255,255,255,0.7);}
.bio p,.bio .bio-creds{max-width:68ch;}

/* --- Pricing --------------------------------------------------------------- */
.lbl-short{display:none;}
@media (max-width:420px){
  .plan-groups .toggle{width:100%;}
  .plan-groups .toggle a{flex:1;white-space:nowrap;padding:0 12px;}
  .lbl-long{display:none;}
  .lbl-short{display:inline;}
}

/* --- Chrome ---------------------------------------------------------------- */
/* The drawer's top row is the page header frozen in place: same lockup size and inset, same Launch
   App, same button sizes and gaps, so nothing moves as the menu opens except menu -> close. Every item
   is flex:none -- when the lockup was left to size itself (site.css's ".drawer-top img{height:auto}"
   outranked its height) it rendered 390px wide, squeezed the close button to 12px and, once focus went
   to that button off the right edge, scrolled the whole drawer sideways. */
.drawer{overflow-x:hidden;}
.drawer-top{gap:10px;justify-content:flex-start;}
.drawer-top img.drawer-brand{
  flex:none;width:auto;max-width:none;
  height:calc(clamp(28px,2.6vw,36px) * 1.222);margin:-4px auto -4px 4px;
}
.drawer-top > *{flex:none;}
.drawer-launch{margin:0;height:42px;padding:0 20px;font-size:var(--sm-font-size-sm);}
@media (max-width:470px){
  .drawer-top img.drawer-brand{height:calc(24px * 1.222);}
  .drawer-launch{height:40px;padding:0 16px;font-size:var(--sm-font-size-sm);}
  .drawer-close{width:42px;height:42px;}
}
@media (max-width:340px){
  .drawer-top img.drawer-brand{height:calc(20px * 1.222);}
  .drawer-launch{padding:0 12px;font-size:var(--sm-font-size-sm);}
}
.drawer-mods a.drawer-all{color:var(--cyan-light);justify-content:space-between;}
.nav-toggle{flex:none;}
@media (max-width:340px){
  .brand img{height:20px;}
  .nav-launch-m{padding:0 12px;font-size:var(--sm-font-size-sm);}
}
@media (max-width:720px){
  footer.site .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  footer.site .footer-brand{grid-column:1 / -1;}
}

/* --- 404 ------------------------------------------------------------------- */
.stage-404{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;}
.nf{position:relative;max-width:760px;}
.nf-code{
  position:absolute;right:-6%;top:-40%;font-family:var(--serif);font-size:clamp(160px,22vw,320px);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--stage-line-strong);pointer-events:none;z-index:-1;
}
.nf h1{font-size:clamp(2.25rem,1.58rem + 2.98vw,3.25rem);}
.nf h1 em{display:block;}
.nf p{margin:20px 0 32px;color:var(--stage-muted);font-size:var(--sm-font-size-lg);max-width:52ch;}

/* --------------------------------------------------------------------------
   Page to page: a cross-document view transition. The header is its own
   transition group, so it holds still while the page under it changes --
   navigating reads as one site moving, not a reload. Browsers without
   cross-document transitions simply navigate as before.
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto;}
header.site{view-transition-name:site-header;}
/* The old page stays fully opaque underneath while the new one fades in over it. Fading both at once dips through transparent and the
   backdrop flashes between pages, which read as flicker; normal blending also stops the default plus-lighter overlap from brightening it. */
::view-transition-old(root){animation:none;mix-blend-mode:normal;}
::view-transition-new(root){animation:vt-in .2s ease-out both;mix-blend-mode:normal;}
@keyframes vt-in{from{opacity:0;}}

/* --------------------------------------------------------------------------
   Reduced motion: everything above that moves, stops.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.js .hero-in,html.js .hero-line > .hero-in{animation:none;opacity:1;transform:none;}
  html.js .hero-film .hero-media,html.js .hero-cue span,html.js .shot-cycle img,
  html.js .pipe *,html.js .wheel *{animation:none!important;}
  .hero-stills img{animation:none;}
  .hero-stills img:first-child{opacity:1;}
  .pipe-library-grow i{opacity:1;}
  html.js .wheel:not(.is-drawn) .node{opacity:1;transform:translate(-50%,-50%);}
  html.js .wheel:not(.is-drawn) .spoke{stroke-dashoffset:0;}
  .vf-card,.node,.role-chip,.sheet-card,.themed-media video{transition:none;}
  .vf-card:hover,.node:hover{transform:none;}
  .node:hover,.node:focus-visible{transform:translate(-50%,-50%);}
  .role-card.is-entering,.mod-panel-body{animation:none;}
  html.js .vf-shot,html.js .vf-shot .themed-media,.vf-step,.vf-step::before,.vf-story-rail span{transition:none;}
  html.js .vf-shot.is-entering::after{animation:none;}
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}