/* =====================================================================
   site.css — shared component library for elevateaisystem.com
   =====================================================================
   Extracted from the original homepage so that pages stop shipping their
   own forked copies of the same components. Loads AFTER brand.css and
   depends on its tokens.

   Rule: if a page needs a component, add it here. Do not inline a new
   variant into a page. One subsystem, not N.
   ===================================================================== */

/* brand.css owns the palette, but never defined these two. They were being
   used by .striprow.is-red and .fitline .no, which meant those rendered with
   no colour at all. Defined here rather than in brand.css so the fix stays
   with the components that need it. */
:root{
  --danger: #C1282B;   /* matches the red already used across the site */
  --warn:   #B8860B;
}

*{box-sizing:border-box;margin:0;padding:0}
h1,h2,h3{overflow-wrap:break-word}
/* Forced headline breaks are art direction for wide screens. On phones the
   lines barely fit the webfont and clip on the fallback, so text wraps
   naturally instead. */
@media(max-width:560px){.section-title br,.hero-tagline br,h1 br{display:none}}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--green-dark);text-decoration:none}
::selection{background:var(--green);color:var(--navy)}
:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px;border-radius:2px}
.section.dark :focus-visible,.opsband :focus-visible,.cta-band :focus-visible{outline-color:var(--green)}
img{max-width:100%;display:block}

/* ---------- Motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,250,248,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{max-width:1100px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;gap:1.6rem}
/* Canonical brand lockup: BrandIcon + "Elevate" + green "AI".
   Colours are fixed hex on purpose, per the logo spec. Do not swap these for
   theme tokens and never substitute a different leaf mark. */
.nav-logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:#071126}
.nav-logo i{font-style:normal;color:#13C93B}
.nav-logo-text{display:inline-flex;align-items:baseline}
.nav-logo-text span{color:#13C93B}
.nav-logo-icon{display:block;flex-shrink:0}
@media(max-width:560px){.nav-logo{font-size:1.12rem;gap:.45rem}.nav-logo-icon{width:29px;height:29px}}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:1.5rem;font-size:.9rem;font-weight:600}
.nav-links a{color:var(--text-muted);transition:color .2s}
.nav-links a:hover{color:var(--navy)}
.nav-cta{background:var(--navy);color:var(--white)!important;padding:.6rem 1.1rem;border-radius:9px;font-weight:700;transition:all .3s}
.nav-cta:hover{background:var(--navy-light);transform:translateY(-1px)}
.nav-links a{white-space:nowrap}
@media(max-width:860px){.nav-links a.hide-sm{display:none}.nav-in{gap:1rem}}
/* Below this the wordmark plus two links no longer fit on one line, so the
   secondary link drops and only the CTA remains beside the logo. */
@media(max-width:560px){
  /* Keep About reachable on phones; only extra links drop. */
  .nav-links a.hide-xs:not([href="/about"]){display:none}
  .nav-in{padding:.85rem 1.1rem;gap:.75rem}
  .nav-links{gap:.9rem}
  .nav-cta{padding:.55rem .9rem;font-size:.85rem}
  .nav-logo{font-size:.98rem}
}

/* ---------- Hero ---------- */
/* The background is ledger paper: a faint dot grid, fading in from under
   the nav and out before the next section. The site's whole argument is
   numbers on paper; the texture says it at 5% opacity. CSS only. */
.hero{position:relative;text-align:center;padding:6rem 1.5rem 4.5rem;overflow:hidden;background-image:linear-gradient(180deg,var(--bg) 0%,rgba(250,250,248,0) 16%,rgba(250,250,248,0) 58%,var(--bg) 94%),radial-gradient(rgba(10,15,28,.055) 1px,transparent 1.4px);background-size:100% 100%,26px 26px}
.hero::before{content:'';position:absolute;top:40px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(0,255,65,.11) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
.hero>*{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:var(--bg-alt);color:var(--text);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:50px;margin-bottom:2rem;border:1px solid var(--border);animation:fadeIn .8s ease .2s both}
.hero-badge svg{width:15px;height:15px;color:var(--green-dark)}
.hero-you{font-size:clamp(2.2rem,5.2vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--navy);margin:0 0 .1rem;animation:fadeUp .8s ease .35s both}
.hero-tagline{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;color:var(--navy);margin:0 0 2rem;animation:fadeUp .8s ease .45s both}
.mark{display:inline-block;color:var(--navy);background:var(--green);padding:.04em .18em}
.hero-subhead{font-size:clamp(1.05rem,1.8vw,1.3rem);font-weight:500;line-height:1.55;color:var(--text-muted);max-width:620px;margin:0 auto 2.4rem;letter-spacing:-.01em;animation:fadeUp .8s ease .55s both}
.hero-subhead b{color:var(--navy);font-weight:700}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s ease .65s both}
.hero-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:var(--white);padding:1rem 2.1rem;border-radius:10px;font-size:1rem;font-weight:700;transition:all .3s;border:none;cursor:pointer}
.hero-cta:hover{background:var(--navy-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(10,15,28,.2)}
.hero-cta-secondary{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--navy);padding:1rem 2.1rem;border-radius:10px;font-size:1rem;font-weight:600;transition:all .3s;border:2px solid var(--border);cursor:pointer}
.hero-cta-secondary:hover{border-color:var(--navy);transform:translateY(-2px)}
.hero-note{font-size:.82rem;color:var(--text-faint);margin-top:1.8rem;animation:fadeIn .8s ease .9s both}

/* ---------- Page hero (inner pages: left aligned, quieter than home) ---------- */
.page-hero{position:relative;padding:5rem 1.5rem 3.5rem;border-bottom:1px solid var(--border);overflow:hidden;background-image:linear-gradient(180deg,var(--bg) 0%,rgba(250,250,248,0) 18%,rgba(250,250,248,0) 62%,var(--bg) 96%),radial-gradient(rgba(10,15,28,.05) 1px,transparent 1.4px);background-size:100% 100%,26px 26px}
.page-hero::before{content:'';position:absolute;top:-120px;right:-120px;width:460px;height:460px;background:radial-gradient(circle,rgba(0,255,65,.07),transparent 70%);border-radius:50%;pointer-events:none}
.page-hero-in{max-width:1100px;margin:0 auto;position:relative}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--navy);max-width:18ch;animation:fadeUp .7s ease .1s both}
.page-hero .lede{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--text-muted);max-width:60ch;margin-top:1.3rem;line-height:1.6;animation:fadeUp .7s ease .25s both}
.page-hero .lede b{color:var(--navy);font-weight:700}
.page-hero .hero-buttons{justify-content:flex-start;margin-top:2rem}

/* ---------- Sections ---------- */
.section{padding:6rem 1.5rem;position:relative}
.section-inner{max-width:1100px;margin:0 auto}
.section.alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section.dark{background:var(--navy);overflow:hidden}
.section-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.75rem}
.section-title{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--navy);margin-bottom:1rem;max-width:20ch}
.section-title.wide{max-width:26ch}
.section-subtitle{font-size:1.05rem;color:var(--text-muted);max-width:640px;line-height:1.7}
.section.dark .section-label{color:var(--green)}
.section.dark .section-title{color:var(--white)}
.section.dark .section-subtitle{color:rgba(255,255,255,.6)}

/* ---------- Stat bar ---------- */
.statbar{background:var(--navy);padding:3rem 1.5rem}
.statbar-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat b{display:block;font-size:2.1rem;font-weight:800;color:var(--green);letter-spacing:-.03em;line-height:1}
.stat span{display:block;font-size:.83rem;color:rgba(255,255,255,.6);margin-top:.6rem;line-height:1.45}
/* Paper variant for the behavioral-health path: a clinic-admin page should
   read as ink on paper, not neon on navy. Same grid, inverted surface. */
