/* ============================================================================
   HarbourX public site
   ----------------------------------------------------------------------------
   The stylesheet for home.html — the page the domain root serves to a visitor
   who is not signed in. Everything behind the sign-in lives in portal.css and
   dashboard.css; this file is the only one that styles the public marketing
   site, so it can be edited without any risk to the client workspace.

   It reads the same brand palette as the sign-in page (navy + teal, Plus
   Jakarta Sans through --hx-font) and the same motion vocabulary from
   hx-motion.css, so the site and the product look like one company.

   Structure, in the order the sections appear in the markup:

     1. tokens            the palette, in one place
     2. base              reset, typography, focus
     3. primitives        .wrap, .eyebrow, .btn, section headings
     4. header            sticky navigation and the mobile drawer
     5. hero              headline, calls to action, portfolio visual
     6. proof             the counted statistics band
     7. solutions         what the platform does, as cards
     8. difference        alternating copy-and-panel rows
     9. process           the numbered path to a funded account
    10. voices            client quotes
    11. recognition       coverage and compliance strip
    12. faq               questions, as native disclosure widgets
    13. cta               the closing invitation
    14. footer            navigation, legal, risk notice
    15. documents         the Terms, Privacy and Complaints pages
    16. responsive        tablet and phone
   ========================================================================== */

/* ------------------------------------------------------------------ 1 tokens */

:root {
  color-scheme: dark;

  /* brand constants — the same values the sign-in page uses */
  --navy-900: #071829;
  --navy-800: #0b2545;
  --navy-700: #12365f;
  --teal-600: #0e938e;
  --teal-500: #14b8ad;
  --teal-400: #2ed3c6;
  --sand: #d8a55b;

  /* surfaces */
  --page: #050d16;
  --page-2: #08131f;
  --panel: #0d1c2a;
  --panel-2: #102231;
  --ink: #eef5f8;
  --copy: #b3c5d2;
  --muted: #8399a9;
  --line: #1c3140;
  --line-soft: #162835;

  /* the hero, the closing band and the footer sit a shade deeper than the
     page and carry their own typography, so they keep their own tokens */
  --dark-bg: #040c15;
  --dark-ink: #f2f7f9;
  --dark-copy: #b7c8d5;
  --dark-muted: #8da3b4;
  --dark-line: rgba(255, 255, 255, .12);
  --dark-panel: rgba(255, 255, 255, .055);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px -14px rgba(0, 0, 0, .7);
  --shadow-md: 0 22px 50px -28px rgba(0, 0, 0, .8);
  --shadow-lg: 0 46px 100px -50px rgba(0, 0, 0, .9);

  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* the horizontal rhythm every section shares */
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1200px;
  --section-y: clamp(72px, 9vw, 132px);
}

/* -------------------------------------------------------------------- 2 base */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the sticky header must not cover the target of an in-page link */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--copy);
  font-family: var(--hx-font, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
  /* a phone-width page must never scroll sideways */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}

h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Available to a screen reader, invisible on screen. Used for the skip link
   and for headings that only exist to keep the outline complete. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  transform: translate(-50%, -140%);
  transition: transform var(--hx-dur-base, 240ms) var(--hx-ease-out, ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* -------------------------------------------------------------- 3 primitives */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--page-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--teal-600);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(20, 184, 173, .18);
}

/* The standard block above a section: eyebrow, heading, one paragraph. */
.sec-head { max-width: 680px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head p { margin-top: 18px; font-size: 1.08rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--hx-dur-fast, 160ms) var(--hx-ease-spring, ease),
    box-shadow var(--hx-dur-base, 240ms) var(--hx-ease-out, ease),
    background-color var(--hx-dur-base, 240ms) ease,
    border-color var(--hx-dur-base, 240ms) ease,
    color var(--hx-dur-base, 240ms) ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  color: #032220;
  box-shadow: 0 14px 34px -14px rgba(20, 200, 187, .6);
}
.btn--primary:hover { background: linear-gradient(135deg, var(--teal-400), var(--teal-500)); }

.btn--ghost {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--teal-500); color: var(--teal-600); }

