/* Commercial journey: self-contained, fictional dataset, visitor-controlled motion. */
#commercial-route { margin: 0 0 70px; color: #f6f4ee; min-width: 0; }
#commercial-route svg { width: 23px; height: 23px; flex: none; }
#commercial-route button { font: inherit; touch-action: manipulation; }
#commercial-route button:focus-visible, #commercial-route summary:focus-visible { outline: 3px solid #26d9c7; outline-offset: 5px; }
.ar-experience { background: #07192c; border: 1px solid #47647b; border-radius: 22px; overflow: clip; }
.ar-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9%; align-items: end; padding: 38px 39px 26px; }
.ar-eyebrow { font-family: "IBM Plex Mono", monospace; color: #26d9c7; font-size: 10px; letter-spacing: .08em; margin: 0 0 16px; }
.ar-heading h3 { font-family: Manrope, Inter, sans-serif; font-size: clamp(26px, 2.65vw, 39px); line-height: 1.23; font-weight: 550; letter-spacing: -.035em; margin: 0; }
.ar-heading h3 em { color: #a5a9ff; font-style: normal; }
.ar-heading > p { font-size: 13px; color: #b4c7d8; line-height: 1.7; margin: 0 0 3px; }
.ar-simulation { font-size: 10px; letter-spacing: .015em; color: #b1c5d7; padding: 0 39px 29px; display: flex; align-items: center; gap: 8px; }
.ar-simulation > span { width: 6px; height: 6px; border-radius: 50%; background: #b8b9ff; flex: none; }
.ar-route-nav { position: relative; padding: 0 23px; margin: 0 16px 30px; }
#commercial-route .ar-connection { position: absolute; left: 23px; top: 0; width: calc(100% - 46px); height: 66px; pointer-events: none; }
.ar-connection-base { stroke: #38586c; stroke-width: 2; stroke-dasharray: 5 7; }
.ar-connection-progress { stroke: #26d9c7; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 600ms cubic-bezier(.22,1,.36,1); }
.ar-nodes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; position: relative; z-index: 1; }
.ar-node { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 0 9px; background: none; border: 0; cursor: pointer; color: #adbed0; }
.ar-node-icon { position: relative; width: 64px; height: 59px; display: flex; align-items: center; justify-content: center; border: 1px solid #597387; border-radius: 14px; background: #193249; box-shadow: 0 6px 0 #0c253c, 0 7px 0 #3c586e; transform: rotateX(9deg) rotateY(-7deg); transition: transform .3s, background .3s, border-color .3s, color .3s; }
.ar-node-icon small { position: absolute; top: -8px; right: -5px; font-family: "IBM Plex Mono", monospace; font-size: 8px; background: #193249; border: 1px solid #597387; padding: 3px 4px; border-radius: 4px; color: #afc1d1; }
.ar-node > b { font-size: 13px; font-weight: 550; margin-top: 2px; }
.ar-node-detail { font-size: 9px; line-height: 1.45; max-width: 125px; text-align: center; color: #a2b7c9; margin-top: -5px; }
.ar-node:hover .ar-node-icon { background: #263c5a; border-color: #969cfa; transform: translateY(-3px); }
.ar-node[aria-pressed="true"] { color: #f6f4ee; }
.ar-node[aria-pressed="true"] .ar-node-icon { background: #6267ff; border-color: #b5b8ff; box-shadow: 0 6px 0 #343887, 0 7px 0 #878be9, 0 10px 26px #6267ff25; color: #fff; transform: translateY(-3px); }
.ar-node[aria-pressed="true"] .ar-node-icon small { background: #c8cbff; border-color: #c8cbff; color: #182741; }
.ar-node.is-visited .ar-node-icon { border-color: #298b86; color: #65e1d5; background: #123d43; box-shadow: 0 6px 0 #102c37, 0 7px 0 #286d70; }
.ar-scene-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: stretch; border-top: 1px solid #29455b; border-bottom: 1px solid #29455b; min-height: 420px; }
.ar-story-copy { padding: 32px 33px 28px 39px; min-width: 0; }
.ar-question { color: #26d9c7; font-size: 11px; line-height: 1.55; margin: 0 0 16px; }
.ar-story-copy h4 { margin: 0; font-family: Manrope, Inter, sans-serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.ar-story-text { color: #b9cbdc; font-size: 12px; line-height: 1.75; margin: 19px 0 23px; }
.ar-stage-metric { display: flex; flex-direction: column; gap: 5px; margin: 0 0 20px; }
.ar-stage-metric strong { font-family: Manrope, Inter, sans-serif; font-size: clamp(37px, 4vw, 54px); letter-spacing: -.055em; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1.1; color: #f6f4ee; }
.ar-stage-metric > span { color: #bfd6e3; font-size: 11px; line-height: 1.5; }
.ar-stage-signal { margin: 0; display: flex; gap: 10px; align-items: flex-start; color: #9bc5cd; font-size: 10px; line-height: 1.65; max-width: 45ch; }
.ar-stage-signal svg { width: 16px !important; height: 16px !important; color: #26d9c7; margin-top: 2px; }
.ar-visual { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 31px; border-left: 1px solid #29455b; background: radial-gradient(ellipse at 55% 40%, #1a354b, #0c2034 78%); }
.ar-visual > div { width: 100%; max-width: 490px; animation: ar-panel-in .42s cubic-bezier(.22,1,.36,1); }
.ar-ad-layout { perspective: 1000px; }
.ar-ad-card { border: 1px solid #5b7489; border-radius: 14px; background: #0c2033; overflow: hidden; box-shadow: 10px 17px 36px #0004; transform: rotateY(-5deg) rotateX(2deg); }
.ar-ad-byline { display: flex; align-items: center; gap: 9px; padding: 14px; }
.ar-business-avatar { display: grid; place-items: center; color: #071426; background: #26d9c7; border-radius: 10px; width: 31px; height: 31px; font-family: Manrope, sans-serif; font-weight: 750; font-size: 16px; }
.ar-ad-byline > span:nth-child(2) { flex: 1; }
.ar-ad-byline b { font-size: 11px; display: block; font-weight: 550; }
.ar-ad-byline small { font-size: 8px; display: block; color: #9fb7ca; margin-top: 3px; line-height: 1.4; }
.ar-mini-label { color: #a3b4c6; font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .07em; }
.ar-ad-art { position: relative; overflow: hidden; background: #253758; min-height: 192px; padding: 26px; isolation: isolate; }
.ar-ad-art > p { position: relative; z-index: 2; margin: 0; font-family: Manrope, sans-serif; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.13; font-weight: 550; letter-spacing: -.04em; }
.ar-ad-art strong { color: #79e9dc; font-weight: 600; }
.ar-ad-orbit { position: absolute; border: 1px solid #8e99cc6b; border-radius: 50%; width: 240px; height: 120px; right: -85px; top: 46px; transform: rotate(-47deg); }
.ar-ad-orbit-two { width: 300px; height: 165px; right: -105px; top: 23px; transform: rotate(37deg); }
.ar-ad-product { position: absolute; right: -6px; top: 27px; border: 1px solid #9fa6ff; background: #6267ff; width: 105px; height: 130px; transform: rotate(-13deg) rotateY(-20deg); border-radius: 25px; box-shadow: 17px 21px 10px #12273b45; display: grid; place-items: center; color: #d6fffa; z-index: -1; }
.ar-ad-product svg { width: 57px !important; height: 57px !important; }
.ar-ad-footer { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.ar-ad-footer > span:first-child { font-size: 9px; color: #b5c8d7; max-width: 115px; line-height: 1.5; }
.ar-ad-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 33px; border-radius: 7px; padding: 8px 10px; color: #091b2b; background: #a5ece3; font-size: 9px; font-weight: 650; }
.ar-ad-cta svg { width: 15px !important; height: 15px !important; }
.ar-source-note { margin-top: 18px; display: flex; align-items: center; gap: 12px; color: #9fc9d2; font-size: 10px; line-height: 1.5; }
.ar-source-note b { display: block; font-size: 11px; font-weight: 500; color: #d0e3e9; margin-bottom: 4px; }
.ar-source-note svg { color: #26d9c7; }
.ar-channel-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.ar-channel-labels > span { color: #ccd6ed; border: 1px solid #526587; border-radius: 5px; padding: 5px 8px; font-size: 9px; }
.ar-channel-labels > small { margin-left: auto; color: #a7b9cc; font-size: 9px; }
.ar-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid #39586f; margin-bottom: 18px; }
.ar-mini-head > span { display: flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.4; color: #e6edf2; }
.ar-mini-head svg { width: 18px !important; height: 18px !important; color: #26d9c7; }
.ar-mini-head > small { font-size: 8px; color: #9ab4c7; text-align: right; line-height: 1.5; max-width: 115px; }
.ar-message-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.ar-contact-avatar { width: 33px; height: 33px; border: 1px solid #818bd4; background: #344664; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #dce1ff; flex: none; }
.ar-message-row > div { flex: 1; min-width: 0; }
.ar-message-row b { font-size: 11px; color: #dfe7ef; font-weight: 550; }
.ar-message-row p { color: #b9c9d8; font-size: 11px; line-height: 1.65; margin: 7px 0; }
.ar-message-row small { display: block; color: #9db4c8; font-size: 8px; line-height: 1.6; }
.ar-message-dot { width: 6px; height: 6px; border-radius: 50%; background: #26d9c7; margin: 7px 0; }
.ar-reply { border: 1px solid #3e797c; background: #163f48; border-radius: 12px 12px 3px 12px; padding: 14px; margin: 9px 0 14px 44px; font-size: 11px; line-height: 1.7; color: #dcefed; }
.ar-reply > span { color: #a1c8cb; font-size: 8px; display: flex; gap: 5px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.ar-reply svg { width: 12px !important; height: 12px !important; }
.ar-message-math { display: flex; align-items: center; justify-content: space-evenly; gap: 10px; border-top: 1px solid #39586f; padding-top: 19px; margin-top: 12px; }
.ar-message-math > span { font-size: 10px; text-align: center; color: #afc8d7; }
.ar-message-math > span:nth-child(2) { color: #98a0f5; font-size: 29px; }
.ar-message-math b { display: block; font-family: Manrope, sans-serif; font-size: 31px; font-weight: 550; letter-spacing: -.04em; color: #e8f3f3; margin-bottom: 4px; }
.ar-kanban { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ar-lane { min-width: 0; border-right: 1px solid #375169; padding-right: 9px; }
.ar-lane:last-child { border: 0; padding-right: 0; }
.ar-lane h5 { font-size: 9px; font-weight: 500; color: #b5cbdc; min-height: 29px; margin: 0 0 12px; line-height: 1.6; }
.ar-lane h5 > span { display: inline-block; color: #cbdde7; background: #2c475b; border-radius: 5px; font-size: 8px; padding: 1px 5px; margin-left: 4px; }
.ar-lead-card { background: #1b364b; border: 1px solid #4c6982; border-radius: 8px; padding: 13px 10px; box-shadow: 0 8px 15px #0001; min-height: 124px; }
.ar-lead-card > span { display: block; color: #afbddd; font-size: 8px; margin-bottom: 11px; }
.ar-lead-card b { display: block; color: #ecf2f5; font-size: 11px; font-weight: 550; line-height: 1.45; }
.ar-lead-card small { color: #a7bfcd; font-size: 8px; display: block; margin-top: 11px; line-height: 1.5; }
.ar-lead-card em { font-style: normal; display: flex; align-items: center; gap: 5px; border-top: 1px solid #4a727c; margin-top: 14px; padding-top: 10px; color: #71dfd5; font-size: 8px; line-height: 1.3; }
.ar-lead-card em > svg { width: 12px !important; height: 12px !important; }
.ar-lead-current { border-color: #47bcb3; background: #21414d; transform: translateY(5px); }
.ar-lead-ghost { margin-top: 12px; height: 43px; border: 1px dashed #4c6778; border-radius: 8px; background: #2540553b; }
.ar-register-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; color: #b0c8d7; font-size: 10px; line-height: 1.65; }
.ar-register-note svg { width: 18px !important; height: 18px !important; color: #26d9c7; }
.ar-register-note b { color: #d7e6eb; font-weight: 500; }
.ar-sales-counter { display: flex; gap: 15px; align-items: center; margin: 27px 0; }
.ar-sales-counter > strong { font-family: Manrope, sans-serif; font-size: 69px; font-weight: 550; line-height: 1; letter-spacing: -.055em; color: #e5fbf8; }
.ar-sales-counter > span { font-size: 11px; color: #bbd2dd; line-height: 1.7; }
.ar-confirm-seal { margin-left: auto; width: 71px; height: 71px; border: 1px solid #46b4ad; background: #1b514f; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #bafbef; transform: rotate(8deg); box-shadow: 6px 9px 18px #081a3030; }
.ar-confirm-seal svg { width: 18px !important; height: 18px !important; }
.ar-confirm-seal span { font-size: 8px; text-align: center; line-height: 1.35; }
.ar-customer-split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #3e6c7b; border-radius: 12px; overflow: hidden; }
.ar-customer-split > div { padding: 18px 15px; position: relative; background: #173b4b; }
.ar-customer-split > div + div { border-left: 1px solid #3e6c7b; background: #1b3047; }
.ar-split-icon { display: block; color: #6eddd2; margin-bottom: 12px; }
.ar-customer-split strong { display: inline-block; font-family: Manrope, sans-serif; font-size: 35px; font-weight: 550; letter-spacing: -.04em; margin-right: 4px; line-height: 1; }
.ar-customer-split div > span:not(.ar-split-icon) { font-size: 10px; color: #cfdee5; display: inline-block; line-height: 1.4; }
.ar-customer-split small { display: block; font-size: 8px; color: #aac4d1; margin-top: 8px; line-height: 1.5; }
.ar-sale-trace { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 23px; color: #9dbccf; font-size: 9px; line-height: 1.5; }
.ar-sale-trace svg { width: 15px !important; height: 15px !important; color: #57cfc5; }
.ar-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-metric { padding: 17px 13px 13px; border: 1px solid #4c6a82; border-radius: 11px; background: #163047; display: flex; flex-direction: column; align-items: flex-start; }
.ar-metric > span { font-size: 10px; color: #bed0e0; line-height: 1.5; }
.ar-metric strong { font-family: Manrope, sans-serif; font-size: clamp(25px, 2.7vw, 37px); font-weight: 550; letter-spacing: -.05em; color: #f0f8f7; margin: 10px 0 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.ar-metric small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 8px; color: #abcee0; line-height: 1.65; }
.ar-metric p { margin: 9px 0 0; color: #9eb8ce; font-size: 8px; line-height: 1.6; }
.ar-metric-featured { background: #15434a; border-color: #38aaa2; }
.ar-metric-featured strong { color: #65eee0; }
.ar-metric-featured > span { color: #d1f2ed; }
.ar-metric-featured p { color: #b5d8db; }
.ar-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 30px; }
.ar-step-announcement { color: #a4b9ca; font-size: 10px; line-height: 1.5; margin: 0; }
.ar-play-controls { display: flex; align-items: center; gap: 8px; }
.ar-direction { display: grid; place-items: center; width: 37px; min-height: 37px; border: 1px solid #59748b; border-radius: 8px; color: #dbedf2; background: #152d42; font-size: 17px !important; cursor: pointer; }
.ar-direction:hover:not(:disabled) { border-color: #26d9c7; color: #26d9c7; }
.ar-direction:disabled { color: #668399; border-color: #2f465b; cursor: default; }
.ar-play { border: 0; background: #26d9c7; color: #071426; border-radius: 8px; min-height: 39px; padding: 11px 13px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 10px !important; font-weight: 650 !important; cursor: pointer; min-width: 163px; }
.ar-play:hover { background: #7aece0; }
.ar-play svg { width: 15px !important; height: 15px !important; }
.ar-play-progress { height: 2px; overflow: hidden; background: #294157; }
.ar-play-progress > span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: #26d9c7; }
.ar-math-notes { padding: 0 31px; }
.ar-math-notes summary { display: list-item; cursor: pointer; padding: 17px 0; font-size: 11px; line-height: 1.7; color: #b7cbd9; min-height: 50px; }
.ar-math-notes > div { max-width: 85ch; padding-bottom: 17px; }
.ar-math-notes p { color: #a5bdd0; font-size: 11px; line-height: 1.75; margin: 9px 0 15px; }
@keyframes ar-panel-in { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ar-play-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.motion-paused #commercial-route *, body.motion-paused #commercial-route *::before, body.motion-paused #commercial-route *::after { animation: none !important; transition: none !important; }
@media (max-width: 1100px) {
  .ar-heading { gap: 6%; padding: 30px; }
  .ar-simulation { padding-left: 30px; padding-right: 30px; }
  .ar-scene-panel { grid-template-columns: .95fr 1.05fr; }
  .ar-story-copy { padding: 27px; }
  .ar-visual { padding: 23px; }
  .ar-kanban { gap: 6px; }
  .ar-lane { padding-right: 5px; }
  .ar-lead-card { padding: 10px 7px; }
  .ar-ad-art { padding: 22px; min-height: 175px; }
  .ar-ad-art > p { font-size: 29px; }
  .ar-metric strong { font-size: 30px; }
  .ar-metric { padding: 14px 10px; }
}
@media (max-width: 800px) {
  #commercial-route { margin-bottom: 43px; }
  .ar-heading { grid-template-columns: 1fr; gap: 18px; padding: 27px 24px 21px; }
  .ar-heading h3 { font-size: 29px; }
  .ar-heading > p { max-width: 65ch; font-size: 12px; }
  .ar-simulation { padding: 0 24px 24px; font-size: 9px; }
  .ar-route-nav { padding: 0; margin: 0 17px 25px; }
  #commercial-route .ar-connection { left: 0; width: 100%; height: 59px; }
  .ar-node { gap: 10px; padding: 0 4px; }
  .ar-node-icon { width: 52px; height: 50px; border-radius: 12px; }
  .ar-node > b { font-size: 11px; }
  .ar-node-detail { display: none; }
  .ar-node-icon small { font-size: 7px; padding: 2px 3px; top: -5px; right: -3px; }
  .ar-node-icon svg { width: 22px !important; height: 22px !important; }
  .ar-scene-panel { grid-template-columns: 1fr; min-height: 0; }
  .ar-story-copy { padding: 25px; }
  .ar-story-copy h4 { font-size: 27px; max-width: 30ch; }
  .ar-story-text { max-width: 65ch; margin-bottom: 18px; }
  .ar-stage-metric { margin-bottom: 15px; }
  .ar-stage-metric strong { font-size: 41px; }
  .ar-stage-signal { max-width: 64ch; }
  .ar-visual { padding: 28px; border-top: 1px solid #29455b; border-left: 0; min-height: 360px; }
  .ar-visual > div { max-width: 455px; }
  .ar-ad-art > p { font-size: 35px; }
  .ar-ad-art { min-height: 193px; }
  .ar-ad-product { right: 12px; z-index: 1; opacity: .65; }
  .ar-ad-art > p { z-index: 2; }
  .ar-metric strong { font-size: 34px; }
  .ar-metric { padding: 18px 15px; }
  .ar-bottom { padding: 17px 24px; }
  .ar-kanban { gap: 10px; }
  .ar-lead-card { padding: 13px 10px; }
  .ar-lead-card b { font-size: 12px; }
  .ar-math-notes { padding: 0 24px; }
}
@media (max-width: 500px) {
  .ar-experience { border-radius: 17px; }
  .ar-heading { padding: 25px 20px 18px; }
  .ar-eyebrow { font-size: 9px; }
  .ar-heading h3 { font-size: 26px; }
  .ar-heading > p { font-size: 11px; }
  .ar-simulation { padding: 0 20px 25px; font-size: 8px; line-height: 1.6; gap: 6px; }
  .ar-route-nav { margin: 0 10px 22px; }
  .ar-node { padding: 0 2px; }
  .ar-node-icon { width: 42px; height: 44px; border-radius: 10px; }
  #commercial-route .ar-connection { height: 49px; }
  .ar-node > b { font-size: 9px; }
  .ar-node-icon svg { width: 20px !important; height: 20px !important; }
  .ar-story-copy { padding: 23px 20px; }
  .ar-story-copy h4 { font-size: 26px; }
  .ar-question { font-size: 10px; margin-bottom: 14px; }
  .ar-story-text { font-size: 11px; }
  .ar-stage-metric strong { font-size: 40px; }
  .ar-stage-metric > span { font-size: 10px; }
  .ar-stage-signal { font-size: 9px; }
  .ar-visual { padding: 24px 19px; min-height: 325px; }
  .ar-ad-card { transform: none; }
  .ar-ad-byline { padding: 11px; }
  .ar-ad-byline small { max-width: 145px; }
  .ar-mini-label { display: none; }
  .ar-ad-art { min-height: 170px; padding: 24px 19px; }
  .ar-ad-art > p { font-size: 30px; }
  .ar-ad-product { width: 75px; height: 112px; right: -8px; top: 26px; }
  .ar-ad-product svg { width: 45px !important; height: 45px !important; }
  .ar-ad-footer { padding: 11px; }
  .ar-ad-footer > span:first-child { max-width: 95px; font-size: 8px; }
  .ar-ad-cta { font-size: 8px; padding: 8px; gap: 5px; }
  .ar-mini-head { gap: 9px; }
  .ar-mini-head > span { font-size: 10px; gap: 7px; }
  .ar-mini-head > small { font-size: 7px; max-width: 75px; }
  .ar-message-row p { font-size: 10px; }
  .ar-message-row b { font-size: 10px; }
  .ar-reply { font-size: 10px; margin-left: 33px; }
  .ar-message-math > span { font-size: 9px; }
  .ar-kanban { gap: 6px; }
  .ar-lane h5 { font-size: 8px; min-height: 35px; margin-bottom: 8px; }
  .ar-lane h5 > span { margin-left: 0; padding: 1px 4px; font-size: 7px; }
  .ar-lead-card { padding: 11px 7px; min-height: 132px; }
  .ar-lead-card b { font-size: 10px; }
  .ar-lead-card > span { font-size: 7px; }
  .ar-lead-card small { font-size: 7px; }
  .ar-lead-card em { flex-wrap: wrap; font-size: 7px; }
  .ar-register-note { font-size: 9px; margin-top: 20px; }
  .ar-sales-counter > strong { font-size: 61px; }
  .ar-sales-counter > span { font-size: 10px; }
  .ar-confirm-seal { width: 62px; height: 62px; }
  .ar-customer-split > div { padding: 16px 12px; }
  .ar-customer-split strong { font-size: 32px; }
  .ar-customer-split div > span:not(.ar-split-icon) { font-size: 9px; }
  .ar-sale-trace { gap: 6px; font-size: 8px; }
  .ar-sale-trace svg { width: 11px !important; height: 11px !important; }
  .ar-metric-grid { gap: 8px; }
  .ar-metric { padding: 14px 11px; }
  .ar-metric > span { font-size: 9px; }
  .ar-metric strong { font-size: 29px; }
  .ar-metric small { font-size: 7px; }
  .ar-metric p { font-size: 7px; }
  .ar-bottom { flex-direction: column; align-items: stretch; padding: 16px 20px; gap: 14px; }
  .ar-step-announcement { text-align: center; font-size: 9px; }
  .ar-play-controls { justify-content: center; }
  .ar-direction { min-height: 42px; width: 42px; }
  .ar-play { flex: 1; min-height: 44px; min-width: 0; font-size: 9px !important; padding: 11px; }
  .ar-math-notes { padding: 0 20px; }
  .ar-math-notes summary { font-size: 10px; }
  .ar-math-notes p { font-size: 10px; }
}
@media (max-width: 350px) {
  .ar-heading, .ar-story-copy { padding-left: 16px; padding-right: 16px; }
  .ar-heading h3, .ar-story-copy h4 { font-size: 24px; }
  .ar-node-icon { width: 38px; height: 41px; }
  .ar-node > b { font-size: 8px; }
  .ar-visual { padding-left: 14px; padding-right: 14px; }
  .ar-metric strong { font-size: 25px; }
  .ar-metric { padding: 13px 9px; }
}
/* Small screens keep every meaningful label readable; the CRM becomes three rows. */
@media (max-width: 800px) {
  .ar-heading > p, .ar-story-text { font-size: 14px; line-height: 1.75; }
  .ar-question { font-size: 12px; }
  .ar-stage-metric > span, .ar-stage-signal { font-size: 11px; line-height: 1.65; }
  .ar-simulation, .ar-node-detail, .ar-step-announcement { font-size: 10px; }
  .ar-node > b { font-size: 11px; }
  .ar-node-icon small { font-size: 9px; }
  .ar-ad-byline b { font-size: 12px; }
  .ar-ad-byline small, .ar-mini-label { font-size: 10px; line-height: 1.5; }
  .ar-ad-byline small { max-width: none; }
  .ar-ad-footer { flex-wrap: wrap; }
  .ar-ad-footer > span:first-child { font-size: 11px; line-height: 1.5; max-width: none; flex: 1 1 130px; }
  .ar-ad-cta { font-size: 11px; min-height: 38px; }
  .ar-source-note { font-size: 11px; }
  .ar-source-note b { font-size: 12px; }
  .ar-channel-labels > span, .ar-channel-labels > small { font-size: 10px; }
  .ar-mini-head { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .ar-mini-head > span { font-size: 12px; }
  .ar-mini-head > small { font-size: 10px; max-width: none; line-height: 1.5; }
  .ar-message-row b { font-size: 12px; line-height: 1.5; }
  .ar-message-row p, .ar-reply { font-size: 12px; line-height: 1.65; }
  .ar-message-row small, .ar-reply > span { font-size: 10px; line-height: 1.6; }
  .ar-message-math > span { font-size: 11px; }
  .ar-kanban { grid-template-columns: 1fr; gap: 13px; }
  .ar-lane { display: grid; grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr); gap: 13px; align-items: start; border: 0; border-bottom: 1px solid #375169; padding: 0 0 13px; }
  .ar-lane:last-child { padding-bottom: 0; }
  .ar-lane h5 { font-size: 12px; line-height: 1.6; min-height: 0; margin: 6px 0 0; }
  .ar-lane h5 > span { font-size: 10px; margin-left: 4px; padding: 1px 6px; }
  .ar-lead-card, .ar-lead-current { padding: 12px; min-height: 0; transform: none; }
  .ar-lead-card > span { font-size: 10px; margin-bottom: 7px; }
  .ar-lead-card b { font-size: 12px; line-height: 1.5; }
  .ar-lead-card small { font-size: 10px; line-height: 1.6; margin-top: 7px; }
  .ar-lead-card em { font-size: 10px; line-height: 1.5; margin-top: 10px; padding-top: 9px; }
  .ar-lead-ghost { display: none; }
  .ar-register-note { font-size: 11px; line-height: 1.7; }
  .ar-sales-counter > span { font-size: 12px; }
  .ar-confirm-seal { width: 76px; height: 76px; flex: none; }
  .ar-confirm-seal span { font-size: 10px; }
  .ar-customer-split div > span:not(.ar-split-icon) { font-size: 11px; line-height: 1.5; }
  .ar-customer-split small { font-size: 10px; line-height: 1.6; }
  .ar-sale-trace { font-size: 10px; line-height: 1.6; }
  .ar-metric > span { font-size: 11px; line-height: 1.5; }
  .ar-metric small { font-size: 10px; line-height: 1.65; overflow-wrap: break-word; }
  .ar-metric p { font-size: 10px; line-height: 1.65; }
  .ar-play { font-size: 11px !important; }
  .ar-math-notes summary { font-size: 12px; }
  .ar-math-notes p { font-size: 12px; line-height: 1.75; }
}
@media (max-width: 500px) {
  .ar-heading > p, .ar-story-text { font-size: 13px; }
  .ar-node > b { font-size: 10px; }
  .ar-sales-counter { gap: 11px; }
  .ar-sales-counter > span { font-size: 11px; }
  .ar-ad-footer > span:first-child { flex-basis: 100%; }
  .ar-ad-cta { width: 100%; }
}
@media (max-width: 360px) {
  .ar-metric-grid { grid-template-columns: 1fr; }
  .ar-metric { padding: 17px; }
  .ar-metric strong { font-size: 34px; }
  .ar-metric > span { font-size: 12px; }
  .ar-metric small, .ar-metric p { font-size: 11px; }
  .ar-lane { grid-template-columns: 1fr; gap: 8px; }
  .ar-lane h5 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #commercial-route *, #commercial-route *::before, #commercial-route *::after { animation: none !important; transition: none !important; }
}

/* Context changes only the fictional offer and conversation, never the dataset. */
details #commercial-route { margin-bottom:0; }
.ar-context-picker { padding:0 39px 28px; }
.ar-context-picker >p:first-child { margin:0 0 12px; color:#dbe8ee; font-size:14px; line-height:1.5; }
.ar-context-options { display:flex; flex-wrap:wrap; gap:8px; }
#commercial-route .ar-context-options button { min-height:44px; padding:10px 17px; border:1px solid #53738a; border-radius:7px; background:#152d42; color:#c4d9e6; font:500 14px/1.4 Inter,sans-serif; cursor:pointer; }
#commercial-route .ar-context-options button[aria-pressed="true"] { color:#0a2733; border-color:#90e1d6; background:#90e1d6; }
.ar-context-note { margin:12px 0 0; color:#adc4d5; font-size:13px; line-height:1.6; max-width:70ch; }
.ar-ad-byline >span:nth-child(2) { min-width:0; }
.ar-business-avatar { flex:none; }
@media(max-width:800px) {
 #commercial-route .ar-context-picker { padding:0 24px 27px; }
 #commercial-route .ar-heading >p,
 #commercial-route .ar-story-text,
 #commercial-route .ar-context-note,
 #commercial-route .ar-message-row p,
 #commercial-route .ar-reply,
 #commercial-route .ar-math-notes p { font-size:14px; line-height:1.75; }
 #commercial-route .ar-simulation,
 #commercial-route .ar-eyebrow,
 #commercial-route .ar-node >b,
 #commercial-route .ar-question,
 #commercial-route .ar-stage-metric >span,
 #commercial-route .ar-stage-signal,
 #commercial-route .ar-step-announcement,
 #commercial-route .ar-ad-byline b,
 #commercial-route .ar-ad-byline small,
 #commercial-route .ar-ad-footer >span:first-child,
 #commercial-route .ar-ad-cta,
 #commercial-route .ar-source-note,
 #commercial-route .ar-source-note b,
 #commercial-route .ar-channel-labels >span,
 #commercial-route .ar-channel-labels >small,
 #commercial-route .ar-mini-head >span,
 #commercial-route .ar-mini-head >small,
 #commercial-route .ar-message-row b,
 #commercial-route .ar-message-row small,
 #commercial-route .ar-reply >span,
 #commercial-route .ar-message-math >span:not(:nth-child(2)),
 #commercial-route .ar-lane h5,
 #commercial-route .ar-lane h5 >span,
 #commercial-route .ar-lead-card >span,
 #commercial-route .ar-lead-card b,
 #commercial-route .ar-lead-card small,
 #commercial-route .ar-lead-card em,
 #commercial-route .ar-register-note,
 #commercial-route .ar-sales-counter >span,
 #commercial-route .ar-confirm-seal span,
 #commercial-route .ar-customer-split div >span:not(.ar-split-icon),
 #commercial-route .ar-customer-split small,
 #commercial-route .ar-sale-trace,
 #commercial-route .ar-metric >span,
 #commercial-route .ar-metric small,
 #commercial-route .ar-metric p,
 #commercial-route .ar-math-notes summary { font-size:12px; line-height:1.6; }
 #commercial-route .ar-play { font-size:12px!important; min-height:44px; }
 #commercial-route .ar-direction { min-height:44px; width:44px; }
 #commercial-route .ar-metric { min-width:0; }
 #commercial-route .ar-metric small { overflow-wrap:anywhere; }
 #commercial-route .ar-lead-card { min-width:0; }
 #commercial-route .ar-lead-card em { flex-wrap:wrap; }
 #commercial-route .ar-sales-counter >span { min-width:0; }
 #commercial-route .ar-sale-trace { flex-wrap:wrap; justify-content:flex-start; }
}
@media(max-width:500px) {
 #commercial-route .ar-context-picker { padding:0 20px 26px; }
 #commercial-route .ar-context-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 #commercial-route .ar-context-options button { padding:10px 5px; font-size:12px; }
 #commercial-route .ar-nodes { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:21px; }
 #commercial-route .ar-connection { display:none; }
 #commercial-route .ar-node { gap:8px; }
 #commercial-route .ar-node >b { max-width:100%; text-align:center; }
 #commercial-route .ar-node-icon small { font-size:10px; }
 #commercial-route .ar-lane { grid-template-columns:1fr; gap:8px; }
 #commercial-route .ar-lane h5 { margin:0; }
 #commercial-route .ar-message-math { gap:8px; }
 #commercial-route .ar-message-math >span:not(:nth-child(2)) { flex:1; }
 #commercial-route .ar-reply { margin-left:20px; }
 #commercial-route .ar-sales-counter { gap:9px; }
 #commercial-route .ar-sales-counter >strong { font-size:54px; }
 #commercial-route .ar-confirm-seal { width:70px; height:70px; }
 #commercial-route .ar-metric-grid { grid-template-columns:1fr; gap:12px; }
 #commercial-route .ar-metric { padding:18px; }
 #commercial-route .ar-metric strong { font-size:34px; }
}