/* ==========================================================================
   Rizecraft — design system
   Dark canvas, accent derived from the logo mark (#6E9EE8 / #3E6EB8).
   Space Grotesk display, Inter text, tracked-out micro labels.
   ========================================================================== */

/* ── Self-hosted webfonts ──────────────────────────────────────────────────
   Space Grotesk and Inter, served from this origin. Previously loaded from
   Google's font CDN, which transmits the visitor's IP address to Google on
   every page view — incompatible with the GDPR posture stated in
   the FiNest privacy policy (LG Munchen I, 3 O 17493/20, 20 Jan 2022).
   Both families are SIL Open Font License 1.1; see OFL-*.txt in assets/fonts/.
   Each family ships as ONE variable woff2 per subset (latin, latin-ext) — the
   same file Google serves — declared at discrete weights below so the browser
   instances exactly the weights the site uses. Payload is unchanged. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  --black:   #07090D;
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.2);

  /* Straight out of logo.svg */
  --blue:      #6E9EE8;
  --blue-hi:   #C9DEFA;
  --blue-deep: #3E6EB8;
  --blue-ink:  #2C58B4;

  --ice:   #EEF3FA;
  --text:  #C2CAD6;
  --muted: #838C9C;
  /* --dim carries 10.5px micro-labels (kickers, crumbs, table keys), so it has
     to clear 4.5:1 on --black as normal text, not the 3:1 large-text bar. */
  --dim:   #707A8A;

  --display: 'Space Grotesk', Inter, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gutter: 34px;
  --header-h: 76px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: #08111F; }

.skip-link {
  position: absolute;
  left: 14px; top: -60px;
  z-index: 999;
  padding: 10px 18px;
  background: var(--blue);
  color: #08111F;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--ice);
}
h1 { font-size: clamp(38px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.042em; }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: 18px; letter-spacing: -.02em; line-height: 1.28; }

/* Tracked-out micro label. Used for eyebrows, nav, table keys, captions. */
.kick {
  display: inline-block;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blue);
}
.kick--dim { color: var(--dim); }

.lede {
  font-size: 16.5px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--muted);
  max-width: 50ch;
}
/* Beside a phone render the lede has less room than the 50ch default, or the
   measure runs under the image instead of beside it. */
.lede--narrow { max-width: 46ch; }

.small { font-size: 13.5px; line-height: 1.55; }
.dim { color: var(--dim); }

