/* ============================================================
   Loresa — landing styles
   Cool-neutral base · single orange accent used with restraint
   ============================================================ */

:root{
  /* ---- color tokens ---- */
  --c-white:  #FFFFFF;
  --c-gray50: #F4F4F3;
  --c-gray200:#E4E4E2;
  --c-gray500:#8A8A86;
  --c-ink:    #1A1A19;
  --c-orange: #6A2A6E;       /* signature accent (prune/plum) — wordmark, primary CTA, waterline only */
  --c-orange-hover:#5D2561;  /* ~12% darker */
  --c-orange-press:#512054;  /* ~24% darker */

  /* ---- fonts (overridden per variant) ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Newsreader', Georgia, serif;
  --display-settings: normal;
  --display-weight: 600;
  --display-tracking: -0.02em;

  /* ---- spacing scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- radii ---- */
  --r-card:8px;
  --r-btn:6px;

  --measure:34rem;          /* prose measure */
  --gutter:22px;
}

/* ---- typographic variants (swapped via [data-variant]) ---- */
[data-variant="v1"]{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Newsreader', Georgia, serif;
  --display-settings: normal;
  --display-weight: 600;
  --display-tracking: -0.02em;
}
[data-variant="v2"]{
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, sans-serif;
  --display-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
  --display-weight: 480;
  --display-tracking: -0.015em;
}
[data-variant="v3"]{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --display-settings: normal;
  --display-weight: 600;
  --display-tracking: -0.02em;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--c-ink);color:var(--c-white);}

/* ---------------- layout primitives ---------------- */
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-wide{max-width:62rem;margin-inline:auto;padding-inline:var(--gutter);}
.band{background:var(--c-gray50);}

section{padding-block:clamp(56px,11vw,116px);}
.section-mark{
  font-family:var(--font-display);
  font-size:14px;font-weight:500;letter-spacing:0.01em;
  color:var(--c-gray500);
  margin:0 0 var(--s4);
}

/* ---------------- type ---------------- */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:var(--display-tracking);
  line-height:1.04;
  text-wrap:balance;
  margin:0;
}
h1.hero-h1{
  font-size:clamp(2.35rem,8.7vw,4.25rem);
  line-height:1.02;
}
h2.h2{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.7rem,5.6vw,2.6rem);
  line-height:1.08;
  text-wrap:balance;
  margin:0 0 var(--s5);
}
.lede{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  line-height:1.55;
  color:var(--c-ink);
}
p{margin:0 0 var(--s5);text-wrap:pretty;}
p:last-child{margin-bottom:0;}
.muted{color:var(--c-gray500);}
strong{font-weight:600;}
[data-variant="v1"] strong{font-weight:650;}

/* ---------------- buttons & links ---------------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:600;letter-spacing:-0.005em;
  color:var(--c-white);
  background:var(--c-orange);
  border:none;border-radius:var(--r-btn);
  padding:17px 30px;min-height:54px;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease, transform .16s ease;
  width:100%;
}
.btn-primary:hover{background:var(--c-orange-hover);}
.btn-primary:active{background:var(--c-orange-press);transform:translateY(1px);}

.softlink{
  display:inline-block;
  font-family:var(--font-body);
  font-size:1rem;color:var(--c-gray500);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.softlink:hover{color:var(--c-ink);border-bottom-color:var(--c-gray200);}

.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);}
.cta-stack .micro{margin:0;font-size:0.9rem;color:var(--c-gray500);line-height:1.5;}

/* inline text link */
a.tlink{color:var(--c-ink);text-decoration:none;border-bottom:1px solid var(--c-gray200);}
a.tlink:hover{border-bottom-color:var(--c-ink);}

/* ---------------- header ---------------- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.masthead.scrolled{border-bottom-color:var(--c-gray200);}
.masthead-in{
  max-width:62rem;margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:-0.01em;
  font-size:1.35rem;
  color:var(--c-orange);
  text-decoration:none;
}
.mast-link{
  font-family:var(--font-display);
  font-size:0.95rem;font-weight:500;
  color:var(--c-ink);text-decoration:none;
  border-bottom:1px solid var(--c-gray200);
  padding-bottom:1px;
  transition:border-color .16s ease;
}
.mast-link:hover{border-bottom-color:var(--c-ink);}

/* ---------------- hero ---------------- */
.hero{padding-top:clamp(40px,9vw,72px);padding-bottom:clamp(48px,10vw,104px);}
.hero .lede{margin:var(--s5) 0 var(--s7);max-width:33rem;}
.hero .cta-stack{margin-bottom:0;}

/* ---------------- cards / steps ---------------- */
.card{
  background:var(--c-gray50);
  border:1px solid var(--c-gray200);
  border-radius:var(--r-card);
  padding:clamp(22px,4vw,30px);
}
.card-title{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:-0.01em;
  font-size:1.22rem;line-height:1.2;
  margin:0 0 var(--s3);
}
.grid{display:grid;gap:var(--s4);}
@media(min-width:760px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
}

.step-index{
  font-family:var(--font-display);
  font-size:0.92rem;font-weight:500;
  color:var(--c-orange);
  margin:0 0 var(--s4);
}
[data-variant] .step-index{color:var(--c-gray500);}

