/* ChatNab — sections 00 to 03 */

/* ================= §00 chrome ================= */
.nav {
  position: fixed; inset-inline: 0; top: 18px; z-index: 900;
  display: flex; justify-content: center; pointer-events: none;
}
/* light glass capsule (Matt's reference), over whatever the page is showing.
   Its dark state is not a colour swap: .nav__ink floods out of the logo as a
   circle when you scroll into a night field and drains back the way you came,
   and a lime streak crosses the bar at the moment of the switch. */
.nav__inner {
  pointer-events: auto; position: relative; isolation: isolate;
  width: min(1000px, calc(100% - 40px)); height: 62px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 7px 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFFC2, #FBFAF79E);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid #FFFFFFD9;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1C1A160D, 0 16px 40px -18px #1C1A1640, 0 0 0 1px #1C1A160A;
  transition: border-color .5s var(--ease-flip), box-shadow .5s var(--ease-flip);
}
.nav__ink { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, #2A251DEB, #14120EE6);
  box-shadow: inset 0 1px 0 #FFFFFF14;
  clip-path: circle(0% at var(--ox, 40px) 50%);
  transition: clip-path .8s cubic-bezier(.76, 0, .24, 1); }
.nav--night .nav__ink { clip-path: circle(140% at var(--ox, 40px) 50%); }
.nav__streak { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.nav__streak::before { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: -40%;
  background: linear-gradient(90deg, #D2FA0400, #D2FA0466 50%, #D2FA0400); opacity: 0; }
.nav.is-switching .nav__streak::before { animation: nav-streak .9s cubic-bezier(.76, 0, .24, 1); }
.nav.is-switching.is-back .nav__streak::before { animation-name: nav-streak-back; }
@keyframes nav-streak { 0% { left: -40%; opacity: 1 } 100% { left: 110%; opacity: 0 } }
@keyframes nav-streak-back { 0% { left: 110%; opacity: 1 } 100% { left: -40%; opacity: 0 } }

.nav__mark { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav__mark img { width: 32px; height: 32px; }
.nav__mark b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em;
               color: var(--ink); transition: color .4s .15s; }
.nav__links { display: flex; gap: 4px; position: relative; margin-right: 18px; }
.nav__links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: .98rem;
                color: var(--ink-body); border-radius: 999px; position: relative; z-index: 1;
                transition: color .4s .12s; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); }
/* the section you are in carries a live dot, like the reference */
.nav__links a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright);
  margin-left: -4px; transform: scale(0); width: 0; transition: transform .35s var(--ease-out), width .35s var(--ease-out); }
.nav__links a[aria-current="true"]::before { transform: scale(1); width: 7px; }
/* the active pill SLIDES between items (verteal R4 / FLIP), it never fades */
.nav__pill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px;
  background: #D2FA042E; box-shadow: inset 0 0 0 1px #86F80224; z-index: 0;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), opacity .2s, background-color .4s;
  opacity: 0;
}
.nav .btn { padding: 14px 20px 14px 24px; font-size: .98rem; gap: 10px; }
.nav__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
              stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.nav__cta:hover .nav__arrow { transform: translateX(3px); }

