/* ============================================================
   Design tokens — measured from the reference site
   ============================================================ */
:root{
  /* Warm near-black rather than neutral black. This single change does more
     for "premium" than the accent hue does — neutral #0a0a0a reads as a
     software product, a brown-biased black reads as an editorial brand. */
  --bg:            #14100e;
  --bg-card:       #1b1613;
  --bg-elev:       #221b17;
  --bg-elev-2:     #2b231e;
  --border:        rgba(245,241,236,.10);
  --border-strong: rgba(245,241,236,.18);

  --text:          #f7f3ee;
  --muted:         #b7aca2;
  --muted-2:       #7d7167;

  /* Accent = ember red. Passion of red without the alarm of pure red. */
  --accent:        #cf3f2a;          /* fills: buttons, monogram, dots     */
  --accent-text:   #f0755d;          /* accent words on dark: 6.7:1        */
  --accent-ink:    #ffffff;          /* text/icon colour on top of accent  */
  --accent-arrow:  rgba(255,255,255,.20);
  --accent-soft:   rgba(207,63,42,.20);
  --accent-glow:   rgba(207,63,42,.38);

  /* Sage = the "positive outcome" colour. Calms the red down and keeps the
     page from reading as one long warning. */
  --success:       #a8c0a0;
  --success-soft:  rgba(168,192,160,.16);
  --warn:          #cf6a52;   /* the "without" side, sparingly */


  /* Two fonts: Newsreader for headlines, Inter for everything else */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --container: 1128px;
  --gutter: 24px;
  --section-y: clamp(80px, 9vw, 150px);
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }  /* hidden must win over display:grid/flex */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(36px, 4.4vw, 64px); line-height:1.05; }
h2{ font-size:clamp(30px, 3.4vw, 48px); line-height:1.15; }
h3{ font-size:clamp(21px, 1.7vw, 26px); line-height:1.3; font-weight:400; }
h1 em, h2 em{ font-style:italic; color:var(--accent-text); }

p{ margin:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

/* ============================================================
   Layout primitives
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container.narrow{ max-width:720px; }

.section{ padding-block:var(--section-y); scroll-margin-top:100px; }
.hero{ scroll-margin-top:100px; }

.sec-head{ display:flex; flex-direction:column; gap:14px; max-width:640px; margin-bottom:40px; }
.sec-head.center{ align-items:center; text-align:center; margin-inline:auto; }
.sec-head .body-lg{ margin-top:4px; }

.center{ text-align:center; }
.center .btn{ margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--muted);
  width:max-content;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}

.body-lg{ font-size:18px; color:var(--muted); line-height:1.6; }
.section-note{
  margin-top:32px; max-width:640px;
  font-size:18px; color:var(--muted); line-height:1.6;
}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}

.ph{ /* image / media placeholder */
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 100% at 20% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(160deg, #241d19, #14100e);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.ph::after{
  content:attr(data-ph);
  position:absolute; inset:auto 0 0 0; padding:10px 12px;
  font-family:var(--font-ui); font-size:11px; letter-spacing:.04em;
  color:var(--muted-2); text-transform:uppercase;
}
.ph img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-ui); font-size:15px; font-weight:600;
  padding:12px 12px 12px 20px;
  border-radius:16px;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.btn-primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 10px 30px -12px var(--accent-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px var(--accent-glow); }
.btn-primary:active{ transform:translateY(0); }

.btn-sm{ font-size:14px; padding:9px 9px 9px 16px; border-radius:13px; }
.btn-block{ width:100%; justify-content:center; padding:16px 20px; border-radius:14px; }

.btn-arrow{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:9px;
  background:var(--accent-arrow);
}
.btn-block .btn-arrow{ background:var(--accent-arrow); }
.btn-arrow svg{ width:16px; height:16px; }
.btn-sm .btn-arrow{ width:24px; height:24px; border-radius:8px; }


.link-arrow{ font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--accent-text); }

/* ============================================================
   Nav
   ============================================================ */
.nav-wrap{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:16px var(--gutter);
  display:flex; justify-content:center;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  width:100%; max-width:var(--container);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 10px 10px 16px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.scrolled{
  background:rgba(20,16,14,.75);
  border-color:var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.nav-brand{ display:inline-flex; align-items:center; gap:10px; }
.nav-mark{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink);
}
.nav-mark svg{ width:17px; height:17px; }
.nav-name{ font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; }

.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{ font-family:var(--font-ui); font-size:14px; font-weight:500; color:var(--muted); transition:color .18s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-links .nav-cta{ color:var(--accent-ink); }

.nav-toggle{ display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); place-items:center; }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle span + span{ margin-top:4px; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(2.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(120px, 14vw, 170px) 0 clamp(48px, 6vw, 72px);
  overflow:hidden;
}
.hero-glow{
  position:absolute; top:-260px; left:50%; translate:-50% 0;
  width:min(1100px, 120vw); height:620px;
  background:radial-gradient(50% 50% at 50% 50%, var(--accent-glow), transparent 70%);
  filter:blur(30px); opacity:.5; pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:rgba(255,255,255,.03);
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--muted);
}
.avatars{ display:inline-flex; }
.avatar{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--bg); margin-right:-10px;
  background:linear-gradient(135deg,#4a3f37,#1d1714);
}
img.avatar{ display:block; object-fit:cover; }
.avatars .avatar:last-child{ margin-right:2px; }

.hero .lead{ font-size:18px; line-height:1.6; color:var(--muted); max-width:520px; }

.trust{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.stars{ color:#00b67a; font-size:17px; letter-spacing:2px; }
.trust-text{ font-family:var(--font-ui); font-size:13px; color:var(--muted); }
.trust-text strong{ color:var(--text); font-weight:600; }

.hero-media{ position:relative; }
.hero-photo{ aspect-ratio:633/800; border-radius:var(--radius-lg); }
.stat-row{
  position:absolute; left:0; bottom:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top-right-radius:var(--radius);
  border-bottom-left-radius:var(--radius-lg);
  overflow:hidden;
  z-index:3;
}
.stat{
  padding:20px 22px;
  background:rgba(20,16,14,.74);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-right:1px solid var(--border);
}
.stat:last-child{ border-right:0; }
.stat-num{ font-family:var(--font-ui); font-size:24px; font-weight:500; line-height:1.2; }
.stat-label{ font-family:var(--font-ui); font-size:13px; color:var(--muted); line-height:1.3; margin-top:6px; }

/* ============================================================
   Problem section + chat mockup
   ============================================================ */
.pain-card{ max-width:524px; display:flex; flex-direction:column; gap:14px; }
.pain-card p{ font-size:17px; line-height:1.55; color:#e9e2da; }
.pain-card em{ color:var(--text); font-style:italic; }

/* ============================================================
   Solution / inline CTA
   ============================================================ */
.cta-inline{
  margin-top:40px;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:28px; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(245,241,236,.02), transparent);
}
.cta-inline p{ color:var(--muted); font-size:17px; }
.cta-inline .btn{ margin-top:6px; }

/* ============================================================
   Solution: copy beside the infield video
   ============================================================ */
.solution-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px; align-items:center;
}
.solution-copy .body-lg{ font-size:17px; }
.solution-grid .video{ margin:0; border-radius:var(--radius-lg); }

/* ============================================================
   Testimonials
   ============================================================ */
.tgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:stretch; }
.tcard{ display:flex; flex-direction:column; gap:20px; padding:26px; }
.tquote{ font-size:16px; line-height:1.6; color:#e9e2da; flex:1; }
.tfoot{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--border); }
.tfoot .case-avatar{ width:40px; height:40px; flex:none; }
.tfoot .case-role{ line-height:1.35; }

@media (max-width:1000px){
  .solution-grid{ grid-template-columns:1fr; gap:28px; }
  .tgrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .tgrid{ grid-template-columns:1fr; }
}

/* ============================================================
   Feature sections
   ============================================================ */
.feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch;
}
.feature-photo{ aspect-ratio:4/5; border-radius:var(--radius-lg); }

