/* =====================================================================
   Hello World — the public website.

   ONE STYLESHEET, NO BUILD STEP, NO JAVASCRIPT. It is served straight
   from public/ and cached across the fifteen pages that share it, which
   is why it is a file now rather than a <style> block repeated in every
   response. There is nothing to compile: what is written here is what
   the browser gets.

   DARK BY DESIGN, not by preference. The brand mark is a lit globe on
   deep navy; on a white page it floats in a box of its own. The whole
   site is therefore built on navy, and `print` below flips a legal
   document back to black-on-white for the people who print one.

   The type is Plus Jakarta Sans, self-hosted in public/fonts. It is not
   fetched from Google: the privacy policy lists everybody who receives
   a visitor's IP address, and a font is a poor reason to add a name to
   that list.
   ===================================================================== */

/* ---- Type ----------------------------------------------------------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/plus-jakarta-sans-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Tokens --------------------------------------------------------- */
/* WHITE, WITH THE APP'S OWN BLUE ON TOP. The owner, 2026-09-24: "I like the
   whatsapp color of white background and the header matching the color of
   the app." --brand is not a colour somebody picked for the website: it is
   AccentColor.colorset from the iOS project, #1F6BEA, so the bar above a web
   page and the tint inside the app are the same blue. The app mock-ups on
   these pages stay dark navy on purpose — they are pictures of the app, and
   they read as screenshots against the white. */
