/* Templar Lend landing — crimson from RisorsePrompt/templar-cross.svg (the wallet's own brand), orange only where
   bitcoin is named, emerald and cyan for Liquid and proof; structure from Esempio1.
   Rules: 8pt grid, one radius (4px), one elevation (1px hairline), no gradients, no shadows, no glow. */

@layer reset, theme, base, components, utilities;

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* palette (fixed) */
  --crimson: #C1121F;                      /* Templar: wordmark, CTA, labels, the headline block */
  --crimson-ink: #A30F1A;                  /* crimson as small text on platinum (AA) */
  --orange: #F7931A;                       /* bitcoin, and only bitcoin */
  --emerald: #34D399;
  --cyan: #14909C;
  --amber: #FBBF24;
  --platinum: #F2F5F4;
  --steel: #9AA6A4;
  --jet: #2A3432;
  --carbon: #151B1A;
  --onyx-1: #0F1413;
  --onyx: #0A0E0D;

  /* light theme (Esempio1: platinum canvas, jet ink, orange blocks) */
  --bg: var(--platinum);
  --surface: #E9EDEC;
  --surface-2: #DFE4E2;
  --ink: var(--jet);
  --ink-strong: var(--onyx);
  --muted: #5F6A68;
  --line: #C6CECC;
  --line-strong: var(--jet);
  --primary: var(--crimson);
  --on-primary: #FFFFFF;
  --proof: #0E8F5F;
  --proof-fill: var(--emerald);
  --liquid: var(--cyan);
  --on-liquid: var(--platinum);
  --warn: #7A5A00;
  --block: var(--jet);
  --on-block: var(--platinum);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M96 .5H0M.5 0v96' fill='none' stroke='%23D5DBD9' stroke-width='1'/%3E%3C/svg%3E");

  /* rhythm */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
  --r: 4px;
  --nav-h: 64px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--onyx);
    --surface: var(--onyx-1);
    --surface-2: var(--carbon);
    --ink: var(--platinum);
    --ink-strong: #FFFFFF;
    --muted: var(--steel);
    --line: var(--jet);
    --line-strong: #4A5755;
    --on-primary: #FFFFFF;
    --proof: var(--emerald);
    --warn: var(--amber);
    --block: var(--platinum);
    --on-block: var(--onyx);
    --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M96 .5H0M.5 0v96' fill='none' stroke='%23161D1B' stroke-width='1'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--onyx);
  --surface: var(--onyx-1);
  --surface-2: var(--carbon);
  --ink: var(--platinum);
  --ink-strong: #FFFFFF;
  --muted: var(--steel);
  --line: var(--jet);
  --line-strong: #4A5755;
  --on-primary: #FFFFFF;
  --proof: var(--emerald);
  --warn: var(--amber);
  --block: var(--platinum);
  --on-block: var(--onyx);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M96 .5H0M.5 0v96' fill='none' stroke='%23161D1B' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  background-image: var(--grid);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 17px/1.55 var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The element reset sits in the first cascade layer, so the Tailwind utilities of the React islands
   (src/styles/globals.css: theme, base, components, utilities) win over it, as they would over Preflight.
   Every other rule of this file stays unlayered and still beats all of them. a:hover stays out of the layer:
   at (0,1,1) it has always won over class-only rules on links (.brand…), and it must keep doing so. */
@layer reset {
  h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
}
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -100px; padding: var(--s1) var(--s2); background: var(--primary); color: var(--on-primary); border-radius: var(--r); z-index: 100; }
.skip:focus { top: var(--s2); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* type roles */
.mono, .label, .kv, .tag, .btn, .foot-small { font-family: var(--mono); }
.label {
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.label strong { color: var(--ink); font-weight: 600; }
.display {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; line-height: .98; letter-spacing: -.03em;
  font-size: clamp(38px, 5.8vw, 76px); text-wrap: balance; color: var(--ink-strong);
}
.h2 {
  font-family: var(--display); font-stretch: 112%; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(28px, 3.8vw, 48px); text-wrap: balance; color: var(--ink-strong);
}
.h3 { font-family: var(--display); font-stretch: 100%; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; font-size: 22px; color: var(--ink-strong); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink); max-width: 36em; text-wrap: pretty; }
.body { max-width: 62ch; }
.body p + p { margin-top: var(--s2); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.mark { padding: 0 .12em; }   /* the hero's block is styled below; the 404 page styles its own */

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s1); height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.btn:hover { text-decoration: none; border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary); border-color: var(--ink-strong); }
.btn-sm { height: 36px; padding: 0 var(--s2); font-size: 12px; }
.btn .sup { font-weight: 400; opacity: .75; letter-spacing: .04em; }

/* tags */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tag-proof { border-color: var(--proof); color: var(--proof); }
.tag-liquid { background: var(--liquid); border-color: var(--liquid); color: var(--on-liquid); }
.tag-warn { border-color: var(--warn); color: var(--warn); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; height: 36px; }
.seg > * { display: inline-flex; align-items: center; padding: 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.seg > * + * { border-left: 1px solid var(--line-strong); }
.seg > [aria-current], .seg > [aria-pressed="true"] { background: var(--block); color: var(--on-block); }
.seg a:hover, .seg button:hover { text-decoration: none; color: var(--ink-strong); }
.seg > [aria-current]:hover, .seg > [aria-pressed="true"]:hover { color: var(--on-block); }

/* ---------- nav: fixed, and absent until the first screen is behind you ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nav-off .nav { opacity: 0; transform: translateY(-100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.nav .brand { flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--display); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; font-size: 17px; color: var(--ink-strong); }
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; }
@media (max-width: 520px) { .nav-net { display: none; } }
.nav-links { display: flex; gap: var(--s4); margin-left: auto; }
.nav-links > a { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nav-links > a:hover { color: var(--ink-strong); text-decoration: none; border-color: var(--primary); }
.nav-ctl { display: flex; align-items: center; gap: var(--s2); }
.nav-links + .nav-ctl { margin-left: 0; }
.nav-lang { font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted); padding: 10px 6px; }
.nav-lang:hover { color: var(--ink-strong); text-decoration: none; }
/* the shared navbar (all three pages): mark · name · sections · IT/EN · theme · the other product · the page's button */
.seg-nav { height: 32px; }
.seg-nav > * { padding: 0 9px; }
.nav-x { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: border-color .15s, color .15s; }
.nav-x span { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--primary); }
.nav-x:hover { text-decoration: none; border-color: var(--primary); color: var(--ink-strong); }
.only-menu { display: none !important; }
.menu-tools { display: none; }
.nav-theme { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); border-radius: var(--r); }
.nav-theme svg { width: 18px; height: 18px; }
.nav-theme:hover { color: var(--ink-strong); }
html:not(.js) .menu-btn, html:not(.js) .nav-theme { display: none !important; }   /* both need JavaScript */
.menu-btn { display: none; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); }
/* the row needs ~1260px: tighter gaps and no Testnet tag first, then the sections move into the menu */
@media (min-width: 1281px) { .nav-links { gap: var(--s3); } }
@media (max-width: 1280px) {
  .nav .wrap, .nav-links { gap: var(--s3); }
  .nav-net { display: none; }
}
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav[data-open="true"] .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: var(--nav-h); background: var(--bg); border-bottom: 1px solid var(--line-strong); margin: 0; padding: var(--s1) var(--gutter) var(--s2); }
  .nav[data-open="true"] .nav-links > a { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 13px; }
  .nav[data-open="true"] .nav-links > a:first-child { border-top: 0; }
  .menu-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--ink-strong); }
  .nav-ctl, .nav-links + .nav-ctl { margin-left: auto; }   /* the second selector outranks the desktop reset above */
  .menu-btn { display: inline-flex; align-items: center; }
  .nav[data-open="true"] .nav-links a.only-menu { display: block !important; color: var(--primary); }
  .nav-x { display: none; }
}
/* phones: the language and theme controls move into the menu; the brand keeps its name, the page's button stays */
@media (max-width: 640px) {
  .nav-ctl > .seg-nav, .nav-ctl > .nav-theme { display: none; }
  .nav[data-open="true"] .nav-links .menu-tools { display: flex !important; align-items: center; gap: var(--s2); padding: 14px 0; border-top: 1px solid var(--line); }
  .nav[data-open="true"] .nav-links .menu-tools .nav-theme { display: grid; width: 44px; height: 44px; }
  .nav[data-open="true"] .nav-links .menu-tools .seg-nav { height: 46px; }   /* 44px buttons inside the hairline */
  .nav[data-open="true"] .nav-links .menu-tools .seg-nav > * { padding: 0 14px; }
}
/* touch: a menu row is 45px tall */
@media (max-width: 1023px) { .nav[data-open="true"] .nav-links > a { padding: 16px 0; } }
/* phones: «Apri l'app» stays in the header, without its arrow, and the controls close ranks */
@media (max-width: 640px) {
  /* when the row can not hold the name, it wraps onto a clipped second line and disappears whole; the cross stays.
     The link is 44px tall for the thumb: 9px of padding above and below the 26px row, and the row gap puts a
     wrapped name below the clip */
  .nav .brand { display: flex; flex-wrap: wrap; row-gap: 18px; flex-shrink: 1; min-width: 0; height: 44px; padding-block: 9px; overflow: hidden; }
  .menu-btn { position: relative; }
  .menu-btn::before { content: ""; position: absolute; inset: -4px 0; }   /* a 44px touch on the 36px button */
  .brand span.word { font-size: 15px; }
  .nav .wrap { gap: var(--s2); }
  .nav-ctl { gap: var(--s1); }
  .nav .cta-sm { padding: 0 12px; }
  .nav .cta-sm .cta-arrow { display: none; }
}
@media (max-width: 350px) { .nav-theme { display: none; } }
/* the smallest phones: the buttons close ranks (tighter tracking and padding, still 12px) so the row
   holds «Open the app · coming soon» in both languages and the cross never shrinks */
@media (max-width: 374px) {
  .nav .cta-sm { padding: 0 8px; gap: 8px; letter-spacing: .06em; }
  .nav .cta-sm em { letter-spacing: .06em; padding: 4px 5px; }
  .menu-btn { padding: 0 8px; }
  .nav .wrap { gap: 12px; } .nav-ctl { gap: 6px; }
  .nav .brand { min-width: 26px; }
}

/* ---------- sections ---------- */
.sec { position: relative; border-top: 1px solid var(--line-strong); padding-block: var(--s12); }
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
.sec[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }   /* the section's rule tucks under the nav's: one line, not two */
.has-play .sec-moves[id] { scroll-margin-top: -1px; }   /* 001 pinned: the screen already pads the nav inside itself; -1px drops the section's own top rule */
/* Section heads, one system on Lend and Wallet (plan C2, 2026-09-27): the number sits before the title on its first
   line, small mono and muted, the tops of its figures on the title's cap height (Archivo caps 0.686em, JetBrains Mono
   figures 0.73em). No space between them in the markup, so the number never ends a line alone: it wraps with the
   first word, on phones too. The section's short name lives in the menu (data-n, data-nav).
   --sec-fs hands the title's own size down to the number: registered as a length, 1em computes on the h2, so the
   same rule fits the 48px titles, the 84px closing one and the 28px phone ones. */
@property --sec-fs { syntax: "<length>"; inherits: true; initial-value: 0px; }
.sec-head { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
.sec-t { --sec-fs: 1em; max-width: 28ch; }
.sec-n {
  font: 600 clamp(12px, calc(var(--sec-fs) * .28), 16px)/1 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--muted); margin-inline-end: max(10px, calc(var(--sec-fs) * .3)); user-select: none;
  vertical-align: calc(var(--sec-fs) * .686 - .73em);
}
@media (max-width: 720px) { .sec { padding-block: var(--s8); } }

/* ---------- hero: one sentence, full screen, one block that changes word and colour along the pin, two wide fans behind it ---------- */
.hero { position: relative; }
/* the extra height is the scroll room for the four words, a quarter each; only added when JS can drive it */
.has-pin .hero { height: 200vh; }
.hero-stage {
  position: relative; overflow: hidden;
  display: grid; align-content: center; justify-items: center;
  min-height: 100svh; padding: var(--s12) 0;
}
.has-pin .hero-stage { position: sticky; top: 0; height: 100svh; padding: 0; }
/* two crimson fans (the Templar cross), one sweeping in from the left, one from the right; both turn downward
   and stay wide, so the two fans cover the whole bottom edge instead of funnelling into a trunk. Depth without a
   new hue: the nearer fan (the right one, it moves more under the pointer) is the crimson lifted towards white
   on onyx, the back one pure crimson; on platinum the back one is the darker crimson ink */
/* the fans stay full top to bottom; they only thin out across the band the sentence occupies,
   so the type keeps its contrast without the background losing its fill */
