/* ============================================================
   TBC STOREFRONT — CANONICAL STYLESHEET  (DO NOT RESTRUCTURE)
   Only edit the :root variables below to re-skin per store.
   Everything past :root is locked — copy it byte-for-byte.
   Palette is DERIVED FROM THE COVER IMAGE each time.
   ============================================================ */

:root{
  /* ---- EDIT THESE PER STORE (derive from the cover) ---- */
  /* MOUNTAIN MEN — cold mountain charcoal + campfire-ember orange + snow-warmed parchment */
  --parchment:#f1ede4;      /* light section bg */
  --parchment-soft:#f6f2ea;
  --cream:#fbf8f2;          /* lightest bg */
  --ink:#15171a;            /* darkest body text — keep high contrast */
  --ink-soft:#41464c;       /* secondary text */
  --ink-faint:#767d85;      /* faint text */
  --leather:#1a1f23;        /* dark band base — cold mountain charcoal */
  --leather-2:#232a30;
  --leather-deep:#0d1013;   /* darkest band */
  --amber:#d65f1f;          /* primary accent — campfire orange */
  --amber-bright:#f4863a;   /* bright accent (hl, buttons) — flame */
  --amber-soft:#b34a13;     /* eyebrow / soft accent — burnt ember */
  --rust:#c2502a;           /* warning icon */
  --gold:#e3a45a;           /* gold accent on dark bands — warm ember glow */
  --line:#e5ded0;           /* hairlines */
  --card-warn:#f3ede1;      /* pain card bg */
  --card-warn-line:#e8e1d0;
  --shadow:rgba(13,16,19,.16);
  --glow:rgba(214,95,31,.22);    /* accent glow on dark bands (accent @ ~.22) */
  --glow-soft:rgba(214,95,31,.07);
  --band-text:#ece7d4;           /* body text on dark bands — keep light & warm */
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Source Sans 3',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
@media(max-width:600px){.wrap{padding:0 22px}}
.center{text-align:center}

/* paper grain + plus pattern for dark sections */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.plus-bg{background-image:radial-gradient(circle,var(--glow-soft) 1.4px,transparent 1.6px);background-size:34px 34px}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--band-text);
  background:
    radial-gradient(120% 90% at 12% 0%,var(--glow),transparent 55%),
    linear-gradient(160deg,var(--leather-2) 0%,var(--leather) 45%,var(--leather-deep) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:80px 0 96px;position:relative;z-index:2}
.hero-badges{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
.viewers{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--band-text);
  background:rgba(255,255,255,.04);border:1px solid rgba(232,162,74,.18);padding:7px 15px;border-radius:100px;line-height:1;
}
.viewers .dot{width:8px;height:8px;border-radius:50%;background:#3fbf6a;box-shadow:0 0 0 0 rgba(63,191,106,.5);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,106,.5)}70%{box-shadow:0 0 0 7px rgba(63,191,106,0)}100%{box-shadow:0 0 0 0 rgba(63,191,106,0)}}
.badge{
  display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--amber) 16%,transparent);
  border:1px solid rgba(232,162,74,.35);color:var(--gold);font-weight:600;font-size:13.5px;
  letter-spacing:.02em;padding:7px 15px;border-radius:100px;line-height:1;
}
.hero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.04;font-weight:800;color:var(--band-text);letter-spacing:-.01em;margin-bottom:22px}
.hero h1 .hl{color:var(--amber-bright);font-style:italic}
.hero .sub{font-size:clamp(17px,1.5vw,20px);color:var(--band-text);max-width:34ch;margin-bottom:30px}
.price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.price{font-family:'Playfair Display',serif;font-size:clamp(48px,7vw,64px);font-weight:800;color:#fff;line-height:1}
.price-old{font-size:clamp(20px,3vw,26px);color:var(--amber-soft);text-decoration:line-through;font-weight:600}
.save-pill{display:inline-block;background:rgba(232,162,74,.16);border:1px solid rgba(232,162,74,.4);color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.03em;padding:6px 14px;border-radius:100px;margin-bottom:26px}
.capture{display:flex;gap:10px;flex-wrap:wrap;max-width:480px;margin-bottom:14px}
.capture input{flex:1;min-width:200px;background:rgba(255,255,255,.06);border:1px solid rgba(232,162,74,.28);color:#fff;padding:16px 18px;border-radius:12px;font-size:16px;font-family:inherit}
.capture input::placeholder{color:var(--ink-faint)}
.capture input:focus{outline:none;border-color:var(--amber-bright);background:rgba(255,255,255,.1)}
.btn-cta{
  background:linear-gradient(180deg,var(--amber-bright),var(--amber-soft));color:#fff;font-weight:700;
  font-size:17px;font-family:inherit;border:none;cursor:pointer;padding:16px 28px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px rgba(199,90,26,.4);transition:transform .15s,box-shadow .15s;white-space:nowrap;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(199,90,26,.5)}
.fineprint{font-size:13.5px;color:var(--ink-faint);font-style:italic;margin-bottom:10px}
.fineprint a{color:var(--band-text)}
.secure{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--band-text)}

.book{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(232,162,74,.18);transform:rotate(1.5deg);transition:transform .4s}
.book:hover{transform:rotate(0) scale(1.02)}

/* ---------- SECTIONS ----------
   Vertical rhythm on an 8px scale: 8 / 16 / 24 / 32 / 48 / 64 / 96 */
.section{padding:96px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--band-text);color:var(--amber-soft);font-weight:700;font-size:14px;padding:8px 18px;border-radius:100px;margin-bottom:24px}
h2.head{font-size:clamp(28px,3.6vw,44px);line-height:1.12;color:var(--ink);margin-bottom:16px;font-weight:800}
h2.head .hl{color:var(--amber-soft);font-style:italic}
.lead{font-size:19px;color:var(--ink-soft);max-width:60ch;margin:0 auto}

