/* ============================================================
   Psychobarber Mentorship — discovery call funnel
   Direction: the barbershop station, recolored from Jeff's own
   TikTok/Instagram avatar — deep magenta stage light, warm skin
   tone, a cream shirt. Cream and aubergine-black in place of
   talc-and-charcoal, a berry accent in place of mint vinyl,
   antique gold in place of amber. The proof is still a receipt,
   because barbers get paid at the chair.
   ============================================================ */

:root{
  /* colour */
  --talc:#F3EAE7;
  --paper:#FBF6F4;
  --ink:#1E1420;
  --ink-2:#4A2C3D;
  --ink-3:#7D5D6C;
  --vinyl:#7A2249;
  --vinyl-d:#551631;
  --vinyl-hi:#E3AFC7;
  --chrome:#D8C6CB;
  --bulb:#C89A46;
  --pole:#A23B3F;

  /* type */
  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,monospace;

  /* space */
  --band:clamp(4.25rem,8vw,7.5rem);
  --gut:clamp(1.15rem,4vw,2.25rem);
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* elevation — one system, reused everywhere something lifts or floats */
  --shadow-sm:0 4px 16px rgba(30,20,32,.10);
  --shadow:0 20px 48px rgba(30,20,32,.16);
  --shadow-lg:0 28px 70px rgba(30,20,32,.24);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--bulb);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--bulb); color:var(--ink);
  padding:.7rem 1.1rem; z-index:99;
  font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- shared type ---------- */

h1,h2,h3{
  font-family:var(--disp);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
  margin:0;
}

.eyebrow,.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--vinyl);
  margin:0 0 1.1rem;
}

.sechead{ max-width:44ch; margin:0 0 clamp(2.25rem,4vw,3.5rem); }
.sechead h2{ font-size:clamp(2.1rem,1.2rem + 3.4vw,3.9rem); }
.sechead .sub{
  margin:1.15rem 0 0;
  color:var(--ink-2);
  font-size:1.06em;
}
.sechead--c{ max-width:52ch; margin-inline:auto; text-align:center; }

.band{ padding-block:var(--band); }

/* placeholder figures wear a visible mark so nothing ships by accident */
[data-placeholder]{
  border-bottom:1.5px dashed var(--bulb);
  padding-bottom:1px;
}

/* ---------- buttons ---------- */

.btn{
  --bg:var(--vinyl);
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--bg); color:#fff;
  font-family:var(--disp); font-weight:700;
  font-size:1.06rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.92rem 1.5rem;
  border:1.5px solid var(--bg);
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{
  background:var(--vinyl-d);
  transform:translateY(-2px);
  box-shadow:0 8px 0 -4px rgba(85,22,49,.35),0 0 0 4px rgba(122,34,73,.16);
}
.btn:active{ transform:translateY(0) scale(.97); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:currentColor;
}
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:0 0 0 4px rgba(30,20,32,.1); }

.btn--sm{ font-size:.92rem; padding:.62rem 1.05rem; }
.btn--wide{ width:100%; justify-content:center; }

/* ---------- barber pole mark ---------- */

.mark{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.mark__pole{
  display:flex; flex-direction:column; gap:2px;
  width:15px; height:30px;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
  padding:2px 0;
  flex:none;
}
.mark__pole i{ display:block; height:4px; background:var(--pole); }
.mark__pole i:nth-child(2){ background:var(--vinyl); }

.mark__txt{ display:flex; flex-direction:column; line-height:1; }
.mark__txt b{
  font-family:var(--disp); font-weight:800;
  font-size:1.12rem; letter-spacing:.06em;
}
.mark__txt em{
  font-family:var(--mono); font-style:normal;
  font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--vinyl);
  margin-top:2px;
}

/* ---------- nav ---------- */

.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(122,34,73,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--vinyl-d); }

