:root {
  --black: #080808;
  --ink: #17151b;
  --muted: #77727d;
  --line: #e8e5eb;
  --soft: #f7f6f8;
  --white: #ffffff;
  --magenta: #f10b90;
  --pink: #ff3bb3;
  --orange: #ff7b16;
  --purple: #8b3dff;
  --yellow: #ffc21a;
  --green: #12a96d;
  --red: #e5484d;
  --blue: #3478f6;
  --shadow: 0 18px 45px rgba(26, 16, 31, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.is-hidden { display: none !important; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.15fr) minmax(380px, .85fr); background: var(--white); }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 9vw; color: white; background: #050505; }
.login-brand::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 46% 45%, rgba(241,11,144,.22), transparent 23%), radial-gradient(circle at 54% 53%, rgba(255,123,22,.17), transparent 25%); }
.login-brand > * { position: relative; z-index: 1; }
.login-brand h1 { margin: 0; font-size: clamp(56px, 7vw, 104px); letter-spacing: -7px; font-weight: 650; }
.login-brand h1 span, .sidebar-brand strong span { color: var(--magenta); }
.login-brand p:not(.eyebrow) { max-width: 520px; color: #c6c2ca; font-size: 18px; line-height: 1.65; }
.brand-orbit { width: 128px; height: 128px; border: 1px dashed rgba(255,255,255,.28); border-radius: 50%; position: absolute; left: 12%; top: 15%; transform: rotate(-32deg); }
.brand-orbit::before, .brand-orbit::after { content: ""; position: absolute; inset: 20px -34px; border: 2px solid var(--magenta); border-radius: 50%; box-shadow: 0 0 28px rgba(241,11,144,.65); }
.brand-orbit::after { inset: 44px -60px; border-color: var(--orange); opacity: .7; }
.brand-orbit span { width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 20px white; position: absolute; top: 20px; right: 10px; }
.login-signal { display: flex; align-items: center; gap: 10px; color: #cbc7ce; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.login-signal i, .connection-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(18,169,109,.12); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 50px; background-image: radial-gradient(#d7d3db 1px, transparent 1px); background-size: 22px 22px; }
.login-card { width: min(440px, 100%); padding: 46px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card h2 { margin: 8px 0 8px; font-size: 30px; letter-spacing: -.04em; }
.muted { color: var(--muted); line-height: 1.55; }
.login-card form { display: grid; gap: 10px; margin-top: 30px; }
label { color: #55505a; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
input, select, textarea { width: 100%; border: 1px solid #d9d5dd; background: white; color: var(--ink); padding: 13px 14px; outline: none; border-radius: 4px; }
input:focus, select:focus, textarea:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(241,11,144,.1); }
input[readonly] { color: #6f6973; background: #f5f3f6; cursor: default; }
.login-error { color: var(--red); min-height: 18px; margin: 0; font-size: 13px; }
.login-error.is-success { color: var(--green); }
.demo-note { color: var(--muted); text-align: center; font-size: 12px; margin: 18px 0 0; }
.demo-note span, .demo-badge { color: var(--magenta); font-weight: 750; }
.password-guidance { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0; padding: 11px 12px; border: 1px dashed #d8d3dc; color: #7d7781; background: #faf9fb; font-size: 10px; line-height: 1.5; }
.password-guidance i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgba(241,11,144,.09); }
.setup-back { justify-self: center; margin-top: 4px; padding: 6px; font-size: 11px; }

.primary-button, .outline-button, .clear-button, .text-button { border: 0; background: none; }
.primary-button { width: 100%; padding: 14px 18px; color: white; background: var(--black); border-radius: 4px; font-weight: 750; }
.primary-button:hover { background: linear-gradient(90deg, var(--magenta), var(--orange)); }
.primary-button.compact { width: auto; padding: 11px 17px; }
.outline-button { padding: 10px 14px; border: 1px solid #d9d5dd; background: white; border-radius: 4px; font-weight: 700; }
.outline-button:hover { border-color: var(--ink); }
.text-button { color: var(--magenta); font-weight: 750; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px 20px; color: white; background: var(--black); overflow-y: auto; }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%, rgba(241,11,144,.17), transparent 17%), radial-gradient(circle at 90% 70%, rgba(255,123,22,.12), transparent 21%); }
.sidebar > * { position: relative; z-index: 1; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mini-orbit { position: relative; width: 34px; height: 34px; border: 1px solid var(--magenta); border-radius: 50%; transform: rotate(-35deg); box-shadow: 0 0 18px rgba(241,11,144,.35); }
.mini-orbit::after { content: ""; position: absolute; left: -7px; right: -7px; top: 15px; border-top: 2px solid var(--orange); }
.sidebar-brand strong { display: block; font-size: 20px; letter-spacing: -.04em; }
.sidebar-brand small, .sidebar-user small { display: block; color: #8f8a94; margin-top: 2px; font-size: 11px; }
.main-nav { padding: 22px 0; display: grid; gap: 4px; }
.nav-label { margin: 18px 10px 8px; color: #625e66; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 0; border-radius: 4px; color: #aaa5ae; background: transparent; text-align: left; font-size: 13px; }
.nav-item span { color: #5e5962; font-size: 9px; font-family: monospace; }
.nav-item b { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 999px; color: white; background: rgba(255,255,255,.1); text-align: center; font-size: 10px; }
.nav-item:hover, .nav-item.is-active { color: white; background: rgba(255,255,255,.07); }
.nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--magenta), var(--orange)); box-shadow: 0 0 12px var(--magenta); }
.cycle-card { margin-top: auto; padding: 16px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); }
.cycle-card p { margin: 0 0 8px; color: #77727b; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.cycle-card strong { display: block; font-size: 12px; }
.cycle-card small { color: #8f8a94; font-size: 10px; line-height: 1.4; }
.cycle-progress { height: 3px; margin: 14px 0 9px; background: rgba(255,255,255,.1); }
.cycle-progress span { display: block; width: 34%; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--orange)); }
.sidebar-user { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 9px; margin-top: 14px; padding: 14px 7px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-user strong { font-size: 12px; }
.sidebar-user button { color: #77727b; border: 0; background: transparent; font-size: 18px; }
.sidebar-user-copy { min-width: 0; }
.sidebar-user-copy button { display: block; margin-top: 5px; padding: 0; color: #aaa5ae; font-size: 9px; font-weight: 700; }
.sidebar-user-copy button:hover { color: white; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--magenta), var(--orange)); font-size: 11px; font-weight: 800; }

.main-area { min-width: 0; min-height: 100vh; background-color: #fbfafc; background-image: radial-gradient(#d8d4dc 1px, transparent 1px); background-size: 24px 24px; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 34px; border-bottom: 1px solid rgba(224,220,227,.85); background: rgba(255,255,255,.91); backdrop-filter: blur(18px); }
.topbar h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: #8d8791; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.eyebrow.light { color: #8f8a94; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.connection-state { display: flex; align-items: center; gap: 8px; color: #77727d; font-size: 11px; }
.connection-state i { background: var(--orange); box-shadow: 0 0 0 5px rgba(255,123,22,.12); }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }
.view { display: none; padding: 30px 34px 60px; }
.view.is-active { display: block; }

.team-direction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.direction-person-stack { display: grid; min-width: 0; gap: 10px; }
.direction-person-card { --direction-accent: var(--magenta); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 300px; padding: 22px; color: white; background: var(--black); box-shadow: var(--shadow); }
.direction-person-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -105px; top: -125px; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 30px color-mix(in srgb, var(--direction-accent) 7%, transparent), 0 0 0 60px color-mix(in srgb, var(--direction-accent) 4%, transparent); }
.direction-person-2 { --direction-accent: var(--purple); }
.direction-person-3 { --direction-accent: var(--orange); }
.direction-person-head, .direction-person-body, .direction-person-next { position: relative; z-index: 1; }
.direction-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.direction-person-owner { display: flex; align-items: center; gap: 10px; }
.direction-person-owner .avatar { width: 38px; height: 38px; color: white; background: linear-gradient(135deg, var(--direction-accent), #ff7b16); box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.direction-person-owner span { display: block; color: #77727d; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.direction-person-owner strong { display: block; margin-top: 3px; font-size: 13px; }
.direction-person-card .health-chip { background: rgba(255,255,255,.08); color: #d8d4da; }
.direction-person-body { margin: 33px 0 24px; }
.direction-person-body p { margin: 0 0 8px; color: var(--direction-accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.direction-person-body h3 { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 27px); line-height: 1.08; letter-spacing: -.045em; }
.direction-person-body > span { display: block; color: #a9a4ad; font-size: 10px; line-height: 1.55; }
.direction-person-next { margin-top: auto; padding-top: 15px; border-top: 1px dashed rgba(255,255,255,.18); }
.direction-person-next span { display: block; color: #77727d; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.direction-person-next strong { display: block; margin-top: 6px; font-size: 10px; line-height: 1.45; }
.direction-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.direction-next-card { position: relative; display: flex; flex-direction: column; min-height: 142px; padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.98); box-shadow: 0 8px 22px rgba(27,18,31,.035); }
.direction-next-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, var(--magenta), var(--orange)); }
.direction-next-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.direction-next-head span { color: #99939d; font-size: 7px; font-weight: 800; letter-spacing: .11em; }
.direction-next-head em { max-width: 55%; color: #79737d; font-size: 7px; font-style: normal; font-weight: 800; text-align: right; }
.direction-next-card h4 { margin: 15px 0 14px; font-size: 12px; line-height: 1.35; letter-spacing: -.025em; }
.direction-next-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #ded9e1; color: #8c8690; font-size: 7px; text-transform: uppercase; }
.direction-next-meta strong { color: var(--ink); font-size: 7px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.metric-card, .panel, .product-card, .team-card { background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(27,18,31,.035); }
.metric-card { min-height: 140px; padding: 20px; }
.metric-head { display: flex; justify-content: space-between; gap: 10px; color: #514c55; font-size: 11px; }
.metric-head em { color: #a29da6; font-size: 9px; font-style: normal; text-align: right; }
.metric-card > strong { display: block; margin: 20px 0 8px; font-size: 29px; letter-spacing: -.04em; }
.metric-card small { color: #8e8892; font-size: 10px; }
.alert-card { border-top: 2px solid var(--orange); }
.inline-progress { height: 5px; margin-top: 15px; background: #efedf1; }
.inline-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--orange)); transition: width .25s ease; }

.command-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 18px; margin-top: 18px; }
.lower-grid { grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); }
.briefing-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.panel { padding: 24px; }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-title h3 { margin: 6px 0 0; font-size: 17px; letter-spacing: -.03em; }
.demo-badge, .count-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; background: #fff0f8; font-size: 8px; letter-spacing: .1em; }
.count-badge { min-width: 25px; color: white; background: var(--black); font-size: 10px; }
.briefing-time { color: #99939d; font-size: 9px; }
.briefing-lead { margin: 18px 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.briefing-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.briefing-list li { display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: 10px; color: #756f79; font-size: 10px; line-height: 1.5; }
.briefing-list i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(18,169,109,.08); }
.briefing-list li.is-attention i { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,123,22,.1); }
.focus-control-panel { color: white; background: var(--black); }
.focus-control-panel .eyebrow { color: #77727b; }.focus-control-panel .panel-title h3 { color: white; }
.focus-cap { padding: 7px 9px; border: 1px dashed rgba(255,255,255,.25); color: #d3cfd6; font-size: 10px; font-weight: 800; }
.focus-control-body { margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(255,255,255,.18); }
.focus-control-body strong { display: block; font-size: 15px; line-height: 1.45; }.focus-control-body p { margin: 9px 0 0; color: #98939c; font-size: 10px; line-height: 1.6; }

.fronts-section { margin-top: 28px; }
.fronts-heading { margin-bottom: 16px; }
.workstream-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.workstream-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 8px 26px rgba(27,18,31,.04); }
.workstream-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); }
.workstream-card.health-attention::before { background: var(--orange); }.workstream-card.health-stale::before, .workstream-card.health-blocked::before { background: var(--red); }
.workstream-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workstream-owner { display: flex; align-items: center; gap: 9px; }.workstream-owner .avatar { width: 32px; height: 32px; font-size: 9px; }.workstream-owner strong { display: block; font-size: 11px; }.workstream-owner span { display: block; margin-top: 3px; color: #97919b; font-size: 8px; }
.health-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 999px; color: #487963; background: #edf9f3; font-size: 8px; font-weight: 800; white-space: nowrap; }
.health-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.health-chip.health-attention { color: #986124; background: #fff6e8; }.health-chip.health-attention i { background: var(--orange); }
.health-chip.health-stale, .health-chip.health-blocked { color: #a84348; background: #fff0f1; }.health-chip.health-stale i, .health-chip.health-blocked i { background: var(--red); }
.workstream-kicker { margin: 21px 0 6px; color: #a09aa4; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.workstream-card h4 { margin: 0; font-size: 17px; letter-spacing: -.035em; }
.workstream-objective { min-height: 50px; margin: 9px 0 16px; color: #77717b; font-size: 10px; line-height: 1.55; }
.workstream-next { padding: 13px; background: var(--soft); }.workstream-next span, .workstream-blocker span { display: block; color: #a09aa4; font-size: 8px; letter-spacing: .09em; }.workstream-next strong, .workstream-blocker strong { display: block; margin-top: 5px; font-size: 10px; line-height: 1.45; }
.workstream-blocker { margin-top: 9px; padding: 12px; border-left: 2px solid var(--red); background: #fff5f5; }.workstream-blocker span { color: var(--red); }
.workstream-progress { margin-top: 14px; padding-top: 13px; border-top: 1px dashed #d9d5dc; }.workstream-progress > div:first-child { display: flex; justify-content: space-between; color: #928c96; font-size: 8px; }.workstream-progress strong { color: var(--ink); }
.milestone-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }.milestone-dots i { height: 4px; background: #e8e4ea; }.milestone-dots i.is-done { background: linear-gradient(90deg, var(--magenta), var(--orange)); }
.workstream-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }.workstream-footer > span { color: #9b959f; font-size: 8px; }.workstream-footer > div { display: flex; align-items: center; gap: 8px; }.workstream-footer .text-button { font-size: 9px; }.outline-button.mini { padding: 7px 9px; font-size: 8px; }
.subscriber-chart-wrap { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 28px; padding: 28px 4px 18px; }
.donut { position: relative; display: grid; place-items: center; width: 220px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--magenta) 0 42%, var(--orange) 42% 65%, var(--purple) 65% 80%, var(--yellow) 80% 90%, #ddd8e1 90% 100%); }
.donut::after { content: ""; position: absolute; inset: 33px; border-radius: 50%; background: white; box-shadow: inset 0 0 0 1px var(--line); }
.donut div { position: relative; z-index: 2; text-align: center; }
.donut strong { display: block; font-size: 28px; }
.donut span { color: #918b95; font-size: 10px; }
.chart-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.chart-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 11px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; }
.chart-legend strong { color: #8d8791; }
.legend-order { background: var(--magenta); }.legend-viral { background: var(--orange); }.legend-ads { background: var(--purple); }.legend-zap { background: var(--yellow); }.legend-other { background: #ddd8e1; }
.integration-note { margin: 0; padding-top: 14px; border-top: 1px dashed #d9d5dc; color: #98929c; font-size: 10px; line-height: 1.55; }

.team-list { display: grid; gap: 2px; margin-top: 20px; }
.team-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #efedf1; }
.team-row:last-child { border-bottom: 0; }
.team-row strong { display: block; font-size: 12px; }.team-row small { color: #96909a; font-size: 10px; }
.team-row .load { text-align: right; }.team-row .load b { display: block; font-size: 13px; }.team-row .load span { color: #9a949e; font-size: 9px; }
.avatar.pedro { background: linear-gradient(135deg, var(--purple), var(--blue)); }.avatar.guilherme { background: linear-gradient(135deg, var(--orange), var(--yellow)); }

.decision-list { margin-top: 18px; }
.decision-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: start; padding: 15px 0; border-bottom: 1px solid #efedf1; }
.decision-item:last-child { border-bottom: 0; }
.decision-item > i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,123,22,.1); }
.decision-item strong { display: block; margin-bottom: 5px; font-size: 12px; }.decision-item small { color: #958f99; font-size: 10px; }
.raised-by { color: #69636e; background: var(--soft); padding: 4px 7px; border-radius: 999px; font-size: 9px; white-space: nowrap; }
.milestone-list { margin: 18px 0 0; padding: 0; list-style: none; }
.milestone-list li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 10px 0 18px; }
.milestone-list li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; height: calc(100% - 20px); border-left: 1px dashed #d4cfd7; }
.milestone-list li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #99939d; background: var(--soft); font-size: 9px; font-family: monospace; }
.milestone-list li.is-current > span { color: white; background: linear-gradient(135deg, var(--magenta), var(--orange)); box-shadow: 0 0 0 5px rgba(241,11,144,.08); }
.milestone-list strong { display: block; font-size: 12px; }.milestone-list small { color: #948e98; font-size: 10px; }

.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-intro h3 { margin: 6px 0 7px; font-size: 28px; letter-spacing: -.045em; }.section-intro p:not(.eyebrow) { margin: 0; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { position: relative; overflow: hidden; padding: 22px; min-height: 220px; }
.product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--product-color, var(--magenta)); }
.product-card .product-top { display: flex; justify-content: space-between; gap: 12px; }
.product-chips { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.portfolio-chip { padding: 5px 8px; border-radius: 999px; color: white; background: var(--ink); font-size: 8px; }
.product-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: var(--product-color, var(--magenta)); font-size: 13px; font-weight: 800; }
.status-chip { align-self: start; padding: 5px 8px; border-radius: 999px; color: #6f6873; background: var(--soft); font-size: 9px; }
.product-card h3 { margin: 20px 0 6px; font-size: 18px; }.product-card > p { margin: 0; color: #7d7781; font-size: 11px; line-height: 1.6; }
.product-front { margin-top: 16px; padding: 11px; background: var(--soft); }.product-front span { display: block; color: #9b959f; font-size: 8px; letter-spacing: .07em; }.product-front strong { display: block; margin-top: 5px; font-size: 10px; }
.product-next { margin-top: 20px; padding-top: 14px; border-top: 1px dashed #d9d5dc; }.product-next span { display: block; color: #a19ba5; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.product-next strong { display: block; margin-top: 5px; font-size: 11px; }

.filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 220px)) auto; align-items: end; gap: 10px; margin: 0 0 18px; padding: 15px; border: 1px dashed #d7d2da; background: rgba(255,255,255,.65); }
.filters label { display: grid; gap: 6px; }.filters select { padding: 10px; font-size: 11px; }.clear-button { padding: 10px; color: var(--magenta); font-size: 11px; font-weight: 700; }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.kanban-column { min-height: 520px; padding: 12px; border: 1px solid var(--line); background: rgba(248,247,249,.92); }
.kanban-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; padding: 3px; }.kanban-head strong { font-size: 11px; }.kanban-head span { color: #918b95; font-size: 10px; }
.task-stack { min-height: 450px; display: grid; align-content: start; gap: 9px; }
.task-card { padding: 13px; border: 1px solid #e3dfe6; background: white; box-shadow: 0 4px 12px rgba(25,15,29,.035); cursor: grab; }
.task-card:active { cursor: grabbing; }.task-card.is-dragging { opacity: .45; }
.task-card-top { display: flex; justify-content: space-between; gap: 8px; }.priority { width: 7px; height: 7px; border-radius: 50%; background: var(--priority-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--priority-color) 14%, transparent); }
.task-card h4 { margin: 10px 0 12px; font-size: 11px; line-height: 1.45; }
.task-meta { display: flex; flex-wrap: wrap; gap: 5px; }.task-meta span { padding: 4px 6px; border-radius: 999px; color: #77717b; background: #f4f2f5; font-size: 8px; }
.task-owner { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0edf1; color: #8f8993; font-size: 9px; }.task-owner .avatar { width: 22px; height: 22px; font-size: 7px; }
.empty-column { padding: 18px 5px; color: #aba5ae; text-align: center; font-size: 10px; }

.team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.team-card { padding: 22px; }.team-card-head { display: flex; align-items: center; gap: 12px; }.team-card-head .avatar { width: 46px; height: 46px; }.team-card h3 { margin: 0; font-size: 17px; }.team-card-head p { margin: 3px 0 0; color: #928c96; font-size: 10px; }
.team-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }.team-numbers div { padding: 12px 7px; background: var(--soft); text-align: center; }.team-numbers strong { display: block; font-size: 18px; }.team-numbers span { color: #938d97; font-size: 8px; }
.team-focus { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d6d1d9; }.team-focus span { color: #9b959f; font-size: 9px; }.team-focus strong { display: block; margin-top: 5px; font-size: 11px; }
.team-focus small { display: block; margin-top: 7px; color: #918b95; font-size: 9px; line-height: 1.5; }
.team-table-panel { margin-top: 18px; }.team-table { margin-top: 16px; }.team-table-row { display: grid; grid-template-columns: 120px 1fr 130px 100px; gap: 12px; padding: 13px 0; border-bottom: 1px solid #efedf1; font-size: 11px; }.team-table-row.head { color: #9a949e; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.team-table-row:last-child { border-bottom: 0; }

.strategy-hero { position: relative; overflow: hidden; padding: 42px; color: white; background: var(--black); }.strategy-hero::after { content: ""; position: absolute; right: -40px; top: -90px; width: 250px; height: 250px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.3); box-shadow: 0 0 0 40px rgba(241,11,144,.08); }.strategy-hero p { margin: 0 0 12px; color: #918b95; font-size: 9px; letter-spacing: .14em; }.strategy-hero h3 { position: relative; z-index: 1; max-width: 900px; margin: 0; font-size: clamp(26px, 3vw, 44px); letter-spacing: -.05em; line-height: 1.15; }
.strategy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }.strategy-grid h3 { margin: 9px 0 15px; font-size: 16px; }.strategy-grid ul { margin: 0; padding-left: 17px; color: #79737d; font-size: 11px; line-height: 1.8; }
.decision-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.decision-column { min-height: 420px; padding: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.94); }.column-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.column-heading span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }.hypothesis .column-heading span { background: var(--purple); }.open .column-heading span { background: var(--orange); }.column-heading h3 { margin: 0; font-size: 15px; }.decision-column ul { margin: 12px 0 0; padding: 0; list-style: none; }.decision-column li { padding: 13px 0; border-bottom: 1px solid #efedf1; color: #69636e; font-size: 11px; line-height: 1.55; }

.audit-state { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px dashed #d4cfd7; color: #716b75; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; }
.audit-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(18,169,109,.1); }
.history-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.history-metrics article { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border: 1px solid var(--line); background: rgba(255,255,255,.94); }
.history-metrics span { color: #87818b; font-size: 10px; }
.history-metrics strong { font-size: 25px; letter-spacing: -.04em; }
.change-panel { padding-bottom: 12px; }
.audit-help { color: #99939d; font-size: 9px; }
.change-feed { margin-top: 18px; border-top: 1px solid var(--line); }
.change-item { border-bottom: 1px solid var(--line); }
.change-item summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 24px; align-items: center; gap: 12px; padding: 16px 2px; cursor: pointer; list-style: none; }
.change-item summary::-webkit-details-marker { display: none; }
.change-item summary:hover .change-summary strong { color: var(--magenta); }
.change-summary strong { display: block; font-size: 12px; transition: color .15s ease; }
.change-summary span { display: block; margin-top: 5px; color: #96909a; font-size: 9px; }
.change-source { padding: 5px 8px; border-radius: 999px; color: #716b75; background: var(--soft); font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.change-source.is-codex { color: var(--magenta); background: #fff0f8; }
.change-chevron { display: grid; place-items: center; width: 24px; height: 24px; color: #8f8993; font-size: 18px; transition: transform .2s ease; }
.change-item[open] .change-chevron { transform: rotate(180deg); }
.change-detail { display: grid; grid-template-columns: repeat(3, minmax(100px, 150px)) minmax(220px, 1fr); gap: 14px; margin: 0 0 16px 50px; padding: 16px 18px; border-left: 2px solid var(--magenta); background: #f8f6f9; }
.change-detail div span { display: block; color: #a09aa4; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.change-detail div strong { display: block; margin-top: 5px; font-size: 10px; }
.change-detail p { margin: 0; color: #68626c; font-size: 10px; line-height: 1.65; }
.empty-history { padding: 32px 0; color: #9b959f; text-align: center; font-size: 11px; }

dialog { width: min(620px, calc(100vw - 30px)); padding: 0; border: 0; box-shadow: 0 30px 80px rgba(20,10,25,.28); }dialog::backdrop { background: rgba(8,8,8,.68); backdrop-filter: blur(4px); }dialog form { display: grid; gap: 10px; padding: 26px; }.dialog-head { display: flex; justify-content: space-between; margin-bottom: 8px; }.dialog-head h3 { margin: 6px 0 0; }.dialog-head button { border: 0; background: transparent; font-size: 25px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.form-grid label { display: grid; gap: 7px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }.dialog-actions .primary-button { width: auto; }
.checkbox-line { display: flex; align-items: center; gap: 9px; margin: 5px 0; padding: 11px; border: 1px dashed #d8d3dc; background: #faf9fb; text-transform: none; letter-spacing: 0; }.checkbox-line input { width: auto; margin: 0; }.checkbox-line span { font-size: 10px; }
.workstream-dialog { width: min(880px, calc(100vw - 30px)); padding: 0; }
#workstreamDialogContent { padding: 28px; }
.workstream-dialog-head { display: flex; justify-content: space-between; gap: 20px; }.workstream-dialog-head h3 { margin: 6px 0 0; font-size: 25px; letter-spacing: -.04em; }.workstream-dialog-head button { border: 0; background: transparent; font-size: 26px; }
.workstream-dialog-owner { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; margin: 22px 0; padding: 14px; background: var(--soft); }.workstream-dialog-owner > div span { display: block; color: #99939d; font-size: 8px; }.workstream-dialog-owner > div strong { display: block; margin-top: 4px; font-size: 11px; }
.workstream-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.workstream-dialog-grid > div { padding: 16px; border: 1px solid var(--line); }.workstream-dialog-grid span, .dialog-section > span, .dialog-blocker span { color: #99939d; font-size: 8px; font-weight: 800; letter-spacing: .1em; }.workstream-dialog-grid p { margin: 8px 0 0; color: #69636e; font-size: 11px; line-height: 1.6; }
.dialog-blocker { margin: 14px 0; padding: 15px; border-left: 2px solid var(--red); background: #fff4f4; }.dialog-blocker span { color: var(--red); }.dialog-blocker strong { display: block; margin-top: 7px; font-size: 11px; }
.dialog-section { margin-top: 15px; }.dialog-section ul { margin: 10px 0 0; padding: 0; list-style: none; }.dialog-section li { padding: 9px 0; border-bottom: 1px solid var(--line); color: #69636e; font-size: 10px; }.dialog-section li small { display: block; margin-top: 4px; color: #9b959f; }.dialog-milestones { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 15px; }.dialog-milestones li { display: flex; align-items: center; gap: 8px; }.dialog-milestones i { width: 8px; height: 8px; border: 1px solid #bbb5bf; border-radius: 50%; }.dialog-milestones li.is-done { color: var(--ink); font-weight: 700; }.dialog-milestones li.is-done i { border-color: var(--green); background: var(--green); }
.account-dialog-copy { margin: -2px 0 8px; font-size: 12px; }

@media (max-width: 1150px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .workstream-grid { grid-template-columns: 1fr; }
  .subscriber-chart-wrap { grid-template-columns: 200px 1fr; }.donut { width: 190px; }
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }.login-brand { min-height: 40vh; padding: 70px 10vw; }.brand-orbit { left: auto; right: 12%; top: 12%; }.login-panel { padding: 35px 20px; }
  .app-shell { grid-template-columns: 1fr; }.sidebar { position: fixed; z-index: 40; width: 260px; transform: translateX(-105%); transition: transform .22s ease; }.sidebar.is-open { transform: translateX(0); }.menu-button { display: block; }.topbar { padding: 16px 20px; justify-content: flex-start; }.top-actions { margin-left: auto; }.connection-state { display: none; }.view { padding: 24px 20px 50px; }
  .team-direction-grid, .command-grid, .lower-grid, .briefing-grid { grid-template-columns: 1fr; }.team-cards, .strategy-grid, .decision-columns { grid-template-columns: 1fr; }
  .change-detail { grid-template-columns: repeat(3, 1fr); margin-left: 0; }.change-detail p { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .direction-next-grid, .metrics-grid, .product-grid, .history-metrics { grid-template-columns: 1fr; }.subscriber-chart-wrap { grid-template-columns: 1fr; justify-items: center; }.chart-legend { width: 100%; }.filters { grid-template-columns: 1fr 1fr; }.task-intro, .fronts-heading { align-items: flex-start; flex-direction: column; }.topbar h2 { font-size: 18px; }.outline-button { font-size: 10px; }.team-table-row { grid-template-columns: 90px 1fr; }.team-table-row > :nth-child(3), .team-table-row > :nth-child(4) { display: none; }.form-grid, .workstream-dialog-grid, .dialog-milestones { grid-template-columns: 1fr; }
  .change-item summary { grid-template-columns: 34px minmax(0, 1fr) 22px; }.change-source { display: none; }.change-detail { grid-template-columns: 1fr 1fr; }.change-detail p { grid-column: 1 / -1; }
}