/* BlinkPitch: light, typographic, one accent (the blink), one green (verified). */
:root {
  --bg: #fbfaf7; --paper: #ffffff; --ink: #14120f; --ink-2: #3d3a34; --muted: #6e6a62; --line: #e4e0d8; --line-2: #cfc9bd;
  --accent: #ff4d2e; --accent-ink: #c8331a; --ok: #178a4c; --ok-bg: #e6f4ec; --warn-bg: #fff4e5; --warn-ink: #8a4b00;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif; --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 10px; --wrap: 1120px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
hr.hair { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f1efe9; padding: 1px 5px; border-radius: 4px; }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.top-in { display: flex; align-items: center; gap: 28px; height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.logo i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); position: relative; display: inline-block; }
.logo i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2.5px; margin-top: -1px; background: var(--accent); border-radius: 2px; }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.on, .nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.top-user { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 15px; }
.top-user form { margin: 0; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: #2a2721; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: #f1efe9; }
.btn-accent { background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.pill.acc { background: #ffe9e4; color: var(--accent-ink); border-color: transparent; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }

.flash { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); font-size: 15px; }
.flash-warn { background: var(--warn-bg); color: var(--warn-ink); }
.err { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r); background: #fdecea; color: #a12a1c; font-size: 15px; }

main.wrap { padding-top: 32px; padding-bottom: 72px; min-height: 60vh; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 36px 0 28px; font-size: 14px; color: var(--muted); }
.foot-in { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot-in a { color: var(--ink-2); text-decoration: none; margin-right: 18px; }
.foot-in a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ landing */
.hero { display: grid; grid-template-columns: 1.1fr 400px; gap: 56px; align-items: center; padding: 28px 0 40px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 22px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .tagline { font-family: var(--serif); font-size: 26px; line-height: 1.2; margin: -8px 0 18px; color: var(--ink-2); }
.hero .tagline em { font-style: italic; color: var(--accent); }
.hero .lead { font-size: 19px; color: var(--ink-2); max-width: 520px; margin-bottom: 22px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.hero .how { font-size: 15px; color: var(--muted); max-width: 520px; }
.hero .how b { color: var(--ink); font-weight: 600; }
.phone-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone-cap { font-size: 13px; color: var(--muted); text-align: center; max-width: 340px; }
.phone-cap kbd { font: 12px/1 var(--sans); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; background: #fff; }

.section { padding: 44px 0 0; }
.section > h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin-bottom: 6px; }
.section > .sub { color: var(--muted); margin-bottom: 20px; max-width: 640px; }

/* typographic ledger of companies */
.ledger { border-top: 1px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: 30px 1.6fr 1fr 1fr .9fr 1.3fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; text-decoration: none; }
.ledger-row:hover { background: #f6f4ee; }
.ledger-row .n { color: var(--muted); font-size: 13px; }
.ledger-row .name b { display: block; font-weight: 600; }
.ledger-row .name span { color: var(--muted); font-size: 14px; }
.ledger-row .dots { position: relative; }
.ledger-row .v { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--ok); }
.ledger-row .v span { display: inline-flex; align-items: center; gap: 4px; }
.ledger-row .v .no { color: var(--muted); }
.tick { width: 14px; height: 14px; fill: var(--ok); vertical-align: -2px; }
.ledger-head { display: grid; grid-template-columns: 30px 1.6fr 1fr 1fr .9fr 1.3fr; gap: 16px; padding: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* verification table */
.vtable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 15px; }
.vtable th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px 8px 0; border-bottom: 1px solid var(--line); }
.vtable td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.vtable td:first-child { font-weight: 600; white-space: nowrap; }
.vtable td.shows { color: var(--ok); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.plain h3 { font-size: 17px; margin-bottom: 6px; }
.plain p { color: var(--ink-2); font-size: 15px; }
.numbered { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; grid-auto-rows: auto; gap: 4px 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--serif); font-size: 22px; color: var(--accent); line-height: 1; grid-column: 1; grid-row: 1 / span 3; }
.numbered li > * { grid-column: 2; }
.numbered li b { display: block; margin-bottom: 2px; }
.numbered li span { color: var(--ink-2); font-size: 15px; }
.price-line { display: flex; gap: 40px; flex-wrap: wrap; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.price-line b { font-family: var(--serif); font-size: 34px; font-weight: 400; }
.price-line span { color: var(--muted); }
.page-h { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; margin-bottom: 10px; }
.page-lead { font-size: 18px; color: var(--ink-2); max-width: 640px; margin-bottom: 28px; }
.prose { max-width: 680px; font-size: 16px; }
.prose h2 { font-size: 22px; margin: 32px 0 8px; }
.prose li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ forms */
.form { max-width: 560px; }
.form-wide { max-width: 860px; }
.field { display: block; margin-bottom: 16px; }
.field > span, .field-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: 15px/1.4 var(--sans); color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field .hint { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.field .cnt { float: right; font-weight: 400; color: var(--muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.radio-cards label { border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; cursor: pointer; display: block; }
.radio-cards label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.radio-cards b { display: block; }
.radio-cards span { font-size: 14px; color: var(--muted); }
.radio-cards input { position: absolute; opacity: 0; }
.auth { max-width: 420px; margin: 24px auto; }
.auth h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; margin-bottom: 18px; }

/* ------------------------------------------------------------------ panels */
.panel { display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.side { position: sticky; top: 84px; align-self: start; }
.side .who { font-weight: 600; margin-bottom: 4px; }
.side .who span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.side nav { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--line); }
.side nav a { padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.side nav a.on { color: var(--ink); font-weight: 600; }
.pane h1 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; margin-bottom: 6px; }
.pane .lead { color: var(--muted); margin-bottom: 24px; }
.stat-row { display: flex; gap: 40px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.stat-row div b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; }
.stat-row div span { font-size: 13px; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--line); }
.check-list li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.check-list li i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; }
.check-list li.ok i { background: var(--ok); border-color: var(--ok); }
.check-list li a { margin-left: auto; font-size: 14px; color: var(--muted); }
.funnel { list-style: none; padding: 0; margin: 0; }
.funnel li { display: grid; grid-template-columns: 26px 150px 1fr 46px; gap: 10px; align-items: center; font-size: 14px; padding: 5px 0; }
.funnel li span:first-child { color: var(--muted); }
.funnel li i { display: block; height: 14px; background: var(--ink); border-radius: 3px; }
.funnel li.low i { background: var(--accent); }
.funnel li b { text-align: right; font-weight: 500; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.spark i { flex: 1; background: var(--line-2); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark i.hi { background: var(--ink); }
.list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.list li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.list li .grow { flex: 1; min-width: 0; }
.list li .grow b { display: block; }
.list li .grow span { font-size: 14px; color: var(--muted); }
.list li .meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.list .av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.pages-list { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--ink); }
.pages-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pages-list li .num { font-family: var(--serif); font-size: 20px; color: var(--muted); }
.pages-list li b { font-weight: 600; }
.pages-list li b span { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 8px; }
.pages-list li .ops { display: flex; gap: 6px; }
.pages-list li .ops form { margin: 0; }
.pages-list li .ops button { border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 4px 8px; font: 13px var(--sans); cursor: pointer; }
.pages-list li .ops button:hover { border-color: var(--ink); }
.pages-list li.empty b { color: var(--muted); font-weight: 400; }
.kind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.kind-grid button { text-align: left; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit; }
.kind-grid button:hover { border-color: var(--ink); }
.kind-grid button b { display: block; font-size: 14px; }
.kind-grid button span { font-size: 12px; color: var(--muted); display: block; line-height: 1.35; }
.editor { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.editor .ph { transform: scale(.86); transform-origin: top center; margin-bottom: -90px; }
.deck-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.vrow { display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.vrow:first-of-type { border-top: 1px solid var(--ink); }
.vrow h3 { font-size: 16px; margin-bottom: 4px; }
.vrow .how { font-size: 14px; color: var(--muted); }
.vrow .st { text-align: right; }
.vrow .st form { margin-top: 6px; }
.vrow .data { font-size: 14px; margin-top: 6px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.inline-form input, .inline-form select { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; font: 14px var(--sans); }
.consent { max-width: 480px; margin: 20px auto; border: 1px solid var(--line-2); border-radius: 14px; padding: 28px; background: #fff; }
.consent .brand { font-weight: 600; font-size: 18px; margin-bottom: 14px; }
.consent ul { padding-left: 18px; font-size: 15px; }
.consent .ret { background: #f6f4ee; border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 14px 0; }
.thread { max-width: 720px; }
.thread .ctx { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 20px; font-size: 14px; }
.msgs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: #f1efe9; font-size: 15px; }
.msg.me { align-self: flex-end; background: var(--ink); color: #fff; }
.msg span { display: block; font-size: 12px; opacity: .65; margin-top: 4px; }
.msg-form textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font: 15px var(--sans); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--ink); }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table form { margin: 0; display: inline; }
.table .btn-sm { padding: 4px 10px; font-size: 13px; }
.review { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.review h3 { font-size: 16px; }
.review .meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.review p { font-size: 15px; margin-bottom: 8px; }
.review form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review form input[type=text] { flex: 1; min-width: 200px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 6px; font: 14px var(--sans); }
.empty { padding: 28px 0; color: var(--muted); }

/* ------------------------------------------------------------------ phone */
.ph { width: 360px; height: 720px; border-radius: 44px; background: #14120f; padding: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 0 0 1px #2a2620; position: relative; user-select: none; outline: none; flex: none; }
.ph:focus-visible { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 0 0 3px var(--accent); }
.ph-screen { width: 100%; height: 100%; border-radius: 34px; background: #f4f2ec; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 18px 18px 8px; font-size: 13px; color: var(--muted); }
.ph-brand { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ph-brand i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); position: relative; }
.ph-brand i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: var(--accent); }
.ph-count { margin-left: auto; }
.ph-filter { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 10px; font: 12px var(--sans); cursor: pointer; }
.ph-stack { flex: 1; position: relative; margin: 6px 14px 0; }
.card { position: absolute; inset: 0; background: #fff; border-radius: 22px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3), 0 0 0 1px var(--line); overflow: hidden; transition: transform .22s ease, opacity .22s; cursor: pointer; touch-action: none; }
.card.fly { opacity: 0; transition: transform .28s ease, opacity .28s; }
.card-stamp { position: absolute; top: 22px; padding: 4px 10px; border: 2px solid; border-radius: 6px; font: 700 15px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; opacity: 0; transform: rotate(-12deg); transition: opacity .12s; }
.card-stamp.pass { left: 18px; color: #7a7570; border-color: #7a7570; }
.card-stamp.blink { right: 18px; color: var(--accent); border-color: var(--accent); transform: rotate(12deg); }
.card.to-pass .card-stamp.pass, .card.to-blink .card-stamp.blink { opacity: 1; }
.ph-actions { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px 20px; }
.act { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 9px 14px; font: 500 13px var(--sans); cursor: pointer; color: var(--ink); }
.act svg { width: 18px; height: 18px; }
.act.pass { color: #5d5851; }
.act.blink { color: var(--accent); border-color: var(--accent); }
.act.blink:hover { background: var(--accent); color: #fff; }
.act.open { background: var(--ink); color: #fff; border-color: var(--ink); }
.ph-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 24px; }
.ph-empty p { font-size: 14px; color: var(--muted); }
.ph-empty button { align-self: center; border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 14px; font: 13px var(--sans); cursor: pointer; }

/* pages */
.pg { padding: 18px 18px 14px; height: 100%; overflow: auto; font-size: 13.5px; line-height: 1.45; color: var(--ink); scrollbar-width: thin; }
.pg h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.12; margin: 2px 0 12px; letter-spacing: 0; }
.pg-kind { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.pg .txt { color: var(--ink-2); }
.pg .note { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.pts { list-style: none; padding: 0; margin: 0; }
.pts li { padding: 7px 0 7px 18px; border-top: 1px solid var(--line); position: relative; }
.pts li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.pts.ok li::before { background: var(--ok); }
.pts.price li::before { background: var(--accent); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 20px; color: var(--accent); line-height: 1.1; }
.pg-cover { display: flex; flex-direction: column; }
.cv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cv-logo { width: 44px; height: 44px; border-radius: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none; }
.cv-head b { display: block; font-size: 17px; }
.cv-head span { font-size: 12px; color: var(--muted); }
.cv-tag { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin: 0 0 14px; }
.cv-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.cv-metrics.grid { grid-template-columns: 1fr 1fr; }
.cv-m { background: #f6f4ee; border-radius: 10px; padding: 9px 10px; }
.cv-m b { display: block; font-size: 16px; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-m span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cv-m.ok { background: var(--ok-bg); }
.cv-m.ok b { color: var(--ok); }
.cv-hook { color: var(--ink-2); margin: 0 0 12px; padding-left: 10px; border-left: 2px solid var(--accent); }
.cv-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cv-foot b { display: block; color: var(--ink); font-size: 13px; }
.cv-badges { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 11px; color: var(--ok); }
.cv-badges span { display: inline-flex; align-items: center; gap: 3px; }
.cv-badges.none { color: var(--muted); }
.cv-pages { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: right; }
.bars { width: 100%; margin-top: 10px; }
.bars rect { fill: var(--ink); }
.bars text { font: 10px var(--sans); fill: var(--muted); }
.mkt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mkt div { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding: 8px 0; }
.mkt b { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.mkt span { font-size: 12px; color: var(--muted); }
.tb { width: 100%; border-collapse: collapse; font-size: 12px; }
.tb th { text-align: left; font-weight: 500; color: var(--muted); font-size: 10.5px; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line-2); }
.tb td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tb td:first-child { font-weight: 600; }
.logos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.logos span { border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.pg blockquote { margin: 0 0 10px; padding: 10px 12px; background: #f6f4ee; border-radius: 10px; font-family: var(--serif); font-size: 16px; line-height: 1.3; }
.pg blockquote cite { display: block; font: 11px var(--sans); color: var(--muted); font-style: normal; margin-top: 6px; }
.team { list-style: none; padding: 0; margin: 0; }
.team li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.team .av { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.team b { font-size: 13.5px; }
.team i { font-style: normal; color: var(--muted); font-size: 12px; }
.team span { display: block; font-size: 12px; color: var(--ink-2); }
.tl { list-style: none; padding: 0; margin: 0; }
.tl li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.tl li span { color: var(--muted); }
.tl li.done span { color: var(--ok); }
.tl li.done b::after { content: " ✓"; color: var(--ok); }
.tl li b { font-weight: 500; }
.ask-amt { font-family: var(--serif); font-size: 34px; line-height: 1; margin: 0 0 14px; }
.ask-amt span { font: 12px var(--sans); color: var(--muted); margin-left: 6px; }
.uof { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.uof i { display: block; height: 10px; background: var(--ink); border-radius: 3px; }
.uof b { text-align: right; font-weight: 500; }

/* deck viewer */
.ph-deck { position: absolute; inset: 0; background: #fff; z-index: 20; display: flex; flex-direction: column; }
.dk-bars { display: flex; gap: 3px; padding: 12px 14px 0; }
.dk-bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.dk-bars i.seen { background: var(--ink); }
.dk-bars i.now { background: var(--accent); }
.dk-page { flex: 1; min-height: 0; position: relative; }
.dk-page .pg { padding-top: 14px; }
.dk-tap { position: absolute; top: 40px; bottom: 70px; width: 30%; z-index: 21; cursor: pointer; }
.dk-tap.l { left: 0; }
.dk-tap.r { right: 0; }
.dk-close { position: absolute; top: 20px; right: 12px; z-index: 22; border: 0; background: rgba(20, 18, 15, .08); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; color: var(--ink); }
.dk-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 18px; border-top: 1px solid var(--line); }
.dk-num { font-size: 12px; color: var(--muted); }

/* filter sheet */
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 60px; background: #fff; border-radius: 22px 22px 0 0; z-index: 30; box-shadow: 0 -10px 30px rgba(0, 0, 0, .12); overflow: auto; }
.sh-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; font-size: 15px; }
.sh-close { border: 0; background: #f1efe9; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.sh-form { padding: 0 18px 18px; }
.sh-form fieldset { border: 0; padding: 10px 0; margin: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.sh-form legend { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: 4px; width: 100%; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.chk input { margin: 0; accent-color: var(--ink); }
.chk:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.sel { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 4px; }
.sel select { font: 13px var(--sans); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-2); }
.sh-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.sh-actions button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 8px 14px; font: 500 13px var(--sans); cursor: pointer; }
.sh-actions .btn-blink { background: var(--ink); color: #fff; border-color: var(--ink); }
.ph-toast { position: absolute; left: 14px; right: 14px; bottom: 84px; z-index: 40; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.ph-toast a { color: #fff; font-weight: 600; white-space: nowrap; }
.ph-toast b { font-weight: 600; }

/* app page */
.app-body main.wrap { padding-top: 20px; }
.app-layout { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.app-aside h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin-bottom: 6px; }
.app-aside p { color: var(--muted); font-size: 15px; }
.keys { list-style: none; padding: 0; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.keys li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.keys kbd { font: 12px/1 var(--sans); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px; background: #fff; min-width: 26px; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips span { font-size: 12px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 44px; }
  .two, .three, .panel, .editor, .deck-layout, .app-layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .ledger-row, .ledger-head { grid-template-columns: 24px 1.4fr 1fr 1fr; }
  .ledger-row .hide, .ledger-head .hide { display: none; }
  .vrow { grid-template-columns: 1fr; }
  .vrow .st { text-align: left; }
  .kind-grid { grid-template-columns: 1fr 1fr; }
  .editor .ph { transform: none; margin-bottom: 0; }
}
@media (max-width: 600px) {
  .nav { display: none; }
  .hero h1 { font-size: 36px; }
  .ph { width: 100%; max-width: 360px; height: 680px; }
  .row, .row3, .radio-cards, .kind-grid { grid-template-columns: 1fr; }
  .ledger-row, .ledger-head { grid-template-columns: 24px 1fr 1fr; }
  .ledger-row .hide2, .ledger-head .hide2 { display: none; }
}

/* ------------------------------------------------------------------ landing: hero phone + modal */
.btn-lg { padding: 13px 22px; font-size: 16px; }
.hero-phone { position: relative; width: 340px; height: 520px; margin: 0 auto; cursor: pointer; outline: none; }
.hero-phone:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: 26px; }
.hero-stack { position: absolute; inset: 0; }
.hero-card { position: absolute; inset: 0; background: #fff; border-radius: 22px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3), 0 0 0 1px var(--line); overflow: hidden; transform: translateY(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .035)) rotate(calc(var(--i) * -2deg)); transform-origin: 50% 100%; pointer-events: none; }
.hero-card .pg { font-size: 13.5px; }
.hero-play { position: absolute; left: 0; right: 0; bottom: -14px; display: flex; justify-content: center; }
.hero-play span { background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.hero-phone:hover .hero-play span { background: var(--accent); }
.steps4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; border-top: 1px solid var(--ink); }
.steps4 li { grid-template-rows: auto auto auto; }
.steps4 li b, .steps4 li span, .steps4 li .see { grid-column: 2; }
.steps4 li::before { grid-row: 1 / span 3; }
.steps4 li .see { justify-self: start; margin-top: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 5px 12px; font: 500 13px var(--sans); cursor: pointer; }
.steps4 li .see:hover { border-color: var(--ink); }
body.modal-open { overflow: hidden; }
.appmodal { position: fixed; inset: 0; z-index: 100; }
.am-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 15, .78); backdrop-filter: blur(4px); }
.am-body { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px; }
.am-phone { flex: none; transform-origin: 0 0; }
.am-phone .ph { position: absolute; top: 0; left: 0; }
.am-phone { position: relative; }
.am-guide { width: 340px; color: #fff; position: relative; }
.am-close { position: absolute; top: -40px; right: 0; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.am-close:hover { background: rgba(255, 255, 255, .25); }
.am-role { font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 4px; min-height: 18px; }
.am-title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; margin-bottom: 10px; }
.am-text { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); min-height: 90px; }
.am-jump { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.am-jump b { width: 100%; font-size: 12px; color: rgba(255, 255, 255, .6); font-weight: 500; margin-bottom: 2px; }
.am-jump button { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; border-radius: 999px; padding: 5px 11px; font: 13px var(--sans); cursor: pointer; }
.am-jump button:hover { background: rgba(255, 255, 255, .15); }
.am-keys { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .6); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.am-keys kbd { font: 12px/1 var(--sans); border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; padding: 3px 6px; color: #fff; }
@media (max-width: 860px) {
  .am-body { flex-direction: column; gap: 16px; overflow: auto; justify-content: flex-start; padding-top: 56px; }
  .am-guide { width: 100%; max-width: 360px; }
  .am-close { top: -44px; right: 0; }
  .am-text { min-height: 0; }
  .steps4 { grid-template-columns: 1fr; }
  .hero-phone { width: 300px; height: 470px; }
}

/* ------------------------------------------------------------------ phone: app shell */
.ph-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ph-tabs { display: flex; border-top: 1px solid var(--line); background: #fff; padding: 6px 6px 12px; flex: none; }
.ph-tabs button { flex: 1; border: 0; background: none; color: var(--muted); font: 10.5px var(--sans); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; cursor: pointer; position: relative; }
.ph-tabs button svg { width: 22px; height: 22px; }
.ph-tabs button.on { color: var(--ink); }
.ph-tabs button i { position: absolute; top: 0; left: 50%; margin-left: 6px; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; font-weight: 600; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.ph-title { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; }
.ph-top .av.sm { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-right: 6px; }
.ph-back { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; padding: 0 8px 0 0; }
.ph-mini { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 10px; font: 12px var(--sans); cursor: pointer; white-space: nowrap; }
.ph-mini.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ph-live { font-size: 11px; color: var(--ok); background: var(--ok-bg); border-radius: 999px; padding: 2px 8px; }
.ph-btn { display: block; width: 100%; border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 14px; font: 500 13px var(--sans); cursor: pointer; margin-top: 10px; }
.ph-link { display: block; margin: 12px auto; border: 0; background: none; font: 12.5px var(--sans); color: var(--muted); text-decoration: underline; cursor: pointer; }
.ph-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0 0 10px; }
.ph-note.pad { padding: 0 18px; }
.ph-welcome { padding: 60px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; overflow: auto; }
.ph-brand.big { font-size: 20px; margin-bottom: 8px; }
.ph-brand.big i { width: 20px; height: 20px; }
.ph-welcome p { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.wl-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.wl-card b { display: block; font-size: 14px; }
.wl-card span { display: block; font-size: 12px; color: var(--muted); margin: 3px 0 10px; }
.wl-card button { width: 100%; border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: 9px; font: 500 13px var(--sans); cursor: pointer; }
.wl-card + .wl-card button { background: var(--accent); }
.ph-list { list-style: none; margin: 0; padding: 0 12px; overflow: auto; flex: 1; }
.ph-list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.ph-list li > div { flex: 1; min-width: 0; }
.ph-list li b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-list li span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-list li em { font-style: normal; font-size: 11px; color: var(--muted); }
.ph-list li button { border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px; padding: 5px 10px; font: 12px var(--sans); cursor: pointer; }
.ph-list .av { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.ph-list .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 4px; }
.ph-list.pages li .num { font-family: var(--serif); font-size: 18px; color: var(--muted); width: 26px; }
.ph-list.verify li { cursor: default; align-items: flex-start; }
.ph-list.verify li em { display: inline-block; font-size: 11px; margin-left: 6px; color: var(--muted); vertical-align: 1px; }
.ph-list.verify li em.ok { color: var(--ok); }
.ph-list.verify li em.wait { color: var(--warn-ink); }
.ph-list.verify li b, .ph-list.verify li span { white-space: normal; }
.ph-empty.static { position: static; flex: 1; }
.ph-empty.static button { margin-top: 8px; }
.ph-msgs { flex: 1; overflow: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.ph-msg { max-width: 82%; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 11px; font-size: 12.5px; line-height: 1.4; align-self: flex-start; }
.ph-msg.me { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.ph-msg span { display: block; font-size: 10px; opacity: .55; margin-top: 3px; }
.ph-compose { display: flex; gap: 6px; padding: 8px 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.ph-compose input { flex: 1; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; font: 13px var(--sans); min-width: 0; }
.ph-compose button { border: 0; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 14px; font: 500 13px var(--sans); cursor: pointer; }
.ph-invcard { font-size: 11.5px; color: var(--muted); padding: 0 18px 8px; border-bottom: 1px solid var(--line); }
.ph-prof { padding: 4px 18px 16px; overflow: auto; flex: 1; }
.ph-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ph-who .av { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.ph-who b { display: block; font-size: 15px; }
.ph-who span { font-size: 12px; color: var(--muted); }
.ph-prof dl { margin: 0 0 14px; font-size: 12.5px; }
.ph-prof dt { color: var(--muted); font-size: 11px; margin-top: 8px; }
.ph-prof dd { margin: 0; }
.ph-prof h4, .ph-stats h4 { font-size: 12px; margin: 14px 0 6px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ph-chips span { font-size: 11px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; }
.ph-fcover { display: flex; gap: 10px; padding: 4px 14px 10px; align-items: flex-start; }
.mini-card { width: 150px; height: 230px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; flex: none; }
.mini-card .pg { transform: scale(.5); transform-origin: 0 0; width: 300px; height: 460px; padding: 16px; }
.mini-side { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; flex: 1; }
.mini-side b { color: var(--ink); font-size: 15px; }
.ph-stats { padding: 0 18px 16px; overflow: auto; flex: 1; }
.ph-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-nums div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ph-nums b { display: block; font-family: var(--serif); font-size: 24px; line-height: 1; }
.ph-nums span { font-size: 11px; color: var(--muted); }
.ph-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.ph-spark i { flex: 1; background: var(--line-2); border-radius: 2px 2px 0 0; min-height: 2px; }
.ph-spark i.hi { background: var(--ink); }
.ph-funnel { list-style: none; padding: 0; margin: 0; }
.ph-funnel li { display: grid; grid-template-columns: 16px 88px 1fr 34px; gap: 6px; align-items: center; font-size: 11px; padding: 3px 0; }
.ph-funnel li span:first-child { color: var(--muted); }
.ph-funnel li i { display: block; height: 10px; background: var(--ink); border-radius: 3px; }
.ph-funnel li.low i { background: var(--accent); }
.ph-funnel li b { text-align: right; font-weight: 500; }
.ph-consent { padding: 10px 18px 16px; overflow: auto; flex: 1; font-size: 12.5px; }
.ph-consent ul { padding-left: 16px; margin: 0 0 10px; }
.ph-consent li { margin-bottom: 4px; }
.ph-ret { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-bottom: 8px; }
.ph-ret span { color: var(--muted); font-size: 11px; }
.ph-deck.no-actions .dk-actions .act { visibility: hidden; }
.ph-app .ph-stack { margin-bottom: 0; }