.case{ display:flex; flex-direction:column; gap:14px; padding:28px; height:100%; }
.case h3{ font-family:var(--font-display); }
.case p{ font-size:16px; line-height:1.6; color:var(--muted); }
.case-foot{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--border); }
.case-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#584b41,#221b17); }
.case-name{ font-family:var(--font-ui); font-size:15px; font-weight:600; }
.case-role{ font-family:var(--font-ui); font-size:13px; color:var(--muted-2); }

.video{ aspect-ratio:16/9; display:grid; place-items:center; gap:14px; padding:24px; border-radius:var(--radius-lg); }
.video-play{
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 12px 40px -12px var(--accent-glow);
  transition:transform .18s ease;
}
.video-play:hover{ transform:scale(1.06); }
.video-play svg{ width:26px; height:26px; margin-left:2px; }
.video-note{ max-width:340px; text-align:center; font-family:var(--font-ui); font-size:12px; line-height:1.5; color:var(--muted-2); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; }

/* ============================================================
   What we offer
   ============================================================ */
.offers{ display:flex; flex-direction:column; gap:32px; }

.offer{
  position:relative; overflow:hidden;
  padding:clamp(24px, 3.4vw, 48px);
  border-radius:var(--radius-lg);
}
.offer-watermark{
  position:absolute; top:-.28em; right:.04em;
  font-family:var(--font-display); font-size:clamp(160px, 20vw, 300px);
  font-weight:400; line-height:1; letter-spacing:-.05em;
  color:var(--text); opacity:.035; pointer-events:none; user-select:none;
}
.offer-top{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px, 3vw, 48px); align-items:start;
}
.offer-photo{ aspect-ratio:4/5; border-radius:var(--radius); }
/* less copy beside it, so it shouldn't tower over the column */
.offer-photo.short{ aspect-ratio:4/3; }

.offer-copy{ display:flex; flex-direction:column; gap:18px; }
.offer-label{ display:flex; align-items:center; gap:16px; }
.offer-num{
  flex:none; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--success-soft); color:var(--success);
  font-family:var(--font-ui); font-size:17px; font-weight:600;
}
.offer-kicker{
  font-family:var(--font-ui); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.offer-copy h3{ font-size:clamp(26px, 2.8vw, 40px); line-height:1.1; }
.offer-lead{ font-size:19px; line-height:1.5; color:var(--success); }
.offer-copy p{ font-size:16px; line-height:1.65; color:var(--muted); }
.offer-copy strong{ color:var(--text); font-weight:600; }

.offer-body{ position:relative; margin-top:clamp(28px, 3.5vw, 48px); }
.offer-subhead{
  text-align:center; margin-bottom:24px;
  font-family:var(--font-ui); font-size:15px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text);
}
.offer-list{ display:flex; flex-direction:column; gap:18px; max-width:820px; margin-inline:auto; }
.offer-list li{ position:relative; padding-left:34px; font-size:16px; line-height:1.65; color:var(--muted); }
.offer-list li::before{
  content:"✓"; position:absolute; left:4px; top:0;
  color:var(--success); font-family:var(--font-ui); font-size:15px; font-weight:700;
}
.offer-list b{ color:var(--text); font-weight:600; }
.offer-expect{ max-width:820px; margin:0 auto; text-align:center; font-size:16px; line-height:1.65; color:var(--muted); }
.offer-expect strong{ color:var(--text); font-weight:600; }
.offer-cta{ display:flex; justify-content:center; margin-top:32px; }

