/* ============================================================
   ThumaBooks — thumabooks.com
   Theme inherited from the Thuma Express brand system.
   Signature colour: Books Plum — #6B2A5A on light, #D97BB8 on
   dark, exactly the pair the shipped wordmarks carry
   (thuma_app/assets/brand/books_light.svg / books_dark.svg).
   The site is dark, so the orchid half does the talking and the
   deep plum paints the trust band the way Shield Navy does on
   thumapay.com.
   ============================================================ */

:root{
  /* Every colour is a ThumaBooks token (css/tokens.css, generated from
     design/tokens/thumabooks.tokens.json — plum on slate, decided
     2026-10-04; this site uses the dark theme only). The names are the
     site's own, kept so no rule below changed. */
  /* Core surfaces */
  --black:var(--tb-bg);
  --panel:var(--tb-surface);
  --panel-2:var(--tb-surface-raised);
  --line:var(--tb-border);
  --line-soft:rgba(255,255,255,0.07);

  /* Brand */
  --plum:var(--tb-action);              /* Books Plum, dark-surface pair */
  --plum-hi:var(--tb-action-ink);       /* hover / raised state */
  --plum-soft:var(--tb-action-soft);
  --plum-line:var(--tb-action-soft-border);
  --plum-deep:var(--tb-brand-surface);  /* the deep plum of bands */
  --te-orange:#F26522;                  /* master brand endorsement only */

  /* Text */
  --white:var(--tb-text);
  --text:var(--tb-text-muted);
  --grey:var(--tb-text-faint);
  --grey-dim:var(--tb-text-faint);

  /* Semantic */
  --ok:var(--tb-inflow);
  --warn:var(--tb-warning);

  /* Geometry */
  --r-brand:26%;
  --r-card:16px;
  --r-btn:10px;
  --r-chip:999px;

  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1);

  /* Rhythm */
  --wrap:1180px;
  --gut:26px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--tb-font-display); color:var(--white); margin:0; line-height:1.15; letter-spacing:-0.025em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- focus & skip ---------- */
:focus-visible{ outline:2px solid var(--plum); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--plum); color:var(--tb-on-action); padding:10px 16px;
  border-radius:8px; font-weight:700; font-size:14px;
}
.skip-link:focus{ left:8px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--line{ border-top:1px solid var(--line); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--plum); margin-bottom:20px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--plum); flex-shrink:0; }
.eyebrow--deep{ color:var(--tb-action-ink); }
.eyebrow--deep::before{ background:var(--tb-action-ink); }

.h-xl{ font-size:clamp(38px,6vw,68px); font-weight:900; }
.h-lg{ font-size:clamp(30px,4.2vw,46px); font-weight:900; }
.h-md{ font-size:clamp(22px,2.6vw,30px); font-weight:800; }
.h-sm{ font-size:19px; font-weight:700; }
.accent{ color:var(--plum); }
.lede{ font-size:clamp(16px,1.6vw,18.5px); color:var(--grey); max-width:60ch; }
.section-intro{ max-width:62ch; margin-bottom:52px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb,var(--tb-bg) 86%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.te-badge{
  width:28px; height:28px; flex-shrink:0;
  border-radius:var(--r-brand); overflow:hidden;
}
.te-badge svg{ width:100%; height:100%; }
.endorse-divider{ width:1px; height:20px; background:var(--line); flex-shrink:0; }
.wordmark{
  display:inline-block; line-height:1;
  font-size:19px; letter-spacing:-0.03em; white-space:nowrap;
}
.wordmark .wm-thuma{ font-weight:900; color:var(--white); }
.wordmark .wm-suffix{ font-weight:600; color:var(--plum); }

.nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links a{
  font-size:14px; font-weight:600; color:var(--grey);
  transition:color .2s var(--ease); white-space:nowrap;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--white); }
.nav-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.nav-toggle{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--white); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--white);
  transition:transform .25s var(--ease);
}
.nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-btn);
  font-size:14px; font-weight:700; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--plum); color:var(--tb-on-action); }
