/* ===========================================================================
   Phoenix Financial — www.phoenixinc.app

   Every colour below is a token lifted from the mobile app's design system
   (apps/mobile/lib/ui/core/theme/phoenix_colors.dart, dark preset) so the
   site and the app read as one product. The token name in the comment is the
   Dart field it came from — change it there first, then mirror it here.

   Typefaces are the app's own bundled faces: Manrope for display, Inter for
   everything else. Self-hosted; no third-party font requests.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter_18pt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Surfaces — authBackground, splashBackground, surfaceDefault, surfaceRaised */
  --bg:            #141111;
  --bg-warm:       #1e1a18;
  --surface:       #242424;
  --surface-raised:#2b2b2b;
  --border:        #2e2e2e;

  /* Text — textPrimaryFigma, textSecondaryFigma, textTertiaryFigma */
  --text:          #f2f0ea;
  --text-2:        #dcdcdc;
  --text-3:        #888888;

  /* Brand — accent, authLink, authGlow, onAccent */
  --accent:        #dd5c36;
  --accent-bright: #f7512d;
  --on-accent:     #ffffff;

  /* Elevation, dark register. On a dark ground a card does not cast a shadow —
     it catches light. Surfaces lift by getting lighter and by taking a hairline
     of borrowed light along the top edge. Shadows only deepen the ground beneath. */
  --lift-1: inset 0 1px 0 rgba(255,255,255,.045);
  --lift-2: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35);
  --lift-3: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 40px rgba(0,0,0,.5);
  --hairline: rgba(255,255,255,.07);
  --hairline-strong: rgba(255,255,255,.13);
  --accent-wash: rgba(221,92,54,.10);

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

  --measure: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.1vw, 3.7rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 18px;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px var(--gutter);
}

.wordmark { display: block; color: var(--text); }
.wordmark-svg { display: block; width: 168px; height: auto; }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  font-size: 0.95rem;
}

.masthead-nav a { text-decoration: none; color: var(--text-2); }
.masthead-nav a:hover { color: var(--text); }

.masthead-nav .nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}
.masthead-nav .nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* The coral bloom is the app's own signature: authGlow, rendered in the auth
   hero panel as a radial gradient at reduced alpha. Same gesture here. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
}

