/* Ola landing page, from the Stitch design in `stitch/font page/`.
   Hand-written rather than Tailwind: the play CDN compiles in the visitor's browser and ships
   ~350 KB of JavaScript to do it, which is most of a page load on a Cameroonian mobile plan.

   Everything is sized in rem, and the root size grows on very wide screens (see the end of the
   file). That is what makes the page scale on a 2560 px monitor instead of sitting in a 1280 px
   column with a metre of blank either side. Media queries stay in px, because a rem inside a media
   query means the browser default, never the root size set here. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #00685d;
  --primary-2: #008376;
  --on-primary: #ffffff;
  --primary-fixed: #8ff4e3;
  --on-primary-fixed: #00201c;
  --brand: #128c7e;
  --live: #25d366;
  --secondary: #904d00;
  --secondary-c: #fe932c;
  --secondary-fixed: #ffdcc3;
  --on-secondary-fixed: #2f1500;
  --tertiary: #964400;
  --tertiary-c: #bc5800;
  --amber: #f59e0b;
  --surface: #faf8ff;
  --c-lowest: #ffffff;
  --c-low: #f2f3ff;
  --c: #eaedff;
  --c-high: #e2e7ff;
  --c-highest: #dae2fd;
  --ink: #131b2e;
  --ink-2: #3d4946;
  --outline: #6d7a77;
  --line: rgba(189, 201, 197, 0.45);
  --line-2: rgba(189, 201, 197, 0.7);
  --inverse: #283044;
  --on-inverse: #eef0ff;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(18, 140, 126, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 40px -12px rgba(15, 23, 42, 0.16), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
  --r: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --gutter: 1.5rem;
  --max: 80rem;
  /* The logo's height. The header shrinks it once the visitor starts reading. */
  --logo-h: 3.25rem;
  --nav-h: 5.5rem;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* An English visitor would otherwise see the French text for a frame before the switch. */
html.lang-pending body { opacity: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--mono); }
::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; border-radius: 0.25rem; }

.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ logo */
/* The owner's logo (`assets/logo.png`): a navy tile with the name inside it, served at the sizes
   `scripts/brand-assets.py` cuts. The name is in the picture, so only the tagline is live text, set
   beside the tile rather than under a second copy of the name. */
.logo { display: inline-flex; align-items: center; gap: calc(var(--logo-h) * 0.24); line-height: 1; }
/* flex: none, or a crowded header squeezes the tile's width to nothing while its height stays put. */
.logo-mark { display: block; flex: none; width: var(--logo-h); height: var(--logo-h); transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease; }
.logo-mark img { width: 100%; height: 100%; }
.logo:hover .logo-mark { transform: scale(1.05) rotate(-3deg); }
.logo-tag {
  font-size: calc(var(--logo-h) * 0.19);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #009966;
  white-space: nowrap;
  transition: font-size 0.25s ease, opacity 0.2s ease;
}
.logo-lg { --logo-h: 4.5rem; }

/* ---------------------------------------------------------------- header */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(250, 248, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 231, 255, 0.6);
  box-shadow: var(--shadow-sm);
}
.nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: height 0.25s ease; }
.nav-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.nav.is-condensed { --logo-h: 2.5rem; --nav-h: 4.25rem; }
.nav.is-condensed .logo-tag { font-size: 0; opacity: 0; }
.cities {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--c-high);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.links { display: none; align-items: center; gap: 1.25rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.links a { color: var(--ink-2); transition: color 0.2s; }
.links a:hover { color: var(--primary); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }

.lang { display: none; align-items: center; padding: 0.25rem; border-radius: var(--r); background: var(--c-low); font-size: 0.75rem; font-weight: 600; }
.lang button { padding: 0.25rem 0.625rem; border-radius: 0.25rem; color: var(--ink-2); }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--c-lowest); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn .ic { width: 1.5rem; height: 1.5rem; }
.btn-1 { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 6px -1px rgba(0, 104, 93, 0.25); }
.btn-1:hover { background: var(--primary-2); box-shadow: 0 10px 15px -3px rgba(0, 104, 93, 0.3); }
.btn-2 { background: var(--c-lowest); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); font-weight: 600; }
.btn-2:hover { background: var(--c-low); }
.btn-lg { padding: 1rem 1.75rem; border-radius: var(--r-xl); font-size: 1rem; }
.btn-lg:hover { transform: scale(1.02); }
.btn-lg:active { transform: scale(0.98); }
.btn-soft { background: var(--c-low); color: var(--ink); border: 1px solid var(--line); }
.btn-soft:hover { background: var(--c-high); }
.btn-soft .ic { color: var(--secondary); }
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: shimmer 3s infinite;
}
.nav-demo { display: none; }
/* The label is two flex items ("Try" + " it free"), so the gap is the space between them. */
.nav .btn-1 { gap: 0.3em; }

