/* Lua Ventures site, app-frame build (2026-10-15).
   Every value is the Lua Social app's own (src/theme.ts, src/components/ui.tsx, src/lib/motion.ts) unless a
   comment says "site patch" (the three small-text contrast fixes in direction.md section 2a). */

/* ---------- tokens ---------- */
:root{
  --bg:#EFEDE5; --card:#FFFFFF; --sunk:#E7E4DA; --line:#E2DED3; --line2:#EEEBE3;
  --ink:#121C17; --dim:#4C5852; --faint:#636D67;
  --primary:#159A55; --primary-dark:#0C5E36; --primary-text:#11804A;
  --brand-canvas:#0C5E36;   /* site patch: small green text on the canvas (#11804A is 4.26:1 there) */
  --pill-text:#0C5E36;      /* site patch: pill labels on wash (#11804A on wash is 4.31:1) */
  --wash:#E3F2E9; --tint:#BFE3CE;
  --hero-top:#083D23; --hero-bottom:#159A55;
  --bad:#B3261E; --bad-wash:#FBE8E6; --warn:#9A5800; --warn-wash:#FFF1D6; --star:#F2A900;
  --google:#4285F4; --facebook:#1877F2; --instagram:#D62976;
  --card-line:rgba(18,28,23,.05);
  --sh-sm:0 1px 2px rgba(18,28,23,.06),0 2px 8px rgba(18,28,23,.05);
  --sh-md:0 1px 2px rgba(18,28,23,.06),0 8px 24px rgba(18,28,23,.08);
  --sh-lg:0 2px 6px rgba(18,28,23,.10),0 18px 40px rgba(18,28,23,.16);
  /* site patch: white on #159A55 is 3.63:1, so filled buttons run #11804A to #0C5E36 */
  --btn-grad:linear-gradient(180deg,#11804A,#0C5E36);
  /* bands: small text lives above the last 96px, where the gradient is #083D23 to #0C5E36 */
  --band:linear-gradient(180deg,#083D23 0%,#0C5E36 calc(100% - 96px),#159A55 100%);
  --band-app:linear-gradient(180deg,#083D23 0%,#0C5E36 72%,#11804A 100%);
  --f-head:"Urbanist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease-q:cubic-bezier(.25,.46,.45,.94);  /* easeOut quad: press */
  --ease-c:cubic-bezier(.215,.61,.355,1);  /* easeOut cubic: push, rise */
  --spring:cubic-bezier(.34,1.56,.64,1);   /* pick badge, Sent check */
  --slide:cubic-bezier(.22,1.2,.36,1);     /* SLIDE spring, Appearance thumb */
  --gut:18px; --maxw:1200px;
  color-scheme:light;
}
/* 2026-11-01: one light look only (Kaden). The dark palette and the Appearance switch are gone. */
@media (min-width:640px){:root{--gut:32px}}
@media (min-width:1024px){:root{--gut:48px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17.5px/27px var(--f-body);overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .2s,color .2s}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-head);text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}
.topbar :focus-visible,.band :focus-visible,.sheet :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#0C5E36;padding:12px 18px;border-radius:12px;
  font:700 16px var(--f-head);text-decoration:none;box-shadow:var(--sh-md)}
.skip:focus{top:12px}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.read{max-width:640px}

/* ---------- type ---------- */
.h1{font:800 clamp(2.6rem,6.4vw,5.25rem)/.98 var(--f-head);letter-spacing:-.03em}
.h2{font:800 clamp(2rem,4vw,3.25rem)/1.04 var(--f-head);letter-spacing:-.025em}
.h3{font:700 20px/25px var(--f-head);letter-spacing:-.2px}
.lede{font-size:clamp(17.5px,1.6vw,20px);line-height:1.5}
.small{font:500 14px/19px var(--f-body);color:var(--dim)}
.faint{color:var(--faint)}
.eyebrow{font:700 12.5px/1.2 var(--f-head);text-transform:uppercase;letter-spacing:1.1px;color:var(--faint)}
.tnum{font-variant-numeric:tabular-nums}
.lnk{color:var(--brand-canvas);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:opacity .16s var(--ease-q)}
.lnk:active{opacity:.55;transition-duration:.07s}
.card .lnk{color:var(--primary-text)}
.lnk-arrow{display:inline-flex;align-items:center;gap:6px}
.lnk-arrow .ic{width:18px;height:18px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:16px;border:0;
  font:700 17px/1.1 var(--f-head);letter-spacing:.1px;text-decoration:none;cursor:pointer;text-align:center;
  -webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease-q),opacity .16s var(--ease-q),background-color .16s}
