/* accountable.finance static site stylesheet.
   Part 1: design tokens (from apps/ria-webapp/src/shared/styles/accountable-tokens.css).
   Part 2: marketing.css trimmed to the sections this site uses, plus a base shim and static-site overrides.
   Generated 2026-08-28 — see site/README.md. */

/* site_tokens.css — the :root token block of
   apps/ria-webapp/src/shared/styles/accountable-tokens.css, verbatim (lines 1-174).
   The .ac-* semantic type classes (lines 176-257) are not referenced by the
   landing markup and were dropped. Load this BEFORE site_marketing.css. */

/* =========================================================================
   Accountable — Core tokens (colors, type)
   Mirrors /public/accountable/colors_and_type.css minus @font-face (Inter is
   loaded via next/font in layout.tsx). Imported through the Next.js CSS
   bundler so the design tokens are actually applied, not just preloaded.
   ========================================================================= */

:root {
  /* ---------- Core neutrals ---------- */
  --black: #071223;
  --white: #ffffff;

  --gray: #505b6c;
  --gray-100: #505b6c;
  --gray-75: #67707f; /* darkened 2026-08-25: muted TEXT gray, AA 5.0:1 (was #bbc2cd, 1.8:1) */
  --gray-line: #bbc2cd; /* the old lightness, for hairlines/fills — never text */
  --gray-50: #eaeef5;
  --gray-25: #f9fbff;
  --gray-lt: var(--gray-25);

  /* ---------- Brand palette (raw hues) ---------- */
  --teal: #37b79e; /* Accountable primary */
  --teal-75: #b4ece1;
  --teal-25: #eaf8f5;
  --teal-lt: var(--teal-25);

  --purple: #ae5bff; /* Strategy / tertiary */
  --purple-75: #e3c8fd;
  --purple-50: #f4f3ff;
  --purple-25: #f5f1f9;
  --purple-lt: var(--purple-25);
  --purple-700: #5925dc;

  --blue: #2b75e8; /* Links, info accents */
  --blue-75: #a7c5f2;
  --blue-50: #f0f9ff;
  --blue-25: #f6f9ff;
  --blue-lt: var(--blue-25);

  --yellow: #ffd000;
  --yellow-75: #fff6d0;
  --yellow-25: #fffcf1;
  --yellow-lt: var(--yellow-25);

  --orange: #ff5a13;
  --orange-75: #ffd5c3;
  --orange-50: #fff7ed;
  --orange-lt: var(--orange-50);

  --red: #f10f0f;
  --red-75: #ff4a4a;
  --red-50: #fef3f2;
  --red-25: #fef7f7;
  --red-lt: var(--red-25);

  --pink: #e455cd; /* Logo gradient stop 1 */
  --lavender: #9388fd; /* Logo gradient stop 2 */

  /* ---------- Semantic roles ---------- */
  --primary-color: var(--teal);
  --primary-color-hover: #30a68e;
  --primary-color-lt: #c3eae2;

  --secondary-color: #ffffff;
  --secondary-color-hover: var(--gray-50);
  --secondary-color-lt: var(--gray-25);

  --tertiary-color: var(--purple);
  --tertiary-color-hover: var(--purple-25);
  --tertiary-color-lt: var(--purple-25);

  --info-color: var(--yellow);
  --info-color-hover: var(--yellow-lt);
  --info-color-lt: var(--yellow-lt);

  --warning-color: var(--orange);
  --warning-color-hover: var(--orange-lt);
  --warning-color-lt: var(--orange-lt);
  --warning-color-50: #fffaeb;

  --error-color: var(--red);
  --error-color-hover: var(--red-75);
  --error-color-lt: var(--red-lt);
  --error-color-50: var(--red-50);

  --success-color: #12b76a;
  --success-color-50: #ecfdf3;
  --success-color-lt: #ecfdf3;
  --success-color-dk: #027a48;

  /* ---------- Semantic foreground/background shortcuts ---------- */
  --fg-1: var(--black);
  --fg-2: var(--gray);
  --fg-3: var(--gray-75);
  --fg-inverse: #ffffff;

  --bg-app: #ffffff;
  --bg-subtle: var(--gray-25);
  --bg-muted: var(--gray-50);
  --bg-modal: rgba(16, 24, 40, 0.7);

  --border: var(--gray-50);
  --border-strong: var(--gray-line);

  /* ---------- Signature brand gradients ---------- */
  --gradient-brand: linear-gradient(180deg, #e455cd 0%, #9388fd 100%);
  --gradient-blue-purple: linear-gradient(45deg, var(--blue), var(--purple));
  --gradient-purple-blue: linear-gradient(45deg, var(--purple), var(--blue));
  --gradient-yellow-purple: linear-gradient(45deg, var(--yellow), var(--purple));
  --gradient-purple-teal: linear-gradient(45deg, var(--purple), var(--teal));
  --gradient-teal-yellow: linear-gradient(45deg, var(--teal), var(--yellow));
  --gradient-orange-yellow: linear-gradient(45deg, var(--orange), var(--yellow));

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ---------- Shadows (Untitled-UI scale) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08);

  /* ---------- Spacing scale ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --control-h: 42px;
  --control-h-lg: 50px;
  --control-h-sm: 37px;

  /* ---------- Type ---------- */
  --font-sans: 'Inter', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-display-2xl: 72px;
  --lh-display-2xl: 90px;
  --text-display-xl: 60px;
  --lh-display-xl: 72px;
  --text-display-lg: 48px;
  --lh-display-lg: 60px;
  --text-display-md: 36px;
  --lh-display-md: 44px;
  --text-display-sm: 30px;
  --lh-display-sm: 38px;
  --text-display-xs: 24px;
  --lh-display-xs: 32px;

  --text-xl: 20px;
  --lh-xl: 30px;
  --text-lg: 18px;
  --lh-lg: 28px;
  --text-md: 16px;
  --lh-md: 24px;
  --text-sm: 14px;
  --lh-sm: 20px;
  --text-xs: 12px;
  --lh-xs: 18px;
  --text-2xs: 10px;
  --lh-2xs: 16px;
}

