/* ===========================================================================
   Homepage v3. One landing page: header, hero with the demo in a pop-up,
   proof band, outcome tabs, what we exist for, a featured story, community
   and founder, what's included, pricing, stories, a closing band,
   comparisons, footer. Colors and type come from tokens.css only.
   =========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--teal);background:var(--white);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-600)}
a:hover{color:var(--teal-900)}
.v3-wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:32px}
@media (max-width:640px){.v3-wrap{padding-inline:16px}}

/* ---------- buttons ---------- */
.v3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:15px 28px;border-radius:12px;background:var(--cta);color:var(--teal-900);font-weight:var(--w-btn);font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:filter .2s ease,transform .2s ease}
.v3-btn:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--teal-900)}
.v3-btn--lg{min-height:58px;padding:18px 32px;font-size:17px}
.v3-btn--dark{background:var(--teal-900);color:var(--white)}
.v3-btn--dark:hover{color:var(--white)}
.v3-btn--block{display:flex;width:100%}

/* ---------- header ---------- */
.v3-head{background:var(--teal-900);border-bottom:1px solid var(--border-hair)}
.v3-head .v3-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.v3-head img{height:38px;width:auto}
.v3-head nav{display:flex;align-items:center;gap:22px}
.v3-head nav a.v3-signin{color:var(--mist);font-weight:var(--w-med);font-size:15px;text-decoration:none}
.v3-head .v3-btn{min-height:44px;padding:11px 20px;font-size:15px}

/* ---------- hero ---------- */
.v3-hero{background:var(--teal-900);color:var(--white);padding:72px 0 64px;position:relative}
.v3-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:end}
.v3-hero h1{margin:0;font-weight:var(--w-head);font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:var(--ls-tight)}
.v3-hero h1 em{font-style:normal;color:var(--lime)}
.v3-lede{margin:24px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:var(--lh-lede);color:var(--sage-lift);max-width:520px}
.v3-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:36px}
.v3-cta-note{font-size:14px;line-height:1.5;color:var(--sage-lift)}
.v3-shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit;margin-bottom:-120px;position:relative;z-index:2}
.v3-browser{border-radius:16px;overflow:hidden;background:var(--white);border:1px solid rgba(169,192,192,.35);box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.v3-shot-btn:hover .v3-browser{transform:translateY(-6px)}
.v3-browser-bar{height:34px;background:var(--mist);display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--border)}
.v3-browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.v3-browser-bar span{margin-left:12px;font-size:12px;color:var(--teal-600)}
.v3-shot{position:relative}
.v3-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(33,57,57,.28)}
.v3-play span{width:92px;height:92px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;animation:v3pulse 2.4s ease-out infinite}
.v3-shot-cap{margin:14px 4px 0;font-size:13px;color:var(--sage-lift);max-width:520px}
@keyframes v3pulse{0%,100%{box-shadow:0 0 0 0 rgba(178,195,74,.55)}70%{box-shadow:0 0 0 18px rgba(178,195,74,0)}}
@keyframes v3rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.v3-rise{animation:v3rise .55s cubic-bezier(.2,.7,.2,1) both}

/* ---------- video pop-up ---------- */
.v3-dialog{border:0;padding:0;background:transparent;width:min(1040px,92vw);max-width:none;overflow:visible}
.v3-dialog::backdrop{background:rgba(15,28,28,.86)}
.v3-dialog video{width:100%;height:auto;border-radius:16px;background:var(--white)}
.v3-close{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(169,192,192,.4);background:var(--teal-900);color:var(--white);font-size:22px;cursor:pointer;font-family:inherit}

