/* Afterkey design system, direction C ("a note, not a puzzle").
   Morning sky, navy ink, sunflower accent, a parent's handwriting.
   All fonts are self-hosted (CSP: font-src 'self'). */

@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url(../fonts/young-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url(../fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 500; font-display: swap; src: url(../fonts/caveat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url(../fonts/caveat-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #edf2f7;
  --surface: #ffffff;
  --surface-2: #f6f9fc;
  --ink: #1f2a44;
  --ink-soft: #56627b;
  --rule: #d5e0ec;
  --sun: #f3c552;
  --sun-deep: #e3ad33;
  --sun-soft: #fdf3d6;
  --on-sun: #1f2a44;
  --pen: #23408e;
  --margin: #eaa3a3;
  --danger: #b3403a;
  --danger-bg: #fbecea;
  --ok: #2f7d5b;
  --focus: #2b6cd8;
  --shadow: 0 2px 0 #dbe5f0, 0 28px 60px -32px rgba(31, 42, 68, 0.45);

  --serif: "Young Serif", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.9rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.65rem;
  --step-3: clamp(1.9rem, 3.4vw, 2.6rem);
  --step-4: clamp(2.5rem, 5.4vw, 4.3rem);

  --measure: 38rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --r-s: 8px;
  --r-m: 14px;
  --r-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121a2e;
    --surface: #1a2440;
    --surface-2: #16203a;
    --ink: #e8edf6;
    --ink-soft: #a9b4ca;
    --rule: #2c3a5c;
    --sun-soft: #3a3320;
    --pen: #9db7ff;
    --danger: #ff8f86;
    --danger-bg: #3b2228;
    --ok: #7fd1a8;
    --focus: #8ab4ff;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  }
  :root:not([data-theme="light"]) .seal-tag { outline: 1px solid rgba(255, 255, 255, 0.28); }
  :root:not([data-theme="light"]) .trust-col.never { outline: 1px solid var(--rule); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }

/* ---------- header / footer ---------- */
.site-head { padding: 1.1rem 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-size: 1.45rem; text-decoration: none; }
.brand-mark { width: 1.6rem; height: 1.6rem; }
.brand-mark .half-sun { fill: var(--sun); }
.site-nav { display: flex; align-items: center; gap: 1.4rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-foot { padding: 2.5rem 0 3rem; border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.6rem 1.4rem;
  border: 1px solid var(--sun); border-radius: var(--r-pill);
  background: var(--sun); color: var(--on-sun);
  font: 700 var(--step-0)/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--sun-deep); border-color: var(--sun-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-small { min-height: 2.3rem; padding: 0.35rem 0.95rem; font-size: var(--step--1); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(0.92); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: 0.3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="file"], select, textarea {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); font: 400 var(--step-0)/1.4 var(--sans);
}
textarea { resize: vertical; min-height: 5.5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; }
.field { margin-bottom: 1.1rem; }
.helptext, .field .help { display: block; color: var(--ink-soft); font-size: var(--step--1); margin-top: 0.3rem; }
.errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; color: var(--danger); font-size: var(--step--1); font-weight: 600; }
.notice { padding: 0.85rem 1rem; border-left: 4px solid var(--ink); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--surface); margin: 0 0 1.25rem; }
.notice.error, .notice.warning { border-color: var(--danger); background: var(--danger-bg); }
.notice.success { border-color: var(--ok); }
.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; max-width: 30rem; }
.join input[type="email"] { min-height: 3.1rem; border-radius: var(--r-pill); padding: 0.7rem 1.1rem; }
.join .btn { min-height: 3.1rem; }
.join .errorlist { grid-column: 1 / -1; }
.join-note { margin-top: 0.85rem; font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- the handwritten note (hero, puzzle, demo, final) ---------- */
.note {
  position: relative; background: #fff; color: var(--pen); border-radius: 6px;
  padding: 2.1rem 1.6rem 2rem 3.3rem; box-shadow: var(--shadow);
  background-image:
    linear-gradient(90deg, transparent 2.55rem, var(--margin) 2.55rem, var(--margin) calc(2.55rem + 1.5px), transparent calc(2.55rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(2.05rem - 1px), #c9d8e8 calc(2.05rem - 1px), #c9d8e8 2.05rem);
  background-position: 0 0, 0 1.75rem;
}
.hand { font-family: var(--hand); font-weight: 500; font-size: 1.6rem; line-height: 2.05rem; margin: 0; color: #23408e; }
.hand.sign { text-align: right; font-weight: 600; }
.clip { position: absolute; top: -1.1rem; left: 2.1rem; width: 1.55rem; height: 3.4rem; border: 3px solid #9fb0c6; border-radius: 1rem; transform: rotate(-8deg); }
.seal-tag {
  position: absolute; right: -0.6rem; bottom: -1.25rem; transform: rotate(3deg);
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #1f2a44; color: #fff; border-radius: var(--r-pill); padding: 0.6rem 1rem 0.6rem 0.7rem;
  font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(31, 42, 68, 0.7);
}
.seal-tag .dot { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--sun); display: grid; place-items: center; flex: none; }
.seal-tag svg { width: 0.85rem; height: 0.85rem; }

/* ---------- landing: hero ---------- */
.lp-hero { padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6.5rem); }
.lp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.lp-hero h1 { font-size: var(--step-4); max-width: 12ch; letter-spacing: -0.015em; line-height: 1.05; }
.lp-hero .lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 33rem; margin: 1.5rem 0 2rem; }
.hero-note { justify-self: center; width: 100%; max-width: 29rem; position: relative; }
.hero-note .note { transform: rotate(-1.8deg); }

/* One orchestrated moment: the note writes itself, then gets sealed. */
@media (prefers-reduced-motion: no-preference) {
  .hero-note .hand { clip-path: inset(-0.4em 100% -0.4em -0.4em); animation: write 900ms cubic-bezier(.45,.05,.4,1) forwards; }
  .hero-note .hand:nth-child(2) { animation-delay: 250ms; }
  .hero-note .hand:nth-child(3) { animation-delay: 1050ms; }
  .hero-note .hand:nth-child(4) { animation-delay: 1850ms; }
  .hero-note .hand:nth-child(5) { animation-delay: 2650ms; }
  .hero-note .hand:nth-child(6) { animation-delay: 3450ms; }
  .hero-note .hand:nth-child(7) { animation-delay: 4250ms; animation-duration: 600ms; }
  .hero-note .seal-tag { opacity: 0; animation: stamp 520ms cubic-bezier(.2,1.4,.4,1) 4900ms forwards; }
}
@keyframes write { to { clip-path: inset(-0.4em -1.5em -0.4em -0.4em); } }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(14deg) scale(1.35); }
  100% { opacity: 1; transform: rotate(3deg) scale(1); }
}

/* ---------- landing: sections ---------- */
.lp-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.lp-section.alt { background: var(--surface-2); }
.lp-section h2 { font-size: var(--step-3); max-width: 22ch; margin-bottom: 1rem; line-height: 1.12; }
.lp-section .intro { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); margin-bottom: 0; }
.lp-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Infographic 1: puzzle pieces vs the note */
.puzzle-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.puzzle-side h3, .note-side h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-0); margin-bottom: 1.25rem; }
.pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; padding: 0.5rem 0.75rem 0 0; }
.piece {
  position: relative; background: var(--surface); border: 2px solid var(--rule); border-radius: 10px;
  padding: 1rem 0.9rem 0.9rem; font-size: 0.95rem; line-height: 1.4; min-height: 6.2rem;
}
.piece::before, .piece::after { content: ""; position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--rule); }
.piece::before { top: -0.62rem; left: calc(50% - 0.58rem); border-bottom-color: var(--surface); }
.piece::after { right: -0.62rem; top: calc(50% - 0.58rem); border-left-color: var(--surface); }
.piece:nth-child(1) { transform: rotate(-4deg); }
.piece:nth-child(2) { transform: rotate(3deg) translateY(0.6rem); }
.piece:nth-child(3) { transform: rotate(2deg); }
.piece:nth-child(4) { transform: rotate(-3deg) translateY(0.4rem); }
.piece .q { display: block; font-family: var(--hand); font-size: 1.45rem; line-height: 1; color: var(--danger); margin-bottom: 0.25rem; }
.vs-arrow { width: 3.2rem; color: var(--ink-soft); }
.note-side .note { transform: rotate(1.2deg); padding-top: 1.6rem; padding-bottom: 1.6rem; }
.note-side .hand { font-size: 1.45rem; }

