/* ═══════════════════════════════════════════════════════════════
   LUA VENTURES — luaventures.com
   Dark forest-black with the LV signal green. Display type is
   Bricolage Grotesque (confident, modern, not corporate); UI and
   body run Inter. The hex mark from the logo is the only ornament.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --bg:#070E0A;
  --bg-2:#0B1510;
  --card:#0F1D15;
  --card-2:#122419;

  --ink:#EDF6F0;
  --sub:#9FB6A8;
  --faint:#84998D;

  --signal:#2EE07F;
  --signal-2:#16C464;
  --signal-ink:#07130C;
  --wash:rgba(46,224,127,.08);
  --hair:rgba(237,246,240,.09);
  --hair-2:rgba(237,246,240,.16);

  --r:16px;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px;
  --s6:52px; --s7:76px; --s8:110px;
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-ui); background:var(--bg); color:var(--ink);
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (min-width:900px){ .wrap{padding:0 40px} }

h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(2.6rem,1.4rem + 5.4vw,4.9rem)}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);margin-bottom:var(--s4)}
h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.02em}
em{font-style:normal;color:var(--signal)}
h1 em{position:relative;display:inline-block}
h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;
  background:var(--signal);opacity:.85;
}

.label{
  display:flex;align-items:center;gap:12px;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);margin-bottom:var(--s4);
}
.label::after{content:"";height:1px;flex:0 0 44px;background:var(--hair-2)}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--sub);max-width:56ch}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:1rem;border-radius:12px;padding:16px 28px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn--signal{
  background:linear-gradient(135deg,var(--signal),var(--signal-2));
  color:var(--signal-ink);box-shadow:0 14px 38px -12px rgba(46,224,127,.45);
}
.btn--signal:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(46,224,127,.55)}
.btn--ghost{background:transparent;border-color:var(--hair-2);color:var(--ink)}  /* background:transparent or a ghost <button> keeps the browser's grey buttonface and goes white-on-white on a dark page */
.btn--ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn--block{width:100%}

/* ── header ── */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,14,10,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.header__inner{display:flex;align-items:center;gap:28px;min-height:74px}
.mark{display:flex;align-items:center;gap:12px;font-family:var(--font-display)}
.mark svg{flex:0 0 auto}
.mark__txt{font-weight:800;font-size:1.22rem;letter-spacing:-.01em;white-space:nowrap}
.mark__txt span{color:var(--signal);font-weight:600}
.nav{display:none;gap:28px;margin-left:auto;font-size:.95rem;font-weight:600;color:var(--sub)}
.nav a:hover{color:var(--signal)}
.header__tel{display:none;font-weight:700;font-size:.95rem}
.header__cta{margin-left:auto;padding:12px 20px;font-size:.92rem}
@media (min-width:900px){
  .nav{display:flex}
  .header__tel{display:block}
  .header__cta{margin-left:0}
}

/* ── hero ── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(820px 480px at 88% -20%,rgba(46,224,127,.09),transparent 62%),
    var(--bg);
}
.hero__inner{padding-block:var(--s7) var(--s7)}
@media (min-width:900px){ .hero__inner{padding-block:var(--s8) var(--s8)} }
.hero h1{max-width:13ch;margin-bottom:var(--s4)}
.hero .lede{margin-bottom:var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--s4)}
.hero__actions .btn{flex:1 1 100%}
@media (min-width:560px){ .hero__actions .btn{flex:0 0 auto} }
.hero__trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9rem;font-weight:600;color:var(--faint)}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust svg{color:var(--signal)}

/* hex watermark */
.hex-bg{
  position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:520px;opacity:.5;pointer-events:none;display:none;
}
@media (min-width:1100px){ .hex-bg{display:block} }

/* ── stats band ── */
.stats{border-block:1px solid var(--hair);background:var(--bg-2)}
.stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (min-width:900px){ .stats__grid{grid-template-columns:repeat(4,1fr)} }
.stats__grid li{padding:26px 20px;border-right:1px solid var(--hair)}
.stats__grid li:last-child{border-right:0}
@media (max-width:899px){ .stats__grid li:nth-child(2n){border-right:0} .stats__grid li:nth-child(-n+2){border-bottom:1px solid var(--hair)} }
.stats__n{font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--signal);display:block;line-height:1}
.stats__grid small{display:block;margin-top:8px;font-size:.82rem;color:var(--sub);line-height:1.45}

/* ── sections ── */
.section{padding-block:var(--s7)}
@media (min-width:900px){ .section{padding-block:var(--s8)} }
.section--alt{background:var(--bg-2);border-block:1px solid var(--hair)}
.section__head{max-width:640px;margin-bottom:var(--s6)}