/* On the navy bands the buttons invert rather than switch palette. */
.on-dark .btn--primary {
  background: var(--teal-500);
  color: #04221f;
  box-shadow: 0 16px 36px -14px rgba(20, 184, 173, .6);
}
.on-dark .btn--primary:hover { background: var(--teal-400); }
.on-dark .btn--ghost {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  box-shadow: none;
}
.on-dark .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* A text link that carries an arrow and slides it on hover. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--teal-600);
  font-weight: 700;
  font-size: .96rem;
}
.link-more svg { width: 16px; height: 16px; transition: transform var(--hx-dur-base, 240ms) var(--hx-ease-out, ease); }
.link-more:hover svg { transform: translateX(4px); }
.link-more { color: var(--teal-400); }

/* Ticked list, used inside the difference rows and the hero. */
.ticks { display: grid; gap: 13px; }
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 1rem;
}
.ticks svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(20, 184, 173, .14);
  color: var(--teal-400);
}

.card {
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ 4 header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  /* The hero is navy, so the bar starts transparent and inherits the light
     typography. It picks up a solid background once the page is scrolled,
     which is the .is-stuck class home.html's scroll listener adds. */
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--hx-dur-base, 240ms) ease,
    border-color var(--hx-dur-base, 240ms) ease,
    backdrop-filter var(--hx-dur-base, 240ms) ease;
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 78px;
}

.site-head.is-stuck {
  /* the flat colour first, so a browser without color-mix() still gets an
     opaque bar rather than type over the hero */
  background: var(--page);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

/* While the bar is over the navy hero it takes the inverted treatment. Once
   it is stuck to a page background it drops back to the ordinary tokens, so
   only this one state needs spelling out. */
.site-head:not(.is-stuck) .brand,
.site-head:not(.is-stuck) .site-nav a { color: #fff; }
.site-head:not(.is-stuck) .brand small { color: rgba(255, 255, 255, .62); }
.site-head:not(.is-stuck) .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .26); }

.site-head:not(.is-stuck) .btn--ghost {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  box-shadow: none;
}
.site-head:not(.is-stuck) .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }

/* Navy on navy is unreadable, so the primary action goes teal over the hero
   and back to navy — or teal again, in the dark theme — once it is stuck. */
.site-head:not(.is-stuck) .btn--primary {
  background: var(--teal-500);
  color: #04221f;
  box-shadow: 0 14px 30px -14px rgba(20, 184, 173, .6);
}
.site-head:not(.is-stuck) .btn--primary:hover { background: var(--teal-400); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--teal-500), var(--teal-600));
  color: #04231f;
  box-shadow: 0 10px 22px -12px rgba(20, 184, 173, .8);
}
.brand__mark svg { width: 24px; height: 24px; }
.brand b { display: block; font-size: 1.12rem; line-height: 1.1; }
.brand small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-nav ul { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 600;
  /* a two-word label breaking over two lines would stretch the whole bar */
  white-space: nowrap;
  transition: background-color var(--hx-dur-fast, 160ms) ease, color var(--hx-dur-fast, 160ms) ease;
}
.site-nav a:hover { background: rgba(255, 255, 255, .12); }
.site-head.is-stuck .site-nav a:hover { background: var(--panel-2); color: var(--teal-600); }

.head-actions { display: flex; align-items: center; gap: 10px; }
.head-actions .btn { padding: 11px 20px; font-size: .92rem; }

/* Only shown below the tablet breakpoint. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* The phone menu. Hidden from assistive tech and from pointer events until
   .is-open, so a closed drawer is never a tab stop behind the page. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: 1fr;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--hx-dur-base, 240ms) ease, visibility var(--hx-dur-base, 240ms);
}
.nav-drawer.is-open { visibility: visible; opacity: 1; }
/* visibility:hidden also takes the closed drawer out of the tab order and the
   accessibility tree, so no [hidden] attribute or inert polyfill is needed. */
body.nav-open { overflow: hidden; }
.nav-drawer__scrim { position: absolute; inset: 0; background: rgba(4, 12, 21, .6); }
.nav-drawer__panel {
  position: relative;
  margin-left: auto;
  width: min(88vw, 360px);
  height: 100%;
  padding: 24px var(--gutter) 32px;
  overflow-y: auto;
  background: var(--page);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(14px);
  transition: transform var(--hx-dur-slow, 380ms) var(--hx-ease-out, ease);
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.nav-drawer__top .brand { color: var(--ink); margin-right: 0; }
.nav-drawer__top .brand small { color: var(--muted); }
.nav-drawer ul { display: grid; gap: 2px; margin-bottom: 26px; }
.nav-drawer ul a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}
.nav-drawer ul a:hover { color: var(--teal-600); }
.nav-drawer .btn { width: 100%; margin-bottom: 10px; }

