/* SteerLog — the one stylesheet for every page (home, guides, tools, support, privacy, all locales).
   Was: index.html's inline <style> + css/sub.css (two drifting copies of the same tokens). */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url("/fonts/archivo-var.woff2") format("woff2"); }
  :root {
    --ember: #E85D2F;
    --ember-deep: #C44A22;
    --ember-ink: #A03D18;
    --paper: #F7F3EE;
    --night: #14110F;
    --night-soft: #1D1916;
    --ink: #1B1613;
    --muted-dark: #B5ACA4;
    --muted-light: #6E645B;
    --hairline-dark: #332C27;
    --hairline-light: #E8DFD5;
    /* type scale — seven steps, nothing else (L2). Same scale as css/sub.css. */
    --fs-caption: 13px;   /* eyebrows, labels, legal */
    --fs-small: 15px;     /* secondary copy, nav, chips */
    --fs-body: 17px;      /* body */
    --fs-lead: 20px;      /* hero sub, ledger rows, h3 */
    --fs-sub: 26px;       /* wordmark, totals */
    --fs-title: clamp(30px, 3.4vw, 40px);   /* every section title */
    --fs-display: clamp(44px, 6vw, 68px);   /* hero headline, the price */
    /* elevation — four tokens, nothing else (LW-18): raised (buttons), lift (button hover),
       hover (chip hover), overlay (the language bar). The phone drawings are device frames, not elevation. */
    --el-raised: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(120,40,10,.35), 0 2px 6px rgba(0,0,0,.25);
    --el-lift: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,40,10,.3), 0 6px 16px rgba(0,0,0,.28);
    --el-hover: 0 3px 10px rgba(27,22,19,.08);
    --el-overlay: 0 8px 24px rgba(0, 0, 0, .28);
    --bezel: 11px;   /* the phone frame's bezel, part of the device drawing */
    --radius-panel: 18px;   /* every floating panel: header glass, language dialog, suggest bar */
    /* the nav dock move (TASTE §4, T-008): one curve, one duration, for the header lift */
    --ease-dock: cubic-bezier(0.625, 0.05, 0, 1);
    --dur-dock: 0.35s;
    /* spacing scale — eight steps on a 4/8 grid (L3). */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 40px; --sp-7: 64px; --sp-8: 96px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  [id] { scroll-margin-top: var(--sp-5); }
  html { scroll-padding-top: var(--sp-8); }   /* anchors and focus land below the sticky header */
  body {
    font-family: "Archivo", -apple-system, sans-serif;
    background: var(--night);
    color: var(--paper);
    line-height: 1.6;
    font-size: var(--fs-body);
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5); }
  .num { font-variant-numeric: tabular-nums; }

  /* ---------- top bar ---------- */
  /* The header sticks. At the top of the page it sits flush on the night band; once the page
     leaves the top (lang.js adds .is-scrolled past 8 px) the band clears and the bar lifts into a
     floating glass panel. The ember rule scrolls away (top: -6px); the bar's box never changes
     size, so nothing below it moves. Only opacity and transform animate the panel. */
  .topbar { position: sticky; top: -6px; z-index: 15; border-top: 6px solid var(--ember); background: var(--night);
    transition: background-color var(--dur-dock) var(--ease-dock); }
  .topbar::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset-block: var(--sp-3); inset-inline: max(var(--sp-2), calc((100% - 1120px) / 2 + var(--sp-2)));
    border-radius: var(--radius-panel); background: var(--night);
    border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); box-shadow: var(--el-overlay);
    opacity: 0; transform: translateY(calc(-1 * var(--sp-2)));
    transition: opacity var(--dur-dock) var(--ease-dock), transform var(--dur-dock) var(--ease-dock); }
  .topbar:is(.is-scrolled, .is-open) { background-color: transparent; }
  .topbar:is(.is-scrolled, .is-open)::before { opacity: 1; transform: none; }
  /* glass only where the browser can blur AND mix the tint; elsewhere the panel stays solid night */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (color: color-mix(in srgb, red 50%, transparent)) { .topbar::before, .topbar.is-open .sitenav { background: color-mix(in srgb, var(--night) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } }
  @media (prefers-reduced-motion: reduce) {
    .topbar, .topbar::before, .navbtn path { transition: none; }
    .topbar::before { transform: none; }
  }
  .topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--sp-5); padding-bottom: var(--sp-5);
  }
  .topbar-inner { gap: var(--sp-5); }
  .topbar .brand { margin-inline-end: auto; }
  .brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
  .brand .mark { width: 34px; height: 34px; border-radius: 8px; display: block; }
  .brand .word { font-weight: 800; font-size: var(--fs-sub); letter-spacing: -0.5px; color: var(--paper); }
  .topbar nav { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-small); font-weight: 500; }
  .topbar nav a { color: var(--muted-dark); text-decoration: none; padding: var(--sp-3) 0; }
  .topbar nav a:hover, .topbar nav a:focus-visible { color: var(--ember); }
  .topbar .chip { white-space: nowrap; flex: none; text-decoration: none;
    color: #fff; background: var(--ember); font-weight: 700;
    padding: var(--sp-2) var(--sp-4); border-radius: 999px;
  }
  .topbar .chip:hover, .topbar .chip:focus-visible { color: #fff; background: #F0703F; }

  /* ---------- collapsed navigation: the hamburger and its glass menu ----------
     The full row needs ~1000 px in most languages (measured 2026-10-01, en 860, de 990) and up to
     ~1100 px in the longest (es, ro, hu, el, fr, uk, ru), so those collapse below 1120 instead of 1024.
     Brand, CTA and the menu button stay in the bar at every width; the five links and the language
     entry move into a panel under it. lang.js toggles .is-open / aria-expanded. */
  .navbtn { display: none; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    margin-inline-end: calc(-1 * var(--sp-2)); padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: var(--paper); cursor: pointer; }
  .navbtn:hover, .navbtn:focus-visible { background: color-mix(in srgb, var(--paper) 10%, transparent); }
  .navbtn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .navbtn path { transform-box: fill-box; transform-origin: center;
    transition: transform var(--dur-dock) var(--ease-dock), opacity var(--dur-dock) var(--ease-dock); }
  .navbtn[aria-expanded="true"] .nb-t { transform: translateY(5px) rotate(45deg); }
  .navbtn[aria-expanded="true"] .nb-m { opacity: 0; }
  .navbtn[aria-expanded="true"] .nb-b { transform: translateY(-5px) rotate(-45deg); }
  html.nav-open { overflow: hidden; scrollbar-gutter: stable; }
  /* on tablets the open menu is a dropdown under the button, not a full-width sheet */
  @media (min-width: 600px) { .topbar.is-open .sitenav { inset-inline-start: auto; width: 340px; } }
  /* the narrowest phones: a locale whose CTA would push the menu button off-screen shows its short label */
  @media (max-width: 359px) {
    .topbar .chip[data-short] .cta-l { display: none; }
    .topbar .chip[data-short]::after { content: attr(data-short); }
  }
  @media (max-width: 1023px) {
  .topbar .navbtn { display: inline-flex; }
  .topbar .sitenav { display: none; position: absolute; top: calc(100% - var(--sp-2)); z-index: 1;
    inset-inline: max(var(--sp-2), calc((100% - 1120px) / 2 + var(--sp-2)));
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--sp-5);
    max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--night); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
    border-radius: var(--radius-panel); box-shadow: var(--el-overlay); font-size: var(--fs-body); }
  .topbar.is-open .sitenav { display: flex; }
  .topbar .sitenav a, .topbar .sitenav a.langbtn { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3);
    min-height: 52px; padding: 0; color: var(--paper); font-size: var(--fs-body);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); }
  .topbar .sitenav a:last-child { border-bottom: 0; }
  .topbar .sitenav .langbtn .lb-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  }
  @media (min-width: 1024px) and (max-width: 1119px) {
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .navbtn { display: inline-flex; }
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav { display: none; position: absolute; top: calc(100% - var(--sp-2)); z-index: 1;
    inset-inline: max(var(--sp-2), calc((100% - 1120px) / 2 + var(--sp-2)));
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--sp-5);
    max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--night); border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
    border-radius: var(--radius-panel); box-shadow: var(--el-overlay); font-size: var(--fs-body); }
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar.is-open .sitenav { display: flex; }
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav a, html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav a.langbtn { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3);
    min-height: 52px; padding: 0; color: var(--paper); font-size: var(--fs-body);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); }
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav a:last-child { border-bottom: 0; }
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav .langbtn .lb-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  }
  /* the longest labels fit the 1120 px column with a tighter row */
  html:where(:lang(es), :lang(ro), :lang(hu), :lang(el), :lang(fr), :lang(uk), :lang(ru)) .topbar .sitenav { gap: var(--sp-4); }

  /* ---------- hero ---------- */
  .hero { padding: var(--sp-7) 0 0; overflow: hidden; position: relative; }
  .hero::before { content:""; position:absolute; top:0; right:-8%; width:min(60vw,760px); aspect-ratio:1;
    pointer-events:none; background: radial-gradient(closest-side, rgba(232,93,47,.16), rgba(232,93,47,.05) 48%, transparent 72%); }
  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: center; position: relative;
  }
  .kicker {
    font-size: var(--fs-caption); font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--ember);
  }
  h1 {
    font-weight: 800; font-size: var(--fs-display); line-height: 1.02;
    letter-spacing: -1.5px; margin-top: var(--sp-4);
  }
  h1 em { font-style: normal; color: var(--ember); }
  .beat { font-weight: 700; font-size: var(--fs-lead); margin-top: var(--sp-4); }
  .hero-sub {
    color: var(--muted-dark); font-size: var(--fs-lead); margin-top: var(--sp-5); max-width: 34em;
  }
  .cta-row { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
  .cta {
    display: inline-block; color: #fff;
    background: linear-gradient(180deg, #F0703F, var(--ember) 55%, var(--ember-deep));
    box-shadow: var(--el-raised);
    font-weight: 800; font-size: var(--fs-body); text-decoration: none;
    padding: var(--sp-4) var(--sp-5); border-radius: 999px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cta { transition: transform 120ms ease, background 120ms ease; }
  }
  .cta:hover, .cta:focus-visible { background: linear-gradient(180deg, #F5824F, #F0703F 55%, #D6521F);
    transform: translateY(-1px);
    box-shadow: var(--el-lift); }
  .cta-fine { color: var(--muted-dark); font-size: var(--fs-small); }
  .trustline { margin-top: var(--sp-4); color: var(--muted-dark); font-size: var(--fs-small); max-width: 52ch; }
  .updated { margin-top: var(--sp-2); color: var(--muted-dark); font-size: var(--fs-caption); }
  .whatsnew { background: var(--paper); color: var(--ink); padding: var(--sp-7) 0; border-top: 1px solid var(--hairline-light); }
  .whatsnew h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px; color: var(--ember-deep); }
  .whatsnew p.lead { color: #40382F; margin-top: var(--sp-3); max-width: 60ch; }
  .whatsnew ul { list-style: none; margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3) var(--sp-6); }
  .whatsnew li { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline-light); }
  .whatsnew li strong { display: block; font-weight: 700; }
  .whatsnew li span { color: #40382F; font-size: var(--fs-small); }
  .whatsnew-prev { border-top: 1px solid var(--hairline-light); margin-top: var(--sp-6); padding-top: var(--sp-4); }
  .whatsnew-prev summary { cursor: pointer; font-weight: 700; font-size: var(--fs-body); color: var(--ember-deep); }
  .whatsnew-prev .lead { margin-top: var(--sp-3); }
  .phone {
    position: relative; border-radius: 54px; background: #060606; padding: var(--bezel);
    box-shadow:
      inset 0 0 0 2px #454549,
      0 0 0 3px #1b1b1e,
      0 0 0 4.5px #56565b,
      0 2px 5px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.35), 0 48px 96px -16px rgba(0,0,0,.55);
    max-width: 360px; margin: 0 auto;
  }
  .phone > img { border-radius: 43px; width: 100%; height: auto; display: block; }
  .phone::before, .phone::after {
    content: ""; position: absolute; background: #333338; border-radius: 2px; z-index: -1;
  }
  .phone::before { left: -7px; top: 21%; width: 7px; height: 12%; }
  .phone::after  { right: -7px; top: 27%; width: 7px; height: 17%; }
  .hero .phone { margin-bottom: var(--sp-6); } /* full phone in every language; the crop depth used to depend on the text column height (fixed 2026-10-01) */

  /* ---------- the record (signature) ---------- */
  .record-band { background: var(--night-soft); padding: var(--sp-8) 0 var(--sp-7); margin-top: var(--sp-8);
                 border-top: 1px solid var(--hairline-dark); }
  .record { max-width: 560px; margin: 0 auto; }
  .odo-line {
    display: flex; align-items: baseline; gap: var(--sp-2); max-width: 320px; margin: 0 auto var(--sp-5);
    font-size: var(--fs-caption); font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--ember); justify-content: center;
  }
  .odo-line .dots { flex: 1; border-bottom: 2px dotted #4A423B; transform: translateY(-3px); }
  .ledger-row {
    display: flex; align-items: baseline; gap: var(--sp-3);
    font-size: var(--fs-lead); font-weight: 500; padding: var(--sp-2) 0;
  }
  .ledger-row .dots { flex: 1; border-bottom: 2px dotted #4A423B; transform: translateY(-5px); }
  .ledger-row .val { font-weight: 700; white-space: nowrap; }
  .ledger-row.total { font-size: var(--fs-sub); font-weight: 800; padding-top: var(--sp-4); }
  .ledger-row.total .val { color: var(--ember); }
  .ledger-row .mi { color: var(--muted-dark); font-weight: 500; font-size: var(--fs-small); }
  .record-note { text-align: center; color: var(--muted-dark); margin-top: var(--sp-5); font-size: var(--fs-body); }
  .record-note strong { color: var(--paper); font-weight: 700; }

  /* ---------- feature sections ---------- */
  .features { background: var(--paper); color: var(--ink); padding: var(--sp-8) 0 var(--sp-6);
    position: relative; border-top: 1px solid rgba(232,93,47,.55); }
  .features::before { content:""; position:absolute; inset:0 0 auto; height:110px;
    pointer-events:none; background: linear-gradient(180deg, rgba(232,93,47,.05), transparent); }
  .feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center;
    padding: var(--sp-7) 0;
  }
  .feature + .feature { border-top: 1px solid var(--hairline-light); }
  .feature.flip .feature-copy { order: 2; }
  .eyebrow-ledger {
    display: flex; align-items: baseline; gap: var(--sp-2); max-width: 300px;
    font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ember-ink);
  }
  .eyebrow-ledger .dots { flex: 1; border-bottom: 2px dotted #D3C6B6; transform: translateY(-3px); }
  .feature h2 {
    font-weight: 800; font-size: var(--fs-title); line-height: 1.08;
    letter-spacing: -0.8px; color: var(--ember-deep); margin-top: var(--sp-3);
  }
  .feature p { color: #40382F; margin-top: var(--sp-4); max-width: 32em; }
  .feature p strong { color: var(--ink); }
  .feature .stage { border-radius: 36px; border: 1px solid var(--hairline-light);
    padding: clamp(var(--sp-5),4vw,var(--sp-6)) clamp(var(--sp-4),3vw,var(--sp-6));
    background: radial-gradient(120% 80% at 50% 0%, rgba(232,93,47,.16), transparent 62%),
                linear-gradient(165deg, #F0E7DB, #EADDCB); }
  .feature .stage .phone { margin-inline: auto; rotate: -1.4deg; max-width: 320px;
    box-shadow:
      inset 0 0 0 2px #3d3d42,
      0 0 0 3px #1b1b1e,
      0 0 0 4.5px #4c4c51,
      0 2px 5px rgba(27,22,19,.16), 0 12px 24px rgba(27,22,19,.20), 0 36px 72px -18px rgba(27,22,19,.35); }
  .feature.flip .stage .phone { rotate: 1.4deg; }

  /* ---------- survives band ---------- */
  .survives { background: var(--paper); color: var(--ink); padding: var(--sp-6) 0 var(--sp-8); }
  .survives-inner { border-top: 1px solid var(--hairline-light); padding-top: var(--sp-7); }
  .survives h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px;
                 color: var(--ember-deep); }
  .survives > .container > .survives-inner > p { color: #40382F; margin-top: var(--sp-3); max-width: 40em; }
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
  .pillar { background: #FFFFFF; border: 1px solid var(--hairline-light); border-radius: 18px;
            padding: var(--sp-5); }
  .pillar h3 { font-size: var(--fs-lead); font-weight: 700; }
  .pillar p { color: var(--muted-light); font-size: var(--fs-small); margin-top: var(--sp-2); }

  /* ---------- privacy band ---------- */
  .privacy { background: var(--night); padding: var(--sp-8) 0; position: relative;
    border-top: 1px solid rgba(232,93,47,.40); }
  .privacy::before { content:""; position:absolute; inset:0 0 auto; height:120px; pointer-events:none;
    background: linear-gradient(180deg, rgba(0,0,0,.35), transparent); }
  .privacy h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px; }
  .privacy h2 em { font-style: normal; color: var(--ember); }
  .privacy .lead { color: var(--muted-dark); margin-top: var(--sp-3); max-width: 40em; }
  .privacy-rows { margin-top: var(--sp-6); max-width: 640px; }
  .privacy-rows .ledger-row { font-size: var(--fs-body); border-bottom: 1px solid var(--hairline-dark); padding: var(--sp-3) 0; }
  .privacy-rows .ledger-row .dots { border-bottom: none; }
  .privacy-rows .val { color: var(--ember); font-weight: 700; }
  .privacy-clock { justify-content: flex-start; margin: 0 0 var(--sp-3); max-width: 320px; }

  /* ---------- tools + included ---------- */
  .tools { background: var(--paper); color: var(--ink); padding: var(--sp-8) 0;
    position: relative; border-top: 1px solid rgba(232,93,47,.55); }
  .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .tools h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px; color: var(--ember-deep); }
  .tools p { color: #40382F; margin-top: var(--sp-3); }
  .tools .fine { color: var(--muted-light); font-size: var(--fs-small); margin-top: var(--sp-3); }
  .tools ul.toollist { list-style: none; margin-top: var(--sp-4); }
  .tools ul.toollist li { padding: var(--sp-3) 0; border-top: 1px solid var(--hairline-light); }
  .tools ul.toollist a { color: var(--ember-deep); font-weight: 700; text-decoration-color: rgba(232,93,47,.5); text-underline-offset: 3px; }
  .tools ul.toollist .desc { color: var(--muted-light); font-size: var(--fs-small); display: block; }
  .included h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px; color: var(--ember-deep); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
  .chips span {
    background: #FFFFFF; border: 1px solid var(--hairline-light); border-radius: 999px;
    padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: 500; color: #40382F;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }
  .chips span:hover { border-color: var(--ember); transform: translateY(-1px); box-shadow: var(--el-hover); }

  /* ---------- maker's note ---------- */
  .maker { background: var(--paper); color: var(--ink); padding: 0 0 var(--sp-8); }
  .maker-inner { max-width: 680px; margin: 0 auto; border-top: 1px solid var(--hairline-light);
                 padding-top: var(--sp-7); }
  .maker h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px;
              color: var(--ember-deep); margin-top: var(--sp-3); }
  .maker p { color: #40382F; margin-top: var(--sp-4); }

  /* ---------- FAQ ---------- */
  .faq { background: var(--paper); color: var(--ink); padding: 0 0 var(--sp-8); }
  .faq-inner { border-top: 1px solid var(--hairline-light); padding-top: var(--sp-7); }
  .faq h2 { font-weight: 800; font-size: var(--fs-title); letter-spacing: -0.8px; color: var(--ember-deep); }
  .faq-list { margin-top: var(--sp-5); max-width: 720px; }
  .faq details { border-top: 1px solid var(--hairline-light); }
  .faq details:last-child { border-bottom: 1px solid var(--hairline-light); }
  .faq summary {
    cursor: pointer; font-weight: 700; font-size: var(--fs-body); padding: var(--sp-4) 0;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--ember-ink); font-size: var(--fs-lead); font-weight: 500;
    transition: rotate 200ms ease; }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details p { color: #40382F; padding-bottom: var(--sp-4); max-width: 38em; }
  .faq .more { margin-top: var(--sp-5); color: var(--muted-light); }
  .faq .more a { color: var(--ember-deep); text-decoration-color: rgba(232,93,47,.5); text-underline-offset: 3px; }

  /* ---------- pricing ---------- */
  .pricing { background: var(--ember-deep); padding: var(--sp-8) 0; text-align: center;
    border-top: 1px solid rgba(232,93,47,.40);
    background-image: radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.18), transparent 60%); }
  .close-head { font-weight: 800; font-size: var(--fs-title); letter-spacing: -1px; }
  .close-line { color: #F7CDB6; font-size: var(--fs-lead); margin-top: var(--sp-3); }
  .pricing .odo-line { margin: var(--sp-6) auto 0; color: #FFD9C4; max-width: 260px; }
  .pricing .odo-line .dots { border-color: rgba(247,243,238,0.35); }
  .price { font-weight: 800; font-size: var(--fs-display); letter-spacing: -2px;
           line-height: 1; margin-top: var(--sp-5); }
  .price small { font-size: var(--fs-sub); letter-spacing: -0.5px; vertical-align: 18%; }
  .pricing .terms { color: #F7CDB6; max-width: 38em; margin: var(--sp-5) auto 0; }
  .pricing .terms strong { color: #fff; }
  .pricing .cta { margin-top: var(--sp-6); background: var(--night);
    box-shadow: var(--el-raised); }
  .pricing .cta:hover, .pricing .cta:focus-visible { background: #241F1B; }
  .pricing .anchor-line { color: rgba(247,243,238,0.8); font-size: var(--fs-small); margin-top: var(--sp-5); }

  /* ---------- footer ---------- */
  footer { background: var(--night); padding: var(--sp-7) 0; border-top: 1px solid rgba(232,93,47,.40); }
  .footer-inner { display: flex; justify-content: space-between; align-items: flex-start;
                  gap: var(--sp-6); flex-wrap: wrap; }
  .footer-tag { color: var(--muted-dark); font-size: var(--fs-small); margin-top: var(--sp-2); }
  footer nav { display: flex; gap: var(--sp-5); font-size: var(--fs-small); flex-wrap: wrap; }
  footer nav a { color: var(--muted-dark); text-decoration: none; padding: var(--sp-3) 0; display: inline-block; }
  footer nav a:hover, footer nav a:focus-visible { color: var(--ember); }
  .footer-legal { color: var(--muted-dark); font-size: var(--fs-caption); margin-top: var(--sp-6); }

  /* ---------- motion, a11y, texture ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(14px); animation: rise 640ms cubic-bezier(.2,.7,.2,1) forwards; }
    .rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 160ms; }
    .rise.d3 { animation-delay: 240ms; } .rise.d4 { animation-delay: 340ms; }
    @keyframes rise { to { opacity: 1; transform: none; } }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .feature .feature-copy, .pillar, .record .ledger-row { animation: reveal-up linear both;
        animation-timeline: view(); animation-range: entry 8% entry 42%; }
      .feature .stage { animation: reveal-stage linear both;
        animation-timeline: view(); animation-range: entry 5% entry 40%; }
      @keyframes reveal-up   { from { opacity:0; transform: translateY(22px); } }
      @keyframes reveal-stage{ from { opacity:0; transform: translateY(34px) scale(.975); } }
    }
  }
  .record-band, .privacy, .pricing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .pricing { background-image: radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .skip { position: absolute; inset-inline-start: -9999px; }
  .skip:focus { inset-inline-start: var(--sp-4); top: var(--sp-4); position: fixed; z-index: 30; background: var(--ember);
    color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: 999px; font-weight: 700; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
  .privacy-rows .ledger-row, .record .ledger-row { transition: background-color 120ms ease;
    padding-inline: var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); border-radius: 6px; }
  .privacy-rows .ledger-row:hover { background-color: rgba(232,93,47,.08); }
  .record .ledger-row:hover { background-color: rgba(232,93,47,.06); }
  .faq details::details-content { block-size: 0; opacity: 0; overflow-y: clip;
    transition: block-size 260ms ease, opacity 260ms ease, content-visibility 260ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
  @supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } }
  @media (prefers-reduced-motion: reduce) { .faq summary::after, .faq details::details-content { transition: none; } }

  /* ---------- dark mode: light sections flip; brand-dark bands stay ---------- */
  @media (prefers-color-scheme: dark) {
    .features, .survives, .tools, .faq, .maker { background: #171310; color: var(--paper); }
    .feature h2, .survives h2, .tools h2, .included h2, .faq h2, .maker h2 { color: #F07B4B; }
    .feature p, .survives .survives-inner > p, .tools p, .faq details p, .maker p { color: #CFC7BE; }
    .feature p strong { color: var(--paper); }
    .feature + .feature, .survives-inner, .maker-inner, .faq-inner, .faq details,
    .faq details:last-child, .tools ul.toollist li { border-color: var(--hairline-dark); }
    .eyebrow-ledger { color: var(--ember); }
    .eyebrow-ledger .dots { border-color: #4A423B; }
    .pillar, .chips span { background: #221D19; border-color: var(--hairline-dark); }
    .pillar h3 { color: var(--paper); }
    .pillar p, .tools .fine, .faq .more { color: var(--muted-dark); }
    .chips span { color: #CFC7BE; }
    .faq summary::after { color: var(--ember); }
    .faq .more a, .tools ul.toollist a { color: #F07B4B; }
    .tools ul.toollist .desc { color: var(--muted-dark); }
    .feature .phone { box-shadow:
                      inset 0 0 0 2px #454549, 0 0 0 3px #1b1b1e, 0 0 0 4.5px #56565b,
                      0 2px 5px rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.4), 0 36px 72px -18px rgba(0,0,0,.6); }
    .feature .stage { border-color: var(--hairline-dark);
      background: radial-gradient(120% 80% at 50% 0%, rgba(232,93,47,.10), transparent 62%),
                  linear-gradient(165deg, #221D19, #181310); }
    .features, .tools { border-top-color: rgba(232,93,47,.25); }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 900px) {
    .hero-grid, .feature, .tools-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .feature.flip .feature-copy { order: 0; }
    .pillars { grid-template-columns: 1fr; }
    .hero .phone { margin-bottom: var(--sp-5); max-width: 300px; }
    .record-band { padding-top: var(--sp-8); }
    .feature .stage .phone { max-width: 290px; }
  }
  @media (max-width: 480px) {
    .topbar-inner { gap: var(--sp-2); }
    .topbar .brand .mark { display: none; }  /* the wordmark is the lockup on phones; room for the language control */
    .brand .word { font-size: var(--fs-lead); }
    .topbar .chip { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); text-align: center; line-height: 1.3; }
    .ledger-row { font-size: var(--fs-body); }
    .ledger-row.total { font-size: var(--fs-lead); }
    .ledger-row .mi { display: none; }
  }
:root { --lp-ink: var(--paper); --lp-muted: var(--muted-dark); --lp-hair: var(--hairline-dark);
  --lp-panel: var(--night-soft); --lp-accent: var(--ember); --lp-hover: rgba(247, 243, 238, .08); }
/* ---------- language picker (shared rules; colours come from --lp-* set by the host sheet) ---------- */
.vh, .langbtn .lb-name.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.topbar nav a.langbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; min-width: 44px; padding: 0; color: var(--lp-muted); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.topbar nav a.langbtn:hover, .topbar nav a.langbtn:focus-visible { color: var(--lp-accent); }
@media (max-width: 480px) {
  .langbtn .lb-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 
}
.langdlg { width: min(860px, calc(100% - 2 * var(--sp-4))); max-height: min(82vh, 680px); margin: auto; padding: 0;
  border: 1px solid var(--lp-hair); border-radius: var(--radius-panel); background: var(--lp-panel); color: var(--lp-ink);
  overscroll-behavior: contain; }
.langdlg::backdrop { background: rgba(10, 8, 7, .66); }
.langdlg-in { padding: 0 var(--sp-5) var(--sp-5); }
.langdlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) 0; background: var(--lp-panel); border-bottom: 1px solid var(--lp-hair); }
.langdlg .langdlg-head h2 { margin: 0; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; color: var(--lp-ink); }
.langdlg .langdlg-head h2::before { display: none; }
.langdlg-x, .langbar-x { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--lp-muted); cursor: pointer; }
.langdlg-x { margin-inline-end: calc(-1 * var(--sp-3)); }
.langdlg-x:hover, .langdlg-x:focus-visible, .langbar-x:hover, .langbar-x:focus-visible { color: var(--lp-ink); background: var(--lp-hover); }
.langdlg-list { list-style: none; margin: 0; padding: var(--sp-2) 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); column-gap: var(--sp-5); }
.langdlg-list li { margin: 0; min-width: 0; }
.langdlg-list a { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 64px;
  padding-block: var(--sp-2); padding-inline: 0 var(--sp-5);
  border-bottom: 1px solid var(--lp-hair); color: var(--lp-ink); text-decoration: none; }
.langdlg-list .lp-n { font-size: var(--fs-body); font-weight: 500; line-height: 1.35; }
.langdlg-list .lp-e { font-size: var(--fs-caption); line-height: 1.3; color: var(--lp-muted); }
.langdlg-list a:hover .lp-n, .langdlg-list a:focus-visible .lp-n { color: var(--lp-accent); }
.langdlg-list a[aria-current] { color: var(--lp-accent); }
.langdlg-list a[aria-current] .lp-n { font-weight: 700; }
.langdlg-list a[aria-current] .lp-ico { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; }
.langbar { position: fixed; z-index: 20; inset-inline: var(--sp-4); bottom: var(--sp-4); max-width: 560px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-1); padding-inline: var(--sp-4) var(--sp-1);
  background: var(--lp-panel); color: var(--lp-ink); border: 1px solid var(--lp-hair); border-radius: var(--radius-panel);
  box-shadow: var(--el-overlay); font-size: var(--fs-small); line-height: 1.4; }
.langbar > .lp-ico { color: var(--lp-accent); }
.langbar-go { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--lp-ink);
  font-weight: 700; text-decoration: none; }
.langbar-go:hover > span:first-child, .langbar-go:focus-visible > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.langbar-arrow { display: inline-block; color: var(--lp-accent); }
.langbar[dir="rtl"] .langbar-arrow { transform: scaleX(-1); }
.langfold { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--lp-hair); }
.langfold summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer;
  list-style: none; color: var(--lp-muted); font-size: var(--fs-small); }
.langfold summary::-webkit-details-marker { display: none; }
.langfold summary:hover, .langfold summary:focus-visible { color: var(--lp-accent); }
.langfold .lf-cur { color: var(--lp-ink); font-weight: 700; }
.langfold .langnav { margin-top: var(--sp-2); padding-top: 0; border-top: 0; }
.langnav a[aria-current] { color: var(--lp-ink); font-weight: 700; }
.lp-note { display: none; min-height: 1.65em; margin-bottom: var(--sp-4); font-size: var(--fs-small); color: var(--lp-muted); }
html[data-lp] .lp-note { display: block; }
.lp-note a { color: var(--lp-accent); }
@media (prefers-reduced-motion: no-preference) {
  .langdlg[open] { animation: lp-in 200ms cubic-bezier(.2, .7, .2, 1); }
  .langdlg[open]::backdrop { animation: lp-fade 200ms ease; }
  .langbar { animation: lp-up 280ms cubic-bezier(.2, .7, .2, 1); }
  @keyframes lp-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
  @keyframes lp-fade { from { opacity: 0; } }
  @keyframes lp-up { from { opacity: 0; transform: translateY(12px); } }
}
.appstore-badge{display:inline-block;line-height:0;margin:var(--sp-3) var(--sp-3) var(--sp-3) 0}.appstore-badge img{height:40px;width:auto;display:block}
.langnav{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--hairline-dark);display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-caption)}
.langnav a,.langnav span{color:var(--muted-dark);text-decoration:none;padding:var(--sp-1) 0;display:inline-block}
.langnav a:hover,.langnav a:focus-visible{color:var(--ember)}
.langnav span[aria-current]{color:var(--paper);font-weight:700}

/* =====================================================================
   Pages other than home — guides, tools, switching guides, support,
   privacy, 404. Same container, header, footer, type and spacing scale as
   the home page; only the body ground is light (paper), like the home
   page's own light bands, and it flips with them in dark mode.
   ===================================================================== */
.page { background: var(--paper); color: var(--ink);
  --pg-body: #40382F; --pg-muted: var(--muted-light); --pg-surface: #FFFFFF; --pg-hair: var(--hairline-light);
  --pg-head: var(--ember-deep); --pg-accent: var(--ember-ink); --pg-ground: var(--paper);
  --measure: 68ch; }
.page-main { padding: var(--sp-6) 0 var(--sp-8); }
.page-main > .container > * { max-width: var(--measure); }
.page-main > .container > .tool, .page-main > .container > .tbl-scroll,
.page-main > .container > .cards, .page-main > .container > .pager,
.page-main > .container > .appcta, .page-main > .container > .contact,
.page-main > .container > header { max-width: none; }
.page-main header .lede, .page-main header .updated { max-width: var(--measure); }
.page .lp-note { color: var(--pg-muted); }
.page .lp-note a { color: var(--pg-head); }

/* page head: breadcrumb, rule, title, updated line, lede — one shape on every page */
.crumbs { font-size: var(--fs-caption); color: var(--pg-muted); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--pg-muted); text-decoration-color: rgba(110,100,91,.4); text-underline-offset: 3px; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--pg-head); }
.crumbs [aria-current] { color: var(--pg-accent); font-weight: 700; }
.page-main header { margin-bottom: var(--sp-6); }
.rule { width: 56px; height: 4px; background: var(--ember); border-radius: 2px; }
.page-main h1 { margin-top: var(--sp-4); max-width: 20ch; overflow-wrap: break-word; }
.page-main .updated { color: var(--pg-muted); font-size: var(--fs-caption); margin-top: var(--sp-3); }
.lede { color: var(--pg-body); font-size: var(--fs-lead); margin-top: var(--sp-4); line-height: 1.5; }
.lede strong { color: var(--pg-accent); font-weight: 700; }

/* prose — the home page's section title, pillar h3 and body copy */
.page-main h2 { font-weight: 800; font-size: var(--fs-title); line-height: 1.08; letter-spacing: -0.8px;
  color: var(--pg-head); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--pg-hair); }
.page-main header + h2, .page-main .print-btn-wrap + h2 { border-top: 0; padding-top: 0; margin-top: var(--sp-6); }
.page-main h3 { font-weight: 700; font-size: var(--fs-lead); line-height: 1.3; margin-top: var(--sp-5); }
.page-main p, .page-main li { color: var(--pg-body); margin-top: var(--sp-3); }
.page-main li { margin-top: var(--sp-2); }
.page-main ul, .page-main ol { padding-inline-start: var(--sp-5); margin-top: var(--sp-3); }
.page-main li strong, .page-main p strong { color: var(--ink); }
.page-main a { color: var(--pg-head); text-decoration-color: rgba(232,93,47,.5); text-underline-offset: 3px; }
.page-main code { font-size: var(--fs-small); background: var(--pg-surface); border: 1px solid var(--pg-hair);
  border-radius: 6px; padding: 0 var(--sp-1); }
.page-main .fine, .page-main small.fine { color: var(--pg-muted); font-size: var(--fs-small); }
.page-main .a { color: var(--pg-body); }
.checklist { list-style: none; padding-inline-start: 0; }
.checklist li { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--pg-hair); }
.checklist li::before { content: "\2610"; color: var(--pg-accent); font-size: var(--fs-body); line-height: 1; }

