/* KissMyMac - Private Cloud Storage page
   Source of truth: build-staged/kmm-private-cloud.css
   Action-bar CSS deliberately NOT here: served site-wide from kmm-actionbar.css */
/* ============================================================
   KissMyMac — Private Cloud Storage sales page (prototype)
   Design system: kissmymac-certified-repair-apple-clean
   ============================================================ */
:root{
  --ground:#F5F5F7; --surface:#FFFFFF; --surface-2:#EEEEF1;
  --ink:#1D1D1F; --muted:#6E6E73; --line:#E4E4E8;
  --accent:#2F6FE0; --accent-2:#1B4FB0; --acc-ink:#2456B8;
  --call:#E94B45; --wa:#12703A; --wa-h:#0E5C30; --teal:#0F7A6E; --teal-glow:#4FD3C0;
  --card-shadow:0 14px 34px -16px rgba(24,36,68,.20);
  --hero-bg:#0C0D11; --hero-bg-2:#111319; --hero-surface:#15171E;
  --hero-ink:#F5F3ED; --hero-muted:#9EA2AC; --hero-line:rgba(255,255,255,.10);
  --scan:#4FA3FF; --scan-soft:rgba(79,163,255,.16);
  --r:12px; --r-sm:9px; --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
body{margin:0; background:var(--ground)}
.kmm-pc{font-family:-apple-system,system-ui,'SF Pro Display','Segoe UI',sans-serif; color:var(--ink); background:var(--ground); -webkit-text-size-adjust:100%}
.kmm-pc *{box-sizing:border-box}
.kmm-pc h1,.kmm-pc h2,.kmm-pc h3{margin:0; letter-spacing:-.022em; line-height:1.08; text-wrap:balance; font-weight:800}
.kmm-pc h2{font-size:clamp(1.7rem,3.6vw,2.55rem); letter-spacing:-.028em}
.kmm-pc p{margin:0}
.kmm-pc a{color:inherit; text-decoration:none}
.kmm-pc :focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}
.kmm-pc .mono{font-family:"SF Mono",ui-monospace,Menlo,monospace}

/* ---- theme-proofing ---------------------------------------------------
   Astra styles h1-h6 (and body text) directly on the element. A direct rule
   always beats an inherited value, so inside the theme every heading took
   Astra's dark heading colour and font - invisible on the dark bands.
   This design deliberately inherits colour and family from each band, so
   force that back. Specificity is (0,1,1): it beats Astra's (0,0,1) and
   loses to every real rule below, which all carry two or more classes.
   ---------------------------------------------------------------------- */