/* -------------------------------------------------------------------- 5 hero */

.hero {
  position: relative;
  /* pulled up under the transparent header */
  margin-top: -78px;
  padding-top: calc(78px + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(72px, 9vw, 128px);
  overflow: hidden;
  background:
    radial-gradient(820px 560px at 84% 6%, rgba(20, 184, 173, .26), transparent 62%),
    radial-gradient(700px 640px at 4% 98%, rgba(48, 88, 160, .3), transparent 60%),
    linear-gradient(162deg, #0a2136 0%, var(--dark-bg) 58%, #04101b 100%);
  color: var(--dark-copy);
}

/* A faint engineering grid, the same device the sign-in panel uses. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(900px 620px at 50% 12%, #000 38%, transparent 82%);
  -webkit-mask-image: radial-gradient(900px 620px at 50% 12%, #000 38%, transparent 82%);
  pointer-events: none;
}

.hero > .wrap { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--teal-400); }
.hero__copy > p { margin-top: 24px; max-width: 54ch; color: var(--dark-copy); }
/* The eyebrow on any navy band. */
.on-dark .eyebrow {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  color: #c8f5f0;
}
.hero .btn-row { margin-top: 34px; }

.hero__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--dark-line);
}
.hero__assurance li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--dark-muted);
  font-size: .9rem;
  font-weight: 600;
}
.hero__assurance svg { width: 17px; height: 17px; color: var(--teal-400); flex: none; }

/* ---- the portfolio visual --------------------------------------------- */

.hero__visual { position: relative; }

.port-card {
  position: relative;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85);
  color: #fff;
}