/* site_marketing.css — trimmed copy of apps/ria-webapp/src/shared/styles/marketing.css
   for the static accountable.finance homepage. Lines up to the "static-site
   overrides" banner are verbatim (rule order and values untouched); only whole
   rules were removed. See css_trim_report.md for the dropped ranges. */

/* =========================================================================
   Accountable Advisor — Marketing & auth surface
   Ported from the ria prototype (~/Projects/ria) and reconciled against the
   accountable-design token set: raw hexes replaced with tokens, plus the two
   marketing-local inks below. Canonical tokens come from accountable-tokens.css
   + globals.css. The .marketing-root wrapper carries the landing/auth look:
   white default canvas, blue→purple hero gradient, Inter only.
   ========================================================================= */

/* Base reset — admin-root previously lived on body and provided these,
   but the shell now attaches admin-root to an inner div instead. */
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

.marketing-root {
  /* Marketing-surface inks with no core-token equivalent:
     --mk-teal-ink: teal darkened past --primary-color-hover so 12-14px text
     stays readable on --teal-25 tints (the core set has no dark teal);
     --mk-warning-ink: the tailwind theme's warning value (#B54708) for text
     on --warning-color-50 chips. Use these — no new raw hexes. */
  --mk-teal-ink: #1d8f79;
  --mk-warning-ink: #b54708;

  /* Chart palette mirrored from the accountable-design system
     (--chart-green/-purple/-blue; deliberately distinct from the brand teal /
     purple / blue). accountable-tokens.css doesn't ship them, so they live
     here for the landing surface only — used by the portfolio constructor's
     sleeve mix bar. */
  --mk-chart-green: #35a572;
  --mk-chart-purple: #7d4393;
  --mk-chart-blue: #3463ac;

  font-family: var(--font-sans);
  color: var(--black);
  background: #fff;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.marketing-root * {
  box-sizing: border-box;
}
.marketing-root a {
  color: inherit;
  text-decoration: none;
}
.marketing-root button {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
}
.marketing-root img {
  display: block;
  max-width: 100%;
}

/* ---------- shared wrap + buttons ---------- */
.mk-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* NOTE: all button rules are scoped under .marketing-root so they outrank
   the `.marketing-root button` reset above (0,2,0 > 0,1,1). */
.marketing-root .mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--black);
  font: 600 14px/1 var(--font-sans);
  box-shadow: var(--shadow-xs);
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    box-shadow 0.12s,
    opacity 0.12s;
  white-space: nowrap;
  cursor: pointer;
}
.marketing-root .mk-btn:hover {
  background: var(--gray-50);
}
.marketing-root .mk-btn:disabled,
.marketing-root .mk-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.marketing-root .mk-btn:disabled:hover,
.marketing-root .mk-btn[disabled]:hover {
  background: #fff;
}

.marketing-root .mk-btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.marketing-root .mk-btn-primary:hover {
  background: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: #fff;
}
.marketing-root .mk-btn-primary:disabled,
.marketing-root .mk-btn-primary[disabled] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.marketing-root .mk-btn-primary:disabled:hover,
.marketing-root .mk-btn-primary[disabled]:hover {
  background: var(--teal);
  border-color: var(--teal);
}

.marketing-root .mk-btn-ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: none;
}
.marketing-root .mk-btn-ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.marketing-root .mk-btn-lg {
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
}

/* ---------- nav ---------- */
.mk-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.mk-nav-logo {
  display: flex;
  align-items: center;
  color: #fff;
  height: 24px;
}
.mk-nav-logo img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
}
.mk-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 12px;
}
.mk-nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font: 500 14px var(--font-sans);
  transition: color 0.12s;
}
.mk-nav-links a:hover {
  color: #fff;
}
.mk-nav-spacer {
  flex: 1 1 auto;
}

/* ---------- hero ---------- */
.mk-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, #6f4bff 55%, var(--purple) 100%);
  color: #fff;
  padding: 140px 0 120px;
}
.mk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(228, 85, 205, 0.25), transparent 55%);
  pointer-events: none;
}
.mk-hero .strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gradient-brand);
  z-index: 1;
}
.mk-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.mk-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.mk-hero h1 {
  font: 600 60px/68px var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
}
.mk-hero h1 .accent {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mk-hero-sub {
  font: 400 18px/28px var(--font-sans);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 32px;
  max-width: 520px;
}
.mk-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.mk-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: rgba(255, 255, 255, 0.72);
  font: 500 13px var(--font-sans);
}
.mk-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mk-hero-meta svg {
  opacity: 0.8;
}

