/* =================================================================
   MRS. DORIS' OLD-SCHOOL HOUSEKEEPING MANUAL
   Old American household manual x premium editorial x direct response
   ================================================================= */

:root{
  /* paper */
  --paper:        #F5EEDD;
  --paper-2:      #EFE6D1;
  --paper-3:      #E8DCC2;
  --card:         #FBF6EA;

  /* structure */
  --navy:         #17293F;
  --navy-2:       #101E2F;
  --navy-line:    #2C4159;

  /* emphasis */
  --burgundy:     #7E1D25;
  --burgundy-2:   #661419;

  /* money */
  --gold:         #BE8A22;
  --gold-2:       #A97516;
  --gold-lite:    #E4BB57;
  --gold-wash:    #F0D79A;

  /* ink */
  --ink:          #2B211A;
  --ink-2:        #4A3B2E;
  --ink-3:        #6B5A49;
  --rule:         #CFC0A2;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
  --hand:    "Caveat", cursive;

  --bar-h: 64px;
  --shadow-card: 0 1px 0 #fff inset, 0 14px 30px -18px rgba(43,33,26,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 18px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
s{ text-decoration-thickness:2px; }

/* ---------- paper grain (fixed, non-interactive) ---------- */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:28px; }
.wrap--narrow{ max-width:820px; }
.sec{ position:relative; z-index:2; padding:96px 0; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* =================================================================
   TYPE PRIMITIVES
   ================================================================= */
.eyebrow, .label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--burgundy);
  font-weight:500;
  margin:0 0 18px;
}
.eyebrow .sep{ color:var(--rule); }
.label--onpaper{ color:var(--ink-3); }
.label--gold{ color:var(--gold-lite); }

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.92rem, 3.28vw, 2.7rem);
  line-height:1.14;
  letter-spacing:-.009em;
  color:var(--navy);
  margin:0 0 18px;
}
.h2--tight{ font-size:clamp(1.74rem, 2.72vw, 2.28rem); }
.dek{
  font-size:1.115rem;
  color:var(--ink-2);
  max-width:640px;
  margin:0;
  font-style:italic;
}
.sechead{ margin-bottom:52px; max-width:760px; }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead--center .dek{ margin-inline:auto; }

.gold-hi{
  font-style:normal;
  color:var(--ink);
  background:linear-gradient(180deg, transparent 58%, var(--gold-wash) 58%, var(--gold-wash) 94%, transparent 94%);
  padding:0 .06em;
}

.prose p{ max-width:660px; margin:0 0 1.05em; }
.prose p:last-child{ margin-bottom:0; }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  --btn-bg:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px;
  padding:16px 26px;
  font-family:var(--mono);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:3px;
  border:0;
  cursor:pointer;
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--gold{
  background:var(--gold);
  color:#22160A;
  box-shadow:0 3px 0 var(--gold-2), 0 12px 22px -12px rgba(120,84,10,.6);
}
.btn--gold:hover{ background:var(--gold-lite); }
.btn--burgundy{
  background:var(--burgundy);
  color:#FBF3E4;
  box-shadow:0 3px 0 var(--burgundy-2), 0 12px 22px -12px rgba(90,18,22,.55);
}
.btn--burgundy:hover{ background:#8F2229; }
.btn--gold:hover, .btn--burgundy:hover{ transform:translateY(-2px); }
.btn--gold:active, .btn--burgundy:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--gold-2); }
.btn--ghost{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--navy);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(23,41,63,.07); }
.btn--lg{ padding:19px 34px; font-size:1rem; }
.btn--xl{ padding:22px 36px; font-size:clamp(.98rem, 1.4vw, 1.1rem); min-height:64px; }
.btn--full{ display:flex; width:100%; }
.btn__arw{ transition:transform .16s ease; }
.btn:hover .btn__arw{ transform:translateX(4px); }
.btn:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }

.cta-stack{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 26px; }
.cta-inline{ margin:0; text-align:center; }
.cta-inline__note{
  display:block; margin-top:14px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}

/* =================================================================
   STICKY PROMO BAR
   ================================================================= */