.port-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dark-line);
}
.port-card__label {
  color: var(--dark-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.port-card__total {
  margin-top: 6px;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.port-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(54, 229, 165, .16);
  color: #6ff0be;
  font-size: .84rem;
  font-weight: 700;
}
.port-card__delta svg { width: 14px; height: 14px; }

/* the allocation bar and its legend */
.alloc { margin-top: 22px; }
.alloc__bar {
  display: flex;
  height: 9px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.alloc__bar span { height: 100%; }
.alloc__bar span:nth-child(1) { width: 58%; background: linear-gradient(90deg, var(--teal-500), var(--teal-400)); }
.alloc__bar span:nth-child(2) { width: 27%; background: #5b8def; }
.alloc__bar span:nth-child(3) { width: 15%; background: var(--sand); }
.alloc__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.alloc__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark-copy);
  font-size: .86rem;
  font-weight: 600;
}
.alloc__legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.alloc__legend li:nth-child(1) i { background: var(--teal-400); }
.alloc__legend li:nth-child(2) i { background: #5b8def; }
.alloc__legend li:nth-child(3) i { background: var(--sand); }

/* the two figures under the allocation */
.port-card__rows { display: grid; gap: 10px; margin-top: 22px; }
.port-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--dark-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
}
.port-card__row small {
  display: block;
  color: var(--dark-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.port-card__row strong { font-size: 1.04rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.port-card__row em {
  font-style: normal;
  color: #6ff0be;
  font-size: .86rem;
  font-weight: 700;
}

/* A small chip that hangs off the card's bottom edge. It stays in flow and
   is pulled up by exactly the card's bottom padding, so it overlaps the edge
   without ever landing on a figure however the rows above it reflow. */
.hero__chip {
  position: relative;
  z-index: 2;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: -26px 0 0 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: rgba(8, 24, 38, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9);
  color: #fff;
}
.hero__chip svg { width: 22px; height: 22px; color: var(--teal-400); flex: none; }
.hero__chip small {
  display: block;
  color: var(--dark-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__chip strong { font-size: .98rem; }

/* ------------------------------------------------------------------- 6 proof */

.proof {
  /* lifted into the hero's lower edge so the two read as one composition */
  position: relative;
  z-index: 2;
  margin-top: calc(var(--section-y) * -.42);
}
.proof__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-md);
}
.proof__cell {
  padding: 30px 26px;
  background: var(--panel);
  text-align: center;
}
.proof__cell strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.proof__cell span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .89rem;
  font-weight: 600;
  line-height: 1.4;
}

/* --------------------------------------------------------------- 7 solutions */

.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sol {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--hx-dur-base, 240ms) var(--hx-ease-out, ease),
    box-shadow var(--hx-dur-base, 240ms) var(--hx-ease-out, ease),
    border-color var(--hx-dur-base, 240ms) ease;
}
.sol:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 184, 173, .4);
  box-shadow: var(--shadow-md);
}
.sol__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(20, 184, 173, .18), rgba(11, 37, 69, .1));
  color: var(--teal-600);
}
.sol__icon svg { width: 26px; height: 26px; }
.sol__icon { color: var(--teal-400); }
.sol h3 { margin-bottom: 12px; }
.sol p { color: var(--copy); font-size: .99rem; }
.sol__list { margin-top: 20px; display: grid; gap: 9px; }
.sol__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
}
.sol__list svg { width: 16px; height: 16px; margin-top: 4px; color: var(--teal-600); }
.sol__list svg { color: var(--teal-400); }
.sol .link-more { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* -------------------------------------------------------------- 8 difference */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.split + .split { margin-top: clamp(64px, 8vw, 112px); }
/* the second row reads copy-right, panel-left */
.split--flip .split__copy { order: 2; }

.split__copy h2 { margin-bottom: 20px; }
.split__copy > p { margin-bottom: 26px; }
.split__copy .ticks { margin-bottom: 30px; }

/* The illustrative panel beside the copy. Built from type and rules rather
   than photography, so there is no asset to go missing. */
.figure {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(520px 320px at 88% 0%, rgba(20, 184, 173, .12), transparent 62%),
    var(--panel-2);
  box-shadow: var(--shadow-sm);
}
.figure__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.figure__head strong { color: var(--ink); font-size: 1.02rem; }
.figure__head span { color: var(--muted); font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* a stack of labelled lines, used for the fee breakdown */
.ledger { display: grid; gap: 2px; }
.ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .96rem;
}
.ledger li:last-child { border-bottom: 0; }
.ledger li b { color: var(--ink); font-weight: 700; }
.ledger li span { color: var(--muted); font-weight: 600; }
.ledger li strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger li.is-total {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
  border-bottom: 0;
}
.ledger li.is-total strong { font-size: 1.15rem; }
.ledger .tag {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(54, 229, 165, .16);
  color: #0e8a63;
  font-size: .78rem;
  font-weight: 700;
}
.ledger .tag { color: #6ff0be; }

/* the compliance checklist panel */
.checks { display: grid; gap: 12px; }
.checks li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.checks__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 184, 173, .14);
  color: var(--teal-600);
}
.checks__dot svg { width: 17px; height: 17px; }
.checks__dot { color: var(--teal-400); }
.checks b { display: block; color: var(--ink); font-size: .97rem; }
.checks small { display: block; color: var(--muted); font-size: .85rem; }
.checks em {
  font-style: normal;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- 9 process */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
/* The connecting rule between steps. It is decorative, so it is drawn on the
   card rather than added to the markup, and dropped once they stack. */
.step::after {
  content: "";
  position: absolute;
  top: 54px;
  left: 100%;
  width: 20px;
  height: 1px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--teal-500), var(--teal-600));
  color: #04231f;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step__num::before { counter-increment: step; content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: 10px; font-size: 1.1rem; }