.btn:active{transform:scale(.97);transition-duration:.07s}
.btn .ic{width:20px;height:20px}
.btn-primary{background:var(--btn-grad);color:#fff;box-shadow:var(--sh-sm)}
.btn-light{background:#fff;color:#0C5E36;box-shadow:var(--sh-sm)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-soft{background:var(--wash);color:var(--pill-text);box-shadow:inset 0 0 0 1px var(--tint)}
.btn-frost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-sm{min-height:44px;padding:0 18px;font-size:16px;border-radius:14px}
.btn-block{width:100%}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* the video as a quiet link beside the one main button (2026-11-01) */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:var(--wash);color:var(--pill-text);
  font:700 12.5px/1.3 var(--f-head);white-space:nowrap}
.pill .ic{width:13px;height:13px}
.pill-band{background:rgba(255,255,255,.16);color:#fff;font-size:13px}
.pill-sunk{background:var(--sunk);color:var(--dim)}
.pill-solid{background:var(--btn-grad);color:#fff;font-size:11px;padding:2px 7px}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--sh-md);border:1px solid var(--card-line)}
.card-lg{padding:clamp(20px,3vw,32px)}

/* ---------- site top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--hero-top);color:#fff}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:56px}
.wm{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:#fff;text-decoration:none;--wm:30px}
.wm b{font:800 var(--wm)/calc(var(--wm) * .92) var(--f-head);letter-spacing:-.03em}
.wm i{font:700 calc(var(--wm) * .277)/1 var(--f-head);font-style:normal;letter-spacing:.09em;margin-right:-.09em;margin-top:calc(var(--wm) * .05)}
.topbar .wm{--wm:27px;margin-right:auto;padding:4px 0}
.nav{display:none;gap:4px}
.nav a{color:rgba(255,255,255,.94);text-decoration:none;font:700 16px/1 var(--f-head);padding:12px 12px;border-radius:12px;transition:opacity .16s var(--ease-q)}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.12)}
.tb-tel{display:none;color:#fff;text-decoration:none;font:700 16px/1 var(--f-head);align-items:center;gap:8px;padding:12px 6px}
.tb-tel .ic{width:18px;height:18px}
.tb-cta{display:none}
.round{width:46px;height:46px;border-radius:99px;display:inline-grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer;text-decoration:none;transition:transform .16s var(--ease-q)}
.round:active{transform:scale(.94);transition-duration:.07s}
.round .ic{width:21px;height:21px}
@media (min-width:1024px){
  .topbar .wrap{height:64px}
  .topbar .wm{--wm:30px}
  .nav{display:flex}
  .tb-tel{display:inline-flex}
  .tb-cta{display:inline-flex}
  .tb-round{display:none}
}
/* mobile menu sheet */
.sheet{position:fixed;inset:0;z-index:70;background:var(--band);color:#fff;display:none;flex-direction:column;padding:0 var(--gut) 32px;overflow-y:auto}
.sheet.open{display:flex}
.sheet-top{display:flex;align-items:center;height:56px;justify-content:space-between}
.sheet nav{display:flex;flex-direction:column;margin:28px 0 32px}
.sheet nav a{font:800 32px/1.15 var(--f-head);letter-spacing:-.02em;color:#fff;text-decoration:none;padding:10px 0}
.sheet .btn{width:100%;margin-top:10px}
.sheet .small{color:rgba(255,255,255,.9);margin-top:18px;text-align:center}
body.menu-open{overflow:hidden}
body.menu-open chat-widget,body.menu-open #chat-widget,body.menu-open .lc_text-widget,body.menu-open [id^="lc_"],body.menu-open iframe[src*="leadconnectorhq"]{display:none!important}

/* ---------- bands ---------- */
.band{background:var(--band);color:#fff;border-radius:0 0 30px 30px}
.band .lede,.band p{color:rgba(255,255,255,.94)}
.band .kicker{font:600 15px/1.35 var(--f-head);color:rgba(255,255,255,.94)}
.band .h1 em,.band .h2 em{font-style:normal;color:#BFE3CE}
/* light cards that sit in a band keep their own ink (the band's white p rule hid the reviews.html sample quote) */
.band .snip p,.band .revcard p{color:inherit}.band .revcard .revtext{color:var(--dim)}
.band-page{padding:40px 0 56px}
.band-page .h1{margin-top:14px;max-width:16ch}
.band-page .lede{margin-top:18px;max-width:40ch}
.band-page .row-btns{margin-top:28px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 8px;border-radius:99px;color:#fff;text-decoration:none;
  font:700 15px/1 var(--f-head);background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.back .ic{width:20px;height:20px}

/* ---------- sections ---------- */
.sec{padding-block:72px}
@media (min-width:1024px){.sec{padding-block:112px}}
.sec-head{margin-bottom:24px}
.sec-head p{margin-top:14px;color:var(--dim);max-width:56ch}
.pts{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.pts li{display:flex;gap:10px;align-items:flex-start}
.pts .ic{width:20px;height:20px;color:var(--brand-canvas);margin-top:4px}
.src{font:500 16px/24px var(--f-body);color:var(--dim);margin-top:16px}

/* ---------- home: hero + the day ---------- */
.day-grid{display:grid;grid-template-columns:[full-start] var(--gut) [main-start] minmax(0,1fr) [main-end] var(--gut) [full-end];position:relative}
.hero-bg{grid-column:full-start/full-end;grid-row:1;background:var(--band);border-radius:0 0 30px 30px}
.hero-copy{grid-column:main-start/main-end;grid-row:1;color:#fff;padding:36px 0 150px;position:relative;z-index:1}
.hero-copy .h1{margin-top:16px;max-width:13ch}
.hero-copy .lede{margin-top:20px;color:rgba(255,255,255,.94);max-width:46ch}
.hero-copy .row-btns{margin-top:28px}
.hero-copy .terms{margin-top:18px;font:500 15px/22px var(--f-body);color:rgba(255,255,255,.94);max-width:46ch}
.rail{grid-column:main-start/main-end;grid-row:2;margin-top:-118px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.phone-cap{font:500 14px/19px var(--f-body);color:var(--faint);text-align:center;max-width:300px;margin-top:14px}
.day-main{grid-column:main-start/main-end;grid-row:3;padding-top:56px}
.day-intro{max-width:640px}
.day-intro p{margin-top:14px;color:var(--dim)}
.beat{padding-block:56px;border-top:1px solid var(--line)}
.beat:first-of-type{border-top:0}
.clock{font:600 15px/20px var(--f-body);color:var(--dim);font-variant-numeric:tabular-nums;margin:0 0 10px}
.beat .h2{max-width:15ch}
.beat-body{margin-top:16px;max-width:600px;color:var(--ink)}
.beat .more{margin-top:18px}
.beat-screens{margin-top:8px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px var(--gut) 80px;margin-bottom:-56px;margin-inline:calc(-1 * var(--gut));scrollbar-width:none}
.beat-screens::-webkit-scrollbar{display:none}
.beat-screens>*{scroll-snap-align:center;flex:none}
.beat-screens>:first-child{margin-left:auto}.beat-screens>:last-child{margin-right:auto}
@media (min-width:1024px){
  .day-grid{grid-template-columns:[full-start] minmax(var(--gut),1fr) [main-start] minmax(0,760px) [main-end] minmax(40px,100px) [rail-start] 340px [rail-end] minmax(var(--gut),1fr) [full-end]}
  .hero-copy{grid-column:main-start/main-end;padding:64px 0 96px;align-self:start}
  .rail{grid-column:rail-start/rail-end;grid-row:1/4;margin-top:0;padding-top:58px;display:block}
  .phone-sticky{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center}
  .day-main{grid-row:2;padding-top:72px}
  .beat{min-height:min(76vh,760px);display:flex;flex-direction:column;justify-content:center;padding-block:72px}
  .beat-screens{display:none}
}

/* weekly bars (no longer used on the home page) */
.bars-set{margin-top:22px;display:grid;gap:18px}
.bars-row{border-radius:12px}
.bars-row:focus-visible{outline-offset:6px}
.bars-label{display:flex;justify-content:space-between;gap:12px;font:700 14px/18px var(--f-head);color:var(--ink);margin-bottom:8px}
.bars-label span{font:500 13.5px/18px var(--f-body);color:var(--faint)}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;height:68px;align-items:end;border-bottom:1px solid var(--line)}
.bar{position:relative;height:calc(var(--v) * 10%);min-height:3px;background:var(--primary);border-radius:4px 4px 0 0}
.bar b{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);font:700 12px/1 var(--f-head);color:var(--ink);opacity:0;
  transition:opacity .16s var(--ease-q);pointer-events:none;font-variant-numeric:tabular-nums}
.bar:hover b,.bars-row:focus-visible .bar b,.bars-row:focus-within .bar b{opacity:1}
.axis{font:500 13.5px/18px var(--f-body);color:var(--faint);margin-top:4px}

/* list cards, rows (the price card and its .price-grid/.terms-line are gone, 2026-11-01 F20) */
.tier{font:700 18px/1.2 var(--f-head);color:var(--brand-canvas)}
.card .tier{color:var(--primary-text)}
.amount{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.amount small{font:700 20px/1 var(--f-head);color:var(--dim)}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;line-height:24px}
.checks .ic{width:20px;height:20px;color:var(--primary-text);margin-top:2px}
.math{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.math div{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:2px solid var(--line)}
.math div:last-child{border-top-color:var(--primary)}
.math span{font:500 14px/19px var(--f-body);color:var(--dim)}
.math b{font:800 clamp(24px,3vw,34px)/1 var(--f-head);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.math-line{font:700 clamp(22px,2.4vw,28px)/1.2 var(--f-head);letter-spacing:-.3px;margin-top:18px}
.lcard{background:var(--card);border-radius:22px;box-shadow:var(--sh-md);border:1px solid var(--card-line);padding:4px 0;overflow:hidden}
.lrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:16px 18px;position:relative}
.lrow+.lrow::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--line2)}
.lrow .when{font:700 15px/22px var(--f-head);color:var(--primary-text);font-variant-numeric:tabular-nums}
.lrow h3{font:700 17px/22px var(--f-head)}
.lrow>div:only-child{grid-column:1/-1}
.lrow p{color:var(--dim);font-size:16px;line-height:23px;margin-top:3px}
@media (max-width:480px){.lrow{grid-template-columns:1fr;gap:4px}}
/* recent updates, one plain list per month */
.upd-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px 56px;margin-top:28px;max-width:860px}
.upd-months .h3{color:var(--primary-text)}
.upd-list{list-style:none;padding:0;margin-top:10px}
.upd-list li{font:600 17px/24px var(--f-head);padding:5px 0}
/* team */
.team{display:grid;gap:22px}
@media (min-width:900px){.team{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}}
.photo{border-radius:22px;overflow:hidden;box-shadow:var(--sh-md);background:var(--sunk);aspect-ratio:3/4;max-height:620px}
.photo img{width:100%;height:100%;object-fit:cover}
figure{margin:0}
figcaption{margin-top:10px}
.chatcard{margin-top:22px;padding:0;overflow:hidden}
.chatcard-head{display:flex;align-items:center;gap:14px;padding:16px;border-bottom:1px solid var(--line2)}
.chatcard-head img{width:84px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.chatcard-head b{display:block;font:700 17.5px/22px var(--f-head)}
.chatcard-body{padding:16px}
.chatcard-body .row-btns{margin-top:12px}
.chatcard-body .btn{flex:1 1 140px}
/* faq */
.faq{background:var(--card);border-radius:22px;box-shadow:var(--sh-md);border:1px solid var(--card-line);overflow:hidden}
.faq details{position:relative}
.faq details+details::before{content:"";position:absolute;top:0;left:18px;right:0;height:1px;background:var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;min-height:60px;
  font:700 17.5px/1.3 var(--f-head);transition:background-color .16s var(--ease-q)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:active{background:var(--sunk)}
.faq summary .ic{width:20px;height:20px;color:var(--faint);transition:transform .24s var(--ease-c)}
.faq details[open] summary .ic{transform:rotate(90deg)}
.faq .ans{padding:0 18px 20px;color:var(--dim);max-width:68ch}
.faq .ans a{color:var(--primary-text);font-weight:600}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .24s var(--ease-c),content-visibility .24s allow-discrete}
  .faq details[open]::details-content{height:auto}
}
.two-col{display:grid;gap:28px}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}}

/* ---------- footer ---------- */
.foot{background:var(--sunk);padding:56px 0 132px;color:var(--dim);font-size:15px;line-height:23px}
@media (min-width:768px){.foot{padding-bottom:64px}}
.foot .wm{--wm:44px;color:var(--faint);margin-top:12px}
.foot-grid{display:grid;gap:28px}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}}
.foot .who{margin-top:10px;font:500 14px/19px var(--f-body)}
.nap{margin-top:14px;color:var(--ink)}
.nap a{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px}
.foot-links a{color:var(--ink);text-decoration:none;font:700 15px/1 var(--f-head);padding:10px 0}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}
.appearance{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.appearance>span{font:700 15px/1 var(--f-head);color:var(--ink)}
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:99px;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 14px;
  border:0;background:none;border-radius:99px;color:var(--dim);font:700 14px/1 var(--f-head);cursor:pointer;transition:color .2s}
.seg button .ic{width:16px;height:16px}
.seg button[aria-pressed="true"]{color:#fff}
.seg .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:99px;background:var(--btn-grad);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .3s var(--slide)}
.legal-line{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font:500 13.5px/20px var(--f-body);color:var(--dim)}

/* ---------- phone action bar ---------- */
/* 2026-11-01 (F15): one row, the button only; the 84px on the right is the chat launcher's slot (js/site.js sync()) */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-top:1px solid var(--line2);display:flex;align-items:center;
  padding:10px 84px calc(10px + env(safe-area-inset-bottom)) 18px;transform:translateY(110%);transition:transform .24s var(--ease-c)}
.actionbar.on{transform:none}
.actionbar .btn{flex:1;min-width:0}
@media (min-width:768px){.actionbar{display:none}}

/* ---------- inner pages ---------- */
.overlap{margin-top:0;position:relative;z-index:2}
.svc-list{display:grid;gap:18px}
.tiers{display:grid;gap:18px}
@media (min-width:1100px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.tiercard{display:flex;flex-direction:column;gap:6px;padding:24px}
.tiercard.rec{box-shadow:var(--sh-lg);outline:2px solid var(--primary);outline-offset:-2px}
@media (min-width:1100px){.tiercard.rec{transform:translateY(-14px)}}
.tiercard h2{font:800 22px/1.2 var(--f-head);letter-spacing:-.3px;margin-top:8px}
.tiercard .plus{font:500 15px/21px var(--f-body);color:var(--dim);margin-top:2px}
.tiercard .btn{margin-top:20px}
.tiercard .note{font:500 14.5px/21px var(--f-body);color:var(--dim);margin-top:14px}
/* 2026-10-15: Ad Management is an add-on on top of any plan, shown as one wide card under the three tiers */
.tiercard.addon{margin-top:18px;display:grid;gap:8px 32px;padding:24px}
.tiercard.addon .checks{margin-top:0}
.tiercard.addon .btn{align-self:start;justify-self:start}
@media (min-width:860px){.tiercard.addon{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;padding:28px 32px}}
.story p+p{margin-top:16px}
.prose h2{font:800 clamp(26px,3vw,34px)/1.12 var(--f-head);letter-spacing:-.5px;margin:0 0 12px}
.prose p{margin:0 0 16px}
.prose p+h2,.prose ul+h2,.prose ol+h2{margin-top:32px}
.legal{max-width:720px;margin-inline:auto;font-size:16.5px;line-height:26px}
.legal h2{font:800 24px/1.2 var(--f-head);letter-spacing:-.3px;margin:30px 0 10px}
.legal p,.legal li{margin:0 0 14px}
.legal a{color:var(--primary-text);font-weight:600}
.legal .legal__date{color:var(--faint);font-weight:500}
.empty{max-width:560px;margin-inline:auto;text-align:center;padding:36px 24px}
.empty .eico{width:66px;height:66px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center;margin:0 auto 16px}
.empty .eico .ic{width:30px;height:30px}
.empty h2{font:800 28px/32px var(--f-head);letter-spacing:-.5px}
.empty p{margin-top:10px;color:var(--dim)}
.empty .row-btns{justify-content:center;margin-top:22px}

/* qualify (the app's sign-in screen at page scale) */
.q-band{padding:36px 0 48px;text-align:center}
.q-band .wm{--wm:78px}
.q-band .h1{margin:22px auto 0;font-size:clamp(2.4rem,6vw,4.4rem)}
.q-band p{margin-top:12px}
.q-sheet{max-width:640px;margin:-80px auto 0;position:relative;z-index:2;border-radius:30px;padding:clamp(20px,4vw,30px);box-shadow:var(--sh-lg)}
.q-sheet fieldset{border:0;padding:0;margin:0 0 18px}
.q-sheet legend{font:700 16px/22px var(--f-head);margin-bottom:10px;padding:0}
.qchips{display:flex;flex-wrap:wrap;gap:8px}
.qchips label{position:relative}
.qchips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qchips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;background:var(--card);
  box-shadow:inset 0 0 0 1.5px var(--line);font:700 15px/1 var(--f-head);color:var(--ink);transition:transform .16s var(--ease-q),background-color .16s}
.qchips input:checked+span{background:var(--btn-grad);color:#fff;box-shadow:none}
.qchips input:focus-visible+span{outline:2px solid var(--primary-text);outline-offset:2px}
.qchips label:active span{transform:scale(.97)}
.qsell{font:500 15px/22px var(--f-body);color:var(--dim);margin:-6px 0 18px}
.qsell b{color:var(--ink)}
.field{display:block;margin-bottom:16px;font:700 16px/22px var(--f-head)}
.field input,.field select{display:block;width:100%;margin-top:8px;min-height:56px;padding:0 16px;border-radius:16px;border:1.5px solid var(--line);
  background:var(--sunk);color:var(--ink);font:500 17px/1.2 var(--f-body);-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary-text);box-shadow:0 0 0 3px var(--wash)}
.field [aria-invalid="true"]{border-color:var(--bad)}
.phonefield{display:flex;margin-top:8px;min-height:60px;border-radius:16px;border:1.5px solid var(--line);background:var(--sunk);overflow:hidden}
.phonefield:focus-within{border-color:var(--primary-text);box-shadow:0 0 0 3px var(--wash)}
.phonefield .cc{display:grid;place-items:center;padding:0 14px;font:700 17px/1 var(--f-head);color:var(--dim);border-right:1.5px solid var(--line)}
.phonefield input{margin:0;border:0;border-radius:0;min-height:58px;background:transparent;box-shadow:none!important}
.phonefield:has([aria-invalid="true"]){border-color:var(--bad)}
.q2{display:grid;gap:0 14px}
@media (min-width:560px){.q2{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:12px;align-items:flex-start;font:500 14px/20px var(--f-body);color:var(--dim);margin:6px 0 18px;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:0;accent-color:#0C5E36}
.consent a{color:var(--primary-text);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.qerr{background:var(--bad-wash);color:var(--bad);border-radius:14px;padding:12px 14px;font:600 15px/21px var(--f-body);margin-bottom:14px}
.qerr a{color:inherit;font-weight:700}
.qfine{display:block;font:500 14px/20px var(--f-body);color:var(--dim);margin-top:14px;text-align:center}
.qdone{text-align:center;padding:12px 4px}
.qdone:focus{outline:none}
.qdone .chk{width:96px;height:96px;border-radius:99px;background:var(--btn-grad);display:grid;place-items:center;margin:8px auto 18px;box-shadow:var(--sh-md);
  animation:pop .32s var(--spring) both}
.qdone .chk .ic{width:46px;height:46px;color:#fff}
.qdone h2{font:800 32px/36px var(--f-head);letter-spacing:-.5px;animation:rise8 .26s var(--ease-c) .04s both}
.qdone p{margin-top:10px;color:var(--dim);font-size:17px;line-height:24px;animation:rise8 .26s var(--ease-c) .08s both}
.q-after{max-width:640px;margin:40px auto 0}
.q-after h2{font:800 26px/1.15 var(--f-head);letter-spacing:-.4px;margin-bottom:14px}
.q-after .fits{margin-top:28px}
.q-after .fits p{color:var(--dim);margin-top:6px}

/* screen snippet cards (services, systems pages) */
.snip{background:var(--card);border-radius:22px;box-shadow:var(--sh-lg);border:1px solid var(--card-line);overflow:hidden;width:100%;max-width:420px;
  font-family:var(--f-body);color:var(--ink);justify-self:center}
.snip-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.snip-head .av{width:40px;height:40px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center;font:700 17px/1 var(--f-head)}
.snip-head .av .ic{width:20px;height:20px}
.snip-head b{display:block;font:700 16.5px/20px var(--f-head)}
.snip-head small{font:500 13px/17px var(--f-body);color:var(--dim)}
.snip-head .pill{margin-left:auto}
.snip-body{padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.snip-foot{padding:10px 16px;font:500 13px/18px var(--f-body);color:var(--dim);display:flex;gap:8px;align-items:center;border-top:1px solid var(--line2)}
.snip-foot .ic{width:15px;height:15px;color:var(--primary-text)}
.bub{max-width:84%;padding:10px 14px;border-radius:22px;font:400 16px/22px var(--f-body)}
.bub.them{align-self:flex-start;background:var(--card);border-bottom-left-radius:6px;box-shadow:var(--sh-sm);border:1px solid var(--card-line)}
.bub.us{align-self:flex-end;background:var(--btn-grad);color:#fff;border-bottom-right-radius:6px}
.bub-note{align-self:flex-end;font:600 12.5px/1 var(--f-head);color:var(--dim);display:inline-flex;gap:5px;align-items:center}
.bub-note .ic{width:13px;height:13px;color:var(--primary-text)}
.callpill{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--bad-wash);color:var(--bad);font:700 13px/1 var(--f-head)}
.callpill .ic{width:14px;height:14px}
.daylabel{align-self:center;font:600 12.5px/1 var(--f-head);color:var(--faint);padding:4px 0}
.formcard{align-self:flex-start;max-width:88%;background:var(--card);border-radius:18px;border:1px solid var(--line);padding:12px 14px;font:400 15px/21px var(--f-body)}
.formcard b{display:block;font:700 14px/1.2 var(--f-head);color:var(--primary-text);margin-bottom:6px}
.revcard{background:var(--card);border-radius:22px;box-shadow:var(--sh-sm);border:1px solid var(--card-line);padding:16px}
.revtop{display:flex;align-items:center;gap:12px}
.revav{width:40px;height:40px;border-radius:99px;background:var(--sunk);color:var(--dim);display:grid;place-items:center;font:800 17px/1 var(--f-head);flex:none}
.revtop b{font:700 16px/20px var(--f-head)}
.stars{display:inline-flex;gap:1px;color:var(--star)}
.stars .ic{width:13px;height:13px}
.revtext{margin-top:10px;font:400 15px/21px var(--f-body);color:var(--dim)}
.browser{background:var(--card)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--sunk);border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:99px;background:var(--line);display:block}
.browser-bar span{flex:1;margin-left:6px;background:var(--card);border-radius:99px;padding:5px 12px;font:500 12.5px/1 var(--f-body);color:var(--dim)}
.site-mock{padding:18px}
.site-mock .sm-nav{display:flex;justify-content:space-between;align-items:center;font:800 15px/1 var(--f-head)}
.site-mock .sm-call{background:var(--btn-grad);color:#fff;border-radius:10px;padding:7px 10px;font:700 12px/1 var(--f-head)}
.site-mock .sm-hero{margin-top:16px;border-radius:16px;padding:18px;color:#fff;background:linear-gradient(135deg,#29475A,#3D6A6E 60%,#7A9E8C)}
.site-mock .sm-hero b{display:block;font:800 22px/1.1 var(--f-head);letter-spacing:-.3px}
.site-mock .sm-hero span{display:block;margin-top:8px;font:500 13px/18px var(--f-body);opacity:.92}
.site-mock .sm-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.site-mock .sm-rows div{background:var(--sunk);border-radius:12px;padding:10px;font:700 12.5px/1.25 var(--f-head)}
.site-mock .sm-rev{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 12.5px/1 var(--f-head);color:var(--dim)}
.tabstrip{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:14px 8px 12px;background:var(--card)}
.tabstrip>span{display:flex;flex-direction:column;align-items:center;gap:5px;font:700 12.5px/1 var(--f-head);color:var(--faint);position:relative}
.tabstrip>span .ic{width:24px;height:24px}
.tabstrip .on{color:var(--primary-text)}
.tabstrip .raise{width:56px;height:56px;border-radius:99px;background:var(--btn-grad);color:#fff;display:grid;place-items:center;border:5px solid var(--card);
  box-shadow:var(--sh-md);margin:-30px auto 0;box-sizing:content-box}
.tabstrip .raise .ic{width:27px;height:27px}
.tabstrip .bdg{position:absolute;top:-8px;left:calc(50% + 4px)}
.tablist{padding:6px 16px 14px;display:grid;gap:2px}
.tablist div{display:flex;gap:10px;font:500 14.5px/20px var(--f-body);color:var(--dim)}
.tablist b{font:700 14.5px/20px var(--f-head);color:var(--ink);min-width:86px}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rise8{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes popb{from{transform:scale(.5)}to{transform:scale(1)}}
@keyframes push{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pushback{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.15s!important;animation-name:fade!important;transition-duration:0s!important;scroll-behavior:auto!important}
  .btn:active,.round:active,.qchips label:active span{transform:none}
  .btn:active{opacity:.8}
}

/* =====================================================================================================
   The phone: Lua Social rebuilt in HTML/CSS. A 390 x 844 screen inside a 10px bezel, scaled as one unit
   with --s so every inner size stays the app's own (spec sections 2, 3, 7, 8, 9).
   ===================================================================================================== */
.phone-wrap{--s:.72;width:calc(410px * var(--s));height:calc(864px * var(--s));position:relative;flex:none}
@media (min-width:640px){.phone-wrap{--s:.78}}
@media (min-width:1024px){.phone-wrap{--s:.83}}
/* fix round: the sticky rail phone's bottom edge stays clear of the chat launcher's corner. Bottom = 84px + 864 x s,
   kept 200px above the viewport bottom (689px at 1440 x 900). */
@media (min-width:1024px) and (max-height:1040px){.phone-wrap{--s:.72}}
@media (min-width:1024px) and (max-height:940px){.phone-wrap{--s:.7}}
@media (min-width:1024px) and (max-height:860px){.phone-wrap{--s:.64}}
@media (min-width:1024px) and (max-height:760px){.phone-wrap{--s:.54}}
.phone-wrap.mini{--s:.6}
.phone{position:absolute;top:0;left:0;width:410px;height:864px;transform:scale(var(--s));transform-origin:0 0;background:#0B110E;border-radius:62px;padding:10px;
  box-shadow:0 40px 70px rgba(8,30,18,.30),0 10px 22px rgba(8,30,18,.22),inset 0 0 0 1.5px #2A3530}
.screen{position:relative;width:390px;height:844px;border-radius:52px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--f-body);isolation:isolate;
  font-size:16.5px;line-height:23px;text-align:left}
.screen :where(button){font:inherit;border:0;background:none;padding:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
.screen [inert] *{cursor:default}
/* status bar */
.sb{position:absolute;top:0;left:0;right:0;height:50px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 44px;
  color:#fff;font:600 16.5px/1 var(--f-body);font-variant-numeric:tabular-nums;pointer-events:none;transition:color .2s}
.screen[data-sb="dark"] .sb{color:var(--ink)}
.island{position:absolute;top:11px;left:50%;width:122px;height:35px;margin-left:-61px;border-radius:20px;background:#000;z-index:31}
.sb-ic{display:flex;gap:6px;align-items:center}
.sb-ic svg{height:12px;width:auto;fill:currentColor}
/* views */
.views{position:absolute;inset:0 0 84px 0}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);scrollbar-width:none;visibility:hidden;overscroll-behavior:contain}
.view::-webkit-scrollbar{display:none}
.view.on{visibility:visible;z-index:2}
.view.full{bottom:-84px;z-index:3}
.view.on.full{z-index:20}
.view.in{animation:push .24s var(--ease-c) both}
.view.back-in{animation:pushback .24s var(--ease-c) both}
.view.fade-in{animation:fade .18s var(--ease-q) both}
/* top bar + band */
.p-tb{background:var(--hero-top);padding:56px 8px 6px 18px;display:flex;align-items:center;justify-content:space-between}
.p-tb-name{font:800 20px/24px var(--f-head);letter-spacing:-.3px;color:#fff}
.p-av{width:46px;height:46px;display:grid;place-items:center}
.p-av span{width:34px;height:34px;border-radius:99px;background:#159A55;box-shadow:0 0 0 1.5px rgba(255,255,255,.7);display:grid;place-items:center;
  color:#F6F5EF;font:800 13px/1 var(--f-head);letter-spacing:-.4px}
.p-band{background:var(--band-app);color:#fff;border-radius:0 0 30px 30px;padding:6px 20px 18px}
.p-band.ov{padding-bottom:44px}
.p-kick{font:600 15px/20px var(--f-head);color:rgba(255,255,255,.94)}
.p-bigline{font:800 34px/40px var(--f-head);letter-spacing:-.6px;margin-top:2px}
.p-sub{display:flex;align-items:center;gap:8px;margin-top:6px;font:600 14.5px/19px var(--f-head);color:rgba(255,255,255,.94)}
.p-sub .ic{width:16px;height:16px}
.p-chips{display:flex;gap:8px;margin-top:14px;flex-wrap:nowrap}
.p-chip{min-height:36px;padding:0 14px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font:700 14.5px/1 var(--f-head);transition:transform .16s var(--ease-q)}
.p-chip[aria-pressed="true"]{background:#fff;color:#0C5E36;box-shadow:none}
.p-chip:active{transform:scale(.97)}
.p-chip .n{min-width:20px;height:20px;border-radius:99px;display:inline-grid;place-items:center;background:rgba(255,255,255,.25);font:700 12px/1 var(--f-head);color:#fff;padding:0 5px}
.p-chip[aria-pressed="true"] .n{background:var(--bad)}
.p-search{margin-top:12px;min-height:44px;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  display:flex;align-items:center;gap:8px;padding:0 16px;color:rgba(255,255,255,.75);font:600 15.5px/1 var(--f-head)}
.p-search .ic{width:17px;height:17px;color:rgba(255,255,255,.9)}
.p-pill-band{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;font:700 13px/1.3 var(--f-head);margin-bottom:8px}
.p-pill-band .ic{width:13px;height:13px}
/* list card + rows */
.p-pad{padding:0 18px 28px}
.p-list{background:var(--card);border-radius:22px;box-shadow:var(--sh-md);border:1px solid var(--card-line);padding:4px 0;margin-top:-26px;position:relative}
.m-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;position:relative;width:100%;
  transition:background-color .16s var(--ease-q)}
button.m-row:active{background:var(--sunk)}
.m-row:not([hidden])~.m-row::before{content:"";position:absolute;top:0;left:74px;right:0;height:1px;background:var(--line2)}
.m-av{width:48px;height:48px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center;font:700 19px/1 var(--f-head)}
.m-av .ic{width:22px;height:22px}
.m-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.m-name{font:700 16.5px/21px var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-time{font:500 13px/1 var(--f-body);color:var(--faint);white-space:nowrap}
.m-time.un{font-weight:700;font-family:var(--f-head);color:var(--primary-text)}
.m-line{display:flex;gap:6px;align-items:flex-start;margin-top:3px;font:400 14.5px/19px var(--f-body);color:var(--dim)}
.m-line .ic{width:15px;height:15px;margin-top:2px}
.m-line>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-line.un{color:var(--ink);font-weight:600}
.m-line.miss{color:var(--bad);font-weight:600}
.m-auto{flex-direction:column;gap:4px}
.m-auto .pill{font-size:11.5px;padding:2px 8px}
.m-right{display:flex;align-items:center;gap:8px}
.m-cnt{min-width:22px;height:22px;border-radius:99px;background:var(--btn-grad);color:#fff;font:700 12px/22px var(--f-head);text-align:center;padding:0 6px}
.m-cb{width:42px;height:42px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center}
.m-cb .ic{width:19px;height:19px}
.p-foot{display:flex;gap:8px;align-items:center;justify-content:center;font:500 13px/18px var(--f-body);color:var(--faint);padding:18px 18px 4px;text-align:center}
.p-foot .ic{width:15px;height:15px}
.phone[data-stage="0"] .m-r2{display:none}
.m2-missed{display:none}
.phone[data-stage="0"] .m2-missed,.phone[data-stage="1"] .m2-missed{display:flex}
.phone[data-stage="0"] .m2-auto,.phone[data-stage="1"] .m2-auto{display:none}
.phone[data-stage="1"] .m-r2{animation:rise .18s var(--ease-c) both}
.m2-auto{animation:rise .18s var(--ease-c) both}
.popn{display:inline-block;animation:popb .26s var(--spring) both}
/* chat thread */
.p-chead{background:var(--card);border-bottom:1px solid var(--line2);padding:54px 14px 10px 6px;display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:2}
.p-backbtn{width:44px;height:44px;display:grid;place-items:center;color:var(--primary-text);border-radius:99px;transition:opacity .16s var(--ease-q)}
.p-backbtn:active{opacity:.55}
.p-backbtn .ic{width:27px;height:27px}
.p-chead b{display:block;font:700 17.5px/22px var(--f-head)}
.p-chead small{display:block;font:500 13px/17px var(--f-body);color:var(--dim)}
.p-chead .grow{flex:1;min-width:0}
.p-callbtn{width:42px;height:42px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center}
.p-callbtn .ic{width:19px;height:19px}
.p-thread{padding:14px 14px 90px;display:flex;flex-direction:column;gap:8px}
.p-thread .bub{max-width:82%}
.p-thread .tm{font:500 12px/1 var(--f-body);color:var(--faint);align-self:flex-end;margin-top:-2px}
.p-thread .tm.l{align-self:flex-start}
.vm{align-self:flex-start;background:var(--card);border-radius:22px;border-bottom-left-radius:6px;box-shadow:var(--sh-sm);border:1px solid var(--card-line);padding:12px 14px;max-width:88%}
.vm-top{display:flex;align-items:center;gap:12px}
.vm-play{width:44px;height:44px;border-radius:99px;background:var(--btn-grad);color:#fff;display:grid;place-items:center;flex:none}
.vm-play .ic{width:18px;height:18px;margin-left:2px}
.vm b{display:block;font:700 15.5px/20px var(--f-head)}
.vm small{font:500 13px/17px var(--f-body);color:var(--dim)}
.vm p{margin-top:10px;font:400 14.5px/20px var(--f-body);color:var(--dim)}
.p-replybar{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line2);padding:8px 12px 10px;display:flex;align-items:center;gap:8px}
.p-replybar .plus{width:38px;height:38px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--dim);font:500 24px/1 var(--f-body)}
.p-replybar .fld{flex:1;min-height:40px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;padding:0 14px;color:var(--faint);font:400 15px/1 var(--f-body)}
.p-replybar .snd{width:38px;height:38px;border-radius:99px;background:var(--sunk);color:var(--faint);display:grid;place-items:center}
.p-replybar .snd .ic{width:17px;height:17px}
/* leads */
.p-fb{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;color:#1877F2}
.p-fb .ic{width:16px;height:16px}
.p-cchips{display:flex;gap:8px;padding:16px 18px 12px}
.p-cchip{min-height:40px;padding:0 16px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font:700 15px/1 var(--f-head);transition:transform .16s var(--ease-q)}
.p-cchip span{font:700 14px/1 var(--f-head);color:var(--faint)}
.p-cchip[aria-pressed="true"]{background:var(--btn-grad);color:#fff;box-shadow:none}
.p-cchip[aria-pressed="true"] span{color:rgba(255,255,255,.85)}
.p-cchip:active{transform:scale(.97)}
.lead{display:block;width:100%;background:var(--card);border-radius:22px;box-shadow:var(--sh-md);border:1px solid var(--card-line);padding:16px;margin:0 0 12px;
  transition:transform .16s var(--ease-q)}
button.lead:active{transform:scale(.97);transition-duration:.07s}
.lead.nf{opacity:.62}
.lead-top{display:flex;align-items:center;gap:12px}
.srct{width:42px;height:42px;border-radius:14px;background:var(--wash);color:var(--primary-text);display:grid;place-items:center;flex:none}
.srct .ic{width:22px;height:22px}
.lead-top .nm{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font:700 16.5px/21px var(--f-head)}
.lead-top .dot{width:9px;height:9px;border-radius:99px;background:var(--primary);flex:none}
.lead-top .t{font:500 13px/1 var(--f-body);color:var(--faint);white-space:nowrap}
.lead-top .t.new{font-weight:700;font-family:var(--f-head);color:var(--primary-text)}
.lead-text{margin-top:10px;font:400 15px/21px var(--f-body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead-meta{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 13.5px/18px var(--f-body);color:var(--dim)}
.lead-meta .loc{display:inline-flex;align-items:center;gap:4px}
.lead-meta .loc .ic{width:14px;height:14px}
.lead-meta .pill{margin-left:auto}
/* the lead screen */
.p-plainback{display:inline-flex;align-items:center;gap:2px;color:var(--primary-text);font:700 16px/1 var(--f-head);min-height:44px;padding:0 10px 0 6px;margin:52px 0 0 8px;
  transition:opacity .16s var(--ease-q)}
.p-plainback:active{opacity:.55}
.p-plainback .ic{width:22px;height:22px}
.ls{padding:6px 18px 190px}
.ls-head{display:flex;gap:14px;align-items:center}
.ls-av{position:relative;width:58px;height:58px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center;font:800 24px/1 var(--f-head);flex:none}
.ls-av .srct{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:8px;background:var(--card);box-shadow:0 0 0 2px var(--card)}
.ls-av .srct .ic{width:15px;height:15px}
.ls-name{font:800 25px/30px var(--f-head);letter-spacing:-.4px}
.ls-loc{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:3px;font:700 15px/20px var(--f-head);color:var(--ink)}
.ls-loc .ic{width:15px;height:15px;color:var(--dim)}
.ls-loc .on{font:500 14px/20px var(--f-body);color:var(--dim)}
.ls-loc .on b{font-weight:700}
.ls-lab{font:500 13.5px/18px var(--f-body);color:var(--dim);margin:22px 0 8px}
.ls-lab.r{text-align:right}
.ls-their{background:var(--card);border-radius:22px;border-bottom-left-radius:6px;border:1px solid var(--card-line);box-shadow:var(--sh-sm);padding:16px;font:400 17px/25px var(--f-body)}
.ls-ours{background:var(--wash);border:1px solid var(--tint);border-radius:22px;border-bottom-right-radius:6px;padding:16px;font:400 16.5px/24px var(--f-body);margin-left:24px}
.ls-quiet{display:flex;justify-content:center;gap:10px;margin-top:18px;font:700 15px/1 var(--f-head);color:var(--primary-text)}
.ls-quiet button{padding:12px 4px;transition:opacity .16s var(--ease-q)}
.ls-quiet button:active{opacity:.55}
.ls-quiet span{color:var(--faint)}
.ls-bar{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line2);padding:12px 18px 30px}
.ls-note{display:flex;align-items:center;justify-content:center;gap:6px;font:600 14px/19px var(--f-body);color:var(--pill-text);background:var(--wash);border-radius:14px;padding:10px 12px;margin-bottom:10px;
  animation:rise .18s var(--ease-c) both}
.ls-note .ic{width:16px;height:16px}
.ls-reply{width:100%;min-height:58px;border-radius:16px;background:var(--btn-grad)!important;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;
  font:700 18px/1 var(--f-head)!important;box-shadow:var(--sh-sm);transition:transform .16s var(--ease-q)}
.ls-reply:active{transform:scale(.97);transition-duration:.07s}
.ls-reply .ic{width:21px;height:21px}
.ls-cap{font:500 12.5px/17px var(--f-body);color:var(--dim);text-align:center;margin-top:8px}
/* share a job */
.p-th{padding:64px 18px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.p-th h3{font:800 28px/32px var(--f-head);letter-spacing:-.5px}
.p-th p{font:500 14px/19px var(--f-body);color:var(--dim);margin-top:2px}
.p-sendpill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:99px;background:var(--sunk)!important;color:var(--faint);font:700 15px/1 var(--f-head)!important;
  transition:background-color .18s,color .18s,transform .16s var(--ease-q)}
.p-sendpill .ic{width:16px;height:16px}
.p-sendpill.ready{background:var(--btn-grad)!important;color:#fff}
.p-sendpill:active{transform:scale(.97)}
.p-prev{position:relative;height:300px;margin:0 0 0;overflow:hidden;background:var(--sunk)}
.p-prev .art{position:absolute;inset:0}
.p-prev .cnt{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.5);color:#fff;border-radius:99px;padding:6px 11px;font:700 13px/1 var(--f-head);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.p-recents{display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px 10px;background:var(--bg)}
.p-recents b{font:700 17px/1 var(--f-head)}
.p-recents span{font:500 14px/1 var(--f-body);color:var(--dim)}
.p-roll{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-bottom:120px}
.p-tile{position:relative;aspect-ratio:1;overflow:hidden;transition:opacity .16s var(--ease-q)}
.p-tile:active{opacity:.7}
.p-tile .art{position:absolute;inset:0}
.p-tile.picked .art{opacity:.75}
.p-tile.picked::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--primary)}
.p-tile .pick{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:99px;background:var(--btn-grad);color:#fff;font:700 13px/24px var(--f-head);text-align:center;
  box-shadow:0 0 0 2px #fff;animation:popb .26s var(--spring) both}
.p-tile .vlen{position:absolute;left:6px;bottom:6px;color:#fff;font:700 12px/1 var(--f-head);background:rgba(0,0,0,.5);border-radius:8px;padding:3px 6px;display:flex;gap:3px;align-items:center}
.p-tile .vlen .ic{width:11px;height:11px}
.p-cam{background:var(--btn-grad)!important;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:700 13px/1 var(--f-head)!important}
.p-cam .ic{width:30px;height:30px}
.p-float{position:absolute;left:18px;right:18px;bottom:40px;z-index:5}
.p-float button{width:100%;min-height:56px;border-radius:16px;background:var(--btn-grad)!important;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;
  font:700 17px/1 var(--f-head)!important;box-shadow:var(--sh-md);animation:rise .18s var(--ease-c) both;transition:transform .16s var(--ease-q)}
.p-float button:active{transform:scale(.97)}
.p-float .ic{width:20px;height:20px}
/* sent */
.sent{padding:120px 22px 30px;text-align:center}
.sent .chk{width:96px;height:96px;border-radius:99px;background:var(--btn-grad);display:grid;place-items:center;margin:0 auto 22px;box-shadow:var(--sh-md)}
.sent .chk .ic{width:46px;height:46px;color:#fff}
.view.on .sent .chk{animation:pop .32s var(--spring) both}
.sent h3{font:800 32px/36px var(--f-head);letter-spacing:-.5px}
.sent p{font:400 17px/24px var(--f-body);color:var(--dim);margin-top:8px}
.view.on .sent h3{animation:rise8 .26s var(--ease-c) .04s both}
.view.on .sent p{animation:rise8 .26s var(--ease-c) .08s both}
.sent .card{text-align:left;margin-top:26px;padding:6px 16px}
.srow{display:flex;align-items:center;gap:12px;padding:10px 0;font:600 15.5px/20px var(--f-head)}
.srow+.srow{border-top:1px solid var(--line2)}
.srow .t36{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--wash);color:var(--pill-text)}
.srow .t36.round{border-radius:99px}
.srow .t36 .ic{width:18px;height:18px}
.t-ig{background:#D629761A!important;color:var(--instagram)!important}
.t-fb{background:#1877F21A!important;color:var(--facebook)!important}
.t-g{background:#4285F41A!important;color:var(--google)!important}
.sent .done{margin-top:22px;width:100%;min-height:56px;border-radius:16px;background:var(--card)!important;box-shadow:inset 0 0 0 1.5px var(--line);font:700 17px/1 var(--f-head)!important;
  transition:transform .16s var(--ease-q)}
.sent .done:active{transform:scale(.97)}
/* social */
.p-eyebrow{display:flex;align-items:center;gap:6px;font:700 12.5px/1 var(--f-head);text-transform:uppercase;letter-spacing:1.1px;color:rgba(255,255,255,.94)}
.p-eyebrow .ic{width:14px;height:14px}
.p-views{font:800 46px/52px var(--f-head);letter-spacing:-1.4px;margin-top:6px;font-variant-numeric:tabular-nums}
.p-views small{font:800 26px/1 var(--f-head);letter-spacing:-.4px}
.p-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:26px 18px 12px}
.p-sec h4{margin:0;font:700 20px/25px var(--f-head);letter-spacing:-.2px}
.p-sec h4 span{color:var(--faint);margin-left:4px}
.p-sec small{font:500 14px/19px var(--f-body);color:var(--dim)}
.p-sec2{padding:0 18px 12px;font:500 14px/19px var(--f-body);color:var(--dim);margin-top:-6px}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.p-post{position:relative;aspect-ratio:1;overflow:hidden;transition:transform .16s var(--ease-q)}
.p-post:active{transform:scale(.98)}
.p-post .art{position:absolute;inset:0}
.p-post .mk{position:absolute;right:6px;top:6px;display:flex;gap:4px;background:rgba(0,0,0,.62);color:#fff;border-radius:10px;padding:3px 7px}
.p-post .mk .ic{width:13px;height:13px}
.p-post .vc{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;align-items:center;background:rgba(0,0,0,.62);color:#fff;border-radius:10px;padding:4px 7px;
  font:700 13.5px/1 var(--f-head);font-variant-numeric:tabular-nums}
.p-post .vc .ic{width:13px;height:13px}
.pv-media{position:relative;height:430px;overflow:hidden}
.pv-media .art{position:absolute;inset:0}
.pv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 50%,rgba(0,0,0,.72))}
.pv-back{position:absolute;left:14px;top:54px;z-index:2;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px 0 8px;border-radius:99px;
  background:rgba(0,0,0,.5)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);color:#fff;font:700 15px/1 var(--f-head)!important}
.pv-back .ic{width:20px;height:20px}
.pv-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.pv-cap .st{display:inline-flex;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);border-radius:99px;padding:5px 10px;font:700 12.5px/1 var(--f-head)}
.pv-cap h3{font:800 28px/32px var(--f-head);letter-spacing:-.5px;margin-top:8px}
.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 18px 0;padding:14px 4px}
.pv-stats div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.pv-stats div+div{border-left:1px solid var(--line2)}
.pv-stats .ci{width:42px;height:42px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center}
.pv-stats .ci .ic{width:21px;height:21px}
.pv-stats b{font:800 28px/33px var(--f-head);font-variant-numeric:tabular-nums}
.pv-stats span{font:500 14px/19px var(--f-body);color:var(--dim)}
.pv-note{font:500 13px/18px var(--f-body);color:var(--faint);text-align:center;margin:10px 18px 0}
/* google */
.g-head{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--f-head)}
.g-head .ic{width:18px;height:18px}
.g-rate{display:flex;align-items:center;gap:14px;margin-top:8px}
.g-rate b{font:800 60px/62px var(--f-head);letter-spacing:-2px}
.g-rate .stars{color:#FFD45C}
.g-rate .stars .ic{width:20px;height:20px}
.g-rate small{display:block;font:600 14.5px/19px var(--f-head);color:rgba(255,255,255,.94);margin-top:4px}
.g-card{margin:0 18px;padding:16px}
.g-top{display:flex;align-items:center;gap:12px}
.g-top .ci{width:44px;height:44px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center}
.g-top .ci .ic{width:22px;height:22px}
.g-top b{font:800 30px/34px var(--f-head);letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.g-top span{font:600 15.5px/22px var(--f-head);color:var(--dim)}
.g-lines{margin:12px 0;padding:12px 0;border-block:1px solid var(--line2);display:grid;gap:10px}
.g-line{display:flex;align-items:center;gap:10px;font:600 15.5px/22px var(--f-head);color:var(--dim)}
.g-line .ci{width:32px;height:32px;border-radius:99px;background:var(--wash);color:var(--pill-text);display:grid;place-items:center;flex:none}
.g-line .ci .ic{width:16px;height:16px}
.g-line b{font:800 20px/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.g-web{display:flex;gap:10px;align-items:center;font:600 14.5px/20px var(--f-head);color:var(--dim)}
.g-web .ic{width:18px;height:18px;color:var(--google)}
.g-reviews{padding:0 18px;display:grid;gap:12px}
.revcard .share{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font:700 13px/1 var(--f-head);
  color:var(--ink);transition:transform .16s var(--ease-q)}
.revcard .share .ic{width:16px;height:16px}
.revcard .share.done{color:var(--primary-text);box-shadow:none}
.revcard .share:active{transform:scale(.94)}
.revcard .when{font:500 12.5px/1 var(--f-body);color:var(--dim);margin-left:6px}
.revcard .revtext{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:84px;z-index:10;background:var(--card);border-top:1px solid var(--line);box-shadow:var(--sh-sm);
  display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px 24px}
.tabbar::after{content:"";position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:99px;background:var(--ink);opacity:.85}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;color:var(--faint);font:700 12.5px/1 var(--f-head)!important;position:relative;padding-top:4px!important;
  transition:opacity .16s var(--ease-q)}
.tab:active{opacity:.55}
.tab .ic{width:24px;height:24px}
.tab[aria-pressed="true"]{color:var(--primary-text)}
.tab .gt{width:30px;height:30px;margin:-3px 0 -3px;border-radius:99px;display:grid;place-items:center}
.tab .gt .ic{width:21px;height:21px}
.tab[aria-pressed="true"] .gt{background:var(--wash)}
.tab .bdg{position:absolute;top:-4px;left:calc(50% + 2px)}
.bdg{min-width:22px;height:22px;border-radius:11px;background:var(--primary);color:#fff;font:700 11.5px/22px var(--f-head);text-align:center;padding:0 6px;box-shadow:0 0 0 2px var(--card)}
.tab-raise{display:flex;justify-content:center}
.tab-raise span{width:56px;height:56px;border-radius:99px;background:var(--btn-grad);color:#fff;display:grid;place-items:center;border:5px solid var(--card);box-sizing:content-box;
  margin-top:-24px;box-shadow:var(--sh-md);transition:transform .16s var(--ease-q)}
.tab-raise:active span{transform:scale(.94)}
.tab-raise .ic{width:27px;height:27px}
.tab-raise[aria-pressed="true"] span{box-shadow:var(--sh-md),0 0 0 2px var(--primary)}

/* ---------- job pictures inside the phone (fix round 2026-10-15, finding 2) ----------
   Illustrated job scenes drawn in SVG for this build (assets/img/jobs/, provenance in DESIGN.md). No client photos.
   They replace the old CSS patterns, which read as graph paper and placeholders. Each scene fills its tile (cover). */
.art{background:#C9CCC6 center/cover no-repeat}
.a-niche{background-image:url(../assets/img/jobs/shower.svg)}
.a-vanity{background-image:url(../assets/img/jobs/vanity.svg)}
.a-copper{background-image:url(../assets/img/jobs/copper.svg)}
.a-studs{background-image:url(../assets/img/jobs/studs.svg)}
.a-quartz{background-image:url(../assets/img/jobs/island.svg)}
.a-tray{background-image:url(../assets/img/jobs/tray.svg)}
.a-van{background-image:url(../assets/img/jobs/van.svg)}
.a-spacers{background-image:url(../assets/img/jobs/spacers.svg)}
.a-shower{background-image:url(../assets/img/jobs/shower.svg)}
.a-basement{background-image:url(../assets/img/jobs/basement.svg)}
.a-backsplash{background-image:url(../assets/img/jobs/backsplash.svg)}
.a-heater{background-image:url(../assets/img/jobs/heater.svg)}
.a-halfbath{background-image:url(../assets/img/jobs/halfbath.svg)}
.a-drywall{background-image:url(../assets/img/jobs/drywall.svg)}
.a-repipe{background-image:url(../assets/img/jobs/pex.svg)}
.a-laundry{background-image:url(../assets/img/jobs/laundry.svg)}
.a-review{background:#F6F5EF;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:10px;text-align:center}
.a-review .st{color:#F2A900;display:flex;gap:1px}
.a-review .st .ic{width:12px;height:12px}
.a-review q{font:700 11px/14px var(--f-head);color:#121C17;quotes:none}
.a-review::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:#0C5E36}

/* systems pages: the sample card sits inside the white top, next to the headline (2026-11-01: no overlap) */
.sys-grid{display:grid;gap:28px;align-items:start}
.sys-band{padding-bottom:56px}
.sys-band .h1{max-width:14ch}
.sys-snip{position:relative;z-index:2;margin-bottom:0;display:grid}
.sys-body{padding-top:72px}
@media (min-width:1024px){
  .sys-band{padding-bottom:56px}
  .sys-grid{grid-template-columns:minmax(0,1fr) 420px;gap:56px}
  .sys-snip{align-self:center;margin-bottom:0;margin-top:0}
  .sys-body{padding-top:72px}
  .sys-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

@media (min-width:1024px){.beat:last-child{padding-bottom:160px}}

/* =====================================================================================================
   Fix round 2026-10-15
   ===================================================================================================== */
/* home hero: on a phone the first screen shows the live phone's top third (finding 3) and the outcome (finding 10) */
.hero-copy .kicker{font:600 15px/1.35 var(--f-head);color:rgba(255,255,255,.94)}
.hero-proof{margin-top:16px}
.hero-proof a{display:inline-flex;gap:8px;align-items:flex-start;color:#fff;text-decoration:none;font:600 15.5px/22px var(--f-head)}
.hero-proof u{text-decoration-thickness:1.5px;text-underline-offset:3px;white-space:nowrap}
.hero-proof .ic{width:18px;height:18px;margin-top:2px;color:#BFE3CE}
@media (max-width:1023px){
  .hero-copy{padding:20px 0 40px}
  .hero-copy .kicker{display:none}
  .hero-copy .h1{margin-top:0;max-width:none;font-size:clamp(2.3rem,10.2vw,3.6rem)}
  .hero-copy .lede{margin-top:14px}
  .hero-copy .row-btns{margin-top:20px;gap:12px}
  .hero-copy .row-btns .btn,.hero-copy .row-btns .watch-btn,.sys-band .row-btns .btn,.sys-band .row-btns .watch-btn,.band-page .row-btns .btn,.band-page .row-btns .watch-btn{width:100%;max-width:440px}
  .rail{margin-top:0;padding-top:28px}
  .rail .phone-wrap{--s:.62}
  .phone-cap{margin-top:12px}
}
.ea-line{display:flex;gap:6px;align-items:center;margin-top:14px;font:600 14.5px/20px var(--f-head);color:var(--dim)}
.ea-line .ic{width:15px;height:15px;color:var(--primary-text)}
/* what each plan lights up in the app: the tab bar, lit per plan (findings 5 and 7) */
.plan-map{margin-top:28px}
.pm-row{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line2)}
.pm-row:first-of-type{margin-top:14px}
@media (min-width:760px){.pm-row{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:24px}}
.pm-name b{display:block;font:800 30px/1 var(--f-head);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.pm-name span{display:block;margin-top:4px;font:600 14.5px/19px var(--f-head);color:var(--dim)}
.plan-strip{border-radius:18px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);padding:20px 4px 12px}
.plan-strip>span{font-size:12px}
.plan-strip .off{color:var(--faint);opacity:.42}
.plan-strip .on{color:var(--primary-text)}
.plan-strip .off .raise{background:var(--sunk);color:var(--faint);box-shadow:none;border-color:var(--bg)}
.plan-strip .raise{width:46px;height:46px;margin-top:-26px;border-color:var(--bg)}
.plan-strip .raise .ic{width:22px;height:22px}
.plan-strip .ea{color:var(--dim)}
.plan-strip .ea>.ic{border-radius:8px;outline:1.5px dashed var(--faint);outline-offset:2px}
.plan-strip small{font:700 10px/1 var(--f-head);color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.tiercard .strip-cap{margin-top:18px;font-weight:700;font-family:var(--f-head);color:var(--ink)}
.tiercard .plan-strip{margin-top:8px}
.tiercard .ea-line{margin-top:10px}
/* services: no card-in-card; copy on the canvas, the screen beside it on the right every time (2026-11-01 F14: no zigzag); the website leads (finding 5) */
.svc-sec{padding-top:56px}
.svc-list{display:grid;gap:clamp(56px,8vw,104px)}
.svc{display:grid;gap:24px;align-items:center}
.svc-art{display:grid;justify-items:center;min-width:0}
.svc h2{font:800 clamp(28px,3.4vw,40px)/1.08 var(--f-head);letter-spacing:-.6px}
.svc p{margin-top:12px;color:var(--ink);max-width:56ch}
.svc .lnk{display:inline-flex;margin-top:16px}
@media (min-width:900px){
  .svc{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px}
  .svc-site .phone-wrap{--s:.7}
}
/* the sample contractor site, rendered on a phone (site-phone) */
.site-phone .screen{background:#fff}
.site-scr .sb{color:var(--ink)}
.ss-url{position:absolute;top:50px;left:12px;right:12px;height:40px;border-radius:12px;background:#ECEDEA;display:flex;align-items:center;justify-content:center;gap:6px;
  font:500 15px/1 var(--f-body);color:#3D4441;z-index:2}
.ss-url .ic{width:13px;height:13px}
.ss-body{position:absolute;top:98px;left:0;right:0;bottom:0;overflow:hidden;color:#16202A;font-family:var(--f-body)}
.ss-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #E7E9EC}
.ss-nav b{font:800 20px/1 var(--f-head);letter-spacing:-.4px}
.ss-call{display:inline-flex;align-items:center;gap:6px;background:#1D4E89;color:#fff;border-radius:10px;padding:9px 12px;font:700 14px/1 var(--f-head)}
.ss-call .ic{width:15px;height:15px}
.ss-hero{margin:14px 14px 0;border-radius:18px;padding:20px 18px 18px;color:#fff;background:linear-gradient(160deg,#1D4E89,#173A63 70%)}
.ss-hero h3{font:800 30px/1.06 var(--f-head);letter-spacing:-.6px;margin-top:10px}
.ss-hero p{margin-top:8px;font:500 15px/21px var(--f-body);opacity:.92}
.ss-tag{display:inline-flex;font:700 11.5px/1 var(--f-head);padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff;vertical-align:middle}
.ss-btn,.ss-btn2{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;margin-top:12px;font:700 17px/1 var(--f-head)}
.ss-btn{background:#F2A900;color:#16202A;margin-top:16px}
.ss-btn .ic{width:18px;height:18px}
.ss-btn2{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);color:#fff}
.ss-sec{padding:18px 18px 0}
.ss-sec h4{margin:0 0 10px;font:800 19px/1.2 var(--f-head);display:flex;gap:8px;align-items:center}
.ss-sec h4 .ss-tag{background:#ECEDEA;color:#3D4441}
.ss-rows{display:grid;border-radius:14px;box-shadow:inset 0 0 0 1px #E7E9EC;overflow:hidden}
.ss-rows span{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font:600 15.5px/1 var(--f-head)}
.ss-rows span+span{border-top:1px solid #E7E9EC}
.ss-rows .ic{width:16px;height:16px;color:#8A939B}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chips span{padding:8px 12px;border-radius:99px;background:#EEF3F9;color:#1D4E89;font:700 14px/1 var(--f-head)}
.ss-rev{border-radius:14px;box-shadow:inset 0 0 0 1px #E7E9EC;padding:14px}
.ss-rev .stars .ic{width:15px;height:15px}
.ss-rev p{margin-top:6px;font:400 15px/21px var(--f-body);color:#3D4441}
.ss-rev b{display:block;margin-top:6px;font:700 14px/1 var(--f-head)}
.ss-callbar{position:absolute;left:12px;right:12px;bottom:26px;min-height:54px;border-radius:14px;background:#F2A900;color:#16202A;display:flex;align-items:center;justify-content:center;gap:8px;
  font:800 18px/1 var(--f-head);box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:3}
.ss-callbar .ic{width:19px;height:19px}

/* updates + video pages, ported from the live site into the app look (findings 9 and 12) */
.wg-card{padding:clamp(18px,3vw,32px)}
.wg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:36px;align-items:start}
.wg__main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.wg__main>.wg__player{grid-column:1}.wg__main>.wg__info{grid-column:2;min-width:0}
.wg__main:has(> .wg__player:not(.is-portrait)){grid-template-columns:minmax(0,1fr)}
.wg__main:has(> .wg__player:not(.is-portrait))>.wg__player,.wg__main:has(> .wg__player:not(.is-portrait))>.wg__info{grid-column:1}
.wg__player{position:relative;border-radius:22px;overflow:hidden;background:#000;box-shadow:var(--sh-md);line-height:0}
.wg__player video{display:block;width:100%;height:auto;max-height:70vh}
.wg__player.is-portrait{max-width:min(330px,calc(70vh * 9 / 16))}
.wg__player.is-portrait video{aspect-ratio:9/16;object-fit:contain}
.wg__title{font:800 clamp(22px,2.4vw,28px)/1.18 var(--f-head);letter-spacing:-.4px;margin:0 0 8px;max-width:28ch}
.wg__meta{font:500 14.5px/21px var(--f-body);color:var(--dim);margin:0 0 18px}
.chapters{list-style:none;margin:0;padding:0;max-width:620px;background:var(--card);border-radius:18px;box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden}
.chapters li+li{border-top:1px solid var(--line2)}
.chapters__row{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  padding:12px 14px;color:var(--dim);transition:background-color .16s var(--ease-q)}
.chapters__row:hover{background:var(--bg)}
.chapters__row[aria-current="true"]{background:var(--wash)}
.chapters__row[aria-current="true"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--primary)}
.chapters__t{flex:none;min-width:3.1em;padding-top:2px;font:700 14px/1.3 var(--f-head);color:var(--primary-text);font-variant-numeric:tabular-nums}
.chapters__b{display:block;min-width:0}
.chapters__l{display:block;font:700 16px/1.3 var(--f-head);color:var(--ink)}
.chapters__n{display:block;margin-top:3px;font:400 15px/21px var(--f-body);color:var(--dim)}
.wg__side{position:sticky;top:96px}
.wg__sideh{font:700 17px/1.25 var(--f-head);color:var(--ink);margin:0 0 12px}
.vidlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vidlist__row{display:flex;gap:12px;width:100%;background:var(--card);border:0;border-radius:18px;padding:8px;cursor:pointer;font:inherit;text-align:left;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line2);transition:transform .16s var(--ease-q)}
.vidlist__row:active{transform:scale(.98)}
.vidlist__row[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--primary)}
.vidlist__thumb{position:relative;flex:0 0 124px;border-radius:12px;overflow:hidden;background:#000;line-height:0}
.vidlist__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vidlist__dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:#fff;font:700 11.5px/1.3 var(--f-head);padding:2px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.vidlist__meta{display:block;min-width:0;padding-top:2px}
.vidlist__t{display:block;font:700 15px/1.3 var(--f-head)}
.vidlist__m{display:block;margin-top:4px;font:500 13.5px/1.3 var(--f-body);color:var(--dim)}
.wg__ask{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:500 15px/22px var(--f-body);color:var(--dim)}
.wg__ask a{color:var(--primary-text);font-weight:700;white-space:nowrap}
.wg__intro{margin-bottom:22px;max-width:60ch}
.wg__intro h2{font:800 clamp(26px,3vw,34px)/1.1 var(--f-head);letter-spacing:-.5px;margin:10px 0 8px}
.wg__intro p{color:var(--dim)}
@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__player.is-portrait{margin-inline:auto}.wg__info .wg__title{margin-top:12px}}
@media (max-width:359px){.vidlist__row{flex-direction:column}.vidlist__thumb{flex-basis:auto;width:100%}}
.watch-band{padding:28px 0 40px;text-align:center}
.watch__head{max-width:46ch;margin:0 auto}
.watch__head h1{margin:10px 0 8px;font:800 clamp(1.7rem,4.6vw,2.7rem)/1.06 var(--f-head);letter-spacing:-.03em}
.watch__head .lede{font-size:clamp(16px,2.2vw,18px)}
.watch{padding-bottom:24px}
.watch__player{position:relative;z-index:2;margin:32px auto 0;border-radius:22px;overflow:hidden;background:#000;box-shadow:var(--sh-lg);line-height:0}
.watch__player video{width:100%;height:auto;display:block}
.watch__player.is-portrait{max-width:min(430px,calc(76vh * 9 / 16))}
.watch__player.is-portrait video{aspect-ratio:9/16;max-height:76vh;object-fit:contain}
/* 2026-10-15: a video that cannot load keeps its poster and gets one plain line instead of dead controls */
.media-off>:not(video):not(script):not(.media-note){display:none !important}
.media-off video{pointer-events:none}
.media-note{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:12px 14px;border-radius:14px;background:rgba(12,20,16,.86);color:#fff;font:600 14.5px/20px var(--f-head);text-align:center}
.media-note a{color:#fff;text-decoration:underline}
.watch__meta{text-align:center;margin:16px 0 0;font:500 14.5px/21px var(--f-body);color:var(--dim)}
.watch .wg-card{margin-top:clamp(32px,5vw,56px)}
.watch__update .wg__info .wg__title{margin-top:0}
.watch__after{margin:clamp(36px,5vw,56px) auto 0;max-width:60ch;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.watch__after h2{font:800 clamp(26px,3.4vw,34px)/1.1 var(--f-head);letter-spacing:-.5px}
.watch__after p{color:var(--dim)}
.watch__actions{justify-content:center}
/* the live player UI (assets/player.js), in the app's colors */
.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}
.vp__big{position:absolute;inset:0;margin:auto;width:74px;height:74px;border:0;border-radius:50%;background:var(--btn-grad);color:#fff;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 var(--ease-q),transform .18s var(--ease-c)}
.vp.is-paused .vp__big{opacity:1;transform:scale(1)}
.vp__big svg{width:34px;height:34px;margin-left:4px}
.vp__bar{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 10px;pointer-events:auto;opacity:1;background:linear-gradient(180deg,transparent,rgba(4,12,8,.82) 62%)}
.vp__scrub{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vp__scrub:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.vp__segs{display:flex;width:100%;gap:2px;height:4px;align-items:stretch;transition:height .14s var(--ease-q)}
.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(255,255,255,.3)}
.vp__fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;background:#3FBF7F;will-change:transform}
.vp__head{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .14s}
.vp__scrub:hover .vp__head,.vp.is-scrubbing .vp__head{opacity:1}
.vp__tip{position:absolute;bottom:22px;transform:translateX(-50%);opacity:0;pointer-events:none;background:rgba(10,20,15,.96);border-radius:10px;padding:7px 11px;max-width:min(260px,70vw);transition:opacity .12s}
.vp.is-tipping .vp__tip{opacity:1}
.vp__tip-l{display:block;font:700 13.5px/1.25 var(--f-head);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp__tip-t{display:block;font:700 12px/1.2 var(--f-head);color:#8FD9B0;font-variant-numeric:tabular-nums;margin-top:2px}
.vp__row{display:flex;align-items:center;gap:12px;margin-top:2px;color:#fff}
.vp__btn{background:none;border:0;padding:5px;cursor:pointer;color:inherit;display:grid;place-items:center;border-radius:8px;line-height:0}
.vp__btn:hover{background:rgba(255,255,255,.1)}
.vp__btn svg{width:21px;height:21px}
@media (pointer:coarse){.vp__btn{min-width:44px;min-height:44px}}
.vp__i-pause,.vp.is-muted .vp__i-on,.vp__i-off{display:none}
.vp:not(.is-paused) .vp__i-play{display:none}
.vp:not(.is-paused) .vp__i-pause,.vp.is-muted .vp__i-off{display:block}
.vp__time{font:500 13px/1 var(--f-body);color:rgba(255,255,255,.92);white-space:nowrap;font-variant-numeric:tabular-nums}
.vp__chap{flex:1 1 auto;min-width:0;font:600 13px/1 var(--f-head);color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
@media (max-width:640px){.vp__chap{display:none}.vp__big{width:60px;height:60px}.vp__big svg{width:27px;height:27px}.vp__bar{padding:30px 10px 8px}}
/* hero layout after the phone shrank (finding 1): on a phone the phone column centers; on desktop the band ends
   earlier and the phone starts lower, so it still breaks out of the band's bottom edge and its caption sits on the canvas */
.phone-sticky{display:flex;flex-direction:column;align-items:center}
@media (min-width:1024px){
  .hero-copy{padding:64px 0 40px}
  .rail{padding-top:150px}
}
@media (min-width:1024px) and (max-height:860px){.rail{padding-top:110px}}

/* the sample site keeps its own colors inside a services row (.svc p would otherwise reach into it) */
.svc .ss-hero p{color:rgba(255,255,255,.92);margin-top:8px;max-width:none}
.svc .ss-rev p{color:#3D4441;margin-top:6px;max-width:none}

/* ---------- 2026-10-31: the Lead Radar video, the first-30-days offer and the /call page for Meta ads ---------- */
/* the beat pill names one of the video's four things now, not a plan, so it is a label, not a link */
.hero-copy .row-btns .btn .ic{width:20px;height:20px}
/* the portrait player outside the video page: no overlap with a band above it */
.chaplist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;max-width:480px}
.chaplist button{all:unset;box-sizing:border-box;width:100%;display:flex;gap:14px;align-items:baseline;padding:11px 12px;border-radius:12px;cursor:pointer;
  font:600 16.5px/22px var(--f-head);color:var(--ink);transition:background .16s var(--ease-q)}
.chaplist button:hover{background:var(--wash)}
.chaplist button:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}
.chaplist .t{font:700 14px/22px var(--f-head);color:var(--primary-text);font-variant-numeric:tabular-nums;min-width:3.2em}
/* /call: the landing page for Facebook and Instagram ads. The form comes first on a phone, the video beside it on wider screens. */
.is-call .topbar .nav,.is-call .topbar .tb-cta{display:none}
.call-band{padding:36px 0 48px;text-align:center}
.call-band .wm{--wm:64px}
.call-band .h1{margin:8px auto 0;max-width:14ch;font-size:clamp(2.4rem,6vw,4.4rem)}
.call-band .lede{margin:14px auto 0;max-width:44ch;color:rgba(255,255,255,.94)}
.call-sec{padding-top:40px}
.call-grid{display:grid;gap:36px;margin-top:0;position:relative;z-index:2}
.call-sheet{margin:0 auto;width:100%}
.call-sheet>.h3{margin-bottom:16px}
@media (min-width:960px){.call-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:48px}
  .call-sheet{max-width:none}.call-video{order:-1;padding-top:8px}}
.chaplist--desc{max-width:none;gap:4px 40px}
@media (min-width:860px){.chaplist--desc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chaplist--desc button{align-items:flex-start;padding:14px 12px}
.chaplist--desc b{display:block;font:700 18px/24px var(--f-head);color:var(--ink)}
.chaplist--desc .d{display:block;margin-top:4px;font:400 16px/24px var(--f-body);color:var(--dim)}

/* =====================================================================================================
   2026-11-01: one light look, warmer and less template (Kaden: "it should just be one color no matter what",
   the light mode "is not bad at all", "make it more inviting", "it definitely gives AI vibes").
   The dark green gradient tops become white with ink text; green stays for buttons, links and the phone. (The solid
   green closing band, .band-close, is gone since the F7 sign-off card; the .band:not(.band-close) selectors below still
   match every band and keep their specificity, so they stay as written.) Buttons are flat (#11804A on white text is 4.99:1). Fields are white with a real border.
   ===================================================================================================== */
:root{--btn-grad:#11804A; --field-line:#D3CEC2; --field-hover:#B9B3A4; --band:#FFFFFF}
.btn-primary:hover{background:#0C5E36}
::selection{background:var(--tint);color:var(--ink)}
/* top bar: white, ink text, green call to action */
.topbar{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line)}
.topbar .wm,.sheet .wm{color:var(--primary-dark)}
.nav a{color:var(--ink)}
.nav a:hover{background:var(--bg)}
.nav a[aria-current="page"]{background:var(--wash);color:var(--pill-text)}
.tb-tel{color:var(--ink)}
.tb-tel .ic{color:var(--primary-text)}
.topbar .btn-light{background:var(--btn-grad);color:#fff}
.topbar .btn-light:hover{background:#0C5E36}
.round{background:var(--wash);color:var(--primary-dark);box-shadow:none}
.topbar :focus-visible,.sheet :focus-visible,.band:not(.band-close) :focus-visible{outline-color:var(--primary-text)}
/* phone menu */
.sheet{background:#fff;color:var(--ink)}
.sheet nav a{color:var(--ink)}
.sheet .small{color:var(--dim)}
.sheet .btn-light{background:var(--btn-grad);color:#fff}
.sheet .btn-frost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
/* page tops: flat, full-width white on the warm canvas, no gradient and no rounded bottom (2026-11-01 F6: nothing hangs
   half off the edge any more; the rounded band is the app's header shape, .p-band, and stays inside the phone only) */
.band:not(.band-close),.hero-bg{background:#fff;box-shadow:0 1px 0 var(--line);border-radius:0}
.band:not(.band-close){color:var(--ink)}
.band:not(.band-close) .lede,.band:not(.band-close) p,.call-band .lede{color:var(--dim)}
.band:not(.band-close) .kicker,.hero-copy .kicker{color:var(--dim)}
.band:not(.band-close) .h1 em,.band:not(.band-close) .h2 em,.hero-copy .h1 em{font-style:normal;color:var(--primary-text)}
.band:not(.band-close) .btn-light,.hero-copy .btn-light{background:var(--btn-grad);color:#fff}
.band:not(.band-close) .btn-light:hover,.hero-copy .btn-light:hover{background:#0C5E36}
.band:not(.band-close) .btn-frost,.hero-copy .btn-frost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--field-line)}
.band:not(.band-close) .btn-frost .ic,.hero-copy .btn-frost .ic{color:var(--primary-text)}
.band:not(.band-close) .pill-band{background:var(--wash);color:var(--pill-text)}
.back{color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.hero-copy{color:var(--ink)}
.hero-copy .lede,.hero-copy .terms{color:var(--dim)}
.hero-proof a{color:var(--ink)}
/* the case-study line is a link to the Leads section, so it looks like one */
.hero-proof .ic{color:var(--primary-text)}
/* forms: white fields, a clear border, bigger labels, a real person on top */
.q-sheet{border-radius:24px;box-shadow:var(--sh-lg);border:0}
.q-who{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line2)}
.q-who img{width:84px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.q-who b{display:block;font:700 17.5px/23px var(--f-head);color:var(--ink)}
.q-who span{display:block;font:500 14.5px/20px var(--f-body);color:var(--dim)}
.field{font:700 15.5px/22px var(--f-head);color:var(--ink)}
.field input,.field select{background-color:#fff;border:1.5px solid var(--field-line);border-radius:14px;transition:border-color .16s,box-shadow .16s}
.field input::placeholder{color:var(--faint);opacity:1}
.field input:hover,.field select:hover,.phonefield:hover{border-color:var(--field-hover)}
.field input:focus,.field select:focus,.phonefield:focus-within{border-color:var(--primary-text);box-shadow:0 0 0 4px var(--wash)}
.phonefield{background:#fff;border-color:var(--field-line);border-radius:14px}
.phonefield .cc{background:var(--bg);color:var(--ink);border-right-color:var(--field-line)}
.phonefield input:hover{border:0}
/* the +1 group draws the only border; the number input inside it has none (it was doubling the right edge) */
.phonefield input,.phonefield input:hover,.phonefield input:focus{border:0;border-radius:0;box-shadow:none}
.qchips span{background:#fff;box-shadow:inset 0 0 0 1.5px var(--field-line)}
.qchips label:hover span{box-shadow:inset 0 0 0 1.5px var(--field-hover)}
.qchips input:checked+span{background:var(--wash);color:var(--pill-text);box-shadow:inset 0 0 0 2px var(--primary-text)}
.consent{font:500 13.5px/19px var(--f-body)}
.consent input{width:24px;height:24px}
.q-sheet .btn-primary,.call-sheet .btn-primary{min-height:60px;font-size:18px}

/* =====================================================================================================
   2026-11-01 layout moves (Kaden: "show me all")
   ===================================================================================================== */
/* F6: the white top ends in a straight line and the content starts below it on the canvas */
.band-page+.sec{padding-top:clamp(40px,5vw,64px)}
.q-band+section .q-sheet{margin-top:40px}
/* F20: the offer and its button on the left, the first-weeks timeline on the right, one section (no sub-heading) */
.offer-grid .sec-head .lede{margin-top:14px;max-width:44ch}
/* F25: the faces row in the home hero (who_row with cls="hero-who"), no rule under it */
.hero-who{margin:22px 0 0;padding-bottom:0;border-bottom:0}
.hero-who .lnk{color:var(--primary-text);font-weight:700}
/* F26: heading above, content below, left-aligned at reading width (home FAQ, About's How it works and Talk to us) */
.stack{max-width:760px}
.stack .chatcard{margin-top:0}
.stack .sec-head p .lnk{white-space:nowrap}
@media (min-width:900px){.team-flip .photo{order:2;justify-self:end;width:min(100%,465px)}}
/* checkers: below 900px the home team photo is a shorter landscape crop, so it does not fill the phone screen */
@media (max-width:899px){.team-flip .photo{aspect-ratio:4/3;max-height:none;width:100%}.team-flip .photo img{object-position:50% 30%}}
/* F7: the sign-off card with their faces closes every page except About (no centered green band) */
.signoff{padding-top:clamp(56px,8vw,96px)}
.sec+.signoff{padding-top:0}
.signoff__card{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;max-width:880px}
.signoff__card img{width:132px;height:88px;border-radius:16px;object-fit:cover}
.signoff__card .h2{max-width:20ch}
.signoff__card p{margin-top:12px;color:var(--dim);max-width:56ch}
.signoff .row-btns{margin-top:22px;align-items:center;gap:14px 22px}
@media (max-width:600px){.signoff__card{grid-template-columns:1fr;gap:16px}.signoff__card img{width:108px;height:72px;border-radius:14px}}
/* F7: video page, the call to action under the player, centered on the player's axis like the caption above it */
.watch__after{max-width:560px;text-align:center;align-items:center}
.watch__actions{justify-content:center}
/* polish (2026-11-01 checkers): the +1 field matches the other inputs (56px outside, 53px inside its 1.5px border);
   the case-study line in the hero is quieter; long list lines break evenly */
.phonefield{min-height:56px}
.phonefield input{min-height:53px}
.vidlist__t,.upd-list li,.is-call .lrow h3,.is-call .lrow p,.chaplist--desc b,.chaplist--desc .d{text-wrap:pretty}
.signoff .nw{white-space:nowrap}
/* F6 step 3: on desktop the sticky phone crossed the straight edge of the white hero and looked split, so the home
   hero sits on the canvas there (phones keep the white top, the phone mockup starts below it) */
@media (min-width:1024px){.hero-bg{background:transparent;box-shadow:none}}
/* checkers round 2 (2026-11-01): one gap, not two, between the home team section and the offer; /call video and form
   tops line up, the video starts at the content edge; the About contact line keeps the phone and its dot together */
section[aria-labelledby="teamH"]+#start{padding-top:0}
@media (min-width:960px){.call-video{padding-top:0}.call-video .watch__player{margin:0}}


/* 2026-11-01 last polish (checker leftovers): numbers never split across lines; the home FAQ and the sign-off card share
   one width; the phone-size team crop keeps their heads in frame; the two buttons under the video match on a phone. */
a[href^="tel:"]{white-space:nowrap}
.stack{max-width:880px}
@media (max-width:899px){.team-flip .photo img{object-position:50% 12%}}
@media (max-width:480px){.watch__actions .btn{width:100%;max-width:320px}}

/* =====================================================================================================
   2026-11-02 sales pass (Kaden: "the watch how it works ... kind of blends in with the background", "make sure it's good
   for us sales wise, not just looks wise"). A real watch button, the video right under the hero, an ask after the Lead
   Radar beat and after the video, the offer and proof on the first screen, a lighter /call.
   ===================================================================================================== */
/* the watch button: white, a 2px green border (#11804A on #fff is 4.9:1), a green play disc; clearly second to the
   filled green See if you qualify */
.watch-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:56px;padding:6px 22px 6px 7px;border:2px solid var(--primary-text);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;font:inherit;box-shadow:var(--sh-sm);transition:background-color .16s var(--ease-q),box-shadow .16s var(--ease-q),transform .1s var(--ease-q)}
.watch-btn:hover{background:var(--wash)}
.watch-btn:active{transform:scale(.98)}
.watch-btn:focus-visible{outline:3px solid var(--primary-text);outline-offset:3px}
.watch-btn__play{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--btn-grad);color:#fff;animation:wbRing 1.4s ease-out 1.2s 2}
.watch-btn__play .ic{width:18px;height:18px;margin-left:2px;color:#fff}
.watch-btn__txt{display:flex;flex-direction:column;align-items:flex-start}
.watch-btn b{font:700 17px/21px var(--f-head);color:var(--ink)}
.watch-btn small{font:600 13.5px/18px var(--f-body);color:var(--dim)}
/* Kaden 2026-11-02: no line under the label, so the label is bigger (the hero has no paragraph now, so the
   buttons sit closer under the headline) */
.watch-btn--solo{min-height:60px;padding-right:26px}.watch-btn--solo b{font:700 19px/24px var(--f-head)}
.watch-btn--solo .watch-btn__play{width:44px;height:44px}
.row-btns:has(.watch-btn--solo) .btn{min-height:60px}
@keyframes wbRing{0%{box-shadow:0 0 0 0 rgba(17,128,74,.45)}100%{box-shadow:0 0 0 12px rgba(17,128,74,0)}}
@media (prefers-reduced-motion:reduce){.watch-btn__play{animation:none}.watch-btn{transition:none}}
@media (max-width:600px){.offer-ask .btn,.offer-ask .watch-btn,.call-watch .watch-btn,.signoff .btn,.signoff .watch-btn,.q-unsure .watch-btn,.qdone .watch-btn,.beat-ask .btn{width:100%;max-width:440px}}

/* hero offer line and proof line */
.hero-offer{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font:600 16px/23px var(--f-body);color:var(--ink);max-width:46ch}
.hero-offer .ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--primary-text)}
.hero-proof a{display:inline-flex;gap:8px;align-items:flex-start;color:var(--ink);font:700 16px/23px var(--f-head);text-decoration:none}
.hero-proof a:hover span{text-decoration:underline}
.hero-proof .ic{flex:none;width:20px;height:20px;margin-top:1px;color:var(--primary-text)}
.desk-only{display:none}
@media (min-width:1024px){.desk-only{display:inline}}

/* the video as a day-grid child: phone order hero, video, rail phone, day; desktop video under the hero beside the sticky phone */
.day-watch{grid-column:main-start/main-end;grid-row:2;padding:8px 0 16px}
.rail{grid-row:3}
.day-main{grid-row:4}
@media (min-width:1024px){.day-watch{grid-row:2;padding:0 0 24px}.rail{grid-row:1/4}.day-main{grid-row:3}}
.radar-grid{display:grid;gap:20px;grid-template-areas:"head" "media" "copy"}
.radar-head{grid-area:head}
.radar-media{grid-area:media}
.radar-copy{grid-area:copy}
.radar-head .lede{margin-top:12px;color:var(--dim);max-width:52ch}
.radar-grid .watch__player,.call-video .watch__player{margin:0 auto;max-width:min(380px,calc(74vh * 9 / 16))}
.radar-grid .watch__player video,.call-video .watch__player video{max-height:74vh}
@media (min-width:900px) and (max-width:1023px),(min-width:1280px){.radar-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-areas:"media head" "media copy";grid-template-rows:auto 1fr;gap:12px 40px;align-items:start}.radar-grid .watch__player{margin:0}}
.chaplist .t{display:inline-flex;gap:6px;align-items:center;color:var(--primary-text)}
.chaplist .t .ic{width:12px;height:12px}
.radar-ask{margin-top:20px;align-items:center;gap:14px 22px}
@media (max-width:600px){.radar-ask .btn{width:100%;max-width:440px}}
.vid-end{margin-top:14px;padding:18px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);display:grid;gap:12px;text-align:center;justify-items:center}
.vid-end[hidden]{display:none}
.vp-ended.is-paused .vp__big{display:none}
/* round 3: on a phone the portrait player fits the visible screen under the header (svh: Safari's toolbars showing),
   so a watch tap that lands it under the header keeps its control row on screen */
@media (max-width:767px){.radar-grid .watch__player,.call-video .watch__player{max-width:min(380px,calc(74vh * 9 / 16),calc((100svh - 104px) * 9 / 16))}
  .radar-grid .watch__player video,.call-video .watch__player video{max-height:min(74vh,calc(100svh - 104px))}}
/* round 3: the home team section's "Lately" lines use the beats' check-list style */
.upd-pts{margin-top:10px;gap:8px}
.upd-pts li{font:600 16.5px/23px var(--f-head);color:var(--ink)}

/* beats */
.beat-note{margin-top:14px;max-width:600px;font:500 16px/24px var(--f-body);color:var(--ink);padding:14px 16px;border-radius:16px;background:var(--wash)}
.beat-ask{margin-top:20px;padding:18px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);max-width:600px}
.beat-ask p{font:600 16.5px/23px var(--f-body);color:var(--ink)}
.beat-ask .row-btns{margin-top:12px;align-items:center;gap:12px 20px}
@media (max-width:1023px){#social .beat-screens{display:none}}

/* sign-off: never wider than the phone (.signoff__card .signoff-alt beats .signoff__card p) */
.signoff__card>div{min-width:0}
.signoff .lnk,.team a[href^="tel:"]{white-space:normal}
.signoff__card .signoff-alt{margin-top:16px;color:var(--ink)}
@media (max-width:767px){.signoff{padding-bottom:96px}}

/* /call (.call-band p.call-proof beats .band:not(.band-close) p) */
.call-band p.call-proof{display:inline-flex;gap:8px;align-items:flex-start;margin-top:12px;font:700 16px/23px var(--f-head);color:var(--ink);text-align:left}
.call-proof .ic{flex:none;width:20px;height:20px;margin-top:1px;color:var(--primary-text)}
.call-video .call-watch{margin:0 0 14px;display:flex;justify-content:center}
.call-band{padding:28px 0 32px}
.call-sec{padding-top:24px}
/* round 3: on a small phone the name and mobile fields both fit on the first screen (375x667) */
@media (max-width:600px){.call-band{padding:20px 0 22px}.call-sec{padding-top:16px}}
/* short laptop screens (1024x768): Get my call clears the fold */
@media (min-width:1024px) and (max-height:800px){.call-band{padding:16px 0 18px}.call-band .h1{font-size:3.2rem}.call-sec{padding-top:12px}}
.chaplist--desc button{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);padding:14px}
.chaplist--desc .t{padding:4px 10px;border-radius:99px;background:var(--wash);font-weight:700}
.chip-play{all:unset;cursor:pointer;margin-top:14px;display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:99px;background:var(--wash);color:var(--primary-text);font:700 15px/1 var(--f-head)}
.chip-play .ic{width:14px;height:14px}
.chip-play:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}
@media (max-width:1023px){.is-call #menuBtn{display:none}}
.qdone .qdone__next{margin-top:12px}
.qdone .watch-btn{margin-top:14px}

/* forms: the consent text is smaller; the sentence and checkbox are unchanged */
.consent{font:500 12.5px/17px var(--f-body);margin:4px 0 14px}
.q-unsure{margin-top:32px;display:grid;gap:12px;justify-items:start}
.q-after+.q-unsure{max-width:640px;margin-left:auto;margin-right:auto}

/* draft check 2026-11-02 */
/* the bar's right-hand slot holds the chat launcher, which never shows on the form pages on phones (js/site.js) */
.is-call .actionbar,.is-qualify .actionbar{padding-right:18px}
/* the four-things cards in one row are the same height */
.chaplist--desc button{height:100%}
/* small green text on the canvas or the wash: the darker green reaches 4.5:1 (#11804A is 4.26 to 4.31:1 there) */
.chaplist .t,.chaplist--desc .t,.chip-play{color:var(--pill-text)}

/* Kaden 2026-11-02: every month's update as thumbnails right under the update player (/updates and /video).
   On /updates at full width the side list shows them instead; below that the side list's copy is hidden. */
.wg__more{margin-top:14px;min-width:0}
.wg__moreh{font:700 15px/1.25 var(--f-head);color:var(--ink);margin:0 0 10px}
.vidlist--strip{grid-auto-flow:column;grid-auto-columns:minmax(210px,260px);justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px}
.vidlist--strip>li{scroll-snap-align:start}
.vidlist--strip .vidlist__row{flex-direction:column;gap:8px;height:100%;box-shadow:inset 0 0 0 1.5px var(--line)}
.vidlist--strip .vidlist__row[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--primary)}
.vidlist--strip .vidlist__thumb{flex-basis:auto;width:100%}
.vidlist--strip .vidlist__meta{padding:0 4px 4px}
.vidlist--strip .vidlist__row[aria-current="true"] .vidlist__m::after{content:" \00b7  Playing";color:var(--pill-text);font-weight:700}
@media (min-width:1061px){.wg .wg__more{display:none}}
@media (max-width:1060px){.wg__side .wg__sideh,.wg__side #wg-list{display:none}}
/* a portrait month (September) on a wide screen: player and title side by side, the thumbnails underneath */
@media (min-width:761px){.wg__main:has(>.wg__player.is-portrait)>.wg__info{order:1}
  .wg__main:has(>.wg__player.is-portrait)>.wg__more{order:2;grid-column:1/-1}}