/* ============================================================
   CITY GIRLS ACADEMY — theme
   Six tokens. Black and white only, by the owner's art direction.
   Reference: Landingfolio "Wycoff" structure, Glossier feel.
   Spacing ladder: 4 8 12 16 24 32 48 64 96 128 160 192 — nothing off it.
   ============================================================ */

:root{
  /* the six tokens */
  --ink:#0B0B0B;
  --surface:#FBFAF9;
  --card:#F2F0ED;
  --accent:#0B0B0B;
  --muted:#6B6866;
  --line:rgba(11,11,11,.14);
  /* on dark */
  --on-dark:#FBFAF9;
  --muted-dark:rgba(251,250,249,.68);
  --line-dark:rgba(251,250,249,.18);

  /* type — five sizes, no sixth */
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --t-display:clamp(33px,8.4vw,72px);
  --t-h2:clamp(30px,4.4vw,52px);
  --t-lead:clamp(19px,1.6vw,22px);
  --t-body:18px;
  --t-micro:12px;

  /* depth — layered, max 8% alpha, vertical offset only */
  --sh-1:0 1px 2px rgba(11,11,11,.05),0 4px 10px -4px rgba(11,11,11,.06);
  --sh-2:0 1px 2px rgba(11,11,11,.06),0 6px 14px -6px rgba(11,11,11,.07),
         0 18px 40px -20px rgba(11,11,11,.08);
  --sh-btn:0 1px 2px rgba(11,11,11,.07),0 4px 8px -2px rgba(11,11,11,.07),
           0 14px 28px -12px rgba(11,11,11,.08);

  --r-s:8px; --r-m:16px; --r-p:999px;
  --pad:128px;               /* desktop section padding */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--surface)}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:720px;margin:0 auto}
section{padding:var(--pad) 0}
.grid>*{min-width:0}

/* ---------- type ---------- */
h1,h2,h3,.disp{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-stretch:112%;margin:0;text-wrap:balance;
}
h1{font-size:var(--t-display);line-height:.92;letter-spacing:-.035em}
h2{font-size:var(--t-h2);line-height:1.0;letter-spacing:-.03em}
h3{font-size:var(--t-lead);line-height:1.12;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--muted);max-width:62ch}
.body-col{max-width:62ch}
.eyebrow{
  font-family:var(--body);font-size:var(--t-micro);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
  margin:0 0 24px;display:block;
}
.on-ink .eyebrow,.hero .eyebrow,.imgband .eyebrow{color:var(--muted-dark)}
.micro{font-size:var(--t-micro);letter-spacing:.02em;color:var(--muted);line-height:1.5}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- header (desktop only — the standard drops it on mobile) ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,249,.88);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:32px;height:96px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{height:28px;width:auto}
.brand b{font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.05;font-stretch:108%}
header nav{display:flex;align-items:center;gap:4px}
header nav a{
  font-size:13px;font-weight:500;text-decoration:none;color:var(--muted);
  padding:12px;border-radius:var(--r-s);transition:color .12s ease-out;
}
header nav a:hover{color:var(--ink)}
header nav a.navcta{
  color:var(--surface);background:var(--ink);padding:12px 16px;
  border-radius:var(--r-p);font-weight:600;
}
header nav a.navcta:hover{color:var(--surface);filter:brightness(1.7)}
@media(max-width:860px){ header{display:none} }

/* ---------- buttons — lifted, shined, reactive (catch-page spec) ---------- */
.btn-wrap{position:relative;display:inline-block;max-width:100%}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--body);font-size:17px;font-weight:600;line-height:1.15;
  text-decoration:none;text-align:left;
  color:var(--surface);
  background:linear-gradient(180deg,#232323 0%,var(--ink) 62%);
  border:0;border-bottom:3px solid #000;border-radius:var(--r-p);
  padding:19px 32px;min-height:56px;cursor:pointer;
  box-shadow:var(--sh-btn),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .13s ease-out,box-shadow .13s ease-out,filter .13s ease-out;
}
.btn .lab{display:flex;flex-direction:column;gap:2px}
.btn .lab small{font-size:12.5px;font-weight:400;opacity:.72;letter-spacing:.01em}
.btn svg{flex:0 0 auto;transition:transform .13s ease-out}
.btn:hover{transform:translateY(-2px);filter:brightness(1.35);
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.26)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px);border-bottom-width:2px;
  box-shadow:0 1px 2px rgba(11,11,11,.08),inset 0 1px 0 rgba(255,255,255,.16)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.btn.ghost{
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  border-bottom-width:1.5px;box-shadow:none;
}
.btn.ghost:hover{background:var(--ink);color:var(--surface);filter:none;
  box-shadow:var(--sh-1)}