/* ------------------------------------------------------------------ hero */
main { padding-top: var(--nav-h); }
.hero { position: relative; overflow: hidden; padding: 2rem 0 5rem; }
.glow { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.glow-1 { top: -8rem; left: -5rem; width: 24rem; height: 24rem; background: rgba(143, 244, 227, 0.3); }
.glow-2 { top: 12rem; right: -5rem; width: 30rem; height: 30rem; background: rgba(255, 220, 195, 0.35); }
.hero .wrap { position: relative; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: var(--c-high);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge .ic { color: var(--primary); width: 1.1rem; height: 1.1rem; }
.ping { position: relative; display: inline-flex; width: 0.625rem; height: 0.625rem; flex: none; }
.ping::before, .ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primary); }
.ping::before { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }
.hero-copy { max-width: 56rem; margin-bottom: 3rem; }
.hero h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 1.5rem; }
.hl { color: var(--primary); text-decoration: underline; text-decoration-color: var(--secondary-c); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.lede { font-size: 1.125rem; color: var(--ink-2); line-height: 1.65; max-width: 48rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.ticks { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.ticks li { display: flex; align-items: center; gap: 0.5rem; }
.ticks .ic { color: var(--primary); width: 1.15rem; height: 1.15rem; }

/* ------------------------------------------------------- hero composition */
.duo { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
.card {
  background: var(--c-lowest);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
}
.shop { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.shop-photo { position: relative; height: 20rem; overflow: hidden; background: var(--c); }
.shop-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.05); filter: brightness(0.95); }
.shop-id {
  position: absolute;
  inset: auto 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-md);
  animation: float 6s ease-in-out 3s infinite;
}
.shop-av { position: relative; flex: none; }
.shop-av img { width: 4rem; height: 4rem; border-radius: var(--r-xl); object-fit: cover; box-shadow: 0 0 0 2px var(--primary); }
.shop-av::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #fff;
  animation: pulse-ring 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
.shop-id h3 { font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.shop-id p { font-size: 0.75rem; color: var(--ink-2); margin-top: 0.125rem; }
.pill-ex { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--secondary-fixed); color: var(--on-secondary-fixed); }
.shop-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; justify-content: space-between; }
.shop-body h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 0.375rem; }
.agenda {
  font-size: 0.875rem;
  line-height: 1.6;
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: var(--r-2xl) var(--r-2xl) 0.25rem var(--r-2xl);
  padding: 0.875rem 1rem;
}
.agenda b { display: block; margin-bottom: 0.25rem; }
.agenda li { display: flex; gap: 0.5rem; }
.agenda time { font-family: var(--mono); font-weight: 700; color: var(--primary); flex: none; }
.agenda .ok { color: var(--primary); font-weight: 700; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--r); background: var(--c-low); border: 1px solid var(--line); font-weight: 600; }
.chip .ic { color: var(--primary); width: 1rem; height: 1rem; }
code.cmd { background: var(--c); padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: var(--primary); font-weight: 700; font-size: 0.75rem; }

