/* ==========================================================================
   recordbeacon.com shared stylesheet
   Built 2026-09-30 from the home page's own <style> block, so every page
   shares one set of tokens, fonts, header, buttons, type scale, sections,
   FAQ and footer. Page-specific rules stay in a small <style> on the page.

   Tokens (from the home page)
     paper #FFFFFF | panel #F7F6F2 | ink #1B2A41 | slate #5A6B80
     amber #C8973F | amber-wash #F8EED9 | navy/bar #0D0F22 | hairline #E5E2DA
     display: Source Serif 4 | body: Public Sans | utility: IBM Plex Mono

   Contrast (WCAG 2.x, Section 508): amber #C8973F is 2.64:1 on white, so it
   is never used as text or as a focus ring on a light surface. --amber-ink
   #7A5B1C (6.3:1 on white, 5.45:1 on amber-wash) carries every amber that is
   text, a small label or a ring. --amber stays for fills, ticks, rules, the
   wordmark, and rings on the navy sections (7.2:1 there). Field borders use
   --field-border #857F70 (3.99:1 on white; 1.4.11 needs 3:1).

   Where the home page and the 24 sub-pages disagreed on the same selector
   (section rhythm, h2, FAQ, footer links), the sub-page value is the default
   here and the home page keeps its exact previous value in its own block,
   so the home page renders unchanged apart from the contrast fixes.
   ========================================================================== */

/* ---------- fonts (self-hosted since 2026-08-15) ---------- */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/ibmplexmono--F63fjpt.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/ibmplexmono--F6qfjpt.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/publicsans-ijwRs572.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/publicsans-ijwRs572.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/publicsans-ijwRs572.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/publicsans-ijwRs572.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/sourceserif4-vEFI2_tT.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Source Serif 4'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/sourceserif4-vEFI2_tT.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- tokens ---------- */
:root {
  --paper: #ffffff;
  --panel: #f7f6f2;
  --ink: #1b2a41;
  --ink-soft: #3d4c63;      /* long-form body on the legal pages, 8.7:1 */
  --navy: #0d0f22;          /* brand tile navy */
  --slate: #5a6b80;
  --amber: #c8973f;         /* brand amber: fills, ticks, rules, wordmark */
  --amber-ink: #7a5b1c;     /* amber as text or a ring on a light surface */
  --amber-wash: #f8eed9;
  --bar: #0d0f22;
  --hairline: #e5e2da;
  --field-border: #857f70;  /* form field boundary, 3.99:1 on white */
  --ok: #2e7d4f;
  --ok-wash: #f2f8f4;
  --err: #a03333;
  --err-wash: #fbf2f2;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Public Sans", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* the sticky header is 65px tall: anchors and keyboard focus, tabbing
   backwards included, stop clear of it */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}
a { color: inherit; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: -.01em; text-decoration: none; color: inherit; }
.brand .bn { color: var(--amber); }
/* home page: section links plus the account actions */
.nav-links { display: flex; gap: 22px; margin-left: auto; }
body.referred .nav-links { display: none; }
body.referred .nav-signin { margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--slate); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-signin { border-left: 1px solid var(--hairline); padding-left: 24px; }
/* sub-pages: a quiet link or two, then two small buttons */
.nav .spacer { margin-left: auto; }
.nav a.quiet { font-size: 14.5px; color: var(--slate); text-decoration: none; font-weight: 500; }
.nav a.quiet:hover { color: var(--ink); }
.nav .homediv { border-right: 1px solid var(--hairline); padding-right: 22px; margin-right: 4px; }
.nav .btn, .nav a.quiet, .nav .back { white-space: nowrap; }
/* tool and booking pages: a tag and one back link */
.nav .tool-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--slate); border: 1px solid var(--hairline); padding: 3px 9px; }
.nav .back { margin-left: auto; font-size: 14.5px; color: var(--slate); text-decoration: none; font-weight: 500; }
.nav .back:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.6;
  padding: 11px 22px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer; font-family: var(--sans); transition: background .15s, color .15s;
}
.nav .btn { padding: 8px 17px; font-size: 14.5px; }
.btn.sm { padding: 8px 16px; font-size: 14px; }
.btn:hover:not(:disabled) { background: #2c3f5c; border-color: #2c3f5c; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--panel); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 2px; }
.sec-stop :focus-visible, .sec-security :focus-visible { outline-color: var(--amber); }

/* ---------- stamp (the bates motif) ---------- */
.stamp {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
  color: var(--slate); border: 1px solid var(--hairline);
  padding: 4px 10px; display: inline-block; background: var(--paper); height: fit-content;
}
.stamp.hot { color: var(--amber-ink); border-color: var(--amber); background: var(--amber-wash); }

/* ---------- type ---------- */
h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.12; letter-spacing: -.015em;
}
h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 33px); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 14px; }
h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 6px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: 18px; }
.lede { font-size: 19.5px; color: var(--slate); max-width: 62ch; margin-top: 18px; }
p.body { color: var(--slate); max-width: 66ch; }
p.body + p.body { margin-top: 12px; }
p.body strong { color: var(--ink); }
.cite-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--slate); text-transform: uppercase; margin-top: 10px; }
.lawnote { font-size: 14px; color: var(--slate); margin-top: 22px; max-width: 66ch; }
.lawnote a { font-weight: 600; color: var(--ink); }
/* who publishes the reference pages, one quiet line under the stamps */
.pub { font-size: 14px; color: var(--slate); margin-top: 18px; max-width: 66ch; }
.pub a { font-weight: 600; color: var(--ink); }
/* as a byline directly under the h1: the first screen says who publishes the
   page and names the state */