.btn.on-ink{background:linear-gradient(180deg,#fff 0%,#EDEBE8 100%);
  color:var(--ink);border-bottom-color:#C9C5C0;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 24px -12px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.9)}
.btn.on-ink:hover{filter:brightness(1.03)}
.btn.ghost.on-ink{background:transparent;color:var(--on-dark);
  border:1.5px solid var(--line-dark);box-shadow:none}
.btn.ghost.on-ink:hover{background:var(--on-dark);color:var(--ink)}
.btn.wide{width:100%}

/* the pointer — exact house spec, 40px, hanging off the corner */
.tap-finger{position:absolute;bottom:-14px;right:-24px;font-size:40px;
  animation:tapMe 1.3s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes tapMe{
  0%,100%{transform:translateY(8px) rotate(-12deg)}
  50%    {transform:translateY(-14px) rotate(-12deg)}
}
/* the drawn circle — stroked once on entry, never looped */
.btn-ring{position:absolute;inset:-16px -22px;pointer-events:none;overflow:visible}
.btn-ring ellipse{fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linecap:round;opacity:.5}
.on-ink .btn-ring ellipse,.hero .btn-ring ellipse{stroke:var(--on-dark)}
.risk{font-size:13.5px;color:var(--muted);margin:16px 0 0}
.on-ink .risk{color:var(--muted-dark)}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;isolation:isolate;padding:0;
  background:var(--ink);min-height:88svh}
.hero-bg{grid-area:1/1;position:relative;overflow:hidden}
.hero-bg::before{content:"";display:block;width:100%;height:88svh}
.hero-bg img,.hero-bg video{
  position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;
  object-position:68% 42%;
}
.hero-bg .kb,.ed-media .kb{animation:kenburns 42s ease-in-out infinite alternate;
  will-change:transform}
/* The mobile re-crop. Hidden above 760px, where the video plays instead. */
.hero-m{display:none}
@media(max-width:760px){
  /* Both layers stack in the same square. The still sits underneath as the
     fallback: it shows if the clip is still arriving, if the browser refuses
     to autoplay, or under reduced motion — so the hero is never empty. */
  .hero-bg .hero-m{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:0}
  .hero-bg .hero-v{display:block;z-index:1}
}
@keyframes kenburns{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to  {transform:scale(1.17) translate3d(-2.2%,-1.4%,0)}
}
/* two scrims — one vertical to carry the band below, one horizontal for copy */
.scrim-v,.scrim-h{position:absolute;inset:0;pointer-events:none}
.scrim-v{background:linear-gradient(180deg,
  rgba(11,11,11,.42) 0%,rgba(11,11,11,.18) 34%,rgba(11,11,11,.55) 100%),
  linear-gradient(rgba(11,11,11,.22),rgba(11,11,11,.22))}
/* Measured, not eyeballed: with the old 3-stop ramp the lead measured 3.75:1
   at the right edge of its column over the bright studio wall. The strong
   region now holds past the copy column, then clears off so the subject on the
   other side stays bright. */
.scrim-h{background:linear-gradient(90deg,
  rgba(11,11,11,.86) 0%,rgba(11,11,11,.80) 34%,rgba(11,11,11,.62) 57%,
  rgba(11,11,11,.10) 70%,rgba(11,11,11,0) 82%)}
.hero-copy{grid-area:1/1;position:relative;z-index:2;align-self:center;
  color:var(--on-dark);padding:96px 0}
/* the small black drop shadow on everything sitting over the photograph */
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,.hero-copy .fine{
  text-shadow:0 0 1px rgba(0,0,0,.70),0 1px 2px rgba(0,0,0,.66),0 2px 12px rgba(0,0,0,.45)}
.hero-copy .wrap{display:block}
/* The copy column is capped in px, not ch, so it cannot grow past the part of
   the scrim that is measured to carry it. */
.hero-copy h1{color:var(--on-dark);max-width:min(640px,100%)}
/* .eyebrow is display:block, so without this its box ran the full column and
   sat over the bright side of the frame — 1.75:1 when measured. */
.hero-copy .eyebrow{max-width:min(640px,100%)}
.hero-copy .lead{color:var(--muted-dark);margin-top:24px;max-width:min(560px,100%)}
.hero-cta{margin-top:48px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}

/* ---------- dark band directly under the hero ---------- */
.on-ink{background:var(--ink);color:var(--on-dark)}
.on-ink h2,.on-ink h3{color:var(--on-dark)}
.on-ink .lead,.on-ink .micro{color:var(--muted-dark)}
.on-ink .rule{background:var(--line-dark)}
.band{padding:64px 0}
.band .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.band .stats div{padding:32px 24px;border-right:1px solid var(--line-dark)}
.band .stats div:last-child{border-right:0}
.band .stats b{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,3.6vw,44px);line-height:1;letter-spacing:-.03em;
  font-stretch:112%}
.band .stats span{display:block;margin-top:12px;font-size:13px;
  color:var(--muted-dark);line-height:1.45}
@media(max-width:760px){
  .band .stats{grid-template-columns:repeat(2,1fr)}
  .band .stats div{border-bottom:1px solid var(--line-dark)}
  .band .stats div:nth-child(2n){border-right:0}
  .band .stats div:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- editorial alternating blocks (Wycoff) ---------- */
.ed{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.ed.flip .ed-media{order:2}
.ed-media{position:relative;overflow:hidden;background:var(--card)}
.ed-media img,.ed-media video{width:100%;aspect-ratio:4/3;object-fit:cover}
.ed-media .num{
  position:absolute;top:24px;left:24px;z-index:2;font-family:var(--disp);
  font-weight:800;font-size:13px;letter-spacing:.14em;color:#fff;
  text-shadow:0 1px 12px rgba(11,11,11,.6);
}
.ed-copy h2{margin-bottom:24px}
.ed-copy .lead{margin-bottom:32px}
@media(max-width:900px){
  .ed{grid-template-columns:1fr;gap:32px}
  .ed.flip .ed-media{order:0}
}

/* ---------- cards / lists ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:32px}
.on-ink .card{background:rgba(251,250,249,.05);border-color:var(--line-dark)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}
.on-ink .card p{color:var(--muted-dark)}
@media(max-width:900px){.cards,.cards.two{grid-template-columns:1fr}}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start;
  font-size:16.5px;line-height:1.55}
.ticks li::before{
  content:"";width:20px;height:20px;margin-top:4px;border-radius:50%;
  background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.on-ink .ticks li::before{background:var(--on-dark)}

/* numbered steps */
.steps{display:grid;gap:0;border-top:1px solid var(--line)}
.on-ink .steps{border-color:var(--line-dark)}
.step{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:32px 0;
  border-bottom:1px solid var(--line);align-items:start}
.on-ink .step{border-color:var(--line-dark)}
.step .k{font-family:var(--disp);font-weight:800;font-size:13px;
  letter-spacing:.14em;color:var(--muted);padding-top:4px}
.on-ink .step .k{color:var(--muted-dark)}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);font-size:16.5px;max-width:62ch}
.on-ink .step p{color:var(--muted-dark)}
@media(max-width:640px){.step{grid-template-columns:1fr;gap:12px}}

/* ---------- the scorecard (proof object) ---------- */
.score{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:48px;box-shadow:var(--sh-1)}
.score .q{padding:24px 0;border-bottom:1px solid var(--line)}
.score .q:first-of-type{padding-top:0}
.score .q label{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;font-weight:600;font-size:16.5px;margin-bottom:16px}
.score .q label i{font-style:normal;font-family:var(--disp);font-weight:800;
  font-size:13px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.score input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--line);border-radius:2px;outline:none;margin:12px 0;
}
.score input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--ink);cursor:grab;box-shadow:var(--sh-btn);border:3px solid var(--card);
}
.score input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:var(--ink);cursor:grab;
  box-shadow:var(--sh-btn);border:3px solid var(--card);
}
.score input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.score .ends{display:flex;justify-content:space-between;font-size:12px;
  color:var(--muted);letter-spacing:.02em}
