/* =====================================================================
   BH5 — Components
   ===================================================================== */

/* ---------------- Buttons ----------------
   Each variant owns BOTH its normal and hover (bg / fg / border) tokens, so
   text contrast is always correct on hover AND on a sticky mobile tap-hover. */
.btn {
  /* normal */
  --bg: var(--action);        --fg: var(--on-action);  --bd: var(--action);
  /* hover */
  --bg-h: var(--action-hover); --fg-h: var(--on-action); --bd-h: var(--action-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 600 1.0625rem/1 var(--font-sans); letter-spacing: -0.01em;
  padding: .92rem 1.4rem; border-radius: var(--r-md); min-height: 48px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  cursor: pointer; text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn .arrow { transition: transform .2s ease; }
@media (hover: hover) {
  .btn:hover { background: var(--bg-h); color: var(--fg-h); border-color: var(--bd-h); transform: translateY(-1px); box-shadow: var(--shadow-2); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:active { background: var(--bg-h); color: var(--fg-h); border-color: var(--bd-h); transform: translateY(0); }
.btn:focus-visible { background: var(--bg-h); color: var(--fg-h); border-color: var(--bd-h); }

.btn--ghost   { --bg: transparent;        --fg: var(--text);    --bd: var(--border);
                --bg-h: var(--white);       --fg-h: var(--ink-900); --bd-h: var(--ink-900); }
.btn--on-dk   { --bg: var(--blue-500);   --fg: #070B18;        --bd: var(--blue-500);
                --bg-h: var(--blue-300);   --fg-h: #070B18;        --bd-h: var(--blue-300); }
.btn--ghost-dk{ --bg: transparent;        --fg: var(--on-dk);   --bd: rgba(255,255,255,.24);
                --bg-h: rgba(255,255,255,.10); --fg-h: #fff;       --bd-h: rgba(255,255,255,.55); }
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1.125rem; }

/* ---------------- Header / nav ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .45rem; }
.brand-suffix { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .03em; color: var(--text-muted); white-space: nowrap; }
.brand-logo { display: block; height: 32px; width: auto; }
.footer .brand-logo { height: 35px; }
.nav-collapse { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav-links a { font-size: .975rem; color: var(--text-muted); transition: color .15s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; background: var(--white); border: var(--border-hair); border-radius: var(--r-sm); width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.nav-toggle span { display:block; width:20px; height:2px; border-radius:2px; background: var(--ink-900); transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-collapse { display: none; }
  .nav.open .nav-collapse {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 72px; z-index: 49;
    background: var(--white); border-top: var(--border-hair); border-bottom: var(--border-hair);
    box-shadow: var(--shadow-2); padding: .25rem clamp(1.25rem,5vw,2rem) 1.4rem;
  }
  .nav.open .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav.open .nav-links a {
    font-size: 1.075rem; color: var(--text); padding: 1.05rem .25rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav.open .nav-links a:last-child { border-bottom: none; }
  .nav.open .nav-cta { display: block; margin-top: 1rem; }
  .nav.open .nav-cta .btn { width: 100%; }
  /* hamburger → X */
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------------- Hero ---------------- */
.hero { position: relative; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--space-section); overflow: hidden; }
.hero::before { /* subtle radial energy glow */
  content:""; position:absolute; inset:-20% 40% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(45,76,241,.10), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-top: 1.1rem; }
.hero .hl { color: var(--accent); }
.hero-sub { margin-top: 1.4rem; font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.5; max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero-note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .8rem; color: var(--text-faint); letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; }
.hero-note b { color: var(--accent); font-weight: 500; }

/* meter readout card */
.meter {
  background: var(--bg-surface); border: var(--border-hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 1.6rem; position: relative; overflow: hidden;
}
.meter::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--blue-700), var(--blue-300)); }
.meter-head { display:flex; justify-content: space-between; align-items:center; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-faint); border-bottom: 1px dashed var(--border); padding-bottom: .85rem; }
.meter-rows { display:grid; gap:1rem; padding: 1.2rem 0; }
.meter-row { display:flex; justify-content: space-between; align-items: baseline; }
.meter-row .lbl { font-size:.9rem; color: var(--text-muted); }
.meter-row .val { font-family: var(--font-mono); font-weight: 500; font-size:1.15rem; font-feature-settings:"tnum" 1; }
.meter-row .val.base { color: var(--data-base); }
.meter-delta { background: var(--bg-accent); border-radius: var(--r-md); padding: 1.1rem 1.2rem; display:flex; align-items:baseline; justify-content:space-between; }
.meter-delta .big { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.2rem,6vw,2.9rem); color: var(--data-pos); letter-spacing:-.03em; line-height:1; }
.meter-delta .cap { text-align:right; font-size:.78rem; color: var(--text-muted); max-width: 15ch; }
.meter-foot { margin-top:1rem; font-size:.72rem; color: var(--text-faint); border-top: 1px dashed var(--border); padding-top:.85rem; font-family: var(--font-mono); }

