/* Layout concept: a civic "front door". A thin browser bar on top, a calm paper page, navy for the
   agency side, blue for action, and the logo gradient used only as a thin rule and on the mark. */
:root {
  --bg: #f8f9fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --fg: #0e1b2c;
  --muted: #55627a;
  --line: #dfe4ec;
  --blue: #1670c9;
  --blue-strong: #0f5aa6;
  --blue-soft: #e3eefb;
  --navy: #0e1b2c;
  --navy-2: #16273d;
  --on-navy: #eef3fa;
  --on-navy-muted: #9fb0c6;
  --good: #1d7f55;
  --good-soft: #e1f3ea;
  --warn: #9a6400;
  --warn-soft: #fbf0d9;
  --bad: #b23a34;
  --bad-soft: #fbe6e4;
  --grad: linear-gradient(90deg, #d4537e, #8a5cc0 50%, #2f74d8);
  --shadow: 0 1px 2px rgba(14, 27, 44, .06), 0 8px 24px rgba(14, 27, 44, .08);
  /* Poppins is the VerumLink brand typeface: it is what the dashboard, the app and
     every email template use, so the website matches the product. The mockup this
     layout came from used Inter Tight / Inter / JetBrains Mono; --display, --body
     and --mono all resolve to Poppins here so no rule has to be rewritten. */
  --display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 10px;
}



* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--navy); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.95rem, 4.1vw, 3.05rem); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: .88em; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.eyebrow { font-size: .78rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 12px; }
.rule { height: 4px; width: 96px; border-radius: 2px; background: var(--grad); }

/* ---------- (prototype browser bar removed: this is the real site) ---------- */