/* ── systems grid ── */
.sys{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){ .sys{grid-template-columns:1fr 1fr} }
@media (min-width:1020px){ .sys{grid-template-columns:repeat(3,1fr)} }
.sys li{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 26px 28px;position:relative;
  transition:transform .18s ease,border-color .18s ease;
}
.sys li:hover{transform:translateY(-3px);border-color:rgba(46,224,127,.4)}
.sys__n{
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  color:var(--signal);letter-spacing:.06em;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;margin-bottom:16px;
  background:var(--wash);border:1px solid rgba(46,224,127,.3);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.sys h3{margin-bottom:10px}
.sys p{font-size:.95rem;color:var(--sub)}

/* ── pricing ── */
.price{
  display:grid;border:1px solid var(--hair-2);border-radius:20px;overflow:hidden;
  grid-template-columns:1fr;background:var(--card);
}
@media (min-width:900px){ .price{grid-template-columns:.9fr 1.1fr} }
.price__left{
  padding:44px 36px;background:
    radial-gradient(400px 300px at 20% 0%,rgba(46,224,127,.14),transparent 60%),
    var(--bg);
  display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--hair);
}
@media (min-width:900px){ .price__left{border-bottom:0;border-right:1px solid var(--hair)} }
.price__plan{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.price__amount{font-family:var(--font-display);font-weight:800;font-size:4rem;line-height:1;letter-spacing:-.02em}
.price__amount sub{font-size:1.1rem;font-weight:600;color:var(--sub);vertical-align:baseline}
.price__note{margin-top:12px;color:var(--signal);font-weight:700}
.price__sub{margin-top:6px;font-size:.9rem;color:var(--sub)}
.price__left .btn{margin-top:28px}
.price__right{padding:36px}
.price__right li{
  display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair);
  font-size:.97rem;color:var(--sub);
}
.price__right li:last-child{border-bottom:0}
.price__right b{color:var(--ink);display:block;margin-bottom:2px}
.price__right svg{flex:0 0 auto;margin-top:4px;color:var(--signal)}

.deal{
  margin-top:18px;border:1.5px dashed rgba(46,224,127,.5);border-radius:var(--r);
  background:var(--wash);padding:22px 26px;
}
.deal b{color:var(--signal)}
.deal p{font-size:.93rem;color:var(--sub);margin-top:4px}

/* ── timeline ── */
.days{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){ .days{grid-template-columns:repeat(4,1fr)} }
.days li{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:24px}
.days__d{font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--signal);text-transform:uppercase;display:block;margin-bottom:10px}
.days p{font-size:.94rem;color:var(--sub)}
.days b{color:var(--ink)}

/* ── roi ── */
.roi{display:grid;gap:40px;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){ .roi{grid-template-columns:1fr 1fr} }
.roi__rows li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--hair);border-radius:12px;
  padding:16px 22px;margin-bottom:10px;font-weight:600;color:var(--sub);
}
.roi__rows li b{font-family:var(--font-display);font-size:1.35rem;color:var(--ink)}
.roi__rows li.roi--you{border-color:rgba(46,224,127,.45);background:var(--wash)}
.roi__rows li.roi--you b{color:var(--signal)}

/* ── work / proof ── */
.work{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:720px){ .work{grid-template-columns:repeat(3,1fr)} }
.phone{
  border:1px solid var(--hair-2);border-radius:26px;overflow:hidden;
  aspect-ratio:10/17;background:var(--card);position:relative;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.work figcaption{margin-top:14px}
.work figcaption b{display:block;font-family:var(--font-display);font-size:1.05rem}
.work figcaption span{font-size:.88rem;color:var(--faint)}

/* ── final cta ── */
.cta{
  text-align:center;
  background:
    radial-gradient(700px 420px at 50% -20%,rgba(46,224,127,.16),transparent 65%),
    var(--bg-2);
  border-top:1px solid var(--hair);
}
.cta .lede{margin-inline:auto;margin-bottom:var(--s5)}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:18px}
.cta__mail{font-size:.95rem;color:var(--faint)}
.cta__mail a{color:var(--sub);border-bottom:1px solid var(--hair-2)}

/* ── footer ── */
.foot{border-top:1px solid var(--hair);background:var(--bg);padding-block:var(--s6)}
.foot__grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot p{font-size:.88rem;color:var(--faint);max-width:52ch;margin-top:14px}
.foot__links{display:flex;gap:22px;font-size:.9rem;font-weight:600;color:var(--sub)}
.foot__links a:hover{color:var(--signal)}
.foot__bot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.82rem;color:var(--faint)}

