/* THE INNER ROOM — landing. Tokens from brandbook.md (the live app identity). */
:root{
  --ground:#f6f1e8; --surface:#f1ece4; --linen:#e6ddd0;
  --ink:#242927; --ink-deep:#2b2620; --muted:#5f645f; --taupe:#796554;
  --hair:rgba(36,41,39,0.14); --on-ink:#ffffff;
  --gold:#a8874e; --gold-on-ink:#c9a86a;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp6:24px; --sp8:32px;
  --sp12:48px; --sp16:64px; --sp24:96px; --sp32:128px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Manrope,system-ui,sans-serif; font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}

.wrap{max-width:660px; margin:0 auto; padding:0 var(--sp4)}
.wrap-wide{max-width:1120px; margin:0 auto; padding:0 var(--sp4)}

/* ---- header ---- */
.site-head{padding:var(--sp6) var(--sp4); border-bottom:1px solid var(--hair)}
.site-head .inner{max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp4)}
.brand{display:flex; align-items:center; gap:var(--sp3); text-decoration:none}
.brand img{height:34px; width:auto}
.brand .wordmark{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300; font-size:22px; letter-spacing:-0.5px; color:var(--ink)}
.loginlink{font-size:13px; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:2px; white-space:nowrap}
.loginlink:hover{color:var(--ink)}

/* ---- gold: the one rich note, italic, never more than one per screen ---- */
.gold{font-style:italic; color:var(--gold)}
.invert .gold{color:var(--gold-on-ink)}

/* ---- the signature label ---- */
.eyebrow{font-size:11px; font-weight:600; line-height:1.2; letter-spacing:2.42px;
  text-transform:uppercase; color:var(--taupe); margin:0 0 var(--sp4)}

/* ---- sections: rhythm comes from what a section IS, not from a divider ---- */
section{padding:var(--sp24) 0}
section.tight{padding:var(--sp16) 0}
section + section .wrap > .eyebrow:first-child{margin-top:0}

/* ---- headings: the piece that was missing ---- */
h2.section-title{font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:44px; line-height:1.08; letter-spacing:-1.54px; margin:0 0 var(--sp8);
  text-wrap:balance; color:var(--ink)}
h3.subhead{font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:22px; line-height:1.3; margin:var(--sp12) 0 var(--sp3); color:var(--ink)}
p{margin:0 0 var(--sp4); max-width:63ch}
p.line{margin:0 0 var(--sp2)}
p.lead{font-size:19px; line-height:1.55}
strong{font-weight:700; color:var(--ink)}
em{font-style:italic}

/* ---- hero: text and her face, side by side ---- */
.hero{padding:var(--sp16) 0 var(--sp24); border-bottom:1px solid var(--hair)}
.hero .cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp16); align-items:center}
.hero .kicker{font-size:11px; font-weight:600; letter-spacing:2.42px; text-transform:uppercase;
  color:var(--taupe); margin:0 0 var(--sp6); max-width:38ch; line-height:1.5}
.display{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:60px; line-height:0.98; letter-spacing:-2.8px; margin:0 0 var(--sp6);
  text-wrap:balance; color:var(--ink)}
.hero .subline{font-size:18px; line-height:1.55; color:var(--ink); max-width:46ch; margin:0 0 var(--sp8)}
.hero-portrait{width:100%; height:100%; min-height:420px; object-fit:cover}

/* ---- the pulled line: a sentence that stops the page ---- */
.pull{padding:var(--sp16) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:var(--sp16) 0}
.pull p{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:44px; line-height:1.05; letter-spacing:-1.8px; color:var(--ink);
  max-width:20ch; margin:0; text-wrap:balance}

/* ---- the one dark stretch on the page ---- */
.invert{background:var(--ink); color:var(--on-ink)}
.invert h2.section-title,.invert h3.subhead,.invert strong{color:var(--on-ink)}
.invert p{color:rgba(255,255,255,0.86)}
.invert .eyebrow{color:#b79a80}
.invert .pull{border-color:rgba(255,255,255,0.18)}
.invert .pull p{color:var(--on-ink)}

/* ---- a screen from the app ---- */
.figure{margin:var(--sp12) 0}
.figure img{border:1px solid var(--hair); width:100%}
.figure figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin-top:var(--sp3); max-width:56ch}
.invert .figure img{border-color:rgba(255,255,255,0.18)}
.invert .figure figcaption{color:rgba(255,255,255,0.66)}
.figure-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp6); margin:var(--sp12) 0}
.figure-pair figure{margin:0}

/* ---- buy ---- */
.buy{margin:var(--sp8) 0 0}
.buy button{
  display:inline-block; background:var(--ink); color:var(--on-ink);
  font-family:Manrope,sans-serif; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:20px 40px; border:none; border-radius:28px;
  cursor:pointer; line-height:1;
}
.buy button:hover{background:var(--ink-deep)}
.buy .smallprint{font-size:12px; line-height:1.5; color:var(--muted); margin-top:var(--sp4); max-width:52ch}
.invert .buy button{background:var(--on-ink); color:var(--ink)}
.invert .buy .smallprint{color:rgba(255,255,255,0.66)}

