/* ============ The Home Savings Manual — "the cover, as a website" ============ */
/* World: the book cover's deep rust-brown, cream paper, gold marks.
   Type: Instrument Serif display · Source Sans body · Space Mono ledger · Caveat pen. */
:root{
  --brown:#7A2E12;          /* the cover ground */
  --brown-2:#682610;        /* vignette edge */
  --brown-deep:#4A1A09;     /* topbar / heavy bands */
  --brown-black:#2A1206;    /* footer */
  --cream:#F4EAD5;          /* paper ground */
  --cream-2:#FBF4E4;        /* raised paper */
  --cream-on-brown:#F2E6CE; /* text on brown */
  --muted-on-brown:#D9C2A2;
  --ink:#2A1F16;            /* text on cream */
  --muted:#6E5D4B;
  --gold:#C9A45C;           /* the seal gold */
  --gold-deep:#A8854A;
  --gold-line:rgba(201,164,92,.55);
  --line:#D8C9A8;           /* hairlines on cream */
  --pen:#2f7a47;            /* green ink — bill only */
  --red:#C8341C;            /* crossings — bill only */
  --display:"Instrument Serif",Georgia,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --penfont:"Caveat",cursive;
  --maxw:1100px;
  --narrow:700px;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{
  margin:0;background-color:var(--cream);color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.07 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  font-family:var(--sans);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.narrow{max-width:var(--narrow);}
.section{padding:88px 28px;}
.center{text-align:center;}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em;color:var(--ink);}
h1{font-size:clamp(2.2rem,4.8vw,3.3rem);margin:0 0 .4em;text-wrap:balance;}
h2{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 .5em;text-wrap:balance;}
h3{font-size:1.35rem;margin:0 0 .4em;}
p{margin:0 0 1.1em;}
em{font-style:italic;}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--gold);color:var(--brown-deep);text-decoration:none;font-weight:700;
  font-family:var(--sans);border-radius:4px;padding:14px 28px;letter-spacing:.02em;
  border:1px solid var(--gold-deep);
  transition:transform .08s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 4px 0 var(--gold-deep);}
.btn:hover{background:#D6B26A;transform:translateY(2px);box-shadow:0 2px 0 var(--gold-deep);}
.btn--big{font-size:1.16rem;padding:17px 36px;}
.btn--small{padding:9px 18px;font-size:.95rem;box-shadow:0 3px 0 var(--gold-deep);}
.btn--ghost{background:transparent;color:var(--brown);border:1px solid var(--gold-deep);box-shadow:none;}
.btn--ghost:hover{background:rgba(201,164,92,.22);color:var(--brown-deep);transform:none;box-shadow:none;}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 28px;background:var(--brown-deep);color:var(--muted-on-brown);
  font-family:var(--mono);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;}
.topbar__mid{color:var(--gold);font-weight:700;}
.topbar__mid s{color:rgba(217,194,162,.6);margin-right:2px;}
.topbar__timer{display:inline-block;min-width:96px;font-weight:700;color:var(--brown-deep);
  background:var(--gold);border-radius:4px;padding:2px 9px;}
@media (max-width:720px){.topbar__side:last-child{display:none;}}

/* ---- sticky buy bar ---- */
.buybar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:10px 24px;background:rgba(74,26,9,.96);
  border-bottom:1px solid var(--gold-line);backdrop-filter:blur(6px);
  transform:translateY(-115%);transition:transform .25s ease;}
.buybar.show{transform:translateY(0);}
.buybar__title{font-family:var(--display);color:var(--cream-on-brown);font-size:1.15rem;}

/* ---- hero (cream paper — the cover is the color) ---- */
.hero{padding:24px 28px;color:var(--ink);display:flex;align-items:center;
  /* fold math: viewport minus topbar (~46px) minus gold ribbon (~110px) */
  min-height:calc(100svh - 156px);}