.kmm-pc :is(h1,h2,h3,h4,h5,h6){color:inherit; font-family:inherit}
.kmm-pc :is(p,li,figcaption,blockquote,dt,dd,label,summary,small,th,td){color:inherit; font-family:inherit}
.kmm-pc .tnum{font-variant-numeric:tabular-nums}
.kmm-pc .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.kmm-pc .band{padding-block:clamp(60px,8vw,104px)}
.kmm-pc .band-h{max-width:640px; margin-bottom:clamp(30px,4.5vw,52px)}
.kmm-pc .kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:14px}
.kmm-pc .band-h p{color:var(--muted); font-size:16.5px; line-height:1.6; margin-top:14px; max-width:58ch}
.kmm-pc .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; font-weight:600; font-size:15px; border-radius:var(--r); padding:13px 22px; min-height:44px; border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .2s, background .2s; white-space:nowrap}
.kmm-pc .btn:active{transform:translateY(1px) scale(.985)}
.kmm-pc .btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(47,111,224,.7)}
.kmm-pc .btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(47,111,224,.8)}
.kmm-pc .btn-ghost{background:rgba(255,255,255,.06); color:var(--hero-ink); border-color:var(--hero-line)}
.kmm-pc .btn-ghost:hover{background:rgba(255,255,255,.12)}
.kmm-pc .btn-wa{background:var(--wa); color:#fff}
.kmm-pc .btn-wa:hover{background:var(--wa-h); transform:translateY(-1px)}
.kmm-pc .btn-call{background:var(--call); color:#fff; box-shadow:0 8px 20px -8px rgba(233,75,69,.6)}
.kmm-pc .btn-call:hover{transform:translateY(-1px)}
.kmm-pc svg{display:block}

/* ---------- reveal ---------- */
.kmm-pc .rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.kmm-pc .rv.in{opacity:1; transform:none}

/* ---------- hero ---------- */
.kmm-pc .hero{position:relative; overflow:hidden; color:var(--hero-ink); padding:clamp(56px,7vw,92px) 0 clamp(120px,12vw,150px);
  background:radial-gradient(120% 80% at 78% -10%, rgba(47,111,224,.20), transparent 60%),
             radial-gradient(90% 70% at 8% 120%, rgba(19,125,113,.14), transparent 55%),
             linear-gradient(180deg, var(--hero-bg), var(--hero-bg-2))}
.kmm-pc .hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 30%, #000, transparent 78%);
  mask-image:radial-gradient(120% 90% at 60% 30%, #000, transparent 78%)}
.kmm-pc .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,56px); align-items:center}
.kmm-pc .crumbs{display:flex; gap:8px; font-size:13px; color:var(--hero-muted); margin-bottom:22px; flex-wrap:wrap}
.kmm-pc .crumbs a{padding:5px 0}
.kmm-pc .crumbs a:hover{color:var(--scan)}
.kmm-pc .crumbs .sep{opacity:.5}
.kmm-pc .pill{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-glow); background:rgba(22,163,148,.14); border:1px solid rgba(79,211,192,.25); border-radius:999px; padding:7px 14px; margin-bottom:20px}
.kmm-pc .pill .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-glow); box-shadow:0 0 0 4px rgba(79,211,192,.16)}
.kmm-pc .hero h1{font-size:clamp(2rem,4.8vw,3.25rem)}
.kmm-pc .hero h1 em{font-style:normal; background:linear-gradient(120deg,#fff,#79aef8); -webkit-background-clip:text; background-clip:text; color:transparent}
.kmm-pc .hook-sub{margin-top:18px; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.45; letter-spacing:-.012em; color:var(--hero-muted); max-width:44ch}
.kmm-pc .hook-sub strong{color:var(--hero-ink); font-weight:700}
.kmm-pc .tldr{margin-top:22px; max-width:54ch; border-left:2px solid rgba(79,163,255,.55); padding-left:18px}
.kmm-pc .tldr .tag{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--scan); margin-bottom:8px}
.kmm-pc .tldr p{color:var(--hero-muted); font-size:15.5px; line-height:1.62}
.kmm-pc .tldr strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .hero-btns{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}

/* hero device */
.kmm-pc .device{position:relative}
.kmm-pc .device svg{width:100%; height:auto}
.kmm-pc .d-body{fill:var(--hero-surface); stroke:var(--hero-line)}
.kmm-pc .d-bay{fill:#101218; stroke:rgba(255,255,255,.14)}
.kmm-pc .d-slot{stroke:rgba(255,255,255,.22); stroke-width:2; stroke-linecap:round}
.kmm-pc .d-led{fill:#37D67A}
.kmm-pc .d-led.b{fill:var(--scan)}
.kmm-pc .d-src{fill:none; stroke:rgba(255,255,255,.38); stroke-width:2}
.kmm-pc .d-lbl{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10.5px; fill:var(--hero-muted); letter-spacing:.08em}
.kmm-pc .d-path{fill:none; stroke:rgba(79,163,255,.28); stroke-width:1.5; stroke-dasharray:3 6; stroke-linecap:round}
.kmm-pc .d-dot{fill:var(--scan)}
.kmm-pc .d-vent{fill:rgba(255,255,255,.14)}
.kmm-pc .scanbar{position:absolute; top:6%; bottom:10%; width:54px; left:56%; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(79,163,255,.14), transparent);
  animation:kmm-scan 4.6s var(--ease) infinite}
@keyframes kmm-scan{ 0%{transform:translateX(-70px); opacity:0} 12%{opacity:1} 55%{transform:translateX(150px); opacity:1} 70%{opacity:0} 100%{transform:translateX(150px); opacity:0} }
.kmm-pc .d-led.blink{animation:kmm-blink 1.9s steps(2,start) infinite}
@keyframes kmm-blink{50%{opacity:.25}}
.kmm-pc .readout{margin-top:16px; display:flex; justify-content:center; gap:10px; align-items:baseline; font-size:12.5px; color:var(--hero-muted); letter-spacing:.06em}
.kmm-pc .readout b{color:var(--hero-ink); font-weight:600; font-size:14px}

/* ---------- stat card over the seam ---------- */
.kmm-pc .seam{position:relative; z-index:3; margin-top:calc(clamp(120px,12vw,150px) * -.62)}
.kmm-pc .seam-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--card-shadow); display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden}
.kmm-pc .seam-card > div{padding:clamp(20px,3vw,32px) clamp(18px,2.6vw,30px); border-left:1px solid var(--line)}
.kmm-pc .seam-card > div:first-child{border-left:0}
.kmm-pc .seam-card .n{font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; letter-spacing:-.025em; background:linear-gradient(120deg,var(--ink),#4a76c9); -webkit-background-clip:text; background-clip:text; color:transparent}
.kmm-pc .seam-card p{color:var(--muted); font-size:14px; line-height:1.5; margin-top:7px}

/* ---------- problem band ---------- */
.kmm-pc .prob-grid{display:grid; gap:clamp(28px,4.2vw,48px); margin-bottom:clamp(26px,4vw,44px)}
.kmm-pc .chain{border-top:1px solid var(--line)}
.kmm-pc .chain .row{display:grid; grid-template-columns:minmax(0,.8fr) 34px minmax(0,1.2fr); gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line)}
.kmm-pc .chain .cz{font-weight:700; font-size:15.5px; letter-spacing:-.012em}
.kmm-pc .chain .arr{width:22px; height:22px; stroke:var(--acc-ink); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:translateX(-8px); transition:opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s}
.kmm-pc .chain .row.in .arr{opacity:1; transform:none}
.kmm-pc .chain .fx{color:var(--muted); font-size:14.5px; line-height:1.55; opacity:0; transition:opacity .6s var(--ease) .4s}
.kmm-pc .chain .row.in .fx{opacity:1}
/* ---------- exposure check (risk audit) ---------- */
.kmm-pc .expo{--risk:#7E93B4; --risk-glow:rgba(47,111,224,.14);
  position:relative; overflow:hidden; border-radius:18px; color:var(--hero-ink);
  background:linear-gradient(160deg,var(--hero-bg),var(--hero-bg-2));
  border:1px solid rgba(255,255,255,.07); box-shadow:var(--card-shadow);
  padding:clamp(24px,3.6vw,46px)}
.kmm-pc .expo[data-level="1"]{--risk:#F2B33D; --risk-glow:rgba(242,179,61,.16)}
.kmm-pc .expo[data-level="2"]{--risk:#FF9040; --risk-glow:rgba(255,144,64,.20)}
.kmm-pc .expo[data-level="3"]{--risk:#FF6B5E; --risk-glow:rgba(255,79,66,.26)}
.kmm-pc .expo[data-level="4"]{--risk:#FF4A3D; --risk-glow:rgba(255,58,45,.36)}
.kmm-pc .expo::before{content:""; position:absolute; inset:-45% -12% auto -12%; height:90%; pointer-events:none;
  background:radial-gradient(58% 70% at 72% 0%, var(--risk-glow), transparent 72%); transition:background .6s}
.kmm-pc .expo > *{position:relative}
.kmm-pc .expo-head{max-width:64ch; margin-bottom:clamp(20px,2.8vw,32px)}
.kmm-pc .expo-kicker{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--risk); margin-bottom:13px; transition:color .4s}
.kmm-pc .expo-kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--risk); animation:riskPulse 2.2s infinite}
.kmm-pc .expo h3{font-size:clamp(1.5rem,3.1vw,2.25rem); letter-spacing:-.028em; margin-bottom:11px}
.kmm-pc .expo .sub{color:var(--hero-muted); font-size:15.5px; line-height:1.55}
.kmm-pc .expo-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,3vw,38px); align-items:start}
.kmm-pc .expo label{display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; align-items:start;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); border-radius:12px;
  padding:14px 16px; margin-bottom:9px; font-size:15.5px; line-height:1.45; cursor:pointer;
  transition:border-color .25s, background .25s}
