/* ==========================================================================
   Eroyal Africa — bulk SMS for Tanzania
   One stylesheet, no framework, no build step.

   The palette is sampled straight out of the logo: the violet at the top of
   the mark, the blue at its foot, and the lime of the crown and the swoosh.
   ========================================================================== */

:root{
  /* --- brand, measured from static/images/logo.png --------------------- */
  --violet:#5e19ec;          /* top of the logo background            */
  --violet-deep:#4a0fc4;
  --indigo:#3b3cf0;          /* the middle of the gradient            */
  --blue:#1b81fd;            /* foot of the logo background           */
  --blue-deep:#1467f8;
  --blue-light:#1f91fd;
  --lime:#e0f82a;            /* the crown, the swoosh, the "e"        */
  --lime-deep:#5e6900;       /* lime dark enough to read on lime-soft  */
  --lime-soft:#f7fdcf;

  --brand:linear-gradient(150deg,var(--violet) 0%,var(--indigo) 46%,var(--blue) 100%);
  --brand-soft:linear-gradient(150deg,rgba(94,25,236,.10),rgba(27,129,253,.10));

  /* --- surface --------------------------------------------------------- */
  --ink:#140a33;             /* headings: violet-tinted near-black     */
  --ink-2:#3a3060;
  --muted:#6a6390;
  --paper:#f6f5fe;
  --paper-2:#efeeff;
  --white:#fff;
  --line:#e4e1f6;
  --night:#0f0730;           /* dark sections                          */
  --night-2:#190c48;

  --ok:#1f9d55; --warn:#d98e04; --danger:#d9443a;

  --r-lg:28px; --r:18px; --r-sm:10px;
  --shadow:0 20px 44px -26px rgba(20,10,51,.45);
  --shadow-lg:0 34px 70px -38px rgba(20,10,51,.6);
  --nav-h:74px;
  --font:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink-2);
  background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
b,strong{font-weight:700;color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.15;margin:0 0 .5em;
  letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.4vw,2.9rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.narrow{max-width:62ch}
.center .narrow{margin-inline:auto}
.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;text-decoration:none;
  font:700 1rem/1 var(--font);padding:.92em 1.6em;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 14px 30px -14px rgba(94,25,236,.7)}
