@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic.woff2") format("woff2");
}
/* Georgia scaled to Lora's advance widths and vertical metrics, so the swap
   from fallback to webfont (font-display: swap) does not move or re-break the
   headline. Values measured from the font files with fontTools. */
@font-face {
  font-family: "Lora Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Georgia");
  size-adjust: 105.82%;
  ascent-override: 95.07%;
  descent-override: 25.89%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lora Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 93.33%;
  ascent-override: 107.79%;
  descent-override: 29.36%;
  line-gap-override: 0%;
}
html {
  scroll-behavior: smooth;
  /* Nothing on the page is meant to scroll sideways: every wide thing — the
     backers marquee, the scaled phone mocks — sits in a box that clips it. That
     clipping is `overflow: hidden` on a box whose child is a composited layer,
     which iOS does not always honour, so a stray pixel of overflow turns into a
     pannable page on a phone and nowhere else. `clip` rather than `hidden`: it
     stops the pan without making the root a scroll container, so sticky
     positioning and smooth scrolling are untouched. */
  overflow-x: clip;
}
[id] {
  scroll-margin-top: 96px;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #faf8f4;
  font-family: "DM Sans", Helvetica, sans-serif;
  color: #1f2a35;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
a {
  color: #003050;
  text-decoration: none;
}
a:hover {
  color: #f07000;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
[data-cta] [data-cta-arrow] {
  transition: transform 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}
[data-cta]:hover [data-cta-arrow] {
  transform: translateX(1.25px);
}
[data-cta] [data-cta-pill] {
  transition:
    background 0.45s ease,
    box-shadow 0.45s ease;
}
[data-cta]:hover [data-cta-pill] {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* ===========================================================================
   Responsive layout
   ---------------------------------------------------------------------------
   These rules replace style objects that renderVals() rebuilt from
   vp() on every frame. The two breakpoints mirror the ones the layout was
   authored against: vp.mobile was `innerWidth < 760`, vp.tablet `< 1100`.
   Anything still computed in JS is genuinely dynamic (driven by the hero
   clock or by component state), not a viewport branch.
   =========================================================================== */

/* ── Nav ─────────────────────────────────────────────────────────────────── */
/* The bar rides at the top of the page and sticks there once the banner above
   it has scrolled away. It sits in flow rather than over the hero — it used to
   be absolutely positioned inside the hero wrapper, which has `overflow:
   hidden` and would have clipped a sticky child. The cream background is not
   decoration: without it the page scrolls through the bar. */
/* Logo lockup: the mark and the wordmark share one height, so the pair keeps
   the same proportions wherever it appears — set --brand-h and nothing else.
   The wordmark's font size equals the mark's height and the gap is 0.526 of
   it (20px at 38px).
   Vertical centring is optical: the wordmark's ink — ascender top (0.755em)
   to baseline — is centred on the mark's artwork, whose centre is 0.006 of
   its height below the PNG's. Centring the caps alone leaves the ascenders
   flush with the mark's top and a gap under the baseline, so it reads high.
   text-box trims the span to cap height + baseline, making the flex centre
   independent of how each browser applies Lora's ascent/descent; the ink
   centre is then 0.0275em above the box centre, so it drops 0.034em. */
.brand {
  --brand-h: 38px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand-h) * 0.526);
  color: #003050;
}
.brand:hover {
  color: #003050;
}
.brand img {
  display: block;
  height: var(--brand-h);
  width: auto;
}
.brand span {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  font-weight: 500;
  font-size: var(--brand-h);
  letter-spacing: -0.015em;
  line-height: 1;
  position: relative;
  /* no text-box: the line box centre is 0.366em above the baseline */
  top: 0.018em;
}
@supports (text-box: trim-both cap alphabetic) {
  .brand span {
    text-box: trim-both cap alphabetic;
    top: 0.034em;
  }
}
.brand-nav {
  --brand-h: clamp(28px, 3.4vw, 38px);
}
.brand-footer {
  --brand-h: 32px;
}
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 20px 24px;
  background: #ffffff;
}
/* the links sit with the button on the right, not centred across the bar: the
   auto margin takes the free space so only the logo stays on the left edge */