.kmm-pc .expo label:hover{border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06)}
.kmm-pc .expo label:has(input:checked){border-color:color-mix(in srgb,var(--risk) 62%,transparent); background:color-mix(in srgb,var(--risk) 12%,rgba(255,255,255,.02))}
.kmm-pc .expo input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--risk); cursor:pointer}
.kmm-pc .expo .lb{color:var(--hero-ink)}
.kmm-pc .expo label:has(input:checked) .lb{color:#fff; font-weight:600}
.kmm-pc .expo .lc{display:block; font-size:13.5px; line-height:1.45; font-weight:600; color:color-mix(in srgb,var(--risk) 72%,#fff);
  opacity:0; max-height:0; margin-top:0; overflow:hidden; transition:opacity .3s, max-height .35s var(--ease), margin-top .35s var(--ease)}
.kmm-pc .expo label:has(input:checked) .lc{opacity:1; max-height:170px; margin-top:7px}
.kmm-pc .expo-score{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:clamp(20px,2.6vw,28px); position:sticky; top:24px}
.kmm-pc .expo-dial{position:relative; width:min(300px,100%); margin:2px auto 0}
.kmm-pc .gauge{width:100%; height:auto; overflow:visible}
.kmm-pc .g-track{fill:none; stroke:rgba(255,255,255,.10); stroke-width:13; stroke-linecap:round}
.kmm-pc .g-val{fill:none; stroke:var(--risk); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:270.2; stroke-dashoffset:270.2;
  transition:stroke-dashoffset .75s var(--ease), stroke .4s;
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--risk) 60%,transparent))}
.kmm-pc .expo-num{position:absolute; left:0; right:0; bottom:0; text-align:center; line-height:1}
.kmm-pc .expo-num b{display:block; font-size:clamp(3.4rem,7.4vw,4.8rem); font-weight:800; letter-spacing:-.045em; color:var(--risk); transition:color .4s}
.kmm-pc .expo-num i{font-style:normal; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hero-muted)}
.kmm-pc .expo-band{margin-top:16px; text-align:center; font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--risk); transition:color .4s}
.kmm-pc .expo[data-level="4"] .expo-band{animation:riskFlash 1.5s ease-in-out infinite}
.kmm-pc .expo-count{text-align:center; font-size:12.5px; color:var(--hero-muted); margin-top:7px}
.kmm-pc .expo-meter{display:flex; gap:5px; margin:18px 0 15px}
.kmm-pc .expo-meter span{flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,.09); transition:background .3s, box-shadow .3s}
.kmm-pc .expo-meter span.on{background:var(--risk); box-shadow:0 0 12px -2px var(--risk)}
.kmm-pc .expo-out{font-size:15.5px; font-weight:500; line-height:1.55; min-height:96px; color:var(--hero-muted)}
.kmm-pc .expo-out b{display:block; color:var(--risk); font-weight:700; margin-bottom:5px; font-size:16.5px; letter-spacing:-.01em}
.kmm-pc .expo-cta{display:none; width:100%; margin-top:4px}
.kmm-pc .expo[data-level="3"] .expo-cta,.kmm-pc .expo[data-level="4"] .expo-cta{display:inline-flex}
@keyframes riskPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--risk) 65%,transparent)}70%{box-shadow:0 0 0 9px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@keyframes riskFlash{0%,100%{opacity:1}50%{opacity:.42}}
.kmm-pc .ctrl-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.kmm-pc .ctrl h3{margin-bottom:14px}
.kmm-pc .ctrl .crow{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; padding:11px 0; border-top:1px solid var(--hero-line)}
.kmm-pc .ctrl .crow svg{width:18px; height:18px; margin-top:1px; stroke:var(--scan); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .ctrl .crow p{color:var(--hero-muted); font-size:14px; line-height:1.5; max-width:none}
.kmm-pc .ctrl .crow p strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .ctrl .ctrl-foot{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; margin-top:4px; padding-top:13px; border-top:1px solid var(--hero-line)}
.kmm-pc .ctrl .ctrl-foot svg{width:16px; height:16px; margin-top:2px; stroke:var(--teal-glow); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .ctrl .ctrl-foot p{color:var(--teal-glow); font-size:13.5px; line-height:1.5; font-weight:600; max-width:none}

/* ---------- calculator ---------- */
.kmm-pc .calc-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,54px); align-items:start}
.kmm-pc .calc-copy p{color:var(--muted); font-size:16px; line-height:1.65; margin-top:14px; max-width:56ch}
.kmm-pc .calc-copy p strong{color:var(--ink); font-weight:600}
.kmm-pc .calc{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--card-shadow); padding:clamp(22px,3vw,32px)}
.kmm-pc .calc label{display:block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.kmm-pc .calc .size{font-size:clamp(1.6rem,3vw,2rem); font-weight:800; letter-spacing:-.02em; margin-bottom:10px}
.kmm-pc .calc input[type=range]{width:100%; accent-color:var(--accent); height:34px; margin:0 0 6px; cursor:pointer}
.kmm-pc .calc .ticks{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:20px}
.kmm-pc .calc-out{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.kmm-pc .calc-out > div{background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:14px}
.kmm-pc .calc-out .v{font-size:clamp(1.05rem,1.9vw,1.35rem); font-weight:800; letter-spacing:-.02em}
.kmm-pc .calc-out .l{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.35}
.kmm-pc .calc-out .hot .v{color:var(--acc-ink)}
.kmm-pc .bars{display:flex; align-items:flex-end; gap:5px; height:120px; margin-bottom:8px}
.kmm-pc .bars .bar{flex:1; min-width:0; background:linear-gradient(180deg,#6f9ceb,var(--accent)); border-radius:4px 4px 2px 2px; transition:height .55s var(--ease)}
.kmm-pc .bars-x{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:14px}
.kmm-pc .calc-note{font-size:12.5px; color:var(--muted); line-height:1.55; border-top:1px solid var(--line); padding-top:14px}
.kmm-pc .calc-note b{color:var(--teal); font-weight:700}

/* ---------- the AI squeeze (dark) ---------- */
.kmm-pc .squeeze{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4.4vw,60px); align-items:start}
.kmm-pc .squeeze-copy p{color:var(--hero-muted); font-size:16px; line-height:1.65; margin-top:14px; max-width:52ch}
.kmm-pc .squeeze-copy p strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .spark{margin-top:clamp(22px,3vw,32px); width:100%; height:70px; overflow:visible}
.kmm-pc .spark path{fill:none; stroke:var(--scan); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s var(--ease) .15s}
.kmm-pc .spark .base{stroke:var(--hero-line); stroke-width:1; stroke-dasharray:none; stroke-dashoffset:0}
.kmm-pc .spark-x{display:flex; justify-content:space-between; font-size:11px; color:var(--hero-muted); margin-top:7px}

.kmm-pc .reprice{background:var(--hero-surface); border:1px solid var(--hero-line); border-radius:16px;
  padding:clamp(20px,2.8vw,30px)}
.kmm-pc .reprice-h{font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--scan); margin-bottom:6px}
.kmm-pc .reprice-sub{font-size:13px; color:var(--hero-muted); line-height:1.5; margin-bottom:18px}
.kmm-pc .rp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--hero-line)}
.kmm-pc .rp:first-of-type{border-top:0; padding-top:4px}
.kmm-pc .rp-k{font-size:14px; line-height:1.45; color:var(--hero-ink)}
.kmm-pc .rp-k small{display:block; font-size:11.5px; color:var(--hero-muted); margin-top:4px; letter-spacing:.01em}
.kmm-pc .rp-v{font-size:clamp(1.35rem,2.6vw,1.95rem); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--hero-ink); white-space:nowrap}
.kmm-pc .rp-v i{font-style:normal; font-size:.62em; font-weight:700; color:var(--scan); margin-left:2px}
.kmm-pc .rp-track{grid-column:1 / -1; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; margin-top:2px}
.kmm-pc .rp-track b{display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,rgba(79,163,255,.45),var(--scan)); transition:width 1.1s var(--ease)}
.kmm-pc .rv.in .rp-track b{width:var(--w,50%)}
.kmm-pc .squeeze-foot{margin-top:clamp(22px,3vw,30px); border-top:1px solid var(--hero-line); padding-top:16px;
  display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start}
