/* THE PAGE SYSTEM: POSTER (the owner's pick of 12 Nov 2026, option A; every page of the site obeys it).
     1. One centre line. A band is a heading, at most one line of lede, ONE module and one last row (at most one
        line of small print and at most ONE secondary link). On the home page a band is one screen from 1000 px.
     2. Type: three sizes on a screen. The display face at ONE size (--d2: every heading and every big number; --d1
        only for the home page's headline and its one poster number), 20 px, and 16 px. Nothing under 16 px.
     3. Colour on text: white, one muted tone, the cyan accent; the dark ink only on a cyan object.
     4. No rules between bands and no second background tone: air tells the bands apart. A picture or a clip floats on
        the ground without a frame. A panel is a filled shape without a border; a border is kept for what is typed
        into (a field) and for the second way in (the "I have a code" pill): at most two bordered boxes a screen.
     5. The bar is one row at every width: under 900 px the brand and the button (the pages are in the footer).
     6. Motion: one moving thing per band; nothing advances by itself except a clip while it is in view. */
  :root {
    color-scheme: dark;
    --bg:#0c1016; --panel:#151d26; --panel-2:#1b2631; --line:#6b8498; --text:#edf5fc; --muted:#9caebe;
    --cyan:#55dff2; --cyan-hi:#a1f6ff; --cyan-ink:#062a35; --error:#ff8a80;
    --display:"Lilita One", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
    --body:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --d1:clamp(52px, 9.4vw, 120px); --d2:clamp(40px, 5.6vw, 72px); --band:56px;
  }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  html { -webkit-text-size-adjust:100%; scroll-padding-top:84px; }   /* the sticky bar never covers a focused element or an anchor */
  body { margin:0; color:var(--text); font:16px/1.5 var(--body); min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    /* the glow belongs to the corner: a fixed size, not a share of the page's height */
    background:radial-gradient(ellipse 760px 560px at 88% 0, #163343 0, transparent 70%) no-repeat, var(--bg); }
  main { display:block; }
  a { color:var(--cyan); }
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, video:focus-visible, [tabindex="0"]:focus-visible { outline:2px solid var(--cyan-hi); outline-offset:3px; }
  model-viewer:focus-visible { outline:2px solid var(--cyan-hi); outline-offset:-4px; }
  ::selection { background:var(--cyan); color:var(--cyan-ink); }
  :root { accent-color:var(--cyan); }
  input { caret-color:var(--cyan); }
  p, li, dd { text-wrap:pretty; }
  small { font-size:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
  .skip { position:absolute; left:16px; top:-90px; z-index:60; }
  .skip:focus { top:8px; }                                /* the first Tab on every page: skip to content */
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #main { position:absolute; }

  /* Type: the display face at one size, then 20 px, then 16 px */
  h1, h2, h3, h4 { margin:0; font:400 20px/1.2 var(--display); letter-spacing:.3px; text-wrap:balance; }
  h1, .band > .wrap > h2, .pg-sec > h2, .pg-buy h2 { font-size:var(--d2); line-height:1; text-shadow:0 4px 0 #071118; }
  h1 .accent, h2 .accent { color:var(--cyan); }

  /* The bar: the brand, the pages, the way in. It stays on screen, so Subscribe is always one click away */
  .topbar { position:sticky; top:0; z-index:50; background:#0c1016d9; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; }
  .brand { display:flex; align-items:center; min-height:44px; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:1px; font-size:20px; white-space:nowrap; }
  .mark { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font:22px/1 var(--display); color:var(--cyan-ink);
    background:linear-gradient(140deg,#a1f6ff,#32c9e8); box-shadow:0 4px 24px #23c8e533; }
  .topnav, .navlinks { display:flex; align-items:center; gap:18px; }
  .navlinks a, .code-link { padding:10px 0; color:var(--muted); font-size:20px; text-decoration:none; white-space:nowrap; }   /* the bar is 74 px with them: 74 + 726 is one screen of 800 */
  .navlinks a:hover, .code-link:hover { color:var(--text); }

  /* Buttons: the fat cyan one is the only filled object of a row; the pill is the second way in */
  .btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border:0; border-radius:12px;
    font:400 20px/1 var(--display); letter-spacing:.5px; color:var(--cyan-ink); text-decoration:none; cursor:pointer; white-space:nowrap;
    background:linear-gradient(120deg,#8af0ff,#43cde7); box-shadow:0 6px 0 #1b8fa6, 0 10px 30px #21b8d533; }
  .btn:hover { background:linear-gradient(120deg,#b4f7ff,#5fd8ee); }
  .btn:active { transform:translateY(3px); box-shadow:0 3px 0 #1b8fa6; }
  .btn.small { min-height:44px; padding:0 18px; box-shadow:0 4px 0 #1b8fa6; }   /* a 44 px tap target in the bar */
  .btn.soon, .btn.soon:hover { color:var(--muted); background:var(--panel-2); box-shadow:0 6px 0 #070b10; cursor:default; }
  .btn.soon:active { transform:none; box-shadow:0 6px 0 #070b10; }
  .btn.soon.small, .btn.soon.small:active { box-shadow:0 4px 0 #070b10; }
  .pill { display:inline-flex; align-items:center; min-height:52px; padding:0 24px; border-radius:999px; text-decoration:none;
    font:400 20px/1 var(--display); letter-spacing:.4px; color:var(--text); background:var(--panel); border:1px solid #5f788c; }
  .pill:hover { border-color:var(--cyan); color:var(--cyan); }
  .round { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--panel-2); color:var(--text); }
  .round:hover { background:var(--cyan); color:var(--cyan-ink); }
  .round svg { width:20px; height:20px; }
  .round svg + svg, .round[aria-pressed="true"] svg:first-child { display:none; }
  .round[aria-pressed="true"] svg + svg { display:block; }
  .buy { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 20px; margin-top:26px; }
  .price, .plans { font:400 20px/1 var(--display); letter-spacing:.3px; }
  .plans { color:var(--muted); }

  /* A band: air, no rule, the page's own ground, everything on the centre line */
  .band { position:relative; padding:var(--band) 0; text-align:center; }
  .band-lede, .what { margin:16px auto 0; max-width:60ch; font-size:20px; line-height:1.5; }
  .band-foot { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 28px; margin-top:20px; }
  .band-fine { margin:0; max-width:76ch; color:var(--muted); font-size:16px; line-height:1.5; text-wrap:balance; }
  .more { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--cyan); font:650 20px/1.2 var(--body); text-decoration:none; }
  .more:hover { text-decoration:underline; text-underline-offset:4px; }
  .more svg { width:20px; height:20px; flex:none; }
  .pagehead { padding-top:var(--band); text-align:center; }

  /* The home page's first screen: the headline at poster size, the plain line, the buy row, three facts, then a fan
     of five of our islands' key art (the middle one in front; the two at the ends run off the screen) */
  .hero { position:relative; padding:28px 0 0; overflow:hidden; text-align:center; }
  .hero h1, .poster-n { font:400 var(--d1)/.95 var(--display); }
  .hero h1 .accent, .closer h2 .accent { display:block; }
  .hero .what { margin-top:20px; max-width:none; }
  .assure { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 22px; color:var(--muted); font-size:16px; font-weight:600; line-height:1.5; }
  .assure li, .checks li { display:flex; align-items:center; gap:8px; }
  .assure li::before, .checks li::before, .kb-steps li::before, .kn-proof::before { content:""; flex:none; width:16px; height:16px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239caebe' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat; }
  .test-note { margin:16px 0 0; color:var(--muted); font-size:16px; }
  .test-note b { color:var(--text); font-weight:700; }
  .fan { display:flex; justify-content:center; align-items:flex-start; height:262px; margin-top:30px; }
  .fan img { flex:none; width:400px; height:auto; aspect-ratio:16/9; object-fit:cover; margin:0 -36px; border-radius:20px; background:var(--panel-2); box-shadow:0 18px 40px #000b; }
  .fan img:nth-child(1) { transform:translateY(46px) rotate(-7deg) scale(.78); }
  .fan img:nth-child(2) { transform:translateY(20px) rotate(-3.5deg) scale(.9); z-index:1; }
  .fan img:nth-child(3) { transform:translateY(8px) scale(1.04); z-index:2; }
  .fan img:nth-child(4) { transform:translateY(20px) rotate(3.5deg) scale(.9); z-index:1; }
  .fan img:nth-child(5) { transform:translateY(46px) rotate(7deg) scale(.78); }

  /* Numbered steps: a big numeral in the accent, a short title, at most one quiet line (the six steps of the whole
     job in two columns of three, the three setup steps, the steps of /how-it-works) */
  .nsteps { list-style:none; margin:28px auto 0; padding:0; width:fit-content; max-width:100%; display:grid; gap:20px 64px; counter-reset:n; text-align:left; }
  .nsteps.two { grid-template-rows:repeat(var(--rows, 3), auto); grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
  .nsteps li { counter-increment:n; display:flex; align-items:center; gap:18px; }
  .nsteps li::before { content:counter(n); flex:none; min-width:.62em; text-align:center; color:var(--cyan); font:400 var(--d2)/1 var(--display); text-shadow:0 4px 0 #071118; }
  .nsteps p { margin:2px 0 0; color:var(--muted); max-width:44ch; }
  /* a request, said as the page's own chat bubble */
  .nsteps .say-b { width:fit-content; margin-top:8px; padding:9px 15px; border-radius:16px 16px 16px 4px; background:linear-gradient(120deg,#8af0ff,#43cde7); color:var(--cyan-ink); font-weight:650; }
  .job-more { margin:28px auto 0; max-width:60ch; font-size:20px; line-height:1.5; }
  /* /how-it-works, "Show it a video": the example plan as a plain list (what the video shows, then where it comes from) */
  .vplan-cap { margin:28px auto 0; color:var(--muted); font-size:20px; line-height:1.5; }
  .vplan { list-style:none; margin:14px auto 0; padding:0; width:fit-content; max-width:100%; display:grid; grid-template-columns:auto auto; gap:12px 40px; text-align:left; font-size:20px; line-height:1.35; }
  .vplan li { display:contents; }
  .vplan b { font-weight:650; }
  .vplan span { color:var(--muted); }
  .vplan span.new { color:var(--cyan); }

  /* The film of a game, and the visitor's video as a drawn player set into its corner (never anybody's footage) */
  .pip { position:relative; max-width:740px; margin:28px auto 0; }
  .o-film { position:relative; margin:0; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:var(--panel); }
  .o-film video, .o-film img { display:block; width:100%; height:100%; object-fit:cover; }
  .o-film figcaption { position:absolute; left:14px; top:14px; max-width:calc(100% - 28px); padding:9px 16px; border-radius:20px; background:#0c1016eb; color:var(--text); font:400 20px/1.15 var(--display); letter-spacing:.3px; text-align:left; }
  .o-film figcaption b { font-weight:400; }
  .o-player { position:absolute; left:-96px; bottom:-30px; width:250px; aspect-ratio:16/9; border-radius:18px; background:var(--panel-2); display:grid; place-items:center; box-shadow:0 18px 40px #000c; }
  .o-play { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--text); color:var(--bg); }
  .o-play svg { width:32px; height:32px; margin-left:4px; }
  .o-line { position:absolute; left:16px; right:84px; bottom:22px; height:6px; border-radius:6px; background:#ffffff2b; }
  .o-line i { display:block; width:34%; height:100%; border-radius:6px; background:var(--cyan); }
  .o-time { position:absolute; right:16px; bottom:11px; color:var(--text); font:400 20px/1.4 var(--display); font-variant-numeric:tabular-nums; }
  .pip-arrow { position:absolute; right:-22px; top:-22px; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--cyan); color:var(--cyan-ink); rotate:-35deg; }
  .pip-arrow svg { width:26px; height:26px; }
  #v2g .band-foot { margin-top:46px; }
  /* where a band holds a number at poster size or nothing at 16 px, its small print is set at 20 px (three sizes) */
  #v2g .band-fine, #islands .band-fine { max-width:56ch; font-size:20px; }

  /* Real islands: one number at poster size, the totals as one quiet line, one island as a poster */
  .poster-n { margin:14px 0 0; color:var(--cyan); letter-spacing:1px; text-shadow:0 6px 0 #071118; white-space:nowrap; }
  .poster-n b { font-weight:400; }
  .lead { margin:8px 0 0; font-size:20px; line-height:1.5; }
  .quiet { margin:2px 0 0; color:var(--muted); font-size:20px; line-height:1.5; }
  .island { max-width:560px; margin:26px auto 0; }
  /* A measured number comes into place digit by digit, once: each digit rises from under its own line (the page's
     script builds the columns; only the number's own digits are ever seen) */
  .rd { display:inline-block; height:calc(var(--lh, 1) * 1em); line-height:calc(var(--lh, 1) * 1em); overflow:hidden; overflow:clip; overflow-clip-margin:.07em; vertical-align:top; }
  .rs { display:block; }
  .rs.up { transform:translateY(112%); transition:transform .55s cubic-bezier(.16,1,.3,1); }
  .go .rs.up { transform:none; }

  /* The wall of the studio's islands, from edge to edge of the window */
  .wall { position:relative; margin:28px 0 0; overflow:hidden; padding:22px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .wall-inner { transform:rotate(-3deg); display:grid; gap:16px; }
  .lane { display:flex; gap:16px; width:max-content; animation:drift 90s linear infinite; }
  .lane.rev { animation-direction:reverse; animation-duration:110s; }
  .lane img { width:clamp(190px, 25vw, 320px); height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; display:block; box-shadow:0 10px 24px #00000066; background:var(--panel-2); }
  @keyframes drift { to { transform:translateX(-50%); } }
  .still .lane { animation-play-state:paused; }
  .lane:not(.go) { animation:none; }                      /* a lane drifts once the script has made it endless */
  .wall:hover .lane { animation-play-state:paused; }

  /* The key box: one field (it hides the key), and the connector link it gives */
  .keybox { margin:34px auto 0; max-width:520px; }
  .keybox label { margin-bottom:10px; font-size:20px; font-weight:400; }
  label { display:block; font-weight:600; margin-bottom:8px; }
  input[type=password], input[type=text], input:not([type]) { width:100%; font:inherit; padding:13px 14px; border-radius:11px; border:1px solid var(--line); background:#0f1720; color:var(--text); }
  input.keyfield { font-family:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing:.2px; text-align:center; }
  input::placeholder { color:var(--muted); }
  form input + label { margin-top:16px; }
  form .btn { margin-top:16px; }
  form .btn + p, form + p { margin-top:14px; }
  .field { display:flex; gap:8px; align-items:stretch; margin-top:10px; text-align:left; }
  .copy { flex:1; min-width:0; background:#0f1720; border-radius:10px; padding:11px 13px; font:16px/1.45 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; color:var(--text); overflow-wrap:anywhere; }
  .copy.key { font-weight:600; color:var(--cyan); }
  button.copybtn { font:600 16px var(--body); border:0; background:var(--panel-2); color:var(--text); border-radius:10px; padding:0 14px; cursor:pointer; min-height:44px; }
  button.copybtn:hover { background:#2c4354; }
  code { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:1em; }

  /* The page ends with the action: the headline and the buy row, no card. On the home page the studio's own
     words stand under them as one quiet line */
  .quote { margin:40px auto 0; max-width:60ch; }
  .quote blockquote { margin:0 0 14px; color:var(--muted); font-size:20px; line-height:1.5; text-wrap:pretty; }
  .quote blockquote p { margin:0; }
  .quote figcaption { display:flex; justify-content:center; }
  .who { display:inline-flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; text-align:left; }
  .who:hover .who-name { color:var(--cyan); }
  .quote img { width:46px; height:46px; border-radius:50%; flex:none; background:var(--panel-2); }
  .who-name { display:block; font:400 20px/1.1 var(--display); letter-spacing:.6px; }
  .who-by { display:block; margin-top:2px; color:var(--muted); font-size:16px; }
  footer.wrap { margin-top:40px; padding-top:28px; padding-bottom:56px; color:var(--muted); font-size:16px; text-align:center; }
  footer p { margin:8px auto 0; max-width:86ch; }
  .footnav { display:flex; flex-wrap:wrap; justify-content:center; gap:0 22px; margin-bottom:10px; }
  .footnav a { display:inline-block; padding:10px 0; color:var(--muted); }   /* 44 px tap targets in the footer */
  .footnav a:hover { color:var(--text); }

  /* The detail pages: panels without a frame, a row of pills, a plain two-column list */
  .card { background:var(--panel); border-radius:20px; padding:20px; }
  .cards { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; text-align:left; }
  .cards p { margin:6px 0 0; color:var(--muted); }
  .pills { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .pills button, .pills a { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--panel-2); color:var(--muted); font:400 20px/1 var(--display); letter-spacing:.2px; text-decoration:none; cursor:pointer; }
  .pills button:hover, .pills a:hover { color:var(--text); }
  .pills [aria-selected="true"], .pills [aria-pressed="true"], .pills [aria-current="page"] { color:var(--cyan-ink); background:var(--cyan); }
  h3.sub { margin:44px 0 0; }
  .facts { list-style:none; margin:16px auto 0; padding:0; max-width:68ch; display:grid; gap:12px; text-align:left; color:var(--muted); }
  .facts b { color:var(--text); font-weight:650; }
  .cmp { margin:28px 0 0; display:grid; gap:6px; text-align:left; }
  .cmp > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; }
  .cmp span { padding:13px 20px; border-radius:12px; background:var(--panel); color:var(--muted); }
  .cmp span + span { background:var(--panel-2); color:var(--text); font-weight:600; }
  .cmp .cmp-h span { padding:0 20px 4px; background:none; color:var(--text); font:400 20px/1.2 var(--display); letter-spacing:.3px; }

  /* Pricing and the policies: a centred heading over a column of text */
  .legal { max-width:760px; padding-top:var(--band); padding-bottom:40px; }
  .legal.wide { max-width:1040px; }
  .legal h1, .narrow h1 { text-align:center; }
  .legal h1 + p { max-width:none; text-align:center; font-size:20px; margin:16px 0 28px; }
  .legal h1 + p.updated { font-size:16px; color:var(--muted); }
  .legal h2 { margin:30px 0 8px; }
  .legal p, .legal li { max-width:68ch; }
  .legal li { margin-bottom:6px; }
  .plans2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; align-items:stretch; }
  .plan { background:var(--panel); border-radius:20px; padding:28px; display:flex; flex-direction:column; align-items:flex-start; }
  .plans2 .plan:only-child { max-width:520px; margin:0 auto; width:100%; }
  .plan .amount { font:400 var(--d2)/1 var(--display); margin:8px 0 4px; }
  .plan .amount small { font:600 20px var(--body); color:var(--muted); }
  .plan > .btn, .plan > .pill { margin-top:auto; }        /* the two buttons stand on one line */
  .checks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 28px; }
  .plan .checks { margin:18px 0 26px; grid-template-columns:1fr; }
  .checks li { align-items:flex-start; max-width:none; margin:0; }
  .checks li::before { margin-top:4px; }
  .knowhow { margin:40px 0 26px; }
  .knowhow h2 { margin:0 0 14px; }
  .fine { color:var(--muted); margin:12px 0 0; }
  .legal .fine { max-width:none; }
  .built { margin:40px 0 8px; }
  .built .wall { margin:0 0 14px; padding:6px 0; }
  .built .wall-inner { transform:none; }
  .built .lane img { width:190px; }
  .legal .built-line { max-width:none; margin:0; text-align:center; font:400 20px/1.2 var(--display); letter-spacing:.3px; }

  /* The small pages (the code page, the key, welcome, the test checkout) */
  .narrow { max-width:660px; padding-top:var(--band); padding-bottom:56px; }
  .narrow h1 { margin-bottom:28px; }
  .panel { background:var(--panel); border-radius:18px; padding:24px; margin:0 0 18px; }
  .panel h2 { margin-bottom:8px; }
  .panel p { margin:0 0 12px; }
  .panel p:last-child { margin-bottom:0; }
  .panel ol { margin:0; padding-left:22px; }
  .panel ol li { margin:0 0 14px; color:var(--muted); }
  .panel ol li:last-child { margin-bottom:0; }
  .panel ol li strong { color:var(--text); }
  .note { background:var(--panel-2); border-radius:12px; padding:13px 15px; margin:0 0 20px; }
  .muted { color:var(--muted); }
  .error { color:var(--error); font-weight:600; }
  .creators { margin:18px 0 0; color:var(--muted); }

  .nofont h1, .nofont h2, .nofont h3, .nofont h4, .nofont .btn, .nofont .price, .nofont .plans, .nofont .pill, .nofont .who-name, .nofont .poster-n, .nofont .nsteps li::before, .nofont .o-film figcaption, .nofont .o-time, .nofont .built-line, .nofont .amount, .nofont .pills button, .nofont .pills a { font-weight:800; letter-spacing:-.5px; }

  @media (min-width:1000px) {
    /* on the home page a band is one screen: the next band's title does not look in */
    .home .band, .hero { min-height:726px; display:flex; flex-direction:column; justify-content:center; }
    .hero { justify-content:flex-start; }
    .home .band > .wrap { width:100%; }
    .home .band { --band:32px; }
  }
  @media (max-width:999px) {
    .fan img { width:300px; margin:0 -28px; }
    .fan { height:200px; }
    .o-player { left:-8px; width:200px; }
    .cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:900px) {
    /* the bar is one row: the brand and the button (the pages are in the footer and in each band's link) */
    .navlinks { display:none; }
  }
  @media (max-width:700px) { .topnav .code-link, .topnav .btn.soon { display:none; } }
  @media (max-width:600px) {
    :root { --d1:clamp(40px, 13.4vw, 60px); --band:36px; }
    body { background:radial-gradient(ellipse 340px 420px at 92% 0, #163343 0, transparent 70%) no-repeat, var(--bg); }
    .brand { letter-spacing:.5px; gap:9px; }
    .btn.small { padding:0 14px; }
    .hero { padding:24px 0 56px; }
    .hero h1 .accent { display:inline; }
    .hero .what { margin-top:14px; }
    .buy { margin-top:20px; }
    .buy .btn { flex:1 0 100%; }
    .vplan { grid-template-columns:minmax(0,1fr); gap:2px; }
    .vplan span { margin-bottom:12px; }
    .assure { margin-top:16px; }
    .fan { height:226px; margin-top:28px; }
    .fan img { width:296px; margin:0 -34px; }
    .nsteps, .nsteps.two { grid-template-rows:none; grid-auto-flow:row; gap:14px; }
    .nsteps li { gap:14px; }
    .pip { margin:22px -16px 0; }
    .o-film { border-radius:0; }
    .island { margin-left:-16px; margin-right:-16px; }
    .o-player { left:12px; bottom:-34px; width:150px; border-radius:12px; }
    .o-play { width:40px; height:40px; } .o-play svg { width:20px; height:20px; }
    .o-line { left:10px; right:64px; bottom:16px; height:4px; } .o-time { right:10px; bottom:5px; }
    .pip-arrow { right:-14px; top:-14px; width:36px; height:36px; } .pip-arrow svg { width:18px; height:18px; }
    #v2g .band-foot { margin-top:50px; }

    .cards, .checks { grid-template-columns:minmax(0,1fr); }
    .card { padding:18px 16px; border-radius:16px; }
    .cmp span { padding:11px 12px; }
    .cmp .cmp-h span { padding:0 12px 4px; }
    .pills { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:3px 16px 6px; scrollbar-width:none; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
      -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); }
    .pills::-webkit-scrollbar { display:none; }
    .pills button, .pills a { flex:none; scroll-snap-align:start; }
    .pills > :last-child { margin-right:40px; }
    .pg-seg.pills { justify-content:center; overflow:visible; margin:0; padding:0; -webkit-mask-image:none; mask-image:none; }
    .pg-seg.pills > :last-child { margin-right:0; }
  }
  @media (max-width:374px) { .brand { font-size:0; gap:0; } }   /* the narrowest phones: the mark alone */
  @media (prefers-reduced-motion: reduce) { .lane { animation:none; } .btn:active { transform:none; } }