/* The WhatsApp screen. */
.sim { display: flex; flex-direction: column; padding: 1rem; background: rgba(226, 231, 255, 0.6); border: 1px solid var(--line-2); border-radius: var(--r-2xl); box-shadow: var(--shadow-xl); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sim-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem; margin-bottom: 0.75rem; background: var(--c-lowest); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.sim-who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sim-who .logo-mark { --logo-h: 2.75rem; flex: none; }
.sim-who b { display: block; font-size: 0.875rem; }
.sim-who small { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); flex: none; }
.dot.blink { animation: blink 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.momo { flex: none; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--secondary-fixed); color: var(--on-secondary-fixed); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.chat { display: flex; flex-direction: column; gap: 0.875rem; font-size: 0.875rem; line-height: 1.43; }
.stamp { align-self: center; padding: 0.125rem 0.75rem; border-radius: 999px; background: var(--c); font-size: 0.75rem; color: var(--ink-2); font-weight: 500; }
.msg { max-width: 88%; padding: 0.875rem; border-radius: var(--r-2xl); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, opacity 0.45s ease, transform 0.45s ease; }
.msg:hover { box-shadow: var(--shadow-md); }
.msg.in { align-self: flex-start; border-top-left-radius: 0.25rem; background: var(--c-lowest); border: 1px solid var(--line); }
.msg.out { align-self: flex-end; border-top-right-radius: 0.25rem; background: rgba(0, 104, 93, 0.1); border: 1px solid rgba(0, 104, 93, 0.2); }
.msg-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.msg-h small { font-size: 0.625rem; font-weight: 400; color: var(--outline); }
.msg.out .msg-h > span { color: var(--primary); display: flex; align-items: center; gap: 0.25rem; }
.msg.out .msg-h .ic { width: 0.875rem; height: 0.875rem; }
.tag { font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(0, 104, 93, 0.2); color: var(--primary); font-weight: 700; }
.tag.gold { background: var(--secondary-fixed); color: var(--on-secondary-fixed); }
.msg time { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-family: var(--mono); font-size: 0.6875rem; color: var(--outline); }
.msg time .ic { color: var(--primary); width: 0.9rem; height: 0.9rem; }
.pay { align-self: center; width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem; border-radius: var(--r-xl); background: var(--c-lowest); border: 2px solid rgba(254, 147, 44, 0.6); box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1); transition: transform 0.2s, opacity 0.45s ease; }
.pay:hover { transform: scale(1.01); }
.pay-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pay-h > span:first-child { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary); }
.amt { font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: var(--secondary-c); color: #663500; font-weight: 700; }
.pay-prompt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem; border-radius: var(--r); background: var(--c-low); font-size: 0.8125rem; font-weight: 600; }
.pay-prompt span:last-child { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--primary); flex: none; }
.pay-prompt .ic { width: 1rem; height: 1rem; }
.pay-ok { display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 0.25rem; color: var(--primary); font-size: 0.75rem; font-weight: 700; }
.pay-ok .ic { width: 1.1rem; height: 1.1rem; }
.typing { align-self: flex-end; display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--c-lowest); border: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-2); font-weight: 500; }
.typing i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--primary); animation: dot-bounce 1.2s infinite ease-in-out; }
.typing i:nth-child(3) { animation-delay: 0.2s; }
.typing i:nth-child(4) { animation-delay: 0.4s; }
.sim-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding: 0.625rem 1rem; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-2); }
.sim-foot > span { display: flex; align-items: center; gap: 0.375rem; }
.sim-foot .ic { color: var(--primary); width: 1rem; height: 1rem; }
.sim-foot b { color: var(--primary); flex: none; }
/* Played in order once the screen is in view. Visible by default, so a visitor with no
   JavaScript, or one who asked for less motion, simply reads the whole conversation. */
.chat.play > .step-hide { opacity: 0; transform: translateY(0.5rem); }

/* -------------------------------------------------------------- sections */
.sec { padding: 5rem 0; }
.sec-alt { background: var(--c-low); border-block: 1px solid var(--line); }
.sec-tint { background: rgba(226, 231, 255, 0.4); border-top: 1px solid var(--line); }
.kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.h2 { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 0.375rem; }
.sub { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.65; }
.head-split { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3.5rem; }
.head-split .sub { max-width: 28rem; }
.head-center { text-align: center; max-width: 42rem; margin: 0 auto 4rem; }
.head-center .sub { margin-top: 0.75rem; }
.pill-soft { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.875rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.75rem; }
.pill-gold { background: var(--secondary-fixed); color: var(--on-secondary-fixed); }
.pill-blue { background: var(--c-high); color: var(--primary); }
.pill-blue .ic { width: 1rem; height: 1rem; }

