/* Start page: the three-device scene (index.html, .showcase). Moved here from devices.html.
   Three devices: GO on a phone, CLUB on a laptop, TARGET on a tablet (a take on hustla.app's device scene).
   Pick a device and the camera moves in: it grows to its side, the others step back, its text arrives.
   Every position is in cqw of .sc-frame (the stage has a fixed aspect), so the scene scales as one.
   Devices are sized at their focus size and scaled down for the overview, so screens stay sharp.
   Only translate, scale and opacity move. */
@layer sections {
  .showcase {
    /* Colours inside the app screens only (taken from the GO recordings) */
    --app-bg: #10151B;
    --app-card: #1C2229;
    --app-tile: #2F363E;
    --app-line: #283038;
    --app-text: #F4F6F8;
    --app-muted: #9299A1;
    --app-lime: var(--color-lime);
    --move: 720ms;
    display: grid; place-items: center;
    min-height: 100svh;
    padding-block: var(--space-8) var(--space-9);
    background: var(--bg-alt);
    overflow-x: clip;
    --sheet-r: calc(var(--radius-nav) * 1.5);   /* the rounded top of a page that slides over another (the film's ending page has the same, film.css) */
  }
  .sc-frame { position: relative; display: grid; width: min(100%, 40rem); container-type: inline-size; }
  /* Arriving: after the start page's film (index.html, while it runs live) the scene is the page that ends it. It
     is pulled up by one screen, so it slides over the film's last stage, which stays pinned underneath and steps
     back (film.css gives the film that extra screen, film.js dims the stage). The one change from dark to light
     on the page, so the edge is plain: the sheet's rounded top and the shadow it throws on the night. */
  .film.is-live + .showcase {
    position: relative; z-index: 1; margin-top: -100svh; border-radius: var(--sheet-r) var(--sheet-r) 0 0;
    box-shadow: inset 0 1px 0 var(--color-white), 0 -30px 90px -10px rgb(4 7 10 / 0.7);
  }
  /* The devices come to rest as their page arrives: a little low and small at first, in place when the page fills
     the screen. Scroll-driven, transform only; without support they simply ride the page. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .film.is-live + .showcase { view-timeline: --sc-page block; }
      .film.is-live + .showcase .sc-stage { transform-origin: 50% 45%; animation: sc-arrive linear both; animation-timeline: --sc-page; animation-range: entry 0% entry 100%; }
    }
  }
  @keyframes sc-arrive { from { transform: translateY(9%) scale(0.94); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } }

  /* ── Head ── */
  .sc-head {
    position: relative; z-index: 2; grid-row: 1; grid-column: 1;
    display: grid; justify-items: center; gap: var(--space-4);
    padding-inline: var(--gutter); margin-bottom: var(--space-5); text-align: center;
  }
  .sc-head .lede { margin-inline: auto; max-width: 44ch; }

  /* ── Stage ── */
  .sc-stage { position: relative; grid-row: 2; grid-column: 1; aspect-ratio: 25 / 27; overflow: hidden; isolation: isolate; }
  /* Studio light behind the devices */
  .sc-stage::before {
    content: ""; position: absolute; left: 50%; top: 54%; z-index: -1; width: 130cqw; height: 92cqw; translate: -50% -50%; pointer-events: none;
    background: radial-gradient(closest-side, var(--color-white) 0%, color-mix(in srgb, var(--color-white) 55%, transparent) 52%, transparent 100%);
  }
  /* Hairline rings: the focused device becomes the centre of the target */
  .sc-rings {
    position: absolute; left: 0; top: 0; z-index: 0; width: 150cqw; height: auto; aspect-ratio: 1; max-width: none; pointer-events: none;
    translate: calc(var(--rx) * 1cqw - 50%) calc(var(--ry) * 1cqw - 50%);
    transition: translate var(--move) var(--ease-out);
  }
  .sc-rings circle { fill: none; stroke: color-mix(in srgb, var(--color-lime) 26%, var(--line)); stroke-width: 1; vector-effect: non-scaling-stroke; }
  /* Narrow: the stage clips, so the rings fade out before they reach its edges */
  .sc-rings { -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 66%); mask-image: radial-gradient(closest-side, #000 38%, transparent 66%); }

  /* ── Devices: one wrapper per device, placed by its centre ── */
  .dev {
    position: absolute; left: 0; top: 0; z-index: 2;
    translate: calc(var(--x) * 1cqw - 50%) calc(var(--y) * 1cqw - 50%);
    scale: var(--s);
    transition:
      translate var(--move) var(--ease-out),
      scale var(--move) var(--ease-out),
      opacity 360ms var(--ease-out),
      transform 240ms var(--ease-out),
      visibility 0s;
  }
  .dev-club { z-index: 1; }
  [data-focus="go"] .dev-go, [data-focus="club"] .dev-club, [data-focus="target"] .dev-target { z-index: 3; }
  /* The others step back and out of focus */
  [data-focus="go"] .dev:not(.dev-go),
  [data-focus="club"] .dev:not(.dev-club),
  [data-focus="target"] .dev:not(.dev-target) {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition:
      translate var(--move) var(--ease-out),
      scale var(--move) var(--ease-out),
      opacity 280ms var(--ease-out),
      transform 240ms var(--ease-out),
      visibility 0s linear 280ms;
  }
  /* The whole device is the button; the visual inside is decorative */
  .dev-hit {
    position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; border: 0; border-radius: inherit;
    background: transparent; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
  }
  .dev-hit[aria-expanded="true"] { cursor: zoom-out; }
  /* The ring is drawn before the scale; browsers round outline widths down, so aim a little high to land at 2 px or more */
  .dev-hit:focus-visible { outline: calc(2.6px / var(--s)) solid var(--focus); outline-offset: calc(6px / var(--s)); }
  /* Contact shadow on the floor; it lifts away when the device comes forward */
  .dev-shadow {
    position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(19 32 26 / 0.3), rgb(19 32 26 / 0));
    transition: opacity 300ms var(--ease-out);
  }
  .sc-frame:not([data-focus="none"]) .dev-shadow { opacity: 0; }
  @media (hover: hover) and (pointer: fine) {
    [data-focus="none"] .dev:hover { transform: translateY(calc(-0.7cqw / var(--s))); }
  }

  /* Phone: the site's iPhone frame (site.css .phone) at our size */
  .dev-go { --pw: 44cqw; border-radius: calc(var(--pw) * 0.17); }
  .dev-go .phone { --pw: inherit; }
  .dev-go .dev-shadow { left: 6%; right: 6%; height: calc(var(--pw) * 0.1); bottom: calc(var(--pw) * -0.05); }

  /* Laptop: lid, hinge, then the deck in real perspective */
  .dev-club { --mw: 80cqw; border-radius: calc(var(--mw) * 0.032) calc(var(--mw) * 0.032) 0 0; }
  .dev-club .dev-hit { bottom: calc(var(--mw) * -0.171); }
  .mac { position: relative; width: var(--mw); }
  .mac-lid {
    position: relative; padding: calc(var(--mw) * 0.0045);
    border-radius: calc(var(--mw) * 0.032) calc(var(--mw) * 0.032) calc(var(--mw) * 0.007) calc(var(--mw) * 0.007);
    background: linear-gradient(180deg, #5d636a 0%, #34383d 2.5%, #25282c 55%, #1d2023 100%);
    box-shadow:
      0 calc(var(--mw) * 0.035) calc(var(--mw) * 0.08) rgb(19 32 26 / 0.2),
      inset 0 0 0 calc(var(--mw) * 0.0012) rgb(255 255 255 / 0.1);
  }
  .mac-bezel {
    padding: calc(var(--mw) * 0.0185) calc(var(--mw) * 0.0185) calc(var(--mw) * 0.032);
    border-radius: calc(var(--mw) * 0.028) calc(var(--mw) * 0.028) calc(var(--mw) * 0.004) calc(var(--mw) * 0.004);
    background: #050607;
  }
  .mac-screen { position: relative; aspect-ratio: 1.54; overflow: hidden; border-radius: calc(var(--mw) * 0.006); background: var(--app-bg); container-type: size; }
  .mac-notch { position: absolute; left: 50%; top: 0; z-index: 4; width: 10.5%; height: 3.7%; translate: -50% 0; border-radius: 0 0 1cqw 1cqw; background: #050607; }
  .mac-hinge {
    width: 86%; height: calc(var(--mw) * 0.012); margin-inline: auto;
    border-radius: 0 0 calc(var(--mw) * 0.01) calc(var(--mw) * 0.01);
    background: linear-gradient(180deg, #07080a 0%, #1d2023 100%);
  }
  /* perspective(4 × width) rotateX(80deg): the front edge lands 0.1487 × width below the hinge, 1.2108 × as wide */
  .mac-deck {
    position: absolute; left: 0; top: 100%; width: 100%; aspect-ratio: 304 / 215;
    transform-origin: 50% 0; transform: perspective(calc(var(--mw) * 4)) rotateX(80deg);
    border-radius: 0 0 calc(var(--mw) * 0.03) calc(var(--mw) * 0.03);
    background: linear-gradient(180deg, #2a2e33 0%, #3a3f45 55%, #4d535a 100%);
  }
  .mac-keys {
    position: absolute; left: 6%; right: 6%; top: 5%; height: 42%; border-radius: 1.2% / 2%;
    background-color: #0b0d0f;
    background-image: linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 3%, transparent 3%), linear-gradient(rgb(255 255 255 / 0.09) 0 6%, transparent 6%);
    background-size: calc(100% / 14) 100%, 100% calc(100% / 6);
  }
  .mac-pad { position: absolute; left: 31%; right: 31%; top: 55%; height: 38%; border-radius: 2.5% / 4%; background: linear-gradient(180deg, #32363b, #3f444a); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35); }
  .mac-lip {
    position: absolute; left: 50%; top: calc(100% + var(--mw) * 0.1487 - 1px); width: calc(var(--mw) * 1.2108); height: calc(var(--mw) * 0.022);
    translate: -50% 0; border-radius: calc(var(--mw) * 0.03) / calc(var(--mw) * 0.012);
    background: linear-gradient(180deg, #6f757c 0%, #3d4247 40%, #202327 100%);
  }
  .mac-lip::before { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 55%; translate: -50% 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #1b1e21, #2e3237); }
  .dev-club .dev-shadow { left: -14%; right: -14%; height: calc(var(--mw) * 0.06); bottom: calc(var(--mw) * -0.2); }

  /* Tablet in landscape */
  .dev-target { --tw: 90cqw; border-radius: calc(var(--tw) * 0.058); }
  .tab {
    position: relative; width: var(--tw); aspect-ratio: 1.387; padding: calc(var(--tw) * 0.006);
    border-radius: calc(var(--tw) * 0.058);
    background: linear-gradient(135deg, #8b8e93 0%, #3d3f43 14%, #26282b 50%, #424448 86%, #7e8186 100%);
    box-shadow:
      0 calc(var(--tw) * 0.03) calc(var(--tw) * 0.08) rgb(19 32 26 / 0.22),
      0 calc(var(--tw) * 0.006) calc(var(--tw) * 0.015) rgb(19 32 26 / 0.16),
      inset 0 0 0 calc(var(--tw) * 0.0012) rgb(255 255 255 / 0.12);
  }
  .tab::before { content: ""; position: absolute; right: 9%; top: calc(var(--tw) * -0.0035); width: 7%; height: calc(var(--tw) * 0.0045); border-radius: 2px 2px 0 0; background: #3a3c40; }
  .tab-bezel { position: relative; height: 100%; padding: calc(var(--tw) * 0.034); border-radius: calc(var(--tw) * 0.052); background: #050607; }
  .tab-cam { position: absolute; left: 50%; top: calc(var(--tw) * 0.0135); width: calc(var(--tw) * 0.0075); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a5c 0%, #0b1020 55%, #05070d 100%); }
  .tab-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--tw) * 0.022); background: var(--app-bg); container-type: size; }
  .dev-target .dev-shadow { left: 3%; right: 3%; height: calc(var(--tw) * 0.05); bottom: calc(var(--tw) * -0.025); }

  /* Screen sheen */
  .glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / 0.055) 0%, rgb(255 255 255 / 0.018) 28%, rgb(255 255 255 / 0) 46%); }

  /* ── Captions under the devices (overview only) ── */
  .sc-cap {
    position: absolute; left: 0; top: 0; z-index: 3;
    translate: calc(var(--cx) * 1cqw - 50%) calc(var(--cy) * 1cqw - 50%);
    display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; cursor: pointer;
    transition: opacity var(--duration-reveal) var(--ease-out) 380ms, visibility 0s;
  }
  .sc-frame:not([data-focus="none"]) .sc-cap { opacity: 0; visibility: hidden; transition: opacity var(--duration-exit) var(--ease-out), visibility 0s linear var(--duration-exit); }
  .cap-mark { display: block; width: 40px; height: 40px; flex: none; transition: transform var(--duration-hover) var(--ease-hover); }
  .cap-t { display: grid; gap: 2px; }
  .cap-name { font: 500 1.375rem/1 var(--font-numeric); letter-spacing: 0.01em; padding-top: 0.2em; }
  .cap-brand, .cap-sub { display: none; }
  .cap-sub { font-size: var(--type-small-size); line-height: 1.3; color: var(--text-muted); }
  /* Hovering a device marks its caption: the app's logo leans in */
  @media (hover: hover) and (pointer: fine) {
    .sc-stage:has(.dev-go:hover) .cap-go .cap-mark,
    .sc-stage:has(.dev-club:hover) .cap-club .cap-mark,
    .sc-stage:has(.dev-target:hover) .cap-target .cap-mark,
    .sc-cap:hover .cap-mark { transform: scale(1.12); }
  }
  .sc-stage:has(.dev-go .dev-hit:focus-visible) .cap-go .cap-mark,
  .sc-stage:has(.dev-club .dev-hit:focus-visible) .cap-club .cap-mark,
  .sc-stage:has(.dev-target .dev-hit:focus-visible) .cap-target .cap-mark { transform: scale(1.12); }

  /* ── Bar in focus mode: back to all apps, and a switcher ── */
  .sc-bar {
    position: relative; z-index: 6; grid-row: 2; grid-column: 1; align-self: start;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3) 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--duration-exit) var(--ease-out), visibility 0s linear var(--duration-exit);
  }
  .sc-frame:not([data-focus="none"]) .sc-bar { opacity: 1; visibility: visible; transition: opacity var(--duration-nav) var(--ease-out) 220ms, visibility 0s; }
  .sc-bar > * { pointer-events: auto; }
  .sc-back { padding: 0 6px 0 2px; border: 0; background: none; cursor: pointer; }
  .sc-back .icon { width: 20px; height: 20px; }
  @media (hover: hover) and (pointer: fine) { .sc-back:hover .icon { transform: translateX(-3px); } }
  .sc-back:focus-visible .icon { transform: translateX(-3px); }
  .sc-switch { display: flex; }
  .sc-switch button {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
    font: var(--type-label-weight) var(--type-label-size)/1 var(--font-text); letter-spacing: var(--type-label-tracking); text-transform: uppercase;
    color: var(--text-subtle);
    transition: color var(--duration-hover) var(--ease-hover);
  }
  .sc-switch button::before {
    content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor;
    transition: background-color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover);
  }
  .sc-switch button[aria-pressed="true"] { color: var(--text); }
  .sc-switch button[aria-pressed="true"]::before { background: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent-strong), 0 0 0 3px color-mix(in srgb, var(--accent-strong) 16%, transparent); }
  @media (hover: hover) and (pointer: fine) { .sc-switch button:hover { color: var(--text); } }

  /* ── Panels: the text beside the device ── */
  .sc-panels { position: relative; z-index: 4; grid-row: 3; grid-column: 1; display: grid; padding: var(--space-6) var(--gutter) 0; }
  [data-focus="none"] .sc-panels { display: none; }
  .sc-panel {
    grid-area: 1 / 1; display: grid; justify-items: start; align-content: start; gap: var(--space-4);
    visibility: hidden; opacity: 0;
    transition: opacity var(--duration-exit) var(--ease-out), visibility 0s linear var(--duration-exit);
  }
  .sc-panel.is-active { visibility: visible; opacity: 1; transition: opacity var(--duration-exit) var(--ease-out), visibility 0s; }
  .sc-panel.is-active > * { animation: sc-rise var(--duration-reveal) var(--ease-out) both; animation-delay: calc(170ms + var(--i, 0) * var(--motion-stagger)); }
  .sc-panel .h3:focus { outline: none; }
  .sc-panel .body { max-width: 40ch; }
  .sc-points { display: grid; width: 100%; max-width: 26rem; border-top: var(--line-hairline) solid var(--line); }
  .sc-points li { display: flex; align-items: center; gap: 0.75rem; min-height: 42px; border-bottom: var(--line-hairline) solid var(--line); font-weight: 500; }
  /* An icon from the app in a chip tinted with the app's colour (GO lime, CLUB orange, TARGET yellow), not a dot */
  .sc-ic {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--color-ink);
    background: color-mix(in srgb, var(--accent, var(--color-lime)) 30%, var(--color-white));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--color-lime)) 45%, transparent);
  }
  .sc-ic .ic { width: 34px; height: 34px; }
  .sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
  /* "Next: CLUB": on to the following app (GO, CLUB, TARGET, and round again) */
  .sc-next .icon { width: 20px; height: 20px; transition: transform var(--duration-hover) var(--ease-hover); }
  @media (hover: hover) and (pointer: fine) { .sc-next:hover { background: var(--accent, var(--color-lime)); box-shadow: inset 0 0 0 1px transparent; color: var(--color-ink); } }
  @media (hover: hover) and (pointer: fine) { .sc-next:hover .icon { transform: translateX(3px); } }
  .sc-next:focus-visible .icon { transform: translateX(3px); }
  @keyframes sc-rise { from { opacity: 0; transform: translateY(var(--motion-rise)); } }
  @keyframes sc-fade { from { opacity: 0; } }

  /* ── Narrow layout (phones, tablets in portrait): a cluster, the text below the stage. Stage is 100 × 108 cqw. ── */
  .dev-go { --x: 17; --y: 61.98; --s: 0.44; }
  .dev-club { --x: 50; --y: 41.89; --s: 0.8; }
  .dev-target { --x: 75; --y: 67.78; --s: 0.5; }
  [data-focus="go"] .dev-go { --x: 50; --y: 60.5; --s: 1; }
  [data-focus="go"] .dev-club { --x: 64; --s: 0.62; }
  [data-focus="go"] .dev-target { --x: 94; --s: 0.4; }
  [data-focus="club"] .dev-club { --x: 50; --y: 53.67; --s: 1; }
  [data-focus="club"] .dev-go { --x: 4; --s: 0.36; }
  [data-focus="club"] .dev-target { --x: 96; --s: 0.4; }
  [data-focus="target"] .dev-target { --x: 50; --y: 60.5; --s: 1; }
  [data-focus="target"] .dev-go { --x: 4; --s: 0.36; }
  [data-focus="target"] .dev-club { --x: 36; --s: 0.62; }
  .sc-cap { --cy: 98; }
  .cap-go { --cx: 17; } .cap-club { --cx: 50; } .cap-target { --cx: 80; }
  .sc-rings { --rx: 50; --ry: 52; }
  .sc-frame:not([data-focus="none"]) .sc-rings { --ry: 60.5; }

  /* ── Wide layout: one scene per screen, the text beside the device. Stage is 100 × 60 cqw. ── */
  @media (min-width: 900px) and (min-aspect-ratio: 5/4) {
    /* The section clips, so the rings and the light run to the screen's edges */
    .showcase { padding-block: 0; overflow: clip; }
    .sc-frame { width: min(100%, 100svh * 5 / 3, 112rem); }
    .sc-head, .sc-stage, .sc-bar, .sc-panels { grid-area: 1 / 1; }
    .sc-head { align-self: start; margin: 0; padding-top: 4.2cqw; gap: var(--space-3); }
    .sc-head .h2 { font-size: clamp(2.5rem, 5.4cqw, 5rem); }
    .sc-head .lede { font-size: clamp(1.0625rem, 1.55cqw, 1.5rem); max-width: 48ch; }
    .sc-frame:not([data-focus="none"]) .sc-head { opacity: 0; visibility: hidden; transition: opacity var(--duration-exit) var(--ease-out), visibility 0s linear var(--duration-exit); }
    .sc-frame[data-focus="none"] .sc-head { transition: opacity var(--duration-reveal) var(--ease-out) 300ms, visibility 0s; }
    .sc-stage { aspect-ratio: 5 / 3; overflow: visible; }
    .sc-stage::before { top: 62%; width: 110cqw; height: 66cqw; }
    .sc-bar { padding: 2.2cqw 5cqw 0 4.4cqw; }

    .dev-go { --pw: 21.5cqw; }
    .dev-club { --mw: 48cqw; }
    .dev-target { --tw: 50cqw; }

    .dev-go { --x: 16; --y: 39.55; --s: 0.47; }
    .dev-club { --x: 44; --y: 34.89; --s: 0.7; }
    .dev-target { --x: 77; --y: 38.93; --s: 0.52; }
    [data-focus="go"] .dev-go { --x: 33; --y: 33.8; --s: 1; }
    [data-focus="go"] .dev-club { --x: 56; --s: 0.56; }
    [data-focus="go"] .dev-target { --x: 88; --s: 0.38; }
    [data-focus="club"] .dev-club { --x: 34.5; --y: 29.71; --s: 1; }
    [data-focus="club"] .dev-go { --x: 7; --s: 0.34; }
    [data-focus="club"] .dev-target { --x: 90; --s: 0.38; }
    [data-focus="target"] .dev-target { --x: 65; --y: 33.8; --s: 1; }
    [data-focus="target"] .dev-go { --x: 6; --s: 0.34; }
    [data-focus="target"] .dev-club { --x: 34; --s: 0.56; }

    .sc-cap { --cy: 56.4; gap: 0.75rem; }
    .cap-go { --cx: 16; } .cap-club { --cx: 44; } .cap-target { --cx: 77; }
    .cap-mark { width: 48px; height: 48px; }
    .cap-brand { display: inline; }
    .cap-sub { display: block; }

    .sc-rings { --rx: 44; --ry: 37; -webkit-mask-image: none; mask-image: none; }
    [data-focus="go"] .sc-rings { --rx: 33; --ry: 33.8; }
    [data-focus="club"] .sc-rings { --rx: 34.5; --ry: 33.8; }
    [data-focus="target"] .sc-rings { --rx: 65; --ry: 33.8; }

    .sc-panels { display: block; padding: 0; pointer-events: none; }
    [data-focus="none"] .sc-panels { display: block; }
    .sc-panel { position: absolute; left: calc(var(--px) * 1cqw); top: 33.8cqw; width: calc(var(--pw2) * 1cqw); translate: 0 -50%; }
    .sc-panel.is-active { pointer-events: auto; }
    .sc-panel .h3 { font-size: clamp(2rem, 3.4cqw, 3.5rem); }
    .sc-panel .body { font-size: clamp(1.0625rem, 1.2cqw, 1.125rem); }
    #panel-go { --px: 48; --pw2: 29; }
    #panel-club { --px: 64.5; --pw2: 28; }
    #panel-target { --px: 9; --pw2: 28; }
  }

  @media (max-width: 379.98px) {
    .sc-back .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sc-switch button { padding: 0 7px; }
  }

  /* ════════ App screens: stand-ins in the apps' own look until real screens are ready ════════ */
  .ui-ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* The app's own icons (assets/icons/): 34-unit symbols whose glyph fills about 55 % of the box, so they are drawn at
     1.8 x the stand-ins' size and pulled back with a negative margin to keep the layout */
  .go-tabs .ic { width: 10cqw; height: 10cqw; margin: -2cqw; }
  .go-h .ic { width: 8cqw; height: 8cqw; margin: -1.5cqw; color: var(--app-muted); }
  .go-like .ic { width: 8.4cqw; height: 8.4cqw; margin: -1.7cqw; }
  .go-src .ic { width: 5.6cqw; height: 5.6cqw; margin: -0.6cqw; }
  .club-nav .ic { width: 2.1em; height: 2.1em; margin: -0.45em; }
  .club-btn .ic { width: 1.7em; height: 1.7em; margin: -0.4em 0 -0.4em -0.25em; }
  .club-foot .ic { width: 2.2em; height: 2.2em; margin: -0.5em; }
  .tgt-sync .ic { width: 2.1em; height: 2.1em; margin: -0.5em; }

  /* GO on the phone. 1cqw = 1% of the screen width; the screen is 216.6cqw tall. */
  .dev-go .phone-screen { container-type: size; }
  .go { position: relative; height: 100%; font-size: 3.5cqw; line-height: 1.3; color: var(--app-text); background: var(--app-bg); }
  .go-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; }
  .go-status-r { display: flex; align-items: center; gap: 1.4cqw; }
  .go-sig { width: 4.6cqw; height: 3.1cqw; fill: currentColor; }
  .go-status-r .ui-ic { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.4; }
  .go-bat { display: inline-grid; place-items: center; min-width: 6.4cqw; height: 3.7cqw; padding: 0 0.7cqw; border-radius: 1.2cqw; background: var(--app-text); color: var(--app-bg); font-size: 2.6cqw; line-height: 1; }
  .go-user { display: flex; align-items: center; justify-content: flex-end; gap: 2.6cqw; padding: 1.6cqw 5cqw 0; font-size: 3.7cqw; }
  .go-av { display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; padding-top: 0.5cqw; background: var(--app-lime); color: var(--app-bg); font: 500 5cqw/1 var(--font-numeric); }
  .go-title { margin-top: 3cqw; text-align: center; font: 500 6.2cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .go-gauge { position: relative; width: 56cqw; aspect-ratio: 1; margin: 3cqw auto -7.5cqw; }
  .go-gauge svg { width: 100%; height: 100%; overflow: visible; }
  .go-track, .go-arc { fill: none; stroke-width: 8.5; stroke-linecap: round; transform: rotate(135deg); }
  .go-track { stroke: #353c42; stroke-dasharray: 75 100; }
  /* 270° arc: 75 of the path's 100 units is the full scale (10.9), so 9.38 is 64.5 */
  .go-arc { stroke: var(--app-lime); stroke-dasharray: var(--arc, 64.5) 100; }
  .go.is-live .go-arc { transition: stroke-dasharray 1000ms var(--ease-out); }
  .go-avg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding-top: 2cqw; }
  .go-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; }
  .go-avg b small { font-size: 55%; }
  .go-avg span { margin-top: 2.2cqw; font-size: 3.7cqw; }
  .go.is-live .go-avg { animation: sc-fade 500ms var(--ease-out) 450ms both; }
  .go-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding: 0 2cqw; }
  .go-tiles p { display: grid; justify-items: center; gap: 1.8cqw; padding: 3.4cqw 0 2.8cqw; border-radius: 4.6cqw; background: #2e353c; }
  .go-tiles .k, .go-k, .go-new, .go-banner-k { font-size: 2.6cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .go-tiles .k { color: var(--app-muted); }
  .go-tiles b { font: 500 8.6cqw/0.85 var(--font-numeric); color: var(--app-lime); font-variant-numeric: tabular-nums; }
  .go-h { display: flex; align-items: center; justify-content: space-between; margin-top: 6.4cqw; padding: 0 4.5cqw; font: 500 5.4cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .go-h span { font: 500 3.2cqw/1 var(--font-text); color: var(--app-muted); }
  .go-h .ui-ic { width: 5cqw; height: 5cqw; color: var(--app-muted); }
  .go-series { position: relative; display: grid; grid-template-columns: 30cqw minmax(0, 1fr); align-items: center; gap: 4cqw; margin: 3cqw 2cqw 0; padding: 3.4cqw; border-radius: 4.6cqw; background: #262b31; }
  .go-series .target { width: 100%; height: auto; }
  .go-k { letter-spacing: 0.06em; color: var(--app-muted); }
  .go-total { margin: 1.4cqw 0 1.8cqw; font: 500 12.5cqw/0.85 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .go-total small { font-size: 55%; }
  .go-src { display: flex; align-items: center; gap: 1cqw; font-size: 3cqw; font-weight: 600; color: var(--app-lime); }
  .go-new { position: absolute; top: 3cqw; right: 3cqw; padding: 0.7cqw 2cqw 0.5cqw; border-radius: 999px; background: var(--app-lime); color: var(--app-bg); }
  /* The feed is a stack of cards: the next one peeks out underneath */
  .go-feed { 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); box-shadow: 0 2.8cqw 0 -1.4cqw #6b737b; }
  .go-feed-ic { display: grid; place-items: center; width: 9cqw; height: 9cqw; }
  .go-feed-ic img { width: 100%; height: 100%; }
  .go-feed p { font-size: 2.9cqw; line-height: 1.25; }
  .go-feed b { display: block; font-size: 3.4cqw; font-weight: 600; }
  .go-like { display: flex; align-items: center; gap: 1cqw; font-weight: 600; }
  .go-like .ui-ic { width: 5cqw; height: 5cqw; }
  .go-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; }
  .go-tabs span { display: grid; justify-items: center; align-content: start; gap: 1cqw; font-size: 2.3cqw; white-space: nowrap; }
  .go-tabs .ui-ic { width: 6.4cqw; height: 6.4cqw; stroke-width: 1.5; }
  .go-tabs .is-on { color: var(--app-lime); }
  /* The series arrives from TARGET as a notification */
  .go-banner {
    position: absolute; left: 3cqw; right: 3cqw; top: 2.6cqw; z-index: 2;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3cqw;
    padding: 3cqw 3.6cqw; border-radius: 6cqw; background: rgb(52 58 66 / 0.97); box-shadow: 0 2cqw 6cqw rgb(0 0 0 / 0.45);
    opacity: 0; translate: 0 -130%;
  }
  .go.is-banner .go-banner { opacity: 1; translate: 0 0; }
  .go.is-live .go-banner { transition: translate 520ms var(--ease-out), opacity 300ms var(--ease-out); }
  .go-banner-ic { display: grid; place-items: center; width: 9.6cqw; height: 9.6cqw; border-radius: 2.6cqw; background: #f6f7f2; }
  .go-banner-ic img { width: 78%; height: 78%; }
  .go-banner p { display: grid; gap: 0.4cqw; font-size: 3cqw; line-height: 1.25; color: #c9cfd5; }
  .go-banner-k { display: flex; justify-content: space-between; letter-spacing: 0.06em; color: var(--app-muted); }
  .go-banner-k i { font-style: normal; text-transform: none; letter-spacing: 0; }
  .go-banner b { font-size: 3.5cqw; font-weight: 600; color: var(--app-text); }
  /* Shots land on the card's target; the total and the badge follow */
  .go-shot { opacity: 0; }
  .go-shot.is-on { opacity: 1; }
  .go .shot { transform-box: fill-box; transform-origin: center; }
  .go.is-live .go-shot.is-on .shot { animation: shot-in 260ms var(--ease-out) both; }
  .go .marker, .go-total, .go-src, .go-new { opacity: 0; }
  .go.has-series .marker, .go.has-series .go-total, .go.has-series .go-src, .go.has-series .go-new { opacity: 1; }
  .go.is-live .go-total, .go.is-live .go-src, .go.is-live .go-new { transition: opacity 360ms var(--ease-out); }

  /* CLUB on the laptop. 1cqw = 1% of the screen width. */
  .club { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; font-size: 1.62cqw; line-height: 1.3; color: var(--app-text); background: var(--app-bg); }
  .os-bar { display: flex; align-items: center; justify-content: space-between; height: 3.7cqh; padding: 0 1.8cqw; font-size: 0.8em; background: #090c10; color: #cfd5da; }
  .os-l, .os-r { display: flex; align-items: center; gap: 1.6cqw; }
  .os-l b { font-weight: 600; }
  .club-body { display: grid; grid-template-columns: 19cqw minmax(0, 1fr); min-height: 0; }
  .club-side { display: flex; flex-direction: column; gap: 0.35cqw; padding: 2.2cqw 1.3cqw 1.8cqw; background: #0c1116; border-right: 1px solid var(--app-line); }
  .club-logo { display: flex; align-items: center; gap: 0.45em; padding: 0 0.8cqw 1.6cqw; font: 500 2.3em/1 var(--font-numeric); letter-spacing: 0.02em; }
  .club-logo img { width: 1.2em; height: 1.2em; flex: none; margin-top: -0.2em; }
  .club-nav { display: grid; gap: 0.3cqw; }
  .club-nav li { display: flex; align-items: center; gap: 0.75em; padding: 0.75cqw 0.9cqw; border-radius: 0.9cqw; color: var(--app-muted); }
  .club-nav li.is-on { background: var(--app-card); color: var(--app-text); }
  .club-nav li.is-on .ui-ic { color: var(--app-lime); }
  .club-who { display: flex; align-items: center; gap: 0.6em; margin-top: auto; padding: 0 0.6cqw; font-size: 0.82em; line-height: 1.25; }
  .club-who small { display: block; color: var(--app-muted); }
  .av { display: grid; place-items: center; width: 2.7cqw; height: 2.7cqw; flex: none; border-radius: 50%; background: var(--app-tile); font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em; }
  .club-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.5cqw; padding: 2.3cqw 2.5cqw 2cqw; min-height: 0; }
  .club-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
  .club-h { font: 500 3.5cqw/1 var(--font-numeric); letter-spacing: 0.01em; }
  .club-sub { margin-top: 0.3em; color: var(--app-muted); }
  .club-btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.15em; border-radius: 999px; background: var(--app-lime); color: var(--app-bg); font-weight: 600; white-space: nowrap; }
  .club-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; }
  .club-stats p { padding: 1.2cqw 1.4cqw 1cqw; border-radius: 1.4cqw; background: var(--app-card); }
  .club-stats .k, .club-card-h, .tgt-k, .tgt-stats .k { font-size: 0.8em; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--app-muted); }
  .club-stats .k { display: block; margin-bottom: 0.25em; }
  .club-stats b { font: 500 4.6cqw/0.9 var(--font-numeric); }
  .club-stats b i { font-style: normal; color: var(--app-muted); font-size: 70%; }
  .club-stats .is-lime { color: var(--app-lime); }
  .club-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2cqw; min-height: 0; }
  .club-card { display: flex; flex-direction: column; min-height: 0; padding: 1.25cqw 1.4cqw; border-radius: 1.4cqw; background: var(--app-card); overflow: hidden; }
  .club-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7cqw; }
  .club-live { display: inline-flex; align-items: center; gap: 0.45em; color: var(--app-lime); }
  .club-live i { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; }
  .club-log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1cqw; padding: 0.62cqw 0; border-top: 1px solid var(--app-line); }
  .club-log .nm { line-height: 1.2; }
  .club-log .nm small { display: block; font-size: 0.8em; color: var(--app-muted); }
  .club-log .tm { color: var(--app-muted); font-variant-numeric: tabular-nums; }
  .club-log .ln { padding: 0.25em 0.7em; border-radius: 999px; background: var(--app-tile); font-size: 0.8em; font-weight: 600; }
  .club-log li.is-new .ln { background: var(--app-lime); color: var(--app-bg); }
  .club-log li:not(.is-in) { opacity: 0; translate: 0 0.8cqw; }
  .club.is-live .club-log li { transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out); }
  .club-lanes ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8cqw; }
  .club-lanes ol > li { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 0.92; padding: 0.7cqw 0.8cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--app-line); color: var(--app-muted); }
  .club-lanes ol > li b { font: 500 2.3cqw/1 var(--font-numeric); }
  .club-lanes ol > li span { font-size: 0.78em; font-weight: 600; }
  .club-lanes ol > li .who { display: none; }
  .club-lanes ol > li.on { background: var(--app-tile); box-shadow: none; color: var(--app-text); }
  .club-lanes ol > li.on .who { display: inline; }
  .club-lanes ol > li.on .free { display: none; }
  .club.is-live .club-lanes ol > li { transition: background-color 420ms var(--ease-out), color 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
  .club-gear-h { margin: 1.3cqw 0 0.3cqw; }
  .club-gear li { display: flex; justify-content: space-between; gap: 1cqw; padding: 0.55cqw 0; border-top: 1px solid var(--app-line); }
  .club-gear li span:last-child { color: var(--app-muted); }
  .club-foot { display: flex; align-items: center; gap: 0.5em; margin-top: auto; padding-top: 0.9cqw; font-size: 0.86em; color: var(--app-muted); }

  /* TARGET on the tablet */
  .tgt { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; font-size: 1.62cqw; line-height: 1.3; color: var(--app-text); background: radial-gradient(110% 90% at 28% 45%, #17202a 0%, var(--app-bg) 70%); }
  .ios-bar { display: flex; justify-content: space-between; padding: 1.2cqw 2.6cqw 0; font-size: 0.85em; font-weight: 600; }
  .ios-r { display: flex; align-items: center; gap: 0.4em; }
  .tgt-bar { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.5cqw 2.6cqw 1.3cqw; }
  .tgt-logo { display: flex; align-items: center; gap: 0.4em; font: 500 2.3em/1 var(--font-numeric); letter-spacing: 0.02em; }
  .tgt-logo img { width: 1.2em; height: 1.2em; flex: none; margin-top: -0.2em; }
  .tgt-lane { color: var(--app-muted); }
  .tgt-cam { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.95em; border-radius: 999px; background: var(--app-card); font-weight: 600; }
  .tgt-cam i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--app-lime); box-shadow: 0 0 0 0.25em color-mix(in srgb, var(--app-lime) 22%, transparent); }
  .tgt-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3.2cqw; min-height: 0; padding: 0.4cqw 2.6cqw 1.6cqw; }
  /* Sized in screen units: what is left of the screen's height after the bars */
  .tgt-target { display: grid; place-items: center; align-self: center; width: 51cqw; aspect-ratio: 1; padding: 1.6cqw; border-radius: 2.2cqw; background: var(--app-card); }
  .tgt-target .target { width: 100%; height: 100%; }
  .tgt-side { display: flex; flex-direction: column; justify-content: center; gap: 1.7cqw; min-width: 0; }
  .tgt-total { font: 500 10cqw/0.8 var(--font-numeric); font-variant-numeric: tabular-nums; }
  .tgt-total small, .tgt-stats b small, .tgt-list small { font-size: 55%; }
  .tgt-stats { display: flex; gap: 3.6cqw; }
  .tgt-stats .k { display: block; margin-bottom: 0.3em; }
  .tgt-stats b { font: 500 3.7cqw/0.9 var(--font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tgt-stats b i { margin-left: 0.2em; font-style: normal; font-size: 55%; color: var(--app-muted); }
  .tgt-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9cqw; }
  .tgt-list li { padding: 0.75cqw 0 0.45cqw; border-radius: 1.1cqw; background: var(--app-card); text-align: center; font: 500 3cqw/1 var(--font-numeric); font-variant-numeric: tabular-nums; color: var(--app-muted); }
  .tgt-list li.is-on { color: var(--app-text); }
  .tgt-list li.is-last { box-shadow: inset 0 0 0 0.22cqw var(--app-lime); }
  .tgt-sync { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; color: var(--app-lime); opacity: 0; translate: 0 0.8cqw; }
  .tgt.is-done .tgt-sync { opacity: 1; translate: 0 0; }
  .tgt.is-live .tgt-sync { transition: opacity 400ms var(--ease-out) 300ms, translate 400ms var(--ease-out) 300ms; }
  .tgt-lanes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9cqw; padding: 0 2.6cqw 2.2cqw; }
  .tgt-lanes p { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; padding: 0.8cqw 1.1cqw 0.6cqw; border-radius: 1.1cqw; background: var(--app-card); font-size: 0.82em; color: var(--app-muted); }
  .tgt-lanes b { font: 500 1.6em/1 var(--font-numeric); color: var(--app-text); font-variant-numeric: tabular-nums; }
  .tgt-lanes .is-me { box-shadow: inset 0 0 0 0.2cqw var(--app-lime); color: var(--app-text); }
  /* Shots land: the hole pops in, the impact ring spreads, the latest shot gets the lime ring */
  .tgt-shot { opacity: 0; }
  .tgt-shot.is-on { opacity: 1; }
  .tgt .target .impact { opacity: 0; }
  .tgt .shot, .tgt .impact { transform-box: fill-box; transform-origin: center; }
  .tgt.is-live .tgt-shot.is-on .shot { animation: shot-in 260ms var(--ease-out) both; }
  .tgt.is-live .tgt-shot.is-on .impact { animation: impact 700ms var(--ease-out) both; }
  .tgt .marker { opacity: 0; }
  .tgt .marker.is-on { opacity: 1; }
  .tgt .group-ring { opacity: 0; }
  .tgt.is-done .group-ring { opacity: 1; }
  .tgt.is-live .group-ring { transition: opacity 500ms var(--ease-out); }
  @keyframes shot-in { from { opacity: 0; transform: scale(1.8); } }
  @keyframes impact { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    /* No camera move: the scene changes in place with a short fade */
    .dev, .sc-rings { transition: opacity var(--duration-reduced) var(--ease-out), visibility 0s; }
    [data-focus="go"] .dev:not(.dev-go),
    [data-focus="club"] .dev:not(.dev-club),
    [data-focus="target"] .dev:not(.dev-target) { transition: opacity var(--duration-reduced) var(--ease-out), visibility 0s linear var(--duration-reduced); }
    [data-focus="none"] .dev:hover { transform: none; }
    .sc-panel.is-active > * { animation: sc-fade var(--duration-reduced) var(--ease-out) both; }
    .sc-back:hover .icon, .sc-back:focus-visible .icon, .sc-next:hover .icon, .sc-next:focus-visible .icon { transform: none; }
    .cap-mark { transition: none; transform: none !important; }
  }
}