/*!
 * Wallet enrollment page: production stylesheet (every brand).
 * Built by tools/build.mjs from 8 files in css/src/ (edit those, then rebuild).
 * Every rule is scoped to .gw-enroll / #gw-enroll; class names use the gw- prefix (BEM: gw-block__element--modifier).
 * Brand colours come from the root element's style attribute (BRANDING.md); the defaults below are neutral.
 */

/* ---- 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 (07-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.
   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.

   Colour comes in two layers:
     1. The brand palette (--gw-canvas, --gw-fill, --gw-ink, …): one custom property per role, worked out from a
        brand's two colours by tools/theme.mjs (or EnrollTheme.cs on the server) and set on the root element's
        style attribute, which overrides the defaults below. The build writes the defaults from
        DEFAULT_THEME in tools/theme.mjs: a neutral palette, so a page that forgets its theme shows no brand.
        Roles used see-through also come as "r g b" triplets: rgb(var(--gw-fill-rgb) / 0.16).
     2. Semantic tokens (--gw-text-hi, --gw-accent, --gw-line, --gw-focus, …) that components use. They point at
        palette roles, and the light scope at the end of this file re-points them for the white card.
   Components never name a hex value for anything the brand changes; see BRANDING.md.
   ========================================================================== */

.gw-enroll {
  /* Brand palette: defaults (generated, do not edit here; see DEFAULT_THEME in tools/theme.mjs) */
  --gw-canvas: #0e1116;
  --gw-canvas-sunk: #07090b;
  --gw-canvas-sunk-rgb: 7 9 11;
  --gw-canvas-raised: #10151f;
  --gw-canvas-panel: #131c2c;
  --gw-canvas-panel-rgb: 19 28 44;
  --gw-on-canvas: #f7fafe;
  --gw-on-canvas-muted: #afb2b6;
  --gw-on-canvas-subtle: #909398;
  --gw-accent-on-canvas: #5088f3;
  --gw-link-on-canvas: #7da7f6;
  --gw-link-on-canvas-rgb: 125 167 246;
  --gw-focus-on-canvas: #a8c4f9;
  --gw-fill: #3d7bf2;
  --gw-fill-rgb: 61 123 242;
  --gw-fill-top: #6495f5;
  --gw-fill-bottom: #3973e1;
  --gw-fill-bottom-rgb: 57 115 225;
  --gw-fill-edge: #2b56a9;
  --gw-fill-edge-rgb: 43 86 169;
  --gw-on-fill: #04070f;
  --gw-tint: #ecf2fe;
  --gw-accent-on-card: #346ad0;
  --gw-accent-on-card-rgb: 52 106 208;
  --gw-strong-on-card: #264d98;
  --gw-ink: #0e1015;
  --gw-ink-rgb: 14 16 21;
  --gw-ink-muted: #45484f;
  --gw-ink-subtle: #5c6067;
  --gw-paper: #f1f3f5;
  --gw-track: #d9dce1;
  --gw-disabled: #ebedef;
  --gw-rule: #c6c9ce;
  --gw-field-border: #73767d;
  --gw-sig-label: #71747a;
  --gw-pole-rgb: 255 255 255;
  --gw-shade: 1;
  --gw-scheme: dark;
  --gw-font-latin: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Semantic, on the page (the canvas) */
  --gw-bg: var(--gw-canvas);
  --gw-text-hi: var(--gw-on-canvas);
  --gw-text-md: var(--gw-on-canvas-muted);
  --gw-text-lo: var(--gw-on-canvas-subtle);
  --gw-accent: var(--gw-accent-on-canvas);
  --gw-line: rgb(var(--gw-link-on-canvas-rgb) / 0.14);
  --gw-line-strong: rgb(var(--gw-link-on-canvas-rgb) / 0.32);
  --gw-focus: var(--gw-focus-on-canvas);
  --gw-glow: rgb(var(--gw-fill-rgb) / 0.45);
  --gw-wash: rgb(var(--gw-pole-rgb) / 0.07);  /* hover wash on the page */

  /* Neutrals that do not change with the brand */
  --gw-white: #ffffff;

  /* Form (on the white card) */
  --gw-field-bg: #ffffff;
  --gw-field-border-hover: var(--gw-ink-muted);
  --gw-field-h: 52px;
  --gw-danger: #b3261e;             /* 6.5:1 on white */
  --gw-danger-bg: #fdf0ef;
  --gw-card-bg: #ffffff;

  /* Type */
  --gw-font-sans: var(--gw-font-latin);  /* the brand's font (theme.fontFamily); 07-languages.css swaps in system fonts for other scripts */
  --gw-fs-xs: 13px;
  --gw-fs-sm: 15px;
  --gw-fs-md: 17px;                 /* body, labels and fields: 16px or more also stops iOS zooming on focus */
  --gw-fs-lg: clamp(18px, 16.32px + 0.45vw, 21px);
  --gw-fs-xl: clamp(22.4px, 18.4px + 1.1vw, 28px);
  --gw-fs-2xl: clamp(30.4px, 22.4px + 2.2vw, 46px);
  --gw-lh-tight: 1.05;
  --gw-lh-snug: 1.25;
  --gw-lh-body: 1.55;
  --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-gutter: clamp(16px, 8px + 2.5vw, 40px);
  --gw-max: 1160px;

  /* Shape */
  --gw-radius-sm: 6px;
  --gw-radius-md: 12px;
  --gw-radius-lg: 20px;
  --gw-radius-pill: 999px;
  --gw-shadow-card: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 30px 80px -40px rgb(0 0 0 / calc(0.95 * var(--gw-shade))),
    0 0 0 1px rgb(var(--gw-link-on-canvas-rgb) / 0.18);

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

/* Light scope: the form card and the dialogs, which are white for every brand. Re-points the text, accent, line
   and focus tokens at the card roles. */
.gw-enroll .gw-card,
.gw-enroll .gw-modal__dialog {
  --gw-text-hi: var(--gw-ink);
  --gw-text-md: var(--gw-ink-muted);
  --gw-text-lo: var(--gw-ink-subtle);
  --gw-accent: var(--gw-accent-on-card);
  --gw-line: rgb(var(--gw-ink-rgb) / 0.12);
  --gw-line-strong: rgb(var(--gw-accent-on-card-rgb) / 0.35);
  --gw-focus: var(--gw-strong-on-card);
  color-scheme: light;
}

/* ---- 02-guard.css ---- */

/* ==========================================================================
   Guard: keeps the sign-up page's existing stylesheets from restyling the new form.

   The live onepagesignup.aspx loads Bootstrap 3, main.css, global-new-ui.css, black.css, input_override.css,
   restallchannel.css and three inline <style> blocks. Several of them style bare elements with !important, e.g.
     input, select, textarea { width: 100% !important; border: 1px solid #ccc !important; font-size: 12px !important }
     input[type="text"], select { color: #000 !important }      select { background-image: none !important }
     input:focus { border: … !important; box-shadow: … !important }      input { box-shadow: none !important }
     input[type=checkbox] { width: 20px !important; height: 20px !important }      label { font-size: 14px !important }
     button { background: #1c55e4 !important; color: #fff !important; padding: 10px 25px !important;
              border-radius: 20px !important; height: 40px !important; font-size: 14px !important; … }
     a { color: #000 !important }   a:link, a:visited { color: var(--primary) !important }
     a:hover, a:active, a:focus, a:visited { text-decoration: none !important }
   (scripts/fixtures/live-signup-css/ has every file, as fetched on 2026-09-25.)

   An !important rule can only be beaten by another !important rule of higher specificity. So:
     1. Components never fight those properties directly. They set --gw-* custom properties instead
        (e.g. .gw-btn--primary { --gw-b-bg: …; --gw-b-fg: … }).
     2. The few rules below apply those properties with !important, under #gw-enroll (specificity 1,0,1 or
        more), which beats every class-, attribute- and element-based rule on the site.
   If your site adds a stylesheet with an id-based !important rule for inputs, buttons or links, extend it here.
   ========================================================================== */

/* --- Buttons (and links styled as buttons) --- */
#gw-enroll :is(button, .gw-btn) {
  width: var(--gw-b-w, auto) !important;
  height: var(--gw-b-h, auto) !important;
  padding: var(--gw-b-pad, 0) !important;
  border: var(--gw-b-border, 0) !important;
  border-radius: var(--gw-b-radius, 0) !important;
  background: var(--gw-b-bg, transparent) !important;
  color: var(--gw-b-fg, inherit) !important;
  font-size: var(--gw-b-fs, inherit) !important;
  font-weight: var(--gw-b-fw, inherit) !important;
  text-decoration: var(--gw-b-deco, none) !important;
  text-indent: 0 !important;
  box-shadow: var(--gw-b-shadow, none) !important;
  opacity: var(--gw-b-op, 1) !important;
  filter: none;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
}