.paths {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 24%, rgba(0,0,0,.56) 38%, rgba(0,0,0,.56) 64%, #000 78%);
  mask-image: linear-gradient(to bottom, #000 0 24%, rgba(0,0,0,.56) 38%, rgba(0,0,0,.56) 64%, #000 78%);
}
.paths-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.paths { --fan-back: var(--crimson-ink); --fan-front: var(--crimson); }
:root[data-theme="dark"] .paths { --fan-back: var(--crimson); --fan-front: color-mix(in oklab, var(--crimson) 72%, #fff); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .paths { --fan-back: var(--crimson); --fan-front: color-mix(in oklab, var(--crimson) 72%, #fff); }
}
.paths-l use { stroke: var(--fan-back); }
.paths-r use { stroke: var(--fan-front); }
.paths-layer .base { stroke-linecap: round; }
.paths-layer .flow { stroke-linecap: round; stroke-dasharray: .3 .7; stroke-dashoffset: 1; animation: pflow var(--period, 11s) linear var(--o, 0s) infinite; }
@keyframes pflow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* the arrival: each fan is revealed as a whole (a clip that opens from its own edge, plus a short fade),
   nothing touches the strokes themselves and nothing scales the masked layer — the two things that made the
   lines flicker while they drew in. Reduced motion: the fans are simply there. */
.js .paths-layer { animation: fans-reveal 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.js .paths-r { animation-name: fans-reveal-r; animation-delay: .08s; }
@keyframes fans-reveal { from { clip-path: inset(0 100% 0 0); opacity: 0; } 35% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes fans-reveal-r { from { clip-path: inset(0 0 0 100%); opacity: 0; } 35% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .paths-layer .flow { animation: none; stroke-dasharray: none; stroke-opacity: .25; }
  .js .paths-layer { animation: none; clip-path: none; opacity: 1; }
}
.hero-inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.hero-inner .display { max-width: 18ch; }
.hero .word { display: inline-block; }
/* while the pin hides the bar, the brand sits where the bar's own will land once the first screen is behind you */
.hero-top { display: none; }
.has-pin .hero-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; }
.hero-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--display); font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; font-size: 17px; line-height: 1; color: var(--ink-strong); }
.hero-brand img { width: 26px; height: 26px; }
@media (max-width: 640px) { .hero-brand { font-size: 15px; } }
/* «bitcoin» gets the orange bar (orange only where bitcoin is named); main.js draws it in with --u */
.u-btc { position: relative; display: inline-block; }
.u-btc::after { content: ""; position: absolute; left: 0; right: 0; bottom: .01em; height: .09em; background: var(--orange); transform: scaleX(var(--u, 1)); transform-origin: 0 50%; }
/* one flat colour per word, never mixed with black: Liquid cyan, the contract in the block colour (white on
   onyx, jet on platinum), transparent emerald, secure crimson. Each word carries its tone; main.js copies the
   current one onto the hero (hairline) */
.hero { --p: 0; --mx: 0; --my: 0; }
.hero [data-tone="liquid"], .hero[data-tone="liquid"] { --mk: var(--cyan); --on-mk: var(--platinum); }
.hero [data-tone="contract"], .hero[data-tone="contract"] { --mk: var(--block); --on-mk: var(--on-block); }
.hero [data-tone="clear"], .hero[data-tone="clear"] { --mk: var(--emerald); --on-mk: var(--onyx); }
.hero [data-tone="safe"], .hero[data-tone="safe"] { --mk: var(--crimson); --on-mk: #FFFFFF; }
.mark { display: inline-block; padding: 0 .12em; color: var(--on-mk); background: var(--mk); }
/* the block: four words, each in its flat colour. Still (no JS, reduced motion) they stand side by side on
   one line; pinned they share one cell, the widest sets the width so nothing reflows or re-centres at a cut,
   and the next layer wipes in over the last (main.js: clip-path, left to right, ~220 ms) */
.hero .mark { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; margin: .9em auto 0; padding: 0; font-size: clamp(15px, 1.9vw, 26px); letter-spacing: -.01em; line-height: 1; background: none; }
.hero .mark-txt { padding: .12em .34em .16em; white-space: nowrap; background: var(--mk); color: var(--on-mk); }
.has-pin .hero .mark { display: grid; gap: 0; width: max-content; max-width: 100%; margin: .2em auto 0; font-size: inherit; letter-spacing: inherit; line-height: inherit; }
.has-pin .hero .mark-txt { grid-area: 1 / 1; padding: .03em .26em .07em; visibility: hidden; }
.has-pin .hero .mark-txt.is-on, .has-pin .hero .mark-txt.is-in { visibility: visible; }
.has-pin .hero .mark-txt.is-in { z-index: 1; }
/* the way on: a thin arrow at the foot of the pinned screen, nudging now and then; main.js scrolls the whole
   pin for you (the four words pass by), the plain link lands on the band when there is no pin */
.hero-down {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--muted); transition: color .15s;
}
.hero-down svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.hero-down:hover { color: var(--ink-strong); text-decoration: none; }
@keyframes nudge { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .hero-down svg { animation: none; } }
/* phones: the sentence and the block keep inside the gutter at 360 */
@media (max-width: 520px) {
  .hero-inner .display { font-size: min(38px, 9.8vw); }
  .has-pin .hero .mark { font-size: min(1em, 8.4vw); }
  .hero .mark-txt { padding-inline: .16em; }
}
/* short screens (laptops at 640-720, phones on their side): the pinned screen is only 100svh tall, so the
   sentence is sized by the height too; below ~520px the brand steps aside */
@media (max-height: 760px) and (min-width: 521px) {
  .has-pin .hero-inner .display { font-size: min(clamp(38px, 5.8vw, 76px), 9.6vh); }
}
@media (max-height: 520px) and (min-width: 521px) {
  .has-pin .hero-inner .display { font-size: min(clamp(28px, 5.8vw, 76px), 8.6vh); }
  .has-pin .hero-top { display: none; }
}
/* depth. --p: scrolling pushes through the fans, which open like a curtain; --mx/--my: the pointer moves
   the two fans and the sentence on different planes */
.paths { transform: scale(calc(1 + var(--p) * .18)); transform-origin: 50% 62%; }
.paths-layer { overflow: visible; }
.paths-l { translate: calc(var(--mx) * -14px - var(--p) * 2.4vw) calc(var(--my) * -8px); }
.paths-r { translate: calc(var(--mx) * -24px + var(--p) * 2.4vw) calc(var(--my) * -13px); }
.hero-inner { translate: calc(var(--mx) * 7px) calc(var(--my) * 5px); }
/* on platinum the thin strokes need more ink, or the crimson reads as pink */
:root[data-theme="light"] .paths-layer .base { stroke-opacity: .4; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .paths-layer .base { stroke-opacity: .4; } }
@media (prefers-reduced-motion: no-preference) {   /* reduced motion keeps its still, faint dashes */
  :root[data-theme="light"] .paths-layer .flow { stroke-opacity: .72; }
}
@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .paths-layer .flow { stroke-opacity: .72; }
}
/* the pin's progress along the bottom edge, in the word's colour, over a notch where each word starts
   (main.js adds one <b> per word and lights the ones already reached) */
.hero-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 2; display: none; pointer-events: none; }
.has-pin .hero-prog { display: block; }
.hero-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.hero-prog::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  transform: scaleX(var(--p)); transform-origin: 0 50%; background: var(--mk); transition: background-color .2s;
}
.hero-prog b { position: absolute; bottom: 0; width: 2px; height: 10px; background: var(--line-strong); transition: background-color .2s; }
.hero-prog b.is-on { background: var(--mk); }
@media (max-width: 720px) { .has-pin .hero { height: 180vh; } }

/* ---------- CTA: solid orange block, thin rotating ring, hard hover ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 var(--s4); border-radius: var(--r);
  background: var(--primary); color: var(--on-primary);
  font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: color .15s;
}
.cta::before {
  /* the ring: a rotating sweep visible only in the 2px band left open by ::after */
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 56%, #FFC7CB 70%, transparent 84%);
  animation: cta-ring 5s linear infinite;
}
.cta::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 2px; background: var(--primary); }
.cta > span { position: relative; }
.cta-arrow { font-family: var(--display); font-weight: 700; font-size: 1.3em; line-height: 1; transition: translate .2s cubic-bezier(.2, .7, .2, 1); }
.cta:hover { text-decoration: none; }
.cta:hover::before { animation: none; background: var(--ink-strong); }
.cta:hover .cta-arrow { translate: 4px 0; }
.cta:active { translate: 0 1px; }
.cta-hero { height: 64px; padding: 0 var(--s6); font-size: 15px; gap: 14px; }
.cta-sm { height: 36px; padding: 0 14px; font-size: 12px; gap: 8px; }
.cta-sm::after { inset: 1.5px; }
@keyframes cta-ring { to { rotate: 360deg; } }
/* an action that is not there yet: the button keeps its place, switched off, and says so */
.cta.is-soon { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); cursor: default; gap: 10px; }
.cta.is-soon::before, .cta.is-soon::after { content: none; }
.cta.is-soon em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: var(--r); padding: 4px 6px; }
.cta.is-soon:hover { border-color: var(--line-strong); }
.foot-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.foot-soon em { font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }
@media (max-width: 720px) { .cta-hero { width: min(100%, 360px); } }
@media (prefers-reduced-motion: reduce) { .cta::before { animation: none; background: var(--onyx); opacity: .35; } }

/* ---------- key/value cell ---------- */
.kv { display: flex; justify-content: space-between; gap: var(--s2); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.kv .k { color: var(--muted); text-transform: uppercase; }
.kv .v { color: var(--ink-strong); font-weight: 600; text-align: right; }
.kv .v.orange { color: var(--primary); }

/* ---------- fondamentali: the band under the alpha line, on --surface, edge to edge. The problem in one sentence
   on the left (4/12), the protocol's four answers on the right: icon, key, one line, hairlines only. The icons move
   once on first view (main.js initFund: .is-armed, then .is-play), 500ms each and 120ms apart, ease-out quart: the
   lock closes, the shield's check draws, a flat line runs under the tag (the fee card's flat rate), the slash
   crosses the eye. The resting state is the final frame, so without JS or with reduced motion nothing waits.
   Below 1180px the sentence sits on top; phones: a 17px sentence, the cells 2×2 with the icon beside the key ---------- */
.spec { position: relative; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.spec[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }   /* the band's rule tucks under the nav's */
.spec-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.spec-lead { align-self: center; max-width: 30ch; margin: 0; padding: 28px var(--s4) 28px 0; font: 600 20px/1.4 var(--display); letter-spacing: -.01em; color: var(--ink-strong); text-wrap: pretty; }
.spec-fund { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.fund { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "k" "v"; align-content: start; row-gap: 6px; padding: 28px 20px 30px; border-left: 1px solid var(--line); }
.fund:first-child { border-left: 0; }
.fund-ic { grid-area: ic; width: 36px; height: 36px; margin-bottom: 10px; overflow: visible; color: var(--muted); }
.fund-ic.is-ink { color: var(--ink-strong); }
.fund-ic.is-liquid { color: var(--liquid); }
.fund-ic.is-proof { color: var(--proof); }
.fund-k { grid-area: k; font: 700 15px/1.3 var(--mono); letter-spacing: 0; color: var(--ink-strong); }
.fund-v { grid-area: v; display: block; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.fund-v::first-letter { text-transform: uppercase; }
/* the drawn parts (pathLength 1: an offset of 1.05 hides a stroke, 0 draws it whole) */
.fm-open { opacity: 0; }
.fm-chk { fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linejoin: round; stroke-dasharray: 1 2; }
.fm-flat { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 2; }
.fm-eye path, .fm-eye circle { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fm-eye .fm-cut { stroke: var(--surface); stroke-width: 6.4; }   /* the band's own colour cuts the eye where the slash crosses */
.fm-cut, .fm-slash { stroke-dasharray: 1 2; }
.spec.is-armed .fm-open { opacity: 1; }
.spec.is-armed .fm-shut { opacity: 0; }
.spec.is-armed :is(.fm-chk, .fm-flat, .fm-cut, .fm-slash) { stroke-dashoffset: 1.05; }
.spec.is-play .fm-open { animation: fm-open .5s linear both; }
.spec.is-play .fm-shut { animation: fm-shut .5s linear both; }
.spec.is-play .fm-lock { animation: fm-click .5s cubic-bezier(.25, 1, .5, 1) both; }
.spec.is-play .fm-chk { animation: fm-draw .5s cubic-bezier(.25, 1, .5, 1) .12s both; }
.spec.is-play .fm-flat { animation: fm-draw .5s cubic-bezier(.25, 1, .5, 1) .24s both; }
.spec.is-play :is(.fm-cut, .fm-slash) { animation: fm-draw .5s cubic-bezier(.25, 1, .5, 1) .36s both; }
@keyframes fm-open { 0%, 44% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes fm-shut { 0%, 44% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes fm-click { 0%, 52% { scale: 1; } 68% { scale: .9; } 100% { scale: 1; } }
@keyframes fm-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .spec .fund-ic, .spec .fund-ic * { animation: none !important; } }
@media (max-width: 1180px) {
  .spec-in { grid-template-columns: minmax(0, 1fr); }
  .spec-lead { max-width: 52ch; padding: 24px 0 20px; }
  .spec-fund { border-left: 0; border-top: 1px solid var(--line); }
  .fund:first-child { padding-left: 0; }
  .fund:last-child { padding-right: 0; }
}
@media (max-width: 767px) {
  .spec-lead { padding: 18px 0 14px; font-size: 17px; }
  .spec-fund { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fund { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic k" "v v"; column-gap: 8px; row-gap: 4px; padding: 14px 12px 16px 0; }
  .fund:nth-child(2n) { padding: 14px 0 16px 12px; }
  .fund:nth-child(3) { border-left: 0; }
  .fund:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fund-ic { width: 22px; height: 22px; margin: 0; align-self: center; }
  .fund-k { align-self: center; font-size: 14px; }
  .fund-v { font-size: 13px; }
}

/* ---------- alpha band (the landing and the wallet page): right under the hero, full width, amber hairlines on a
   faint amber wash: the tag, one sentence, and a + that opens what the alpha does today and what is still being
   built. Phones: the tag floats at the start of the sentence, the + is a 44px row, the two lists stack; from 768px
   the tag hangs in its own column and the lists sit side by side ---------- */
.alpha-band { border-block: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--bg)); }
.alpha-band + .sec, .alpha-band + .spec { border-top: 0; }   /* the band's amber hairline is the one line */
.ab-in { display: flow-root; padding-block: 14px 4px; }
.ab-in > .tag { float: left; height: 24px; margin: 0 10px 0 0; font-size: 12px; }
.ab-t { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink); text-wrap: pretty; }
.ab-more { margin-top: 4px; }
.ab-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: color .15s; }
.ab-more summary::-webkit-details-marker { display: none; }
.ab-more summary:hover { color: var(--ink-strong); }
.ab-more summary .plus-i { box-sizing: content-box; width: 10px; height: 10px; padding: 6px; border: 1px solid var(--warn); border-radius: var(--r); color: var(--warn); }
.ab-more summary .plus-i::before { left: 6px; right: 6px; top: 10px; }
.ab-more summary .plus-i::after { top: 6px; bottom: 6px; left: 10px; }
.ab-more summary .plus-i::before, .ab-more summary .plus-i::after { transition: rotate .25s cubic-bezier(.2, .7, .2, 1); }
.ab-more[open] summary .plus-i::before, .ab-more[open] summary .plus-i::after { rotate: 45deg; }
.ab-cols { display: grid; gap: var(--s3); padding: 8px 0 18px; }
.ab-cols .label { margin: 0 0 8px; }
.ab-cols ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ab-cols li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ab-cols li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
@media (min-width: 768px) {
  .ab-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0 14px; padding-block: 16px 6px; }
  .ab-in > .tag { float: none; grid-column: 1; margin: 0; }
  .ab-t { grid-column: 2; font-size: 16px; }
  .ab-more { grid-column: 2; }
  .ab-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); max-width: 920px; }
}
@media (prefers-reduced-motion: reduce) { .ab-more summary .plus-i::before, .ab-more summary .plus-i::after { transition: none; } }
/* the landing's band (plan §3): the tag, one sentence, the docs link, nothing hidden. Phones: the tag floats at
   the start of the sentence as on the wallet page's band (158px at 390, against 190 with the tag on a line of its
   own), the link a 44px row under it; from 768px one row: tag · sentence · link */
.ab-in > .ab-doc { margin: 0; }
@media (max-width: 767px) { .ab-flat { padding-block: 14px 2px; } }
@media (min-width: 768px) {
  .ab-flat { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 20px; padding-block: 16px; }
  .ab-in > .ab-doc { grid-column: 3; white-space: nowrap; }
  .ab-flat .ab-t { max-width: 88ch; }
}

/* ---------- the docs line (plan §6): the one way a block points to the docs, left-aligned after its content.
   13px mono in sentence case, muted; ink and underlined on hover or focus, the arrow in ink (never crimson) and
   nudged 3px. Up to four chapter links on one line, « · » between them. Phones: every link is a 44px target ---------- */
.doc-line { margin: var(--s4) 0 0; font: 500 13px/1.5 var(--mono); letter-spacing: 0; color: var(--muted); text-wrap: pretty; }
.doc-line a { color: var(--muted); text-decoration: none; transition: color .2s cubic-bezier(.25, 1, .5, 1); }
.doc-line a:hover, .doc-line a:focus-visible { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-line > span[aria-hidden] { display: inline-block; color: var(--ink); transition: translate .2s cubic-bezier(.25, 1, .5, 1); }
.doc-line a:hover ~ span[aria-hidden], .doc-line a:focus-visible ~ span[aria-hidden] { translate: 3px 0; }
@media (max-width: 767px) { .doc-line a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .doc-line > span[aria-hidden] { transition: none; } }
/* the alpha line beside a download or wallet button (wallet page, landing 007): an amber dot and one row of mono, 12px in both themes */
.dl-alpha { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; font: 600 12px/18px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); }
.dl-alpha .dot { width: 7px; height: 7px; margin-top: 5.5px; border-radius: 50%; background: currentColor; }

/* ---------- 001 · pinned full screen: a title that tells the step, a picture that plays it ---------- */
.sec-moves { position: relative; border-top: 1px solid var(--line-strong); padding-block: var(--s12); }
.has-play .sec-moves { padding-block: 0; }
.moves-pin { position: relative; display: grid; gap: var(--s6); }
.has-play .moves-pin {
  height: 100svh; min-height: 540px; overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 2.2vh, 28px);
  padding-block: calc(var(--nav-h) + clamp(10px, 2.4vh, 28px)) clamp(12px, 2.6vh, 28px);
}
.moves-pin > .wrap { width: 100%; }   /* a grid item with auto margins would shrink to its content */
.moves-body { display: grid; align-content: center; min-height: 0; }

