/* Component styles — the designer owns this file. Uses only tokens from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 400 14px/20px var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-size: .9em; }

/* top bar */
.top { display: flex; align-items: center; gap: var(--space); padding: 14px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(10px); z-index: 2; }
.brand { font: 500 18px/1 var(--font-display); letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
/* Logo mark — hardcoded to preserve original Eterna identity */
.brand__mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ff3d9a, #a66bff); }
.brand__dot { color: #a66bff; }
.top__title { margin: 0 auto 0 8px; color: var(--soft); }

/* layout */
.page { display: grid; grid-template-columns: 280px 1fr; gap: var(--gutter); padding: var(--gutter); max-width: var(--page-max); margin: 0 auto; }
.content { min-width: 0; }
.stage { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; }
@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; padding: var(--gutter-sm); }
  .stage { grid-template-columns: 1fr; }
  .picker { order: 2; }
}

/* state picker */
.picker { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; align-self: start; position: sticky; top: 76px; }
.picker__mode { margin: 0 0 12px; font-size: 13px; color: var(--soft); }
.picker__group p { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.picker button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; color: var(--ink); padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 14px; cursor: pointer; }
.picker button::first-letter { text-transform: uppercase; }
.picker button:hover { background: var(--raised-2); }
.picker button[aria-pressed="true"] { border-color: var(--ink); background: var(--raised-2); }

/* provenance label: always visible, says whether this is real evidence, a fixture or live data */
.provenance { display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: var(--radius-pill); font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; border: 1px solid var(--ok); color: var(--ok); }
.provenance[data-kind="fixture"] { border-color: var(--warn); color: var(--warn); }
.provenance[data-kind="live"] { border-color: var(--status-requested); color: var(--status-requested); }

/* cards */
.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card h2 { margin: 2px 0 8px; font: 500 24px/1.25 var(--font-display); letter-spacing: -0.72px; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.note { color: var(--soft); font-size: 14px; margin: 12px 0 0; }
.facts { display: grid; gap: 8px; margin: 14px 0 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.facts dt { color: var(--soft); font-size: 14px; }
.facts dd { margin: 0; text-align: right; }
.price { font: 700 40px/1 var(--font-display); margin: 12px 0 4px; }
.request__seller { margin: 0; color: var(--soft); }

.badge { display: inline-block; margin: 4px 0 0; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; }
.badge--ok   { background: color-mix(in srgb, var(--ok)   15%, var(--raised)); color: var(--ok); }
.badge--warn { background: color-mix(in srgb, var(--warn) 15%, var(--raised)); color: var(--warn); }
.badge--bad  { background: color-mix(in srgb, var(--bad)  15%, var(--raised)); color: var(--bad); }

.meter { height: 6px; border-radius: var(--radius-pill); background: var(--raised-2); margin-top: 14px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { border: 0; border-radius: var(--radius-pill); padding: 8px 20px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font: 500 16px/1 var(--font-ui); cursor: pointer; }   /* 44 px touch target */
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:disabled { opacity: .35; cursor: not-allowed; }
.btn--ghost { background: var(--raised-2); color: var(--ink); border: none; }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--line-input); }
.btn--small { padding: 6px 14px; font-size: 13px; }

/* timeline */
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; position: relative; padding-bottom: 16px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.step__dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 2px solid var(--line); background: var(--raised-2); }
.step__body { display: grid; gap: 2px; padding-top: 4px; }
.step__body span { color: var(--soft); font-size: 14px; }
.step__evidence { font-size: 13px; }
.step--done .step__dot { border-color: var(--ok); color: var(--ok); }
.step--done:not(:last-child)::before { background: var(--ok); }
.step--current .step__dot { border-color: var(--accent); color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.step--locked .step__dot { border-color: var(--warn); color: var(--warn); }
.step--refused .step__dot { border-color: var(--bad); color: var(--bad); }
.step--todo { opacity: .45; }
@keyframes pulse { 50% { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 2px; } }
.step--rehearsal .step__dot { border-color: var(--status-rehearsal); color: var(--status-rehearsal); border-style: dashed; }   /* real, but an earlier run — never the ✓ of VERIFIED */
@media (prefers-reduced-motion: reduce) { .step--current .step__dot { animation: none; } }

/* refusal */
.refusal { border-color: var(--bad); }
.refusal h2 { color: var(--bad); }

.live-msg { color: var(--soft); min-height: 1.5em; }

/* navigation */
.nav { display: flex; gap: 4px; margin-right: auto; margin-left: 12px; flex-wrap: wrap; }
.nav a { color: var(--soft); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-pill); font-size: 14px; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--raised-2); }
body[data-route="store"] .stage, body[data-route="receipt"] .stage, body[data-route="present"] .stage { grid-template-columns: 1fr; }
body[data-route="store"] .picker, body[data-route="present"] .picker { display: none; }
body[data-route="store"] .page, body[data-route="present"] .page { grid-template-columns: 1fr; }