/* ── book page ── */
.book{display:grid;gap:48px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){ .book{grid-template-columns:.85fr 1.15fr} }
.book__steps li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair);color:var(--sub);font-size:.97rem}
.book__steps li:last-child{border-bottom:0}
.book__steps b{color:var(--ink);display:block}
.cal{
  background:var(--card);border:1px solid var(--hair-2);border-radius:20px;
  min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.cal iframe{width:100%;min-height:640px;border:0}
.cal__todo{padding:40px;text-align:center;color:var(--faint);max-width:44ch}
.cal__todo b{color:var(--signal)}

/* ═══════════════ v2: header phone pill ═══════════════ */
.tel-pill{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;
  border:1.5px solid var(--hair-2);border-radius:999px;padding:9px 16px;
  font-weight:800;font-size:.9rem;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.tel-pill svg{color:var(--signal);flex:0 0 auto}
.tel-pill:hover{border-color:var(--signal);color:var(--signal)}
@media (min-width:900px){ .tel-pill{margin-left:auto} .header__cta{margin-left:0} }

/* ═══════════════ v2: hero stage ═══════════════ */
.hero__grid{display:grid;gap:64px;align-items:center;grid-template-columns:1fr}
@media (min-width:1000px){ .hero__grid{grid-template-columns:1.02fr .98fr;gap:40px} }
.hero__grid h1{font-size:clamp(2.5rem,1.3rem + 3.9vw,4.1rem);max-width:15ch}
.stage{position:relative;max-width:400px;margin-inline:auto;padding:36px 0 30px}
.stage__phone{
  border-radius:36px;overflow:hidden;aspect-ratio:10/19;
  border:1px solid var(--hair-2);
  box-shadow:0 0 0 8px rgba(255,255,255,.035),0 48px 100px -34px rgba(0,0,0,.9);
}
.stage__phone img{width:100%;height:100%;object-fit:cover;object-position:top}

.float{
  position:absolute;z-index:2;background:var(--card-2);
  border:1px solid rgba(46,224,127,.22);border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.85);
}

.chatcard{left:-84px;bottom:84px;width:272px;padding:14px 14px 12px;animation-delay:.6s}
.chatcard small{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px;
}
.chatcard small b{color:var(--signal)}
.bb{padding:9px 13px;border-radius:15px;font-size:.8rem;line-height:1.45;max-width:92%}
.bb--in{background:#1A2A20;color:var(--sub);border-bottom-left-radius:5px;margin-bottom:8px}
.bb--out{
  background:linear-gradient(135deg,var(--signal),var(--signal-2));
  color:var(--signal-ink);font-weight:600;border-bottom-right-radius:5px;margin-left:auto;
}
.revfloat{right:-56px;top:44px;width:216px;padding:14px 16px;animation-delay:0s}
.revfloat .stars{color:#F5B83D;letter-spacing:2.5px;font-size:.86rem;display:block;margin-bottom:6px}
.revfloat p{font-size:.8rem;font-weight:700;line-height:1.4}
.revfloat span{display:block;margin-top:4px;font-size:.72rem;color:var(--faint);font-weight:600}
.leadfloat{right:-40px;bottom:-6px;width:238px;padding:13px 16px;display:flex;gap:11px;align-items:center;animation-delay:1.4s}
.leadfloat .dot{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 5px rgba(46,224,127,.18);flex:0 0 auto}
.leadfloat p{font-size:.78rem;font-weight:700;line-height:1.4}
.leadfloat span{display:block;font-size:.7rem;color:var(--faint);font-weight:600;margin-top:2px}
@media (max-width:559px){
  .stage{max-width:330px}
  .chatcard{left:-10px;width:236px;bottom:70px}
  .revfloat{right:-8px;top:30px;width:196px}
  .leadfloat{right:-6px;bottom:-10px;width:216px}
}

/* ═══════════════ v2: video section ═══════════════ */
.demo{max-width:900px;margin-inline:auto;text-align:center}
.demo .lede{margin-inline:auto;margin-bottom:var(--s5)}
.demo__player{
  border-radius:22px;overflow:hidden;border:1px solid var(--hair-2);
  box-shadow:0 0 0 8px rgba(255,255,255,.03),0 44px 100px -30px rgba(0,0,0,.85);
  background:#000;
}
.demo__player video{width:100%;display:block;background:#000}
.demo__note{margin-top:16px;font-size:.88rem;color:var(--faint)}

/* ═══════════════ v2: sys card links ═══════════════ */
.sys a.sys__card{display:block;color:inherit;height:100%}
.sys__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.88rem;font-weight:700;color:var(--signal);
}
.sys__more svg{transition:transform .18s ease}
.sys li:hover .sys__more svg{transform:translateX(4px)}

/* ═══════════════ v2: system detail pages ═══════════════ */
.pagehero{
  background:
    radial-gradient(760px 420px at 80% -10%,rgba(46,224,127,.12),transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--hair);
}
.pagehero__inner{padding-block:var(--s7);display:grid;gap:48px;align-items:center;grid-template-columns:1fr}
@media (min-width:960px){ .pagehero__inner{grid-template-columns:1.1fr .9fr;padding-block:var(--s7)} }
.pagehero h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem);max-width:16ch;margin-bottom:var(--s4)}
.crumb{font-size:.8rem;font-weight:700;color:var(--faint);margin-bottom:var(--s4);display:block}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--signal)}

.ticks{margin-block:var(--s4)}
.ticks li{display:flex;gap:13px;padding:11px 0;color:var(--sub);font-size:1rem;border-bottom:1px solid var(--hair)}
.ticks li:last-child{border-bottom:0}
.ticks svg{flex:0 0 auto;margin-top:5px;color:var(--signal)}
.ticks b{color:var(--ink)}

.prose{max-width:660px}
.prose h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);margin:var(--s6) 0 var(--s3)}
.prose p{color:var(--sub);margin-bottom:var(--s3)}

.faq{max-width:660px;margin-top:var(--s5)}
.faq details{border-bottom:1px solid var(--hair);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:16px 0;font-weight:700;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:1.3rem;color:var(--signal);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--sub);padding-bottom:18px;font-size:.97rem}

/* static stacked visuals on system pages */
.stackviz{display:flex;flex-direction:column;gap:14px;max-width:380px;margin-inline:auto;width:100%}
.stackviz .float{position:static;animation:none;width:auto}
.stackviz .chatcard,.stackviz .revfloat,.stackviz .leadfloat{width:auto}
.stackviz .off-l{transform:translateX(-14px)}
.stackviz .off-r{transform:translateX(14px)}
.minutes{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);text-align:center}

