:root {
  --bg: #050712;
  --bg-2: #0a1024;
  --panel: rgba(255, 255, 255, 0.075);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);
  --text: #f7fbff;
  --muted: rgba(234, 242, 255, 0.72);
  --soft: rgba(234, 242, 255, 0.55);
  --cyan: #6df7ff;
  --blue: #67a5ff;
  --violet: #b58cff;
  --pink: #ff72d2;
  --green: #82ffb4;
  --amber: #ffe08a;
  --danger: #ff8b9a;
  --shadow: 0 28px 100px rgba(0, 0, 0, 0.45);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --max: 1320px;
  --ease: cubic-bezier(.2, .9, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(109, 247, 255, 0.16), transparent 36rem),
    radial-gradient(circle at 80% 8%, rgba(181, 140, 255, 0.20), transparent 30rem),
    linear-gradient(135deg, #040611 0%, #07102b 46%, #11091f 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
  z-index: -3;
}

button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img, video, canvas { max-width: 100%; display: block; }
code { color: var(--cyan); }

.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 1000;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  box-shadow: 0 0 24px rgba(109,247,255,.65);
}

.aurora-bg { position: fixed; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 999px; filter: blur(30px); opacity: .75; animation: float 14s ease-in-out infinite alternate; }
.orb-one { width: 36rem; height: 36rem; background: rgba(109,247,255,.18); top: -10rem; left: -12rem; }
.orb-two { width: 30rem; height: 30rem; background: rgba(181,140,255,.18); top: 12rem; right: -8rem; animation-delay: -4s; }
.orb-three { width: 32rem; height: 32rem; background: rgba(255,114,210,.12); bottom: -14rem; left: 20%; animation-delay: -8s; }
.orb-four { width: 22rem; height: 22rem; background: rgba(130,255,180,.10); bottom: 8rem; right: 10%; animation-delay: -2s; }
.grid-glow { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0, rgba(255,255,255,.035) 1px, transparent 2px); background-size: 22px 22px; opacity: .3; }
@keyframes float { from { transform: translate3d(-2rem, -1rem, 0) scale(.98); } to { transform: translate3d(2.5rem, 2rem, 0) scale(1.05); } }

.top-shell {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 16px min(4vw, 32px) 6px;
  backdrop-filter: blur(18px);
}
.dock {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(5, 9, 24, .62);
  border-radius: 999px;
  box-shadow: 0 14px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-lockup img { width: 34px; height: 34px; }
.dock-links { display: flex; align-items: center; gap: 4px; }
.dock-links a {
  color: var(--muted);
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.dock-links a:hover, .dock-links a.active { color: var(--text); background: rgba(255,255,255,.095); }
.dock-toggle, .nav-menu {
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 9px 13px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.dock-toggle:hover, .nav-menu:hover { transform: translateY(-1px); background: rgba(255,255,255,.13); }
.nav-menu { display: none; }

.section-panel {
  max-width: var(--max);
  margin: 44px auto;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,255,255,.102), rgba(255,255,255,.045));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(26px);
  position: relative;
  overflow: hidden;
}
.section-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, rgba(109,247,255,.18), transparent 25%, transparent 65%, rgba(255,114,210,.13));
  opacity: .6;
  pointer-events: none;
  z-index: -1;
}
.section-panel.compact { padding-top: clamp(26px, 3vw, 44px); padding-bottom: clamp(26px, 3vw, 44px); }