.hero::before {
  content: "";
  position: absolute;
  left: 68%;
  top: 46%;
  width: min(1180px, 105%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(247, 81, 45, 0.30),
    rgba(221, 92, 54, 0.13) 42%,
    rgba(221, 92, 54, 0) 70%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 104px) var(--gutter) clamp(64px, 9vw, 118px);
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.headline {
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.headline-accent { color: var(--accent); }

.lede {
  margin: 24px 0 0;
  max-width: 34em;
  color: var(--text-2);
  font-size: var(--step-1);
}

.requirements {
  margin: 22px 0 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

.hero-mark {
  display: flex;
  justify-content: center;
}

.app-icon {
  width: min(300px, 78%);
  height: auto;
  border-radius: 24%;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* ── Store badges ─────────────────────────────────────────────────────── */

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.stores-center { justify-content: center; }

.store {
  display: block;
  border-radius: 10px;
  transition: transform 0.18s ease;
}
.store:hover { transform: translateY(-2px); }

/* Official Apple and Google artwork, used unmodified.
   Google's badge PNG carries its required clear space inside the image, so at
   equal box heights its visible badge sits smaller than Apple's. The two
   heights below are chosen so the VISIBLE badges match at 48px. Apple's SVG is
   the badge edge-to-edge; Google's PNG is 646x250 around a measured 564x168
   badge, so its box must be 48 x 250/168 = 71px. The row centres them, because
   equal-height boxes would still leave Google's badge sitting low inside its
   own padding. Do not crop that padding out — it is Google's required clear
   space, and it is part of the asset. */
.badge { display: block; width: auto; }

.badge-apple  { height: 48px; }
.badge-google { height: 71px; }

/* ── Shared section furniture ─────────────────────────────────────────── */

.section-title {
  margin: 0 0 clamp(28px, 4vw, 48px);
  max-width: 24ch;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* ── Companies ────────────────────────────────────────────────────────── */

.companies { border-top: 1px solid var(--border); }

.companies-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
}

.companies-head { margin-bottom: clamp(30px, 4vw, 48px); }

.companies-head .section-title { margin-bottom: 14px; }

.companies-lede {
  margin: 0;
  max-width: 52ch;
  color: var(--text-2);
  font-size: var(--step-0);
}

/* Two identical grids stacked. The lower one is dim; the upper one is at full
   strength but masked to a circle that follows the pointer, so moving the
   mouse drags a light across the wall. One mask does the whole effect — no
   per-logo scripting, no layout work, nothing animating on a timer. */
.lattice { position: relative; }

.lattice-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: clamp(26px, 4vw, 54px) clamp(24px, 3vw, 44px);
}

.lattice-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.lattice-grid img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Resting state: present, legible, clearly secondary to the copy above. */
.lattice-base img { opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; }



/* Touch and keyboard users get no pointer, so there is no spotlight to chase.
   Raise the resting state instead — the wall has to read on its own. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .lattice-base img { opacity: 0.78; }
  }

.wall-note {
  margin: clamp(26px, 4vw, 40px) 0 0;
  max-width: 68ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* Tiles are buttons now — strip the UA chrome, keep the hit area. */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tile:hover { transform: translateY(-3px); }
.tile:active { transform: translateY(-1px); }

/* ── Company card ─────────────────────────────────────────────────────── */

.ccard {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  overflow: visible;
}

.ccard::backdrop {
  background: rgba(10, 8, 8, 0.7);
  backdrop-filter: blur(3px);
}

/* The coral bloom again, behind the card this time, so it reads as lit from
   the same source as the hero and the wall. */
.ccard-inner {
  position: relative;
  padding: 38px 34px 32px;
  isolation: isolate;
}

.ccard-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  width: 130%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(247, 81, 45, 0.16), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.ccard-logo {
  display: block;
  max-width: 190px;
  max-height: 40px;
  width: auto;
  margin-bottom: 22px;
}

.ccard-name {
  margin: 0 0 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.025em;
}

.ccard-desc {
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
}

.ccard-sectors {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}

.ccard-sectors:empty { display: none; }

.ccard-sectors li {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.ccard-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.ccard-meta dt {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ccard-meta dd {
  margin: 5px 0 0;
  font-size: 0.92rem;
  color: var(--text-2);
}

.ccard-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.ccard-link:hover { text-decoration: underline; }

.ccard-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 2;
}

.ccard-close:hover { border-color: var(--accent); color: var(--accent); }

/* Fallback entrance wherever View Transitions are unavailable — and the whole
   effect is skipped under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ccard[open] { animation: ccard-in 0.34s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .ccard[open]::backdrop { animation: ccard-fade 0.34s ease; }
}

@keyframes ccard-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ccard-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Features ─────────────────────────────────────────────────────────── */

.features-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}

.cards {
  display: grid;
  /* Four cards, so an explicit 2×2 rather than auto-fit — auto-fit resolves to
     three columns at this measure and leaves a dead cell. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.card {
  background: var(--surface);
  padding: clamp(24px, 3vw, 34px);
}

.card h3 {
  margin: 0 0 10px;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.card p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-2);
}

/* ── Steps ────────────────────────────────────────────────────────────── */

.steps { border-top: 1px solid var(--border); background: var(--bg-warm); }

.steps-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 4vw, 46px);
}

.step-list li { margin: 0; }

.step-n {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
}

.step-list h3 {
  margin: 14px 0 8px;
  font-size: var(--step-2);
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.step-list p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-2);
}

/* ── Closing CTA ──────────────────────────────────────────────────────── */

.closer {
  border-top: 1px solid var(--border);
  text-align: center;
}

.closer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 100px) var(--gutter);
}

.closer h2 {
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.closer p {
  margin: 14px 0 0;
  color: var(--text-2);
}

/* ── Legal register ───────────────────────────────────────────────────── */

.legal { border-top: 1px solid var(--border); }

.legal-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(56px, 8vw, 88px);
}

.set-stamp {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.register { list-style: none; margin: 0; padding: 0; }

.register li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}

.doc-name { font-size: 1rem; }

.doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.doc-view,
.doc-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text-2);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.doc-view:hover,
.doc-dl:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dl-fmt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.doc-dl:hover .dl-fmt { color: var(--accent); }

/* ── Page header (subpages) ───────────────────────────────────────────── */

.page-head { background: var(--bg-warm); border-bottom: 1px solid var(--border); }

.page-head-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 82px) var(--gutter) clamp(32px, 4vw, 52px);
}

.page-head h1 {
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
}

.page-lede {
  margin: 16px 0 0;
  max-width: 56ch;
  color: var(--text-2);
  font-size: var(--step-0);
}

.page-head .set-stamp { margin-top: 20px; }

.masthead-nav .here { color: var(--text); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--border); background: var(--bg-warm); }