/* ═══════════════ reviews / testimonials ═══════════════ */
.quotes{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){ .quotes{grid-template-columns:1fr 1fr 1fr} }
.quote{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column;gap:18px;position:relative;
}
.quote::before{
  content:"\201C";position:absolute;top:10px;right:22px;
  font-family:var(--font-display);font-size:5rem;line-height:1;
  color:rgba(46,224,127,.16);pointer-events:none;
}
.quote .stars{color:#F5B83D;letter-spacing:2.5px;font-size:.95rem}
.quote p{font-size:1.02rem;line-height:1.6;color:var(--ink);flex:1}
.quote footer{display:flex;align-items:center;gap:14px}
.quote footer img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--hair-2)}
.quote footer b{display:block;font-size:.95rem}
.quote footer span{font-size:.82rem;color:var(--faint)}
.quote--sum{
  background:
    radial-gradient(320px 220px at 80% 0%,rgba(46,224,127,.14),transparent 60%),
    var(--card);
  border-color:rgba(46,224,127,.3);justify-content:center;text-align:center;gap:10px;
}
.quote--sum .big{font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:1;color:var(--signal)}
.quote--sum .stars{justify-content:center;font-size:1.15rem;letter-spacing:4px}
.quote--sum p{flex:0;color:var(--sub);font-size:.95rem}
.quote--sum small{font-size:.78rem;color:var(--faint)}

/* system cards: photo texture behind a heavy dark wash so type stays first */
.sys li.has-img{background-size:cover;background-position:center}
.sys li.has-img:hover{border-color:rgba(46,224,127,.5)}

/* reviewer initials disc */
.quote__ini{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-family:var(--font-display);
  font-weight:800;font-size:1rem;color:var(--signal);
  background:var(--wash);border:1px solid rgba(46,224,127,.3);
}

/* ═══ AUDIT UPGRADE PASS (design + a11y + motion polish) ═══ */

/* Branded focus ring — WCAG 2.4.7 (no :focus rules existed before) */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline-offset:4px}
.sys .sys__card:focus-visible{outline-offset:6px}

/* Button press feedback + consistent hover easing */
.btn{transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s ease,background .16s ease,border-color .16s ease}
.btn:active{transform:translateY(0) scale(.985)}
.btn--signal:active{box-shadow:0 8px 20px -10px rgba(46,224,127,.5)}
.sys__card,.work figure,.quote{transition:transform .22s cubic-bezier(.22,.61,.36,1),border-color .22s ease}

/* Video CLS — reserve 16:9 before metadata loads */
.demo__player video{aspect-ratio:16/9;width:100%;height:auto}
.demo__player.is-portrait{max-width:430px;margin-inline:auto}
.demo__player.is-portrait video{aspect-ratio:9/16;max-height:80vh;object-fit:contain}

/* Clickable client link in the work captions */
.work figcaption a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(46,224,127,.4);transition:border-color .18s ease}
.work figcaption a:hover{border-bottom-color:var(--signal)}

/* Footer tel/email links distinguishable from text */
.foot__bot a{color:var(--sub);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(159,182,168,.4)}
.foot__bot a:hover{color:var(--signal);text-decoration-color:var(--signal)}
.cta__mail a{color:var(--signal)}

