/* Shared design system — amit.marketing tool network
   IDENTITY B "Studio Instrument" (PORTFOLIO-MASTER-STRATEGY §3).
   Reference standard: PriceWatch. Tools are instruments, not essays:
   light ground, one saturated functional accent, semantic green/red reserved
   for RESULTS only, tabular figures on every number a user reads or copies,
   and zero decorative motion.
   Every text/background pair below was validated at >= 4.5:1 (WCAG AA). */

:root {
  --bg: #f4f6f9;
  --bg-tint: #eaeffc;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --ink: #0a1020;          /* 18.96:1 on surface */
  --ink-2: #37425a;        /* 10.05:1 on surface */
  --muted: #5a6479;        /*  5.94:1 on surface */
  --line: #dfe4ec;
  --line-2: #c3cbd9;
  --accent: #1a46c9;       /*  7.60:1 on surface; #fff on accent = 7.60:1 */
  --accent-2: #14379e;
  --accent-3: #1a46c9;
  --accent-soft: #eaeffc;
  --accent-line: #c2d0f4;
  /* semantic — RESULTS ONLY, never chrome */
  --pos: #05704e;          /*  6.12:1 on surface */
  --neg: #b3261e;          /*  6.54:1 on surface */
  --warn: #8a4b08;         /*  6.79:1 on surface */
  --ok: #05704e;
  /* AAA+++ 2026-07-30: 14-18px pill radii plus a four-step shadow ramp was the
     single loudest "free template" tell on the tools. 8-14px with ONE lift
     shadow reads engineered. border-radius affects no layout, so CLS stays 0. */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: 0 1px 0 rgba(10, 16, 32, .04), 0 16px 36px -24px rgba(10, 16, 32, .22);
  --shadow-lg: 0 18px 44px -22px rgba(10, 16, 32, .24);   /* popovers/menus only */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);

  /* ---- AAA+++ additions (additive; no existing name renamed) ---- */
  --t-fast: 140ms;
  --t-med: 220ms;
  --ease-out: cubic-bezier(0.25, 1, 0.4, 1);
  --ink-num: var(--ink);        /* result numerals; lets sleep/site-local retint */
  --surface-sunken: #eef1f6;    /* input wells — replaces ad-hoc --surface-2 misuse */
  --fs-mono: .8125rem;
  --track-label: .11em;
  --max: 1320px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* IBM Plex Mono led this stack but no font file was ever fetched, so the mono
     voice silently fell through to whatever the OS picked. System-first makes
     the rendering deterministic and keeps the zero-new-requests constraint. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --netbar-bg: var(--ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #070b14;
  --bg-tint: #16203a;
  --surface: #101725;
  --surface-2: #161e2e;
  --ink: #eef2f8;          /* 15.96:1 on surface */
  --ink-2: #b9c3d3;        /* 10.08:1 on surface */
  --muted: #8e9aae;        /*  6.30:1 on surface */
  --line: #232d42;
  --line-2: #33405c;
  --accent: #8faaff;       /*  7.99:1 on surface; ink on accent = 8.45:1 */
  --accent-2: #b0c3ff;
  --accent-3: #8faaff;
  --accent-soft: #16203a;
  --accent-line: #2e3d63;
  --pos: #4ade9e;
  --neg: #ff8a80;
  --warn: #fbbf60;
  --ok: #4ade9e;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 14px -10px rgba(0, 0, 0, .7);
  --shadow: 0 10px 24px -16px rgba(0, 0, 0, .8);
  --shadow-lg: 0 22px 56px -28px rgba(0, 0, 0, .9);
  --netbar-bg: #05070f;
  --surface-sunken: #0b111d;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- network switcher (top of every site) ---------- */
.netbar {
  background: var(--ink);
  color: #fff;
  font-size: .8rem;
  position: relative;
  z-index: 60;
}
:root[data-theme="dark"] .netbar { background: #05070f; border-bottom: 1px solid var(--line); }
.netbar-in { display: flex; align-items: center; gap: 14px; height: 40px; overflow: hidden; }
.netbar-label {
  color: rgba(255,255,255,.5); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; font-size: .64rem; white-space: nowrap; flex: none;
}
.netbar-links { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.netbar-links::-webkit-scrollbar { display: none; }
.netbar-links a {
  color: rgba(255,255,255,.72); text-decoration: none; white-space: nowrap;
  padding: 5px 10px; border-radius: 7px; font-weight: 500; transition: border-color .12s;
}
.netbar-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
.netbar-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.16); font-weight: 650; }
@media (max-width: 640px) { .netbar-label { display: none; } }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -.03em; font-size: 1.05rem; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand b { color: var(--accent); font-weight: 700; }
.head-right { display: flex; align-items: center; gap: 8px; }
.head-nav { display: flex; gap: 2px; }
.head-nav a { color: var(--muted); text-decoration: none; font-size: .89rem; font-weight: 550; padding: 8px 13px; border-radius: 10px; transition: border-color .12s; }
.head-nav a:hover { color: var(--ink); background: var(--surface-2); }
@media (max-width: 900px) { .head-nav { display: none; } }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; color: var(--muted); transition: border-color .12s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.icon-btn svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .i-moon { display: none; }
:root:not([data-theme="dark"]) .i-sun { display: none; }

/* Buttons: flat, high contrast, no motion. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: .91rem; font-weight: 650; text-decoration: none;
  letter-spacing: -.01em; transition: border-color .12s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
:root[data-theme="dark"] .btn-primary { color: #0a1020; }        /* 8.45:1 */
:root[data-theme="dark"] .btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 48px 0 26px; text-align: center; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: -1;
  background: none; pointer-events: none;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 5px 13px; border-radius: 6px; margin-bottom: 18px;
}
h1 {
  font-size: clamp(2.05rem, 4.8vw, 3.2rem); line-height: 1.06; letter-spacing: -.04em;
  font-weight: 800; max-width: 17ch; margin: 0 auto 14px;
}
h1 em { font-style: normal; color: var(--accent); }
.lede { color: var(--ink-2); font-size: clamp(1rem, 1.9vw, 1.12rem); max-width: 60ch; margin: 0 auto; line-height: 1.6; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 20px; margin-top: 20px; color: var(--muted); font-size: .85rem; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 15px; height: 15px; color: var(--accent); }