.kmm-pc .squeeze-foot svg{width:17px; height:17px; margin-top:2px; stroke:var(--teal-glow); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .squeeze-foot p{font-size:14px; line-height:1.55; color:var(--hero-ink)}
.kmm-pc .squeeze-foot p b{color:var(--teal-glow); font-weight:650}
.kmm-pc .srcs{margin-top:14px; font-size:11.5px; line-height:1.6; color:var(--hero-muted)}
.kmm-pc .srcs a{color:var(--hero-muted); text-decoration:underline; text-underline-offset:2px}
.kmm-pc .srcs a:hover{color:var(--hero-ink)}

/* ---------- questions with no answer ---------- */
.kmm-pc .unaud{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4.4vw,58px); align-items:start}
.kmm-pc .unaud-copy p{color:var(--muted); font-size:16px; line-height:1.65; margin-top:14px; max-width:52ch}
.kmm-pc .unaud-copy p strong{color:var(--ink); font-weight:600}
.kmm-pc .qlist{border-top:1px solid var(--line)}
.kmm-pc .q{padding:16px 2px; border-bottom:1px solid var(--line)}
.kmm-pc .q-q{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start;
  font-size:15.5px; line-height:1.5; font-weight:650; letter-spacing:-.01em}
.kmm-pc .q-q svg{width:17px; height:17px; margin-top:3px; stroke:var(--acc-ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .q-a{display:flex; align-items:center; gap:9px; margin:9px 0 0 34px; font-size:13.5px; font-weight:700;
  letter-spacing:.02em; color:var(--muted); opacity:0; transform:translateY(4px);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.kmm-pc .rv.in .q-a{opacity:1; transform:none}
.kmm-pc .q-a::before{content:""; width:16px; height:1.5px; background:currentColor; flex:none; border-radius:1px}
.kmm-pc .unaud-foot{margin-top:clamp(22px,3vw,30px); background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:clamp(18px,2.4vw,24px); display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px}
.kmm-pc .unaud-foot svg{width:17px; height:17px; margin-top:2px; stroke:var(--teal); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .unaud-foot p{font-size:14.5px; line-height:1.55; color:var(--ink)}
.kmm-pc .unaud-foot p b{color:var(--teal); font-weight:700}

/* ---------- conversion: contextual asks ---------- */
.kmm-pc .calc-cta{margin-top:16px; display:grid; gap:9px}
.kmm-pc .calc-cta .btn{width:100%}
.kmm-pc .calc-cta small{font-size:12px; color:var(--muted); text-align:center; line-height:1.5}

/* slim mid-page ask: a low-friction offer, not a wall */
.kmm-pc .ask{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--card-shadow); padding:clamp(20px,3vw,28px) clamp(20px,3.2vw,34px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(16px,3vw,32px); align-items:center}
.kmm-pc .ask h3{font-size:clamp(1.05rem,2vw,1.35rem); margin-bottom:6px}
.kmm-pc .ask p{font-size:14.5px; line-height:1.55; color:var(--muted); max-width:60ch}
.kmm-pc .ask-btns{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:760px){ .kmm-pc .ask{grid-template-columns:1fr} .kmm-pc .ask-btns .btn{flex:1 1 100%} }

/* ---------- conversion: the offer ---------- */
.kmm-pc .packs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px); align-items:stretch}
.kmm-pc .pack{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column;
  box-shadow:var(--card-shadow)}
.kmm-pc .pack--best{border-color:var(--accent); box-shadow:0 18px 44px -20px rgba(47,111,224,.45)}
.kmm-pc .pack-flag{position:absolute; top:-11px; left:clamp(20px,2.6vw,28px);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px}
.kmm-pc .pack-name{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc-ink); margin-bottom:9px}
.kmm-pc .pack-size{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:800; letter-spacing:-.03em; line-height:1}
.kmm-pc .pack-for{font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.5; min-height:42px}
/* price range ladder */
.kmm-pc .prange{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--card-shadow);
  padding:clamp(20px,3vw,28px) clamp(20px,3.4vw,34px); margin-bottom:clamp(24px,3.4vw,38px)}