.pillars { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.pillar { display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; border-radius: var(--r-2xl); background: var(--c-lowest); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow 0.25s, transform 0.25s; --tone: var(--primary); --tone-bg: rgba(0, 104, 93, 0.1); }
.pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pillar.t2 { --tone: var(--secondary); --tone-bg: rgba(144, 77, 0, 0.1); }
.pillar.t3 { --tone: var(--tertiary); --tone-bg: rgba(150, 68, 0, 0.1); }
.pillar-ic { width: 3rem; height: 3rem; border-radius: var(--r-xl); display: grid; place-items: center; margin-bottom: 1.25rem; background: var(--tone-bg); color: var(--tone); transition: background 0.25s, color 0.25s; }
.pillar-ic .ic { width: 1.5rem; height: 1.5rem; }
.pillar:hover .pillar-ic { background: var(--tone); color: #fff; }
.pillar .num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tone); }
.pillar h3 { font-size: 1.125rem; font-weight: 700; margin: 0.25rem 0 0.625rem; line-height: 1.35; }
.pillar p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; }
.note { margin-top: 1.5rem; padding: 0.75rem; border-radius: var(--r-xl); background: var(--c-low); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.note .ic { width: 1rem; height: 1rem; color: var(--tone, var(--primary)); }

.steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.step { display: flex; flex-direction: column; padding: 2rem; border-radius: var(--r-2xl); background: var(--c-lowest); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow 0.25s; }
.step:hover { box-shadow: var(--shadow-md); }
.step-n { width: 3.5rem; height: 3.5rem; border-radius: var(--r-2xl); display: grid; place-items: center; margin-bottom: 1.5rem; font-size: 1.25rem; font-weight: 800; color: #fff; background: var(--primary); box-shadow: 0 4px 6px -1px rgba(0, 104, 93, 0.2); }
.step:nth-child(2) .step-n { background: var(--secondary); box-shadow: 0 4px 6px -1px rgba(144, 77, 0, 0.2); }
.step:nth-child(3) .step-n { background: var(--tertiary-c); box-shadow: 0 4px 6px -1px rgba(188, 88, 0, 0.2); }
.step h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.step p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.65; margin-bottom: 1.5rem; }
.step .note { margin-top: auto; padding: 0.875rem; }
.step:nth-child(1) .note .ic { color: var(--primary); }
.step:nth-child(2) .note .ic { color: var(--secondary); }
.step:nth-child(3) .note .ic { color: var(--tertiary); }

/* ---------------------------------------------------------------- pricing */
.price-wrap { max-width: 64rem; margin-inline: auto; }
.prices { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
.plan-main { padding: 2rem; border-radius: var(--r-2xl); background: var(--c-lowest); border: 1px solid var(--line-2); box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1); display: flex; flex-direction: column; justify-content: space-between; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; font-size: 0.75rem; color: var(--ink-2); }
.plan-top b { padding: 0.25rem 0.875rem; border-radius: 999px; background: var(--primary-fixed); color: var(--on-primary-fixed); }
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.amount strong { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.amount span { font-size: 1.5rem; font-weight: 700; }
.amount small { font-size: 0.875rem; color: var(--ink-2); }
.packs { font-size: 0.75rem; font-weight: 700; color: var(--secondary); margin-bottom: 1.75rem; }
.list { display: flex; flex-direction: column; gap: 0.875rem; font-size: 0.875rem; margin-bottom: 2rem; }
.list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.list .ic { color: var(--primary); width: 1.25rem; height: 1.25rem; }
.plan-main .btn { width: 100%; padding: 1rem; border-radius: var(--r-xl); }
.side { display: flex; flex-direction: column; gap: 1rem; }
.side-gold { padding: 1.5rem; border-radius: var(--r-2xl); background: var(--secondary-fixed); color: var(--on-secondary-fixed); border: 1px solid rgba(144, 77, 0, 0.2); box-shadow: var(--shadow-sm); }
.side-gold h3 { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.side-gold .ic { width: 1.875rem; height: 1.875rem; }
.side-gold p { font-size: 0.875rem; line-height: 1.6; font-weight: 500; }
.side-plans { flex: 1; padding: 1.5rem; border-radius: var(--r-2xl); background: var(--c-lowest); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.side-plans .kicker { color: var(--outline); }
.others { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.others li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.others li:last-child { border-bottom: 0; padding-bottom: 0; }
.others b { font-size: 0.9375rem; }
.others span { display: block; font-size: 0.75rem; color: var(--ink-2); margin-top: 0.125rem; }
.others strong { font-size: 0.9375rem; font-weight: 800; white-space: nowrap; }
.side-plans .fine { padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--primary); display: flex; gap: 0.5rem; }
.side-plans .fine .ic { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------- security */
.sec-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.sec-copy .h2 { margin-bottom: 1rem; }
.sec-copy .sub { display: flex; flex-direction: column; gap: 1rem; }
.sec-copy strong { color: var(--ink); }
.sec-copy code { background: var(--c-high); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; color: #ba1a1a; }
.rails { padding: 1.5rem; border-radius: var(--r-2xl); background: var(--c-low); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rails .kicker { display: block; color: var(--ink-2); margin-bottom: 1rem; }
/* minmax(0, …) and min-width: 0, or "Orange Money" sets a floor under the grid and a 320 px
   phone gets a page a few pixels wider than itself. */
.sec-grid > * { min-width: 0; }
.rail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 359px) { .rail-grid { grid-template-columns: minmax(0, 1fr); } }
.rail { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem; border-radius: var(--r-xl); background: var(--c-lowest); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 0.8125rem; font-weight: 700; }
.rail i { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none; }
.rail small { display: block; font-weight: 500; color: var(--ink-2); font-size: 0.6875rem; }
.rails-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line-2); font-size: 0.75rem; color: var(--ink-2); font-weight: 500; }
.rails-foot .ic { color: var(--primary); width: 1.25rem; height: 1.25rem; }

/* -------------------------------------------------------------- final CTA */
.final { position: relative; overflow: hidden; background: var(--inverse); color: var(--on-inverse); padding: 5rem 0; }
.final-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.1; pointer-events: none; color: var(--on-inverse); }
.final-in { position: relative; max-width: 56rem; margin-inline: auto; text-align: center; }
.final .pill-soft { background: rgba(0, 131, 118, 0.4); color: var(--primary-fixed); border: 1px solid rgba(143, 244, 227, 0.2); margin-bottom: 1.5rem; }
.final .pill-soft .ic { width: 1rem; height: 1rem; }
.final h2 { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 1.5rem; }
.final p { font-size: 1rem; color: var(--c-highest); max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.65; }
.final .cta-row { justify-content: center; margin-top: 0; }
.btn-ghost { background: rgba(255, 255, 255, 0.12); color: var(--on-inverse); border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }
.btn-ghost .ic { color: var(--secondary-fixed); }
.final .small { margin-top: 2rem; font-size: 0.75rem; color: #d2d9f4; font-weight: 500; }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--c-low); border-top: 1px solid var(--line); }
.foot .wrap { padding-block: 4rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.foot-brand { display: flex; flex-direction: column; gap: 1rem; }
.foot-brand p { font-size: 0.875rem; color: var(--ink-2); line-height: 1.65; max-width: 24rem; }
.rails-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.rails-inline b { padding: 0.25rem 0.625rem; border-radius: 0.25rem; font-weight: 700; }
.rails-inline b:nth-of-type(1) { background: var(--secondary-fixed); color: var(--on-secondary-fixed); }
.rails-inline b:nth-of-type(2) { background: #ffdbc9; color: #321200; }
.foot h4 { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75rem; }
.foot ul { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; color: var(--ink-2); }
.foot ul a:hover { color: var(--primary); }
.foot-bar { padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--ink-2); text-align: center; }
.foot-bar a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- animation */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(18, 140, 126, 0.5); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(18, 140, 126, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(18, 140, 126, 0); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes dot-bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes blink { 50% { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chat.play > .step-hide { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 400px) {
  .logo-tag { display: block; }
}
/* "Essayer gratuitement" does not fit beside a large logo on a phone. The short label does, and
   `body { overflow-x: hidden }` would otherwise clip the long one silently rather than scroll. */
@media (max-width: 479px) {
  .nav .long { display: none; }
}
@media (max-width: 639px) {
  /* French labels such as "Installer mon commerce en 11 questions" are wider than a 360 px phone.
     Below the tablet width the buttons may wrap, and the hero pair stack full-width. */
  .btn { white-space: normal; text-align: center; }
  .nav .btn { white-space: nowrap; }
  .cta-row .btn-lg { width: 100%; }
}
@media (max-width: 399px) {
  /* A phone this narrow keeps the logo large and drops the tagline, rather than shrinking both
     until neither reads. */
  .nav .logo-tag { display: none; }
  .nav .btn-1 { padding-inline: 0.875rem; }
}
@media (min-width: 640px) {
  :root { --logo-h: 3.5rem; }
  .hero h1 { font-size: 3rem; }
  .lede { font-size: 1.25rem; }
  .lang { display: flex; }
  .shop-photo { height: 24rem; }
  .sim { padding: 1.5rem; }
  .msg { max-width: 80%; }
  .h2 { font-size: 2.25rem; }
  .final h2 { font-size: 2.25rem; }
  .final p { font-size: 1.125rem; }
  .foot-bar { flex-direction: row; text-align: left; }
  .rails { padding: 1.75rem; }
}
@media (min-width: 768px) {
  .nav-demo { display: inline-flex; }
  .head-split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .prices { grid-template-columns: 7fr 5fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .amount strong { font-size: 3rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 3rem; --logo-h: 4rem; --nav-h: 6.25rem; }
  .links { display: flex; }
  .hero { padding: 3.5rem 0 7rem; }
  .hero h1 { font-size: 3.75rem; }
  .duo { grid-template-columns: 5fr 7fr; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .sec-grid { grid-template-columns: 7fr 5fr; }
  .sec { padding: 6rem 0; }
  .final h2 { font-size: 3rem; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1280px) {
  .links { gap: 1.75rem; }
}
@media (min-width: 1536px) {
  /* Later than the design's 1280 px: the larger logo takes the room the pill used to have. */
  .cities { display: inline-flex; }
}

/* ---------------------------------------------------- extra-large screens */
/* Tailwind's container stops at 1280 px, which on a 2560 px monitor is half the screen with the
   page as a strip down the middle. Here the root size grows with the screen, and because every
   length above is in rem, the whole page — type, cards, the logo, the gaps — grows with it in
   proportion. The column widens too, so there is more page as well as bigger page. */
@media (min-width: 1600px) {
  html { font-size: 106.25%; } /* 17 px */
  :root { --max: 88rem; }
  .hero h1 { font-size: 4.25rem; margin-bottom: 0; }
  /* The design's single left column leaves half of a wide screen empty above the fold. Here the
     headline keeps the left and the explanation and buttons take the right, bottom-aligned. */
  .hero-copy { max-width: none; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 4.5rem; align-items: end; margin-bottom: 4rem; }
  .hero-side .cta-row { margin-top: 1.75rem; }
  .hero-side .ticks { margin-top: 1.75rem; }
}
@media (min-width: 1920px) {
  html { font-size: 118.75%; } /* 19 px */
  :root { --max: 92rem; --logo-h: 4.5rem; }
}
@media (min-width: 2400px) {
  html { font-size: 137.5%; } /* 22 px */
  :root { --max: 96rem; }
}
@media (min-width: 3200px) {
  html { font-size: 175%; } /* 28 px, a 4K screen at 100 % scaling */
}