/* ============================================================
   Anwaza — marketing site styles.
   Source of truth for tokens/components: "design_system/".
   This file imports the DS token layer (colors, type, spacing,
   radii, shadows, z-index, interactions, responsive) and then
   reproduces the DS component look in plain, no-build CSS so the
   shipped site carries no runtime React/Babel.
   Class names mirror the DS (awz-*) so the DS interaction layer
   (focus rings, hovers) applies for free.
   ============================================================ */

/* Design tokens — compiled from "design_system/tokens/" (the source of
   truth). Copied locally so the shipped site is self-contained. Re-copy if the
   design system's tokens change. Order matches the DS styles.css entry point. */
@import url('/tokens/fonts.css');
@import url('/tokens/colors.css');
@import url('/tokens/typography.css');
@import url('/tokens/spacing.css');
@import url('/tokens/radii.css');
@import url('/tokens/shadows.css');
@import url('/tokens/z-index.css');
@import url('/tokens/interactions.css');
@import url('/tokens/responsive.css');

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* keep anchored sections (e.g. #how) clear of the sticky header */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: none; }

/* Custom easing */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 66px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: var(--z-tooltip);
  background: var(--navy-800);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: top .18s var(--ease-out-quart);
}
.skip-link:focus { top: 12px; color: #fff; }

/* Screen-reader only */
.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;
}

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 8vw, var(--section-y)); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

.section-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--mint-700);
  margin: 0 0 14px;
}
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--light { color: rgba(255,255,255,0.72); }
.eyebrow--gift { color: var(--coral-600); }
.eyebrow .icon { width: 15px; height: 15px; }

.h-display {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter);
  line-height: 1.03;
}
.h-section {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
}
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 54ch;
}
.prose { max-width: 62ch; color: var(--text-muted); }
.prose p + p { margin-top: 1em; }

/* Icons (hydrated by main.js from an inline sprite; sized here) */
.icon { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
svg.icon { stroke: currentColor; fill: none; }

/* ------------------------------------------------------------
   Buttons  (mirrors DS Button.jsx; states from interactions.css)
   ------------------------------------------------------------ */
.awz-btn {
  --_h: var(--control-md);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: var(--_h);
  padding: 0 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}
.awz-btn .icon { width: 18px; height: 18px; }
.awz-btn--sm { --_h: var(--control-sm); padding: 0 16px; font-size: var(--fs-body-sm); gap: 6px; }
.awz-btn--sm .icon { width: 15px; height: 15px; }
.awz-btn--lg { --_h: var(--control-lg); padding: 0 30px; font-size: var(--fs-body-lg); gap: 9px; }
.awz-btn--lg .icon { width: 20px; height: 20px; }
.awz-btn--xl { --_h: var(--control-xl); padding: 0 38px; font-size: var(--fs-body-lg); gap: 10px; }
.awz-btn--xl .icon { width: 22px; height: 22px; }
.awz-btn--block { display: flex; width: 100%; }

.awz-btn--primary   { background: var(--brand); color: var(--text-on-brand); }
.awz-btn--gift      { background: var(--brand-gift); color: var(--text-on-gift); }
.awz-btn--ink       { background: var(--navy-800); color: #fff; }
.awz-btn--secondary { background: #fff; color: var(--navy-800); border-color: var(--border-default); }
.awz-btn--ghost     { background: transparent; color: var(--navy-700); }
.awz-btn--subtle    { background: var(--mint-100); color: var(--navy-800); }
.awz-btn--on-ink    { background: #fff; color: var(--navy-800); }

.awz-btn[disabled], .awz-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* CTA glow on the primary hero/closing buttons */
.awz-btn--glow { box-shadow: var(--shadow-brand); }
.awz-btn--gift.awz-btn--glow { box-shadow: var(--shadow-gift); }

/* Soft scroll cue */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--text-body); text-decoration: none;
  padding: 8px 4px;
}
.scroll-cue:hover { color: var(--brand-stronger); }
.scroll-cue .icon { color: var(--mint-600); transition: transform .3s var(--ease-out-quart); }
.scroll-cue:hover .icon { transform: translateY(3px); }
.scroll-cue .cue-bob { animation: cue-bob 2.2s var(--ease-out-quart) infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(251,252,253,0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
}
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-lockup img { height: 26px; width: auto; display: block; }
.brand-lockup .wordmark {
  font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--navy-800); line-height: 1;
}

.primary-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--text-body); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-md);
  transition: background .15s ease, color .15s ease;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans);
}
.nav-link:hover { color: var(--navy-800); background: var(--mint-50); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Language switch */
.lang-switch { position: relative; }
.lang-switch__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  padding: 6px 12px; cursor: pointer;
}
.lang-switch__toggle .icon { width: 14px; height: 14px; }
.lang-switch__toggle:hover { color: var(--navy-800); border-color: var(--border-strong); }
.lang-switch__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s var(--ease-out-quart), transform .16s var(--ease-out-quart), visibility .16s;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.lang-switch__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-body);
}
.lang-switch__item:hover { background: var(--mint-50); color: var(--navy-800); }
.lang-switch__item[aria-current="true"] { color: var(--navy-800); }
.lang-switch__item[aria-current="true"] .tick { color: var(--mint-600); }
.lang-switch__item[aria-disabled="true"] { color: var(--text-subtle); cursor: default; pointer-events: none; }
.lang-switch__item .tick { width: 16px; height: 16px; }
.lang-switch__item .soon {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--ls-caps); color: var(--text-subtle);
  background: var(--neutral-100); border-radius: var(--radius-pill); padding: 2px 7px;
}

