/* Landing page styles.
 *
 * Kept in its own file because the application serves public files under
 * style-src 'self' with no inline allowance; an inline <style> would be
 * dropped and the page would render unstyled.
 *
 * This page is served outside the application shell, so it does not link
 * styles.css (whose bare element rules would fight its layout). Every colour
 * below is instead a copy of a token in styles.css, and tests/landing.test.js
 * asserts that each oklch() literal here exists there, so the two cannot
 * drift apart silently.
 */
:root{
  --obsidian: oklch(12.5% 0.009 175);   /* --ink-950 */
  --graphite: oklch(16.5% 0.011 175);   /* --ink-900 */
  --lifted:   oklch(19.5% 0.012 175);   /* --ink-850 */
  --edge:     oklch(31% 0.012 175);     /* --ink-700 */
  --ivory:    oklch(94% 0.007 175);     /* --ink-100 */
  --body:     oklch(84% 0.009 175);     /* --ink-200 */
  --muted:    oklch(70% 0.012 175);     /* --ink-350 */
  --faint:    oklch(54% 0.014 175);     /* --ink-500 */
  --teal:     oklch(72% 0.105 174);     /* --accent-500 */
  --teal-hover: oklch(61% 0.102 174);   /* --accent-600 */
  --teal-deep: oklch(52% 0.088 174);    /* --accent-700 */
  --amber:    oklch(79% 0.125 84);      /* --warning-500 */
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--obsidian); color:var(--body);
  font-family:var(--sans); font-size:1rem; line-height:1.62; letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--teal-deep); color:var(--ivory)}
.shell{max-width:64rem; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2.5rem); position:relative; z-index:1}

/* The architectural grid sits behind everything and is painted by
 * landing-grid.js. Fixed and inset, so it can never widen the page; the body
 * keeps its own background as the fallback when the script does not run. */
.arch-grid{
  position:fixed; inset:0; z-index:0;
  display:block; width:100%; height:100%;
  pointer-events:none;
}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:clamp(1.5rem, 4vh, 2.5rem); padding-bottom:clamp(1.5rem, 4vh, 2.5rem);
}
/* Both header links are sized to a 44px touch target rather than to their text. */
.wordmark{
  display:inline-flex; align-items:center; min-height:2.75rem;
  font-family:var(--serif); font-size:1.125rem; color:var(--ivory);
  text-decoration:none; letter-spacing:-0.01em;
}
.wordmark em{font-style:normal; color:var(--teal)}
.nav-cta{
  display:inline-flex; align-items:center; min-height:2.75rem;
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding:0.5rem 0.875rem; border:1px solid var(--edge); border-radius:0.375rem;
  transition:color .25s ease-out, border-color .25s ease-out;
}
.nav-cta:hover{color:var(--ivory); border-color:var(--faint)}

/* ---------- hero ---------- */
.hero{padding:clamp(4rem, 12vh, 8rem) 0 clamp(5rem, 14vh, 9rem)}
.eyebrow{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--teal); margin-bottom:1.5rem;
}
h1{
  font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(2.5rem, 6vw, 4.25rem); line-height:1.12; letter-spacing:-0.025em;
  max-width:16ch; margin-bottom:1.75rem;
}
.hero p{
  font-size:clamp(1.0625rem, 1.6vw, 1.25rem); color:var(--muted);
  max-width:52ch; margin-bottom:2.75rem;
}
.hero p strong{color:var(--body); font-weight:500}

.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem}
.cta{
  display:inline-block; font-weight:600; font-size:1rem; letter-spacing:0.01em;
  color:var(--obsidian); background:var(--teal); text-decoration:none;
  padding:0.875rem 1.75rem; border-radius:0.625rem; min-height:2.75rem;
  transition:background .25s ease-out, transform .25s ease-out;
}
.cta:hover{background:var(--teal-hover); transform:translateY(-1px)}
.cta-secondary{
  font-weight:600; font-size:0.9375rem; color:var(--body); text-decoration:none;
  padding:0.875rem 0.25rem; min-height:2.75rem; display:inline-flex; align-items:center;
  border-bottom:1px solid var(--edge); transition:color .25s ease-out, border-color .25s ease-out;
}
.cta-secondary:hover{color:var(--ivory); border-color:var(--teal)}
.cta:focus-visible, .cta-secondary:focus-visible, .nav-cta:focus-visible, a:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px;
}
.cta-note{
  display:block; margin-top:1rem; font-family:var(--mono); font-size:0.75rem;
  letter-spacing:0.04em; color:var(--muted); max-width:52ch;
}

