/* ============================================================
   DNA Invest: ADVISOR platform site
   Brand: DNA Invest CI v2 (2026-07-23)
   PRIMARY  Emerald Teal  #1C9E76   (kept as --red for drop-in compat)
   DARK     Midnight Navy #0D182B   (--navy / --ink)
   BODY     Graphite Grey #424243   (--graphite)
   SUPPORT  Lime #A5D067 · Picton #4DC0EF · Turquoise #25BDBF · Sapphire #335192
   FONT     Outfit (Google Fonts)
   ============================================================ */

:root {
  --red: #1C9E76;         /* PRIMARY: Emerald Teal */
  --red-dark: #17835F;    /* darker teal: hover/pressed */
  --red-tint: #E7F5EF;    /* light emerald tint */
  --navy: #0D182B;        /* Midnight Navy: dark base */
  --navy-2: #14243C;      /* lifted navy for gradients */
  --ink: #0D182B;         /* headings / dark UI */
  --graphite: #424243;    /* body text */
  --grey-panel: #F2F4F3;
  --grey-mid: #6B6E70;
  --grey-line: #E4E6E6;
  --white: #FFFFFF;
  --lime: #A5D067;
  --sky: #4DC0EF;
  --turq: #25BDBF;
  --sapphire: #335192;
  --green: #1C9E76;       /* success: Emerald Teal */
  --green-tint: #E7F5EF;
  --amber: #B0720E;
  --amber-tint: #FCF3E3;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(13, 24, 43, 0.10);
  --max: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--graphite);
  background: var(--white);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand .logo { color: var(--ink); letter-spacing: -0.01em; }
/* keep headings white on dark bands */
.cta-band h2, .sim h2 { color: #fff; }

img { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.topbar {
  background: var(--red);
  color: #fff;
  font-size: 13.5px;
  padding: 7px 0;
  text-align: center;
  letter-spacing: 0.02em;
}
.topbar strong { font-weight: 700; }

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 80px;
}
/* The official logo artwork already contains the wordmark AND the
   "CODING PERSONAL FINANCIAL OUTCOMES" tagline. Never set that strapline as
   live text next to it. Sizes below keep the baked-in tagline legible. */
.brand-logo { height: 56px; width: auto; display: block; }
footer .footer-logo { height: 80px; margin-bottom: 2px; }
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}
.brand .logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand .logo .dna { color: var(--red); }
.brand .tag { display: block; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-mid); font-weight: 600; margin-top: 1px; }
.brand .logo sup { font-size: 11px; font-weight: 600; color: var(--grey-mid); }
.brand .by {
  font-size: 11.5px;
  color: var(--grey-mid);
  font-weight: 600;
}
.brand .by em { color: var(--red); font-style: normal; }
nav.links { display: flex; gap: 17px; align-items: center; }
nav.links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
nav.links a:hover, nav.links a.active { color: var(--red); border-bottom-color: var(--red); }

