/* Enzz website — one stylesheet for every page.
   Colours: night ink on cool white; one colour per product, used only for that product's marks.
   Type: Newsreader (headlines), Manrope (text) — the original site's fonts, both self-hosted. */

@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  --night:#0D1B2E; --night-2:#16284A; --night-line:#2A3E62;
  --ink:#14223A; --muted:#4D5C72; --faint:#647287;
  --paper:#FFFFFF; --surface:#FFFFFF; --haze:#EEF2F5; --haze-2:#E2E8EE; --line:#D6DEE6; --top-bg:rgba(255,255,255,.94);
  --live-bg:#DDF3E7; --live-ink:#0E6A40; --dev-bg:#FFF1D6; --dev-ink:#7A5200; --safe-wash:#E8F6F4; --stage-live:#F4FBF7; --stage-dev:#FFFBF0; --below-bg:#FDE8E4; --below-ink:#9A2E18;
  --teal:#0B7A72; --teal-bright:#16B3A6;
  /* products: -c is the mark colour, -ink is safe for small text on white */
  --taalo:#4C4AD9;    --taalo-ink:#3F3DC4;    --taalo-wash:#ECEBFC;
  --aois:#E3A008;     --aois-ink:#8A5D00;     --aois-wash:#FDF3DA;
  --biashara:#13804F; --biashara-ink:#0F6E44; --biashara-wash:#E3F3EA;
  --pata:#EC5B16;     --pata-ink:#B8440C;     --pata-wash:#FDEBE1;
  --agent:#A93D86;    --agent-ink:#93306F;    --agent-wash:#F7E7F1;
  --radius:18px; --radius-s:10px;
  --shell:none; --gutter:clamp(20px,4vw,80px);
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --text:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--text);overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px;border-radius:4px}
::selection{background:#BFEDE8;color:#0D1B2E}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--ink);font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.7rem,6vw,5.2rem);letter-spacing:-.02em;font-weight:500;line-height:1.04}
h2{font-size:clamp(2rem,3.8vw,3.1rem);letter-spacing:-.015em}
h3{font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.2;font-variation-settings:"opsz" 32}
h4{font-size:1.15rem;line-height:1.3;letter-spacing:0;font-weight:600;font-variation-settings:"opsz" 20}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding-left:1.2em}
.skip{position:absolute;left:-999px;top:8px;background:var(--night);color:#fff;padding:10px 16px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.shell{width:100%;margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.6;color:var(--muted);max-width:40em}
.measure{max-width:40em}
.muted{color:var(--muted)}
.small{font-size:.94rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .2s}
/* The frosted background sits on its own layer: a backdrop-filter on .top itself would trap the fixed phone menu inside the 72px bar */
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--top-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.top.menu-open::before{background:var(--paper)}
.top.scrolled{border-bottom-color:var(--line)}
.top .shell{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 1.4rem/1 var(--text);letter-spacing:-.03em;margin-right:auto}
.brand svg{width:34px;height:34px}
.nav{display:flex;align-items:center;gap:4px}
.nav>a,.nav>.dd>button{font:700 .98rem/1 var(--text);color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:999px;background:none;border:0;cursor:pointer}
.nav>a:hover,.nav>.dd>button:hover,.nav>a[aria-current=page]{background:var(--haze)}
.dd{position:relative}
.dd>button::after{content:"";display:inline-block;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);margin-left:8px}
.dd-panel{position:absolute;left:-12px;top:calc(100% + 8px);width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px -24px rgba(13,27,46,.35);padding:10px;display:none}
.dd.open .dd-panel{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-panel a{display:flex;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.dd-panel a:hover{background:var(--haze)}
.dd-panel b{display:block;font:700 1rem/1.25 var(--text)}
.dd-panel small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:2px}
.dd-panel .all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;font-weight:700;color:var(--teal)}
.dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:5px;background:var(--c,var(--teal))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1rem/1.1 var(--text);padding:14px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-ink{background:var(--night);color:#fff}
.btn-ink:hover{background:var(--night-2)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#09645E}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--night)}
.btn-light:hover{background:var(--haze)}
.btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--night)}
.btn-s{padding:10px 16px;font-size:.94rem}
.btn svg{width:18px;height:18px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.signin{font:700 .95rem/1 var(--text);color:var(--biashara-ink);text-decoration:none;padding:10px 6px;white-space:nowrap}
.signin:hover{text-decoration:underline}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;content:"";transition:transform .2s}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
.top.menu-open .menu-btn span{background:transparent}
.top.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.top.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1100px){.top .signin{display:none}}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  .top .head-cta{display:none}
  .nav{position:fixed;top:72px;left:0;right:0;height:calc(100vh - 72px);height:calc(100dvh - 72px);overscroll-behavior:contain;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 40px;overflow-y:auto;display:none}
  .top.menu-open .nav{display:flex}
  .nav>a,.nav>.dd>button{font-size:1.15rem;padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line);text-align:left;width:100%}
  .dd-panel{position:static;width:auto;box-shadow:none;border:0;padding:0 0 8px;display:none}
  .dd.open .dd-panel{display:block}
  .nav .mobile-cta{display:flex;margin-top:20px}
}
@media (min-width:961px){.nav .mobile-cta{display:none}}

