/* Home page (/) · boards HmHero, StatsBlack, LsStrip, OneCall1–3, HmStatement, OpA, KeepNumberFramed, WhatChangesBlack (+ shared FAQ) */

.pg-home{--hm-pad:clamp(20px,4.445vw,64px)}
.hm-hero,.hm-stats,.hm-steps,.hm-onecall,.hm-statement,.hm-portal,.hm-number,.hm-changes{line-height:1.21;background:#fff}

/* Geist mock-ups use Geist's metrics-neutral line height (as drawn) */
.hm-win-row,.hm-calls,.hm-step-art,.hm-oc-art,.hm-number-screen{line-height:1.149}
.hm-hero svg,.hm-step-art svg,.hm-oc-art svg,.hm-number-screen svg,.hm-changes svg{flex:none;max-width:none}

/* shared section heads */
.hm-head{display:flex;flex-direction:column;gap:12px;text-align:center}
.hm-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#657185}
.hm-h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,2vw + 23.2px,52px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.hm-btns{display:flex;flex-wrap:wrap;gap:12px}

/* portal mock-up bits (Calls list, tags) */
.pg-home .t-amber{color:#8a5a06;background:#fdf1dc}
.pg-home .t-grey{color:#4e5a6b;background:#eef1f5}
.pg-home .t-blue{color:#1d5d9f;background:#e4effb}
.hm-calls{box-sizing:border-box;border-radius:18px;padding:16px 14px 12px;font-family:var(--ui);color:#151b26;text-align:left}
.hm-calls-top{display:flex;align-items:center;justify-content:space-between;padding:0 6px 10px}
.hm-calls-top b{font-weight:600;font-size:17px}
.hm-calls-tabs{display:flex;gap:18px;padding:0 6px;font-size:12.5px;border-bottom:1px solid #edf1f5}
.hm-calls-tabs>span{padding-bottom:9px;color:#5d6878}
.hm-calls-tabs>span.on{box-shadow:inset 0 -2px 0 #141922;font-weight:500;color:#151b26}
.hm-calls-rows{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.hm-call{display:grid;grid-template-columns:30px 150px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;font-size:13px}
.hm-call.on{background:#f1f6fd}
.hm-call .who{display:flex;flex-direction:column;gap:1px}
.hm-call .who b{font-weight:500}
.hm-call .who span{font-size:11.5px;color:#6b7585}
.hm-call .what{color:#3d4a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 1. Hero (HmHero) ---------- */
.hm-hero{--ww:min(1100px,100vw - 2*var(--gutter));--hm-gap:clamp(72px,11.75vw,169px);position:relative;overflow:hidden;padding-bottom:max(56px,var(--ww) * .1928)}
.hm-hero-top{position:relative;padding:136px 24px 0}
.hm-hero-wash{position:absolute;left:0;right:0;top:0;bottom:calc(-1 * (var(--hm-gap) + var(--ww) * .21819))}
.hm-hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hm-h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,2.1vw + 31.8px,62px);line-height:1.08;letter-spacing:-.035em;color:#141922}
.hm-h1 .rotate{white-space:nowrap}
.hm-h1-a{text-wrap:balance}
.hm-hero-sub{font-size:clamp(16.5px,1.32vw,19px);color:#3d4a5c}
.hm-hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.hm-hero-btns .btn{height:48px;padding:0 24px;font-size:15px}
.hm-hero-note{font-size:13px;color:#4e5a6b}
.hero-window{position:relative;width:var(--ww);margin:var(--hm-gap) auto 0}
.hero-window>[data-fit]{overflow:visible}
.hm-win-persp{perspective:1600px}
.hm-win{border-radius:28px;padding:10px;transform:rotateX(24deg) scale(.92);transform-origin:50% 0;box-shadow:0 60px 90px -50px rgba(15,20,30,.7)}
.hm-win-screen{border-radius:20px;padding:44px 40px;display:grid;place-items:center}
.hm-win-row{display:flex;gap:18px;align-items:flex-start;font-family:var(--ui)}
.hm-detail{width:300px;margin-top:40px;box-sizing:border-box;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;font-family:var(--ui);color:#151b26;text-align:left}
.hm-detail-who{display:flex;align-items:center;gap:10px}
.hm-detail-who>span:last-child{display:flex;flex-direction:column;gap:2px}
.hm-detail-who b{font-weight:500;font-size:14px}
.hm-detail-who>span:last-child>span{font-size:11.5px;color:#6b7585}
.hm-detail-f{display:flex;flex-direction:column;gap:3px}
.hm-detail-sep{padding-top:10px;border-top:1px solid #edf1f5}
.hm-detail-f .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b7585}
.hm-detail-f .v{font-size:13px}
.hm-detail-sep .v{line-height:1.45}
.hm-detail-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid #edf1f5}
.hm-mini-btn{background:#141922;color:#fff;font-size:12px;font-weight:500;padding:8px 12px;border-radius:10px}

/* ---------- 2. Callers expect a fast answer (StatsBlack) ---------- */
.hm-stats{padding:96px var(--hm-pad) 103px}
.hm-stats .hm-head{margin-bottom:56px}
.hm-stats-grid{width:min(900px,100%);height:346px;margin:0 auto;display:grid;grid-template-columns:458fr 426fr;gap:16px}
.hm-stat-big{border-radius:18px;padding:34px 32px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:0 30px 50px -30px rgba(20,30,50,.5)}
.hm-stat-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hm-stat-body{display:flex;flex-direction:column;gap:6px}
.hm-stat-num{display:block;font-family:var(--ui);font-weight:400;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.hm-stat-big .hm-stat-num{font-size:84px}
.hm-stat-ttl{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.02em;margin-top:10px}
.hm-stat-txt{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.8)}
.hm-stat-col{display:flex;flex-direction:column;gap:16px}
.hm-stat-row{flex:1;display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px;padding:0 28px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #d5dbe4,0 20px 40px -32px rgba(20,30,50,.35)}
.hm-stat-row .hm-stat-num{font-size:64px}
.hm-stat-rt{display:flex;flex-direction:column;gap:6px}
.hm-stat-rt h3{font-weight:500;font-size:17px}
.hm-stat-rt p{font-size:16px;line-height:1.6;color:#5d6878}
.hm-stats-src{margin-top:24px;text-align:center;font-size:12px;color:#6b7585}
.hm-stats-src a{text-decoration:underline}
.hm-stats-src a:hover{color:#141922}

/* ---------- 3. Live in three steps (LsStrip) ---------- */
.hm-steps.ch{background:linear-gradient(160deg,#262d38 0%,#1b2029 60%,#171b22 100%)}
.hm-steps{padding:96px var(--gutter) 99px}
.hm-steps-in{max-width:1200px;margin:0 auto}
.hm-steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;color:#fff}
.hm-steps-ttl{display:flex;flex-direction:column;gap:12px}
.hm-steps .hm-eyebrow{color:#8d97a6}
.hm-steps .hm-h2{color:#fff}
.hm-steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-step{position:relative;min-height:460px;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:300px 24px 26px;color:#141922}
.hm-step-art{position:absolute;left:0;right:0;top:0;height:300px;font-family:var(--ui);color:#151b26}
.hm-step-art-in{position:relative;width:388px;height:300px}
.hm-step-txt{position:relative;display:flex;flex-direction:column;gap:6px}
.hm-step .ttl{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.hm-step .ib{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(22,40,70,.06);flex:none}
.hm-step .lead{font-size:14.5px;line-height:1.5;color:#4e5a6b}
.hm-step .pay{font-size:14.5px;line-height:1.5;color:#1a2230}
.hm-step .rw{display:flex;align-items:center;justify-content:space-between;padding:10px 4px;font-size:13.5px;border-top:1px solid #edf0f5}

/* ---------- 4. One call, start to finish (OneCall1–3, stacked pin) ---------- */
.hm-onecall{padding-top:96px}
.hm-onecall .hm-head{margin-bottom:56px}
/* while pinned the stage centres each card in the viewport; pull it up so the heading sits 56px above the first card */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.hm-onecall .hm-head{position:relative;z-index:1;margin-bottom:calc(56px - 100px - (100vh - 116px - min(564px,100vh - 116px)) / 2)}}
/* pinned: only the first card casts the board shadow, so shadows don't pile up */
.hm-onecall .stack.is-pinned .stack-panel.hm-oc+.stack-panel.hm-oc{box-shadow:none}
.hm-onecall .stack-stage .stack-panel.hm-oc{width:min(1200px,100% - 2*var(--gutter));height:min(564px,100vh - 116px);margin-inline:auto}
.hm-oc{border-radius:28px;padding:9px;display:grid;grid-template-columns:1.02fr 1fr;box-shadow:0 34px 64px -38px rgba(15,20,30,.65)}
.hm-oc.ch{background:linear-gradient(160deg,#262d38 0%,#1b2029 60%,#171b22 100%)}
.hm-oc-r{grid-template-columns:1fr 1.02fr}
.hm-oc-art{position:relative;border-radius:20px;overflow:hidden;min-height:0}
.hm-oc-txt{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:0 clamp(32px,5.278vw,76px);color:#fff}
.hm-oc-eb{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d97a6}
.hm-oc-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.056vw,44px);line-height:1.08;letter-spacing:-.035em;color:#fff}
.hm-oc-p{max-width:360px;font-size:16.5px;line-height:1.65;color:#aab3c0}
.hm-oc-dash{display:flex;gap:6px;margin-top:6px}
.hm-oc-dash i{display:block;width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.25)}
.hm-oc-dash i.on{background:#fff}
.hm-oc-cta{margin-top:12px}
.hm-oc1-bubble{position:absolute;left:40px;top:70px;border-radius:18px 18px 18px 6px;padding:11px 15px;font-size:15px;font-family:var(--ui);color:#151b26;z-index:2}
.hm-oc1-bubble span{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6b7585;margin-bottom:3px}
.hm-oc1-phone{position:absolute;left:50%;top:196px;width:260px;height:520px;margin-left:-130px}
.hm-wave{margin-top:26px;display:flex;align-items:center;gap:4px;height:44px}
.hm-wave i{display:block;width:5px;border-radius:3px;background:#7fa6d6}
.hm-wave i.d{background:#4f86c8}
.hm-oc .hm-oc2-card{position:absolute;left:50%;top:50%;width:350px;margin:-150px 0 0 -175px;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px;font-family:var(--ui);color:#151b26;background:rgba(255,255,255,.7)}
.hm-oc2-row{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:10px;background:#f6f8fc;font-size:14.5px}
.hm-oc2-row .k{color:#5d6878}
.hm-oc2-row .v{display:flex;align-items:center;gap:8px;font-weight:500}
.hm-oc2-row.hl{background:#e3f6ee;box-shadow:inset 0 0 0 1px #9fdcc0}
.hm-oc3-stack{position:absolute;left:50%;top:50%;width:380px;margin:-128px 0 0 -190px;display:flex;flex-direction:column;gap:12px;font-family:var(--ui);color:#151b26}

/* ---------- 5. The first response (HmStatement, pinned light-up) ---------- */
.hm-statement-in{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;padding:72px var(--hm-pad)}
.hm-statement-txt{max-width:min(1014px,70.42vw);font-family:var(--serif);font-size:clamp(28px,2.917vw,42px);line-height:1.32;letter-spacing:-.02em;color:#141922;--lu-off:#a3abb7}
.hm-statement-txt .hm-soft{color:inherit}
/* pull the pinned statement in so the rhythm matches the boards (~170px to the One-call card above and to "In your portal" below) */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.js .hm-statement{margin-top:calc(-52px - max(0px,50vh - 360px));margin-bottom:-80px;background:transparent}}
html:not(.js) .hm-statement .lu-sticky{min-height:560px;display:flex;align-items:center;justify-content:center}

/* ---------- 6. Everything about a call (OpA) ---------- */
.hm-portal{padding:72px var(--hm-pad) 95px}
.hm-portal .hm-head{margin-bottom:40px}
.hm-portal .hm-h2{font-size:clamp(30px,1.714vw + 23.32px,48px)}
.hm-portal-grid{max-width:1312px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:182px 182px 180px;gap:16px}
.hm-portal-frame{grid-row:span 3;border-radius:26px;padding:8px;box-shadow:0 30px 60px -36px rgba(15,20,30,.6)}
.hm-portal-screen{height:100%;border-radius:19px;display:grid;place-items:center}
.hm-portal-screen>[data-fit]{width:calc(100% - 32px)}
.hm-portal-card{border-radius:24px;padding:24px 26px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;color:#fff}
.hm-portal-card h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.hm-portal-card p{font-size:14.5px;line-height:1.5;color:#c9d5e2}

/* ---------- 7. Keep your number (KeepNumberFramed) ---------- */
.hm-number{padding:96px var(--hm-pad) 114px}
.hm-number .hm-head{margin-bottom:56px}
.hm-number .hm-number-h2{font-size:clamp(32px,2.286vw + 23.09px,56px)}
.hm-number-frame{width:1120px;height:400px;margin:0 auto;border-radius:28px;padding:9px;box-shadow:0 34px 64px -38px rgba(15,20,30,.6)}
.hm-number-screen{position:relative;width:1102px;height:100%;border-radius:20px;overflow:hidden;font-family:var(--ui);color:#151b26}
.hm-number-lines{position:absolute;left:0;top:0}
.hm-nb-fwd{position:absolute;left:318px;top:160px;font-size:12px;color:#4e5a6b}
.hm-nb{width:256px;height:62px;box-sizing:border-box;border-radius:15px;padding:0 14px;display:flex;align-items:center;gap:12px}
.hm-nb-line{position:absolute;left:44px;top:160px}
.hm-nb .ic{width:38px;height:38px;border-radius:11px;background:#eef2f8;display:grid;place-items:center;flex:none}
.hm-nb .t,.hm-nb-kyros .t{display:flex;flex-direction:column;gap:2px}
.hm-nb .t b{font-weight:500;font-size:15px}
.hm-nb .t span{font-size:12.5px;color:#5d6878}
.hm-nb-kyros{position:absolute;left:420px;top:156px;width:270px;height:70px;box-sizing:border-box;border-radius:16px;padding:0 16px;display:flex;align-items:center;gap:12px;color:#fff;box-shadow:0 22px 40px -20px rgba(15,20,30,.7)}
.hm-nb-kyros .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.hm-nb-kyros .t{flex:1}
.hm-nb-kyros .t b{font-weight:500;font-size:15.5px}
.hm-nb-kyros .t span{font-size:12px;color:#aab3c0}
.hm-nb-kyros .dot{width:9px;height:9px;border-radius:50%;background:#22a861;box-shadow:0 0 0 4px rgba(34,168,97,.22)}
.hm-nb-outs{position:absolute;left:800px;top:60px;display:flex;flex-direction:column;gap:38px}
.hm-number-fit{overflow:visible}
.hm-number-btns{justify-content:center;margin-top:44px}

/* ---------- 8. What changes with Kyros (WhatChangesBlack) ---------- */
.hm-changes{padding:108px var(--hm-pad) 190px}
.hm-changes .hm-head{margin-bottom:56px}
.hm-changes-box{width:min(900px,100%);min-height:340px;margin:0 auto;border-radius:20px;padding:12px;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 0 0 1px #c9d0da,0 30px 50px -36px rgba(20,30,50,.35);overflow:hidden}
.hm-changes-col{padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.hm-changes-col h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.08;letter-spacing:-.035em;color:#141922;margin-bottom:20px}
.hm-changes-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.hm-changes-col li{display:flex;align-items:center;gap:14px;font-size:17px;color:#4e5a6b}
.hm-changes-col .x{width:18px;flex:none;color:#6b7585;font-size:13px}
.hm-changes-col svg{flex:none}
.hm-changes-with{border-radius:14px;color:#fff}
.hm-changes-with h3{color:#fff}
.hm-changes-with li{color:#e8edf3}

/* ---------- between desktop and tablet ---------- */
@media (max-width:1180px){
  .hm-oc-p{font-size:15.5px}
  .hm-oc .hm-oc2-card{width:320px;margin:-150px 0 0 -160px}
  .hm-oc3-stack{width:340px;margin:-128px 0 0 -170px}
}

@media (max-width:1024px){.hm-hero-top{padding-top:146px}}

/* ---------- tablet / phone ---------- */
@media (max-width:900px){
  .hm-eyebrow,.hm-oc-eb{font-size:12px}
  .hm-step .lead,.hm-step .pay,.hm-portal-card p{font-size:15px}
  .hm-stats{padding:var(--sec-y) 24px}
  .hm-stats .hm-head{margin-bottom:40px}
  .hm-stats-grid{height:auto;grid-template-columns:1fr;width:min(560px,100%)}
  .hm-stat-big{min-height:300px;gap:40px}
  .hm-stat-row{padding:24px;grid-template-columns:auto 1fr;gap:20px}
  .hm-stat-row .hm-stat-num{font-size:52px}

  .hm-steps{padding:var(--sec-y) 24px}
  .hm-steps-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .hm-steps-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .hm-steps-head{max-width:560px;margin-inline:auto}

  .hm-onecall{padding:var(--sec-y) 24px}
  .hm-onecall .hm-head{margin-bottom:40px}
  .hm-onecall .stack-stage .stack-panel.hm-oc{width:min(560px,100%);height:auto;grid-template-columns:1fr}
  .hm-oc-art{height:400px;order:1}
  .hm-oc-txt{order:2;padding:32px 20px 30px;gap:16px}
  .hm-oc-p{font-size:16px}
  .hm-oc1-bubble{left:20px;top:28px}
  .hm-oc1-phone{top:120px}
  .hm-oc .hm-oc2-card,.hm-oc3-stack{left:0;right:0;width:min(350px,100% - 24px);margin:0 auto;transform:translateY(-50%)}

  .js .hm-statement.lu-sec{--lu-h:440px!important}
  .hm-statement-in{padding:24px}
  .hm-statement-txt{max-width:none}

  .hm-portal{padding:var(--sec-y) 24px}
  .hm-portal-grid{grid-template-columns:1fr;grid-template-rows:none;max-width:560px}
  .hm-portal-frame{grid-row:auto}
  .hm-portal-screen{padding:48px 0}
  .hm-portal-screen>[data-fit]{width:calc(100% - 24px)}
  .hm-portal-card{min-height:170px}

  .hm-number{padding:var(--sec-y) 24px}
  .hm-number .hm-head{margin-bottom:40px}

  .hm-changes{padding:var(--sec-y) 24px}
  .hm-changes .hm-head{margin-bottom:40px}
  .hm-changes-box{min-height:0;grid-template-columns:1fr;width:min(560px,100%);gap:8px}
  .hm-changes-col{padding:24px 20px}
}

/* Keep your number: the drawn diagram scales down (data-fit) until 700px, then reflows as a vertical flow on phones */
@media (max-width:700px){
  .hm-hero-top{padding:128px 20px 0}
  .hm-hero-sub{max-width:320px}
  .hm-hero-btns .btn{padding:0 22px}

  .hm-number-fit{height:auto!important}
  .hm-number-fit>.hm-number-frame{width:auto!important;height:auto;transform:none!important}
  .hm-number-screen{width:auto;height:auto;padding:28px 18px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .hm-number-lines{display:none}
  .hm-nb-line,.hm-nb-kyros,.hm-nb-outs,.hm-nb-fwd{position:relative;left:auto;top:auto}
  .hm-nb,.hm-nb-kyros{width:100%;max-width:300px}
  .hm-nb-line{order:1}
  .hm-nb-fwd{order:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0}
  .hm-nb-fwd::before,.hm-nb-fwd::after{content:"";width:1.5px;height:14px;background:#7d93ad}
  .hm-nb-kyros{order:3}
  .hm-nb-outs{order:4;width:100%;max-width:300px;gap:10px;margin-top:22px;position:relative}
  .hm-nb-outs::before{content:"";position:absolute;left:50%;top:-24px;width:1.5px;height:24px;background:#7d93ad}
  .hm-nb-outs .hm-nb{width:100%}
}

/* phones: portal list shown at a readable 0.6 scale, slightly narrower */
@media (max-width:600px){
  .hm-portal-screen>[data-fit]{width:100%!important;height:auto!important;display:flex;justify-content:center}
  .hm-portal-screen>[data-fit]>div{transform:none!important;zoom:.6;width:520px!important;margin:0!important}
  .hm-portal-screen .hm-calls{width:520px!important}
}
@media (max-width:700px){.hm-h1-a{display:block}.hm-h1 br{display:none}}
@media (max-width:480px){.hm-stat-row{grid-template-columns:1fr;gap:12px;padding:24px}}
@media (max-width:900px) and (min-width:601px){.js .hm-statement{margin-block:-40px}}