/* storefront */
.store__hero h1 { font: 500 clamp(32px, 5vw, 56px)/1.1 var(--font-display); letter-spacing: -1.5px; margin: 6px 0 10px; }
.store__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; gap: 20px; margin-top: 24px; }

/* product card — flex column so price/facts/cta anchor to the bottom across equal-height cards */
.product { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }

/* header row: icon tile + seller info */
.product__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.product__icon { width: 56px; height: 56px; min-width: 56px; border-radius: var(--radius); display: grid; place-items: center; background: var(--icon-default-bg); color: var(--icon-default-fg); }
.product__icon--report   { background: var(--icon-report-bg);   color: var(--icon-report-fg); }
.product__icon--snapshot { background: var(--icon-snapshot-bg); color: var(--icon-snapshot-fg); }
.product__icon--guide    { background: var(--icon-guide-bg);    color: var(--icon-guide-fg); }
.product__meta { display: flex; flex-direction: column; gap: var(--space-1); justify-content: center; min-width: 0; }
.product__seller-name { margin: 0; font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* seller kind badge — outline pill; no green */
.product__kind { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1; border-radius: var(--radius-pill); padding: 3px 8px; border: 1px solid var(--line); color: var(--soft); background: transparent; }
.product__kind--demo        { border-color: var(--badge-demo-border);        color: var(--badge-demo-color);        background: var(--badge-demo-bg); }
.product__kind--independent { border-color: var(--badge-independent-border); color: var(--badge-independent-color); background: var(--badge-independent-bg); }

/* growing area — title and description push everything below to the card bottom */
.product__top { flex: 1; display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.product__title { margin: 0 0 var(--space-2); font: 600 20px/1.25 var(--font-display); letter-spacing: -0.4px; color: var(--ink); }
.product__desc  { margin: 0; font-size: 14px; line-height: 1.5; color: var(--soft); }

/* price */
.product__price { font: 700 28px/1 var(--font-display); margin: 0 0 var(--space-3); color: var(--ink); }

/* detail rows with inline icons */
.product__facts { display: grid; gap: 0; margin: 0 0 var(--space-4); }
.product__facts div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); border-top: 1px solid var(--line); padding: 8px 0; }
.product__facts dt { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 13px; font-weight: 400; }
.product__facts dt svg { flex-shrink: 0; opacity: 0.65; }
.product__facts dd { margin: 0; font-size: 13px; text-align: right; color: var(--ink); }

/* full-width CTA */
.product__cta { display: flex; text-align: center; text-decoration: none; width: 100%; }