.hero .hero__grid{width:100%;}
@media (max-width:860px){.hero{min-height:0;padding:44px 28px;}}
.hero h1{color:var(--ink);}
.hero__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:60px;align-items:center;max-width:var(--maxw);margin:0 auto;}
.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:1em;}
.lead{font-size:1.16rem;color:#4a3d2e;}
.lead strong{color:var(--ink);}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:1.4em;}
.payback{font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--brown);margin:1.2em 0 0;}
.microcopy{font-size:.92rem;color:var(--muted);margin-top:.8em;}
.strike{text-decoration:line-through;color:#A8916C;}

/* book */
.hero__art{text-align:center;order:1;}
.hero__copy{order:2;}
.book{width:330px;max-width:100%;margin:0 auto;position:relative;perspective:1200px;
  filter:drop-shadow(16px 22px 28px rgba(42,18,6,.35));}
.book__img{width:100%;height:auto;display:block;border-radius:3px 8px 8px 3px;
  transform:rotateY(-14deg) rotateX(2deg);border-left:6px solid rgba(0,0,0,.3);
  outline:1px solid rgba(201,164,92,.35);}
.book__caption{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:12px;}
.pricetag{position:absolute;top:-16px;right:-22px;background:var(--cream-2);border:1px solid var(--gold-deep);
  border-radius:5px;padding:8px 15px 8px 24px;transform:rotate(7deg);box-shadow:0 6px 16px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;line-height:1;}
.pricetag::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--cream);border:2px solid var(--gold-deep);transform:translateY(-50%);}
.pricetag__old{font-family:var(--mono);font-size:.8rem;color:#A8916C;text-decoration:line-through;}
.pricetag__new{font-family:var(--display);font-size:1.7rem;color:var(--brown);}

/* ---- stats (gold band) ---- */
.stats{background:var(--gold);color:var(--brown-deep);padding:26px 28px;
  border-top:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);}