/* --- Fields --- */
#gw-enroll :is(input, select, textarea) {
  width: var(--gw-f-w, 100%) !important;
  max-width: 100% !important;
  height: var(--gw-f-h, auto) !important;
  margin: 0;
  padding: var(--gw-f-pad, 0);
  border: var(--gw-f-border, 0) !important;
  border-radius: var(--gw-f-radius, 0) !important;
  background-color: var(--gw-f-bg, transparent) !important;
  background-image: var(--gw-f-img, none) !important;
  color: var(--gw-f-fg, inherit) !important;
  font-family: inherit;
  font-size: var(--gw-f-fs, inherit) !important;
  font-weight: var(--gw-f-fw, inherit) !important;
  line-height: normal;
  box-shadow: var(--gw-f-shadow, none) !important;
  outline: var(--gw-f-outline, none);
  outline-offset: 0;
}
#gw-enroll :is(input, select, textarea):focus {
  border: var(--gw-f-border-focus, var(--gw-f-border, 0)) !important;
  box-shadow: var(--gw-f-shadow-focus, var(--gw-f-shadow, none)) !important;
}
#gw-enroll :is(input, textarea)::placeholder {
  color: var(--gw-text-lo) !important;
  opacity: 1;
}

/* --- Labels --- */
#gw-enroll label {
  font-size: var(--gw-l-fs, inherit) !important;
}

/* --- Links ---
   Default: the surrounding text colour, underlined. Blocks set --gw-link / --gw-link-deco for their links. */
#gw-enroll a,
#gw-enroll a:is(:link, :visited, :hover, :active, :focus) {
  color: var(--gw-link, currentColor) !important;
  text-decoration: var(--gw-link-deco, underline) !important;
}

/* --- Things the host hides or shows by class --- */
#gw-enroll [hidden],
#gw-enroll .ng-hide {
  display: none !important;
}

/* --- Dialogs ---
   The page's loader script centres every Bootstrap modal by writing an inline `top` 200 ms after it opens, and the
   site sets `.modal.fade.in { top: 10% !important }`. These dialogs position themselves, so that is cancelled. */
#gw-enroll .gw-modal {
  top: 0 !important;
}

/* ---- 03-base.css ---- */

/* ==========================================================================
   Base: the page wrapper, a reset scoped to .gw-enroll, and shared pieces (icon, button, link-button, eyebrow,
   visually-hidden, skip link, focus, reduced motion).

   Scoping works as in the homepage handoff:
     1. Everything lives inside <div class="gw-enroll" id="gw-enroll">.
     2. Element resets use `.gw-enroll :where(el)` (0,1,0), which beats the site's bare-element rules.
     3. Components are `.gw-enroll .gw-block__element` (0,2,0).
     4. The properties the site forces with !important go through 02-guard.css.
   ========================================================================== */

.gw-enroll {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 12% -8%, rgb(var(--gw-fill-rgb) / 0.16), transparent 60%),
    radial-gradient(700px 480px at 100% 0%, rgb(var(--gw-fill-bottom-rgb) / 0.1), transparent 65%),
    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: var(--gw-scheme);
  overflow-x: clip;
}

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

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

/* The site sets font-family, font-size, font-weight and colour on div, td, input, button …, and p { font: 13px/18px }. */
.gw-enroll :where(div, span, p, li, dt, dd, label, fieldset, legend, small, em, ol, ul, dl, input, select, textarea, button) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.gw-enroll :where(section, header, footer, nav, main, aside, article, details, fieldset) {
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gw-enroll :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--gw-text-hi);
  font-family: inherit;
  font-weight: 900;
  line-height: var(--gw-lh-snug);
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}

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

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

.gw-enroll :where(label) {
  display: block;
  max-width: none;
  margin: 0;
  font-weight: inherit;
}

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

.gw-enroll :where(strong, b) {
  font-weight: 700;
}

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

.gw-enroll :where(button) {
  display: inline-flex;
  align-items: center;
  margin: 0;
  text-align: inherit;
  white-space: normal;
  -webkit-appearance: none;
  appearance: none;
}

.gw-enroll :where(a) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* Focus: always visible for keyboard users (the site removes it with a:focus / input:focus { outline: none }). */
.gw-enroll :focus-visible {
  outline: 3px solid var(--gw-focus);
  outline-offset: 3px;
}
.gw-enroll :focus:not(:focus-visible) {
  outline: none;
}
/* Headings and panels that receive focus from script: no ring for mouse users, a ring for keyboard users. */
.gw-enroll [tabindex='-1']:focus {
  outline: none;
}
.gw-enroll [tabindex='-1']:focus-visible {
  outline: 3px solid var(--gw-focus);
}

