/* The public site (DESIGN.md): every page on the marketing layout has body.site. Tokens, base type,
   the header and footer, buttons, the pricing calculator (shared with the home page), and the
   pages that have no sheet of their own: pricing, the legal pages and the error pages. The home
   page's own sections live in home.css (body.home); the free tools in creator.css and checker.css;
   the guides in guides.css. This file loads last, so rules meant only for the inner pages say
   body.site:not(.home), and broad element defaults sit in :where() to stay easy to override. */

/* The fallback face is sized to Manrope's metrics so the swap doesn't move text (seo_audit §8.3;
   values estimated from Manrope's vertical metrics and average width against Arial). */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104.5%;
  ascent-override: 102%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}

body.site {
  --ink: #141a2e;
  --ink-2: #1e2742;
  --ink-3: #2c3658;
  --on-ink: #c3c9db;
  --on-ink-2: #939bb5;
  --paper: #ffffff;
  --ground: #f3f4f8;
  --field: #f6f7fa;
  --line: #e2e5ee;
  --line-2: #cbd0dd;
  --text: #141a2e;
  --text-2: #475071;
  --text-3: #5f6784;
  --yellow: #efa608;
  --yellow-deep: #cf8507;
  --yellow-wash: #fdf0d2;
  --cream: #fdf5e4;
  --cream-2: #f5ead3;
  --coral: #f7967a;
  --red: #e2432c;
  --green: #487541;
  --green-ink: #2f5a2b;
  --green-wash: #e6f0e3;
  --danger: #c8342b;
  --danger-ink: #8a231c;
  --danger-wash: #fceaea;
  --sheet: 0 1px 2px rgb(20 26 46 / 0.06), 0 30px 60px -28px rgb(8 11 22 / 0.55);
  --lift: 0 12px 28px -18px rgb(20 26 46 / 0.4);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the placeholder tokens (application.css) that older rules still read, mapped to the palette */
  --muted: var(--text-2);
  --amber: var(--yellow);
  --amber-deep: var(--yellow-deep);
  --mint: var(--green);
  --bg: var(--field);
  --radius: 14px;

  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: normal;
  caret-color: var(--yellow-deep);
  -webkit-font-smoothing: antialiased;
}
/* the page ends on the footer's colour, not the old grey root background */
html:has(body.site) { background: #f5ead3; }
body.site ::selection { background: var(--yellow-wash); color: var(--ink); }
body.site .hero-dark ::selection, body.site .final ::selection, body.site .calc ::selection { background: var(--ink-3); color: var(--paper); }
body.site :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
body.site .site-header :focus-visible, body.site .hero-dark :focus-visible, body.site .final :focus-visible, body.site .calc :focus-visible { outline-color: var(--yellow); }
body.site .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
body.site h1, body.site h2, body.site h3, body.site p, body.site li, body.site summary, body.site dt, body.site dd,
body.site td, body.site th, body.site legend, body.site label { overflow-wrap: break-word; hyphens: auto; }
body.site a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
body.site .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Defaults the public pages took from the placeholder sheets until Oct 23, 2026, kept at their old
   specificity: the margin under a hint, the Paddle checkout page's narrow column, and the
   narrower column of the free tools. */
:where(body.site) .hint { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-3); }
:where(body.site) .auth { max-width: 460px; margin: 0 auto; }
body.tool-page main.wrap { max-width: 908px; }