.nav__in{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding:.7rem var(--gut);
  display:flex; align-items:center; gap:1.5rem;
}
.nav .mark__txt b{ color:var(--talc); }
.nav .mark__txt em{ color:var(--vinyl-hi); }
.nav__links{ margin-left:auto; display:flex; gap:1.5rem; }
.nav__links a{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:#D9C9D0;
  padding-block:.35rem;
  border-bottom:1.5px solid transparent;
}
.nav__links a:hover{ color:#fff; border-bottom-color:var(--vinyl-hi); }
.nav .btn{ --bg:var(--talc); color:var(--vinyl); border-color:var(--talc); }
.nav .btn:hover{ background:var(--paper); color:var(--vinyl-d); }

/* ---------- hero ---------- */

.hero{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding-block:clamp(3rem,6vw,5.25rem) clamp(3.25rem,6vw,5.5rem);
  overflow:hidden;
}
/* the warm bulb over the mirror — a slow drift so it reads as a real
   light source breathing, not a static graphic. 30s is well below the
   speed a visitor would consciously register as "moving". */
.hero::before{
  content:"";
  position:absolute; top:-22%; right:-8%;
  width:min(58vw,620px); aspect-ratio:1;
  background:radial-gradient(circle,rgba(200,154,70,.28),rgba(200,154,70,0) 68%);
  pointer-events:none;
  animation:bulb-drift 30s ease-in-out infinite alternate;
}
@keyframes bulb-drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-3%,3%) scale(1.08); }
}
/* fine talc grain */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:screen;
  pointer-events:none;
}

.hero__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}

.hero .eyebrow{ color:var(--bulb); }

.hero__h1{
  font-size:clamp(2.5rem,1.1rem + 5.6vw,4.9rem);
  line-height:.86;
  letter-spacing:-.005em;
  margin:0 0 1.35rem;
}
.hero__h1 .l{ display:block; }
.l--turn{
  color:var(--vinyl);
  font-style:italic;
}

.lede{
  max-width:46ch;
  color:var(--ink-2);
  font-size:1.09em;
  margin:0 0 1.9rem;
}
.lede--strong{
  font-family:var(--disp); font-weight:700;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--vinyl);
  font-size:clamp(1.3rem,1rem + 1.3vw,1.7rem);
}

.urgency{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1.4rem;
  padding:.42rem .85rem;
  background:rgba(162,59,63,.08);
  border:1px solid rgba(162,59,63,.35);
  border-radius:99px;
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.02em;
  color:var(--pole);
}
.urgency__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--pole);
  flex:none;
  animation:urgency-pulse 1.8s ease-in-out infinite;
}
@keyframes urgency-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
.urgency--center{ margin:1.4rem auto 0; }

.cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

.trust{
  list-style:none; margin:2.1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.05em; color:var(--ink-3);
}
.trust b{ color:var(--ink); font-weight:500; }

/* ---------- the phone ---------- */

.hero__screen{ display:flex; justify-content:center; }

.phone{
  position:relative;
  width:min(100%,286px);
  aspect-ratio:9/17;
  overflow:hidden;
  background:#150B12;
  border:2px solid var(--chrome);
  border-radius:30px;
  padding:9px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.7);
}
.phone__notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:62px; height:5px; border-radius:99px;
  background:#2C1B24;
}
.phone__scr{
  position:relative;
  height:100%;
  border-radius:22px;
  overflow:hidden;
  background:
    linear-gradient(160deg,#3A2233 0%,#241521 60%,#180F14 100%);
  display:grid; place-items:center;
}
.phone__scr iframe{ width:100%; height:100%; border:0; }

.phone__hud{
  position:absolute; left:19px; right:19px; bottom:22px;
  display:flex; flex-direction:column; gap:.3rem;
  font-family:var(--mono); font-size:.68rem;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
  pointer-events:none;
}
.hud__at{ letter-spacing:.06em; }
.hud__cap{ color:rgba(255,255,255,.62); line-height:1.35; }

/* video slots */
.slot{
  text-align:center; padding:1.25rem;
  color:rgba(255,255,255,.75);
}
.slot__play{
  width:52px; height:52px; margin:0 auto .85rem;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:50%;
  color:#fff; cursor:pointer;
}
.slot__play svg{ width:26px; height:26px; margin-left:2px; }
.slot__lbl{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bulb); margin:0 0 .3rem;
}
.slot__sub{
  margin:0; font-size:.88rem; line-height:1.4;
  color:rgba(255,255,255,.6);
}

/* ---------- stat strip ---------- */

.strip{
  background:var(--paper);
  color:var(--ink);
  border-block:1px solid var(--chrome);
}
.strip__in{ padding-block:1.35rem; }
.strip dl{
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.strip dl > div{
  text-align:center;
  border-left:1px solid var(--chrome);
}
.strip dl > div:first-child{ border-left:0; }
.strip dt{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--vinyl);
}
.strip dd{
  margin:.2rem 0 0;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.15rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

/* ---------- proof / receipt ---------- */

.proof{ background:var(--talc); }

.proof__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}