/* Hamburger */
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; color: var(--navy-800);
}
.nav-toggle .icon { width: 22px; height: 22px; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 82% -12%, var(--mint-100), transparent 62%),
    radial-gradient(720px 420px at 6% 6%, var(--mint-50), transparent 60%),
    var(--surface-page);
}
.hero__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(52px, 8vw, 84px) var(--gutter) clamp(64px, 9vw, 92px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__title { margin: 0 0 18px; }
.hero__sub { margin-bottom: 30px; }
.hero__ctarow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__trust {
  display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap;
  margin-top: 30px; font-size: var(--fs-body-sm); color: var(--text-muted);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .icon { width: 17px; height: 17px; color: var(--mint-600); }
.hero__visual { display: flex; justify-content: center; position: relative; }

/* Hero shopper-first has no split visual on B2B; a text-forward variant */
.hero--business .hero__inner { grid-template-columns: 1fr; }
.hero--business .hero__title, .hero--business .hero__sub, .hero--business .lead { max-width: 20ch; }
.hero--business .hero__sub { max-width: 56ch; }

/* Centered text-only hero (home — no gift-card visual) */
.hero--center .hero__inner {
  grid-template-columns: 1fr; text-align: center;
  padding-block: clamp(64px, 10vw, 112px);
}
.hero--center .hero__copy { max-width: 760px; margin-inline: auto; }
.hero--center .hero__sub, .hero--center .lead { margin-inline: auto; }
.hero--center .hero__ctarow, .hero--center .hero__trust { justify-content: center; }
.hero--center .hero__title { font-size: var(--fs-display-2xl); }

/* ------------------------------------------------------------
   Gift card (mirrors DS GiftCard.jsx)
   ------------------------------------------------------------ */
.gift-card {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.gift-card__head {
  position: relative; padding: 20px 20px 18px; background: var(--mint-100);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.gift-card--coral .gift-card__head { background: var(--coral-100); }
.gift-card--gold .gift-card__head { background: var(--gold-100); }
.gift-card__logo {
  width: 46px; height: 46px; border-radius: var(--radius-md); background: #fff;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: none; color: var(--navy-800);
}
.gift-card__logo .icon { width: 24px; height: 24px; }
.gift-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.gift-card__brand { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }
.gift-card__title {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold);
  color: var(--text-strong); letter-spacing: var(--ls-tight); line-height: var(--lh-heading);
}
.gift-card__value {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-extrabold);
  color: var(--mint-700); letter-spacing: var(--ls-tight);
}
.gift-card__cta { margin-top: auto; padding-top: 4px; }

/* Badge (mirrors DS Badge.jsx, soft) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1.4;
  white-space: nowrap;
}
.badge .icon { width: 13px; height: 13px; }
.badge--brand { background: var(--mint-100); color: var(--mint-800); }
.badge--gift  { background: var(--coral-100); color: var(--text-on-gift); }
.badge--info  { background: var(--info-100); color: var(--fg-info); }
.badge--neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* ------------------------------------------------------------
   Flow card — B2B hero mechanic visual (mechanics-only, no metrics)
   ------------------------------------------------------------ */
.flowcard {
  width: 100%; max-width: 380px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 16px;
}
.flowcard__step {
  display: flex; gap: 13px; align-items: center;
  padding: 15px 16px; border-radius: var(--radius-lg);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.flowcard__ico {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint-100); color: var(--mint-700);
}
.flowcard__ico .icon { width: 22px; height: 22px; }
/* One-font card text: title and sub share family, size, weight and colour */
.flowcard__t { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.flowcard__d { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-body); margin-top: 2px; line-height: var(--lh-body); }
.flowcard__arrow { display: flex; justify-content: center; color: var(--border-strong); padding: 5px 0; }
.flowcard__arrow .icon { width: 18px; height: 18px; }
.flowcard__step--win {
  background: linear-gradient(120deg, var(--navy-800), var(--navy-700));
  border-color: transparent; color: #fff;
}
.flowcard__step--win .flowcard__t { color: #fff; }
.flowcard__step--win .flowcard__d { color: rgba(255,255,255,0.72); }
.flowcard__step--win .flowcard__ico { background: rgba(20,201,157,0.18); color: var(--mint-400); }

/* ------------------------------------------------------------
   "Why is it free" block
   ------------------------------------------------------------ */
.why {
  background: linear-gradient(180deg, var(--surface-page), var(--mint-50));
}

/* ------------------------------------------------------------
   Steps — horizontal (mirrors DS Steps.jsx; responsive.css collapses)
   ------------------------------------------------------------ */
.awz-steps { list-style: none; margin: 0; padding: 0; display: flex; }
.awz-steps--horizontal { flex-direction: row; }
.awz-steps--horizontal > li { flex: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.awz-steps__marker { display: flex; align-items: center; gap: 12px; width: 100%; }
.awz-steps__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--text-muted); border: 1.5px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
}
.awz-steps > li:first-child .awz-steps__num { background: var(--navy-800); color: #fff; border-color: transparent; }
.awz-steps__connector { flex: 1; height: 2px; background: var(--border-subtle); border-radius: 2px; }
.awz-steps__body { padding-right: 16px; }
/* One font for the step title + description: same family and size, a light
   weight step for emphasis only (no size / colour jump). */
/* One-font steps: title and desc share family, size, weight and colour */
.awz-steps__title { font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-body); margin-bottom: 2px; }
.awz-steps__desc { font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--text-body); }
.steps-note {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: fit-content; max-width: 100%; margin: 36px auto 0;
  padding: 12px 24px; border-radius: var(--radius-pill);
  background: var(--surface-brand-tint);
  color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.steps-note .icon { width: 18px; height: 18px; flex: none; color: var(--brand-strong); }

/* ------------------------------------------------------------
   Journey — vertical numbered flow (5-step B2B "how it works")
   ------------------------------------------------------------ */
.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journey__item { position: relative; display: flex; gap: 18px; padding-bottom: 26px; }
.journey__item:last-child { padding-bottom: 0; }
.journey__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.journey__num {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--mint-100); color: var(--mint-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-body);
  border: 1.5px solid var(--mint-200);
}
.journey__item--paid .journey__num { background: var(--navy-800); color: #fff; border-color: transparent; }
.journey__line { flex: 1; width: 2px; margin: 6px 0; background: var(--border-subtle); border-radius: 2px; }
.journey__item:last-child .journey__line { display: none; }
.journey__body { padding-top: 7px; }
.journey__text { font-size: var(--fs-body-lg); color: var(--text-body); line-height: 1.5; }
.journey__text strong { color: var(--text-strong); font-weight: var(--fw-bold); }
.journey__tag {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 8px;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--mint-800);
  background: var(--mint-100); border-radius: var(--radius-pill); padding: 4px 11px;
}
.journey__tag .icon { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   Feature list (why it's safe money / why not an ad network)
   ------------------------------------------------------------ */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-xs);
}
.feature__ico {
  width: 46px; height: 46px; border-radius: var(--radius-md); margin-bottom: 16px;
  background: var(--mint-100); color: var(--mint-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature__ico .icon { width: 24px; height: 24px; }
.feature__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 8px; letter-spacing: var(--ls-tight); }
.feature__body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* ------------------------------------------------------------
   Dark section (trust / closing)
   ------------------------------------------------------------ */
.dark-section { position: relative; overflow: hidden; background: var(--navy-800); color: var(--text-on-ink); isolation: isolate; }
.dark-section__mark {
  position: absolute; right: -70px; bottom: -90px; height: 360px; width: auto;
  opacity: 0.08; z-index: -1; pointer-events: none;
}
.dark-section h2, .dark-section h3 { color: #fff; }
.dark-section .lead { color: rgba(255,255,255,0.74); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.trust-card { background: var(--navy-700); border-radius: var(--radius-lg); padding: 26px; }
.trust-card__ico {
  display: inline-flex; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: rgba(20,201,157,0.16); color: var(--mint-400);
  align-items: center; justify-content: center; margin-bottom: 16px;
}
.trust-card__ico .icon { width: 22px; height: 22px; }
.trust-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: #fff; font-size: var(--fs-h4); margin-bottom: 7px; }
.trust-card__body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: rgba(255,255,255,0.7); }

/* ------------------------------------------------------------
   Accordion / FAQ (mirrors DS Accordion.jsx)
   ------------------------------------------------------------ */
.awz-accordion { border-top: 1px solid var(--border-subtle); max-width: 760px; }
.awz-accordion__item { border-bottom: 1px solid var(--border-subtle); }
.awz-accordion__item:last-child { border-bottom: none; }
.awz-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 6px; border: none; background: transparent; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong);
}
.awz-accordion-trigger .chev { flex: none; width: 20px; height: 20px; color: var(--text-muted); transition: transform .22s var(--ease-out-quart); }
.awz-accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Height animation via grid-template-rows (no layout-property thrash). */
.awz-accordion__panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .28s var(--ease-out-quart);
}
.awz-accordion__panel.is-open { grid-template-rows: 1fr; }
.awz-accordion__panel-inner {
  overflow: hidden; min-height: 0;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 68ch;
}
/* Padding lives on the open state only — otherwise its 22px floors the
   collapsed grid track and the panel never fully closes. */