/* receipt */
.receipt { max-width: 720px; margin: 0 auto; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.receipt__head h1 { font: 500 30px/1.25 var(--font-display); letter-spacing: -0.72px; margin: 6px 0; }
.receipt__amount { font: 700 44px/1 var(--font-display); margin: 6px 0 10px; }
.receipt__chain { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; }
.receipt__chain li { border-top: 1px solid var(--line); padding: 14px 0; }
.receipt__chain h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.receipt__chain p { margin: 2px 0; }

/* presentation */
.present { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; max-width: 1000px; margin: 0 auto; padding: 24px 0; }
.present__kicker { color: var(--soft); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin: 0; }
.present__title { font: 500 clamp(36px, 6vw, 76px)/1.05 var(--font-display); letter-spacing: -2px; margin: 14px 0; }
.present__body { font-size: clamp(16px, 2.2vw, 22px); color: var(--soft); max-width: 46ch; margin: 0; }
.present__evidence { margin-top: 18px; font-size: 18px; }
.present__nav { display: flex; align-items: center; gap: 16px; margin-top: 40px; color: var(--soft); }
@media (max-width: 700px) { .nav { margin-left: 0; } .top { flex-wrap: wrap; } }

/* payment console */
body[data-route="console"] .stage, body[data-route="reports"] .stage { grid-template-columns: 1fr; }
body[data-route="reports"] .picker { display: none; }
body[data-route="reports"] .page { grid-template-columns: 1fr; }
.console { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.console__head h1 { font: 500 30px/1.25 var(--font-display); letter-spacing: -0.72px; margin: 6px 0 4px; }
.console__meta { color: var(--soft); margin: 0; }
.console__body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin-top: 22px; }
.console__amount { font: 700 48px/1 var(--font-display); margin: 6px 0 12px; }
.console__status { margin-top: 16px; font-weight: 500; }
.console__checks ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.console__checks li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--raised-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.console__checks small { display: block; color: var(--soft); }
.check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.check--ok   { background: color-mix(in srgb, var(--ok)   15%, var(--raised)); color: var(--ok); }
.check--bad  { background: color-mix(in srgb, var(--bad)  15%, var(--raised)); color: var(--bad); }
.check--wait { background: color-mix(in srgb, var(--warn) 15%, var(--raised)); color: var(--warn); }
.console__provenance { margin: 18px 0 0; font: 500 12px var(--font-mono); color: var(--soft); }
@media (max-width: 900px) { .console__body { grid-template-columns: 1fr; } }

/* reports */
.reports h1 { font: 500 clamp(26px, 3.4vw, 40px)/1.25 var(--font-display); letter-spacing: -0.72px; margin: 6px 0 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kpi { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.kpi p { margin: 0; color: var(--soft); font-size: 13px; }
.kpi strong { font: 700 26px/1.2 var(--font-display); }
.table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th, .ledger td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ledger th { color: var(--soft); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--raised-2); }
.ledger .yes { color: var(--ok); font-weight: 600; } .ledger .no { color: var(--muted); }
.ledger .small { font-size: 12px; color: var(--soft); }

/* slide source label (PERSONA / PLANNED / RECORDED) — always visible */
.present__source { align-self: flex-start; margin: 0 0 18px; padding: 5px 12px; border-radius: 999px; font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; border: 1px solid var(--soft); color: var(--soft); }
.present__source[data-source="RECORDED"] { border-color: var(--ok); color: var(--ok); }
.present__source[data-source="PLANNED"] { border-color: var(--warn); color: var(--warn); }

/* product unlock (storefront) */
.unlock { border-radius: var(--radius); padding: 24px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--raised); box-shadow: var(--shadow); }
.unlock h2 { margin: 6px 0 8px; font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-display); }
.unlock--done { border-color: var(--ok); background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 10%, var(--raised)), var(--raised) 55%); animation: unlock-in var(--motion-enter) var(--ease-out); }
.unlock--refused { border-color: var(--bad); }
.unlock--refused h2 { color: var(--bad); }
.unlock__badge { display: inline-block; margin: 0; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); font-weight: 700; }
.unlock__actions { margin: 18px 0 6px; }
.unlock__actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.unlock__report { margin-top: 16px; background: var(--raised-2); border-radius: var(--radius-sm); padding: 18px; }
.unlock__report h3 { margin: 0 0 6px; }
.unlock__json { margin: 12px 0 0; padding: 14px; background: var(--ground); border-radius: var(--radius-sm); overflow-x: auto; font: 13px/1.5 var(--font-mono); color: var(--soft); }
.unlock__fingerprint { margin: 12px 0 0; font-weight: 600; }
.unlock__fingerprint.is-ok { color: var(--ok); } .unlock__fingerprint.is-bad { color: var(--bad); }
.unlock__proof { margin-top: 14px; }
.unlock__proof dd { word-break: break-all; text-align: right; }
.unlock__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0; }
.unlock__steps li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--soft); font-size: 14px; }
.unlock__steps li.is-done { border-color: var(--ok); color: var(--ok); }
.unlock__steps li.is-current { border-color: var(--accent); color: var(--ink); }
.unlock__steps li.is-locked { border-color: var(--warn); color: var(--warn); }
@keyframes unlock-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .unlock--done { animation: none; } }