/* the state, top left, in colour: grey offer · orange active · green repaid · amber expired */
.dg-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: clamp(8px, 1.6vh, 18px); }
.dg-state { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r); transition: border-color .35s, background-color .35s; }
.dg-state b { --ls: .14em; font: 800 clamp(12px, 1.1vw, 15px)/1 var(--mono); letter-spacing: var(--ls); text-transform: uppercase; color: var(--muted); transition: color .35s; }
/* the pill is as wide as its longest word from the start («Nell'orderbook», «Collateral to Bob»), so the chips beside it never move */
.dg-state b { min-width: calc(14 * (1ch + var(--ls))); }
html[lang="en"] .dg-state b { min-width: calc(17 * (1ch + var(--ls))); }
.dg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: background-color .35s; }
.dg-state[data-tone="live"] { border-color: var(--primary); } .dg-state[data-tone="live"] b { color: var(--primary); } .dg-state[data-tone="live"] .dg-dot { background: var(--primary); animation: blink 1.4s steps(2, jump-none) infinite; }
.dg-state[data-tone="ok"] { border-color: var(--proof); }     .dg-state[data-tone="ok"] b { color: var(--proof); }     .dg-state[data-tone="ok"] .dg-dot { background: var(--proof); }
.dg-state[data-tone="warn"] { border-color: var(--warn); }    .dg-state[data-tone="warn"] b { color: var(--warn); }    .dg-state[data-tone="warn"] .dg-dot { background: var(--warn); }
@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
/* 001's number, before the state pill: the same size as every section number (its --sec-fs is a section title's size) */
.dg-n { --sec-fs: clamp(28px, 3.8vw, 48px); margin-inline-end: 0; }
/* the two endings: they only show up once the story forks */
.forks { display: inline-flex; align-self: stretch; gap: 6px; }
html:not(.has-play) .forks, html:not(.has-play) .dg-state { display: none; }   /* no picture, no state to show */
button.fk { background: var(--bg); cursor: pointer; }
button.fk:hover { color: var(--ink-strong); border-color: var(--line-strong); }
.fk { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); transition: color .3s, border-color .3s; }
.fk .ic { width: 11px; height: 11px; color: inherit; display: block; visibility: hidden; }   /* the tick keeps its room: chip 2 never shifts */
.forks[data-branch="a"] .fk-a { color: var(--proof); border-color: var(--proof); }
.forks[data-branch="b"] .fk-a { color: var(--proof); } .forks[data-branch="b"] .fk-a .ic { visibility: visible; }
.forks[data-branch="b"] .fk-b { color: var(--warn); border-color: var(--warn); }

/* the story. Unpinned (no JS, reduced motion) it is a plain numbered read; pinned, every step
   sits in the same cell and main.js fades it in, word by word, as the scroll advances */
.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3) var(--s4); }
.st-k { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-strong); }
.st-k em { font: 700 .62em/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--primary); margin-right: .5em; }
.st-p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.st-intro { grid-column: 1 / -1; } .st-intro .st-k { font-size: clamp(30px, 4.6vw, 56px); font-stretch: 125%; letter-spacing: -.03em; }
.st-outro { display: none; }
.has-play .story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.has-play .st { grid-area: 1 / 1; display: block; opacity: 0; will-change: opacity; }
.has-play .st-k, .has-play .st-intro .st-k { font-stretch: 125%; font-size: clamp(34px, min(5.8vw, 9.5vh), 88px); line-height: 1; letter-spacing: -.035em; will-change: transform; }
.has-play .st-k em { font-size: .36em; vertical-align: .95em; margin-right: .6em; }
/* crimson is 3.1:1 on the dark canvas: the step's marker keeps it only while it reads as large text (from 1024px
   it is 21px bold or more); smaller, it goes muted like the section numbers */
@media (max-width: 1023px) { .st-k em { color: var(--muted); } }
/* the opening and closing lines are longer: they drop a size so the title cell stays one line tall
   (the story cell is as tall as its tallest step: one wrapped title would shrink every picture) */
.has-play .st-intro .st-k, .has-play .st-outro .st-k, .has-play .st-long .st-k { font-size: clamp(24px, min(4.1vw, 8vh), 62px); }
.has-play .st-p { margin-top: clamp(8px, 1.6vh, 16px); max-width: 52ch; color: var(--ink); font-size: clamp(16px, min(1.75vw, 3vh), 25px); line-height: 1.3; }
.st-p .w { opacity: 0; white-space: nowrap; }   /* a word never breaks at its hyphen: «L-BTC» stays whole */

/* the player: the picture runs on a clock. One hairline strip under it — play/pause, then a dash
   per step (the current one fills as its time passes, a click jumps there; scenario B in amber) */
.player { display: none; }
.has-play .player { display: flex; justify-content: center; }
.pl-bar { display: inline-flex; align-items: stretch; max-width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); }
.pl-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-strong); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; }
.pl-btn:hover { color: var(--primary); background: var(--surface); }
.pl-btn:active { translate: 0 1px; }
.pl-btn svg { width: 15px; height: 15px; }
.pl-bar > .pl-btn { border-right: 1.5px solid var(--line-strong); }
.pl-bar > .pl-btn:last-child { border-right: 0; border-left: 1.5px solid var(--line-strong); }
.pl-dots { display: flex; align-items: center; gap: 5px; padding-inline: 14px; }
.pl-dot { position: relative; width: clamp(22px, 3.2vw, 42px); height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.pl-dot::before, .pl-dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 1px; }
.pl-dot::before { background: var(--line-strong); transition: background-color .15s; }
.pl-dot:hover::before { background: var(--muted); }
.pl-dot i { background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); }
.pl-dot.is-b i { background: var(--warn); }
.pl-gap { width: 1.5px; height: 14px; background: var(--line-strong); margin-inline: 5px; }
/* previous / next: a tall handle either side of the picture, level with the two actor cards.
   main.js keeps them there: --nav-shift follows the picture in when a short screen scales it
   down, --nav-dy lines them up with the cards. On narrow screens there is no room beside the
   cards and the pair inside the strip takes over */
.pl-side, .pl-in { display: none; }
.has-play .pl-side { display: inline-grid; width: 44px; height: 72px; z-index: 2; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); }
.has-play .pl-side:hover { border-color: var(--primary); background: var(--bg); }
.pl-side svg { width: 16px; height: 16px; }
.pl-side.is-prev { transform: translate(var(--nav-shift, 0px), var(--nav-dy, 0px)); }
.pl-side.is-next { transform: translate(calc(-1 * var(--nav-shift, 0px)), var(--nav-dy, 0px)); }
.has-play .moves-body { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(14px, 2.2vw, 32px); align-items: center; }
/* the docs line under the picture. Without JS it follows the story. Pinned, from 1280px it sits in the player's
   row, on the left, level with the bar, and takes no height from the picture; narrower, the bar leaves no room
   beside it and it takes a row of its own under the bar. Phones: under the tap stops */
.dg-docs .doc-line { margin-top: 0; }
@media (min-width: 1280px) {
  .has-play .dg-docs { position: absolute; left: 0; right: 0; bottom: clamp(12px, 2.6vh, 28px); height: 44px; display: flex; align-items: center; pointer-events: none; }
  .has-play .dg-docs .doc-line { pointer-events: auto; }
}
@media (max-height: 540px) and (min-width: 600px) { .has-play .dg-docs { display: none; } }   /* no row to spare */

/* the picture */
.diagram { position: relative; --coin: clamp(38px, min(4.8vw, 8vh), 72px); --coin-s: calc(var(--coin) * .56); --coin-xs: calc(var(--coin) * .44); }
/* every label in the picture reads at 12px or more: when a short screen scales the picture down
   (main.js sets --fit to that scale), the labels grow by as much */
.diagram { --lbl: calc(12px / var(--fit, 1)); }
html:not(.has-play) .diagram { display: none; }   /* no JS, or before main.js has placed a coin: the story alone */
/* a jump (a dot, a chip, the loop's wrap) repaints in one frame: main.js sets this for that frame only */
.dg-jump *, .dg-jump *::before, .dg-jump *::after { transition: none !important; }
.dg-stage { position: relative; display: grid; will-change: opacity, transform; }

/* lanes sit under the cards: generated from the real slots (main.js), so they follow any layout */
.rails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.rail { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .75; }
/* the route of the coin that is moving right now, drawn behind it (main.js sets the dash) */
.trk { fill: none; stroke-width: 2.5; stroke-linecap: butt; stroke-dasharray: 0 1; }
.trk.is-btc { stroke: var(--orange); } .trk.is-usd { stroke: var(--emerald); }

