/* ============================================================
   Tanilo shared page styles — the homepage's tokens, fonts,
   container, headings, spacing and buttons, applied to every
   page. Loaded AFTER each page's own <style> so the shared values
   win; page-specific components keep their own rules and pick up
   the shared colours through the aliases below.
   Source of truth: index.html's first <style> block.
   ============================================================ */

:root{
  /* homepage tokens */
  --ink:#070706; --ink-2:#121110; --ink-3:#1a1813;
  --paper:#f4eee0; --paper-2:#fbf7ec;
  --gold:#d4a94a; --gold-2:#e8c476;
  --gline:rgba(212,169,74,.16); --gline-hi:rgba(212,169,74,.45);
  --ok:#4ade80; --ok-deep:#3f9e5f;
  --line-l:#ddd3bc; --line-d:#26231b;
  --mut-l:#6b5f47; --mut-d:#a49a82;
  --rad:14px; --max:1120px;

  /* aliases used by individual pages' component rules, mapped onto the
     homepage palette so nothing on a subpage carries its own colours */
  --ink2:var(--ink-2); --ink3:var(--ink-3); --gold2:var(--gold-2);
  --mut:var(--mut-d); --mutl:var(--mut-l); --warn:#e0714a;
  --bg:var(--ink); --surface:var(--ink-2); --surface-alt:var(--ink-3); --surface-2:var(--ink-3);
  --border:var(--gline); --border-strong:var(--gline-hi); --border-hover:var(--gline-hi);
  --text:var(--paper); --text-muted:var(--mut-d); --text-faint:#6e6558;
  --accent:var(--gold); --accent-soft:rgba(212,169,74,.12);
  --gold-hover:var(--gold-2); --gold-bright:var(--gold-2); --gold-dim:#b89230;
  --danger:#e0714a; --success:var(--ok); --green:var(--ok); --err:#e0714a;
  --font-sans:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-display:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sans:var(--font-sans); --mono:var(--font-mono);
  /* privacy page's short names */
  --fd:var(--font-sans); --fb:var(--font-sans); --fm:var(--font-mono);
  --tx:var(--paper); --mu:var(--mut-d); --fa:#6e6558; --gd:var(--gold);
  --sf:var(--ink-2); --sf2:var(--ink-3); --bd:var(--gline); --bd2:var(--gline); --r:var(--rad); --gn:var(--ok);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{font-family:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--ink);color:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px;letter-spacing:0;overflow-x:hidden}
section,header,main{background:transparent}
.mono{font-family:'JetBrains Mono',monospace}
h1,h2,h3,h4,.h1,.ttl,.h3,.b-hero__title,.section__title{font-family:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
code,pre,kbd,.meta,time{font-family:'JetBrains Mono',monospace}

/* one centred container, the homepage's */
.wrap,.container,.c,main.page{max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px;width:auto}
main.page{padding-top:86px;padding-bottom:100px}
@media(max-width:720px){.wrap,.container,.c,main.page{padding-left:20px;padding-right:20px}}

/* section rhythm */
section,.sec,.section,.blk,.hero,.b-hero{padding-top:86px;padding-bottom:86px;position:relative}
section.hero,.hero{padding-top:86px;padding-bottom:86px}
@media(max-width:720px){section,.sec,.section,.blk,.hero,.b-hero{padding-top:56px;padding-bottom:56px}}

/* headings and lede, as on the homepage */
.eyebrow,.lbl,.section__eyebrow,.b-hero__eyebrow{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.22em;color:var(--gold);margin-bottom:18px;display:block;text-transform:uppercase;background:none;border:0;padding:0;font-weight:400}
.eyebrow::before,.b-hero__eyebrow::before{display:none}
h1,.h1,.b-hero__title,.hero h1,main h1,.container h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin-bottom:18px;color:var(--paper)}
h1 em,h1 span,.b-hero__title-gold,h1 .g{font-style:normal;background:linear-gradient(110deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2,.ttl,.section__title,.hero h2,section h2,.container h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px;color:var(--paper)}
.sub,.lede,.section__lead,.b-hero__sub,.hero .sub,.hero .lede{color:var(--mut-d);max-width:640px;font-size:1.06rem;line-height:1.6}
h1+.lede,h1+.sub{margin-bottom:0}

/* buttons, as on the homepage */
.btn,.btn--primary,.btn--secondary,a.home{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:500;font-size:.95rem;font-family:'Satoshi',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:0;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;border:0;text-decoration:none;text-transform:none}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-gold,.btn--primary{background:linear-gradient(120deg,var(--gold),var(--gold-2));color:var(--ink);position:relative;overflow:hidden;isolation:isolate}
.btn-gold::before,.btn--primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--gold-2),#f3d998);transform:translateX(-101%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:-1}
.btn-gold:hover::before,.btn--primary:hover::before{transform:translateX(0)}
.btn-gold:hover,.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(212,169,74,.35),0 8px 26px rgba(212,169,74,.25);color:var(--ink)}
.btn-ghost,.btn--secondary{background:transparent;border:1px solid var(--line-d);color:var(--paper)}
.btn-ghost:hover,.btn--secondary:hover{border-color:var(--gline-hi);color:var(--gold-2);box-shadow:0 0 18px rgba(212,169,74,.12);transform:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn-gold::before,.btn--primary::before{transition:none}}