/* ---------- Header ---------- */
body.site .site-header { background: var(--ink); color: var(--paper); }
body.site .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 72px; gap: 12px 24px; }
body.site .brand-logo { display: block; border-radius: 6px; text-decoration: none; }
body.site .brand-logo img { display: block; height: 46px; width: auto; }
body.site .site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 auto 0 12px; }
body.site .site-nav a { color: var(--on-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
body.site .site-nav a:hover { color: var(--paper); }
body.site .account-links { display: flex; align-items: center; gap: 16px; }
body.site .account-links a:not(.button) { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
body.site .account-links a:not(.button):hover { color: var(--paper); }
/* Language menu: a globe button with the current code; the list names each language in its own words.
   No flags: a flag is a country, and English, French or Dutch belong to several. */
body.site .lang-menu { position: relative; }
body.site .lang-menu summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--on-ink); font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; list-style: none; }
body.site .lang-menu summary::-webkit-details-marker { display: none; }
body.site .lang-menu summary:hover, body.site .lang-menu[open] summary { background: var(--ink-3); color: var(--paper); }
body.site .lang-menu summary .icon { width: 17px; height: 17px; }
body.site .lang-menu summary .chevron { width: 14px; height: 14px; transition: transform 0.15s; }
body.site .lang-menu[open] .chevron { transform: rotate(180deg); }
body.site .lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(20 26 46 / 0.18); }
body.site .lang a { display: flex; align-items: center; justify-content: space-between; gap: 16px; opacity: 1; margin: 0; padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
body.site .lang a:hover { background: var(--field); }
body.site .lang a.active { border: 0; background: var(--yellow-wash); color: var(--text); }
body.site .lang-code { color: var(--text-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Footer ---------- */
body.site .site-footer { background: var(--cream-2); border-top: 0; color: var(--text-2); font-size: 14px; }
body.site .site-footer .wrap { padding-top: 32px; padding-bottom: 40px; }
body.site .site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
body.site .site-footer nav a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-2); font-weight: 600; text-decoration: none; }
body.site .site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
body.site .site-footer p { margin: 0; }

/* ---------- Buttons and links ---------- */
body.site .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px;
  background: var(--yellow); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 750; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out;
}
body.site .button:hover { background: var(--yellow-deep); }
body.site .button:active { transform: translateY(1px); }
body.site .button.small { min-height: 38px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
body.site .button.ghost { background: transparent; color: var(--paper); border-color: rgb(255 255 255 / 0.32); }
body.site .button.ghost:hover { background: var(--ink-2); border-color: rgb(255 255 255 / 0.6); }
body.site .button.secondary { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
body.site .button.secondary:hover { background: var(--field); border-color: var(--ink); }
body.site .button:disabled, body.site .button[disabled] { opacity: 0.6; cursor: progress; transform: none; }
body.site .arrow-link { display: inline; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); }
body.site .arrow-link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
body.site .arrow-link:hover { text-decoration-color: currentColor; }
body.site .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
body.site .hero-dark { background: var(--ink); color: var(--paper); }
body.site .hero-dark h1 { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Inner pages: type ---------- */
body.site:not(.home) main.wrap { padding-top: 56px; padding-bottom: 96px; }
body.site:not(.home) h1 {
  max-width: 22ch; margin: 0 0 16px; color: var(--ink);
  font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
}
:where(body.site:not(.home) main) h2 { margin: 56px 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
:where(body.site:not(.home) main) h3 { margin: 32px 0 8px; font-size: 1.1rem; font-weight: 750; line-height: 1.3; letter-spacing: -0.01em; }
:where(body.site:not(.home) main) :is(p, ul, ol) { margin: 0 0 14px; }
:where(body.site:not(.home) main) :is(ul, ol) { padding-left: 22px; }
:where(body.site:not(.home) main) li { margin: 6px 0; }
:where(body.site:not(.home) main) li::marker { color: var(--text-3); }
:where(body.site:not(.home) main) a { color: var(--ink); font-weight: 650; text-decoration-color: var(--line-2); }
:where(body.site:not(.home) main) a:hover { text-decoration-color: currentColor; }
:where(body.site:not(.home) main) code { font: 500 0.88em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
:where(body.site:not(.home) main) strong { font-weight: 750; color: var(--ink); }
body.site:not(.home) .lead { max-width: 62ch; margin: 0 0 16px; color: var(--text-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }
body.site:not(.home) .note { max-width: 70ch; color: var(--text-3); font-size: 14.5px; line-height: 1.55; }
body.site:not(.home) .hint { color: var(--text-3); font-size: 14px; line-height: 1.5; }
/* A short note in the flow (draft legal texts, the maker's example): a pip and a line, no tinted band. */
body.site:not(.home) .notice:not(.error-summary) {
  display: flex; align-items: baseline; gap: 10px; max-width: 70ch; margin: 0 0 24px; padding: 12px 16px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--text); font-size: 14.5px; font-weight: 600; line-height: 1.5;
}
body.site:not(.home) .notice:not(.error-summary)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translateY(-1px); }

/* Fields in the free tools and the calculators (DESIGN.md Inputs): 48px, field fill, no border
   until hover; focus is an ink border on paper. Errors are a danger border and a line of text. */
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) label { display: block; margin: 14px 0 6px; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="file"]), select, textarea) {
  width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: 10px;
  background-color: var(--field); color: var(--text); font: inherit; font-size: 16px; font-weight: 550; line-height: 1.3;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23475071' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 16px center; background-size: 12px 8px; background-repeat: no-repeat;
}
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input, select, textarea):hover { border-color: var(--line-2); }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="file"]), select, textarea):focus { outline: none; border-color: var(--ink); background-color: var(--paper); }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); background-color: var(--paper); }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) :is(input[type="radio"], input[type="checkbox"]) { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
:where(body.site:not(.home)) :is(.creator-form, .checker-form, .calculator) ::placeholder { color: var(--text-3); opacity: 1; }
body.site button.link { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-weight: 650; text-decoration: underline; text-decoration-color: var(--line-2); cursor: pointer; }
body.site button.link:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Paper panels, tables and the FAQ, shared by the tools and the guides */
body.site:not(.home) .panel { margin: 16px 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
:where(body.site:not(.home) main) table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
:where(body.site:not(.home) main) th, :where(body.site:not(.home) main) td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
:where(body.site:not(.home) main) thead th { padding-top: 0; border-bottom: 1.5px solid var(--ink); color: var(--text-2); font-size: 13px; font-weight: 700; vertical-align: bottom; }
:where(body.site:not(.home) main) tbody th { font-weight: 700; color: var(--ink); }
:where(body.site:not(.home) main) :is(td.num, th.num) { text-align: right; font-variant-numeric: tabular-nums; }
:where(body.site:not(.home) main) caption { caption-side: top; padding: 0 0 8px; color: var(--text-3); font-size: 14px; text-align: left; }
body.site:not(.home) .table-scroll { overflow-x: auto; margin: 20px 0; }
body.site:not(.home) .table-scroll > table { margin: 0; }

body.site:not(.home) .faq { margin-top: 64px; }
body.site:not(.home) .faq > h2 { margin: 0 0 16px; }
body.site:not(.home) .faq details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; }
body.site:not(.home) .faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
body.site:not(.home) .faq summary {
  position: relative; display: block; padding: 18px 44px 18px 0; list-style: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 750; line-height: 1.4; color: var(--ink);
}
body.site:not(.home) .faq summary::-webkit-details-marker { display: none; }
body.site:not(.home) .faq summary::before, body.site:not(.home) .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform 0.2s var(--ease); }
body.site:not(.home) .faq summary::after { transform: rotate(90deg); }
body.site:not(.home) .faq details[open] summary::after { transform: rotate(0deg); }
body.site:not(.home) .faq summary:hover { color: var(--ink-3); }
body.site:not(.home) .faq details p { max-width: 64ch; margin: 0; padding: 0 0 22px; color: var(--text-2); line-height: 1.65; }

