/* Self-hosted Atkinson Hyperlegible Next (SIL Open Font License, see fonts/OFL.txt).
   Designed by the Braille Institute for readability, which suits a product about accessibility. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: italic; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 800; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 800; font-style: normal; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-next-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #16213e;        /* text, outlines, the dark half of the focus ring */
  --ink-soft: #3b4663;   /* secondary text, 9.6:1 on white */
  --paper: #ffffff;
  --mist: #eef2f8;       /* quiet bands and panels */
  --line: #c3cde0;       /* borders and dividers */
  --signal: #ffbe0b;     /* focus yellow: the brand colour and the light half of the focus ring */
  --link: #1f3fbf;       /* 8.2:1 on white */
  --good: #17663f;
  --fair: #7a5200;
  --poor: #a3201a;
  --radius: 6px;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.125rem; line-height: 1.55; }
img, svg { max-width: 100%; }
p, li, dd { max-width: 68ch; }
.tool-list li, .rules li, .rule-brief li, .examples li, .steps li, .sev-counts li { max-width: none; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.16em; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.01em; margin-top: 1.6em; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); font-size: 0.85rem; }

/* The focus ring is the brand: yellow inside, ink outside, visible on any background. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--signal); }
main:focus { outline: none; }

.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--signal); color: var(--ink); padding: 0.6rem 1rem; font-weight: 700; z-index: 10; border: 2px solid var(--ink); border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; }
.narrow { max-width: 46rem; }
main > section { padding-block: 2.5rem; }
main > section.band { padding-block: 3rem; }
main > section > :first-child, main > section > .wrap > :first-child { margin-top: 0; }

/* Header and footer */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); max-width: 72rem; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
.mark { width: 1.6rem; height: 1.6rem; color: var(--ink); flex: none; }
.site-header ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-header a { color: var(--ink); font-weight: 700; text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.site-header a[aria-current="page"], .tool-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.tool-nav { background: var(--mist); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.site-header:has(+ .tool-nav) { border-bottom: 0; }
.tool-nav ul { max-width: 72rem; margin: 0 auto; padding: 0.55rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; list-style: none; }
.tool-nav a { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 1rem; }
.tool-nav a:hover { text-decoration: underline; }
.site-footer { margin-top: 4rem; background: var(--ink); color: #fff; }
.footer-inner { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.2rem; }
.site-footer .mark { color: #fff; }
.site-footer a { color: #fff; }
.footer-links { display: flex; gap: 1.5rem; list-style: none; padding: 0; }
.site-footer .fine { color: #cdd5e6; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.9rem; padding: 0.55rem 1.3rem; background: var(--signal); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { background: #f0ad00; }
.button:active { transform: translateY(1px); }
.button-small { min-height: 2.4rem; padding: 0.35rem 0.9rem; font-size: 1rem; }
.button-quiet { background: var(--paper); }
.button-quiet:hover { background: var(--mist); }
.button-danger { background: var(--poor); color: #fff; border-color: var(--poor); }
.button-danger:hover { background: #7f1813; }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: underline; }
.link-button.danger { color: var(--poor); }
.inline-form { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0 1.5rem; }
.actions form { margin: 0; }

/* Forms */
label { display: block; font-weight: 700; margin: 1rem 0 0.35rem; }
label.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
label.check input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.2rem; accent-color: var(--ink); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { width: 100%; max-width: 34rem; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
textarea { max-width: 46rem; }
.stack { margin-bottom: 2rem; }
.stack .button { margin-top: 1.2rem; }
.hint, .fine { color: var(--ink-soft); font-size: 0.95rem; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field-error { color: var(--poor); font-weight: 700; }
.form-page { max-width: 38rem; }

.notice { border: 2px solid var(--ink); border-left-width: 8px; border-radius: var(--radius); padding: 0.8rem 1rem; margin: 1rem 0; max-width: 46rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-error { border-color: var(--poor); }
.notice-ok { border-color: var(--good); }
.notice-warn { border-color: var(--fair); }
.banner { background: var(--signal); border-bottom: 2px solid var(--ink); }
.banner p { max-width: 72rem; margin: 0 auto; padding: 0.7rem 1.25rem; font-weight: 700; }
.banner a { color: var(--ink); }
.banner-alert { background: var(--ink); }
.banner-alert p, .banner-alert a { color: #fff; }

/* Home: hero */
.hero { max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.25rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.lede { font-size: 1.25rem; color: var(--ink-soft); }
.home-hero { align-items: start; }
.scan-card { border: 3px solid var(--ink); border-radius: 12px; padding: 1.4rem 1.5rem; box-shadow: 8px 8px 0 var(--signal); }
.scan-card h2 { margin-top: 0; font-size: 1.6rem; }
.tool h3 a { color: var(--ink); }
.tool .status { text-align: right; }
.scan-form label { font-size: 1.05rem; }
.scan-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.scan-row input { flex: 1 1 15rem; min-height: 3.2rem; font-size: 1.15rem; }
.scan-row .button { min-height: 3.2rem; }
.tool-scan { margin-top: 1.4rem; max-width: 36rem; }
/* Cookie choice for Google Analytics: a bar at the bottom, both answers equally easy. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 3px solid var(--ink); box-shadow: 0 -6px 0 var(--signal); }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.consent h2 { flex-basis: 100%; margin: 0; font-size: 1.1rem; }
.consent p { flex: 1 1 26rem; margin: 0; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
@media print { .consent { display: none; } }
.tool-scan label { display: block; font-weight: 700; margin-bottom: 0.4rem; }

/* Home: the annotated page mock. It shows the product's own output. */
.demo { margin: 0; }
.demo-page { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); overflow: visible; }
.demo-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; border-bottom: 2px solid var(--ink); background: var(--mist); border-radius: 8px 8px 0 0; }
.demo-bar span { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--ink); }
.demo-bar em { font-style: normal; font-size: 0.8rem; color: var(--ink-soft); margin-left: 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4rem; padding: 2.4rem 1.4rem 3.2rem; }
.demo-photo { aspect-ratio: 4 / 5; border-radius: 4px; background:
  radial-gradient(circle at 50% 30%, #e9dcc4 0 22%, transparent 23%),
  linear-gradient(160deg, #d8c7a6, #c4ae86); }
.demo-title { font-weight: 800; font-size: 1.15rem; margin: 0.4rem 0 0.2rem; }
.demo-price { font-weight: 700; margin-bottom: 0.9rem; }
.demo-faint { display: grid; gap: 0.45rem; padding: 0.3rem 0; }
.demo-faint i { display: block; height: 0.55rem; border-radius: 2px; background: #dfe2e8; }
.demo-faint i.short { width: 60%; }
.demo-sizes { display: flex; gap: 0.4rem; }
.demo-sizes b { border: 1.5px solid var(--ink); border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.8rem; }
.demo-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
.demo-buy { background: var(--ink); color: #fff; border-radius: 4px; padding: 0.5rem 0.9rem; font-weight: 700; font-size: 0.9rem; }
.demo-heart { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 1.1rem; }
.flagged { position: relative; outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--signal); }
.tag { position: absolute; left: -6px; top: -2.35rem; background: var(--ink); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.2; padding: 0.3rem 0.55rem; border-radius: 4px; white-space: nowrap; }
.tag::after { content: ""; position: absolute; left: 0.8rem; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.tag-right { left: auto; right: -6px; }
.tag-right::after { left: auto; right: 0.9rem; }
.tag-below { top: auto; bottom: -2.35rem; }
.tag-below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid var(--ink); border-top-color: transparent; }
.demo figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.9rem; }

/* Home: laws, steps, pricing, tools, FAQ */
.band { background: var(--mist); }
.laws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 1.5rem 0; }
.laws div { border-top: 3px solid var(--ink); padding-top: 0.8rem; }
.laws dt { font-weight: 800; font-size: 1.2rem; margin-bottom: 0.3rem; }
.laws dd { margin: 0; }
.steps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-top: 3.2rem; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; font-weight: 800; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 3px var(--signal) inset; }
.plan-table, .data-table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; }
.plan-table th, .plan-table td, .data-table th, .data-table td { text-align: left; padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table thead th, .data-table thead th { border-bottom: 2px solid var(--ink); }
.plan-table tbody th, .data-table tbody th { font-weight: 700; }
.sub { display: block; font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); overflow-wrap: break-word; }
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; position: relative; }
.table-scroll > .data-table { margin: 0; }
.tool-list { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 2px solid var(--ink); }
.tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.tool h3 { margin-bottom: 0.3rem; }
.tool p { margin-bottom: 0.3rem; }
.tool .status { margin: 0; font-weight: 700; white-space: nowrap; }
.tool-soon h3 { color: var(--ink-soft); }
.faq details { border-bottom: 1px solid var(--line); padding: 0.9rem 0; max-width: 50rem; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin-top: 0.6rem; }

/* Scan results and reports */
.url-line { font-size: 1.1rem; color: var(--ink-soft); word-break: break-all; }
.progress { display: flex; align-items: center; gap: 1rem; border: 2px dashed var(--ink); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.5rem 0; max-width: 46rem; }
.progress p { margin: 0; }
.spinner { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 4px solid var(--signal); border-top-color: var(--ink); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin: 1.5rem 0; }
.score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 8.5rem; height: 8.5rem; border-radius: 50%; border: 6px solid currentColor; box-shadow: 0 0 0 5px var(--signal); }
.score-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.score-of { font-size: 0.85rem; font-weight: 700; }
.score-good { color: var(--good); }
.score-fair { color: var(--fair); }
.score-poor { color: var(--poor); }
.score-label { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.3rem; }
.sev-counts { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sev-count { padding: 0.35rem 0.8rem; border-radius: var(--radius); font-weight: 700; }
.sev-count .n { font-weight: 800; }
.sev, .sev-count { background: #e8ecf3; color: #3b4558; }
.sev { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 4px; font-size: 0.85rem; font-weight: 800; text-transform: capitalize; flex: none; }
.sev-critical { background: #fde4e1; color: #8e1b13; }
.sev-serious { background: #ffe8d6; color: #8a3200; }
.sev-moderate { background: #fff1c2; color: #634700; }
.sev-minor { background: #e8ecf3; color: #3b4558; }
.rule-brief { list-style: none; padding: 0; }
.rule-brief li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.cta-box { border: 2px solid var(--ink); border-radius: 10px; padding: 1.4rem 1.5rem; margin-top: 2rem; box-shadow: 6px 6px 0 var(--signal); }
.cta-box h2 { margin-top: 0; }
.rules { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.rule { border-bottom: 1px solid var(--line); }
.rule-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; padding: 1rem 0; }
.rule summary { cursor: pointer; list-style: none; }
.rule summary::-webkit-details-marker { display: none; }
.rule-toggle { font-size: 0.95rem; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; color: var(--link); }
.rule-toggle::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.rule summary:hover .rule-toggle { text-decoration-thickness: 2px; }
.rule .when-open, .rule details[open] .when-closed { display: none; }
.rule details[open] .when-open { display: inline; }
.rule details[open] .rule-toggle::after { transform: translateY(0.05em) rotate(-135deg); }
.rule-title { font-weight: 700; flex: 1 1 20rem; }
.rule-meta { width: 100%; font-size: 0.95rem; color: var(--ink-soft); }
.rule-body { padding: 0 0 1.2rem; }
.rule-body h3 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.examples { list-style: none; padding: 0; }
.examples li { margin-bottom: 1rem; }
.examples p { margin: 0 0 0.2rem; word-break: break-all; }
.examples code { display: inline-block; background: var(--mist); padding: 0.1rem 0.4rem; border-radius: 4px; word-break: break-all; }
.examples pre { white-space: pre-wrap; word-break: break-all; background: var(--mist); border-left: 4px solid var(--ink); padding: 0.6rem 0.8rem; margin: 0.4rem 0 0; max-width: 60rem; }
.pill { display: inline-block; min-width: 2.6rem; text-align: center; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 999px; border: 2px solid currentColor; }
.pill-good { color: var(--good); }
.pill-fair { color: var(--fair); }
.pill-poor { color: var(--poor); }
.empty { font-size: 1.15rem; padding: 1.5rem 0; }
.add-site { border-top: 2px solid var(--ink); margin-top: 2rem; }
.danger-zone { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.statement-preview { border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1rem 0 1.5rem; max-width: 50rem; }
.statement-preview h2 { margin-top: 0; }

/* Status labels: words first, colour second */
.state { display: inline-block; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 4px; background: #e8ecf3; color: #3b4558; }
.state-subscribed { background: #dcefe4; color: var(--good); }
.state-trial { background: #fff1c2; color: #634700; }
.state-expired { background: #fde4e1; color: #8e1b13; }
p.state { margin: 0; }

/* Connections */
.connection { border-top: 2px solid var(--ink); padding-top: 1.2rem; margin-top: 2.5rem; }
.connection-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.connection-head h2 { margin: 0 0 0.4rem; }
.connection .stack { margin-bottom: 0.5rem; }
.setup-box { background: var(--mist); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0; max-width: 52rem; }
.setup-box h3 { margin-top: 0; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1rem; margin: 0; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; word-break: break-all; }
.kv code { background: var(--paper); padding: 0.1rem 0.4rem; border-radius: 4px; }

/* Shared tool screens */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stats div { border-top: 3px solid var(--ink); padding-top: 0.6rem; }
.stats dt { font-size: 0.95rem; color: var(--ink-soft); font-weight: 700; }
.stats dd { margin: 0.2rem 0 0; font-size: 1.6rem; font-weight: 800; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; list-style: none; padding: 0; margin: 1rem 0 0; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-block; padding: 0.4rem 0; font-weight: 700; color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { border-bottom: 4px solid var(--ink); margin-bottom: -1px; }
.tabs a:hover { text-decoration: underline; }
.late { color: var(--poor); font-weight: 700; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 17rem)); gap: 0 1rem; }
fieldset { border: 0; padding: 0; margin: 1rem 0; }
legend { font-weight: 800; font-size: 1.2rem; padding: 0; margin-bottom: 0.4rem; }
.history { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.history li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); max-width: none; }
.history .when { display: inline-block; min-width: 9.5rem; color: var(--ink-soft); font-size: 0.95rem; }
.email-preview { border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 1rem 0; max-width: 52rem; }
.email-preview summary { font-weight: 700; cursor: pointer; }
.email-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: 1rem; background: var(--mist); padding: 0.8rem 1rem; border-radius: 4px; margin: 0; }
.custom-text { border-bottom: 1px solid var(--line); padding: 0.6rem 0; max-width: 46rem; }
.custom-text summary { font-weight: 700; cursor: pointer; }
.invoice-facts { margin: 1rem 0 0.5rem; max-width: 52rem; }
.bare-header { justify-content: flex-start; }
.bare-footer { max-width: 72rem; margin: 3rem auto 0; padding: 1.5rem 1.25rem; border-top: 1px solid var(--line); }

/* Larger forms (e-invoices) */
.form-wide { max-width: 64rem; }
.group { border: 0; border-top: 2px solid var(--ink); padding: 1rem 0 0.5rem; margin: 1.5rem 0 0; }
.group legend { padding: 0 0.6rem 0 0; }
.field { margin: 0; }
.field input, .field select { max-width: none; }
.field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
.field-row { max-width: 52rem; }
.field-button { display: flex; align-items: flex-end; }
.field-button .button { margin-top: 0; }
[aria-invalid="true"] { border-color: var(--poor) !important; border-width: 3px !important; }
.error-summary { border: 3px solid var(--poor); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0 1.5rem; max-width: 52rem; }
.error-summary h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--poor); font-weight: 700; }
.line-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 0.2rem 0.6rem; border: 0; border-bottom: 1px solid var(--line); padding: 0.4rem 0 0.9rem; margin: 0; }
.line-row label { font-size: 0.85rem; margin: 0.4rem 0 0.2rem; }
.line-row .line-desc { grid-column: 1 / -1; }
.line-row input, .line-row select { padding: 0.45rem 0.55rem; font-size: 1rem; }
.line-row input:disabled { background: var(--mist); border-color: var(--line); }
.live-total { margin: 0.8rem 0 0; font-weight: 700; }
.totals-box { border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.8rem 1.1rem; margin: 1.5rem 0 0; max-width: 28rem; }
.totals-box .kv dd { text-align: right; }
.form-actions { border-top: 2px solid var(--ink); padding-top: 1rem; margin-top: 2rem; }
.format-list { list-style: none; padding: 0; margin: 1rem 0; border-top: 2px solid var(--ink); }
.format-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); max-width: none; }
.format-list h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.format-list p { margin: 0 0 0.2rem; }
.format-list .status { margin: 0; }
.logo-preview { max-height: 3rem; max-width: 10rem; vertical-align: middle; margin-right: 1rem; border: 1px solid var(--line); }
label.check.inline { display: inline-flex; }
ul.plain { list-style: none; padding: 0; margin: 0; }

/* Subscription tracker */
.empty-guide { border: 2px solid var(--ink); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; max-width: 52rem; }
.empty-guide h2 { margin-top: 0; }
.steps-list { padding-left: 1.3rem; }
.steps-list li { margin-bottom: 0.6rem; }
.review-list { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--line); }
.review-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); max-width: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; margin: 0; }
.small-legend { font-size: 1rem; }
.source-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); max-width: none; }
.inline-edit { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.inline-edit input { max-width: 16rem; padding: 0.4rem 0.6rem; }

/* Billing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0; max-width: 52rem; }
.plan { border: 2px solid var(--ink); border-radius: 10px; padding: 1.3rem 1.4rem; }
.plan h3 { font-size: 1.5rem; font-weight: 800; }
.plan .price { font-size: 1.1rem; }
.plan .price strong { font-size: 2rem; font-weight: 800; }
.plan ul { padding-left: 1.2rem; }
.plan-current { box-shadow: 0 0 0 4px var(--signal); }

/* AI receptionist */
.wide-form { max-width: 52rem; }
.wide-form nav .tabs { margin-bottom: 1.5rem; }
.wide-form fieldset { margin: 2.2rem 0 1rem; }
.wide-form fieldset > legend { float: left; width: 100%; border-top: 2px solid var(--ink); padding-top: 1rem; margin-bottom: 0.2rem; }
.wide-form fieldset > legend + * { clear: both; }
.wide-form fieldset.inner, .wide-form .field-row fieldset { margin: 0.6rem 0; }
.wide-form fieldset.inner > legend, .wide-form .field-row fieldset > legend { float: none; border-top: 0; padding-top: 0; }
.wide-form .field-row fieldset { margin: 1rem 0 0; }
.wide-form .field-row fieldset > legend { margin-bottom: 0.35rem; font-size: 1.125rem; }
input[type=color]:not([type=checkbox]):not([type=radio]):not([type=hidden]) { width: 6rem; height: 3rem; padding: 0.25rem; cursor: pointer; }
.lede-small { font-size: 1.15rem; color: var(--ink-soft); }
.help-link { font-size: 0.95rem; white-space: nowrap; }
.checklist { list-style: none; padding: 0; counter-reset: step; }
.checklist li { position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; counter-increment: step; }
.checklist li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; }
.checklist li.done::before { content: "✓"; background: var(--good); border-color: var(--good); color: #fff; }
.stats .of { font-size: 1rem; font-weight: 700; color: var(--ink-soft); align-self: flex-end; }
.card-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.card-list li { border: 2px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; max-width: none; }
.card-list h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.card-list p { margin: 0.4rem 0 0; }
.card-list p a + a { margin-left: 1rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; font-size: 0.85rem; }
.faq-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.snippet { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; margin: 1rem 0; }
.snippet pre { flex: 1 1 24rem; margin: 0; background: var(--ink); color: #fff; padding: 0.9rem 1rem; border-radius: var(--radius); overflow-x: auto; font-size: 0.9rem; }
.widget-preview { background: var(--mist); border-radius: var(--radius); padding: 1.2rem; display: flex; justify-content: flex-end; max-width: 26rem; }
.widget-preview-button { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 2px solid; font-family: system-ui, sans-serif; font-weight: 600; font-size: 16px; }
.transcript { list-style: none; padding: 1rem; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.7rem; background: var(--mist); border-radius: 10px; max-width: 46rem; }
.transcript .msg { max-width: 85%; padding: 0.6rem 0.9rem; border-radius: 12px; background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript .msg-user { align-self: flex-end; background: var(--ink); color: #fff; }
.transcript .msg-owner { border: 2px solid var(--good); }
.transcript .who { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; }
.transcript .msg-user .who { color: #dfe5f2; }
.transcript .time { font-weight: 400; margin-left: 0.4rem; }
.transcript .msg-note { align-self: center; font-size: 0.9rem; color: var(--ink-soft); text-align: center; max-width: 36rem; }
.chat-input { max-width: 46rem; margin-bottom: 1rem; }
.chat-input-row { display: flex; gap: 0.6rem; align-items: flex-end; }
.chat-input-row textarea { flex: 1; }
.chat-input-row .button { margin: 0; }
.conv-facts { margin: 1rem 0; max-width: 46rem; }
@media (max-width: 40rem) {
  .faq-row { grid-template-columns: 1fr; }
  .chat-input-row { flex-direction: column; align-items: stretch; }
}

/* Footer columns */
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 1.5rem 3rem; }
.footer-inner > .fine { grid-column: 1 / -1; margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.footer-cols h2 { font-size: 1rem; margin: 0.3rem 0 0.6rem; color: #fff; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 0.45rem; font-size: 0.98rem; }

/* Sales pages, topic pages and guides */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 1.2rem 0 0; margin: 0; font-size: 0.95rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.3rem; color: var(--ink-soft); }
.tool-hero { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.tool-hero h1 { max-width: 22ch; }
.tool-hero .lede { max-width: 60ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0 0.4rem; }
.tool-shot { margin: 2.5rem 0 0; }
.tool-shot img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 10px; }
.tool-shot figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.6rem; }
.narrow-text { max-width: 46rem; padding-block: 2.5rem; }
.band .wrap:not(.narrow-text) { padding-block: 2.5rem; }
.feature-grid, .who-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.5rem 2.2rem; }
.bundle-row th, .bundle-row td { background: #fffbea; border-top: 2px solid var(--ink); }
.bundle-box { border: 3px solid var(--ink); border-radius: 12px; padding: 1rem 1.3rem; margin: 1.5rem 0; box-shadow: 6px 6px 0 var(--signal); max-width: 52rem; }
.bundle-box h2 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.bundle-box p { margin: 0; }
.feature-grid-4 { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.feature-grid li { border-top: 3px solid var(--ink); padding-top: 0.8rem; max-width: none; }
.feature-grid h3, .who-list h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.feature-grid p, .who-list p { margin: 0; }
.who-list li { max-width: none; }
.plan-cards { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.plan-cards > li { border: 2px solid var(--line); border-radius: 10px; padding: 1.2rem 1.3rem; max-width: none; }
.plan-cards > li.plan-pro { border-color: var(--ink); }
.plan-cards h3 { margin: 0 0 0.3rem; }
.plan-price { margin: 0 0 0.8rem; }
.plan-price strong { font-size: 1.8rem; font-weight: 800; }
.plan-cards ul { padding-left: 1.1rem; margin: 0; }
.plan-cards ul li { margin-bottom: 0.35rem; }
.related { margin-top: 2.5rem; }
.related-list { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.2rem 2rem; }
.related-list li { border-top: 1px solid var(--line); padding-top: 0.7rem; max-width: none; }
.related-list a { font-weight: 700; font-size: 1.1rem; }
.related-list p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.article { max-width: 46rem; padding-top: 1rem; }
.article h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.article h2 { margin-top: 2.2rem; font-size: 1.6rem; }
.article h3 { margin-top: 1.4rem; font-size: 1.2rem; }
.toc { background: var(--mist); border-radius: var(--radius); padding: 1rem 1.3rem; margin: 1.5rem 0; }
.toc h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.toc ol, .toc ul { margin: 0; padding-left: 1.3rem; columns: 2 16rem; column-gap: 2rem; }
.toc li { margin-bottom: 0.3rem; break-inside: avoid; }
.guide-steps { padding-left: 1.5rem; }
.guide-steps li { margin-bottom: 0.55rem; padding-left: 0.2rem; }
.field-guide { margin: 1rem 0; border-top: 1px solid var(--line); }
.field-guide div { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: 0.2rem 1.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.field-guide dt { font-weight: 700; }
.field-guide dd { margin: 0; }
.guide-note { border-left: 6px solid var(--signal); background: #fffbea; padding: 0.7rem 1rem; margin: 1rem 0; border-radius: 0 var(--radius) var(--radius) 0; }
.guide-note p { margin: 0; }
.guide-code, .article pre { background: var(--ink); color: #fff; padding: 0.9rem 1rem; border-radius: var(--radius); overflow-x: auto; font-size: 0.9rem; }
.article code { font-family: var(--mono); font-size: 0.92em; background: var(--mist); padding: 0.05rem 0.3rem; border-radius: 3px; overflow-wrap: anywhere; }
.article pre code { background: none; padding: 0; color: inherit; }
.article section h2[tabindex="-1"]:focus { outline: none; }
.cta-box { border: 2px solid var(--ink); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 2.5rem 0; }
.cta-box h2 { margin-top: 0; font-size: 1.35rem; }
.sources { padding-left: 1.2rem; }
.sources li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.guide-end { margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.legal h2 { font-size: 1.35rem; }
@media (max-width: 52rem) {
  .footer-inner { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .field-guide div { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .laws, .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-row .line-name { grid-column: 1 / -1; }
  .field-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .format-list li { grid-template-columns: 1fr; }
  .data-table { font-size: 1rem; }
  .data-table th, .data-table td { padding: 0.55rem 0.5rem; }
  .table-scroll > .data-table { min-width: 36rem; }
  .table-scroll { border-right: 4px solid var(--line); }
}
@media (max-width: 34rem) {
  .steps { grid-template-columns: 1fr; }
  .demo-body { grid-template-columns: 1fr; }
  .plan-table { font-size: 0.95rem; }
  .plan-table th, .plan-table td { padding: 0.5rem 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--signal); }
  .button:active { transform: none; }
}

/* PDF reports */
body.print { font-size: 11pt; }
.print .wrap { padding: 0; max-width: none; }
.print .score { box-shadow: none; }
.print h2, .print h3 { break-after: avoid; }
.print .rule-keep { break-inside: avoid; }
.print .rule-keep .rule-body { padding-bottom: 0; }
.print .rules { break-before: avoid; }
.print .rule-body > p, .print .examples li { break-inside: avoid; }
.print .examples pre { font-size: 8pt; }
.print a { color: var(--ink); }

/* ---------- Marketing pages: colour, pictures and movement ---------- */

/* One quiet colour per tool, used behind its icon so each tool is easy to spot again. */
.tint-accessibility { --tint: #dce6ff; }
.tint-payment-reminders { --tint: #fff0b8; }
.tint-e-invoices { --tint: #d3f0df; }
.tint-subscription-tracker { --tint: #eadffd; }
.tint-ai-receptionist { --tint: #ffe0cf; }
.icon { width: 1.4rem; height: 1.4rem; flex: none; vertical-align: middle; }
.slide-tabs[hidden], .slides .slide[hidden] { display: none; }

.button-signal { background: var(--signal); }
.button-ghost { background: transparent; color: #fff; border-color: #fff; }
.button-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Home: the dark top with today's activity from every tool */
main > section.home-top { background: var(--ink); color: #fff; padding-block: 4rem 4.5rem; }
.home-top-inner { max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.home-top h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.8rem); max-width: 18ch; text-wrap: balance; }
.home-top .lede { color: #d9dfee; }
.home-top .fine { color: #c7cfe3; }
.home-top :focus-visible { outline-color: #fff; }
.feed { margin: 0; }
.feed-window { background: var(--paper); color: var(--ink); border: 3px solid #fff; border-radius: 14px; box-shadow: 10px 10px 0 var(--signal); overflow: hidden; }
.feed-bar { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.6rem 0.9rem; background: var(--mist); border-bottom: 2px solid var(--ink); font-size: 0.92rem; max-width: none; }
.feed-bar span, .frame-bar span { width: 0.62rem; height: 0.62rem; border-radius: 50%; border: 1.5px solid var(--ink); }
.feed-bar b { margin-left: 0.6rem; }
.feed-list { list-style: none; margin: 0; padding: 0.7rem; display: grid; gap: 0.55rem; }
.feed-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.7rem 0.8rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 0.98rem; line-height: 1.35; max-width: none; }
.feed-item:first-child { border: 2px solid var(--ink); }
.feed-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9px; background: var(--tint); }
.feed-text b { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.1rem; }
.feed-time { align-self: start; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  /* The one moment of movement: the day's messages arrive one by one, the newest last, then everything stays still. */
  .feed-item { animation: feed-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .feed-item:nth-child(5) { animation-delay: 0.25s; }
  .feed-item:nth-child(4) { animation-delay: 0.8s; }
  .feed-item:nth-child(3) { animation-delay: 1.35s; }
  .feed-item:nth-child(2) { animation-delay: 1.9s; }
  .feed-item:nth-child(1) { animation-delay: 2.5s; }
}
@keyframes feed-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); } }

/* Home: the five tools at a glance */
main > section.glance { padding-block: 3.5rem 3rem; }
.glance-heading { max-width: 26ch; text-wrap: balance; }
.glance-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.glance-card { position: relative; display: flex; flex-direction: column; padding: 1.1rem 1.1rem 1rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); max-width: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.glance-card:hover, .glance-card:focus-within { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--signal); }
.glance-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; background: var(--tint); margin-bottom: 0.9rem; }
.glance-icon .icon { width: 1.7rem; height: 1.7rem; }
.glance-pain { font-weight: 800; font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.5rem; }
.glance-card h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.glance-card h3 a { color: var(--link); }
.glance-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.glance-card p { font-size: 0.98rem; margin: 0 0 0.6rem; }
.glance-card .glance-price { margin: auto 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.glance-bundle { margin: 1.4rem 0 0; font-weight: 700; }

/* Home: each tool at work, in tabs */
main > section.showcase { background: var(--mist); padding-block: 3.5rem; }
.section-lede { color: var(--ink-soft); margin-top: -0.2rem; }
.slide-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0; }
.slide-tabs button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 1rem 0.4rem 0.45rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.slide-tabs button .icon { width: 1.9rem; height: 1.9rem; padding: 0.3rem; border-radius: 50%; background: var(--tint); color: var(--ink); }
.slide-tabs button:hover { background: #fff; box-shadow: 3px 3px 0 var(--signal); }
.slide-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.slide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 2.5rem; align-items: center; padding-top: 2rem; }
.slides:not(.is-tabs) .slide + .slide { margin-top: 2rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .slides.is-tabs .slide:not([hidden]) { animation: slide-in 0.4s ease both; }
}
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } }
.slide-pain { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.3rem 0.9rem 0.3rem 0.35rem; border-radius: 999px; background: var(--tint); font-weight: 700; font-size: 0.98rem; }
.slide-pain .icon { width: 1.8rem; height: 1.8rem; padding: 0.3rem; border-radius: 50%; background: var(--paper); }
.slide-copy h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.ticks { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: 0.65rem; }
.ticks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; max-width: none; }
.ticks .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--good); stroke-width: 2.6; }
.slide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.3rem; }

/* A screenshot in a simple browser frame with the brand's yellow offset shadow */
.frame { margin: 0; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 10px 10px 0 var(--signal); }
.frame-bar { display: flex; gap: 0.35rem; margin: 0; padding: 0.5rem 0.8rem; background: var(--mist); border-bottom: 2px solid var(--ink); max-width: none; }
.frame img { display: block; width: 100%; height: auto; }
.frame figcaption { padding: 0.6rem 0.9rem; font-size: 0.92rem; color: var(--ink-soft); border-top: 1px solid var(--line); max-width: none; }

/* Home: try the free check */
main > section.try { padding-block: 3.5rem; }
main > section.tinted { background: var(--mist); padding-block: 3.5rem; }
.try-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.try .scan-card { background: var(--paper); }
.steps-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Feature lists with icons */
.icon-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.6rem 2.2rem; }
.icon-grid li { max-width: none; }
.icon-grid > li > .icon { width: 2.8rem; height: 2.8rem; padding: 0.6rem; margin-bottom: 0.8rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 var(--signal); }
.icon-grid h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.icon-grid p { margin: 0; }
.table-tool { display: inline-flex; align-items: center; gap: 0.55rem; }
.table-tool .icon { width: 1.9rem; height: 1.9rem; padding: 0.3rem; border-radius: 7px; background: var(--tint); }
.pricing.tinted .table-scroll { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 0 0.6rem; }
.pricing.tinted .plan-table { margin: 0; }
.pricing.tinted .plan-table tr:last-child th, .pricing.tinted .plan-table tr:last-child td { border-bottom: 0; }

/* Closing call to action */
main > section.cta-band { background: var(--ink); color: #fff; padding-block: 3.5rem; margin-top: 3rem; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 auto 0.6rem; max-width: 24ch; text-wrap: balance; }
.cta-band p { color: #d9dfee; margin-inline: auto; }
.cta-band :focus-visible { outline-color: #fff; }
main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; border-top: 1px solid #34436b; }

/* Sales pages: hero with the screen beside the words */
main > section.tool-top { padding-block: 0 1rem; }
.tool-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.tool-hero-split h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.tool-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.3rem 0.95rem 0.3rem 0.4rem; border-radius: 999px; background: var(--tint); font-weight: 700; font-size: 1rem; }
.tool-badge .icon { width: 1.8rem; height: 1.8rem; padding: 0.3rem; border-radius: 50%; background: var(--paper); }
.problem-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 2.5rem; }
.feature-ticks .tick { width: 2.3rem; height: 2.3rem; padding: 0.45rem; margin-bottom: 0.5rem; border-radius: 50%; background: var(--tint); stroke-width: 2.4; }

@media (max-width: 68rem) {
  .glance-list { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
}
@media (max-width: 60rem) {
  .home-top-inner, .slide, .try-inner, .tool-hero-split, .problem-split { grid-template-columns: 1fr; }
  main > section.home-top { padding-block: 2.5rem 3rem; }
  .frame, .feed-window { box-shadow: 6px 6px 0 var(--signal); }
}
@media (max-width: 34rem) {
  .feed-time { display: none; }
  .feed-item { grid-template-columns: auto minmax(0, 1fr); }
  .slide-tabs button span { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .glance-card { transition: none; }
  .glance-card:hover, .glance-card:focus-within { transform: none; }
}
main > section.band:has(> .wrap) { padding-block: 1rem; }

/* Guides: short videos and step-by-step pictures */
.guide-has-media { display: flex; gap: 0.6rem; align-items: flex-start; background: #fffbea; border-left: 6px solid var(--signal); padding: 0.75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.guide-has-media .icon, .guide-video figcaption .icon, .help-videos .icon { width: 1rem; height: 1rem; margin-top: 0.3rem; fill: currentColor; }
.toc-video { display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1.3; background: var(--signal); color: var(--ink); border-radius: 4px; padding: 0.05rem 0.4rem; vertical-align: 0.1em; }
.guide-media { margin: 1.2rem 0 1.8rem; }
.guide-video { margin: 0 0 1.2rem; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--ink); box-shadow: 6px 6px 0 var(--signal); }
.guide-video video { display: block; width: 100%; height: auto; background: var(--paper); }
.guide-video figcaption { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.6rem 0.9rem; color: #fff; font-size: 0.95rem; max-width: none; }
.guide-video figcaption .icon { color: var(--signal); margin-top: 0.25rem; }
.shot-steps-label { font-weight: 700; margin: 0 0 0.5rem; }
.shot-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.shot-steps > li { max-width: none; }
.shot-steps > li[hidden] { display: none; }
.shot-steps figure { margin: 0; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper); }
.shot-steps img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--ink); }
.shot-steps figcaption { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; font-weight: 700; font-size: 1.05rem; max-width: none; }
.shot-num { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--signal); border: 2px solid var(--ink); font-weight: 800; }
.stepper { margin-top: 0.8rem; }
.stepper-dots { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0 0 0.7rem; }
.stepper-dots li { max-width: none; }
.stepper-dots button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.stepper-dots button:hover { background: var(--mist); }
.stepper-dots button[aria-current="step"] { background: var(--ink); color: #fff; }
.stepper-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.stepper-count { margin: 0; font-weight: 700; }
.stepper-bar .button:disabled { opacity: 0.45; cursor: default; }
.help-cards { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.help-cards > li { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border: 2px solid var(--ink); border-radius: 12px; max-width: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.help-cards > li:hover, .help-cards > li:focus-within { box-shadow: 5px 5px 0 var(--signal); transform: translate(-2px, -2px); }
.help-cards a { font-weight: 800; font-size: 1.1rem; }
.help-cards a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.help-cards p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.help-cards .help-videos { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--ink); font-weight: 700; }
.help-icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; background: var(--tint, var(--mist)); }
.help-icon .icon { width: 1.6rem; height: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .help-cards > li { transition: none; }
  .help-cards > li:hover, .help-cards > li:focus-within { transform: none; }
}
.sales-video { margin-top: 2.5rem; max-width: 56rem; }
.sales-video figcaption a { color: #fff; }

/* The logo */
.brand-logo { display: block; height: 2.1rem; width: auto; }
.footer-brand .brand-logo { height: 1.9rem; }
@media (max-width: 34rem) { .brand-logo { height: 1.7rem; } }
/* On wide screens the pictures and videos are wider than the text column, so the screens are easy to read. */
@media (min-width: 64rem) {
  .guide .guide-media { width: min(62rem, calc(100vw - 4rem)); margin-left: calc((100% - min(62rem, calc(100vw - 4rem))) / 2); }
}

/* Buying straight away */
.button-buy { background: var(--ink); color: #fff; border-color: var(--ink); }
.button-buy:hover { background: #24345e; }
.home-top .fine a { color: #fff; }
.buy-button { margin-top: 0.5rem; }
.plan-table .buy-button { display: inline-flex; }
.plan-cards > li { display: flex; flex-direction: column; }
.plan-cards .plan-action { margin: auto 0 0; padding-top: 1rem; }
.plan-cards .plan-action .button { width: 100%; }
.chosen-plan { border: 3px solid var(--ink); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; box-shadow: 6px 6px 0 var(--signal); }
.chosen-plan p { margin: 0 0 0.5rem; }
.chosen-name { font-size: 1.25rem; }
.chosen-steps { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.plan-chosen { border-color: var(--ink) !important; box-shadow: 6px 6px 0 var(--signal); }

/* Home slides: the tool's video, started with one big button */
.video-box { position: relative; }
.video-box video { display: block; width: 100%; height: auto; background: var(--paper); }
.play-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1.3rem 0.8rem 0.9rem; border: 3px solid var(--ink); border-radius: 999px; background: var(--signal); color: var(--ink); font: inherit; font-weight: 800; font-size: 1.1rem; line-height: 1.2; text-align: left; cursor: pointer; box-shadow: 0 8px 28px rgba(22, 33, 62, 0.35); }
.play-overlay .icon { width: 2.6rem; height: 2.6rem; padding: 0.65rem 0.55rem 0.65rem 0.75rem; border-radius: 50%; background: var(--ink); color: #fff; fill: currentColor; }
.play-overlay small { display: block; font-size: 0.85rem; font-weight: 700; }
.play-overlay:hover { background: #f0ad00; }
.play-overlay[hidden] { display: none; }
@media (max-width: 34rem) { .play-overlay { font-size: 1rem; padding: 0.6rem 1rem 0.6rem 0.7rem; } .play-overlay .icon { width: 2.1rem; height: 2.1rem; } }

/* Buy page: the plans right at the top */
.buy-page { padding-top: 1rem; }
.buy-page h1 { margin-bottom: 0.4rem; }
.plan-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
@media (max-width: 52rem) { .plan-cards-2 { grid-template-columns: 1fr; } }
/* Contact form: the field only bots fill in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Admin: Pages and SEO ---- */
.wrap.wide { max-width: 1400px; }
.seo-dot { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; margin-right: 0.45em; vertical-align: -0.05em; flex: none; }
.seo-good { background: var(--good); }
.seo-ok { background: #d98c00; }
.seo-bad { background: var(--poor); }
.seo-table td.len-bad { color: var(--poor); font-weight: 700; }
.seo-table td.len-ok { color: var(--fair); font-weight: 700; }
.seo-checks { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.seo-checks li { display: flex; align-items: baseline; gap: 0.1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--mist); font-size: 1rem; max-width: none; }
.pe-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) {
  .pe-layout { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); }
  .pe-preview { position: sticky; top: 1rem; height: calc(100vh - 2rem); }
}
.pe-preview { min-height: 70vh; }
.pe-preview iframe { width: 100%; height: 100%; min-height: 70vh; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); }
.pe-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem 1.3rem; margin-bottom: 1.2rem; background: var(--paper); }
.pe-card h2 { margin-top: 0.2rem; }
.pe-card label { display: block; font-weight: 700; margin-top: 1rem; }
.pe-card input[type="text"], .pe-card textarea { width: 100%; }
.pe-card .hint { margin: 0.15rem 0 0.35rem; font-size: 0.95rem; }
.counter { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.counter.over { color: var(--poor); font-weight: 700; }
.serp { font-family: Arial, Helvetica, sans-serif; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; margin: 0.8rem 0 0.5rem; background: #fff; }
.serp p { margin: 0; max-width: none; }
.serp-url { color: #202124; font-size: 0.85rem; }
.serp-title { color: #1a0dab; font-size: 1.2rem; line-height: 1.35; margin: 0.15rem 0 !important; }
.serp-desc { color: #4d5156; font-size: 0.9rem; line-height: 1.55; }
.pe-group { border-top: 1px solid var(--line); padding: 0.5rem 0; }
.pe-group > summary { cursor: pointer; font-weight: 700; padding: 0.35rem 0; }
.pe-field { padding: 0.2rem 0 0.6rem; }
.pe-field.is-edited textarea { border-color: var(--good); box-shadow: inset 4px 0 0 var(--good); }
.pe-field label { font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.6rem; }
.pe-original { font-size: 0.95rem; margin-top: 0.3rem; }
.pe-original summary { cursor: pointer; color: var(--link); }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--good); color: #fff; vertical-align: 0.1em; }
.badge-warn { background: var(--fair); }
.pe-save { position: sticky; bottom: 0; background: var(--paper); border-top: 2px solid var(--ink); padding: 0.8rem 0; display: flex; gap: 1rem; align-items: center; z-index: 2; }
.pe-save .button { margin: 0; }