/*!
 * Genesis Wallet homepage: production stylesheet.
 * Built by tools/build.mjs from 19 files in css/src/ (edit those, then rebuild).
 * Every rule is scoped to .gw-page; class names use the gw- prefix (BEM: gw-block__element--modifier).
 */

/* ---- 00-fonts.css ---- */

/* ==========================================================================
   Fonts: Lato 400 / 700 / 900, self-hosted (@fontsource/lato 5.3.0). SIL Open Font License: fonts/OFL.txt.
   Two subsets per weight, split by unicode-range, so a browser downloads the latin-ext file only when the text
   needs it (Polish, Turkish, and the Latin letters of other languages: ł, ş, ğ, İ, ı …).
   Lato has no Cyrillic, Greek, Arabic, Thai, Korean, Japanese or full Vietnamese: those languages use system
   fonts instead (04-languages.css).
   The live site loads Lato 300/400/700 from Google Fonts, but not the 900 weight the headings use.
   Paths are relative to this stylesheet. If you move the files, update the url()s.
   ========================================================================== */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 01-tokens.css ---- */

/* ==========================================================================
   Design tokens: every colour, type size, space, radius and motion value.
   They are set on .gw-page, not :root, so they cannot leak into (or be overridden by) the rest of the site.
   Sizes are in px on purpose: Bootstrap 3 sets html { font-size: 10px }, which would shrink every rem to
   62.5%. Browser zoom still scales px.
   ========================================================================== */

.gw-page {
  /* Brand greens (measured from the live site and its logo) */
  --gw-green-300: #63ff5b;          /* logo highlight */
  --gw-green-400: #4bda43;          /* logo wordmark green */
  --gw-green-500: #25c142;          /* live UI green */
  --gw-green-600: #1a9a34;
  --gw-green-700: #157a2a;          /* text-safe green on white (5.46:1) */
  --gw-green-glow: rgba(75, 218, 67, 0.45);

  /* Deep canvas */
  --gw-ink-950: #020604;
  --gw-ink-900: #050a07;
  --gw-ink-850: #07110b;
  --gw-ink-800: #0b1a11;
  --gw-ink-700: #12261a;
  --gw-ink-600: #1c3526;
  --gw-line: rgba(99, 255, 91, 0.14);
  --gw-line-strong: rgba(99, 255, 91, 0.32);

  /* Neutrals and text */
  --gw-white: #ffffff;
  --gw-paper: #f5f7f5;
  --gw-text-hi: #f2f7f3;            /* 17.6:1 on ink-900 */
  --gw-text-md: #b8c7bd;            /* 11.3:1 on ink-900 */
  --gw-text-lo: #8fa396;            /*  7.4:1 on ink-900 */
  --gw-text-dark: #0c140f;
  --gw-text-dark-md: #3c4a41;

  /* Semantic */
  --gw-bg: var(--gw-ink-900);
  --gw-surface: var(--gw-ink-850);
  --gw-surface-2: var(--gw-ink-800);
  --gw-accent: var(--gw-green-400);
  --gw-accent-ink: #031006;         /* text on green buttons (8.8:1 or better) */
  --gw-focus: #b6ff9e;

  /* Type */
  --gw-font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gw-fs-xs: 13px;
  --gw-fs-sm: 15px;
  --gw-fs-md: 17px;
  --gw-fs-lg: clamp(18px, 16.32px + 0.45vw, 21px);
  --gw-fs-xl: clamp(22.4px, 18.4px + 1.1vw, 32px);
  --gw-fs-2xl: clamp(30.4px, 22.4px + 2.2vw, 49.6px);
  --gw-fs-3xl: clamp(38.4px, 25.6px + 3.4vw, 68px);
  --gw-lh-tight: 1.05;
  --gw-lh-snug: 1.25;
  --gw-lh-body: 1.6;
  --gw-tracking-caps: 0.14em;

  /* Space (4px scale) and layout */
  --gw-space-1: 4px;
  --gw-space-2: 8px;
  --gw-space-3: 12px;
  --gw-space-4: 16px;
  --gw-space-5: 24px;
  --gw-space-6: 32px;
  --gw-space-7: 48px;
  --gw-space-8: 64px;
  --gw-space-9: 96px;
  --gw-section-y: clamp(64px, 48px + 5vw, 128px);
  --gw-gutter: clamp(16px, 8px + 2.5vw, 40px);
  --gw-max: 1200px;
  --gw-header-h: 72px;

  /* Shape */
  --gw-radius-sm: 6px;
  --gw-radius-md: 12px;
  --gw-radius-lg: 20px;
  --gw-radius-xl: 28px;
  --gw-radius-pill: 999px;
  --gw-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --gw-shadow-glow: 0 0 0 1px var(--gw-line-strong), 0 0 40px -8px var(--gw-green-glow);

  /* Motion */
  --gw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gw-dur-1: 160ms;
  --gw-dur-2: 320ms;
  --gw-dur-3: 700ms;
}

/* Theme scopes. Light sections flip the text, accent and line tokens; .gw-on-dark restores them inside a
   light section (e.g. a dark card). */
.gw-page .gw-on-light {
  --gw-text-hi: var(--gw-text-dark);
  --gw-text-md: var(--gw-text-dark-md);
  --gw-text-lo: #56645b;            /* 5.9:1 on paper */
  --gw-accent: var(--gw-green-700);
  --gw-line: rgba(12, 20, 15, 0.1);
  --gw-line-strong: rgba(21, 122, 42, 0.35);
  background: var(--gw-paper);
  color: var(--gw-text-md);
  color-scheme: light;
}

.gw-page .gw-on-dark {
  --gw-text-hi: #f2f7f3;
  --gw-text-md: #b8c7bd;
  --gw-text-lo: #8fa396;
  --gw-accent: var(--gw-green-400);
  --gw-line: rgba(99, 255, 91, 0.14);
  --gw-line-strong: rgba(99, 255, 91, 0.32);
  color: var(--gw-text-md);
  color-scheme: dark;
}

/* ---- 02-base.css ---- */

/* ==========================================================================
   Base: the page wrapper, a reset scoped to .gw-page, and shared layout utilities.

   How the scoping works. The live site's global CSS (Bootstrap 3, main.css, sigue.css, black.css …) styles bare
   elements: html { font-size: 10px }, section { float: left }, a:hover { color: #000 }, a:focus { outline: none },
   h1-h6 / p margins, etc. So:
     1. Everything here lives inside <div class="gw-page">.
     2. Element resets use `.gw-page :where(el)` (specificity 0,1,0). That beats any bare-element rule.
     3. Component rules are written `.gw-page .gw-block__element` (0,2,0). That beats the site's `a:hover` (0,1,1)
        and also beats the resets below, whatever order the stylesheets load in.
   ========================================================================== */

.gw-page {
  position: relative;
  background: var(--gw-bg);
  color: var(--gw-text-md);
  font-family: var(--gw-font-sans);
  font-size: var(--gw-fs-md);
  font-weight: 400;
  line-height: var(--gw-lh-body);
  letter-spacing: normal;
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  overflow-x: clip; /* decorative glows bleed past the edges; clip (not hidden) keeps the sticky header working */
}

.gw-page *,
.gw-page *::before,
.gw-page *::after {
  box-sizing: border-box;
}

/* --- Element reset (browser defaults, restated so the host site's globals cannot change them) --- */

.gw-page :where(section, header, footer, nav, main, article, figure, figcaption, details) {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}

.gw-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--gw-text-hi);
  font-family: inherit;
  font-weight: 900;
  line-height: var(--gw-lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.gw-page :where(h1) { font-size: 2em; }
.gw-page :where(h2) { font-size: 1.5em; }
.gw-page :where(h3) { font-size: 1.17em; }
.gw-page :where(h4) { font-size: 1em; }

.gw-page :where(p) {
  margin: 0;
  text-wrap: pretty;
}

.gw-page :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-page :where(img, svg, picture) {
  display: block;
  max-width: 100%;
  height: auto;
}

.gw-page :where(strong, b) {
  font-weight: bolder;
}

.gw-page :where(a) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Bootstrap and main.css restyle a:hover / a:focus (0,1,1); this is (0,2,0), and components override it. */
.gw-page :where(a):is(:hover, :focus, :active) {
  color: inherit;
  text-decoration: underline;
}

.gw-page :where(table) {
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}
.gw-page :where(caption) {
  padding: 0;
  color: inherit;
  text-align: center;
}
.gw-page :where(th, td) {
  padding: 1px;
  text-align: start;
  vertical-align: middle;
}
.gw-page :where(th) {
  font-weight: 700;
}

.gw-page :where(summary) {
  cursor: pointer;
}
.gw-page :where(summary)::-webkit-details-marker {
  display: none;
}

/* Focus: always visible for keyboard users (the live site removes it with a:focus { outline: none }). */
.gw-page :focus-visible {
  outline: 3px solid var(--gw-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.gw-page :focus:not(:focus-visible) {
  outline: none;
}

/* Smooth in-page scrolling on pages that contain this block only. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.gw-page) {
    scroll-behavior: smooth;
  }
}

/* Anchor targets land below the sticky header. */
.gw-page [id] {
  scroll-margin-top: calc(var(--gw-header-h) + 8px);
}

/* --- Layout utilities --- */

.gw-page .gw-container {
  width: min(100% - 2 * var(--gw-gutter), var(--gw-max));
  margin-inline: auto;
}

.gw-page .gw-section {
  position: relative;
  padding-block: var(--gw-section-y);
}

.gw-page .gw-section-head {
  display: grid;
  gap: var(--gw-space-4);
  max-width: 736px;
  margin-bottom: var(--gw-space-7);
}
.gw-page .gw-section-head h2 {
  font-size: var(--gw-fs-2xl);
}
.gw-page .gw-section-head p:not(.gw-eyebrow) {
  font-size: var(--gw-fs-lg);
}

.gw-page .gw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  color: var(--gw-accent);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-transform: uppercase;
}
.gw-page .gw-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px var(--gw-green-glow);
}

/* Hidden visually, still read by screen readers. */
.gw-page .gw-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gw-page .gw-skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: var(--gw-space-4);
  z-index: 100;
  padding: var(--gw-space-3) var(--gw-space-4);
  border-radius: var(--gw-radius-sm);
  background: var(--gw-accent);
  color: var(--gw-accent-ink);
  font-weight: 700;
  text-decoration: none;
}
.gw-page .gw-skip-link:focus {
  top: var(--gw-space-4);
}