.promobar{
  position:sticky; top:0; z-index:60;
  background:var(--navy-2);
  border-bottom:1px solid #2A3C51;
  box-shadow:0 2px 14px rgba(16,30,47,.28);
}
.promobar__in{
  max-width:1400px; margin-inline:auto;
  min-height:var(--bar-h);
  padding:8px 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.promobar__live{
  margin:0;
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.05em;
  color:#D9CEB6;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:#D6483F; flex:none;
  box-shadow:0 0 0 0 rgba(214,72,63,.7);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(214,72,63,.65); }
  70%{ box-shadow:0 0 0 8px rgba(214,72,63,0); }
  100%{ box-shadow:0 0 0 0 rgba(214,72,63,0); }
}
.promobar__timer{
  margin:0; justify-self:center;
  display:flex; align-items:center; gap:12px;
  white-space:nowrap;
}
.promobar__timer-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-lite);
}
.clock{
  display:inline-flex; align-items:baseline; gap:2px;
  font-family:var(--mono); font-size:.94rem; font-weight:600;
  color:#FCF4E2;
  background:rgba(126,29,37,.85);
  border:1px solid rgba(228,187,87,.4);
  border-radius:3px;
  padding:5px 9px;
  font-variant-numeric:tabular-nums;
}
.clock__u{ min-width:2ch; text-align:center; }
.clock__s{ opacity:.55; }
.promobar__timer.is-over .clock{ display:none; }
.btn--bar{
  justify-self:end;
  min-height:48px; padding:13px 20px; font-size:.8rem; letter-spacing:.07em;
  box-shadow:0 2px 0 var(--gold-2);
}
.promobar__live-mini, .btn--bar-mini{ display:none; }

/* =================================================================
   SECTION 1 — HERO
   ================================================================= */
.hero{
  position:relative; z-index:2;
  padding-top:64px;
  background:
    radial-gradient(1000px 620px at 78% 6%, rgba(240,215,154,.42), transparent 62%),
    linear-gradient(180deg, #F7F1E2 0%, var(--paper) 55%);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:64px;
  align-items:start;
  padding-bottom:78px;
}
.hero__copy{ max-width:700px; }

.hero__h1{
  font-family:var(--display);
  margin:0 0 26px;
  letter-spacing:-.014em;
  color:var(--navy);
}
.hero__h1-a{
  display:block;
  font-size:clamp(1.46rem, 2.3vw, 1.85rem);
  font-weight:500;
  line-height:1.2;
  color:var(--ink-2);
  margin-bottom:.18em;
}
.hero__h1-b{
  display:block;
  font-size:clamp(2.32rem, 4.5vw, 3.62rem);
  font-weight:800;
  line-height:1.06;
}
.mark{ position:relative; display:inline-block; white-space:nowrap; }
.mark__ul{
  position:absolute; left:-1%; bottom:-.11em;
  width:102%; height:.28em;
  fill:none; stroke:var(--gold); stroke-width:5;
  stroke-linecap:round;
  overflow:visible;
}

.hero__money{
  font-family:var(--display);
  font-size:clamp(1.3rem, 2.05vw, 1.72rem);
  font-weight:600;
  line-height:1.28;
  color:var(--burgundy);
  margin:0 0 30px;
  padding-left:20px;
  border-left:4px solid var(--gold);
}
.hero__money em{
  font-style:normal;
  color:var(--ink);
  background:linear-gradient(180deg, transparent 55%, var(--gold-wash) 55%, var(--gold-wash) 96%, transparent 96%);
}

.hero__body p{ margin:0 0 1em; max-width:640px; }

.creed{
  list-style:none; margin:0 0 30px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.creed li{
  font-family:var(--mono); font-size:.79rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy);
  background:rgba(255,255,255,.6);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:7px 12px;
}

/* small pain callout — recipe card motif */
.callout{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule);
  border-left:5px solid var(--burgundy);
  padding:22px 24px 20px;
  margin:0 0 34px;
  max-width:610px;
  box-shadow:6px 6px 0 rgba(43,33,26,.07);
}
.callout__list{
  margin:0 0 14px;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--ink-2);
}
.callout__q{
  margin:0;
  padding-top:14px;
  border-top:1px dashed var(--rule);
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
  color:var(--burgundy);
}