.hero h1 + .pub { margin-top: 14px; }
/* statute citations read as part of the sentence; only the stamp and the
   cite-tag stay mono */
.cite { font: inherit; color: inherit; opacity: 1; }
.cite a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sec-stop .cite a { color: #fff; }
.cite a[href$="/download"]::after { content: " (PDF)"; font-family: var(--mono); font-size: .75em; letter-spacing: .04em; }

/* ---------- hero ---------- */
.hero { padding-top: 84px; padding-bottom: 72px; }
section.hero { padding: 74px 0 96px; }
.hero-ctas, .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .cta { margin-top: 34px; }
.hero .cta .note { font-size: 14px; color: var(--slate); }
.hero-note { font-size: 14px; color: var(--slate); margin-top: 14px; }
.hero .stamps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* on-page contents for the long reference pages */

/* ---------- sections ---------- */
section { padding: 64px 0; border-bottom: 1px solid var(--hairline); }
section:last-of-type { border-bottom: none; }

/* navy section */
.sec-stop { background: var(--navy); color: #fff; border-bottom: none; }
.sec-stop h2 { color: #fff; }
.sec-stop p.body { color: #c3cbd8; }
.sec-stop strong, .sec-stop p.body strong { color: #fff; }
.sec-stop .eyebrow { color: #8a94a6; }
.sec-stop .rule { border: none; border-top: 1px solid #2a2d45; margin: 26px 0; }
.sec-stop .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; }
.sec-stop .pair h3 { color: #fff; }
.sec-stop .fine { font-family: var(--mono); font-size: 13px; color: var(--amber); margin-bottom: 6px; letter-spacing: .04em; }

/* closing section */
.sec-close { background: var(--panel); border-bottom: none; text-align: center; }
.sec-close h2 { max-width: 24ch; margin: 0 auto 16px; }
.sec-close p.body { margin: 0 auto; }
.sec-close .cta { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.sec-close .after { font-size: 14px; color: var(--slate); margin-top: 16px; }
.sec-close .after a { font-weight: 600; color: var(--ink); }

/* ---------- template components ---------- */
/* four-up strip: numbered steps on the product pages, quick numbers on the
   reference pages */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-top: 30px; }
.steps .step { background: var(--paper); padding: 22px 20px 24px; }
.steps .n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--amber-ink); margin-bottom: 10px; }
.steps .stat { font-family: var(--serif); font-size: 24px; font-weight: 700; margin-bottom: 6px; line-height: 1.25; color: var(--ink); }
.steps p { font-size: 14.5px; color: var(--slate); }
.steps .n, .steps .stat { max-width: none; }

/* cards */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; align-items: start; }
.withyou { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin-top: 26px; align-items: start; }
.withyou > .card:only-child { grid-column: 1 / -1; max-width: 72ch; }
.card { border: 1px solid var(--hairline); padding: 22px 22px 24px; background: var(--panel); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--slate); }
.card p + p { margin-top: 8px; }
.card.plain { background: var(--paper); }
.card .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 8px; }

/* feature stack */
.feat { margin-top: 26px; max-width: 70ch; }
.feat p { color: var(--slate); }
.feat + .feat { border-top: 1px solid var(--hairline); padding-top: 18px; }

/* tick list */
ul.ticks { list-style: none; margin-top: 20px; max-width: 72ch; }
ul.ticks li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--slate); }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border: 1.5px solid var(--amber); background: var(--amber-wash); }
ul.ticks li strong { color: var(--ink); }
.card ul.ticks { margin-top: 12px; }