.btn-brand:hover{box-shadow:0 18px 36px -14px rgba(94,25,236,.85)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#eaff4f}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.nav .btn-line{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.nav .btn-line:hover{background:#fff;color:var(--violet);border-color:#fff}
.nav .btn-brand{background:var(--lime);color:var(--ink);box-shadow:0 12px 26px -14px rgba(224,248,42,.8)}
.nav .btn-brand:hover{background:#eaff4f}
.btn-line:hover{border-color:var(--violet);color:var(--violet)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:.6em 1.1em;font-size:.9rem}
.btn-lg{padding:1.05em 2em;font-size:1.06rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:999px;
  background:var(--paper-2);color:var(--violet-deep);font-weight:700;font-size:.9rem;
  border:1px solid var(--line)}
.pill-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.pill-lime{background:var(--lime-soft);border-color:#e2f27a;color:var(--lime-deep)}

/* ---------- Navigation ---------- */
/* The chrome wears the hero: the same violet-to-blue the page opens with, so
   the navbar, the page and the footer read as one piece. */
.nav{position:sticky;top:0;z-index:100;color:#fff;background:var(--night);
  border-bottom:1px solid rgba(255,255,255,.1)}
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(94,25,236,.92),rgba(59,60,240,.72) 46%,rgba(27,129,253,.85));}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.7}
.nav-in{position:relative;z-index:1}
.nav-in{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:42px;height:42px;border-radius:12px}
.brand b{font:800 1.18rem/1 var(--font);color:var(--ink);letter-spacing:-.02em}
.nav .brand b{color:#fff}
.nav .brand small{color:rgba(255,255,255,.72)}
.brand small{display:block;font-size:.62rem;letter-spacing:.22em;color:var(--muted);font-weight:700;
  text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 auto;padding:0}
.nav-links a{display:block;padding:.55em .85em;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.95rem;color:rgba(255,255,255,.88);white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--lime);background:rgba(255,255,255,.12)}
.nav-end{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.nav .lang{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.nav .lang a{color:rgba(255,255,255,.8)}
.nav .lang a.on{background:var(--lime);color:var(--ink)}
.lang a{padding:.42em .8em;font:700 .8rem/1.4 var(--font);text-decoration:none;color:var(--muted)}
.lang a.on{background:var(--brand);color:#fff}
.nav-toggle{display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12);color:#fff;
  cursor:pointer;font-size:1.2rem}
@media (max-width:1040px){
  .nav-links,.nav-end .btn:not(.btn-brand){display:none}
  .nav-toggle{display:grid;place-items:center}
  .nav-end{margin-left:auto}
}
@media (max-width:620px){
  .nav-end .btn{display:none}
  .brand small{display:none}
}

/* ---- the menu on small devices -----------------------------------------
   It wears the logo: the violet-to-blue gradient of the mark, with the lime
   picking out the icons and the active language. On a phone it collapses
   straight down out of the navbar instead of sliding in from the side.
   ----------------------------------------------------------------------- */
.mnav{position:fixed;inset:0;z-index:200;background:rgba(10,4,34,.6);backdrop-filter:blur(5px);
  display:flex;justify-content:flex-end;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.mnav.open{opacity:1;visibility:visible}
.mnav-panel{position:relative;width:min(420px,100%);height:100dvh;color:#fff;
  background:linear-gradient(165deg,var(--violet) 0%,var(--indigo) 50%,var(--blue) 100%);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow-y:auto;
  padding:0 20px}
.mnav-panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 40% at 90% 4%,rgba(224,248,42,.18),transparent 62%),
             radial-gradient(60% 40% at 0% 100%,rgba(255,255,255,.14),transparent 60%)}
.mnav-panel>*{position:relative;z-index:1}
.mnav.open .mnav-panel{transform:none}
.mnav-head{position:sticky;top:0;display:flex;align-items:center;
  justify-content:space-between;height:var(--nav-h);
  border-bottom:1px solid rgba(255,255,255,.2);
  background:linear-gradient(165deg,var(--violet),#5423e8);
  margin:0 -20px 16px;padding:0 20px;z-index:2}
.mnav-head .brand b{color:#fff}
.mnav-head .brand small{color:rgba(255,255,255,.75)}
.mnav-close{width:46px;height:46px;border-radius:14px;cursor:pointer;font-size:1.3rem;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;
  transition:background .2s,color .2s}
.mnav-close:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.mnav-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mnav-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  text-decoration:none;color:#fff;font-size:1.04rem;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  transition:background .2s,border-color .2s,transform .2s}
.mnav-links a:hover,.mnav-links a:active{background:rgba(255,255,255,.2);
  border-color:rgba(224,248,42,.6);transform:translateX(3px)}
.mnav-links a i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:var(--lime);font-size:.9rem;
  border:1px solid rgba(255,255,255,.22)}
.mnav-cta{display:grid;gap:10px;margin-top:20px}
.mnav .btn-brand{background:var(--lime);color:var(--ink);box-shadow:0 14px 30px -16px rgba(224,248,42,.8)}
.mnav .btn-line{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.mnav .btn-line:hover{background:#fff;color:var(--violet);border-color:#fff}
.mnav .lang{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.mnav .lang a{color:rgba(255,255,255,.85)}
.mnav .lang a.on{background:var(--lime);color:var(--ink)}
/* the contact band sits on its own darker surface, so every line of it
   stays readable over the lightest end of the gradient */
.mnav-foot{margin:auto -20px 0;padding:20px 20px calc(22px + env(safe-area-inset-bottom));
  display:grid;gap:10px;font-size:.92rem;color:rgba(255,255,255,.92);
  background:rgba(10,4,34,.45);border-top:1px solid rgba(255,255,255,.16)}
.mnav-foot a{color:#fff;text-decoration:none;font-weight:600}
.mnav-foot i,.mnav-foot .ico-wa{color:var(--lime)}
/* the items arrive one after another as the menu opens */
.mnav-links li,.mnav-cta,.mnav-foot{opacity:0;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.mnav.open .mnav-links li,.mnav.open .mnav-cta,.mnav.open .mnav-foot{opacity:1;transform:none}
.mnav.open .mnav-links li:nth-child(1){transition-delay:.08s}
.mnav.open .mnav-links li:nth-child(2){transition-delay:.12s}
.mnav.open .mnav-links li:nth-child(3){transition-delay:.16s}
.mnav.open .mnav-links li:nth-child(4){transition-delay:.2s}
.mnav.open .mnav-links li:nth-child(5){transition-delay:.24s}
.mnav.open .mnav-links li:nth-child(6){transition-delay:.28s}
.mnav.open .mnav-cta{transition-delay:.32s}
.mnav.open .mnav-foot{transition-delay:.36s}
/* the toggle itself turns lime while the menu is open */
.nav-toggle[aria-expanded="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
body.menu-open{overflow:hidden}
/* the round WhatsApp button steps out of the way while the menu is open */
body.menu-open .wa-float{opacity:0;visibility:hidden;pointer-events:none}
/* on a phone it collapses down out of the navbar, full width */
@media (max-width:760px){
  .mnav{justify-content:flex-start;align-items:flex-start}
  .mnav-panel{width:100%;height:auto;max-height:100dvh;border-radius:0 0 28px 28px;
    box-shadow:0 30px 60px -28px rgba(10,4,34,.75);
    transform:translateY(-100%);transition:transform .34s cubic-bezier(.2,.85,.2,1)}
  .mnav-head{border-radius:0}
  .mnav-foot{margin:24px -20px 0}
}
@media (min-width:1041px){.mnav{display:none}}

/* ---------- The night sky behind the hero ----------
   Three fields of stars at different sizes and speeds: the small ones drift
   slowly and twinkle out of step with the big ones, so the sky never pulses
   as one. Pure CSS, no images, and it stops entirely for reduced motion. */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.stars,.stars::before,.stars::after{content:"";position:absolute;inset:0;
  background-repeat:repeat;will-change:background-position}
.stars{
  background-image:
    radial-gradient(1.4px 1.4px at 165px 77px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 202px 24px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 37px 274px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 48px 187px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 298px 29px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 259px 109px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 19px 44px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 222px 214px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 35px 123px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 46px 282px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 217px 30px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 289px 63px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 114px 298px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 31px 295px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 299px 203px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 25px 113px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 23px 285px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 68px 148px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 214px 73px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 276px 60px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 292px 157px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 286px 92px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 52px 297px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 292px 96px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 190px 49px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 280px 32px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 288px 30px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 316px 105px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 254px 272px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 218px 160px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 238px 299px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 232px 185px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 153px 127px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 92px 124px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 41px 294px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 153px 268px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 253px 175px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 229px 147px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 311px 37px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 60px 262px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 214px 84px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 175px 77px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 250px 215px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 20px 39px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 285px 293px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 160px 174px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 179px 304px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 254px 296px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 233px 35px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 47px 138px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 242px 33px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 31px 158px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 295px 228px,rgba(255,255,255,0.95),transparent),
    radial-gradient(1.4px 1.4px at 145px 197px,rgba(255,255,255,0.95),transparent);
  background-size:320px 320px;
  animation:star-far 34s linear infinite,star-twinkle 7s ease-in-out infinite}
.stars::before{
  background-image:
    radial-gradient(2.1px 2.1px at 342px 177px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 11px 236px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 181px 86px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 312px 59px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 252px 30px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 111px 393px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 147px 66px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 378px 126px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 203px 200px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 254px 41px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 85px 229px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 205px 281px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 142px 70px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 419px 220px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 281px 142px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 361px 212px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 183px 349px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 194px 118px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 77px 42px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 90px 77px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 118px 337px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 119px 6px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 248px 301px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 93px 134px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 144px 2px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 74px 214px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 273px 189px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 312px 289px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 163px 64px,rgba(255,255,255,0.85),transparent),
    radial-gradient(2.1px 2.1px at 353px 263px,rgba(255,255,255,0.85),transparent);
  background-size:420px 420px;
  animation:star-mid 24s linear infinite,star-twinkle 4.5s ease-in-out infinite -2s}
.stars::after{
  /* the few bright ones, with a faint halo */
  background-image:
    radial-gradient(3px 3px at 55px 467px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 401px 407px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 408px 403px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 106px 493px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 410px 63px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 195px 68px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 213px 451px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 166px 112px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 348px 53px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 104px 0px,rgba(255,255,255,1),transparent),
    radial-gradient(3px 3px at 154px 103px,rgba(255,255,255,1),transparent);
  background-size:520px 520px;
  filter:drop-shadow(0 0 4px rgba(224,248,42,.55));
  animation:star-near 22s linear infinite,star-twinkle 3.2s ease-in-out infinite -1s}
@keyframes star-far {from{background-position:0 0}to{background-position:-320px 320px}}
@keyframes star-mid {from{background-position:0 0}to{background-position:420px -420px}}
@keyframes star-near{from{background-position:0 0}to{background-position:-520px 520px}}
@keyframes star-twinkle{0%,100%{opacity:1}45%{opacity:.5}70%{opacity:1}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--night);
  padding:clamp(26px,3.2vw,48px) 0 clamp(54px,7vw,96px)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:150%;pointer-events:none;
  background:
    radial-gradient(64vw 58vw at 14% 10%,rgba(94,25,236,.88),transparent 64%),
    radial-gradient(58vw 54vw at 86% 24%,rgba(27,129,253,.78),transparent 66%),
    radial-gradient(44vw 38vw at 52% 92%,rgba(224,248,42,.16),transparent 66%);
  animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.09)}}
.hero::before{z-index:1}
/* start, not centre: centring against the tall phone pushed the headline far
   down the page. Both columns begin at the top and the phone runs on below. */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,4vw,56px);align-items:start}
.hero-grid>*:last-child{margin-top:6px}
@media (max-width:920px){.hero-grid>*:last-child{margin-top:26px}}
.hero h1{color:#fff;margin:0 0 .35em}
.hero h1 .lime{color:var(--lime)}
@media (min-width:700px){.hero h1 .lime{white-space:nowrap}}
.hero-lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#d6d2f5;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
/* both buttons stay side by side on a phone, sharing the width evenly */
@media (max-width:700px){
  .hero-cta{flex-wrap:nowrap;gap:10px}
  .hero-cta .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.25}
  .hero-cta .btn-lg{padding:.92em .9em;font-size:.95rem}
}
@media (max-width:420px){
  .hero-cta{gap:8px}
  .hero-cta .btn-lg{padding:.88em .6em;font-size:.84rem;gap:.4em}
}
.hero-note{margin:20px 0 0;display:flex;align-items:center;gap:10px;font-size:.94rem;color:#b9b3e4}
.hero-note i{color:var(--lime)}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.hero-stats li{display:flex;align-items:center;gap:9px;padding:.5em 1em;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.9rem;font-weight:600}
.hero-stats i{color:var(--lime)}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}

/* the phone in the hero */
.phone{position:relative;width:min(300px,78%);margin-inline:auto;aspect-ratio:9/19;
  border-radius:44px;background:linear-gradient(160deg,#2a1a5e,#150b3a);padding:11px;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:26px;border-radius:99px;background:#0b0524;z-index:2}
.phone-screen{height:100%;border-radius:34px;background:#f4f3fb;overflow:hidden;display:flex;
  flex-direction:column}
.phone-top{padding:34px 16px 10px;background:var(--brand);color:#fff;display:flex;align-items:center;gap:10px}
.phone-top img{width:30px;height:30px;border-radius:9px;flex:none}
.phone-top b{display:block;color:#fff;font-size:.9rem;line-height:1.2}
.phone-top small{font-size:.68rem;opacity:.82}
.phone-chat{flex:1;padding:14px 12px;display:flex;flex-direction:column;justify-content:flex-start;
  gap:10px;overflow:hidden}
.sms{background:#fff;border-radius:16px 16px 16px 5px;padding:11px 13px;font-size:.8rem;color:var(--ink);
  box-shadow:0 6px 18px -12px rgba(20,10,51,.5);animation:sms-in .45s both}
.sms .from{display:block;font-weight:800;font-size:.64rem;letter-spacing:.1em;color:var(--violet);
  text-transform:uppercase;margin-bottom:4px}
.sms .time{display:block;margin-top:6px;font-size:.62rem;color:var(--muted);text-align:right}
@keyframes sms-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phone-bar{padding:9px 12px 16px;background:#fff;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.phone-bar i{margin-left:auto;color:var(--violet)}
@media (min-width:1240px){.phone{width:min(312px,80%)}}
@media (max-width:920px){.phone{width:min(240px,64%)}}
@media (max-width:480px){
  .phone{width:min(228px,62%)}
  /* smaller bubbles so two still fit on a phone-sized phone */
  .phone-chat{padding:10px 9px;gap:8px}
  .sms{font-size:.72rem;padding:9px 10px}
  .sms .from{font-size:.58rem;margin-bottom:3px}
  .sms .time{font-size:.56rem;margin-top:4px}
}

/* ---------- Section shell ---------- */
.sec{padding:clamp(56px,8vw,112px) 0}
.sec-paper{background:var(--paper)}
.sec-head{margin-bottom:clamp(30px,4vw,52px)}
.sec-head h2{margin:.5em 0 .3em}
.sec-head p{font-size:1.08rem;color:var(--muted)}

/* ---------- Stacking steps: each card takes the whole screen -------------
   Every step is a full-height panel that pins under the navbar while the next
   one rises over it, so the screen changes completely as you scroll.
   ----------------------------------------------------------------------- */
/* the heading keeps its own room, so it is read in full before the first
   panel pins over it */
.how-head{padding-bottom:clamp(46px,8vh,96px)}
/* the four steps previewed as one connected chain */
.how-map{list-style:none;margin:30px auto 0;padding:0;display:flex;align-items:flex-start;
  justify-content:center;gap:clamp(6px,1.4vw,18px);max-width:860px}
.how-map li{flex:1 1 0;min-width:0;position:relative}
/* one rail running behind the beads, so the four read as a single run */
.how-map li+li::before{content:"";position:absolute;top:21px;right:50%;
  width:calc(100% + clamp(6px,1.4vw,18px));height:3px;border-radius:99px;
  background:linear-gradient(90deg,rgba(94,25,236,.35),rgba(27,129,253,.55))}
.how-map a{display:grid;justify-items:center;gap:9px;text-decoration:none;color:var(--ink-2)}
.how-bead{position:relative;width:44px;height:44px;border-radius:14px;display:grid;
  place-items:center;background:var(--brand);color:#fff;font-size:1rem;
  box-shadow:0 12px 24px -14px rgba(94,25,236,.8);transition:transform .2s}
.how-bead b{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:8px;
  background:var(--lime);color:var(--ink);font:800 .66rem/22px var(--font);text-align:center}
.how-map a:hover .how-bead{transform:translateY(-3px)}
.how-map em{font:700 .88rem/1.3 var(--font);font-style:normal;text-align:center}
@media (max-width:560px){
  .how-map{gap:10px}
  .how-map em{display:none}
  .how-map li+li::before{top:19px;right:50%;width:calc(100% + 10px)}
  .how-bead{width:40px;height:40px}
}

.stack{position:relative}
.stack-card{position:sticky;top:var(--nav-h);min-height:calc(100dvh - var(--nav-h));
  display:grid;place-items:center;color:#fff;overflow:hidden;
  border-radius:clamp(18px,3vw,34px) clamp(18px,3vw,34px) 0 0;
  box-shadow:0 -26px 60px -26px rgba(10,4,34,.6);
  background:var(--tone,var(--violet))}
/* a lime seam along the top edge, so each panel reads as the next card in
   one deck rather than an unrelated screen */
.stack-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(224,248,42,.9),transparent);pointer-events:none}
.stack-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60vw 50vw at 78% 18%,rgba(255,255,255,.14),transparent 60%),
             radial-gradient(44vw 40vw at 12% 88%,rgba(224,248,42,.14),transparent 62%)}
.stack-in{position:relative;z-index:1;width:min(var(--wrap),100% - 40px);margin-inline:auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(40px,7vh,90px) 0}
.stack-side{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
/* the spine: where this step sits in the run of four */
.stack-spine{list-style:none;margin:0;padding:0;display:grid;gap:14px;justify-items:center}
.stack-spine li{position:relative;width:13px;height:13px;border-radius:50%;
  background:rgba(255,255,255,.28)}
.stack-spine li+li::before{content:"";position:absolute;left:50%;top:-15px;
  transform:translateX(-50%);width:3px;height:16px;border-radius:99px;
  background:rgba(255,255,255,.28)}
.stack-spine li.done{background:var(--lime)}
.stack-spine li.done::before,.stack-spine li.now::before{background:var(--lime)}
.stack-spine li.now{background:var(--lime);box-shadow:0 0 0 6px rgba(224,248,42,.22)}
.stack-n{font:800 clamp(3.4rem,11vw,9rem)/1 var(--font);letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.4)}
/* the hand-off to the next panel */
.stack-next{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(22px,3.4vh,34px);
  padding:10px 20px 10px 10px;border-radius:999px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  transition:background .2s,transform .2s,border-color .2s;max-width:100%}
.stack-next:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);
  transform:translateY(2px)}
.stack-next-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:var(--ink);font-size:.9rem}
.stack-next-tx{display:grid;gap:3px;min-width:0}
.stack-next-tx small{font:700 .68rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.stack-next-tx b{color:#fff;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack-body{max-width:58ch}
.stack-body .kicker{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 var(--font);
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:16px}
.stack-body h3{color:#fff;font-size:clamp(1.7rem,4vw,3rem);letter-spacing:-.03em;margin-bottom:.4em}
.stack-body p{font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(255,255,255,.88);margin-bottom:22px}
.stack-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.stack-chips li{display:flex;align-items:center;gap:8px;padding:.48em 1em;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:.9rem;font-weight:600}
.stack-chips i{color:var(--lime);font-size:.8em}
.stack-ic{position:absolute;right:6%;bottom:8%;font-size:clamp(5rem,14vw,12rem);
  color:rgba(255,255,255,.08);z-index:0}
@media (max-width:760px){
  .stack-in{grid-template-columns:minmax(0,1fr);gap:14px}
  .stack-ic{display:none}
  .stack-side{gap:16px}
  .stack-spine{grid-auto-flow:column;gap:16px}
  .stack-spine li+li::before{left:-16px;top:50%;transform:translateY(-50%);width:16px;height:3px}
  .stack-next{padding:8px 16px 8px 8px}
  .stack-next-ic{width:34px;height:34px}
}

/* ---- the closing panel: thank you for being a customer ----------------- */
.stack-thanks{background:linear-gradient(162deg,var(--violet-deep) 0%,var(--violet) 52%,var(--indigo) 100%)}
.stack-thanks .stack-in{grid-template-columns:minmax(0,1fr);place-items:center;text-align:center}
.thanks-in{display:grid;justify-items:center;gap:0;max-width:62ch}
.thanks-ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  font-size:1.5rem;color:var(--ink);background:var(--lime);
  box-shadow:0 0 0 12px rgba(224,248,42,.16),0 0 0 26px rgba(224,248,42,.08)}
.thanks-in .spine-row{grid-auto-flow:column;gap:16px;margin:30px 0 22px}
.thanks-in .spine-row li+li::before{left:-16px;top:50%;transform:translateY(-50%);
  width:16px;height:3px}
.thanks-in .kicker{display:inline-flex;font:700 .78rem/1 var(--font);letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.thanks-in h3{color:#fff;font-size:clamp(1.6rem,3.6vw,2.7rem);letter-spacing:-.03em;margin:0 0 .45em}
.thanks-in p{font-size:clamp(1rem,1.5vw,1.17rem);color:rgba(255,255,255,.92);margin:0}
.thanks-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
@media (max-width:620px){
  .thanks-ring{width:62px;height:62px;font-size:1.25rem}
  .thanks-in .spine-row{margin:22px 0 18px}
  .thanks-cta{flex-wrap:nowrap;gap:10px;width:100%}
  .thanks-cta .btn{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;
    padding:.9em .8em;font-size:.9rem}
}

/* the little rail that counts the steps, pinned under the navbar */
.stack-rail{position:sticky;top:calc(var(--nav-h) + 20px);z-index:6;display:flex;gap:8px;
  align-items:flex-start;justify-content:center;height:0}
.stack-rail span{flex:none;width:30px;height:5px;border-radius:99px;background:rgba(255,255,255,.3);
  transition:background .3s,width .3s}
.stack-rail span.on{background:var(--lime);width:48px}
.stack-rail span.pip-end{width:14px}
.stack-rail span.pip-end.on{width:24px}

/* ---------- Features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.feat{padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feat i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--brand);color:#fff;font-size:1.15rem}
.feat h3{margin-bottom:.4em}
.feat p{margin:0;color:var(--muted)}
@media (max-width:980px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.feat-grid{grid-template-columns:1fr}}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.price{padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  text-align:center;box-shadow:var(--shadow)}
.price h3{font-size:1.05rem;color:var(--muted);font-weight:700;margin-bottom:.5em}
.price .v{display:block;font:800 clamp(1.5rem,3vw,2.2rem)/1.1 var(--font);letter-spacing:-.03em;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.5em}
.price p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:760px){.price-grid{grid-template-columns:1fr}}

/* ---------- Powered by Textify ---------- */
.flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:clamp(24px,3vw,36px) auto 0;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);max-width:860px;box-shadow:var(--shadow)}
.flow .node{display:grid;justify-items:center;gap:6px;text-align:center;flex:1 1 110px;min-width:96px}
.flow .node i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--violet);border:1px solid var(--line)}
.flow .node.mid i{background:var(--brand);color:#fff;border-color:transparent}
.flow .node b{font-size:.95rem}
.flow .arr{color:var(--violet);flex:none}
@media (max-width:620px){.flow .arr{display:none}.flow .node{flex:1 1 40%}}

/* ---------- Team: the solar eclipse ---------------------------------------
   Three portraits in orbit around an eclipsed sun — a dark disc with a lime
   corona burning around its edge. Hovering or focusing pauses the orbit.
   ----------------------------------------------------------------------- */
.eclipse-sec{background:var(--night);color:#fff;position:relative;overflow:hidden}
.eclipse-sec::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60vw 50vw at 50% 42%,rgba(94,25,236,.34),transparent 62%)}
/* words on the left, the eclipse on the right */
.eclipse-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px);align-items:center}
.eclipse-words{min-width:0}
.eclipse-sec h2,.eclipse-sec h3{color:#fff}
.eclipse-sec .sec-head p{color:#b9b3e4}

/* one size drives the whole thing, so the portraits can never orbit outside it */
.eclipse{--size:min(430px,82vw);--orbit:.375;position:relative;width:var(--size);aspect-ratio:1;
  margin-inline:auto;padding-bottom:26px}
/* on a wide screen the eclipse grows to meet the height of the names beside
   it, so neither column floats in empty space */
@media (min-width:1100px){.eclipse{--size:min(560px,40vw)}}
@media (min-width:1440px){.eclipse{--size:min(620px,38vw)}}
/* the sun, eaten by the moon: a black disc with a burning rim */
.sun{position:absolute;top:50%;left:50%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:#07030f;
  box-shadow:
    0 0 0 3px rgba(224,248,42,.95),
    0 0 26px 6px rgba(224,248,42,.55),
    0 0 90px 26px rgba(224,248,42,.22),
    0 0 180px 60px rgba(94,25,236,.35);
  display:grid;place-items:center;text-align:center;z-index:2}
.sun::after{content:"";position:absolute;inset:-14%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(224,248,42,.42),transparent 22%,rgba(224,248,42,.3) 48%,
    transparent 70%,rgba(224,248,42,.42));
  filter:blur(11px);animation:corona 18s linear infinite;z-index:-1}
@keyframes corona{to{transform:rotate(360deg)}}
.sun img{width:52%;margin-inline:auto;border-radius:14px}
.sun small{display:block;margin-top:8px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);font-weight:700}
/* the ring the portraits travel on */
.orbit-ring{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed rgba(224,248,42,.3);
  animation:spin 44s linear infinite}
