/* ==========================================================================
   ZELTZ LANDING - landing.css
   Implements the Zeltz redesign spec v1.0 (the clearing terminal).
   Cascade layers, in order. Nothing outside a layer.
   ========================================================================== */
@layer tokens, base, layout, components, sections, utilities, a11y;

/* ==========================================================================
   1. TOKENS  (spec 2) - the ONLY place a literal colour, radius, duration or
   easing curve may appear. Includes the six 9.3.1 contrast corrections.
   ========================================================================== */
@layer tokens {
  :root {
    /* --- 2.1 brand constants - never referenced by a component rule ------ */
    --lp-brand-cyan:      #00B4D8;
    --lp-brand-navy:      #0D1B2A;
    --lp-brand-hue:       208;

    /* --- 2.2 surface ladder --------------------------------------------- */
    --lp-bg:              #0A121B;
    --lp-surface-1:       #0F1A25;
    --lp-surface-2:       #15222F;
    --lp-surface-3:       #1C2B3A;
    --lp-surface-4:       #24374A;

    /* --- 2.3 lines and strokes ------------------------------------------ */
    --lp-line:            #26384A;
    --lp-line-strong:     #6A8CA8;   /* 9.3.1 correction 2 (was #5C7C9B) */
    --lp-line-soft:       rgba(255, 255, 255, 0.07);
    --lp-stroke-lit:      rgba(255, 255, 255, 0.16);
    --lp-stroke-fade:     rgba(255, 255, 255, 0.03);
    --lp-highlight:       rgba(255, 255, 255, 0.075);

    /* --- 2.4 ink --------------------------------------------------------- */
    --lp-fg:              #F2F6FA;
    --lp-fg-2:            #B7C6D4;
    --lp-fg-3:            #93A5B6;   /* 9.3.1 correction 1 (was #8698A9) */
    --lp-fg-4:            #5E7183;   /* decorative marks >=24px only */
    --lp-fg-on-accent:    #04121A;

    /* --- 2.5 accent and semantics ---------------------------------------- */
    --lp-accent:          #00B4D8;
    --lp-accent-hover:    #2AC4E4;
    --lp-accent-press:    #009BBB;
    --lp-accent-dim:      #0E7C93;   /* fill only - never a control boundary */
    --lp-accent-wash:     rgba(0, 180, 216, 0.10);
    --lp-accent-wash-2:   rgba(0, 180, 216, 0.05);

    --lp-positive:        #3ECF8E;
    --lp-warn:            #F5B544;
    --lp-danger:          #FF6B6B;
    --lp-danger-wash:     rgba(255, 107, 107, 0.10);

    --lp-focus:           #7BE3FF;
    --lp-focus-halo:      rgba(123, 227, 255, 0.22);

    /* --- 2.6 type -------------------------------------------------------- */
    --lp-font-display: "Inter Tight", "Inter Fallback", system-ui, -apple-system, sans-serif;
    --lp-font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
    --lp-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

    --lp-fs-display: clamp(2.5rem,    1.664rem + 3.43vw, 4.75rem);
    --lp-fs-h2:      clamp(1.875rem,  1.364rem + 2.10vw, 3.25rem);
    --lp-fs-h3:      clamp(1.25rem,   1.064rem + 0.76vw, 1.75rem);
    --lp-fs-lead:    clamp(1.0625rem, 0.970rem + 0.38vw, 1.3125rem);
    --lp-fs-body:    clamp(1rem,      0.977rem + 0.10vw, 1.0625rem);
    --lp-fs-sm:      clamp(0.8125rem, 0.789rem + 0.10vw, 0.875rem);
    --lp-fs-xs:      clamp(0.75rem,   0.727rem + 0.10vw, 0.8125rem);
    --lp-fs-amount:  clamp(2.125rem,  1.707rem + 1.71vw, 3.25rem);
    --lp-fs-metric:  clamp(1.5rem,    1.314rem + 0.76vw, 2rem);

    --lp-fw-regular:  400;
    --lp-fw-book:     450;
    --lp-fw-medium:   500;
    --lp-fw-display:  560;
    --lp-fw-strong:   600;

    --lp-ls-display: -0.035em;
    --lp-ls-h2:      -0.025em;
    --lp-ls-h3:      -0.018em;
    --lp-ls-lead:    -0.010em;
    --lp-ls-body:     0em;
    --lp-ls-num:     -0.010em;
    --lp-ls-eyebrow:  0.085em;

    --lp-lh-display: 0.95;
    --lp-lh-h2:      1.05;
    --lp-lh-h3:      1.15;
    --lp-lh-lead:    1.35;
    --lp-lh-body:    1.55;
    --lp-lh-num:     1.10;
    --lp-lh-eyebrow: 1.30;

    /* --- 2.7 space (Utopia, 390 -> 1440) --------------------------------- */
    --lp-space-3xs: clamp(0.25rem, 0.227rem + 0.10vw, 0.3125rem);
    --lp-space-2xs: clamp(0.5rem,  0.477rem + 0.10vw, 0.5625rem);
    --lp-space-xs:  clamp(0.75rem, 0.704rem + 0.19vw, 0.875rem);
    --lp-space-s:   clamp(1rem,    0.954rem + 0.19vw, 1.125rem);
    --lp-space-m:   clamp(1.5rem,  1.430rem + 0.29vw, 1.6875rem);
    --lp-space-l:   clamp(2rem,    1.907rem + 0.38vw, 2.25rem);
    --lp-space-xl:  clamp(3rem,    2.861rem + 0.57vw, 3.375rem);
    --lp-space-2xl: clamp(4rem,    3.814rem + 0.76vw, 4.5rem);
    --lp-space-3xl: clamp(6rem,    5.721rem + 1.14vw, 6.75rem);

    --lp-space-s-l:     clamp(1rem,   0.536rem + 1.90vw, 2.25rem);
    --lp-space-m-xl:    clamp(1.5rem, 0.943rem + 2.29vw, 3.375rem);
    --lp-space-section: clamp(4rem,   2.700rem + 5.33vw, 7.5rem);

    /* --- 2.8 radii ------------------------------------------------------- */
    --lp-radius-xs:   6px;
    --lp-radius-sm:   10px;
    --lp-radius:      14px;
    --lp-radius-lg:   18px;
    --lp-radius-full: 999px;

    /* --- 2.9 depth ------------------------------------------------------- */
    --lp-ring:      inset 0 0 0 1px var(--lp-line-soft);
    --lp-lift:      inset 0 1px 0 var(--lp-highlight);
    --lp-shadow-1:  0 1px 2px -1px rgba(4, 10, 18, 0.55);
    --lp-shadow-2:  0 1px 2px -1px rgba(4, 10, 18, 0.40),
                    0 6px 14px -6px rgba(4, 10, 18, 0.34),
                    0 14px 28px -12px rgba(4, 10, 18, 0.28);
    --lp-shadow-3:  0 1px 2px -1px rgba(4, 10, 18, 0.36),
                    0 6px 14px -6px rgba(4, 10, 18, 0.30),
                    0 18px 36px -14px rgba(4, 10, 18, 0.26),
                    0 36px 72px -24px rgba(4, 10, 18, 0.20);
    --lp-shadow-accent: 0 8px 20px -10px rgba(0, 120, 148, 0.55);

    /* --- 2.10 motion ----------------------------------------------------- */
    --lp-ease-micro: cubic-bezier(0.20, 0, 0.20, 1);
    --lp-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --lp-ease-expo:  cubic-bezier(0.16, 1, 0.30, 1);
    --lp-ease-in:    cubic-bezier(0.50, 0, 0.75, 0);

    --lp-dur-micro:  140ms;
    --lp-dur-in:     240ms;
    --lp-dur-out:    150ms;
    --lp-dur-reveal: 480ms;
    --lp-stagger:    60ms;

    /* --- 2.11 z-index ---------------------------------------------------- */
    --lp-z-base:      0;
    --lp-z-raised:    10;
    --lp-z-scrim:     40;
    --lp-z-menu:      50;
    --lp-z-scrolltop: 90;
    --lp-z-nav:       100;
    --lp-z-grain:     200;
    --lp-z-skip:      300;

    /* --- 2.12 measure and containers ------------------------------------- */
    --lp-container:        1240px;
    --lp-container-narrow: 760px;
    --lp-measure:          64ch;
    --lp-measure-tight:    46ch;
    --lp-nav-h:            72px;
    --lp-nav-h-scrolled:   62px;
    --lp-scroll-offset:    88px;

    /* --- 2.13 grain (data URI, zero requests) ---------------------------- */
    --lp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   2. RESET AND BASE  (spec 3.2, 3.3, 4.7, 5.13)
   ========================================================================== */
@layer base {
  /* Metric-matched fallback so the Google Fonts swap costs zero CLS. */
  @font-face {
    font-family: "Inter Fallback";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Nothing on this page may produce a horizontal scrollbar. `clip` does not
       create a scroll container, so position: fixed still resolves correctly. */
    overflow-x: clip;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body.lp-body {
    margin: 0;
    min-height: 100svh;
    overflow-x: clip;
    background-color: var(--lp-bg);
    color: var(--lp-fg);
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-body);
    font-weight: var(--lp-fw-book);
    line-height: var(--lp-lh-body);
    letter-spacing: var(--lp-ls-body);
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Every in-page anchor clears the fixed nav (4.7). */
  [id] { scroll-margin-top: var(--lp-scroll-offset); }

  img,
  svg { display: block; max-width: 100%; }

  img { height: auto; }

  /* Grid and flex children must be allowed to shrink below their content. */
  .lp-grid > *,
  .lp-container > * { min-width: 0; }
}

/* ==========================================================================
   3. TYPOGRAPHY  (spec 3.4 - 3.7)
   One grotesque family in two cuts, plus a mono scoped strictly to figures
   and caps eyebrows. Tracking ramps with size and is negative above 20px.
   ========================================================================== */
@layer base {
  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    color: var(--lp-fg);
  }

  h1 { font-size: var(--lp-fs-display); letter-spacing: var(--lp-ls-display); line-height: var(--lp-lh-display); }
  h2 { font-size: var(--lp-fs-h2);      letter-spacing: var(--lp-ls-h2);      line-height: var(--lp-lh-h2); }
  h3 { font-size: var(--lp-fs-h3);      letter-spacing: var(--lp-ls-h3);      line-height: var(--lp-lh-h3); }

  p { margin: 0; }

  h1, h2, h3 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  a { color: inherit; }

  ul, ol { margin: 0; }

  button,
  input,
  select,
  textarea { font: inherit; color: inherit; }

  /* 3.6 - figures never jitter and a zero is never an O. */
  .lp-tnum,
  .lp-quote__send-amount,
  .lp-quote__value,
  .lp-calc-card__amount,
  .lp-calc-card__result-value,
  .lp-calc-card__rate-text,
  .lp-rates__rate,
  .lp-calc-card__breakdown-row span,
  .lp-corridors__count,
  .lp-steps__index {
    font-variant-numeric: tabular-nums slashed-zero;
  }
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES  (spec 4.1 - 4.3, 5.13)
   Two containers, one section shell, one 12-column grid. Never a third.
   ========================================================================== */
@layer layout {
  /* The <main> landmark. The hero owns its own nav clearance; every other
     page takes it from here. */
  .lp-main {
    display: block;
    padding-block-start: var(--lp-nav-h);
  }
  /* Sections that own their own nav clearance opt out of the landmark's. */
  .lp-main:has(.lp-hero),
  .lp-main:has(.lp-legal),
  .lp-main:has(.lp-status-page) { padding-block-start: 0; }

  .lp-container {
    width: 100%;
    max-width: var(--lp-container);
    margin-inline: auto;
    padding-inline: var(--lp-space-s-l);
  }
  .lp-container--narrow { max-width: var(--lp-container-narrow); }

  .lp-section {
    position: relative;
    padding-block: var(--lp-space-section);
  }
  .lp-section--tight { padding-block: var(--lp-space-xl); }
  .lp-section--wash  { background-color: var(--lp-surface-1); }

  /* The eyebrow hugs the title; the lead sits a step further out. A single
     uniform gap between a 13px caps pill, a 52px h2 and a 21px lead reads as
     three unrelated blocks rather than one heading unit. */
  .lp-section__head {
    display: grid;
    gap: var(--lp-space-xs);
    max-width: var(--lp-measure);
    margin-bottom: var(--lp-space-xl);
  }
  .lp-section__head > .lp-section-subtitle { margin-block-start: var(--lp-space-3xs); }
  .lp-section__head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }

  /* The editorial grid. Mobile-first: one column, children in DOM order.
     It becomes the 12-column grid with its asymmetric named spans at
     >= 1024px (section 22). Never 6/6. */
  .lp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--lp-space-m);
    row-gap: var(--lp-space-xl);
    align-items: start;
  }
  .lp-grid > * { grid-column: 1 / -1; }

  /* Section frames. Each band clips its own decoration, so no element on the
     page can produce a horizontal scrollbar at 320 / 375 / 768 / 1024 /
     1440px. .lp-hero and .lp-cta__panel clip their washes the same way. */
  .lp-rates,
  .lp-calculator,
  .lp-steps,
  .lp-features,
  .lp-corridors,
  .lp-safeguards,
  .lp-faq,
  .lp-cta {
    overflow-x: clip;
  }

  /* The film grain (5.13). One fixed layer, painted once. Removing the
     lp-grain class from <body> disables the effect site-wide. */
  .lp-body.lp-grain::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--lp-z-grain);
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: var(--lp-grain);
    background-size: 180px 180px;
  }
}