/* 'First week' timeline connector */
@media (min-width:720px){
  .days{position:relative}
  .days::before{content:"";position:absolute;top:14px;left:12%;right:12%;height:2px;
    background:linear-gradient(90deg,transparent,rgba(46,224,127,.35),transparent);z-index:0}
  .days li{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .btn,.sys__card,.work figure,.quote{transition:none}
  .btn:active{transform:none}
}

.demo__cta{margin-top:22px;text-align:center}

/* ═══════════════ v3: legal pages ═══════════════ */
.legal{max-width:70ch;margin-inline:auto}
.legal h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.2rem)}
.legal__date{font-size:.85rem;color:var(--faint);font-weight:600;margin-bottom:var(--s5)}
.legal h2{font-size:1.35rem;margin:var(--s5) 0 var(--s2)}
.legal p{color:var(--sub);margin-bottom:var(--s3)}
.legal p b{color:var(--ink)}
.legal a{color:var(--signal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(46,224,127,.4)}
.legal a:hover{text-decoration-color:var(--signal)}
.legal ul{margin:0 0 var(--s3) 1.2em;list-style:disc;color:var(--sub)}
.legal ul li{margin-bottom:8px}
.legal ul li b{color:var(--ink)}

/* ═══════════════ v3: themed browser surfaces ═══════════════ */
/* selection, caret and scrollbar carry the brand instead of the OS defaults */
::selection{background:var(--signal);color:var(--signal-ink)}
html{scrollbar-color:#1d3a2a var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1d3a2a;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#265036}
:root{accent-color:var(--signal);caret-color:var(--signal)}

/* ═══════════════ v3: mobile nav menu ═══════════════ */
/* Below the desktop breakpoint the header collapses to logo + a compact
   phone icon + a hamburger; the full nav + booking CTA move into an
   overlay panel so every section is reachable without scrolling. */
.tel-pill__num{white-space:nowrap}
@media (max-width:899px){
  .header__inner{gap:14px}
  .header__cta{display:none}          /* Book CTA now lives in the menu */
  .tel-pill__num{display:none}        /* phone collapses to an icon */
  .tel-pill{padding:11px;gap:0;margin-left:auto}
  .tel-pill svg{width:17px;height:17px}
}
@media (max-width:380px){ .mark__txt{font-size:1.06rem} .header__inner{gap:10px} }

/* hamburger button (mobile only) */
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;padding:0;
  border:1.5px solid var(--hair-2);border-radius:12px;background:transparent;
  color:var(--ink);cursor:pointer;transition:border-color .18s ease;
}
@media (max-width:899px){ .navtoggle{display:inline-flex} }
.navtoggle:hover{border-color:var(--signal)}
.navtoggle:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.navtoggle__bars,.navtoggle__bars::before,.navtoggle__bars::after{
  display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .24s ease,opacity .18s ease,background .18s ease;
}
.navtoggle__bars{position:relative}
.navtoggle__bars::before,.navtoggle__bars::after{content:"";position:absolute;left:0}
.navtoggle__bars::before{top:-6px}
.navtoggle__bars::after{top:6px}
html.nav-open .navtoggle__bars{background:transparent}
html.nav-open .navtoggle__bars::before{transform:translateY(6px) rotate(45deg)}
html.nav-open .navtoggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

/* full-screen overlay panel; sits under the sticky header (z-50) so the
   logo + X stay visible and tappable */
.mobmenu{
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(74px + 4vh) 28px 40px;
  background:linear-gradient(180deg,rgba(7,14,10,.985),rgba(9,21,16,.995));
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .26s ease,transform .3s ease,visibility 0s linear .3s;
}
html.nav-open{overflow:hidden}
html.nav-open .mobmenu{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .24s ease,transform .32s cubic-bezier(.2,.7,.2,1);
}
.mobmenu__nav{display:flex;flex-direction:column}
.mobmenu__nav a{
  font-family:var(--font-display);font-weight:700;
  font-size:1.85rem;letter-spacing:-.012em;line-height:1;
  padding:15px 0;border-bottom:1px solid var(--hair);
  color:var(--ink);transition:color .16s ease;
}
.mobmenu__nav a:hover,.mobmenu__nav a:active{color:var(--signal)}
.mobmenu__actions{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.mobmenu__actions .btn{width:100%;justify-content:center;padding:16px}
.mobmenu__foot{margin-top:20px;text-align:center;font-size:.82rem;color:var(--faint);font-weight:600}
@media (min-width:900px){ .navtoggle,.mobmenu{display:none} }
@media (prefers-reduced-motion:reduce){
  .mobmenu{transition:opacity .01s linear,visibility 0s}
  html.nav-open .mobmenu{transition:opacity .01s linear}
  .navtoggle__bars,.navtoggle__bars::before,.navtoggle__bars::after{transition:none}
}

/* ═══ PHONE SAFETY NET ═══  added 2026-09-15
   Android answers a page wider than the screen by shrinking the WHOLE page to fit; that
   is the zoom-out Brandon reported on a 360px Samsung. iOS clips instead, which is why
   the same bug is invisible on an iPhone. Chasing the one guilty element is whack-a-mole,
   so overflow is made structurally impossible below 420px. Measured on this site before
   shipping: 280/320/360/412 all go to 0px. The ticker marquee and the gallery are
   untouched because they are already clipped by their own wrapper. */
@media (max-width:420px){
  html{ overflow-x:hidden }          /* the viewport itself cannot scroll sideways */
  body *{ min-width:0 }              /* no flex/grid child may refuse to shrink */
  body{ overflow-wrap:break-word }   /* long numbers/emails/URLs wrap, never push */
  img, svg, video, table, iframe{ max-width:100% }
}

/* ═══ v4: /review.html — the review funnel ════════════════════════════════
   One question at a time, big tap targets, works on a phone in a truck.
   Added 2026-09-15. */

.rv-body .header__inner{justify-content:space-between}
.rv{min-height:64vh;display:flex;align-items:center;padding-block:var(--s6)}
.rv > .wrap{width:100%}
.rv__step{max-width:620px;margin-inline:auto;text-align:center}
.rv__step h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);margin:0 0 16px;outline:none}
.rv__step .lede{margin-inline:auto;margin-bottom:var(--s5)}
.rv__step[hidden]{display:none !important}
.rv__step.is-on{animation:rvIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes rvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv__step.is-on{animation:none}}

/* stars */
.rv__stars{display:flex;justify-content:center;gap:clamp(6px,2.2vw,14px);
      border:0;padding:0;margin:0 0 18px}
.rv__star{background:none;border:0;padding:6px;cursor:pointer;line-height:0;
      color:var(--hair-2);transition:color .14s ease,transform .14s cubic-bezier(.22,.61,.36,1)}
.rv__star svg{width:clamp(44px,12vw,62px);height:clamp(44px,12vw,62px);fill:currentColor}
.rv__star:hover,.rv__star:focus-visible{transform:translateY(-3px)}
.rv__star.is-lit{color:var(--signal)}
.rv__hint{color:var(--faint);font-size:.92rem;min-height:1.4em;font-weight:600}

