/* Self-hosted display and text faces; no external runtime dependencies. */
@font-face{font-family:"Ledgerline Fraunces";src:url("fonts/fraunces-latin.woff2") format("woff2");font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:"Ledgerline Franklin";src:url("fonts/libre-franklin-latin.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}

/* Ledgerline — accounting-paper theme, plain CSS, no framework.

   Palette is drawn from the product's own material: chocolate-cream
   columnar ledger stock (70%), blue-black ink (20%), and the single red
   rule down the margin of an accountant's paper (10%). One accent, one job.

   Type: Newsreader (an editorial serif) for headings and the resolved
   client names; Public Sans (a records/forms sans) for running text;
   Courier Prime (a typewriter mono) only for machine output — bank memos,
   filenames and money figures. Mono never sets running prose.

   Scales: one spacing grid (4px), two radii (3px for panels/controls,
   999px for pills), one hairline rule, one shadow. The only gradient in
   the file is the faint horizontal ruling of a ledger sheet. */

:root{
  --paper:      #f5f0e6;
  --paper-2:    #efe8d8;
  --ink:        #1b2430;
  --ink-2:      #4b5765;
  --rule:       #d3c8b2;
  --rule-2:     #b8ad92;
  --accent:     #a8322a;
  --accent-deep:#8a2620;
  --on-accent:  #fdf9f0;

  --font-display:"Ledgerline Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Ledgerline Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Courier Prime", "Courier New", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:72px;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.13;
  letter-spacing:-0.011em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.15rem, 1.05rem + 4.6vw, 3.7rem); }
h2{ font-size:clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
p{ margin:0; }
a{ color:inherit; }

.wrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:20px; }

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

.site-head{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.head-inner{
  display:flex;
  align-items:center;
  gap:28px;
  min-height:64px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  text-decoration:none;
}
.brand-mark{ width:24px; height:24px; flex:none; color:var(--ink); }
.brand-name{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.site-nav{ display:flex; align-items:center; gap:24px; }
.site-nav a{
  font-size:0.95rem;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .15s ease;
}
.site-nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:3px;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-quiet{ background:transparent; border-color:var(--rule-2); color:var(--ink); }
.btn-quiet:hover{ border-color:var(--ink); }

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

.hero{
  padding-block:64px 72px;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0 39px,
    color-mix(in srgb, var(--ink) 6%, transparent) 39px 40px
  );
}
.hero-inner{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.lede{
  margin-top:20px;
  max-width:54ch;
  font-size:1.12rem;
  color:var(--ink-2);
}
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-note{ margin-top:20px; max-width:46ch; font-size:0.86rem; color:var(--ink-2); }

/* ---------- the resolving transaction (one orchestrated moment) ---------- */

.resolve{
  margin:0;
  padding:28px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:3px;
}
.field{
  display:block;
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--ink-2);
}
.memo{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.resolve-rule{
  height:2px;
  margin:20px 0;
  background:var(--accent);
  transform-origin:left center;
  animation:rule-draw 1s cubic-bezier(.25,.8,.3,1) .35s both;
}
@keyframes rule-draw{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
.invoice{ display:grid; gap:4px; margin-top:8px; }
.inv-no{ font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-2); }
.inv-client{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; line-height:1.15; }
.inv-line{ font-size:0.95rem; color:var(--ink-2); }
.inv-amt{ font-family:var(--font-mono); font-size:1.25rem; }
.inv-cat{ font-size:0.82rem; color:var(--ink-2); }
.resolve figcaption{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:0.82rem;
  color:var(--ink-2);
}

/* ---------- bands ---------- */

.band{ padding-block:72px; border-top:1px solid var(--rule); }
.band h2{ max-width:30ch; }
.band-lede{ margin-top:16px; max-width:58ch; font-size:1.05rem; color:var(--ink-2); }
.aside{ margin-top:32px; max-width:70ch; color:var(--ink-2); }
.aside + .aside{ margin-top:16px; }
.aside-label{ font-weight:600; color:var(--ink); }
.mono-inline{ font-family:var(--font-mono); font-size:0.92em; }

/* ---------- before / after spread ---------- */

.spread{
  display:grid;
  grid-template-columns:0.9fr 1.35fr;
  margin-top:40px;
}
.spread-col{ padding-block:24px; }
.spread-col:first-child{ padding-right:32px; }
.spread-col + .spread-col{ padding-left:32px; border-left:1px solid var(--rule); }

.feed{
  margin:16px 0 0;
  font-family:var(--font-mono);
  font-size:0.84rem;
  line-height:1.95;
  color:var(--ink);
  white-space:pre;
  overflow-x:auto;
}

.table-scroll{ overflow-x:auto; }
.ledger{ width:100%; margin-top:16px; border-collapse:collapse; font-size:0.92rem; }
.ledger caption{ padding-bottom:12px; text-align:left; }
.ledger th{
  padding:0 0 8px;
  text-align:left;
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);
}
.ledger td{
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:baseline;
}
.ledger td:first-child{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--ink-2);
  white-space:nowrap;
}
.payer{ font-family:var(--font-display); font-size:1.03rem; }
.ledger th.num, .ledger td.num{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ledger tfoot td{
  padding-top:12px;
  border-bottom:0;
  border-top:1px solid var(--rule-2);
  font-weight:600;
}

/* ---------- method / privacy definition rows ---------- */

.method{ margin-top:40px; }
.method-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:32px;
  padding-block:24px;
  border-top:1px solid var(--rule);
}
.method-row:first-child{ padding-top:0; border-top:0; }
.method dt{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; }
.method dd{ margin:0; max-width:64ch; color:var(--ink-2); }

/* ---------- tax file list ---------- */

.files{ margin-top:40px; padding:0; list-style:none; }
.files li{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:baseline;
  padding-block:20px;
  border-top:1px solid var(--rule);
}
.files li:first-child{ padding-top:0; border-top:0; }
.fname{ font-family:var(--font-mono); font-size:0.95rem; color:var(--ink); }
.fdesc{ max-width:72ch; color:var(--ink-2); }

/* ---------- price ---------- */

.price-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:48px;
  align-items:start;
  margin-top:40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
}
.price-figure{ display:flex; align-items:baseline; gap:8px; }
.price-figure .amount{
  font-family:var(--font-display);
  font-size:3.4rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
}
.price-figure .per{ color:var(--ink-2); }
.price-copy{ max-width:62ch; color:var(--ink-2); }
.price-copy p + p{ margin-top:12px; }
.price-cta{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.cta-note{ font-size:0.86rem; color:var(--ink-2); }

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

.faq{ margin-top:40px; }
.faq details{ border-top:1px solid var(--rule); }
.faq details:last-child{ border-bottom:1px solid var(--rule); }
.faq summary{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-block:20px;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:500;
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-body);
  font-size:1.15rem;
  line-height:1.4;
  color:var(--accent);
}
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ padding-bottom:20px; max-width:70ch; color:var(--ink-2); }

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