.faq-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(32px, 5vw, 64px);
}

.faq-item h3 {
  margin: 0 0 8px;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text);
}

.faq-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-2);
}

.faq-item a { color: var(--accent); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* ── Support ──────────────────────────────────────────────────────────── */

.support { border-top: 1px solid var(--border); }

.support-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 76px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.support-copy h2 {
  margin: 0 0 8px;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}

.support-copy p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-2);
  font-size: 0.98rem;
}

.support-cta {
  flex: none;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.support-cta:hover { background: var(--accent-bright); }

/* ── PDF viewer ───────────────────────────────────────────────────────── */

.viewer {
  width: min(1040px, 94vw);
  height: min(88vh, 1040px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}

.viewer::backdrop { background: rgba(10, 8, 8, 0.74); }

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}

.viewer-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.viewer-open,
.viewer-dl {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-2);
}

.viewer-open:hover,
.viewer-dl:hover { border-color: var(--accent); color: var(--accent); }

.viewer-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 0.9rem;
  cursor: pointer;
}

.viewer-close:hover { border-color: var(--accent); color: var(--accent); }

/* White because that is the paper the PDF renders on — a dark fill here
   shows as a flash before the document paints. */
.viewer-frame {
  width: 100%;
  height: calc(100% - 58px);
  border: 0;
  background: #fff;
}

/* ── Colophon ─────────────────────────────────────────────────────────── */

.colophon { border-top: 1px solid var(--border); }

.colophon-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--gutter) 56px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(28px, 5vw, 64px);
  margin: 0 0 28px;
  padding: 0 0 26px;
  border-bottom: 1px solid var(--border);
}

.facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.facts dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--text-2);
}

.facts a { text-decoration: none; color: var(--accent); }
.facts a:hover { text-decoration: underline; }

.ext { margin-left: 3px; font-size: 0.85em; }

.risk {
  margin: 0;
  max-width: 68ch;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-3);
}

.copyright {
  margin: 26px 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-mark { order: -1; justify-content: flex-start; }
  .app-icon { width: 132px; border-radius: 22%; }
  .masthead-nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-mark {
    animation: rise 0.62s cubic-bezier(0.22, 0.68, 0.3, 1) backwards;
  }
  .hero-mark            { animation-delay: 0.04s; }
  .hero-copy > .eyebrow { animation-delay: 0.10s; }
  .hero-copy > .headline{ animation-delay: 0.16s; }
  .hero-copy > .lede    { animation-delay: 0.24s; }
  .hero-copy > .stores  { animation-delay: 0.32s; }
  .hero-copy > .requirements { animation-delay: 0.40s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design refinements — Betterment's register, translated to dark

   What makes Betterment read as considered is not its palette. It is space,
   restraint, and a single confident accent. Those translate directly. What does
   not translate is elevation: on white, a card lifts by casting a shadow; on a
   dark ground there is no light above it to cast one. A dark surface lifts by
   catching light along its top edge and sitting a shade lighter than the page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Masthead — sticky, so the page scrolls under one continuous surface. The
   border only appears once you have scrolled past the hero. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 17, 17, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: var(--bg); }
}
.masthead:hover,
.masthead:focus-within { border-bottom-color: var(--hairline); }

/* Feature cards — separate, breathing, each catching a little light.
   The 1px-gap grid read as a table; spaced cards read as objects. */