/* --- Reveal on scroll ---
   js/genesis-home.js adds .gw-js to .gw-page, then .is-in to each [data-gw-reveal] as it scrolls into view.
   Without JavaScript, or with reduced motion, everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .gw-page.gw-js [data-gw-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--gw-dur-3) var(--gw-ease-out),
      transform var(--gw-dur-3) var(--gw-ease-out);
    transition-delay: var(--gw-stagger, 0ms); /* set per item: style="--gw-stagger: 70ms" */
  }
  .gw-page.gw-js [data-gw-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* --- Reduced motion: stop every animation and transition on the page --- */
@media (prefers-reduced-motion: reduce) {
  .gw-page *,
  .gw-page *::before,
  .gw-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 03-components.css ---- */

/* ==========================================================================
   Shared components used by several sections:
   icon · button · hexagon badge · check list · circuit field · app-store badges
   ========================================================================== */

/* --- Icon ---
   <svg class="gw-icon" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
     <use href="#gw-icon-check"></use>
   </svg>
   Symbols live in partials/00-icons.html. They are drawn as strokes in currentColor. */
.gw-page .gw-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Button (links styled as buttons) ---
   <a class="gw-btn gw-btn--primary gw-btn--lg" href="…"><span>Label</span></a>
   Variants: --primary (green), --ghost (outline), --light (white), --dark (for green bands). Sizes: default, --lg. */
.gw-page .gw-btn {
  --pad-y: 12.8px;
  --pad-x: 21.6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.8px;
  min-height: 44px;
  padding: var(--pad-y) var(--pad-x);
  border: 1px solid transparent;
  border-radius: var(--gw-radius-pill);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--gw-dur-1) var(--gw-ease-out),
    box-shadow var(--gw-dur-2) var(--gw-ease-out),
    background-color var(--gw-dur-2),
    color var(--gw-dur-2),
    border-color var(--gw-dur-2);
}
.gw-page .gw-btn:active {
  transform: translateY(0);
}
.gw-page .gw-btn--lg {
  --pad-y: 16px;
  --pad-x: 28px;
  font-size: var(--gw-fs-md);
}

/* Primary: near-black text on brand green (8.8:1 or better), with the site's green glow. */
.gw-page .gw-btn--primary {
  background: linear-gradient(180deg, var(--gw-green-300), var(--gw-green-400) 45%, var(--gw-green-500));
  color: var(--gw-accent-ink);
  box-shadow: 0 0 0 1px rgba(99, 255, 91, 0.5), 0 10px 30px -10px var(--gw-green-glow);
}
.gw-page .gw-btn--primary:hover {
  color: var(--gw-accent-ink);
  box-shadow: 0 0 0 1px var(--gw-green-300), 0 14px 40px -8px rgba(99, 255, 91, 0.6);
  transform: translateY(-1px);
}

.gw-page .gw-btn--ghost {
  border-color: var(--gw-line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--gw-text-hi);
}
.gw-page .gw-btn--ghost:hover {
  border-color: var(--gw-green-400);
  background: rgba(75, 218, 67, 0.08);
  color: var(--gw-text-hi);
}

.gw-page .gw-btn--light {
  border-color: var(--gw-white);
  background: var(--gw-white);
  color: var(--gw-text-dark);
}
.gw-page .gw-btn--light:hover {
  background: #e6f7e8;
  color: var(--gw-text-dark);
}

.gw-page .gw-btn--dark {
  border-color: var(--gw-ink-950);
  background: var(--gw-ink-950);
  color: var(--gw-white);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
.gw-page .gw-btn--dark:hover {
  background: var(--gw-ink-800);
  color: var(--gw-white);
  transform: translateY(-1px);
}

.gw-page .gw-btn__arrow {
  transition: transform var(--gw-dur-2) var(--gw-ease-out);
}
.gw-page .gw-btn:hover .gw-btn__arrow {
  transform: translateX(3px);
}

/* --- Hexagon badge (the site's hexagon icon frame, drawn in CSS) ---
   <span class="gw-hex" aria-hidden="true"><span class="gw-hex__in">icon or img</span></span>
   Sizes: --sm, default, --lg. Tone: default (glow), --solid. */
.gw-page .gw-hex {
  --d: 56px;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--d);
  height: calc(var(--d) * 1.1547);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--gw-green-300), var(--gw-green-600));
}
.gw-page .gw-hex--sm {
  --d: 44px;
}
.gw-page .gw-hex--lg {
  --d: 72px;
}
.gw-page .gw-hex__in {
  display: grid;
  place-items: center;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  clip-path: inherit;
  background: radial-gradient(circle at 50% 30%, #1d7a2c, #0b3a17 70%);
  color: var(--gw-white);
}
.gw-page .gw-hex--solid .gw-hex__in {
  background: linear-gradient(160deg, var(--gw-green-400), var(--gw-green-600));
  color: var(--gw-accent-ink);
}
.gw-page .gw-hex__in img {
  width: 62%;
  height: auto;
}

/* --- Check list (the brand's check-mark benefit list) ---
   <ul role="list" class="gw-checks"><li><span class="gw-checks__tick">icon</span><span>Text</span></li></ul>
   Tone: default (on dark), --light (on light backgrounds). */
.gw-page .gw-checks {
  display: grid;
  gap: 11.2px;
  color: var(--gw-text-md);
}
.gw-page .gw-checks > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.gw-page .gw-checks__tick {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 0.8px;
  border-radius: 50%;
  background: rgba(75, 218, 67, 0.12);
  color: var(--gw-green-300);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
}
.gw-page .gw-checks__tick .gw-icon {
  stroke-width: 3;
}
.gw-page .gw-checks--light {
  color: var(--gw-text-dark-md);
}
.gw-page .gw-checks--light .gw-checks__tick {
  background: rgba(21, 122, 42, 0.1);
  color: var(--gw-green-700);
  box-shadow: inset 0 0 0 1px rgba(21, 122, 42, 0.3);
}

/* --- Circuit field (decorative circuit-board traces with travelling light pulses) --- */
.gw-page .gw-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gw-page .gw-circuit__traces path {
  fill: none;
  stroke: rgba(99, 255, 91, 0.13);
  stroke-width: 1.5;
}
.gw-page .gw-circuit__nodes circle {
  fill: var(--gw-ink-900);
  stroke: rgba(99, 255, 91, 0.35);
  stroke-width: 1.5;
}
.gw-page .gw-circuit__pulses path {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 100;
  stroke-dashoffset: 108;
  filter: drop-shadow(0 0 4px var(--gw-green-300));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-circuit__pulses path {
    animation: gw-circuit-pulse var(--dur) linear var(--delay) infinite;
  }
}
@keyframes gw-circuit-pulse {
  0% { stroke-dashoffset: 108; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* --- App Store / Google Play badges --- */
.gw-page .gw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-3);
}
.gw-page .gw-badges a {
  display: block;
  border-radius: 10px;
  transition: transform var(--gw-dur-1) var(--gw-ease-out);
}
.gw-page .gw-badges a:hover {
  transform: translateY(-2px);
}
.gw-page .gw-badges img {
  width: auto;
  height: 48px;
}

/* ---- 04-languages.css ---- */

/* ==========================================================================
   Languages: fonts, spacing and right-to-left layout for the page's 16 languages.
   The .gw-page wrapper carries lang="…" and dir="…" (index.<code>.html, set by tools/i18n.mjs). English needs
   nothing from this file. Loads after the components and before the sections (tools/build.mjs).
   ========================================================================== */

/* --- Fonts ---
   Lato covers Latin (00-fonts.css). Other scripts use the device's own UI font for the whole page, so a line never
   mixes two typefaces. Vietnamese too: Lato has no Vietnamese stacked accents. */
.gw-page:is(:lang(ru), :lang(el), :lang(vi)) {
  --gw-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
.gw-page:lang(ar) {
  --gw-font-sans: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
}
.gw-page:lang(th) {
  --gw-font-sans: system-ui, -apple-system, 'Leelawadee UI', 'Noto Sans Thai', Thonburi, Tahoma, sans-serif;
}
.gw-page:lang(ko) {
  --gw-font-sans: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
.gw-page:lang(ja) {
  --gw-font-sans: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo,
    'Noto Sans JP', sans-serif;
}

/* --- Spacing ---
   Letter-spacing breaks Arabic joining and does not suit Thai, Korean or Japanese (no capitals there either).
   Thai and Arabic marks, and CJK glyphs, need taller lines in the big headings and body text. */
.gw-page:is(:lang(ar), :lang(th), :lang(ko), :lang(ja)) {
  --gw-tracking-caps: 0;
}
.gw-page:is(:lang(ar), :lang(th), :lang(ko), :lang(ja)) :is(h1, h2, h3, h4, .gw-btn, .gw-eyebrow) {
  letter-spacing: normal;
}
.gw-page:is(:lang(ar), :lang(th), :lang(vi)) {
  --gw-lh-tight: 1.3;
  --gw-lh-snug: 1.4;
  --gw-lh-body: 1.75;
}
.gw-page:is(:lang(ko), :lang(ja), :lang(el), :lang(ru)) {
  --gw-lh-tight: 1.2;
  --gw-lh-snug: 1.35;
}
/* Korean breaks lines between words, not inside them. */
.gw-page:lang(ko) {
  word-break: keep-all;
}
.gw-page:lang(ja) {
  line-break: strict;
  word-break: auto-phrase; /* breaks between phrases, not inside words (Chromium; elsewhere ignored) */
  overflow-wrap: anywhere; /* a phrase wider than its box may break inside */
}

/* --- Right to left (Arabic) ---
   The layout is mostly grid, flex and logical properties (inline-start / inline-end), and follows dir by itself.
   These are the rest; the sections' own right-to-left rules are in their files (search for [dir='rtl']). */
.gw-page[dir='rtl'] {
  --gw-to-end: left; /* for gradients drawn along the reading direction: linear-gradient(to var(--gw-to-end, right), …) */
}
/* Icons that point along the reading direction (the arrow) turn round. */
.gw-page[dir='rtl'] .gw-icon--dir {
  scale: -1 1;
}
/* Legal notices shown in their official English read left to right. */
.gw-page[dir='rtl'] [lang='en'] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- sections/01-header.css ---- */

/* ==========================================================================
   Section: site header (partials/01-header.html)
   Sticky bar: logo · desktop menus (Features, Knowledge Center, Contact Us) · Language, Sign In, Enroll.
   Below 1100px the menus and actions collapse into the phone menu (.gw-header__menu).
   ========================================================================== */

/* --- Bar --- */
.gw-page .gw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(2, 6, 4, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition:
    border-color var(--gw-dur-2),
    background-color var(--gw-dur-2);
}
.gw-page .gw-header.is-scrolled {
  border-bottom-color: var(--gw-line);
  background: rgba(2, 6, 4, 0.9);
}
/* The live site's green rule under the header */
.gw-page .gw-header::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gw-green-500) 20%, var(--gw-green-300) 50%, var(--gw-green-500) 80%, transparent);
  opacity: 0.55;
}

.gw-page .gw-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gw-space-5);
  min-height: var(--gw-header-h);
}

/* --- Logo --- */
.gw-page .gw-header__logo {
  display: block;
  flex: none;
  border-radius: 8px;
}
.gw-page .gw-header__logo img {
  width: 150px;
  height: auto;
}

/* --- Desktop menus --- */
.gw-page .gw-header__nav {
  margin-inline: auto;
}
.gw-page .gw-header__menus {
  display: flex;
  gap: var(--gw-space-1);
}

.gw-page .gw-dropdown {
  position: relative;
}
.gw-page .gw-dropdown__toggle,
.gw-page .gw-header__signin {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  min-height: 44px;
  padding-inline: 12.8px;
  border-radius: var(--gw-radius-pill);
  color: var(--gw-text-md);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition:
    color var(--gw-dur-1),
    background-color var(--gw-dur-1);
}
.gw-page .gw-dropdown__toggle:hover,
.gw-page .gw-dropdown[open] > .gw-dropdown__toggle,
.gw-page .gw-header__signin:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gw-text-hi);
  text-decoration: none;
}

/* Chevron turns when its menu is open (desktop and phone) */
.gw-page .gw-header__chevron {
  color: var(--gw-green-300);
  transition: rotate var(--gw-dur-2) var(--gw-ease-out);
}
.gw-page .gw-dropdown[open] .gw-header__chevron,
.gw-page .gw-header__group[open] .gw-header__chevron {
  rotate: 180deg;
}

/* Dropdown panel */
.gw-page .gw-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 2px;
  min-width: 316px;
  padding: var(--gw-space-2);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-lg);
  background: linear-gradient(180deg, #0b1a10, #06110a);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(75, 218, 67, 0.06);
  animation: gw-dropdown-in var(--gw-dur-2) var(--gw-ease-out);
}
.gw-page .gw-dropdown--end .gw-dropdown__panel {
  right: 0;
  left: auto;
  translate: none;
  min-width: 200px;
}
.gw-page[dir='rtl'] .gw-dropdown--end .gw-dropdown__panel {
  right: auto;
  left: 0;
}
@keyframes gw-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Menu links (desktop panels and phone groups) */
.gw-page .gw-header__link {
  display: flex;
  align-items: center;
  gap: var(--gw-space-3);
  min-height: 44px;
  padding: 6.4px 12px;
  border-radius: var(--gw-radius-md);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--gw-dur-1),
    color var(--gw-dur-1);
}
.gw-page .gw-header__link:hover {
  color: var(--gw-text-hi);
  text-decoration: none;
}
.gw-page .gw-dropdown__panel .gw-header__link:hover {
  background: rgba(75, 218, 67, 0.1);
}
/* 16 languages: two columns */
.gw-page .gw-dropdown--end .gw-dropdown__panel--lang {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 360px;
}
.gw-page .gw-dropdown__panel--lang .gw-header__link {
  justify-content: space-between;
}
.gw-page .gw-dropdown__current {
  color: var(--gw-green-300);
}

.gw-page .gw-header__link-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gw-radius-sm);
  background: rgba(75, 218, 67, 0.1);
  box-shadow: inset 0 0 0 1px var(--gw-line);
  color: var(--gw-green-300);
}

/* --- Actions --- */
.gw-page .gw-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gw-space-1);
}

/* --- Phone menu --- */
.gw-page .gw-header__menu {
  display: none;
  margin-inline-start: auto;
}
.gw-page .gw-header__menu-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-md);
  list-style: none;
  cursor: pointer;
}

/* Hamburger bars, turning into a cross when open */
.gw-page .gw-header__bars {
  display: grid;
  gap: 5px;
}
.gw-page .gw-header__bars i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--gw-text-hi);
  transition:
    transform var(--gw-dur-2) var(--gw-ease-out),
    opacity var(--gw-dur-1);
}
.gw-page .gw-header__menu[open] .gw-header__bars i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.gw-page .gw-header__menu[open] .gw-header__bars i:nth-child(2) {
  opacity: 0;
}
.gw-page .gw-header__menu[open] .gw-header__bars i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The sheet that drops below the bar (solid, so page text never shows through) */
.gw-page .gw-header__sheet {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  gap: var(--gw-space-5);
  max-height: calc(100vh - var(--gw-header-h));
  max-height: calc(100dvh - var(--gw-header-h));
  padding: var(--gw-space-4) var(--gw-gutter) var(--gw-space-6);
  overflow-y: auto;
  border-bottom: 1px solid var(--gw-line);
  background: #020604;
}

.gw-page .gw-header__groups {
  display: grid;
}
.gw-page .gw-header__group {
  border-bottom: 1px solid var(--gw-line);
}
.gw-page .gw-header__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.gw-page .gw-header__group-list {
  display: grid;
  gap: 2px;
  padding-bottom: var(--gw-space-3);
}
.gw-page .gw-header__group-list .gw-header__link {
  font-size: var(--gw-fs-md);
}

/* Language pills */
.gw-page .gw-header__lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-space-2);
  color: var(--gw-green-300);
}
.gw-page .gw-header__lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-pill);
  color: var(--gw-text-hi);
  font-weight: 700;
  text-decoration: none;
}
.gw-page .gw-header__lang a[aria-current] {
  border-color: var(--gw-green-500);
  background: rgba(75, 218, 67, 0.12);
}

