@font-face{font-family:Newsreader;src:url('assets/fonts/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#f3ece1;
  --paper-soft:#ece3d3;
  --ink:#2a2822;
  --muted:#655d4e;
  --brand-ink:#4d4737;
  --accent:#2f4a3c;
  --accent-deep:#1b2f24;
  --line:#d9cfb9;
  --serif:Newsreader,Georgia,serif;
  --sans:'Hanken Grotesk',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.skip-link{position:absolute;top:-100px;left:20px;background:var(--ink);color:var(--paper);padding:12px;z-index:10;font-family:var(--sans)}
.skip-link:focus{top:12px}

/* ---------- Cover / hero ---------- */

.cover{
  position:relative;
  width:min(100% - 48px,680px);
  margin:0 auto;
  padding:52px 0 36px;
  overflow:hidden;
}

.cover-rings{
  position:absolute;
  top:-60px;
  right:-80px;
  width:min(70vw,420px);
  height:min(70vw,420px);
  fill:none;
  stroke:var(--accent);
  stroke-width:1;
  opacity:.16;
  pointer-events:none;
}

.brand{
  position:relative;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 40px;
  color:var(--brand-ink);
}

.cover-salutation{
  position:relative;
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  font-size:18px;
  margin:0 0 18px;
}

.cover-line{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(34px,7.4vw,54px);
  font-weight:560;
  letter-spacing:-.015em;
  line-height:1.14;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
  max-width:14em;
}

/* ---------- Letter column ---------- */

.letter{width:min(100% - 48px,680px);margin:0 auto;padding:8px 0 90px}

p{margin:0 0 26px;max-width:32em}
strong{font-weight:700}

.salutation{color:var(--ink);font-size:17px;margin-bottom:22px}

.lede{font-size:21px;line-height:1.56;max-width:34em}

.lead-in{font-family:var(--sans);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:46px 0 18px}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- Evidence: paragraph + art-directed stat, side by side on wide screens ---------- */

.evidence-block{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  margin:0 0 30px;
}

.stat{margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.stat-figure{
  font-family:var(--serif);
  font-size:clamp(44px,11vw,64px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink);
  margin:0 0 10px;
}
.stat-figure--sm{font-size:clamp(32px,8vw,42px)}
.stat-text{font-family:var(--sans);font-size:15px;line-height:1.5;margin:0 0 12px;color:var(--brand-ink);max-width:22em}
.stat-source{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:4px 0;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--accent);
}

@media(min-width:860px){
  .letter{width:min(100% - 64px,780px)}
  .evidence-block{grid-template-columns:1.5fr 1fr;align-items:start;gap:40px}
  .evidence-block p{margin-bottom:0}
  .stat{padding-top:0;border-top:none;padding-left:32px;border-left:1px solid var(--line)}
  .stat--left{order:-1;padding-left:0;padding-right:32px;border-left:none;border-right:1px solid var(--line)}
}

.stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 32px;
  margin:4px 0 36px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.stat-grid .stat{border-top:none;padding-top:0}

@media(max-width:560px){
  .stat-grid{grid-template-columns:1fr;gap:24px}
}

/* ---------- WALL-E picture moment ---------- */

.picture{
  margin:44px 0;
  padding:30px 28px;
  background:var(--paper-soft);
  border-left:3px solid var(--accent);
}
.picture p{
  font-style:italic;
  font-size:20px;
  line-height:1.6;
  color:var(--brand-ink);
  margin:0;
  max-width:none;
}

/* ---------- Thesis band: the locked, earned line ---------- */

.thesis-band{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--accent-deep);
  color:var(--paper);
  padding:68px 24px;
  text-align:center;
  margin-top:8px;
  margin-bottom:48px;
}
.thesis-band h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px,7vw,64px);
  line-height:1.14;
  letter-spacing:-.015em;
  max-width:16em;
  margin:0 auto;
  text-wrap:balance;
}

/* ---------- Mechanism ---------- */

.mechanism{
  display:flex;
  align-items:center;
  gap:28px;
  margin:40px 0;
}
.mechanism-rings{
  flex:none;
  width:84px;
  height:84px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  opacity:.55;
}
.mechanism p{margin:0;max-width:none}

@media(max-width:560px){
  .mechanism{flex-direction:column;align-items:flex-start;gap:16px}
  .mechanism-rings{width:56px;height:56px}
}

/* ---------- Session preview card ---------- */

.session-preview{
  margin:0 0 40px;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(255,255,255,.35);
}
.session-preview p{margin:0;max-width:none;font-size:18px}

/* ---------- Offer block ---------- */

.offer{
  margin:44px 0 36px;
  padding:36px 28px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper-soft);
  text-align:center;
}
.offer-eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-ink);
  margin:0 0 22px;
}
.offer-prices{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.price{margin:0}
.price-figure{
  font-family:var(--serif);
  font-size:clamp(40px,9vw,56px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 6px;
  line-height:1;
}
.price-figure span{font-size:.4em;font-weight:500;color:var(--muted)}
.price-note{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0;max-width:none}
.price-divider{
  font-family:var(--sans);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}
.offer-anchor{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  max-width:28em;
  margin:0 auto 24px;
}
.anti-guarantee{
  font-weight:650;
  font-size:19px;
  color:var(--ink);
  padding-top:22px;
  border-top:1px solid var(--line);
  margin:0;
  max-width:none;
}

/* ---------- CTA, signature, P.S. ---------- */

.button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  min-height:64px;
  padding:17px 56px;
  background:var(--accent-deep);
  color:var(--paper);
  border:1px solid var(--accent-deep);
  text-decoration:none;
  text-align:center;
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  font-style:italic;
  line-height:1.1;
  letter-spacing:-.005em;
  margin:12px auto 18px;
}
.button:hover{background:var(--accent);border-color:var(--accent)}

@media(max-width:480px){
  .button{display:flex;width:100%;padding:16px 24px;font-size:22px}
}

.join-note{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--muted)}

.signature{margin-top:38px;letter-spacing:.01em}

.ps{margin-top:46px;padding-top:30px;border-top:1px solid var(--line)}

/* ---------- Responsive ---------- */

@media(min-width:720px){
  body{font-size:20px}
  .cover{padding:76px 0 48px}
}

@media(max-width:480px){
  body{font-size:18px;line-height:1.6}
  .cover{width:calc(100% - 40px);padding:34px 0 26px}
  .letter{width:calc(100% - 40px);padding:4px 0 56px}
  .brand{margin-bottom:30px}
  .lede{font-size:19px}
  .thesis-band{padding:48px 20px;margin-bottom:36px}
  .offer{padding:28px 18px}
  .offer-prices{gap:18px}
}

@media(max-width:360px){
  .offer-prices{flex-direction:column;gap:20px}
  .price-divider{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}