/* ============================================================
   WiWallet — Layout & bespoke sections
   Built on wiwallet-design-system.css tokens. No card borders,
   no coloured glows, no accent bars, no gradient text/buttons.
   ============================================================ */

/* ---------- Ground system: light editorial base + navy punctuation ---------- */
:root {
  --g-bg: #F3F6F5; --g-surface: #FFFFFF; --g-surface-2: #E9F2F0; --g-surface-3: #DCE8E6;
  --g-heading: #0D1B3E; --g-text: #46586A; --g-muted: #59697A;
  --g-rule: rgba(13,27,62,.12);
  --g-kicker: #02707C; --g-accent: #02C39A; --g-accent-ink: #028090;
  --g-shadow: 0 1px 3px rgba(13,27,62,.05), 0 14px 34px -16px rgba(13,27,62,.18);
}
.sec--navy {
  --g-bg: #0B1B33; --g-surface: #122238; --g-surface-2: #18293F; --g-surface-3: #1E2E45;
  --g-heading: #FFFFFF; --g-text: #AFBED2; --g-muted: #7F91AB;
  --g-rule: rgba(255,255,255,.08);
  --g-kicker: #02C39A; --g-accent: #02C39A; --g-accent-ink: #02C39A;
  --g-shadow: none;
}
body { background: var(--g-bg); color: var(--g-text); }
.ww-section { background: var(--g-bg); }

/* ---------- Highlight word (accent, readable per ground) ---------- */
.hl { color: var(--g-accent-ink); }

/* ---------- Reduced-motion + reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--ww-t-slow) var(--ww-ease-out), transform var(--ww-t-slow) var(--ww-ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

img, svg, canvas { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }

/* Clip decorative overflow (orbit nodes, glows) without a nested
   scroll container — the sticky header lives outside <main>. */
main { overflow-x: clip; }

::selection { background: var(--ww-seafoam-24); color: #fff; }

.skip-link { position: fixed; top: -60px; left: 16px; z-index: 999; padding: 10px 16px; background: var(--ww-seafoam); color: var(--ww-navy); border-radius: var(--ww-r-sm); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 16px; }
.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; }
.nowrap { white-space: nowrap; }
/* Tighten "Wi-Fi" in the display H1 so the hyphen hugs the letters (Sora renders
   it wide at big sizes, otherwise it reads like a floating dash "Wi – Fi"). */
.hero__title .nowrap { letter-spacing: -.06em; }

/* ---------- Section head — left-aligned editorial ---------- */
.ww-head { max-width: 760px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); text-align: left; }
.ww-head h2 { font-size: var(--ww-size-h1); color: var(--g-heading); letter-spacing: -.03em; }
.ww-head .ww-lead { margin: 18px 0 0; max-width: 56ch; }
.ww-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--g-kicker); font-weight: 600; letter-spacing: .16em; }
.ww-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--g-accent); }
.ww-lead { color: var(--g-text); }

/* ---------- Nav (brandmark + links + mobile) ---------- */
.brandmark { display: grid; place-items: center; }
.ww-nav__links { display: flex; gap: var(--ww-4); }
.ww-nav__links a { color: var(--ww-text-2); font-size: var(--ww-size-sm); font-weight: 500; white-space: nowrap; transition: color var(--ww-t-fast) var(--ww-ease); }
.ww-nav__links a:hover { color: var(--ww-text-1); }
.ww-nav__actions { display: flex; align-items: center; gap: var(--ww-3); }
.ww-nav__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 var(--ww-2); border: 1px solid var(--ww-border); border-radius: var(--ww-radius-full, 999px); color: var(--ww-text-2); font-size: var(--ww-size-xs, .78rem); font-weight: 600; letter-spacing: .04em; transition: color var(--ww-t-fast) var(--ww-ease), border-color var(--ww-t-fast) var(--ww-ease); }
.ww-nav__lang:hover { color: var(--ww-text-1); border-color: var(--ww-text-2); }