.score-out{
  margin-top:32px;padding-top:32px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
}
.dial{width:132px;height:132px;position:relative;flex:0 0 auto}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:9;stroke-linecap:round}
.dial .track{stroke:var(--line)}
.dial .val{stroke:var(--ink);transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1)}
.dial b{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:36px;letter-spacing:-.03em}
.score-out h3{margin-bottom:8px}
.score-out p{color:var(--muted);font-size:16px;margin:0}
@media(max-width:640px){
  .score{padding:24px}
  .score-out{grid-template-columns:1fr;gap:24px;justify-items:start}
}

/* ---------- email capture ---------- */
.capture{display:grid;gap:16px;max-width:520px}
.capture .row{display:flex;gap:12px;flex-wrap:wrap}
.capture input[type=email],.capture input[type=text]{
  flex:1 1 220px;min-width:0;font-family:var(--body);font-size:16.5px;
  padding:18px 20px;min-height:56px;border:1.5px solid var(--line);
  border-radius:var(--r-p);background:var(--surface);color:var(--ink);
}
.on-ink .capture input{background:rgba(251,250,249,.06);
  border-color:var(--line-dark);color:var(--on-dark)}
.on-ink .capture input::placeholder{color:var(--muted-dark)}
.capture input:focus{outline:none;border-color:var(--ink)}
.on-ink .capture input:focus{border-color:var(--on-dark)}
.capture .ok,.capture .err{font-size:15px;margin:0}
.capture .ok{font-weight:600}
.capture .err{color:var(--ink);font-weight:600}
.on-ink .capture .err{color:var(--on-dark)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-m);padding:32px;
  box-shadow:var(--sh-1)}
.tier.feature{background:var(--ink);color:var(--on-dark);border-color:var(--ink);
  box-shadow:var(--sh-2)}
.tier.feature h3,.tier.feature .price{color:var(--on-dark)}
.tier.feature .ticks li::before{background:var(--on-dark)}
.tier.feature .tier-note{color:var(--muted-dark)}
.tier .kicker{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--muted);margin-bottom:24px}
.tier.feature .kicker{color:var(--muted-dark)}
.price{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4vw,46px);
  line-height:1;letter-spacing:-.03em;margin:0 0 8px;font-stretch:112%}
.price sub{font-family:var(--body);font-size:14px;font-weight:500;
  letter-spacing:0;bottom:0;color:var(--muted)}
.tier.feature .price sub{color:var(--muted-dark)}
.tier-note{font-size:14px;color:var(--muted);margin:0 0 32px}
.tier .ticks{margin-bottom:32px;flex:1 1 auto}
.tier .ticks li{font-size:15.5px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}

/* ---------- moving image band further down the page ---------- */
.imgband{position:relative;isolation:isolate;background:var(--ink);
  display:grid;padding:0}
.imgband .imgband-bg{grid-area:1/1;position:relative;overflow:hidden}
.imgband .imgband-bg::before{content:"";display:block;width:100%;
  aspect-ratio:21/9;min-height:440px}
.imgband img{position:absolute;inset:0;width:100%;height:100%!important;
  object-fit:cover;animation:kenburns 46s ease-in-out infinite alternate;
  will-change:transform}
.imgband .scrim-v{background:linear-gradient(180deg,
  rgba(11,11,11,.56) 0%,rgba(11,11,11,.74) 46%,rgba(11,11,11,.86) 100%)}
.imgband .inner{grid-area:1/1;position:relative;z-index:2;align-self:center;
  color:var(--on-dark);padding:96px 0;text-align:center}
.imgband h2{color:var(--on-dark);margin:0 auto 24px;max-width:18ch}
.imgband .lead{margin:0 auto;color:var(--muted-dark)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 0;font-weight:600;
  font-size:17.5px;display:flex;justify-content:space-between;gap:24px;
  align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;flex:0 0 auto;
  background:var(--ink);transition:transform .15s ease-out;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--muted);max-width:62ch}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--muted-dark);padding:96px 0 48px;
  font-size:15px}
footer h3{color:var(--on-dark);font-size:13px;letter-spacing:.16em;
  margin-bottom:16px}