.nav-links {
  display: flex;
  gap: clamp(28px, 3.2vw, 44px);
  align-items: center;
  margin-left: auto;
  margin-right: clamp(28px, 3.2vw, 44px);
  min-height: 24px;
  flex-wrap: wrap;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #003050;
  color: #faf8f4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* no arrow pill in the bar, so the padding is even — the hero's copy of this
     button keeps its own (`.hero-cta`) */
  padding: 10px 22px;
  border-radius: 999px;
  transition: background 0.45s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: #002540;
  color: #faf8f4;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  margin: -8px -10px -8px 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 26px;
  background: #003050;
  border-radius: 2px;
  transition: transform 0.3s ease;
}
/* the bars cross into an X while the sheet is open — aria-expanded already
   carries that state, so it drives the visual instead of a second binding */
.nav-burger[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 759.98px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  /* the hero's button borrows .nav-cta for its shape, but it is not the nav —
     the burger replaces the bar's button, not this one */
  .hero-cta {
    display: inline-flex;
  }
  .nav-burger {
    display: flex;
  }
}

/* ── Hero head ───────────────────────────────────────────────────────────── */
/* The copy sits above the card, on the cream page rather than over the footage:
   headline and lede on the left, the CTA on its own on the right, both baselined
   on the bottom of the block so the button lines up with the lede. */
.hero-section {
  /* the nav is in flow above this, so only the gap under it is needed here */
  padding: clamp(32px, 4.5vh, 56px) 24px 24px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vh, 32px);
}
.hero-head {
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.hero-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
  color: #003050;
  max-width: 16ch;
  text-wrap: balance;
}
/* the nav's button, one size up: same shape, hover and arrow pill */
.hero-cta {
  flex-shrink: 0;
  font-size: 15px;
  padding: 8px 8px 8px 28px;
  gap: 14px;
}
/* the render loop still writes to the bar; it has been hidden since the clip
   stopped being a stepped sequence */
.hero-bar {
  display: none;
}

/* ── Hero card ───────────────────────────────────────────────────────────── */
.hero-card {
  position: relative;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  /* The clip has to be spelled out as well: the hero video is composited on its
     own layer, and a plain rounded `overflow: hidden` does not clip it — the
     corners paint square. It reads as an asymmetry rather than four square
     corners only because the left of the card is opaque navy against the cream
     page while the right blends into the bright footage. */
  clip-path: inset(0 round 16px);
  background: #eee4d2;
  background-size: cover;
  background-position: center;
  /* The copy above it takes roughly 300 px of the first screen, so the card
     takes what is left rather than the old full `100vh - 96px`. The `42vw`
     is a floor on the proportions: on a short, wide screen `100vh - 400px`
     alone left the clip a ~2.8:1 letterbox, and this holds it near 2.3:1. */
  height: max(440px, calc(100vh - 400px), 42vw);
  min-height: 0;
  max-height: 820px;
}
/* The clip's first frame. On the desktop viewports it sits behind the video,
   which fades in over it; on a phone, where the video is never loaded, it is
   the hero image itself — a still of the same shot rather than bare cream.
   It is the card's background rather than the video's `poster` attribute so
   the two cases share one declaration and one request. */
.hero-card {
  background-image: url("../hero-poster.jpg");
}
/* The clip's geometry is set from JS (site.js, `v1Style`) once the render loop
   starts — but site.js is the last of nine scripts, so until it runs the video
   is an in-flow replaced element and the headline sits wherever its intrinsic
   box leaves room. Declaring the same geometry here puts it out of flow at
   first paint instead: that shift was 0.71 of the page's 0.712 CLS. `opacity`
   matches the fade-in's t=0 value so the poster does not flash beforehand. */