/* ---- the fold budget (Identity B) ------------------------------------- */
/* DESIGN-MODERNISATION-2026-08 §3.1. The contract on a 375x812 phone is that
   the calculator's RESULT ROW lands at or above 780px and the compact source
   line at or above 812px. Every value below was chosen by measuring, not by
   taste: the hero's desktop breathing room is what pushed the instrument down.
   Desktop is untouched — this only fires at <=560px. */
@media (max-width: 560px) {
  .hero { padding: 26px 0 18px; }
  .eyebrow { margin-bottom: 11px; padding: 4px 10px; }
  h1 { margin-bottom: 10px; }
  .lede { font-size: .97rem; line-height: 1.5; }
  /* The trust chip row stacks to 3 lines on a phone; tightening the row gap is
     worth ~14px of fold and costs nothing legible. */
  .trust { margin-top: 13px; gap: 6px 16px; font-size: .82rem; }
  .calc-card { margin-top: 16px; }

  /* THE ORDER, not just the spacing. CoverCheck — the measured reference —
     puts its trust row BELOW its primary action (CTA @543, trust @727). On the
     tools the trust chip row sat between the lede and the calculator and cost
     74px of fold, which is the difference between the citation being seen and
     not. Reordering is done in CSS so no markup, no desktop layout and no
     source order for a screen reader outside this breakpoint changes: the
     chips still read immediately after the instrument they describe. */
  .hero > .wrap { display: flex; flex-direction: column; }
  .hero > .wrap > * { order: 6; }
  .hero > .wrap > .eyebrow { order: 1; align-self: center; }
  .hero > .wrap > h1 { order: 2; }
  .hero > .wrap > .lede { order: 3; }
  .hero > .wrap > .calc-card,
  .hero > .wrap > .sheet,
  .hero > .wrap > .app { order: 4; }
  .hero > .wrap > .trust { order: 5; }

  /* The copy-cells under the headline figure stack one per line on a phone and
     push everything after them off the screen; two up keeps the card compact
     without shrinking the numerals. */
  .calc-card .out-grid { gap: 8px; }
}