/* Quiz */
.quiz { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2.5rem); max-width: 46rem; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; font-size: var(--step--1); color: var(--ink-soft); }
.quiz-progress { display: flex; gap: 0.35rem; }
.quiz-progress span { width: 1.6rem; height: 0.4rem; border-radius: var(--r-pill); background: var(--rule); }
.quiz-progress span.done { background: var(--sun); }
.quiz-progress span.now { background: var(--ink); }
.quiz h3 { font-size: var(--step-2); line-height: 1.2; margin-bottom: 1.25rem; }
.quiz-options { display: grid; gap: 0.6rem; }
.quiz-option {
  text-align: left; width: 100%; padding: 0.95rem 1.1rem; border: 2px solid var(--rule); border-radius: var(--r-s);
  background: var(--surface-2); color: var(--ink); font: 500 var(--step-0)/1.35 var(--sans); cursor: pointer;
}
.quiz-option:hover { border-color: var(--ink); }
.quiz-option:focus-visible { border-color: var(--focus); }
.quiz-back { margin-top: 1rem; font-size: var(--step--1); }
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0.5rem 0 1.5rem; }
.meter .label { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--step--1); margin-bottom: 0.4rem; }
.meter .num { font-family: var(--sans); font-weight: 700; font-size: var(--step-3); line-height: 1.1; margin-bottom: 0.35rem; font-variant-numeric: lining-nums tabular-nums; }
.meter .bar { height: 0.7rem; background: var(--rule); border-radius: var(--r-pill); overflow: hidden; }
.meter .bar span { display: block; height: 100%; width: 0; background: var(--sun); border-radius: var(--r-pill); transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.meter.low .bar span { background: var(--danger); }
.verdict { font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; margin: 0 0 1rem; }
.gaps { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.gaps li { position: relative; padding: 0.55rem 0 0.55rem 1.8rem; border-top: 1px solid var(--rule); }
.gaps li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--danger); }
.quiz-share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* Infographic 2: how it works */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.flow::before { content: ""; position: absolute; top: 3.1rem; left: 12%; right: 12%; border-top: 2px dashed var(--rule); }
.flow li { position: relative; text-align: center; }
.flow .ill { width: 6.2rem; height: 6.2rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; position: relative; }
.flow .ill svg { width: 3.4rem; height: 3.4rem; }
.flow .n { position: absolute; top: -0.2rem; right: -0.2rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; }
.flow h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-0); margin-bottom: 0.35rem; }
.flow p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; margin: 0 auto; max-width: 15rem; }
.ill-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ill-fill { fill: var(--sun); }
.ill-paper { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.ill-pen { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; }
.ill-ink { fill: var(--ink); }

/* Infographic 3 + demo: split key */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.halves-graphic { display: grid; gap: 0.75rem; }
.half-box { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.9rem; align-items: center; background: var(--surface); border-radius: var(--r-m); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.half-box .ic { width: 3.2rem; height: 3.2rem; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); }
.half-box .ic svg { width: 2rem; height: 2rem; }
.half-box.sealed .ic { background: #1f2a44; }
.half-box h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-0); margin-bottom: 0.15rem; }
.half-box p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }
.half-op { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-soft); font-size: var(--step--1); padding: 0 0.5rem; }
.half-op .plus { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sun); color: var(--on-sun); display: grid; place-items: center; font-weight: 700; flex: none; }
.half-box.result { background: var(--sun-soft); box-shadow: none; border: 2px dashed var(--sun-deep); }
.demo { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 1.75rem); }
.demo h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.demo .hint { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 1rem; }
.demo textarea { font-family: var(--hand); font-size: 1.45rem; line-height: 1.35; color: var(--pen); min-height: 6rem; }
.demo-out { margin-top: 1.1rem; display: grid; gap: 0.7rem; }
.demo-row { border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0.7rem 0.85rem; background: var(--surface-2); }
.demo-row .k { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.2rem; }
.demo-row code { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; color: var(--ink); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.demo-result { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--r-s); font-weight: 600; }
.demo-result.fail { background: var(--danger-bg); color: var(--danger); }
.demo-result.win { background: var(--sun-soft); color: var(--ink); }
.demo-result .opened { display: block; font-family: var(--hand); font-weight: 500; font-size: 1.55rem; line-height: 1.3; color: var(--pen); margin-top: 0.3rem; white-space: pre-wrap; }