/* ---- Bootcamp schedule ---- */
.schedule{
  margin-top:32px; padding:clamp(20px, 2.6vw, 36px);
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.schedule-head{ text-align:center; margin-bottom:28px; }
.schedule-head h3{ font-size:clamp(24px, 2.4vw, 34px); }
.schedule-head p{ margin-top:8px; font-family:var(--font-ui); font-size:14px; color:var(--muted); }

.schedule-rows{ display:flex; flex-direction:column; gap:12px; }
.srow{
  display:grid; grid-template-columns:1.1fr 1.2fr 1.3fr 1.1fr auto;
  gap:20px; align-items:center;
  padding:20px 24px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .18s ease, transform .18s ease;
}
.srow:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.scell{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.scell-label{
  font-family:var(--font-ui); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.scell-value{ font-family:var(--font-ui); font-size:16px; font-weight:500; color:var(--text); }
.scell-value.place{ font-size:18px; font-weight:600; letter-spacing:.01em; text-transform:uppercase; }
.scell-value.date{ font-family:var(--font-display); font-size:19px; letter-spacing:-.01em; }
/* dates run across two years, so each one carries its own */
.scell-year{
  display:block;font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:.1em;color:var(--muted-2);margin-top:3px
}

.dots{ display:flex; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--text); opacity:.85; }
.dot.free{ background:transparent; border:1.5px solid var(--muted-2); opacity:1; }
.spots-left{ font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--accent-text); }
.spots-left.gone{ color:var(--muted-2); }

.srow .btn{ white-space:nowrap; }
.srow.sold-out{ opacity:.55; }
.srow.sold-out .btn{ background:var(--bg-elev-2); color:var(--muted); box-shadow:none; pointer-events:none; }
.srow.sold-out .btn .btn-arrow{ display:none; }

@media (max-width:1000px){
  .offer-top{ grid-template-columns:1fr; }
  .offer-photo{ aspect-ratio:16/10; }
  .srow{ grid-template-columns:1fr 1fr; gap:18px; }
  .srow .btn{ grid-column:1 / -1; justify-content:center; }
}
@media (max-width:560px){
  /* Pair the cells up rather than stacking all five — keeps a row to one screen */
  .srow{ grid-template-columns:1fr 1fr; gap:14px 16px; padding:18px; }
  .scell-value.place{ font-size:16px; }
  .scell-value.date{ font-size:17px; }
  .offer-num{ width:44px; height:44px; font-size:15px; }
  .offer-list li{ padding-left:28px; font-size:15px; }
  .offer-subhead{ font-size:14px; }
}




/* ============================================================
   Centred section variant
   ============================================================ */
.section.centered .sec-head{align-items:center;text-align:center;margin-inline:auto}
.section.centered .eyebrow{margin-inline:auto}
.section.centered .pain-card{margin-inline:auto;text-align:center;max-width:600px}
.section.centered .section-note{margin-inline:auto;text-align:center}

/* ============================================================
   Chat mockup — a light phone screen, the one bright block
   on a dark page, so it reads as a real screenshot
   ============================================================ */
.chat-block{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:56px}
.chat-title{font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0;text-align:center}

.chat{
  --c-bg:#f1f1f2; --c-ink:#14100e; --c-grey:#e2e2e4; --c-blue:#3b2ce0; --c-mute:#8d8a94;
  width:100%;max-width:420px;
  background:var(--c-bg);color:var(--c-ink);
  border-radius:26px;overflow:hidden;
  box-shadow:0 50px 90px -45px rgba(0,0,0,.95);
}
.chat-head{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-bottom:1px solid rgba(0,0,0,.08)
}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:#8a6f63 url(../assets/avatars/chat-anna.jpg) center/cover;flex:none}
.chat-name{font-family:var(--font-ui);font-size:19px;font-weight:600;letter-spacing:-.01em}
.chat-actions{margin-left:auto;display:flex;gap:8px}
.chat-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.06);color:#55525c}
.chat-ico svg{width:18px;height:18px}

.chat-body{display:flex;flex-direction:column;gap:14px;padding:18px 16px 22px}
.chat-day{font-family:var(--font-ui);font-size:13px;color:var(--c-mute);margin:2px 0}
.chat-body .chat-day{align-self:flex-end}

.grp{display:flex;gap:12px;align-items:flex-start}
.grp.them{justify-content:flex-end}
.grp-av{width:36px;height:36px;border-radius:50%;flex:none;background:#7d8794 url(../assets/avatars/chat-you.jpg) center/cover}
.grp-av.av-her{background-image:url(../assets/avatars/chat-anna.jpg)}
.grp-main{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:78%}
.grp.them .grp-main{align-items:flex-end}
.grp-meta{font-family:var(--font-ui);font-size:13px;color:var(--c-mute);margin-bottom:2px}
.grp-meta b{color:var(--c-ink);font-weight:600;margin-right:5px}

.msg{
  font-family:var(--font-ui);font-size:15px;line-height:1.45;
  padding:11px 15px;border-radius:16px;margin:0;width:fit-content;max-width:100%
}
.msg.out{background:var(--c-grey);color:var(--c-ink)}
.msg.in{background:var(--c-blue);color:#fff;border-bottom-right-radius:5px}
.msg.faded{opacity:.42}
.msg-read{display:flex;align-items:center;gap:5px;margin:0 0 0 4px;font-family:var(--font-ui);font-size:12px;color:var(--c-mute)}
.msg-read svg{width:16px;height:11px;color:var(--c-blue)}

.chat-input{
  display:flex;align-items:center;gap:12px;
  padding:18px 18px 22px;background:#2a2a2e;color:#c9c6d0;
  border-radius:22px 22px 0 0
}
.chat-input .chat-ico{background:transparent;color:#c9c6d0;width:22px;height:22px}
.chat-ph{font-family:var(--font-ui);font-size:15px;color:#9d9aa5}
.chat-send{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;color:#c9c6d0}
.chat-send svg{width:20px;height:20px}

@media (max-width:560px){
  .chat{max-width:100%;border-radius:20px}
  .grp-main{max-width:82%}
}



/* ============================================================
   Photo scrim — daylight shots blow out against a near-black
   page. A top-down scrim seats them in the ground instead of
   leaving them as bright rectangles.
   ============================================================ */
.hero-photo::before,
.offer-photo::before,
.journey-photo::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,16,14,.62), rgba(20,16,14,0) 46%),
    linear-gradient(0deg, rgba(20,16,14,.35), rgba(20,16,14,0) 28%);
}
.hero-photo img,
.offer-photo img,
.journey-photo img{filter:saturate(.9) contrast(1.03) brightness(.97)}

/* ============================================================
   Solution — copy beside a photo card
   ============================================================ */
.solution-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.solution-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}

.contact-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;display:flex;align-items:center}
.contact-card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.contact-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(20,16,14,.95) 38%,rgba(20,16,14,.36))
}
.contact-card-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(24px,3vw,40px);max-width:34ch}
.contact-card-inner p{font-family:var(--font-display);font-size:clamp(20px,1.9vw,25px);font-weight:400;line-height:1.3;margin:0;color:var(--text)}