.cards {
  gap: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  background: linear-gradient(180deg, #262323 0%, #211f1f 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: var(--lift-3);
}

/* Company card — a dialog needs to sit clearly above everything. */
.ccard {
  border-color: var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
}

/* Section rhythm. Betterment alternates ground colour rather than drawing
   rules between sections; on dark the same move is a shade warmer, not lighter. */
.features { background: var(--bg-warm); }
.features,
.steps,
.closer,
.faq { position: relative; }

/* A hairline at the top of a band does the work a border would, without
   the heaviness of a full-width rule in a lighter colour. */
.features::before,
.closer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

/* Document rows — quiet by default, lit on approach. */
.doc-row {
  border-radius: 12px;
  padding-inline: 14px;
  transition: background 0.18s ease;
}
.doc-row:hover { background: rgba(255,255,255,.03); }

.doc-view,
.doc-dl {
  background: rgba(255,255,255,.03);
  box-shadow: var(--lift-1);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.doc-view:hover,
.doc-dl:hover {
  background: var(--accent-wash);
  color: var(--text);
}

/* Selection in brand colour. */
::selection { background: var(--accent-wash); color: var(--text); }

/* Print — the legal register is the page people actually print. */
@media print {
  .masthead, .hero::before, .site-footer nav { display: none; }
  body { background: #fff; color: #000; }
  .card, .doc-row { box-shadow: none; border-color: #ccc; background: #fff; }
}

/* ── Social ────────────────────────────────────────────────────────────────
   LinkedIn is live. The other three are placeholders until Phoenix confirms
   the accounts, and they are marked as such rather than pointing somewhere
   plausible — a footer icon that lands on the wrong account is worse than no
   icon. `.is-placeholder` is the switch: delete the class and set the href. */
.social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.02);
  transition: color .18s ease, border-color .18s ease, background .18s ease,
              transform .18s ease;
}

.social svg { width: 17px; height: 17px; fill: currentColor; }

.social a:hover,
.social a:focus-visible {
  color: var(--text);
  border-color: var(--hairline-strong);
  background: var(--accent-wash);
  transform: translateY(-1px);
}

/* Placeholders read as unfinished on purpose, and cannot be clicked through. */
.social a.is-placeholder {
  opacity: .38;
  cursor: not-allowed;
  border-style: dashed;
}
.social a.is-placeholder:hover,
.social a.is-placeholder:focus-visible {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--hairline);
  transform: none;
}

/* ── Logo wall ─────────────────────────────────────────────────────────────
   The wall used to rest at 0.34 and rely on a cursor-following spotlight to
   become legible. That fails three ways: it is near-invisible until you happen
   to hover, it never appears in a screenshot or a link preview, and it is dead
   weight for anyone on a trackpad who scrolls straight past. Rest it bright
   enough to read on its own; the spotlight stays as a flourish, not a crutch. */
.lattice-base img { opacity: 0.62; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .lattice-base img { opacity: 0.72; }
}

/* ── Logo wall ─────────────────────────────────────────────────────────────
   One layer, not two. The wall used to paint the grid twice — a dim base and a
   bright copy masked to a disc that chased the cursor. At a low base opacity
   the second copy hid underneath; raise the base enough to actually read and
   both copies show at once and the mark ghosts against itself.

   A single legible layer with a per-tile hover lift does the same job: the wall
   reads without a cursor, survives a screenshot, works on touch, and cannot
   double. */
.lattice-base img { opacity: 0.7; }

.tile:hover img,
.tile:focus-visible img {
  opacity: 1;
  transform: translateY(-2px);
}

@media (hover: none) {
  .lattice-base img { opacity: 0.78; }
}

/* ── Track record ──────────────────────────────────────────────────────────
   The corporate site's strongest claim, which the app site was not using:
   $1B+ processed, 25+ funds, hundreds of unicorns. It answers the question the
   logo wall provokes — "how would Phoenix get me into these?" — so it sits
   directly beneath it. */
.record { background: var(--bg-warm); position: relative; }

.record::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

.record-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) var(--gutter);
}

.record-eyebrow {
  margin: 0 0 22px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.record-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.record-stats li {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  background: linear-gradient(180deg, #262323 0%, #211f1f 100%);
  padding: 22px 20px;
}

.record-n {
  display: block;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 10px;
}

.record-l {
  display: block;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-2);
}

.record-note {
  margin: 0;
  max-width: 58ch;
  font-size: 0.98rem;
  color: var(--text-3);
}

/* ── Colour ────────────────────────────────────────────────────────────────
   The corporate site earns its energy from three moves, all inside the palette
   we already have: stat numbers in the brand orange, headlines split so the
   selling phrase carries the accent, and orange numerals on the step list.
   Adopting them adds pop without adding a colour. */

/* Headline accent — <em> in a heading is the second half of the phrase, not
   emphasis in the italic sense. */
h1 em, h2 em {
  font-style: normal;
  color: var(--accent);
}

/* Stat numbers carry the accent, as they do on phoenixinc.com. */
.record-n { color: var(--accent); }

/* Step numerals — were quiet, now the eye has something to follow down. */
.step-n {
  color: var(--accent);
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 700;
}

/* Cards pick up a warm edge on approach rather than a neutral grey one. */
.card:hover { border-color: rgba(221, 92, 54, 0.34); }

/* The record tiles get a hairline of brand along the top — the same trick the
   corporate stat band uses, at a fraction of the weight. */
.record-stats li { position: relative; overflow: hidden; }
.record-stats li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(221, 92, 54, 0));
}

/* FAQ questions warm on open, so an expanded row reads as the active one. */
details[open] > summary { color: var(--accent); }