.receipt{
  --zig:15px;
  position:relative;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:.82rem;
  line-height:1.5;
  padding:1.6rem 1.5rem calc(1.5rem + var(--zig));
  transform:rotate(-.7deg);
  border:1px solid var(--chrome);
  box-shadow:var(--shadow-sm);
  /* torn thermal edge along the bottom */
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / var(--zig) 100% repeat-x;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / var(--zig) 100% repeat-x;
}

.receipt__hd{ text-align:center; padding-bottom:.9rem; }
.receipt__shop{
  margin:0; font-weight:500;
  letter-spacing:.13em; font-size:.78rem;
}
.receipt__meta{
  margin:.3rem 0 0; font-size:.66rem;
  letter-spacing:.09em; color:var(--ink-3);
}
.receipt__ttl{
  margin:0 0 .7rem; padding:.5rem 0;
  border-block:1px dashed var(--ink-3);
  text-align:center;
  font-size:.7rem; letter-spacing:.2em;
}

.receipt__tbl{
  width:100%; border-collapse:collapse;
  font-size:.78rem;
}
.receipt__tbl th,.receipt__tbl td{
  padding:.36rem 0; text-align:right;
  font-weight:400;
}
.receipt__tbl thead th{
  font-size:.62rem; letter-spacing:.11em;
  color:var(--ink-3);
  border-bottom:1px dashed var(--chrome);
  padding-bottom:.45rem;
}
.receipt__tbl th[scope="row"]{
  text-align:left; letter-spacing:.05em;
  font-size:.7rem; color:var(--ink-2);
}
.receipt__tbl tfoot th,
.receipt__tbl tfoot td{
  border-top:1px dashed var(--ink-3);
  padding-top:.6rem;
  font-weight:500;
  font-size:.88rem;
}

.receipt__delta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:1rem 0 0; padding-top:.75rem;
  border-top:2px solid var(--ink);
}
.receipt__delta span{ font-size:.68rem; letter-spacing:.2em; }
.receipt__delta b{
  font-family:var(--disp); font-weight:800;
  font-size:2rem; line-height:1;
  color:var(--vinyl);
}

.receipt__note{
  margin:1.1rem 0 0;
  font-size:.64rem; line-height:1.5;
  letter-spacing:.03em;
  color:var(--ink-3);
}

.proof__side{ padding-top:.4rem; }

