/* RNLISP360 public site: shared styles for the artboards.
   Tokens come from the RNL ISP360 design system: pure white and pure black grounds, 1px hairlines, one brand accent,
   Inter, radii 4 to 8px, no gradients, no shadows except float. Public pages use two grounds only: band-black and surface-100.
   The background pattern is the uploaded pattern-mask.svg (set in each artboard's helmet), never drawn in CSS. */
:root {
  --surface-100:#FFFFFF; --surface-200:#F5F5F5; --ink:#0A0A0A; --ink-2:#525252; --ink-3:#6B6B6B;
  --hairline:#E5E5E5; --control-border:#8A8A8A; --brand:#0073A6; --brand-hover:#005580; --brand-text:#00668F; --on-brand:#FFFFFF;
  --focus:#0073A6; --success:#157A3D; --success-weak:#E6F4EA; --danger:#B42318; --danger-weak:#FDECEC;
  --warn:#9A5B00; --warn-weak:#FFF4E0; --info:#005580; --info-weak:#E6F4FB;
  --svc-hotspot:#0073A6; --svc-tv:#F0A030; --svc-pppoe:#7B61FF; --svc-static:#33B6A3;
  --band:#000000; --on-band:#FFFFFF; --band-2:#D4D4D4; --band-3:#A3A3A3; --band-line:#262626; --band-brand-text:#33BAFF;
  --shadow-float:0 4px 8px -4px rgba(0,0,0,.12);
}
.s, .s * { box-sizing: border-box; }
.s { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:16px; line-height:24px; color:var(--ink); background:var(--surface-100); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; text-align:left; }
.s h1, .s h2, .s h3, .s h4, .s p, .s ul, .s ol, .s dl, .s dd, .s figure { margin:0; padding:0; }
.s ul, .s ol { list-style:none; }
.s a { color:inherit; text-decoration:none; }
.s img { display:block; }
.s button { font:inherit; color:inherit; }
.s svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.s svg.md { width:20px; height:20px; }
.s :focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.s-wrap { width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }
.s-band { position:relative; isolation:isolate; }
.s-black { background:var(--band); color:var(--on-band); }
.s-black .s-muted { color:var(--band-2); } .s-black .s-faint { color:var(--band-3); }
.s-hair-t { border-top:1px solid var(--hairline); } .s-black.s-hair-t { border-top-color:var(--band-line); }
.s-pat::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:color-mix(in srgb, var(--brand) 7%, transparent); }
.s-black.s-pat::before { background:color-mix(in srgb, var(--brand) 22%, transparent); }
.s-sec { padding:96px 0; }

/* Type */
.s-overline { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.s-black .s-overline { color:var(--band-3); }
.s-xl { font-size:72px; line-height:76px; font-weight:500; letter-spacing:-.03em; }
.s-lg { font-size:56px; line-height:60px; font-weight:500; letter-spacing:-.03em; }
.s-md { font-size:40px; line-height:46px; font-weight:500; letter-spacing:-.02em; }
.s-h3 { font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.01em; }
.s-h4 { font-size:16px; line-height:24px; font-weight:600; letter-spacing:-.005em; }
.s-lead { font-size:18px; line-height:28px; color:var(--ink-2); }
.s-black .s-lead { color:var(--band-2); }
.s-small { font-size:14px; line-height:20px; color:var(--ink-2); }
.s-caption { font-size:12px; line-height:16px; font-weight:500; color:var(--ink-3); }
.s-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; }
.s-brandtext { color:var(--brand-text); } .s-black .s-brandtext { color:var(--band-brand-text); }