/* ---------- app / forms ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 24px; align-items: start; margin-top: 30px; }
.app > * { min-width: 0; }
@media (max-width: 1040px) { .app { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), transparent); }
.card-head h2 { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-body { padding: 20px; }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
label, .lbl { display: block; font-size: .78rem; font-weight: 650; color: var(--muted); margin-bottom: 6px; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="email"], textarea, select {
  width: 100%; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; font: inherit; font-size: .93rem;
  transition: border-color .16s, box-shadow .16s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .6; }
textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px; padding-right: 36px; }
.row { display: grid; gap: 12px; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .row-2, .row-3 { grid-template-columns: 1fr; } }
.hint { font-size: .77rem; color: var(--muted); margin-top: 6px; }

.logo-drop { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1.5px dashed var(--line-2); border-radius: 13px; background: var(--surface-2); cursor: pointer; transition: border-color .12s; }
.logo-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.logo-drop img { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; background: #fff; }
.logo-drop .ph { width: 46px; height: 46px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); flex: none; }
.logo-drop .ph svg { width: 20px; height: 20px; }
.logo-drop p { font-size: .87rem; font-weight: 600; }
.logo-drop small { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; }
.logo-drop button { margin-left: auto; font-size: .78rem; color: var(--muted); background: none; border: 0; text-decoration: underline; }

/* items */
.items { display: flex; flex-direction: column; gap: 8px; }
.item, .item-head { display: grid; grid-template-columns: 1fr 68px 104px 96px 34px; gap: 9px; align-items: center; }
.item-head { padding: 0 0 3px; }
.item-head span { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.item-head span:nth-child(2), .item-head span:nth-child(3), .item-head span:nth-child(4) { text-align: right; }
.item input { padding: 10px 11px; font-size: .89rem; }
.item input.num { text-align: right; font-variant-numeric: tabular-nums; }
.item .amt { text-align: right; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.item .del { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--muted); display: grid; place-items: center; transition: border-color .12s; }
.item .del:hover { color: #e11d48; background: color-mix(in srgb, #e11d48 8%, transparent); border-color: color-mix(in srgb, #e11d48 24%, transparent); }
.item .del svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .item-head { display: none; }
  .item { grid-template-columns: 1fr 1fr 34px; grid-template-areas: "d d x" "q p a"; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
  .item > *:nth-child(1) { grid-area: d; } .item > *:nth-child(2) { grid-area: q; }
  .item > *:nth-child(3) { grid-area: p; } .item > *:nth-child(4) { grid-area: a; }
  .item > *:nth-child(5) { grid-area: x; justify-self: end; }
}
.add-item { margin-top: 11px; width: 100%; border: 1.5px dashed var(--line-2); background: none; color: var(--accent); border-radius: 12px; padding: 11px; font-size: .88rem; font-weight: 650; transition: border-color .12s; }
.add-item:hover { background: var(--accent-soft); border-color: var(--accent); }

/* segmented */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 3px; }
.seg button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font-size: .83rem; font-weight: 650; color: var(--muted); transition: border-color .12s; }
.seg button:hover { color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--line); }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); transition: border-color .12s; }
.swatch:hover { box-shadow: 0 0 0 2px var(--line-2); }
.swatch[aria-pressed="true"] { border-color: var(--surface); box-shadow: 0 0 0 2px var(--ink); }

/* totals */
.totals { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px; }
.trow { display: flex; justify-content: space-between; gap: 12px; font-size: .91rem; padding: 5px 0; color: var(--ink-2); }
.trow b { font-variant-numeric: tabular-nums; }
.trow.total { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 12px; font-size: 1.12rem; font-weight: 750; color: var(--ink); letter-spacing: -.02em; }

