/* Styles for the public calculator pages.
 *
 * EVERY VALUE BELOW IS THE APP'S. These pages used to carry a third palette — #2a2723 ink on
 * #f4f1ea paper with a #b4813c amber — that matched neither the product nor the emails, so the two
 * surfaces a prospect sees before and after signing up looked like different companies. The values
 * here are copied from `lib/brand.ts`, and `lib/brand.test.ts` parses this file and fails if they
 * ever diverge. `tools.css` is plain CSS served statically, so a build-time import is not available;
 * an asserted copy is the next best thing and it is checked on every CI run.
 *
 * TYPE IS DELIBERATELY NOT A FULL MATCH, and that is a decision rather than an oversight. The app
 * pulls three families from Google. These pages are entered cold from a search result and judged on
 * how fast the answer appears, so only the DISPLAY face loads here — the wordmark, the headings and
 * the one big result figure, which is where nearly all the brand signal lives. Body copy and labels
 * stay on the device's own fonts, so the bulk of the text cannot shift while a webfont arrives.
 *
 * One shared file rather than inline styles per page: three copies of this would drift, and it is
 * cached across the set once a visitor opens a second calculator.
 */

:root {
  --paper: #f4f6f8;
  --card: #ffffff;
  --ink: #171a1f;
  --sub: #5a6472;
  --line: #e2e6ea;
  --amber: #ffb400;
  --amber-bg: #fff7e0;
  --green: #2b7455;

  /* The app's two radii: `rounded-2xl` cards, smaller controls. */
  --radius: 16px;
  --radius-sm: 10px;

  /* The app's own button — asphalt, not amber. White on #ffb400 is 1.8:1 and illegible, which is
     why the product never made an amber button and why this page no longer has one either.
     #171a1f with white is ~16:1. */
  --cta-bg: #171a1f;
  --cta-fg: #ffffff;

  /* Amber as TEXT has to be darker than amber as a fill. The brand #ffb400 on paper is ~1.6:1 —
     fine for a 3px rule or a filled chip, hopeless for a link. Borders and fills keep --amber;
     anything a person READS, and the focus ring, use this. It is the app's `amberInk`. */
  --amber-text: #8a6100;

  /* The emphasis surface: the tile the brand mark sits in. The app's `panel`, dark in both themes. */
  --panel: #171a1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1216;
    --card: #171a1f;
    /* Not pure white: #ffffff on a dark page haloes on OLED. */
    --ink: #e8ebee;
    --sub: #9aa3ae;
    --line: #2a3038;
    /* Amber is the CONSTANT — the same #ffb400 in both themes. This used to lighten to #ffc133;
       design turn 13a fixes it so the brand colour is the one thing that does not move. */
    --amber: #ffb400;
    --amber-bg: #2a2110;
    --green: #5fcf9b;

    /* The button flips with the surface: a light control on a dark page, as in the app. */
    --cta-bg: #e8ebee;
    --cta-fg: #12161b;

    /* On the dark surface the amber is already high-contrast, so text and brand share it. */
    --amber-text: #ffb400;
    --panel: #1e232a;
  }
}

* {
  box-sizing: border-box;
}

/* The one webfont these pages load, and only where it earns its request.
 *
 * `Arial Narrow` leads the fallback because Barlow Condensed is condensed: falling back to a
 * normal-width face would reflow every heading when the webfont swaps in, which is layout shift on
 * the pages Google actually ranks. Measured on this page's h1 at 42px/700 — Barlow 440px, Arial
 * Narrow 482px, plain Arial 588px. The narrow fallback turns a 34% reflow into a 9.5% one.
 *
 * Only weight 700 is requested, because 700 is the only weight anything here uses: the wordmark,
 * h1, h2 and the result figure are all bold. */
:root {
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.65 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── the primary navigation ──────────────────────────────────────────────────────────────────
   The same markup every page carries — `scripts/_lib/site-chrome.mjs` renders it and
   `lib/site-chrome.test.ts` holds the copies to it. `landing.css` styles the identical block for `/`;
   the values here match it, on this sheet's own tokens. Body copy on these pages is the device
   font, so the links inherit it. Not sticky, for the reason landing.css gives. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand-mark {
  background: var(--panel);
  border-radius: 6px;
  padding: 6px;
  display: inline-flex;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}
/* The mark alone below 375px, and the wordmark stays in the accessibility tree — the same rule
   landing.css carries, for the same reason: the SVG is aria-hidden, so this span is the link's name. */
@media (max-width: 374px) {
  .brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}
.nav .btn-solid {
  background: var(--cta-bg);
  color: var(--cta-fg);
}
.nav .btn-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--amber-text);
}
.nav .btn {
  white-space: nowrap;
}
.nav .nav-signin {
  display: none;
}
.nav-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker {
  display: none;
}
/* The FAQ rules further down give every <details> a bottom rule, an open-state padding, and a "+"
   or "−" before its summary. The menu is a <details> too and wants none of that. The open-state
   selectors below match the FAQ's specificity, which is what stops the FAQ rule winning by order. */
