/* FrontlineHQ — shared site shell
 *
 * Loaded by every marketing page. Contains design tokens, typography, the top
 * nav, the mobile-only dock, content sections, the walkthrough, and the
 * sign-in modal. Deliberately excludes the 3D story: only Home loads
 * story.css, so Product/Results/Pricing/Contact never pay for the preloader,
 * stage, or scroll choreography.
 */
@font-face {
  font-family: "Archivo Variable";
  src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Azeret Mono Variable";
  src: url("fonts/azeret-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* FrontlineHQ — shared Vector identity and 3D workflow scroll concept */
:root {
  --navy-950: #0B0D0F;
  --navy-900: #101315;
  --navy-990: #08090A;
  --navy-800: #161A1C;
  --navy-700: rgba(255,255,255,.10);
  --navy-600: rgba(255,255,255,.20);
  --royal-100: #D8FBF7;
  --royal-300: #8FF4E9;
  --royal-400: #63E9DC;
  --royal-500: #4FE8D8;
  --royal-600: #2BC7BA;
  --ice: #F1F4F2;
  --slate-200: #D9DEDC;
  --slate-400: #98A09D;
  --slate-500: #646C69;
  --green: #4FE8D8;
  --amber: #FFB020;
  --orange: #FF6A3D;
  --accent-soft: rgba(79,232,216,.12);
  --accent-line: rgba(79,232,216,.40);
  --glass: rgba(16,19,21,.74);
  --radius: 2px;
  --fs-display: clamp(40px, 6vw, 66px);
  --fs-h2: clamp(30px, 4.4vw, 50px);
  --fs-h3: clamp(24px, 3.2vw, 36px);
  --fs-metric: var(--fs-metric);
  --ease: cubic-bezier(.2, .9, .25, 1);
  --ease-out: cubic-bezier(.18, .94, .24, 1);
  --dur-fast: var(--dur-fast);
  --dur: .28s;
  --dur-slow: var(--dur-slow);
  --font-ui: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Azeret Mono Variable", "Azeret Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--navy-990);
  color: var(--ice);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--royal-400); text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ============ NAV ============ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  transition: background var(--dur-slow) var(--ease), backdrop-filter var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(8, 9, 10, .92);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, .06);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; }
.brand-word { width: 108px; }
.concept-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  color: var(--royal-300); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 4px 10px;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-link { color: var(--slate-400); text-decoration: none; font-size: 14px; }
.nav-link:hover { color: #fff; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px;
  border-radius: var(--radius); padding: 10px 20px; letter-spacing: .01em; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-solid {
  background: var(--royal-500); color: #04140f;
  box-shadow: none;
}
.btn-solid:hover { background: var(--royal-400); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ice); border: 1px solid rgba(255, 255, 255, .22); }
.btn-ghost:hover { border-color: var(--royal-300); transform: translateY(-1px); }
.hero-tour-btn {
  background: rgba(5, 6, 7, .9);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 12px 34px rgba(5, 6, 7, .62);
}
.hero-tour-btn:hover { background: rgba(11, 13, 15, .96); }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius); }

/* ============ POST-STORY CONTENT ============ */
#post { position: relative; z-index: 10; background: var(--navy-950); box-shadow: 0 -80px 120px rgba(5, 6, 7, .95); }
.psec { padding: 84px 0; }
.psec-alt { background: var(--navy-900); border-top: 1px solid var(--navy-700); border-bottom: 1px solid var(--navy-700); }
.psec h2 { font-size: var(--fs-h3); color: #fff; margin: 10px 0 14px; letter-spacing: -.01em; line-height: 1.2; }
.lede { color: var(--slate-400); max-width: 640px; font-size: 17px; }

/* product mockup (from live site) */
.mock { max-width: 900px; margin: 48px auto 0; border: 1px solid var(--navy-700); border-radius: var(--radius);
        background: var(--navy-900); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); overflow: hidden; text-align: left; }