/* buttons — the home page's CTA pill, everywhere */
.page-main .chip { display: inline-block; color: #fff; font-weight: 800; font-size: var(--fs-body); text-decoration: none;
  padding: var(--sp-3) var(--sp-5); border-radius: 999px; border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #F0703F, var(--ember) 55%, var(--ember-deep));
  box-shadow: var(--el-raised); }
.page-main .chip:hover, .page-main .chip:focus-visible {
  background: linear-gradient(180deg, #F5824F, #F0703F 55%, #D6521F); }
.page-main .chip.ghost { background: transparent; color: var(--pg-head); box-shadow: none; border: 1px solid var(--pg-hair); }
.page-main .chip.ghost:hover, .page-main .chip.ghost:focus-visible { background: var(--pg-surface); }
.print-btn-wrap { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* cards and pager — the home page's pillar */
.cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pager { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card, .pager a { display: block; padding: var(--sp-5); background: var(--pg-surface); border: 1px solid var(--pg-hair);
  border-radius: 18px; text-decoration: none; transition: border-color 140ms ease; }
.card:hover, .card:focus-visible, .pager a:hover, .pager a:focus-visible { border-color: var(--ember); }
.card .lab, .pager .lab { display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--pg-accent); }
.card strong, .pager strong { display: block; color: var(--ink); font-size: var(--fs-lead); font-weight: 700;
  line-height: 1.3; margin-top: var(--sp-2); }
.card .desc, .pager .desc { display: block; color: var(--pg-muted); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* app band and closing box */
.appcta { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--pg-surface); border: 1px solid var(--pg-hair);
  border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.page-main .appcta p { margin: 0; max-width: var(--measure); }
.contact { margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-5); border-radius: 18px; background: var(--night); color: var(--paper); }
.page-main .contact h2 { margin-top: 0; padding-top: 0; border-top: 0; color: var(--paper); }
.page-main .contact p { color: var(--muted-dark); max-width: var(--measure); }
.page-main .contact a:not(.chip) { color: #F07B4B; }

/* data tables */
.tbl-scroll { overflow-x: auto; margin-top: var(--sp-4); }
.page-main table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-small);
  background: var(--pg-surface); border: 1px solid var(--pg-hair); border-radius: 12px; }
.page-main caption { caption-side: top; text-align: start; font-weight: 700; color: var(--ink); padding-bottom: var(--sp-2); }
.page-main th, .page-main td { text-align: start; vertical-align: top; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--pg-hair); color: var(--pg-body); font-variant-numeric: tabular-nums; }
.page-main thead th { color: var(--ink); font-weight: 700; font-size: var(--fs-caption); background: var(--pg-ground); }
.page-main thead th:first-child { border-start-start-radius: 12px; }
.page-main thead th:last-child { border-start-end-radius: 12px; }
.page-main tbody tr:last-child td { border-bottom: 0; }
.blank-row td { height: 34px; }

/* calculators: inputs left, the ledger right (stacked on phones) */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr;
  column-gap: var(--sp-6); align-items: start;
  background: var(--pg-surface); border: 1px solid var(--pg-hair); border-radius: 18px; padding: var(--sp-5); }
