@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ================================================================
   FRA Prop HQ v6.7 — Personality refresh
   A sharper, more human trading-control-room identity.
   ================================================================ */

:root,
:root[data-theme="dark"] {
  --bg: #07100b;
  --bg-2: #0a130e;
  --sidebar: #08110c;
  --topbar: rgba(7, 16, 11, .92);
  --panel: #0d1711;
  --panel-2: #111d16;
  --panel-3: #15241b;
  --input: #09130d;
  --hover: #14231a;
  --border: #203127;
  --border-strong: #324a39;
  --text: #dfe8e1;
  --text-strong: #f7faf7;
  --muted: #89998e;
  --muted-2: #637267;
  --accent: #2bd568;
  --accent-soft: rgba(43, 213, 104, .11);
  --green: #2bd568;
  --red: #ff6b72;
  --amber: #e6ae52;
  --blue: #65a7ff;
  --purple: #9d8cff;
  --teal: #43cfc0;
  --shadow: 0 18px 70px rgba(0, 0, 0, .22);
  --radius: 10px;
  --chart-fill: rgba(43, 213, 104, .18);
  --chart-fill-end: rgba(43, 213, 104, 0);
  --chart-grid: rgba(255, 255, 255, .055);
}

:root[data-theme="light"] {
  --bg: #f1f5f0;
  --bg-2: #e9efe9;
  --sidebar: #f8faf7;
  --topbar: rgba(241, 245, 240, .94);
  --panel: #ffffff;
  --panel-2: #f5f8f4;
  --panel-3: #edf3ed;
  --input: #ffffff;
  --hover: #edf4ee;
  --border: #d4dfd5;
  --border-strong: #b4c6b7;
  --text: #253129;
  --text-strong: #101913;
  --muted: #67766b;
  --muted-2: #879489;
  --accent: #149948;
  --accent-soft: rgba(20, 153, 72, .09);
  --green: #149948;
  --shadow: 0 14px 45px rgba(24, 54, 34, .06);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 78% -15%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
    var(--bg);
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.005em;
}

h1, h2, h3, .brand-wordmark, .app-brand-word, .kpi-value, .price-amount strong {
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif;
}