.gw-page .gw-header__sheet-actions {
  display: grid;
  gap: var(--gw-space-3);
}

/* --- Responsive --- */
@media (max-width: 1240px) {
  .gw-page .gw-dropdown__toggle,
  .gw-page .gw-header__signin {
    padding-inline: 9.6px;
  }
}
@media (max-width: 1100px) {
  .gw-page .gw-header__nav,
  .gw-page .gw-header__actions {
    display: none;
  }
  .gw-page .gw-header__menu {
    display: block;
  }
  .gw-page .gw-header__logo img {
    width: 128px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gw-page .gw-dropdown__panel {
    animation: none;
  }
}

/* ---- sections/02-hero.css ---- */

/* ==========================================================================
   Section: hero (partials/02-hero.html)
   Copy on the left; on the right the whole phone, card, 3% APY panel and tiles, built in layers (.gw-hero__showcase).
   ========================================================================== */

.gw-page .gw-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 16px + 6vw, 104px) clamp(112px, 80px + 6vw, 160px);
  background: linear-gradient(90deg, #001915, #071f0d 50%, #001814);
}

/* --- Background: glow image, circuit traces, and a fade into the page colour --- */
.gw-page .gw-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.gw-page .gw-hero__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  opacity: 0.85;
}
.gw-page .gw-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 120%, rgba(52, 140, 48, 0.35), transparent 45%),
    linear-gradient(180deg, rgba(2, 6, 4, 0.55), transparent 30%, transparent 70%, var(--gw-bg));
}

/* --- Layout --- */
.gw-page .gw-hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(40px, 16px + 4vw, 64px);
}
@media (min-width: 960px) {
  .gw-page .gw-hero__grid {
    grid-template-columns: 1.02fr 1fr;
  }
}

/* --- Copy --- */
.gw-page .gw-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--gw-space-5);
  max-width: 608px;
}
.gw-page .gw-hero__title {
  font-size: var(--gw-fs-3xl);
  line-height: var(--gw-lh-tight);
  letter-spacing: -0.025em;
}
.gw-page .gw-hero__accent {
  display: block; /* its own line in every language, as in the English */
  background: linear-gradient(100deg, var(--gw-green-300), var(--gw-green-400) 45%, #b6ff9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(75, 218, 67, 0.35));
}
.gw-page .gw-hero__lede {
  max-width: 544px;
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
}
.gw-page .gw-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-3);
}

/* Proof points as pills */
.gw-page .gw-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2) var(--gw-space-3);
  padding-top: var(--gw-space-2);
}
.gw-page .gw-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  padding: 7.2px 13.6px 7.2px 9.6px;
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-pill);
  background: rgba(5, 10, 7, 0.55);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}
.gw-page .gw-hero__tick {
  color: var(--gw-green-300);
  stroke-width: 3;
}

/* --- Showcase stage (100 × 96 units, so a unit is 1% of the width both ways; the pointer sets --px / --py from -1 to 1) --- */
.gw-page .gw-hero__showcase {
  --px: 0;
  --py: 0;
  position: relative;
  justify-self: center;
  width: min(100%, 620px);
  aspect-ratio: 100 / 96;
  perspective: 1000px;
}
.gw-page .gw-hero__layer {
  transform: translate3d(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px), 0);
  transition: transform 600ms var(--gw-ease-out);
}

.gw-page .gw-hero__halo {
  position: absolute;
  top: 6%;
  right: 14%;
  bottom: 14%;
  left: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(75, 218, 67, 0.46), rgba(75, 218, 67, 0.1) 62%, transparent);
  filter: blur(28px);
}

/* Rings and platform */
.gw-page .gw-hero__hud,
.gw-page .gw-hero__traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gw-page .gw-hero__ring {
  fill: none;
  stroke: rgba(99, 255, 91, 0.26);
  stroke-width: 0.25;
  transform-origin: 50px 42.75px;
}
.gw-page .gw-hero__ring--a {
  stroke-dasharray: 0.6 2.2;
}
.gw-page .gw-hero__ring--b {
  stroke: rgba(99, 255, 91, 0.15);
  stroke-dasharray: 14 4 2 4;
}
.gw-page .gw-hero__floor {
  fill: none;
  stroke: rgba(99, 255, 91, 0.38);
  stroke-width: 0.3;
}
.gw-page .gw-hero__floor--in {
  fill: rgba(75, 218, 67, 0.2);
  stroke: rgba(99, 255, 91, 0.55);
}

/* Light rising from the platform behind the phone (bottom edge = the platform, 86.06% down) */
.gw-page .gw-hero__beam {
  position: absolute;
  top: 30%;
  right: 22%;
  bottom: 13.94%;
  left: 22%;
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  background: linear-gradient(0deg, rgba(99, 255, 91, 0.3), rgba(75, 218, 67, 0.06) 70%, transparent);
}

/* Circuit traces from the tiles to the phone */
.gw-page .gw-hero__trace {
  fill: none;
  stroke: rgba(99, 255, 91, 0.3);
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}
.gw-page .gw-hero__pulse {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.gw-page .gw-hero__node {
  fill: var(--gw-green-300);
}

/* --- Hexagon tiles: the collage's own icon tiles, windowed in a hexagon with a glowing rim --- */
.gw-page .gw-hero__tile {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 16%;
  margin: -9.24% 0 0 -8%;
}
.gw-page .gw-hero__tile-in {
  filter: drop-shadow(0 0 12px rgba(75, 218, 67, 0.55)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
.gw-page .gw-hero__tile-hex {
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  aspect-ratio: 0.866;
  padding: 3px;
  clip-path: var(--hex);
  background: linear-gradient(160deg, #b6ff9e, var(--gw-green-400) 40%, rgba(21, 122, 42, 0.9));
}
.gw-page .gw-hero__tile-hex img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--hex);
}

/* --- Phone: whole, standing on the platform --- */
.gw-page .gw-hero__device {
  position: absolute;
  top: 3%;
  left: 30.5%;
  width: 39%;
}
.gw-page .gw-hero__device-tilt {
  position: relative;
  filter: drop-shadow(0 0 24px rgba(75, 218, 67, 0.42)) drop-shadow(0 26px 26px rgba(0, 0, 0, 0.55));
  transform: rotateY(calc(var(--px) * 10deg)) rotateX(calc(var(--py) * -8deg));
  transition: transform 600ms var(--gw-ease-out);
}
.gw-page .gw-hero__device picture {
  display: block;
}
.gw-page .gw-hero__device-img {
  display: block;
  width: 100%;
  height: auto;
  /* its reflection below (Chromium and Safari; other browsers simply show none) */
  -webkit-box-reflect: below 2px linear-gradient(transparent 76%, rgba(255, 255, 255, 0.2));
}
/* Glass: a soft glare across the screen, cut to the phone's outline (mask-image is set in the markup, because a
   relative url() resolves against the stylesheet here and against the page there) */
.gw-page .gw-hero__glare {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 20%, transparent 20.2%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* --- Card: floating in front, lower left --- */
.gw-page .gw-hero__card {
  position: absolute;
  top: 67%;
  left: 0;
  width: 31%;
}
.gw-page .gw-hero__card-float {
  position: relative;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 18px rgba(75, 218, 67, 0.3));
  transform: rotateX(14deg) rotateY(-16deg) rotate(-12deg);
}
.gw-page .gw-hero__card-img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gw-page .gw-hero__card-rim {
  fill: none;
  stroke: rgba(99, 255, 91, 0.35);
  stroke-width: 1.5;
}
.gw-page .gw-hero__card-sheen {
  opacity: 0;
  transform: skewX(-18deg);
}
/* Contactless: waves from the card towards the phone */
.gw-page .gw-hero__waves {
  position: absolute;
  top: 2%;
  left: 96%;
  width: 16%;
  height: auto;
  overflow: visible;
}
.gw-page .gw-hero__waves path {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.55;
}

/* --- Glass panel, lower right: the 3% APY point, drawn large. Sized in cqi, so it scales with the panel. --- */
.gw-page .gw-hero__stat {
  position: absolute;
  top: 63%;
  left: 72%;
  width: 27%;
  container-type: inline-size;
}
.gw-page .gw-hero__stat-in {
  position: relative;
  display: grid;
  gap: 0.1em;
  padding: 10cqi 10cqi 34cqi;
  overflow: hidden;
  border: 1px solid rgba(99, 255, 91, 0.35);
  border-radius: 12cqi;
  background: linear-gradient(150deg, rgba(20, 60, 30, 0.72), rgba(5, 16, 9, 0.82));
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(75, 218, 67, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 9cqi;
}
.gw-page .gw-hero__stat-label {
  color: var(--gw-green-300);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* "3% APY" reads left to right in every language */
.gw-page .gw-hero__stat-value {
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 3.1em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.gw-page .gw-hero__stat-value small {
  margin-left: 0.25em;
  color: var(--gw-green-300);
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.gw-page .gw-hero__stat-sub {
  color: var(--gw-text-hi);
  font-size: 1em;
  line-height: 1.3;
}
.gw-page .gw-hero__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26cqi;
}
.gw-page .gw-hero__spark-area {
  fill: rgba(75, 218, 67, 0.16);
}
.gw-page .gw-hero__spark-line {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
/* Narrow panel (phones): the headline figure only, larger */
@container (max-width: 140px) {
  .gw-page .gw-hero__stat-in {
    padding-bottom: 30cqi;
    font-size: 11cqi;
  }
  .gw-page .gw-hero__stat-sub {
    display: none;
  }
}

/* --- Motion (only when the visitor allows it) --- */
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-hero__tile-in {
    animation:
      gw-hero-burst 1100ms var(--gw-ease-out) calc(250ms + var(--i) * 90ms) both,
      gw-hero-bob 6s ease-in-out calc(var(--i) * -1.1s) infinite alternate;
  }
  .gw-page .gw-hero__device {
    animation: gw-hero-rise 1000ms var(--gw-ease-out) both;
  }
  .gw-page .gw-hero__glare {
    animation: gw-hero-glare 9s ease-in-out 2s infinite;
  }
  .gw-page .gw-hero__card {
    animation: gw-hero-rise 1000ms var(--gw-ease-out) 120ms both;
  }
  .gw-page .gw-hero__card-float {
    animation: gw-hero-float 7s ease-in-out 1.2s infinite alternate;
  }
  .gw-page .gw-hero__card-sheen {
    animation: gw-hero-sheen 6s ease-in-out 1.4s infinite;
  }
  .gw-page .gw-hero__waves path {
    animation: gw-hero-wave 2.4s ease-out calc(1.2s + var(--w) * 0.22s) infinite;
  }
  .gw-page .gw-hero__stat {
    animation: gw-hero-rise 1000ms var(--gw-ease-out) 200ms both;
  }
  .gw-page .gw-hero__stat-in {
    animation: gw-hero-bob 7s ease-in-out -2s infinite alternate;
  }
  .gw-page .gw-hero__spark-line {
    stroke-dasharray: 100;
    animation: gw-hero-draw 1600ms var(--gw-ease-out) 700ms both;
  }
  .gw-page .gw-hero__halo,
  .gw-page .gw-hero__beam {
    animation: gw-hero-breathe 7s ease-in-out infinite alternate;
  }
  .gw-page .gw-hero__ring--a {
    animation: gw-hero-spin 60s linear infinite;
  }
  .gw-page .gw-hero__ring--b {
    animation: gw-hero-spin 90s linear infinite reverse;
  }
  .gw-page .gw-hero__pulse {
    animation: gw-hero-pulse 3.3s ease-in-out infinite;
  }
}

/* Tiles fly out of the phone to their places: the collage assembling itself */
@keyframes gw-hero-burst {
  from {
    opacity: 0;
    translate: var(--fx) var(--fy);
    scale: 0.3;
  }
  30% {
    opacity: 1;
  }
}
@keyframes gw-hero-sheen {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(-18deg);
  }
  35%,
  100% {
    opacity: 1;
    transform: translateX(900px) skewX(-18deg);
  }
}
@keyframes gw-hero-rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}
@keyframes gw-hero-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}
@keyframes gw-hero-float {
  from {
    transform: rotateX(14deg) rotateY(-16deg) rotate(-12deg) translateY(0);
  }
  to {
    transform: rotateX(8deg) rotateY(-8deg) rotate(-9deg) translateY(-10px);
  }
}
@keyframes gw-hero-wave {
  0% {
    opacity: 0;
    translate: -6px 0;
  }
  25% {
    opacity: 0.9;
  }
  70%,
  100% {
    opacity: 0;
    translate: 6px 0;
  }
}
@keyframes gw-hero-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes gw-hero-glare {
  0%,
  60% {
    background-position: 100% 0, 0 0;
  }
  85%,
  100% {
    background-position: 0 0, 0 0;
  }
}
@keyframes gw-hero-breathe {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
@keyframes gw-hero-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes gw-hero-pulse {
  0% {
    opacity: 0;
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    stroke-dasharray: 10 100;
    stroke-dashoffset: -90;
  }
  70%,
  100% {
    opacity: 0;
    stroke-dasharray: 0 100;
    stroke-dashoffset: -100;
  }
}

/* --- Responsive --- */
@media (max-width: 959px) {
  .gw-page .gw-hero__bg .gw-circuit {
    opacity: 0.45;
  }
}
@media (max-width: 480px) {
  .gw-page .gw-hero__cta {
    width: 100%;
  }
  .gw-page .gw-hero__cta .gw-btn {
    flex: 1 1 100%;
  }
  .gw-page .gw-hero__points li {
    font-size: var(--gw-fs-xs);
  }
}

/* ---- sections/03-features.css ---- */

/* ==========================================================================
   Section: feature grid (partials/03-features.html)
   A raised panel that overlaps the bottom of the hero: eight features, each with a hexagon icon (.gw-hex).
   ========================================================================== */

.gw-page .gw-features {
  position: relative;
  z-index: 2;
  margin-top: clamp(-96px, -64px - 3vw, -64px);
  padding-bottom: var(--gw-section-y);
}

/* --- Panel (a glass card with a green light running along its border) --- */
.gw-page .gw-features__panel {
  position: relative;
  padding: clamp(24px, 16px + 2vw, 44px);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-xl);
  background: linear-gradient(180deg, rgba(11, 26, 17, 0.92), rgba(5, 10, 7, 0.96));
  box-shadow: var(--gw-shadow-card), 0 0 60px -30px var(--gw-green-glow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.gw-page .gw-features__panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(99, 255, 91, 0.7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.gw-page .gw-features__title {
  margin-bottom: var(--gw-space-5);
  font-size: var(--gw-fs-xl);
}

/* --- Grid: 1 column, 2 from 640px, 4 from 1024px --- */
.gw-page .gw-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-space-4) var(--gw-space-5);
}
@media (min-width: 640px) {
  .gw-page .gw-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .gw-page .gw-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gw-page .gw-features__item {
  display: flex;
  align-items: center;
  gap: var(--gw-space-4);
  color: var(--gw-text-hi);
  font-weight: 700;
  line-height: var(--gw-lh-snug);
}

/* ---- sections/04-how-it-works.css ---- */

/* ==========================================================================
   Section: How it works (#gw-how)
   ========================================================================== */

/* --- Steps list --- */
.gw-page .gw-how__steps {
  position: relative;
  display: grid;
  gap: var(--gw-space-3);
}

/* --- One step (a white card on phones, open columns on wide screens) --- */
.gw-page .gw-how__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--gw-space-4);
  row-gap: var(--gw-space-3);
  align-content: start;
  padding: var(--gw-space-4);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-white);
  box-shadow: 0 18px 40px -30px rgba(3, 16, 6, 0.45);
}
.gw-page .gw-how__step .gw-hex {
  --d: 48px;
  grid-row: span 2;
}
.gw-page .gw-how__step h3 {
  align-self: end;
  font-size: var(--gw-fs-xl);
}
.gw-page .gw-how__step p {
  max-width: 30ch;
}

.gw-page .gw-how__num {
  font-size: 18.4px;
  font-weight: 900;
}

/* --- Call to action --- */
.gw-page .gw-how__cta {
  margin-top: var(--gw-space-7);
}

/* --- Wide screens: three columns joined by a glowing trace --- */
@media (min-width: 900px) {
  .gw-page .gw-how__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gw-space-5);
  }
  /* The trace runs through the middle of the hexagon badges (72px wide, 83.1px tall). */
  .gw-page .gw-how__steps::before {
    content: '';
    position: absolute;
    top: calc(72px * 1.1547 / 2);
    inset-inline: 36px calc(33.333% - 36px);
    height: 2px;
    background: linear-gradient(to var(--gw-to-end, right), var(--gw-green-500), rgba(37, 193, 66, 0.2));
    box-shadow: 0 0 12px rgba(37, 193, 66, 0.45);
  }
  .gw-page .gw-how__step {
    display: grid;
    grid-template-columns: none;
    gap: var(--gw-space-3);
    padding: 0 var(--gw-space-4) 0 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .gw-page .gw-how__step .gw-hex {
    --d: 72px;
    grid-row: auto;
  }
  .gw-page .gw-how__step h3 {
    align-self: auto;
    margin-top: var(--gw-space-2);
  }
  .gw-page .gw-how__num {
    font-size: 24px;
  }
}