.hero {
  min-height: calc(100vh - 140px);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 20px;
}
.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 800;
}
h1, h2, h3 { margin: 0; letter-spacing: -.04em; line-height: 1.03; }
h1 { font-size: clamp(42px, 7vw, 86px); max-width: 950px; }
h2 { font-size: clamp(32px, 4.2vw, 58px); }
h3 { font-size: clamp(21px, 2.4vw, 30px); }
p { color: var(--muted); line-height: 1.68; }
.hero-lead { font-size: clamp(18px, 2vw, 22px); max-width: 760px; margin: 24px 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #02101a; background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 16px 44px rgba(109,247,255,.22); }
.btn-secondary { color: var(--text); background: rgba(255,255,255,.10); border: 1px solid var(--line); }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.btn.small { padding: 10px 13px; font-size: 13px; }

.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.metric-card, .glass-card, .outcome-card, .policy-card, .road-card, .ask-card, .campaign-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.metric-card { padding: 18px; }
.metric-value { display: block; font-size: clamp(23px, 3vw, 38px); font-weight: 900; letter-spacing: -.05em; }
.metric-label { color: var(--muted); font-size: 13px; line-height: 1.45; }

.hero-device { display: grid; justify-items: center; }
.device-frame {
  width: min(100%, 470px);
  padding: 13px;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  box-shadow: 0 30px 100px rgba(0,0,0,.45), 0 0 0 9px rgba(255,255,255,.025);
}
.device-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 24px 24px 0 0;
  background: rgba(0,0,0,.24);
  border-bottom: 1px solid var(--line);
}
.device-topbar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.32); }
.device-topbar strong { margin-left: auto; font-size: 13px; color: var(--muted); }
.device-body { padding: 20px; min-height: 470px; display: flex; flex-direction: column; gap: 14px; background: rgba(0,0,0,.18); border-radius: 0 0 28px 28px; }
.status-strip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.07); border-radius: 999px; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.chat-bubble { max-width: 88%; padding: 14px 16px; border-radius: 20px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.chat-bubble.user { align-self: flex-end; background: linear-gradient(135deg, rgba(103,165,255,.34), rgba(181,140,255,.22)); }
.chat-bubble.ai { align-self: flex-start; background: rgba(255,255,255,.10); border: 1px solid var(--line); }
.assistant-pulse { display: inline-flex; gap: 6px; padding: 10px 12px; align-self: flex-start; border-radius: 999px; background: rgba(255,255,255,.08); }
.assistant-pulse span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: typing 1.2s infinite ease-in-out; }
.assistant-pulse span:nth-child(2) { animation-delay: .15s; }
.assistant-pulse span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
.mini-dashboard { margin-top: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mini-dashboard div { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.mini-dashboard b { display: block; font-size: 12px; color: var(--soft); }
.mini-dashboard span { display: block; margin-top: 4px; font-weight: 800; font-size: 13px; }
.replace-note, .small-note { color: var(--soft); font-size: 13px; }

.section-heading { max-width: 850px; margin-bottom: 26px; }
.section-heading p:last-child { font-size: 17px; }
.snapshot-grid, .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.risk-grid { grid-template-columns: repeat(4, 1fr); }
.glass-card { padding: 22px; min-height: 190px; }
.card-kicker { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900; }
.glass-card h3 { margin: 12px 0 10px; }
.decision-ribbon {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(109,247,255,.28);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(109,247,255,.13), rgba(181,140,255,.10));
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.decision-ribbon span { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; }
.decision-ribbon strong { font-size: clamp(18px, 2vw, 26px); letter-spacing: -.02em; }

.outcome-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.outcome-card { padding: 20px; position: relative; overflow: hidden; min-height: 250px; }
.outcome-card::before { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -26px; top: -26px; background: rgba(109,247,255,.13); }
.outcome-card span { color: var(--cyan); font-weight: 900; }
.outcome-card h3 { margin: 15px 0 10px; font-size: 22px; }

.positioning-layout { display: grid; grid-template-columns: .42fr .58fr; gap: 18px; }
.position-tabs { display: grid; gap: 10px; }
.pos-tab {
  text-align: left;
  padding: 17px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pos-tab:hover, .pos-tab.active { color: var(--text); background: rgba(109,247,255,.13); transform: translateX(3px); }
.position-card { padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); border: 1px solid var(--line); min-height: 350px; }
.position-card ul, .module-modal ul { margin: 18px 0 0; padding-left: 19px; color: var(--muted); line-height: 1.8; }
.knowledge-strip { margin-top: 18px; padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255,255,255,.045); }
.knowledge-strip span { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900; margin-right: 6px; }
.knowledge-strip b { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 13px; }

.module-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.module-card {
  text-align: left;
  color: var(--text);
  padding: 22px;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-soft);
  cursor: pointer;
  transition: transform .22s var(--ease), background .2s ease, border-color .2s ease;
}
.module-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.10); border-color: rgba(109,247,255,.32); }
.module-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg, rgba(109,247,255,.25), rgba(181,140,255,.18)); color: var(--cyan); font-weight: 900; margin-bottom: 18px; }
.module-card h3 { font-size: 24px; }
.architecture-card, .chart-panel, .proration-card {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
}
.flow-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.flow-strip span { padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.flow-strip i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }

.demo-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.video-shell { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: rgba(0,0,0,.28); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.video-shell video { width: 100%; aspect-ratio: 16 / 9; background: #050712; }
.replace-banner { padding: 12px 16px; color: var(--muted); background: rgba(255,255,255,.055); border-top: 1px solid var(--line); }
.demo-script { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.055); }
.demo-script ol { color: var(--muted); line-height: 1.75; padding-left: 20px; }
.demo-script li { margin-bottom: 8px; }

.gallery-wrap { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 12px; }
.gallery-btn { width: 54px; height: 54px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); font-size: 34px; cursor: pointer; }
.screenshot-stage { margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.screenshot-stage img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.screenshot-stage figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; color: var(--muted); border-top: 1px solid var(--line); }
.screenshot-stage figcaption strong { color: var(--text); }
.shot-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
.shot-thumb { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); cursor: pointer; opacity: .65; transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.shot-thumb:hover, .shot-thumb.active { opacity: 1; transform: translateY(-2px); border-color: rgba(109,247,255,.45); }
.shot-thumb img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.shot-thumb span { display: block; padding: 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.toggle-row span { color: var(--muted); margin-right: 8px; }
.pill-toggle { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--muted); cursor: pointer; }
.pill-toggle.active { color: #04111a; background: linear-gradient(135deg, var(--cyan), var(--green)); border-color: transparent; font-weight: 900; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.price-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
  position: relative;
  overflow: hidden;
}
.price-card.featured { background: linear-gradient(145deg, rgba(109,247,255,.15), rgba(181,140,255,.08)); border-color: rgba(109,247,255,.35); transform: translateY(-6px); }
.price-card .badge { position: absolute; top: 18px; right: 18px; padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.price-card h3 { font-size: 30px; margin-right: 80px; }
.price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 4px; }
.price strong { font-size: 48px; letter-spacing: -.06em; }
.price span { color: var(--muted); }
.price-card p { margin: 0 0 16px; }
.price-card ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; color: var(--muted); }
.price-card li { display: flex; gap: 8px; }
.price-card li::before { content: "✓"; color: var(--green); font-weight: 900; }
.feature-matrix { margin-top: 18px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255,255,255,.045); }
.matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.matrix-table { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; transition: max-height .45s var(--ease); }
.matrix-table.collapsed { max-height: 280px; }
.matrix-table:not(.collapsed) { max-height: 900px; }
.matrix-row { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1px; background: var(--line); }
.matrix-row > * { padding: 13px 14px; background: rgba(5,9,24,.66); color: var(--muted); font-size: 13px; }
.matrix-row.header > * { color: var(--text); font-weight: 900; background: rgba(255,255,255,.10); }
.matrix-row span { color: var(--text); font-weight: 700; }
.matrix-row b { font-weight: 700; }