.gw-enroll [id] {
  scroll-margin-top: 24px;
}

/* --- Icon ---
   <svg class="gw-icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="#gw-i-check"></use></svg>
   Symbols live at the top of the partial. They are drawn as strokes in currentColor. */
.gw-enroll .gw-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Button ---
   <button type="button" class="gw-btn gw-btn--primary"><span>Label</span></button>
   Variants: --primary (brand fill), --ghost (outline). Sizes via the tokens below. */
.gw-enroll .gw-btn {
  --gw-b-pad: 14px 24px;
  --gw-b-h: auto;
  --gw-b-radius: var(--gw-radius-pill);
  --gw-b-fs: var(--gw-fs-md);
  --gw-b-fw: 700;
  --gw-b-border: 1px solid transparent;
  --gw-link: var(--gw-b-fg);
  --gw-link-deco: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  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),
    border-color var(--gw-dur-2);
}
.gw-enroll .gw-btn:active {
  transform: translateY(1px);
}

/* Primary: the brand fill with its text colour (4.5:1 or better on every stop of the gradient) and a glow. */
.gw-enroll .gw-btn--primary {
  --gw-b-bg: linear-gradient(180deg, var(--gw-fill-top), var(--gw-fill) 45%, var(--gw-fill-bottom));
  --gw-b-fg: var(--gw-on-fill);
  --gw-b-border: 1px solid var(--gw-fill-edge);
  --gw-b-shadow: 0 10px 26px -12px rgb(var(--gw-fill-edge-rgb) / 0.75);
}
.gw-enroll .gw-btn--primary:hover {
  --gw-b-shadow: 0 0 0 1px var(--gw-fill-edge), 0 14px 34px -10px rgb(var(--gw-fill-edge-rgb) / 0.8);
  transform: translateY(-1px);
}
.gw-enroll .gw-btn--primary[aria-busy='true'] {
  --gw-b-op: 0.8;
  cursor: progress;
}

.gw-enroll .gw-btn--ghost {
  --gw-b-bg: transparent;
  --gw-b-fg: var(--gw-text-hi);
  --gw-b-border: 1.5px solid var(--gw-field-border);
}
.gw-enroll .gw-btn--ghost:hover {
  --gw-b-bg: var(--gw-tint);
  --gw-b-border: 1.5px solid var(--gw-accent-on-card);
}
/* Back, while Step 4's save is in flight: same dimming as the primary button's own [aria-busy],
   but "disabled" here since it is Create's request making Back unsafe to use, not Back's own. */
.gw-enroll .gw-btn--ghost[aria-disabled='true'] {
  --gw-b-op: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.gw-enroll .gw-btn--wide {
  --gw-b-w: 100%;
}

/* --- Link-style button (Edit, Clear, Type instead, Resend) --- */
.gw-enroll .gw-link {
  --gw-b-fg: var(--gw-accent);
  --gw-b-deco: underline;
  --gw-b-fw: 700;
  --gw-b-pad: 6px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  text-underline-offset: 0.18em;
}
/* Step 4's "Edit" links, while Create account's request is in flight: same reasoning as the
   [data-gw-back] rule above -- only ever set on [data-gw-goto], never on Clear signature / Resend. */
.gw-enroll .gw-link[aria-disabled='true'] {
  --gw-b-op: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.gw-enroll .gw-link:hover {
  --gw-b-fg: var(--gw-text-hi);
}

/* --- Eyebrow (the homepage's small caps label with an accent rule) --- */
.gw-enroll .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-enroll .gw-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 10px var(--gw-glow);
}

/* --- Hidden visually, still read by screen readers --- */
.gw-enroll .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-enroll .gw-skip-link {
  --gw-link: var(--gw-on-fill);
  --gw-link-deco: none;
  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-fill);
  font-weight: 700;
}
.gw-enroll .gw-skip-link:focus {
  top: var(--gw-space-4);
}

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

/* ---- 04-layout.css ---- */

/* ==========================================================================
   Layout: top bar · intro · form column · "before you start" aside · footer.
   Phone: one column (intro, form, aside). From 960px: the intro and aside sit in a left column beside the form
   column (the card and the sign-in line under it).
   ========================================================================== */

/* --- Top bar --- */
.gw-enroll .gw-topbar {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--gw-line);
  background: rgb(var(--gw-canvas-sunk-rgb) / 0.72);
}
/* The live site's brand-colour rule under the header */
.gw-enroll .gw-topbar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gw-fill-bottom) 20%, var(--gw-fill-top) 50%, var(--gw-fill-bottom) 80%, transparent);
  opacity: 0.55;
}
.gw-enroll .gw-topbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw-space-2) var(--gw-space-4);
  width: min(100% - 2 * var(--gw-gutter), var(--gw-max));
  min-height: 68px;
  margin-inline: auto;
  padding-block: var(--gw-space-2);
}
.gw-enroll .gw-topbar__logo {
  display: block;
  flex: none;
  border-radius: 8px;
}
/* Logos differ in shape from brand to brand: all get the same height, and very wide ones are capped. */
.gw-enroll .gw-topbar__logo img {
  width: auto;
  height: 48px;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
}
.gw-enroll[dir='rtl'] .gw-topbar__logo img {
  object-position: right center;
}
/* On a phone the bar also holds the language button and Sign in: keep the logo to the width that leaves them room. */
@media (max-width: 479px) {
  .gw-enroll .gw-topbar__logo img {
    max-width: 132px;
  }
}
.gw-enroll .gw-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--gw-space-2);
  margin-inline-start: auto;
}
.gw-enroll .gw-topbar__signin {
  --gw-link: var(--gw-text-hi);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-topbar__signin a {
  display: inline-block;
  padding-block: 10px;
  font-weight: 700;
}
@media (max-width: 559px) {
  .gw-enroll .gw-topbar__signin > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Language menu (details/summary: works without script; JS closes it on Escape and outside clicks) --- */
.gw-enroll .gw-lang {
  position: relative;
}
.gw-enroll .gw-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-pill);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--gw-dur-1);
}
.gw-enroll .gw-lang__btn:hover,
.gw-enroll .gw-lang[open] > .gw-lang__btn {
  background: var(--gw-wash);
}
.gw-enroll .gw-lang__code {
  display: none;
}
/* Narrow phones: the pill shows the language code ("ES"), so it and the sign-in link fit beside the logo in every
   language. Screen readers still hear the full name. */
