/* Prefire website. Colours and type are the app's (app/LineupOverlay/UI/Shell/Theme.xaml): ground C.Bg, the picture
   well C.PicWell, three inks C.Text / C.Muted / C.Dim, the accent C.Fire with its pill gradient, hairlines. Gold is
   retired (the user, 2026-10-04); Premium's mark is the heart. Unbounded for display, Onest for everything else.
   The home page follows mockups/site-wire8.html: no horizontal lines but the FAQ's. */
/* THE FONTS, SERVED FROM THIS SITE (LAUNCH-READY part 2, 2026-10-25; the privacy review: Google Fonts saw every visitor's IP address):
   the same Google Fonts files, Onest (one variable file, 600 and 700) and Unbounded 600, latin and latin-ext, SIL Open Font Licence
   (fonts/*-OFL.txt). Swap as before: the fallback shows until the font lands */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/fonts/onest-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/unbounded-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/unbounded-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  /* the app's grey steps, darkest to lightest (Theme.xaml; the user, 2026-10-25: "use all the right grays"): the picture
     well, the ground, the bands that set off every other section, the tiles, a hovered tile, a selected control */
  --well: #08080B; --bg: #0B0B0E; --band: #14141A; --panel: #1D1D24; --raised: #24242C; --rail: #2A2A33;
  --text: #F2F2F5; --muted: #B6B6C0; --dim: #8C8C97; --ghost: #4A4A55;
  --fire: #FF2E43;
  --grad: linear-gradient(180deg, #FF4A5C 0%, #FF2E43 40%, #D91F33 100%);
  --ok: #78C85A;
  --hair: rgba(255,255,255,.09); --hair-hover: rgba(255,255,255,.28); --wash: rgba(255,255,255,.06);
  --divider: rgba(255,255,255,.22);
  --ui: "Onest", system-ui, "Segoe UI", sans-serif; --display: "Unbounded", var(--ui);
  --hh: 72px;              /* the header box (60) and its 12 px gap: what a linked section stops below */
  --gut: 40px;             /* side gutter */
  --max: 1120px;           /* content width */
  /* MOTION, one scale for the whole site (the user, 2026-10-25: "make sure all animations are on a consistent scale"), the
     app's clocks: a hover, a press or a colour change 140 ms; something opening or appearing 240 ms; something closing
     200 ms. Arriving eases out, leaving eases in (the app's cubic pair). The top's strike keeps its own timeline (bolt.js) */
  --t-hover: 140ms; --t-open: 240ms; --t-close: 200ms;
  --ease-out: cubic-bezier(.33,1,.68,1); --ease-in: cubic-bezier(.32,0,.67,0);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter (the design pass, 2026-10-26): a page too short to scroll keeps the scrollbar's lane, so the header and the page
   stand in the same place on every page (they moved 7 px between Account and Terms on a classic-scrollbar Windows) */
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { color: var(--muted); font: 600 15px/1.55 var(--ui); -webkit-font-smoothing: antialiased;
       min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
a { color: inherit; }
::selection { background: rgba(255,46,67,.35); color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
/* SKIP TO CONTENT (LAUNCH-READY part 2, 2026-10-25): the first stop of the Tab key on every page, out of sight until focused, then the
   red button's look over the header's corner (no grey boxes, the UI rules 2026-10-26); a keyboard or screen-reader visitor jumps past the header's links */
.skip { position: absolute; left: 12px; top: 12px; z-index: 40; height: 46px; display: inline-flex; align-items: center; padding: 0 24px;
        border-radius: 8px; background: var(--grad); color: #fff; font: 600 15px/1 var(--ui); text-decoration: none;
        transform: translateY(-200%); }
.skip:focus { transform: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
label { color: var(--muted); font-size: 14px; }

/* in-text links: ink one step up, a hairline under */
.ln { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--divider); transition: border-color var(--t-hover) var(--ease-out); }
.ln:hover { border-bottom-color: var(--text); }
.fine .ln, .ln.quiet { color: var(--muted); border-bottom-color: var(--hair-hover); }
.fine .ln:hover, .ln.quiet:hover { color: var(--text); border-bottom-color: var(--text); }

/* ---------- header: a box of its own, as wide as the content, pinned 12 px from the top; the wordmark left, Download
   right. Lineups, FAQ and Premium are off for now (the user, 2026-10-24: "get rid of the buttons for now except the
   download button"); their styles stay below for when they come back ---------- */
.sh { position: sticky; top: 12px; z-index: 20; height: 60px; display: flex; align-items: center;
      width: calc(100% - 2 * var(--gut)); max-width: var(--max); margin: 12px auto 0; padding: 0 12px 0 20px;
      border-radius: 12px;   /* a filled bar, no outline: the site draws no lines, like the app (the user, 2026-10-25) */
      background: none; }
/* GLASS again (the user, 2026-10-25, after a round solid: "bring the glassy effect back to the header and the dropdown"): the
   panel grey, see-through over a blur, still no outline. On a layer behind the header's contents rather than on the header
   itself: a blur on the header would make it the backdrop of everything inside it, and the dropdown's own blur would then
   see nothing (it hangs below the header) */
.sh::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
               background: rgba(29, 29, 36, .28); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
/* more glassy (the user, 2026-10-25: "make it more glassy", then "even more glassy"): mostly see-through, a wider blur, and what shows through it a
   little richer in colour, as frosted glass does; the words stay on top at full strength */
.wm { font: 600 19px/1 var(--display); color: var(--text); text-decoration: none; }
.wm i { font-style: normal; color: var(--fire); }
.sh .links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.sh .nlink { color: var(--muted); font-size: 14px; text-decoration: none; transition: color var(--t-hover) var(--ease-out); }
/* the links sit in the middle of the header box, the wordmark left and Download right (the user, 2026-10-24); Account
   joined them (the user, 2026-10-25: "add a way to access your account there"), white on its own page */
.sh .mid { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 28px; }
.sh .nlink:hover, .sh .nlink[aria-current] { color: var(--text); }
/* under 640 the links go behind a bare menu button just right of Download; the menu drops from the header box */
.sh .menu { display: none; margin-left: 12px; width: 32px; height: 36px; padding: 0; border: 0; background: none; color: var(--text);
            cursor: pointer; align-items: center; justify-content: center; }   /* bare, right of Download; its gap to Download is the header's right padding, so the icon sits as far from Download as from the box's edge (the user) */
.sh .menu svg { width: 20px; height: 20px; }
.sh .menu:hover { color: var(--muted); }
.sheet { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; padding: 6px;
         background: rgba(29, 29, 36, .42); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
         border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); }   /* glass, a touch less see-through than the bar (it sits over words), no outline */
/* THE MENU'S MOTION (the user's pick B, mockups/site-buttons/menu.html, 2026-10-25, after the swinging X "i really dislike"):
   the icon's three lines fade out as a small X fades in on the same spot, each a touch smaller when hidden, nothing swings;
   the menu fades in as it settles 6 px down into place, and goes back the same way. The site's motion scale: opening 240 ms
   easing out, closing 200 ms easing in (site.js hides the menu once its fade has run) */
.sh .menu { position: relative; }
.sh .menu .x { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; opacity: 0; transform: scale(.8); }
.sh .menu .lines, .sh .menu .x { transition: opacity var(--t-close) var(--ease-in), transform var(--t-close) var(--ease-in); }
.sh .menu[aria-expanded="true"] .lines, .sh .menu[aria-expanded="true"] .x { transition-duration: var(--t-open); transition-timing-function: var(--ease-out); }
.sh .menu[aria-expanded="true"] .lines { opacity: 0; transform: scale(.8); }
.sh .menu[aria-expanded="true"] .x { opacity: 1; transform: none; }
.sheet { opacity: 0; transform: translateY(-6px);
         transition: opacity var(--t-close) var(--ease-in), transform var(--t-close) var(--ease-in); }
.sheet.open { opacity: 1; transform: none; transition-duration: var(--t-open); transition-timing-function: var(--ease-out); }
.sheet a { padding: 13px 14px; border-radius: 8px; color: var(--muted); font-size: 15px; text-decoration: none; transition: color var(--t-hover) var(--ease-out); }
.sheet a:hover, .sheet a[aria-current] { color: var(--text); }   /* the words go white, no fill, as the header's links (the user, 2026-10-25) */
@media (max-width: 640px) { .sh .mid { display: none; } .sh .menu { display: inline-flex; } }
@media (min-width: 641px) { .sheet { display: none !important; } }

/* ---------- buttons: soft rectangles, no pills (the user, 2026-10-24: pills are not a fashionable shape); the card's
   corners scaled down: 10 on the big button, 8 on the middle ones, 7 on the small ---------- */
.t1 { height: 58px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 32px;
      font: 600 17px/1 var(--ui); color: #fff; background: var(--grad);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--drop, 0 0 0 transparent);
      white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; position: relative; isolation: isolate;
      transition: transform var(--t-hover) var(--ease-in), box-shadow var(--t-hover) var(--ease-in); }
/* THE APP'S HOVER AND PRESS (Theme.xaml Btn.Tier1; the user's pick A, mockups/site-buttons/hover.html, 2026-10-25): on hover
   it lifts (the app's 0.44 of 28.67, here 1 px), a small black shadow shows under it and the red turns a step brighter, on
   a 140 ms ease-out (ease-in on the way back); a click snaps it down, shadowless, a step darker, and a release fades back to
   the hover look. The two ramps are layers behind the words, faded in (a gradient cannot fade), each with the top light.
   Hover only where there is a mouse, so a tap on a phone never leaves it lifted */
.t1::before, .t1::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: opacity var(--t-hover) var(--ease-in); }
.t1::before { background: linear-gradient(180deg, #FF657D 0%, #FF3E5B 40%, #FF2945 100%); }   /* B.Tier1Hover */
.t1::after { background: linear-gradient(180deg, #E64353 0%, #E6293C 40%, #C31C2E 100%); }    /* B.Tier1Press */
@media (hover: hover) {
  .t1:not([disabled]):hover { --drop: 0 2px 3px rgba(0,0,0,.85); transform: translateY(-1px); transition-timing-function: var(--ease-out); }
  .t1:not([disabled]):hover::before { opacity: 1; transition-timing-function: var(--ease-out); }
}
.t1:not([disabled]):active { --drop: 0 0 0 transparent; transform: none; transition: none; }
.t1:not([disabled]):active::before { opacity: 0; transition: none; }
.t1:not([disabled]):active::after { opacity: 1; transition: none; }
/* a button is never squeezed in a row (the header, the closing card) and never wider than its column */
.t1 { max-width: 100%; flex-shrink: 0; }
.t1 svg { width: 18px; height: 18px; flex: 0 0 auto; }
.t1.sm { height: 36px; border-radius: 7px; padding: 0 18px; font-size: 14px; }   /* as the header's links (was 13.5) */
.t1.md { height: 46px; border-radius: 8px; padding: 0 26px; font-size: 15px; }
.t1[disabled] { filter: saturate(.4) brightness(.8); cursor: default; }
/* NO SECOND KIND (the user's UI rules, 2026-10-26, rule 2: no grey button boxes; the app's the same): the grey tier-2 box is gone,
   a second action is a plain word (.t3), and a page's one action is the red button */

/* ---------- type ---------- */
.fine { font-size: 13px; color: var(--dim); }
.sub { font-size: 16px; line-height: 1.5; color: var(--muted); }
.doc b { color: var(--text); font-weight: 600; }

/* ---------- inner pages: one reading column ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 64px var(--gut) 88px; width: 100%; }
.doc.wide { max-width: 980px; }
.doc h1 { font: 600 34px/1.12 var(--display); color: var(--text); margin-bottom: 14px; }
.doc .lede { font-size: 16.5px; color: var(--muted); max-width: 60ch; }
.doc h2 { font: 600 19px/1.3 var(--display); color: var(--text); margin: 48px 0 14px; scroll-margin-top: calc(var(--hh) + 20px); }
.doc h3 { font: 600 16px/1.4 var(--ui); color: var(--text); margin: 26px 0 6px; scroll-margin-top: calc(var(--hh) + 20px); }
.doc p, .doc li { max-width: 66ch; }
.doc p + p { margin-top: 10px; }
.doc ul, .doc ol { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--dim); }
.doc .meta { font-size: 13px; color: var(--dim); margin-bottom: 30px; }
.doc .actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.path { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }

/* status lines */
.status { display: flex; gap: 12px; align-items: baseline; border-radius: 12px; background: var(--panel);
          padding: 22px 24px; color: var(--text); font-size: 16px; line-height: 1.5; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; transform: translateY(-1px); }

/* forms */
/* THE TYPING FIELD (the user's UI rules, 2026-10-26: no grey boxes; the app's Num.Box, which every field the app types into wears):
   NO BOX - the words on the panel's ground, the field's extent a 1 px line under them, the hairline at rest, the dim grey under the
   pointer and white while typing (a keyboard visitor sees where they are), on the hover clock; the red caret the only accent */
.field { display: block; width: min(340px, 100%); height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent;
         box-shadow: inset 0 -1px 0 var(--divider); color: var(--text); font: 600 16px/1 var(--ui); caret-color: var(--fire);
         transition: box-shadow var(--t-hover) var(--ease-out); }
.field::placeholder { color: var(--dim); }
.field:hover { box-shadow: inset 0 -1px 0 var(--dim); }
.field:focus { outline: none; box-shadow: inset 0 -1px 0 var(--text); }
.field.code { width: min(220px, 100%); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.sr + .form-row { margin-top: 0; }   /* under a hidden label the row starts the panel: even air above and below (the polish round) */

/* ---------- the filmed media's shape ---------- */
.r1610 { aspect-ratio: 16 / 10; }

/* ---------- the filmed media (2026-10-24, footage/edit/site_v1.py): the placeholders' place and corners, the well behind while loading ---------- */
.shot { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--well); object-fit: cover; }

/* ---------- footer: links, then the disclaimer. No rule. ---------- */
.ft { padding: 40px var(--gut) 56px; display: flex; flex-direction: column; align-items: center;
      gap: 14px; font-size: 13px; color: var(--dim); text-align: center; }   /* fine print is 13 (was 12.5) */
.ft .links { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; }
.ft .links a { color: var(--dim); text-decoration: none; }
.ft .links a:hover, .ft .links a[aria-current] { color: var(--text); }
/* THE ADDRESS AS PLAIN TEXT (decision 20, 2026-10-27: the Contact page went; never a mail-app link). One click selects all of it to
   copy. In the footer the address alone on its own line over the Blizzard line, in the links' grey (the user's pick, decision 29 as amended) */
.addr { user-select: all; -webkit-user-select: all; color: var(--muted); }
.ft .mail { margin: 0; }
.ft .mail .addr { color: var(--dim); }
.doc .addr { color: var(--text); }   /* in a reading page's sentence it reads as the thing to copy, as the link did */

/* =====================================================================================================
   HOME (index.html), after mockups/site-wire8.html
   ===================================================================================================== */
.home { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.home section { padding: 80px 0; }
.home h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.12 var(--display); color: var(--text); letter-spacing: -.01em; }
.home h2 { font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--display); color: var(--text); }
.home .keep { white-space: nowrap; }

/* the words on the left, the pictures on the right (the user, 2026-10-24, "like valoplant or topaz labs"); narrower than
   900 the pictures go on top, the words under them, so the ult being supercharged is always what the eye meets */
.intro { padding: 88px 0 80px !important; display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro .sub { max-width: 34em; margin-top: 16px; text-wrap: balance; }
.intro .t1 { margin-top: 28px; }
.intro .fine { margin-top: 14px; }
.intro.hero { padding: 64px 0 80px !important; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; text-align: left; }
.hero .ww { grid-column: 2; grid-row: 1; }
.hero .htext { grid-column: 1; grid-row: 1; }
.hero .sub { margin-top: 14px; text-wrap: balance; }
/* the promise on a line of its own, so it never breaks after "Prefire" or trails a wrapped first sentence (the user,
   2026-10-24: the subtitle looked bad on narrow screens) */
.hero .sub b { display: block; margin-top: 2px; font-weight: 700; color: var(--text); }
.hero .t1 { margin-top: 28px; }   /* as the closing Download (was 26) */
.hero .fine { margin-top: 12px; }
/* the Without / With slash: one card cut on a slant, each half its own shot. The shot is 1.5x the card's width, its ult
   meter (50%, 58% of the shot) set at 27% of the card on the left half and 73% on the right. No tags, no arrow (the user,
   2026-10-24): the grey half and the bright half say before and after, and the seam is a white glowing line,
   the same white line and glow the screenshots draw round the meter (the user: the red stuck out). Still: a
   wipe on load was tried and dropped (the user) */
.slash { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--well);
         container-type: size; }
.slash .half { position: absolute; inset: 0; }
/* placed in the card's own units (cqw / cqh) so the meters stay at 27% / 73% whatever the card's shape: the shot is 1.5x
   the card's height (so 2.667x its height wide), its meter (50%, 58%) set at mid-height */
.slash .half img { position: absolute; height: 150cqh; width: auto; max-width: none; top: -37cqh; }
.slash .a { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.slash .a img { left: calc(27cqw - 133.33cqh); filter: saturate(.55) brightness(.8); }
.slash .b { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }
.slash .b img { left: calc(73cqw - 133.33cqh); }
.slash .seam { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible;
               filter: drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 8px rgba(255,255,255,.35)); }

/* BANDS: every other section sits on a full-width band one grey step above the ground (the app's surface), so the page
   reads as rooms; the top and the close stay on the ground */
.home > section.band::before { content: ""; position: absolute; z-index: -2; pointer-events: none; left: 50%; width: 100vw;
  transform: translateX(-50%); top: 0; bottom: 0; background: var(--band); }

/* THE TOP'S PAINTED LIGHT, shown only without the script (bolt.js hides it and draws the bolt): mockups/site-colour/paint.py
   makes media/bg/top-red, forked bolts in red haze, as see-through WebP whose light fades out on its own before every edge;
   a tall version under 700 px. The bottom's went (the user, 2026-10-25: "no lightning at the bottom"). Layers, back to
   front: the ground (html), the bands (-2), the light (-1), then every word and picture. The body has no fill of its own,
   or it would cover both */
html, body { overflow-x: clip; }   /* the full-width light never makes the page scroll sideways */
.home > section, .ft { position: relative; }
.home .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw;
  transform: translateX(-50%); background: center / 100% 100% no-repeat; }
.home .hero::before { top: -200px; bottom: -240px; background-image: url(/media/bg/top-red.webp); }
@media (max-width: 699px) {   /* the light ends before the next heading */
  .home .hero::before { bottom: -60px; background-image: url(/media/bg/top-red-tall.webp); }
}

/* THE TOP'S LIGHTNING (bolt.js; the user, 2026-10-25: the slash becomes a red bolt from the page's top edge, behind the header,
   down the seam to a fading tip; under 900 px the tip lands just above "Supercharge"). A stack of layers the window's width
   from the page's top edge to the top's foot (bolt.js sets both): above the picture (its bolt is the seam the two halves are
   cut along) and under the words (they stay on top); the painted light behind the top gives way to it. Its colours:
   --bolt-glow (the red), --bolt-hot (the pink edge) */
.home .hero { --bolt-glow: 255, 46, 67; --bolt-hot: 255, 120, 132; }
.home .hero .bolt { position: absolute; z-index: 1; pointer-events: none; top: 0; left: 0; }   /* placed on whole pixels by bolt.js */
/* its layers, painted once; the strike only changes their opacity (the graphics card's work, no redrawing). The glows add
   their light (plus-lighter), so the extra glow layer overexposes the channel at the strokes */
.home .hero .bolt .bl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity; }
.home .hero .bolt .gl { mix-blend-mode: plus-lighter; }
.home .hero .bolt.striking .gl { mix-blend-mode: normal; }   /* while the strike runs (bolt.js): blending light every frame made it choppy */
.home .hero.bolted .htext { position: relative; z-index: 2; }
.home .hero.bolted::before, .home .hero.bolted .seam { display: none; }
/* the page's head marks html .bolting before the first paint, so the painted light and the straight seam never show while
   bolt.js loads (the user: "on reload the old lightning still shows up sometimes"); till then the halves wear the strike's
   opening blend. bolt.js drops the mark if it cannot draw */
.bolting .home .hero::before, .bolting .home .hero .seam { display: none; }
.bolting .home .hero:not(.bolted) .slash .half { clip-path: none; }
.bolting .home .hero:not(.bolted) .slash .half.b { -webkit-mask-image: linear-gradient(98deg, transparent 40%, #000 60%); mask-image: linear-gradient(98deg, transparent 40%, #000 60%); }
/* before the strike the two halves blend softly across the middle, so the seam does not stand out yet; the stroke brings
   the sharp cut along the bolt (the user: "blend the middle where the strike goes ... without affecting the final state") */
.slash.pre .half { clip-path: none !important; }
.slash.pre .half.b { -webkit-mask-image: linear-gradient(98deg, transparent 40%, #000 60%); mask-image: linear-gradient(98deg, transparent 40%, #000 60%); }
/* "Supercharge" is charged by the strike (the user, 2026-10-25: "like the lightning activated the word"). Its two glows are
   layers of their own behind its letters (bolt.js fades them; the letters stay crisp on top): the glow it keeps, as strong
   as the bolt's, and the hotter flash of each stroke */
.hero .charge { position: relative; z-index: 0; white-space: nowrap; }
.hero .charge::before, .hero .charge::after { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1;
  will-change: opacity; pointer-events: none; }
/* the glows sit outside the letters: red only, sized to the letters (em), so the holes in the e and the a stay open at
   any size (the user: "the supercharge text is almost not legible ... no spaces in the e's") */
.hero .charge::before { opacity: var(--keep, 0); color: transparent; text-shadow: 0 0 .09em rgba(255, 46, 67, .9), 0 0 .2em rgba(255, 46, 67, .95),
  0 0 .42em rgba(255, 46, 67, .85), 0 0 .85em rgba(255, 46, 67, .7), 0 0 1.7em rgba(255, 46, 67, .5), 0 0 2.6em rgba(255, 46, 67, .35); }
.hero .charge::after { opacity: var(--hot, 0); color: transparent; text-shadow: 0 0 .09em rgba(255, 140, 150, 1), 0 0 .2em rgba(255, 70, 88, 1),
  0 0 .42em rgba(255, 46, 67, 1), 0 0 .85em rgba(255, 46, 67, .95), 0 0 1.7em rgba(255, 46, 67, .8), 0 0 3em rgba(255, 46, 67, .6); }

/* the home's videos (site.js 1d): while paused, the site's own red play button in the middle (the .t1 red, its corners
   and inner light); once started, a small bar of play, sound and a timeline to drag, showing on movement and hiding when
   still (the user, 2026-10-24) */
.player { position: relative; }
.player video { cursor: pointer; }
/* smaller and red (the user, 2026-10-25: "the play buttons on the videos look weird ... maybe too big"; glass, red then grey,
   was tried, then "nevermind just make it red"; mockups/site-buttons/play.html A): a 52 px red rounded square (was 72), the
   red buttons' ramp and top light; hover and click as theirs (the app's): a 1 px lift with the brighter ramp faded in, a click
   down in the darker one */
.pbig { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border: 0; border-radius: 9px;
        background: var(--grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.35), 0 0 0 transparent; color: #fff; cursor: pointer;
        display: grid; place-items: center; isolation: isolate;
        transition: opacity var(--t-close) var(--ease-in), transform var(--t-hover) var(--ease-in), box-shadow var(--t-hover) var(--ease-in); }
.pbig::before, .pbig::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: opacity var(--t-hover) var(--ease-in); }
.pbig::before { background: linear-gradient(180deg, #FF657D 0%, #FF3E5B 40%, #FF2945 100%); }
.pbig::after { background: linear-gradient(180deg, #E64353 0%, #E6293C 40%, #C31C2E 100%); }
.pbig svg { width: 20px; height: 20px; margin-left: 2px; }
@media (hover: hover) {
  /* the hover's small dark shadow under it, as on the red buttons (the user, 2026-10-25: "the video buttons are not making a
     shadow on hover like the rest of the buttons") */
  .pbig:hover { transform: translate(-50%, calc(-50% - 1px)); transition-timing-function: var(--ease-out);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.85); }
  .pbig:hover::before { opacity: 1; transition-timing-function: var(--ease-out); }
}
.pbig:active { transform: translate(-50%, -50%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.35), 0 0 0 transparent; transition: opacity var(--t-close) var(--ease-in); }   /* the press snaps; the fade as the video starts stays */
.pbig:active::before { opacity: 0; transition: none; }
.pbig:active::after { opacity: 1; transition: none; }
.player.playing .pbig { opacity: 0; pointer-events: none; }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 2px; padding: 28px 14px 10px 10px;
        background: linear-gradient(transparent, rgba(0,0,0,.6)); opacity: 0; pointer-events: none; transition: opacity var(--t-open) var(--ease-out); }
.player.started.awake .pbar, .player.started:focus-within .pbar { opacity: 1; pointer-events: auto; }
.pbtn { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 7px; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; }
.pbtn:hover { background: rgba(255,255,255,.12); }
.pbtn svg { width: 20px; height: 20px; }
/* the timeline: a thin line, white up to where the video is, a white dot to drag */
.pseek { flex: 1 1 auto; margin-left: 10px; height: 18px; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pseek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255,255,255,.3) var(--p, 0%)); }
.pseek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
.pseek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.pseek::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.pseek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
@media (max-width: 560px) { .pbig { width: 46px; height: 46px; border-radius: 8px; } .pbig svg { width: 18px; height: 18px; } }

/* site round 2026-10-24 (mockups/site-inspiration). Round 1's glow behind the top is gone (the user). Round 2: every section one
   ROW like the top (NVIDIA's app page), the picture 7 parts and the words 5, swapping sides down the page (.flip puts the
   picture on the left); ONE CARD for every picture, video and panel (Raycast); red only on Download and the With picture
   (colour itself is a later round, the user).
   NO LINES (the user, 2026-10-25, "there are not many in the app"): nothing on the page is outlined. A picture is its own
   edge; a panel is a step of fill above the ground, 12 px corners; what a line used to split inside a panel is its own
   tile with an 8 px gap (the app's Premium tiles), or rows told apart by a faint fill in turn */
.card { border-radius: 12px; background: var(--panel); overflow: hidden; }
.rmedia.card { background: transparent; }   /* the videos and the grid: no panel behind them */
.card > .shot { border-radius: 0; }

.row { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.row > .rtext { grid-column: 1; grid-row: 1; }
.row > .rmedia { grid-column: 2; grid-row: 1; min-width: 0; }
.row.flip { grid-template-columns: 7fr 5fr; }
.row.flip > .rtext { grid-column: 2; }
.row.flip > .rmedia { grid-column: 1; }
.row.top { align-items: start; }
/* every section is a heading and one line, no small label above (the user, 2026-10-24); both wrap balanced, like the
   top's subtitle, so a narrow screen never leaves one word hanging */
.rtext h2, .rtext .sub { text-wrap: balance; }
.rtext .sub { margin-top: 14px; max-width: 30em; }
/* the first question's tile lines up with the heading's top */
.row .qa { margin: 0; max-width: none; }

#lineups { scroll-margin-top: calc(var(--hh) + 8px); }
/* side by side, the Lineups heading and line ride down with the scroll beside the tall grid and stop at the section's
   bottom (the user, 2026-10-24) */
@media (min-width: 900px) { #lineups > .rtext { position: sticky; top: calc(var(--hh) + 32px); } }
/* Lineups as a coverage grid (the user, 2026-10-24): maps down the side, the six heroes across, a mark where a lineup
   exists, a check; the one gap (Junkrat on Rialto) a grey line */
.cover { padding: 0; }   /* no panel round the grid: its rows line up with the page's column */
.cover table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cover thead th:first-child { width: 9.6em; }   /* as wide as the longest map name ("Blizzard World", since Gibraltar went short) and the 10 px the rows start in, not a share of the card: no gap before the checks (the user) */
.cover th, .cover td { padding: 9px 4px; text-align: center; }
/* no row lines: every other row a faint fill, rounded at its ends */
.cover tbody tr:nth-child(odd) th, .cover tbody tr:nth-child(odd) td { background: var(--band); }
.cover tbody th { border-radius: 6px 0 0 6px; }
.cover tbody td:last-child { border-radius: 0 6px 6px 0; }
.cover thead th { font: 600 14px/1.3 var(--ui); color: var(--text); padding-top: 14px; vertical-align: bottom; }   /* the hero names as the map names (the user, 2026-10-25) */
.cover tbody th { text-align: left; font: 600 14px/1.3 var(--ui); color: var(--text); padding-left: 10px; }
.cover td svg { width: 15px; height: 15px; color: var(--fire); vertical-align: middle; }   /* the ticks in the one red (the user, 2026-10-25: "we could try red for the checkmarks") */
.cover td svg.x { color: var(--muted); }   /* the one gap: a short line in the hero names' grey, not red (the user) */
/* the hero names sit level (the user: upright was hard to read); Widowmaker shortens to Widow where the columns are
   narrow, and under 520 px the grid gives way to a list per hero */
.cover thead th { padding: 14px 0 10px; white-space: nowrap; }
.cover .short { display: none; }
@media (max-width: 1199.98px) { .cover .full { display: none; } .cover .short { display: inline; } }
/* where "Widowmaker" shows in full its column is a little wider than the others, so the name fits at the map names' 14 px */
@media (min-width: 1200px), (max-width: 899.98px) and (min-width: 701px) { .cover thead th:last-child { width: 96px; } }
@media (max-width: 899.98px) and (min-width: 701px) { .cover .full { display: inline; } .cover .short { display: none; } }
.cover-list { display: none; list-style: none; }
.cover-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 6px; }
.cover-list li:nth-child(odd) { background: var(--band); }
.cover-list b { font-weight: 600; font-size: 14px; color: var(--text); }   /* as the grid's names */
.cover-list span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
.cover-list svg { width: 15px; height: 15px; color: var(--fire); }   /* red, as in the grid */
@media (max-width: 519px) { .cover table { display: none; } .cover-list { display: block; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Premium's two ways to buy and the perks: three tiles with 8 px between (no lines), the price left in one style and its
   button right; under 560 the button drops under the price, full width */
.buy2.card { display: flex; flex-direction: column; gap: 8px; background: transparent; overflow: visible; }
.buy2 .opt { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; background: var(--panel); border-radius: 12px; }
.buy2 .pfig { font: 600 30px/1 var(--display); color: var(--text); }
.buy2 .pfig span { font-size: 18px; }   /* /month and /once: the price's own style, smaller (the user) */
/* the card's foot: the four perks, two by two (the user: the card looked empty) */
.buy2 .bfoot { padding: 18px 28px 18px; background: var(--panel); border-radius: 12px; }
/* the foot: what Premium gives, then right under it, no rule between, the sign-in and checkout lines (the user) */
.buy2 .bperks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }   /* four perks, two by two (the user: a 4th to fill it out) */
@media (max-width: 420px) { .buy2 .bperks { grid-template-columns: 1fr; } }
.buy2 .bperks li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.buy2 .bperks svg { width: 14px; height: 14px; color: var(--fire); }   /* red ticks, as the lineups grid's (2026-10-25) */
.buy2 .bperks .love svg { color: var(--fire); }   /* the heart moved here from the card's head, red, the words white (the user) */
/* the red marks appear in turn when their block first comes into view (site.js 3b): each fades in growing from 60%, over
   360 ms, after its own delay (--d); the lineups grid sweeps down its rows, the phone list and the perks go one by one */
.reveal td svg, .reveal .cover-list svg, .bperks.reveal svg { opacity: 0; transform: scale(.6);
  transition: opacity 360ms var(--ease-out) var(--d, 0ms), transform 360ms var(--ease-out) var(--d, 0ms); }   /* a reveal: longer than the open clock so each one is seen */
.reveal.in td svg, .reveal.in .cover-list svg, .bperks.reveal.in svg { opacity: 1; transform: none; }
/* the sign-in and checkout line sits under the card, as on the Premium page: the card is the prices and perks */
#price .bfine { margin-top: 12px; padding-left: 2px; font-size: 13px; color: var(--dim); }
#price .bfine + .bfine { margin-top: 4px; }   /* the Terms line under the fine print (the legal check, 2026-10-28: the user's pick, terms shown before buying) */
#price .bfine b { font-weight: 700; color: var(--text); }   /* the one thing a buyer must get right, in white and a step bolder like the top's tagline, at its own 13 px (the user, 2026-10-25) */
/* checkout.js's line over it: a Monthly owner's warning before Buy once (decision 21; "Paying as ..." went, Paddle shows the email) */
/* THE CARD (the user's UI rules, 2026-10-26, rule 4: every confirmation, error or important message is a card, never a line in an odd
   place; the app's message card, UI/Shell/Cards.cs). The main page's thank-you box made general (site.js 5): a panel over the page, a
   grey step above the ground, no lines; the head at the section headings' size over its sentence in the reading grey, then one row -
   Close in red, or for a question the way back as a plain word and the action in red. Billing is a card too: the Account rows inside */
.mcard { margin: auto; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 32px 28px 28px; border: 0; border-radius: 12px;
         background: var(--panel); color: var(--muted); overflow: auto; }
.mcard::backdrop { background: rgba(8, 8, 11, .72); }
dialog.mcard h2 { margin: 0; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--display); color: var(--text); text-wrap: balance; }   /* the section headings' size and weight */
dialog.mcard p { max-width: none; font-size: 16px; line-height: 1.5; color: var(--muted); }
.mcard .mline { margin-top: 14px; }
.mcard .mfine { margin-top: 10px; font-size: 13px; color: var(--dim); }
dialog.mcard h3 { margin: 18px 0 6px; font: 600 16px/1.3 var(--ui); color: var(--text); }
.mcard .mrows { margin-top: 14px; }
.mcard .mrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
.mcard .mrow .t3 { margin-top: 0; }
.mcard .arow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 16px; padding: 10px 0; }
.mcard .arow p { min-width: 0; overflow-wrap: anywhere; }
.mcard .arow .fine { grid-column: 2; white-space: nowrap; }
.mcard .arow .t3 { grid-column: 3; justify-self: end; margin-top: 0; text-decoration: none; }
.mcard h3 + .arow, .mcard .mrows > .arow:first-child { padding-top: 4px; }
/* it fades in rising 8 px over a fading backdrop, and leaves the same way (the user, 2026-10-25: "thank you box sure", after it
   popped in); the motion scale: 240 ms easing out in, 200 ms easing in out (site.js closes it once its fade has run) */
.mcard[open] { animation: mcard-in var(--t-open) var(--ease-out); }
.mcard[open]::backdrop { animation: backdrop-in var(--t-open) var(--ease-out); }
.mcard.closing { animation: mcard-out var(--t-close) var(--ease-in) forwards; }
.mcard.closing::backdrop { animation: backdrop-out var(--t-close) var(--ease-in) forwards; }
@keyframes mcard-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes mcard-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
@media (max-width: 560px) { .mcard { padding: 26px 18px 22px; } dialog.mcard p { font-size: 15px; } .mcard .arow { grid-template-columns: 1fr auto; row-gap: 2px; }
  .mcard .arow .fine { grid-column: 1; grid-row: 2; } .mcard .arow .t3 { grid-column: 2; grid-row: 1 / span 2; } }
.buy2 .pfine { font-size: 13px; color: var(--dim); margin-top: 10px; }   /* fine print is 13 (was 14) */
.buy2 .t1 { min-width: 140px; }
@media (max-width: 560px) { .buy2 .opt { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 18px; } .buy2 .pfig { font-size: 26px; } .buy2 .pfig span { font-size: 16px; } .buy2 .bfoot { padding-left: 18px; padding-right: 18px; } }
#price { scroll-margin-top: calc(var(--hh) + 8px); }

.cend { display: flex; flex-direction: column; align-items: flex-start; }
.home .cend h2 { font: 600 clamp(30px, 4.2vw, 46px)/1.12 var(--display); letter-spacing: -.01em; text-wrap: balance; }   /* the h1's own size */
.cend .t1 { margin-top: 28px; }
/* the closing Download keeps the top's red glow, steady, no flicker (the user, 2026-10-25: "add the glow to the download free
   for windows button at the bottom of the page ... just keep it glowing") */
.close .t1 { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 6px rgba(255,46,67,.9), 0 0 16px rgba(255,46,67,.8),
  0 0 34px rgba(255,46,67,.65), 0 0 70px rgba(255,46,67,.45), 0 0 120px rgba(255,46,67,.3); will-change: transform; }
/* the glow moves with the button and is never redrawn on hover (the user, 2026-10-25: "the glow is sortve messed up at the
   top and then jumps around when you hover"): the hover only lifts it (its own layer, so the lift moves the glow whole) and
   brightens the red; the app's small black shadow is left out here, where it muddied the glow under the button. The
   button is positioned (for the hover layers), which painted its glow over the heading and the Windows line: they stand
   in front of it */
@media (hover: hover) { .close .t1:not([disabled]):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 6px rgba(255,46,67,.9), 0 0 16px rgba(255,46,67,.8),
  0 0 34px rgba(255,46,67,.65), 0 0 70px rgba(255,46,67,.45), 0 0 120px rgba(255,46,67,.3); } }
.cend > :not(.t1) { position: relative; z-index: 1; }
.cend .fine { margin-top: 12px; }
.hero .fine + .fine, .cend .fine + .fine { margin-top: 4px; }   /* the Terms line under the Windows line (the legal check, 2026-10-28: the user's pick, terms shown before the download) */   /* the same Windows line as under the top's button */

/* each question its own tile, 8 px apart (no lines), the plus inside it */
.qa { max-width: 760px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 8px; }
.qa details { background: var(--panel); border-radius: 12px; padding: 0 22px; transition: background var(--t-hover) var(--ease-out); }
.qa details:has(summary:hover) { background: var(--raised); }   /* the app's hovered tile */
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
              padding: 18px 0; font: 600 17px/1.3 var(--ui); color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
/* the plus turns into a minus (its upright bar folds away) and the answer fades in while the row slides open (site.js) */
.qa details { overflow: hidden; }
.qa summary { position: relative; padding-right: 36px; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  border-radius: 1px; background: var(--dim); transition: transform var(--t-open) var(--ease-out), background var(--t-hover) var(--ease-out); }
.qa summary::before { transform: rotate(90deg); }
.qa details.on summary::before { transform: rotate(90deg) scaleX(0); }
.qa summary:hover::before, .qa summary:hover::after { background: var(--text); }
.qa details p { padding: 0 0 20px; margin-top: -6px; color: var(--muted); max-width: 62ch; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-open) var(--ease-out), transform var(--t-open) var(--ease-out); }
/* on the main page its questions and answers are the body size (16; were 17 and 15), the answers the body's line height */
.home .qa summary { font-size: 16px; }
.home .qa details p { font-size: 16px; line-height: 1.5; }
.qa details.on p { opacity: 1; transform: none; }

/* account: the device rows the page's script writes (name, last seen, Remove) */

/* ACCOUNT (the website round, part 3, 2026-10-25; the user: "make it simpler ... and also consistent with the rest of the
   website"): the main page's look. The title at the section headings' size; each part (the sign-in form, Plan, PCs, Billing)
   a panel a grey step above the ground, 12 px corners, 8 px apart, no lines; the field filled, no outline; the PCs as rows
   told apart by a faint fill in turn; Sign out the app's quiet word (grey, white on hover). Its type on the main page's
   ladder: body 16, small 14, fine 13 */
/* the page lines up with the header's left edge as the main page does (was a narrow column centred), its words kept to a
   readable 640 px; the air under the header the main page's own at each width: 64, then 32 under 900, 24 under 560 (was 64
   and 40, twice the main page's in a narrower window: the user, "the space between Account and the header its weird large") */
.doc:is(.acct, .read) { max-width: calc(var(--max) + 2 * var(--gut)); padding: 64px var(--gut) 88px; }
:is(.acct, .read) > * { max-width: 640px; }
@media (max-width: 900px) { .doc:is(.acct, .read) { padding-top: 32px; } }
@media (max-width: 560px) { .doc:is(.acct, .read) { padding-top: 24px; padding-bottom: 64px; } }
:is(.acct, .read) h1 { font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--display); margin-bottom: 0; }
:is(.acct, .read) .lede { margin-top: 14px; font-size: 16px; line-height: 1.5; }
:is(.acct, .read) .lede b { color: var(--text); font-weight: 600; }
:is(.acct, .read) .apanel { margin-top: 8px; background: var(--panel); border-radius: 12px; padding: 26px 28px; }   /* the price card's tiles' padding */
:is(.acct, .read) .lede + .apanel { margin-top: 28px; }
.acct .lede + form.bare { margin-top: 20px; }   /* signed out, no box around the field (decision 25): the field and its button under the line */
/* ONE SIGN-IN EMAIL (decision 28): the code row under the address, the app's one row gap apart; the address's button then a plain word */
.acct #code-form { margin-top: 12px; }
.acct .form-row .t3 { margin-top: 0; }
/* the signed-in line: the address left, Sign out at the right of the same line (the user, 2026-10-25) */
.acct .who { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 14px; }
.acct .who .lede { margin-top: 0; min-width: 0; overflow-wrap: anywhere; }
.acct .who .t3 { margin-top: 0; }
.acct .who + .apanel { margin-top: 28px; }
:is(.acct, .read) .apanel h2 { margin: 0 0 6px; font: 600 16px/1.3 var(--ui); color: var(--text); }
:is(.acct, .read) .apanel p { font-size: 16px; line-height: 1.5; color: var(--muted); }
:is(.acct, .read) .apanel .fine { font-size: 13px; color: var(--dim); }
:is(.acct, .read) section > .fine { margin-top: 12px; }
:is(.acct, .read) .field { font-size: 16px; }   /* the body size (and no zoom on a phone) */
:is(.acct, .read) .field::placeholder { color: var(--dim); }   /* the fine print's grey, readable on the field (was the faint --ghost) */
/* THE PLAN AS ONE LINE WITH ONE ACTION and the billing behind it (LAUNCH-READY 2026-10-25; the app's Account the same): every row the
   PC rows' pattern - the words left, an optional fine word, the quiet action right; the question before Cancel plan or Delete my
   account in the reading size, then Back and the red button, the app's 2M apart */
.acct .arow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 16px; padding: 10px 0; }
/* ONE HEAD-TO-ROW GAP under every head (the review: 23 px under h2 against 27 under h3): each head 6 px over its first row, whose own top padding is 4 */
.acct .apanel h2 + .arow, .acct .apanel h2 + #devices > .arow:first-child { padding-top: 4px; }
.acct .arow p { min-width: 0; overflow-wrap: anywhere; }
.acct .arow .fine { grid-column: 2; white-space: nowrap; }
.acct .arow .t3, .acct #plan-act { grid-column: 3; justify-self: end; }   /* the action always in the last column, flush right like the PCs' Remove */
.acct .arow .t3, .acct .dev .t3 { margin-top: 0; justify-self: end; text-decoration: none; }
:is(.acct, .read) #devices { margin-top: 0; display: flex; flex-direction: column; }
/* a PC's row: its name with "Last seen" under it in the fine print, Remove right (the polish round 2026-10-25: side by side
   the three wrapped untidily on a phone) */
:is(.acct, .read) .dev { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 0; font-size: 14px; }   /* plain rows on the panel, no fill (the user, 2026-10-25: with two PCs at most, the fill in turn read as one selected); flush with the heading */
:is(.acct, .read) .dev span { grid-column: 1; font-size: 13px; }
:is(.acct, .read) .dev a, :is(.acct, .read) .dev .t3 { grid-column: 2; grid-row: 1 / span 2; }
:is(.acct, .read) .dev b { font-weight: 600; color: var(--text); }
:is(.acct, .read) .dev span { color: var(--dim); }
:is(.acct, .read) .dev a { color: var(--muted); }   /* Remove: the quiet link, white on hover */
:is(.acct, .read) .dev a:hover { color: var(--text); }
.t3 { display: inline-block; margin-top: 28px; padding: 0; border: 0; background: none; cursor: pointer;
      font: 600 14px/1.3 var(--ui); color: var(--muted); transition: color var(--t-hover) var(--ease-out); }
.t3:hover { color: var(--text); }
@media (max-width: 560px) { :is(.acct, .read) .apanel { padding: 22px 18px; } :is(.acct, .read) .lede, :is(.acct, .read) .apanel p, :is(.acct, .read) .field { font-size: 15px; }  }   /* the price tiles' phone padding */
/* THE READING PAGES (the polish round 2026-10-25, open-problems part 3 item 6; the user: Terms, Privacy, Refunds and Contact
   "still wear the old look"): the Account page's frame, so every inner page is one family with the main page. The title at
   the section headings' size, the date under it in the fine print, then each part a panel a grey step above the ground, 12 px
   corners, 8 px apart, its heading white at 16 and its words the body's 16 muted; no outlines, no hairlines */
.read .meta { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.read .meta + .apanel, .read .lede + .apanel { margin-top: 28px; }
.read .apanel > * + * { margin-top: 10px; }
.read .apanel h2 + * { margin-top: 0; }
.read .apanel ul { padding-left: 20px; }
.read .apanel li { font-size: 16px; line-height: 1.5; color: var(--muted); }
.read .apanel li + li { margin-top: 4px; }
.read .apanel > .t1 { margin-top: 16px; }   /* a button standing on its own in a panel; one inside a form row sits level with its field */
@media (max-width: 560px) { .read .apanel li { font-size: 15px; } }
.read #done { margin-top: 8px; }
.read .apanel .fine { margin-top: 12px; }   /* a fine line under a form or a row of words */   /* the approval page's done panel, in the steps' place */
.read .apanel label { display: block; }

/* =====================================================================================================
   WIDTHS: desktop (>= 1024), tablet (561..1023), phone (<= 560), the smallest phones (<= 374)
   ===================================================================================================== */
@media (max-width: 1023px) {
  :root { --gut: 28px; }
  .home section { padding: 64px 0; }
  .intro { padding: 72px 0 64px !important; }
}
/* stacking the top sooner (1100) was tried and dropped: at 960 x 700 the stacked picture pushed Download below the first
   screen, while side by side with the promise on its own line reads cleanly */
@media (max-width: 899px) {
  .intro.hero { grid-template-columns: 1fr; gap: 0; padding: 32px 0 64px !important; }
  .hero .ww, .hero .htext { grid-column: 1; grid-row: auto; }
  .hero .htext { margin-top: 32px; }   /* the rows' picture-to-words gap (was 40) */
  /* stacked, the picture gives up height so the headline, subtitle and Download all fit in the first screen (the user,
     2026-10-24: the button was cut off at the bottom of a short window); never shorter than 150 */
  .hero .slash { max-height: max(150px, calc(100svh - 390px)); }
  /* the rows stack with the words on top, the picture under them (the user, 2026-10-24: "on compressed screen width probably text should go above") */
  .row, .row.flip { grid-template-columns: 1fr; gap: 32px; }
  .row > .rtext, .row > .rmedia, .row.flip > .rtext, .row.flip > .rmedia { grid-column: 1; grid-row: auto; }
  .row > .rtext { order: -1; }
}
@media (max-width: 700px) {
  .cover tbody th, .cover thead th { font-size: 13px; }
}

@media (max-width: 560px) {
  :root { --hh: 64px; --gut: 16px; }
  .sh { height: 56px; top: 8px; margin-top: 8px; padding: 0 8px 0 16px; }
  .sh .menu { margin-left: 8px; }   /* = the right padding */
  body { font-size: 14.5px; }
  .wm { font-size: 16px; }
  .sh .links { gap: 16px; }
  .t1.sm { height: 32px; border-radius: 7px; padding: 0 13px; font-size: 13px; }
  .t1 { height: 54px; border-radius: 10px; font-size: 16px; }
  .home section { padding: 52px 0; }
  .intro { padding: 48px 0 52px !important; }
  .intro.hero { padding: 24px 0 52px !important; }
  .hero .htext { margin-top: 32px; }   /* (was 28) */
  .intro .t1, .close .t1 { width: 100%; }
  .sub { font-size: 15px; }
  .qa summary { font-size: 15.5px; }
  .home .qa summary, .home .qa details p { font-size: 15px; }   /* the main page's body size on a phone */
  .ft .links { gap: 8px 14px; }
  .doc { padding: 40px var(--gut) 64px; }
  .doc h1 { font-size: 26px; }
  .doc .lede { font-size: 15.5px; }
  .doc h2 { font-size: 17px; margin-top: 40px; }
  .form-row .t1 { width: 100%; }
}
@media (max-width: 374px) {
  /* on a 320 screen (less a desktop scrollbar) the big Download's words, which never wrap, were wider than the column
     (the user, 2026-10-24: "its cut off on compressed width"): less padding, a size smaller; the closing card's air too */
  .t1 { padding: 0 14px; gap: 10px; font-size: 15px; }
  .wm { font-size: 14px; }
  .sh .links { gap: 7px; }
  .t1.sm { padding: 0 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after, *::backdrop { transition: none !important; animation: none !important; } }

/* a section reached by a link stops below the pinned header */
#faq { scroll-margin-top: calc(var(--hh) + 8px); }
/* the account rows on a phone (LAUNCH-READY, the review: one row pattern for the plan, the billing and the PCs): the fine word goes
   under the words, the action stays right */
@media (max-width: 560px) {
  .acct .arow { grid-template-columns: 1fr auto; row-gap: 2px; }
  .acct .arow .fine { grid-column: 1; grid-row: 2; }
  .acct .arow .t3, .acct #plan-act { grid-column: 2; grid-row: 1 / span 2; }
}