/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: editorial · tone: technical, restrained, transparent · anchor: coral · macrostructure: Workbench · theme: Coral · enrichment: tier-A policy workbench · nav: N9 · footer: Ft5 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */
@import url("./tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
html { scroll-behavior: smooth; }
body { min-width: 0; }
a { color: inherit; }
button, select, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.site-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 72px; padding-inline: clamp(1rem, 4vw, 4rem); border-bottom: var(--rule-hair) solid var(--color-rule); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; text-decoration: none; white-space: nowrap; }
.wordmark span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper); }
.nav-status { display: none; justify-self: center; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.nav-actions { display: flex; align-items: center; justify-self: end; gap: var(--space-xs); }
.nav-cta { display: none; font-size: var(--text-xs); font-weight: 750; text-decoration: none; white-space: nowrap; }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.nav-actions .nav-cta { display: none; }
.language-menu { position: relative; }
.language-menu summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-xs); font-weight: 800; cursor: pointer; list-style: none; user-select: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu[open] summary { border-color: var(--color-accent-2); background: var(--color-paper-2); }
.language-menu nav { position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: 30; display: grid; min-width: 10rem; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 18px 60px var(--color-shadow); }
.language-menu nav a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.language-menu nav a[aria-current="page"] { background: var(--color-paper-2); color: var(--color-accent-2); font-weight: 800; }
main { padding-inline: clamp(1rem, 4vw, 4rem); }
.hero { display: grid; gap: var(--space-2xl); align-items: start; max-width: 90rem; margin: 0 auto; padding-block-start: clamp(2.5rem, 5vw, 4.5rem); padding-block-end: clamp(4rem, 8vw, 7rem); }
.hero-copy { min-width: 0; }
.status-line { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-lg); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.status-line span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
h1 { max-width: 10ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display-s); line-height: .94; letter-spacing: -.055em; overflow-wrap: anywhere; min-width: 0; font-style: normal; }
:lang(zh-CN) h1, :lang(ja) h1, :lang(ko) h1 { max-width: 12ch; letter-spacing: -.035em; }
.hero-copy > p:not(.status-line,.trust-line) { max-width: 37rem; margin: var(--space-xl) 0 0; color: var(--color-ink-2); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: 1.25rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.button.primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.button.secondary { background: var(--color-paper); }
.button:active { transform: translateY(1px); }
.button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.trust-line { margin: var(--space-md) 0 0; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.rule-lab { min-width: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: 0 28px 80px var(--color-shadow); overflow: clip; }
.lab-head { display: grid; gap: var(--space-md); padding: var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.lab-head strong, .lab-head span { display: block; }
.lab-head strong { font-family: var(--font-display); }
.lab-head span, .column-label { color: var(--color-muted); font-size: var(--text-xs); }
.lab-head label { display: grid; gap: var(--space-2xs); }
.lab-head select { min-height: 44px; border: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-sm); background: var(--color-paper); padding-inline: var(--space-sm); }
.lab-grid { display: grid; }
.rule-column, .decision-column { min-width: 0; padding: var(--space-lg); }
.rule-column { border-bottom: 1px solid var(--color-rule); }
.rule-column ul { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.rule-column li { padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper); font-size: var(--text-sm); }
.risk-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-xs); }
.risk-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.risk-badge[data-state="blocked"] span { background: var(--color-error); }
.risk-badge[data-state="caution"] span { background: var(--color-warning); }
.decision-column > p, .lab-note { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.draft-preview { margin-top: var(--space-lg); padding: var(--space-md) 0 0; border-top: 1px solid var(--color-rule); }
.draft-preview span { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.draft-preview strong { display: block; margin-top: var(--space-xs); }
.draft-preview p { margin: var(--space-sm) 0 0; font-size: var(--text-sm); line-height: 1.5; }
.lab-note { margin: 0; padding: 0 var(--space-lg) var(--space-lg); }
.tour, .pricing, .faq { max-width: 90rem; margin: 0 auto; padding-block: var(--space-4xl); }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head h2 { max-width: 15ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: .98; letter-spacing: -.045em; overflow-wrap: anywhere; min-width: 0; font-style: normal; }
.section-head p { max-width: 35rem; margin: 0; color: var(--color-muted); font-size: var(--text-lg); line-height: 1.5; }
.tour-step { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }
.step-copy span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-lg); border-radius: 50%; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-mono); }
.step-copy h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.03em; font-style: normal; }
.step-copy p { max-width: 34rem; margin: var(--space-md) 0 0; color: var(--color-muted); line-height: 1.6; }
.product-surface { min-width: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.surface-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.surface-head span { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); }
.surface-head .blocked { color: var(--color-error); background: color-mix(in oklch, var(--color-error) 10%, var(--color-paper)); }
.product-surface ul { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0; padding: 0; list-style: none; }
.product-surface li, .ledger-surface > div, .language-surface > div { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.product-surface li:first-child, .ledger-surface > div:first-child, .language-surface > div:first-child { border-top: 1px solid var(--color-rule); }
.product-surface li.highlight { border-color: var(--color-error); color: var(--color-error); }
.product-surface > p, .product-surface small { color: var(--color-muted); line-height: 1.5; }
.language-surface, .ledger-surface { display: grid; gap: var(--space-sm); }
.language-surface span, .ledger-surface span { display: block; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.language-surface strong, .ledger-surface strong { display: block; margin-top: var(--space-xs); font-size: var(--text-lg); }
.sticky-cta { display: grid; gap: var(--space-md); max-width: 78rem; margin: 0 auto var(--space-3xl); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: 0 18px 60px var(--color-shadow); }
.sticky-cta strong, .sticky-cta span { display: block; }
.sticky-cta span { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.price-grid { display: grid; gap: var(--space-md); }
.price-card { display: grid; align-content: start; gap: var(--space-lg); min-width: 0; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); }
.price-card.featured { background: var(--color-ink); color: var(--color-paper); }
.price-card h3 { margin: 0; font-size: var(--text-base); }
.price-card > div strong { display: inline-block; margin-top: var(--space-md); font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); line-height: .9; }
.price-card > div span { margin-inline-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.price-card.featured > div span { color: color-mix(in oklch, var(--color-paper) 60%, var(--color-ink)); }
.price-card ul { display: grid; gap: var(--space-sm); margin: 0; padding-inline-start: 1.25rem; line-height: 1.45; }
.price-card small { color: color-mix(in oklch, var(--color-paper) 60%, var(--color-ink)); }
.price-card.featured .button.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.faq details { border-top: 1px solid var(--color-rule); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule); }
.faq summary { min-height: 64px; padding-block: var(--space-md); font-weight: 800; cursor: pointer; }
.faq details p { max-width: 54rem; margin: 0 0 var(--space-lg); color: var(--color-muted); line-height: 1.6; }
.statement-footer { display: grid; gap: var(--space-2xl); padding: var(--space-4xl) clamp(1rem, 4vw, 4rem) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.statement-footer > p { max-width: 22ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 5rem); line-height: .96; letter-spacing: -.045em; font-style: normal; }
.statement-footer > div { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid color-mix(in oklch, var(--color-paper) 20%, var(--color-ink)); color: color-mix(in oklch, var(--color-paper) 64%, var(--color-ink)); font-size: var(--text-xs); }
.statement-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.statement-footer a { white-space: nowrap; }

@media (min-width: 40rem) {
  .site-nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); }
  .nav-status { display: block; }
  .nav-actions .nav-cta { display: inline-flex; }
  .lab-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .lab-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .rule-column { border-right: 1px solid var(--color-rule); border-bottom: 0; }
  .sticky-cta { position: sticky; bottom: var(--space-md); z-index: 10; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-footer > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(3rem, 7vw, 7rem); }
  .hero-copy { position: sticky; top: var(--space-xl); }
  .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
  .tour-step { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(4rem, 9vw, 9rem); }
  .tour-step.reverse .step-copy { order: 2; }
  .tour-step.reverse .product-surface { order: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--color-accent-2); }
  .button.primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); transform: translateY(-1px); }
  .button.secondary:hover, .nav-cta:hover { background: var(--color-paper-2); }
  .price-card.featured .button.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
  .lab-head select:hover { background: var(--color-paper-2); }
  .language-menu summary:hover, .language-menu nav a:hover { background: var(--color-paper-2); color: var(--color-accent-2); }
}

@media (pointer: coarse) { .site-nav a, .button, .faq summary { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }