/* ==========================================================================
   FinancialStatements.ca — Ink & Butter

   Follows the approved MITEY engine system used by Calculating.ca and
   mitey.ca: warm paper, near-black ink, a butter hero, pill actions, heavy
   tight DM Sans headlines and generous white cards. Blue is reserved for
   Mitey's eyes, so it never appears in UI colour.

   The site's own signature is the financial statement itself: right-aligned
   tabular figures, a single rule before a subtotal, a double rule under a
   total, negatives in brackets and a note column. It is kept inside the
   white statement card.

   Self-hosted DM Sans (OFL, provenance in ASSETS.md). No external requests.
   ========================================================================== */

@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans.woff2') format('woff2'); font-style: normal; font-weight: 400 800; font-display: swap; }

:root {
  --paper: #fbfaf3;
  --white: #fffefa;
  --surface: #eeede2;
  --ink: #252521;
  --ink-2: #3f3e37;
  --muted: #6a695e;
  --line: #deddd2;
  --line-2: #cecec4;
  --butter: #e9d582;
  --butter-soft: #f5eac1;
  --butter-pale: #f8f1d6;
  --gold: #b89b36;
  --gold-deep: #76600d;   /* accents and focus; 5.6:1 on paper */
  --flag: #a45131;        /* warning markers and negative figures */
  --flag-wash: #f6e4da;
  --ok: #4f6b3a;
  --ok-wash: #e6ecda;

  --sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --wrap: 1400px;
  --narrow: 760px;
  --r-card: 18px;
  --r-big: 26px;
  --shadow: 0 14px 45px #6058320d;
  --shadow-lift: 0 18px 50px #60583218;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--butter-soft); }
.skip { position: absolute; top: -100px; left: 12px; z-index: 200; background: var(--white); padding: 12px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* overflow-wrap: a long single word ("FinancialStatements.ca") at display size is
   wider than a phone. */
h1, h2, h3, h4 { font-weight: 780; letter-spacing: -0.045em; line-height: 1.08; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.06em; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.03em; line-height: 1.2; }
h4 { font-size: 1rem; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45; color: var(--ink-2); }
.eyebrow { font: 700 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.eyebrow--gold { color: var(--gold-deep); }
.small { font-size: 0.86rem; }
.muted { color: var(--muted); }
.fig, .num { font-variant-numeric: tabular-nums lining-nums; }

.prose > * + * { margin-top: 1.05rem; }
.prose { font-size: 1.04rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { margin-top: 3rem; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); }
.prose h3 { margin-top: 2rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 680; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.narrow { max-width: var(--narrow); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band { background: var(--surface); }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* minmax(0, 1fr): an implicit column grows to a wide table's min-content and
   overflows phones instead of letting .tbl-wrap scroll. */
.split { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); }
.split > * { min-width: 0; }
@media (min-width: 980px) {
  .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .aside-sticky { position: sticky; top: 6.5rem; }
}
.stack > * + * { margin-top: 16px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: clamp(26px, 4vw, 44px); }
.head > div { max-width: 40rem; }
.head h2 { margin-top: 12px; }
.head p { color: var(--muted); font-size: 0.95rem; }
.head > p { max-width: 24rem; }

/* --------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 13px 24px; border: 1px solid var(--ink); border-radius: 40px; background: var(--ink); color: var(--paper); font: 650 14px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: #434339; color: var(--paper); transform: translateY(-1px); }
.btn::after { content: '↗'; font-size: 0.95em; }
.btn--plain::after, button.btn::after { content: none; }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface); color: var(--ink); }
.btn--butter { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.btn--butter:hover { background: #dfc96b; color: var(--ink); }
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { font-size: 13px; font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- header */

.site-header { position: sticky; top: 0; z-index: 50; background: #fbfaf3f2; backdrop-filter: blur(10px); border-bottom: 1px solid #e5e2d5; }
.masthead { max-width: var(--wrap); margin-inline: auto; padding: 14px clamp(20px, 4vw, 40px); min-height: 84px; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.wordmark { font-weight: 800; font-size: 29px; letter-spacing: -1.6px; line-height: 1; white-space: nowrap; }
.wordmark > span { color: var(--gold); }
.by-mitey { font-size: 13px; white-space: nowrap; color: var(--ink-2); }
.by-mitey strong { font-size: 20px; letter-spacing: -1px; font-weight: 800; color: var(--ink); }
.nav { display: none; gap: 26px; margin-left: auto; }
.nav a { font-size: 14px; font-weight: 550; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--gold-deep); }
.nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--gold); }
.header-cta { display: none; }
@media (min-width: 1100px) { .nav { display: flex; } .header-cta { display: inline-flex; } .menu-toggle { display: none; } }
@media (max-width: 1240px) and (min-width: 1100px) { .by-mitey { display: none; } }
.menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 40px; background: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; }
/* A 22-character domain at 29px plus the Menu button does not fit 375px. */
@media (max-width: 600px) {
  .masthead { gap: 12px; min-height: 72px; }
  .wordmark { font-size: 21px; letter-spacing: -1px; }
  .by-mitey { font-size: 12px; }
  .by-mitey strong { font-size: 16px; }
  .menu-toggle { padding: 8px 14px; min-height: 44px; flex: none; }
  .brand { min-width: 0; }
}
/* After the base .menu-toggle rule, or the base rule wins and shows it on desktop. */
@media (min-width: 1100px) { .menu-toggle { display: none; } }
.menu-panel { border-top: 1px solid var(--line); background: var(--paper); padding: 8px clamp(20px, 4vw, 40px) 22px; }
.menu-panel a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; text-decoration: none; }
.menu-panel .btn { margin-top: 18px; width: 100%; }
@media (min-width: 1100px) { .menu-panel { display: none !important; } }

/* ------------------------------------------------------------- butter hero */

.butter-hero { position: relative; overflow: hidden; background: linear-gradient(110deg, #f4e4a8, #efdb8c 65%, #e9d582); }
.butter-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; max-width: var(--wrap); margin-inline: auto; padding: 46px clamp(20px, 4vw, 40px) 96px; }
@media (min-width: 900px) { .butter-hero__in { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); min-height: 560px; } }
.butter-hero__copy { position: relative; z-index: 2; }
.butter-hero .eyebrow { color: #5f5630; margin-bottom: 22px; }
.butter-hero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 800; letter-spacing: -0.065em; line-height: 1.0; max-width: 12ch; }
.butter-deck { margin-top: 22px; max-width: 38rem; font-size: clamp(1.15rem, 2vw, 1.75rem); line-height: 1.35; color: #454334; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; max-width: 42rem; }
.chips a { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 16px; border-radius: 30px; background: #fffefab0; border: 1px solid #fffefa8c; font-size: 13px; font-weight: 550; color: var(--ink); text-decoration: none; }
.chips a::after { content: '↗'; margin-left: 8px; font-size: 12px; }
.chips a:hover { background: var(--paper); color: var(--ink); }
.values { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; font-size: 13px; color: #484531; list-style: none; padding: 0; }
.values li::before { content: '✓'; margin-right: 7px; font-weight: 700; }

.butter-art { position: relative; min-height: 420px; align-self: end; display: flex; justify-content: center; isolation: isolate; }
.butter-art img { position: relative; z-index: 2; width: min(500px, 104%); margin-bottom: 8px; height: auto; filter: drop-shadow(0 20px 12px #584c2915); align-self: end; }
.butter-sun { position: absolute; z-index: 0; top: 0; width: 420px; max-width: 105%; aspect-ratio: 1; background: var(--paper); border-radius: 50% 50% 18% 38%; }
.butter-terrain { position: absolute; z-index: 1; bottom: -2px; left: -25%; width: 150%; height: 240px; opacity: 0.85; }
.butter-note { position: absolute; z-index: 3; bottom: 18px; right: 0; padding: 10px 20px; border-radius: 25px; background: #fffefaec; box-shadow: 0 7px 24px #514c2e12; font-size: 14px; font-weight: 600; }
@media (max-width: 899px) {
  .butter-hero__in { padding-bottom: 72px; }
  .butter-art { min-height: 300px; }
  .butter-art img { width: min(320px, 80%); }
  .butter-sun { width: 300px; }
  .butter-terrain { height: 170px; }
}
/* Phones: a smaller arch, and only two question chips (the rest stay a tap away). */
@media (max-width: 600px) {
  .butter-hero__in { padding-top: 30px; }
  .butter-art { min-height: 220px; }
  .butter-sun { width: 230px; }
  .butter-art img { width: min(270px, 78%); }
  .butter-terrain { height: 120px; }
  .butter-note { font-size: 12px; padding: 7px 13px; bottom: 6px; }
  .chips a:nth-child(n + 3) { display: none; }
}

/* Smaller butter band for guide and tool pages. */
.page-head { background: linear-gradient(110deg, #f6e9b6, #f1df98 70%, #ecd98a); }
.page-head__in { max-width: var(--wrap); margin-inline: auto; padding: 18px clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px); }
.page-head h1 { margin-top: 18px; max-width: 18ch; font-size: clamp(2.2rem, 4.6vw, 4rem); }
.page-head .lede { margin-top: 18px; max-width: 46rem; color: #454334; }
.page-head .eyebrow { color: #5f5630; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Mitey sits on the bottom edge of every page head, chosen per section in layout.mjs. */
.page-head__in { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.page-head__copy { min-width: 0; }
.page-head__art { align-self: end; justify-self: end; margin-bottom: calc(-1 * clamp(40px, 5vw, 64px)); }
.page-head__art img { display: block; width: auto; height: 170px; max-width: 210px; object-fit: contain; object-position: bottom; margin-top: -24px; filter: drop-shadow(0 14px 10px #584c2918); }
@media (min-width: 900px) {
  .page-head__in { grid-template-columns: minmax(0, 1fr) 280px; }
  .page-head__art img { height: 300px; max-width: 300px; margin-top: 0; }
}
.meta-line { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: #5f5630; }
.meta-line span::before { content: '✓'; margin-right: 6px; font-weight: 700; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #5f5630; }
.crumbs a { color: #5f5630; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs--plain { padding-top: 18px; color: var(--muted); }
.crumbs--plain a { color: var(--muted); }

/* ------------------------------------------------------ overlapping card */

.lift { position: relative; z-index: 3; margin-top: -56px; }
.workcard { background: var(--white); border: 1px solid #e4e1d6; border-radius: var(--r-big); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); }
.workcard > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 28px; margin-bottom: 26px; }
.workcard > header h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 8px; }
.workcard > header p:not(.eyebrow) { margin-top: 8px; color: var(--muted); font-size: 14px; }
.work-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.75fr); gap: 32px; } .work-inputs { border-right: 1px solid var(--line); padding-right: 32px; } }
@media (max-width: 959px) { .work-inputs { border-bottom: 1px solid var(--line); padding-bottom: 26px; } }
.work-inputs { display: grid; gap: 14px; align-content: start; }
.work-inputs label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.work-inputs label > span { display: flex; align-items: center; width: 52%; max-width: 180px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 6px 10px; flex-shrink: 0; }
.work-inputs label > span b { font-weight: 400; color: var(--muted); }
.work-inputs input { width: 100%; min-width: 0; min-height: 36px; border: 0; padding: 4px 6px; background: transparent; font-size: 19px; font-variant-numeric: tabular-nums; }
.work-inputs input:focus { outline: none; }
.work-inputs label > span:focus-within { border-color: var(--gold-deep); box-shadow: 0 0 0 3px #e9d58266; }
.work-result > p { font-size: 14px; color: var(--muted); }
.work-result > p:first-child { color: var(--ink); font-weight: 650; }
.big-number { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; line-height: 1; }
.big-number strong { font-size: clamp(56px, 7vw, 76px); font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.big-number span { font-size: 26px; font-weight: 700; }
.compare-bars { display: grid; gap: 12px; margin-top: 20px; }
.compare-bars div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 6rem; align-items: center; gap: 12px; font-size: 13px; }
.compare-bars i { display: block; height: 18px; border-radius: 4px; background: linear-gradient(90deg, #f2e4ad, #e9d582); min-width: 2px; }
.compare-bars div:first-child i { background: #b79c3e; }
.compare-bars b { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
/* On phones the label and value columns leave the bar ~40px; give it its own row. */
@media (max-width: 600px) {
  .compare-bars div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .compare-bars i { grid-column: 1 / -1; grid-row: 2; }
}
.work-aside { align-self: start; border-radius: var(--r-card); background: var(--butter-pale); padding: 20px; color: #514d39; font-size: 13px; line-height: 1.7; }
.work-aside h3 { font-size: 16px; margin: 6px 0 8px; }
.work-aside .verdict-flag { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; }

/* ------------------------------------------------------------ question row */

.question-row { border-bottom: 1px solid var(--line); }
.question-row__in { max-width: var(--wrap); margin-inline: auto; padding: 22px clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; }
.question-row a { font-size: 14px; font-weight: 600; text-decoration: none; }
.question-row a::after { content: ' ↗'; }

/* --------------------------------------------------------- workspace cards */

.workspaces { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.workspace { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.workspace:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.workspace__top { display: flex; align-items: center; gap: 14px; }
.icon-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--butter-soft); font-size: 18px; font-weight: 700; flex: none; }
.workspace h3 { margin-top: 22px; font-size: 1.5rem; }
.workspace > p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.workspace ul { list-style: none; padding: 0; margin-top: 22px; border-top: 1px solid var(--line); }
.workspace li a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; text-decoration: none; }
.workspace li a::after { content: '↗'; color: var(--muted); }
.workspace li a:hover { color: var(--gold-deep); }
.workspace .more { margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 650; text-decoration: none; }
.workspace .more::after { content: ' →'; }

/* ------------------------------------------------------ pointing showcase */

.showcase { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) { .showcase { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; } }
.showcase__art { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 4px; align-items: end; }
.showcase__art img { width: 180px; height: auto; align-self: end; margin-bottom: -10px; }
@media (max-width: 700px) { .showcase__art { grid-template-columns: minmax(0, 1fr); } .showcase__art img { display: none; } }

/* ----------------------------------------------------------- numbered list */

.numbered { list-style: none; padding: 0; counter-reset: n; border-top: 1px solid var(--line); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-size: 12px; color: var(--muted); padding-top: 4px; }
.numbered h3 { font-size: 1.1rem; }
.numbered p { margin-top: 6px; color: var(--muted); font-size: 14px; }

.columns4 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.columns4 > div { border-top: 1px solid #cfcdbe; padding-top: 14px; }
.columns4 .n { font-size: 12px; color: var(--muted); }
.columns4 h3 { margin-top: 22px; font-size: 1.15rem; }
.columns4 p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------------ cards */

.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; text-decoration: none; color: inherit; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
a.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: inherit; }
.card h3 { margin-top: 14px; font-size: 1.3rem; }
.card p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.card__go { display: block; margin-top: auto; padding-top: 18px; font-weight: 650; font-size: 13px; }
.card__go::after { content: ' ↗'; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.panel--butter { background: var(--butter-pale); border-color: #ece0b4; }

.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 20px; background: var(--white); border: 1px solid #fffefa8c; font: 700 11px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.tag--ab, .tag--ca { background: #fffefab0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- callouts */

.answer { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 2.6vw, 28px); box-shadow: var(--shadow); }
.answer__k { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.answer__k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.answer p { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.45; font-weight: 520; letter-spacing: -0.015em; color: var(--ink); }
.answer p + p { margin-top: 12px; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }

.note { border-radius: 14px; background: var(--surface); padding: 18px 20px; font-size: 0.95rem; color: var(--ink-2); }
.note--flag { background: var(--flag-wash); }
.note--ok { background: var(--ok-wash); }
.note--law { background: var(--butter-pale); }
.note__k { font: 700 11px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.note--flag .note__k { color: var(--flag); }
.note p + p { margin-top: 8px; }

/* ------------------------------------------------------------------ tables */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { font: 700 11px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: #f6f5ec; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 620; color: var(--ink); }
.tbl .fig { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.facts { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 20px; }
.facts div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 620; }

/* ------------------------------------------------------------- statement */

/* A financial statement, rendered as a real accessible table. */
.sheet { background: var(--white); border: 1px solid #e4e1d6; border-radius: var(--r-big); box-shadow: var(--shadow); }
.statement { padding: clamp(18px, 3vw, 30px); }
.statement__title { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.statement__entity { font: 700 10.5px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.statement__name { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.03em; margin-top: 6px; }
.statement__date { color: var(--muted); font-size: 0.86rem; margin-top: 2px; }
.st { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums lining-nums; }
.st th, .st td { padding: 6px 6px; vertical-align: bottom; }
.st thead th { font: 700 10.5px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; border-bottom: 1px solid var(--line-2); padding-bottom: 8px; }
.st thead th:first-child { text-align: left; }
.st td.n, .st th.n { text-align: right; white-space: nowrap; width: 7.2rem; }
/* `.nt`, not `.note`: .note is the callout component. */
.st .nt { width: 2.4rem; text-align: center; color: var(--muted); font-size: 0.75rem; }
.st .grp td { padding-top: 16px; font-weight: 750; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.st .ind td:first-child { padding-left: 14px; color: var(--ink-2); }
.st .sub td.n { border-top: 1px solid #8e8c7e; }
.st .sub td:first-child { padding-left: 14px; color: var(--muted); }
.st .tot td { font-weight: 750; }
.st .tot td.n { border-top: 1px solid #8e8c7e; border-bottom: 3px double #8e8c7e; }
.st .neg { color: var(--flag); }
.statement__foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); text-align: center; }

.mk { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--flag); color: #fff; font: 700 11px/1 var(--sans); vertical-align: 0.1em; margin-left: 6px; }
.mk--ok { background: var(--ok); }
.mk--nv { background: var(--ink); }
.annos { list-style: none; padding: 0; display: grid; gap: 14px; }
.annos li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 0.95rem; color: var(--ink-2); }
.annos li .mk { margin: 2px 0 0; }
.annos strong { color: var(--ink); }

/* ---------------------------------------------------------------- guides */

.toc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; font-size: 14px; }
.toc ol { margin-top: 10px; padding-left: 1.2rem; display: grid; gap: 6px; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--gold-deep); text-decoration: underline; }
.sources { margin-top: 3rem; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.sources h2 { font-size: 1.1rem !important; margin: 0 !important; }
.sources ol { margin-top: 10px; padding-left: 1.2rem; display: grid; gap: 8px; color: var(--muted); }
.checklist { list-style: none; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist .box { width: 18px; height: 18px; border: 2px solid var(--line-2); border-radius: 5px; margin-top: 3px; }
.checklist .why { display: block; color: var(--muted); font-size: 0.86rem; margin-top: 2px; }
.checklist .ref { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- faq */

.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 680; font-size: 1.05rem; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--butter-soft); font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 22px 20px; color: var(--ink-2); font-size: 0.97rem; max-width: 70ch; }

/* ----------------------------------------------------------------- forms */

.form { display: grid; gap: 16px; }
.row2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* align-content: start, or a field without a hint stretches its input to match a
   neighbour that has one. */
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; align-content: start; }
.field label, .field .lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
/* Checkboxes and radios also live inside .field, so only text-like inputs get the box. */
.field input:not([type='checkbox']):not([type='radio']), .field select, .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; font-size: 16px; appearance: none; }
.field input:not([type='checkbox']):not([type='radio']):focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px #e9d58266; }
.field textarea { min-height: 7rem; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.hint { font-size: 13px; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.field label.check, .check { display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.check:has(input:checked) { border-color: var(--ink); background: var(--butter-pale); }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { padding: 14px 16px; border-radius: 12px; font-size: 14px; background: var(--ok-wash); }
.status--err { background: var(--flag-wash); }
legend.lbl { font-size: 14px; font-weight: 650; margin-bottom: 8px; }

/* ------------------------------------------------------------------ tools */

.tool { background: var(--white); border: 1px solid #e4e1d6; border-radius: var(--r-big); box-shadow: var(--shadow); overflow: hidden; }
.tool__head { padding: 20px 26px 0; }
.tool__head + .tool__head, .tool__body + .tool__head { border-top: 1px solid var(--line); padding-top: 20px; }
.tool__body { padding: 16px 26px 24px; display: grid; gap: 16px; }
.money { position: relative; }
.money input { padding-left: 30px !important; text-align: right; font-variant-numeric: tabular-nums; }
.money::before { content: '$'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.result { background: var(--butter-pale); padding: 24px 26px 28px; border-top: 1px solid #ece0b4; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.kpi { background: var(--white); border-radius: 14px; padding: 14px 16px; }
.kpi__k { font: 700 10.5px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kpi__v { margin-top: 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.flags { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 18px; }
.flags li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 0.95rem; }
.flags li .mk { margin: 2px 0 0; }
.verdict { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; }

.nw-line { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 2rem; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.nw-line input[type='text'] { border: 0; background: transparent; padding: 10px 4px; font-size: 15px; width: 100%; min-width: 0; }
.nw-line input[type='text']:focus { outline: 2px solid var(--butter); border-radius: 6px; }
.nw-line .money input { width: 100%; min-height: 42px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 8px 10px 8px 26px; }
.nw-line .money::before { left: 11px; }
.nw-line button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; min-height: 40px; }
.nw-line button:hover { color: var(--flag); }
.nw-add { margin-top: 10px; min-height: 40px; border: 1px dashed var(--line-2); border-radius: 30px; background: transparent; padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--muted); }
.nw-total { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 2rem; gap: 8px; padding: 10px 0; font-weight: 750; }
.nw-total span:nth-child(2) { text-align: right; border-top: 1px solid #8e8c7e; padding-top: 6px; font-variant-numeric: tabular-nums; }
.nw-total--grand { font-size: 1.15rem; }
.nw-total--grand span:nth-child(2) { border-bottom: 3px double #8e8c7e; }

/* ------------------------------------------------------- review / contact */

.review-band { background: var(--butter-pale); }
.review-card { position: relative; background: var(--white); border: 1px solid #ece0b4; border-radius: var(--r-big); padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow); }
.review-card__peek { display: block; width: 210px; height: auto; margin: -150px auto -6px; position: relative; z-index: 1; }
@media (max-width: 979px) { .review-card__peek { width: 170px; margin-top: -10px; } }

/* ----------------------------------------------------------------- footer */

.site-footer { margin-top: clamp(3rem, 6vw, 5rem); background: var(--surface); border-top: 1px solid var(--line); }
.site-footer__in { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px) 30px; }
.footer-top { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.footer-top > div { min-width: 0; }
.footer-top .wordmark { font-size: 24px; letter-spacing: -1.2px; }
@media (min-width: 1100px) { .footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } }
.footer-mitey { display: block; width: 104px; height: auto; margin: -8px 0 12px -6px; }
.footer-top .tagline { margin-top: 20px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.site-footer h4 { font-size: 13px; letter-spacing: 0; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer a { font-size: 14px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid #cfcdbe; display: grid; gap: 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); max-width: 96ch; }
.footer-bottom { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- journey */

/* The home page's five-step buyer journey: a dashed path with Mitey at each stop. */
.journey { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 28px; position: relative; }
.journey::before { content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; border-left: 2px dashed #d6c47a; display: none; }
.journey__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; position: relative; }
.journey__art { position: relative; display: flex; justify-content: center; align-items: end; min-height: 200px; isolation: isolate; }
.journey__art img { position: relative; z-index: 1; width: 200px; max-height: 240px; object-fit: contain; height: auto; filter: drop-shadow(0 16px 10px #584c2915); }
.journey__sun { position: absolute; z-index: 0; bottom: 6px; width: 190px; aspect-ratio: 1; border-radius: 50% 50% 18% 38%; background: linear-gradient(140deg, #f6e9b6, #ecd98a); }
.journey__copy { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 26px 24px 24px; box-shadow: 0 18px 40px -28px #584c2940; position: relative; }
.journey__copy h3 { margin-top: 8px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.journey__copy p:not(.eyebrow) { margin-top: 10px; color: #454334; }
.journey__copy .more { display: inline-block; margin-top: 14px; }
.journey__n { position: absolute; top: -16px; left: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--butter); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
@media (min-width: 900px) {
  .journey { gap: 12px; }
  .journey::before { display: block; }
  .journey__step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .journey__step:nth-child(even) .journey__art { order: 2; }
  .journey__art { min-height: 300px; }
  .journey__art img { width: 300px; max-height: 320px; }
  .journey__sun { width: 280px; }
  /* The badge sits on the dashed path, in the middle of the 72px gap. */
  .journey__n { top: 50%; transform: translateY(-50%); left: -54px; }
  .journey__step:nth-child(even) .journey__n { left: auto; right: -54px; }
}

/* Scroll reveal, added by nav.js only when motion is welcome. Content is visible without it. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* 404: Mitey with the lantern. */
.lost { display: grid; gap: 24px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.lost__art { width: 220px; height: auto; justify-self: center; }
@media (min-width: 900px) { .lost { grid-template-columns: minmax(0, 1fr) 340px; } .lost__art { width: 340px; } }

/* ------------------------------------------------------------------ print */

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .no-print, .btn-row, .nw-add, .nw-line button, .butter-art, .chips, .review-card__peek, .page-head__art, .journey__art { display: none !important; }
  .page-head, .butter-hero { background: #fff; }
  .sheet, .tool, .checklist, .facts { box-shadow: none; }
  .print-title { display: block !important; }
}
.print-title { display: none; }