@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .meter { max-width: 460px; } }

/* ---------------- Logo / trust strip ---------------- */
.trust-strip { border-block: var(--border-hair); background: var(--bg-surface); }
.trust-strip .wrap { display:flex; align-items:center; gap: clamp(1rem,4vw,3rem); flex-wrap:wrap; padding-block: 1.1rem; }
.trust-strip .t-lbl { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-faint); }
.trust-strip .t-items { display:flex; gap: clamp(1rem,3vw,2.2rem); flex-wrap:wrap; color: var(--text-muted); font-weight:500; }
.trust-strip .t-items span { display:inline-flex; align-items:center; gap:.5rem; min-width:0; overflow-wrap:anywhere; }

/* ---------------- Section header ---------------- */
.sec-head { max-width: 60ch; }
.sec-head h2 { margin-top: .9rem; }
.sec-head p { margin-top: 1rem; }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow { justify-content:center; }

/* ---------------- Feature cells (how we're different) ---------------- */
.cells { display:grid; grid-template-columns: repeat(4, 1fr); border: var(--border-hair); border-radius: var(--r-lg); overflow:hidden; background: var(--bg-surface); margin-top: 2.5rem; }
.cell { padding: 1.6rem 1.5rem; border-right: var(--border-hair); }
.cell:last-child { border-right: none; }
.cell .num { font-family: var(--font-mono); font-size:.75rem; color: var(--accent); letter-spacing:.1em; }
.cell h3 { font-size: 1.12rem; margin-top:.7rem; letter-spacing:-.01em; }
.cell p { margin-top:.5rem; font-size:.94rem; color: var(--text-muted); line-height:1.5; }
@media (max-width: 880px){ .cells{ grid-template-columns:1fr 1fr; } .cell:nth-child(2){border-right:none;} .cell:nth-child(1),.cell:nth-child(2){border-bottom:var(--border-hair);} }
@media (max-width: 520px){ .cells{ grid-template-columns:1fr; } .cell{border-right:none; border-bottom:var(--border-hair);} .cell:last-child{border-bottom:none;} }

/* ---------------- Offer (shared-savings) ---------------- */
.offer { background: var(--bg-surface); border-block: var(--border-hair); }
.offer-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.offer-statement { font-size: clamp(1.5rem,3vw,2.1rem); font-weight:600; letter-spacing:-.03em; line-height:1.18; }
.offer-statement .x { color: var(--accent); }
.offer-guarantee { margin-top: 1.4rem; border-left: 3px solid var(--accent); padding-left: 1.1rem; color: var(--text-muted); }
.steps { display:grid; gap: 1px; background: var(--border); border:var(--border-hair); border-radius: var(--r-lg); overflow:hidden; }
.step { background: var(--bg-surface); padding: 1.35rem 1.5rem; display:grid; grid-template-columns: auto 1fr; gap:1.1rem; align-items:start; }
.step .s-num { font-family: var(--font-mono); font-weight:600; color: var(--accent); font-size:1rem; width:2.4rem; height:2.4rem; display:grid; place-items:center; border:1px solid var(--accent); border-radius:50%; }
.step h3 { font-size:1.08rem; }
.step p { color: var(--text-muted); font-size:.95rem; margin-top:.25rem; line-height:1.5; }
@media (max-width: 880px){ .offer-grid{ grid-template-columns:1fr; } }