.film{
  aspect-ratio:16/10;
  background:linear-gradient(160deg,#3A2233,#1C1016);
  border:1px solid var(--ink-2);
  border-radius:3px;
  display:grid; place-items:center;
  overflow:hidden;
}
.film iframe{ width:100%; height:100%; border:0; }
.slot--wide{ max-width:34ch; }

.pull{
  margin:1.9rem 0;
  padding-left:1.15rem;
  border-left:3px solid var(--bulb);
}
.pull p{
  margin:0;
  font-size:clamp(1.16rem,1rem + .7vw,1.5rem);
  line-height:1.35;
  font-style:italic;
  color:var(--ink);
}
.pull cite{
  display:block; margin-top:.6rem;
  font-family:var(--mono); font-style:normal;
  font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

.proof__body{ margin:0; color:var(--ink-2); }

/* ---------- interactive calculator ---------- */

.calc{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px dashed var(--chrome);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"intro receipt" "cta receipt";
  gap:1.5rem clamp(2rem,4vw,3.5rem);
}
.calc__intro{ grid-area:intro; }
.calc .receipt--live{ grid-area:receipt; align-self:start; }
.calc__cta{ grid-area:cta; align-self:start; margin-top:.25rem; }

.calc__intro .kicker{ margin-bottom:.6rem; }
.calc__intro h3{
  font-size:clamp(1.4rem,1.1rem + 1.3vw,1.9rem);
  margin-bottom:.85rem;
}
.calc__sub{
  margin:0 0 1.4rem;
  font-size:.92em;
  color:var(--ink-2);
  max-width:36ch;
}

.calc__label{
  display:block;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.6rem;
}
.calc__field{
  display:flex; align-items:center; gap:.3rem;
  margin-top:.5rem;
  background:var(--paper);
  border:1.5px solid var(--chrome);
  border-radius:2px;
  padding:.55rem .9rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.calc__field:focus-within{
  border-color:var(--vinyl);
  box-shadow:0 0 0 3px rgba(122,34,73,.15);
}
.calc__field span{
  font-family:var(--disp); font-weight:700; font-size:1.3rem;
  color:var(--ink-3);
}
.calc__field input{
  width:100%; border:0; background:none; outline:none;
  font-family:var(--disp); font-weight:700; font-size:1.3rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* the range mirrors the number input so the tool works for someone who
   would rather drag than type; it stays hidden from tab order (the
   number input already covers keyboard entry) but is visible and usable
   for pointer/touch. */
.calc__slider{
  width:100%; margin-top:1.1rem;
  -webkit-appearance:none; appearance:none;
  height:4px; border-radius:99px;
  background:var(--chrome);
  outline:none;
}
.calc__slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--vinyl);
  border:3px solid var(--paper);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .15s var(--ease);
}
.calc__slider::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.calc__slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--vinyl);
  border:3px solid var(--paper);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

.receipt--live{ transform:rotate(.6deg); }
.receipt--live .receipt__meta{ color:var(--vinyl); }

/* the loss line reads as a warning, not an achievement, so it borrows
   the pole-red rather than the vinyl-green used for the change figure
   in the static case-study receipt above */
.receipt__delta--loss{ border-top-color:var(--pole); }
.receipt__delta--loss b{ color:var(--pole); }

/* a brief flash on the figures when the reader changes their number,
   so the update reads as a direct response to their input rather than
   a silent recalculation. Scoped so it fires only where JS toggles
   .is-live, not on any generic element. */
.receipt--live td.is-live,
.receipt--live b.is-live{ animation:calc-pulse .5s var(--ease); }
@keyframes calc-pulse{
  0%{ color:var(--bulb); }
  100%{ color:inherit; }
}

/* ---------- student wins ---------- */

.wins{ background:var(--paper); }

.wins__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.wins__card{
  margin:0;
  overflow:hidden;
  border:1px solid var(--chrome);
  border-radius:4px;
  background:var(--talc);
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.wins__card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.wins__card img{ width:100%; height:auto; display:block; }

@media (max-width:720px){
  .wins__grid{ grid-template-columns:1fr; }
}

/* ---------- video testimonial ---------- */

.vid{ background:var(--talc); overflow:hidden; }
.vid__grid{
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
/* grid/flex items default to a content-based min size, so the video's
   native 720x1280 pixels was forcing this column (and the phone inside
   it) past its intended width on wide screens. min-width/height:0 down
   the chain lets the explicit sizes below actually take effect. */
.vid__grid > *{ min-width:0; min-height:0; }
/* z-index:0 (not just position:relative) pins this as a permanent
   stacking context — otherwise it only behaves like one while the
   .reveal fade-in's transform is mid-transition, and the z-index:-1
   art behind it jumps to a much higher ancestor and vanishes the
   moment the transition ends and transform resolves to none. */
.vid__copy{ position:relative; z-index:0; padding:1.5rem 0; }
/* a painterly, dreamy bloom behind the copy so the column doesn't read
   as empty next to the tall phone mock — brand-toned, not a photo. */
.vid__art{
  position:absolute;
  top:-16%; left:-12%;
  width:118%; height:132%;
  z-index:-1;
  pointer-events:none;
  overflow:visible;
}
.vid__dream{
  margin:1.1rem 0 0;
  max-width:34ch;
  font-family:var(--body);
  font-style:italic;
  font-size:clamp(1.2rem,1rem + .9vw,1.5rem);
  line-height:1.35;
  color:var(--vinyl);
}
.vid__copy .sub{ margin:.9rem 0 0; max-width:44ch; color:var(--ink-2); }
.vid__screen{ display:flex; justify-content:center; min-width:0; min-height:0; }
.vid__screen .phone{ min-width:0; min-height:0; }
.vid__screen .phone__scr{ min-width:0; min-height:0; }
.vid__player{
  /* absolutely positioned so the video's native 720x1280 pixels can
     never inflate the size of .phone__scr/.phone/.vid__screen — the
     min-width/height:0 chain above was still letting it happen in some
     browsers, this removes it from flow entirely. */
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:22px;
  background:#150B12;
}

/* ---------- value ---------- */

.value{ background:var(--paper); }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--chrome);
  border:1px solid var(--chrome);
}
.step{
  position:relative;
  background:var(--paper);
  padding:1.6rem 1.35rem 1.8rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  z-index:1;
}
.step:active{ transform:translateY(-1px); }
/* the clipper guard number: barbers already count in guards. It answers
   the hover the way a real guard would catch the light. */
.guard{
  display:grid; place-items:center;
  width:34px; height:34px;
  margin-bottom:1rem;
  background:var(--chrome);
  color:var(--ink);
  font-family:var(--disp); font-weight:800; font-size:1.15rem;
  border-radius:3px 3px 8px 8px;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.step:hover .guard{
  background:var(--vinyl);
  color:#fff;
  transform:scale(1.12) rotate(-4deg);
}
.step:active .guard{ transform:scale(.95) rotate(0deg); }
.step h3{ font-size:1.32rem; margin-bottom:.6rem; }
.step p{ margin:0; font-size:.96em; color:var(--ink-2); }

.fit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
}
.fit__col{ padding:1.75rem 1.6rem; border-radius:3px; }
.fit__col h3{ font-size:1.5rem; margin-bottom:1rem; }
.fit__col ul{ margin:0; padding:0; list-style:none; }
.fit__col li{
  position:relative;
  padding:.5rem 0 .5rem 1.6rem;
  border-top:1px solid rgba(0,0,0,.09);
  font-size:.98em;
}
.fit__col li::before{
  position:absolute; left:0; top:.5rem;
  font-family:var(--mono); font-size:.9rem;
}
.fit__col--yes{ background:var(--paper); color:var(--ink); border:1.5px solid var(--vinyl); }
.fit__col--yes h3{ color:var(--vinyl); }
.fit__col--yes li{ border-top-color:var(--chrome); }
.fit__col--yes li::before{ content:"+"; color:var(--vinyl); }
.fit__col--no{ background:var(--talc); color:var(--ink-2); }
.fit__col--no h3{ color:var(--ink); }
.fit__col--no li::before{ content:"\2013"; color:var(--pole); }

/* ---------- statement ---------- */

/* A single line pulled out of the bio and given the whole section, so
   it lands as a beat between the process and the man behind it. Reuses
   the hero's italic-blush treatment for the twist word rather than
   inventing a new device, so the two moments read as one voice. */
.statement{
  background:var(--ink);
  color:var(--talc);
  text-align:center;
  padding-block:clamp(3.5rem,8vw,6rem);
}
.statement__text{
  margin:0 auto;
  max-width:16ch;
  font-family:var(--disp);
  font-weight:800;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.005em;
  font-size:clamp(2.1rem,1rem + 4.6vw,4.1rem);
}
.statement__text em{
  color:var(--vinyl-hi);
  font-style:italic;
}

/* ---------- who ---------- */

.who{ background:var(--talc); }
.who__grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.plate__img{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--chrome);
  border:1px solid var(--ink-3);
}
.plate__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 32%;
}
.plate__cap{
  margin:.75rem 0 0;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.09em; color:var(--ink-3);
}
.who__copy h2{
  font-size:clamp(1.95rem,1.2rem + 2.9vw,3.4rem);
  margin-bottom:1.2rem;
}
.who__copy p{ margin:0 0 1.1rem; max-width:52ch; color:var(--ink-2); }

