/* ============================================================
   THE DISCERNMENT FIRST AID KIT — sales system
   Palette and type taken from the live site, gabrielawentworth.co
   ============================================================ */

@font-face{font-family:'Bague Text';src:url('fonts/Bague_Text_Regular-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'TT Norms Exp';src:url('fonts/tt_norms_pro_expanded_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fournier Italic';src:url('fonts/fournierproitalic.woff2') format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:'Golden Hopes';src:url('fonts/goldenhopesregular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  /* ── grounds, sampled from the live site ── */
  --linen:#E1DBCA;        /* the reading ground */
  --linen-soft:#EDE8DC;   /* panels sitting on linen */
  --taupe:#95938D;        /* the patterned band */
  --pearl:#F8F5EB;        /* type on dark grounds */

  /* ── the dark bands, in the site's rotation ── */
  --olive:#4E4E3A;
  --slate:#434F52;
  --brick:#693D31;
  --cocoa:#34160C;

  /* ── ink ── */
  --ink:#34160C;          /* body on light */
  --ink-soft:#6A5347;     /* muted on light */
  --cream-soft:#DAD3C3;   /* muted on dark */
  --hair:rgba(52,22,12,.22);
  --hair-dark:rgba(225,219,202,.26);

  /* ── the five stages, from the product ── */
  --s1:#6F8489; --s2:#828260; --s3:#334D56; --s4:#AF6652; --s5:#394428;

  --f-display:'Bague Text',Georgia,'Times New Roman',serif;
  --f-label:'TT Norms Exp','PT Sans',system-ui,sans-serif;
  --f-italic:'Fournier Italic',Georgia,serif;
  --f-body:'PT Sans',system-ui,-apple-system,sans-serif;
  --f-script:'Golden Hopes','Brush Script MT',cursive;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--linen); color:var(--ink);
  font-family:var(--f-body); font-size:17.5px; line-height:1.76;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}

/* ── Layout ── */
.wrap{max-width:680px;margin:0 auto;padding:0 26px}
.wrap-wide{max-width:1080px;margin:0 auto;padding:0 26px}
section{padding:86px 0;position:relative;overflow:hidden}
.tight{padding:60px 0}

/* ── Grounds ── */
.g-pattern{background:var(--taupe)}
.textured::before,.g-pattern::before{
  content:"";position:absolute;inset:0;
  background:url('art/pattern.jpg') center/cover no-repeat;
  opacity:.13;pointer-events:none;z-index:0}
.g-pattern::before{opacity:.30}
.textured > *,.g-pattern > *{position:relative;z-index:1}
.g-soft{background:var(--linen-soft)}
.g-olive{background:var(--olive)}
.g-slate{background:var(--slate)}
.g-brick{background:var(--brick)}
.g-cocoa{background:var(--cocoa)}

.g-olive,.g-slate,.g-brick,.g-cocoa,.g-pattern{color:var(--pearl)}
.g-olive h1,.g-olive h2,.g-olive h3,
.g-slate h1,.g-slate h2,.g-slate h3,
.g-brick h1,.g-brick h2,.g-brick h3,
.g-cocoa h1,.g-cocoa h2,.g-cocoa h3,
.g-pattern h1,.g-pattern h2,.g-pattern h3{color:var(--pearl)}
.g-olive .aside,.g-slate .aside,.g-brick .aside,
.g-cocoa .aside,.g-pattern .aside{color:var(--cream-soft)}
.g-olive .eyebrow,.g-slate .eyebrow,.g-brick .eyebrow,
.g-cocoa .eyebrow,.g-pattern .eyebrow{color:var(--linen)}
.g-olive .muted,.g-slate .muted,.g-brick .muted,
.g-cocoa .muted,.g-pattern .muted{color:var(--cream-soft)}

/* ── Type ── */
h1{font-family:var(--f-display);font-weight:400;line-height:1.1;
   font-size:clamp(36px,6.2vw,62px);color:var(--brick);letter-spacing:-.005em;
   text-wrap:balance}
h2{font-family:var(--f-display);font-weight:400;line-height:1.16;
   font-size:clamp(28px,4.3vw,42px);color:var(--brick);text-wrap:balance}
h3{font-family:var(--f-display);font-weight:400;line-height:1.22;
   font-size:clamp(22px,2.9vw,29px);color:var(--brick);text-wrap:balance}
p{margin-bottom:1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:400;color:var(--brick);
       box-shadow:inset 0 -.4em 0 rgba(105,61,49,.14)}