/* ---------------- Dark anchor: how it works / mechanism ---------------- */
.anchor { background: var(--bg-invert); color: var(--text-on-invert); position:relative; overflow:hidden; }
.anchor::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(80% 60% at 70% 20%, #000, transparent 75%); }
.anchor .wrap { position:relative; }
.anchor h2 { color: var(--white); }
.anchor .lead { color: var(--text-on-invert-muted); }
.flow { display:grid; grid-template-columns: repeat(4,1fr); gap:0; margin-top:3rem; }
.flow-step { padding: 1.6rem 1.4rem; border-left: 1px solid rgba(255,255,255,.12); position:relative; }
.flow-step:first-child { border-left:none; }
.flow-step .fs-num { font-family:var(--font-mono); font-size:.78rem; color: var(--accent-on-dk); letter-spacing:.14em; }
.flow-step h3 { color:var(--white); font-size:1.12rem; margin-top:.8rem; }
.flow-step p { color: var(--text-on-invert-muted); font-size:.92rem; margin-top:.5rem; line-height:1.55; }
.flow-step .fs-tick { position:absolute; top:1.7rem; right:1.2rem; color: var(--accent-on-dk); font-family:var(--font-mono); font-size:.7rem; }
@media (max-width: 880px){ .flow{ grid-template-columns:1fr 1fr; } .flow-step{ border-top:1px solid rgba(255,255,255,.12);} .flow-step:nth-child(odd){border-left:none;} }
@media (max-width: 520px){ .flow{ grid-template-columns:1fr; } .flow-step{border-left:none;} }
.mech-note { margin-top: 2.4rem; background: var(--ink-dk-2); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding:1.3rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.mech-note .tag { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color: var(--accent-on-dk); border:1px solid rgba(61,186,139,.4); border-radius:var(--r-pill); padding:.25rem .6rem; white-space:nowrap; }
.mech-note p { color: var(--text-on-invert-muted); font-size:.92rem; line-height:1.55; }

/* ---------------- Calculator ---------------- */
.calc { background: var(--bg-accent); border-block: var(--border-hair); }
.calc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:stretch; margin-top:2.5rem; }
.calc-panel { background: var(--bg-surface); border: var(--border-hair); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); box-shadow: var(--shadow-1); }
.field { margin-bottom: 1.3rem; }
.field label { display:flex; justify-content:space-between; align-items:baseline; font-size:.9rem; font-weight:500; margin-bottom:.5rem; }
.field label .hint { font-family:var(--font-mono); font-size:.75rem; color: var(--text-faint); font-weight:400; }
.input, .select { width:100%; font: 500 1rem var(--font-sans); height: 48px; padding:0 .9rem; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--white); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline:none; }
/* selects: drop chunky native UI, add a consistent custom chevron */
.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235A6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 13px;
}
/* always-readable native option list (fixes white-on-white on the dark form) */
.select option { color: var(--ink-900); background: var(--white); font-weight: 500; }
.input-money { position:relative; }
.input-money::before { content:"$"; position:absolute; left:.85rem; bottom:24px; transform:translateY(50%); color: var(--text-faint); font-weight:500; pointer-events:none; }
.input-money .input { padding-left: 1.7rem; }
.range-wrap { display:flex; align-items:center; gap:1rem; }
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:99px; background: linear-gradient(90deg,var(--blue-500),var(--blue-700)); width:100%; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--white); border:2px solid var(--blue-700); box-shadow: var(--shadow-1); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--white); border:2px solid var(--blue-700); cursor:pointer; }
.range-val { font-family:var(--font-mono); font-weight:600; color: var(--accent); min-width: 3.2ch; text-align:right; }