/* Headline that carries the logo gradient. Used once per page, in the hero. */
.grad {
  background: linear-gradient(166deg, #F2F7FE 4%, var(--blue-hi) 30%, var(--blue) 62%, #3465B4 97%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   Layout
   ========================================================================== */

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

.section { padding-block: clamp(58px, 7.5vw, 100px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section + .section:not(.ruled) { padding-top: 0; }
.ruled { border-top: 1px solid var(--line); }

.center-head { text-align: center; margin-bottom: 48px; }
.center-head h2 { margin-top: 16px; }
.center-head .lede { margin-inline: auto; text-align: center; }

/* Numbered process rail. Horizontal on wide screens, stacked on narrow. */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 20px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  border-right: 1px solid var(--line);
}
.steps li:last-child { border-right: 0; }

/* Fintech section: heading left, substance right. Secondary to the services
   grid on purpose — this is depth the company has, not what it is. */
.fintech-note {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) {
  .fintech-note { grid-template-columns: 1fr; gap: 6px; }
}

.section-head { max-width: 58ch; margin-bottom: 42px; }
.section-head h2 { margin: 16px 0 14px; }

.stack { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
/* Stretch is the wrong default when the children are links or buttons: they
   would run the full column width and pick up a hit area they do not want. */
.stack--start { align-items: flex-start; }

/* Eyebrow + heading pairs that sit outside .section-head — the fintech note,
   the contact panel, the legal document headers — need the same optical gap
   .section-head gives its h2. The legal variant stops short because .doc-meta
   supplies the space underneath. */
.head-gap { margin: 16px 0 14px; }
.head-gap--flush { margin: 16px 0 0; }

/* Vertical spacing utilities. Small and explicit on purpose: they replace the
   handful of one-off inline margins the markup used to carry, which is what
   lets the CSP drop style-src 'unsafe-inline'. Reach for a component rule
   first; these are only for genuinely local adjustments. */
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 30px; }
.mt-38 { margin-top: 38px; }
.mt-52 { margin-top: 52px; }
.mb-28 { margin-bottom: 28px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-fill {
  background: linear-gradient(180deg, var(--blue-hi), var(--blue-deep));
  color: #08111F;
  box-shadow: 0 14px 40px -14px rgba(110,158,232,.6);
}
.btn-fill:hover { transform: translateY(-1px); box-shadow: 0 20px 52px -14px rgba(110,158,232,.8); }

.btn-out { border-color: var(--line-2); color: var(--ice); }
.btn-out:hover { border-color: var(--blue); color: var(--blue); }

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

.link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(110,158,232,.4); }
.link:hover { text-decoration-color: var(--blue); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}
.link-arrow svg { width: 13px; height: 13px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Tags
   ========================================================================== */

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7,9,13,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; flex-shrink: 0; }
.brand img { width: 28px; height: 35px; }
.brand-word {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ice);
}
.brand-word .rize { font-weight: 400; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .18s ease;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--ice); }

/* Scroll-spy state: the section currently being read. The marker is absolutely
   positioned so becoming active never changes the link's height, which would
   otherwise nudge the whole nav as you scroll. */
.nav a { position: relative; }
.nav a.is-active { color: var(--ice); }
.nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: var(--blue);
}

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 9999px;
  color: var(--ice);
  cursor: pointer;
}
.nav-toggle svg { width: 17px; height: 17px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   Hero — starfield, orbit ring, halo
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(62px, 9vw, 112px) clamp(62px, 8vw, 100px);
  text-align: center;
}
.hero .stars {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='40' cy='60' r='.9'/%3E%3Ccircle cx='150' cy='30' r='.6'/%3E%3Ccircle cx='260' cy='90' r='1'/%3E%3Ccircle cx='330' cy='40' r='.6'/%3E%3Ccircle cx='430' cy='110' r='.8'/%3E%3Ccircle cx='520' cy='55' r='.6'/%3E%3Ccircle cx='620' cy='95' r='.9'/%3E%3Ccircle cx='80' cy='180' r='.7'/%3E%3Ccircle cx='200' cy='220' r='.9'/%3E%3Ccircle cx='300' cy='170' r='.5'/%3E%3Ccircle cx='400' cy='240' r='.8'/%3E%3Ccircle cx='500' cy='190' r='.6'/%3E%3Ccircle cx='600' cy='250' r='.7'/%3E%3Ccircle cx='670' cy='170' r='.5'/%3E%3Ccircle cx='60' cy='330' r='.8'/%3E%3Ccircle cx='170' cy='390' r='.6'/%3E%3Ccircle cx='280' cy='340' r='.9'/%3E%3Ccircle cx='390' cy='420' r='.6'/%3E%3Ccircle cx='480' cy='350' r='.7'/%3E%3Ccircle cx='580' cy='410' r='.9'/%3E%3Ccircle cx='650' cy='340' r='.6'/%3E%3Ccircle cx='120' cy='470' r='.7'/%3E%3Ccircle cx='350' cy='480' r='.5'/%3E%3Ccircle cx='540' cy='470' r='.8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Shooting stars. The head is the element itself and the trail is drawn
   backwards along its own X axis, so rotating the element sets the direction of
   travel and the trail follows automatically. Each cycle is mostly empty time,
   so a streak reads as an occasional event rather than constant motion. */
.meteors {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.meteors i {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, 0);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--blue-hi);
  box-shadow: 0 0 8px 2px rgba(201, 222, 250, .45);
  opacity: 0;
  transform: rotate(38deg) translateX(-60px);
  animation: shoot var(--dur, 15s) linear var(--delay, 0s) infinite;
}
.meteors i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 2px;
  width: var(--len, 140px);
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(201, 222, 250, .8), rgba(201, 222, 250, 0));
}
/* Placement and timing per streak. These lived on the elements as inline
   custom properties; they are here so the markup carries no style= attribute
   and the CSP can drop style-src 'unsafe-inline'. The three streaks are
   deliberately out of phase so they never read as a repeating pattern. */