/* --- Section eyebrows, titles and pills (spec 6.4, 8.2) ------------------ */
@layer components {
  /* Section eyebrows are navigation furniture, not live data and not the next
     action, so they do not spend the accent (art direction 1). Six cyan pills
     down one page is what made the accent read as decoration. The calculator -
     the one section that IS the next action - keeps the accent, below. */
  .lp-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-2);
    box-shadow: var(--lp-ring);
    color: var(--lp-fg-2);
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    width: max-content;
    max-width: 100%;
  }
  .lp-section-tag i { font-size: 0.875rem; line-height: 1; color: var(--lp-fg-3); }

  .lp-section-title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h2);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h2);
    line-height: var(--lp-lh-h2);
    color: var(--lp-fg);
    text-wrap: balance;
  }

  .lp-section-subtitle {
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-lead);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-lead);
    line-height: var(--lp-lh-lead);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
    text-wrap: balance;
  }

  .lp-eyebrow {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    color: var(--lp-fg-3);
  }

  .lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-2);
    box-shadow: var(--lp-ring);
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    color: var(--lp-fg-2);
    white-space: nowrap;
  }
  .lp-pill--accent {
    background: var(--lp-accent-wash);
    color: var(--lp-accent);
  }
  .lp-pill--live {
    background: var(--lp-accent-wash);
    color: var(--lp-accent);
  }
}

/* ==========================================================================
   5. BUTTONS  (spec 6.1, 8.3)
   Four variants, three modifiers. 10px radius - never a pill, never a glow.
   ========================================================================== */
@layer components {
  .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-2xs);
    min-height: 44px;
    padding: 0 var(--lp-space-s);
    margin: 0;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--lp-radius-sm);
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro),
                border-color     var(--lp-dur-micro) var(--lp-ease-micro),
                color            var(--lp-dur-micro) var(--lp-ease-micro),
                box-shadow       var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-btn i { font-size: 1.15em; line-height: 1; }

  /* --- primary ---------------------------------------------------------- */
  .lp-btn--primary {
    background: var(--lp-accent);
    color: var(--lp-fg-on-accent);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), var(--lp-shadow-accent);
  }
  .lp-btn--primary:hover { background: var(--lp-accent-hover); }
  .lp-btn--primary:active {
    background: var(--lp-accent-press);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .lp-btn--primary:disabled,
  .lp-btn--primary[disabled] {
    background: var(--lp-accent-dim);
    color: rgba(4, 18, 26, 0.6);
    box-shadow: none;
    cursor: not-allowed;
  }

  /* --- secondary -------------------------------------------------------- */
  .lp-btn--secondary {
    background: transparent;
    color: var(--lp-fg);
    border-color: var(--lp-line-strong);
  }
  .lp-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--lp-fg-3);
  }
  .lp-btn--secondary:active { background: rgba(255, 255, 255, 0.08); }
  .lp-btn--secondary:disabled,
  .lp-btn--secondary[disabled] {
    color: var(--lp-fg-4);
    border-color: var(--lp-line);
    cursor: not-allowed;
  }

  /* --- quiet ------------------------------------------------------------ */
  .lp-btn--quiet {
    background: transparent;
    color: var(--lp-fg-2);
    border-color: transparent;
    padding-inline: var(--lp-space-2xs);
  }
  .lp-btn--quiet:hover   { color: var(--lp-fg); }
  .lp-btn--quiet:active  { color: var(--lp-fg-2); }
  .lp-btn--quiet:disabled,
  .lp-btn--quiet[disabled] { color: var(--lp-fg-4); cursor: not-allowed; }

  /* --- danger ----------------------------------------------------------- */
  .lp-btn--danger {
    background: transparent;
    color: var(--lp-danger);
    border-color: var(--lp-danger);
  }
  .lp-btn--danger:hover,
  .lp-btn--danger:active { background: var(--lp-danger-wash); }
  .lp-btn--danger:disabled,
  .lp-btn--danger[disabled] { color: var(--lp-fg-4); border-color: var(--lp-line); cursor: not-allowed; }

  /* --- size and width modifiers ----------------------------------------- */
  .lp-btn--sm {
    min-height: 36px;
    padding-inline: var(--lp-space-xs);
    font-size: var(--lp-fs-xs);
  }
  .lp-btn--lg {
    min-height: 52px;
    padding-inline: var(--lp-space-m);
  }
  .lp-btn--block {
    display: flex;
    width: 100%;
  }
}

/* ==========================================================================
   6. FORMS  (spec 5.5 fields, 6.2, 8.4)
   The only two input surfaces on the site: the amount field and the
   read-only result. Both live in the calculator and share a decimal axis.
   ========================================================================== */
@layer components {
  .lp-calc-card__field {
    display: grid;
    gap: var(--lp-space-2xs);
  }

  .lp-calc-card__label {
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    line-height: 1.4;
    color: var(--lp-fg-2);
  }

  .lp-calc-card__input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lp-space-s);
    background: var(--lp-surface-4);
    border: 1px solid var(--lp-line-strong);
    border-radius: var(--lp-radius-sm);
    padding: var(--lp-space-xs) var(--lp-space-s);
    transition: border-color var(--lp-dur-micro) var(--lp-ease-micro),
                box-shadow   var(--lp-dur-micro) var(--lp-ease-micro);
  }

  /* Read-only result: dashed boundary signals "not editable" without greying
     the number out. The 5% accent wash is the one place the hue is spent on a
     surface, and it is spent to say "this is the live answer you came for" -
     without it the payoff read as a weaker, emptier field than the input that
     produced it, which inverts the card's hierarchy. */
  .lp-calc-card__input-row--readonly {
    background: var(--lp-accent-wash-2);
    border-style: dashed;
  }

  .lp-calc-card__amount,
  .lp-calc-card__result-value {
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-amount);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-num);
    line-height: var(--lp-lh-num);
    text-align: right;
    color: var(--lp-fg);
    font-variant-numeric: tabular-nums slashed-zero;
  }

  .lp-calc-card__amount {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    appearance: textfield;
  }
  .lp-calc-card__amount::-webkit-outer-spin-button,
  .lp-calc-card__amount::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
  }
  .lp-calc-card__amount::placeholder { color: var(--lp-fg-3); }

  .lp-calc-card__result {
    min-width: 0;
    display: block;
  }
  .lp-calc-card__result-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   7. SKIP LINK  (spec 5.1, 8.5)
   First focusable node in the document. Clipped until focused.
   ========================================================================== */