/* ---------- status ---------- */
.status{display:inline-flex;align-items:center;gap:7px;font:700 .82rem/1 var(--text);padding:6px 11px 6px 9px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.status::before{content:"";width:8px;height:8px;border-radius:50%}
.status-live{background:var(--live-bg);color:var(--live-ink)}.status-live::before{background:#16A35F;box-shadow:0 0 0 3px rgba(22,163,95,.18)}
.status-dev{background:var(--dev-bg);color:var(--dev-ink)}.status-dev::before{border:2px solid #C98A00;background:transparent;width:9px;height:9px}
.status-planned{background:var(--haze);color:var(--muted)}.status-planned::before{border:2px dashed var(--faint);background:transparent;width:9px;height:9px}
.on-dark .status-live{background:rgba(22,163,95,.18);color:#8FE0B5}
.on-dark .status-dev{background:rgba(227,160,8,.16);color:#F5CF72}
.on-dark .status-planned{background:rgba(255,255,255,.08);color:#B8C4D6}

/* ---------- sections ---------- */
.band{padding:clamp(64px,9vw,120px) 0}
.band-tight{padding:clamp(48px,6vw,80px) 0}
.band-haze{background:var(--haze)}
.band-night{background:var(--night);color:#DCE4EF}
.band-night h1,.band-night h2,.band-night h3,.band-night h4{color:#fff}
.band-night a:not(.btn){color:#7FE0D5}
.band-night .muted,.band-night .lede{color:#AFBDD0}
.head{max-width:46rem;margin-bottom:clamp(32px,4vw,52px)}
.head h2+p,.head h2+.lede{margin-top:18px}
.kicker{font:700 1rem/1.3 var(--text);color:var(--teal);margin:0 0 14px}
.band-night .kicker{color:#7FE0D5}
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- hero (home) ---------- */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,96px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{max-width:11ch}
.hero .lede{margin-top:24px}
.hero-note{margin-top:22px;font-size:.95rem;color:var(--muted)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero h1{max-width:13ch}}

/* the loop */
.loop{position:relative;width:100%;max-width:560px;margin:44px auto 0;aspect-ratio:1/1}
.loop svg.track{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop .arc{fill:none;stroke-linecap:round}
.loop .arc.planned{stroke-dasharray:.01 2.7}
.loop .stop{position:absolute;transform:translate(-50%,-29px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;text-decoration:none;color:var(--ink);width:150px}
.loop .stop.label-above{transform:translate(-50%,calc(-100% + 29px))}
.loop .stop.label-above .pin{order:3}
.loop .stop .pin{width:58px;height:58px;border-radius:50%;background:var(--surface);border:6px solid var(--c);display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(13,27,46,.45);transition:transform .2s}
.loop .stop .pin i{width:16px;height:16px;border-radius:50%;background:var(--c)}
.loop .stop:hover .pin,.loop .stop:focus-visible .pin,.loop .stop.active .pin{transform:scale(1.12)}
.loop .stop b{font:600 1.25rem/1.1 var(--display);letter-spacing:0;background:var(--paper);padding:2px 8px;border-radius:8px}
.loop .stop span.what{font-size:.86rem;color:var(--muted);line-height:1.25;background:var(--paper);padding:1px 8px;border-radius:8px;margin-top:-6px}
.loop .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1/1;border-radius:50%;background:var(--night);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;text-decoration:none;box-shadow:0 0 0 10px var(--paper),0 0 0 12px var(--agent)}
.loop .hub b{font:600 1.2rem/1.1 var(--display);color:#fff}
.loop .hub span{font-size:.8rem;color:#B9C6D8;line-height:1.3;margin-top:6px}
.loop .hub .status{margin-top:8px;font-size:.72rem}
.loop-key{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:18px;font-size:.88rem;color:var(--muted)}
.loop-key span{display:inline-flex;align-items:center;gap:8px}
.loop-key svg{width:34px;height:8px;color:var(--ink)}
.loop-tip{min-height:3.4em;text-align:center;font-size:.95rem;color:var(--muted);max-width:30em;margin:6px auto 0}
@media (max-width:520px){
  .loop .stop{width:108px;gap:5px;transform:translate(-50%,-21px)}
  .loop .stop.label-above{transform:translate(-50%,calc(-100% + 21px))}
  .loop .stop .pin{width:42px;height:42px;border-width:5px}
  .loop .stop .pin i{width:11px;height:11px}
  .loop .stop b{font-size:1rem}
  .loop .stop span.what{font-size:.75rem}
  .loop .hub b{font-size:.98rem}.loop .hub span{display:none}
}

/* ---------- thesis + stats ---------- */
.thesis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:860px){.thesis{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--night-line)}
.stat{padding:22px 18px 22px 0;border-bottom:1px solid var(--night-line)}
.stat:nth-child(odd){border-right:1px solid var(--night-line)}
.stat:nth-child(even){padding-left:22px}
.stat strong{display:block;font:600 clamp(2rem,3.4vw,2.8rem)/1 var(--display);letter-spacing:-.01em;color:#fff}
.stat span{display:block;margin-top:10px;font-size:.95rem;color:#C9D4E3;line-height:1.4}
.stat cite{display:block;margin-top:6px;font-style:normal;font-size:.8rem;color:#8C9BB2}
.stats.light{border-top-color:var(--line)}
.stats.light .stat{border-color:var(--line)}
.stats.light .stat strong{color:var(--ink)}.stats.light .stat span{color:var(--muted)}.stats.light .stat cite{color:var(--faint)}
.test{margin-top:28px;padding:22px 24px;border-left:4px solid var(--teal-bright);background:rgba(255,255,255,.04)}
.test p{color:#DCE4EF}

/* ---------- product rows (home + products) ---------- */
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0;padding-top:0}
.prow.flip .prow-media{order:2}
@media (max-width:860px){.prow{grid-template-columns:1fr}.prow.flip .prow-media{order:0}}
.prow h3{font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.015em;margin:10px 0 6px}
.prow .tag{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700;color:var(--c-ink)}
.prow .tag .bar{width:28px;height:6px;border-radius:3px;background:var(--c)}
.prow .one{font-size:1.18rem;color:var(--ink);margin-bottom:14px}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:15px;height:8px;border:solid var(--c,var(--teal));border-width:0 0 3px 3px;transform:rotate(-45deg)}
.ticks.cols{grid-template-columns:1fr 1fr;column-gap:28px}
@media (max-width:640px){.ticks.cols{grid-template-columns:1fr}}
.phones{display:flex;gap:14px;justify-content:center;align-items:flex-end}
.phone{width:min(44%,230px);border-radius:28px;background:var(--night);padding:7px;box-shadow:0 30px 60px -30px rgba(13,27,46,.55)}
.phone img{border-radius:22px;width:100%;height:auto;aspect-ratio:540/1140;object-fit:cover;object-position:top}
.phone.lift{transform:translateY(-28px)}
.media-wash{background:var(--w);border-radius:28px;padding:clamp(24px,4vw,44px) clamp(16px,3vw,32px) 0;overflow:hidden}
.media-wash .phones{margin-bottom:-60px}
.shot{border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 50px -30px rgba(13,27,46,.5);width:100%;height:auto}

/* ---------- product page hero ---------- */
.phero{padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px);border-top:8px solid var(--c)}
.crumbs{font-size:.92rem;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);margin:14px 0 0}
.phero .name{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:600 1.25rem/1.2 var(--display);color:var(--c-ink)}
.phero .name svg{width:30px;height:30px}
.whereto{margin-top:20px;font-size:.95rem;color:var(--muted)}

/* gap tables: without / with */
.gap{width:100%;border-collapse:collapse;font-size:1rem}
.gap th{text-align:left;font:700 .98rem/1.3 var(--text);padding:0 18px 14px 0;color:var(--muted)}
.gap td{padding:16px 18px 16px 0;border-top:1px solid var(--line);vertical-align:top}
.gap td:first-child{color:var(--muted);width:46%}
.gap td:last-child{font-weight:700}
.band-night .gap td{border-color:var(--night-line)}
.band-night .gap td:first-child,.band-night .gap th{color:#9FB0C7}
@media (max-width:640px){
  .gap thead{display:none}.gap tr{display:block;border-top:1px solid var(--line);padding:14px 0}
  .gap td{display:block;border:0;padding:0;width:auto!important}
  .gap td:first-child{text-decoration:line-through;text-decoration-color:rgba(77,92,114,.4);margin-bottom:6px}
  .gap td:first-child::before{content:"Without it: ";text-decoration:none;display:inline}
}

/* feature groups */
.fgroup{padding:26px 0;border-top:2px solid var(--ink)}
.fgroup h3{margin-bottom:12px}
.fgroup ul{list-style:none;padding:0;display:grid;gap:9px;color:var(--muted)}
.fgroup li{padding-left:18px;position:relative}
.fgroup li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--c,var(--teal))}
.fgroup li b{color:var(--ink)}

/* roadmap columns */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,28px)}
@media (max-width:860px){.stages{grid-template-columns:1fr}}
.stage{border-radius:var(--radius);padding:24px;background:var(--surface);border:1px solid var(--line)}
.stage h3{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1.25rem}
.stage ul{display:grid;gap:9px;padding-left:1.1em;color:var(--muted)}
.stage.live{border-color:#9BD6B6;background:var(--stage-live)}
.stage.dev{border-style:solid;border-color:#F0D58E;background:var(--stage-dev)}
.stage.planned{border:2px dashed var(--line);background:transparent}

/* callouts */
.note{border-radius:var(--radius);padding:24px 26px;background:var(--haze)}
.note h3,.note h4{margin-bottom:8px}
.note.warn{background:var(--aois-wash);border-left:6px solid var(--aois)}
.note.safe{background:var(--safe-wash);border-left:6px solid var(--teal)}
.band-night .note{background:rgba(255,255,255,.06);color:#DCE4EF}
.band-night .note.safe{background:rgba(69,207,194,.10)}
.note.night{background:var(--night);color:#DCE4EF}.note.night h3,.note.night h4{color:#fff}

/* refusals */
.refuse{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--night-line)}
@media (max-width:700px){.refuse{grid-template-columns:1fr}}
.refuse li{padding:20px 22px 20px 52px;border-bottom:1px solid var(--night-line);position:relative}
.refuse li:nth-child(odd){border-right:1px solid var(--night-line)}
@media (max-width:700px){.refuse li:nth-child(odd){border-right:0}}
.refuse li::before{content:"";position:absolute;left:14px;top:22px;width:22px;height:22px;border-radius:50%;border:2px solid #FF8A75;background:linear-gradient(45deg,transparent 45%,#FF8A75 45%,#FF8A75 55%,transparent 55%)}
.refuse b{display:block;color:#fff;font:700 1.08rem/1.3 var(--text)}
.refuse span{display:block;color:#AFBDD0;font-size:.95rem;margin-top:4px}

/* AI where / where not */
.ai-table{width:100%;border-collapse:collapse}
.ai-table th,.ai-table td{text-align:left;padding:14px 16px 14px 0;border-top:1px solid var(--line);vertical-align:top}
.ai-table th{width:22%;font:600 1.1rem/1.3 var(--display)}
.ai-table td{color:var(--muted);width:39%}
.ai-table thead th{font:700 .95rem/1.2 var(--text);color:var(--muted);border-top:0}
@media (max-width:700px){.ai-table thead{display:none}.ai-table tr{display:block;border-top:1px solid var(--line);padding:12px 0}.ai-table th,.ai-table td{display:block;width:auto;border:0;padding:4px 0}.ai-table td:nth-of-type(1)::before{content:"Uses AI for: ";font-weight:700;color:var(--ink)}.ai-table td:nth-of-type(2)::before{content:"Never: ";font-weight:700;color:var(--ink)}}

/* connections table */
.links-table{width:100%;border-collapse:collapse}
.links-table td,.links-table th{padding:14px 16px 14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.links-table thead th{border-top:0;color:var(--muted);font-weight:700;font-size:.95rem}
.links-table .route{display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap}
.links-table .route i{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block}
@media (max-width:700px){.links-table thead{display:none}.links-table tr{display:block;border-top:1px solid var(--line);padding:12px 0}.links-table td{display:block;border:0;padding:3px 0}}

/* audience cards */
.who{display:block;text-decoration:none;color:var(--ink);padding:28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.who:hover{border-color:var(--ink);transform:translateY(-2px)}
.who h3{margin:16px 0 8px}
.who p{color:var(--muted)}
.who .go{display:inline-block;margin-top:14px;font-weight:700;color:var(--teal)}
.who svg{width:40px;height:40px}

/* videos */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.vid{all:unset;cursor:pointer;display:block;border-radius:16px;overflow:hidden;background:var(--night-2);color:#fff}
.vid:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px}
.vid .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.vid .thumb::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230D1B2E'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.vid .vt{padding:14px 16px 18px}
.vid b{display:block;font:700 1.02rem/1.3 var(--text)}
.vid small{display:block;color:#AFBDD0;font-size:.88rem;margin-top:4px}
.modal{position:fixed;inset:0;z-index:100;background:rgba(6,12,22,.9);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .frame{width:min(960px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.modal .frame.short{width:min(380px,90vw);aspect-ratio:9/16;max-height:86vh}
.modal iframe,.modal img{width:100%;height:100%;border:0;object-fit:contain}
.modal .close{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.modal .close:hover{background:rgba(255,255,255,.26)}

/* gallery strip */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;-webkit-overflow-scrolling:touch}
.strip button{all:unset;cursor:zoom-in;flex:none;width:200px;scroll-snap-align:start;border-radius:20px}
.strip button:focus-visible{outline:3px solid var(--teal-bright);outline-offset:3px}
.strip img{border-radius:20px;border:1px solid var(--line);width:100%;height:auto}
.strip figcaption{font-size:.9rem;color:var(--muted);margin-top:8px;white-space:normal}

/* ---------- laptop frame for the web apps ---------- */
.laptop{width:100%;margin:0 auto;padding:0 4%;min-width:0}
.laptop .lid{background:#1B2230;border-radius:16px 16px 4px 4px;padding:10px 10px 12px;box-shadow:0 30px 60px -30px rgba(13,27,46,.6);position:relative}
.laptop .lid::before{content:"";position:absolute;top:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#3A4458}
.laptop .bar{display:flex;align-items:center;gap:6px;background:#2A3242;border-radius:7px 7px 0 0;padding:6px 10px}
.laptop .bar i{width:7px;height:7px;border-radius:50%;background:#4A5468;flex:none}
.laptop .bar span{flex:1;min-width:0;margin-left:8px;background:#1B2230;color:#B9C4D4;border-radius:999px;font:600 .72rem/1 var(--text);padding:5px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.laptop img{display:block;width:100%;height:auto;border-radius:0 0 4px 4px;background:#fff}
.laptop .deck{height:14px;margin:0 -4.4%;background:linear-gradient(#C9D1DC,#9AA5B5);border-radius:0 0 18px 18px;position:relative}
.laptop .deck::before{content:"";position:absolute;top:0;left:50%;width:16%;height:6px;margin-left:-8%;background:#AEB8C6;border-radius:0 0 8px 8px}
.combo{position:relative;padding:0 6% 30px 0}
.combo .phone{position:absolute;right:0;bottom:0;width:24%;min-width:96px;padding:5px;border-radius:20px}
.combo .phone img{border-radius:16px}
.media-wash .combo{margin-bottom:-6px}
.media-wash.has-combo{padding-bottom:clamp(20px,3vw,32px)}
.web-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:760px){.web-pair{grid-template-columns:1fr}}
.web-pair figure{min-width:0}
.web-pair figcaption,.laptop-cap{margin-top:14px;color:var(--muted);font-size:.95rem}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;background:var(--surface)}
.plan.pick{border:2px solid var(--biashara);box-shadow:0 30px 60px -40px rgba(19,128,79,.6)}
.plan h3{font-size:1.5rem}
.plan .price{font:600 2.5rem/1 var(--display);letter-spacing:-.01em;margin:16px 0 4px}
.plan .price small{font:400 1rem var(--text);color:var(--muted);letter-spacing:0}
.plan .per{color:var(--muted);font-size:.92rem}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;flex:1}
.plan li{padding-left:26px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.45em;width:13px;height:7px;border:solid var(--biashara);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.plan li.no{color:var(--faint)}.plan li.no::before{border:0;width:12px;height:2px;background:var(--faint);transform:none;top:.75em}
.compare{width:100%;border-collapse:collapse;font-size:.98rem}
.compare th,.compare td{padding:12px 10px;border-top:1px solid var(--line);text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left;padding-left:0}
.compare thead th{border-top:0;font:600 1.05rem var(--display)}
.compare .y{color:var(--biashara-ink);font-weight:700}.compare .n{color:var(--faint)}
.scroll-x{overflow-x:auto}
.free-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.free-list{grid-template-columns:1fr}}
.free-item{display:flex;gap:14px;padding:20px;border-radius:var(--radius);background:var(--haze)}
.free-item .dot{margin-top:6px}

/* steps (real sequences only) */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;position:relative;padding:0 0 28px 64px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;background:var(--c,var(--night));color:#fff;font:600 1.15rem/42px var(--display);text-align:center}
.steps li::after{content:"";position:absolute;left:20px;top:46px;bottom:6px;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h4{margin:6px 0 6px;font-size:1.2rem}
.steps p{color:var(--muted)}

/* USSD phone (AOIS) */
.feature-phone{width:min(300px,100%);margin-inline:auto;background:#1F2733;border-radius:42px 42px 34px 34px;padding:26px 22px 30px;box-shadow:0 40px 70px -30px rgba(13,27,46,.6)}
.feature-phone .screen{background:#C9D9B7;border-radius:8px;padding:16px 14px;font:700 .98rem/1.45 ui-monospace,"Cascadia Mono",Menlo,monospace;color:#1E2A14;min-height:250px}
.feature-phone .screen .dial{font-size:1.3rem;letter-spacing:.04em}
.feature-phone .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.feature-phone .keys span{background:#2E3846;color:#D6DEE8;border-radius:12px;text-align:center;padding:8px 0;font:700 1rem/1 var(--text)}

/* Taalo levels */
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:20px}
@media (max-width:640px){.levels{grid-template-columns:1fr 1fr}}
.levels span{padding:14px 12px;border-radius:12px;font-weight:700;font-size:.95rem;line-height:1.25}
.levels span:nth-child(1){background:var(--below-bg);color:var(--below-ink)}
.levels span:nth-child(2){background:var(--dev-bg);color:var(--dev-ink)}
.levels span:nth-child(3){background:var(--live-bg);color:var(--live-ink)}
.levels span:nth-child(4){background:var(--taalo-wash);color:var(--taalo-ink)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:700px){.rules{grid-template-columns:1fr}}
.rule{padding:24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.rule h3{font-size:1.2rem;margin-bottom:8px}
.rule p{color:var(--muted)}

/* Agent mock */
.agent-mock{border-radius:20px;background:var(--night);color:#DCE4EF;padding:22px;box-shadow:0 40px 70px -40px rgba(13,27,46,.7);font-size:.95rem}
.agent-mock .ask{background:#22365A;border-radius:14px;padding:14px 16px;color:#fff}
.agent-mock .run{display:flex;align-items:center;gap:10px;margin:14px 4px;color:#AFBDD0}
.agent-mock .run i{width:10px;height:10px;border-radius:50%;background:var(--aois);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.agent-mock .run i{animation:none}}
.agent-mock .result{background:#fff;color:#14223A;border-radius:14px;padding:16px}
.agent-mock .result b{display:block;margin-bottom:6px}
.agent-mock .diff{font:600 .85rem/1.6 ui-monospace,Menlo,monospace;background:#EEF2F5;border-radius:8px;padding:10px;margin:10px 0}
.agent-mock .diff .add{color:#0E6A40}.agent-mock .diff .del{color:#9A2E18;text-decoration:line-through}
.agent-mock .btns{display:flex;gap:8px;flex-wrap:wrap}
.agent-mock .btns span{padding:8px 12px;border-radius:999px;font-weight:700;font-size:.85rem;border:1px solid #D6DEE6;color:#14223A}
.agent-mock .btns span:first-child{background:#13804F;color:#fff;border-color:var(--biashara)}

/* forms */
.form{display:grid;gap:18px}
.form label{display:grid;gap:8px;font-weight:700}
.form input,.form select,.form textarea{font:400 1rem/1.4 var(--text);padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(22,179,166,.18)}
.form textarea{min-height:150px;resize:vertical}
.form .hint{font-weight:400;font-size:.9rem;color:var(--muted)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;display:grid;gap:18px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list svg{width:24px;height:24px;flex:none;margin-top:2px;color:var(--teal)}
.contact-list b{display:block}

/* legal / long text */
.legal{max-width:46rem}
.legal h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-bottom:12px}
.legal h2{font-size:1.65rem;margin:2.4em 0 .6em;scroll-margin-top:96px}
.legal h3{font-size:1.2rem;margin:1.8em 0 .5em}
.legal p,.legal li{line-height:1.75;overflow-wrap:anywhere}
.legal ul,.legal ol{margin:.6em 0 1.1em;display:grid;gap:.4em}
.legal hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.legal .tbl{overflow-x:auto;margin:1em 0 1.4em;border:1px solid var(--line);border-radius:14px}
.legal table{width:100%;border-collapse:collapse;font-size:.95rem}
.legal th,.legal td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.legal thead th{border-top:0;background:var(--haze);font-weight:700}
.legal code{font-size:.88em;background:var(--haze);padding:.1em .35em;border-radius:5px}
.legal-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.toc{position:sticky;top:96px;font-size:.93rem;max-height:calc(100vh - 120px);overflow:auto}
.toc b{display:block;margin-bottom:10px}
.toc ol{list-style:none;padding:0;display:grid;gap:6px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:900px){.legal-layout{grid-template-columns:minmax(0,1fr)}.toc{position:static;max-height:none;border:1px solid var(--line);border-radius:14px;padding:16px}}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:.95rem;margin-bottom:24px}
.policy-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.policy-nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem}
.policy-nav a[aria-current=page]{background:var(--night);border-color:var(--night);color:#fff}

/* final CTA */
.cta-band{background:var(--night);color:#DCE4EF;border-radius:28px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:28px;align-items:center}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cta-band p{color:#AFBDD0;margin-top:12px}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--night);color:#AFBDD0;padding:64px 0 28px;font-size:.96rem}
.foot a{color:#DCE4EF;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h2{font:700 1rem/1.3 var(--text);color:#fff;margin-bottom:14px;letter-spacing:0}
.foot ul{list-style:none;padding:0;display:grid;gap:10px}
.foot .brand{color:#fff;margin-bottom:14px}
.foot .fine{border-top:1px solid var(--night-line);margin-top:48px;padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.88rem;color:#8C9BB2}
.foot .pstat{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:middle}
.foot .pstat.live{background:#16A35F}.foot .pstat.dev{border:2px solid #C98A00;width:9px;height:9px}

/* 404 */
.lost{min-height:60vh;display:grid;place-items:center;text-align:center}
.lost .big{font:500 clamp(6rem,18vw,12rem)/1 var(--display);letter-spacing:-.06em;color:var(--haze-2)}

/* ---------- dark theme: follows the device unless the visitor picks Light or Dark ---------- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --night:#060D18; --night-2:#14233D; --night-line:#22385A;
  --ink:#E7EDF5; --muted:#A9B7CA; --faint:#8C9BB0;
  --paper:#0C1728; --surface:#132238; --haze:#101E33; --haze-2:#1F3150; --line:#26395A; --top-bg:rgba(12,23,40,.92);
  --teal:#45CFC2; --teal-bright:#45CFC2;
  --taalo-ink:#AEADFF; --taalo-wash:#1D1F4C;
  --aois-ink:#F3C55A; --aois-wash:#352809;
  --biashara-ink:#62D69D; --biashara-wash:#0D2D20;
  --pata-ink:#FF9D66; --pata-wash:#3A1C0C;
  --agent-ink:#EB93CB; --agent-wash:#33152C;
  --live-bg:rgba(22,163,95,.18); --live-ink:#8FE0B5; --dev-bg:rgba(227,160,8,.16); --dev-ink:#F5CF72;
  --safe-wash:#0F2B2B; --stage-live:#0F2A21; --stage-dev:#2A2210; --below-bg:rgba(229,72,77,.18); --below-ink:#FFA6A0;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --night:#060D18; --night-2:#14233D; --night-line:#22385A;
  --ink:#E7EDF5; --muted:#A9B7CA; --faint:#8C9BB0;
  --paper:#0C1728; --surface:#132238; --haze:#101E33; --haze-2:#1F3150; --line:#26395A; --top-bg:rgba(12,23,40,.92);
  --teal:#45CFC2; --teal-bright:#45CFC2;
  --taalo-ink:#AEADFF; --taalo-wash:#1D1F4C;
  --aois-ink:#F3C55A; --aois-wash:#352809;
  --biashara-ink:#62D69D; --biashara-wash:#0D2D20;
  --pata-ink:#FF9D66; --pata-wash:#3A1C0C;
  --agent-ink:#EB93CB; --agent-wash:#33152C;
  --live-bg:rgba(22,163,95,.18); --live-ink:#8FE0B5; --dev-bg:rgba(227,160,8,.16); --dev-ink:#F5CF72;
  --safe-wash:#0F2B2B; --stage-live:#0F2A21; --stage-dev:#2A2210; --below-bg:rgba(229,72,77,.18); --below-ink:#FFA6A0;
}
:root[data-theme="light"]{color-scheme:light}
/* dark-only adjustments */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-ink{background:#E7EDF5;color:#0C1728}
  :root:not([data-theme="light"]) .btn-ink:hover{background:#fff}
  :root:not([data-theme="light"]) .btn-line:hover{background:#E7EDF5;color:#0C1728}
  :root:not([data-theme="light"]) .cta-band,:root:not([data-theme="light"]) .foot{border-top:1px solid var(--line)}
  :root:not([data-theme="light"]) .shot,:root:not([data-theme="light"]) .strip img{border-color:var(--line)}
  :root:not([data-theme="light"]) .who:hover{border-color:var(--muted)}
}
:root[data-theme="dark"] .btn-ink{background:#E7EDF5;color:#0C1728}
:root[data-theme="dark"] .btn-ink:hover{background:#fff}
:root[data-theme="dark"] .btn-line:hover{background:#E7EDF5;color:#0C1728}
:root[data-theme="dark"] .cta-band,:root[data-theme="dark"] .foot{border-top:1px solid var(--line)}
:root[data-theme="dark"] .who:hover{border-color:var(--muted)}

/* theme switch (footer) */
.theme{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--night-line);margin-top:8px}
.theme button{all:unset;cursor:pointer;font:700 .82rem/1 var(--text);color:#AFBDD0;padding:7px 12px;border-radius:999px}
.theme button:focus-visible{outline:3px solid var(--teal-bright);outline-offset:2px}
.theme button[aria-pressed="true"]{background:#E7EDF5;color:#0D1B2E}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.cta-band,.menu-btn{display:none}body{font-size:12pt}}
/* Rafiki in WhatsApp and Telegram: two phones, each labelled */
.chat-pair{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.chat-pair figure{margin:0;width:min(46%,250px);text-align:center}
.chat-pair .phone{width:100%}
.chat-pair figcaption{margin-top:12px;color:var(--muted);font-size:.95rem;font-weight:600}
.zoom-btn{all:unset;display:block;cursor:zoom-in;border-radius:28px}
.zoom-btn:focus-visible{outline:3px solid var(--biashara);outline-offset:4px}
.chat-pair .tap{font-weight:400}