@media (max-width: 479px) {
  .gw-enroll .gw-lang__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .gw-enroll .gw-lang__code {
    display: inline;
    text-transform: uppercase;
  }
}
.gw-enroll .gw-lang__chev {
  transition: transform var(--gw-dur-1);
}
.gw-enroll .gw-lang[open] .gw-lang__chev {
  transform: rotate(180deg);
}
.gw-enroll .gw-lang__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 30;
  width: min(300px, 100vw - 2 * var(--gw-gutter));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: var(--gw-space-2);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius-md);
  background: var(--gw-canvas-raised);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / calc(0.9 * var(--gw-shade)));
}
/* Phones: the menu hangs from the header row, not from the button, so it stays on screen however long the
   language name and the "Sign in" link beside it are. */
@media (max-width: 559px) {
  .gw-enroll .gw-topbar__in {
    position: relative;
  }
  .gw-enroll .gw-lang {
    position: static;
  }
  .gw-enroll .gw-lang__panel {
    top: calc(100% - 4px);
  }
}
.gw-enroll .gw-lang__list {
  display: grid;
}
.gw-enroll .gw-lang__list--more {
  grid-template-columns: 1fr 1fr;
}
.gw-enroll .gw-lang__more {
  margin: var(--gw-space-2) var(--gw-space-3) var(--gw-space-1);
  padding-top: var(--gw-space-2);
  border-top: 1px solid var(--gw-line);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gw-enroll .gw-lang__opt {
  --gw-b-fg: var(--gw-text-md);
  --gw-b-pad: 8px 12px;
  --gw-b-radius: var(--gw-radius-sm);
  --gw-b-w: 100%;
  --gw-b-fs: var(--gw-fs-sm);
  display: flex;
  justify-content: space-between;
  gap: var(--gw-space-2);
  min-height: 44px;
  text-align: start;
}
.gw-enroll .gw-lang__opt:hover {
  --gw-b-bg: var(--gw-wash);
  --gw-b-fg: var(--gw-text-hi);
}
.gw-enroll .gw-lang__opt[aria-current='true'] {
  --gw-b-fg: var(--gw-link-on-canvas);
  --gw-b-fw: 700;
}
.gw-enroll .gw-lang__opt .gw-icon {
  stroke-width: 2.6;
}

/* --- Main grid --- */
.gw-enroll .gw-main__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'intro'
    'form'
    'aside';
  gap: var(--gw-space-5);
  width: min(100% - 2 * var(--gw-gutter), var(--gw-max));
  margin-inline: auto;
  padding-block: clamp(24px, 12px + 3vw, 56px) clamp(40px, 24px + 4vw, 80px);
}
.gw-enroll .gw-intro {
  grid-area: intro;
}
.gw-enroll .gw-formcol {
  grid-area: form;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--gw-space-5);
}
.gw-enroll .gw-aside {
  grid-area: aside;
}

@media (min-width: 960px) {
  .gw-enroll .gw-main__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    /* The form column (card + "Already have an account?") spans both rows; the second (aside) row takes any extra
       height, so the intro and the aside stay together at the top of the left column, and the sign-in line
       always sits right under the card, whichever column is taller. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'intro form'
      'aside form';
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: var(--gw-space-6);
    align-items: start;
  }
  .gw-enroll .gw-intro {
    padding-top: var(--gw-space-5);
  }
}

/* --- Intro --- */
.gw-enroll .gw-intro {
  display: grid;
  gap: var(--gw-space-3);
  max-width: 560px;
}
.gw-enroll .gw-intro__title {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-2xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.gw-enroll .gw-intro__lede {
  --gw-link: var(--gw-link-on-canvas);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-lg);
}
.gw-enroll .gw-intro__lede strong {
  font-weight: 700;
}
.gw-enroll .gw-intro__lede a {
  display: inline-block;
  font-size: var(--gw-fs-md);
  font-weight: 700;
}
.gw-enroll .gw-intro__sub {
  color: var(--gw-text-md);
}

/* --- Aside: what you need, what happens next, help --- */
.gw-enroll .gw-aside {
  display: grid;
  gap: var(--gw-space-5);
  max-width: 560px;
}
.gw-enroll .gw-aside__blocks {
  display: grid;
  gap: var(--gw-space-5);
}
@media (min-width: 600px) and (max-width: 959px) {
  .gw-enroll .gw-aside {
    max-width: none;
  }
  .gw-enroll .gw-aside__blocks {
    grid-template-columns: 1fr 1fr;
  }
}
.gw-enroll .gw-aside__block {
  padding: var(--gw-space-5);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-lg);
  background: rgb(var(--gw-canvas-panel-rgb) / 0.6);
}
.gw-enroll .gw-aside__h {
  margin-bottom: var(--gw-space-3);
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-md);
  font-weight: 900;
}
.gw-enroll .gw-need,
.gw-enroll .gw-next {
  display: grid;
  gap: var(--gw-space-3);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-need > li,
.gw-enroll .gw-next > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--gw-space-3);
  align-items: start;
}
.gw-enroll .gw-need .gw-icon {
  color: var(--gw-link-on-canvas);
}
.gw-enroll .gw-next__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(var(--gw-fill-rgb) / 0.14);
  color: var(--gw-link-on-canvas);
  font-size: var(--gw-fs-xs);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--gw-line-strong);
}

.gw-enroll .gw-trust {
  display: grid;
  gap: var(--gw-space-4);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-trust > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--gw-space-3);
  align-items: start;
}
.gw-enroll .gw-trust .gw-icon {
  color: var(--gw-link-on-canvas);
}
.gw-enroll .gw-trust strong {
  display: block;
  color: var(--gw-text-hi);
}
.gw-enroll .gw-trust__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gw-space-5);
}
.gw-enroll .gw-trust a {
  --gw-link: var(--gw-link-on-canvas);
  display: inline-block;
  padding-block: 8px;
  font-weight: 700;
}

/* --- "Already have an account?" under the form --- */
.gw-enroll .gw-after {
  --gw-link: var(--gw-link-on-canvas);
  color: var(--gw-text-md);
  text-align: center;
}
.gw-enroll .gw-after a {
  display: inline-block;
  padding-block: 10px;
  font-weight: 700;
}

