/* askchat.studio — ui.css — design system v2
   Spec: knowledge/projects/askchat_landing/win_redesign_plan.md, sections 2 (tokens, components,
   type), 6 (motion), 7 (mobile). Source of the bevels and the window: concepts_2026-09-16/concept_5.html.

   Rule of dosage. Retro physics lives in three places only:
     1. the window that shows an AI answer (.win / .pane / .tbar / .sbar),
     2. controls (.btn, .field, .check, .bar, .dlg, .listbox, .tree),
     3. service strips (title bar, status bar, footer).
   Everything else is white paper, a modern grotesk and 1px rules. No #c0c0c0 page background,
   no wallpaper, no rounded corners anywhere, no pixel fonts, no custom cursor.

   Fonts: Schibsted Grotesk (all text) and Azeret Mono (data inside windows only). Loaded by the
   page (Google Fonts now, fonts.css with self-hosted woff2 later). */

/* ============================================================ 1. tokens */
:root{
  --paper:#ffffff; --band:#f6f5f1;
  --ink:#141416; --quiet:#5b5955; --ph:#6b6760; --rule:#dcd9d2;
  --pen:#262c86; --pen-hover:#2f36a0;
  --g-face:#e5e3dd; --g-hover:#edebe6; --g-hi:#ffffff; --g-hi2:#f4f3ef; --g-sh:#1c1c1e; --g-sh2:#7a776f;
  --g-dis:#66635c; /* disabled label. --g-sh2 on the face is 3.5:1; this one passes 4.5:1 and still reads greyed */
  --pen-hi:#8088dc; --pen-hi2:#4a52b8; --pen-sh:#0d1040; --pen-sh2:#181c62;
  --bad:#b3261e; --good:#1b6e3a; --warn:#8a5a00;

  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Azeret Mono','Courier New',monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:40px;

  /* the three bevels, written once. The element keeps its size, so nothing jumps on press */
  --raised:inset -1px -1px 0 var(--g-sh),inset 1px 1px 0 var(--g-hi),inset -2px -2px 0 var(--g-sh2),inset 2px 2px 0 var(--g-hi2);
  --pressed:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh),inset -2px -2px 0 var(--g-hi2),inset 2px 2px 0 var(--g-sh2);
  --sunken:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2),inset -2px -2px 0 var(--g-hi2),inset 2px 2px 0 var(--g-sh);
  /* the same two for the accent button */
  --raised-pen:inset -1px -1px 0 var(--pen-sh),inset 1px 1px 0 var(--pen-hi),inset -2px -2px 0 var(--pen-sh2),inset 2px 2px 0 var(--pen-hi2);
  --pressed-pen:inset -1px -1px 0 var(--pen-hi),inset 1px 1px 0 var(--pen-sh),inset -2px -2px 0 var(--pen-hi2),inset 2px 2px 0 var(--pen-sh2);
}

/* ============================================================ 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
img,svg,canvas{display:block;max-width:100%}
::selection{background:var(--pen);color:#fff}
input,textarea{caret-color:var(--pen)}
a{color:inherit}
p a,li a,.link{color:var(--pen);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
u{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
hr{border:0;border-top:1px solid var(--rule);margin:0}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.band{background:var(--band)}

/* A reading column that hangs on the page grid instead of floating in the middle of the screen.
   The element keeps .wrap (so its left edge IS the left edge of the brand in the header and of the
   footer status bar), and --measure caps the line length of every block inside it. Inner pages used
   to centre their own 720-940px column in the viewport: on 1440 the first letter started ~260px to
   the right of the brand and the page read as broken. Usage: <main class="wrap col page-class">. */
.col > *{max-width:var(--measure,720px)}

/* ============================================================ 3. type scale
   desktop 13 · 15 · 17 · 20 · 24 · 36 · 64 — mobile 13 · 15 · 17 · 20 · 28 · 40 */
h1,.h1{font-size:64px;line-height:1;letter-spacing:-.035em;font-weight:800;margin:0;text-wrap:balance}
h2,.h2{font-size:36px;line-height:1.1;letter-spacing:-.025em;font-weight:800;margin:0;text-wrap:balance}
h3,.h3{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:0}
.deck,.lead{font-size:20px;line-height:1.5;margin:0}
.small{font-size:15px;line-height:1.45}
.cap{font-size:13px;line-height:1.5;color:var(--quiet);margin:0}
.lbl{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin:0 0 8px}
.sum{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.sum small{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:0;color:var(--quiet);margin-left:6px}
.num{font-variant-numeric:tabular-nums}      /* tabular digits only where digits line up, never on body */
.mono{font-family:var(--mono);font-weight:500}
.quiet{color:var(--quiet)}
.t-good{color:var(--good)} .t-bad{color:var(--bad)} .t-warn{color:var(--warn)}

/* ============================================================ 4. button */
.btn{--px:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 var(--px);border:0;border-radius:0;
  font-family:var(--sans);font-weight:600;font-size:17px;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  background:var(--g-face);color:var(--ink);box-shadow:var(--raised);
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:box-shadow 120ms var(--ease-out),padding 120ms var(--ease-out),background-color 120ms ease}
.btn.sm{--px:16px;height:40px;font-size:15px}
.btn.lg{--px:30px;height:56px}
.btn.sq{--px:0px;width:40px;height:40px}
.btn.pri{background:var(--pen);color:#fff;box-shadow:var(--raised-pen)}
/* press: bevel inverts at 0 ms, the label moves 1px right and 1px down through padding (no wrapper span needed);
   release eases back in 120 ms */
.btn:not(:disabled):not([aria-disabled="true"]):active,
.btn.is-down,.btn.is-down:disabled{box-shadow:var(--pressed);padding:2px calc(var(--px) - 1px) 0 calc(var(--px) + 1px);transition-duration:0ms}
.btn.pri:not(:disabled):not([aria-disabled="true"]):active,
.btn.pri.is-down,.btn.pri.is-down:disabled{box-shadow:var(--pressed-pen);background:var(--pen);color:#fff;text-shadow:none}
/* disabled: the classic embossed grey label, the bevel stays */
.btn:disabled,.btn[aria-disabled="true"]{cursor:default;background:var(--g-face);color:var(--g-dis);text-shadow:1px 1px 0 #fff;box-shadow:var(--raised)}
/* focus twice: 2px ring outside for the keyboard, dotted rectangle inside as in Win95 */
.btn:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.btn:focus-visible::after{content:"";position:absolute;inset:4px;border:1px dotted currentColor;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):not([aria-disabled="true"]):hover{background:var(--g-hover)}
  .btn.pri:not(:disabled):not([aria-disabled="true"]):hover{background:var(--pen-hover)}
}

/* ============================================================ 5. field */
.field{margin:0 0 16px;min-width:0}
.field > label{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin:0 0 8px}
.field input,.field select,.field textarea{display:block;width:100%;height:50px;padding:0 14px;border:0;border-radius:0;
  appearance:none;-webkit-appearance:none;background:#fff;color:var(--ink);
  font-family:var(--mono);font-size:16px;font-weight:500;line-height:1;box-shadow:var(--sunken)}
.field textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.45;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ph);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--pen);outline-offset:1px}
.field.is-err input,.field.is-err select{outline:2px solid var(--bad);outline-offset:1px}
.field.is-err input:focus,.field.is-err select:focus{outline-color:var(--pen)}
/* the error line: a 16px square with an exclamation mark, then 15px text */
.ferr{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--bad)}
.ferr::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;
  background:var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v6M8 11v2' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 16px no-repeat}