/* ---------- sections ---------- */
.mk-section {
  padding: 96px 0;
}
.mk-section.dark {
  background: var(--black);
  color: #fff;
}
.mk-section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.mk-section-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-25);
  color: var(--mk-teal-ink);
  font: 600 11px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mk-section h2 {
  font: 600 44px/52px var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--black);
}
.mk-section.dark h2 {
  color: #fff;
}
.mk-section-sub {
  font: 400 18px/28px var(--font-sans);
  color: var(--gray);
  margin: 0;
}
.mk-section.dark .mk-section-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- outlook banner (Parametric-style) ---------- */
.mk-outlook {
  background: var(--mk-teal-ink);
  color: #fff;
  padding: 22px 0;
  border-bottom: 3px solid var(--teal-75);
}
.mk-outlook .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mk-outlook .headline {
  font: 500 17px/24px var(--font-sans);
  letter-spacing: -0.005em;
  color: #fff;
  flex: 1 1 auto;
}
.mk-outlook .headline strong {
  font-weight: 600;
}
.mk-outlook-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font: 600 13px var(--font-sans);
  border-radius: 8px;
  transition:
    background 0.12s,
    border-color 0.12s;
  white-space: nowrap;
}
.mk-outlook-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ---------- three-pillar "Our specialty" (Parametric-style) ---------- */
.mk-specialty-head {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 32px;
}
.mk-specialty-head .kicker {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.mk-specialty-head h2 {
  font: 400 48px/56px var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--black);
  margin: 0;
}
.mk-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.mk-pillar {
  display: flex;
  flex-direction: column;
}
.mk-pillar-accent {
  width: 60px;
  height: 3px;
  margin-bottom: 18px;
}
.mk-pillar.teal .mk-pillar-accent {
  background: var(--teal);
}
.mk-pillar.purple .mk-pillar-accent {
  background: var(--purple);
}
.mk-pillar.blue .mk-pillar-accent {
  background: var(--blue);
}
.mk-pillar h3 {
  font: 600 26px/32px var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.mk-pillar.teal h3 {
  color: var(--mk-teal-ink);
}
.mk-pillar.purple h3 {
  color: var(--purple-700);
}
.mk-pillar.blue h3 {
  color: var(--blue);
}
.mk-pillar .tagline {
  font: 500 16px/24px var(--font-sans);
  color: var(--black);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mk-pillar p {
  font: 400 15px/24px var(--font-sans);
  color: var(--gray);
  margin: 0 0 16px;
}
.mk-pillar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.mk-pillar li {
  font: 400 13.5px/20px var(--font-sans);
  color: var(--black);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mk-pillar li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 8px;
}
.mk-pillar.teal li::before {
  background: var(--teal);
}
.mk-pillar.purple li::before {
  background: var(--purple);
}
.mk-pillar.blue li::before {
  background: var(--blue);
}
.mk-pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font: 600 13px var(--font-sans);
  width: max-content;
  border: 1px solid currentColor;
  border-radius: 8px;
  transition: background 0.12s;
}
.mk-pillar.teal .mk-pillar-cta {
  color: var(--mk-teal-ink);
}
.mk-pillar.teal .mk-pillar-cta:hover {
  background: var(--teal-25);
}
.mk-pillar.purple .mk-pillar-cta {
  color: var(--purple-700);
}
.mk-pillar.purple .mk-pillar-cta:hover {
  background: var(--purple-25);
}
.mk-pillar.blue .mk-pillar-cta {
  color: var(--blue);
}
.mk-pillar.blue .mk-pillar-cta:hover {
  background: var(--blue-50);
}

/* ---------- product strip ---------- */
.mk-product-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mk-product-split.reverse {
  grid-template-columns: 1fr 1fr;
}
.mk-product-copy .kicker {
  color: var(--purple);
  font: 600 12px var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.mk-product-copy h3 {
  font: 600 34px/42px var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--black);
}
.mk-product-copy p {
  font: 400 16px/26px var(--font-sans);
  color: var(--gray);
  margin: 0 0 20px;
  max-width: 460px;
}
.mk-product-copy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-product-copy li {
  display: flex;
  gap: 12px;
  font: 400 14px/22px var(--font-sans);
  color: var(--black);
}
.mk-product-copy li .check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-25);
  color: var(--mk-teal-ink);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.mk-product-art {
  position: relative;
  background: linear-gradient(135deg, var(--purple-25), var(--teal-25));
  border-radius: 20px;
  padding: 32px;
  border: 1px solid var(--gray-50);
  min-height: 340px;
  display: grid;
  place-items: center;
}
.mk-product-art .card-mock {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--gray-50);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.mk-product-art h4 {
  font: 600 14px/20px var(--font-sans);
  color: var(--black);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-product-art .ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--purple-25);
  color: var(--purple-700);
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mk-product-art .prompt-bubble {
  background: var(--gray-25);
  border: 1px solid var(--gray-50);
  border-radius: 10px;
  padding: 12px 14px;
  font: 400 13px/20px var(--font-sans);
  color: var(--black);
  margin-bottom: 12px;
}
.mk-product-art .output-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 10px;
  background: var(--teal-25);
  border-radius: 8px;
  font: 500 12px/16px var(--font-sans);
  color: var(--mk-teal-ink);
  margin-bottom: 6px;
}
.mk-product-art .output-row:last-child {
  margin-bottom: 0;
}
.mk-product-art .output-row .w {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.mk-product-art .mock-caption {
  margin-top: 12px;
  font: 500 10.5px/14px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  text-align: center;
}

/* ---------- steps ---------- */
.mk-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
.mk-step {
  background: #fff;
  border: 1px solid var(--gray-50);
  border-radius: 16px;
  padding: 28px;
  position: relative;
}
.mk-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font: 600 32px/1 var(--font-sans);
  color: var(--purple);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 14px;
}
.mk-step h3 {
  font: 600 18px/26px var(--font-sans);
  color: var(--black);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mk-step p {
  font: 400 14px/22px var(--font-sans);
  color: var(--gray);
  margin: 0;
}

/* ---------- custody: two-path cards ---------- */
.mk-custody-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mk-custody-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-50);
  border-radius: 16px;
  padding: 32px 32px 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.mk-custody-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.mk-custody-card.schwab::before {
  background: var(--blue);
}
.mk-custody-card.direct::before {
  background: var(--teal);
}
.mk-custody-card .path-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}
.mk-custody-card .min-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal-25);
  color: var(--mk-teal-ink);
  font: 600 10.5px/16px var(--font-sans);
  letter-spacing: 0.04em;
}
.mk-custody-card h3 {
  font: 600 24px/30px var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--black);
  margin: 0 0 8px;
}
.mk-custody-card p {
  font: 400 14.5px/22px var(--font-sans);
  color: var(--gray);
  margin: 0 0 18px;
}
.mk-custody-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-custody-card li {
  display: flex;
  gap: 12px;
  font: 400 14px/22px var(--font-sans);
  color: var(--black);
}
.mk-custody-card li .check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.mk-custody-card.schwab li .check {
  background: var(--blue-50);
  color: var(--blue);
}
.mk-custody-card.direct li .check {
  background: var(--teal-25);
  color: var(--mk-teal-ink);
}
.mk-custody-foot {
  margin-top: 26px;
  text-align: center;
  font: 500 15px/22px var(--font-sans);
  color: var(--gray);
}