/* --- Footer --- */
.gw-enroll .gw-foot {
  border-top: 1px solid var(--gw-line);
  background: var(--gw-canvas-sunk);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
}
.gw-enroll .gw-foot__in {
  display: grid;
  gap: var(--gw-space-3);
  width: min(100% - 2 * var(--gw-gutter), var(--gw-max));
  margin-inline: auto;
  padding-block: var(--gw-space-5) var(--gw-space-6);
}
.gw-enroll .gw-foot__links {
  --gw-link: var(--gw-text-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gw-space-5);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-foot__links a {
  display: inline-block;
  padding-block: 10px;
}
.gw-enroll .gw-foot__links a:hover {
  --gw-link: var(--gw-text-hi);
}

/* ---- 05-form.css ---- */

/* ==========================================================================
   The form card: progress · alert · steps · fields · phone · show/hide · password rules · ideas ·
   review · signature · consent · notice · step navigation.
   ========================================================================== */

/* --- Card --- */
.gw-enroll .gw-card {
  position: relative;
  display: grid;
  gap: var(--gw-space-5);
  padding: clamp(20px, 12px + 2.4vw, 40px);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-card-bg);
  color: var(--gw-text-md);
  box-shadow: var(--gw-shadow-card);
  container-type: inline-size;
  container-name: gw-card;
}
.gw-enroll .gw-card:focus {
  outline: none;
}
.gw-enroll .gw-card__note {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
/* The controller shows .kyc-overlay while the one-time-code dialog is open, and leaves it on if the dialog is
   closed with Cancel, which blocks the form. The dialog has its own full-page scrim, so it is never shown. */
.gw-enroll .kyc-overlay {
  display: none !important;
}

/* --- Progress (hidden without script: then every step shows, one after another) --- */
.gw-enroll .gw-progress {
  display: none;
}
.gw-enroll.gw-js .gw-progress {
  display: grid;
  gap: var(--gw-space-3);
}
.gw-enroll .gw-progress__label {
  color: var(--gw-accent);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}
.gw-enroll .gw-progress__label [data-gw-progress-name] {
  color: var(--gw-text-md);
  font-weight: 400;
}
.gw-enroll .gw-progress__sep {
  margin-inline: 4px;
  color: var(--gw-text-lo);
}
.gw-enroll .gw-progress__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.gw-enroll .gw-progress__seg {
  height: 6px;
  overflow: hidden;
  border-radius: var(--gw-radius-pill);
  background: var(--gw-track);
}
.gw-enroll .gw-progress__seg > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gw-enroll .gw-progress__seg::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gw-fill-bottom), var(--gw-fill));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gw-dur-2) var(--gw-ease-out);
}
.gw-enroll .gw-progress__seg.is-done::before,
.gw-enroll .gw-progress__seg.is-current::before {
  transform: none;
}
.gw-enroll .gw-progress__seg.is-current::before {
  background: linear-gradient(90deg, var(--gw-fill-edge), var(--gw-fill-bottom));
}

/* --- Alert (#dvError: server and country-check messages) --- */
.gw-enroll .gw-alert {
  --gw-link: var(--gw-danger);
  padding: var(--gw-space-4);
  border: 1px solid rgba(179, 38, 30, 0.35);
  border-inline-start: 5px solid var(--gw-danger);
  border-radius: var(--gw-radius-md);
  background: var(--gw-danger-bg);
  color: var(--gw-ink);
  font-weight: 700;
}
.gw-enroll .gw-alert:empty {
  display: none !important;
}

/* --- Steps --- */
.gw-enroll .gw-steps {
  display: grid;
  gap: var(--gw-space-7);
}
.gw-enroll .gw-step {
  display: grid;
  gap: var(--gw-space-5);
}
.gw-enroll.gw-js .gw-steps {
  gap: 0;
}
.gw-enroll.gw-js .gw-step:not(.is-current) {
  display: none;
}
.gw-enroll .gw-step__h {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-xl);
}
/* Without script the steps run on, so they get a rule between them. */
.gw-enroll:not(.gw-js) .gw-step + .gw-step {
  padding-top: var(--gw-space-6);
  border-top: 1px solid var(--gw-line);
}
@media (prefers-reduced-motion: no-preference) {
  .gw-enroll.gw-js .gw-step.is-current {
    animation: gw-step-in var(--gw-dur-2) var(--gw-ease-out);
  }
}
@keyframes gw-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* --- Field --- */
.gw-enroll .gw-field {
  display: grid;
  gap: 6px;
}
.gw-enroll .gw-field-row {
  display: grid;
  gap: var(--gw-space-5);
}
@container gw-card (min-width: 460px) {
  .gw-enroll .gw-field-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gw-space-4);
  }
}
.gw-enroll .gw-field__label {
  --gw-l-fs: var(--gw-fs-md);
  color: var(--gw-text-hi);
  font-weight: 700;
  line-height: 1.3;
}
.gw-enroll .gw-field__opt {
  color: var(--gw-text-lo);
  font-weight: 400;
}
.gw-enroll .gw-field__hint {
  margin-top: -2px;
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
  line-height: 1.4;
}
.gw-enroll .gw-field__error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  color: var(--gw-danger);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
  line-height: 1.4;
}
.gw-enroll .gw-field__error::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gw-enroll .gw-field__error:empty {
  display: none !important;
}
/* The page's own inline messages (password match, PIN) repeat what this form already says, so with this
   script running they stay hidden. They are still written to, and still in the markup, as the scripts expect. */
.gw-enroll.gw-js [data-gw-legacy-msg] {
  display: none !important;
}

/* --- Inputs and selects --- */
.gw-enroll .gw-input,
.gw-enroll .gw-select {
  --gw-f-h: var(--gw-field-h);
  --gw-f-pad: 0 14px;
  --gw-f-border: 1.5px solid var(--gw-field-border);
  --gw-f-border-focus: 1.5px solid var(--gw-accent-on-card);
  --gw-f-shadow-focus: 0 0 0 3px rgb(var(--gw-accent-on-card-rgb) / 0.28);
  --gw-f-radius: 10px;
  --gw-f-bg: var(--gw-field-bg);
  --gw-f-fg: var(--gw-ink);
  --gw-f-fs: var(--gw-fs-md);
  --gw-f-fw: 400;
  display: block;
  min-width: 0;
  transition:
    border-color var(--gw-dur-1),
    box-shadow var(--gw-dur-1);
}
.gw-enroll .gw-input:hover,
.gw-enroll .gw-select:hover {
  --gw-f-border: 1.5px solid var(--gw-field-border-hover);
}
/* The ring is the box-shadow above, so the outline is not needed on fields. */
.gw-enroll .gw-input:focus-visible,
.gw-enroll .gw-select:focus-visible {
  outline: none;
}
.gw-enroll .gw-select {
  --gw-f-pad: 0 44px 0 14px;
  --gw-f-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c4a41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  appearance: none;
  background-position: right 14px center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  cursor: pointer;
}
.gw-enroll .gw-input[aria-invalid='true'],
.gw-enroll .gw-select[aria-invalid='true'] {
  --gw-f-border: 2px solid var(--gw-danger);
  --gw-f-border-focus: 2px solid var(--gw-danger);
  --gw-f-shadow-focus: 0 0 0 3px rgba(179, 38, 30, 0.22);
}
.gw-enroll .gw-input:disabled {
  --gw-f-bg: var(--gw-disabled);
  --gw-f-fg: var(--gw-ink-muted);
  cursor: not-allowed;
}

