/* crowd5's stylesheet, loaded after ee.css (senior2 04:31 UTC 15 Oct 2026: every land of one crowd appended to the same last lines of ee.css
   another crowd had just appended to — three rebase conflicts in three hours). New blocks of crowd5's pages go here; ee.css keeps what it has. */

/* 35 + 36 RE-PAIR (design-critic 04:38 UTC 15 Oct, the scrim): measured on the 430 files the mocks dim the PAGE under an open menu
   (#f7f9fc → 238·242·246) and leave the HEADER white (255·255·255 at the bar's middle and its corner) — the scrim starts under the
   header's 72 px line, the bar and its open trigger stay as they are */
@media (max-width: 720px) {
  header.top details.bell[open]::before, header.top details.orgpick[open]::before { top: 72px; }
}

/* ===== THE OWNER'S MOCK 37 FIRST CHECK LIVE (owner-refined-pictures-v2/<device>/37-first-check-live.png, measured on the 1440 file): the
   stranger's live look — the kicker "Check in progress", "Checking <host>" and its line, the showcase note, the steps in one line, a
   hairline, the counts line with "Results update automatically"; the live card (the selected browser, the frame, CHECKING NOW, the
   check and its words, Pause pictures · Open large, the calm line) beside "Results so far"; the configurations as text tiles; the
   two folds; the foot. The page's ids and script are the live page's own; this sheet re-dresses them ===== */