/* ---------- portfolio constructor ("lab") ---------- */
.mk-lab-section {
  background: var(--gray-25);
}
.mk-lab {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: 24px;
  align-items: start;
}
.mk-lab-card {
  background: #fff;
  border: 1px solid var(--gray-50);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
}
.mk-lab-label {
  font: 600 11px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 10px;
}

/* builder: preset chips */
.mk-lab-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.marketing-root .mk-lab-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font: 500 13px/18px var(--font-sans);
  color: var(--black);
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.marketing-root .mk-lab-chip:hover {
  border-color: var(--teal);
  background: var(--gray-25);
}
.marketing-root .mk-lab-chip.active {
  background: var(--teal-25);
  border-color: var(--teal);
  color: var(--mk-teal-ink);
  font-weight: 600;
}

/* builder: sleeve rows */
.mk-lab-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-lab-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 84px 28px;
  gap: 10px;
  align-items: center;
}
.mk-lab-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.marketing-root .mk-lab-select {
  height: 40px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 10px;
  font: 500 13px var(--font-sans);
  color: var(--black);
  background: #fff;
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
  text-overflow: ellipsis;
}
.marketing-root .mk-lab-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-25);
}
.mk-lab-weight {
  position: relative;
}
.marketing-root .mk-lab-weight input {
  height: 40px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 26px 0 10px;
  font: 500 13px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--black);
  background: #fff;
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.marketing-root .mk-lab-weight input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-25);
}
.mk-lab-weight .suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 12px var(--font-sans);
  color: var(--gray);
  pointer-events: none;
}
.marketing-root .mk-lab-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--gray-75);
  transition:
    background 0.12s,
    color 0.12s;
}
.marketing-root .mk-lab-remove:hover {
  background: var(--gray-25);
  color: var(--black);
}
.marketing-root .mk-lab-remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.marketing-root .mk-lab-add {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font: 600 12.5px/16px var(--font-sans);
  color: var(--gray);
  transition:
    border-color 0.12s,
    color 0.12s,
    background 0.12s;
}
.marketing-root .mk-lab-add:hover {
  border-color: var(--teal);
  color: var(--mk-teal-ink);
  background: var(--teal-25);
}
.mk-lab-note {
  margin-top: 10px;
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
}

/* builder: sleeve mix bar */
.mk-lab-mix {
  margin-top: 16px;
}
.mk-lab-mixbar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.mk-lab-mixbar span {
  transition: flex-grow 0.25s ease;
}
.mk-lab-mixlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font: 500 12px/16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}
.mk-lab-mixlegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mk-lab-mixlegend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.mk-lab-divider {
  height: 1px;
  background: var(--gray-50);
  margin: 22px 0 18px;
}

/* builder: account size */
.mk-lab-size {
  position: relative;
  max-width: 240px;
}
.mk-lab-size .prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 14px var(--font-sans);
  color: var(--gray);
  pointer-events: none;
}
.marketing-root .mk-lab-size input {
  height: 44px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 12px 0 26px;
  font: 600 15px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--black);
  background: #fff;
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.marketing-root .mk-lab-size input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-25);
}
.mk-lab-minnote {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--teal-25);
  font: 500 12.5px/18px var(--font-sans);
  color: var(--mk-teal-ink);
}