.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;max-width:920px;margin-left:auto;margin-right:auto}
.pain{display:flex;gap:16px;background:var(--card-warn);border:1px solid var(--card-warn-line);border-radius:14px;padding:24px;align-items:flex-start;text-align:left}
.pain svg{flex-shrink:0;margin-top:2px}
.pain p{font-size:16.5px;color:var(--ink);font-weight:500;line-height:1.5}

/* villain band */
.villain{background:linear-gradient(160deg,var(--leather),var(--leather-deep));color:var(--band-text);position:relative;overflow:hidden}
.villain .eyebrow{background:rgba(214,83,42,.16);color:var(--gold);border:1px solid rgba(214,83,42,.3)}
.villain h2.head{color:var(--band-text)}
.villain h2.head .hl{color:var(--gold);font-style:italic}
.villain .lead{color:var(--band-text)}
.villain-note{max-width:62ch;margin:24px auto 0;font-size:18px;color:var(--band-text);line-height:1.6}
.villain-note strong{color:var(--band-text)}

/* better way */
.betterway{background:linear-gradient(180deg,var(--parchment-soft),var(--cream))}
.author-note{max-width:62ch;margin:24px auto 0;font-size:18px;color:var(--ink-soft);line-height:1.6}
.author-note strong{color:var(--ink)}

/* whats inside */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.feat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;gap:20px;align-items:flex-start;transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow)}
.ficon{flex-shrink:0;width:52px;height:52px;border-radius:13px;background:var(--band-text);display:grid;place-items:center}
.feat h3{font-family:'Source Sans 3',sans-serif;font-size:19px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.feat p{font-size:16px;color:var(--ink-soft);line-height:1.55}

/* timeline */
.timeline{background:var(--cream)}
.tl{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:40px}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start}
.tl-node{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,var(--amber-soft),var(--leather));color:var(--gold);font-weight:700;font-size:14px;line-height:1.15;box-shadow:0 8px 20px rgba(42,20,15,.3),inset 0 0 0 1px rgba(232,162,74,.25);padding:8px}
.tl-body h3{font-family:'Source Sans 3',sans-serif;font-size:21px;font-weight:700;margin-bottom:8px}
.tl-body p{font-size:16.5px;color:var(--ink-soft)}

/* faq */
.faq{background:linear-gradient(180deg,var(--parchment-soft),var(--cream))}
.faq-list{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 24px;font-size:17.5px;font-weight:700;color:var(--ink);font-family:inherit;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .chev{transition:transform .25s;color:var(--amber-soft);flex-shrink:0;font-size:14px}
.faq-item.open .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 22px;font-size:16.5px;color:var(--ink-soft)}