.campaign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.campaign-card { padding: 22px; min-height: 270px; }
.campaign-num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(109,247,255,.16); color: var(--cyan); font-weight: 900; margin-bottom: 16px; }
.timeline { margin-top: 18px; display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; align-items: center; gap: 8px; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255,255,255,.045); }
.timeline div { padding: 15px; border-radius: 16px; background: rgba(255,255,255,.07); }
.timeline span { display: block; color: var(--cyan); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; margin-bottom: 7px; }
.timeline i { height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

.revenue-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items: stretch; }
.calculator-card, .revenue-output { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255,255,255,.055); }
.calc-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.calc-header select, #revenueMode, .proration-controls select, .proration-controls input, .addon-grid input {
  background: rgba(0,0,0,.24);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.slider-group { margin: 20px 0; }
.slider-group label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: 8px; }
.slider-group label b { color: var(--text); font-size: 22px; }
input[type="range"] { width: 100%; accent-color: var(--cyan); }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.addon-grid label { color: var(--muted); font-size: 12px; display: grid; gap: 6px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.revenue-output { display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: center; }
.mrr-display span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 900; }
.mrr-display strong { display: block; font-size: clamp(44px, 5vw, 76px); letter-spacing: -.06em; margin: 10px 0; }
.mrr-display em { color: var(--muted); font-style: normal; }
.target-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--cyan) var(--pct), rgba(255,255,255,.08) 0);
  position: relative;
}
.target-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #081022; border: 1px solid var(--line); }
.target-ring span { position: relative; z-index: 1; font-weight: 900; font-size: 30px; }
.revenue-breakdown { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.break-card { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.break-card span { display: block; color: var(--soft); font-size: 12px; }
.break-card b { display: block; margin-top: 6px; font-size: 19px; }
.chart-panel { display: grid; grid-template-columns: .36fr .64fr; gap: 18px; align-items: center; }
#growthChart { width: 100%; height: auto; border-radius: 18px; background: rgba(0,0,0,.16); border: 1px solid var(--line); }

.policy-grid, .roadmap-grid, .ask-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.policy-card, .road-card, .ask-card { padding: 22px; min-height: 245px; }
.policy-card span, .road-card span, .ask-card span { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; }
.proration-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: center; }
.proration-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.proration-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.proration-controls output { padding: 13px; border-radius: 14px; background: rgba(109,247,255,.12); border: 1px solid rgba(109,247,255,.26); color: var(--text); font-weight: 900; }

.competition-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.competitor-table { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; }
.comp-row { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 1px; background: var(--line); }
.comp-row > * { padding: 14px 16px; background: rgba(5,9,24,.62); color: var(--muted); }
.comp-row.head > * { background: rgba(255,255,255,.10); color: var(--text); font-weight: 900; }
.comp-row span { color: var(--text); font-weight: 700; }
.comp-row b { color: var(--green); }
.comp-row em { font-style: normal; }
.strategy-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(181,140,255,.13), rgba(109,247,255,.08)); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag-cloud span { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.09); color: var(--muted); font-size: 12px; }

.final-ask { background: linear-gradient(145deg, rgba(109,247,255,.13), rgba(255,114,210,.08)); }
.ask-card span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: rgba(109,247,255,.16); }
.closing-card { margin-top: 18px; padding: 22px; border-radius: var(--radius-lg); background: rgba(255,255,255,.09); border: 1px solid rgba(109,247,255,.25); display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.closing-card span { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 900; }
.closing-card strong { font-size: clamp(18px,2vw,25px); }

.module-modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 24px; }
.module-modal[aria-hidden="false"] { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(16px); }
.modal-card { position: relative; z-index: 1; width: min(720px, 100%); padding: 34px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(16,24,52,.94), rgba(14,12,31,.94)); box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.08); font-size: 24px; cursor: pointer; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.10); color: var(--text); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }

body.presentation-mode .dock { transform: scale(.985); opacity: .52; transition: opacity .2s ease, transform .2s ease; }
body.presentation-mode .dock:hover { opacity: 1; transform: scale(1); }
body.presentation-mode .section-panel { min-height: calc(100vh - 108px); display: grid; align-content: center; }