/* --- Phone: dial code + number (stacked on narrow cards) --- */
.gw-enroll .gw-tel {
  display: grid;
  gap: var(--gw-space-2);
}
@container gw-card (min-width: 460px) {
  .gw-enroll .gw-tel {
    grid-template-columns: minmax(0, 11fr) minmax(0, 14fr);
  }
}

/* --- Show / hide (password, PIN) --- */
.gw-enroll .gw-secret {
  position: relative;
}
.gw-enroll .gw-secret .gw-input {
  --gw-f-pad: 0 96px 0 14px;
}
.gw-enroll .gw-secret__btn {
  --gw-b-fg: var(--gw-strong-on-card);
  --gw-b-pad: 0 12px;
  --gw-b-radius: 8px;
  --gw-b-fs: var(--gw-fs-sm);
  --gw-b-fw: 700;
  --gw-b-h: 44px;
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  gap: 6px;
  min-width: 44px;
}
.gw-enroll .gw-secret__btn:hover {
  --gw-b-bg: var(--gw-tint);
}
.gw-enroll .gw-secret__off,
.gw-enroll .gw-secret__btn[data-gw-shown] .gw-secret__on {
  display: none;
}
.gw-enroll .gw-secret__btn[data-gw-shown] .gw-secret__off {
  display: block;
}
/* No script: the buttons would do nothing. */
.gw-enroll:not(.gw-js) .gw-secret__btn {
  display: none;
}
.gw-enroll:not(.gw-js) .gw-secret .gw-input {
  --gw-f-pad: 0 14px;
}
.gw-enroll .gw-secret--pin {
  max-width: 240px;
}
.gw-enroll .gw-input--pin {
  --gw-f-fs: 22px;
  letter-spacing: 0.3em;
}

/* --- Password rules --- */
.gw-enroll .gw-rules {
  padding: var(--gw-space-3) var(--gw-space-4);
  border-radius: var(--gw-radius-md);
  background: var(--gw-paper);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-rules__title {
  margin-bottom: 4px;
  color: var(--gw-text-hi);
  font-weight: 700;
}
.gw-enroll .gw-rules ul {
  display: grid;
  gap: 4px;
}
@container gw-card (min-width: 460px) {
  .gw-enroll .gw-rules ul {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gw-space-4);
  }
}
.gw-enroll .gw-rules li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--gw-text-md);
  line-height: 1.4;
}
.gw-enroll .gw-rules li .gw-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  background: var(--gw-track);
  color: transparent;
  stroke-width: 3.4;
  transition:
    background-color var(--gw-dur-1),
    color var(--gw-dur-1);
}
.gw-enroll .gw-rules li.is-met {
  color: var(--gw-text-hi);
}
.gw-enroll .gw-rules li.is-met .gw-icon {
  background: var(--gw-fill-edge);
  color: var(--gw-white);
}
.gw-enroll .gw-rules__alt {
  margin-top: 6px;
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
}
.gw-enroll .gw-rules.is-met-long .gw-rules__alt {
  color: var(--gw-strong-on-card);
  font-weight: 700;
}

/* --- Callout (why the security question) --- */
.gw-enroll .gw-callout {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--gw-space-3);
  padding: var(--gw-space-4);
  border-radius: var(--gw-radius-md);
  background: var(--gw-tint);
  color: var(--gw-ink);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-callout .gw-icon {
  color: var(--gw-accent-on-card);
}

/* --- Question ideas (chips) --- */
.gw-enroll .gw-ideas {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
.gw-enroll .gw-ideas__label {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-ideas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gw-enroll .gw-chip {
  --gw-b-pad: 8px 14px;
  --gw-b-radius: var(--gw-radius-pill);
  --gw-b-border: 1.5px solid rgb(var(--gw-accent-on-card-rgb) / 0.45);
  --gw-b-bg: var(--gw-white);
  --gw-b-fg: var(--gw-strong-on-card);
  --gw-b-fs: var(--gw-fs-sm);
  --gw-b-fw: 700;
  min-height: 44px;
  line-height: 1.3;
  text-align: start;
}
.gw-enroll .gw-chip:hover {
  --gw-b-bg: var(--gw-tint);
  --gw-b-border: 1.5px solid var(--gw-accent-on-card);
}
.gw-enroll:not(.gw-js) .gw-ideas {
  display: none;
}

/* --- Review --- */
.gw-enroll .gw-review {
  padding: var(--gw-space-4) var(--gw-space-5);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius-md);
  background: var(--gw-paper);
}
.gw-enroll .gw-review__h {
  margin-bottom: var(--gw-space-2);
  font-size: var(--gw-fs-md);
}
.gw-enroll .gw-review__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'dt edit'
    'dd edit';
  column-gap: var(--gw-space-3);
  padding-block: var(--gw-space-2);
  border-top: 1px solid var(--gw-line);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-review__row:first-child {
  border-top: 0;
}
.gw-enroll .gw-review__row dt {
  grid-area: dt;
  color: var(--gw-text-lo);
}
.gw-enroll .gw-review__row dd:not(.gw-review__edit) {
  grid-area: dd;
  color: var(--gw-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.gw-enroll .gw-review__row dd.is-empty {
  color: var(--gw-text-lo);
  font-weight: 400;
}
.gw-enroll .gw-review__edit {
  grid-area: edit;
  align-self: center;
}

/* --- Signature --- */
.gw-enroll .gw-sig {
  display: grid;
  gap: var(--gw-space-2);
}
.gw-enroll .gw-sig__pad {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed var(--gw-field-border);
  border-radius: var(--gw-radius-md);
  background: var(--gw-white);
}
.gw-enroll .gw-sig__pad:focus-within,
.gw-enroll .gw-sig__pad:hover {
  border-color: var(--gw-accent-on-card);
}
.gw-enroll [aria-invalid='true'] > .gw-sig__pad,
.gw-enroll .gw-sig.is-invalid .gw-sig__pad {
  border: 2px solid var(--gw-danger);
}
/* The drawing scripts map pointer positions 1:1 onto the canvas buffer, so the script sizes the buffer to the
   box and the box never scales it: no max-width or height scaling here beyond the no-script fallback. */
.gw-enroll #sig-canvas {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.gw-enroll .gw-sig__line {
  position: absolute;
  right: 20px;
  bottom: 30%;
  left: 20px;
  z-index: 0;
  border-bottom: 1.5px solid var(--gw-rule);
  pointer-events: none;
}
.gw-enroll .gw-sig__line > span {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 0;
  color: var(--gw-sig-label);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-sig__line > span::before {
  content: '×  ';
  font-weight: 700;
}
.gw-enroll .gw-sig.has-ink .gw-sig__line > span {
  visibility: hidden;
}
.gw-enroll .gw-sig__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--gw-space-4);
}
.gw-enroll .gw-sig__clear {
  margin-inline-start: auto;
}

/* --- Consent --- */
.gw-enroll .gw-check {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--gw-space-3);
  align-items: start;
  padding: var(--gw-space-4);
  border: 1.5px solid var(--gw-line);
  border-radius: var(--gw-radius-md);
  background: var(--gw-paper);
}
.gw-enroll .gw-check:has(:checked) {
  border-color: rgb(var(--gw-accent-on-card-rgb) / 0.45);
  background: var(--gw-tint);
}
.gw-enroll .gw-check:has([aria-invalid='true']) {
  border-color: var(--gw-danger);
}
.gw-enroll .gw-check__box {
  --gw-f-w: 26px;
  --gw-f-h: 26px;
  display: block;
  margin: 0;
  accent-color: var(--gw-accent-on-card);
  cursor: pointer;
}
.gw-enroll .gw-check__box:focus-visible {
  outline: 3px solid var(--gw-focus);
  outline-offset: 2px;
}
.gw-enroll .gw-check__label {
  --gw-l-fs: var(--gw-fs-md);
  --gw-link: var(--gw-strong-on-card);
  color: var(--gw-ink);
  line-height: 1.5;
  cursor: pointer;
}
.gw-enroll .gw-check__label a {
  font-weight: 700;
}