/* ---- sections/05-send-money.css ---- */

/* ==========================================================================
   Section: Send money (#gw-send)
   ========================================================================== */

.gw-page .gw-send {
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(52, 140, 48, 0.28), transparent 45%),
    linear-gradient(90deg, #001915, #071f0d 50%, #001814);
}

/* --- Layout: copy beside the map --- */
.gw-page .gw-send__grid {
  display: grid;
  gap: var(--gw-space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .gw-page .gw-send__grid {
    grid-template-columns: 1fr 1.05fr;
  }
}

/* --- Copy --- */
.gw-page .gw-send__copy {
  display: grid;
  gap: var(--gw-space-5);
  justify-items: start;
}
.gw-page .gw-send__copy h2 {
  font-size: var(--gw-fs-2xl);
}
.gw-page .gw-send__lede {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
}

/* --- Map (the site's blue map, recoloured as a green duotone) --- */
.gw-page .gw-send__visual {
  position: relative;
  margin: 0;
}
.gw-page .gw-map {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-xl);
  background: #04160a;
  box-shadow: var(--gw-shadow-glow);
}
.gw-page .gw-map__img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.15) brightness(0.95);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.gw-page .gw-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(37, 193, 66, 0.55), rgba(3, 30, 12, 0.35));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- Decorative arcs and the light pulses that travel along them --- */
.gw-page .gw-map__arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.gw-page .gw-map__arc {
  fill: none;
  stroke: rgba(182, 255, 158, 0.35);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}
.gw-page .gw-map__pulse {
  fill: none;
  stroke: #d8ffc9;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 10 100;
  stroke-dashoffset: 110;
  filter: drop-shadow(0 0 4px #63ff5b);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-map__pulse {
    animation: gw-send-travel 4.8s ease-in-out var(--delay) infinite;
  }
}
@keyframes gw-send-travel {
  0% { stroke-dashoffset: 110; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* --- Stats, overlapping the bottom edge of the map --- */
.gw-page .gw-send__stats {
  position: absolute;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(-24px, -2vw, -16px);
  left: clamp(12px, 3vw, 24px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-3);
}
.gw-page .gw-send__stat {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--gw-space-3);
  max-width: 272px;
  padding: var(--gw-space-3) var(--gw-space-4);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-lg);
  background: rgba(5, 10, 7, 0.9);
  color: var(--gw-text-md);
  font-size: var(--gw-fs-sm);
  line-height: var(--gw-lh-snug);
}
.gw-page .gw-send__stat > span:last-child {
  text-wrap: balance;
}
/* direction: "60+" keeps its + on the right in Arabic */
.gw-page .gw-send__big {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--gw-green-300);
  font-size: var(--gw-fs-2xl);
  font-weight: 900;
  line-height: 1;
}
/* Number over caption, so each caption gets the box's full width */
@media (min-width: 481px) {
  .gw-page .gw-send__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gw-space-1);
  }
}
/* Phones: stats drop below the map */
@media (max-width: 480px) {
  .gw-page .gw-send__stats {
    position: static;
    margin-top: var(--gw-space-3);
  }
  .gw-page .gw-send__stat {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* --- Destinations, with the price of each --- */
.gw-page .gw-dest {
  display: grid;
  gap: var(--gw-space-5);
  margin-top: clamp(48px, 32px + 3vw, 72px);
  padding: clamp(20px, 12px + 1.5vw, 32px);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-xl);
  background: linear-gradient(180deg, rgba(8, 26, 14, 0.9), rgba(3, 14, 8, 0.9));
}
.gw-page .gw-dest__title {
  font-size: var(--gw-fs-xl);
}
.gw-page .gw-dest__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-space-3);
}
@media (min-width: 640px) {
  .gw-page .gw-dest__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 7 destinations: the first (free, to any Genesis user) spans two columns so the grid closes evenly */
  .gw-page .gw-dest__item:first-child {
    grid-column: span 2;
  }
}
@media (min-width: 1100px) {
  .gw-page .gw-dest__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gw-page .gw-dest__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gw-space-3);
  padding: var(--gw-space-3) var(--gw-space-4);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: rgba(255, 255, 255, 0.03);
}
.gw-page .gw-dest__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gw-radius-md);
  background: rgba(75, 218, 67, 0.1);
  color: var(--gw-green-300);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
}
.gw-page .gw-dest__text {
  display: grid;
  gap: 2.4px;
}
.gw-page .gw-dest__label {
  color: var(--gw-text-hi);
  font-weight: 700;
  line-height: var(--gw-lh-snug);
}
.gw-page .gw-dest__note {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
.gw-page .gw-dest__cost {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gw-page .gw-dest__item--free {
  border-color: rgba(75, 218, 67, 0.35);
  background: rgba(75, 218, 67, 0.07);
}
.gw-page .gw-dest__item--free .gw-dest__cost {
  color: var(--gw-green-300);
  letter-spacing: 0.06em;
}
/* Wide screens: tiles, with icon and price on top and the destination under them */
@media (min-width: 1100px) {
  .gw-page .gw-dest__item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--gw-space-3);
    padding: var(--gw-space-4);
  }
  .gw-page .gw-dest__icon {
    grid-row: 1;
  }
  .gw-page .gw-dest__cost {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }
  .gw-page .gw-dest__text {
    grid-column: 1 / -1;
  }
}

/* ---- sections/06-cards.css ---- */

/* ==========================================================================
   Section: Cards (#gw-cards): photo, card family, virtual gift cards (#gw-gift)
   ========================================================================== */

/* --- Intro: heading and photo --- */
.gw-page .gw-cards__top {
  display: grid;
  gap: var(--gw-space-6);
  align-items: center;
  margin-bottom: var(--gw-space-8);
}
@media (min-width: 960px) {
  .gw-page .gw-cards__top {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--gw-space-8);
  }
  .gw-page .gw-cards__top .gw-section-head {
    margin-bottom: 0;
  }
}

.gw-page .gw-cards__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 580px;
}
/* A green halo, offset behind the photo */
.gw-page .gw-cards__visual::before {
  content: '';
  position: absolute;
  inset: 8% -4% -6% 10%;
  z-index: 0;
  border-radius: var(--gw-radius-xl);
  background: radial-gradient(80% 90% at 70% 60%, rgba(75, 218, 67, 0.35), transparent 70%);
  filter: blur(24px);
}
.gw-page .gw-cards__photo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gw-radius-xl);
  box-shadow: 0 40px 70px -36px rgba(3, 16, 6, 0.65), 0 0 0 1px rgba(3, 16, 6, 0.06);
}

/* --- Card family panel --- */
.gw-page .gw-family {
  --trace: var(--gw-green-600);
  position: relative;
  padding: clamp(24px, 16px + 2.5vw, 48px);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-xl);
  background:
    radial-gradient(circle, rgba(3, 16, 6, 0.07) 1px, transparent 1.5px) 0 0 / 20px 20px,
    var(--gw-white);
  box-shadow: 0 30px 60px -44px rgba(3, 16, 6, 0.55);
}

/* The wallet at the top of the tree */
.gw-page .gw-family__source {
  display: flex;
  align-items: center;
  gap: var(--gw-space-4);
  width: fit-content;
  max-width: 544px;
  margin-inline: auto;
  padding: var(--gw-space-3) var(--gw-space-5) var(--gw-space-3) var(--gw-space-3);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-white);
  box-shadow: 0 16px 30px -24px rgba(3, 16, 6, 0.5);
}
.gw-page .gw-family__wallet {
  flex: none;
  width: 76px;
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(3, 16, 6, 0.3));
}
.gw-page .gw-family__name {
  color: var(--gw-accent);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-transform: uppercase;
}
.gw-page .gw-family__caption {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-md);
  line-height: var(--gw-lh-snug);
}
.gw-page .gw-family__caption strong {
  color: var(--gw-green-700);
}

/* Traces: a trunk down from the wallet, a bus across, a drop into each card */
.gw-page .gw-family__trunk {
  position: relative;
  display: grid;
  place-items: center;
  width: 2px;
  height: 72px;
  margin-inline: auto;
  background: var(--trace);
}
.gw-page .gw-family__free {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  padding: 4px 11.2px;
  border-radius: var(--gw-radius-pill);
  background: linear-gradient(160deg, var(--gw-green-400), var(--gw-green-600));
  box-shadow: 0 0 0 4px var(--gw-white);
  color: var(--gw-accent-ink);
  font-size: var(--gw-fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* The arrow points down, in either reading direction (overrides the right-to-left flip in 04-languages.css) */
.gw-page .gw-family__free .gw-icon {
  rotate: 90deg;
  scale: none;
}

.gw-page .gw-family__cards {
  position: relative;
  display: grid;
  gap: var(--gw-space-5);
}
.gw-page .gw-family__cards::before {
  content: '';
  position: absolute;
  background: var(--trace);
}

/* One card type */
.gw-page .gw-family__member {
  position: relative;
  display: grid;
  gap: var(--gw-space-1);
  align-content: start;
}
.gw-page .gw-family__member::before {
  content: '';
  position: absolute;
  background: var(--trace);
}
/* The node where the trace meets the card */
.gw-page .gw-family__member::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--trace);
  border-radius: 50%;
  background: var(--gw-white);
}
.gw-page .gw-family__member h3 {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
}
.gw-page .gw-family__art {
  display: grid;
  place-items: center;
  height: 150px;
  margin-bottom: var(--gw-space-3);
}