:root{
  color-scheme:light;

  --bg:#fff; --bg-2:#F6F9FD;
  --surface:#fff; --surface-2:#F4F7FC; --surface-3:#EAF0FA;
  --border:#E2E8F3; --hairline:#EDF1F8;
  --glass:rgba(31,107,234,.92); --glass-border:rgba(255,255,255,.28);

  /* The bar is the app's AccentColor; the accents are FadPay's blues. */
  --brand:#1F6BEA; --brand-strong:#0171cb; --brand-2:#3DD3FB; --brand-3:#A64DFF;
  --link:#0171cb; --on-brand:#fff;
  --gold:#B7791F; --success:#0F9D58;

  --text:#0D1729; --text-2:#41506B; --muted:#6A7A94;

  /* The app's own navy, for the mock-ups that stand in for screenshots. */
  --app-bg:#020625; --app-surface:#0E1B33; --app-surface-2:#132340;
  --app-border:#22345A; --app-text:#F2F6FD; --app-text-2:#A8BAD8; --app-muted:#7A8FB3;

  --grad-brand:linear-gradient(135deg,#0171cb 0%,#3DD3FB 100%);
  --grad-mark:linear-gradient(135deg,#0D47A1 0%,#00B8D9 55%,#A64DFF 100%);
  --grad-text:linear-gradient(100deg,#0171cb 0%,#2FB7EE 55%,#3DD3FB 100%);
  --grad-hero:radial-gradient(900px 420px at 8% -8%,rgba(31,107,234,.08),transparent 62%),
              radial-gradient(700px 380px at 98% 2%,rgba(0,184,217,.07),transparent 58%);
  --sheen:none;

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-2xl:34px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(13,23,41,.06);
  --shadow-md:0 10px 26px -12px rgba(13,23,41,.18),0 2px 8px -3px rgba(13,23,41,.08);
  --shadow-lg:0 28px 60px -24px rgba(13,23,41,.28),0 8px 20px -12px rgba(13,23,41,.12);
  --glow:0 14px 30px -12px rgba(31,107,234,.55);

  --container:1320px; --nav-h:68px;
  --ease:cubic-bezier(.22,1,.36,1); --dur:.22s;
}

/* ---- Base ----------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.7 "Plus Jakarta Sans",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  background-image:var(--grad-hero);background-repeat:no-repeat;background-size:100% 1200px;
}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:from-font}
a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto}
::selection{background:rgba(31,107,234,.18);color:var(--text)}

.wrap,.bar,main{max-width:var(--container);margin:0 auto;padding-left:24px;padding-right:24px}
.narrow{max-width:820px;margin:0 auto}
main{padding-bottom:40px}

h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.12}

/* A label above a heading: what this section is, in four words. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-strong);
  background:rgba(31,107,234,.08);border:1px solid rgba(31,107,234,.18);
  border-radius:var(--r-full);padding:6px 14px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad-brand);flex:none}

/* Visible only once it is focused, which is the one time it is wanted. */
.skip{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:#fff;color:var(--brand);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 18px;font-weight:700;text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:14px}

/* ---- Header --------------------------------------------------------- */
.bar{
  display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;
  min-height:var(--nav-h);padding-top:14px;padding-bottom:14px;
}
.masthead{
  position:sticky;top:0;z-index:50;
  background:var(--brand);
  box-shadow:0 1px 0 rgba(13,23,41,.06),0 6px 20px -14px rgba(13,23,41,.5);
}
.wordmark{
  display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap;margin-right:auto;
}
.wordmark img{width:34px;height:34px;border-radius:10px;flex:none;background:#fff}
.wordmark:hover{color:#fff}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:15px}
.nav a{
  color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;
  padding:8px 12px;border-radius:var(--r-full);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.14)}
/* Seven links and the button share one line down to tablet width. */
@media (max-width:1280px){.bar{gap:12px 14px}.nav{gap:2px}.nav a{padding:8px 9px;font-size:14.5px}}
.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.20)}
.langs{
  display:flex;align-items:center;gap:2px;font-size:13px;
  background:rgba(255,255,255,.14);border:1px solid var(--glass-border);
  border-radius:var(--r-full);padding:3px;
}
.langs a{
  color:rgba(255,255,255,.78);text-decoration:none;font-weight:700;letter-spacing:.04em;
  padding:5px 10px;border-radius:var(--r-full);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.langs a:hover{color:#fff}
.langs a[aria-current]{color:var(--brand);background:#fff;box-shadow:var(--shadow-sm)}
.langs span{display:none}

/* ---- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:13px 26px;border-radius:var(--r-full);border:1px solid transparent;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn.primary{background:var(--grad-brand);color:var(--on-brand);box-shadow:var(--glow)}
.btn.ghost{background:#fff;color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost:hover{background:var(--surface-2)}
/* On the blue bar the invitation inverts: white button, blue words. */
.bar .btn.primary{background:#fff;color:var(--brand);box-shadow:0 1px 2px rgba(13,23,41,.18)}
.bar .btn.primary:hover{background:#F2F6FF}
.btn.small{font-size:14.5px;padding:9px 18px}

/* ---- Hero ----------------------------------------------------------- */
.hero{padding:52px 0 26px;display:grid;gap:44px;align-items:center}
@media (min-width:980px){.hero{grid-template-columns:1.05fr .95fr;padding:76px 0 40px}}
.hero h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.1rem);margin:0 0 18px;letter-spacing:-.035em}
.hero h1 .accent{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;
}
.hero .tagline{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);font-weight:700;color:var(--text);margin:0 0 12px;letter-spacing:-.01em}
.hero .sub{font-size:clamp(1.02rem,1rem + .25vw,1.16rem);color:var(--text-2);max-width:34em;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* The trust row under the hero: four small facts, not four adjectives. */
.stats{
  list-style:none;margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--hairline);
  display:grid;gap:22px 30px;grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats strong{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.03em;color:var(--brand)}
.stats span{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-top:2px}

/* ---- A feature page's opening --------------------------------------- */
/* Narrower than the homepage's, and centred: these pages open with a claim
   and a line, not with a picture of a phone. */
.lede{max-width:44rem;padding:56px 0 8px}
.lede h1{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.4rem);margin:0 0 16px;letter-spacing:-.033em}
.lede h1 .accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede p{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--text-2);margin:0 0 26px}
@media (min-width:720px){.lede{padding-top:76px}}

/* ---- Text beside a picture, alternating ----------------------------- */
.split{display:grid;gap:30px;align-items:center;margin:64px 0 0}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .split.flip>*:first-child{order:2}
}
.split h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin:0 0 12px}
.split p{color:var(--text-2);margin:0 0 14px}
.split .checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.split .checks li{position:relative;padding-left:32px;color:var(--text-2)}
.split .checks li::before{
  content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;
  background:rgba(31,107,234,.10);border:1px solid rgba(31,107,234,.28);
}
.split .checks li::after{
  content:"";position:absolute;left:6px;top:.62em;width:8px;height:4.5px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);
}
.split .checks strong{color:var(--text)}

/* The panel that stands in for a screenshot until there are screenshots. */
/* EVERY ONE OF THESE IS A PHONE. The owner, 2026-09-24: "Those blue rounded
   boxes needs to be phones." The feature pages each show a list of what the
   screen does; the list IS the screen now — same markup, wrapped in the same
   device as the homepage's, so the whole site shows the app rather than
   describing it in a rectangle. h3 is the app bar, .rows is the screen. */
.panel{
  position:relative;width:min(318px,84vw);margin:0 auto;padding:11px;border-radius:46px;
  display:flex;flex-direction:column;color:#fff;
  background:linear-gradient(165deg,#23324f 0%,#0a1225 48%,#161f38 100%);
  box-shadow:0 60px 110px -45px rgba(3,12,38,.6),0 26px 50px -28px rgba(3,12,38,.42);
}
.panel::before{
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:104px;height:24px;background:#050B1C;border-radius:0 0 15px 15px;z-index:2;
}
.panel h3{
  margin:0;padding:42px 18px 14px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#8AA0C4;border-radius:36px 36px 0 0;
  background:linear-gradient(180deg,#0B1733,#070F26);border-bottom:1px solid rgba(255,255,255,.07);
}
.panel .rows{
  display:grid;gap:0;margin:0;flex:1;padding:6px 16px 22px;
  background:#050B1C;border-radius:0 0 36px 36px;
}
.panel .row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* A phone is narrow: a badge beside a sentence squeezes it to one word per
   line, so the badge drops to its own line instead. */
.panel .row>div{flex:1 1 auto;min-width:0}
.panel .row:last-child{border-bottom:0}
.panel .row strong{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:#fff}
.panel .row span{display:block;font-size:13px;color:#8AA0C4;line-height:1.45}
.panel .row .right{flex:0 0 100%;order:3;margin:0;font-size:12px;color:#A9BDDD;text-align:left;white-space:normal}
.panel .row .dotmark{
  width:34px;height:34px;border-radius:var(--r-full);flex:none;display:grid;place-items:center;
  background:var(--grad-mark);color:#fff;font-weight:800;font-size:13px;
}
.panel .pill{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#7FD4FF;background:rgba(61,211,251,.14);border:1px solid rgba(61,211,251,.28);
  border-radius:var(--r-full);padding:3px 9px;
}
/* The glow behind it, as on the homepage. */
.split .panel{z-index:1}
.split>div:has(>.rows){position:relative}

/* ---- Sections ------------------------------------------------------- */
section.band{margin:84px 0 0}
section.band>h2{margin:0 0 12px;font-size:clamp(1.7rem,1.25rem + 1.9vw,2.5rem)}
section.band>.intro{color:var(--text-2);margin:0 0 30px;max-width:44em;font-size:1.06rem}

/* ---- Cards (no frame — see .card below) ----------------------------- */
.grid{display:grid;gap:44px 48px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:920px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:none;border:0;border-radius:0;padding:0}
.card h3{margin:0 0 8px;font-size:1.17rem;letter-spacing:-.02em}
.card p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.65}
.card p+p{margin-top:12px}
.card a{font-weight:600}

/* The icon above a heading. No chip behind it: the mark is the mark. */
.card .icon,.tour .icon{display:block;width:26px;height:26px;margin:0 0 14px;color:var(--brand)}
.card .icon svg,.tour .icon svg{width:26px;height:26px;display:block}

/* ---- Numbered steps ------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:step}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 22px 26px;counter-increment:step;
}
.steps li::before{
  content:counter(step);display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;
  border-radius:var(--r-full);background:var(--grad-brand);color:#fff;font-weight:800;font-size:15px;
}
.steps strong{display:block;font-size:1.08rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.steps span{color:var(--text-2);font-size:15.5px}

/* ---- Feature rows --------------------------------------------------- */
.stack{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.stack li{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 22px 22px 26px;overflow:hidden;
}
.stack li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-brand)}
.stack strong{display:block;margin-bottom:4px;font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.stack span{color:var(--text-2);font-size:15.5px}

.tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-full);padding:3px 10px;margin-left:8px;vertical-align:2px;
  background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);
}
.tag.soon{background:#FDF3DC;color:var(--gold);border-color:#F0DCAE}

/* ---- The closing invitation ----------------------------------------- */
/* Edge to edge, like whatsapp.com's coloured bands — not a rounded slab
   sitting inside the column. */
.cta-band{
  margin:96px calc(50% - 50vw) 0;width:100vw;padding:76px 24px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#0171cb 0%,#3DD3FB 100%);
}
.cta-band h2{margin:0 0 10px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:40em;margin:0 auto 26px}
.cta-band .btn.primary{background:#fff;color:var(--brand);box-shadow:0 8px 22px -10px rgba(2,12,40,.5)}
.cta-band .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.38);box-shadow:none}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.24)}
.cta-band .cta{justify-content:center}

