/* ════════════════════════════════════════════════════════════════════════
   Malawi POE Sentinel — HIG deck framework  (2026-06-14)
   Apple Human Interface Guidelines aligned: SF system type, large titles,
   segmented controls, materials/depth, generous spacing, 44px targets,
   safe-area aware. NO PAGE SCROLL — every page is a full-viewport stage of
   paged panels with progressive reveal. Light mode, government-appropriate.
   ════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#f5f6f8;            /* system grouped background */
  --surface:#ffffff;
  --surface-2:#eef1f5;
  --hair:rgba(60,67,78,.14);
  --hair-strong:rgba(60,67,78,.22);
  --ink:#1c1c1e;           /* label */
  --ink-2:#3a3a3c;         /* secondary label */
  --ink-3:#6b7280;         /* tertiary label */
  --tint:#006b3f;          /* Malawi green = accent/tint */
  --tint-press:#00532f;
  --tint-soft:#e7f2ec;
  --red:#c0182b;
  --amber:#9a6500;
  --radius:22px;           /* HIG continuous-corner feel */
  --radius-sm:14px;
  --shadow-1:0 1px 2px rgba(20,28,38,.06),0 8px 24px -10px rgba(20,28,38,.18);
  --shadow-2:0 2px 6px rgba(20,28,38,.08),0 24px 56px -22px rgba(20,28,38,.32);
  --blur:saturate(180%) blur(20px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.32,.72,0,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  overflow:hidden;overscroll-behavior:none;color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern";letter-spacing:-.01em;
}
[hidden]{display:none!important}
img{display:block;max-width:100%}
a{color:var(--tint-press);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- skip + focus --------------------------------------------------------- */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid #1768d6;outline-offset:2px;border-radius:8px}

/* ---- stage (full viewport, never scrolls) -------------------------------- */
.stage{height:100svh;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 70% at 88% -12%, #e2f0e8 0, rgba(226,240,232,0) 55%),
    radial-gradient(90% 60% at -8% 110%, #e8f0ff 0, rgba(232,240,255,0) 55%),
    var(--bg);}

/* ---- top bar (translucent material) -------------------------------------- */
.bar-top{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:calc(10px + var(--safe-t)) clamp(14px,4vw,30px) 10px;
  background:rgba(245,246,248,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:.5px solid var(--hair);z-index:30}
.bar-top .crest{height:34px;width:auto;flex:0 0 auto}
.bar-top .ttl{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bar-top .ttl b{font-size:.98rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-top .ttl span{font-size:.74rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-top .grow{flex:1 1 auto}

/* segmented control (audience switch / tabs) */
.seg{display:inline-flex;background:var(--surface-2);border:.5px solid var(--hair);border-radius:999px;padding:3px;gap:2px}
.seg a,.seg button{appearance:none;border:0;background:transparent;font:inherit;font-size:.82rem;font-weight:600;
  color:var(--ink-2);padding:7px 14px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1}
.seg a[aria-current],.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.seg a:hover,.seg button:hover{text-decoration:none}
@media(max-width:560px){.bar-top .ttl span{display:none}.seg a,.seg button{padding:7px 11px;font-size:.78rem}}

/* pill link in bar */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--tint);color:#fff;border-radius:999px;
  padding:9px 16px;font-size:.86rem;font-weight:600;text-decoration:none;box-shadow:var(--shadow-1)}
.pill:hover{background:var(--tint-press);text-decoration:none}
.pill.ghost{background:var(--surface);color:var(--tint-press);border:.5px solid var(--hair-strong)}

/* ---- deck + panels -------------------------------------------------------- */
.deck{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,3.2vh,40px) clamp(18px,5vw,68px);
  opacity:0;visibility:hidden;transform:translate3d(28px,0,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
  will-change:opacity,transform}
.panel.active{opacity:1;visibility:visible;transform:none;z-index:2}
.panel.prev{transform:translate3d(-28px,0,0)}
@media(prefers-reduced-motion:reduce){.panel{transition:opacity .2s linear;transform:none!important}}
.pwrap{width:100%;max-width:1120px;margin:0 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}

/* progressive reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.panel.active .reveal{opacity:1;transform:none}
.panel.active .reveal:nth-child(1){transition-delay:.05s}
.panel.active .reveal:nth-child(2){transition-delay:.13s}
.panel.active .reveal:nth-child(3){transition-delay:.21s}
.panel.active .reveal:nth-child(4){transition-delay:.29s}
.panel.active .reveal:nth-child(5){transition-delay:.37s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ---- typography kit ------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tint-press);background:var(--surface);border:.5px solid var(--hair);
  border-radius:999px;padding:6px 13px;box-shadow:var(--shadow-1)}
.large-title{font-size:clamp(1.9rem,1.1rem+3.2vw,3.2rem);line-height:1.04;letter-spacing:-.03em;font-weight:800;margin:.32em 0 .18em}
.title-2{font-size:clamp(1.4rem,1rem+1.6vw,2rem);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:0 0 .25em}
.body{font-size:clamp(1rem,.96rem+.3vw,1.2rem);color:var(--ink-2);max-width:54ch;margin:.2em 0}
.foot{font-size:.82rem;color:var(--ink-3)}
.kbd{font:600 .86em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:.12em .45em;border-radius:6px}

/* ---- buttons -------------------------------------------------------------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.b{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:14px;
  text-decoration:none;transition:transform .08s var(--ease),filter .15s,background .15s}
.b.primary{background:var(--tint);color:#fff;box-shadow:0 8px 20px -8px rgba(0,107,63,.6)}
.b.primary:hover{background:var(--tint-press);text-decoration:none}
.b.secondary{background:var(--surface);color:var(--tint-press);border:.5px solid var(--hair-strong);box-shadow:var(--shadow-1)}
.b.secondary:hover{background:#fff;text-decoration:none}
.b:active{transform:scale(.98)}
.b .ar{font-weight:700}

/* ---- chips / reassurance -------------------------------------------------- */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:.5px solid var(--hair);
  border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-1)}
.chip svg{width:15px;height:15px;color:var(--tint);flex:0 0 auto}

/* ---- hero split ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,56px);align-items:center;min-height:0}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:14px}.split .art{display:none}}
@media(max-width:820px) and (min-height:720px){.split .art{display:flex}}

/* ---- device frame (scales to fit, never overflows) ----------------------- */
.device{position:relative;display:flex;justify-content:center;align-items:center;min-height:0}
.device .glow{position:absolute;inset:8% 12%;background:radial-gradient(closest-side,rgba(0,107,63,.22),transparent);filter:blur(30px)}
.phone{position:relative;background:#0b1620;border-radius:38px;padding:10px;box-shadow:var(--shadow-2);
  height:min(72vh,620px);aspect-ratio:262/566}
.phone::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#28333d}
.phone img{height:100%;width:100%;object-fit:cover;border-radius:28px}
.phone.tilt{transform:rotate(2.2deg)}
@media(max-width:820px){.phone{height:min(46vh,420px)}}

/* ---- step panel (wizard) -------------------------------------------------- */
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;min-height:0}
.step .device{justify-content:flex-start}
@media(max-width:820px){.step{grid-template-columns:1fr;gap:12px;justify-items:center;text-align:center}
  .step .sbody{max-width:42ch}.step .device{order:-1}}
.snum{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);color:#fff;
  font-weight:800;font-size:1.05rem;box-shadow:var(--shadow-1)}