/* borrower · contract · lender. Pockets share one baseline, so collateral travels on a straight line */
.dg-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(18px, 9vw, 170px); align-items: end; }
.node { position: relative; display: grid; justify-items: center; gap: 5px; padding: clamp(10px, 2vh, 22px) 10px clamp(10px, 1.8vh, 18px); border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); text-align: center; transition: opacity .4s, border-color .35s; }
.node-ic { width: clamp(30px, min(4.4vw, 7.2vh), 66px); height: clamp(30px, min(4.4vw, 7.2vh), 66px); color: var(--ink-strong); transition: color .35s; }
.node-k { font: 700 max(var(--lbl), clamp(12px, 1.1vw, 15px))/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); }
.node-s { font: 500 var(--lbl)/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.pocket { display: flex; align-items: center; justify-content: center; gap: clamp(5px, .8vw, 12px); margin-top: clamp(6px, 1.4vh, 16px); min-height: var(--coin); }
.slot { flex: 0 0 auto; border: 1.5px dashed var(--line-strong); border-radius: 50%; }
.slot-lg { width: var(--coin); height: var(--coin); } .slot-sm { width: var(--coin-s); height: var(--coin-s); } .slot-xs { width: var(--coin-xs); height: var(--coin-xs); }
[data-scene="offer"] #node-b { opacity: .3; }   /* Bob proposes alone: Alice is not in it yet */

/* the contract: its lock beside the title (the card stays short, the picture stays big), the terms Templar
   writes under them, the collateral's pocket at the foot; the lock closes when the bitcoin lands */
.node-c { border-style: dashed; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: 0; }
.node-c > .ic-lk { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: clamp(24px, min(2.6vw, 4.4vh), 40px); height: clamp(24px, min(2.6vw, 4.4vh), 40px); margin-right: 10px; }
.node-c > .node-k { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; }
.node-c > .node-s { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; }
.node-c > .terms, .node-c > .pocket { grid-column: 1 / -1; }
.ic-lk { color: var(--muted); }
/* one grid for the five rows (each row a subgrid): the label column is as wide as the longest
   label, and the bars and values start together. Templar writes them when Alice accepts */
.terms { width: 100%; max-width: 300px; display: grid; grid-template-columns: 16px minmax(0, 1fr) max-content; gap: clamp(2px, .5vh, 5px) 9px; margin-top: clamp(4px, 1vh, 10px); }
.terms li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.terms .ic { width: 16px; height: 16px; }
.t-btc .ic { color: var(--orange); } .t-usd .ic { color: var(--proof); }
.tv { justify-self: start; font: 700 var(--lbl)/1 var(--mono); letter-spacing: .02em; color: var(--ink-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.terms span { text-align: left; font: 500 var(--lbl)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bar { display: flex; gap: 2px; height: clamp(7px, 1.1vh, 10px); transform-origin: 0 50%; }
.bar-f, .bar-x { display: block; height: 100%; border-radius: 1px; }
.t-btc .bar-f { width: 52%; background: var(--orange); }
/* the margin: the stretch of collateral that has no loan against it */
.t-btc .bar-x { width: 48%; background: var(--orange); opacity: .38; transition: opacity .3s; }
.is-cover .t-btc .bar-x { opacity: 1; animation: blink 1s steps(2, jump-none) infinite; }
/* the debt: main.js takes a quarter off at every installment */
.t-usd .bar-f { width: 52%; background: var(--emerald); transform-origin: 0 50%; }
/* the four installments: a mark turns green when its payment lands */
.bar-minis i { flex: 1 1 0; height: 100%; border: 1px solid var(--muted); border-radius: 1px; transition: background-color .3s, border-color .3s; }
.bar-minis i.paid { background: var(--proof); border-color: var(--proof); }
/* reduced motion: nothing blinks (the live dot, the current block, the margin) */
@media (prefers-reduced-motion: reduce) { .dg-state[data-tone] .dg-dot, .blocks i.now, .is-cover .t-btc .bar-x { animation: none; } }
[data-tone="live"] .node-c { border-style: solid; border-color: var(--primary); } [data-tone="live"] .ic-lk { color: var(--primary); }
[data-tone="ok"] .node-c { border-style: solid; border-color: var(--proof); }     [data-tone="ok"] .ic-lk { color: var(--proof); }
[data-tone="warn"] .node-c { border-style: solid; border-color: var(--warn); }    [data-tone="warn"] .ic-lk { color: var(--warn); }
[data-scene="endA"] #node-b, [data-scene="endA"] #node-l { border-color: var(--proof); }
[data-scene="endB"] #node-b, [data-scene="endB"] #node-l { border-color: var(--warn); }

/* under the cards: the payment lane (main.js draws it one big coin above Templar's box). Templar hangs
   plumb under the contract; its slot on the top edge is not drawn (it keeps its size: main.js measures the
   lane from it). Under the cross, «+ commissione» turns up in green once the contract is open, the fee
   being taken at the opening (plan S2). Beside it a tiny orderbook: Bob's proposal fills its row and Alice's
   yes turns it green; the neighbours are bars, with no invented rates */
.lane { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: calc(var(--coin) + clamp(24px, 3.4vh, 32px)); }
.tpl { position: relative; display: flex; align-items: center; gap: 12px; padding: calc(var(--coin-xs) / 2 + 6px) 12px 8px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--bg); transition: border-color .35s; }
.tpl-slot { position: absolute; left: 50%; top: 0; translate: -50% -50%; visibility: hidden; }
.tpl.is-paid { border-style: solid; border-color: var(--proof); }
.tpl-fee { font: 600 var(--lbl)/1 var(--mono); letter-spacing: .02em; color: var(--proof); white-space: nowrap; opacity: 0; transition: opacity .3s cubic-bezier(.25, 1, .5, 1); }
.tpl.is-paid .tpl-fee { opacity: 1; }
.tpl-k { display: grid; justify-items: center; gap: 6px; }
.tpl-ic { display: block; width: clamp(20px, 2vw, 28px); height: auto; }
.tpl-k b { font: 700 var(--lbl)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-strong); }
.book { display: grid; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line); }
.book li { padding: 1px 7px; border: 1px solid transparent; border-radius: var(--r); font: 600 var(--lbl)/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s, border-color .3s; }
.book .ob-bob { border: 1px dashed var(--line-strong); color: transparent; }
.book .ob-bob.is-in { border-style: solid; border-color: var(--ink-strong); color: var(--ink-strong); }
.book .ob-bob.is-taken { border-color: var(--proof); color: var(--proof); }
.book .ob-x { position: relative; width: calc(3.2em + 7px); height: calc(1em + 4px); padding: 0; }
.book .ob-x:last-child { width: calc(2.4em + 7px); }
.book .ob-x::before { content: ""; position: absolute; left: 7px; right: 0; top: 50%; height: .45em; margin-top: -.225em; border-radius: 2px; background: var(--line-strong); }

/* time, drawn as what it is: small blocks, one after the other, up to the flag; under them a tick per
   installment with its real height (every 8 blocks of 32, i.e. every 10.800 of 43.200), green when paid, amber
   when passed unpaid. By the flag, the counter (main.js): «12.340 / 43.200 blocchi», then «43.201 · scaduto» in
   amber. Its box is as wide as the longest line, so the blocks never shift */
.chain { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-top: clamp(8px, 1.8vh, 18px); padding-bottom: calc(var(--lbl) + 9px); }
.blk-n { min-width: 23ch; text-align: right; font: 500 var(--lbl)/1 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; transition: color .3s; }
.blk-n b { display: inline-block; min-width: 6ch; font-weight: 700; color: var(--ink-strong); transition: color .3s; }
.blk-n.is-late, .blk-n.is-late b { color: var(--warn); }
.chain > .ic { width: 18px; height: 18px; }
.chain-flag { transition: color .3s; }
.blocks { position: relative; display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: clamp(2px, .35vw, 5px); }
.tick { position: absolute; top: calc(100% + 1px); translate: -50% 0; padding-top: 7px; font: 700 var(--lbl)/1 var(--mono); color: var(--muted); transition: color .3s; }
.tick::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 4px; margin-left: -.75px; background: currentColor; }
.tick:nth-of-type(1) { left: 25%; } .tick:nth-of-type(2) { left: 50%; } .tick:nth-of-type(3) { left: 75%; } .tick:nth-of-type(4) { left: 100%; }
.tick.paid { color: var(--proof); } .tick.miss { color: var(--warn); }
.blocks i { aspect-ratio: 1; max-height: 26px; border: 1.5px solid var(--line-strong); border-radius: 2px; background: transparent; transition: background-color .18s, border-color .18s; }
.blocks i.on { background: var(--primary); border-color: var(--primary); }
.blocks i.now { border-color: var(--primary); animation: blink .9s steps(2, jump-none) infinite; }
[data-tone="ok"] .blocks i.on { background: var(--proof); border-color: var(--proof); }
[data-tone="warn"] .blocks i.on { background: var(--warn); border-color: var(--warn); }
[data-tone="warn"] .chain-flag { color: var(--warn); }

/* the money itself: a coin that leaves one pocket and lands in another */
.coin { position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; border-radius: 50%; pointer-events: none; will-change: transform; color: var(--onyx); }
.coin svg { width: 62%; height: 62%; }
.coin-lg { width: var(--coin); height: var(--coin); } .coin-sm { width: var(--coin-s); height: var(--coin-s); }
.coin.is-btc { background: var(--orange); } .coin.is-usd { background: var(--emerald); }
/* what travels that is not money: the proposal (its rate), Alice's yes, the signed sheets (a green check: each
   leaves its signer's pocket, so who signed needs no letter) and the joined transaction, which carries the cross */
.tok { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; transform: scale(0); }
.tok-rate { padding: 4px 8px; border: 1.5px solid var(--ink-strong); border-radius: var(--r); background: var(--bg); font: 700 var(--lbl)/1 var(--mono); color: var(--ink-strong); white-space: nowrap; }
.tok-ok { display: grid; place-items: center; width: var(--coin-s); height: var(--coin-s); border-radius: 50%; background: var(--proof); color: var(--bg); }
.tok-ok svg { width: 56%; height: 56%; }
.tok-doc { width: calc(var(--coin) * .8); height: calc(var(--coin) * .8); color: var(--ink-strong); }
.tok-doc::before { content: ""; position: absolute; inset: 11% 22% 10%; border-radius: 2px; background: var(--bg); }
.tok-doc svg { position: relative; display: block; width: 100%; height: 100%; }
.tok-doc > .tok-ok { position: absolute; top: -6%; right: 2%; width: calc(var(--lbl) + 8px); height: calc(var(--lbl) + 8px); }
.tok-doc > .tok-ok svg { width: 70%; height: 70%; }
.tok-x { position: absolute; top: 2%; right: 4%; width: 40%; height: auto; }
.trk.is-tok { stroke: var(--ink-strong); stroke-width: 1.5; } .trk.is-ok { stroke: var(--proof); stroke-width: 1.5; }
/* held in the contract: a ring inside the coin. Inset shadows follow the radius everywhere
   (an outline is drawn square by Safari before 16.4) */
.coin.is-held { box-shadow: inset 0 0 0 3px var(--orange), inset 0 0 0 5px var(--bg); }

/* scenario B is another run of the same contract: its own frame, after a clean cut */
.dg-stage::after { content: ""; position: absolute; inset: -12px; border: 1.5px dashed var(--warn); border-radius: var(--r); opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 0; }
[data-branch="b"] .dg-stage::after { opacity: 1; }
.cut-ic { position: absolute; left: 50%; top: 50%; width: clamp(64px, 9vw, 132px); height: clamp(64px, 9vw, 132px); margin: calc(clamp(64px, 9vw, 132px) / -2) 0 0 calc(clamp(64px, 9vw, 132px) / -2); color: var(--warn); opacity: 0; pointer-events: none; }

.ic { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.cta .ic { color: inherit; }
.ic-arrow { width: 13px; height: 13px; color: var(--primary); }

/* short screens: tighten before main.js has to scale the whole picture down */
.diagram { transform-origin: 50% 50%; }
@media (max-height: 800px) {
  .has-play .st-k, .has-play .st-intro .st-k { font-size: clamp(30px, min(5vw, 8vh), 64px); }
  .node { padding-block: 10px; gap: 3px; }
  .terms { gap: 3px; margin-top: 4px; }
  .pocket { margin-top: 6px; }
  .lane { padding-top: calc(var(--coin) + 26px); }
  .tpl { padding: calc(var(--coin-xs) / 2 + 5px) 10px 6px; }
  .chain { margin-top: 10px; } .blocks i { max-height: 18px; }
}
@media (max-width: 960px) {
  .forks { margin-left: auto; }
  /* the terms keep their labels: the contract takes more of the width, the gaps less */
  .dg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(18px, 4vw, 40px); }
}
@media (max-width: 720px) {
  .has-play .moves-pin { padding-block: calc(var(--nav-h) + 8px) 10px; gap: 8px; }
  .dg-head { gap: 8px; margin-bottom: 8px; }
  .dg-state { padding: 5px 9px 5px 8px; gap: 7px; } .dg-state b { --ls: .08em; font-size: 12px; }
  .fk { padding: 0 7px; letter-spacing: .02em; }
  .has-play .st-k, .has-play .st-intro .st-k { font-size: clamp(30px, 9.4vw, 40px); }
  .has-play .st-p { font-size: 15px; line-height: 1.32; margin-top: 8px; }
  .dg-grid { column-gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
  .node { padding: 9px 4px; gap: 4px; }
  .node-k { letter-spacing: .04em; } .node-s { letter-spacing: 0; }
  .pocket { gap: 3px; }
  .terms { grid-template-columns: 12px minmax(0, 1fr); gap: 4px 5px; } .terms span { display: none; } .terms .ic { width: 12px; height: 12px; }
  .bar { height: 6px; }
  .tpl { padding: calc(var(--coin-xs) / 2 + 5px) 10px 6px; gap: 10px; } .tpl-ic { width: 18px; } .book { padding-left: 10px; }
  .chain { gap: 7px; margin-top: 10px; } .chain > .ic { width: 14px; height: 14px; }
  .blocks { gap: 2px; } .blocks i { border-width: 1px; }
  .dg-stage::after { inset: -7px; }
  .has-play .pl-side { display: none; } .has-play .pl-in { display: inline-grid; width: 44px; }
  .has-play .moves-body { grid-template-columns: minmax(0, 1fr); }
  .pl-bar { display: flex; width: 100%; } .pl-bar > .pl-btn { width: 44px; }
  .pl-dots { flex: 1 1 auto; min-width: 0; gap: 4px; padding-inline: 10px; } .pl-dot { flex: 1 1 0; width: auto; min-width: 0; } .pl-gap { margin-inline: 3px; }
}
/* phones: a compact head, so the title, the picture and the player share the screen. At 390 the
   pill and both chips still fit one row once the chips drop their letter-spacing and the tick's
   reserve (the chips are right-aligned, so a changing state word never moves them); the title
   settles at 30px. A chip stays 30px tall but takes a 44px touch */
@media (max-width: 440px) {
  .dg-head { gap: 6px; }
  .dg-state { padding: 5px 8px 5px 7px; gap: 6px; } .dg-state b { --ls: 0; }
  .fk { position: relative; min-height: 30px; padding: 0 6px; letter-spacing: 0; }
  .fk::before { content: ""; position: absolute; inset: -7px 0; }
  .fk .ic { display: none; }   /* the chip's colour alone says which ending has played */
  .has-play .st-k, .has-play .st-intro .st-k { font-size: 30px; }
  .has-play .st-k em { font-size: 12px; }   /* the step's marker keeps the 12px floor at a 30px title */
}
/* the smallest phones: no row holds all three at 12px. The pill keeps the first, the two endings split the second */
@media (max-width: 374px) {
  .forks { flex: 1 1 100%; margin-left: 0; }
  .fk { flex: 1 1 0; justify-content: center; min-width: 0; }
}
/* the smallest phones: a smaller coin keeps both slots inside each card */
@media (max-width: 350px) { .diagram { --coin: 32px; } }
/* landscape phones and short windows: no height for three rows, so the words sit beside the picture */
@media (max-height: 540px) and (min-width: 600px) {
  .has-play .moves-pin { min-height: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 0; }
  .has-play .moves-top { grid-area: 1 / 1; align-self: center; }
  .has-play .moves-body { grid-area: 1 / 2; grid-template-columns: minmax(0, 1fr); }
  .has-play .sec-moves .player { grid-area: 2 / 1 / 3 / 3; }
  .has-play .sec-moves .pl-side { display: none; } .has-play .sec-moves .pl-in { display: inline-grid; width: 44px; }
  .has-play .sec-moves .st-k, .has-play .sec-moves .st-intro .st-k { font-size: 28px; } .has-play .sec-moves .st-p { font-size: 14px; }
  .terms span { display: none; } .terms { grid-template-columns: 16px minmax(0, 1fr); }
  .fk { min-height: 26px; padding: 0 6px; letter-spacing: 0; }   /* the chips drop to their own row under the pill: they keep a button's height */
  .dg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(10px, 2vw, 40px); }   /* 9vw of the whole screen is too wide for half of it */
}