.nav-menu,
.nav-menu[open] {
  border-bottom: 0;
  padding-bottom: 0;
}
.nav-menu > summary,
.nav-menu[open] > summary {
  padding: 0;
}
.nav-menu > summary::before,
.nav-menu[open] > summary::before {
  content: none;
}
.nav-menu > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.nav-menu > ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.nav-menu > ul a:hover {
  background: var(--paper);
}
/* The legal pages carry links only — no menu, no buttons — so the row simply wraps on a phone. */
.nav--minimal .nav-links {
  display: flex;
  flex-wrap: wrap;
}
/* 900px, NOT THE LANDING PAGE'S 768: these pages are a 780px column, and the five links plus two
   buttons need about 720px of it. Below 900 the menu carries the links and the row is brand, the
   account button and the menu — the same shape a phone gets. */
@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
  .nav .nav-signin {
    display: inline-flex;
  }
  .nav-menu {
    display: none;
  }
}

/* ── the footer's link groups ──────────────────────────────────────────────────────────────── */
.site-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.site-links a {
  color: var(--sub);
}

header.site {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
header.site a.brand {
  display: inline-block;
  font-family: var(--font-display);
  /* WCAG 2.2 SC 2.5.8: a standalone link needs a 24x24 target. Inline links inside a sentence are
     exempt, but this one sits alone in the header. */
  min-height: 24px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--amber-text);
  text-decoration: none;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.6vw, 42px);
  line-height: 1.12;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
h2 {
  font-family: var(--font-display);
  font-size: 25px;
  margin: 40px 0 12px;
  letter-spacing: -0.005em;
}
h3 {
  font-size: 16px;
  margin: 22px 0 6px;
}
p {
  margin: 0 0 14px;
}
.lede {
  font-size: 18px;
  color: var(--sub);
}

a {
  color: var(--amber-text);
}

/* ── calculator ───────────────────────────────────────────────────────────── */

.calc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin: 26px 0;
}
.fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
label .hint {
  display: block;
  font-weight: 400;
  color: var(--sub);
  font-size: 12px;
  margin-top: 2px;
}

/* `min-height` RATHER THAN TRUSTING THE PADDING, and CI is what proved it necessary. 11px of
   padding around 16px type measured 45px on Windows and 42px on the Linux runner — the height came
   from the font's line box, so the same stylesheet produced a control that cleared the 44px floor on
   one platform and missed it on the other. A thumb target that depends on which font the device
   resolved is not a target size at all, and the Linux number is the one closer to a real phone.
   `box-sizing: border-box` is set at the top of this file, so 44 is the outer height. */
input,
select {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
}
input:focus,
select:focus {
  outline: 2px solid var(--amber-text);
  outline-offset: 1px;
}

.result {
  margin-top: 22px;
  padding: 20px;
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
}
.result .big {
  font-family: var(--font-display);
  font-size: clamp(36px, 7.6vw, 50px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--amber-text);
  font-variant-numeric: tabular-nums;
}
.result .big-label {
  font-size: 13px;
  color: var(--sub);
  margin-top: 4px;
}

/* A definition list, not divs: each row is a label/value pair, which is what dl describes and what
   a screen reader announces correctly. */
.breakdown {
  margin: 18px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  font-size: 14.5px;
}
.breakdown dt {
  margin: 0;
}
.breakdown dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.breakdown > div.total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
}

/* ── content blocks ───────────────────────────────────────────────────────── */

.example,
.method {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 18px 0;
}

/* THE PADDING IS ON THE SUMMARY, NOT THE DETAILS, and the row is the same height either way.
   `<summary>` is what toggles: a click in the parent's padding does nothing, so with 13px on the
   `<details>` the tappable box was the text alone — 26.4px for a single-line question, against the
   44px floor `src/index.css` applies by pointer type. Moving the same 13px onto the summary makes
   the row itself the target at 52.4px and changes no measurement on the page, because the closed
   height was already 13 + 26.4 + 13. The `[open]` rule puts back the gap between the answer and the
   rule below, which the parent's bottom padding used to provide. */
details {
  border-bottom: 1px solid var(--line);
}
details[open] {
  padding-bottom: 13px;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 13px 0;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "+ ";
  color: var(--amber-text);
  font-weight: 700;
}
details[open] summary::before {
  content: "− ";
}
details p {
  margin: 10px 0 0;
  color: var(--sub);
}