/* final cta */
.final{color:var(--band-text);position:relative;overflow:hidden;background:radial-gradient(120% 90% at 80% 0%,var(--glow),transparent 55%),linear-gradient(160deg,var(--leather-2),var(--leather-deep))}
.final h2{font-size:clamp(28px,4vw,46px);color:var(--band-text);margin-bottom:22px}
.choices{max-width:640px;margin:0 auto 34px;text-align:left}
.choice{font-size:18px;color:var(--band-text);margin-bottom:18px}
.choice b{color:#fff}
.final .price-row{justify-content:center}
.final .capture{margin:0 auto 14px}
.badge-time{display:inline-block;background:rgba(232,162,74,.16);border:1px solid rgba(232,162,74,.4);color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.04em;padding:7px 16px;border-radius:100px}
.trust-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--band-text);margin-top:14px}
.trust-row span{display:inline-flex;align-items:center;gap:7px}

/* footer */
footer{background:var(--leather-deep);color:var(--ink-faint);padding:60px 0 44px}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--band-text);margin-bottom:14px}
.foot-tag{text-align:center;max-width:46ch;margin:0 auto 26px;color:var(--ink-faint)}
.foot-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.foot-links a{color:var(--band-text);text-decoration:underline;font-size:15px}
.foot-links span{color:var(--ink-soft)}
.copyright{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.disclaimer{max-width:70ch;margin:0 auto;text-align:center;font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.disclaimer+.disclaimer{margin-top:14px}

/* ---------- LEGAL / DOC PAGES ---------- */
.doc-top{background:var(--parchment-soft);border-bottom:1px solid var(--line)}
.doc-top .wrap{padding-top:26px;padding-bottom:26px}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--amber-soft);font-weight:600;font-size:15px;text-decoration:none}
.doc{max-width:760px;margin:0 auto;padding:56px 24px 90px}
.doc h1{font-size:clamp(32px,4vw,42px);margin-bottom:8px;color:var(--ink)}
.doc .updated{color:var(--ink-faint);font-size:15px;margin-bottom:40px}
.doc h2{font-family:'Playfair Display',serif;font-size:21px;margin:36px 0 12px;color:var(--ink)}
.doc p{font-size:16px;color:var(--ink-soft);margin-bottom:14px}
.doc ul{margin:0 0 14px 22px}
.doc li{font-size:16px;color:var(--ink-soft);margin-bottom:8px}
.doc a{color:var(--amber-soft);text-decoration:underline}
.doc strong{color:var(--ink)}

/* ---------- THANK YOU ---------- */
.ty-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:radial-gradient(120% 80% at 50% 0%,var(--glow-soft),transparent 60%),var(--cream)}
.ty-card{max-width:560px;width:100%;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px var(--shadow);overflow:hidden;text-align:center}
.ty-head{background:linear-gradient(160deg,var(--leather-2),var(--leather-deep));padding:48px 36px 40px;position:relative;overflow:hidden}
.ty-check{width:74px;height:74px;border-radius:50%;background:linear-gradient(180deg,var(--amber-bright),var(--amber-soft));display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 10px 30px rgba(199,90,26,.5);position:relative;z-index:2}
.ty-head h1{color:var(--band-text);font-size:30px;margin-bottom:10px;position:relative;z-index:2}
.ty-head p{color:var(--band-text);font-size:16px;position:relative;z-index:2}
.ty-body{padding:36px}
.ty-cover{width:150px;border-radius:10px;box-shadow:0 16px 36px var(--shadow);margin:0 auto 26px}
.ty-body h2{font-size:22px;margin-bottom:10px;color:var(--ink)}
.ty-body>p{color:var(--ink-soft);font-size:16px;margin-bottom:26px}
.ty-download{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(180deg,var(--amber-bright),var(--amber-soft));color:#fff;font-weight:700;font-size:17px;padding:17px 24px;border-radius:13px;text-decoration:none;box-shadow:0 8px 24px rgba(199,90,26,.4);transition:transform .15s,box-shadow .15s}
.ty-download:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(199,90,26,.5)}
.ty-note{margin-top:18px;font-size:14px;color:var(--ink-faint)}
.ty-note strong{color:var(--ink-soft)}
.ty-divider{height:1px;background:var(--line);margin:30px 0}
.ty-foot{font-size:13.5px;color:var(--ink-faint);line-height:1.6}
.ty-foot a{color:var(--amber-soft);text-decoration:underline}