/* preview / document */
.preview-col { position: sticky; top: 84px; min-width: 0; }
@media (max-width: 1040px) { .preview-col { position: static; } }
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.preview-bar .ttl { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.paper-wrap { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: #fff; border: 1px solid var(--line); }

.paper { width: 794px; min-height: 1123px; background: #fff; color: #1e293b; transform-origin: top left; padding: 56px 58px; font-size: 13.5px; line-height: 1.55; position: relative; }
.paper * { color: inherit; }
.doc-top { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.doc-logo { max-width: 190px; max-height: 78px; object-fit: contain; }
.doc-from h3 { font-size: 17px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 3px; color: #0f172a; }
.doc-from p, .doc-to p { font-size: 12.5px; color: #475569; white-space: pre-line; }
.doc-title { text-align: right; }
.doc-title .t { font-size: 31px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--doc-accent, #4f46e5); }
.doc-title .sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #94a3b8; margin-top: 7px; font-weight: 650; }
.doc-meta { margin-top: 13px; font-size: 12.5px; }
.doc-meta div { display: flex; justify-content: flex-end; gap: 12px; }
.doc-meta span { color: #64748b; }
.doc-meta b { color: #0f172a; font-weight: 650; min-width: 96px; text-align: right; }
.doc-parties { display: flex; gap: 40px; margin-top: 36px; }
.doc-parties > div { flex: 1; }
.doc-parties .lbl2 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 5px; }
.doc-parties h4 { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.doc-table { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 12.5px; }
.doc-table th { text-align: left; padding: 9px 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; font-weight: 700; border-bottom: 1.5px solid var(--doc-accent, #4f46e5); }
.doc-table th.r, .doc-table td.r { text-align: right; }
.doc-table td { padding: 11px 8px; border-bottom: 1px solid #eef2f7; vertical-align: top; color: #334155; }
.doc-table td.desc { color: #0f172a; font-weight: 550; white-space: pre-line; }
.doc-table td.r { font-variant-numeric: tabular-nums; }
.doc-sum { margin-top: 20px; display: flex; justify-content: flex-end; }
.doc-sum table { font-size: 13px; min-width: 268px; }
.doc-sum td { padding: 5px 0; color: #475569; }
.doc-sum td.r { text-align: right; font-variant-numeric: tabular-nums; color: #0f172a; font-weight: 600; }
.doc-sum tr.grand td { border-top: 1.5px solid #cbd5e1; padding-top: 12px; font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.doc-sum tr.grand td.r { color: var(--doc-accent, #4f46e5); }
.doc-foot { margin-top: 38px; display: flex; gap: 36px; font-size: 12px; color: #475569; }
.doc-foot > div { flex: 1; }
.doc-foot .lbl2 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 5px; }
.doc-foot p { white-space: pre-line; }
.doc-thanks { margin-top: 34px; padding-top: 16px; border-top: 1px solid #eef2f7; font-size: 11.5px; color: #94a3b8; display: flex; justify-content: space-between; gap: 16px; }

.paper[data-tpl="classic"] { font-family: Georgia, "Times New Roman", serif; }
.paper[data-tpl="classic"] .doc-title .t { font-weight: 700; letter-spacing: 0; }
.paper[data-tpl="classic"] .doc-table th { border-bottom-color: #334155; color: #334155; }
.paper[data-tpl="bold"] { padding-top: 0; }
.paper[data-tpl="bold"]::before { content: ""; display: block; height: 14px; background: var(--doc-accent, #4f46e5); margin: 0 -58px 40px; }
.paper[data-tpl="bold"] .doc-title .t { font-size: 37px; }
.paper[data-tpl="bold"] .doc-table th { background: var(--doc-accent, #4f46e5); color: #fff !important; border-bottom: 0; padding: 11px 10px; }
.paper[data-tpl="bold"] .doc-table th:first-child { border-radius: 7px 0 0 7px; }
.paper[data-tpl="bold"] .doc-table th:last-child { border-radius: 0 7px 7px 0; }

.mobile-bar { display: none; }
@media (max-width: 1040px) {
  .mobile-bar { display: flex; position: sticky; bottom: 0; z-index: 45; gap: 10px; padding: 11px 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); margin: 0 -22px; }
  .mobile-bar .btn { flex: 1; }
}

/* ---------- content ---------- */
.section { padding: 58px 0; }
.section + .section { border-top: 1px solid var(--line); }
h2.sec { font-size: clamp(1.5rem, 3.3vw, 2.05rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 15px; }
/* AAA+++ 2026-07-31: the legacy 40x3 rounded rule BELOW the heading is gone.
   The mechanics layer adds a 44x2 keel ABOVE it (h2.sec::before), so every
   section head on all 12 tools was rendering two accent rules bracketing the
   text — which reads as a mistake, not a motif. The keel is the doctrine;
   this was its predecessor. */
h3.sub { font-size: 1.1rem; font-weight: 700; letter-spacing: -.025em; margin: 26px 0 9px; }
.prose p { color: var(--ink-2); margin-bottom: 14px; line-height: 1.68; }
.prose ul, .prose ol { color: var(--ink-2); padding-left: 21px; margin-bottom: 14px; }
.prose li { margin-bottom: 7px; line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 650; }
.lead-note { color: var(--muted); font-size: .95rem; }

.checklist { list-style: none; padding: 0 !important; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.checklist svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 3px; }

.callout { padding: 17px 19px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-2); font-size: .93rem; margin: 20px 0; }
.callout b { color: var(--ink); }

.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; box-shadow: var(--shadow-xs); transition: border-color .16s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.faq summary { cursor: pointer; padding: 16px 19px; font-weight: 650; font-size: .96rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; border-radius: var(--radius); transition: none; }
.faq details:not([open]) summary:hover { background: var(--surface-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; line-height: 1; flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 19px 17px; color: var(--ink-2); font-size: .93rem; line-height: 1.66; }

.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 15px; margin-top: 18px; }
.rec { display: block; text-decoration: none; color: inherit; padding: 21px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: border-color .12s; }
.rec:hover { border-color: var(--accent); }
.rec h3 { font-size: 1.01rem; font-weight: 700; margin-bottom: 7px; letter-spacing: -.02em; }
.rec p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.rec .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-size: .85rem; font-weight: 700; }

.linkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 9px; margin-top: 16px; }
.linkgrid a { text-decoration: none; color: var(--ink-2); padding: 12px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .88rem; font-weight: 550; transition: border-color .12s; }
.linkgrid a:hover { border-color: var(--accent); color: var(--ink); }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 460px; }
.tbl-wrap th, .tbl-wrap td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl-wrap th { background: var(--surface-2); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tbl-wrap tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.tbl-wrap tbody tr { transition: none; }
.tbl-wrap tbody tr:hover td { background: var(--accent-soft); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 46px; background: var(--surface); }
.foot-in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.foot-in p, .foot-links a { color: var(--muted); font-size: .85rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 17px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--surface); padding: 12px 20px; border-radius: 13px;
  font-size: .88rem; font-weight: 650; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: border-color .12s; z-index: 95;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- print ---------- */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; position: static; }
  #print-root .paper { transform: none !important; width: 210mm !important; min-height: 297mm !important; box-shadow: none !important; border: 0 !important; padding: 16mm 15mm !important; font-size: 11pt; }
  .paper[data-tpl="bold"]::before { margin: 0 -15mm 34px !important; }
}
#print-root { display: none; }

/* =========================================================================
   IDENTITY B — "Studio Instrument" layer
   Numbers are the product: every figure a user reads or copies is set in
   tabular figures so columns align and values never jiggle as they update.
   ========================================================================= */
.v, .amt, .num, .out-val, .big, .result, .stat, .eq,
.trow b, .quick-answer b, .src-fact, .amount-input, .rate-custom,
.tbl-wrap td, .tbl-wrap th, .doc-table td.r, .doc-sum td.r,
input[type="number"], input[inputmode="decimal"], input[type="time"], input[type="date"],
output, time, td.r, .money, .pct {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Layout rhythm: input card -> giant result -> breakdown table -> sticky loop. */
.calc-card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.out-main .v, .out-val { color: var(--accent); letter-spacing: -.04em; }

/* Semantic colour is reserved for results, never for chrome. */
.is-pos, .val-pos, .delta-up { color: var(--pos); }
.is-neg, .val-neg, .delta-down { color: var(--neg); }

/* The sticky loop, as furniture. Also styled here so it survives on pages
   that do not inline NET_CSS (privacy, etc). */
.handoff {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 20px; padding: 15px 16px;
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--accent-soft);
}
.handoff .btn { flex: none; }

/* Motion: zero. Only state-change feedback (toast, focus) is allowed. */
.net-card:hover, .rec:hover, .btn:hover, .icon-btn:hover,
.linkgrid a:hover, .swatch:hover, .item .del:hover { transform: none; }

/* --- Follow strip (social distribution) ------------------------------------
   Added 2026-07-29. The NZ tool network is the portfolio's strongest audience
   match for Amit's own channels — sole traders and small-business owners are
   exactly who his marketing content is for. Quiet by design: a standing credit
   line, never louder than the tool itself. */
.soc-strip{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;
}
.soc-lead{margin:0;font-size:.88rem;line-height:1.5;color:var(--muted);max-width:56ch}
.soc-lead strong{color:var(--ink);font-weight:600}
/* The publisher's name is the one human path from a tool back to the hub.
   Underlined rather than accent-coloured so it reads as a credit, not a CTA. */
.soc-name{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.soc-name:hover,.soc-name:focus-visible{text-decoration-color:var(--accent)}
.soc-name:hover strong,.soc-name:focus-visible strong{color:var(--accent)}
.soc-links{display:flex;flex-wrap:wrap;gap:.5rem}
.soc-link{
  display:inline-block;padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;line-height:1.35;color:var(--ink);text-decoration:none;background:var(--surface);
}
.soc-link:hover,.soc-link:focus-visible{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){
  .soc-strip{flex-direction:column;align-items:flex-start}
  .soc-lead{max-width:none}
}

/* ------------------------------------------------- affiliate offer block
   Rendered by _shared/offers.mjs (renderOffer). One per page, after the
   answer. Uses the existing tokens so it inherits whichever identity the
   site wears. See _plans/AFFILIATE-REVENUE-PLAN.md §5 for the placement
   rules this component exists to satisfy. */
.aff-offer{border:1px solid var(--line,#e6e1d8);border-radius:16px;padding:20px 22px;margin:32px 0;background:var(--card,#fff)}
.aff-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted,#6b6459);margin:0 0 6px}
.aff-title{font-size:20px;margin:0 0 6px;line-height:1.25}
.aff-context{margin:0 0 8px;font-weight:600}
.aff-blurb{margin:0 0 10px;color:var(--muted,#6b6459)}
.aff-disclosure{font-size:12.5px;line-height:1.5;color:var(--muted,#6b6459);margin:0 0 12px}
.aff-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--site-accent,#4f46e5);color:#fff;font-weight:650;text-decoration:none}
.aff-cta svg{width:17px;height:17px}
.aff-cta:hover{filter:brightness(1.07)}
[data-theme="dark"] .aff-offer{background:var(--card,#171512)}

/* ============================================================================
   AAA+++ STUDIO PREMIUM — Identity B ("Studio Instrument") mechanics
   Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §2.2, §3, §4 (calculator-card row).
   Identity B has no serif, so its premium register is weight discipline
   (400/500/650) plus the mono voice on every figure. Instruments are smooth:
   the tools deliberately do NOT get Identity A's paper grain, and that
   difference is itself a brand cue.
   ========================================================================== */

/* ---- the mono "spec" voice --------------------------------------------- */
/* Dates, IRD citations, rate vintages, SKUs, units and step numbers. Without
   this register a calculator reads as a form; with it, as an instrument. */
.spec,
.srcline,
.crumbs,
.vintage,
.freshness,
.kicker,
.eyebrow,
.cite {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums lining-nums;
}
.spec, .cite { color: var(--muted); }
.kicker, .eyebrow { text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-2); }

/* ---- tabular numerals with intent ------------------------------------- */
/* Any number a reader compares or copies. Live calculators re-render on every
   keystroke, so proportional figures make the result column jiggle — the
   fastest way for an instrument to look unmeasured. */
.num,
td.n,
.result-v,
.res-v,
table td,
table th,
.pager,
input[type="number"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- the keel (section datum line) ------------------------------------ */
h2.sec::before,
.keel::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 14px;
}

/* ---- elevation: exactly ONE floating object per page ------------------- */
/* Everything used to float a little, which is how elevation stops meaning
   anything. The calculator card is the object that asks for action; it floats.
   Nothing else does. In dark mode nothing floats at all — elevation there is a
   surface step plus a hairline. */
.card, .rec, .tbl-wrap, .faq details, .seg button[aria-pressed="true"] { box-shadow: none; }
.calc-card { box-shadow: var(--shadow); border-radius: var(--radius-lg); }
:root[data-theme="dark"] .calc-card {
  box-shadow: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
}

/* ---- sticky header: solid, not blurred -------------------------------- */
/* backdrop-filter on a sticky header costs a compositor pass on every scroll
   frame on mobile, and the frosted look is the most recognisable SaaS-template
   cue in the whole system. A solid surface with one hairline is cheaper and
   reads more expensive. */
.site-head {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-head .brand-sub {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- input wells ------------------------------------------------------- */
/* Pill inputs on a floating card read as a signup form. A sunken well with an
   inset hairline reads as a field on an instrument. 48px keeps the mobile tap
   target honest. */
/* type="time" was missing, which is the PRIMARY input on the hours calculator —
   its fields were the only ones on the site not wearing the well treatment. */
.calc-card input[type="text"],
.calc-card input[type="number"],
.calc-card input[type="date"],
.calc-card input[type="time"],
.calc-card input[type="email"],
.calc-card input[type="tel"],
.calc-card input[inputmode="decimal"],
.calc-card select,
.field input,
.field select {
  min-height: 48px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(10, 16, 32, .05);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.calc-card input:focus-visible,
.calc-card select:focus-visible,
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
:root[data-theme="dark"] .calc-card input,
:root[data-theme="dark"] .calc-card select { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4); }

/* ---- the result ------------------------------------------------------- */
.result-v, .res-v {
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink-num);
}
.result-u, .res-u {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- focus & hover with intent ---------------------------------------- */
a.draw,
.rel-card .rel-t {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-med) var(--ease-out);
}
a.draw:hover, a.draw:focus-visible, .rel-card:hover .rel-t { background-size: 100% 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---- the sticky-loop handoff as furniture ----------------------------- */
/* hours -> invoice, quote -> invoice, gst -> invoice, markup -> quote,
   rate -> quote, mileage -> invoice. This was a text link at the bottom of the
   page; as a full button block carrying the computed state it becomes product
   UX, which is why the rulebook exempts it from the cross-site link caps. */
.handoff {
  display: block;
  margin: var(--s4, 24px) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease-out);
}
.handoff:hover { border-color: var(--accent); }
.handoff .handoff-k { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 5px; }
.handoff .handoff-t { font-weight: 650; font-size: 1.02rem; }
.handoff .handoff-w { display: block; color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
@media (max-width: 640px) { .handoff { text-align: left; } }

/* ---- the promoted source / citation line ------------------------------ */
/* On the NZ tools the source line is the whole trust argument: an IRD-cited
   GST formula is worth more than any amount of styling. No figure without a
   source line, no source line without a date. */
.srcline {
  display: block;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 12px;
  color: var(--muted);
  text-transform: uppercase;
}
.srcline .sep { color: var(--line-2); margin: 0 .5em; }
.srcline a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.srcline a:hover { color: var(--ink-2); border-bottom-color: var(--accent); }

/* ---- the COMPACT source line, inside the instrument -------------------- */
/* DESIGN-MODERNISATION-2026-08 §3.1. Measured at a real 375x812 viewport, the
   full .srcline block on the tools landed at 1544px — a whole screen below the
   fold — on the cluster whose entire pitch is "IRD-cited". The trust signal has
   to travel WITH the number it vouches for, so this is a second, compact copy
   that lives inside .calc-card directly under the result row.
   It is exempt from the one-srcline rule only because it cites the SAME source
   as the full block below; if the two ever disagree, the bug is this rule.
   No new colour is introduced (--muted on --surface, already in the palette and
   already covered by contrast-check.mjs) — deliberately, so this change cannot
   move a contrast pair. */
.srcline-min {
  display: block;
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
  text-align: left;
}
.srcline-min .sep { color: var(--line-2); margin: 0 .45em; }
.srcline-min a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.srcline-min a:hover { color: var(--ink-2); border-bottom-color: var(--accent); }
/* Inside the card it sits flush with the card's own padding box. */
.calc-card > .srcline-min { margin-top: 14px; }

/* ---- the method mini-spec --------------------------------------------- */
.method ol { list-style: none; margin: 0; padding: 0; counter-reset: mstep; }
.method li {
  counter-increment: mstep;
  border-top: 1px solid var(--line);
  padding: 14px 0 14px 44px;
  position: relative;
  color: var(--ink-2);
}
.method li:last-child { border-bottom: 1px solid var(--line); }
.method li::before {
  content: counter(mstep, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .06em; color: var(--accent-2);
}
.method .formula {
  font-family: var(--mono);
  font-size: .875rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 0;
  overflow-x: auto;
  white-space: pre;
}

/* ---- related cards that earn the click -------------------------------- */
.rel-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }
.rel-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast) var(--ease-out);
}
.rel-card:hover { border-color: var(--line-2); border-top-color: var(--accent); }
.rel-card .rel-t { font-weight: 650; color: var(--ink); font-size: 1.02rem; align-self: flex-start; }
.rel-card .rel-why { color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin: 0; }
.rel-card .freshness { margin-top: auto; padding-top: 10px; color: var(--muted); align-self: flex-end; }
/* The bridge card's dashed edge shipped in Identity A but was never added
   here, so `toolRelCards` rendered its one out-of-cluster card identically to
   the siblings — losing the "different family" grammar that stops a reader
   being surprised by where it lands. */
.rel-card.bridge { border-style: dashed; border-top-style: solid; background: var(--surface-2); }

/* ---- netbar promoted -------------------------------------------------- */
/* FIX 2026-07-31: these targeted .net-label / .net-dot, but network.mjs's
   netBar() emits .netbar-label and .nb-dot — so both rules were dead CSS on
   all 12 tools. Same class of bug as the Identity A .net-dot slip. */
.netbar .netbar-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.netbar .nb-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ---- entrance choreography ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: aaa-rise 420ms var(--ease-out) both; }
  .reveal-2 { animation-delay: 60ms; }
  .reveal-3 { animation-delay: 120ms; }
  @keyframes aaa-rise { from { opacity: 0; transform: translateY(12px); } }
}
/* PRINT FIX 2026-08-04 — see the matching note in datasite.css. `both` applies
   the opacity-0 `from` keyframe in print even though the animation never runs,
   so the revealed hero printed blank. Identity B matters more here than the
   ring does: people genuinely print an invoice, a quote and a receipt. */
@media print {
  .reveal, .reveal-2, .reveal-3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- confident emptiness --------------------------------------------- */
.breathe { min-height: 18vh; }
@media (max-width: 640px) { .breathe { min-height: 10vh; } }

/* ---- the AdSense slot (pre-built 2026-08-04) --------------------------
   Identity B's cut of the same component. Inert until AD_SLOTS carries a
   real slot id; written now so the first paste does not ship ~90,000
   unstyled ad blocks. Same three rules as Identity A — look foreign,
   reserve the space, stay quiet — expressed as an instrument would: a
   sunken well rather than a ruled band, because that is how this identity
   already marks "not the page's own voice". */
.ad-slot {
  display: block;
  margin: 40px auto;
  padding: 12px 14px 14px;
  background: var(--surface-sunken, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  clear: both;
}
.ad-label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  text-align: left;
}
.ad-slot .adsbygoogle { display: block; width: 100%; }
.ad-slot--pre-footer { max-width: 1100px; margin-top: 48px; }
@media (max-width: 640px) { .ad-slot { margin: 28px auto; } }