@layer components {
  .lp-skip-link {
    position: fixed;
    top: var(--lp-space-s);
    left: var(--lp-space-s);
    z-index: var(--lp-z-skip);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--lp-space-s);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface-3);
    box-shadow: var(--lp-ring), var(--lp-shadow-2);
    color: var(--lp-fg);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    text-decoration: none;
    /* Clipped, not display:none - it must stay focusable. */
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  .lp-skip-link:focus-visible {
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================================
   8. NAV  (spec 5.2, 7.3, 8.6)
   Fixed header, transparent at rest, one sanctioned glass surface when
   scrolled. Mobile-first: links and actions appear at >= 1024px (section 22).
   The element is pinned with inset-inline: 0 and box-sizing: border-box so it
   can never shrink-wrap wider than the viewport.
   ========================================================================== */
@layer components {
  .lp-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    width: auto;
    max-width: 100%;
    height: var(--lp-nav-h);
    z-index: var(--lp-z-nav);
    background: transparent;
    transition: height           var(--lp-dur-in) var(--lp-ease-out),
                background-color var(--lp-dur-in) var(--lp-ease-out),
                box-shadow       var(--lp-dur-in) var(--lp-ease-out);
  }

  .lp-nav.scrolled {
    height: var(--lp-nav-h-scrolled);
    /* solid first: a browser without color-mix keeps a readable bar */
    background: var(--lp-surface-1);
    background: color-mix(in oklab, var(--lp-surface-1) 86%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: inset 0 -1px 0 var(--lp-line-soft), var(--lp-shadow-1);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .lp-nav.scrolled { background: var(--lp-surface-1); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .lp-nav.scrolled {
      background: var(--lp-surface-1);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* The nav's .lp-container already supplies the 1240px band and the gutter.
     Repeating them on the inner row inset the logo by a second gutter, so the
     wordmark sat 36px right of the h1 it is meant to align with. The container
     also needs an explicit height, or `height: 100%` here resolves to `auto`
     and the whole row sits flush to the top of a 72px bar. */
  .lp-nav > .lp-container { height: 100%; }

  .lp-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--lp-space-s);
    height: 100%;
    width: 100%;
  }

  .lp-nav__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-xs);
    text-decoration: none;
  }
  .lp-nav__logo-img {
    height: 30px;
    width: auto;
    transition: height var(--lp-dur-in) var(--lp-ease-out);
  }
  .lp-nav.scrolled .lp-nav__logo-img { height: 28px; }

  .lp-nav__links {
    display: none;   /* shown at >= 1024px */
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: var(--lp-space-m);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .lp-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--lp-space-2xs);
    border-radius: var(--lp-radius-xs);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    line-height: 1.4;
    color: var(--lp-fg-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-nav__link:hover { color: var(--lp-fg); }

  .lp-nav__actions {
    display: none;   /* shown at >= 1024px */
    align-items: center;
    gap: var(--lp-space-s);
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  /* --- hamburger -------------------------------------------------------- */
  .lp-nav__hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--lp-radius-sm);
    cursor: pointer;
  }
  .lp-nav__hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: var(--lp-radius-full);
    background: var(--lp-fg);
    transition: transform var(--lp-dur-in) var(--lp-ease-out),
                opacity   var(--lp-dur-out) var(--lp-ease-micro);
  }
  .lp-nav__hamburger[aria-expanded="true"] .lp-nav__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .lp-nav__hamburger[aria-expanded="true"] .lp-nav__hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .lp-nav__hamburger[aria-expanded="true"] .lp-nav__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- mobile panel ------------------------------------------------------
     visibility is load-bearing: max-height: 0 alone leaves every link in the
     tab order (spec 9.2). */
  .lp-nav__mobile {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: var(--lp-surface-1);
    border-end-start-radius: var(--lp-radius);
    border-end-end-radius: var(--lp-radius);
    box-shadow: var(--lp-ring), var(--lp-shadow-2);
    transition: max-height var(--lp-dur-out) var(--lp-ease-in),
                opacity    var(--lp-dur-out) var(--lp-ease-in),
                visibility 0s linear var(--lp-dur-out);
  }
  .lp-nav__mobile.open {
    max-height: 32rem;
    /* The panel is absolute inside a fixed nav, so anything past the bottom
       of the viewport is unreachable - the page scroll cannot get to it.
       Capping at the room below the nav lets the panel's own overflow-y
       take over instead (320x256, WCAG 1.4.10). */
    max-height: min(32rem, calc(100dvh - var(--lp-nav-h)));
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition: max-height var(--lp-dur-in) var(--lp-ease-out),
                opacity    var(--lp-dur-in) var(--lp-ease-out),
                visibility 0s linear 0s;
  }

  .lp-nav__mobile-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--lp-space-s-l);
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-fg-2);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    text-decoration: none;
    transition: color var(--lp-dur-micro) var(--lp-ease-micro),
                background-color var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-nav__mobile-link:hover {
    color: var(--lp-fg);
    background: var(--lp-accent-wash-2);
  }

  .lp-nav__mobile-actions {
    display: grid;
    gap: var(--lp-space-2xs);
    padding: var(--lp-space-s) var(--lp-space-s-l);
  }

  /* --- reading progress (7.3) - the only scroll-driven animation --------- */
  .lp-nav__progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 2px;
    background: var(--lp-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll(root block)) {
      .lp-nav__progress {
        animation: lp-progress auto linear;
        animation-timeline: scroll(root block);
      }
    }
  }
}

/* ==========================================================================
   9. HERO  (spec 5.3, 2.14 mesh 1 of 2, 8.7)
   No min-height: 100vh, no scroll chevron, no floating badge cards. The
   live quote panel is a first-class readout, not a decorative mockup.
   ========================================================================== */
@layer sections {
  .lp-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;              /* clips the wash - never a page scrollbar */
    padding-block-start: calc(var(--lp-nav-h) + var(--lp-space-2xl));
    padding-block-end: var(--lp-space-section);
  }

  /* Mesh gradient 1 of 2. Off-centre, stopped before 70%, alpha never above
     0.30, every stop fading to alpha-0 of its own colour. */
  .lp-hero__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--lp-bg);
    background-image:
      radial-gradient(68rem 40rem at 6% -18%,  rgba(0, 150, 200, 0.30), rgba(0, 150, 200, 0) 62%),
      radial-gradient(52rem 34rem at 98% 2%,   rgba(0, 180, 216, 0.16), rgba(0, 180, 216, 0) 60%),
      radial-gradient(44rem 44rem at 44% 120%, rgba(20, 70, 120, 0.22), rgba(20, 70, 120, 0) 65%);
  }

  .lp-hero__grid {
    position: relative;
    z-index: 1;
  }

  /* Five children on one uniform gap reads as a list. The rhythm instead
     tightens at the eyebrow and opens out toward the actions, so the eye is
     handed down the column rather than parked between equal blocks. */
  .lp-hero__copy {
    display: grid;
    justify-items: start;
    row-gap: var(--lp-space-xs);
  }
  .lp-hero__lead    { margin-block-start: var(--lp-space-2xs); }
  .lp-hero__actions { margin-block-start: var(--lp-space-s); }
  .lp-hero__proof   { margin-block-start: var(--lp-space-2xs); }

  .lp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-2xs);
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    /* 9.3.1 correction 5: never --lp-fg-3 over the wash. */
    color: var(--lp-fg-2);
  }
  .lp-hero__eyebrow-dot {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-positive);
    animation: lp-pulse 2400ms ease-in-out infinite;
  }

  .lp-hero__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-display);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-display);
    line-height: var(--lp-lh-display);
    color: var(--lp-fg);
    max-width: var(--lp-measure-tight);
    text-wrap: balance;
  }
  /* The only accent-coloured text permitted in the hero: at --lp-fs-display
     it is large text, so 3.79:1 over the wash clears the 3:1 threshold. */
  .lp-hero__title-accent { color: var(--lp-accent); }

  .lp-hero__lead {
    font-size: var(--lp-fs-lead);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-lead);
    line-height: var(--lp-lh-lead);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
    text-wrap: balance;
  }

  .lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-space-s);
  }

  .lp-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lp-space-s);
  }
  .lp-hero__proof-flags {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .lp-hero__proof-flag {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-3);
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--lp-bg);
  }
  .lp-hero__proof-flag + .lp-hero__proof-flag { margin-inline-start: -8px; }
  .lp-hero__proof-label {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    /* 9.3.1 correction 5: --lp-fg-2, not --lp-fg-3, over the wash. */
    color: var(--lp-fg-2);
  }

  /* --- the live quote panel: instrument tier (6.3) ---------------------- */
  /* Readout tier. One step below the calculator, and the step is the gradient
     lit stroke plus a shadow level - NOT the surface. 2.2 assigns surface-3 to
     "hero quote panel, calculator card, dropdown menu" and surface-2 to
     "cards: feature, step, rate, faq, corridor chip". Demoting the panel to
     surface-2 made the page's live above-the-fold quote the same material as a
     feature card and a currency chip, which is a worse collision than the one
     it was fixing. It stays raised; the calculator stays lit. */
  .lp-quote {
    --lp-quote-pad: var(--lp-space-m-xl);
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--lp-space-s);
    padding: var(--lp-quote-pad);
    background: var(--lp-surface-3);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-shadow-2);
  }
  .lp-quote__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-s);
  }
  .lp-quote__title {
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    line-height: 1.4;
    color: var(--lp-fg-2);
  }
  .lp-quote__badge { flex: 0 0 auto; }
  /* Deliberately NOT pulsing. The hero quote is server-rendered once per page
     load and never changes client-side (spec 9.6), so a pulse here would
     animate a promise the panel does not keep. The calculator's dot pulses
     because that number really does re-fetch. */
  .lp-quote__badge-dot {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-accent);
  }

  .lp-quote__send {
    display: grid;
    gap: var(--lp-space-3xs);
  }
  .lp-quote__send-amount {
    display: block;
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-amount);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-num);
    line-height: var(--lp-lh-num);
    text-align: right;
    color: var(--lp-fg);
    overflow-wrap: anywhere;
  }
  .lp-quote__send-label {
    display: block;
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    text-align: right;
    color: var(--lp-fg-3);
  }

  .lp-quote__rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--lp-line);
  }

  .lp-quote__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lp-space-s);
    padding-block: var(--lp-space-2xs);
  }
  .lp-quote__label {
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    color: var(--lp-fg-3);
  }
  .lp-quote__value {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    line-height: 1.3;
    text-align: right;
    color: var(--lp-fg);
    overflow-wrap: anywhere;
  }
  .lp-quote__value--accent { color: var(--lp-accent); }
  .lp-quote__value--muted  { color: var(--lp-fg-3); }

  /* Full-width primary action. Block-button styling is folded in here per
     5.3 rather than composed from .lp-btn. */
  .lp-quote__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-2xs);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--lp-space-m);
    border: 1px solid transparent;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-accent);
    color: var(--lp-fg-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), var(--lp-shadow-accent);
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro),
                box-shadow       var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-quote__cta i { font-size: 1.15em; line-height: 1; }
  .lp-quote__cta:hover { background: var(--lp-accent-hover); }
  .lp-quote__cta:active {
    background: var(--lp-accent-press);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .lp-quote__note {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    color: var(--lp-fg-3);
  }
}

/* ==========================================================================
   10. LIVE RATES BOARD  (spec 5.4, 8.8)
   Static, readable, keyboard-reachable. No marquee: a price you cannot read
   because it is sliding away is not information. Tiles are not links and
   therefore carry no hover affordance.
   ========================================================================== */
