/* ============================================================
   CoraVision — shared design system
   One stylesheet for the whole static site. Brand tokens, the
   glass-edge pill (ported from the product's pill/login master),
   nav, footer, and reusable section + card components.
   Brand feel: premium, calm, clear, human. Generous whitespace,
   rounded elements, soft purple-pink gradients, light backgrounds.
   ============================================================ */

/* Plus Jakarta Sans, served from this site since 29 Sep 2026. It came from Google Fonts, two more
   servers to reach before the first paint (PageSpeed). These are the rules Google served, pointed at
   copies of its files (v12): one variable font file per alphabet carries every weight, and it is
   named five times, once per weight, so each weight draws as it did (.article's 450 still draws at
   500). A browser fetches only the alphabets a page uses (unicode-range), and every layout preloads
   the Latin file. Licence: assets/fonts/plus-jakarta-sans-OFL.txt (SIL Open Font License 1.1). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* brand */
  --violet:#6940DD;
  --magenta:#D65499;
  --grad:linear-gradient(120deg,#6940DD,#D65499);
  --nav-h:54px;
  --grad-135:linear-gradient(135deg,#6940DD,#D65499);
  /* ink + neutrals */
  --ink:#0B0B0F;
  --ink-2:#3a3a41;
  --grey:#6D6D6D;
  --muted:#9a9aa2;
  --faint:#B9B9BE;
  /* surfaces */
  --surface:#F7F5FB;
  --surface-2:#FBFAFE;
  --line:#E9E6F1;
  --violet-tint:#F1ECFC;
  --green:#34C759;
  /* radii */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;
  /* layout */
  --wrap:1120px;
  --pad:28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);background:#fff;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--pad)}
.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit;font-weight:800;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r-pill);transition:.16s;white-space:nowrap;
  letter-spacing:-.01em;text-decoration:none
}
.btn--lg{height:56px;padding:0 34px;font-size:16.5px}
.btn--sm{height:44px;padding:0 22px;font-size:14.5px}
.btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.btn--solid{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(150,64,200,.30)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(150,64,200,.42)}

/* ============================================================
   GLASS-EDGE PILL  (the product's signature component)
   Ported from CoraVision-Pill-Glass.html v1.0 MASTER — the same
   frosted purple->pink capsule used in the app pill / login area:
   translucent gradient, backdrop blur, luminous white edge, and a
   slow shine sweep. Used here for primary CTAs and key badges.
   ============================================================ */
@property --shineA{syntax:'<angle>';inherits:false;initial-value:0deg}

.glass-pill{
  position:relative;overflow:hidden;
  font-family:inherit;font-weight:800;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;cursor:pointer;text-decoration:none;border:none;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(106,76,242,.92) 0%,rgba(194,95,208,.88) 50%,rgba(240,114,154,.92) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 16px 40px rgba(10,6,30,.28),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .16s ease,box-shadow .3s ease
}
.glass-pill:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(10,6,30,.34),inset 0 1px 0 rgba(255,255,255,.6)}
.glass-pill:active{transform:translateY(0) scale(.985)}
/* the slow luminous shine sweeping across the edge: the original conic arc
   of light, brought back (2026-09-13 evening) in a form the compositor runs
   alone. The rim mask sits on .shine, which never moves; the conic gradient
   is on the child, a square twice the pill, and it is the child that turns
   (a transform, off the main thread). main.js puts the two spans into every
   .glass-pill. The earlier version turned the gradient through a custom
   property, a style recalc every frame for the life of every page. */
.glass-pill .shine{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude
}
.glass-pill .shine i{
  position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0deg 28deg,rgba(255,255,255,.95) 44deg,transparent 60deg 360deg);
  animation:pillShine 9s ease-in-out infinite;will-change:transform
}
@keyframes pillShine{0%,72%{rotate:-30deg;opacity:0}76%{opacity:1}92%{rotate:300deg;opacity:1}100%{rotate:340deg;opacity:0}}
@media (prefers-reduced-motion:reduce){.glass-pill .shine i{animation:none}}

/* sizes for the glass pill as a button */
.glass-pill.lg{height:58px;padding:0 36px;font-size:16.5px}
.glass-pill.md{height:48px;padding:0 26px;font-size:15px}
.glass-pill .arrow{transition:transform .2s ease}
.glass-pill:hover .arrow{transform:translateX(3px)}

/* glass pill as a small BADGE (labels, "beta" tags) */
.glass-badge{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:800;letter-spacing:.01em;color:#fff;
  padding:10px 18px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(106,76,242,.9) 0%,rgba(194,95,208,.85) 50%,rgba(240,114,154,.9) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 26px rgba(10,6,30,.22),inset 0 1px 0 rgba(255,255,255,.5)
}
.glass-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:badgePulse 2.4s infinite}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.glass-badge .dot{animation:none}}

/* a soft (non-glass) tint badge for light contexts */
.tint-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--violet);background:var(--violet-tint);padding:7px 14px;border-radius:var(--r-pill)}

/* ---------- brand orb ---------- */
.orb{display:inline-block;line-height:0}
.orb svg,.orb img{display:block;width:100%;height:100%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.orb--breathe{animation:breathe 5.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.orb--breathe{animation:none}}

/* ============================================================
   NAV
   ============================================================ */
/* NOT sticky. It was, and with the nav's white panel removed it ghosted
   straight over the dark section below. A full-screen cinematic panel wants
   the whole screen anyway. If the nav should follow you down the page it
   needs a backdrop that changes with what is behind it, which is a piece of
   work in its own right. */
.wp-block-template-part{position:relative;z-index:60}
/* No panel and no hairline: the nav sits straight on the page so the white runs
   unbroken from the top of the window into the hero. It is static rather than
   sticky, so nothing ever scrolls underneath it. The mobile drawer keeps its
   own white background further down, because that one does overlay content. */
.nav{background:transparent}
/* Nav height lives in one place: the hero measures itself against it and the
   mobile drawer hangs off it, so all three move together. */
.nav .in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:26px;width:auto;display:block}
.brand .lo{width:26px;height:26px;flex:0 0 auto}
.brand b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.brand b span{color:var(--grey);font-weight:600}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a:not(.glass-pill){font-size:13px;font-weight:600;color:var(--ink-2);padding:7px 11px;border-radius:var(--r-pill);transition:.15s}
.nav-links a:not(.glass-pill):hover{color:var(--violet);background:var(--violet-tint)}
.nav-links a.glass-pill{color:#fff}
.nav-links a.active{color:var(--violet)}
.nav-cta{margin-left:8px}
.nav-links a.glass-pill.md{height:31px;padding:0 15px;font-size:13px;font-weight:600}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
.nav-toggle svg{width:23px;height:23px}

/* THE PHONE MENU (Jed, 2026-09-13 night: "like Apple, simple, large, easy").
   The trigger is a filled black dot, nothing else; open, it is the same
   circle as an outline. The menu is the whole window under the bar: big
   links down the left, the topics list under Explore topics, Apply for the
   beta last in the brand gradient. The page behind does not scroll. */
.menu-orb{display:none}
.nav-toggle .dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transition:background .22s ease,transform .22s ease}
.nav-toggle[aria-expanded="true"] .dot{background:transparent}
.nav-toggle:active .dot{transform:scale(.86)}
html.menu-open{overflow:hidden}
@media(max-width:860px){
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-right:-10px}
  /* the bar's backdrop blur makes it the containing block for this fixed
     panel, so the height is spelled out rather than taken from bottom:0 */
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:28px var(--pad) 40px;overflow:auto;-webkit-overflow-scrolling:touch;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-links > a:not(.glass-pill),.nav-links .nav-explore-btn,.nav-links .nav-cta a.glass-pill{
    display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;
    padding:13px 0;border-radius:0;background:none;border:0;box-shadow:none;
    font-size:32px;font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--ink);text-align:left}
  .nav-links > a:not(.glass-pill):hover{background:none;color:var(--ink)}
  .nav-links .nav-explore-btn svg{width:22px;height:22px;color:var(--grey)}
  .nav-links .nav-explore[data-open="1"] .nav-explore-btn svg{transform:rotate(180deg)}
  .nav-links .nav-mega{padding:4px 0 14px;gap:14px}
  .nav-links .mega-col h4{margin:12px 0 4px}
  .nav-links .mega-col a,.nav-links .soon-item{font-size:19px;padding:7px 0}
  .nav-cta{margin:0}
  .nav .nav-links .nav-cta a.glass-pill.md{height:auto;padding:13px 0;font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.025em;line-height:1.15;
    -webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;border:0;box-shadow:none;
    background:linear-gradient(120deg,#6940DD,#D65499);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* no tint in any state: a phone keeps :hover after a tap, which is what painted the row purple */
  .nav-links .nav-explore-btn:hover,.nav-links .nav-explore-btn:focus,.nav-links .nav-explore-btn:focus-visible,.nav-links .nav-explore[data-open="1"] .nav-explore-btn{background:none;color:var(--ink);outline:none}
  /* Cora's orb heads the list, three times the dot; the wordmark in the bar steps aside while the menu is open (Jed) */
  .nav-links .menu-orb{display:block;width:44px;height:44px;margin:2px 0 18px;flex:0 0 auto}
  html.menu-open .brand{opacity:0;pointer-events:none;transition:opacity .2s ease}
  /* the bar is solid white while the menu is open, like the menu under it: translucent, it took the
     colour of whatever hero sat behind it (lilac over the glossary's purple) (Jed, 21 October 2026) */
  html.menu-open .wp-block-template-part .nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links.open > :nth-child(7){animation-delay:.24s}
  .nav-links .nav-cta a.glass-pill .shine{display:none}
  /* the rows arrive one after another, Apple's way */
  .nav-links.open > *{animation:navIn .38s cubic-bezier(.2,.7,.2,1) both}
  .nav-links.open > :nth-child(2){animation-delay:.04s}
  .nav-links.open > :nth-child(3){animation-delay:.08s}
  .nav-links.open > :nth-child(4){animation-delay:.12s}
  .nav-links.open > :nth-child(5){animation-delay:.16s}
  .nav-links.open > :nth-child(6){animation-delay:.20s}
  @keyframes navIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:92px 0}
.sec-tight{padding:64px 0}
.bg-surface{background:var(--surface)}
.bg-surface-2{background:var(--surface-2)}

.sec-head{max-width:760px;margin:0 auto 54px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:12px}
.sec-head p{font-size:clamp(15px,1.6vw,18.5px);color:var(--grey);font-weight:500;margin-top:16px;line-height:1.6}

h1,h2,h3,h4{letter-spacing:-.02em}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.card h3{font-size:19px;font-weight:800;margin-bottom:9px;letter-spacing:-.02em}
.card p{font-size:14.5px;color:var(--grey);line-height:1.62;font-weight:500}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--violet-tint);color:var(--violet);font-weight:800;font-size:16px;margin-bottom:16px}
.card-icon{width:52px;height:52px;border-radius:14px;background:var(--violet-tint);display:grid;place-items:center;margin-bottom:16px}
.card-icon svg{width:26px;height:26px;stroke:var(--violet)}

/* feature list with checks */
.checklist{list-style:none;display:flex;flex-direction:column;gap:14px}
.checklist li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.55;color:var(--ink-2);font-weight:500}
.checklist li b{color:var(--ink);font-weight:800}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--violet-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236940DD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- dark band ---------- */
.band{background:linear-gradient(150deg,#3a1c71 0%,#5b2a86 45%,#a14b9c 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.06) 0 47%,rgba(0,0,0,.06) 47% 100%);pointer-events:none}
.band .in2{position:relative;z-index:1;max-width:840px;margin:0 auto}
.band h2{font-size:clamp(28px,4.4vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.09;color:#fff}
.band p{font-size:clamp(16px,1.9vw,21px);color:rgba(255,255,255,.85);font-weight:500;margin-top:18px;line-height:1.6}

/* ---------- media / image blocks ---------- */
.media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(40,20,80,.14)}
.media img{width:100%;height:100%;object-fit:cover}
.media-tall{aspect-ratio:4/3}
.media-wide{aspect-ratio:16/9}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.reverse .split-media{order:-1}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}.split.reverse .split-media{order:0}}
.split h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.025em}
.split p{font-size:16px;color:var(--grey);font-weight:500;line-height:1.65;margin-top:16px}

/* full-bleed image with overlay copy */
.bleed{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.bleed img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2}
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,10,35,.72),rgba(20,10,35,.30))}
.bleed .bleed-in{padding:clamp(40px,6vw,84px);max-width:640px;color:#fff}
.bleed h2{color:#fff;font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.12}
.bleed p{color:rgba(255,255,255,.9);font-size:17px;font-weight:500;margin-top:16px;line-height:1.6}

/* ---------- email capture ---------- */
.capture{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.capture.center{margin:0 auto;justify-content:center}
.capture input{
  flex:1;min-width:230px;height:58px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:0 24px;font-family:inherit;font-size:16px;background:#fff;transition:.15s;color:var(--ink)
}
.capture input::placeholder{color:var(--muted)}
.capture input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-tint)}
.capture .glass-pill{flex:0 0 auto}
.capture-note{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:14px}
.capture-ok{display:none;align-items:center;gap:10px;font-size:15.5px;font-weight:700;color:#1e9e56;
  background:#e9f9f0;border:1px solid #bfe9d1;padding:14px 20px;border-radius:var(--r-md);max-width:520px}
.capture-ok.on{display:flex}
.capture-ok svg{width:20px;height:20px;stroke:#1e9e56;flex:0 0 auto}

/* ---------- FAQ (accordion) ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:#d9d0ee}
.faq-q{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:17px;font-weight:700;letter-spacing:-.01em}
.faq-q::-webkit-details-marker{display:none}
.faq-q .chev{flex:0 0 auto;width:22px;height:22px;transition:transform .25s;color:var(--violet)}
.faq-item[open] .faq-q .chev{transform:rotate(180deg)}
.faq-a{padding:0 24px 24px;font-size:15.5px;color:var(--grey);line-height:1.7;font-weight:500}
.faq-a p+p{margin-top:12px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#fff;padding:72px 0 40px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media(max-width:820px){.footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer .cols{grid-template-columns:1fr}}
.footer .brand b{color:#fff}
.footer .brand b span{color:#8f8a9c}
.footer-blurb{color:#a5a1b3;font-size:14.5px;line-height:1.6;margin-top:16px;max-width:300px;font-weight:500}
.footer h4{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8f8a9c;margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:#cfccd8;font-size:14.5px;font-weight:600;transition:.15s}
.footer ul a:hover{color:#fff}
.footer-bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8f8a9c;font-size:13px;font-weight:500}
.footer-bottom a{color:#a5a1b3}
.footer-bottom a:hover{color:#fff}

/* ---------- misc ---------- */
.plat{font-size:13.5px;color:var(--muted);font-weight:600}
.divider{height:1px;background:var(--line);border:0;margin:0}
.pre-line{white-space:pre-line}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:64px 0 96px}
.legal .back{display:inline-block;font-size:14px;font-weight:700;color:var(--violet);margin-bottom:26px}
.legal h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.025em}
.legal .updated{color:var(--muted);font-size:14px;font-weight:600;margin-top:10px}
.legal h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:36px 0 10px}
.legal p{font-size:16px;color:var(--ink-2);line-height:1.72;font-weight:500;margin-top:12px}
.legal a{color:var(--violet);font-weight:700}
.legal ul{margin:12px 0 0 20px}
.legal li{font-size:16px;color:var(--ink-2);line-height:1.72;font-weight:500;margin-top:8px}
.legal .note-box{margin-top:40px;padding:20px 24px;background:var(--violet-tint);border-radius:var(--r-md);font-size:14.5px;color:var(--ink-2)}

/* ============================================================
   ARTICLE / RESOURCE CONTENT
   Shared by pillar pages and the generated cluster templates.
   Answer-first, readable measure, clean heading hierarchy — the
   structure that both human readers and AI engines reward.
   ============================================================ */
.article{padding:52px 0 88px}
.crumbs{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--violet)}
.crumbs span{margin:0 4px}
.article h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:14px 0 0}
.article .lead{font-size:clamp(17px,2vw,21px);color:var(--ink-2);font-weight:500;line-height:1.6;margin-top:20px}
.article h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:44px 0 0}
.article h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:26px 0 0}
.article p{font-size:16.5px;color:var(--ink-2);line-height:1.75;font-weight:450;margin-top:14px}
.article p b,.article li b{color:var(--ink);font-weight:800}
.article ul,.article ol{margin:16px 0 0 22px}
.article li{font-size:16.5px;color:var(--ink-2);line-height:1.72;font-weight:450;margin-top:9px}
.article img.inline{border-radius:var(--r-md);margin:28px 0 4px;border:1px solid var(--line)}
.article figure{margin:28px 0 4px}
.article figcaption{font-size:13px;color:var(--muted);font-weight:600;margin-top:8px;text-align:center}

