:root{
  /* App palette */
  --bg:#F8FAFB;                 /* page background — same as the app */
  --card:#FFFFFF;
  --ink:#000000;                /* primary text */
  --ink-66:rgba(0,0,0,.66);     /* secondary text / inactive nav */
  --ink-45:rgba(0,0,0,.45);
  --ink-30:rgba(0,0,0,.30);
  --profit:#32D347;             /* income / data highlight, "Sold" green */
  --action:#1E76F1;             /* clickable text, selected state */
  --accent:#E58025;             /* "Add New Item" orange — primary buttons */
  --accent-hover:#F08F38;
  --cat:#BBCBF7;                /* small category header bg / chip outline */
  --loss:#E14B4B;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.14);

  /* NEUMORPHISM1 — exactly as in the app */
  --neu:5px 5px 30px rgba(174,174,174,.40), -10px -10px 30px rgba(255,255,255,.71);
  --neu-soft:4px 4px 22px rgba(174,174,174,.30), -8px -8px 22px rgba(255,255,255,.71);

  --font-body:'Roboto Flex', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'Roboto Mono','SF Mono',ui-monospace,Menlo,monospace;

  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
  --max:1080px;

  /* type scale — one ladder for the whole site */
  --fs-3xs:.68rem;   /* micro mono: pills, column headers */
  --fs-2xs:.75rem;   /* eyebrow, labels, footnotes */
  --fs-xs:.85rem;    /* nav, footer links, hints */
  --fs-sm:.95rem;    /* card body text */
  --fs-base:1rem;    /* buttons, brand, ui */
  --fs-md:1.0625rem; /* body copy */
  --fs-lede:1.125rem;/* section ledes + hero sub */
  --fs-h3:1.05rem;   /* card titles */
  --fs-h3-lg:1.25rem;/* feature-card title */
  --fs-xl:1.2rem;    /* large ui accents */

  /* the article uses the homepage frame: .wrap gives 1032 of content.
     --measure is the one text measure inside it — the only narrower width on the page. */
  --measure:900px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--bg);color:var(--ink-66);
  font-family:var(--font-body);font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--action);color:#fff}
img{max-width:100%;display:block}
a{color:var(--action);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{
  font-family:var(--font-body);color:var(--ink);line-height:1.16;
  font-weight:700;letter-spacing:-.015em;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.tear{
  border:none;height:1px;margin:0 auto;max-width:var(--max);
  background-image:linear-gradient(90deg,var(--line-strong) 55%,transparent 45%);
  background-size:14px 1px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-base);letter-spacing:.01em;
  padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
  text-decoration:none!important;
}
.btn:active{transform:translateY(1px);box-shadow:2px 2px 14px rgba(174,174,174,.4)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--neu)}
.btn-primary:hover{background:var(--accent-hover)}
.store-row{display:flex;gap:18px;flex-wrap:wrap}
/* side-by-side buttons: tighter shadow so one button's glow never lands on its neighbour
   (extent ≈ offset 4px + blur/2 = 11px < 18px gap) */