@layer sections {
  .lp-rates__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lp-space-s);
    margin-bottom: var(--lp-space-l);
  }
  .lp-rates__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h3);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
    text-wrap: balance;
  }
  .lp-rates__meta {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    color: var(--lp-fg-3);
    max-width: var(--lp-measure-tight);
  }

  /* The board opens with one rule and every cell closes with its own, so the
     last row - 11 entries never divide evenly into 2, 3 or 4 columns - closes
     exactly where the data stops. A rule on the container instead left a
     column-wide orphan segment under an empty cell. */
  .lp-rates__grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    border-block-start: 1px solid var(--lp-line);
  }

  /* Board row, not a board card. The pair reads on the leading edge and the
     figure is set against the trailing edge, so every rate in a column lands
     on one axis - which is what makes a column of numbers a board rather than
     eleven left-aligned sentences. No inline padding at the leading edge:
     the cell text sits on the same axis as the section heading above it. */
  .lp-rates__card {
    container: rate / inline-size;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--lp-space-2xs);
    row-gap: var(--lp-space-3xs);
    padding-block: var(--lp-space-s);
    padding-inline: 0 var(--lp-space-m);
    border-block-end: 1px solid var(--lp-line);
  }

  .lp-rates__flags {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
  }
  .lp-rates__flag {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-3);
    object-fit: cover;
    /* The separating ring must match what the flag now sits on. The cell lost
       its --lp-surface-2 fill, so a surface-2 ring drew a visible halo on the
       surface-1 band. */
    box-shadow: 0 0 0 2px var(--lp-surface-1);
  }
  .lp-rates__flag + .lp-rates__flag { margin-inline-start: -6px; }

  .lp-rates__pair {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    color: var(--lp-fg-3);
  }
  .lp-rates__rate {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: right;
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    line-height: 1.3;
    color: var(--lp-fg);
    overflow-wrap: anywhere;
  }

  /* The tile sizes its internals off its own inline size, not the viewport. */
  @container rate (inline-size < 13rem) {
    .lp-rates__flags { display: none; }
  }

  /* --- failure state ---------------------------------------------------- */
  .lp-rates__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-s);
    padding: var(--lp-space-m);
    background: var(--lp-surface-2);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-ring);
    text-align: center;
  }
  .lp-rates__empty-icon {
    font-size: 1.5rem;   /* 24px - the decorative-mark floor for --lp-fg-4 */
    line-height: 1;
    color: var(--lp-fg-4);
  }
  .lp-rates__empty-text {
    font-size: var(--lp-fs-sm);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   11. RATE CALCULATOR  (spec 5.5, 6.5, 6.6, 8.9, 8.10)
   The centrepiece. Blazor owns every node in this subtree - landing.js may
   never touch a class in this block.
   ========================================================================== */
@layer sections {
  /* The dropdown menu and its scrim stack inside this section only. */
  .lp-calculator { isolation: isolate; }

  .lp-calculator__grid {
    align-items: start;
    /* stacked intro-above-card needs less air than the 12-column row gap */
    row-gap: var(--lp-space-l);
  }

  /* --- intro column ----------------------------------------------------- */
  .lp-calculator__intro {
    display: grid;
    justify-items: start;
    row-gap: var(--lp-space-xs);
  }
  .lp-calculator__intro > .lp-section-subtitle { margin-block-start: var(--lp-space-3xs); }

  /* The one section eyebrow that keeps the accent. Concentrating the hue on
     the centrepiece is what makes it mean "this is the thing to do next"
     rather than "here is another heading". */
  .lp-calculator__intro > .lp-section-tag {
    background: var(--lp-accent-wash);
    box-shadow: none;
    color: var(--lp-accent);
  }
  .lp-calculator__intro > .lp-section-tag i { color: var(--lp-accent); }

  .lp-calculator__features {
    display: grid;
    gap: var(--lp-space-2xs);
    margin-block-start: var(--lp-space-2xs);
    padding: 0;
    list-style: none;
  }
  .lp-calculator__feature {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: var(--lp-space-2xs);
    font-size: var(--lp-fs-body);
    color: var(--lp-fg-2);
  }
  .lp-calculator__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-block-start: 1px;
    border-radius: var(--lp-radius-xs);
    background: var(--lp-accent-wash);
    color: var(--lp-accent);
  }
  .lp-calculator__feature-icon i { font-size: 0.875rem; line-height: 1; }

  /* --- the card: instrument tier (6.3) ---------------------------------- */
  /* Instrument tier. The single most considered object on the page, and the
     only object carrying the gradient lit stroke.
     --lp-shadow-accent is deliberately NOT used here. It already belongs to
     .lp-btn--primary and .lp-quote__cta, where a cyan-tinted shadow under a
     cyan fill is physically consistent; under a navy panel the same shadow is
     a glow, which section 1 rejects outright. The card is singular through the
     stroke, the surface, the depth and the accent eyebrow - not through hue. */
  .lp-calc-card {
    container: calc / inline-size;
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--lp-space-s);
    padding: var(--lp-space-m-xl);
    background: var(--lp-surface-3);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-shadow-3);
  }
  /* The only gradient 1px lit stroke in the sheet. */
  .lp-calc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
      var(--lp-stroke-lit),
      var(--lp-stroke-fade) 38%,
      rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  .lp-calc-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lp-space-s);
  }
  .lp-calc-card__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h3);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
  }
  .lp-calc-card__live { flex: 0 0 auto; }
  .lp-calc-card__dot {
    display: block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-accent);
    animation: lp-pulse 2400ms ease-in-out infinite;
  }

  /* --- the two gate states ---------------------------------------------
     The skeleton rhythm is 56 / 20 / 56 so the card does not resize when
     the real fields hydrate. */
  .lp-calc-card__state {
    display: grid;
    gap: var(--lp-space-s);
    padding-block: var(--lp-space-l);
    text-align: center;
  }
  .lp-calc-card__state .lp-skeleton--line { height: 56px; }
  .lp-calc-card__state .lp-skeleton--line + .lp-skeleton--line {
    height: 20px;
    width: 40%;
  }
  .lp-calc-card__state .lp-skeleton--line + .lp-skeleton--line + .lp-skeleton--line {
    height: 56px;
    width: 100%;
  }
  .lp-calc-card__state-icon {
    justify-self: center;
    font-size: 1.75rem;   /* 28px */
    line-height: 1;
    color: var(--lp-warn);
  }

  /* --- swap row and rate readout ---------------------------------------- */
  /* The two wells and the swap row are one instrument, so they close up:
     the card's uniform gap left the hairlines floating midway between the
     fields and read as three separate controls. */
  .lp-calc-card__swap-row {
    margin-block: calc(var(--lp-space-2xs) - var(--lp-space-s));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-s);
    padding-block: var(--lp-space-xs);
    border-block: 1px solid var(--lp-line);
  }
  .lp-calc-card__rate-line {
    display: flex;
    align-items: center;
    gap: var(--lp-space-2xs);
    min-width: 0;
  }
  .lp-calc-card__rate-line .lp-skeleton--line { width: 4rem; flex: 0 0 auto; }
  .lp-calc-card__rate-text {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    line-height: 1.3;
    color: var(--lp-fg);
    overflow-wrap: anywhere;
  }
  .lp-calc-card__rate-text--loading { color: var(--lp-fg-3); }
  .lp-calc-card__rate-text--error   { color: var(--lp-danger); }

  .lp-calc-card__swap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    appearance: none;
    background: var(--lp-surface-4);
    border: 1px solid var(--lp-line-strong);
    border-radius: var(--lp-radius-sm);
    color: var(--lp-fg-2);
    cursor: pointer;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro),
                border-color     var(--lp-dur-micro) var(--lp-ease-micro),
                color            var(--lp-dur-micro) var(--lp-ease-micro),
                transform        var(--lp-dur-in)    var(--lp-ease-out);
  }
  /* 40px visual box, 44x44 hit area (WCAG 2.2 target size). */
  .lp-calc-card__swap::after {
    content: "";
    position: absolute;
    inset: -2px;
  }
  .lp-calc-card__swap i { font-size: 1.125rem; line-height: 1; }
  .lp-calc-card__swap:hover {
    background: var(--lp-accent-wash);
    /* 9.3.1 correction 3: --lp-accent (5.85:1), not --lp-accent-dim. */
    border-color: var(--lp-accent);
    color: var(--lp-accent);
  }
  .lp-calc-card__swap:active { transform: rotate(180deg); }

  /* --- breakdown, error and disclaimer ---------------------------------- */
  /* A settle line, not a panel. With the restated exchange-rate row gone this
     is a single row, and a --lp-surface-2 box around one row put a card inside
     the instrument - the exact card language the rest of the page was just
     stripped of - while --total's rule separated it from nothing. The rule now
     closes the fields above it, matching the swap row's hairlines, and the
     figure lands on the same trailing axis as the two amount wells. */
  .lp-calc-card__breakdown {
    display: grid;
    gap: var(--lp-space-2xs);
  }
  .lp-calc-card__breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lp-space-s);
    font-size: var(--lp-fs-sm);
    color: var(--lp-fg-2);
  }
  .lp-calc-card__breakdown-row span:last-child {
    font-family: var(--lp-font-mono);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    color: var(--lp-fg);
    text-align: right;
  }
  .lp-calc-card__breakdown-row--total {
    border-top: 1px solid var(--lp-line);
    padding-top: var(--lp-space-s);
    color: var(--lp-fg);
    font-weight: var(--lp-fw-strong);
  }

  /* Small print belongs to the button above it, not to the card at large. */
  .lp-calc-card > .lp-calc-card__disclaimer:last-child {
    margin-block-start: calc(var(--lp-space-3xs) - var(--lp-space-s));
  }
  .lp-calc-card__disclaimer {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    color: var(--lp-fg-3);
  }
  .lp-calc-card__disclaimer--error {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-2xs);
    padding: var(--lp-space-2xs) var(--lp-space-xs);
    border-radius: var(--lp-radius-xs);
    background: var(--lp-danger-wash);
    color: var(--lp-danger);
  }
  .lp-calc-card__disclaimer--error i { font-size: 1em; line-height: 1.5; }

  /* The card sizes its internals off its own inline size (4.5). */
  @container calc (inline-size < 24rem) {
    .lp-calc-card__input-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--lp-space-2xs); }
    .lp-calc-card__amount,
    .lp-calc-card__result-value { text-align: left; }
  }
}

/* --- the currency dropdown (5.5, 6.5, 8.10) ------------------------------
   The closed menu is display: none. That is load-bearing: a menu hidden with
   opacity alone would inject hundreds of invisible tab stops into the page. */
@layer components {
  .lp-cur-select {
    position: relative;
    flex: 0 0 auto;
  }

  .lp-cur-select__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-2xs);
    min-height: 44px;
    padding: 8px 10px;
    appearance: none;
    background: var(--lp-surface-3);
    border: 1px solid var(--lp-line-strong);
    border-radius: var(--lp-radius-sm);
    color: var(--lp-fg);
    cursor: pointer;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro),
                border-color     var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-cur-select__trigger:hover { border-color: var(--lp-fg-3); }

  .lp-cur-select__flag {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-4);
    object-fit: cover;
  }
  .lp-cur-select__code {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    line-height: 1.3;
    color: var(--lp-fg);
  }
  .lp-cur-select__caret {
    font-size: 0.875rem;   /* 14px */
    line-height: 1;
    color: var(--lp-fg-3);
    transition: transform var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-cur-select__trigger[aria-expanded="true"] .lp-cur-select__caret {
    transform: rotate(180deg);
  }

  .lp-cur-select__menu {
    display: none;
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    min-width: 17rem;
    max-width: min(24rem, calc(100vw - 2 * var(--lp-space-s)));
    max-height: 20rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--lp-space-3xs);
    background: var(--lp-surface-3);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-shadow-3);
    z-index: var(--lp-z-menu);
  }
  .lp-cur-select__menu.open { display: block; }
  .lp-cur-select__menu--right {
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  .lp-cur-select__option {
    display: grid;
    grid-template-columns: 20px auto minmax(0, 1fr);
    align-items: center;
    gap: var(--lp-space-2xs);
    width: 100%;
    min-height: 44px;
    padding: var(--lp-space-2xs) var(--lp-space-xs);
    appearance: none;
    background: none;
    border: 0;
    border-radius: var(--lp-radius-xs);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-cur-select__option:hover,
  .lp-cur-select__option:focus-visible { background: var(--lp-surface-4); }

  /* Selection is signalled three ways at once: aria-selected, an accent
     wash, and a 3px inset bar. Never colour alone. */
  .lp-cur-select__option[aria-selected="true"],
  .lp-cur-select__option[aria-current="true"] {
    background: var(--lp-accent-wash);
    box-shadow: inset 3px 0 0 var(--lp-accent);
  }
  .lp-cur-select__option[aria-selected="true"] .lp-cur-select__opt-code,
  .lp-cur-select__option[aria-current="true"] .lp-cur-select__opt-code {
    color: var(--lp-accent);
  }

  .lp-cur-select__opt-flag {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-4);
    object-fit: cover;
  }
  .lp-cur-select__opt-code {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    color: var(--lp-fg);
  }
  .lp-cur-select__opt-name {
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-book);
    color: var(--lp-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lp-cur-select__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--lp-z-scrim);
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
  }
}