/* Infographic 4: claim timeline */
.timeline { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2rem); }
.track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; padding-top: 1.6rem; }
.track::before { content: ""; position: absolute; left: 0.55rem; right: 0.55rem; top: 0.55rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) 0 72%, var(--sun) 72% 100%); }
.track .stop { position: relative; font-size: var(--step--1); line-height: 1.45; padding-right: 0.5rem; color: var(--ink-soft); }
.track .stop::before { content: ""; position: absolute; top: -1.6rem; left: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); }
.track .stop.opt::before { border-style: dashed; }
.track .stop.end::before { background: var(--sun); border-color: var(--sun-deep); }
.track .stop strong { display: block; font-size: var(--step-0); color: var(--ink); margin-bottom: 0.15rem; }
.cancel-band { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem; padding: 0.75rem 1rem; border-radius: var(--r-s); background: var(--sun-soft); font-weight: 600; font-size: var(--step--1); }
.cancel-band svg { width: 1.3rem; height: 1.3rem; flex: none; }

/* Infographic 5: trust */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.trust-col { background: var(--surface); border-radius: var(--r-m); padding: 1.5rem; box-shadow: var(--shadow); }
.trust-col h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-1); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.trust-col h3 svg { width: 1.6rem; height: 1.6rem; flex: none; }
.trust-col ul { list-style: none; padding: 0; margin: 0; }
.trust-col li { padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.trust-col li strong { display: block; }
.trust-col li span { color: var(--ink-soft); font-size: var(--step--1); }
.trust-col.never { background: #1f2a44; color: #fff; }
.trust-col.never li { border-color: rgba(255,255,255,.16); }
.trust-col.never li span { color: #b9c3d8; }
.locks { margin-top: 2.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; }
.locks svg.padlock { width: clamp(7rem, 16vw, 10rem); }
.locks h3 { font-size: var(--step-2); margin-bottom: 0.8rem; }
.locks ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; counter-reset: lock; }
.locks li { counter-increment: lock; display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; align-items: start; }
.locks li::before { content: counter(lock); width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sun); color: var(--on-sun); font-weight: 700; display: grid; place-items: center; }
.guards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin: 2.5rem 0 0; }
.guards div { padding: 1rem 0; border-top: 1px solid var(--rule); }
.guards dt { font-weight: 700; margin-bottom: 0.25rem; }
.guards dd { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.candor { margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--r-m); border: 2px dashed var(--rule); }
.candor h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-1); margin-bottom: 0.6rem; }
.candor ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.candor li { margin-bottom: 0.35rem; }