/* Core controls */
.button {
  min-height: 39px;
  border-radius: 7px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary {
  color: #041008;
  background: linear-gradient(135deg, #37e878, #20c95d);
  border-color: rgba(80, 255, 140, .35);
  box-shadow: 0 10px 28px rgba(32, 201, 93, .16), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.button.primary:hover { background: linear-gradient(135deg, #46ef84, #24d664); }
.button.secondary {
  background: color-mix(in srgb, var(--panel-2) 86%, transparent);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.button.secondary:hover { background: var(--hover); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); }
.link-button { color: var(--accent); }
.control:focus, .text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Public brand lockup */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4f8f4;
  text-decoration: none;
  white-space: nowrap;
}
.brand-logo-mark { width: 38px; height: 38px; display: block; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: 4px; font-size: 21px; letter-spacing: -.045em; }
.brand-wordmark strong:first-child { color: #32df70; }
.brand-wordmark strong:last-child { color: #32df70; }
.brand-wordmark span { color: #f3f6f3; font-weight: 600; }

/* New public landing */
body.signed-out { overflow-x: hidden; }
.fra-landing {
  min-height: 100vh;
  color: #e9f0ea;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 70% 10%, rgba(38, 226, 107, .11), transparent 31rem),
    radial-gradient(circle at 14% 34%, rgba(38, 226, 107, .05), transparent 26rem),
    #06100a;
  background-size: 52px 52px, 52px 52px, auto, auto, auto;
}
.landing-nav,
.landing-hero,
.landing-signal-bar,
.landing-section,
.landing-footer {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}
.landing-nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid rgba(178, 213, 187, .12);
}
.landing-nav .brand-lockup { margin-right: auto; }
.landing-nav-links { display: flex; align-items: center; gap: 28px; }
.landing-nav-links a {
  color: #94a99a;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: color .15s ease;
}
.landing-nav-links a:hover { color: #f4f8f4; }
.landing-nav-actions { display: flex; gap: 9px; }
.landing-nav-actions .button { min-height: 36px; padding-inline: 15px; font-size: 11px; }

.landing-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: 56px;
  padding-block: 76px 74px;
}
.landing-hero::after {
  content: "";
  position: absolute;
  right: -180px;
  top: 30px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 214, 99, .11), transparent 67%);
  pointer-events: none;
}
.landing-hero-copy { position: relative; z-index: 2; }
.beta-pill {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(95, 159, 112, .32);
  border-radius: 999px;
  color: #a9b8ad;
  background: rgba(9, 24, 14, .72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.beta-pill span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #32df70;
  box-shadow: 0 0 14px #32df70;
}
.landing-hero h1 {
  margin: 22px 0 20px;
  color: #f7faf7;
  font-size: clamp(48px, 5.25vw, 76px);
  line-height: .99;
  letter-spacing: -.067em;
  font-weight: 700;
}
.landing-hero h1 em {
  color: #31db6e;
  font-style: normal;
  text-shadow: 0 0 42px rgba(49, 219, 110, .12);
}
.landing-hero-copy > p {
  max-width: 650px;
  color: #9cad9f;
  font-size: 16px;
  line-height: 1.75;
}
.landing-hero-actions { display: flex; gap: 10px; margin-top: 30px; }
.hero-button { min-height: 47px; padding-inline: 20px; }
.hero-button span { margin-left: 8px; }
.landing-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 25px;
  color: #819386;
  font-size: 10px;
  font-weight: 700;
}
.landing-proof-row span::before { content: "✓"; margin-right: 7px; color: #31db6e; }

.command-board {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(77, 125, 89, .4);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(14, 28, 19, .98), rgba(7, 15, 10, .99));
  box-shadow: 0 36px 110px rgba(0,0,0,.43), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: perspective(1300px) rotateY(-3deg) rotateX(1deg);
}
.command-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.025), transparent 33%);
  pointer-events: none;
}
.board-topline {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid rgba(157, 198, 168, .12);
  background: rgba(7, 16, 10, .74);
}
.board-mini-brand { display: flex; align-items: center; gap: 8px; color: #d9e5dc; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.board-mini-brand img { width: 23px; height: 23px; }
.board-live { color: #7c9182; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.board-live i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #32df70; box-shadow: 0 0 12px #32df70; }
.board-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(157, 198, 168, .11); }
.board-kpis article { padding: 17px; border-right: 1px solid rgba(157, 198, 168, .1); }
.board-kpis article:last-child { border-right: 0; }
.board-kpis span, .mini-card > span, .chart-card-head span { display: block; color: #718379; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.board-kpis strong { display: block; margin: 7px 0 4px; color: #f0f6f1; font-size: 19px; letter-spacing: -.035em; }
.board-kpis small, .mini-card small { color: #6f8175; font-size: 8px; }
.up { color: #36df73 !important; }
.down { color: #ff747a !important; }
.board-main { display: grid; grid-template-columns: minmax(0, 1fr) 155px; gap: 11px; padding: 12px; }
.board-chart-card, .mini-card {
  border: 1px solid rgba(157, 198, 168, .12);
  border-radius: 9px;
  background: rgba(14, 27, 18, .68);
}
.board-chart-card { padding: 12px 12px 8px; }
.chart-card-head { display: flex; justify-content: space-between; align-items: center; }
.chart-card-head b { color: #6e8175; font-size: 8px; font-weight: 700; }
.board-chart { width: 100%; height: 175px; overflow: visible; margin-top: 6px; }
.chart-grid-line { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 1; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: #30dc6d; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: #f0fff4; stroke: #30dc6d; stroke-width: 4; }
.chart-axis { display: flex; justify-content: space-between; color: #53645a; font-size: 7px; }
.board-side-stack { display: grid; gap: 8px; }
.mini-card { padding: 12px; }
.mini-card strong { display: block; margin-top: 7px; color: #e9f2eb; font-size: 15px; }
.mini-card.accent { background: linear-gradient(145deg, rgba(36, 211, 99, .12), rgba(14, 27, 18, .78)); border-color: rgba(48, 220, 109, .26); }
.mini-progress { height: 4px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: #31dc6e; }
.board-ticker { display: flex; gap: 22px; padding: 10px 14px; border-top: 1px solid rgba(157,198,168,.1); color: #687a6e; font-size: 7px; letter-spacing: .04em; }
.board-ticker b { margin-left: 5px; }

.landing-signal-bar {
  min-height: 68px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-top: 1px solid rgba(178, 213, 187, .12);
  border-bottom: 1px solid rgba(178, 213, 187, .12);
  color: #9aaa9e;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.landing-signal-bar span { text-align: center; border-right: 1px solid rgba(178, 213, 187, .1); }
.landing-signal-bar span:last-child { border-right: 0; }
.landing-signal-bar b { margin-right: 8px; color: #2edb6b; font-size: 8px; }

.landing-section { padding-block: 105px; border-bottom: 1px solid rgba(178, 213, 187, .11); }
.landing-section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr); gap: 70px; align-items: end; margin-bottom: 46px; }
.section-kicker { color: #31dc6e; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.landing-section h2 { margin: 12px 0 0; color: #f4f8f4; font-size: clamp(38px, 4.7vw, 62px); line-height: 1.02; letter-spacing: -.058em; }
.landing-section-intro > p { margin: 0; color: #8fa194; font-size: 14px; line-height: 1.75; }
.feature-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 315px;
  padding: 25px;
  border: 1px solid rgba(143, 180, 153, .17);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(16, 31, 21, .92), rgba(9, 19, 12, .94));
}
.feature-card::after { content: ""; position: absolute; right: -75px; bottom: -90px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(42, 219, 105, .09), transparent 67%); }
.feature-large { grid-column: span 2; }
.feature-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(51, 217, 107, .27); border-radius: 9px; color: #32df70; background: rgba(41, 211, 98, .08); font-family: "Space Grotesk"; font-size: 17px; font-weight: 800; }
.feature-label { color: #718177; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.feature-card h3 { max-width: 460px; margin: 11px 0 9px; color: #eef5ef; font-size: 24px; line-height: 1.12; letter-spacing: -.035em; }
.feature-card p { max-width: 500px; margin: 0; color: #86978b; font-size: 12px; line-height: 1.65; }
.feature-visual { margin-top: 27px; }
.session-visual { height: 72px; display: flex; align-items: end; gap: 8px; padding: 10px 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.session-visual i { flex: 1; min-width: 8px; border-radius: 4px 4px 0 0; background: linear-gradient(#38df73, rgba(56,223,115,.18)); }
.session-visual i:nth-child(1){height:26%}.session-visual i:nth-child(2){height:54%}.session-visual i:nth-child(3){height:39%}.session-visual i:nth-child(4){height:75%}.session-visual i:nth-child(5){height:58%}.session-visual i:nth-child(6){height:92%}.session-visual i:nth-child(7){height:78%}
.cost-stack { display: grid; gap: 6px; margin-top: 27px; }
.cost-stack span { display: flex; justify-content: space-between; padding: 9px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; color: #75877a; background: rgba(255,255,255,.018); font-size: 9px; }
.cost-stack b { color: #dce7de; }
.rule-ring { width: 116px; height: 116px; display: grid; place-items: center; margin: 25px auto 0; border-radius: 50%; background: conic-gradient(#30dc6d 0 74%, rgba(255,255,255,.06) 74%); }
.rule-ring::before { content: ""; width: 86px; height: 86px; border-radius: 50%; background: #0d1a11; }
.rule-ring div { position: absolute; display: grid; text-align: center; }
.rule-ring strong { color: #f2f7f2; font-size: 22px; }
.rule-ring span { color: #6e8174; font-size: 7px; }
.note-lines { display: grid; gap: 9px; margin-top: 28px; }
.note-lines i { height: 7px; border-radius: 99px; background: linear-gradient(90deg, rgba(49,220,110,.55), rgba(255,255,255,.055)); }
.note-lines i:nth-child(2){width:82%}.note-lines i:nth-child(3){width:91%}.note-lines i:nth-child(4){width:58%}
.connection-map { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 23px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.018); }
.connection-map span, .connection-map strong { padding: 9px 11px; border-radius: 7px; background: #101f15; color: #87988c; font-size: 8px; text-align: center; }
.connection-map strong { color: #2edb6b; border: 1px solid rgba(46,219,107,.25); }
.connection-map i { color: #526258; font-style: normal; }

.workflow-section { padding-top: 92px; }
.workflow-quote { max-width: 980px; color: #f2f7f3; font-family: "Space Grotesk"; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.055em; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 54px; }
.workflow-grid article { padding: 24px 0 8px; border-top: 1px solid rgba(144, 180, 153, .23); }
.workflow-grid article > span { color: #2fdc6c; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.workflow-grid h3 { margin: 18px 0 8px; color: #eaf1eb; font-size: 20px; letter-spacing: -.03em; }
.workflow-grid p { max-width: 330px; color: #839589; font-size: 12px; line-height: 1.65; }
.founder-note { display: flex; align-items: center; gap: 15px; margin-top: 56px; padding: 18px 20px; border: 1px solid rgba(147, 184, 157, .16); border-radius: 11px; background: rgba(16, 31, 21, .72); }
.founder-note img { width: 46px; height: 46px; }
.founder-note div { display: grid; gap: 5px; }
.founder-note b { color: #dfe9e1; font-size: 12px; }
.founder-note span { color: #829287; font-size: 10px; line-height: 1.5; }

.pricing-intro { align-items: start; }
.modern-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.modern-price-card { position: relative; display: flex; flex-direction: column; min-height: 430px; padding: 28px; border: 1px solid rgba(143, 180, 153, .18); border-radius: 13px; background: linear-gradient(155deg, rgba(16, 31, 21, .94), rgba(8, 17, 11, .95)); }
.modern-price-card.featured { border-color: rgba(49, 220, 110, .62); box-shadow: 0 18px 60px rgba(21, 126, 58, .09), inset 0 3px 0 #31dc6e; }
.featured-tag { position: absolute; right: 18px; top: 18px; color: #31dc6e; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.price-tier { color: #aab8ad; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 12px; }
.price-amount strong { color: #f3f8f4; font-size: 46px; letter-spacing: -.06em; }
.price-amount span { color: #77877c; font-size: 10px; }
.modern-price-card > p { min-height: 60px; color: #87988c; font-size: 12px; line-height: 1.6; }
.modern-price-card ul { display: grid; gap: 12px; margin: 24px 0 28px; padding: 0; list-style: none; color: #a8b6ab; font-size: 11px; }
.modern-price-card li::before { content: "✓"; margin-right: 9px; color: #31dc6e; font-weight: 900; }
.modern-price-card .button { margin-top: auto; }
.pricing-disclaimer { margin: 18px 0 0; color: #6f8074; font-size: 9px; }

.landing-footer { min-height: 180px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding-block: 35px; }
.footer-brand p { margin: 12px 0 0 49px; color: #647368; font-size: 9px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 19px; }
.footer-links a { color: #839589; text-decoration: none; font-size: 10px; font-weight: 700; }
.footer-links a:hover { color: #f2f6f2; }
.footer-copy { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(178,213,187,.1); color: #5d6c61; font-size: 9px; }

/* App shell identity */
.app-shell { grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  background:
    linear-gradient(180deg, rgba(48, 220, 109, .035), transparent 160px),
    var(--sidebar);
  border-right-color: var(--border);
  padding: 17px 12px 14px;
}
.brand-wrap { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 3px 9px 17px; border-bottom: 1px solid rgba(148, 180, 155, .1); margin-bottom: 10px; }
.app-brand-mark { width: 39px; height: 39px; }
.app-brand-copy { min-width: 0; display: grid; gap: 4px; }
.app-brand-word { display: flex; gap: 3px; align-items: baseline; color: var(--text-strong); font-size: 18px; letter-spacing: -.045em; }
.app-brand-word strong { color: var(--accent); }
.app-brand-word span { font-weight: 600; }
.app-brand-tag { color: var(--muted-2); font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.nav-list { gap: 3px; }
.nav-item { min-height: 39px; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 650; }
.nav-item span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: var(--muted-2); font-size: 10px; }
.nav-item:hover { background: var(--hover); color: var(--text-strong); }
.nav-item.active { color: var(--text-strong); background: linear-gradient(90deg, rgba(43, 213, 104, .13), rgba(43, 213, 104, .035)); box-shadow: inset 3px 0 0 var(--accent); }
.nav-item.active span { color: var(--accent); border-color: rgba(43, 213, 104, .2); background: rgba(43, 213, 104, .06); }
.nav-divider { border-top-color: var(--border); }
.sync-card { background: linear-gradient(145deg, var(--panel-2), color-mix(in srgb, var(--panel) 80%, transparent)); border-radius: 8px; }
.sync-title { letter-spacing: .13em; font-size: 8px; }
.avatar { color: #07100b; background: linear-gradient(135deg, #3be87c, #18aa4e); border: 0; border-radius: 9px; }
.user-card { border-top-color: var(--border); }
.main-content { padding: 0 22px 32px; }
.topbar { min-height: 72px; background: var(--topbar); border-bottom-color: var(--border); }
.topbar h1 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 21px; font-weight: 650; letter-spacing: -.035em; }
.topbar p { font-size: 10px; }
.theme-toggle, .control, .text-input { border-radius: 6px; }
.demo-banner { border-radius: 8px; }
.panel, .kpi-card, .strategy-card, .finance-choice-card, .modern-card { border-radius: 10px; box-shadow: var(--shadow); }
.panel { background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 97%, var(--accent) 3%), var(--panel)); }
.panel-head { min-height: 50px; }
.panel-head h2, .section-head h2 { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 11px; letter-spacing: .02em; }
.kpi-grid { gap: 10px; }
.kpi-card { min-height: 124px; padding: 15px; border-top: 2px solid rgba(43, 213, 104, .35); background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 96%, var(--accent) 4%), var(--panel)); }
.kpi-card::after { background: radial-gradient(circle, rgba(43, 213, 104, .09), transparent 70%); }
.kpi-label { color: var(--muted); font-weight: 850; letter-spacing: .08em; }
.kpi-value { font-size: clamp(20px, 1.7vw, 28px); font-weight: 650; }
.segmented button.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.progress-fill { background: linear-gradient(90deg, #1ab451, #38e078); }
.badge.green { color: var(--accent); background: rgba(43,213,104,.085); border-color: rgba(43,213,104,.17); }
.data-table tbody tr:hover { background: rgba(43, 213, 104, .025); }
.toast.success { border-left-color: var(--accent); }
.choice-icon, .bank-logo { color: var(--accent); }
.finance-choice-card:hover, .finance-choice-card.recommended { border-color: color-mix(in srgb, var(--accent) 62%, var(--border)); }

/* Legal pages */
.legal-page { width: min(850px, calc(100% - 40px)); }
.legal-page .brand-lockup { margin-bottom: 35px; }
.legal-page h1 { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -.045em; }
.legal-page h2 { color: var(--text-strong); }
.legal-page a { color: var(--accent); }

@media (max-width: 1080px) {
  .landing-hero { grid-template-columns: 1fr; gap: 46px; }
  .landing-hero-copy { max-width: 780px; }
  .command-board { transform: none; }
  .feature-bento { grid-template-columns: repeat(2, 1fr); }
  .feature-large, .feature-wide { grid-column: span 2; }
  .landing-section-intro { gap: 40px; }
}

@media (max-width: 900px) {
  .landing-nav-links { display: none; }
  .landing-section-intro { grid-template-columns: 1fr; gap: 22px; }
  .modern-pricing-grid, .workflow-grid { grid-template-columns: 1fr; }
  .modern-price-card { min-height: 0; }
  .landing-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-copy { grid-column: auto; }
}

@media (max-width: 680px) {
  .landing-nav, .landing-hero, .landing-signal-bar, .landing-section, .landing-footer { width: min(100% - 24px, 1240px); }
  .landing-nav { min-height: 70px; }
  .brand-logo-mark { width: 32px; height: 32px; }
  .brand-wordmark { font-size: 18px; }
  .landing-nav-actions .secondary { display: none; }
  .landing-hero { min-height: auto; padding-block: 52px; }
  .landing-hero h1 { font-size: 45px; }
  .landing-hero-copy > p { font-size: 14px; }
  .landing-hero-actions { flex-direction: column; }
  .landing-hero-actions .button { width: 100%; }
  .command-board { border-radius: 11px; }
  .board-kpis { grid-template-columns: 1fr; }
  .board-kpis article { border-right: 0; border-bottom: 1px solid rgba(157,198,168,.1); }
  .board-main { grid-template-columns: 1fr; }
  .board-side-stack { grid-template-columns: repeat(3, 1fr); }
  .board-ticker { overflow-x: auto; white-space: nowrap; }
  .landing-signal-bar { grid-template-columns: repeat(5, minmax(90px, 1fr)); overflow-x: auto; }
  .landing-signal-bar span { padding: 0 12px; }
  .landing-section { padding-block: 75px; }
  .feature-bento { grid-template-columns: 1fr; }
  .feature-card, .feature-large, .feature-wide { grid-column: auto; }
  .feature-wide { grid-template-columns: 1fr; }
  .connection-map { flex-wrap: wrap; }
  .workflow-quote { font-size: 38px; }
  .founder-note { align-items: flex-start; }
  .footer-brand p { margin-left: 0; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: 244px; }
}