/* ============================================================
   DAO PAY — Module A · GLOBAL CONVENTION SHEET (one truth)
   Locked tokens — every section inherits from here.
   ============================================================ */
:root{
  --navy:#0A1A2F;
  --navy-2:#0d2138;      /* slightly raised navy for layered dark panels */
  --light:#F5F7FA;
  --paper:#FFFFFF;
  --cyan:#008CCF;
  --cyan-deep:#0072a8;
  --svc:#2db096;          /* support/teal — B2C service identity, NOT the conversion cyan */
  --ink:var(--navy);
  --ink-soft:#3a4a5e;     /* readable body on light — meets contrast */
  --line:rgba(255,255,255,.12);
  --maxw:1280px;
  --pad-x:clamp(24px,5vw,72px);
  --section-y:clamp(80px,9vw,140px);
  --serif:"Source Serif 4","Georgia",serif;       /* ONE serif: H1/H2 */
  --sans:"Inter","Helvetica Neue",Arial,sans-serif; /* ONE sans: body/H3/nav */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--light);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:clip;   /* contain deliberate right-bleed (S02 dash, carousel) — no white page gutter, no fullPage artifact */
  max-width:100vw;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);width:100%}

/* ---------- Eyebrow marker (01–05) ---------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
}
/* eyebrow text matches the muted "Step 01" label style (calm, low-key);
   number shares the label colour, only the bar stays cyan. */
.eyebrow .num,.eyebrow .label{color:#9aa7b6;font-weight:700;font-size:.82rem;letter-spacing:.22em}
.eyebrow .bar{width:42px;height:1px;background:var(--cyan);opacity:.7}
.on-dark .eyebrow .num,.on-dark .eyebrow .label{color:#9aa7b6}

/* ---------- Typography scale ---------- */
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,4.6vw,4rem)}
h2{font-size:clamp(2rem,3.4vw,3rem)}
.subline{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}
.on-dark{color:#eaf1f8}
.on-dark .subline{color:#c3d1e0}
/* accent word inside a claim — same trigger colour as the CTA */
.accent{color:var(--cyan)}

/* ---------- CTA (only on dark sections per principle) ---------- */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  background:var(--cyan);color:#fff;border:none;border-radius:10px;
  padding:15px 26px;cursor:pointer;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.cta:hover{background:var(--cyan-deep);transform:translateY(-1px)}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#eaf1f8}
.cta.ghost:hover{background:rgba(255,255,255,.08)}

/* ============================================================
   NAV — persistent, stable, tremor-safe
   ============================================================ */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:50;
  padding:22px 0;                          /* taller menu band */
  background:rgba(2,16,34,.72);            /* darker blue, semi-transparent — hero still shows through */
  border-bottom:1px solid rgba(255,255,255,.09);  /* visible separation from the hero below */
}
/* Floating reveal: the nav sits in-flow by default, so scrolling DOWN lets it
   scroll away with the page. It pins to the top (sliding in) only when scrolling UP. */
.nav--pinned{
  position:fixed;
  background:var(--navy);box-shadow:0 6px 24px rgba(0,0,0,.35);
  animation:navDrop .3s ease both;
}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.nav--pinned{animation:none}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand__logo{height:46px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:20px;list-style:none}
.navlinks a{
  color:#c8d8e8;text-decoration:none;
  font-family:var(--sans);
  font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:6px;min-height:24px;  /* WCAG 2.5.8 target size */
  transition:color .18s ease;
}
.navlinks a:hover{color:#fff}
.navlinks a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}

/* active item */
.nav-active a{color:#fff}
.nav-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);flex:none;
}

/* contact bordered button */
.nav-contact a{
  border:1px solid rgba(255,255,255,.45);border-radius:4px;
  padding:6px 18px;color:#fff;
}
.nav-contact a:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.78)}

/* support button — teal service identity, outlined.
   Covers both the legacy <a> and the popup-trigger <button> (SupportModalButton). */
.nav-support a,.nav-support .cal-trigger{
  border:1px solid color-mix(in srgb, var(--svc) 60%, transparent);border-radius:4px;
  padding:6px 16px;color:var(--svc);
  background:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;min-height:24px;
  font-family:var(--sans);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:color .18s ease;
}
.nav-support__ic{flex:none;order:-1} /* icon renders before the label in the button too */
.nav-support a:hover,.nav-support .cal-trigger:hover{background:color-mix(in srgb, var(--svc) 26%, transparent);border-color:var(--svc);color:#62d6bb}
.nav-support .cal-trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}

/* language switcher — boxed: globe | EN ⌄ */
.nav-lang{display:flex;align-items:center;margin-left:4px}
.lang-box{
  display:flex;align-items:center;gap:9px;min-height:24px;
  background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);border-radius:4px;
  padding:6px 16px;color:#c8d8e8;
  transition:border-color .18s ease,color .18s ease;
}
.lang-box:hover{border-color:rgba(255,255,255,.5);color:#fff}
.lang-globe{flex:none}
.lang-divider{width:1px;height:14px;background:rgba(255,255,255,.28);flex:none}
.lang-cur{font-size:.875rem;font-weight:600;letter-spacing:.06em;color:#fff}
.lang-caret{flex:none;opacity:.75;transition:transform .18s ease}
/* lang-box as a no-JS <details> switcher */
.lang-box{list-style:none}
.lang-box::-webkit-details-marker{display:none}
.nav-lang .nav__sub-wrap[open] .lang-caret{transform:rotate(180deg)}
.nav-lang .nav__dropdown{left:auto;right:0;transform:none;min-width:150px}
.nav-lang .nav__dropdown a{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:normal}
.nav-lang .nav__dropdown a.active{color:#fff;font-weight:600}

/* submenu — tremor-safe: <details>/<summary>, keyboard + pointer, no JS */
.nav__item{position:relative}
.nav__sub-wrap{position:relative}
/* hide native triangle */
.nav__sub-trigger{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  color:#dbe5f0;font-size:.95rem;font-weight:500;
  -webkit-appearance:none;appearance:none;background:none;border:none;padding:0}
.nav__sub-trigger::-webkit-details-marker{display:none}
.nav__sub-trigger:hover,.nav__sub-wrap[open] .nav__sub-trigger{color:#fff}
.nav__sub-trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.nav__chevron{width:10px;height:6px;flex:none;transition:transform .18s ease}
.nav__sub-wrap[open] .nav__chevron{transform:rotate(180deg)}
/* dropdown panel */
.nav__dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  min-width:180px;list-style:none;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:8px 0;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  white-space:nowrap;z-index:100;
}
.nav__dropdown a{
  display:block;padding:10px 18px;
  color:#dbe5f0;text-decoration:none;font-size:.9rem;font-weight:500;
}
.nav__dropdown a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav__dropdown a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:6px}

/* ── top-bar mega menu (sitemap v0.6) ────────────────────────── */
.navlinks .nav__item{position:relative;display:flex;align-items:center}
.nav__top{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  color:#c8d8e8;font-family:var(--sans);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;min-height:24px;
  transition:color .18s ease;
}
.nav__top::-webkit-details-marker{display:none}
.nav__top:hover,.nav__item[open] .nav__top{color:#fff}
.nav__top:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.nav__item[open] .nav__chevron{transform:rotate(180deg)}
.nav__mega{
  position:absolute;top:calc(100% + 14px);left:0;
  min-width:300px;max-width:560px;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:18px 22px;box-shadow:0 8px 32px rgba(0,0,0,.35);z-index:100;
}
.nav__item:last-of-type .nav__mega{left:auto;right:0}
.nav__mega-list{list-style:none;margin:0;padding:0}
.nav__mega-list--multi{columns:2;column-gap:30px}
.nav__mega-list--multi li{break-inside:avoid}
.nav__mega-list a{
  display:block;padding:7px 10px;margin:0 -10px;border-radius:7px;color:#dbe5f0;text-decoration:none;
  font-family:var(--sans);font-size:.9rem;font-weight:500;
  text-transform:none;letter-spacing:normal;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.nav__mega-list a:hover{
  color:#fff;
  background:color-mix(in srgb, var(--cyan) 18%, transparent);
  box-shadow:inset 2px 0 0 var(--cyan);
}
.nav__mega-list a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}

/* ── mobile hamburger (no-JS checkbox toggle) ────────────────── */
.nav__toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.nav__burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;
}
.nav__burger:hover{border-color:rgba(255,255,255,.5)}
.nav__burger-ic--close{display:none}
.nav__toggle:focus-visible ~ .nav__burger{outline:2px solid var(--cyan);outline-offset:2px}
.nav__toggle:checked ~ .nav__burger .nav__burger-ic--open{display:none}
.nav__toggle:checked ~ .nav__burger .nav__burger-ic--close{display:block}

@media(max-width:1100px){
  .nav__burger{display:flex}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-2);border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    padding:6px 0;max-height:calc(100vh - 92px);overflow-y:auto;
  }
  .nav__toggle:checked ~ .navlinks{display:flex}
  .navlinks .nav__item{display:block;width:100%}
  .nav__sub-wrap{width:100%}
  .nav__top{width:100%;justify-content:space-between;padding:14px 24px}
  .nav__mega{
    position:static;min-width:0;max-width:none;
    border:none;border-radius:0;box-shadow:none;
    background:rgba(255,255,255,.03);padding:2px 24px 14px;
  }
  .nav__item:last-of-type .nav__mega{left:auto;right:auto}
  .nav__mega-list--multi{columns:1}
  .nav-contact,.nav-support{padding:8px 24px}
  .nav-contact a,.nav-support a,.nav-support .cal-trigger{justify-content:center;width:100%}
  .nav-lang{margin-left:0;padding:10px 24px;display:block}
  .nav-lang .nav__sub-wrap{display:inline-block}
  .nav-lang .nav__dropdown{position:static;transform:none;left:auto;right:auto;margin-top:8px;box-shadow:none}
}