.orbit-ring.inner{inset:20%;border-color:rgba(255,255,255,.12);animation-duration:30s;
  animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.member{position:absolute;z-index:3;top:50%;left:50%;width:21%;aspect-ratio:1;margin:-10.5% 0 0 -10.5%;
  transform:rotate(var(--a)) translateX(calc(var(--size) * var(--orbit))) rotate(calc(var(--a) * -1))}
.member-body{width:100%;height:100%;animation:spin 44s linear infinite reverse}
.member button{all:unset;cursor:pointer;display:block;width:100%;height:100%;border-radius:50%}
.member img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--lime);
  background:var(--night-2);box-shadow:0 0 0 6px rgba(224,248,42,.12),0 14px 30px -12px rgba(0,0,0,.7);
  transition:transform .25s,box-shadow .25s}
.member button:hover img,.member button:focus-visible img,.member.on img{transform:scale(1.1);
  box-shadow:0 0 0 8px rgba(224,248,42,.3),0 0 34px rgba(224,248,42,.5)}
.member .tag{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.72rem;font-weight:700;color:#fff;background:rgba(15,7,48,.9);
  border:1px solid rgba(224,248,42,.4);padding:3px 10px;border-radius:99px}
.eclipse:hover .orbit-ring,.eclipse:hover .member-body,
.eclipse:focus-within .orbit-ring,.eclipse:focus-within .member-body{animation-play-state:paused}