footer a{color:var(--muted-dark);text-decoration:none}
footer a:hover{color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot-mark{font-family:var(--disp);font-weight:800;font-size:20px;
  letter-spacing:-.01em;color:var(--on-dark);line-height:1.05;
  text-transform:uppercase;font-stretch:112%;margin-bottom:16px}
.foot-legal{padding-top:32px;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;font-size:13px;line-height:1.6}
.foot-legal p{max-width:74ch;margin:0}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* ---------- preview ribbon + awaiting-input brackets ---------- */
.ribbon{background:var(--ink);color:var(--on-dark);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;
  padding:12px 16px;font-weight:600}
.ribbon b{border-bottom:2px solid var(--on-dark)}
.tbd{border-bottom:2px dotted currentColor;opacity:.75;font-style:italic}

/* ---------- the private jet flyby (every 3 clicks) ---------- */
.jet{position:fixed;left:-30vw;bottom:14vh;width:min(320px,42vw);z-index:70;
  pointer-events:none;opacity:0}
.jet svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 24px rgba(11,11,11,.18))}
.jet.fly{animation:flyby 3.6s cubic-bezier(.42,0,.58,1) 1}
@keyframes flyby{
  0%  {opacity:0;transform:translate3d(0,40px,0) rotate(-3deg)}
  8%  {opacity:1}
  92% {opacity:1}
  100%{opacity:0;transform:translate3d(160vw,-90px,0) rotate(-3deg)}
}
.jet .trail{opacity:.16}

/* ---------- the recurring book-a-call prompt (every 90s) ---------- */
.callbar{
  position:fixed;left:24px;right:24px;bottom:24px;z-index:80;margin:0 auto;
  max-width:480px;background:var(--ink);color:var(--on-dark);
  border-radius:var(--r-m);padding:24px 24px 24px 24px;
  box-shadow:0 2px 4px rgba(11,11,11,.1),0 12px 28px -8px rgba(11,11,11,.18),
             0 32px 64px -32px rgba(11,11,11,.24);
  transform:translateY(140%);opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .34s ease-out;
}
.callbar.show{transform:translateY(0);opacity:1;pointer-events:auto}
.callbar p{margin:0 0 16px;font-size:16px;padding-right:32px;line-height:1.45}
.callbar .btn{font-size:15.5px;padding:15px 24px;min-height:48px}
.callbar-x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;
  background:transparent;color:var(--muted-dark);font-size:22px;line-height:1;
  cursor:pointer;border-radius:50%;
}
.callbar-x:hover{color:var(--on-dark)}

/* ---------- scroll reveals — one per section, fires once ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .38s ease-out,transform .38s ease-out}
.rv.in{opacity:1;transform:none}

/* ---------- mobile ---------- */
@media(max-width:760px){
  :root{--pad:64px}
  body{font-size:17px}
  .wrap{padding:0 24px}
  .hero{min-height:auto}
  .hero-bg::before{height:auto;aspect-ratio:4/5}
  .hero-bg img,.hero-bg video{object-position:50% 30%}
  /* On a phone the copy block fills the hero from 8% to 92% — there is no
     clear top to protect, so both washes stay heavy the whole way down.
     Measured against the brightest pixel in the frame, not eyeballed:
     the old pair put the headline at 2.8:1 and the lead at 2.5:1. */
  .scrim-h{background:linear-gradient(180deg,
    rgba(11,11,11,.42) 0%,rgba(11,11,11,.62) 8%,rgba(11,11,11,.66) 60%,
    rgba(11,11,11,.74) 100%)}
  .scrim-v{background:linear-gradient(180deg,
    rgba(11,11,11,.20) 0%,rgba(11,11,11,.34) 10%,rgba(11,11,11,.40) 70%,
    rgba(11,11,11,.52) 100%)}
  .hero-copy{align-self:end;padding:48px 0 48px}
  .hero-copy h1{max-width:none}
  .hero-cta{margin-top:32px;gap:16px;flex-direction:column;align-items:stretch}
  .hero-cta .btn-wrap{width:100%}
  .hero-cta .btn{width:100%}
  .imgband .imgband-bg::before{aspect-ratio:3/4;min-height:0}
  .imgband .inner{padding:48px 0}
  .ed{gap:24px}
  .btn{font-size:16px;padding:18px 24px}
  .callbar{left:16px;right:16px;bottom:16px}
  .jet{width:58vw;bottom:10vh}
}

/* ---------- reduced motion — everything freezes ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .jet{display:none}
  .dial .val{transition:none}
}

/* ============================================================
   Added after the first review (owner feedback)
   ============================================================ */

/* ---------- the real wordmark, replacing the type-set brand ---------- */
.brand img{height:26px;width:auto;display:block}
header .brand img{height:52px}
@media(max-width:1080px){ header .brand img{height:42px} }
.foot-mark img{height:44px;width:auto;display:block;margin-bottom:16px}
.hero-bg .hero-m{display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.hero-bg .hero-v{z-index:1}
.hero-mark{width:min(190px,44vw);height:auto;margin:0 0 24px;display:none}
/* On a phone the header is dropped entirely (standard §1c), so the hero
   carries the client bar instead — slot 1 is never simply missing. */
@media(max-width:860px){ .hero-mark{display:block} }

/* ---------- the photoreal jet ---------- */
.jet img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 28px rgba(11,11,11,.16))}

/* ---------- the feature tier is an ink surface, so treat it as one ----
   Before this, the drawn ring and the risk line under the button were
   inheriting the light-ground colours and vanishing into the black card. */
.tier.feature .btn-ring ellipse{stroke:var(--on-dark)}
.tier.feature .risk,.tier.feature .micro{color:var(--muted-dark)}
.tier.feature a:not(.btn){color:var(--on-dark)}