/* price lead */
.pricelead{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px;
  margin:0 0 24px;
}
.was{
  font-family:var(--display); font-size:1.75rem; font-weight:500;
  color:var(--ink-3); text-decoration:line-through;
  text-decoration-color:var(--burgundy); text-decoration-thickness:2px;
}
.now{
  font-family:var(--display); font-size:2.92rem; font-weight:800;
  line-height:1; color:var(--navy);
  letter-spacing:-.02em;
}
.now__t{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--burgundy);
  vertical-align:.55em; margin-left:.15em;
}
.save{
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold); color:#22160A;
  padding:8px 13px; border-radius:2px;
  box-shadow:0 2px 0 var(--gold-2);
}

/* tick list */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding-left:30px; margin-bottom:9px;
  font-size:1.03rem; color:var(--ink-2);
}
.ticks li::before{
  content:"✓";
  position:absolute; left:0; top:-1px;
  color:var(--gold-2); font-weight:700; font-size:1.05rem;
}
.ticks--two{ columns:2; column-gap:34px; margin-bottom:26px; }
@media (max-width:520px){ .ticks--two{ columns:1; } }

/* hero variant: one flowing row instead of six stacked rows, so the list
   costs about a third of the vertical space. Six items cannot share a
   single physical line in the hero column without dropping below the
   19px body floor, so it wraps. Reverts to the stacked list on phones,
   where a wrapping run of ticks gets ragged and hard to scan. */
.ticks--inline{
  display:flex; flex-wrap:wrap;
  align-items:baseline;
  gap:7px 20px;
}
.ticks--inline li{ padding-left:23px; margin-bottom:0; }
.ticks--inline li::before{ font-size:1rem; }

/* ---------- book mockup ---------- */
.hero__art{ position:relative; padding-top:12px; }
.bookfig{ margin:0; }
.book-stage{
  position:relative;
  perspective:1700px;
  padding:6px 34px 46px 6px;
}
.book-glow{
  position:absolute; z-index:0;
  right:2%; top:6%; width:72%; height:78%;
  background:radial-gradient(ellipse at 70% 40%, rgba(228,187,87,.68), rgba(228,187,87,0) 68%);
  filter:blur(26px);
}
.book{
  position:relative; z-index:2;
  transform:rotateY(-7deg) rotateX(1.4deg);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,.75,.3,1), filter .5s ease;
  will-change:transform;
  border-radius:2px 5px 5px 2px;
  /* page block on the opening edge + soft premium shadow */
  box-shadow:
     2px 1px 0 #F4EAD4,
     4px 2px 0 #EDE1C6,
     6px 3px 0 #E6D8B8,
     8px 4px 0 #DFCFAA,
    10px 5px 0 #D8C69C,
    12px 6px 0 #D1BD8F,
    14px 7px 0 #C9B382,
    16px 8px 0 #C0A876,
    34px 30px 54px -14px rgba(43,33,26,.42);
}
.book picture{ display:block; }
.book img{
  border-radius:2px 5px 5px 2px;
  width:100%;
}
/* spine shading on the bound edge */
.book__spine{
  position:absolute; inset:0 auto 0 0; width:5.5%;
  background:linear-gradient(90deg, rgba(9,18,30,.5) 0%, rgba(9,18,30,.2) 42%, rgba(255,255,255,.14) 82%, rgba(9,18,30,.12) 100%);
  border-radius:2px 0 0 2px;
  pointer-events:none;
}
/* warm light sheen across the cover */
.book__sheen{
  position:absolute; inset:0;
  background:linear-gradient(104deg, rgba(255,255,255,0) 46%, rgba(255,248,225,.3) 60%, rgba(255,255,255,0) 74%);
  border-radius:2px 5px 5px 2px;
  pointer-events:none;
}
/* grounding shadow */
.book-floor{
  position:absolute; z-index:1;
  left:8%; right:14%; bottom:22px; height:26px;
  background:radial-gradient(ellipse at 50% 50%, rgba(43,33,26,.34), rgba(43,33,26,0) 72%);
  filter:blur(7px);
}
.bookfig__cap{
  margin:6px 0 0;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;
}
.scribble{
  font-family:var(--hand); font-size:1.35rem; line-height:1.15;
  color:var(--burgundy); opacity:.8;
  margin:16px 0 0; text-align:center;
  transform:rotate(-2.2deg);
}