/* Buttons */
.s-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 20px; border-radius:6px; border:1px solid var(--control-border); background:var(--surface-100); color:var(--ink); font-weight:600; font-size:14px; line-height:20px; cursor:pointer; white-space:nowrap; }
.s-btn:hover { background:var(--surface-200); }
.s-btn.lg { height:48px; padding:0 28px; font-size:15px; }
.s-btn.primary { background:var(--brand); border-color:transparent; color:var(--on-brand); }
.s-btn.primary:hover { background:var(--brand-hover); }
.s-black .s-btn:not(.primary) { background:transparent; border-color:#737373; color:var(--on-band); }
.s-black .s-btn:not(.primary):hover { background:#171717; }
.s-btn.ghost { border-color:transparent; background:transparent; }
.s-link { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--brand-text); }
.s-black .s-link { color:var(--band-brand-text); }
.s-link:hover { text-decoration:underline; text-underline-offset:3px; }

/* Nav */
.s-nav { height:64px; display:flex; align-items:center; gap:32px; }
.s-nav-links { display:flex; gap:28px; margin-left:16px; font-size:14px; font-weight:500; color:var(--band-2); }
.s-nav-links a:hover { color:var(--on-band); }
.s-nav.light .s-nav-links { color:var(--ink-2); } .s-nav.light .s-nav-links a:hover { color:var(--ink); }
.s-logo { height:32px; width:auto; }
.s-grow { flex:1; }
.s-nav-line { border-bottom:1px solid var(--band-line); }

/* Window mock (the product, drawn with the system's own parts) */
.s-win { background:var(--surface-100); color:var(--ink); border:1px solid var(--hairline); border-radius:8px; overflow:hidden; font-size:14px; line-height:20px; }
.s-black .s-win { border-color:#404040; }
.s-win-bar { height:44px; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--hairline); }
.s-win-bar .mark { width:22px; height:22px; border-radius:4px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:600; }
.s-win-bar .url { margin-left:auto; color:var(--ink-3); font-size:12px; }
.s-win-body { display:flex; }
.s-rail { width:168px; flex:none; border-right:1px solid var(--hairline); padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.s-rail span { height:30px; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:4px; color:var(--ink-2); font-size:13px; }
.s-rail span.on { background:var(--surface-200); color:var(--ink); font-weight:600; }
.s-rail .lab { height:auto; padding:10px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.s-pane { flex:1; min-width:0; padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.s-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--hairline); border-radius:6px; }
.s-kpi { padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.s-kpi + .s-kpi { border-left:1px solid var(--hairline); }
.s-kpi .fig { font-size:24px; line-height:30px; font-weight:500; letter-spacing:-.01em; }
.s-svc { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.s-svc i { width:8px; height:8px; border-radius:2px; background:var(--c); }
.s-bars { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; align-items:end; height:96px; padding-top:8px; }
.s-bars div { display:flex; flex-direction:column; gap:6px; align-items:stretch; justify-content:flex-end; height:100%; }
.s-bars i { display:block; background:var(--brand); border-radius:2px 2px 0 0; }
.s-bars span { font-size:11px; color:var(--ink-3); text-align:left; }
.s-tbl { width:100%; border-collapse:collapse; }
.s-tbl th { height:36px; text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--hairline); padding:0 12px; }
.s-tbl td { height:44px; padding:0 12px; border-bottom:1px solid var(--hairline); font-size:13px; color:var(--ink-2); }
.s-tbl td:first-child { color:var(--ink); font-weight:500; }
.s-tbl tr:last-child td { border-bottom:0; }
.s-badge { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:4px; font-size:12px; font-weight:600; background:var(--surface-200); color:var(--ink-2); white-space:nowrap; }
.s-badge.success { background:var(--success-weak); color:var(--success); } .s-badge.danger { background:var(--danger-weak); color:var(--danger); }
.s-badge.warn { background:var(--warn-weak); color:var(--warn); } .s-badge.info { background:var(--info-weak); color:var(--info); }

/* Float: toasts and popovers over a mock */
.s-float { background:var(--surface-100); color:var(--ink); border:1px solid var(--hairline); border-radius:8px; box-shadow:var(--shadow-float); padding:12px 16px; display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:18px; }
.s-black .s-float { border-color:#404040; }
.s-tick { width:20px; height:20px; border-radius:50%; background:var(--success-weak); color:var(--success); display:grid; place-items:center; flex:none; }
.s-tick svg { width:12px; height:12px; stroke-width:2.5; }

/* Stat strip */
.s-stats { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:1px solid var(--band-line); }
.s-stat { padding:24px 24px 24px 0; display:flex; flex-direction:column; gap:4px; }
.s-stat + .s-stat { padding-left:24px; border-left:1px solid var(--band-line); }
.s-stat b { font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.02em; }
.s-stat span { font-size:13px; color:var(--band-3); }

/* Rows: ledger, steps, lists */
.s-rows > * { border-top:1px solid var(--hairline); }
.s-rows > *:last-child { border-bottom:1px solid var(--hairline); }
.s-check li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:var(--ink-2); }
.s-check svg { color:var(--brand-text); margin-top:4px; }
.s-black .s-check li { color:var(--band-2); } .s-black .s-check svg { color:var(--band-brand-text); }
.s-step { display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,1fr); gap:32px; padding:32px 0; }
.s-step .n { font-size:40px; line-height:46px; font-weight:500; letter-spacing:-.02em; color:var(--ink-3); }
.s-led { display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; padding:40px 0; }
.s-led-list > div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:14px 0; border-top:1px solid var(--hairline); }
.s-led-list > div:first-child { border-top:0; padding-top:0; }
.s-led-list b { font-weight:600; }
.s-led-list span { color:var(--ink-2); }

/* Tabs (segmented) */
.s-seg { display:inline-grid; grid-auto-flow:column; gap:2px; padding:2px; border-radius:6px; background:var(--surface-200); }
.s-seg button { height:36px; padding:0 20px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--ink-2); font-weight:600; cursor:pointer; }
.s-seg button.on { background:var(--surface-100); border-color:var(--hairline); color:var(--ink); }

/* Flow (payments) */
.s-flow { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.s-flow > div { padding:0 24px 0 0; display:flex; flex-direction:column; gap:8px; }
.s-flow > div + div { padding-left:24px; border-left:1px solid var(--hairline); }
.s-flow .t { font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.01em; }

/* Quote */
.s-quote { font-size:40px; line-height:48px; font-weight:500; letter-spacing:-.02em; }
.s-who { display:flex; align-items:center; gap:12px; }
.s-av { width:40px; height:40px; border-radius:6px; background:var(--surface-200); border:1px solid var(--hairline); display:grid; place-items:center; font-weight:600; font-size:13px; color:var(--ink-2); }
.s-minis > div { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; padding:18px 0; border-top:1px solid var(--hairline); }
.s-minis > div:last-child { border-bottom:1px solid var(--hairline); }

/* FAQ */
.s-faq { border-top:1px solid var(--hairline); }
.s-faq button.q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; background:none; border:0; border-bottom:1px solid var(--hairline); font-size:18px; line-height:28px; font-weight:600; text-align:left; cursor:pointer; }
.s-faq .a { padding:16px 0 24px; max-width:760px; color:var(--ink-2); border-bottom:1px solid var(--hairline); }