.btn-primary:hover{ background:var(--plum-hi); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--white); background:transparent; }
.btn-ghost:hover{ border-color:var(--grey); }
.btn-sm{ padding:9px 15px; font-size:13px; }
.btn-lg{ padding:15px 26px; font-size:15px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:92px 0 88px; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-220px; right:-160px;
  width:640px; height:640px; pointer-events:none;
  background:radial-gradient(circle,var(--plum-soft) 0%,color-mix(in srgb,var(--tb-action) 0%,transparent) 68%);
}
.hero-grid{
  position:relative; display:grid; grid-template-columns:1.02fr 0.98fr;
  gap:60px; align-items:center;
}
.hero-headline{ margin-bottom:22px; }
.trust-line{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px;
  font-size:12.5px; color:var(--grey);
}
.trust-line span{ display:inline-flex; align-items:center; gap:7px; }
.trust-line span::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--plum); flex-shrink:0;
}

/* ---------- signature: the journal card ----------
   thumapay.com's signature widget is a receipt that shows every fee
   before you confirm. ThumaBooks' is the page underneath the receipt:
   type a sale and watch the double entry it becomes — debits on the
   left, credits on the right, VAT backed out at 15.5/115.5, and a balance
   line that always agrees because the arithmetic is the same
   arithmetic the product runs. Same card chrome, so the two sites
   read as siblings. */
.receipt{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.receipt-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.receipt-title{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--grey);
}
.amount-field{ margin:22px 0 18px; }
.amount-label{
  display:block; font-size:12px; color:var(--grey); margin-bottom:9px;
}
.amount-input{
  display:flex; align-items:center; gap:10px;
  background:var(--black); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px;
  transition:border-color .2s var(--ease);
}
.amount-input:focus-within{ border-color:var(--plum-line); }
.amount-input .cur{ font-family:'JetBrains Mono',monospace; color:var(--grey); font-size:15px; }
.amount-input input{
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--white); font-family:'JetBrains Mono',monospace;
  font-size:24px; font-weight:700; letter-spacing:-0.02em;
}
.amount-input input::-webkit-outer-spin-button,
.amount-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.amount-input input[type=number]{ -moz-appearance:textfield; }

.slider{
  width:100%; margin:4px 0 22px; accent-color:var(--plum);
  height:4px; cursor:pointer;
}

/* the journal itself — one row per ledger line */
.jr-lines{ border-top:1px dashed var(--line); padding-top:16px; }
.jr-row{
  display:grid; grid-template-columns:1fr auto auto;
  gap:14px; padding:7px 0; font-size:13.5px; align-items:baseline;
}
.jr-row .lbl{ color:var(--grey); min-width:0; }
/* The account code shares the class name of the code-sample block (.code,
   below) and inherited its padding, border and box: each number drew as a
   tall rounded panel overlapping the next row. Reset to plain inline text. */
.jr-row .lbl .code{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grey-dim); margin-right:8px;
  padding:0; border:0; border-radius:0; background:none; overflow:visible; line-height:inherit; }
.jr-row .dr,.jr-row .cr{
  font-family:'JetBrains Mono',monospace; color:var(--text); font-weight:500;
  min-width:76px; text-align:right; font-variant-numeric:tabular-nums;
}
.jr-row .dr:empty::after,.jr-row .cr:empty::after{ content:'\2014'; color:var(--grey-dim); font-weight:400; }
.jr-head{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:0 0 6px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--grey-dim);
}
.jr-head .dr,.jr-head .cr{ min-width:76px; text-align:right; }
.jr-row--total{
  margin-top:10px; padding-top:15px; border-top:1px solid var(--line);
  font-size:14px;
}
.jr-row--total .lbl{ color:var(--white); font-weight:700; }
.jr-row--total .dr,.jr-row--total .cr{ color:var(--plum); font-weight:700; }
.jr-balance{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ok);
}
.jr-balance::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); }
.receipt-note{
  margin-top:16px; font-size:11.5px; color:var(--grey-dim); line-height:1.6;
}
/* the two toggles above the journal */
.jr-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
@media(max-width:420px){ .jr-opts{ grid-template-columns:1fr; } }
.jr-check{
  display:flex; gap:10px; align-items:center; background:var(--black);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  cursor:pointer; font-size:13px; color:var(--text);
}
.jr-check input{ width:15px; height:15px; margin:0; flex:0 0 auto; accent-color:var(--plum); }