/* code and cards pick up the homepage surfaces */
code{background:var(--ink-3);color:var(--gold-2);border-radius:4px}
pre{background:var(--ink-2);border:1px solid var(--gline);border-radius:10px}
.card,.tier,.open-item,.use-card,.step,.proof-card,.compliance,.contact,.tldr,.note,.form,.footer-cta,.cta-block,.info-chip{border-color:var(--gline);border-radius:var(--rad)}
table th{color:var(--mut-d)} table td,table th{border-color:var(--line-d)}

/* ── review round 2 ───────────────────────────────────────── */
/* 1. prose never breaks mid-word; only long code tokens may wrap anywhere */
p,li,dd,dt,.sub,.lede,.kv dd,.kv dt,td,th{word-break:normal;overflow-wrap:normal}
code,.mono:not(.tn-ftr__co){overflow-wrap:anywhere;word-break:normal}
/* 2. the shared footer looks the same on every page, whatever the page's own footer/.mono rules say */
footer.tn-ftr{text-align:left;padding:56px 0 40px;border-top:1px solid var(--gline);background:var(--ink);font-size:inherit;color:var(--paper)}
footer.tn-ftr p{margin-bottom:0}
.tn-ftr .tn-ftr__tag{margin-bottom:12px}
.tn-ftr .tn-ftr__co,.tn-ftr .mono{background:none;border:0;padding:0;border-radius:0;color:#6e6558;font-size:.75rem;font-family:'JetBrains Mono',monospace}
.tn-hdr img,.tn-ftr img{width:auto;height:auto;margin:0}
.tn-hdr .tn-brand__lockup{height:46px} .tn-ftr .tn-brand__lockup{height:46px}
@media(max-width:720px){.tn-hdr .tn-brand__lockup{height:36px}}
/* 3+5. text pages: paragraphs and lists capped at ~70ch inside the 1120px container; 56px section rhythm.
   Tables, cards and code blocks keep the full width. */
.page-text main p,.page-text main li,.page-text main dd,.page-text .sub,.page-text .lede,.page-text .section__lead,.page-text .b-hero__sub,.page-text main h2,.page-text main h3{max-width:70ch}
.page-text table,.page-text pre,.page-text .term,.page-text .card,.page-text .tier,.page-text .tiers,.page-text .open-item,.page-text .kv,.page-text .note,.page-text .form,.page-text .tldr,.page-text .tbl{max-width:none}
.page-text section,.page-text .sec,.page-text .section,.page-text .blk,.page-text .hero,.page-text .b-hero{padding-top:56px;padding-bottom:56px}
.page-text main.page{padding-top:56px;padding-bottom:72px}
@media(max-width:720px){.page-text section,.page-text .sec,.page-text .section,.page-text .blk,.page-text .hero,.page-text .b-hero{padding-top:40px;padding-bottom:40px}}
/* 4. code blocks scroll horizontally inside the block, never clipped */
.term{overflow:visible} .term-body,pre,.pg-out,.tbl{overflow-x:auto;max-width:100%}
.t-line{white-space:pre;overflow:visible}