/* ---------- 003 · the schema: four answers side by side, one criterion per row, a few words per cell (the
   explanations live in the docs, #confronto). Compact: 20px cells, the words and a mark only ---------- */
.schema { display: grid; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.sch-heads, .sch-row { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(4, minmax(0, 1.4fr)); }
.sch-heads { background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.sch-head { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 20px; border-left: 1px solid var(--line-strong); }
.sch-head svg, .sch-head img { width: 40px; height: 40px; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink-strong); margin-bottom: 6px; }
.sch-head b { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink-strong); }
.sch-head span { font: 400 14px/1.35 var(--display); letter-spacing: 0; color: var(--muted); text-wrap: balance; }   /* a subline of four words, sentence case */
/* our column: the cross keeps its crimson on the plain surface, a crimson rule on top says which one is ours */
.sch-head.sch-us { box-shadow: inset 0 2px 0 var(--primary); }
.sch-head.sch-us img { border-color: var(--primary); }
/* wide screens (the column at its full width, from 1280px): a shorter header, the icon (32px) beside the name, the
   subline under both on one line; narrower, «Other blockchains» would wrap beside the icon */
@media (min-width: 1280px) {
  .sch-head { grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; padding: 16px 20px; }
  .sch-head svg, .sch-head img { width: 32px; height: 32px; padding: 6px; margin: 0; }
  .sch-head span { grid-column: 1 / -1; }
}
.sch-row { border-top: 1px solid var(--line-strong); }
.sch-row:first-of-type { border-top: 0; }
.sch-k { margin: 0; padding: 16px 20px; font: 700 16px/1.3 var(--display); font-stretch: 108%; letter-spacing: -.01em; color: var(--ink-strong); background: var(--surface); text-wrap: balance; }
/* under the row's name, the question it answers, in the body's voice */
.sch-k span { display: block; margin-top: 4px; font: 400 14px/1.4 var(--display); font-stretch: 100%; letter-spacing: 0; color: var(--muted); text-wrap: pretty; }
.sch-c { --cell: var(--bg); padding: 16px 20px; border-left: 1px solid var(--line-strong); background: var(--cell); font-size: 15px; line-height: 1.45; color: var(--ink); }
.sch-c b { display: flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--ink-strong); font-size: 15px; text-wrap: balance; }
.sch-c b::before { font-family: var(--mono); font-weight: 700; font-size: 15px; flex: 0 0 auto; }   /* 15px: the mark reads at a glance */
.sch-c b.no::before { content: "\2715"; color: var(--warn); }
.sch-c b.yes::before { content: "\2713"; color: var(--proof); }
.sch-c b:not([class])::before { content: "\2013"; color: var(--muted); }   /* neither yes nor no: a dash keeps the indent */
.sch-c.sch-us { --cell: color-mix(in oklab, var(--primary) 7%, var(--surface-2)); }
.sch-c::before { display: none; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); content: attr(data-who); margin-bottom: 6px; }
/* under the table, always visible: the trust that remains, the amber line (the Templar column is the full design,
   the alpha is simpler; sentence case here, a whole sentence), then the docs line */