.tool > * { grid-column: 1; }
.tool > .results { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
.tool-eyebrow { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--pg-accent); margin-bottom: var(--sp-3); }
.page-main .tool .tool-eyebrow { margin-top: 0; }
.fields { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.field label { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--pg-muted); margin-bottom: var(--sp-1); }
input, select, button { font: inherit; color: inherit; }
.field input, .field select { width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--pg-hair);
  border-radius: 10px; background: var(--pg-ground); color: var(--ink); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.field-check { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--pg-body); }
.field-check input { width: 18px; height: 18px; accent-color: var(--ember); }
.noscript-note { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--pg-hair); border-radius: 10px;
  color: var(--pg-muted); font-size: var(--fs-small); }
.results { background: var(--night); color: var(--paper); border-radius: 18px; padding: var(--sp-5); margin-top: var(--sp-5); }
.page-main .results-title { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted-dark); text-align: center; margin: 0 0 var(--sp-3); }
.results .ledger-row { color: #CFC7BE; margin: 0; }
.results .ledger-row .val { color: var(--paper); font-variant-numeric: tabular-nums; }
.results .ledger-row.total { color: var(--paper); font-size: var(--fs-lead); }
.results .ledger-row.total .val { color: var(--ember); }
.bigfig { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline-dark); text-align: center; }
.page-main .bigfig p { margin: 0; }
.page-main .bigfig .label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-dark); }
.page-main .bigfig .fig { font-size: var(--fs-display); font-weight: 800; color: var(--ember); letter-spacing: -1px; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-main .bigfig .per { font-size: var(--fs-small); color: var(--muted-dark); }
.due-list .ledger-row { align-items: center; font-size: var(--fs-body); }
.due-badge { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 999px; padding: var(--sp-1) var(--sp-3); white-space: nowrap; }
.due-badge.now { background: rgba(232,93,47,.2); color: #F0985F; }
.due-badge.soon { background: rgba(247,243,238,.12); color: #CFC7BE; }

@media (prefers-color-scheme: dark) {
  .page { background: #171310; color: var(--paper);
    --pg-body: #CFC7BE; --pg-muted: var(--muted-dark); --pg-surface: #221D19; --pg-hair: var(--hairline-dark);
    --pg-head: #F07B4B; --pg-accent: var(--ember); --pg-ground: #171310; }
  .page-main li strong, .page-main p strong, .page-main caption, .page-main thead th,
  .card strong, .pager strong { color: var(--paper); }
  .field input, .field select { color: var(--paper); }
  .contact { background: #221D19; border: 1px solid var(--hairline-dark); }
}
@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; grid-template-rows: none; }
  .tool > .results { grid-column: 1; grid-row: auto; margin-top: var(--sp-5); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cards, .pager { grid-template-columns: 1fr; }
  .tool, .contact { padding: var(--sp-5) var(--sp-4); }
  .page-main h2 { margin-top: var(--sp-6); padding-top: var(--sp-5); }
}
@media print {
  .topbar, .crumbs, .print-btn-wrap, .appcta, .contact, .pager, footer, .skip, .lp-note, .langbar { display: none !important; }
  .page { background: #fff; color: #000; font-size: var(--fs-caption); line-height: 1.35; }
  .page-main { padding: 0; }
  .page-main header { margin-bottom: var(--sp-3); }
  .rule { display: none; }
  .page-main h1 { font-size: var(--fs-lead); letter-spacing: 0; }
  .page-main .lede, .page-main .updated { font-size: var(--fs-caption); margin-top: var(--sp-2); color: #000; }
  .page-main h2 { font-size: var(--fs-small); margin-top: var(--sp-4); padding-top: 0; border: 0; color: #000; }
  .page-main table { font-size: var(--fs-caption); border-color: #ccc; }
  .page-main th, .page-main td { border-color: #ddd; padding: var(--sp-1) var(--sp-2); color: #000; }
  .page-main a { color: #000; text-decoration: none; }
  @page { margin: 12mm; }
}
/* a long label never pushes the figure off a phone screen (was 398–438 px wide at 390 in de/ru) */
.ledger-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* tracking breaks joined and syllabic scripts (Arabic, Devanagari, Thai) and adds nothing to CJK:
   letter-spaced labels go flat in those languages (LESSONS: Arabic kicker rendered disjoined) */
:is(:lang(ar), :lang(he), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh))
  :is(.kicker, .eyebrow-ledger, .odo-line, .tool-eyebrow, .results-title, .bigfig .label, .card .lab, .pager .lab, .due-badge) {
  letter-spacing: 0; text-transform: none; }
[hidden] { display: none !important; }
/* headings: Japanese breaks at phrase boundaries, not mid-word ("記/録", "ポリ/シー" at 390 px;
   Chromium 119+, others keep today's behaviour); long compounds in other languages hyphenate
   instead of splitting bare ("Datenschutzerkl/ärung" at 390 px); only words of 16+ letters, so
   ordinary words keep wrapping whole ("calcula-doras" at 12 was worse). English left as designed. */
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:is(h1, h2):not(:lang(en)) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 6 6; }