/* Footer */
.s-foot { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap:48px; }
.s-foot h4 { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.s-foot li { padding:5px 0; color:var(--ink-2); }
.s-foot li a:hover { color:var(--ink); }

/* Pricing */
.s-price { width:100%; border-collapse:collapse; }
.s-price th { text-align:left; height:44px; padding:0 20px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--ink); }
.s-price td { height:64px; padding:0 20px; border-bottom:1px solid var(--hairline); color:var(--ink-2); }
.s-price td:first-child { color:var(--ink); font-weight:600; }
.s-price .fig { font-size:24px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.s-price tr.pop td { background:var(--surface-200); }

/* Hub: signature map, pins, paths, routes */
.s-map { position:relative; }
.s-map > img.dots { width:100%; height:auto; }
.s-pin { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--band-brand-text); box-shadow:0 0 0 4px rgba(51,186,255,.22); }
.s-pin.sm { width:8px; height:8px; margin:-4px 0 0 -4px; box-shadow:none; }
.s-pinlabel { position:absolute; font-size:12px; line-height:16px; font-weight:600; color:var(--band-2); white-space:nowrap; }
.s-path { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--hairline); border-radius:8px; overflow:hidden; }
.s-path > a { display:flex; flex-direction:column; gap:12px; padding:32px; background:var(--surface-100); }
.s-path > a + a { border-left:1px solid var(--hairline); }
.s-path > a:hover { background:var(--surface-200); }
.s-route { display:grid; grid-template-columns:72px minmax(0,5fr) minmax(0,6fr) 32px; gap:24px; align-items:center; padding:28px 0; border-top:1px solid var(--hairline); }
.s-route:last-child { border-bottom:1px solid var(--hairline); }
.s-route .n { font-size:14px; font-weight:600; color:var(--ink-3); }
.s-route .t { font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.015em; }
.s-route:hover { background:var(--surface-200); }
.s-ladder { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; }
.s-ladder > div { padding:16px 16px 0 0; border-top:2px solid var(--hairline); display:flex; flex-direction:column; gap:2px; }
.s-ladder > div.pop { border-top-color:var(--brand); }
.s-dots { display:flex; gap:8px; }
.s-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--hairline); cursor:pointer; }
.s-dots button.on { background:var(--brand); }
.s-iconbtn { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--control-border); border-radius:6px; background:var(--surface-100); cursor:pointer; }
.s-iconbtn:hover { background:var(--surface-200); }

@media (prefers-reduced-motion: reduce) { .s * { transition:none !important; animation:none !important; } }

/* Editorial statement: one sentence in two tones, with a ruled label column. Replaces the title-left / paragraph-right rows. */
.s-stmt { display:block; }
.s-stmt > .s-overline { display:block; margin-bottom:18px; }
.s-stmt-h { font-size:48px; line-height:56px; font-weight:500; letter-spacing:-.025em; max-width:1000px; }
.s-stmt-h em { font-style:normal; color:var(--ink-3); }
.s-black .s-stmt-h em { color:var(--band-3); }
.s-stmt.hero .s-stmt-h { font-size:64px; line-height:68px; letter-spacing:-.03em; }
.s-stmt.hero .s-stmt-h em { display:block; margin-top:24px; max-width:640px; font-size:22px; line-height:32px; font-weight:400; letter-spacing:0; color:var(--ink-2); }
.s-black .s-stmt.hero .s-stmt-h em { color:var(--band-2); }
.s-stmt .s-stmt-act { margin-top:28px; }


/* ===== Real-site layer ===== */
html { scroll-behavior:smooth; }
body.s { margin:0; }
.s-pat::before { -webkit-mask:url(img/pattern-mask.svg) repeat top left; mask:url(img/pattern-mask.svg) repeat top left; }
.s-skip { position:absolute; left:-9999px; top:8px; z-index:200; background:#fff; color:#000; padding:10px 16px; font-weight:600; border:2px solid var(--brand); }
.s-skip:focus { left:8px; }
.s-btn svg { width:16px; height:16px; }
.s-btn.sm { height:32px; padding:0 14px; }

/* Page-specific parts */
.a-tl{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:28px 0;border-top:1px solid var(--hairline)}
.a-tl:last-child{border-bottom:1px solid var(--hairline)}
.a-val{padding:28px 32px 28px 0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--hairline)}
.a-val:nth-child(even){padding:28px 0 28px 32px;border-left:1px solid var(--hairline)}
.d-chip{height:36px;padding:0 16px;border:1px solid var(--hairline);border-radius:6px;background:var(--surface-100);color:var(--ink-2);font:500 14px/20px 'Inter',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center}
.d-chip:hover{background:var(--surface-200);color:var(--ink)}
.d-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.d-row{display:grid;grid-template-columns:44px minmax(0,1fr) 160px 100px auto;gap:24px;align-items:center;padding:20px 0;border-top:1px solid var(--hairline)}
.d-row:last-child{border-bottom:1px solid var(--hairline)}
.d-ico{width:44px;height:44px;border-radius:6px;border:1px solid var(--hairline);display:grid;place-items:center;background:var(--surface-100);color:var(--ink)}
.d-ico svg{width:20px;height:20px}
.f-col h4{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.f-col a{font-size:14px;line-height:20px;color:var(--ink-2)}
.f-col a:hover{color:var(--ink)}
.f-chan{display:flex;flex-direction:column;gap:4px;padding:20px 24px;background:var(--surface-100)}
.f-chan b{font-size:16px;line-height:22px;font-weight:600;color:var(--ink)}
.f-chan span{font-size:13px;line-height:18px;color:var(--ink-2)}
.h-cat{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;height:44px;padding:0 12px;border:0;border-left:2px solid transparent;background:transparent;color:var(--ink-2);font-weight:500;font-size:15px;text-align:left;cursor:pointer}
.h-cat:hover{background:var(--surface-200)}
.h-cat.on{border-left-color:var(--brand);color:var(--ink);font-weight:600;background:var(--surface-200)}
.h-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--hairline)}
.h-line:last-child{border-bottom:1px solid var(--hairline)}
.i-row{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(0,1fr);gap:32px;padding:24px 0;border-top:1px solid var(--hairline)}
.i-row:last-child{border-bottom:1px solid var(--hairline)}
.p-def{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--hairline);font-size:15px;line-height:22px}
.p-def b{font-weight:600}.p-def span{color:var(--ink-2)}
.p-def:last-child{border-bottom:1px solid var(--hairline)}
[hidden]{display:none !important}