/* ---- Prose documents ------------------------------------------------ */
/* NOT IN A BOX. The owner, 2026-09-24: "I dont like the boxed layout in
   helloworldmessenger.com/ai". A document used to sit inside a bordered card
   on a tinted page, which made every page look like a dialog. It is an
   article now: white page, one column, a measure you can actually read, and
   rules only where a section genuinely starts. */
.doc{padding:8px 0 24px;margin-top:8px}
.doc h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem);margin:0 0 10px;letter-spacing:-.033em}
.effective{color:var(--muted);font-size:15px;margin:0 0 36px}
.doc h2{
  font-size:clamp(1.35rem,1.15rem + .85vw,1.75rem);margin:56px 0 14px;scroll-margin-top:96px;
  padding-top:26px;border-top:1px solid var(--hairline);
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{font-size:1.14rem;font-weight:700;margin:32px 0 8px;letter-spacing:-.015em}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:1.35em}
li{margin:8px 0}
li>ul{margin:8px 0 0}
li::marker{color:var(--muted)}
strong{font-weight:700;color:var(--text)}
/* ...except inside a picture of the app, which is navy: the global rule
   above painted these labels dark-on-dark and they disappeared. */
.screen strong,.display strong,.display b{color:#fff}
.cta-band strong{color:#fff}
.doc p,.doc li{color:var(--text-2)}
.doc .lead{font-size:1.2rem;line-height:1.6;color:var(--text);font-weight:500;margin-bottom:28px}

/* A note beside the argument, not another card: a rule and a tint. */
.box{
  background:var(--surface-2);border-left:3px solid var(--brand);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;margin:0 0 22px;
}
.box>:last-child{margin-bottom:0}

/* The contents: a list under a label, ruled top and bottom. */
.toc{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:22px 0 16px;margin:0 0 40px;font-size:15px;
}
.toc p{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding-left:1.4em}
@media (min-width:720px){.toc ol{columns:2;column-gap:44px}}
.toc li{margin:0 0 8px;break-inside:avoid}
.toc a{text-decoration:none;color:var(--text-2)}
.toc a:hover{color:var(--brand);text-decoration:underline}

.contact{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0 0 18px}
.contact dt{color:var(--muted)}
.contact dd{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--text-2)}
.placeholder{
  background:#FDF3DC;color:var(--gold);border:1px solid #F0DCAE;
  border-radius:6px;padding:0 6px;font-weight:700;white-space:nowrap;
}
.table{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.55}
th,td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--hairline);color:var(--text-2)}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;border-bottom-color:var(--border)}

/* A page whose prose has not been written in the reader's language yet. */
.fallback{
  background:#FDF3DC;color:var(--gold);border:1px solid #F0DCAE;
  border-radius:var(--r-sm);padding:14px 18px;margin:24px 0 0;font-size:15px;
}

/* ---- Footer --------------------------------------------------------- */
.foot{
  border-top:1px solid var(--border);margin-top:96px;padding-top:56px;padding-bottom:56px;
}
.foot-brand{display:grid;gap:14px;margin:0 0 40px;max-width:30em}
.foot-brand .wordmark{margin:0;font-size:18px}
.foot-brand p{color:var(--muted);font-size:15px;margin:0}
.cols{display:grid;gap:30px 24px;grid-template-columns:1fr}
@media (min-width:560px){.cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.cols{grid-template-columns:repeat(4,1fr)}}
.cols h2{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 14px;font-weight:800;
}
.cols ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
.cols li{margin:0}
.cols a{color:var(--text-2);text-decoration:none}
.cols a:hover{color:var(--text)}
.fine{
  color:var(--muted);font-size:14px;margin:44px 0 0;padding-top:24px;
  border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:8px 16px;
}

/* ---- Phones --------------------------------------------------------- */
/* The header stays at the top on a phone too, so it has to stay SHORT:
   one row of wordmark, languages and the invitation, then the sections in
   a strip that scrolls sideways. Wrapping them instead cost a quarter of
   the screen, permanently, on a screen that has none to spare. */
@media (max-width:680px){
  .bar{gap:8px 10px;padding-top:10px;padding-bottom:10px;min-height:0}
  /* The invitation is the first thing under the hero's headline and the last
     thing on the page. A third copy, pinned over a phone screen, only costs
     a row of the little height there is. */
  .bar .btn{display:none}
  .wordmark{font-size:16px;gap:8px}
  .wordmark img{width:30px;height:30px}
  .nav{
    order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:2px 16px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:7px 11px;font-size:14.5px}
}
@media (max-width:480px){
  .wrap,.bar,main{padding-left:16px;padding-right:16px}
  .doc{padding:4px 0 20px}
  .hero{padding-top:32px;gap:34px}
  .cta-band{padding:36px 20px;border-radius:var(--r-xl)}
  .cta .btn{width:100%}
  .contact{grid-template-columns:1fr;gap:0}
  .contact dd{margin-bottom:10px}
  section.band{margin-top:64px}
}
/* Two columns of prose do not fit a phone: each row becomes a heading and
   its answer, one under the other. */