/* key-features callout (required block in every template) */
.key-features{margin:28px 0 8px;padding:26px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.key-features h2{margin:0 0 4px;font-size:15px !important;text-transform:uppercase;letter-spacing:.08em;color:var(--violet)}
.key-features ul{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.key-features li{position:relative;padding-left:32px;margin-top:0;font-size:16px;color:var(--ink-2);font-weight:500}
.key-features li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--violet-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236940DD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* FAQ block inside articles (required in every template) */
.article-faq{margin-top:44px}
.article-faq h2{margin-bottom:4px}

/* cluster list on pillar pages */
.cluster-list{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.cluster-card{display:block;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.18s}
a.cluster-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(40,20,80,.09);border-color:#d9d0ee}
.cluster-card h3{font-size:18px;font-weight:800;margin:0}
.cluster-card p{font-size:14.5px;color:var(--grey);font-weight:500;margin-top:6px}
.cluster-go{display:inline-block;margin-top:12px;font-weight:800;font-size:14px;color:var(--violet)}
.cluster-soon{display:inline-block;margin-top:12px;font-weight:700;font-size:13px;color:var(--muted)}
.cluster-card.soon{opacity:.85}

/* article-end CTA */
.article-cta{margin-top:56px;padding:44px 32px;text-align:center;background:var(--surface);border-radius:var(--r-xl)}
.article-cta h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em}
.article-cta p{font-size:16px;color:var(--grey);font-weight:500;max-width:520px;margin-left:auto;margin-right:auto}

/* ============================================================
   CINEMATIC HERO (homepage) — startup video -> flash -> live Cora
   ============================================================ */
.hero-cine{position:relative;height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:440px;max-height:1100px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;background:radial-gradient(900px 560px at 50% -10%,#efe9ff 0,transparent 62%),#fff}
.hero-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.9);opacity:.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));animation:cueBob 2.2s ease-in-out infinite}
.hero-cue svg{width:26px;height:26px}
@keyframes cueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.hero-cue{animation:none}}
/* The background image is shown at full clarity (no blur, no fade, no scrim).
   The video sits on top while it plays; its last frame IS this image, so hiding
   the video at the end reveals an identical still with no visible transition. */
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none}
.hero-cine.playing .hero-vid{opacity:1}
.hero-content{position:relative;z-index:6;padding:56px 28px}

.hero-orb{width:clamp(150px,20vw,208px);height:clamp(150px,20vw,208px);margin:0 auto 22px;display:grid;place-items:center}
/* greeting sits over the (light) lobby image, so it's white with a soft shadow for legibility — the image itself is untouched */
.hero-greet{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 24px rgba(12,7,26,.6),0 1px 5px rgba(12,7,26,.45)}

/* intro choreography: hide the content until the video finishes, then fade in */
.hero-cine.intro .hero-content>*{opacity:0}
.hero-cine .reveal-in{animation:heroRise .8s ease forwards}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-cine.intro .hero-content>*{opacity:1}
  .hero-cine .reveal-in{animation:none}
}

/* ============================================================
   FULL DESKTOP-APP WINDOW (upgraded preview)
   ============================================================ */