/* ---------- Stat (value stacked over label) ---------- */
.ww-stat { display: flex; flex-direction: column; }
.ww-stat__value { display: block; }
.ww-stat__label { display: block; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: 0; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ww-text-1); border-radius: 2px; transition: .3s var(--ww-ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile { position: fixed; top: 68px; left: 0; right: 0; z-index: 49; display: flex; flex-direction: column; gap: 2px; padding: var(--ww-3) var(--ww-gutter) var(--ww-6); background: rgba(243,246,245,.98); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(13,27,62,.1); }
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: var(--ww-3) var(--ww-1); color: #46586A; border-bottom: 1px solid rgba(13,27,62,.08); }
.nav__mobile a.ww-btn { margin-top: var(--ww-3); border-bottom: none; justify-content: center; color: var(--ww-navy); }

/* ===================== HERO — light, editorial, asymmetric ===================== */
.hero { position: relative; background: #F3F6F5; padding: clamp(104px, 13vh, 148px) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--ww-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #028090; margin: 0 0 clamp(22px, 3vw, 34px); }
.hero__kicker .rule { width: 30px; height: 2px; background: #02C39A; }
.hero__title { font-family: var(--ww-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: #0D1B3E; font-size: clamp(2.6rem, 6vw, 4.7rem); margin: 0; text-wrap: balance; }
.hero__title em { font-style: normal; color: #028090; }
.hero__lead { margin: clamp(20px, 3vw, 28px) 0 0; max-width: 44ch; color: #47586A; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
.hero__actions { display: flex; align-items: center; gap: 26px; margin-top: clamp(28px, 4vw, 38px); flex-wrap: wrap; }
.hero__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #0D1B3E; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(13,27,62,.24); transition: color var(--ww-t-fast) var(--ww-ease); }
.hero__link .ww-icon { width: 18px; height: 18px; stroke: #028090; }
.hero__link:hover { color: #028090; text-decoration-color: #028090; }

/* Hero: editorial copy, then the operator dashboard (the product the buyer runs) */
.hero__head { max-width: 720px; }
.hero__showcase { margin-top: clamp(40px, 6vw, 74px); }

/* Guest-journey scene (phone ↔ native funnel) — now lives in "How it works" */
.hero__stage { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(8px, 2vw, 20px); }

/* phone: the three guest screens cross-fade in place */
.hero__phone { position: relative; width: clamp(200px, 20vw, 256px); flex: none; z-index: 2; aspect-ratio: 1170 / 2100; }
.hero__phone .frameimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; transition: opacity .46s ease;
  /* Screens are now glow-free on transparent bg — no mask needed; a clean
     neutral drop-shadow gives real depth on the light section. */
  filter: drop-shadow(0 22px 34px rgba(13,27,62,.18)); }
.hero__phone .frameimg[data-on="true"] { opacity: 1; }

/* funnel panel: rebuilt in HTML — crisp at any size, overlaps the phone */
.hero__funnel { position: relative; z-index: 1; margin-left: -40px; width: 100%; max-width: 392px;
  background: var(--g-surface); border-radius: 20px; padding: 22px 22px 18px;
  border: 1px solid var(--g-rule); }
.hf__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hf__title { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }

.hf__rail { display: flex; flex-direction: column; gap: 2px; }
.hnode { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 13px; border-radius: 13px; transition: background .38s ease; }
.hnode[data-on="true"] { background: rgba(2,195,154,.09); }
.hnode::before { content: ''; position: absolute; left: 22px; top: 100%; width: 2px; height: 2px; background: var(--g-surface-2); }
.hnode:not(:last-child)::before { height: calc(100% - 22px); }
.hbullet { position: relative; z-index: 1; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--g-bg); box-shadow: inset 0 0 0 2px var(--g-surface-2); transition: background .38s ease, box-shadow .38s ease; }
.hnode[data-done="true"] .hbullet, .hnode[data-on="true"] .hbullet { background: var(--g-accent); box-shadow: inset 0 0 0 2px var(--g-accent); }
.hnode[data-on="true"] .hbullet { box-shadow: inset 0 0 0 2px var(--g-accent), 0 0 0 5px rgba(2,195,154,.18); }
.hbullet svg { position: absolute; inset: 2px; width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.hnode[data-done="true"] .hbullet svg, .hnode[data-on="true"] .hbullet svg { opacity: 1; }
.hnode__label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hnode__name { font-size: .875rem; font-weight: 500; color: var(--g-heading); }
.hnode__meta { font-size: .6875rem; color: var(--g-muted); margin-top: 2px; }
.hnode__val { font-family: var(--ww-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--g-heading); font-variant-numeric: tabular-nums; }
.hnode[data-on="true"] .hnode__val { color: var(--g-accent-ink); }
.hnode__val.bump { animation: ww-bump .52s cubic-bezier(.16,1,.3,1); }
@keyframes ww-bump { 0% { transform: scale(1); } 32% { transform: scale(1.14); } 100% { transform: scale(1); } }

.hf__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g-surface-2); }
.hstat span { display: block; font-size: .6875rem; color: var(--g-muted); margin-bottom: 3px; }
.hstat b { font-family: var(--ww-font-display); font-size: 1.0625rem; color: var(--g-heading); font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .hero__stage { flex-direction: column; align-items: center; }
  .hero__funnel { margin: -34px 0 0; }
}
@media (max-width: 560px) { .hero__phone { width: min(210px, 60%); } }
@media (prefers-reduced-motion: reduce) { .hero__phone .frameimg { transition: none; } }

/* Nav goes light over the editorial hero */
.ww-nav { background: rgba(243,246,245,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; }
.ww-nav[data-scrolled="true"] { background: rgba(243,246,245,.92); border-bottom-color: rgba(13,27,62,.1); }
.ww-nav__brand { color: #0D1B3E; }
.ww-nav__links a { color: #47586A; }
.ww-nav__links a:hover { color: #0D1B3E; }
.ww-nav .ww-btn--secondary { color: #0D1B3E; }
.ww-nav .ww-btn--secondary:hover { color: #028090; }
.ww-nav .ww-nav__lang { color: #47586A; border-color: rgba(13,27,62,.18); }
.ww-nav .ww-nav__lang:hover { color: #0D1B3E; border-color: rgba(13,27,62,.4); }
.ww-nav .ww-btn--quiet { background: #0D1B3E; color: #fff; }
.ww-nav .ww-btn--quiet:hover { background: #028090; }
.nav__toggle span { background: #0D1B3E; }


/* ===================== PROBLEM (compare) ===================== */
.compare-list { display: grid; gap: clamp(14px, 2.5vw, 26px); }

/* ===================== FEATURES ===================== */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ww-4); }
.feature-group { display: inline-flex; align-items: center; gap: 12px; font-size: var(--ww-size-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-kicker); margin: 0 0 var(--ww-5); }
.feature-group::before { content: ''; width: 22px; height: 2px; background: var(--g-accent); }
.feature-group--soon { color: var(--g-muted); margin-top: var(--ww-10); }
.feature-group--soon::before { background: var(--g-muted); }
.feature--soon { position: relative; opacity: .8; }
.feature--soon .ww-icon { stroke: var(--g-muted); }
.feature-tag { position: absolute; top: var(--ww-5); right: var(--ww-5); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); background: var(--g-surface-2); padding: 3px 9px; border-radius: var(--ww-r-pill); }

/* ===================== INTEGRATIONS (grouped rows) ===================== */
.integ-row { display: flex; flex-wrap: wrap; gap: var(--ww-3); margin-bottom: var(--ww-8); }
.integ-row:last-child { margin-bottom: 0; }
.integ { flex: 0 0 auto; min-width: 150px; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--ww-5) var(--ww-6); border-radius: var(--ww-r-md); background: var(--ww-surface-1); transition: background var(--ww-t-base) var(--ww-ease), transform var(--ww-t-base) var(--ww-ease-out); }
.integ span { font-family: var(--ww-font-display); font-weight: 600; font-size: .95rem; color: var(--ww-text-3); transition: color var(--ww-t-base); }
.integ small { display: block; font-family: var(--ww-font-body); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--g-muted); margin-top: 2px; }
.integ--soon { opacity: .68; }
.integ--soon small { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 9px; }
/* Recreated partner logos — monochrome by default, brand colour on hover */
.integ--logo { flex-direction: column; gap: 5px; color: var(--g-muted); padding: var(--ww-4) var(--ww-6); }
.integ--logo:hover, .integ--logo:focus-visible { color: var(--brand); background: var(--g-surface-2); }
.integ--logo .plogo { display: inline-flex; align-items: center; gap: 9px; }
.integ--logo .plogo, .integ--logo .plogo__name,
.integ--logo:hover .plogo, .integ--logo:focus-visible .plogo,
.integ--logo:hover .plogo__name, .integ--logo:focus-visible .plogo__name { color: currentColor; }
.integ--logo .plogo__mark { width: 23px; height: 23px; flex: none; }
.integ--logo .plogo__name { font-family: var(--ww-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.integ--logo small { color: var(--g-muted); }
.integ:hover, .integ:focus-visible { background: var(--ww-surface-2); transform: translateY(-2px); }
.integ:hover span, .integ:focus-visible span { color: var(--ww-text-1); }

/* ===================== LIVE OPERATIONS (MacBook mockup) ===================== */
.mac { margin: 0; display: flex; flex-direction: column; align-items: center; }

/* Lid = the display + its black bezel + a thin aluminium edge */
.mac__lid {
  position: relative;
  width: 100%;
  max-width: 940px;
  padding: 16px 12px 12px;
  background: linear-gradient(180deg, #23262d 0%, #15171c 100%);
  border-radius: 22px;
  box-shadow: 0 50px 100px -45px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mac__cam {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #2c3038; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mac__screen {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.mac__img { display: block; width: 100%; height: auto; }

/* Base = the deck seen edge-on, slightly wider than the lid, with the hinge notch */
.mac__base {
  position: relative;
  width: 106%;
  height: 16px;
  background: linear-gradient(180deg, #d7dbe1 0%, #b4b9c1 46%, #8b909a 100%);
  border-radius: 0 0 12px 12px / 0 0 22px 22px;
  box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .55);
}
.mac__base::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255, 255, 255, .55);
}
.mac__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 7px;
  background: #9aa0a9; border-radius: 0 0 7px 7px;
  box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, .35);
}
.ops__cap { margin-top: var(--ww-6); text-align: center; color: var(--g-muted); font-size: .85rem; }

/* ===================== MARKETPLACE ===================== */
.marketplace__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.mkt-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ww-4) var(--ww-6); margin: var(--ww-6) 0 var(--ww-8); }
.mkt-group { display: flex; flex-direction: column; gap: 4px; }
.mkt-group__sector { font-family: var(--ww-font-display); font-weight: 700; font-size: var(--ww-size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--g-accent); }
.mkt-group__items { color: var(--g-text); font-size: .96rem; line-height: 1.5; }
@media (max-width: 460px) { .mkt-groups { grid-template-columns: 1fr; } }
.marketplace__viz { display: grid; place-items: center; }
.orbit { position: relative; width: min(420px, 82vw); aspect-ratio: 1; }
.orbit__core { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center; background: var(--ww-seafoam); color: var(--ww-navy); z-index: 3; font-family: var(--ww-font-display); font-weight: 700; font-size: .95rem; animation: corepulse 3.5s var(--ww-ease) infinite; }
@keyframes corepulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.orbit__ring { position: absolute; inset: 0; border: 1px dashed var(--ww-rule); border-radius: 50%; }
.orbit__ring--1 { inset: 12%; animation: spin 28s linear infinite; }
.orbit__ring--2 { inset: -4%; animation: spin 44s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit__node { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--ww-surface-2); transform: rotate(var(--a)) translateX(calc(min(420px, 82vw) / 2)) rotate(calc(-1 * var(--a))); }
.orbit__ring--2 .orbit__node { transform: rotate(var(--a)) translateX(calc(min(420px, 82vw) / 2 + 24px)) rotate(calc(-1 * var(--a))); }

/* ===================== USE CASES ===================== */
/* Bento layout — breaks the three-grid monotony; featured tiles span 2 */
.uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: var(--ww-4); }
.uc-grid .ww-card { text-align: left; }
.uc-grid .ww-icon { margin-bottom: var(--ww-4); }
.uc-grid .ww-card:nth-child(5n+1) { grid-column: span 2; background: var(--ww-surface-2); }
.uc-grid .ww-card:nth-child(5n+1) .ww-icon { width: 40px; height: 40px; stroke-width: 1.4; }
.uc-grid .ww-card:nth-child(5n+1) h3 { font-size: var(--ww-size-h3); }

/* ===================== WORLD MAP ===================== */
/* The globe card is always dark (surface-1), so it carries its own light-text
   ground tokens — it stays legible whether the section around it is light or navy. */

/* ===================== TESTIMONIALS ===================== */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--ww-5); width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.quote { width: min(440px, 82vw); flex: none; }
.quote blockquote { font-size: var(--ww-size-body-lg); line-height: var(--ww-leading-snug); color: var(--ww-text-2); margin: 0 0 var(--ww-5); }
.quote figcaption { display: flex; align-items: center; gap: var(--ww-3); }
.quote .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ww-font-display); font-weight: 700; font-size: .9rem; color: var(--ww-navy); background: var(--ww-seafoam); flex: none; }
.quote figcaption strong { display: block; font-size: .95rem; color: var(--ww-text-1); }
.quote figcaption em { font-style: normal; font-size: var(--ww-size-sm); color: var(--ww-text-3); }

/* ===================== CTA — contained dark panel on a light ground ===================== */
.cta { text-align: center; }
/* The panel is always dark, so it carries its own light-text tokens and sits as a
   contained card on the light section — separating it from the dark footer below. */
.cta__inner { --g-heading: #FFFFFF; --g-text: #AFBED2; max-width: 760px; margin-inline: auto; padding: clamp(2.75rem, 6vw, 4.5rem) var(--ww-gutter); background: radial-gradient(120% 140% at 50% -20%, rgba(2,195,154,.14), transparent 60%), var(--ww-surface-1); border: 1px solid var(--ww-rule); border-radius: var(--ww-r-xl); box-shadow: var(--ww-shadow-2); }
.cta__title { font-size: var(--ww-size-h1); color: var(--g-heading); margin-bottom: var(--ww-4); }
.cta__lead { margin: 0 auto; max-width: 520px; }
.cta__actions { display: flex; gap: var(--ww-3); justify-content: center; flex-wrap: wrap; margin-top: var(--ww-7); }
.cta__note { margin-top: var(--ww-5); font-size: var(--ww-size-sm); color: var(--ww-text-3); }

/* CTA contact form (posts to Formspree) */
.cta__form { max-width: 520px; margin: var(--ww-6) auto 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta__form input, .cta__form textarea { width: 100%; font: inherit; font-size: .95rem; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 12px 14px; transition: border-color .2s var(--ww-ease), background .2s var(--ww-ease); }
.cta__form input::placeholder, .cta__form textarea::placeholder { color: #8FA1BC; }
.cta__form input:focus, .cta__form textarea:focus { outline: none; border-color: var(--ww-seafoam); background: rgba(255,255,255,.1); }
.cta__form textarea { resize: vertical; min-height: 108px; }
.cta__form .ww-btn { width: 100%; justify-content: center; margin-top: 2px; }
.cta__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cta__msg { min-height: 20px; margin-top: 2px; font-size: .9rem; }
@media (max-width: 520px) { .cta__row { grid-template-columns: 1fr; } }

/* ===================== SIMULATOR (embedded, full-bleed) ===================== */
.sim { background: #060D1E; }
.sim__frame { display: block; width: 100%; border: 0; min-height: 1500px; }

/* ===================== FOOTER ===================== */
.footer { padding: clamp(3rem, 7vw, 5rem) 0 var(--ww-8); background: var(--ww-surface-1); }
.footer .ww-nav__brand { color: #FFFFFF; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(2rem, 6vw, 4rem); }
.footer__brand > p { color: var(--ww-text-2); margin: var(--ww-4) 0 var(--ww-1); max-width: 320px; font-size: var(--ww-size-sm); }
.footer__tagline { font-size: var(--ww-size-xs); letter-spacing: var(--ww-track-eyebrow); text-transform: uppercase; color: var(--ww-seafoam); margin: 0 0 var(--ww-5); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ww-6); }
.footer__col h4 { font-family: var(--ww-font-display); font-size: .95rem; color: var(--ww-text-1); margin-bottom: var(--ww-4); }
.footer__col a { display: block; color: var(--ww-text-3); font-size: var(--ww-size-sm); padding: 5px 0; transition: color var(--ww-t-fast); }
.footer__col a:hover { color: var(--ww-text-1); }
.footer__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ww-3); margin-top: var(--ww-10); padding-top: var(--ww-6); border-top: 1px solid var(--ww-rule); color: var(--ww-text-3); font-size: var(--ww-size-sm); }

/* ============================================================
   LIGHT EDITORIAL — ground-aware component colours
   (phones, dashboard, map, orbit stay dark on their navy grounds)
   ============================================================ */

/* Cards (features, use-cases, testimonials) */
/* Flat cards: hairline border (adapts light/navy via --g-rule), no shadow. */
.ww-card { background: var(--g-surface); border: 1px solid var(--g-rule); }
.ww-card h3 { color: var(--g-heading); }
.ww-card p { color: var(--g-text); }
a.ww-card:hover, .ww-card--interactive:hover { background: var(--g-surface-2); border-color: var(--g-muted); transform: none; }
.uc-grid .ww-card:nth-child(5n+1) { background: var(--g-surface-2); }

/* Problem → solution: the "before" is recessive, the "after" is the card. */
.ww-compare {
  display: grid;
  grid-template-columns: 1fr auto 1.12fr;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}
.cmp-label { display: inline-block; font-family: var(--ww-font-display); font-weight: 700; font-size: var(--ww-size-xs); letter-spacing: .13em; text-transform: uppercase; }
.cmp-before { padding: var(--ww-3) var(--ww-2); }
.cmp-before .cmp-label { color: var(--g-muted); opacity: .8; }
.cmp-before h3 { color: var(--g-muted); font-size: 1.06rem; margin: 8px 0 5px; font-weight: 600; }
.cmp-before p { color: var(--g-muted); font-size: .9rem; line-height: 1.5; max-width: 34ch; }

.cmp-arrow { width: 26px; height: 26px; stroke: var(--g-accent); stroke-width: 2.4; justify-self: center; }

.cmp-after {
  display: flex; gap: var(--ww-4); align-items: flex-start;
  background: var(--g-surface); border: 1px solid var(--g-rule);
  border-radius: var(--ww-r-lg); padding: var(--ww-5) var(--ww-6);
}
.cmp-after .cmp-label--on { color: var(--g-accent-ink); }
.cmp-after h3 { color: var(--g-heading); font-size: 1.14rem; margin: 8px 0 5px; font-weight: 700; letter-spacing: -.01em; }
.cmp-after p { color: var(--g-text); font-size: .93rem; line-height: 1.55; }
.cmp-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--g-surface-2);
}
.cmp-ic .ww-icon { width: 22px; height: 22px; stroke: var(--g-accent); stroke-width: 2; }

@media (max-width: 720px) {
  .ww-compare { grid-template-columns: 1fr; gap: 6px; justify-items: start; }
  .cmp-arrow { transform: rotate(90deg); margin: 4px 0 4px 6px; }
  .cmp-before { padding: var(--ww-2) 0; }
  .cmp-after { width: 100%; }
}

/* Integrations */
.integ { background: var(--g-surface); box-shadow: var(--g-shadow); }
.integ span { color: var(--g-muted); }
.integ:hover, .integ:focus-visible { background: var(--g-surface-2); }
.integ:hover span, .integ:focus-visible span { color: var(--g-heading); }



/* Testimonials */
.quote blockquote { color: var(--g-text); }
.quote figcaption strong { color: var(--g-heading); }
.quote figcaption em { color: var(--g-muted); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .integ-grid { grid-template-columns: repeat(5, 1fr); }
  .uc-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Collapse to the hamburger menu below 1240px: the header (product links,
   About, Blog, plus the ROI-simulator and demo buttons) needs the wider
   viewport to sit on one line, especially with the longer French labels. */
@media (max-width: 1240px) {
  .ww-nav__links, .ww-nav__actions { display: none; }
  .nav__toggle { display: flex; }
}
@media (max-width: 860px) {
  .marketplace__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .integ-grid { grid-template-columns: repeat(3, 1fr); }
  .uc-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .feature-grid, .uc-grid { grid-template-columns: 1fr; }
  .integ-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== SEO cluster pages ===================== */
.page-hero { padding-top: clamp(120px, 14vh, 168px); }
.page-hero__title { font-family: var(--ww-font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--g-heading); font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0; max-width: 20ch; text-wrap: balance; }
.page-hero__lead { margin-top: clamp(16px, 2.5vw, 24px); max-width: 62ch; }
.page-hero__actions { margin-top: clamp(24px, 3vw, 34px); }
.breadcrumb { font-size: .8rem; color: var(--g-muted); margin: 0 0 clamp(20px, 3vw, 30px); }
.breadcrumb a { color: var(--g-kicker); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.ww-prose { max-width: 68ch; }
.ww-prose h2 { font-family: var(--ww-font-display); font-weight: 700; letter-spacing: -.02em; color: var(--g-heading); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 var(--ww-4); }
.ww-prose p { color: var(--g-text); font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--ww-4); }
.ww-prose ul { margin: 0 0 var(--ww-4); padding-left: 1.1rem; color: var(--g-text); line-height: 1.7; }
.ww-prose li { margin-bottom: 6px; }
.ww-prose a { color: var(--g-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ww-prose strong { color: var(--g-heading); }
.faq { max-width: 68ch; display: grid; gap: 10px; }
.faq__item { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: var(--ww-r-md); padding: 4px 18px; }
.faq__item summary { cursor: pointer; list-style: none; padding: 14px 0; font-family: var(--ww-font-display); font-weight: 600; color: var(--g-heading); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--g-accent-ink); font-size: 1.3rem; font-weight: 400; flex: none; }
.faq__item[open] summary::after { content: '–'; }
.faq__a { padding: 0 0 16px; color: var(--g-text); line-height: 1.6; }
.faq__a p { margin: 0; }

/* ===================== DATA RESIDENCY — interactive region globe ===================== */
/* Scoped under .dr so its generic class names (h2, .lead, .tab, .chip…) never
   leak into the rest of the site. Light theme, white ground (deliberate: only
   the lit region's green catches the eye — no background gradient, no halo). */
.dr { --paper:#fff; --wash:#F4F7FA; --line:#E3E9F0; --t1:#0B1220; --t2:#54637A; --t3:#8A99AE;
  --seafoam: var(--ww-seafoam, #02C39A); --teal: var(--ww-teal, #028090);
  --font-display: var(--ww-font-display); --font-body: var(--ww-font-body);
  padding: clamp(72px, 9vw, 92px) 24px; background: var(--paper); color: var(--t2); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.dr .wrap { max-width: 980px; margin: 0 auto; text-align: center; }
.dr .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:16px; }
.dr .eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--seafoam); }
.dr h2 { font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:700; line-height:1.1; letter-spacing:-.025em; color:var(--t1); margin-bottom:14px; text-wrap:balance; }
.dr .lead { font-size:1.0625rem; line-height:1.6; max-width:56ch; margin:0 auto 30px; }
.dr .tabs { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--wash); margin-bottom:36px; flex-wrap:wrap; }
.dr .tab { border:0; background:transparent; padding:10px 20px; border-radius:999px; cursor:pointer; font-family:var(--font-body); font-size:.9375rem; font-weight:500; color:var(--t2); transition:background 260ms,color 260ms,box-shadow 260ms; }
.dr .tab[aria-selected="true"] { background:var(--paper); color:var(--t1); box-shadow:0 1px 2px rgba(11,18,32,.06),0 4px 12px -4px rgba(11,18,32,.14); }
.dr .tab:focus-visible { outline:2px solid var(--seafoam); outline-offset:2px; }
/* Auto-cycle progress gauge: shown only while the tabs are cycling on their
   own (data-auto="true"). Once the visitor picks a region, data-auto flips to
   false and the gauge disappears for good. */
.dr .tab { position:relative; overflow:hidden; }
.dr .tab i { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--seafoam); transform:scaleX(0); transform-origin:left; opacity:0; border-radius:2px; }
.dr .tabs[data-auto="true"] .tab[aria-selected="true"] i { opacity:.85; animation:dr-fill var(--dwell,6500ms) linear forwards; }
@keyframes dr-fill { to { transform:scaleX(1); } }
.dr .chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:26px; }
.dr .chip { display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:12px; background:var(--wash); text-align:left; }
.dr .chip svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dr .chip__txt { line-height:1.25; }
.dr .chip__k { display:block; font-size:.75rem; color:var(--t3); }
.dr .chip__v { display:block; font-size:.8125rem; font-weight:600; color:var(--t1); white-space:nowrap; }
.dr .chip__v.swap { animation:dr-swap 560ms cubic-bezier(.16,1,.3,1); }
@keyframes dr-swap { 0%{opacity:0;transform:translateY(5px)} 100%{opacity:1;transform:none} }
.dr .chip--out { background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.dr .chip--out svg { stroke:var(--t3); }
.dr .chip--out .chip__v { color:var(--t2); font-weight:500; }
.dr .globe { position:relative; width:min(420px,84vw); aspect-ratio:1; margin:0 auto; }
.dr .globe canvas { width:100%; height:100%; display:block; }
.dr .pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; opacity:0; transition:opacity 420ms ease; }
.dr .pin[data-on="true"] { opacity:1; }
.dr .pin__dot { width:11px; height:11px; border-radius:50%; background:var(--seafoam); box-shadow:0 0 0 0 rgba(2,195,154,.5); animation:dr-pulse 2.6s infinite; }
@keyframes dr-pulse { 70%{box-shadow:0 0 0 14px rgba(2,195,154,0)} 100%{box-shadow:0 0 0 0 rgba(2,195,154,0)} }
.dr .pin__label { padding:6px 12px; border-radius:999px; background:var(--paper); box-shadow:0 2px 10px rgba(11,18,32,.14); font-size:.8125rem; font-weight:600; color:var(--t1); white-space:nowrap; }
.dr .claim { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:12px 20px; border-radius:999px; background:rgba(2,195,154,.09); font-size:.9375rem; color:var(--t1); }
.dr .claim svg { width:17px; height:17px; flex:none; fill:none; stroke:var(--seafoam); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.dr .outside { margin-top:16px; font-size:.8125rem; color:var(--t3); }
.dr .foot-note { margin:24px auto 0; font-size:.8125rem; color:var(--t3); max-width:64ch; }
@media (prefers-reduced-motion: reduce) { .dr *, .dr *::before, .dr *::after { animation:none !important; transition:none !important; } }

/* ===================== BLOG ===================== */
/* Index grid of article cards (flat, ground-token aware). */
.postgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.postgrid--2 { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); margin-top:18px; }
.postcard { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:24px; border-radius:var(--ww-radius, 16px); text-decoration:none; }
.postcard__tag { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g-kicker); }
.postcard__title { font-family:var(--ww-font-display); font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--g-heading); font-size:1.18rem; margin:0; text-wrap:balance; }
.postcard__excerpt { color:var(--g-text); font-size:.95rem; line-height:1.55; margin:0; }
.postcard__meta { margin-top:auto; padding-top:6px; font-size:.8rem; color:var(--g-muted); }
a.postcard:hover .postcard__title { color:var(--g-accent-ink); }

/* Article header + body */
.blogpost__title { max-width:24ch; }
.blogpost__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; font-size:.9rem; color:var(--g-muted); }
.blogpost__meta a { color:var(--g-accent-ink); text-decoration:none; font-weight:600; }
.blogpost__meta a:hover { text-decoration:underline; }
.blogpost__dot { color:var(--g-rule); }
.blogpost__cover { margin-bottom:clamp(24px,4vw,44px); }
.blogpost__cover img { width:100%; height:auto; border-radius:20px; border:1px solid var(--g-rule); display:block; }
.blogpost__wrap { padding-top:0; }
.blogpost__body { margin:0 auto; }
.blogpost__body h2 { margin-top:clamp(30px,4vw,46px); }
.blogpost__body > *:first-child { margin-top:0; }
.ww-prose ol { margin:0 0 var(--ww-4); padding-left:1.2rem; color:var(--g-text); line-height:1.7; }
.ww-prose em { font-style:italic; }
.ww-quote { margin:clamp(26px,4vw,40px) 0; padding:4px 0 4px 22px; border-left:3px solid var(--g-accent); }
.ww-quote p { font-family:var(--ww-font-display); font-weight:600; font-size:1.2rem; line-height:1.45; color:var(--g-heading); margin:0; }
.ww-quote cite { display:block; margin-top:10px; font-style:normal; font-size:.85rem; color:var(--g-muted); }
.ww-figure { margin:clamp(24px,4vw,40px) 0; }
.ww-figure img { width:100%; height:auto; border-radius:16px; border:1px solid var(--g-rule); display:block; }
.ww-figure figcaption { margin-top:10px; font-size:.82rem; color:var(--g-muted); text-align:center; }

/* Author card + LinkedIn actions */
.blogpost__foot { max-width:68ch; margin:clamp(34px,5vw,52px) auto 0; }
.authorcard { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 22px; border-radius:18px; background:var(--g-surface); border:1px solid var(--g-rule); }
.authorcard .brandmark { flex:none; }
.authorcard__id { margin-right:auto; }
.authorcard__name { margin:0; font-weight:700; color:var(--g-heading); font-family:var(--ww-font-display); }
.authorcard__role { margin:2px 0 0; font-size:.85rem; color:var(--g-muted); }
.authorcard__actions { display:flex; gap:10px; flex-wrap:wrap; }
.authorcard__actions .ww-btn { gap:8px; }
.authorcard__actions .ww-icon { width:18px; height:18px; }

/* Related */
.related { max-width:68ch; margin:clamp(40px,6vw,64px) auto 0; }
.related__h { font-family:var(--ww-font-display); font-weight:700; letter-spacing:-.02em; color:var(--g-heading); font-size:1.35rem; margin:0; }

/* Author-card buttons: the design-system --ww-* button tokens are dark-theme
   defaults, so re-skin the secondary/quiet variants with ground tokens for the
   light blog surface (mirrors how the nav overrides them). */
.authorcard__actions .ww-btn--secondary { color:var(--g-heading); background:transparent; border:1px solid var(--g-rule); }
.authorcard__actions .ww-btn--secondary:hover { color:var(--g-accent-ink); border-color:var(--g-muted); }
.authorcard__actions .ww-btn--quiet { background:var(--g-heading); color:#fff; }
.authorcard__actions .ww-btn--quiet:hover { background:var(--g-accent-ink); color:#fff; }
.authorcard__actions .ww-btn .ww-icon { width:18px; height:18px; }

/* ===================== SECONDARY CTA in hero (light ground) ===================== */
.hero__actions .ww-btn--secondary { color:#0D1B3E; background:transparent; border:1px solid rgba(13,27,62,.18); }
.hero__actions .ww-btn--secondary:hover { color:#028090; border-color:#028090; }
.hero__actions .ww-btn--secondary .ww-icon { stroke:#028090; }

/* ===================== CASE STUDIES (illustrative) ===================== */
.cs-note { display:inline-block; margin-top:14px; font-size:.8rem; color:var(--g-muted); background:var(--g-surface-2); border:1px solid var(--g-rule); padding:8px 14px; border-radius:999px; }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:clamp(24px,4vw,36px); }
.cs { display:flex; flex-direction:column; gap:14px; padding:24px; text-align:left; }
.cs__tag { align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g-kicker); background:var(--g-surface-2); padding:4px 10px; border-radius:999px; }
.cs__sector { display:flex; align-items:center; gap:10px; font-family:var(--ww-font-display); font-weight:700; font-size:1.15rem; color:var(--g-heading); }
.cs__sector .ww-icon { width:22px; height:22px; }
.cs__setup { color:var(--g-text); font-size:.95rem; line-height:1.55; margin:0; }
.cs__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--g-rule); }
.cs__kpis .ww-stat__value { display:block; font-family:var(--ww-font-display); font-weight:700; font-size:1.1rem; color:var(--g-heading); letter-spacing:-.01em; }
.cs__kpis .ww-stat__label { display:block; font-size:.72rem; color:var(--g-muted); margin-top:3px; line-height:1.3; }
.cs__link { font-weight:600; color:var(--g-accent-ink); text-decoration:none; font-size:.9rem; }
.cs__link:hover { text-decoration:underline; }

/* ===================== ABOUT / QUI SOMMES-NOUS ===================== */
.about__inner { display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(28px,5vw,56px); align-items:start; }
@media (max-width:820px){ .about__inner { grid-template-columns:1fr; } }
.about__copy h2 { font-size:var(--ww-size-h1); color:var(--g-heading); letter-spacing:-.03em; margin:14px 0 0; }
.about__copy .ww-lead { margin-top:18px; max-width:56ch; }
.about__copy p + p { margin-top:14px; max-width:56ch; }
.about__founder { padding:26px; text-align:left; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.about__founder .brandmark { width:52px; height:52px; border-radius:14px; background:var(--g-surface-2); display:grid; place-items:center; }
.founder__head { display:flex; align-items:center; gap:14px; }
.founder__photo { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--g-rule); }
.founder__name { font-family:var(--ww-font-display); font-weight:700; font-size:1.2rem; color:var(--g-heading); margin:0; }
.founder__role { color:var(--g-muted); font-size:.9rem; margin:2px 0 0; }
.founder__quote { margin:10px 0 0; padding-left:14px; border-left:3px solid var(--g-accent); color:var(--g-text); font-style:italic; line-height:1.55; }
.about__founder .ww-btn { margin-top:6px; gap:8px; }
.about__founder .ww-btn .ww-icon { width:18px; height:18px; }
/* Founder-card button on light ground (design-system --ww-* button tokens are dark-theme) */
.about__founder .ww-btn--secondary { color:var(--g-heading); background:transparent; border:1px solid var(--g-rule); }
.about__founder .ww-btn--secondary:hover { color:var(--g-accent-ink); border-color:var(--g-muted); }

/* Nav compaction: the header carries a lot (six links, About, Blog, plus the
   ROI-simulator and demo buttons) and French labels are long, so tighten gaps,
   link size and button padding to keep it on one line down to ~1240px. */
.ww-nav { gap: var(--ww-3); }
.ww-nav__links { gap: 11px; }
.ww-nav__links a { font-size: .8rem; }
.ww-nav__actions { gap: var(--ww-2); }
.ww-nav .ww-btn { font-size: var(--ww-size-sm); padding-inline: var(--ww-3); height: 44px; }
/* Checkout.com official logo: monochrome (muted) at rest to match the row,
   then the brand's true colours on hover (blue #006CFF square, dark wordmark). */
.integ--logo .cko-logo { height: 20px; width: auto; display: block; }
.integ--logo .cko-logo path { transition: fill var(--ww-t-base) var(--ww-ease); }
.integ--logo:hover .cko-logo .cko-sq,
.integ--logo:focus-visible .cko-logo .cko-sq { fill: #006CFF; }