.g-olive strong,.g-slate strong,.g-brick strong,
.g-cocoa strong,.g-pattern strong{color:var(--pearl);
       box-shadow:inset 0 -.4em 0 rgba(248,245,235,.14)}

.eyebrow{font-family:var(--f-label);text-transform:uppercase;
  font-size:10.5px;letter-spacing:.26em;color:var(--brick);
  display:block;margin-bottom:18px}
.aside{font-family:var(--f-italic);font-style:italic;
  font-size:18px;line-height:1.5;color:var(--ink-soft);
  display:block;margin-bottom:16px}
.script{font-family:var(--f-script);font-size:clamp(30px,4.6vw,42px);
  line-height:1.25;color:var(--brick);display:block}
.g-olive .script,.g-slate .script,.g-brick .script,
.g-cocoa .script,.g-pattern .script{color:var(--linen)}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.62}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* ── Ornaments ── */
.rule{width:52px;height:1px;background:currentColor;opacity:.4;border:0;margin:26px 0}
.rule.center{margin:26px auto}
.emblem{width:104px;margin:0 auto 26px;opacity:.95}
.wordmark{width:230px;margin:0 auto 30px}

/* botanical line art bleeding off the page edge, as on the site */
.deco{position:absolute;pointer-events:none;opacity:.4;z-index:0;width:280px}
.deco-l{left:-108px;top:8%}
.deco-r{right:-108px;bottom:6%}
@media(max-width:1100px){.deco{display:none}}

/* ── Pill buttons, matching the site ── */
.cta-block{text-align:center;padding:8px 0 0}
.cta{
  display:inline-block;background:var(--cocoa);color:var(--pearl);
  font-family:var(--f-label);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.17em;line-height:1.4;
  padding:20px 46px;border-radius:999px;text-decoration:none;
  border:1px solid var(--cocoa);
  transition:background .22s ease,color .22s ease,transform .2s ease;
  max-width:100%;
}
.cta:hover{background:var(--brick);border-color:var(--brick);transform:translateY(-1px)}
.g-olive .cta,.g-slate .cta,.g-brick .cta,.g-cocoa .cta,.g-pattern .cta{
  background:var(--linen);border-color:var(--linen);color:var(--cocoa)}
.g-olive .cta:hover,.g-slate .cta:hover,.g-brick .cta:hover,
.g-cocoa .cta:hover,.g-pattern .cta:hover{background:var(--pearl);border-color:var(--pearl)}
.cta-sub{font-family:var(--f-body);font-size:13.5px;color:var(--ink-soft);
  margin-top:16px;line-height:1.6}
.g-olive .cta-sub,.g-slate .cta-sub,.g-brick .cta-sub,
.g-cocoa .cta-sub,.g-pattern .cta-sub{color:var(--linen)}

.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 28px;
  margin-top:20px;font-family:var(--f-body);font-size:12.5px;color:var(--ink-soft)}
.g-olive .trust-row,.g-slate .trust-row,.g-brick .trust-row,
.g-cocoa .trust-row,.g-pattern .trust-row{color:var(--linen);opacity:.9}

/* ── Lists ── */
ul{list-style:none}
.checks li,.xs li{position:relative;padding-left:32px;margin-bottom:16px;line-height:1.7}
.checks li::before{content:"";position:absolute;left:2px;top:.62em;
  width:10px;height:10px;border-radius:50%;border:1.5px solid var(--brick);opacity:.85}
.xs li::before{content:"✕";position:absolute;left:2px;top:0;
  color:var(--ink-soft);font-size:14px}
.g-olive .checks li::before,.g-slate .checks li::before,.g-brick .checks li::before,
.g-cocoa .checks li::before,.g-pattern .checks li::before{border-color:var(--linen)}
.checks li strong,.xs li strong{box-shadow:none}

/* ── Panels ── */
.panel{background:var(--linen-soft);padding:32px 30px;margin:32px 0;
  border:1px solid var(--hair)}
.g-soft .panel{background:var(--linen)}
.g-olive .panel,.g-slate .panel,.g-brick .panel,
.g-cocoa .panel,.g-pattern .panel{background:rgba(225,219,202,.08);
  border-color:var(--hair-dark)}

/* the brick banner with a pennant point — the site's signature block */
.pennant{background:var(--brick);color:var(--pearl);padding:36px 38px;
  margin:44px 0 60px;position:relative;text-align:center}
.pennant::after{content:"";position:absolute;left:50%;bottom:-26px;
  transform:translateX(-50%);border-left:26px solid transparent;
  border-right:26px solid transparent;border-top:26px solid var(--brick)}