@media (max-width: 1080px) {
  .dock { border-radius: 28px; align-items: flex-start; }
  .nav-menu { display: inline-flex; }
  .dock-links { display: none; position: absolute; top: 76px; left: 24px; right: 24px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(5,9,24,.94); flex-wrap: wrap; box-shadow: var(--shadow); }
  .dock-links.open { display: flex; }
  .hero, .positioning-layout, .demo-layout, .revenue-layout, .chart-panel, .proration-card, .competition-layout { grid-template-columns: 1fr; }
  .outcome-board { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid, .snapshot-grid, .module-map { grid-template-columns: repeat(2, 1fr); }
  .campaign-grid, .policy-grid, .roadmap-grid, .ask-grid, .risk-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .timeline i { height: 26px; width: 2px; justify-self: center; }
}

@media (max-width: 720px) {
  .section-panel { margin: 22px 12px; padding: 24px 18px; border-radius: 24px; }
  .top-shell { padding: 10px 12px 4px; }
  .dock { padding: 10px; gap: 8px; }
  .brand-lockup span { display: none; }
  .dock-toggle { display: none; }
  .hero-metrics, .snapshot-grid, .module-map, .pricing-grid, .outcome-board, .campaign-grid, .policy-grid, .roadmap-grid, .ask-grid, .risk-grid { grid-template-columns: 1fr; }
  .gallery-wrap { grid-template-columns: 1fr; }
  .gallery-btn { width: 100%; }
  .shot-thumbs { grid-template-columns: repeat(2,1fr); }
  .matrix-row, .comp-row { grid-template-columns: 1fr; }
  .revenue-output { grid-template-columns: 1fr; }
  .target-ring { margin: 0 auto; }
  .revenue-breakdown { grid-template-columns: 1fr; }
  .addon-grid, .proration-controls { grid-template-columns: 1fr; }
  .closing-card, .decision-ribbon, .matrix-head, .calc-header { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 40px; }
}

@media print {
  body { background: #080d1f; }
  .top-shell, .back-to-top, .progress-line, .hero-actions, .nav-menu { display: none !important; }
  .section-panel { break-inside: avoid; page-break-inside: avoid; margin: 16px auto; box-shadow: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
.pricing-note {
  grid-column: 1 / -1;
  padding: 15px 18px;
  border: 1px solid rgba(109,247,255,.24);
  border-radius: 18px;
  background: rgba(109,247,255,.08);
  color: var(--muted);
  line-height: 1.55;
}
.addon-policy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.addon-policy article {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
}
.addon-policy span {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 900;
}
.addon-policy b {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}
.addon-policy p { margin-bottom: 0; font-size: 14px; }
@media (max-width: 1080px) { .addon-policy { grid-template-columns: 1fr; } }

/* Interactive Gantt roadmap added 2026-05-18 */
.roadmap-section .section-heading strong { color: var(--text); }
.gantt-road-summary { margin-bottom: 18px; }
.gantt-shell {
  margin-top: 20px;
  border: 1px solid rgba(109,247,255,.22);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 12% 0%, rgba(109,247,255,.12), transparent 28rem),
    radial-gradient(circle at 92% 16%, rgba(255,114,210,.11), transparent 24rem),
    rgba(255,255,255,.052);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 28px 90px rgba(0,0,0,.24);
  overflow: hidden;
}
.gantt-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.gantt-toolbar h3 { font-size: clamp(24px, 3vw, 36px); }
.gantt-toolbar p:last-child { margin-bottom: 0; }
.gantt-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gantt-filter {
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.065);
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  transition: transform .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.gantt-filter:hover { transform: translateY(-1px); color: var(--text); background: rgba(255,255,255,.10); }
.gantt-filter.active { color: #06111e; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 12px 30px rgba(109,247,255,.18); }
.gantt-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.gantt-kpis div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.058);
}
.gantt-kpis span { display: block; color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; font-weight: 900; }
.gantt-kpis b { display: block; margin-top: 8px; font-size: 18px; line-height: 1.25; }
.gantt-scroll {
  --label-width: 335px;
  --track-width: 990px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 24px 24px;
  scrollbar-color: rgba(109,247,255,.55) rgba(255,255,255,.08);
}
.gantt-calendar {
  width: var(--track-width);
  margin-left: var(--label-width);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  min-width: var(--track-width);
}
.gantt-calendar span {
  padding: 9px 8px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-left: 1px solid rgba(255,255,255,.08);
}
.gantt-calendar span:last-child { border-right: 1px solid rgba(255,255,255,.08); }
.gantt-body {
  width: calc(var(--label-width) + var(--track-width));
  min-width: calc(var(--label-width) + var(--track-width));
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}
.gantt-row {
  display: grid;
  grid-template-columns: var(--label-width) var(--track-width);
  min-height: 86px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: opacity .24s ease, transform .24s ease, max-height .24s ease;
}
.gantt-row:last-child { border-bottom: 0; }
.gantt-row.hidden { display: none; }
.gantt-row.highlight { background: rgba(109,247,255,.045); }
.gantt-row.next-sprint { background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(109,247,255,.035)); }
.gantt-task {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 11px;
  align-content: center;
  padding: 14px 18px;
  background: rgba(5,9,24,.52);
  border-right: 1px solid var(--line);
}
.gantt-task b { font-size: 14px; line-height: 1.28; }
.gantt-task small { grid-column: 2; display: block; margin-top: 5px; color: var(--soft); line-height: 1.42; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; box-shadow: 0 0 18px currentColor; }
.status-dot.done { color: var(--green); background: var(--green); }
.status-dot.active { color: var(--amber); background: var(--amber); }
.status-dot.planned { color: var(--cyan); background: var(--cyan); }
.gantt-track {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 9 - 1px), rgba(255,255,255,.085) calc(100% / 9), rgba(255,255,255,.085) calc(100% / 9));
}
.gantt-bar {
  grid-column: var(--start) / span var(--span);
  align-self: center;
  min-height: 42px;
  margin: 12px 6px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #04121d;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 13px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
}
.gantt-bar.done { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.gantt-bar.active { background: linear-gradient(135deg, var(--amber), var(--pink)); }
.gantt-bar.planned { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.gantt-bar.violet { background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.gantt-bar.pink { background: linear-gradient(135deg, var(--pink), var(--violet)); }
.gantt-bar.green { background: linear-gradient(135deg, var(--green), var(--amber)); }
.gantt-bar.spotlight { box-shadow: 0 0 0 1px rgba(255,255,255,.36), 0 0 38px rgba(109,247,255,.40), 0 14px 38px rgba(0,0,0,.24); }
.today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--label-width) + 660px);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--pink), var(--cyan), transparent);
  box-shadow: 0 0 22px rgba(255,114,210,.62);
  z-index: 8;
  pointer-events: none;
}
.today-line em {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 66px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,114,210,.18);
  border: 1px solid rgba(255,114,210,.36);
  color: var(--text);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gantt-footnote {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 24px 24px;
}
.gantt-footnote span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(109,247,255,.13);
  color: var(--cyan);
  border: 1px solid rgba(109,247,255,.26);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.gantt-footnote p { margin: 0; font-size: 13px; color: var(--soft); }