/* ============================================================
   Option A / Option B
   ============================================================ */
.ab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.ab{ display:flex; flex-direction:column; gap:14px; padding:36px; }
.ab-tag{
  font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.ab h3{ font-size:26px; }
.ab p{ font-size:16px; line-height:1.65; color:var(--muted); }
.ab-a{ opacity:.78; }
.ab-a .ab-tag{ color:var(--warn); }
.ab-b{ background:linear-gradient(180deg, var(--accent-soft), transparent 42%), var(--bg-card); border-color:var(--border-strong); }
.ab-b .ab-tag{ color:var(--accent-text); }

.disclaimer{
  margin-top:28px; max-width:720px;
  font-family:var(--font-ui); font-size:12px; line-height:1.6; color:var(--muted-2);
}

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


/* ============================================================
   In the field — a contact strip, not a gallery. These are
   phone shots from a distance: small and many reads as evidence,
   big and single reads as a bad photograph. It drifts on its own
   so the "there are many of these" lands without a swipe.
   ============================================================ */
.strip{
  position:relative;overflow:hidden;
  margin-inline:calc(50% - 50vw);
  padding-block:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.strip-track{
  display:flex;align-items:center;gap:14px;width:max-content;
  animation:strip-drift 46s linear infinite;
}
.strip:hover .strip-track,
.strip:active .strip-track{animation-play-state:paused}
@keyframes strip-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 7px),0,0)}  /* half the track + half a gap */
}

.strip figure{
  position:relative;flex:0 0 auto;margin:0;
  width:clamp(146px,14vw,204px);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-card)
}
.strip figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,14,.34),rgba(20,16,14,0) 40%,rgba(20,16,14,.42))
}
.strip img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) brightness(.94)}
/* uneven heights so the row reads as a contact sheet rather than a tidy grid */
.strip figure:nth-child(5n+1){height:292px}
.strip figure:nth-child(5n+2){height:330px}
.strip figure:nth-child(5n+3){height:268px}
.strip figure:nth-child(5n+4){height:314px}
.strip figure:nth-child(5n+5){height:280px}


/* No motion: stop the drift and hand scrolling back to the reader */
@media (prefers-reduced-motion:reduce){
  .strip{overflow-x:auto}
  .strip-track{animation:none}
}

@media (max-width:560px){
  .strip-track{gap:10px;animation-duration:34s}
  @keyframes strip-drift{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - 5px),0,0)}
  }
  .strip figure{width:136px}
  .strip figure:nth-child(5n+1){height:222px}
  .strip figure:nth-child(5n+2){height:248px}
  .strip figure:nth-child(5n+3){height:206px}
  .strip figure:nth-child(5n+4){height:236px}
  .strip figure:nth-child(5n+5){height:214px}
}

/* ============================================================
   Video testimonials
   ============================================================ */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.vcard{display:flex;flex-direction:column;gap:14px;padding:22px}
.vcard h3{font-family:var(--font-ui);font-size:19px;font-weight:600;letter-spacing:0;line-height:1.35;margin:0}
.vcard p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
.vcard .ph-line{color:var(--muted-2);font-style:italic}

.vplayer{position:relative;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:#0b0908}
/* Wistia gave us four 9:16 interviews and one 16:9 — match each */
.vplayer.portrait{aspect-ratio:4/5}
.vplayer.landscape{aspect-ratio:16/9}
.vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.92) brightness(.86)}
/* 9:16 stills cropped to 4:5 — bias upward so faces survive the crop */
.vplayer.portrait .vposter{object-position:50% 30%}
.vplayer::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,14,.25),rgba(20,16,14,.08) 45%,rgba(20,16,14,.7))
}
.vplayer .video-play{position:relative;z-index:2}
.vplayer .video-play{
  display:grid;place-items:center;width:64px;height:44px;border-radius:8px;
  background:var(--accent);color:var(--accent-ink);transition:transform .18s ease
}
.vplayer .video-play:hover{transform:scale(1.06)}
.vplayer .video-play svg{width:22px;height:22px;margin-left:2px}
.vplayer .video-note{position:absolute;left:12px;right:12px;bottom:52px;text-align:center;font-family:var(--font-ui);font-size:11px;line-height:1.5;color:var(--muted-2);margin:0}
.vplayer .video-note code{font-size:11px}

.vbar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;background:var(--accent);color:var(--accent-ink)
}
.vbar-play{width:15px;height:15px;flex:none}
.vbar-time{font-family:var(--font-ui);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.vbar-track{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4);position:relative}
.vbar-track span{position:absolute;left:0;top:0;bottom:0;width:6%;border-radius:2px;background:currentColor}
.vbar-ico{width:15px;height:15px;flex:none}

/* an odd card left over in the two-column rows sits centred rather than stranded
   (full-width featured cards don't count towards the two columns) */