/* ── Shared across all four products ─────────────────────────────────────────────────────────────────────────── */

/* status pill: one component for every evidence state, in the app and the presentation */
.status { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; font: 600 var(--text-xs)/1.3 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--raised-2); color: var(--soft); border: 1px solid transparent; }
.status[data-status="VERIFIED"] { background: var(--status-verified); color: var(--on-accent); }
.status[data-status="SIMULATED"] { background: color-mix(in srgb, var(--status-simulated) 28%, var(--raised-2)); color: var(--ink); border-color: color-mix(in srgb, var(--status-simulated) 60%, transparent); }
.status[data-status="PENDING"] { color: var(--status-pending); border-color: color-mix(in srgb, var(--status-pending) 45%, transparent); }
.status[data-status="REHEARSAL"] { color: var(--status-rehearsal); }
.status[data-status="REFUSED"], .status[data-status="FAILED"] { color: var(--status-refused); border-color: color-mix(in srgb, var(--status-refused) 45%, transparent); }
.status[data-status="PARTIAL"] { color: var(--ink); background: color-mix(in srgb, var(--status-verified) 25%, var(--raised-2)); }
.net { display: inline-block; padding: .3em .9em; border-radius: 999px; border: 1px solid var(--line); font: 600 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.net[data-net="XRPL Mainnet"] { color: var(--net-mainnet); border-color: color-mix(in srgb, var(--net-mainnet) 45%, transparent); }
.net[data-net="XRPL Devnet"] { color: var(--net-devnet); border-color: color-mix(in srgb, var(--net-devnet) 45%, transparent); }

/* evidence list: one row per evidence source, each with its own status (never merged into one claim) */
.evidence { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.evidence li { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; min-width: 0; }
.evidence__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.evidence p { margin: 6px 0 0; color: var(--soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.evidence .mono { color: var(--ink); font-size: var(--text-xs); }

/* product switcher: the four hackathon products, one visual language */
.products { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: var(--ground); }
.products a { white-space: nowrap; flex: none; display: inline-flex; gap: 8px; align-items: center; color: var(--soft); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: var(--text-sm); border: 1px solid transparent; }
.products a small { font-size: var(--text-xs); color: var(--soft); letter-spacing: .06em; }
.products a[aria-current="page"] { color: var(--ink); border-color: var(--accent); background: var(--raised-2); }
body:not([data-product="xrp-micropayments"]) .nav { display: none; }
body:not([data-product="xrp-micropayments"]) .top { justify-content: space-between; }
body:not([data-product="xrp-micropayments"]) .picker { display: none; }
body:not([data-product="xrp-micropayments"]) .page { grid-template-columns: minmax(0, 1fr); }
body:not([data-product="xrp-micropayments"]) .stage { grid-template-columns: minmax(0, 1fr); }

/* product page (XLS-68 · XLS-75 · Voucher Commerce): same hero, cards, facts, steps and evidence as Agent Governance */
.product-page { display: grid; gap: 20px; }
.product-page__hero h1 { font: 700 var(--text-2xl)/1.05 var(--font-display); margin: 6px 0 10px; }
.product-page__hero p { color: var(--soft); max-width: 62ch; margin: 0; font-size: var(--text-md); }
.product-page__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.product-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .product-page__grid { grid-template-columns: minmax(0, 1fr); } .products { padding: 8px var(--gutter-sm); } }

/* Rose's mission: certificate review, payment request, payment-method cards, can/can't, recovery */
.products a.is-supporting { border-style: dashed; border-color: var(--line); }
.cert__consent { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--raised-2); border-left: 3px solid var(--accent); font-size: var(--text-sm); }
.rails { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.rail { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 44px; }
.rail:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rail.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rail__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.rail__tag { color: var(--soft); font-size: var(--text-sm); }
.rail .net { justify-self: start; }
.rail__why { font-size: var(--text-xs); color: var(--soft); }
.cando { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: var(--text-sm); }
.cando li { padding-left: 22px; position: relative; }
.cando li::before { content: "•"; position: absolute; left: 6px; color: var(--soft); }
.cando__yes::before { content: "✓" !important; color: var(--status-verified) !important; left: 2px !important; }
.cando__no::before { content: "✕" !important; color: var(--status-refused) !important; left: 2px !important; }
.recovery { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--status-pending); }
.recovery p { margin: 4px 0 0; font-size: var(--text-sm); }
.mission__top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .mission__top { grid-template-columns: minmax(0, 1fr); } }
.product-page > *, .mission__top > * { min-width: 0; }
.cert .ledger td, .cert .ledger th { white-space: normal; }
@media (max-width: 600px) {
  .products { flex-wrap: nowrap; overflow-x: auto; }
  .facts div { flex-wrap: wrap; } .facts dd { text-align: left; }
  .top { padding: 12px var(--gutter-sm); }
}

/* proof buttons: open the transaction on Bithomp and the XRPL explorer (opens only; never pays) */
.proof-links { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.proof-btn { text-decoration: none; }
.unlock .proof-links { margin-top: 14px; }

/* ── Connected journey (engineering scaffold in the designer's tokens; designer owns placement and polish) ── */
.flow, .roles, .flow-next, .activity { grid-column: 1 / -1; }
.col--wide { grid-column: 1 / -1; }
.flow ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-4); }
.flow__step a, .flow__step > span { display: inline-flex; gap: var(--space-2); align-items: center; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--raised); color: var(--soft); text-decoration: none; font-size: var(--text-sm); min-height: 36px; }
.flow__step b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--raised-2); font-size: 12px; font-weight: 500; }
.flow__step.is-done a { color: var(--ink); }
.flow__step.is-done b { background: var(--ok); color: var(--on-accent); }
.flow__step.is-current a { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.flow__step.is-current b { background: var(--on-accent); color: var(--accent); }
.flow__step > span { opacity: .55; }
.flow-next { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-2); }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.roles__item { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: 4px; }
.roles__item span { color: var(--soft); font-size: var(--text-sm); }
.empty h2 { margin: 6px 0; }
.activity { margin-top: var(--space-8); }
.activity h2 { font: 500 24px/1.25 var(--font-display); letter-spacing: -0.72px; margin: 4px 0 var(--space-3); }
.activity__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.activity__item { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--space-3); align-items: center; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.activity__what { display: grid; } .activity__what small { color: var(--soft); }
.ledger tr.is-focus td { background: color-mix(in srgb, var(--status-requested) 8%, var(--raised)); }
.ledger td a { color: var(--ink); }
.receipt--refused { border-color: var(--bad); }
@media (max-width: 700px) { .activity__item { grid-template-columns: 1fr; } .flow-next .btn { width: 100%; } }