@media (max-width: 1080px) {
  .gantt-toolbar { flex-direction: column; }
  .gantt-filters { justify-content: flex-start; }
  .gantt-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .gantt-kpis { grid-template-columns: 1fr; padding: 14px; }
  .gantt-toolbar { padding: 18px; }
  .gantt-scroll { --label-width: 285px; --track-width: 900px; padding: 14px; }
  .today-line { left: calc(var(--label-width) + 600px); }
  .gantt-task { padding: 12px 14px; }
  .gantt-task b { font-size: 13px; }
}
@media print {
  .gantt-filters { display: none !important; }
  .gantt-scroll { overflow: visible; }
  .gantt-body, .gantt-calendar { transform-origin: top left; }
}


/* V4 layout polish: fix metric overlap, revenue clipping, and interactive Gantt rendering */
.section-panel { width: min(calc(100% - 48px), var(--max)); scroll-margin-top: 112px; }
.hero { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.hero-copy, .hero-device, .calculator-card, .revenue-output { min-width: 0; }
.hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { min-width: 0; overflow: hidden; }
.metric-value { font-size: clamp(25px, 2.35vw, 35px); line-height: 1.03; white-space: nowrap; }
.metric-value.compact-money { letter-spacing: -.065em; }
.dock { width: min(100%, var(--max)); }
.dock-links { min-width: 0; }
.dock-links a { white-space: nowrap; }

.revenue-layout { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
.revenue-output {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 158px);
  overflow: hidden;
  align-content: center;
}
.mrr-display { min-width: 0; }
.mrr-display strong {
  font-size: clamp(44px, 4.1vw, 68px);
  line-height: .98;
  white-space: nowrap;
}
.target-ring {
  width: clamp(132px, 11vw, 158px);
  height: clamp(132px, 11vw, 158px);
  justify-self: end;
}
.target-ring::after { inset: 12px; }
.target-ring span { font-size: clamp(23px, 2vw, 30px); }
.revenue-breakdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.break-card { min-width: 0; }
.break-card b { font-size: clamp(16px, 1.2vw, 20px); overflow-wrap: anywhere; }

.delivery-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.delivery-snapshot article,
.sprint-focus article,
.gantt-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.delivery-snapshot article { padding: 18px; min-width: 0; }
.delivery-snapshot span,
.sprint-focus span,
.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 900;
}
.delivery-snapshot strong { display: block; margin-top: 9px; font-size: 18px; line-height: 1.22; }
.delivery-snapshot p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; }
.gantt-section .gantt-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.045);
}
.gantt-section .gantt-toolbar p { margin: 0; color: var(--soft); font-size: 13px; }
.gantt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
  gap: 18px;
  align-items: stretch;
}
.gantt-section .gantt-scroll {
  --label-width: initial;
  --track-width: initial;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.16);
}
.gantt-chart {
  position: relative;
  min-width: 980px;
  padding: 16px;
}
.gantt-axis {
  display: grid;
  grid-template-columns: repeat(9, minmax(92px, 1fr));
  margin-left: 240px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.gantt-axis span {
  min-height: 52px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.075);
  border-right: 1px solid rgba(255,255,255,.10);
}
.gantt-axis span:last-child { border-right: 0; }
.gantt-axis em { display: block; margin-top: 3px; color: var(--soft); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.gantt-axis .axis-current { color: var(--amber); background: rgba(255,224,138,.10); }
.gantt-axis .axis-planned { color: var(--cyan); background: rgba(109,247,255,.10); }
.gantt-rows { border: 1px solid rgba(255,255,255,.10); border-top: 0; border-radius: 0 0 16px 16px; overflow: hidden; }
.delivery-gantt-row {
  display: grid;
  grid-template-columns: 240px minmax(828px, 1fr);
  min-height: 70px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  transition: opacity .22s ease, transform .22s ease;
}
.delivery-gantt-row:last-child { border-bottom: 0; }
.delivery-gantt-row.hidden { display: none; }
.delivery-gantt-row:hover { background: rgba(109,247,255,.055); }
.gantt-task-meta {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,.10);
  background: rgba(5,9,24,.55);
}
.gantt-task-meta b { font-size: 13px; line-height: 1.25; }
.gantt-task-meta small { color: var(--soft); line-height: 1.35; }
.gantt-lane {
  display: grid;
  grid-template-columns: repeat(9, minmax(92px, 1fr));
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 9 - 1px), rgba(255,255,255,.08) calc(100% / 9), rgba(255,255,255,.08) calc(100% / 9));
}
.gantt-bar-btn {
  grid-column: var(--start) / span var(--span);
  align-self: center;
  min-height: 38px;
  margin: 10px 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #04121d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 13px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s var(--ease), box-shadow .18s ease, filter .18s ease;
}
.gantt-bar-btn:hover,
.gantt-bar-btn.active { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 0 0 2px rgba(255,255,255,.26), 0 16px 42px rgba(0,0,0,.30); }
.gantt-bar-btn.done { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.gantt-bar-btn.active-status { background: linear-gradient(135deg, var(--amber), var(--pink)); }
.gantt-bar-btn.planned { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.gantt-current-marker {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: calc(16px + 240px + (828px * 7 / 9));
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--pink), var(--cyan), transparent);
  box-shadow: 0 0 22px rgba(255,114,210,.62);
  pointer-events: none;
  z-index: 8;
}
.gantt-current-marker span {
  position: absolute;
  top: 4px;
  left: 8px;
  min-width: 74px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255,114,210,.18);
  border: 1px solid rgba(255,114,210,.34);
  color: var(--text);
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gantt-detail { padding: 22px; position: sticky; top: 104px; align-self: start; min-height: 325px; }
.gantt-detail h3 { margin: 12px 0 10px; font-size: clamp(22px, 2vw, 30px); }
.task-pill { padding: 7px 9px; border-radius: 999px; border: 1px solid rgba(109,247,255,.25); background: rgba(109,247,255,.11); }
.task-pill.done { color: var(--green); border-color: rgba(130,255,180,.28); background: rgba(130,255,180,.10); }
.task-pill.active { color: var(--amber); border-color: rgba(255,224,138,.28); background: rgba(255,224,138,.10); }
.task-pill.planned { color: var(--cyan); }
.task-facts { display: grid; gap: 10px; margin-top: 16px; }
.task-facts div { padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.055); }
.task-facts span { display: block; color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; margin-bottom: 5px; }
.task-facts b { font-size: 14px; line-height: 1.35; }
.progress-meter { height: 8px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; margin-top: 12px; }
.progress-meter i { display: block; height: 100%; width: var(--progress); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.sprint-focus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.sprint-focus article { padding: 20px; min-width: 0; }
.sprint-focus h3 { margin: 12px 0 8px; font-size: 21px; }
.sprint-focus p { margin-bottom: 0; font-size: 14px; }

@media (max-width: 1240px) {
  .revenue-layout { grid-template-columns: 1fr; }
  .revenue-output { grid-template-columns: minmax(0, 1fr) minmax(132px, 158px); }
  .gantt-layout { grid-template-columns: 1fr; }
  .gantt-detail { position: relative; top: auto; }
}
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .delivery-snapshot, .sprint-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .section-panel { width: min(calc(100% - 24px), var(--max)); }
  .hero-metrics, .delivery-snapshot, .sprint-focus { grid-template-columns: 1fr; }
  .revenue-output { grid-template-columns: 1fr; }
  .target-ring { justify-self: start; }
  .mrr-display strong { font-size: clamp(40px, 13vw, 58px); }
  .gantt-section .gantt-toolbar { align-items: flex-start; flex-direction: column; }
  .gantt-chart { min-width: 900px; }
}