/* ============================================================
   SECTION S01 — HERO (dark, emotion)
   ============================================================ */
.hero{
  position:relative;min-height:540px;
  /* deliberate vertical gradient — exact brand navy values */
  background:linear-gradient(180deg, #021A34 0%, #012341 100%);
  color:#eaf1f8;
  display:flex;align-items:center;
  overflow:hidden;
}
.hero__img{
  position:absolute;inset:0;
  /* default = woman holding the (baked) globe — the safe static/reduced-motion/mobile fallback */
  background-image:url("/assets/hero_woman_globe.png");
  /* photo right-anchored to the edge, enlarged */
  background-size:90% auto;
  background-position:right center;
  background-repeat:no-repeat;
  /* fade BOTH edges into the hero gradient — left for the text area, right to avoid a hard cut */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 38%, #000 64%, #000 90%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 38%, #000 64%, #000 90%, transparent 100%);
}
/* soft graduated fade-out DOWNWARD into the next (light) section */
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:130px;
  /* many small opacity steps = smooth ease, no visible "Mach band" line */
  background:linear-gradient(to bottom,
    rgba(245,247,250,0) 0%,
    rgba(245,247,250,0.06) 28%,
    rgba(245,247,250,0.22) 48%,
    rgba(245,247,250,0.45) 66%,
    rgba(245,247,250,0.7) 80%,
    rgba(245,247,250,0.9) 92%,
    var(--light) 100%);
  z-index:2;pointer-events:none;
}
/* when the live globe is active, swap to the empty-hand cut so there's no double globe */
.hero.is-live .hero__img{background-image:url("/assets/hero_woman_noglobe.png")}
/* rotating-globe canvas — above the photo, below the text + bottom seam */
.hero__globe{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;pointer-events:none}
/* mobile: the live globe is off below 768px — hide the fallback photo too (globe on mobile is a later task) */
@media(max-width:767px){ .hero__img{display:none} }
.hero .wrap{position:relative;z-index:3;padding-top:150px;padding-bottom:166px}
.hero__content{max-width:620px}