.sch-foot { display: grid; justify-items: start; gap: 6px; margin-top: 20px; }
.sch-note { max-width: 110ch; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* the amber lines are sentences, so sentence case (uppercase mono is for labels of three words or fewer) */
.sch-alpha, .risk-alpha, .cta-alpha, .wl-ctas .dl-alpha { font: 500 13px/1.5 var(--mono); letter-spacing: 0; text-transform: none; }
.sch-alpha .dot, .risk-alpha .dot, .cta-alpha .dot, .wl-ctas .dl-alpha .dot { margin-top: 6px; }
.sch-foot .doc-line { margin-top: 6px; }
/* Durata: one 120×28 micro-chart under the words of each cell, aria-hidden. Templar: four groups of blocks (the
   installments) up to an emerald flag, no price line. Multisig and banks: the price (steel) dips through the
   amber threshold, a ✕ where it crosses, a flag at the term. Other chains: the same dip, no flag (open-ended) */
.dm { display: block; width: 120px; height: 28px; margin: 10px 0 0 15px; overflow: visible; }   /* 15px: the drawing (x=2) starts under the first letter, past the 15px mark and its 8px gap */
.dm path, .dm circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dm .dm-ax { stroke: var(--line); stroke-width: 1; }
.dm .dm-th { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 2.5; stroke-linecap: butt; }
.dm .dm-p { stroke: var(--muted); stroke-width: 1.5; }
.dm .dm-g { fill: var(--ink); stroke: none; }
.dm .dm-x circle { fill: var(--cell, var(--bg)); }   /* the cell's own colour parts the lines under the ✕ */
.dm .dm-x path { stroke: var(--warn); stroke-width: 1.6; }
.dm .dm-flag { fill: var(--muted); stroke: var(--muted); stroke-width: 1.2; }
.dm .dm-flag.is-ok { fill: var(--proof); stroke: var(--proof); }
.dm-g, .dm-x, .dm-flag { transform-box: fill-box; transform-origin: 50% 50%; }
.dm-g { transform-origin: 0 50%; }
/* motion (main.js initSchemaMotion), once: armed before the table is seen, played at 35% in view (phones: per card,
   when 60% of it shows in the strip). The three Templar ticks draw left to right 80ms apart, then the charts draw
   in 900ms. Ease-out quart. The resting state is the final frame: without JS or with reduced motion nothing waits */
.schema.is-armed .sch-us b.yes::before { clip-path: inset(0 100% 0 0); opacity: 0; }
.schema.is-armed .dm-p { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; }
.schema.is-armed :is(.dm-g, .dm-x, .dm-flag) { opacity: 0; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .sch-us b.yes::before { animation: sch-tick .36s cubic-bezier(.25, 1, .5, 1) both; }
.schema.is-play .sch-row:nth-child(5) .sch-us b.yes::before { animation-delay: 80ms; }
.schema.is-play .sch-row:nth-child(6) .sch-us b.yes::before { animation-delay: 160ms; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-p { animation: fm-draw .9s cubic-bezier(.25, 1, .5, 1) .2s both; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-x { animation: dm-pop .24s cubic-bezier(.25, 1, .5, 1) .36s both; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-flag { animation: dm-flag .3s cubic-bezier(.25, 1, .5, 1) .8s both; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-g { animation: dm-fill .3s cubic-bezier(.25, 1, .5, 1) .2s both; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-g:nth-of-type(3) { animation-delay: .35s; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-g:nth-of-type(4) { animation-delay: .5s; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-g:nth-of-type(5) { animation-delay: .65s; }
:is(.schema.is-play .sch-row, .sch-card.is-play) .dm-flag.is-ok { animation-delay: .9s; }
@keyframes sch-tick { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes dm-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes dm-flag { from { opacity: 0; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
@keyframes dm-fill { from { opacity: 0; scale: .2 1; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .schema .sch-us b.yes::before, .schema .dm * { animation: none !important; } }
/* a row under the pointer lifts to surface-2, our cell keeps its tint (a little stronger) */
@media (hover: hover) {
  .sch-row > * { transition: background-color .2s cubic-bezier(.25, 1, .5, 1); }
  .sch-row:is(:hover, :focus-within) > .sch-k { background: var(--surface-2); }
  .sch-row:is(:hover, :focus-within) > .sch-c { --cell: var(--surface-2); }
  .sch-row:is(:hover, :focus-within) > .sch-c.sch-us { --cell: color-mix(in oklab, var(--primary) 11%, var(--surface-2)); }
}
@media (max-width: 860px) {
  .sch-heads { display: none; }
  .sch-row { grid-template-columns: 1fr; }
  .sch-k { padding: 12px var(--s2); font-size: 15px; }
  .sch-c { border-left: 0; padding: 12px var(--s2) 14px; }
  .sch-c + .sch-c { border-top: 1px solid var(--line); }
  .sch-c::before { display: block; font-size: 12px; }
  .sch-c.sch-us::before { color: var(--primary); }
  /* the picker (main.js, .seg-vs + data-vs on the table): one rival at a time, beside us. It stays
     under the bar while the table scrolls by. The three rival cells share one grid cell, the two
     not chosen invisible but still counted, so every row is as tall as its tallest choice and a
     switch never moves the page */
  .seg-vs { position: sticky; top: calc(var(--nav-h) + var(--s1)); z-index: 5; display: flex; width: 100%; height: 46px; margin-bottom: var(--s2); background: var(--bg); }   /* 44px buttons inside the hairline */
  .seg-vs > button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 6px; font-size: 12px; line-height: 1.2; text-align: center; }   /* a two-word category may take two lines */
  .schema[data-vs] .sch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schema[data-vs] .sch-k { grid-column: 1 / -1; }
  .schema[data-vs] .sch-c { grid-row: 2; grid-column: 2; visibility: hidden; border-top: 0; border-left: 1px solid var(--line); padding: 12px 12px 14px; }
  .schema[data-vs] .sch-c.sch-us { grid-column: 1; visibility: visible; border-left: 0; }
  .schema[data-vs="oracle"] .sch-c:nth-child(3), .schema[data-vs="chain"] .sch-c:nth-child(4), .schema[data-vs="bank"] .sch-c:nth-child(5) { visibility: visible; }
  .schema[data-vs] .dm { margin-left: 0; }   /* a half-width column has no room for the indent under the mark */
}
@media (min-width: 861px) { .seg-vs { display: none; } }   /* four columns: nothing to pick */

/* ---------- + expanders (native <details>) ---------- */
/* the + itself: two bars in currentColor (the context rules below place them inside their box) */
.plus-i { position: relative; display: block; flex: 0 0 auto; width: 10px; height: 10px; }
.plus-i::before, .plus-i::after { content: ""; position: absolute; background: currentColor; }
.plus-i::before { left: 0; right: 0; top: 4px; height: 2px; }
.plus-i::after { top: 0; bottom: 0; left: 4px; width: 2px; }
.more summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .15s; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--ink-strong); }
.more summary .plus-i { box-sizing: content-box; width: 10px; height: 10px; padding: 6px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink-strong); background-clip: content-box; }
.more summary .plus-i::before { left: 6px; right: 6px; top: 10px; }
.more summary .plus-i::after { top: 6px; bottom: 6px; left: 10px; }
/* open: the box stays square, only the cross turns into an × */
.more summary .plus-i { rotate: none; }
.more summary .plus-i::before, .more summary .plus-i::after { transition: rotate .25s cubic-bezier(.2, .7, .2, 1); }
.more[open] summary .plus-i { background: var(--primary); border-color: var(--primary); color: var(--on-primary); background-clip: border-box; }
.more[open] summary .plus-i::before, .more[open] summary .plus-i::after { rotate: 45deg; }
.more > p, .more > div { margin-top: var(--s2); font-size: 15px; color: var(--ink); }
.more-wide { margin-top: var(--s4); }
.more-wide > summary { display: flex; padding: 14px var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.more-wide > summary:hover { border-color: var(--primary); }
.more-wide .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); padding: var(--s3); }
.more-wide ul { display: grid; gap: 6px; margin-top: var(--s1); }
.more-wide li { padding-left: 14px; position: relative; font-size: 15px; }
.more-wide li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--primary); }
@media (max-width: 720px) { .more-wide .split { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- 005 · who controls it, who takes the risk: a spec sheet on one three-column grid, hairlines only.
   Row 1: the three risks (a 28px icon, the key, one sentence). Row 2 on the same columns: the keys' heading, what
   the wallet shares, what it never shares. No boxes, no coloured edges; the colour sits on the icons ---------- */
.risk { border-block: 1px solid var(--line); }
.risk-row, .keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.keys { border-top: 1px solid var(--line); }
.risk-c, .keys > * { min-width: 0; padding: 24px 32px 28px; border-left: 1px solid var(--line); }
.risk-c:first-child, .keys > :first-child { padding-left: 0; border-left: 0; }
.risk-c:last-child, .keys > :last-child { padding-right: 0; }
.risk-ic { display: block; width: 28px; height: 28px; margin-bottom: 16px; color: var(--ink-strong); }
.risk-ic.is-btc { color: var(--orange); }
.risk-ic.is-usd { color: var(--proof); }
.risk-k { margin: 0 0 8px; font: 600 20px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink-strong); }
.risk-v { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.keys-t { margin: 0; text-wrap: balance; }
.keys-k { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 14px/1.3 var(--mono); color: var(--ink-strong); }
.keys-k svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-strong); }
.keys-c.is-ok .keys-k svg { color: var(--proof); }
.keys-c ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.keys-c li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.keys-c li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--muted); }
.risk-foot { display: grid; justify-items: start; gap: 6px; margin-top: 20px; }
.risk-foot .doc-line, .fees-foot .doc-line { margin-top: 0; }

/* ---------- 002 · where the bitcoin can go: the covenant drawn as a vault whose only exits are rails, the four exits
   as rows beside it, Templar's line under them, then the assets. The labels are HTML over the SVG, placed in the
   drawing's own units (--x of 640, --y of 420), so they stay 13px (12px on phones) at every width. Rails in the 001
   style: 1.5px, round caps; emerald for the borrower's two exits, amber for the lender's, dashed steel to the shut
   gate (never crimson). The loop (main.js initExits, desktop only) sets data-beat on .ex: the active rail at full
   ink and the others at 30%, the active row ink-strong. Phones: the picture stays still, a tap runs one rail.
   Below 1024px the picture sits above the rows ---------- */
.ex { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s6); align-items: center; }
.ex-fig { position: relative; width: 100%; max-width: 600px; aspect-ratio: 640 / 420; }
.ex-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ex-svg * { vector-effect: non-scaling-stroke; }
.ex-rail { fill: none; stroke-width: 1.5; stroke-linecap: round; transition: opacity .3s cubic-bezier(.25, 1, .5, 1); }
.ex-rail.is-ok { stroke: var(--proof); }
.ex-rail.is-late { stroke: var(--warn); }
.ex-rail.is-no { stroke: var(--muted); stroke-dasharray: 3 6; }
.ex-vault { fill: none; stroke: var(--ink-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ex-ghost { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ex-debt rect { fill: var(--ink); }
.ex-debt .ex-d4 { fill: transparent; stroke: var(--line-strong); stroke-width: 1; transition: fill .2s; }
.ex.is-full .ex-debt .ex-d4 { fill: var(--ink); }   /* beat 1: the debt is whole until the installment lands */
.ex-gate { transform-box: fill-box; transform-origin: 50% 50%; }
.ex-gate circle { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }
.ex-gate path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.ex.is-hit .ex-gate { animation: ex-hit .4s cubic-bezier(.25, 1, .5, 1); }
@keyframes ex-hit { 45% { scale: 1.15; } }
.ex-who { color: var(--ink); }
.ex-coin circle { fill: var(--orange); }
.ex-coin use { color: var(--onyx); }
.ex-l, .ex-chip { position: absolute; left: calc(var(--x) * 100% / 640); top: calc(var(--y) * 100% / 420); translate: -50% -50%; white-space: nowrap; pointer-events: none; }
/* --ty: which edge of the label sits on --y (default its middle; 0% its top, -100% its bottom). A label beside a rail
   hangs from (or stands on) a line in the drawing's units, so at any width it stays clear of the coin's path */
.ex-l { translate: -50% var(--ty, -50%); font: 500 13px/1.2 var(--mono); color: var(--muted); }
.ex-l.is-start { translate: 0 var(--ty, -50%); }
.ex-l.is-k { font-weight: 600; color: var(--ink-strong); }
/* the chip rides above the lender's rail: --y is its bottom edge, in the drawing's units, 3 over the coin's top
   (rail 197 - coin radius 15 - 3), so the coin never slides under it at any width */
.ex-chip { translate: -50% -100%; padding: 3px 7px; border: 1px solid var(--warn); border-radius: var(--r); background: var(--bg); font: 600 12px/1.2 var(--mono); color: var(--warn); text-align: center; transition: opacity .3s cubic-bezier(.25, 1, .5, 1); }
.ex[data-beat] :is(.ex-rail, .ex-chip) { opacity: .3; }
.ex[data-beat="0"] .ex-rail[data-ex="0"], .ex[data-beat="1"] .ex-rail[data-ex="1"],
.ex[data-beat="2"] :is(.ex-rail, .ex-chip)[data-ex="2"], .ex[data-beat="3"] .ex-rail[data-ex="3"] { opacity: 1; }
/* the rows: a stub of the rail's colour, the key, the value under it; each row a toggle for its rail */
.ex-side { display: grid; gap: var(--s3); align-content: center; }
.ex-list { border-top: 1px solid var(--line); }
.ex-list li { border-bottom: 1px solid var(--line); }
.ex-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "s k" ". v"; column-gap: 16px; row-gap: 2px; align-items: center; width: 100%; min-height: 48px; padding: 11px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ex-stub { grid-area: s; height: 0; border-top: 1.5px solid var(--proof); transform-origin: 0 50%; transition: opacity .3s cubic-bezier(.25, 1, .5, 1), scale .3s cubic-bezier(.25, 1, .5, 1); }
.ex-stub.is-late { border-top-color: var(--warn); }
.ex-stub.is-no { border-top: 1.5px dashed var(--muted); }
.ex-k { grid-area: k; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink-strong); transition: color .3s cubic-bezier(.25, 1, .5, 1); }
.ex-v { grid-area: v; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ex-v::first-letter { text-transform: uppercase; }
.ex[data-beat] .ex-k { color: var(--muted); }
.ex[data-beat] .ex-stub { opacity: .3; }
.ex .ex-row[aria-pressed="true"] .ex-k, .ex .ex-row:hover .ex-k { color: var(--ink-strong); }
.ex .ex-row[aria-pressed="true"] .ex-stub { opacity: 1; scale: 1.33 1; }
.ex .ex-row:hover .ex-stub { opacity: 1; }
/* Templar's line (plan C8): a hairline on top, the cross, two sentences */
.ex-tpl { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: var(--s3); border-top: 1px solid var(--line-strong); }
.ex-tpl img { width: 28px; height: 28px; }
.ex-tpl p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* the assets: one sentence and the amber line on the left, the four kinds in a row on the right */
.ex-assets { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "al kinds" "now kinds"; gap: 8px var(--s6); align-items: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.ex-al { grid-area: al; max-width: 34ch; margin: 0; font: 600 18px/1.4 var(--display); color: var(--ink-strong); text-wrap: pretty; }
.ex-kinds { grid-area: kinds; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--s2) var(--s3); }
.ex-kinds li { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--display); color: var(--ink-strong); }
.ex-kinds svg { flex: 0 0 auto; width: 28px; height: 28px; color: var(--ink-strong); }
.ex-kinds .is-btc { color: var(--orange); }
.ex-kinds .is-usd { color: var(--proof); }
.ex-now { grid-area: now; display: flex; align-items: center; gap: 8px; margin: 0; font: 500 13px/1.4 var(--mono); color: var(--warn); }
.ex-now .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ex-assets + .doc-line { margin-top: var(--s3); }
@media (prefers-reduced-motion: reduce) { .ex-rail, .ex-chip, .ex-stub, .ex-k { transition: none; } .ex.is-hit .ex-gate { animation: none; } }
@media (max-width: 1100px) {
  .ex-assets { grid-template-columns: minmax(0, 1fr); grid-template-areas: "al" "kinds" "now"; gap: var(--s2); }
  .ex-kinds { justify-content: start; gap: var(--s2) var(--s4); }
}
@media (max-width: 1023px) {
  .ex { grid-template-columns: minmax(0, 1fr); }
  .ex-fig { justify-self: center; }
}
@media (max-width: 767px) {
  .ex { gap: var(--s3); }
  .ex-l { font-size: 12px; }
  .ex-chip { max-width: calc(9ch + 12px); padding: 2px 5px; white-space: normal; }
  .ex-row { padding: 10px 0; }
  .ex-k { font-size: 17px; }
  .ex-v { font-size: 14px; }
  .ex-tpl { gap: 12px; padding-top: var(--s2); }
  .ex-tpl img { width: 24px; height: 24px; }
  .ex-tpl p { font-size: 15px; }
  .ex-assets { margin-top: var(--s4); padding-top: var(--s2); }
  .ex-al { font-size: 16px; }
  .ex-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--s2); }
  .ex-kinds li { font-size: 14px; }
  .ex-kinds svg { width: 24px; height: 24px; }
  .ex-now { font-size: 12px; }
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.card { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); padding: var(--s3); display: grid; gap: var(--s2); align-content: start; transition: border-color .15s; }
.card:hover { border-color: var(--primary); }
.card .h3 { margin-top: var(--s1); }
.card .more { margin-top: var(--s1); }
.card p { color: var(--ink); font-size: 15px; line-height: 1.5; }
.card ul { display: grid; gap: 6px; }
.card li { padding-left: 14px; position: relative; font-size: 15px; }
.card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--primary); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
/* closed cards still line up: two lines reserved for the title */
.cards-3 .h3 { min-height: 2.5em; }
@media (max-width: 960px) { .cards-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

/* ---------- 006 · the two ways to sign: two columns, no boxes. A title with its mark (the cross, the wallet),
   then three short lines on hairlines ---------- */
.sign2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.sign-c { min-width: 0; }
.sign-t { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s2); font: 600 22px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink-strong); }
.sign-t img, .sign-t svg { flex: 0 0 auto; width: 28px; height: 28px; color: var(--ink-strong); }
.sign-l { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sign-l li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
@media (max-width: 767px) {
  .sign2 { grid-template-columns: minmax(0, 1fr); }
  .sign-t { font-size: 20px; }
  .sign-l li { padding: 11px 0; font-size: 15px; }
}
}

/* ---------- 006 · the connector strip: the site, the templar:// ring with the cross, the wallet, joined by two
   dashed wires (out: the request to sign; back: the signature), one line under each. The wires and the ring's
   pulse run only while the strip is 40% in view at ≥768px (main.js initStrip: .is-live); phones get a vertical
   list with a still dashed line ---------- */
@keyframes ln-out { to { background-position: 16px 0; } }
@keyframes ln-back { to { background-position: -16px 0; } }
@keyframes ring-out { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.cstrip { list-style: none; margin: var(--s6) 0 var(--s8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
/* --h: half the mark's width, where the wire leaves it; the wire ends the same 12px short of the next mark */
.cs-step { --h: 36px; position: relative; display: grid; grid-template-rows: 88px auto auto; justify-items: center; align-content: start; row-gap: 12px; text-align: center; }
.cs-step:nth-child(2) { --h: 44px; }
.cs-ic { display: grid; place-items: center; align-self: center; width: 72px; height: 72px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink-strong); }
.cs-ic svg { width: 32px; height: 32px; }
.cs-ring { position: relative; width: 88px; height: 88px; border-color: var(--primary); border-radius: 50%; }
.cs-ring img { width: 40px; height: 40px; }
.cs-ring::before, .cs-ring::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--primary); border-radius: 50%; opacity: 0; animation: ring-out 2.4s cubic-bezier(.2, .6, .2, 1) infinite paused; }
.cs-ring::after { animation-delay: 1.2s; border-color: var(--proof); }
.cs-k { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-k b { margin-right: 4px; font-weight: 700; color: var(--ink-strong); }
.cs-k.is-scheme { font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ink-strong); }
.cs-cap { margin: 0; max-width: 24ch; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.cs-cap .mono { font-size: .88em; }   /* the mono face runs large beside the sans */
.cs-wire { position: absolute; top: 44px; left: calc(50% + var(--h) + 12px); width: calc(100% + var(--s4) - 80px - 24px); translate: 0 -50%; display: grid; gap: 22px; }
.cs-wire .ln { display: block; height: 3px; border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 16px); background-size: 16px 3px; animation: ln-out 1.2s linear infinite paused; }
.cs-wire .ln.back { background-image: repeating-linear-gradient(90deg, var(--proof) 0 8px, transparent 8px 16px); animation-name: ln-back; }
.cs-wire .lab { position: absolute; left: 50%; translate: -50% 0; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cs-wire .lab:first-of-type { bottom: calc(100% + 8px); }
.cs-wire .lab.is-proof { top: calc(100% + 8px); color: var(--proof); }
.cstrip.is-live .ln, .cstrip.is-live .cs-ring::before, .cstrip.is-live .cs-ring::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .cs-wire .ln, .cs-ring::before, .cs-ring::after { animation: none; } }
@media (max-width: 767px) {
  .cstrip { grid-template-columns: minmax(0, 1fr); margin: var(--s3) 0 var(--s4); }
  .cs-step, .cs-step:nth-child(2) { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s2); row-gap: 4px; justify-items: start; text-align: left; padding-bottom: var(--s3); }
  .cs-step:last-child { padding-bottom: 0; }
  .cs-ic { grid-row: 1 / span 2; align-self: start; width: 56px; height: 56px; }
  .cs-ic svg { width: 26px; height: 26px; }
  .cs-ring img { width: 28px; height: 28px; }
  .cs-ring::before, .cs-ring::after { content: none; }
  .cs-k { padding-top: 6px; }
  .cs-cap { max-width: none; font-size: 15px; text-wrap: pretty; }
  .cs-wire { top: 62px; bottom: 6px; left: 27px; width: 2px; translate: none; display: block; background-image: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px); }
  .cs-wire > * { display: none; }
}

/* the three steps, one line each (the wallet page) */
.way { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s6); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.way li { display: grid; gap: 6px; justify-items: center; text-align: center; padding: var(--s4) var(--s3); border-left: 1px solid var(--line); }
.way li:first-child { border-left: 0; }
.way-ic { width: 30px; height: 30px; color: var(--primary); margin-bottom: 6px; }
.way .h3 { font-size: 19px; }
.way p { font-size: 15px; color: var(--muted); max-width: 26ch; }
@media (max-width: 720px) { .way { grid-template-columns: 1fr; } .way li { border-left: 0; padding: var(--s3); } .way li + li { border-top: 1px solid var(--line); } }

/* ---------- 006 · signing with your wallet ---------- */
.brand-mark { width: 26px; height: 26px; display: block; }
/* 006 · the scroll showcase (ContainerScroll, a React island from src/components/ui): the section's head centred
   above the device, the real dashboard inside it (dark or light, following the page). The negative margins take
   back the island's own slack above and below the device */
.tw-show { overflow-x: clip; margin-block: calc(-1 * var(--s8)) calc(-1 * var(--s12)); }
.tw-show-head { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: 0 var(--gutter) var(--s4); }
.tw-show-head .lede { margin-inline: auto; }
.tw-scr { display: block; width: 100%; height: 100%; }
.tw-scr img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px; }
/* phones: the card keeps the dashboard's own 16:10 (the island), so the whole screen shows, uncropped */
@media (max-width: 767px) { .tw-scr img { object-fit: contain; object-position: center; border-radius: 12px; } }
.tw-scr-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tw-scr-dark { display: none; }
  :root:not([data-theme="dark"]) .tw-scr-light { display: block; }
}
:root[data-theme="light"] .tw-scr-dark { display: none; }
:root[data-theme="light"] .tw-scr-light { display: block; }
.btn-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.btn-ghost:hover { border-color: var(--primary); color: var(--ink-strong); text-decoration: none; }
/* 006 · the way out: two quiet buttons (the crimson fill belongs to 007), the amber alpha line beside them, the
   licence and the Android line under them. Phones: full-width buttons */
