/* NINJAworkspace — TotalControl
   Palette matches the investor deck: lighter forest, moss, recycled paper. */

:root{
  --forest:#24634C;
  --forest-deep:#1B4E3C;
  --panel:#2E735A;
  --panel-edge:#3D8469;
  --moss:#C9E7A4;
  --moss-mid:#8FBF6A;
  --pine:#266B52;
  --paper:#F4F2E9;
  --paper-2:#FBFAF6;
  --white:#FFFFFF;
  --ink:#16241E;
  --muted:#5E6E63;
  --muted-d:#D9E8DE;
  --line:#DCD8C8;
  --clay:#B0552A;
  --clay-lt:#F2A97A;
  --serif:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --r:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pine);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}

h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(38px,5.6vw,62px)}
h2{font-size:clamp(29px,3.9vw,44px)}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.25}
h4{font-size:19px;line-height:1.3}
p{max-width:70ch}

.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pine);
  margin-bottom:14px;display:block;
}
.on-dark .eyebrow,.eyebrow.light{color:var(--moss)}
.lede{font-size:clamp(17px,1.7vw,20px);color:var(--muted);line-height:1.6}
.on-dark .lede{color:var(--muted-d)}
.small{font-size:14.5px;color:var(--muted)}
.tiny{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,242,233,.93);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.logo{font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo b{color:var(--pine);font-weight:700}
.logo span{font-weight:400}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{color:var(--ink);font-size:15.5px;font-weight:500}
.nav-links a:hover{color:var(--pine);text-decoration:none}
.nav-links a.here{color:var(--pine);font-weight:600}
/* the generic .nav-links a rule outranks .btn-primary — restore button contrast */
.nav-links a.btn-primary{color:var(--paper-2)}
.nav-links a.btn-primary:hover{color:var(--paper-2)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:15px;cursor:pointer;color:var(--ink);font-family:var(--sans)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:8px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--pine);color:var(--paper-2)}
.btn-primary:hover{background:var(--forest-deep);color:var(--paper-2)}
.btn-moss{background:var(--moss);color:var(--forest-deep)}
.btn-moss:hover{background:#DAF0BB;color:var(--forest-deep)}
.btn-ghost{border-color:var(--pine);color:var(--pine);background:transparent}
.btn-ghost:hover{background:rgba(38,107,82,.07);color:var(--pine)}
.btn-ghost-lt{border-color:rgba(201,231,164,.55);color:var(--moss);background:transparent}
.btn-ghost-lt:hover{background:rgba(201,231,164,.12);color:var(--moss)}
.btn-sm{padding:9px 17px;font-size:14.5px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- sections ---------- */
section{padding:84px 0}
section.tight{padding:60px 0}
.on-dark{background:var(--forest);color:var(--paper)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper)}
.on-deep{background:var(--forest-deep);color:var(--paper)}
.on-deep h2,.on-deep h3{color:var(--paper)}
.alt{background:var(--paper-2)}
.sec-head{max-width:760px;margin-bottom:48px}
.sec-head p{margin-top:16px}

/* ---------- hero ---------- */
.hero{background:var(--forest);color:var(--paper);padding:40px 0 34px}
.hero h1{color:var(--paper);max-width:17ch}
.hero .kicker{
  font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.2vw,25px);
  color:var(--moss);margin-top:22px;max-width:32ch;line-height:1.35;
}
.hero p.lede{margin-top:22px;max-width:60ch;color:var(--muted-d)}
.hero-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:56px;align-items:center}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:0 1px 3px rgba(20,40,30,.05);
}
.on-dark .card,.on-deep .card{background:var(--panel);border-color:var(--panel-edge);box-shadow:none}
.on-dark .card p,.on-deep .card p{color:var(--muted-d)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--pine);color:var(--paper-2);
  font-weight:700;font-size:15px;margin-bottom:16px;flex:none;
}
.on-dark .num,.on-deep .num{background:var(--moss);color:var(--forest-deep)}
.card h3,.card h4{margin-bottom:9px}
.card p{font-size:15.5px;color:var(--muted)}

/* ---------- stat ---------- */
.stat{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,50px);
  line-height:1;color:var(--pine);letter-spacing:-.02em}
.on-dark .stat,.on-deep .stat{color:var(--moss)}
.stat-label{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.on-dark .stat-label,.on-deep .stat-label{color:var(--muted-d)}

/* ---------- leak table ---------- */
.leak{width:100%;border-collapse:collapse}
.leak td{padding:11px 0;border-bottom:1px solid rgba(201,231,164,.16);font-size:15.5px}
.leak td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.leak tr.hot td{color:var(--paper)}
.leak tr.hot td:last-child{color:var(--clay-lt)}
.leak tr:not(.hot) td{color:var(--muted-d)}
.leak tr:not(.hot) td:last-child{color:var(--paper)}
.leak tr.tot td{border-bottom:none;border-top:2px solid var(--moss);
  padding-top:15px;font-weight:700;color:var(--paper);font-size:17px}

/* ---------- checklist ---------- */
.check{list-style:none;display:grid;gap:11px}
.check li{position:relative;padding-left:30px;font-size:15.5px;color:var(--muted)}
.on-dark .check li,.on-deep .check li{color:var(--muted-d)}
.check li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;background:var(--moss-mid);
}
.on-dark .check li::before,.on-deep .check li::before{background:var(--moss)}

/* ---------- price ---------- */
.price-box{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.price-half{padding:34px}
.price-half + .price-half{border-left:1px solid var(--line)}
.price-fig{font-family:var(--serif);font-size:clamp(38px,5vw,54px);font-weight:600;
  line-height:1;color:var(--ink);letter-spacing:-.02em}
.price-fig small{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-left:8px}
.strike{color:var(--muted);font-size:14.5px;margin-top:9px}

/* ---------- assessment band ---------- */
.band{background:var(--moss);color:var(--forest-deep);border-radius:var(--r);padding:44px}
.band h2{color:var(--forest-deep);max-width:20ch}
.band p{color:#2C5A44;margin-top:14px}
.band .btn-primary{background:var(--forest-deep)}
.band .btn-primary:hover{background:#123528}

/* ---------- steps ---------- */
.step-day{font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine);margin-bottom:8px}
.on-dark .step-day,.on-deep .step-day{color:var(--moss)}

/* ---------- table ---------- */
.cmp-scroll{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:660px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:center;font-size:15px;
  border-bottom:1px solid var(--line)}
table.cmp th:first-child,table.cmp td:first-child{text-align:left;font-weight:600}
table.cmp thead th{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);vertical-align:bottom}
table.cmp td{color:var(--muted)}
table.cmp .us{background:var(--forest);color:var(--paper);font-weight:600}
table.cmp thead .us{color:var(--moss)}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{font-family:var(--serif);font-size:19px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pine);font-family:var(--sans);font-weight:600;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);font-size:15.5px}