/* ---------- cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-card); padding:28px;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{ border-color:color-mix(in srgb,var(--tb-action) 28%,transparent); transform:translateY(-2px); }
.card h3{ font-size:17.5px; font-weight:700; margin-bottom:9px; }
.card p{ font-size:14.5px; color:var(--grey); }
.card-icon{
  width:40px; height:40px; border-radius:11px;
  background:var(--plum-soft); border:1px solid var(--plum-line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color:var(--plum);
}
.card-icon svg{ width:19px; height:19px; }
.card--flat:hover{ transform:none; border-color:var(--line); }

/* stat */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat .n{
  font-family:'JetBrains Mono',monospace; font-size:clamp(26px,3.4vw,36px);
  font-weight:700; color:var(--plum); letter-spacing:-0.03em; line-height:1.1;
}
.stat .l{ font-size:12.5px; color:var(--grey); margin-top:7px; }

/* ---------- steps (real sequence only) ---------- */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.step{ background:var(--panel); padding:26px 28px; display:grid; grid-template-columns:44px 1fr; gap:20px; align-items:start; }
.step-n{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  color:var(--plum); padding-top:3px;
}
.step h3{ font-size:16.5px; margin-bottom:6px; }
.step p{ font-size:14px; color:var(--grey); }

/* ---------- table ---------- */
.table-wrap{ border:1px solid var(--line); border-radius:var(--r-card); overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14.5px; }
thead th{
  background:var(--panel-2); text-align:left; padding:15px 20px;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grey); font-family:'JetBrains Mono',monospace;
  border-bottom:1px solid var(--line);
}
tbody td{ padding:16px 20px; border-bottom:1px solid var(--line); color:var(--text); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:nth-child(even){ background:rgba(255,255,255,0.015); }
td.num{ font-family:'JetBrains Mono',monospace; color:var(--white); font-weight:600; white-space:nowrap; }

/* ---------- pill / tag ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:var(--r-chip);
  border:1px solid var(--plum-line); background:var(--plum-soft);
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--plum);
}
.pill--deep{ border-color:color-mix(in srgb,var(--tb-action-ink) 40%,transparent); background:color-mix(in srgb,var(--tb-brand-surface) 88%,transparent); color:var(--tb-action-ink); }
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; }

/* ---------- trust band — deep plum where thumapay wears navy ---------- */
.trust-band{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tb-brand-surface) 75%,transparent) 0%,color-mix(in srgb,var(--tb-brand-surface) 25%,transparent) 100%);
  border-top:1px solid color-mix(in srgb,var(--tb-action-ink) 18%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--tb-action-ink) 18%,transparent);
  padding:52px 0;
}
.promise-list{ display:grid; gap:14px; }
.promise{
  display:grid; grid-template-columns:1fr auto; gap:12px 24px; align-items:start;
  background:color-mix(in srgb,var(--tb-bg) 50%,transparent); border:1px solid color-mix(in srgb,var(--tb-action-ink) 22%,transparent);
  border-radius:12px; padding:20px 22px;
}
.promise .who{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tb-action-ink); margin-bottom:7px; }
.promise .what{ font-size:15.5px; color:var(--white); font-weight:700; margin-bottom:5px; }
.promise .how{ font-size:12.5px; color:var(--grey); }

.status{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:5px 12px; border-radius:var(--r-chip);
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.09em; text-transform:uppercase; font-weight:700;
}
.status::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status--progress{ color:var(--tb-warning); border:1px solid color-mix(in srgb,var(--tb-warning) 40%,transparent); background:color-mix(in srgb,var(--tb-warning) 10%,transparent); }
.status--planned{ color:var(--tb-text-faint); border:1px solid color-mix(in srgb,var(--tb-text-faint) 35%,transparent); background:color-mix(in srgb,var(--tb-text-faint) 8%,transparent); }
.status--built{ color:var(--tb-inflow); border:1px solid color-mix(in srgb,var(--tb-inflow) 40%,transparent); background:color-mix(in srgb,var(--tb-inflow) 10%,transparent); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  padding:22px 0; font-size:16px; font-weight:600; color:var(--white);
}
.faq-q:hover{ color:var(--plum); }
.faq-q .ind{ flex-shrink:0; color:var(--plum); font-size:20px; line-height:1; transition:transform .25s var(--ease); }
.faq-item.open .faq-q .ind{ transform:rotate(45deg); }
.faq-a{ display:none; padding:0 0 24px; font-size:14.5px; color:var(--grey); max-width:76ch; }
.faq-item.open .faq-a{ display:block; }