.team-cards{display:grid;gap:14px}
.t-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 20px;
  border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:border-color .25s,background .25s}
.t-card.on{border-color:var(--lime);background:rgba(224,248,42,.08)}
.t-card img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--lime)}
.t-card h3{font-size:1.08rem;margin:0 0 2px}
.t-card .role{display:block;font-size:.84rem;font-weight:700;color:var(--lime);margin-bottom:5px}
.t-card p{margin:0;font-size:.92rem;color:#b9b3e4}
@media (max-width:960px){
  .eclipse-grid{grid-template-columns:1fr}
  /* stacked, the eclipse leads and the names follow it */
  .eclipse{order:-1;margin-bottom:8px}
}

/* ---------- Closing call to action ---------- */
.cta-band{border-radius:var(--r-lg);padding:clamp(32px,5vw,60px);text-align:center;color:#fff;
  background:var(--brand);box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);font-size:1.08rem;max-width:52ch;margin-inline:auto}

/* ---------- Footer ---------- */
.foot{position:relative;background:var(--night);color:#cfc9f2;overflow:hidden;
  padding:clamp(44px,5vw,70px) 0 28px}
.foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52vw 42vw at 12% 8%,rgba(94,25,236,.85),transparent 62%),
             radial-gradient(48vw 40vw at 88% 22%,rgba(27,129,253,.7),transparent 64%),
             radial-gradient(34vw 30vw at 50% 100%,rgba(224,248,42,.12),transparent 66%)}