.stats__row{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap;text-align:center;}
.stat{display:flex;flex-direction:column;gap:1px;}
.stat__n{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--brown-deep);}
.stat__l{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#6B5226;}

/* ---- bands / shared ---- */
.band{padding:88px 28px;}
.band--accent{background:transparent;}
.pull{font-family:var(--display);font-style:italic;font-size:1.7rem;line-height:1.25;color:var(--brown);margin:1em 0;}
.num{font-family:var(--mono);font-weight:700;color:var(--gold-deep);}
.seckick{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.2em;}
.seckick::before{content:"";display:inline-block;width:34px;height:1px;background:var(--gold-deep);
  vertical-align:middle;margin-right:12px;}
.center .seckick::before{display:none;}
.sub{color:var(--muted);margin-bottom:2.4em;max-width:640px;}

/* ---- 01 · the math ---- */
.math__grid{display:grid;grid-template-columns:1fr minmax(380px,580px);gap:48px;align-items:start;}
.math__grid .math__copy{padding-top:8px;}
.math__copy h2{margin-top:0;}
.mathsrc{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.03em;margin-top:1.6em;}

/* the corrected bill (the artifact keeps its own inks) */
.billside{max-width:600px;margin:0;width:100%;justify-self:start;}
.bill{position:relative;transform:rotate(-1.1deg) scale(1.03);transform-origin:top left;
  font-family:var(--mono);color:#2a2620;}
.bill__afterlabel{position:absolute;top:34px;right:12px;width:104px;z-index:2;text-align:center;
  font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.3;}
.bill::before{content:"";position:absolute;top:0;bottom:0;left:0;right:148px;background:#FFFCF3;
  border-top:3px dashed #cbb98f;border-bottom:3px dashed #cbb98f;box-shadow:0 18px 40px rgba(42,18,6,.22);}
.bill__head{position:relative;z-index:1;margin-right:148px;padding:18px 14px 10px 20px;text-align:center;
  border-bottom:1px dashed #c7b389;}
.bill__store{display:block;font-weight:700;letter-spacing:.1em;font-size:.84rem;}
.bill__sub{display:block;font-size:.62rem;letter-spacing:.12em;color:#7a6f59;margin-top:5px;}
.brow{position:relative;z-index:1;display:grid;grid-template-columns:1fr 104px 48px 100px;align-items:center;
  padding:7px 0 7px 22px;}
.brow:nth-child(odd):not(.brow--total)::before{content:"";position:absolute;z-index:-1;
  left:6px;right:154px;top:0;bottom:0;background:rgba(203,185,143,.16);}
.brow__name{font-size:.88rem;line-height:1.25;padding-right:10px;}
.brow__old{font-size:.98rem;text-align:right;padding:2px 14px 2px 10px;color:#6b6253;
  border-left:1px dashed #e0d5b8;
  text-decoration:line-through;text-decoration-color:rgba(200,52,28,.85);text-decoration-thickness:2.4px;}
.brow__arr{width:46px;height:16px;color:var(--pen);}
.brow__new{font-family:var(--penfont);font-weight:700;font-size:1.5rem;line-height:1;color:var(--pen);
  padding-left:4px;transform:rotate(-2deg);}
.brow--total{padding-top:14px;padding-bottom:24px;margin-top:4px;}
.brow--total::before{content:"";position:absolute;top:0;left:14px;right:160px;border-top:2px solid #2a2620;}
.brow--total .brow__name{font-weight:700;font-size:.92rem;letter-spacing:.08em;}
.brow--total .brow__old{font-weight:700;font-size:1.35rem;color:var(--red);border-left:none;
  padding:2px 18px 2px 0;white-space:nowrap;justify-self:end;
  text-decoration-color:#2a2620;text-decoration-thickness:3px;}
.brow--total .brow__new{font-size:2.2rem;color:var(--gold-deep);border:3px solid var(--gold-deep);border-radius:999px;
  padding:5px 13px 7px;transform:rotate(-3deg);justify-self:start;}
.bill__net{font-family:var(--penfont);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.3rem);color:var(--pen);
  text-align:center;margin:26px 0 0;transform:rotate(-1deg);
  text-decoration:underline wavy rgba(47,122,71,.55) 3px;text-underline-offset:8px;}

/* ---- 02 · what's inside (brown shelf) ---- */
#contents{background:linear-gradient(180deg,var(--brown-2) 0%,var(--brown) 50%,var(--brown-2) 100%);
  color:var(--cream-on-brown);}
#contents h2{color:#FBF2DD;}
#contents .seckick{color:var(--gold);}
#contents .seckick::before{background:var(--gold);}
#contents .sub{color:var(--muted-on-brown);}
.toc{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.toc__sec{background:var(--cream-2);border:1px solid var(--gold-deep);border-radius:4px;
  padding:26px 28px 22px;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.3);}
.toc__sec::before{content:"";position:absolute;inset:5px;border:1px solid var(--gold-line);pointer-events:none;border-radius:2px;}
.toc__sec h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px;}
.toc__n{font-family:var(--mono);color:var(--brown);font-size:1rem;font-weight:700;}
.toc__c{font-family:var(--mono);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--brown-deep);margin-left:auto;border-radius:999px;
  padding:3px 10px;background:var(--gold);white-space:nowrap;}
.toc__sec ul{margin:0;padding:0;list-style:none;counter-reset:ch;}
.toc__sec li{font-size:.95rem;padding:6px 0 6px 30px;position:relative;color:#4a3d2e;
  border-bottom:1px dotted var(--line);counter-increment:ch;}
.toc__sec li:last-child{border-bottom:none;padding-bottom:0;}
.toc__sec li::before{content:counter(ch) ".";position:absolute;left:0;
  font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--gold-deep);top:9px;}

/* ---- 03 · the promise ---- */
.vows{display:flex;flex-direction:column;gap:0;margin-top:1.4em;}
.vow{display:grid;grid-template-columns:34px 1fr 1fr;align-items:baseline;gap:14px;
  padding:20px 0;border-bottom:1px solid var(--line);}
.vow:last-child{border-bottom:none;}
.vow__x{color:var(--red);font-weight:700;font-size:1.25rem;line-height:1;}
.vow__bad{margin:0;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--muted);
  text-decoration:line-through;text-decoration-color:rgba(200,52,28,.5);text-decoration-thickness:2px;}
.vow__good{margin:0;font-family:var(--display);font-size:1.25rem;color:var(--ink);}
.promise__by{display:flex;align-items:center;gap:14px;margin-top:2em;}
.promise__by img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);
  box-shadow:0 3px 10px rgba(42,18,6,.25);}