.awz-accordion__panel.is-open .awz-accordion__panel-inner { padding: 0 6px 22px; }
.awz-accordion__panel-inner a { color: var(--text-link); font-weight: var(--fw-semibold); }
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-link); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--text-link-hover); }
@media (prefers-reduced-motion: reduce) {
  .awz-accordion__panel { transition: none; }
}

/* ------------------------------------------------------------
   Business router (home) + generic CTA band
   ------------------------------------------------------------ */
.router__lead { max-width: 620px; margin-bottom: 28px; }
.router__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.router-card {
  border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--mint-200); background: var(--surface-brand-tint);
  transition: transform .16s ease, box-shadow .16s ease;
  text-decoration: none;
}
.router-card--gift { border-color: var(--coral-100); background: var(--surface-gift); }
.router-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.router-card__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 4px 0 10px; }
.router-card__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin-bottom: 22px; }

.cta-band { text-align: center; }
.cta-band .h-section { max-width: 20ch; margin: 0 auto 10px; }
.cta-band .lead { margin: 0 auto 26px; text-align: center; }

/* ------------------------------------------------------------
   About — facts list
   ------------------------------------------------------------ */
.facts {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.facts__row {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 18px 26px; border-bottom: 1px solid var(--border-subtle); align-items: baseline;
}
.facts__row:last-child { border-bottom: none; }
.facts__key { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.facts__val { font-size: var(--fs-body); color: var(--text-strong); font-weight: var(--fw-medium); }
.facts__val a { font-weight: var(--fw-semibold); }

.placeholder {
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--text-muted); background: var(--neutral-50);
  border: 1px dashed var(--border-default); border-radius: var(--radius-xs);
  padding: 1px 7px;
}
.site-footer .placeholder {
  color: rgba(255,255,255,0.62); background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}

.reach-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ------------------------------------------------------------
   Forms  (mirrors DS Input / Textarea / Select / RadioGroup / Checkbox)
   ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.field__req { color: var(--coral-600); }
.awz-inputwrap {
  display: flex; align-items: center; gap: 10px;
  height: var(--control-md); padding: 0 14px;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.awz-inputwrap--textarea { height: auto; padding: 12px 14px; align-items: stretch; }
.awz-inputwrap .lead-ico { width: 18px; height: 18px; color: var(--text-subtle); flex: none; }
.awz-inputwrap input, .awz-inputwrap textarea, .awz-inputwrap select {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-body);
}
.awz-inputwrap textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.awz-inputwrap select { cursor: pointer; -webkit-appearance: none; appearance: none; }
.field select::-ms-expand { display: none; }
.awz-inputwrap input::placeholder, .awz-inputwrap textarea::placeholder { color: var(--text-muted); }
.field--invalid .awz-inputwrap { border-color: var(--danger-500); }
.field__msg { font-size: var(--fs-caption); color: var(--text-muted); }
.field--invalid .field__msg { color: var(--fg-danger); }
.select-wrap { position: relative; }
.select-wrap .select-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }

/* Radio tiles */
.awz-radio-group { border: none; margin: 0; padding: 0; min-width: 0; }
.awz-radio-group legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.awz-radio-list { display: flex; flex-direction: column; gap: 10px; }
.awz-radio-tile {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color .15s ease, background .15s ease;
}
.awz-radio-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.awz-radio-dot {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease;
}
.awz-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .15s var(--ease-out-quart); }
.awz-radio-input:checked + .awz-radio-tile { border-color: var(--brand); background: var(--surface-brand-tint); }
.awz-radio-input:checked + .awz-radio-tile .awz-radio-dot { border-color: var(--brand); }
.awz-radio-input:checked + .awz-radio-tile .awz-radio-dot::after { transform: scale(1); }
.awz-radio-tile .t { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.awz-radio-tile .d { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-muted); }

/* Checkbox (mirrors DS Checkbox: hidden input + custom box) */
.awz-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.awz-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.awz-check-box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.awz-check-box .icon { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s var(--ease-out-quart); }
.awz-check-input:checked + .awz-check-box { background: var(--brand); border-color: var(--brand); color: var(--navy-900); }
.awz-check-input:checked + .awz-check-box .icon { opacity: 1; transform: scale(1); }
.awz-check__label { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-body); }
.awz-check__label a { font-weight: var(--fw-semibold); }
.field--invalid .awz-check-box { border-color: var(--danger-500); }

