/* ============================================================
   NIGHT PEACE — sales system
   Same bones as the Discernment First Aid Kit page, shifted to
   the Night Series slice of the palette.
   ============================================================ */

@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{
  /* reading grounds — shared with the toolkit page so the two feel like one business */
  --linen:#E1DBCA; --linen-soft:#EDE8DC; --pearl:#F8F5EB;

  /* the night bands */
  --deep-night:#203035;   /* hero, deepest band */
  --night:#334D56;        /* the signature hue, straight off the course cover */
  --slate:#434F52;
  --water:#6F8489;

  /* the single warm accent, carried over from gabrielawentworth.co */
  --brick:#693D31;
  --cocoa:#34160C;

  --ink:#22333A;          /* body on light — night-leaning, not brown */
  --ink-soft:#5B6A6C;
  --cream-soft:#CBD2D0;
  --hair:rgba(34,51,58,.2);
  --hair-dark:rgba(225,219,202,.26);

  /* the three doors */
  --d1:#6F8489;  /* body   */
  --d2:#AF6652;  /* soul   */
  --d3:#B39853;  /* spirit */

  --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}

.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}

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

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

/* ── Type ── */
h1{font-family:var(--f-display);font-weight:400;line-height:1.1;
   font-size:clamp(36px,6vw,60px);color:var(--night);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(--night);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(--night);text-wrap:balance}
p{margin-bottom:1.1em} p:last-child{margin-bottom:0}
strong{font-weight:400;color:var(--night);box-shadow:inset 0 -.4em 0 rgba(111,132,137,.2)}
.g-night strong,.g-deep strong,.g-slate strong,.g-brick 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(--water);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(28px,4.4vw,40px);
  line-height:1.3;color:var(--night);display:block}
.g-night .script,.g-deep .script,.g-slate .script,.g-brick .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)}

.rule{width:52px;height:1px;background:currentColor;opacity:.4;border:0;margin:26px 0}
.rule.center{margin:26px auto}
.wordmark{width:230px;margin:0 auto 30px}
.emblem{width:92px;margin:0 auto 24px;opacity:.95}
.deco{position:absolute;pointer-events:none;opacity:.35;z-index:0;width:270px}
.deco-l{left:-104px;top:8%} .deco-r{right:-104px;bottom:6%}
@media(max-width:1100px){.deco{display:none}}

/* ── Buttons ── */
.cta-block{text-align:center;padding:8px 0 0}
.cta{display:inline-block;background:var(--deep-night);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(--deep-night);
  transition:background .22s ease,color .22s ease,transform .2s ease;max-width:100%}
.cta:hover{background:var(--water);border-color:var(--water);transform:translateY(-1px)}
.g-night .cta,.g-deep .cta,.g-slate .cta,.g-brick .cta{
  background:var(--linen);border-color:var(--linen);color:var(--deep-night)}
.g-night .cta:hover,.g-deep .cta:hover,.g-slate .cta:hover,.g-brick .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-night .cta-sub,.g-deep .cta-sub,.g-slate .cta-sub,.g-brick .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-night .trust-row,.g-deep .trust-row,.g-slate .trust-row,.g-brick .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(--water);opacity:.9}
.xs li::before{content:"✕";position:absolute;left:2px;top:0;color:var(--ink-soft);font-size:14px}
.g-night .checks li::before,.g-deep .checks li::before,
.g-slate .checks li::before,.g-brick .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-night .panel,.g-deep .panel,.g-slate .panel,.g-brick .panel{
  background:rgba(225,219,202,.08);border-color:var(--hair-dark)}
.pennant{background:var(--night);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(--night)}
.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:62px 0 66px;background:var(--deep-night)}
.hero h1{margin-bottom:24px;color:var(--pearl)}
.hero .sub{font-size:clamp(18px,2.2vw,22px);line-height:1.55;max-width:640px;
  margin:0 auto;color:var(--pearl);opacity:.96}
.sub-detail{font-size:clamp(15px,1.7vw,17px);line-height:1.68;max-width:620px;
  margin:18px auto 0;color:var(--linen);opacity:.82}

/* ── Video band ── */
.video-band{padding:60px 0 70px}
.vsl-full{max-width:900px;margin:0 auto 42px}
.vsl-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--deep-night);border:1px solid var(--hair)}
.vsl-frame img,.vsl-frame iframe,.vsl-frame video{width:100%;height:100%;
  object-fit:cover;border:0;display:block}

.bestpart{background:var(--linen);border:1px solid var(--hair);color:var(--ink);
  padding:30px 32px;margin:0 0 34px;font-size:18px;line-height:1.68}
.bestpart b{font-family:var(--f-label);text-transform:uppercase;font-size:10.5px;
  letter-spacing:.24em;color:var(--water);display:block;margin-bottom:11px;font-weight:500}

/* ── The Three Doors ── */
.door{display:grid;grid-template-columns:108px 1fr;gap:30px;align-items:start;
  padding:34px 0;border-top:1px solid var(--hair-dark);position:relative}
.door:last-of-type{border-bottom:1px solid var(--hair-dark)}
.door-art{width:108px;opacity:1}
.door .eyebrow{margin-bottom:9px;color:var(--linen)}
.door h3{margin-bottom:9px}
.door .sig{display:block;margin-top:13px;padding-left:17px;
  border-left:2px solid var(--dot,var(--water));font-family:var(--f-italic);
  font-style:italic;font-size:16.5px;line-height:1.6;color:var(--cream-soft)}