/* ---------- quick proof strip ---------- */
.proof{
  position:relative; z-index:2;
  background:var(--navy);
  border-top:3px solid var(--gold);
  padding:38px 0 32px;
}
.proof__grid{
  margin:0 0 22px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.proof__i{
  text-align:center; padding:0 12px;
  border-left:1px solid var(--navy-line);
}
.proof__i:first-child{ border-left:0; }
.proof__i dt{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.78rem, 3.1vw, 2.62rem);
  line-height:1; color:var(--gold-lite);
  letter-spacing:-.01em;
}
.proof__i dd{
  margin:9px 0 0;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:#CFC4AC;
  line-height:1.4;
}
.proof__rooms{
  margin:0; text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:#A99C84; line-height:1.7;
}

/* =================================================================
   SECTION 2 — THE PROBLEM
   ================================================================= */
.sec--problem{ background:var(--paper); }

.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  align-items:start; margin-bottom:56px;
}
.card{
  background:var(--card);
  border:1px solid var(--rule);
  padding:30px 30px 28px;
  box-shadow:var(--shadow-card);
}
.card--aisle{ box-shadow:6px 6px 0 rgba(126,29,37,.08), var(--shadow-card); }
.card--doris{
  background:var(--navy);
  border-color:var(--navy-line);
  box-shadow:6px 6px 0 rgba(23,41,63,.12);
}
.card__kicker{
  font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 22px; padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.card__kicker--bad{ color:var(--burgundy); }
.card__kicker--good{ color:var(--gold-lite); border-bottom-color:var(--navy-line); }

.ledger{ list-style:none; margin:0 0 22px; padding:0; }
.ledger li{
  display:flex; align-items:baseline; gap:10px;
  padding:11px 0;
  border-bottom:1px dotted var(--rule);
  font-size:1.05rem;
}
.ledger li:last-child{ border-bottom:0; }
.ledger li span{ flex:1 1 auto; color:var(--ink-2); }
.ledger li b{
  flex:none;
  font-family:var(--mono); font-size:.92rem; font-weight:600;
  color:var(--burgundy);
}
.ledger .b-soft{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.card__foot{
  margin:0; padding-top:18px;
  border-top:2px solid var(--burgundy);
  font-size:1rem; line-height:1.5; font-style:italic; color:var(--ink-2);
}

.card__lead{
  font-family:var(--display); font-size:1.52rem; font-weight:700;
  line-height:1.2; color:#FBF3E1; margin:0 0 24px;
}
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  display:flex; align-items:flex-start; gap:14px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#E4DAC5; font-size:1.05rem; line-height:1.45;
}
.steps li:last-child{ border-bottom:0; }
.steps__n{
  flex:none;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  color:var(--navy-2); background:var(--gold-lite);
  margin-top:1px;
}

.bigpoint{
  max-width:820px; margin:0 auto 44px; text-align:center;
  padding:38px 26px;
  border-top:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
}
.bigpoint__a{
  margin:0 0 10px;
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.bigpoint__b{
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem, 3vw, 2.46rem);
  line-height:1.18; color:var(--navy); letter-spacing:-.012em;
}
.bigpoint__b em{ font-style:italic; color:var(--burgundy); }

/* =================================================================
   SECTION 3 — WHAT'S INSIDE
   ================================================================= */
.sec--inside{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.index{
  display:grid; grid-template-columns:1fr 1fr; gap:0 60px;
  padding:8px 0 0;
  border-top:2px solid var(--navy);
  margin-bottom:44px;
}
.index__col{ display:flex; flex-direction:column; }
.idx{ padding:24px 0 22px; border-bottom:1px solid var(--rule); }
.index__col:last-child .idx:last-child{ border-bottom:1px solid var(--rule); }
.idx__h{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 8px;
  font-family:var(--display); font-size:1.38rem; font-weight:700;
  letter-spacing:.01em; text-transform:uppercase; color:var(--navy);
}
.idx__num{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.08em; color:var(--burgundy);
  min-width:34px;
}
.idx__l{
  margin:0 0 0 48px;
  font-size:1.02rem; line-height:1.6; color:var(--ink-2);
}
.inside__close{
  max-width:660px; margin:0 auto 36px; text-align:center;
  font-size:1.12rem; line-height:1.6; color:var(--ink-2);
}
.inside__close em{ color:var(--burgundy); }

/* =================================================================
   SECTION 4 — MRS. DORIS + PROOF
   ================================================================= */
.sec--doris{ background:var(--paper); }
.authority{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px; align-items:start;
}
.portrait{
  margin:0 0 30px;
  padding:10px;
  background:var(--card);
  border:1px solid var(--rule);
  box-shadow:10px 10px 0 rgba(43,33,26,.08), 0 22px 40px -26px rgba(43,33,26,.5);
  max-width:430px;
}
.portrait img{ width:100%; }

.pull{
  margin:32px 0 0; padding:26px 28px;
  background:var(--navy);
  border-left:5px solid var(--gold);
  position:relative;
}
.pull::before{
  content:"\201C";
  position:absolute; top:-6px; left:16px;
  font-family:var(--display); font-size:4.4rem; line-height:1;
  color:var(--burgundy); opacity:.9;
}
.pull p{
  margin:0 0 14px; padding-left:34px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.28rem, 2.1vw, 1.68rem);
  line-height:1.24; color:#F7EEDB; text-transform:uppercase;
  letter-spacing:-.005em;
}
.pull__em{ color:var(--gold-lite); }
.pull cite{
  display:block; padding-left:34px;
  font-family:var(--mono); font-size:.74rem; font-style:normal;
  letter-spacing:.13em; text-transform:uppercase; color:#B0A48C;
}

/* reviews (recipe-card paper) */
.reviews{ display:flex; flex-direction:column; gap:20px; }
.review{
  margin:0; padding:24px 26px;
  background:var(--card);
  border:1px solid var(--rule);
  box-shadow:5px 5px 0 rgba(43,33,26,.07);
  position:relative;
}
.review::before{
  content:"\201C";
  position:absolute; top:6px; right:18px;
  font-family:var(--display); font-size:3rem; line-height:1;
  color:var(--burgundy); opacity:.28;
}
.stars{ margin:0 0 12px; color:var(--gold); font-size:1rem; letter-spacing:.16em; }
.review blockquote{ margin:0 0 16px; }
.review blockquote p{ margin:0; font-size:1.05rem; line-height:1.55; color:var(--ink); }
.review figcaption{
  padding-top:13px; border-top:1px dashed var(--rule);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; gap:10px; flex-wrap:wrap;
}
.review figcaption b{ color:var(--navy); }

/* philosophy card (shown until real reviews exist) */
.creedcard{
  background:var(--card);
  border:1px solid var(--rule);
  border-top:4px solid var(--navy);
  padding:32px 32px 28px;
  box-shadow:8px 8px 0 rgba(43,33,26,.07);
}
.creedcard__label{
  margin:0 0 22px; padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.73rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--burgundy);
}
.creedcard__list{ margin:0; padding:0; list-style:none; counter-reset:c; }
.creedcard__list li{
  counter-increment:c;
  position:relative; padding:0 0 20px 44px; margin-bottom:20px;
  border-bottom:1px dotted var(--rule);
}
.creedcard__list li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:6px; }
.creedcard__list li::before{
  content:counter(c);
  position:absolute; left:0; top:2px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.8rem; font-weight:600;
  color:#FBF3E1; background:var(--burgundy);
}
.creedcard__list b{
  display:block;
  font-family:var(--display); font-size:1.22rem; font-weight:700;
  line-height:1.2; color:var(--navy); margin-bottom:5px;
}
.creedcard__list span{ display:block; font-size:1rem; line-height:1.5; color:var(--ink-2); }
.creedcard__foot{
  margin:22px 0 0; padding-top:18px;
  border-top:2px solid var(--gold);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}