.store-row .btn{box-shadow:4px 4px 14px rgba(174,174,174,.35), -4px -4px 14px rgba(255,255,255,.6)}
.store-row .btn:active{box-shadow:2px 2px 8px rgba(174,174,174,.35)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(248,250,251,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:8px 24px;
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:var(--fs-base);color:var(--ink);text-decoration:none!important;letter-spacing:-.01em}
.fh-logo{width:19px;height:20px;display:block;color:var(--ink)}
.nav-links{display:flex;gap:18px;margin-left:auto;align-items:center}
.nav-menu{display:contents}
.nav-links a:not(.btn){
  color:#000000;opacity:.45;font-size:var(--fs-xs);font-weight:500;
  transition:opacity .12s ease;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"],
.nav-links a:not(.btn).active{color:#000000;opacity:1;text-decoration:none}
.nav .btn{padding:5px 11px;font-size:var(--fs-xs);border-radius:9px}
.nav-burger{
  display:none;width:38px;height:38px;margin-right:-6px;
  border:none;background:none;padding:0;cursor:pointer;
  align-items:center;justify-content:center;border-radius:8px;
}
.nav-burger:hover{background:var(--line)}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:"";display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;
}
.nav-burger span{position:relative}
.nav-burger span::before{position:absolute;top:-6px;left:0}
.nav-burger span::after{position:absolute;top:6px;left:0}
@media(max-width:860px){
  .nav-burger{display:flex}
  .nav-links{position:relative}
  .nav-menu{
    display:none;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + 12px);right:0;
    min-width:200px;max-width:calc(100vw - 48px);
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
    box-shadow:0 14px 34px rgba(0,0,0,.14);padding:8px;
  }
  .nav-menu.open{display:flex}
  .nav-links a:not(.btn){width:100%;padding:0 12px}
}

/* ============================================================
   ARTICLE
   Two widths only — the same two-tier system the homepage uses:
     · structure (headings, tears, the CTA card) fills the 1032 frame
     · prose and the table stop at --measure, and every one of them shares
       that single right edge, so the text edge never moves
   Rhythm uses the homepage steps only:
   68 page padding · 48 between sections · 22 heading→body · 16 paragraph.
   ============================================================ */
.post{padding:68px 0}
@media(max-width:720px){.post{padding:48px 0}}

/* article head — no homepage hero here, just the title block */
.post-back{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.08em;color:var(--action);
  display:inline-block;margin-bottom:22px;
}
.post-updated{
  font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-45);margin-bottom:12px;
}
.post h1{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.art-date,.art-read{
  font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-45);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.art-tag{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-66);
  background:var(--cat);border-radius:6px;padding:4px 8px;
  display:inline-flex;align-items:center;flex:none;
}

/* sections + prose */
.post section + section{margin-top:48px}
.post hr.tear{margin:48px auto}
.post h2{font-size:clamp(1.35rem,2.6vw,1.6rem);margin-bottom:14px}
.post h3{font-size:var(--fs-lede);margin:26px 0 8px}
.post p{margin-bottom:16px;color:var(--ink-66);max-width:var(--measure)}
.post p:last-child{margin-bottom:0}
.post strong{color:var(--ink);font-weight:600}
.post em{font-style:italic}
.post .store-row{margin:26px 0}

/* bullets — periwinkle marker, the site's quiet metadata colour */
.post ul{list-style:none;margin:0 0 16px;max-width:var(--measure)}
.post ul li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-66)}
.post ul li::before{
  content:"";position:absolute;left:4px;top:.58em;width:6px;height:6px;border-radius:50%;
  background:var(--cat);
}
.post ul li:last-child{margin-bottom:0}

/* founder quote — the story-band pull-quote */
.post blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 18px;margin:26px 0;max-width:var(--measure)}
.post blockquote p{font-weight:700;font-size:var(--fs-lede);color:var(--ink);line-height:1.4;letter-spacing:-.01em}

/* ---------- comparison table ----------
   VARIATION of the homepage's .ledger card: same mono machine-layer keys and dashed
   row rules; only the layout differs (three columns instead of a two-part row). */