.before{
  display:flex; gap:1rem; align-items:center;
  max-width:52ch;
  margin:0 0 1.4rem;
  padding:.8rem;
  background:var(--paper);
  border:1px solid var(--chrome);
  border-radius:4px;
}
.before img{
  width:72px; flex:none;
  aspect-ratio:9/19.5;
  object-fit:cover;
  border-radius:3px;
  border:1px solid var(--chrome);
}
.before figcaption{ font-size:.86em; color:var(--ink-2); }
.before b{ color:var(--ink); }
.who__addr{
  font-family:var(--mono); font-size:.78rem;
  line-height:1.7; letter-spacing:.04em;
  color:var(--ink) !important;
  padding-top:1rem;
  border-top:1px solid var(--chrome);
}

/* ---------- socials ---------- */

.chan{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.chan a,.chan__soon > span{
  display:flex; flex-direction:column; gap:.9rem;
  height:100%;
  padding:1.4rem 1.3rem;
  background:var(--talc);
  border:1px solid var(--chrome);
  border-radius:3px;
  text-decoration:none;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);
}
.chan a:hover{
  transform:translateY(-3px);
  background:var(--ink);
  border-color:var(--ink);
  color:var(--talc);
  box-shadow:var(--shadow);
}
.chan a:active{ transform:translateY(-1px) scale(.98); }
.chan__ico{ width:26px; height:26px; color:var(--vinyl); }
.chan a:hover .chan__ico{ color:var(--vinyl-hi); }
.chan__ico svg{ width:100%; height:100%; }
.chan__txt{ display:flex; flex-direction:column; margin-top:auto; }
.chan__txt b{
  font-family:var(--disp); font-weight:700;
  font-size:1.3rem; text-transform:uppercase; letter-spacing:.03em;
}
.chan__txt em{
  font-family:var(--mono); font-style:normal;
  font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-3); margin-top:.15rem;
}
.chan a:hover .chan__txt em{ color:#A6919C; }
.chan__n{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--vinyl);
}
.chan a:hover .chan__n{ color:var(--bulb); }
.chan__soon > span{
  border-style:dashed;
  color:var(--ink-3);
  cursor:default;
}
.chan__soon .chan__ico,.chan__soon .chan__n{ color:var(--bulb); }