.vgrid > .vcard:not(.featured):last-child:nth-child(odd of .vcard:not(.featured)){grid-column:1 / -1;max-width:calc(50% - 12px);justify-self:center}
.vbody{margin:0;display:flex;flex-direction:column;gap:4px}
.vbody dt{
  font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);margin-top:12px
}
.vbody dt:first-child{margin-top:0}
.vbody dd{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.vplayer.is-playing{display:block;background:#000}
/* playing: take the video's real shape. Vertical videos never get taller than the screen. */
.vplayer.portrait.is-playing{
  aspect-ratio:9/16; align-self:center;
  width:min(100%, calc(82vh * 9 / 16));
  width:min(100%, calc(82svh * 9 / 16));
}
.vplayer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

@media (max-width:900px){
  .vgrid .vcard:last-child{max-width:100%}
}

.stars-gold{color:#e8b04b;font-size:15px;letter-spacing:2px;line-height:1}

.vfoot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
.vbadge{width:20px;height:20px;color:var(--accent-text);flex:none}
.vbadge svg{width:20px;height:20px}
.vname{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--text)}

@media (max-width:900px){
  .solution-grid{grid-template-columns:1fr;gap:32px}
  .vgrid{grid-template-columns:1fr}
}

/* ============================================================
   Offer pillars
   ============================================================ */
.pillars{display:flex;flex-direction:column;gap:0;max-width:860px;margin-inline:auto}
.pillar{padding:30px 0;border-top:1px solid var(--border)}
.pillar:first-child{border-top:0;padding-top:6px}
.pillar h4{
  font-family:var(--font-display);font-size:clamp(20px,1.9vw,26px);font-weight:400;
  line-height:1.25;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance
}
.pillar p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 11px}
.pillar p:last-child{margin-bottom:0}
.pillar strong{color:var(--text);font-weight:500}

/* ============================================================
   The quiet reason
   ============================================================ */

/* ============================================================
   How it works — photo left, timeline right
   ============================================================ */
.journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.journey-left{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.journey-left h2{margin:0}
.journey-photo{width:100%;aspect-ratio:4/3;border-radius:var(--radius)}

.journey-steps{position:relative;display:flex;flex-direction:column;gap:0;padding-top:6px}
.journey-steps li{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:18px;padding:0 0 34px 22px;border-left:1px solid var(--border)
}
.journey-steps li:last-child{padding-bottom:0;border-left-color:transparent}
.journey-steps li::before{
  content:"";position:absolute;left:-3px;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--accent)
}
.jicon{
  display:grid;place-items:center;width:30px;height:30px;flex:none;color:var(--accent-text)
}
.jicon svg{width:23px;height:23px}
.journey-steps h3{font-size:21px;line-height:1.25;margin:0 0 8px}
.journey-steps p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}

@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:36px}
}
@media (max-width:560px){
  .journey-steps li{padding-left:16px;gap:13px}
  .pillar h4{font-size:19px}
}



/* ============================================================
   Steps
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:48px; }
.step{ display:flex; flex-direction:column; gap:12px; padding:28px 24px; }
.step-num{
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  color:var(--accent-text); letter-spacing:.06em;
}
.step h3{ font-size:20px; }
.step p{ font-size:15px; line-height:1.55; color:var(--muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:flex; flex-direction:column; max-width:720px; }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--font-ui); font-size:18px; font-weight:600; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; margin-right:2px;
  border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted);
  rotate:45deg; translate:0 -3px;
  transition:rotate .22s ease, border-color .22s ease;
}
.faq details[open] summary::after{ rotate:225deg; translate:0 2px; border-color:var(--accent-text); }
.faq-a{ padding:0 0 22px; max-width:640px; }
.faq-a p{ font-size:16px; line-height:1.65; color:var(--muted); }

/* ============================================================
   Contact form
   ============================================================ */
.contact-form{ display:flex; flex-direction:column; gap:18px; padding:32px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--muted); }
.field input{
  width:100%; padding:14px 16px;
  background:var(--bg-elev); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  font-family:var(--font-ui); font-size:15px;
  transition:border-color .18s ease, background-color .18s ease;
}
.field input::placeholder{ color:var(--muted-2); }
.field input:focus{ outline:none; border-color:var(--accent-text); background:var(--bg-elev-2); }
.field input[aria-invalid="true"]{ border-color:var(--accent-text); }


.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-note{ font-family:var(--font-ui); font-size:13px; color:var(--muted); text-align:center; margin:-4px 0 0; }
.form-msg{ font-family:var(--font-ui); font-size:13px; color:var(--muted); min-height:1em; }
.form-msg.ok{ color:var(--success); }
.form-msg.err{ color:var(--accent-text); }

/* ============================================================
   Footer
   ============================================================ */


/* ============================================================
   Footer
   ============================================================ */
.footer{border-top:1px solid var(--border);padding-block:64px 36px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-tag{font-family:var(--font-ui);font-size:13.5px;color:var(--muted-2);margin:0}

.footer-nav{display:flex;gap:72px}
.footer-nav > div{display:flex;flex-direction:column;gap:11px;min-width:140px}
.footer-nav h4{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 4px
}
.footer-nav a{font-family:var(--font-ui);font-size:14px;color:var(--muted);transition:color .18s ease}
.footer-nav a:hover{color:var(--text)}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-top:56px;padding-top:24px;border-top:1px solid var(--border)
}
.footer-copy{font-family:var(--font-ui);font-size:12px;color:var(--muted-2);margin:0;white-space:nowrap}

@media (max-width:700px){
  .footer{padding-block:48px 28px}
  .footer-top{flex-direction:column;gap:36px}
  .footer-nav{gap:40px}
  .footer-nav > div{min-width:0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;margin-top:40px}
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .steps{ grid-template-columns:repeat(2,1fr); }}

@media (max-width:860px){
  .nav-toggle{ display:grid; }
  .nav-links{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:6px;
    padding:14px;
    background:rgba(22,18,15,.97);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border); border-radius:18px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:10px 8px; font-size:15px; }
  .nav-links .nav-cta{ justify-content:space-between; margin-top:6px; }
  .nav{ position:relative; }

  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-media{ order:2; }
  .hero-photo{ aspect-ratio:4/3; }
  .feature-grid{ grid-template-columns:1fr; gap:24px; }
  .compare-grid{ grid-template-columns:1fr; }
    }

@media (max-width:560px){
  body{ font-size:17px; }
  :root{ --gutter:18px; }
  .steps{ grid-template-columns:1fr; }  .card{ padding:20px; }
  .case, .contact-form{ padding:22px; }
  .stat{ padding:14px; }
  .stat-num{ font-size:19px; }
  .stat-label{ font-size:11px; }
}

/* Featured testimonial: full width, video beside the text on desktop */
.vcard.featured{grid-column:1 / -1}
.vcard.featured .vcontent{display:flex;flex-direction:column;gap:14px}
@media (min-width:861px){
  .vcard.featured{flex-direction:row;align-items:flex-start;gap:28px}
  .vcard.featured .vplayer{flex:0 0 58%}
  .vcard.featured .vcontent{flex:1;min-width:0}
  .vcard.featured.flip{flex-direction:row-reverse}
}