/* Wide: a bus across the top with a drop into each of three columns */
@media (min-width: 720px) {
  .gw-page .gw-family__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gw-space-6);
    padding-top: 40px;
    text-align: center;
  }
  .gw-page .gw-family__cards::before {
    top: 0;
    right: calc(100% / 6);
    left: calc(100% / 6);
    height: 2px;
  }
  .gw-page .gw-family__member::before {
    top: -40px;
    left: calc(50% - 1px);
    width: 2px;
    height: 34px;
  }
  .gw-page .gw-family__member::after {
    top: -10px;
    left: calc(50% - 5px);
  }
}

/* Phones: the bus becomes a rail down the start side (left; right to left: right), and each card branches off it */
@media (max-width: 719px) {
  .gw-page .gw-family__source {
    margin-inline: 0;
  }
  .gw-page .gw-family__trunk {
    height: 48px;
    margin-inline-start: 5px;
  }
  .gw-page .gw-family__free {
    position: absolute;
    inset-inline-start: 14px;
  }
  .gw-page .gw-family__cards {
    gap: 0;
  }
  .gw-page .gw-family__cards::before {
    display: none;
  }
  /* A rail segment per card, stopping at the last card's branch */
  .gw-page .gw-family__member {
    padding: 0 0 var(--gw-space-6);
    padding-inline-start: 34px;
    background: linear-gradient(var(--trace), var(--trace)) left 5px top 0 / 2px 100% no-repeat;
  }
  .gw-page[dir='rtl'] .gw-family__member {
    background-position: right 5px top 0;
  }
  .gw-page .gw-family__member:last-child {
    padding-bottom: 0;
    background-size: 2px 75px;
  }
  .gw-page .gw-family__member::before {
    top: 74px;
    inset-inline-start: 5px;
    width: 22px;
    height: 2px;
  }
  .gw-page .gw-family__member::after {
    top: 70px;
    inset-inline-start: 24px;
  }
  .gw-page .gw-family__art {
    justify-items: start;
    height: 140px;
  }
}

/* --- Card drawings (SVG) --- */
.gw-page .gw-card-art {
  display: block;
  width: auto;
  max-width: 100%;
  height: 150px;
  overflow: visible;
}
.gw-page .gw-card-art--physical {
  height: 132px;
  rotate: -4deg;
  filter: drop-shadow(0 18px 18px rgba(3, 16, 6, 0.4));
}
@media (max-width: 719px) {
  .gw-page .gw-card-art--physical {
    margin-inline-start: var(--gw-space-2);
  }
}
.gw-page .gw-card-art__rim {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2;
}

/* Virtual card in a browser window (wireframe) */
.gw-page .gw-card-art__win {
  fill: var(--gw-white);
  stroke: rgba(12, 20, 15, 0.14);
  stroke-width: 1.5;
}
.gw-page .gw-card-art__win-bar {
  fill: #eef3ef;
}
.gw-page .gw-card-art__win-dot {
  fill: rgba(12, 20, 15, 0.18);
}
.gw-page .gw-card-art__win-url {
  fill: var(--gw-white);
  stroke: rgba(12, 20, 15, 0.1);
}
.gw-page .gw-card-art__vcard {
  fill: var(--gw-ink-800);
  stroke: var(--gw-green-400);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.gw-page .gw-card-art__vcard-chip {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 1.5;
}
.gw-page .gw-card-art__vcard-nfc {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.gw-page .gw-card-art__vcard-num {
  fill: rgba(99, 255, 91, 0.6);
}
.gw-page .gw-card-art__vcard-tag {
  fill: currentColor; /* colour set via `color` so contrast tools read the painted colour */
  color: var(--gw-green-300);
  font: 800 9px var(--gw-font-sans);
  letter-spacing: 0.14em;
}
.gw-page .gw-card-art__cursor {
  fill: var(--gw-ink-950);
  stroke: var(--gw-white);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* Companion cards, fanned (wireframe) */
.gw-page .gw-card-art__ccard {
  fill: var(--gw-ink-800);
  stroke: var(--gw-green-400);
  stroke-width: 1.5;
}
.gw-page .gw-card-art__ccard-chip {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 1.3;
}
.gw-page .gw-card-art__ccard-who {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.gw-page .gw-card-art__ccard-line {
  fill: rgba(99, 255, 91, 0.35);
}
.gw-page .gw-card-art__ccard-tag {
  fill: currentColor;
  color: var(--gw-green-700);
  font: 800 10px var(--gw-font-sans);
  letter-spacing: 0.14em;
}

/* --- Suspend line under the family --- */
.gw-page .gw-family__suspend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gw-space-3);
  margin-top: var(--gw-space-7);
  padding-top: var(--gw-space-5);
  border-top: 1px dashed var(--gw-line-strong);
  color: var(--gw-text-hi);
  font-weight: 700;
}
.gw-page .gw-family__suspend .gw-icon {
  color: var(--gw-accent);
}

/* --- Motion: money flowing down the traces, the cursor tapping the virtual card --- */
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-family__trunk,
  .gw-page .gw-family__member::before {
    background: repeating-linear-gradient(180deg, var(--trace) 0 8px, rgba(21, 122, 42, 0.25) 8px 14px) 0 0 / 2px 28px;
    animation: gw-cards-flow 1.2s linear infinite;
  }
  /* Paused until the panel scrolls into view */
  .gw-page.gw-js .gw-family:not(.is-in) .gw-family__trunk,
  .gw-page.gw-js .gw-family:not(.is-in) .gw-family__member::before {
    animation-play-state: paused;
  }
  .gw-page .gw-card-art__cursor {
    transform-box: fill-box;
    transform-origin: 0 0;
    animation: gw-cards-tap 3.2s var(--gw-ease-out) infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 719px) {
  .gw-page .gw-family__member::before {
    background: repeating-linear-gradient(90deg, var(--trace) 0 8px, rgba(21, 122, 42, 0.25) 8px 14px) 0 0 / 28px 2px;
    animation-name: gw-cards-flow-x;
  }
}
@keyframes gw-cards-flow {
  to { background-position: 0 28px; }
}
@keyframes gw-cards-flow-x {
  to { background-position: 28px 0; }
}
@keyframes gw-cards-tap {
  0%, 60%, 100% { transform: none; }
  66% { transform: scale(0.8); }
  72% { transform: none; }
}

/* --- Virtual gift cards panel (#gw-gift) --- */
.gw-page .gw-gift {
  display: grid;
  gap: var(--gw-space-7);
  align-items: center;
  margin-top: var(--gw-space-6);
  padding: clamp(24px, 16px + 2.5vw, 48px);
  overflow: hidden;
  border-radius: var(--gw-radius-xl);
  background:
    radial-gradient(circle at 85% 30%, rgba(75, 218, 67, 0.28), transparent 45%),
    linear-gradient(160deg, var(--gw-ink-800), var(--gw-ink-950));
  box-shadow: 0 30px 60px -30px rgba(3, 16, 6, 0.6);
}
@media (min-width: 900px) {
  .gw-page .gw-gift {
    grid-template-columns: 1.1fr 1fr;
  }
}
.gw-page .gw-gift__copy {
  display: grid;
  gap: var(--gw-space-4);
  justify-items: start;
}
.gw-page .gw-gift h3 {
  font-size: var(--gw-fs-xl);
}

/* The stack of five cards; each is offset by its place in the stack (--i, 0 = front) */
.gw-page .gw-gift__art {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  height: 250px;
}
.gw-page .gw-gcard {
  --x: calc(var(--i) * 26px);
  --y: calc(var(--i) * -22px);
  position: absolute;
  bottom: 16px;
  left: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  column-gap: var(--gw-space-3);
  width: min(78%, 280px);
  aspect-ratio: 1.586;
  padding: var(--gw-space-4);
  border: 1px solid rgba(99, 255, 91, calc(0.5 - var(--i) * 0.08));
  border-radius: 14px;
  background: linear-gradient(150deg, rgb(24, 56, 32), var(--gw-ink-800));
  box-shadow: 0 20px 30px -18px rgba(0, 0, 0, 0.8);
  transform: translate(var(--x), var(--y));
}
.gw-page .gw-gcard--front {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(150deg, var(--gw-green-700), #0d3b17);
}
.gw-page .gw-gcard__icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 36px;
  height: 36px;
  border-radius: var(--gw-radius-md);
  background: rgba(2, 6, 4, 0.35);
  color: var(--gw-white);
}
.gw-page .gw-gcard__label {
  align-self: start;
  justify-self: start;
  min-width: 0;
  padding: 7.2px 0 0;
  margin-inline-end: 24px; /* clear of the card number */
  color: var(--gw-white);
  font-weight: 800;
  overflow-wrap: anywhere;
}
/* A long katakana compound may break inside, not run off the card */
.gw-page:lang(ja) .gw-gcard__label {
  word-break: normal;
}
.gw-page .gw-gcard__live {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: start;
  gap: var(--gw-space-2);
  color: var(--gw-white);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
}
.gw-page .gw-gcard__live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gw-green-300);
  box-shadow: 0 0 0 3px rgba(99, 255, 91, 0.3);
}
.gw-page .gw-gcard__n {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  color: var(--gw-white);
  font-size: var(--gw-fs-xs);
  font-weight: 800;
}

/* Phones: a tighter stack; the numbers are too close together to read, so they are hidden */
@media (max-width: 559px) {
  .gw-page .gw-gift__art .gw-gcard {
    --x: calc(var(--i) * 14px);
    --y: calc(var(--i) * -14px);
    bottom: 8px;
    left: 0;
    width: 80%;
  }
  .gw-page .gw-gcard__n {
    display: none;
  }
}

/* Motion: the stack fans out as the panel scrolls into view; the live dot pulses */
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-gcard {
    transition: transform 900ms var(--gw-ease-out);
    transition-delay: calc((4 - var(--i)) * 60ms);
  }
  .gw-page.gw-js .gw-gift:not(.is-in) .gw-gcard {
    transform: none;
  }
  .gw-page .gw-gcard__live i {
    animation: gw-cards-live 1.6s ease-in-out infinite;
  }
}
@keyframes gw-cards-live {
  50% { box-shadow: 0 0 0 7px rgba(99, 255, 91, 0); }
}

/* ---- sections/07-fees.css ---- */

/* ==========================================================================
   Section: Fees (#gw-fees)
   ========================================================================== */

.gw-page .gw-fees {
  background: var(--gw-bg);
}

/* --- Layout: heading and notes beside the table (the heading stays in view on wide screens) --- */
.gw-page .gw-fees__grid {
  display: grid;
  gap: var(--gw-space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .gw-page .gw-fees__grid {
    grid-template-columns: 0.8fr 1.2fr;
  }
  .gw-page .gw-fees__grid .gw-section-head {
    position: sticky;
    top: 96px;
  }
}

/* --- Notes under the heading (info icon + text) --- */
.gw-page .gw-section-head p.gw-fees__more {
  display: flex;
  align-items: flex-start;
  gap: var(--gw-space-2);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
.gw-page .gw-fees__more .gw-icon {
  margin-top: 3.2px;
  color: var(--gw-accent);
}
.gw-page .gw-fees__more a {
  color: var(--gw-green-300);
  text-underline-offset: 3px;
}

/* --- Table --- */
.gw-page .gw-fees__table-wrap {
  overflow: hidden;
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-xl);
  background: linear-gradient(180deg, var(--gw-ink-800), var(--gw-ink-850));
  box-shadow: var(--gw-shadow-card);
}
.gw-page .gw-fees__table {
  width: 100%;
  border-collapse: collapse;
}
.gw-page .gw-fees__table caption {
  padding: var(--gw-space-5) var(--gw-space-5) var(--gw-space-3);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
  font-weight: 900;
  text-align: start;
}
.gw-page .gw-fees__table thead th {
  padding: var(--gw-space-3) var(--gw-space-5);
  border-bottom: 1px solid var(--gw-line);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-align: start;
  text-transform: uppercase;
}
.gw-page .gw-fees__table thead th:last-child {
  text-align: end;
}

/* Rows: transaction (row header) at the start, cost at the end (right to left: mirrored) */
.gw-page .gw-fees__table tbody th,
.gw-page .gw-fees__table td {
  padding: var(--gw-space-4) var(--gw-space-5);
  border-bottom: 1px solid var(--gw-line);
  vertical-align: top;
}
.gw-page .gw-fees__table tbody th {
  color: var(--gw-text-md);
  font-weight: 400;
  text-align: start;
}
.gw-page .gw-fees__table td {
  color: var(--gw-text-hi);
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}
.gw-page .gw-fees__table tbody:last-child tr:last-child th,
.gw-page .gw-fees__table tbody:last-child tr:last-child td {
  border-bottom: 0;
}
.gw-page .gw-fees__table tbody tr {
  transition: background-color var(--gw-dur-2);
}
.gw-page .gw-fees__table tbody tr:hover {
  background: rgba(75, 218, 67, 0.05);
}
.gw-page .gw-fees__row--free td {
  color: var(--gw-green-300);
  letter-spacing: 0.06em;
}

/* Second row group ("Sending money and more"): its heading row keeps this size and spacing on phones too */
.gw-page .gw-fees__table .gw-fees__group-head th {
  padding: var(--gw-space-5) var(--gw-space-5) var(--gw-space-3);
  background: rgba(75, 218, 67, 0.05);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-md);
  font-weight: 900;
  text-align: start;
}

