/* ==========================================================================
   Textify Africa — white-label bulk SMS rail
   Palette: footer navy (#0e1a30) with gold, starry "space" sections, moon orbits
   ========================================================================== */
:root{
  --night:#0e1a30; --night-2:#16263f; --night-3:#1e3452; --ink:#0e1a30; --ink-2:#22345a;
  --gold:#d4a537;  --gold-light:#f0c75e; --gold-deep:#8a6514; --gold-tint:#faf1dc; --gold-line:#ecd9a8;
  --paper:#f4f6fa; --white:#ffffff; --line:#e2e6ee; --muted:#5a6479;
  --ok:#1f9d55; --warn:#d98e04; --danger:#d9443a; --info:#2f6fe4;
  --radius-lg:28px; --radius:18px; --radius-sm:10px;
  --shadow:0 18px 40px -22px rgba(14,26,48,.5);
  --nav-h:78px;
  --font-display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%230e1a30' stroke-opacity='.045' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30h44a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H38l-12 10v-10h-6a8 8 0 0 1-8-8V38a8 8 0 0 1 8-8z'/%3E%3Cpath d='M28 46h28M28 54h18'/%3E%3Crect x='150' y='20' width='34' height='58' rx='7'/%3E%3Cpath d='M162 70h10'/%3E%3Ccircle cx='60' cy='160' r='20'/%3E%3Cpath d='M60 150v20M54 155h9a4 4 0 0 1 0 8h-6a4 4 0 0 0 0 8h9'/%3E%3Cpath d='M130 140l14 14 26-30'/%3E%3Crect x='150' y='160' width='48' height='34' rx='5'/%3E%3Cpath d='M150 166l24 16 24-16'/%3E%3C/svg%3E");
  --stars:radial-gradient(1.2px 1.2px at 20px 30px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.8) 50%,transparent 60%),radial-gradient(1.6px 1.6px at 170px 160px,rgba(240,199,94,.9) 50%,transparent 60%),radial-gradient(1px 1px at 60px 190px,rgba(255,255,255,.6) 50%,transparent 60%),radial-gradient(1.3px 1.3px at 90px 120px,rgba(255,255,255,.7) 50%,transparent 60%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:6px}
