:root {
  --bg: #f2f1eb; --paper: #fbfaf6; --ink: #161815; --muted: #666a61; --rule: #d4d3ca;
  --signal: #d9ff55; --signal-deep: #bce932; --dark: #171a16;
  --serif: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif;
  --sans: "PingFang SC", "Helvetica Neue", Arial, sans-serif; --max: 1540px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
a { color: inherit; }
img { display: block; width: 100%; height: auto; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; color: var(--ink); background: var(--signal); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 64px); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); transition: border-color 180ms; }
.site-header.scrolled { border-color: var(--rule); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand { justify-self: start; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--ink); background: var(--signal); border: 1px solid var(--ink); border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: -.04em; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
nav { display: flex; gap: 30px; }
nav a { color: var(--muted); font-size: 12px; text-decoration: none; }
nav a:hover { color: var(--ink); }
.header-cta { justify-self: end; padding: 10px 17px; cursor: pointer; background: transparent; border: 1px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 600; }
.header-cta:hover { background: var(--signal); }
main, footer { width: min(100%, var(--max)); margin-inline: auto; }
.hero { min-height: 100vh; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .83fr) minmax(480px, 1.17fr); gap: 5vw; align-items: center; padding: 150px clamp(24px, 6vw, 92px) 54px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .chapter { margin: 0 0 24px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow > span { width: 8px; height: 8px; background: var(--signal-deep); border: 1px solid var(--ink); border-radius: 50%; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 32px; font-family: var(--serif); font-size: clamp(52px, 6.2vw, 96px); line-height: 1.08; letter-spacing: -.065em; font-weight: 600; }
h1 em { position: relative; font-style: normal; }
h1 em::after { content: ""; position: absolute; z-index: -1; right: -10px; bottom: 3px; left: -8px; height: .22em; background: var(--signal); transform: rotate(-1deg); }
.hero-lede { max-width: 650px; margin-bottom: 0; color: #474b43; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.primary-cta { display: inline-flex; min-width: 220px; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--paper); cursor: pointer; background: var(--dark); border: 1px solid var(--dark); transition: 160ms; }
.primary-cta:hover { color: var(--ink); background: var(--signal); }
.text-cta { font-size: 13px; text-underline-offset: 5px; }
.hero-note { margin-top: 24px; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.hero-product { position: relative; z-index: 2; padding: 32px 0 36px 28px; }
.product-window { overflow: hidden; background: #fff; border: 1px solid #babcb5; border-radius: 16px; box-shadow: 0 30px 70px rgba(31, 35, 28, .15); transform: rotate(.8deg); }
.window-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 15px; color: #74786e; background: #f4f4f0; border-bottom: 1px solid #ddd; font-size: 10px; }
.window-bar span { width: 8px; height: 8px; background: #d4d4ce; border-radius: 50%; }
.window-bar b { margin-left: auto; font-weight: 500; }
.product-window img { aspect-ratio: 1.15 / 1; object-fit: cover; object-position: top; }
.floating-proof { position: absolute; z-index: 3; background: var(--paper); border: 1px solid var(--ink); box-shadow: 8px 8px 0 rgba(23, 26, 22, .08); }
.proof-a { top: 4px; right: 5%; min-width: 185px; padding: 17px 20px; transform: rotate(-2deg); }
.proof-a small, .proof-a strong { display: block; }
.proof-a small { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.proof-a strong { margin-top: 4px; font-family: var(--serif); font-size: 15px; }
.proof-b { right: -4px; bottom: 6px; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 11px; }
.proof-b i { width: 8px; height: 8px; background: var(--signal-deep); border-radius: 50%; box-shadow: 0 0 0 4px rgba(188, 233, 50, .2); }
.hero-orbit { position: absolute; border: 1px solid rgba(22, 24, 21, .08); border-radius: 50%; }
.orbit-one { width: 560px; height: 560px; right: -120px; top: 40px; }
.orbit-two { width: 330px; height: 330px; right: 30%; bottom: -140px; }
.trust-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border-block: 1px solid var(--rule); }
.trust-strip span { padding: 16px 18px; color: var(--muted); border-right: 1px solid var(--rule); font-size: 11px; text-align: center; }
.trust-strip span:last-child { border-right: 0; }
.section-pad { padding: 124px clamp(24px, 6vw, 92px); border-top: 1px solid var(--rule); }
.section-head { display: grid; grid-template-columns: minmax(170px, .32fr) 1fr; gap: 5vw; margin-bottom: 70px; }
.section-head h2, .safety-copy h2, .final-copy h2 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); line-height: 1.18; letter-spacing: -.045em; font-weight: 600; }
.section-head > div > p { max-width: 760px; color: var(--muted); font-size: 18px; }
.problem { background: var(--paper); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--rule); border: 1px solid var(--rule); gap: 1px; }
.problem-grid article { min-height: 320px; padding: 32px; background: var(--paper); }
.problem-grid article > span { color: var(--muted); font-size: 11px; }
.problem-grid h3 { margin: 94px 0 14px; font-family: var(--serif); font-size: 30px; }
.problem-grid p { max-width: 330px; color: var(--muted); }
.positioning { display: grid; grid-template-columns: .65fr 1.35fr; gap: 6vw; margin-top: 100px; padding-top: 32px; border-top: 1px solid var(--ink); }
.positioning p { color: var(--muted); }
.positioning strong { max-width: 760px; font-family: var(--serif); font-size: clamp(28px, 3vw, 46px); line-height: 1.4; font-weight: 600; }
.workflow { color: var(--paper); background: var(--dark); }
.workflow .chapter, .workflow .section-head > div > p { color: #aeb2a8; }
.workflow-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #50534c; }
.workflow-list li { display: grid; grid-template-columns: 80px 1fr 140px; align-items: center; min-height: 145px; border-bottom: 1px solid #50534c; }
.workflow-list b { color: var(--signal); font-size: 11px; }
.workflow-list h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 28px; }
.workflow-list p { max-width: 720px; margin-bottom: 0; color: #b8bbb3; }
.workflow-list > li > span { color: #81857c; font-size: 10px; letter-spacing: .14em; text-align: right; text-transform: uppercase; }
.proof { background: var(--paper); }
.proof-lead, .proof-grid figure { margin: 0; }
.zoomable { display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; background: #e8e8e2; border: 0; }
.zoomable img { transition: transform 450ms cubic-bezier(.2, .7, .2, 1); }
.zoomable:hover img { transform: scale(1.012); }
.proof-lead .zoomable { max-height: 730px; border: 1px solid var(--rule); }
.proof-lead img { object-position: top; }
figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; color: var(--muted); font-size: 11px; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.proof-grid .zoomable { aspect-ratio: 3 / 2; border: 1px solid var(--rule); }
.proof-grid img { height: 100%; object-fit: cover; object-position: top; }
.capability-ledger { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 92px; border-block: 1px solid var(--ink); }
.capability-ledger > div { min-height: 225px; padding: 28px 28px 28px 0; }
.capability-ledger > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.capability-ledger small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.capability-ledger strong { display: block; margin: 38px 0 12px; font-family: var(--serif); font-size: 26px; }
.capability-ledger p { color: var(--muted); font-size: 14px; }
.safety { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: #e9e8e1; }
.safety-copy { position: sticky; top: 120px; align-self: start; }
.safety-copy > p:last-child { max-width: 520px; color: var(--muted); font-size: 17px; }
.safety-cards { border-top: 1px solid var(--ink); }
.safety-cards article { display: grid; grid-template-columns: 55px 1fr; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.safety-cards i { font-style: normal; }
.safety-cards h3 { margin-bottom: 10px; font-family: var(--serif); font-size: 24px; }
.safety-cards p { margin-bottom: 0; color: var(--muted); }
.who { background: var(--paper); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.who-grid > div { padding: 36px; background: var(--paper); }
.who-grid strong { font-family: var(--serif); font-size: 26px; }
.who-grid ul { margin: 30px 0 0; padding: 0; list-style: none; }
.who-grid li { padding: 14px 0; color: var(--muted); border-top: 1px solid var(--rule); }
.who-grid li::before { content: "→"; margin-right: 12px; color: var(--ink); }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 27px 0; cursor: pointer; font-family: var(--serif); font-size: 22px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font-family: var(--sans); font-weight: 300; transition: transform 180ms; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 820px; padding: 0 0 28px; color: var(--muted); }
.final-cta { display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: end; color: var(--paper); background: var(--dark); }
.final-copy > p:last-child { max-width: 670px; color: #b7bbb1; font-size: 17px; }
.final-button { width: min(330px, 100%); height: 150px; display: flex; align-items: flex-end; justify-content: space-between; padding: 22px; color: var(--ink); cursor: pointer; background: var(--signal); border: 0; }
.final-button b { font-size: 26px; }
footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 34px clamp(24px, 6vw, 92px); background: var(--paper); border-top: 1px solid var(--rule); font-size: 11px; }
footer > p { margin: 0; color: var(--muted); text-align: center; }
.footer-meta { display: flex; justify-content: flex-end; gap: 18px; color: var(--muted); }
.footer-meta a { opacity: .28; text-decoration: none; transition: opacity 160ms; }
.footer-meta a:hover, .footer-meta a:focus { opacity: 1; }
.waitlist-modal, .lightbox { padding: 0; color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 30px 100px rgba(0, 0, 0, .3); }
.waitlist-modal { width: min(680px, calc(100vw - 32px)); min-height: 610px; }
.waitlist-modal::backdrop, .lightbox::backdrop { background: rgba(12, 14, 11, .68); backdrop-filter: blur(5px); }
.modal-close, .lightbox-close { position: absolute; z-index: 2; top: 18px; right: 18px; padding: 8px 10px; cursor: pointer; background: transparent; border: 0; font-size: 11px; }
#waitlist-form { min-height: 610px; }
.modal-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0; }
.modal-progress i { height: 4px; background: #deded6; }
.modal-progress i.active { background: var(--ink); }
.form-step, .form-success { padding: 72px 58px 48px; }
.form-step h2, .form-success h2 { margin-bottom: 12px; font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.2; }
.form-step > p:not(.eyebrow):not(.form-message):not(.form-hint), .form-success p { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 12px; }
.chips button { padding: 11px 14px; cursor: pointer; background: transparent; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; }
.chips button:hover, .chips button.selected { background: var(--signal); border-color: var(--ink); }
.form-hint { min-height: 22px; color: #a45931; font-size: 11px; opacity: 0; }
.form-hint.show { opacity: 1; }
.form-next, .form-submit, .form-success button { margin-top: 28px; padding: 14px 20px; color: var(--paper); cursor: pointer; background: var(--ink); border: 1px solid var(--ink); }
.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.form-nav .form-next, .form-nav .form-submit { margin-top: 0; }
.form-nav > button:first-child { padding: 10px 0; cursor: pointer; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.form-step label { display: block; margin-top: 24px; font-size: 12px; font-weight: 600; }
.form-step input[type="email"], .form-step textarea { width: 100%; margin-top: 8px; padding: 13px 14px; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 0; outline: none; }
.form-step input:focus, .form-step textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--signal); }
.consent { display: flex !important; align-items: flex-start; gap: 10px; color: var(--muted); font-weight: 400 !important; }
.consent input { margin-top: 4px; }
.form-message { min-height: 22px; margin: 16px 0 0; color: #a43f32; font-size: 12px; }
.form-success { text-align: center; }
.form-success > span { display: grid; width: 70px; height: 70px; place-items: center; margin: 60px auto 28px; background: var(--signal); border: 1px solid var(--ink); border-radius: 50%; font-size: 28px; }
.lightbox { width: min(96vw, 1500px); max-height: 94vh; }
.lightbox img { max-height: 90vh; object-fit: contain; }
.lightbox-close { color: var(--paper); background: var(--dark); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .65, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; } nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 130px; } .hero-product { padding-left: 8vw; }
  .trust-strip { grid-template-columns: 1fr 1fr; } .trust-strip span:nth-child(2) { border-right: 0; } .trust-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .section-head, .positioning { grid-template-columns: 1fr; } .section-head { gap: 16px; }
  .problem-grid, .capability-ledger { grid-template-columns: 1fr; } .problem-grid article { min-height: 220px; } .problem-grid h3 { margin-top: 58px; }
  .capability-ledger > div + div { padding-left: 0; border-top: 1px solid var(--rule); border-left: 0; }
  .safety { grid-template-columns: 1fr; } .safety-copy { position: static; } .final-cta { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr auto; gap: 20px; } footer > p { display: none; }
}

@media (max-width: 680px) {
  .site-header { height: 66px; padding-inline: 18px; } .brand-mark { width: 32px; height: 32px; } .header-cta { padding: 8px 13px; }
  .hero { padding: 112px 20px 34px; } h1 { font-size: clamp(46px, 14vw, 67px); } .hero-actions { align-items: flex-start; flex-direction: column; } .primary-cta { width: 100%; }
  .hero-product { padding: 26px 0 38px 12px; } .proof-a { right: 0; min-width: 150px; padding: 12px; } .proof-b { right: 0; } .product-window { border-radius: 10px; } .product-window img { aspect-ratio: .96 / 1; }
  .section-pad { padding: 84px 20px; } .section-head { margin-bottom: 48px; } .section-head h2, .safety-copy h2, .final-copy h2 { font-size: 40px; }
  .problem-grid, .proof-grid, .who-grid { grid-template-columns: 1fr; }
  .workflow-list li { grid-template-columns: 46px 1fr; padding: 24px 0; } .workflow-list li > span { display: none; }
  .capability-ledger > div { min-height: auto; } .safety-cards article { grid-template-columns: 34px 1fr; }
  .final-button { width: 100%; } footer { padding: 28px 20px; } .footer-meta > span { display: none; }
  .form-step, .form-success { padding: 70px 24px 36px; } .waitlist-modal, #waitlist-form { min-height: min(650px, calc(100vh - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
