@charset "utf-8";
/* ==========================================================================
   Ledgerline — single page, zero scripts
   Direction: the printed account book. Warm paper, hairline rules doing the
   structural work, ink type, one oxblood spot colour, mono reserved for
   figures. Tokens first; nothing below uses a value declared nowhere.
   Deliberately absent: gradients (0), backdrop-filter (0), box-shadows (0).
   A printed ledger has flat ink and rules; neither needs faking.
   ========================================================================== */

@font-face{font-family:"Zilla Slab";src:url("fonts/zilla-slab-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("fonts/zilla-slab-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-var-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/space-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/space-mono-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* surfaces + ink */
  --paper:#f4f0e5;
  --paper-2:#ece6d8;
  --ink:#191813;
  --ink-2:#5b564b;
  --rule:#cfc7b3;
  --rule-2:#b4ab93;

  /* ONE interactive accent (oxblood). Two named jobs: links/CTA, and the
     "needs a decision" state. Nothing else is allowed to use it. */
  --accent:#9a3222;
  --accent-d:#7c2517;

  /* state inks — each encodes a real ledger state, listed in a printed legend */
  --ok:#145236;   --ok-bg:#dee8dd;
  --warn:#7c2517; --warn-bg:#f0ddd8;
  --mute:#4c473d; --mute-bg:#e6e0d2;

  /* type ramp — five steps, no improvisation beyond these */
  --t-micro:.8125rem;
  --t-body:1.0625rem;
  --t-h3:1.375rem;
  --t-h2:clamp(1.7rem,3.4vw,2.25rem);
  --t-h1:clamp(2.35rem,6vw,3.85rem);

  /* spacing — one 4px scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* one radius scale: 0 and 3px. That is the whole list. */
  --r:3px;

  /* one border style, in two weights */
  --line:1px solid var(--rule);
  --line-2:1px solid var(--rule-2);

  --display:"Zilla Slab",ui-serif,Georgia,"Times New Roman",serif;
  --body:"Public Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:1120px;
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);font-weight:400;line-height:1.6;
}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);line-height:1.14}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.25;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent-d)}
img,svg{display:block;max-width:100%}
summary{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--accent);color:var(--paper)}

/* --- utilities ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--s5)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-6rem;z-index:9;background:var(--ink);color:var(--paper);
  font-size:var(--t-micro);font-weight:600;text-decoration:none;padding:var(--s3) var(--s4);border-radius:var(--r)}
.skip:focus{top:var(--s4)}

/* --- masthead (letterhead) ------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:var(--line)}
.masthead__in{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s6);padding-block:var(--s4)}
.mark{font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.mark:hover{color:var(--accent)}
.nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);margin-left:auto}
.nav a{font-size:var(--t-micro);color:var(--ink-2);text-decoration:none;letter-spacing:.01em}
.nav a:hover{color:var(--accent)}
.nav .nav__cta{color:var(--accent);font-weight:600}

/* --- hero ----------------------------------------------------------------- */
.hero{padding-block:var(--s9) var(--s6)}
.hero__lede{margin-top:var(--s5);max-width:56ch;font-size:var(--t-h3);font-weight:400;line-height:1.45}
.hero__cta{margin-top:var(--s6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5)}
.btn{display:inline-block;background:var(--accent);color:var(--paper);border:1px solid var(--accent);
  border-radius:var(--r);font-size:var(--t-body);font-weight:600;text-decoration:none;padding:var(--s3) var(--s5)}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:var(--paper)}
.link{font-size:var(--t-body);color:var(--ink-2)}

/* --- the ledger panel (the page's evidence) ------------------------------- */
.ledger{padding-bottom:var(--s8)}
.panel{border:var(--line-2);border-radius:var(--r);background:var(--paper)}
.panel__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s4);
  padding:var(--s3) var(--s4);background:var(--paper-2);border-bottom:var(--line-2);
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.02em}
.panel__note{padding:var(--s4) var(--s4) 0;max-width:70ch;font-size:var(--t-micro);color:var(--ink-2)}