/* ---------- Ink page hero (pricing) ---------- */
body.site .page-hero { padding: 64px 0 120px; }
body.site .page-hero h1 { max-width: 18ch; margin: 0; color: var(--paper); font-size: clamp(2.15rem, 5.2vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; }
body.site .page-hero .lead { max-width: 46ch; margin: 20px 0 0; color: var(--cream); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }

/* ---------- Pricing ---------- */
body.pricing-page main.wrap { padding-top: 0; }
body.site .price-band {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin: -72px 0 0; padding: 28px; border-radius: 24px; background: var(--yellow); color: var(--ink);
}
body.site .price-band .plan { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 28px; border: 0; border-radius: 16px; background: var(--paper); }
body.site .price-band .plan h2 { margin: 0; color: var(--text-2); font-size: 15px; font-weight: 750; letter-spacing: 0; }
body.site .price-band .plan-for { margin: 4px 0 18px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
body.site .price-band .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; color: var(--text-2); font-size: 14.5px; font-weight: 600; }
body.site .price-band .plan-price .amount { color: var(--ink); font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
body.site .price-band .plan-yearly { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; font-weight: 600; }
body.site .price-band .plan ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
body.site .price-band .plan li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 600; line-height: 1.45; }
body.site .price-band .plan li .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
body.site .price-band .plan-cta { margin: auto 0 0; padding-top: 24px; }
body.site .price-band .plan-cta .button { width: 100%; }
body.site .price-band .calc { margin-top: 4px; }
body.site .price-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 40px 0 0; padding: 18px 0 0; border-top: 1.5px solid var(--ink); }
body.site .price-notes .note { margin: 0; color: var(--text-2); font-size: 15px; }
body.pricing-page .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; margin-top: 96px; }
body.pricing-page .faq > h2 { position: sticky; top: 24px; margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); }
body.pricing-page .faq-list { min-width: 0; }