/* ------------------------------------------------------------
   Modal (mirrors DS Modal.jsx)
   ------------------------------------------------------------ */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,21,31,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out-quart), visibility .2s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  width: min(480px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  transform: translateY(12px) scale(.98); transition: transform .22s var(--ease-out-expo);
}
.modal.is-open .modal__panel { transform: none; }
.modal--sm .modal__panel { width: min(400px, 100%); }
.modal__head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--border-subtle);
}
.modal__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--ls-tight); }
.modal__desc { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--text-muted); }
.modal__close {
  flex: none; width: 34px; height: 34px; margin: -4px -6px 0 0; border: none; background: transparent;
  color: var(--text-muted); border-radius: var(--radius-md); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: var(--mint-50); color: var(--navy-800); }
.modal__close .icon { width: 20px; height: 20px; }
.modal__body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal__footer {
  flex: none; padding: 16px 22px; border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-grid .field--full { grid-column: 1 / -1; }

/* Success state inside modal */
.modal__success { text-align: center; padding: 14px 6px 6px; display: none; flex-direction: column; align-items: center; gap: 12px; }
.modal.is-success .modal__success { display: flex; }
.modal.is-success .modal__form { display: none; }
.modal.is-success .modal__footer { display: none; }
.modal__success .tick-badge {
  width: 56px; height: 56px; border-radius: 50%; background: var(--mint-100); color: var(--mint-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__success .tick-badge .icon { width: 30px; height: 30px; }
.modal__success h3 { font-family: var(--font-display); font-size: var(--fs-h3); }
.modal__success p { color: var(--text-muted); font-size: var(--fs-body-sm); }

/* Hidden spam honeypot: off-screen, untabbable, never seen by a human. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Inline submit error (send failure), aligned to the modal body padding. */
.modal__error {
  margin: 0 22px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--danger-100); color: var(--fg-danger);
  font-size: var(--fs-body-sm); line-height: var(--lh-body);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.66); }
.site-footer a { color: rgba(255,255,255,0.66); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer__top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px 32px;
  padding: clamp(36px, 4.5vw, 52px) 0 32px;
}
.footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.footer__nav a { font-size: var(--fs-body-sm); }
/* LinkedIn mark, recolored from the brand blue to the footer palette: a single
   currentColor path with the "in" knocked out via evenodd, so the footer shows
   through. The fill is a presentation attribute (currentColor), so it inherits the
   footer link color and can never fall back to SVG-default black. Mint on hover. */
.footer__social { display: inline-flex; border-radius: var(--radius-sm); transition: color .18s var(--ease-out-quart); }
.footer__social-icon { display: block; width: 26px; height: 26px; }
.site-footer .footer__social:hover,
.site-footer .footer__social:focus-visible { color: var(--mint-400); }
/* Right side of the footer top row: sales mailbox sits left of the LinkedIn icon,
   with a comfortable gap so the two don't crowd each other. */
.footer__right { display: inline-flex; align-items: center; gap: 26px; }
.footer__email { font-size: var(--fs-body-sm); }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.footer__legal-info { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: var(--fs-caption); color: rgba(255,255,255,0.5); }
.footer__legal-info .sep { color: rgba(255,255,255,0.28); }
.footer__legal-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: var(--fs-caption); }
.footer__lang { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-caption); }
.footer__lang a { font-weight: var(--fw-semibold); }
.footer__lang a[aria-current="true"] { color: #fff; }
.footer__lang .off { color: rgba(255,255,255,0.38); }

/* ------------------------------------------------------------
   How it works — two screens, two steps (consumer flow)
   Transparent phone renders float on the page; the pair reads
   left → right as a tap-through, captions sit below.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hiw-float { animation: hiw-float 6.5s ease-in-out infinite; }
  .hiw-float--b { animation-delay: -3.25s; }
}
@keyframes hiw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hiw-duo-wrap { text-align: center; }
.hiw-duo {
  position: relative; display: inline-flex; justify-content: center; align-items: center;
  --duo-w: clamp(152px, 31vw, 244px); padding: 20px 8px 28px;
}
.hiw-duo__glow {
  position: absolute; inset: 6% 0 12%; z-index: 0;
  background: radial-gradient(ellipse 66% 58% at 50% 46%, rgba(20, 201, 157, 0.24), rgba(255, 176, 32, 0.10) 55%, transparent 74%);
  filter: blur(34px);
}
.hiw-duo__phone { position: relative; width: var(--duo-w); }
.hiw-duo__phone--a { z-index: 1; transform: rotate(-5deg); margin-right: calc(var(--duo-w) * -0.17); }
.hiw-duo__phone--b { z-index: 2; transform: rotate(5deg) translateY(-8px); }
.hiw-duo__arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 52px; height: 52px; border-radius: var(--radius-circle); background: #fff;
  box-shadow: var(--shadow-lg); display: grid; place-items: center; color: var(--brand-strong);
}
.hiw-duo__arrow .icon { width: 24px; height: 24px; }

.hiw-steps {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  max-width: 760px; margin: clamp(28px, 5vw, 52px) auto 0;
}
.hiw-step__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hiw-step__num {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-circle); background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 18px; flex: none;
}
.hiw-step__title {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-strong); margin: 0; line-height: 1.15; text-wrap: balance;
}
.hiw-step__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin: 0; max-width: 38ch; }
@media (max-width: 640px) {
  /* Stack the two screens vertically; side-by-side gets cramped on phones.
     The arrow drops into the gap and points downward. */
  .hiw-duo { flex-direction: column; --duo-w: clamp(200px, 66vw, 272px); gap: 2px; padding: 8px 0 12px; }
  .hiw-duo__phone--a { transform: none; margin-right: 0; }
  .hiw-duo__phone--b { transform: none; }
  .hiw-duo__arrow { position: relative; left: auto; top: auto; transform: rotate(90deg); margin: -12px 0; z-index: 3; }
  .hiw-steps { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
}

/* ------------------------------------------------------------
   Scroll reveal (enhances an already-visible default; JS-gated)
   ------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out-quart), transform .6s var(--ease-out-quart);
}
.js .reveal[data-reveal-delay="1"].is-visible { transition-delay: .08s; }
.js .reveal[data-reveal-delay="2"].is-visible { transition-delay: .16s; }
.js .reveal[data-reveal-delay="3"].is-visible { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}
/* Failsafe: if JS is slow, errors, or the tab is hidden (transitions never fire),
   force everything visible so no section ever ships blank. */
.reveal-fallback .reveal { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { justify-content: flex-start; margin-top: 8px; }
  .feature-grid, .feature-grid--3 { grid-template-columns: 1fr 1fr; }
  .router__grid { grid-template-columns: 1fr; }
  .facts__row { grid-template-columns: 140px 1fr; }
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Mobile nav: primary links move into a sheet */
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
    padding: 12px var(--gutter) 20px; box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s var(--ease-out-quart), transform .18s var(--ease-out-quart), visibility .18s;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .primary-nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-link { padding: 14px 12px; font-size: var(--fs-body); border-radius: var(--radius-md); }
  .nav-actions { display: none; } /* lang lives in the sheet; an empty flex item here pushed the hamburger off the right edge */
  .nav-sheet-lang { display: block; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
}
@media (min-width: 721px) {
  .nav-sheet-lang { display: none; }
}
@media (max-width: 560px) {
  .feature-grid, .feature-grid--3 { grid-template-columns: 1fr; }
  .brand-lockup .wordmark { font-size: 20px; }
  .hero__ctarow { gap: 12px; }
}