/* numbered principle / pillar list */
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.stack-item{
  padding:var(--s5) 0;
  border-top:1px solid var(--c-gray200);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;
}
.stack-item:last-child{border-bottom:1px solid var(--c-gray200);}
.stack-num{
  font-family:var(--font-display);
  font-size:0.95rem;font-weight:500;
  color:var(--c-gray500);
  padding-top:0.28em;
  font-variant-numeric:tabular-nums;
}
.stack-item h3{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:-0.008em;
  font-size:1.16rem;line-height:1.25;margin:0 0 var(--s2);
}
.stack-item p{font-size:1.02rem;line-height:1.55;margin:0;color:var(--c-ink);}
.stack-sub{margin-top:var(--s3)!important;font-size:0.92rem!important;color:var(--c-gray500)!important;line-height:1.5;}

.exergue{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:-0.01em;
  font-size:1.3rem;
  margin-top:var(--s6);
  color:var(--c-ink);
}

/* ---------------- iceberg ---------------- */
.iceberg-card{
  background:var(--c-white);
  border:1px solid var(--c-gray200);
  border-radius:var(--r-card);
  padding:clamp(20px,4vw,36px);
  display:flex;flex-direction:column;gap:var(--s5);
}
.iceberg-fig{width:100%;max-width:380px;margin-inline:auto;display:block;}
.iceberg-cap{
  font-size:1rem;line-height:1.55;color:var(--c-ink);
  max-width:30rem;margin-inline:auto;text-align:left;
}

/* ---------------- comparison (why it's yours) ---------------- */
.compare{list-style:none;margin:0 0 var(--s6);padding:0;display:flex;flex-direction:column;}
.compare li{
  padding:var(--s5) 0;border-top:1px solid var(--c-gray200);
  font-size:1.05rem;line-height:1.5;
}
.compare li:last-child{border-bottom:1px solid var(--c-gray200);}
.compare .lab{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:0.86rem;color:var(--c-gray500);margin-bottom:var(--s2);
  letter-spacing:0.005em;
}
.compare li.is-loresa .lab{color:var(--c-orange);}

/* ---------------- pre-order ---------------- */
.preorder-card{
  background:var(--c-white);
  border:1px solid var(--c-gray200);
  border-radius:var(--r-card);
  padding:clamp(26px,5vw,46px);
}
.preorder-card .price-line{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  font-size:clamp(1.5rem,4.5vw,2rem);
  letter-spacing:-0.01em;margin:0 0 var(--s5);line-height:1.1;
}

/* ---------------- who it's for ---------------- */
.whofor p{font-size:clamp(1.1rem,2.6vw,1.32rem);line-height:1.5;}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--c-gray200);padding-block:clamp(56px,10vw,96px);}
.foot .sig{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.1;
  margin:0 0 var(--s5);text-wrap:balance;
}
.foot .foot-mark{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);
  font-size:1.3rem;color:var(--c-orange);
}
.foot .foot-meta{margin-top:var(--s6);font-size:0.88rem;color:var(--c-gray500);}

/* ---------------- shared rhythm helpers ---------------- */
.flow > * + *{margin-top:var(--s5);}
.tight{max-width:31rem;}
.center-narrow{max-width:34rem;margin-inline:auto;text-align:center;}
.center-narrow .cta-stack{align-items:center;}

@media(min-width:760px){
  body{font-size:19px;}
  .btn-primary{width:auto;}
  .cta-stack.row-desktop{flex-direction:column;}
  .iceberg-wrap{display:grid;grid-template-columns:1fr;gap:var(--s7);}
}

/* ---------------- thank-you page (/merci) ---------------- */
.thanks-hero{padding-top:clamp(64px,12vw,120px);}
.thanks-hero .h2{margin-bottom:var(--s5);}
.confirm-mark{
  font-family:var(--font-display);
  font-size:14px;font-weight:500;letter-spacing:0.01em;
  color:var(--c-orange);
  margin:0 0 var(--s4);
}

.qualif-card{
  background:var(--c-white);
  border:1px solid var(--c-gray200);
  border-radius:var(--r-card);
  padding:clamp(24px,5vw,40px);
  margin-top:var(--s7);
}
.qualif-intro{font-size:1rem;color:var(--c-gray500);margin:0 0 var(--s6);}
.q-group{margin-bottom:var(--s6);}
.q-label{
  display:block;
  font-family:var(--font-display);
  font-size:0.92rem;font-weight:500;
  color:var(--c-ink);
  margin-bottom:var(--s3);
}
.q-opts{display:flex;flex-wrap:wrap;gap:var(--s2);}
.q-opt{
  font-family:var(--font-display);
  font-size:0.96rem;font-weight:500;
  color:var(--c-ink);
  background:var(--c-white);
  border:1px solid var(--c-gray200);
  border-radius:var(--r-btn);
  padding:11px 16px;min-height:44px;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
.q-opt:hover{border-color:var(--c-gray500);}
.q-opt[aria-pressed="true"]{
  color:var(--c-white);
  background:var(--c-orange);
  border-color:var(--c-orange);
}
.qualif-card .btn-primary[disabled]{
  opacity:0.4;cursor:not-allowed;
}
.qualif-card .btn-primary[disabled]:hover{background:var(--c-orange);}
.qualif-done{
  font-size:1.05rem;line-height:1.55;color:var(--c-ink);margin:0;
}

/* reveal on load (subtle, premium) */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
}