/* builder: assumption sliders */
.mk-lab-assume {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-lab-slider .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.mk-lab-slider label {
  font: 500 13px/18px var(--font-sans);
  color: var(--black);
}
.mk-lab-slider .val {
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
.marketing-root .mk-lab-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-50);
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.marketing-root .mk-lab-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.marketing-root .mk-lab-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.marketing-root .mk-lab-range:focus-visible {
  box-shadow: 0 0 0 3px var(--teal-25);
}
.mk-lab-assume-note {
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
}

/* results panel */
.mk-lab-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.mk-lab-results-head .mk-lab-label {
  margin: 0;
}
.mk-lab-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-50);
  background: var(--gray-25);
  font: 600 10.5px/16px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.mk-lab-composite {
  font: 600 22px/30px var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--black);
  margin: 0 0 6px;
}
.mk-lab-composite-sub {
  font: 400 13.5px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gray);
  margin: 0 0 18px;
}
.mk-lab-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.mk-lab-stats .stat {
  background: var(--gray-25);
  border: 1px solid var(--gray-50);
  border-radius: 10px;
  padding: 14px 16px;
}
.mk-lab-stats .stat.hero {
  background: var(--teal-25);
  border-color: var(--teal-75);
}
.mk-lab-stats .l {
  font: 600 10.5px/14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.mk-lab-stats .stat.hero .l {
  color: var(--mk-teal-ink);
}
.mk-lab-stats .v {
  font: 600 22px/28px var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--black);
}
.mk-lab-stats .s {
  margin-top: 3px;
  font: 400 12px/16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}
/* Compliance (2026-08-31, checklist B5): the hypothetical flag on the hero
   stat carries real visual weight next to the dollar figure. */
.mk-lab-stats .stat.hero .s {
  font-weight: 600;
  color: var(--mk-teal-ink);
}
.mk-lab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 6px;
  font: 500 12px/16px var(--font-sans);
  color: var(--gray);
}
.mk-lab-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mk-lab-legend .sw {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2.5px solid var(--primary-color);
}
.mk-lab-legend .sw.etf {
  border-top-style: dashed;
  border-top-width: 2px;
  border-top-color: var(--gray);
}
.mk-lab-chart {
  position: relative;
}
.mk-lab-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.mk-lab-chart text {
  font-family: var(--font-sans);
}
.mk-lab-chart .ax {
  font-size: 11px;
  font-weight: 400;
  fill: var(--gray);
  font-variant-numeric: tabular-nums;
}
.mk-lab-chart .ep-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--gray);
}
.mk-lab-chart .ep-val {
  font-size: 13px;
  font-weight: 600;
  fill: var(--black);
  font-variant-numeric: tabular-nums;
}
.mk-lab-tip {
  position: absolute;
  top: 10px;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--gray-50);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  min-width: 178px;
  z-index: 5;
}
.mk-lab-tip .t-when {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.mk-lab-tip .t-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 12px/18px var(--font-sans);
  color: var(--black);
}
.mk-lab-tip .t-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.mk-lab-tip .t-dot.di {
  background: var(--primary-color);
}
.mk-lab-tip .t-dot.etf {
  background: var(--gray);
}
.mk-lab-tip .t-name {
  color: var(--gray);
  flex: 1 1 auto;
  padding-right: 10px;
}
.mk-lab-tip .t-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mk-lab-tip .t-diff {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--gray-50);
  font: 400 12px/16px var(--font-sans);
  color: var(--gray);
}
.mk-lab-tip .t-diff b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mk-teal-ink);
}
.mk-lab-empty {
  padding: 48px 20px;
  text-align: center;
  font: 400 14px/22px var(--font-sans);
  color: var(--gray);
}
.mk-lab-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-50);
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
}

