/* Experience Layer — shared design system for all landing pages */
:root {
  --bg:#FAF8F4; --surface:#FFFFFF; --ink:#1A1714; --muted:#6B6358;
  --line:#EAE5DC; --accent:#0E7A63; --accent-2:#0A5A4A;
  --maxw:1080px; --prose:680px; --radius:16px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* nav */
header.nav { position:sticky; top:0; z-index:10; background:rgba(250,248,244,.82);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); }
.nav .row { display:flex; align-items:center; justify-content:space-between; height:64px; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; }
.brand .mark { width:26px; height:26px; flex:none; }
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links a { font-size:15px; color:var(--muted); font-weight:500; }
.nav-links a:hover { color:var(--ink); }
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:999px; border:1px solid transparent; transition:.15s ease; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost { border-color:var(--line); color:var(--ink); background:var(--surface); }
.btn-ghost:hover { border-color:#cfc8bb; }
@media (max-width:620px){ .nav-links a:not(.btn){ display:none; } }

/* hero */
.hero { position:relative; overflow:hidden; padding:96px 0 84px; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 38px, rgba(26,23,20,.035) 38px 39px);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%); }
.eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-2); background:rgba(14,122,99,.08);
  border:1px solid rgba(14,122,99,.16); padding:6px 12px; border-radius:999px; }
h1 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(38px,6vw,64px); line-height:1.05; margin:22px 0 0; max-width:16ch; }
h1 .accent { color:var(--accent); }
.hero-sub { font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--ink);
  font-size:clamp(21px,3vw,30px); line-height:1.2; margin:18px 0 0; }
.lede { font-size:clamp(18px,2.2vw,21px); color:var(--muted); max-width:58ch; margin:16px 0 0; }
.lede .push { color:var(--ink); font-weight:600; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.note { margin-top:14px; font-size:14px; color:var(--muted); }

/* sections + cards */
section { padding:72px 0; border-top:1px solid var(--line); }
.sec-head { max-width:60ch; }
.sec-head h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(28px,3.6vw,40px); margin:0; }
.sec-head p { color:var(--muted); font-size:18px; margin:14px 0 0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:.18s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 14px 36px -22px rgba(26,23,20,.4); }
.card .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(14,122,99,.1); color:var(--accent-2); margin-bottom:16px; }
.card h3 { font-size:19px; margin:0 0 8px; letter-spacing:-.01em; }
.card p { color:var(--muted); margin:0; font-size:15.5px; }

/* manifesto */
.manifesto { background:var(--ink); color:#F4EFE7; border-top:none; }
.manifesto blockquote { font-family:var(--serif); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(24px,3.4vw,36px); line-height:1.28; margin:0; max-width:24ch; }
.manifesto .by { color:#A79E90; margin-top:22px; font-size:15px; }

/* early-access form */
.access { background:var(--surface); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; margin-top:30px; }
.form-grid .full { grid-column:1 / -1; }
label { display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
input, textarea, select { width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:11px 13px; transition:.15s; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,122,99,.14); background:#fff; }
textarea { resize:vertical; min-height:96px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot */
.form-actions { display:flex; align-items:center; gap:14px; margin-top:8px; }
.form-msg { font-size:14px; }
.form-msg.ok { color:var(--accent-2); } .form-msg.err { color:#B42318; }
.success-card { background:rgba(14,122,99,.06); border:1px solid rgba(14,122,99,.2);
  border-radius:var(--radius); padding:26px; max-width:640px; margin-top:30px; }
.success-card h3 { margin:0 0 6px; }

@media (max-width:620px){ .form-grid { grid-template-columns:1fr; } }

/* article / prose (blog + how-it-works) */
.article { padding:64px 0 32px; }
.article .kicker { color:var(--accent-2); font-weight:600; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; }
.article h1 { font-size:clamp(32px,5vw,52px); max-width:20ch; margin:14px 0 0; }
.byline { display:flex; align-items:center; gap:12px; margin:22px 0 0; color:var(--muted); font-size:15px; }
.byline .dot { width:4px; height:4px; border-radius:50%; background:var(--muted); }
.prose { max-width:var(--prose); margin:0 auto; padding:8px 24px 80px; font-size:18px; }
.prose > * { margin:0 0 1.1em; }
.prose h2 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px);
  letter-spacing:-.01em; margin:1.8em 0 .5em; }
.prose h3 { font-size:21px; margin:1.6em 0 .4em; }
.prose a { color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote { border-left:3px solid var(--accent); padding-left:18px; color:var(--muted);
  font-family:var(--serif); font-size:1.06em; }
.prose ul, .prose ol { padding-left:1.3em; } .prose li { margin:.4em 0; }
.prose code { background:#efeae0; padding:2px 6px; border-radius:6px; font-size:.9em; }
.prose img { max-width:100%; border-radius:12px; border:1px solid var(--line); }
.read-next { border-top:1px solid var(--line); padding:30px 0 0; margin-top:20px; }
.read-next a { font-weight:600; color:var(--accent-2); }

/* long-form article extras (blog post + concept page) */
.dek { font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:clamp(18px,2.3vw,22px); line-height:1.4; max-width:40ch; margin:18px 0 0; }
.prose .divider { border:0; height:auto; text-align:center; margin:2.4em 0; }
.prose .divider::before { content:"•   •   •"; letter-spacing:.45em; color:#cabfb0; font-size:13px; }
.prose .beat-label { display:block; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin:0 0 -.3em; }
.prose .beat-sub { font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:1.06em; margin:.1em 0 1.2em; }
.prose .ask { border-left:3px solid var(--accent); background:rgba(14,122,99,.05);
  padding:14px 20px; border-radius:0 12px 12px 0; font-family:var(--serif);
  font-size:1.06em; color:#2b2620; }
.prose .obs b, .prose .layer b { color:var(--ink); }
.prose .layer { padding-left:16px; border-left:2px solid var(--line); }

/* final cta + footer */
.final { text-align:center; }
.final h2 { font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,46px);
  letter-spacing:-.02em; margin:0 auto; max-width:18ch; }
.final p { color:var(--muted); font-size:18px; margin:16px auto 30px; max-width:50ch; }
footer { border-top:1px solid var(--line); padding:34px 0; color:var(--muted); font-size:14px; }
footer .row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }

@media (max-width:760px){ .cards { grid-template-columns:1fr; } .hero { padding:72px 0 60px; } section { padding:56px 0; } }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; scroll-behavior:auto; } }