/* Website Check by Awfully Helpful LLC — site.css
   Direction: Awfully Helpful's "Blue Ink" (awfully-helpful-site/main/DESIGN.md): ink fields, highlighter yellow,
   white paper, the pen check and the small-town skyline. Rebranded from "Lamplit Check" on 2026-11-04.
   Same type and pen as Awfully Helpful: Besley for headings and the pen, Atkinson Hyperlegible Next for text.
   No inline styles anywhere (the Content-Security-Policy forbids them). Words: front/CONTENT.md. */

/* ---------- Fonts (self-hosted, SIL Open Font License: fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Besley"; src: url("/assets/fonts/besley.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("/assets/fonts/besley-italic.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Fallbacks tuned to the web fonts' widths (measured for Awfully Helpful), so text does not jump. */
@font-face { font-family: "Besley Fallback"; src: local("Georgia Bold"), local("Georgia"); font-weight: 700 900; size-adjust: 109.6%; ascent-override: 114%; descent-override: 38.8%; line-gap-override: 0%; }
@font-face { font-family: "Besley Fallback"; src: local("Georgia Bold Italic"), local("Georgia Italic"), local("Georgia"); font-weight: 500 700; font-style: italic; size-adjust: 99.8%; ascent-override: 125.3%; descent-override: 42.6%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"); size-adjust: 99.3%; ascent-override: 99.1%; descent-override: 31.8%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* The palette. These never change between color schemes. */
  --ink: #1f3ba6;        /* the night fields */
  --lamp: #ffe14a;       /* lamplight: the main button, notes, the glow, selection */
  --lamp-deep: #ffd21f;
  --canary: #fff3b0;     /* the price slip */
  --carbon: #121a3a;     /* text on paper and on yellow */
  --white: #ffffff;
  --on-ink-soft: #dbe2fb;
  --on-foot: #e6eafb;
  --foot-soft: #bcc5e8;
  --foot-rule: #2b3564;

  /* Roles. These change in the dark scheme. */
  --bg: #ffffff;
  --bg-alt: #f1f4fc;
  --text: #121a3a;
  --text-soft: #414a6e;
  --pen: #2747d8;
  --link: #1f3ba6;
  --rule: #cfd6ee;
  --edge: #68719a;       /* lines that must be seen: 3:1 or more */
  --field: #ffffff;      /* text boxes */
  --field-edge: #121a3a;
  --bad: #a1271b;        /* error text and edges, always with the word "Error" */
  --ok: #1d6b34;         /* the full report's "Passed", always with the word */
  --warn: #7a5300;       /* the full report's "Could not check", always with the words */
  --focus: #1f3ba6;
  --foot: #121a3a;
  --shadow: 18 26 58;

  --f-display: "Besley", "Besley Fallback", Georgia, "Times New Roman", serif;
  --f-text: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1330;
    --bg-alt: #151c42;
    --text: #eef1fd;
    --text-soft: #bcc5e8;
    --pen: #a3b4ff;
    --link: #b9c6ff;
    --rule: #2b3564;
    --edge: #7f8bbd;
    --field: #151c42;
    --field-edge: #bcc5e8;
    --bad: #ffb3a7;
    --ok: #9fdcab;
    --warn: #ffe14a;
    --focus: #ffe14a;
    --foot: #080c20;
    --shadow: 0 0 0;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; overflow-wrap: break-word; background: var(--bg); color: var(--text); font-family: var(--f-text); font-size: 1.125rem; line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgb(255 225 74 / .4); }