.cmp-wrap{
  overflow-x:auto;max-width:var(--measure);display:flex;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.cmp-wrap::-webkit-scrollbar{height:6px}
.cmp-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cmp-wrap::-webkit-scrollbar-track{background:transparent}
/* sticky fade hints that the table scrolls further right — no JS, no extra markup */
.cmp-wrap::after{
  content:"";position:sticky;right:0;flex:none;align-self:stretch;
  width:28px;margin-left:-28px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--card));
}
.cmp{
  width:100%;min-width:560px;border-collapse:collapse;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--neu-soft);
}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top}
.cmp thead th{
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--cat);
}
.cmp thead th:first-child{border-radius:var(--radius-md) 0 0 0}
.cmp thead th:last-child{border-radius:0 var(--radius-md) 0 0}
.cmp tbody th{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink);width:34%;white-space:nowrap;
}
@media(max-width:640px){.cmp tbody th{white-space:normal}}
.cmp tbody td{font-size:var(--fs-sm);color:var(--ink-66)}
.cmp tbody tr{border-top:1px dashed var(--line-strong)}
.cmp tbody tr:first-child{border-top:none}
/* the row the source table marked as highlighted */
.cmp tr.highlight-col td{color:#1FA234;font-weight:600}

/* ---------- the three steps: homepage .day timeline ---------- */
.day{position:relative;margin:26px 0}
.day::before{ /* vertical dashed line — black 45% */
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;
  background-image:linear-gradient(180deg,rgba(0,0,0,.45) 55%,transparent 45%);
  background-size:1px 12px;
}
.moment{position:relative;padding:0 0 56px 56px}
.moment:last-child{padding-bottom:0}
.moment::before{ /* dot — app blue */
  content:"";position:absolute;left:5px;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--action);
}
.moment .when{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--action);display:block;margin-bottom:8px;
}
.moment h3{font-size:var(--fs-lede);margin:0 0 8px;font-weight:700;max-width:calc(var(--measure) - 56px)}
.moment p{color:var(--ink-66);font-size:var(--fs-base);max-width:calc(var(--measure) - 56px)}
@media(max-width:600px){.moment{padding-left:40px}}

/* ---------- in-article CTA ----------
   VARIATION of the .pro-card: same white card, --neu shadow and 4px orange stripe. */
.post-cta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--neu);padding:26px 22px;position:relative;overflow:hidden;
}
.post-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);border-radius:4px 0 0 4px}
.post-cta h2{font-size:var(--fs-h3-lg);margin-bottom:12px;letter-spacing:-.01em}
.post-cta p{font-size:var(--fs-sm);max-width:none}
.post-cta .store-row{margin:22px 0 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 24px;font-size:var(--fs-xs);color:var(--ink-66);background:var(--card)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px;align-items:start}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-left p{margin-top:8px;max-width:300px;font-size:var(--fs-xs);line-height:1.5}
.foot-col h4{
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin:4px 0 6px;
}
.foot-col a{color:var(--ink-66);display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 2px;font-size:var(--fs-xs)}
.foot-col a:hover{color:var(--action);text-decoration:none}
.foot-col nav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.foot-col nav{display:flex;flex-direction:column}
.foot-bottom{
  margin-top:20px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;
  font-size:var(--fs-2xs);color:var(--ink-66);
}
.foot-bottom a{color:var(--ink-66);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
.foot-bottom a:hover{text-decoration-color:var(--action)}

a:focus-visible,button:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-xs);
  background:var(--card);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:12px;padding:10px 16px;box-shadow:var(--neu-soft);
}
.skip:focus{left:24px;top:8px;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   EXTENDED ARTICLE COMPONENTS
   Elements the wider blog library uses that the Android post did not:
   numbered lists, small headings, figures, spreadsheet formulas,
   callouts, an author row and the fee calculator. Every one is built
   from tokens already declared above — no new colour, radius or shadow.
   ============================================================ */

/* numbered lists — the site's step-number treatment: mono blue digit in a
   periwinkle ring, matching the .moment dot rather than a browser marker */
.post ol{list-style:none;margin:0 0 16px;max-width:var(--measure);counter-reset:step}
.post ol > li{
  position:relative;padding-left:32px;margin-bottom:9px;color:var(--ink-66);
  counter-increment:step;
}
.post ol > li::before{
  content:counter(step);position:absolute;left:0;top:.12em;
  width:21px;height:21px;border:1px solid var(--cat);border-radius:50%;
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:600;color:var(--action);
  display:flex;align-items:center;justify-content:center;
}
.post ol > li:last-child{margin-bottom:0}
.post li > ul{margin-top:9px;margin-bottom:0}

/* h4 — smallest heading in the library, so it drops into the mono layer
   exactly like a footer column label */
.post h4{
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);
  margin:22px 0 6px;
}