.promise__sig{font-family:var(--penfont);font-weight:700;font-size:1.5rem;color:var(--brown);}
@media (max-width:640px){.vow{grid-template-columns:28px 1fr;}.vow__good{grid-column:2;}}

/* ---- 04 · early readers (brown) ---- */
section.band:has(.reviews){background:linear-gradient(180deg,var(--brown-2),var(--brown-deep));color:var(--cream-on-brown);}
section.band:has(.reviews) h2{color:#FBF2DD;}
section.band:has(.reviews) .seckick{color:var(--gold);}
section.band:has(.reviews) .seckick::before{background:var(--gold);}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:1.8em;}
.review{margin:0;background:rgba(42,18,6,.35);border:1px solid var(--gold-line);border-radius:4px;
  padding:28px 28px 24px;display:flex;flex-direction:column;position:relative;}
.review::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,164,92,.22);pointer-events:none;border-radius:2px;}
.review__stars{color:var(--gold);font-size:.95rem;letter-spacing:.2em;margin-bottom:14px;}
.review blockquote{margin:0 0 18px;font-family:var(--display);font-size:1.18rem;line-height:1.42;color:var(--cream-on-brown);}
.review__name{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-on-brown);margin-top:auto;}
@media (max-width:860px){.reviews{grid-template-columns:1fr;}}

/* ---- 05 · who's brenda ---- */
.about{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:56px;align-items:center;}
.about__fig{margin:0;transform:rotate(-1.4deg);}
.about__portrait{width:100%;display:block;border-radius:2px;
  border:1px solid var(--gold-deep);outline:8px solid var(--cream-2);
  box-shadow:0 16px 40px rgba(42,18,6,.28);}
.about__cap{font-family:var(--penfont);font-weight:700;font-size:1.3rem;color:var(--muted);
  text-align:center;margin-top:16px;}

/* ---- 06 · order ---- */
#order{background:radial-gradient(110% 110% at 50% 0%, var(--brown) 0%, var(--brown-deep) 80%);
  color:var(--cream-on-brown);}