/* =================================================================
   SECTION 5 — OFFER
   ================================================================= */
.sec--offer{
  background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border-top:1px solid var(--rule);
}
.offer{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:60px; align-items:center;
  margin-bottom:64px;
}
.book-stage--sm{ padding:6px 30px 42px 6px; }

.offer__panel{
  background:var(--card);
  border:1px solid var(--rule);
  border-top:5px solid var(--gold);
  padding:38px 38px 34px;
  box-shadow:12px 12px 0 rgba(43,33,26,.07), 0 26px 50px -32px rgba(43,33,26,.5);
}
.offer__title{
  margin:0 0 10px;
  font-family:var(--display); font-weight:800;
  font-size:1.34rem; line-height:1.16; letter-spacing:.02em;
  text-transform:uppercase; color:var(--burgundy);
}
.offer__title span{ color:var(--navy); font-size:1.62rem; display:block; }
.offer__sub{
  margin:0 0 26px; padding-bottom:22px;
  border-bottom:1px solid var(--rule);
  font-size:1rem; line-height:1.5; font-style:italic; color:var(--ink-2);
}

.pricebox{
  margin:6px 0 24px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-left:5px solid var(--navy);
  padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.pricebox__rows{ display:flex; flex-direction:column; gap:4px; }
.pricebox__row{
  margin:0; display:flex; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.pricebox__row span{ min-width:120px; }
.pricebox__row s{
  font-family:var(--display); font-size:1.6rem; font-weight:500;
  color:var(--ink-3);
  text-decoration-color:var(--burgundy);
}
.pricebox__row--now span{ color:var(--burgundy); font-weight:600; }
.pricebox__row--now b{
  font-family:var(--display); font-size:2.88rem; font-weight:800;
  line-height:1; color:var(--navy); letter-spacing:-.02em;
}
.pricebox__save{
  margin:0;
  font-family:var(--mono); font-size:.8rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--gold); color:#22160A;
  padding:11px 15px; border-radius:2px;
  box-shadow:0 2px 0 var(--gold-2);
}
.undercta{
  margin:14px 0 0; text-align:center;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}

/* how it works */
.how{ max-width:900px; margin:0 auto 44px; text-align:center; }
.how .label{ color:var(--ink-3); }
.how__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.how__grid li{ background:var(--paper-2); padding:24px 20px; }
.how__grid b{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--burgundy);
}
.how__grid span{ font-size:1.02rem; color:var(--ink-2); }

