:root {
  --ink: #17191f;
  --muted: #606774;
  --subtle: #8a909c;
  --line: #e3e6ec;
  --line-strong: #d5dae3;
  --blue: #0874e8;
  --blue-dark: #064bb9;
  --blue-pale: #eaf4ff;
  --pink: #dc1689;
  --pink-pale: #fff0f8;
  --orange: #ed8a00;
  --orange-pale: #fff5e4;
  --green: #11885c;
  --green-pale: #e9f8f1;
  --surface: #fff;
  --page: #f6f8fb;
  --shadow: 0 18px 45px rgba(25, 43, 71, .09);
  font-family: 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); min-width: 320px; min-height: 100vh; }
button { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(8,116,232,.34); outline-offset: 3px; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 70px; flex: 0 0 70px; display: flex; align-items: center; padding: 0 4.2vw; background: rgba(255,255,255,.94); border-bottom: 1px solid #edf0f4; position: relative; z-index: 4; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #17191f; text-decoration: none; font-family: 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.8px; }
.wordmark-light { font-weight: 500; }
.wordmark sup { font-family: 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; font-size: 8px; letter-spacing: 0; margin-left: 2px; vertical-align: super; }
.webex-mark { width: 23px; height: 23px; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.webex-mark i { display: block; background: var(--blue); border-radius: 6px 2px 6px 2px; }
.webex-mark i:nth-child(2), .webex-mark i:nth-child(3) { background: #d7198a; }
.topbar-context { margin-left: 42px; display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--muted); }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.35px; color: #555e6b; }
.topbar-divider { height: 17px; width: 1px; background: var(--line-strong); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.live-pill { display: flex; gap: 7px; align-items: center; padding: 7px 10px; border-radius: 30px; border: 1px solid #d8ecff; background: #f3f9ff; color: #235c96; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(17,136,92,.12); }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: #394352; background: white; cursor: pointer; font-weight: 700; display: grid; place-items: center; }
.icon-button:hover { border-color: #94bce8; background: #f6fbff; }

.welcome { flex: 1; min-height: calc(100vh - 70px); padding: 5.2vh 7.2vw 28px; display: grid; grid-template-columns: minmax(360px,.94fr) minmax(480px,1.06fr); align-items: center; gap: 4vw; overflow: hidden; position: relative; background: white; }
.welcome::before { content: ''; position: absolute; z-index: 0; width: 44vw; height: 45vw; top: -13vw; right: -11vw; background: radial-gradient(circle at 42% 52%,rgba(49,143,255,.15),transparent 48%),radial-gradient(circle at 63% 56%,rgba(230,56,166,.12),transparent 47%),radial-gradient(circle at 48% 74%,rgba(255,177,74,.1),transparent 42%); filter: blur(28px); pointer-events: none; }
.welcome-copy { position: relative; z-index: 1; max-width: 565px; padding-bottom: 20px; }
.eyebrow-blue { color: var(--blue); }
h1, h2, p { margin-top: 0; }
.welcome h1 { margin: 25px 0 19px; font: 800 clamp(44px,5vw,72px)/.99 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -4.7px; }
.welcome h1 span { color: var(--blue); }
.welcome-description { max-width: 465px; color: #626a78; font-size: 16px; line-height: 1.65; }
.welcome-cta-row { margin-top: 30px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { border: 0; border-radius: 7px; padding: 12px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; cursor: pointer; transition: transform .17s ease, background .17s ease, box-shadow .17s ease; font-size: 12px; font-weight: 700; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 5px 14px rgba(8,116,232,.2); }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 7px 18px rgba(8,116,232,.25); }
.button-large { padding: 15px 18px; font-size: 13px; }
.button-quiet { background: transparent; color: #555f6e; }
.button-quiet:hover { background: #f1f5fa; }
.button-outline { border: 1px solid var(--line-strong); color: #444e5c; background: white; }
.button-outline:hover { border-color: #9ebde2; background: #f8fbff; }
.welcome-note { display: flex; gap: 10px; max-width: 430px; margin-top: 28px; color: #77808d; font-size: 11px; line-height: 1.5; }
.note-icon { flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; background: #f0f5fa; color: #5c6f83; text-align: center; font-weight: 700; line-height: 17px; font-size: 10px; }
.welcome-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-self: end; padding-top: 22px; border-top: 1px solid #edf0f4; color: #9096a0; font-size: 8px; font-weight: 800; letter-spacing: 1.15px; position: relative; z-index: 1; }

.hero-visual { height: min(65vh,580px); min-height: 475px; position: relative; z-index: 1; display: grid; place-items: center; isolation: isolate; }
.hero-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle,rgba(222,238,255,.85) 0,rgba(249,244,255,.64) 50%,transparent 72%); }
.orbit { position: absolute; border: 1px solid rgba(108,144,186,.16); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 470px; height: 245px; }
.orbit-two { width: 540px; height: 350px; transform: rotate(28deg); }
.flow-line { position: absolute; height: 1px; width: 140px; transform-origin: left; background: linear-gradient(90deg,rgba(8,116,232,.3),rgba(215,25,138,.22)); }
.flow-line-a { left: 24%; top: 31%; transform: rotate(32deg); }
.flow-line-b { left: 71%; top: 33%; transform: rotate(128deg); }
.flow-line-c { left: 27%; top: 70%; transform: rotate(-31deg); }
.orbit-node { z-index: 1; position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(218,225,236,.94); border-radius: 30px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(18,35,58,.05); color: #454f5e; font-size: 8px; font-weight: 800; letter-spacing: .7px; animation: bob 4s ease-in-out infinite; }
.node-glyph { display: grid; place-items: center; width: 21px; height: 21px; color: white; background: var(--blue); border-radius: 50%; font-size: 11px; }
.node-order .node-glyph { background: var(--orange); }
.node-connect .node-glyph { background: var(--pink); }
.node-person .node-glyph { background: #252d3a; font-size: 8px; }
.node-webex { top: 17%; left: 15%; animation-delay: -.3s; }
.node-order { top: 16%; right: 7%; animation-delay: -1s; }
.node-connect { bottom: 18%; left: 13%; animation-delay: -1.5s; }
.node-person { bottom: 16%; right: 7%; animation-delay: -2s; }
.hero-order-card { position: relative; z-index: 2; width: min(355px,73%); border: 1px solid rgba(207,215,226,.9); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 24px 60px rgba(31,52,79,.12); padding: 20px 22px 16px; transform: rotate(-1.4deg); animation: card-arrive .9s cubic-bezier(.16,.85,.23,1) both; }
.card-topline { display: flex; align-items: center; gap: 7px; color: #808997; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.status-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 3px #fff4de; }
.card-menu { margin-left: auto; letter-spacing: 1px; }
.order-number { margin-top: 19px; color: var(--blue); font: 800 10px 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 1.2px; }
.order-question { margin-top: 8px; color: var(--ink); font: 700 23px/1.22 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.85px; }
.hero-card-footer { margin-top: 19px; display: flex; align-items: center; gap: 5px; color: #67707c; font-size: 7px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.mini-tool-dot { width: 6px; height: 6px; border-radius: 50%; }
.blue-dot { background: var(--blue); }.pink-dot { background: var(--pink); }.orange-dot { background: var(--orange); }
.footer-chevron { color: #abb3bf; margin: 0 4px; }
.floating-proof { z-index: 3; position: absolute; padding: 10px 12px; display: flex; align-items: center; gap: 7px; border: 1px solid #e4e8ed; border-radius: 8px; background: white; box-shadow: 0 10px 22px rgba(22,36,57,.09); color: #545e6c; font-size: 9px; animation: proof-float 3.6s ease-in-out infinite; }
.floating-proof b { color: var(--green); font-size: 8px; }
.proof-one { top: 30%; right: 7%; }.proof-two { bottom: 31%; left: 6%; animation-delay: -.9s; }
.proof-check { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-pale); font-weight: 800; }
.proof-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px var(--pink-pale); }
.visual-caption { position: absolute; bottom: 4%; color: #758091; font-size: 8px; letter-spacing: 1.2px; font-weight: 800; }
.visual-caption b { color: var(--pink); padding: 0 5px; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes proof-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes card-arrive { from { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(-1.4deg) scale(1); } }

.workspace { flex: 1; min-height: calc(100vh - 70px); display: grid; grid-template-columns: 238px minmax(0,1fr); background: white; }
.step-rail { display: flex; flex-direction: column; padding: 27px 14px 17px 22px; border-right: 1px solid #e9edf2; background: #fbfcfe; }
.rail-heading { padding: 0 10px 19px; display: flex; flex-direction: column; gap: 7px; }
.rail-heading .eyebrow { color: #66717f; font-size: 9px; }
.rail-run-label { color: #a2a9b2; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.step-nav { display: flex; flex-direction: column; gap: 4px; }
.step-nav button { cursor: pointer; border: 0; padding: 12px 10px; display: flex; align-items: center; gap: 11px; text-align: left; background: transparent; border-radius: 8px; color: #697381; }
.step-nav button:hover { background: #f1f5f9; }
.step-nav button.active { color: var(--ink); background: #edf5ff; }
.step-number { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid #dce1e8; border-radius: 50%; color: #75808d; background: white; font-size: 10px; font-weight: 800; }
.step-nav button.active .step-number { border-color: var(--blue); color: white; background: var(--blue); box-shadow: 0 4px 8px rgba(8,116,232,.19); }
.step-nav .step-nav-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.step-nav b { font-size: 13px; line-height: 1.2; font-weight: 700; }
.step-nav small { color: #929aa5; font-size: 10px; }
.rail-bottom { margin-top: auto; padding: 15px 5px 0; border-top: 1px solid #e9edf2; display: flex; flex-direction: column; gap: 3px; }
.rail-link { cursor: pointer; border: 0; border-radius: 6px; padding: 10px; background: transparent; text-align: left; color: #67717e; font-size: 10px; font-weight: 600; }
.rail-link:hover { color: var(--blue); background: #f1f5f9; }
.rail-link-icon { display: inline-block; width: 20px; color: #8c96a3; font-size: 14px; vertical-align: -1px; }

.stage-area { min-width: 0; display: flex; flex-direction: column; padding: 25px clamp(24px,4vw,64px) 20px; }
.stage-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stage-breadcrumb { display: flex; align-items: center; gap: 9px; color: #677280; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.stage-breadcrumb b { color: #b4bbc4; font-weight: 500; }
.stage-breadcrumb span:last-child { color: var(--blue); }
.stage-accent { width: 100%; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg,var(--blue) 0%,var(--pink) 48%,var(--orange) 100%); }
.stage-content { width: min(100%,1040px); flex: 1; min-height: 480px; padding: 26px 0 22px; display: flex; flex-direction: column; animation: fade-up .26s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.stage-kicker { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 1.1px; }
.kicker-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px var(--pink-pale); }
.stage-title { max-width: 920px; margin: 13px 0 10px; color: #1a1c22; font: 800 clamp(32px,3vw,48px)/1.08 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -1.8px; }
.stage-subtitle { max-width: 900px; margin-bottom: 23px; color: #67717e; font-size: 17px; line-height: 1.5; }
.surface-chip-row { display: flex; align-items: center; gap: 7px; margin: -4px 0 19px; flex-wrap: wrap; }
.surface-chip { border: 1px solid #e5e9ef; border-radius: 5px; padding: 7px 9px; display: inline-flex; align-items: center; gap: 6px; color: #596473; font-size: 10px; font-weight: 800; letter-spacing: .4px; background: white; }
.surface-chip::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--blue); }
.surface-chip.pink::before { background: var(--pink); }.surface-chip.orange::before { background: var(--orange); }.surface-chip.dark::before { background: #394451; }
.prompt-card { border: 1px solid #dfe4eb; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px rgba(22,36,57,.035); overflow: hidden; }
.prompt-head { min-height: 43px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f4; background: #fcfdff; }
.prompt-destination { display: flex; align-items: center; gap: 7px; color: #505b69; font-size: 11px; font-weight: 800; letter-spacing: .65px; }
.destination-icon { width: 18px; height: 18px; display: grid; place-items: center; color: white; border-radius: 5px; background: var(--blue); font-size: 9px; }
.destination-icon.pink { background: var(--pink); }.destination-icon.orange { background: var(--orange); }.destination-icon.dark { background: #394451; }
.copy-state { color: #a2aab4; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.prompt-text { margin: 0; padding: 19px 20px; color: #343c48; font: 500 16px/1.6 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; white-space: pre-wrap; user-select: text; }
.prompt-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 13px 13px; }
.copy-button { cursor: pointer; padding: 10px 14px; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 6px; color: white; background: var(--blue); font-size: 12px; font-weight: 700; }
.copy-button:link, .copy-button:visited { text-decoration: none; }
.copy-button:hover { background: var(--blue-dark); }
.copy-button.secondary { color: #414c5b; border: 1px solid var(--line-strong); background: white; }
.copy-button.secondary:hover { background: #f6f9fc; }
.prompt-tip { margin-top: 11px; color: #7d8793; font-size: 12px; line-height: 1.5; }
.prompt-tip b { color: #505a68; }
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.info-card { border: 1px solid #e4e8ee; border-radius: 9px; padding: 16px 18px; background: #fbfcfe; }
.info-card:last-child { border-color: #dce9f8; background: #f7fbff; }
.info-card-label { margin-bottom: 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .8px; }
.info-card p { margin: 0; color: #495565; font-size: 15px; line-height: 1.5; }
.inline-alert { margin-top: 13px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid #f4e6c8; border-radius: 7px; color: #755d34; background: #fffaf0; font-size: 10px; line-height: 1.5; }
.inline-alert .safety-icon { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; color: #9e670c; background: #ffeac3; font-size: 10px; font-weight: 800; }
.route-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 5px 0 16px; }
.route-step { min-height: 72px; padding: 11px; border: 1px solid #e4e8ee; border-radius: 8px; background: white; }
.route-step span { display: block; color: #9aa3af; font-size: 8px; font-weight: 800; letter-spacing: .5px; }
.route-step strong { display: block; margin-top: 8px; color: #373f4b; font-size: 10px; }
.route-step:nth-child(1) strong { color: var(--blue); }.route-step:nth-child(2) strong { color: #bd6900; }.route-step:nth-child(3) strong { color: var(--pink); }.route-step:nth-child(4) strong { color: var(--green); }
.phase-card { border: 1px solid #e4e8ef; border-radius: 9px; overflow: hidden; background: white; }
.phase-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; }
.phase-row + .phase-row { border-top: 1px solid #edf0f4; }
.phase-num { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-size: 9px; font-weight: 800; }
.phase-row strong { display: block; margin: 1px 0 4px; color: #37414e; font-size: 10px; }
.phase-row p { margin: 0; color: #707a87; font-size: 9px; line-height: 1.45; }
.phase-num.pink { background: var(--pink-pale); color: var(--pink); }.phase-num.orange { background: var(--orange-pale); color: #b36a00; }
.approval-gate { margin: 12px 0; padding: 11px 13px; display: flex; gap: 10px; align-items: center; border-radius: 8px; color: #72551e; background: #fff7e7; }
.approval-gate strong { display: block; font-size: 10px; }.approval-gate span:last-child { display: block; margin-top: 3px; color: #8b7446; font-size: 9px; line-height: 1.35; }
.approval-shield { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border: 1px solid #efd6a5; border-radius: 7px; font-size: 12px; }
.hero-map { margin: 6px 0 18px; padding: 16px; border: 1px solid #e4e8ee; border-radius: 10px; background: linear-gradient(112deg,#fff 42%,#f8fbff 100%); }
.hero-map-request { padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e7eaf0; border-radius: 7px; background: white; }
.hero-map-request span,.hero-map-result > span:first-child { color: #9aa2ad; font-size: 8px; font-weight: 800; letter-spacing: .9px; }
.hero-map-request strong { color: #373f4b; font: 700 12px 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; text-align: right; }
.hero-map-track { padding: 17px 2px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.hero-map-track > i { color: #bec5cf; font-size: 13px; font-style: normal; }
.map-node { min-width: 85px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 5px; border: 1px solid #e4e8ee; border-radius: 6px; background: white; color: #46505d; font-size: 7px; font-weight: 800; letter-spacing: .35px; text-align: center; }
.map-node small { color: #8c96a3; font-size: 8px; font-weight: 500; letter-spacing: 0; }
.blue-node { border-top: 2px solid var(--blue); }.pink-node { border-top: 2px solid var(--pink); }.orange-node { border-top: 2px solid var(--orange); }.dark-node { border-top: 2px solid #3a4452; }
.hero-map-result { padding: 10px 8px 0; border-top: 1px solid #eceff3; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.hero-map-result b { color: #5b6674; font-size: 8px; }.hero-map-result .map-result-dot { color: var(--pink); font-size: 12px; }
.consent-gate { margin: 12px 0 9px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #f0ddb9; border-radius: 8px; background: #fffaf0; cursor: pointer; }
.consent-gate input { position: absolute; opacity: 0; pointer-events: none; }
.consent-gate .custom-check { flex: 0 0 16px; }
.consent-gate input:checked + .custom-check { border-color: var(--green); background: var(--green); }
.consent-gate input:checked + .custom-check::after { content: '✓'; color: white; font-size: 11px; font-weight: 800; }
.consent-gate input:focus-visible + .custom-check { outline: 3px solid rgba(8,116,232,.34); outline-offset: 3px; }
.consent-gate b { display: block; color: #6d521f; font-size: 9px; }
.consent-gate small { display: block; margin-top: 3px; color: #907646; font-size: 8px; }
.consent-gate:has(input:checked) { border-color: #b9e0cb; background: #f5fcf8; }
.consent-gate:has(input:checked) b { color: #2b684b; }
.locked-prompt { position: relative; overflow: hidden; border-radius: 10px; }
.locked-message { min-height: 39px; padding: 9px 12px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px dashed #e9d5b0; border-radius: 8px; color: #796138; background: #fffaf0; font-size: 9px; font-weight: 700; }
.locked-prompt.unlocked .locked-message { display: none; }
.locked-prompt.unlocked .prompt-card { filter: none; opacity: 1; pointer-events: auto; }
.lock-symbol { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #ffedca; color: #946415; font-size: 11px; }
.stage-footer { padding-top: 13px; border-top: 1px solid #eceff3; display: flex; align-items: center; justify-content: space-between; }
.stage-footer .button { min-width: 120px; padding: 10px 12px; font-size: 10px; }
.stage-footer .button-quiet { min-width: 88px; justify-content: flex-start; }
.safety-icon { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border-radius: 50%; color: #97650c; background: #ffe9bc; font-size: 9px; font-weight: 800; }
.custom-check { width: 16px; height: 16px; border: 1px solid #cdd5df; border-radius: 4px; display: grid; place-items: center; background: white; }

.prep-screen { width: min(1220px,94vw); margin: 0 auto; padding: 43px 0 55px; }
.prep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.prep-head h1 { margin: 13px 0 8px; font: 800 clamp(30px,3vw,42px)/1.08 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -1.8px; }
.prep-head p { max-width: 660px; margin: 0; color: #687380; font-size: 12px; line-height: 1.55; }
.prep-head > .button { margin-top: 17px; }
.readiness-banner { margin: 25px 0 17px; padding: 15px 18px; display: flex; gap: 14px; align-items: center; border: 1px solid #dfe5ed; border-radius: 10px; background: white; box-shadow: 0 4px 15px rgba(22,36,57,.035); }
.readiness-ring { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) var(--percent,0%), #edf0f4 0); position: relative; }
.readiness-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: white; }
.readiness-ring strong { z-index: 1; font: 800 9px 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; color: #495464; }
.readiness-copy { display: flex; flex-direction: column; gap: 3px; }
.readiness-copy .eyebrow { color: #929ba7; font-size: 8px; }
.readiness-copy strong { font-size: 12px; }
.readiness-copy > span:last-child { color: #7e8794; font-size: 9px; }
.readiness-banner .button { margin-left: auto; font-size: 9px; }
.prep-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 15px; }
.prep-list { display: flex; flex-direction: column; gap: 7px; }
.prep-check { padding: 12px 14px; display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start; border: 1px solid #e2e7ee; border-radius: 8px; background: white; cursor: pointer; }
.prep-check:hover { border-color: #c6d9ee; }
.prep-check input { position: absolute; opacity: 0; pointer-events: none; }
.prep-check .custom-check { margin-top: 1px; }
.prep-copy b { display: block; color: #394350; font-size: 10px; }
.prep-copy span { display: block; margin-top: 3px; color: #798390; font-size: 9px; line-height: 1.45; }
.prep-check:has(input:checked) { border-color: #c6e8d7; background: #fbfefc; }
.prep-check:has(input:checked) .prep-copy b { color: #2d654c; }
.prep-sidecard { padding: 17px; border: 1px solid #dfe5ed; border-radius: 10px; background: white; box-shadow: 0 4px 15px rgba(22,36,57,.035); }
.prep-sidecard h2 { margin: 10px 0 16px; font: 800 21px/1.18 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.6px; }
.phone-proof-row { display: flex; gap: 9px; padding: 11px 0; border-top: 1px solid #edf0f4; }
.phone-proof-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; font-size: 7px; font-weight: 800; }
.pink-icon { color: var(--pink); background: var(--pink-pale); }.blue-icon { color: var(--blue); background: var(--blue-pale); }
.phone-proof-row b { display: block; margin-top: 1px; color: #414b59; font-size: 9px; }
.phone-proof-row span:last-child { display: block; margin-top: 3px; color: #78828f; font-size: 8px; line-height: 1.45; }
.prep-warning { margin-top: 9px; padding: 10px; border-radius: 7px; color: #796138; background: #fff8eb; font-size: 8px; line-height: 1.5; }
.prep-side-foot { margin-top: 13px; color: #a1a8b1; font-size: 7px; font-weight: 800; line-height: 1.6; letter-spacing: .7px; }

.toast { z-index: 10; position: fixed; left: 50%; bottom: 24px; transform: translate(-50%,12px); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: 7px; color: white; background: #252d39; box-shadow: 0 8px 25px rgba(0,0,0,.2); font-size: 10px; font-weight: 700; transition: opacity .2s ease,transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.modal-backdrop { z-index: 8; position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(21,30,42,.42); backdrop-filter: blur(3px); }
.help-modal { max-width: 475px; padding: 28px; position: relative; border-radius: 13px; background: white; box-shadow: var(--shadow); }
.help-modal h2 { margin: 10px 25px 14px 0; font: 800 23px/1.15 'Cisco Sans', 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.75px; }
.help-modal ol { padding-left: 18px; color: #5d6875; font-size: 11px; line-height: 1.65; }
.help-modal li { padding: 3px 0; }
.help-modal b { color: #313944; }
.modal-close { position: absolute; top: 14px; right: 14px; font-size: 18px; }
.modal-footnote { padding-top: 11px; border-top: 1px solid #edf0f4; margin-bottom: 0; color: #8c6d37; font-size: 9px; line-height: 1.5; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 205px minmax(0,1fr); }
  .step-rail { padding-left: 13px; }
  .welcome { grid-template-columns: minmax(330px,.9fr) minmax(430px,1.1fr); padding-left: 5vw; padding-right: 5vw; gap: 2vw; }
}
@media (min-width: 901px) {
  .workspace { height: calc(100vh - 70px); min-height: 610px; overflow: hidden; }
  .stage-area { min-height: 0; overflow: hidden; }
  .stage-content { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c5d0dc transparent; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 178px minmax(0,1fr); }
  .welcome { grid-template-columns: 1fr; padding-top: 48px; }.welcome-copy { max-width: none; }.welcome-visual { min-height: 380px; }
  .hero-visual { height: 410px; min-height: 410px; }
}
@media (max-width: 620px) {
  .topbar { height: 58px; flex-basis: 58px; padding: 0 15px; }.topbar-context { display: none; }.wordmark { font-size: 16px; }.live-pill { padding: 6px 8px; font-size: 7px; }
  .welcome { min-height: calc(100vh - 58px); display: flex; flex-direction: column; align-items: stretch; padding: 45px 22px 20px; gap: 8px; }.welcome h1 { margin-top: 19px; font-size: clamp(42px,12vw,59px); letter-spacing: -3px; }.welcome-description { font-size: 14px; }.welcome-cta-row { align-items: stretch; flex-direction: column; }.welcome-cta-row .button { width: 100%; }.welcome-cta-row .button-quiet { justify-content: center; }.hero-visual { min-height: 320px; height: 330px; margin: 0 -14px; transform: scale(.86); transform-origin: center top; margin-bottom: -32px; }.hero-order-card { width: 295px; }.orbit-one { width: 360px; }.orbit-two { width: 420px; }.node-webex { left: 3%; }.node-order { right: 2%; }.node-connect { left: 2%; }.node-person { right: 1%; }.proof-one { right: 0; }.proof-two { left: 0; }.visual-caption { bottom: -1%; font-size: 7px; }.welcome-footer { font-size: 7px; line-height: 1.4; gap: 20px; }
  .workspace { display: flex; flex-direction: column; min-height: calc(100vh - 58px); }.step-rail { padding: 13px 12px 9px; border-right: 0; border-bottom: 1px solid #e9edf2; }.rail-heading { display: none; }.step-nav { flex-direction: row; gap: 5px; overflow-x: auto; padding: 0 0 2px; }.step-nav button { flex: 0 0 auto; padding: 5px 8px; gap: 6px; }.step-number { width: 23px; height: 23px; flex-basis: 23px; }.step-nav b { font-size: 9px; }.step-nav small { display: none; }.rail-bottom { margin: 8px 0 0; padding: 6px 0 0; flex-direction: row; justify-content: space-between; }.rail-link { padding: 6px; font-size: 9px; }
  .stage-area { padding: 16px 17px 14px; }.stage-content { min-height: 0; padding: 19px 0; }.stage-title { font-size: 30px; letter-spacing: -1.3px; }.stage-subtitle { font-size: 12px; margin-bottom: 17px; }.prompt-text { font-size: 11px; padding: 13px; }.prompt-head { padding: 0 10px; }.copy-state { display: none; }.split-cards { grid-template-columns: 1fr; }.route-steps { grid-template-columns: 1fr 1fr; }.stage-footer .button { min-width: auto; }.stage-footer .button-quiet { min-width: 54px; }.stage-footer .button span:first-child { display: inline; }
  .hero-map { padding: 10px; }.hero-map-request { align-items: flex-start; flex-direction: column; }.hero-map-request strong { text-align: left; }.hero-map-track { overflow-x: auto; justify-content: flex-start; }.map-node { flex: 0 0 86px; }.hero-map-result { flex-wrap: wrap; }
  .prep-screen { width: auto; margin: 0; padding: 24px 16px 35px; }.prep-head { flex-direction: column; gap: 8px; }.prep-head > .button { margin: 0; }.prep-grid { grid-template-columns: 1fr; }.readiness-banner { gap: 10px; padding: 12px; }.readiness-copy > span:last-child { max-width: 230px; }.readiness-banner .button { padding: 8px; font-size: 8px; }.prep-sidecard { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}