/* RAMP & RUN site.
   One idea per section: a headline, at most one supporting line, one visual. No eyebrows.
   Layout and feel: research/sources/2026-10-15-design-reference.md. Palette and type: brand/visual.md.
   Copy rules (balance, tone): brand/voice.md. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --navy: #1F2A44;
  --copper: #A4562F;
  --copper-dk: #8C4826;
  --ivory: #F3EFE6;
  --canvas: #FFFFFF;
  --slate: #5D6477;
  --steel: #8A8F9C;
  --hairline: #E2DDD2;
  --navy-08: rgba(31, 42, 68, .06);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-card: 28px;
  --r-nav: 20px;
  --r-pill: 9999px;
  --ring: 0 0 0 1px var(--hairline);
  --section: 120px;
  --t: 200ms;
  --panel-w: 400px;
  --content: 1080px;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0ms; } html { scroll-behavior: auto !important; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--navy); font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
a { color: var(--copper); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; }
section { scroll-margin-top: 56px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprite { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--navy); color: var(--ivory); padding: 10px 16px; border-radius: var(--r-pill); z-index: 60; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.muted { color: var(--slate); }
.fine { font-size: 13px; line-height: 1.45; color: var(--slate); }
.amp { color: var(--copper); }
.copper { color: var(--copper); }
.preview-banner { background: var(--navy); color: var(--ivory); font-size: 13px; font-weight: 600; text-align: center; padding: 7px 16px; }

/* Navigation: one quiet bar */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1180px; margin: 0 auto; height: 56px; padding: 0 22px; display: flex; align-items: center; gap: 28px; }
.nav-logo { font-weight: 800; font-size: 17px; color: var(--navy); white-space: nowrap; }
.nav-logo:hover { text-decoration: none; }
.nav-city { font-weight: 500; color: var(--slate); margin-left: 4px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--navy); font-size: 14px; font-weight: 500; }

/* Pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-pill); font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.2; padding: 8px 16px; min-height: 36px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.pill:hover { text-decoration: none; }
.pill-fill { background: var(--copper); color: #fff; }
.pill-fill:hover { background: var(--copper-dk); }
.pill-outline { background: transparent; color: var(--navy); border-color: var(--steel); }
.pill-outline:hover { border-color: var(--navy); }
.pill-light { background: var(--ivory); color: var(--navy); }
.pill-lg { font-size: 17px; padding: 13px 26px; min-height: 50px; }
.pill[disabled] { opacity: .55; cursor: progress; }

/* Sections */
.sec { padding: var(--section) 22px; text-align: center; }
.sec.tint { background: var(--ivory); }
.sec > .pill { margin-top: 36px; }
.display { font-size: 80px; line-height: 1.05; letter-spacing: -0.03em; }
.title { font-size: 56px; line-height: 1.07; letter-spacing: -0.025em; max-width: 980px; margin: 0 auto; }
.lead { font-size: 24px; line-height: 1.35; color: var(--slate); max-width: 860px; margin: 22px auto 0; letter-spacing: -0.01em; }
.hero { padding-top: 112px; }