.statbar.on-paper{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.statbar.on-paper .stat b{color:var(--navy)}
.statbar.on-paper .stat span{color:var(--text-muted)}

/* ---------- Friction / leak cards ---------- */
.friction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.friction-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border);transition:all .4s;position:relative;overflow:hidden}
.friction-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.friction-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green-dark),var(--green));opacity:0;transition:opacity .3s}
.friction-card:hover::before{opacity:1}
.friction-card .card-num{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--green-dark);text-transform:uppercase;margin-bottom:.9rem}
.friction-card h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:.5rem;letter-spacing:-.01em}
.friction-card p{font-size:.95rem;color:var(--text-muted);line-height:1.6}
.friction-card .cost{display:block;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border);font-size:.88rem;color:var(--navy);font-weight:600}
.friction-card.is-red::before{background:linear-gradient(90deg,#DC2626,#F59E0B);opacity:1}
.friction-card.is-red .card-num{color:#DC2626}

/* ---------- Phases ---------- */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.phase-card{text-align:center;position:relative;padding:1.5rem}
.phase-num{width:56px;height:56px;background:var(--navy);color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:800;margin:0 auto 1.2rem;position:relative;z-index:2}
.phase-card h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:.3rem}
.phase-card .price{font-size:.9rem;font-weight:700;color:var(--green-dark);margin-bottom:.7rem}
.phase-card p{font-size:.95rem;color:var(--text-muted);line-height:1.6}
/* Sits in the grid gap, vertically centred on the 56px circle
   (1.5rem card padding + 28px half-circle = 52px). */
.phase-connector{display:block;position:absolute;top:52px;right:-2rem;width:2rem;height:2px;background:var(--border)}
.phase-card:last-child .phase-connector{display:none}

/* Four-rung ladder (free review sits ahead of the paid rungs). */
.phase-grid.four{grid-template-columns:repeat(4,1fr);gap:1.2rem}
.phase-grid.four .phase-card{padding:1.5rem .9rem}
.phase-card.is-free .phase-num{background:var(--green);color:var(--navy)}
.phase-card.is-free .price{color:var(--green-dark)}
@media(max-width:900px){.phase-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.phase-grid.four{grid-template-columns:1fr}}

/* ---------- Self-diagnostic questions ---------- */
.qbox{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem 2.4rem;margin-top:2.5rem}
.qbox ol{margin:0;padding-left:1.3rem}
.qbox li{font-size:1.02rem;color:var(--navy);font-weight:600;line-height:1.5;margin-bottom:1.1rem;padding-left:.4rem}
.qbox li:last-child{margin-bottom:0}
.qbox li span{display:block;font-size:.9rem;color:var(--text-muted);font-weight:400;margin-top:.3rem}

/* ---------- Case card ---------- */
.case-card{background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-top:3rem}
.case-header{background:var(--navy);color:var(--white);padding:1.6rem 2rem}
.case-label{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.4rem}
.case-header h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.case-body{padding:2rem}
.case-columns{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.case-col h4,.case-col h3{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.case-col.before h4,.before h3{color:#DC2626}
.case-col.after h4,.after h3{color:var(--green-dark)}
.case-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.case-col li{font-size:.92rem;color:var(--text-muted);line-height:1.55;display:flex;gap:.6rem}
.case-col li:before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:.5rem}
.case-col.before li:before{background:#DC2626}
.case-col.after li:before{background:var(--green-dark)}
.case-col.after li{color:var(--text)}

/* ---------- Fit ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
.fit-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:2.2rem;border:1px solid var(--border)}
.fit-card h3{font-size:1.2rem;font-weight:700;margin-bottom:1.3rem}
.fit-card.yes h3{color:var(--green-dark)}
.fit-card.no h3{color:#DC2626}
.fit-list{display:flex;flex-direction:column;gap:.8rem;list-style:none}
.fit-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.94rem;color:var(--text);line-height:1.5}
.fit-list li .dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:8px}
.fit-card.yes .dot{background:var(--green-dark)}
.fit-card.no .dot{background:#DC2626}

/* ---------- Philosophy / pillars (dark) ---------- */
.philosophy-quote{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;line-height:1.65;color:rgba(255,255,255,.88);max-width:700px;margin-top:2rem;padding-left:1.5rem;border-left:3px solid var(--green)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.pillar{text-align:center;padding:1.6rem 1rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);transition:all .3s}
.pillar:hover{border-color:rgba(0,255,65,.25);background:rgba(0,255,65,.04)}
.pillar-icon{width:44px;height:44px;background:rgba(0,255,65,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.pillar-icon svg{width:20px;height:20px;color:var(--green);stroke:var(--green)}
.pillar h4,.pillar h3{font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.pillar p{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5}

/* ---------- Calculator ---------- */
.calc{background:var(--navy);border-radius:var(--radius-lg);padding:2.6rem;margin-top:2.5rem}
.calc h3{color:var(--white);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.calc>p{color:rgba(255,255,255,.6);font-size:.95rem;margin-bottom:1.8rem}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.calc-f label{display:block;font-size:.78rem;color:rgba(255,255,255,.62);margin-bottom:.4rem;font-weight:600}
.calc-f input{width:100%;padding:.7rem .85rem;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--white);font-family:inherit;font-size:1rem;font-weight:600}
.calc-f input:focus{outline:2px solid var(--green);outline-offset:1px}
.calc-out{margin-top:1.8rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.4rem}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.calc-row span{font-size:.92rem;color:rgba(255,255,255,.62)}
.calc-row b{font-size:1.1rem;color:var(--green);font-weight:800;white-space:nowrap}
.calc-row.total{border-bottom:none;padding-top:1.1rem}
.calc-row.total span{color:var(--white);font-weight:700;font-size:1rem}
.calc-row.total b{font-size:1.8rem}
.calc-note{margin-top:1.2rem;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.55;background:rgba(255,255,255,.05);padding:.9rem 1.1rem;border-radius:10px}
.calc-note b{color:rgba(255,255,255,.85)}

/* ---------- FAQ ---------- */
.faq{margin-top:2.5rem;max-width:820px}
details{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.4rem;margin-bottom:.7rem}
summary{font-weight:700;cursor:pointer;font-size:1rem;list-style:none;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";color:var(--green-dark);font-weight:800;margin-right:.65rem}
details[open] summary:before{content:"–"}
details p{color:var(--text-muted);margin-top:.8rem;font-size:.95rem;line-height:1.65}

/* ---------- Prose (case study / article pages) ---------- */
.prose{max-width:760px}
.prose p{margin-bottom:1.1rem;color:var(--text-muted);font-size:1.02rem;line-height:1.75}
.prose p b{color:var(--navy);font-weight:700}
.prose h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin:2rem 0 .7rem}
.prose ul{margin:0 0 1.1rem 1.2rem}
.prose li{margin-bottom:.6rem;color:var(--text-muted);line-height:1.65}
/* A prose block that follows a diagram it comments on. */
.prose.follow{margin-top:1.6rem}
/* Prose sitting on a navy section. */
.section.dark .prose p{color:rgba(255,255,255,.62)}
.section.dark .prose li{color:rgba(255,255,255,.7)}
.section.dark .prose b{color:var(--white)}
.section.dark .prose a{color:var(--green)}
.section.dark .prose h3{color:var(--white)}

.pull{background:var(--card-bg);border:1px solid var(--border);border-left:4px solid var(--green-dark);border-radius:var(--radius);padding:1.6rem 1.8rem;margin:2rem 0}
.pull.red{border-left-color:#DC2626}
.pull h3{margin-top:0;font-size:1.1rem}
.pull p:last-child{margin-bottom:0}

/* ---------- Table ---------- */
.tablewrap{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;margin:1.6rem 0}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;background:var(--bg-alt);padding:.85rem 1rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:800;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:.85rem 1rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-muted);line-height:1.55}
tr:last-child td{border-bottom:none}
td b{color:var(--navy)}

/* ---------- Secondary door (a different audience, deliberately quieter) ---------- */
.door{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem 2.4rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.door-txt{flex:1 1 320px}
.door h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.door p{font-size:.95rem;color:var(--text-muted);line-height:1.6}
.door .hero-cta-secondary{padding:.8rem 1.5rem;font-size:.93rem}

/* ---------- Vertical rows ---------- */
.vert{display:flex;gap:1.4rem;align-items:flex-start;padding:1.5rem 0;border-bottom:1px solid var(--border)}
.vert:last-child{border-bottom:none}
.vert-tag{flex:0 0 130px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding-top:.3rem}
.vert-tag.proven{color:var(--green-dark)}
.vert-tag.next{color:var(--text-faint)}
.vert h3{font-size:1.08rem;font-weight:700;color:var(--navy);margin-bottom:.25rem}
.vert p{font-size:.94rem;color:var(--text-muted);line-height:1.6}
@media(max-width:600px){.vert{flex-direction:column;gap:.4rem}.vert-tag{flex:none}}

/* ---------- Dashboard mockups ----------
   Rendered with sample data only. Every instance MUST carry a visible
   "sample data" badge. Never populate these with real client figures. */
.dash{background:var(--navy);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;border:1px solid rgba(255,255,255,.1)}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.1)}
.dash-title{color:var(--white);font-weight:800;font-size:1rem;letter-spacing:-.01em}
.dash-sub{color:rgba(255,255,255,.45);font-size:.75rem;margin-top:.2rem}
.dash-badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:.3rem .6rem;border-radius:99px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);white-space:nowrap;flex-shrink:0}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1rem;margin-bottom:1.3rem}
.dash-kpi b{display:block;font-size:1.45rem;font-weight:800;color:var(--green);line-height:1}
.dash-kpi span{display:block;font-size:.7rem;color:rgba(255,255,255,.5);margin-top:.35rem;line-height:1.35}

.dash-rows{display:flex;flex-direction:column;gap:.5rem}
.drow{display:grid;grid-template-columns:1fr auto;gap:.9rem;padding:.7rem .85rem;background:rgba(255,255,255,.04);border-radius:9px;border-left:3px solid var(--green)}
.drow.sev-hi{border-left-color:#FF6B57}
.drow.sev-md{border-left-color:#E8B33A}
.drow .t{font-size:.85rem;color:var(--white);font-weight:700}
.drow .m{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:.18rem;line-height:1.45}
.drow .amt{font-size:.8rem;color:var(--green);font-weight:800;white-space:nowrap;align-self:center;text-align:right}
.drow .amt small{display:block;font-size:.62rem;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

.bar-row{display:grid;grid-template-columns:88px 1fr 58px;gap:.7rem;align-items:center;margin-bottom:.75rem}
.bar-row:last-child{margin-bottom:0}
.bar-row .lab{font-size:.78rem;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{display:block;height:8px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden}
/* Must be block: these are spans, and an inline box collapses to zero here. */
.bar-fill{display:block;height:100%;border-radius:99px;background:var(--green)}
.bar-fill.warn{background:#E8B33A}
.bar-fill.bad{background:#FF6B57}
.bar-row .val{font-size:.78rem;color:var(--white);font-weight:700;text-align:right}
/* Wider label column for rows whose label is a sentence, not a metric name. */
.bar-row.wide{grid-template-columns:150px 1fr 74px}
@media(max-width:560px){.bar-row.wide{grid-template-columns:104px 1fr 64px}}
/* A truthful sliver: when the real value is too small to see at this scale,
   keep it visible without inflating it. */
.bar-fill.sliver{min-width:3px}

.dash-note{margin-top:1.2rem;padding:.85rem 1rem;background:rgba(0,255,65,.07);border-radius:9px;font-size:.82rem;color:rgba(255,255,255,.75);line-height:1.55}
.dash-note b{color:var(--green)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.5rem;align-items:start}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}
.dash-full{margin-top:1.3rem}
.dash-legend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:1rem;font-size:.72rem;color:rgba(255,255,255,.5)}
.dash-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.35rem;vertical-align:baseline}

/* ---------- The Five Leaks diagram ----------
   The money path runs top to bottom as a spine; each leak branches off it at
   the stage where it actually happens. Built from CSS boxes and borders only:
   no image, no SVG, no payload, and it reflows to a single column on a phone
   without a second layout. Colours come from the tokens above so it stays
   correct if the palette moves. */
.leakflow{position:relative;margin:2.5rem 0 0;padding-left:0}
.lf-row{position:relative;padding-left:2.6rem;padding-bottom:.2rem}
/* the spine */
.lf-row::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--green-dark);opacity:.35}
.lf-row:first-child::before{top:14px}
.lf-row:last-child::before{bottom:auto;height:14px}

/* a stage on the money path */
.lf-stage{display:flex;align-items:baseline;gap:.7rem;padding:.55rem 0}
.lf-stage::before{content:'';position:absolute;left:4px;width:16px;height:16px;border-radius:50%;background:var(--green-dark);border:3px solid var(--bg);margin-top:.28rem}
.lf-stage b{font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.lf-stage span{font-size:.86rem;color:var(--text-muted)}

/* a leak branching away from the spine */
.lf-leak{position:relative;margin:.45rem 0 .45rem 1.1rem;padding:.75rem .95rem .75rem 1.1rem;
  background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:0 10px 10px 0}
.lf-leak::before{content:'';position:absolute;left:-1.1rem;top:1.35rem;width:1.1rem;height:2px;background:var(--warn);opacity:.55}
.lf-leak.is-hi{border-left-color:var(--danger)}
.lf-leak.is-hi::before{background:var(--danger)}
.lf-num{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
.lf-leak.is-hi .lf-num{color:var(--danger)}
.lf-leak h4,.lf-leak h3{font-size:.97rem;font-weight:700;color:var(--navy);margin:.15rem 0 .2rem}
.lf-leak p{font-size:.88rem;color:var(--text-muted);line-height:1.5;margin:0}
.lf-cost{display:inline-block;margin-top:.45rem;font-size:.8rem;font-weight:700;color:var(--warn)}
.lf-leak.is-hi .lf-cost{color:var(--danger)}

/* the two ways it ends */
.lf-end{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.4rem}
.lf-out{padding:.9rem 1.05rem;border-radius:10px;font-size:.88rem;line-height:1.5}
.lf-out b{display:block;font-size:.95rem;margin-bottom:.15rem}
.lf-out.good{background:var(--green-tint,rgba(11,110,35,.07));border:1px solid rgba(11,110,35,.25)}
.lf-out.good b{color:var(--green-dark)}
.lf-out.bad{background:rgba(193,40,43,.06);border:1px solid rgba(193,40,43,.25)}
.lf-out.bad b{color:var(--danger)}
@media(max-width:560px){
  .lf-end{grid-template-columns:1fr}
  .lf-row{padding-left:2.1rem}
  .lf-leak{margin-left:.6rem}
}

/* ---------- Record triad: the three records that have to agree ----------
   Three "records" drawn as skeleton rows rather than described in a
   paragraph. The rows are pure CSS bars, so this costs nothing to load and
   restyles with the palette. Reuses .lf-end / .lf-out for the verdict so the
   two diagrams on this page read as one system. */
.triad{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.8rem;align-items:stretch;margin-top:2.4rem}
.triad-rec{background:var(--card-bg);border:1px solid var(--border);border-top:3px solid var(--green-dark);border-radius:var(--radius);padding:1.05rem 1.15rem 1.15rem}
.tr-tag{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark)}
.triad-rec b{display:block;font-size:1.02rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:.3rem 0 .1rem}
.triad-rec .tr-sub{display:block;font-size:.82rem;color:var(--text-muted);line-height:1.45}
/* Skeleton rows. Ragged widths so it reads as a document, not a chart. */
.tr-lines{margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--border)}
.tr-lines i{display:block;height:6px;border-radius:99px;background:var(--navy);opacity:.11;margin-top:.4rem}
.tr-lines i:first-child{margin-top:0}
.tr-lines i:nth-child(2){width:82%}
.tr-lines i:nth-child(3){width:64%}
.tr-lines i:nth-child(4){width:91%}
.triad-eq{align-self:center;font-size:1.5rem;font-weight:800;color:var(--green-dark);opacity:.5;line-height:1}
@media(max-width:760px){
  .triad{grid-template-columns:1fr;gap:.55rem}
  .triad-eq{justify-self:center;font-size:1.2rem;transform:rotate(90deg)}
}

/* ---------- Correction window ----------
   The page's central argument, drawn instead of asserted: zone width is
   elapsed time, so "the window shuts" is something you see. Day ranges live
   inside each zone rather than on a separate scale, which means nothing has
   to be positioned by percentage and nothing can drift out of alignment.
   On narrow screens the bar turns vertical and height carries the time, so
   the metaphor survives without a second implementation. */
.win{margin-top:2.4rem}
.win-bar{display:flex;gap:.4rem;align-items:stretch}
.wz{flex-basis:0;border-radius:10px;padding:.95rem 1rem 1.05rem;min-width:0;display:flex;flex-direction:column;justify-content:center}
.wz b{display:block;font-size:.95rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.wz span{display:block;font-size:.78rem;margin-top:.25rem;line-height:1.35}
.wz.good{background:rgba(11,110,35,.10);border:1px solid rgba(11,110,35,.28)}
.wz.good b{color:var(--green-dark)}
.wz.warn{background:rgba(184,134,11,.10);border:1px solid rgba(184,134,11,.30)}
.wz.warn b{color:var(--warn)}
.wz.bad{background:rgba(193,40,43,.09);border:1px solid rgba(193,40,43,.28)}
.wz.bad b{color:var(--danger)}
.wz span{color:var(--text-muted)}
.win-notes{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1rem}
.wn{padding:.95rem 1.1rem;border-radius:10px;background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--green-dark);font-size:.89rem;color:var(--text-muted);line-height:1.55}
.wn.bad{border-left-color:var(--danger)}
.wn b{display:block;font-size:.94rem;color:var(--navy);margin-bottom:.2rem}
@media(max-width:760px){
  /* Height becomes the time axis. Same markup, same proportions. */
  .win-bar{flex-direction:column;height:290px}
  .wz{padding:.7rem .9rem}
  .win-notes{grid-template-columns:1fr}
}

/* ---------- Check cards: the four you can run yourself ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem}
/* Left border carries the same severity colour as the matching leak card in
   the flow diagram, so the two systems cross-reference by colour and number. */
.check{background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:var(--radius);padding:1.25rem 1.35rem 1.15rem;display:flex;flex-direction:column}
.check.is-hi{border-left-color:var(--danger)}
.check.is-hi .ck-n{background:var(--danger)}
/* The thirty-second check. Highest return on the page, so it goes first and
   spans the full row rather than sitting in a text box below the grid. */
.check.first{grid-column:1/-1}
.ck-flag{margin-left:auto;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);background:rgba(11,110,35,.09);border:1px solid rgba(11,110,35,.25);padding:.3rem .65rem;border-radius:99px;white-space:nowrap}
.ck-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.ck-n{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--white);font-size:.76rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.check h4,.check h3{font-size:1.02rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.25}
.check p{font-size:.88rem;color:var(--text-muted);line-height:1.55;margin-bottom:.5rem}
.check p b{display:block;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.12rem}
.check p.see b{color:var(--warn)}
.ck-time{margin-top:auto;padding-top:.75rem;font-size:.76rem;font-weight:700;color:var(--text-faint);border-top:1px solid var(--border)}
@media(max-width:760px){.checks{grid-template-columns:1fr}}

/* ---------- Estimator bars ----------
   The three loss lines carry a bar scaled to the largest of them, so the
   shape of the exposure is visible before the numbers are read. Widths are
   set by estimator.js; everything else is here. */
.calc-row:has(+ .calc-bar){border-bottom:none}
.calc-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin:-.15rem 0 .5rem}
.calc-bar i{display:block;height:100%;border-radius:99px;background:var(--green);width:0;transition:width .35s ease}
@media (prefers-reduced-motion: reduce){.calc-bar i{transition:none}}

/* ---------- Two doors: audience chooser (homepage) ---------- */
.doors-band{padding-top:0;margin-top:-1.5rem}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.door-card{display:block;background:var(--card-bg);border:1px solid var(--border);border-top:3px solid var(--green-dark);border-radius:var(--radius-lg);padding:1.7rem 1.8rem 1.5rem;transition:transform .25s,box-shadow .25s}
.door-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.07)}
.dc-tag{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.6rem}
.door-card h3,.door-card h2{font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.4rem}
.door-card p{font-size:.95rem;color:var(--text-muted);line-height:1.6;margin-bottom:1rem}
.dc-go{font-size:.9rem;font-weight:800;color:var(--green-dark)}
@media(max-width:760px){.doors{grid-template-columns:1fr}}