/* ---------- questions ---------- */

.qa{ background:var(--talc); }
.qa .sechead{ max-width:38ch; }

.qa__list{
  border-top:1px solid var(--chrome);
  max-width:74ch;
}
.qa details{ border-bottom:1px solid var(--chrome); }
.qa summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary h3{
  display:inline;
  font-size:clamp(1.18rem,1rem + .6vw,1.5rem);
  text-transform:none;
  letter-spacing:0;
  line-height:1.25;
}
.qa summary::after{
  content:"+";
  position:absolute; right:.25rem; top:1rem;
  font-family:var(--mono); font-size:1.3rem;
  color:var(--vinyl);
  transition:transform .22s var(--ease);
}
.qa details[open] summary::after{ content:"\2013"; }
.qa summary:hover h3{ color:var(--vinyl); }

.qa__body{ padding:0 2.5rem 1.5rem 0; }
.qa__body p{ margin:0 0 .8rem; color:var(--ink-2); }
.qa__body p:last-child{ margin-bottom:0; }
/* the sentence an answer engine is most likely to quote */
.answer{
  color:var(--ink) !important;
  font-size:1.06em;
  border-left:2px solid var(--bulb);
  padding-left:.9rem;
}

/* ---------- book ---------- */

.book{
  background:var(--ink);
  color:var(--talc);
}
.book .kicker{ color:var(--bulb); }
.book .sechead .sub{ color:#C9B7BF; }
.book .urgency{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
  color:#F2B4B8;
}
.book .urgency__dot{ background:#F2B4B8; }

.book__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.75rem,4vw,3rem);
  align-items:start;
}