/* select: the arrow is a raised 28px strip on the right with a 10×6 triangle */
.sel{position:relative}
.sel select{padding-right:52px;cursor:pointer}
.sel select.empty{color:var(--ph)}
.sel::after{content:"";position:absolute;top:3px;right:3px;bottom:3px;width:28px;pointer-events:none;
  background:var(--g-face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23141416'/%3E%3C/svg%3E") center/10px 6px no-repeat;
  box-shadow:var(--raised)}

/* ============================================================ 6. checkbox */
.check{display:inline-flex;align-items:flex-start;gap:10px;min-height:24px;padding:4px 0;cursor:pointer;font-size:15px;line-height:1.4;color:var(--ink)}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:13px;height:13px;margin:calc((1.4em - 13px) / 2) 0 0;padding:0;border:0;border-radius:0;
  background:#fff;box-shadow:var(--sunken);cursor:pointer}
.check input:checked{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 4.5l2.5 2.5L8 1.5' fill='none' stroke='%23141416' stroke-width='2'/%3E%3C/svg%3E") center/9px 9px no-repeat}
.check input:disabled{background-color:var(--g-face);cursor:default}
.check input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 4.5l2.5 2.5L8 1.5' fill='none' stroke='%2366635c' stroke-width='2'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.check input:focus-visible ~ span{outline:1px dotted var(--ink);outline-offset:1px}
.check:has(input:disabled){color:var(--g-dis);text-shadow:1px 1px 0 #fff;cursor:default}

/* ============================================================ 7. window */
.win{position:relative;margin:0;background:var(--g-face);padding:3px;box-shadow:var(--raised);color:var(--ink);min-width:0}
/* one-time entrance for the hero evidence window only (dialogs open at 0 ms) */
.win.enter{opacity:0;transform:translateY(8px);animation:win-open 240ms var(--ease-out) 80ms forwards}
@keyframes win-open{to{opacity:1;transform:none}}
.tbar{display:flex;align-items:center;gap:10px;height:28px;padding:0 3px 0 8px;background:var(--pen);color:#fff;user-select:none;-webkit-user-select:none}
.tbar .t{flex:1;min-width:0;contain:inline-size;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* contain:inline-size — a long nowrap title must not inflate the window's min-content (it broke 390px once). Grid cells that hold a window still need minmax(0,1fr) or min-width:0 */
.ctl{display:flex;gap:2px;flex:none}
.ctl > *{display:block;width:18px;height:16px;padding:0;border:0;border-radius:0;margin:0;cursor:default;
  background:var(--g-face) center no-repeat;box-shadow:var(--raised)}
.ctl > .min{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 6.5h6' stroke='%23141416' stroke-width='1.5'/%3E%3C/svg%3E")}
.ctl > .max{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 1.5h7v6.5H1z' fill='none' stroke='%23141416' stroke-width='1.4'/%3E%3Cpath d='M1 2h7' stroke='%23141416' stroke-width='1.6'/%3E%3C/svg%3E")}
.ctl > .x{margin-left:4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%23141416' stroke-width='1.5'/%3E%3C/svg%3E")}
.ctl > button{cursor:pointer;position:relative}
.ctl > button::after{content:"";position:absolute;inset:-14px -13px} /* 44px hit area around the 18×16 close button */
.ctl > button:active{box-shadow:var(--pressed)}
.ctl > button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.pane{background:#fff;box-shadow:var(--sunken);padding:22px 24px;margin:0;min-width:0}
.pane.scroll{overflow:auto;max-height:var(--pane-max,280px)}
.pane > :first-child{margin-top:0}
.pane > :last-child{margin-bottom:0}
/* status bar: cells with a one-pixel groove */
.sbar{display:grid;grid-template-columns:1fr auto;gap:3px;margin:3px 0 0;font-size:13px}
.sbar > *{margin:0;min-width:0;padding:5px 8px 4px;line-height:1.35;color:var(--ink);
  box-shadow:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar .b{color:var(--pen);font-weight:700}
.sbar a{text-decoration:underline;text-underline-offset:2px}

/* what the AI answered (content of the evidence window) */
.ask{margin:0 0 22px;font-family:var(--mono);font-size:16px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.rank{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:36px 1fr;align-items:baseline;gap:8px;padding:11px 0;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.rank .n{font-size:15px;color:var(--pen);font-weight:700}
/* the selected row: appears with a snap on the 780th ms, as a list selection in Win95 */
.you{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:8px;margin:0 -24px;padding:12px 24px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  animation:row-select 1ms steps(1,end) 780ms forwards}
.you .n{font-size:15px;font-weight:700;color:var(--pen);animation:row-select-n 1ms steps(1,end) 780ms forwards}
.you .tag{font-size:13px;letter-spacing:.08em;font-weight:700;white-space:nowrap}
@keyframes row-select{to{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}}
@keyframes row-select-n{to{color:#fff}}
.you.on,.you.on .n{animation:none}
.you.on{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}
.you.on .n{color:#fff}
/* result rows arrive one by one, 60 ms apart, no easing */
.stagger > *{animation:row-in 1ms steps(1,end) both}
@keyframes row-in{from{opacity:0}to{opacity:1}}
.stagger > :nth-child(1){animation-delay:0ms} .stagger > :nth-child(2){animation-delay:60ms} .stagger > :nth-child(3){animation-delay:120ms}
.stagger > :nth-child(4){animation-delay:180ms} .stagger > :nth-child(5){animation-delay:240ms} .stagger > :nth-child(6){animation-delay:300ms}
.stagger > :nth-child(7){animation-delay:360ms} .stagger > :nth-child(8){animation-delay:420ms}

/* ============================================================ 8. dialog */
/* the shade under a dialog: a 50% checkerboard of ink, no blur (as on the shutdown screen) */
.shade{background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/2px 2px}
.shade.fixed{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.dlg{width:min(420px,calc(100% - 32px));margin:0 auto}
.dlg .pane{padding:18px 20px 16px;max-height:calc(80dvh - 34px);overflow:auto}
.dlg-body{display:grid;grid-template-columns:32px 1fr;gap:16px 18px;align-items:start;font-size:15px;line-height:1.5}
.dlg-body p{margin:0}
.dlg-body p + p{margin-top:.6em}
.dlg-btns{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.dlg-btns .btn{--px:16px;min-width:88px;height:40px;font-size:15px}
.ico{display:block;flex:none;width:32px;height:32px;background:center/32px 32px no-repeat;image-rendering:pixelated}
/* four 32×32 pixel icons (error, info, question, warning), drawn for this site: /tmp/px_icons.py */
:root{--ico-error:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23b3261e' d='M10,2h12v1h-12zM9,3h14v1h-14zM8,4h16v1h-16zM7,5h18v1h-18zM26,5h1v1h-1zM6,6h20v1h-20zM5,7h22v1h-22zM4,8h24v1h-24zM3,9h6v1h-6zM11,9h10v1h-10zM23,9h6v1h-6zM2,10h7v1h-7zM12,10h8v1h-8zM23,10h7v1h-7zM2,11h8v1h-8zM13,11h6v1h-6zM22,11h8v1h-8zM2,12h9v1h-9zM14,12h4v1h-4zM21,12h9v1h-9zM2,13h10v1h-10zM15,13h2v1h-2zM20,13h10v1h-10zM2,14h11v1h-11zM19,14h11v1h-11zM2,15h12v1h-12zM18,15h12v1h-12zM2,16h12v1h-12zM18,16h12v1h-12zM2,17h11v1h-11zM19,17h11v1h-11zM2,18h10v1h-10zM15,18h2v1h-2zM20,18h10v1h-10zM2,19h9v1h-9zM14,19h4v1h-4zM21,19h9v1h-9zM2,20h8v1h-8zM13,20h6v1h-6zM22,20h8v1h-8zM2,21h7v1h-7zM12,21h8v1h-8zM23,21h7v1h-7zM3,22h6v1h-6zM11,22h10v1h-10zM23,22h6v1h-6zM4,23h24v1h-24zM5,24h22v1h-22zM6,25h20v1h-20zM5,26h1v1h-1zM7,26h18v1h-18zM8,27h16v1h-16zM9,28h14v1h-14zM10,29h12v1h-12z'/%3E%3Cpath fill='%23fff' d='M9,9h2v1h-2zM21,9h2v1h-2zM9,10h3v1h-3zM20,10h3v1h-3zM10,11h3v1h-3zM19,11h3v1h-3zM11,12h3v1h-3zM18,12h3v1h-3zM12,13h3v1h-3zM17,13h3v1h-3zM13,14h6v1h-6zM14,15h4v1h-4zM14,16h4v1h-4zM13,17h6v1h-6zM12,18h3v1h-3zM17,18h3v1h-3zM11,19h3v1h-3zM18,19h3v1h-3zM10,20h3v1h-3zM19,20h3v1h-3zM9,21h3v1h-3zM20,21h3v1h-3zM9,22h2v1h-2zM21,22h2v1h-2z'/%3E%3Cpath fill='%237d1912' d='M26,6h2v1h-2zM27,7h2v1h-2zM28,8h2v1h-2zM29,9h2v1h-2zM30,10h1v1h-1zM30,11h1v1h-1zM30,12h1v1h-1zM30,13h1v1h-1zM30,14h1v1h-1zM30,15h1v1h-1zM30,16h1v1h-1zM30,17h1v1h-1zM30,18h1v1h-1zM30,19h1v1h-1zM30,20h1v1h-1zM30,21h1v1h-1zM29,22h2v1h-2zM28,23h2v1h-2zM27,24h2v1h-2zM26,25h2v1h-2zM6,26h1v1h-1zM25,26h2v1h-2zM6,27h2v1h-2zM24,27h2v1h-2zM7,28h2v1h-2zM23,28h2v1h-2zM8,29h2v1h-2zM22,29h2v1h-2zM9,30h14v1h-14z'/%3E%3Cpath fill='%23141416' d='M9,0h14v1h-14zM8,1h1v1h-1zM23,1h1v1h-1zM7,2h1v1h-1zM24,2h1v1h-1zM6,3h1v1h-1zM25,3h1v1h-1zM5,4h1v1h-1zM26,4h1v1h-1zM4,5h1v1h-1zM27,5h1v1h-1zM3,6h1v1h-1zM28,6h1v1h-1zM2,7h1v1h-1zM29,7h1v1h-1zM1,8h1v1h-1zM30,8h1v1h-1zM0,9h1v1h-1zM31,9h1v1h-1zM0,10h1v1h-1zM31,10h1v1h-1zM0,11h1v1h-1zM31,11h1v1h-1zM0,12h1v1h-1zM31,12h1v1h-1zM0,13h1v1h-1zM31,13h1v1h-1zM0,14h1v1h-1zM31,14h1v1h-1zM0,15h1v1h-1zM31,15h1v1h-1zM0,16h1v1h-1zM31,16h1v1h-1zM0,17h1v1h-1zM31,17h1v1h-1zM0,18h1v1h-1zM31,18h1v1h-1zM0,19h1v1h-1zM31,19h1v1h-1zM0,20h1v1h-1zM31,20h1v1h-1zM0,21h1v1h-1zM31,21h1v1h-1zM0,22h1v1h-1zM31,22h1v1h-1zM1,23h1v1h-1zM30,23h1v1h-1zM2,24h1v1h-1zM29,24h1v1h-1zM3,25h1v1h-1zM28,25h1v1h-1zM4,26h1v1h-1zM27,26h1v1h-1zM5,27h1v1h-1zM26,27h1v1h-1zM6,28h1v1h-1zM25,28h1v1h-1zM7,29h1v1h-1zM24,29h1v1h-1zM8,30h1v1h-1zM23,30h1v1h-1zM9,31h14v1h-14z'/%3E%3Cpath fill='%23d7514a' d='M9,1h14v1h-14zM8,2h2v1h-2zM22,2h2v1h-2zM7,3h2v1h-2zM23,3h2v1h-2zM6,4h2v1h-2zM24,4h2v1h-2zM5,5h2v1h-2zM25,5h1v1h-1zM4,6h2v1h-2zM3,7h2v1h-2zM2,8h2v1h-2zM1,9h2v1h-2zM1,10h1v1h-1zM1,11h1v1h-1zM1,12h1v1h-1zM1,13h1v1h-1zM1,14h1v1h-1zM1,15h1v1h-1zM1,16h1v1h-1zM1,17h1v1h-1zM1,18h1v1h-1zM1,19h1v1h-1zM1,20h1v1h-1zM1,21h1v1h-1zM1,22h2v1h-2zM2,23h2v1h-2zM3,24h2v1h-2zM4,25h2v1h-2z'/%3E%3C/svg%3E")}
.ico-error{background-image:var(--ico-error)}
:root{--ico-warning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23e6b400' d='M15,3h2v1h-2zM14,4h4v1h-4zM13,5h6v1h-6zM12,6h8v1h-8zM11,7h3v1h-3zM18,7h3v1h-3zM10,8h4v1h-4zM18,8h4v1h-4zM23,8h1v1h-1zM9,9h5v1h-5zM18,9h5v1h-5zM8,10h6v1h-6zM18,10h6v1h-6zM7,11h7v1h-7zM18,11h7v1h-7zM6,12h8v1h-8zM18,12h8v1h-8zM5,13h9v1h-9zM18,13h9v1h-9zM4,14h10v1h-10zM18,14h10v1h-10zM3,15h11v1h-11zM18,15h11v1h-11zM3,16h11v1h-11zM18,16h11v1h-11zM4,17h10v1h-10zM18,17h10v1h-10zM5,18h9v1h-9zM18,18h9v1h-9zM6,19h8v1h-8zM18,19h8v1h-8zM7,20h18v1h-18zM8,21h16v1h-16zM9,22h5v1h-5zM18,22h5v1h-5zM8,23h1v1h-1zM10,23h4v1h-4zM18,23h4v1h-4zM11,24h3v1h-3zM18,24h3v1h-3zM12,25h2v1h-2zM18,25h2v1h-2zM13,26h6v1h-6zM14,27h4v1h-4zM15,28h2v1h-2z'/%3E%3Cpath fill='%23141416' d='M15,0h2v1h-2zM14,1h1v1h-1zM17,1h1v1h-1zM13,2h1v1h-1zM18,2h1v1h-1zM12,3h1v1h-1zM19,3h1v1h-1zM11,4h1v1h-1zM20,4h1v1h-1zM10,5h1v1h-1zM21,5h1v1h-1zM9,6h1v1h-1zM22,6h1v1h-1zM8,7h1v1h-1zM14,7h4v1h-4zM23,7h1v1h-1zM7,8h1v1h-1zM14,8h4v1h-4zM24,8h1v1h-1zM6,9h1v1h-1zM14,9h4v1h-4zM25,9h1v1h-1zM5,10h1v1h-1zM14,10h4v1h-4zM26,10h1v1h-1zM4,11h1v1h-1zM14,11h4v1h-4zM27,11h1v1h-1zM3,12h1v1h-1zM14,12h4v1h-4zM28,12h1v1h-1zM2,13h1v1h-1zM14,13h4v1h-4zM29,13h1v1h-1zM1,14h1v1h-1zM14,14h4v1h-4zM30,14h1v1h-1zM0,15h1v1h-1zM14,15h4v1h-4zM31,15h1v1h-1zM0,16h1v1h-1zM14,16h4v1h-4zM31,16h1v1h-1zM1,17h1v1h-1zM14,17h4v1h-4zM30,17h1v1h-1zM2,18h1v1h-1zM14,18h4v1h-4zM29,18h1v1h-1zM3,19h1v1h-1zM14,19h4v1h-4zM28,19h1v1h-1zM4,20h1v1h-1zM27,20h1v1h-1zM5,21h1v1h-1zM26,21h1v1h-1zM6,22h1v1h-1zM14,22h4v1h-4zM25,22h1v1h-1zM7,23h1v1h-1zM14,23h4v1h-4zM24,23h1v1h-1zM8,24h1v1h-1zM14,24h4v1h-4zM23,24h1v1h-1zM9,25h1v1h-1zM14,25h4v1h-4zM22,25h1v1h-1zM10,26h1v1h-1zM21,26h1v1h-1zM11,27h1v1h-1zM20,27h1v1h-1zM12,28h1v1h-1zM19,28h1v1h-1zM13,29h1v1h-1zM18,29h1v1h-1zM14,30h1v1h-1zM17,30h1v1h-1zM15,31h2v1h-2z'/%3E%3Cpath fill='%238a5a00' d='M23,9h2v1h-2zM24,10h2v1h-2zM25,11h2v1h-2zM26,12h2v1h-2zM27,13h2v1h-2zM28,14h2v1h-2zM29,15h2v1h-2zM29,16h2v1h-2zM28,17h2v1h-2zM27,18h2v1h-2zM26,19h2v1h-2zM25,20h2v1h-2zM24,21h2v1h-2zM23,22h2v1h-2zM9,23h1v1h-1zM22,23h2v1h-2zM9,24h2v1h-2zM21,24h2v1h-2zM10,25h2v1h-2zM20,25h2v1h-2zM11,26h2v1h-2zM19,26h2v1h-2zM12,27h2v1h-2zM18,27h2v1h-2zM13,28h2v1h-2zM17,28h2v1h-2zM14,29h4v1h-4zM15,30h2v1h-2z'/%3E%3Cpath fill='%23ffd54a' d='M15,1h2v1h-2zM14,2h4v1h-4zM13,3h2v1h-2zM17,3h2v1h-2zM12,4h2v1h-2zM18,4h2v1h-2zM11,5h2v1h-2zM19,5h2v1h-2zM10,6h2v1h-2zM20,6h2v1h-2zM9,7h2v1h-2zM21,7h2v1h-2zM8,8h2v1h-2zM22,8h1v1h-1zM7,9h2v1h-2zM6,10h2v1h-2zM5,11h2v1h-2zM4,12h2v1h-2zM3,13h2v1h-2zM2,14h2v1h-2zM1,15h2v1h-2zM1,16h2v1h-2zM2,17h2v1h-2zM3,18h2v1h-2zM4,19h2v1h-2zM5,20h2v1h-2zM6,21h2v1h-2zM7,22h2v1h-2z'/%3E%3C/svg%3E")}
.ico-warning{background-image:var(--ico-warning)}
:root{--ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M14,6h4v1h-4zM14,7h4v1h-4zM14,8h4v1h-4zM14,9h4v1h-4zM12,12h6v1h-6zM12,13h6v1h-6zM14,14h4v1h-4zM14,15h4v1h-4zM14,16h4v1h-4zM14,17h4v1h-4zM14,18h4v1h-4zM14,19h4v1h-4zM14,20h4v1h-4zM14,21h4v1h-4zM14,22h4v1h-4zM12,23h8v1h-8zM12,24h8v1h-8z'/%3E%3Cpath fill='%23262c86' d='M30,1h1v1h-1zM2,2h28v1h-28zM2,3h28v1h-28zM2,4h28v1h-28zM2,5h28v1h-28zM2,6h12v1h-12zM18,6h12v1h-12zM2,7h12v1h-12zM18,7h12v1h-12zM2,8h12v1h-12zM18,8h12v1h-12zM2,9h12v1h-12zM18,9h12v1h-12zM2,10h28v1h-28zM2,11h28v1h-28zM2,12h10v1h-10zM18,12h12v1h-12zM2,13h10v1h-10zM18,13h12v1h-12zM2,14h12v1h-12zM18,14h12v1h-12zM2,15h12v1h-12zM18,15h12v1h-12zM2,16h12v1h-12zM18,16h12v1h-12zM2,17h12v1h-12zM18,17h12v1h-12zM2,18h12v1h-12zM18,18h12v1h-12zM2,19h12v1h-12zM18,19h12v1h-12zM2,20h12v1h-12zM18,20h12v1h-12zM2,21h12v1h-12zM18,21h12v1h-12zM2,22h12v1h-12zM18,22h12v1h-12zM2,23h10v1h-10zM20,23h10v1h-10zM2,24h10v1h-10zM20,24h10v1h-10zM2,25h28v1h-28zM2,26h28v1h-28zM2,27h28v1h-28zM2,28h28v1h-28zM2,29h28v1h-28zM1,30h1v1h-1z'/%3E%3Cpath fill='%23181c62' d='M30,2h1v1h-1zM30,3h1v1h-1zM30,4h1v1h-1zM30,5h1v1h-1zM30,6h1v1h-1zM30,7h1v1h-1zM30,8h1v1h-1zM30,9h1v1h-1zM30,10h1v1h-1zM30,11h1v1h-1zM30,12h1v1h-1zM30,13h1v1h-1zM30,14h1v1h-1zM30,15h1v1h-1zM30,16h1v1h-1zM30,17h1v1h-1zM30,18h1v1h-1zM30,19h1v1h-1zM30,20h1v1h-1zM30,21h1v1h-1zM30,22h1v1h-1zM30,23h1v1h-1zM30,24h1v1h-1zM30,25h1v1h-1zM30,26h1v1h-1zM30,27h1v1h-1zM30,28h1v1h-1zM30,29h1v1h-1zM2,30h29v1h-29z'/%3E%3Cpath fill='%23141416' d='M0,0h32v1h-32zM0,1h1v1h-1zM31,1h1v1h-1zM0,2h1v1h-1zM31,2h1v1h-1zM0,3h1v1h-1zM31,3h1v1h-1zM0,4h1v1h-1zM31,4h1v1h-1zM0,5h1v1h-1zM31,5h1v1h-1zM0,6h1v1h-1zM31,6h1v1h-1zM0,7h1v1h-1zM31,7h1v1h-1zM0,8h1v1h-1zM31,8h1v1h-1zM0,9h1v1h-1zM31,9h1v1h-1zM0,10h1v1h-1zM31,10h1v1h-1zM0,11h1v1h-1zM31,11h1v1h-1zM0,12h1v1h-1zM31,12h1v1h-1zM0,13h1v1h-1zM31,13h1v1h-1zM0,14h1v1h-1zM31,14h1v1h-1zM0,15h1v1h-1zM31,15h1v1h-1zM0,16h1v1h-1zM31,16h1v1h-1zM0,17h1v1h-1zM31,17h1v1h-1zM0,18h1v1h-1zM31,18h1v1h-1zM0,19h1v1h-1zM31,19h1v1h-1zM0,20h1v1h-1zM31,20h1v1h-1zM0,21h1v1h-1zM31,21h1v1h-1zM0,22h1v1h-1zM31,22h1v1h-1zM0,23h1v1h-1zM31,23h1v1h-1zM0,24h1v1h-1zM31,24h1v1h-1zM0,25h1v1h-1zM31,25h1v1h-1zM0,26h1v1h-1zM31,26h1v1h-1zM0,27h1v1h-1zM31,27h1v1h-1zM0,28h1v1h-1zM31,28h1v1h-1zM0,29h1v1h-1zM31,29h1v1h-1zM0,30h1v1h-1zM31,30h1v1h-1zM0,31h32v1h-32z'/%3E%3Cpath fill='%234a52b8' d='M1,1h29v1h-29zM1,2h1v1h-1zM1,3h1v1h-1zM1,4h1v1h-1zM1,5h1v1h-1zM1,6h1v1h-1zM1,7h1v1h-1zM1,8h1v1h-1zM1,9h1v1h-1zM1,10h1v1h-1zM1,11h1v1h-1zM1,12h1v1h-1zM1,13h1v1h-1zM1,14h1v1h-1zM1,15h1v1h-1zM1,16h1v1h-1zM1,17h1v1h-1zM1,18h1v1h-1zM1,19h1v1h-1zM1,20h1v1h-1zM1,21h1v1h-1zM1,22h1v1h-1zM1,23h1v1h-1zM1,24h1v1h-1zM1,25h1v1h-1zM1,26h1v1h-1zM1,27h1v1h-1zM1,28h1v1h-1zM1,29h1v1h-1z'/%3E%3C/svg%3E")}
.ico-info{background-image:var(--ico-info)}
:root{--ico-question:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M13,7h6v1h-6zM12,8h8v1h-8zM11,9h3v1h-3zM18,9h3v1h-3zM11,10h3v1h-3zM18,10h3v1h-3zM18,11h3v1h-3zM18,12h3v1h-3zM17,13h3v1h-3zM16,14h3v1h-3zM15,15h3v1h-3zM15,16h3v1h-3zM15,17h3v1h-3zM15,20h3v1h-3zM15,21h3v1h-3zM15,22h3v1h-3z'/%3E%3Cpath fill='%23262c86' d='M13,2h6v1h-6zM10,3h12v1h-12zM8,4h16v1h-16zM7,5h18v1h-18zM26,5h1v1h-1zM6,6h20v1h-20zM5,7h8v1h-8zM19,7h8v1h-8zM4,8h8v1h-8zM20,8h8v1h-8zM4,9h7v1h-7zM14,9h4v1h-4zM21,9h7v1h-7zM3,10h8v1h-8zM14,10h4v1h-4zM21,10h8v1h-8zM3,11h15v1h-15zM21,11h8v1h-8zM3,12h15v1h-15zM21,12h8v1h-8zM2,13h15v1h-15zM20,13h10v1h-10zM2,14h14v1h-14zM19,14h11v1h-11zM2,15h13v1h-13zM18,15h12v1h-12zM2,16h13v1h-13zM18,16h12v1h-12zM2,17h13v1h-13zM18,17h12v1h-12zM2,18h28v1h-28zM3,19h26v1h-26zM3,20h12v1h-12zM18,20h11v1h-11zM3,21h12v1h-12zM18,21h11v1h-11zM4,22h11v1h-11zM18,22h10v1h-10zM4,23h24v1h-24zM5,24h22v1h-22zM6,25h20v1h-20zM5,26h1v1h-1zM7,26h18v1h-18zM8,27h16v1h-16zM10,28h12v1h-12zM13,29h6v1h-6z'/%3E%3Cpath fill='%23181c62' d='M26,6h2v1h-2zM27,7h2v1h-2zM28,8h1v1h-1zM28,9h2v1h-2zM29,10h1v1h-1zM29,11h1v1h-1zM29,12h2v1h-2zM30,13h1v1h-1zM30,14h1v1h-1zM30,15h1v1h-1zM30,16h1v1h-1zM30,17h1v1h-1zM30,18h1v1h-1zM29,19h2v1h-2zM29,20h1v1h-1zM29,21h1v1h-1zM28,22h2v1h-2zM28,23h1v1h-1zM27,24h2v1h-2zM26,25h2v1h-2zM6,26h1v1h-1zM25,26h2v1h-2zM6,27h2v1h-2zM24,27h2v1h-2zM7,28h3v1h-3zM22,28h3v1h-3zM9,29h4v1h-4zM19,29h4v1h-4zM12,30h8v1h-8z'/%3E%3Cpath fill='%23141416' d='M12,0h8v1h-8zM9,1h3v1h-3zM20,1h3v1h-3zM7,2h2v1h-2zM23,2h2v1h-2zM6,3h1v1h-1zM25,3h1v1h-1zM5,4h1v1h-1zM26,4h1v1h-1zM4,5h1v1h-1zM27,5h1v1h-1zM3,6h1v1h-1zM28,6h1v1h-1zM2,7h1v1h-1zM29,7h1v1h-1zM2,8h1v1h-1zM29,8h1v1h-1zM1,9h1v1h-1zM30,9h1v1h-1zM1,10h1v1h-1zM30,10h1v1h-1zM1,11h1v1h-1zM30,11h1v1h-1zM0,12h1v1h-1zM31,12h1v1h-1zM0,13h1v1h-1zM31,13h1v1h-1zM0,14h1v1h-1zM31,14h1v1h-1zM0,15h1v1h-1zM31,15h1v1h-1zM0,16h1v1h-1zM31,16h1v1h-1zM0,17h1v1h-1zM31,17h1v1h-1zM0,18h1v1h-1zM31,18h1v1h-1zM0,19h1v1h-1zM31,19h1v1h-1zM1,20h1v1h-1zM30,20h1v1h-1zM1,21h1v1h-1zM30,21h1v1h-1zM1,22h1v1h-1zM30,22h1v1h-1zM2,23h1v1h-1zM29,23h1v1h-1zM2,24h1v1h-1zM29,24h1v1h-1zM3,25h1v1h-1zM28,25h1v1h-1zM4,26h1v1h-1zM27,26h1v1h-1zM5,27h1v1h-1zM26,27h1v1h-1zM6,28h1v1h-1zM25,28h1v1h-1zM7,29h2v1h-2zM23,29h2v1h-2zM9,30h3v1h-3zM20,30h3v1h-3zM12,31h8v1h-8z'/%3E%3Cpath fill='%234a52b8' d='M12,1h8v1h-8zM9,2h4v1h-4zM19,2h4v1h-4zM7,3h3v1h-3zM22,3h3v1h-3zM6,4h2v1h-2zM24,4h2v1h-2zM5,5h2v1h-2zM25,5h1v1h-1zM4,6h2v1h-2zM3,7h2v1h-2zM3,8h1v1h-1zM2,9h2v1h-2zM2,10h1v1h-1zM2,11h1v1h-1zM1,12h2v1h-2zM1,13h1v1h-1zM1,14h1v1h-1zM1,15h1v1h-1zM1,16h1v1h-1zM1,17h1v1h-1zM1,18h1v1h-1zM1,19h2v1h-2zM2,20h1v1h-1zM2,21h1v1h-1zM2,22h2v1h-2zM3,23h1v1h-1zM3,24h2v1h-2zM4,25h2v1h-2z'/%3E%3C/svg%3E")}
.ico-question{background-image:var(--ico-question)}

/* ============================================================ 9. progress */
.bar{height:20px;padding:3px;background:#fff;box-shadow:var(--sunken)}
.bar > i{display:block;height:100%;width:var(--p,0%);max-width:100%;
  background:repeating-linear-gradient(90deg,var(--pen) 0 12px,transparent 12px 14px);
  transition:width 300ms steps(3,end)}
/* steps of the probing dialog: ▸ for the active line, ✓ for a finished one */
.steps{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.4}
.steps li{display:grid;grid-template-columns:16px 1fr;gap:8px;padding:5px 0;color:var(--quiet)}
.steps li::before{content:"";width:12px;height:12px;margin-top:.3em;background:center/contain no-repeat}
.steps li.active{color:var(--ink)}
.steps li.active::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M0 0v12l8-6z' fill='%23141416'/%3E%3C/svg%3E")}
.steps li.done{color:var(--ink)}
.steps li.done::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3L10.5 2.5' fill='none' stroke='%231b6e3a' stroke-width='2.2'/%3E%3C/svg%3E")}

/* ============================================================ 10. listbox */
.listbox{list-style:none;margin:0;padding:2px;background:#fff;box-shadow:var(--sunken);font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.3}
.listbox li{display:flex;align-items:center;gap:12px;min-height:34px;padding:6px 10px;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.listbox li:first-child{border-top:0}
.listbox li .n{flex:none;width:20px;color:var(--pen);font-weight:700}
.listbox li[aria-selected="true"],.listbox li.sel{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px;border-top-color:transparent}
.listbox li[aria-selected="true"] .n,.listbox li.sel .n{color:#fff}
.listbox li[aria-selected="true"] + li,.listbox li.sel + li{border-top-color:transparent}

/* ============================================================ 11. tree (FAQ) */
.tree{list-style:none;margin:0;padding:0}
.tree > li{position:relative;padding-left:26px}
/* the dotted trunk: every node draws its own segment; the first starts at its box, the last ends at its box */
.tree > li::before{content:"";position:absolute;left:4px;top:0;bottom:0;border-left:1px dotted var(--g-sh2)}
.tree > li:first-child::before{top:22px}
.tree > li:last-child::before{bottom:auto;height:22px}
.tree > li:only-child::before{display:none}
.tree summary{list-style:none;cursor:pointer;position:relative;padding:11px 0;font-size:17px;font-weight:600;line-height:1.35;user-select:none;-webkit-user-select:none}
.tree summary::-webkit-details-marker{display:none}
/* the 9×9 box with + or −, sitting on the trunk */
.tree summary::before{content:"";position:absolute;left:-26px;top:18px;width:9px;height:9px;border:1px solid var(--g-sh2);background:#fff;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:5px 1px,1px 5px;background-position:center;background-repeat:no-repeat}
.tree details[open] > summary::before{background-image:linear-gradient(var(--ink),var(--ink));background-size:5px 1px}
/* the dotted stub from the box to the text */
.tree summary::after{content:"";position:absolute;left:-17px;top:22px;width:12px;border-top:1px dotted var(--g-sh2)}
.tree summary:focus-visible{outline:none}
.tree summary:focus-visible > span{outline:1px dotted var(--ink);outline-offset:2px}
.tree .a{padding:2px 0 16px;max-width:70ch;line-height:1.55}
.tree .a p{margin:0}
.tree .a p + p{margin-top:.7em}
@media (hover:hover) and (pointer:fine){ .tree summary:hover{color:var(--pen)} }

/* ============================================================ 12. footer as a status bar */
.foot{background:var(--g-face);padding:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--g-hi),inset 0 2px 0 var(--g-hi2)}
.foot .sbar{margin:0;grid-template-columns:auto 1fr auto}
.foot .sbar > *{white-space:normal}
.foot nav{display:flex;flex-wrap:wrap;gap:0 14px}
.foot a{text-decoration:underline;text-underline-offset:2px}

/* ============================================================ 13. the desktop (dither) */
/* canvas painted by a 30-line script (Bayer 4×4, 3px cell, ink = --pen, density .10 → .50 to the top right).
   Without JS the CSS checkerboard below stays; the script adds .is-painted and removes it. No text ever sits on it. */
.desk{position:relative;padding:40px 44px 28px 24px;background:repeating-conic-gradient(var(--rule) 0 25%,transparent 0 50%) 0 0/4px 4px}
.desk.is-painted{background:none}
.desk canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.desk > :not(canvas){position:relative}

/* ============================================================ 14. scrollbar (inside panels only, fine pointer only) */
@media (hover:hover) and (pointer:fine){
  .pane.scroll::-webkit-scrollbar{width:16px;height:16px}
  .pane.scroll::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--g-face) 0 25%,#fff 0 50%) 0 0/4px 4px}
  .pane.scroll::-webkit-scrollbar-thumb{background:var(--g-face);box-shadow:var(--raised)}
  .pane.scroll::-webkit-scrollbar-button:single-button{display:block;width:16px;height:16px;background:var(--g-face) center/7px 4px no-repeat;box-shadow:var(--raised)}
  .pane.scroll::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 4h7L3.5 0z' fill='%23141416'/%3E%3C/svg%3E")}
  .pane.scroll::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23141416'/%3E%3C/svg%3E")}
  .pane.scroll::-webkit-scrollbar-button:single-button:horizontal{display:none}
  .pane.scroll::-webkit-scrollbar-corner{background:var(--g-face)}
  @supports not selector(::-webkit-scrollbar){ .pane.scroll{scrollbar-color:var(--g-sh2) var(--band)} }
}

/* ============================================================ 15. icons view and the trades list */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px 12px}
.tiles li{display:grid;align-content:start;justify-items:center;text-align:center;gap:8px 0;padding:12px 6px 10px}
.tiles img{width:96px;height:64px;object-fit:cover;outline:1px solid var(--rule)}
.tiles b{font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.tiles span{font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.35;color:var(--quiet);overflow-wrap:anywhere}
.tiles li.sel{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}
.tiles li.sel span{color:#fff}
.trades{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.trades li{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--g-sh2);font-size:17px;line-height:1.45;align-items:baseline}
.trades li span:first-child{font-weight:700;letter-spacing:-.01em}
.trades li span:last-child{font-family:var(--mono);color:var(--quiet);font-size:13px;font-weight:500}
.trades li:nth-child(5),.trades li:nth-child(10){border-bottom:1px solid var(--g-sh2)}

/* ============================================================ 16. motion off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .win.enter{opacity:1;transform:none}
  .you{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}
  .you .n{color:#fff}
  .stagger > *{opacity:1}
}

/* ============================================================ 17. touch and small screens */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{height:44px}
  .btn.sq{width:44px;height:44px}
  .dlg-btns .btn{height:44px}
  .check{min-height:44px;padding:10px 0}
  .ctl > button{width:24px;height:22px}
}
@media (max-width:1180px){
  h1,.h1{font-size:56px}
  .desk{padding:32px 28px 24px 16px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .trades{column-gap:40px}
}
/* поле + кнопка в столбик уже с 1023px: в двух колонках поле сжимается и режет плейсхолдер */
@media (max-width:1023px){
  .hero-check{flex-direction:column;gap:12px}
  .hero-check .btn{width:100%}
}
@media (max-width:900px){
  :root{--gutter:20px}
  h1,.h1{font-size:40px;line-height:1.02;letter-spacing:-.03em}
  h2,.h2{font-size:28px}
  .deck,.lead{font-size:17px}
  /* windows go edge to edge; the title bar and its three buttons stay */
  .desk{margin:0 calc(-1 * var(--gutter));padding:22px 20px 22px 12px}
  .win.edge{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .pane{padding:18px 16px}
  .ask{font-size:15px;margin-bottom:18px}
  .rank li{font-size:16px;grid-template-columns:30px 1fr}
  .you{font-size:16px;grid-template-columns:30px 1fr auto;margin:0 -16px;padding:12px 16px}
  .sbar{grid-template-columns:1fr}
  .sbar > *{white-space:normal;overflow:visible;text-overflow:clip}
  .btn.lg{width:100%}
  .dlg .pane{padding:16px 16px 14px}
  .dlg-btns{flex-direction:column}
  .dlg-btns .btn{width:100%}
  .foot .sbar{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr;gap:4px 8px}
  .tiles li{padding:10px 4px 8px}
  .trades{grid-template-columns:1fr}
  .trades li{grid-template-columns:1fr;gap:2px}
  .trades li:nth-child(5){border-bottom:0}
}
@media (max-width:359px){
  .desk{background:none;padding:12px 0}
}

/* ============================================================ 18. site chrome: header and the mobile menu
   Added on step 2 (the home page). The markup lives in
   _site_private/partials/header.html and goes on every page unchanged. */
.site-head{position:relative;z-index:50;background:var(--paper);box-shadow:inset 0 -1px 0 var(--rule)}
.head-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:inline-flex;align-items:center;flex:none;font-size:20px;font-weight:800;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.brand-dot{width:6px;height:6px;margin:0 3px;background:var(--pen)}
.head-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.head-nav a{font-size:15px;font-weight:600;line-height:1;text-decoration:none;color:var(--ink);white-space:nowrap}
.head-cta{flex:none}
.head-cta .narrow{display:none}
.head-burger,.menu-x{display:none}
@media (hover:hover) and (pointer:fine){ .head-nav a:hover{color:var(--pen)} }

@media (max-width:900px){
  .head-in{gap:10px}
  .head-cta{margin-left:auto}
  .head-cta .wide{display:none}
  .head-cta .narrow{display:inline}
  .head-burger{display:inline-flex}
  /* the menu is a window under the header, not a full-screen overlay */
  .head-nav{position:absolute;left:0;right:0;top:68px;z-index:60;display:none;margin:0;gap:0;
    background:var(--g-face);padding:3px;box-shadow:var(--raised)}
  .head-nav.open{display:block}
  .head-nav::before{content:"Menu";display:flex;align-items:center;height:28px;padding:0 8px;
    background:var(--pen);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1}
  .head-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;background:#fff;
    font-size:17px;border-top:1px solid var(--rule)}
  .head-nav a:first-of-type{border-top:0}
  .menu-x{display:block;position:absolute;top:8px;right:6px;width:18px;height:16px;padding:0;border:0;border-radius:0;
    background:var(--g-face) center no-repeat;box-shadow:var(--raised);cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l6 6M7 1L1 7' stroke='%23141416' stroke-width='1.5'/%3E%3C/svg%3E")}
  .menu-x::after{content:"";position:absolute;inset:-14px -13px}
  .menu-x:active{box-shadow:var(--pressed)}
  .menu-x:focus-visible{outline:2px solid #fff;outline-offset:1px}
}
@media (max-width:420px){
  .head-in{gap:8px}
  .brand{font-size:17px}
  .btn.sm{--px:12px}
}

/* ============================================================ 19. the home page
   Классы разметки оставлены прежними (#who-for, .factors-list, .service-card,
   .qc-* и т.д.) — так main.js остаётся нетронутым, а старые имена просто
   получают новый вид. Правило дозировки то же: ретро в окне, в элементах
   управления и в служебных полосах, всё прочее — белая бумага. */
[hidden]{display:none !important}

main > section{padding:72px 0}
main > section + section{border-top:1px solid var(--rule)}
main > section.band{background:var(--band)}
.eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin:0 0 14px}
.eyebrow.center{text-align:center}
.section-title{font-size:36px;line-height:1.1;letter-spacing:-.025em;font-weight:800;margin:0;text-wrap:balance}
.section-title em,h1 em,.qc-h2 em{font-style:normal;color:var(--pen)}
.factors-lede,.services-lede{font-size:20px;line-height:1.5;margin:18px 0 0;max-width:72ch}
.factors-lede em{font-style:italic}

/* ---- hero ----
   Две колонки на десктопе: слева заголовок, подзаголовок и форма, справа окно с ответом ИИ
   НА ТОЙ ЖЕ высоте, что и заголовок. До 18.09 окно начиналось только на уровне формы, и
   справа от h1 зияла пустая половина экрана — её правка: «большое пустое пространство,
   оно ничем не заполнено».
   Порядок в DOM (заголовок → окно → форма) = порядок на мобиле, раздел 7 плана. На десктопе
   раскладку задают области, поэтому на телефоне не нужен ни один order. */
#hero{padding:56px 0 72px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  grid-template-areas:"say ev" "ask ev";grid-template-rows:auto 1fr;align-items:start;column-gap:56px}
.hero-say{grid-area:say}
.hero-evidence{grid-area:ev;align-self:stretch}
.hero-evidence .desk{height:100%}
.hero-ask{grid-area:ask;margin-top:40px}
#hero h1{max-width:none}
.hero-say .subhead{margin-top:22px;max-width:48ch;color:var(--ink)}
.hero-check{display:flex;gap:12px;align-items:flex-start}
.hero-check .field{flex:1;margin:0}
.hero-check .btn{flex:none}
.hero-check-error{display:none;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:15px;line-height:1.4;color:var(--bad)}
.hero-check-error:not([hidden]){display:flex}
.hero-check-error::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;
  background:var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v6M8 11v2' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.hero-check-note{font-size:13px;line-height:1.5;color:var(--quiet);margin:12px 0 0}
.hero-more{margin:24px 0 0}

/* ---- плашка демо-режима ----
   Живёт ТОЛЬКО на превью *.pages.dev и ставится из JS (main.js / result.js), в разметке
   её нет: на боевом домене ни строки лишнего текста для движков. Вид — служебная полоса
   системы: серое лицо, канавка в один пиксель, 13px. Не кричит, но видна над формой.
   Why: 18.09 владелица ввела на превью свой сайт, получила заготовленный ответ про med spa
   в Майами и решила, что движок сломан. */
.prev-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:9px 12px;
  background:var(--g-face);color:var(--ink);font-size:13px;line-height:1.45;
  box-shadow:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2)}
.prev-note::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;
  background:var(--pen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v2M8 7v6' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.prev-note b{font-weight:700}

/* ---- who this is for ---- */
#who-for .trades{margin-top:40px}
.trades li > h3{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.45;margin:0}
.trades li > p{margin:0;font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.45;color:var(--quiet)}
.who-footer{margin-top:28px;font-size:15px;line-height:1.5;color:var(--quiet);max-width:72ch}

/* ---- stats ---- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-item{padding:22px 0 0;border-top:2px solid var(--ink)}
.stat-number{display:block;font-size:48px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--pen)}
.stat-label{margin-top:12px;font-size:17px;font-weight:600;line-height:1.3}
.stat-source{margin-top:6px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--quiet)}

/* ---- timeline ---- */
.timeline{margin-top:40px;display:grid;gap:0}
.timeline-item{padding:28px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 32px}
.timeline-time{grid-row:span 4;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--pen);line-height:1.4}
.timeline-milestone{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.timeline-desc{margin:10px 0 0;font-size:17px;line-height:1.55;max-width:66ch}
.timeline-list{margin:14px 0 0;padding:0;list-style:none;max-width:66ch}
.timeline-list li{padding:7px 0 7px 22px;border-top:1px solid var(--rule);font-size:15px;line-height:1.45;position:relative}
.timeline-list li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;background:var(--pen)}

/* ---- factors / our data / how to check ---- */
.factors-list{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.factor{padding:24px 0;border-top:1px solid var(--rule)}
.factor h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0}
.factor p{margin:10px 0 0;font-size:17px;line-height:1.55}
#our-data .factors-lede a{color:var(--pen)}

/* ---- services: билеты с точечной отбивкой ---- */
.services-grid{margin-top:40px;display:grid;gap:0}
.service-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;padding:26px 0;border-top:1px solid var(--g-sh2);align-items:baseline}
.service-card:last-child{border-bottom:1px solid var(--g-sh2)}
.service-name{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:12px;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.service-name::after{content:"";flex:1;min-width:24px;border-bottom:1px dotted var(--g-sh2);transform:translateY(-5px)}
/* БЕЗ tabular-nums: у Schibsted Grotesk табличная запятая занимает целую ячейку и цена
   читается как «$1 , 200» (грабля из html-proto-screenshots.md, поймана скрином 18.09) */
.service-price{grid-column:2;grid-row:1;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.service-desc{grid-column:1/-1;grid-row:2;margin-top:10px;font-size:17px;line-height:1.55;max-width:78ch;color:var(--ink)}
/* Кнопки покупки — главные (.btn.pri, синяя заливка): её правка 18.09, серые «не читались
   как кнопки». Своего класса .buy-btn больше нет, ссылки берут общий компонент кнопки. */
.service-buy{grid-column:1/-1;grid-row:3;margin-top:18px}
.services-note{margin-top:28px;font-size:17px;font-weight:600;line-height:1.5}
/* Бандл $2,400 — второстепенная кнопка: продукта на LavaTop нет, ведём в почту */
.services-note-buy{margin-top:16px}
.services-note-buy + .trust-line{margin-top:20px}
.trust-line{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--quiet);max-width:72ch}

/* ---- recent posts ---- */
.posts-grid{margin-top:40px;display:grid;gap:0}
.post-preview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 32px;padding:22px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.post-date{grid-row:span 3;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--quiet);line-height:1.6}
.post-preview h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:0}
.post-preview p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--quiet);max-width:72ch}
.post-read{margin-top:10px;font-size:15px;font-weight:600;color:var(--pen)}
.posts-all{margin-top:28px}
@media (hover:hover) and (pointer:fine){
  .post-preview:hover h3{color:var(--pen)}
  .post-preview:hover .post-read{text-decoration:underline;text-underline-offset:2px}
}

/* ---- FAQ tree на всю колонку ---- */
#faq .tree{margin-top:36px;max-width:860px}

/* ---- нижняя форма проверки ---- */
.qc-wrap{max-width:760px;text-align:center}
.qc-h2{font-size:36px;line-height:1.1;letter-spacing:-.025em;font-weight:800;margin:0}
.qc-lede{margin:18px auto 0;font-size:17px;line-height:1.55;max-width:66ch}
.qc-lede em{font-style:normal;font-weight:700}
.qc-form{margin-top:32px;display:grid;gap:12px;justify-items:stretch;max-width:520px;margin-left:auto;margin-right:auto}
.qc-form .qc-fields{margin:0}
.qc-disclaimer{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--quiet)}

/* ---- результат, который рисует main.js ---- */
.qc-result{margin:36px auto 0;max-width:720px;text-align:left;background:var(--g-face);padding:3px;box-shadow:var(--raised)}
.qc-result > *{background:#fff}
.qc-result{display:block}
.qc-headline{margin:0;padding:18px 20px 14px;background:#fff;box-shadow:var(--sunken);font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.qc-headline.qc-bad{color:var(--bad)} .qc-headline.qc-mixed{color:var(--warn)} .qc-headline.qc-good{color:var(--good)}
.qc-sub{margin:3px 0 0;padding:14px 20px;background:#fff;box-shadow:var(--sunken);font-size:15px;line-height:1.55}
.qc-detected{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 3px}
.qc-badge{flex:1;min-width:0;padding:5px 8px 4px;font-size:13px;line-height:1.35;background:var(--g-face);
  box-shadow:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2)}
.qc-section-title{margin:3px 0 0;padding:10px 20px 8px;background:var(--pen);color:#fff;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.qc-competitors{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:14px 20px;background:#fff;box-shadow:var(--sunken)}
.qc-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--g-face);box-shadow:var(--raised);
  font-family:var(--mono);font-size:13px;font-weight:500;overflow-wrap:anywhere}
.qc-chip-n{color:var(--pen);font-weight:700}
.qc-probes{list-style:none;margin:0;padding:8px 20px 14px;background:#fff;box-shadow:var(--sunken);font-size:15px}
.qc-probes li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--rule);align-items:start}
.qc-probes li:first-child{border-top:0}
.qc-mark{font-weight:800;line-height:1.3}
.qc-mark.qc-yes{color:var(--good)} .qc-mark.qc-no{color:var(--bad)}
.qc-q-text{font-family:var(--mono);font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.qc-source-snip{display:block;margin-top:4px;font-size:13px;color:var(--quiet)}
.qc-upsell{margin:3px 0 0;padding:18px 20px;background:#fff;box-shadow:var(--sunken)}
.qc-upsell h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin:0}
.qc-upsell p{margin:10px 0 0;font-size:15px;line-height:1.55}
#qc-email-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
#qc-email{flex:1;min-width:220px;height:50px;padding:0 14px;border:0;border-radius:0;appearance:none;-webkit-appearance:none;
  background:#fff;color:var(--ink);font-family:var(--mono);font-size:16px;font-weight:500;box-shadow:var(--sunken)}
#qc-email:focus{outline:2px solid var(--pen);outline-offset:1px}
.qc-done{color:var(--good);font-weight:600}
.qc-upsell-err{color:var(--bad)}
.qc-result.qc-error .qc-headline{box-shadow:var(--sunken)}
/* main.js рисует кнопку апселла как .btn.btn-primary — даём ей вид главной кнопки */
.btn.btn-primary{background:var(--pen);color:#fff;box-shadow:var(--raised-pen)}
.btn.btn-primary:not(:disabled):active{box-shadow:var(--pressed-pen);background:var(--pen);color:#fff}
@media (hover:hover) and (pointer:fine){ .btn.btn-primary:not(:disabled):hover{background:var(--pen-hover)} }
.btn-secondary{}

/* ---- back to top ---- */
#back-to-top{position:fixed;right:20px;bottom:20px;z-index:40;display:none;font-size:15px}
#back-to-top.visible{display:inline-flex}

/* ---- модалки ---- */
/* .shade.fixed выше по файлу тоже 0,2,0 — поэтому здесь ДВА класса, иначе модалка
   висит открытой на каждой загрузке (поймано скринами 18.09) */
.qc-modal.shade,.check-modal.shade{display:none}
.qc-modal.shade.active,.check-modal.shade.active{display:grid}
.check-modal-backdrop{position:absolute;inset:0;cursor:default}
.qc-modal .dlg,.check-modal .dlg{position:relative;z-index:1}
.qc-modal-title,.check-modal .tbar h3{flex:1;min-width:0;contain:inline-size;font-family:var(--sans);font-size:13px;font-weight:700;
  line-height:1;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;color:#fff}
.check-modal-close{font-size:0;line-height:0;color:transparent}
.qc-modal-sub,.check-modal-lede{margin:0 0 16px;font-size:15px;line-height:1.5}
.qc-modal-steps{display:grid;gap:0}
.qc-modal-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--quiet)}
.qc-modal-step-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  background:#fff;box-shadow:var(--sunken);font-size:11px;font-weight:700;color:var(--quiet)}
.qc-modal-step.active{color:var(--ink)}
.qc-modal-step.active .qc-modal-step-icon{background:var(--pen);color:#fff;box-shadow:var(--raised-pen)}
.qc-modal-step.done{color:var(--ink)}
.qc-modal-step.done .qc-modal-step-icon{background:#fff;color:var(--good)}
.qc-modal-bar{margin-top:16px}
/* прогресс идёт за шагами без единой строки в main.js: порядок правил = порядок шагов */
.qc-modal:has(.qc-modal-step[data-step="1"].active) .qc-modal-bar > i{width:25%}
.qc-modal:has(.qc-modal-step[data-step="2"].active) .qc-modal-bar > i{width:50%}
.qc-modal:has(.qc-modal-step[data-step="3"].active) .qc-modal-bar > i{width:75%}
.qc-modal:has(.qc-modal-step[data-step="4"].active) .qc-modal-bar > i{width:100%}
.qc-modal:has(.qc-modal-step[data-step="4"].done) .qc-modal-bar > i{width:100%}
.check-modal-error{display:none;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--bad)}
.check-modal-error:not([hidden]){display:flex}
.check-modal-error::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;
  background:var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v6M8 11v2' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 16px no-repeat}
#check-modal-form{display:grid;gap:12px}
#check-modal .btn{width:100%}

/* ---- планшет и телефон ---- */
@media (max-width:1180px){
  .hero-in{column-gap:36px}
  .factors-list{gap:0 32px}
  .timeline-item{grid-template-columns:180px minmax(0,1fr);gap:8px 24px}
  .post-preview{grid-template-columns:130px minmax(0,1fr);gap:6px 24px}
}
@media (max-width:900px){
  main > section{padding:48px 0}
  #hero{padding:32px 0 48px}
  .section-title,.qc-h2{font-size:28px}
  .factors-lede,.services-lede{font-size:17px;margin-top:14px}
  /* grid-template-rows сбрасываем явно: на десктопе там auto 1fr под две строки, а тут строк три */
  .hero-in{grid-template-columns:1fr;grid-template-areas:"say" "ev" "ask";grid-template-rows:auto;row-gap:28px}
  .hero-ask{margin-top:0}
  .stats-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .stat-number{font-size:36px}
  .stat-label{font-size:15px}
  .timeline-item{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .timeline-time{grid-row:auto}
  .timeline-milestone{font-size:17px}
  .timeline-desc,.factor p,.service-desc{font-size:15px}
  .factors-list{grid-template-columns:1fr}
  .factor h3,.post-preview h3,.qc-upsell h3{font-size:17px}
  .service-name,.service-price{font-size:20px}
  .service-card{grid-template-columns:minmax(0,1fr) auto}
  .service-buy .btn,.services-note-buy .btn{width:100%}
  .post-preview{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .post-date{grid-row:auto}
  .qc-wrap{text-align:left}
  .eyebrow.center{text-align:left}
  .qc-form{max-width:none}
  .qc-result{margin-top:28px}
  .qc-headline{font-size:17px;padding:14px 16px 12px}
  .qc-sub,.qc-competitors,.qc-upsell{padding:14px 16px}
  .qc-probes{padding:6px 16px 12px}
  .qc-section-title{padding:9px 16px 7px}
  .qc-detected{flex-direction:column}
  #back-to-top{right:12px;bottom:12px}
}

/* ============================================================ 19. what the scripts render
   Added on step 3 (/result, /audit-intake). result.js and main.js build their markup with
   innerHTML, so it cannot carry the classes of the system — the names below are frozen by the
   contract (win_redesign_plan.md, 4.1) and the rules here give those frozen names the look of the
   system: window pane, status bar, listbox, probes, buttons. Do not rename anything in this
   section without reading the contract first: the scripts find these elements by name. */

/* [hidden] has to beat any display we set by id on #loading / #result / #error */
[hidden]{display:none !important}

/* --- page frames --- */
/* Widths come from .col (--measure); these rules only set the vertical rhythm of each page. */
.res-main{--measure:940px;padding:44px var(--gutter) 72px}
.res-main > h1{margin:0 0 26px}
.intake-main{padding:44px var(--gutter) 72px}
.nf-main{padding:80px var(--gutter) 96px}
.state-stage{padding:28px 0}
/* A dialog that stands on the page (not over it) starts at the column edge, on the brand's line.
   It also drops the 16px side inset of the floating modal: on a phone the column gutter already
   does that job, and keeping both left 32px of dead space on the right only. */
.state-stage .dlg,.nf-main .dlg{margin:0;width:min(420px,100%)}
.dlg-h{display:block;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:0;margin:0 0 .6em}
/* the loading bar has nothing to measure, so it walks its own segments */
.load-bar{margin-top:18px}
.load-bar > i{animation:load-bar 1.8s steps(1,end) infinite}
@keyframes load-bar{0%{width:14%}25%{width:38%}50%{width:62%}75%{width:86%}100%{width:100%}}

/* --- the result window: on screen only while result.js keeps #result unhidden --- */
.res-win:has(#result[hidden]){display:none}

/* --- #result is the pane of that window; the script fills it --- */
.qc-result{--pane-px:24px;--pane-py:22px;display:flex;flex-direction:column}
.qc-result > *{min-width:0}
/* detected badges → the status bar along the bottom of the pane */
.qc-detected{order:90;display:grid;grid-template-columns:1fr auto;gap:3px;font-size:13px;
  margin:28px calc(-1 * var(--pane-px)) calc(-1 * var(--pane-py))}
.qc-badge{margin:0;padding:5px 8px 4px;line-height:1.35;background:var(--g-face);
  box-shadow:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-badge strong{color:var(--pen);font-weight:700}

/* --- the verdict: selected row, then a bar of one cell per question --- */
.qc-hero{margin:0}
.qc-hero-label{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.qc-hero.qc-bad .qc-hero-label{color:var(--bad)}
.qc-hero.qc-mixed .qc-hero-label{color:var(--warn)}
.qc-hero.qc-good .qc-hero-label{color:var(--good)}
.qc-verdict{margin-left:calc(-1 * var(--pane-px));margin-right:calc(-1 * var(--pane-px));
  padding-left:var(--pane-px);padding-right:var(--pane-px);border-top:0;overflow-wrap:anywhere}
.qc-verdict > span{min-width:0}
.qc-hero-headline{margin:20px 0 0;font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.015em}
.qc-hero .lbl{margin:20px 0 8px}
/* the track is ticked into --cell wide cells, the fill into --fcell wide blocks: 0 of 5 reads as
   five empty cells, that is as a verdict, and not as a bar that has not started moving yet */
.qc-hero .bar{background-image:repeating-linear-gradient(90deg,transparent 0 calc(var(--cell,20%) - 1px),var(--g-sh2) calc(var(--cell,20%) - 1px) var(--cell,20%))}
.qc-hero .bar > i{background:repeating-linear-gradient(90deg,var(--pen) 0 calc(var(--fcell,100%) - 2px),transparent calc(var(--fcell,100%) - 2px) var(--fcell,100%))}

/* --- cited instead of you → a listbox, numbered by CSS (the script writes no numbers) --- */
.qc-section-title{margin:26px 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.qc-competitors{counter-reset:comp;display:flex;flex-direction:column;margin:0;padding:2px;background:#fff;
  box-shadow:var(--sunken);font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.3}
.qc-chip{display:flex;align-items:center;gap:12px;min-height:34px;padding:6px 10px;border-top:1px solid var(--rule);overflow-wrap:anywhere}
.qc-chip::before{counter-increment:comp;content:counter(comp);flex:none;width:20px;color:var(--pen);font-weight:700}
.qc-chip:first-child{border-top:0;background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}
.qc-chip:first-child::before,.qc-chip:first-child .qc-chip-n{color:#fff}
.qc-chip:nth-child(2){border-top-color:transparent}
.qc-chip-n{margin-left:auto;padding-left:10px;font-size:13px;color:var(--quiet)}

/* --- the five questions --- */
.qc-result > ul{list-style:none;margin:0;padding:0}
.qc-result > ul > li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:9px 0;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.35;
  animation:row-in 1ms steps(1,end) both}
.qc-result > ul > li:nth-child(1){animation-delay:0ms}
.qc-result > ul > li:nth-child(2){animation-delay:60ms}
.qc-result > ul > li:nth-child(3){animation-delay:120ms}
.qc-result > ul > li:nth-child(4){animation-delay:180ms}
.qc-result > ul > li:nth-child(5){animation-delay:240ms}
.qc-result > ul > li:nth-child(6){animation-delay:300ms}
.qc-mark{font-family:var(--sans);font-size:16px;font-weight:800;line-height:1.35;text-align:center}
.qc-mark.qc-yes{color:var(--good)}
.qc-mark.qc-no{color:var(--bad)}
.qc-q-text{min-width:0;overflow-wrap:anywhere}
.qc-source-snip{display:block;margin-top:5px;font-size:13px;color:var(--quiet);overflow-wrap:anywhere}

/* --- the upsell is the second window; the script writes no pane, so the pane is a pseudo --- */
.qc-upsell{position:relative;margin:28px 0 0;padding:3px;background:var(--g-face);box-shadow:var(--raised)}
.qc-upsell::before{content:"";position:absolute;inset:3px;background:#fff;box-shadow:var(--sunken)}
.qc-upsell > *{position:relative;margin-left:20px;margin-right:20px}
.qc-upsell > h3{margin:0;padding:6px 8px;min-height:28px;background:var(--pen);color:#fff;
  font:700 13px/1.35 var(--sans);letter-spacing:.01em}
/* Боковые 20px ставятся в `.qc-upsell > *` выше, но их обнуляет старый шорткат
   `.qc-upsell p{margin:10px 0 0}` из блока главной — та же специфичность, и он выигрывал
   по порядку. Поэтому здесь margin-left/right повторены явно: без них текст упирался
   в рамку окна на 3px (её правка 18.09 по скрину страницы результата). */
.qc-upsell > p{margin:16px 20px 0;font-size:15px;line-height:1.5}
.qc-upsell > :last-child{margin-bottom:20px}
.qc-pay-line{color:var(--quiet)}
#qc-email-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 20px 0}
/* Подпись поля занимает свою строку целиком: в ряду она бы съела место у поля, а на 390px
   уронила бы кнопку на третью строку. Отступ снизу даёт gap формы, поэтому margin нулевой. */
#qc-email-form .lbl{flex:1 1 100%;margin:0}
#qc-email{flex:1 1 220px;min-width:0;height:50px;padding:0 14px;border:0;border-radius:0;appearance:none;-webkit-appearance:none;
  background:#fff;color:var(--ink);font-family:var(--mono);font-size:16px;font-weight:500;line-height:1;box-shadow:var(--sunken)}
#qc-email::placeholder{color:var(--ph);opacity:1}
#qc-email:focus{outline:2px solid var(--pen);outline-offset:1px}
.qc-upsell-err{display:flex;align-items:flex-start;gap:8px;flex-basis:100%;margin:2px 0 0;font-size:15px;line-height:1.4;color:var(--bad)}
.qc-upsell-err::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;
  background:var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v6M8 11v2' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px 16px no-repeat}

/* --- controls the scripts write without a class: the face of .btn, copied because CSS has no
       way to hand an existing rule to a new selector --- */
#qc-email-form button,.qc-pay-btn,.btn-secondary{
  --px:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 var(--px);border:0;border-radius:0;
  font-family:var(--sans);font-weight:600;font-size:17px;line-height:1;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;background:var(--g-face);color:var(--ink);box-shadow:var(--raised);
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:box-shadow 120ms var(--ease-out),padding 120ms var(--ease-out),background-color 120ms ease}
#qc-email-form button:not(:disabled):active,.qc-pay-btn:active,.btn-secondary:not(:disabled):active{
  box-shadow:var(--pressed);padding:2px calc(var(--px) - 1px) 0 calc(var(--px) + 1px);transition-duration:0ms}
#qc-email-form button:disabled{cursor:default;color:var(--g-dis);text-shadow:1px 1px 0 #fff}
.qc-pay-btn{margin-top:16px;background:var(--pen);color:#fff;box-shadow:var(--raised-pen)}
.qc-pay-btn:active{box-shadow:var(--pressed-pen)}
/* Кнопка кассы переехала ВНУТРЬ формы (одна кнопка вместо двух, 18.09), и там она стоит
   в ряд с полем — отдельный верхний отступ ей больше не нужен. */
#qc-email-form .qc-pay-btn{margin-top:0}
/* Пока сохраняем почту: серое лицо как у .btn[aria-disabled] выше, нажать второй раз нельзя.
   Клавиатурное Enter по ссылке pointer-events не ловит — его держит флаг busy в result.js. */
.qc-pay-btn[aria-disabled="true"]{pointer-events:none;cursor:default;background:var(--g-face);
  color:var(--g-dis);text-shadow:1px 1px 0 #fff;box-shadow:var(--raised)}
.btn-secondary{--px:16px;height:40px;font-size:15px}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
@media (hover:hover) and (pointer:fine){
  #qc-email-form button:not(:disabled):hover,.btn-secondary:hover{background:var(--g-hover)}
  .qc-pay-btn:hover{background:var(--pen-hover)}
}
@media (pointer:coarse){
  #qc-email-form button,.qc-pay-btn{min-height:44px}
  .btn-secondary{height:44px}
}

/* --- audit-intake: renderState() replaces #intake-box with .state-box > h2 + p --- */
.state-box{position:relative;max-width:420px;margin:0;padding:3px;background:var(--g-face);box-shadow:var(--raised)}
.state-box::before{content:"";position:absolute;inset:3px;background:#fff;box-shadow:var(--sunken)}
.state-box > *{position:relative}
.state-box h2{margin:0;padding:6px 8px;min-height:28px;background:var(--pen);color:#fff;font:700 13px/1.35 var(--sans);letter-spacing:.01em}
.state-box p{display:grid;grid-template-columns:32px 1fr;gap:18px;align-items:start;margin:0;padding:20px;font-size:15px;line-height:1.5}
.state-box p::before{content:"";width:32px;height:32px;background:center/32px 32px no-repeat;image-rendering:pixelated}
.state-box.is-error p::before{background-image:var(--ico-error)}
.state-box.is-ok p::before{background-image:var(--ico-info)}
.intake-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--quiet)}

/* --- small screens --- */
@media (max-width:900px){
  .qc-result{--pane-px:16px;--pane-py:18px}
  .res-main,.intake-main,.nf-main{padding-top:28px;padding-bottom:48px}
  .nf-main{padding-top:48px}
  .res-win{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .qc-detected{grid-template-columns:1fr}
  .qc-badge{white-space:normal;overflow:visible;text-overflow:clip}
  .qc-verdict{grid-template-columns:30px 1fr}
  .qc-verdict .tag{grid-column:2;margin-top:4px}
  .qc-hero-headline{font-size:17px}
  #qc-email-form{margin-left:16px;margin-right:16px}
  #qc-email-form button{width:100%}
  .qc-upsell > *{margin-left:16px;margin-right:16px}
  .qc-pay-btn{display:flex}
  /* На узком экране поле и касса стоят друг под другом, обе во всю ширину. */
  #qc-email-form .qc-pay-btn{width:100%}
  .result-actions .btn-secondary{width:100%}
}

/* /result: там #result — это САМА панель своего окна, а на главной .qc-result сам себе окно
   (правило шага 2 выше: серое лицо, padding 3px, max-width 720). Возвращаем панель обратно,
   иначе отрицательные margin статус-бара и строки вердикта вылезают за экран на 390px. */
.res-win > .qc-result{max-width:none;margin:0;padding:22px 24px;background:#fff;box-shadow:var(--sunken)}
@media (max-width:900px){ .res-win > .qc-result{padding:18px 16px} }
/* Те же соседи: шаг 2 красит .qc-section-title синей полосой и даёт .qc-chip серое лицо —
   на главной это внутри их собственного окна, у нас читалось как тёмный текст на синем. */
.res-win .qc-section-title{margin:26px 0 8px;padding:0;background:none;color:var(--quiet);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.res-win .qc-competitors{padding:2px;background:#fff;box-shadow:var(--sunken);border:0}
.res-win .qc-chip{background:none;border-radius:0}
.res-win .qc-chip:first-child{background:var(--pen);color:#fff}
.res-win .qc-mark{background:none;border-radius:0;width:auto;height:auto}