/* ---------- Getting found (homepage): problem cards with one proof number ---------- */
.front{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.fcard{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem 1.6rem 1.4rem;display:flex;flex-direction:column}
.fcard .ftag{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.7rem}
.fcard h3{font-size:1.18rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.25;margin-bottom:1rem}
.fcard p{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin-bottom:.9rem}
.fcard ul{list-style:none;padding:0;margin:0 0 1rem}
.fcard li{font-size:.85rem;color:var(--text);padding:.32rem 0 .32rem 1.1rem;position:relative;line-height:1.45}
.fcard li::before{content:'';position:absolute;left:0;top:.72rem;width:6px;height:6px;border-radius:50%;background:var(--green-dark)}
.fcard .fgo{margin-top:auto;font-size:.88rem;font-weight:800;color:var(--green-dark)}
.fcard .fmore{margin-top:auto;margin-bottom:.5rem;font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px;align-self:flex-start}
.fcard .fmore+.fgo{margin-top:0}
@media(max-width:900px){.front{grid-template-columns:1fr}}
/* Each card's proof, drawn. The picture is the number, not decoration. */
.fvis{background:var(--bg-alt);border-radius:12px;padding:1rem 1rem .75rem;margin-bottom:1rem}
.fvis-cap{font-size:.74rem;color:var(--text-muted);line-height:1.4;margin-top:.6rem}
.fvis-cap b{color:var(--navy)}
/* Two phone screens: the audited site vs the market leader */
.phones{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mph{margin:0;text-align:center}
.mph-screen{position:relative;height:150px;background:var(--card-bg);border:2px solid var(--navy);border-radius:16px;padding:.9rem .55rem .5rem;display:flex;flex-direction:column;gap:.34rem;overflow:hidden}
.mph-screen::before{content:'';position:absolute;top:.35rem;left:50%;transform:translateX(-50%);width:26px;height:4px;border-radius:99px;background:var(--border)}
.mph-screen i{display:block;height:5px;border-radius:99px;background:#E4E1D8}
.mph-btn{font-size:.56rem;font-weight:800;border-radius:6px;padding:.32rem .3rem;background:var(--navy);color:#fff;letter-spacing:.01em}
.mph-btn.ghost{background:transparent;color:var(--text-muted);border:1px dashed var(--text-faint)}
.mph-top{font-size:.54rem;font-weight:800;background:var(--green);color:var(--navy);border-radius:5px;padding:.22rem}
.mph-sticky{position:absolute;left:.5rem;right:.5rem;bottom:.45rem;font-size:.56rem;font-weight:800;background:var(--green);color:var(--navy);border-radius:7px;padding:.36rem}
.mph figcaption{font-size:.7rem;color:var(--text-muted);margin-top:.45rem;line-height:1.3}
.mph figcaption b{display:block;font-size:1.25rem;color:var(--navy);letter-spacing:-.02em}
.mph.good .mph-screen{border-color:var(--green-dark)}
/* Link map: pages that link in vs pages nothing links to. The 51 dots are
   HTML, not SVG, so they stay legible at any card width. */
.lmap2{display:grid;grid-template-columns:38% 1fr;gap:.8rem;align-items:center}
.lhub svg{width:100%;height:auto;display:block}
.lhub .ln{stroke:var(--green-dark);stroke-width:2}
.lhub .pg{fill:var(--green-dark)}
.lhub text{font-family:inherit;font-size:11px;font-weight:800}
.lhub span,.lorph span{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:.35rem;text-align:center}
.lorph{border-left:1px dashed #CFCBBF;padding-left:.8rem}
.odots{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.odots i{display:block;aspect-ratio:1;border-radius:50%;background:#C4C0B4}
/* Mini funnel */
.ffun-row{display:grid;grid-template-columns:74px 1fr 30px;gap:.5rem;align-items:center;margin-bottom:.38rem;font-size:.72rem;color:var(--text-muted)}
.ffun-row i{display:block;height:12px;border-radius:4px;background:var(--navy);opacity:.85}
.ffun-row.adm i{background:var(--green-dark);opacity:1}
.ffun-row b{color:var(--navy);text-align:right;font-size:.78rem}
.ffun-cost{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:.5rem;margin-top:.45rem;font-size:.72rem;color:var(--text-muted)}
.ffun-cost b{font-size:1.15rem;color:var(--navy);letter-spacing:-.02em}
.fsample{display:block;text-align:right;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:-.2rem 0 .35rem}

/* ---------- Where the numbers come from: sources -> engine -> outputs ---------- */
.srcflow{max-width:1000px;margin:3rem auto 0}
.srcflow h3{font-size:1.15rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;text-align:center}
.srcflow>p{text-align:center;font-size:.92rem;color:var(--text-muted);max-width:620px;margin:.5rem auto 1.6rem;line-height:1.6}
.srcs{display:grid;grid-template-columns:1.25fr 44px auto 44px 1fr;align-items:center;gap:.4rem}
.srcs-col{display:flex;flex-direction:column;gap:.55rem}
.src{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem;display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:center}
.src b{font-size:.86rem;color:var(--navy)}
.src small{grid-column:1/-1;font-size:.72rem;color:var(--text-muted);line-height:1.4}
.src .tag{font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:99px;white-space:nowrap}
.src .tag.live{background:var(--green-dark);color:#fff}
.src .tag.exp{background:var(--bg-alt);color:var(--text-muted);border:1px solid var(--border)}
.src.api{border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(11,110,35,.08)}
.sarrow{height:2px;background:var(--text-faint);position:relative}
.sarrow::after{content:'';position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--text-faint)}
.sengine{background:var(--navy);color:#fff;border-radius:16px;padding:1.1rem 1.1rem;text-align:center;min-width:128px}
.sengine b{display:block;font-size:.95rem;letter-spacing:-.01em}
.sengine span{display:block;font-size:.66rem;color:rgba(255,255,255,.55);margin-top:.3rem;line-height:1.4}
.sout{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem;font-size:.84rem;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:.55rem}
.sout::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green-dark);flex:0 0 8px}
.srcflow .sfoot{text-align:center;font-size:.76rem;color:var(--text-faint);margin-top:1rem}
@media(max-width:820px){
  .srcs{grid-template-columns:1fr;gap:.5rem}
  .sarrow{width:2px;height:22px;margin:0 auto}
  .sarrow::after{right:-4px;top:auto;bottom:-6px;border-left-color:transparent;border-top-color:var(--text-faint)}
}

/* ---------- Dashboard slideshow (homepage) ----------
   Tabs name the dashboards and double as slide controls. Auto-advance is
   off under prefers-reduced-motion and always has a visible pause. */
.dshow{max-width:1000px;margin:2.2rem auto 0}
.dshow-tabs{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.1rem}
.dshow-tab{font:inherit;font-size:.8rem;font-weight:700;color:var(--text-muted);background:var(--card-bg);border:1px solid var(--border);border-radius:99px;padding:.55rem 1.05rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dshow-tab:hover{border-color:var(--navy);color:var(--navy)}
.dshow-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
/* Autoplay timer: a bar that fills on the active tab while the show plays. */
.dshow-tab{position:relative;overflow:hidden}
.dshow.is-playing .dshow-tab[aria-selected="true"]::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--green);transform-origin:left;animation:dsTimer 7s linear both}
@keyframes dsTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The homepage styles its own white .dash (the ops-band worklist), so the
   slideshow restates the dark card at higher specificity. */
.dshow .dslide.dash{background:var(--navy);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;overflow:visible;box-shadow:0 20px 50px rgba(10,15,28,.14)}
.dslide[hidden]{display:none}
.dsg{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem;align-items:start}
.dsg h4{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.8rem}
.dshow-ctrl{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1rem}
.dshow-btn{font:inherit;font-size:.8rem;font-weight:700;color:var(--navy);background:transparent;border:1px solid var(--border);border-radius:99px;padding:.45rem .95rem;cursor:pointer}
.dshow-btn:hover{border-color:var(--navy)}
.dshow-note{text-align:center;font-size:.78rem;color:var(--text-faint);margin-top:.8rem}
/* Paired bars: grey = at intake, green = latest. */
.pair{display:grid;grid-template-columns:44px 1fr 44px;gap:.6rem;align-items:center;margin-bottom:.7rem}
.pair .lab,.pair .val{font-size:.76rem;color:rgba(255,255,255,.7)}
.pair .val{text-align:right;color:var(--white);font-weight:700}
.pair .tracks{display:flex;flex-direction:column;gap:3px}
.pair .t{display:block;height:7px;border-radius:99px}
.pair .t.was{background:rgba(255,255,255,.28)}
.pair .t.now{background:var(--green)}
/* Center week on a dark card: same heat colours as the light week grid. */
.dweek{width:100%;border-collapse:separate;border-spacing:3px}
.dweek th{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:.2rem;text-align:center;background:transparent;border:0}
.dweek th[scope=row]{text-align:left;color:rgba(255,255,255,.8);white-space:nowrap;padding-right:.5rem}
.dweek td{text-align:center;font-weight:800;font-size:.7rem;padding:.45rem .2rem;border-radius:6px;border:0;line-height:1.2;vertical-align:middle}
.dlist{list-style:none;padding:0;margin:0}
.dlist li{font-size:.8rem;color:rgba(255,255,255,.75);padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.45}
.dlist li:last-child{border-bottom:none}
.dlist b{color:var(--white)}
@media(max-width:760px){.dsg{grid-template-columns:1fr}.dshow-tab{font-size:.74rem;padding:.5rem .8rem}}

/* ---------- Case card stat + flagship badge ---------- */
.case-stat{display:flex;align-items:baseline;gap:.55rem;margin-top:.8rem}
.case-stat b{font-size:1.7rem;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.02em}
.case-stat span{font-size:.75rem;color:rgba(255,255,255,.55);line-height:1.3}
.case-flag{display:inline-block;margin-left:.5rem;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--green);padding:.2rem .55rem;border-radius:99px;vertical-align:middle}

/* ---------- Findings rows: the five checks in the leak-card language ---------- */
.findings{margin-top:2rem;display:flex;flex-direction:column;gap:.55rem}
.findrow{display:grid;grid-template-columns:34px 220px 1fr;gap:1rem;align-items:center;background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--warn);border-radius:0 10px 10px 0;padding:.75rem 1rem}
.findrow.is-hi{border-left-color:var(--danger)}
.fr-n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--white);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.findrow.is-hi .fr-n{background:var(--danger)}
.findrow b{font-size:.95rem;font-weight:700;color:var(--navy)}
.fr-what{font-size:.88rem;color:var(--text-muted);line-height:1.5}
@media(max-width:640px){.findrow{grid-template-columns:34px 1fr}.fr-what{grid-column:2}}

/* ---------- Quote strip: one client voice, capping a proof section ---------- */
.quote-strip{max-width:640px;margin:3rem auto 0;text-align:center}
.quote-strip blockquote{font-size:1.15rem;line-height:1.65;color:var(--navy);font-style:italic}
.quote-strip blockquote::before{content:'\201C';display:block;font-size:2.6rem;line-height:.6;color:var(--green-dark);font-style:normal;margin-bottom:.6rem}
.quote-strip figcaption{display:flex;align-items:center;justify-content:center;gap:.65rem;margin-top:1.1rem;font-size:.82rem;color:var(--text-muted);text-align:left;line-height:1.35}
.quote-strip figcaption b{display:block;font-size:.9rem;color:var(--navy)}
.qs-avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--green);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- Who does the work: face + one paragraph, no chips ---------- */
.who{display:flex;gap:1.6rem;align-items:center;max-width:760px;margin:0 auto;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem 1.8rem}
.who img{width:120px;height:120px;border-radius:12px;object-fit:cover;flex-shrink:0}
.who p{font-size:.97rem;color:var(--text-muted);line-height:1.65;margin:0}
.who p b{color:var(--navy)}
@media(max-width:560px){.who{flex-direction:column;text-align:center;padding:1.4rem}.who img{width:104px;height:104px}}

/* ---------- Ops boards: paper heatmaps for the behavioral-health path ----
   Ink on paper, traffic-light cells, a number or code in every cell.
   Real tables, so the markup is its own text alternative. No motion. */
.board{background:var(--card-bg);border:1px solid var(--border);border-radius:18px;padding:1.5rem 1.6rem;margin-top:2rem}
.board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.board-title{font-weight:800;font-size:1.02rem;color:var(--navy);letter-spacing:-.01em}
.board-sub{font-size:.78rem;color:var(--text-muted);margin-top:.15rem}
.board-badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:.3rem .6rem;border-radius:99px;background:var(--bg-alt);color:var(--text-muted);border:1px solid var(--border);white-space:nowrap;flex-shrink:0}
.board-split{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;align-items:start}
@media(max-width:860px){.board-split{grid-template-columns:1fr}}
.board-cap{font-size:.83rem;color:var(--text-muted);line-height:1.55;margin-top:.9rem}
.board-cap b{color:var(--navy)}
.board-col-label{font-size:.78rem;font-weight:800;color:var(--text-muted);margin-bottom:.8rem}
.board-col-label b{color:var(--navy)}
.board-foot{margin-top:1.3rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:.85rem 1.1rem;font-size:.85rem;color:var(--navy)}
.board-foot .bf-stats{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-weight:800}
.board-foot .bf-stats span b{font-weight:800}
.board-foot .bf-sub{font-size:.78rem;color:var(--text-muted);font-weight:400;margin-top:.25rem}
.board-foot .bf-sub b{color:var(--navy);font-weight:700}