body:has(#livepage) { background: #fff; } body:has(#livepage) main { background: #fff; }
#livepage .live-kicker .kick-w { color: var(--t-body); }
#livepage .live-sub { margin: calc(14px / var(--zoom, 1)) 0 0; max-width: none; font-size: calc(15px / var(--zoom, 1)); color: var(--t-body); }
#livepage .live-scnote { margin-top: calc(22px / var(--zoom, 1)); }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) .steps-wrap { margin: calc(26px / var(--zoom, 1)) 0 0; padding: 0 0 calc(20px / var(--zoom, 1)); border-bottom: 1px solid #e0e7ee; }
#livepage .steps-wrap .steps-line, #livepage .steps-wrap .pbar { display: none !important; }
#livepage .steps-wrap ol.steps { display: flex !important; flex-wrap: wrap; gap: 8px calc(28px / var(--zoom, 1)); margin: 0; padding: 0; list-style: none; }
#livepage .steps-wrap ol.steps li { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; font-size: calc(14.5px / var(--zoom, 1)); color: var(--t-body); }
#livepage .steps-wrap ol.steps li .trk, #livepage .steps-wrap ol.steps li .tm { display: none; }
#livepage .steps-wrap ol.steps li.done { color: var(--st-green); } #livepage .steps-wrap ol.steps li.done::before { content: "✓"; font-weight: 700; }
#livepage .steps-wrap ol.steps li.run { color: var(--t-blue); font-weight: 650; } #livepage .steps-wrap ol.steps li.run::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#livepage .steps-wrap ol.steps li.wait::before { content: ""; width: 12px; height: 14px; border: 1.4px solid currentColor; border-radius: 2px; }
#livepage .tally-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: calc(22px / var(--zoom, 1)) 0 calc(18px / var(--zoom, 1)); }
#livepage .tally { margin: 0; font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-body); } #livepage .tally > b { color: var(--t-ink); font-weight: 650; }
#livepage .tally-row .track { display: none; } #livepage .tally-auto { font-size: calc(13px / var(--zoom, 1)); color: var(--t-body); white-space: nowrap; }
#livepage #testers, #livepage #ticker { display: none !important; }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) .toprow { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 412fr); gap: calc(25px / var(--zoom, 1)); align-items: start; }
#livepage .big { padding: 0; border: 1px solid #dfe7ef; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: none; }
#livepage .bsel { display: flex; align-items: center; gap: 18px; padding: calc(16px / var(--zoom, 1)) calc(20px / var(--zoom, 1)); border-bottom: 1px solid #e0e7ee; }
#livepage .bsel label { font-size: calc(13px / var(--zoom, 1)); font-weight: 600; color: var(--t-ink); white-space: nowrap; }
#livepage .bsel select { flex: 1; min-height: calc(44px / var(--zoom, 1)); margin: 0; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 6px; font-size: calc(15px / var(--zoom, 1)); color: var(--t-ink); }
#livepage .big .bwords { padding: calc(22px / var(--zoom, 1)) calc(22px / var(--zoom, 1)) 0; }
#livepage .bnow-l { margin: 0 0 calc(10px / var(--zoom, 1)); font-size: calc(11px / var(--zoom, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--t-body); }
#livepage .big .bname { margin: 0; font-size: calc(22px / var(--zoom, 1)); font-weight: 700; color: var(--t-ink); }
#livepage .big .bname .dv { display: none; }
#livepage .big .bdet { margin: calc(12px / var(--zoom, 1)) 0 0; font-size: calc(15.5px / var(--zoom, 1)); color: var(--t-body); }
#livepage .bacts { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(20px / var(--zoom, 1)) calc(22px / var(--zoom, 1)) 0; }
#livepage .bacts .pics-hold { margin: 0; } #livepage .bacts .button { min-height: calc(44px / var(--zoom, 1)); padding: 0 calc(16px / var(--zoom, 1)); border: 1px solid var(--line-3); border-radius: 6px; background: #fff; color: var(--t-ink); font-size: var(--fs-button); font-weight: 600; }
#livepage .bcalm { margin: 0; padding: calc(16px / var(--zoom, 1)) calc(22px / var(--zoom, 1)) calc(22px / var(--zoom, 1)); max-width: none; font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-body); }
#livepage .bcalm::before { content: "i"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 10px; border: 1.3px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; vertical-align: 1px; }
#livepage .just-col { display: grid; gap: calc(18px / var(--zoom, 1)); }
#livepage .just { margin: 0; padding: calc(28px / var(--zoom, 1)) calc(26px / var(--zoom, 1)) calc(22px / var(--zoom, 1)); border: 1px solid #dfe7ef; border-radius: 14px; background: #fff; }
#livepage .just h2 { margin: 0 0 calc(18px / var(--zoom, 1)); font-size: calc(21px / var(--zoom, 1)); font-weight: 700; color: var(--t-ink); }
#livepage #just { margin: 0; padding: 0; list-style: none; }
#livepage #just li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(80px / var(--zoom, 1)); padding: 0; border-bottom: 1px solid #e0e7ee; }
#livepage #just li .jn b { display: block; font-size: calc(15px / var(--zoom, 1)); font-weight: 650; color: var(--t-ink); } #livepage #just li .jd { display: block; margin-top: 6px; font-size: calc(13px / var(--zoom, 1)); color: var(--t-body); }
#livepage #just li .v { flex: none; padding: 3px 7px; border-radius: 4px; font-size: calc(11.5px / var(--zoom, 1)); font-weight: 600; }
#livepage #just li .v.pass { background: #e8f5ef; color: var(--st-green); } #livepage #just li .v.fail { background: #fdecea; color: var(--st-red); } #livepage #just li .v.nc { background: var(--st-grey-bg); color: var(--st-grey); }
#livepage #just li.more { min-height: 0; padding-top: calc(18px / var(--zoom, 1)); border-bottom: 0; font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-body); }
#livepage .just-note { margin: 0; max-width: none; font-size: calc(13.5px / var(--zoom, 1)); line-height: 1.6; color: var(--t-body); }
#livepage .pair-h { display: flex; align-items: baseline; justify-content: space-between; margin: calc(32px / var(--zoom, 1)) 0 calc(16px / var(--zoom, 1)); }
#livepage .pair-h h2 { margin: 0; font-size: calc(21px / var(--zoom, 1)); font-weight: 700; color: var(--t-ink); } #livepage .pair-h span { font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-body); }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) #pair { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(12px / var(--zoom, 1)); height: auto !important; }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) #pair > .win { display: block !important; width: auto !important; height: auto !important; margin: 0; padding: calc(14px / var(--zoom, 1)) calc(14px / var(--zoom, 1)); border: 1px solid #dfe7ef; border-radius: 8px; background: #fff; box-shadow: none; aspect-ratio: auto !important; }
#livepage #pair > .win .wl-frame { display: none !important; }
#livepage #pair > .win .wl-dev { display: flex; justify-content: space-between; align-items: center; position: static; margin: 0; padding: 0; background: none; font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-ink); }
#livepage #pair > .win .wl-dev b { font-weight: 700; } #livepage #pair > .win .wl-st { display: none; }
#livepage #pair > .win .wl-dev::after { content: ""; width: 13px; height: 11px; border: 1.4px solid var(--t-nav); border-radius: 2px; }
#livepage #pair > .win.phone .wl-dev::after { width: 8px; height: 13px; }
#livepage #pair > .win .wl-cap { margin: calc(8px / var(--zoom, 1)) 0 0; padding: 0; font-size: calc(12.5px / var(--zoom, 1)); color: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livepage #pair > .win .wl-steps { display: none; }
#livepage #pair > .win.follow, #livepage #pair > .win:first-child:not(:has(~ .follow)) { border-color: #8db7d3; background: #eef5fa; }
#livepage .lp-fold { margin: calc(24px / var(--zoom, 1)) 0 0; padding: 0; border: 1px solid #dfe7ef; border-radius: 14px; background: #fff; box-shadow: none; }
#livepage .lp-fold + .lp-fold { margin-top: calc(18px / var(--zoom, 1)); }
#livepage .lp-fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: calc(62px / var(--zoom, 1)); padding: 0 calc(24px / var(--zoom, 1)) 0 calc(20px / var(--zoom, 1)); cursor: pointer; list-style: none; font-size: calc(15px / var(--zoom, 1)); font-weight: 650; color: var(--t-ink); }
#livepage .lp-fold > summary::-webkit-details-marker { display: none; } #livepage .lp-fold > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--t-body); } #livepage .lp-fold[open] > summary::after { content: "−"; }
#livepage .lp-fold > .below, #livepage .lp-fold > .logbox { padding: 0 calc(20px / var(--zoom, 1)) calc(20px / var(--zoom, 1)); }
#livepage .lp-foot { margin: calc(24px / var(--zoom, 1)) 0 0; max-width: none; font-size: calc(13.5px / var(--zoom, 1)); color: var(--t-body); }
@media (max-width: 1023px) { #livepage:not([data-phase="done"]):not([data-phase="failed"]) .toprow { grid-template-columns: minmax(0, 1fr); } #livepage:not([data-phase="done"]):not([data-phase="failed"]) #pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #livepage .tally-row { display: block; } #livepage .tally-auto { display: block; margin-top: 6px; } #livepage .bsel { display: grid; gap: 8px; } }
/* the live page's old frame (ee.live.css / ee.css) under the mock's dress: one 1136 column, the steps shown, the card's areas, the button in the card */
#livepage.lp { max-width: calc(1136px / var(--zoom, 1)); }
#livepage.lp.many:not([data-phase="done"]):not([data-phase="failed"]) #steps-wrap { display: block; }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) .toprow { grid-template-areas: "big just" "big keep"; }
#livepage .just-col { grid-area: just; min-width: 0; }
#livepage.lp.many .bacts #pics-hold-row { position: static; line-height: normal; }
#livepage .big .bbar { display: none; }
#livepage .bchrome { display: flex; align-items: center; gap: 12px; padding: calc(14px / var(--zoom, 1)) calc(20px / var(--zoom, 1)); border-bottom: 1px solid #e0e7ee; background: #f7f9fb; }
#livepage .bc-dots { display: inline-flex; gap: 5px; } #livepage .bc-dots i { width: 6px; height: 6px; border-radius: 50%; background: #b6c2ce; }
#livepage .bc-host { flex: 1; text-align: center; font-size: calc(13px / var(--zoom, 1)); color: var(--t-body); }
#livepage .bc-chip { padding: 3px 8px; border-radius: 4px; background: #eaf3fa; color: #075b91; font-size: calc(11.5px / var(--zoom, 1)); font-weight: 600; }
#livepage #pair > .win .wl-dev { width: 100%; }
#livepage .steps-wrap ol.steps li .stp > :not(.nm) { display: none; } #livepage .steps-wrap ol.steps li .stp { display: inline; }
#livepage .just-col > .just { grid-area: auto; }
#livepage:not([data-phase="done"]):not([data-phase="failed"]) #pair > .win { grid-column: auto !important; min-width: 0; max-width: none !important; flex: none !important; }
#livepage #pair > .win .wl-dev b { color: var(--t-ink); } #livepage #pair > .win .wl-cap .wl-chk { color: var(--t-ink); font-weight: 500; }
@media (max-width: 1023px) { #livepage:not([data-phase="done"]):not([data-phase="failed"]) .toprow { grid-template-areas: "big" "just" "keep"; } }
#livepage.lp.many .lp-stage > .steps-wrap, #livepage.lp.many .lp-stage > .tally-row { order: -1; } #livepage.lp.many .lp-stage > .pair-h { order: 2; }
@media (max-width: 720px) {
  #livepage:not([data-phase="done"]):not([data-phase="failed"]) .just-col .just { display: block !important; }
  #livepage:not([data-phase="done"]):not([data-phase="failed"]) .pair-h, #livepage:not([data-phase="done"]):not([data-phase="failed"]) #pair { display: none !important; }   /* the phone mock: no configurations grid, the select is the choice */
  #livepage .bacts > * { flex: 1 1 0; } #livepage .bacts .pics-hold .button { width: 100%; }
}
#livepage .bc-dots i { background: #7b8a9a; }   /* the bar's three marks 3 to 1 on its ground */
#livepage #just li.more { display: block; height: auto; white-space: normal; overflow: visible; text-overflow: clip; }
/* 41 TALL PAIR (design-critic 06:32 UTC 15 Oct): the live view's frame is drawn from the first second — grey inside with one quiet line until a
   picture exists; the picture stands over it once it has loaded, never its alt text bare */
.nr-pic { position: relative; min-height: calc(260px / var(--f2-z)); background: #e9eef3; }
.nr-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; max-width: none; font-size: calc(13px / var(--f2-z)); color: var(--t-body); }
.nr-pic img { position: relative; z-index: 1; } .nr-pic img[hidden] { display: none; }
@media (max-width: 860px) { .nr-pic { min-height: 180px; } }

/* ===== MOCK 13 USAGE, the critic's 06:35 UTC 15 Oct 2026 lines: the gaps as the mock draws them; "Edit setup →" at the title's right at every width ===== */
.us-v2 .us-tiles { margin-bottom: calc(28px / var(--f2-z)); }   /* 13: the tiles 28 over the coverage card, the mock's by its border rows (530 → 558) */
.us-v2 .usage .us-go { margin-top: calc(24px / var(--f2-z)); }
main .settings-shell.us-v2 > .settings-col { margin-bottom: -2px; }   /* the link to the footer's rule 74 · 54, as the mock: the page tail's own, never 20 less */
@media (min-width: 860px) { .us-v2 .settings-col .us-head { margin-bottom: calc(22px / var(--f2-z)); } }
@media (max-width: 600px) { .us-v2 .set-pick { margin-bottom: 18px; } .us-v2 .us-card { margin-bottom: 22px; } .us-v2 .us-tiles { margin-bottom: 22px; } .us-v2 .us-fold { margin-top: -6px; } main .settings-shell.us-v2 > .settings-col { margin-bottom: -2px; }
  .us-v2 .us-top:has(.us-edit) { display: flex; align-items: baseline; } .us-v2 .us-top:has(.us-edit) .us-edit { margin-top: 0; white-space: nowrap; } }

/* ===== MOCK 32 CHANGELOG, the critic's 06:35 UTC 15 Oct 2026 lines: the header to the eyebrow 76 · 40, the line to the first entry 92; on a phone the entries 57 apart and "Older updates" 41 over the footer ===== */
.cl-head { padding-top: calc(44px / var(--zoom, 1)); padding-bottom: calc(22px / var(--zoom, 1)); }
@media (max-width: 720px) { .cl-head { padding-top: 19px; } .cl-row { padding-top: 54px; } main:has(> .cl-list) { padding-bottom: 42px; } }

/* ===== MOCKS 37 + 38, the critic's 06:43 UTC 15 Oct 2026 TALL PAIRS on senior2's showcase look: 37 — one "Open large" (the button under
   the picture; the pill over the picture's corner goes while that button shows), the gaps at 1440 (the note to the steps +6, the counts to
   the card −7, the card to "Browser configurations" −6, the fold to the foot line −5) and the page's tail 75 · 54 to the footer's rule;
   38 — the tail 43 · 42 shorter, the kicker 28 under the header on a phone ===== */
#livepage:has(.bacts:not([hidden]) #big-open) .big .win-screen.zoomable::after { content: none; display: none; }
body:has(#livepage) main { padding-bottom: 0; }
body:has(#livepage) footer .foot-app { margin-top: calc(72px / var(--zoom, 1)); }
@media (min-width: 1024px) {
  #livepage.lp.many .lp-stage > .steps-wrap { margin-top: calc(32px / var(--zoom, 1)); }
  #livepage.lp.many .lp-stage > .tally-row { margin-bottom: calc(12px / var(--zoom, 1)); } #livepage.lp.many .lp-stage > .toprow { margin-top: 0; }
  #livepage.lp.many .lp-stage > .pair-h { margin-top: calc(26px / var(--zoom, 1)); }
  #livepage > .lp-foot { margin-top: calc(19px / var(--zoom, 1)); }
}
@media (max-width: 720px) { body:has(#livepage) footer .foot-app { margin-top: 50px; } }
body:has(#first-report) main { padding-bottom: 0; } body:has(#first-report) footer .foot-app { margin-top: calc(73px / var(--zoom, 1)); }
@media (max-width: 720px) { body:has(#first-report) footer .foot-app { margin-top: 54px; } #first-report.fr { padding-top: 7px; } }
/* ===== THE SIGNED-IN HEADER under the owner's SEVEN (design-critic 07:07 UTC 15 Oct 2026, measured on the v2 files 03 at 1440 · 768 · 430 · 344):
   the nav words 13 px semibold, 28 apart, the first 42 after the lockup; on a phone the lockup 88 wide (106 at 768), the gutters 25 · 21 · 30,
   a plain 16-px burger in a 36 box (its hit area 44), the bell and the initials circle 46 apart (52 at 768) ===== */
@media (min-width: 860px) {
  header.top:not(:has(nav.anon)) > nav#main-nav { margin-left: calc(30px / var(--zoom, 1)); }
  header.top > nav#main-nav a { font-size: calc(12.7px / var(--zoom, 1)); font-weight: 600; }
  header.top > details.orgpick { margin-left: -5px; } header.top > details.orgpick > summary .acct { padding-right: 0; gap: 12px; }
}
@media (max-width: 859px) {
  header.top:has(> .nav-burger) { padding-left: 30px; padding-right: 28px; }
  header.top:has(> .nav-burger) .brand .mark { font-size: 37px; }
  header.top > .nav-burger { position: relative; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--t-nav, #475467); }
  header.top > .nav-burger::after { content: ""; position: absolute; inset: -4px; }   /* the 44-px target around the mock's 36 box */
  header.top > .nav-burger svg { width: 24px; height: 24px; }
  header.top:has(> .nav-burger) > details.orgpick { margin-left: 0; margin-right: -9px; } header.top:has(> .nav-burger) > details.orgpick > summary .acct { padding-right: 0; }
  header.top > .nav-burger { margin-left: 8px; }
}
@media (max-width: 600px) {
  header.top:has(> .nav-burger) { padding-left: 25px; padding-right: 24px; }
  header.top:has(> .nav-burger) .brand .mark { font-size: 31px; }
  header.top > .nav-burger { margin-left: -2px; } header.top:has(> .nav-burger) > details.orgpick { margin: 0; } header.top:has(> .nav-burger) > details.bell { margin-right: -6px; }
}
@media (max-width: 380px) { header.top:has(> .nav-burger) { padding-left: 21px; padding-right: 20px; } header.top > .nav-burger { margin-left: -4px; } header.top:has(> .nav-burger) > details.bell { margin-right: -12px; } }
@media (min-width: 601px) and (max-width: 859px) { header.top:has(> .nav-burger) > details.bell { margin-right: 2px; } }
header.top nav.anon .anon-links a:not(.nav-login) { color: var(--t-nav, #475467); } header.top nav.anon a.nav-login { color: #21304d; }   /* the public header's links take the mock's nav ink too (01, TYPE) */

/* ===== THE SHARED FIELD AND BUTTON under the owner's SEVEN (design-critic 07:24 UTC 15 Oct 2026, the first full pass: 08 · 09 · 10 · 12 · 16 · 34):
   the mocks' fields are 46 tall (ee.css's 50s moved to 46), their primary buttons 42 from a tablet up; a phone keeps 44 for the thumb ===== */
@media (min-width: 721px) and (pointer: fine) { main button.primary:not(.small), main .button.primary:not(.small), body:has(nav#main-nav) main#main button:not(.small):not(.ghost):not(.linkish), body:has(nav#main-nav) main#main .button:not(.small) { min-height: calc(42px / var(--zoom, 1)); } }   /* a touch screen keeps 44 */

/* ===== 01 HOMEPAGE under the owner's SEVEN at 1440 (design-critic 07:04 UTC 15 Oct 2026; measured ink to ink against the v2 file):
   the hero's stack 3 higher and each of its rows the mock's; the card 551 (its foot 40 over its edge, the note row 4 higher); the card
   to "From browser to evidence" 97; §2's rows 30 · 50 · 80 · 29 · 34; §3's head to its words 35; the free band 207 with its price
   column 31 further right and its rows the mock's; the close's button 18 under its line ===== */
@media (min-width: 1024px) {
  main #s-door.f1-hero { padding-bottom: calc(56px / var(--f1-z)); }
  main #s-door .f1-lead { margin-top: calc(24px / var(--f1-z)); }
  main #s-door .f1-say { align-self: start; margin-top: calc(51px / var(--f1-z)); }
  main #s-door form.launch.big { margin-top: calc(29px / var(--f1-z)); }
  main #s-door form.launch.big .launch-label { margin-bottom: calc(9px / var(--f1-z)); }
  main #s-door form.launch.big .launch-hint { margin-top: calc(13px / var(--f1-z)); }
  main #s-door .f1-how { margin-top: calc(28px / var(--f1-z)); }
  main #s-door .f1c-none { padding-bottom: calc(22px / var(--f1-z)); }
  main #s-door .f1c-foot { padding-bottom: calc(35px / var(--f1-z)); }
  main #s-how.f1-sec { padding-top: calc(39px / var(--f1-z)); }
  main #s-how.f1-sec h2 { margin-top: calc(11px / var(--f1-z)); }
  main #s-how .f1-sub { margin-top: calc(11px / var(--f1-z)); }
  main #s-how .f1-three { margin-top: calc(29px / var(--f1-z)); }
  main #s-how .f1-three h3 { margin-top: calc(11px / var(--f1-z)); }
  main #s-how .f1-three p { margin-top: calc(8px / var(--f1-z)); }
  main > section.f1-sec.f1-who h2 { margin-top: calc(10px / var(--f1-z)); }
  main > section.f1-sec.f1-who .f1-two p { margin-top: calc(11px / var(--f1-z)); }
  main #s-free.f1-free { padding-top: calc(37px / var(--f1-z)); padding-bottom: calc(34px / var(--f1-z)); padding-right: calc(79px / var(--f1-z)); }
  main #s-free.f1-free h2 { margin-top: calc(12px / var(--f1-z)); }
  main #s-free .f1-go .button.primary { margin-top: calc(2px / var(--f1-z)); }
  main #s-free .f1-go .f1-more { margin-top: calc(12px / var(--f1-z)); }
  main #s-free .f1-facts { margin-top: calc(12px / var(--f1-z)); }
  main > section.f1-close a.button.f1-enter { margin-top: calc(17px / var(--f1-z)); }
  header.top nav.anon .anon-links { gap: calc(26px / var(--f1-z)); } header.top:has(nav.anon) .brand { margin-left: calc(6px / var(--f1-z)); } header.top:has(nav.anon) .brand { margin-top: calc(2px / var(--f1-z)); } header.top nav.anon .anon-links a:not(.nav-login) { padding-left: 0; padding-right: 0; font-size: calc(13px / var(--f1-z)); font-weight: 600; }
  header.top nav.anon a.nav-login { margin-left: calc(10px / var(--f1-z)); padding: calc(11px / var(--f1-z)) calc(18px / var(--f1-z)); font-size: calc(13px / var(--f1-z)); }
  main > section.f1-close h2 { font-size: calc(27.5px / var(--f1-z)); } main > section.f1-close p { margin-top: calc(10px / var(--f1-z)); font-size: calc(14px / var(--f1-z)); }
  footer:has(.foot-pub) { padding-top: calc(37px / var(--f1-z)); }
  footer .foot-pub nav.foot-cols { margin-left: calc(-4px / var(--f1-z)); }
  main #s-free.f1-free { padding-top: calc(35px / var(--f1-z)); } main #s-free.f1-free h2 { line-height: 1.12; } main #s-free .f1-go { margin-top: calc(-16px / var(--f1-z)); }
}
main #s-door .f1-card { box-shadow: 0 6px 12px -8px rgba(16,40,70,.16), 0 1px 3px rgba(16,40,70,.05); }   /* 01 DETAIL: the card's shadow ends within 10 px under its edge, as the mock's */
/* 01 at 768 (samsung-fold-open): the hero's words 27 lower beside the card, the card's meta under its pill, its headline the mock's
   22.5 px, its window 6 wider each side */
@media (min-width: 721px) and (max-width: 1023px) {
  main #s-door .f1-say { margin-top: 27px; }
  main #s-door .f1-lead { margin-top: 24px; }
  main #s-door form.launch.big .launch-hint { margin-top: 12px; }
  main #s-door .f1-how { margin-top: 27px; }
  main #s-door .f1c-body { padding: 23px 20px 0; }
  main #s-door .f1c-meta { flex-direction: column; align-items: flex-start; row-gap: 7px; }
  main #s-door .f1c-h { margin-top: 13px; font-size: 22.5px; line-height: 26px; }
  main #s-door .f1c-win { margin-left: -6px; margin-right: -6px; }
  main #s-door.f1-hero { padding-bottom: 53px; }
  main #s-how.f1-sec h2, main > section.f1-sec.f1-who h2 { margin-top: 11px; font-size: 30px; line-height: 34.5px; }
  main #s-how .f1-sub { margin-top: 13px; }
  main #s-how .f1-three { margin-top: 29px; }
  main #s-how .f1-three h3 { margin-top: 12px; }
  main #s-how .f1-three p { margin-top: 8px; }
  main > section.f1-sec.f1-who .f1-two p { margin-top: 11px; }
  main #s-how .f1-three h3 { margin-top: 11px; }
  main > section.f1-sec.f1-who { padding-top: 40px; padding-bottom: 36px; } main > section.f1-sec.f1-who .f1-two { margin-top: -3px; }
  main #s-free.f1-free { padding: 28px 37px 24px 26px; }
  main #s-free.f1-free h2 { margin-top: 13px; font-size: 27.5px; line-height: 33px; }
  main #s-free .f1-go .button.primary { margin-top: 2px; } main #s-free .f1-go .f1-more { margin-top: 13px; }
  main > section.f1-close { padding-top: 46px; }
  main #s-free .f1-facts { margin-top: 11px; }
  main > section.f1-close h2 { font-size: 28.5px; }
  main > section.f1-close { padding-bottom: 52px; }
}
/* 01's public footer from a tablet up (the v2 file at 1440 and 768): the lockup 6 in, its line 5 under it, the column heads 41 under the
   footer's edge with their links 35 under them; at 768 the brand column 232 wide, its words 16.5 on 24 */
@media (min-width: 721px) {
  footer .foot-pub .foot-lock { margin-left: calc(6px / var(--f1-z)); } footer .foot-pub .fb-sub { margin-top: calc(5px / var(--f1-z)); }
  footer .foot-pub .fg summary { margin-bottom: 0; min-height: 0; }
  footer .foot-pub .fg div { margin-top: calc(15px / var(--f1-z)); gap: calc(11px / var(--f1-z)); }
}
@media (min-width: 721px) and (max-width: 1023px) {
  footer:has(.foot-pub) { padding-left: 32px; padding-right: 32px; }
  footer .foot-pub { grid-template-columns: 232px minmax(0, 1fr); }
  footer .foot-pub .fb-sub { margin-top: 2px; font-size: 16.5px; line-height: 24px; } footer .foot-pub .fb-mail { font-size: 15.5px; } footer:has(.foot-pub) .foot-row { margin-top: 53px; }
}
/* 01 at the phones (iphone-pro-max 430, galaxy-fold-closed 344): the card's headline the mock's 25 on 30, its pill row, window and note row
   the mock's, its foot with the mock's air */
@media (max-width: 720px) {
  main #s-door .f1c-body { padding-top: 18px; }
  main #s-door .f1c-h { margin: 14px 0 18px; font-size: 25px; line-height: 30px; }
  main #s-door .f1c-none { padding-top: 26px; padding-bottom: 18px; }
  main #s-door .f1c-foot { padding-top: 27px; padding-bottom: 27px; }
  main #s-how.f1-sec h2, main > section.f1-sec.f1-who h2 { margin-top: 10px; font-size: 28.5px; line-height: 32px; }
  main #s-how .f1-sub { margin-top: 11px; }
  main #s-how .f1-three h3 { margin-top: 8px; } main #s-how .f1-three p { margin-top: 5px; }
  main #s-free.f1-free { padding-left: 27px; }
  main #s-free.f1-free h2 { margin-top: 15px; font-size: 28.5px; line-height: 34px; }
  main #s-free .f1-facts { margin-top: 12px; } main #s-free .f1-go .f1-more { margin-top: 12px; }
  main > section.f1-close h2 { font-size: 25.5px; } main > section.f1-close p { margin-top: 10px; font-size: 13px; }
  main > section.f1-sec.f1-who { padding-top: 25px; }
  main #s-free.f1-free h2 { margin-top: 12px; } main #s-free .f1-go .f1-more { margin-top: 9px; }
  footer .foot-pub .foot-lock { margin-left: 4px; } footer .foot-pub .foot-lock .mark { font-size: 31px; }
  footer .foot-pub .fb-sub { margin-top: 2px; font-size: 16.5px; line-height: 24px; }
  main > section.f1-close { padding-top: 29px; } footer:has(.foot-pub) { padding-top: 24px; } footer .foot-pub .fg div { row-gap: 27px; }
  footer .foot-pub { gap: 29px; } footer .foot-pub nav.foot.foot-cols { row-gap: 36px; } footer:has(.foot-pub) .foot-row { margin-top: 58px; }
}
/* 01 at 344 (galaxy-fold-closed): the page's gutter 16; the heads break where the mock's do (greedy, not balanced); the card's note on
   two lines and "Explore a sample report" on its own row under the counts */
@media (max-width: 400px) {
  main:has(> .f1-hero) { padding-left: 16px; padding-right: 16px; }
  main .f1-sec h2, main .f1-free h2 { text-wrap: wrap; }
  main #s-door.f1-hero { row-gap: 30px; } main #s-door .f1c-top { min-height: 0; height: 44px; } main #s-how.f1-sec { padding-top: 26px; }
  main #s-how.f1-sec h2, main > section.f1-sec.f1-who h2 { font-size: 27.4px; }
  main > section.f1-sec.f1-who .f1-two p { margin-top: 7px; } main #s-free.f1-free { padding-top: 23px; padding-left: 22px; } main > section.f1-close { padding-top: 26px; }
  footer:has(.foot-pub) { padding-top: 20px; } footer .foot-pub nav.foot.foot-cols { row-gap: 32px; } footer:has(.foot-pub) .foot-row { margin-top: 46px; }
  main #s-door .f1c-why { font-size: 11.5px; }
  main #s-door .f1c-foot { flex-wrap: wrap; row-gap: 17px; } main #s-door .f1c-foot > a { flex-basis: 100%; margin-left: 0; }
}

/* ===== THE SHARED TOKENS, part two (design-critic 07:46 + 07:48 UTC 15 Oct 2026). THE PUBLIC HEADER on a tablet and a phone, as the
   signed-in one: the lockup 106 at 30 (768), 88 at 25 · 21; "Log in" a 73 × 44 box; a plain 16-px burger in a 36 box (its 44 target
   kept); the gutters 30 / 28 · 25 / 24 · 21 / 20 ===== */
@media (max-width: 1023px) {
  header.top:has(nav.anon) { padding-left: 30px; padding-right: 28px; }
  header.top:has(nav.anon) .brand .mark { font-size: 37px; }
  header.top nav.anon a.nav-login { min-height: 44px; padding: 0 18px; font-size: 13px; }
  header.top nav.anon .anon-burger { position: relative; width: 36px; height: 36px; margin-left: 6px; border: 0; border-radius: 8px; background: none; color: var(--t-nav, #475467); }
  header.top nav.anon .anon-burger::after { content: ""; position: absolute; inset: -4px; }
  header.top nav.anon .anon-burger svg { width: 24px; height: 24px; }
}
@media (max-width: 600px) {
  header.top:has(nav.anon) { padding-left: 25px; padding-right: 24px; }
  header.top:has(nav.anon) .brand .mark { font-size: 31px; }
  header.top nav.anon .anon-burger { margin-left: 0; }
}
@media (max-width: 380px) { header.top:has(nav.anon) { padding-left: 21px; padding-right: 20px; } header.top nav.anon .anon-burger { margin-left: -4px; } }
/* THE PHONE GUTTER on every signed-in page (design-critic 07:48): the mocks' content runs 20 from the edges at 430 and 16 at 344 (ours 14) */
@media (max-width: 600px) { body:has(nav#main-nav) main { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 380px) and (min-width: 341px) { body:has(nav#main-nav) main { padding-left: 16px; padding-right: 16px; } }   /* 320 keeps 14: the narrowest mock is 344 */
@media (max-width: 340px) { body:has(nav#main-nav) main { padding-left: 14px; padding-right: 14px; } }
footer .foot-pub .fb-sub { color: #3d4b5e; }   /* the public footer's line in the mock's ink (design-critic 08:10, 23 and 01) */

/* ===== 38's failed card under the owner's SEVEN (design-critic 07:43 UTC 15 Oct 2026): the check's name a quiet word beside the pills when
   the head is the failure's sentence, one line of what was seen under the head, the chips 3 nearer AFFECTED CONFIGURATIONS, "Open evidence"
   with the mock's picture mark ===== */
.fr-pills .fr-check { align-self: center; font-size: calc(13px / var(--zoom, 1)); color: var(--t-body); }
.fr-card .fr-obs { margin: calc(12px / var(--zoom, 1)) 0 0; max-width: none; font-size: calc(14.5px / var(--zoom, 1)); color: var(--t-body); }
.fr-card .fr-chips { margin-top: calc(7px / var(--zoom, 1)); }
.fr-card .fr-ev svg { flex: none; }

/* ===== 03 SITES under the owner's SEVEN at 1440 (design-critic 07:07 UTC 15 Oct 2026, measured against the v2 file): the row's tick 20 in
   from the table's edge, the initials 28 after it, the name 13 after them; "Latest result" at 700 and "Report" at 1016 ===== */
@media (min-width: 1024px) {
  main:has(> .site-stats) table.sitelist { table-layout: fixed; width: 100%; min-width: 0; }
  main:has(> .site-stats) table.sitelist thead th:first-child { width: calc(487px / var(--f2-z)); }
  main:has(> .site-stats) table.sitelist thead th:nth-child(2) { width: calc(316px / var(--f2-z)); }
  main:has(> .site-stats) table.sitelist thead th:last-child { width: calc(62px / var(--f2-z)); } main:has(> .site-stats) table.sitelist thead th.srep-h { width: auto; }
  main:has(> .site-stats) table.sitelist .pb-tick { justify-content: flex-start; width: calc(32px / var(--f2-z)); min-width: 0; }
  main:has(> .site-stats) table.sitelist .siteflex { column-gap: calc(12px / var(--f2-z)); }
  main:has(> .site-stats) nav.sitepills { margin-top: calc(34px / var(--f2-z)); }
  main:has(> .site-stats) .sitetop { margin-top: calc(11px / var(--f2-z)); }
}
/* 03 at the phones: the counts' digits the mock's 29; the head's rows the mock's gaps; the tab's words 17 over its line in a 44 box */
@media (max-width: 720px) {
  main:has(> .site-stats) .pg-head .button, main:has(> .site-stats) .pg-head button { margin-top: 14px; }
  main:has(> .site-stats) > .pg-head { margin-bottom: 20px; }
  main:has(> .site-stats) .site-stats b { font-size: 29px; line-height: 30px; }
  main:has(> .site-stats) nav.sitepills { margin-top: 16px; } main:has(> .site-stats) nav.sitepills a.sp { align-items: flex-end; padding-bottom: 14px; }
  main:has(> .site-stats) .sitetop { margin-top: 20px; row-gap: 5px; }
  main:has(> .site-stats) details.addfold { margin-top: 1px; }
}
/* 03 at 768: "Check all sites" at the title's right, as the mock (and 1440) draw it; the digits the mock's 32 */
@media (min-width: 721px) and (max-width: 1023px) {
  main:has(> .site-stats) > .pg-head { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }
  main:has(> .site-stats) .site-stats b { font-size: 32px; line-height: 34px; }
  main:has(> .site-stats) nav.sitepills { margin-top: 38px; }
  main:has(> .site-stats) .sitetop { margin-top: 20px; }
}
@media (min-width: 721px) and (pointer: fine) { main:has(> .site-stats) nav.sitepills a.sp { min-height: calc(35px / var(--f2-z)); padding-bottom: calc(10px / var(--f2-z)); } }   /* the tab's words 17 over its line, as the mock's */
@media (min-width: 721px) and (pointer: coarse) { main:has(> .site-stats) nav.sitepills a.sp { align-items: flex-end; padding-bottom: 14px; } }   /* a touch screen keeps the 44 box, the words low in it */

/* ===== 05 REPORTS under the owner's SEVEN at 1440 (design-critic 07:07 UTC 15 Oct 2026; measured against the v2 file): the columns at
   the mock's x — Report 213 · Started 323 · Trigger 582 · Sites 702 · Run state 872 · Results 1010 ===== */
@media (min-width: 1024px) {
  main table.runlist { table-layout: fixed; width: 100%; }
  main table.runlist thead th:nth-child(1) { width: calc(110px / var(--f2-z)); }
  main table.runlist thead th:nth-child(2) { width: calc(259px / var(--f2-z)); }
  main table.runlist thead th:nth-child(3) { width: calc(120px / var(--f2-z)); }
  main table.runlist thead th:nth-child(4) { width: calc(170px / var(--f2-z)); }
  main table.runlist thead th:nth-child(5) { width: calc(138px / var(--f2-z)); }
  main table.runlist thead th:nth-child(6) { width: auto; }
  main table.runlist td.rres .rl { font-size: inherit; }
  #reports .runs-find .rf-search { max-width: none; }
  #reports table.runlist thead th { height: calc(45px / var(--f2-z)); padding-top: calc(11px / var(--f2-z)); padding-bottom: 0; vertical-align: top; }   /* the heads 20 under the card's edge, as the mock's */   /* the search runs to the zone's words, as the mock's runs to its zone select */   /* the results at the row's size, as the mock's (they read 18 % larger) */
}
/* 05 on a phone, the mock's card: the number with the state's pill at its right (two pills wrap at the right); the date and the trigger on
   one line; the sites at the left and the results at the right; "View report →" at the left under them */
@media (max-width: 720px) {
  #reports table.runlist tbody tr td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
  #reports table.runlist tbody tr td.rstate { grid-area: 1 / 3 / 2 / 5; justify-self: end; text-align: right; }
  #reports table.runlist tbody tr td.rstate .rpills, #reports table.runlist tbody tr td.rstate > span { justify-content: flex-end; }
  #reports table.runlist tbody tr td:nth-child(2) { grid-area: 2 / 1; } #reports table.runlist tbody tr td:nth-child(3) { grid-area: 2 / 2 / 3 / 5; }
  #reports table.runlist tbody tr td.rsite { grid-area: 3 / 1 / 4 / 3; } #reports table.runlist tbody tr td.rres { grid-area: 3 / 3 / 4 / 5; justify-self: end; text-align: right; }
  #reports table.runlist tbody tr td.rgo { grid-area: 4 / 1 / 5 / 5; justify-self: start; align-self: start; }
  #reports table.runlist tbody tr td.rstate .pill { white-space: nowrap; } #reports table.runlist td.rres .rl { font-size: inherit; }
}

/* ===== 04 SITE DETAIL under the owner's SEVEN at 1440 (design-critic 07:09 UTC 15 Oct 2026; measured ink to ink against the v2 file):
   "Ownership verified" 38 under the crumb, the host 51 under the title's top, the band 61 under the host, the latest report's head 44
   over its report's number ===== */
@media (min-width: 1024px) {
  main p.sd-own { margin-top: calc(-5px / var(--f2-z)); }
  main#main p.site-url.sd-host { margin-top: calc(15px / var(--f2-z)); margin-bottom: calc(6px / var(--f2-z)); }
  main .card h2 + .sd-lr { margin-top: calc(16px / var(--f2-z)); }
}
@media (min-width: 721px) and (max-width: 1023px) {
  main p.sd-own { margin-top: -4px; } main#main p.site-url.sd-host { margin-top: 19px; margin-bottom: 6px; }
  main#main p.sd-own + h1 { font-size: 28px; }
}
@media (max-width: 720px) {
  main p.sd-own { margin-top: -4px; margin-bottom: 8px; } main#main p.sd-own + h1 { font-size: 30px; line-height: 1.15; }
  main#main p.site-url.sd-host { margin-top: 3px; margin-bottom: 2px; } main#main form.sd-check { margin-top: 2px; margin-bottom: 4px; }
}
/* 01's illustration in the hero card: its store's inks the mock's lighter ones (design-critic 08:28, DETAIL) */
main #s-door .f1c-store b { color: #5c655c; } main #s-door .f1c-store small { color: #abb2ae; }

/* ===== 08 NEW CHECK under the owner's SEVEN (design-critic 07:09 UTC 15 Oct 2026; measured against the v2 file, border to border): the
   fields 50 tall as the mock draws them (its borders 344 → 393; THE SHARED FIELD's 46 is undone in ee.css), the selects 48, the textareas
   104; each label 15 over its field, the hint 12 under its field, the next label 22 under a field ===== */
main .nc-l { gap: calc(11px / var(--f2-z)); margin-bottom: calc(18px / var(--f2-z)); }
main .nc-l .nc-hint { margin-top: calc(2px / var(--f2-z)); }
main .nc-l select { height: calc(48px / var(--f2-z)); }
@media (max-width: 720px) { main section.card.nc-card { padding: 21px 23px 23px; } }   /* 08 on a phone: the card's words 23 in and "1. Goal" 27 under its edge, as the mock's */

/* ===== 16 YOUR ACCOUNT under the owner's SEVEN at 1440 (design-critic 07:11 UTC 15 Oct 2026; measured ink to ink against the v2 file):
   the line 44 under the title (was 47); "Account details" 135 tall, its address 92 over the next card's head (was 98) ===== */
@media (min-width: 1024px) {
  main .acct-v2 .set-head .pg-sub { margin-top: calc(7px / var(--f2-z)); }
  main .acct-v2 .ac-card.ac-who { padding-bottom: calc(21px / var(--f2-z)); }
}
/* THE SETTINGS PICKER (every settings page's "Settings section" select under the head; the v2 files 09 · 16 at 768, 16 at 430): at 768
   the label and the select on ONE row, the select from 145 to the column's edge; on a phone the select 11 under its label and the first
   card 47 under the select */
@media (min-width: 721px) and (max-width: 859px) {   /* from 860 the rail stands and the picker is hidden */
  main label.set-pick { display: flex; align-items: center; gap: 19px; }
  main label.set-pick select { flex: 1; min-width: 0; margin-top: 0; }
}
@media (min-width: 721px) and (max-width: 1023px) { main .acct-v2 .ac-card.ac-who { padding-bottom: 16px; } }
@media (max-width: 720px) {
  main .settings-col .set-head { margin-bottom: 26px; }
  main label.set-pick { gap: 3px; margin-bottom: 21px; }
}
/* THE PUBLIC FOOTER at 768 on a touch screen (design-critic 08:47): its column links ~29 apart as the mock's, not 55 — a link standing
   alone in the footer is outside the 44-px promise (the look tests' tap rule), and the phones below 721 keep their own pitch */
@media (min-width: 721px) { footer .foot-pub .fg div a { min-height: 0; } }
/* 03's phone card (design-critic 08:51 (c)): "Not verified" takes the verified line's shape — a quiet line of its own under the name, as the
   mock's "✓ Ownership verified" — never a pill beside the name; it stays the link to the proof */
@media (max-width: 859px) {
  main:has(> .site-stats) table.sitelist .sitewords .vbadge.no { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 14px; padding: 0; background: none; border: 0; font-size: 11.5px; font-weight: 400; color: var(--t-body); text-decoration: underline; text-underline-offset: 3px; }
}
/* 05 at 768 (design-critic 08:58): the search runs to the zone's words as at 1440 (it stopped at 520); the cards' rows the mock's air
   (#N → date 39, date → sites 32: the card's pitch 133, was 126) */
@media (min-width: 721px) { #reports .runs-find .rf-search { max-width: none; } }
@media (min-width: 721px) and (max-width: 859px) { #reports table.runlist tbody tr { row-gap: 12px; } }
/* 32 CHANGELOG's head at 768 and the phones (design-critic 07:19 UTC 15 Oct 2026; measured ink to ink against the v2 files): 768 — the
   eyebrow 16 higher, the headline the mock's 42 (its ink 40, ours read 46); phones — the line the mock's 17 px, 23 under the headline,
   the first entry 77 under the line; the gutter 20 (16 at 344) */
@media (min-width: 721px) and (max-width: 1023px) { .cl-head { padding-top: 28px; } .cl-head h1 { font-size: 42px; } }
@media (max-width: 720px) {
  main:has(> .cl-list) { padding-left: 20px; padding-right: 20px; }
  .cl-head .pg-sub { margin-top: 19px; font-size: 17px; } .cl-head { padding-bottom: 14px; }
}
@media (max-width: 380px) { main:has(> .cl-list) { padding-left: 16px; padding-right: 16px; } }
/* 36 NOTIFICATIONS at 1440 (design-critic 07:21): the popover's right edge on the header's content edge (the chip's right edge, 1325 / the
   mock's 1327; it stood 51 right of it) */
@media (min-width: 860px) { header.top details.bell > .panel { right: max(20px, calc((100% - 1100px) / 2)); } }
/* 36's rows the mock's (pitch 146): the empty dot holder out of the row's grid, the kind 25 under the site, the counts 22 under the kind */
header.top details.bell ol.notes > li > a > .nd:empty { position: absolute; }
header.top details.bell ol.notes > li > a { row-gap: 0; padding-top: calc(11px / var(--zoom, 1)); padding-bottom: calc(26px / var(--zoom, 1)); }   /* the rule between items 42 under the link and 18 over the next host, as the mock's */   /* three empty grid rows each took a 10-px gap */
header.top details.bell ol.notes > li > a .s > .nk { margin-top: calc(-5px / var(--zoom, 1)); }
header.top details.bell ol.notes > li > a .s > .chips { margin-top: calc(-8px / var(--zoom, 1)); }
header.top details.bell .notes-state { margin-top: calc(1px / var(--zoom, 1)); }   /* "No unread notifications" 10 under the head's rule, as the mock's */
header.top details.bell .notes-hd :is(h2, b, strong) { position: relative; top: calc(4px / var(--zoom, 1)); }   /* the title on the mock's line */
@media (max-width: 720px) { header.top details.bell ol.notes > li > a .s > .nk { margin-top: -3px; } header.top details.bell ol.notes > li > a { padding-bottom: 21px; } }   /* 36 on a phone: the mock's row (pitch 150) */

/* ===== 34 PASSWORD RECOVERY under the owner's SEVEN at 1440 (design-critic 07:19 UTC 15 Oct 2026; measured ink to ink against the v2
   file, from the card's top edge): the eyebrow 37, the head 69, the lead 117, the label 176, the field 198, the button 290 and 47 tall
   ("Send reset link"), "Back to log in" 30 under it — the card 416 tall as the mock's (it was 33 taller) ===== */
@media (min-width: 721px) {
  main:has(form[action="/forgot"]) section.card.auth-v2 { padding-top: calc(32px / var(--zoom, 1)); }
  main:has(form[action="/forgot"]) .auth-v2 h1 { margin-top: calc(14px / var(--zoom, 1)); }
  main:has(form[action="/forgot"]) section.card.auth-v2 .auth-head .auth-sub { margin-top: calc(11px / var(--zoom, 1)); }
  main:has(form[action="/forgot"]) .auth-v2 .auth-head { margin-bottom: calc(16px / var(--zoom, 1)); }
  main:has(form[action="/forgot"]) .auth-v2 form button.primary { min-height: calc(47px / var(--zoom, 1)); margin-top: calc(5px / var(--zoom, 1)); }
  main:has(form[action="/forgot"]) .auth-v2 .auth-back { margin-top: calc(26px / var(--zoom, 1)); }
}
@media (max-width: 720px) {   /* 34 on the phones: the same stack (from the card's edge: 30 · 60 · 105 · 164 · 188 · 282 at 430) */
  main:has(form[action="/forgot"]) section.card.auth-v2 { padding-top: 25px; }
  main:has(form[action="/forgot"]) section.card.auth-v2 h1 { margin-top: 12px; }
  main:has(form[action="/forgot"]) section.card.auth-v2 .auth-head .auth-sub { margin-top: 13px; }
  main:has(form[action="/forgot"]) section.card.auth-v2 .auth-head { margin-bottom: 16px; }
  main:has(form[action="/forgot"]) section.card.auth-v2 form button.primary { margin-top: 5px; }
}
/* 13 USAGE (design-critic 07:17): the month's card the mock's height (its number 5 nearer the head, its foot 4 nearer the edge); at 344
   a tile's "N of 10" stays on one line as the mock's */
@media (min-width: 1024px) { .us-v2 .usage .u-runs .us-num { margin-top: calc(9px / var(--f2-z)); } .us-v2 .us-card.u-runs { padding-bottom: calc(24px / var(--f2-z)); } }
.us-tiles b { white-space: nowrap; }

@media (max-width: 900px) {   /* 40 stacked (the frame over the check, 768 and the phones): the mock's rows under the frame */
  dialog.camdlg.cd-live .cd-bar { justify-content: space-between; } dialog.camdlg.cd-live .cd-bar .cd-state { margin-left: 0; }
  dialog.camdlg.cd-live .cd-head, dialog.camdlg.cd-live #cd-info, dialog.camdlg.cd-live .cd-foot { padding-left: 20px; padding-right: 20px; } dialog.camdlg.cd-live #cd-film { padding-left: 22px; padding-right: 22px; }
  dialog.camdlg.cd-live #cd-info { padding-top: 20px; padding-bottom: 18px; }
  dialog.camdlg.cd-live #cd-info .cd-check { margin-top: 0; }
  dialog.camdlg.cd-live #cd-info .cd-stepbox { margin-top: 1px; padding-top: 0; padding-bottom: 0; }
  dialog.camdlg.cd-live #cd-info .cd-lh { margin-top: 7px; row-gap: 0; }
  dialog.camdlg.cd-live #cd-info ol.cd-steps { margin-top: -3px; }
}
/* ===== 40 BROWSER EXPANDED under the owner's SEVEN (design-critic 06:55 + 07:24 UTC 15 Oct 2026): at 1440 the side column the mock's 331
   (the dialog 1382 × 895 at 29 · 49, the mock's 1376 × 890 at 32 · 52); on a phone the mock's FULL SHEET — edge to edge, the page gone,
   one scroll: the site's name over its line, "Open report #N →" under them, the × at the top right; the foot stacked, the sentence a
   line and "Back to all browsers" under it ===== */
@media (max-width: 720px) {
  dialog.camdlg.cd-live { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; overflow-y: auto; }
  dialog.camdlg.cd-live[open] { display: block; }   /* one scroll: the sheet grows with its parts, never a body squeezed between the head and the foot */
  dialog.camdlg.cd-live .cd-body { display: block; height: auto; max-height: none; overflow: visible; }
  dialog.camdlg.cd-live .cd-info, dialog.camdlg.cd-live ol.cd-steps { height: auto; max-height: none; overflow: visible; }
  dialog.camdlg.cd-live .cd-foot .cd-back { margin-top: -10px; }
  dialog.camdlg.cd-live .cd-head { flex-wrap: wrap; align-items: flex-start; row-gap: 12px; }
  dialog.camdlg.cd-live .cd-head .cd-who { flex: 1 1 0; min-width: 0; }
  dialog.camdlg.cd-live .cd-head .cd-site { overflow-wrap: normal; word-break: normal; }
  dialog.camdlg.cd-live .cd-head .cd-close { order: 2; }
  dialog.camdlg.cd-live .cd-head .cd-rep { order: 3; flex-basis: 100%; margin: 7px 0 0; }
  dialog.camdlg.cd-live .cd-foot { flex-direction: column; align-items: flex-start; row-gap: 6px; }
  dialog.camdlg.cd-live .cd-foot .cd-calm { max-width: none; }
  dialog.camdlg.cd-live .cd-foot .cd-back { justify-content: flex-start; padding-left: 0; padding-right: 0; border: 0; background: none; color: var(--t-blue); font-weight: 600; }
}
dialog.camdlg.cd-live #cd-age b { color: var(--t-blue); font-weight: 700; }   /* 40: "Live" in the mock's blue, its age in the body grey */
@media (max-width: 720px) {   /* 40 on a phone: the frame 12 from each edge, its bar thin as the mock's (14 tall, small marks, the address small) */
  dialog.camdlg.cd-live #cd-film { padding-left: 12px; padding-right: 12px; }
  dialog.camdlg.cd-live #cd-film .wl-chrome { height: 14px; min-height: 0; padding: 0 6px; gap: 3px; }
  dialog.camdlg.cd-live #cd-film .wl-chrome > i { width: 4px; height: 4px; }
  dialog.camdlg.cd-live #cd-film .wl-chrome .wl-addr { height: 10px; padding: 0 6px; font-size: 7px; line-height: 10px; }
}
dialog.camdlg.cd-live #cd-film .wl-exp { display: none; }   /* the expanded view is already open: no "Expand" over its own frame */
@media (max-width: 720px) { footer .foot-pub .fb-sub { max-width: 210px; } }   /* the phone footer's line breaks after "customers" as the mock's (design-critic 09:23, LINES) */
@media (max-width: 1023px) { main:has(#testform) .sd-crumb { margin-bottom: 20px; } }   /* 08 at 768 and the phones: the title 40 under the crumb as the mock's (it was 28) */
/* 41 OVERVIEW RUNNING at 1440 (design-critic 07:23): the live view 4:3 as the mock's (366 tall, ours 299), its picture from the top; the
   card's height and the name's place follow it (the name's column stands centred beside the frame) */
@media (min-width: 1024px) { main .nr-devl { margin-top: calc(13px / var(--f2-z)); } main .nr-devs { margin-top: calc(2px / var(--f2-z)); }
  main .nr-pic { aspect-ratio: 485 / 327; height: auto; } main .nr-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; } }
@media (min-width: 1024px) { main .ov-night.nr-night { margin-top: calc(-13px / var(--zoom, 1)); margin-bottom: calc(53px / var(--zoom, 1)); } }   /* 41: the night line 32 under the card, the cards 85 under the line, as the mock's (its link's 44-px row centres the words) */
@media (max-width: 600px) { main .ov-night.nr-night form { display: block; } }   /* 41 on a phone: "Resume night reports →" on its own line under the words, as the mock's */

/* ===== THE SHARED TOKENS, part three (design-critic 09:33 UTC 15 Oct 2026): (a) the signed-in pages' 768 gutter 24 (the mock's cards
   at 24, 720 wide; ours 20 / 728); (b) the public footer at 768 7 shorter at its foot; (c) the public footer on a phone — the e-mail 8
   lower under the line, the foot 14 shorter ===== */
@media (min-width: 721px) and (max-width: 1023px) { body:has(nav#main-nav) main { padding-left: 24px; padding-right: 24px; } footer:has(.foot-pub) { padding-bottom: 17px; } }
@media (max-width: 720px) { footer .foot-pub .fb-mail { margin-top: 17px; } }   /* the © stays 38 over the page's end as the mock's */   /* the © stays 38 over the page's end as the mock's */
header.top details.bell .notes-hd .mclose { position: relative; left: calc(-12px / var(--zoom, 1)); }   /* 36: the × on the mock's x (1279), the sun where it stands */
@media (min-width: 1024px) { .us-v2 #coverage { padding-top: calc(33px / var(--f2-z)); } }   /* 13: the coverage card's head 5 lower, its first row 156 under its edge as the mock's */
/* 34: the card's top edge 74 under the header at 1440, 54 at 768, 30 on a phone, as the mock's (it stood 15 · 56 · 38 lower) */
main:has(> .card.auth):has(form[action="/forgot"]) { padding-top: 0; row-gap: 0; align-content: start; }   /* the card at the mock's top, never centred on the window's height */
main:has(form[action="/forgot"]) section.card.auth-v2 { margin-top: calc(82px / var(--zoom, 1)); }
@media (max-width: 1023px) { main:has(form[action="/forgot"]) section.card.auth-v2 { margin-top: 62px; } }
@media (max-width: 720px) { main:has(form[action="/forgot"]) section.card.auth-v2 { margin-top: 38px; } }   /* the card's blue edge at the mock's 158 · 134 · 110 (its shadow starts 8 above) */

/* THE CRUMB (design-critic 09:46, 3 COLOUR): the mocks draw the breadcrumb's links in the small grey, not the link blue (08's "Checks /",
   04's "Sites /"); they underline on hover */
main .sd-crumb a { color: var(--t-body); } main .sd-crumb a:hover, main .sd-crumb a:focus-visible { color: var(--t-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 32 on a phone (design-critic 09:46, by the picture): the entry's words run to the mock's measure (≈ 340, a right inset of 45) and its
   head is the mock's 23 px */
@media (max-width: 720px) { .cl-row p { max-width: 340px; } .cl-row h2 { font-size: 23px; } }

/* ===== 02 OVERVIEW under the owner's SEVEN at 1440 (design-critic 07:13 UTC 15 Oct 2026; measured ink to ink against the v2 file, from
   the title): the two cards' heads 123 under it (the cards' top 4 nearer), "Check a site" with its label 40 under its head, the field 24
   under the label, the hint 18 under the field; the latest report's rows 169 · 200 · 238 · 276; the night line 90 under "Review
   report", the sites strip 80 under the night line ===== */
@media (min-width: 1024px) {
  main .card.ov-check, main .card.ov-latest { padding-top: calc(26px / var(--zoom, 1)); }
  main section.card.ov-check form.launch.big .launch-label { margin-top: calc(-7px / var(--zoom, 1)); margin-bottom: calc(8px / var(--zoom, 1)); }
  main section.card.ov-check form.launch.big .launch-hint { margin-top: calc(14px / var(--zoom, 1)); }
  main .ov-latest .ovl-id { margin-top: calc(20px / var(--zoom, 1)); }
  main .ov-latest .ovl-go { margin-top: calc(18px / var(--zoom, 1)); }
  main > .ov-night { margin-top: calc(31px / var(--zoom, 1)); }
  main > .ov-strip { margin-top: calc(32px / var(--zoom, 1)); grid-template-columns: calc(193px / var(--zoom, 1)) minmax(0, 1fr) auto; }   /* the strip's lines from 402 as the mock's (they stood at 459) */
}
/* 02 on a phone (design-critic 07:13; the v2 file at 430, from the title): the title's ink the mock's 23; each card's rows the mock's
   gaps (the head 26 under the card's edge, the report's rows 43 · 30 · 37 · 38; the check's label 39 under its head, the field 24 under
   it, the button 60 under the field's top, the hint 61 under the button's); the night line 56 under the hint */
@media (max-width: 720px) {
  main .ov-head h1 { font-size: 29px; } main .row.head.ov-head h1 + p { margin-top: 7px; } main .row.head.ov-head > form .button, main .row.head.ov-head > form button { margin-top: 15px; }
  main .card.ov-latest, main .card.ov-check { padding-top: 19px; }
  main .ov-latest .ovl-id { margin-top: 18px; } main .ov-latest .ovl-sub { margin-top: 6px; } main .ov-latest .ovl-go { margin-top: 18px; }
  main section.card.ov-check form.launch.big .launch-label { margin-top: -8px; margin-bottom: 8px; }
  main section.card.ov-check form.launch.big .launch-row { row-gap: 0; }
  main section.card.ov-check form.launch.big .launch-hint { margin-top: 14px; }
  main > .ov-night { margin-top: 9px; }
}
@media (min-width: 721px) and (max-width: 1023px) {   /* 02 at 768: the check card's rows as at 1440 (the label 40 under the head, the hint 18 under the field) */
  main section.card.ov-check form.launch.big .launch-label { margin-top: -7px; margin-bottom: 8px; }
  main section.card.ov-check form.launch.big .launch-hint { margin-top: 14px; }
}
header.top details.bell .notes-state + ol.notes, header.top details.bell ol.notes:first-of-type { padding-top: calc(12px / var(--zoom, 1)); }   /* 36: the first item 37 under the rule, as the mock's */
@media (pointer: coarse) { main .sd-crumb a { position: relative; min-height: 0; } main .sd-crumb a::after { content: ""; position: absolute; inset: -12px -6px; } }   /* 08 · 04 under a thumb: the crumb's links keep a 44-px target round their words, the row the mock's height (a 44-px row centred the words 12 lower) */
@media (min-width: 1024px) { main:has(figure.nr-view) .ov-cards { grid-template-columns: 469fr 563fr; } }   /* 41: under the Now card the two cards split as the mock's 469 + 563 (02's own 492 + 541 stands without a run) */
@media (min-width: 1024px) { .us-v2 .us-tiles > div { padding-top: calc(19px / var(--f2-z)); padding-bottom: calc(21px / var(--f2-z)); } }   /* 13: the tiles row 109 tall as the mock's (it was 115) */