/* The Phone AI Guy — design system
   Direction: friendly authority. Warm light mode, distinctive sans type,
   green as the trust color, clay-red reserved for scam/danger callouts only.
   Voice-waveform motif instead of retro phone. */

:root {
  --bg: #FAF9F4;
  --bg-tint: #F1EFE5;
  --surface: #FFFFFF;
  --ink: #17160F;
  --ink-soft: #3b392f;
  --muted: #6c6a5d;
  --line: #E6E2D4;
  --line-soft: #efece1;

  --green: #1c7a52;
  --green-deep: #115f3f;
  --green-tint: #e6f1ea;

  --clay: #c5462a;
  --clay-tint: #fbeae4;

  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(23,22,15,.05), 0 3px 10px rgba(23,22,15,.04);
  --shadow-md: 0 12px 34px rgba(23,22,15,.09);
  --shadow-lg: 0 28px 70px rgba(23,22,15,.12);

  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1120px;
  --gutter: 26px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* layered warm depth instead of a flat fill */
  background-image:
    radial-gradient(120% 70% at 85% -10%, rgba(28,122,82,.07), transparent 60%),
    radial-gradient(90% 60% at -10% 5%, rgba(197,70,42,.05), transparent 55%);
  background-attachment: fixed;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

a { color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
p { margin: 0 0 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: 16px;
  border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(28,122,82,.26); }
.btn-primary:hover { background: var(--green-deep); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(28,122,82,.32); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-deep); transform: translateY(-1px); }

/* ---------- top bar ---------- */
header.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 8px 24px rgba(23,22,15,.10);
}
.bar-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.wave-mark { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.wave-mark span { width: 3px; border-radius: 3px; background: var(--green); animation: bars 1.6s ease-in-out infinite; }
.wave-mark span:nth-child(1){height:8px;animation-delay:0s}
.wave-mark span:nth-child(2){height:18px;animation-delay:.2s}
.wave-mark span:nth-child(3){height:12px;animation-delay:.4s}
.wave-mark span:nth-child(4){height:22px;animation-delay:.15s}
.wave-mark span:nth-child(5){height:9px;animation-delay:.35s}
@keyframes bars { 0%,100%{transform:scaleY(.6)} 50%{transform:scaleY(1)} }
.bar-nav { display: flex; align-items: center; gap: 28px; }
.bar-nav a { color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 600; }
.bar-nav a:not(.btn):hover { color: var(--green-deep); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.bar-nav .btn { padding: 10px 18px; font-size: 14.5px; }
.bar-nav a.btn-primary, .bar-nav a.btn-primary:hover { color:#fff; }
.bar-nav a.btn-ghost { color:var(--ink); }
.bar-nav a.btn-ghost + a.btn-primary { margin-left: -16px; }
@media (max-width: 800px){ .bar-nav a.nav-hide { display:none; } }

/* ---------- hero ---------- */
.hero { padding: 92px 0 70px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); background: var(--green-tint); padding: 7px 14px; border-radius: 999px; margin: 0 0 24px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(28,122,82,.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 4px rgba(28,122,82,.18)} 50%{box-shadow:0 0 0 7px rgba(28,122,82,.04)} }
.hero h1 { font-size: clamp(42px, 6vw, 70px); margin: 0 0 22px; }
.hero h1 .hl { color: var(--green); }
.lede { font-size: 20px; color: var(--ink-soft); margin: 0 0 18px; }
.cred { font-size: 16.5px; color: var(--muted); margin: 0 0 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 13px; }

/* hero video */
.hero-media { position: relative; }
.media-frame { display:block; width:100%; font:inherit; color:inherit; text-align:left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-lg); cursor:pointer; transition: transform .16s ease, box-shadow .2s ease; }
.media-frame:hover { transform: translateY(-2px); box-shadow: 0 34px 84px rgba(23,22,15,.17); }
.media-frame:hover .play-badge { transform: translate(-50%,-50%) scale(1.07); background: var(--green); }
.media-screen { position: relative; aspect-ratio: 1/1; border-radius: 15px; overflow: hidden; background: radial-gradient(120% 120% at 30% 10%, #25433a, #16221d); }
.play-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:rgba(28,122,82,.92); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px rgba(0,0,0,.34); transition:transform .16s ease, background .16s ease; z-index:2; }
.play-badge svg { width:30px; height:30px; margin-left:4px; }
.media-screen video, .media-screen img { width:100%; height:100%; object-fit: cover; display:block; }
.media-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#eef3ee; text-align:center; padding:26px; }
.media-ph .play { width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; }
.media-ph .play svg { width:24px; height:24px; margin-left:3px; }
.media-ph small { opacity:.7; font-size:13px; }
.media-cap { position:absolute; left:12px; right:12px; bottom:12px; background:rgba(20,18,12,.6); color:#fff; font-size:13.5px; padding:9px 13px; border-radius:9px; backdrop-filter:blur(4px); }
/* decorative waveform behind the frame */
.hero-wave { position:absolute; right:-24px; top:-30px; width:150px; opacity:.5; z-index:-1; color: var(--green); }

/* Anchor jumps land with room to breathe: clear the sticky bar (84px) plus
   space above, so the target section sits mid-screen instead of under the bar. */
[id] { scroll-margin-top: 140px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- section scaffolding ---------- */
section.band { padding: 66px 0; }
.section-head { margin: 0 0 38px; }
.section-head .kicker { font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--clay); margin:0 0 12px; }
.section-head .kicker.g { color: var(--green-deep); }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); margin:0 0 14px; }
.section-head p { font-size: 18.5px; color: var(--ink-soft); margin:0; }

/* ---------- fears grid ---------- */
.fears { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fear {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.fear:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green); color: var(--ink); }
.fear .ic { width:40px; height:40px; border-radius:11px; background:var(--green-tint); color:var(--green-deep); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.fear .ic svg { width:21px; height:21px; }
.fear h3 { font-size:19px; margin:0 0 7px; letter-spacing:-.01em; }
.fear p { font-size:15.5px; color:var(--muted); margin:0; line-height:1.5; }
.fear .go { display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:16px; font-weight:600; font-size:14.5px; color:var(--green-deep); }
.fear:hover .go { gap:9px; }

/* ---------- signature framework (scam red flags) ---------- */
.flags-wrap { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 46px 48px; box-shadow: var(--shadow-md); position:relative; overflow:hidden; }
.flags-wrap::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background: var(--clay); }
ol.flags { list-style:none; counter-reset:f; margin:30px 0 0; padding:0; }
ol.flags li { counter-increment:f; position:relative; padding:20px 0 20px 62px; border-top:1px solid var(--line-soft); }
ol.flags li:first-child { border-top:0; }
ol.flags li::before { content:counter(f); position:absolute; left:0; top:18px; width:40px; height:40px; border-radius:11px; background:var(--clay-tint); color:var(--clay); font-family:var(--display); font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; }
ol.flags .f-t { display:block; font-weight:600; font-size:18.5px; margin-bottom:4px; }
ol.flags .f-d { color:var(--muted); font-size:16px; line-height:1.55; }
.flags-foot { margin-top:28px; padding:20px 22px; background:var(--green-tint); border-radius:var(--radius); color:var(--green-deep); font-size:16.5px; }
.flags-foot strong { font-weight:700; }

/* ---------- newsletter ---------- */
.news { background: linear-gradient(150deg, #18241f, #20322a); color:#f1efe6; border-radius: var(--radius-lg); padding: 52px 50px; position:relative; overflow:hidden; box-shadow: var(--shadow-lg); }
.news::after { content:""; position:absolute; right:-60px; bottom:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(28,122,82,.5), transparent 70%); }
.news .inner { position:relative; z-index:1; }
.news h2 { font-size: clamp(28px,3.4vw,38px); color:#fff; margin:0 0 12px; }
.news p.s { color:#cfd8cf; margin:0 0 26px; font-size:17.5px; }
form.subf { display:flex; gap:12px; flex-wrap:wrap; }
form.subf input[type=email] { flex:1 1 260px; min-width:0; font-family:var(--body); font-size:16px; padding:15px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#fff; }
form.subf input[type=email]::placeholder { color:#aebbae; }
form.subf input[type=email]:focus { outline:0; border-color:#46c98a; background:rgba(255,255,255,.11); }
.subf-note { font-size:13.5px; color:#aebbae; margin:15px 0 0; }
.form-msg { font-size:15.5px; margin:15px 0 0; min-height:1px; }
.form-msg.ok { color:#8fe6a6; }
.form-msg.err { color:#f4a78f; }

/* ---------- who / about-mini ---------- */
.who { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:54px; align-items:center; }
.who-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm); }
.who-card .tag { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); }
.who-card h3 { font-size:26px; margin:10px 0 14px; }
.who-card p { color:var(--ink-soft); font-size:16.5px; }
.who-pts { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.who-pts li { display:flex; gap:14px; align-items:flex-start; }
.who-pts .ck { flex:none; width:26px; height:26px; border-radius:50%; background:var(--green-tint); color:var(--green-deep); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.who-pts .ck svg { width:15px; height:15px; }
.who-pts b { font-weight:700; }
.who-pts span { color:var(--ink-soft); }

/* ---------- as seen on ---------- */
.seen { text-align:center; }
.seen .lbl { font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
.seen-row { display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:center; align-items:center; opacity:.55; }
.seen-row .pill { font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink-soft); }

/* ---------- footer ---------- */
footer.foot { border-top:1px solid var(--line); margin-top:30px; padding:50px 0 60px; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:34px; }
.foot h4 { font-family:var(--display); font-size:16px; margin:0 0 14px; letter-spacing:-.01em; }
.foot p, .foot a { font-size:15px; color:var(--muted); }
.foot a { display:block; text-decoration:none; margin-bottom:8px; }
.foot a:hover { color:var(--green-deep); }
.foot .brand-foot { font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.foot .fine { margin-top:30px; padding-top:22px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- about page ---------- */
.about-hero { padding: 84px 0 30px; }
.about-hero .eyebrow { margin-bottom:20px; }
.about-hero h1 { font-size: clamp(38px,5vw,60px); margin:0 0 8px; }
.about-body { padding-bottom: 30px; }
.about-video { max-width:900px; margin:6px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow-md); }
.about-video video { width:100%; aspect-ratio:16/9; display:block; border-radius:14px; object-fit:cover; background:#16221d; }
.about-video-ph { aspect-ratio:16/9; border-radius:14px; background:radial-gradient(120% 120% at 30% 10%, #25433a, #16221d); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#eef3ee; text-align:center; padding:24px; }
.about-video-ph .play { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; }
.about-video-ph .play svg { width:24px; height:24px; margin-left:3px; }
.about-video-ph small { opacity:.7; font-size:13px; }

/* ---------- two-step signup (email -> optional first name -> confirm) ---------- */
/* Two panels share one footprint. Panel 2 slides in over panel 1 from the same left edge. */
.subf-stage { position:relative; flex:1 1 auto; min-width:0; overflow:hidden; }
.subf-panel { display:flex; gap:10px 14px; align-items:center; }
.subf-panel input { flex:1 1 0; min-width:0; }
.subf-panel .btn { flex:0 0 auto; }
.subf-panel.p1 { transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.subf-panel.p2 { position:absolute; inset:0; transform:translateX(105%); pointer-events:none; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.subf[data-step="2"] .subf-panel.p1 { transform:translateX(-105%); pointer-events:none; }
.subf[data-step="2"] .subf-panel.p2 { transform:none; pointer-events:auto; }
.f-name { font-family:var(--body); font-size:15.5px; padding:13px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.f-name::placeholder { color:var(--muted); }
.f-name:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(28,122,82,.12); }
.news .f-name { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; }
.news .f-name::placeholder { color:#aebbae; }
@media (prefers-reduced-motion: reduce){ .subf-panel { transition:none; } }

/* ---------- safe-word generator ---------- */
.sw-gen { margin:12px 0 34px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:48px 32px; box-shadow:var(--shadow-md); }
.sw-label { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin:0 0 18px; }
.sw-word { font-family:var(--display); font-weight:700; font-size:clamp(36px,6vw,60px); color:var(--green); letter-spacing:-.02em; line-height:1.05; margin:0 0 26px; }
.sw-note { font-size:15.5px; color:var(--muted); margin:22px 0 0; }
.sw-rows { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:center; margin:0 0 30px; }
.sw-row { display:flex; justify-content:center; }
.sw-ch { font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,30px); color:var(--green); line-height:1.15; }
.sw-ch.dash { color:var(--green-deep); }
@media (max-width:880px){ .sw-rows { grid-template-columns:1fr; gap:10px; } }
.about-body p { font-size:19px; color:var(--ink-soft); margin:0 0 22px; line-height:1.62; }
.about-body p:first-of-type::first-letter { /* subtle, not a gimmick */ }
.about-figure { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow-md); margin: 6px 0 40px; }
.about-figure .ph { aspect-ratio:16/10; border-radius:14px; background:radial-gradient(120% 120% at 30% 10%, #25433a, #16221d); display:flex; align-items:center; justify-content:center; color:#cfd8cf; font-size:14px; }
.ventures { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin: 10px 0 0; }
.venture { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.venture h4 { font-family:var(--display); font-size:18px; margin:0 0 6px; }
.venture p { font-size:15.5px; color:var(--muted); margin:0; }

/* ---------- reveal on load/scroll ---------- */
.reveal { opacity:0; transform: translateY(16px); }
.reveal.in { opacity:1; transform:none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-delay="1"]{ transition-delay:.06s } [data-delay="2"]{ transition-delay:.12s }
[data-delay="3"]{ transition-delay:.18s } [data-delay="4"]{ transition-delay:.24s }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; }
  .wave-mark span, .eyebrow .dot { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  body { font-size:17px; }
  .hero { padding:60px 0 40px; }
  .hero-grid, .who { grid-template-columns:1fr; gap:38px; }
  .media-screen { aspect-ratio:1/1; }
  .fears { grid-template-columns:1fr; }
  .flags-wrap, .news { padding:32px 24px; }
  .foot-grid { grid-template-columns:1fr; gap:26px; }
  .ventures { grid-template-columns:1fr; }
}

/* ---------- booking page ---------- */
.book-hero { padding: 84px 0 14px; }
.book-hero .eyebrow { margin-bottom:20px; }
.book-hero h1 { font-size:clamp(40px,5.4vw,64px); margin:0 0 14px; }
.book-hero p.sub { font-size:20px; color:var(--ink-soft); margin:0; }
.book-grid { display:grid; grid-template-columns:1fr 0.95fr; gap:56px; align-items:start; padding:42px 0 10px; }
.book-info h3 { font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px; }
.book-info .blk + .blk { margin-top:38px; }
.talk { padding:18px 0; border-top:1px solid var(--line-soft); }
.talk:first-of-type { border-top:0; padding-top:0; }
.talk .tt { font-family:var(--display); font-weight:700; font-size:18.5px; letter-spacing:-.01em; margin:0 0 5px; }
.talk .td { color:var(--muted); font-size:15.5px; margin:0; line-height:1.5; }
.book-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.book-list li { display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-size:16px; }
.book-list .ck { flex:none; width:24px;height:24px;border-radius:50%;background:var(--green-tint);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin-top:2px; }
.book-list .ck svg{width:14px;height:14px;}
.book-bio { background:var(--bg-tint); border-radius:var(--radius); padding:22px 24px; color:var(--ink-soft); font-size:15.5px; line-height:1.62; }

.form-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-md); position:sticky; top:90px; }
.form-card h2 { font-size:24px; margin:0 0 6px; }
.form-card .fc-sub { color:var(--muted); font-size:15px; margin:0 0 22px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field label .req { color:var(--clay); }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--body); font-size:15.5px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(28,122,82,.12); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-card .btn { width:100%; justify-content:center; margin-top:6px; }
.book-msg { font-size:15px; margin:14px 0 0; min-height:1px; text-align:center; }
.book-msg.ok { color:var(--green-deep); }
.book-msg.err { color:var(--clay); }
.book-success { text-align:center; padding:18px 0; }
.book-success .big { width:56px;height:56px;border-radius:50%;background:var(--green-tint);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 14px; }
.book-success .big svg{width:28px;height:28px;}
.book-success h3{font-size:21px;margin:0 0 6px;}
.book-success p{color:var(--muted);font-size:15.5px;margin:0;}

@media (max-width:880px){
  .book-grid { grid-template-columns:1fr; gap:34px; }
  .form-card { position:static; padding:26px 22px; }
  .field-row { grid-template-columns:1fr; }
}

/* ---------- video lightbox (floating wide player) ---------- */
.vid-modal { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
.vid-modal.open { opacity:1; visibility:visible; }
.vid-modal .backdrop { position:absolute; inset:0; background:rgba(15,14,9,.74); backdrop-filter:blur(6px); }
.vid-modal-inner { position:relative; width:min(980px,94vw); z-index:1; transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.vid-modal.open .vid-modal-inner { transform:none; }
.vid-frame { position:relative; aspect-ratio:16/9; background:#0e1714; border-radius:16px; overflow:hidden; box-shadow:0 44px 110px rgba(0,0,0,.5); }
.vid-frame video { width:100%; height:100%; display:block; object-fit:cover; }
.vid-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#cfd8cf; font-size:15.5px; padding:24px; }
.vid-close { position:absolute; top:-15px; right:-15px; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:25px; line-height:1; cursor:pointer; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; z-index:2; }
.vid-close:hover { background:var(--bg-tint); }
@media (max-width:880px){ .vid-close { top:-52px; right:0; background:rgba(255,255,255,.94); } }

/* ---------- article / explainer pages ---------- */
.article-hero { padding: 40px 0 8px; }
.article-hero .eyebrow { margin: 8px 0 18px; }
.article-hero h1 { font-size:clamp(34px,4.8vw,52px); margin:0 0 14px; }
.article-hero .lede { font-size:21px; color:var(--ink-soft); margin:0; line-height:1.5; }
.article-back { display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--green-deep); text-decoration:none; padding-top:46px; }
.article-back:hover { gap:11px; }
.article { max-width:none; padding:34px 0 6px; }
.article p { font-size:19px; color:var(--ink-soft); line-height:1.62; margin:0 0 22px; }
.article h2 { font-family:var(--display); font-size:25px; letter-spacing:-.01em; margin:36px 0 12px; }
.article ul { margin:0 0 22px; padding:0; list-style:none; }
.article ul li { position:relative; font-size:18.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; padding-left:28px; }
.article ul li::before { content:""; position:absolute; left:3px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--green); }
.article ul li strong { color:var(--ink); font-weight:700; }
.callout { background:var(--green-tint); border-radius:var(--radius); padding:24px 28px; margin:30px 0; }
.callout .lbl { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); margin:0 0 8px; }
.callout p { font-size:18.5px; color:var(--ink); margin:0; line-height:1.55; }
@media (max-width:880px){ .article-back { padding-top:30px; } }
.inline-cta { margin: 2px 0 24px; }
.inline-cta form.subf { display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center; max-width:none; }
.inline-cta .cta-ask { font-size:18px; color:var(--ink); margin:0; line-height:1.4; flex:0 1 auto; }
.inline-cta form.subf button { flex:0 0 auto; }
.inline-cta form.subf input[type=email] { flex:1 1 0; min-width:0; font-family:var(--body); font-size:15.5px; padding:13px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.inline-cta form.subf input[type=email]::placeholder { color:var(--muted); }
.inline-cta form.subf input[type=email]:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(28,122,82,.12); }
.inline-cta .form-msg { margin-top:12px; }