.nav--night .nav__inner { border-color: #FFFFFF1F;
  box-shadow: inset 0 1px 0 #FFFFFF14, 0 16px 40px -18px #000000B3, 0 0 0 1px #00000040; }
.nav--night .nav__mark b { color: var(--ink-night); }
.nav--night .nav__links a { color: #B9B2A5; }
.nav--night .nav__links a:hover, .nav--night .nav__links a[aria-current="true"] { color: var(--ink-night); }
.nav--night .nav__pill { background: #86F8021F; box-shadow: inset 0 0 0 1px #86F80233; }
.nav--night .nav__links a::before { background: var(--accent-mid); }
@media (prefers-reduced-motion: reduce) { .nav__ink { transition: none; } .nav__streak { display: none; } }
@media (max-width: 860px) {
  .nav__links { display: none; }
  /* the CTA has to fit beside the mark at 375px or the whole page scrolls sideways */
  .nav__inner { padding: 0 6px 0 16px; height: 56px; }
  .nav .btn { padding: 10px 14px 10px 16px; font-size: .85rem; }
  .nav__mark b { font-size: .98rem; }
}

/* ================= §01 hero ================= */
.hero { position: relative; padding-top: 168px; padding-bottom: 140px; overflow: clip; }
/* a canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the size has to be stated */
/* The ambient layer for the WHOLE page, not just the hero.
   Below the hero the build had nothing moving at all, so every quiet section
   was measured against the set piece before it and read as dead. A fixed
   substrate of the five scripts is always there, never asks for attention, and
   costs one canvas. */
.page-field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .6s var(--ease-out);
}
/* only main needs lifting above the field — the nav is position:fixed and
   overriding that made it scroll away with the page */
main { position: relative; z-index: 1; }
/* the ribbon sits between the script field and the content, so the chat panel
   passes in front of it exactly as the plan called for */
.hero__ribbon { position: absolute; inset: -6% -4% -14%; z-index: 1; pointer-events: none; }
.hero__ribbon canvas { width: 100%; height: 100%; display: block; }
/* the 3D loop is the back plate; ribbon, trail and copy all sit over it */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; z-index: 0; pointer-events: none;
               object-position: 78% 50%;
               /* the bottom fades out before the next section; the copy's
                  legibility comes from .hero__scrim, not from cropping the plate */
               -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
                       mask-image: linear-gradient(to bottom, #000 78%, transparent); }

/* pixel trail & glyph hover — a layer under the content, over the backdrop */
.trail { position: absolute; inset: 0; z-index: 1; pointer-events: none;
         font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow: hidden; }
.trail canvas { display: block; }
#night, #cta { position: relative; }
#night > .wrap, #cta > .wrap { position: relative; z-index: 2; }

.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero__eyebrow { margin-bottom: 26px; }
.hero__h1 .line { display: block; }
/* montra M01-b: the one rotation on the page */
.hero__obj {
  display: inline-block; vertical-align: -.18em; width: .92em; height: .92em;
  margin-inline: .06em .12em; transform: rotate(-16deg);
}
.hero__sub { margin-top: 26px; }
.hero__cta { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__facts { margin-top: 34px; display: flex; gap: 26px; flex-wrap: wrap;
               font-size: .875rem; color: var(--ink-body); }
.hero__facts b { font-family: var(--font-body); font-weight: 400; color: var(--ink); }

/* the living mark */
.mark-live { width: 64px; height: 64px; }
.mark-live svg { width: 100%; height: 100%; overflow: visible; }
.mark-live .spine { fill: none; stroke: var(--surface-2); stroke-width: 150;
                    stroke-linecap: round; stroke-linejoin: round; }
.mark-live .glow  { fill: none; stroke: var(--accent-light); stroke-width: 150;
                    stroke-linecap: round; }

/* ================= chat panel (hero + §04) ================= */
.panel {
  position: relative; border-radius: var(--r-card);
  background: var(--page); border: 1px solid var(--surface-2);
  box-shadow: 0 30px 80px #1C1A1612; overflow: hidden;
}
.panel__bar { display: flex; align-items: center; gap: 10px;
              padding: 14px 18px; border-bottom: 1px solid var(--surface-2); }
.panel__bar img { width: 26px; height: 26px; border-radius: 50%; }
.panel__bar .who { font-weight: 500; font-size: .95rem; }
.panel__bar .state { margin-left: auto; font-size: .8rem; color: var(--accent); }
.thread { padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 12px;
          min-height: 330px; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: 1rem;
       line-height: 1.35; }
.msg--in  { background: var(--surface); align-self: flex-start; border-bottom-left-radius: 6px; }
.msg--out { background: var(--accent); color: var(--ink-inverse); align-self: flex-end;
            border-bottom-right-radius: 6px; }
.msg .cur { display: inline-block; width: .55ch; background: currentColor;
            animation: cn-caret .53s step-end infinite alternate; }
@keyframes cn-caret { from { opacity: 1 } to { opacity: 0 } }
/* three dots, 0.9s cycle, 0.12s apart — the product's own idiom */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
            animation: cn-typing .9s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .12s }
.typing i:nth-child(3) { animation-delay: .24s }
@keyframes cn-typing { 0%,60%,100% { transform: translateY(0); opacity: .45 }
                       30% { transform: translateY(-4px); opacity: 1 } }

/* daima M01-b: a three-layer progressive blur, masks at 62.5 / 75 / 87.5 */
.panel__fade { position: absolute; inset-inline: 0; bottom: 0; height: 90px;
               pointer-events: none; }
.panel__fade i { position: absolute; inset: 0; }
.panel__fade i:nth-child(1) { backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent 62.5%, #000); mask-image: linear-gradient(transparent 62.5%, #000); }
.panel__fade i:nth-child(2) { backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(transparent 75%, #000); mask-image: linear-gradient(transparent 75%, #000); }
.panel__fade i:nth-child(3) { backdrop-filter: blur(24px);
  -webkit-mask-image: linear-gradient(transparent 87.5%, #000); mask-image: linear-gradient(transparent 87.5%, #000); }

/* ================= §01 hero card: glass over the plate ================= */
.hp-wrap { position: relative; }
.hp {
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFFD9, #FBFAF7B8);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid #FFFFFFB3;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1C1A160F, 0 12px 24px -8px #1C1A1614,
              0 40px 80px -20px #1C1A1626, 0 0 0 1px #1C1A160A;
}
.hp__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
           border-bottom: 1px solid #1C1A160F; }
.hp__avatar { position: relative; flex: none; width: 36px; height: 36px; }
.hp__avatar > img:first-child { width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
                                box-shadow: 0 0 0 2px #FFF, 0 0 0 3px #1C1A1614; }
.hp__channel { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px;
               border-radius: 50%; background: #FFF; padding: 1px; box-shadow: 0 1px 3px #1C1A1626; }
.hp__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hp__id .who { font-weight: 600; font-size: .95rem; color: var(--ink); }
.hp__sub { font-size: .75rem; color: var(--ink-body); }
.hp__state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none;
             padding: 6px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 500;
             color: #1F5A04; background: #D2FA0433; border: 1px solid #86F80259; }
.hp__state i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright);
               box-shadow: 0 0 0 0 #4BA30C80; animation: hp-pulse 1.8s ease-out infinite; }
@keyframes hp-pulse { 70%, 100% { box-shadow: 0 0 0 7px #4BA30C00; } }

.hp__thread { min-height: 360px; padding: 20px 18px 16px; gap: 10px; }
.hp .msg { font-size: .95rem; box-shadow: 0 1px 2px #1C1A160D; }
.hp .msg--in { background: #FFFFFF; border: 1px solid #1C1A160F; color: var(--ink); }
.hp .msg--out { background: linear-gradient(160deg, #3F9409, #2A6E06);
                box-shadow: inset 0 1px 0 #FFFFFF2E, 0 6px 16px -6px #2A6E0680; }
.hp__meta { align-self: flex-end; margin-top: -4px; font-family: var(--font-body);
            font-size: .64rem; color: var(--ink-faint); }
.hp__meta b { font-weight: 400; color: var(--accent); }

/* the product it sends — the answer is a thing, not just words */
.hp__card { align-self: flex-end; display: flex; gap: 12px; align-items: center; width: 78%;
            padding: 8px 12px 8px 8px; border-radius: 16px; border-bottom-right-radius: 6px;
            background: #FFFFFF; border: 1px solid #1C1A1614; box-shadow: 0 8px 20px -10px #1C1A1640; }
.hp__card img { width: 56px; height: 68px; border-radius: 10px; object-fit: cover; flex: none; }
.hp__card .t { font-size: .86rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.hp__card .p { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.hp__card .p b { font-family: var(--font-body); font-weight: 400; font-size: .86rem; color: var(--ink); }
.hp__card .chip { font-size: .66rem; padding: 2px 7px; border-radius: var(--r-pill);
                  background: var(--surface-tint); color: var(--accent); }

.hp__composer { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px;
                padding: 8px 8px 8px 16px; border-radius: 16px; background: #F3F1ECCC;
                border: 1px solid #1C1A160F; }
.hp__input { flex: 1; font-size: .82rem; color: var(--ink-faint); }
.hp__take { font-size: .74rem; font-weight: 500; padding: 7px 12px; border-radius: 10px;
            background: #FFF; color: var(--ink); box-shadow: 0 1px 2px #1C1A161A, 0 0 0 1px #1C1A160F; }

.hp__toast { position: absolute; left: -44px; bottom: -26px; z-index: 3;
             display: flex; gap: 10px; align-items: center; padding: 12px 16px 12px 12px;
             border-radius: 16px; font-size: .8rem; line-height: 1.35; color: var(--ink);
             background: #FFFFFFE6; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
             border: 1px solid #FFFFFF; box-shadow: 0 20px 40px -12px #1C1A1640, 0 0 0 1px #1C1A160A;
             opacity: 0; transform: translateY(12px) scale(.96); }
.hp__toast .mono { font-size: .7rem; color: var(--ink-body); }
.hp__tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
            font-size: .85rem; color: #1C1A16; background: var(--accent-light);
            box-shadow: 0 0 0 4px #D2FA0440; }
@media (max-width: 900px) { .hp__toast { left: 12px; bottom: -22px; } }

/* ================= §02 the 11pm problem (night) ================= */
.night-sec { background: var(--page); }
.night-sec .panel { background: var(--night-surface); border-color: #2A251D; }
.night-sec .msg--in { background: #2A251D; }
.night-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.clock { font-family: var(--font-body); font-size: 1rem; color: var(--ink-body);
         display: flex; gap: .55rem; align-items: baseline; }
.clock b { color: var(--ink); font-weight: 400; font-size: 1.15rem; }
.pile { position: relative; margin-top: 30px; min-height: 300px; }
.pile .msg { position: relative; margin-bottom: 10px; opacity: 0; }
.pile__count { font-family: var(--font-body); font-size: .875rem; color: var(--ink-faint);
               margin-top: 18px; }
/* sleepy Z's — one joke, told once, in data */
.zs { position: absolute; inset: 0; pointer-events: none; }
.zs span { position: absolute; left: 50%; top: 40%; font-family: var(--font-display);
           font-weight: 600; color: var(--ink-faint); animation: cn-floatz 3.2s ease-out forwards; }
@keyframes cn-floatz {
  0%   { opacity: 0;  transform: translate(-50%, .15em) rotate(-8deg) scale(.7) }
  22%  { opacity: .7 }
  100% { opacity: 0;  transform: translate(calc(-50% + var(--dx)), var(--dy))
                                 rotate(var(--rot)) scale(1.12) }
}

/* ================= §03 the flip ================= */
.flip { position: relative; height: 260vh; }     /* the scroll the sequence is scrubbed over */
.flip__stick { position: sticky; top: 0; height: 100vh; overflow: clip;
               display: grid; place-items: center; }
.flip__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.flip__copy { position: relative; z-index: 3; text-align: center; max-width: min(34rem, 88vw);
              color: var(--ink-night); padding: 38px 44px; border-radius: var(--r-card); }
/* the copy crosses a frame that goes from near-black to bright morning, so it
   carries its own scrim rather than trusting any single frame */
.flip__copy::before { content: ""; position: absolute; inset: -14% -8%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, #0000006e, #00000000 72%); }
.flip__copy.is-day { color: var(--ink); }
.flip__copy.is-day::before { background: radial-gradient(60% 60% at 50% 50%, #FBFAF7a6, #FBFAF700 72%); }
.flip__copy .h2 { text-wrap: balance; }
.flip__note { margin: 14px auto 0; max-width: 30ch; font-size: 1rem; opacity: .8; }

@media (max-width: 860px) {
  .hero__grid, .night-grid { grid-template-columns: 1fr; gap: 40px; }
  .flip { height: 200vh; }
}

/* ================= shared ================= */
.head { max-width: 62ch; margin-bottom: 56px; }
.head .lede { margin-top: 18px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-body); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 16px; height: 9px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.enemy { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.enemy li { position: relative; padding-left: 30px; color: var(--ink-body); }
.enemy li::before { content: "\00d7"; position: absolute; left: 4px; top: -.06em;
                    color: var(--danger); font-size: 1.25rem; }

/* ================= §04 demo ================= */
.demo-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: start; }
/* montra's rule: spend the one indulgent object on the control you most want touched */
.toggle {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--surface-2);
  border-radius: var(--r-card); padding: 6px;
}
.toggle__orb {
  position: absolute; left: 6px; top: 6px; width: calc(100% - 12px); height: 48px;
  border-radius: var(--r-tile); z-index: 0;
  /* the label on this orb is white, so the orb may never go lighter than
     --accent (4.8:1 with white). The lime belongs nowhere near white text. */
  background: radial-gradient(110% 110% at 82% 14%, #FFFFFF33, #FFFFFF00 46%),
              linear-gradient(150deg, var(--accent), #235E05);
  box-shadow: 0 8px 20px #34800833, inset 0 1px 0 #FFFFFF55;
  transition: transform .5s var(--ease-out);
}
.toggle button {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-tile); text-align: left; color: var(--ink-body);
  transition: color .3s var(--ease-out);
}
.toggle button[aria-selected="true"] { color: var(--ink-inverse); font-weight: 500; }
/* no opacity here: .8 composited white down to 3.65:1 on the orb. */
.toggle button .code { font-family: var(--font-body); font-size: .8rem; }
.toggle button[aria-selected="false"] .code { color: var(--ink-faint); }
.facts { margin: 26px 0 0; display: grid; gap: 14px; }
.facts div { display: flex; justify-content: space-between; gap: 16px;
             padding-bottom: 12px; border-bottom: 1px solid var(--surface-2); }
.facts dt { color: var(--ink-body); font-size: .95rem; }
.facts dd { margin: 0; font-family: var(--font-body); font-size: .95rem; }
.live { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%;
        background: var(--accent); margin-right: .3rem; position: relative; }
.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
               background: var(--accent); animation: cn-pulse 2.2s ease-out infinite; }

/* voice note bubble */
.vn { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.vn button { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%;
             background: var(--ink); color: var(--page); cursor: pointer; display: grid;
             place-items: center; }
.msg--out .vn button { background: var(--ink-inverse); color: var(--accent); }
.vn .wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex: 1; }
.vn .wave i { flex: 1; background: currentColor; opacity: .35; border-radius: 1px;
              transition: opacity .12s linear; }
.vn .wave i.on { opacity: 1; }
.vn .t { font-family: var(--font-body); font-size: .75rem; opacity: .7; }
.msg img.shot { border-radius: 10px; margin-bottom: 8px; max-height: 190px;
                width: auto; object-fit: cover; }
.card { display: flex; gap: 12px; align-items: center; background: var(--page);
        border: 1px solid var(--surface-2); border-radius: 14px; padding: 10px; }
.card img, .card video { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; }
/* a product loop at 58px proves nothing — at 104px the motion reads, which is
   the entire point of filming it rather than photographing it */
.card--media { padding: 12px; }
.card--media img, .card--media video { width: 104px; height: 104px; border-radius: 11px; }
.card--media b { font-size: 1rem; margin-bottom: 4px; }
/* the card sits inside an outgoing (white-on-green) bubble, so it has to
   re-state its own ink or the name inherits white onto a light card */
.card b { display: block; font-weight: 500; font-size: .95rem; color: var(--ink); }
.card span { font-family: var(--font-body); font-size: .9rem; color: var(--ink-body); }

/* ================= §05 bento ================= */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { background: var(--surface); border: 1px solid var(--surface-2);
        border-radius: var(--r-card); padding: 26px; transition: transform .5s var(--ease-out); }
.tile:hover { transform: translateY(-6px); }
.tile img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 20px; }
.tile h3 { font-size: 1.25rem; margin-bottom: 10px; }
.tile p { color: var(--ink-body); font-size: .98rem; line-height: 1.45; }

/* ================= §07 layout ================= */
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ================= §11 pricing ================= */
.price { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.price__card { background: var(--surface); border: 1px solid var(--surface-2);
               border-radius: var(--r-card); padding: 34px; }
.price__fig { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem;
              line-height: 1; margin: 22px 0 10px; letter-spacing: -.02em; }
.price__per { font-family: var(--font-body); font-size: 1.05rem; font-weight: 400;
              color: var(--ink-body); letter-spacing: 0; }
.price__note { color: var(--ink-body); margin-bottom: 26px; font-size: .98rem; }

/* ================= §12 FAQ ================= */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq__row { border-bottom: 1px solid var(--surface-2); }
.faq__q { width: 100%; display: flex; gap: 16px; align-items: center; text-align: left;
          background: none; border: 0; padding: 22px 0; cursor: pointer; font-size: 1.1rem;
          font-weight: 500; }
.faq__q .pm { margin-left: auto; width: 18px; height: 18px; position: relative; flex: none; }
.faq__q .pm::before, .faq__q .pm::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: var(--ink); transition: transform .45s var(--ease-swap);
}
.faq__q .pm::after { transform: rotate(90deg); }
.faq__row.is-open .pm::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; height: 0; opacity: 0; filter: blur(4px);
          transition: height .55s var(--ease-out), opacity .24s, filter .24s; }
.faq__row.is-open .faq__a { opacity: 1; filter: none; }
.faq__a p { color: var(--ink-body); padding-bottom: 24px; max-width: 60ch; line-height: 1.5; }

/* ================= §13 CTA + footer ================= */
.cta-sec { background: var(--page); }
.cta { max-width: 720px; }
.cta__form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; align-items: center; }
.cta__form input {
  flex: 1 1 280px; height: 58px; padding: 0 20px; font: inherit;
  border-radius: var(--r-pill); border: 1px solid var(--surface-2);
  background: var(--surface); color: var(--ink);
}
.cta__form input::placeholder { color: var(--ink-body); }
.cta__msg { flex-basis: 100%; font-size: .9rem; color: var(--ink-body); min-height: 1.2em; }
.footer { background: var(--page); padding-block: 40px 56px; }
.footer__in { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.footer__nav { display: flex; gap: 22px; margin-left: auto; }
.footer__nav a { color: var(--ink-body); font-size: .95rem; }
.footer__nav a:hover { color: var(--ink); }
.footer__note { color: var(--ink-faint); flex-basis: 100%; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .demo-grid, .control-grid, .price, .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .bento { grid-template-columns: 1fr; }
  .head { margin-bottom: 36px; }
}

/* ================= §01 hero: the plate reaches the edge, the copy gets a pool ================= */
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(820px 640px at calc(50% - 330px) 46%,
              #FBFAF7F2 0%, #FBFAF7D9 42%, #FBFAF700 78%); }
.hero__snips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.snip { position: absolute; display: inline-flex; align-items: center; gap: 8px;
        padding: 9px 14px; border-radius: 16px 16px 16px 5px; font-size: .9rem; color: var(--ink);
        background: #FFFFFFB3; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border: 1px solid #FFFFFFE6; white-space: nowrap;
        box-shadow: inset 0 1px 0 #FFF, 0 14px 30px -12px #1C1A1633, 0 0 0 1px #1C1A160A; }
.snip small { font-weight: 600; font-size: .6rem; letter-spacing: .06em;
              color: var(--accent); padding: 2px 5px; border-radius: 5px; background: #D2FA0433; }
/* depth: the far ones are smaller and softer */
.snip--2 { transform: scale(.86); filter: blur(.6px); opacity: .85; }
.snip--4 { transform: scale(.78); filter: blur(1.2px); opacity: .7; }
.snip--5 { transform: scale(.9); opacity: .9; }
/* margins first: they only exist once the page is wider than the grid */
.snip--1 { left: calc(50% - 630px - 190px); top: 30%; }
.snip--2 { left: calc(50% - 630px - 150px); top: 62%; }
.snip--4 { left: calc(50% - 630px - 120px); top: 84%; }
/* inside the grid: the gutter between copy and card, and under the facts */
.snip--3 { left: calc(50% - 20px); top: 17%; }
.snip--5 { left: calc(50% - 330px); bottom: 42px; }
@media (max-width: 1640px) { .snip--1, .snip--2, .snip--4 { display: none; } }
@media (max-width: 900px) { .hero__snips { display: none; } }

/* ================= §05 each tile acts out its claim ================= */
.tile { display: flex; flex-direction: column; }
.tile__live { margin-top: 22px; min-height: 104px; padding: 12px; border-radius: var(--r-tile);
              background: var(--page); border: 1px solid var(--surface-2); position: relative;
              display: flex; flex-direction: column; justify-content: center; gap: 6px; overflow: hidden; }
.tile p { flex: 1; }
.lv-b { max-width: 88%; padding: 6px 10px; border-radius: 12px; font-size: .78rem; line-height: 1.3; }
.lv-b--in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.lv-b--out { align-self: flex-end; background: var(--accent); color: var(--ink-inverse); border-bottom-right-radius: 4px; }
.lv-timer { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px;
            font-family: var(--font-body); font-size: .68rem; color: var(--ink-body); }
.lv-timer i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.lv-timer b { font-weight: 400; min-width: 3.2ch; }
.lv-list { display: grid; gap: 4px; }
.lv-item { display: flex; align-items: center; gap: 8px; font-size: .76rem; padding: 5px 8px;
           border-radius: 8px; transition: background .3s, box-shadow .3s; }
.lv-item i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.lv-item b { margin-left: auto; font-family: var(--font-body); font-weight: 400; }
.lv-item.is-hit { background: var(--surface-tint); box-shadow: inset 2px 0 0 var(--accent-bright); }
.lv-quote { display: flex; align-items: baseline; gap: 6px; font-size: .74rem; color: var(--ink-body);
            padding: 2px 8px 0; }
.lv-quote b { display: inline-block; font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--ink); }
.lv-quote span { margin-left: auto; font-size: .64rem; color: var(--accent); }
.lv-hand { display: flex; align-items: center; gap: 10px; }
.lv-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
         font-size: .7rem; font-weight: 600; background: var(--surface); color: var(--ink-faint);
         transition: background .3s, color .3s, box-shadow .3s; }
.lv-av--ai.is-on { background: var(--accent-light); color: var(--ink); box-shadow: 0 0 0 4px #D2FA0440; }
.lv-av--you.is-on { background: var(--ink); color: var(--page); box-shadow: 0 0 0 4px #1C1A161A; }
.lv-track { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 6px, transparent 6px 10px); }
.lv-track i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
              border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px #86F802; }
.lv-cap { display: inline-block; font-size: .72rem !important; color: var(--ink-body); text-align: center;
          align-self: center; flex: none !important; }
.lv-ch { display: flex; justify-content: space-between; padding: 2px 4px; }
.lv-ch img { width: 26px; height: 26px; opacity: .3; filter: grayscale(1);
             transition: opacity .35s, filter .35s, transform .45s var(--ease-out); }
.lv-ch img.is-on { opacity: 1; filter: none; transform: translateY(-3px) scale(1.18); }

/* ================= §07 the take-over, performed ================= */
.tk { position: relative; background: var(--surface); border: 1px solid var(--surface-2);
      border-radius: var(--r-card); padding: 10px; }
.tk__open { background: var(--page); border-radius: var(--r-tile); border: 1px solid var(--surface-2);
            box-shadow: 0 18px 40px -20px #1C1A1640; overflow: hidden; }
.tk__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--surface-2); }
.tk__head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.tk__who { display: flex; flex-direction: column; font-weight: 500; font-size: .92rem; line-height: 1.2; }
.tk__who small { font-weight: 400; font-size: .72rem; color: var(--ink-body); }
.tk__mode { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
            border-radius: var(--r-pill); font-size: .72rem; font-weight: 500; transition: background .3s, color .3s; }
.tk__mode i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk__mode[data-k="ai"] { background: #D2FA0433; color: #1F5A04; }
.tk__mode[data-k="you"] { background: var(--ink); color: var(--page); }
.tk__thread { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 176px; }
.tk__m { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: .86rem; line-height: 1.35; }
.tk__m--in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.tk__m--ai { align-self: flex-end; background: var(--accent); color: var(--ink-inverse); border-bottom-right-radius: 4px; }
.tk__m--you { align-self: flex-end; background: var(--ink); color: var(--page); border-bottom-right-radius: 4px; }
.tk__compose { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; margin: 0 10px 10px;
               border-radius: 12px; background: var(--surface); }
.tk__status { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-body); }
.tk__status .typing i { width: 4px; height: 4px; }
.tk__btn { padding: 7px 13px; border-radius: var(--r-pill); border: 0; background: var(--ink); color: var(--page);
           font: 500 .76rem var(--font-body); }
.tk__rows { padding: 6px 4px 0; }
.tk__row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--surface-2); }
.tk__row:last-child { border-bottom: 0; }
.tk__row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tk__row .who { display: block; font-weight: 500; font-size: .84rem; }
.tk__row .last { display: block; color: var(--ink-body); font-size: .78rem; }
.tk__tag { margin-left: auto; font-size: .66rem; font-weight: 500; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.tk__tag--ai { background: #D2FA0426; color: #1F5A04; }
.tk__tag--order { background: var(--surface-tint); color: var(--accent); box-shadow: inset 0 0 0 1px #34800833; }
.tk__tag--you { background: #C97A131A; color: var(--warning); }
.tk__cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5;
              pointer-events: none; filter: drop-shadow(0 3px 5px #1C1A1640); opacity: 0; }

/* ================= §10 it grows with you ================= */
.rm { position: relative; overflow: clip; min-height: 100vh; display: flex; align-items: center;
      /* the ground: dot fields at the flanks, two soft greens in opposite corners */
      background:
        radial-gradient(520px 420px at 96% 8%, #D2FA041F, transparent 70%),
        radial-gradient(560px 460px at 4% 96%, #86F80217, transparent 70%),
        var(--page); }
.rm::before, .rm::after { content: ""; position: absolute; top: 14%; width: 22%; height: 38%;
  pointer-events: none; background: radial-gradient(circle, #1C1A1624 1px, transparent 1.4px) 0 0 / 26px 26px; }
.rm::before { left: 2%;  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.rm::after  { right: 2%; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.rm-in { position: relative; z-index: 2; max-width: 1560px; }
.rm-arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rm-arc svg { display: block; overflow: visible; }
.rm-arc__ghost { fill: none; stroke: #1C1A1612; stroke-width: 1; }
.rm-arc__dash  { fill: none; stroke: #34800833; stroke-width: 1; stroke-dasharray: 2 9;
                 animation: rm-drift 14s linear infinite; }
@keyframes rm-drift { to { stroke-dashoffset: -220; } }
.rm-arc__line  { fill: none; stroke: #4BA30C8C; stroke-width: 1.25; stroke-linecap: round; }
.rm-arc__glow  { fill: none; stroke: var(--accent-mid); stroke-width: 2.5; stroke-linecap: round;
                 filter: drop-shadow(0 0 6px #86F802); }
.rm-comet { fill: var(--accent-light); opacity: 0; filter: drop-shadow(0 0 8px #D2FA04) drop-shadow(0 0 16px #86F802); }
.rm-node__dot  { fill: var(--surface-2); transition: fill .4s; }
.rm-node__halo { fill: #86F802; opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
                 transition: opacity .4s, transform .6s var(--ease-out); }
.rm-node.is-lit .rm-node__dot { fill: var(--accent-bright); }
.rm-node.is-lit .rm-node__halo { opacity: .14; transform: scale(1); }
.rm-node.is-hot .rm-node__dot { fill: var(--accent-light); }
.rm-node.is-hot .rm-node__halo { opacity: .35; transform: scale(1.5); }

.rm-head { text-align: center; max-width: 760px; margin: 0 auto 72px; }
.rm-eyebrow { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
              padding: 9px 18px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 500;
              letter-spacing: .12em; text-transform: uppercase; color: var(--ink-body);
              background: var(--surface); border: 1px solid var(--surface-2); }
.rm-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright);
                   box-shadow: 0 0 0 0 #4BA30C80; animation: hp-pulse 2s ease-out infinite; }
.rm-title { margin-top: 26px; font-size: clamp(2.6rem, 5.2vw, 4.6rem); letter-spacing: -.035em; }
.rm-lede { margin: 20px auto 0; max-width: 40ch; }

.rm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
           transition: gap .5s var(--ease-out); }
.rm-card { position: relative; isolation: isolate; overflow: hidden; padding: 30px 30px 34px;
           border-radius: 22px; background: #FFFFFFB8; border: 1px solid var(--surface-2);
           -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
           box-shadow: inset 0 1px 0 #FFF, 0 1px 2px #1C1A160A, 0 24px 48px -28px #1C1A1633;
           outline: none; cursor: default;
           transition: transform .6s var(--ease-out), opacity .45s, box-shadow .6s var(--ease-out),
                       border-color .45s; }
/* the fill: rises from the bottom edge, with a light that follows the pointer */
.rm-card__fill { position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), #86F80247, transparent 60%),
              linear-gradient(165deg, #3E8F0A 0%, #235F05 55%, #14330A 100%);
  clip-path: inset(100% 0 0 0 round 22px); transition: clip-path .65s var(--ease-swap); }
.rm-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.rm-card__n { font-family: var(--font-body); font-size: .9rem; color: var(--accent); transition: color .45s; }
.rm-card__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--surface-2), transparent);
                 transform-origin: left; transition: background .45s, transform .6s var(--ease-out); transform: scaleX(.55); }
.rm-card__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; flex: none;
                 background: var(--surface-tint); color: var(--accent);
                 transition: background .45s, color .45s, transform .6s var(--ease-out), box-shadow .45s; }
.rm-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7;
                     stroke-linecap: round; stroke-linejoin: round; }
.rm-card h3 { font-size: 1.28rem; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 14px;
              transition: color .45s; }
.rm-card p { color: var(--ink-body); font-size: 1rem; line-height: 1.5; transition: color .45s; }

.rm-card.is-hot { transform: translateY(-12px); border-color: #3E8F0A;
                  box-shadow: 0 40px 70px -30px #235F05AA, 0 0 0 1px #3E8F0A; }
.rm-card.is-hot .rm-card__fill { clip-path: inset(0 0 0 0 round 22px); }
.rm-card.is-hot h3 { color: #FFF; }
.rm-card.is-hot p { color: #E7F3D6; }
.rm-card.is-hot .rm-card__n { color: var(--accent-light); }
.rm-card.is-hot .rm-card__rule { background: linear-gradient(90deg, var(--accent-light), transparent); transform: scaleX(1); }
.rm-card.is-hot .rm-card__icon { background: var(--accent-light); color: #14330A; transform: rotate(-8deg) scale(1.06);
                                 box-shadow: 0 0 0 6px #D2FA0426, 0 10px 30px -6px #D2FA0499; }
/* the others step back, so the hovered one is the only thing with contrast */
.rm-grid.has-hot .rm-card:not(.is-hot) { opacity: .55; transform: scale(.98); }

@media (max-width: 1280px) { .rm-grid { gap: 18px; } .rm-card { padding: 24px 22px 28px; } }
@media (max-width: 1000px) {
  .rm { min-height: 0; }
  .rm-grid { grid-template-columns: repeat(2, 1fr); }
  .rm-arc { display: none; }
}
@media (max-width: 600px) { .rm-grid { grid-template-columns: 1fr; } }

/* ================= §05 glass (after the reference board) =================
   Frost needs something behind it, so two orbs sit under the grid: a clear
   bubble with a green rim off the left edge, a glossy green sphere bottom-right. */
/* sideways only: clipping vertically is what sliced the sphere flat */
#how { overflow-x: clip; overflow-y: visible; }
#how::before, #how::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
/* clear glass: nearly empty in the middle, colour gathers at the rim, one hard
   specular top-left, a caustic of lime pooled bottom-right, and it blurs what
   is behind it */
#how::before { width: 440px; height: 440px; left: -230px; top: 4%;
  background:
    radial-gradient(circle at 30% 24%, #FFFFFFF2 0 2.5%, #FFFFFF00 9%),
    radial-gradient(ellipse 40% 22% at 34% 20%, #FFFFFF8C, #FFFFFF00 70%),
    radial-gradient(circle at 68% 82%, #D2FA0459, #D2FA0400 34%),
    radial-gradient(circle at 50% 50%, #FFFFFF0F 58%, #86F80224 80%, #4BA30C66 94%, #FFFFFF00 100%);
  -webkit-backdrop-filter: blur(5px) saturate(1.5); backdrop-filter: blur(5px) saturate(1.5);
  box-shadow: inset 0 0 0 1px #FFFFFFB3, inset -34px -44px 80px #4BA30C2E,
              inset 22px 22px 44px #FFFFFF99, 0 50px 90px -40px #3E8F0A59; }
/* glossy green: a lit sphere, not a disc — specular, rim light, core shadow */
#how::after { width: 250px; height: 250px; right: -70px; bottom: 30px;
  background:
    radial-gradient(circle at 33% 27%, #FFFFFF 0 2.5%, #FFFFFF00 9%),
    radial-gradient(ellipse 36% 20% at 38% 22%, #FFFFFFA6, #FFFFFF00 70%),
    radial-gradient(circle at 72% 86%, #F4FFB8E6, #D2FA0400 30%),
    radial-gradient(circle at 42% 36%, #EAFF70, #B7F000 30%, #6CD402 55%, #2F8A06 80%, #17470A 100%);
  box-shadow: inset -26px -32px 54px #14330A73, inset 10px 14px 24px #FFFFFF59,
              0 44px 70px -28px #3E8F0A8C; }
#how .wrap { position: relative; z-index: 1; }

.tile {
  background: linear-gradient(160deg, #FFFFFFB3 0%, #FFFFFF73 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid #FFFFFFE6;
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px #FFFFFF66,
              0 1px 2px #1C1A160A, 0 24px 50px -28px #1C1A1640, 0 0 0 1px #1C1A160A;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.tile:hover { box-shadow: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px #FFFFFF66,
                          0 1px 2px #1C1A160A, 0 36px 60px -26px #3E8F0A4D, 0 0 0 1px #86F80240; }
/* the object sits on a soft green shadow, as if lit from above */
.tile img { filter: drop-shadow(0 14px 16px #3E8F0A38); }
.tile__live {
  background: #FFFFFFB8;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid #FFFFFF;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 24px -14px #1C1A1638, 0 0 0 1px #1C1A160D;
}
.tile__live .lv-b--in { background: #F3F1ECE6; }

/* ================= §09 channels: copy left, the orbit right ================= */
.ch { overflow: clip;
  background:
    url("../assets/img/channels-bg.png") center / cover no-repeat,
    radial-gradient(700px 520px at 72% 55%, #86F80212, transparent 70%),
    radial-gradient(520px 420px at 8% 108%, #4BA30C26, transparent 70%),
    radial-gradient(460px 380px at 104% -6%, #86F8021A, transparent 70%),
    var(--night); }
/* until the plate exists: two out-of-focus glass arcs, like the mock's corners */
.ch::before, .ch::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 26px solid transparent; filter: blur(10px); opacity: .5; }
.ch::before { width: 900px; height: 520px; left: -260px; bottom: -330px;
  border-top-color: #86F8022E; transform: rotate(8deg); }
.ch::after { width: 520px; height: 620px; right: -300px; top: -260px;
  border-left-color: #D2FA0424; transform: rotate(-18deg); }
.ch-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr;
           gap: 40px; align-items: center; max-width: 1400px; }
.ch-eyebrow { font-size: .76rem; letter-spacing: .32em; text-transform: uppercase; color: #EDE9E099; margin-bottom: 22px; }
.ch-title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; }
.ch-lime { background: linear-gradient(100deg, #E6FF9A 0%, #D2FA04 45%, #86F802 100%);
           -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-copy .lede { margin-top: 24px; max-width: 34ch; }
.ch-feats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.ch-feats li { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-items: center; }
.ch-feats b { font-weight: 500; font-size: 1.08rem; color: var(--ink-night); }
.ch-feats small { grid-column: 2; font-size: .92rem; color: #EDE9E0A6; margin-top: 3px; }
.ch-ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
         background: linear-gradient(160deg, #FFFFFF14, #FFFFFF05); border: 1px solid #FFFFFF1F;
         box-shadow: inset 0 1px 0 #FFFFFF1A, 0 10px 20px -10px #000; }
.ch-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--accent-mid); stroke-width: 1.7;
             stroke-linecap: round; stroke-linejoin: round; }
/* the orbit's square box is mostly air above and below a lying-back ring */
.ch .dg-orbit { max-width: none; margin-block: -13%; }
@media (max-width: 1000px) {
  .ch-grid { grid-template-columns: 1fr; }
  .ch .dg-orbit { margin-block: -8% -4%; }
  .ch .dg-orbit-chip { display: none; }   /* scoped: diagrams.css loads later and would win */
}

/* ================= the glass kit's canvases ================= */
.bento { position: relative; }
.glass-canvas { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
/* the object's stage: bigger than the old 72px icon and bleeding into the
   tile's padding, because a lit 3D object needs room around it */
.tile__3d { width: 150px; height: 128px; margin: -22px 0 10px -26px; flex: none; }
.dg-orbit-mark-inner { position: relative; }
.glass-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.dg-orbit-mark img.is-replaced { visibility: hidden; }

/* ================= audit fixes ================= */

/* §11 the price card joins §05's glass, over its own lime light */
#pricing { overflow-x: clip; }
#pricing::before { content: ""; position: absolute; width: 560px; height: 560px; left: 8%; top: 38%;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, #D2FA0433, #86F80214 55%, transparent); filter: blur(10px); }
#pricing .wrap { position: relative; z-index: 1; }
.price__card {
  background: linear-gradient(160deg, #FFFFFFC7 0%, #FFFFFF80 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid #FFFFFFE6;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1C1A160A, 0 40px 80px -40px #3E8F0A59, 0 0 0 1px #1C1A160A;
}

/* §12 the empty column under the heading answers the obvious next question */
.faq-aside { position: sticky; top: 120px; }
.faq-ask { margin-top: 40px; max-width: 360px; padding: 24px; border-radius: var(--r-card);
  background: linear-gradient(160deg, #FFFFFFB8, #FFFFFF73);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid #FFFFFFE6; box-shadow: inset 0 1px 0 #FFF, 0 24px 50px -30px #1C1A1640, 0 0 0 1px #1C1A160A; }
.faq-ask__q { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.faq-ask__q .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.faq-ask p:not(.faq-ask__q) { margin-top: 10px; font-size: .95rem; line-height: 1.5; color: var(--ink-body); }
.faq-ask .btn { margin-top: 20px; }
@media (max-width: 860px) { .faq-aside { position: static; } }

/* §13 the last frame gets the hero's night twin behind it */
.cta-sec { overflow: clip; }
.cta-sec::before { content: ""; position: absolute; inset: 0 0 0 38%; z-index: 0; pointer-events: none;
  background: url("../assets/img/hero%20image%20blk.png") 30% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect; opacity: .9; }
/* the block keeps the page grid; only its contents sit left, clear of the plate */
.cta-sec .cta { max-width: 1260px; }
.cta-sec .cta > * { max-width: 720px; }
@media (max-width: 860px) { .cta-sec::before { inset: 0; opacity: .35; } }

/* phones: the landscape loop is 864px wide, so it lives in a band behind the
   chat card rather than stretched 2x up the whole hero, where it blurred */
@media (max-width: 900px) {
  .hero__video { top: auto; bottom: 0; height: 70vw; object-position: 60% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent); }
}

/* ================= §08 three steps: a track that fills, cards that perform ================= */
.st { overflow-x: clip; }
.st::before { content: ""; position: absolute; width: 900px; height: 520px; left: 50%; top: 58%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #D2FA0424, #86F8020D 60%, transparent); filter: blur(12px); }
.st .wrap { position: relative; }
.st-head { max-width: 640px; }
.st-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .78rem;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-body); }
.st-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.st-head .lede { margin-top: 18px; }
.st-body { position: relative; margin-top: 72px; }
.st-track { position: absolute; z-index: 0; height: 2px; margin-top: -3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #1C1A1626 0 6px, transparent 6px 12px); }
.st-track__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-mid) 70%, var(--accent-light));
  box-shadow: 0 0 12px #86F80299; }
.st-track__head { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 0 5px #D2FA0433, 0 0 18px #86F802; opacity: 0; }
.st-grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.st-card { position: relative; padding: 0 28px 30px; border-radius: 24px;
  background: linear-gradient(160deg, #FFFFFFB3, #FFFFFF66);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid #FFFFFFE0;
  box-shadow: inset 0 1px 0 #FFF, 0 1px 2px #1C1A160A, 0 24px 50px -30px #1C1A1640, 0 0 0 1px #1C1A160A;
  opacity: .55; transform: translateY(14px) scale(.985);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), box-shadow .6s var(--ease-out); }
.st-card.is-on { opacity: 1; transform: none;
  box-shadow: inset 0 1px 0 #FFF, 0 1px 2px #1C1A160A, 0 40px 70px -34px #3E8F0A66, 0 0 0 1px #86F80240; }
/* the number sits ON the track: the card hangs from its step */
.st-node { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px auto 22px;
  border-radius: 50%; font-weight: 600; font-size: .95rem; color: var(--ink-faint);
  background: var(--page); box-shadow: 0 0 0 1px var(--surface-2), 0 8px 18px -8px #1C1A1640;
  transition: color .4s, background .4s, box-shadow .5s var(--ease-out); }
.st-card.is-on .st-node { color: #14330A; background: var(--accent-light);
  box-shadow: 0 0 0 6px #D2FA0433, 0 10px 26px -6px #86F802B3; }
.st-card h3 { margin-top: 26px; font-size: 1.3rem; letter-spacing: -.01em; }
.st-card > p { margin-top: 10px; color: var(--ink-body); font-size: .98rem; line-height: 1.5; }

/* the stage each step performs on */
.st-ui { position: relative; height: 190px; padding: 16px; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background: #FFFFFFC7; border: 1px solid #FFFFFF;
  box-shadow: inset 0 1px 0 #FFF, 0 12px 26px -16px #1C1A1640, 0 0 0 1px #1C1A160D; }
.st-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-body); }
.st-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 6px var(--accent-mid); }
.st-foot b { font-weight: 600; color: var(--ink); min-width: 3ch; }
/* 01 */
.st-list { display: grid; gap: 6px; }
.st-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
  background: var(--surface); font-size: .8rem; }
.st-row img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.st-row b { margin-left: auto; font-weight: 500; }
/* 02 */
.st-url { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--surface); font-size: .86rem; color: var(--ink-body); }
.st-url b { color: var(--ink); font-weight: 600; }
.st-url button { margin-left: auto; padding: 7px 14px; border: 0; border-radius: 999px; font: 500 .76rem var(--font-body);
  background: var(--ink); color: var(--page); transition: background .3s, color .3s; }
.st-url button.is-done { background: var(--accent-light); color: #14330A; }
.st-ch { display: flex; justify-content: space-around; padding: 14px 6px 0; }
.st-ch img { width: 34px; height: 34px; opacity: .25; filter: grayscale(1); transform: scale(.85);
  transition: opacity .35s, filter .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.st-ch img.is-on { opacity: 1; filter: none; transform: scale(1); }
/* 03 */
.st-b { max-width: 84%; padding: 7px 12px; border-radius: 13px; font-size: .82rem; line-height: 1.3; }
.st-b--in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.st-b--out { align-self: flex-end; background: var(--accent); color: var(--ink-inverse); border-bottom-right-radius: 4px; }
.st-order { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; font-size: .78rem; font-weight: 500; background: var(--ink); color: var(--page); }
.st-order span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-light); color: #14330A; font-size: .7rem; }

@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; gap: 48px; }
  .st-track { display: none; }
  .st-card { opacity: 1; transform: none; }
}

/* ================= §11 pricing, after Matt's board ================= */
.pr { overflow-x: clip; }
.pr-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pr-lines path { fill: none; stroke: #4BA30C2E; stroke-width: 1.2; }
.pr::after { content: ""; position: absolute; width: 620px; height: 620px; left: -180px; top: 30%; border-radius: 50%;
  pointer-events: none; background: radial-gradient(closest-side, #86F80226, transparent); filter: blur(16px); }
.pr-head { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto 64px; }
.pr-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1F5A04;
  background: #D2FA0429; box-shadow: inset 0 0 0 1px #86F8022E; margin-bottom: 22px; }
.pr-pill .dot, .pr-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.pr-head .lede { margin: 16px auto 0; }
.price { position: relative; z-index: 1; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.price__card { position: relative; padding: 44px 44px 30px; border-radius: 28px;
  background: linear-gradient(165deg, #FFFFFFF2 0%, #FFFFFFD9 100%);
  box-shadow: inset 0 1px 0 #FFF, 0 1px 2px #1C1A160D, 0 50px 90px -40px #3E8F0A66, 0 0 0 1px #1C1A160D; }
.price__obj { position: absolute; top: 18px; right: 22px; }
.price__obj img { width: 110px; }
.price__obj .tile__3d { width: 200px; height: 180px; margin: -20px -20px 0 0; }
.pr-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  font-size: .9rem; color: var(--ink-body); background: #D2FA0424; margin-bottom: 26px; }
.price__fig { font-size: 5rem; letter-spacing: -.045em; line-height: 1; margin-bottom: 14px; }
.price__note { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--surface-2); }
.pr-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pr-ticks li { display: flex; align-items: center; gap: 16px; font-size: 1.05rem; color: var(--ink); }
.pr-ticks li::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #D2FA0433 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23348008' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 15px no-repeat; }
.pr-cta { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 36px;
  height: 68px; border-radius: 999px; font-size: 1.12rem; font-weight: 500; color: #FFF;
  background: linear-gradient(90deg, #3E8F0A, #2A6E06);
  box-shadow: inset 0 1px 0 #FFFFFF33, 0 18px 34px -16px #2A6E06B3;
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.pr-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #FFFFFF33, 0 26px 44px -16px #2A6E06CC, 0 0 0 6px #86F80226; }
.pr-cta__arrow { position: absolute; right: 10px; display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; background: #1C4A05; transition: transform .4s var(--ease-out); }
.pr-cta:hover .pr-cta__arrow { transform: translateX(3px); }
.pr-cta__arrow svg { width: 18px; height: 18px; fill: none; stroke: #FFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-foot { margin-top: 20px; text-align: center; font-size: .72rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); }

.price__side { display: grid; gap: 16px; }
.pf { border-radius: 22px; background: linear-gradient(165deg, #FFFFFFE6, #FFFFFFBF);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 #FFF, 0 1px 2px #1C1A160A, 0 20px 40px -30px #1C1A1640, 0 0 0 1px #1C1A160D;
  transition: box-shadow .4s var(--ease-out); }
.pf.is-open, .pf:hover { box-shadow: inset 0 1px 0 #FFF, 0 24px 44px -28px #3E8F0A59, 0 0 0 1px #86F80240; }
.pf__q { width: 100%; display: flex; align-items: center; gap: 20px; padding: 22px 26px; border: 0; background: none;
  text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pf__ic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(160deg, #EDF7E0, #DDF0C4); box-shadow: inset 0 1px 0 #FFF; }
.pf__ic svg { width: 26px; height: 26px; fill: none; stroke: #2A6E06; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf__t { flex: 1; display: grid; gap: 4px; }
.pf__t b { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.pf__t span { font-size: .98rem; color: var(--ink-body); }
.pf__chev { width: 12px; height: 12px; border-right: 2px solid var(--ink-body); border-bottom: 2px solid var(--ink-body);
  transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--ease-out); margin-right: 6px; }
.pf.is-open .pf__chev { transform: translateY(3px) rotate(225deg); }
.pf__a { height: 0; overflow: hidden; transition: height .5s var(--ease-out); }
.pf__a p { padding: 0 26px 22px 106px; font-size: .95rem; line-height: 1.55; color: var(--ink-body); }
.pr-note { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding-left: 8px; font-size: .95rem; color: var(--ink-body); }
.pr-note b { font-weight: 500; color: var(--ink); }
.pr-note__ic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #EDF7E0; }
.pr-note__ic svg { width: 24px; height: 24px; fill: none; stroke: #2A6E06; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .price { grid-template-columns: 1fr; } .price__fig { font-size: 4rem; } }
@media (max-width: 600px) { .price__card { padding: 32px 22px 24px; } .price__obj { display: none; } .pf__a p { padding-left: 26px; } }

/* ================= §06 grounded answers ================= */
.gr { overflow-x: clip; }
.gr::before { content: ""; position: absolute; width: 1000px; height: 600px; left: 50%; top: 60%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #D2FA041F, transparent); filter: blur(14px); }
.gr .wrap { position: relative; }
.gr-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.gr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-body); }
.gr-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.gr-stage { position: relative; display: grid; grid-template-columns: 1fr 190px 1fr; gap: 0; align-items: center;
  padding: 26px; border-radius: 30px; background: linear-gradient(165deg, #FFFFFF99, #FFFFFF59);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #FFF, 0 50px 90px -50px #1C1A1659, 0 0 0 1px #1C1A160D; }
.gr-pane { position: relative; z-index: 1; padding: 20px; border-radius: 22px; background: #FFFFFFE6;
  box-shadow: inset 0 1px 0 #FFF, 0 14px 30px -20px #1C1A1640, 0 0 0 1px #1C1A160D; }
.gr-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.gr-label span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.gr-label b { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-body); }
.gr-rows { display: grid; gap: 6px; }
.gr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: .95rem;
  transition: box-shadow .35s var(--ease-out), background-color .35s; }
.gr-row i { flex: none; width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 1px 0 #FFFFFF59, 0 2px 6px #1C1A1626; }
.gr-name { flex: 1; color: var(--ink); }
.gr-left { font-size: .76rem; color: var(--ink-faint); }
.gr-row b { font-weight: 500; min-width: 4.5ch; text-align: right; }
.gr-row.is-hit { background: #D2FA0433 !important; box-shadow: inset 3px 0 0 var(--accent-bright), 0 0 0 1px #86F80240; }
.gr-gate { position: relative; z-index: 3; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 150px; padding: 16px 12px; border-radius: 20px; text-align: center; font-size: .78rem; font-weight: 500; color: var(--ink-body);
  background: #FFFFFFF2; box-shadow: 0 14px 30px -16px #1C1A1640, 0 0 0 1px #1C1A1614; transition: box-shadow .4s, color .4s; }
.gr-gate__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); transition: background .3s, box-shadow .3s; }
.gr-gate[data-s="scan"] .gr-gate__dot { background: var(--accent-mid); animation: gr-scan .8s ease-in-out infinite; }
.gr-gate[data-s="hit"] { color: #1F5A04; box-shadow: 0 16px 34px -14px #3E8F0A80, 0 0 0 1px #86F80266; }
.gr-gate[data-s="hit"] .gr-gate__dot { background: var(--accent-light); box-shadow: 0 0 0 6px #D2FA0440, 0 0 16px #86F802; }
.gr-gate[data-s="miss"] { color: #8A5209; box-shadow: 0 16px 34px -14px #C97A1366, 0 0 0 1px #C97A1366; }
.gr-gate[data-s="miss"] .gr-gate__dot { background: var(--warning); box-shadow: 0 0 0 6px #C97A1326; }
@keyframes gr-scan { 50% { box-shadow: 0 0 0 7px #86F80233; } }
.gr-thread { display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.gr-m { max-width: 86%; padding: 11px 15px; border-radius: 16px; font-size: .95rem; line-height: 1.4; }
.gr-m--in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 5px; }
.gr-m--out { align-self: flex-end; background: linear-gradient(160deg, #3F9409, #2A6E06); color: #FFF; border-bottom-right-radius: 5px;
  box-shadow: 0 10px 22px -12px #2A6E06B3; }
.gr-m--ask { align-self: flex-end; background: #FFF8EC; color: var(--ink); border-bottom-right-radius: 5px; box-shadow: inset 0 0 0 1.5px #C97A1399; }
/* the citation: every answer names the row it came from */
.gr-src { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; font-size: .72rem;
  border-top: 1px solid #FFFFFF33; color: #E7F3D6; }
.gr-src i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); }
.gr-src--miss { border-top-color: #C97A1333; color: #8A5209; }
.gr-src--miss i { background: var(--warning); }
.gr-ping { position: absolute; left: 20px; right: 20px; bottom: -28px; display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 18px; font-size: .84rem; color: #EDE9E0; background: #1C1A16;
  box-shadow: 0 24px 44px -16px #1C1A16A6; }
.gr-ping b { color: #FFF; font-weight: 500; }
.gr-ping__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 10px #D2FA04; }
.gr-ping__btns { margin-left: auto; display: flex; gap: 6px; }
.gr-ping__btns em { font-style: normal; font-weight: 500; font-size: .76rem; padding: 7px 12px; border-radius: 999px; background: #2A251D; }
.gr-ping__btns em:first-child { background: var(--accent-light); color: #14330A; }
.gr-beams { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.gr-beam { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px #86F80299); }
.gr-beam--answer { stroke: var(--accent-mid); stroke-width: 2.5; }
.gr-beam--miss { stroke: var(--warning); stroke-dasharray: 4 6; filter: none; }
.gr-rules { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gr-rules li { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid #86F80266; }
.gr-rules b { font-weight: 500; color: var(--ink); }
.gr-rules span { font-size: .92rem; color: var(--ink-body); }
@media (max-width: 900px) {
  .gr-head { grid-template-columns: 1fr; gap: 16px; }
  .gr-stage { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .gr-beams { display: none; }
  .gr-rules { grid-template-columns: 1fr; }
  .gr-ping { position: static; margin-top: 14px; }
}

/* ================= §05 crisper: whiter glass, darker type, deeper greens ================= */
.tile { background: linear-gradient(165deg, #FFFFFFF0 0%, #FFFFFFD6 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1C1A160F, 0 28px 54px -30px #1C1A1659, 0 0 0 1px #1C1A1612; }
.tile:hover { box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px #1C1A160F, 0 40px 70px -30px #3E8F0A73, 0 0 0 1px #86F80266; }
.tile h3 { color: var(--ink); font-weight: 600; }
.tile p { color: #4A453D; }
.tile__live { background: #FFFFFF; box-shadow: inset 0 0 0 1px #1C1A160F, 0 12px 26px -16px #1C1A1640; }
/* clear glass on a white card reads as milk; a lime pool behind gives it something to tint */
.price__obj::before { content: ""; position: absolute; width: 190px; height: 190px; right: -10px; top: -8px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #B8F21A59, #86F8021F 60%, transparent); filter: blur(6px); }

/* ================= story flow ================= */
/* one chapter label everywhere, so the page reads as an argument in order */
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-body); }
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
[data-field="night"] .kicker { color: #EDE9E099; }
[data-field="night"] .kicker .dot { background: var(--accent-mid); }
.head .kicker { display: flex; }

/* the chapter rail: fixed on the right, a dash per chapter, the current one
   long and lime with its name showing */
.story { position: fixed; right: 22px; top: 50%; z-index: 800; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.story a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  height: 18px; color: var(--ink-body); }
.story i { display: block; width: 12px; height: 2px; border-radius: 2px; background: #1C1A1640;
  transition: width .45s var(--ease-out), background .3s; }
.story__n, .story__t { font-size: .68rem; font-weight: 500; letter-spacing: .06em; opacity: 0;
  transform: translateX(6px); transition: opacity .3s, transform .4s var(--ease-out); white-space: nowrap; }
.story__n { color: var(--accent); }
.story a:hover i { width: 20px; background: #1C1A1680; }
.story a:hover .story__n, .story a:hover .story__t { opacity: .8; transform: none; }
.story a.is-on i { width: 30px; background: var(--accent-bright); box-shadow: 0 0 8px #86F80280; }
.story a.is-on .story__n, .story a.is-on .story__t { opacity: 1; transform: none; }
.story a.is-on .story__t { color: var(--ink); }
body.on-night .story a { color: #B9B2A5; }
body.on-night .story i { background: #EDE9E033; }
body.on-night .story a.is-on .story__t { color: var(--ink-night); }
body.on-night .story a.is-on i { background: var(--accent-mid); }
@media (max-width: 1180px) { .story { display: none; } }

/* ================= every screen ================= */
/* phones: a menu button opens the links as a glass sheet under the capsule */
.nav__menu { display: none; }
@media (max-width: 860px) {
  .nav__menu { display: grid; gap: 5px; place-content: center; width: 42px; height: 42px; margin-right: 6px;
    border: 0; border-radius: 50%; background: #1C1A160D; cursor: pointer; }
  .nav__menu span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: currentColor;
    transition: transform .35s var(--ease-out); }
  .nav--night .nav__menu { background: #FFFFFF14; color: var(--ink-night); }
  .nav.is-open .nav__menu span:first-child { transform: translateY(3.4px) rotate(45deg); }
  .nav.is-open .nav__menu span:last-child { transform: translateY(-3.4px) rotate(-45deg); }
  .nav.is-open .nav__links { display: flex; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; gap: 2px; margin: 0; padding: 8px; border-radius: 22px;
    background: #FBFAF7F2; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 24px 50px -20px #1C1A1666, 0 0 0 1px #1C1A1614; }
  .nav.is-open .nav__links a { padding: 14px 16px; font-size: 1.05rem; color: var(--ink); }
  .nav.is-open .nav__pill { display: none; }
  .nav--night.is-open .nav__links { background: #1F1B15F2; }
  .nav--night.is-open .nav__links a { color: var(--ink-night); }
  .nav__cta .nav__arrow { display: none; }
  .zs { display: none; }                      /* the sleeping Zs sat on the list */
}
@media (max-width: 900px) { .mark-live { display: none; } }
@media (max-width: 600px) {
  .gr-left { display: none; }                  /* keep each stock row on one line */
  .gr-row { font-size: .88rem; }
  .rm-head { margin-bottom: 40px; }
}