.calc-out { background: var(--ink-dk); color: var(--on-dk); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; }
.calc-out h3 { color:var(--white); font-size:1.05rem; }
.calc-out .out-eyebrow { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color:var(--accent-on-dk); text-transform:uppercase; }
.out-big { margin:1.1rem 0 .2rem; }
.out-big .num { font-family:var(--font-mono); font-weight:600; font-size: clamp(2.4rem,7vw,3.4rem); color: var(--blue-300); letter-spacing:-.03em; line-height:1; font-feature-settings:"tnum" 1; }
.out-big .rng { font-family:var(--font-mono); font-size:.85rem; color: var(--on-dk-muted); margin-top:.4rem; }
.out-rows { margin-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); }
.out-row { display:flex; justify-content:space-between; align-items:baseline; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.out-row .l { color: var(--on-dk-muted); font-size:.92rem; }
.out-row .v { font-family:var(--font-mono); font-weight:500; }
.out-row .v.pos { color: var(--blue-300); }
.calc-out .btn { margin-top: auto; }
.calc-disclaimer { margin-top: 1rem; font-size:.74rem; color: var(--on-dk-muted); font-family:var(--font-mono); line-height:1.5; }
@media (max-width: 820px){ .calc-grid{ grid-template-columns:1fr; } }

/* ---------------- Results / proof ---------------- */
.results-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
@media (max-width: 960px){ .results-grid{ grid-template-columns:1fr 1fr; } }
.result-card { background: var(--bg-surface); border: var(--border-hair); border-radius: var(--r-lg); padding:1.6rem; }
.result-card .rc-metric { font-family:var(--font-mono); font-weight:600; font-size:2.3rem; color: var(--data-pos); letter-spacing:-.03em; }
.result-card .rc-where { font-weight:600; margin-top:.5rem; }
.result-card .rc-desc { color: var(--text-muted); font-size:.92rem; margin-top:.4rem; line-height:1.5; }
.result-card .rc-src { font-family:var(--font-mono); font-size:.72rem; color: var(--text-faint); margin-top:.9rem; }
.result-card.pilot { background: var(--ink-dk); color:var(--on-dk); border-color: transparent; display:flex; flex-direction:column; }
.result-card.pilot h3 { color:#fff; font-size:1.25rem; }
.result-card.pilot p { color:var(--on-dk-muted); font-size:.95rem; margin-top:.6rem; line-height:1.55; }
.result-card.pilot .badge { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color:var(--accent-on-dk); }
.result-card.pilot .btn { margin-top:auto; }
@media (max-width: 620px){ .results-grid{ grid-template-columns:1fr; } }

/* ---------------- Case studies (on dark anchor) ---------------- */
.case-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; align-items:stretch; }
/* When a card is expanded, stop the grid stretching siblings to match it — only the open card grows. */
.case-grid:has(details[open]) { align-items:start; }
@media (max-width: 960px){ .case-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .case-grid{ grid-template-columns:1fr; } }
.case-card { background: var(--ink-dk-2); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition: border-color .2s, transform .2s; }
.case-card:hover { border-color: var(--accent-on-dk); transform: translateY(-2px); }
.case-card picture { position:relative; display:block; }
.case-card picture::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,18,38,.15) 0%, rgba(12,18,38,0) 35%, rgba(12,18,38,.55) 100%); pointer-events:none; }
.cs-img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background: var(--ink-dk); }
.cs-tag { position:absolute; z-index:1; top:.75rem; left:.75rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color: var(--accent-on-dk); background: rgba(12,18,38,.62); border:1px solid rgba(147,166,255,.35); border-radius: var(--r-pill); padding:.28rem .65rem; backdrop-filter: blur(2px); }
.cs-pct { position:absolute; z-index:1; right:.85rem; bottom:.7rem; font-family:var(--font-mono); font-weight:700; font-size:2.1rem; line-height:1; letter-spacing:-.03em; color: var(--blue-300); text-shadow: 0 0 1px rgba(12,18,38,.9), 0 1px 3px rgba(12,18,38,.85), 0 2px 14px rgba(12,18,38,.75); display:flex; flex-direction:column; align-items:flex-end; }
.cs-pct small { font-family:var(--font-sans); font-weight:500; font-size:.62rem; letter-spacing:.02em; color: var(--on-dk); text-shadow:0 1px 6px rgba(0,0,0,.6); margin-top:.15rem; }
.cs-body { padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.cs-eyebrow { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-on-dk); }
.case-card h3 { color: var(--white); font-size:1.1rem; margin-top:.4rem; line-height:1.25; }
.cs-sub { font-style:italic; font-size:.82rem; color: var(--on-dk-muted); margin-top:.3rem; line-height:1.4; }
.cs-stats { display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem; margin-top:auto; padding-top:1.1rem; }
.cs-stat { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding:.6rem .5rem; text-align:center; }
.cs-stat-v { display:block; font-family:var(--font-mono); font-weight:600; font-size:.86rem; color: var(--on-dk); line-height:1.2; }
.cs-stat-l { display:block; font-size:.64rem; color: var(--on-dk-muted); margin-top:.25rem; line-height:1.2; }
.cs-details { margin-top:0; }
summary.cs-more { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.4rem; padding-top:1.1rem; font-family:var(--font-mono); font-size:.78rem; color: var(--accent-on-dk); }
summary.cs-more::-webkit-details-marker { display:none; }
summary.cs-more:hover { color: var(--blue-500); }
summary.cs-more:focus-visible { outline:2px solid var(--accent-on-dk); outline-offset:3px; border-radius:var(--r-sm); }
.cs-more-hide { display:none; }
details[open] .cs-more-show { display:none; }
details[open] .cs-more-hide { display:inline; }
.cs-chev { transition: transform .2s; }
details[open] .cs-chev { transform: rotate(180deg); }
.cs-detail-body { margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.1); }
.cs-narrative { font-size:.86rem; color: var(--on-dk-muted); line-height:1.55; }
.cs-quote { margin:.85rem 0 0; padding-left:.8rem; border-left:2px solid var(--accent-on-dk); font-style:italic; font-size:.86rem; color: var(--on-dk); line-height:1.5; }
.cs-quote cite { display:block; margin-top:.5rem; font-style:normal; font-family:var(--font-mono); font-size:.72rem; color: var(--on-dk-muted); }