/* Phones: keep real table semantics; tighten and let the cost column wrap */
@media (max-width: 560px) {
  .gw-page .gw-fees__table caption {
    padding: var(--gw-space-4) var(--gw-space-4) var(--gw-space-2);
  }
  .gw-page .gw-fees__table thead th,
  .gw-page .gw-fees__table tbody th,
  .gw-page .gw-fees__table td {
    padding: var(--gw-space-3) var(--gw-space-4);
  }
  .gw-page .gw-fees__table tbody th {
    font-size: var(--gw-fs-sm);
  }
  .gw-page .gw-fees__table td {
    width: 36%;
    font-size: var(--gw-fs-sm);
    white-space: normal;
  }
}

/* ---- sections/08-more-in-app.css ---- */

/* ==========================================================================
   Section: More in the app (#gw-more)
   A bento of three cards: wireless, stocks / gold and silver, marketplace.
   ========================================================================== */

/* --- Bento grid: one column; from 1024px two wide cards on the left, the stocks card tall on the right --- */
.gw-page .gw-more__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-space-4);
}

@media (min-width: 1024px) {
  .gw-page .gw-more__bento {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'wireless wireless invest'
      'market market invest';
  }
  .gw-page .gw-more-card--wireless {
    grid-area: wireless;
  }
  .gw-page .gw-more-card--invest {
    grid-area: invest;
  }
  .gw-page .gw-more-card--market {
    grid-area: market;
  }
}

/* --- Card (shared) --- */
.gw-page .gw-more-card {
  --gw-card-pad: clamp(24px, 16px + 1.5vw, 32px);
  position: relative;
  display: grid;
  gap: var(--gw-space-4);
  align-content: start;
  padding: var(--gw-card-pad);
  border-radius: var(--gw-radius-xl);
  overflow: hidden;
}

.gw-page .gw-more-card.gw-on-dark {
  background:
    radial-gradient(circle at 100% 0%, rgba(75, 218, 67, 0.18), transparent 45%),
    linear-gradient(160deg, var(--gw-ink-800), var(--gw-ink-950));
  box-shadow: 0 30px 60px -34px rgba(3, 16, 6, 0.7);
}

.gw-page .gw-more-card--light {
  border: 1px solid var(--gw-line);
  background: var(--gw-white);
  box-shadow: 0 18px 40px -32px rgba(3, 16, 6, 0.5);
}

.gw-page .gw-more-card__body {
  display: grid;
  gap: var(--gw-space-4);
  justify-items: start;
}

.gw-page .gw-more-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gw-radius-md);
  background: linear-gradient(160deg, var(--gw-green-400), var(--gw-green-600));
  color: var(--gw-accent-ink);
}

.gw-page .gw-more-card__title {
  font-size: var(--gw-fs-xl);
}

/* --- Wireless card: copy beside the plans from 720px --- */
.gw-page .gw-more-card--wireless {
  align-items: center;
}

@media (min-width: 720px) {
  .gw-page .gw-more-card--wireless {
    grid-template-columns: 1fr 1fr;
  }
}

/* Plans: the live image's four plan cards, text set in HTML over its own photos. Sized to the panel with cqi
   (1cqi = 1% of the panel's width), so the text scales with it like the image did. --gw-plan: the plan's colour. */
.gw-page .gw-plans {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gw-radius-lg);
  background: #e6e8ec;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

.gw-page .gw-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.5cqi;
  background: #fff;
  color: #151530;
  text-align: center;
}

.gw-page .gw-plan__data,
.gw-page .gw-plan__price {
  color: var(--gw-plan);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.gw-page .gw-plan__data {
  font-size: 8.4cqi;
}

.gw-page .gw-plan__data small {
  font-size: 0.56em;
}

.gw-page .gw-plan__talk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  min-height: 2.6em;
  margin-top: 2.6cqi;
  padding: 0 0.5cqi 2.6cqi;
  border-bottom: 1px solid #c9ccd4;
  font-size: 3.3cqi;
  font-weight: 800;
  line-height: 1.2;
  hyphens: auto; /* long words (Unbegrenzt, Απεριόριστες) break at a syllable on phones */
  overflow-wrap: anywhere;
}

.gw-page .gw-plan__price {
  margin-top: 3cqi;
  font-size: 9.6cqi;
}

.gw-page .gw-plan__price small {
  margin-inline-end: 0.06em;
  font-size: 0.5em;
  vertical-align: 0.8em;
}

.gw-page .gw-plan__per {
  font-size: 3.2cqi;
  font-weight: 800;
}

.gw-page .gw-plan picture {
  margin-top: auto;
  width: 100%;
}

.gw-page .gw-plan__photo {
  display: block;
  width: 100%;
  height: auto;
  padding-top: 1.5cqi;
}

/* --- Marketplace card: copy beside the brands panel, which sits on a soft green glow and a dotted grid --- */
.gw-page .gw-more-card--market {
  isolation: isolate;
}

.gw-page .gw-more-card--market::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at var(--gw-glow-x, 78%) 50%, rgba(75, 218, 67, 0.16), transparent 70%),
    radial-gradient(circle, rgba(3, 16, 6, 0.09) 1px, transparent 1.5px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to var(--gw-to-end, right), transparent 20%, #000 65%);
  mask-image: linear-gradient(to var(--gw-to-end, right), transparent 20%, #000 65%);
}

/* Right to left: the glow follows the panel to the other side */
.gw-page[dir='rtl'] .gw-more-card--market {
  --gw-glow-x: 22%;
}

.gw-page .gw-more-card__art {
  position: relative;
}

.gw-page .gw-more-card__img--brands {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gw-radius-lg);
  box-shadow: 0 24px 48px -28px rgba(3, 16, 6, 0.55), 0 0 0 1px var(--gw-line);
}

@media (min-width: 720px) {
  .gw-page .gw-more-card--market {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  /* A gentle tilt, so the panel reads as an object on the card rather than a pasted screenshot. */
  .gw-page .gw-more-card__art {
    rotate: 1.5deg;
  }
}

/* --- Stocks, gold and silver card ---
   The illustration bleeds to the card's edges, lifts out of its top edge on desktop, lights the card in its own
   colours (a blurred copy, clipped to the card) and leans toward the pointer (--rx / --ry, set by the script). */
.gw-page .gw-more-card--invest {
  --rx: 0deg;
  --ry: 0deg;
  overflow: visible;
}

.gw-page .gw-more-card--invest > :not(.gw-invest__ambient) {
  position: relative;
  z-index: 1;
}

.gw-page .gw-invest__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.gw-page .gw-invest__ambient img {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 130%;
  max-width: none;
  height: auto;
  translate: -50% 0;
  filter: blur(56px) saturate(1.5);
  opacity: 0.5;
}

.gw-page .gw-invest {
  display: grid;
  gap: var(--gw-space-2);
  justify-items: center;
  margin: 0 calc(-1 * var(--gw-card-pad));
}

.gw-page .gw-invest__stage {
  position: relative;
  width: min(100%, 480px);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--gw-ease-out);
}

/* Contact shadow under the bars and the phone. */
.gw-page .gw-invest__stage::after {
  content: '';
  position: absolute;
  right: 10%;
  bottom: 2%;
  left: 12%;
  z-index: -1;
  height: 9%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
  filter: blur(6px);
}

.gw-page .gw-invest__img {
  display: block;
  width: 100%;
  height: auto;
}

.gw-page .gw-invest__note {
  padding-inline: var(--gw-card-pad);
  color: var(--gw-text-md);
  font-size: var(--gw-fs-xs);
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .gw-page .gw-invest {
    margin-top: calc(-1 * var(--gw-card-pad) - 72px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-invest__img {
    animation: gw-invest-float 7s ease-in-out infinite alternate;
  }

  /* Rises into place when the card is revealed. */
  .gw-page.gw-js .gw-more-card--invest .gw-invest__stage {
    transition:
      transform 0.5s var(--gw-ease-out),
      translate 0.9s var(--gw-ease-out) 0.15s,
      scale 0.9s var(--gw-ease-out) 0.15s,
      opacity 0.6s ease 0.15s;
  }
  .gw-page.gw-js .gw-more-card--invest:not(.is-in) .gw-invest__stage {
    translate: 0 36px;
    scale: 0.94;
    opacity: 0;
  }
}

@keyframes gw-invest-float {
  from { translate: 0 0; }
  to { translate: 0 -10px; }
}

/* --- Investment risk lines --- */
.gw-page .gw-risk {
  display: grid;
  gap: var(--gw-space-1);
  padding-top: var(--gw-space-3);
  border-top: 1px solid var(--gw-line);
  color: var(--gw-text-md);
  font-size: var(--gw-fs-sm);
}

.gw-page .gw-risk__terms {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
}

/* ---- sections/09-security.css ---- */

/* ==========================================================================
   Section: Security (#gw-security)
   Safeguards list + card-funds FDIC line, beside the animated "vault" (decorative).
   ========================================================================== */

/* --- Section --- */
.gw-page .gw-security {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 50%, rgba(52, 140, 48, 0.22), transparent 45%),
    var(--gw-ink-950);
}

.gw-page .gw-security__circuit {
  z-index: -1;
  opacity: 0.8;
}

.gw-page .gw-security__grid {
  display: grid;
  gap: var(--gw-space-7);
  align-items: center;
}

@media (min-width: 960px) {
  .gw-page .gw-security__grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* --- Safeguards list --- */
.gw-page .gw-security__items {
  display: grid;
  gap: var(--gw-space-4);
}

@media (min-width: 640px) {
  .gw-page .gw-security__items {
    grid-template-columns: 1fr 1fr;
  }
}

.gw-page .gw-security__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gw-space-4);
  padding: var(--gw-space-5);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: rgba(11, 26, 17, 0.75);
}

.gw-page .gw-security__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gw-radius-md);
  background: rgba(75, 218, 67, 0.12);
  color: var(--gw-green-300);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
}

.gw-page .gw-security__item-title {
  margin-bottom: var(--gw-space-1);
  font-size: var(--gw-fs-lg);
}

/* --- Card-funds FDIC line --- */
.gw-page .gw-security__note {
  display: flex;
  gap: var(--gw-space-3);
  align-items: center;
  margin-top: var(--gw-space-5);
  padding: var(--gw-space-4) var(--gw-space-5);
  border: 1px dashed var(--gw-line-strong);
  border-radius: var(--gw-radius-lg);
  color: var(--gw-text-hi);
  font-weight: 700;
}

.gw-page .gw-security__note .gw-icon {
  flex: none;
  color: var(--gw-green-300);
}

/* ==========================================================================
   The vault: three panes dealt down a column, joined by circuit traces
   ========================================================================== */

.gw-page .gw-vault {
  --gw-vault-amber: #f2b94b;
  --gw-vault-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  position: relative;
  display: grid;
  gap: var(--gw-space-5);
  justify-self: center;
  width: min(100%, 440px);
}

.gw-page .gw-vault__pane {
  position: relative;
  display: grid;
  gap: var(--gw-space-3);
  width: 88%;
  padding: var(--gw-space-4) var(--gw-space-5);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: linear-gradient(160deg, rgba(16, 38, 24, 0.95), rgba(7, 17, 11, 0.95));
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Staggered, like cards dealt down the column. */
.gw-page .gw-vault__pane--enc {
  justify-self: end;
}

/* Circuit trace from each pane down to the next, with a node where it lands. */
.gw-page .gw-vault__pane:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 54%;
  width: 2px;
  height: calc(var(--gw-space-5) + 2px);
  background: linear-gradient(var(--gw-line-strong), var(--gw-green-400));
}

.gw-page .gw-vault__pane:not(:first-child)::before {
  content: '';
  position: absolute;
  top: -5px;
  left: calc(54% - 4px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--gw-green-400);
  border-radius: 50%;
  background: var(--gw-ink-900);
}

/* The middle pane is shifted right by 12% of the column, so its trace moves left to stay on one line. */
.gw-page .gw-vault__pane.gw-vault__pane--enc::before {
  left: calc(54% - 12% / 0.88 - 4px);
}

.gw-page .gw-vault__pane.gw-vault__pane--enc::after {
  left: calc(54% - 12% / 0.88);
}

.gw-page .gw-vault__tag {
  display: flex;
  align-items: center;
  gap: var(--gw-space-2);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-transform: uppercase;
}

.gw-page .gw-vault__tag .gw-icon {
  color: var(--gw-green-300);
}

.gw-page .gw-vault__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
}

.gw-page .gw-vault__chips span {
  padding: 3.2px 9.6px;
  border-radius: var(--gw-radius-pill);
  background: rgba(75, 218, 67, 0.1);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
  color: var(--gw-green-300);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
}

/* --- 1 · PIN and fingerprint --- */
.gw-page .gw-vault__id {
  display: flex;
  align-items: center;
  gap: var(--gw-space-5);
}

.gw-page .gw-vault__scan {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  padding: 8px;
}

/* Face-scan frame corners. */
.gw-page .gw-vault__scan::before {
  --gw-vault-corner: var(--gw-green-400);
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 0 0 / 14px 2px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 0 0 / 2px 14px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 100% 0 / 14px 2px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 100% 0 / 2px 14px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 0 100% / 14px 2px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 0 100% / 2px 14px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 100% 100% / 14px 2px,
    linear-gradient(var(--gw-vault-corner), var(--gw-vault-corner)) 100% 100% / 2px 14px;
  background-repeat: no-repeat;
}