.hero-card > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
/* the wash that keeps the headline legible over the footage */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 48, 80, 0.62) 0%,
    rgba(0, 48, 80, 0.4) 38%,
    rgba(0, 48, 80, 0.14) 70%,
    rgba(0, 48, 80, 0) 100%
  );
}
.hero-copy {
  min-width: 0;
}
.hero-phone {
  position: absolute;
  right: clamp(24px, 3.4vw, 48px);
  bottom: 0;
  z-index: 11;
  perspective: 1600px;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* ── Audiences card ──────────────────────────────────────────────────────── */
/* the device is a fraction of its card, so on a phone it reads as a mock, not an app */
.aud-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  /* the device inside is transform-scaled, so spell the clip out — see .hero-card */
  clip-path: inset(0 round 24px);
  min-height: 700px;
  background: #eee4d2;
}
.aud-phone {
  position: absolute;
  right: 28px;
  margin-right: 0;
  bottom: -232px;
  perspective: 1600px;
  transform: scale(1);
  transform-origin: 100% 100%;
}
/* The rebalance mock is a picture of the app, not a second page: its list
   scrolls via an inline style, so override that to keep the wheel and touch
   on the page. The sliders stay interactive. */
.aud-phone .pl-scroll {
  overflow-y: hidden !important;
}
.aud-copy {
  position: relative;
  z-index: 10;
  padding: 40px 48px 340px;
}

@media (max-width: 1099.98px) {
  .hero-phone {
    right: 32px;
  }
  .aud-phone {
    transform: scale(0.86);
  }
}

@media (max-width: 759.98px) {
  /* the card grows to carry the device: the phone is part of the phone layout
     now, centred under the copy and flush with the bottom edge. It is sized to
     the device rather than the viewport — the copy sits at the top, the phone
     at the bottom, and anything beyond the two is dead space between them. */
  .hero-card {
    /* A placeholder for the first paint only: site.js sets the real height from
       the device (`heroCardStyle`), which lands within ~15 px of this on every
       phone, so the correction does not shift the page. */
    height: 340px;
    min-height: 0;
    max-height: none;
  }
  /* nothing is read over the card on a phone either — an even tint, just enough
     to keep the device readable against the still */
  .hero-veil {
    background: linear-gradient(
      180deg,
      rgba(0, 48, 80, 0.5) 0%,
      rgba(0, 48, 80, 0.32) 60%,
      rgba(0, 48, 80, 0.16) 100%
    );
  }
  /* no clip on a phone: the card is the veil gradient over the still frame.
     The still is landscape and the card is portrait, so `cover` crops to the
     middle column — where the subject stands. */
  .hero-card > video {
    display: none;
  }
  .hero-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-phone {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .aud-card {
    min-height: 560px;
  }
  .aud-phone {
    right: 50%;
    margin-right: -98px;
    bottom: -140px;
    transform: scale(0.62);
  }
  .aud-copy {
    padding: 32px 24px 300px;
  }
}

/* ===========================================================================
   Components
   ---------------------------------------------------------------------------
   Style strings that were repeated across the markup, now declared once.
   Hover states that were `style-hover` attributes (compiled by the runtime
   into generated .scpN:hover rules) are plain CSS here.
   =========================================================================== */

.wrap {
  max-width: 1408px;
  margin: 0 auto;
}
.fill {
  position: absolute;
  inset: 0;
}
.stack-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Nav / menu links ────────────────────────────────────────────────────── */
.nav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #003050;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.nav-link:hover {
  color: #f07000;
}

.menu-link {
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #003050;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.menu-link:hover {
  background: #eee4d2;
  color: #003050;
}

/* ── Call to action ──────────────────────────────────────────────────────── */
.cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #003050;
  color: #faf8f4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  transition: background 0.45s ease;
}
.cta-dark:hover {
  background: #002540;
  color: #faf8f4;
}

.cta-pill {
  display: inline-flex;
  background: #faf8f4;
  border-radius: 999px;
  padding: 8px;
  color: #003050;
}

/* ── Logos ───────────────────────────────────────────────────────────────── */
/* height stays inline — it is per-logo optical sizing, not a shared rule */
.logo-img {
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}