/* ---------- BEFORE / AFTER RESULTS ---------- */
.results{background:linear-gradient(180deg,var(--parchment-soft),var(--cream))}
.ba-hero{max-width:980px;margin:48px auto 24px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 14px 36px var(--shadow)}
.ba-hero img{display:block;width:100%;height:auto}
.ba-hero .ba-cap{padding:18px 24px;text-align:center}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto}
.ba-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px var(--shadow)}
.ba-card img{display:block;width:100%;height:auto}
.ba-cap{padding:18px 22px;text-align:left}
.ba-cap h3{font-family:'Source Sans 3',sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ba-cap p{font-size:15px;color:var(--ink-soft);line-height:1.5}
.ba-disclaim{max-width:980px;margin:24px auto 0;font-size:13px;color:var(--ink-faint);text-align:center;font-style:italic}
@media(max-width:720px){.ba-grid{grid-template-columns:1fr}}

/* ---------- STICKY BUY BAR ---------- */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(28,13,9,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(232,162,74,.22);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.sticky-buy.show{transform:translateY(0)}
.sticky-inner{
  max-width:var(--maxw);margin:0 auto;padding:13px 24px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.sticky-info{display:flex;align-items:baseline;gap:10px;min-width:0}
.sticky-title{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;color:var(--band-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-price{font-weight:800;font-size:20px;color:#fff;white-space:nowrap}
.sticky-price .old{font-size:14px;color:var(--amber-soft);text-decoration:line-through;margin-left:6px;font-weight:600}
.sticky-buy .btn-cta{padding:13px 26px;font-size:16px;flex-shrink:0}
@media(max-width:560px){
  .sticky-title{display:none}
  .sticky-inner{padding:11px 16px;gap:12px}
  .sticky-info{flex:0 0 auto}
  .sticky-buy .btn-cta{flex:1;padding:14px 18px}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .hero{padding-top:0}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding:48px 0 48px}
  .book{max-width:320px;margin:0 auto;transform:rotate(0)}
  .pain-grid,.feat-grid{grid-template-columns:1fr}
  .tl-row{grid-template-columns:72px 1fr;gap:20px}
  .tl-node{width:72px;height:72px;font-size:12px}
  .section{padding:64px 0}
  .capture input{min-width:100%}
  .capture .btn-cta{width:100%}
  .trust-row{gap:16px}
  /* keep sticky bar button compact, not full hero width */
  .sticky-buy .btn-cta{width:auto}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .hero h1{font-size:34px}
  .feat{padding:24px}
  .doc{padding:40px 20px 64px}
  .section{padding:56px 0}
}

/* ============================================================
   STORE ATMOSPHERE — Mountain Men (wood + ice)  [per-store add-on]
   Additive only: decorative texture on the dark bands. Does NOT
   alter any layout / spacing / component rule above. Remove this
   whole block to return to the canonical flat backgrounds.
   ============================================================ */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    /* frost — cold light blooming from the top, pooling low in the corners */
    radial-gradient(72% 44% at 50% -10%, rgba(164,194,216,.17), transparent 62%),
    radial-gradient(56% 44% at 5% 114%, rgba(150,182,208,.17), transparent 64%),
    radial-gradient(56% 44% at 95% 114%, rgba(150,182,208,.15), transparent 64%),
    /* frost — faint cool sheen down from the very top edge */
    linear-gradient(180deg, rgba(164,194,216,.12) 0%, transparent 14%),
    /* wood — plank faces: alternating warm tone bands separated by a dark seam */
    repeating-linear-gradient(90deg,
      rgba(122,84,46,.06) 0 95px,
      rgba(0,0,0,.34) 95px 96px,
      rgba(58,38,20,.085) 96px 191px,
      rgba(0,0,0,.34) 191px 192px),
    /* wood — fine vertical grain inside the planks */
    repeating-linear-gradient(90deg,
      rgba(140,96,52,.085) 0 1px,
      transparent 1px 3px,
      rgba(48,32,18,.08) 3px 4px,
      transparent 4px 7px);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat;
}
/* footer gets a lighter version so the base of the page matches the bands */
footer{position:relative;overflow:hidden}
footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(180deg, rgba(164,194,216,.08) 0%, transparent 26%),
    repeating-linear-gradient(90deg,
      rgba(122,84,46,.05) 0 109px,
      rgba(0,0,0,.26) 109px 110px,
      rgba(58,38,20,.06) 110px 219px,
      rgba(0,0,0,.26) 219px 220px),
    repeating-linear-gradient(90deg,
      rgba(140,96,52,.06) 0 1px,
      transparent 1px 3px,
      rgba(48,32,18,.055) 3px 4px,
      transparent 4px 7px);
  background-repeat:no-repeat,repeat,repeat;
}