/* comparison */
.compare-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); }
table.compare { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--step--1); }
.compare th, .compare td { text-align: left; padding: 0.9rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody th { font-weight: 600; width: 30%; }
.compare .us { background: var(--sun-soft); }
.yes, .no, .part { display: inline-flex; align-items: center; gap: 0.4rem; }
.yes::before, .no::before, .part::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.yes::before { background: var(--ok); }
.no::before { border: 2px solid var(--danger); }
.part::before { background: linear-gradient(90deg, var(--ok) 50%, transparent 50%); border: 1px solid var(--ok); }

.assets { columns: 2; column-gap: 2.5rem; padding: 0; margin: 0; list-style: none; }
.assets li { break-inside: avoid; padding: 0.6rem 0 0.6rem 1.7rem; border-bottom: 1px solid var(--rule); position: relative; }
.assets li::before { content: ""; position: absolute; left: 0.1rem; top: 1rem; width: 0.9rem; height: 0.55rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 62rem; }
.price .tier.founding { background: var(--sun-soft); box-shadow: none; border: 2px dashed var(--sun-deep); }
.price-note { margin: 1.5rem 0 0; max-width: 46rem; color: var(--ink-soft); }
.price-note strong { color: var(--ink); }
.price .tier { padding: 1.6rem; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow); }
.price .tier.featured { outline: 3px solid var(--sun); }
.price .amount { font-family: var(--sans); font-weight: 700; font-size: var(--step-3); line-height: 1.1; margin: 0.6rem 0 0.4rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.price h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-0); }

.faq { max-width: 46rem; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.85rem; font-size: 1.5rem; line-height: 1; color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); margin: 0 0 1.1rem; max-width: var(--measure); }

.final .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.final .note { transform: rotate(-1deg); max-width: 24rem; justify-self: center; width: 100%; }