/* ---------- sections ---------- */
section{padding:clamp(4rem, 10vh, 7rem) 0; border-top:1px solid var(--edge)}
.section-label{
  font-family:var(--mono); font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.25rem;
}
h2{
  font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(1.75rem, 3.4vw, 2.5rem); line-height:1.18; letter-spacing:-0.025em;
  max-width:22ch; margin-bottom:1.25rem;
}
.lede{max-width:56ch; color:var(--muted); font-size:1.0625rem}
.lede + .lede{margin-top:1rem}

/* problem: loss aversion, editorial ledger */
.ledger{margin-top:3rem; max-width:44rem}
.ledger-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:baseline;
  padding:1.125rem 0; border-top:1px solid var(--edge);
}
.ledger-row:last-child{border-bottom:1px solid var(--edge)}
.ledger-q{color:var(--body)}
.ledger-a{font-family:var(--mono); font-size:0.8125rem; color:var(--muted); text-align:right; white-space:nowrap}

/* how it works: numbered editorial steps */
.steps{margin-top:3.5rem; list-style:none}
.step{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:1.5rem;
  padding:1.75rem 0; border-top:1px solid var(--edge);
}
.step:last-child{border-bottom:1px solid var(--edge)}
.step-num{
  font-family:var(--serif); font-size:1.75rem; color:var(--teal);
  line-height:1.2; letter-spacing:-0.02em;
}
.step h3{
  font-size:1.125rem; font-weight:600; color:var(--ivory);
  letter-spacing:-0.015em; margin-bottom:0.375rem;
}
.step p{color:var(--muted); max-width:52ch; font-size:0.9375rem}

/* product moment: the decision preview */
.moment{padding:clamp(5rem, 12vh, 8rem) 0; border-top:1px solid var(--edge)}
.moment-inner{display:grid; gap:clamp(2.5rem, 5vw, 4rem)}
@media(min-width:56rem){
  .moment-inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center}
}
.artifact{
  background:var(--graphite); border:1px solid var(--edge); border-radius:0.875rem;
  padding:clamp(1.5rem, 3vw, 2.25rem); box-shadow:0 24px 60px -32px rgba(0,0,0,.7);
}
.artifact-label{
  font-family:var(--mono); font-size:0.6875rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1.25rem;
}
.artifact-rec{
  font-family:var(--serif); font-size:clamp(1.375rem, 2.4vw, 1.75rem); color:var(--ivory);
  line-height:1.25; letter-spacing:-0.02em; margin-bottom:1.5rem;
}
.artifact-rows{display:grid; gap:0}
.artifact-row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem; align-items:baseline;
  padding:0.75rem 0; border-top:1px solid var(--edge); font-size:0.875rem;
}
.artifact-row dt{font-family:var(--mono); font-size:0.6875rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint)}
.artifact-row dd{color:var(--body)}
.confidence{display:inline-flex; align-items:center; gap:0.5rem}
.confidence::before{content:""; flex:none; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--amber)}
.artifact-edit{
  margin-top:1.5rem; font-family:var(--mono); font-size:0.75rem; color:var(--teal);
  letter-spacing:0.04em;
}

/* trust: objections answered in prose, no card grid */
.trust-list{margin-top:3rem; list-style:none; max-width:44rem}
.trust-list li{
  padding:1.5rem 0; border-top:1px solid var(--edge);
  display:grid; grid-template-columns:minmax(0,1fr); gap:0.375rem;
}
.trust-list li:last-child{border-bottom:1px solid var(--edge)}
.trust-list h3{font-size:1.0625rem; font-weight:600; color:var(--ivory); letter-spacing:-0.015em}
.trust-list p{color:var(--muted); font-size:0.9375rem; max-width:56ch}

/* final cta */
.final{
  padding:clamp(5rem, 14vh, 9rem) 0; border-top:1px solid var(--edge);
  text-align:left;
}
.final h2{max-width:20ch}
.final .cta-row{margin-top:2.5rem}

footer{
  padding:2.5rem 0 3rem; border-top:1px solid var(--edge);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.04em; color:var(--faint);
}

/* motion: one quiet entrance, scroll reveals, reduced-motion safe.
 * Reveals start hidden only once landing.js has marked the document as
 * scripted; without JavaScript every section is simply visible. */
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.hero > *{animation:rise .9s cubic-bezier(.22,1,.36,1) both}
.hero > *:nth-child(2){animation-delay:.08s}
.hero > *:nth-child(3){animation-delay:.16s}
.hero > *:nth-child(4){animation-delay:.24s}
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.js .reveal.is-visible{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero > *, .js .reveal{animation:none; transition:none; opacity:1; transform:none}
}