:root {
  --bg: #07111a;
  --panel: rgba(12, 23, 35, 0.84);
  --line: rgba(159, 204, 190, 0.16);
  --text: #eff7f2;
  --muted: #95a8a1;
  --teal: #6ce5c2;
  --teal-2: #9ff0d7;
  --gold: #f6ca7b;
  --rose: #ef8b7d;
  --blue: #75b8ff;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(108, 229, 194, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(246, 202, 123, 0.08), transparent 28%),
    linear-gradient(180deg, #08111b 0%, #09141e 50%, #060d14 100%);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
img, svg, canvas { max-width: 100%; }
.shell { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 16px; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: 0.08; background-image: radial-gradient(circle, rgba(255,255,255,0.6) 0.6px, transparent 0.7px); background-size: 11px 11px; }
.topbar { position: sticky; top: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; gap: 14px; backdrop-filter: blur(18px); background: rgba(6, 13, 20, 0.56); }
.brand { text-decoration: none; font-weight: 900; letter-spacing: -0.03em; font-size: 1.2rem; font-family: "Fraunces", serif; }
.menu-toggle { display: none; }
.topbar-panel { display: contents; }
.nav, .top-actions, .hero-actions, .section-actions, .chat-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 700; padding: 10px 12px; border-radius: 999px; min-width: 0; }
.nav a.active { color: var(--text); background: rgba(255,255,255,0.07); }
.btn { border: 0; border-radius: 999px; padding: 14px 18px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; text-align: center; }
.btn.small { padding: 10px 14px; font-size: 0.92rem; }
.btn-primary { background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #072018; }
.btn-secondary { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.08); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px dashed rgba(255,255,255,0.15); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.route { display: none; padding-bottom: 72px; }
.route.active { display: block; }
.route-tabs-wrap { position: sticky; top: 72px; z-index: 45; padding: 10px 0 18px; background: linear-gradient(180deg, rgba(6,13,20,0.9), rgba(6,13,20,0.45)); }
.route-tabs { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 999px; overflow: auto; }
.route-tab { text-decoration: none; white-space: nowrap; padding: 12px 16px; border-radius: 999px; color: var(--muted); font-weight: 800; min-width: 0; }
.route-tab.active { color: #072018; background: linear-gradient(135deg, var(--teal), var(--teal-2)); }
.hero { min-height: 82vh; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; padding: 38px 0 18px; }
.eyebrow { display: inline-flex; padding: 10px 14px; border-radius: 999px; background: rgba(108, 229, 194, 0.1); border: 1px solid rgba(108, 229, 194, 0.18); color: var(--teal); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 800; }
.hero h1, .section-header h2, .card h3 { font-family: "Fraunces", serif; letter-spacing: -0.03em; }
.hero h1 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.96; margin: 18px 0 18px; max-width: 10ch; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 8px 0 0; }
.lede { max-width: 62ch; color: var(--muted); font-size: 1.1rem; line-height: 1.75; }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.hero-points li { color: #d8e8e1; display: flex; gap: 12px; align-items: start; }
.hero-points li::before { content: ""; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(246, 202, 123, 0.12); }
.glass, .card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); border-radius: var(--radius); }
.hero-panel { padding: 22px; display: grid; gap: 14px; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-stat, .svg-card { padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
.mini-stat span, .card-label, .card-kicker { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mini-stat strong { display: block; margin-top: 10px; font-size: 1.45rem; }
.feature-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.feature-card { padding: 22px; }
.feature-card p { color: var(--muted); line-height: 1.65; }
.sticky-head { position: sticky; top: 144px; z-index: 30; background: linear-gradient(180deg, rgba(6,13,20,0.94), rgba(6,13,20,0.72)); padding-top: 18px; padding-bottom: 18px; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 0 0 22px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-card { padding: 22px; }
.stat-card strong { display: block; margin-top: 12px; font-size: clamp(1.3rem, 2.5vw, 2.3rem); }
.stat-card p { color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.highlight { background: linear-gradient(180deg, rgba(108,229,194,0.14), rgba(12,23,35,0.9)); }
.app-grid, .advisor-grid, .ai-grid { display: grid; gap: 18px; align-items: start; min-width: 0; }
.app-grid { grid-template-columns: 0.92fr 1.08fr; }
.advisor-grid, .ai-grid { grid-template-columns: 0.9fr 1.1fr; }
.forms-column, .results-column, .report-grid { display: grid; gap: 18px; min-width: 0; }
.form-card, .chart-card, .recommendations-card, .scenarios-card, .yearly-card, .memo-card, .advisor-card, .brief-card, .report-card, .ai-side-card, .ai-chat-card, .generated-card { padding: 22px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.form-card h3, .chart-card h3, .recommendations-card h3, .scenarios-card h3, .yearly-card h3, .memo-card h3, .advisor-card h3, .brief-card h3, .report-card h3, .ai-side-card h3, .ai-chat-card h3, .generated-card h3 { margin: 8px 0 0; font-size: 1.55rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.form-grid.single { grid-template-columns: 1fr; }
label span { display: block; margin-bottom: 9px; color: #dceae4; font-weight: 700; font-size: 0.95rem; }
input, select, textarea { width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--text); padding: 14px 15px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: rgba(108,229,194,0.42); box-shadow: 0 0 0 4px rgba(108,229,194,0.09); }
.card-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.table-hint { margin: -2px 0 12px; color: var(--muted); font-size: 0.9rem; }
.card-head.compact { margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; font-weight: 800; background: rgba(255,255,255,0.06); color: var(--muted); }
.svg-wrap { position: relative; min-height: 220px; border-radius: 18px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 10px; overflow: hidden; }
.svg-wrap.tall { min-height: 340px; }
.svg-wrap.short { min-height: 240px; }
.chart-shell { position: relative; width: 100%; height: 100%; }
.chart-tooltip { position: absolute; z-index: 5; min-width: 150px; max-width: 220px; padding: 10px 12px; border-radius: 14px; background: rgba(5, 10, 16, 0.92); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 20px 40px rgba(0,0,0,0.32); color: var(--text); font-size: 0.88rem; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 140ms ease, transform 140ms ease; }
.chart-tooltip.visible { opacity: 1; transform: translateY(0); }
.chart-tooltip strong { display: block; margin-bottom: 6px; font-size: 0.92rem; }
.chart-tooltip span { display: block; color: #dbe8e3; line-height: 1.45; }
.chart-legend { display: flex; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 0.92rem; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
.legend-dot.solid { background: var(--teal); }
.legend-dot.muted { background: var(--gold); }
.recommendations, .generated-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.recommendations li, .memo, .scenario-card, .generated-item, .chat-bubble { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.recommendations li strong { display: block; margin-bottom: 6px; }
.memo p { margin: 0 0 12px; color: #d9e7e1; line-height: 1.7; }
.memo p:last-child { margin-bottom: 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scenario-card h4 { margin: 0 0 10px; font-size: 1rem; }
.scenario-card p { margin: 5px 0; color: var(--muted); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
th { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.split-card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bullet-list { margin: 18px 0 0; padding-left: 18px; color: #d9e7e1; line-height: 1.75; }
.quote-block { margin-top: 18px; padding: 18px; border-radius: 18px; background: rgba(108,229,194,0.08); border: 1px solid rgba(108,229,194,0.16); }
.quote-price { font-size: 2rem; font-weight: 900; margin-bottom: 8px; font-family: "Fraunces", serif; }
.brief-pre { white-space: pre-wrap; margin: 0; color: #dceae4; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.report-card.wide, .report-hero { grid-column: span 2; }
.report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.metric-box { padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.metric-box span { display: block; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.metric-box strong { display: block; margin-top: 10px; font-size: 1.2rem; }
.quick-prompts { display: grid; gap: 10px; margin-top: 16px; }
.chat-log { display: grid; gap: 12px; min-height: 380px; max-height: 580px; overflow: auto; padding-right: 4px; }
.chat-bubble.user { background: rgba(108,229,194,0.08); border-color: rgba(108,229,194,0.18); }
.chat-bubble.assistant { background: rgba(117,184,255,0.08); border-color: rgba(117,184,255,0.16); }
.chat-role { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.chat-tools { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; color: var(--muted); }
.checkbox { display: inline-flex; align-items: center; gap: 8px; }
.checkbox input { width: auto; }
.generated-item h4 { margin: 0 0 8px; }
.generated-item p { margin: 0 0 12px; color: var(--muted); }
.tiny-note, .footer { color: var(--muted); }
.footer { padding: 0 0 48px; }
svg { width: 100%; height: 100%; display: block; }
.axis-text { fill: var(--muted); font-size: 11px; }
.grid-line { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.line-main { fill: none; stroke: var(--teal); stroke-width: 3; }
.line-alt { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 8 6; }
.line-band-top, .line-band-bottom { fill: none; stroke: rgba(117,184,255,0.85); stroke-width: 2; }
.area-band { fill: rgba(117,184,255,0.12); }
.chart-hitbox { fill: transparent; cursor: pointer; }
.chart-dot { cursor: pointer; stroke: rgba(7, 17, 26, 0.92); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease; }
.chart-dot-main { fill: var(--teal); }
.chart-dot-alt { fill: var(--gold); }
.chart-dot-band { fill: var(--blue); }
.chart-dot.is-active, .chart-dot:hover { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(255,255,255,0.16)); }
.slice-label { fill: #dceae4; font-size: 12px; }
.slice-stroke, .slice-legend-item { stroke: rgba(255,255,255,0.08); stroke-width: 1; cursor: pointer; transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease; }
.slice-stroke.is-active, .slice-stroke:hover, .slice-legend-item.is-active, .slice-legend-item:hover { filter: drop-shadow(0 0 10px rgba(255,255,255,0.12)); }
@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-band, .advisor-grid, .split-card, .app-grid, .hero, .ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { max-width: 12ch; }
  .route-tabs-wrap { top: 68px; }
  .sticky-head { top: 138px; }
}
@media (max-width: 760px) {
  .shell { padding-inline: 10px; }
  .topbar { flex-wrap: wrap; padding: 12px 0; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .topbar-panel {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(9, 16, 24, 0.92);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .topbar.open .topbar-panel { display: flex; }
  .nav, .top-actions, .section-actions, .chat-actions, .hero-actions { width: 100%; min-width: 0; }
  .nav { flex-direction: column; align-items: stretch; overflow: visible; }
  .nav a, .top-actions > *, .section-actions > *, .chat-actions > * { width: 100%; max-width: 100%; }
  .top-actions, .section-actions, .chat-actions, .hero-actions { flex-direction: column; align-items: stretch; }
  .btn, .pill, .eyebrow, .route-tab { max-width: 100%; }
  .route, .hero, .hero-copy, .hero-panel, .feature-band, .dashboard-grid, .app-grid, .advisor-grid, .ai-grid, .forms-column, .results-column, .report-grid, .split-card,
  .form-card, .chart-card, .recommendations-card, .scenarios-card, .yearly-card, .memo-card, .advisor-card, .brief-card, .report-card, .ai-side-card, .ai-chat-card, .generated-card,
  .card-head, .section-header, .form-grid, .scenario-grid, .report-metrics, .mini-grid, .svg-wrap, .chart-shell {
    min-width: 0;
    max-width: 100%;
  }
  .route-tabs-wrap, .sticky-head { position: static; top: auto; background: transparent; }
  .route-tabs-wrap { padding: 0 0 14px; }
  .route-tabs { border-radius: 22px; padding: 8px; gap: 8px; max-width: 100%; }
  .route-tab { padding: 10px 14px; }
  .hero { min-height: auto; padding-top: 20px; gap: 20px; }
  .hero h1 { font-size: clamp(2.3rem, 12vw, 3.8rem); }
  .section-header h2, .card h3, .btn, .pill, .route-tab { overflow-wrap: anywhere; word-break: break-word; }
  .lede { font-size: 1rem; line-height: 1.6; }
  .form-grid, .scenario-grid, .dashboard-grid, .report-grid, .report-metrics, .mini-grid { grid-template-columns: 1fr; }
  .section-header { align-items: start; flex-direction: column; }
  .form-card, .chart-card, .recommendations-card, .scenarios-card, .yearly-card, .memo-card, .advisor-card, .brief-card, .report-card, .ai-side-card, .ai-chat-card, .generated-card, .feature-card, .hero-panel { padding: 18px 14px; }
  .form-card h3, .chart-card h3, .recommendations-card h3, .scenarios-card h3, .yearly-card h3, .memo-card h3, .advisor-card h3, .brief-card h3, .report-card h3, .ai-side-card h3, .ai-chat-card h3, .generated-card h3 { font-size: 1.28rem; }
  label span { overflow-wrap: anywhere; }
  input, select, textarea { min-width: 0; max-width: 100%; padding: 13px 14px; }
  .svg-wrap { min-height: 200px; padding: 8px; }
  .svg-wrap.tall { min-height: 260px; }
  .svg-wrap.short { min-height: 210px; }
  .chart-legend { flex-direction: column; gap: 8px; }
  .chat-log { min-height: 280px; max-height: 420px; }
  .table-wrap { margin: 0 -4px; padding-bottom: 4px; }
  table { min-width: 640px; }
}
@media (max-width: 380px) {
  .shell { padding-inline: 8px; }
  .topbar-panel { padding: 12px; }
  .route-tabs { padding: 6px; gap: 6px; }
  .route-tab { padding: 9px 12px; font-size: 0.92rem; }
  .btn { padding: 12px 14px; }
  .eyebrow, .pill { width: 100%; justify-content: center; text-align: center; }
  .form-card, .chart-card, .recommendations-card, .scenarios-card, .yearly-card, .memo-card, .advisor-card, .brief-card, .report-card, .ai-side-card, .ai-chat-card, .generated-card, .feature-card, .hero-panel, .stat-card { padding: 16px 12px; }
  .hero h1 { font-size: clamp(2rem, 11vw, 2.8rem); }
  .card-head { gap: 10px; }
  th, td { padding: 10px 6px; }
}
@media print { body { background: #fff; color: #000; } .grain, .topbar, .no-print, .sticky-head, .route-tabs-wrap { display: none !important; } .route { display: none !important; } .route[data-route="/report"] { display: block !important; } .card, .report-card { box-shadow: none; border: 1px solid #ddd; background: #fff; color: #000; } .memo p, .brief-pre, .metric-box strong, .report-card h3 { color: #000; } .metric-box, .memo { background: #fff; border: 1px solid #ddd; } }