/* ---------------- Industries ---------------- */
.ind-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
@media (max-width: 960px){ .ind-grid{ grid-template-columns:1fr 1fr; } }
.ind { border: var(--border-hair); border-radius: var(--r-lg); padding:1.6rem; background: var(--bg-surface); transition: border-color .2s, transform .2s; }
.ind:hover { border-color: var(--accent); transform: translateY(-2px); }
.ind .ic { width:40px; height:40px; border-radius:var(--r-md); background: var(--bg-accent); display:grid; place-items:center; color:var(--accent); }
.ind-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md); display:block; background:var(--bg-accent); }
.how-banner { width:100%; aspect-ratio:1600/420; object-fit:cover; border-radius:var(--r-lg); display:block; margin:0 0 2.2rem; }
.ind h3 { font-size:1.1rem; margin-top:1.1rem; }
.ind p { color:var(--text-muted); font-size:.92rem; margin-top:.45rem; line-height:1.5; }
.ind .tagline { font-family:var(--font-mono); font-size:.74rem; color:var(--accent); margin-top:.9rem; }
@media (max-width: 620px){ .ind-grid{ grid-template-columns:1fr; } }

/* ---------------- FAQ ---------------- */
.faq-list { margin-top:2.5rem; border-top: var(--border-hair); }
.faq-item { border-bottom: var(--border-hair); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:1.35rem 0; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; font: 600 1.12rem var(--font-sans); color:var(--text); letter-spacing:-.01em; }
.faq-q .ico { flex:none; width:26px; height:26px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; transition:.2s; color:var(--accent); }
.faq-q[aria-expanded=true] .ico { background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(45deg); }
.faq-a { overflow:hidden; max-height:0; transition: max-height .3s ease; }
.faq-a > div { padding-bottom:1.4rem; color:var(--text-muted); max-width:68ch; line-height:1.62; }