.step .title-2{margin-top:10px}
.ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:1rem}
.ticks li::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--tint-soft);margin-top:1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}

/* AI-style guide note */
.guide-note{position:relative;background:linear-gradient(160deg,#0f2e1f,#0c1722);color:#dff3e8;border-radius:16px;
  padding:14px 16px 14px 50px;font-size:.95rem;line-height:1.5;margin-top:16px;box-shadow:var(--shadow-2);max-width:48ch}
.guide-note::before{content:"";position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:7px;background:var(--tint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.6L18.5 9l-4.6 1.9L12 15l-1.9-4.1L5.5 9l4.6-1.4z'/%3E%3C/svg%3E") center/16px no-repeat}
.guide-note .who{display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7fd3a6;margin-bottom:2px}
.guide-note b{color:#fff}

/* ---- cards grid ----------------------------------------------------------- */
.cards{display:grid;gap:clamp(12px,2vw,20px);margin-top:18px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.cards.c3,.cards.c4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards.c3,.cards.c4,.cards.c2{grid-template-columns:1fr}}
.card{background:var(--surface);border:.5px solid var(--hair);border-radius:var(--radius-sm);padding:18px 18px 20px;box-shadow:var(--shadow-1)}
.card .ic{width:42px;height:42px;border-radius:11px;background:var(--tint-soft);display:grid;place-items:center;margin-bottom:11px}
.card .ic svg{width:22px;height:22px;color:var(--tint-press)}
.card h3{margin:.1em 0 .3em;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-2);font-size:.96rem}
.card.tap{cursor:pointer;transition:transform .1s var(--ease),box-shadow .15s}
.card.tap:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

/* ---- numbered flow (at the border) --------------------------------------- */
.flow{list-style:none;counter-reset:f;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.flow li{counter-increment:f;position:relative;padding-left:46px;color:var(--ink-2);font-size:1rem}
.flow li::before{content:counter(f);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--tint);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.flow li b{color:var(--ink)}

/* ---- stats band ----------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2.5vw,28px);margin-top:18px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-size:clamp(1.5rem,1rem+2vw,2.3rem);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.stat span{font-size:.88rem;color:var(--ink-3)}

/* ---- disclosure list (FAQ, progressive) ---------------------------------- */
.disc{display:flex;flex-direction:column;gap:9px;margin-top:16px;max-width:760px}
.disc .row{background:var(--surface);border:.5px solid var(--hair);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);overflow:hidden}
.disc .q{appearance:none;width:100%;text-align:left;background:transparent;border:0;font:inherit;font-weight:600;font-size:1rem;
  color:var(--ink);padding:15px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px}
.disc .q .pm{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;
  color:var(--tint-press);font-weight:800;transition:transform .25s var(--ease)}
.disc .row[aria-expanded="true"] .pm{transform:rotate(45deg)}
.disc .a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);color:var(--ink-2);font-size:.97rem}
.disc .a > div{padding:0 18px 16px}

/* ---- panel sub-pager (used inside a panel if needed) --------------------- */
.subhint{font-size:.8rem;color:var(--ink-3);margin-top:10px}

/* ---- bottom pager (HIG page control) ------------------------------------- */
.bar-bot{flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:12px clamp(14px,4vw,30px) calc(12px + var(--safe-b));
  background:rgba(245,246,248,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:.5px solid var(--hair);z-index:30}
.nav-b{appearance:none;border:.5px solid var(--hair-strong);background:var(--surface);color:var(--ink);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-1);
  transition:transform .08s var(--ease),opacity .2s}
.nav-b:hover{background:#fff}
.nav-b:active{transform:scale(.94)}
.nav-b[disabled]{opacity:.35;cursor:default}
.nav-b svg{width:20px;height:20px}
.dots{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.dots button{appearance:none;border:0;cursor:pointer;width:9px;height:9px;border-radius:50%;background:var(--hair-strong);padding:0;
  transition:width .3s var(--ease),background .3s}
.dots button[aria-current="true"]{width:26px;border-radius:6px;background:var(--tint)}
.bar-bot .label{font-size:.82rem;color:var(--ink-3);min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:560px){.bar-bot .label{display:none}}

/* progress line on top of deck */
.prog{position:absolute;top:0;left:0;height:3px;background:var(--tint);z-index:25;transition:width .45s var(--ease);border-radius:0 3px 3px 0}

/* ---- swap groups (drill-in within a panel) ------------------------------- */
[data-drill]{display:none}
[data-drill].on{display:block}
.back-link{appearance:none;background:none;border:0;color:var(--tint-press);font:inherit;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:10px}

/* ---- nav quick-links (top bar) ------------------------------------------ */
.navlinks{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.qlink{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;border-radius:999px;padding:8px 13px;white-space:nowrap;line-height:1;transition:background .15s,filter .15s}
.qlink svg{width:15px;height:15px;flex:0 0 auto}
.qlink.solid{background:var(--tint);color:#fff;box-shadow:0 6px 16px -8px rgba(0,107,63,.6)}
.qlink.solid:hover{background:var(--tint-press);text-decoration:none}
.qlink.ghost{background:var(--surface);color:var(--tint-press);border:.5px solid var(--hair-strong);box-shadow:var(--shadow-1)}
.qlink.ghost:hover{background:#fff;text-decoration:none}
@media(max-width:880px){.qlink .qt{display:none}.qlink{padding:9px}}
@media(max-width:520px){.navlinks{gap:6px}.bar-top{gap:9px}}
/* tightest phones: drop the title text so crest + quick-links + audience switch always fit */
@media(max-width:384px){.bar-top .ttl{display:none}.bar-top{gap:8px}}

/* ---- app store (mini play store) ----------------------------------------- */
.store{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,20px);margin-top:16px}
@media(max-width:680px){.store{grid-template-columns:1fr}}
.tile{position:relative;background:var(--surface);border:.5px solid var(--hair);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start}
.tile .qr{flex:0 0 auto;box-sizing:border-box;overflow:visible;width:132px;height:132px;border-radius:12px;border:.5px solid var(--hair);background:#fff;padding:8px;box-shadow:var(--shadow-1)}
.tile .qr img,.tile .qr svg{width:100%;height:100%;display:block;image-rendering:pixelated}
.tile .qcap{display:block;text-align:center;font-size:.66rem;color:var(--ink-3);margin-top:5px;font-weight:600}
.tile .tbody{min-width:0}
.tile .tbody h3{margin:.05em 0 .15em;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.tile .tbody h3 .pf{width:20px;height:20px;color:var(--tint-press);flex:0 0 auto}
.tile .tdesc{margin:0 0 10px;color:var(--ink-2);font-size:.9rem;line-height:1.4}
.tile .b{min-height:46px;width:100%;font-size:.96rem}
.tile .meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;font-size:.74rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tile .meta b{color:var(--ink-2);font-weight:700}
.tile .sha{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--ink-3);
  display:block;margin-top:7px;word-break:break-all;line-height:1.35}
.tile .sha b{color:var(--ink-2)}
/* narrow portrait: compact tile (QR left, body right), drop supplementary lines */
@media(max-width:680px){
  .store{grid-template-columns:1fr;gap:9px}
  .tile{grid-template-columns:auto 1fr;gap:12px;padding:12px;align-items:center}
  .tile .qr{width:116px;height:116px}
  .tile .qcap,.tile .sha,.tile .tdesc{display:none}
  #android .body,#ios .body{display:none}   /* heading carries the meaning */
}
/* short viewports: QR + sha + intro are supplementary — the button still works */
@media(max-height:780px){#android .body,#ios .body{display:none}.tile .sha{display:none}.tile{padding:12px;gap:12px}.tile .qr{width:116px;height:116px}}
@media(max-height:640px){.tile .qr,.tile .qcap,.tile .tdesc{display:none}.tile{grid-template-columns:1fr;padding:10px 13px}#which .notebar{display:none}}
.notebar{display:flex;align-items:flex-start;gap:10px;background:var(--tint-soft);border:.5px solid var(--hair);border-radius:12px;
  padding:12px 14px;margin-top:14px;font-size:.88rem;color:var(--ink-2);max-width:760px}
.notebar svg{width:18px;height:18px;color:var(--tint-press);flex:0 0 auto;margin-top:1px}
@media(max-height:780px){.notebar{display:none}}
@media(max-width:680px){.notebar{display:none}}
/* install panel: guide-note + device are supplementary on shorter screens */
@media(max-height:880px){#install .guide-note{display:none}}
@media(max-height:720px){.duocap .duo .phone{height:min(32vh,230px)}#which .eyebrow{display:none}#install .body{display:none}
  #which .card{padding:9px 11px}#which .card p{font-size:.82rem;line-height:1.3}#which .card .ic{display:none}#which .card h3{margin-top:0}
  #contact .card{padding:9px 11px}#contact .card p{font-size:.83rem;line-height:1.32}#contact .eyebrow{display:none}}

/* utility */
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.2em .6em;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
.tag.live{background:var(--tint-soft);color:var(--tint-press)}
.tag.train{background:#fdf0d8;color:var(--amber)}
hr.s{border:0;border-top:.5px solid var(--hair);margin:14px 0}

/* ---- device height tuning (keep panels within the deck, never clipped) ---- */
.split .phone{height:min(56vh,520px)}
.step .phone{height:min(52vh,450px)}
@media(max-width:820px){
  .phone{height:min(40vh,380px)}
  .split .phone{height:min(42vh,400px)}
  .step .phone{height:min(34vh,330px)}
}
@media(max-height:760px){
  .step .guide-note{display:none}      /* supplementary; also in the floating guide */
  .ticks{gap:7px}
  .ticks li{font-size:.95rem}
}
@media(max-height:640px){
  .step .ticks li:nth-child(n+3){display:none}
  .phone,.split .phone,.step .phone{height:min(40vh,300px)}
}

/* ---- floating guide widget ----------------------------------------------- */
.guide-fab{position:fixed;right:16px;bottom:calc(80px + var(--safe-b));z-index:80;display:inline-flex;align-items:center;gap:8px;
  background:var(--tint);color:#fff;border:0;border-radius:999px;padding:12px 17px;font:inherit;font-weight:700;font-size:.9rem;
  cursor:pointer;box-shadow:var(--shadow-2)}
.guide-fab:hover{background:var(--tint-press)}
.guide-fab svg{width:17px;height:17px}
.guide-pop{position:fixed;right:16px;bottom:calc(134px + var(--safe-b));width:min(360px,calc(100vw - 32px));
  max-height:min(58vh,440px);background:#fff;border:.5px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-2);
  display:none;flex-direction:column;overflow:hidden;z-index:81}
.guide-pop.open{display:flex}
.gp-head{background:linear-gradient(160deg,#0f2e1f,#0c1722);color:#fff;padding:14px 16px;flex:0 0 auto}
.gp-head b{display:block;font-size:1rem}.gp-head span{font-size:.8rem;color:#9fd9bb}
.gp-body{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.gp-foot{border-top:.5px solid var(--hair);padding:9px 14px;font-size:.78rem;color:var(--ink-3);flex:0 0 auto}
.gq{appearance:none;text-align:left;background:var(--surface-2);border:.5px solid var(--hair);border-radius:11px;padding:11px 13px;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;display:block}
.gq:hover{border-color:var(--tint);background:var(--tint-soft);text-decoration:none}
.gq.gstart{background:var(--tint);color:#fff;border-color:var(--tint);text-align:center}
.gback{appearance:none;background:none;border:0;color:var(--tint-press);font:inherit;font-weight:700;cursor:pointer;padding:0;text-align:left}
.ga-q{font-weight:700;margin:.3em 0 .3em}
.ga{color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media(max-width:560px){.guide-fab span{display:inline}}

/* ════════ FIT CORRECTIONS — guarantee zero clip at every viewport ════════ */
/* hero art is decorative; the pass screenshot has its own panel → drop on mobile */
@media(max-width:820px){ .split .art{display:none!important} .split{grid-template-columns:1fr} }

/* phones: 2-column mini-cards (halves the stack height vs 1-column) */
@media(max-width:560px){
  .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr 1fr;gap:8px}
  .card{padding:11px 12px}
  .card .ic{width:32px;height:32px;margin-bottom:7px}
  .card .ic svg{width:18px;height:18px}
  .card h3{font-size:.94rem;margin:.1em 0 .2em}
  .card p{font-size:.82rem;line-height:1.34}
}

/* short viewports: progressive compression (catches small phones + landscape) */
@media(max-height:700px){
  .panel{padding:clamp(10px,2.4vh,24px) clamp(16px,5vw,44px)}
  .large-title{font-size:clamp(1.5rem,1rem+2.4vw,2.4rem);margin:.2em 0 .12em}
  .title-2{font-size:clamp(1.2rem,1rem+1vw,1.7rem)}
  .body{font-size:1rem;margin:.12em 0}
  .chips{margin-top:9px}.btns{margin-top:11px}.cards{margin-top:11px}.stats{margin-top:11px}.disc{margin-top:11px}
  .guide-note{display:none}
  .ticks{margin-top:9px;gap:6px}
  .stats .stat b{font-size:1.5rem}
  .b{min-height:46px}
  .disc .q{min-height:46px;padding:12px 15px}
}
@media(max-height:600px){
  .panel{padding:5px clamp(14px,5vw,40px);justify-content:center}
  .eyebrow{display:none}
  .large-title{font-size:1.45rem;margin:.08em 0}.title-2{font-size:1.16rem;margin-bottom:.15em}
  .split .body,#what .body,#why .body,#privacy .body{display:none}
  .chips{display:none}
  .cards{gap:6px;margin-top:8px}.card{padding:9px 12px}.card p{font-size:.85rem}
  .snum{width:34px;height:34px;font-size:.95rem}
  .ticks{gap:5px}.ticks li:nth-child(n+3){display:none}.ticks li{font-size:.92rem}
  .flow{gap:7px;margin-top:9px}.flow li{font-size:.92rem}
  .stat span{display:none}.stats{gap:10px}.stats .stat b{font-size:1.4rem}
  .step .phone{height:min(27vh,210px)}
  .disc{margin-top:9px}.disc .row:nth-child(n+4){display:none}
  .disc .q{min-height:42px;padding:10px 13px;font-size:.95rem}
  .b{min-height:44px;font-size:.95rem}
  .btns{gap:8px;margin-top:10px}
}

/* very short phones (e.g. 320×568) — final fit tier */
@media(max-height:580px){
  .step{gap:6px}
  .step .phone{height:min(16vh,120px)}
  .title-2{font-size:1.08rem;margin-bottom:.1em}
  .ticks{gap:4px}.ticks li{font-size:.88rem;line-height:1.3}
  .flow{gap:5px}.flow li{font-size:.86rem;line-height:1.3;padding-left:38px}.flow li::before{width:25px;height:25px;font-size:.8rem}
  .card{padding:8px 11px}.card p{font-size:.83rem;line-height:1.35}
  .snum{width:30px;height:30px}
}

/* ---- duo device layout (two phones in one panel) ------------------------- */
.duo{display:flex;gap:clamp(14px,3vw,40px);justify-content:center;align-items:center;min-height:0}
.duo .phone{height:min(54vh,460px)}
@media(max-width:820px){.duo .phone{height:min(38vh,330px)}}
@media(max-height:600px){.duo .phone{height:min(40vh,300px)}}
@media(max-height:580px){.duo .phone{height:min(34vh,240px)}}
.duo .phone.tilt:first-child{transform:rotate(-2.5deg)}
.duo .phone.tilt:last-child{transform:rotate(2.5deg)}
.duocap{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,46px);align-items:center;min-height:0}
@media(max-width:820px){.duocap{grid-template-columns:1fr;gap:12px;justify-items:center;text-align:center}.duocap .duo{order:-1}}

/* officer deck: short-height fixes for duo/cards panels */
@media(max-height:700px){
  .guide-note{display:none}           /* supplementary everywhere on short screens */
  .duo .phone{height:min(40vh,300px)}
  .card{padding:12px 13px}
}
@media(max-height:600px){ .duo .phone{height:min(32vh,220px)} .card{padding:10px 12px} }

/* officer deck: on short screens, drop supplementary body on cluster panels (cards/ticks carry the meaning) */
@media(max-height:700px){ #offline .body,#two .body{display:none} }
@media(max-height:620px){ #install .body,#t-intro .body,#t-declare .body,#t-health .body,#t-scan .body{display:none} }

/* generic: on short screens, the descriptive body on centered cluster panels is supplementary */
@media(max-height:720px){ .pwrap.center .body{display:none} }
@media(max-height:760px){ .cards.c3{gap:9px} }
@media(max-height:600px){ .card{padding:9px 11px} .card p{font-size:.84rem;line-height:1.34} }

/* dense card grids on short screens — shrink, then titles-only on the very shortest */
@media(max-height:640px){ .card{padding:8px 11px} .card p{font-size:.82rem;line-height:1.3} .cards{gap:6px} }
@media(max-height:600px){ .card p{display:none} .card .ic{display:none} .card h3{margin:0} }