@media (max-width:620px){
  table,tbody,tr,td{display:block}
  thead{display:none}
  .table{border:0;border-radius:0}
  tr{padding:12px 0;border-bottom:1px solid var(--hairline)}
  td{border:0;padding:0}
  td:first-child{font-weight:700;color:var(--text);margin-bottom:3px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---- Print: a legal document on paper ------------------------------- */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000;font-size:11pt;background-image:none}
  .masthead,.foot,.toc,.cta,.langs,.nav{display:none}
  .doc{padding:0;margin:0}
  .doc h1,.doc h2,.doc h3,strong{color:#000}
  /* Gradient text prints as nothing at all without this. */
  .hero h1 .accent,.stats strong{background:none;color:#000;-webkit-text-fill-color:#000}
  .doc p,.doc li,.contact dd,td,th{color:#111}
  a{color:#000;text-decoration:underline}
  .box,.table{border-color:#999}
}

/* ---- "Read more about this" ------------------------------------------ */
/* Every band on the homepage ends by pointing at the page that covers it,
   the way whatsapp.com sends you from the home page to Calling. */
.more{display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 0}
.more a{font-weight:700;text-decoration:none;color:var(--brand)}
.more a:hover{text-decoration:underline}

/* =====================================================================
   THE STAGE — the homepage's opening block.

   WHITE PAGE, FADPAY'S PHONE. The owner, 2026-09-24: the white background
   and coloured bar of whatsapp.com, the colours and the phone of
   fadpaymoney.com, and "when I say I dont want a boxed layout I dont want
   it." So: no slab, no frame, no card. A headline on white, and beside it a
   real device showing a real conversation being translated.
   ===================================================================== */
.stage{position:relative;padding:56px 0 24px}
@media (min-width:960px){.stage{padding:76px 0 40px}}
.stage-inner{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.stage-inner{grid-template-columns:1.04fr .96fr;gap:56px}}
.stage h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.2rem);margin:0 0 20px;letter-spacing:-.037em}
.stage h1 .accent{display:block;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage .sub{font-size:clamp(1.04rem,1rem + .32vw,1.22rem);color:var(--text-2);max-width:33em;margin:0 0 30px}

/* ---- The device ------------------------------------------------------ */
/* FadPay's: a dark phone with its app inside, floated and lit, with one or
   two chips breaking the frame so it does not read as a screenshot in a
   box. The screen is the one thing this product has to show — a message
   arriving in a language its reader does not speak, and being understood. */
.device-wrap{position:relative;display:flex;justify-content:center;padding:10px 0}
.device-wrap::before{
  content:"";position:absolute;inset:2% 6% 6%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(1,113,203,.22),transparent 68%);filter:blur(46px);
}
.device{
  position:relative;z-index:1;width:min(322px,84vw);padding:11px;border-radius:46px;
  background:linear-gradient(165deg,#23324f 0%,#0a1225 48%,#161f38 100%);
  box-shadow:0 60px 110px -45px rgba(3,12,38,.62),0 26px 50px -28px rgba(3,12,38,.45);
}
.screen{
  position:relative;border-radius:36px;overflow:hidden;background:#050B1C;color:#fff;
  display:flex;flex-direction:column;min-height:552px;
}
.screen .notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);width:108px;height:26px;
  background:#050B1C;border-radius:0 0 16px 16px;z-index:3;
}
.screen .bar{
  display:flex;align-items:center;gap:11px;padding:40px 16px 13px;
  background:linear-gradient(180deg,#0B1733,#070F26);border-bottom:1px solid rgba(255,255,255,.07);
}
.screen .bar .face{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-mark);font-weight:800;font-size:14px;
}
.screen .bar strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.screen .bar span{display:block;font-size:12px;color:#8AA0C4}
.screen .chat{flex:1;padding:16px 14px;display:grid;gap:12px;align-content:start;background:#050B1C}
.screen .b{max-width:84%;padding:11px 14px;border-radius:17px;font-size:14px;line-height:1.45}
.screen .b.them{background:#15213F;border-bottom-left-radius:6px;justify-self:start}
.screen .b.me{background:linear-gradient(135deg,#0171cb,#2FB7EE);border-bottom-right-radius:6px;justify-self:end}
.screen .b .was{margin:0;font-size:12.5px;color:#8AA0C4}
.screen .b.me .was{color:rgba(255,255,255,.72)}
.screen .b .now{margin:5px 0 0;font-weight:600}
.screen .b .tag{
  display:inline-block;margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#7FD4FF;
}
.screen .b.me .tag{color:rgba(255,255,255,.85)}
.screen .b .wave{display:flex;align-items:flex-end;gap:3px;height:20px;margin:2px 0 6px}
.screen .b .wave i{flex:1;background:rgba(125,200,255,.55);border-radius:2px}
.screen .composer{
  display:flex;align-items:center;gap:10px;padding:12px 14px 20px;
  background:#070F26;border-top:1px solid rgba(255,255,255,.07);color:#5E7189;
}
.screen .composer .field{
  flex:1;height:36px;border-radius:99px;background:#15213F;
  display:flex;align-items:center;padding:0 14px;font-size:13px;color:#7E93B8;
}
.screen .composer .mic{width:36px;height:36px;border-radius:50%;flex:none;background:var(--grad-brand)}

/* The chips that break the frame, as FadPay's do. */
.chip{
  position:absolute;z-index:2;background:#fff;color:var(--text);border-radius:14px;
  padding:10px 13px;box-shadow:0 20px 40px -18px rgba(3,12,38,.42);font-size:12.5px;line-height:1.35;
  max-width:190px;
}
.chip strong{display:block;font-size:13px;margin-bottom:1px}
.chip em{font-style:normal;color:var(--brand-strong);font-weight:700}
.chip.tl{top:4%;left:-6%}
.chip.br{bottom:10%;right:-5%}
/* They hang off the device, so they only fit beside a two-column hero. */
@media (max-width:959px){.chip{display:none}}

/* ---- The tour: one card per feature, swiped sideways ----------------- */
/* Scroll-snap, so it is a carousel on a phone and a row on a desktop —
   and it needs no JavaScript, which this site still does not load. */
.tour{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,80%);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;
  margin:0 -24px;padding:4px 24px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tour::-webkit-scrollbar{display:none}
@media (min-width:700px){.tour{grid-auto-columns:minmax(290px,42%)}}
@media (min-width:1040px){.tour{grid-auto-columns:minmax(280px,31.4%);scroll-padding-left:0;margin:0;padding:4px 0 16px}}
.tour>a{
  scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding:4px 0 0;
}
.tour>a:hover .go{text-decoration:underline}
.tour h3{margin:14px 0 6px;font-size:1.12rem;letter-spacing:-.02em}
.tour p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}
.tour .go{margin-top:14px;font-weight:700;color:var(--brand);font-size:14.5px}
.swipe-hint{color:var(--muted);font-size:13.5px;margin:0 0 4px}
@media (min-width:1040px){.swipe-hint{display:none}}

/* =====================================================================
   THE HERO CAROUSEL, THE DEVICE, AND THE ACCOUNT CARD.

   Three references, given plainly by the owner on 2026-09-24: the slide
   carousel with PREV / NEXT arrows on the sides; whatsapp.com's "Create an
   account" card sitting in the hero; and fadpaymoney.com's phone, which is
   a real device with a real screen in it — "Image 3 is better than the
   squares you make".

   ALL OF IT WITHOUT JAVASCRIPT. The arrows are anchors into a scroll-snap
   track, so PREV and NEXT work on a phone, on a trackpad and with a
   keyboard, and nothing here breaks if a script fails to load.
   ===================================================================== */
/* PREV and NEXT are plain links, and `:target` decides which slide shows.
   A scroll-snap track was the first attempt and its arrows did nothing: an
   anchor cannot scroll a track the page has clipped. This cannot fail —
   every slide is one grid cell, stacked, and the targeted one is on top. */
/* FULL WIDTH. The owner, 2026-09-24: "You still using boxed layout. I want
   ot use the full width." The hero is the window's width, edge to edge and
   square-cornered; only the words inside it are held to a readable column. */
.hero-carousel{position:relative;margin:0 calc(50% - 50vw) 8px;width:100vw}
.slides{display:grid;overflow:hidden}
/* THE PHONE FLOATS ON THE SLIDE. The owner sent the render again on
   2026-09-25 as a PNG with transparency — "its PNG with transparency" — so
   there is no longer a rectangle of somebody else's blue to hide under a
   scrim. The slide paints our own gradient and the cut-out phone sits on
   it. `--shot` picks which phone, in the markup, one line per slide.

   The phones are PORTRAIT: sized by height and parked on the right, never
   `cover`, which blew one screen up until a single word filled the slide. */
.slide{
  grid-area:1/1;position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:90px;
  padding:46px 22px 54px;color:#fff;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease);
  background-color:#05224F;
  background-image:var(--shot,none),
    linear-gradient(118deg,#04255C 0%,#0171cb 58%,#1AA7E8 100%);
  background-repeat:no-repeat,no-repeat;
  background-size:var(--shot-size,auto 84%),cover;
  background-position:var(--shot-pos,72% center),center;
  min-height:clamp(500px,60vh,660px);
  display:flex;align-items:center;
}
/* The first slide carries all three, set back so the account card can sit
   over them. */
@media (max-width:860px){
  .slide,.slide:first-of-type{
    /* A fixed height, not a percentage: the slide has no set height here,
       so 34% of it grew with the words and landed on the headline. */
    background-size:var(--shot-size-sm,auto 252px),cover;
    background-position:top 18px center,center;
    padding-top:var(--pad-sm,296px);min-height:0;
  }
  /* Its render is an <img>, so it keeps one layer and its own padding. */
  .slide.has-signup,.slide.has-signup:first-of-type{
    background-size:cover;background-position:center;padding-top:46px;
  }
}
.slide:target{opacity:1;visibility:visible;z-index:2}
.slides:not(:has(.slide:target))>.slide:first-child{opacity:1;visibility:visible;z-index:2}
.slide::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(700px 420px at 10% -10%,rgba(90,170,255,.16),transparent 62%);
}
@media (min-width:860px){.slide{padding:70px 92px 78px}}
@media (min-width:1280px){.slide{padding:84px 120px 92px}}
.slide-inner{display:grid;gap:34px;align-items:center;max-width:1360px;margin:0 auto;width:100%}
@media (min-width:980px){
  .slide-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* Words | phone | card. The owner marked the two zones on a screenshot
     (2026-09-27): the phone has its own column and the card sits beside it
     instead of lying over it. */
  .slide-inner.with-signup{grid-template-columns:minmax(0,5.2fr) minmax(0,3.2fr) minmax(0,4.1fr);gap:34px}
}
/* On that slide the picture is an element, not a background.
   THE SIZE AND POSITION HAVE TO BE RESET WITH IT. `.slide` paints two layers,
   the render and the gradient, so background-size carries two values; drop to
   one image and the gradient inherits the RENDER's size — `auto 84%`, or
   `auto 252px` on a phone — and stops partway down, leaving a band of bare
   background-color across the words. */
.slide.has-signup{
  background-image:linear-gradient(118deg,#04255C 0%,#0171cb 58%,#1AA7E8 100%);
  background-size:cover;background-position:center;
}
.phone-slot{display:flex;justify-content:center;align-items:center}
.phone-slot img{width:min(286px,100%);height:auto;display:block;filter:drop-shadow(0 42px 60px rgba(2,10,34,.45))}
@media (max-width:979px){
  .slide.has-signup{padding-top:46px}
  .phone-slot img{width:min(230px,56%)}
}
/* A slide with nothing in its second column gives the picture the room. */
.slide-inner>div:only-child{max-width:41rem}
.slide .sub{text-shadow:0 1px 16px rgba(2,10,30,.35)}
.slide h1,.slide h2{text-shadow:0 2px 24px rgba(2,10,30,.4)}
.slide h1,.slide h2{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);margin:0 0 16px;letter-spacing:-.035em;color:#fff}
.slide .accent{display:block;color:#BFE8FF}
.slide p.sub{font-size:clamp(1rem,.98rem + .3vw,1.18rem);color:rgba(255,255,255,.92);max-width:32em;margin:0 0 26px}
.slide .eyebrow{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
.slide .eyebrow::before{background:#fff}
.slide .btn.primary{background:#fff;color:var(--brand-strong);box-shadow:0 12px 28px -14px rgba(2,12,40,.7)}
.slide .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.44);box-shadow:none}
.slide .btn.ghost:hover{background:rgba(255,255,255,.26)}

/* PREV / NEXT, as in the reference: on the edges, quiet until wanted. */
/* THE ARROW IS THE ARROW, AND NO WORD BESIDE IT. It used to carry "PREV" and
   "NEXT"; on the first slide the invitation card reaches the edge of the
   content, and the longer words of the other two languages — SIGUIENTE,
   SUIVANT — ran underneath it. The word is kept for a screen reader, in the
   link's aria-label, and the circle says the rest in every language. */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  color:#fff;text-decoration:none;opacity:.85;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease);
}
.arrow:hover{opacity:1;background:rgba(255,255,255,.28);color:#fff}
.arrow span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.arrow.prev{left:10px}
.arrow.next{right:10px}
@media (min-width:1280px){.arrow.prev{left:22px}.arrow.next{right:22px}}
.arrow svg{width:22px;height:22px}
/* On a phone the words fill the slide, so the arrows go to the bottom
   corners instead of sitting on top of a sentence. */
@media (max-width:900px){
  .arrow{width:42px;height:42px;top:auto;bottom:12px}
}
.dots{display:flex;justify-content:center;gap:9px;margin:18px 0 0}
.dots a{width:9px;height:9px;border-radius:50%;background:#CBD8EE;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.dots a:hover{background:var(--brand);transform:scale(1.25)}
.hero-carousel:not(:has(.slide:target))+.dots a:first-child,
.hero-carousel:has(#slide-1:target)+.dots a:nth-child(1),
.hero-carousel:has(#slide-2:target)+.dots a:nth-child(2),
.hero-carousel:has(#slide-3:target)+.dots a:nth-child(3),
.hero-carousel:has(#slide-4:target)+.dots a:nth-child(4),
.hero-carousel:has(#slide-5:target)+.dots a:nth-child(5),
.hero-carousel:has(#slide-6:target)+.dots a:nth-child(6){background:var(--brand);transform:scale(1.25)}

/* ---- The device ------------------------------------------------------ */
.stagephone{position:relative;display:flex;justify-content:center;padding:6px 0}
.iphone{
  position:relative;width:min(290px,80vw);aspect-ratio:9/19.3;
  padding:9px;border-radius:52px;
  background:linear-gradient(150deg,#39466A 0%,#161D30 26%,#0C1120 62%,#2A3450 100%);
  box-shadow:0 70px 120px -46px rgba(2,8,28,.75),0 26px 54px -28px rgba(2,8,28,.5),
             inset 0 0 0 1px rgba(255,255,255,.10);
}
/* The buttons down the sides, which is most of what makes it read as a phone. */
.iphone::before,.iphone::after{
  content:"";position:absolute;width:3px;border-radius:3px;background:linear-gradient(180deg,#48557a,#232c46);
}
.iphone::before{left:-3px;top:23%;height:62px;box-shadow:0 84px 0 #2b3452,0 -46px 0 #2b3452}
.iphone::after{right:-3px;top:30%;height:96px}
.display{
  position:relative;height:100%;border-radius:44px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(185deg,#0B2350 0%,#071634 42%,#050E24 100%);color:#fff;
}
.island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:6;
  width:84px;height:24px;border-radius:99px;background:#04070F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.island::after{content:"";position:absolute;right:9px;top:7px;width:9px;height:9px;border-radius:50%;background:#0D1526;box-shadow:inset 0 0 3px rgba(120,190,255,.5)}
.scr{flex:1;overflow:hidden;padding:42px 14px 0;display:flex;flex-direction:column;gap:12px}
.scr-top{display:flex;align-items:center;gap:10px}
.scr-top .me{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-mark);font-weight:800;font-size:13px;
}
.scr-top .hi{flex:1;line-height:1.25}
.scr-top .hi span{display:block;font-size:11px;color:#8FA6CC}
.scr-top .hi strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.scr-top .bell{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:13px}

/* The card at the top of the screen: the translation, which is this app's
   equivalent of the balance FadPay puts there. */
.scr-card{
  border-radius:18px;padding:13px 14px;
  background:linear-gradient(160deg,rgba(61,211,251,.16),rgba(1,113,203,.14));
  box-shadow:inset 0 0 0 1px rgba(140,200,255,.20);
}
.scr-card .lbl{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FD3FF}
.scr-card .was{margin:6px 0 0;font-size:12px;color:#93A9CE}
.scr-card .now{margin:3px 0 0;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.scr-card .chip2{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:3px 9px;border-radius:99px;
  background:rgba(53,208,127,.16);color:#6FE3A8;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
/* Four tiles, like FadPay's Envoyer / Payer / Change / Tontines. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tiles div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9.5px;color:#B9CAE6}
.tiles i{width:38px;height:38px;border-radius:13px;display:block;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.tiles .t1{background:linear-gradient(145deg,#2E8BFF,#0F5FD6)}
.tiles .t2{background:linear-gradient(145deg,#34D399,#0E9F6E)}
.tiles .t3{background:linear-gradient(145deg,#3DD3FB,#0C8CC4)}
.tiles .t4{background:linear-gradient(145deg,#F6D36B,#D29B1F)}
.scr-lbl{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7F97BE;margin-top:2px}
.scr-rows{display:grid;gap:7px}
.scr-row{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.scr-row i{width:30px;height:30px;border-radius:10px;flex:none}
.scr-row .n{flex:1;min-width:0}
.scr-row .n strong{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.scr-row .n span{display:block;font-size:10.5px;color:#8FA6CC;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-row .r{font-size:10px;color:#6FE3A8;font-weight:700;white-space:nowrap}
.scr-row .r.mute{color:#7F97BE;font-weight:600}
/* The tab bar, with the mark floating over it. */
.tabbar{
  margin-top:auto;position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  padding:10px 6px 16px;background:rgba(4,10,26,.72);border-top:1px solid rgba(255,255,255,.07);
}
.tabbar div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8.5px;color:#6E86AD}
.tabbar div.on{color:#5FB4FF}
.tabbar i{width:16px;height:16px;border-radius:5px;background:currentColor;opacity:.85}
.tabbar .mark{
  position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px -8px rgba(31,107,234,.8),0 0 0 5px rgba(5,14,36,.85);
}
.tabbar .mark img{width:30px;height:30px;border-radius:9px}

/* The cards that float off the device, as in FadPay's shot. */
.hovercard{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  padding:10px 13px;border-radius:16px;background:rgba(8,20,46,.86);
  box-shadow:0 22px 44px -18px rgba(2,8,28,.7),inset 0 0 0 1px rgba(150,200,255,.16);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hovercard i{width:34px;height:34px;border-radius:11px;flex:none}
.hovercard strong{display:block;font-size:12.5px;color:#fff;letter-spacing:-.01em}
.hovercard span{display:block;font-size:10.5px;color:#9BB2D6}
.hovercard.a{top:13%;left:-12%}
.hovercard.b{bottom:16%;right:-14%}
@media (max-width:1100px){.hovercard{display:none}}

/* ---- "Create your account", the way whatsapp.com does it ------------- */
.signup{
  background:rgba(4,16,44,.42);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-xl);
  padding:26px 24px 24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px -30px rgba(2,10,34,.7);max-width:420px;
}
.signup h2{font-size:1.5rem;margin:0 0 4px;color:#fff;letter-spacing:-.025em}
.signup .lead{color:rgba(255,255,255,.86);font-size:14.5px;margin:0 0 16px}
.signup .fine{color:rgba(255,255,255,.72);font-size:12px;line-height:1.5;margin:14px 0 0}
.signup .fine a{color:#CDE8FF}

/* ---- The three phones together -------------------------------------- */
/* Their own band on the Download page: full width, the render centred on
   the brand gradient, nothing boxed. */
.trio{
  margin:44px calc(50% - 50vw) 0;width:100vw;padding:54px 24px 0;
  background:linear-gradient(118deg,#04255C 0%,#0171cb 58%,#1AA7E8 100%);
  text-align:center;color:#fff;overflow:hidden;
}
.trio p{max-width:34em;margin:0 auto 34px;color:rgba(255,255,255,.92);font-size:1.06rem}
.trio h2{color:#fff;margin:0 0 12px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
.trio img{display:block;width:min(1120px,100%);margin:0 auto;height:auto}

/* The phones run straight into the invitation below them. */
.trio+.cta-band{margin-top:0}

/* ---- A real screen, wherever a page used to draw one ----------------- */
/* The owner, 2026-09-26: "change all the pages for anything with phone."
   Every feature page ended a section with a phone drawn in CSS; each is one
   of his renders now, lit from behind and standing on the page with no
   frame around it. The facts that lived on the drawn screen sit under it as
   a plain list, so nothing that was written is lost. */
.shot{position:relative;margin:0;display:flex;justify-content:center}
.shot::before{
  content:"";position:absolute;inset:6% 8% 10%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(1,113,203,.22),transparent 70%);filter:blur(44px);
}
.shot img{position:relative;z-index:1;width:min(300px,78%);height:auto;display:block}
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.facts li{padding:15px 0;border-bottom:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.facts li:last-child{border-bottom:0}
.facts strong{flex:1 1 auto;font-size:15.5px;color:var(--text)}
.facts span{flex:1 1 100%;font-size:14.5px;color:var(--text-2);line-height:1.55}
.facts em{
  font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-strong);background:rgba(1,113,203,.09);border:1px solid rgba(1,113,203,.2);
  border-radius:var(--r-full);padding:3px 9px;
}

/* ---- The invitation form in the hero card ---------------------------- */
.signup form{display:grid;gap:10px;margin:0 0 4px}
.signup input.field{
  width:100%;border:0;border-radius:var(--r-full);padding:13px 18px;font:inherit;font-size:15.5px;
  background:#fff;color:var(--text);
}
.signup input.field::placeholder{color:var(--muted)}
.signup input.field:focus-visible{outline:3px solid #BFE8FF;outline-offset:2px}
.signup .btn{width:100%;margin-top:2px}
.signup .field-error{
  margin:0;font-size:13.5px;line-height:1.45;color:#FFE6E2;background:rgba(168,24,14,.62);
  border-radius:var(--r-sm);padding:9px 13px;
}
/* The honeypot and the labels a screen reader still needs. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The thank-you, on the Download page after the form posts. */
.thanks{
  margin:28px 0 0;padding:20px 22px;border-left:3px solid var(--success);
  background:rgba(15,157,88,.08);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.thanks strong{display:block;font-size:1.08rem;margin-bottom:4px}
.thanks p{margin:0;color:var(--text-2)}

/* ---- Hello World Meeting (/m/…) ------------------------------------- */
/* The one page with a script. Before the call it is the website: white,
   no boxes, the form as plain fields. The call itself takes the whole
   screen in the app's navy, like the app's own call screen — it is a
   picture of people, and a white frame around video reads as a box. */
.meet{padding:36px 0 64px}
/* `hidden` must win over the display rules below. */
.meet [hidden]{display:none!important}
.meet-head h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);margin:0 0 6px;letter-spacing:-.03em}
.meet-head .lead{margin:0 0 14px;color:var(--text-2)}
.meet-message{font-size:18px;color:var(--text)}
.meet-notice{font-size:14.5px;color:var(--muted);margin:14px 0 0}
.meet-error{color:#B42318;font-weight:600;margin:0}

.meet-prejoin{display:grid;gap:28px;margin-top:18px}
@media (min-width:860px){.meet-prejoin{grid-template-columns:1.1fr .9fr;align-items:start}}
.meet-preview{position:relative;aspect-ratio:16/10;background:var(--app-bg);border-radius:var(--r-lg);overflow:hidden}
.meet-preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.meet-preview-off{display:none;position:absolute;inset:0 0 56px;margin:0;padding:18px 22px;place-items:center;text-align:center;color:var(--app-text-2);font-size:15px;line-height:1.5}
.meet-preview.is-off .meet-preview-video{visibility:hidden}
.meet-preview.is-off .meet-preview-off{display:grid}
.meet-toggles{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

.meet-toggle,.meet-control{
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  padding:10px 16px;border-radius:var(--r-full);border:1px solid var(--app-border);
  background:rgba(14,27,51,.86);color:var(--app-text);
}
.meet-toggle[aria-pressed="false"],.meet-control[aria-pressed="false"]{background:#fff;color:#B42318;border-color:#fff}

.meet-fields{display:grid;gap:16px}
.meet-fields label{display:grid;gap:6px;font-weight:600;font-size:15px}
.meet-fields input{
  font:inherit;font-size:17px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:#fff;color:var(--text);width:100%;
}
.meet-fields input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.meet-fields .btn{justify-self:start;border:0;cursor:pointer}
.meet-fields .btn[disabled]{opacity:.6;cursor:progress}

.meet-wait,.meet-done{padding:28px 0;display:grid;gap:16px;justify-items:start}
.meet-done .btn,.meet-wait .btn{border:0;cursor:pointer}
.meet-wait .btn.ghost{border:1px solid var(--border)}
.meet-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--brand);animation:meet-spin .9s linear infinite}
@keyframes meet-spin{to{transform:rotate(360deg)}}

/* The call: the whole screen. */
.meet-in-call,.meet-in-call body{overflow:hidden}
.meet-stage{position:fixed;inset:0;z-index:50;background:var(--app-bg);color:var(--app-text);display:flex;flex-direction:column;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.meet-stage[hidden]{display:none}
.meet-banner{flex:none;align-self:center;margin:0 0 10px;text-align:center;font-weight:600;color:var(--app-text);background:var(--app-surface-2);border-radius:var(--r-full);padding:8px 16px;justify-self:center}
.meet-grid{flex:1 1 auto;display:grid;gap:10px;min-height:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));grid-auto-rows:minmax(0,1fr);align-content:stretch}
.meet-grid[data-count="1"]{grid-template-columns:1fr}
.meet-grid[data-count="2"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.meet-grid.has-screen{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-rows:minmax(110px,auto)}
.meet-grid.has-screen .is-screen{grid-column:1/-1;min-height:55vh}
.meet-tile{position:relative;background:var(--app-surface);border-radius:var(--r-md);overflow:hidden;min-height:120px;display:grid;place-items:center}
.meet-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.meet-tile.has-video video{visibility:visible}
.meet-tile.is-screen video{object-fit:contain;background:#000}
.meet-tile.is-local video{transform:scaleX(-1)}
.meet-tile.is-speaking{box-shadow:inset 0 0 0 3px var(--brand-2)}
.meet-avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;background:var(--grad-mark);color:#fff}
.meet-tile.has-video .meet-avatar{display:none}
.meet-label{position:absolute;left:10px;bottom:10px;right:10px;margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;line-height:1.3}
.meet-label strong{color:#fff;background:rgba(2,6,37,.72);padding:4px 10px;border-radius:var(--r-full);font-weight:700}
.meet-badge{background:var(--brand);color:#fff;padding:3px 9px;border-radius:var(--r-full);font-size:12.5px;font-weight:700}
.meet-badge.is-quiet{background:rgba(2,6,37,.72)}
.meet-controls{flex:none;align-items:center;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-top:12px}
.meet-leave{background:#D92D20;border-color:#D92D20;color:#fff}
.meet-sound{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);border:0;cursor:pointer;z-index:51}
.meet-find{max-width:520px;margin-top:8px}

/* The host's People panel: a column over the right of the call, the whole
   screen on a phone. Plain rows, no cards. */
.meet-panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);z-index:52;overflow-y:auto;
  background:var(--app-surface);color:var(--app-text);padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:-12px 0 32px -18px rgba(0,0,0,.6)}
.meet-panel h2{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--app-text-2);margin:22px 0 8px}
.meet-panel-invite p{margin:0 0 10px;font-weight:700;font-size:18px}
.meet-panel-invite .meet-panel-warn{font-size:14px;font-weight:600;color:#FDB022}
.meet-panel-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 0;border-bottom:1px solid var(--app-border)}
.meet-panel-name{font-weight:700;margin-right:auto}
.meet-panel-actions{display:flex;gap:6px}
.meet-panel-empty{color:var(--app-muted);margin:0}
.meet-panel-button{font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:7px 12px;border-radius:var(--r-full);
  border:1px solid var(--app-border);background:transparent;color:var(--app-text)}
.meet-panel-button.is-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.meet-panel-button.is-danger{background:#D92D20;border-color:#D92D20;color:#fff}
.meet-panel-switches{display:grid;gap:12px;justify-items:start;margin-top:22px}
.meet-panel-switches label{display:flex;gap:8px;align-items:center;font-weight:600}
.meet-panel-close{margin-top:22px}
.meet-control.has-waiting{background:var(--brand);border-color:var(--brand)}
.meet-create{max-width:560px;margin-top:8px}
.meet-create textarea{font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--border);width:100%;resize:vertical}
.meet-help{font-weight:400;font-size:14px;color:var(--muted)}
.meet-when{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.meet-when legend{font-weight:600;font-size:15px;padding:0;margin-bottom:6px;width:100%}
.meet-when label{display:flex;gap:6px;align-items:center;font-weight:400}
.meet-when input[type="datetime-local"]{width:auto}
.meet-check{display:flex!important;grid-template-columns:none;gap:10px;align-items:flex-start;font-weight:400!important}
.meet-check input{width:auto;margin-top:6px}
.meet-or{font-size:1.4rem;margin:48px 0 4px;letter-spacing:-.02em}
.meet-created .meet-message{font-weight:600}
.meet-control[data-control="screen"][aria-pressed="false"],.meet-control[data-control="people"]{background:rgba(14,27,51,.86);color:var(--app-text);border-color:var(--app-border)}
.meet-control[data-control="screen"][aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
@media (min-width:600px){.meet-panel{bottom:76px;border-radius:0 0 0 var(--r-md)}}