.pennant .aside{color:var(--cream-soft)}
.pennant strong{color:var(--pearl);box-shadow:inset 0 -.4em 0 rgba(248,245,235,.16)}

/* ── Hero ── */
.hero{padding:52px 0 74px;background:var(--brick)}
.hero h1{margin-bottom:22px;color:var(--pearl)}
.hero .sub{font-size:clamp(17px,2.1vw,21px);line-height:1.6;
  max-width:580px;margin:0 auto;color:var(--pearl);opacity:.94}

.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;
  align-items:start;margin:40px auto 0;max-width:1010px;text-align:left}
.vsl-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--cocoa);border:1px solid rgba(248,245,235,.3)}
.vsl-frame img,.vsl-frame iframe,.vsl-frame video{
  width:100%;height:100%;object-fit:cover;border:0;display:block}

.mini-stack{display:flex;flex-direction:column;gap:14px}
.mini-t{background:rgba(52,22,12,.34);padding:17px 19px;
  border:1px solid rgba(248,245,235,.2)}
.mini-t .stars{font-size:11px;letter-spacing:.2em;margin-bottom:7px;color:var(--linen)}
.mini-t p{font-size:14.5px;line-height:1.56;margin-bottom:9px;color:var(--pearl)}
.mini-t .who{font-family:var(--f-label);text-transform:uppercase;
  font-size:9.5px;letter-spacing:.16em;color:var(--linen)}
.mini-t .who span{opacity:.75}

/* ── The best part ── */
.bestpart{background:rgba(52,22,12,.38);border:1px solid rgba(248,245,235,.22);
  padding:30px 32px;margin:42px 0 30px;font-size:18px;line-height:1.68;
  color:var(--pearl)}
.bestpart b{font-family:var(--f-label);text-transform:uppercase;
  font-size:10.5px;letter-spacing:.24em;color:var(--linen);
  display:block;margin-bottom:11px;font-weight:500}

/* ── Testimonials ── */
.t-row{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-items:stretch}
.t-card{background:var(--linen);color:var(--ink);padding:34px 26px 28px;
  text-align:center;display:flex;flex-direction:column}
.t-card img{width:78px;height:78px;border-radius:50%;object-fit:cover;
  margin:-56px auto 15px;border:3px solid var(--linen)}
.stars{color:var(--s4);font-size:12.5px;letter-spacing:.22em;margin-bottom:11px}
.t-quote{font-size:15.5px;line-height:1.66}
.t-name{font-family:var(--f-label);text-transform:uppercase;font-size:10px;
  letter-spacing:.17em;color:var(--brick);margin-top:auto;padding-top:16px;line-height:1.75}
.t-name span{display:block;color:var(--ink-soft);letter-spacing:.13em;font-size:9px}
.t-wide{max-width:1140px;margin:0 auto;padding:0 26px}

/* ── The five stages ── */
.stage{display:grid;grid-template-columns:112px 1fr;gap:30px;align-items:start;
  padding:34px 0;border-top:1px solid var(--hair)}
.stage:last-of-type{border-bottom:1px solid var(--hair)}
.stage-art{width:112px;opacity:1}
.stage .eyebrow{margin-bottom:9px;color:var(--dot,var(--brick))}
.stage h3{margin-bottom:9px}
.stage .so{display:block;margin-top:13px;padding-left:17px;
  border-left:2px solid var(--dot,var(--brick));
  font-family:var(--f-italic);font-style:italic;
  font-size:16.5px;line-height:1.6;color:var(--ink-soft)}

/* ── Offer ── */
.price{font-family:var(--f-display);font-size:clamp(50px,8vw,74px);
  line-height:1;color:var(--linen);margin-bottom:6px}

/* ── FAQ ── */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:21px 34px 21px 0;
  position:relative;font-family:var(--f-display);font-size:19.5px;
  color:var(--brick);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:19px;
  color:var(--brick);font-size:21px;font-family:var(--f-body)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 23px;font-size:16.5px;line-height:1.72}

/* ── About ── */
.about-grid{display:grid;grid-template-columns:1fr 290px;gap:46px;align-items:start}

/* ── Sticky mobile CTA ── */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--cocoa);padding:11px 14px;
  transform:translateY(110%);transition:transform .28s ease;
  box-shadow:0 -6px 22px rgba(52,22,12,.3);display:none}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .cta{width:100%;padding:16px 12px;font-size:12px;
  background:var(--linen);border-color:var(--linen);color:var(--cocoa)}