/* ---------- footer ---------- */
footer{background:var(--forest-deep);color:var(--muted-d);padding:56px 0 34px;font-size:15px}
footer h4{color:var(--paper);font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:15px}
footer a{color:var(--muted-d)}
footer a:hover{color:var(--moss)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-links{list-style:none;display:grid;gap:9px}
.foot-bottom{border-top:1px solid rgba(198,219,205,.16);margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px}
.foot-logo{font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--paper)}
.foot-logo b{color:var(--moss)}

/* ---------- forms ---------- */
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--moss-mid);outline-offset:1px;border-color:var(--pine)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  /* header collapses into the Menu toggle up to 960px (was 760): the desktop nav row can't shrink
     and needs ~937px, so at 761-960 it ran off the right edge and clipped the Free Leak Assessment
     button. The sticky bottom CTA bar stays phone-only (760, further down). */
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  /* transparent, not none: `none` also erased the Book a Demo outline's bottom edge */
  .nav-links .btn{margin-top:12px;text-align:center;border-bottom:1.5px solid transparent}
  .nav-links .btn-ghost{border-bottom-color:var(--pine)}
  .nav-toggle{display:block}
}
/* tablets (761-960): the open menu is a dropdown panel under the Menu button, not full-width rows */
@media(min-width:761px) and (max-width:960px){
  .nav-links{left:auto;right:24px;width:min(360px,calc(100% - 48px));border:1px solid var(--line);
    border-top:0;border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(20,40,30,.14);padding:8px 20px 18px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  section{padding:62px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .price-box{grid-template-columns:1fr}
  .price-half + .price-half{border-left:none;border-top:1px solid var(--line)}
  .band{padding:32px 24px}
  .foot-grid{grid-template-columns:1fr}
}

/* ================= phone mockup ================= */
.phone-wrap{position:relative;display:flex;justify-content:center;padding:8px 0}
.phone{
  width:298px;max-width:100%;background:#0E1A15;border-radius:34px;padding:9px;
  box-shadow:0 22px 50px rgba(8,26,18,.42),0 0 0 1.5px rgba(201,231,164,.16);
  flex:none;
}
.phone-screen{background:var(--paper-2);border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;height:566px}
.ph-status{display:flex;justify-content:space-between;align-items:center;
  padding:9px 16px 4px;font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.ph-head{display:flex;align-items:center;gap:10px;padding:8px 14px 11px;
  background:var(--forest);color:var(--paper)}
.ph-logo{width:34px;height:34px;border-radius:9px;background:var(--moss);color:var(--forest-deep);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;
  letter-spacing:.03em;flex:none}
.ph-head b{display:block;font-size:13.5px;line-height:1.25;font-weight:600}
.ph-head span{display:block;font-size:10.5px;color:var(--muted-d);line-height:1.3}
.ph-body{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:9px;
  justify-content:flex-end;background:var(--paper);overflow:hidden}
.bub{max-width:82%;padding:9px 12px;border-radius:14px;font-size:12.4px;line-height:1.42}
.bub.in{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:5px;
  color:var(--ink);align-self:flex-start}
.bub.out{background:var(--moss);color:var(--forest-deep);border-bottom-right-radius:5px;
  align-self:flex-end;font-weight:500}
.bub .who{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pine);margin-bottom:3px}
.bub.offer{background:var(--forest);color:var(--paper);border:none;max-width:88%}
.bub.offer b{display:block;font-size:12.8px;margin-bottom:3px;color:var(--moss)}
.bub.offer span.t{display:block;color:var(--muted-d);font-size:11.8px;line-height:1.4}
.ph-btn{display:inline-block;margin-top:9px;background:var(--moss);color:var(--forest-deep);
  padding:6px 13px;border-radius:7px;font-size:11.5px;font-weight:700}
.ph-eta{display:flex;align-items:center;gap:7px;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.ph-dot{width:7px;height:7px;border-radius:50%;background:var(--moss-mid);flex:none}
.ph-input{padding:10px 14px;background:var(--white);border-top:1px solid var(--line);
  font-size:11.5px;color:#A7B0A6}
.phone-badge{
  position:absolute;right:-8px;top:44px;background:var(--moss);color:var(--forest-deep);
  border-radius:12px;padding:13px 16px;max-width:186px;text-align:left;
  box-shadow:0 12px 26px rgba(8,26,18,.32);
}
.phone-badge b{display:block;font-family:var(--serif);font-size:31px;line-height:1;font-weight:700}
.phone-badge span{display:block;font-size:11.5px;line-height:1.34;margin-top:5px;color:#2C5A44}
@media(max-width:1080px){.phone-badge{right:-4px;max-width:168px;padding:11px 13px}
  .phone-badge b{font-size:27px}}
@media(max-width:760px){
  .phone-badge{position:static;max-width:none;margin-top:20px;text-align:center}
  .phone-wrap{flex-direction:column;align-items:center}
}

/* hero variant that carries the phone */
.hero-phone{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
@media(max-width:960px){.hero-phone{grid-template-columns:1fr;gap:38px}}

/* ================= phone: home-screen w/ branded icon ================= */
.phone-home-body{flex:1;background:linear-gradient(168deg,#2E735A 0%,#1B4E3C 62%,#123528 100%);
  padding:18px 14px 12px;display:flex;flex-direction:column}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px}
.ph-app{display:flex;flex-direction:column;align-items:center;gap:5px}
.ph-ico{width:46px;height:46px;border-radius:12px;background:rgba(244,242,233,.16);
  border:1px solid rgba(244,242,233,.10);display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1}
.ph-app span{font-size:8.6px;color:rgba(244,242,233,.55);letter-spacing:.02em;max-width:56px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-app.yours .ph-ico{position:relative;background:var(--moss);border:none;
  box-shadow:0 6px 16px rgba(8,26,18,.4);color:var(--forest-deep);font-family:var(--serif);
  font-weight:700;font-size:17.5px;letter-spacing:.01em}
.ph-app.yours span{color:#fff;font-weight:600}
.ph-badge-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;
  background:var(--clay);color:#fff;font-family:var(--sans);font-weight:700;font-size:10.5px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.ph-notif{margin-top:auto;background:rgba(251,250,246,.96);border-radius:13px;padding:10px 12px;
  box-shadow:0 10px 24px rgba(8,26,18,.35)}
.ph-notif .n-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ph-notif .n-ico{width:15px;height:15px;border-radius:4px;background:var(--pine);color:var(--moss);
  font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif)}
.ph-notif .n-app{font-size:9px;font-weight:600;letter-spacing:.06em;color:#8A948C;
  text-transform:uppercase}
.ph-notif .n-time{margin-left:auto;font-size:9px;color:#A7B0A6}
.ph-notif b{display:block;font-size:11.8px;color:var(--ink);line-height:1.35}
.ph-notif p{font-size:11px;color:#5E6E63;line-height:1.35;margin-top:1px}
.ph-dock{display:flex;justify-content:center;gap:12px;margin-top:12px;padding-top:10px}
.ph-dock .ph-ico{width:42px;height:42px;background:rgba(244,242,233,.13)}

/* ================= Miller rework ================= */
.free-pill{display:inline-flex;gap:9px;align-items:center;background:rgba(201,231,164,.14);
  border:1px solid rgba(201,231,164,.42);color:var(--moss);border-radius:999px;
  padding:7px 16px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:20px}
.free-pill b{background:var(--moss);color:var(--forest-deep);border-radius:999px;
  padding:2px 10px;font-size:12px;letter-spacing:.08em}
.quote-band{background:var(--forest-deep);padding:64px 0}
.quote-band p{font-family:var(--serif);font-weight:500;
  font-size:clamp(21px,2.6vw,30px);line-height:1.42;color:var(--moss-lt,#DEF0C8);
  max-width:34ch;margin:0 auto;text-align:center}
.quote-band p b{color:#fff;font-style:normal}
.leak-line{font-family:var(--serif);font-weight:800;font-size:clamp(24px,3vw,34px);
  line-height:1.25;color:var(--ink)}
.leak-line em{color:var(--clay);font-style:normal}

/* offer stack */
.offer-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.offer-stack{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r);
  padding:34px;position:relative}
.offer-free{position:absolute;top:-19px;right:26px;background:var(--moss);color:var(--forest-deep);
  font-family:var(--serif);font-weight:700;font-size:19px;border-radius:10px;padding:7px 18px;
  box-shadow:0 10px 22px rgba(8,26,18,.35);letter-spacing:.04em}
.offer-row{display:flex;gap:14px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid rgba(201,231,164,.14)}
.offer-row:last-of-type{border-bottom:none}
.offer-tick{width:22px;height:22px;border-radius:50%;background:var(--moss);color:var(--forest-deep);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;
  margin-top:2px}
.offer-row p{font-size:15.5px;color:var(--paper);line-height:1.5;max-width:none}
.offer-row p b{color:var(--moss)}

/* with / without */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs-card{border-radius:var(--r);padding:30px;border:1px solid var(--line);background:var(--white)}
.vs-card.bad{background:#F4EDE6;border-color:#E4D5C6}
.vs-card h4{margin-bottom:14px;font-size:20px}
.vs-card.bad h4{color:var(--clay)}
.vs-card.good h4{color:var(--pine)}
.vs-card ul{list-style:none;display:grid;gap:10px}
.vs-card li{position:relative;padding-left:28px;font-size:15px;color:var(--muted);line-height:1.5}
.vs-card.good li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--pine);font-weight:800}
.vs-card.bad li::before{content:"\2715";position:absolute;left:0;top:0;color:var(--clay);font-weight:800}
.stakes-line{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.2vw,25px);
  line-height:1.45;color:var(--moss-lt,#DEF0C8);max-width:44ch}
@media(max-width:900px){.offer-wrap{grid-template-columns:1fr;gap:36px}}
@media(max-width:760px){.vs-grid{grid-template-columns:1fr}}

/* ================= before / after ================= */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.ba-col{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:11px}
.ba-col.bad{background:#EFE7DD;border:1px solid #E2D2C0}
.ba-col.good{background:var(--forest);border:1px solid var(--panel-edge)}
.ba-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.ba-col.bad .ba-tag{color:var(--clay)}
.ba-col.good .ba-tag{color:var(--moss)}
.ba-chip{background:var(--white);border-radius:12px;padding:11px 14px;font-size:13.5px;
  line-height:1.4;box-shadow:0 2px 6px rgba(20,40,30,.07)}
.ba-chip b{display:block;font-size:13.5px;color:var(--ink)}
.ba-chip span{color:#8A948C;font-size:12.5px}
.ba-col.bad .ba-chip{opacity:.9}
.ba-col.bad .ba-chip b{color:#7A6A58}
.ba-chip.push{display:flex;gap:9px;align-items:flex-start}
.ba-chip.push .n-ico{width:20px;height:20px;border-radius:5px;background:var(--pine);color:var(--moss);
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);flex:none;margin-top:2px}
.ba-chip.reply{background:var(--moss);color:var(--forest-deep);font-weight:600;align-self:flex-end;
  max-width:88%}
.ba-chip.review{font-weight:600;color:var(--ink)}
.ba-chip.review i{color:#E8B33C;font-style:normal;letter-spacing:2px;margin-right:6px}
.ba-result{margin-top:auto;padding-top:14px;font-family:var(--serif);font-weight:500;
  font-size:15.5px;line-height:1.45}
.ba-col.bad .ba-result{color:#8A6C50}
.ba-col.good .ba-result{color:var(--moss-lt,#DEF0C8)}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}}

/* ================= dock-style magnified icon ================= */
.ph-app.yours .ph-ico{
  transform:scale(1.52);
  transform-origin:50% 100%;
  z-index:3;
  box-shadow:0 10px 24px rgba(8,26,18,.5);
  animation:dock-pop 1s cubic-bezier(.34,1.56,.64,1) .5s both;
}
.ph-app.near .ph-ico{transform:scale(1.14);transform-origin:50% 100%;z-index:2}
.ph-app.yours span{font-size:9.4px;letter-spacing:.02em;max-width:76px}
@keyframes dock-pop{
  0%{transform:scale(1)}
  62%{transform:scale(1.66)}
  82%{transform:scale(1.46)}
  100%{transform:scale(1.52)}
}
@media (prefers-reduced-motion: reduce){
  .ph-app.yours .ph-ico{animation:none}
}

/* ================= headline CTA ================= */
.h1-cta{color:var(--moss);text-decoration:none}
.h1-cta:hover{text-decoration:none;color:#DAF0BB}
.h1-nowrap{white-space:nowrap}
.h1-arrow{display:inline-flex;align-items:center;justify-content:center;
  font-size:.42em;width:1.75em;height:1.75em;border-radius:50%;
  background:var(--moss);color:var(--forest-deep);font-weight:800;
  line-height:1;transition:.15s;position:relative;top:-.14em;
  margin-left:.7em;vertical-align:middle}
.h1-cta:hover .h1-arrow{background:#DAF0BB;transform:translateX(5px)}

/* anchors must clear the 70px sticky header */
[id]{scroll-margin-top:92px}

/* clickable FREE pill */
a.free-pill{cursor:pointer;transition:.15s}
a.free-pill:hover{background:rgba(201,231,164,.24);text-decoration:none;transform:translateY(-1px)}

/* big time-flag on the assessment hub */
.time-flag{display:inline-flex;align-items:center;gap:12px;margin-top:24px;
  font-family:var(--serif);font-weight:800;color:var(--moss);
  font-size:clamp(22px,2.8vw,32px);line-height:1.1;letter-spacing:-.01em}
.time-flag svg{flex:none;width:1em;height:1em}

/* assessment hub: trade chooser in the hero */
.choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:600px;margin-top:26px}
.choose-grid a{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--moss);color:var(--forest-deep);border-radius:10px;
  padding:18px 12px;font-weight:700;font-size:17px;text-decoration:none;
  font-family:var(--sans);text-align:center;transition:.15s;line-height:1.2}
.choose-grid a:hover{background:#DAF0BB;transform:translateY(-1px);text-decoration:none}
.choose-grid a span{font-size:.85em}

/* mobile heroes were desktop-sized — tighten across the site */
@media(max-width:760px){
  .hero{padding:28px 0 36px}
  .hero h1{font-size:clamp(33px,9vw,38px)}
  .time-flag{margin-top:16px;font-size:clamp(20px,6vw,24px)}
}

/* assessment hub: keep the two trade cards side by side at every width */
.grid.keep2{grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){
  .keep2 .card{padding:18px 15px}
  .keep2 h3{font-size:18px}
  .keep2 .card p{font-size:13.5px;line-height:1.5}
  .keep2 .btn{width:100%;padding:11px 8px;font-size:13.5px;white-space:normal;text-align:center}
  .keep2 .btn-row{margin-top:16px}
}

/* trade cards: pin the CTA to the bottom edge regardless of text length */
.keep2 .card{display:flex;flex-direction:column}
.keep2 .btn-row{margin-top:auto;padding-top:20px}

/* "AI" pops in the hero eyebrow */
.ai-pop{font-size:1.65em;color:var(--paper);font-weight:800;letter-spacing:.06em;
  vertical-align:-.09em;margin-right:1px}

/* ================= audit batch: conversion + trust + mobile ================= */
/* a11y: skip link, toggle size, dark-card body contrast */
.skip{position:absolute;left:-9999px;top:0;background:var(--moss);color:var(--forest-deep);
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;z-index:200}
.skip:focus{left:0}
.nav-toggle{min-height:44px;min-width:64px}

/* hero CTA block */
.h1-free{color:var(--moss)}
.hero-cta{margin-top:26px}
.btn-xl{font-size:17px;padding:16px 30px;display:inline-flex;align-items:center;gap:10px}
.btn-xl svg{width:1em;height:1em}
.cta-micro{margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--moss)}
.g-line{margin-top:16px;font-size:13.5px;color:var(--muted-d);max-width:52ch;line-height:1.5;
  display:flex;gap:9px;align-items:flex-start}
.g-line svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--moss)}
.g-line a{color:var(--moss)}

/* trust stat strip */
.stat-strip{display:flex;gap:8px 26px;flex-wrap:wrap;align-items:center;margin-top:26px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--muted-d)}
.stat-strip b{color:#fff;font-family:var(--serif);font-size:15px;margin-right:4px}
.stat-strip a{color:var(--muted-d);text-decoration:underline;text-underline-offset:2px}
section:not(.on-dark):not(.on-deep) .stat-strip{border-top-color:var(--line);color:var(--muted)}
section:not(.on-dark):not(.on-deep) .stat-strip b{color:var(--ink)}
section:not(.on-dark):not(.on-deep) .stat-strip a{color:var(--muted)}
/* the strip's two full-width rows: who these numbers belong to, and whose they are not */
.stat-strip .strip-lead,.stat-strip .strip-note{flex:1 0 100%;display:block}
.stat-strip .strip-lead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  margin-bottom:4px;opacity:.9}
.stat-strip .strip-note{font-size:12.5px;margin-top:6px;opacity:.85;max-width:62ch}
.strip-lg .stat-strip .strip-lead{font-size:12.5px;margin-bottom:10px}
.strip-lg .stat-strip .strip-note{font-size:14px;margin-top:12px}
/* the store sentence is no longer the last child — keep it inline, and never treat a note as a stat */
.strip-lg .stat-strip span.strip-lead,.strip-lg .stat-strip span.strip-note{display:block}

/* guarantee box (pricing) */
.g-box{background:var(--forest);color:var(--paper);border-radius:var(--r);padding:26px 28px;
  margin-top:26px;display:flex;gap:18px;align-items:flex-start}
.g-box svg{flex:none;width:34px;height:34px;color:var(--moss);margin-top:3px}
.g-box h4{color:#fff;margin-bottom:6px}
.g-box p{color:var(--muted-d);font-size:14.5px}
.g-box a{color:var(--moss)}

/* forms */
.form-ok{background:var(--moss-soft,#E4F0D2);border:1px solid var(--moss);border-radius:10px;
  padding:18px;font-size:15px;line-height:1.55;color:var(--ink)}
.form-ok a{color:var(--pine);font-weight:600}
.form-err{margin-top:12px;background:#F4E3D7;border:1px solid var(--clay);border-radius:8px;
  padding:12px 14px;font-size:13.5px;color:#7A3A1A}
.form-err a{color:var(--clay);font-weight:700}

/* founder block */
.founder{display:flex;gap:16px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:20px}
.founder .fava{flex:none;width:58px;height:58px;border-radius:50%;background:var(--pine);
  color:var(--paper);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:800;font-size:20px}
.founder b{display:block;font-size:16.5px}
.founder .frole{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pine);margin:2px 0 8px}
.founder p{font-size:13.5px;color:var(--muted);line-height:1.5}

/* mini command-center preview */
.mini-dash{background:#132B21;border-radius:14px;padding:18px;border:1px solid #2A4A3A;
  box-shadow:0 18px 40px rgba(15,36,27,.35);font-family:var(--sans);color:#DCE8DF}
.md-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.md-top b{font-family:var(--serif);font-size:14px;color:#fff}
.md-live{font-size:10px;font-weight:700;letter-spacing:.1em;color:#8FD98A;display:flex;gap:6px;align-items:center}
.md-live i{width:7px;height:7px;border-radius:50%;background:#8FD98A;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.md-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.md-kpi{background:#1B3A2D;border-radius:8px;padding:10px}
.md-kpi b{display:block;font-family:var(--serif);font-size:17px;color:#fff}
.md-kpi span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#9DB8A6}
.md-kpi.warn b{color:#F2A97A}
.md-row{display:flex;align-items:center;gap:10px;background:#1B3A2D;border-radius:8px;
  padding:9px 12px;margin-bottom:6px;font-size:12px}
.md-row .nm{flex:1;color:#fff;font-weight:600}
.md-row .bar{flex:1.4;height:5px;border-radius:3px;background:#0F241B;overflow:hidden}
.md-row .bar i{display:block;height:100%;border-radius:3px}
.md-risk{font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:999px}
.md-risk.hi{background:#4A2A18;color:#F2A97A}
.md-risk.md{background:#4A3F18;color:#E8D27A}
.md-risk.ok{background:#1E4230;color:#8FD98A}

/* sticky mobile CTA */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .sticky-cta .btn{width:100%;text-align:center;padding:14px;font-size:15.5px}
  body.has-sticky{padding-bottom:74px}
  .logo span{display:none}
  .grid.g4{grid-template-columns:1fr 1fr}
  .grid.g4 .card{padding:18px 14px}
  .hide-m{display:none !important}
}
/* collapsed menu (<=960, see header rules above): the two buttons lead the dropdown */
@media(max-width:960px){
  .nav-links .btn-primary{order:-2}
  .nav-links .btn-ghost{order:-1}
}

/* call-or-text pill above contact form */
.calltext-pill{display:inline-flex;align-items:center;gap:9px;background:var(--pine);
  color:var(--paper);border-radius:999px;padding:12px 22px;font-weight:700;font-size:16px;
  text-decoration:none;transition:.15s;margin-bottom:12px}
.calltext-pill:hover{background:var(--forest);color:var(--paper);text-decoration:none;
  transform:translateY(-1px)}
.calltext-pill svg{width:18px;height:18px;flex:none}
/* success-state CTA button */
.form-ok .ok-btn{display:inline-block;margin-top:12px;background:var(--pine);color:var(--paper);
  border-radius:9px;padding:12px 22px;font-weight:700;text-decoration:none;font-size:15px}
.form-ok .ok-btn:hover{background:var(--forest);color:var(--paper);text-decoration:none}

/* struck-through regular price */
.was{text-decoration:line-through;text-decoration-color:var(--clay);
  text-decoration-thickness:2px;opacity:.75}

/* ================= live leak ticker ================= */
.ticker{background:var(--forest-deep,#152B21);color:var(--paper);padding:26px 0;
  border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge)}
.ticker-in{display:flex;gap:28px 40px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.tk-main{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tk-num{font-family:var(--serif);font-weight:800;font-size:clamp(34px,6.2vw,52px);
  color:var(--clay-lt,#F2A97A);font-variant-numeric:tabular-nums;line-height:1;
  letter-spacing:-.02em;transition:opacity .12s}
.tk-num.blip{opacity:.72}
.tk-label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moss)}
.tk-sub{font-size:14px;color:var(--muted-d);margin-top:8px;line-height:1.5;max-width:46ch}
.tk-you{background:rgba(242,169,122,.12);border:1px solid rgba(242,169,122,.35);
  border-radius:12px;padding:14px 20px;text-align:center;flex:none}
.tk-you b{display:block;font-family:var(--serif);font-size:26px;color:var(--clay-lt,#F2A97A);
  font-variant-numeric:tabular-nums;line-height:1.1}
.tk-you span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);
  display:block;margin-top:5px}
.tk-rate{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted-d)}
.tk-rate b{color:#fff;font-family:var(--serif)}
@media(max-width:700px){.ticker-in{flex-direction:column;align-items:flex-start}
  .tk-you{width:100%;text-align:left}}

/* compact in-hero ticker */
.tk-inline{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(242,169,122,.12);border:1px solid rgba(242,169,122,.38);
  border-radius:12px;padding:11px 18px;margin-top:20px}
.tk-inline .dot{width:8px;height:8px;border-radius:50%;background:var(--clay-lt,#F2A97A);
  flex:none;animation:pulse 1.8s infinite}
.tk-inline .big{font-family:var(--serif);font-weight:800;font-size:clamp(20px,3.4vw,26px);
  color:var(--clay-lt,#F2A97A);font-variant-numeric:tabular-nums;line-height:1;
  transition:opacity .12s}
.tk-inline .big.blip{opacity:.7}
.tk-inline .txt{font-size:13px;color:var(--muted-d);line-height:1.4}
.tk-inline .txt b{color:#fff;font-weight:600}
@media(max-width:700px){.tk-inline{padding:10px 14px;gap:9px;margin-top:16px}
  .tk-inline .txt{font-size:12px}}

/* rotating home-screen notification */
.ph-notif{transition:opacity .45s ease, transform .45s ease}
.ph-notif.swap{opacity:0;transform:translateY(6px)}

/* command center — shared by / and /command-center */

.dc-wrap{max-width:1080px;margin:0 auto;padding:40px 18px 80px}
.dc-app{background:#132B21;border-radius:18px;border:1px solid #2A4A3A;overflow:hidden;
  box-shadow:0 30px 70px rgba(15,36,27,.4);font-family:var(--sans);color:#DCE8DF}
.dc-top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;
  background:#0F241B;border-bottom:1px solid #2A4A3A;flex-wrap:wrap;gap:10px}
.dc-top b{font-family:var(--serif);color:#fff;font-size:16px}
.dc-top .md-live{font-size:11px}
.dc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 22px}
.dc-kpi{background:#1B3A2D;border-radius:10px;padding:14px}
.dc-kpi b{display:block;font-family:var(--serif);font-size:24px;color:#fff}
.dc-kpi span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#9DB8A6}
.dc-kpi.warn b{color:#F2A97A}
.dc-main{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;padding:0 22px 22px}
.dc-panel{background:#1B3A2D;border-radius:12px;padding:16px}
.dc-panel h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:12px;font-family:var(--sans)}
.dc-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid #24463A;
  font-size:13px;flex-wrap:wrap}
.dc-row:last-child{border-bottom:0}
.dc-nm{flex:1.4;min-width:130px}
.dc-nm b{display:block;color:#fff;font-weight:600}
.dc-nm span{font-size:11px;color:#9DB8A6}
.dc-bar{flex:1;min-width:80px;height:6px;border-radius:3px;background:#0F241B;overflow:hidden}
.dc-bar i{display:block;height:100%}
.dc-act{background:transparent;border:1px solid #3D8469;color:#C9E7A4;border-radius:7px;
  padding:6px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.dc-act:hover{background:#C9E7A4;color:#0F241B}
.dc-count{text-align:center;padding:18px 10px;background:#0F241B;border-radius:10px;margin-bottom:14px}
.dc-count b{font-family:var(--serif);font-size:30px;color:#8FD98A;display:block}
.dc-count span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9DB8A6}
.dc-feed-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  padding:8px 2px;border-bottom:1px solid #24463A;color:#DCE8DF}
.dc-feed-row:last-child{border-bottom:0}
.dc-feed-row em{color:#9DB8A6;font-style:normal;flex:none}
.dc-row2{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;padding:0 22px 22px}
.ai-panel .ai-q{background:#0F241B;border:1px solid #3D8469;border-radius:10px;padding:12px 14px;
  color:#9DB8A6;font-size:13px;margin-bottom:10px}
#ai-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ai-chip{background:transparent;border:1px solid #3D8469;color:#C9E7A4;border-radius:999px;
  padding:7px 12px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.ai-chip.on,.ai-chip:hover{background:#C9E7A4;color:#0F241B}
#ai-answer{background:#0F241B;border-radius:10px;padding:14px;font-size:13px;line-height:1.6;
  color:#DCE8DF;min-height:112px}
#ai-answer::after{content:'▍';color:#8FD98A;animation:pulse 1s infinite}
.auto-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #24463A;
  font-size:12.5px}
.auto-row:last-child{border-bottom:0}
.auto-dot{width:8px;height:8px;border-radius:50%;background:#8FD98A;flex:none;
  animation:pulse 2.2s infinite}
.auto-row b{color:#fff;font-weight:600;flex:1}
.auto-row span{color:#9DB8A6;flex:none}
.ob-row{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:7px 2px;
  border-bottom:1px solid #24463A;animation:fadein .5s ease}
.ob-row:last-child{border-bottom:0}
.ob-arrow{color:#8FD98A;flex:none}
.ob-what{color:#fff;font-weight:600}
.ob-who{color:#9DB8A6;flex:1}
.ob-row em{color:#8FD98A;font-style:normal;flex:none;font-size:11px}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:820px){.dc-kpis{grid-template-columns:1fr 1fr}.dc-main{grid-template-columns:1fr}
.dc-row2{grid-template-columns:1fr}}


/* condensed hero ticker — sits between the two headline lines */
.tk-tight{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(242,169,122,.13);border:1px solid rgba(242,169,122,.4);
  border-radius:11px;padding:10px 16px;margin:16px 0 14px;max-width:640px}
.tk-tight .dot{width:8px;height:8px;border-radius:50%;background:var(--clay-lt,#F2A97A);
  flex:none;animation:pulse 1.8s infinite}
.tk-tight .n{font-family:var(--serif);font-weight:800;font-size:clamp(19px,3vw,24px);
  color:var(--clay-lt,#F2A97A);font-variant-numeric:tabular-nums;line-height:1;
  transition:opacity .12s}
.tk-tight .n.blip{opacity:.7}
.tk-tight .t{font-size:12.5px;color:var(--muted-d);line-height:1.35}
.tk-tight .t b{color:#fff;font-weight:600}
.tk-tight .you{margin-left:auto;font-size:12px;color:var(--muted-d);white-space:nowrap}
.tk-tight .you b{color:var(--clay-lt,#F2A97A);font-family:var(--serif);font-size:15px;
  font-variant-numeric:tabular-nums}
.h1-free-line{font-family:var(--serif);font-weight:800;color:var(--moss);
  font-size:clamp(33px,5.6vw,52px);line-height:1.12;letter-spacing:-.015em;margin-bottom:4px}
@media(max-width:700px){.tk-tight{padding:9px 13px;gap:9px}.tk-tight .you{margin-left:0;flex-basis:100%}}

/* ticker band v2 — numbers grouped left, guarantee right */
.ticker{background:var(--forest-deep,#152B21);color:var(--paper);padding:30px 0;
  border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge)}
.ticker-in{display:flex;gap:26px 46px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.tk-left{flex:1 1 560px}
.tk-numrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:10px}
.tk-rate{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--muted-d)}
.tk-rate b{color:#fff;font-family:var(--serif)}
.tk-you{background:rgba(242,169,122,.13);border:1px solid rgba(242,169,122,.38);
  border-radius:11px;padding:9px 16px;text-align:center;flex:none}
.tk-you b{display:block;font-family:var(--serif);font-size:21px;color:var(--clay-lt,#F2A97A);
  font-variant-numeric:tabular-nums;line-height:1.1}
.tk-you span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-d);
  display:block;margin-top:3px}
.tk-find{display:inline-block;margin-top:14px;color:var(--moss);font-weight:600;font-size:14.5px}
.tk-guar{flex:0 1 340px;display:flex;gap:13px;align-items:flex-start;
  border-left:1px solid var(--panel-edge);padding-left:26px}
.tk-guar svg{flex:none;width:26px;height:26px;color:var(--moss);margin-top:2px}
.tk-guar p{font-size:13.5px;color:var(--muted-d);line-height:1.55}
.tk-guar b{color:#fff}
.tk-guar a{color:var(--moss)}
@media(max-width:860px){.tk-guar{border-left:0;padding-left:0;border-top:1px solid var(--panel-edge);
  padding-top:18px;flex-basis:100%}}
@media(max-width:560px){.tk-numrow{gap:14px}.tk-you{width:100%;text-align:left}}

/* tighter first fold */
.ticker{padding:22px 0}
.hero .eyebrow{margin-bottom:10px}

/* pull the ticker band into the first fold on desktop */
@media(min-width:861px){
  .hero .phone{width:250px}
  .hero .phone-home-body{min-height:392px}
  .ticker{padding:18px 0}
  .hero{padding:36px 0 28px}
}

/* band: original proportions, box pulled in beside the numbers */
.ticker{padding:30px 0 !important}
.ticker-in{justify-content:flex-start !important;gap:44px !important;align-items:center}
.tk-left{flex:0 1 auto !important}
.tk-numrow{display:block !important;margin-top:14px}
.tk-numrow .tk-rate{margin-bottom:0}
.tk-you{padding:14px 22px;align-self:center}
.tk-you b{font-size:26px}
.tk-you span{font-size:11px}
.tk-find{margin-top:16px}
.tk-band-foot{display:flex;gap:24px 40px;align-items:flex-start;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--panel-edge)}
.tk-guar{border-left:0 !important;padding-left:0 !important;flex:1 1 340px;
  border-top:0 !important;padding-top:0 !important}
.tk-band-foot .stat-strip{margin-top:0;padding-top:0;border-top:0;flex:1 1 380px}
@media(max-width:820px){.ticker-in{gap:22px !important}.tk-you{width:100%;text-align:left}}

/* pricing page: give the proof strip real weight */
.strip-lg .stat-strip{gap:14px 34px;padding-top:26px;font-size:16px;align-items:baseline}
.strip-lg .stat-strip b{font-size:30px;line-height:1;margin-right:7px}
.strip-lg .stat-strip span{display:inline-flex;align-items:baseline}
/* the trailing store-links sentence must stay normal inline flow —
   inline-flex makes its anchors flex items and collapses the spaces between them */
.strip-lg .stat-strip span:last-child{display:inline}
@media(max-width:700px){.strip-lg .stat-strip{gap:12px 22px;font-size:14.5px}
  .strip-lg .stat-strip b{font-size:24px}}

/* ================= products page ================= */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.prod-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px;display:flex;flex-direction:column}
.prod-card.dark{background:var(--forest);border-color:var(--panel-edge);color:var(--paper)}
.prod-card.dark h3,.prod-card.dark h4{color:#fff}
.prod-card.dark p{color:var(--muted-d)}
.prod-card .tagline{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:10px}
.prod-card .tagline{color:var(--pine)}
.prod-card.dark .tagline{color:var(--moss)}
.prod-card h3{font-size:clamp(23px,2.6vw,29px);line-height:1.16;margin-bottom:12px}
.prod-card>p{font-size:15px;line-height:1.6}
.prod-feat{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.prod-feat li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5}
.prod-feat li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2.5px solid var(--pine);border-bottom:2.5px solid var(--pine);
  transform:rotate(-45deg)}
.prod-card.dark .prod-feat li::before{border-color:var(--moss)}
.prod-card .btn-row{margin-top:auto;padding-top:24px}
.prod-meta{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--panel-edge);font-size:12.5px;color:var(--muted-d)}
.prod-meta b{color:#fff;font-family:var(--serif);font-size:15px;margin-right:3px}
/* questionnaire */
.q-form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px 30px}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.q-grid .full{grid-column:1/-1}
.q-step{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pine);margin:22px 0 12px}
.q-step:first-of-type{margin-top:0}
@media(max-width:820px){.prod-grid{grid-template-columns:1fr}.q-grid{grid-template-columns:1fr}}

/* big animated LIVE badge */
.live-badge{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);
  font-weight:800;font-size:clamp(19px,2.6vw,27px);letter-spacing:-.01em;color:var(--moss);
  background:rgba(201,231,164,.12);border:1px solid rgba(201,231,164,.4);
  border-radius:999px;padding:9px 22px 9px 18px;margin-bottom:16px;line-height:1}
.live-badge em{font-style:normal;font-weight:600;font-size:.62em;color:var(--muted-d);
  letter-spacing:.04em;text-transform:uppercase}
.live-badge .lb-dot{width:11px;height:11px;border-radius:50%;background:#8FD98A;flex:none;
  box-shadow:0 0 0 0 rgba(143,217,138,.7);animation:lbpulse 1.9s infinite}
@keyframes lbpulse{
  0%{box-shadow:0 0 0 0 rgba(143,217,138,.65)}
  70%{box-shadow:0 0 0 12px rgba(143,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(143,217,138,0)}}
section:not(.on-dark):not(.on-deep) .live-badge{color:var(--pine);
  background:rgba(38,107,82,.09);border-color:rgba(38,107,82,.3)}
section:not(.on-dark):not(.on-deep) .live-badge em{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.live-badge .lb-dot{animation:none}}

/* value row in the how-it-works hero */
.val-row{display:flex;gap:16px 40px;flex-wrap:wrap;margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.15)}
.val b{display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(26px,3.6vw,36px);color:var(--moss);line-height:1.05}
.val span{font-size:13px;color:var(--muted-d);display:block;margin-top:5px;max-width:24ch}

/* highlighted number inside a heading */
.hl-num{color:var(--moss);position:relative;white-space:nowrap}
section:not(.on-dark):not(.on-deep) .hl-num{color:var(--pine)}

/* video teaser inside a product card */
.vid-wrap{margin:18px 0 4px;border-radius:12px;overflow:hidden;border:1px solid var(--panel-edge);
  background:#0F241B;position:relative;aspect-ratio:16/9}
.vid-wrap iframe{width:100%;height:100%;display:block;border:0}
.vid-teaser{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted-d);
  margin-top:10px}
.vid-teaser b{color:#fff}
.vid-teaser .play{flex:none;width:26px;height:26px;border-radius:50%;background:var(--moss);
  color:var(--forest-deep);display:flex;align-items:center;justify-content:center;font-size:11px}

/* nav: never break a label across two lines */
.nav{gap:20px}
.nav-links{gap:18px}
.nav-links a{white-space:nowrap;font-size:14.5px;letter-spacing:-.005em}
.nav-links .btn-sm{padding:9px 14px;font-size:13.5px}
@media(max-width:1180px){
  .nav{gap:14px}
  .nav-links{gap:13px}
  .nav-links a{font-size:13.5px}
  .logo span{display:none}
}
@media(max-width:960px){
  .nav-links a{white-space:normal;font-size:15.5px}
}

/* differentiator band */
.diff-band{border-left:4px solid var(--pine);padding:6px 0 6px 26px;max-width:74ch;margin:0 auto}
.diff-band p{font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);line-height:1.45;
  color:var(--ink);font-weight:500}
.diff-band strong{font-weight:800}

/* calendar: skeleton until the embed paints */
.cal-shell{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--white);min-height:760px}
.cal-shell .calendly-inline-widget{position:relative;z-index:2}
.cal-skel{position:absolute;inset:0;z-index:1;padding:26px 22px;display:flex;
  flex-direction:column;gap:18px}
.cal-skel .cs-bar{height:26px;width:58%;border-radius:6px;background:#E9EDE6;
  animation:shimmer 1.4s infinite}
.cal-skel .cs-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.cal-skel .cs-grid span{height:34px;border-radius:6px;background:#EEF2EB;
  animation:shimmer 1.4s infinite}
.cal-skel .cs-grid span:nth-child(2n){animation-delay:.15s}
.cal-skel .cs-grid span:nth-child(3n){animation-delay:.3s}
.cal-skel p{margin-top:6px;font-size:13.5px;color:var(--muted)}
@keyframes shimmer{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.cal-skel *{animation:none}}

/* brighter body copy on the darkest sections (final CTA band) */
.on-deep .lede,
.on-deep p.lede{color:#EDF4EE}
.on-deep .tiny{color:#C6DBCD}

/* Products hero — long statement headline set under a short display line */
.hero .hero-stmt{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2.25vw,26px);line-height:1.44;
  color:#EAF3EC;margin-top:20px;max-width:54ch;
}
.hero .hero-stmt strong{font-weight:800;color:var(--white)}
@media(max-width:700px){
  .hero .hero-stmt{font-size:18.5px;line-height:1.42;margin-top:16px;max-width:none}
}

/* ---- app store badges ------------------------------------------------ */
.badge-row{margin-top:26px}
.badge-label{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.badge-row.light .badge-label{color:var(--moss-lt)}
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.badges a{display:inline-flex;line-height:0;border-radius:8px;
  transition:transform .16s ease,opacity .16s ease}
.badges a:hover{transform:translateY(-2px);opacity:.88}
.badges img{height:44px;width:auto;display:block}
@media(max-width:520px){.badges img{height:38px}}
.foot-badges{margin-top:22px}
.foot-badges .badges img{height:38px}

/* ================= CTA cards + micro line (2026-09-14) ================= */
/* card grids with CTAs (/industries, /assessment hub): the button row sits on the card's
   bottom edge, so the buttons line up across a row of cards whatever the copy length.
   No inline margins on these cards: flex columns don't collapse margins, and an inline
   margin-top on the row would beat margin-top:auto. */
.card-cta{display:flex;flex-direction:column}
.card-cta>.btn-row{margin-top:auto;padding-top:20px}
/* long labels ("Get my free leak assessment") wrap inside the card at ANY width instead of forcing
   the grid tracks wider and pushing the 3rd card off the grid / past the screen (961-999 on the hub).
   They only wrap when the column is too narrow, so wide screens keep one-line buttons. */
.card-cta .btn{white-space:normal;text-align:center}
.grid>.card-cta{min-width:0}
/* /industries pair ("See the app" + "Free leak assessment", btn-sm): tighter so it stays side by side
   in 3-up cards from 1098px and in 1-up phone cards from 384px (the old, shorter label: 1102 / 385) */
.card-cta .btn-row{gap:8px}
.card-cta .btn-sm{padding-left:11px;padding-right:11px;font-size:14px}
/* /assessment hub, 3-up cards at 761-1024: a slightly smaller single CTA keeps one line for longer */
@media(min-width:761px) and (max-width:1024px){
  .card-cta .btn:not(.btn-sm){padding-left:16px;padding-right:16px;font-size:14.5px}
}
/* sub-360 phones: the hero XL button and body CTAs (nowrap) ran past the screen at 320-326 */
@media(max-width:359px){
  .btn{white-space:normal;text-align:center}
  .btn-xl{padding:15px 20px;font-size:16px}
}
/* micro line: even line lengths, no lone last word (CTA_MICRO also carries &nbsp;s) */
.cta-micro,.balance{text-wrap:balance}
/* micro line under page-body leak-report CTAs (build_site.py cta_micro): JR's casing, not
   uppercased, and a readable colour on every ground (the hero's moss is 1.2-1.4:1 on paper) */
.cta-micro.plain{text-transform:none;letter-spacing:.02em;color:var(--pine)}
.on-dark .cta-micro.plain,.on-deep .cta-micro.plain{color:var(--moss)}
.band .cta-micro.plain{color:#2C5A44}
/* /products custom-apps card: JR's bold pain-point line under the heading (2026-09-15) */
.prod-card .prod-pain{font-size:18px;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 12px}

/* ================= /industries: 3 trade cards + custom-build card (2026-09-15) ================= */
/* 4 across from 1180px, 2 x 2 at 761-1179, 1 column on phones. Measured with Barlow/Archivo:
   --wrap caps at 1180px, so the 4-up card text is the SAME width at every width from 1180 up (a
   1440 monitor gets no more room than 1180 does) and 199px at 1140, where the Cleaning blurb ran
   to 6 lines with a 2-word line. Hence the floor is 1180, not the earlier 1140: below it the 2-up
   cards get ~496px of text instead. At <=1100 "Custom applications" breaks one word per line and
   at <=1060 the trade micro line runs to 3 lines, so 4-up must never reach down there.
   minmax(0,1fr): a long button label wraps inside its card instead of widening the track. */
.ind-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1179px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ind-grid{grid-template-columns:minmax(0,1fr)}}
/* 4-up buttons stack on purpose. The trade pair ("See the app" + "Free leak assessment", btn-sm)
   needs ~277px of card text to sit side by side (it does from 1098px at 3-up) and a 4-up card only
   has 224px, so it wrapped into two ragged rows of different widths in all four cards. Stacking
   them full-width instead reads as a deliberate pair: same order, same width, same height in every
   card of the row. Below 1180 (2-up and phones) the row stays side by side as before. */
@media(min-width:1180px){
  .ind-grid>.card-cta>.btn-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .ind-grid>.card-cta>.btn-row>.btn{width:100%}
  /* 4-up density (2026-09-15, FIX 2). 4-up is the tightest layout on the page and the wrap cap
     means a 1440 screen cannot loosen it. With the page-wide 28px card padding and 22px grid gap
     each card got 209px of text: the Cleaning blurb ran to 6 lines with 3-word lines and
     "CUSTOM BUILD · ANY INDUSTRY" wrapped mid-phrase. Spending the padding and the gap on the text
     column instead — the same trade .grid.g4 already makes when it densifies — buys 15px per card
     (224px) with no change to the band's width: Cleaning drops to 5 lines, Pest 5 -> 4, the custom
     eyebrow fits one line again and every card in the row is 32px shorter (520 -> 488). The other
     lever, a wider --wrap on this section (1300px would give 239px), is deliberately NOT taken:
     the card band would then sit 60px per side outside the 1180px hero and the section below it.
     Only inside this media query — at 2-up and on phones the cards keep the standard 28/22. */
  .ind-grid{gap:18px}
  .ind-grid>.card{padding:22px}
  .ind-grid .eyebrow{letter-spacing:.14em}
}
/* One top for the button rows across a visual row. The custom card's copy and micro line differ
   in length from the trade cards', so .card-cta's bottom pin alone would stagger the buttons.
   Each card spans five shared row tracks (eyebrow, h4, copy, buttons, micro line); the copy track
   takes the tallest copy in the row. Without subgrid the flex bottom pin above still applies. */
@supports (grid-template-rows:subgrid){
  .ind-grid>.card-cta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;
    grid-template-columns:minmax(0,1fr)}
  .ind-grid>.card-cta>.btn-row{margin-top:0;align-self:start}
  .ind-grid>.card-cta>.cta-micro{align-self:start}
}
/* the custom card reads as a different kind of card: pine top rule + a faint moss wash behind the
   heading (muted text on the wash stays >= 5:1). Inset shadow, not a thicker border, so its
   content starts at the same height as the trade cards'. */
.card-custom{border-color:#C4D7C8;
  background:linear-gradient(180deg,#F1F7EA 0,var(--white) 170px);
  box-shadow:inset 0 3px 0 var(--pine),0 1px 3px rgba(20,40,30,.05)}
/* JR's bold pain-point line, same look as on /products (beats .card p) */
.card .prod-pain{font-size:18px;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 10px}