/* ---------- proof band ---------- */
.v3-proof{background:var(--teal);color:var(--white);padding:168px 0 72px}
.v3-proof h2{margin:0;font-weight:var(--w-head);font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.02em;max-width:820px}
.v3-proof h2 em,.v3-dark h2 em{font-style:normal;color:var(--lime)}
.v3-label{margin:18px 0 0;font-size:14px;color:var(--sage-lift)}
.v3-marquee{margin-top:44px;overflow:hidden;border-block:1px solid var(--border-dark);padding:30px 0}
.v3-track{display:flex;gap:56px;width:max-content;animation:v3marquee 48s linear infinite}
.v3-track:hover{animation-play-state:paused}
.v3-track figure{margin:0;display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.v3-track blockquote{margin:0;font-size:22px;font-weight:var(--w-med)}
.v3-track figcaption{font-size:14px;color:var(--lime)}
@keyframes v3marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- shared section heads ---------- */
.v3-sec{padding:var(--band) 0}
.v3-sec--mist{background:var(--mist)}
.v3-dark{background:var(--teal-900);color:var(--white)}
.v3-head-row{display:flex;flex-wrap:wrap;gap:20px 64px;align-items:flex-end;justify-content:space-between}
.v3-h2{margin:0;font-weight:var(--w-head);font-size:clamp(32px,4.4vw,56px);line-height:1.03;letter-spacing:var(--ls-tight);color:var(--teal-900);flex:1 1 480px}
.v3-dark .v3-h2{color:var(--white)}
.v3-aside{margin:0;font-size:17px;line-height:1.6;color:var(--teal-600);flex:0 1 400px}
.v3-dark .v3-aside{color:var(--sage-lift)}

/* ---------- tabs ---------- */
.v3-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;padding:6px;background:var(--mist);border-radius:14px;width:fit-content;max-width:100%}
.v3-tab{border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:var(--w-med);padding:12px 18px;min-height:44px;border-radius:10px;background:transparent;color:var(--teal);transition:background .2s ease,color .2s ease}
.v3-tab[aria-selected="true"]{background:var(--teal-900);color:var(--white);font-weight:var(--w-btn)}
.v3-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;margin-top:44px;align-items:center}
.v3-panel[hidden]{display:none}
.v3-panel h3{margin:0;font-weight:var(--w-btn);font-size:clamp(26px,2.8vw,34px);line-height:1.15;color:var(--teal-900)}
.v3-panel p{margin:18px 0 0;font-size:17px;line-height:1.65;color:var(--teal-600)}
.v3-ticks{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--border)}
.v3-ticks li{padding:14px 0;border-bottom:1px solid var(--border);font-weight:var(--w-med);display:flex;gap:14px;align-items:center}
.v3-ticks li::before{content:"";width:18px;height:3px;background:var(--lime);border-radius:2px;flex:none}
.v3-panel .v3-btn{margin-top:32px}
.v3-panel-img{position:relative}
.v3-panel-img::before{content:"";position:absolute;left:-28px;top:-28px;width:62%;height:70%;background:var(--lime-soft);border-radius:20px}
.v3-panel-img img{position:relative;border-radius:16px;border:1px solid var(--border);box-shadow:0 24px 50px -28px rgba(33,57,57,.45)}

/* ---------- exist ---------- */
.v3-exist{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px 80px}
.v3-exist h2{margin:0;font-weight:var(--w-head);font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:var(--ls-tight);color:var(--teal-900)}
.v3-exist h2 em{font-style:normal;color:var(--lime-deep)}
.v3-exist svg{max-width:360px;margin-top:28px}
.v3-draw{stroke-dasharray:420;animation:v3draw 1.6s ease-out .2s both}
@keyframes v3draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.v3-rows>div{padding:28px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 32px}
.v3-rows>div:first-child{border-top:2px solid var(--teal)}
.v3-rows>div:last-child{border-bottom:1px solid var(--border)}
.v3-rows h3{margin:0;font-size:20px;font-weight:var(--w-btn);color:var(--teal-900)}
.v3-rows p{margin:0;line-height:1.65;color:var(--teal-600)}

/* ---------- featured story ---------- */
.v3-feature blockquote{margin:0;max-width:980px;font-weight:var(--w-btn);font-size:clamp(26px,3.4vw,42px);line-height:1.25;letter-spacing:var(--ls-snug);color:var(--teal-900)}
.v3-feature mark{background:linear-gradient(transparent 62%,var(--lime-soft) 62%);color:inherit}
.v3-who{margin-top:30px;display:flex;align-items:center;gap:16px}
.v3-initials{width:56px;height:56px;border-radius:50%;background:var(--teal);color:var(--lime);font-weight:var(--w-btn);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.v3-who b{font-weight:var(--w-btn);color:var(--teal-900)}

/* ---------- community + founder ---------- */
.v3-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--border-dark)}
.v3-three>div{padding:32px}
.v3-three>div:first-child{padding-left:0}
.v3-three>div+div{border-left:1px solid var(--border-dark)}
.v3-three .v3-num{margin:0;font-size:40px;font-weight:var(--w-head);color:var(--lime);line-height:1}
.v3-three h3{margin:18px 0 0;font-size:21px;font-weight:var(--w-btn)}
.v3-three p{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--sage-lift)}
.v3-founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:48px;align-items:end;margin-top:56px}
.v3-founder .v3-copy{padding-bottom:80px}
.v3-founder .v3-kicker{margin:0;font-size:15px;font-weight:var(--w-med);color:var(--lime)}
.v3-founder h3{margin:12px 0 0;font-weight:var(--w-head);font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.v3-founder p{margin:20px 0 0;font-size:17px;line-height:1.7;color:var(--mist)}
.v3-founder p+p{margin-top:16px}
.v3-founder .v3-sign{color:var(--sage-lift);font-size:15px;margin-top:24px}
.v3-photo{position:relative}
.v3-photo::before{content:"";position:absolute;right:-24px;bottom:0;width:80%;height:86%;background:var(--teal);border-radius:24px 24px 0 0}
.v3-photo img{position:relative;border-radius:24px 24px 0 0}

/* ---------- included ---------- */
.v3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:48px;border-top:2px solid var(--teal)}
.v3-grid>div{padding:26px 28px 28px 0;border-bottom:1px solid var(--border)}
.v3-grid h3{margin:0;font-size:19px;font-weight:var(--w-btn);color:var(--teal-900)}
.v3-grid p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--teal-600)}
.v3-mobile{margin-top:72px;background:var(--mist);border-radius:24px;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:40px;padding:48px 48px 0;overflow:hidden}
.v3-mobile h3{margin:0;font-weight:var(--w-head);font-size:clamp(26px,3vw,36px);line-height:1.12;color:var(--teal-900)}
.v3-mobile p{margin:16px 0 48px;line-height:1.65;color:var(--teal-600)}
.v3-phone{height:380px;border-radius:40px 40px 0 0;border:10px solid var(--teal-900);border-bottom:0;background:var(--white);overflow:hidden}
.v3-phone i{display:block;width:70px;height:18px;background:var(--teal-900);border-radius:0 0 12px 12px;margin:0 auto}
.v3-phone img{width:520px;max-width:none;margin:10px 0 0 -8px}