/* ── Footer ── */
footer{background:var(--cocoa);color:var(--cream-soft);padding:56px 0;
  text-align:center;font-family:var(--f-body);font-size:13.5px;line-height:1.8}
footer a{color:var(--linen);text-decoration:none}
footer .script{color:var(--linen);opacity:.92}
footer .script{margin-bottom:18px}

a:focus-visible,summary:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.g-olive a:focus-visible,.g-slate a:focus-visible,.g-brick a:focus-visible,
.g-cocoa a:focus-visible,.g-pattern a:focus-visible{outline-color:var(--linen)}

/* ── Mobile ── */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .about-grid{grid-template-columns:1fr;gap:28px}
  .about-grid img{max-width:250px;margin:0 auto}
}
@media(max-width:760px){
  body{font-size:17px}
  section{padding:62px 0}
  .t-row{grid-template-columns:1fr;gap:70px}
  .stage{grid-template-columns:1fr;gap:14px}
  .stage-art{width:76px}
  .cta{padding:18px 26px;font-size:11.5px;letter-spacing:.14em;width:100%}
  .sticky-cta{display:block}
  .panel,.pennant{padding:26px 22px}
  .bestpart{padding:24px 22px}
  .wordmark{width:190px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sticky-cta{transition:none}
}

/* ============================================================
   REVISION 3 — plainer language, and visuals that explain
   ============================================================ */

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .75s ease,transform .75s ease}
[data-reveal].in{opacity:1;transform:none}

/* ---- The Knot diagram ---- */
.knot{max-width:420px;margin:40px auto 4px;display:block}
.knot .tangle path{fill:none;stroke-width:2.1;stroke-linecap:round;opacity:.85;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s ease}
.knot.in .tangle path{stroke-dashoffset:0}
.knot .tangle path:nth-child(2){transition-delay:.12s}
.knot .tangle path:nth-child(3){transition-delay:.24s}
.knot .tangle path:nth-child(4){transition-delay:.36s}
.knot .tangle path:nth-child(5){transition-delay:.48s}
.knot .tangle path:nth-child(6){transition-delay:.6s}
.knot .strand{opacity:0;transform:translateX(-10px);
  transition:opacity .55s ease,transform .55s ease}
.knot.in .strand{opacity:1;transform:none}
.knot.in .strand:nth-of-type(1){transition-delay:.9s}
.knot.in .strand:nth-of-type(2){transition-delay:1.02s}
.knot.in .strand:nth-of-type(3){transition-delay:1.14s}
.knot.in .strand:nth-of-type(4){transition-delay:1.26s}
.knot.in .strand:nth-of-type(5){transition-delay:1.38s}
.knot.in .strand:nth-of-type(6){transition-delay:1.5s}
.knot text{font-family:var(--f-body);font-size:14px;fill:var(--ink)}
.knot .cap{font-family:var(--f-label);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;fill:var(--brick)}
.knot .qmark{font-family:var(--f-display);font-size:24px;fill:var(--s4)}
.g-soft .knot text{fill:var(--ink)}

/* ---- Before / after ---- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:40px 0 0;
  border:1px solid var(--hair)}
.ba > div{padding:30px 26px}
.ba .now{background:var(--linen)}
.ba .after{background:var(--brick);color:var(--pearl)}
.ba h3{font-size:21px;margin-bottom:16px}
.ba .now h3{color:var(--ink-soft)}
.ba .after h3{color:var(--pearl)}
.ba ul{list-style:none}
.ba li{padding-left:22px;position:relative;margin-bottom:12px;
  font-size:16px;line-height:1.6}
.ba li:last-child{margin-bottom:0}
.ba .now li::before{content:"—";position:absolute;left:0;color:var(--ink-soft)}
.ba .after li::before{content:"→";position:absolute;left:0;color:var(--linen)}
@media(max-width:700px){.ba{grid-template-columns:1fr}}

/* ---- Message screenshots ---- */
.msgs{display:grid;grid-template-columns:1fr 1fr;gap:26px;
  align-items:start;max-width:900px;margin:30px auto 0}
.msgs img{border-radius:14px;box-shadow:0 3px 14px rgba(52,22,12,.16)}
@media(max-width:760px){.msgs{grid-template-columns:1fr;gap:20px}}

/* ---- Stage path connector ---- */
.stage{position:relative}
.stage::after{content:"";position:absolute;left:56px;top:calc(50% + 52px);
  bottom:-34px;width:1px;background:var(--hair)}
.stage:last-of-type::after{display:none}
@media(max-width:760px){.stage::after{display:none}}