/* ---------- Site header ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
.logo img { height: 26px; width: auto; display: block; }
.logo .on-dark { display: none; }



.navlinks { display: flex; gap: 4px; margin-left: 8px; }
.navlinks a { color: var(--fg); text-decoration: none; font-size: .94rem; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.navlinks a:hover, .navlinks a[aria-current="page"] { background: var(--surface-2); }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn.menu-btn { display: none; }
@media (max-width: 920px) {
  .navlinks { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-left, 0px)); }
  .navlinks.open { display: flex; }
  .btn.menu-btn { display: inline-flex; }
  .head-actions .signin { display: none; }
}

/* ---------- Buttons, chips, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-strong); }


.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-quiet { background: transparent; color: var(--blue); padding: 0 8px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: .875rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.blue { background: var(--blue-soft); color: var(--blue-strong); }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.paid { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: .86rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--muted); }
.field .err { font-size: .82rem; color: var(--bad); font-weight: 500; }
.input, select.input, textarea.input { height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0 12px; width: 100%; }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.toggle { position: relative; width: 42px; height: 24px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle input:checked + span { background: var(--blue); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Generic sections ---------- */
.section { padding-block: 72px; }
.section.tight { padding-block: 48px; }
.section.navy { background: var(--navy); color: var(--on-navy); }
.section.navy .muted { color: var(--on-navy-muted); }
.section.navy .eyebrow { color: #8cbdf5; }
.section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 36px; }
.sec-head p { font-size: 1.08rem; color: var(--muted); }
.section.navy .sec-head p { color: var(--on-navy-muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.callout { border-left: 3px solid var(--blue); background: var(--blue-soft); padding: 14px 16px; border-radius: 0 8px 8px 0; font-size: .93rem; }
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.note-illus { font-size: .78rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding-block: 56px 64px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.hero .lede { font-size: 1.15rem; color: var(--muted); max-width: 54ch; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .chips .chip { font-size: .82rem; padding: 5px 11px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Stage (animated product illustrations) ---------- */
.stage { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; overflow: hidden; }
.stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.stage-foot button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: .78rem; cursor: pointer; color: var(--fg); }
.stage [data-at] { transition: opacity .45s ease, transform .45s ease, background .3s, color .3s, border-color .3s; }
.stage.playing [data-at].pending { opacity: 0; transform: translateY(8px); }
.stage .hot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .stage [data-at] { transition: none; } }

.flow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.95fr); gap: 14px; align-items: stretch; }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow .phone { max-width: 260px; margin: 0 auto; } }
.flow h5 { margin: 0 0 8px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.channels { display: flex; flex-direction: column; gap: 6px; }
.channel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .82rem; font-weight: 550; background: var(--bg); }
.channel svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.channel.soon { opacity: .6; border-style: dashed; }
.channel.soon small { margin-left: auto; font-size: .66rem; color: var(--muted); font-weight: 600; }
.mini-inbox { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 230px; }
.mini-rec { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .78rem; display: flex; flex-direction: column; gap: 3px; }
.mini-rec .top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.mini-rec .route { color: var(--good); font-weight: 600; font-size: .74rem; }
.phone { border: 2px solid var(--fg); border-radius: 22px; padding: 12px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; font-size: .76rem; }
.phone .notch { width: 50px; height: 5px; border-radius: 3px; background: var(--fg); opacity: .8; margin: 0 auto 4px; }
.track-mini { display: flex; flex-direction: column; gap: 0; }
.tm-step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; position: relative; padding-bottom: 10px; }
.tm-step:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.tm-step .b { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.tm-step.on .b { background: var(--good); border-color: var(--good); }
.tm-step.on .b::after { content: ""; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.tm-step.now .b { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tm-step .t { font-weight: 600; }
.tm-step .s { color: var(--muted); font-size: .7rem; }

/* ---------- What-is vs should-be ---------- */
.versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 820px) { .versus { grid-template-columns: minmax(0, 1fr); } }
.versus .card h3 { margin-bottom: 14px; }
.scatter { display: flex; flex-direction: column; gap: 8px; }
.scatter li, .unified li { list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: .94rem; }
.scatter, .unified { padding: 0; margin: 0; }
.unified { display: flex; flex-direction: column; gap: 8px; }
.x { color: var(--bad); font-weight: 700; } .ok { color: var(--good); font-weight: 700; }

/* ---------- Facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.facts > div { padding: 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.facts > div:first-child { border-left: 0; }
.facts b { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts span { font-size: .88rem; color: var(--muted); }
@media (max-width: 820px) { .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .facts > div:nth-child(3) { border-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding-block: 40px; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip > :first-child { order: 2; }
.feature ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 24px; } .feature.flip > :first-child { order: 0; } }

.steps-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.steps-4 .card { display: flex; flex-direction: column; gap: 8px; }
.steps-4 .num { font-family: var(--mono); font-size: .78rem; color: var(--blue); font-weight: 600; }
@media (max-width: 900px) { .steps-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .steps-4 { grid-template-columns: minmax(0, 1fr); } }
.section.navy .card { background: var(--navy-2); border-color: #26384f; color: var(--on-navy); }
.section.navy .card .muted { color: var(--on-navy-muted); }
.section.navy .steps-4 .num { color: #8cbdf5; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 650; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 70ch; }

/* Closing CTA + footer */
.closing { text-align: left; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
@media (max-width: 820px) { .closing { grid-template-columns: minmax(0, 1fr); } }
.foot { background: var(--navy); color: var(--on-navy-muted); padding-block: 48px 32px; font-size: .9rem; }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot h4 { color: var(--on-navy); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.foot a { color: var(--on-navy-muted); text-decoration: none; display: block; padding: 3px 0; }
.foot a:hover { color: #fff; }
.foot .legal { border-top: 1px solid #26384f; margin-top: 32px; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .8rem; }
.foot img { height: 24px; margin-bottom: 12px; }
@media (max-width: 760px) { .foot .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Start flow ---------- */
.start-wrap { max-width: 760px; margin: 0 auto; padding-block: 48px 72px; display: flex; flex-direction: column; gap: 24px; }
.progress { display: flex; gap: 6px; }
.progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress span.on { background: var(--blue); }
.search-box { position: relative; }
.search-box .input { height: 56px; font-size: 1.1rem; padding-left: 46px; }
.search-box svg { position: absolute; left: 15px; top: 18px; width: 20px; height: 20px; color: var(--muted); }
.tip { position: relative; display: flex; gap: 10px; align-items: flex-start; background: var(--navy); color: var(--on-navy); padding: 12px 14px; border-radius: 10px; font-size: .9rem; }
.tip::before { content: ""; position: absolute; top: -6px; left: 28px; width: 12px; height: 12px; background: var(--navy); transform: rotate(45deg); }
.tip button { background: #1f3550; color: #fff; border: 0; border-radius: 6px; padding: 2px 8px; margin: 2px 2px; cursor: pointer; font-size: .85rem; }
.results { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.result { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; width: 100%; }
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus-visible { background: var(--surface-2); }
.badge-mark { width: 40px; height: 40px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; font-weight: 700; flex: none; }
.agency-card { display: flex; gap: 14px; align-items: center; }
.whats-next { background: var(--navy); color: var(--on-navy); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.whats-next .muted { color: var(--on-navy-muted); }
.whats-next ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.whats-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #26384f; }
.whats-next li .n { width: 26px; height: 26px; border-radius: 50%; background: #1f3550; color: #8cbdf5; display: grid; place-items: center; font-family: var(--mono); font-size: .78rem; font-weight: 700; }
.whats-next li b { display: block; color: #fff; font-size: .92rem; }
.whats-next li span { color: var(--on-navy-muted); font-size: .9rem; }
pre.code { background: var(--navy); color: #d7e3f2; border-radius: 10px; padding: 14px; font-family: var(--mono); font-size: .8rem; overflow-x: auto; margin: 0; white-space: pre; }
.whats-next pre.code { background: #07101b; }

/* ---------- Mail client ---------- */
.mail { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 640px; border-top: 1px solid var(--line); }
.mail-list { border-right: 1px solid var(--line); background: var(--surface); }
.mail-item { display: block; width: 100%; text-align: left; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.mail-item[aria-current="true"] { background: var(--blue-soft); }
.mail-item b { display: block; font-size: .9rem; }
.mail-item span { font-size: .82rem; color: var(--muted); }
.mail-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; min-width: 0; }
.mail-meta { font-size: .85rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
@media (max-width: 760px) { .mail { grid-template-columns: minmax(0, 1fr); } .mail-list { border-right: 0; } }

/* ---------- QR poster ---------- */
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .posters { grid-template-columns: minmax(0, 1fr); } }
.poster { background: #fff; color: #0e1b2c; border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.poster .agency { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.poster h4 { font-size: 1.05rem; color: #0e1b2c; }
.poster p { font-size: .8rem; color: #47546a; }
.poster svg.qr { width: 120px; height: 120px; }
.poster .stripe { width: 100%; height: 6px; border-radius: 3px; }

/* ---------- Portal ---------- */
.portal { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--navy); color: var(--on-navy); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.side .ag { display: flex; gap: 10px; align-items: center; padding: 6px 8px 14px; border-bottom: 1px solid #26384f; margin-bottom: 8px; }
.side .ag .badge-mark { background: var(--brand, #1670c9); width: 34px; height: 34px; overflow: hidden; }
.side .ag .badge-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.side .ag b { font-size: .86rem; line-height: 1.2; display: block; }
.side .ag span { font-size: .72rem; color: var(--on-navy-muted); }
.side a { color: var(--on-navy-muted); text-decoration: none; padding: 8px 10px; border-radius: 7px; font-size: .9rem; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.side a:hover { color: #fff; background: #16273d; }
.side a[aria-current="page"] { color: #fff; background: #1f3550; }
.side a .count { font-family: var(--mono); font-size: .72rem; background: #26384f; border-radius: 999px; padding: 1px 7px; color: #fff; }
.side a .pl { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #8cbdf5; }
.side .grp { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #6c809b; padding: 14px 10px 4px; }
.side .out { margin-top: auto; padding-top: 12px; border-top: 1px solid #26384f; }
.pmain { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.phead h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
.sample-note { font-size: .8rem; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 8px 12px; }
@media (max-width: 860px) {
  .portal { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; overflow-x: auto; gap: 4px; padding: 8px max(16px, env(safe-area-inset-left, 0px)); }
  .side .ag, .side .grp, .side .out { display: none; }
  .side a { white-space: nowrap; }
  .pmain { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
}
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi b { font-family: var(--display); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 7px 12px; font-size: .84rem; cursor: pointer; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-strong); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th { text-align: left; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.mono, table.t td.nw { white-space: nowrap; }
table.t tbody tr.click { cursor: pointer; }
table.t tbody tr.click:hover { background: var(--surface-2); }
table.t tr.new td { animation: flash 2.4s ease; }
@keyframes flash { 0%, 40% { background: var(--blue-soft); } 100% { background: transparent; } }
.empty { padding: 32px; text-align: center; color: var(--muted); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.timeline { display: flex; flex-direction: column; gap: 0; }
.ev { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding: 10px 0; position: relative; }
.ev::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: -4px; width: 2px; background: var(--line); }
.ev:last-child::before { display: none; }
.ev .pip { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--good); }
.ev.internal .pip { background: var(--warn); }
.ev .meta { font-size: .78rem; color: var(--muted); }
.ev.internal .body { background: var(--warn-soft); border-radius: 8px; padding: 8px 10px; }
.stepper { display: flex; gap: 0; }
.stepper div { flex: 1; text-align: center; font-size: .72rem; color: var(--muted); position: relative; padding-top: 22px; }
.stepper div::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--line); z-index: 1; }
.stepper div::after { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.stepper div:first-child::after { display: none; }
.stepper .done::before, .stepper .done::after, .stepper .current::after { background: var(--good); }
.stepper .current::before { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.stepper .current { color: var(--fg); font-weight: 650; }
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rule-row:last-child { border-bottom: 0; }
.rule-row small { display: block; color: var(--muted); font-size: .8rem; }
.recips { display: flex; flex-direction: column; gap: 8px; }
.recip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.recip .av { width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-strong); display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.recip small { display: block; color: var(--muted); font-size: .78rem; }
.body-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.body-card { display: flex; flex-direction: column; gap: 8px; }
.body-card .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.barrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: .86rem; }
.barrow .track { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.barrow .fill { height: 100%; background: var(--blue); border-radius: 6px; }
.barrow .fill.alt { background: var(--good); }
.barrow b { text-align: right; font-variant-numeric: tabular-nums; }
.wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.wizard-steps button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: .84rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wizard-steps button[aria-current="step"] { border-color: var(--blue); color: var(--blue-strong); font-weight: 650; }
.wizard-steps button.done { color: var(--good); }
.preview-widget { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; color: #0e1b2c; }
.preview-widget .hd { padding: 14px 16px; color: #fff; display: flex; gap: 10px; align-items: center; }
.preview-widget .hd img { height: 28px; width: 28px; object-fit: contain; background: #fff; border-radius: 6px; }
.preview-widget .bd { padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; }
.preview-widget .opt { border: 1px solid #d9e0ea; border-radius: 8px; padding: 10px; }
.preview-widget .go { color: #fff; border-radius: 8px; padding: 10px; text-align: center; font-weight: 600; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); }
.toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 80; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* Workflow note: what would happen on the server */
.wf { border: 1px dashed var(--blue); background: var(--blue-soft); border-radius: 10px; padding: 14px 16px; font-size: .88rem; display: flex; flex-direction: column; gap: 6px; }
.wf b.lbl { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-strong); }
.wf ul { margin: 0; padding-left: 18px; }

/* Agency site mock (for the widget demo) */
.agsite { background: #f3f1ec; color: #222; min-height: 100vh; }
.agsite .ahead { background: #26323f; color: #fff; padding: 14px 0; }
.agsite .ahead .wrap { display: flex; gap: 14px; align-items: center; }
.agsite .ahead .seal { width: 36px; height: 36px; border-radius: 50%; background: #c9a54a; color: #26323f; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.agsite .anav { background: #fff; border-bottom: 1px solid #ddd; font-size: .85rem; }
.agsite .anav .wrap { display: flex; gap: 18px; padding-block: 10px; color: #555; overflow-x: auto; }
.agsite .acontent { padding-block: 32px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
@media (max-width: 860px) { .agsite .acontent { grid-template-columns: minmax(0, 1fr); } }
.agsite h1 { font-size: 1.8rem; color: #26323f; }
.vlw { background: #fff; color: #0e1b2c; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); overflow: hidden; }
.vlw .hd { padding: 14px 18px; color: #fff; }
.vlw .bd { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.vlw .input { background: #fff; color: #0e1b2c; border-color: #cfd6e0; }
.vlw .field .hint { color: #5a6578; }
.vlw .choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.vlw .choice label { border: 2px solid #d9e0ea; border-radius: 10px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.vlw .choice input { position: absolute; opacity: 0; }
.vlw .choice label:has(input:checked) { border-color: var(--wbrand, #1670c9); background: color-mix(in srgb, var(--wbrand, #1670c9) 8%, #fff); }
.vlw .choice label:has(input:focus-visible) { outline: 3px solid var(--wbrand, #1670c9); }
.vlw .foot-note { font-size: .74rem; color: #5a6578; display: flex; justify-content: space-between; gap: 8px; }
.sigpad { border: 1px dashed #9aa6b8; border-radius: 8px; height: 90px; background: #fafbfd; position: relative; touch-action: none; }
.sigpad canvas { width: 100%; height: 100%; display: block; }
.sigpad span { position: absolute; left: 12px; bottom: 8px; font-size: .72rem; color: #8a95a8; pointer-events: none; }

/* Tracker page */
.tracker { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .tracker { grid-template-columns: minmax(0, 1fr); } }
.big-steps { display: flex; flex-direction: column; }
.big-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; position: relative; }
.big-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.big-step.done:not(:last-child)::before { background: var(--good); }
.big-step .b { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.big-step.done .b { background: var(--good); border-color: var(--good); color: #fff; }
.big-step.current .b { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.big-step h4 { font-size: 1.05rem; }
.big-step p { color: var(--muted); font-size: .92rem; }
.big-step.todo h4 { color: var(--muted); font-weight: 550; }
.app-phone { width: 290px; max-width: 100%; margin: 0 auto; border: 10px solid #0e1b2c; border-radius: 38px; background: var(--surface); padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.app-phone .sb { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 600; }

/* Pricing */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 920px; }
.plans .card { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.plans .card.feature-plan { border: 2px solid var(--blue); }
.plans ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.plans li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: .94rem; }
.plans .price { font-family: var(--display); font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Reviewer docs */
.doc { max-width: 900px; margin: 0 auto; padding-block: 40px 80px; display: flex; flex-direction: column; gap: 22px; }
.doc h2 { font-size: 1.5rem; margin-top: 18px; }
.doc ul, .doc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.doc .banner { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 12px 16px; font-size: .9rem; font-weight: 550; }
.crit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.crit .card h4 { margin-bottom: 6px; }
.crit .card p { font-size: .92rem; color: var(--muted); }
@media (max-width: 760px) { .crit { grid-template-columns: minmax(0, 1fr); } }
.sev { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sev.h { color: var(--bad); } .sev.m { color: var(--warn); }
.steps-4.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .steps-4.steps-3 { grid-template-columns: minmax(0, 1fr); } }
/* v2: light-only theme, custom chrome, and the scene system for animated product illustrations.
   Loaded after styles.css. Motion uses transform and opacity only, ease-out curves, no bounce. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --shadow-lg: 0 1px 1px rgba(14,27,44,.04), 0 4px 10px rgba(14,27,44,.05), 0 24px 48px -12px rgba(14,27,44,.14); }
body { font-feature-settings: "cv11", "ss01", "calt"; }
h1 { font-size: clamp(1.95rem, 4.1vw, 3.05rem); letter-spacing: -0.015em; line-height: 1.1; }
h2 { letter-spacing: -0.012em; }
.hl { white-space: nowrap; background: var(--grad) 0 92% / 100% .11em no-repeat; padding-bottom: .04em; }
.kicker, .eyebrow { font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .05em; text-transform: none; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before, .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--grad); border-radius: 1px; flex: none; }
.phead .eyebrow::before { display: none; }

/* Buttons: tactile, not pill-soft */
.btn { border-radius: 8px; transition: background .15s, border-color .15s, transform .12s var(--ease), box-shadow .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(15,87,159,.35); }
.btn-ghost { box-shadow: 0 1px 1px rgba(14,27,44,.04); }
.btn-lg { height: 50px; padding: 0 22px; font-size: 1rem; }

body::before { background: #fff; }

/* Sections that used to be navy are now a pale wash */
.section.navy { background: linear-gradient(180deg, #eaf1fb, #f1f5fb); color: var(--fg); border-block: 1px solid #dbe5f3; }
.section.navy .muted, .section.navy .sec-head p { color: var(--muted); }
.section.navy .eyebrow { color: var(--muted); }
.section.navy .card { background: var(--surface); border-color: var(--line); color: var(--fg); }
.section.navy .card .muted { color: var(--muted); }
.section.navy .steps-4 .num { color: var(--blue); }

.foot { background: var(--surface); color: var(--muted); border-top: 1px solid var(--line); }
.foot h4 { color: var(--fg); font-family: var(--mono); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--blue); }
.foot .legal { border-top-color: var(--line); }

.tip { background: var(--blue-soft); color: var(--fg); border: 1px solid #c9dcf4; }
.tip::before { background: var(--blue-soft); border-left: 1px solid #c9dcf4; border-top: 1px solid #c9dcf4; top: -7px; }
.tip button { background: #fff; color: var(--blue-strong); border: 1px solid #c9dcf4; font-weight: 600; }
.badge-mark { background: #0e1b2c; }

.whats-next { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-top: 3px solid var(--blue); box-shadow: var(--shadow-lg); }
.whats-next .muted { color: var(--muted); }
.whats-next li { border-top-color: var(--line); }
.whats-next li .n { background: var(--blue-soft); color: var(--blue-strong); }
.whats-next li b { color: var(--fg); }
.whats-next li span { color: var(--muted); }
pre.code, .whats-next pre.code { background: #f1f4f9; color: #1c2b41; border: 1px solid var(--line); }

.side { background: var(--surface); color: var(--fg); border-right: 1px solid var(--line); }
.side .ag { border-bottom-color: var(--line); }
.side .ag span { color: var(--muted); }
.side a { color: #3d4b61; }
.side a:hover { color: var(--fg); background: var(--surface-2); }
.side a[aria-current="page"] { color: var(--blue-strong); background: var(--blue-soft); font-weight: 600; }
.side a .count { background: var(--blue); color: #fff; }
.side a .pl { color: var(--muted); }
.side .grp { color: #7b879a; font-family: var(--mono); letter-spacing: .02em; text-transform: none; font-size: .72rem; }
.side .out { border-top-color: var(--line); }
@media (max-width: 860px) { .side { border-right: 0; border-bottom: 1px solid var(--line); } }

.agsite .ahead { background: #fff; color: #26323f; border-bottom: 3px solid var(--abrand, #26323f); }
.agsite .ahead .seal { background: var(--abrand, #26323f); color: #fff; }

/* Hero */
.hero { padding-block: 64px 40px; }
.hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.deadline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 0; border-block: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: .95rem; margin-block: 24px 0; }
.deadline .mono { color: var(--muted); }
.deadline .go { color: var(--blue); font-weight: 600; white-space: nowrap; }
.deadline:hover .go { text-decoration: underline; }
@media (max-width: 760px) { .deadline { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.plain-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 36px; }
.plain-cols h3 { font-size: 1rem; margin-bottom: 10px; }
.plain-cols ul { margin: 0; padding: 0; list-style: none; }
.plain-cols li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.plain-cols .was li { color: var(--muted); }
@media (max-width: 760px) { .plain-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.feature { padding-block: 56px; gap: 56px; }
.feature .stack { gap: 14px; align-items: flex-start; }
.feature ul { padding: 0; list-style: none; gap: 0; width: 100%; }
.feature ul li { padding: 9px 0; border-top: 1px solid var(--line); color: var(--fg); font-size: .95rem; }
.get-started { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .get-started { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
ol.seq { margin: 0; padding: 0; list-style: none; counter-reset: q; }
ol.seq li { counter-increment: q; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #d3deee; }
ol.seq li::before { content: counter(q, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--blue); padding-top: 3px; }
ol.seq b { display: block; }
ol.seq span { color: var(--muted); font-size: .93rem; }

/* Standards */
.std-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.std-groups > div { padding: 18px 18px 18px 0; border-right: 1px solid var(--line); }
.std-groups > div + div { padding-left: 18px; }
.std-groups > div:last-child { border-right: 0; }
.std-groups h5 { margin: 0 0 8px; font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--muted); }
.std-groups ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
.std-groups li small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.std-groups li.more { color: var(--blue); }
@media (max-width: 820px) { .std-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .std-groups > div:nth-child(2) { border-right: 0; } .std-groups > div:nth-child(n+3) { border-top: 1px solid var(--line); } .std-groups > div:nth-child(3) { padding-left: 0; } }
@media (max-width: 480px) { .std-groups { grid-template-columns: minmax(0, 1fr); } .std-groups > div { border-right: 0; padding-left: 0 !important; border-top: 1px solid var(--line); } .std-groups > div:first-child { border-top: 0; } }
.part { font-family: var(--mono); font-size: .74rem; padding: 2px 7px; border-radius: 4px; background: var(--surface-2); color: var(--fg); white-space: nowrap; }
.part.g { background: #e3eefb; color: #0f579f; } .part.r { background: #efe9f9; color: #5b3d9a; } .part.p { background: var(--good-soft); color: var(--good); }
.scope-note { border: 1px solid var(--line); border-left: 3px solid var(--warn); background: var(--surface); padding: 14px 16px; border-radius: 0 8px 8px 0; font-size: .93rem; }
.grp-h { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin: 8px 0 -6px; font-weight: 500; }

/* ---------- Scene system ---------- */
.stage { padding: 0; border-radius: 14px; border: 1px solid #d5dce7; box-shadow: var(--shadow-lg); background: var(--surface); overflow: hidden; position: relative; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--line); background: #f7f9fc; font-size: .74rem; color: var(--muted); }
.stage-bar .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-bar button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 3px 9px; font-size: .74rem; cursor: pointer; color: var(--fg); flex: none; }
.stage-bar button:hover { border-color: var(--muted); }
.stage-body { padding: 18px; position: relative; }
.stage-cap { padding: 0 18px 12px; font-size: .74rem; color: var(--muted); }
.stage [data-enter] { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.stage .pending { opacity: 0; transform: translateY(10px) scale(.985); }
.stage .hot { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(22,112,201,.16); }
.stage .press { transform: scale(.96); }
.token { position: absolute; left: 0; top: 0; width: 34px; height: 22px; margin: -11px 0 0 -17px; border-radius: 5px; background: #fff; border: 1px solid #b9c6d8; box-shadow: 0 6px 14px rgba(14,27,44,.18); z-index: 5; pointer-events: none; }
.token::before { content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 3px; border-radius: 2px; background: var(--good); box-shadow: 0 6px 0 #c9d2df, 8px 6px 0 #c9d2df; }
.token.c::before { background: var(--bad); }
.cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 6; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(14,27,44,.35)); }
.cur svg { width: 22px; height: 22px; display: block; transition: transform .12s; transform-origin: 4px 3px; }
.cur.down svg { transform: scale(.82); }
.cur::after { content: ""; position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; transform: scale(.3); }
.cur.down::after { opacity: .7; transform: scale(1); transition: transform .25s var(--ease), opacity .25s; }
.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--blue); margin-left: 1px; vertical-align: -2px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.flow { grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr) minmax(0, .95fr); gap: 16px; }
.flow h5, .stage h5 { margin: 0 0 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 500; }
.channel { background: #fff; transition: border-color .25s, box-shadow .25s; }
.channel.soon { background: transparent; }
.mini-inbox { background: #f7f9fc; min-height: 0; }
.mini-rec { box-shadow: 0 1px 2px rgba(14,27,44,.05); }
.mini-rec .route { font-weight: 550; }
.mini-rec .route::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); flex: none;
}
.phone { border: 2px solid #1c2b41; border-radius: 24px; box-shadow: 0 10px 24px -8px rgba(14,27,44,.3); position: relative; }
.push { background: #f1f4f9; border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; display: flex; flex-direction: column; font-size: .7rem; line-height: 1.3; }
.push b { font-size: .68rem; }
.tm-step .b { transition: background .35s, border-color .35s, transform .45s var(--ease); }
.tm-step.on .b { transform: scale(1); }
.tm-step:not(.on) .b { transform: scale(.85); }
.tm-step:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--good); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.tm-step.on:not(:last-child)::after { transform: scaleY(1); }
.tm-step .t { transition: color .3s; }
.tm-step:not(.on) .t { color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* merge scene */
.merge { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.desk { position: relative; height: 300px; }
.art { position: absolute; width: 46%; background: #fff; border: 1px solid #cfd6e0; border-radius: 4px; padding: 10px; font-size: .72rem; line-height: 1.35; box-shadow: 0 3px 8px rgba(14,27,44,.1); display: flex; flex-direction: column; gap: 4px; transition: opacity .5s, filter .5s, transform .6s var(--ease); }
.art b { font-size: .72rem; }
.art i { display: block; height: 1px; background: #c9d2df; margin-top: 7px; }
.art.paper { left: 2%; top: 4%; transform: rotate(-4deg); }
.art.fwd { left: 46%; top: 0; transform: rotate(3deg); border-radius: 6px; }
.art.web { left: 8%; top: 52%; transform: rotate(2deg); border-radius: 6px; }
.art.sticky { left: 52%; top: 40%; transform: rotate(-3deg); background: #fff3b8; border-color: #ead97e; width: 40%; }
.art.slip { left: 34%; top: 72%; transform: rotate(5deg); background: #fde9e7; border-color: #f0c3be; width: 50%; }
.art.filed { opacity: .5; filter: grayscale(1); box-shadow: none; }
.art .stamp { display: none; }
.merge-arrow { font-size: 1.4rem; color: var(--muted); text-align: center; }
.merge .self { font-size: .76rem; color: var(--good); font-weight: 600; padding: 6px 4px 0; }
@media (max-width: 640px) { .merge { grid-template-columns: minmax(0, 1fr); } .merge-arrow { transform: rotate(90deg); } .desk { height: 280px; } }

/* tracker scene */
.trk { display: flex; flex-direction: column; gap: 18px; }
.hstep { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hs { position: relative; text-align: center; padding-top: 24px; font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.hs small { font-size: .64rem; opacity: 0; transition: opacity .4s; }
.hs i { position: absolute; top: 3px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--line); z-index: 1; transition: background .3s, border-color .3s, box-shadow .3s; }
.hs::before, .hs::after { content: ""; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.hs::after { background: var(--good); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.hs:first-child::before, .hs:first-child::after { display: none; }
.hs.on::after { transform: scaleX(1); }
.hs.on i { background: var(--good); border-color: var(--good); }
.hs.on { color: var(--fg); font-weight: 600; }
.hs.on small { opacity: 1; font-weight: 400; color: var(--muted); }
.hs.now i { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.msgs { display: flex; flex-direction: column; gap: 6px; }
.msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; font-size: .8rem; padding: 8px 10px; background: #f7f9fc; border-radius: 8px; }
.msg b { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--muted); padding-top: 1px; }
.sent { align-self: flex-start; font-size: .74rem; color: var(--good); font-weight: 600; background: var(--good-soft); padding: 4px 9px; border-radius: 6px; }

/* routing + accreditation scenes */
.rt, .ac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
@media (max-width: 560px) { .rt, .ac { grid-template-columns: minmax(0, 1fr); } }
.tg { width: 34px; height: 20px; border-radius: 999px; background: #cfd6e0; position: relative; flex: none; transition: background .25s; }
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.tg.on { background: var(--blue); }
.tg.on::after { transform: translateX(14px); }
.s-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.s-row:first-of-type { border-top: 0; }
.s-row small { display: block; font-weight: 400; color: var(--muted); font-size: .7rem; }
.s-more { font-size: .76rem; color: var(--blue); font-weight: 600; padding-top: 8px; border-top: 1px solid var(--line); }
.rt .recip { background: #fff; font-size: .82rem; }
.rt .recip .chip { margin-left: auto; }
.ac-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .84rem; }
.btn-mini { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: .72rem; font-weight: 600; background: #fff; transition: transform .12s; }
.ac table.t { font-size: .74rem; }
.ac table.t th { font-size: .62rem; padding: 6px 8px; }
.ac table.t td { padding: 7px 8px; }
.file { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; background: var(--good-soft); color: var(--good); padding: 5px 9px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sigline { border: 1px dashed #b9c6d8; border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: .74rem; }
.sigline em { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 1.1rem; font-style: normal; display: block; min-height: 1.5em; }

/* signup scene */
.su { display: flex; flex-direction: column; gap: 12px; }
.su-search { display: flex; align-items: center; gap: 10px; height: 46px; border: 1px solid #b9c6d8; border-radius: 9px; padding: 0 12px; font-size: 1rem; background: #fff; }
.su-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.su-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: .86rem; }
.su-result small { display: block; color: var(--muted); }
.su-result .chip { margin-left: auto; }
.su-mail { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); font-size: .82rem; }
.su-mail svg { width: 18px; height: 18px; color: var(--blue); }
.su-mail span { display: block; color: var(--muted); font-size: .76rem; }
.su-mails { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.su-mails h5 { padding: 10px 12px 2px; margin: 0; }
.su-mail:first-of-type { border-top: 0; }

@media (prefers-reduced-motion: reduce) { .stage [data-enter], .tm-step .b, .tm-step::after, .hs::after, .tg::after, .art { transition: none !important; } .typing::after { animation: none; } }

.hero .wrap.dl-wrap { display: block; }

/* ==========================================================================
   Site additions on top of the ported stylesheet (verumlink.com, phase A).
   ========================================================================== */

/* Skip link and focus treatment */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* Header: the wordmark is the existing JPG on a white header, so it needs no knockout. */
.site-head .logo img { height: 24px; }
@media (max-width: 420px) { .site-head .logo img { height: 21px; } }
.head-actions .signin { color: var(--fg); text-decoration: none; }

/* Feature status labels: what ships today vs what is on the roadmap. */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--good); background: var(--good-soft); border-color: #c6e6d7; }
.status.soon { color: var(--warn); background: var(--warn-soft); border-color: #eedcb3; }

/* Small print under a plan's price */
.plan-note { font-size: .8rem; color: var(--muted); }

/* Resident app illustration (the app shows status today; the web tracker does not exist yet) */
.app-phone { justify-self: center; }

/* Footer: keep legal links on one line */
.foot .cols { grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 760px) { .foot .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot .agg { font-size: .82rem; }

/* Long-form email address that must not wrap mid-address */
.nowrap { white-space: nowrap; }

/* Mobile menu button only exists below the breakpoint */
.btn.menu-btn { display: none; }
@media (max-width: 920px) { .btn.menu-btn { display: inline-flex; } }

/* Keep animated scenes from shifting layout when motion is off */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Agency join wizard ---------- */
.join-step { display: none; }
.join-step.active { display: block; }
/* Named .form-msg, not .msg: .msg is the tracker-scene chat row in the ported CSS. */
.form-msg { margin: 12px 0 0; font-size: .9rem; display: block; }
.form-msg.err { color: var(--bad); font-weight: 500; }
.form-msg.muted { color: var(--muted); }
.input.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(178, 58, 52, .12); }
.results li { list-style: none; }
.result span { min-width: 0; }

/* ---------- Corrections found by the axe-core pass ---------- */
/* The footer wordmark has no intrinsic height ratio in the ported rule, so the
   HTML width attribute took over and pushed the page sideways on phones. */
.foot img { width: auto; }
img { max-width: 100%; }

/* `--good` and `--warn` are tuned for icons, not small text on a tinted chip.
   These darker cuts clear 4.5:1 on their own background. */
.status.live { color: #0e5a3a; }
.status.soon { color: #7a4c00; }
.chip.warn { color: #7a4c00; }
/* "Later" channels were dimmed with opacity, which dropped their label below
   4.5:1. Keep them quiet with a dashed border and muted text instead. */
.channel.soon { opacity: 1; border-style: dashed; color: #4a586e; }
.channel.soon small { color: #4a586e; }
.part.p { color: #0e5a3a; }
.chip.good { color: #0e5a3a; }
/* Dimming to 50% dropped the "filed" artifacts below 4.5:1; 75% still reads as past. */
.art.filed { opacity: .75; }
.file { color: #0e5a3a; }
.art.filed { opacity: 1; box-shadow: none; border-style: dashed; }

/* The header sign-in button is dropped on phones to keep the bar calm, so the
   same link lives at the bottom of the mobile menu. */
.nav-signin { display: none; }
@media (max-width: 920px) { .navlinks .nav-signin { display: block; font-weight: 600; } }

/* Reassurance under the join wizard's search field */
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.trust-row b { display: block; font-size: .92rem; }
.trust-row span { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
@media (max-width: 640px) { .trust-row { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* .status sits inside flex columns (.sec-head, .stack) and would otherwise stretch
   into a full-width pill. */
.status { align-self: flex-start; }