/* A ghost button never sits on a ground it cannot be seen against: the
   plain variant is for light grounds, .on-ink for dark. Belt and braces —
   give the dark-ground variant a real border rather than a 18% hairline. */
.btn.ghost.on-ink{border-color:rgba(251,250,249,.55)}
.btn.ghost.on-ink:hover{border-color:var(--on-dark)}

/* ---------- the join modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(11,11,11,.62);
  backdrop-filter:blur(3px);animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 48px);
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border-radius:var(--r-m);padding:48px;
  box-shadow:0 2px 4px rgba(11,11,11,.10),0 16px 40px -12px rgba(11,11,11,.20),
             0 48px 96px -48px rgba(11,11,11,.28);
  animation:rise .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise{from{opacity:0;transform:translate(-50%,-46%)}
                to{opacity:1;transform:translate(-50%,-50%)}}
.modal-card h3{font-size:clamp(24px,4vw,32px);line-height:1.02;
  letter-spacing:-.02em;margin-bottom:16px}
.modal-card .price{margin-bottom:8px}
.modal-card .ticks{margin:32px 0}
.modal-card .ticks li{font-size:16px}
.modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;
  background:transparent;color:var(--muted);font-size:26px;line-height:1;
  cursor:pointer;border-radius:50%}
.modal-x:hover{color:var(--ink);background:var(--card)}
.modal-note{font-size:13.5px;color:var(--muted);margin:16px 0 0}
.modal-alt{font-size:14px;color:var(--muted);margin:24px 0 0;
  padding-top:24px;border-top:1px solid var(--line)}
@media(max-width:640px){
  .modal-card{padding:32px 24px;width:calc(100vw - 24px);
    top:auto;bottom:0;transform:translate(-50%,0);border-radius:16px 16px 0 0;
    max-height:calc(100svh - 32px);animation:sheet .26s cubic-bezier(.2,.8,.2,1)}
  @keyframes sheet{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
}

/* ---------- the founder block ---------- */
.founder{display:grid;grid-template-columns:5fr 6fr;gap:96px;align-items:center}
.founder-media{position:relative;overflow:hidden;background:var(--card)}
.founder-media img,.founder-media video{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder blockquote{margin:0 0 24px;font-family:var(--disp);font-weight:700;
  text-transform:none;font-stretch:105%;
  font-size:clamp(22px,2.4vw,28px);line-height:1.18;letter-spacing:-.02em}
.founder cite{font-style:normal;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:24px}
.on-ink .founder cite{color:var(--muted-dark)}
@media(max-width:900px){
  .founder{grid-template-columns:1fr;gap:32px}
  .founder-media img,.founder-media video{aspect-ratio:4/3}
}

/* ---------- mobile polish ---------- */
@media(max-width:760px){
  .wrap{padding:0 20px}
  h2{font-size:clamp(28px,7.4vw,34px)}
  .lead{font-size:17.5px}
  .score{padding:24px 20px}
  .score .q label{font-size:15.5px;gap:12px}
  .dial{width:104px;height:104px}
  .dial b{font-size:30px}
  .tier{padding:24px}
  .modal-card .ticks li,.ticks li{font-size:16px}
  .band{padding:48px 0}
  .band .stats div{padding:24px 16px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .capture .row{flex-direction:column}
  .capture input[type=email],.capture input[type=text]{flex:1 1 auto;width:100%}
  .btn .lab small{font-size:12px}
  /* a 40px pointer overhangs a full-width button off-screen on a phone */
  .tap-finger{right:-8px;bottom:-18px;font-size:34px}
  .btn-ring{inset:-12px -10px}
  .hero-mark{width:min(160px,46vw)}
  .ed-media img,.ed-media video{aspect-ratio:3/2}
}
@media(max-width:400px){
  .wrap{padding:0 16px}
  .btn{padding:16px 20px;font-size:15.5px}
}

/* ============================================================
   Navigation — second review
   ============================================================ */

/* Desktop links: caps, tracked (untracked caps is a tell), and they
   highlight on hover with a rule that draws in rather than a colour change,
   because there is no second colour on this site to change to. */
header nav a{
  font-family:var(--body);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  padding:10px 2px;margin:0 12px;border-radius:0;position:relative;
  transition:color .13s ease-out;
}
header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .16s ease-out;
}
header nav a:hover,header nav a:focus-visible{color:var(--ink)}
header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)}
header nav a[aria-current="page"]{color:var(--ink)}
header nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--line)}
header nav a.navlogin{margin-left:24px}
header nav a.navcta{
  color:var(--surface);background:var(--ink);padding:13px 20px;margin-left:16px;
  border-radius:var(--r-p);letter-spacing:.12em;
  box-shadow:var(--sh-btn),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .13s ease-out,filter .13s ease-out;
}
header nav a.navcta::after{display:none}
header nav a.navcta:hover{color:var(--surface);filter:brightness(1.9);
  transform:translateY(-1px)}