/* inline code */
.post code{
  font-family:var(--font-mono);font-size:.9em;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}

/* ---------- figures ----------
   VARIATION of the homepage .shot: same white card and soft shadow.
   The caption stays sentence-case --ink-45 mono rather than the .shot
   periwinkle pill — these captions are sentences, not one-word labels. */
.post .shot{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--neu-soft);padding:12px;margin:26px 0;max-width:var(--measure);
}
.post .shot img{border-radius:var(--radius-sm);margin:0 auto;height:auto}
.post .shot figcaption{
  font-family:var(--font-mono);font-size:var(--fs-2xs);line-height:1.5;
  color:var(--ink-45);text-align:center;margin-top:12px;
}
.post .shot--phone{max-width:320px;margin-left:auto;margin-right:auto}

/* A photograph here is supporting evidence, not hero art, so it never runs
   the full measure. Three placements, in order of preference:

   .figure-row    beside its paragraphs — the homepage .story-grid split,
                  alternating sides down the article so the page has more
                  than one left edge
   .figure-grid   two unpaired photographs sharing a line
   .shot--diagram charts and explainers: centred and whole, because they are
                  read rather than glanced at
*/
.post .figure-row{
  display:grid;grid-template-columns:1fr .78fr;gap:44px;align-items:center;
  margin:26px 0;max-width:var(--measure);
}
.post .figure-row > div > :last-child{margin-bottom:0}
.post .figure-row .shot{margin:0}
.post .figure-row .shot img{max-height:320px;width:auto}
.post .figure-row--flip > .shot{order:-1}
.post .figure-row--phone{grid-template-columns:1fr .46fr;gap:38px}
.post .figure-row--phone .shot img{max-height:420px}
@media(max-width:760px){
  .post .figure-row,.post .figure-row--phone{grid-template-columns:1fr;gap:22px}
  .post .figure-row--flip > .shot{order:0}
}

.post .figure-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
  margin:26px 0;max-width:var(--measure);
}
.post .figure-grid .shot{margin:0}
.post .figure-grid .shot img{max-height:300px;width:auto}
@media(max-width:600px){.post .figure-grid{grid-template-columns:1fr}}

.post .shot--diagram{max-width:620px;margin-left:auto;margin-right:auto}
.post .shot--solo{max-width:520px;margin-left:auto;margin-right:auto}
.post .shot--solo img{max-height:420px;width:auto}

/* a nine-step procedure would run three screens at the homepage's 56px
   step gap, so long timelines tighten to the article's 26px rhythm */
.post .day--long .moment{padding-bottom:30px}

/* ---------- FAQ ----------
   Question and answer step in behind a dashed rule, so the tail of the
   article reads as a list of exchanges rather than more flush-left prose. */
.post .faq-item{
  padding-left:22px;border-left:1px dashed var(--line-strong);
  margin:22px 0;max-width:var(--measure);
}
.post .faq-item h3{margin:0 0 8px}
.post .faq-item > :last-child{margin-bottom:0}

/* ---------- spreadsheet formulas ---------- */
.formula-block{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 18px;margin:16px 0;max-width:var(--measure);
}
.formula-label{
  display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-bottom:6px;
}
.formula-block code{
  display:block;background:none;border:none;padding:0;white-space:pre;overflow-x:auto;
  font-size:var(--fs-sm);color:var(--ink);
}

/* ---------- callouts ----------
   The .ledger fill: off-white inside a white page, no border colour. */
.post .callout{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 22px;margin:16px 0;max-width:var(--measure);
}
.post .callout p{margin-bottom:6px;font-size:var(--fs-sm)}
.post .callout p:last-child{margin-bottom:0}
/* the haul summary reads as a ledger: mono rows, a dashed rule, a green total */
.post .callout-title{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-bottom:12px;
}
.post .callout-row{font-family:var(--font-mono);color:var(--ink-66);font-variant-numeric:tabular-nums}
.post .callout-total{
  font-family:var(--font-mono);font-size:var(--fs-base);font-weight:700;color:#1FA234;
  font-variant-numeric:tabular-nums;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-strong);
}
.post .callout-note{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-45);margin-top:6px}