.app-stage{padding:40px 0 92px;background:linear-gradient(180deg,#fff 0%,var(--surface) 40%,var(--surface) 100%)}
.app-win{max-width:1080px;margin:0 auto;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid #e4e0ee;box-shadow:0 50px 120px rgba(40,20,80,.22),0 8px 24px rgba(40,20,80,.10)}
.win-bar{height:46px;display:flex;align-items:center;padding:0 16px;background:#f4f2f8;border-bottom:1px solid var(--line);position:relative}
.win-dots{display:flex;gap:8px}
.win-dots i{width:12px;height:12px;border-radius:50%;display:block}
.win-dots .r{background:#ff5f57}.win-dots .y{background:#febc2e}.win-dots .gr{background:#28c840}
.win-title{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--grey)}
.win-body{display:flex;min-height:520px}
@media(max-width:640px){.win-body{min-height:auto}}
.win-body .s-side{width:216px;flex:0 0 auto;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;background:#fbfafe}
.s-brand{display:flex;align-items:center;gap:8px;padding:2px 8px 18px}
.s-brand b{font-size:14px;font-weight:800}.s-brand span{color:var(--grey);font-weight:600}
.win-body .s-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--grey);cursor:default}
.win-body .s-item svg{width:17px;height:17px;stroke:currentColor;flex:0 0 auto}
.win-body .s-item.on{background:var(--violet-tint);color:var(--violet)}
.s-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:14px}
.s-usage .bar{height:7px;border-radius:99px;background:#ececf2;overflow:hidden}
.s-usage .bar>i{display:block;height:100%;width:25%;background:var(--grad);border-radius:99px}
.s-usage .ul{font-size:11px;font-weight:700;color:var(--grey);margin-top:6px}
.win-body .s-main{flex:1;min-width:0;display:flex;flex-direction:column}
.win-body .s-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}
.win-body .s-top .tt{font-size:18px;font-weight:800;display:block}
.win-body .s-top .s-sub{font-size:13px;color:var(--muted);font-weight:600}
.s-ask{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 15px 5px 6px;background:#fff}
.s-ask b{font-size:12.5px;font-weight:800}
.s-scroll{padding:22px 24px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.s-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.s-stats{grid-template-columns:1fr}}
.s-stat{border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:5px;background:#fff}
.s-stat .lab{font-size:11.5px;font-weight:700;color:var(--muted)}
.s-stat .val{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.s-stat .up{font-size:11.5px;font-weight:700;color:#1e9e44}
.s-task{border:1px solid #e6def8;background:linear-gradient(135deg,#faf7ff,#fff);border-radius:18px;padding:24px}
.s-task .eb{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--violet)}
.s-task h4{font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:10px 0 8px}
.s-task p{font-size:14px;color:var(--grey);font-weight:500;line-height:1.6;margin-bottom:16px;max-width:60ch}
.s-go{display:inline-block;background:var(--grad);color:#fff;font-weight:800;font-size:13px;padding:11px 20px;border-radius:999px}
.s-tasks{display:flex;flex-direction:column;gap:2px}
.s-trow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2)}
.s-trow span:nth-child(2){flex:1}
.s-check{width:18px;height:18px;border-radius:50%;border:2px solid #d7d2e4;flex:0 0 auto}
.s-check.on{border-color:var(--violet);background:var(--violet-tint)}
.s-tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:#eee;color:var(--grey)}
.s-tag.now{background:var(--violet-tint);color:var(--violet)}
.s-tag.next{background:#eef1f6;color:#6b7280}
@media(max-width:640px){.win-body .s-side{display:none}}
.hero-cine.scene .capture-note{color:rgba(255,255,255,.85)}
.hero-cine.scene .hero-badge .glass-badge{box-shadow:0 10px 26px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5)}

/* ============================================================
   PITCH + CALL GRAPHIC  (moved below the hero fold)
   ============================================================ */
.pitch{padding:76px 0 96px;background:var(--surface)}   /* the teaser's surface tint came across with its cards (Jed, 13 Sep) */
/* ============================================================
   THE CORAVISION PILL. The product's own HUD capsule (#hud.v2 in
   app/style.css, as carried in the scene lab): 320 by 60, the same
   gradient, border, shadow and travelling rim shine. Scaled to the
   column by the page; the orb hole carries the live master orb.
   ============================================================ */
.pillshow{padding:130px 0 40px;background:#fff;overflow-x:clip}   /* the hand runs off the right edge; the laptop may rise above the stage */
.pillshow .eyebrow{font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0}
.pill-title{font-size:clamp(38px,5.6vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:14px 0 0;color:var(--ink)}
/* the stage holds the pill at its top and the laptop's box under it; the
   stage's height is what the page keeps clear for the laptop (set by the
   script from the viewport), the laptop's box is absolute inside it */
/* the stage is narrower than the old 88vw so the hand holding the pill has
   room to run off the right edge at the back of the hand, not the fingers */
.pill-stage{width:min(1060px,52vw);height:var(--stage-h,420px);margin:104px auto 0;position:relative;transition:height .6s ease}
/* playing, the stage is the theatre: the window's height under the nav */
.pill-stage.playing{height:var(--theatre-h,80vh)}
.cv-pill-scale{width:320px;height:60px;transform-origin:top left;transform:scale(var(--ps,1));position:relative;z-index:3}
/* the hand holding the pill, under it in z, sized by the script so the pill
   in the photo sits exactly under the live one; it lets go as the pill flies */
.pill-hand{position:absolute;z-index:2;max-width:none;pointer-events:none;transition:opacity .6s ease}
.pill-stage.playing .pill-hand{opacity:0}
/* the stage's fade-in waits for the hand photo to be decoded (coraPillShow,
   2026-09-29), so the pill never shows a frame before its hand */
.pill-stage.reveal.hand-wait{opacity:0;transform:translateY(22px)}
.cv-pill{
  --pill-gap:12px;--pill-btn-gap:8px;
  position:relative;box-sizing:border-box;
  width:320px;height:60px;border-radius:999px;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:var(--pill-gap);padding:0 14px 0 11px;color:#fff;user-select:none;
  background:linear-gradient(135deg,#6a4cf2 0%,#c25fd0 50%,#f0729a 100%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 5px 14px rgba(10,6,30,.30),inset 0 1px 0 rgba(255,255,255,.45);
  font-family:inherit
}
/* the bubble (#hud.v2.min): a 52px circle round the orb, labels and controls gone */
.cv-pill{transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),border-radius .35s cubic-bezier(.22,1,.36,1),padding .35s cubic-bezier(.22,1,.36,1)}
.cv-pill.min{width:52px;height:52px;border-radius:50%;padding:0;justify-content:center;gap:0;overflow:hidden}
.cv-pill.min .cv-labels,.cv-pill.min .cv-gctrls,.cv-pill.min .cv-gactive,.cv-pill[data-state="active"].min .cv-gactive{display:none}
.cv-pill.min .cv-orbhole{transform:scale(.78)}
.cv-pill[data-state="active"]{background:linear-gradient(140deg,rgba(46,160,67,.94) 0%,rgba(28,128,56,.95) 52%,rgba(23,107,52,.96) 100%)}
.cv-mic{
  position:absolute;top:50%;left:50%;margin:-19px 0 0 -19px;width:38px;height:38px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 8px 1px rgba(255,255,255,.3);transition:opacity .35s ease
}
/* the purple glow breathes on its own layer (opacity, composited) instead of
   animating box-shadow, which repainted the button every frame */
.cv-mic::after{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 24px 8px rgba(168,85,247,.9);opacity:0;animation:cvMicGlow 3.5s ease-in-out infinite}
.cv-mic svg{width:18px;height:18px;display:block;position:relative}
@keyframes cvMicGlow{0%,100%{opacity:0}50%{opacity:1}}
.cv-pill[data-state="active"] .cv-mic{opacity:0}
/* the rim shine: the same turning conic arc as .glass-pill .shine (see there) */
.cv-pill .cv-shine{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude
}
.cv-pill .cv-shine i{
  position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0deg 28deg,rgba(255,255,255,.95) 44deg,transparent 60deg 360deg);
  animation:cvShine 12s ease-in-out infinite;will-change:transform
}
@keyframes cvShine{0%,80%{rotate:-30deg;opacity:0}83%{opacity:1}95%{rotate:300deg;opacity:1}100%{rotate:340deg;opacity:0}}
.cv-lead{order:0;flex:0 0 auto;position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.cv-orbhole{position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;width:40px;height:40px;overflow:visible;opacity:0;transition:opacity .45s ease,transform .35s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center}
.cv-orbhole > *{flex:0 0 auto}
.cv-pill,.cv-lead{overflow:visible}
.cv-pill[data-state="active"] .cv-orbhole{opacity:1}
.cv-pill[data-state="idle"] .cv-orbhole{pointer-events:none}
.cv-oscale{position:absolute;top:50%;left:50%;width:96px;height:96px;margin:-48px 0 0 -48px;transform:scale(.42);transform-origin:center}
.cv-o{position:relative;width:96px;height:96px}
/* the green rings, the product's own artwork; they turn at four speeds */
.cv-ring{position:absolute;inset:0;transform-origin:center;z-index:1}
.cv-ring svg{width:100%;height:100%;display:block}
.cv-r4{animation:cvSpin 19s linear infinite}
.cv-r3 svg{transform:scale(.86);animation:cvSpin 13s linear infinite reverse}
.cv-r2 svg{transform:scale(.68);animation:cvSpin 9s linear infinite}
.cv-r1 svg{transform:scale(.5);animation:cvBreathe 3.6s ease-in-out infinite}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvBreathe{0%,100%{transform:scale(.5)}50%{transform:scale(.585)}}
/* the shimmer over the whole window, under the nav */
.pill-shimmer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2}   /* over the page, under the pill (z 3) */
/* a scene mounted still shows its interface only: the live pill is the pill */
.pill-static .cs-cora,.pill-static .cs-cursor,.pill-static .cs-comp,.pill-static .cs-trail{visibility:hidden}
/* and once the story runs, the scene's own pill stays out: the live pill is the pill */
.pill-nopill .cs-cora{visibility:hidden}
.cv-labels{
  order:1;flex:1 1 auto;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  white-space:nowrap;line-height:1.15;margin-right:4px;text-align:left;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent 100%)
}
.cv-lname{font-size:13.5px;font-weight:800}
.cv-lstat{font-size:11.5px;font-weight:600;opacity:.92}
.cv-gactive{display:none}
.cv-pill[data-state="active"] .cv-gactive{order:2;flex:0 0 auto;display:flex;align-items:center;gap:var(--pill-btn-gap);margin:0 calc(var(--pill-btn-gap) - var(--pill-gap)) 0 auto}
.cv-gab{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;padding:0}
.cv-gab svg{width:15px;height:15px;display:block}
.cv-gctrls{order:3;flex:0 0 auto;display:flex;align-items:center}
.cv-gic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:5px;opacity:.85}
.cv-gic svg{width:100%;height:100%}
/* the callout on the mic: under the pill, a curved arrow up to the mic circle
   (which sits 31px in on the 320px capsule, so 31 * --ps on the big one) and
   the line of text to its right */
.pill-callout{
  position:absolute;left:calc(31px * var(--ps,1) - 12px);top:calc(var(--pill-h,60px) + 6px);z-index:4;
  display:flex;align-items:flex-start;gap:10px;
  color:var(--ink-2);font-size:15px;font-weight:600;white-space:nowrap;
  transition:opacity .3s ease;pointer-events:none
}
.pill-callout svg{width:60px;height:70px;flex:0 0 auto;color:#9a9aa2}
.pill-callout span{padding-top:46px}
.pill-callout.gone{opacity:0}
.cv-mic{cursor:pointer;border:none;font:inherit;pointer-events:auto}
.cv-pill[data-state="idle"] .cv-mic{border:1px solid rgba(255,255,255,.42)}
.cv-lead::before{
  content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--ring,0deg));
  background:conic-gradient(from 0deg,#4ea3ff 0deg,#bfe3ff 60deg,#4ea3ff 120deg,#bfe3ff 180deg,#4ea3ff 240deg,#bfe3ff 300deg,#4ea3ff 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  opacity:0;pointer-events:none;z-index:2;transition:opacity .2s ease
}
.cv-pill[data-state="idle"] .cv-lead:hover::before{opacity:1}
.cv-pill[data-state="idle"] .cv-mic:hover{animation:none;box-shadow:0 0 14px 4px rgba(255,255,255,.55)}
/* The yellow copy card: the product's #pastePanel, rules verbatim from
   app/onboarding.js (pillPanelStyle), geometry from buildPillPanel: it hangs
   from the pill's vertical middle at the pill's width, under the pill (the
   pill is z 10 there), with the 46px top padding clearing the overlap band.
   The two icons are the bootstrap-icons glyphs it uses, inlined. */
.cv-pill{z-index:10}
#pastePanel{position:absolute;z-index:2;background:#EFEFEF;border-radius:0 0 22px 22px;-webkit-app-region:no-drag;
  box-shadow:0 16px 34px rgba(10,6,30,.28);font-family:inherit;display:none;flex-direction:column;overflow:hidden;
  left:0;top:30px;width:320px;height:auto;text-align:left}
#pastePanel.on{display:flex}
#pastePanel{z-index:6;background:#FFD60A}
#pastePanel.on{animation:pnavIn .18s ease}
@keyframes pnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ypaste-wrap{padding:46px 14px 14px}
.ypaste-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 6px}
.ypaste-collapse{width:26px;height:26px;flex:0 0 auto;border:none;background:rgba(0,0,0,.16);border-radius:50%;cursor:pointer;color:#3A3000;display:flex;align-items:center;justify-content:center;padding:0;-webkit-app-region:no-drag}
.ypaste-collapse:hover{background:rgba(0,0,0,.28)}
.ypaste-collapse svg{width:13px;height:13px}
.ypaste-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3A3000}
.ypaste-cell{display:flex;align-items:center;gap:10px;background:#141418;border-radius:12px;padding:10px 12px}
.ypaste-cell pre{margin:0;flex:1 1 auto;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#fff;white-space:pre-wrap;word-break:break-all;user-select:text}
.ypaste-copy{appearance:none;border:none;background:rgba(255,255,255,.16);color:#fff;font-family:inherit;font-weight:700;font-size:11.5px;padding:6px 12px;border-radius:8px;cursor:pointer;flex:0 0 auto}
.ypaste-copy:hover{background:rgba(255,255,255,.28)}
.ypaste-copy.copied{background:#2FBF71;color:#fff}
.ypaste-copy.copy-failed{background:#D64545;color:#fff}
.ypaste-copy .bi{width:1em;height:1em;vertical-align:-.125em}
/* The pill's menu and its Switch Expert panel (Jed, 2026-09-13 pm): the
   product's own panels, rules verbatim from app/onboarding.js pillPanelStyle
   (the Electron app-region lines dropped), hung from the pill's middle at the
   pill's width the way layoutPillPanels does. The menu sizes to its rows; the
   switcher keeps the product's 340 and scrolls. */
#navPanel,#agentPanel{position:absolute;z-index:2;background:#EFEFEF;border-radius:0 0 22px 22px;
  box-shadow:0 16px 34px rgba(10,6,30,.28);font-family:inherit;display:none;flex-direction:column;overflow:hidden;
  left:0;top:30px;width:320px;text-align:left}
#navPanel.on,#agentPanel.on{display:flex}
#navPanel{z-index:7;height:auto}
#navPanel.on{animation:pnavIn .18s ease}
#agentPanel{z-index:4;height:340px}
.pnav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:none;border-radius:12px;background:none;
  font-family:inherit;font-size:14.5px;font-weight:700;color:#3F3F46;cursor:pointer;text-align:left;margin-bottom:2px}
.pnav-item svg{width:19px;height:19px;flex:0 0 auto}
.pnav-item:hover,.pnav-item.hov{background:rgba(120,110,220,.12);color:#0B0B0F}
.ppanel-head{position:relative;font-size:15px;font-weight:800;color:#0B0B0F;padding:42px 48px 10px 18px;flex:0 0 auto}
.ppanel-collapse{position:absolute;right:14px;bottom:6px;width:26px;height:26px;border:none;background:#fff;border-radius:50%;
  cursor:pointer;color:#3A3A40;display:flex;align-items:center;justify-content:center;padding:0}
.ppanel-collapse:hover{background:#E2E2E6;color:#0B0B0F}
.ppanel-collapse svg{width:13px;height:13px}
.ppanel-scroll{overflow-y:auto;padding:0 14px 16px;flex:1 1 auto}
.agrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E3E3E8;border-radius:16px;padding:12px 14px;margin-bottom:10px}
.agrow.off{opacity:.45}
.agrow .ao{width:36px;height:36px;flex:0 0 auto}
.agrow .ao svg{width:100%;height:100%;display:block}
.agrow .am{flex:1 1 auto;min-width:0}
.agrow .an{font-size:14px;font-weight:800;color:#0B0B0F}
.agrow .as{font-size:11.5px;font-weight:600;color:#6D6D6D;line-height:1.35;margin-top:1px}
.agrow .aswitch{appearance:none;border:none;background:#0B0B0F;color:#fff;font-family:inherit;font-weight:800;font-size:12px;
  padding:8px 16px;border-radius:999px;cursor:pointer;flex:0 0 auto;transition:transform .15s ease,opacity .2s ease}
.agrow .aswitch:hover{transform:translateY(-1px)}
.agrow .aswitch:disabled{opacity:.5;transform:none;cursor:default}
.pad-empty{font-size:12.5px;font-weight:600;color:#8A8A92;margin:8px 4px}
/* the flight into the laptop screen, then out of the way */
.cv-pill-scale.fly{transition:transform 1.1s cubic-bezier(.2,.9,.25,1)}
.cv-pill-scale.away{visibility:hidden}
/* the laptop's box: from just under the pill to the stage's bottom edge,
   empty air until the mic is clicked. The laptop rises into it from below,
   under the pill in z, so the pill can fly down onto its screen */
.pill-lap{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;height:100%;overflow:hidden;z-index:1}   /* the whole window's width; top and height set by the script when it plays */
.pill-lap-rig{position:absolute;left:50%;top:0;transform:translate(-50%,var(--rise,100vh));transition:transform 1.4s cubic-bezier(.2,.9,.25,1)}
.pill-lap.up .pill-lap-rig{transform:translate(-50%,0)}
.pill-lap.up{background:#fff}   /* the theatre's ground: nothing of the page shows past the laptop's edges when the camera moves */
.pill-again{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:5;
  border:1.5px solid #d8d4e2;background:#fff;color:var(--ink);border-radius:999px;
  padding:9px 18px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .3s ease
}
.pill-again.on{opacity:1;pointer-events:auto}
/* The big green pill's pause and close buttons work while the pill is big
   (both pause, the same as Stop presentation); once it has flown onto the
   laptop screen they are just the product's picture again (Jed, 13 Sep). */
button.cv-gab{font:inherit;color:inherit;cursor:pointer;transition:background .15s ease}
.cv-pill-scale:not(.fly) .cv-pill[data-state="active"] button.cv-gab:hover{background:rgba(255,255,255,.30)}
.cv-pill-scale.fly button.cv-gab{pointer-events:none;cursor:default}
/* while it plays, the Stop button and the paused pill ride the window, not
   the stage: a visitor who scrolls off can always find the way to stop it
   (Jed, 2026-09-16); nothing above the stage is transformed, so fixed means
   the window */
.pill-stage.playing .pill-again,.pill-stage.playing .pill-paused{position:fixed;bottom:24px}
/* Paused: a white pill over the Stop button, the label and two plain buttons */
.pill-paused{
  position:absolute;left:50%;bottom:20px;z-index:7;transform:translate(-50%,8px);
  display:flex;align-items:center;gap:8px;padding:7px 7px 7px 20px;white-space:nowrap;
  background:#fff;border-radius:999px;box-shadow:0 14px 36px rgba(11,11,15,.16),0 0 0 1px rgba(11,11,15,.06);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease
}
.pill-stage.paused .pill-paused{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pill-stage.paused .pill-again{opacity:0;pointer-events:none}
.pp-label{font-size:13px;font-weight:600;color:var(--grey);margin-right:6px}
.pp-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border-radius:999px;
  border:1.5px solid #d8d4e2;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.pp-btn:hover{background:#f7f5fb;border-color:#bdb6d0}
.pp-btn svg{width:13px;height:13px;flex:0 0 auto}
.pp-resume{background:var(--ink);border-color:var(--ink);color:#fff}
/* the same controls in the hero while Cora says her hello: pinned to the
   bottom of the window, above the stage, shown only while her line plays */
.hero-ctl{position:absolute;left:0;right:0;bottom:0;height:0;z-index:8;opacity:0;pointer-events:none;transition:opacity .3s ease}
.hero-ctl.on{opacity:1}
.hero-ctl:not(.on) .pill-again,.hero-ctl.paused .pill-again{opacity:0;pointer-events:none}
.hero-ctl.paused .pill-paused{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pp-resume:hover{background:#2a2733;border-color:#2a2733}
/* a phone has no room for the label beside Resume and Back to start (the
   two buttons say it): 417px of pill on a 390px window, 2026-09-16 */
@media (max-width:640px){.pp-label{display:none}.pill-paused{padding-left:7px}}
/* the camera move on the whole laptop: one eased transform, GPU composited */
.pill-lap .rig{transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
.pill-lap-rig{perspective:2600px;perspective-origin:50% 40%}
/* the laptop's own screen is dark until the scene lands in it */
.pill-lap .screenbox{background:#0e0c16}
@media (max-width:640px){.pillshow{padding:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}.pill-stage{width:66vw;margin:40px auto 0}.pill-callout{font-size:13px}}

/* the strategy document above the pitch: the fanned pages and the ground
   shadow reach past the artboard, so it gets air on every side */
.pitch-split{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:center;text-align:left;margin-top:40px}
.pitch-split .pitch-sub{margin:0;max-width:40ch;font-size:clamp(17px,1.5vw,21px)}
.report-stage{width:100%;padding:30px 0 60px 10px}
@media (max-width:900px){
  .pitch-split{grid-template-columns:1fr;gap:20px;text-align:center}
  .pitch-split .pitch-sub{margin:0 auto}
  .report-stage{width:92%;margin:0 auto;padding:20px 0 40px}
}
.pitch .hero-badge{margin:0 0 22px}
/* the same cut as the hero's own title */
.pitch-h1{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.1;max-width:22ch;margin:0 auto;text-wrap:balance}   /* the size the other section titles use (Jed, 13 Sep) */
.call-frame{margin:44px auto 0;max-width:1060px}
.call-frame img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid #241d33;
  box-shadow:0 50px 120px rgba(20,10,40,.30),0 8px 24px rgba(20,10,40,.14)}
.call-frame figcaption{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:16px}
.pitch-sub{font-size:clamp(16px,1.9vw,20px);color:var(--ink-2);font-weight:500;max-width:660px;margin:44px auto 0;line-height:1.6}
.pitch-form{max-width:520px;margin:30px auto 0}

/* ============================================================
   HOMEPAGE REV 3 — bigger logo, glass capture, glass problem
   cards, platform orb, connect pills, specialist roster,
   Google Ads mock + orb.
   ============================================================ */

/* 1. bigger nav brand (~30%) */
.brand .lo{width:39px;height:39px}
.brand b{font-size:23px}

/* 3. glass early-access capture, sitting on a colour band */
.capture-band{position:relative;overflow:hidden;border-radius:var(--r-xl);text-align:center;color:#fff;
  padding:clamp(34px,5vw,60px) clamp(20px,4vw,48px);
  background:linear-gradient(150deg,#3a1c71 0%,#5b2a86 45%,#a14b9c 100%)}
.capture-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 15% 0,rgba(255,255,255,.14),transparent 60%),linear-gradient(115deg,rgba(255,255,255,.05) 0 47%,rgba(0,0,0,.05) 47% 100%)}
.capture-band .cb-in{position:relative;z-index:1;max-width:620px;margin:0 auto}
.capture-band h2{color:#fff;font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.capture-band p{color:rgba(255,255,255,.85);font-size:16px;font-weight:500;margin-top:12px}
.capture-glass{position:relative;overflow:hidden;display:flex;gap:8px;align-items:center;max-width:540px;margin:26px auto 0;padding:8px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 44px rgba(10,6,30,.34),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.15)}
.capture-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;opacity:0;
  background:conic-gradient(from var(--shineA),transparent 0deg 30deg,rgba(255,255,255,.95) 46deg,transparent 62deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:none}
@media (prefers-reduced-motion:reduce){.capture-glass::after{animation:none}}
.capture-glass input{flex:1;min-width:0;height:52px;border:none;background:transparent;color:#fff;font-family:inherit;font-size:16px;padding:0 20px}
.capture-glass input::placeholder{color:rgba(255,255,255,.72)}
.capture-glass input:focus{outline:none}
.capture-glass button{flex:0 0 auto;height:52px;padding:0 26px;border:none;border-radius:var(--r-pill);font-family:inherit;font-weight:800;font-size:15px;
  cursor:pointer;background:#fff;color:var(--violet);transition:.16s;display:inline-flex;align-items:center;gap:8px}
.capture-glass button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.capture-band .capture-note{color:rgba(255,255,255,.8);margin-top:16px}
.capture-band .capture-ok{margin:16px auto 0;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.capture-band .capture-ok svg{stroke:#fff}
@media(max-width:520px){.capture-glass{flex-wrap:wrap}.capture-glass input{flex:1 0 100%;text-align:center}.capture-glass button{flex:1 0 100%;justify-content:center}}

/* 4. glass edging on the problem cards (over a soft violet field) */
.problem{background:linear-gradient(165deg,#efe9ff 0%,#e7ddfa 100%)}
.problem .card{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px rgba(60,28,113,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.problem .card h3{color:var(--ink)}
.problem .card p{color:#5a4b74}

/* 5. Cora orb sitting on the platform image (her office) */
.plat-media{position:relative}
.plat-orb{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.plat-media .media::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(10,6,25,.28),transparent 70%);z-index:1}

/* 6. connect-style logo pills (integrations) */
.connect-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1000px;margin:0 auto}
.connect-pill{display:flex;flex-direction:column;align-items:center;gap:12px;width:168px;padding:22px 16px 18px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 4px 16px rgba(40,20,80,.05);transition:.18s}
.connect-pill:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(40,20,80,.10);border-color:#d9d0ee}
.connect-pill .logo{height:40px;display:flex;align-items:center;justify-content:center}
.connect-pill .logo img{max-height:40px;max-width:120px;width:auto;object-fit:contain}
.connect-pill .cn{font-size:13.5px;font-weight:700;color:var(--ink)}
.connect-pill .connect-btn{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--violet);background:var(--violet-tint);padding:7px 16px;border-radius:var(--r-pill)}
.connect-more{width:168px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--muted);font-weight:700;font-size:13.5px;padding:22px 16px;background:var(--surface)}

/* 7. specialist roster (CoraVersity panel style) */
/* the Coraversity orbs: two queues receding from a big front pair, seats
   placed and sized by main.js at a 1900px design width and the whole stage
   scaled to the window; only the turn toward each other needs perspective */
.orb-v{position:relative;max-width:none;margin:16px auto 32px;perspective:1600px;perspective-origin:50% 40%;transform-style:preserve-3d;transform-origin:50% 0}
.orb-v::before{content:"";display:block;height:var(--qh,600px)}   /* the unscaled height the seats hang from */
.orb-seat{position:absolute;left:50%;bottom:0;text-align:center;opacity:0;will-change:opacity}   /* flat: z-index keeps the disc in front over the one behind */
.orb-seat-o{position:relative;perspective:1600px}   /* the seat's own camera; its origin is set per seat to the queue's */
.orb-layer{position:absolute;inset:0;transform:rotateY(var(--turn,0deg)) translateZ(var(--dz,0px));will-change:transform}
.orb-layer.disc{background:#fff;border-radius:50%}   /* the solid base: the orb in front hides the one behind, rings and centre alike */
.orb-layer svg{width:100%;height:100%;display:block;overflow:visible}
.orb-seat-n{position:absolute;left:50%;bottom:-34px;width:200px;margin-left:-100px;font-size:16px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;text-align:center}
/* thirteen cards: a centred wrap, so the short last row sits in the middle
   rather than hanging off the left of a grid */
.spec-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1100px;margin:0 auto}
.spec-card{flex:0 0 200px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 16px 20px;text-align:center;transition:.18s}
@media(max-width:460px){.spec-card{flex-basis:calc(50% - 9px)}}
.spec-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(30,15,60,.10);border-color:#d9d0ee}
.spec-orb{width:60px;height:60px;margin:0 auto 14px;display:block}
.spec-card .sn{font-size:16px;font-weight:800;letter-spacing:-.01em}
.spec-card .sr{font-size:12.5px;color:var(--grey);font-weight:600;margin-top:3px}
.spec-card .sc{display:inline-block;margin-top:10px;padding:4px 11px;border-radius:999px;background:var(--violet-tint);color:var(--violet);font-size:11.5px;font-weight:700;letter-spacing:.02em}   /* the lesson count pill */

/* 8. Google Ads interface outline + purple Cora orb */
.gads-wrap{position:relative;max-width:900px;margin:0 auto 46px}
.gads-win{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 34px 80px rgba(40,20,80,.16)}
.gads-bar{height:40px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#f3f1f7;border-bottom:1px solid var(--line)}
.gads-bar .d{width:11px;height:11px;border-radius:50%}
.gads-bar .r{background:#ff5f57}.gads-bar .y{background:#febc2e}.gads-bar .g{background:#28c840}
.gads-bar .u{margin-left:12px;font-size:12px;color:var(--muted);font-weight:600}
.gads-body{display:flex;min-height:340px}
.gads-side{width:180px;flex:0 0 auto;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:9px;background:#fbfafe}
.gads-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#3c4043;padding:2px 6px 10px}
.gads-brand img{height:18px}
.gads-side .row{height:11px;border-radius:6px;background:#eceaf3}
.gads-side .row.on{background:var(--violet-tint);width:80%}
.gads-side .row.sm{width:66%}.gads-side .row.smr{width:74%}
.gads-main{flex:1;min-width:0;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.gads-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gads-kpi{border:1px solid var(--line);border-radius:12px;padding:14px}
.gads-kpi .k{height:8px;width:60%;background:#eceaf3;border-radius:5px}
.gads-kpi .v{height:16px;width:80%;background:#e2ddf1;border-radius:5px;margin-top:10px}
.gads-chart{flex:1;border:1px solid var(--line);border-radius:12px;padding:14px;min-height:150px;display:flex;align-items:flex-end}
.gads-chart svg{width:100%;height:120px}
.gads-orb{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.gads-orb .halo{position:absolute;width:min(260px,40%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(105,64,221,.28),transparent 70%)}
@media(max-width:640px){.gads-side{display:none}}

/* ============================================================
   HOMEPAGE REV 4
   ============================================================ */

/* Experience Cora button under the greeting */
.hero-cta{margin-top:26px}
.hero-cta .glass-pill{height:56px;padding:0 32px;font-size:16px}

/* the product's purple Cora pill (static, for the "sees your screen" scene) */
.cora-pill{position:relative;display:inline-flex;align-items:center;gap:11px;height:58px;padding:0 22px 0 9px;border-radius:var(--r-pill);color:#fff;
  background:linear-gradient(135deg,rgba(106,76,242,.9) 0%,rgba(194,95,208,.82) 50%,rgba(240,114,154,.9) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 44px rgba(10,6,30,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.cora-pill .cp-orb{width:40px;height:40px;flex:0 0 auto;display:block}
.cora-pill .cp-txt{display:flex;flex-direction:column;line-height:1.16;text-align:left}
.cora-pill .cp-txt b{font-size:14.5px;font-weight:800}
.cora-pill .cp-txt span{font-size:11.5px;opacity:.92;font-weight:600}

/* Google Ads scene: taller (screen-shaped), green active edges + teacher tag, pill floating over it */
.gads-win{border:2px solid rgba(52,199,89,.85);box-shadow:0 34px 80px rgba(40,20,80,.16),0 0 0 5px rgba(52,199,89,.16)}
.gads-body{min-height:460px}
.gads-chart{min-height:230px}
.gads-tag{position:absolute;left:16px;bottom:16px;z-index:4;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:800;color:#0f7a34;background:rgba(52,199,89,.16);border:1px solid rgba(52,199,89,.55);
  padding:7px 13px;border-radius:var(--r-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gads-tag .d{width:8px;height:8px;border-radius:50%;background:#1FB255;box-shadow:0 0 0 0 rgba(52,199,89,.6);animation:badgePulse 2s infinite}
.gads-pill{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:5}
@media(max-width:640px){.gads-body{min-height:360px}.gads-pill{bottom:24px}}

/* ---- animated cursor demo: Cora clicking through the interface ---- */
.gads-win{position:relative}
.gads-main{overflow:hidden}
.gads-scroll{display:flex;flex-direction:column;gap:16px;transition:transform .8s cubic-bezier(.5,0,.2,1)}
.gads-kpis-2{opacity:.0;transition:opacity .5s}
.gads-side .row{transition:background .45s ease,width .45s ease}
.gads-chart .l2{opacity:0;transition:opacity .6s ease}
.gads-kpi .v{transition:background .45s ease}
/* fake pointer */
.gads-cursor{position:absolute;left:46%;top:40%;width:24px;height:24px;z-index:6;pointer-events:none;
  transition:left .85s cubic-bezier(.5,0,.2,1),top .85s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.gads-cursor svg{width:100%;height:100%;display:block}
.gads-cursor.click::after{content:"";position:absolute;left:-7px;top:-7px;width:30px;height:30px;border-radius:50%;
  border:2.5px solid var(--violet);animation:cursorPing .5s ease-out}
@keyframes cursorPing{0%{transform:scale(.25);opacity:.85}100%{transform:scale(1.6);opacity:0}}
/* step 2: highlight jumps to the "Conversions" row, chart improves, KPIs turn green */
.gads-win[data-step="2"] .gads-side .row.on,
.gads-win[data-step="3"] .gads-side .row.on{background:#eceaf3;width:66%}
.gads-win[data-step="2"] .gads-side .row.r3,
.gads-win[data-step="3"] .gads-side .row.r3{background:var(--violet-tint);width:82%}
.gads-win[data-step="2"] .gads-chart .l2,
.gads-win[data-step="3"] .gads-chart .l2{opacity:1}
.gads-win[data-step="2"] .gads-chart .l1,
.gads-win[data-step="3"] .gads-chart .l1{opacity:.25}
.gads-win[data-step="2"] .gads-kpi .v,
.gads-win[data-step="3"] .gads-kpi .v{background:rgba(52,199,89,.5)}
/* step 3: content scrolls up to reveal the second KPI row */
.gads-win[data-step="3"] .gads-scroll{transform:translateY(-96px)}
.gads-win[data-step="3"] .gads-kpis-2{opacity:1}
@media(prefers-reduced-motion:reduce){.gads-cursor{display:none}.gads-scroll{transition:none}}

/* Insights: green "API connected" state */
.connect-pill .connect-btn.connected{color:#0f7a34;background:rgba(52,199,89,.14);border:1px solid rgba(52,199,89,.45);display:inline-flex;align-items:center;gap:7px}
.connect-pill .connect-btn.connected .cdot{width:7px;height:7px;border-radius:50%;background:#1FB255;box-shadow:0 0 0 3px rgba(52,199,89,.18)}

/* full-width bands (no black box + final CTA) */
.fullband{position:relative;overflow:hidden;isolation:isolate;color:#fff;min-height:100vh;display:flex;align-items:center;padding:clamp(64px,10vw,120px) 0}   /* a full screen of the room (Jed, 13 Sep) */
.fullband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fullband::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 100%)}   /* no colour cast: a soft neutral shade behind the copy only, the photo stays true */
.fullband .in{max-width:820px;margin:0 auto;padding:0 var(--pad);text-align:center}
.fullband .eyebrow{color:#e7d9ff}
.fullband h2{color:#fff;font-size:clamp(28px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.fullband p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.9vw,20px);font-weight:500;margin-top:16px;line-height:1.6}
/* full-width capture band (final CTA) */
.capture-band.full{border-radius:0;padding:clamp(56px,8vw,96px) 0}

/* ============================================================
   HOW IT WORKS — hero video block
   ============================================================ */
.video-block{position:relative;max-width:1000px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:1px solid var(--line);box-shadow:0 34px 80px rgba(40,20,80,.16)}
.video-block img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.video-block::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,35,.15),rgba(20,10,35,.45))}
.video-block .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.video-block .play .pbtn{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(0,0,0,.3);transition:transform .18s}
.video-block:hover .play .pbtn{transform:scale(1.06)}
.video-block .play .pbtn svg{width:34px;height:34px;margin-left:5px;fill:var(--violet)}
.video-block .vlabel{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff}
.video-block .vlabel b{font-size:17px;font-weight:800;display:block}
.video-block .vlabel span{font-size:13px;opacity:.85;font-weight:600}

/* ============================================================
   RESOURCE PILLAR — full-width coloured header + imagery spots
   ============================================================ */
.pillar-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(52px,7vw,88px) 0 clamp(44px,6vw,72px);
  background:linear-gradient(140deg,#3a1c71 0%,#5b2a86 45%,#a14b9c 100%)}
.pillar-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0 47%,rgba(0,0,0,.06) 47% 100%)}
.pillar-hero .in{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 var(--pad)}
.pillar-hero .crumbs{color:rgba(255,255,255,.75)}
.pillar-hero .crumbs a{color:#fff}
.pillar-hero .p-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:var(--r-pill);margin:14px 0 0}
.pillar-hero h1{color:#fff;font-size:clamp(30px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-top:16px}
.pillar-hero .lead{color:rgba(255,255,255,.9);font-size:clamp(17px,2vw,21px);font-weight:500;line-height:1.6;margin-top:18px}

/* imagery / interface placeholder inside articles */
.article-figure{margin:30px 0 6px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.article-figure img{width:100%;height:auto;display:block}
.article-figure.ph{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--muted);
  background:repeating-linear-gradient(45deg,#f4f1fb,#f4f1fb 12px,#efeaf8 12px,#efeaf8 24px)}
.article-figure.ph svg{width:34px;height:34px;stroke:var(--faint)}
.article-figure.ph span{font-size:13px;font-weight:700}
.article-figure figcaption,.article-figcap{font-size:13px;color:var(--muted);font-weight:600;margin-top:8px;text-align:center}

/* ============================================================
   PITCH CAROUSEL (call graphic slideshow)
   Auto-plays when it enters the viewport; dots + prev/next.
   ============================================================ */
.carousel{position:relative;max-width:1060px;margin:44px auto 0;padding:0 66px}
.car-view{overflow:hidden;border-radius:16px;border:1px solid #241d33;box-shadow:0 50px 120px rgba(20,10,40,.30),0 8px 24px rgba(20,10,40,.14);background:#0b0710}
.car-track{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.car-slide{flex:0 0 100%;min-width:0;margin:0;position:relative}
.car-slide img{width:100%;height:auto;display:block}
/* live video in the bottom-right call tile of slide 1 (measured from meeting-call.webp) */
.call-tile{position:absolute;left:50.4%;top:48.0%;width:48.44%;height:40.44%;border-radius:12px;overflow:hidden;background:#0a0a0f;z-index:2}
.call-video{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block}
.call-name{position:absolute;left:3.2%;bottom:5%;font-size:clamp(9px,1.1vw,13px);font-weight:700;color:#fff;
  background:rgba(20,16,26,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:4px 11px;border-radius:999px;line-height:1.2}
@media (max-width:560px){.call-tile{border-radius:8px}}
@media (prefers-reduced-motion:reduce){.car-track{transition:none}}
/* arrows */
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:.16s}
.car-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.car-btn svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.car-prev{left:0}.car-next{right:0}
@media(max-width:560px){.carousel{padding:0 46px}.car-btn{width:38px;height:38px}.car-prev{left:0}.car-next{right:0}}
/* dots */
.car-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}
.car-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;background:#d7d0e8;transition:.2s}
.car-dot.on{background:var(--violet);width:26px;border-radius:99px}
.car-cap{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:14px;text-align:center}

/* ============================================================
   Early Access page — full-screen glass card
   ============================================================ */
.ea-body{background:#0b0710}
.ea-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 20px;overflow:hidden}
.ea-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:eaBgIn 1s ease both}
@keyframes eaBgIn{from{opacity:0}to{opacity:1}}
.ea-in{position:relative;z-index:1;display:flex;justify-content:center;width:100%}
.ea-card{position:relative;max-width:680px;width:100%;text-align:center;
  background:linear-gradient(180deg,rgba(28,17,48,.46),rgba(18,11,32,.52));
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-xl);
  padding:clamp(36px,5vw,60px);box-shadow:0 44px 100px rgba(10,4,24,.5);
  animation:eaCardUp .75s cubic-bezier(.22,1,.36,1) both}
@keyframes eaCardUp{from{opacity:0;transform:translateY(30px) scale(.984)}to{opacity:1;transform:none}}
.ea-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--shineA),transparent 0deg 26deg,rgba(255,255,255,.98) 44deg,transparent 62deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:eaShine 3.6s ease-in-out .5s 2 both}
@keyframes eaShine{0%{--shineA:-30deg;opacity:0}9%{opacity:1}58%{--shineA:300deg;opacity:1}70%{--shineA:342deg;opacity:0}100%{opacity:0}}
.stage-in{opacity:0;animation:eaIn .6s ease both}
.stage-in.d0{animation:eaBlurIn .8s ease both;animation-delay:0s}
.stage-in.d1{animation-delay:.9s}
.stage-in.d2{animation-delay:1.15s}
.stage-in.d3{animation-delay:1.4s}
@keyframes eaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes eaBlurIn{from{filter:blur(14px);opacity:0}to{filter:blur(0);opacity:1}}
.ea-card .capture-note{color:rgba(255,255,255,.72)}
.ea-card input[name=email]{background:rgba(255,255,255,.94)}
.ea-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;padding-top:30px;border-top:1px solid rgba(255,255,255,.2)}
.ea-points div{display:flex;flex-direction:column;gap:3px}
.ea-points b{font-size:14.5px;font-weight:800;color:#fff}
.ea-points span{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600}
.ea-back{position:absolute;top:24px;left:24px;z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:.2s}
.ea-back:hover{background:rgba(255,255,255,.22)}
.ea-back svg{width:20px;height:20px}
@media(max-width:560px){.ea-points{grid-template-columns:1fr;gap:12px}}
@media(prefers-reduced-motion:reduce){
  .ea-bg,.ea-card,.stage-in{animation:none!important;opacity:1!important;transform:none!important}
  .ea-card::after{display:none}
}

/* ============================================================
   HOME HERO: "Say Hello, literally."
   Apple's arrangement: one big line, one quiet line under it, two
   buttons, and the product itself filling the bottom of the fold.

   The section is a two row grid on purpose. The top row holds the
   copy and centres it in whatever is left; the bottom row is an
   empty spacer exactly as tall as the visible half of Cora. She is
   positioned over that spacer, so the buttons can never collide
   with her however short the window is. That is the whole trick.
   ============================================================ */
.hero-say{
  --orb:clamp(380px,75vw,1180px);
  --show:.30;   /* how much of her height is above the fold at the top of the page */
  position:relative;text-align:center;background:#fff
}
/* Her office: cora-teams-background-1 (Jed, 2026-09-13; it was the app's call
   background, call-studio.webp, which the call slab still uses), full screen
   behind her for act two, faded in and out by the flight (--office). Under
   everything. On a phone it is call-studio.webp again, with Cora on its silver
   disc (the 640px rule below; Jed, 17 Sep). */
.hero-office{
  position:absolute;inset:0;z-index:0;
  background:url("../images/cora-teams-background-1.webp") center / cover no-repeat;
  opacity:var(--office,0);will-change:opacity;pointer-events:none
}
/* Act one lives INSIDE the pinned shot (see .sw-track below). The grid trick
   is unchanged: the top row centres the copy in what is left, the bottom row
   is exactly the part of Cora that shows, plus the nav that sits above the
   pin at the top of the page. The whole act slides up and fades on the
   scrollbar (--hy, --ho). */
.hero-act{
  position:absolute;inset:0;z-index:1;
  display:grid;grid-template-rows:1fr auto;
  transform:translateY(var(--hy,0px));opacity:var(--ho,1);
  will-change:transform,opacity
}
.hero-say-in{align-self:center;padding:clamp(28px,6vh,72px) 24px 0;max-width:940px;margin:0 auto;position:relative;top:-5vh}   /* a little above true centre: it read bottom heavy (Jed, 2026-09-11) */
/* how much of her shows above the fold: --show of her height, but never more
   than --show-max of the window (Jed, 2026-09-13: on a short wide window, a
   zoomed Windows browser, she took half the height and squeezed the copy).
   The flight's orbTargets() applies the same cap, so she sits on this line. */
.hero-say{--show-max:40vh}
.hero-say-orbspace{height:calc(min(var(--orb) * var(--show), var(--show-max)) + var(--nav-h))}

.hero-say h1{
  font-size:clamp(38px,5.6vw,72px);line-height:1.05;font-weight:700;
  letter-spacing:-.035em;color:var(--ink);margin:0
}
.hero-say h1 em{font-style:normal}
.hero-say .sub{
  margin:clamp(16px,2.4vh,26px) auto 0;max-width:52ch;
  font-size:clamp(16px,1.45vw,19px);line-height:1.5;font-weight:500;color:var(--ink-2)
}

/* The buttons. Apple's pairing: one solid, one outlined, same size. */
.hero-say-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,38px)}
/* Both buttons are the same white pill. The platform mark sits on the left of
   the label and inherits the text colour, so there is one style to maintain. */
.dl-btn{
  display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  background:#fff;color:var(--ink);border:1.5px solid #d8d4e2;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease
}
.dl-btn:hover{transform:translateY(-1px);background:#fbfaff;border-color:#bdb6d0;box-shadow:0 10px 26px rgba(11,11,15,.10)}
.dl-btn:active{transform:none}
.dl-btn svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
.dl-btn .mk-apple{margin-top:-2px}          /* the mark's optical centre sits low */

/* Cora. Centred in the pin and moved by two variables the flight writes:
   --oy takes her from her hero position (half below the fold) to the centre,
   --os shrinks her to a tad narrower than the call slab, --oo fades her once
   the slab has covered her. The defaults below are her hero position, so
   there is no jump before the script runs. */
.hero-say-orb{
  position:absolute;left:50%;top:50%;z-index:2;
  width:var(--orb);height:var(--orb);
  margin:calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);
  --oy:calc(50vh + var(--orb) * (0.5 - var(--show)) - var(--nav-h));
  transform:translate(var(--ox,0px),var(--oy)) scale(var(--os,1));
  opacity:var(--oo,1);
  display:grid;place-items:center;pointer-events:none;will-change:transform,opacity
}
/* The slow turn and the bob, on the master's own element, as the two
   individual transform properties so they compose instead of fighting. The
   bob is a share of her own height, so it stays in proportion at any size. */
.hero-say-orb>*{animation:orbTurn 84s linear infinite,orbBobPx 4.8s ease-in-out infinite}
@keyframes orbTurn{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.hero-say-orb>*{animation:none}}
/* The unmute button, in the MIDDLE of her (Jed, 2026-09-11): it lives inside
   her host, so it moves with her, and it bobs on the same keyframes as she
   does. The host is scaled by --os, so the button divides its size by --os
   to stay 112px on screen. Up while her office shows (--ub), hidden while
   she speaks (.live), back when she is done. A plain translucent fill, no
   backdrop-filter, on the same rule as everything else on the stage. */
.hero-unmute{
  position:absolute;left:50%;top:50%;z-index:3;
  width:calc(112px / var(--os,1));height:calc(112px / var(--os,1));
  margin:calc(112px / var(--os,1) / -2) 0 0 calc(112px / var(--os,1) / -2);
  animation:orbBobPx 4.8s ease-in-out infinite;
  opacity:var(--ub,0);pointer-events:none;will-change:opacity,translate
}
.hero-unmute.on{pointer-events:auto}
.hero-unmute.live{opacity:0;pointer-events:none}
.hero-unmute-btn{
  width:100%;height:100%;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2px / var(--os,1));padding:0;
  font-family:inherit;font-size:calc(13.5px / var(--os,1));font-weight:600;letter-spacing:-.01em;
  background:rgba(255,255,255,.42);border:calc(1.5px / var(--os,1)) solid rgba(255,255,255,.75);
  color:var(--ink);box-shadow:0 calc(12px / var(--os,1)) calc(34px / var(--os,1)) rgba(30,15,60,.14);
  transition:transform .18s ease,background .18s ease
}
.hero-unmute-btn:hover{transform:scale(1.04);background:rgba(255,255,255,.6)}
.hero-unmute-btn:active{transform:scale(.98)}
.hero-unmute-btn svg{width:calc(36px / var(--os,1));height:calc(36px / var(--os,1));display:block}
@keyframes orbBobPx{0%,100%{translate:0 calc(var(--orb) * .02)}50%{translate:0 calc(var(--orb) * -.02)}}
@media (max-width:900px){
  .hero-unmute{width:calc(84px / var(--os,1));height:calc(84px / var(--os,1));margin:calc(84px / var(--os,1) / -2) 0 0 calc(84px / var(--os,1) / -2)}
  .hero-unmute-btn{font-size:calc(11.5px / var(--os,1))}
  .hero-unmute-btn svg{width:calc(26px / var(--os,1));height:calc(26px / var(--os,1))}
}
/* Her two lines, on the LEFT (Jed, 2026-09-13: the reception photo's sign is
   on the right, and the cards were covering it), each faded in and out in
   turn by the flight (--l1, --l2). Stacked on one spot so the swap is a
   cross-fade. */
.hero-lines{
  position:absolute;left:4vw;top:50%;width:min(30ch,40vw);z-index:3;
  transform:translateY(-50%);text-align:left;pointer-events:none
}
/* each line sits on its own glass card (Jed, 2026-09-11: readability over
   the room): a milky fill, a hairline, a soft drop, and a light blur of what
   is behind. The blur is the one backdrop-filter on the page, on a small
   static card outside the 3D stage, which is the one place it costs little. */
.hero-lines h2{
  position:absolute;left:0;right:0;top:50%;margin:0;padding:.55em .7em .6em;
  font-size:clamp(30px,3.8vw,54px);line-height:1.08;font-weight:700;
  letter-spacing:-.035em;color:var(--ink);
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);border-radius:.5em;
  box-shadow:0 18px 44px rgba(20,16,40,.12),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  transform:translateY(calc(-50% + (1 - var(--o,0)) * 18px));opacity:var(--o,0);
  will-change:opacity,transform
}
.hero-lines .l1{--o:var(--l1,0)}
.hero-lines .l2{--o:var(--l2,0)}
@media (max-width:900px){
  .hero-lines{right:24px;left:24px;width:auto;top:auto;bottom:16vh;transform:none;text-align:center}
  .hero-lines h2{top:auto;bottom:0;transform:translateY(calc((1 - var(--o,0)) * 18px))}
}

@media(max-width:640px){
  .hero-say{--orb:clamp(300px,104vw,560px);--show:.46;--show-max:48vh}   /* higher up the page on a phone (Jed, 14 Sep) */
  .hero-say .sub{max-width:30ch}
  .dl-btn{height:46px;padding:0 20px;font-size:14.5px}
}

/* ============================================================
   THE STAR WARS STAGE
   The call panel arrives laid right back, huge and low, the way the
   opening crawl does: rotateX with the default centre origin sends
   the top away and brings the bottom toward the camera. Scroll
   flattens it to face you, then twists it.

   Three nested elements, each doing exactly one job, because they
   cannot be combined:
     .sw-track  the timeline. Its height IS the length of the move.
     .sw-pin    sticky, and the clipper. The panel is nearly twice
                the viewport wide at the start, so something has to
                crop it, and overflow:hidden FLATTENS 3D on whatever
                carries it. So it sits outside the 3D context.
     .sw-stage  the camera: perspective and nothing else.
     .sw-slab   the thing that actually moves.

   Only transform composites here. No filter, no backdrop-filter and
   no blend mode anywhere in this block, on the same rule the master
   orb works to.
   ============================================================ */
/* A direct child of the section, deliberately outside .wrap: a full-bleed
   stage cannot live inside a max-width measure, which is what put white
   down both sides. No 100vw trick, because that overflows by the width of
   the scrollbar and the usual fix, overflow-x:hidden on the body, breaks
   position:sticky. */
/* The act is one timeline played by two tracks (Jed, 2026-09-29): the hello
   in the hero, the call after the CoraVision Pill. Each track's --from and
   --to (set in index.md) are its window of the timeline, and its height is
   that window at --span per whole act plus the pinned window itself, so both
   keep the scroll per unit of the act the pacing was tuned on (13 Sep: the
   single track was 1350vh, span 1250; 1170vh and 1070 on a narrow window). */
.sw-track{position:relative;--span:1250vh;height:calc((var(--to,1) - var(--from,0)) * var(--span) + 100vh);background:#fff;width:100%}
/* the call's own section, after the pill: the context the hero gave these
   layers when they lived in it (centred text, a white ground, the stack) */
.act-call{position:relative;text-align:center;background:#fff}
/* the office scrolls straight into the pill section, whose own 130px top is
   the gap; the section padding under the hello would double it */
.hero-say{padding-bottom:0}
/* The backdrop, and the actual reason there was white left over. A slab tipped
   66 degrees projects as a TRAPEZOID, not a rectangle: its far edge recedes and
   pulls in, so no amount of scaling makes a tilted panel cover a rectangular
   screen. Something has to be behind it. On a white page that something read as
   a gap. It is now dark, and the transition from the white hero into it is the
   lights going down before the panel arrives. */
.sw-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
  background:var(--bg,#fff)
}
/* The title, on the right, once the panel has parked on the left. Absolute so
   it cannot push the panel around, and outside .sw-stage so it is never part
   of the 3D and never gets rasterised with it. */
/* THE NAV (Jed, 2026-09-11): fixed on top like Apple's, a frosted white bar
   over whatever is behind it, the official lockup in grey, and a smaller
   pill. One backdrop blur, on a thin strip, which is the one place it is
   cheap. */
.wp-block-template-part{position:fixed;top:0;left:0;right:0;z-index:60}
.wp-block-template-part .nav{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(1.8) blur(14px);backdrop-filter:saturate(1.8) blur(14px)   /* 20 was the radius; the cost grows with it and 14 reads the same (2026-09-13) */
}
.nav .nav-cta a.glass-pill.md{height:32px;padding:0 14px;font-size:12px;line-height:32px;font-weight:600;box-shadow:none}
.nav .nav-cta a.glass-pill.md:hover{box-shadow:none;transform:none}
/* EXPLORE TOPICS: the live site's topic menu, a white panel under the bar */
/* the panel centres on the BAR, not its button, so it never runs off an edge */
.wp-block-template-part .nav{position:relative}
.nav-explore{position:static;display:inline-flex;align-items:center}
.nav-explore-btn{
  display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:var(--r-pill);
  border:none;background:none;color:var(--ink-2);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s
}
.nav-explore-btn svg{width:13px;height:13px;transition:transform .2s ease}
.nav-explore-btn:hover,.nav-explore[data-open="1"] .nav-explore-btn{color:var(--violet);background:var(--violet-tint)}
.nav-explore[data-open="1"] .nav-explore-btn svg{transform:rotate(180deg)}
.nav-mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(1040px,calc(100vw - 48px));padding:34px 36px 30px;border-radius:20px;background:#fff;
  box-shadow:0 30px 80px rgba(20,16,40,.22);border:1px solid rgba(11,11,15,.06);
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.25,1)
}
.nav-explore[data-open="1"] .nav-mega{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.mega-col h4{margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6940DD}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li{margin:0 0 11px;font-size:15.5px;line-height:1.35}
/* the menu sits inside .nav-links, whose link rule (13px, pill padding) would
   otherwise size and indent the linked topics differently from the coming
   soon ones; same specificity, later in the file, so these win */
.nav-links .mega-col a{color:var(--ink);text-decoration:none;font-weight:600;font-size:inherit;padding:0;border-radius:0}
.nav-links .mega-col a:hover{color:#6940DD;background:none}
.mega-col .soon-item{color:#9a9aa2;font-weight:500}
.mega-col .soon-item small{font-size:12px;color:#b9b9be;margin-left:4px}
@media (max-width:900px){
  .nav-explore{display:block}
  .nav-mega{position:static;transform:none;width:auto;box-shadow:none;border:none;padding:12px 0 0;grid-template-columns:1fr;display:none}
  .nav-explore[data-open="1"] .nav-mega{display:grid;opacity:1;transform:none}   /* the desktop rule's translateX(-50%) pushed the list off the left of a phone (2026-09-13) */
}
/* THE LAPTOP LAYER: under the stage, centred, lifted by --lapy from below the
   fold to rest. The rig sizes itself from --zlayout, which the page sets. */
.lap-layer{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  transform:translateY(var(--lapy,110vh));pointer-events:none;will-change:transform}
/* a dark screen before the slab arrives, so the glide-in reads as the call
   filling the laptop rather than covering a glowing wallpaper */
.lap-layer .screenbox{background:#0e0c16}
@media (prefers-reduced-motion:reduce){.lap-layer{display:none}}
/* Three chapters of copy (Jed, 2026-09-11): right, left, right, each on its
   own opacity variable so one fades out before the slab flips and the next
   fades in once it has landed. The rise is a small translate on the same
   variable, so the words settle as they appear. */
.sw-copy{
  position:absolute;top:50%;width:min(640px,42vw);text-align:left;color:#fff;z-index:4;container-type:inline-size;
  --o:0;opacity:var(--o);transform:translateY(calc(-50% + (1 - var(--o)) * 22px));
  pointer-events:none;will-change:opacity,transform
}
/* right-hand copy starts a little past centre; left-hand copy keeps clear
   of the huge slab of chapter two */
/* the right-hand copies start at the slab's measured right edge plus a gap,
   the left-hand one ends at its left edge minus a gap; both written by the
   flight, so the composition holds on any window */
.sw-copy.c1,.sw-copy.c3{left:var(--cxr,58vw);width:min(640px,calc(100vw - var(--cxr,58vw) - 5vw));--o:var(--c1,0)}
.sw-copy.c3{--o:var(--c3,0)}
/* the line between Cora's exit and the slab's arrival: centred, alone */
.sw-copy.c0{left:50%;width:min(1120px,92vw);text-align:center;z-index:3;--o:calc(var(--c0,0) * var(--cf,1));transform:translate(-50%,-50%)}
/* The line grows on the scroll (--cs, written by the flight, capped so it is
   never wider than the call that covers it). The type is set at its largest
   and scaled DOWN from there, so it stays crisp the whole way: a layer scaled
   above 1 is drawn from a smaller raster and goes soft. Each word fades in on
   its own turn: --cw counts words shown so far, --i is the word's place. */
.sw-copy.c0 h2{font-size:clamp(32px,8.4cqw,84px);transform:scale(var(--cs,1));transform-origin:50% 50%;will-change:transform}
.sw-copy.c0 .w{opacity:clamp(0,(var(--cw,99) - var(--i)) / 1.6,1)}
/* "marketing plan." is two words that fade separately but share one gradient:
   the flight sizes and offsets each word's gradient to the pair (--gw, --gx) */
.sw-copy.c0 .w.g{background-size:var(--gw,100%) 100%;background-position:var(--gx,0px) 0;background-repeat:no-repeat}
.sw-copy.c2{left:auto;right:calc(100vw - var(--cxl,44vw));width:min(560px,calc(var(--cxl,44vw) - 6vw));--o:var(--c2,0)}
.sw-copy h2{
  /* the size follows the box it was given, so a narrow window's tighter
     column sets a little smaller instead of breaking one word to a line */
  font-size:clamp(32px,11.5cqw,64px);line-height:1.02;letter-spacing:-.035em;
  font-weight:700;margin:0;text-wrap:balance
}
.sw-copy h2 .g{font-style:normal}
.sw-copy p{
  margin:22px 0 0;max-width:30ch;font-size:clamp(16px,1.45vw,21px);line-height:1.5;
  font-weight:500;color:rgba(255,255,255,.7);text-wrap:pretty
}
@media (max-width:900px){
  .sw-copy{top:auto;bottom:7vh;left:20px;right:20px;width:auto;text-align:center;
    transform:translateY(calc((1 - var(--o)) * 18px))}
  .sw-copy.c0,.sw-copy.c1,.sw-copy.c2,.sw-copy.c3{left:20px;right:20px;width:auto;transform:none}
  .sw-copy p{margin:12px auto 0}
}
.sw-stage{
  width:100%;height:100%;position:relative;z-index:4;
  /* the stage covers the whole pin even while the slab waits below the fold,
     so it must not swallow the clicks meant for the button in Cora */
  pointer-events:none;
  perspective:var(--lens,2600px);
  perspective-origin:50% 46%
}
.sw-slab{
  width:100%;height:100%;
  /* preserve-3d, or everything inside is flattened into the slab's plane and
     an orb can never leave the glass in THIS camera. The call slab's own
     inner perspective is switched off in flight mode (cora-call.css) for the
     same reason: one camera, one 3D context, all the way down to the orbs. */
  transform-style:preserve-3d;
  /* the call slab centres in the stage: without this it sat at the top of
     the slab's box, which read as centred on a desktop only by luck and put
     it in the top corner of a phone */
  display:grid;place-items:center;
  transform-origin:50% 50%;
  transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1))
    rotateX(var(--lay,0deg)) rotateY(var(--turn,0deg)) rotateZ(var(--roll,0deg));
  will-change:transform
}
/* The panel stays a panel. Cropping the call UI to cover the whole screen cut
   the right-hand rail off and wrecked the composition, so it keeps its own
   aspect and its own edges, and the dark backdrop carries the rest of the
   frame. It is sized to fit whichever way the window is tighter. */
/* The slab sizes itself from whichever way the window is tighter. Its own
   .call-window is aspect-ratio 16/10, so giving it a width is enough. */
.sw-slab #callSlab{
  /* the same height rule as the glass inside it (.cw3d-float, 100vh - 176px):
     with two different rules the glass came out narrower than this box on a
     short window, and the landing, which scales this box to the laptop's
     screen, left the glass a tenth small (Jed on Windows, 2026-09-13) */
  width:min(1060px, 88vw, calc((100vh - 176px) * 1.6));
  margin:0 auto
}
.sw-slab .cvcall,.sw-slab .call-visual,.sw-slab .cw3d-float{width:100%}
.sw-slab #callSlab{pointer-events:auto}
/* Its arrows would be hard to hit on a tilted slab and they fight the scroll
   for the same gesture, so the scroll owns the motion and they come back only
   when the panel is square on. */
.sw-slab .car-btn,.sw-slab .car-dots{opacity:0;pointer-events:none;transition:opacity .3s}
.sw-track[data-settled="1"] .car-btn,.sw-track[data-settled="1"] .car-dots{opacity:1;pointer-events:auto}
.sw-slab .car-cap{opacity:var(--capop,1);transition:opacity .3s}

@media (max-width:860px){
  .sw-track{--span:1070vh}
  .sw-pin{padding:0 16px}
}
/* No stage at all: the panel simply sits in the page, as it did before. */
@media (prefers-reduced-motion:reduce){
  .sw-track{height:auto}
  .sw-pin{position:relative;height:auto;overflow:visible;display:block;background:#0b0710}
  .hero-act{position:relative;min-height:calc(100vh - var(--nav-h));background:#fff}
  .hero-say-orb,.hero-office{display:none}
  .hero-lines{position:static;transform:none;width:auto;padding:40px 24px 0;text-align:center}
  .hero-lines h2{position:static;transform:none;opacity:1;color:#fff;margin:0 0 12px}
  .sw-stage{height:auto;padding:40px 0 60px}
  .sw-slab{transform:none}
  .sw-copy{position:static;transform:none;opacity:1;width:auto;padding:0 24px 40px;text-align:center}
  .sw-copy.c0 h2{transform:none}
  .sw-copy.c0 .w{opacity:1}
}

/* The CPU pass (2026-09-13) -------------------------------------------- */
/* a section out of view (main.js) holds its CSS animations. The rule names
   the animated things one by one: ".is-off *" restyled every node of the
   section each time it crossed the edge of the window, a hitch mid scroll
   on the big sections (the laptop, the sixty filtered rings). */
.is-off .orb--breathe,.is-off .hero-say-orb>*,.is-off .hero-unmute,.is-off .hero-cue,
.is-off .cv-r4,.is-off .cv-r3 svg,.is-off .cv-r2 svg,.is-off .cv-r1 svg,.is-off .cv-mic::after,.is-off .cv-shine i,
.is-off .glass-pill .shine i,.is-off .glass-badge .dot,.is-off .gads-tag .d,
.is-off .cw-wave i,.is-off .cw-live .d,.is-off .cw3d-float{animation-play-state:paused}
/* lite (main.js: few cores or little memory, or ?lite=1): no backdrop blurs,
   no rim shines, no ring shadows, no breathing. Solid fills stand in. */
html.lite .nav,html.lite .glass-pill,html.lite .hero-lines h2,html.lite .capture-glass{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite .nav{background:rgba(255,255,255,.96)}
html.lite .hero-lines h2{background:rgba(255,255,255,.82)}
html.lite .glass-pill .shine,html.lite .cv-pill .cv-shine,html.lite .cv-mic::after{animation:none;display:none}
html.lite .orb--breathe{animation:none}
html.lite .orb-layer svg path{filter:none}

/* The beta capsule (Jed, 2026-09-13 pm): one white pill, the two notes on
   the left, the brand-gradient button on the right. Hero and room. */
.cta-pill{display:inline-flex;align-items:center;gap:22px;padding:7px 7px 7px 24px;border-radius:999px;background:#fff;
  border:1.5px solid #d8d4e2;box-shadow:0 14px 34px rgba(11,11,15,.10),inset 0 1px 0 #fff;text-align:left}
.cta-pill-text{display:flex;flex-direction:column;line-height:1.25}
.cta-pill-text b{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cta-pill-text span{font-size:12.5px;font-weight:600;color:var(--grey)}
.cta-pill-btn{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(120deg,#6940DD,#D65499);color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  box-shadow:0 8px 20px rgba(105,64,221,.28);transition:transform .16s ease,box-shadow .16s ease}
.cta-pill-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(105,64,221,.36)}
.cta-pill-btn:active{transform:none}
.fullband .cta-pill{margin-top:clamp(26px,3.6vh,40px)}
@media (max-width:560px){.cta-pill{flex-direction:column;gap:12px;padding:16px 16px 12px;border-radius:26px;text-align:center}.cta-pill-text{align-items:center}}

/* Added 13 Sep 2026 ------------------------------------------------------ */
/* the hero: one button and the beta note beside it */
.hero-say-cta{align-items:center}
.hero-beta{font-size:14px;font-weight:600;color:var(--grey)}
/* the button with the beta note UNDER it (Jed, 2026-09-13), in the hero and at
   the foot of the No black box room. The button is widened, not heightened,
   so the note does not run far past its ends. */
.cta-stack{display:flex;flex-direction:column;align-items:center;gap:12px}
/* "Limited spots available" sits between the button and the beta note (Jed, 13 Sep pm) */
.hero-spots{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cta-stack .hero-spots + .hero-beta{margin-top:-6px}
.fullband .hero-spots{color:#fff}
.cta-stack .dl-btn{min-width:236px;justify-content:center}
.fullband .cta-stack{margin-top:clamp(26px,3.6vh,40px)}
.fullband .hero-beta{color:rgba(255,255,255,.88)}
/* the library block between the orb queues and the cards */
.cv-lib{text-align:center;max-width:720px;margin:8px auto 34px}
.cv-lib h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.cv-lib p{font-size:16px;color:var(--grey);margin:0 0 20px}
.cv-lib-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cv-lib-cta .dl-btn[aria-disabled="true"]{cursor:default}

/* the three steps under the pitch (moved from the How it works teaser, 13 Sep 2026) */
.pitch-steps{margin-top:64px;text-align:left}
.pitch-steps .center{display:flex;justify-content:center;text-align:center}

/* The phone pass (2026-09-13 night) ------------------------------------- */
html,body{overflow-x:clip}   /* the queues run past the edges on a phone; clip does not flatten the 3D the way hidden would */
@media (max-width:640px){
  .hero-say h1{font-size:clamp(44px,11.5vw,72px)}
  .hero-say .sub{font-size:17px}
  /* the black line sits in the middle of the window, not at the foot */
  .sw-copy.c0{top:50%;bottom:auto;transform:translateY(-50%)}
  .sw-copy.c0 h2{font-size:clamp(34px,9.6vw,44px)}
  /* the chapter copy: a little smaller, room for the slab above it */
  .sw-copy h2{font-size:clamp(28px,8.4vw,36px)}
  .sw-copy p{font-size:15px;max-width:34ch}
  .pitch-split .pitch-sub{font-size:17px}
  .cv-lib h3{font-size:24px}
  .fullband h2{font-size:clamp(30px,8.6vw,40px)}
}

/* Phone feedback, 14 Sep 2026 (Jed) --------------------------------------- */
.pill-title .v{color:var(--grey)}   /* Vision in the logo's grey, every size */
/* Watch demo: the same as clicking the mic, under the stage on every size; gone while it plays */
.pill-watch{margin-top:26px}
.pill-stage.playing ~ .pill-watch{display:none}
@media (max-width:640px){
  /* the office: her lines on top, and Cora just below the centre with the
     silver disc of her own office under her (call-studio.webp, the app's call
     background; Jed, 17 Sep: the reception and the lobby did not read on a
     phone). The photo is height-bound under cover on a portrait window, so the
     disc sits at the same spot (centre, 85% down) on every phone; her height
     is orbTargets() in the flight. */
  .hero-office{background-image:url("../images/call-studio.webp")}
  .hero-lines{top:calc(var(--nav-h) + 3vh);bottom:auto}
  .hero-lines h2{top:0;bottom:auto}
  /* the chapters: the slab lifts and the copy sits under it, the two centred as one (the flight lifts the slab by --gup) */
  .sw-copy.c1,.sw-copy.c2,.sw-copy.c3{top:calc(50% + 6px);bottom:auto}
  /* the queues sit under the paragraph, not through it (the seats reach 118px above their box at this scale) */
  .orb-v{margin-top:132px}
  /* the room: closer in, so the copy sits on the greenery */
  .fullband>img{transform:scale(1.2);object-position:50% 45%}
  .pill-watch{margin-top:18px}
}

/* ============================================================
   Early Access page, the app's signup glass (added 2026-09-14)
   Jed asked for the early-access card to match the app's signup
   surface exactly: the frosted glass ring, the white inlaid panel,
   and the boot entrance (room fades up, a second of nothing, the
   empty glass rises, a white outline traces the panel, then the
   panel lights). Values copied from app/signup/signup.html
   (.bg, .scrim, .glass, .glass.wide, .panel, .shimmer, .trace,
   p.sub, .input, .btn--gradient, .verify-row). The headline and the
   badge are larger and smaller than the app's, on Jed's call (2026-09-14).
   The hidden starting states apply only under html.ea-motion,
   which the page's own script sets, so no JS means no hidden card.
   This replaces .ea-hero/.ea-card/.stage-in on this page.
   ============================================================ */
.ea-room{position:relative;min-height:100vh;display:grid;place-items:center;padding:26px;overflow:hidden;background:#fff;
  --ea-ring:22px;
  /* the app's tokens, scoped here; the site's --surface and --line are lilac */
  --surface:#F5F5F6;--surface-2:#EFEFEF;--line:#E7E7EA;--grey:#6D6D6D;--muted:#9a9aa2}
.ea-room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.ea-room-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(10,8,20,.10) 0,rgba(10,8,20,.22) 100%)}
.ea-stage{position:relative;z-index:5;width:100%;display:grid;place-items:center}
.ea-glass{position:relative;box-sizing:border-box;width:min(760px,92vw);padding:var(--ea-ring);border-radius:34px;
  background:rgba(255,255,255,.30);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ea-panel{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#fff;color:var(--ink)}
.ea-shimmer{position:absolute;inset:0;z-index:60;pointer-events:none;border-radius:18px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)}
.ea-trace{position:absolute;left:var(--ea-ring);top:var(--ea-ring);right:var(--ea-ring);bottom:var(--ea-ring);z-index:70;
  pointer-events:none;overflow:visible;opacity:0;transition:opacity .45s ease}
.ea-trace rect{fill:none;stroke-linejoin:round}
.ea-trace .tline{stroke:rgba(255,255,255,.92);stroke-width:2;stroke-dasharray:100 100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
.ea-trace .thead{stroke:#fff;stroke-width:3.2;stroke-dasharray:5 95;stroke-dashoffset:100;
  filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 20px rgba(255,255,255,.85))}
.ea-trace.go{opacity:1}
.ea-trace.go .tline{animation:eaDraw .6s cubic-bezier(.42,0,.18,1) both}
.ea-trace.go .thead{animation:eaDraw .6s cubic-bezier(.42,0,.18,1) both,eaHeadOut .6s linear both}
.ea-room.lit .ea-trace{opacity:0}
@keyframes eaDraw{to{stroke-dashoffset:0}}
@keyframes eaHeadOut{0%,86%{opacity:1}100%{opacity:0}}
@keyframes eaShim{to{transform:translateX(120%)}}

/* the entrance, only when the page script is running */
html.ea-motion .ea-room-bg{transform:scale(1.04);opacity:0;transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.2,.9,.25,1)}
html.ea-motion .ea-room.up .ea-room-bg{opacity:1;transform:scale(1)}
html.ea-motion .ea-glass{opacity:0;transform:translateY(150px) scale(.965);
  transition:opacity .85s ease 2.1s,transform 1.15s cubic-bezier(.16,1,.3,1) 2.1s}
html.ea-motion .ea-room.up .ea-glass{opacity:1;transform:none}
html.ea-motion .ea-panel{opacity:0;transition:opacity .55s ease,height .5s cubic-bezier(.2,.9,.25,1)}
html.ea-motion .ea-room.lit .ea-panel{opacity:1}
html.ea-motion .ea-room.lit .ea-shimmer{animation:eaShim 1.1s ease .15s 1 both}
html.ea-motion .ea-room .ea-back{opacity:0;transition:opacity .8s ease,background .2s}
html.ea-motion .ea-room.up .ea-back{opacity:1}

/* the content: the app's p.sub type, a big headline, a small badge, and room between each */
.ea-screen{padding:48px 36px 44px;text-align:center}
.ea-orb{display:block;width:56px;height:auto;margin:0 auto 22px}
.ea-badge-row{margin:0 0 22px}
.ea-badge-row .glass-badge{font-size:11.5px;gap:7px;padding:6px 12px;box-shadow:0 6px 16px rgba(10,6,30,.16),inset 0 1px 0 rgba(255,255,255,.5)}
.ea-badge-row .glass-badge .dot{width:6px;height:6px}
.ea-screen h1{font-size:clamp(38px,5.2vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--ink);margin:0}
.ea-sub{font-size:14px;color:var(--grey);line-height:1.5;max-width:520px;margin:18px auto 0}
.ea-capture{max-width:520px;margin:32px auto 0}
/* the app's .verify-row: an .input and a button side by side, stretched to one height */
.ea-form{display:flex;gap:9px;align-items:stretch}
.ea-input{flex:1;min-width:0;height:48px;border:1.6px solid var(--line);border-radius:14px;padding:0 16px;
  font-family:inherit;font-size:15px;color:var(--ink);background:#fafafa;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.ea-input::placeholder{color:var(--muted)}
.ea-input:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px var(--violet-tint)}
/* the app's .btn .btn--gradient .btn--md */
.ea-btn{flex:0 0 auto;font-family:inherit;font-weight:700;border:none;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:-.01em;
  padding:0 26px;font-size:15px;background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(150,64,200,.30);
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease}
.ea-btn:hover{box-shadow:0 14px 32px rgba(150,64,200,.40);transform:translateY(-1px)}
.ea-btn:active{transform:translateY(1px) scale(.99)}
.ea-btn .arrow{transition:transform .2s ease}
.ea-btn:hover .arrow{transform:translateX(3px)}
/* the application flow (2026-09-14, Jed): email, name, business, platforms, thanks.
   Screens stack and cross-fade inside the panel the way the app's .screen does;
   without JS only the first screen shows. */
html.ea-motion .ea-screen{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
  transition:opacity .34s ease,transform .44s cubic-bezier(.2,.9,.25,1),visibility 0s linear .44s}
html.ea-motion .ea-screen.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
html:not(.ea-motion) .ea-screen:not([data-step="1"]){display:none}
.ea-screen h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:0}
.ea-screen[data-step="5"] h2{font-size:clamp(30px,4vw,40px);letter-spacing:-.03em}
.ea-screen[data-step="5"] .ea-sub b{color:var(--ink)}
.ea-home{margin:22px 0 0;font-size:14px;line-height:1.5}
.ea-home a{color:var(--violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ea-home a:hover{color:var(--magenta)}
.ea-btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.ea-btn-full{width:100%;height:56px;font-size:16.5px;margin-top:8px}
/* the app's .backbtn and .steps */
.ea-backbtn{position:absolute;top:16px;left:16px;z-index:8;width:34px;height:34px;border-radius:50%;border:none;background:var(--surface);
  color:var(--grey);cursor:pointer;display:grid;place-items:center;transition:.15s}
.ea-backbtn:hover{background:var(--surface-2);color:var(--ink)}
.ea-backbtn svg{width:15px;height:15px}
.ea-steps{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px 0 18px}
.ea-steps i{width:22px;height:4px;border-radius:2px;background:var(--line);transition:.3s}
.ea-steps i.on{background:var(--violet);width:30px}
.ea-steps i.done{background:var(--violet);opacity:.45}
/* the app's .field and .row2 */
.ea-fields{max-width:440px;margin:24px auto 0;text-align:left}
.ea-fields-wide{max-width:560px;margin-top:20px}
.ea-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.ea-field[hidden]{display:none}
.ea-field label{font-size:12.5px;font-weight:700;color:var(--ink)}
.ea-field .ea-input{flex:0 0 auto}
.ea-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* the platform list: the app's .opt rows, with a tick for choose-all-that-apply */
.ea-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ea-opt{position:relative;display:flex;align-items:center;gap:11px;padding:11px 14px;border:1.6px solid var(--line);border-radius:14px;
  cursor:pointer;background:#fafafa;transition:.18s;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.ea-opt:hover{border-color:#d6d2e6;background:#fff}
.ea-opt.sel{border-color:var(--violet);background:var(--violet-tint)}
.ea-opt input{position:absolute;opacity:0;pointer-events:none}
.ea-mark{width:20px;height:20px;border:2.5px solid #d2d2d8;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.ea-mark::after{content:"";width:8px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:.15s}
.ea-opt input:checked + .ea-mark{background:var(--violet);border-color:var(--violet)}
.ea-opt input:checked + .ea-mark::after{opacity:1}
.ea-opt input:focus-visible + .ea-mark{box-shadow:0 0 0 4px var(--violet-tint)}
.ea-other{margin:12px 0 0}
.ea-opt-none{margin-top:12px}
/* round two of the form (2026-09-15): the mobile hint, the challenges box, the contact tick */
.ea-hint{font-size:12.5px;color:var(--grey);line-height:1.5;margin:-4px 0 10px}
.ea-textarea-wrap{position:relative}
.ea-textarea{display:block;width:100%;min-height:160px;resize:vertical;border:1.6px solid var(--line);border-radius:16px;padding:14px 16px 30px;
  font-family:inherit;font-size:15px;line-height:1.55;color:var(--ink);background:#fafafa;box-sizing:border-box;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.ea-textarea::placeholder{color:var(--muted)}
.ea-textarea:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px var(--violet-tint)}
.ea-count{position:absolute;right:14px;bottom:10px;font-size:11.5px;font-weight:600;color:var(--muted);pointer-events:none}
.ea-consent{margin-top:14px;align-items:flex-start;font-weight:600;font-size:13.5px;line-height:1.45;padding:14px 16px}
.ea-consent .ea-mark{margin-top:0}
/* the honeypot: never shown to a person, a bot that fills it gets a quiet success */
.ea-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ea-err{margin-top:12px;padding:10px 14px;background:#fdf0ef;border:1px solid #f3d2ce;border-radius:12px;color:#c0392b;font-size:12.5px;font-weight:600;line-height:1.45;text-align:center}
.ea-err[hidden]{display:none}
@media(max-width:560px){
  .ea-room{--ea-ring:12px;padding:76px 14px 26px}
  .ea-row2{grid-template-columns:1fr}
  .ea-opts{gap:6px}
  .ea-opt{padding:10px 10px;gap:8px;font-size:12.5px}
  .ea-mark{width:18px;height:18px}
  .ea-screen h2{font-size:23px}
  .ea-glass{width:100%;border-radius:26px}
  .ea-screen{padding:36px 20px 32px}
  .ea-form{flex-direction:column}
  .ea-input,.ea-btn{flex:0 0 auto;height:48px}
}
@media(prefers-reduced-motion:reduce){
  html.ea-motion .ea-room-bg,html.ea-motion .ea-glass,html.ea-motion .ea-panel,html.ea-motion .ea-room .ea-back{transition:none!important;opacity:1!important;transform:none!important}
  .ea-shimmer,.ea-trace{display:none}
}

/* ============================================================
   Inner pages in the home page's design language (added 2026-09-15)
   Jed asked for the home page's look on Who it's for, then How it
   works: the hero's big tight headline with a gradient phrase and
   the beta pill, section titles at the site's shared size, a room
   band with one gentle parallax, and the closing .fullband.
   Everything here is prefixed pg- and used by
   content/pages/who-its-for.md and content/pages/how-it-works.md.
   .pg-ph blocks are photo placeholders until real photos exist.
   ============================================================ */
.pg-hero{padding:clamp(72px,12vh,132px) 0 clamp(64px,10vh,110px);
  background:radial-gradient(1000px 560px at 50% -10%,#efe9ff 0,rgba(239,233,255,0) 62%),#fff}
.pg-hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.05;font-weight:700;letter-spacing:-.035em;color:var(--ink);
  margin:22px auto 0;max-width:15ch;text-wrap:balance}
.pg-sub{margin:clamp(18px,2.6vh,28px) auto 0;max-width:52ch;font-size:clamp(16px,1.45vw,19px);line-height:1.55;font-weight:500;color:var(--ink-2)}
.pg-hero .cta-pill{margin-top:clamp(26px,3.8vh,40px)}
.pg-hero h1{max-width:20ch}

.pg-sec{padding:clamp(72px,10vw,112px) 0}
.pg-sec .sec-head p{max-width:56ch;margin-left:auto;margin-right:auto}
.pg-sec .sec-head.left p{margin-left:0}

/* the highlights carousel on Who it's for (2026-09-15, after apple.com/iphone-duo) */
.pg-hl{padding:clamp(72px,10vw,120px) 0 clamp(56px,8vw,96px);background:var(--surface);overflow:hidden}
.pg-hl-head{max-width:820px}
.pg-hl-head h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:12px;text-wrap:balance}
.pg-hl-head p{font-size:clamp(16px,1.6vw,19px);color:var(--grey);font-weight:500;line-height:1.6;margin-top:18px;max-width:58ch}
.pg-hl-track{--edge:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));
  display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:clamp(36px,5vw,56px) var(--edge) 6px;scroll-padding-inline:var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pg-hl-track::-webkit-scrollbar{display:none}
.pg-hl-track:focus-visible{outline:none}
.pg-hl-track:focus-visible .pg-hl-slide{box-shadow:0 0 0 3px var(--violet-tint)}
.pg-hl-slide{flex:0 0 min(calc(var(--wrap) - var(--pad) * 2),calc(100vw - var(--pad) * 2 - 48px));scroll-snap-align:start;
  position:relative;background:#e9e4f2;border-radius:32px;overflow:hidden;height:clamp(520px,calc(100vh - 230px),680px)}
/* round two (Jed, 2026-09-15): the photo fills the slide and the words sit on a frosted white band along the bottom */
.pg-hl-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:left;padding:clamp(26px,3.4vw,40px) clamp(24px,4.4vw,60px) clamp(28px,3.6vw,44px);
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);border-top:1px solid rgba(255,255,255,.6)}
.pg-kicker{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--violet);margin-bottom:10px}
.pg-hl-copy .pg-kicker{margin-bottom:12px}
.pg-hl-copy h3{font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.pg-hl-copy p{font-size:clamp(15.5px,1.5vw,18px);color:#3f3a4a;font-weight:500;line-height:1.6;margin:12px 0 0;max-width:62ch}
.pg-hl-media{position:absolute;inset:0;z-index:1;overflow:hidden}
.pg-hl-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pg-hl-controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:clamp(24px,3vw,32px)}
.pg-hl-dots{display:flex;align-items:center;height:56px;padding:0 18px;border-radius:999px;background:rgba(214,208,232,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-hl-dot{border:0;background:none;padding:12px 5px;cursor:pointer;display:grid;place-items:center}
.pg-hl-dot i{display:block;width:9px;height:9px;border-radius:999px;background-color:rgba(40,28,70,.40);
  background-image:linear-gradient(90deg,#6940DD,#D65499);background-repeat:no-repeat;background-size:0% 100%;
  transition:width .5s cubic-bezier(.3,.8,.3,1),background-color .3s}
.pg-hl-dot:hover i{background-color:rgba(40,28,70,.6)}
.pg-hl-dot.on i{width:56px;background-color:rgba(40,28,70,.16);animation:pgHlFill 6s linear forwards;animation-play-state:paused}
.pg-hl.is-playing .pg-hl-dot.on i{animation-play-state:running}
.pg-hl.is-paused .pg-hl-dot.on i{background-size:100% 100%;animation:none}
@keyframes pgHlFill{from{background-size:0% 100%}to{background-size:100% 100%}}
.pg-hl-play{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(214,208,232,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s}
.pg-hl-play:hover{background:rgba(200,190,225,.8)}
.pg-hl-play svg{width:22px;height:22px;fill:#1d1633}
.pg-hl-play .pg-i-play{display:none;margin-left:3px}
.pg-hl.is-paused .pg-hl-play .pg-i-play{display:block}
.pg-hl.is-paused .pg-hl-play .pg-i-pause{display:none}
@media (prefers-reduced-motion:reduce){.pg-hl-dot.on i{animation:none;background-size:100% 100%}.pg-hl-dot i{transition:none}}

/* a photo placeholder: the brand tint, a label, and a line saying what belongs here */
.pg-ph{position:relative;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 20px;
  background:linear-gradient(135deg,#efe9ff 0%,#f7eef6 55%,#fbe9f1 100%);border-bottom:1px solid var(--line)}
.pg-ph::before{content:"";position:absolute;left:50%;top:42%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;
  border:3px solid rgba(105,64,221,.28);box-shadow:0 0 0 12px rgba(214,84,153,.08)}
.pg-ph-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);
  background:rgba(255,255,255,.8);padding:4px 9px;border-radius:999px}
.pg-ph-note{font-size:12.5px;line-height:1.45;font-weight:600;color:#5b4f73}

/* the room band, with its one parallax: the photo drifts slower than the page */
.pg-room{position:relative;overflow:hidden;isolation:isolate;color:#fff;min-height:78vh;display:flex;align-items:center;padding:clamp(64px,10vw,120px) 0}
.pg-room-img{position:absolute;inset:-12% 0;z-index:-2}
.pg-room-img img{width:100%;height:100%;object-fit:cover;display:block}
.pg-room::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(0,0,0,.40),rgba(0,0,0,0) 100%)}
.pg-room .in{max-width:860px;margin:0 auto;padding:0 var(--pad);text-align:center}
.pg-room .eyebrow{color:#e7d9ff}
.pg-room h2{color:#fff;font-size:clamp(30px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;margin-top:12px}
.pg-room p{color:rgba(255,255,255,.92);font-size:clamp(16px,1.9vw,20px);font-weight:500;margin:18px auto 0;line-height:1.6;max-width:54ch}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .pg-room-img{animation:pgDrift linear both;animation-timeline:view();animation-range:cover}
    @keyframes pgDrift{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
  }
}

/* the shift: copy and the from/to rows beside the data room */
.pg-shift{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,64px);align-items:center}
.pg-shift h2{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:12px}
.pg-shift-copy > p{font-size:clamp(15px,1.5vw,17.5px);color:var(--grey);font-weight:500;line-height:1.65;margin-top:16px}
.pg-shift-media .media{aspect-ratio:4/3}
.pg-fromto{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.pg-ft{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr);align-items:center;gap:14px;padding:14px 18px;
  background:#fff;border:1px solid var(--line);border-radius:16px}
.pg-from{font-size:14px;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(154,154,162,.6)}
.pg-arrow{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet-tint);color:var(--violet);font-weight:800;font-size:15px}
.pg-to{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* the shift's dashboard (2026-09-15): the approved Live dashboard (prototypes/_design-preview/
   dashboard-states.html, state 7) laid back in 3D the way the home page's call panel arrives,
   bigger than its column and running off toward the right edge */
.pg-sec:has(.pg-dash-stage){overflow-x:clip}
.pg-dash-stage{position:relative;perspective:1700px;perspective-origin:30% 40%;min-height:clamp(380px,40vw,560px)}
.pg-dash{position:absolute;left:-4%;top:50%;width:175%;border-radius:22px;overflow:hidden;background:#fff;
  transform-origin:20% 50%;
  transform:translateY(-50%) rotateX(34deg) rotateY(-26deg) rotateZ(12deg);
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset,-40px 70px 120px rgba(40,20,80,.28),-10px 18px 40px rgba(40,20,80,.14);
  border:1px solid rgba(40,20,80,.08)}
.pg-dash img{display:block;width:100%;height:auto}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .pg-dash{animation:pgDashLand linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    @keyframes pgDashLand{from{transform:translateY(-44%) rotateX(52deg) rotateY(-30deg) rotateZ(16deg)}to{transform:translateY(-50%) rotateX(34deg) rotateY(-26deg) rotateZ(12deg)}}
  }
}

/* Support every week (2026-09-15): Jed's corahelp photo full bleed, the content on a frosted panel to the right */
.pg-help{position:relative;overflow:hidden;isolation:isolate;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px);min-height:clamp(620px,56vw,860px);display:flex;align-items:flex-end}
.pg-help-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;z-index:-1;transform:scale(1.16);transform-origin:100% 50%}
.pg-help .wrap{width:100%;display:flex;justify-content:flex-end}
.pg-help-panel{width:min(520px,100%);padding:clamp(28px,3vw,40px);border-radius:32px;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 70px rgba(30,20,60,.18)}
.pg-help-panel h2{font-size:clamp(26px,2.8vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:10px;text-wrap:balance}
.pg-help-panel > p{font-size:15.5px;color:#3f3a4a;font-weight:500;line-height:1.6;margin-top:12px}
.pg-help-steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.pg-help-steps li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.pg-help-steps .num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:15px}
.pg-help-steps h3{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin:2px 0 3px}
.pg-help-steps p{font-size:14px;line-height:1.55;color:#4a4556;font-weight:500}
.pg-help .pg-help-more{text-align:left;margin-top:22px}

/* how it works with you */
.pg-more{text-align:center;margin-top:34px;font-size:15.5px;font-weight:700}
.pg-more a{color:var(--violet);text-decoration:none}
.pg-more a:hover{color:var(--magenta)}
.pg-more a span{display:inline-block;transition:transform .2s ease}
.pg-more a:hover span{transform:translateX(3px)}

/* the honest fit */
.pg-fit{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;max-width:980px;margin:0 auto}
.pg-fit-card{border-radius:var(--r-lg);padding:32px 32px 30px;border:1px solid var(--line);background:#fff}
.pg-yes{background:linear-gradient(160deg,#f5f0ff 0%,#fff 70%);border-color:#e2d8fb}
.pg-fit-card h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}
.pg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pg-list li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.5;font-weight:500;color:var(--ink-2)}
.pg-list li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%}
.pg-yes .pg-list li::before{background:var(--grad) center/100% no-repeat}
.pg-yes .pg-list li::after{content:"";position:absolute;left:7px;top:5px;width:8px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}
.pg-no .pg-list li::before{background:#f1f1f3;border:1px solid #e4e4e8}
.pg-no .pg-list li::after{content:"";position:absolute;left:6px;top:10px;width:10px;height:2px;background:#a3a3ab;border-radius:2px}
.pg-fit-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--grey);font-weight:500}

.pg-hero + .pg-sec{padding-top:clamp(24px,4vw,56px)}
.pg-sec .sec-head h2,.pg-shift h2{text-wrap:balance}
.pg-room::after{background:linear-gradient(rgba(10,8,20,.10),rgba(10,8,20,.18)),radial-gradient(ellipse 62% 60% at 50% 50%,rgba(0,0,0,.50),rgba(0,0,0,0) 100%)}
.pg-room h2,.pg-room p,.pg-close h2,.pg-close p{text-shadow:0 2px 18px rgba(0,0,0,.28)}
.pg-close>img{object-position:30% 50%}
.pg-close::after{background:linear-gradient(rgba(10,8,20,.12),rgba(10,8,20,.22)),radial-gradient(ellipse 60% 58% at 50% 52%,rgba(0,0,0,.52),rgba(0,0,0,0) 100%)}
/* How it works (2026-09-15): the video placeholder under the hero */
.pg-video{position:relative;max-width:1040px;margin:clamp(44px,6vw,72px) auto 0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 90px rgba(40,20,80,.20);border:1px solid var(--line);background:#0b0b0f}
.pg-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.88}
.pg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,35,.05) 40%,rgba(20,10,35,.62))}
.pg-video .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.pg-video .pbtn{width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 0 0 12px rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.25)}
.pg-video .pbtn svg{width:34px;height:34px;margin-left:5px;fill:var(--violet)}
.pg-video-tag{position:absolute;left:20px;top:20px;z-index:3;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);background:rgba(255,255,255,.9);padding:5px 10px;border-radius:999px}
.pg-video-label{position:absolute;left:28px;bottom:24px;z-index:3;display:flex;flex-direction:column;gap:2px;color:#fff;text-align:left}
.pg-video-label b{font-size:clamp(17px,1.8vw,22px);font-weight:800;letter-spacing:-.02em}
.pg-video-label span{font-size:14px;font-weight:500;color:rgba(255,255,255,.85)}

/* the three ways she works */
.pg-hero:has(+ .pg-ways-sec){padding-bottom:clamp(20px,3vw,40px)}
.pg-ways-sec{padding-top:clamp(20px,3vw,40px)}
.pg-way-visual{margin:0 0 24px;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#0d0b16;
  border:1px solid var(--line);box-shadow:0 24px 56px rgba(40,20,80,.16)}
.pg-way-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pg-way-visual.is-light{background:#fff}
.pg-way-visual.is-light img{object-position:0 0}
.pg-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.pg-way{text-align:left;padding:8px 4px}
.pg-way-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--grad);
  box-shadow:0 14px 30px rgba(105,64,221,.26);margin-bottom:22px}
.pg-way-icon svg{width:28px;height:28px;stroke:#fff}
.pg-way h3{font-size:clamp(22px,2.2vw,26px);font-weight:800;letter-spacing:-.025em;margin:0 0 10px}
.pg-way p{font-size:15.5px;line-height:1.65;color:var(--grey);font-weight:500}

/* the journey: the heading stays in view while the five steps pass */
.pg-journey{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,88px);align-items:start}
.pg-journey-head{position:sticky;top:calc(var(--nav-h) + 48px)}
.pg-journey-head h2{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:12px;text-wrap:balance}
.pg-journey-head p{font-size:clamp(15px,1.5vw,17.5px);color:var(--grey);font-weight:500;line-height:1.65;margin-top:16px;max-width:40ch}
.pg-link{display:inline-block;margin-top:24px;font-size:15.5px;font-weight:700;color:var(--violet);text-decoration:none}
.pg-link:hover{color:var(--magenta)}
.pg-timeline{list-style:none;margin:0;padding:0;position:relative}
.pg-timeline li:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:-18px;width:2px;background:linear-gradient(#b9a3f0,#e6a9c9);border-radius:2px}
.pg-timeline li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:22px;align-items:start}
.pg-timeline li + li{margin-top:18px}
.pg-node{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:2px solid #e2d8fb;color:var(--violet);font-weight:800;font-size:17px;box-shadow:0 8px 20px rgba(105,64,221,.12)}
.pg-timeline li:last-child .pg-node{background:var(--grad);border-color:transparent;color:#fff}
.pg-step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px}
.pg-step h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.pg-step p{font-size:15px;line-height:1.6;color:var(--grey);font-weight:500}

/* why it's different */
.pg-compare{max-width:1040px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.pg-compare-row{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr;align-items:stretch}
.pg-compare-row > *{padding:20px 24px;font-size:15px;line-height:1.55}
.pg-compare-row + .pg-compare-row{border-top:1px solid var(--line)}
.pg-compare-row b{font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pg-compare-row span{color:var(--grey);font-weight:500}
.pg-compare-row .pg-cv{color:var(--ink);font-weight:700;background:linear-gradient(90deg,#f5f0ff,#fcf1f7)}
.pg-compare-top > *{padding-top:14px;padding-bottom:14px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-compare-top .pg-cv{color:var(--violet)}
.pg-close>img{object-position:50% 50%}

/* FAQ (2026-09-15): a shorter hero with search, topics on the left, grouped questions */
.pg-hero-short{padding-bottom:clamp(40px,6vh,64px)}
.pg-search{position:relative;max-width:560px;margin:clamp(26px,3.8vh,40px) auto 0}
.pg-search svg{position:absolute;left:20px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.pg-search input{width:100%;height:58px;border-radius:999px;border:1.5px solid #d8d4e2;background:#fff;padding:0 24px 0 52px;
  font-family:inherit;font-size:16px;color:var(--ink);box-shadow:0 14px 34px rgba(11,11,15,.08);transition:border-color .18s,box-shadow .18s}
.pg-search input::placeholder{color:var(--muted)}
.pg-search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-tint),0 14px 34px rgba(11,11,15,.08)}
.pg-faq-sec{padding-top:clamp(24px,4vw,48px)}
.pg-faq{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,5vw,72px);align-items:start;max-width:1080px;margin:0 auto}
.pg-faq-side{position:sticky;top:calc(var(--nav-h) + 40px)}
.pg-faq-nav{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.pg-faq-nav a{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:600;
  color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}
.pg-faq-nav a:hover{background:var(--violet-tint);color:var(--violet)}
.pg-faq-nav a span{font-size:12px;font-weight:700;color:var(--muted);background:#f1eff6;border-radius:999px;padding:2px 8px}
.pg-faq-group{scroll-margin-top:calc(var(--nav-h) + 32px)}
.pg-faq-group + .pg-faq-group{margin-top:48px}
.pg-faq-title{font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
.pg-faq-item{border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .2s,box-shadow .2s}
.pg-faq-item + .pg-faq-item{margin-top:10px}
.pg-faq-item[open]{border-color:#dcd0f6;box-shadow:0 18px 40px rgba(40,20,80,.08)}
.pg-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px 20px 24px;
  font-size:clamp(16px,1.5vw,17.5px);font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.35}
.pg-faq-item summary::-webkit-details-marker{display:none}
.pg-faq-item summary:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:18px}
.pg-faq-toggle{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--violet-tint);transition:background .2s,transform .25s}
.pg-faq-toggle::before,.pg-faq-toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--violet);transform:translate(-50%,-50%)}
.pg-faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}
.pg-faq-item[open] .pg-faq-toggle{background:var(--grad)}
.pg-faq-item[open] .pg-faq-toggle::before,.pg-faq-item[open] .pg-faq-toggle::after{background:#fff}
.pg-faq-item[open] .pg-faq-toggle::after{transform:translate(-50%,-50%) rotate(0deg)}
.pg-faq-a{padding:0 64px 22px 24px}
.pg-faq-a p{font-size:15.5px;line-height:1.7;color:var(--grey);font-weight:500}
.pg-faq-none{padding:24px;border:1px dashed #d8d4e2;border-radius:18px;text-align:center;color:var(--grey);font-weight:500}
.pg-faq-group[hidden],.pg-faq-item[hidden],.pg-faq-none[hidden]{display:none}

/* Resources (2026-09-16): channel guide cards and the grouped topic directory */
.pg-hero-actions{margin-top:clamp(24px,3.6vh,36px);display:flex;justify-content:center}
.pg-guides-sec{padding-top:clamp(24px,4vw,48px)}
.pg-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pg-guide{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 28px 26px;border-radius:24px;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.pg-guide:hover{transform:translateY(-4px);border-color:#dcd0f6;box-shadow:0 26px 60px rgba(40,20,80,.12)}
.pg-guide-logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(40,20,80,.08);margin-bottom:8px;overflow:hidden}
.pg-guide-logo img{width:34px;height:34px;object-fit:contain}
.pg-guide-logo.is-icon{background:var(--grad);border:0;box-shadow:0 12px 26px rgba(105,64,221,.24)}
.pg-guide-logo.is-icon svg{width:26px;height:26px;stroke:#fff}
.pg-guide h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.pg-guide p{font-size:15px;line-height:1.6;color:var(--grey);font-weight:500;flex:1}
.pg-guide-go{margin-top:8px;font-size:15px;font-weight:700;color:var(--violet)}
.pg-guide-go span{display:inline-block;transition:transform .2s ease}
a.pg-guide:hover .pg-guide-go span{transform:translateX(3px)}
.pg-guide.is-soon{background:transparent;border-style:dashed}
.pg-guide.is-soon .pg-guide-logo.is-icon{background:#e9e5f2;box-shadow:none}
.pg-guide.is-soon .pg-guide-logo.is-icon svg{stroke:#8a82a3}
.pg-guide.is-soon h3{color:var(--ink-2)}
.pg-guide-soon{align-self:flex-start;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:#f1eff6;border-radius:999px;padding:5px 11px}
.pg-topics{columns:3 300px;column-gap:18px}
.pg-topic{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 14px;break-inside:avoid;margin-bottom:18px}
.pg-topic-head span.is-soon{color:var(--muted);background:#f1eff6}
.pg-topic-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pg-topic-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.pg-topic-head span{font-size:12px;font-weight:700;color:var(--violet);background:var(--violet-tint);border-radius:999px;padding:3px 9px;white-space:nowrap}
.pg-topic ul{list-style:none;margin:6px 0 0;padding:0}
.pg-topic li a,.pg-topic li.is-soon{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px;font-size:15px;font-weight:600;border-radius:10px}
.pg-topic li a{color:var(--ink);text-decoration:none;transition:color .15s,background .15s}
.pg-topic li a span{color:var(--violet);transition:transform .2s}
.pg-topic li a:hover{color:var(--violet);background:#faf8fe}
.pg-topic li a:hover span{transform:translateX(3px)}
.pg-topic li + li{border-top:1px solid #f3f1f7}
.pg-topic li.is-soon{color:var(--muted);font-weight:500}
.pg-topic li.is-soon small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b3aec0;white-space:nowrap}
.pg-close:not(:has(.pg-close-keep))>img{object-position:50% 50%}

/* About (2026-09-17): the big What CoraVision is statement */
.pg-statement-sec{padding-top:clamp(24px,4vw,56px)}
.pg-statement{max-width:960px;margin:0 auto;text-align:center}
.pg-statement p{font-size:clamp(24px,3.2vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.25;color:var(--ink);margin-top:18px;text-wrap:balance}
.pg-statement .pg-statement-sub{font-size:clamp(16px,1.6vw,19px);font-weight:500;letter-spacing:0;line-height:1.6;color:var(--grey);max-width:60ch;margin:22px auto 0}
.pg-beliefs .pg-way p{max-width:34ch}

/* Take a closer look on How it works (2026-09-16, after apple.com/au/iphone-duo): a list of
   features on the left, one open at a time as a short text block, its screen on the right */
.pg-look{padding:clamp(40px,5vh,64px) 0 clamp(64px,8vw,96px);background:var(--surface)}
.pg-look .wrap{max-width:1440px}
.pg-look-title{font-size:clamp(28px,3.8vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0 0 clamp(16px,2.4vh,26px)}
/* round two (Jed, 2026-09-16): the title and the whole card fit one screen, the list sits hard left,
   and the screen gets most of the width, about the height of Who it's for's slides */
.pg-look-card{display:grid;grid-template-columns:minmax(300px,340px) 1fr;gap:clamp(28px,3.4vw,52px);align-items:center;
  background:#fff;border-radius:34px;padding:clamp(24px,3vh,36px) clamp(28px,3.4vw,52px) clamp(24px,3vh,36px) clamp(18px,1.8vw,28px);
  height:clamp(540px,calc(100vh - var(--nav-h) - 150px),720px)}
.pg-look-nav{position:relative;padding-left:58px}
.pg-look-arrows{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:12px;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.pg-look-arrow{width:44px;height:44px;border-radius:50%;border:0;background:#f0eef5;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.pg-look-arrow:hover{background:#e4e0ee}
.pg-look-arrow svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pg-look-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pg-look-item{position:relative}
.pg-look-btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 12px;border:0;border-radius:999px;background:#f0eef5;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);cursor:pointer;transition:background .2s}
.pg-look-btn:hover{background:#e4e0ee}
.pg-look-ico{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);flex:0 0 auto}
.pg-look-ico::before,.pg-look-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%)}
.pg-look-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.pg-look-text{display:none;margin:0;max-width:40ch;padding:22px 26px;border-radius:26px;background:#f0eef5;font-size:16.5px;line-height:1.55;color:var(--ink-2);font-weight:500}
.pg-look-text b{color:var(--ink);font-weight:800}
.pg-look-item.is-on .pg-look-btn{display:none}
.pg-look-item.is-on .pg-look-text{display:block;animation:pgLookIn .35s ease both}
@keyframes pgLookIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.pg-look-media{position:relative;align-self:stretch;min-height:0}
.pg-look-shot{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transform:scale(.985);transition:opacity .5s ease,transform .6s ease;pointer-events:none}
.pg-look-shot.is-on{opacity:1;transform:none}
.pg-look-shot img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:22px;box-shadow:0 30px 70px rgba(40,20,80,.16);border:1px solid var(--line)}
.pg-look-ph{width:100%;aspect-ratio:16/10;border-radius:22px}
/* round three (2026-09-16): live pill scene, the flat call, and crossfading frame sequences */
/* the Pill demo's page cursor is styled fixed by scene-outlook.css, which How it works only loads on a click;
   the live pill loads cora-scene.css first, which would leave it absolute and push the page sideways on a phone */
.cs-cursor.page-cursor{position:fixed}
.pg-look-media{min-width:0}
.pg-live{position:relative;width:100%;max-height:100%;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(40,20,80,.16);border:1px solid var(--line);background:#fff}
.pg-live-pill{aspect-ratio:1200/760;opacity:0;transition:opacity .45s ease}
.pg-live-pill.is-in{opacity:1}
/* pill mode in Take a closer look wears her live orb, as the home page's
   pill does (How it works, 2026-09-29): centred in the 40px hole and
   allowed to overflow it, the scene's turning rings put away */
.pg-live-pill .cs-orbhole{display:flex;align-items:center;justify-content:center}
.pg-live-pill .cs-orbhole>*{flex:0 0 auto}
.pg-live-pill.has-orb .cs-oscale{display:none}
.pg-live-call{background:#0d0b16;border:0;box-shadow:none;overflow:visible}
.pg-live-poster{display:block;width:100%;height:auto;border-radius:22px}
.pg-live-call.is-mounted .pg-live-poster{display:none}
.pg-live-call .cw3d-stage,.pg-live-call .cw3d-spin{transform:none!important}
.pg-live-call .cw3d-float{animation:none!important;max-width:none}
.pg-seq{position:relative;width:100%;height:100%}
.pg-seq-frame{position:absolute;inset:0;display:grid;grid-template:100%/100%;place-items:center;opacity:0;transition:opacity .7s ease}
.pg-seq-frame.is-on{opacity:1}
.pg-seq-frame img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:22px;box-shadow:0 30px 70px rgba(40,20,80,.16);border:1px solid var(--line)}
.pg-seq-frame.is-scroll{place-items:start center;overflow:hidden;border-radius:22px;box-shadow:0 30px 70px rgba(40,20,80,.16);border:1px solid var(--line);background:#fff}
.pg-seq-frame.is-scroll img{max-height:none;border:0;box-shadow:none;border-radius:0;width:100%;will-change:transform}
@media (prefers-reduced-motion:reduce){.pg-look-shot,.pg-look-arrows{transition:none}.pg-look-item.is-on .pg-look-text{animation:none}}

@media (max-width:960px){
  .pg-shift,.pg-fit,.pg-journey,.pg-ways,.pg-guides{grid-template-columns:1fr}
  .pg-journey-head{position:static}
  .pg-faq{grid-template-columns:1fr}
  .pg-look-card{grid-template-columns:1fr;min-height:0;height:auto;padding:24px}
  .pg-look-media{order:-1;min-height:0;aspect-ratio:16/10}
  .pg-look-nav{padding-left:0}
  .pg-look-arrows{display:none}
  .pg-look-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .pg-look-item.is-on{flex-basis:100%;order:-1}
  .pg-look-btn{height:44px;font-size:15px;padding:0 16px 0 8px}
  .pg-look-ico{width:24px;height:24px}
  .pg-faq-side{position:static}
  .pg-faq-nav{flex-direction:row;flex-wrap:wrap;gap:8px}
  .pg-faq-nav a{gap:8px;padding:8px 12px;background:#f5f2fb;font-size:14px}
  .pg-shift-media{order:-1}
  .pg-dash-stage{min-height:clamp(260px,62vw,440px)}
  .pg-dash{left:2%;width:120%}
}
@media (max-width:560px){
  .pg-help{display:block;padding:0 0 28px;min-height:0}
  .pg-help-bg{position:relative;height:auto;aspect-ratio:16/10;object-position:50% 50%;transform:none}
  .pg-help .wrap{margin-top:-60px}
  .pg-hl-slide{flex-basis:calc(100vw - 72px);height:clamp(460px,125vw,560px);border-radius:26px}
  .pg-hl-copy{padding:22px 20px 24px}
  .pg-hl-media img{object-position:62% 30%}
  .pg-ft{grid-template-columns:1fr;gap:6px;text-align:left}
  .pg-arrow{transform:rotate(90deg)}
  .pg-fit-card{padding:26px 22px}
  .pg-room{min-height:64vh}
  .pg-compare-row{grid-template-columns:1fr}
  .pg-compare-top{display:none}
  .pg-compare-row > *{padding:6px 20px}
  .pg-compare-row b{padding-top:18px}
  .pg-compare-row .pg-cv{margin:6px 0 0;padding:12px 20px 16px}
  .pg-video-label{left:18px;bottom:16px}
  .pg-video .pbtn{width:66px;height:66px}
  .pg-faq-a{padding:0 20px 20px}
  .pg-faq-item summary{padding:18px 16px 18px 20px}
}

/* Unmute over the pill (Jed, 2026-09-15): the hero's button, sat on the pill's
   middle, gone the moment the demo plays and back when it resets. */
.pill-unmute{position:absolute;left:calc(160px * var(--ps,1));top:calc(30px * var(--ps,1));width:112px;height:112px;margin:-56px 0 0 -56px;z-index:12;
  animation:pillBob 4.8s ease-in-out infinite;transition:opacity .35s ease}
.pill-unmute .hero-unmute-btn{--os:1}
.pill-stage.playing .pill-unmute{opacity:0;pointer-events:none}
@keyframes pillBob{0%,100%{translate:0 5px}50%{translate:0 -5px}}
@media (max-width:640px){.pill-unmute{width:84px;height:84px;margin:-42px 0 0 -42px}.pill-unmute .hero-unmute-btn{font-size:11.5px}.pill-unmute .hero-unmute-btn svg{width:26px;height:26px}}

/* AI safety (Jed, 19 October 2026). The hero fills the first window like the home page's: the padlock
   orb, the title and the line under it, nothing else. The orb is the Design Studio's microphone
   (the app's design-studio/studio.css, .dsm-mic) with a padlock in the brand gradient, showing the
   studio's hover state all the time (Jed, 20 Oct: no hover needed): the spinning light blue ring and a
   light blue pulse in place of the studio's pink. Every loop is opacity or transform on a layer of
   its own, paused off screen (.is-off, main.js) and dropped in lite mode. */
.pg-hero.ais-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 20px) 0 32px;box-sizing:border-box}
.ais-hero .wrap-narrow{width:100%}
.ais-lock{position:relative;width:clamp(108px,10.5vw,144px);aspect-ratio:1;margin:0 auto clamp(26px,4.5vh,44px)}
.ais-lock::before{content:"";position:absolute;inset:-75%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(78,163,255,.22),rgba(105,64,221,.13) 52%,rgba(214,84,153,.05) 78%,rgba(214,84,153,0) 100%)}
.ais-lock-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 30px 8px rgba(78,163,255,.62);animation:aisPulse 1.3s ease-in-out infinite}
.ais-lock-circle{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.62);border:2px solid rgba(255,255,255,.92)}
.ais-lock-circle::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 24px rgba(255,255,255,.35)}
.ais-lock-glyph{position:relative;z-index:1;display:block;width:47%;height:auto;overflow:visible;transform:translateY(-8%)}
/* Open, the shackle stands 4 units proud of the body; shutting, it drops with a slight overshoot (the long
   left leg is clipped at the body's top edge), and the circle gives one small click. */
.ais-lock-shackle{transition:transform .55s cubic-bezier(.5,0,.3,1.4)}
.ais-lock.is-open .ais-lock-shackle{transform:translateY(-4px)}
.ais-lock.is-clicked .ais-lock-circle{animation:aisClick .42s ease-out}
@keyframes aisClick{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.ais-lock-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:conic-gradient(from 0deg,#4ea3ff 0deg,#bfe3ff 60deg,#4ea3ff 120deg,#bfe3ff 180deg,#4ea3ff 240deg,#bfe3ff 300deg,#4ea3ff 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:aisRing 1.6s linear infinite}
@keyframes aisPulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.03)}}
@keyframes aisRing{to{transform:rotate(360deg)}}
.is-off .ais-lock-halo,.is-off .ais-lock-ring{animation-play-state:paused}
html.lite .ais-lock-halo,html.lite .ais-lock-ring{animation:none}
html.lite .ais-lock-halo{opacity:.7}
@media (prefers-reduced-motion:reduce){.ais-lock-halo,.ais-lock-ring{animation:none}}
/* The black page after the hero: the home page's c0 line without the call (one opacity rule per word, the
   same as .sw-copy.c0 .w). The track is 250vh, so the pin holds for 150vh of scroll. */
.ais-say{position:relative;background:#000;height:250vh}
.ais-say-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--nav-h) var(--pad) 0;box-sizing:border-box;overflow:hidden}
/* The hexagon wall (Jed, 20 October 2026), copied from his EzyFit site's .hex-wall: dark tiles
   (images/hex-wall.svg, 1600 by 900) over a light layer that shows through the seams, and a fade at the
   edges. EzyFit moves its two glows by rewriting a full-window gradient each frame; here each glow is its
   own layer with a fixed gradient that the script slides (transform only), so nothing repaints on scroll:
   the purple glow starts 20% down on the left and travels to 80%, the pink one the other way on the right. */
.ais-hex{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#08090c}
/* Softer, and softest in the middle (Jed, 20 Oct): a fixed mask keeps the seams' colour near the window's edges
   and fades it toward the centre, where the words are; nowhere is it brighter than the first version. */
.ais-hex-light{position:absolute;inset:0;animation:aisBreathe 7s ease-in-out infinite alternate;
  -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.4) 45%,#000 100%);mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.4) 45%,#000 100%)}
/* Each glow is centred on its point (translate), and the script's transform slides it from there. */
.ais-glow{position:absolute;width:92%;height:94%;border-radius:50%;translate:-50% -50%;will-change:transform}
.ais-glow.is-l{left:22%;top:20%;background:radial-gradient(closest-side,rgba(122,79,240,.78),rgba(122,79,240,.58) 30%,rgba(105,64,221,0))}
.ais-glow.is-r{left:78%;top:80%;background:radial-gradient(closest-side,rgba(226,86,159,.78),rgba(226,86,159,.58) 30%,rgba(214,84,153,0))}
.ais-hex-tiles{position:absolute;inset:0;background:url('../images/hex-wall.svg') center/cover no-repeat}
.ais-hex::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0005,#0002 55%,#0006),linear-gradient(0deg,#000,transparent 20%,transparent 85%,#000)}
@keyframes aisBreathe{from{opacity:.7}to{opacity:1}}
.is-off .ais-hex-light{animation-play-state:paused}
html.lite .ais-hex-light{animation:none;opacity:.85}
@media (prefers-reduced-motion:reduce){.ais-hex-light{animation:none;opacity:.85}}
.ais-say h2{position:relative;z-index:1;margin:0;max-width:1120px;text-align:center;color:#fff;font-size:clamp(34px,6.2vw,80px);font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
.ais-say .ln{display:block}
.ais-say .ln + .ln{margin-top:.3em}
.ais-say .w{opacity:clamp(0,(var(--cw,99) - var(--i)) / 1.6,1)}
.ais-say .w.g{background-size:var(--gw,100%) 100%;background-position:var(--gx,0px) 0;background-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.ais-say{height:auto}.ais-say-pin{position:relative;height:auto;min-height:100vh}}
/* A flat timeline is a list of equals, so its last node is not the gradient finish (from the 24 Sep safety
   draft; AI safety's constitution rules use it). */
.pg-timeline.is-flat li:last-child .pg-node{background:#fff;border-color:#e2d8fb;color:var(--violet)}