/* ── the pricing page's two plan cards ─────────────────────────────────────── */
.plan-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 22px 0 0;
}
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
}
.plan h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.plan-price {
  margin: 0 0 12px;
  color: var(--sub);
}
.plan-figure {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.plan ul {
  margin: 0 0 16px;
  padding-left: 20px;
  flex: 1;
}
.plan li {
  margin: 6px 0;
}
.plan .cta {
  margin: 0;
}
/* The sentence `signup-pause.ts` puts where a card's button was while there is nothing to buy. */
.plan-note {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}
.clauses li {
  margin: 10px 0;
}

.cta {
  display: block;
  background: var(--cta-bg);
  color: var(--cta-fg);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  margin: 12px 0 6px;
}
.cta-note {
  font-size: 13px;
  color: var(--sub);
  text-align: center;
  margin: 0 0 8px;
}

.links {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 14px 0 0;
}
.links a {
  display: block;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}
.links a span {
  display: block;
  font-weight: 400;
  color: var(--sub);
  font-size: 13px;
  margin-top: 2px;
}

footer.site a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

footer.site {
  margin: 44px 0 0;
  padding: 20px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--sub);
}

.disclaimer {
  font-size: 13px;
  color: var(--sub);
}

@media (prefers-reduced-motion: no-preference) {
  .cta,
  .links a {
    transition: opacity 0.15s ease;
  }
  .cta:hover,
  .links a:hover {
    opacity: 0.85;
  }
}

/* ── accessibility affordances ─────────────────────────────────────────────── */

/* Visible only to assistive tech. Used for headings that structure the page for a screen reader
   without adding visual noise a sighted reader does not need. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.2 SC 2.4.1. Off-screen until focused, so a keyboard user reaches the calculator without
   tabbing the whole header first. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--cta-bg);
  color: var(--cta-fg);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}

/* ── split-rate notice, rate table, sources ────────────────────────────────── */

.alert {
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}

/* Wide content scrolls inside its own container so the PAGE never scrolls horizontally — at 320px
   the rate table is wider than the viewport. */
.table-scroll {
  overflow-x: auto;
  margin: 14px 0;
  -webkit-overflow-scrolling: touch;
}
table.rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 340px;
}
table.rates th,
table.rates td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}
table.rates th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sub);
}
table.rates tbody tr:last-child td {
  border-bottom: 0;
}

.sources {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14.5px;
}
.sources ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
/* Comfortable spacing so each citation link clears the 24px target height. */
.sources li {
  margin-bottom: 10px;
  line-height: 1.7;
}

/* The focus ring must be visible on every interactive element, including links and details
   summaries — not just the inputs that got it explicitly. */
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── the legal pages ───────────────────────────────────────────────────────────
   Terms and Privacy reuse this stylesheet rather than carrying their own, for the same reason the
   three calculators share it: a fourth and fifth copy of the palette would drift, and these pages
   are the ones a driver is most likely to read carefully. The only thing they add is the
   subprocessor table, which needs to stay readable at 360px — so it scrolls inside its own box
   rather than forcing the page sideways. */
.subprocessors {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.subprocessors th,
.subprocessors td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.subprocessors thead th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.subprocessors th[scope="row"] {
  white-space: nowrap;
  padding-right: 1rem;
}
@media (max-width: 640px) {
  /* Three columns of prose do not fit a phone. Scroll the TABLE, never the page.
     THE SCROLLING MOVED TO A WRAPPER, and the rule this replaces was wrong twice over. It read
     `.subprocessors { display: block; overflow-x: auto }`, which made the <table> element itself
     the scroll container:

       1. A scroll container that cannot be focused cannot be scrolled by a keyboard — axe's
          `scrollable-region-focusable`, serious, and it means a keyboard-only or switch user
          simply cannot read the right-hand columns of a privacy disclosure. This went unseen
          because `a11y.guard.ts` only ever swept `/` and the three calculators.
       2. `display: block` on a <table> DROPS ITS SEMANTICS. A screen reader stops announcing rows,
          columns and header associations — so "Stripe / payment processing / email address" is
          read as three loose strings, on the one table whose whole purpose is saying which company
          receives which field. axe does not flag this, and it is the worse of the two.

     `.table-scroll` is the pattern the calculator pages already use for the rate table: a focusable
     `role="region"` wrapper scrolls, and the table stays a table. `min-width` on the cells is what
     forces the overflow the wrapper then handles. */
  .subprocessors td {
    min-width: 14rem;
  }
}

/* THE SIGNUP-PAUSE NOTICE, on every page that offers an account.
   Inserted by `src/landing/signup-pause.ts` only when the control plane says signups are off, so it
   is absent from the served document and costs nothing on the ordinary path. `landing.css` carries
   the same rule for `/`; these pages load this sheet instead. `--amber-bg` and `--amber-text` are
   already defined for both themes above, which is what stops this reading as light type on a light
   ground when a visitor's system is dark. */
#signup-pause {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.75rem 1.25rem;
  margin: 0 0 1.5rem;
  text-align: center;
  text-wrap: balance;
}