.kmm-pc .prange{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3.4vw,40px); align-items:center}
.kmm-pc .prange-main{padding-right:clamp(20px,3.4vw,40px); border-right:1px solid var(--line)}
.kmm-pc .prange-lbl{display:block; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.kmm-pc .prange-val{display:block; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1;
  white-space:nowrap; font-variant-numeric:tabular-nums; background:linear-gradient(120deg,var(--ink),#4a76c9);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.kmm-pc .prange-note{font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; max-width:56ch}
.kmm-pc .prange-note b{color:var(--ink); font-weight:600}
@media (max-width:700px){
  .kmm-pc .prange{grid-template-columns:1fr; gap:16px}
  .kmm-pc .prange-main{padding-right:0; padding-bottom:16px; border-right:0; border-bottom:1px solid var(--line)}
}

.kmm-pc .pack-price{margin:16px 0 4px; padding-top:16px; border-top:1px solid var(--line)}
/* PLACEHOLDER STYLING: deliberately loud so a blank price can never ship unnoticed */
.kmm-pc .pack-price .todo{display:inline-block; font-size:clamp(1.25rem,2.4vw,1.6rem); font-weight:800;
  letter-spacing:-.02em; color:#B4400C; border:2px dashed #E8912A; border-radius:8px;
  padding:4px 12px; background:rgba(232,145,42,.09)}
.kmm-pc .pack-price .unit{display:block; font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.45}
.kmm-pc .pack-vs{font-size:13px; line-height:1.5; color:var(--muted); margin-top:12px;
  padding:11px 13px; background:var(--ground); border-radius:10px}
.kmm-pc .pack-vs b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.kmm-pc .pack ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; flex:1}
.kmm-pc .pack li{display:grid; grid-template-columns:17px minmax(0,1fr); gap:10px;
  font-size:14px; line-height:1.5; align-items:start}
.kmm-pc .pack li svg{width:14px; height:14px; margin-top:4px; stroke:var(--teal); fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .pack .btn{margin-top:18px; width:100%}

.kmm-pc .guarantee{margin-top:clamp(20px,3vw,30px); background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:clamp(20px,2.8vw,28px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px)}
.kmm-pc .gitem{display:grid; grid-template-columns:20px minmax(0,1fr); gap:11px; align-items:start}
.kmm-pc .gitem svg{width:17px; height:17px; margin-top:2px; stroke:var(--teal); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .gitem b{display:block; font-size:14px; font-weight:650; margin-bottom:3px}
.kmm-pc .gitem span{font-size:13px; line-height:1.5; color:var(--muted)}
@media (max-width:980px){ .kmm-pc .packs{grid-template-columns:1fr} .kmm-pc .guarantee{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .kmm-pc .guarantee{grid-template-columns:1fr} }

/* ---------- photography ---------- */
.kmm-pc figure{margin:0}
.kmm-pc .shot{position:relative; overflow:hidden; border-radius:16px; background:var(--surface-2);
  box-shadow:var(--card-shadow)}
.kmm-pc .shot img{display:block; width:100%; height:auto}
.kmm-pc .shot figcaption{margin-top:12px; font-size:13px; line-height:1.5; color:var(--muted); max-width:56ch}
.kmm-pc .shot figcaption b{color:var(--ink); font-weight:650}
/* the wide product reveal */
.kmm-pc .shot--wide{margin-bottom:clamp(26px,4vw,44px)}
.kmm-pc .shot--wide figcaption{margin-inline:auto; text-align:center; max-width:62ch}
/* heading paired with a frame, mirrored between the two sections that use it */
.kmm-pc .pair{display:grid; grid-template-columns:1fr .82fr; gap:clamp(26px,4vw,54px);
  align-items:center; margin-bottom:clamp(30px,4.5vw,52px)}
.kmm-pc .pair--flip{grid-template-columns:.82fr 1fr}
.kmm-pc .pair--flip .pair-txt{order:2}
.kmm-pc .pair .band-h{margin-bottom:0; max-width:none}
@media (max-width:860px){
  .kmm-pc .pair,.kmm-pc .pair--flip{grid-template-columns:1fr; gap:24px}
  .kmm-pc .pair--flip .pair-txt{order:0}
}

/* ---------- feature bento ---------- */
.kmm-pc .feat-leads{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.kmm-pc .lead{position:relative; overflow:hidden; border-radius:16px; padding:clamp(24px,3.4vw,38px); color:var(--hero-ink); background:linear-gradient(160deg,var(--hero-bg),var(--hero-bg-2)); border:1px solid rgba(255,255,255,.07); box-shadow:var(--card-shadow)}
.kmm-pc .lead::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 70% at 85% 0%, var(--scan-soft), transparent 60%)}
.kmm-pc .lead .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(79,163,255,.14); border:1px solid rgba(79,163,255,.3); margin-bottom:18px}
.kmm-pc .lead .ic svg{width:21px; height:21px; stroke:var(--scan); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .lead h3{font-size:clamp(1.2rem,2vw,1.45rem); margin-bottom:10px}
.kmm-pc .lead p{color:var(--hero-muted); font-size:15px; line-height:1.62; max-width:46ch}
.kmm-pc .lead p strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .feat-index{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden}
.kmm-pc .feat-row{display:grid; grid-template-columns:42px minmax(150px,.55fr) minmax(0,1.6fr); gap:18px; align-items:center; padding:20px clamp(18px,2.6vw,28px); border-top:1px solid var(--line); transition:background .25s}
.kmm-pc .feat-row:first-child{border-top:0}
.kmm-pc .feat-row:hover{background:var(--ground)}
.kmm-pc .feat-row .ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 9%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.kmm-pc .feat-row .ic svg{width:19px; height:19px; stroke:var(--acc-ink); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .feat-row h3{font-size:16px; letter-spacing:-.012em}
.kmm-pc .feat-row p{color:var(--muted); font-size:14.5px; line-height:1.55}

/* ---------- resilience demo (dark) ---------- */
.kmm-pc .dark{background:linear-gradient(180deg,var(--hero-bg-2),var(--hero-bg)); color:var(--hero-ink); position:relative; overflow:hidden}
.kmm-pc .dark::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 80% at 30% 20%, #000, transparent 75%);
  mask-image:radial-gradient(110% 80% at 30% 20%, #000, transparent 75%)}
.kmm-pc .dark .wrap{position:relative; z-index:1}
.kmm-pc .dark .kicker{color:var(--scan)}
.kmm-pc .dark .band-h p{color:var(--hero-muted)}
.kmm-pc .demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center}
.kmm-pc .rack{background:var(--hero-surface); border:1px solid var(--hero-line); border-radius:16px; padding:clamp(20px,3vw,30px)}
.kmm-pc .rack-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.kmm-pc .rack-h span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--hero-muted); font-weight:700}
.kmm-pc .rack-status{font-size:13.5px; color:var(--teal-glow); font-weight:600}
.kmm-pc .rack-status.warn{color:#F5B84D}
.kmm-pc .bays{display:grid; gap:10px}
.kmm-pc .bay{display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; text-align:left; background:#101218; border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:15px 16px; cursor:pointer; color:var(--hero-ink); font:inherit; transition:border-color .3s, background .3s}
.kmm-pc .bay:hover{border-color:rgba(79,163,255,.45)}
.kmm-pc .bay .led{width:9px; height:9px; border-radius:50%; background:#37D67A; box-shadow:0 0 8px rgba(55,214,122,.6)}
.kmm-pc .bay .t{font-size:14.5px; font-weight:600}
.kmm-pc .bay .s{font-size:12.5px; color:var(--hero-muted); margin-top:2px}
.kmm-pc .bay .tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hero-muted); border:1px solid var(--hero-line); border-radius:999px; padding:4px 10px}
.kmm-pc .bay[aria-pressed="true"]{border-color:rgba(233,75,69,.6); background:rgba(233,75,69,.07)}
.kmm-pc .bay[aria-pressed="true"] .led{background:var(--call); box-shadow:0 0 8px rgba(233,75,69,.7)}
.kmm-pc .bay[aria-pressed="true"] .tag{color:#F0A8A4; border-color:rgba(233,75,69,.5)}
.kmm-pc .rack-msg{margin-top:16px; font-size:14px; line-height:1.6; color:var(--hero-muted); border-top:1px solid var(--hero-line); padding-top:14px; min-height:66px}
.kmm-pc .rack-msg b{color:var(--hero-ink); font-weight:600}
.kmm-pc .rack-msg .ok{color:var(--teal-glow); font-weight:700}
.kmm-pc .demo-copy > p{color:var(--hero-muted); font-size:16px; line-height:1.65; margin-top:14px; max-width:54ch}
.kmm-pc .demo-copy > p strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .shield{display:grid; gap:12px; margin-top:24px}
.kmm-pc .shield li{list-style:none; display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start}
.kmm-pc .shield{padding:0; margin-block:24px 0}
.kmm-pc .shield .tick{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(79,211,192,.13); border:1px solid rgba(79,211,192,.3)}
.kmm-pc .shield .tick svg{width:13px; height:13px; stroke:var(--teal-glow); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .shield b{font-size:15px; font-weight:700; display:block}
.kmm-pc .shield p{color:var(--hero-muted); font-size:14px; line-height:1.55; margin-top:3px}

/* ---------- tips ledger ---------- */
.kmm-pc .ledger{border-top:1px solid var(--line)}
.kmm-pc .tip{position:relative; display:grid; grid-template-columns:74px minmax(0,1fr); gap:clamp(16px,3vw,34px); padding:clamp(20px,3vw,28px) 10px; border-bottom:1px solid var(--line); transition:background .25s}
.kmm-pc .tip::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transition:transform .3s var(--ease)}
.kmm-pc .tip:hover::before{transform:scaleY(1)}
.kmm-pc .tip:hover{background:var(--surface)}
.kmm-pc .tip .num{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; letter-spacing:-.03em; line-height:1; background:linear-gradient(120deg,#9fb4d8,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.62; transition:opacity .25s}
.kmm-pc .tip:hover .num{opacity:1}
.kmm-pc .tip h3{font-size:17px; letter-spacing:-.014em; margin-bottom:6px}
.kmm-pc .tip p{color:var(--muted); font-size:15px; line-height:1.6; max-width:66ch}

/* ---------- persona tabs ---------- */
.kmm-pc .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.kmm-pc .tab{font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border-radius:999px; padding:11px 20px; min-height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:background .25s, color .25s, border-color .25s}
.kmm-pc .tab:hover{border-color:var(--accent)}
.kmm-pc .tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 20px -8px rgba(47,111,224,.7)}
.kmm-pc .panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--card-shadow); padding:clamp(22px,3.4vw,38px)}
.kmm-pc .panel h3{font-size:clamp(1.15rem,2vw,1.4rem); margin-bottom:8px}
.kmm-pc .panel .sub{color:var(--muted); font-size:15.5px; line-height:1.6; max-width:60ch; margin-bottom:20px}
.kmm-pc .panel ul{margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px}
.kmm-pc .panel li{list-style:none; display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; font-size:14.5px; line-height:1.55; color:var(--ink)}
.kmm-pc .panel li svg{width:16px; height:16px; margin-top:3px; stroke:var(--teal); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .panel li span b{font-weight:700}
.kmm-pc .panel li span i{font-style:normal; color:var(--muted)}

/* ---------- setup stepper ---------- */
.kmm-pc .journey{margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,30px)}
.kmm-pc .journey li{list-style:none; position:relative}
.kmm-pc .journey li:not(:last-child)::before{content:""; position:absolute; top:21px; left:56px; right:calc(-1 * clamp(18px,2.6vw,30px)); height:1px; background:var(--line)}
.kmm-pc .jnode{position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:800; font-size:16px; box-shadow:0 8px 20px -8px rgba(47,111,224,.7); margin-bottom:16px}
.kmm-pc .jstep{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:6px}
.kmm-pc .journey h3{font-size:16.5px; letter-spacing:-.012em; margin-bottom:7px}
.kmm-pc .journey .jdesc{color:var(--muted); font-size:14.5px; line-height:1.58}

/* ---------- faq ---------- */
.kmm-pc .faq{display:grid; gap:10px; max-width:820px}
.kmm-pc .qa{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.kmm-pc .qa > button{display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; text-align:left; font:inherit; font-size:16px; font-weight:700; letter-spacing:-.012em; color:var(--ink); background:none; border:0; cursor:pointer; padding:19px 22px; min-height:44px}
.kmm-pc .qa > button .chev{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); transition:transform .35s var(--ease)}
.kmm-pc .qa > button .chev svg{width:13px; height:13px; stroke:var(--ink); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.kmm-pc .qa > button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.kmm-pc .qa .ans{padding:0 22px 20px; color:var(--muted); font-size:15px; line-height:1.65; max-width:70ch}
.kmm-pc .qa .ans strong{color:var(--ink); font-weight:600}
.kmm-pc .qa .ans[hidden]{display:none}

/* ---------- CTA ---------- */
.kmm-pc .cta-card{border-radius:22px; color:var(--hero-ink); padding:clamp(34px,5.5vw,64px); position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--hero-bg),#132038 62%,#123a4d); box-shadow:var(--card-shadow)}
.kmm-pc .cta-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(100% 100% at 80% 0%, #000, transparent 70%);
  mask-image:radial-gradient(100% 100% at 80% 0%, #000, transparent 70%)}
.kmm-pc .cta-card > *{position:relative}
.kmm-pc .cta-card h2{max-width:18ch}
.kmm-pc .cta-card .sub{color:var(--hero-muted); font-size:16.5px; line-height:1.6; max-width:56ch; margin-top:16px}
.kmm-pc .cta-card .sub strong{color:var(--hero-ink); font-weight:600}
.kmm-pc .cta-btns{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.kmm-pc .cta-proof{display:flex; gap:8px; align-items:center; margin-top:22px; font-size:13.5px; color:var(--teal-glow); font-weight:600}
.kmm-pc .cta-proof svg{width:15px; height:15px; stroke:var(--teal-glow); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ---------- footer strip / sticky bar ---------- */
.kmm-pc .foot{padding:26px 0 30px; color:var(--muted); font-size:13px; text-align:center}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .kmm-pc .hero .wrap{grid-template-columns:1fr; gap:44px}
  .kmm-pc .device{max-width:520px; margin-inline:auto; width:100%}
  .kmm-pc .calc-grid,.kmm-pc .demo-grid{grid-template-columns:1fr; gap:34px}
  .kmm-pc .ctrl-grid{grid-template-columns:1fr}
  .kmm-pc .expo-body{grid-template-columns:1fr}
  .kmm-pc .expo-score{position:static}
  .kmm-pc .expo-dial{width:min(260px,100%)}
  .kmm-pc .feat-leads{grid-template-columns:1fr}
  .kmm-pc .journey{grid-template-columns:1fr; gap:26px}
  .kmm-pc .journey li:not(:last-child)::before{top:52px; bottom:-26px; left:21px; right:auto; width:1px; height:auto}
  .kmm-pc .journey li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px}
  .kmm-pc .jnode{margin-bottom:0}
}
@media (max-width:900px){
  .kmm-pc .squeeze,.kmm-pc .unaud{grid-template-columns:1fr}
}
@media (max-width:760px){
  .kmm-pc .seam-card{grid-template-columns:1fr}
  .kmm-pc .seam-card > div{border-left:0; border-top:1px solid var(--line)}
  .kmm-pc .seam-card > div:first-child{border-top:0}
  .kmm-pc .calc-out{grid-template-columns:1fr 1fr}
  .kmm-pc .panel ul{grid-template-columns:1fr}
  .kmm-pc .feat-row{grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto; row-gap:4px}
  .kmm-pc .feat-row .ic{grid-row:1 / span 2}
  .kmm-pc .tip{grid-template-columns:52px minmax(0,1fr)}
  .kmm-pc .chain .row{grid-template-columns:1fr; gap:7px}
  .kmm-pc .chain .arr{display:none}
  .kmm-pc .chain .fx{border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent); padding-left:11px}
  }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .kmm-pc .rv{opacity:1; transform:none; transition:none}
  .kmm-pc .chain .arr,.kmm-pc .chain .fx{opacity:1; transform:none; transition:none}
  .kmm-pc .expo-meter span,.kmm-pc .expo .lc{transition:none}
  .kmm-pc .spark path,.kmm-pc .rp-track b,.kmm-pc .q-a{transition:none}
  .kmm-pc .g-val{transition:none}
  .kmm-pc .expo-kicker::before,.kmm-pc .expo[data-level="4"] .expo-band{animation:none}
  .kmm-pc .scanbar,.kmm-pc .d-dot{display:none}
  .kmm-pc .d-led.blink{animation:none}
  .kmm-pc .bars .bar{transition:none}
  .kmm-pc .btn, .kmm-pc .tip::before, .kmm-pc .qa > button .chev{transition:none}
}