/* Scrollrack website, light variant (branch design-light). Mobile first. No framework, no build step.
   Layers: tokens, base, layout, components, motion. Motion only animates transform and opacity.

   Visual language ("the lightbox"): a white grading table under one soft lamp. The dark titanium device is the sharpest object
   on it and casts a real shadow, teal is the light the screen throws onto the table, glass cards are clear acrylic.
   Drawn from the subject: card proportions (63:88), a tier mark that works like a rarity pip,
   ruled lists instead of boxed cards. Same structure and motion as the dark version. */
@layer tokens, base, layout, components, motion;

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Scrollrack Sans";
  src: url("/assets/fonts/ScrollrackSans.woff2") format("woff2");
  font-weight: 400 760;
  font-stretch: 78% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Scrollrack Mono";
  src: url("/assets/fonts/ScrollrackMono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* metric matched fallback, keeps the layout stable while the font loads */
@font-face {
  font-family: "Scrollrack Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* white page, off-white steps with a trace of green (hue 160, saturation under 8 percent) */
    --bg-0: #ffffff;
    --bg-1: #f5f7f6;
    --bg-2: #eef2f1;
    --bg-3: #e4eae8;
    --line: #d9dfde;
    --line-strong: #a9b4b2;

    --text-1: #0d1213;
    --text-2: #2f3a3c;
    --text-3: #3f4b48;

    --accent: #2cd4c0;        /* fills: buttons, switches, the scan band */
    --accent-ink: #03120f;    /* text on those fills */
    --accent-strong: #05594f; /* the same teal deep enough to be text, strokes and links on white */
    --ink: 13 18 19;          /* rgb triplets: hairlines and shadows */
    --mint: 44 212 192;       /* the screen's light on the table */

    --font: "Scrollrack Sans", "Scrollrack Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Scrollrack Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --gutter: clamp(20px, 5vw, 48px);
    --max: 1200px;
    --pad-y: clamp(96px, 7.5vw + 56px, 160px);
    --nav-h: 52px;

    /* radii by role: a real card corner is 3 mm on 63 x 88 mm, panels are calmer, controls are full pills */
    --r-card: 4.76% / 3.41%;
    --r-panel: 18px;
    --r-s: 10px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.4, 0, 0.6, 1);
    --t-fast: 160ms;
    --t-base: 280ms;
  }
}

/* higher contrast on request (bright surroundings, low vision) */
@media (prefers-contrast: more) {
  :root { --text-2: #1c2527; --text-3: #2b3634; --line: #aab5b3; --line-strong: #5f6d6a; }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    background: var(--bg-0);
    scrollbar-color: var(--line-strong) var(--bg-0);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    margin: 0;
    background: var(--bg-0);
    color: var(--text-2);
    font-family: var(--font);
    font-stretch: 100%;
    font-size: 1rem;
    line-height: 1.6;
    font-feature-settings: "calt" 1, "kern" 1;
    overflow-x: clip;
  }
  @media (min-width: 900px) { body { font-size: 1.125rem; } }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  img, svg, video { display: block; max-width: 100%; }
  img, video { height: auto; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3 { color: var(--text-1); font-weight: 610; font-stretch: 86%; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a:hover { text-decoration-thickness: 2px; }
  ::selection { background: rgb(44 212 192 / 0.3); color: var(--text-1); }
  [id] { scroll-margin-top: 88px; }

  :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 6px; }
  :focus:not(:focus-visible) { outline: none; }

  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip {
    position: fixed; z-index: 100; left: 12px; top: -80px; padding: 12px 18px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
  }
  .skip:focus { top: 12px; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
  .section { position: relative; padding-block: var(--pad-y); isolation: isolate; overflow-x: clip; }
  .section--raised { background: var(--bg-1); border-block: 1px solid var(--line); }
  .center { text-align: center; }
  .center .lead, .center .copy { margin-inline: auto; }

  .head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 72px); }
  .head.center { justify-items: center; }

  .split { display: grid; gap: clamp(48px, 8vw, 72px); align-items: center; }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(64px, 8vw, 128px); }
    .split--rev > :first-child { order: 2; }
  }
  .stack { display: grid; gap: 22px; align-content: start; }

  /* typography: headlines are drawn narrow (width axis), text stays regular. One voice, no colour split. */
  .h1 { font-size: clamp(3.5rem, 6.6vw + 1.9rem, 9.5rem); line-height: 0.92; letter-spacing: -0.022em; font-stretch: 82%; font-weight: 630; }
  .h2 { font-size: clamp(2.5rem, 4vw + 1.6rem, 5.5rem); line-height: 0.98; letter-spacing: -0.02em; }
  .h3 { font-size: clamp(1.5rem, 1.1vw + 1.2rem, 2.25rem); line-height: 1.08; letter-spacing: -0.01em; font-stretch: 90%; font-weight: 590; }
  .h2--statement { font-size: clamp(2.125rem, 3vw + 1.2rem, 4.25rem); line-height: 1.02; max-width: 17em; margin-inline: auto; }
  .lead { font-size: clamp(1.1875rem, 0.7vw + 1rem, 1.5rem); line-height: 1.5; letter-spacing: -0.004em; max-width: 32em; color: var(--text-2); }
  .copy { max-width: 36em; }
  .copy + .copy { margin-top: 16px; }
  .stack .copy + .copy { margin-top: 0; }
  .dim { color: inherit; }
  .h1 .dim, .h2 .dim { display: block; }
  .fine { font-size: 0.875rem; line-height: 1.55; color: var(--text-3); }
  .mono { font-family: var(--mono); font-weight: 500; }
  strong { color: var(--text-1); font-weight: 620; }

  /* tier label: Scrollrack Plus in a capsule, teal border and text, no fill; free features carry no mark (D43, D94).
     Above the headline of a Plus section it stands alone (the ruled type line is gone, D67). */
  .tier { justify-self: start; display: inline-flex; align-items: center; color: var(--text-2); font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
  .tier--plus { padding: 0.3em 0.85em; border: 1px solid var(--accent-strong); border-radius: 999px; color: var(--accent-strong); }
}