/* ==========================================================================
   12. HOW IT WORKS  (spec 5.6, 8.11)
   Step cards carry no background - four boxes in a row is the template
   pattern this design rejects. The rail is decoration and appears only at
   >= 1024px (section 22).
   ========================================================================== */
@layer sections {
  .lp-steps__grid {
    position: relative;
    display: grid;
    gap: var(--lp-space-m);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    grid-template-rows: auto auto 1fr;
  }

  /* Decorative connector, hidden by default and under forced-colors. */
  .lp-steps__rail {
    display: none;
    position: absolute;
    top: 20px;               /* centre of the 40px index disc */
    height: 1px;
    background: var(--lp-line);
    pointer-events: none;
    z-index: 0;
  }

  .lp-steps__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--lp-space-xs);
  }

  .lp-steps__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lp-radius-full);
    background: var(--lp-surface-3);
    box-shadow: var(--lp-ring);
    font-family: var(--lp-font-mono);
    /* --lp-fs-sm, not --lp-fs-metric: 5.6 sizes the numeral to its 40px disc. */
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-medium);
    letter-spacing: var(--lp-ls-num);
    line-height: var(--lp-lh-num);
    /* An ordinal is procedure, not live data and not the next action. */
    color: var(--lp-fg);
  }

  .lp-steps__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h3);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
  }
  .lp-steps__desc {
    font-size: var(--lp-fs-body);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   13. FEATURES  (spec 5.7, 8.12)
   Subgrid keeps titles, bodies and icons aligned row-to-row. The only
   lifting card on the site, and only on a hover-capable pointer.
   ========================================================================== */
@layer sections {
  .lp-features__grid {
    display: grid;
    gap: var(--lp-space-m);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    grid-template-rows: auto auto 1fr;
  }

  .lp-feature {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--lp-space-s);
    padding: var(--lp-space-m);
    background: var(--lp-surface-2);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-ring);
  }
  @media (hover: hover) {
    .lp-feature {
      transition: background-color var(--lp-dur-in) var(--lp-ease-out),
                  box-shadow       var(--lp-dur-in) var(--lp-ease-out),
                  transform        var(--lp-dur-in) var(--lp-ease-out);
    }
    .lp-feature:hover {
      background: var(--lp-surface-3);
      box-shadow: inset 0 0 0 1px var(--lp-stroke-lit);
      transform: translateY(-2px);
    }
  }

  /* Six accent-washed glyph tiles in a 3x2 grid is the SaaS-template signature
     the art direction rejects, and it is the largest single block of purely
     decorative accent on the page. The tile stays; the hue does not. */
  .lp-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface-4);
    box-shadow: var(--lp-ring);
    color: var(--lp-fg-2);
  }
  .lp-feature__icon i { font-size: 1.375rem; line-height: 1; }

  .lp-feature__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h3);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
  }
  .lp-feature__desc {
    font-size: var(--lp-fs-body);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   14. SUPPORTED CURRENCIES  (spec 5.8, 8.13)
   The real list, generated from the pricing engine. A real list cannot be
   wrong, and it is worth more than an invented country count.
   ========================================================================== */
@layer sections {
  /* The tight band needs the tighter head to match; --lp-space-xl under a
     heading inside a 48-54px band is most of the band. Same value the rates
     board's head carries, because they are now the same kind of section. */
  .lp-corridors__head { margin-bottom: var(--lp-space-l); }

  .lp-corridors__count {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-metric);
    font-weight: var(--lp-fw-medium);
    letter-spacing: var(--lp-ls-num);
    line-height: var(--lp-lh-num);
    color: var(--lp-accent);
  }

  .lp-corridors__grid {
    display: grid;
    gap: var(--lp-space-2xs);
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .lp-corridors__chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: var(--lp-space-2xs) var(--lp-space-xs);
    background: var(--lp-surface-2);
    border-radius: var(--lp-radius-xs);
    box-shadow: var(--lp-ring);
  }
  .lp-corridors__chip-code {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-sm);
    font-weight: var(--lp-fw-strong);
    letter-spacing: var(--lp-ls-num);
    color: var(--lp-fg);
  }
  .lp-corridors__chip-symbol {
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-book);
    color: var(--lp-fg-3);
  }

  .lp-corridors__empty {
    font-size: var(--lp-fs-body);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   15. SAFEGUARDS  (spec 5.9, 8.14)
   Trust from mechanism, not badges. The list is a flow container so any row
   can be deleted after legal review without the layout collapsing.
   ========================================================================== */
@layer sections {
  .lp-safeguards__grid {
    align-items: start;
    row-gap: var(--lp-space-l);
  }

  .lp-safeguards__intro {
    display: grid;
    justify-items: start;
    row-gap: var(--lp-space-xs);
  }
  .lp-safeguards__intro > .lp-section-subtitle { margin-block-start: var(--lp-space-3xs); }
  .lp-safeguards__intro > .lp-btn { margin-block-start: var(--lp-space-2xs); }

  .lp-safeguards__list {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-block-end: 1px solid var(--lp-line);
  }

  .lp-safeguard {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: var(--lp-space-s);
    padding-block: var(--lp-space-m);
    border-block-start: 1px solid var(--lp-line);
  }
  .lp-safeguard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface-4);
    box-shadow: var(--lp-ring);
    color: var(--lp-fg-2);
  }
  .lp-safeguard__icon i { font-size: 1.25rem; line-height: 1; }

  /* 3.4 maps this to --lp-fs-h3 in the display cut; it had been set at body
     size in the body cut, which left two rows of body text trying to hold
     seven columns and made the section look unfinished rather than deliberate.
     It also gives the safeguards list a voice the FAQ list does not have:
     three ruled treatments now differ by rhythm - display titles here, mono
     figures on the rates board, body-weight questions in the FAQ - instead of
     differing only by which small glyph sits at the end of the row. */
  .lp-safeguard__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h3);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
    margin-bottom: var(--lp-space-2xs);
  }
  .lp-safeguard__desc {
    font-size: var(--lp-fs-body);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
  }
}

/* ==========================================================================
   16. FAQ  (spec 5.10, 8.15)
   Native details/summary: zero JS, keyboard-operable for free.
   ========================================================================== */
@layer sections {
  .lp-faq__list {
    display: grid;
    gap: 0;
    border-block-end: 1px solid var(--lp-line);
  }

  .lp-faq__item {
    border-block-start: 1px solid var(--lp-line);
  }

  .lp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-s);
    min-height: 56px;
    /* Flush to the rule. The inline padding was the old card's inset; with the
       fill gone it only made the question float 18px inside its own hairline
       while the safeguards list beside it sat flush. */
    padding-block: var(--lp-space-s);
    padding-inline: 0;
    font-size: var(--lp-fs-body);
    font-weight: var(--lp-fw-strong);
    line-height: 1.4;
    color: var(--lp-fg);
    cursor: pointer;
    list-style: none;
  }
  .lp-faq__question::-webkit-details-marker { display: none; }

  .lp-faq__marker {
    flex: 0 0 auto;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--lp-fg-3);
    transition: transform var(--lp-dur-micro) var(--lp-ease-micro);
  }
  /* plus becomes a cross without a second glyph */
  .lp-faq__item[open] .lp-faq__marker { transform: rotate(45deg); }

  .lp-faq__answer {
    padding: 0 0 var(--lp-space-s);
    max-width: var(--lp-measure);
    font-size: var(--lp-fs-body);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   17. CLOSING CTA  (spec 5.11, 2.14 mesh 2 of 2, 8.16)
   One decision, no claims. Raised-panel tier - no lit stroke.
   ========================================================================== */
@layer sections {
  .lp-cta__panel {
    position: relative;
    overflow: hidden;
    padding: var(--lp-space-3xl) var(--lp-space-m-xl);
    background-color: var(--lp-surface-1);
    background-image:
      radial-gradient(46rem 28rem at 12% -30%, rgba(0, 180, 216, 0.22), rgba(0, 180, 216, 0) 64%),
      radial-gradient(38rem 24rem at 92% 130%, rgba(20, 70, 120, 0.24), rgba(20, 70, 120, 0) 62%);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-shadow-2);
  }

  .lp-cta__content {
    display: grid;
    justify-items: center;
    gap: var(--lp-space-s);
    max-width: var(--lp-measure);
    margin-inline: auto;
    text-align: center;
  }

  .lp-cta__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h2);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h2);
    line-height: var(--lp-lh-h2);
    color: var(--lp-fg);
    text-wrap: balance;
  }
  .lp-cta__subtitle {
    font-size: var(--lp-fs-lead);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-lead);
    line-height: var(--lp-lh-lead);
    color: var(--lp-fg-2);
    text-wrap: balance;
  }
  .lp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-s);
    margin-block-start: var(--lp-space-2xs);
  }
  .lp-cta__note {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    /* 9.3.1 correction 6: --lp-fg-2 (6.53:1), not --lp-fg-3 at exactly 4.50. */
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   18. FOOTER  (spec 5.12, 8.17)
   Direct child of <body>, sibling of <main>, so it is a real contentinfo
   landmark. Mobile-first: one column, 2 columns at >= 480px, 2fr + 3x1fr
   at >= 1024px (section 22).
   ========================================================================== */
@layer sections {
  .lp-footer {
    background: var(--lp-surface-1);
    border-top: 1px solid var(--lp-line);
    padding-block: var(--lp-space-2xl) var(--lp-space-l);
  }

  .lp-footer__grid {
    display: grid;
    gap: var(--lp-space-xl);
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-footer__brand {
    display: grid;
    justify-items: start;
    gap: var(--lp-space-s);
  }
  .lp-footer__logo {
    height: 32px;
    width: auto;
  }
  .lp-footer__brand-desc {
    font-size: var(--lp-fs-sm);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-3);
    max-width: 34ch;
  }

  .lp-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-space-2xs);
  }
  .lp-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface-2);
    box-shadow: var(--lp-ring);
    color: var(--lp-fg-2);
    text-decoration: none;
    transition: background-color var(--lp-dur-micro) var(--lp-ease-micro),
                color            var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-footer__social i { font-size: 1.125rem; line-height: 1; }
  .lp-footer__social:hover {
    background: var(--lp-surface-3);
    color: var(--lp-fg);
  }

  .lp-footer__col {
    display: grid;
    align-content: start;
    gap: var(--lp-space-s);
  }
  .lp-footer__col-title {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    font-weight: var(--lp-fw-strong);
    line-height: var(--lp-lh-eyebrow);
    letter-spacing: var(--lp-ls-eyebrow);
    text-transform: uppercase;
    color: var(--lp-fg-3);
  }
  .lp-footer__col-links {
    display: grid;
    gap: var(--lp-space-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .lp-footer__col-link {
    display: inline-flex;
    align-items: center;
    /* 32px + the 2xs gap satisfies the 2.5.8 spacing exception. */
    min-height: 32px;
    font-size: var(--lp-fs-sm);
    color: var(--lp-fg-2);
    text-decoration: none;
    transition: color var(--lp-dur-micro) var(--lp-ease-micro);
  }
  .lp-footer__col-link:hover { color: var(--lp-fg); }

  .lp-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-s);
    border-top: 1px solid var(--lp-line);
    margin-top: var(--lp-space-xl);
    padding-top: var(--lp-space-s);
  }
  .lp-footer__copy {
    font-size: var(--lp-fs-xs);
    color: var(--lp-fg-3);
  }

  .lp-footer__status {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-2xs);
    font-size: var(--lp-fs-xs);
    color: var(--lp-fg-3);
  }
  /* The sentence already changes with the state; the dot is reinforcement. */
  .lp-footer__status-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--lp-radius-full);
    background: var(--lp-positive);
  }
  .lp-footer__status-dot--degraded { background: var(--lp-warn); }

  .lp-footer__legal-note {
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    color: var(--lp-fg-3);
    max-width: var(--lp-measure-tight);
  }
}