/* --- Legal notice (USA PATRIOT Act) --- */
.gw-enroll .gw-notice {
  display: grid;
  gap: 6px;
  padding-top: var(--gw-space-4);
  border-top: 1px solid var(--gw-line);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-xs);
  line-height: 1.55;
}
.gw-enroll .gw-notice__h {
  color: var(--gw-text-md);
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

/* --- Step navigation --- */
.gw-enroll .gw-nav {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: var(--gw-space-3);
  justify-content: space-between;
  padding-top: var(--gw-space-2);
}
.gw-enroll .gw-nav > .gw-btn {
  flex: 1 1 100%;
}
@container gw-card (min-width: 460px) {
  .gw-enroll .gw-nav > .gw-btn {
    flex: 0 1 auto;
    min-width: 160px;
  }
  .gw-enroll .gw-nav > .gw-btn--primary {
    margin-inline-start: auto;
  }
}
/* Without script there is no stepping: only "Create account" shows. */
.gw-enroll.gw-js .gw-nav [data-gw-submit]:not(.is-current) {
  display: none;
}

/* ---- 06-modals.css ---- */

/* ==========================================================================
   Dialogs: one-time code (#KYCVerificationModel), success (#SuccessReceiipt), message (#myModal2).
   Bootstrap 3's modal plugin opens them: it sets style="display:block", adds .in and puts .modal-open on <body>.
   Bootstrap's CSS already gives .modal { position: fixed; inset: 0; z-index: 1050; display: none }. The rules
   below restate that, so the dialogs also work if Bootstrap's CSS is ever removed. They draw their own scrim
   (data-backdrop="false"), because the site's .modal-backdrop is forced white.
   ========================================================================== */

.gw-enroll .gw-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(16px, 5vh, 64px) var(--gw-gutter);
  background: rgb(var(--gw-canvas-sunk-rgb) / 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  outline: 0;
  -webkit-overflow-scrolling: touch;
}
.gw-enroll .gw-modal.in {
  display: block;
}

.gw-enroll .gw-modal__dialog {
  position: relative;
  display: grid;
  gap: var(--gw-space-3);
  width: min(100%, 460px);
  margin: 0 auto;
  padding: clamp(24px, 16px + 2vw, 36px);
  border-radius: var(--gw-radius-lg);
  background: var(--gw-card-bg);
  color: var(--gw-text-md);
  text-align: center;
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / calc(0.9 * var(--gw-shade))), 0 0 0 1px rgb(var(--gw-link-on-canvas-rgb) / 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  .gw-enroll .gw-modal.in .gw-modal__dialog {
    animation: gw-dialog-in var(--gw-dur-2) var(--gw-ease-out);
  }
}
@keyframes gw-dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.gw-enroll .gw-modal__x {
  --gw-b-fg: var(--gw-text-md);
  --gw-b-fs: 28px;
  --gw-b-radius: 50%;
  --gw-b-w: 44px;
  --gw-b-h: 44px;
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  justify-content: center;
  line-height: 1;
}
.gw-enroll .gw-modal__x:hover {
  --gw-b-bg: var(--gw-paper);
  --gw-b-fg: var(--gw-text-hi);
}

.gw-enroll .gw-modal__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--gw-space-2);
  border-radius: 50%;
  background: var(--gw-tint);
  color: var(--gw-accent-on-card);
  box-shadow: inset 0 0 0 1px rgb(var(--gw-accent-on-card-rgb) / 0.25);
}
.gw-enroll .gw-modal__icon--done {
  width: 72px;
  height: 72px;
  background: linear-gradient(180deg, var(--gw-fill-top), var(--gw-fill-bottom));
  color: var(--gw-on-fill);
  box-shadow: 0 0 0 8px rgb(var(--gw-fill-rgb) / 0.18);
}
.gw-enroll .gw-modal__icon--done .gw-icon {
  stroke-width: 3;
}
.gw-enroll .gw-modal__h {
  color: var(--gw-text-hi);
  font-size: var(--gw-fs-xl);
}
.gw-enroll .gw-modal__p {
  color: var(--gw-text-md);
}
.gw-enroll .gw-modal__msg {
  color: var(--gw-ink);
  font-weight: 700;
}
.gw-enroll .gw-modal__msg:empty {
  display: none;
}
.gw-enroll .gw-modal__dialog > .gw-field__label {
  margin-top: var(--gw-space-2);
  text-align: start;
}
.gw-enroll .gw-input--otp {
  --gw-f-fs: 26px;
  --gw-f-h: 60px;
  letter-spacing: 0.4em;
  text-align: center;
}
.gw-enroll .gw-modal__dialog > .gw-field__error {
  text-align: start;
}
.gw-enroll .gw-modal__actions {
  display: grid;
  gap: var(--gw-space-2);
  margin-top: var(--gw-space-2);
}
.gw-enroll .gw-modal__actions > .gw-btn {
  --gw-b-w: 100%;
}
.gw-enroll .gw-modal__resend {
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}