/* Match the approved storefront reference: compact seller badge; seller name wraps instead of truncating. */
.product__kind { align-self: flex-start; }
.product__seller-name { white-space: normal; overflow: visible; text-overflow: clip; }

/* Proof of control (Allowed vs Refused) — engineering scaffold in the designer's tokens */
.proofpair { grid-column: 1 / -1; margin-top: var(--space-8); }
.proofpair h2 { font: 500 24px/1.25 var(--font-display); letter-spacing: -0.72px; margin: 4px 0 var(--space-3); }
.proofpair__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.proofcard { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.proofcard--allowed { border-top: 3px solid var(--status-verified); }
.proofcard--refused { border-top: 3px solid var(--status-refused); }
.proofcard h3 { margin: 4px 0 0; font: 600 18px/1.3 var(--font-display); }
.proofcard .status { justify-self: start; }
.proofcard .btn { justify-self: start; margin-top: var(--space-2); }

/* Guided website: one story, no tab rows */
body[data-guided="1"] .nav, body[data-guided="1"] .products, body[data-guided="1"] .picker { display: none; }
body[data-guided="1"] .page { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
body[data-guided="1"] .stage { grid-template-columns: minmax(0, 1fr); }
.guide-home { padding: var(--space-8) 0; max-width: 820px; }
.guide-home h1 { font: 600 clamp(36px, 6vw, 64px)/1.05 var(--font-display); letter-spacing: -1.5px; margin: var(--space-3) 0; }
.guide-home__cta { margin-top: var(--space-6); font-size: 18px; padding: 14px 28px; }
.guide-home__facts { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.guide-home__facts li { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); display: grid; gap: 4px; }
.guide-home__facts strong { font: 600 32px/1 var(--font-display); }
.guide-home__facts span { color: var(--soft); font-size: var(--text-sm); }
.guide__head h1 { font: 600 clamp(28px, 4vw, 44px)/1.1 var(--font-display); letter-spacing: -1px; margin: 4px 0 var(--space-2); }
.guide__line { color: var(--soft); font-size: 18px; margin: 0 0 var(--space-6); max-width: 70ch; }
.guide__dots { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 var(--space-4); }
.guide__dots a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--soft); text-decoration: none; font-size: 13px; background: var(--raised); }
.guide__dots .is-done a { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.guide__dots .is-current a { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.guide__body { display: grid; gap: var(--space-4); }
.guide__body .store__hero { display: none; }
.guide__nav { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-8) 0 var(--space-4); }

/* ── Public website (home) — engineering scaffold in the designer's tokens; designer owns the look ── */
.top { gap: var(--space-4); }
.brand { text-decoration: none; color: var(--ink); }
#sitenav { margin-left: auto; }
.sitenav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sitenav a:not(.btn) { color: var(--soft); text-decoration: none; font-size: var(--text-sm); }
.sitenav a:not(.btn):hover { color: var(--ink); }
body[data-site="1"] .nav, body[data-site="1"] .products, body[data-site="1"] .picker, body[data-site="1"] .provenance { display: none; }
body[data-site="1"] .page { grid-template-columns: minmax(0, 1fr); max-width: 1160px; }
body[data-site="1"] .stage { grid-template-columns: minmax(0, 1fr); }
.site { display: grid; gap: var(--space-8); }
.site-hero { padding: var(--space-8) 0 var(--space-4); }
.site-hero h1 { font: 600 clamp(40px, 6.5vw, 76px)/1.02 var(--font-display); letter-spacing: -2px; margin: var(--space-3) 0 var(--space-4); }
.site-hero__sub { font-size: 19px; line-height: 1.5; color: var(--soft); max-width: 62ch; margin: 0; }
.site-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.site-stats { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.site-stats li { border-top: 2px solid var(--ink); padding-top: var(--space-3); display: grid; gap: 4px; }
.site-stats strong { font: 600 34px/1 var(--font-display); letter-spacing: -1px; }
.site-stats span { color: var(--soft); font-size: var(--text-sm); }
.site-sec { scroll-margin-top: 90px; }
.site-sec h2 { font: 600 clamp(28px, 4vw, 42px)/1.1 var(--font-display); letter-spacing: -1px; margin: 4px 0 var(--space-4); }
.site-sec__sub { color: var(--soft); margin: 0 0 var(--space-4); max-width: 70ch; }
.site-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.site-steps li { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); }
.site-steps b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.site-steps h3 { margin: var(--space-3) 0 var(--space-2); font: 600 18px/1.3 var(--font-display); }
.site-steps p { margin: 0; color: var(--soft); font-size: var(--text-sm); line-height: 1.55; }
.site-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.site-product { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.site-product .status { justify-self: start; }
.site-product h3 { margin: var(--space-2) 0 0; font: 600 20px/1.25 var(--font-display); }
.site-product p { margin: 0; }
.site-product .btn { justify-self: start; margin-top: var(--space-3); }
.site .proofpair { margin-top: 0; }
.site-dev { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.site-dev h3 { margin: 0 0 var(--space-2); }
.site-code { background: var(--ink); color: var(--on-accent); border-radius: var(--radius-sm); padding: var(--space-3); font: 13px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-2) 0; }
.site-foot { border-top: 1px solid var(--line); padding: var(--space-6) 0; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--space-6); }
@media (max-width: 800px) { .site-foot { grid-template-columns: 1fr; } .sitenav a:not(.btn):not([href="#/agent"]) { display: none; } .sitenav { gap: var(--space-3); } }

/* ── Motion: reflects real record state; illustrative transitions only between screens ── */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes step-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-verified) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes stop { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } }
.guide__head, .guide__body > *, .site-hero, .site-sec, .proofcard { animation: rise-in var(--motion-enter) var(--ease-out) both; }
.guide__body > *:nth-child(2) { animation-delay: 120ms; } .guide__body > *:nth-child(3) { animation-delay: 240ms; }
/* lifecycle: only steps the record actually completed are revealed in order */
.steps .step--done { animation: step-in 420ms var(--ease-out) both; }
.steps .step--done:nth-child(1) { animation-delay: 0ms; } .steps .step--done:nth-child(2) { animation-delay: 140ms; } .steps .step--done:nth-child(3) { animation-delay: 280ms; }
.steps .step--done:nth-child(4) { animation-delay: 420ms; } .steps .step--done:nth-child(5) { animation-delay: 560ms; } .steps .step--done:nth-child(6) { animation-delay: 700ms; }
.unlock__badge { animation: ring 1.2s var(--ease-out) 300ms 2; border-radius: var(--radius-pill); }
.receipt--refused .badge--bad, .proofcard--refused .status { animation: stop 520ms ease-in-out 400ms 1; }
.proofcard { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.proofcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.btn { transition: transform 120ms var(--ease-out), opacity 120ms; } .btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Rose's experience: the recorded purchase replays its real lifecycle, one step at a time (no invented events). */
.replay-label { margin: 0; }
.rose-limits { margin: var(--space-4) 0; }
.replay .steps .step--done { animation: step-in 480ms var(--ease-out) both; }
.replay .steps .step--done:nth-child(2) { animation-delay: 650ms; } .replay .steps .step--done:nth-child(3) { animation-delay: 1300ms; }
.replay .steps .step--done:nth-child(4) { animation-delay: 1950ms; } .replay .steps .step--done:nth-child(5) { animation-delay: 2600ms; }
.replay .steps .step--done:nth-child(6) { animation-delay: 3250ms; }
.replay .steps .step--done:last-child .step__dot { animation: ring 900ms var(--ease-out) 3600ms 2; }
@media (prefers-reduced-motion: reduce) { .replay .steps .step--done, .replay .steps .step__dot { animation: none !important; } }
@media (max-width: 640px) { .guide__nav { flex-direction: column-reverse; } .guide__nav .btn { width: 100%; text-align: center; } }

/* Home hero: the product shown first — two recorded decisions beside the headline; one dominant action. */
.site-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.site-hero__main { font-size: 17px; padding: 14px 26px; }
.site-hero__links { margin: var(--space-4) 0 0; color: var(--soft); font-size: var(--text-sm); }
.site-hero__links a { color: var(--soft); }
.site-hero__links a:hover { color: var(--ink); }
.site-hero__decisions { display: grid; gap: var(--space-3); }
.site-hero__decisions .eyebrow, .site-hero__decisions .note { margin: 0; }
.decision { display: grid; gap: 4px; padding: var(--space-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.decision:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 8%, transparent); }
.decision--ok { border-left-color: var(--ok); }
.decision--no { border-left-color: var(--status-refused, #c0392b); }
.decision__verdict { font-weight: 600; font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; }
.decision--ok .decision__verdict { color: var(--ok); }
.decision--no .decision__verdict { color: var(--status-refused, #c0392b); }
.decision__amount { font: 600 34px/1 var(--font-display); letter-spacing: -1px; }
.decision__what { color: var(--ink); }
.decision__src { color: var(--soft); font-size: 12px; }
.site-hero__decisions .decision { animation: rise-in var(--motion-enter) var(--ease-out) both; }
.site-hero__decisions .decision--ok { animation-delay: 200ms; } .site-hero__decisions .decision--no { animation-delay: 500ms; }
.site-hero__decisions .decision--no .decision__verdict { display: inline-block; animation: stop 420ms ease 1100ms; }
@media (max-width: 860px) { .site-hero { grid-template-columns: 1fr; gap: var(--space-6); } .site-hero__main { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .site-hero__decisions .decision, .decision__verdict { animation: none !important; } .decision { transition: none; } }

/* One website: no engineering-console chrome on any page. The screen tabs and the record picker are gone for visitors;
   every page uses the site header, and product pages keep the four-product row as their sub-navigation. */
.nav, .picker { display: none !important; }
.page { grid-template-columns: minmax(0, 1fr); max-width: 1160px; }
.products { justify-content: center; }
.provenance { font-family: var(--font-body, inherit); letter-spacing: .02em; font-weight: 500; }

/* Get started */
.start-hero { align-items: end; }
.start-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.start-steps a { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); text-decoration: none; font-weight: 500; transition: transform .15s var(--ease-out); }
.start-steps a:hover { transform: translateX(4px); }
.start-steps b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--ground); font-size: 13px; }
.start-limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: start; }
.start-form { display: grid; gap: var(--space-3); }
.start-form hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) 0; width: 100%; }
.start-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--soft); }
.start-field__input { display: inline-flex; align-items: center; gap: 6px; }
.start-field input { width: 110px; font: inherit; font-size: 16px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground); text-align: right; }
.start-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.start-field em { font-style: normal; color: var(--soft); min-width: 32px; }
.start-quick { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.start-preview h3 { margin: 4px 0 var(--space-3); }
.start-decision { margin-top: var(--space-4); }
.start-access p { margin: 0 0 var(--space-3); max-width: 70ch; }
@media (max-width: 860px) { .start-limits { grid-template-columns: minmax(0, 1fr); } }

/* Rose's workspace: a task-based app view built from the same cards, facts, decisions and buttons. */
.ws { display: grid; gap: var(--space-5, 20px); }
.ws-example { margin: 0; font-size: var(--text-xs, 12px); color: var(--soft); letter-spacing: .02em; }
.ws-hello h1, .ws-head h1 { font: 600 clamp(32px, 5vw, 52px)/1.05 var(--font-display); letter-spacing: -1.2px; margin: 4px 0 var(--space-2); }
.ws-head .site-hero__sub, .ws-hello .site-hero__sub { margin: 0; }
.ws-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: start; }
.ws-authority h2 { margin: 4px 0 var(--space-3); }
.ws-list { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.ws-row a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; background: var(--raised); transition: transform .15s var(--ease-out); }
.ws-row a:hover { transform: translateX(3px); }
.ws-row--ok a { border-left-color: var(--ok); } .ws-row--no a { border-left-color: var(--bad); }
.ws-row__main { display: grid; gap: 2px; min-width: 0; } .ws-row__main span { color: var(--soft); font-size: var(--text-xs, 12px); }
.ws-row__amt { font-weight: 600; white-space: nowrap; }
.ws-decision { max-width: 640px; }
.ws-ask { scroll-margin-top: 90px; }
.ws .store__hero { display: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; font: inherit; cursor: pointer; }
.ws details summary { cursor: pointer; color: var(--soft); font-size: var(--text-sm); margin: var(--space-2) 0; }
.ws > *, .ws-grid > * { animation: rise-in var(--motion-enter) var(--ease-out) both; }
@media (max-width: 860px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } .ws-row a { grid-template-columns: minmax(0, 1fr) auto; } .ws-row .status { grid-column: 1 / -1; justify-self: start; } .ws-actions .btn { flex: 1 1 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .ws > *, .ws-grid > * { animation: none; } .ws-row a { transition: none; } }