/* ==========================================================================
   19. LEGAL PAGES  (spec 6.7, 8.18)
   Shared by LegalPage.razor and PolicyPending.razor, consumed by Privacy,
   Terms, Cookies and AmlPolicy. Every class here is retained by name.
   The section owns its own nav clearance (.lp-main opts out via :has).
   ========================================================================== */
@layer sections {
  .lp-legal {
    padding-block: calc(var(--lp-nav-h) + var(--lp-space-2xl)) var(--lp-space-section);
  }

  /* Compounded with .lp-container; resolves to the 760px band. */
  .lp-legal__container {
    max-width: var(--lp-container-narrow);
  }

  .lp-legal__title {
    font-family: var(--lp-font-display);
    /* A policy page does not get hero type. */
    font-size: var(--lp-fs-h2);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h2);
    line-height: var(--lp-lh-h2);
    color: var(--lp-fg);
    margin-bottom: var(--lp-space-s);
  }
  .lp-legal__summary {
    font-size: var(--lp-fs-lead);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-lead);
    line-height: var(--lp-lh-lead);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
    margin-bottom: var(--lp-space-s);
  }
  .lp-legal__meta {
    display: block;
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    line-height: 1.5;
    color: var(--lp-fg-3);
    margin-bottom: var(--lp-space-xl);
  }

  /* The one place bare-element rules are scoped. */
  .lp-legal__body {
    font-size: var(--lp-fs-body);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
  }
  .lp-legal__body h2 {
    font-size: var(--lp-fs-h3);
    letter-spacing: var(--lp-ls-h3);
    line-height: var(--lp-lh-h3);
    color: var(--lp-fg);
    margin-block: var(--lp-space-l) var(--lp-space-s);
  }
  .lp-legal__body h3 {
    font-family: var(--lp-font-body);
    font-size: var(--lp-fs-body);
    font-weight: var(--lp-fw-strong);
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--lp-fg);
    margin-block: var(--lp-space-m) var(--lp-space-2xs);
  }
  .lp-legal__body p,
  .lp-legal__body li {
    font-size: var(--lp-fs-body);
    color: var(--lp-fg-2);
    margin-block-end: var(--lp-space-s);
  }
  .lp-legal__body ul,
  .lp-legal__body ol {
    padding-inline-start: var(--lp-space-m);
    margin-block-end: var(--lp-space-s);
  }
  /* Inline marker for a fact only the business can supply (legal entity, regulator
     reference, retention period). Deliberately conspicuous: an unfilled slot must
     never be mistaken for finished policy text. */
  .lp-legal__fill {
    padding-inline: 0.35em;
    border-radius: var(--lp-radius-xs);
    background: var(--lp-accent-wash);
    box-shadow: inset 0 0 0 1px var(--lp-accent-dim);
    color: var(--lp-fg);
    font-family: var(--lp-font-mono);
    font-size: 0.9em;
    white-space: nowrap;
  }

  .lp-legal__body a {
    color: var(--lp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lp-legal__body strong { color: var(--lp-fg); }

  /* --- the unpublished-policy notice ------------------------------------ */
  .lp-legal__notice {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: var(--lp-space-s);
    padding: var(--lp-space-s);
    background: var(--lp-surface-2);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-ring);
  }
  .lp-legal__notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-accent-wash);
    color: var(--lp-accent);
  }
  .lp-legal__notice-icon i { font-size: 1.25rem; line-height: 1; }
  .lp-legal__notice-title {
    font-size: var(--lp-fs-body);
    font-weight: var(--lp-fw-strong);
    line-height: 1.4;
    color: var(--lp-fg);
    margin-bottom: var(--lp-space-3xs);
  }
  .lp-legal__notice-text {
    font-size: var(--lp-fs-sm);
    line-height: var(--lp-lh-body);
    color: var(--lp-fg-2);
  }
  .lp-legal__notice-text a {
    color: var(--lp-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ==========================================================================
   20. STATUS PAGES  (spec 6.7, 8.19)
   Error.razor and PageNotFound.razor. Exactly one h1 each.
   ========================================================================== */
@layer sections {
  .lp-status-page {
    display: grid;
    place-items: center;
    min-height: 60svh;
    padding-block: calc(var(--lp-nav-h) + var(--lp-space-2xl)) var(--lp-space-section);
    text-align: center;
  }

  .lp-status-page__container {
    display: grid;
    justify-items: center;
    gap: var(--lp-space-s);
    max-width: var(--lp-container-narrow);
  }

  .lp-status-page__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--lp-radius-lg);
    background: var(--lp-accent-wash);
    color: var(--lp-accent);
    margin-bottom: var(--lp-space-2xs);
  }
  .lp-status-page__icon i { font-size: 2rem; line-height: 1; }
  .lp-status-page__icon--error {
    background: var(--lp-danger-wash);
    color: var(--lp-danger);
  }

  .lp-status-page__title {
    font-family: var(--lp-font-display);
    font-size: var(--lp-fs-h2);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-ls-h2);
    line-height: var(--lp-lh-h2);
    color: var(--lp-fg);
  }
  .lp-status-page__desc {
    font-size: var(--lp-fs-lead);
    font-weight: var(--lp-fw-regular);
    letter-spacing: var(--lp-ls-lead);
    line-height: var(--lp-lh-lead);
    color: var(--lp-fg-2);
    max-width: var(--lp-measure);
  }
  .lp-status-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-s);
    margin-block-start: var(--lp-space-2xs);
  }
  .lp-status-page__ref {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-fs-xs);
    line-height: 1.6;
    color: var(--lp-fg-3);
    overflow-wrap: anywhere;
  }
  .lp-status-page__ref code {
    font-family: var(--lp-font-mono);
    background: var(--lp-surface-2);
    padding: 2px 6px;
    border-radius: var(--lp-radius-xs);
    color: var(--lp-fg-2);
  }
}

/* ==========================================================================
   21. MOTION, UTILITIES AND ACCESSIBILITY  (spec 6.6, 7, 8.20, 8.21, 9.2)
   Total budget: three @keyframes and one scroll-driven timeline. Nothing
   animates width, height, top or left. Exits are ~60% of entrances.
   ========================================================================== */
@layer components {
  /* --- the complete keyframe set. No fourth keyframe may be added. ------- */
  @keyframes lp-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
  }
  @keyframes lp-sheen {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  @keyframes lp-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* --- skeleton loaders (6.6). Always aria-hidden in markup. ------------- */
  .lp-skeleton {
    display: block;
    /* flat fill first: without color-mix the gradient would be dropped whole */
    background: var(--lp-surface-4);
    background: linear-gradient(90deg,
      var(--lp-surface-4) 0%,
      color-mix(in oklab, var(--lp-surface-4) 60%, var(--lp-fg-4)) 50%,
      var(--lp-surface-4) 100%);
    background-size: 200% 100%;
    border-radius: var(--lp-radius-xs);
  }
  .lp-skeleton--line  { height: 1.1em; width: 100%; }
  .lp-skeleton--block { height: 56px;  width: 100%; border-radius: var(--lp-radius-sm); }

  @media (prefers-reduced-motion: no-preference) {
    .lp-skeleton { animation: lp-sheen 1400ms linear infinite; }
  }
}