.guarantee{
  max-width:660px; margin:0 auto; text-align:center;
  padding:30px 28px;
  background:var(--card);
  border:2px solid var(--gold);
  box-shadow:0 14px 30px -22px rgba(43,33,26,.5);
}
.guarantee__h{
  margin:0 0 10px;
  font-family:var(--display); font-size:1.42rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; color:var(--navy);
}
.guarantee__p{ margin:0; font-size:1.06rem; color:var(--ink-2); }

/* =================================================================
   SECTION 6 — FAQ + FINAL CTA
   ================================================================= */
.sec--faq{ padding-bottom:0; background:var(--paper); }
.faq{ border-top:2px solid var(--navy); }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:64px; padding:18px 4px;
  cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1.12rem, 1.8vw, 1.32rem);
  font-weight:700; line-height:1.28; color:var(--navy);
  text-transform:uppercase; letter-spacing:.005em;
  transition:color .15s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--burgundy); }
.qa summary:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
.qa summary i{
  position:relative; flex:none; width:22px; height:22px;
}
.qa summary i::before,
.qa summary i::after{
  content:""; position:absolute; background:var(--burgundy);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.qa summary i::before{ width:20px; height:2.5px; }
.qa summary i::after{ width:2.5px; height:20px; transition:transform .22s ease, opacity .22s ease; }
.qa[open] summary i::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.qa[open] summary{ color:var(--burgundy); }
.qa__a{ padding:0 4px 24px; max-width:680px; }
.qa__a p{ margin:0; font-size:1.06rem; line-height:1.62; color:var(--ink-2); }

.finalcta{
  margin-top:88px;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(126,29,37,.5), transparent 70%),
    var(--navy-2);
  border-top:4px solid var(--gold);
  padding:78px 0 84px;
  text-align:center;
}
.finalcta__in{ display:flex; flex-direction:column; align-items:center; }
.finalcta .label--gold{ margin-bottom:22px; }
.finalcta__h{
  margin:0 0 22px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.88rem, 4vw, 3.06rem);
  line-height:1.12; letter-spacing:-.014em;
  color:#FAF2E0;
}
.finalcta__h .strike{
  position:relative; color:var(--gold-lite);
  text-decoration:line-through;
  text-decoration-color:rgba(250,242,224,.55);
  text-decoration-thickness:3px;
}
.finalcta__h2{ display:block; margin-top:.16em; color:var(--gold-lite); }
.finalcta__p{
  margin:0 0 32px; max-width:600px;
  font-size:1.1rem; line-height:1.62; color:#D5CAB2;
}
.finalcta__price{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px 18px; margin:0 0 30px;
}
.was--dark{ color:#9C907A; text-decoration-color:var(--gold-lite); }
.now--dark{ color:#FAF2E0; }
.now--dark .now__t{ color:var(--gold-lite); }
.finalcta__note{
  margin:24px 0 0;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:#9C907A; line-height:1.8;
}

/* =================================================================
   FOOTER
   ================================================================= */
.foot{
  position:relative; z-index:2;
  background:var(--navy);
  border-top:1px solid var(--navy-line);
  padding:44px 0 52px;
  text-align:center;
}
.foot__brand{
  margin:0 0 18px;
  font-family:var(--display); font-size:1.1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--gold-lite);
}
.foot__fine{
  margin:0 auto 12px; max-width:680px;
  font-size:.9rem; line-height:1.62; color:#A99C84;
}
.foot__copy{
  margin:22px 0 0;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#7E735F;
}

/* =================================================================
   CORNER NOTICES — bottom-left stack, above the grain (50),
   below the exit-intent overlay (90)
   ================================================================= */
.pops{
  position:fixed; z-index:70;
  left:20px; bottom:20px;
  width:min(340px, calc(100vw - 40px));
  display:flex; flex-direction:column-reverse; gap:10px;
  pointer-events:none;
}
.pop{
  pointer-events:auto;
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:start; gap:12px;
  padding:14px 14px 14px 15px;
  background:var(--card);
  border:1px solid var(--rule);
  border-left:5px solid var(--gold);
  box-shadow:0 18px 34px -20px rgba(43,33,26,.55);
  opacity:0; transform:translateX(-14px);
  transition:opacity .32s ease, transform .32s ease;
}
.pop.is-in{ opacity:1; transform:none; }
.pop__mark{
  width:26px; height:26px; margin-top:1px;
  display:grid; place-items:center;
  background:var(--navy); color:var(--gold-lite);
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  border-radius:50%;
}
.pop__b{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:1.02rem; line-height:1.24; color:var(--navy);
  margin-bottom:3px;
}
.pop__s{
  display:block;
  font-size:.92rem; line-height:1.45; color:var(--ink-2);
}
.pop__s a{ color:var(--burgundy); text-underline-offset:3px; }
.pop__x{
  appearance:none; -webkit-appearance:none;
  width:30px; height:30px; margin:-4px -4px 0 0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:1.24rem; line-height:1;
  color:var(--ink-3);
  transition:color .15s ease;
}
.pop__x:hover{ color:var(--burgundy); }

/* =================================================================
   EXIT-INTENT OFFER — highest layer on the page
   ================================================================= */
.exitm{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:24px;
}
.exitm__veil{
  position:absolute; inset:0;
  background:rgba(16,30,47,.74);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .24s ease;
}
.exitm__card{
  position:relative;
  width:100%; max-width:560px;
  max-height:calc(100vh - 48px); overflow-y:auto;
  padding:38px 40px 32px;
  text-align:center;
  background:var(--card);
  border:1px solid var(--gold);
  box-shadow:0 40px 90px -30px rgba(16,30,47,.7);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .26s ease, transform .26s ease;
}
.exitm.is-in .exitm__veil{ opacity:1; }
.exitm.is-in .exitm__card{ opacity:1; transform:none; }

.exitm__x{
  position:absolute; top:6px; right:6px;
  appearance:none; -webkit-appearance:none;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:1.7rem; line-height:1;
  color:var(--ink-3);
  transition:color .15s ease;
}
.exitm__x:hover{ color:var(--burgundy); }

.exitm__eyebrow{
  margin:0 0 14px;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--burgundy);
}
.exitm__h{
  margin:0 0 16px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem, 3.6vw, 2.1rem);
  line-height:1.14; letter-spacing:-.012em; color:var(--navy);
}
.exitm__h-em{
  color:var(--ink);
  background:linear-gradient(180deg, transparent 58%, var(--gold-wash) 58%, var(--gold-wash) 94%, transparent 94%);
  padding:0 .06em;
}
.exitm__p{
  margin:0 auto 24px; max-width:430px;
  font-size:1.04rem; line-height:1.6; color:var(--ink-2);
}
.exitm__price{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px 16px;
  margin:0 0 24px;
}
.exitm__no{
  appearance:none; -webkit-appearance:none;
  display:block; width:100%; min-height:48px;
  margin:6px 0 0; padding:12px;
  background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:1rem; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .15s ease;
}
.exitm__no:hover{ color:var(--burgundy); }
.exitm__note{
  margin:16px 0 0;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  line-height:1.7; color:var(--ink-3);
}