/* Display polish patch — 2026-05-18
   Fixes reported visual issues: hero metric overlap, sticky-nav anchor coverage,
   revenue simulator overflow, and unstyled Gantt rows/detail panel. */
main {
  padding-bottom: 72px;
}
.section-panel {
  width: min(var(--max), calc(100vw - 40px));
  scroll-margin-top: 118px;
}
.hero {
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  align-items: center;
}
.hero-copy,
.hero-device,
.calculator-card,
.revenue-output,
.mrr-display,
.break-card,
.metric-card {
  min-width: 0;
}
h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: .98;
}
.hero-lead {
  font-size: clamp(17px, 1.55vw, 21px);
}
.hero-actions .btn {
  min-height: 48px;
}
.hero-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metric-card {
  overflow: hidden;
}
.metric-value {
  font-size: clamp(24px, 2.15vw, 34px);
  line-height: 1;
  white-space: nowrap;
}
.metric-value-compact {
  letter-spacing: -.035em;
}
.metric-label {
  display: block;
  margin-top: 8px;
}
body.presentation-mode .section-panel {
  align-content: safe center;
}
body.presentation-mode .hero.section-panel {
  align-content: center;
}

/* Revenue simulator: keep MRR amount, ring, and breakdown inside the glass panel. */
.revenue-layout {
  grid-template-columns: minmax(360px, .96fr) minmax(0, 1.04fr);
  overflow: visible;
}
.revenue-output {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 150px);
  gap: 18px;
  overflow: hidden;
}
.mrr-display strong {
  font-size: clamp(42px, 4.15vw, 64px);
  line-height: .98;
  max-width: 100%;
  white-space: nowrap;
}
.target-ring {
  width: 150px;
  height: 150px;
  justify-self: end;
}
.target-ring::after {
  inset: 12px;
}
.target-ring span {
  font-size: clamp(22px, 2vw, 28px);
}
.revenue-breakdown {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.break-card b {
  font-size: clamp(17px, 1.5vw, 21px);
  overflow-wrap: anywhere;
}
.chart-panel {
  overflow: hidden;
}

/* Delivery Gantt chart styles for the current v4 markup. */
.delivery-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.delivery-snapshot article,
.sprint-focus article,
.gantt-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.delivery-snapshot article {
  min-height: 170px;
  padding: 18px;
}
.delivery-snapshot span,
.sprint-focus span {
  display: block;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 9px;
}
.delivery-snapshot strong {
  display: block;
  font-size: 18px;
  line-height: 1.25;
}
.delivery-snapshot p,
.sprint-focus p {
  margin-bottom: 0;
  font-size: 14px;
}
.gantt-section .gantt-toolbar {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.045);
  align-items: center;
}
.gantt-section .gantt-toolbar p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
}
.gantt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}
.gantt-chart {
  --label-width: 315px;
  --track-width: 990px;
  --today-offset: 770px;
  width: calc(var(--label-width) + var(--track-width));
  min-width: calc(var(--label-width) + var(--track-width));
  position: relative;
}
.gantt-section .gantt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px;
  border: 1px solid rgba(109,247,255,.20);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 12% 0%, rgba(109,247,255,.10), transparent 28rem),
    radial-gradient(circle at 96% 10%, rgba(255,114,210,.10), transparent 24rem),
    rgba(255,255,255,.045);
}
.gantt-axis {
  margin-left: var(--label-width);
  width: var(--track-width);
  min-width: var(--track-width);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: rgba(5,9,24,.50);
}
.gantt-axis span {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-left: 1px solid rgba(255,255,255,.08);
}
.gantt-axis span:first-child { border-left: 0; }
.gantt-axis em {
  display: block;
  color: var(--soft);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.gantt-axis .axis-current {
  background: rgba(255,114,210,.12);
  color: var(--text);
}
.gantt-axis .axis-planned {
  background: rgba(109,247,255,.08);
  color: var(--cyan);
}
.gantt-rows {
  width: calc(var(--label-width) + var(--track-width));
  min-width: calc(var(--label-width) + var(--track-width));
  border: 1px solid var(--line);
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}
.gantt-current-marker {
  position: absolute;
  top: 58px;
  bottom: 0;
  left: calc(var(--label-width) + var(--today-offset));
  width: 2px;
  z-index: 6;
  background: linear-gradient(180deg, transparent, var(--pink), var(--cyan), transparent);
  box-shadow: 0 0 20px rgba(255,114,210,.65);
  pointer-events: none;
}
.gantt-current-marker span {
  position: absolute;
  top: 10px;
  left: 8px;
  min-width: 72px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,114,210,.36);
  background: rgba(255,114,210,.18);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gantt-bar {
  border: 0;
  cursor: pointer;
}
.gantt-bar:hover,
.gantt-bar:focus-visible {
  outline: none;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0 0 1px rgba(255,255,255,.36), 0 0 38px rgba(109,247,255,.40), 0 14px 38px rgba(0,0,0,.24);
}
.gantt-detail {
  position: sticky;
  top: 104px;
  min-height: 360px;
  padding: 22px;
}
.gantt-detail h3 {
  margin-top: 14px;
  font-size: clamp(22px, 2.4vw, 31px);
}
.gantt-detail dl {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}
.gantt-detail div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.10);
}
.gantt-detail dt {
  color: var(--soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  margin-bottom: 4px;
}
.gantt-detail dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.35;
}
.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--muted);
  background: rgba(255,255,255,.065);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.task-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.task-pill.done { color: var(--green); }