/* ---------- app ---------- */
.app-main { padding: 1.5rem 0 4rem; }
.app-main h1 { font-size: var(--step-3); margin-bottom: 0.5rem; }
.app-main h2 { font-size: var(--step-2); margin-bottom: 1rem; }
.panel { background: var(--surface); border-radius: var(--r-m); padding: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: 1.5rem; box-shadow: 0 1px 0 var(--rule); }
.panel.alert { outline: 2px solid var(--danger); background: var(--danger-bg); box-shadow: none; }
.panel.alert .btn { background: var(--danger); border-color: var(--danger); color: #fff; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.status-big { font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; margin-bottom: 0.4rem; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.row-list li:first-child { border-top: 0; }
.tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: var(--r-pill); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--rule); }
.tag.revoked { color: var(--ink-soft); }
.tag.live { color: var(--ok); border-color: var(--ok); }
.events { list-style: none; padding: 0; margin: 0; font-size: var(--step--1); }
.events li { padding: 0.5rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; }
.events time { color: var(--ink-soft); }
.auth-box { max-width: 27rem; margin: 2rem auto; }

.entry { border: 1px solid var(--rule); border-radius: var(--r-m); padding: 1.1rem; margin-bottom: 1rem; background: var(--surface); }
.entry-head { display: grid; grid-template-columns: 12rem 1fr auto; gap: 0.75rem; align-items: end; margin-bottom: 0.75rem; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.editor-bar { position: sticky; bottom: 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.9rem 0; background: var(--bg); border-top: 1px solid var(--rule); z-index: 2; }
.save-state { font-size: var(--step--1); color: var(--ink-soft); }
#letter { font-family: var(--hand); font-size: 1.45rem; line-height: 1.35; color: var(--pen); }

.card-sheet { max-width: 44rem; margin: 0 auto; background: #fff; color: #1f2a44; border-radius: var(--r-m); padding: 2rem; box-shadow: var(--shadow); }
.card-sheet h1 { font-size: var(--step-3); }
.card-sheet h2 { font-size: var(--step-2); }
.card-top { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.card-qr { width: 11rem; flex: none; }
.card-qr svg { width: 100%; height: auto; }
.card-code { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.03em; line-height: 1.8; padding: 0.85rem; border: 1px dashed #1f2a44; border-radius: var(--r-s); overflow-wrap: anywhere; margin: 0.5rem 0 1.25rem; }
.card-code span { white-space: nowrap; }
.card-sheet ol { padding-left: 1.2rem; }
.card-sheet li { margin-bottom: 0.5rem; }
.card-warning { border-top: 1px solid #d5e0ec; padding-top: 1rem; font-size: var(--step--1); }

.opened-entry { padding: 1rem 0; border-top: 1px solid var(--rule); }
.opened-entry h3 { font-family: var(--sans); font-weight: 700; font-size: var(--step-1); }
.opened-entry .type { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0.2rem; }
.opened-entry pre { white-space: pre-wrap; font-family: var(--sans); margin: 0.4rem 0 0.6rem; }
.letter { font-family: var(--hand); font-size: 1.7rem; line-height: 1.35; color: var(--pen); white-space: pre-wrap; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .price { grid-template-columns: 1fr 1fr; }
  .price .tier.founding { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .flow::before { display: none; }
  .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lp-hero .wrap, .two-col, .grid-2, .split, .trust-grid, .final .wrap { grid-template-columns: 1fr; }
  .hero-note { max-width: 25rem; margin-top: 1rem; }
  .puzzle-vs { grid-template-columns: 1fr; }
  .vs-arrow { transform: rotate(90deg); justify-self: center; }
  .entry-head, .entry-grid { grid-template-columns: 1fr; }
  .site-nav .hide-s { display: none; }
}
@media (max-width: 560px) {
  .join { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .pieces { gap: 1.4rem 1rem; }
  .piece { font-size: 0.88rem; }
  .meters { grid-template-columns: 1fr; }
  .assets { columns: 1; }
  .price, .guards { grid-template-columns: 1fr; }
  .locks { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0; padding-left: 2rem; }
  .track::before { left: 0.5rem; right: auto; top: 0.3rem; bottom: 0.3rem; width: 3px; height: auto; background: linear-gradient(180deg, var(--ink) 0 72%, var(--sun) 72% 100%); }
  .track .stop::before { top: 0.15rem; left: -2rem; }
  .note { padding-left: 2.9rem; padding-right: 1.1rem; }
  .hand { font-size: 1.42rem; }
  .seal-tag { right: 0.3rem; font-size: 0.82rem; }
  .card-top { flex-direction: column-reverse; }
  .events li { grid-template-columns: 1fr; gap: 0.1rem; }
}

@media print {
  body { background: #fff; color: #1f2a44; }
  .site-head, .site-foot, .no-print, .messages { display: none !important; }
  .app-main { padding: 0; }
  .card-sheet { box-shadow: none; padding: 0; max-width: none; }
}