/* ---------- the phone menu ---------- */
.burger{
  display:none;width:48px;height:48px;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;position:relative;flex:0 0 auto;
}
.burger span{
  position:absolute;left:12px;width:24px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .22s ease-out,opacity .14s ease-out;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  /* The header comes back on phones — but only as a bar, a mark and a menu.
     The standard drops a header full of navigation eating the first 60px;
     a 56px bar with the mark and one button is not that. */
  header{display:block;
    /* backdrop-filter establishes a containing block for fixed-position
       descendants, which collapsed the fixed menu panel to the height of the
       bar. The bar is opaque on a phone anyway, so drop the filter. */
    backdrop-filter:none;background:var(--surface)}
  header .wrap{height:60px;gap:16px}
  header .brand img{height:34px}
  .burger{display:block;margin-right:-12px}
  header nav{
    position:fixed;top:60px;left:0;right:0;bottom:0;z-index:55;display:block;
    background:var(--ink);padding:24px 24px 48px;overflow-y:auto;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease-out,transform .2s ease-out;
  }
  header nav.open{transform:none;opacity:1;pointer-events:auto}
  header nav a{
    display:block;color:var(--muted-dark);font-size:15px;letter-spacing:.16em;
    padding:20px 0;margin:0;border-bottom:1px solid var(--line-dark);
    min-height:56px;
  }
  header nav a::after{display:none}
  header nav a:hover,header nav a:active{color:var(--on-dark)}
  header nav a[aria-current="page"]{color:var(--on-dark)}
  header nav a.navlogin{margin:24px 0 0;border-bottom:0;color:var(--on-dark)}
  header nav a.navcta{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin:16px 0 0;padding:19px 24px;min-height:56px;border-bottom:0;
    background:linear-gradient(180deg,#fff 0%,#EDEBE8 100%);color:var(--ink);
    font-size:14px;letter-spacing:.1em;
  }
  header nav a.navcta:hover{color:var(--ink);filter:brightness(1.03)}
  /* the hero mark is redundant once the bar carries one */
  .hero-mark{display:none}
  body.nav-open{overflow:hidden}
}

/* ============================================================
   Third review — image masks, the demo ribbon, the login page,
   and drawing the eye to the scorecard on a phone.
   ============================================================ */

/* ---------- the demo ribbon reads as a demo ---------- */
:root{--demo:#00E06A}
.ribbon{background:var(--ink);color:var(--demo);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.ribbon::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--demo);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(0,224,106,.20);animation:demopulse 2.4s ease-in-out infinite}
@keyframes demopulse{0%,100%{box-shadow:0 0 0 3px rgba(0,224,106,.16)}
                     50%{box-shadow:0 0 0 7px rgba(0,224,106,.06)}}
.ribbon b{color:var(--demo);border-bottom-color:var(--demo)}
.ribbon .short{display:none}
@media(max-width:600px){
  .ribbon{padding:10px 16px;font-size:11px;letter-spacing:.1em}
  .ribbon .long{display:none}
  .ribbon .short{display:inline}
}

/* ---------- heroes: mask the photo into the ground, don't drown it ----
   Technique lifted from cyrusigono.com: the image container carries a
   gradient mask so the photo dissolves into the ink where the copy sits,
   instead of a heavy scrim darkening the subject as well. The subject
   stays at full brightness and the copy sits on near-solid ink. */
/* ---------- the desktop hero is a split, not an overlay ----------------
   These photographs are bright white studios, so white type laid over them
   needs so much ink that the picture stops being visible — masking the left
   half was the same problem wearing a different hat. So the copy gets its own
   ink panel and the photograph gets its own, whole and unshaded. */
.hero-bg img,.hero-bg video{filter:grayscale(1) contrast(1.06)}
/* nothing sits on the photograph any more, so there is nothing to scrim */
.scrim-h,.scrim-v{display:none}

/* This block is DESKTOP ONLY and has to stay inside the query. Shipping it
   unconditionally locked the hero to a fixed height on phones, which pushed
   the copy out of the hero and printed it on top of the band underneath. */
@media(min-width:761px){
  .hero{grid-template-columns:1fr 1fr;align-items:stretch;
    height:min(84svh,760px);min-height:0}
  .hero-bg{grid-area:auto;order:2}
  .hero-bg::before{height:100%}
  .hero-copy{grid-area:auto;order:1;display:flex;align-items:center;
    padding:48px 0;overflow:hidden}
  /* sized for a half-width column — the full-bleed 56-72px figure wraps the
     headline to four lines in here */
  .hero-copy h1{font-size:clamp(33px,4vw,60px)}
  .hero-copy .lead{font-size:18px;max-width:46ch}
  .hero-copy .wrap{max-width:none;margin:0;width:100%;
    padding:0 56px 0 max(32px,calc((100vw - 1180px) / 2 + 32px))}
}

/* ---------- the login page ---------- */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 44px)}
.login-form{display:flex;align-items:center;padding:64px 48px}
.login-inner{width:100%;max-width:420px;margin:0 auto}
.login h1{font-size:clamp(34px,4.4vw,48px);line-height:.98;letter-spacing:-.03em}
.field{display:block;margin-bottom:24px}
.field span{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;font-family:var(--body);font-size:16.5px;padding:18px 20px;
  min-height:56px;border:1.5px solid var(--line);border-radius:var(--r-p);
  background:var(--surface);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:32px;font-size:14.5px;flex-wrap:wrap}
.field-row a{color:var(--muted);text-underline-offset:3px}
.field-row a:hover{color:var(--ink)}
.check{display:flex;align-items:center;gap:10px;color:var(--muted);cursor:pointer;
  min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--ink);cursor:pointer}
.login-art{position:relative;overflow:hidden;background:var(--ink)}
.login-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 30%;filter:grayscale(1) contrast(1.06);
  animation:kenburns 46s ease-in-out infinite alternate}
.login-scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(11,11,11,.30) 0%,rgba(11,11,11,.20) 40%,rgba(11,11,11,.88) 100%)}
.login-quote{position:absolute;left:0;right:0;bottom:0;padding:48px;
  color:var(--on-dark)}
.login-quote img{position:static;width:200px;height:auto;margin-bottom:24px;
  animation:none;filter:none}
.login-quote p{font-family:var(--disp);font-weight:700;font-stretch:105%;
  font-size:clamp(19px,1.8vw,23px);line-height:1.24;letter-spacing:-.02em;
  max-width:22ch;margin:0}