/* ---------- code / hash chain ---------- */
.code{
  background:var(--tb-surface); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; overflow-x:auto;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.75;
  color:var(--tb-text-muted);
}
.code .k{ color:var(--plum); }
.code .s{ color:var(--tb-inflow); }
.code .c{ color:var(--grey-dim); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--plum); color:var(--tb-on-action); text-align:center; padding:84px 0; }
.cta-band h2{ color:var(--tb-on-action); margin-bottom:14px; }
.cta-band p{ color:color-mix(in srgb,var(--tb-on-action) 78%,var(--tb-action)); font-size:16px; max-width:52ch; margin:0 auto 30px; }
.cta-band .btn-primary{ background:var(--tb-on-action); color:var(--tb-action); }
.cta-band .btn-primary:hover{ background:var(--tb-surface-raised); }
.cta-band .btn-ghost{ border-color:color-mix(in srgb,var(--tb-on-action) 32%,transparent); color:var(--tb-on-action); }
.cta-band .btn-ghost:hover{ border-color:var(--tb-on-action); }
.cta-band .btn-row{ justify-content:center; margin-top:0; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:66px 0 34px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ font-size:13.5px; color:var(--grey); max-width:34ch; }
.footer-col h4{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--grey); margin-bottom:16px;
}
.footer-col a{ display:block; font-size:13.5px; color:var(--text); padding:5px 0; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--plum); }
.footer-legal{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:flex-start;
}
.footer-legal p{ font-size:12px; color:var(--grey-dim); line-height:1.7; max-width:70ch; }
.footer-legal a{ color:var(--grey); }
.footer-legal a:hover{ color:var(--plum); }
.legal-links{ display:flex; flex-wrap:wrap; gap:18px; font-size:12px; }

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--panel); border-top:1px solid var(--line);
  padding:20px 0; display:none;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.cookie.show{ display:block; }
.cookie-inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.cookie p{ font-size:13px; color:var(--grey); max-width:64ch; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; z-index:140; display:none;
  background:rgba(0,0,0,0.72); backdrop-filter:blur(4px);
  padding:24px; overflow-y:auto;
}
.modal.show{ display:flex; align-items:flex-start; justify-content:center; }
.modal-box{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  max-width:720px; width:100%; margin:auto; padding:34px;
}
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.modal-close{
  background:transparent; border:1px solid var(--line); border-radius:8px;
  width:34px; height:34px; cursor:pointer; color:var(--white); font-size:18px; line-height:1;
  flex-shrink:0;
}
.modal-close:hover{ border-color:var(--plum); color:var(--plum); }
.modal-body{ font-size:14px; color:var(--grey); max-height:58vh; overflow-y:auto; }
.modal-body h4{ font-size:14.5px; margin:20px 0 8px; }
.modal-body p{ margin-bottom:12px; }
.modal-body ul{ list-style:disc; padding-left:20px; margin-bottom:12px; }
.modal-body li{ margin-bottom:6px; }