.foot > .wrap{position:relative;z-index:1}
.foot::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.7}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.foot .brand b{color:#fff}
.foot .brand small{color:#8a83bd}
.foot h4{color:#fff;font-size:.95rem;margin:0 0 14px;letter-spacing:.04em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.94rem}
.foot a{text-decoration:none;color:#cfc9f2}
.foot a:hover{color:var(--lime)}
.foot-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.88rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Auth pages ---------- */
.auth{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-side{position:relative;overflow:hidden;color:#fff;background:var(--night);
  padding:clamp(34px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
.auth-side::before{content:"";position:absolute;inset:0;
  background:radial-gradient(50vw 44vw at 22% 18%,rgba(94,25,236,.85),transparent 62%),
             radial-gradient(44vw 38vw at 82% 82%,rgba(27,129,253,.7),transparent 64%)}
.auth-side > *{position:relative;z-index:1}
.auth-side h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem)}
.auth-side p{color:#cfc9f2}
.auth-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.auth-points li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem}
.auth-points i{color:var(--lime);margin-top:.25em}
.auth-main{display:grid;place-items:center;padding:clamp(28px,5vw,56px) 20px;background:#fff}
.auth-box{width:min(430px,100%)}
.auth-box h1{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.35em}
.auth-box .lead{color:var(--muted);margin-bottom:26px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:.85em 1em;border-radius:14px;
  border:1.5px solid var(--line);font:400 1rem/1.4 var(--font);color:var(--ink);background:#fff;
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 4px rgba(94,25,236,.13)}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field .hint{display:block;margin-top:6px;font-size:.83rem;color:var(--muted);font-weight:400}
.sep{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted);font-size:.86rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:grid;gap:10px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;padding:.85em 1.2em;
  border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font:700 .97rem/1 var(--font);
  color:var(--ink);transition:border-color .2s,background .2s}
.btn-social:hover{border-color:var(--ink);background:var(--paper)}
.btn-social.apple{background:#000;color:#fff;border-color:#000}
.btn-social.apple:hover{background:#1a1a1a}
.auth-alt{margin-top:22px;text-align:center;font-size:.95rem;color:var(--muted)}
.auth-alt a{color:var(--violet);font-weight:700;text-decoration:none}
.note{padding:14px 16px;border-radius:14px;font-size:.92rem;margin-bottom:18px;display:flex;gap:11px;
  align-items:flex-start}
.note i{margin-top:.2em;flex:none}
.note-err{background:#fdeceb;color:#8d2019;border:1px solid #f5c6c2}
.note-ok{background:#e9f7ef;color:#14663a;border:1px solid #bfe5cf}
.note-info{background:var(--paper-2);color:var(--violet-deep);border:1px solid var(--line)}
.note-warn{background:#fdf4e0;color:#7a5306;border:1px solid #f1dcae}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
}

/* ---------- The app ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100dvh}
.side{background:var(--night);color:#cfc9f2;padding:18px 14px;position:sticky;top:0;height:100dvh;
  display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.side .brand{padding:6px 8px 18px}
.side .brand b{color:#fff}
.side a.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  text-decoration:none;color:#cfc9f2;font-weight:600;font-size:.96rem}
.side a.item i{width:22px;text-align:center;color:#8a83bd}
.side a.item:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.item.on{background:var(--brand);color:#fff}
.side a.item.on i{color:var(--lime)}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.86rem}
.side-user{display:flex;align-items:center;gap:10px;padding:10px 6px}
.side-user .av{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;
  place-items:center;color:#fff;font-weight:800;font-size:.86rem;flex:none}
.side-user b{display:block;color:#fff;font-size:.9rem;line-height:1.2}
.side-user small{color:#8a83bd;font-size:.76rem;word-break:break-all}
.side-veil{position:fixed;inset:0;z-index:110;background:rgba(15,7,48,.5);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s;pointer-events:none}
.side-veil.on{opacity:1;visibility:visible;pointer-events:auto}
.main{background:var(--paper);padding:clamp(20px,3vw,34px);min-width:0}
.app-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:24px}
.app-head h1{font-size:clamp(1.45rem,2.6vw,2rem);margin:0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);
  box-shadow:var(--shadow);margin-bottom:20px}
.card h2{font-size:1.25rem;margin-bottom:.4em}
.card > p:first-of-type{color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--shadow)}
.tile .k{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.tile .k i{color:var(--violet)}
.tile .v{display:block;margin-top:10px;font:800 1.9rem/1 var(--font);letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tile.brand{background:var(--brand);border-color:transparent;color:#fff}
.tile.brand .k,.tile.brand .v{color:#fff}
.tile.brand .k i{color:var(--lime)}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.tbl th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:0 12px 10px;font-weight:700}
.tbl td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--paper)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.badge{display:inline-flex;align-items:center;gap:6px;padding:.28em .7em;border-radius:99px;
  font-size:.78rem;font-weight:700;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.badge.delivered,.badge.approved,.badge.paid{background:#e9f7ef;color:#14663a}
.badge.failed,.badge.undelivered,.badge.declined{background:#fdeceb;color:#8d2019}
.badge.sending,.badge.processing,.badge.scheduled,.badge.requested,.badge.pending{
  background:#fdf4e0;color:#7a5306}
.meter{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-top:10px}
.meter span{display:block;height:100%;border-radius:99px;background:var(--brand);
  transition:width .35s ease}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}
.empty i{font-size:1.9rem;color:var(--line);display:block;margin-bottom:12px}
/* min-width:0 so a wide table inside a column scrolls in its own wrapper
   instead of stretching the column past the page */
.row-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.row-2>*{min-width:0}
@media (max-width:640px){.row-2{grid-template-columns:1fr}}
.app-top{display:none;position:sticky;top:0;z-index:50;background:var(--night);color:#fff;
  padding:10px 16px;align-items:center;gap:12px}
.app-top button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;cursor:pointer}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .app-top{display:flex}
  .side{position:fixed;inset:0 auto 0 0;width:min(280px,86vw);z-index:120;
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .side.open{transform:none}
}

/* the WhatsApp mark sits on the text baseline wherever it is used */
.ico-wa{display:inline-block;vertical-align:-.22em;flex:none}
.foot a .ico-wa{margin-right:.15em}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);z-index:300;
  opacity:0;visibility:hidden;pointer-events:none;
  padding:13px 20px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;font-size:.94rem;
  box-shadow:var(--shadow-lg);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:min(520px,92vw)}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.toast.err{background:var(--danger)}
.toast.ok{background:#12603a}

/* ---------- Developers: Eroyal's own API, on the landing page ----------
   A dark band between pricing and the team, so the code sits on the same
   night the hero and the footer use. */
.dev{background:var(--night);color:#e8e5ff;position:relative;overflow:hidden}
.dev::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 8% 0%,rgba(94,25,236,.55),transparent 62%),
    radial-gradient(52% 64% at 96% 22%,rgba(27,129,253,.42),transparent 64%),
    radial-gradient(40% 48% at 52% 108%,rgba(59,60,240,.34),transparent 66%)}
.dev>.wrap{position:relative;z-index:1}
.dev-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:54px;align-items:center}
.dev-text h2{color:#fff;margin:16px 0 12px;font-size:clamp(1.9rem,3.4vw,2.8rem)}
.dev-text .lead{color:var(--lime);font-weight:700;font-size:1.08rem;margin-bottom:10px}
.dev-text>p{color:#c7c1ea}
.dev-points{list-style:none;margin:24px 0 28px;display:grid;gap:14px}
.dev-points li{display:flex;gap:12px;align-items:flex-start}
.dev-points i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:var(--ink);font-size:.78rem;font-weight:900;font-style:normal;margin-top:2px}
.dev-points i::before{content:"\2713"}
.dev-points b{display:block;color:#fff;font-size:1rem}
.dev-points span{display:block;color:#b8b2e0;font-size:.93rem;line-height:1.55}

.dev-code{border-radius:var(--r);overflow:hidden;background:#0a0424;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.dev-code-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}
.dev-code-bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.22)}
.dev-code-bar span:first-child{background:#ff5f57}
.dev-code-bar span:nth-child(2){background:#febc2e}
.dev-code-bar span:nth-child(3){background:#28c840}
.dev-code-bar em{margin-left:auto;font-style:normal;color:#9d96c9;font-size:.82rem;letter-spacing:.04em}
.dev-code pre{margin:0;padding:20px;overflow-x:auto;color:#ded9ff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.83rem;line-height:1.75;-webkit-overflow-scrolling:touch}
.c-c{color:#8e86c4}.c-s{color:var(--lime)}.c-k{color:#7fc0ff}.c-n{color:#ff9ed8}

@media (max-width:980px){
  .dev-grid{grid-template-columns:1fr;gap:34px}
  .dev-code pre{font-size:.76rem;padding:16px}
}

/* ---------- The API reference at /docs ---------- */
.docs-hero{background:var(--night);color:#fff;padding:56px 0 46px;position:relative;overflow:hidden}
.docs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 6% 0%,rgba(94,25,236,.72),transparent 60%),
    radial-gradient(52% 110% at 92% 30%,rgba(27,129,253,.5),transparent 62%)}
.docs-hero>.wrap{position:relative;z-index:1}
.docs-hero h1{color:#fff;margin:16px 0 12px;font-size:clamp(2rem,4vw,2.9rem)}
.docs-hero p{color:#c9c3ee;max-width:70ch;line-height:1.7}

.docs-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:48px;
  align-items:start;padding-top:44px;padding-bottom:72px}

.docs-rail{position:sticky;top:calc(var(--nav-h) + 20px)}
.docs-rail ol{list-style:none;counter-reset:d;margin:0 0 18px;padding:0 0 0 2px;
  border-left:2px solid var(--line)}
.docs-rail li{counter-increment:d}
.docs-rail ol a{display:block;padding:8px 12px;margin-left:-2px;border-left:2px solid transparent;
  color:var(--muted);font-size:.93rem;font-weight:600;text-decoration:none;transition:.18s}
.docs-rail ol a::before{content:counter(d) ". ";color:#a9a3cc}
.docs-rail ol a:hover{color:var(--violet)}
.docs-rail ol a.on{color:var(--violet-deep);border-left-color:var(--violet);background:var(--paper-2);
  border-radius:0 8px 8px 0}
.docs-rail ol a.on::before{color:var(--violet)}

.docs-body{min-width:0}
.docs-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 16px;padding-bottom:12px;
  border-bottom:2px solid var(--line)}
.docs-body h2:not(:first-child){margin-top:60px}
.docs-body h3{font-size:1.16rem;margin:34px 0 12px;color:var(--ink)}
.docs-body h4{font-size:1rem;margin:22px 0 8px;color:var(--ink-2)}
.docs-body p{color:var(--ink-2);line-height:1.75;margin-bottom:14px}
.docs-body>ul,.docs-body>ol{color:var(--ink-2);line-height:1.75;margin:0 0 16px 1.1em}
.docs-body>ul li,.docs-body>ol li{margin-bottom:8px}
.docs-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--paper-2);color:var(--violet-deep);padding:.14em .42em;border-radius:6px}
.docs-body .tbl-wrap{margin-bottom:18px}
.docs-body .tbl code{white-space:nowrap}
.docs-body .card{padding:22px 24px}

.ticks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;color:var(--ink-2);line-height:1.7}
.ticks li::before{content:"\2713";font-weight:900;font-size:.74rem;line-height:1;position:absolute;left:0;top:.36em;
  width:19px;height:19px;border-radius:50%;background:var(--lime-soft);color:var(--lime-deep);
  display:grid;place-items:center}
.ticks li b{color:var(--ink)}

/* method chips, in the headings and in tables */
.method{display:inline-block;padding:.24em .6em;border-radius:6px;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;margin-right:.5em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.method.post{background:#e8f3ff;color:#0b4f9e;border:1px solid #bcdcff}
.method.get{background:#e9f7ef;color:#14663a;border:1px solid #bfe5cf}
.method.delete{background:#fdeceb;color:#8d2019;border:1px solid #f5c6c2}
.public{display:inline-block;padding:.22em .62em;border-radius:999px;font-size:.72rem;font-weight:800;
  background:var(--lime-soft);color:var(--lime-deep);border:1px solid #e2f27a;vertical-align:middle}

/* code samples */
.code{background:#0a0424;border-radius:14px;overflow:hidden;margin:0 0 20px;
  border:1px solid rgba(255,255,255,.1)}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px 9px 16px;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.1)}
.code-head span{color:#b3acde;font-size:.82rem;font-weight:700;letter-spacing:.03em}
.code-head button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  padding:.36em .85em;border-radius:8px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  transition:.18s}
.code-head button:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.code-head button.ok{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.code pre,pre.code{margin:0;padding:18px;overflow-x:auto;color:#ded9ff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.83rem;line-height:1.7;
  -webkit-overflow-scrolling:touch}
pre.code{background:#0a0424;border-radius:14px;border:1px solid rgba(255,255,255,.1);margin-bottom:18px}
.code pre code,pre.code code{background:none;color:inherit;padding:0;font-size:inherit}

@media (max-width:980px){
  .docs-grid{grid-template-columns:1fr;gap:26px;padding-top:28px}
  .docs-rail{position:static;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .docs-rail ol{display:flex;flex-wrap:wrap;gap:4px;border-left:0;padding-left:0}
  .docs-rail ol a{border-left:0;border-radius:999px;background:var(--paper-2);padding:7px 13px;
    font-size:.86rem;margin-left:0}
  .docs-rail ol a.on{border-radius:999px;background:var(--violet);color:#fff}
  .docs-rail ol a.on::before{color:rgba(255,255,255,.7)}
  .docs-body h2:not(:first-child){margin-top:44px}
}

/* ---------- API keys, in the app ---------- */
.key-once{margin-top:18px;padding:16px;border-radius:14px;background:var(--lime-soft);
  border:1px solid #e2f27a}
.key-once-warn{display:flex;gap:9px;align-items:flex-start;color:#6b5a00;font-weight:700;
  font-size:.9rem;line-height:1.55;margin:0 0 12px}
.key-show{display:flex;align-items:center;gap:10px;background:#0a0424;border-radius:10px;padding:10px 12px}
.key-show code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;color:var(--lime);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
.key-show .btn{flex:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.key-show .btn:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.key-list{list-style:none;margin:0;padding:0}
.key-list li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line)}
.key-list li:first-child{border-top:0;padding-top:4px}
.key-list li>div{flex:1;min-width:0}
.key-list b{display:block;color:var(--ink);font-size:.98rem}
.key-list code{display:inline-block;margin:3px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;background:var(--paper-2);color:var(--violet-deep);padding:.16em .5em;border-radius:6px}
.key-list small{display:block;color:var(--muted);font-size:.82rem}
.key-list .btn{flex:none}
.btn-danger{background:#fdeceb;border-color:#f5c6c2;color:#8d2019}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.key-help{margin-top:22px}
.key-help h2{margin-bottom:8px}
.key-help p{color:var(--ink-2);margin-bottom:16px}

/* ---------- Reveal, and the motion switch ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stars,.stars::before,.stars::after{opacity:.7}
  .js [data-reveal]{opacity:1;transform:none}
  .mnav-links li,.mnav-cta,.mnav-foot{opacity:1;transform:none}
  .stack-card{position:static;min-height:0}
  html{scroll-behavior:auto}
}

/* =====================================================================
   THE WHATSAPP BUTTON
   A round button pinned to the bottom right of every page that opens a
   chat with our number directly. It sits above everything except the
   toast, clears the iPhone home indicator, and names itself on hover.
   ===================================================================== */
.wa-float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:250;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,211,102,.55);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
  animation:wa-pulse 2.8s ease-out infinite}
.wa-float:hover,.wa-float:focus-visible{transform:scale(1.06);
  box-shadow:0 18px 38px -10px rgba(0,0,0,.5)}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes wa-pulse{
  0%  {box-shadow:0 14px 30px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,211,102,.5)}
  70% {box-shadow:0 14px 30px -10px rgba(0,0,0,.45),0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 14px 30px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,211,102,0)}}

/* the name slides out beside it on a pointer, and is never shown on touch */
.wa-float-label{position:absolute;right:calc(100% + 12px);white-space:nowrap;
  padding:8px 14px;border-radius:999px;background:var(--ink,#140a33);color:#fff;
  font-weight:700;font-size:.86rem;opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label{opacity:1;transform:none}

@media (max-width:600px){
  .wa-float{width:54px;height:54px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wa-float svg{width:26px;height:26px}
  .wa-float-label{display:none}
}
/* the app pages have a sticky bar on phones; the button lifts clear of it */
@media (max-width:900px){
  .app-page .wa-float{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}

/* The base URL is written inline in a sentence, and a URL has no natural break
   point, so on a phone it pushed the page 39px wide. Inline code in the
   reference may break mid-token; the <pre> blocks still scroll instead. */
.docs-body code{overflow-wrap:anywhere;word-break:break-word}
.docs-body pre code,.code pre code{overflow-wrap:normal;word-break:normal}