/* ---------- The Team calculator (home pricing band and the pricing page) ---------- */
body.site .calc {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; gap: 20px 32px;
  padding: 22px 26px; border-radius: 18px; background: var(--ink); color: var(--paper);
}
body.site .calc[hidden] { display: none; }
body.site .calc-people { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
body.site .calc-people label { margin: 0; font-size: 14px; font-weight: 650; color: var(--on-ink); }
body.site .calc-people output { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
body.site .calc input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; padding: 0; border: 0; background: transparent; accent-color: var(--yellow); height: 28px; cursor: pointer; }
body.site .calc-interval { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 12px; background: var(--ink-2); }
body.site .calc-interval input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
body.site .calc-interval label { display: grid; place-items: center; min-height: 38px; margin: 0; padding: 0 16px; border-radius: 9px; color: var(--on-ink); font-size: 14.5px; font-weight: 700; cursor: pointer; }
body.site .calc-interval label:hover { color: var(--paper); }
body.site .calc-interval input:checked + label { background: var(--paper); color: var(--ink); }
body.site .calc-interval input:focus-visible + label { outline: 2px solid var(--yellow); outline-offset: 2px; }
body.site .calc-total { display: grid; justify-items: end; margin: 0; text-align: right; }
body.site .calc-label { font-size: 13.5px; font-weight: 650; color: var(--on-ink); }
body.site .calc-total strong { color: var(--paper); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.site .calc-vat { font-size: 13px; color: var(--on-ink); }

/* ---------- Legal pages: a statement to read ---------- */
/* LegalHelper#legal_document: the h1 and intro, then a sticky table of contents beside the text. */
body.site .legal-layout > .notice { margin-bottom: 32px; }
body.site section.legal { font-size: 16px; line-height: 1.7; }
body.site section.legal > :not(.legal-columns) { max-width: 70ch; }
body.site:not(.home) section.legal > h1 { max-width: 20ch; }
body.site section.legal > h1 + p { color: var(--text-3); font-size: 14.5px; font-weight: 600; }
body.site .legal-columns { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 70ch); gap: 32px 64px; align-items: start; margin-top: 40px; }
body.site .legal-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 4px 4px 0; font-size: 14px; line-height: 1.4; }
body.site .legal-toc-label { margin: 0 0 8px; color: var(--text-2); font-size: 13px; font-weight: 700; }
body.site .legal-toc ol { margin: 0; padding: 0; list-style: none; }
body.site .legal-toc > ol { border-left: 1.5px solid var(--line-2); }
body.site .legal-toc li { margin: 0; }
body.site .legal-toc a { display: block; margin-left: -1.5px; padding: 6px 0 6px 14px; border-left: 1.5px solid transparent; color: var(--text-2); font-weight: 650; text-decoration: none; }
body.site .legal-toc ol ol a { padding: 3px 0 3px 26px; font-weight: 500; font-size: 13.5px; }
body.site .legal-toc a:hover { border-left-color: var(--ink); color: var(--ink); }
body.site .legal-text > :first-child { margin-top: 0; }
body.site section.legal h2 { margin: 48px 0 12px; padding-top: 18px; border-top: 1.5px solid var(--ink); font-size: 1.3rem; letter-spacing: -0.015em; scroll-margin-top: 24px; }
body.site .legal-text > h2:first-child { margin-top: 0; }
body.site section.legal h3 { margin: 28px 0 6px; font-size: 1.05rem; scroll-margin-top: 24px; }
body.site section.legal li { margin: 8px 0; }
body.site section.legal table { margin: 16px 0 24px; font-size: 14.5px; }
body.site section.legal table.stack-pairs th { width: 9rem; padding-right: 20px; }