/* amber box */
.box { border: 1px solid var(--amber); background: var(--amber-wash); padding: 26px 28px; margin-top: 22px; }
.box .k, .box .price { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink); margin-bottom: 12px; }
.box p { color: #5a4a2a; max-width: 70ch; font-size: 15.5px; }
.box p + p { margin-top: 10px; }
.box .cta { display: flex; gap: 14px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.box .note { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--amber-ink); }

/* statute fee table */
.tablewrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--hairline); }
table.fees { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
table.fees th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); font-weight: 500; text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--panel); }
table.fees td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--slate); }
table.fees tr:last-child td { border-bottom: none; }
table.fees td.cmp { font-family: var(--mono); font-size: 13px; color: var(--amber-ink); white-space: nowrap; }
table.fees td strong { color: var(--ink); }

/* comparison table */
table.vs { border-collapse: collapse; width: 100%; min-width: 760px; background: var(--paper); }
table.vs th, table.vs td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--hairline); font-size: 14.5px; }
table.vs tr:last-child th, table.vs tr:last-child td { border-bottom: none; }
table.vs thead th { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); background: var(--panel); border-bottom: 2px solid var(--ink); }
table.vs tbody th { font-weight: 700; color: var(--ink); background: var(--panel); width: 18%; font-size: 14.5px; }
table.vs td { color: var(--slate); width: 41%; }
table.vs td strong { color: var(--ink); }
table.vs td .rownote { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hairline); font-size: 13.5px; color: var(--ink); }
.verified { font-family: var(--mono); font-size: 12.5px; color: var(--slate); margin-top: 16px; line-height: 1.8; }
.verified a { color: var(--ink); }

/* buyer's guides */
section.qsec { padding: 46px 0; }
section.qsec h2 { max-width: 30ch; }
.good { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 18px; color: var(--slate); max-width: 64ch; }
.good strong { color: var(--ok); }
.checklist { background: var(--amber-wash); border: 1px solid var(--amber); padding: 26px 28px; margin-top: 26px; max-width: 76ch; }
.checklist ol { margin: 14px 0 0; padding-left: 22px; }
.checklist ol li { margin-bottom: 9px; font-size: 16px; }
.checklist .paste { font-size: 14.5px; color: var(--slate); margin-top: 16px; }
.checklist .copyrow { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.checklist .copied { font-size: 13.5px; color: var(--ok); font-weight: 600; }

/* ---------- faq (native details) ---------- */
.faq { margin-top: 8px; max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 16px 0; }
/* padding, not min-height: a single-line summary is only 27px tall, which
   is under the tap-target floor on a phone. 9px makes it 45px; the negative
   margin keeps each row the height it was. */
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding: 9px 0; margin: -4px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--amber-ink); font-size: 19px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--slate); margin-top: 12px; max-width: 68ch; font-size: 16px; }
.faq details p + p { margin-top: 10px; }

/* ---------- forms ---------- */
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=number], input[type=email], input[type=tel], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 16px; padding: 10px 12px;
  border: 1.5px solid var(--field-border); background: var(--paper); color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--amber-ink); outline-offset: 1px; border-color: var(--field-border); }

/* ---------- footer ---------- */
/* /foia/ keeps the plain footer: the company line and the support address */
footer { border-top: 1px solid var(--hairline); padding: 44px 0 56px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; font-size: 14px; color: var(--slate); }
.foot p { font-size: 14px; color: var(--slate); }
.foot p + p { margin-top: 8px; }
.foot a { font-weight: 600; color: var(--ink); }

/* site footer, every other page: a closing band (left out where the page
   ends on its own closing section), the wordmark and three short columns,
   the page's legal note where it has one, then the copyright line. Sizes are
   set in px on every piece so the legal pages' own p, ul and h2 rules do not
   reach in. */