.task-pill.active { color: var(--amber); }
.task-pill.planned { color: var(--cyan); }
.sprint-focus {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.sprint-focus article {
  padding: 20px;
  min-height: 210px;
}
.sprint-focus h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

@media (max-width: 1220px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-device {
    justify-items: stretch;
  }
  .device-frame {
    width: min(100%, 620px);
    justify-self: center;
  }
  .revenue-layout {
    grid-template-columns: 1fr;
  }
  .revenue-output {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
  .gantt-layout {
    grid-template-columns: 1fr;
  }
  .gantt-detail {
    position: static;
  }
}
@media (max-width: 1080px) {
  .delivery-snapshot,
  .sprint-focus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .revenue-output {
    grid-template-columns: minmax(0, 1fr) minmax(124px, 140px);
  }
  .target-ring {
    width: 140px;
    height: 140px;
  }
}
@media (max-width: 760px) {
  .section-panel {
    width: calc(100vw - 24px);
    scroll-margin-top: 92px;
  }
  h1 {
    font-size: clamp(36px, 10vw, 48px);
  }
  .hero-metrics,
  .delivery-snapshot,
  .sprint-focus {
    grid-template-columns: 1fr;
  }
  .revenue-output {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .target-ring {
    justify-self: start;
  }
  .revenue-breakdown {
    grid-template-columns: 1fr;
  }
  .mrr-display strong {
    font-size: clamp(38px, 13vw, 54px);
  }
  .gantt-chart {
    --label-width: 285px;
    --track-width: 900px;
    --today-offset: 700px;
  }
}

/* Final display safeguard patch — prevents the issues shown in the review screenshots. */
.hero-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
.metric-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.metric-value {
  max-width: 100% !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.revenue-layout {
  grid-template-columns: minmax(400px, .88fr) minmax(0, 1.12fr) !important;
}
.calculator-card,
.revenue-output,
.mrr-display,
.revenue-breakdown,
.break-card {
  min-width: 0 !important;
}
.addon-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}
.addon-grid label,
.addon-grid input {
  min-width: 0 !important;
  width: 100% !important;
}
.revenue-output {
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: 16px !important;
  overflow: hidden !important;
}
.mrr-display strong {
  max-width: 100% !important;
  font-size: clamp(38px, 3.8vw, 58px) !important;
  line-height: .98 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-variant-numeric: tabular-nums;
}
.target-ring {
  width: 150px !important;
  height: 150px !important;
  justify-self: end !important;
}
.target-ring::after {
  inset: 12px !important;
}
.revenue-breakdown {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.break-card b {
  overflow-wrap: anywhere !important;
}

@media (max-width: 1450px) {
  .revenue-layout {
    grid-template-columns: 1fr !important;
  }
  .revenue-output {
    grid-template-columns: minmax(0, 1fr) 150px !important;
  }
}

@media (max-width: 760px) {
  .hero-metrics,
  .revenue-breakdown,
  .revenue-output {
    grid-template-columns: 1fr !important;
  }
  .target-ring {
    justify-self: start !important;
  }
}
.addon-grid label { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }


/* 2026-05-18 v5 full-width presentation and Gantt layout patch. */
:root {
  --max: min(1880px, calc(100vw - 48px));
}

main {
  width: 100%;
}

.dock,
.section-panel {
  max-width: var(--max) !important;
}

.section-panel {
  width: min(1880px, calc(100vw - 48px)) !important;
}

.gantt-section {
  width: min(1960px, calc(100vw - 28px)) !important;
  max-width: none !important;
  padding-left: clamp(20px, 2.4vw, 42px) !important;
  padding-right: clamp(20px, 2.4vw, 42px) !important;
}

.gantt-section .section-heading {
  max-width: 1280px;
}

.gantt-layout {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 380px) !important;
  gap: clamp(18px, 1.8vw, 28px) !important;
}

.gantt-section .gantt-scroll {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(14px, 1.3vw, 20px) !important;
  overflow-x: auto !important;
}

.gantt-chart {
  --label-width: clamp(285px, 18vw, 350px) !important;
  --track-width: calc(100% - var(--label-width)) !important;
  width: 100% !important;
  min-width: 1100px !important;
  max-width: none !important;
}

.gantt-axis {
  margin-left: var(--label-width) !important;
  width: calc(100% - var(--label-width)) !important;
  min-width: 0 !important;
}

.gantt-rows {
  width: 100% !important;
  min-width: 0 !important;
}

.gantt-row {
  grid-template-columns: var(--label-width) minmax(0, 1fr) !important;
}

.gantt-track {
  min-width: 0 !important;
}

.gantt-current-marker {
  left: var(--today-left, calc(var(--label-width) + 770px)) !important;
}

.gantt-detail {
  min-width: 0 !important;
}

@media (max-width: 1580px) {
  .gantt-layout {
    grid-template-columns: 1fr !important;
  }
  .gantt-detail {
    position: static !important;
    min-height: auto !important;
  }
}

@media (max-width: 980px) {
  :root {
    --max: calc(100vw - 24px);
  }
  .section-panel,
  .gantt-section {
    width: calc(100vw - 20px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .gantt-chart {
    --label-width: 280px !important;
    min-width: 980px !important;
  }
}

@media (max-width: 640px) {
  .section-panel,
  .gantt-section {
    width: calc(100vw - 14px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .gantt-chart {
    --label-width: 245px !important;
    min-width: 900px !important;
  }
  .gantt-axis span {
    font-size: 10px !important;
  }
}

/* V5.1 final full-width correction requested after Gantt screenshot review. */
.dock {
  width: min(calc(100vw - 24px), 1960px) !important;
  max-width: none !important;
}

.section-panel {
  width: min(calc(100vw - 28px), 1840px) !important;
  max-width: none !important;
}

.gantt-section {
  width: min(calc(100vw - 20px), 1960px) !important;
  max-width: none !important;
}

/* On common laptop/projector widths, give the chart the full row and move the details below. */
@media (max-width: 1740px) {
  .gantt-layout {
    grid-template-columns: 1fr !important;
  }

  .gantt-section .gantt-scroll {
    width: 100% !important;
  }

  .gantt-chart {
    width: 100% !important;
    min-width: 1100px !important;
  }

  .gantt-detail {
    position: static !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr) !important;
    gap: 12px 20px !important;
    align-items: start !important;
  }

  .gantt-detail > .task-pill,
  .gantt-detail > h3,
  .gantt-detail > p {
    grid-column: 1 !important;
  }

  .gantt-detail > dl {
    grid-column: 2 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 980px) {
  .section-panel,
  .gantt-section {
    width: calc(100vw - 16px) !important;
  }

  .gantt-detail {
    display: block !important;
  }

  .gantt-detail > dl {
    margin-top: 18px !important;
  }
}

/* V5.1 overflow guard: make sticky dock fill its padded shell instead of exceeding the viewport. */
.top-shell {
  padding-left: clamp(8px, 1vw, 18px) !important;
  padding-right: clamp(8px, 1vw, 18px) !important;
}
.dock {
  width: 100% !important;
  max-width: 1960px !important;
}