.lead{
  background:#2E1E27;
  border:1px solid #4A2F3B;
  border-radius:3px;
  padding:clamp(1.5rem,3vw,2.1rem);
}
.lead__row{ margin-bottom:1rem; }
.lead__two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.lead label{
  display:block;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#B8A0AC; margin-bottom:.4rem;
}
.lead__row label span{ color:#7D5D6C; letter-spacing:.08em; }
.lead input,.lead select,.lead textarea{
  width:100%;
  background:#22151C;
  border:1px solid #4A2F3B;
  border-radius:2px;
  color:var(--talc);
  font-family:var(--body); font-size:1rem;
  padding:.72rem .8rem;
}
.lead textarea{ resize:vertical; line-height:1.5; }
.lead input::placeholder,.lead textarea::placeholder{ color:#6E4F5C; }
.lead input:focus,.lead select:focus,.lead textarea:focus{
  border-color:var(--vinyl-hi);
  outline:none;
  box-shadow:0 0 0 2px rgba(227,175,199,.22);
}
.lead input[aria-invalid="true"],
.lead select[aria-invalid="true"]{ border-color:var(--pole); }

/* two classes on purpose. ".lead label" is 0,1,1 and would otherwise win,
   which turned the consent line into tiny uppercase mono. */
.lead .lead__ok{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:.35rem 0 1.35rem;
  text-transform:none; letter-spacing:0;
  font-family:var(--body); font-size:.94rem;
  color:#C9B7BF; line-height:1.5;
}
.lead .lead__ok input{ width:auto; margin-top:.3rem; flex:none; accent-color:var(--vinyl); }

.lead__msg{
  margin:.9rem 0 0;
  font-family:var(--mono); font-size:.76rem;
  line-height:1.5; color:var(--vinyl-hi);
  min-height:1.2em;
}
.lead__msg.is-bad{ color:#EFA79C; }

.now{
  background:#2E1E27;
  border:1px solid #4A2F3B;
  border-radius:3px;
  padding:clamp(1.5rem,3vw,2.1rem);
}
.now__kick{
  margin:0 0 .5rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bulb);
}
.now h3{ font-size:1.85rem; margin-bottom:.8rem; }
.now p{ color:#C9B7BF; font-size:.98em; margin:0 0 1.25rem; }

.embed{
  aspect-ratio:4/3;
  display:grid; place-content:center; text-align:center;
  gap:.35rem;
  background:#22151C;
  border:1.5px dashed #4A2F3B;
  border-radius:2px;
  margin-bottom:1.25rem;
  padding:1rem;
}
.embed__lbl{
  margin:0 !important;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bulb) !important;
}
.embed__sub{ margin:0 !important; font-size:.85rem; }

.book .btn--ghost{ color:var(--talc); }
.book .btn--ghost:hover{ background:var(--talc); color:var(--ink); border-color:var(--talc); }

.now__fine{
  margin:1.1rem 0 0 !important;
  font-family:var(--mono); font-size:.72rem;
  line-height:1.6; letter-spacing:.03em;
  color:#A6919C !important;
}

/* ---------- footer ---------- */

.foot{
  background:#1A1116;
  color:#A6919C;
  padding-block:2.75rem 2rem;
  font-size:.92rem;
}
.foot__in{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:1.75rem 2rem;
  align-items:start;
}
.foot__brand .mark__pole{ background:#1A1116; border-color:#5A3F4A; margin-bottom:.8rem; }
.foot__brand p{ margin:0; }
.foot__brand b{
  font-family:var(--disp); font-weight:800;
  font-size:1.1rem; letter-spacing:.06em; color:var(--talc);
}
.foot__addr{
  margin-top:.5rem !important;
  font-family:var(--mono); font-size:.72rem;
  line-height:1.6; letter-spacing:.03em;
}
.foot__nav,.foot__soc{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav a,.foot__soc a{
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none;
}
.foot__nav a:hover,.foot__soc a:hover{ color:var(--bulb); }
.foot__fine{
  grid-column:1/-1;
  margin:1rem 0 0; padding-top:1.5rem;
  border-top:1px solid #2F1E27;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em;
}

/* ---------- reveals ---------- */

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
.reveal[data-delay="4"]{ transition-delay:.28s; }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__in{ justify-content:space-between; }
  .btn--sm{ margin-left:auto; }

  .hero__grid{ grid-template-columns:1fr; }
  /* width:100% is required. margin-inline:auto would switch off the
     grid item's default stretch, and the phone is sized from its
     parent, so it would otherwise measure narrower than intended. */
  .hero__screen{ width:100%; }
  .phone{ width:min(100%,252px); }

  .proof__grid,
  .who__grid,
  .vid__grid,
  .book__grid{ grid-template-columns:1fr; }

  .vid__screen{ width:100%; }

  .receipt{ max-width:420px; }

  .calc{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "receipt" "cta";
  }

  .steps{ grid-template-columns:1fr 1fr; }
  .chan{ grid-template-columns:1fr 1fr; }
  .foot__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:620px){
  .strip dl{ grid-template-columns:1fr 1fr; gap:1.1rem 0; }
  .strip dl > div:nth-child(3){ border-left:0; }

  .steps{ grid-template-columns:1fr; }
  .fit{ grid-template-columns:1fr; }
  .lead__two{ grid-template-columns:1fr; }
  .chan{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }

  .receipt{ transform:none; }
  .qa summary,.qa__body{ padding-right:2rem; }

  /* stacked buttons of different widths read as ragged, so match them */
  .cta{ flex-direction:column; align-items:stretch; }
  .cta .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.btn:active,.chan a:hover,.chan a:active{ transform:none; }
  .step:hover,.step:active,.step:hover .guard,.step:active .guard{ transform:none; }
  *{ animation:none !important; }
}