.gw-page .gw-vault__fp {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.gw-page .gw-vault__fp-ridges {
  stroke: rgba(143, 163, 150, 0.35);
}

.gw-page .gw-vault__fp-match {
  stroke: var(--gw-green-300);
  filter: drop-shadow(0 0 3px rgba(99, 255, 91, 0.6));
}

.gw-page .gw-vault__scan-bar {
  position: absolute;
  top: 8px;
  right: 4px;
  left: 4px;
  height: 2px;
  background: var(--gw-green-300);
  box-shadow: 0 0 10px 2px rgba(99, 255, 91, 0.55);
  opacity: 0;
}

.gw-page .gw-vault__scan-ok {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gw-green-400);
  box-shadow: 0 0 0 3px var(--gw-ink-850);
  color: var(--gw-accent-ink);
}

.gw-page .gw-vault__pin {
  display: grid;
  gap: var(--gw-space-2);
}

.gw-page .gw-vault__pin-label {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
}

.gw-page .gw-vault__pin-dots {
  display: flex;
  gap: 10px;
}

.gw-page .gw-vault__pin-dots i {
  width: 14px;
  height: 14px;
  border: 2px solid var(--gw-line-strong);
  border-radius: 50%;
  background: var(--gw-green-300);
  box-shadow: 0 0 8px rgba(99, 255, 91, 0.45);
}

/* --- 2 · Encryption: the plain line is wiped into ciphertext --- */
.gw-page .gw-vault__cipher {
  position: relative;
  display: grid;
  padding: var(--gw-space-3) var(--gw-space-4);
  overflow: hidden;
  border-radius: var(--gw-radius-md);
  background: rgba(2, 6, 4, 0.7);
  box-shadow: inset 0 0 0 1px var(--gw-line);
  font-family: var(--gw-vault-mono);
  font-size: var(--gw-fs-sm);
  white-space: nowrap;
}

.gw-page .gw-vault__cipher > span {
  grid-area: 1 / 1;
}

/* visibility as well as clip-path, so only the layer on screen counts as text (for screen readers and audits) */
.gw-page .gw-vault__cipher-plain {
  color: var(--gw-text-hi);
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
}

.gw-page .gw-vault__cipher-text {
  color: var(--gw-green-300);
  letter-spacing: 0.12em;
}

.gw-page .gw-vault__cipher-edge {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: var(--gw-green-300);
  box-shadow: 0 0 10px 2px rgba(99, 255, 91, 0.55);
  opacity: 0;
}

/* --- 3 · One-click suspend --- */
.gw-page .gw-vault__ctl {
  position: relative;
  /* The state and switch wrap together under the label when a language's words don't fit on one line */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-space-3);
  padding: var(--gw-space-3) var(--gw-space-4);
  border-radius: var(--gw-radius-md);
  background: rgba(2, 6, 4, 0.7);
  box-shadow: inset 0 0 0 1px var(--gw-line);
}

.gw-page .gw-vault__ctl-label {
  flex: 1 1 auto;
  color: var(--gw-text-hi);
  font-weight: 700;
}

.gw-page .gw-vault__ctl-end {
  display: flex;
  align-items: center;
  gap: var(--gw-space-3);
  margin-inline-start: auto;
}

.gw-page .gw-vault__ctl-state {
  display: grid;
  justify-items: end;
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

.gw-page .gw-vault__ctl-state > span {
  grid-area: 1 / 1;
}

.gw-page .gw-vault__ctl-on {
  color: var(--gw-green-300);
  opacity: 0;
}

.gw-page .gw-vault__ctl-off {
  color: var(--gw-vault-amber);
}

.gw-page .gw-vault__switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(242, 185, 75, 0.2);
  box-shadow: inset 0 0 0 1.5px var(--gw-vault-amber);
}

.gw-page .gw-vault__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gw-vault-amber);
}

.gw-page .gw-vault__cursor {
  position: absolute;
  right: -14px; /* on the switch, whichever side it is on */
  bottom: -28px;
  width: 16px;
  transform: translate(-14px, -2px);
  fill: var(--gw-white);
  stroke: var(--gw-ink-950);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* --- The loop ---
   One loop, 10s: PIN (4–16%) → fingerprint (16–32%) → encrypt (38–52%) → suspend (56–68%) → hold → reset (88–96%).
   Paused until the vault is revealed (.is-in). Under reduced motion the panes show their final state. */
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-vault :is(
    .gw-vault__pin-dots i,
    .gw-vault__fp-match,
    .gw-vault__scan-bar,
    .gw-vault__scan-ok,
    .gw-vault__cipher-plain,
    .gw-vault__cipher-text,
    .gw-vault__cipher-edge,
    .gw-vault__ctl-on,
    .gw-vault__ctl-off,
    .gw-vault__switch,
    .gw-vault__switch-knob,
    .gw-vault__cursor
  ),
  .gw-page .gw-vault__pane:not(:first-child)::before {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }

  .gw-page .gw-vault:not(.is-in) *,
  .gw-page .gw-vault:not(.is-in) .gw-vault__pane::before {
    animation-play-state: paused;
  }

  .gw-page .gw-vault .gw-vault__pin-dots i {
    animation-name: gw-vault-pin;
  }
  .gw-page .gw-vault .gw-vault__pin-dots i:nth-child(2) {
    animation-delay: 0.3s;
  }
  .gw-page .gw-vault .gw-vault__pin-dots i:nth-child(3) {
    animation-delay: 0.6s;
  }
  .gw-page .gw-vault .gw-vault__pin-dots i:nth-child(4) {
    animation-delay: 0.9s;
  }
  .gw-page .gw-vault .gw-vault__fp-match {
    animation-name: gw-vault-fp-match;
    animation-timing-function: linear;
  }
  .gw-page .gw-vault .gw-vault__scan-bar {
    animation-name: gw-vault-scan-bar;
    animation-timing-function: linear;
  }
  .gw-page .gw-vault .gw-vault__scan-ok {
    animation-name: gw-vault-pop;
  }
  .gw-page .gw-vault .gw-vault__pane--enc::before {
    animation-name: gw-vault-node-a;
  }
  .gw-page .gw-vault .gw-vault__cipher-plain {
    animation-name: gw-vault-wipe-plain;
    animation-timing-function: linear;
  }
  .gw-page .gw-vault .gw-vault__cipher-text {
    animation-name: gw-vault-wipe-cipher;
    animation-timing-function: linear;
  }
  .gw-page .gw-vault .gw-vault__cipher-edge {
    animation-name: gw-vault-wipe-edge;
    animation-timing-function: linear;
  }
  .gw-page .gw-vault .gw-vault__pane--ctl::before {
    animation-name: gw-vault-node-b;
  }
  .gw-page .gw-vault .gw-vault__cursor {
    animation-name: gw-vault-cursor;
  }
  .gw-page .gw-vault .gw-vault__switch {
    animation-name: gw-vault-switch;
  }
  .gw-page .gw-vault .gw-vault__switch-knob {
    animation-name: gw-vault-knob;
  }
  .gw-page .gw-vault .gw-vault__ctl-on {
    animation-name: gw-vault-state-on;
  }
  .gw-page .gw-vault .gw-vault__ctl-off {
    animation-name: gw-vault-state-off;
  }
}

@keyframes gw-vault-pin {
  0%, 4% { background: transparent; box-shadow: none; transform: scale(1); }
  6% { transform: scale(1.3); }
  8%, 88% { background: var(--gw-green-300); box-shadow: 0 0 8px rgba(99, 255, 91, 0.45); transform: scale(1); }
  92%, 100% { background: transparent; box-shadow: none; }
}

@keyframes gw-vault-fp-match {
  0%, 16% { clip-path: inset(0 0 100% 0); opacity: 1; }
  32%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes gw-vault-scan-bar {
  0%, 15% { top: 8px; opacity: 0; }
  16% { top: 8px; opacity: 1; }
  32% { top: calc(100% - 10px); opacity: 1; }
  34%, 100% { top: calc(100% - 10px); opacity: 0; }
}

@keyframes gw-vault-pop {
  0%, 32% { transform: scale(0); }
  35% { transform: scale(1.2); }
  37%, 88% { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}

@keyframes gw-vault-node-a {
  0%, 34% { background: var(--gw-ink-900); box-shadow: none; }
  36%, 88% { background: var(--gw-green-300); box-shadow: 0 0 10px rgba(99, 255, 91, 0.7); }
  92%, 100% { background: var(--gw-ink-900); box-shadow: none; }
}

@keyframes gw-vault-node-b {
  0%, 52% { background: var(--gw-ink-900); box-shadow: none; }
  54%, 88% { background: var(--gw-green-300); box-shadow: 0 0 10px rgba(99, 255, 91, 0.7); }
  92%, 100% { background: var(--gw-ink-900); box-shadow: none; }
}

@keyframes gw-vault-wipe-plain {
  0%, 38% { clip-path: inset(0 0 0 0); visibility: visible; }
  52%, 90% { clip-path: inset(0 0 0 100%); visibility: hidden; }
  96%, 100% { clip-path: inset(0 0 0 0); visibility: visible; }
}

@keyframes gw-vault-wipe-cipher {
  0%, 38% { clip-path: inset(0 100% 0 0); visibility: hidden; }
  52%, 90% { clip-path: inset(0 0 0 0); visibility: visible; }
  96%, 100% { clip-path: inset(0 100% 0 0); visibility: hidden; }
}

@keyframes gw-vault-wipe-edge {
  0%, 37% { left: 0; opacity: 0; }
  38% { left: 0; opacity: 1; }
  52% { left: calc(100% - 2px); opacity: 1; }
  54%, 100% { left: calc(100% - 2px); opacity: 0; }
}

@keyframes gw-vault-cursor {
  0%, 54% { transform: translate(-90px, 34px); opacity: 0; }
  57% { opacity: 1; }
  63% { transform: translate(-14px, -2px) scale(1); }
  64.5% { transform: translate(-14px, -2px) scale(0.85); }
  66%, 84% { transform: translate(-14px, -2px) scale(1); opacity: 1; }
  90%, 100% { transform: translate(20px, 30px); opacity: 0; }
}

@keyframes gw-vault-switch {
  0%, 64.5% { background: rgba(75, 218, 67, 0.2); box-shadow: inset 0 0 0 1.5px var(--gw-green-400); }
  66%, 90% { background: rgba(242, 185, 75, 0.2); box-shadow: inset 0 0 0 1.5px var(--gw-vault-amber); }
  94%, 100% { background: rgba(75, 218, 67, 0.2); box-shadow: inset 0 0 0 1.5px var(--gw-green-400); }
}

@keyframes gw-vault-knob {
  0%, 64.5% { transform: translateX(20px); background: var(--gw-green-300); }
  67%, 90% { transform: translateX(0); background: var(--gw-vault-amber); }
  94%, 100% { transform: translateX(20px); background: var(--gw-green-300); }
}

@keyframes gw-vault-state-on {
  0%, 65% { opacity: 1; }
  67%, 90% { opacity: 0; }
  94%, 100% { opacity: 1; }
}

@keyframes gw-vault-state-off {
  0%, 65% { opacity: 0; }
  67%, 90% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* ---- sections/10-app-download.css ---- */

/* ==========================================================================
   Section: Mobile apps (#gw-app)
   ========================================================================== */

.gw-page .gw-app__grid {
  display: grid;
  gap: var(--gw-space-7);
  align-items: center;
}

@media (min-width: 960px) {
  .gw-page .gw-app__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Visual: the app screens on a soft green glow --- */
.gw-page .gw-app__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 468px);
}

.gw-page .gw-app__glow {
  position: absolute;
  inset: 8% 4% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 193, 66, 0.45), transparent);
  filter: blur(24px);
}

.gw-page .gw-app__img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(3, 16, 6, 0.35));
}

/* --- Copy --- */
.gw-page .gw-app__copy {
  display: grid;
  gap: var(--gw-space-5);
  justify-items: start;
}

.gw-page .gw-app__title {
  font-size: var(--gw-fs-2xl);
}

.gw-page .gw-app__lede {
  font-size: var(--gw-fs-lg);
}

/* --- Device pills --- */
.gw-page .gw-app__devices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
}

.gw-page .gw-app__devices li {
  padding: 5.6px 13.6px;
  border-radius: var(--gw-radius-pill);
  background: rgba(21, 122, 42, 0.08);
  box-shadow: inset 0 0 0 1px rgba(21, 122, 42, 0.3);
  color: var(--gw-text-dark-md);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

/* ---- sections/11-referral.css ---- */

/* ==========================================================================
   Section: Referral Program (#gw-referral)
   ========================================================================== */

/* Help follows on the same dark background and brings its own top padding, so none is added here
   (otherwise the two paddings stack into a double gap under the panel). */
.gw-page .gw-referral {
  padding-bottom: 0;
  background: var(--gw-bg);
}

/* --- Panel: copy beside the invite drawing --- */
.gw-page .gw-referral__panel {
  position: relative;
  display: grid;
  gap: var(--gw-space-7);
  align-items: center;
  padding: clamp(24px, 12px + 3.5vw, 64px);
  border-radius: var(--gw-radius-xl);
  border: 1px solid var(--gw-line);
  background:
    radial-gradient(circle at 85% 20%, rgba(75, 218, 67, 0.16), transparent 45%),
    linear-gradient(160deg, var(--gw-ink-800), var(--gw-ink-850) 60%);
  box-shadow: var(--gw-shadow-card);
  overflow: hidden;
}

/* Faint dotted grid behind the drawing */
.gw-page .gw-referral__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(99, 255, 91, 0.12) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to var(--gw-to-end, right), transparent 35%, #000);
  mask-image: linear-gradient(to var(--gw-to-end, right), transparent 35%, #000);
  pointer-events: none;
}

@media (min-width: 960px) {
  .gw-page .gw-referral__panel {
    grid-template-columns: 1.1fr 1fr;
  }
}

.gw-page .gw-referral__copy {
  position: relative;
  display: grid;
  gap: var(--gw-space-5);
}

.gw-page .gw-referral__head {
  margin-bottom: 0;
}

/* --- Steps: numbered, joined by a thin trace --- */
.gw-page .gw-referral__steps {
  display: grid;
  gap: var(--gw-space-4);
}

.gw-page .gw-referral__steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gw-space-4);
  align-items: start;
}