/* What you get: icon, word, one line */
.four { max-width: var(--content); margin: 72px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.glyph { width: 64px; height: 64px; fill: none; stroke: var(--copper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.item h3 { font-size: 24px; letter-spacing: -0.015em; margin-top: 18px; }
.item p { margin-top: 6px; color: var(--slate); }

/* Playbook visuals */
.pair { max-width: var(--content); margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.viz { background: var(--canvas); border-radius: var(--r-card); padding: 40px 36px 32px; display: flex; flex-direction: column; }
.viz-word { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.viz figcaption { margin-top: 28px; font-size: 19px; font-weight: 600; color: var(--slate); }
.stairs { height: 240px; margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.stair { height: var(--h); background: var(--navy); border-radius: 14px 14px 6px 6px; border-top: 5px solid var(--copper); color: var(--ivory); display: flex; flex-direction: column; justify-content: space-between; padding: 12px 8px; position: relative; }
.stair b { font-size: 28px; font-weight: 800; line-height: 1; }
.stair span { font-size: 13px; font-weight: 600; line-height: 1.2; }
.split { height: 240px; margin-top: 32px; display: flex; flex-direction: column; }
.deposit { align-self: center; background: var(--navy); color: var(--ivory); font-weight: 700; border-radius: var(--r-pill); padding: 14px 28px; font-size: 17px; }
.fan { width: 100%; height: 70px; fill: none; stroke: var(--navy); stroke-opacity: .35; stroke-width: 2; }
.buckets { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bk { border-radius: 14px; background: var(--ivory); display: flex; align-items: flex-end; justify-content: center; padding: 12px 6px; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--navy); }
.bk-profit { background: var(--copper); color: #fff; box-shadow: none; }
.bk-op { box-shadow: inset 0 0 0 1.5px var(--steel); color: var(--slate); background: transparent; }

/* How it works: a cycle */
.cycle { max-width: var(--content); margin: 72px auto 0; display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; align-items: start; gap: 12px; }
.step h3 { font-size: 26px; letter-spacing: -0.015em; margin-top: 20px; }
.step p { margin-top: 6px; color: var(--slate); }
.dot { width: 112px; height: 112px; border-radius: 50%; background: var(--ivory); display: inline-flex; align-items: center; justify-content: center; }
.dot svg { width: 52px; height: 52px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow { width: 60px; margin-top: 46px; fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.again { margin-top: 48px; display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--copper); }
.again svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ */
.faq-sec { max-width: 860px; margin: 0 auto; }
.faq { margin-top: 48px; border-top: 1px solid var(--hairline); text-align: left; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; font-size: 21px; font-weight: 700; padding: 22px 40px 22px 0; position: relative; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 28px; font-weight: 400; color: var(--copper); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--slate); padding: 0 40px 24px 0; }

.closer { background: var(--navy); color: var(--ivory); }
.closer .pill { margin-top: 40px; }

.footer { background: var(--canvas); border-top: 1px solid var(--hairline); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 28px 22px 40px; display: grid; gap: 8px; }
.footer-logo { font-weight: 800; font-size: 15px; }
.footer-city { font-weight: 500; color: var(--slate); }
.footer-links { display: flex; gap: 18px; font-size: 14px; }
.footer-links a { color: var(--navy); min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- Seat map ---------- */
.network { max-width: 1440px; margin: 0 auto; padding: 32px 22px 0; position: relative; }
.network:focus { outline: none; }
.network-head { text-align: center; margin-bottom: 18px; }
.network-head .muted { margin-top: 4px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin: 0 auto 8px; max-width: var(--content); }
.search { position: relative; flex: 0 1 360px; }
.search .icon { position: absolute; left: 14px; top: 11px; width: 16px; height: 16px; color: var(--slate); }
.search input { width: 100%; font: 500 15px var(--font); color: var(--navy); background: var(--canvas); border: 1px solid var(--steel); border-radius: 980px; padding: 9px 16px 9px 38px; min-height: 40px; letter-spacing: -0.01em; }
.search input:focus-visible { outline-offset: 1px; }
.search-results { position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: max(100%, 320px); list-style: none; margin: 0; padding: 8px; background: var(--canvas); border-radius: var(--r-nav); box-shadow: var(--ring); max-height: 340px; overflow: auto; text-align: left; }
.search-results li { padding: 10px 12px; border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; }
.search-results li small { font-weight: 500; color: var(--slate); }
.search-results li[aria-selected="true"], .search-results li:hover { background: var(--ivory); }
.search-results .empty { cursor: default; font-weight: 500; }
.cat-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex-basis: 100%; }
.cat-pills a { font-size: 14px; font-weight: 600; color: var(--navy); padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px solid transparent; }
.cat-pills a:hover { text-decoration: none; background: var(--navy-08); }
.cat-pills a[aria-current="true"] { border-color: var(--navy); }
.status-filter { border: 0; margin: 0; padding: 0; display: flex; gap: 4px; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 9px 12px; min-height: 40px; border-radius: var(--r-pill); cursor: pointer; user-select: none; color: var(--navy); }
.toggle .icon { width: 15px; height: 15px; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle:has(input:checked) { background: var(--ivory); }
.toggle:has(input:not(:checked)) { color: var(--steel); text-decoration: line-through; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.view-toggle { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--ivory); flex: none; }
.seg { font-size: 14px; font-weight: 600; color: var(--navy); padding: 7px 16px; min-height: 34px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.seg:hover { text-decoration: none; }
.seg[aria-current="true"] { background: var(--canvas); box-shadow: var(--ring); }

.stage { position: relative; }
.map-wrap { position: relative; height: clamp(560px, calc(100vh - 160px), 860px); overflow: hidden; }
.map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; font-family: var(--font); }
.map.dragging { cursor: grabbing; }

.links-tree line, .links-tree path { stroke: var(--navy); stroke-opacity: .32; stroke-width: 1.2; fill: none; }
.links-cross path { stroke: var(--navy); stroke-opacity: .09; stroke-width: 1; fill: none; transition: stroke-opacity var(--t), stroke var(--t); }
.links-cross path.on, .links-tree .on { stroke: var(--copper); stroke-opacity: .95; stroke-width: 1.8; }

.node { cursor: pointer; transition: opacity var(--t); outline: none; }
.node .pill-bg { fill: var(--ivory); stroke: var(--navy); stroke-width: 1.4; }
.node .label { font-size: 16.5px; font-weight: 600; fill: var(--navy); letter-spacing: -0.01em; }
.node .status { font-size: 16.5px; font-weight: 500; fill: var(--slate); letter-spacing: -0.01em; }
.node .sicon { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.node.pending .pill-bg { stroke: var(--copper); stroke-dasharray: 6 4; stroke-width: 1.6; }
.node.pending .sicon { stroke: var(--copper); }
.node.filled .pill-bg { fill: var(--navy); stroke: var(--navy); }
.node.filled .label { fill: var(--ivory); }
.node.filled .status { fill: rgba(243, 239, 230, .78); }
.node.filled .sicon { stroke: var(--ivory); }
.node .ring { fill: none; stroke: transparent; stroke-width: 2.5; }
.node.selected .ring { stroke: var(--copper); }
.node .focus { fill: none; stroke: transparent; }
.node:focus-visible .focus { stroke: var(--copper); stroke-width: 2; stroke-dasharray: 3 3; }
.node:hover .pill-bg { stroke-width: 2.2; }
.node.related .pill-bg { stroke: var(--copper); stroke-width: 2; }
.node.dim, .hub.dim, .center.dim { opacity: .2; }

.hub { cursor: pointer; transition: opacity var(--t); outline: none; }
.hub circle { fill: var(--canvas); stroke: var(--navy); stroke-width: 1.4; }
.hub .hicon { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub text { font-size: 15px; font-weight: 700; fill: var(--navy); paint-order: stroke; stroke: var(--canvas); stroke-width: 6px; stroke-linejoin: round; }
.hub:hover circle, .hub.active circle { stroke: var(--copper); stroke-width: 2; }
.hub:focus-visible circle { stroke: var(--copper); stroke-width: 2.5; }
.center { cursor: pointer; outline: none; }
.center rect { fill: var(--navy); }
.center text { font-size: 19px; font-weight: 800; fill: var(--ivory); }
.center:focus-visible rect { stroke: var(--copper); stroke-width: 3; }

.legend { position: absolute; left: 4px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; font-weight: 600; pointer-events: none; max-width: 60%; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-note { font-weight: 500; color: var(--slate); }
.swatch { width: 22px; height: 12px; border-radius: 6px; border: 1.4px solid var(--navy); background: var(--ivory); }
.swatch-pending { border: 1.5px dashed var(--copper); }
.swatch-filled { background: var(--navy); }
.map-wrap.panel-left .legend { left: calc(var(--panel-w) + 28px); }

.map-controls { position: absolute; right: 4px; top: 8px; display: flex; gap: 6px; align-items: center; }
.map-wrap.panel-right .map-controls { right: calc(var(--panel-w) + 28px); }
.ctl { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(210, 205, 195, .45); color: var(--navy); border: 0; border-radius: var(--r-pill); cursor: pointer; }
.ctl .icon { width: 16px; height: 16px; }
.ctl:hover { background: rgba(210, 205, 195, .7); text-decoration: none; }
.ctl-text { width: auto; padding: 0 14px; font: 600 13px var(--font); }

.chooser { position: absolute; inset: 0; background: var(--canvas); padding: 8px 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.chooser[hidden] { display: none; }
.map-wrap.choosing .map-controls, .map-wrap.choosing .legend { display: none; }
.chooser-title { font-weight: 700; font-size: 21px; }
.chooser-grid { display: grid; gap: 10px; }
.cat-card { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--ivory); border-radius: var(--r-card); color: var(--navy); font-weight: 700; }
.cat-card:hover { text-decoration: none; }
.cat-card .icon { width: 26px; height: 26px; }
.cat-card small { display: block; font-weight: 500; font-size: 14px; color: var(--slate); }
.chooser .pill { align-self: center; min-height: 44px; }

/* Seat panel: a floating sheet */
.panel { position: absolute; top: 52px; right: 0; bottom: 8px; width: var(--panel-w); max-width: 100%; background: var(--canvas); border-radius: var(--r-card); box-shadow: var(--ring); display: flex; flex-direction: column; z-index: 10; }
.panel[hidden] { display: none; }
.panel.left { right: auto; left: 0; }
.panel-bar { padding: 10px 12px 0; }
.panel-close { display: inline-flex; align-items: center; gap: 2px; font: 600 14px var(--font); color: var(--copper); background: none; border: 0; padding: 10px 8px; min-height: 44px; border-radius: var(--r-pill); cursor: pointer; }
.panel-close:hover { background: var(--navy-08); }
.panel-body { padding: 4px 28px 28px; overflow: auto; flex: 1; }
.panel-body h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; }
.panel-body h3 { font-size: 17px; margin: 26px 0 6px; }
.panel-body p + p { margin-top: 10px; }
.panel-body ul { padding-left: 20px; margin: 8px 0; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--slate); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eyebrow .icon { width: 16px; height: 16px; }
.status-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--navy); color: var(--navy); }
.status-tag .icon { width: 13px; height: 13px; }
.status-tag.pending { border: 1px dashed var(--copper); color: var(--copper); }
.status-tag.filled { background: var(--navy); color: var(--ivory); }
.essentials { background: var(--ivory); border-radius: 20px; padding: 18px 20px; margin: 18px 0; font-size: 15px; }
.essentials ul { margin: 8px 0 0; padding-left: 18px; }
.essentials li { margin: 4px 0; }
.notice { background: var(--ivory); border-radius: 16px; padding: 14px 16px; margin: 16px 0; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.actions .pill { min-height: 44px; font-size: 15px; padding: 10px 20px; }
.related { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 6px; }
.related button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 15px var(--font); color: var(--navy); background: var(--ivory); border: 0; border-radius: 14px; padding: 12px 14px; min-height: 48px; cursor: pointer; text-align: left; }
.related button:hover { background: #ECE6DA; }
.related small { display: block; font-weight: 500; color: var(--slate); font-size: 13px; }
.profile { display: flex; gap: 16px; align-items: center; margin: 14px 0 16px; }
.avatar { width: 76px; height: 76px; border-radius: 20px; background: var(--navy); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0; font-size: 15px; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--slate); }
.secondary-invite { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--slate); }
.copy-link { font: 600 14px var(--font); background: none; border: 0; color: var(--slate); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; min-height: 44px; }
.copy-link .icon { width: 15px; height: 15px; }

/* Forms */
.form { display: grid; gap: 14px; margin-top: 14px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field .opt { font-weight: 500; color: var(--slate); }
.field input, .field textarea { width: 100%; font: 500 16px var(--font); color: var(--navy); border: 1px solid var(--steel); border-radius: 14px; padding: 11px 14px; min-height: 46px; background: var(--canvas); }
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field .hint { font-size: 13px; color: var(--slate); margin-top: 5px; }
.field [aria-invalid="true"] { border-color: var(--copper); }
.field .err { color: var(--copper); font-size: 13px; font-weight: 600; margin-top: 5px; }
.form-error { background: #FBEEE7; border-radius: 16px; padding: 14px 16px; font-weight: 600; display: grid; gap: 10px; justify-items: start; }
.success { background: var(--ivory); border-radius: 20px; padding: 22px; margin-top: 14px; font-weight: 600; font-size: 17px; }

/* List view */
.list-view { padding: 4px 0 20px; min-height: 480px; }
.list-view[hidden] { display: none; }
.stage.panel-open .list-view { margin-right: calc(var(--panel-w) + 20px); }
.list-cat h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin: 24px 0 10px; }
.list-cat h3 .icon { width: 22px; height: 22px; }
.list-cat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.list-cat button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; font: 600 16px var(--font); color: var(--navy); background: var(--ivory); border: 0; border-radius: 18px; padding: 14px 16px; min-height: 60px; cursor: pointer; }
.list-cat button:hover { background: #ECE6DA; }
.list-cat button small { display: block; font-weight: 500; font-size: 13px; color: var(--slate); }
.list-cat button.selected { box-shadow: 0 0 0 2px var(--copper); }
.list-empty { padding: 20px 0; }


/* Seat map section */
.network { max-width: 1440px; margin: 0 auto; }
.network .toolbar { margin: 40px auto 8px; }
.filters { position: relative; }
.filters summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--steel); }
.filters summary::-webkit-details-marker { display: none; }
.filters[open] summary { box-shadow: 0 0 0 1px var(--navy); }
.filters-body { position: absolute; z-index: 26; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(560px, 92vw); background: var(--canvas); border-radius: var(--r-nav); box-shadow: var(--ring); padding: 16px; display: grid; gap: 12px; text-align: left; }
.filters-body .cat-pills { justify-content: flex-start; flex-basis: auto; }
.network .stage { text-align: left; }

@media (max-width: 1068px) {
  .display { font-size: 60px; }
  .title { font-size: 44px; }
  .four { grid-template-columns: repeat(2, 1fr); }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  :root { --section: 80px; }
  body { font-size: 16px; }
  .nav-links, .nav-city { display: none; }
  .nav .pill { margin-left: auto; }
  .hero { padding-top: 72px; }
  .display { font-size: 42px; line-height: 1.08; }
  .title { font-size: 32px; }
  .lead { font-size: 19px; }
  .title br, .display br { display: none; }
  .sec { padding-left: 20px; padding-right: 20px; }
  .four { grid-template-columns: 1fr 1fr; gap: 32px 16px; margin-top: 44px; }
  .glyph { width: 52px; height: 52px; }
  .item h3 { font-size: 20px; }
  .viz { padding: 28px 20px 24px; }
  .viz-word { font-size: 44px; }
  .stairs, .split { height: 200px; }
  .stair span { font-size: 11px; }
  .bk { font-size: 12px; }
  .cycle { grid-template-columns: 1fr; gap: 8px; margin-top: 44px; }
  .arrow { transform: rotate(90deg); margin: 26px auto; }
  .faq summary { font-size: 18px; }
  .network .toolbar { justify-content: flex-start; }
  .map-wrap { height: clamp(520px, calc(100vh - 120px), 720px); }
  .legend { top: auto; bottom: 8px; max-width: 100%; }
  .map-controls { top: auto; bottom: 40px; right: 4px; }
  .panel { position: fixed; inset: 0; width: auto; border-radius: 0; z-index: 50; box-shadow: none; }
  .panel.left { left: 0; }
  .panel-body { padding: 4px 20px 28px; }
  .stage.panel-open .list-view { margin-right: 0; }
}

/* Guide-copy rebuild */
.lockup { font-size: 21px; font-weight: 800; margin-bottom: 22px; }
.lockup-desc { display: block; font-size: 17px; font-weight: 600; color: var(--slate); }
.title-md { font-size: 40px; line-height: 1.15; max-width: 900px; }
.display-md { font-size: 64px; }
.item p { margin-top: 4px; }
.letters { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.letters li { font-size: 18px; font-weight: 600; display: flex; gap: 14px; align-items: baseline; }
.letters b { width: 18px; flex: none; font-weight: 800; color: var(--copper); }
.letters .credit { font-size: 14px; font-weight: 500; color: var(--slate); padding-left: 32px; }
.stairs, .split { height: 200px; }
.stair { justify-content: flex-start; }
.agenda { max-width: 900px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ag { background: var(--navy); color: var(--ivory); border-radius: 18px; padding: 22px 18px; display: grid; gap: 6px; text-align: left; min-height: 120px; align-content: space-between; }
.ag-min { font-size: 14px; font-weight: 600; color: rgba(243, 239, 230, .7); }
.ag-name { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.ag-opt { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.ag-opt .ag-min { color: var(--slate); }
.closer .title { color: var(--ivory); font-size: 40px; line-height: 1.15; }
@media (max-width: 734px) {
  .title-md, .closer .title { font-size: 28px; }
  .display-md { font-size: 40px; }
  .agenda { grid-template-columns: 1fr 1fr; }
  .letters li { font-size: 16px; }
}
.four .item h3 { font-size: clamp(17px, 1.55vw, 21px); white-space: nowrap; }
.four { gap: 24px; }
@media (max-width: 734px) { .four { grid-template-columns: 1fr; gap: 28px; } .four .item h3 { font-size: 20px; } }

/* RAMP staircase (the original treatment) */
.ramp-steps { height: 300px; margin-top: 32px; display: flex; align-items: flex-end; gap: 10px; }
.rstep { flex: 1; background: var(--navy); border-radius: 16px 16px 6px 6px; border-top: 6px solid var(--copper); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px; color: var(--ivory); text-align: left; }
.rstep span { font-size: 40px; font-weight: 800; line-height: 1; }
.rstep small { font-size: 13px; font-weight: 600; line-height: 1.3; color: rgba(243, 239, 230, .85); }
.rstep.s1 { height: 34%; } .rstep.s2 { height: 54%; } .rstep.s3 { height: 76%; } .rstep.s4 { height: 98%; }
.viz .split { height: 300px; justify-content: center; }

/* Meeting Gantt chart */
.gantt { max-width: 900px; margin: 56px auto 0; display: grid; gap: 10px; }
.g-row, .g-axis { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px; }
.g-label { text-align: right; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.g-track { position: relative; height: 52px; border-radius: 12px; background-image: repeating-linear-gradient(to right, rgba(31, 42, 68, .14) 0 1px, transparent 1px 25%); background-color: rgba(255, 255, 255, .55); }
.g-bar { position: absolute; top: 6px; bottom: 6px; left: calc(var(--s) / 120 * 100%); width: calc((var(--e) - var(--s)) / 120 * 100%); background: var(--navy); color: var(--ivory); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.g-opt { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); background-image: repeating-linear-gradient(135deg, rgba(31, 42, 68, .07) 0 6px, transparent 6px 12px); }
.g-ticks { position: relative; height: 20px; }
.g-ticks i { position: absolute; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 600; color: var(--slate); }
.g-ticks i:nth-child(1) { left: 0; transform: none; } .g-ticks i:nth-child(2) { left: 25%; } .g-ticks i:nth-child(3) { left: 50%; } .g-ticks i:nth-child(4) { left: 75%; } .g-ticks i:nth-child(5) { left: 100%; transform: translateX(-100%); }
@media (max-width: 734px) {
  .ramp-steps, .viz .split { height: 220px; }
  .rstep { padding: 10px 6px; }
  .rstep span { font-size: 28px; }
  .rstep small { font-size: 11px; }
  .g-row, .g-axis { grid-template-columns: 84px 1fr; gap: 10px; }
  .g-label { font-size: 15px; }
  .g-bar { font-size: 0; }
  .g-bar::after { content: "30"; font-size: 13px; }
}

/* RUN: the Profit First accounts */
.pf { height: 300px; margin-top: 32px; display: grid; grid-template-columns: 34% 60px 1fr; align-items: stretch; }
.acct-income { align-self: center; background: var(--navy); color: var(--ivory); border-radius: 16px; padding: 22px 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; text-align: center; }
.pf-fan { width: 60px; height: 300px; fill: none; stroke: var(--navy); stroke-opacity: .35; stroke-width: 2; }
.accts { display: flex; flex-direction: column; justify-content: space-between; }
.acct { height: 48px; border-radius: 12px; background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--navy); display: flex; align-items: center; padding: 0 16px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; text-align: left; }
.acct-profit { background: var(--copper); color: #fff; box-shadow: none; }
.acct-opex { background: transparent; box-shadow: inset 0 0 0 1.5px var(--steel); }
@media (max-width: 734px) {
  .pf { height: 240px; grid-template-columns: 30% 36px 1fr; }
  .pf-fan { width: 36px; height: 240px; }
  .acct-income { font-size: 16px; padding: 16px 8px; }
  .acct { height: 38px; font-size: 14px; padding: 0 10px; }
}

/* Member card on a filled seat, LinkedIn style: business type in the banner, round headshot on the
   left overlapping the banner edge, then name, business, area, services, website */
.mcard { position: relative; margin: 6px 0 4px; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; text-align: left; padding: 0 20px 22px; background: var(--canvas); }
.mcard-banner { position: relative; height: 96px; margin: 0 -20px; padding: 16px 20px 0 140px; background-color: var(--navy); color: var(--ivory);
  background-image: linear-gradient(rgba(243,239,230,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(243,239,230,.1) 1px, transparent 1px);
  background-size: 18px 18px; }
.mcard-type { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; margin: 0; text-align: right; }
.mcard-type .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; stroke: var(--copper-lt, #C9784D); }
.mcard-type span { display: grid; font-size: 13px; font-weight: 500; color: rgba(243,239,230,.75); line-height: 1.25; }
.mcard-type b { font-size: 18px; font-weight: 800; color: var(--ivory); letter-spacing: .01em; }
.bp .mcard-type b { font-family: var(--cond); font-size: 22px; text-transform: uppercase; }
.mcard-avatar { width: 108px; height: 108px; margin: -54px 0 0; border-radius: 50%; border: 4px solid var(--canvas); background: var(--navy); color: var(--ivory);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 32px; overflow: hidden; position: relative; }
.mcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.panel-body .mcard h2 { font-size: 26px; margin-top: 10px; }
.mcard-biz { font-size: 17px; font-weight: 600; margin-top: 2px; }
.mcard-area { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--slate); margin-top: 4px !important; }
.mcard-area .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.panel-body .mcard-services { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mcard-services li { font-size: 13px; font-weight: 600; background: var(--ivory); border-radius: 9999px; padding: 6px 12px; }
.mcard-web { margin-top: 18px; min-height: 44px; width: 100%; }
.mcard + .actions { margin-top: 4px; }
.waitlist-cta { margin-top: 26px; padding: 18px; border-radius: 16px; background: var(--ivory); }
.waitlist-cta p { font-size: 15px; color: var(--slate); }
.waitlist-cta b { color: var(--navy); display: block; font-size: 16px; margin-bottom: 2px; }
.waitlist-cta .pill { margin-top: 12px; min-height: 44px; }