.lt{width:100%;border-collapse:collapse}
.lt th{text-align:left;font-weight:600;font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.03em;
  padding:var(--s3) var(--s4);border-bottom:var(--line-2);white-space:nowrap}
.lt td{padding:var(--s3) var(--s4);border-bottom:var(--line);vertical-align:top}
.lt tbody tr:last-child td{border-bottom:0}
.bank{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.01em;word-break:break-word}
.file{display:block;font-size:var(--t-body);font-weight:500;line-height:1.3}
.client{display:block;font-size:var(--t-micro);color:var(--ink-2);margin-top:var(--s1)}
.client--ask{color:var(--accent)}
.tdk{display:none}

.chip{display:inline-block;font-size:var(--t-micro);font-weight:600;line-height:1.4;
  padding:var(--s1) var(--s2);border-radius:var(--r);white-space:nowrap}
.chip--ok{color:var(--ok);background:var(--ok-bg)}
.chip--todo{color:var(--warn);background:var(--warn-bg)}
.chip--mute{color:var(--mute);background:var(--mute-bg)}

.panel__foot{display:grid;gap:var(--s4);padding:var(--s4)}
.sum-rule{display:block;height:1px;background:var(--rule-2);transform-origin:left}
.sum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);
  font-size:var(--t-micro);color:var(--ink-2)}
.sum b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-micro);color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:var(--s2)}

/* --- how it decides ------------------------------------------------------- */
.how{padding-block:var(--s8);border-top:var(--line-2)}
.how__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s5) var(--s8);align-items:start}
.how__body{max-width:64ch}
.how__body p+p{margin-top:var(--s4)}
.how__body p{color:var(--ink-2)}
.k{font-family:var(--mono);font-size:.92em;background:var(--paper-2);padding:0 var(--s1)}

/* --- what it replaces (ruled spec rows, not a card grid) ------------------ */
.spec{padding-block:var(--s8);border-top:var(--line-2)}
.spec h2{max-width:26ch}
.spec__list{margin-top:var(--s7);border-top:var(--line-2)}
.spec__item{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);
  gap:var(--s2) var(--s8);padding-block:var(--s5);border-bottom:var(--line)}
.spec__item p{color:var(--ink-2);max-width:62ch}
.spec__meta{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2)}

/* --- the customer, in her own words --------------------------------------- */
.quote{padding-block:var(--s9);border-top:var(--line-2);background:var(--paper-2)}
/* the measure must be in em, not ch: ch resolves against the blockquote's
   inherited 17px body size, not the 36px the quote actually renders at, which
   silently halved the width. em resolves against the element's own font. */
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--display);font-weight:600;font-size:var(--t-h2);
  line-height:1.28;letter-spacing:-.012em;color:var(--ink);max-width:28em}
.quote__fig{margin:0}
.quote figcaption{margin-top:var(--s5);font-size:var(--t-micro);color:var(--ink-2)}
.quote figcaption b{color:var(--ink)}

/* --- price (one row, one plan) -------------------------------------------- */
.price{padding-block:var(--s8);border-top:var(--line-2)}
.price h2{max-width:30ch}
.price__row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--s6) var(--s8);align-items:start;margin-top:var(--s7);
  border-top:var(--line-2);padding-top:var(--s6)}
.price__what h3{margin-bottom:var(--s2)}
.price__what>p{color:var(--ink-2);max-width:60ch}
.ticks{margin-top:var(--s4);display:grid;gap:var(--s2);font-size:var(--t-body);color:var(--ink-2)}
.ticks li{position:relative;padding-left:var(--s5)}
.ticks li::before{content:"";position:absolute;left:0;top:.7em;width:var(--s3);height:1px;background:var(--rule-2)}
.figure{font-family:var(--mono);font-weight:700;font-size:var(--t-h2);color:var(--ink);line-height:1}
.figure span{font-size:var(--t-micro);font-weight:400;color:var(--ink-2);margin-left:var(--s1)}
.price__fine{margin-top:var(--s4);font-size:var(--t-micro);color:var(--ink-2);max-width:34ch}
.price .btn{margin-top:var(--s5)}