.wl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--s3); margin-top: var(--s6); }
.wl-ctas .btn-ghost { gap: 10px; }
.wl-ctas .dl-alpha { grid-template-columns: auto auto; }
.wl-note { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 767px) {
  .wl-ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: var(--s4); }
  .wl-ctas .btn-ghost { justify-content: center; }
  .wl-ctas .dl-alpha { margin-top: 4px; }
}

/* ---------- 004 · costs: the three fees drawn, each with a key word and one line (who pays whom, when). The
   cards span the column under the page's left head; the network note and the docs line sit under them ---------- */
.fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
.fee { display: grid; justify-items: center; align-content: start; text-align: center; gap: var(--s2); padding: var(--s4) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.fee .h3 { font-size: 20px; }
/* three drawings, three different ideas: a line that stays flat while time passes, one small coin
   that hops to the lender, two signed sheets that join while a coin drops into the Templar cross */
.fx { width: 100%; max-width: 320px; height: auto; overflow: visible; --loop: 5s; }
.fx-ic { color: var(--ink-strong); }
.fx-t { font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.fx-rule { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 5; }
.fx-head { fill: var(--line-strong); }
.fx-tick { fill: none; stroke: var(--line); stroke-width: 1.5; }
.fx .is-usd circle { fill: var(--emerald); } .fx .is-btc circle { fill: var(--orange); }
.fx .is-usd use, .fx .is-btc use { color: var(--onyx); }
/* 1 · flat fee over passing blocks */
.fx-blocks rect { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.fx-blocks-on rect { fill: var(--primary); }
.fx-blocks-on .fx-span { fill: none; }   /* ten block pitches wide: each step of the clip uncovers exactly one block */
.fx-blocks-on { animation: fx-time var(--loop) linear infinite; }
.fx-line { fill: none; stroke: var(--emerald); stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 1 1; animation: fx-draw var(--loop) linear infinite; }
.fx-flat .fx-coin { transform-box: fill-box; transform-origin: 50% 50%; animation: fx-pay var(--loop) linear infinite; }
/* one block per step, all the way to the last; then everything clears at once */
@keyframes fx-time { 0%, 4% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(10, end); } 70%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes fx-draw { 0%, 4% { stroke-dashoffset: 1; opacity: 1; } 70%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fx-pay { 0%, 68% { scale: .82; opacity: .45; } 74% { scale: 1.12; opacity: 1; } 80%, 90% { scale: 1; opacity: 1; } 100% { scale: .82; opacity: .45; } }
/* 2 · the lock clicks, one small coin leaves */
.fx-shackle { fill: none; stroke: var(--ink-strong); stroke-width: 4; stroke-linecap: round; animation: fx-click var(--loop) cubic-bezier(.3, 0, .2, 1) infinite; }
.fx-body { fill: var(--surface-2); stroke: var(--ink-strong); stroke-width: 2.5; animation: fx-armed var(--loop) linear infinite; }
.fx-glyph { color: var(--orange); }
.fx-hop { animation: fx-hop var(--loop) cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes fx-click { 0%, 14% { translate: 0 -9px; } 22%, 88% { translate: 0 0; } 100% { translate: 0 -9px; } }
@keyframes fx-armed { 0%, 18% { stroke: var(--ink-strong); } 24%, 88% { stroke: var(--primary); } 100% { stroke: var(--ink-strong); } }
@keyframes fx-hop { 0%, 24% { translate: 98px 0; opacity: 0; scale: .4; } 32% { translate: 108px 0; opacity: 1; scale: 1; } 70% { translate: 186px 0; opacity: 1; scale: 1; } 80%, 100% { translate: 214px 0; opacity: 0; scale: .5; } }
.fx-hop { transform-box: fill-box; transform-origin: 50% 50%; }
/* 3 · Templar's fee: the two signed sheets (a green check each) slide together and become one transaction;
   in that moment a neutral coin (the price tag: the proposal decides who pays it) runs into the cross */
.fx-sheet, .fx-tx, .fx-drop, .fx-cross { transform-box: fill-box; transform-origin: 50% 50%; }
.fx-sig { fill: var(--proof); }
.fx-ok { color: var(--bg); }
.fx-drop circle { fill: var(--ink-strong); }
.fx-drop use { color: var(--bg); }
.fx-tx { opacity: 0; }
.fx-s1 { animation: fx-s1 var(--loop) cubic-bezier(.5, 0, .3, 1) infinite; }
.fx-s2 { animation: fx-s2 var(--loop) cubic-bezier(.5, 0, .3, 1) infinite; }
.fx-tx { animation: fx-tx var(--loop) linear infinite; }
.fx-drop { animation: fx-drop var(--loop) cubic-bezier(.5, 0, .3, 1) infinite; }
.fx-cross { animation: fx-take var(--loop) linear infinite; }
@keyframes fx-s1 { 0%, 10% { translate: 0 0; opacity: 1; } 34% { translate: 77px 22px; opacity: 1; } 38%, 90% { translate: 77px 22px; opacity: 0; } 91% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes fx-s2 { 0%, 10% { translate: 0 0; opacity: 1; } 34% { translate: 77px -22px; opacity: 1; } 38%, 90% { translate: 77px -22px; opacity: 0; } 91% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes fx-tx { 0%, 32% { opacity: 0; scale: .7; } 38% { opacity: 1; scale: 1.08; } 42%, 86% { opacity: 1; scale: 1; } 92%, 100% { opacity: 0; scale: 1; } }
@keyframes fx-drop { 0%, 42% { translate: 0 0; opacity: 0; scale: .5; } 48% { translate: 0 0; opacity: 1; scale: 1; } 70% { translate: 62px 0; opacity: 1; scale: .9; } 76%, 100% { translate: 72px 0; opacity: 0; scale: .3; } }
@keyframes fx-take { 0%, 70% { scale: 1; } 76% { scale: 1.12; } 84%, 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fx * { animation: none !important; }
  .fx-blocks-on { clip-path: none; }
  .fx-line { stroke-dasharray: none; }
  .fx-hop { translate: 150px 0; }
  .fx-drop { translate: 36px 0; }
}
/* the amount, big, right above the line that says when and in what: the number in the display
   face, its unit half as big. Orange only where bitcoin is named */
.fee-v { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-strong); }
.fee-v .fee-u { font-size: .5em; font-stretch: 100%; font-weight: 700; letter-spacing: 0; }
.fee-v.is-btc { color: var(--orange); }
.fee-v.is-word { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; }
.fee-v + .fee-when { margin-top: -8px; }
.fee-when { margin: 0; max-width: 44ch; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.fee-when > span { white-space: nowrap; }   /* the line breaks only between its phrases, after a « · » */
.fees-foot { display: grid; justify-items: start; gap: 6px; margin-top: 20px; }
.fees-note { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 767px) { .fees { grid-template-columns: 1fr; max-width: 420px; } .fees-foot { max-width: 420px; } }   /* 768–840: the three cards stay in a row (stacked they took 1,440px) */
@media (min-width: 768px) and (max-width: 900px) { .fee { padding-inline: var(--s2); } }

/* ---------- 007 · closing CTA: the two crusaders hand over the sword (src/components/TemplarCrusaders.astro), and
   right under them the title, one sentence and the button. Sized so that the title and the buttons are on the first
   screen of the section at 1440×900 and at 390×844 ---------- */
.sec-cta { padding-block: var(--s8); background: radial-gradient(60% 70% at 50% 45%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%); }
.cta-final { display: grid; justify-items: center; text-align: center; }
/* the drawing's viewBox keeps air above the cross and under the ground line; the negative margins trim it in the
   wrapper's own width (cqw: the component's wrapper is a size container), so the ground sits on the title */
.cta-final .cta-knights { max-width: 580px; }
.cta-final .cta-knights .tc { margin-block: -4.4cqw -2cqw; }
.cta-body { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s3); }
.cta-final .cta-h { max-width: 20ch; font-size: clamp(38px, 5.4vw, 76px); }
.cta-final .lede { max-width: 32em; }
.cta-acts { display: grid; justify-items: center; gap: 12px; margin-top: var(--s1); }
.cta-final .cta-xl { height: 80px; padding: 0 var(--s8); font-size: 17px; gap: 16px; }
.cta-alpha { grid-template-columns: auto auto; justify-content: center; text-align: left; }
/* under the buttons: the protocol docs as a quiet alternative (the docs line, centred here), then the address
   for investors and partners, 12px and muted */
.cta-docs { margin: -8px 0 0; }
.cta-docs + .cta-alpha { margin-top: -8px; }
.cta-inv { margin: -12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cta-inv a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s cubic-bezier(.25, 1, .5, 1); }
.cta-inv a:hover, .cta-inv a:focus-visible { color: var(--ink-strong); }
@media (max-width: 767px) { .cta-inv a { display: inline-block; padding-block: 13px; margin-block: -13px; } }
@media (max-width: 720px) { .cta-final .cta-xl { height: 64px; padding: 0 var(--s4); font-size: 15px; } }

/* ---------- footer: a hairline slab, columns blur in once ---------- */
.foot {
  position: relative; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: var(--s4) auto 0; padding: var(--s8) var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
  background: var(--surface);
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.foot-brand { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.foot-brand .brand svg { width: 32px; height: 32px; }
.foot .disclaimer { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.foot-copy { font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.foot-col h3 { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); }
.foot-col ul { display: grid; gap: 8px; margin-top: var(--s2); }
.foot-col a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); transition: color .3s; }
.foot-col a:hover { color: var(--ink-strong); text-decoration: none; }
.foot-col a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); }
.foot-small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-small { font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: repeat(4, minmax(max-content, 1fr)); } }
/* the landing's footer has three columns (protocol, docs, contact); its small print is a sentence, not a label */
@media (min-width: 720px) { .foot-land .foot-cols { grid-template-columns: repeat(3, minmax(max-content, 1fr)); } }
.foot-land .foot-small { font-size: 12px; letter-spacing: .02em; text-transform: none; line-height: 1.5; }
/* phones: two columns can not hold the e-mail address, so the four lists stack */
@media (max-width: 520px) { .foot-cols { grid-template-columns: 1fr; gap: var(--s4); } .foot-col a { min-width: 0; overflow-wrap: anywhere; } }
@media (min-width: 1100px) { .foot { padding-inline: var(--s6); } .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (max-width: 720px) { .foot { width: 100%; max-width: none; padding-inline: var(--gutter); border-inline: 0; border-radius: 0; } }

/* ---------- phones: the two floors, 12px for any text on screen and 44px for anything you tap ----------
   The desktop keeps its 10-11px mono micro-labels; here they all step up to 12px. Small links and
   handles grow their touch area with padding that a negative margin gives back, so nothing moves;
   list rows that would overlap instead take the full 44px pitch */
@media (max-width: 640px) {
  .tag, .seg > *, .more summary, .foot-col h3, .foot-small,
  .cta.is-soon em, .foot-soon em { font-size: 12px; }
  .more summary { padding-block: 10px; margin-block: -10px; }
  .foot-brand .brand { padding-block: 9px; margin-block: -9px; }
  .foot-col ul { gap: 0; }
  .foot-col a { padding-block: 11px; }
  .foot-col .foot-soon { padding-block: 11px; }
  .foot-bottom .seg { height: 46px; } .foot-bottom .seg > * { padding: 0 14px; }
}

/* ---------- misc ---------- */
.reveal { will-change: transform, opacity; }
.js .reveal.is-in { will-change: auto; }   /* release the layer once revealed: a layer on a fractional position covers hairlines */

/* ---------- phones: the two versions of a block. ≤767px the phone version shows, the desktop piece steps aside ---------- */
@media (max-width: 767px) { .only-desktop { display: none !important; } }
@media (min-width: 768px) { .only-phone { display: none !important; } }

/* the swipe strip (phones only: on the landing the same elements are grids from 768px up): one card per
   screen, snapping, the next one peeking; the dots come from initSnaps() */
@media (max-width: 767px) {
  .snap { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { flex: 0 0 calc(100% - 28px); min-width: 0; scroll-snap-align: start; }
}
@media (min-width: 768px) { .snap-dots { display: none !important; } }
.snap-dots { display: flex; justify-content: center; gap: 0; margin-top: var(--s1); }
.snap-dots button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }   /* a 44px touch around an 8px dot */
.snap-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color .2s, transform .2s; }
.snap-dots button[aria-current]::before { background: var(--primary); transform: scale(1.25); }

/* the bar on phones says where you are (initNavHere: the section under the upper part of the screen), and the
   open menu is the page's index: numbered rows, then the other product and the tools */
.nav-here { display: none; }
@media (max-width: 640px) {
  .nav-here { display: block; flex: 1 1 auto; min-width: 0; font: 600 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; }
  .nav-here.is-on { opacity: 1; min-width: 12ch; }   /* the section's name wins over the brand's word, which clips away */
  .nav-ctl > .cta-sm.is-soon { display: none; }   /* the switched-off app button leaves the bar; it stays in the closing section */
}
.nav[data-open="true"] .nav-links > a[data-n]::before { content: attr(data-n); display: inline-block; min-width: 3.4em; color: var(--muted); font-weight: 500; }

/* ---------- the landing's bar (.nav-land, plan §2): one name per destination, in the bar, the menu and data-nav.
   ≥1400: the five sections a first read needs, then Docs; IT/EN, theme, Templar Wallet, the app. The bar's
   row is wider than the page's column (1400 against 1280).
   1100–1399: Come funziona · Confronto · Costi · Docs, the controls, Menu.
   768–1099: Menu only. ≤767: the brand, the section you are in, Menu; IT/EN and theme move into the menu.
   Open, the menu is the page's index at every width: 001–007, then the protocol docs and the wallet ---------- */
.nav-land .wrap { max-width: 1400px; gap: 24px; }
.nav-land .nav-links { gap: 20px; }
.nav-land .nav-ctl { gap: 12px; }
.nav-land .nav-links > a { white-space: nowrap; }
.nav-land .nav-links > .nav-docs { position: relative; margin-left: 4px; }   /* a page, not a section: a hairline sets it apart */
.nav-land .nav-links > .nav-docs::before { content: ""; position: absolute; left: -13px; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--line-strong); }
@media (max-width: 1399px) {
  .nav-land .nav-x { display: none; }
  .nav-land .menu-btn { display: inline-flex; align-items: center; }
  .nav-land .menu-btn[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface); color: var(--ink-strong); }
  .nav-land[data-open="true"] .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: var(--nav-h); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-bottom: 1px solid var(--line-strong); margin: 0; padding: var(--s1) var(--gutter) var(--s2); }
  .nav-land[data-open="true"] .nav-links > a { display: block; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 13px; }
  .nav-land[data-open="true"] .nav-links > a:first-child { border-top: 0; }
  .nav-land[data-open="true"] .nav-links > a.only-menu { display: block !important; color: var(--muted); }
  .nav-land[data-open="true"] .nav-links > a.nav-out { padding-left: 3.4em; color: var(--ink); }   /* under the names, past the numbers */
  .nav-land[data-open="true"] .nav-links > a:hover { color: var(--ink-strong); }
  .nav-land[data-open="true"] .nav-links > .nav-docs { display: none; }   /* the menu has its own «Docs del protocollo →» */
  .nav-land[data-open="true"] .nav-links + .nav-ctl { margin-left: auto; }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .nav-land .nav-links { display: flex; }   /* the shared rule hides the links from 1180px down */
  .nav-land .nav-links + .nav-ctl { margin-left: 0; }
  .nav-land .nav-lo { display: none; }
}
/* phones: the bar says where you are, the brand's word gives way to it (the cross stays), IT/EN and the theme
   sit at the foot of the menu, lined up with the names. «Apri l'app» keeps its place down to 641px; below, there
   is no room for it beside the section's name and it waits in the closing section (as since 2026-09-26) */
@media (max-width: 767px) {
  .nav-land .wrap { gap: var(--s2); }
  .nav-land .nav-ctl { gap: var(--s1); }
  .nav-land .nav-ctl > .seg-nav, .nav-land .nav-ctl > .nav-theme { display: none; }
  .nav-land .brand { display: flex; flex-wrap: wrap; row-gap: 18px; flex-shrink: 1; min-width: 26px; height: 44px; padding-block: 9px; overflow: hidden; }
  .nav-land .menu-btn { position: relative; }
  .nav-land .menu-btn::before { content: ""; position: absolute; inset: -4px 0; }   /* a 44px touch on the 36px button */
  .nav-land .nav-here { display: block; flex: 1 1 auto; min-width: 0; font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; }
  .nav-land .nav-here.is-on { opacity: 1; min-width: max-content; }
  .nav-land[data-open="true"] .nav-links .menu-tools { display: flex !important; align-items: center; gap: var(--s2); padding: 14px 0 14px 44px; border-top: 1px solid var(--line); }
  .nav-land[data-open="true"] .nav-links .menu-tools .nav-theme { display: grid; width: 44px; height: 44px; }
  .nav-land[data-open="true"] .nav-links .menu-tools .seg-nav { height: 46px; }   /* 44px buttons inside the hairline */
  .nav-land[data-open="true"] .nav-links .menu-tools .seg-nav > * { padding: 0 14px; font-size: 12px; }
}

/* ---------- phones (≤767px): the reduced version. No scroll-driven blocks — the hero's words on a clock, the
   worked example on five tap stops, the long rows as swipe strips — and the desktop-only pieces step aside.
   Nothing in here reaches 768px ---------- */
@keyframes mark-cut { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (max-width: 767px) {
  /* the hero: one screen (no pin, so no .has-pin height), the block stacked in one cell like the pinned one;
     initHeroCycle adds .is-in to the next word (the wipe), then .is-on. The brand sits where the bar will land */
  .has-cycle .hero-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; }
  .has-cycle .hero .mark { display: grid; gap: 0; width: max-content; max-width: 100%; margin: .2em auto 0; font-size: min(1em, 8.4vw); letter-spacing: inherit; line-height: inherit; }
  .has-cycle .hero .mark-txt { grid-area: 1 / 1; padding: .03em .26em .07em; visibility: hidden; }
  .has-cycle .hero .mark-txt.is-on, .has-cycle .hero .mark-txt.is-in { visibility: visible; }
  .has-cycle .hero .mark-txt.is-in { z-index: 1; animation: mark-cut .32s cubic-bezier(.2, .7, .2, 1) both; }
  /* the fans stay, with half of their moving lines (the .flow uses sit after the 24 .base uses in each layer) */
  .paths-layer .flow:nth-of-type(even) { display: none; }

  /* 001: not pinned, it flows like any other section. The bar, the side arrows and the chips are .only-desktop;
     the .mob-step control under the picture drives the same engine (main.js initMobDiagram) */
  .has-play .sec-moves { padding-block: var(--s6) var(--s8); }
  .has-play .sec-moves[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }
  .has-play .moves-pin { height: auto; min-height: 0; overflow: visible; grid-template-rows: auto auto auto; gap: var(--s3); padding-block: 0; }
  .has-play .st-k, .has-play .st-intro .st-k { font-size: 30px; }
  .has-play .st-k em { font-size: 12px; }
  .has-play .st-p { font-size: 15px; line-height: 1.35; margin-top: 8px; }
  .has-play .player { flex-direction: column; align-items: stretch; gap: 0; }
  .mob-step { display: grid; gap: 10px; }
  .mob-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--s2); }
  .mob-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--ink-strong); }
  .mob-btn svg { width: 15px; height: 15px; }
  .mob-btn:active, .mob-next:active { translate: 0 1px; }
  .mob-lbl { text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .mob-next { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; border-radius: var(--r); background: var(--primary); color: var(--on-primary); font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .mob-next.is-again .cta-arrow { display: none; }
  /* the block counter leaves the flag's row for a row of its own, right-aligned under the chain: the row gap
     holds the ticks */
  .chain { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: calc(var(--lbl) + 14px); padding-bottom: 0; }
  .blk-n { grid-column: 1 / -1; justify-self: end; min-width: 0; }
  .dg-docs { margin-top: -12px; }   /* the link's 44px box already carries the air above its line */

  /* 004: the fee cards are a swipe strip (.snap) */
  .fees, .fees-foot { max-width: none; }
  .fx-t { font-size: 12.5px; }   /* the drawing is scaled to the card: at 360 this still renders at 12px */
  /* 005: the three risks stacked, the icon beside its key; the keys' two lists stay side by side under their
     heading; hairlines between the rows */
  .risk-row, .keys { grid-template-columns: minmax(0, 1fr); }
  .risk-c { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; }
  .risk-c, .keys > * { padding: 14px 0 16px; border-left: 0; }
  .risk-c + .risk-c { border-top: 1px solid var(--line); }
  .risk-ic { width: 22px; height: 22px; margin: 0; }
  .risk-k { margin: 0; font-size: 18px; }
  .risk-v { grid-column: 1 / -1; max-width: none; font-size: 15px; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .keys-t { grid-column: 1 / -1; max-width: none; padding-bottom: 0; font-size: 18px; }
  .keys-c { padding-top: 12px; }
  .keys-k { margin-bottom: 8px; font-size: 13px; }
  .keys-c li { font-size: 14px; }

  /* 006: the island renders a still block below 768px (container-scroll-animation.tsx: .tw-static); the
     section's negative margins were the tall island's slack */
  .tw-show { margin-block: 0; }
  .tw-static { padding: 0 var(--gutter) var(--s4); }
  .tw-static .tw-show-head { padding-inline: 0; }
  /* the wallet page's three steps as a compact numbered list, icon left */
  .way { grid-template-columns: minmax(0, 1fr); margin-top: var(--s3); }
  .way li { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "ic h" "ic p"; column-gap: 14px; row-gap: 4px; justify-items: start; align-items: start; text-align: left; padding: 14px var(--s2); border-left: 0; }
  .way li + li { border-top: 1px solid var(--line); }
  .way .way-ic { grid-area: ic; margin: 0; }
  .way .h3 { grid-area: h; font-size: 17px; }
  .way p { grid-area: p; font-size: 14px; line-height: 1.45; max-width: none; }

  /* the landing's footer (.foot-land: the wallet pages keep their own, in wallet.css): two columns of links,
     the e-mail row across both, 40px rows */
  .foot-land { padding-top: var(--s6); }
  .foot-land .foot-grid { gap: var(--s4); }
  .foot-land .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) 12px; }
  .foot-land .foot-col:nth-child(3) { grid-column: 1 / -1; }
  .foot-land .foot-col ul { gap: 0; margin-top: var(--s1); }
  .foot-land .foot-col a, .foot-land .foot-col .foot-soon { min-height: 44px; padding-block: 11px; min-width: 0; overflow-wrap: anywhere; }   /* 44px rows */
  .foot-land .foot-bottom { margin-top: var(--s4); }
}