@media(max-width:900px){
  .login{grid-template-columns:1fr;min-height:0}
  .login-art{order:-1;min-height:38svh}
  .login-quote{padding:24px}
  .login-quote img{width:150px;margin-bottom:12px}
  .login-form{padding:48px 24px}
}

/* ---------- the scorecard has to be the loudest thing on a phone ---------- */
.score-lead{display:none}
@keyframes nudge{
  0%,64%,100%{transform:translateX(0)}
  72%{transform:translateX(-7px)}
  80%{transform:translateX(7px)}
  88%{transform:translateX(0)}
}
.score.nudge input[type=range]::-webkit-slider-thumb{animation:nudge 2.6s ease-in-out 3}
.score.nudge input[type=range]::-moz-range-thumb{animation:nudge 2.6s ease-in-out 3}

@media(max-width:760px){
  /* the photo dissolves downward instead of being darkened, and the copy
     sits on the ink below it — measured, this beats the scrim by ~4x */
  /* The photo is solid where she is and gone by the time the copy starts, so
     the copy sits on the hero's own ink rather than on a darkened photograph.
     Measured, this beats the scrim by roughly 4x. */
  /* On a phone the hero STOPS overlaying. The photograph gets its own block at
     the crop's true 3:4, so the whole picture is visible — masking a portrait
     behind the copy was cutting her off at the chest. The copy then sits below
     it on the hero's own ink, which is also the cleanest contrast we can get. */
  .hero{display:block;min-height:0;background:var(--ink)}
  .hero-bg{
    position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
  }
  /* Square-ish and capped, so the picture reads head-to-hip — a whole person,
     not a floating head — while still leaving the CTA above the fold on a
     667px-tall phone. Measured both ways rather than picked. */
  .hero-bg::before{content:"";display:block;width:100%;height:auto;aspect-ratio:1/1}
  .hero-bg{max-height:46svh}
  .hero-bg img,.hero-bg video{
    position:absolute;inset:0;width:100%;height:100%!important;
    object-fit:cover;object-position:50% 14%;
  }
  /* the square clip is already cropped to this framing, so it is not offset */
  .hero-bg video{object-position:50% 50%}
  /* nothing sits on the photo any more, so the scrims come off entirely */
  .scrim-h,.scrim-v{display:none}
  /* The button comes before the paragraph on a phone: the standard wants the
     CTA above the fold, and the lead reads perfectly well underneath it. */
  .hero-copy{padding:16px 0 48px;align-self:auto}
  .hero-copy .wrap{display:flex;flex-direction:column}
  .hero-copy .eyebrow{order:1;margin-bottom:12px}
  .hero-copy h1{order:2}
  .hero-cta{order:3;margin-top:24px}
  .hero-copy .lead{order:4;margin-top:24px}
  .hero-copy h1,.hero-copy .lead,.hero-copy .eyebrow{max-width:none}

  /* the scorecard: inverted, framed and announced, so it reads as the thing
     to do rather than another block of copy */
  #score{padding-top:48px}
  #score .score{background:var(--ink);border-color:var(--ink);
    box-shadow:0 2px 4px rgba(11,11,11,.10),0 18px 44px -16px rgba(11,11,11,.24);
    border-radius:20px;padding:28px 20px 24px}
  #score .score .q{border-bottom-color:var(--line-dark)}
  #score .score .q label{color:var(--on-dark)}
  #score .score .q label i,#score .score .ends{color:var(--muted-dark)}
  #score .score input[type=range]{background:rgba(251,250,249,.24)}
  #score .score input[type=range]::-webkit-slider-thumb{
    background:var(--on-dark);border-color:var(--ink);width:32px;height:32px}
  #score .score input[type=range]::-moz-range-thumb{
    background:var(--on-dark);border-color:var(--ink);width:32px;height:32px}
  #score .score-out{border-top-color:var(--line-dark)}
  #score .score-out .eyebrow{color:var(--muted-dark)}
  #score .score-out h3{color:var(--on-dark)}
  #score .score-out p{color:var(--muted-dark)}
  #score .dial .track{stroke:rgba(251,250,249,.22)}
  #score .dial .val{stroke:var(--on-dark)}
  #score .dial b{color:var(--on-dark)}
  #score .score .btn{background:linear-gradient(180deg,#fff 0%,#EDEBE8 100%);
    color:var(--ink);border-bottom-color:#C9C5C0;width:100%}
  .score-lead{display:block;font-size:13px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink);margin:0 0 16px;
    display:flex;align-items:center;justify-content:center;gap:10px}
  .score-lead::before,.score-lead::after{content:"";height:1px;flex:1 1 auto;
    background:var(--line)}
}

/* ---------- the "not connected yet" toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
  z-index:110;max-width:min(420px,calc(100vw - 32px));
  background:var(--ink);color:var(--on-dark);font-size:15px;font-weight:500;
  padding:16px 24px;border-radius:var(--r-p);text-align:center;
  box-shadow:0 2px 4px rgba(11,11,11,.10),0 14px 32px -10px rgba(11,11,11,.22);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out;
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- photographs arrive rather than pop ---------- */
.fadeup{opacity:0;transform:translateY(14px) scale(.995);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.fadeup.shown{opacity:1;transform:none}
.hero-bg.fadeup{transform:none;transition:opacity .8s ease-out}
@media(prefers-reduced-motion:reduce){
  .fadeup{opacity:1;transform:none}
}

/* ---------- Log in is visible at rest in the phone bar ---------- */
.bar-login{display:none}
@media(max-width:860px){
  .bar-login{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--body);font-size:11.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
    color:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-p);
    padding:0 16px;height:40px;flex:0 0 auto;margin-left:auto;
  }
  .bar-login:hover,.bar-login:active{border-color:var(--ink)}
  header .wrap{gap:12px}
  .burger{margin-left:4px;margin-right:-12px}
  /* the menu already carries its own Log in row; two is one too many */
  header nav a.navlogin{display:none}
}
@media(max-width:400px){
  .bar-login{padding:0 12px;font-size:11px;letter-spacing:.1em}
  header .brand img{height:30px}
}