/* "Load more interviews" */
.btn-outline{
  background:transparent; color:var(--text);
  border:1px solid var(--border-strong);
}
.btn-outline:hover{ background:var(--bg-elev); transform:translateY(-2px); }
.btn-outline .btn-arrow{ background:var(--bg-elev-2); }
.vmore-wrap{ display:flex; justify-content:center; margin-top:28px; }
.vmore-wrap:has(.vmore[hidden]){ display:none; }
.vcard-in{ animation:vcardIn .45s ease both; }
@keyframes vcardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .vcard-in{ animation:none; } }

/* Result numbers at the bottom of each testimonial card */
.vstats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px;border-top:1px solid var(--border);text-align:center}
.vfoot + .vstats{margin-top:0}
.vstat{display:flex;flex-direction:column;align-items:center;gap:6px}
.vstat b{font-family:var(--font-ui);font-size:26px;font-weight:700;line-height:1.1;color:#e8b04b}
.vstat.is-check b{font-size:24px}
.vstat span{font-family:var(--font-ui);font-size:13px;line-height:1.35;color:var(--muted)}
.vstats:has(> .vstat:only-child){grid-template-columns:1fr}

/* Sound familiar: pain points beside the chat on desktop, stacked on phones */
.pain-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  margin-top:clamp(36px,4vw,56px); text-align:left;
}
.pain-grid .chat-block{margin-top:0}
.pain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pain-list li{
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 0; border-bottom:1px solid var(--border);
  font-size:17px; line-height:1.5; color:#e9e2da;
}
.pain-list li:first-child{padding-top:0}
.pain-list li:last-child{border-bottom:0}
.pain-list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-top:.65em;
}
.familiar-cta{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(40px,5vw,64px);text-align:center}
.familiar-cta .section-note{margin:0}
@media (max-width:860px){
  .pain-grid{grid-template-columns:1fr}
  .pain-list li{font-size:16px;padding:11px 0;gap:12px}
  /* phones: the chat is proof, not the main event — keep it compact */
  #familiar .chat-block{gap:14px}
  #familiar .chat-title{font-size:15px}
  #familiar .chat{max-width:330px;border-radius:22px}
  #familiar .chat-head{padding:12px 14px}
  #familiar .chat-body{gap:10px;padding:12px 12px 14px}
  #familiar .chat-input{padding:12px 14px 14px}
}

/* Result sits on the name line, pushed to the right */
.vfoot{flex-wrap:wrap}
.vfoot .vstats{display:flex;margin-left:auto;padding:0;border:0;gap:16px}
.vfoot .vstat{flex-direction:row;align-items:baseline;gap:6px}
.vfoot .vstat b{font-size:15px;font-weight:700}
.vfoot .vstat.is-check b{font-size:15px}
.vfoot .vstat span{font-size:13.5px;color:var(--text);font-weight:500}

/* Workshops as a quiet side note under the main offer */
.workshop-note{ padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:18px; }
.workshop-note-head h3{ font-family:var(--font-display); font-size:clamp(22px,2vw,28px); font-weight:400; margin:0; }
.workshop-note-head p{ margin:6px 0 0; font-family:var(--font-ui); font-size:15px; color:var(--muted); }
.workshop-note .schedule-rows{ gap:8px; }
.workshop-note .srow{ padding:14px 18px; background:transparent; }
.workshop-note .scell-label{ display:none; }
.workshop-note .scell-value.date{ font-size:17px; }
.workshop-note .scell-value.place{ font-size:15px; }
.workshop-note .scell-value{ font-size:14px; }
.workshop-note-link{ align-self:flex-start; }
.workshop-note .srow{ padding:10px 12px 10px 18px; }
.workshop-note .scell{ gap:2px; }
.workshop-note .scell-year{ display:inline; margin:0 0 0 6px; font-size:12px; }
.workshop-note .dots{ display:none; }
@media (max-width:1000px){
  .workshop-note .srow{
    grid-template-columns:auto 1fr auto; gap:4px 14px; padding:12px 12px 12px 16px;
  }
  .workshop-note .srow > .scell:nth-child(1){grid-column:1;grid-row:1}
  .workshop-note .srow > .scell:nth-child(2){grid-column:2;grid-row:1}
  .workshop-note .srow > .scell:nth-child(3){grid-column:1;grid-row:2}
  .workshop-note .srow > .scell:nth-child(4){grid-column:2;grid-row:2}
  .workshop-note .srow .btn{grid-column:3;grid-row:1 / span 2;align-self:center;justify-content:center}
  .workshop-note .scell-value.date{font-size:16px}
  .workshop-note .scell-year{display:none}
}
@media (max-width:560px){
  /* phones: the Apply button shrinks to its arrow so city and spots get the room */
  .workshop-note .srow{ grid-template-columns:auto 1fr auto; padding:12px 10px 12px 14px; }
  .workshop-note .srow .btn{ font-size:0; gap:0; padding:6px; border-radius:10px; }
  .workshop-note .scell-value.place{ white-space:nowrap; }
  .workshop-note .spots-left{ white-space:nowrap; }
}

/* ============================================================
   The program — three standalone blocks (coaching, profile, approach)
   ============================================================ */