.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--red);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--red); }
.btn.ghost:hover { background: var(--red-tint); }
.btn.big { padding: 15px 34px; font-size: 17px; }
.btn.small { padding: 8px 18px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, #fff 0%, var(--red-tint) 100%);
  padding: 72px 0 64px;
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero h1 {
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.hero h1 .accent { color: var(--red); }
.hero p.lead {
  margin: 18px 0 28px;
  font-size: 19px;
  color: #3a3a3e;
  max-width: 34em;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .note { margin-top: 14px; font-size: 14px; color: var(--grey-mid); }

.pill {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pill.soft { background: var(--red-tint); color: var(--red); }

/* Advisor dashboard mock in hero */
.chat-mock {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  border: 1px solid var(--grey-line);
}
.chat-mock .bar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--grey-line);
  font-weight: 700; font-size: 15px;
}
.chat-mock .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.bubble {
  max-width: 85%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14.5px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.bubble.bot { background: var(--grey-panel); border-bottom-left-radius: 4px; }
.bubble.user { background: var(--red); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bubble.result { background: var(--green-tint); color: var(--green); font-weight: 700; }

/* ---------- Stats strip ---------- */
.stats {
  background: var(--ink);
  color: #fff;
  padding: 34px 0;
}
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stats .num { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.stats .num span { color: var(--lime); }
.stats .lbl { font-size: 13.5px; color: #C9C9CE; margin-top: 2px; }

/* ---------- Sections ---------- */
section.block { padding: 76px 0; }
section.block.grey { background: var(--grey-panel); }
.kicker {
  color: var(--red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
  margin-bottom: 10px;
}
h2.title { font-size: 34px; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
p.sub { color: var(--grey-mid); font-size: 17.5px; max-width: 44em; margin-bottom: 40px; }
.center { text-align: center; }
.center p.sub { margin-left: auto; margin-right: auto; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
}
.step .n {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px;
  margin-bottom: 18px;
}
.step h3 { font-size: 19.5px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--grey-mid); }

/* Feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 26px;
  border: 1px solid var(--grey-line);
  transition: box-shadow 0.15s, transform 0.15s;
}
.feature:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Official DNA Invest icon art: each PNG is already a finished roundel
   (white disc + ring), so no tinted well behind it. */
.feature .ico {
  width: 68px; height: 68px;
  margin-bottom: 16px;
  display: block;
}
.feature .ico img { width: 100%; height: 100%; display: block; }
.feature h3 { font-size: 18px; margin-bottom: 7px; }
.feature p { font-size: 14.5px; color: var(--grey-mid); }

/* Pricing / plan cards */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.plan {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}
.plan.hot { box-shadow: var(--glow-lift); position: relative; }
.plan .flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px;
  white-space: nowrap;
}
.plan h3 { font-size: 20px; }
.plan .for { font-size: 14px; color: var(--grey-mid); margin: 4px 0 18px; min-height: 42px; }
.plan .price { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price .was { font-size: 17px; color: var(--grey-mid); text-decoration: line-through; font-weight: 600; margin-right: 8px; }
.plan .price small { font-size: 14px; color: var(--grey-mid); font-weight: 600; }
.plan .freebie { color: var(--green); font-weight: 800; font-size: 15px; margin-top: 4px; }
.plan ul { list-style: none; margin: 22px 0 26px; flex: 1; }
.plan ul li { padding: 7px 0 7px 28px; position: relative; font-size: 14.5px; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.plan .btn { text-align: center; }

/* Corporate split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split ul.ticks { list-style: none; margin-top: 20px; }
.split ul.ticks li { padding: 9px 0 9px 34px; position: relative; font-size: 16px; }
.split ul.ticks li::before {
  content: "✓";
  position: absolute; left: 0; top: 7px;
  width: 24px; height: 24px;
  background: var(--red-tint); color: var(--red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.panel-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--grey-line);
  box-shadow: var(--shadow);
  padding: 30px;
}
.panel-card h4 { font-size: 16px; margin-bottom: 14px; color: var(--grey-mid); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.mini-rows .row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--grey-line);
  font-size: 15px;
}
.mini-rows .row:last-child { border-bottom: none; }
.mini-rows .row b { white-space: nowrap; }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--grey-line);
  font-size: 15px;
}
.quote .stars { color: #E4A11B; letter-spacing: 2px; margin-bottom: 12px; font-size: 15px; }
.quote .who { margin-top: 16px; font-weight: 700; font-size: 14px; }
.quote .who span { display: block; color: var(--grey-mid); font-weight: 500; font-size: 13px; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, #124F41 100%);
  color: #fff;
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 12px; }
.cta-band p { font-size: 17.5px; opacity: 0.9; max-width: 40em; margin: 0 auto 30px; }
.cta-band .btn { background: #fff; color: var(--red); border-color: #fff; }
.cta-band .btn:hover { background: var(--red-tint); border-color: var(--red-tint); }

.tax-note { font-size: 13px; color: var(--grey-mid); margin-top: 20px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
details.faq {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
details.faq summary {
  cursor: pointer;
  padding: 19px 22px;
  font-weight: 700;
  font-size: 16.5px;
  list-style: none;
  position: relative;
  padding-right: 48px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--red); font-weight: 600;
}
details.faq[open] summary::after { content: "–"; }
details.faq .body { padding: 0 22px 20px; color: #3a3a3e; font-size: 15.5px; }

/* ---------- Tables ---------- */
table.clean { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: var(--radius); overflow: hidden; }
table.clean th { background: var(--ink); color: #fff; text-align: left; padding: 13px 16px; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.04em; }
table.clean td { padding: 12px 16px; border-bottom: 1px solid var(--grey-line); }
table.clean tr:last-child td { border-bottom: none; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--ink);
  color: #C9C9CE;
  padding: 60px 0 30px;
  font-size: 14.5px;
}
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
footer a { color: #C9C9CE; text-decoration: none; display: block; padding: 4px 0; }
footer a:hover { color: #fff; }
footer .brandline { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
footer .brandline .sorted { color: #fff; }
footer .brandline .dna { color: var(--red); }
footer .tagline { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; color: var(--lime); margin: -4px 0 12px; }
footer .legal {
  border-top: 1px solid #3a3a3e;
  padding-top: 24px;
  font-size: 12.5px;
  color: #8b8b90;
  line-height: 1.7;
}
.hwl { letter-spacing: 0.18em; font-weight: 700; font-size: 11.5px; color: var(--lime); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(160deg, #fff 0%, var(--red-tint) 100%);
  padding: 56px 0 46px;
}
.page-hero h1 { font-size: 38px; letter-spacing: -0.02em; }
.page-hero p { color: #3a3a3e; font-size: 17.5px; max-width: 44em; margin-top: 12px; }

/* ---------- Allocation bars (shared with client site) ---------- */
.alloc { margin-top: 6px; }
.alloc .arow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13.5px; }
.alloc .arow .albl { width: 112px; color: var(--grey-mid); font-weight: 600; white-space: nowrap; }
.alloc .arow .atrack { display: block; flex: 1; height: 10px; background: var(--grey-panel); border-radius: 999px; overflow: hidden; }
.alloc .arow .afill { display: block; height: 100%; border-radius: 999px; background: var(--red); }
.alloc .arow .afill.eq { background: var(--red); }
.alloc .arow .afill.bd { background: var(--sapphire); }
.alloc .arow .afill.csh { background: #8FD9C0; }
.alloc .arow .apct { width: 38px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   ADVISOR-SPECIFIC ADDITIONS
   ============================================================ */

/* Dashboard-style mock rows in hero */
.dash-mock .drow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--grey-line);
  font-size: 14px;
}
.dash-mock .drow:last-child { border-bottom: none; }
.dash-mock .drow .who { display: flex; align-items: center; gap: 10px; }
/* Initials sit dead-centre: the flex item must not shrink, and the inherited
   body line-height would otherwise push the text off-centre. */
.dash-mock .avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  background: var(--red-tint); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11.5px; line-height: 1;
  letter-spacing: 0.02em; text-align: center;
}
.dash-mock .who b { display: block; font-size: 14px; }
.dash-mock .who span { display: block; font-size: 12px; color: var(--grey-mid); }
.dna-tag {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.dna-tag.g { background: var(--green-tint); color: var(--green); }
.dna-tag.a { background: var(--amber-tint); color: var(--amber); }
.dna-tag.b { background: rgba(51, 81, 146, 0.12); color: var(--sapphire); }

/* Logo / trust strip */
.trust {
  background: #fff; border-bottom: 1px solid var(--grey-line);
  padding: 22px 0;
}
.trust .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.trust .lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-mid); }
.trust .item { font-weight: 800; color: #9aa0a6; font-size: 15.5px; letter-spacing: 0.01em; }

/* Model portfolio table */
.models-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.models { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 720px; }
table.models th { background: var(--ink); color: #fff; text-align: left; padding: 13px 16px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
table.models th.num, table.models td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.models td { padding: 13px 16px; border-bottom: 1px solid var(--grey-line); vertical-align: middle; }
table.models tr:last-child td { border-bottom: none; }
table.models tbody tr:hover { background: var(--red-tint); }
table.models .mname { font-weight: 800; color: var(--ink); }
table.models .mfor { display: block; font-size: 12.5px; color: var(--grey-mid); font-weight: 500; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--red-tint); color: var(--red); }

/* Workflow / integration diagram */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flow .node {
  background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 22px 18px; position: relative; text-align: center;
}
.flow .node .ico {
  width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.flow .node h4 { font-size: 15.5px; margin-bottom: 5px; }
.flow .node p { font-size: 13px; color: var(--grey-mid); }
.flow .node:not(:last-child)::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--red); font-weight: 800; font-size: 18px; z-index: 2;
}

/* Compliance / metric tiles */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.metric {
  background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 24px 22px;
}
.metric .big { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--red); }
.metric .lbl { font-size: 14px; color: var(--grey-mid); margin-top: 4px; }

/* Two-column check list (benefits) */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; text-align: left; }
.benefit-grid .bi { padding-left: 34px; position: relative; font-size: 15.5px; }
.benefit-grid .bi::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; background: var(--red-tint); color: var(--red);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.benefit-grid .bi b { display: block; }
.benefit-grid .bi span { color: var(--grey-mid); font-size: 14px; }

/* Simulator band (dark product showcase) */
.sim {
  background: linear-gradient(135deg, var(--navy) 0%, #06331F 100%);
  color: #fff;
  padding: 74px 0;
}
.sim .wrap { max-width: 1040px; }
.sim-head { margin-bottom: 32px; }
.sim h2 { font-size: 34px; letter-spacing: -0.02em; margin: 16px 0 12px; }
.sim .pill.soft { background: rgba(165, 208, 103, 0.20); color: #CDE9AE; }

/* Two-column: copy + chart */
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; text-align: left; margin-bottom: 14px; }
.sim p.sim-lead { font-size: 17px; color: #C9D6E6; margin: 0; }
.sim-why { font-size: 14.5px; color: #AFC0D4; margin: 16px 0 24px; }
.sim-why b { color: #fff; }
.sim-chart {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 16px;
}
.sim-chart svg { width: 100%; height: auto; display: block; }
.sim-chart .cap { font-size: 12px; color: #8FA4BC; text-align: center; margin-top: 8px; }
.sim-chart .chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sim-chart .ch-cap { font-size: 12px; color: #AFC0D4; }
.sim-chart .success {
  font-size: 12.5px; color: #CDE9AE; white-space: nowrap;
  background: rgba(165, 208, 103, 0.16);
  border: 1px solid rgba(165, 208, 103, 0.34);
  padding: 4px 12px; border-radius: 999px;
}
.sim-chart .success b { font-size: 15px; color: #fff; }
.sim-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 34px 0 30px; text-align: left;
}
.sim-points > div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 20px 20px;
}
.sim-points b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.sim-points span { font-size: 14px; color: #AFC0D4; }
.sim .btn { background: #fff; color: var(--red); border-color: #fff; }
.sim .btn:hover { background: var(--red-tint); border-color: var(--red-tint); }
.sim .sim-note { font-size: 13px; color: #8FA4BC; margin-top: 16px; }
.sim .chip.soon { background: rgba(224, 161, 27, 0.18); color: #F0C674; margin-left: 8px; vertical-align: middle; }

/* Post-retirement capital section */
.rsub { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.muted { color: var(--grey-mid); }

.bucketbar {
  display: flex; height: 66px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--grey-line); box-shadow: var(--shadow);
}
.bucketbar .seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; padding: 0 8px; min-width: 0;
}
.bucketbar .seg b { font-size: 19px; font-weight: 800; line-height: 1.1; }
.bucketbar .seg small { font-size: 11px; opacity: 0.92; white-space: nowrap; }
.bucketbar .seg.income { background: var(--sapphire); }
.bucketbar .seg.growth { background: var(--red); flex: 1; }

.bucket-legend {
  display: flex; gap: 10px 44px; flex-wrap: wrap; justify-content: center;
  margin: 18px auto 6px; max-width: 900px; font-size: 14px; color: var(--grey-mid);
}
.bucket-legend b { color: var(--ink); }
.bucket-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.bucket-legend .sw.income { background: var(--sapphire); }
.bucket-legend .sw.growth { background: var(--red); }

.glide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.glide .gstep {
  background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 18px 16px;
}
.glide .gstep.done { background: var(--red-tint); box-shadow: var(--glow); }
.glide .gyr { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--red); }
.glide .gact { font-size: 13.5px; margin: 6px 0 14px; color: var(--graphite); min-height: 56px; }
.glide .gbar { height: 8px; background: var(--grey-panel); border-radius: 999px; overflow: hidden; }
.glide .gfill { display: block; height: 100%; background: var(--sapphire); border-radius: 999px; }
.glide .gstep.done .gfill { background: var(--red); }
.glide .gpct { font-size: 12.5px; font-weight: 700; color: var(--sapphire); margin-top: 7px; }
.glide .gstep.done .gpct { color: var(--red); }

/* Contact / demo form */
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-form .field { margin-bottom: 0; }
.field { margin-bottom: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--grey-line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }

/* Submit button sits inside .cta-band, whose .btn is inverted (white on navy).
   Inside the white form card we want the normal filled navy button. */
.cta-band .demo-form .btn { background: var(--red); color: #fff; border-color: var(--red); }
.cta-band .demo-form .btn:hover { background: var(--red-dark); border-color: var(--red-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap, .split, .demo-form { grid-template-columns: 1fr; }
  .steps, .features, .plans, .quotes { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .sim-grid { grid-template-columns: 1fr; gap: 30px; }
  .sim-points { grid-template-columns: 1fr; }
  .glide { grid-template-columns: repeat(2, 1fr); }
  .glide .gact { min-height: 0; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow .node:not(:last-child)::after { display: none; }
  .benefit-grid { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  nav.links { display: none; }
  .hero h1 { font-size: 36px; }
}
@media (max-width: 540px) {
  .nav { gap: 12px; height: 68px; }
  .brand-logo { height: 46px; }
  footer .footer-logo { height: 62px; }
  .nav > .btn { padding: 9px 16px; font-size: 14px; }
  .hero h1 { font-size: 31px; }
  .page-hero h1 { font-size: 30px; }
  h2.title { font-size: 27px; }
  .metrics { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .glide { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 1: Advisor register + tailored views
   ============================================================ */

/* Draft banner */
.topbar.draft { background: var(--amber); }

/* Header: allow two buttons */
.nav .btn.ghost.small, .nav .btn.small { padding: 10px 18px; font-size: 14.5px; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Investor note strip */
.investor-note {
  background: var(--red-tint);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex; gap: 16px; align-items: flex-start;
}
.investor-note .ico { width: 52px; height: 52px; flex: 0 0 auto; line-height: 1; }
.investor-note .ico img { width: 100%; height: 100%; display: block; }
.investor-note h4 { font-size: 16px; margin-bottom: 3px; }
.investor-note p { font-size: 14.5px; color: var(--grey-mid); margin: 0; }

/* Audience selector cards (register) */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 6px 0 8px; }
.aud-card { position: relative; }
.aud-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.aud-card .card-inner {
  border: 1.5px solid var(--grey-line); border-radius: var(--radius);
  padding: 22px 20px; height: 100%; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.aud-card input:hover + .card-inner { border-color: #C9CFCE; }
.aud-card input:checked + .card-inner { border-color: var(--red); box-shadow: var(--shadow); }
.aud-card .badge-role { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.aud-card h4 { font-size: 17px; margin: 6px 0 6px; }
.aud-card p { font-size: 13.5px; color: var(--grey-mid); margin: 0; }
.aud-card input:checked + .card-inner::after {
  content: "✓"; position: absolute; top: 14px; right: 16px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}

/* Context bar on tailored pages */
.ctx-bar { background: var(--grey-panel); border-bottom: 1px solid var(--grey-line); }
.ctx-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; color: var(--grey-mid); }
.ctx-bar b { color: var(--ink); }
.ctx-bar a { color: var(--red); font-weight: 700; text-decoration: none; }
.ctx-bar a:hover { text-decoration: underline; }

/* "What you get" checklist for tailored pages */
.get-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; text-align: left; }
.get-grid .gi { padding-left: 34px; position: relative; font-size: 15.5px; }
.get-grid .gi::before {
  content: "✓"; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  background: var(--red-tint); color: var(--red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.get-grid .gi b { display: block; }
.get-grid .gi span { color: var(--grey-mid); font-size: 14px; }

@media (max-width: 720px) {
  .aud-grid { grid-template-columns: 1fr; }
  .get-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 2: scroll animations, advisor login, footer FSP
   ============================================================ */

/* Scroll reveal (only active when JS added .reveal and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
  }
  .has-js .reveal.in { opacity: 1; transform: none; }
}

/* Footer FSP line */
footer .footer-fsp {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

/* Terms & conditions checkbox (register) */
.field label.check {
  display: flex; gap: 11px; align-items: flex-start;
  font-weight: 500; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.field label.check input { width: auto; margin-top: 3px; flex: 0 0 auto; accent-color: var(--red); }
.field label.check a { color: var(--red); font-weight: 700; }

/* ---------- Advisor login page ---------- */
.auth-page {
  background: linear-gradient(160deg, #fff 0%, var(--red-tint) 100%);
  padding: 64px 0 80px;
  min-height: 72vh;
  display: flex; align-items: center;
}
.auth-wrap { max-width: 440px; margin: 0 auto; width: 100%; }
.auth-card {
  background: #fff; border: 1px solid var(--grey-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px 32px;
}
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-sub { color: var(--grey-mid); font-size: 15px; margin-bottom: 24px; }
.auth-card .field label { font-size: 13.5px; }
.btn.ms {
  background: #fff; color: var(--ink); border: 1.5px solid var(--grey-line);
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; font-size: 15.5px;
}
.btn.ms:hover { background: var(--grey-panel); border-color: #C9CFCE; }
.btn.ms svg { width: 18px; height: 18px; flex: 0 0 auto; }
.auth-or {
  display: flex; align-items: center; gap: 14px;
  color: var(--grey-mid); font-size: 12.5px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; margin: 22px 0;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--grey-line); }
.auth-card .btn.full { width: 100%; }
.auth-foot { text-align: center; font-size: 14.5px; color: var(--grey-mid); margin-top: 22px; }
.auth-foot a { color: var(--red); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-note {
  background: var(--red-tint); color: var(--red-dark);
  font-size: 13px; line-height: 1.5; border-radius: 10px;
  padding: 12px 14px; margin-top: 18px;
}
.forgot { display: block; text-align: right; font-size: 13px; color: var(--red); font-weight: 600; text-decoration: none; margin: -8px 0 16px; }
.forgot:hover { text-decoration: underline; }

/* ============================================================
   PHASE 3: DNA Invest CI v2 applied in full
   Brand guide: "DNA Invest_CI" (Hey Studio). Uses the full palette
   rather than emerald alone. Emerald Teal leads, with Turquoise,
   Picton, Sapphire and Lime carrying the supporting accents.
   ============================================================ */

:root {
  /* supporting-colour tints, derived from the CI swatches */
  --turq-tint:     #E4F7F7;
  --sky-tint:      #E6F6FD;
  --sapphire-tint: #E8ECF5;
  --lime-tint:     #F0F7E4;

  /* the accent cycle used across repeating card sets */
  --a1: var(--red);        --a1-tint: var(--red-tint);
  --a2: var(--turq);       --a2-tint: var(--turq-tint);
  --a3: var(--sky);        --a3-tint: var(--sky-tint);
  --a4: var(--sapphire);   --a4-tint: var(--sapphire-tint);
  --a5: #7FB93C;           --a5-tint: var(--lime-tint);   /* lime, darkened for AA text contrast */
}


/* ---------- D · N · A steps: three distinct CI colours ---------- */
.steps .step:nth-child(1) .n { background: var(--red); }
.steps .step:nth-child(2) .n { background: var(--turq); }
.steps .step:nth-child(3) .n { background: var(--sapphire); }

/* ---------- Stats strip ----------
   Figures are set in white so the row reads as one measured statement; the
   colour accent moves to a short rule above each stat instead. */
.stats .wrap { gap: 44px; text-align: left; align-items: start; }
.stats .stat { position: relative; padding-top: 22px; }
/* One divider colour throughout this block. */
.stats .stat::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; border-radius: 2px;
  background: var(--sky);
}
/* Hairline between columns on desktop, sitting in the grid gap. */
.stats .stat + .stat::after {
  content: ""; position: absolute; left: -22px; top: 4px; bottom: 4px;
  width: 1px; background: rgba(255, 255, 255, 0.09);
}
.stats .num, .stats .num span { color: #fff; }
.stats .num { font-size: 44px; line-height: 1.02; letter-spacing: -0.025em; }
.stats .num span { font-size: 26px; font-weight: 700; }
.stats .lbl {
  color: #fff; font-size: 15.5px; font-weight: 600; margin-top: 12px;
  letter-spacing: 0.01em; line-height: 1.35;
}
.stats .hint { color: #9FB0C4; font-size: 13.5px; margin-top: 5px; line-height: 1.5; }


/* ---------- Benefit / "what you get" ticks ---------- */
.benefit-grid .bi:nth-child(3n+1)::before,
.get-grid .gi:nth-child(3n+1)::before { background: var(--turq-tint); color: var(--turq); }
.benefit-grid .bi:nth-child(3n+2)::before,
.get-grid .gi:nth-child(3n+2)::before { background: var(--sapphire-tint); color: var(--sapphire); }

/* ---------- Trust strip: compliance marks as bubbles ---------- */
.trust .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trust .item {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1.5px solid var(--grey-line);
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(13, 24, 43, 0.04);
  transition: border-color .15s, color .15s, transform .15s;
}
.trust .item:hover { transform: translateY(-1px); }
.trust .chips .item:nth-child(1) { color: var(--red);      border-color: rgba(28,158,118,.35); }
.trust .chips .item:nth-child(2) { color: var(--sky);      border-color: rgba(77,192,239,.45); }
.trust .chips .item:nth-child(3) { color: var(--turq);     border-color: rgba(37,189,191,.40); }
.trust .chips .item:nth-child(4) { color: var(--sapphire); border-color: rgba(51,81,146,.32); }
.trust .chips .item:nth-child(5) { color: #7FB93C;         border-color: rgba(165,208,103,.55); }

/* ---------- Section eyebrows ----------
   One colour for every section header across the whole site, so the page reads
   as a single system rather than a different accent per band. */
.kicker { color: var(--sky); }

/* Titles inside cards and panels stay navy: they are content headings, not
   section eyebrows, and navy keeps them from competing with the section above. */
.panel-card .kicker,
.aud-card .badge-role,
.investor-note h4 { color: var(--ink); }
.panel-card .kicker::after { display: none; }

/* Kicker gets a short brand rule beneath it (CI cover-page device) */
.center > .kicker::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  background: currentColor; opacity: .85; margin: 9px auto 0;
}

/* ---------- Plan cards ---------- */
.plan h3 { text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: 18px; }

/* ---------- Model table: alternating CI row accent on the name cell ---------- */

/* ---------- CI wave divider (cover-page device) ----------
   The navy stats band curves into the grey section beneath it. */
/* One SVG carries both the curved grey fill and the brand rule riding it, so
   the line always follows the curve exactly. The bottom padding has to clear
   the wave's full height, otherwise the curve crowds the last line of text. */
.stats { position: relative; padding: 72px 0 128px; }
.stats::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 74px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74V30c240-28 480-28 720 0s480 28 720 0v44z' fill='%23F2F4F3'/%3E%3Cpath d='M0 30c240-28 480-28 720 0s480 28 720 0' fill='none' stroke='%234DC0EF' stroke-width='3'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
}

/* ---------- Hero: multi-colour brand wash rather than flat emerald ---------- */
.hero {
  background:
    radial-gradient(1100px 460px at 88% -6%, rgba(77,192,239,0.16), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(165,208,103,0.20), transparent 60%),
    linear-gradient(160deg, #fff 0%, var(--red-tint) 100%);
}
.page-hero {
  background:
    radial-gradient(760px 300px at 92% -20%, rgba(37,189,191,0.16), transparent 60%),
    linear-gradient(160deg, #fff 0%, var(--red-tint) 100%);
}

/* Simulator band picks up sapphire depth instead of pure green */
.sim { background: linear-gradient(135deg, var(--navy) 0%, #123A5E 55%, #0C4A3C 100%); }
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, #1D3A63 55%, #124F41 100%); }

/* Footer keeps a brand rule across the top */
footer.site { border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--turq) 40%, var(--sky) 70%, var(--lime)) 1; }

/* ---------- CI typography ----------
   Guide: MAIN HEADERS, BOLD (UPPERCASE); SUBHEADERS, MEDIUM (UPPERCASE).
   Caps need the tight tracking removed and a touch of positive letter-spacing,
   and sizes come down slightly because uppercase sets ~12% wider. */
h1,
h2.title,
.cta-band h2,
.sim h2 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.012em;
  line-height: 1.16;
}
.hero h1                        { font-size: 42px; }
.page-hero h1                   { font-size: 32px; }
.auth-card h1                   { font-size: 23px; letter-spacing: 0.02em; }
h2.title, .cta-band h2, .sim h2 { font-size: 30px; }

/* Subheaders: uppercase, Semibold rather than Medium so they still out-rank
   body copy on screen at these sizes. */
.rsub,
.feature h3,
.step h3,
.investor-note h4,
.sim-points b,
.benefit-grid .bi b,
.get-grid .gi b {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.035em;
}
.feature h3, .step h3 { line-height: 1.32; }

/* "attooh!" is a lowercase wordmark, so a caps rule must never shout it. */
.lc { text-transform: lowercase; }

/* Advisor-type selection cards keep their proper-noun labels as written. */
.aud-card h4 { text-transform: none; letter-spacing: 0; }

@media (max-width: 960px) { .hero h1 { font-size: 33px; } }
@media (max-width: 540px) {
  .hero h1 { font-size: 28px; }
  .page-hero h1 { font-size: 26px; }
  h2.title, .cta-band h2, .sim h2 { font-size: 24px; }
}

/* ============================================================
   PHASE 4: pill navigation + Midnight Navy buttons
   ============================================================ */

/* ---------- Floating pill navbar ---------- */
header.site {
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 14px 20px;
}
header.site .nav {
  height: 76px;
  padding: 0 16px 0 28px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--grey-line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(13, 24, 43, 0.10);
}

/* ---------- Buttons in Midnight Navy ---------- */
.btn { background: var(--navy); border-color: var(--navy); }
.btn:hover { background: #1C3052; border-color: #1C3052; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: rgba(13, 24, 43, 0.07); }

/* The demo form sits on the dark CTA band but inside a white card, so its
   submit follows the navy treatment rather than the band's inverted one. */
.cta-band .demo-form .btn { background: var(--navy); border-color: var(--navy); }
.cta-band .demo-form .btn:hover { background: #1C3052; border-color: #1C3052; }

/* Inverted buttons on dark bands stay white. The .cta-band .btn / .sim .btn rules and
   the Microsoft SSO button all carry higher specificity and are untouched. */

@media (max-width: 960px) {
  header.site { padding: 12px 16px; }
  header.site .nav { height: 70px; padding: 0 14px 0 22px; }
}
@media (max-width: 540px) {
  header.site { padding: 10px 12px; }
  header.site .nav { height: 64px; gap: 12px; padding: 0 10px 0 16px; }
}

/* ============================================================
   PHASE 5 — mobile pass
   ============================================================ */

/* The income bucket is only 12% of the bar, so on a narrow screen its label had
   nowhere to go and was clipped. Below 720px the bar becomes two stacked rows:
   the split is stated in words instead of being inferred from width, which
   survives any screen size. */
@media (max-width: 720px) {
  .bucketbar { flex-direction: column; height: auto; border-radius: 12px; }
  .bucketbar .seg {
    flex: none !important; width: 100%;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 16px; text-align: left;
  }
  .bucketbar .seg b { font-size: 17px; }
  .bucketbar .seg small { font-size: 12.5px; opacity: 1; white-space: normal; }
  .bucket-legend { gap: 10px 20px; font-size: 13.5px; text-align: left; }
}
/* Between 720px and the desktop layout, stop the narrow segment clipping. */
@media (min-width: 721px) and (max-width: 1000px) {
  .bucketbar .seg.income { min-width: 128px; }
  .bucketbar .seg small { font-size: 10.5px; }
}

@media (max-width: 960px) {
  section.block { padding: 54px 0; }
  .stats { padding: 52px 0 96px; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .stats .num { font-size: 38px; }
  /* The hairline only makes sense between columns of a single row. */
  .stats .stat + .stat::after { display: none; }
  .hero { padding: 44px 0 48px; }
  .hero p.lead { font-size: 17px; }
  .trust .wrap { gap: 12px; }
  .models-wrap { margin-inline: -8px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  section.block { padding: 44px 0; }
  .stats { padding: 42px 0 82px; }
  .stats .wrap { grid-template-columns: 1fr; gap: 26px; }
  .stats .num { font-size: 34px; }
  .stats .num span { font-size: 21px; }
  .stats::after { height: 54px; }
  .hero .cta-row { gap: 10px; }
  .hero .cta-row .btn { width: 100%; text-align: center; }
  .btn.big { padding: 13px 24px; font-size: 16px; }
  p.sub { font-size: 16px; margin-bottom: 28px; }
  .trust { padding: 18px 0; }
  .trust .lbl { display: block; width: 100%; text-align: center; margin-bottom: 4px; }
  .trust .item { font-size: 13px; padding: 6px 13px; }
  .feature, .step, .plan, .panel-card, .quote { padding: 22px 20px; }
  .features, .steps, .plans, .quotes, .metrics, .benefit-grid, .get-grid { gap: 16px; }
  .feature .ico { width: 56px; height: 56px; }
  .glide { gap: 10px; }
  .cta-band { padding: 48px 0; }
  .demo-form { padding: 22px !important; }
  details.faq summary { font-size: 15.5px; padding: 16px 44px 16px 18px; }
  details.faq .body { padding: 0 18px 18px; font-size: 15px; }
  footer.site { padding: 44px 0 26px; }
  footer .cols { grid-template-columns: 1fr; gap: 26px; margin-bottom: 30px; }
  .sim { padding: 48px 0; }
  .sim-points > div { padding: 16px 18px; }
  .investor-note { padding: 16px 18px; gap: 12px; }
  .investor-note .ico { width: 42px; height: 42px; }
  .dash-mock { padding: 18px; }
}

/* Very narrow phones: keep the dashboard mock rows from wrapping awkwardly. */
@media (max-width: 400px) {
  .dash-mock .drow { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-mock .dna-tag { margin-left: 42px; }
  .trust .item { font-size: 12.5px; padding: 6px 11px; }
}

/* ============================================================
   PHASE 6 — content sections ported from the content repo,
   styled against the existing CI rather than the source styling.
   ============================================================ */

/* ---------- D·N·A process stepper ---------- */
.dna-stepper { max-width: 940px; margin: 8px auto 0; text-align: left; }
.dna-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.dna-tab {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1.5px solid var(--grey-line); border-radius: var(--radius);
  padding: 15px 16px; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dna-tab:hover { border-color: #C9CFCE; transform: translateY(-1px); }
.dna-tab .n {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--grey-panel); color: var(--grey-mid);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; line-height: 1;
  transition: background .15s, color .15s;
}
.dna-tab .lbl { display: block; min-width: 0; }
.dna-tab .lbl b {
  display: block; font-size: 14.5px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
}
.dna-tab .lbl small { display: block; font-size: 12.5px; color: var(--grey-mid); margin-top: 2px; }
.dna-tab.active { border-color: var(--red-dark); box-shadow: var(--glow-lift); }
.dna-tab.active .n { background: var(--sky); color: #fff; }
.dna-tab:focus-visible { outline: 3px solid rgba(77,192,239,.45); outline-offset: 2px; }

.dna-panel {
  background: #fff; border: 1px solid var(--grey-line);
  border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--glow);
}
.dna-panel[hidden] { display: none; }
.dna-panel > p { color: var(--grey-mid); font-size: 15.5px; margin-top: 4px; }
.step-list { list-style: none; margin: 16px 0 0; }
.step-list li { padding: 8px 0 8px 32px; position: relative; font-size: 15.5px; }
.step-list li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.dna-launch {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--grey-line);
}
.dna-tool.locked { background: var(--grey-panel); color: var(--grey-mid); border-color: var(--grey-line); }
.dna-tool.locked:hover { background: #E9ECEB; border-color: #C9CFCE; }
.dna-tool .lk { margin-right: 2px; }
.dna-launch .soon { font-size: 13.5px; color: var(--grey-mid); }
.dna-launch .soon a { color: var(--red); font-weight: 700; }

/* ---------- "What Smart Simplicity delivers" ---------- */
.result-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.result-chips span {
  background: #fff; border: 1.5px solid var(--grey-line); border-radius: 999px;
  padding: 8px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink);
}

/* ---------- DNA Outcome Curve ---------- */
.outcome-wrap { max-width: 900px; }
.outcome-card {
  background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 22px 16px;
}
.outcome-card svg { width: 100%; height: auto; display: block; font-family: inherit; }
.outcome-card .cap { font-size: 12.5px; color: var(--grey-mid); text-align: center; margin-top: 12px; }
.outcome-stats {
  display: flex; align-items: stretch; justify-content: center; gap: 16px;
  flex-wrap: wrap; margin-top: 22px;
}
.oc-stat {
  flex: 1 1 240px; max-width: 320px; text-align: center;
  border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: 20px 18px; background: #fff;
}
.oc-stat .big { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.oc-stat .lbl { font-size: 13.5px; color: var(--grey-mid); margin-top: 6px; }
/* The before-advice figure is the one being improved on, so it reads in the
   darkest brand tone rather than greyed out. */
.oc-stat.before .big { color: var(--ink); }
.oc-stat.after { border-color: rgba(28,158,118,.45); background: var(--red-tint); }
.oc-stat.after .big { color: var(--red); }
.oc-arrow { align-self: center; font-size: 26px; color: var(--sky); font-weight: 700; }

/* ---------- Plan health / vital signs ---------- */
.vitals-new { box-shadow: var(--glow-lift); }
.vitals-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vitals-head h4 { margin: 0; }
.vital-score {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap;
}
.vital-score small { font-size: 13px; font-weight: 600; color: var(--grey-mid); }
.vs-badge {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px; align-self: center;
}
.vs-badge.good { background: var(--green-tint); color: var(--red); }
.mini-rows .row b.up { color: var(--red); }
.mini-rows .row b.muted { color: var(--grey-mid); font-weight: 600; }
.vitals-lights { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.vl {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--grey-line); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; color: var(--grey-mid);
}
.vl b { color: var(--ink); }
.vl::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.vl.green::before { background: var(--red); }
.vl.amber::before { background: #E0A11B; }
.vl.red::before  { background: #C4623F; }

@media (max-width: 860px) {
  .dna-tabs { grid-template-columns: 1fr; gap: 10px; }
  .dna-tab { padding: 13px 14px; }
}
@media (max-width: 640px) {
  .dna-panel { padding: 22px 20px; }
  .dna-launch { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dna-launch .btn { width: 100%; text-align: center; }
  .outcome-card { padding: 16px 14px 12px; }
  .oc-arrow { transform: rotate(90deg); }
  .oc-stat { flex: 1 1 100%; max-width: none; }
  .vitals-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vl, .result-chips span { font-size: 13px; }
}

/* ============================================================
   PHASE 7 — compliance credentials
   Was a four-across stat grid, but it lives in a half-width
   column, so each tile got ~95px: "5-20" broke across lines and
   every label wrapped to five. A row list suits a narrow column
   and handles mixed values (numbers and acronyms) evenly.
   ============================================================ */
.cred-card {
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cred {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--grey-line);
}
.cred:last-child { border-bottom: none; }

/* Fixed-width badge keeps every label starting on the same line,
   whatever the value is. nowrap stops "5-20" splitting. */
.cred .cv {
  flex: 0 0 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 6px;
  background: var(--red-tint);
  color: var(--red);
  border-radius: 11px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  text-align: center;
}
.cred .ct { min-width: 0; }
.cred .ct b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.cred .ct > span {
  display: block;
  font-size: 14px;
  color: var(--grey-mid);
  margin-top: 3px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .cred { gap: 14px; padding: 15px 16px; }
  .cred .cv { flex: 0 0 72px; min-height: 46px; font-size: 19px; }
  .cred .ct b { font-size: 14px; }
  .cred .ct > span { font-size: 13.5px; }
}

/* ============================================================
   PHASE 8 — one card treatment
   The multicoloured top and left rules (a different accent per
   feature, step, plan and model row) are gone. Every raised
   surface now reads the same: a neutral hairline plus a soft
   dark-green glow, so depth carries the brand instead of colour.
   ============================================================ */
:root {
  --glow:      0 8px 26px rgba(23, 131, 95, 0.15), 0 2px 6px rgba(13, 24, 43, 0.04);
  --glow-lift: 0 14px 38px rgba(23, 131, 95, 0.26), 0 3px 10px rgba(13, 24, 43, 0.06);
  /* the base shadow token feeds older rules; align it to the same glow */
  --shadow:    0 8px 26px rgba(23, 131, 95, 0.15), 0 2px 6px rgba(13, 24, 43, 0.04);
}

.feature,
.step,
.plan,
.panel-card,
.quote,
.cred-card,
.outcome-card,
.oc-stat,
.chat-mock,
.glide .gstep,
.aud-card .card-inner,
.dna-tab,
.dna-panel,
table.models,
.auth-card,
details.faq {
  border: 1px solid var(--grey-line);
  box-shadow: var(--glow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Lift on hover for the surfaces that are interactive or scannable. */
.feature:hover,
.plan:hover,
.quote:hover,
.oc-stat:hover,
.dna-tab:hover,
.glide .gstep:hover {
  box-shadow: var(--glow-lift);
  transform: translateY(-2px);
  border-color: var(--grey-line);
}

/* Emphasis is carried by a deeper glow, never by a coloured outline. */
.plan.hot,
.vitals-new,
.dna-tab.active { box-shadow: var(--glow-lift); }
.dna-tab.active { border-color: var(--red-dark); }

/* Trust chips and traffic-light pills sit on tinted bands: keep them flat so
   the glow stays meaningful on genuine cards. */
.trust .item,
.vl,
.result-chips span { box-shadow: none; }
.trust .item:hover { box-shadow: var(--glow); }

/* The model table keeps its own rounding; the name cell no longer carries a
   coloured rule, so drop the indent that made room for it. */
table.models .mname { display: block; padding-left: 0; }

/* The name cell no longer carries a coloured left rule to anchor it, so state
   its alignment explicitly instead of inheriting centre from the section. */
table.models td:first-child,
table.models th:first-child { text-align: left; }

/* Active step badge follows the same dark green as its border, rather than
   leaving a blue fill inside a green-outlined tab. */
.dna-tab.active .n { background: var(--red-dark); color: #fff; }

/* ============================================================
   PHASE 9 — hero seam + dashboard mock
   ============================================================ */

/* The pill navbar sat on a white strip with a hard edge where the hero
   gradient began. Pulling the first section up by the header's height runs
   the gradient behind the pill instead, so the bar floats on the hero. */
:root { --nav-h: 104px; }
header.site + .hero,
header.site + .page-hero,
header.site + .auth-page { margin-top: calc(-1 * var(--nav-h)); }
header.site + .hero      { padding-top: calc(var(--nav-h) + 60px); }
header.site + .page-hero { padding-top: calc(var(--nav-h) + 44px); }
header.site + .auth-page { padding-top: calc(var(--nav-h) + 40px); }

/* ---------- Advisor dashboard mock ---------- */
.dash-mock {
  position: relative;
  background: #fff;
  border: 1px solid var(--grey-line);
  border-radius: 18px;
  box-shadow: var(--glow-lift);
  overflow: hidden;
}
/* A second sheet peeking out behind, so it reads as an app, not a box. */
.dash-mock::before {
  content: "";
  position: absolute; inset: 14px -12px -12px 14px; z-index: -1;
  background: #fff; border: 1px solid var(--grey-line);
  border-radius: 18px; opacity: .55;
}

.dm-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--grey-line);
  background: var(--grey-panel);
}
.dm-dots { display: inline-flex; gap: 5px; }
.dm-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D4D8D7; display: block; }
.dm-dots i:first-child { background: #E8896B; }
.dm-dots i:nth-child(2) { background: #E4A11B; }
.dm-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dm-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--red);
  background: var(--red-tint); padding: 4px 11px; border-radius: 999px;
}
.dm-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: block; }

.dm-rows { padding: 6px 18px; }
.dm-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 0; border-bottom: 1px solid var(--grey-line);
}
.dm-row:last-child { border-bottom: none; }
.dm-row .avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: var(--red-tint); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; line-height: 1;
}
.dm-who { flex: 1; min-width: 0; }
.dm-who b { display: block; font-size: 14.5px; color: var(--ink);
  /* Two short words wrapped onto two lines once the names became
     'Client A' rather than a single first name. */
  white-space: nowrap; }

/* The score reads as a position on the 5-20 scale, not just a number. */
.dm-scale { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.dm-track { flex: 1; max-width: 96px; height: 5px; background: var(--grey-panel); border-radius: 999px; overflow: hidden; }
.dm-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--turq), var(--red)); }
.dm-scale small { font-size: 11.5px; color: var(--grey-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dm-model {
  flex: 0 0 auto; text-align: right;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  padding: 6px 11px; border-radius: 10px; max-width: 176px;
  white-space: nowrap;
}
.dm-model small { display: block; font-weight: 600; opacity: .75; font-size: 10.5px; }
.dm-model.g { background: var(--green-tint); color: var(--red); }
.dm-model.a { background: var(--amber-tint); color: var(--amber); }
.dm-model.b { background: rgba(51, 81, 146, .10); color: var(--sapphire); }

.dm-foot { display: flex; border-top: 1px solid var(--grey-line); background: var(--grey-panel); }
.dm-foot span { flex: 1; padding: 13px 16px; text-align: center; }
.dm-foot span + span { border-left: 1px solid var(--grey-line); }
.dm-foot small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-mid); }
.dm-foot b { display: block; font-size: 19px; color: var(--ink); margin-top: 3px; letter-spacing: -.01em; }

@media (max-width: 960px) {
  :root { --nav-h: 94px; }
  header.site + .hero { padding-top: calc(var(--nav-h) + 34px); }
}
@media (max-width: 540px) {
  :root { --nav-h: 84px; }
  header.site + .hero { padding-top: calc(var(--nav-h) + 26px); }
  .dm-row { flex-wrap: wrap; }
  .dm-model { max-width: none; text-align: left; margin-left: 49px; }
  .dm-foot b { font-size: 17px; }
}

/* ============================================================
   PHASE 10 — consistency pass
   One text tone on light backgrounds, one accent for section
   eyebrows, and the simulator brought back into the light
   sections instead of being a dark outlier.
   ============================================================ */

/* Secondary copy was washing out on white. Darkened so every card reads at
   the same weight, while still sitting behind the headings. */
:root { --grey-mid: #55595B; }

/* ---------- Trust marks, now part of the hero ---------- */
.trust-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px 22px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 26px;
  border-top: 1px solid rgba(13, 24, 43, 0.08);
}
.trust-row .lbl {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey-mid);
}
.trust-row .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* One tone for every mark: they are peers, not a colour key. */
.trust-row .item {
  display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(13, 24, 43, 0.10);
  padding: 6px 15px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Stats strip ---------- */
/* The unit was set smaller than its figure, so the row read as four
   different sizes. One size, and the accent rule above each is gone. */
.stats .stat::before { display: none; }
.stats .stat { padding-top: 0; }
.stats .num span { font-size: inherit; font-weight: 800; }

/* ---------- Simulator: a light section like the rest ---------- */
.sim {
  background: var(--grey-panel);
  color: var(--graphite);
  padding: 76px 0;
}
.sim h2 { color: var(--ink); }
.sim .pill.soft { background: rgba(77, 192, 239, 0.16); color: #1683AE; }
.sim p.sim-lead { color: var(--graphite); }
.sim .sim-why { color: var(--grey-mid); }
.sim .sim-why b { color: var(--ink); }
.sim .sim-note { color: var(--grey-mid); }
.sim .chip.soon { background: var(--amber-tint); color: var(--amber); }

.sim-chart {
  background: #fff;
  border: 1px solid var(--grey-line);
  box-shadow: var(--glow);
}
.sim-chart .cap, .sim-chart .ch-cap { color: var(--grey-mid); }
.sim-chart .success {
  background: var(--green-tint);
  border: 1px solid rgba(28, 158, 118, .32);
  color: var(--red);
}
.sim-chart .success b { color: var(--ink); }

.sim-points > div {
  background: #fff;
  border: 1px solid var(--grey-line);
  box-shadow: var(--glow);
}
.sim-points b { color: var(--ink); }
.sim-points span { color: var(--grey-mid); }

/* The button no longer sits on a dark band, so it takes the normal treatment. */
.sim .btn { background: var(--navy); color: #fff; border-color: var(--navy); }
.sim .btn:hover { background: #1C3052; border-color: #1C3052; }

/* ============================================================
   PHASE 11 — D·N·A stepper: numbered, cleaner, real icons
   ============================================================ */
/* The circle carries the step number and the label carries the step name, so
   the tab reads "1 Define" rather than repeating "Step 1" in words. */
.dna-tab .n {
  width: 34px; height: 34px; flex: 0 0 34px;
  font-size: 15px; font-weight: 800;
  background: #fff; color: var(--grey-mid);
  border: 1.5px solid var(--grey-line);
}
.dna-tab.active .n { background: var(--red-dark); color: #fff; border-color: var(--red-dark); }
.dna-tab .lbl b {
  font-size: 16px; letter-spacing: .01em; text-transform: none; font-weight: 700;
}
.dna-tab .lbl small { font-size: 12.5px; margin-top: 1px; }
.dna-tab { padding: 13px 15px; gap: 12px; }

/* A drawn tick rather than a text glyph, so it renders identically everywhere
   instead of falling back to whatever the system has. */
.step-list li::before {
  content: "";
  background: var(--red-tint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/13px 13px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/13px 13px;
  background-color: var(--red);
}
/* The tinted disc sits behind the masked tick. */
.step-list li { position: relative; }
.step-list li::after {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red-tint); z-index: -1;
}

/* Drawn padlock in place of the emoji, inheriting the button's colour. */
.dna-tool .lk {
  width: 15px; height: 15px; display: inline-block;
  vertical-align: -2px; margin-right: 4px; color: currentColor;
}

/* The tinted disc behind each tick never rendered (it sat behind the panel),
   and the plain drawn tick reads better without it. */
.step-list li::after { display: none; }

/* ============================================================
   PHASE 12 — section eyebrows as bubbles
   Every small section header now takes the same pill the
   simulator used, and the short rule under the centred ones is
   gone: the pill is the marker, a divider as well is one signal
   too many.
   ============================================================ */
.kicker {
  display: inline-block;
  background: rgba(77, 192, 239, 0.16);
  color: #1683AE;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.center > .kicker::after { display: none; }

/* Labels inside cards are not section headers, so they stay plain text and
   keep the hierarchy: a pill inside a card competes with the card itself. */
.panel-card .kicker,
.dna-panel .kicker {
  display: block; background: none; padding: 0;
  color: var(--ink); border-radius: 0; margin-bottom: 10px;
}

/* The simulator's own pill is now identical to every other eyebrow. */
.sim .pill.soft {
  font-size: 12px; font-weight: 800; letter-spacing: 0.07em;
  padding: 6px 15px; margin-bottom: 16px;
}


/* The kicker is an inline-block pill, so text-align on it centres its own text
   rather than the pill. Where a section asks for a centred kicker, centre the
   box itself; sections that align left are left alone. */
.kicker.center,
.center > .kicker {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Legal pages — PAIA manual & privacy policy
   Long-form statutory content. Set for reading and for finding
   a clause quickly, not for persuasion.
   ============================================================ */

.legal-page { padding: 46px 0 70px; }
.legal-head { max-width: 760px; margin: 0 0 34px; }
.legal-head .title { margin-bottom: 12px; }
.legal-meta {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--grey-line);
  font-size: 14px; color: var(--grey-mid);
}
.legal-meta b { display: block; color: var(--ink); font-weight: 700; }

/* Two columns: a sticky contents rail, then the document. */
.legal-grid { display: grid; grid-template-columns: 232px 1fr; gap: 46px; align-items: start; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; gap: 26px; } }

.legal-toc { position: sticky; top: 92px; }
@media (max-width: 900px) { .legal-toc { position: static; } }
.legal-toc h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--grey-mid); margin: 0 0 10px; font-weight: 800;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
/* Part 2 continues the numbering rather than restarting; start="12" alone is
   ignored once a counter is in play. */
.legal-toc ol[start="12"] { counter-reset: toc 11; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block; padding: 6px 0 6px 26px; position: relative;
  font-size: 14px; color: var(--graphite); text-decoration: none; line-height: 1.4;
  border-left: 2px solid transparent;
}
.legal-toc a::before {
  content: counter(toc); position: absolute; left: 8px; top: 6px;
  font-size: 11px; font-weight: 800; color: var(--grey-mid);
}
.legal-toc a:hover { color: var(--green); }
.legal-toc a:hover::before { color: var(--green); }
.legal-toc .toc-part {
  margin: 16px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--green);
}
.legal-toc .toc-part:first-child { margin-top: 0; }

.legal-doc { max-width: 780px; min-width: 0; }
.legal-part {
  display: flex; align-items: center; gap: 12px;
  margin: 44px 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--green);
}
.legal-part:first-child { margin-top: 0; }
.legal-part .n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.legal-part h2 { margin: 0; font-size: 25px; letter-spacing: -.01em; }
.legal-part p { margin: 2px 0 0; font-size: 14px; color: var(--grey-mid); }

.legal-doc h3 {
  font-size: 18px; margin: 32px 0 8px; color: var(--ink); scroll-margin-top: 92px;
}
.legal-doc h3 .num { color: var(--green); font-weight: 800; margin-right: 8px; }
.legal-doc h4 { font-size: 15px; margin: 20px 0 6px; color: var(--ink); }
.legal-doc p { margin: 0 0 12px; color: var(--graphite); line-height: 1.68; }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px; padding-left: 20px; color: var(--graphite); }
.legal-doc li { margin-bottom: 6px; line-height: 1.62; }
.legal-doc a { color: var(--green); }

.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; }
.legal-table th {
  text-align: left; background: var(--grey-panel); padding: 9px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--grey-mid); font-weight: 800;
}
.legal-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--grey-line);
  vertical-align: top; font-size: 14.5px; color: var(--graphite); line-height: 1.55;
}
.legal-table td strong { color: var(--ink); }
.legal-table tr:last-child td { border-bottom: none; }

.legal-note {
  background: var(--red-tint); border-left: 3px solid var(--green);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 18px 0;
  font-size: 14.5px; line-height: 1.62; color: var(--graphite);
}
.legal-note b { color: var(--ink); }

/* Anything the firm must still supply is flagged, never invented. */
.legal-fill {
  display: inline-block; background: #FDF1DC; color: #8A5D0C;
  border: 1px dashed #D9A441; border-radius: 5px;
  padding: 1px 8px; font-size: 13px; font-weight: 700;
}
.legal-todo {
  background: #FDF6F5; border-left: 3px solid #D4544A;
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 18px 0;
  font-size: 14.5px; line-height: 1.62; color: var(--graphite);
}
.legal-todo b { color: #A83A31; }

.legal-contact {
  background: var(--navy); color: #fff; border-radius: 14px;
  padding: 26px 30px; margin: 34px 0 0;
}
.legal-contact h3 { color: #fff; margin: 0 0 4px; font-size: 19px; }
.legal-contact p { color: #9DB3AB; margin: 0 0 18px; font-size: 14.5px; }
.legal-contact .cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.legal-contact h5 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #6E8A80; margin: 0 0 6px; font-weight: 800;
}
.legal-contact .cgrid p { color: #E6EBE9; font-size: 14px; line-height: 1.62; margin: 0; }
.legal-contact a { color: var(--lime); }

.legal-updated {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--grey-line);
  font-size: 13.5px; color: var(--grey-mid);
}

/* Enquiry consent (POPIA §11 / §18) */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent-row { display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:14px; line-height:1.55; }
.consent-row input { width:auto; margin:3px 0 0; flex:0 0 auto; accent-color:var(--green); }
.consent-note { margin:8px 0 0 28px; font-size:12.5px; color:var(--grey-mid); line-height:1.55; }
.consent-note a { color:var(--green); }
.enquiry-flash {
  margin:0 0 16px; padding:12px 16px; border-radius:10px; font-size:14.5px; line-height:1.55;
  background:var(--red-tint); border-left:3px solid var(--green); color:var(--graphite);
}
.enquiry-flash.bad { background:#FDF6F5; border-left-color:#D4544A; }

/* ============================================================
   Mobile / tablet navigation

   Below 960px the section nav was hidden with nothing in its place,
   so every visitor under that width — tablet and phone alike — was
   left on a long page with no wayfinding. The toggle below is that
   missing fallback.
   ============================================================ */

.nav-toggle {
  display: none;                 /* desktop keeps the inline nav */
  width: 44px; height: 44px;     /* full touch target */
  align-items: center; justify-content: center;
  border: 1px solid var(--grey-line); border-radius: 12px;
  background: var(--white); cursor: pointer; padding: 0;
  transition: border-color .18s, background .18s;
}
.nav-toggle:hover { border-color: var(--green); }
.nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.nav-toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle-bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .22s ease, opacity .16s ease;
}
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 5px; }
.nav-toggle-bars i:nth-child(3) { top: 10px; }
/* Bars become a cross while open, so the control states its own state. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-panel {
  /* Under the header (z-50), not over it: the toggle doubles as the close
     control, so burying it leaves the only exit hidden behind the panel. */
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
  box-shadow: 0 18px 44px rgba(13, 24, 43, .12);
  padding: 84px 20px 22px;       /* clears the floating header */
  transform: translateY(-8px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  max-height: 100dvh; overflow-y: auto;
}
.nav-panel[hidden] { display: none; }
.nav-panel.open { transform: none; opacity: 1; }

.nav-panel-inner { max-width: 640px; margin: 0 auto; }
.nav-panel nav { display: flex; flex-direction: column; }
.nav-panel nav a {
  display: block; padding: 14px 4px;      /* 44px+ rows */
  font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--grey-line);
}
.nav-panel nav a:hover, .nav-panel nav a:focus-visible { color: var(--green); }

.nav-panel-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.nav-panel-foot .btn { width: 100%; text-align: center; }
.nav-panel-legal {
  text-align: center; font-size: 13.5px; color: var(--grey-mid);
  text-decoration: none; padding: 8px;
}
.nav-panel-legal:hover { color: var(--green); }

/* Scroll is frozen behind the panel so the page does not drift under it. */
body.nav-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 961px) {
  .nav-panel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-toggle-bars i { transition: none; }
}