/* aimlink.ai app pages: Aimlink GO first; TARGET and CLUB reuse it with a tablet and a laptop.
   Load after site.css and nav.css. Script: assets/app-page.js.

   The top is two sections that share one phone. Hero: the phone rides up and rests at an angle in front of the
   backdrop. Features: a pinned stage where the phone has docked; scroll picks the feature and its screen
   plays by itself. Then the target in 3D ("Read the series") and the feature index.
   Static by default: without JS or with reduced motion the phone rests in the hero and the features are
   stacked, each with its own phone and a finished screen. Below 900 px the features stay stacked.
   Everything under .is-live is the pinned version. */

@layer sections {
  /* ───────────────────────── The top: hero ───────────────────────── */
  .go-top {
    --hero-h: max(100svh, 46rem); --floor: 0px;
    --pw-hero: min(36svh, 25vw, 350px);                        /* the phone's width in the hero */
    --pose: rotateX(9deg) rotateY(-24deg) rotateZ(7deg);       /* how it stands; the same numbers are in app-page.js */
    position: relative; isolation: isolate; overflow-x: clip;   /* clip, not hidden: the phone layer is sticky */
  }
  /* the phone bar floats at the bottom below 1024 px (nav.css) */
  @media (max-width: 1023.98px) { .go-top { --floor: calc(88px + env(safe-area-inset-bottom, 0px)); } }
  @media (max-width: 899.98px) { .go-top { --hero-h: max(100svh, 48rem); --pw-hero: min(56vw, 240px); } }

  .go-hero { position: relative; isolation: isolate; overflow: clip; min-height: var(--hero-h); display: grid; background: var(--color-night); color: var(--text); }
  .go-hero::after {
    /* legibility: night behind the copy, a floor under it, a little off the top for the header */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--color-night) 94%, transparent) 0%, color-mix(in srgb, var(--color-night) 80%, transparent) 38%, transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--color-night) 72%, transparent) 0%, transparent 24%, transparent 72%, color-mix(in srgb, var(--color-night) 80%, transparent) 100%);
  }

  @media (max-width: 899.98px) {
    /* phones: the copy sits above the phone, so the night comes from the top */
    .go-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--color-night) 90%, transparent) 0%, color-mix(in srgb, var(--color-night) 72%, transparent) 42%, transparent 64%); }
  }

  /* The backdrop (assets/backdrop/go/): the rings of a black target with a band of lime light gliding round them.
     The clip's black is graded to 0 and `lighten` leaves only the light on the night. app-page.js moves and
     scales the frame so the centre of the rings (data-vp) sits behind the phone. */
  .backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: lighten; }
  .backdrop-poster { position: absolute; inset: 0; }
  /* --fw/--fh/--fl/--ft: the whole 16:9 frame at cover size (set by the script); without it, plain cover */
  .backdrop-poster img, .backdrop-video {
    position: absolute; left: var(--fl, 0px); top: var(--ft, 0px); width: var(--fw, 100%); height: var(--fh, 100%); max-width: none;
    object-fit: cover;
    transform-origin: var(--to, 75% 46%); transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, 1));
  }
  .backdrop-video { opacity: 0; transition: opacity 900ms var(--ease-out); }
  .backdrop.is-playing .backdrop-video { opacity: 1; }
  .go-hero-toggle { right: var(--gutter); bottom: calc(var(--floor) + var(--space-4)); z-index: 4; }
  .go-hero-toggle[hidden] { display: none; }   /* it appears when the loop plays */

  .go-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .go-hero-copy {
    display: grid; justify-items: start; align-content: start; gap: var(--space-5);
    padding-top: calc(env(safe-area-inset-top, 0px) + 5.25rem);
    padding-bottom: calc(var(--floor) + var(--pw-hero) + var(--space-7));   /* the phone's part of the hero */
  }
  .go-hero .h1 { font-size: min(clamp(2.75rem, 1rem + 5.6vw, 7rem), 14vw, 15svh); }
  .go-hero .hl { display: block; }
  .go-hero .lede { color: var(--text); opacity: 0.9; max-width: 30ch; text-wrap: balance; }
  .go-hero .h2 { font-size: min(clamp(2.75rem, 1rem + 4.6vw, 6rem), 14vw); }
  .go-hero .w { display: inline-block; animation: rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger)); }
  .go-hero .product, .go-hero .lede, .go-hero .install-row { animation: rise var(--duration-reveal) var(--ease-out) both; }
  .go-hero .lede { animation-delay: 620ms; }
  .go-hero .install-row { animation-delay: 720ms; }
  @media (min-width: 900px) {
    .go-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: var(--grid-gap); align-items: center; }
    .go-hero-copy { padding-block: 6rem clamp(2rem, 6svh, 4rem); }
  }

  /* Install: the two store badges */
  .install-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
  .install-stores { justify-content: flex-start; }

  .points { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
  .points li { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
  /* icon chip: the app's icon on a field tinted with the accent (DESIGNDIRECTION 9.1) */
  .point-ic, .index-ic {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--color-ink);
    background: color-mix(in srgb, var(--accent, var(--color-lime)) 26%, var(--color-white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--color-lime)) 40%, transparent);
  }
  .point-ic .ic, .index-ic .ic { width: 30px; height: 30px; }

  /* ───────────────────────── The phone ─────────────────────────
     One layer over the hero (and, live, over the feature stage as well). Its grid is the hero's grid, so the
     phone rests in the hero's right column without measuring. The frame is .phone from site.css; here it gets a
     body: twelve copies of its outline stepped back along Z. */
  .go-phone-layer {
    position: relative; z-index: 3; display: grid; overflow: clip; pointer-events: none;
    height: var(--hero-live-h, var(--hero-h)); margin-bottom: calc(-1 * var(--hero-live-h, var(--hero-h)));
  }
  .go-phone-layer > .go-hero-grid { height: 100%; }
  .go-phone {
    position: relative; justify-self: center; align-self: start; width: var(--pw-hero); perspective: 1500px;
    /* phones: it stands on the hero's lower edge, its top third above the bar */
    margin-top: calc(var(--hero-live-h, var(--hero-h)) - var(--floor) - var(--pw-hero));
  }
  .go-top .phone-screen { container-type: size; background: #10151B; }
  .go-phone .phone { --pw: var(--pw-hero); box-shadow: inset 0 0 0 calc(var(--pw) * 0.003) rgb(255 255 255 / 0.10); }
  .go-phone-float, .go-phone-tilt, .phone-depth { transform-style: preserve-3d; }
  .go-phone-tilt { position: relative; transform-origin: 50% 28%; transform: var(--pose); }
  .phone-depth { position: absolute; inset: 0; }
  .phone-depth i {
    position: absolute; inset: 0; border-radius: calc(var(--pw-hero) * 0.17); background: #2b2d30;
    transform: translateZ(calc(var(--pw-hero) * -0.0085 * var(--k)));
  }
  .phone-depth i:nth-child(-n+2), .phone-depth i:nth-child(n+11) { background: #74777c; }   /* the chamfers catch the light */
  .phone-depth i:last-child { box-shadow: 0 calc(var(--pw-hero) * 0.08) calc(var(--pw-hero) * 0.2) rgb(0 0 0 / 0.5), 0 calc(var(--pw-hero) * 0.012) calc(var(--pw-hero) * 0.03) rgb(19 32 26 / 0.18); }
  /* the lane's light behind the phone */
  .go-phone-glow {
    position: absolute; z-index: -1; inset: -18% -70%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(160 224 32 / 0.2), rgb(160 224 32 / 0.06) 48%, transparent 74%);
  }
  /* a strip of light on the glass; it moves with the pointer (app-page.js) */
  .phone-glare { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
  .phone-glare::before {
    content: ""; position: absolute; inset: -20% -70%;
    background: linear-gradient(104deg, transparent 40%, rgb(255 255 255 / 0.12) 47.5%, rgb(255 255 255 / 0.025) 54%, transparent 61%);
    transform: translateX(var(--gx, -16%));
  }
  @media (min-width: 900px) {
    .go-phone { grid-column: 2; align-self: center; margin-top: 2.5rem; }
    .go-phone-tilt { transform-origin: 50% 50%; }
  }

  /* The ride up: from below the fold and half turned away, to the pose. The screen wakes on the way, the arc
     draws and a light crosses the glass. Runs on load; with data-enter="view" it waits for .is-entered. */
  @keyframes phone-up { from { transform: translate3d(10%, 118%, -280px) rotateX(54deg) rotateY(-68deg) rotateZ(30deg); } }
  @keyframes phone-fade { from { opacity: 0; } }
  @keyframes arc-on { from { stroke-dasharray: 0 100; } }
  @keyframes glare-pass { from { transform: translateX(-78%); } }
  .go-phone-tilt { animation: phone-up 1500ms cubic-bezier(0.19, 1.1, 0.3, 1) 160ms backwards; }
  .go-phone-float { animation: phone-fade 380ms linear 160ms backwards; }
  .go-phone-glow { animation: phone-fade 1400ms var(--ease-out) 700ms backwards; }
  .go-phone .gs { animation: phone-fade 700ms var(--ease-out) 760ms backwards; }
  .go-phone .gs-arc { animation: arc-on 1300ms var(--ease-out) 1100ms backwards; }
  .phone-glare::before { animation: glare-pass 1500ms var(--ease-out) 900ms backwards; }
  .go-top[data-enter="view"]:not(.is-entered) :is(.go-phone-tilt, .go-phone-float, .go-phone-glow, .go-phone .gs, .gs-arc, .w, .product, .lede, .install-row),
  .go-top[data-enter="view"]:not(.is-entered) .phone-glare::before { animation-play-state: paused; }

  /* ───────────────────────── Features: stacked (the static page, and every page below 900 px) ───────────────────────── */
  .go-features { position: relative; padding-block: var(--section); background: var(--bg-alt); color: var(--text); }
  .gf-stage { display: grid; gap: var(--space-9) 0; width: 100%; max-width: calc(68rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .gf-panel, .story-dots, .gf-toggle { display: none; }
  .gf-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
  /* the tray: stone, 3:4, as the phone scroll on the start page had it */
  .gf-media {
    container-type: inline-size; display: grid; place-items: center; width: 100%; max-width: 30rem; margin-inline: auto;
    aspect-ratio: 3 / 4; border-radius: var(--radius-media); background: var(--color-stone); overflow: hidden;
  }
  .gf-textwin { display: contents; }
  .gf-text { display: grid; justify-items: start; gap: var(--space-4); }
  .gf-text .body { max-width: 44ch; }
  @media (min-width: 900px) {
    .gf-item { grid-template-columns: minmax(0, 26rem) minmax(0, 30rem); justify-content: center; column-gap: clamp(32px, 6vw, 96px); }
  }

  /* ───────────────────────── Live (assets/app-page.js adds .is-live from 900 px) ─────────────────────────
     The phone layer sticks to the screen through both sections; the phone's own transform carries it from the
     hero to the tray. The feature stage is pinned for --gf-len of scroll. */
  .go-top.is-live .go-phone-layer { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: visible; }
  .go-top.is-live .go-phone { transition: opacity 180ms var(--ease-out); }
  .go-top.is-live.is-docked .go-phone { opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms; }
  .go-top.is-flat .phone-depth, .go-top.is-flat .go-phone-glow { visibility: hidden; }

  .go-top.is-live .go-features { padding-block: 0; height: calc(100svh + var(--gf-len, 290svh)); }
  .go-top.is-live .gf-stage {
    --gf-media: min(60svh, 38vw, 40rem);
    position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; gap: 0;
    grid-template-columns: 44px var(--gf-media) minmax(0, 30rem); justify-content: center; align-items: center; column-gap: clamp(28px, 4.5vw, 88px);
  }
  .go-top.is-live .gf-item { display: contents; }
  .go-top.is-live .gf-panel { display: block; grid-area: 1 / 2; aspect-ratio: 3 / 4; border-radius: var(--radius-media); background: var(--color-stone); }
  /* every feature has its own phone behind the tray's window; scroll slides them through it, one after the other,
     and each copy travels the same distance in a window of its own with soft edges */
  .go-top.is-live .gf-media { grid-area: 1 / 2; max-width: none; background: none; overflow: hidden; overflow: clip; visibility: hidden; }
  .go-top.is-live .gf-media.is-shown { visibility: visible; }
  /* the phone that arrives hands over in place: the first screen is there at once, and stays a moment when the phone lifts off again */
  .go-top.is-live .gf-media.is-first { transition: visibility 0s linear 200ms; }
  .go-top.is-live .gf-media.is-first.is-shown { transition: none; }
  .go-top.is-live .gf-textwin {
    grid-area: 1 / 3; display: flex; align-items: center; height: calc(var(--gf-media) * 4 / 3); overflow: hidden; overflow: clip;
    padding-inline: 6px; margin-inline-start: -6px; pointer-events: none;
    -webkit-mask-image: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .go-top.is-live .gf-text { width: 100%; opacity: 0; }
  .go-top.is-live .gf-text .h3 { font-size: clamp(2.5rem, 1rem + 3.1vw, 4.25rem); line-height: 0.9; }

  /* dots: where you are, and a way to jump */
  .go-top.is-live .story-dots { grid-area: 1 / 1; display: flex; flex-direction: column; }
  .story-dots button { display: grid; place-items: center; width: 44px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .story-dots button::before {
    content: ""; width: 8px; height: 24px; border-radius: 999px; background: var(--color-mist); transform: scaleY(0.34);
    transition: transform var(--duration-nav) var(--ease-out), background-color var(--duration-hover) var(--ease-hover);
  }
  .story-dots button[aria-current="true"]::before { background: var(--color-ink); transform: none; }
  @media (hover: hover) and (pointer: fine) { .story-dots button:not([aria-current="true"]):hover::before { background: var(--color-ink-3); } }
  /* the screens loop for longer than 5 s, so they get a pause button (DESIGNDIRECTION 11) */
  .go-top.is-live .gf-toggle:not([hidden]) {
    display: inline-grid; grid-area: 1 / 2; position: relative; right: auto; bottom: auto; align-self: end; justify-self: end;
    margin: 0 12px calc((100svh - var(--gf-media) * 4 / 3) / 2 + 12px) 0;   /* the tray's lower right corner */
  }

  /* ───────────────────────── GO screens: HTML in the app's own look ─────────────────────────
     After the Figma file "Aimlink GO AI Design System" (Mobile UX/UI Screens). 1cqw = 1 % of the screen's width;
     the screen is 216.6cqw tall. Demo data: Sofie Krag's series from the start page (75.0, average 9.38). */
  .gs {
    --app-bg: #10151B; --app-card: #1C2229; --app-tile: #2F363E; --app-text: #F4F6F8; --app-muted: #9299A1;
    --app-lime: var(--color-lime); --app-paper: var(--color-cream); --app-ink: #1D2420;
    --st: var(--app-text); --st-inv: var(--app-bg);
    position: absolute; inset: 0; overflow: hidden; font: 400 3.5cqw/1.3 var(--font-text); color: var(--app-text); background: var(--app-bg);
  }
  .gs .ui-ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .gs-status { display: flex; align-items: center; justify-content: space-between; height: 12.4cqw; padding: 2.4cqw 6.5cqw 0 9cqw; font-size: 3.8cqw; font-weight: 600; color: var(--st); }
  .gs-status-r { display: flex; align-items: center; gap: 1.4cqw; }
  .gs-sig { width: 4.6cqw; height: 3.1cqw; fill: currentColor; }
  .gs-status-r .ui-ic { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.4; }
  .gs-bat { display: inline-grid; place-items: center; min-width: 6.4cqw; height: 3.7cqw; padding: 0 0.7cqw; border-radius: 1.2cqw; background: var(--st); color: var(--st-inv); font-size: 2.6cqw; line-height: 1; }
  .gs-user { display: flex; align-items: center; justify-content: flex-end; gap: 2.6cqw; padding: 1.6cqw 5cqw 0; font-size: 3.7cqw; }
  .gs-av, .gs-post-av { display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; flex: none; border-radius: 50%; padding-top: 0.5cqw; background: var(--app-lime); color: var(--app-bg); font: 500 5cqw/1 var(--font-numeric); }
  .gs-title { margin-top: 3cqw; text-align: center; font: 500 6.2cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .gs-h { display: flex; align-items: center; justify-content: space-between; margin-top: 5.4cqw; padding: 0 4.5cqw; font: 500 5.4cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .gs-h-c { justify-content: center; }
  .gs-h .ic { width: 8cqw; height: 8cqw; margin: -1.5cqw; color: var(--app-muted); }
  .gs-k { font-size: 2.6cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
  .gs-k-c { text-align: center; }
  .gs-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 19cqw; padding: 2.6cqw 1cqw 0; border-radius: 6cqw 6cqw 0 0; background: #3a4148; }
  .gs-tabs span { display: grid; justify-items: center; align-content: start; gap: 1cqw; font-size: 2.3cqw; white-space: nowrap; }
  .gs-tabs .ic { width: 10cqw; height: 10cqw; margin: -2cqw; }
  .gs-tabs .ui-ic { width: 6.4cqw; height: 6.4cqw; stroke-width: 1.5; }
  .gs-tabs .is-on { color: var(--app-lime); }

  /* Main: Performance */
  .gs-gauge { position: relative; width: 56cqw; aspect-ratio: 1; margin: 3cqw auto -7.5cqw; }
  .gs-gauge svg { width: 100%; height: 100%; overflow: visible; }
  .gs-track, .gs-arc { fill: none; stroke-width: 8.5; stroke-linecap: round; transform: rotate(135deg); }
  .gs-track { stroke: #353c42; stroke-dasharray: 75 100; }
  .gs-arc { stroke: var(--app-lime); stroke-dasharray: 64.5 100; }
  .gs-avg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding-top: 2cqw; }
  .gs-avg b { font: 500 17cqw/0.8 var(--font-numeric); color: var(--app-lime); text-shadow: 0 0 5cqw rgb(160 224 32 / 0.35); font-variant-numeric: tabular-nums; }
  .gs-avg b small { font-size: 55%; }
  .gs-avg span { margin-top: 2.2cqw; font-size: 3.7cqw; }
  .gs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding: 0 2cqw; }
  .gs-tiles p { display: grid; justify-items: center; gap: 1.8cqw; padding: 3.4cqw 0 2.8cqw; border-radius: 4.6cqw; background: var(--app-tile); }
  .gs-tiles span { font-size: 2.6cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--app-muted); }
  .gs-tiles b { font: 500 8.6cqw/0.85 var(--font-numeric); color: var(--app-lime); font-variant-numeric: tabular-nums; }
  .gs-post { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw; margin: 3cqw 2cqw 0; padding: 3.2cqw 4cqw 3.2cqw 3.2cqw; border-radius: 7cqw; background: #f6f7f9; color: var(--app-bg); }
  .gs-post-ic { display: grid; place-items: center; width: 9cqw; height: 9cqw; }
  .gs-post-ic img { width: 100%; height: 100%; }
  .gs-post .gs-post-av { width: 9cqw; height: 9cqw; }
  .gs-post p { font-size: 2.9cqw; line-height: 1.25; }
  .gs-post b { display: block; font-size: 3.4cqw; font-weight: 600; }
  .gs-like { display: flex; align-items: center; gap: 1cqw; font-weight: 600; }
  .gs-like .ic { width: 8.4cqw; height: 8.4cqw; margin: -1.7cqw; }
  .gs-connect { margin: 4cqw 2cqw 0; padding: 4.4cqw 4cqw 4cqw; border-radius: 6cqw; background: var(--app-card); text-align: center; }
  .gs-connect .gs-h { margin-top: 0; }
  .gs-pill { display: grid; place-items: center; height: 10.5cqw; margin-top: 3.4cqw; padding-top: 0.4cqw; border-radius: 999px; background: var(--app-lime); color: var(--color-moss); font: 600 4.6cqw/1 var(--font-numeric); letter-spacing: 0.08em; text-transform: uppercase; }
  .gs-note { margin-top: 2.4cqw; font-size: 3cqw; color: var(--app-muted); }

  /* Your targets */
  .gs-card { position: relative; width: 62cqw; margin: 4cqw auto 0; padding: 4cqw 4cqw 3.4cqw; border-radius: 7cqw; background: var(--app-paper); color: var(--app-ink); text-align: center; }
  .gs-target { display: block; width: 100%; height: auto; overflow: visible; }
  .gs-target .l { fill: none; stroke: var(--app-ink); stroke-width: 0.5; }
  .gs-target .k { fill: #14161A; }
  .gs-target .d { fill: none; stroke: #D9D2BC; stroke-width: 0.5; }
  .gs-shot { fill: var(--color-orange-deep); stroke: #14161A; stroke-width: 0.5; transform-box: fill-box; transform-origin: center; }
  .gs-group { fill: none; stroke: var(--app-lime); stroke-width: 1; }
  .gs-live { position: absolute; z-index: 1; top: 3cqw; left: 3cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0.9cqw 2.4cqw 0.7cqw 2cqw; border-radius: 999px; background: var(--app-bg); color: var(--app-text); font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .gs-live i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--app-lime); }
  .gs-card-k { margin-top: 2.4cqw; font: 500 4.4cqw/1 var(--font-numeric); }
  .gs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; margin-top: 2.6cqw; }
  .gs-stats p { display: grid; justify-items: center; gap: 0.8cqw; padding: 2.2cqw 0 1.8cqw; border-radius: 3cqw; background: rgb(255 255 255 / 0.55); }
  .gs-stats b { font: 500 5.6cqw/0.9 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .gs-stats b small { font-size: 62%; }
  .gs-stats span { font-size: 2.3cqw; color: #5B5F57; }
  .gs-add { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2cqw; height: 44cqw; margin: 3cqw 2cqw 0; }
  .gs-add p { position: relative; overflow: hidden; padding: 3.6cqw; border-radius: 6cqw; background: var(--app-card); font: 500 5cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .gs-add-big { grid-row: 1 / 3; }
  .gs-add-big::before {
    /* the app's rings, drawn with ring shadows */
    content: ""; position: absolute; left: -15cqw; bottom: -11cqw; width: 44cqw; aspect-ratio: 1; border-radius: 50%;
    box-shadow: inset 0 0 0 0.5cqw rgb(160 224 32 / 0.3), inset 0 0 0 6.5cqw var(--app-card), inset 0 0 0 7cqw rgb(160 224 32 / 0.55), inset 0 0 0 13cqw var(--app-card), inset 0 0 0 13.6cqw var(--app-lime);
  }
  .gs-go { position: absolute; right: 3cqw; bottom: 3cqw; display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 50%; background: var(--app-lime); color: var(--color-moss); }
  .gs-go .ic { width: 8cqw; height: 8cqw; }

  /* Target overlay: paper above, a sheet below (Details and Score trend) */
  .gs-sheeted { background: var(--app-paper); }
  .gs-paper { --st: var(--app-ink); --st-inv: var(--app-paper); position: relative; height: 110cqw; color: var(--app-ink); }
  .gs-paper .gs-target { width: 76cqw; margin: 1cqw auto 0; }
  .gs-ctrl { position: absolute; left: 4cqw; right: 4cqw; bottom: 3cqw; display: flex; align-items: center; gap: 2cqw; }
  .gs-ctrl span { display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: #5D646B; color: #fff; }
  .gs-ctrl .ic { width: 7cqw; height: 7cqw; }
  .gs-ctrl b { margin-left: auto; padding: 1.3cqw 2.4cqw 0.9cqw; border-radius: 999px; background: #fff; color: var(--app-ink); font: 500 4cqw/1 var(--font-numeric); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  .gs-ctrl .is-lime { background: var(--app-lime); color: var(--color-moss); }
  .gs-sheet { position: absolute; left: 0; right: 0; top: 110cqw; bottom: 0; padding: 4cqw 2.4cqw 0; border-radius: 7cqw 7cqw 0 0; background: var(--app-card); }
  .gs-sheet-tabs { display: flex; justify-content: center; gap: 5cqw; font-size: 3.4cqw; font-weight: 600; color: var(--app-muted); }
  .gs-sheet-tabs b { font-weight: 600; color: var(--app-text); }
  .gs-sheet .gs-k { margin: 4cqw 2cqw 2cqw; }
  .gs-rows { display: grid; gap: 1.6cqw; }
  .gs-rows li { display: flex; align-items: center; gap: 2cqw; min-height: 9.6cqw; padding: 0 3.4cqw; border-radius: 3cqw; background: var(--app-tile); font-size: 3.3cqw; }
  .gs-rows b { margin-left: auto; font-weight: 500; text-align: right; }
  .gs-rows i {
    width: 6cqw; height: 6cqw; flex: none; margin-right: -1.4cqw; border-radius: 50%;
    background:
      linear-gradient(var(--color-moss), var(--color-moss)) center / 50% 0.6cqw no-repeat,
      linear-gradient(var(--color-moss), var(--color-moss)) center / 0.6cqw 50% no-repeat,
      var(--app-lime);
  }
  .gs-chart { position: relative; margin: 0 2cqw; padding: 2cqw; border-radius: 4cqw; background: var(--app-tile); }
  .gs-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .gs-axis { stroke: #5D646B; stroke-width: 0.4; }
  .gs-mean { stroke: var(--app-lime); stroke-width: 0.4; stroke-dasharray: 1.6 1.6; }
  .gs-line { fill: none; stroke: var(--app-lime); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
  .gs-dot { fill: var(--color-orange-deep); }
  .gs-y { position: absolute; left: 2.8cqw; font-size: 2.2cqw; line-height: 1; color: var(--app-muted); }
  .gs-y.is-mean { color: var(--app-lime); }
  .gs-chips { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1cqw; margin: 3cqw 2cqw 0; }
  .gs-chips li { display: grid; justify-items: center; gap: 1cqw; padding: 1.6cqw 0 1.2cqw; border-radius: 2.6cqw; background: var(--app-tile); font-size: 2.6cqw; color: var(--app-muted); }
  .gs-chips b { display: grid; place-items: center; width: 8.6cqw; height: 6cqw; padding-top: 0.3cqw; border-radius: 999px; background: #f6f7f9; color: var(--app-bg); font: 500 3.6cqw/1 var(--font-numeric); font-variant-numeric: tabular-nums; }

  /* Feed and a competition */
  .gs-comp { margin: 4cqw 2cqw 0; padding: 4cqw 3cqw 0; border-radius: 6cqw; background: linear-gradient(180deg, #3A5A10 0%, var(--app-card) 36%); text-align: center; }
  .gs-badge { display: inline-block; padding: 0.9cqw 2.6cqw 0.7cqw; border-radius: 999px; background: var(--app-lime); color: var(--color-moss); font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .gs-comp-t { margin-top: 2.6cqw; font: 500 6cqw/1 var(--font-numeric); }
  .gs-comp-k { margin-top: 4cqw; font: 500 4.6cqw/1 var(--font-numeric); color: var(--app-muted); }
  .gs-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 2cqw; height: 58cqw; margin-top: 3cqw; }
  .gs-podium li { display: grid; align-content: start; justify-items: center; gap: 1.6cqw; padding: 3cqw 1cqw 0; border-radius: 4cqw 4cqw 0 0; transform-origin: 50% 100%; }
  .gs-podium .is-1 { height: 100%; background: linear-gradient(180deg, #C9A400, #6B5600 60%, #3D3200); }
  .gs-podium .is-2 { height: 84%; background: linear-gradient(180deg, #9AA3AD, #4D555D 60%, #30363C); }
  .gs-podium .is-3 { height: 70%; background: linear-gradient(180deg, #B0623A, #5E3520 60%, #3A2216); }
  .gs-podium i { display: grid; place-items: center; width: 8cqw; height: 8cqw; padding-top: 0.4cqw; border-radius: 50%; background: rgb(0 0 0 / 0.35); font: 500 4.6cqw/1 var(--font-numeric); font-style: normal; }
  .gs-podium span { font: 500 3.8cqw/1.05 var(--font-numeric); }
  .gs-podium b { font: 500 7cqw/0.9 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .gs-podium b small { font-size: 60%; }

  /* Parts that switch on at a point in their clip (data-at; app-page.js runs the clock and adds .is-timed).
     Without it every screen shows its finished state. */
  .is-timed .gs-shot[data-at] { opacity: 0; transform: scale(2.4); transition: opacity 120ms linear, transform 260ms var(--ease-out); }
  .is-timed .gs-shot[data-at].is-on { opacity: 1; transform: none; }
  .is-timed .gs-live, .is-timed .gs-post[data-at], .is-timed .gs-comp {
    opacity: 0; transform: translateY(3cqw); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  }
  .is-timed .gs-live.is-on, .is-timed .gs-post[data-at].is-on, .is-timed .gs-comp.is-on { opacity: 1; transform: none; }
  .is-timed .gs-rows li[data-at] .gs-fill { opacity: 0; transform: translateX(2cqw); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
  .is-timed .gs-rows li[data-at].is-on .gs-fill { opacity: 1; transform: none; }
  .is-timed .gs-dot, .is-timed .gs-chips li, .is-timed .gs-mean, .is-timed .gs-y.is-mean, .is-timed .gs-group { opacity: 0; transition: opacity 240ms var(--ease-out); }
  .is-timed .gs-dot.is-on, .is-timed .gs-chips li.is-on, .is-timed .gs-mean.is-on, .is-timed .gs-y.is-mean.is-on, .is-timed .gs-group.is-on { opacity: 1; }
  .is-timed .gs-podium li { opacity: 0; transform: scaleY(0.9); transition: opacity 240ms var(--ease-out), transform 500ms var(--ease-out); }
  .is-timed .gs-podium li.is-on { opacity: 1; transform: none; }
  .is-timed .gs-like-live { transition: color 240ms var(--ease-hover); }
  .is-timed .gs-like-live.is-on { color: var(--color-fern); }

  /* ───────────────────────── Read the series: the target in 3D ─────────────────────────
     A dark section, so lime carries. The target stands upright at an angle, as the phone does in the hero: a card
     with a body, the shots on the paper and three layers floating in front of it, one per number. 1cqw = 1 % of
     the figure's width. Everything below is the finished view; .is-armed (app-page.js) winds it back and .is-in
     plays it once. */
  .app-rest {
    padding-block: var(--section); overflow-x: clip; color: var(--text);
    background: linear-gradient(180deg, var(--color-night) 0%, var(--color-dusk) 50%, var(--color-night) 100%);
  }
  .rest-grid { display: grid; gap: var(--space-8) var(--grid-gap); align-items: center; }
  .rest-copy { display: grid; gap: var(--space-5); }
  .rest-stats { display: grid; gap: var(--space-5); margin-top: var(--space-3); }
  .rest-stats > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: var(--space-1) var(--space-5); align-items: baseline; padding-top: var(--space-4); border-top: var(--line-hairline) solid var(--line); }
  .rest-stats dt {
    grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--type-label-size); line-height: var(--type-label-leading); font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-subtle);
  }
  /* the key matches the layer on the target */
  .rest-key { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; }
  .rest-num { font: 500 var(--type-numeric-m-size)/var(--type-numeric-m-leading) var(--font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rest-num small { font-size: 55%; }
  .rest-note { color: var(--text-muted); max-width: 36ch; text-wrap: pretty; }
  .app-rest .demo-note { font-size: var(--type-small-size); color: var(--text-subtle); }
  @media (max-width: 599.98px) { .rest-stats > div { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 900px) {
    .rest-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 7rem); }
  }

  .rest-target { container-type: inline-size; position: relative; isolation: isolate; margin: 0; width: 100%; max-width: 40rem; margin-inline: auto; aspect-ratio: 1; }
  /* the lane's light behind the card */
  .rest-target::before {
    content: ""; position: absolute; z-index: -1; inset: -24%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(160 224 32 / 0.17), rgb(160 224 32 / 0.05) 50%, transparent 74%);
  }
  .r3d { position: absolute; inset: 0; perspective: 170cqw; perspective-origin: 50% 46%; }
  .r3d-tilt {
    --rx: 8deg; --ry: -27deg; --rz: 5deg; --step: 7cqw; --w: 108cqw;   /* the same angles are in app-page.js; the card is a little wider than its column */
    position: absolute; left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) / 2); width: var(--w); aspect-ratio: 1;
    transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  }
  .r3d-disc, .r3d-shots, .r3d-layer { position: absolute; inset: 0; transform-style: preserve-3d; }
  .r3d-disc .target { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .r3d-disc .t-paper { fill: #EEF1F4; }
  /* the card's body: its outline stepped back along Z, with the shadow on the last one */
  .r3d-disc i { position: absolute; inset: 1.4%; border-radius: 50%; background: #b9c0c7; transform: translateZ(calc(var(--k) * -0.28cqw)); }
  .r3d-disc i:last-of-type { background: #7f8891; box-shadow: 0 3cqw 9cqw rgb(0 0 0 / 0.55); }
  /* light falls off across the paper */
  .r3d-disc::after {
    content: ""; position: absolute; inset: 1.4%; border-radius: 50%; pointer-events: none; transform: translateZ(0.05cqw);
    background: linear-gradient(112deg, transparent 38%, rgb(12 20 28 / 0.2) 100%);
  }
  .r3d-shots i {
    position: absolute; left: var(--x); top: var(--y); width: 2.9%; aspect-ratio: 1; margin: -1.45% 0 0 -1.45%;
    border-radius: 50%; background: var(--color-shot-on-black); box-shadow: inset 0 0 0 0.22cqw rgb(12 20 28 / 0.28); transform: translateZ(0.3cqw);
  }
  .r3d-shots i::after { content: ""; position: absolute; inset: -90%; border-radius: 50%; border: 1px solid var(--color-snow); opacity: 0; }
  .r3d-layer { transform: translateZ(calc(var(--z) * var(--step))); }
  .r3d-layer svg, .r3d-foot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  /* what each layer stands over, drawn faintly on the paper */
  .r3d-foot { fill: none; stroke: var(--color-lime); stroke-width: 0.3; opacity: 0.3; transform: translateZ(0.3cqw); }
  .r3d-foot .is-dash { stroke-dasharray: 1.5 1.3; }
  /* each ring is a thin sheet of light, so its distance from the paper reads */
  .r3d-ring { fill: rgb(160 224 32 / 0.1); stroke: var(--color-lime); stroke-width: 0.5; }
  .r3d-ring[pathLength] { stroke-dasharray: 100; stroke-dashoffset: 0; }
  .r3d-ring-dash { stroke-dasharray: 1.5 1.3; }
  .r3d-dash { stroke: var(--color-lime); stroke-width: 0.45; stroke-dasharray: 1.1 1.1; }
  .r3d-line { stroke: var(--color-lime); stroke-width: 0.7; stroke-linecap: round; }
  .r3d-cross { fill: none; stroke: var(--color-lime); stroke-width: 0.8; stroke-linecap: round; }
  .r3d-node { fill: var(--color-lime); }
  .r3d-lead { stroke: var(--color-lime); stroke-width: 0.3; stroke-linecap: round; }   /* from a tag back to what it names; kept inside the black */
  /* a pin runs from the layer back to the paper: two crossed strips lying on the Z axis */
  .r3d-pin, .r3d-pin::after { background: linear-gradient(rgb(160 224 32 / 0.95), rgb(160 224 32 / 0.25)); }
  .r3d-pin {
    position: absolute; left: var(--x); top: var(--y); width: 3px; margin-left: -1.5px; height: calc(var(--z) * var(--step));
    transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(-90deg);
  }
  .r3d-pin::after { content: ""; position: absolute; inset: 0; transform: rotateY(90deg); }
  /* the number faces the viewer: the tilt, undone */
  .r3d-tag {
    position: absolute; left: var(--x); top: var(--y); padding: 0.42em 0.72em 0.26em; border-radius: 999px;
    background: var(--color-lime); color: var(--color-moss); font: 500 clamp(0.8125rem, 3.1cqw, 1.1875rem)/1 var(--font-numeric);
    letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgb(48 72 8 / 0.3), 0 0.5cqw 1.6cqw rgb(0 0 0 / 0.3);
    transform: translate(-50%, -50%) rotateZ(calc(var(--rz) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1));
  }
  .r3d-tag b { font-weight: 500; font-size: 1.22em; }

  /* a number on the left lifts its layer (data-focus is set by app-page.js) */
  .rest-target[data-focus] .r3d-layer { opacity: 0.22; }
  .rest-target[data-focus="group"] .r3d-layer[data-layer="group"],
  .rest-target[data-focus="avg"] .r3d-layer[data-layer="avg"],
  .rest-target[data-focus="tend"] .r3d-layer[data-layer="tend"] { opacity: 1; transform: translateZ(calc(var(--z) * var(--step) + 3cqw)); }
  .app-rest:not(.is-armed) .r3d-layer, .app-rest.is-done .r3d-layer { transition: transform 360ms var(--ease-out), opacity 240ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .rest-stats > div { cursor: default; transition: border-color var(--duration-hover) var(--ease-hover); }
    .rest-stats > div:hover { border-top-color: var(--text); }
  }

  /* played once when it scrolls in: the card swings up into its angle as the phone does, eight shots land, the
     layers lift one by one */
  .app-rest.is-armed.is-in .r3d-tilt { transition: transform 1500ms cubic-bezier(0.19, 1.1, 0.3, 1), opacity 420ms linear; }
  .app-rest.is-armed.is-done .r3d-tilt { transition: none; }
  .app-rest.is-armed:not(.is-in) .r3d-tilt { opacity: 0; transform: translate3d(8%, 70%, -40cqw) rotateX(52deg) rotateY(-74deg) rotateZ(28deg); }
  .app-rest.is-armed.is-in .rest-target::before { transition: opacity 1400ms var(--ease-out) 500ms; }
  .app-rest.is-armed:not(.is-in) .rest-target::before { opacity: 0; }
  .app-rest.is-armed.is-in .r3d-shots i { transition: transform 420ms cubic-bezier(0.5, 0, 0.9, 0.45) calc(1000ms + var(--i) * 120ms), opacity 140ms linear calc(1000ms + var(--i) * 120ms); }
  .app-rest.is-armed:not(.is-in) .r3d-shots i { opacity: 0; transform: translateZ(44cqw) scale(1.5); }
  @keyframes shot-hit { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }
  .app-rest.is-armed.is-in:not(.is-done) .r3d-shots i::after { animation: shot-hit 520ms var(--ease-out) calc(1390ms + var(--i) * 120ms) both; }
  .app-rest.is-armed .r3d-layer { --d: calc(2200ms + (var(--z) - 1) * 700ms); }
  .app-rest.is-armed.is-in:not(.is-done) .r3d-layer { transition: transform 900ms var(--ease-out) var(--d), opacity 400ms var(--ease-out) var(--d); }
  .app-rest.is-armed:not(.is-in) .r3d-layer { opacity: 0; transform: translateZ(0.3cqw); }
  .app-rest.is-armed.is-in .r3d-ring[pathLength] { transition: stroke-dashoffset 900ms var(--ease-out) calc(var(--d) + 200ms); }
  .app-rest.is-armed:not(.is-in) .r3d-ring[pathLength] { stroke-dashoffset: 100; }
  .app-rest.is-armed.is-in .r3d-pin { transition: transform 800ms var(--ease-out) calc(var(--d) + 100ms); }
  .app-rest.is-armed:not(.is-in) .r3d-pin { transform: rotateX(-90deg) scaleY(0); }
  .app-rest.is-armed.is-in .r3d-tag { transition: opacity 360ms var(--ease-out) calc(var(--d) + 520ms); }
  .app-rest.is-armed:not(.is-in) .r3d-tag { opacity: 0; }
  .app-rest.is-armed.is-in .r3d-foot { transition: opacity 500ms var(--ease-out) 2200ms; }
  .app-rest.is-armed:not(.is-in) .r3d-foot { opacity: 0; }

  /* ───────────────────────── Everything in GO: grouped lists, no tiles ───────────────────────── */
  .app-index { padding-block: var(--section); background: var(--bg); }
  .app-index .h2 { margin-bottom: var(--space-8); }
  .index-grid { display: grid; gap: var(--space-8) var(--grid-gap); }
  .index-h { padding-bottom: var(--space-3); border-bottom: var(--line-hairline) solid var(--line); font: 500 1.75rem/1 var(--font-numeric); letter-spacing: 0.01em; text-transform: uppercase; }
  .index-group ul { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
  .index-group li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .index-group p { color: var(--text-muted); font-size: var(--type-small-size); line-height: 1.45; text-wrap: pretty; }
  .index-group b { display: block; margin-bottom: 2px; color: var(--text); font: 600 1.0625rem/1.3 var(--font-text); }
  @media (min-width: 640px) { .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1180px) { .index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .go-hero .w, .go-hero .product, .go-hero .lede, .go-hero .install-row,
    .go-phone-tilt, .go-phone-float, .go-phone-glow, .go-phone .gs, .go-phone .gs-arc, .phone-glare::before { animation: none; }
    .backdrop-video { display: none; }
  }
}