.mock-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--navy-700); }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--navy-700); }
.mock-body { display: flex; min-height: 340px; }
.mock-side { width: 150px; background: var(--navy-950); border-right: 1px solid var(--navy-700); padding: 14px 10px; font-size: 11px; }
.mock-side .item { padding: 7px 10px; border-radius: var(--radius); color: var(--slate-500); margin-bottom: 2px; }
.mock-side .item.active { background: var(--royal-500); color: #fff; font-weight: 600; }
.mock-main { flex: 1; padding: 18px; font-size: 12px; }
.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-stat { background: var(--navy-990); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 10px 12px; }
.mock-stat b { display: block; font-size: 20px; color: #fff; }
.mock-stat span { color: var(--slate-500); font-size: 10px; }
.mock-title { font-size: 10px; letter-spacing: .1em; color: var(--slate-500); text-transform: uppercase; margin-bottom: 8px; }
.mock-flag { background: var(--navy-990); border: 1px solid rgba(255, 176, 32, .35); border-radius: var(--radius); padding: 12px; }
.mock-flag .row { display: flex; justify-content: space-between; align-items: center; padding: 7px 4px;
                  border-bottom: 1px solid var(--navy-700); }
.mock-flag .row:last-child { border-bottom: none; }
.mock-flag .car { color: #fff; font-weight: 600; }
.chips2 span { display: inline-block; background: rgba(255, 176, 32, .12); color: var(--amber);
               border-radius: var(--radius); padding: 2px 9px; font-size: 10px; margin-left: 5px; }

/* ============ INTERACTIVE PRODUCT WALKTHROUGH ============ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.walkthrough-section {
  background: linear-gradient(180deg, var(--navy-950), var(--navy-800) 52%, var(--navy-950));
  border-bottom: 1px solid var(--navy-700);
}
.product-tour {
  margin-top: 44px; display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  min-height: 650px; overflow: hidden; border: 1px solid var(--navy-700); border-radius: var(--radius);
  background: var(--navy-900); box-shadow: 0 34px 90px -48px rgba(79, 232, 216, .62);
  outline: none;
}
.product-tour:focus-visible { box-shadow: 0 0 0 3px rgba(79, 232, 216, .5), 0 34px 90px -48px rgba(79, 232, 216, .62); }
.tour-narrative {
  padding: 34px 28px; border-right: 1px solid var(--navy-700);
  background: linear-gradient(155deg, var(--navy-800), var(--navy-950));
  display: flex; flex-direction: column;
}
.tour-counter { display: flex; align-items: baseline; gap: 7px; color: var(--slate-500); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.tour-counter span:first-child { color: var(--royal-400); font-size: 24px; letter-spacing: 0; }
.tour-beat-label { color: var(--royal-300); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-top: 32px; }
.tour-narrative h3 { color: #fff; font-size: 24px; line-height: 1.16; margin-top: 8px; }
.tour-narrative > p:not(.tour-beat-label) { color: var(--slate-400); font-size: 14px; line-height: 1.62; margin-top: 13px; }
.tour-rail { list-style: none; display: grid; gap: 4px; margin-top: auto; padding-top: 28px; }
.tour-rail button {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 11px;
  border: 0; border-left: 2px solid transparent; background: transparent; color: var(--slate-400);
  padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tour-rail button span { color: var(--slate-500); font-size: 10px; letter-spacing: .1em; }
.tour-rail button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.tour-rail button[aria-current="step"] { color: #fff; background: rgba(79, 232, 216, .12); border-left-color: var(--royal-400); }
.tour-rail button.is-complete span { color: var(--royal-300); }
.tour-rail button:focus-visible, .tour-actions button:focus-visible { outline: 2px solid var(--royal-300); outline-offset: 2px; }
.tour-mobile-progress { display: none; }

.tour-product { min-width: 0; padding: 28px; display: flex; flex-direction: column; background: var(--navy-950); }
.tour-window {
  flex: 1; min-height: 510px; overflow: hidden; border: 1px solid var(--navy-700); border-radius: var(--radius);
  background: var(--navy-950); box-shadow: 0 24px 54px rgba(0, 0, 0, .35);
}
.tour-window-bar {
  height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 16px; border-bottom: 1px solid var(--navy-700); background: var(--navy-800);
}
.tour-window-brand { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.tour-window-brand img { width: 26px; height: 26px; object-fit: contain; }
.tour-window-brand span { color: var(--royal-400); }
.tour-window-context { color: var(--slate-400); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.tour-avatar { justify-self: end; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--royal-500); color: #fff; font-size: 9px; font-weight: 800; }
.tour-app { min-height: 460px; display: grid; grid-template-columns: 104px minmax(0, 1fr); }
.tour-app-nav { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--navy-700); padding: 18px 10px; background: var(--navy-950); }
.tour-app-nav img { width: 27px; margin: 0 8px 18px; }
.tour-app-nav span { padding: 7px 8px; border-radius: var(--radius); color: var(--slate-500); font-size: 9px; font-weight: 700; }
.tour-app-nav span.is-active { color: var(--royal-300); background: rgba(79, 232, 216, .11); }
.tour-screen {
  min-width: 0; min-height: 460px; padding: 24px; opacity: 1; transform: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tour-screen.is-changing { opacity: .25; transform: translateY(5px); }
.tour-screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tour-screen-heading > div > span { color: var(--royal-400); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tour-screen-heading h4 { color: #fff; font-size: 19px; line-height: 1.2; margin-top: 3px; }
.tour-time, .tour-stock { color: var(--slate-400); font-size: 11px; font-weight: 700; }
.tour-state, .tour-progress-chip {
  flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  padding: 5px 9px; color: var(--slate-400); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.tour-state.success { color: var(--royal-300); border-color: rgba(79, 232, 216, .35); background: rgba(79, 232, 216, .09); }
.tour-state.paused { color: var(--amber); border-color: rgba(255, 176, 32, .35); background: rgba(255, 176, 32, .09); }
.tour-progress-chip { color: var(--royal-300); border-color: rgba(79, 232, 216, .35); }

/* tour: intake */
.tour-scan { min-height: 190px; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 20px; border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 24px; background: var(--navy-900); }
.tour-scan.is-complete { border-color: rgba(79, 232, 216, .35); }
.tour-viewfinder { width: 112px; height: 112px; position: relative; display: grid; place-items: center; color: var(--royal-300); border: 1px solid rgba(79, 232, 216, .35); }
.tour-viewfinder::before, .tour-viewfinder::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--royal-400); }
.tour-viewfinder::before { left: -2px; top: -2px; border-left: 3px solid; border-top: 3px solid; }
.tour-viewfinder::after { right: -2px; bottom: -2px; border-right: 3px solid; border-bottom: 3px solid; }
.tour-viewfinder i { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--royal-400); box-shadow: 0 0 10px rgba(79, 232, 216, .8); transition: top var(--dur-slow) var(--ease); }
.tour-scan.is-complete .tour-viewfinder i { top: 78%; }
.tour-viewfinder b { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; }
.tour-scan-copy { min-width: 0; display: flex; flex-direction: column; }
.tour-mini-label { color: var(--slate-500); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.tour-scan-copy strong { color: #fff; font-size: 16px; margin: 5px 0 3px; }
.tour-scan-copy small { color: var(--slate-400); font-size: 11px; }
.tour-record { opacity: 0; transform: translateY(5px); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tour-record.is-visible { opacity: 1; transform: none; }
.tour-record span, .tour-record b { border-radius: var(--radius); padding: 7px 10px; font-size: 10px; }
.tour-record span { color: var(--royal-300); background: rgba(79, 232, 216, .1); }
.tour-record b { color: var(--slate-400); background: var(--navy-800); }

/* tour: ownership */
.tour-owner-list { display: grid; gap: 8px; }
.tour-owner { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--navy-700); border-radius: var(--radius); background: var(--navy-900); }
.tour-owner-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--slate-500); background: var(--navy-800); font-size: 9px; font-weight: 800; }
.tour-owner strong, .tour-owner small { display: block; }
.tour-owner strong { color: #fff; font-size: 12px; }
.tour-owner small { color: var(--slate-500); font-size: 10px; }
.tour-owner > b { color: var(--orange); font-size: 9px; font-weight: 700; }
.tour-owner.is-assigned .tour-owner-avatar { color: #fff; background: var(--royal-600); }
.tour-owner.is-assigned > b { color: var(--royal-300); }
.tour-handoff-note, .tour-listing-ready { opacity: 0; display: flex; align-items: center; gap: 8px; color: var(--slate-400); font-size: 10px; margin-top: 14px; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tour-handoff-note.is-visible, .tour-listing-ready.is-visible { opacity: 1; transform: none; }
.tour-handoff-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--royal-500); box-shadow: 0 0 8px rgba(79, 232, 216, .65); }

/* tour: timing */
.tour-clock { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; padding: 22px; border: 1px solid var(--navy-700); border-radius: var(--radius); background: var(--navy-900); }
.tour-clock-ring { width: 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, var(--navy-900) 57%, transparent 58%), conic-gradient(var(--royal-400) 0 31%, var(--navy-700) 31% 100%); }
.tour-clock-ring.is-paused { background: radial-gradient(circle, var(--navy-900) 57%, transparent 58%), conic-gradient(var(--amber) 0 22%, var(--navy-700) 22% 100%); }
.tour-clock-ring strong { color: #fff; font-size: 28px; line-height: 1; }
.tour-clock-ring span { color: var(--slate-500); font-size: 9px; margin-top: 5px; text-transform: uppercase; letter-spacing: .08em; }
.tour-clock-meta { display: grid; gap: 11px; }
.tour-clock-meta span { display: flex; justify-content: space-between; gap: 12px; color: var(--slate-500); font-size: 10px; border-bottom: 1px solid var(--navy-700); padding-bottom: 7px; }
.tour-clock-meta b { color: var(--slate-200); }
.tour-timeline { height: 6px; border-radius: 3px; margin-top: 18px; background: var(--navy-700); overflow: hidden; }
.tour-timeline i { display: block; height: 100%; background: var(--royal-400); border-radius: 3px; transition: width var(--dur) var(--ease); }
.tour-hold { opacity: 0; display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 9px 11px; border-radius: var(--radius); background: rgba(255, 176, 32, .09); color: var(--amber); font-size: 10px; transition: opacity var(--dur-fast) var(--ease); }
.tour-hold.is-visible { opacity: 1; }
.tour-hold b { color: var(--slate-400); }

/* tour: inspection and work orders */
.tour-inspection-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(248, 113, 113, .25); border-radius: var(--radius); background: rgba(127, 29, 29, .08); }
.tour-inspection-row.quiet { margin-top: 10px; border-color: rgba(255, 176, 32, .22); background: rgba(120, 53, 15, .07); }
.tour-inspection-row strong, .tour-inspection-row small { display: block; }
.tour-inspection-row strong { color: #fff; font-size: 12px; }
.tour-inspection-row small { color: var(--slate-500); font-size: 9px; }
.tour-inspection-row > b { color: #fff; font-size: 14px; }
.tour-severity { border-radius: var(--radius); padding: 4px 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.tour-severity.required { color: var(--orange); background: rgba(255, 106, 61, .14); }
.tour-severity.advise { color: var(--amber); background: rgba(255, 176, 32, .14); }
.tour-cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.tour-cost-grid span { padding: 9px; border: 1px solid var(--navy-700); border-radius: var(--radius); color: var(--slate-500); font-size: 8px; }
.tour-cost-grid b { display: block; color: #fff; font-size: 12px; margin-top: 2px; }
.tour-approval { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: var(--radius); color: var(--amber); background: rgba(255, 176, 32, .1); font-size: 10px; }
.tour-approval b { color: var(--slate-400); }
.tour-approval.is-approved { color: var(--royal-300); background: rgba(79, 232, 216, .1); }

/* tour: merchandising */
.tour-merch-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.tour-photo-set, .tour-price-proof { position: relative; border: 1px solid var(--navy-700); border-radius: var(--radius); background: var(--navy-900); padding: 12px; }
.tour-photo-set { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tour-photo-set span { aspect-ratio: 4 / 3; border-radius: var(--radius); background-size: cover; background-position: center; filter: brightness(.42) saturate(.55); transition: filter var(--dur) var(--ease); }
.tour-photo-set.is-complete span { filter: none; }
.tour-photo-set b { position: absolute; right: 10px; bottom: 10px; padding: 4px 7px; border-radius: var(--radius); background: rgba(5, 6, 7, .88); color: #fff; font-size: 9px; }
.tour-price-proof { display: flex; flex-direction: column; justify-content: center; }
.tour-price-proof > span { color: var(--slate-500); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.tour-price-proof > strong { color: #fff; font-size: 24px; margin: 4px 0 8px; }
.tour-price-proof small { color: var(--slate-400); font-size: 10px; margin-top: 4px; }
.tour-price-line { position: relative; height: 5px; border-radius: 3px; margin-top: 18px; background: linear-gradient(90deg, var(--royal-500), var(--amber), var(--orange)); opacity: .75; }
.tour-price-line i { display: block; position: absolute; top: 50%; left: 28%; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--royal-500); transform: translate(-50%, -50%); }
.tour-listing-ready { justify-content: space-between; padding: 9px 11px; border-radius: var(--radius); color: var(--royal-300); background: rgba(79, 232, 216, .1); }
.tour-listing-ready b { color: var(--slate-200); }

/* tour: frontline result */
.tour-result-hero { padding: 24px; border: 1px solid var(--navy-700); border-radius: var(--radius); background: linear-gradient(145deg, var(--navy-800), var(--navy-950)); }
.tour-result-hero.is-ready { border-color: rgba(79, 232, 216, .35); background: linear-gradient(145deg, rgba(79, 232, 216, .13), var(--navy-950) 68%); }
.tour-result-hero span, .tour-result-hero strong, .tour-result-hero small { display: block; }
.tour-result-hero span { color: var(--royal-400); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.tour-result-hero.is-ready span { color: var(--royal-300); }
.tour-result-hero strong { color: #fff; font-size: 24px; margin-top: 7px; }
.tour-result-hero small { color: var(--slate-400); font-size: 11px; margin-top: 3px; }
.tour-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.tour-result-stats div { border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 12px; background: var(--navy-900); }
.tour-result-stats span, .tour-result-stats b { display: block; }
.tour-result-stats span { color: var(--slate-500); font-size: 9px; }
.tour-result-stats b { color: #fff; font-size: 20px; margin-top: 3px; }
.tour-stage-strip { display: flex; justify-content: space-between; gap: 5px; margin-top: 17px; }
.tour-stage-strip span { flex: 1; color: var(--slate-500); font-size: 7px; text-align: center; }
.tour-stage-strip i { display: block; height: 4px; border-radius: 2px; margin-bottom: 5px; background: var(--navy-700); }
.tour-stage-strip span.done i { background: var(--royal-400); }
.tour-stage-strip span:last-child.done i { background: var(--royal-500); }

.tour-actions { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 10px; margin-top: 16px; }
.tour-actions button { min-height: 44px; border-radius: var(--radius); padding: 10px 15px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.tour-nav-btn { border: 1px solid var(--navy-600); background: var(--navy-900); color: var(--slate-200); }
.tour-nav-btn:hover:not(:disabled) { border-color: var(--royal-400); color: #fff; }
.tour-nav-btn:disabled { opacity: .35; cursor: default; }
.tour-primary { border: 1px solid var(--royal-500); background: var(--royal-500); color: #04140f; box-shadow: 0 8px 24px rgba(79, 232, 216, .24); }
.tour-primary:hover:not(:disabled) { background: var(--royal-400); }
.tour-primary:disabled { border-color: rgba(79, 232, 216, .34); background: rgba(79, 232, 216, .12); color: var(--royal-300); cursor: default; box-shadow: none; }
.tour-progress { height: 3px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: var(--navy-700); }
.tour-progress i { display: block; width: 16.66%; height: 100%; border-radius: 2px; background: var(--royal-400); transition: width var(--dur) var(--ease); }
.product-tour.tour-acted .tour-window { animation: tourConfirm var(--dur-slow) var(--ease); }
@keyframes tourConfirm { 0%, 100% { box-shadow: 0 24px 54px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 24px 58px rgba(79, 232, 216, .25); } }

/* feature cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 44px; }
.card { background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 26px;
        transition: transform var(--dur), border-color var(--dur), box-shadow var(--dur); }
.psec-alt .card { background: var(--navy-950); }
.card:hover { transform: translateY(-3px); border-color: var(--navy-600); box-shadow: 0 18px 40px -28px rgba(79, 232, 216, .65); }
.card .ico { width: 42px; height: 42px; border-radius: var(--radius); background: rgba(79, 232, 216, .12); color: var(--royal-400);
             display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.card h3 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--slate-400); font-size: 14px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; counter-reset: step; }
.step { position: relative; padding: 26px; background: var(--navy-950); border: 1px solid var(--navy-700); border-radius: var(--radius); }
.step::before { counter-increment: step; content: counter(step);
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--royal-500); color: #fff;
  align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.step h3 { color: #fff; font-size: 16px; margin-bottom: 6px; }
.step p { color: var(--slate-400); font-size: 14px; }

/* ROI */
.roi-shell { margin-top: 42px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 22px; align-items: stretch; }
.roi-inputs, .roi-result { background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 28px; }
.roi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.roi-field label { display: block; color: var(--slate-400); font-size: 13px; margin-bottom: 6px; }
.roi-field input { width: 100%; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-800); color: #fff; padding: 11px 12px; font-size: 16px; outline: none; }
.roi-field input:focus { border-color: var(--royal-400); box-shadow: 0 0 0 3px rgba(79, 232, 216, .15); }
.roi-assumptions { margin-top: 18px; display: grid; gap: 8px; }
.roi-assumptions span { color: var(--slate-400); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.roi-assumptions span::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--royal-400); }
.roi-result { display: flex; flex-direction: column; justify-content: center; border-color: rgba(79, 232, 216, .55); }
.roi-number { color: #fff; font-size: var(--fs-metric); font-weight: 800; line-height: 1; margin: 12px 0 8px; }
.roi-annual { color: var(--royal-300); font-size: 18px; font-weight: 700; }
.roi-breakdown { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--navy-700); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-breakdown b { display: block; color: #fff; font-size: 20px; }
.roi-breakdown span { color: var(--slate-500); font-size: 12px; }
.private-note { margin-top: 28px; max-width: 760px; border-left: 3px solid var(--royal-500); padding: 4px 0 4px 18px; color: var(--slate-400); }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 44px; }
.tier { background: var(--navy-950); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; }
.tier.feature { border-color: var(--royal-500); box-shadow: 0 0 0 1px var(--royal-500), 0 24px 60px -24px rgba(79, 232, 216, .38); }
.tier .name { color: #fff; font-weight: 700; font-size: 17px; }
.tier .price { font-size: 38px; color: #fff; font-weight: 800; margin: 14px 0 2px; }
.tier .per { color: var(--slate-500); font-size: 13px; margin-bottom: 20px; }
.tier ul { list-style: none; margin-bottom: 26px; }
.tier li { padding: 7px 0; color: var(--slate-400); font-size: 14px; }
.tier li::before { content: "✓  "; color: var(--green); font-weight: 700; }
.tier .btn { margin-top: auto; text-align: center; }
.badge { display: inline-block; background: rgba(79, 232, 216, .15); color: var(--royal-300); font-size: 11px;
         font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: var(--radius); margin-left: 8px; }

/* contact / footer */
.contact { text-align: center; background: var(--navy-900); border-top: 1px solid var(--navy-700); border-bottom: 1px solid var(--navy-700); }
.contact-card {
  margin: 30px auto 0; max-width: 640px; background: var(--navy-800);
  border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 22px; text-align: left;
}
.contact-label { margin: 0 0 10px; color: var(--slate-400); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
#contact-email { display: inline-block; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25; }
.contact-hint { margin: 10px 0 0; color: var(--slate-400); font-size: 14px; }
.contact-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-400); font-weight: 600; }
.social-link:hover { color: #fff; }
.social-link svg { color: var(--royal-400); }
footer { padding: 36px 0; color: var(--slate-500); font-size: 13px; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; }
.footer-legal { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.footer-legal a { color: var(--slate-400); font-weight: 700; }
.footer-legal a:hover { color: #fff; }

/* sign-in modal */
#signin-modal {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); padding: 0 16px;
}
.signin-box {
  position: relative; max-width: 400px; margin: 14vh auto 0;
  background: var(--navy-900); border: 1px solid var(--navy-700); border-radius: var(--radius); padding: 32px;
}
.signin-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border: 0; background: transparent; color: var(--slate-400); cursor: pointer; font-size: 24px;
}
.signin-box h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.signin-box > p { color: var(--slate-400); font-size: 14px; margin-bottom: 18px; }
.signin-box input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--navy-600);
  background: var(--navy-800); color: #fff; font-size: 15px; outline: none;
}
#signin-err { display: none; color: var(--orange); font-size: 13px; margin-top: 10px; }
.signin-help { color: var(--slate-500); font-size: 12px; margin-top: 14px; text-align: center; }

/* ============ SKIP LINK ============ */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--royal-500); color: #fff; padding: 10px 16px;
  border-radius: var(--radius); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ============ INTERIOR PAGE SHELL ============ */
/* Story pages position content over a fixed canvas; interior pages do not. */
body.page-interior { background: var(--navy-950); }
.page-head { padding: 132px 0 26px; }
.page-head .wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.page-head h1 {
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.02em;
  color: #fff; margin-top: 12px; font-weight: 700;
}
.page-head .lede { margin-top: 14px; max-width: 640px; }

/* ============ MOBILE DOCK ============ */
/* Mobile only by design: desktop already has a persistent top nav, and a third
   fixed layer is the crowding this restructure exists to remove. */
#dock { display: none; }
@media (max-width: 760px) {
  #dock {
    display: block; position: fixed; z-index: 120;
    left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 10px);
    background: rgba(8, 9, 10, .92);
    border: 1px solid var(--navy-700);
    border-radius: var(--radius);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
    opacity: 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  #dock ul { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
  #dock a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 7px 2px;
    color: var(--slate-400); font-size: 10px; font-weight: 600;
    letter-spacing: .03em; text-decoration: none; text-transform: uppercase;
  }
  #dock a svg { width: 19px; height: 19px; }
  #dock a[aria-current="page"] { color: var(--royal-300); }
  #dock a:focus-visible { outline: 2px solid var(--royal-400); outline-offset: -3px; border-radius: var(--radius); }
  /* The Home finale is the emotional payoff; the dock must not sit over it. */
  body.page-home #dock { opacity: 0; pointer-events: none; transform: translateY(12px); }
  body.page-home.dock-ready #dock { opacity: 1; pointer-events: auto; transform: none; }
  body.has-dock #post,
  body.has-dock main { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
  body.has-dock footer { padding-bottom: calc(env(safe-area-inset-bottom) + 92px); }
}

/* ============ COMPACT HOME (repeat visit) ============ */
.compact-hero { padding: 148px 0 40px; text-align: center; }
.compact-hero .wrap { max-width: 900px; margin: 0 auto; padding: 0 28px; }
.compact-still {
  margin: 26px auto 0; max-width: 720px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--navy-700); background: var(--navy-950);
}
.compact-still img { display: block; width: 100%; height: auto; }
.replay-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  color: var(--slate-400); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.replay-link:hover { color: var(--royal-300); }

/* ============ PROOF STRIP ============ */
.proof-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 860px; margin: 34px auto 0;
}
.proof-strip div {
  background: rgba(16, 19, 21, .72); border: 1px solid var(--navy-700);
  border-radius: var(--radius); padding: 16px 12px; text-align: center;
}
.proof-strip b { display: block; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.proof-strip span { display: block; margin-top: 4px; color: var(--slate-500); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 760px) { .proof-strip { grid-template-columns: repeat(2, 1fr); } }

/* ============ FAQ ============ */
.faq { max-width: 820px; margin: 34px auto 0; }
.faq details {
  border: 1px solid var(--navy-700); border-radius: var(--radius);
  background: rgba(16, 19, 21, .6); margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; padding: 16px 20px; color: #fff; font-size: 15px; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--royal-400); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:focus-visible { outline: 2px solid var(--royal-400); outline-offset: 2px; border-radius: var(--radius); }
.faq p { padding: 0 20px 18px; color: var(--slate-400); font-size: 14px; line-height: 1.65; }

/* ============ METHODOLOGY ============ */
.method { max-width: 900px; margin: 30px auto 0; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.method-grid div {
  background: rgba(16, 19, 21, .6); border: 1px solid var(--navy-700);
  border-radius: var(--radius); padding: 16px;
}
.method-grid b { display: block; color: #fff; font-size: 17px; }
.method-grid span { display: block; margin-top: 5px; color: var(--slate-500); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) { .method-grid { grid-template-columns: 1fr; } }

/* ============ MODULE DEEP DIVES ============ */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.module {
  background: rgba(16, 19, 21, .66); border: 1px solid var(--navy-700);
  border-radius: var(--radius); padding: 22px;
}
.module .eyebrow { font-size: 10px; }
.module h3 { color: #fff; font-size: 18px; margin-top: 9px; font-weight: 650; }
.module p { color: var(--slate-400); font-size: 14px; line-height: 1.65; margin-top: 8px; }
@media (max-width: 760px) { .modules { grid-template-columns: 1fr; } }

/* ============ RESPONSIVE (shared shell) ============ */
@media (max-width: 900px) {
  /* Full navigation stays visible down to 760px; it only needs to be tighter.
     Collapsing to brand + Sign in happens in the 760px block, where the dock
     takes over. */
  #nav { padding: 12px 18px; gap: 10px; }
  .nav-right { gap: 13px; }
  .nav-link { font-size: 13px; }
  #nav .btn { padding: 9px 14px; font-size: 13px; }
  .product-tour { grid-template-columns: 1fr; min-height: 0; }
  .tour-narrative { padding: 24px 20px 18px; border-right: 0; border-bottom: 1px solid var(--navy-700); }
  .tour-counter { display: none; }
  .tour-beat-label { margin-top: 0; }
  .tour-narrative h3 { font-size: 22px; }
  .tour-narrative > p:not(.tour-beat-label) { min-height: 44px; }
  .tour-rail { display: none; }
  .tour-mobile-progress { display: flex; gap: 6px; margin-top: 16px; }
  .tour-mobile-progress span { height: 3px; flex: 1; border-radius: 2px; background: var(--navy-600); }
  .tour-mobile-progress span.is-active { background: var(--royal-400); }
  .tour-mobile-progress span.is-complete { background: var(--royal-500); }
}
@media (max-width: 760px) {
  /* Below 760 the dock owns navigation, so the header reduces to brand +
     Sign in. Above 760 every link stays visible — see the 900px block. */
  .nav-link:not(#signin-link) { display: none; }
  .page-head { padding: 108px 0 18px; }
  .page-head .wrap { padding: 0 20px; }
  .compact-hero { padding: 120px 0 30px; }
  .roi-shell { grid-template-columns: 1fr; }
  .roi-fields { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-stats { grid-template-columns: repeat(2, 1fr); }
  .tour-product { padding: 14px; }
  .tour-window { min-height: 430px; }
  .tour-window-bar { grid-template-columns: 1fr auto; padding: 0 12px; }
  .tour-window-context { display: none; }
  .tour-app { min-height: 380px; grid-template-columns: 1fr; }
  .tour-app-nav { display: none; }
  .tour-screen { min-height: 380px; padding: 18px 14px; }
  .tour-scan { grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 18px 14px; }
  .tour-scan .tour-state { grid-column: 1 / -1; justify-self: start; }
  .tour-viewfinder { width: 82px; height: 82px; }
  .tour-clock { grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 12px; }
  .tour-clock-ring { width: 104px; height: 104px; }
  .tour-clock-ring strong { font-size: 22px; }
  .tour-cost-grid { grid-template-columns: 1fr 1fr; }
  .tour-merch-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tour-price-proof > strong { font-size: 20px; }
  .tour-result-hero { padding: 18px; }
  .tour-result-hero strong { font-size: 19px; }
  .tour-result-stats div { padding: 9px; }
  .tour-result-stats b { font-size: 17px; }
  .tour-stage-strip span { font-size: 0; }
  .tour-actions { grid-template-columns: auto 1fr auto; gap: 7px; }
  .tour-actions button { padding: 9px 11px; }
}
@media (max-width: 480px) {
  #nav { padding: 12px 16px; gap: 10px; }
  .brand-word { display: none; }
  .concept-badge { font-size: 9px; padding: 3px 8px; }
  #nav .btn { padding: 8px 14px; font-size: 13px; }
  .walkthrough-section .wrap { padding: 0 12px; }
  .walkthrough-section > .wrap > .eyebrow, .walkthrough-section > .wrap > h2, .walkthrough-section > .wrap > .lede { margin-left: 12px; margin-right: 12px; }
  .product-tour { margin-top: 30px; }
  .tour-narrative { padding: 21px 16px 15px; }
  .tour-product { padding: 10px; }
  .tour-screen { padding: 16px 11px; }
  .tour-screen-heading { margin-bottom: 14px; }
  .tour-screen-heading h4 { font-size: 16px; }
  .tour-owner { grid-template-columns: 30px 1fr auto; padding: 8px; gap: 8px; }
  .tour-owner-avatar { width: 28px; height: 28px; }
  .tour-inspection-row { padding: 10px 8px; gap: 8px; }
  .tour-inspection-row > b { font-size: 12px; }
  .tour-hold, .tour-approval { font-size: 9px; }
  .tour-actions { grid-template-columns: 1fr 1fr; }
  .tour-actions .tour-primary { grid-column: 1 / -1; grid-row: 1; }
  .tour-actions button { font-size: 11px; padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tour-screen, .tour-record, .tour-handoff-note, .tour-listing-ready, .tour-progress i,
  .tour-viewfinder i, .tour-timeline i { transition: none; }
  .product-tour.tour-acted .tour-window { animation: none; }
  .skip-link { transition: none; }
  #dock { transition: none; }
}

/* Accepted Vector cross-surface identity. Marketing keeps its public narrative
   scale, cinematic story, and conversion flow while sharing app geometry and
   semantics. */
body.page-interior,
html.mode-compact body.page-home {
  background-color:var(--navy-990);
  background-image:
    radial-gradient(900px 520px at 78% -10%,var(--accent-soft),transparent 72%),
    linear-gradient(var(--navy-700) 1px,transparent 1px),
    linear-gradient(90deg,var(--navy-700) 1px,transparent 1px);
  background-size:auto,56px 56px,56px 56px;
  background-attachment:fixed;
}
#nav.scrolled { background:var(--glass); border-bottom-color:var(--navy-700); backdrop-filter:blur(22px) saturate(160%); }
.concept-badge,.eyebrow,.mock-title,.tour-window-context,.tour-mini-label,
  .tour-counter,.tour-beat-label,.proof-number,.tier .per { font-family:var(--font-mono); }
:is(.mock,.mock-stat,.mock-flag,.product-tour,.tour-window,.tour-scan,
  .tour-record span,.tour-record b,.tour-owner,.tour-clock,.tour-hold,
  .tour-inspection-row,.tour-cost-grid span,.tour-approval,.tour-photo-set,
  .tour-price-proof,.tour-listing-ready,.tour-result-hero,.tour-result-stats div,
  .tour-actions button,.card,.step,.roi-inputs,.roi-result,.roi-field input,
  .tier,.faq details,.method-card,.module,.proof-card,.contact-form,
  .signin-modal,.signin-card) { border-radius:var(--radius); }
:is(.tour-product,.tour-screen,.tour-scan,.tour-owner,.tour-clock,.tour-photo-set,
  .tour-price-proof,.tour-result-stats div) { background:var(--navy-950); }
.product-tour { box-shadow:0 34px 90px -48px rgba(79,232,216,.28); }
.product-tour:focus-visible { box-shadow:0 0 0 3px var(--accent-line),0 34px 90px -48px rgba(79,232,216,.28); }
.tour-window-bar,.tour-narrative,.tour-app-nav { background:var(--navy-900); }
.tour-app-nav span.is-active,.tour-rail button[aria-current="step"] { background:var(--accent-soft); color:var(--royal-300); }
.tour-primary,.mock-side .item.active { color:#04140f; box-shadow:none; }
.tour-primary { border-color:var(--royal-500); }
.tour-owner.is-assigned .tour-owner-avatar { background:var(--royal-500); color:#04140f; }
.card .ico { border-radius:var(--radius); background:var(--accent-soft); color:var(--royal-300); }
.card:hover { border-color:var(--accent-line); box-shadow:none; }
.roi-result,.tier.feature { border-color:var(--accent-line); box-shadow:none; }
.roi-field input:focus { border-color:var(--accent-line); box-shadow:none; outline:2px solid var(--royal-500); outline-offset:2px; }
.tour-avatar { background:var(--royal-500); color:#04140f; }
.tour-progress-chip,.tour-viewfinder { border-color:var(--accent-line); }
.tour-viewfinder i { box-shadow:0 0 10px rgba(79,232,216,.62); }
.badge { background:var(--accent-soft); color:var(--royal-300); }
.tour-state.success,.tour-record span,.tour-listing-ready,.tour-result-hero.is-ready { color:var(--royal-300); border-color:var(--accent-line); background:var(--accent-soft); }
.tour-state.paused,.tour-hold,.tour-approval { color:var(--amber); background:rgba(255,176,32,.10); }
.tour-severity.required { color:var(--orange); background:rgba(255,106,61,.12); }
.tour-severity.advise { color:var(--amber); background:rgba(255,176,32,.12); }
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--royal-500); outline-offset:2px; }

@media (max-width:760px) {
  #dock { border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(22px) saturate(160%); }
  #dock a { min-height:44px; }
}

/* Page-quality pass. Interior routes share the same Vector materials while
   changing rhythm and composition by purpose. The masthead owns each page's
   proposition once; the first content section can begin with the useful thing. */
body.page-interior { --page-glow-x:78%; }
body.page-product { --page-glow-x:82%; }
body.page-results { --page-glow-x:20%; }
body.page-pricing { --page-glow-x:52%; }
body.page-contact { --page-glow-x:86%; }

body.page-interior {
  background-image:
    radial-gradient(880px 520px at var(--page-glow-x) -8%,rgba(79,232,216,.13),transparent 72%),
    linear-gradient(var(--navy-700) 1px,transparent 1px),
    linear-gradient(90deg,var(--navy-700) 1px,transparent 1px);
}
.page-head {
  position:relative;
  min-height:440px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:142px 0 62px;
  border-bottom:1px solid var(--navy-700);
}
.page-head::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,9,10,.30),transparent 42%,rgba(8,9,10,.12)),
    radial-gradient(560px 260px at var(--page-glow-x) 58%,rgba(79,232,216,.08),transparent 72%);
}
.page-head::after {
  content:"";
  position:absolute;
  left:max(32px,calc((100vw - 1016px) / 2));
  bottom:-1px;
  width:min(220px,32vw);
  height:2px;
  background:var(--royal-500);
  box-shadow:0 0 18px rgba(79,232,216,.45);
}
.page-head .wrap { position:relative; z-index:1; width:100%; }
.page-head .eyebrow { display:inline-flex; align-items:center; gap:10px; }
.page-head .eyebrow::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--royal-500);
  box-shadow:0 0 10px rgba(79,232,216,.48);
}
.page-head h1 {
  max-width:820px;
  font-size:var(--fs-display);
  letter-spacing:-.035em;
  line-height:.98;
  margin-top:16px;
}
.page-head .lede { max-width:700px; font-size:18px; line-height:1.55; }
.page-signals {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(760px,100%);
  margin-top:34px;
  padding:0;
  border-top:1px solid var(--navy-700);
}
.page-signals li { padding:14px 18px 0 0; }
.page-signals li + li { padding-left:18px; border-left:1px solid var(--navy-700); }
.page-signals b,.page-signals span { display:block; }
.page-signals b {
  color:var(--ice);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
}
.page-signals span { margin-top:2px; color:var(--slate-500); font-size:12px; }

.section-intro {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  align-items:end;
  gap:54px;
  padding-bottom:30px;
  border-bottom:1px solid var(--navy-700);
}
.section-intro h2 { margin-bottom:0; }
.section-intro .lede { margin:0; }
.walkthrough-section {
  background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 52%,var(--navy-950));
}
.page-product .walkthrough-section { padding-top:56px; }
.page-product .product-tour,.page-results .roi-shell,.page-contact .contact-card { margin-top:0; }
.page-results #results { padding-top:58px; }
.page-pricing .pricing-section { background:rgba(8,9,10,.72); }
.page-pricing .tiers { margin-top:30px; }
.page-pricing .tier { background:var(--navy-900); }
.page-contact .contact { padding-top:58px; background:rgba(16,19,21,.72); }
.page-contact .contact-card {
  max-width:760px;
  padding:34px;
  border-radius:var(--radius);
  border-color:var(--accent-line);
  background:linear-gradient(135deg,var(--navy-800),var(--navy-900));
}
.page-contact .contact-label { color:var(--royal-300); font-family:var(--font-mono); }

/* Finish replacing pre-Vector blue glows that were still visible beneath the
   shared teal tokens. */
.btn-ghost,.hero-tour-btn { border-color:var(--accent-line); }
.tour-rail button:hover { background:rgba(79,232,216,.06); }
.tour-primary { box-shadow:none; }
.tour-progress-chip,.tour-state { border-color:var(--accent-line); }
.roi-result { border-color:var(--accent-line); }
.tier.feature { border-color:var(--royal-500); }

@media (max-width:760px) {
  .page-head { min-height:0; padding:112px 0 42px; }
  .page-head::after { left:20px; }
  .page-head h1 { font-size:var(--fs-display); }
  .page-head .lede { font-size:16px; }
  .page-signals { grid-template-columns:1fr; margin-top:28px; }
  .page-signals li { display:grid; grid-template-columns:86px 1fr; gap:10px; padding:10px 0; }
  .page-signals li + li { padding-left:0; border-left:0; border-top:1px solid var(--navy-700); }
  .page-signals span { margin:0; }
  .section-intro { grid-template-columns:1fr; gap:14px; }
  .page-product .walkthrough-section,.page-results #results,.page-contact .contact { padding-top:38px; }
  .page-contact .contact-card { padding:24px 20px; }
  #contact-email { font-size:clamp(17px,5vw,22px); overflow-wrap:anywhere; }
}

/* Reduced motion: match the product's blanket rule. The per-element opt-outs
   above missed most of the site's transitions, so a user asking for less motion
   still got nearly all of it. Delays are reset too, or staggered reveals stay
   staggered at 1ms each. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}