.rv__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:18px}
.btn--big{padding:16px 28px;font-size:1.02rem}
.rv__fine{font-size:.86rem;color:var(--faint);max-width:46ch;margin-inline:auto;line-height:1.6}
.rv__fine a{color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.rv__fine a:hover{color:var(--signal)}

/* the private form */
.rv__form{text-align:left}
.rv__form h1,.rv__form .lede{text-align:center}
.rv__field{display:block;margin-bottom:var(--s3)}
.rv__field > span{display:block;font-size:.84rem;font-weight:700;color:var(--sub);margin-bottom:7px}
.rv__field input,.rv__field textarea{width:100%;font:inherit;color:var(--ink);
      background:var(--card);border:1px solid var(--hair-2);border-radius:12px;
      padding:13px 15px;transition:border-color .14s ease}
.rv__field textarea{resize:vertical;min-height:112px;line-height:1.55}
.rv__field input:focus,.rv__field textarea:focus{outline:none;border-color:var(--signal)}
.rv__form .btn--block{margin-top:var(--s2)}
.rv__back{display:block;margin:16px auto 0;background:none;border:0;cursor:pointer;
      font:inherit;font-size:.88rem;font-weight:600;color:var(--faint);
      text-decoration:underline;text-underline-offset:3px}
.rv__back:hover{color:var(--signal)}
#rv-err{color:var(--signal);margin-top:12px;text-align:center}

/* done */
.rv__tick{width:62px;height:62px;margin:0 auto var(--s4);border-radius:50%;
      display:grid;place-items:center;color:var(--signal-ink);background:var(--signal)}
.rv__tick svg{width:30px;height:30px}

/* chapter list on the standalone watch page (landscape video, list beneath) */
.watch__chapters{max-width:640px;margin:var(--s4) auto 0}
.watch__chapters .updvid__sideh{text-align:center}
.watch__chapters .updvid__sidep{text-align:center}

/* ═══ v6: /updates.html — the watch page ══════════════════════════════════
   Kaden 2026-09-15: main video, other months beside it (under it on a phone),
   and ONE short list that is both the timestamps and the recap. Phone first:
   most clients open this on a phone from a text. Added 2026-09-15. */

.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav a.is-here{color:var(--ink)}
.nav a.is-here::after{content:"";display:block;height:2px;margin-top:5px;border-radius:2px;
      background:var(--signal)}

.wgsec{padding-block:var(--s5) var(--s7)}
.wg__intro{margin-bottom:var(--s5);max-width:60ch}
.wg__intro h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);margin:0 0 10px}
.wg__intro p{color:var(--sub);margin:0;line-height:1.6}

.wg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
    gap:var(--s5);align-items:start}

/* ── player ── */
.wg__player{margin:0;border-radius:var(--r);overflow:hidden;background:#000;
      border:1px solid var(--hair)}
.wg__player video{display:block;width:100%;height:auto;max-height:70vh}
.wg__player.is-portrait{max-width:330px}
.wg__player.is-portrait video{aspect-ratio:9/16;object-fit:contain}

.wg__title{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);line-height:1.25;
      letter-spacing:-.02em;margin:var(--s4) 0 8px;max-width:28ch}
.wg__meta{font-size:.87rem;color:var(--faint);margin:0 0 var(--s4);line-height:1.5}

/* ── the timestamps, which are also the recap ── */
.chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);
      max-width:620px}
.chapters li{border-bottom:1px solid var(--hair)}
.chapters__row{display:flex;align-items:flex-start;gap:14px;width:100%;
      background:none;border:0;cursor:pointer;font:inherit;text-align:left;
      padding:12px 10px 12px 4px;color:var(--sub);border-radius:8px;
      transition:color .14s ease,background .14s ease}
.chapters__row:hover{color:var(--ink);background:var(--card)}
.chapters__t{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;
      font-size:.84rem;color:var(--signal);min-width:3.1em;padding-top:2px}
.chapters__b{display:block;min-width:0}
.chapters__l{display:block;font-size:.97rem;line-height:1.3;color:var(--ink);font-weight:600}
.chapters__n{display:block;font-size:.88rem;line-height:1.45;color:var(--sub);margin-top:3px}
.chapters__row[aria-current="true"]{background:var(--card)}
.chapters__row[aria-current="true"] .chapters__t::before{content:"";display:inline-block;
      width:6px;height:6px;border-radius:50%;background:var(--signal);
      margin-right:7px;vertical-align:middle}

/* ── the other months ── */
.wg__side{position:sticky;top:96px}
.wg__sideh{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
      color:var(--faint);margin:0 0 var(--s3)}
.vidlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vidlist__row{display:flex;gap:12px;width:100%;background:none;border:1px solid transparent;
      border-radius:12px;padding:8px;cursor:pointer;font:inherit;text-align:left;
      transition:background .14s ease,border-color .14s ease}
.vidlist__row:hover{background:var(--card);border-color:var(--hair)}
.vidlist__row[aria-current="true"]{background:var(--card-2);border-color:var(--hair-2)}
.vidlist__thumb{position:relative;flex:0 0 132px;border-radius:9px;overflow:hidden;
      background:#000;line-height:0}
.vidlist__thumb img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.vidlist__dur{position:absolute;right:5px;bottom:5px;background:rgba(7,14,10,.86);
      color:#fff;font-size:.68rem;font-weight:700;padding:2px 5px;border-radius:4px;
      font-variant-numeric:tabular-nums;line-height:1.3}
.vidlist__meta{display:block;min-width:0;padding-top:2px}
.vidlist__t{display:block;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3}
.vidlist__m{display:block;font-size:.8rem;color:var(--faint);margin-top:4px}

.wg__ask{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair);
      font-size:.86rem;color:var(--sub);line-height:1.55}
.wg__ask a{color:var(--signal);font-weight:600;white-space:nowrap}

@media (max-width:900px){
  .wg{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .wg__main,.wg__side{grid-column:1}
  .wg__side{position:static}
  .wg__player.is-portrait{max-width:none;margin-inline:auto}
  .wg__player.is-portrait video{max-height:56vh}
  .vidlist__thumb{flex-basis:116px}
}

/* chapter list on the standalone watch page (landscape video, list beneath) */

/* v6b: with a PORTRAIT video the player is only ~330px, so the recap sits
   beside it instead of under it. Otherwise half the row is dead space and the
   page gets taller for no reason. */
.wg__main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
      align-items:start}
.wg__main > .wg__player{grid-column:1}
.wg__main > .wg__info{grid-column:2;min-width:0}
.wg__info .wg__title{margin-top:0}