/* ------------------------------------------------------------------ components */
@layer components {
  /* ---- navigation capsule */
  .nav { position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; padding-inline: 12px; pointer-events: none; }
  .nav__bar {
    position: relative; isolation: isolate; pointer-events: auto;
    display: flex; align-items: center; gap: 8px; height: var(--nav-h); width: min(100%, 780px); margin-inline: auto;
    padding: 0 8px 0 14px; border-radius: 999px;
  }
  .nav__bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgb(255 255 255 / 0.78); border: 1px solid var(--line); box-shadow: 0 10px 30px -16px rgb(var(--ink) / 0.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
    opacity: 1;
  }
  .nav__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--text-1); font-weight: 640; font-stretch: 90%; letter-spacing: -0.005em; text-decoration: none; font-size: 1.0625rem; }
  .nav__brand img { border-radius: 7px; }
  .nav__links { display: none; }
  .nav__links a, .menu a { color: var(--text-2); text-decoration: none; font-size: 0.9375rem; }
  .nav__links a:hover, .menu a:hover { color: var(--text-1); }
  .nav__cta {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px;
    border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px rgb(5 89 79 / 0.28); color: var(--accent-ink); font-weight: 620; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
  }
  .nav__menu {
    position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--text-1);
  }
  .nav__menu span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-base) var(--ease-out); }
  .nav__menu span:first-child { top: 18px; }
  .nav__menu span:last-child { top: 25px; }
  .nav__menu:has(+ .menu:popover-open) span:first-child, .nav:has(.menu:popover-open) .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav:has(.menu:popover-open) .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .menu {
    position: fixed; inset: calc(max(12px, env(safe-area-inset-top)) + var(--nav-h) + 8px) 12px auto 12px; width: min(calc(100% - 24px), 420px); margin: 0 auto;
    padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: rgb(255 255 255 / 0.985); box-shadow: 0 28px 56px -24px rgb(var(--ink) / 0.4); color: var(--text-2); pointer-events: auto;
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .menu nav { display: grid; }
  .menu a { padding: 14px 12px; border-radius: 10px; font-size: 1.0625rem; }
  .menu a:hover { background: var(--bg-2); }
  .nav__cta::after, .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; transition: opacity var(--t-fast) var(--ease-io); }
  .nav__cta:hover::after, .btn:hover::after { opacity: 0.1; }
  .nav__cta:hover, .btn:hover { text-decoration: none; }
  @media (min-width: 900px) {
    .nav__links { display: flex; gap: 22px; margin-right: 8px; }
    .nav__menu { display: none; }
    .nav__brand { margin-right: 8px; }
    .nav__bar { padding-left: 16px; }
    .nav__links { margin-left: auto; }
  }
  @supports not selector(:popover-open) {
    .nav__menu { display: none; }
    .nav__links { display: flex; gap: 14px; margin-left: auto; margin-right: 8px; }
    .nav__links a:nth-child(n+4) { display: none; }
  }

  /* ---- buttons, badge */
  .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
    border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1px rgb(5 89 79 / 0.28); color: var(--accent-ink); font: inherit; font-weight: 620; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  }
  .btn--ghost { background: transparent; color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .btn--ghost::after { background: var(--text-1); }
  .btn--ghost:hover::after { opacity: 0.06; }
  .badge { display: inline-block; line-height: 0; border-radius: 9px; }
  .badge img { width: 168px; height: 56px; }
  @media (min-width: 900px) { .badge img { width: 180px; height: 60px; } }

  /* ---- icons */
  .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  /* ---- light. The only colour in the light is the mint the screen throws onto the white table: a wide, pale pool.
        The pool carries a dither mask so the very flat 8 bit steps do not show as rings. */
  .glow {
    position: absolute; pointer-events: none; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--mint) / 0.3), rgb(var(--mint) / 0.11) 44%, rgb(var(--mint) / 0));
    -webkit-mask-image: url("/assets/img/noise.webp"); mask-image: url("/assets/img/noise.webp"); -webkit-mask-size: 128px; mask-size: 128px;
  }

  /* ---- device: brushed titanium rim, black bezel, glass. Screen 23:50. 1em = 1 percent of the device width. */
  .device { --w: 280px; position: relative; width: var(--w); font-size: calc(var(--w) / 100); flex: none; }
  .device__body {
    position: relative; padding: 2.5%; border-radius: 15.8% / 7.3%;
    background: linear-gradient(148deg, #b4bbbf 0%, #6a7176 7%, #2c3135 22%, #121517 46%, #262b2f 72%, #7d858b 92%, #a7aeb3 100%);
    box-shadow: 0 0 0 1px rgb(var(--ink) / 0.3), 0 1.2em 1.6em -1em rgb(var(--ink) / 0.5), 0 3.4em 5em -2.2em rgb(var(--ink) / 0.5), 0 4.4em 6em -3em rgb(var(--mint) / 0.75);
  }
  /* bezel */
  .device__body::before {
    content: ""; position: absolute; inset: 0.85em; border-radius: 14.9% / 6.85%; background: #030405;
  }
  /* rim light, a 1 px edge that is brightest at the upper left */
  .device__body::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(150deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.06) 32%, rgb(255 255 255 / 0.02) 66%, rgb(255 255 255 / 0.22));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .device__screen { position: relative; aspect-ratio: 23 / 50; border-radius: 13.4% / 6.17%; overflow: hidden; background: #05070a; isolation: isolate; }
  .device__screen > img, .device__screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .device__screen::before {
    content: ""; position: absolute; z-index: 3; top: 2%; left: 50%; width: 29%; height: 3.3%; transform: translateX(-50%); border-radius: 999px; background: #000;
  }
  .device__screen::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(128deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 34%);
  }
  .device::before, .device::after { content: ""; position: absolute; width: 0.9em; border-radius: 0.3em; background: linear-gradient(90deg, #4a5157, #1b1f22); }
  .device::before { left: -0.55em; top: 15.5%; height: 5%; box-shadow: 0 7.6em 0 #2a2f33, 0 14em 0 #2a2f33; }
  .device::after { right: -0.55em; top: 23%; height: 10%; background: linear-gradient(270deg, #4a5157, #1b1f22); }
  .device--s { --w: 200px; }
  .device--l { --w: 320px; }
  .device-slot { position: relative; display: grid; justify-items: center; isolation: isolate; }

  /* ---- stage: device + light */
  .stage { position: relative; display: grid; justify-items: center; align-items: center; isolation: isolate; padding-block: 32px; }
  .stage .glow { width: min(140vw, 880px); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; }


  /* ---- overview: a ruled index with one screen per feature. Five across from 1280px, below that the same strip scrolls as a carousel. */
  .tiles {
    --tile-w: min(76vw, 300px); --pad: max(var(--gutter), calc((100vw - var(--max)) / 2));
    display: flex; margin-top: clamp(48px, 7vw, 88px); padding-inline: var(--pad); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
    background: var(--bg-1); border-block: 1px solid var(--line);
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tiles li { flex: none; display: grid; width: var(--tile-w); scroll-snap-align: start; border-left: 1px solid var(--line); }
  .tiles li:last-child { border-right: 1px solid var(--line); }
  .tile { container-type: inline-size; display: grid; grid-template-rows: auto 1fr; color: var(--text-2); text-decoration: none; text-align: left; }
  .tile__head { position: relative; display: grid; gap: 22px; align-content: start; padding: 26px 22px 0; }
  .tile__ico { display: block; }
  .tile .ico { color: var(--accent-strong); width: 30px; height: 30px; stroke-width: 1.35; }
  .tile h3 { font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.008em; }
  .tile p { font-size: 0.9375rem; line-height: 1.5; margin-top: 8px; }
  .tile:hover { background: var(--bg-2); text-decoration: none; }
  .tile:focus-visible { outline-offset: -4px; }
  /* two phones rise from the lower edge, tilted against each other: the tops stay whole, the tile edge cuts the rest.
     The back phone (a) leans left and sits lower, the front phone (b) leans right. Sizes are in cqw, so the pair scales with the tile. */
  .tile__shot { position: relative; align-self: end; height: 94cqw; overflow: hidden; }
  .tile__dev { --w: 50cqw; position: absolute; }
  .tile__dev--a { left: var(--tile-la, 9cqw); top: calc(24px + 13cqw); z-index: 1; transform: rotate(var(--tile-ra, -7deg)); }
  .tile__dev--b { left: var(--tile-lb, 43cqw); top: 24px; z-index: 2; transform: rotate(var(--tile-rb, 5deg)); }
  /* every tile leans its pair a little differently (D97); the left offsets keep the tops of the phones inside the tile at the larger angles */
  .tiles li:nth-child(1) { --tile-ra: -8deg; --tile-la: 10.5cqw; --tile-rb: 4deg; --tile-lb: 43cqw; }
  .tiles li:nth-child(2) { --tile-ra: -5deg; --tile-la: 8cqw; --tile-rb: 6deg; --tile-lb: 41.5cqw; }
  .tiles li:nth-child(3) { --tile-ra: -7deg; --tile-la: 9cqw; --tile-rb: 3deg; --tile-lb: 43cqw; }
  .tiles li:nth-child(4) { --tile-ra: -4deg; --tile-la: 7cqw; --tile-rb: 5deg; --tile-lb: 42.5cqw; }
  .tiles li:nth-child(5) { --tile-ra: -6deg; --tile-la: 8.5cqw; --tile-rb: 7deg; --tile-lb: 40.5cqw; }
  @media (min-width: 1280px) {
    .tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-inline: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-panel); }
    .tiles li { width: auto; }
    .tiles li:first-child { border-left: 0; }
    .tiles li:last-child { border-right: 0; }
    .tile__head { padding: 30px 26px 0; }
    .tile p { font-size: 1rem; }
    .tile h3 { font-size: 1.625rem; }
  }
  /* carousel controls, shown by site.js only while the strip overflows */
  .pager { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
  .pager[hidden] { display: none; }
  .pager__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-0); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
  .pager__btn:hover { background: var(--bg-2); }
  .pager__btn[aria-disabled="true"] { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); background: transparent; cursor: default; }
  .pager__ico--prev { transform: scaleX(-1); }
  /* under the sets rail: the rail already ends in 40px of padding */
  .pager--rail { margin-top: -12px; }

  /* ---- hero: "Got a precon? Start here." over three phones in the order of the lead (precons, Deck Check, set filter), turned toward each other in perspective, Deck Check in front.
        The lower edge of the section cuts them (the same cut as in the overview tiles). Nothing moves except the load in (D104, redesign D106). */
  .hero { position: relative; overflow-x: clip; border-bottom: 1px solid var(--line); }
  .hero__stage { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; padding: 108px var(--gutter) 0; }
  .hero__copy { container-type: inline-size; width: 100%; max-width: var(--max); display: grid; gap: 22px; justify-items: center; z-index: 2; }
  .hero__kind { font-size: 1rem; line-height: 1.4; font-weight: 500; color: var(--text-2); }
  /* the question small above the answer, one color; the answer sets the size and follows the width of the column ("Start here." is about 3.7 em wide) */
  .hero__title { display: grid; justify-items: center; gap: 0.12em; font-size: clamp(3rem, 23cqw, 6.5rem); }
  .hero__title span { display: block; }
  .hero__ask { font-size: max(1.5rem, 0.34em); line-height: 1.1; letter-spacing: -0.01em; font-stretch: 92%; font-weight: 560; }
  .hero__copy .lead { max-width: 24em; font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.375rem); }
  .hero__cta { display: grid; gap: 12px; justify-items: center; margin-top: 6px; }
  .hero__cta .fine { max-width: 26em; }
  .hero__art { --hero-w: min(34vw, 190px); position: relative; isolation: isolate; width: 100%; height: calc(var(--hero-w) * 1.5); margin-top: 44px; clip-path: inset(-100vh -100vw 0 -100vw); }
  .hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .hero__light .glow { width: min(150vw, 1100px); aspect-ratio: 1; left: 50%; top: 40%; translate: -50% -50%; z-index: 0; }
  .hero__row { position: absolute; z-index: 1; left: 50%; top: 0; translate: -50% 0; display: flex; align-items: flex-start; perspective: 1700px; }
  .hero__dev { --w: var(--hero-w); position: relative; }
  .hero__dev--l { z-index: 1; margin-right: calc(var(--hero-w) * -0.03); rotate: y 22deg; }
  .hero__dev--c { z-index: 2; scale: 1.12; transform-origin: 50% 0; }
  .hero__dev--r { z-index: 1; margin-left: calc(var(--hero-w) * -0.03); rotate: y -22deg; }
  @media (min-width: 640px) {
    .hero__title { font-size: clamp(3.5rem, 15cqw, 6.75rem); }
    .hero__art { --hero-w: clamp(210px, 26vw, 380px); margin-top: 36px; }
    .hero__dev--c { scale: 1; }
  }
  @media (min-width: 900px) {
    .hero__stage { padding-top: 100px; }
    .hero__copy { gap: 18px; }
    .hero__copy .lead { max-width: 40em; }
    .hero__cta { grid-auto-flow: column; align-items: center; gap: 24px; margin-top: 4px; text-align: left; }
    .hero__cta .fine { max-width: 36em; }
  }

  /* ---- deck check: the app's own notes in one horizontal pager (scroll snap, arrows from site.js, same pattern as the sets rail),
        every note straight and readable in full; below it the first paragraph with the Commander Deck Basics card beside it, then a phone. */
  .head.center .tier { justify-self: center; }
  .notes { --pad: max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; gap: 14px; margin: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 8px var(--gutter) 40px var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .notes::-webkit-scrollbar { display: none; }
  .notes:focus-visible { outline-offset: -3px; }
  .note { flex: none; width: min(86vw, 22rem); margin: 0; scroll-snap-align: start; }
  .note img, .check-card img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 1px rgb(var(--ink) / 0.18)) drop-shadow(0 12px 16px rgb(var(--ink) / 0.12)); }
  .check-points { display: grid; gap: 32px; margin-top: clamp(32px, 5vw, 56px); }
  @media (min-width: 900px) { .check-points { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(64px, 8vw, 128px); } }
  .check-card { width: 100%; max-width: 28rem; margin: 0; }
  .check-explain { margin-top: clamp(72px, 10vw, 128px); }
  .check-new { margin-top: clamp(56px, 8vw, 96px); }
  .check-new + .check-close { margin-top: clamp(40px, 6vw, 64px); }
  .check-close { margin-top: clamp(56px, 8vw, 96px); display: grid; gap: 20px; }

  /* ---- prices */
  .price-stage { position: relative; }
  #prices .lead { text-wrap: balance; } /* no last line with a single word */
  /* the price row is the point of this scene: a capsule with the same content, larger than the recording's row, lies over the device and reaches past its edges (D98, D99).
     It sits on the row (centre fitted on the 828 x 1800 frame: 49.8 percent across, 86.3 percent down the device) and covers it. --price-k is the scale against the row; the width never exceeds the column. */
  .price-stage .device { --price-k: 1.3; }
  .price-row { position: absolute; max-width: none; left: 49.83%; top: 86.31%; translate: -50% -50%; width: min(calc(var(--w) * 0.95 * var(--price-k)), calc(100vw - 2 * var(--gutter))); height: auto; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 1px rgb(var(--ink) / 0.25)) drop-shadow(0 12px 16px rgb(var(--ink) / 0.3)); }

  /* set filter scene (sets section): text beside a device that plays the screen recording once */
  .filter-scene { margin-top: clamp(72px, 10vw, 128px); }
  .h2--sub { font-size: clamp(2rem, 2.4vw + 1.2rem, 3.5rem); line-height: 1.02; }
  .filter-scene .device, .swipe-scene .device { --w: min(68vw, 300px); }
  /* the poster is an image under the video (a poster attribute would load at page start); the video shows once it plays */
  video[data-demo] { opacity: 0; }
  video[data-demo].is-live { opacity: 1; }
  .demo-toggle {
    margin-top: 22px; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--text-1);
    box-shadow: inset 0 0 0 1px var(--line-strong); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer;
  }
  .demo-toggle:hover { background: var(--bg-2); }
  .demo-toggle[hidden] { display: none; }
  .footref { display: inline-block; min-width: 24px; padding-inline: 4px; margin-inline: -2px; color: var(--text-3); text-decoration: none; text-align: center; }

  /* ---- search demo */
  .query { display: grid; gap: 16px; max-width: 30rem; }
  .query__field {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 17px 22px; border-radius: 999px;
    background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 #fff; font-family: var(--mono); font-weight: 500; font-size: clamp(1.125rem, 1vw + 0.95rem, 1.4rem); color: var(--text-1);
  }
  .query__field .ico { color: var(--text-3); }
  .query__text { position: relative; white-space: nowrap; letter-spacing: 0; }
  .query__cover { display: none; position: absolute; z-index: 1; inset: 0; background: var(--bg-2); transform-origin: 100% 50%; }
  .query__caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; background: var(--accent-strong); vertical-align: -0.2em; }
  /* example searches: what a query can ask for, in plain words first, the query under it */
  .asks { display: grid; gap: 18px; max-width: 30rem; }
  .asks li { display: grid; gap: 4px; }
  .asks code { font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; color: var(--accent-strong); overflow-wrap: anywhere; }
  /* a folded block inside a section (Search: the syntax examples), the same marker as the FAQ (D107) */
  .more { max-width: 30rem; border-block: 1px solid var(--line-strong); }
  .more summary { position: relative; display: block; padding: 16px 40px 16px 0; cursor: pointer; color: var(--text-1); font-weight: 580; font-stretch: 92%; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.005em; list-style: none; }
  .more summary::-webkit-details-marker { display: none; }
  .more summary::before, .more summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--text-2); border-radius: 2px; transition: transform var(--t-base) var(--ease-out); }
  .more summary::after { transform: rotate(90deg); }
  .more[open]:not(.is-closing) summary::after { transform: rotate(0deg); }
  .more summary:hover::before, .more summary:hover::after { background: var(--accent-strong); }
  .more .copy { margin-top: 2px; }
  .more .asks { padding: 14px 0 24px; }

  /* search: two screens side by side, slightly turned. The stage is the size container, so the pair scales with its column. */
  .stage--duo { container-type: inline-size; }
  .duo { --d: min(92cqw, 32rem); position: relative; width: var(--d); height: calc(var(--d) * 1.1); }
  .duo .device { --w: calc(var(--d) * 0.47); position: absolute; }
  .duo .device:first-child { left: 0; top: calc(var(--d) * 0.1); z-index: 1; transform: rotate(-5deg); }
  .duo .device:last-child { right: 0; top: 0; z-index: 2; transform: rotate(4deg); }

  /* ---- sets rail */
  .rail-wrap { margin-top: clamp(40px, 6vw, 64px); }
  .rail {
    --pad: max(var(--gutter), calc((100vw - var(--max)) / 2)); display: flex; gap: clamp(20px, 3vw, 40px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 32px var(--pad) 40px; scroll-padding-inline: var(--pad); scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail:focus-visible { outline-offset: -3px; }
  .rail__item { flex: none; display: grid; gap: 22px; align-content: start; justify-items: center; width: min(66vw, 280px); scroll-snap-align: center; text-align: center; }
  .rail__item .device { --w: min(66vw, 280px); }
  .rail__item figcaption { display: grid; gap: 6px; }
  .rail__item h3 { font-size: 1.375rem; letter-spacing: -0.008em; }
  .rail__item p { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
  .rail__hint { display: none; }
  .lists { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .lists li { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-1); font-size: 0.9375rem; }


  /* ---- switches (terms): the app's card settings as an inert preview, in a frame of the device's materials (rim, black bezel) with the app's own dark rows */
  .frame { position: relative; width: min(100%, 380px); padding: 11px; border-radius: 40px; background: linear-gradient(148deg, #b4bbbf 0%, #6a7176 7%, #2c3135 22%, #121517 46%, #262b2f 72%, #7d858b 92%, #a7aeb3 100%); box-shadow: 0 0 0 1px rgb(var(--ink) / 0.3), 0 1.2em 1.6em -1em rgb(var(--ink) / 0.5), 0 3.4em 5em -2.2em rgb(var(--ink) / 0.5), 0 4.4em 6em -3em rgb(var(--mint) / 0.75); }
  .frame::before { content: ""; position: absolute; inset: 3px; border-radius: 37px; background: #030405; }
  .frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.06) 32%, rgb(255 255 255 / 0.02) 66%, rgb(255 255 255 / 0.22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .switches { position: relative; display: grid; border-radius: 29px; background: #1c1c1e; overflow: hidden; margin: 0; padding: 0; min-width: 0; border: 0; }
  .switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 20px; cursor: pointer; color: #f2f2f7; font-size: 1rem; }
  .switch + .switch { border-top: 1px solid #38383a; }
  .switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .switch__ui { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: #39393d; }
  .switch__ui::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; transition: opacity var(--t-base) var(--ease-io); }
  .switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); transition: transform var(--t-base) var(--ease-out); }
  .switch input:checked + .switch__ui::before { opacity: 1; }
  .switch input:checked + .switch__ui::after { transform: translateX(20px); background: #fff; }
  .switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

  /* ---- offline: one connection symbol above the headline, struck through (no box). 1 unit of the 24 unit symbol = --s / 24 */
  .offline__icon { --s: clamp(88px, 10vw, 128px); position: relative; width: var(--s); height: var(--s); margin: 0 auto clamp(28px, 4vw, 40px); color: var(--text-3); }
  .offline__icon .ico { width: 100%; height: 100%; stroke-width: 1.1; }
  .offline__icon .strike { position: absolute; left: 6%; right: 6%; top: 56%; height: calc(var(--s) * 1.1 / 24); translate: 0 -50%; border-radius: 999px; background: var(--text-1); box-shadow: 0 0 0 calc(var(--s) * 0.04) var(--bg-0); transform: rotate(45deg); }

  /* ---- privacy */
  .privacy-note { display: grid; gap: 22px; justify-items: center; }
  /* offline and data share one section since D107: the data block follows the offline lead after one section gap */
  .offline__data { margin-top: var(--pad-y); }
  /* the maker block: a short first person text, centered (D112) */
  .maker { display: grid; gap: 22px; justify-items: center; }
  /* a waving hand above the headline, the same size and colour as the offline symbol (D115) */
  .maker__icon { --s: clamp(88px, 10vw, 128px); width: var(--s); height: var(--s); margin-bottom: clamp(6px, 1.5vw, 18px); color: var(--text-3); }
  .maker__icon .ico { width: 100%; height: 100%; stroke-width: 1.1; }
  .maker .lead { max-width: 30em; }

  /* ---- privacy: three promises as a ruled row, same vocabulary as the fact lists */
  .pillars { display: grid; margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--line-strong); text-align: left; }
  .pillars li { display: grid; gap: 14px; align-content: start; padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
  .pillars .ico { width: 30px; height: 30px; stroke-width: 1.35; color: var(--accent-strong); }
  .pillars h3 { font-size: clamp(1.375rem, 0.9vw + 1.1rem, 1.75rem); line-height: 1.1; letter-spacing: -0.008em; }
  .pillars p { font-size: 1rem; line-height: 1.55; max-width: 28em; }
  .pillars__link { margin-top: 36px; }
  @media (min-width: 900px) {
    .pillars { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
    .pillars li { gap: 18px; border-bottom: 0; padding: 36px 32px 40px 0; }
    .pillars li + li { padding-left: 32px; border-left: 1px solid var(--line); }
  }

  /* ---- compare table: ruled, the Plus column is marked by its pip, not by a tint */
  .compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
  .compare th, .compare td { padding: 16px 10px; text-align: center; border-bottom: 1px solid var(--line); }
  .compare thead th { padding-block: 0 14px; border-bottom: 1px solid var(--line-strong); color: var(--text-1); font-size: 1rem; font-weight: 560; }
  .compare thead .tier { padding: 0; border: 0; color: inherit; font-size: inherit; font-weight: inherit; justify-content: center; }
  .compare thead th:last-child { color: var(--accent-strong); }
  .compare tbody th { text-align: left; font-weight: 500; color: var(--text-1); padding-left: 0; width: 54%; }
  .compare td { color: var(--text-2); width: 23%; }
  .compare .ico { margin-inline: auto; width: 22px; height: 22px; }
  .compare td .ico { color: var(--text-2); }
  .compare td:last-child .ico { color: var(--accent-strong); }
  .compare td .no { color: var(--text-3); }
  .compare tbody th small { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 400; color: var(--text-3); }
  @media (min-width: 700px) { .compare { font-size: 1.0625rem; } .compare th, .compare td { padding: 20px 16px; } }

  /* ---- faq: a ruled list */
  .faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line-strong); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { position: relative; display: block; padding: 22px 48px 22px 0; cursor: pointer; color: var(--text-1); font-weight: 580; font-stretch: 92%; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--text-2); border-radius: 2px; transition: transform var(--t-base) var(--ease-out); }
  .faq summary::after { transform: rotate(90deg); }
  .faq details[open] summary::after { transform: rotate(0deg); }
  .faq summary:hover::before, .faq summary:hover::after { background: var(--accent-strong); }
  .faq__a { display: grid; gap: 12px; padding: 0 48px 26px 0; max-width: 42rem; font-size: 1rem; }
  @media (min-width: 900px) { .faq summary { padding: 26px 56px 26px 0; font-size: 1.375rem; } .faq__a { padding: 0 56px 30px 0; font-size: 1.0625rem; } }

  /* ---- download */
  .download { overflow: clip; text-align: center; }
  .download__inner { display: grid; justify-items: center; gap: 24px; }
  .download__icon { border-radius: 22px; position: relative; }
  .download__qr { display: none; }
  .qr { display: grid; justify-items: center; gap: 12px; padding: 16px; border-radius: var(--r-panel); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 16px 32px -20px rgb(var(--ink) / 0.35); color: #11181f; }
  .qr img { width: 132px; height: 132px; }
  .qr p { font-size: 0.875rem; color: #1f2933; max-width: 15em; line-height: 1.4; }
  .dl-actions { display: grid; gap: 28px; justify-items: center; }
  @media (min-width: 900px) { .dl-actions { grid-template-columns: auto auto; align-items: center; gap: 56px; } .download__qr { display: block; } }
  .facts-dl { display: grid; gap: 16px 40px; margin-top: 28px; text-align: left; grid-template-columns: 1fr 1fr; padding-top: 24px; border-top: 1px solid var(--line-strong); width: min(100%, 44rem); }
  @media (min-width: 900px) { .facts-dl { grid-template-columns: repeat(5, auto); gap: 16px 32px; width: min(100%, 56rem); } }
  .facts-dl dt { font-size: 0.875rem; color: var(--text-3); font-weight: 500; }
  .facts-dl dd { color: var(--text-1); font-size: 1rem; margin-top: 2px; }
  .contact { margin-top: 12px; }

  /* ---- footer */
  .footer { background: var(--bg-1); border-top: 1px solid var(--line); padding-block: 56px 72px; color: var(--text-3); }
  .footer__top { display: grid; gap: 28px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .footer__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text-1); font-weight: 640; font-stretch: 90%; font-size: 1.1875rem; text-decoration: none; }
  .footer__brand img { border-radius: 8px; }
  .footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
  .footer__links a { color: var(--text-2); font-size: 1rem; text-decoration: none; padding-block: 8px; display: inline-block; }
  .footer__links a:hover { color: var(--text-1); text-decoration: underline; }
  .footer__legal { display: grid; gap: 14px; margin-top: 32px; max-width: 60rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-3); }
  .footer__legal a { color: var(--text-2); }
  @media (min-width: 900px) { .footer__top { grid-template-columns: 1fr auto; } }

  /* ---- prose pages (privacy, imprint, 404) */
  .page { padding-top: calc(var(--pad-y) + 24px); padding-bottom: var(--pad-y); }
  .prose { max-width: 44rem; margin-inline: auto; }
  .prose .h2 { margin-bottom: 12px; }
  .prose__updated { color: var(--text-3); font-size: 0.9375rem; margin-bottom: 40px; }
  .prose__block { padding-block: 28px; border-top: 1px solid var(--line); }
  .prose__block h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.008em; font-stretch: 92%; margin-bottom: 12px; }
  .prose__block p + p { margin-top: 12px; }
  .prose__block ul { list-style: disc; padding-left: 1.25em; margin-block: 12px; display: grid; gap: 8px; }
  .prose__block li::marker { color: var(--text-3); }
  .notfound { display: grid; justify-items: center; gap: 20px; text-align: center; min-height: 70svh; align-content: center; }
}

@media (forced-colors: active) {
  .tile, .switch__ui, .tiles, .lists li, .qr, .query__field { border: 1px solid CanvasText; }
  .nav__cta, .btn { border: 1px solid ButtonText; }
  .switch input:checked + .switch__ui { background: Highlight; }
  .tier--plus { border-color: CanvasText; }
  .offline__icon .strike { background: CanvasText; }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  /* reveal fallback when scroll driven animations are not available (set by site.js) */
  @media (prefers-reduced-motion: no-preference) {
    @supports not (animation-timeline: view()) {
      .js .reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
      .js .reveal.is-in { opacity: 1; transform: none; }
    }
  }

  /* load animation of the hero (transform and opacity only, the h1 stays visible for LCP) */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
    @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
    @keyframes device-in { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
    .hero__title { animation: rise 0.8s var(--ease-out) both; }
    .hero__copy .lead { animation: fade-up 0.8s 0.1s var(--ease-out) both; }
    .hero__dev { animation: device-in 1s 0.15s var(--ease-out) both; }
    .hero__dev--l, .hero__dev--r { animation-delay: 0.3s; }
  }

  /* infinite, tiny: the caret in the search demo */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
    .query__caret { animation: caret 1.05s steps(1) infinite; }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* ---- navigation capsule gets its surface after the first 140px */
      @keyframes nav-bg { from { opacity: 0; } to { opacity: 1; } }
      .nav__bar::before { opacity: 0; animation: nav-bg linear both; animation-timeline: scroll(root); animation-range: 0 140px; }

      /* ---- reveal, parallax */
      @keyframes reveal { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
      .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 4% entry 55%; }
      .reveal--late { animation-range: entry 14% entry 65%; }
      @keyframes par { from { transform: translateY(40px); } to { transform: translateY(-40px); } }
      .par { animation: par linear both; animation-timeline: view(); animation-range: cover; }
      @keyframes glow-in { from { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } to { opacity: 0.5; transform: scale(1.1); } }
      .stage .glow { animation: glow-in linear both; animation-timeline: view(); animation-range: cover; }

      /* ---- search demo: the query types itself */
      @keyframes type { from { transform: scaleX(1); } to { transform: scaleX(0); } }
      .query__cover { display: block; transform-origin: 100% 50%; animation: type steps(13, end) both; animation-timeline: view(); animation-range: entry 25% entry 80%; }
      .query__caret { animation: none; }

      /* ---- sets rail: devices scale up towards the centre of the scroller */
      @keyframes rail { 0% { opacity: 0.38; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.38; transform: scale(0.86); } }
      .rail__item { animation: rail linear both; animation-timeline: view(inline); animation-range: cover; }
      @media (min-width: 1240px) { .rail__item { animation: none; } }

      /* ---- offline: the connection fades while the line strikes it out */
      @keyframes net-off { from { opacity: 1; } to { opacity: 0.55; } }
      @keyframes strike { from { transform: rotate(45deg) scaleX(0); } to { transform: rotate(45deg) scaleX(1); } }
      .offline__icon .ico { animation: net-off linear both; animation-timeline: view(); animation-range: entry 20% entry 70%; }
      .offline__icon .strike { animation: strike linear both; animation-timeline: view(); animation-range: entry 20% entry 60%; }

      /* ---- maker: the hand waves while the section comes into view and rests in its drawn pose, the gust lines fade in */
      @keyframes wave { 0% { transform: rotate(-10deg); } 30% { transform: rotate(9deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } 100% { transform: none; } }
      @keyframes gust { from { opacity: 0; } to { opacity: 1; } }
      .maker__icon .wave { transform-origin: 14px 21px; animation: wave linear both; animation-timeline: view(); animation-range: entry 15% entry 85%; }
      .maker__icon .gust { animation: gust linear both; animation-timeline: view(); animation-range: entry 15% entry 55%; }
    }
  }

  /* overview: the phones lift a little on hover and keyboard focus, so more of them shows, and straighten slightly */
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .tile__dev { transition: transform 0.5s var(--ease-out); }
    .tile:hover .tile__dev--a, .tile:focus-visible .tile__dev--a { transform: translateY(-8px) rotate(calc(var(--tile-ra, -7deg) + 2deg)); }
    .tile:hover .tile__dev--b, .tile:focus-visible .tile__dev--b { transform: translateY(-12px) rotate(calc(var(--tile-rb, 5deg) - 2deg)); }
  }
}