/* Kenya map (animated) */
.km{position:relative;width:100%;font-family:'Inter',system-ui,sans-serif}
.km.dark{--km-pin:#33BAFF;--km-ring:rgba(51,186,255,.55);--km-dot:#A3A3A3;--km-lab:#D4D4D4;--km-sub:#8A8A8A;--km-line:rgba(51,186,255,.55)}
.km.light{--km-pin:#0073A6;--km-ring:rgba(0,115,166,.5);--km-dot:#737373;--km-lab:#171717;--km-sub:#737373;--km-line:rgba(0,115,166,.55)}
.km-stage{position:relative;width:100%}
.km-stage>img{display:block;width:100%;height:auto}
.km-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.km-r{fill:none;stroke:var(--km-line);stroke-width:1.4;stroke-dasharray:3 7;animation:km-flow 1.8s linear infinite}
.km-t{fill:var(--km-pin)}
.km-p{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--km-pin)}
.km-p::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--km-ring);animation:km-ping 2.6s ease-out infinite;animation-delay:var(--dl,0s)}
.km-d{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--km-dot);animation:km-twinkle 3s ease-in-out infinite}
.km-h{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--km-pin);background:transparent;box-sizing:border-box}
.km-h::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--km-pin)}
.km-l{position:absolute;font-size:12px;line-height:16px;font-weight:600;color:var(--km-lab);white-space:nowrap}
.km-q{font-weight:500;font-size:11px;color:var(--km-sub)}
.km-hl{color:var(--km-pin)}
.km-leg{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:12px;line-height:16px;font-weight:500;color:var(--km-sub)}
.km-leg span{display:inline-flex;align-items:center;gap:8px}
.km-leg i{display:inline-block;border-radius:50%}
@keyframes km-ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(3.4);opacity:0}}
@keyframes km-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes km-flow{to{stroke-dashoffset:-20}}
.km.still *,.km.still *::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.km *,.km *::after{animation:none!important}}