svg { max-width: 100%; }
p, ul, ol, dl, figure, table { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--pen); font-weight: 700; }
::selection { background: var(--lamp); color: var(--carbon); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; color: inherit; margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; letter-spacing: -.014em; margin-top: var(--s6); }
h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 750; }
p { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .2em; border-radius: 3px; }
a:hover { background: var(--lamp); color: var(--carbon); text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
#main { flex: 1 0 auto; }
#main:focus { outline: 0; }
code { font-size: .95em; overflow-wrap: anywhere; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: 74rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: var(--s4); top: var(--s3); z-index: 10; background: var(--lamp); color: var(--carbon); font-weight: 700; padding: .6rem 1rem; border: 2px solid var(--carbon); border-radius: .5rem; transform: translateY(-300%); }
.skip:focus { transform: none; outline-color: var(--lamp); }

/* ---------- Ink fields (the night) ---------- */
.on-ink { background: var(--ink); color: var(--white); --focus: var(--lamp); --link: var(--white); --pen: var(--lamp); --text-soft: var(--on-ink-soft); --field: #ffffff; --field-edge: #121a3a; --bad: var(--lamp); }

/* ---------- Header ---------- */
.site-head { padding-block: .7rem; }
.site-head-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 2rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--white); text-decoration: none; padding-block: .45rem; line-height: 1.15; }
.wordmark-name { display: flex; align-items: center; gap: .45rem; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.012em; }
.wordmark-by { display: block; font-size: .9375rem; font-weight: 600; color: var(--on-ink-soft); }
.wordmark:hover .wordmark-by { color: var(--carbon); }
.wordmark svg { width: 1.35rem; height: 1.2rem; flex: none; overflow: visible; }
.wordmark path { fill: none; stroke: var(--lamp); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.wordmark:hover path { stroke: var(--carbon); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .35rem; margin-inline: -.6rem; }
.nav li { margin: 0; }
.nav a { display: block; padding: .7rem .6rem; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 3px; text-underline-offset: .38em; }

/* ---------- Buttons ---------- */
.btn, button[type="submit"] { display: inline-flex; align-items: center; gap: .65rem; min-height: 3.4rem; padding: .7rem 1.45rem; font: 700 1.175rem/1.2 var(--f-text); color: var(--carbon); background: var(--lamp); border: 2px solid var(--carbon); border-radius: .55rem; box-shadow: 0 4px 0 var(--carbon); text-decoration: none; cursor: pointer; touch-action: manipulation; }
.btn:hover, button[type="submit"]:hover { background: var(--lamp-deep); color: var(--carbon); }
.btn:active, button[type="submit"]:active { transform: translateY(4px); box-shadow: 0 0 0 var(--carbon); }
.btn-quiet { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; font: 700 1rem/1.2 var(--f-text); color: var(--text); background: transparent; border: 2px solid var(--text); border-radius: .5rem; box-shadow: none; cursor: pointer; }
.btn-quiet:hover { background: var(--lamp); color: var(--carbon); border-color: var(--carbon); }

/* ---------- The pen ---------- */
.pen-note { font-family: var(--f-display); font-style: italic; font-weight: 600; color: var(--pen); font-size: 1.25rem; line-height: 1.35; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; font-size: 1.125rem; }
.hint { margin: .15rem 0 .55rem; color: var(--text-soft); font-size: 1.0625rem; }
input[type="url"], input[type="email"], input[type="text"], select, textarea { display: block; width: 100%; max-width: 32rem; min-height: 3.2rem; font: 1.125rem/1.3 var(--f-text); padding: .65rem .8rem; color: var(--carbon); background: var(--field); border: 2px solid var(--field-edge); border-radius: .45rem; }
textarea { min-height: 9rem; resize: vertical; }
@media (prefers-color-scheme: dark) { .page input[type="url"], .page input[type="email"], .page input[type="text"], .page select, .page textarea { color: var(--text); } }
input[aria-invalid="true"] { border-color: var(--bad); border-width: 3px; }
form button[type="submit"] { margin-top: 1.1rem; }
.error { color: var(--bad); font-weight: 700; margin: .2rem 0 .45rem; }
.summary { border: 3px solid var(--bad); padding: .5rem 1.1rem .7rem; margin: 1.25rem 0 1.5rem; border-radius: .45rem; max-width: 36rem; }
.summary h2 { margin: .35rem 0 .35rem; font-size: 1.25rem; }
.summary p { margin: 0; }

/* ---------- Home: hero ---------- */
.hero { padding: clamp(1rem, 3vw, 2.2rem) 0 clamp(3rem, 6vw, 4.75rem); }
.hero h1 { font-weight: 850; font-size: clamp(2.4rem, 6.4vw, 5.1rem); line-height: 1.02; letter-spacing: -.022em; margin: 0; max-width: 14em; }
.wink { display: flex; align-items: flex-end; gap: .45rem; margin: .55rem 0 0; padding-left: min(30%, 21rem); transform: rotate(-1.2deg); transform-origin: left center; font-size: 1.3rem; }
.wink svg { flex: none; width: 3.6rem; height: 2.5rem; margin-bottom: .2rem; overflow: visible; }
.wink path { fill: none; stroke: var(--lamp); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: 1.4rem; }
.lede { font-size: 1.4rem; line-height: 1.45; margin: 0 0 1.5rem; max-width: 23em; }
.hero .hint { color: var(--on-ink-soft); }
.soon { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--lamp); margin: 0; }