/* Success dialog on a phone: "Or sign in on the website" under the download button */
.gw-enroll .gw-modal__alt {
  --gw-link: var(--gw-accent);
  justify-self: center;
  padding-block: 10px;
  font-size: var(--gw-fs-sm);
  font-weight: 700;
}

.gw-enroll .gw-modal__next {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--gw-space-3);
  padding: var(--gw-space-4);
  border-radius: var(--gw-radius-md);
  background: var(--gw-paper);
  color: var(--gw-ink);
  font-size: var(--gw-fs-sm);
  text-align: start;
}
.gw-enroll .gw-modal__next .gw-icon {
  color: var(--gw-accent-on-card);
}
.gw-enroll .gw-modal__apps-label {
  margin-top: var(--gw-space-2);
  color: var(--gw-text-lo);
  font-size: var(--gw-fs-sm);
}
.gw-enroll .gw-modal__apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gw-space-3);
}
.gw-enroll .gw-modal__apps a {
  display: block;
  border-radius: 10px;
}
.gw-enroll .gw-modal__apps img {
  width: auto;
  height: 46px;
}

/* --- Inline busy strip (under the buttons) -------------------------------------------------------------
   Replaces the page's full-screen loader overlay for in-page checks: the mobile number and username
   lookups and Step 1's verification. Slim enough to show the moment a request starts without the overlay's
   jolt, so there is no dead time where a press looks ignored. */
.gw-enroll .gw-busy {
  overflow: hidden;
  margin-top: var(--gw-space-4);
  border-radius: var(--gw-radius-md);
  background: var(--gw-tint);
}
.gw-enroll .gw-busy[hidden] {
  display: none;
}
/* Progress bar, flush along the top edge of the panel. */
.gw-enroll .gw-busy__bar {
  position: relative;
  display: block;
  overflow: hidden;
  height: 3px;
  background: var(--gw-track);
}
.gw-enroll .gw-busy__bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--gw-fill-bottom), transparent);
  animation: gw-busy-slide 1.15s ease-in-out infinite;
}
.gw-enroll .gw-busy__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gw-space-3);
  padding: var(--gw-space-4);
}
.gw-enroll .gw-busy__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gw-track);
  border-top-color: var(--gw-fill-bottom);
  border-radius: 50%;
  animation: gw-busy-spin 0.7s linear infinite;
}
.gw-enroll .gw-busy__text {
  color: var(--gw-ink-muted);
  font-size: var(--gw-fs-sm);
}
@keyframes gw-busy-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}
@keyframes gw-busy-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Without motion: steady marks rather than moving ones, so it still reads as "working". */
@media (prefers-reduced-motion: reduce) {
  .gw-enroll .gw-busy__bar::after {
    width: 100%;
    background: var(--gw-fill-bottom);
    opacity: 0.55;
    animation: none;
  }
  .gw-enroll .gw-busy__spinner {
    border-color: var(--gw-fill-bottom);
    opacity: 0.55;
    animation: none;
  }
}

/* The page's .modal-open { overflow: hidden } comes from Bootstrap; restated for pages without its CSS. */
body.modal-open:has(.gw-enroll) {
  overflow: hidden;
}

/* ---- 07-languages.css ---- */

/* ==========================================================================
   Languages: fonts, spacing and right-to-left layout for the page's 16 languages.
   The root element carries lang="…" and dir="…" (set by tools/build.mjs; Option B: the _lang / _dir resources).
   ========================================================================== */

/* --- Fonts ---
   Lato covers Latin (00-fonts.css). For other scripts, each device's own UI font is used for the whole page, so a
   line never mixes two typefaces. The names are the usual system fonts on Windows, macOS/iOS and Android. */
.gw-enroll: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-enroll:lang(ar) {
  --gw-font-sans: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
}
.gw-enroll:lang(th) {
  --gw-font-sans: system-ui, -apple-system, 'Leelawadee UI', 'Noto Sans Thai', Thonburi, Tahoma, sans-serif;
}
.gw-enroll:lang(ko) {
  --gw-font-sans: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
.gw-enroll: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; capitals do not exist there.
   Taller lines keep Thai and Arabic marks and CJK glyphs from touching in the large headings. */
.gw-enroll:is(:lang(ar), :lang(th), :lang(ko), :lang(ja)) {
  --gw-tracking-caps: 0;
}
.gw-enroll:is(:lang(ar), :lang(th), :lang(ko), :lang(ja)) :is(h1, h2, h3, h4, .gw-btn, .gw-lang__more, .gw-eyebrow) {
  letter-spacing: normal;
}
.gw-enroll:is(:lang(ar), :lang(th), :lang(vi)) .gw-intro__title {
  line-height: 1.35;
}
.gw-enroll:is(:lang(ko), :lang(ja), :lang(el), :lang(ru)) .gw-intro__title {
  line-height: 1.2;
}
.gw-enroll:lang(th) {
  --gw-lh-snug: 1.4;
  --gw-lh-body: 1.7;
}
/* Korean breaks lines between words, not inside them. */
.gw-enroll:lang(ko) {
  word-break: keep-all;
}
.gw-enroll:lang(ja) {
  line-break: strict;
  word-break: auto-phrase; /* breaks between phrases, not inside words (Chromium; elsewhere ignored) */
}
/* Turkish upper-cases i as İ, which would print the brand as "GENESİS": tr.json writes the eyebrow in capitals. */
.gw-enroll:lang(tr) .gw-eyebrow {
  text-transform: none;
}

/* --- Right to left (Arabic) ---
   Most of the layout uses logical properties (inline-start / inline-end) and flips by itself. These are the rest. */
.gw-enroll[dir='rtl'] .gw-icon--dir {
  transform: scaleX(-1);
}
.gw-enroll[dir='rtl'] .gw-progress__seg::before {
  transform-origin: right;
}
.gw-enroll[dir='rtl'] .gw-select {
  --gw-f-pad: 0 14px 0 44px;
  background-position: left 14px center;
}
.gw-enroll[dir='rtl'] .gw-secret .gw-input {
  --gw-f-pad: 0 14px 0 96px;
}
.gw-enroll[dir='rtl']:not(.gw-js) .gw-secret .gw-input {
  --gw-f-pad: 0 14px;
}
/* Phone numbers, email addresses, passwords and codes are written left to right (the inputs and review values have
   dir="ltr"); keep them lined up with the other fields. */
.gw-enroll[dir='rtl'] :is(.gw-input[dir='ltr']:not(.gw-input--otp), dd[dir='ltr'], dd[dir='auto']) {
  text-align: right;
}