/* Top navigation */
.n-bar{position:sticky;top:0;z-index:60;--nav-h:72px;--logo-h:34px;background:var(--band);will-change:transform}
html{scroll-padding-top:72px}
.n-ann{overflow:hidden;height:40px}
.n-main{height:var(--nav-h);display:flex;align-items:center;gap:24px}
.n-logo{height:var(--logo-h);width:auto}
main{overflow-x:clip}
.n-w{position:relative;height:var(--nav-h);display:flex;align-items:center}
.n-link{position:relative;display:inline-flex;align-items:center;gap:6px;height:var(--nav-h);padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--band-2);font:500 14px/20px 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.n-link:hover{color:#fff}
.n-open .n-link{color:var(--band-brand-text)}
.n-open .n-ul{transform:scaleX(1)}
.n-link.n-on{color:#fff}
.n-link svg{width:14px;height:14px}
.n-ul{position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--band-brand-text);transform:scaleX(0);transform-origin:0 50%}
.n-on .n-ul{transform:scaleX(1)}
.nm-panel{position:absolute;top:100%;z-index:3;background:var(--surface-100);color:var(--ink);border:1px solid var(--ink);border-radius:0;box-shadow:var(--shadow-float);text-align:left}
.nm-wide{left:40px;right:40px;max-width:1200px;margin:0 auto}
.nm-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr)}
.nm-col+.nm-col{border-left:1px solid var(--hairline)}
.nm-head{display:flex;gap:10px;padding:18px 24px 14px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.nm-head b{font-weight:600;color:var(--ink)}
.nm-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:12px;align-items:start;padding:20px 24px;border-top:1px solid var(--hairline);color:var(--ink);overflow:hidden}
.nm-wipe{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.nm-no,.nm-txt,.nm-arr{position:relative}
.nm-no{font-size:12px;line-height:20px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nm-txt b{display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)}
.nm-txt em{display:block;font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2);margin-top:4px}
.nm-arr{width:16px;height:16px;margin-top:2px;color:var(--ink)}
.nm-feat{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--band);color:var(--on-band)}
.nm-feat b{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.nm-feat p{margin:0;font-size:14px;line-height:20px;color:var(--band-2)}
.nm-shot{border:1px solid #404040;border-radius:0;overflow:hidden;height:104px;background:#fff}
.nm-shot img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;transform-origin:0 0}
.nm-foot{display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--ink);background:var(--surface-200);font-size:13px;line-height:18px;color:var(--ink-2)}
.nm-foot a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nm-res{left:0;width:420px}
.n-burger{display:none;width:44px;height:44px;border:1px solid #404040;border-radius:6px;background:transparent;color:#fff;cursor:pointer;place-items:center}
.n-burger svg{width:20px;height:20px}
.n-drawer{background:var(--band);border-bottom:1px solid var(--band-line)}
.n-drawer .m-nl{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--band-line);color:#fff;font-size:17px;font-weight:500}


/* FAQ icons */
.s-faq .q .i-minus { display:none; }
.s-faq .q[aria-expanded="true"] .i-plus { display:none; }
.s-faq .q[aria-expanded="true"] .i-minus { display:block; }
.s-faq h3 { font-size:inherit; line-height:inherit; font-weight:inherit; }
.s-faq .a[hidden] { display:none; }
.s-seg button[aria-selected="true"] { background:var(--surface-100); border-color:var(--hairline); color:var(--ink); }
.q-slide[hidden] { display:none; }
.s-price-wrap { -webkit-overflow-scrolling:touch; }
.s-price { min-width:720px; }
.nm-foot-end { margin-left:auto; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .n-links, .n-sms, .n-signin, .nm-panel, .n-announce span:nth-child(n+3) { display:none !important; }
  .n-burger { display:grid; }
  .n-cta { display:none; }
}
@media (max-width: 1024px) {
  .s-wrap { padding-left:28px; padding-right:28px; }
  .s-sec { padding:72px 0; }
  .s-xl { font-size:56px; line-height:60px; }
  .s-lg { font-size:44px; line-height:48px; }
  .s-md { font-size:34px; line-height:40px; }
  .s-quote { font-size:30px; line-height:38px; }
  .s-stmt-h { font-size:38px; line-height:46px; }
  .s-stmt.hero .s-stmt-h { font-size:48px; line-height:52px; }
  .s-foot-wrap .f-grid { grid-template-columns:1fr 1fr 1fr !important; }
  .s-led { grid-template-columns:1fr; gap:16px; }
  .s-stats { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .s-flow { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:32px; }
  .s-flow > div:nth-child(3) { padding-left:0; border-left:0; }
  .s-ladder { grid-template-columns:repeat(2, minmax(0,1fr)) !important; row-gap:24px; }
  .s-path { grid-template-columns:1fr; }
  .s-path > a + a { border-left:0; border-top:1px solid var(--hairline); }
  .s-route { grid-template-columns:48px minmax(0,1fr) 24px; }
  .s-route > :nth-child(3) { grid-column:2; }
  .s-step { grid-template-columns:72px minmax(0,1fr); }
  .s-step > :nth-child(3) { grid-column:2; }
}
@media (max-width: 900px) {
  /* The pages lay out with inline grids; below this width every multi-column grid stacks. */
  .s [style*="grid-template-columns"]:not(.keep2):not(.s-ladder):not(.s-stats) { grid-template-columns:minmax(0,1fr) !important; }
  .s [style*="grid-template-columns"].keep2 { grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .s [style*="gap:64px"], .s [style*="gap:48px"] { gap:32px !important; }
  .s [style*="position:sticky"] { position:static !important; }
  .s-wrap[style*="padding:96px"], .s-wrap[style*="padding-top:80px"], .s-wrap[style*="padding-top:96px"] { padding-top:48px !important; padding-bottom:48px !important; }
  .s-wrap[style*="padding-bottom:80px"] { padding-bottom:40px !important; }
  .s [style*="padding-bottom:80px"], .s [style*="padding-bottom:96px"] { padding-bottom:24px !important; }
  .s [style*="border-left:1px solid var(--hairline)"] { border-left:0 !important; padding-left:0 !important; }
  .s [style*="width:520px"] { width:100% !important; }
  .q-card { padding:28px !important; min-height:0 !important; }
  .q-slide { flex-direction:column; gap:28px !important; }
  .q-img { width:100% !important; height:220px; }
  .i-row { grid-template-columns:1fr; gap:10px; }
  .a-tl { grid-template-columns:1fr; gap:8px; }
  .a-val, .a-val:nth-child(even) { padding:24px 0; border-left:0; }
  .d-row { grid-template-columns:44px minmax(0,1fr); }
  .d-row > :nth-child(n+3) { grid-column:2; }
  .p-def { grid-template-columns:1fr; gap:4px; }
  .h-line { grid-template-columns:1fr; gap:14px; }
  .s-foot-wrap .f-grid { grid-template-columns:1fr 1fr !important; gap:36px !important; }
  .s-foot-wrap .f-grid > div:first-child { grid-column:1 / -1; }
  .s-foot-wrap .f-legal { flex-direction:column; }
  .s-btn.lg { height:48px; }
}
@media (max-width: 600px) {
  .s-wrap { padding-left:20px; padding-right:20px; }
  .s-sec { padding:56px 0; }
  .s-xl { font-size:40px; line-height:44px; }
  .s-xl[style*="font-size:64px"] { font-size:40px !important; line-height:44px !important; }
  .s-lg { font-size:34px; line-height:38px; }
  .s-md { font-size:28px; line-height:34px; }
  .s-lead { font-size:17px; line-height:26px; }
  .s-quote { font-size:24px; line-height:32px; }
  .s-stmt-h { font-size:28px; line-height:36px; }
  .s-stmt.hero .s-stmt-h { font-size:36px; line-height:40px; }
  .s-stmt.hero .s-stmt-h em { font-size:18px; line-height:28px; }
  .s-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .s-stat, .s-stat + .s-stat { padding:20px 12px 20px 0; border-left:0; }
  .s-flow { grid-template-columns:1fr; }
  .s-flow > div + div { padding-left:0; border-left:0; padding-top:24px; border-top:1px solid var(--hairline); }
  .s-ladder { grid-template-columns:1fr !important; }
  .s-win-bar .url { display:none; }
  .s-minis > div { grid-template-columns:1fr; }
  .s h2.s-lg[style], .s h1[style] { word-break:normal; }
  .s-foot-wrap .f-grid { grid-template-columns:1fr 1fr !important; }
  .s-btn.lg { padding:0 20px; }
  .s [style*="display:flex; gap:12px;"] { flex-wrap:wrap; }
  .s [style*="justify-content:space-between"][style*="align-items:center"] { flex-direction:column; align-items:flex-start !important; }
}

@media (max-width: 900px) {
  .chip-a { width:46% !important; left:auto !important; right:0 !important; top:10% !important; }
  .chip-b { width:42% !important; left:0 !important; top:78% !important; }
  .tour-chip { right:0 !important; width:min(340px, 80%) !important; }
}

@media (max-width: 700px) {
  .n-announce { height:auto !important; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; }
  .n-announce a { display:none; }
}

@media (max-width: 900px) {
  .hero-phones { height:auto !important; max-height:340px; justify-content:center !important; align-items:flex-end !important; }
  .hero-phones img { height:auto !important; margin-bottom:-14px !important; }
  .hero-phones .hp-1 { width:31% !important; margin-right:-4% !important; }
  .hero-phones .hp-2 { width:40% !important; }
  .hero-phones .hp-3 { width:36% !important; margin-left:-6% !important; }
  .s-led-list > div { grid-template-columns:120px minmax(0,1fr); gap:16px; }
}
@media (max-width: 600px) {
  .s-led-list > div { grid-template-columns:1fr; gap:4px; }
}


/* Footer: contact directory */
.f-talk { padding-top:64px; }
.f-talk-grid { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px; align-items:start; }
.s .f-lines { margin:0; padding:0; list-style:none; border-bottom:1px solid var(--hairline); }
.f-line { position:relative; display:grid; grid-template-columns:110px minmax(0,1fr) auto 20px; gap:24px; align-items:center; padding:22px 20px; border-top:1px solid var(--hairline); color:var(--ink); overflow:hidden; }
.f-line > *:not(.nm-wipe) { position:relative; }
.f-line .nm-wipe { background:var(--ink); }
.f-k { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.f-v { font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.015em; color:var(--ink); }
.f-n { font-size:14px; line-height:20px; color:var(--ink-2); text-align:right; }

@media (max-width: 1024px) {
  .est { grid-template-columns:1fr; gap:48px; }
  .f-talk-grid { grid-template-columns:1fr; gap:28px; }
}
@media (max-width: 700px) {
  .est-num input { font-size:44px; line-height:48px; width:150px; }
  .est-prices dd { font-size:44px; line-height:48px; }
  .est-tier, .est-prices, .est-note, .est-foot { padding-left:20px; padding-right:20px; }
  .f-line { grid-template-columns:minmax(0,1fr) 20px; gap:4px 12px; padding:18px 12px; }
  .f-k { grid-column:1; } .f-v { grid-column:1; font-size:24px; } .f-n { grid-column:1; text-align:left; }
  .f-line .nm-arr { grid-column:2; grid-row:1 / span 3; }
  .mq-i { font-size:17px; }
  .mq-d { margin:0 24px; }
}


/* Rotating hero figure (portal) */
.rot { display:flex; flex-direction:column; align-items:center; gap:18px; padding:40px 0 44px; }
.rot-stage { position:relative; width:min(300px,100%); aspect-ratio:558 / 947; }
.rot-item { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.rot-item { z-index:1; }
.rot-item + .rot-item { opacity:0; }
.rot-man { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none; }
.rot-tabs { display:flex; gap:20px; width:min(420px,100%); }
.rot-btn { flex:1 1 0; min-width:0; text-align:left; padding:0; border:0; background:none; cursor:pointer; color:var(--band-3); font:500 13px/18px 'Inter',system-ui,sans-serif; }
.rot-btn:hover, .rot-btn.on { color:#fff; }
.rot-bar { display:block; height:2px; background:#404040; margin-bottom:10px; }
.rot-bar b { display:block; height:100%; background:var(--band-brand-text); transform-origin:0 50%; transform:scaleX(0); }
.rot-btn.on .rot-bar { background:#404040; }
.rot-btn.on:not(:has(b[style*="scaleX"])) .rot-bar b { transform:scaleX(1); }

/* Tilted product windows and their dot decoration */
[data-tilt] { will-change:transform; }
.float-chip { position:absolute; left:-18px; bottom:-26px; width:230px; height:auto; box-shadow:var(--shadow-float); border-radius:8px; }

/* Integrations hero: columns of tool names drifting up and down */
.pill-bg { position:absolute; top:0; right:0; bottom:0; width:46%; overflow:hidden; display:flex; gap:14px; padding:0 24px; z-index:-1; }
.pill-col { flex:1 1 0; min-width:0; overflow:hidden; }
.pill-run { display:flex; flex-direction:column; gap:12px; animation:pill-up var(--d,40s) linear infinite; }
.pill-col.down .pill-run { animation-name:pill-down; }
.pill { display:block; padding:10px 14px; border:1px solid #333; background:#0a0a0a; color:var(--band-2); font-size:14px; line-height:20px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
@keyframes pill-up { to { transform:translateY(-50%); } }
@keyframes pill-down { from { transform:translateY(-50%); } to { transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pill-run { animation:none; } }
@media (max-width: 900px) {
  .pill-bg { opacity:.35; width:100%; }
  .deco-dots, .loop-line { display:none; }
  .float-chip { width:44%; left:auto; right:8px; bottom:-18px; }
  .rot-stage { width:min(300px,80%); }
}


/* Facts marquee: a brand-blue ticker strip, same width as the content */
.mq-wrap { padding-bottom:32px; }
.mq-box { overflow:hidden; background:var(--brand); border:1px solid #1a8bbd; }
.mq-track { display:flex; width:max-content; animation:mq-run 44s linear infinite; }
.mq-box:hover .mq-track, .lw-view:hover .lw-track { animation-play-state:paused; }
.mq-set { display:flex; align-items:center; flex:none; }
.mq-i { display:flex; align-items:baseline; gap:12px; padding:22px 0; white-space:nowrap; color:#fff; }
.mq-i b { font-size:40px; line-height:44px; font-weight:600; letter-spacing:-.025em; }
.mq-i em { font-style:normal; font-size:16px; line-height:22px; font-weight:500; color:rgba(255,255,255,.88); }
.mq-d { width:10px; height:10px; margin:0 40px; background:#fff; flex:none; }
@keyframes mq-run { to { transform:translateX(-50%); } }

/* Logo wall: two ruled rows, one drifting left, one right */
.lw { border:1px solid var(--ink); }
.lw-row { display:grid; grid-template-columns:260px minmax(0,1fr); }
.lw-row + .lw-row { border-top:1px solid var(--ink); }
.lw-label { display:flex; flex-direction:column; gap:6px; justify-content:center; padding:24px; border-right:1px solid var(--ink); background:var(--surface-200); }
.lw-label b { font-size:17px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
.lw-view { overflow:hidden; display:flex; align-items:center; background:var(--surface-100); }
.lw-track { display:flex; width:max-content; animation:lw-left 52s linear infinite; }
.lw-track.lw-right { animation-name:lw-right; animation-duration:46s; }
.lw-set { display:flex; align-items:center; flex:none; }
.lw-name { padding:30px 0; font-size:30px; line-height:36px; font-weight:500; letter-spacing:-.02em; white-space:nowrap; color:var(--ink); }
.lw-sq { width:8px; height:8px; margin:0 34px; background:var(--brand); flex:none; }
.lw-logo { display:flex; align-items:center; justify-content:center; width:190px; height:92px; border-right:1px solid var(--hairline); flex:none; }
.lw-logo img { height:34px; width:auto; max-width:130px; object-fit:contain; filter:grayscale(1); opacity:.8; transition:filter .25s, opacity .25s; }
.lw-logo:hover img { filter:none; opacity:1; }
/* Kopo Kopo's mark is pale cyan: darken it in the grey state so it reads on the light band */
.lw-logo--pale img { filter:grayscale(1) brightness(.42); opacity:.85; }
.lw-logo--pale:hover img { filter:none; opacity:1; }
.logo-pale { filter:brightness(.62) saturate(1.6); }
@keyframes lw-left { to { transform:translateX(-50%); } }
@keyframes lw-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track, .lw-track { animation:none; width:auto; flex-wrap:wrap; }
  .mq-set[aria-hidden="true"], .lw-set[aria-hidden="true"] { display:none; }
  .mq-set, .lw-set { flex-wrap:wrap; }
  .mq-i { padding:14px 0; } .mq-d { margin:0 24px; }
}
@media (max-width: 900px) {
  .lw-row { grid-template-columns:1fr; }
  .lw-label { border-right:0; border-bottom:1px solid var(--ink); padding:16px 20px; }
  .lw-name { font-size:24px; padding:22px 0; }
  .lw-logo { width:150px; height:76px; }
  .mq-i b { font-size:30px; line-height:34px; } .mq-i em { font-size:14px; } .mq-d { margin:0 26px; }
}

/* Price estimator */
.est { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:96px; align-items:start; }
.est-left { display:flex; flex-direction:column; gap:22px; }
.est-control { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.est-num { display:flex; align-items:baseline; gap:14px; }
.est-num input { width:150px; border:0; border-bottom:2px solid var(--ink); border-radius:0; background:transparent; font:500 44px/48px 'Inter',system-ui,sans-serif; letter-spacing:-.03em; color:var(--ink); padding:0 0 4px; -moz-appearance:textfield; }
.est-num input::-webkit-outer-spin-button, .est-num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.est-num input:focus-visible { outline:2px solid var(--focus); outline-offset:6px; }
.est-num span { font-size:16px; color:var(--ink-2); }
.est-rail { position:relative; padding-bottom:30px; }
.est-rail input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; cursor:pointer; }
.est-rail input[type=range]::-webkit-slider-runnable-track { height:2px; background:var(--ink); }
.est-rail input[type=range]::-moz-range-track { height:2px; background:var(--ink); }
.est-rail input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-10px; background:var(--brand); border:2px solid var(--ink); border-radius:0; }
.est-rail input[type=range]::-moz-range-thumb { width:18px; height:18px; background:var(--brand); border:2px solid var(--ink); border-radius:0; }
.est-rail input[type=range]:focus-visible { outline:2px solid var(--focus); outline-offset:6px; }
.est-ticks { position:absolute; left:11px; right:11px; top:20px; height:26px; pointer-events:none; }
.est-ticks i { position:absolute; top:0; width:1px; height:9px; background:var(--ink-3); }
.est-ticks i span { position:absolute; top:12px; left:0; transform:translateX(-50%); font-style:normal; font-size:12px; line-height:16px; font-weight:500; color:var(--ink-3); }
.est-out { border:1px solid var(--ink); background:var(--surface-100); }
.est-out .est-total { display:flex; flex-direction:column; gap:6px; padding:28px 32px 20px; }
.est-out .est-total b { font-size:72px; line-height:76px; font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.est-out .est-prices { margin:0; padding:0 32px 8px; }
.est-out .est-prices > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:baseline; padding:18px 0; border-top:1px solid var(--hairline); }
.est-out .est-prices dt { font-size:16px; font-weight:600; color:var(--ink); }
.est-out .est-prices dt small { display:block; margin-top:2px; font-size:13px; line-height:18px; font-weight:400; color:var(--ink-2); }
.est-out .est-prices dd { margin:0; font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.est-out .est-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 32px; background:var(--band); color:var(--band-2); font-size:14px; line-height:20px; }
.est-foot a { display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:600; }
.est-foot a:hover { text-decoration:underline; text-underline-offset:3px; }

/* Footer: Twachanga */
.f-sms { display:flex; flex-direction:column; gap:12px; max-width:200px; color:var(--ink-2); font-size:13px; line-height:18px; }
.f-sms img { width:120px; height:auto; }
.f-sms b { display:block; margin-top:8px; color:var(--ink); font-weight:600; font-size:14px; }
.f-sms:hover b { text-decoration:underline; text-underline-offset:3px; }

/* Nav: the page you are on keeps the black row */
.nm-item.is-current .nm-wipe { transform:scaleX(1); }
.nm-item.is-current .nm-txt b, .nm-item.is-current .nm-txt em, .nm-item.is-current .nm-no { color:#fff; }
.nm-item.is-current .nm-arr { color:var(--band-brand-text); }

@media (max-width: 1024px) { .est { grid-template-columns:1fr; gap:48px; } }
@media (max-width: 700px) {
  .est-num input { font-size:36px; line-height:40px; width:120px; }
  .est-out .est-total b { font-size:48px; line-height:52px; }
  .est-out .est-total, .est-out .est-prices, .est-out .est-foot { padding-left:20px; padding-right:20px; }
}

.lw-img { display:flex; align-items:center; flex:none; height:72px; padding:0; }
.lw-img img { height:72px; width:auto; border:1px solid var(--hairline); }
.lw-img-tile img { height:72px; }
.lw-name + .lw-sq, .lw-img + .lw-sq { margin:0 34px; }

/* The through-line: one SVG drawn by GSAP ScrollTrigger + DrawSVG, routed through the page gutters */
.s .site-line { position:absolute; left:0; top:0; width:100%; z-index:0; pointer-events:none; overflow:visible; }
.s .site-line path { fill:none; stroke-width:4px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
main { position:relative; }
main > section, main > header { position:relative; }
@media (max-width: 1279px), (prefers-reduced-motion: reduce) { .site-line { display:none; } }

/* Footer: the page you are on */
.f-col a[aria-current="page"] { color:var(--ink); font-weight:600; box-shadow:inset 3px 0 0 var(--brand); padding-left:12px; margin-left:-12px; }

/* Customer logos: grey until hovered, like the tool logos */
.lw-img img { filter:grayscale(1); opacity:.8; transition:filter .25s, opacity .25s; }
.lw-img:hover img { filter:none; opacity:1; }


/* Bright decorated frames for real screenshots: pastel panel, chunky zigzag, ghost cards and skeleton "loading" blocks hiding part of the real content */
.shot { position:relative; isolation:isolate; padding:34px 34px 38px 0; }
.shot::before { content:''; position:absolute; inset:0 -30px 0 -34px; background:var(--tint); border-radius:8px; z-index:-3; }
.shot-zig { position:absolute; right:-70px; top:-40px; width:170px; height:198px; background:var(--tone); -webkit-mask:url(img/zig.svg) no-repeat center / contain; mask:url(img/zig.svg) no-repeat center / contain; z-index:-2; }
.shot-ghost { position:absolute; z-index:-1; background:var(--surface-100); border:1px solid var(--hairline); border-radius:8px; box-shadow:var(--shadow-float); padding:16px; display:flex; flex-direction:column; gap:10px; }
.shot-ghost b, .shot-skel b { display:block; height:10px; border-radius:6px; background:#E6E6E6; animation:sk-pulse 2.2s ease-in-out infinite; }
.shot-ghost b:nth-child(2n), .shot-skel b:nth-child(2n) { width:72%; animation-delay:.3s; }
.shot-ghost b:nth-child(3n), .shot-skel b:nth-child(3n) { width:48%; animation-delay:.6s; }
.shot-ghost.g-l { left:-26px; top:70px; width:32%; height:52%; }
.shot-ghost.g-r { right:-4px; top:84px; width:30%; height:46%; transform:translateX(14%); }
.shot-ghost.g-b { left:12%; bottom:-6px; width:34%; height:34px; padding:12px 16px; flex-direction:row; }
.shot-ghost.g-b b { height:8px; flex:1; width:auto; }
.shot .s-win { position:relative; margin-left:34px; }
.shot-skel { position:absolute; background:var(--surface-100); border:1px solid var(--hairline); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:10px; width:36%; height:30%; box-shadow:var(--shadow-float); }
.sk-br { right:4%; bottom:5%; } .sk-bl { left:4%; bottom:5%; } .sk-tr { right:4%; top:22%; }
@keyframes sk-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .shot-ghost b, .shot-skel b { animation:none; } }
@media (max-width: 900px) { .shot { padding:18px 0 22px; } .shot::before { inset:0 -12px; } .shot-zig { width:90px; height:105px; right:-14px; top:-20px; } .shot-ghost { display:none; } .shot .s-win { margin-left:0; } .sk-tr, .sk-bl { display:none; } }

.n-drawer { max-height:calc(100vh - var(--nav-h) - 16px); overflow-y:auto; }
.n-bar.is-compact { box-shadow:0 1px 0 var(--band-line); }

/* Phones in the two-portals section: whole device, centred; the hand one rises from the bottom rule */
.two-phone { margin-top:28px; height:460px; display:flex; justify-content:center; align-items:center; }
.two-phone img { height:430px; width:auto; max-width:100%; }
.two-phone.is-hand { align-items:flex-end; justify-content:flex-end; height:500px; margin-bottom:-41px; overflow:hidden; }
.two-phone.is-hand img { height:500px; display:block; }
@media (max-width: 900px) { .two-phone, .two-phone img, .two-phone.is-hand img { height:380px; } .two-phone.is-hand { height:420px; margin-bottom:-28px; } .two-phone.is-hand img { height:420px; } }

/* Kenya map (canvas) */
.km-canvas { display:block; width:100%; height:auto; aspect-ratio:640 / 811; }
.km-labels { position:absolute; inset:0; pointer-events:none; }
.km .km-l { transition:opacity .7s ease var(--ld, 0s); }
.km.km-armed:not(.is-on) .km-l { opacity:0; }