/* H1 two-line treatment */
.hero__h1{
  font-family:var(--sans);
  font-size:clamp(2rem,3.8vw,3.6rem);
  line-height:1.20;
  letter-spacing:-.02em;
  margin:24px 0 0;
}
.hero__h1-light{font-weight:300;font-size:1.15em;color:#eaf1f8}
.hero__h1-bold{font-weight:800;color:#fff}

.hero .subline{
  margin-top:42px;max-width:none;white-space:nowrap;
  font-size:clamp(1rem,1.4vw,1.2rem);
  color:#b8cfe0;font-weight:400;line-height:1.6;
}
.hero__cta{margin-top:60px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* hero CTA button override — wider, less radius */
.hero-cta-btn{
  border-radius:6px;
  padding:16px 36px;
  font-size:1rem;font-weight:700;
  letter-spacing:.01em;
}

/* ============================================================
   LIGHT SECTION primitives (facts / knowledge — NO CTA here)
   ============================================================ */
.section{position:relative;padding:var(--section-y) 0}
.section.light{background:var(--light);color:var(--ink)}
.section.light .subline{color:var(--ink-soft)}
.section .eyebrow .num,.section .eyebrow .label{color:#9aa7b6}
/* soft downward fade primitive (re-usable seam) */
.fade-down-light{position:absolute;left:0;right:0;bottom:0;height:140px;
  background:linear-gradient(to bottom, rgba(245,247,250,0), var(--light));pointer-events:none}

/* ---------- S02 layout: copy left, held-back UI mock right ---------- */
.s02__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
/* the right grid cell clips the deliberately bled dashboard so it stops at the viewport edge */
.s02__grid>.dash{max-width:none}
.s02__copy{max-width:520px}
.s02__copy h2{margin:18px 0 0}
/* heading: lighter top line, bolder + larger emphasis line (per mockup) */
.s02__h2-thin{font-weight:400;font-family:var(--sans)}
.s02__h2-bold{font-weight:700;font-size:1.12em;font-family:var(--sans)}
.s02__copy .subline{margin-top:18px;font-size:1rem;line-height:1.55}

/* 2×2 stat grid — NO per-stat icons */
.statrow{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,5vw,80px);row-gap:clamp(34px,4vw,52px);margin-top:46px}
.stat{min-width:120px}
.stat .fig{font-family:var(--sans);font-weight:400;font-size:clamp(2.4rem,3.4vw,3.2rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.stat .cap{margin-top:12px;font-size:.92rem;color:var(--ink-soft);line-height:1.4;max-width:160px}
.stat .fig .unit{color:var(--cyan)}   /* single dosed accent lives here */

/* held-back UI mock (cropped on the right edge — calm, not a full dashboard) */
.s02__grid{align-items:start}
.uimock{
  position:relative;background:var(--paper);border:1px solid #e4e9f0;border-right:none;
  border-radius:16px 0 0 16px;box-shadow:0 24px 60px -28px rgba(10,26,47,.28);
  padding:26px 0 26px 30px;overflow:hidden;min-height:360px;
  /* widen well past the column and let the right edge bleed off-screen = 'held back' */
  width:calc(100% + 240px);
}
/* mock header: traffic dots + a quiet tab label so it reads as a real surface */
.uimock__head{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-right:24px}
.uimock__bar{display:flex;align-items:center;gap:7px}
.uimock__bar i{width:9px;height:9px;border-radius:50%;background:#d8dfe8;display:block}
.uimock__tab{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#8b99aa;padding-bottom:3px;border-bottom:2px solid #dfe5ee}

.uimock__row{display:flex;align-items:center;justify-content:space-between;padding:15px 24px 15px 0;border-top:1px solid #eef1f6}
.uimock__row:first-of-type{border-top:none}
.uimock__k{font-size:.9rem;color:#48586c;font-weight:500}
/* 'Live' status — neutral green dot, deliberately NOT cyan (cyan stays reserved for the spark accent) */
.uimock__v{display:flex;align-items:center;gap:8px;font-size:.84rem;color:#5d6b7c;font-weight:600;letter-spacing:.02em}
.uimock__v i.on{width:7px;height:7px;border-radius:50%;background:#3fb27f;box-shadow:0 0 0 3px rgba(63,178,127,.14);display:block}
.uimock__cur{font-size:.84rem;color:var(--ink);font-weight:600;letter-spacing:.01em}
.uimock__foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:18px;padding:16px 24px 0 0;border-top:1px dashed #e1e7f0;
  font-size:.78rem;color:#8b99aa;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.uimock__route{color:#5d6b7c;text-transform:none;letter-spacing:0;font-weight:600}
.uimock__chip{font-size:.72rem;font-weight:600;color:var(--cyan);background:color-mix(in srgb, var(--cyan) 10%, transparent);padding:4px 10px;border-radius:999px}
.uimock__spark{height:64px;margin:0 24px 20px 0;border-radius:8px;
  background:linear-gradient(90deg,color-mix(in srgb, var(--cyan) 8%, transparent),color-mix(in srgb, var(--cyan) 2%, transparent));
  position:relative;overflow:hidden}
@media(max-width:980px){ .s02__grid{grid-template-columns:1fr} .uimock{display:none} }

/* ---------- S02 DAO PAY dashboard mock (very simplistic, brand-clean) ---------- */
/* widen the container past its grid column so the image can grow;
   the right-bleed is clipped safely by the body's overflow-x:clip */
/* isolate so the layers' inline z-index (depth ordering) can't escape above the nav */
.dash{position:relative;display:flex;justify-content:flex-end;width:calc(100% + 180px);isolation:isolate}
.dash__img{display:block;width:100%;max-width:620px;height:auto}
/* 3-layer scroll-scrubbed collage (DashboardScroll). The base image holds the box height;
   the other two are absolutely stacked over it. JS drives opacity/transform/z-index. */
.dash__stack{position:relative;width:100%;max-width:460px;margin:110px 60px 0 auto}
.dash__layer{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 24px 60px -28px rgba(10,26,47,.30);
  transform-origin:center center;will-change:opacity,transform;backface-visibility:hidden}
.dash__layer--base{position:relative}
.dash__layer--over{position:absolute;top:0;left:0}
/* Mobile/tablet: keep the orbiting dashboard visible — drop the desktop right-bleed and
   centre a smaller stack so the (responsive) orbit fits the narrow viewport. */
@media(max-width:980px){
  .dash{width:100%;justify-content:center}
  .dash__stack{max-width:min(260px,56vw);margin:40px auto 0}
}
/* When a dashboard (orbit) stats section is immediately followed by the timeline section
   (.s04, whose .s04__person image breaks out the top), extend the stats section's bottom so
   the downward orbit spill clears the person instead of overlapping it.
   NB: reference the next section by its .s04 class — nesting :has() inside :has() is invalid
   CSS and the whole rule would be dropped. */
.section:has(.dash__stack):has(+ .s04){
  padding-bottom:clamp(180px,20vw,260px);
}

/* ============================================================
   SECTION S03 — APPROACH (light, no CTA)
   ============================================================ */
.s03__head{max-width:780px}
/* tighten the gap between S02 (Coverage) and S03 (Approach) */
.section:has(.s02__grid){padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,4.5vw,72px)}
.s03{padding-top:clamp(40px,4.5vw,72px)}
.s03 h2{margin:18px 0 0;line-height:1.32}
/* heading: lighter top line, bolder + larger emphasis line (per mockup) */
.s03__h2-thin{font-weight:400;font-family:var(--sans);color:#0F2742}
.s03__h2-bold{font-weight:700;font-family:var(--sans);color:#0F2742}
.s03__lead{margin-top:22px;max-width:740px;font-size:1.1rem;line-height:1.55;color:#43597A}

/* four steps: generous whitespace, numbers + short text, NO icon wall */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,4vw,56px);margin-top:clamp(60px,7vw,96px);counter-reset:none}
.step{position:relative;padding-top:30px;border-top:1px solid #dde4ec}
.step__no{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.14em;
  color:#9aa7b6}
/* the single dosed accent in this section: a short cyan tick above the active rhythm */
.step::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--cyan);opacity:.0}
.step:first-child::before{opacity:.85}
.step__t{font-family:var(--sans);font-weight:600;font-size:1.2rem;line-height:1.2;
  color:var(--ink);margin:16px 0 0;letter-spacing:-.01em}
.step__b{font-size:.96rem;color:var(--ink-soft);line-height:1.55;margin-top:12px;max-width:240px}
/* read-more: expands DOWNWARD inside the section (no overlay) */
/* Section-3 steps: one "More" toggles ALL four columns together (no-JS checkbox). */
.steps-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.step__more,.step__less{margin-top:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--cyan-deep);
  letter-spacing:.02em;width:max-content}
.step__more::after{content:"+";font-weight:700;font-size:1rem;line-height:1}
.step__less::after{content:"–";font-weight:700;font-size:1rem;line-height:1}
.step__detail{display:none;margin-top:10px}
.step__detail p{font-size:.9rem;color:var(--ink-soft);line-height:1.55;max-width:240px}
/* "Less" sits at the END of the expanded text, not mid-text */
.step__less{margin-top:12px}
/* expanded state — any "More" clicked opens every column; the "More" control is
   then replaced by a "Less" control at the bottom of each detail block. */
.steps-toggle:checked ~ .steps .step__detail{display:block}
.steps-toggle:checked ~ .steps .step__more{display:none}
.steps-toggle:focus-visible ~ .steps .step__more{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.steps-toggle:focus-visible ~ .steps .step__less{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
@media(max-width:980px){ .steps{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

/* ============================================================
   DARK SECTION primitives (awareness / emotion — CTAs live here)
   ============================================================ */
.section.dark{background:var(--navy);color:#eaf1f8}
.section.dark .eyebrow .num,.section.dark .eyebrow .label{color:#9aa7b6}
.section.dark .subline{color:#c3d1e0}
/* soft downward fade primitive for dark sections */
.fade-down-dark{position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom, rgba(10,26,47,0), var(--navy));pointer-events:none}

/* ---------- S04 journey ---------- */
.s04{overflow:visible;padding-top:clamp(110px,12vw,170px)}  /* room for the person to break out the top */
/* lighter blue at top, navy below (beats .section.dark) */
.section.dark.s04{background:linear-gradient(180deg, #06294E 0%, #12375D 35%, #012345 55%, #000409 70%, #041225 82%, #00040b 92%, #021429 95%, #052041 100%)}
.s04 .wrap{position:relative;z-index:2}
.s04__head{max-width:620px}
.s04 h2{margin:18px 0 0;white-space:nowrap}
/* heading: sans font; lighter lead-in, bold emphasis (same size) */
.s04__h2-thin{font-weight:300;font-family:var(--sans);color:#fff}
.s04__h2-bold{font-weight:700;font-family:var(--sans);color:#fff}
.s04__lead{margin-top:22px;max-width:560px;font-family:var(--sans);font-size:1.1rem;line-height:1.55}
/* freigestelltes fly-out person — right side, breaking UP out of the section top */
.s04__person{position:absolute;z-index:3;pointer-events:none;
  right:clamp(90px,10vw,210px);top:clamp(-135px,-8.5vw,-100px);
  height:clamp(490px,52vw,710px);width:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));}
@media(max-width:1100px){ .s04__person{height:420px;opacity:.85} }
@media(max-width:820px){ .s04__person{display:none} .s04 h2{white-space:normal} }

/* calm horizontal timeline — lots of air */
.tl{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:0;
  margin-top:clamp(64px,8vw,110px);position:relative;counter-reset:tl-counter;
  width:calc(100% + 60px)}   /* modest right-bleed to widen gaps between steps; small enough not to clip on common widths */
.tl::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.40)}
.tl__step{position:relative;padding-top:34px;padding-right:6px;counter-increment:tl-counter}
.tl__step::before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--navy);border:1px solid rgba(255,255,255,.45)}
.tl__time{display:block;font-family:var(--sans);font-weight:700;font-size:.96rem;color:#fff;letter-spacing:-.01em}
.tl__name{display:block;margin-top:8px;font-size:.84rem;color:#9fb1c4;line-height:1.35;max-width:170px}
/* the longer step gets a quiet emphasis, not an alarm */
.tl__step--long .tl__name{color:#c3d1e0}
/* single dosed accent of the section sits on Go-Live */
.tl__step--go::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb, var(--cyan) 18%, transparent)}
.tl__step--go .tl__name{color:#eaf1f8;font-weight:500}

/* vertical Quick-Check CTA anchor (dark only) */
/* centered Quick-Check card */
/* ---------- Prose / rich-text block (About / legal / company pages) ---------- */
.prose{max-width:720px}
.prose__h1{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.prose__body{margin-top:24px;color:var(--ink-soft);font-size:1.05rem;line-height:1.7}
.prose__body p{margin:0 0 1.1em}
.prose__body h2{font-size:1.5rem;color:var(--ink);font-weight:700;margin:1.6em 0 .5em}
.prose__body h3{font-size:1.2rem;color:var(--ink);font-weight:700;margin:1.4em 0 .4em}
.prose__body ul,.prose__body ol{margin:0 0 1.1em;padding-left:1.4em}
.prose__body li{margin:.3em 0}
.prose__body a{color:var(--cyan-deep);text-decoration:underline}

/* ---------- Contact block ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:start}
.contact__h1{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.contact__lead{margin-top:18px;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;max-width:480px}
.contact__details{margin-top:34px}
.contact__dh{font-size:1.05rem;font-weight:700;color:var(--ink);margin:0 0 14px}
.contact__row{display:flex;gap:14px;margin:0 0 12px;font-size:1rem;color:var(--ink-soft);line-height:1.5}
.contact__k{flex:0 0 70px;font-weight:600;color:var(--ink)}
.contact__row a{color:var(--cyan-deep);text-decoration:none}
.contact__row a:hover{text-decoration:underline}
.contact__addr{white-space:pre-line}
.contact__fh{font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 18px}
/* form */
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.cform__field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--ink)}
.cform__field--full{grid-column:1 / -1}
.cform__field input,.cform__field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid #d4dde7;border-radius:8px;padding:11px 13px;width:100%}
.cform__field input:focus,.cform__field textarea:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
.cform__field textarea{resize:vertical;min-height:120px}
.cform__consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.cform__consent input{margin-top:3px;flex:none}
.cform__err{margin-top:12px;color:#c0392b;font-size:.9rem}
.cform__submit{margin-top:20px}
.cform__done{padding:24px;border:1px solid #d4dde7;border-radius:12px;background:#fff;color:var(--ink)}
.cform__note{margin-top:8px;color:var(--ink-soft);font-size:.95rem}
.cform__done a{color:var(--cyan-deep)}
@media(max-width:860px){ .contact{grid-template-columns:1fr} .cform__grid{grid-template-columns:1fr} }

.qc{display:block;text-align:center;
  max-width:720px;margin:clamp(70px,8vw,120px) auto 0;
  padding:clamp(38px,4vw,56px) clamp(28px,4vw,64px);
  /* glowing glass card — top-right bloom + soft blue glow so it catches the eye (Alex) */
  background:
    radial-gradient(180% 90% at 85% 0%, rgba(11, 58, 125, 0.3), rgba(40,90,170,.10) 40%, rgba(255,255,255,.02) 72%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(150,190,250,.24);
  border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6), 0 0 60px -12px rgba(60,130,235,.28), inset 0 1px 0 rgba(255,255,255,.12)}
.qc__t{font-family:var(--sans);font-weight:700;font-size:1.6rem;line-height:1.25;color:#fff;letter-spacing:-.01em}
.qc__b{margin:14px auto 0;font-size:1rem;color:#c3d1e0;line-height:1.5;max-width:480px}
.qc__cta{margin-top:26px}
.qc__sep{display:block;height:1px;background:rgba(255,255,255,.1);margin:clamp(28px,3.5vw,40px) auto 0;max-width:600px}
.qc__eyebrow{display:block;margin-top:22px;font-family:var(--sans);
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8aa0b6}
.qc__pick{margin-top:8px;font-size:1rem;color:#c3d1e0;line-height:1.5}
.qc__pick strong{color:#eaf1f8;font-weight:700}
@media(max-width:980px){
  /* vertical numbered journey so the order stays clear on small screens */
  .tl{grid-template-columns:1fr;gap:0;width:100%;margin-top:clamp(40px,8vw,64px)}
  .tl::before{display:none}
  .tl::after{content:"";position:absolute;left:13px;top:20px;bottom:20px;width:2px;background:rgba(255,255,255,.18)}
  .tl__step{display:grid;grid-template-columns:28px 1fr;column-gap:16px;align-items:center;padding:11px 0}
  .tl__step::before{
    position:relative;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;
    grid-column:1;grid-row:1 / span 2;align-self:center;
    width:28px;height:28px;content:counter(tl-counter);
    font-family:var(--sans);font-size:.8rem;font-weight:700;color:#fff;line-height:1}
  .tl__time{grid-column:2}
  .tl__name{grid-column:2;max-width:none}
}

/* ---------- full-bleed industry carousel strip (photo cards) ---------- */
/* solid dark-blue band behind the carousel (matches the navy foot of the S04 gradient) */
.vcar-wrap{position:relative;margin-top:clamp(30px,3.5vw,46px);
  padding:clamp(44px,5vw,76px) 0 50px;
  background:#010913}
.vcar{overflow-x:auto;overflow-y:hidden;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.vcar::-webkit-scrollbar{display:none}
/* prev/next arrow buttons */
.vcar-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,26,47,.78);color:#fff;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 28px -8px rgba(0,0,0,.6);
  transition:background .18s ease,transform .18s ease}
.vcar-nav:hover{background:var(--cyan);border-color:var(--cyan)}
.vcar-nav--prev{left:max(calc((100vw - var(--maxw))/2), var(--pad-x))}
.vcar-nav--next{right:max(calc((100vw - var(--maxw))/2), var(--pad-x))}
.vcar-nav:hover{transform:translateY(-50%) scale(1.06)}
.vcar__track{display:flex;gap:20px;width:max-content}
.vcard{position:relative;flex:none;
  width:clamp(230px, calc((min(100vw, var(--maxw)) - 2 * var(--pad-x) - 60px) / 4), 300px);
  height:300px;border-radius:16px;overflow:hidden;
  text-decoration:none;display:block;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.6);
  transition:transform .28s ease, box-shadow .28s ease}
.vcard__img{position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform .5s ease}
/* navy scrim so the white label stays legible on any photo */
.vcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(10,26,47,.92) 0%, rgba(10,26,47,.5) 38%, rgba(10,26,47,.08) 70%, rgba(10,26,47,.18) 100%)}
.vcard__lbl{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;
  font-family:var(--sans);font-weight:700;font-size:1.18rem;color:#fff;letter-spacing:-.01em;
  display:flex;flex-direction:column;gap:6px}
.vcard__go{font-size:.82rem;font-weight:600;color:var(--cyan);letter-spacing:.02em;
  opacity:1;transform:translateY(0);transition:opacity .28s ease, transform .28s ease}
.vcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.vcard:hover .vcard__img{transform:scale(1.08)}
.vcard:hover .vcard__go{opacity:1;transform:translateY(0)}
@media(max-width:820px){ .vcard{width:230px;height:240px} }

/* ============================================================
   SECTION S05 — PRECHECK (dark, human anchor — second emotional
   crescendo, runs SEAMLESSLY after S04; no other USP timing here)
   ============================================================ */
.s05{position:relative;overflow:visible;
  padding-top:clamp(96px,11vw,150px);padding-bottom:clamp(120px,13vw,190px)}
/* top-to-bottom transition (beats .section.dark) */
.section.dark.s05{background:linear-gradient(180deg, #032449 0%, #021830 100%)}
.s05 .wrap{position:relative;z-index:2}
/* the precheck content lives on the LEFT half; the person occupies the right */
.s05__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,5vw,80px);align-items:start}
.s05__head{max-width:560px}
.s05 h2{margin:18px 0 0}
/* heading: sans; lighter top line, bold emphasis on its own line (same size) */
.s05__h2-thin{font-weight:400;font-family:var(--sans)}
.s05__h2-bold{font-weight:700;font-family:var(--sans)}
.s05__sub{margin-top:20px;max-width:500px;font-family:var(--sans);font-size:1.1rem;line-height:1.55}
/* H3 as three quiet qualifiers, not a sentence repeat of S04 */
.s05__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:#cdd8e6;letter-spacing:.01em}
.s05__meta span{display:inline-flex;align-items:center;gap:9px}
.s05__meta span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.4)}
/* traffic-light Go / Review / No-Go — the structural heart, calm, no alarm */
.tlight{margin-top:clamp(40px,5vw,60px);display:flex;flex-direction:column;gap:0;
  max-width:480px;border-top:1px solid rgba(255,255,255,.1)}
.tlight__row{display:flex;align-items:flex-start;gap:18px;padding:20px 0;
  border-bottom:1px solid rgba(255,255,255,.1)}
.tlight__dot{flex:none;width:13px;height:13px;border-radius:50%;margin-top:5px}
.tlight__row--go .tlight__dot{background:#3fb27f;box-shadow:0 0 0 4px rgba(63,178,127,.16)}
.tlight__row--review .tlight__dot{background:#e0a93f;box-shadow:0 0 0 4px rgba(224,169,63,.16)}
.tlight__row--no .tlight__dot{background:#c7637a;box-shadow:0 0 0 4px rgba(199,99,122,.16)}
.tlight__k{font-family:var(--sans);font-weight:700;font-size:1rem;color:#fff;letter-spacing:.01em}
.tlight__v{display:block;margin-top:5px;font-size:.92rem;color:#a9bacb;line-height:1.5;max-width:360px}
/* interactive PreCheck card */
.pcheck{margin-top:clamp(44px,5vw,64px);max-width:500px;
  /* glowing glass card — same treatment as .qc (Alex: make the CTA boxes catch the eye) */
  background:
    radial-gradient(180% 90% at 85% 0%, rgba(11, 58, 125, 0.3), rgba(40,90,170,.10) 40%, rgba(255,255,255,.02) 72%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(150,190,250,.24);
  border-radius:16px;padding:clamp(24px,3vw,34px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6), 0 0 60px -12px rgba(60,130,235,.28), inset 0 1px 0 rgba(255,255,255,.12)}
.pcheck__t{font-family:var(--sans);font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:-.01em}
.pcheck__b{margin-top:12px;font-family:var(--sans);font-size:.98rem;color:#c3d1e0;line-height:1.5}
.pcheck__b strong{color:#eaf1f8;font-weight:700}
.pcheck__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px;
  font-family:var(--sans);font-size:.9rem;font-weight:600;color:#cdd8e6}
.pcheck__meta span:not(:last-child)::after{content:"";display:inline-block;margin-left:14px;
  width:1px;height:13px;background:rgba(255,255,255,.22);vertical-align:-2px}
.pcheck__sep{height:1px;background:rgba(255,255,255,.1);margin:22px 0}
.pcheck__qhead{display:flex;align-items:center;gap:16px}
.pcheck__step{flex:none;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#8aa0b6}
.pcheck__bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.pcheck__bar span{display:block;height:100%;background:var(--cyan);border-radius:3px}
.pcheck__q{margin-top:14px;font-family:var(--sans);font-weight:700;font-size:1.1rem;color:#fff}
.pcheck__field{display:flex;align-items:center;gap:11px;margin-top:16px;
  background:rgba(10,26,47,.55);border:1px solid rgba(255,255,255,.16);border-radius:10px;
  padding:13px 16px}
.pcheck__globe{flex:none;color:#8aa0b6}
.pcheck__field input{flex:1;background:none;border:none;outline:none;
  font-family:var(--sans);font-size:.96rem;color:#eaf1f8}
.pcheck__field input::placeholder{color:#7f93a8}
.pcheck__field:focus-within{border-color:var(--cyan)}
.pcheck__next{margin-top:22px;font-size:.98rem}
/* human anchor: stands in the RIGHT column and BREAKS OUT below the section
   (prepares the dark-in-light overlap into S06). role-only caption beneath. */
.s05__figure{position:relative;align-self:start;min-height:1px}
.s05__person{display:block;width:100%;max-width:460px;height:auto;margin:0 0 0 auto;
  position:relative;z-index:3;top:32px;left:75px;   /* top aligned with heading, nudged right */
  filter:drop-shadow(0 36px 60px rgba(0,0,0,.5))}
.s05__role{position:relative;z-index:4;text-align:center;margin-top:18px;
  font-family:var(--sans);font-size:.86rem;font-weight:600;color:#9fb1c4;letter-spacing:.02em}
.s05__role b{color:#eaf1f8;font-weight:700}
@media(max-width:980px){
  .s05__grid{grid-template-columns:1fr}
  .s05__figure{margin-top:24px}
  .s05__person{max-width:340px;margin:0 auto;top:0;left:0}
}

/* ============================================================
   SEAM S05(dark) -> S06(light): the ONE allowed slant.
   A navy wedge tilts off to one side; the S05 human ragt darüber
   hinaus (overlap finalised at assembly). This is the single
   structural edge-effect of the whole page.
   ============================================================ */
.slant-d2l{position:relative;height:clamp(90px,9vw,150px);overflow:hidden;margin-top:-1px}
.slant-d2l::before{content:"";position:absolute;top:0;left:0;right:0;height:100%;
  background:var(--navy);
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 100%);} /* dark wedge falling to the left */

/* ============================================================
   SECTION S06 — STORY-CLOSE (light, factual, NO CTA)
   "What changes for you as a merchant" — methodical before/after
   ============================================================ */
.s06{padding-top:clamp(40px,5vw,70px)}
.s06__head{max-width:760px}
.s06 h2{margin:18px 0 0;font-size:clamp(1.8rem,2.9vw,2.5rem)}
/* heading: sans; lighter lead-in, bold emphasis (same size) */
.s06__h2-thin{font-weight:300;font-family:var(--sans)}
.s06__h2-bold{font-weight:700;font-family:var(--sans)}
.s06__lead{margin-top:22px;max-width:660px;font-family:var(--sans);font-size:1.12rem;line-height:1.55}
/* the comparison: a calm two-column table, magazine-like, generous air */
.shift{margin-top:clamp(56px,6vw,88px);border-top:2px solid var(--ink);
  /* sit it below the slant comfortably */}
.shift__head,.shift__row{display:grid;grid-template-columns:1.1fr 1fr 1fr;
  gap:clamp(20px,3vw,48px);align-items:start}
.shift__head{padding:18px 0 16px;border-bottom:1px solid #d4dce6}
.shift__h{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8190a1}
.shift__h--now{color:#8190a1}
.shift__h--dao{color:var(--cyan-deep);position:relative} /* the single dosed accent of this light section: the column label */
/* short accent underline beneath the With DAO PAY header */
.shift__h--dao::after{content:"";position:absolute;left:0;bottom:-16px;
  width:42px;height:3px;border-radius:3px;background:var(--cyan)}
.shift__row{padding:24px 0;border-bottom:1px solid #e4e9f0}
.shift__topic{font-family:var(--sans);font-weight:700;font-size:1.18rem;line-height:1.25;
  color:var(--ink);letter-spacing:-.01em}
.shift__now,.shift__dao{font-size:.98rem;line-height:1.55}
.shift__now{color:#7a8798}                 /* the "before" reads quieter, greyed */
.shift__dao{color:var(--ink);font-weight:500} /* the "with DAO" reads solid, present */
/* a quiet symbol marks each DAO cell — not an icon wall, one consistent mark */
.shift__dao{position:relative;padding-left:26px}
.shift__dao::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--cyan);background:transparent}
/* closing factual line, no CTA */
/* FAQ accordion */
.faq{margin-top:clamp(40px,5vw,64px);max-width:740px;
  border-top:1px solid #d4dce6}
.faq__item{border-bottom:1px solid #d4dce6}
.faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--ink);
  letter-spacing:-.01em}
.faq__q::-webkit-details-marker{display:none}
.faq__ic{position:relative;flex:none;width:24px;height:24px;border-radius:50%;
  border:1px solid #b8c4d2;transition:border-color .18s ease}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);background:var(--cyan-deep);transition:opacity .18s ease}
.faq__ic::before{width:10px;height:1.5px}
.faq__ic::after{width:1.5px;height:10px}
.faq__item[open] .faq__ic::after{opacity:0}
.faq__item[open] .faq__ic{border-color:var(--cyan)}
.faq__q:hover .faq__ic{border-color:var(--cyan)}
.faq__a{padding:0 0 22px;max-width:620px}
.faq__a p{font-family:var(--sans);font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.faq__more{display:inline-block;margin-top:22px;font-family:var(--sans);font-weight:600;
  font-size:.92rem;color:var(--cyan-deep);text-decoration:none;letter-spacing:.01em}
.faq__more:hover{text-decoration:underline}

/* closing line — short accent above, sans light/bold */
.s06__close-sep{display:block;width:42px;height:3px;border-radius:3px;background:var(--cyan);
  margin-top:clamp(60px,7vw,96px)}
.s06__close{margin-top:22px;max-width:760px;
  font-family:var(--sans);font-weight:300;font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.32;color:var(--ink);letter-spacing:-.01em}
.s06__close strong{font-weight:700}
.s06__close-thin{font-weight:300}
.s06__close-bold{font-weight:700}
@media(max-width:820px){
  .shift__head{display:none}
  .shift__row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .shift__now::before{content:"Today: ";font-weight:700;color:#8190a1}
  .shift__dao::before{display:none}
  .shift__dao{padding-left:0}
  .shift__dao::after{}
}

/* ============================================================
   FOOTER — dark, large, clearly set off. THREE zones only:
   Legal · Compliance & Security · Risk & Governance.
   NO fact-baseline repetition (struck). Licence visible.
   ============================================================ */
.foot{background:var(--navy-2);color:#c3d1e0;
  padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(36px,4vw,52px);
  border-top:1px solid rgba(255,255,255,.06)}
/* top band: two service "door" cards */
.foot__doors{display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding-bottom:clamp(44px,5vw,68px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.fdoor{display:flex;flex-direction:column;
  background:linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 60%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:clamp(18px,2vw,24px) clamp(24px,2.8vw,34px);
  border-left-width:3px;box-shadow:0 26px 60px -34px rgba(0,0,0,.6)}
.fdoor--merchant{border-left-color:var(--cyan);
  background:linear-gradient(165deg, color-mix(in srgb, var(--cyan) 20%, transparent) 0%, rgba(255,255,255,.02) 58%)}
.fdoor--shopper{border-left-color:var(--svc);
  background:linear-gradient(165deg, color-mix(in srgb, var(--svc) 20%, transparent) 0%, rgba(255,255,255,.02) 58%)}
.fdoor__eyebrow{display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.fdoor--merchant .fdoor__eyebrow{color:#5aa9d8}
.fdoor--shopper .fdoor__eyebrow{color:var(--svc)}
.fdoor__ico{flex:none;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05)}
.fdoor--merchant .fdoor__ico{background:color-mix(in srgb, var(--cyan) 12%, transparent)}
.fdoor--shopper .fdoor__ico{background:color-mix(in srgb, var(--svc) 12%, transparent)}
.fdoor__ico svg{width:19px;height:19px}
.fdoor__t{margin-top:12px;font-family:var(--sans);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.35rem);color:#fff;letter-spacing:-.01em}
.fdoor__b{margin-top:8px;font-family:var(--sans);font-size:.86rem;line-height:1.5;color:#a9bccb;max-width:420px}
.fdoor__btn{display:inline-flex;align-items:center;gap:10px;margin-top:auto;align-self:flex-start;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;text-decoration:none;
  border-radius:9px;padding:14px 26px;transition:transform .18s ease,filter .18s ease}
/* keep a little breathing room above the button (the body's min gap) */
.fdoor__b{margin-bottom:18px}
.fdoor__btn svg{width:16px;height:16px}
.fdoor__btn:hover{transform:translateY(-1px)}
.fdoor__btn--cyan{background:var(--cyan);color:#fff}
.fdoor__btn--cyan:hover{filter:brightness(1.08)}
.fdoor__btn--teal{background:var(--svc);color:#04181a}
.fdoor__btn--teal:hover{filter:brightness(1.08)}
@media(max-width:760px){ .foot__doors{grid-template-columns:1fr} }
/* info band: brand + registered-entity facts */
.foot__info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  padding-top:clamp(40px,5vw,60px)}
.foot__info .brand{margin-bottom:16px}
.foot__info .coin{width:34px;height:34px}
.foot__info .coin svg{width:20px;height:20px}
.foot__info .wordmark{font-family:var(--sans);font-weight:800;font-size:1.05rem;line-height:.95;
  letter-spacing:.02em;color:#fff}
.foot__info .wordmark span{display:block}
.foot__lic{font-family:var(--sans);font-size:.92rem;line-height:1.5;color:#8094a8;max-width:300px}
.foot__reg{display:flex;flex-direction:column;gap:26px}
.foot__regblock{display:flex;flex-direction:column;gap:7px}
.foot__regk{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8094a8}
.foot__regv{font-family:var(--sans);font-size:.96rem;color:#cdd8e6;line-height:1.4}
@media(max-width:760px){ .foot__info{grid-template-columns:1fr;gap:32px} }
/* three governance zones — even, generous, no link-dump */
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  padding-top:clamp(44px,5vw,68px)}
.foot__col h4{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8094a8;margin:0 0 18px}
.foot__col-h--hidden{visibility:hidden}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot__col a{font-family:var(--sans);font-size:.96rem;color:#cdd8e6;text-decoration:none;
  letter-spacing:.005em;transition:color .2s ease;width:max-content}
.foot__col a:hover{color:#fff}
/* baseline strip: copyright + minimal, no fact repetition */
.foot__base{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:clamp(48px,5vw,72px);padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.foot__copy{font-family:var(--sans);font-size:.84rem;color:#7e8fa2;letter-spacing:.01em}
.foot__base nav{display:flex;gap:24px;flex-wrap:wrap}
.foot__base nav a{font-family:var(--sans);font-size:.84rem;color:#8fa1b4;text-decoration:none}
.foot__base nav a:hover{color:#cdd8e6}
@media(max-width:900px){ .foot__top{grid-template-columns:1fr} }
@media(max-width:820px){ .foot__cols{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot__cols{grid-template-columns:1fr} }

/* ---------- consent (FMA / PSP-regulated, opt-in) ----------
   Regulated PSP context: optional tracking must NOT load before a choice.
   No page-dimming overlay (keeps the page visible). Instead the banner carries
   its OWN distinct colour world — a light, paper-toned panel that clearly lifts
   off the dark footer — so it reads as a separate, deliberate consent surface.
   Accept / Reject EQUAL weight (no dark pattern) + granular settings. (Mockup.) */
.cc{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:96;
  width:min(760px,calc(100% - 32px));
  background:var(--paper);color:var(--ink);
  border:1px solid #e0e6ee;border-radius:16px;
  box-shadow:0 30px 80px -22px rgba(6,16,28,.45), 0 2px 0 0 rgba(255,255,255,.6) inset;
  padding:24px 26px;
  /* a calm cyan top edge marks it as the privacy surface */
  border-top:3px solid var(--cyan)}
.cc__top{display:flex;align-items:flex-start;gap:14px}
.cc__lock{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--cyan) 12%, transparent);border:1px solid color-mix(in srgb, var(--cyan) 28%, transparent)}
.cc__lock svg{width:16px;height:16px;stroke:var(--cyan-deep);fill:none;stroke-width:1.8}
.cc__head{flex:1}
.cc__t{font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--ink)}
.cc__txt{font-family:var(--sans);font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin-top:6px}
.cc__txt b{color:var(--ink);font-weight:700}
.cc__txt a{color:var(--cyan-deep);text-decoration:none;font-weight:600}
.cc__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.cc__btn{font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.01em;
  padding:11px 20px;border-radius:10px;cursor:pointer;border:1px solid #cdd5e0;
  background:#fff;color:var(--ink);text-decoration:none;
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center}
/* accept and reject EQUAL visual weight; settings is the quiet tertiary */
.cc__btn--reject:hover{border-color:#9aa7b6}
.cc__btn--accept{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.cc__btn--accept:hover{background:var(--cyan-deep);border-color:var(--cyan-deep)}
.cc__btn--set{margin-left:auto;border-color:transparent;background:transparent;color:#5d6b7c;
  text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px}
.cc__btn--set:hover{color:var(--ink)}
@media(max-width:560px){ .cc__btn--set{margin-left:0} .cc__act{flex-direction:column;align-items:stretch} }

/* ---------- B2C service access (distinct from the merchant sales path) ----------
   A consumer who PAID with DAO PAY and has an issue needs a different door:
   calm, helpful, NOT a sales CTA. A thoughtful service door is itself a trust
   signal to merchants. Own support accent (warm teal-green = "you're taken care of"),
   deliberately NOT the cyan conversion colour. Sits in the dark footer top band. */
.foot__service{display:flex;align-items:center;gap:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--svc) 7%, transparent), color-mix(in srgb, var(--svc) 3%, transparent));
  border:1px solid color-mix(in srgb, var(--svc) 28%, transparent);border-radius:16px;
  padding:24px 26px;max-width:600px;width:100%;
  /* a quiet teal edge on the sensitive side draws calm awareness */
  box-shadow:inset 3px 0 0 0 var(--svc)}
.foot__service .ico{flex:none;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--svc) 14%, transparent);border:1px solid color-mix(in srgb, var(--svc) 34%, transparent)}
.foot__service .ico svg{width:21px;height:21px;stroke:var(--svc);fill:none;stroke-width:1.7}
.foot__service .sv__txt{flex:1;min-width:200px;display:flex;flex-direction:column;justify-content:center}
.foot__service .sv__t{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:-.005em}
.foot__service .sv__b{font-family:var(--sans);font-size:.88rem;line-height:1.5;color:#a9bccb;margin-top:6px;max-width:340px}
/* support link: own teal identity, calm filled chip — reads helpful, not salesy */
.foot__service .sv__link{flex:none;align-self:center;font-family:var(--sans);font-weight:700;font-size:.9rem;
  color:#04181a;background:var(--svc);text-decoration:none;padding:11px 18px;border-radius:10px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .2s ease,transform .2s ease}
.foot__service .sv__link svg{width:15px;height:15px;stroke:#04181a;fill:none;stroke-width:2}
.foot__service .sv__link:hover{background:#3fc7a6;transform:translateY(-1px)}
@media(max-width:560px){ .foot__service{flex-wrap:wrap} .foot__service .sv__link{width:100%;justify-content:center} }

/* ── ExpandableText block ("More info", downward, no overlay) — IMPL-7 / AC-8 ──
   Native <details>: expands downward inline, no modal/overlay, content stays in the DOM. */
.xtext{max-width:740px}
.xtext__title{font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
  letter-spacing:-.01em;line-height:1.15;margin:14px 0 0}
.xtext__body{margin-top:12px;font-size:.96rem;line-height:1.6;color:var(--ink-soft)}
.xtext__toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.xtext__more,.xtext__less{margin-top:14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;width:max-content;
  font-family:var(--sans);font-weight:600;font-size:.88rem;letter-spacing:.02em;color:var(--cyan-deep)}
.xtext__detail{display:none;margin-top:10px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
/* expanded state: hide the top "More", reveal the content, and the "Less" sits at its end */
.xtext__toggle:checked ~ .xtext__detail{display:block}
.xtext__toggle:checked ~ .xtext__more{display:none}
.xtext__toggle:focus-visible ~ .xtext__more{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.xtext__chev{transition:transform .2s ease}
.xtext__chev--up{transform:rotate(180deg)}
.on-dark .xtext__body,.on-dark .xtext__detail{color:#a9bccb}
.on-dark .xtext__more,.on-dark .xtext__less{color:#62d6bb}

/* ============================================================
   Calendly modal (CalendlyModalButton.tsx)
   Trigger reuses .cta / .fdoor__btn styling; this only resets
   the <button> default chrome and styles the popup shell.
   ============================================================ */
.cal-trigger{border:0;cursor:pointer;font-family:inherit}
.cal-modal__backdrop{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(8,18,30,.62);backdrop-filter:blur(2px);
  animation:cal-fade .18s ease}
.cal-modal{
  position:relative;width:min(1040px,100%);height:min(92vh,900px);
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.4)}
.cal-modal__frame{width:100%;height:100%;border:0;display:block}
.cal-modal__close{
  position:absolute;top:10px;right:10px;z-index:1;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cal-modal__close:hover{background:#fff}
.cal-modal__close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes cal-fade{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .cal-modal{height:88vh;border-radius:12px}
}

/* ============================================================
   Industry Grid block (IndustryGridBlock.tsx)
   A responsive card grid, 3-up on desktop.
   ============================================================ */
.igrid__head{max-width:720px;margin:0 0 clamp(28px,4vw,44px)}
.igrid__h2{font-family:var(--sans);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.12;margin:14px 0 0;color:var(--ink)}
.igrid__h2-bold{font-weight:700;color:var(--cyan)}
.igrid__lead{margin-top:14px;color:var(--ink-soft)}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.icard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(20,40,66,.10);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.icard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,40,66,.14);
  border-color:color-mix(in srgb, var(--cyan) 45%, transparent)}
.icard:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.icard__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.icard__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.icard:hover .icard__img{transform:scale(1.04)}
.icard__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.icard__title{font-family:var(--sans);font-weight:600;font-size:1.15rem;color:var(--ink)}
.icard__desc{font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.icard__go{margin-top:6px;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--cyan)}
@media(max-width:900px){ .igrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .igrid{grid-template-columns:1fr} }

/* Hero-less pages: match the first section's top space to the hero eyebrow height
   (.hero .wrap padding-top) so it clears the fixed nav consistently across screens. */
.page-hero-clear > section:first-child{padding-top:150px}

/* ============================================================
   PreCheck wizard (PrecheckWizard.tsx) — extends .pcheck on the dark S05 surface
   ============================================================ */
.pcheck__help{margin:6px 0 0;font-size:.88rem;color:#8aa0b6;line-height:1.4}
.pcheck__opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pcheck__opt{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;cursor:pointer;color:#eaf1f8;
  font-size:.98rem;transition:border-color .15s ease,background .15s ease}
.pcheck__opt:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.pcheck__opt input{accent-color:var(--cyan);width:17px;height:17px;flex:none;margin:0}
.pcheck__nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.pcheck__nav .pcheck__next{margin-top:0}
.pcheck__back{background:transparent;border:1px solid rgba(255,255,255,.28);color:#eaf1f8;
  border-radius:10px;padding:14px 24px;font-family:var(--sans);font-weight:600;font-size:.98rem;
  cursor:pointer;transition:background .15s ease}
.pcheck__back:hover{background:rgba(255,255,255,.06)}
.pcheck__next[disabled],.pcheck__back[disabled]{opacity:.55;cursor:default}
/* contact step + consent need light text on the dark surface */
.pcheck .cform__grid{margin-top:16px}
.pcheck .cform__field{color:#c3d1e0}
.pcheck .cform__consent{color:#a9bccb}
.pcheck--done .pcheck__result{margin-bottom:18px}

/* ============================================================
   Support popup (SupportModalButton.tsx) — reuses the cal-modal
   backdrop/close; .sup-modal turns the panel into a scrollable
   form card on the light surface.
   ============================================================ */
.sup-modal{width:min(680px,100%);height:auto;max-height:92vh;display:flex;flex-direction:column}
.sup-modal__body{overflow-y:auto;padding:clamp(22px,4vw,34px)}
.sup-form__h{font-family:var(--sans);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em;padding-right:36px}
.sup-form__intro{margin-top:8px;font-size:.96rem;color:var(--ink-soft);line-height:1.5}
.sup-form{margin-top:18px}
.sup-form .cform__field select{font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid #cfd9e4;border-radius:8px;padding:11px 12px}
.sup-form .cform__field select:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
.sup-form .cform__field input[type="file"]{font-size:.9rem;color:var(--ink-soft);padding:8px 0;border:0}
.sup-form__submit{margin-top:20px}
.sup-form__done{padding:8px 0 14px}
.sup-form__done .sup-form__intro{margin-top:10px}
@media(max-width:760px){
  .sup-modal{max-height:88vh}
  .sup-modal .cform__grid{grid-template-columns:1fr}
}

/* ============================================================
   Coming Soon section (ComingSoonBlock.tsx)
   ============================================================ */
.csoon{max-width:640px;margin:0 auto;text-align:center;padding:clamp(24px,5vw,64px) 0}
.csoon__eyebrow{justify-content:center}
.csoon__h{font-family:var(--sans);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.12;margin:18px 0 0;color:var(--ink)}
.csoon__h-bold{font-weight:700;color:var(--cyan)}
.csoon__b{margin-top:16px;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.csoon__cta{margin-top:28px}