/* ── 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(--night);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}}

/* ── Lessons ── */
.lesson{display:grid;grid-template-columns:48px 1fr;gap:22px;align-items:start;
  padding:26px 0;border-top:1px solid var(--hair)}
.lesson:last-of-type{border-bottom:1px solid var(--hair)}
.lesson-n{font-family:var(--f-display);font-size:30px;line-height:1;color:var(--water)}
.lesson h3{font-size:clamp(20px,2.4vw,24px);margin-bottom:6px}
.lesson p{font-size:16.5px;margin-bottom:0}

/* portrait shot — keep it to a product size, not a billboard */
/* landscape mockup — break out of the reading column, centred with margins */
.mockup{width:min(860px,94vw);max-width:none;height:auto;display:block;
  margin:22px 0 40px calc(50% - min(430px,47vw))}
@media(max-width:760px){.mockup{width:calc(100% + 52px);margin:14px 0 28px -26px}}

.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(--night);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:19px;color:var(--water);
  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-grid{display:grid;grid-template-columns:1fr 290px;gap:46px;align-items:start}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--deep-night);
  padding:11px 14px;transform:translateY(110%);transition:transform .28s ease;
  box-shadow:0 -6px 22px rgba(32,48,53,.35);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(--deep-night)}

footer{background:var(--deep-night);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;margin-bottom:18px}

a:focus-visible,summary:focus-visible{outline:2px solid var(--water);outline-offset:3px}

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

@media(max-width:880px){
  .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}
  .hero{padding:48px 0 52px}
  .video-band{padding:42px 0 54px}
  .door{grid-template-columns:1fr;gap:14px}
  .door-art{width:84px}
  .lesson{grid-template-columns:36px 1fr;gap:16px}
  .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 2 — movement and interaction, after Plug & Get Paid
   ============================================================ */

/* two-tone headline: the turn drops into Fournier italic, in Water */
.hero h1 em{font-family:var(--f-italic);font-style:italic;color:var(--water);
  display:inline-block;margin-top:.06em}

/* the pattern drifts slowly behind the dark bands */
.textured::before{background-attachment:fixed}
@media(hover:none){.textured::before{background-attachment:scroll}}

/* ── the ache, as three cards ── */
.ache-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0 0}
.ache-card{background:var(--linen);border-top:2px solid var(--water);padding:26px 24px;
  transition:transform .3s ease,box-shadow .3s ease}
.ache-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(34,51,58,.12)}
.ache-card h3{font-size:20px;margin-bottom:10px}
.ache-card p{font-size:15.5px;line-height:1.62;margin:0}
.g-soft .ache-card{background:var(--linen)}
@media(max-width:820px){.ache-cards{grid-template-columns:1fr;gap:16px}}

/* ── real pages from the course ── */
.inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:46px 0 0;
  align-items:start}
.inside-card{margin:0;transition:transform .35s ease}
.inside-card:hover{transform:translateY(-6px)}
.inside-card img{width:100%;border:1px solid var(--hair);
  box-shadow:0 8px 26px rgba(34,51,58,.14)}
.inside-card figcaption{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  margin-top:14px}
.inside-card figcaption b{display:block;font-family:var(--f-display);font-size:19px;
  color:var(--night);font-weight:400;margin-bottom:4px}
@media(max-width:820px){.inside-grid{grid-template-columns:1fr;gap:30px}}

/* handwritten annotation with an arrow, as on their page */
.annotate{font-family:var(--f-script);font-size:clamp(22px,2.6vw,28px);color:var(--water);
  text-align:right;margin:14px 44px 0 0;line-height:1.3}
.annotate .arrow{display:inline-block;transform:rotate(14deg);margin-left:4px;font-size:.8em}
@media(max-width:820px){.annotate{text-align:center;margin-right:0}}

/* ── the door finder ── */
.finder{background:rgba(225,219,202,.07);border:1px solid var(--hair-dark);
  padding:34px 30px;margin:46px 0 0}
.finder .q{margin-bottom:24px}
.finder .q:last-of-type{margin-bottom:10px}
.q-text{font-family:var(--f-display);font-size:19px;color:var(--pearl);margin-bottom:12px}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opts button{font-family:var(--f-body);font-size:15.5px;line-height:1.5;text-align:left;
  background:transparent;color:var(--linen);border:1px solid var(--hair-dark);
  padding:13px 16px;border-radius:3px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.q-opts button:hover{background:rgba(225,219,202,.1);border-color:var(--linen);
  transform:translateX(3px)}
.q-opts button.picked{background:var(--linen);color:var(--deep-night);border-color:var(--linen)}
.q-opts button:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.finder-out{margin-top:26px;padding-top:24px;border-top:1px solid var(--hair-dark);
  animation:fadeUp .5s ease both}
.finder-door{margin-bottom:8px;color:var(--pearl)}
.finder-note{color:var(--cream-soft);font-size:16.5px;max-width:460px;margin:0 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){.finder{padding:26px 20px}}
@media(prefers-reduced-motion:reduce){
  .ache-card,.inside-card,.q-opts button{transition:none}
  .finder-out{animation:none}
  .textured::before{background-attachment:scroll}
}

/* the ache cards need the full page width, not the reading column */
.ache-cards{width:min(1000px,94vw);margin-left:calc(50% - min(500px,47vw));
  margin-right:0;gap:24px}
@media(max-width:820px){
  .ache-cards{width:100%;margin-left:0;margin-right:0}
}