@media (max-width:1060px){
  .wg{grid-template-columns:minmax(0,1fr)}
  .wg__side{position:static;max-width:560px}
}
@media (max-width:760px){
  .wg__main{grid-template-columns:minmax(0,1fr)}
  .wg__main > .wg__player,.wg__main > .wg__info{grid-column:1}
  .wg__info .wg__title{margin-top:var(--s3)}
}

/* ═══ v7: polish pass ═════════════════════════════════════════════════════
   Kaden 2026-09-15: "make it look stunning, I don't want it to be ugly and
   all black and choppy." So: one soft light source behind the player, real
   elevation on the card surfaces, and a visible route from the main video to
   the updates page. Restraint on purpose - no bobbing cards, no gradient
   text, no uppercase-green kickers (all banned in the de-AI pass). */

/* ── a single light source so the page is not flat black ── */
.wgsec{position:relative;isolation:isolate}
.wgsec::before{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:620px;
      background:radial-gradient(52% 62% at 24% 22%,rgba(46,224,127,.11),transparent 70%);
      pointer-events:none}
.wgsec::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(18,36,25,.55),transparent 42%)}

.wg__intro h1{letter-spacing:-.03em}

/* ── the player, lifted off the page ── */
.wg__player{position:relative;box-shadow:0 34px 70px -34px rgba(0,0,0,.95),
      0 0 0 1px rgba(237,246,240,.05) inset}
.wg__player::after{content:"";position:absolute;z-index:-1;inset:8% -8% -8% -8%;
      background:radial-gradient(50% 50% at 50% 60%,rgba(46,224,127,.18),transparent 72%);
      filter:blur(26px);pointer-events:none}

.wg__title{letter-spacing:-.03em}

/* ── chapters get an accent rail so the list reads as steps, not rows ── */
.chapters{border-top:0}
.chapters li{border-bottom:1px solid var(--hair)}
.chapters li:last-child{border-bottom:0}
.chapters__row{position:relative;padding-left:14px}
.chapters__row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
      border-radius:2px;background:transparent;transition:background .16s ease}
.chapters__row:hover::before{background:var(--hair-2)}
.chapters__row[aria-current="true"]::before{background:var(--signal)}
.chapters__row[aria-current="true"]{background:linear-gradient(90deg,
      rgba(46,224,127,.10),rgba(46,224,127,0) 62%)}

/* ── the month list reads as cards ── */
.vidlist__row{background:var(--card);border-color:var(--hair)}
.vidlist__row:hover{background:var(--card-2);border-color:var(--hair-2);
      transform:translateY(-1px)}
.vidlist__row[aria-current="true"]{border-color:rgba(46,224,127,.45);
      box-shadow:0 0 0 1px rgba(46,224,127,.18)}
.vidlist__thumb{box-shadow:0 6px 16px -8px rgba(0,0,0,.9)}

/* ═══ the route from the main video to /updates ═══════════════════════════ */
.nextup{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s4);
      align-items:center;max-width:820px;margin:var(--s6) auto 0;padding:var(--s4);
      border:1px solid var(--hair);border-radius:var(--r);background:var(--card);
      position:relative;overflow:hidden}
.nextup::before{content:"";position:absolute;inset:auto -30% -70% 40%;height:260px;
      background:radial-gradient(50% 50% at 50% 50%,rgba(46,224,127,.13),transparent 70%);
      pointer-events:none}
.nextup__thumb{position:relative;display:block;border-radius:12px;overflow:hidden;
      line-height:0;background:#000;box-shadow:0 12px 30px -14px rgba(0,0,0,.95);
      transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.nextup__thumb:hover{transform:translateY(-2px)}
.nextup__thumb img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;
      opacity:.92;transition:opacity .18s ease}
.nextup__thumb:hover img{opacity:1}
.nextup__dur{position:absolute;right:7px;bottom:7px;background:rgba(7,14,10,.86);color:#fff;
      font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:4px;line-height:1.3;
      font-variant-numeric:tabular-nums}
.nextup__play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
      display:grid;place-items:center;background:var(--signal);color:var(--signal-ink);
      box-shadow:0 8px 22px -8px rgba(46,224,127,.8)}
.nextup__play svg{width:22px;height:22px;margin-left:2px}
.nextup__body{min-width:0;position:relative}
.nextup__new{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.02em;
      color:var(--signal-ink);background:var(--signal);border-radius:999px;padding:3px 10px;
      margin-bottom:10px}
.nextup__body h2{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.25;
      letter-spacing:-.025em;margin:0 0 10px;max-width:26ch}
.nextup__body p{color:var(--sub);font-size:.94rem;line-height:1.6;margin:0 0 var(--s3);
      max-width:52ch}

@media (max-width:640px){
  .nextup{grid-template-columns:minmax(0,1fr);text-align:left;padding:var(--s3)}
  .nextup__body .btn{width:100%}
}

/* ═══ v8: video player with chapters in the scrub bar (/video.html only) ═══
   Kaden 2026-09-15: the written "What is in it" list was too long and choppy,
   so the chapters moved into the bar. Drag the scrubber and it names the part
   you are landing in. /updates keeps its native controls + written list. */