.program-head{ margin-bottom:8px; }
.feature{ padding:clamp(24px,3.4vw,48px); display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); }
.feature-top{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,4vw,56px); align-items:stretch;
}
.feature-copy{ display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.feature-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-ui); font-size:14px; font-weight:500; color:var(--muted);
}
.feature-eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted-2); }
.feature h3{
  font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(28px,3.4vw,46px); line-height:1.12; letter-spacing:-.015em;
}
.feature h3 em{ font-style:italic; color:var(--accent-text); }
.feature-media{ border-radius:var(--radius); overflow:hidden; min-height:240px; }
.feature-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-media.is-screenshot{ background:#0e0b0a; border:1px solid var(--border); max-height:440px; }
.feature-media.is-screenshot img{ object-fit:cover; object-position:top; }
.feature-body{ display:flex; flex-direction:column; gap:12px; max-width:68ch; }
.feature-body p{ margin:0; font-size:18px; line-height:1.6; color:var(--muted); }

.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.proof-card{ margin:0; padding:20px; display:flex; flex-direction:column; gap:16px; background:var(--bg-elev); }
.proof-video{ border-radius:10px; overflow:hidden; background:#000; aspect-ratio:4/5; }
.proof-video video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.proof-foot{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--border); }
.proof-foot b{ display:block; font-family:var(--font-ui); font-size:16px; font-weight:600; color:var(--text); }
.proof-foot small{ display:block; font-family:var(--font-ui); font-size:13.5px; line-height:1.4; color:var(--muted); margin-top:2px; }
.program-cta{ display:flex; justify-content:center; }

@media (max-width:860px){
  .feature-top{ grid-template-columns:1fr; }
  .feature-media{ min-height:0; aspect-ratio:16/10; }
  .feature-media.is-screenshot{ aspect-ratio:auto; max-height:380px; }
  .feature-body p{ font-size:16.5px; }
}
@media (max-width:560px){
  /* phones: keep the two clips side by side; tapping plays them full screen */
  .proof-grid{ gap:10px; }
  .proof-card{ padding:10px; gap:10px; }
  .proof-card .stars-gold{ font-size:12px; letter-spacing:1px; }
  .proof-video{ aspect-ratio:9/16; }
  .proof-foot{ flex-direction:column; align-items:flex-start; gap:6px; padding-top:10px; }
  .proof-foot small{ font-size:12px; }
}
.proof-grid{ max-width:760px; }

/* ============================================================
   Without vs with coaching — two-column comparison table
   ============================================================ */
.compare{ display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vw,48px); padding-block:clamp(24px,4vw,56px); }
.compare-head{ align-items:center; text-align:center; max-width:820px; margin-inline:auto; }
.compare-head .eyebrow{ margin-inline:auto; }
.compare-table{
  width:100%; max-width:1000px;
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-card);
}
.compare-col + .compare-col{ border-left:1px solid var(--border-strong); }
.compare-col h3{
  margin:0; padding:22px 28px 22px 64px;
  font-family:var(--font-ui); font-size:19px; font-weight:600; letter-spacing:0;
  border-bottom:1px solid var(--border-strong);
}
.compare-col.is-with{ background:linear-gradient(180deg, var(--success-soft), transparent 55%); }
.compare-col ul{ list-style:none; margin:0; padding:10px 28px 22px; display:flex; flex-direction:column; }
.compare-col li{
  display:flex; align-items:flex-start; gap:16px; padding:13px 0;
  font-size:16.5px; line-height:1.45; color:var(--muted);
}
.compare-col.is-with li{ color:var(--text); }
.cmp-ico{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.cmp-ico svg{ width:13px; height:13px; }
.cmp-ico.no{ background:var(--accent-soft); color:var(--accent-text); }
.cmp-ico.yes{ background:var(--success); color:var(--bg); }
@media (max-width:760px){
  .compare-table{ grid-template-columns:1fr; }
  .compare-col + .compare-col{ border-left:0; border-top:1px solid var(--border-strong); }
  .compare-col h3{ padding:18px 20px 18px 58px; font-size:17px; }
  .compare-col ul{ padding:6px 20px 16px; }
  .compare-col li{ font-size:15.5px; padding:10px 0; gap:14px; }
}

/* One wide (16:9) client video under a program block */
.proof-grid.is-single{ grid-template-columns:1fr; max-width:760px; }
.proof-card .vplayer{ border-radius:10px; }
.feature-top.is-solo{ grid-template-columns:1fr; }
.feature-top.is-solo .feature-copy{ max-width:900px; }
/* One vertical (9:16) clip: keep the card narrow instead of a huge black box */
.proof-grid.is-vertical{ max-width:380px; }
.proof-grid.is-vertical .proof-video{ aspect-ratio:9/16; }

/* Apply: three proof photos between the promise and the form */
.apply-proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 auto 32px; max-width:640px; }
.apply-photo{ aspect-ratio:4/5; border-radius:var(--radius); }
.apply-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.apply-photo::after{ font-size:10px; }
@media (max-width:560px){ .apply-proof{ gap:8px; margin-bottom:24px; } }

/* Results cards: one short line instead of Problem / Process / Result */
.vsummary{ margin:0; font-size:16px; line-height:1.6; color:var(--muted); }

/* ============================================================
   Larger reading sizes (list text + subheadings), per feedback
   ============================================================ */
.pain-list li{ font-size:21px; line-height:1.45; padding:18px 0; }
.pain-list li::before{ width:8px; height:8px; margin-top:.6em; }
.vcard h3{ font-size:24px; line-height:1.3; }
.vsummary{ font-size:17.5px; }
.journey-steps h3{ font-size:26px; margin-bottom:10px; }
.journey-steps p{ font-size:18px; }
.compare-col h3{ font-size:23px; }
.compare-col li{ font-size:18.5px; }
.faq summary{ font-size:21px; }
.faq-a p{ font-size:17.5px; }
@media (max-width:860px){
  .pain-list li{ font-size:18.5px; padding:14px 0; }
  .vcard h3{ font-size:21px; }
  .journey-steps h3{ font-size:22px; }
  .journey-steps p{ font-size:17px; }
  .compare-col h3{ font-size:20px; }
  .compare-col li{ font-size:17px; }
  .faq summary{ font-size:18.5px; }
}

/* Eyebrows: larger, per feedback */
.eyebrow{ font-size:16px; gap:10px; max-width:100%; width:auto; }
.feature-eyebrow{ font-size:16px; }
@media (max-width:560px){
  .eyebrow, .feature-eyebrow{ font-size:14.5px; }
}
/* keep the dot attached to the first word when a long eyebrow wraps */
.eyebrow{ display:inline-block; line-height:1.45; }
.eyebrow::before{ display:inline-block; vertical-align:middle; margin:-2px 10px 0 4px; }
.section.centered .eyebrow, .compare-head .eyebrow, .sec-head.center .eyebrow{ text-align:center; }

/* Comparison, reference style: both columns fill the full height
   (the shorter list spreads out), centred headers.
   Phones: columns stay side by side, tight padding so each point fits ~2 lines. */