/* ---------- Error pages ---------- */
body.site main.wrap:has(> .error-page) { display: grid; align-content: center; min-height: calc(100vh - 260px); }
body.site .error-page { display: grid; justify-items: center; max-width: 36rem; margin: 0 auto; padding: 24px 0 32px; text-align: center; }
body.site .error-roo { display: block; width: 220px; height: auto; margin: 0 0 8px; }
body.site .error-code { margin: 0 0 6px; color: var(--text-3); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
body.site:not(.home) .error-page h1 { max-width: 16ch; margin: 0 0 12px; }
body.site .error-page .lead { margin: 0 0 28px; }
body.site .error-page p:last-child { margin: 0; }

/* ---------- The closing call to action (pages/home/_final): the home page (the guides and hubs end on guides/_close) ---------- */
body.site .final {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 40px;
  padding: 56px 56px 0; border-radius: 24px; background: var(--ink); color: var(--paper); overflow: hidden;
}
body.site .final-text { padding-bottom: 56px; }
body.site .final h2 { max-width: 16ch; font-size: clamp(1.9rem, 4vw, 3rem); }
body.site:not(.home) .final h2 { margin: 0; }
body.site .final .actions { margin: 28px 0 0; }
body.site .final-line { margin: 14px 0 0; color: var(--on-ink); }
body.site .final-roo { display: block; width: 220px; height: auto; margin: 0 8px 0 0; transform: scaleX(-1); }
/* picture.mascot is display: contents (base.css); here its <source> children would become grid items and
   push the kangaroo into a second row under the text, doubling the block's height. The wave pose faces
   right; mirrored, it faces the text. */
body.site .final picture.mascot { display: block; }

@media (prefers-reduced-motion: reduce) {
  body.site *, body.site *::before, body.site *::after { transition: none !important; animation: none !important; }
}

/* Laptop and tablet */
@media (max-width: 1080px) {
  body.site .final { grid-template-columns: minmax(0, 1fr); padding: 36px 22px 0; border-radius: 20px; }
  body.site .final-text { padding-bottom: 0; }
  body.site .final .actions .button { width: 100%; }
  body.site .final-roo { width: 160px; margin: -8px 0 0 0; }
  body.site .final picture.mascot { justify-self: end; }
  body.site .calc { grid-template-columns: minmax(0, 1fr) auto; }
  body.site .calc-total { grid-column: 1 / -1; justify-items: start; text-align: left; }
  body.pricing-page .faq { grid-template-columns: minmax(0, 1fr); }
  body.pricing-page .faq > h2 { position: static; }
  body.site .legal-columns { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 32px; }
  body.site .legal-text { max-width: 70ch; }
  body.site .legal-toc { position: static; max-height: none; overflow: visible; padding: 16px 0 0; border-top: 1.5px solid var(--ink); }
  body.site .legal-toc > ol { columns: 2 16rem; column-gap: 32px; border-left: 0; }
  body.site .legal-toc > ol > li { break-inside: avoid; }
  body.site .legal-toc a { margin: 0; padding: 5px 0; border: 0; }
  body.site .legal-toc ol ol a { padding: 2px 0 2px 14px; }
  body.site .legal-toc a:hover { text-decoration: underline; }
}

/* Phone */
@media (max-width: 760px) {
  body.site .wrap { padding: 0 16px; }
  /* phone header: logo and languages on one row, the page links on the next (they wrap, never
     hide), then the two account actions; Pricing and the free tools stay one tap away */
  body.site .site-header .wrap { min-height: 60px; gap: 10px 12px; padding-top: 8px; padding-bottom: 12px; }
  body.site .brand-logo img { height: 38px; }
  body.site .site-nav { order: 3; flex-basis: 100%; gap: 0 18px; margin: 0; }
  body.site .site-nav a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; }
  body.site .lang { order: 2; margin-left: auto; }
  body.site .account-links { order: 4; flex-basis: 100%; justify-content: space-between; }
  body.site .calc { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  body.site .calc-interval { justify-self: start; }
  body.site:not(.home) main.wrap { padding-top: 36px; padding-bottom: 64px; }
  body.site:not(.home) .panel { padding: 20px 16px; border-radius: 16px; }
  body.site .page-hero { padding: 40px 0 96px; }
  body.site .price-band { grid-template-columns: minmax(0, 1fr); margin-top: -64px; padding: 14px; border-radius: 20px; gap: 12px; }
  body.site .price-band .plan { padding: 22px 18px; }
  body.site .price-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.pricing-page .faq { margin-top: 64px; }
  body.site .legal-toc > ol { columns: 1; }
  body.site section.legal table.stack-pairs, body.site section.legal table.stack-pairs tbody, body.site section.legal table.stack-pairs tr,
  body.site section.legal table.stack-pairs th, body.site section.legal table.stack-pairs td { display: block; width: auto; }
  body.site section.legal table.stack-pairs th { padding: 10px 0 2px; border: 0; }
  body.site section.legal table.stack-pairs td { padding: 0 0 10px; }
  body.site section.legal h2 { margin-top: 40px; font-size: 1.2rem; }
  /* Legal tables become label/value rows (the labels come from the column headings). */
  body.site section.legal table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.site section.legal table.stack, body.site section.legal table.stack tbody, body.site section.legal table.stack tr, body.site section.legal table.stack td { display: block; width: 100%; }
  body.site section.legal table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  body.site section.legal table.stack tr:first-child { border-top: 1.5px solid var(--ink); }
  body.site section.legal table.stack td { padding: 2px 0; border: 0; }
  body.site section.legal table.stack td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 12.5px; font-weight: 700; }
  body.site section.legal table.stack td:first-child { color: var(--ink); font-weight: 700; }
  body.site .error-roo { width: 170px; }
}