@layer utilities {
  /* --- the scroll reveal - fails OPEN (7.4) -----------------------------
     Without JS the html.lp-js gate never applies, so every element stays
     visible. Content is never hidden behind a script. */
  .lp-fade-up {
    opacity: 1;
    transform: none;
  }
  html.lp-js .lp-fade-up:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
  }
  html.lp-js .lp-fade-up {
    transition: opacity   var(--lp-dur-reveal) var(--lp-ease-expo) var(--lp-delay, 0ms),
                transform var(--lp-dur-reveal) var(--lp-ease-expo) var(--lp-delay, 0ms);
  }

  .lp-delay-1 { --lp-delay: 60ms; }
  .lp-delay-2 { --lp-delay: 120ms; }
  .lp-delay-3 { --lp-delay: 180ms; }
  .lp-delay-4 { --lp-delay: 240ms; }
  .lp-delay-5 { --lp-delay: 300ms; }
  .lp-delay-6 { --lp-delay: 360ms; }

  /* Grid stagger without markup churn. Total stagger never exceeds 360ms. */
  .lp-rates__grid    > .lp-fade-up:nth-child(2) { --lp-delay: 60ms; }
  .lp-rates__grid    > .lp-fade-up:nth-child(3) { --lp-delay: 120ms; }
  .lp-rates__grid    > .lp-fade-up:nth-child(4) { --lp-delay: 180ms; }
  .lp-rates__grid    > .lp-fade-up:nth-child(5) { --lp-delay: 240ms; }
  .lp-rates__grid    > .lp-fade-up:nth-child(6) { --lp-delay: 300ms; }
  .lp-rates__grid    > .lp-fade-up:nth-child(n + 7) { --lp-delay: 360ms; }

  /* nth-of-type, not nth-child: .lp-steps__rail is a <span> sibling at
     position 1, which pushed every step one slot late. */
  .lp-steps__grid    > .lp-fade-up:nth-of-type(2) { --lp-delay: 60ms; }
  .lp-steps__grid    > .lp-fade-up:nth-of-type(3) { --lp-delay: 120ms; }
  .lp-steps__grid    > .lp-fade-up:nth-of-type(4) { --lp-delay: 180ms; }
  .lp-steps__grid    > .lp-fade-up:nth-of-type(n + 5) { --lp-delay: 240ms; }

  .lp-features__grid > .lp-fade-up:nth-child(2) { --lp-delay: 60ms; }
  .lp-features__grid > .lp-fade-up:nth-child(3) { --lp-delay: 120ms; }
  .lp-features__grid > .lp-fade-up:nth-child(4) { --lp-delay: 180ms; }
  .lp-features__grid > .lp-fade-up:nth-child(5) { --lp-delay: 240ms; }
  .lp-features__grid > .lp-fade-up:nth-child(6) { --lp-delay: 300ms; }
  .lp-features__grid > .lp-fade-up:nth-child(n + 7) { --lp-delay: 360ms; }

  .lp-safeguards__list > .lp-fade-up:nth-child(2) { --lp-delay: 60ms; }
  .lp-safeguards__list > .lp-fade-up:nth-child(3) { --lp-delay: 120ms; }
  .lp-safeguards__list > .lp-fade-up:nth-child(4) { --lp-delay: 180ms; }
  .lp-safeguards__list > .lp-fade-up:nth-child(n + 5) { --lp-delay: 240ms; }

  /* --- screen-reader-only text (9.6) ------------------------------------ */
  .lp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- opt-in figure rendering (already baked into every figure rule) --- */
  .lp-tnum { font-variant-numeric: tabular-nums slashed-zero; }

  /* --- scroll-to-top (5.13) --------------------------------------------- */
  .lp-scroll-top {
    position: fixed;
    inset-block-end: var(--lp-space-s);
    inset-inline-end: var(--lp-space-s);
    z-index: var(--lp-z-scrolltop);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface-3);
    box-shadow: var(--lp-ring), var(--lp-shadow-2);
    color: var(--lp-fg-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity          var(--lp-dur-out) var(--lp-ease-in),
                transform        var(--lp-dur-out) var(--lp-ease-in),
                color            var(--lp-dur-micro) var(--lp-ease-micro),
                background-color var(--lp-dur-micro) var(--lp-ease-micro),
                visibility 0s linear var(--lp-dur-out);
  }
  .lp-scroll-top i { font-size: 1.125rem; line-height: 1; }
  /* A 44px chip whose only hover feedback is an 18px glyph shifting one ink
     step is not feedback. The surface moves too. */
  .lp-scroll-top:hover {
    background: var(--lp-surface-4);
    color: var(--lp-fg);
  }
  .lp-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity          var(--lp-dur-in) var(--lp-ease-out),
                transform        var(--lp-dur-in) var(--lp-ease-out),
                color            var(--lp-dur-micro) var(--lp-ease-micro),
                background-color var(--lp-dur-micro) var(--lp-ease-micro),
                visibility 0s linear 0s;
  }
}

/* --- accessibility: focus, forced colours, reduced motion (9.2, 7.6) ----- */
@layer a11y {
  /* 1. Never suppress the indicator. The string "outline: none" appears
        nowhere else in this stylesheet. */
  :focus-visible {
    outline: 2px solid var(--lp-focus);
    outline-offset: 2px;
  }

  /* 2. Mouse and touch activation must not paint a ring. */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* 3. The halo, on named controls only - never a text node or a whole card.
        The 2px offset is what makes a cyan ring legible on a cyan button. */
  .lp-btn:focus-visible,
  .lp-nav__logo:focus-visible,
  .lp-nav__link:focus-visible,
  .lp-nav__hamburger:focus-visible,
  .lp-nav__mobile-link:focus-visible,
  .lp-footer__col-link:focus-visible,
  .lp-footer__social:focus-visible,
  .lp-scroll-top:focus-visible,
  .lp-skip-link:focus-visible,
  .lp-cur-select__trigger:focus-visible,
  .lp-cur-select__option:focus-visible,
  .lp-calc-card__swap:focus-visible,
  .lp-calc-card__amount:focus-visible,
  .lp-quote__cta:focus-visible,
  .lp-faq__question:focus-visible,
  .lp-legal__body a:focus-visible,
  .lp-legal__notice-text a:focus-visible {
    outline: 2px solid var(--lp-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--lp-focus-halo);
  }

  /* 4. Inside a rounded or clipping container the ring goes inward so it is
        not cut off. .lp-nav__mobile-link is flush with the panel's inline
        edges and the panel is overflow-x: hidden, so an outward ring loses
        both of its vertical strokes. */
  .lp-faq__question:focus-visible,
  .lp-cur-select__option:focus-visible,
  .lp-nav__mobile-link:focus-visible {
    outline-offset: -2px;
  }

  /* 5. The well shows focus for its child input; the input keeps its own
        indicator so the cue survives forced-colors. */
  .lp-calc-card__input-row:focus-within {
    border-color: var(--lp-focus);
    box-shadow: 0 0 0 3px var(--lp-focus-halo);
  }

  /* 6. Forced colours: system colours only, and drop the decoration. */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid CanvasText;
      outline-offset: 2px;
      box-shadow: none;
    }
    :is(.lp-btn, .lp-nav__link, .lp-cur-select__option, .lp-faq__question):focus-visible {
      outline: 3px solid CanvasText;
      outline-offset: 2px;
      box-shadow: none;
    }
    .ph { background-color: CanvasText; }

    /* The three hamburger bars are painted with background-color, exactly
       like the masked glyphs above, so they need the same treatment or the
       only nav control below 1024px disappears. */
    .lp-nav__hamburger-bar { background: CanvasText; }

    /* Every floating surface on the site draws its boundary with
       --lp-ring, i.e. an inset box-shadow, and box-shadow is dropped in
       forced colours. An inset outline restores the edge without touching
       layout. None of these elements is focusable, so it cannot collide
       with the focus ring above. */
    .lp-nav__mobile,
    .lp-cur-select__menu,
    .lp-calc-card,
    .lp-rates__card,
    .lp-rates__empty,
    .lp-legal__notice,
    .lp-status-page__icon {
      outline: 1px solid CanvasText;
      outline-offset: -1px;
    }

    /* .lp-btn carries a transparent border and leans on fill for its shape;
       forced colours removes the fill, so declare a real boundary. */
    .lp-btn { border: 1px solid ButtonBorder; }

    /* Selection in the currency list is an accent wash plus an inset bar -
       a background and a box-shadow, so both are lost. Restore it as a
       border the palette cannot erase, and stand down while the option is
       focused so the two indicators never fight. */
    .lp-cur-select__option[aria-selected="true"]:not(:focus-visible),
    .lp-cur-select__option[aria-current="true"]:not(:focus-visible) {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }

    .lp-steps__rail,
    .lp-hero__wash,
    .lp-body::after { display: none; }
  }

  /* 7. The one sanctioned !important block (7.6). 0.01ms, never `none`:
        `animation: none` can strand an element in its pre-animation state. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .lp-fade-up { opacity: 1 !important; transform: none !important; }
    .lp-hero__eyebrow-dot,
    .lp-quote__badge-dot,
    .lp-calc-card__dot { animation: none !important; opacity: 1 !important; }
    .lp-skeleton { animation: none !important; background: var(--lp-surface-4) !important; }
    .lp-feature:hover { transform: none !important; }
    .lp-calc-card__swap:active { transform: none !important; }
  }
}

/* ==========================================================================
   22. RESPONSIVE OVERRIDES  (spec 4.6)
   One breakpoint set: 480 / 768 / 1024 / 1280, authored as range queries in
   rem (30 / 48 / 64 / 80). No other query exists in this file except the
   two container queries in sections 10 and 11 and the preference queries.
   The page must not scroll horizontally at 320, 375, 768, 1024 or 1440px.
   ========================================================================== */

/* --- below 480px ---------------------------------------------------------
   The rates board must never become an endless list on a phone. */
@layer sections {
  @media (width < 30rem) {
    .lp-rates__grid { grid-template-columns: minmax(0, 1fr); }
    .lp-rates__grid > .lp-rates__card:nth-child(n + 7) { display: none; }
    /* One column: the trailing channel exists to separate columns, and with
       none left it would only pull the figure off the container edge. */
    .lp-rates__card { padding-inline-end: 0; }

    .lp-hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
    .lp-hero__actions > .lp-btn { width: 100%; }
  }
}

/* --- below 768px ---------------------------------------------------------
   Instrument padding relaxes; the currency menus anchor to the trailing edge
   so a 17rem panel can never push past a 320px viewport. */
@layer sections {
  @media (width < 48rem) {
    .lp-quote,
    .lp-calc-card { padding: var(--lp-space-m); }

    .lp-corridors__grid {
      grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    }
  }
}

@layer components {
  @media (width < 48rem) {
    .lp-cur-select__menu {
      /* The room actually left of the trigger's trailing edge: the viewport
         less the container gutters, the card padding at this width and the
         input-row padding. Measuring against 100vw alone let a long currency
         name push the panel ~25px off a 320px screen, where the section's
         overflow-x: clip hid it for good. */
      --lp-menu-room: calc(100vw
        - 2 * var(--lp-space-s-l)
        - 2 * var(--lp-space-m)
        - 2 * var(--lp-space-s));
      inset-inline-start: auto;
      inset-inline-end: 0;
      min-width: min(14rem, var(--lp-menu-room));
      max-width: var(--lp-menu-room);
    }
  }
}

/* --- 480px to 767px ------------------------------------------------------
   Every auto-fit grid resolves to one column except the rates board, which
   stays 2-up, and the currency chips, which stay multi-column. */