/* ---------- pricing ---------- */
.v3-price{background:var(--teal);color:var(--white)}
.v3-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:52px}
.v3-card{border-radius:20px;padding:40px;position:relative}
.v3-card--dark{background:var(--teal-900);border:1px solid var(--border-dark)}
.v3-card--light{background:var(--white);color:var(--teal-900)}
.v3-card h3{margin:0;font-size:20px;font-weight:var(--w-btn)}
.v3-amt{margin:20px 0 0;display:flex;align-items:baseline;gap:8px}
.v3-amt b{font-size:64px;font-weight:var(--w-head);letter-spacing:-.03em;line-height:1}
.v3-amt span,.v3-card .v3-sub{font-size:15px;color:var(--sage-lift)}
.v3-card--light .v3-amt span,.v3-card--light .v3-sub{color:var(--teal-600)}
.v3-sub{margin:12px 0 0}
.v3-card .v3-btn{margin-top:30px}
.v3-pill{position:absolute;top:40px;right:40px;font-size:13px;font-weight:var(--w-btn);background:var(--lime-soft);color:var(--teal-900);padding:6px 12px;border-radius:999px}
.v3-incl{margin-top:36px;padding-top:28px;border-top:1px solid var(--border-dark);display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;color:var(--mist)}
.v3-incl b{color:var(--lime);font-weight:var(--w-med)}

/* ---------- stories ---------- */
.v3-stories{columns:3 300px;column-gap:24px;margin-top:48px}
.v3-stories figure{margin:0 0 24px;break-inside:avoid;padding:30px;border-radius:18px;background:var(--mist)}
.v3-stories figure.lime{background:var(--lime-soft)}
.v3-stories figure.line{background:var(--white);border:1px solid var(--border)}
.v3-stories blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--teal-900)}
.v3-stories figcaption{margin-top:22px;display:flex;align-items:center;gap:14px}
.v3-stories figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.v3-stories .v3-initials{width:48px;height:48px;font-size:15px}
.v3-stories figcaption span{display:flex;flex-direction:column;font-size:13px;color:var(--teal-600)}
.v3-stories figcaption b{font-size:15px;color:var(--teal-900)}

/* ---------- closing band ---------- */
.v3-close-band .v3-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.v3-close-band p{margin:22px 0 0;font-size:18px;line-height:1.65;color:var(--teal-600);max-width:480px}
.v3-close-band .v3-btn{margin-top:34px}
.v3-collage{position:relative;min-height:460px}
.v3-collage>img{width:78%;height:440px;object-fit:cover;border-radius:24px;margin-left:auto}
.v3-collage figure{position:absolute;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--white);box-shadow:0 24px 48px -24px rgba(33,57,57,.55)}
.v3-collage .a{left:0;bottom:150px;width:42%}
.v3-collage .b{left:8%;bottom:-10px;width:40%}