.meteors i:nth-child(1) { --x: 12%; --y:  -6%; --delay: 1.5s; --dur: 13s; --len: 150px; }
.meteors i:nth-child(2) { --x: 58%; --y: -12%; --delay: 6.5s; --dur: 16s; --len: 110px; }
.meteors i:nth-child(3) { --x: -8%; --y:  18%; --delay:  11s; --dur: 19s; --len: 190px; }
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(38deg) translateX(-60px); }
  2%   { opacity: 1; }
  9%   { opacity: 0; transform: rotate(38deg) translateX(1180px); }
  100% { opacity: 0; transform: rotate(38deg) translateX(1180px); }
}

.hero .ring {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(118vw, 1500px);
  aspect-ratio: 2.05 / 1;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
  z-index: 0; pointer-events: none;
}
.hero .halo {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: min(90vw, 1000px);
  aspect-ratio: 1.6 / 1;
  z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110,158,232,.16), transparent 72%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 17ch; margin: 24px auto 26px; }
.hero .lede { margin-inline: auto; text-align: center; max-width: 52ch; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* Compact hero for interior pages */
.hero--sub { padding-block: clamp(44px, 6vw, 74px) clamp(36px, 5vw, 60px); text-align: left; }
.hero--sub h1 { margin: 18px 0 20px; max-width: 20ch; }
.hero--sub .lede { margin-inline: 0; text-align: left; }

/* ==========================================================================
   Light inverted band
   ========================================================================== */

.invert {
  position: relative;
  overflow: hidden;
  background: #C4C9D2;
  padding-block: clamp(72px, 10vw, 140px);
}
.invert::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(115vw, 1500px);
  aspect-ratio: 1.85 / 1;
  background: radial-gradient(closest-side, #fff 40%, rgba(255,255,255,.75) 62%, transparent 78%);
}
.invert .wrap { position: relative; z-index: 2; }
.invert .kick { color: var(--blue-ink); }
.invert h2 { color: #080A0F; max-width: 15ch; margin: 20px 0 24px; }
.invert p { color: #454B55; font-size: 17px; line-height: 1.62; font-weight: 300; max-width: 46ch; }
/* The default accent is ~2.5:1 on this near-white band. The deeper logo blue
   clears AA at ~6.6:1. */
.invert .link-arrow, .invert .link, .invert a { color: var(--blue-ink); }

/* ==========================================================================
   Tiles
   ========================================================================== */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.tile {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(170deg, #141821, #0A0C11);
  border: 1px solid var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.tile:hover { border-color: rgba(110,158,232,.34); transform: translateY(-4px); }
.tile .art { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 26px; }
.tile .art svg { width: 74px; height: 74px; stroke: var(--blue); fill: none; stroke-width: 1; opacity: .9; }
.tile h3 { margin-bottom: 7px; }
.tile p { font-size: 13.5px; line-height: 1.55; color: var(--muted); font-weight: 300; }
.tile--center { text-align: center; }

/* ==========================================================================
   Product block
   ========================================================================== */

.product {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #141821, #0A0C11);
  border: 1px solid var(--line);
}
.product::before {
  content: '';
  position: absolute; top: -45%; right: -8%;
  width: 58%; height: 150%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(110,158,232,.15), transparent);
}
.product > * { position: relative; z-index: 2; }

.prow { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.product-mark { width: 54px; height: 54px; border-radius: 13px; border: 1px solid var(--line-2); }

.phone {
  position: relative;
  width: 100%;
  max-width: 212px;
  aspect-ratio: 516 / 1120;
  padding: 6px;
  margin-inline: auto;
  border-radius: 27px;
  background: #171B24;
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -34px #000, 0 0 70px -22px rgba(110,158,232,.3);
  flex-shrink: 0;
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: #0E1013; }

.phone-stack { display: flex; justify-content: center; align-items: center; }
.phone-stack .phone { max-width: 176px; }
.phone-stack .phone:first-child { transform: rotate(-5deg) scale(.86); transform-origin: right center; margin-right: -48px; opacity: .95; }
.phone-stack .phone:nth-child(2) { z-index: 3; }
.phone-stack .phone:last-child { transform: rotate(5deg) scale(.86); transform-origin: left center; margin-left: -48px; opacity: .95; }
.phone-stack .phone:only-child { transform: none; margin: 0; max-width: 212px; }

.gallery {
  /* A grid, not a scroller. Five phones fit the container, so there is no
     scrollbar and the entrance animation is visible all at once. */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding-block: 4px 8px;
  perspective: 1600px;
  perspective-origin: 50% 30%;
}
.gallery > figure { margin: 0; }
.gallery .phone { max-width: none; }
/* ── Screens gallery: scroll-driven 3D entrance ────────────────────────────
   Each phone rises, straightens out of a tilt and brightens as the section
   crosses the viewport, staggered left to right. Driven by the page scroll
   rather than the gallery's own scrollbar, because five phones only just
   overflow the container on desktop, so a horizontal timeline would rarely
   fire. No JavaScript: `animation-timeline: view()` ties progress to the
   element's position in the scrollport.

   Wrapped in @supports so browsers without scroll-driven animations simply
   render the gallery as-is, and skipped entirely for reduced motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gallery { perspective: 1500px; perspective-origin: 50% 40%; }

    .gallery > figure {
      transform-origin: 50% 130%;
      animation: screen-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
      will-change: transform, opacity;
    }

    /* Stagger: each phone finishes a little after the one before it. */
    .gallery > figure:nth-child(1) { --fan:  26deg; --tilt: -5deg; animation-range: entry 2%  cover 22%; }
    .gallery > figure:nth-child(2) { --fan:  14deg; --tilt: -3deg; animation-range: entry 6%  cover 26%; }
    .gallery > figure:nth-child(3) { --fan:   0deg; --tilt:  0deg; animation-range: entry 10% cover 30%; }
    .gallery > figure:nth-child(4) { --fan: -14deg; --tilt:  3deg; animation-range: entry 14% cover 34%; }
    .gallery > figure:nth-child(5) { --fan: -26deg; --tilt:  5deg; animation-range: entry 18% cover 38%; }

    @keyframes screen-rise {
      from {
        opacity: 0;
        transform: translateY(110px) translateZ(-260px)
                   rotateX(26deg) rotateY(var(--fan, 0deg)) rotateZ(var(--tilt, 0deg))
                   scale(.9);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* Desktop hover: lift the phone and warm its glow. */
.gallery > figure .phone {
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
@media (hover: hover) {
  .gallery > figure:hover .phone {
    transform: translateY(-10px);
    box-shadow: 0 60px 100px -34px #000, 0 0 90px -18px rgba(110,158,232,.55);
  }
}

.phone-caption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 300; }
.phone-caption strong { display: block; color: var(--ice); font-weight: 600; margin-bottom: 3px; }

/* ==========================================================================
   Spec table
   ========================================================================== */

.spec { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.spec tr { border-bottom: 1px solid var(--line); }
.spec th {
  text-align: left;
  vertical-align: top;
  padding: 14px 24px 14px 0;
  width: 210px;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
}
.spec td { padding: 14px 0; font-size: 14.5px; color: var(--text); vertical-align: top; }

/* ==========================================================================
   Store badges
   ========================================================================== */

.store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--blue-hi), var(--blue-deep));
  color: #08111F;
  box-shadow: 0 14px 40px -16px rgba(110,158,232,.6);
  transition: transform .2s ease, box-shadow .3s ease;
}
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 20px 52px -16px rgba(110,158,232,.8); }
.store-badge svg { width: 19px; height: 19px; flex-shrink: 0; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge .sb-small { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .72; }
.store-badge .sb-big { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   Centred hero — /finest and /404.html

   The two pages that are one card and nothing else. Neither carries the site
   header or footer: the share link because it is about to leave for a store,
   the 404 because the only useful thing on it is the way back. Both want the
   same layout, so it lives here once and each page adds its own parts below.

   For /finest this card is on screen for a moment before the store takes over
   — but it is also the entire page for everyone the jump cannot serve:
   desktop, JavaScript off, and every social crawler rendering the link
   preview. So it is built to stand on its own rather than read as a loading
   screen: icon, name, what the app is, and both store badges, all reachable
   without a single script.
   ========================================================================== */

.hero--center {
  /* svh, not vh: on mobile Safari a 100vh box is taller than the visible
     viewport, which would push the badges under the URL bar on exactly the
     devices this page exists for. The vh line is the fallback for browsers
     that predate the unit. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding-block: clamp(48px, 8vw, 84px);
}
.hero--center .wrap {
  /* margin-block: auto, not align-items: center on the parent. Both centre
     the card, but a centred flex *item* that outgrows its line overflows in
     both directions and the top goes under the edge of a scroll container,
     where it cannot be scrolled back to. Auto margins collapse to zero
     instead, so on a short screen the card simply starts at the top and the
     page scrolls. Auto cross-axis margins also override align-items, which is
     why there is none on .hero--center. */
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* .brand is built for the header bar, where margin-right: auto pushes the nav
   away from it. In this column that margin would drag the mark off centre. */
.hero--center .brand { margin-right: 0; margin-bottom: clamp(30px, 6vw, 52px); }

.hero--center .product-mark { width: 72px; height: 72px; border-radius: 18px; }
.hero--center .kick { margin-top: 22px; }
.hero--center h1 { margin: 14px 0 0; }
.hero--center .lede { margin-top: 16px; max-width: 40ch; }

.hero--center .store-badges { justify-content: center; margin-top: 18px; }
/* The 404's single way-back button. */
.hero--center .btn { margin-top: 34px; }
/* The small link row both pages close on. */
.card-foot { margin-top: clamp(34px, 7vw, 56px); }

/* ── /finest only ──────────────────────────────────────────────────────── */

/* Static text — nothing rewrites it. Anyone reading it is someone the inline
   jump deliberately did not fire for. */
.applink-status { margin-top: 24px; letter-spacing: .04em; }
.applink-more { margin-top: 34px; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--ice); }
.crumbs .sep { color: var(--dim); opacity: .6; }

/* ==========================================================================
   Prose — legal documents
   ========================================================================== */

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 {
  font-size: 21px;
  letter-spacing: -.025em;
  margin-top: 2.3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { font-size: 15px; line-height: 1.72; color: var(--muted); font-weight: 300; }
.prose strong { color: var(--ice); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: .5em; }
.prose li::marker { color: var(--dim); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(110,158,232,.4); }
.prose a:hover { text-decoration-color: var(--blue); }
/* Closing cross-reference under a legal document. Set apart from the body
   copy, so it overrides the 1em rhythm .prose gives every other sibling. */
.prose .doc-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Data table inside a legal document — the Privacy Policy's "what we collect"
   grid. .table-wrap keeps a wide table scrolling inside the column instead of
   widening the page; the first cell of each row is a row header, so the table
   still reads down the left edge once it is scrolled. */
.table-wrap { overflow-x: auto; }
.doc-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  text-align: left;
}
.doc-table tr { border-bottom: 1px solid var(--line); }
.doc-table thead th {
  padding: 12px 20px 12px 0;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--dim);
  vertical-align: bottom;
}
.doc-table tbody th,
.doc-table td {
  padding: 14px 20px 14px 0;
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
  font-weight: 300;
  color: var(--muted);
}
.doc-table tbody th { color: var(--ice); font-weight: 500; }
.doc-table :is(th, td):last-child { padding-right: 0; }

.callout {
  padding: 20px 22px;
  border: 1px solid rgba(110,158,232,.3);
  border-radius: 14px;
  background: rgba(110,158,232,.07);
}
.callout p { font-size: 14.5px; color: var(--ice); font-weight: 400; }

.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }

.doc-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.toc { position: sticky; top: calc(var(--header-h) + 26px); }
.toc h4 { margin-bottom: 14px; }
.toc ol { list-style: none; display: flex; flex-direction: column; }
.toc a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.42;
  color: var(--dim);
  font-weight: 300;
  transition: color .16s ease, border-color .16s ease;
}
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--ice); border-left-color: var(--blue); }

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.contact-form { display: grid; gap: 15px; }
.field label { display: block; margin-bottom: 7px; }
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ice);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px;
  transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(110,158,232,.06);
}
.field textarea { resize: vertical; min-height: 124px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* hCaptcha renders itself into this container as an iframe of a fixed size.
   Only the surrounding spacing is ours — the widget's own appearance is not
   restyled, both because it is inside a cross-origin iframe we cannot reach
   and because altering a captcha's presentation is a good way to break it. */
.h-captcha {
  margin: 0 0 15px;
  min-height: 78px;
}

.spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(8,17,31,.3);
  border-top-color: #08111F;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 300;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  border-radius: 9999px;
  background: var(--blue-hi);
  color: #08111F;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: #E8907E; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(56px, 7vw, 90px);
  padding-block: 28px 30px;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
}
.footer-row > span,
.footer-links a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { transition: color .16s ease; }
.footer-links a:hover { color: var(--blue); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .product { grid-template-columns: 1fr; }
  .contact-panel { grid-template-columns: 1fr; }
  /* minmax(0, …), not 1fr: a bare 1fr has min-width:auto, which lets the
     .doc-table's min-width push the prose column past the viewport instead of
     scrolling inside .table-wrap. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; }

  .cards { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .steps li:last-child { border-bottom: 0; }

  .nav-toggle { display: flex; order: 3; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 22px;
    background: var(--black);
    border-bottom: 1px solid var(--line);
    transform: translateY(-6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 15px 0; font-size: 11.5px; border-bottom: 1px solid var(--line); }
  /* In the stacked panel an underline would collide with the row divider. */
  .nav a.is-active::after { display: none; }
  .nav a.is-active { color: var(--blue); }
  .phone-stack .phone:first-child,
  .phone-stack .phone:last-child { display: none; }
  .phone-stack .phone { transform: none !important; margin: 0 !important; max-width: 212px; }

  .spec th { width: 145px; padding-right: 16px; letter-spacing: .2em; }
}