.compare-col{ display:flex; flex-direction:column; }
.compare-col ul{ flex:1; justify-content:space-around; }
.compare-col h3{ text-align:center; padding-left:20px; padding-right:20px; }
@media (max-width:760px){
  .compare{ margin-inline:-6px; }
  .compare-table{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .compare-col + .compare-col{ border-top:0; border-left:1px solid var(--border-strong); }
  .compare-col h3{ font-size:16px; line-height:1.25; padding:16px 8px; }
  .compare-col ul{ padding:6px 10px 12px; }
  .compare-col li{ font-size:14px; font-weight:500; line-height:1.4; padding:10px 0; gap:8px; align-items:center; }
  .compare-col.is-without li{ color:#d9cfc6; }
  .cmp-ico{ width:20px; height:20px; margin-top:0; }
  .cmp-ico svg{ width:11px; height:11px; }
}

/* Each before/after pair shares one row, so the two columns always line up.
   The table's rows: header + 8 points (update the 8 if the lists change length). */
@supports (grid-template-rows:subgrid){
  .compare-table{ grid-template-rows:auto repeat(8,auto); }
  .compare-col{ display:grid; grid-row:1 / -1; grid-template-rows:subgrid; }
  .compare-col ul{ display:grid; grid-row:2 / -1; grid-template-rows:subgrid; justify-content:normal; }
  .compare-col li{ align-items:center; }
}

/* ============================================================
   Logo: Confident Charisma (offset CC monogram + wordmark)
   ============================================================ */
.cc-mark{
  position:relative; display:inline-block; flex:none;
  width:1.02em; height:1.12em; font-size:30px;
  font-family:var(--font-display); font-weight:400; line-height:1;
}
.cc-mark span{ position:absolute; top:0; left:0; color:var(--text); }
.cc-mark span + span{ left:.26em; top:.16em; color:var(--accent-text); }
.cc-mark-lg{ font-size:44px; }
.cc-word{
  font-family:var(--font-display); font-weight:400; font-size:21px;
  letter-spacing:-.005em; color:var(--text); white-space:nowrap;
}
.cc-word em{ font-style:italic; font-weight:600; color:var(--accent-text); }
.cc-brand{ gap:12px; }
.cc-brand-text{ display:flex; flex-direction:column; gap:3px; line-height:1; }
.cc-brand .cc-by{ font-size:9.5px; letter-spacing:.16em; }
.cc-lockup{ display:inline-flex; align-items:center; gap:16px; }
.cc-lockup-text{ display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:1px solid var(--border); }
.cc-lockup .cc-word{ font-size:23px; }
.cc-by{ font-family:var(--font-ui); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Floating WhatsApp chat */
.wa-widget{ --wa-green:#3ac25c; position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:16px; font-family:var(--font-ui); }
.wa-float{
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:var(--wa-green); color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.45); }
.wa-float svg{ width:30px; height:30px; display:block; }
.wa-float .wa-ico-close{ display:none; }
.wa-widget.is-open .wa-float .wa-ico-open{ display:none; }
.wa-widget.is-open .wa-float .wa-ico-close{ display:block; }
.wa-widget.is-away:not(.is-open) .wa-float{ opacity:0; transform:scale(.8); pointer-events:none; }

.wa-panel{
  width:360px; height:min(500px, calc(100dvh - 140px));
  display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden;
  background:#efeae2;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transform-origin:bottom right;
  animation:waIn .18s ease-out;
}
.wa-panel[hidden]{ display:none; }
@keyframes waIn{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
.wa-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--wa-green); color:#fff; }
.wa-head > svg{ width:32px; height:32px; flex:none; }
.wa-head span{ flex:1; font-size:17px; font-weight:500; }
.wa-min{ background:none; border:0; color:#fff; cursor:pointer; padding:4px; display:grid; place-items:center; }
.wa-min svg{ width:26px; height:26px; }
.wa-body{
  flex:1; overflow:auto; padding:18px 16px;
  background-color:#efeae2;
  background-image:radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:16px 16px;
}
.wa-msg{ display:flex; align-items:flex-start; gap:10px; }
.wa-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.wa-bubble{ position:relative; background:#fff; color:#111b21; border-radius:0 12px 12px 12px; padding:8px 12px 6px; max-width:240px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-bubble::before{ content:""; position:absolute; left:-8px; top:0; border-top:10px solid #fff; border-left:8px solid transparent; }
.wa-name{ display:block; font-size:13px; font-weight:600; color:#3d8b6b; }
.wa-bubble p{ margin:2px 0 0; font-size:16px; line-height:1.35; color:#111b21; }
.wa-time{ display:block; margin-top:4px; font-size:12px; color:#8696a0; }
.wa-input{ display:flex; align-items:center; gap:10px; padding:12px 14px 14px; background:#efeae2; }
.wa-input input{
  flex:1; min-width:0; height:48px; padding:0 18px; border:0; border-radius:24px;
  background:#fff; color:#111b21; font:inherit; font-size:16px; outline:none;
}
.wa-input input::placeholder{ color:#8696a0; }
.wa-send{
  width:48px; height:48px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--wa-green); color:#fff;
  transition:background .15s ease;
}
.wa-send:disabled{ background:#c8cdd2; cursor:default; }
.wa-send svg{ width:22px; height:22px; margin-left:3px; }
@media (max-width:600px){
  .wa-widget{ right:16px; bottom:16px; left:16px; }
  .wa-panel{ width:100%; height:min(460px, calc(100dvh - 120px)); }
  .wa-head span{ font-size:16px; white-space:nowrap; }
  .wa-float{ width:56px; height:56px; }
}

/* ---------- Discovery call (thank-you page) ---------- */
.dc-hero{ min-height:100vh; }
.dc-grid{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px, 6vw, 80px); align-items:start; }
.dc-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.dc-copy h1{ font-size:clamp(34px, 3.6vw, 52px); }
.dc-copy h2{ font-size:clamp(28px, 3vw, 42px); line-height:1.15; }
.dc-text{ font-size:17px; line-height:1.6; color:var(--muted); max-width:520px; margin:0; }
.dc-side{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.dc-side .vcard{ width:100%; max-width:none; }
@media (max-width:860px){
  .dc-grid{ grid-template-columns:1fr; }
  .dc-side .btn{ width:100%; justify-content:center; }
}