/* ============================================================
   PURPLE — the one color (Cyrus, 2026-09-24: "use purple as a highlight
   color or an accent to everything"). The ads put one woman in purple in a
   black-and-white frame; the site does the same with the thing she should
   press: the button, the mark on a headline, the answer she picked, how far
   along she is. Everything else stays black and white.
   ============================================================ */
:root{
  --violet:#6D28D9;        /* fills behind white type; type on the light ground (6.8:1) */
  --violet-hi:#7C3AED;     /* the lit top of a button */
  --violet-deep:#4C1D95;   /* a button's bottom edge */
  --violet-bright:#C4B5FD; /* type and marks on ink (10.7:1) */
  --violet-mid:#A78BFA;    /* bars and rules on ink (7.2:1) */
  --violet-wash:#F3EEFF;   /* a picked row, a tinted panel */
}
::selection{background:var(--violet);color:#fff}
.btn,.btn.on-ink{color:#fff;background:linear-gradient(180deg,var(--violet-hi) 0%,var(--violet) 64%);
  border-bottom-color:var(--violet-deep)}
.btn.on-ink{box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 24px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.24)}
.btn:hover,.btn.on-ink:hover{filter:brightness(1.1)}
.btn:focus-visible{outline-color:var(--violet)}
.btn.ghost:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.ghost.on-ink:hover{background:var(--violet);border-color:var(--violet);color:#fff}
header nav a.navcta{background:var(--violet)}
.btn-ring ellipse{stroke:var(--violet)}
.on-ink .btn-ring ellipse,.hero .btn-ring ellipse{stroke:var(--violet-bright)}
/* the highlighter on the words that matter in a headline */
.mark-v{background:linear-gradient(180deg,transparent 60%,rgba(124,58,237,.9) 60%,rgba(124,58,237,.9) 90%,transparent 90%);
  padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ============================================================
   2026-09-25, Cyrus's review ("you can't read the text where it says
   'the women who are chosen are not luckier, they're clearer'").
   ============================================================ */

/* ---------- photo bands: the copy sits on the photograph, so it gets a
   scrim again. `.scrim-h,.scrim-v{display:none}` above was written for the
   split hero and switched these off too; measured afterwards, the Triple
   Threat band's headline was 1.0:1 on the bright stone behind it. House
   rule (photo-hero-legibility): a centred wash under the copy, a flat veil
   over the whole frame, and the small black drop shadow on every line. */
.imgband .scrim-v{display:block;background:
  radial-gradient(ellipse 58% 62% at 50% 50%,rgba(11,11,11,.5) 0%,rgba(11,11,11,.34) 62%,rgba(11,11,11,0) 100%),
  linear-gradient(rgba(11,11,11,.58),rgba(11,11,11,.58))}
.imgband .eyebrow,.imgband h2,.imgband .lead{
  text-shadow:0 0 1px rgba(0,0,0,.70),0 1px 2px rgba(0,0,0,.66),0 2px 12px rgba(0,0,0,.45)}
.imgband .eyebrow{color:rgba(251,250,249,.86)}
.imgband .lead{color:rgba(251,250,249,.92)}
@media(max-width:760px){
  /* on a phone the copy covers most of the frame, so the veil is flat and heavy */
  .imgband .scrim-v{background:linear-gradient(rgba(11,11,11,.74),rgba(11,11,11,.74))}
}

/* ---------- the labels on the editorial photographs ("The result",
   "01 — Looks") were white type on white studios, 1.0-1.3:1. They become
   an ink caption tag, which reads on any frame. */
.ed-media .num{top:16px;left:16px;padding:8px 12px;line-height:1;
  background:rgba(11,11,11,.9);color:var(--on-dark);text-shadow:none}

/* ---------- the email form's button: a grid item stretches by default, so the
   drawn ring spanned the whole form and the pointer floated off at the far
   edge, away from the button (the "design is off" on the homepage's
   first-week-free block, now removed, and on the three tracks). The wrapper
   now hugs the button, so the ring and the pointer sit on it. */
.capture>.btn-wrap{justify-self:start}

/* ---------- the free course, offered on The Triple Threat ---------- */
.fc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:48px;text-align:center;box-shadow:var(--sh-1)}
.fc .eyebrow{margin-bottom:16px}
.fc h3{font-size:clamp(24px,3vw,32px);line-height:1.04;letter-spacing:-.02em;
  margin:0 auto 16px;max-width:22ch}
.fc p{color:var(--muted);max-width:56ch;margin:0 auto 32px}
.fc .micro{margin:16px auto 0}
@media(max-width:760px){ .fc{padding:32px 20px} }

/* ---------- "Talk to someone" in the header, wherever there is room ---------- */
header nav a.navtalk{color:var(--ink);margin-left:24px}
header nav a.navtalk+a.navlogin{margin-left:12px}
@media(min-width:861px) and (max-width:1239px){ header nav a.navtalk{display:none} }
@media(max-width:860px){
  header nav a.navtalk{margin:0;color:var(--on-dark)}
  /* the phone menu's Join pill turned purple but kept its ink label: 2.8:1. White reads 7:1 on it. */
  header nav a.navcta,header nav a.navcta:hover{color:#fff}
}