#order .seckick{color:var(--gold);}
#order h2{color:#FBF2DD;}
.order{max-width:620px;margin:0 auto;background:var(--cream-2);color:var(--ink);
  border:1px solid var(--gold-deep);border-radius:4px;position:relative;
  padding:50px 44px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
.order::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold-line);pointer-events:none;border-radius:2px;}
#order .order h2{color:var(--ink);}
.price{margin:10px 0 24px;font-family:var(--mono);}
.price__old{font-size:1.3rem;color:#A8916C;text-decoration:line-through;margin-right:12px;}
.price__now{font-family:var(--display);font-size:3.6rem;color:var(--brown);}
.pay{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:18px;letter-spacing:.06em;}

/* ---- 07 · faq ---- */
.faq{margin-top:1.8em;}
.faq details{border-bottom:1px solid var(--line);padding:6px 0;}
.faq summary{cursor:pointer;font-family:var(--display);font-size:1.35rem;padding:14px 0;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--gold-deep);font-weight:700;font-family:var(--mono);}
.faq details[open] summary::after{content:"–";}
.faq details p{margin:0 0 16px;color:#4a3d2e;}

/* ---- final cta ---- */
section.band--accent.center{background:radial-gradient(120% 120% at 50% 100%, var(--brown) 0%, var(--brown-deep) 85%);
  color:var(--cream-on-brown);padding:100px 28px;}
section.band--accent.center h2{color:#FBF2DD;}
section.band--accent.center .microcopy{color:var(--muted-on-brown);}

/* ---- footer ---- */
.footer{background:var(--brown-black);color:var(--muted-on-brown);padding:56px 28px 46px;text-align:center;}
.footer__brand{font-family:var(--display);color:var(--cream-on-brown);font-size:1.6rem;margin:0 0 1.1em;}
.footer__nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:1.4em;}
.footer__nav a{color:var(--muted-on-brown);text-decoration:none;font-family:var(--sans);font-size:1rem;font-weight:600;}
.footer__nav a:hover{color:var(--gold);text-decoration:underline;}
.footer__ed{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8F7351;margin:0 0 1.8em;}
.footer__fine{font-family:var(--mono);font-size:.74rem;line-height:1.7;color:#8F7351;margin:0 auto .9em;max-width:700px;}

/* ---- scroll reveal (desktop only — phones get instant content) ---- */
@media (min-width:769px) and (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:none;}
}

/* ---- responsive ---- */
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:36px;}
  .hero__art{order:1;}
  .hero__copy{order:2;}
  .math__grid{grid-template-columns:1fr;gap:40px;}
  .toc{grid-template-columns:1fr;gap:22px;}
  .about{grid-template-columns:1fr;text-align:center;justify-items:center;}
}
@media (max-width:560px){
  body{font-size:16.5px;}
  .section,.band{padding:56px 18px;}
  /* topbar: just the offer + timer */
  .topbar{justify-content:center;padding:10px 14px;font-size:.78rem;}
  .topbar__side{display:none;}
  /* hero */
  .hero{padding:36px 18px;}
  h1{font-size:clamp(1.9rem,8vw,2.2rem);}
  .lead{font-size:1.05rem;}
  .hero__ctas{gap:10px;}
  .btn--big{font-size:1.05rem;padding:15px 26px;width:100%;text-align:center;}
  .book{width:min(300px,80vw);}
  .pricetag{right:0;top:-12px;}
  /* gold ribbon: 2x2 */
  .stats{padding:20px 16px;}
  .stats__row{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;}
  .stat__n{font-size:1.8rem;}
  /* the bill */
  .billside{max-width:100%;}
  .bill{transform:rotate(-1deg);}
  .bill::before{right:104px;}
  .bill__head{margin-right:104px;padding:16px 8px 8px 12px;}
  .bill__store{font-size:.72rem;}
  .bill__sub{font-size:.54rem;}
  .bill__afterlabel{width:92px;right:2px;top:30px;font-size:.6rem;}
  .brow{grid-template-columns:1fr 64px 34px 70px;padding:8px 0 8px 12px;}
  .brow:nth-child(odd):not(.brow--total)::before{right:110px;}
  .brow__name{font-size:.7rem;}
  .brow__old{font-size:.78rem;padding:2px 8px 2px 6px;}
  .brow__arr{width:32px;}
  .brow__new{font-size:1.15rem;}
  .brow--total::before{right:114px;}
  .brow--total .brow__name{font-size:.78rem;}
  .brow--total .brow__old{font-size:1.05rem;padding-right:8px;}
  .brow--total .brow__new{font-size:1.3rem;padding:3px 8px 4px;border-width:2px;}
  .bill__net{font-size:1.5rem;}
  /* cards & boxes */
  .toc__sec{padding:20px 18px 16px;}
  .order{padding:32px 20px;}
  .price__now{font-size:2.8rem;}
  .review{padding:22px 20px 18px;}
  .vow__bad,.vow__good{font-size:1.08rem;}
  .about{gap:36px;}
  .faq summary{font-size:1.15rem;}
  .footer__nav{gap:8px 18px;}
}

/* ---- embedded checkout (order box) ---- */
.checkout{margin:6px auto 10px;min-height:320px;text-align:left;}