@media (prefers-reduced-motion:reduce){
  .pop, .exitm__veil, .exitm__card{ transition:none; }
  .pop{ opacity:1; transform:none; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1080px){
  .hero__grid{ gap:44px; }
  .offer{ gap:40px; }
  .authority{ gap:44px; }
  .index{ gap:0 40px; }
}

@media (max-width:940px){
  .promobar__in{ grid-template-columns:1fr auto; gap:12px; }
  .promobar__timer{ display:none; }

  .hero{ padding-top:44px; }
  .hero__grid{
    grid-template-columns:1fr;
    padding-bottom:56px;
  }
  .hero__art{ order:-1; padding-top:0; }
  .book-stage{ max-width:400px; margin:0 auto; }
  .hero__copy{ max-width:none; }
  .scribble{ display:none; }

  .compare{ grid-template-columns:1fr; gap:24px; }
  .index{ grid-template-columns:1fr; gap:0; }
  .index__col:first-child .idx:last-child{ border-bottom:1px solid var(--rule); }
  .authority{ grid-template-columns:1fr; }
  .portrait{ max-width:none; }
  .offer{ grid-template-columns:1fr; }
  .book-stage--sm{ max-width:340px; margin:0 auto; }
  .how__grid{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  body{ font-size:17.5px; line-height:1.6; }
  :root{ --bar-h:60px; }
  .wrap{ padding-inline:20px; }
  .sec{ padding:64px 0; }

  .promobar__in{ padding:8px 16px; gap:10px; }
  .promobar__live-full{ display:none; }
  .promobar__live-mini{ display:inline; }
  .promobar__live{ font-size:.8rem; letter-spacing:.04em; }
  .promobar__live-mini b{ color:var(--gold-lite); }
  .btn--bar-full{ display:none; }
  .btn--bar-mini{ display:inline; }
  .btn--bar{ padding:13px 16px; font-size:.78rem; }

  .hero__h1-b{ font-size:clamp(1.95rem, 9vw, 2.44rem); }
  .mark{ white-space:normal; }
  .mark__ul{ display:none; }
  .mark{
    background:linear-gradient(180deg, transparent 62%, var(--gold-wash) 62%, var(--gold-wash) 97%, transparent 97%);
  }
  .hero__money{ padding-left:16px; }
  .creed{ gap:7px; }
  .creed li{ font-size:.73rem; padding:6px 10px; }
  .callout{ padding:20px 20px 18px; }
  .now{ font-size:2.5rem; }
  .cta-stack{ flex-direction:column; align-items:stretch; }
  .cta-stack .btn{ width:100%; }

  .proof__grid{ grid-template-columns:1fr 1fr; gap:26px 0; }
  .proof__i:nth-child(3){ border-left:0; }
  .proof__rooms{ font-size:.68rem; }

  .card{ padding:24px 22px; }
  .offer__panel{ padding:28px 22px 26px; }
  .creedcard{ padding:26px 22px 24px; }
  .pricebox{ padding:20px; flex-direction:column; align-items:flex-start; }
  .pricebox__row--now b{ font-size:2.5rem; }
  .idx__l{ margin-left:0; }
  .idx__h{ gap:10px; }
  .pull{ padding:24px 20px; }
  .pull p, .pull cite{ padding-left:26px; }
  .finalcta{ padding:60px 0 66px; margin-top:64px; }
  .btn--xl{ padding:20px 22px; min-height:60px; }
  .btn--lg{ width:100%; }

  .pops{ left:12px; right:12px; bottom:12px; width:auto; }
  .pop{ padding:12px 12px 12px 13px; }
  .pop__b{ font-size:.98rem; }
  .pop__s{ font-size:.88rem; }

  .exitm{ padding:14px; }
  .exitm__card{ padding:32px 20px 24px; max-height:calc(100vh - 28px); }
  .exitm__p{ font-size:1rem; }

  .ticks--inline{ display:block; }
  .ticks--inline li{ padding-left:30px; margin-bottom:9px; }
}

/* ---------- desktop-only book tilt ---------- */
@media (hover:hover) and (pointer:fine){
  .book-stage.is-lit .book{
    filter:drop-shadow(0 26px 34px rgba(43,33,26,.34));
  }
}