/* Hermes Interactive UI+ website: "The Messenger".
   A printed dispatch on laid paper that comes alive with the app's own cards. No JavaScript, no external requests.
   Fonts (self-hosted, SIL OFL, licences in fonts/): Gloock (display), Atkinson Hyperlegible Next (text), JetBrains Mono. */

@font-face { font-family: "Gloock"; src: url("/fonts/gloock-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* paper and ink */
  --paper: #f1f0ec;
  --paper-2: #e4e1d9;
  --paper-hi: #fbfaf7;
  --ink: #15120e;
  --ink-2: #3d352b;
  --ink-3: #6a5e4e;
  --rule: rgba(21, 18, 14, 0.15);
  /* brass: decoration and large type; brass-ink is the text-safe tone */
  --brass: #b8862e;
  --brass-ink: #7a5714;
  --gilt: #e6c277;
  /* sealing wax: the seal and stamp sign only (the seal, the approval moment, the stamps); never a general accent */
  --wax: #a3201d;
  --wax-hi: #cf4632;
  --wax-lo: #5e0c0b;
  /* app UI (the app's Paper theme) */
  --app-bg: #f5f3ec;
  --app-card: #fefefc;
  --app-line: #e2dfd6;
  --ok: #3f7a3a;
  --focus: #15120e;

  --serif: "Gloock", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 4.2vw, 3.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .2 0 0 0 0 .17 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
html { overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  /* grain, laid-paper chain lines, and daylight from the top left */
  background-image:
    var(--grain),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(60, 52, 40, 0.03) 27px 28px),
    radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(90% 60% at 100% 40%, rgba(184, 134, 46, 0.05), transparent 70%);
  font: 400 1.125rem/1.6 var(--sans);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.frame { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
main:focus { outline: none; }
a { color: var(--brass-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { color: var(--ink); text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; z-index: 50; }
.skip:focus { left: 0.75rem; top: 0.75rem; }
code, pre { font-family: var(--mono); font-size: 0.86em; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
img, video, svg { display: block; }

/* the shared marks ------------------------------------------------------------------------------------------- */
.mk-w { fill: var(--mk-wing, var(--brass)); }
.mk-gap { fill: none; stroke: var(--mk-gap, var(--paper)); stroke-width: 60; stroke-linejoin: round; }
.mk-b { fill: var(--mk-bubble, var(--ink)); }
.mk-d { fill: var(--mk-dot, var(--paper)); }
.feather { position: absolute; pointer-events: none; fill: none; stroke: var(--brass); stroke-width: 1; stroke-linecap: round; overflow: visible; }
.feather use { vector-effect: non-scaling-stroke; }
.plus { font-family: var(--sans); font-weight: 700; font-size: 0.56em; margin-left: 0.05em; vertical-align: 0.42em; line-height: 0; }
.brand .plus { font-size: 1em; vertical-align: baseline; margin-left: 0; }
.tk { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* the wax seal: a puddle of red wax, a pressed disc with a raised rim, and the winged bubble debossed in the middle */
.seal { position: absolute; display: grid; place-items: center; width: 7.5rem; aspect-ratio: 1; }
.seal::before { /* the wax that squeezed out under the stamp */
  content: ""; position: absolute; inset: -4%;
  border-radius: 54% 46% 57% 43% / 47% 56% 44% 53%;
  background: radial-gradient(circle at 38% 30%, #c0372b, #96201b 55%, #6f1210);
  box-shadow: inset -3px -5px 8px rgba(50, 0, 0, 0.45), inset 3px 4px 6px rgba(255, 170, 150, 0.22), 0 9px 16px -8px rgba(70, 12, 6, 0.65), 0 1px 2px rgba(70, 12, 6, 0.4);
}
.seal::after { /* a second lobe where the wax ran */
  content: ""; position: absolute; width: 34%; height: 26%; right: -6%; bottom: 10%; border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 40% 30%, #b22c23, #7d1612); box-shadow: inset -2px -3px 5px rgba(50, 0, 0, 0.4), 0 4px 8px -4px rgba(70, 12, 6, 0.6); z-index: -1;
}
.seal-disc {
  --mk-wing: #741310; --mk-bubble: #741310; --mk-gap: transparent; --mk-dot: #a3271f;
  position: relative; display: grid; place-items: center; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #a3271f 0 62%, #c8493a 66%, #8d1c18 72%, #a3271f 78%);
  box-shadow: 0 0 0 2px rgba(80, 6, 6, 0.35), inset 0 3px 7px rgba(50, 0, 0, 0.45), inset 0 -2px 4px rgba(255, 170, 150, 0.25);
}
.seal-disc svg { width: 72%; height: auto; filter: drop-shadow(0.6px 1.2px 0 rgba(255, 178, 158, 0.55)) drop-shadow(-0.5px -0.8px 0 rgba(40, 0, 0, 0.5)); }

/* header ------------------------------------------------------------------------------------------------------ */
.top { position: relative; z-index: 5; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.35rem 1.1rem; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; font: 700 1.2rem/1 var(--sans); letter-spacing: -0.01em; }
.brand img { border-radius: 9px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px -4px rgba(21, 18, 14, 0.5); }
.brand:hover { color: var(--ink); }
.top ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.top nav a { position: relative; display: inline-block; padding: 0.4rem 0; color: var(--ink-2); text-decoration: none; font: 500 0.98rem/1.2 var(--sans); }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); }
.top nav a:hover { color: var(--ink); }
.top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.top nav .gh { padding-inline: 0.85rem; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
.top nav .gh::after { display: none; }
.top nav .gh:hover { background: var(--ink); color: var(--paper); }

/* buttons ----------------------------------------------------------------------------------------------------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.5rem; border-radius: 0.45rem; font: 700 1.04rem/1 var(--sans); text-decoration: none; isolation: isolate; overflow: hidden; transition: color 0.3s var(--ease), border-color 0.3s; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 22px -12px rgba(21, 18, 14, 0.7); }
.btn-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--brass) 0%, var(--gilt) 55%, var(--brass) 100%); transform: translateY(101%); transition: transform 0.45s var(--ease); }
.btn-ink:hover { color: var(--ink); }
.btn-ink:hover::after { transform: translateY(0); }
.btn-line { color: var(--ink); border: 1.5px solid var(--ink); background: transparent; }
.btn-line::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0.7rem; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.btn-line:hover { color: var(--ink); background: rgba(255, 252, 244, 0.6); }
.btn-line:hover::after { transform: scaleX(1); }

/* hero -------------------------------------------------------------------------------------------------------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 2rem; padding-block: clamp(2.5rem, 6vh, 5rem) clamp(4rem, 9vh, 7rem); min-height: min(calc(100svh - 5rem), 58rem); }
.hero h1 { font: 400 clamp(3.6rem, 8.6vw, 8.9rem)/0.88 var(--serif); letter-spacing: -0.035em; color: var(--ink); margin-left: -0.05em; }
.hero h1 span { display: block; }
.hero h1 .l2 { padding-left: 1.05em; }
.lead { max-width: 33rem; margin-top: 2rem; font-size: clamp(1.15rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); }
.cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.meta { display: flex; flex-wrap: wrap; margin: 2rem 0 0; padding: 0; list-style: none; font: 500 0.8rem/1 var(--mono); color: var(--ink-2); }
.meta li { padding: 0.55rem 0.8rem; border: 1px solid var(--rule); margin: 0 -1px -1px 0; background: rgba(251, 250, 247, 0.55); }
.meta li:first-child { background: var(--ink); color: var(--gilt); border-color: var(--ink); }
.meta .meta-p { color: var(--brass-ink); }
.req { max-width: 33rem; margin-top: 1.4rem; font-size: 0.95rem; color: var(--ink-3); }

.stage { position: relative; display: grid; place-items: center; min-height: 40rem; --pw: clamp(16.5rem, 21vw, 19.5rem); }
.wl-hero { width: 22rem; height: 66rem; left: 50%; top: 50%; transform: translate(-46%, -50%) rotate(38deg); opacity: 0.6; }
.phone {
  position: relative; z-index: 1; width: var(--pw); padding: calc(var(--pw) * 0.034);
  border-radius: calc(var(--pw) * 0.155);
  background: linear-gradient(150deg, #3a3127 0%, #15120e 38%, #0b0907 100%);
  box-shadow: inset 0 0 0 1.5px #5a4c3b, inset 0 0 0 4px #15120e, 0 50px 90px -40px rgba(60, 38, 8, 0.75), 0 18px 34px -18px rgba(21, 18, 14, 0.55);
  transform: rotate(2deg);
}
.phone::before, .phone::after { content: ""; position: absolute; right: -3px; width: 3px; border-radius: 0 2px 2px 0; background: #2a241c; }
.phone::before { top: 22%; height: 9%; }
.phone::after { top: 34%; height: 14%; }
.screen { position: relative; overflow: hidden; border-radius: 12% / 5.5%; background: var(--app-bg); isolation: isolate; }
/* media/hero-loop.mp4 is the app's screen only (website/make-hero.sh): the poster sets the height, the video covers it */
.screen img { width: 100%; height: auto; }
.screen video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: transparent; }

.slip { position: absolute; z-index: 2; font-family: var(--sans); color: var(--ink); background: var(--app-card); border: 1px solid var(--app-line); box-shadow: 0 1px 0 #fff inset, 0 22px 40px -22px rgba(60, 38, 8, 0.55), 0 4px 10px -4px rgba(21, 18, 14, 0.18); }
.slip-approve { left: -1rem; top: 9%; width: 16.5rem; padding: 1rem 1rem 0.95rem; border-radius: 1.1rem; transform: rotate(-4deg); }
.sa-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.live { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wax); box-shadow: 0 0 0 0 rgba(163, 32, 29, 0.45); flex: none; }
.slip-approve code { display: block; margin-top: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.55rem; background: #efede7; border: 1px solid var(--app-line); font-size: 0.86rem; color: var(--ink); }
.sa-meta { display: flex; justify-content: space-between; margin-top: 0.55rem; font-size: 0.78rem; color: #8a4b12; }
.sa-meta .m { font-family: var(--mono); color: var(--ink-3); }
.sa-btns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.45rem; margin-top: 0.75rem; font-weight: 700; font-size: 0.86rem; text-align: center; }
.sa-allow { position: relative; overflow: hidden; display: grid; padding: 0.6rem 0.4rem; border-radius: 0.6rem; color: #fff6ee; background: linear-gradient(180deg, #b52a24, var(--wax)); box-shadow: inset 0 1px 0 rgba(255, 200, 180, 0.35), 0 4px 10px -4px rgba(163, 32, 29, 0.8); }
.sa-allow > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
.sa-allow .lbl-b { opacity: 0; }
.tap { position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgba(255, 244, 236, 0.9); opacity: 0; pointer-events: none; }
.sa-deny { padding: 0.6rem 0.4rem; border-radius: 0.6rem; color: var(--ink); border: 1px solid var(--app-line); background: #f6f4ee; }

.slip-check { right: -1.2rem; bottom: 13%; width: 14.5rem; padding: 0.9rem 1rem 0.8rem; border-radius: 1rem; transform: rotate(3deg); }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.92rem; }
.sc-head span { font: 500 0.74rem/1 var(--mono); color: var(--ink-3); }
.slip-check ul { margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; }
.slip-check li { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0; border-top: 1px solid var(--app-line); }
.slip-check li i { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 0.35rem; border: 1.5px solid #c4c0b5; color: transparent; font-size: 0.8rem; flex: none; }
.slip-check li.done, .slip-check li.ticking { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(106, 94, 78, 0.6); }
.slip-check li.done i, .slip-check li.ticking i { background: var(--ok); border-color: var(--ok); color: #fff; }

.slip-choice { left: -3.25rem; top: 44%; width: 15.5rem; padding: 0.85rem 0.95rem 0.8rem; border-radius: 1rem; transform: rotate(-2.5deg); }
.sx-q { font-weight: 700; font-size: 0.9rem; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.sx-chips span { position: relative; overflow: hidden; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--app-line); background: #f6f4ee; font-size: 0.84rem; font-weight: 600; }
.sx-chips .pick { color: var(--paper-hi); background: var(--ink); border-color: var(--ink); }
.sx-chips .tap { background: rgba(21, 18, 14, 0.35); }
.sx-sent { margin-top: 0.55rem; font: 500 0.76rem/1 var(--mono); color: var(--ok); }
.slip-tool { right: 4%; top: 5%; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.85rem 0.55rem 0.6rem; border-radius: 999px; font-size: 0.84rem; transform: rotate(-2deg); }
.slip-tool b { font: 600 0.82rem/1 var(--mono); }
.st-globe { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--brass-ink); background: radial-gradient(ellipse 38% 100% at 50% 50%, transparent 92%, var(--brass-ink) 94% 100%), linear-gradient(transparent 46%, var(--brass-ink) 46% 54%, transparent 54%); flex: none; }
.st-sep { width: 1px; height: 0.9rem; background: var(--app-line); }
.st-time { font: 500 0.8rem/1 var(--mono); color: var(--ink-3); }
.st-state { position: relative; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ok); color: #fff; font-size: 0.85rem; }
.st-state .spin { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(184, 134, 46, 0.3); border-top-color: var(--brass); background: var(--app-card); opacity: 0; }

.seal-hero { left: 6%; bottom: 5%; z-index: 3; transform: rotate(-14deg); }

/* sections ---------------------------------------------------------------------------------------------------- */
.sec { position: relative; padding-block: clamp(5rem, 11vw, 9rem); }
.sec-head { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
.no { grid-row: 1 / span 3; padding-top: 1.25rem; font: 500 0.86rem/1 var(--mono); color: var(--brass-ink); border-top: 2px solid var(--ink); align-self: start; }
.sec-head h2 { font: 400 clamp(2.9rem, 6.4vw, 6rem)/0.92 var(--serif); letter-spacing: -0.03em; }
.sec-lead { max-width: 38rem; margin-top: 1.5rem; color: var(--ink-2); font-size: 1.15rem; }
.sec-head > p:not(.sec-lead) { margin-top: 1.75rem; }

/* 01 features: the app's own cards, pinned at slightly different angles */
.feats { padding-bottom: clamp(3rem, 6vw, 5rem); }
.feats .sec-head { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 0.9fr); }
.feats .sec-head h2 { grid-column: 2; }
.feats .sec-lead { grid-column: 3; grid-row: 1; align-self: end; margin: 0; padding-bottom: 0.5rem; }
.wl-feats { width: 26rem; height: 78rem; right: -6rem; top: 10rem; transform: rotate(-24deg); opacity: 0.38; }
.feat-list { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2.5rem); row-gap: clamp(3rem, 6vw, 5.5rem); margin: clamp(3.5rem, 7vw, 6rem) 0 0; padding: 0; list-style: none; }
.feat h3 { margin-top: 1.6rem; font: 700 1.3rem/1.2 var(--sans); letter-spacing: -0.005em; }
.feat > p { margin-top: 0.6rem; max-width: 30rem; color: var(--ink-2); font-size: 1.05rem; }
.feat .app { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.feat:hover .app { transform: rotate(0deg) translateY(-6px); box-shadow: 0 1px 0 #fff inset, 0 40px 60px -30px rgba(60, 38, 8, 0.6), 0 6px 14px -6px rgba(21, 18, 14, 0.2); }
.f-approve { grid-column: 1 / span 5; }
.f-tools { grid-column: 7 / span 6; margin-top: 7rem; }
.f-away { grid-column: 2 / span 5; }
.f-answers { grid-column: 8 / span 5; margin-top: -3rem; }
.f-local { grid-column: 1 / span 5; margin-top: 1rem; }
.f-server { grid-column: 7 / span 5; margin-top: 5rem; }

.app { position: relative; font-family: var(--sans); background: var(--app-card); border: 1px solid var(--app-line); border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 1px 0 #fff inset, 0 28px 50px -30px rgba(60, 38, 8, 0.5), 0 3px 8px -4px rgba(21, 18, 14, 0.15); }
.f-approve .app { transform: rotate(-1.6deg); }
.f-tools .app { transform: rotate(1deg); }
.f-away .app { transform: rotate(-0.8deg); }
.f-answers .app { transform: rotate(1.4deg); }
.f-local .app { transform: rotate(0.9deg); }
.f-server .app { transform: rotate(-1.2deg); }

.ap-lg { background: var(--app-card); }
.ap-top { display: flex; gap: 0.8rem; align-items: flex-start; }
.ap-top p { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1.05rem; line-height: 1.25; }
.ap-warn { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; color: #8a4b12; border: 1.5px solid #c98a3a; font: 700 1.1rem/1 var(--sans); }
.risk { align-self: flex-start; padding: 0.2rem 0.5rem; border-radius: 0.35rem; background: #f7e3c7; color: #7a4210; font: 600 0.72rem/1.2 var(--mono); }
.ap-deadline { position: relative; display: flex; justify-content: space-between; margin-top: 1.1rem; padding-bottom: 0.6rem; font-size: 0.82rem; color: var(--ink-3); }
.ap-deadline .m { font-family: var(--mono); color: var(--ink); }
.ap-deadline i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brass) 0 76%, #e6e2d8 76%); }
.ap-why { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-2); }
.ap-code { display: block; margin-top: 0.7rem; padding: 0.75rem 0.85rem; border-radius: 0.7rem; background: #efede7; border: 1px solid var(--app-line); font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere; }
.ap-opts { display: grid; gap: 0.5rem; margin-top: 1rem; }
.opt { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem; border-radius: 0.7rem; border: 1px solid var(--app-line); background: #f8f7f3; text-align: center; font-weight: 700; font-size: 0.95rem; }
.opt small { font-weight: 400; font-size: 0.74rem; color: var(--ink-3); }
.opt-allow { color: #fff6ee; border-color: var(--wax); background: linear-gradient(180deg, #b52a24, var(--wax)); box-shadow: inset 0 1px 0 rgba(255, 200, 180, 0.35), 0 6px 14px -6px rgba(163, 32, 29, 0.8); }
.opt-allow small { color: #f6d6cb; }
.opt-deny { color: var(--ink); }

.tl { padding: 1.1rem 1.25rem 1.25rem; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.tl-head span { font: 500 0.78rem/1 var(--mono); color: var(--ink-3); }
.tl ol { position: relative; margin: 1rem 0 0; padding: 0; list-style: none; }
.tl ol::before { content: ""; position: absolute; left: 0.62rem; top: 0.9rem; bottom: 0.9rem; width: 1.5px; background: var(--app-line); }
.tl li { position: relative; display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.62rem 0; font-size: 0.92rem; }
.tl li .tk { width: 1.25rem; height: 1.25rem; padding: 0.2rem; border-radius: 50%; background: var(--ok); color: #fff; }
.tl li b { font: 600 0.84rem/1.2 var(--mono); }
.tl li code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 0.8rem; }
.tl li > span { font: 500 0.78rem/1 var(--mono); color: var(--ink-3); }
.tl li.run b { font-family: var(--sans); font-weight: 700; font-size: 0.92rem; grid-column: 2 / span 2; }
.spin { display: block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid rgba(184, 134, 46, 0.25); border-top-color: var(--brass); background: var(--app-card); }
.dots { display: inline-flex; gap: 0.2rem; }
.dots i { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--brass); opacity: 0.35; }

.lock { padding: 1.6rem 1.1rem 1.2rem; border: 0; color: var(--paper); background:
  radial-gradient(120% 80% at 80% 0%, rgba(184, 134, 46, 0.35), transparent 60%),
  linear-gradient(170deg, #26231f, #121110 70%); box-shadow: 0 30px 50px -28px rgba(21, 18, 14, 0.8); }
.lock::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; }
.lock-time { text-align: center; font: 400 3.9rem/1 var(--sans); letter-spacing: -0.03em; color: #f4f2ec; }
.lock-date { text-align: center; margin-top: 0.35rem; font-size: 0.85rem; color: rgba(244, 242, 236, 0.7); }
.note { position: relative; z-index: 1; display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.8rem; padding: 0.85rem 0.9rem; border-radius: 1rem; background: rgba(251, 250, 247, 0.92); color: var(--ink); font-size: 0.9rem; line-height: 1.35; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.note img { border-radius: 7px; flex: none; }
.note p { display: flex; flex-direction: column; gap: 0.15rem; }
.stamp-delivered { position: absolute; z-index: 2; right: 1rem; top: 1.1rem; padding: 0.35rem 0.6rem; border: 2.5px solid var(--wax-hi); border-radius: 0.3rem; color: var(--wax-hi); font: 700 0.78rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(9deg); box-shadow: inset 0 0 0 1.5px #1b1917, inset 0 0 0 3px var(--wax-hi); opacity: 0.92; }
.note-app { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--ink-3); }
.note strong { font-size: 0.95rem; }

.pick-q { font-weight: 700; font-size: 1.02rem; }
.pick ul { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.pick li { display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.75rem; border: 1px solid var(--app-line); border-radius: 0.75rem; font-size: 0.92rem; background: #fbfaf7; }
.pick li i { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid #b8b3a7; flex: none; }
.pick li.on { border-color: #33476e; background: #eef1f6; box-shadow: inset 0 0 0 1px #33476e; font-weight: 700; }
.pick li.on i { border: 5px solid #33476e; }
.tag { margin-left: auto; padding: 0.15rem 0.45rem; border-radius: 0.35rem; font: 600 0.68rem/1.2 var(--mono); font-style: normal; background: #ece9e1; color: var(--ink-3); }
.tag-bad { background: #f1e2cf; color: #7a4210; }
.tag-good { background: #e3eedb; color: #2f5d2b; }
.pick-send { display: flex; justify-content: space-between; margin-top: 0.8rem; padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: #e7ebf2; font-size: 0.85rem; color: #33476e; }

.rows-head { font-weight: 700; }
.rows dl { margin: 0.8rem 0 0; }
.rows dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--app-line); font-size: 0.95rem; }
.rows dt { color: var(--ink-2); }
.rows dd { margin: 0; font-weight: 700; }
.rows dd.off { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-3); font-weight: 500; }
.rows dd.off::after { content: ""; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: radial-gradient(circle at 0.6rem 50%, #fff 0 0.42rem, transparent 0.46rem), #d3cfc5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }

.pair { display: flex; gap: 1.1rem; align-items: center; }
.qr { position: relative; width: 6.2rem; height: 6.2rem; flex: none; border-radius: 0.5rem; background-color: #fff; background-image:
  repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%),
  repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.85) 5px 7px);
  background-size: 9px 9px, 13px 13px; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--app-line); }
.qr i { position: absolute; width: 1.7rem; height: 1.7rem; border: 4px solid var(--ink); background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--ink); }
.qr i:nth-child(1) { left: 0; top: 0; }
.qr i:nth-child(2) { right: 0; top: 0; }
.qr i:nth-child(3) { left: 0; bottom: 0; }
.pair-ok { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--ok); }
.pair code { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.route { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; font: 500 0.75rem/1 var(--mono); }
.route span { padding: 0.35rem 0.5rem; border-radius: 0.35rem; background: #efede7; }
.route span + span::before { content: "› "; color: var(--brass-ink); }

/* 02 demos: a sideways reel of plates per group */
.demos { padding-bottom: clamp(3rem, 7vw, 6rem); }
.reel { margin-top: clamp(3rem, 6vw, 5rem); }
.reel-head { display: flex; align-items: baseline; gap: 1rem; padding-left: calc(7rem + 1.5rem); font: 700 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--sans); letter-spacing: -0.005em; }
.reel-head span { font: 500 0.8rem/1 var(--mono); color: var(--brass-ink); letter-spacing: 0; }
.reel-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); align-self: center; }
.strip {
  --edge: max(var(--gutter), (100vw - 82rem) / 2 + 8.5rem);
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(14.5rem, 19vw, 16.5rem); gap: clamp(1.25rem, 2.2vw, 2rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 1.75rem var(--edge) 1.5rem; scrollbar-width: thin; scrollbar-color: var(--brass) transparent;
}
.strip:focus-visible { outline-offset: -3px; }
.plate { margin: 0; scroll-snap-align: start; }
.plate-media { position: relative; padding: 0.55rem; border-radius: 1.4rem; background: var(--paper-hi); border: 1px solid var(--app-line); box-shadow: 0 24px 40px -26px rgba(60, 38, 8, 0.55), 0 2px 6px -3px rgba(21, 18, 14, 0.2); transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease); }
.plate:nth-child(odd) .plate-media { transform: rotate(-1deg); }
.plate:nth-child(even) .plate-media { transform: rotate(0.8deg) translateY(0.6rem); }
.plate:hover .plate-media, .plate:focus-within .plate-media { transform: rotate(0) translateY(-0.5rem); box-shadow: 0 40px 60px -30px rgba(60, 38, 8, 0.65), 0 4px 10px -4px rgba(21, 18, 14, 0.25); }
/* each clip is the phone on a soft backdrop: crop the backdrop at the sides, keep the clip's own title */
.plate video { width: 100%; height: auto; aspect-ratio: 440 / 960; object-fit: cover; border-radius: 1rem; background: #dfe4f2; }
.plate figcaption { margin-top: 1.35rem; padding-right: 0.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.plate-title { font-weight: 700; color: var(--ink); background: linear-gradient(var(--brass), var(--brass)) 0 100% / 0 2px no-repeat; transition: background-size 0.45s var(--ease); }
.plate:hover .plate-title { background-size: 100% 2px; }
.plate-secs { margin-left: 0.3rem; font: 500 0.75rem/1 var(--mono); color: var(--brass-ink); }
.plate-text { display: block; margin-top: 0.35rem; }

/* 03 the film: the one dark, cinematic band */
.film { position: relative; margin-block: clamp(2rem, 5vw, 4rem); padding-block: clamp(4.5rem, 9vw, 8rem); color: var(--paper); background:
  radial-gradient(60% 80% at 88% 0%, rgba(184, 134, 46, 0.14), transparent 60%),
  linear-gradient(180deg, #141311, #0d0c0b); }
.film::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.55; mix-blend-mode: overlay; pointer-events: none; }
.film-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.film-head .no { display: block; color: var(--gilt); border-color: var(--gilt); width: 7rem; }
.film-head h2 { margin-top: 1.5rem; font: 400 clamp(2.9rem, 6.4vw, 6rem)/0.92 var(--serif); letter-spacing: -0.03em; color: #f4f2ec; }
.film-head p { margin-top: 1.2rem; color: rgba(244, 242, 236, 0.82); }
.film-head .credits { font-size: 0.85rem; color: rgba(244, 242, 236, 0.62); }
.film a { color: var(--gilt); }
.film a:hover { color: #fff3d6; text-decoration-color: var(--gilt); }
.film :focus-visible { outline-color: var(--gilt); }
.screen-169 { position: relative; margin: 0; padding: clamp(0.5rem, 1vw, 0.8rem); border: 1px solid rgba(230, 194, 119, 0.4); }
.screen-169::before, .screen-169::after { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; border-color: var(--gilt); border-style: solid; }
.screen-169::before { left: -0.6rem; top: -0.6rem; border-width: 2px 0 0 2px; }
.screen-169::after { right: -0.6rem; bottom: -0.6rem; border-width: 0 2px 2px 0; }
.screen-169 video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }

/* 04 platforms: a receipt with rubber stamps */
.plats { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.plats .sec-head { grid-template-columns: 7rem minmax(0, 1fr); position: sticky; top: 2rem; }
.plats .sec-head > :not(.no) { grid-column: 2; }
.receipt { filter: drop-shadow(0 26px 28px rgba(60, 38, 8, 0.28)) drop-shadow(0 2px 2px rgba(21, 18, 14, 0.18)); transform: rotate(0.6deg); }
.rc-paper {
  --tooth: 12px;
  position: relative; padding: 2.25rem clamp(1.25rem, 3vw, 2.5rem) 2.5rem; font-family: var(--mono); color: var(--ink);
  background: var(--grain), linear-gradient(180deg, #fefdfb, #f6f5f0);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 5.5px, #000 6px) 0 0 / var(--tooth) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5.5px, #000 6px) 0 100% / var(--tooth) 51% repeat-x;
  mask: radial-gradient(circle at 50% 0, transparent 5.5px, #000 6px) 0 0 / var(--tooth) 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 5.5px, #000 6px) 0 100% / var(--tooth) 51% repeat-x;
}
.rc-head, .rc-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--ink-3); }
.rc-head { padding-bottom: 1rem; border-bottom: 1.5px dashed rgba(21, 18, 14, 0.35); }
.rc-foot { justify-content: center; margin-top: 0.5rem; padding-top: 1.1rem; border-top: 1.5px dashed rgba(21, 18, 14, 0.35); color: var(--ink-2); }
.rc-foot::after { content: ""; display: none; }
.rc-rows { margin: 0; padding: 0; list-style: none; }
.rc-rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px dotted rgba(21, 18, 14, 0.3); }
.rc-rows li:last-child { border-bottom: 0; }
.rc-rows h3 { grid-column: 1; font: 700 1.2rem/1.2 var(--sans); }
.rc-rows p { grid-column: 1; margin-top: 0.45rem; font-family: var(--sans); font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); }
.stamp {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  padding: 0.4rem 0.65rem; border: 2.5px solid currentColor; border-radius: 0.3rem; color: var(--brass-ink);
  font: 700 0.82rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-7deg); opacity: 0.88; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1.5px #fefdfb, inset 0 0 0 3px currentColor;
}
.rc-rows li:nth-child(even) .stamp { transform: rotate(5deg); }
.st-ink { color: var(--ink); }
.st-soon { color: var(--ink-3); border-style: dashed; box-shadow: none; }

/* 05 self-hosting: an ink panel with a terminal */
.host { padding-top: clamp(3rem, 6vw, 5rem); }
.host-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 4.5rem); border-radius: 1.75rem; color: var(--paper); overflow: hidden; background:
  radial-gradient(60% 60% at 100% 0%, rgba(184, 134, 46, 0.14), transparent 65%),
  linear-gradient(160deg, #1a1816, #0f0e0d 60%); box-shadow: 0 50px 80px -50px rgba(21, 18, 14, 0.9); }
.host-panel::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; }
.host-panel > * { position: relative; }
.host .sec-head { grid-column: 1 / -1; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr); }
.host .sec-head h2 { color: #f4f2ec; }
.host .sec-lead { grid-column: 3; grid-row: 1; margin: 0; align-self: end; color: rgba(244, 242, 236, 0.8); font-size: 1.05rem; }
.host .no { color: var(--gilt); border-color: var(--gilt); }
.host a { color: var(--gilt); }
.host a:hover { color: #fff3d6; text-decoration-color: var(--gilt); }
.host :focus-visible { outline-color: var(--gilt); }
.term { align-self: start; border-radius: 0.9rem; background: #0a0806; border: 1px solid rgba(230, 194, 119, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 40px -20px #000; }
.term-bar { padding: 0.75rem 1.1rem; border-bottom: 1px solid rgba(230, 194, 119, 0.18); font: 500 0.78rem/1 var(--mono); color: rgba(244, 242, 236, 0.55); }
.term-bar span::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.6rem; border-radius: 50%; background: var(--gilt); vertical-align: 0.05em; }
.term pre { margin: 0; padding: 1.6rem 1.2rem 1.8rem; overflow-x: auto; font-size: clamp(0.92rem, 1.35vw, 1.12rem); line-height: 1.5; color: #f4f2ec; }
.term code { font-size: inherit; }
.pr { color: var(--gilt); }
.caret { display: inline-block; width: 0.6em; height: 1.15em; margin-left: 0.2em; vertical-align: -0.2em; background: var(--gilt); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: baseline; padding: 0.95rem 0; border-top: 1px solid rgba(230, 194, 119, 0.2); counter-increment: s; color: rgba(244, 242, 236, 0.9); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: "0" counter(s); font: 600 0.9rem/1 var(--mono); color: var(--gilt); }
.steps code { padding: 0.1em 0.4em; border-radius: 0.3rem; background: rgba(230, 194, 119, 0.12); color: #f4f2ec; overflow-wrap: anywhere; }
.host-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(230, 194, 119, 0.25); }
.host-links li { padding: 1rem 1.25rem 0 0; }
.host-links a { font-weight: 700; }
.host-links span { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: rgba(244, 242, 236, 0.6); }

/* 06 privacy: a short sealed letter */
.priv { padding-top: 0; }
.letter { position: relative; max-width: 50rem; margin-left: auto; margin-right: clamp(0rem, 6vw, 6rem); padding: clamp(2rem, 5vw, 3.75rem); padding-right: clamp(2rem, 9vw, 7rem); background: var(--grain), var(--paper-hi); border: 1px solid var(--app-line); box-shadow: 0 30px 60px -36px rgba(60, 38, 8, 0.55); transform: rotate(-0.8deg); }
.letter::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgba(184, 134, 46, 0.35); pointer-events: none; }
.letter .no { display: inline-block; padding-top: 0.9rem; width: 7rem; }
.letter h2 { margin-top: 1.25rem; font: 400 clamp(2.3rem, 4.4vw, 3.8rem)/0.95 var(--serif); letter-spacing: -0.025em; }
.letter p { margin-top: 1.2rem; max-width: 36rem; color: var(--ink-2); }
.letter p:last-of-type a { font-weight: 700; }
.seal-letter { right: -2.2rem; top: -2.2rem; transform: rotate(12deg); width: 6.5rem; }

/* footer ------------------------------------------------------------------------------------------------------ */
.foot { position: relative; margin-top: clamp(3rem, 7vw, 6rem); padding-bottom: 3rem; border-top: 2px solid var(--ink); }
.wordmark { --mk-gap: var(--paper); --mk-bubble: var(--ink); --mk-dot: var(--paper); display: flex; align-items: center; gap: 0.12em; margin: 0; padding-top: 0.2em; font: 400 clamp(3.3rem, 13vw, 13rem)/0.9 var(--serif); letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.wm-mark { width: 0.95em; flex: none; margin-right: 0.06em; transform: translateY(0.02em); }
.wm-mark svg { width: 100%; height: auto; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 4rem; align-items: start; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.disclaimer { max-width: 40rem; font-size: 0.95rem; color: var(--ink-2); }
.foot-links { display: grid; grid-template-columns: repeat(3, auto); gap: 0.6rem 2rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.foot-links a { color: var(--ink); text-decoration-color: var(--brass); }
.foot-links a[aria-current] { text-decoration-thickness: 2px; }

/* privacy, security, support, 404 ---------------------------------------------------------------------------- */
.letterhead { position: relative; height: 0; }
.wl-letter { width: 16rem; height: 48rem; right: max(-2rem, (100vw - 82rem) / 2 + 2rem); top: -2rem; transform: rotate(28deg); opacity: 0.32; }
.prose { position: relative; max-width: 46rem; margin-left: max(var(--gutter), (100vw - 82rem) / 2 + 8.5rem); margin-right: auto; padding-block: clamp(3rem, 8vw, 6rem) 2rem; }
.prose h1 { font: 400 clamp(3rem, 7vw, 6rem)/0.92 var(--serif); letter-spacing: -0.03em; margin: 0 0 2.5rem; }
.prose h1::after { content: ""; display: block; width: 6rem; height: 3px; margin-top: 1.5rem; background: var(--brass); }
.prose h2 { margin: 3.5rem 0 1rem; font: 700 clamp(1.4rem, 2.2vw, 1.65rem)/1.2 var(--sans); letter-spacing: -0.01em; scroll-margin-top: 1rem; }
.prose h3 { margin: 2.25rem 0 0.6rem; font: 700 1.2rem/1.3 var(--sans); scroll-margin-top: 1rem; }
.prose h4 { margin: 1.75rem 0 0.5rem; font: 700 1.05rem/1.3 var(--sans); }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; color: var(--ink-2); }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--brass-ink); }
.prose strong { color: var(--ink); }
.prose code { padding: 0.08em 0.38em; border-radius: 0.3rem; background: rgba(233, 224, 204, 0.7); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.prose hr { border: 0; height: 1px; margin: 3rem 0; background: var(--rule); }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--brass); background: var(--paper-hi); }
.prose blockquote p { margin: 0; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--app-line); border-radius: 0.6rem; background: var(--paper-hi); }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--app-line); color: var(--ink-2); }
.table-wrap thead th { font: 600 0.78rem/1.3 var(--mono); color: var(--brass-ink); background: #f3f1ec; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap tbody th { font-weight: 700; color: var(--ink); width: 30%; }
.rts { display: inline-block; margin-bottom: 2.5rem; padding: 0.5rem 0.9rem; border: 3px double var(--wax); border-radius: 0.3rem; color: var(--wax); font: 700 1rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-6deg); mix-blend-mode: multiply; opacity: 0.9; }

/* the one orchestrated moment: the dispatch arrives ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { animation: rise 1s var(--ease) both; }
  .hero h1 .l1 { animation-delay: 0.05s; }
  .hero h1 .l2 { animation-delay: 0.17s; }
  .hero h1 .l3 { animation-delay: 0.29s; }
  .lead { animation: fade 0.9s 0.5s var(--ease) both; }
  .cta { animation: fade 0.9s 0.62s var(--ease) both; }
  .meta, .req { animation: fade 0.9s 0.74s var(--ease) both; }
  .phone { animation: arrive 1.2s 0.25s var(--ease) both; }
  .wl-hero use { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.6s 0.3s cubic-bezier(0.5, 0, 0.2, 1) forwards; }
  .slip-approve { animation: pin 0.8s 0.85s var(--ease) both, bob-a 7s 1.8s ease-in-out infinite alternate; }
  .slip-tool { animation: pin 0.8s 1s var(--ease) both, bob-b 6s 1.9s ease-in-out infinite alternate; }
  .slip-check { animation: pin 0.8s 1.15s var(--ease) both, bob-c 8s 2s ease-in-out infinite alternate; }
  .seal-hero { animation: stamp 0.55s 1.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
  .live { animation: live 1.8s 2s ease-out infinite; }
  .st-state .spin { animation: spin-out 1.9s 1s linear both; }
  .slip-choice { animation: pin 0.8s 1.1s var(--ease) both, bob-b 9s 2.1s ease-in-out infinite alternate-reverse; }
  /* the interaction loop, one gesture at a time: allow, tick, choose */
  .sa-allow { animation: k-press 10s 2.2s infinite both; }
  .sa-allow .tap { animation: k-tap-allow 10s 2.2s infinite both; }
  .sa-allow .lbl-a { animation: k-lbl-a 10s 2.2s infinite both; }
  .sa-allow .lbl-b { animation: k-lbl-b 10s 2.2s infinite both; }
  .slip-check .ticking i { animation: k-tick-box 10s 2.2s infinite both; }
  .slip-check .ticking { animation: k-tick-text 10s 2.2s infinite both; }
  .sx-chips .pick { animation: k-chip 10s 2.2s infinite both; }
  .sx-chips .tap { animation: k-tap-chip 10s 2.2s infinite both; }
  .sx-sent { animation: k-sent 10s 2.2s infinite both; }
  .spin { animation: turn 0.9s linear infinite; }
  .st-state .spin { animation: turn 0.9s linear infinite, spin-out 1.9s 1s linear both; }
  .dots i { animation: dot 1.2s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: 0.2s; }
  .dots i:nth-child(3) { animation-delay: 0.4s; }
  .caret { animation: blink 1.1s steps(1) infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(3rem) rotate(7deg); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pin { from { opacity: 0; translate: 0 1.2rem; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bob-a { to { translate: 0 -0.55rem; } }
@keyframes bob-b { to { translate: 0.3rem -0.4rem; } }
@keyframes bob-c { to { translate: 0 0.6rem; } }
@keyframes stamp { 0% { opacity: 0; scale: 1.9; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(163, 32, 29, 0.5); } 100% { box-shadow: 0 0 0 0.6rem rgba(163, 32, 29, 0); } }
@keyframes spin-out { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes turn { to { rotate: 360deg; } }
@keyframes k-press { 0%, 6% { scale: 1; } 8% { scale: 0.94; } 11%, 100% { scale: 1; } }
@keyframes k-tap-allow { 0%, 6% { opacity: 0; scale: 0.2; } 7% { opacity: 0.8; } 16%, 100% { opacity: 0; scale: 3.4; } }
@keyframes k-lbl-a { 0%, 10% { opacity: 1; } 12%, 92% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes k-lbl-b { 0%, 10% { opacity: 0; } 12%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes k-tick-box { 0%, 35% { background: transparent; border-color: #c4c0b5; color: transparent; scale: 1; } 37% { scale: 1.3; } 40%, 93% { background: var(--ok); border-color: var(--ok); color: #fff; scale: 1; } 97%, 100% { background: transparent; border-color: #c4c0b5; color: transparent; } }
@keyframes k-tick-text { 0%, 37% { color: var(--ink); text-decoration-color: transparent; } 41%, 93% { color: var(--ink-3); text-decoration-color: rgba(106, 94, 78, 0.6); } 97%, 100% { color: var(--ink); text-decoration-color: transparent; } }
@keyframes k-chip { 0%, 61% { color: var(--ink); background: #f6f4ee; border-color: var(--app-line); } 64%, 93% { color: var(--paper-hi); background: var(--ink); border-color: var(--ink); } 97%, 100% { color: var(--ink); background: #f6f4ee; border-color: var(--app-line); } }
@keyframes k-tap-chip { 0%, 60% { opacity: 0; scale: 0.2; } 61% { opacity: 0.8; } 69%, 100% { opacity: 0; scale: 3; } }
@keyframes k-sent { 0%, 67% { opacity: 0; translate: 0 0.35rem; } 71%, 92% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }
@keyframes dot { 50% { opacity: 1; translate: 0 -2px; } }
@keyframes blink { 50% { opacity: 0; } }

/* without motion: the vertical trailer stays a still frame */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen video { display: none; }
  .st-state .spin { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* responsive -------------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .slip-approve { left: -2.5rem; }
  .feats { padding-bottom: clamp(3rem, 6vw, 5rem); }
.feats .sec-head { grid-template-columns: 7rem minmax(0, 1fr); }
  .feats .sec-lead { grid-column: 2; grid-row: auto; margin-top: 1.5rem; }
  .host .sec-head { grid-template-columns: 7rem minmax(0, 1fr); }
  .host .sec-lead { grid-column: 2; grid-row: auto; margin-top: 1.5rem; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 2.5rem; }
  .hero h1 { font-size: clamp(3.4rem, 17.5vw, 7.5rem); }
  .stage { min-height: 0; padding: 3.5rem 0 2rem; --pw: clamp(14.5rem, 64vw, 18rem); }
  .wl-hero { width: 15rem; height: 46rem; }
  .slip-approve { left: max(-0.5rem, 50% - var(--pw) / 2 - 6.5rem); top: 14%; width: 14.5rem; padding: 0.85rem; }
  .slip-check { right: max(-0.5rem, 50% - var(--pw) / 2 - 5.5rem); width: 13rem; }
  .slip-tool { right: max(0rem, 50% - var(--pw) / 2 - 4rem); top: 3%; }
  .seal-hero { left: max(0rem, 50% - var(--pw) / 2 - 3.5rem); width: 6rem; }
  .slip-choice { left: max(-0.5rem, 50% - var(--pw) / 2 - 6rem); width: 14rem; }
  .sec-head, .feats .sec-head, .host .sec-head, .plats .sec-head { grid-template-columns: minmax(0, 1fr); }
  .no { grid-row: auto; width: 5.5rem; margin-bottom: 1.5rem; padding-top: 0.9rem; }
  .sec-head > *, .feats .sec-head h2, .feats .sec-lead, .host .sec-lead, .plats .sec-head > :not(.no) { grid-column: 1; }
  .feat-list { grid-template-columns: minmax(0, 1fr); row-gap: 4rem; }
  .feat-list > .feat { grid-column: 1; margin-top: 0; max-width: 32rem; }
  .feat-list > .feat:nth-child(even) { margin-left: auto; }
  .wl-feats { display: none; }
  .reel-head { padding-left: 0; flex-wrap: wrap; }
  .reel-head span { white-space: nowrap; }
  .reel-head::after { display: none; }
  .strip { --edge: var(--gutter); }
  .film-grid { grid-template-columns: minmax(0, 1fr); }
  .film-head .no { width: 5.5rem; }
  .plats { grid-template-columns: minmax(0, 1fr); }
  .plats .sec-head { position: static; }
  .host-panel { grid-template-columns: minmax(0, 1fr); border-radius: 1.25rem; }
  .letter { margin-right: 1rem; }
  .prose { margin-left: auto; }
  .wl-letter { display: none; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 1.75rem; padding-bottom: 3.5rem; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .stage { order: 2; min-height: 0; margin: 0.25rem 0 0; padding: 1.25rem 0 0.75rem; --pw: clamp(9rem, 41vw, 11.5rem); justify-items: end; }
  .stage .phone { margin-right: 7%; }
  .lead { order: 3; margin-top: 1.5rem; }
  .cta { order: 4; }
  .meta { order: 5; }
  .req { order: 6; }
  .slip-check, .slip-choice, .slip-tool { display: none; }
  .wl-hero { width: 10rem; height: 30rem; transform: translate(-30%, -50%) rotate(38deg); }
  body { font-size: 1.0625rem; }
  .bar { position: relative; display: block; padding-block: 0.9rem 0.5rem; }
  .brand { font-size: 1.3rem; }
  .brand img { width: 30px; height: 30px; }
  .top nav { margin-top: 0.7rem; }
  .top ul { flex-wrap: nowrap; gap: 0 1.15rem; overflow-x: auto; scrollbar-width: none; }
  .top nav a { font-size: 0.92rem; white-space: nowrap; }
  .top nav li:last-child { position: absolute; right: 0; top: 0.95rem; }
  .top nav .gh { padding: 0.35rem 0.8rem; }
  .lead { font-size: 1.12rem; }
  .hero h1 .l2 { padding-left: 0.6em; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
  .meta li { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
  .slip-approve { width: 11.2rem; left: -0.25rem; top: 8%; font-size: 0.82em; padding: 0.65rem; }
  .sa-btns { font-size: 0.8rem; }
  .sa-head { white-space: nowrap; font-size: 0.84rem; }
  .slip-approve code { font-size: 0.78rem; }
  .slip-check { width: 10.4rem; right: -0.25rem; bottom: 7%; padding: 0.6rem 0.7rem 0.5rem; }
  .sc-head { font-size: 0.8rem; white-space: nowrap; }
  .sc-head span { display: none; }
  .term pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .slip-check ul { font-size: 0.78rem; }
  .slip-check li { padding: 0.32rem 0; }
  .slip-tool { display: none; }
  .slip-choice { left: -0.25rem; top: 45%; width: 10.6rem; padding: 0.6rem 0.65rem; }
  .sx-q { font-size: 0.76rem; white-space: nowrap; }
  .sx-chips { gap: 0.3rem; flex-wrap: nowrap; }
  .sx-chips span { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
  .sx-sent { font-size: 0.7rem; }
  .seal-hero { left: 0; bottom: 4%; width: 5rem; }
  .app { padding: 1rem; }
  .rc-rows li { grid-template-columns: minmax(0, 1fr); }
  .stamp { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.9rem; }
  .letter { padding-right: 1.75rem; margin-right: 0.5rem; }
  .seal-letter { right: -0.75rem; top: -2.5rem; width: 5rem; }
  .foot-links { grid-template-columns: repeat(2, auto); justify-content: start; }
}
/* phones: the compact hero stage (after the general phone rules above, so it wins) */
@media (max-width: 560px) {
  .slip-approve { left: 0; top: 24%; width: 12.6rem; padding: 0.75rem; font-size: 0.86em; transform: rotate(-3deg); }
  .seal-hero { left: auto; right: calc(7% + var(--pw) - 2.4rem); bottom: 1%; width: 4.2rem; }
}