.container{width:min(1200px,100% - 40px);margin-inline:auto}
.narrow{max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center .narrow{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.doodle{background-color:var(--paper);background-image:var(--doodle)}
.section{padding:clamp(64px,9vw,120px) 0}
.section-head{margin-bottom:clamp(32px,5vw,56px)}
.section-head p{font-size:1.1rem;color:var(--muted)}
.on-dark{color:#e8ecf5}
.on-dark .section-head p,.on-dark .muted{color:#a9b3c9}

/* ---------- Buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.85em 1.5em;border-radius:999px;font:600 1rem/1 var(--font-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--night)}
.btn-primary:hover{background:var(--gold-light)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-outline-gold{background:transparent;border-color:var(--gold);color:var(--gold-light)}
.btn-outline-gold:hover{background:var(--gold);color:var(--night)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-wa{background:#25d366;color:#08331a}
.btn-wa:hover{background:#1fb959}
.btn-sm{padding:.55em 1em;font-size:.9rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:999px;background:var(--gold-tint);color:var(--gold-deep);font-weight:600;font-size:.92rem;border:1px solid var(--gold-line)}
.pill-dark{background:rgba(240,199,94,.12);border-color:rgba(240,199,94,.35);color:var(--gold-light)}
.link-arrow{font-weight:600;color:var(--gold-deep);text-decoration:none;border-bottom:2px solid var(--gold-light)}

/* ---------- Navbar (same navy as footer, starts at the very top) ---------- */
.navbar{position:sticky;top:0;z-index:100;background:var(--night);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);transition:box-shadow .2s}
.navbar.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.navbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.45rem/1 var(--font-display);color:inherit;flex:none}
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav-links a{display:block;padding:.55em .8em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.96rem;color:#d7deeb;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a.active{background:var(--gold);color:var(--night);font-weight:700}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;white-space:nowrap;color:#fff}
.nav-phone i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(240,199,94,.14);color:var(--gold-light)}
.nav-toggle{display:none;margin-left:auto;width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:1.25rem}
/* The Innovation link is an eighth item in the bar, so the row needs to start
   tightening a little earlier than it did: the number hides first, then the
   links close up, and the whole bar folds into the menu at 1060px — a little
   sooner than before, because eight items and a button no longer fit in the
   band just above the old 1020px line. */
@media (max-width:1340px){.nav-phone span{display:none}}
@media (max-width:1180px){.nav-links a{padding:.5em .6em;font-size:.93rem}}
@media (max-width:1060px){.nav-links,.nav-cta{display:none}.nav-toggle{display:grid;place-items:center}}

/* ---------- Mobile menu (full-height panel, outside the header) ---------- */
.mnav{position:fixed;inset:0;z-index:1000;background:rgba(5,10,22,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mnav.open{opacity:1;visibility:visible}
.mnav-panel{width:min(420px,100%);height:100%;height:100dvh;background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow-y:auto;overscroll-behavior:contain;padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.mnav.open .mnav-panel{transform:none}
.mnav-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);background:var(--night);border-bottom:1px solid rgba(255,255,255,.08);margin:0 -20px 14px;padding:0 20px}
.mnav-close{width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:1.3rem;cursor:pointer}
.mnav-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mnav-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;text-decoration:none;color:#e6ebf4;font-size:1.08rem;font-weight:600;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
.mnav-links a i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(240,199,94,.12);color:var(--gold-light);font-size:.95rem}
.mnav-links a::after{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:.75rem;color:#6f7d98}
.mnav-links a.active{background:var(--gold);color:var(--night);border-color:var(--gold)}
.mnav-links a.active i{background:rgba(14,26,48,.12);color:var(--night)}
.mnav-links a.active::after{color:var(--night)}
.mnav-cta{display:grid;gap:10px;margin-top:20px}
.mnav-info{margin-top:auto;padding-top:22px;display:grid;gap:8px;font-size:.9rem;color:#a9b3c9}
.mnav-info a{color:#fff;text-decoration:none}
.mnav-flags{display:flex;gap:8px;align-items:center}
.mnav-flags img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
body.menu-open{overflow:hidden}
@media (min-width:1021px){.mnav{display:none}}

/* ---------- Hero (dark, starry, gold moon behind the photo) ---------- */
.space{background-color:var(--night);background-image:var(--stars);background-size:220px 220px;color:#e8ecf5;position:relative}
.hero{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.12),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;position:relative}
.hero-copy{padding-bottom:0}
.hero h1{margin:.45em 0 .35em;color:#fff;font-size:clamp(2.3rem,4.4vw,3.8rem)}
.hero h1 .line{display:block}
.hero h1 .line.gold{color:var(--gold-light)}
.hero-sub{font-size:1.12rem;color:#b9c2d6;max-width:56ch}
.typer{display:inline-flex;align-items:center;gap:.5em;margin:6px 0 26px;padding:.6em 1.1em;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(240,199,94,.4);font-weight:600;color:var(--gold-light);min-height:2.7em;max-width:100%}
.typer .spark{color:var(--gold)}
.typer .caret{width:2px;height:1.1em;background:var(--gold);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.hero-signin{margin-top:18px;font-size:.95rem;color:#a9b3c9}
.hero-signin a{color:#fff;font-weight:700}
.hero-visual{position:relative;align-self:start;min-height:420px;padding-top:4px}
.hero-visual .blob{position:absolute;left:50%;top:6%;width:min(440px,94%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3cf 0,#f0c75e 38%,#c7952a 70%,#8a6514 100%);box-shadow:0 0 90px rgba(240,199,94,.35),inset -20px -24px 50px rgba(0,0,0,.25)}
.hero-visual .blob::before,.hero-visual .blob::after{content:"";position:absolute;border-radius:50%;background:rgba(138,101,20,.25)}
.hero-visual .blob::before{width:16%;height:16%;left:18%;top:22%}
.hero-visual .blob::after{width:10%;height:10%;right:22%;top:48%}
.hero-visual > img{position:relative;z-index:1;width:min(470px,100%);margin:0 0 0 auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:14px;max-width:210px;line-height:1.25;
  font-size:.78rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.35);
  animation:chip-bob 5.5s ease-in-out infinite}
.float-chip i{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font-size:.8rem;background:rgba(240,199,94,.22);color:var(--gold-light);border:1px solid rgba(240,199,94,.35)}
/* The five cards ride one ring around the photo, evenly spaced 72° apart on an
   ellipse centred on her (50%, 46%), starting at the top and going clockwise.
   Each is anchored by its own centre, so the ring stays even whatever the card
   is wide — the centring lives in the keyframes too, or the bob would undo it. */
.float-chip{left:var(--x);top:var(--y);right:auto;transform:translate(-50%,-50%)}
.chip-1{--x:50.0%;--y:5.6%;  animation-delay:0s}      /* top          */
.chip-2{--x:91.5%;--y:33.5%; animation-delay:-1.1s}   /* upper right  */
.chip-5{--x:75.7%;--y:78.7%; animation-delay:-2.2s;max-width:250px}   /* lower right  */
.chip-4{--x:24.3%;--y:78.7%; animation-delay:-3.3s;   /* lower left   */
  background:linear-gradient(135deg,rgba(240,199,94,.55),rgba(212,165,55,.25));border-color:rgba(240,199,94,.7)}
.chip-3{--x:8.5%;--y:33.5%; animation-delay:-4.4s}   /* upper left   */
.chip-4 i{background:rgba(14,26,48,.35);color:#fff}
.chip-flags{flex:none;display:flex;gap:3px}
/* an absolutely-positioned chip shrinks to fit, which was breaking this label
   onto four lines; nowrap lets the <br> decide where it breaks */
.chip-5 span:not(.chip-flags){white-space:nowrap}
.chip-flags img{width:20px;height:14px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
/* the ring cards are anchored by their centre, so their bob has to carry the
   centring with it; everything else just bobs where it sits */
@keyframes chip-bob{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%    {transform:translate(-50%,-50%) translateY(-11px)}}
@keyframes float-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-chip{animation:none;transform:translate(-50%,-50%)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding-bottom:10px}
  /* headroom above the photograph, so the top card of the ring has somewhere to
     sit without landing on her head */
  .hero-visual{min-height:360px;max-width:460px;margin:0 auto;width:100%;padding-top:70px}
  .hero-visual > img{margin:0 auto}
  /* Same ring, recomputed for the narrower box: a phone's hero is much taller
     than it is wide, so equal percentages would squash the circle into an oval
     and the spacing would stop being even. */
  /* on a phone the card wraps again, so it keeps to the narrow 180px cap and
     stops shouldering the card beside it */
  .chip-5{max-width:180px}
  .chip-5 span:not(.chip-flags){white-space:normal}
  /* The photo is scaled back on a phone so there is headroom above her, and the
     ring is lifted to match — the top card has to clear her head, which starts
     22.5% of the way down the photograph. */
  /* height:auto matters — the <img> carries a height attribute, which otherwise
     acts as a presentational hint and stretches her vertically */
  .hero-visual > img{width:min(300px,82%);height:auto}
  .chip-1{--x:50.0%;--y:23.8%}
  .chip-2{--x:80.4%;--y:42.2%}
  .chip-5{--x:68.8%;--y:71.9%}
  .chip-4{--x:31.2%;--y:71.9%}
  .chip-3{--x:19.6%;--y:42.2%}
  /* narrower cards on a phone: the ring is small there, and wide cards would
     reach in over her face */
  .float-chip{font-size:.72rem;padding:7px 9px;max-width:128px;gap:6px}
  .float-chip i{width:24px;height:24px;font-size:.72rem}
  .chip-5{max-width:128px}
}

/* ---------- Stats band (dark) ---------- */
.stats-band{background:var(--night);color:#fff;padding:26px 0 34px;border-top:1px solid rgba(255,255,255,.06)}
.networks{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.88rem;color:#a9b3c9}
.networks .net{padding:6px 14px;border-radius:10px;background:#fff;color:var(--ink);font-weight:700;font-size:.85rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(135deg,#1b3350,#16263f);box-shadow:inset 0 0 0 1px rgba(240,199,94,.18);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius)}
.stat{padding:22px 26px;border-left:1px solid rgba(255,255,255,.08)}
.stat:first-child{border-left:0}
.stat b{display:block;font:800 clamp(1.8rem,3vw,2.4rem)/1 var(--font-display);letter-spacing:-.02em}
.stat b em{font-style:normal;color:var(--gold-light)}
.stat b{color:#fff}
.stat span{font-size:.88rem;color:#a9b3c9}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .stat{padding:18px}
}

/* ---------- Trust strip ---------- */
.trust{padding:56px 0 64px;border-bottom:1px solid var(--line)}
.trust h2{font-size:clamp(1.4rem,2.4vw,1.9rem);max-width:30ch;margin-inline:auto}
.industries{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:30px}
.industry{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border-radius:var(--radius);background:var(--paper);font-weight:600;font-size:.9rem;text-align:center}
.industry i{font-size:1.4rem;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--gold-deep);box-shadow:0 6px 16px -10px rgba(14,26,48,.5)}
@media (max-width:900px){.industries{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.industries{grid-template-columns:repeat(2,1fr)}}

/* ---------- Founder / persona block ---------- */
.persona{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,64px);align-items:center}
.persona-quote{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow);position:relative}
.persona-quote::before{content:"\201C";position:absolute;top:-28px;left:26px;font:800 7rem/1 var(--font-display);color:var(--gold)}
.persona-quote p{font-size:1.12rem;font-style:italic;color:#2b3551}
.persona-quote .who{font-style:normal;margin-top:18px;font-size:.95rem}
.persona-quote .who b{display:block}
.persona-photo{width:min(320px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:#d4d9e6;border:10px solid #fff;box-shadow:var(--shadow)}
.persona-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:800px){.persona{grid-template-columns:1fr}.persona-photo{order:-1;width:220px}}

/* ---------- Control cards (dark glass) ---------- */
.control{background-color:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;position:relative}
.control::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,48,.7),rgba(14,26,48,.95));pointer-events:none}
.control > *{position:relative;z-index:1}
.control .section-head p{color:#c3c8e6}
.glass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column}
.glass .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;background:rgba(240,199,94,.16);color:var(--gold-light);margin-bottom:18px}
.glass h3{color:#fff;font-size:1.15rem}
.glass p{color:#c9cee8;font-size:.97rem;margin:0}
.glass-money{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.glass.money{background:linear-gradient(135deg,rgba(212,165,55,.26),rgba(212,165,55,.06));border:1.5px solid var(--gold);padding:34px}
.glass.money h3{font-size:1.5rem}
.glass.money .ic{background:var(--gold);color:var(--night)}
.glass .tag{margin-top:auto;padding-top:18px;font-size:.85rem;color:var(--gold-light);font-weight:600}
@media (max-width:1000px){.glass-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.glass-grid,.glass-money{grid-template-columns:1fr}}

/* ---------- Browser mockup (dashboard preview) ---------- */
.browser{border-radius:22px;background:#fff;box-shadow:0 40px 80px -40px rgba(14,26,48,.55);border:1px solid var(--line);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#eef1f6;border-bottom:1px solid var(--line)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#e36a5c}
.browser-bar i:nth-child(2){background:#e8b93b}.browser-bar i:nth-child(3){background:#56c25c}
.browser-bar .url{margin-left:12px;flex:1;max-width:360px;background:#fff;border-radius:8px;padding:5px 12px;font-size:.8rem;color:var(--muted)}
.mock{display:grid;grid-template-columns:190px 1fr;min-height:420px;background:#f1f3f8;font-size:.8rem}
.mock-side{background:#fff;padding:16px 10px;border-right:1px solid var(--line)}
.mock-side div{padding:8px 10px;border-radius:10px;color:#4a5068;display:flex;gap:10px;align-items:center}
.mock-side div.on{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.mock-main{padding:14px;display:grid;gap:12px;grid-template-columns:1fr 1.6fr;grid-auto-rows:min-content}
.mock-top{grid-column:1/-1;padding:12px 16px;border-radius:14px;color:#fff;background:linear-gradient(90deg,var(--mock-brand,var(--gold)),var(--night));font-weight:700;text-align:center;transition:background .4s}
.mock-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 6px 18px -14px rgba(14,26,48,.5)}
.mock-send{background:linear-gradient(120deg,var(--mock-brand,var(--gold)),var(--night));display:grid;place-items:center;min-height:90px}
.mock-send span{background:var(--mock-brand,var(--gold));color:var(--night);padding:8px 18px;border-radius:999px;font-weight:700;border:2px solid rgba(255,255,255,.4)}
.mock-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-tile{display:flex;align-items:center;gap:10px}
.mock-tile i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.mock-tile b{display:block;font-size:.95rem}
.brand-swatches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.swatch{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--night)}
@media (max-width:760px){
  .mock{grid-template-columns:1fr}
  .mock-side{display:flex;overflow-x:auto;gap:4px;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  .mock-side div{white-space:nowrap}
  .mock-main{grid-template-columns:1fr}
  .mock-tiles{grid-template-columns:1fr 1fr}
}

/* ---------- Stacking cards (the signature moment) ---------- */
.stack{position:relative;display:grid;gap:28px;padding-bottom:20px}
.stack-card{position:sticky;top:calc(var(--nav-h) + 24px + var(--i,0) * 22px);border-radius:var(--radius-lg);padding:clamp(24px,4vw,48px);background:#fff;border:1px solid var(--line);box-shadow:0 -12px 40px -24px rgba(14,26,48,.45);display:grid;grid-template-columns:auto 1fr .9fr;gap:clamp(18px,3vw,40px);align-items:center;min-height:320px;transform-origin:center top;will-change:transform}
.step-no{font:800 clamp(3rem,6vw,5rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--gold);align-self:start}
.stack-card h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.stack-card p{color:var(--muted);font-size:1.05rem}
.stack-visual{background:var(--paper);background-image:var(--doodle);border-radius:var(--radius);padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.stack-visual .big-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--night);color:var(--gold-light);box-shadow:0 0 0 6px var(--gold-tint);font-size:1.5rem;margin:0 auto 6px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{padding:.4em .85em;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.85rem;font-weight:600}
.chip.ok::before{content:"\2713";color:var(--gold-deep);margin-right:6px;font-weight:800}
.stack-done{text-align:center;padding:40px 0 0}
.stack-done h3{font-size:clamp(1.6rem,3vw,2.4rem)}

/* Who-it's-for variant: coloured cards */
.stack.who .stack-card{color:#fff;border:0;background:var(--c,#1c2150);grid-template-columns:1.1fr .9fr}
.stack.who .stack-card p{color:rgba(255,255,255,.82)}
.who-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:1.5rem;color:var(--gold-light);margin-bottom:18px}
.who-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px;display:grid;gap:10px}
.who-panel .row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;font-weight:600}
.who-panel .row i{color:var(--gold-light)}
@media (max-width:860px){
  .stack-card{grid-template-columns:1fr;top:calc(var(--nav-h) + 12px + var(--i,0) * 14px);min-height:auto}
  .stack.who .stack-card{grid-template-columns:1fr}
  .step-no{font-size:3rem}
}
@media (prefers-reduced-motion:reduce){
  .stack-card{position:relative;top:auto !important;transform:none !important}
  html{scroll-behavior:auto}
  .typer .caret{animation:none}
}

/* ---------- Revenue ---------- */
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.mini{padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.mini i{color:var(--gold);font-size:1.3rem;margin-bottom:12px;display:block}
.mini h3{font-size:1.1rem;margin-bottom:.35em}
.mini p{margin:0;color:var(--muted);font-size:.96rem}
@media (max-width:760px){.mini-cards{grid-template-columns:1fr}}
.calc{margin-top:40px;display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.calc-in{background:#fff;padding:clamp(22px,4vw,40px);display:grid;gap:22px}
.calc-out{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:clamp(22px,4vw,40px);display:flex;flex-direction:column;justify-content:center}
.calc-out .amount{font:800 clamp(2.2rem,4.5vw,3.6rem)/1 var(--font-display);color:var(--gold-light);margin:8px 0 12px;word-break:break-word}
.calc-out small{color:#b8bfdc}
.field-range label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}
.field-range output{color:var(--gold-deep);font-weight:800}
input[type=range]{width:100%;accent-color:var(--gold)}
.seg{display:inline-flex;background:var(--paper);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:.5em 1em;border-radius:999px;font:600 .92rem var(--font-body);cursor:pointer;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (max-width:800px){.calc{grid-template-columns:1fr}}

/* ---------- Customer features (Vastcom dark) ---------- */
.night{background:var(--night);color:#e8ecf5}
.night h2,.night h3{color:#fff}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:start}
.feature-list{display:grid;gap:4px;counter-reset:f}
.feature{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.feature i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#1e3452;color:var(--gold-light)}
.feature h3{font-size:1.1rem;margin-bottom:.25em}
.feature p{margin:0;color:#a9b3c9;font-size:.97rem}
.campaign{background:var(--night-2);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px;position:sticky;top:calc(var(--nav-h) + 24px)}
.campaign .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.campaign .lbl{font-size:.72rem;color:#8391ad;margin:12px 0 6px}
.campaign .box{background:#0e1a30;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 14px;font-size:.9rem;display:flex;justify-content:space-between;gap:10px}
.campaign .var{background:rgba(240,199,94,.18);color:var(--gold-light);padding:0 6px;border-radius:5px}
.badge-live{font-size:.7rem;font-weight:800;color:var(--gold-light);background:rgba(240,199,94,.14);padding:4px 10px;border-radius:999px}
.bar{height:8px;border-radius:99px;background:#243a5a;overflow:hidden;margin:10px 0 14px}
.bar span{display:block;height:100%;width:98.5%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.net-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.net-row div{border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;font-size:.7rem;color:#8391ad}
.net-row b{display:block;color:#fff;font-size:.85rem}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr}.campaign{position:relative;top:auto}.net-row{grid-template-columns:repeat(3,1fr)}}

/* ---------- Countries ---------- */
.countries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.country{border-radius:var(--radius-lg);padding:30px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.country .flag{font-size:2.6rem;line-height:1}
.country h3{margin:14px 0 8px}
.country p{color:var(--muted);margin:0}
.country .live{position:absolute;top:22px;right:22px;display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--gold-deep)}
.country .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--gold-tint)}
@media (max-width:860px){.countries{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start}
.faq-list{display:grid;gap:12px}
.faq{border-radius:var(--radius);background:#fff;border:1px solid var(--line);overflow:hidden}
.faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;background:none;border:0;padding:20px 22px;font:600 1.03rem var(--font-body);color:var(--ink);cursor:pointer}
.faq button i{transition:transform .25s;color:var(--gold)}
.faq[data-open] button i{transform:rotate(45deg)}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq[data-open] .ans{grid-template-rows:1fr}
.faq .ans > div{overflow:hidden}
.faq .ans p{padding:0 22px 20px;margin:0;color:var(--muted)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}

/* ---------- CTA band & direct note ---------- */
.cta-band{background:linear-gradient(135deg,#f0c75e,#d4a537 55%,#b8891f);color:var(--night);border-radius:var(--radius-lg);padding:clamp(34px,6vw,70px);display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.cta-band h2{color:var(--night)}
.cta-band p{color:#3a2d0c;font-size:1.1rem}
.cta-band .actions{display:flex;flex-direction:column;gap:12px}
.cta-band .small{font-size:.88rem;color:#3a2d0c;text-align:center}
@media (max-width:800px){.cta-band{grid-template-columns:1fr}}
.direct{margin-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;padding:22px 26px;border-radius:var(--radius);border:1.5px dashed #c3c9d6;background:var(--paper)}
.direct p{margin:0;max-width:70ch}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:20ch}
.page-hero p{font-size:1.15rem;color:var(--muted);max-width:60ch}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.crumbs a{text-decoration:none;font-weight:600;color:var(--gold-deep)}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:.85em 1em;border-radius:12px;border:1.5px solid var(--line);font:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:5px}
.alert{padding:12px 16px;border-radius:12px;font-size:.95rem;display:none}
.alert.show{display:block}
.alert.err{background:#fdecea;color:#8c231b;border:1px solid #f5c2bd}
.alert.ok{background:var(--gold-tint);color:var(--gold-deep);border:1px solid var(--gold-line)}

/* ---------- Auth pages ---------- */
.auth{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(240,199,94,.18),transparent 45%)}
.auth-side > *{position:relative;z-index:1}
.auth-side h2{color:#fff;max-width:16ch}
.auth-side ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.auth-side li{display:flex;gap:12px;align-items:center;color:#d3d7ee}
.auth-side li i{color:var(--gold-light)}
.auth-main{display:grid;place-items:center;padding:clamp(28px,5vw,64px) 20px;background:var(--paper)}
.auth-card{width:min(440px,100%);background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.auth-card h1{font-size:2rem;margin-bottom:.2em}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:6px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-google:hover{border-color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;padding:8px}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth-side{display:none}}

/* ==========================================================================
   API DOCUMENTATION
   A reference page, not a marketing page: a sticky contents rail on the left,
   one section per endpoint, and every field in a table you can scan.
   ========================================================================== */
.docs-page{background:var(--white)}
.docs-hero{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;padding:44px 0 40px}
.docs-hero .crumbs{color:#8fa0bd;font-size:.9rem;margin-bottom:10px}
.docs-hero .crumbs a{color:var(--gold-light);text-decoration:none}
.docs-hero h1{font-size:clamp(2rem,4vw,2.9rem);margin:0 0 .35em;color:#fff}
.docs-hero p{color:#b9c6dc;max-width:62ch;font-size:1.06rem;margin:0}
.docs-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.docs-hero-meta span{display:inline-flex;align-items:center;gap:8px;padding:.42em 1em;border-radius:999px;
  background:rgba(240,199,94,.12);border:1px solid rgba(240,199,94,.3);color:var(--gold-light);font:600 .86rem var(--font-body)}
.docs-hero-meta code{background:none;padding:0;color:#fff;font:600 .84rem ui-monospace,Menlo,Consolas,monospace;
  overflow-wrap:anywhere}

.docs-shell{display:grid;grid-template-columns:252px minmax(0,1fr);gap:clamp(28px,4vw,56px);padding:40px 0 90px;align-items:start}

/* contents rail */
.docs-side{position:sticky;top:calc(var(--nav-h) + 18px);align-self:start}
.docs-side-toggle{display:none;width:100%;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;font:700 .95rem var(--font-body);color:var(--night);cursor:pointer}
.docs-side-toggle .cv{margin-left:auto;transition:transform .2s}
.docs-side-toggle[aria-expanded="true"] .cv{transform:rotate(180deg)}
.docs-side-inner{display:grid;gap:2px;max-height:calc(100vh - var(--nav-h) - 50px);overflow-y:auto;padding-right:6px}
.docs-side-h{margin:16px 0 4px;padding:0 12px;font:700 .72rem var(--font-body);letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.docs-side-h:first-child{margin-top:0}
.docs-side a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;text-decoration:none;
  font-size:.94rem;color:var(--muted);font-weight:500;border-left:2px solid transparent}
.docs-side a:hover{background:var(--paper);color:var(--night)}
.docs-side a.active{background:var(--gold-tint);color:var(--gold-deep);font-weight:700;border-left-color:var(--gold)}
/* the endpoints belonging to the section above, indented under it */
.docs-side-eps{display:grid;gap:1px;margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid var(--line)}
.docs-side-eps .ep-link{gap:7px;padding:5px 8px;font:500 .8rem ui-monospace,Menlo,Consolas,monospace;
  color:var(--muted);border-left:0;border-radius:8px}
.docs-side-eps .ep-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-side-eps .ep-link:hover{background:var(--paper);color:var(--night)}
.docs-side-eps .m{font-size:.58rem;padding:2px 5px;letter-spacing:.02em}
/* an endpoint jumped to from the rail should not hide under the sticky header */
.ep-line{scroll-margin-top:calc(var(--nav-h) + 22px)}

/* method chip */
.m{display:inline-block;padding:2px 7px;border-radius:5px;font:700 .68rem/1.5 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em;background:var(--night);color:#fff;font-style:normal;flex:none}
.m-post{background:#1f7a4d}.m-get{background:#1f5fb0}.m-put{background:#a06a10}.m-delete{background:#a32a2a}

/* the body */
.docs-body{min-width:0}
.docs-body section{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 20px)}
.docs-body h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0 0 .5em}
.docs-body h3{font-size:1.06rem;margin:26px 0 10px}
.docs-body p{color:var(--muted);font-size:1.02rem}
.docs-body > section > p:first-of-type{color:#37425c}

.docs-base{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;margin:18px 0;padding:14px 16px;
  border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.docs-base > span{font:700 .72rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.docs-base code{font:600 1rem ui-monospace,Menlo,Consolas,monospace;background:none;padding:0;color:var(--night);word-break:break-all}
.docs-base .copy-btn{position:static;margin-left:auto;background:var(--night)}

/* Callouts. Not a flex container: the loose text and inline <code> inside must
   stay one flowing paragraph, so the icon is positioned instead. */
.docs-note{position:relative;margin:18px 0;padding:15px 18px 15px 48px;border-radius:12px;
  border:1px solid #d7e2f2;background:#f2f6fc;font-size:.95rem;color:#37425c;line-height:1.65}
.docs-note > i{position:absolute;left:17px;top:18px;color:#3b6fb5;font-size:.95rem}
.docs-note b{display:block;color:var(--night);font-size:.97rem;margin-bottom:3px}
.docs-note p{margin:0;color:inherit;font-size:.95rem}
.docs-note.warn{background:#fff8e6;border-color:#f3d98f;color:#6b5312}
.docs-note.warn > i{color:var(--gold-deep)}
.docs-note.warn b{color:#5c4610}
.docs-note.spark{background:var(--gold-tint);border-color:var(--gold-line);color:#5c4610}
.docs-note.spark > i{color:var(--gold-deep)}
.docs-note.spark b{color:#4a3a0d}

.docs-steps{counter-reset:ds;list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.docs-steps li{counter-increment:ds;position:relative;padding-left:40px;color:#37425c}
.docs-steps li::before{content:counter(ds);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--night);font:800 .8rem var(--font-body)}

.docs-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.docs-points li{display:flex;gap:10px;align-items:flex-start;color:#37425c;font-size:.98rem;line-height:1.6}
.docs-points i{color:#1f7a4d;margin-top:5px;font-size:.82rem;flex:none}
.docs-points b{color:var(--night)}
.docs-points a{color:var(--gold-deep);font-weight:600}

/* one endpoint */
.ep-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
  border-radius:12px;background:var(--night);color:#fff}
.ep-line .m{font-size:.74rem;padding:4px 9px}
.ep-path{font:600 1rem ui-monospace,Menlo,Consolas,monospace;background:none;color:#fff;padding:0;word-break:break-all}
.ep-line .copy-btn{position:static;margin-left:auto}
.ep-public{padding:3px 9px;border-radius:999px;background:rgba(62,207,31,.16);color:#7ee787;
  border:1px solid rgba(126,231,135,.35);font:700 .7rem var(--font-body)}

/* field tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--paper);font-weight:700;white-space:nowrap}
.tbl tbody th{background:var(--paper);font-weight:700;white-space:nowrap;width:150px}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl td{color:#37425c}
.tbl code,.docs-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--paper);
  padding:2px 6px;border-radius:5px;color:var(--ink-2);overflow-wrap:anywhere}
.tbl a{color:var(--gold-deep)}
.ty{font:600 .78rem ui-monospace,Menlo,Consolas,monospace;color:var(--muted);white-space:nowrap}
/* a field name is one token: let the column widen rather than break the name */
.tbl-fields td:first-child{white-space:nowrap}
.tbl-fields td:first-child code{overflow-wrap:normal;word-break:normal}
.req{display:inline-block;padding:2px 8px;border-radius:999px;font:700 .72rem var(--font-body);white-space:nowrap}
.req.yes{background:#e7f4ec;color:#1f7a4d;border:1px solid #bfe0cd}
.req.no{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.st{font-weight:700}
.st-2{background:#e7f4ec;color:#1f7a4d}
.st-4{background:#fdeceb;color:#a32a2a}
.st-5{background:#fff3e0;color:#8a5a10}

/* code blocks */
.code{position:relative;background:#0e1a30;color:#dfe6f3;border-radius:14px;overflow:hidden;margin:14px 0}
.code-tabs{display:flex;gap:2px;background:#16263f;padding:6px;padding-right:86px;overflow-x:auto}
.code-tabs button{border:0;background:transparent;color:#8a97b3;padding:6px 12px;border-radius:8px;
  font:600 .82rem var(--font-body);cursor:pointer;white-space:nowrap}
.code-tabs button:hover{color:#fff}
.code-tabs button[aria-selected="true"]{background:#0e1a30;color:#fff}
.code pre{margin:0;padding:18px;overflow-x:auto;font:.85rem/1.65 ui-monospace,Menlo,Consolas,monospace;
  -webkit-overflow-scrolling:touch}
.copy-btn{position:absolute;top:8px;right:8px;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;
  padding:6px 11px;font:600 .78rem var(--font-body);cursor:pointer;transition:background .15s}
.copy-btn:hover{background:var(--gold);color:var(--night)}

.docs-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.docs-help a{display:flex;align-items:center;gap:13px;padding:16px;border-radius:14px;border:1px solid var(--line);
  background:#fff;text-decoration:none;color:var(--night);transition:border-color .16s,transform .16s}
.docs-help a:hover{border-color:var(--gold);transform:translateY(-2px)}
.docs-help i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--gold-tint);
  color:var(--gold-deep);flex:none}
.docs-help b{display:block;font-size:.95rem}
.docs-help span{font-size:.86rem;color:var(--muted);word-break:break-word}

@media (max-width:980px){
  .docs-shell{grid-template-columns:1fr;padding-top:22px}
  .docs-side{position:static;margin-bottom:18px}
  .docs-side-toggle{display:flex}
  .docs-side-inner{display:none;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:14px;
    max-height:60vh;background:#fff}
  .docs-side.open .docs-side-inner{display:grid}
}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.price-card{border-radius:var(--radius-lg);padding:clamp(24px,4vw,44px);background:#fff;border:1px solid var(--line)}
.price-card.dark{background:var(--night);color:#fff;border:0}
.price-card.dark p,.price-card.dark li{color:#c9cee8}
.price-card ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:10px}
.price-card li{display:flex;gap:10px}
.price-card li i{color:var(--gold);margin-top:5px}
.price-card.dark li i{color:var(--gold-light)}
.price-big{font:800 3.2rem/1 var(--font-display);margin:10px 0}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.office{padding:24px;border-radius:var(--radius);background:var(--paper);margin-bottom:14px}
.office h3{font-size:1.1rem;display:flex;gap:10px;align-items:center}
.office p{margin:.2em 0;color:var(--muted)}
.office a{font-weight:700;text-decoration:none;color:var(--ink)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Error pages ---------- */
.error-page{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 20px}
.error-code{font:800 clamp(6rem,20vw,12rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:3px var(--ink);letter-spacing:-.04em}
.error-code span{color:var(--gold);-webkit-text-stroke:0}

/* ---------- Footer ---------- */
.footer{background:var(--night);color:#a9b3c9;padding:72px 0 28px;margin-top:0}
.footer a{color:#dfe5f1;text-decoration:none}
.footer a:hover{color:var(--gold-light)}
.footer h4{position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.foot-about .brand{color:#fff;margin-bottom:16px}
.footer{border-top:2px solid var(--gold)}
.foot-about p{font-size:.95rem;max-width:40ch}
.footer h4{color:#fff;font-size:1rem;margin-bottom:14px;font-family:var(--font-body)}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.95rem}
.foot-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.foot-contact div{font-size:.93rem}
.foot-contact b{color:#fff;display:block;margin-bottom:4px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.88rem}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07)}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}.foot-about{grid-column:1/-1}}
@media (max-width:640px){.foot-contact{grid-template-columns:1fr}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);text-decoration:none}

/* ==========================================================================
   Dashboards (user tu.html + admin ta.html)
   ========================================================================== */
.dash{--side-w:250px;display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;background:#eef1f6;font-size:15px}
.dash-side{position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;z-index:60}
.dash-side .brand{padding:6px 10px 16px;font-size:1.3rem}
.dash-side .who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--paper);margin-bottom:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-weight:800;flex:none}
.who small{display:block;color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.who b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.side-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#3f4563;font-weight:500;border:0;background:none;font:inherit;cursor:pointer;text-align:left;width:100%}
.side-link i{width:20px;text-align:center;color:#7a819b}
.side-link:hover{background:var(--paper)}
.side-link.active{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.side-link.active i{color:var(--gold-deep)}
.side-link .count{margin-left:auto;background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;border-radius:99px;padding:1px 8px}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.dash-main{min-width:0;display:flex;flex-direction:column}
.dash-top{position:sticky;top:0;z-index:50;margin:14px 18px 0;padding:12px 18px;border-radius:16px;background:linear-gradient(90deg,#b8891f,var(--night-2) 45%,var(--night));box-shadow:inset 0 -2px 0 var(--gold);color:#fff;display:flex;align-items:center;gap:14px}
.dash-top h1{font-size:1.15rem;margin:0;flex:1;text-align:center;font-family:var(--font-body)}
.dash-top .icon-btn{background:rgba(255,255,255,.15);border:0;color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.dash-top .bal{background:rgba(0,0,0,.2);padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap}
.dash-body{padding:18px;display:grid;gap:18px;align-content:start}
.menu-btn{display:none !important}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
.g-side{grid-template-columns:1fr 1.7fr}
.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 8px 24px -20px rgba(14,26,48,.55);min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:1.05rem;margin:0;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.tile{display:flex;align-items:center;gap:14px}
.tile .ti{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.05rem;flex:none}
.tile small{color:var(--muted);display:block}
.tile b{font-size:1.35rem;font-family:var(--font-display)}
.send-hero{background:linear-gradient(120deg,#c7952a,var(--night) 70%);display:grid;place-items:center;min-height:130px;color:#fff;text-align:center}
.send-hero .btn{background:var(--gold);color:var(--night);border:2px solid rgba(255,255,255,.45)}
.chart-box{position:relative;height:280px}
.chart-box.sm{height:230px}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.b-sent,.b-approved,.b-active,.b-answered{background:#e3f5ea;color:#16703d}
.b-queued,.b-pending,.b-open,.b-scheduled{background:#fff4dc;color:#8a5a00}
.b-failed,.b-rejected,.b-suspended{background:#fdecea;color:#8c231b}
.b-closed,.b-new{background:#e9edf8;color:#34407a}
.empty{text-align:center;padding:36px 16px;color:var(--muted)}
.empty i{font-size:2rem;color:#c3c9d6;display:block;margin-bottom:10px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:.6em .9em;border-radius:10px;border:1.5px solid var(--line);font:inherit;background:#fff;min-width:0}
.counter{font-size:.82rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:6px}
.key-box{display:flex;gap:10px;align-items:center;background:var(--paper);border-radius:12px;padding:12px 14px;font:600 .92rem ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.thread{display:grid;gap:10px;margin:12px 0}
.msg{padding:12px 14px;border-radius:14px;background:var(--paper);max-width:85%}
.msg.support{background:var(--gold-tint);margin-left:auto}
.msg small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:4px}
.modal{position:fixed;inset:0;background:rgba(14,26,48,.55);display:none;place-items:center;z-index:200;padding:20px}
.modal.show{display:grid}
.modal-box{background:#fff;border-radius:20px;padding:24px;width:min(560px,100%);max-height:90vh;overflow-y:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;z-index:300;transition:transform .3s;max-width:calc(100% - 32px);font-weight:500}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}
.phone-preview{background:#1d2238;border-radius:28px;padding:16px;max-width:280px;margin:0 auto}
.phone-preview .screen{background:#eef1f6;border-radius:18px;padding:14px;min-height:220px}
.bubble{background:#fff;border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:.88rem;white-space:pre-wrap;word-break:break-word;box-shadow:0 4px 10px -8px rgba(0,0,0,.4)}
.bubble.wa{background:#dcf8c6}
.sender-lbl{font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:6px;text-align:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--line);background:#fff;padding:.5em 1em;border-radius:999px;font:600 .88rem var(--font-body);cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.admin-view{display:none}
.admin-view.show{display:grid}
.scrim{display:none}
@media (max-width:1100px){.g-4{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:fixed;left:0;top:0;bottom:0;width:270px;transform:translateX(-100%);transition:transform .3s;box-shadow:20px 0 40px -30px rgba(0,0,0,.5)}
  .dash.side-open .dash-side{transform:none}
  .dash.side-open .scrim{display:block;position:fixed;inset:0;background:rgba(14,26,48,.4);z-index:55}
  .menu-btn{display:grid !important}
  .g-2,.g-side{grid-template-columns:1fr}
  .dash-top{margin:10px 10px 0}
  .dash-body{padding:12px}
  .dash-top .bal span{display:none}
}
@media (max-width:520px){.g-4,.g-3{grid-template-columns:1fr}.dash-top h1{font-size:1rem}}

/* ==========================================================================
   Orbit systems: countries and team circling a gold moon
   ========================================================================== */
.orbit-section{overflow:hidden}
.space h2,.space h3{color:#fff}
.space .section-head p{color:#b1bbcf}
.orbit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.orbit-grid.flip > .orbit{order:2}
.orbit{--size:min(520px,86vw);position:relative;width:var(--size);height:var(--size);margin-inline:auto;flex:none}
.orbit::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.10),transparent 65%)}
.moon{position:absolute;top:50%;left:50%;width:calc(var(--size) * .32);height:calc(var(--size) * .32);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff6d8 0,#f0c75e 36%,#c7952a 72%,#7a5a12 100%);
  box-shadow:0 0 70px rgba(240,199,94,.45),0 0 0 10px rgba(240,199,94,.06),inset -14px -16px 34px rgba(0,0,0,.28);
  display:grid;place-items:center;text-align:center;color:var(--night);z-index:1;padding:5%}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:rgba(122,90,18,.22)}
.moon::before{width:18%;height:18%;left:20%;top:22%}
.moon::after{width:11%;height:11%;right:22%;bottom:26%}
.moon b{position:relative;z-index:1;font:800 calc(var(--size) * .036)/1.1 var(--font-display);display:block}
.moon small{position:relative;z-index:1;display:block;font-size:calc(var(--size) * .024);font-weight:600;opacity:.8;margin-top:4px}
.moon img{position:relative;z-index:1;width:46%;margin:0 auto 6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}

.ring{position:absolute;top:50%;left:50%;width:calc(var(--size) * var(--f));height:calc(var(--size) * var(--f));
  margin:calc(var(--size) * var(--f) / -2) 0 0 calc(var(--size) * var(--f) / -2);
  border:1.5px dashed rgba(240,199,94,.32);border-radius:50%;z-index:2;animation:orbit-spin var(--dur,40s) linear infinite}
.ring.rev{animation-direction:reverse}
.ring.faint{border-style:solid;border-color:rgba(255,255,255,.06)}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

.planet{--p:calc(var(--size) * .17);position:absolute;top:50%;left:50%;width:var(--p);height:var(--p);
  margin:calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
  transform:rotate(var(--a)) translateX(calc(var(--size) * var(--f) / 2)) rotate(calc(var(--a) * -1))}
.planet .body{position:relative;width:100%;height:100%;animation:orbit-spin var(--dur,40s) linear infinite reverse}
.ring.rev .planet .body{animation-direction:normal}
.planet button{all:unset;cursor:pointer;display:block;width:100%;height:100%;border-radius:50%}
.planet img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--gold);background:var(--night-2);
  box-shadow:0 0 0 5px rgba(240,199,94,.12),0 10px 26px -8px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
.planet button:hover img,.planet button:focus-visible img,.planet.is-active img{transform:scale(1.12);box-shadow:0 0 0 6px rgba(240,199,94,.35),0 0 30px rgba(240,199,94,.55)}
.planet .tag{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(.66rem,1.8vw,.8rem);font-weight:700;color:#fff;
  background:rgba(14,26,48,.9);border:1px solid rgba(240,199,94,.45);padding:3px 10px;border-radius:99px}
.satellite{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold-light);
  box-shadow:0 0 12px var(--gold-light);transform:rotate(var(--a)) translateX(calc(var(--size) * var(--f) / 2))}
.satellite.msg{width:28px;height:28px;margin:-14px 0 0 -14px;background:var(--night-2);border:1.5px solid var(--gold);box-shadow:none;display:grid;place-items:center;color:var(--gold-light);font-size:.72rem}
.orbit:hover .ring,.orbit:hover .planet .body,.orbit:focus-within .ring,.orbit:focus-within .planet .body{animation-play-state:paused}

/* Cards beside the orbit */
.orbit-cards{display:grid;gap:14px}
.o-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:border-color .25s,background .25s}
.o-card.is-active{border-color:var(--gold);background:rgba(240,199,94,.08)}
.o-card img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.o-card h3{font-size:1.1rem;color:#fff;margin:0 0 .25em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.o-card p{margin:0;color:#b1bbcf;font-size:.95rem}
.o-card .meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.o-card .meta span{font-size:.78rem;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:#d6dcea}
.live-dot{font-size:.74rem;font-weight:700;color:#8fe0ae;display:inline-flex;align-items:center;gap:6px}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#34c46e;box-shadow:0 0 0 4px rgba(52,196,110,.18)}

/* flags inline */
.flag-img{width:22px;height:22px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:-5px;border:1.5px solid var(--gold)}
.country .flag img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}

@media (max-width:900px){
  .orbit-grid,.orbit-grid.flip{grid-template-columns:1fr}
  .orbit-grid.flip > .orbit{order:-1}
  .orbit{--size:min(460px,88vw)}
}
@media (max-width:420px){
  .planet{--p:calc(var(--size) * .19)}
  .o-card{grid-template-columns:1fr;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .ring,.planet .body{animation:none}
}

/* ==========================================================================
   Expert modal (opens like a page, closes with ✕ / Esc / back button)
   ========================================================================== */
.xmodal{position:fixed;inset:0;z-index:1100;background:rgba(5,10,22,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.xmodal.open{opacity:1;visibility:visible}
.xmodal-box{position:relative;width:min(760px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;border-radius:28px;
  background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#e8ecf5;border:1px solid rgba(240,199,94,.3);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);transform:translateY(30px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.xmodal.open .xmodal-box{transform:none}
.xm-head{padding:30px 84px 20px 30px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.xm-head h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.4em 0 .3em}
.xm-head p{color:#b1bbcf;margin:0;max-width:52ch}
.xm-avatars{display:flex}
.xm-avatars img{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;margin-left:-10px;background:var(--night-2)}
.xm-avatars img:first-child{margin-left:0}
.xm-online{display:inline-flex;align-items:center;gap:8px;margin-left:14px;font-size:.85rem;color:#8fe0ae;font-weight:700}
.xm-online::before{content:"";width:9px;height:9px;border-radius:50%;background:#34c46e;box-shadow:0 0 0 4px rgba(52,196,110,.2)}
.xm-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:1.25rem;cursor:pointer}
.xm-close:hover{background:var(--gold);color:var(--night)}
.xm-body{padding:24px 30px 30px;display:grid;gap:22px}
.xm-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xm-opt{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;text-decoration:none;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s,transform .2s}
.xm-opt:hover{border-color:var(--gold);background:rgba(240,199,94,.08);transform:translateY(-2px)}
.xm-opt i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;background:rgba(240,199,94,.15);color:var(--gold-light)}
.xm-opt.wa i{background:#25d366;color:#fff}
.xm-opt b{display:block}
.xm-opt small{color:#a9b3c9}
.xm-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-light);margin:0 0 12px;font-weight:700}
.xm-social{display:flex;flex-wrap:wrap;gap:10px}
.xm-social a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;text-decoration:none;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:600;font-size:.92rem}
.xm-social a:hover{background:var(--gold);color:var(--night);border-color:var(--gold)}
.xm-hours{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:.9rem}
.xm-hours div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);color:#b1bbcf}
.xm-hours b{display:block;color:#fff}
body.modal-open{overflow:hidden}
@media (max-width:640px){
  .xmodal{padding:0;place-items:stretch}
  .xmodal-box{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .xm-options,.xm-hours{grid-template-columns:1fr}
  .xm-head{padding:24px 76px 18px 20px}.xm-body{padding-left:20px;padding-right:20px}
  .xm-head > div{flex-wrap:wrap;gap:8px}.xm-online{margin-left:0}
}

/* ==========================================================================
   Mobile network operators (MNO) coverage
   ========================================================================== */
.mno-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
.mno-group{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.mno-group .cty{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:.9rem;width:100%;margin-bottom:2px}
.mno{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#fff;color:var(--night);font-weight:700;font-size:.8rem;white-space:nowrap}
.mno::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot,#999);box-shadow:0 0 0 2px rgba(0,0,0,.06)}
.mno-title{font-size:.88rem;color:#a9b3c9;margin-bottom:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mno-title b{color:var(--gold-light)}
.o-card .mnos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.o-card .mnos .mno{font-size:.74rem;padding:4px 9px}
@media (max-width:900px){.mno-strip{grid-template-columns:1fr}}

/* ==========================================================================
   Key message card: phone mockup (left) + copy (right)
   ========================================================================== */
.msg-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center;background:#fff;border-radius:34px;padding:clamp(22px,4vw,48px);box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden}
.msg-card::before{content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.22),transparent 65%)}
.msg-visual{position:relative;display:grid;place-items:center;min-height:540px;border-radius:26px;background:var(--night);background-image:var(--stars);background-size:220px 220px;padding:28px 10px}
.msg-visual::after{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;top:12%;left:19%;background:radial-gradient(circle at 35% 30%,#fff3cf,#f0c75e 40%,#b8891f 80%);opacity:.22;filter:blur(2px)}
.phone{position:relative;z-index:1;width:min(290px,100%);aspect-ratio:9/18.5;border-radius:44px;background:#0b0f19;padding:11px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 2px #2a3242}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#eef1f6;display:flex;flex-direction:column}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:14px;background:#0b0f19;z-index:3}
.phone-status{display:flex;justify-content:space-between;padding:10px 20px 4px;font-size:.7rem;font-weight:700;color:var(--night)}
.phone-app{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.phone-app .av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.phone-app > div{min-width:0}
.phone-app b{display:block;font-size:.88rem;line-height:1.2}
.phone-app small{display:block;color:var(--muted);font-size:.68rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-app > i{flex:none}
.phone-chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden}
.sms{align-self:flex-start;max-width:88%;background:#fff;border-radius:16px 16px 16px 4px;padding:9px 11px;font-size:.78rem;line-height:1.35;box-shadow:0 4px 12px -8px rgba(0,0,0,.4);animation:sms-in .45s cubic-bezier(.2,.8,.2,1) both}
.sms .from{display:block;font-size:.64rem;font-weight:800;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.sms .time{display:block;text-align:right;font-size:.6rem;color:var(--muted);margin-top:3px}
.typing{align-self:flex-start;background:#fff;border-radius:16px;padding:10px 14px;display:flex;gap:4px;animation:sms-in .3s both}
.typing span{width:6px;height:6px;border-radius:50%;background:#9aa3b5;animation:dot 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes sms-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.phone-input{display:flex;align-items:center;gap:8px;margin:8px 10px 14px;padding:8px 8px 8px 14px;border-radius:999px;background:#fff;font-size:.74rem;color:var(--muted)}
.phone-input span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-input i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-size:.7rem}
.msg-badge{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;color:#fff;font-size:.8rem;font-weight:700;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:float-bob 6s ease-in-out infinite}
.msg-badge i{color:var(--gold-light)}
/* "Delivered in seconds" is the headline claim of this card, so it wears gold */
.msg-badge.b1{top:30%;left:3%;color:var(--night);
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border-color:rgba(255,255,255,.55);
  box-shadow:0 14px 30px -14px rgba(212,165,55,.75)}
.msg-badge.b1 i{color:var(--night)}
.msg-badge.b2{bottom:24%;right:3%;animation-delay:-3s}
.msg-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.msg-copy .lead{font-size:1.15rem;font-weight:600;color:var(--night)}
.msg-copy p{color:var(--muted);font-size:1.05rem}
/* same square edge and same gold quotation mark as the revenue card */
.msg-copy blockquote{position:relative;margin:20px 0;padding:34px 20px 18px 20px;border-left:4px solid var(--gold);
  background:var(--gold-tint);border-radius:0;color:#2b3551}
.msg-copy blockquote .quote-mark{position:absolute;top:-.04em;left:.1em;font:900 4.6rem/1 Georgia,"Times New Roman",serif;
  color:var(--gold);opacity:.38;pointer-events:none;user-select:none}
.msg-copy blockquote{padding-bottom:44px}
.msg-copy blockquote .quote-mark.close{top:auto;left:auto;right:.18em;bottom:-.26em}
.msg-copy blockquote p{color:#2b3551;margin:0 0 .7em}
.msg-copy blockquote p:last-child{margin:0}
.msg-sign{display:flex;align-items:center;gap:12px;margin-top:18px}
.msg-sign img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.msg-sign b{display:block}
.msg-sign span{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.msg-card{grid-template-columns:1fr}.msg-visual{min-height:480px}}

/* ==========================================================================
   Step cards: colour changes per card, rail progress on top, thank-you finale
   ========================================================================== */
.steps-section{transition:background-color .6s ease}
.step-stack{position:relative;display:grid;gap:30px;padding-bottom:10px}
.step-card{position:sticky;top:calc(var(--nav-h) + 20px + var(--i,0) * 16px);border-radius:30px;padding:clamp(22px,3.6vw,40px);color:#fff;background:var(--bg,#0e1a30);
  background-image:var(--stars);background-size:220px 220px;box-shadow:0 -14px 44px -22px rgba(0,0,0,.55);min-height:380px;display:flex;flex-direction:column;gap:26px;transform-origin:center top;will-change:transform;overflow:hidden}
.step-card::after{content:"";position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(240,199,94,.18),transparent 65%);pointer-events:none}
.rail{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.rail::before{content:"";position:absolute;left:22px;right:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 10px,transparent 10px 16px)}
.rail .track{position:absolute;left:22px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));width:calc((100% - 44px) * var(--progress,0))}
.rail .stop{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);color:#cdd5e4}
.rail .stop.done{background:var(--gold);border-color:var(--gold);color:var(--night)}
.rail .stop.now{width:56px;height:56px;background:#fff;color:var(--night);border:3px solid var(--gold);box-shadow:0 0 0 6px rgba(240,199,94,.25),0 0 26px rgba(240,199,94,.5);font-size:1.15rem}
.rail .stop.now::before{content:"\f239";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:1rem;color:var(--gold-light)}
.step-body{display:grid;grid-template-columns:auto 1fr .9fr;gap:clamp(18px,3vw,40px);align-items:center;flex:1}
.step-no{font:900 clamp(3.2rem,7vw,5.6rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--gold-light);align-self:start}
.step-body h3{color:#fff;font-size:clamp(1.4rem,2.6vw,2.1rem)}
.step-body p{color:rgba(255,255,255,.8);font-size:1.05rem;margin:0}
.step-label{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.step-visual{border-radius:22px;padding:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px;align-items:center}
.step-visual .big-ic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-size:1.5rem;box-shadow:0 0 0 8px rgba(240,199,94,.18)}
.step-visual .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.step-visual .chip.ok::before{color:var(--gold-light)}
/* finale */
.step-card.finale{background:linear-gradient(135deg,#f6d98a,#d4a537 50%,#a97e1c);color:var(--night)}
.step-card.finale::after{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%)}
.step-card.finale .rail::before{background:repeating-linear-gradient(90deg,rgba(14,26,48,.25) 0 10px,transparent 10px 16px)}
.step-card.finale .rail .track{background:var(--night)}
.step-card.finale .rail .stop.done{background:var(--night);border-color:var(--night);color:var(--gold-light)}
.step-card.finale .rail .stop.now{background:var(--night);color:var(--gold-light);border-color:#fff}
.step-card.finale .rail .stop.now::before{color:var(--night)}
.finale-body{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.finale-body h3{color:var(--night);font-size:clamp(1.8rem,3.6vw,3rem)}
.finale-body p{color:#3a2d0c;font-size:1.1rem}
.finale-medal{justify-self:center;width:min(230px,70%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--night);color:var(--gold-light);box-shadow:0 0 0 12px rgba(14,26,48,.12),0 26px 50px -20px rgba(0,0,0,.6)}
.finale-medal i{font-size:3rem;display:block;margin-bottom:8px}
.finale-medal b{font-size:1.05rem;color:#fff}
@media (max-width:860px){
  .step-card{top:calc(var(--nav-h) + 10px + var(--i,0) * 10px);min-height:auto}
  .step-body,.finale-body{grid-template-columns:1fr}
  .step-no{font-size:3rem}
  .rail .stop{width:34px;height:34px;font-size:.78rem}
  .rail .stop.now{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.step-card{position:relative;top:auto!important;transform:none!important}}

/* ==========================================================================
   Homepage dashboard mockup (matches the real customer dashboard)
   ========================================================================== */
.dmock{--mock-brand:#d4a537;display:grid;grid-template-columns:230px 1fr;gap:16px;padding:16px;background:#f3f3f3;font-size:.84rem;color:#333}
.dm-side{background:#fff;border-radius:18px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25);padding:8px 10px 14px;align-self:start}
.dm-user{display:flex;align-items:center;gap:14px;padding:14px 12px;border-bottom:1px solid #eee;margin:0 -10px 8px;color:var(--mock-brand);font-weight:600;transition:color .3s}
.dm-item{display:flex;align-items:center;gap:16px;padding:12px 12px;border-radius:14px;color:#333}
.dm-item i:first-child{width:18px;text-align:center;color:#333}
.dm-item .chev{margin-left:auto;font-size:.65rem;color:#777}
.dm-item.on{background:#f4f4f4;color:var(--mock-brand);transition:color .3s}
.dm-item.on i:first-child{color:var(--mock-brand)}
.dm-main{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-content:start;min-width:0}
.dm-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:16px;color:#fff;font-size:1.25rem;background:linear-gradient(90deg,var(--mock-brand),#1e2a44);transition:background .4s;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.dm-top span{font-weight:600}
.dm-card{background:#fff;border-radius:16px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25);min-width:0}
.dm-send{display:grid;place-items:center;min-height:100px;background:linear-gradient(120deg,var(--mock-brand),#1e2a44);transition:background .4s}
.dm-send span{background:var(--mock-brand);color:#fff;font-weight:700;padding:10px 24px;border-radius:999px;border:2px solid rgba(255,255,255,.35);filter:brightness(1.05)}
.dm-daily{text-align:center;padding-bottom:14px}
.dm-daily h4{font-weight:500;font-size:.95rem;margin:0;padding:14px;border-bottom:1px solid #eee;color:#333;font-family:var(--font-body)}
.dm-daily p{margin:14px 0 8px}
.dm-daily p b{color:var(--mock-brand);transition:color .3s}
.dm-pie{width:130px;height:130px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 40% 40%,#8ee68e,#2ecc40 70%);position:relative;transition:background .5s ease}
.dm-pie::after{content:"";position:absolute;left:50%;top:0;height:50%;width:2px;background:#fff}
.dm-legend{font-size:.72rem;margin-top:10px}
.dm-legend::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot,#2ecc40);margin-right:6px}
.dm-annual{grid-row:span 2;padding:12px}
.dm-annual h4{margin:4px 6px 6px;font-size:.95rem;font-family:var(--font-body);font-weight:600}
.dm-chart{width:100%;height:auto;display:block}
.dm-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dm-tile{display:flex;align-items:center;gap:12px;padding:14px}
.dm-tile i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;
  background:var(--tile,#5b5bd6);transition:background .5s ease}
/* the figure carries the same colour, darkened towards the ink so it stays
   readable on white whichever brand is showing (worst case 4.9:1) */
.dm-tile b{display:block;font-size:1rem;color:var(--tile,inherit);transition:color .5s ease}
.dm-tile b{color:color-mix(in srgb,var(--tile,#5b5bd6) 60%,var(--night))}
.swatch-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:22px}
.swatch-row .lbl{font-weight:700;margin-right:4px}
.swatch{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font:600 .88rem var(--font-body);color:var(--night);width:auto;height:auto;box-shadow:none;transition:transform .16s,border-color .16s,box-shadow .16s}
.swatch::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--c);transition:transform .16s}
.swatch:hover{transform:translateY(-2px);border-color:var(--c)}
.swatch:hover::before{transform:scale(1.08)}
.swatch[aria-pressed="true"]{border-color:var(--night);box-shadow:0 0 0 3px rgba(14,26,48,.12);color:var(--c-text,var(--night))}
/* a tick inside the colour itself marks the one being previewed */
.swatch[aria-pressed="true"]::after{content:"";position:absolute;left:14px;top:50%;width:6px;height:11px;margin-top:-7px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);pointer-events:none}
/* the pointer that sits on the colour being previewed */
.swatch .tip{position:absolute;left:19px;top:100%;margin-top:9px;transform:translateX(-50%);display:none;
  background:var(--night);color:#fff;font:700 .7rem var(--font-body);padding:3px 9px;border-radius:999px;white-space:nowrap;z-index:3}
.swatch .tip::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;background:var(--night);transform:rotate(45deg)}
.swatch[aria-pressed="true"] .tip{display:block}
@media (max-width:860px){
  .dmock{grid-template-columns:1fr}
  .dm-side{display:flex;overflow-x:auto;gap:4px;padding:8px}
  .dm-user{border:0;margin:0;padding:10px;white-space:nowrap}
  .dm-item{white-space:nowrap;padding:10px}
  .dm-item .chev{display:none}
  .dm-main{grid-template-columns:1fr}
  .dm-annual{grid-row:auto}
  .dm-tiles{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Customer dashboard (tu.html) — match the real portal look
   ========================================================================== */
.side-user{display:flex;align-items:center;gap:14px;padding:16px 14px;margin:-4px -14px 10px;border-bottom:1px solid var(--line);color:var(--gold-deep);font-weight:700;text-decoration:none}
.side-user i{color:var(--gold)}
.dash.side-collapsed{grid-template-columns:0 1fr}
.dash.side-collapsed .dash-side{visibility:hidden;padding:0;border:0}
.menu-btn{display:grid!important}
.orbit .planet .tag small{display:block;font-size:.66em;font-weight:600;color:var(--gold-light);text-align:center}

/* ==========================================================================
   Hero: sky-blue ice drops falling across the whole hero, image fits the screen
   ========================================================================== */
.hero-ice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .container{position:relative;z-index:1}
@media (min-width:901px){
  .hero-visual{min-height:0}
  .hero-visual{--ih:min(560px,calc(100vh - var(--nav-h) - 120px))}
  .hero-visual > img{height:var(--ih);width:auto;max-width:100%;object-fit:contain;margin:0 auto}
  .hero-visual .blob{width:min(430px,86%,calc(var(--ih) * .8));top:5%}
}

/* ==========================================================================
   Moon logo (country + team orbits)
   ========================================================================== */
.moon > div{width:100%}
.moon img{width:92%;max-width:none;margin:0 auto 6px;filter:drop-shadow(0 2px 3px rgba(255,255,255,.35))}
.moon small{font-weight:800;white-space:nowrap}

/* ==========================================================================
   iPhone-style frame
   ========================================================================== */
.iphone{position:relative;z-index:1;width:min(300px,100%);aspect-ratio:9/19.5;border-radius:56px;padding:5px;
  background:linear-gradient(145deg,#b9b4ab 0%,#6d6962 12%,#2e2d2b 40%,#2e2d2b 60%,#6d6962 88%,#c2bdb4 100%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4),inset 0 0 2px rgba(255,255,255,.5)}
.iphone::before{content:"";position:absolute;inset:5px;border-radius:51px;background:#050505;z-index:0}
.ip-btn{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#3a3936,#8e8a84)}
.ip-action{left:-3px;top:17%;height:5%}
.ip-vol-up{left:-3px;top:25%;height:9%}
.ip-vol-down{left:-3px;top:36%;height:9%}
.ip-power{right:-3px;top:28%;height:14%;background:linear-gradient(270deg,#3a3936,#8e8a84)}
.iphone-screen{position:relative;z-index:1;height:100%;margin:6px;border-radius:46px;overflow:hidden;background:#eef1f6;display:flex;flex-direction:column;color:var(--night)}
.iphone-screen.dark{background:#0b1426;color:#e8ecf5}
.ip-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:27px;border-radius:20px;background:#000;z-index:5;display:flex;align-items:center;justify-content:flex-end;padding-right:9px}
.ip-island span{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4b6b,#0a0f1c 70%)}
.ios-status{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 6px 30px;font-size:.78rem;font-weight:700;flex:none}
.ios-status .i{display:flex;align-items:center;gap:5px;font-size:.66rem}
.ios-status .bat{width:22px;height:11px;border-radius:3px;border:1.5px solid currentColor;padding:1px;position:relative;opacity:.9}
.ios-status .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:1px;background:currentColor}
.ios-status .bat span{display:block;height:100%;width:78%;border-radius:1px;background:currentColor}
.ip-home{flex:none;width:36%;height:5px;border-radius:5px;margin:6px auto 8px;background:currentColor;opacity:.75}
/* message card phone uses the iPhone frame */
.msg-visual .iphone{width:min(292px,100%)}
.msg-visual .phone-app{margin-top:4px}

/* ==========================================================================
   "What your customers get": campaign app inside the iPhone
   ========================================================================== */
.campaign-stage{position:relative;display:grid;place-items:center;padding:30px 0;position:sticky;top:calc(var(--nav-h) + 20px)}
.campaign-stage::before{content:"";position:absolute;width:min(440px,90%);aspect-ratio:1;border-radius:50%;top:8%;
  background:radial-gradient(circle at 35% 30%,#fff3cf,#f0c75e 40%,#b8891f 80%);opacity:.28;filter:blur(1px)}
.campaign-stage .iphone{width:min(310px,88%)}
.campaign-stage .msg-badge.cb1{top:40%;left:-2%}
.campaign-stage .msg-badge.cb2{bottom:18%;right:0;animation-delay:-3s}
.capp{flex:1;display:flex;flex-direction:column;gap:5px;padding:4px 14px 0;font-size:.72rem;overflow:hidden}
.capp-head{display:flex;align-items:center;gap:9px;padding:6px 0 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.capp-head .av{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:.7rem;flex:none}
.capp-head b{display:block;font-size:.8rem}
.capp-head small{color:#8391ad;font-size:.62rem}
.capp-head i{margin-left:auto;color:var(--gold-light)}
.capp-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.capp-row b{font-size:.84rem}
.capp-row.sm{color:#8391ad;margin-top:4px}
.capp-row.sm b{color:#fff;font-size:.74rem}
.capp .badge-live{font-size:.58rem;padding:3px 8px}
.capp-lbl{font-size:.6rem;color:#8391ad;margin-top:3px}
.capp-box{display:flex;justify-content:space-between;gap:8px;background:#0e1a30;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 10px}
.capp-box em{font-style:normal;color:#8fe0ae;font-size:.64rem}
.capp-box.msg{display:block;line-height:1.4}
.capp .var{background:rgba(240,199,94,.18);color:var(--gold-light);padding:0 4px;border-radius:4px}
.capp-send{text-align:center;padding:8px;border-radius:10px;background:var(--gold);color:var(--night);font-weight:800;margin-top:2px}
.capp .bar{margin:4px 0 6px;height:6px}
.capp-nets{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.capp-nets div{border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 3px;font-size:.52rem;color:#8391ad;text-align:center}
.capp-nets b{display:block;color:#fff;font-size:.68rem}
.capp-toast{display:flex;gap:8px;align-items:center;margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);animation:float-bob 5s ease-in-out infinite}
.capp-toast i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--gold);color:var(--night);flex:none}
.capp-toast b{display:block;font-size:.72rem}
.capp-toast small{color:#8391ad;font-size:.6rem}
@media (max-width:860px){.campaign-stage{position:relative;top:auto}}

/* ==========================================================================
   Who it's for: heading + numbered steps aligned with the stacking cards
   ========================================================================== */
.who-section{background-image:var(--doodle);transition:background-color .7s ease}
.steps-section{transition:background-color .7s ease}
.who-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(24px,4vw,56px);align-items:start}
.who-grid > *{min-width:0}
.who-aside{position:sticky;top:calc(var(--nav-h) + 28px)}
/* The order of emphasis is deliberately flipped here: "Who it's for" is the
   headline of this section, and the sentence under it is the supporting line.
   The <h2> stays the semantic heading, so screen readers are unaffected. */
.who-aside h2{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.35;letter-spacing:-.005em;
  font-weight:600;color:var(--ink-2);margin-top:.7em;max-width:30ch}
/* the heading face, a step up from the other pills on the page, but still a
   label above the headline rather than a second headline */
/* the label is the headline: display face, headline scale, no pill chrome */
.who-aside .pill{display:inline-flex;font-family:var(--font-display);
  font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.032em;line-height:1.04;
  padding:0;gap:.3em;background:none;border:0;color:var(--night)}
.who-aside .pill i{font-size:.42em;color:var(--gold-deep);align-self:center}
.who-aside > p.muted{font-size:.98rem;margin-top:.5em}
.who-section .stack-card h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.who-steps{list-style:none;margin:22px 0 26px;padding:0;position:relative;display:grid;gap:6px}
.who-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:3px;border-radius:3px;background:rgba(14,26,48,.12)}
.who-steps li{position:relative;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 0;border-radius:14px;color:var(--muted);font-weight:600;transition:color .3s}
.who-steps .n{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#fff;border:2px solid rgba(14,26,48,.15);color:var(--muted);transition:all .35s}
.who-steps li.done .n{background:var(--gold);border-color:var(--gold);color:var(--night)}
.who-steps li.active{color:var(--night)}
.who-steps li.active .n{background:var(--night);border-color:var(--night);color:var(--gold-light);transform:scale(1.12);box-shadow:0 0 0 6px rgba(212,165,55,.25)}
.who-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.who-num{flex:none;white-space:nowrap;font:900 clamp(2.2rem,4vw,3.2rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:1.5px var(--gold-light)}
.who-num small{font-size:.4em;-webkit-text-stroke:0;color:rgba(255,255,255,.55);font-weight:700}
.stack.who .stack-card{grid-template-columns:1.2fr .8fr}
@media (max-width:980px){
  .who-grid{grid-template-columns:1fr}
  .who-aside{position:relative;top:auto}
  .who-steps{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px}
  .who-steps::before{display:none}
  .who-steps li{flex:none;padding:6px 14px 6px 6px;background:#fff;border-radius:999px;font-size:.85rem}
  .who-steps li:not(.active) .t{display:none}
  .who-steps li:not(.active){padding:6px}
  .who-steps .n{width:34px;height:34px;font-size:.85rem}
  .stack.who .stack-card{grid-template-columns:1fr}
}

/* ==========================================================================
   Ice drops in every "space" section + animated stat counters
   ========================================================================== */
.space-ice{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stats-band{position:relative;overflow:hidden}
.stats-band > .container,.space > .container{position:relative;z-index:1}
.stat b span[data-count]{display:inline-block;min-width:1ch;font:inherit;color:inherit;font-variant-numeric:tabular-nums}
.stat > span{display:block;margin-top:6px}
.stat{position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
.stats[data-counters]:not(.counted) .stat{opacity:.35;transform:translateY(12px)}
.stats.counted .stat:nth-child(2){transition-delay:.12s}
.stats.counted .stat:nth-child(3){transition-delay:.24s}
.stats.counted .stat:nth-child(4){transition-delay:.36s}
.stat.pop b{animation:stat-pop .5s ease}
.stat::after{content:"";position:absolute;left:26px;right:26px;bottom:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s ease .2s}
.stats.counted .stat::after{transform:scaleX(1)}
@keyframes stat-pop{0%{transform:scale(1)}40%{transform:scale(1.12);text-shadow:0 0 22px rgba(240,199,94,.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.stats[data-counters]:not(.counted) .stat{opacity:1;transform:none}.stat.pop b{animation:none}}

/* Live date + clock on the dashboard "Daily Analysis" card */
.dm-clock{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--mock-brand,var(--gold-deep));font-variant-numeric:tabular-nums;transition:color .3s}
.dm-clock i{font-size:.85em}
.dm-daily h4 [data-today],.card-h h2 [data-today]{display:block;margin-top:4px;font-size:.82rem;font-weight:600;color:#555}

/* ==========================================================================
   Hero finishing touches: spacing and curved bottom edge
   ========================================================================== */
.hero .typer{margin:14px 0 40px}
.hero .hero-actions{gap:18px 28px}
.hero{padding-bottom:clamp(110px,11vw,170px)}
/* curved bottom: the hero bows gently into the stats band, traced by a glowing gold line */
.hero-curve{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(56px,7.5vw,118px);z-index:1;pointer-events:none;display:block}
.hero-curve .curve-fill{fill:#0a1426}
.hero-curve .curve-line{fill:none;stroke:url(#curveGold);stroke-width:2;vector-effect:non-scaling-stroke}
.hero-curve .curve-glow{fill:none;stroke:url(#curveGold);stroke-width:10;opacity:.25;vector-effect:non-scaling-stroke;filter:blur(4px)}
.stats-band{background:#0a1426;border-top:0}
@media (max-width:900px){.hero{padding-bottom:90px}.hero .typer{margin:10px 0 30px}}

/* Hero buttons: wide gap with a gold curve between them on large screens; two rows on phones */
.hero-cta{display:flex;align-items:center;flex-wrap:nowrap;gap:0}
.hero-cta .btn{padding:.95em 1.7em;font-size:1.02rem}
.hero .hero-cta{gap:0}
.btn-curve{display:inline-grid;place-items:center;width:110px;height:44px;margin:0 16px;flex:none}
.btn-curve svg{width:100%;height:100%;overflow:visible}
.btn-curve path{fill:none;stroke:var(--gold-light);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7;filter:drop-shadow(0 0 5px rgba(240,199,94,.6));animation:curve-flow 1.6s linear infinite}
.btn-curve circle{fill:var(--gold-light);filter:drop-shadow(0 0 6px rgba(240,199,94,.9))}
@keyframes curve-flow{to{stroke-dashoffset:-22}}
@media (max-width:600px){
  .hero .hero-cta{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:14px}
  .hero-cta .btn{flex:1 1 0;min-width:0;padding:.8em .6em;font-size:.86rem;white-space:nowrap}
  .hero-cta .btn i{font-size:.9em}
  .btn-curve{display:none}
}
@media (prefers-reduced-motion:reduce){.btn-curve path{animation:none}}

/* ==========================================================================
   Recurring revenue: CEO photo (left) + text (right) in one card
   ========================================================================== */
/* ==========================================================================
   Recurring revenue card — all white, no gold. Title across the top, portrait
   on the left, the quotation on the right.
   ========================================================================== */
.ceo-card{display:grid;grid-template-columns:.72fr 1.5fr;
  grid-template-areas:"title title" "side copy";
  border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
/* the title runs the full width of the card, so it can carry real size and still
   sit on one line (measured: 1,048px of the 1,102px available at 1400px) */
.ceo-title{grid-area:title;margin:0;padding:clamp(26px,3.6vw,44px) clamp(24px,3.6vw,48px) 0;
  font-size:clamp(1.6rem,3.5vw,3.2rem);line-height:1.08;letter-spacing:-.028em;color:var(--night)}

.ceo-side{grid-area:side;position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;gap:6px;
  padding:clamp(20px,2.6vw,30px) 24px clamp(26px,3.6vw,44px);background:#fff;color:var(--night)}
/* A true circle. `flex:none` stops the column squeezing or stretching it, and the
   image carries its own 1:1 ratio so it can never drive the frame taller. */
.ceo-photo{position:relative;z-index:1;flex:none;width:min(210px,74%);aspect-ratio:1;border-radius:50%;
  padding:10px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 34px -22px rgba(14,26,48,.35)}
.ceo-photo img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:0;background:#fff}
.ceo-name{position:relative;z-index:1;margin-top:16px;font-size:1.15rem;color:var(--night)}
.ceo-role{position:relative;z-index:1;color:var(--muted);font-weight:600;font-size:.9rem}

.ceo-copy{grid-area:copy;position:relative;min-width:0;align-self:center;
  padding:clamp(6px,1.4vw,14px) clamp(24px,3.6vw,48px) clamp(26px,3.6vw,44px) clamp(8px,1.6vw,22px)}
.ceo-copy p{color:#2b3551;font-size:1.05rem;font-style:italic}
/* the quotation marks stay, in a quiet neutral rather than gold */
.ceo-copy .quote-mark{position:absolute;top:-.30em;left:-.16em;font:900 5.2rem/1 Georgia,"Times New Roman",serif;
  color:var(--ink-2);opacity:.16;pointer-events:none;user-select:none}
.ceo-copy .quote-mark.close{top:auto;left:auto;right:.02em;bottom:-.20em}

/* the point the card makes, set underneath it like any other section note */
.route-note{margin-top:clamp(22px,3vw,34px);max-width:70ch}
.route-note h3{font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 .35em;color:var(--night)}
.route-note p{color:var(--muted);font-size:1.05rem;margin:0}

@media (max-width:860px){
  .ceo-card{grid-template-columns:1fr;grid-template-areas:"title" "side" "copy"}
  .ceo-title{padding:26px 22px 0}
  .ceo-side{padding:18px 22px 6px}
  .ceo-copy{padding:8px 22px 30px}
  .ceo-copy .quote-mark{font-size:3.6rem;left:-.06em}
  .ceo-copy .quote-mark.close{bottom:-.14em}
}
#revenue .mini-cards{margin-top:28px}
@media (max-width:860px){
  .ceo-card{grid-template-columns:1fr}
  .ceo-side::after{right:0;top:auto;bottom:0;width:100%;height:4px}
  .ceo-side{padding-bottom:34px}
  .ceo-copy{padding:10px 22px 28px}
}

/* Official Textify Africa logos */
.dash-side .brand img{height:44px}
.moon img{width:56%!important;margin:0 auto 4px}
.footer .brand img{height:54px}

.ceo-side{gap:8px}
.ceo-name{margin-top:18px}
@media (max-width:420px){
  .hero-cta .btn{font-size:.78rem;padding:.78em .5em}
  .msg-copy blockquote .quote-mark{font-size:3.6rem}
  .msg-copy blockquote .quote-mark.close{bottom:-.22em}
}

/* keep the floating badges clear of the phone screen */
.msg-visual{padding-left:6px;padding-right:6px}
.msg-visual .iphone{width:min(258px,82%)}
.msg-badge.b1{top:16%;left:-1%}
.msg-badge.b2{bottom:14%;right:-1%}
@media (max-width:1100px){.msg-badge{font-size:.72rem;padding:7px 10px}}
@media (max-width:480px){.msg-badge.b1{left:-2%}.msg-badge.b2{right:-2%}}

/* badges: compact chips tucked beside the phone, never over the screen */
.msg-visual .iphone{width:min(238px,74%)}
.msg-visual .msg-badge{max-width:120px;white-space:normal;line-height:1.25;font-size:.72rem;padding:8px 10px;gap:7px;text-align:left}
.msg-visual .msg-badge i{font-size:.85em}
.msg-badge.b1{top:12%;left:0}
.msg-badge.b2{bottom:12%;right:0}

/* LinkedIn on the team cards and orbit photos */
.o-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 14px;border-radius:999px;text-decoration:none;
  font-size:.84rem;font-weight:700;color:#fff;background:#0a66c2;border:1px solid rgba(255,255,255,.18);transition:background .2s,transform .2s}
.o-link:hover{background:#0b79e3;transform:translateY(-1px)}
.o-link i{font-size:.95em}
.planet-li{position:absolute;right:-4%;bottom:-4%;z-index:3;width:34%;max-width:40px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:#0a66c2;color:#fff;font-size:.8rem;text-decoration:none;
  border:2px solid var(--night);box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.planet-li:hover{background:#0b79e3}
@media (max-width:420px){.o-link{font-size:.78rem;padding:5px 12px}}

/* ==========================================================================
   PLUG IN OUR API — a curved monitor typing a live call, copy beside it
   The screen curves with a wide border-radius plus a shallow 3D rotation, so
   it reads as a physical monitor rather than a flat card.
   ========================================================================== */
.api-section{background:var(--night);background-image:var(--stars);background-size:220px 220px;color:#fff;overflow:hidden}
.api-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,68px);align-items:center}

.monitor-wrap{perspective:1600px;display:flex;flex-direction:column;align-items:center}
/* A big elliptical radius — small across, large down — bows the left and right
   sides outward, which is what makes the bezel read as a curved panel. */
/* --mon is the monitor's own colour; it cycles, and everything that should
   pick up the colour is written in terms of it */
/* the glow used to cycle through five colours; the monitor is meant to stand
   still, so it keeps one steady gold */
.monitor-wrap{--mon:#d4a537}
@keyframes mon-hue{
  0%   {--mon:#d4a537}
  20%  {--mon:#3ecf1f}
  40%  {--mon:#2f6fe4}
  60%  {--mon:#e5484d}
  80%  {--mon:#9b51e0}
  100% {--mon:#d4a537}
}
@property --mon{syntax:"<color>";inherits:true;initial-value:#d4a537}
.monitor{position:relative;width:100%;padding:18px 20px 26px;
  border-radius:40px 40px 40px 40px / 92px 92px 74px 74px;
  background:linear-gradient(170deg,#28364f,#111c30 46%,#0a1221);
  border:1px solid rgba(255,255,255,.14);
  /* plain shadow first, so a browser without color-mix keeps it */
  box-shadow:0 44px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14);
  box-shadow:0 44px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14),
             0 0 0 2px color-mix(in srgb,var(--mon) 55%,transparent),
             0 26px 70px -34px color-mix(in srgb,var(--mon) 60%,transparent);
  transform:rotateX(5deg);transform-style:preserve-3d}
.monitor-screen{position:relative;overflow:hidden;background:#070d18;
  border-radius:30px 30px 30px 30px / 74px 74px 58px 58px;
  border:1px solid rgba(255,255,255,.09);min-height:352px;display:flex;flex-direction:column;
  box-shadow:inset 0 0 70px rgba(0,0,0,.95),inset 0 0 0 1px rgba(240,199,94,.07);
  box-shadow:inset 0 0 70px rgba(0,0,0,.95),
             inset 0 0 0 1px color-mix(in srgb,var(--mon) 30%,transparent),
             inset 0 0 44px -10px color-mix(in srgb,var(--mon) 26%,transparent)}
/* barrel shading: the glass falls away towards both edges */
.monitor-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.62),transparent 14%,transparent 86%,rgba(0,0,0,.62)),
    radial-gradient(135% 105% at 50% 46%,transparent 50%,rgba(0,0,0,.5) 100%)}
.monitor-glare{position:absolute;left:9%;right:9%;top:14px;height:46%;pointer-events:none;z-index:1;
  border-radius:50% 50% 46% 46% / 62% 62% 100% 100%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 72%)}
.monitor-neck{width:88px;height:26px;background:linear-gradient(180deg,#22314a,#131f33);
  border-radius:0 0 8px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px -6px color-mix(in srgb,var(--mon) 55%,transparent)}
.monitor-foot{width:min(300px,62%);height:12px;border-radius:999px;
  background:linear-gradient(180deg,#26364f,#0e1728);box-shadow:0 22px 34px -18px rgba(0,0,0,.9)}

.mon-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#0c1524;
  border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.mon-bar i{width:10px;height:10px;border-radius:50%;background:#2b3a55}
.mon-bar i:first-child{background:#e5484d}.mon-bar i:nth-child(2){background:#e8b339}.mon-bar i:nth-child(3){background:#3ecf1f}
.mon-file{margin-left:10px;font:600 .78rem var(--font-body);color:#93a3bd}
.mon-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 .72rem var(--font-body);
  color:var(--gold-light);color:color-mix(in srgb,var(--mon) 70%,#fff);
  text-transform:uppercase;letter-spacing:.09em}
.mon-live b{width:7px;height:7px;border-radius:50%;background:#3ecf1f;box-shadow:0 0 0 0 rgba(62,207,31,.7);animation:mon-pulse 1.8s infinite}
@keyframes mon-pulse{70%{box-shadow:0 0 0 7px rgba(62,207,31,0)}100%{box-shadow:0 0 0 0 rgba(62,207,31,0)}}

.mon-code{flex:1;margin:0;padding:16px 18px;overflow:hidden;white-space:pre-wrap;word-break:break-word;
  font:500 clamp(.72rem,1.05vw,.84rem)/1.75 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:#c8d6ee}
.mon-code .k{color:#f0c75e}.mon-code .s{color:#7ee787}.mon-code .c{color:#6b7c99;font-style:italic}
.mon-code .p{color:#79b8ff}.mon-code .n{color:#ffab70}
.mon-caret{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;background:var(--mon);animation:mon-blink 1s steps(1) infinite}
@keyframes mon-blink{50%{opacity:0}}
.mon-out{flex:none;border-top:1px solid rgba(255,255,255,.07);background:#08101c;padding:0 18px;max-height:0;
  overflow:hidden;transition:max-height .5s ease,padding .5s ease;
  font:600 .76rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7ee787}
.mon-out.show{max-height:160px;padding:12px 18px}
.mon-out .ok{color:#3ecf1f}.mon-out .dim{color:#6b7c99}

.api-copy h2{font-size:clamp(1.9rem,3.5vw,2.7rem);margin-top:.5em;color:#fff}
.api-copy .lead{font-size:1.16rem;font-weight:700;color:var(--gold-light);margin-bottom:.8em}
.api-copy p{color:#b9c6dc;font-size:1.04rem}
.api-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.api-points li{display:flex;gap:13px;align-items:flex-start}
.api-points i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:rgba(240,199,94,.13);color:var(--gold-light);font-size:.9rem}
.api-points b{display:block;color:#fff;font-size:.98rem;margin-bottom:2px}
.api-points div{color:#93a3bd;font-size:.92rem;line-height:1.55}
.api-points code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;color:var(--gold-light);
  background:rgba(240,199,94,.12);padding:1px 6px;border-radius:5px}

@media (max-width:980px){
  .api-grid{grid-template-columns:1fr}
  /* a narrow box needs a gentler curve, or the bezel reads as a blob */
  .monitor{transform:none;padding:12px 12px 18px;border-radius:26px 26px 26px 26px / 44px 44px 36px 36px}
  .monitor-screen{min-height:290px;border-radius:19px 19px 19px 19px / 34px 34px 28px 28px}
  .monitor-screen::after{background:radial-gradient(140% 110% at 50% 46%,transparent 56%,rgba(0,0,0,.45) 100%)}
  .mon-code{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  .mon-caret,.mon-live b,.monitor-wrap{animation:none}
  .mon-out{transition:none}
}

/* the value pills fade in behind the lines as the chart is redrawn */
.dm-tag{animation:dm-tag-in .5s .5s both}
@keyframes dm-tag-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dm-tag{animation:none}}

/* =====================================================================
   THE FLOATING CARDS ON A PHONE
   The glass treatment works over the photograph on a wide screen, but on a
   phone the cards sit over the gold moon, and white-on-gold through a
   translucent panel is not readable. Below 900px they become solid white
   cards with dark text.
   ===================================================================== */
@media (max-width:900px){
  .float-chip{
    background:#fff;
    border-color:rgba(14,26,48,.12);
    color:var(--ink);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 14px 30px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.9)}
  .float-chip span{color:var(--ink)}
  .float-chip i{background:var(--gold-tint);color:var(--gold-deep);
    border-color:var(--gold-line)}
  .float-chip .chip-flags{background:none;border:0}
  /* "infrastructure." is wider than the old cap, so the words used to sit
     outside the card; a little more room and a break rule keeps them inside */
  .float-chip{max-width:146px;overflow-wrap:break-word}
  .float-chip span{min-width:0}
  /* the flags card carries a row of three flags as well as its words, which
     will not fit side by side in a phone-width card — so it stacks */
  .chip-5{flex-direction:column;align-items:flex-start;gap:5px;padding:9px 11px}
  .chip-5 span:not(.chip-flags){white-space:normal}
  .chip-flags img{box-shadow:0 0 0 1px rgba(14,26,48,.25)}
}

/* =====================================================================
   THE MONITOR STANDS STILL
   It used to grow as the call was typed and again when the response
   appeared, which pushed everything under it up and down the page. The
   screen now has a fixed height; a hidden twin of the finished call holds
   the block open from the first frame, and the response sits in space
   that is always reserved. The monitor is the same size from the first
   character to the last.
   ===================================================================== */
.monitor-screen{height:462px;min-height:0}
.mon-code{flex:1;min-height:0;overflow:hidden}
.mon-stack{display:grid}
.mon-stack > *{grid-area:1/1}
.mon-ghost{visibility:hidden;pointer-events:none;user-select:none}
.mon-out{flex:none;height:46px;max-height:none;padding:10px 18px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  opacity:0;transition:opacity .35s ease}
.mon-out.show{max-height:none;padding:10px 18px;opacity:1}

@media (max-width:900px){
  .monitor-screen{height:430px}
}
@media (max-width:480px){
  /* the lines wrap on a narrow screen, so the code is set smaller to fit whole */
  .monitor-screen{height:444px}
  .mon-code{font-size:.64rem;padding:12px 12px}
  .mon-out{height:70px;font-size:.66rem}
}

/* =====================================================================
   THE TYPING PILL IN THE HERO
   A hidden copy of the longest phrase sits in the same grid cell as the
   live text, so the pill is already at its tallest before the first
   character appears and the buttons under it never move.
   ===================================================================== */
.typer{align-items:flex-start}
.typer-slot{display:grid;min-width:0}
.typer-slot > *{grid-area:1/1;min-width:0}
.typer-ghost{visibility:hidden;pointer-events:none;user-select:none}
.typer .spark,.typer .caret{margin-top:.2em}

/* =====================================================================
   THE PHONE MOCK STAYS THE SIZE IT IS
   The messages arrive one at a time, and the card holding the phone is a
   grid. An `fr` column is floored at its content's minimum width, so each
   new bubble was widening the column and re-wrapping the heading beside
   it, and the phone itself was growing past its own aspect ratio. The
   columns are now floored at zero and the phone clips its chat instead.
   ===================================================================== */
.msg-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.msg-visual,.msg-copy{min-width:0}
@media (max-width:900px){
  .msg-card{grid-template-columns:minmax(0,1fr)}
}
.iphone{min-height:0}
.iphone-screen{min-height:0}
.phone-chat{flex:1;min-height:0;overflow:hidden}
.phone-chat .sms{flex:none}

/* The screen is taken out of flow and pinned inside the handset, so the phone's
   height comes from its aspect ratio alone: arriving messages fill the screen
   and are clipped by it, they can no longer stretch the phone. The 11px inset
   is the 5px shell padding plus the 6px screen margin it replaces. */
.iphone-screen{position:absolute;inset:11px;height:auto;margin:0}

/* =====================================================================
   THE FLOATING CARDS SIZE TO THEIR OWN WORDS
   Each card is absolutely positioned, so its width was being decided by
   whatever space happened to be left between its anchor point and the
   edge of the photo — the flags card was handed 127px and its label
   needs 165px, so the words sat outside the card. Sizing to max-content
   makes the card as wide as its own text, and the cap keeps it tidy.
   ===================================================================== */
/* Sizing to max-content fixed the overflow but let the widest card run off the
   right of the page between 940 and 1280px. The cards keep the browser's own
   shrink-to-fit instead — which always respects the space available — and the
   label that used to refuse to wrap is allowed to wrap, so its words stay
   inside the card at every width. */
/* Shrink-to-fit alone crushed the cards into a few characters per line, and
   breaking words was worse. A floor width instead: wide enough that the longest
   word in each card fits on a line, narrow enough that the card still sits on
   the page. Words are never broken mid-way. */
.float-chip{min-width:152px;overflow-wrap:normal}
.float-chip > span{min-width:0}
.chip-5{min-width:196px}
.chip-5 span:not(.chip-flags){white-space:normal}
@media (max-width:900px){
  /* the ring is small on a phone, so the cards are capped rather than floored —
     but still wide enough that the longest word in each one fits on a line */
  .float-chip{max-width:146px;min-width:118px}
  .chip-5{min-width:126px}
}

/* Between 901 and 1320px the hero photo sits close to the right edge, and the
   upper-right card — anchored at 91.5% of it and centred on that point — hung
   11 to 23px past the edge of the page. The two right-hand cards move inwards
   across that band, and their opposite numbers move with them so the ring stays
   symmetrical. */
@media (min-width:901px) and (max-width:1320px){
  .chip-2{--x:84%}
  .chip-3{--x:16%}
  .chip-5{--x:72%}
  .chip-4{--x:28%}
}