.step p { color: var(--copy); font-size: .95rem; }
.step small {
  display: inline-block;
  margin-top: 16px;
  color: var(--teal-600);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.step small { color: var(--teal-400); }

/* ------------------------------------------------------------------ 10 voices */

.voices-shell { position: relative; }
.voices-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.voices-nav__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.voices-nav__button:hover {
  border-color: var(--teal-500);
  background: var(--teal-600);
  color: #fff;
}
.voices-nav__button:focus-visible { outline: 3px solid rgba(19, 190, 178, .38); outline-offset: 3px; }
.voices-nav__button:disabled { cursor: default; opacity: .35; }
.voices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.voices::-webkit-scrollbar { display: none; }
.voice {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.voice__stars { display: flex; gap: 3px; margin-bottom: 20px; color: var(--sand); }
.voice__stars span { font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.voice__stars svg { width: 17px; height: 17px; }
.voice blockquote {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.58;
  font-weight: 500;
}
.voice figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.voice__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--teal-600), #0b5f5c);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  flex: none;
}
.voice figcaption b { display: block; color: var(--ink); font-size: .96rem; }
.voice figcaption small { display: block; color: var(--muted); font-size: .85rem; }
.voice__avatar--finland {
  background: linear-gradient(140deg, #2d67a7, #ffffff);
  color: #082e5a;
}
.voices-hint {
  margin-top: 12px;
  color: var(--muted);
  font-size: .82rem;
  text-align: right;
}

/* ------------------------------------------------------------- 11 recognition */

.recognition {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.recognition h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.recognition p { font-size: .99rem; }
.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.badge {
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  text-align: center;
}
.badge strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.badge small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------- 12 faq */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.faq-list { display: grid; gap: 12px; }

/* Native <details>, so a question opens with scripting off too. */
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--hx-dur-base, 240ms) ease, box-shadow var(--hx-dur-base, 240ms) ease;
}
.faq[open] { border-color: rgba(20, 184, 173, .4); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2.2px solid var(--muted);
  border-bottom: 2.2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--hx-dur-base, 240ms) var(--hx-ease-out, ease), border-color var(--hx-dur-base, 240ms) ease;
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--teal-600); }
.faq__body { padding: 0 22px 22px; font-size: .99rem; }
.faq__body p + p { margin-top: 12px; }