/* ---------- compare ---------- */
.v3-compare{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px 80px}
.v3-compare h2{margin:0;font-weight:var(--w-head);font-size:clamp(32px,4vw,48px);line-height:1.05;color:var(--teal-900)}
.v3-compare>div>p{margin:16px 0 0;color:var(--teal-600)}
.v3-qs{border-top:2px solid var(--teal)}
.v3-qs details{border-bottom:1px solid var(--border)}
.v3-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;min-height:44px;font-size:19px;font-weight:var(--w-btn);color:var(--teal-900)}
.v3-qs summary::-webkit-details-marker{display:none}
.v3-qs summary::after{content:"+";font-size:28px;font-weight:400;color:var(--lime-deep);transition:transform .25s ease}
.v3-qs details[open] summary::after{transform:rotate(45deg)}
.v3-qs p{margin:0 0 26px;line-height:1.7;color:var(--teal-600);max-width:620px}

/* ---------- final call to action ---------- */
.v3-final{padding:0 0 var(--band)}
.v3-final-card{position:relative;border-radius:28px;overflow:hidden;background:var(--teal-900);min-height:480px;display:flex;align-items:center;justify-content:flex-end}
.v3-final-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% 40%}
.v3-final-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,rgba(33,57,57,.96) 0%,rgba(33,57,57,.88) 40%,rgba(33,57,57,.2) 66%,rgba(33,57,57,0) 100%)}
.v3-final-copy{position:relative;z-index:2;max-width:560px;padding:64px}
.v3-final h2{margin:0;color:var(--white);font-weight:var(--w-head);font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:var(--ls-tight)}
.v3-final-copy>p{margin:20px 0 0;font-size:18px;line-height:1.6;color:var(--mist)}
.v3-final .v3-btn{margin-top:32px}
.v3-final-copy .v3-final-note{margin-top:12px;font-size:14px;color:var(--sage-lift)}
@media (max-width:900px){
  .v3-final-card{min-height:0;flex-direction:column;align-items:stretch}
  .v3-final-card>img{position:relative;height:300px;object-position:70% 35%}
  .v3-final-card::before{display:none}
  .v3-final-copy{padding:32px 24px 36px;max-width:none}
}

/* ---------- footer ---------- */
.v3-foot{background:var(--teal-900);color:var(--sage-lift);padding:72px 0 40px}
.v3-foot-top{display:flex;flex-wrap:wrap;gap:40px 64px;justify-content:space-between;padding-bottom:48px;border-bottom:1px solid var(--border-dark)}
.v3-foot-brand{flex:1 1 260px}
.v3-foot-brand img{height:40px;width:auto}
.v3-foot-brand p{margin:18px 0 0;font-size:15px;max-width:300px}
.v3-social{display:flex;gap:16px;margin-top:20px}
.v3-social a{color:var(--sage-lift);display:inline-flex;min-width:44px;min-height:44px;align-items:center}
.v3-foot nav{display:flex;flex-direction:column;gap:12px;font-size:15px}
.v3-foot nav b{color:var(--white);font-weight:var(--w-btn)}
.v3-foot a{color:var(--sage-lift);text-decoration:none}
.v3-foot a:hover{color:var(--white)}
.v3-foot-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-top:28px;font-size:13px}
.v3-foot-bottom span:last-child{display:flex;gap:24px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .v3-hero-grid,.v3-panel,.v3-exist,.v3-founder,.v3-close-band .v3-wrap,.v3-compare{grid-template-columns:minmax(0,1fr)}
  .v3-three{grid-template-columns:minmax(0,1fr)}
  .v3-three>div{padding:28px 0}
  .v3-three>div+div{border-left:0;border-top:1px solid var(--border-dark)}
  .v3-cards{grid-template-columns:minmax(0,1fr)}
  .v3-mobile{grid-template-columns:minmax(0,1fr);padding:32px 24px 0}
  .v3-phone{margin:0 auto;width:260px}
  .v3-rows>div{grid-template-columns:minmax(0,1fr)}
  .v3-founder .v3-copy{padding-bottom:0}
  .v3-photo::before{right:-8px}
  .v3-collage{min-height:380px}
  .v3-collage>img{height:360px}
}
@media (max-width:640px){
  .v3-hero{padding-top:48px}
  .v3-shot-btn{margin-bottom:-80px}
  .v3-proof{padding-top:120px}
  .v3-card{padding:28px}
  .v3-pill{position:static;display:inline-block;margin-bottom:14px}
  .v3-head nav{gap:14px}
  .v3-track blockquote{font-size:18px}
  .v3-panel-img::before{left:-10px;top:-10px}
}
@media (prefers-reduced-motion:reduce){
  .v3-track,.v3-rise,.v3-draw,.v3-play span{animation:none}
  html{scroll-behavior:auto}
}

/* One plan: a single centered card. */
.v3-cards--one{grid-template-columns:minmax(0,560px);justify-content:center}