/* Owner heatmap: sites x weeks, percentage in every cell */
.heat{width:100%;border-collapse:separate;border-spacing:4px}
.heat th{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:.3rem .4rem;text-align:center}
.heat th[scope=row]{text-align:left;color:var(--navy);white-space:nowrap}
.heat td{text-align:center;font-weight:800;font-size:.92rem;padding:.7rem .4rem;border-radius:8px;min-width:56px}
.heat td.h-over{background:var(--heat-over);color:#fff}
.heat td.h-ok{background:var(--heat-ok);color:#fff}
.heat td.h-warn{background:var(--heat-warn);color:var(--navy)}
.heat td.h-low{background:var(--heat-low);color:#fff}
.heat td.h-under{background:var(--heat-under);color:#fff}
/* Below 700px the owner heatmap stacks: each site becomes a row of four
   week chips, per the board spec. The table semantics stay intact. */
@media(max-width:700px){
  .heat thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .heat,.heat tbody,.heat tr,.heat caption{display:block;width:100%}
  .heat tr{margin-bottom:.75rem}
  .heat th[scope=row]{display:block;padding:.15rem 0 .3rem;text-align:left}
  .heat td{display:inline-block;width:calc(25% - 5px);min-width:0;margin-right:3px;font-size:.84rem;padding:.55rem .2rem}
  .heat-weekhint{display:block}
}
.heat-weekhint{display:none;font-size:.7rem;color:var(--text-faint);margin-bottom:.5rem}

/* Ops tickets: verb chip first, then the line */
.tickets{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:0}
.ticket{display:grid;grid-template-columns:86px 1fr;gap:.9rem;align-items:center;border-radius:12px;padding:.8rem .9rem}
.ticket.t-dc{background:rgba(193,40,43,.10)}
.ticket.t-note{background:rgba(180,80,40,.12)}
.ticket.t-thresh{background:var(--heat-under-bg)}
.ticket.t-loc{background:rgba(140,64,180,.10)}
.ticket.t-add{background:var(--heat-full-bg)}
.ticket .chip{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-align:center;padding:.4rem .3rem;border-radius:7px;color:#fff}
.ticket .chip.hold{background:var(--heat-under)}
.ticket .chip.hold-note{background:var(--heat-nonote)}
.ticket .chip.amt{background:#a67f14}
.ticket .chip.reauth{background:var(--heat-loc)}
.ticket .chip.add{background:var(--heat-over)}
.ticket .t{font-size:.86rem;font-weight:700;color:var(--navy);line-height:1.3}
.ticket .m{font-size:.74rem;color:var(--text-muted);margin-top:.1rem;line-height:1.4}

/* Week grid: client-days, one coded cell each */
.weekwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.weekgrid{border-collapse:separate;border-spacing:4px;min-width:640px;width:100%}
.weekgrid th{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:.3rem .4rem;text-align:center}
.weekgrid th[scope=row]{text-align:left;color:var(--navy);font-size:.76rem;white-space:nowrap;position:sticky;left:0;background:var(--card-bg);z-index:1}
.weekgrid th[scope=row] small{font-weight:600;color:var(--text-muted);font-size:.7rem;letter-spacing:0;text-transform:none}
.weekgrid td{text-align:center;font-weight:800;font-size:.8rem;padding:.6rem .35rem;border-radius:8px;min-width:62px}
.wg-full{background:var(--heat-full-bg);color:var(--heat-over)}
.wg-under{background:var(--heat-under-bg);color:#7c5c10}
.wg-empty{background:var(--heat-empty);color:var(--text-faint)}
.wg-dc{background:var(--heat-dc);color:#fff}
.wg-loc{background:var(--heat-loc);color:#fff}
.wg-nonote{background:var(--heat-nonote);color:#fff;font-size:.64rem;letter-spacing:.02em}
.heat-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1rem;font-size:.74rem;color:var(--text-muted)}
.heat-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.4rem;vertical-align:-1px}

/* ---------- The five leaks, each anchored by its cell from the week grid.
   The list doubles as the legend for the boards below it. ---------- */
.leaks5{margin-top:2.2rem;display:flex;flex-direction:column}
.lk{display:grid;grid-template-columns:84px 240px 1fr;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border)}
.lk:first-child{border-top:1px solid var(--border)}
.lk-cell{display:flex;align-items:center;justify-content:center;width:84px;height:46px;border-radius:9px;font-weight:800;font-size:.82rem}
.lk b{font-size:.97rem;color:var(--navy);font-weight:700;line-height:1.3}
.lk b i{font-style:normal;font-size:.72rem;color:var(--text-faint);font-weight:800;margin-right:.4rem}
.lk p{font-size:.92rem;color:var(--text-muted);line-height:1.55;margin:0}
.lk-note{font-size:.78rem;color:var(--text-faint);margin-top:.8rem}
.lk-callout{margin-top:1.4rem;background:rgba(193,40,43,.05);border:1px solid rgba(193,40,43,.35);border-radius:12px;padding:1.1rem 1.3rem}
.lk-callout b.h{display:block;color:var(--danger);font-size:.95rem;margin-bottom:.35rem}
.lk-callout p{font-size:.93rem;color:var(--text-muted);line-height:1.6;margin:0}
.lk-callout p b{color:var(--danger)}
@media(max-width:700px){
  .lk{grid-template-columns:64px 1fr;row-gap:.35rem}
  .lk-cell{width:64px;height:40px;font-size:.74rem}
  .lk p{grid-column:1/-1}
}

/* ---------- Compact strip list (replaces card grids where cards were overkill) ---------- */
.striplist{margin-top:2rem;border-top:1px solid var(--border)}
.striprow{display:grid;grid-template-columns:215px 1fr;gap:1.3rem;padding:.95rem 0;border-bottom:1px solid var(--border);align-items:baseline}
.striprow b{font-size:.97rem;color:var(--navy);font-weight:700}
.striprow span{font-size:.94rem;color:var(--text-muted);line-height:1.55}
.striprow.is-red b{color:var(--danger)}
/* Leak numbers, matching the diagram on /five-leaks so the pages cross-reference. */
.leakchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--warn);color:var(--white);font-size:.62rem;font-weight:800;margin-right:.55rem;vertical-align:2px}
.leakchip.hi{background:var(--danger)}
@media(max-width:640px){.striprow{grid-template-columns:1fr;gap:.15rem}}

/* One-line qualifier, near the top, so wrong-fit readers leave early. */
.fitline{background:var(--card-bg);border:1px solid var(--border);border-left:4px solid var(--green-dark);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1.8rem;font-size:.97rem;line-height:1.65;color:var(--text-muted)}
.fitline b{color:var(--navy);font-weight:700}
.fitline .no{color:var(--danger);font-weight:700}

/* Privacy signal, stated once, compactly. */
.trustline{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--border);font-size:.86rem;color:var(--text-muted)}
.trustline b{color:var(--navy);font-weight:700}

/* ---------- Email capture ---------- */
.capture{background:var(--navy);border-radius:var(--radius-lg);padding:2.4rem 2.6rem;margin-top:2.5rem}
.capture h3{color:var(--white);font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem}
.capture>p{color:rgba(255,255,255,.62);font-size:.97rem;max-width:56ch;margin-bottom:1.5rem}
.capture-form{display:flex;gap:.7rem;flex-wrap:wrap;max-width:560px}
.capture-form input{flex:1 1 260px;padding:.85rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--white);font-family:inherit;font-size:1rem;font-weight:500}
.capture-form input::placeholder{color:rgba(255,255,255,.4)}
.capture-form input:focus{outline:2px solid var(--green);outline-offset:1px}
.capture-form button{background:var(--green);color:var(--navy);border:none;border-radius:10px;padding:.85rem 1.6rem;font-family:inherit;font-size:.97rem;font-weight:800;cursor:pointer;transition:transform .2s,opacity .2s;white-space:nowrap}
.capture-form button:hover{transform:translateY(-1px)}
.capture-form button[disabled]{opacity:.55;cursor:default;transform:none}
.capture-fine{margin-top:.9rem;font-size:.8rem;color:rgba(255,255,255,.45)}
.capture-msg{margin-top:1.1rem;font-size:.95rem;color:var(--green);font-weight:600;display:none}
.capture-msg.show{display:block}
.capture-msg.err{color:#FF9B8A}
.capture-msg a{color:var(--green);text-decoration:underline}
.capture.done .capture-form{display:none}

/* ---------- Printable checklist sheet ---------- */
.sheet{max-width:820px;margin:0 auto;padding:3.5rem 1.5rem 4rem}
.sheet-head{padding-bottom:1.8rem;border-bottom:2px solid var(--navy);margin-bottom:2rem}
.sheet-head h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:1.1;margin:.4rem 0 1rem}
.sheet-head .lede{font-size:1.03rem;color:var(--text-muted);max-width:60ch;margin-bottom:1.4rem}
.sheet-head .lede b{color:var(--navy)}
.sheet-block{margin-bottom:2.2rem;padding-bottom:1.8rem;border-bottom:1px solid var(--border);break-inside:avoid}
.sheet-block:last-child{border-bottom:none}
.sheet-block h2{font-size:1.18rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin-bottom:.4rem}
.sheet-block .q{font-size:.95rem;color:var(--green-dark);font-weight:700;margin-bottom:1rem}
.checkitems{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin:0 0 1rem}
.checkitems li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:var(--text);line-height:1.55}
.checkitems .box{flex:0 0 16px;width:16px;height:16px;border:2px solid var(--navy);border-radius:4px;margin-top:.2rem}
.sheet-block .note{font-size:.89rem;color:var(--text-muted);background:var(--bg-alt);border-left:3px solid var(--green-dark);padding:.7rem .95rem;border-radius:0 8px 8px 0;line-height:1.55}
.sheet-end .sig{margin-top:1.2rem;font-size:.85rem;color:var(--text-muted);line-height:1.7}
@media print{
  .no-print{display:none!important}
  body{background:#fff}
  .sheet{padding:0;max-width:none}
  .sheet-block{page-break-inside:avoid}
  .sheet-block .note{background:#F4F4F0}
  a{text-decoration:none;color:inherit}
}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;padding:6rem 1.5rem}
.cta-band .section-title{margin:0 auto 1rem;max-width:18ch}
.cta-band .section-subtitle{margin:0 auto 2rem}
.cta-band .hero-buttons{animation:none}

/* ---------- Footer ---------- */
.footer{background:var(--white);border-top:1px solid var(--border);padding:3rem 1.5rem 2rem}
.footer-in{max-width:1100px;margin:0 auto}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem}
.footer-cols h4,.footer-cols h3{font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.7rem}
.footer-cols a{display:block;color:var(--text-muted);margin-bottom:.5rem;font-size:.87rem;transition:color .2s}
.footer-cols a:hover{color:var(--green-dark)}
.footer-bot{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--text-faint);font-size:var(--t-meta)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .friction-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .phase-grid{grid-template-columns:1fr;gap:1.5rem}
  .phase-connector{display:none}
  .statbar-in{grid-template-columns:repeat(2,1fr);gap:1.8rem}
}
@media(max-width:680px){
  .section{padding:4rem 1.25rem}
  .hero{padding:4rem 1.25rem 3rem}
  .friction-grid{grid-template-columns:1fr}
  .fit-grid{grid-template-columns:1fr}
  .case-columns{grid-template-columns:1fr;gap:1.5rem}
  .calc-fields{grid-template-columns:1fr}
  .calc{padding:1.8rem}
  .statbar-in{gap:1.5rem}
}

/* ---------- Ops band (dark homepage band; reusable on any page) ---------- */
/* ---------- Founder block (index + about share this; keep in sync HERE) -- */
/* ---------- Directional reveals ---------- */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-right.visible{opacity:1;transform:translateX(0)}
/* FOUNDER */
.founder{position:relative;overflow:hidden}
.founder::before{content:'';position:absolute;top:50%;left:0;transform:translateY(-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(0,255,65,.05),transparent 70%);border-radius:50%;pointer-events:none}
.founder-grid{display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:center;margin-top:2.5rem}
.founder-photo{position:relative}
.founder-photo-frame{width:280px;height:340px;border-radius:var(--radius-lg);overflow:hidden;border:3px solid var(--border);position:relative;background:var(--bg-alt)}
.founder-photo-frame img{width:100%;height:100%;object-fit:cover}
.founder-photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:var(--text-muted)}
.founder-photo-placeholder svg{width:64px;height:64px;opacity:.3}
.founder-photo-placeholder span{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.4}
.founder-accent{position:absolute;bottom:-8px;right:-8px;width:100px;height:100px;border-radius:var(--radius);background:var(--green);opacity:.08;z-index:-1}
.founder-content h3{font-size:1.8rem;font-weight:800;color:var(--navy);margin-bottom:.3rem;line-height:1.2}
.founder-role{font-size:.85rem;font-weight:600;color:var(--green-dark);margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}
.founder-role::before{content:'';width:20px;height:2px;background:var(--green-dark)}
.founder-story{font-size:1.05rem;color:var(--text-muted);line-height:1.75;margin-bottom:1.5rem}
.founder-values{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.founder-value{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--text);padding:.4rem .9rem;border-radius:50px;background:var(--bg-alt);border:1px solid var(--border)}
.founder-value svg{width:14px;height:14px;color:var(--green-dark)}
.founder-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--navy);transition:all .3s}
.founder-link:hover{color:var(--green-dark);transform:translateX(4px)}
.founder-link svg{width:16px;height:16px}
@media(max-width:768px){.founder-grid{grid-template-columns:1fr;text-align:center}
.founder-photo{display:flex;justify-content:center}
.founder-photo-frame{width:200px;height:240px}
.founder-values{justify-content:center}}
.opsband{background:var(--navy);position:relative;overflow:hidden}
.opsband::before{content:'';position:absolute;top:-160px;right:-140px;width:520px;height:520px;background:radial-gradient(circle,rgba(0,255,65,.12),transparent 70%);border-radius:50%;pointer-events:none}
.opsband .section-inner{position:relative}
.opsband .section-label{color:var(--green)}
.opsband .section-title{color:#fff}
.ob-lede{font-size:1.08rem;color:rgba(255,255,255,.62);max-width:62ch;line-height:1.65;margin-top:1rem}
.ob-lede b{color:#fff;font-weight:700}
.ob-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.8rem;margin:2.6rem 0 2.4rem;padding:1.8rem 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.ob-stats b{display:block;font-size:2.1rem;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.03em}
.ob-stats span{display:block;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:.55rem;line-height:1.45}
.ob-split{display:grid;grid-template-columns:1.15fr 1fr;gap:2.2rem;align-items:start}
.ob-story p{color:rgba(255,255,255,.68);font-size:1rem;line-height:1.7;margin-bottom:1rem}
.ob-story p b{color:#fff;font-weight:700}
.ob-who-after-dash{margin-top:1.1rem}
.ob-who{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.5rem 1.6rem}
.ob-who h4,.ob-who h3{color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:.9rem}
.ob-who li{list-style:none;font-size:.92rem;color:rgba(255,255,255,.7);padding-left:1.4rem;position:relative;margin-bottom:.7rem;line-height:1.5}
.ob-who li:before{content:'';position:absolute;left:0;top:.5rem;width:6px;height:6px;border-radius:50%;background:var(--green)}
.ob-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:var(--navy);padding:.95rem 1.9rem;border-radius:10px;font-weight:800;font-size:1rem;margin-top:1.4rem;transition:transform .25s}
.ob-cta:hover{transform:translateY(-2px)}
@media(max-width:820px){.ob-split{grid-template-columns:1fr;gap:1.6rem}}
/* The company thesis, drawn: the machine drafts and checks, a person decides.
   Arrowed strip between the stats and the story. */
.ob-flow{display:flex;align-items:stretch;gap:0;margin:0 0 2.4rem}
.ob-f{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.95rem 1.1rem;position:relative}
.ob-f b{display:block;font-size:.92rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.ob-f span{display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:.25rem;line-height:1.45}
.ob-f small{display:block;font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:.35rem}
.ob-f.human{background:rgba(0,255,65,.08);border-color:rgba(0,255,65,.4)}
.ob-f.human small{color:var(--green)}
.ob-arrow{flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:var(--green);font-size:1.1rem;font-weight:800}
@media(max-width:820px){.ob-flow{flex-direction:column}
.ob-arrow{flex-basis:auto;padding:.15rem 0;transform:rotate(90deg)}}

/* ---------- BH path: current-page nav underline ---------- */
.nav-links a.is-current{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.nav-links a.nav-cta.is-current{box-shadow:none;color:var(--white)!important}

/* ---------- Horizontal spine: DELIVERED → DOCUMENTED → BILLED ----------
   Replaces the three-card triad on /five-leaks. Leak chips hang at the
   break points using the same heat codes as the weekgrid cells. */
.spine{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin:2.2rem 0 1.6rem;flex-wrap:wrap}
.spine-step{flex:1 1 140px;min-width:120px;text-align:center;position:relative}
.spine-step .spine-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:var(--card-bg);border:2px solid var(--navy);border-radius:10px;padding:.85rem .7rem;line-height:1.25}
.spine-arrow{flex:0 0 auto;align-self:center;font-size:1.35rem;font-weight:800;color:var(--navy);opacity:.35;padding:0 .15rem;margin-top:-1.6rem}
.spine-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.7rem;min-height:2rem}
.spine-gap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:2.6rem;gap:.4rem}
.leak-chip{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:32px;padding:0 .55rem;border-radius:8px;font-weight:800;font-size:.72rem;letter-spacing:.02em;line-height:1;white-space:nowrap}
.leak-chip.empty{background:var(--heat-empty);color:var(--text-faint)}
.leak-chip.dc{background:var(--heat-dc);color:#fff}
.leak-chip.under{background:var(--heat-under-bg);color:#7c5c10}
.leak-chip.loc{background:var(--heat-loc);color:#fff}
.leak-chip.nonote{background:var(--heat-nonote);color:#fff;font-size:.62rem;letter-spacing:.02em}
.spine-cap{font-size:.82rem;color:var(--text-muted);margin-top:.2rem;margin-bottom:1.4rem}
@media(max-width:700px){
  .spine{flex-direction:column;align-items:stretch;gap:.9rem}
  .spine-arrow{transform:rotate(90deg);margin:0;align-self:center;padding:0}
  .spine-gap{padding-top:0;flex-direction:row;justify-content:center}
  .spine-step{flex:1 1 auto}
}

/* ---------- Fourth correction-window band: takeback ---------- */
.wz.takeback{background:rgba(180,80,40,.10);border:1px solid rgba(180,80,40,.35)}
.wz.takeback b{color:var(--heat-nonote)}
.win-takeback{margin-top:.85rem;font-size:.92rem;color:var(--text-muted);line-height:1.55}
.win-takeback b{color:var(--navy)}
@media(max-width:760px){
  .win-bar{height:auto;min-height:360px}
}

/* ---------- Estimator EXAMPLE badge ---------- */
.calc{position:relative}
.calc-badge{position:absolute;top:1.2rem;right:1.4rem;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;border-radius:99px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22)}
@media(max-width:560px){.calc-badge{top:.9rem;right:.9rem}}

/* ---------- Before/after attendance log pair (case study) ---------- */
.logpair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2rem 0 1.2rem}
.logsheet{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.logsheet-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.7rem 1rem;background:var(--bg-alt);border-bottom:1px solid var(--border)}
.logsheet-head b{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.logsheet-head .log-badge{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:99px;background:var(--white);border:1px solid var(--border);color:var(--text-muted)}
.logsheet.before .logsheet-head b{color:var(--danger)}
.logsheet.after .logsheet-head b{color:var(--green-dark)}
.logsheet table{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
.logsheet th{text-align:left;background:transparent;padding:.55rem .7rem;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:800;border-bottom:1px solid var(--border)}
.logsheet td{padding:.5rem .7rem;border-bottom:1px solid var(--border);color:var(--text);font-weight:600;vertical-align:middle}
.logsheet tr:last-child td{border-bottom:none}
.logsheet .miss{background:rgba(193,40,43,.06);color:var(--text-faint);font-weight:600;font-style:italic}
.logsheet .added{background:rgba(11,110,35,.08);color:var(--green-dark);font-weight:800}
.logpair-cap{font-size:.9rem;color:var(--text-muted);line-height:1.55;margin:0 0 1.6rem}
.logpair-cap b{color:var(--navy)}
@media(max-width:700px){.logpair{grid-template-columns:1fr}}

/* ---------- Checklist sheet: write-on form upgrades ---------- */
.sheet-printcue{font-size:.95rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:0 0 .85rem;padding:.7rem .95rem;background:var(--bg-alt);border:1px dashed var(--navy);border-radius:8px}
.sheet-block .ck-title{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.4rem}
.sheet-block .ck-title h2{margin:0}
.sheet-block .write{display:inline-block;min-width:6.5rem;border-bottom:1.5px solid var(--navy);margin:0 .15rem;padding:0 .2rem .05rem;min-height:1.1em;vertical-align:baseline}
.sheet-block .yn{display:inline-flex;gap:1.1rem;margin-left:.4rem;font-weight:700;color:var(--navy)}
.sheet-block .yn i{font-style:normal;display:inline-flex;align-items:center;gap:.35rem}
.sheet-block .yn i::before{content:'';display:inline-block;width:14px;height:14px;border:2px solid var(--navy);border-radius:3px}
@media print{
  .nav,.footer,.no-print{display:none!important}
  body{background:var(--bg)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet{padding:0;max-width:none;background:var(--bg)}
  .sheet-printcue{border-style:solid}
  .sheet-block{page-break-inside:avoid;margin-bottom:1.1rem;padding-bottom:1rem}
  .page-hero::before,.hero::before{display:none!important}
}

/* Problem map: each problem carries how far along it really is.
   Status is the point of the component, so the chip leads the row. */
.pmap{margin-top:2.2rem;border:1px solid var(--border);background:var(--card-bg);border-radius:var(--radius)}
.pm-row{display:grid;grid-template-columns:128px 1fr;gap:1.4rem;padding:1.25rem 1.4rem;border-bottom:1px solid var(--border);align-items:start}
.pm-row:last-child{border-bottom:none}
.pm-row h3{font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin-bottom:.3rem}
.pm-row p{font-size:.88rem;color:var(--text-muted);line-height:1.55}
.pm-row p i{font-style:normal;color:var(--text-faint);font-weight:700}
.pm-chip{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.34rem .6rem;border:1.5px solid transparent;white-space:nowrap;margin-top:.1rem}
.pm-run{background:var(--green-dark);color:#fff}
.pm-build{background:var(--navy);color:#fff}
.pm-design{background:var(--card-bg);color:var(--navy);border-color:var(--navy)}
.pm-audit{background:var(--heat-empty);color:var(--text-faint)}
.pm-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.1rem;font-size:.8rem;color:var(--text-muted)}
.pm-legend span{display:inline-flex;align-items:center;gap:.5rem}
.pm-legend .pm-chip{margin-top:0}
@media(max-width:560px){.pm-row{grid-template-columns:1fr;gap:.6rem}}
/* Four-step maturity track under each status chip:
   audit scope (1) -> designed (2) -> in build (3) -> running (4). */
.pm-pips{display:flex;gap:3px;width:92px;margin-top:.6rem}
.pm-pips i{flex:1;height:5px;border-radius:99px;background:var(--border)}
.pm-pips[data-lv="1"] i:nth-child(-n+1),
.pm-pips[data-lv="2"] i:nth-child(-n+2),
.pm-pips[data-lv="3"] i:nth-child(-n+3),
.pm-pips[data-lv="4"] i{background:var(--green-dark)}

/* ---------- Problem visuals (homepage "The real problem") ---------- */
.pvis{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.pvis-lab{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.7rem}
/* 01: chart -> a person from memory -> billing census, nothing checking */
.pflow{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr;align-items:center;gap:.25rem}
.pflow span{font-size:.64rem;font-weight:800;text-align:center;border-radius:8px;padding:.55rem .25rem;background:var(--bg-alt);color:var(--navy);line-height:1.2}
.pflow span.hand{background:var(--heat-under-bg);color:#7c5c10;outline:1.5px dashed #D4A830;outline-offset:-1.5px}
.pflow i{height:2px;background:var(--text-faint);position:relative}
.pflow i::after{content:'';position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--text-faint)}
.pnote{font-size:.72rem;color:var(--heat-under);font-weight:700;margin-top:.6rem}
/* 02: the correction window */
.ptime{display:grid;grid-template-columns:1fr 1.3fr 1.7fr;border-radius:8px;overflow:hidden}
.ptime span{font-size:.6rem;font-weight:800;padding:.55rem .35rem;line-height:1.25;text-align:center}
.ptime .t1{background:var(--heat-full-bg);color:var(--heat-over)}
.ptime .t2{background:var(--heat-under-bg);color:#7c5c10}
.ptime .t3{background:var(--heat-under);color:#fff}
.ptime-ax{display:grid;grid-template-columns:1fr 1.3fr 1.7fr;font-size:.6rem;color:var(--text-faint);margin-top:.35rem;font-weight:700}
/* 03: every site through one person */
.phub{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:.4rem}
.phub .sites{display:grid;grid-template-columns:repeat(2,14px);gap:4px}
.phub .sites i{width:14px;height:14px;border-radius:4px;background:var(--navy);opacity:.75}
.phub .one{width:38px;height:38px;border-radius:50%;background:var(--heat-under-bg);outline:2px dashed #D4A830;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#7c5c10}
.phub .bill{font-size:.62rem;font-weight:800;background:var(--bg-alt);border-radius:8px;padding:.5rem .45rem;color:var(--navy)}
.phub b{display:block;height:2px;background:var(--text-faint)}
.phub-cap{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-faint);font-weight:700;margin-top:.4rem}

/* ---------- The rule, shown: engine drafts, a person decides ---------- */
.rdemo{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.4rem}
.rdemo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rstep{display:grid;grid-template-columns:78px 1fr;gap:.9rem;align-items:start;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.08)}
.rwho{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:.35rem .4rem;text-align:center}
.rwho.eng{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.rwho.per{background:var(--green);color:var(--navy)}
.rstep p{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.5}
.rstep p b{color:#fff}
.rbtns{display:flex;gap:.4rem;margin-top:.55rem;flex-wrap:wrap}
.rbtns span{font-size:.66rem;font-weight:800;padding:.32rem .7rem;border-radius:99px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6)}
.rbtns span.on{background:#fff;color:var(--navy);border-color:#fff}
.rtally{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.rtally div{background:rgba(255,255,255,.05);border-radius:10px;padding:.7rem .6rem;text-align:center}
.rtally b{display:block;font-size:1.35rem;color:var(--green);letter-spacing:-.02em;line-height:1}
.rtally span{font-size:.62rem;color:rgba(255,255,255,.5);line-height:1.3;display:block;margin-top:.3rem}
/* Engine / person split list (homepage rule, case study) */
.rsplit{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rsplit div{border-radius:12px;padding:1rem 1.1rem}
.rsplit .e{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.rsplit .p{background:rgba(0,243,61,.07);border:1px solid rgba(0,243,61,.3)}
.rsplit h4{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem;color:rgba(255,255,255,.55)}
.rsplit .p h4{color:var(--green)}
.rsplit ul{list-style:none;padding:0;margin:0}
.rsplit li{list-style:none;font-size:.88rem;color:rgba(255,255,255,.8);padding:.4rem 0;line-height:1.45;border-top:1px solid rgba(255,255,255,.07)}
.rsplit li:first-child{border-top:0}
.rsplit li b{color:#fff}

/* ---------- Case study: what ten seconds produces ---------- */
.tpipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:2rem 0 2.4rem;counter-reset:tp}
.tpipe div{position:relative;padding:1.1rem 1rem 1rem;background:var(--card-bg);border:1px solid var(--border);margin-right:-1px}
.tpipe div:first-child{border-radius:14px 0 0 14px}
.tpipe div:last-child{border-radius:0 14px 14px 0;background:var(--navy);border-color:var(--navy)}
.tpipe div:last-child b,.tpipe div:last-child span{color:#fff}
.tpipe div:last-child small{color:var(--green)}
.tpipe small{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.4rem}
.tpipe b{display:block;font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.05}
.tpipe span{display:block;font-size:.78rem;color:var(--text-muted);margin-top:.35rem;line-height:1.4}

/* ---------- Five leaks: what gets checked, by hand vs every week ---------- */
.cov2{max-width:720px;margin:2.2rem auto 0;text-align:left}
.cov2-row{display:grid;grid-template-columns:130px 1fr;gap:.9rem;align-items:center;margin-bottom:.7rem}
.cov2-row em{font-style:normal;font-size:.8rem;font-weight:800;color:var(--navy)}
.cov2-row em small{display:block;font-weight:600;font-size:.7rem;color:var(--text-muted)}
.cov2-wk{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.cov2-wk i{height:26px;border-radius:5px;background:var(--heat-empty)}
.cov2-wk i.part{background:var(--heat-under-bg);outline:1.5px dashed #D4A830;outline-offset:-1.5px}
.cov2-wk i.all{background:var(--green-dark)}
.cov2-ax{display:grid;grid-template-columns:130px 1fr;gap:.9rem;font-size:.62rem;color:var(--text-faint);font-weight:700}
.cov2-ax span{display:flex;justify-content:space-between}
.cov2-note{font-size:.72rem;color:var(--text-faint);margin-top:.6rem;text-align:center}

@media(max-width:760px){
  .rsplit{grid-template-columns:1fr}
  .tpipe{grid-template-columns:1fr 1fr}
  .tpipe div{margin:0 0 -1px 0;border-radius:0!important}
  .tpipe div:first-child{border-radius:14px 14px 0 0!important}
  .tpipe div:last-child{border-radius:0 0 14px 14px!important}
  .cov2-row,.cov2-ax{grid-template-columns:1fr}
  .rstep{grid-template-columns:1fr}
}

/* Screen-reader-only text (the hero H1's full meaning) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* One-line agency statement under the hero */
.scope{padding:.5rem 1.5rem 0;text-align:center}
.scope-line{max-width:760px;margin:0 auto;font-size:1.08rem;line-height:1.6;color:var(--text-muted)}
.scope-line b{color:var(--navy);font-weight:800}
/* Delivery status, kept separate from "sample data" */
.dshow-status{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;font-size:.86rem;color:var(--text-muted);margin:-.2rem 0 1rem;text-align:center}
.dshow-status .pm-chip{margin:0}

/* ---------- Homepage restructure (2026-10-01) ---------- */
/* Built for: one quiet row under the problem cards */
.builtfor{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.builtfor b{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-right:.4rem}
.builtfor span{font-size:.86rem;color:var(--navy);background:var(--card-bg);border:1px solid var(--border);border-radius:99px;padding:.4rem .85rem}
/* Case study: where it stands */
.case-status{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem 1.6rem 1.3rem}
.case-status h3{font-size:1.1rem;font-weight:800;color:var(--navy);margin-bottom:1rem;letter-spacing:-.01em}
.case-status ul{list-style:none;padding:0;margin:0 0 1.2rem}
.case-status li{display:grid;grid-template-columns:96px 1fr;gap:.7rem;align-items:start;padding:.55rem 0;border-top:1px solid var(--border);font-size:.88rem;color:var(--text);line-height:1.45}
.case-status li:first-child{border-top:0}
.case-status li .pm-chip{justify-self:start}
.case-nums{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.case-nums div{background:var(--bg-alt);border-radius:12px;padding:.85rem .9rem}
.case-nums b{display:block;font-size:1.7rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
.case-nums span{display:block;font-size:.76rem;color:var(--text-muted);margin-top:.35rem;line-height:1.4}
.case-note{font-size:.82rem;color:var(--text-muted);line-height:1.5}
.case-note b{color:var(--navy)}
/* Founder: facts instead of self-descriptions */
.founder-facts{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.founder-facts li{font-size:.95rem;color:var(--navy);font-weight:600;padding-left:1.2rem;position:relative}
.founder-facts li::before{content:'';position:absolute;left:0;top:.55rem;width:7px;height:7px;border-radius:50%;background:var(--green-dark)}
/* How it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.steps div{background:var(--card-bg);border:1px solid var(--border);border-top:3px solid var(--green-dark);border-radius:var(--radius);padding:1.1rem 1.1rem 1.2rem}
.steps small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.45rem}
.steps b{display:block;font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.steps span{font-size:.86rem;color:var(--text-muted);line-height:1.5}
.faq-h{font-size:1.2rem;font-weight:800;color:var(--navy);margin:3rem 0 0;letter-spacing:-.01em}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps,.case-nums{grid-template-columns:1fr}.case-status li{grid-template-columns:1fr;gap:.35rem}}

/* ===== Shared nav: Services menu + phone menu (2026-10-01) =====
   Desktop: the Services menu opens on hover or keyboard focus (no JS).
   Phone (<=860px): text links fold into a <details> menu beside the CTA. */
.nav-dd{position:relative}
.nav-dd-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;color:var(--text-muted);font-weight:600;font-size:.9rem;white-space:nowrap}
.nav-dd-btn svg{width:12px;height:12px;transition:transform .2s}
.nav-dd-btn:focus-visible{outline:2px solid var(--green-dark);outline-offset:3px;border-radius:4px}
.nav-dd:hover .nav-dd-btn,.nav-dd:focus-within .nav-dd-btn,.nav-dd-btn.is-current{color:var(--navy)}
.nav-dd:hover .nav-dd-btn svg,.nav-dd:focus-within .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 34px);left:50%;transform:translateX(-50%);min-width:270px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:.45rem;box-shadow:0 12px 40px rgba(10,15,28,.1);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;z-index:120}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-36px;height:36px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-links .nav-dd-menu a{display:block;padding:.6rem .75rem;border-radius:8px;white-space:normal}
.nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--bg-alt);outline:none}
.nav-dd-menu b{display:block;color:var(--navy);font-size:.88rem;font-weight:700}
.nav-dd-menu span{display:block;color:var(--text-muted);font-size:.76rem;font-weight:500;margin-top:.1rem}
.nav-dd-menu a.is-current b{color:var(--green-dark)}
.nav-dd-menu small.nav-dd-group{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:.55rem .75rem .15rem;margin-top:.3rem;border-top:1px solid var(--border)}
.nav-mob{display:none;position:static}
.nav-mob summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:.55rem .35rem}
.nav-mob summary::-webkit-details-marker{display:none}
details.nav-mob summary:before,details.nav-mob[open] summary:before,.nav-mob summary::after{content:none;display:none}
.nav-mob summary i{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.nav-mob[open] summary i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-mob[open] summary i:nth-child(2){opacity:0}
.nav-mob[open] summary i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mob-panel{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 12px 30px rgba(10,15,28,.08);padding:.8rem 1.1rem 1.1rem;display:flex;flex-direction:column}
.nav-links .nav-mob-panel a{padding:.6rem 0;border-top:1px solid var(--border);color:var(--navy);font-weight:600;white-space:normal}
.nav-links .nav-mob-panel a:first-child{border-top:0}
.nav-mob-panel small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:.6rem 0 .1rem}
.nav-links .nav-mob-panel a.sub{padding-left:.8rem;font-weight:500;color:var(--text)}
@media(max-width:860px){.nav{position:sticky}.nav-dd,.nav-links a.nav-text{display:none}.nav-mob{display:block}}
@media print{.nav-mob,.nav-dd-menu{display:none!important}}

/* ===== Tight sections (2026-10-01) =====
   Brief sections (FAQs, short lists, data-handling notes) get less padding and
   a smaller heading, so long pages stop repeating one big rhythm. */
.section.tight{padding:3.75rem 1.5rem}
.section.tight .section-title{font-size:clamp(1.45rem,2.8vw,2.05rem);max-width:28ch;margin-bottom:.6rem}
.section.tight .faq{margin-top:1.4rem}
@media(max-width:560px){.section.tight{padding:3rem 1.1rem}}

/* ===== Plain service lines (2026-10-01) =====
   One sentence under a memorable headline that says exactly what the service is. */
.hero-plain{max-width:640px;margin:-.3rem auto 1rem;font-size:clamp(1rem,1.5vw,1.12rem);font-weight:700;line-height:1.5;color:var(--navy);text-wrap:balance}

/* ===== One palette on the Tailwind-built pages (2026-10-01) =====
   Five Leaks, the case study and the checklist were built with Tailwind's slate
   greys, a cooler blue-grey than the rest of the site, and slate-400 failed
   contrast on white. Map them onto the brand neutrals; dark sections get a
   light grey instead. !important because the compiled Tailwind file loads last. */
.text-slate-600,.text-slate-500{color:var(--text-muted)!important}
.text-slate-400{color:var(--text-faint)!important}
.bg-\[\#0A0F1C\] .text-slate-300,.bg-\[\#0A0F1C\] .text-slate-200,.bg-slate-900 .text-slate-300,.bg-slate-800 .text-slate-300{color:rgba(255,255,255,.72)!important}
.bg-slate-50,.bg-slate-100{background-color:var(--bg-alt)!important}
.bg-slate-800,.bg-slate-900{background-color:var(--navy-light)!important}
.border-slate-700,.border-slate-800{border-color:rgba(255,255,255,.12)!important}
.bg-\[\#0A0F1C\] .text-slate-400,.bg-\[\#0A0F1C\] .text-slate-500,.bg-\[\#0A0F1C\] .text-slate-600,
.bg-slate-900 .text-slate-400,.bg-slate-900 .text-slate-500,
.bg-slate-800 .text-slate-400,.bg-slate-800 .text-slate-500{color:rgba(255,255,255,.62)!important}

/* Button variants for dark closing sections (2026-10-01): same shape as .hero-cta. */
.hero-cta-green{background:var(--green);color:var(--navy)!important}
.hero-cta-green:hover{background:var(--white);color:var(--navy)!important}
.hero-cta-ghost{background:transparent;color:var(--white)!important;border:2px solid rgba(255,255,255,.25)}
.hero-cta-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5)}
/* 320px phones: the nav (logo, call button, menu) measured 8px too wide. 2026-10-02 */
@media(max-width:360px){.nav-in{padding:.8rem .85rem;gap:.5rem}.nav-links{gap:.55rem}.nav-cta{padding:.5rem .7rem;font-size:.8rem}}