/* --------------------------------------------------------------------- 13 cta */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(640px 420px at 88% 8%, rgba(20, 184, 173, .3), transparent 62%),
    linear-gradient(150deg, #0a2136, var(--dark-bg));
  color: var(--dark-copy);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(620px 380px at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(620px 380px at 50% 50%, #000 30%, transparent 78%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta p { max-width: 58ch; margin: 20px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 34px; }
.cta__note { margin-top: 26px; color: var(--dark-muted); font-size: .88rem; }

/* ------------------------------------------------------------------ 14 footer */

.site-foot {
  padding-top: clamp(56px, 7vw, 88px);
  background: var(--dark-bg);
  color: var(--dark-copy);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.foot-grid .brand { color: #fff; margin-right: 0; margin-bottom: 20px; }
.foot-grid .brand small { color: var(--dark-muted); }
.foot-about { color: var(--dark-muted); font-size: .94rem; max-width: 40ch; }
.foot-col h4 {
  margin-bottom: 18px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.foot-col ul { display: grid; gap: 11px; }
.foot-col a { color: var(--dark-muted); font-size: .95rem; transition: color var(--hx-dur-fast, 160ms) ease; }
.foot-col a:hover { color: var(--teal-400); }

.foot-legal {
  padding: 26px 0 34px;
  border-top: 1px solid var(--dark-line);
}
.foot-legal p { color: var(--dark-muted); font-size: .84rem; line-height: 1.65; }
.foot-legal__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
}
.foot-legal__row ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-legal__row a { color: var(--dark-muted); font-size: .84rem; }
.foot-legal__row a:hover { color: var(--teal-400); }

/* ---------------------------------------------------------------- 15 documents

   The Terms, Privacy and Complaints pages. They share this site's header and
   footer and add one column of prose in the middle, so a policy reads like
   part of the company rather than a text file someone uploaded. */

.doc-head {
  padding-top: calc(78px + clamp(36px, 5vw, 64px));
  padding-bottom: clamp(32px, 4vw, 56px);
  margin-top: -78px;
  background:
    radial-gradient(680px 420px at 82% 0%, rgba(20, 184, 173, .22), transparent 62%),
    linear-gradient(162deg, #0a2136 0%, var(--dark-bg) 70%);
  color: var(--dark-copy);
}
.doc-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.doc-head p { margin-top: 18px; max-width: 60ch; }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--dark-line);
  color: var(--dark-muted);
  font-size: .86rem;
  font-weight: 600;
}

.doc-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(48px, 6vw, 80px);
}

/* The contents list, pinned beside the prose on a wide screen. */
.doc-toc { position: sticky; top: 100px; }
.doc-toc h2 {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.doc-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.doc-toc a {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  transition: color var(--hx-dur-fast, 160ms) ease, border-color var(--hx-dur-fast, 160ms) ease;
}
.doc-toc a:hover { color: var(--teal-400); border-left-color: var(--teal-500); }

.doc-prose { max-width: 72ch; }
.doc-prose section + section { margin-top: clamp(34px, 4vw, 52px); }
.doc-prose h2 {
  margin-bottom: 16px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  scroll-margin-top: 100px;
}
.doc-prose h3 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  color: var(--ink);
}
.doc-prose p { margin-bottom: 16px; }
.doc-prose p:last-child { margin-bottom: 0; }
.doc-prose ul { display: grid; gap: 10px; margin: 0 0 16px; }
/* The bullet is positioned rather than laid out as a grid column: a policy
   list item is prose, and prose contains links and emphasis. As grid items
   those inline elements each take a cell of their own, and a bracketed
   placeholder ends up as one word per line in a 8px column. */
.doc-prose ul li {
  position: relative;
  padding-left: 22px;
}
.doc-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
}
.doc-prose a:not(.btn) { color: var(--teal-400); font-weight: 600; }
.doc-prose a:not(.btn):hover { text-decoration: underline; }
.doc-prose strong { color: var(--ink); }

/* A definition list for the "what we collect and why" table. */
.doc-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.doc-table > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .95rem;
}
.doc-table > div:last-child { border-bottom: 0; }
.doc-table b { color: var(--ink); }

/* The banner that says a lawyer has not been near this yet. */
.doc-flag {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(216, 165, 91, .4);
  border-radius: var(--radius);
  background: rgba(216, 165, 91, .1);
  color: var(--copy);
  font-size: .93rem;
}
.doc-flag svg { width: 22px; height: 22px; color: var(--sand); }
.doc-flag b { display: block; color: var(--ink); margin-bottom: 4px; }

/* -------------------------------------------------------------- 16 responsive */

/* Tablet. The row layouts collapse to a single column and the navigation
   becomes the drawer. */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .nav-toggle { display: grid; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .hero__copy > p { max-width: none; }
  .hero__visual { max-width: 520px; }

  .proof { margin-top: calc(var(--section-y) * -.3); }
  .proof__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__copy { order: 0; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }

  .recognition { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }

  /* the contents list stops being a sidebar and becomes an index on top */
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { position: static; }
  .doc-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small tablet and large phone. */
@media (max-width: 880px) {
  .sol-grid { grid-template-columns: minmax(0, 1fr); }
  .voices { grid-auto-columns: calc((100% - 22px) / 2); }
  .hero__visual { max-width: none; }
}

/* Phone. */
@media (max-width: 620px) {
  body { font-size: 16px; }

  .site-head__inner { height: 68px; gap: 12px; }
  .hero { margin-top: -68px; padding-top: calc(68px + 44px); }

  /* Sign in lives in the drawer at this width; the account button stays, so
     the primary action is always one tap away. */
  .head-actions .btn--ghost { display: none; }
  .head-actions .btn { padding: 10px 16px; font-size: .88rem; }

  .brand__mark { width: 34px; height: 34px; }
  .brand b { font-size: 1.02rem; }
  .brand small { display: none; }

  .btn-row .btn { width: 100%; }

  .hero__chip { margin: -20px 0 0 18px; }

  .proof__inner { grid-template-columns: minmax(0, 1fr); }
  .proof__cell { padding: 24px 20px; }

  .card,
  .sol,
  .voice,
  .step,
  .figure { padding: 26px 22px; }

  .voices { grid-auto-columns: 88%; }

  .port-card { padding: 22px 20px; }
  .checks li { grid-template-columns: 30px 1fr; }
  .checks em { grid-column: 2; justify-self: start; }

  .steps { grid-template-columns: minmax(0, 1fr); }

  .recognition { padding: 28px 22px; }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .faq summary { padding: 17px 18px; font-size: .97rem; }
  .faq__body { padding: 0 18px 18px; }

  .cta { padding: 40px 24px; }
  .cta h2 { max-width: none; }

  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .foot-legal__row { justify-content: flex-start; }

  .doc-head { margin-top: -68px; padding-top: calc(68px + 36px); }
  .doc-toc ol { grid-template-columns: minmax(0, 1fr); }
  .doc-table > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}