.site-foot{
  margin-top:0;
  padding-block:56px 32px;
  background:var(--paper-2);
  border-top:1px solid var(--rule);
}
.foot-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
}
.foot-brand .brand-name{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
.foot-brand p{ margin-top:4px; color:var(--ink-2); }
.foot-nav{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.foot-nav a{ font-size:0.95rem; color:var(--ink-2); text-decoration:none; transition:color .15s ease; }
.foot-nav a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot-contact a{ color:var(--ink); }
.foot-legal{
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:0.82rem;
  color:var(--ink-2);
}

/* ---------- focus + skip ---------- */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
}
.skip:focus{
  left:20px;
  top:12px;
  z-index:100;
  padding:12px 16px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:3px;
  text-decoration:none;
}

a:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .lede{ max-width:48ch; }
}

@media (max-width:860px){
  .spread{ grid-template-columns:1fr; }
  .spread-col:first-child{ padding-right:0; }
  .spread-col + .spread-col{ padding-left:0; border-left:0; border-top:1px solid var(--rule); }
}

@media (max-width:780px){
  .site-nav{ display:none; }
}

@media (max-width:720px){
  .band{ padding-block:48px; }
  .method-row, .files li, .price-row{ grid-template-columns:1fr; }
  .method-row{ gap:8px; }
  .files li{ gap:4px; }
  .price-row{ gap:16px; }
}

@media (max-width:560px){
  .ledger{ min-width:420px; }
  .price-figure .amount{ font-size:2.8rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .resolve-rule{ animation:none; }
}