@layer sections {
  @media (30rem <= width < 48rem) {
    .lp-rates__grid    { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
    .lp-features__grid { grid-template-columns: minmax(0, 1fr); }
    .lp-steps__grid    { grid-template-columns: minmax(0, 1fr); }
  }
}

/* --- 480px and up --------------------------------------------------------
   Footer becomes two columns with the brand cell spanning both. */
@layer sections {
  @media (width >= 30rem) {
    .lp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-footer__brand { grid-column: 1 / -1; }
  }
}

/* --- 1024px and up -------------------------------------------------------
   The full editorial grid. Asymmetric ratios only - 5/7, 7/5, 8/4, 4/8. */
@layer layout {
  @media (width >= 64rem) {
    .lp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lp-grid > * { grid-column: auto; }
  }
}

@layer sections {
  @media (width >= 64rem) {
    /* Hero: 6 columns of copy, a one-column gutter, 5 columns of quote. */
    .lp-hero__copy  { grid-column: 1 / 7; }
    .lp-quote       { grid-column: 8 / 13; }

    /* Calculator: the card overlaps the intro column by one column, which
       is what stops the section reading as two centred halves. */
    .lp-calculator__intro { grid-column: 1 / 6; }
    .lp-calc-card         { grid-column: 6 / 13; }

    /* Safeguards: 4 columns of intro, a gutter, 7 of list. */
    .lp-safeguards__intro { grid-column: 1 / 5; }
    .lp-safeguards__list  { grid-column: 6 / 13; }

    /* Six cards, so the only balanced resolution is 3x2. Left on auto-fit the
       grid landed on four columns between 1216 and 1360px and orphaned the
       last two cards on a half-empty row. */
    .lp-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Four steps across, so the connector rail is exact. */
    .lp-steps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lp-steps__rail {
      display: block;
      /* The discs sit at the START of their column, not its centre, so the
         rail runs from 20px (centre of disc 1) to one column-width minus 20px
         in from the trailing edge (centre of disc 4). The previous half-column
         inset put the line 116px right of both discs, connecting nothing. */
      inset-inline-start: 20px;
      inset-inline-end: calc((100% - 3 * var(--lp-space-m)) / 4 - 20px);
    }

    .lp-footer__grid {
      grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    }
    .lp-footer__brand { grid-column: auto; }
  }

  /* 1024px to 1279px: the quote panel keeps a readable floor as the band
     narrows. min() keeps it from ever overflowing its own column. */
  @media (64rem <= width < 80rem) {
    .lp-quote { min-width: min(380px, 100%); }
  }
}

@layer components {
  @media (width >= 64rem) {
    /* Links and actions return; the hamburger and its panel leave the DOM
       flow entirely, so they leave the tab order with it (9.2). */
    .lp-nav__links   { display: flex; }
    .lp-nav__actions { display: flex; }
    .lp-nav__hamburger { display: none; }
    .lp-nav__mobile    { display: none; }
  }

  /* 1280px and up: the band is at its 1240px maximum, so the nav can afford
     its full rhythm. */
  @media (width >= 80rem) {
    .lp-nav__links { gap: var(--lp-space-l); }
  }
}

/* ==========================================================================
   14. ICONS  (spec 7.5)
   Phosphor regular, self-contained. The spec called for a self-hosted .woff2,
   but no font file ships with the repo and constraint 4 forbids a CDN or any
   external asset host, so each glyph is inlined here as an SVG mask instead:
   zero requests, zero external hosts, and no markup change - every icon stays
   <i class="ph ph-NAME">. Masks paint with background-color, so glyphs inherit
   `color` like a font would, and the 1em box honours the existing
   `font-size` rules (.lp-btn i, .lp-feature__icon i, ...) unchanged.
   ========================================================================== */
@layer base {
  .ph {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    flex: none;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: var(--lp-icon);
            mask-image: var(--lp-icon);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }

  /* A glyph that somehow loses its --lp-icon paints nothing rather than a
     1em block of solid ink. */
  .ph:not([class*=" ph-"]):not([class^="ph-"]) { background-color: transparent; }

  .ph-arrow-right { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='40' y1='128' x2='216' y2='128'/%3E%3Cpolyline points='144 56 216 128 144 200'/%3E%3C/svg%3E"); }
  .ph-arrow-up { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='128' y1='216' x2='128' y2='40'/%3E%3Cpolyline points='56 112 128 40 200 112'/%3E%3C/svg%3E"); }
  .ph-arrows-down-up { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='88' y1='40' x2='88' y2='216'/%3E%3Cpolyline points='40 168 88 216 136 168'/%3E%3Cline x1='168' y1='216' x2='168' y2='40'/%3E%3Cpolyline points='120 88 168 40 216 88'/%3E%3C/svg%3E"); }
  .ph-calculator { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='40' y='40' width='176' height='176' rx='16'/%3E%3Cline x1='80' y1='88' x2='176' y2='88'/%3E%3Cline x1='80' y1='136' x2='112' y2='136'/%3E%3Cline x1='80' y1='176' x2='112' y2='176'/%3E%3Cline x1='144' y1='136' x2='176' y2='136'/%3E%3Cline x1='144' y1='176' x2='176' y2='176'/%3E%3C/svg%3E"); }
  .ph-caret-down { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='208 96 128 176 48 96'/%3E%3C/svg%3E"); }
  .ph-check { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='216 72 104 184 48 128'/%3E%3C/svg%3E"); }
  .ph-code { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='64 88 16 128 64 168'/%3E%3Cpolyline points='192 88 240 128 192 168'/%3E%3Cline x1='160' y1='40' x2='96' y2='216'/%3E%3C/svg%3E"); }
  .ph-compass { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='128' cy='128' r='96'/%3E%3Cpath d='M168 88 L144 144 L88 168 L112 112 Z'/%3E%3C/svg%3E"); }
  .ph-currency-dollar-simple { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='128' y1='32' x2='128' y2='224'/%3E%3Cpath d='M96,168a32,32 0 0 0 32,24h8a32,32 0 0 0 0,-64h-16a32,32 0 0 1 0,-64h8a32,32 0 0 1 32,24'/%3E%3C/svg%3E"); }
  .ph-device-mobile { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='64' y='24' width='128' height='208' rx='16'/%3E%3Cline x1='104' y1='56' x2='152' y2='56'/%3E%3Cline x1='104' y1='200' x2='152' y2='200'/%3E%3C/svg%3E"); }
  .ph-facebook-logo { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='128' cy='128' r='96'/%3E%3Cpath d='M168,88h-20a20,20 0 0 0 -20,20V224'/%3E%3Cline x1='96' y1='140' x2='160' y2='140'/%3E%3C/svg%3E"); }
  .ph-file-text { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M152,32H64a8,8 0 0 0 -8,8V216a8,8 0 0 0 8,8H192a8,8 0 0 0 8,-8V80Z'/%3E%3Cpolyline points='152 32 152 80 200 80'/%3E%3Cline x1='96' y1='136' x2='160' y2='136'/%3E%3Cline x1='96' y1='176' x2='160' y2='176'/%3E%3C/svg%3E"); }
  .ph-globe-hemisphere-west { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='128' cy='128' r='96'/%3E%3Cellipse cx='128' cy='128' rx='48' ry='96'/%3E%3Cline x1='40' y1='96' x2='216' y2='96'/%3E%3Cline x1='40' y1='160' x2='216' y2='160'/%3E%3C/svg%3E"); }
  .ph-identification-card { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='32' y='56' width='192' height='144' rx='16'/%3E%3Ccircle cx='100' cy='124' r='20'/%3E%3Cpath d='M70,168a34,34 0 0 1 60,0'/%3E%3Cline x1='164' y1='116' x2='192' y2='116'/%3E%3Cline x1='164' y1='152' x2='192' y2='152'/%3E%3C/svg%3E"); }
  .ph-instagram-logo { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='36' y='36' width='184' height='184' rx='48'/%3E%3Ccircle cx='128' cy='128' r='40'/%3E%3Ccircle cx='180' cy='76' r='10' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
  .ph-lightning { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M160 16 L144 104 L208 128 L96 240 L112 152 L48 128 Z'/%3E%3C/svg%3E"); }
  .ph-linkedin-logo { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='40' y='40' width='176' height='176' rx='16'/%3E%3Cline x1='94' y1='112' x2='94' y2='176'/%3E%3Ccircle cx='94' cy='80' r='10' fill='%23000' stroke='none'/%3E%3Cline x1='142' y1='112' x2='142' y2='176'/%3E%3Cpath d='M142,140a26,26 0 0 1 52,0v36'/%3E%3C/svg%3E"); }
  .ph-lock-key { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='40' y='88' width='176' height='136' rx='8'/%3E%3Cpath d='M88,88V56a40,40 0 0 1 80,0V88'/%3E%3Ccircle cx='128' cy='148' r='16'/%3E%3Cline x1='128' y1='164' x2='128' y2='188'/%3E%3C/svg%3E"); }
  .ph-map-trifold { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M96 40 L160 64 L224 40 V192 L160 216 L96 192 L32 216 V64 Z'/%3E%3Cline x1='96' y1='40' x2='96' y2='192'/%3E%3Cline x1='160' y1='64' x2='160' y2='216'/%3E%3C/svg%3E"); }
  .ph-paper-plane-tilt { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M232 24 L24 96 L112 144 L160 232 Z'/%3E%3Cline x1='112' y1='144' x2='232' y2='24'/%3E%3C/svg%3E"); }
  .ph-plus { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='40' y1='128' x2='216' y2='128'/%3E%3Cline x1='128' y1='40' x2='128' y2='216'/%3E%3C/svg%3E"); }
  .ph-question { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='128' cy='128' r='96'/%3E%3Cpath d='M100,100a28,28 0 1 1 28,28v16'/%3E%3Ccircle cx='128' cy='180' r='8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
  .ph-sparkle { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M128 24 L152 104 L232 128 L152 152 L128 232 L104 152 L24 128 L104 104 Z'/%3E%3C/svg%3E"); }
  .ph-twitter-logo { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M128,88c0,-30 26,-47 52,-41 11,3 19,10 27,10 9,0 21,-6 21,-6 -1,7 -5,15 -12,21 7,-1 14,-3 20,-6 -4,8 -13,17 -21,22 1,64 -46,122 -117,122 -27,0 -50,-9 -66,-22 24,2 48,-4 62,-16 -20,-1 -35,-14 -41,-30 6,1 12,1 18,-1 -20,-6 -35,-24 -35,-44 6,3 12,5 19,5 -18,-14 -25,-38 -14,-58 24,29 58,47 97,49Z'/%3E%3C/svg%3E"); }
  .ph-users { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='100' cy='104' r='40'/%3E%3Cpath d='M28,196a80,80 0 0 1 144,0'/%3E%3Cpath d='M164,68a40,40 0 0 1 0,72'/%3E%3Cpath d='M196,196a80,80 0 0 0 -32,-50'/%3E%3C/svg%3E"); }
  .ph-warning-circle { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='128' cy='128' r='96'/%3E%3Cline x1='128' y1='80' x2='128' y2='136'/%3E%3Ccircle cx='128' cy='172' r='8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
  .ph-wifi-slash { --lp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23000' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='40' y1='32' x2='216' y2='224'/%3E%3Cpath d='M24,116a176,176 0 0 1 60,-38'/%3E%3Cpath d='M60,152a128,128 0 0 1 36,-26'/%3E%3Cpath d='M96,188a72,72 0 0 1 20,-16'/%3E%3Cpath d='M172,124a128,128 0 0 1 24,28'/%3E%3Ccircle cx='128' cy='212' r='8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
}