/* ---------- form ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--grey); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--black); border:1px solid var(--line);
  border-radius:10px; padding:12px 15px; color:var(--white);
  font-family:inherit; font-size:14.5px; outline:none;
  transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--plum-line); }
.field textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:12px; color:var(--grey-dim); margin-top:10px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:760px){
  :root{ --gut:20px; }
  .section{ padding:68px 0; }
  .hero{ padding:64px 0 60px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:70px; left:0; right:0;
    background:var(--panel); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:10px 0;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:13px var(--gut); font-size:15px; }
  .nav-actions .btn{ display:none; }
  .nav-actions .btn.keep{ display:inline-flex; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:8px; }
  .footer-top{ grid-template-columns:1fr; }
  .cookie-inner{ flex-direction:column; align-items:stretch; }
  .cookie-actions .btn{ flex:1; }
  .modal-box{ padding:24px; }
  .promise{ grid-template-columns:1fr; }
}

/* ---------- language switcher & translation note ---------- */
.lang-switch{ display:flex; align-items:center; gap:2px; margin-right:4px; }
.lang-opt{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.06em; padding:5px 7px; border-radius:6px; color:var(--grey);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.lang-opt:hover{ color:var(--white); background:rgba(255,255,255,0.06); }
.lang-opt.is-on{ background:var(--plum); color:var(--tb-on-action); }
.lang-note{
  background:rgba(255,255,255,0.03); border-bottom:1px solid var(--line);
  font-size:12px; color:var(--grey); padding:8px 0; text-align:center; line-height:1.5;
}
@media (max-width:760px){
  .lang-switch{ margin-right:2px; gap:0; }
  .lang-opt{ padding:4px 4px; font-size:9.5px; }
  .nav-actions .btn.keep{ display:none; }
}

/* header must not overflow when translated labels run long */
.nav{ min-width:0; }
.nav-actions{ flex-shrink:0; }

/* ---------- header fits itself to the language ----------
   Nav labels differ in length per language, so instead of guessing
   breakpoints the header measures its own content and collapses to the
   menu button when it no longer fits — thumapay.com's mechanism, kept
   identical so a fix in one is a fix a reader can port to the other. */
.site-header .nav{ gap:22px; }
.nav-links{ flex-shrink:0; }
.site-header.is-compact .nav-links{
  position:absolute; top:70px; left:0; right:0;
  background:var(--panel); border-bottom:1px solid var(--line);
  flex-direction:column; align-items:stretch; gap:0; padding:10px 0;
  display:none; z-index:90;
}
.site-header.is-compact .nav-links.open{ display:flex; }
.site-header.is-compact .nav-links a{ padding:13px var(--gut); font-size:15px; }
.site-header.is-compact .nav-toggle{ display:flex; }
.site-header.is-compact .nav-actions .btn-ghost{ display:none; }
.site-header .wrap{ max-width:1340px; }

/* ---------- contact form ---------- */
.tx-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .tx-row{ grid-template-columns:1fr; } }
.tx-consent{ display:flex; gap:11px; align-items:flex-start; background:var(--black); border:1px solid var(--line); border-radius:var(--r-btn); padding:13px 14px; cursor:pointer; margin-bottom:14px; }
.tx-consent input{ width:16px; height:16px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--plum); }
.tx-consent span{ font-size:11.5px; line-height:1.62; color:var(--grey); }
.tx-consent a{ color:var(--plum); }
.tx-err{ font-size:12px; color:var(--tb-outflow); display:none; margin-bottom:12px; }
.tx-note{ font-size:11.5px; color:var(--grey-dim); margin:12px 0 0; }
.tx-ok{ display:none; text-align:center; padding:14px 0; }
.tx-ok .tx-ok-mark{ width:44px; height:44px; border-radius:50%; background:var(--plum-soft); color:var(--plum); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:20px; }

/* ===========================================================================
   THE APP
   ---------------------------------------------------------------------------
   ThumaBooks has no app of its own, on purpose — the books live inside the
   Thuma Express app, beside the wallet the money already moves through, and
   the Books Desk in a browser is where an accountant works a month-end.
   Same band, same badge markup as thumapay.com and thumaexpress.com: three
   files, one release, and a badge that lies on one of them is worse than a
   badge that is not there.
   =========================================================================== */
.app-band{ background:var(--panel); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:72px 0; }
.app-band .app-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px;
  align-items:center; }
.app-band h2{ margin-bottom:14px; }
.app-band p{ color:var(--text); font-size:16px; line-height:1.6; max-width:54ch; }
.app-band .app-note{ color:var(--grey); font-size:13.5px; margin-top:16px; }
.app-band .app-note a{ color:var(--plum); text-decoration:none; }
.app-band .app-note a:hover{ text-decoration:underline; }