/* source attribution under a pull-quote or table */
.post .cite{
  font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-45);
  margin:0 0 16px;max-width:var(--measure);
}

.private-note{
  background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-md);padding:16px 20px;margin-top:22px;max-width:var(--measure);
  color:var(--ink);font-weight:600;font-size:var(--fs-sm);
}

/* ---------- author card ----------
   The one article that gave its bio a box keeps it, rebuilt as the site's
   standard 22px white card. Its heading drops to the card-level H2 size. */
.post .author-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--neu-soft);padding:22px;max-width:var(--measure);
}
.post .author-card h2{font-size:var(--fs-h3-lg);letter-spacing:-.01em}

/* ---------- author row ---------- */
.author-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:16px}
.author-row .avatar{
  width:120px;height:120px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:var(--neu-soft);
}
.author-row > div{flex:1;min-width:240px}

/* ---------- table extensions ----------
   The library's tables lead with a plain <td> rather than a row <th>, and
   two of them carry spreadsheet column letters and profit figures. */
.cmp tbody tr > td:first-child{color:var(--ink);font-weight:600}
.cmp tbody tr > td.col-header{
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.cmp .profit-positive{color:#1FA234;font-weight:600;font-variant-numeric:tabular-nums}
.post .cmp-wrap{margin:22px 0}

/* ---------- fee calculator ----------
   A form built out of the site's input rules: white field, --line-strong
   border, blue focus ring. Results sit in the .ledger's off-white. */
.calc-container{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--neu-soft);padding:26px 22px;margin:26px 0;max-width:var(--measure);
}
.calc-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px}
.calc-field{flex:1;min-width:200px}
.calc-field label{
  display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:6px;
}
.calc-field input,.calc-field select{
  width:100%;padding:13px 16px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--card);color:var(--ink);
  font-family:var(--font-mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;
}
.calc-field select{font-family:var(--font-body)}
.calc-field input::placeholder{color:var(--ink-30)}
.calc-field input:focus,.calc-field select:focus{
  outline:2px solid var(--action);outline-offset:1px;border-color:transparent;
}
.calc-section-label{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);
  margin:22px 0 8px;
}
.calc-results{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px;margin-top:22px;
}
.calc-results h3{font-size:var(--fs-h3);margin:0 0 12px}
.calc-line{
  display:flex;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px dashed var(--line-strong);
  font-size:var(--fs-sm);color:var(--ink-66);font-variant-numeric:tabular-nums;
}
.calc-line:last-child{border-bottom:none}
.calc-line.calc-total{
  font-weight:600;color:var(--ink);
  border-bottom:none;border-top:1px dashed var(--line-strong);margin-top:4px;padding-top:12px;
}
.calc-line.calc-profit{font-size:var(--fs-base);font-weight:700;color:#1FA234}
.calc-line.calc-loss{font-size:var(--fs-base);font-weight:700;color:var(--loss)}
.calc-note{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--ink-45);margin-top:8px}

/* Three-column footer — Follow moves into the brand block.
   Link columns are content-sized and spread with space-between, so the last one
   lands flush with the right edge of .wrap, level with the copyright line. */
.ft-c3 .foot-grid{
  grid-template-columns:minmax(0,300px) max-content max-content max-content;
  justify-content:space-between;
}
.ft-c3 .foot-left h4{margin-top:14px}
.ft-c3 .row-nav{display:flex;flex-direction:row;gap:16px}
@media(max-width:860px){.ft-c3 .foot-grid{grid-template-columns:1fr 1fr;justify-content:normal}}
@media(max-width:520px){.ft-c3 .foot-grid{grid-template-columns:1fr}}