/* --- questions ------------------------------------------------------------
   full content width, matching the spec rows above it — a narrower column
   left a third of the band empty for no reason.
   ------------------------------------------------------------------------- */
.faq{padding-block:var(--s8);border-top:var(--line-2)}
.faq__list{margin-top:var(--s6);border-top:var(--line-2)}
.faq__aside{margin-top:var(--s6);border-top:var(--line-2);padding-top:var(--s4);
  font-size:var(--t-micro);color:var(--ink-2);max-width:70ch}
.faq details{border-bottom:var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-block:var(--s4);font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--mono);font-size:var(--t-body);color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--accent)}
.faq details p{padding-bottom:var(--s4);max-width:70ch;color:var(--ink-2)}

/* --- footer / colophon ---------------------------------------------------- */
.foot{border-top:var(--line-2);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--s6) var(--s8);padding-block:var(--s7) var(--s8)}
.foot__mark{margin:0 0 var(--s3);font-family:var(--display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
.foot p,.foot a,.foot nav a{font-size:var(--t-micro);color:var(--ink-2)}
.foot p+p{margin-top:var(--s2)}
.foot nav{display:grid;gap:var(--s2);align-content:start}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--accent)}

/* --- the one orchestrated moment ------------------------------------------
   Seven raw bank rows settle onto their ruled baseline. Derived from the
   product's own object — a bank feed settling into a statement — not from a
   stock effect (no particles, no blobs, no starfield). Runs once, ends at
   rest, ~1s total. No looping motion anywhere on the page.
   It animates transform and NOTHING else, on purpose. A renderer that pins
   animations at frame 0 (verified: this headless Chrome reports
   `settle:running:0` forever) would otherwise freeze content at its dimmest
   frame — the classic `.reveal{opacity:0}` empty-page bug. A first frame of
   "resting state plus 9px of vertical slack" keeps the ledger readable in
   every rendering path, and the summary rule below is a plain static border
   rather than an animated one, so nothing here can fail closed.
   ------------------------------------------------------------------------- */
@keyframes settle{from{transform:translateY(9px)}to{transform:none}}
.lt tbody tr{animation:settle .42s cubic-bezier(.22,.68,.3,1) both;animation-delay:calc(var(--i,0) * 85ms)}
@media (prefers-reduced-motion:reduce){
  .lt tbody tr{animation:none}
}

/* --- narrower ------------------------------------------------------------- */
@media (max-width:1000px){
  .how__grid,.price__row{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .spec__item{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:720px){
  .hero{padding-block:var(--s8) var(--s6)}
  /* the column header row is replaced by the real .tdk label inside each cell,
     so it is removed rather than clipped — a clipped table header escapes the
     table box and inflates the layout width */
  .lt thead{display:none}
  .lt,.lt tbody,.lt tr,.lt td{display:block}
  .lt tr{border-bottom:var(--line-2);padding-block:var(--s2)}
  .lt tbody tr:last-child{border-bottom:0}
  .lt td{border-bottom:0;padding:var(--s2) var(--s4)}
  .tdk{display:block;font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2);letter-spacing:.02em}
  .num{text-align:left}
}
@media (max-width:520px){
  .wrap{padding-inline:var(--s4)}
  /* the hard break is a wide-screen composition; at phone width natural
     wrapping with text-wrap:balance reads far tidier than four short orphans */
  .hero h1 br{display:none}
  /* a three-line masthead must not stay pinned to a 360px viewport */
  .masthead{position:static}
  .masthead__in{padding-block:var(--s3)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .nav{gap:var(--s2) var(--s4)}
}