@media (max-width: 1000px) and (min-width: 861px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
  .toc ol { grid-template-columns: 1fr; }
  .btn, .store-badge { width: 100%; }
  .hero .cta { flex-direction: column; align-items: center; }
  /* Stacked CTAs go full width above, which is right where two of them share
     the column. The hero has one button left, and a full-bleed pill there
     reads as a banner — so it keeps its natural width and centres instead. */
  .hero .cta .btn { width: auto; }
  .spec th { width: 118px; font-size: 9.5px; }
}

/* The centred hero is the only full-height layout on the site, so it is the
   only one that cares how *short* the viewport is. On a 640px-tall phone the
   default spacing pushes the store badges below the fold — on the one page
   whose entire purpose is those badges. Nothing here changes what is on
   screen, only the air around it. */
@media (max-height: 720px) {
  .hero--center { padding-block: 34px; }
  .hero--center .brand { margin-bottom: 26px; }
  .hero--center .product-mark { width: 58px; height: 58px; border-radius: 15px; }
  .hero--center .kick { margin-top: 18px; }
  .hero--center .lede { margin-top: 12px; }
  .applink-status { margin-top: 16px; }
  .hero--center .store-badges { margin-top: 14px; }
  .applink-more { margin-top: 24px; }
  .card-foot { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .meteors { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-header, .site-footer, .toc, .crumbs, #toast, .hero .stars, .hero .ring, .hero .halo { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, .prose strong { color: #000; }
  .prose p, .prose li { color: #222; }
  .doc-table :is(th, td) { color: #222; }
  .doc-table thead th { color: #555; }
  .doc-table, .doc-table tr { border-color: #bbb; }
  .prose a { color: #000; }
  .callout { border-color: #999; background: #f4f4f4; }
  .callout p { color: #000; }
  .prose { max-width: none; }
  .section { padding-block: 0; }
}