/* The "Built for" protocol row is a label, not copy: no text selection, and the
   logos can't be dragged out as images. */
.built-for {
  -webkit-user-select: none;
  user-select: none;
}
.built-for img {
  -webkit-user-drag: none;
  pointer-events: none;
}
/* one item in the backers marquee */
.backer {
  margin: 0 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* a named protocol in the "Built for" row */
.protocol {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #5a6671;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
}
.protocol-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 7px;
}

/* The FAQ answers and the regulatory notice's body carry a darker ink than the
   headings around them. The FAQ rule is scoped to the card because `.body-sm`
   is shared with sections above. */
.faq-card .body-sm,
.footer-notice > div:not(.footer-notice-label) {
  color: #1a1a2e;
}

/* ── Type ────────────────────────────────────────────────────────────────── */
/* the small line that labels a section above its heading */
.eyebrow {
  margin: 0 0 12px;
  color: #f07000;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Every headline is set in the serif, the same face the wordmark uses; DM Sans
   (the body default) carries everything else. The h2s are styled inline and
   none of them declares a family, so this rule reaches all of them. */
h1,
h2,
h3 {
  font-family: "Lora", "Lora Fallback", Georgia, serif;
}
.display {
  display: block;
  color: #003050;
  font-weight: 300;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-family: "Lora", "Lora Fallback", Georgia, serif;
}
.card-title {
  margin: 0;
  color: #003050;
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-family: "DM Sans", Helvetica, sans-serif;
}
.modal-title {
  margin: 0;
  color: #003050;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.lede {
  margin: auto 0 0;
  color: #1f2a35;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  font-family: "DM Sans", Helvetica, sans-serif;
}
.body {
  margin: 0;
  color: #1f2a35;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.body-sm {
  margin: 0;
  color: #003050;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.panel-lede {
  margin: 0;
  color: #faf8f4;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.panel-body {
  margin: 0;
  color: #eee4d2;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── Numbered steps ──────────────────────────────────────────────────────── */
/* Accordion: the headings stay visible, a row's body reveals on click. The
 * open row is driven from site.js, which sets `is-open` on it. */
.step-row {
  cursor: pointer;
  padding: 18px 24px;
  border-radius: 20px;
  background: transparent;
  transition:
    background 0.35s ease,
    padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-row:hover {
  background: rgba(255, 255, 255, 0.7);
}
.step-row.is-open {
  /* the top padding matches the closed row: growing it too would nudge the
     number pill down as the row opens */
  padding: 18px 24px 24px;
  background: #ffffff;
}
.step-head {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: inherit;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
}
.step-heading {
  font-family: "DM Sans", Helvetica, sans-serif;
  margin: 0;
  color: #003050;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* the 0fr → 1fr grid row is what animates; the child must be able to shrink */
.step-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}
.step-row.is-open .step-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.step-body > .body {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px 0 4px 44px;
}
.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eee4d2;
  color: #003050;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
/* + when closed, − when open: the vertical stroke collapses into the bar */
.step-num-v {
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-row.is-open .step-num {
  background: #f07000;
  color: #faf8f4;
}
.step-row.is-open .step-num-v {
  transform: scaleY(0);
}
.step-title {
  margin: 0 0 6px;
  color: #003050;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.feature-card {
  font-family: "DM Sans", Helvetica, sans-serif;
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(28px, 3vw, 44px);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── One-offs (were style-hover attributes) ─────────────────────────────── */
/* full-width CTA at the bottom of the mobile menu sheet */
.menu-cta {
  margin: 8px 0 0;
  padding: 14px 20px;
  border-radius: 12px;
  background: #003050;
  color: #faf8f4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-cta:hover {
  background: #002540;
  color: #faf8f4;
}

/* the round arrow badge on the section CTA */
.pill-accent {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f07000;
  color: #faf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}

.link-inline {
  color: #003050;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-inline:hover {
  color: #f07000;
}
.link-muted {
  color: #5a6671;
}
.link-muted:hover {
  color: #f07000;
}
.note-toggle:hover {
  color: #f07000;
}
.send-btn:hover {
  background: #f07000;
}
/* In flight. The button's own look is an inline style attribute, so this has
 * to come from a class — a scripted style write would replace the lot. */
.send-btn:disabled {
  opacity: 0.6;
}
.send-btn:disabled:hover {
  background: #003050;
}
.pill-accent:hover {
  background: #d75f00;
}

/* The backers marquee. Two copies of the row scroll one row-width; the keyframe
   is at the top of this file. */
.backers-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

/* Enquiry form fields — previously a `style-focus` attribute on each control. */
.field:focus {
  border-color: #003050;
}

/* The announcement banner above the nav. It carries the regulatory line only —
 * the product claim that used to sit beside it is back in the hero lede. */
.top-banner {
  position: relative;
  z-index: 30;
  background: #003050;
  color: #ffffff;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
  text-align: center;
  font-size: clamp(15.6px, 1.2vw, 18px);
  line-height: 1.5;
  font-weight: 500;
}

.hero-lede {
  /* collapses against the headline's 16px, so this is the gap between the two */
  margin: 28px 0 0;
  color: #003050;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.45;
  font-weight: 400;
  /* No measure cap: .hero-copy is already narrow, and a cap here only forced a
   * break mid-phrase. `pretty` keeps a single word off the last line. */
  text-wrap: pretty;
}

/* The EU flag that marks the MiCAR line in the banner. */
.eu-flag {
  width: auto;
  height: 0.85em;
  margin-right: 0.4em;
  vertical-align: -0.08em;
  border-radius: 2px;
  /* a white edge, the usual treatment for a flag on a dark ground: the EU blue
     would otherwise sink into the navy banner. A shadow, so size and spacing
     stay as they were. */
  box-shadow: 0 0 0 0.1em #ffffff;
}
.eu-flag-end {
  margin-right: 0;
  margin-left: 0.4em;
}
/* the closing flag belongs to the last words, never alone on a line of its own */
.banner-tail {
  white-space: nowrap;
}
/* one line while it fits; below that the break lands after the dash */
.banner-break {
  display: none;
}
@media (max-width: 759.98px) {
  .banner-break {
    display: inline;
  }
}

/* The middle feature card keeps the sand ground. */
.feature-card-sand {
  background: #eee4d2;
}
/* Ønramp's slashed zero: a real 0 with the stroke drawn over it, so it reads as
   the brand's Ø at any size instead of depending on a font's slashed-zero. */
.zero-slash {
  position: relative;
  display: inline-block;
  font-variant-numeric: slashed-zero;
}
.zero-slash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.58em;
  height: 0.055em;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-32deg);
  border-radius: 0.04em;
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* The regulatory notice leads, under its own label; the mark and the links
   close the page beneath a hairline. */
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1408px;
  margin: 0 auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: 13px;
  color: #5a6671;
}
.footer-notice {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px 56px;
  max-width: 980px;
  color: #1f2a35;
  font-size: 14px;
  line-height: 1.6;
}
.footer-notice-label {
  grid-column: 1 / -1;
  color: #003050;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* third column: the illustration sits beside the two notice paragraphs, and
   only once there's room for all three side by side */
.footer-illo {
  display: none;
  width: 200px;
  height: auto;
  place-self: center;
}
@media (min-width: 1100px) {
  .footer-notice {
    /* the paragraphs keep their measure; the spare width goes to the last
       column, which the illustration is centred in */
    grid-template-columns: minmax(0, 460px) minmax(0, 460px) minmax(220px, 1fr);
    max-width: none;
  }
  /* the label stops short of the last column so the illustration can span
     both rows and centre on the whole notice, label included */
  .footer-notice-label {
    grid-column: 1 / 3;
  }
  .footer-illo {
    display: block;
    grid-column: 3;
    grid-row: 1 / 3;
  }
}
.footer-mark {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 48, 80, 0.14);
  width: 100%;
}