.store-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.store-badge{ display:flex; align-items:center; gap:10px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:12px; padding:9px 16px 9px 12px;
  text-decoration:none; transition:border-color .2s ease, background .2s ease; }
.store-badge:hover{ border-color:var(--plum-line); background:var(--tb-surface-raised); }
.store-badge svg{ width:22px; height:22px; color:var(--white); flex-shrink:0; }
.store-badge .sb-text{ text-align:left; }
.store-badge .sb-eyebrow{ font-size:9.5px; color:var(--grey); text-transform:uppercase;
  letter-spacing:0.06em; display:block; line-height:1.2; }
.store-badge .sb-name{ font-size:14px; font-weight:700; color:var(--white); line-height:1.2; }

.app-band .app-list{ list-style:none; margin:0; padding:0; }
.app-band .app-list li{ position:relative; padding-left:26px; margin-bottom:13px;
  color:var(--text); font-size:14.5px; line-height:1.55; }
.app-band .app-list li::before{ content:''; position:absolute; left:0; top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--plum); }

@media (max-width:860px){
  .app-band .app-grid{ grid-template-columns:1fr; gap:32px; }
  .app-band{ padding:56px 0; }
}

/* ===================================================================
   ONE NETWORK
   -------------------------------------------------------------------
   The parent's section, so it wears the parent's colour: --te-orange
   is the master-brand endorsement token and this is the only block on
   the page allowed to use it as an accent; plum stays ThumaBooks' own.

   The spine card here is ThumaBooks — on thumapay.com it is ThumaPay,
   because that page is about the rail. This one is about the record:
   every service in the grid produces transactions, and the books are
   where those transactions become an answer to "did we make money?".
   =================================================================== */
.network-band{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(242,101,34,.07) 0%, transparent 62%),
    var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:76px 0 84px;
}
.network-head{max-width:44rem; margin:0 auto 42px; text-align:center}
.eyebrow-te{color:var(--te-orange)}
.network-lede{color:var(--text); font-size:1.02rem; line-height:1.72; margin-top:14px}

.network-grid{
  list-style:none; margin:0 0 34px; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(238px, 1fr));
}
.net{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 19px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:border-color .18s ease, transform .18s ease;
}
.net:hover{border-color:rgba(242,101,34,.34); transform:translateY(-2px)}
.net-name{
  font-weight:700; color:var(--white); font-size:.99rem; letter-spacing:-.01em;
}
.net-role{color:var(--grey); font-size:.875rem; line-height:1.58}

/* The record, not a sibling. */
.net.is-spine{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--tb-action) 10%,transparent) 0%, color-mix(in srgb,var(--tb-action) 3%,transparent) 100%),
    var(--panel-2);
  border-color:var(--plum-line);
  grid-column:span 2;
}
.net.is-spine .net-name{color:var(--plum)}
.net.is-spine .net-role{color:var(--text)}
.net-tag{
  align-self:flex-start; margin-top:4px;
  font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--black); background:var(--plum);
  padding:3px 8px; border-radius:999px;
}
@media (max-width:560px){ .net.is-spine{grid-column:span 1} }

.network-foot{
  max-width:46rem; margin:0 auto; text-align:center;
  color:var(--grey); font-size:.92rem; line-height:1.7;
}

@media (prefers-reduced-motion:reduce){
  .net,.net:hover{transition:none; transform:none}
}

/* ---------- note strip ---------- */
.note-strip{
  border-left:2px solid var(--plum); padding:4px 0 4px 18px;
  font-size:14px; color:var(--grey); max-width:72ch;
}

/* ---------- prose pages (privacy, terms, cookies, accessibility) ---------- */
.prose{ max-width:76ch; }
.prose h2{ font-size:22px; margin:44px 0 14px; }
.prose h3{ font-size:17px; margin:28px 0 10px; }
.prose p{ margin-bottom:14px; font-size:15px; color:var(--text); }
.prose ul{ list-style:disc; padding-left:22px; margin-bottom:14px; }
.prose li{ margin-bottom:7px; font-size:15px; color:var(--text); }
.prose a{ color:var(--plum); }
.prose a:hover{ text-decoration:underline; }
.prose .form-note{ font-size:12.5px; }