/* ---------------- Final CTA / form ---------------- */
.cta { background: var(--bg-invert); color: var(--on-dk); }
.cta-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.cta h2 { color:#fff; }
.cta .lead { color: var(--on-dk-muted); }
.cta-list { margin-top:1.6rem; display:grid; gap:.8rem; }
.cta-list li { list-style:none; display:flex; gap:.7rem; align-items:flex-start; color:var(--on-dk); }
.cta-list .ck { color:var(--accent-on-dk); flex:none; }
.form { background: var(--ink-dk-2); border:1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); }
.form .field label { color: var(--on-dk); }
.form .input, .form .select { background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color:#fff; }
/* lighter chevron on the dark form (option list stays dark-on-white via .select option) */
.form .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239FB0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.form .input::placeholder { color: var(--on-dk-muted); }
.form .input:focus, .form .select:focus { border-color: var(--blue-300); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form .btn { width:100%; justify-content:center; }
.form-note { margin-top:.9rem; font-size:.76rem; color:var(--on-dk-muted); font-family:var(--font-mono); line-height:1.5; }
@media (max-width: 820px){ .cta-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ---------------- Footer ---------------- */
.footer { background: var(--bg-surface); border-top: var(--border-hair); padding-block: 3rem 2rem; }
.footer-top { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer .brand { font-size:1.1rem; }
.footer-cols { display:flex; gap: clamp(2rem,5vw,4rem); flex-wrap:wrap; }
.footer-col h4 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.9rem; font-weight:500; }
.footer-col a:not(.btn), .footer-col p { display:block; color:var(--text-muted); font-size:.92rem; margin-bottom:.5rem; }
.footer-col a:not(.btn):hover { color:var(--text); }
.footer-col .btn { margin-top:.2rem; }
.footer-legal { margin-top:2.5rem; padding-top:1.5rem; border-top: var(--border-hair); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-faint); }
.footer-disclaimer { margin-top:1rem; font-size:.76rem; color:var(--text-faint); max-width:80ch; line-height:1.55; }

/* generic 2-col + helpers */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 820px){ .grid-2{ grid-template-columns:1fr; } }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}

/* ---------------- Phone polish (≤600px) ---------------- */
@media (max-width: 600px) {
  /* stack + full-width every CTA cluster so buttons align cleanly */
  .hero-cta { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hero-cta .btn { width: 100%; }
  .hero-note { flex-wrap: wrap; row-gap: .35rem; line-height: 1.5; }
  .calc-out .btn,
  .result-card .btn,
  .ind .btn { width: 100%; }
  /* the offer + pilot CTAs live in .hero-cta wrappers → already full-width */

  /* tighten meter card + readout so nothing crowds the edge */
  .meter { padding: 1.25rem; }
  .meter-delta { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .meter-delta .cap { text-align: left; max-width: none; }

  /* calculator output: keep the big number from clipping */
  .out-big .num { font-size: clamp(2.1rem, 11vw, 3rem); }
  .out-row { gap: 1rem; }

  /* section rhythm a touch tighter on phone */
  .cells, .steps, .results-grid, .ind-grid, .faq-list { margin-top: 1.75rem; }

  /* footer CTA button shouldn't stretch oddly */
  .footer-col .btn { width: 100%; }
}