.vp{position:relative;line-height:0;background:#000}
.vp video{display:block;width:100%;height:auto;cursor:pointer}

.vp__ui{position:absolute;inset:0;pointer-events:none;line-height:1.4}

/* big centre play button, only while paused */
.vp__big{position:absolute;inset:0;margin:auto;width:74px;height:74px;border:0;
      border-radius:50%;background:rgba(46,224,127,.95);color:var(--signal-ink);
      display:grid;place-items:center;cursor:pointer;pointer-events:auto;
      box-shadow:0 14px 40px -12px rgba(0,0,0,.9);opacity:0;transform:scale(.9);
      transition:opacity .18s ease,transform .18s cubic-bezier(.22,.61,.36,1)}
.vp.is-paused .vp__big{opacity:1;transform:scale(1)}
.vp__big svg{width:34px;height:34px;margin-left:4px}
.vp__big:hover{transform:scale(1.06)}

/* the bar itself */
.vp__bar{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 10px;
      pointer-events:auto;opacity:0;transition:opacity .2s ease;
      background:linear-gradient(180deg,transparent,rgba(4,9,6,.82) 62%)}
.vp:hover .vp__bar,.vp.is-paused .vp__bar,.vp.is-scrubbing .vp__bar,
.vp:focus-within .vp__bar{opacity:1}

/* segmented track, one bar per chapter */
.vp__scrub{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;
      touch-action:none}
.vp__scrub:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.vp__segs{display:flex;width:100%;gap:2px;height:4px;align-items:stretch;
      transition:height .14s ease}
.vp__scrub:hover .vp__segs,.vp.is-scrubbing .vp__segs{height:7px}
.vp__seg{position:relative;flex-basis:0;border-radius:2px;overflow:hidden;
      background:rgba(237,246,240,.28)}
.vp__fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;
      background:var(--signal);will-change:transform}

.vp__head{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
      border-radius:50%;background:var(--signal);pointer-events:none;
      box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .14s ease}
.vp__scrub:hover .vp__head,.vp.is-scrubbing .vp__head{opacity:1}

/* the tooltip that names the chapter you are dragging into */
.vp__tip{position:absolute;bottom:22px;transform:translateX(-50%);opacity:0;
      pointer-events:none;background:rgba(7,14,10,.96);border:1px solid var(--hair-2);
      border-radius:9px;padding:7px 11px;max-width:min(260px,70vw);
      transition:opacity .12s ease;box-shadow:0 12px 30px -12px rgba(0,0,0,.95)}
.vp.is-tipping .vp__tip{opacity:1}
.vp__tip-l{display:block;font-size:.84rem;font-weight:700;color:var(--ink);
      line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp__tip-t{display:block;font-size:.76rem;color:var(--signal);font-weight:700;
      font-variant-numeric:tabular-nums;margin-top:2px}

/* button row */
.vp__row{display:flex;align-items:center;gap:12px;margin-top:2px;color:#EDF6F0}
.vp__btn{background:none;border:0;padding:5px;cursor:pointer;color:inherit;
      display:grid;place-items:center;border-radius:7px;line-height:0;
      transition:color .14s ease,background .14s ease}
.vp__btn:hover{color:var(--signal);background:rgba(237,246,240,.08)}
.vp__btn svg{width:21px;height:21px}
.vp__i-pause,.vp.is-muted .vp__i-on{display:none}
.vp:not(.is-paused) .vp__i-play{display:none}
.vp:not(.is-paused) .vp__i-pause{display:block}
.vp__i-off{display:none}
.vp.is-muted .vp__i-off{display:block}

.vp__time{font-size:.8rem;font-variant-numeric:tabular-nums;color:rgba(237,246,240,.9);
      white-space:nowrap}
.vp__chap{flex:1 1 auto;min-width:0;font-size:.82rem;font-weight:600;
      color:rgba(237,246,240,.72);white-space:nowrap;overflow:hidden;
      text-overflow:ellipsis;text-align:right}
.vp__full{margin-left:0}

@media (max-width:640px){
  .vp__chap{display:none}          /* no room next to the buttons on a phone */
  .vp__big{width:60px;height:60px}
  .vp__big svg{width:27px;height:27px}
  .vp__bar{padding:30px 10px 8px}
}
@media (prefers-reduced-motion:reduce){
  .vp__big,.vp__bar,.vp__segs,.vp__head,.vp__tip{transition:none}
}

/* "Leave a review" under the client-reviews grid. Kaden 2026-09-16: it belongs next to the
   reviews our clients earn, not only in the footer. Wraps on a phone, no fixed widths. */
.rv-invite{
  margin:22px 0 0; display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; text-align:center;
  font-size:.95rem; color:var(--faint);
}

/* ── 2026-09-16, main video v13 ──
   Kaden: "where's the dragging thing? like for the timeline". The bar faded
   out while playing and phones have no hover, so it stays up. And a 9:16 box
   capped by height was showing black pillars on desktop: the width now
   follows the height cap so the frame is exactly the video. */
.vp .vp__bar{opacity:1}
.watch__player.is-portrait{max-width:min(430px,calc(76vh * 9 / 16))}
.demo__player.is-portrait{max-width:min(430px,calc(80vh * 9 / 16))}
.wg__player.is-portrait{max-width:min(330px,calc(70vh * 9 / 16))}
.watch__update{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hair)}
.watch__update .wg__intro{margin-bottom:var(--s4)}
.watch__update .wg__intro h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin:10px 0 8px;letter-spacing:-.03em}
.watch__update .wg__info .wg__title{margin-top:0}
@media (max-width:900px){.wg__player.is-portrait{max-width:min(430px,calc(56vh * 9 / 16))}}
.demo .nextup{text-align:left;margin-top:var(--s5)}