.gw-page .gw-referral__steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 17px;
  top: 40px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(var(--gw-line-strong), transparent);
}

.gw-page .gw-referral__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gw-green-300), var(--gw-green-500));
  color: var(--gw-accent-ink);
  font-weight: 900;
  box-shadow: 0 0 18px -4px var(--gw-green-glow);
}

.gw-page .gw-referral__step-title {
  margin-top: 4.8px;
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-md);
}

.gw-page .gw-referral__step-text {
  margin-top: var(--gw-space-1);
}

/* --- Calls to action --- */
.gw-page .gw-referral__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-3);
}

/* --- The invite drawing (decorative). Labels sit in inner spans, clear of rounded corners and rings. --- */
.gw-page .gw-invite {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
}

@media (max-width: 959px) {
  .gw-page .gw-invite {
    order: 2;
  }
}

.gw-page .gw-invite__card {
  position: relative;
  display: grid;
  gap: var(--gw-space-3);
  justify-items: start;
  width: min(100%, 300px);
  margin-inline: auto;
  padding: var(--gw-space-5);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-surface);
  border: 1px solid var(--gw-line-strong);
  box-shadow: var(--gw-shadow-glow), var(--gw-shadow-card);
}

.gw-page .gw-invite__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  color: var(--gw-green-300);
  font-size: var(--gw-fs-sm);
  font-weight: 800;
}

.gw-page .gw-invite__by {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-transform: uppercase;
}

.gw-page .gw-invite__chips {
  display: flex;
  gap: var(--gw-space-2);
}

.gw-page .gw-invite__chips > span {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  padding: 5.6px 12.8px;
  border-radius: var(--gw-radius-pill);
  color: var(--gw-text-md);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
}

.gw-page .gw-invite__chips .is-on {
  color: var(--gw-text-hi);
  background: rgba(75, 218, 67, 0.16);
  box-shadow: inset 0 0 0 1px var(--gw-green-400);
}

.gw-page .gw-invite__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gw-space-2);
  width: 100%;
  padding: 10.4px 16px;
  border-radius: var(--gw-radius-pill);
  background: linear-gradient(180deg, var(--gw-green-300), var(--gw-green-500));
  color: var(--gw-accent-ink);
  font-size: var(--gw-fs-sm);
  font-weight: 800;
}

/* Traces from the card to the two groups; the SVG stretches to the width, strokes stay 2px. */
.gw-page .gw-invite__traces {
  display: block;
  width: 100%;
  max-width: none;
  height: 88px;
  overflow: visible;
}

.gw-page .gw-invite__trace {
  fill: none;
  stroke: var(--gw-line-strong);
  stroke-width: 2;
}

.gw-page .gw-invite__pulse {
  fill: none;
  stroke: var(--gw-green-300);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--gw-green-300));
}

.gw-page .gw-invite__groups {
  position: relative;
  height: 84px;
}

.gw-page .gw-invite__group {
  position: absolute;
  top: 0;
  display: grid;
  justify-items: center;
  gap: var(--gw-space-2);
  transform: translateX(-50%);
}

.gw-page .gw-invite__group--family {
  left: 20%;
}

.gw-page .gw-invite__group--friends {
  left: 80%;
}

.gw-page .gw-invite__avatars {
  display: flex;
}

.gw-page .gw-invite__avatars i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-inline-start: -9.6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--gw-ink-600), var(--gw-ink-800));
  color: var(--gw-green-300);
  box-shadow: 0 0 0 2px var(--gw-surface), inset 0 0 0 1px var(--gw-line-strong);
}

.gw-page .gw-invite__avatars i:first-child {
  margin-inline-start: 0;
}

.gw-page .gw-invite__label {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

/* Pulses travel down the traces once the drawing is revealed (.is-in). Hidden under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-invite__pulse {
    opacity: 1;
    animation: gw-invite-pulse 2.8s var(--gw-ease-out) infinite;
  }
  .gw-page .gw-invite__pulse--late {
    animation-delay: 1.4s;
  }
  .gw-page .gw-invite:not(.is-in) .gw-invite__pulse {
    animation-play-state: paused;
  }
}

@keyframes gw-invite-pulse {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* ---- sections/12-help.css ---- */

/* ==========================================================================
   Section: Help (#gw-help)
   ========================================================================== */

.gw-page .gw-help {
  background: var(--gw-bg);
}

/* --- Support hours, with a pulsing "open" dot --- */
.gw-page .gw-help__hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-space-3);
}

.gw-page .gw-help__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  padding: 4.8px 12.8px;
  border-radius: var(--gw-radius-pill);
  background: rgba(75, 218, 67, 0.1);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
  color: var(--gw-green-300);
  font-size: var(--gw-fs-sm);
  font-weight: 800;
  white-space: nowrap;
}

.gw-page .gw-help__badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gw-green-300);
  box-shadow: 0 0 0 3px rgba(99, 255, 91, 0.25);
}

@media (prefers-reduced-motion: no-preference) {
  .gw-page .gw-help__badge i {
    animation: gw-help-open 1.8s ease-in-out infinite;
  }
}

@keyframes gw-help-open {
  50% { box-shadow: 0 0 0 6px rgba(99, 255, 91, 0); }
}

/* --- Channels: three cards; on phones, compact rows with the icon on the left --- */
.gw-page .gw-help__channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gw-space-4);
}

@media (min-width: 760px) {
  .gw-page .gw-help__channels {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gw-page .gw-help__channel {
  display: grid;
  gap: var(--gw-space-1);
  height: 100%;
  padding: var(--gw-space-5);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-surface);
  text-decoration: none;
  transition:
    border-color var(--gw-dur-2),
    transform var(--gw-dur-1) var(--gw-ease-out),
    box-shadow var(--gw-dur-2);
}

.gw-page .gw-help__channel:hover {
  border-color: var(--gw-line-strong);
  box-shadow: var(--gw-shadow-glow);
  text-decoration: none;
  transform: translateY(-2px);
}

.gw-page .gw-help__channel-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--gw-space-3);
  border-radius: var(--gw-radius-md);
  background: rgba(75, 218, 67, 0.12);
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
  color: var(--gw-green-300);
}

@media (max-width: 759px) {
  .gw-page .gw-help__channels {
    gap: var(--gw-space-3);
  }
  .gw-page .gw-help__channel {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--gw-space-4);
    row-gap: 0;
    padding: var(--gw-space-4);
  }
  .gw-page .gw-help__channel-icon {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

.gw-page .gw-help__channel-label {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

.gw-page .gw-help__channel-value {
  color: var(--gw-text-hi);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---- sections/13-final-cta.css ---- */

/* ==========================================================================
   Section: Closing call to action (.gw-final), on the brand green
   ========================================================================== */

.gw-page .gw-final {
  position: relative;
  padding-block: clamp(48px, 32px + 4vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(120deg, var(--gw-green-300), var(--gw-green-400) 40%, var(--gw-green-500));
  color: var(--gw-accent-ink);
}

/* A faint grid, fading in from the left. */
.gw-page .gw-final::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(3, 16, 6, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 16, 6, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to var(--gw-to-end, right), transparent, #000 60%);
  mask-image: linear-gradient(to var(--gw-to-end, right), transparent, #000 60%);
}

.gw-page .gw-final__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gw-space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .gw-page .gw-final__inner {
    grid-template-columns: 1fr auto;
  }
}

.gw-page .gw-final__title {
  color: var(--gw-accent-ink);
  font-size: var(--gw-fs-2xl);
}

.gw-page .gw-final__lede {
  color: #0b2a12;
  font-size: var(--gw-fs-lg);
  font-weight: 700;
}

/* The light focus ring would vanish on green; use a dark one here. */
.gw-page .gw-final :focus-visible {
  outline-color: var(--gw-ink-950);
}

.gw-page .gw-final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-3);
}

/* ---- sections/14-footer.css ---- */

/* ==========================================================================
   Footer (.gw-footer)
   ========================================================================== */

.gw-page .gw-footer {
  padding-block: var(--gw-space-8) var(--gw-space-6);
  border-top: 1px solid var(--gw-line);
  background: var(--gw-ink-950);
  font-size: var(--gw-fs-sm);
}

/* --- Top row: logo · Get in touch; then the Language band, full width --- */
.gw-page .gw-footer__top {
  display: grid;
  gap: var(--gw-space-6);
  padding-bottom: var(--gw-space-6);
  border-bottom: 1px solid var(--gw-line);
}

@media (min-width: 800px) {
  .gw-page .gw-footer__top {
    grid-template-columns: 1fr 2.2fr;
    align-items: start;
  }
}

.gw-page .gw-footer__brand > img {
  width: 170px;
  height: auto;
}

.gw-page .gw-footer__col {
  display: grid;
  gap: var(--gw-space-3);
  align-content: start;
}

.gw-page .gw-footer__head {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: var(--gw-tracking-caps);
  text-transform: uppercase;
}

/* --- Contact links --- */
.gw-page .gw-footer__contact {
  display: grid;
  gap: var(--gw-space-2);
}

.gw-page .gw-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-3);
  min-height: 44px;
  color: var(--gw-text-hi);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.gw-page .gw-footer__contact a:hover {
  color: var(--gw-green-300);
  text-decoration: none;
}

.gw-page .gw-footer__contact a > .gw-icon {
  flex: none;
  color: var(--gw-green-300);
}

.gw-page .gw-footer__contact a > span {
  display: grid;
}

.gw-page .gw-footer__key {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 400;
}

/* --- Language: an even grid of plain links; the current one in green with a check --- */
.gw-page .gw-footer__langs {
  grid-column: 1 / -1;
  padding-top: var(--gw-space-5);
  border-top: 1px solid var(--gw-line);
}

.gw-page .gw-footer__langs .gw-footer__head {
  display: flex;
  align-items: center;
  gap: var(--gw-space-2);
}

.gw-page .gw-footer__langs .gw-footer__head > .gw-icon {
  flex: none;
  color: var(--gw-green-300);
}

.gw-page .gw-footer__lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gw-space-4);
}

@media (min-width: 600px) {
  .gw-page .gw-footer__lang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .gw-page .gw-footer__lang {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.gw-page .gw-footer__lang a {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-space-2);
  min-height: 44px;
  color: var(--gw-text-md);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.gw-page .gw-footer__lang a > .gw-icon {
  flex: none;
}

.gw-page .gw-footer__lang a:not([aria-current]) > .gw-icon {
  display: none;
}

.gw-page .gw-footer__lang a[aria-current] {
  color: var(--gw-green-300);
  font-weight: 700;
}

.gw-page .gw-footer__lang a:hover {
  color: var(--gw-text-hi);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Legal: Truth In Saving disclosure (collapsed) and the legal line --- */
.gw-page .gw-footer__legal {
  display: grid;
  gap: var(--gw-space-4);
  padding-top: var(--gw-space-6);
  color: var(--gw-text-lo);
}

.gw-page .gw-footer__fdic {
  color: var(--gw-text-md);
}

/* Translated pages only: "Some legal notices on this page are shown in English…" */
.gw-page .gw-footer__note {
  font-size: var(--gw-fs-xs);
}

.gw-page .gw-footer__tis {
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-md);
}

.gw-page .gw-footer__tis summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw-space-3);
  min-height: 44px;
  padding: var(--gw-space-2) var(--gw-space-4);
  color: var(--gw-text-hi);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.gw-page .gw-footer__tis summary::-webkit-details-marker {
  display: none;
}

.gw-page .gw-footer__tis summary::after {
  content: '+';
  color: var(--gw-green-300);
  font-size: 20px;
}

.gw-page .gw-footer__tis[open] summary::after {
  content: '\2212'; /* minus sign */
}

.gw-page .gw-footer__tis table {
  width: 100%;
  border-collapse: collapse;
}

.gw-page .gw-footer__tis th,
.gw-page .gw-footer__tis td {
  padding: var(--gw-space-3) var(--gw-space-4);
  border-top: 1px solid var(--gw-line);
  color: var(--gw-text-md);
  text-align: start;
  vertical-align: top;
}

.gw-page .gw-footer__tis th {
  width: 40%;
  font-weight: 700;
}

.gw-page .gw-footer__tis p {
  padding: var(--gw-space-3) var(--gw-space-4) var(--gw-space-4);
  border-top: 1px solid var(--gw-line);
}