/* ---- price ---- */
.price-block{border:1px solid var(--hair); background:var(--surface); padding:var(--sp12); margin:var(--sp8) 0}
.price-figure{font-family:"Cormorant Garamond",Georgia,serif; font-weight:300;
  font-size:72px; line-height:1; letter-spacing:-3px; color:var(--gold); margin:0 0 var(--sp2)}
.price-then{font-size:13px; color:var(--muted); margin:0 0 var(--sp8)}
.refunds{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp8); margin-top:var(--sp8);
  padding-top:var(--sp8); border-top:1px solid var(--hair)}
.refunds h4{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:19px;
  margin:0 0 var(--sp2); color:var(--ink)}
.refunds p{font-size:14px; line-height:1.55; color:var(--muted); margin:0}

/* ---- the two scales, side by side ---- */
.scales{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp8); margin:var(--sp8) 0 var(--sp12)}
.scales > div{border-top:2px solid var(--ink); padding-top:var(--sp4)}
.scales h4{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:22px;
  margin:0 0 var(--sp3); color:var(--ink)}
.scales p{font-size:15px; margin:0; color:var(--muted)}
.invert .scales > div{border-top-color:var(--on-ink)}
.invert .scales h4{color:var(--on-ink)}
.invert .scales p{color:rgba(255,255,255,0.75)}

/* ---- the promise list ---- */
.promise{margin:var(--sp8) 0}
.promise > div{padding:var(--sp6) 0; border-bottom:1px solid var(--hair)}
.promise > div:first-child{border-top:1px solid var(--hair)}
.promise h4{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:24px;
  line-height:1.2; margin:0 0 var(--sp2); color:var(--ink); max-width:24ch}
.promise p{margin:0; color:var(--muted); font-size:15px}

/* ---- a plain run of lines ---- */
.runon{border-left:2px solid var(--linen); padding-left:var(--sp6); margin:var(--sp6) 0}
.runon p{margin:0 0 var(--sp2); color:var(--ink)}
.invert .runon{border-left-color:rgba(255,255,255,0.28)}

/* ---- FAQ ---- */
.faq h3{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:20px;
  line-height:1.3; margin:var(--sp8) 0 var(--sp2); color:var(--ink)}
.faq h3:first-of-type{margin-top:0}

/* ---- closing ---- */
.closing{text-align:center; padding:var(--sp32) 0}
.closing p{max-width:34ch; margin-left:auto; margin-right:auto}
.closing .display{font-size:44px; letter-spacing:-1.6px; max-width:18ch; margin-left:auto; margin-right:auto}
.closing .buy{display:flex; justify-content:center}

/* ---- footer ---- */
.site-foot{padding:var(--sp16) var(--sp4) var(--sp24); border-top:1px solid var(--hair); background:var(--surface)}
.site-foot .inner{max-width:1120px; margin:0 auto}
.site-foot .brand{margin-bottom:var(--sp8)}
.site-foot p{font-size:12px; line-height:1.55; color:var(--muted); max-width:78ch; margin:0 0 var(--sp3)}
.site-foot a{color:var(--muted)}

/* ---- cookie banner ---- */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--ink);
  color:var(--on-ink); padding:var(--sp6) var(--sp4)}
.cookie .inner{max-width:1120px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp6); flex-wrap:wrap}
.cookie p{font-size:12px; line-height:1.5; color:var(--on-ink); margin:0; max-width:56ch}
.cookie .actions{display:flex; gap:var(--sp3); flex-shrink:0}
.cookie button{font-family:Manrope,sans-serif; font-size:10px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:12px 20px; cursor:pointer; border-radius:0; line-height:1}
.cookie .accept{background:var(--on-ink); color:var(--ink); border:none}
.cookie .decline{background:transparent; color:var(--on-ink); border:1px solid rgba(255,255,255,0.4)}

@media (max-width:900px){
  .hero .cols{grid-template-columns:1fr; gap:var(--sp8)}
  .hero-portrait{min-height:0; aspect-ratio:4/3}
  .figure-pair,.refunds,.scales{grid-template-columns:1fr; gap:var(--sp6)}
}
@media (max-width:640px){
  body{font-size:15px}
  .display{font-size:40px; letter-spacing:-1.6px}
  h2.section-title{font-size:30px; letter-spacing:-1px}
  .pull p{font-size:30px; letter-spacing:-1.1px; max-width:none}
  .price-figure{font-size:56px}
  .promise h4{font-size:20px}
  section{padding:var(--sp16) 0}
  .closing{padding:var(--sp24) 0}
  .price-block{padding:var(--sp6)}
}