/* ---------- phones, second pass: a shorter page ---------- */
@media (max-width: 767px) {
  /* a horizontal overflow must never widen the page: Chrome for Android would shrink everything to fit it */
  html { overflow-x: clip; }
  /* the sections breathe less: 48px instead of 64 */
  .sec, .sec-moves { padding-block: var(--s6); }
  .sec-head { margin-bottom: var(--s4); }
  /* the closing title on one screen */
  .cta-final .cta-h { font-size: clamp(30px, 8.6vw, 38px); }
  /* 003 · the comparison as a strip: one card per question, the picked rival beside us (main.js rebuilds the
     rows as cards inside .schema so the picker's data-vs keeps working; the picker itself is no longer sticky) */
  .schema.has-strip .sch-heads, .schema.has-strip .sch-row { display: none; }
  .schema.has-strip { border: 0; background: none; overflow: visible; }
  .seg-vs { position: static; }
  .sch-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); overflow: hidden; }
  .sch-card .sch-k { grid-column: 1 / -1; padding: 14px var(--s2); font-size: 16px; }
  .sch-card .sch-c { display: none; border-left: 0; border-top: 1px solid var(--line); padding: 12px var(--s2) 14px; }
  .sch-card .sch-c::before { display: block; }
  .sch-card .sch-c.sch-us { display: block; }
  .sch-card .sch-c.sch-us::before { color: var(--primary); }
  .schema[data-vs="oracle"] .sch-card .sch-c:nth-child(3), .schema[data-vs="chain"] .sch-card .sch-c:nth-child(4), .schema[data-vs="bank"] .sch-card .sch-c:nth-child(5) { display: block; border-left: 1px solid var(--line); }
  .sch-card .dm { width: 100px; height: 24px; margin: 8px 0 0; }   /* phones: the micro-chart at 100×24 */
  .sch-card .sch-c b { font-size: 14px; }
}

/* ---------- phones, third pass (plan §14 L6): the page on a phone stays near 8,000px (fail line 8,100). Sections breathe 32px,
   the three risks and the two ways to sign become swipe strips like the fee cards, and the gaps inside 006 and
   the footer tighten. Nothing in here reaches 768px ---------- */
@media (max-width: 767px) {
  .sec, .sec-moves, .has-play .sec-moves { padding-block: var(--s4); }
  .has-play .moves-pin { gap: var(--s2); }
  .sec-head { margin-bottom: var(--s3); }
  /* 005 · one risk per card, the next one peeking; the keys follow under the dots */
  .risk { border-top: 0; }
  .risk-row.snap { display: flex; }
  .risk-row.snap > .risk-c { align-content: start; padding: var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
  .risk-row.snap + .snap-dots { margin-top: 4px; }
  /* 006 · the two ways to sign, one per card */
  .sign2.snap { display: flex; gap: 12px; }
  .sign2.snap > .sign-c { padding: var(--s2) var(--s2) 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
  .sign2.snap .sign-t { margin-bottom: 12px; }
  .sign2.snap .sign-l li:last-child { border-bottom: 0; }
  .sign2.snap + .snap-dots { margin-top: 4px; }
  .tw-static { padding-bottom: var(--s3); }
  .cstrip { margin: var(--s2) 0 var(--s3); }
  .wl-ctas { margin-top: var(--s3); }
  #wallet .wrap > .doc-line { margin-top: var(--s2); }
  /* the footer: the same rows, less air between them */
  .foot-land { padding-top: var(--s4); }
  .foot-land .foot-grid { gap: var(--s3); }
  .foot-land .foot-bottom { margin-top: var(--s3); padding-top: var(--s2); flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .foot-land .foot-small { flex: 1 1 auto; min-width: 0; margin: 0; }   /* the small print beside IT/EN, not above it */
  .foot-land .foot-bottom .seg { flex: 0 0 auto; }
  .foot-land .foot-cols { row-gap: var(--s2); }
  /* the dots' row takes 32px of the page; each dot keeps a 44px touch (::after reaches 6px above and below) */
  .snap-dots button { position: relative; height: 32px; }
  .snap-dots button::after { content: ""; position: absolute; inset: -6px 0; }
  /* the alpha band: the docs link closes the sentence's last line instead of taking a row of its own */
  .ab-t, .ab-in > .ab-doc { display: inline; }
  .ab-in > .ab-doc { margin-left: 6px; }
  .ab-in { padding-bottom: 8px; }
  /* the notes under the comparison, the fees and the risks sit closer to their block */
  .sch-foot, .fees-foot, .risk-foot { margin-top: 12px; }
  .wl-ctas .dl-alpha { justify-self: start; }   /* its dot beside its words, under the buttons' left edge */
  /* the lede a step closer to the body text: one line less in most sections */
  .lede { font-size: 17px; line-height: 1.45; }
  /* 002 · the picture, the four exits and the strips a little closer */
  .ex, .ex-side { gap: var(--s2); }
  .ex-row { padding: 8px 0; }
  .ex-assets { margin-top: var(--s3); }
  .ex-assets + .doc-line { margin-top: var(--s2); }
  /* 004 · the fee card's air */
  .fee { padding: var(--s3) var(--s2); }
  /* 006 · the strip's icons at 48px (the rows follow) */
  .cs-ic { width: 48px; height: 48px; }
  /* 007 · the closing column: 16px between its rows */
  .cta-body { gap: var(--s2); margin-top: var(--s2); }
  .cta-acts { margin-top: 0; }
}