/* ---------- CTA band ---------- */
.mk-cta-band {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 55%, var(--purple) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mk-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, 0.2), transparent 55%);
  pointer-events: none;
}
.mk-cta-band .wrap {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}
.mk-cta-band h2 {
  font: 600 44px/52px var(--font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff;
}
.mk-cta-band p {
  font: 400 18px/28px var(--font-sans);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 28px;
}
.mk-cta-band .mk-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- footer ---------- */
.mk-footer {
  padding: 48px 0 32px;
  background: var(--black);
  color: rgba(255, 255, 255, 0.7);
  font: 400 13px/20px var(--font-sans);
}
.mk-footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mk-footer .col h4 {
  color: #fff;
  font: 600 13px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.mk-footer .col a {
  display: block;
  padding: 3px 0;
  color: rgba(255, 255, 255, 0.68);
}
.mk-footer .col a:hover {
  color: #fff;
}
.mk-footer .brandcol img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.mk-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- form field (retained from the auth section; use for a mailto
   email-capture block) ---------- */
.mk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.mk-field label {
  font: 500 13px/18px var(--font-sans);
  color: var(--black);
}
.mk-field input,
.mk-field select {
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font: 400 14px var(--font-sans);
  color: var(--black);
  outline: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
  width: 100%;
}
.mk-field input::placeholder {
  color: var(--gray-75);
}
.mk-field input:focus,
.mk-field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-25);
}
.mk-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mk-field-hint {
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
  margin-top: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .mk-hero {
    padding: 120px 0 90px;
  }
  .mk-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .mk-hero h1 {
    font-size: 48px;
    line-height: 56px;
  }
  .mk-pillars {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mk-specialty-head h2 {
    font-size: 36px;
    line-height: 44px;
  }
  .mk-outlook .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .mk-steps {
    grid-template-columns: 1fr;
  }
  .mk-product-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mk-lab {
    grid-template-columns: 1fr;
  }
  .mk-custody-grid {
    grid-template-columns: 1fr;
  }
  .mk-section h2,
  .mk-cta-band h2 {
    font-size: 34px;
    line-height: 42px;
  }
  .mk-footer .wrap {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .mk-hero {
    padding: 100px 0 72px;
  }
  .mk-hero h1 {
    font-size: 36px;
    line-height: 44px;
  }
  .mk-hero-sub {
    font-size: 16px;
    line-height: 24px;
  }
  .mk-section {
    padding: 64px 0;
  }
  .mk-nav {
    padding: 18px 20px;
    gap: 16px;
  }
  .mk-nav-links {
    display: none;
  }
  .mk-lab-card {
    padding: 20px;
  }
  .mk-lab-stats {
    grid-template-columns: 1fr;
  }
  .mk-custody-card {
    padding: 24px 22px 22px;
  }
  .mk-footer .wrap {
    grid-template-columns: 1fr;
  }
  .mk-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================================
   static-site overrides
   Added for the S3/CloudFront homepage. Everything above this banner is
   verbatim marketing.css; everything below is new and deliberately overrides
   it (same or higher specificity, later in source).
   ========================================================================= */

/* 1. Hero: the original two-column grid (copy | panel) from marketing.css applies
   unchanged — the right column now holds a contact panel instead of the signup
   form. The panel rules below are verbatim marketing.css 330-343, 375-388,
   408-421 (the tab/form/error rules of the auth panel are not needed). */
.mk-hero-panel {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  color: var(--black);
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  box-shadow:
    0 40px 80px -20px rgba(7, 18, 35, 0.45),
    0 16px 32px -8px rgba(7, 18, 35, 0.3);
}
.mk-hero-panel-head {
  margin-bottom: 18px;
}
.mk-hero-panel-head h2 {
  font: 600 22px/28px var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--black);
}
.mk-hero-panel-head p {
  font: 400 13px/20px var(--font-sans);
  color: var(--gray);
  margin: 0;
}
.mk-hero-panel-submit {
  height: 46px;
  margin-top: 10px;
  font-size: 15px;
  width: 100%;
}
.mk-hero-panel-alt {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-50);
  text-align: center;
  font: 400 13px var(--font-sans);
  color: var(--gray);
}
/* New for the static site: the panel's three-line summary list and its links. */
.mk-hero-panel-list {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
}
.mk-hero-panel-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/20px var(--font-sans);
  color: var(--gray);
}
.mk-hero-panel-list .check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-25);
  color: var(--mk-teal-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-hero-panel-alt a {
  color: var(--mk-teal-ink);
  font-weight: 600;
}
.mk-hero-panel-alt a:hover {
  text-decoration: underline;
}
/* Compliance (2026-08-31, checklist A6): status line in the contact panel. */
.mk-hero-panel-note {
  margin-top: 12px;
  text-align: center;
  font: 400 11.5px/16px var(--font-sans);
  color: var(--gray);
}
a.mk-hero-panel-submit {
  justify-content: center;
}

/* 2. Nav CTA. marketing.css wrapped the nav buttons in .mk-nav-actions
   (display:flex; align-items:center; gap:10px; compacted at <=640px); the
   trimmed copy above dropped that rule with .mk-nav-signin, but the chrome
   (chrome_nav.html, all three pages) still uses the wrapper — restored here.
   The mobile rule targets the button itself so it also holds without the
   wrapper. */
.mk-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 640px) {
  .mk-nav .mk-btn {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* 3. Element defaults the Next build got from Tailwind preflight and
   libs/ui/src/styles/base.css (@layer base), neither of which the static page
   loads. Only the ones the retained rules visibly depend on, or that new
   markup would otherwise get differently from the app.
   The element-level rules are wrapped in :where() so they keep preflight's
   element specificity (0,0,1): this block sits AFTER the marketing rules, and at
   (0,1,1) it won every tie against the class-only mk-* selectors (h1 60px ->
   18px, declared p/ul margins -> 0). */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -moz-osx-font-smoothing: grayscale;
}
body {
  line-height: 1.5; /* preflight html { line-height: 1.5 }; every mk-* rule sets its own via the font: shorthand, this covers unstyled prose */
  max-width: 100vw; /* base.css body */
  overflow-x: hidden; /* base.css body */
}
.marketing-root ::before,
.marketing-root ::after {
  box-sizing: border-box; /* .marketing-root * above does not reach pseudo-elements */
}
:where(.marketing-root) h1,
:where(.marketing-root) h2,
:where(.marketing-root) h3,
:where(.marketing-root) h4,
:where(.marketing-root) h5,
:where(.marketing-root) h6 {
  margin: 0; /* preflight; app default heading style from base.css is 18px/28px 600 */
  font: 600 18px/28px var(--font-sans);
}
:where(.marketing-root) p {
  margin: 0; /* preflight */
}
:where(.marketing-root) ul,
:where(.marketing-root) ol {
  list-style: none; /* preflight */
  margin: 0;
  padding: 0;
}
:where(.marketing-root) svg {
  display: block; /* preflight img/svg/video; the .card-mock glyph wrapper spans (inline-block, vertical-align -1.5px) were tuned against block svgs */
  vertical-align: middle;
}
:where(.marketing-root) input,
:where(.marketing-root) select {
  font: inherit; /* preflight: form controls inherit font; every mk-* control sets its own font: shorthand anyway */
  margin: 0;
}
/* base.css puts Tailwind `shadow` on every input/select at rest; the lab and
   .mk-field controls only set box-shadow on :focus, so the resting shadow came
   from there. Focus rules above have higher specificity and still win. */
.marketing-root .mk-lab-select,
.marketing-root .mk-lab-weight input,
.marketing-root .mk-lab-size input,
.marketing-root .mk-lab-range,
.mk-field input,
.mk-field select {
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* 4. Font. index.tsx set --font-sans inline from next/font (Inter 400/500/600/700,
   fallback "Open Sans"). The static page gets --font-sans from site_tokens.css
   ('Inter', 'Open Sans', system-ui, ...) and must load Inter itself, e.g.
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   No CSS rule needed here. */

/* 5. Legal pages (privacy.html / terms.html). The app rendered these as
   <main class="child-page"> (globals.css: pt pb px-2 lg:px-32) wrapping
   <div class="prose prose-lg max-w-4xl mx-auto px-4 py-8"> from
   @tailwindcss/typography; the values below are that plugin's `lg` scale.
   Headings/body inherit the site ink instead of the plugin's gray palette. The
   marketing nav is a direct child of .marketing-root here (no .mk-hero to sit
   on), so it becomes an in-flow bar on the hero gradient to keep its white
   logo and links legible. Scoped to .marketing-root.is-legal because the
   homepage nav is a direct child of .marketing-root too (rule 9). */
.marketing-root.is-legal > .mk-nav {
  position: relative;
  max-width: none;
  background: linear-gradient(135deg, var(--blue) 0%, #6f4bff 55%, var(--purple) 100%);
}
.legal-page {
  padding: 32px 8px; /* pt/pb: no DEFAULT spacing in the preset — 32px (= py-8) assumed */
}
@media (min-width: 1024px) {
  .legal-page {
    padding-left: 128px; /* lg:px-32 */
    padding-right: 128px;
  }
}
.legal-prose {
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
  padding: 32px 16px; /* py-8 px-4 */
  font-size: 18px; /* prose-lg */
  line-height: 1.7777778;
  color: var(--black);
}
.legal-prose h1 {
  font-size: 2.6666667em;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.8333333em;
}
.legal-prose h2 {
  font-size: 1.6666667em;
  font-weight: 700;
  line-height: 1.3333333;
  margin: 1.8666667em 0 1.0666667em;
}
.legal-prose h3 {
  font-size: 1.3333333em;
  font-weight: 600;
  line-height: 1.5;
  margin: 1.6666667em 0 0.6666667em;
}
.legal-prose h2 + *,
.legal-prose h3 + * {
  margin-top: 0;
}
.legal-prose p {
  margin: 1.3333333em 0;
}
.legal-prose ul {
  list-style: disc;
  margin: 1.3333333em 0;
  padding-left: 1.5555556em;
}
.legal-prose li {
  margin: 0.6666667em 0;
  padding-left: 0.4444444em;
}
.legal-prose strong {
  font-weight: 600;
}
.legal-prose a {
  text-decoration: underline;
  font-weight: 500;
}
.legal-prose > :first-child {
  margin-top: 0;
}
.legal-prose > :last-child {
  margin-bottom: 0;
}

/* 6. (removed) A WCAG-contrast pass darkened --mk-teal-ink and the primary button;
   reverted 2026-08-28 to keep the page visually identical to the RIA landing
   (dev-ria.accountable.finance), which ships these brand colors. Follow-up for
   the design system, not this page: white on --teal #37b79e is 2.49:1. */

/* 7. Section anchors on phones (html-qa-10). .mk-nav-links is display:none
   at <=640px and the nav has no menu toggle, so the homepage hero ends with a
   row of anchor chips (index.html nav.mk-hero-anchors) in the
   .mk-btn-ghost-on-dark look. Hidden wherever the nav links are visible. */
.mk-hero-anchors {
  display: none;
}
@media (max-width: 640px) {
  .mk-hero-anchors {
    position: relative; /* above .mk-hero::before, like .mk-hero-inner */
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px 0;
  }
  .mk-hero-anchors a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: 500 13px var(--font-sans);
    white-space: nowrap;
  }
  .mk-hero-anchors a:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
  }
}

/* 8. Footer column titles are <h3> (html-qa-09: they were <h4> after an
   <h2>, a skipped heading level). Same style as .mk-footer .col h4 above. */
.mk-footer .col h3 {
  color: #fff;
  font: 600 13px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* 9. Landmarks (html-qa-04). index.html places <header class="mk-nav">
   before <main>, like the legal pages, so it is a banner landmark instead of
   part of the main content. .mk-nav is still position:absolute at top:0;
   with the root as its containing block it lands on the hero (the first
   child of <main>) at exactly the same place. */
.marketing-root {
  position: relative;
}

/* 10. <noscript> fallback inside #constructor-root (html-qa-08); mount()
   removes it. Same look as .mk-lab-empty. */
.mk-lab-noscript {
  padding: 48px 20px;
  text-align: center;
  font: 400 14px/22px var(--font-sans);
  color: var(--gray);
}
.mk-lab-noscript a {
  color: var(--mk-teal-ink);
  text-decoration: underline;
}

/* 11. Fixed sample portfolio (constructor.js mount mode 'fixed' on
   sample-portfolio.js) + its factor-composition panel. The read-only rows
   reuse the .mk-lab-row look (swatch, 8px row gap) without the select /
   weight input / remove button; the factor bars mirror the RIA designer's
   FactorTilts (currentAnalysisCard.tsx): label column, centered --gray-50
   track with a --gray-line hairline at 50%, --teal bar to the right for a
   positive tilt, --red to the left for a negative one, one shared scale
   (0.5σ floor, applied in JS), tabular σ values. */
.mk-lab-fixed-title {
  font: 600 14px/20px var(--font-sans);
  color: var(--black);
  margin: 0 0 4px;
}
.mk-lab-fixed-sub {
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
  margin: 0 0 14px;
}
.mk-lab-row.mk-lab-fixed-row {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  min-height: 28px;
}
.mk-lab-fixed-fund {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  font: 400 13px/18px var(--font-sans);
  color: var(--gray);
}
.mk-lab-fixed-fund .tk {
  flex: none;
  font-weight: 600;
  color: var(--black);
}
.mk-lab-fixed-fund .nm {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mk-lab-fixed-weight {
  font: 600 13px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--black);
  text-align: right;
}

.mk-lab-factors {
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  border: 1px solid var(--gray-50);
  border-radius: 10px;
  background: #fff;
}
.mk-lab-factors .mk-lab-label {
  margin-bottom: 12px;
}
.mk-lab-factors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-lab-factors-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 56px;
  gap: 10px;
  align-items: center;
  font: 500 12px/16px var(--font-sans);
}
.mk-lab-factors-row .lb {
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-lab-factors-row .track {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--gray-50);
  overflow: hidden;
}
.mk-lab-factors-row .axis,
.mk-lab-factors-row .bar {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}
.mk-lab-factors-row .axis {
  left: 50%;
  width: 1px;
  background: var(--gray-line);
}
.mk-lab-factors-row .bar.pos {
  left: 50%;
  background: var(--teal);
}
.mk-lab-factors-row .bar.neg {
  right: 50%;
  background: var(--red);
}
.mk-lab-factors-row .val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
.mk-lab-factors-row .val[title] {
  cursor: help;
  text-decoration: underline dotted var(--gray-line);
  text-underline-offset: 3px;
}
.mk-lab-factors-summary {
  margin-top: 14px;
  font: 500 12.5px/18px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
.mk-lab-factors-caption {
  margin-top: 4px;
  font: 400 12px/18px var(--font-sans);
  color: var(--gray);
}
@media (max-width: 640px) {
  .mk-lab-factors {
    padding: 14px 14px 12px;
  }
  .mk-lab-factors-row {
    grid-template-columns: 76px minmax(0, 1fr) 52px;
    gap: 8px;
  }
}

/* 12. Review 2026-08-28 follow-ups on the fixed sample (constructor.js).
   (a) fid-03: the factor σ values take the RIA FactorTilts value treatment
       (zCellClass in libs/ui/src/components/charts/chartTokens.ts): no value
       or |z| < 0.02 muted gray; otherwise above-market / below-market colour,
       weight 400 → 500 from |z| >= 0.1 → 600 from |z| >= 0.25. The classes
       are set by constructor.js zValueClass. The RIA paints positives in raw
       --teal (text-primary); this site's text-teal is --mk-teal-ink (2.5:1
       vs 5:1 on white at 12px — see the token comment), so positives use it.
   (b) qa-01: the chart's viewBox now matches its CSS width, so .ax / .ep-*
       are real 11px / 13px type; below 480px the endpoint values move from
       the SVG into the legend (.mk-lab-legend .val — hidden while empty so
       the flex gap does not show on wide layouts).
   (c) qa-04: on phones the results-card header wraps — "The composite"
       stays on one line and the HYPOTHETICAL ILLUSTRATION chip drops below.
   (d) qa-02: .mk-nowrap keeps "direct-indexed." unbroken in the section h2. */
.mk-lab-factors-row .val {
  font-weight: 400;
}
.mk-lab-factors-row .val.neutral {
  color: var(--gray-75);
}
.mk-lab-factors-row .val.pos {
  color: var(--mk-teal-ink);
}
.mk-lab-factors-row .val.neg {
  color: var(--red);
}
.mk-lab-factors-row .val.medium {
  font-weight: 500;
}
.mk-lab-factors-row .val.strong {
  font-weight: 600;
}
.mk-lab-legend .val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
.mk-lab-legend .val:empty {
  display: none;
}
.mk-nowrap {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mk-lab-results-head {
    flex-wrap: wrap;
  }
  .mk-lab-results-head .mk-lab-label {
    white-space: nowrap;
    flex: none;
  }
}