footer.sitefoot { padding: 0; font-size: 15px; line-height: 1.6; }
.band { background: var(--panel); border-bottom: 1px solid var(--hairline); padding: 40px 0 44px; }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.band .say { flex: 1 1 320px; min-width: 0; }
.band h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(23px, 2.7vw, 29px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0; max-width: none; overflow-wrap: anywhere; }
.band .about { font-size: 14.5px; line-height: 1.6; color: var(--slate); max-width: 64ch; margin: 12px 0 0; }
.band .about a { font-weight: 600; color: var(--ink); }
.band .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.band .cta .btn { font-size: 15px; padding: 11px 22px; margin: 0; }
/* the columns are as wide as their longest link (the support address), so a
   link never wraps or runs past its column; the wordmark takes what is left */
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 28px clamp(40px, 6vw, 80px); align-items: start; padding: 44px 0 36px; }
.sitefoot .brand { justify-self: start; font-size: 18px; }
.fcol .fh { font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin: 0 0 8px; max-width: none; }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol a { display: inline-block; padding: 4px 0; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.fcol a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fcol a:active { color: var(--slate); }
.fcol a[aria-current] { color: var(--slate); }
.sitefoot .fnote { font-size: 12.5px; line-height: 1.6; color: var(--slate); max-width: 75ch; margin: 0 0 24px; }
.fend { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding: 20px 0 44px; }
.fend p { font-size: 13px; line-height: 1.6; color: var(--slate); margin: 0; max-width: none; }
/* Terms, Privacy and the 404 sit in a narrow column: the wordmark takes its
   own row there, as it does on every page at 860px and below */
.sitefoot.slim .fgrid { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 32px; }
.sitefoot.slim .brand { grid-column: 1 / -1; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  section { padding: 48px 0; }
  section.qsec { padding: 40px 0; }
  .nav { gap: 14px; }
  .nav .hide-sm { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .cards2, .withyou, .sec-stop .pair { grid-template-columns: 1fr; gap: 24px; }
  .fgrid { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 32px; }
  .sitefoot .brand { grid-column: 1 / -1; }
}
/* stack the comparison table: two columns of prose in a scroll box is where
   phone readers give up. 820, not 720: the table needs 760px and its box
   is 50px narrower than the window, so it only fits from 810 up. */
@media (max-width: 820px) {
  table.vs { min-width: 0; }
  table.vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.vs tr, table.vs th, table.vs td { display: block; width: auto; }
  /* the row header carries width: 18% for the desktop grid and that rule
     outranks the line above, which left a narrow grey box wrapping one word
     per line beside empty space on phones. Full-width band above the cells. */
  table.vs tbody th { display: block; width: auto; border-bottom: none; padding-bottom: 8px; }
  table.vs td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
}
/* the quiet link goes first: with it, the wordmark and both buttons need up
   to 696px (the portal pages and the records guide have the longest link) */
@media (max-width: 700px) {
  .nav .homediv, .nav .hide-sm { display: none; }
}
@media (max-width: 640px) {
  table.fees { min-width: 0; }
  table.fees thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.fees tr, table.fees td { display: block; width: auto; }
  table.fees tr { border-bottom: 1px solid var(--hairline); }
  table.fees tr:last-child { border-bottom: none; }
  table.fees td { border-bottom: none; padding: 6px 16px; }
  table.fees td:first-child { padding-top: 14px; }
  table.fees td:last-child { padding-bottom: 14px; }
  table.fees td.cmp { white-space: normal; }
  table.fees td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
  /* footer: one column, and each link a full 44px row for thumbs */
  .fgrid, .sitefoot.slim .fgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px 0 28px; }
  .fcol .fh { margin-bottom: 0; }
  .fcol a { padding: 10px 0; }
  .band { padding: 32px 0 36px; }
}
/* phones: the header keeps the wordmark and the one filled button (44px
   tall); the ghost button comes back at 521px. The tool pages drop the FREE
   TOOL tag and let their one link wrap, so it is never cut off. */
@media (max-width: 520px) {
  .nav .btn.ghost, .nav .tool-tag { display: none; }
  .nav .btn.sm { padding: 10px 12px; font-size: 13.5px; }
  .nav .back { white-space: normal; text-align: right; line-height: 1.2; }
  .steps { grid-template-columns: 1fr; }
  .hero h1 br { display: none; }
}
/* the narrowest phones (320, 344): "Book a walkthrough" does not fit beside
   the wordmark, so the button reads "Walkthrough" */
@media (max-width: 364px) {
  .nav { gap: 10px; }
}
@media (max-width: 350px) {
  .nav .hide-xs { display: none; }
  .nav .btn.sm::first-letter { text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* Contact link fallback: "Email copied" note */
.copy-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;z-index:1000;
  background:var(--navy,#14213d);color:#fff;font-size:.9rem;padding:10px 16px;border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100% - 32px)}
.copy-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.copy-toast{transition:none}}