/* ---------- The demo: a made-up page, its problems and its fixes ---------- */
.demo { margin: 0; }
.demo-stage { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; align-items: stretch; }
.demo-page { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(1deg); filter: drop-shadow(0 16px 20px rgb(8 16 60 / .38)); }
.demo-page text { font-family: var(--f-text); font-size: 11px; }
.demo-page .t-brand { font: 800 17px var(--f-display); }
.demo-page .t-head { font: 800 16px var(--f-display); fill: #121a3a; }
.demo-page .t-order { font-weight: 700; }
.demo-page .t-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; }
.demo-page .t-num { font: italic 600 15px var(--f-display); }
.demo-page .frame { fill: #ffffff; }
.demo-page .chrome { fill: #e6ebfa; }
.demo-page .dot { fill: #b7c0de; }
.demo-page .bar { fill: #ffffff; stroke: #c4cbe3; stroke-width: 1.5; }
.demo-page .t-url { fill: #2b3357; }
.demo-page .t-brand { fill: #121a3a; }
.demo-page .t-nav, .demo-page .t-small { fill: #2b3357; }
.demo-page .band { fill: #fdf0d2; }
.demo-page .loaf { fill: #d9a35f; stroke: #8a5a25; stroke-width: 2; }
.demo-page .cut { fill: none; stroke: #8a5a25; stroke-width: 2; stroke-linecap: round; }
.demo-page .order { fill: #2b3357; }
.demo-page .t-order { fill: #ffffff; }
.demo-page .code { fill: #f1f4fc; }
.demo-page .t-code { fill: #2b3357; }
.demo-page .t-mail { fill: #2b3357; }
.demo-page .lock { fill: none; stroke: #1f6a3a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-page .pen { fill: none; stroke: #2747d8; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-page .t-num { fill: #2747d8; }
.demo-page .tick { fill: none; stroke: #2747d8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.demo-page .now { visibility: hidden; }
.demo[data-state="fixed"] .demo-page .was { visibility: hidden; }
.demo[data-state="fixed"] .demo-page .now { visibility: visible; }
.demo[data-state="fixed"] .demo-page .pen { opacity: .28; }
.demo[data-state="fixed"] .demo-page .tick { opacity: 1; }

.demo-notes { list-style: none; margin: 0 0 0 -1.4rem; padding: .6rem 0 .9rem; display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; position: relative; counter-reset: note; }
.demo-note { counter-increment: note; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5em; align-items: start; background: var(--lamp); color: var(--carbon); font: italic 600 1rem/1.27 var(--f-display); padding: .55rem .7rem .65rem .6rem; border-radius: 2px; border: 1px solid transparent; box-shadow: 0 3px 4px rgb(8 16 60 / .32); transform: rotate(2.2deg); }
.demo-note:nth-child(2) { transform: rotate(-1.8deg); margin-left: .5rem; }
.demo-note:nth-child(3) { transform: rotate(1.4deg); }
.demo-note::before { content: counter(note); grid-area: 1 / 1; display: grid; place-items: center; width: 1.45em; height: 1.45em; margin-top: -.06em; border: 2px solid #2747d8; color: #1f3ba6; border-radius: 50% 46% 52% 47% / 47% 52% 46% 51%; font-weight: 700; font-size: .92em; line-height: 1; }
.demo-note > span { grid-area: 1 / 2; }   /* both texts share one cell: the note keeps its size when they swap */
.demo-note .now { visibility: hidden; }
.demo[data-state="fixed"] .demo-note .was { visibility: hidden; }
.demo[data-state="fixed"] .demo-note .now { visibility: visible; }
.demo[data-state="fixed"] .demo-note::before { content: ""; border-color: transparent; background: #1f3ba6; -webkit-mask: url("/assets/img/check.svg") center / 92% no-repeat; mask: url("/assets/img/check.svg") center / 92% no-repeat; }

.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.4rem; }
.demo-cap { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--text-soft); flex: 1 1 14rem; }
.switch { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: .3rem .25rem; font: 700 1.0625rem/1.2 var(--f-text); color: inherit; background: none; border: 0; border-radius: 2rem; box-shadow: none; cursor: pointer; touch-action: manipulation; }
/* The switch needs JavaScript. Its place is kept while the script loads, so nothing jumps when it appears. */
.switch[hidden] { display: inline-flex; visibility: hidden; }
@media (scripting: none) { .switch[hidden] { display: none; } }
.switch-track { position: relative; flex: none; width: 3.5rem; height: 2rem; border: 2px solid currentColor; border-radius: 2rem; }
.switch-knob { position: absolute; left: .2rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -.65rem; border-radius: 50%; background: currentColor; }
.switch[aria-checked="true"] .switch-track { background: var(--lamp); border-color: var(--lamp); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(1.5rem); background: var(--carbon); }
.switch:hover .switch-track { box-shadow: 0 0 0 3px rgb(255 225 74 / .45); }

/* ---------- Bands ---------- */
.band { padding-block: clamp(3rem, 7vw, 5rem); }
.band-frost { background: var(--bg-alt); }
.band h2 { margin-top: 0; margin-bottom: var(--s5); }

/* ---------- Pen check marks and crosses ---------- */
.checks, .crosses { list-style: none; padding: 0; }
.checks > li, .crosses > li { position: relative; padding-left: 2.1rem; margin-bottom: var(--s3); }
.checks > li::before, .crosses > li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.35rem; height: 1.15rem; background: var(--pen); -webkit-mask: url("/assets/img/check.svg") center / contain no-repeat; mask: url("/assets/img/check.svg") center / contain no-repeat; }
.crosses > li::before { -webkit-mask-image: url("/assets/img/cross.svg"); mask-image: url("/assets/img/cross.svg"); top: .3em; width: 1.15rem; }
.crosses { max-width: 40rem; margin: 0; }

/* ---------- Home: what the free check looks at ---------- */
.groups { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
.groups li { margin: 0; padding-top: 1rem; border-top: 3px solid var(--pen); }
.groups h3 { margin-bottom: .4rem; }
.groups p { margin: 0; color: var(--text-soft); }

/* ---------- Home: free check or full report ---------- */
.offer-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sheet { background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.4rem, 3.4vw, 2.2rem); box-shadow: 0 22px 30px -18px rgb(var(--shadow) / .4); }
.sheet > :last-child, .slip > :last-child { margin-bottom: 0; }
.amount { font-family: var(--f-display); font-weight: 850; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.free h3, .slip h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.slip-wrap { transform: rotate(-1deg); filter: drop-shadow(0 14px 14px rgb(var(--shadow) / .22)); }
.slip { background: var(--canary); color: var(--carbon); padding: 2.4rem clamp(1.25rem, 3vw, 2.1rem) 1.6rem; border: 1px solid transparent; --link: var(--ink); --pen: #2747d8; --focus: var(--carbon);
  -webkit-mask: radial-gradient(circle 7px at 11px 0, #0000 97%, #000) 0 0 / 22px 100%; mask: radial-gradient(circle 7px at 11px 0, #0000 97%, #000) 0 0 / 22px 100%; }
.slip-foot { margin: .9rem 0 0; padding-top: .9rem; border-top: 2px dashed #8f7a24; font-weight: 700; }

/* ---------- Home: how it works (a real sequence, so it is numbered) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.75rem; counter-reset: step; }
.steps li { counter-increment: step; margin: 0; position: relative; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 0 .9rem -.2rem; border: 2.6px solid var(--pen); border-radius: 50% 46% 52% 47% / 47% 52% 46% 51%; font: 850 1.55rem/1 var(--f-display); color: var(--pen); background: var(--bg); position: relative; z-index: 1; }
.steps li::after { content: ""; position: absolute; left: 3.3rem; right: -1.75rem; top: 1.6rem; border-top: 2.5px dashed var(--pen); opacity: .5; }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.steps p { margin: 0; font-size: 1.0625rem; line-height: 1.5; }

/* ---------- Home: who it is for (two doors) ---------- */
.doors { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.doors li { margin: 0; padding: 1.5rem 1.6rem 1.4rem; border: 2px solid var(--on-ink-soft); border-radius: .6rem; }
.doors h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-bottom: .35rem; }
.doors h3 a { text-decoration-color: var(--lamp); text-decoration-thickness: 3px; text-underline-offset: .22em; }
.doors p { margin: 0; color: var(--text-soft); }

/* ---------- Inner pages: masthead and rows ---------- */
.masthead { padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2.5rem, 6vw, 4rem); }
.masthead h1 { max-width: 15em; margin-bottom: .45em; }
.masthead-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.spot { width: clamp(7rem, 13vw, 10rem); height: auto; overflow: visible; margin-right: clamp(0rem, 4vw, 4rem); }
.spot path { fill: none; stroke: var(--lamp); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.masthead .lead { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); line-height: 1.45; max-width: 36rem; margin: 0; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 5vw, 4.5rem); padding-block: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }
.row > h2 { margin: 0; font-size: clamp(1.45rem, 1.25rem + .9vw, 1.9rem); }
.row-body > * { max-width: 38rem; }
.row-body > :last-child { margin-bottom: 0; }
.closing h2 { margin-bottom: var(--s4); }
.closing > :last-child { margin-bottom: 0; }
.band-frost .soon { color: var(--pen); }

/* ---------- Price: the comparison table ---------- */
.compare { width: 100%; max-width: 52rem; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: var(--s6); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: .85rem 1rem .85rem 0; border-top: 1px solid var(--rule); }
.compare thead td { border-top: 0; }
.compare thead th { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; border-top: 0; padding-top: 0; }
.compare tbody th { font-weight: 700; width: 30%; }
.compare tbody tr:first-child td { font-family: var(--f-display); font-weight: 850; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: normal; }
.notes { max-width: 40rem; color: var(--text-soft); }
.notes li::marker { color: var(--pen); }

/* ---------- App pages (results, sign-in, your sites): paper under the night header ---------- */
.page { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.page > .wrap > * { max-width: 44rem; }
.page .lead { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); line-height: 1.45; }
.page .meta { color: var(--text-soft); }
.legal table { width: 100%; table-layout: fixed; border-collapse: collapse; overflow-wrap: anywhere; }
.legal th, .legal td { padding: .5rem; border: 1px solid var(--edge); text-align: left; vertical-align: top; }
.h1-url { display: block; font-size: .62em; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; margin-top: .2em; }
.fineprint { color: var(--text-soft); font-size: 1.0625rem; margin: 0; }
.page dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1.2rem; }
.page dt { font-weight: 700; }
.page dd { margin: 0; }
button.btn-quiet { margin-top: 0; }

/* ---------- Footer ---------- */
.site-foot { background: var(--foot); color: var(--on-foot); --link: var(--white); --focus: var(--lamp); --text-soft: var(--foot-soft); }
.foot-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 5rem); padding-block: 2.5rem 2rem; }
.foot-name { font: 800 1.6rem/1.2 var(--f-display); letter-spacing: -.012em; margin: 0 0 .3rem; color: var(--white); }
.foot-tag { margin: 0 0 1.4rem; color: var(--text-soft); }
.foot-mail { display: inline-block; font: 800 clamp(1.25rem, .9rem + 1.6vw, 1.75rem)/1.2 var(--f-display); letter-spacing: -.01em; margin-bottom: .5rem; overflow-wrap: anywhere; padding-block: .2rem; }
.foot-place { margin: 0; color: var(--text-soft); }
.horizon { display: block; width: 100%; height: max(4.75rem, 9.17vw); margin-bottom: -1px; background: var(--bg); }
.horizon .ground { fill: var(--foot); }
.horizon .line { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.foot-nav ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.foot-nav li { margin: 0; break-inside: avoid; }
.foot-nav a { display: inline-block; padding: .5rem 0; font-weight: 600; text-decoration-color: rgb(255 255 255 / .45); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--foot-rule); color: var(--text-soft); }
.foot-base p { margin: 0; }
.foot-line { font-family: var(--f-display); font-style: italic; font-weight: 600; color: var(--on-foot); }

/* ---------- Narrow screens ---------- */
@media (max-width: 63.99rem) {
  .hero-cols { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .demo { max-width: 40rem; }
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .steps { grid-template-columns: 1fr; gap: 0; max-width: 34rem; }
  .steps li { padding: 0 0 1.9rem 4.4rem; min-height: 4.4rem; }
  .steps li::before { position: absolute; left: -.2rem; top: -.4rem; margin: 0; }
  .steps li::after { left: 1.4rem; right: auto; top: 3rem; bottom: .1rem; border-top: 0; border-left: 2.5px dashed var(--pen); }
  .row { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .masthead-in { grid-template-columns: minmax(0, 1fr); }
  .spot { display: none; }
  .offer-cols { grid-template-columns: minmax(0, 1fr); }
  .slip-wrap { max-width: 32rem; }
}
@media (max-width: 47.5rem) {
  body { font-size: 1.0625rem; }
  .site-head { padding-block: .25rem 0; }
  .nav a { padding: .72rem .55rem; font-size: 1rem; }
  .nav ul { margin-inline: -.55rem; gap: 0 .2rem; }
  .hero { padding-top: .9rem; }
  .hero h1 { font-size: clamp(2.1rem, 10.5vw, 2.9rem); }
  .wink { font-size: 1.08rem; padding-left: 1rem; margin-top: .7rem; }
  .wink svg { width: 2.6rem; height: 1.8rem; }
  .hero-cols { gap: 1.5rem; margin-top: .9rem; }
  .lede { font-size: 1.15rem; margin-bottom: 1.1rem; }
  .btn, button[type="submit"] { font-size: 1.1rem; padding-inline: 1.15rem; }
  .demo-stage { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .demo-notes { margin: 0; padding: 0; gap: .7rem; }
  .demo-note, .demo-note:nth-child(2), .demo-note:nth-child(3) { transform: rotate(-.6deg); margin-left: 0; font-size: 1.0625rem; padding: .6rem .8rem .7rem; }
  .demo-note:nth-child(2) { transform: rotate(.5deg); }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .groups, .doors { grid-template-columns: minmax(0, 1fr); }
  .compare thead th { font-size: 1.1rem; }
  .compare tbody th { width: auto; }
  .compare th, .compare td { padding-right: .6rem; font-size: 1rem; }
  .compare tbody tr:first-child td { font-size: 1.25rem; }
}
@media (max-width: 22.5rem) { .foot-nav ul { columns: 1; } }

/* ---------- Motion: only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  a { transition: background-color .15s ease-out, color .15s ease-out; }
  .btn, button[type="submit"] { transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .15s ease-out; }
  .skip { transition: transform .2s var(--ease-out); }
  .switch-knob { transition: transform .28s var(--ease-out), background-color .2s ease-out; }
  .switch-track { transition: background-color .2s ease-out, border-color .2s ease-out, box-shadow .15s ease-out; }

  /* The one authored moment: the lamp comes on, then the pen marks the page. It runs once. */
  .demo-page .glow { animation: lamp-on .9s ease-out .15s both; }
  .demo-page .ray { animation: lamp-on-rays .9s ease-out .15s both; }
  .demo-page .pen { stroke-dasharray: 1; animation: draw .7s var(--ease-out) both; }
  .demo-page .pen-1 { animation-delay: .7s; }
  .demo-page .pen-2 { animation-delay: 1.15s; }
  .demo-page .pen-3 { animation-delay: 1.6s; }
  .wink path { stroke-dasharray: 1; animation: draw .6s var(--ease-out) .15s both; }
  .demo-note { animation: stick .55s var(--ease-out) both; }
  .demo-note:nth-child(1) { animation-delay: .9s; }
  .demo-note:nth-child(2) { animation-delay: 1.35s; }
  .demo-note:nth-child(3) { animation-delay: 1.8s; }

  /* The fixes answer the visitor's own switch. */
  .demo-page .pen { transition: opacity .3s ease-out; }
  .demo-page .tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease-out), opacity .1s linear; }
  .demo[data-state="fixed"] .demo-page .tick { stroke-dashoffset: 0; }
  .demo[data-state="fixed"] .demo-page .tick-2 { transition-delay: .16s; }
  .demo[data-state="fixed"] .demo-page .tick-3 { transition-delay: .32s; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stick { from { translate: 0 -.7rem; rotate: 5deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes lamp-on-rays { 0% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: .3; } 100% { opacity: 1; } }
@keyframes lamp-on { 0% { opacity: 0; } 40% { opacity: .28; } 55% { opacity: .1; } 100% { opacity: .2; } }

/* ---------- Windows high contrast (forced colors) ---------- */
@media (forced-colors: active) {
  .btn, button[type="submit"], .skip, .btn-quiet { border-color: ButtonText; box-shadow: none; }
  .demo[data-state="fixed"] .demo-note::before { background: CanvasText; }
  .switch-knob { background: ButtonText; }
  .switch[aria-checked="true"] .switch-track { background: Highlight; border-color: Highlight; }
  .switch[aria-checked="true"] .switch-knob { background: HighlightText; }
  .demo-note, .summary, .sheet, .doors li { border-color: CanvasText; }
  .checks > li::before, .crosses > li::before { background: CanvasText; }
  .slip { -webkit-mask: none; mask: none; border-color: CanvasText; }
  .steps li::before { border-color: CanvasText; color: CanvasText; }
  .nav a[aria-current="page"] { text-decoration-color: currentColor; }
  .wink path, .wordmark path, .spot path, .horizon .line { stroke: CanvasText; }
  .horizon { background: Canvas; }
  .horizon .ground { fill: Canvas; }
  .demo-page { forced-color-adjust: none; }
}

/* ---------- The full report (render.py's markup inside the site's frame; report.js) ---------- */
.report h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem); }
.report h2 { padding-top: var(--s4); border-top: 2px solid var(--rule); }
.report h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.report h4 { font: 700 1.05rem/1.3 var(--f-text); margin: var(--s4) 0 var(--s2); }
.report .meta, .report .small { color: var(--text-soft); }
.report .small { font-size: 1rem; }
.report ul.checks { list-style: none; padding: 0; margin: 0; }
.report li.check { margin: var(--s4) 0; padding: var(--s4) var(--s5); border: 2px solid var(--rule); border-radius: .55rem; background: var(--bg-alt); }
.report li.check.problem { border-color: var(--bad); }
.report .checks > li::before { content: none; }  /* the site's tick list shares the class name "checks": no tick on a finding */
.report .label { font-weight: 700; }
.report .problem .label { color: var(--bad); }
.report .pass .label { color: var(--ok); }
.report .could_not_check .label { color: var(--warn); }
.report pre { margin: var(--s2) 0; padding: var(--s3) var(--s4); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5; background: var(--bg); border: 1px solid var(--edge); border-radius: .45rem; }
.report details { margin-top: var(--s3); }
.report summary { cursor: pointer; font-weight: 700; color: var(--link); }
.report .fix { margin-top: var(--s4); padding-left: var(--s4); border-left: 4px solid var(--lamp-deep); }
.report button[data-copy] { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: var(--s3); padding: .4rem 1rem; font: 700 1rem/1.2 var(--f-text); color: var(--text); background: transparent; border: 2px solid var(--text); border-radius: .5rem; cursor: pointer; }
.report button[data-copy]:hover { background: var(--lamp); color: var(--carbon); border-color: var(--carbon); }