body[data-view="canvas"] {
  --page: #f7f8fb;
  --surface: #fff;
  --ink: #101b2c;
  --muted: #536175;
  --line: #dbe3ef;
  --blue: #1d60d1;
  --wash: #eaf1ff;
}
[data-view="canvas"] .review-bar { padding: 8px 36px; font-size: 10px; }
[data-view="canvas"] .site-header { height: 78px; border-bottom: 0; }
[data-view="canvas"] .header-cta { background: var(--blue); border-color: transparent; color: var(--on-blue); }
[data-view="canvas"] .shell { width: min(1280px, calc(100% - 80px)); }
[data-view="canvas"] .canvas-opening {
  display: block;
  padding: 28px 0 0;
  min-height: 0;
  isolation: isolate;
}
.canvas-copy { text-align: center; position: relative; z-index: 2; }
.canvas-copy .location { font-size: 10px; letter-spacing: .12em; margin-bottom: 18px; }
.canvas-copy h1 {
  font-size: clamp(43px, 5.25vw, 76px);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: -.055em;
  max-width: 1100px;
  margin: 0 auto;
}
.canvas-body { max-width: 720px; margin: 18px auto 0; font-size: 19px; line-height: 1.5; color: var(--muted); }
.canvas-actions { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 22px; flex-wrap: wrap; }
.canvas-actions .button { padding: 17px 24px; border-radius: 9px; gap: 35px; }
.canvas-secondary { display: inline-flex; align-items: center; gap: 27px; border: 1px solid var(--line); border-radius: 9px; padding: 17px 23px; font-size: 14px; background: var(--surface); line-height: 1.2; }
.canvas-secondary span { font-size: 19px; line-height: 1; }
.canvas-secondary:hover { border-color: var(--blue); color: var(--blue); }
.canvas-call { color: var(--muted); font-size: 10px; margin-top: 11px; }
.business-canvas {
  position: relative;
  margin-top: 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.business-canvas::before {
  content: "";
  position: absolute;
  inset: 35px 0 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 53%, #c8d9fb55, transparent 65%);
  pointer-events: none;
}
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 3px; }
.canvas-toolbar>p { font-size: 11px; color: var(--muted); }
.canvas-controls { display: flex; align-items: center; gap: 14px; }
.canvas-motion-toggle { border: 0; background: none; color: var(--muted); font-size: 10px; min-height: 32px; padding: 7px 5px; text-decoration: underline; text-underline-offset: 4px; }
.canvas-motion-toggle:hover { color: var(--blue); }
.canvas-switch { display: flex; align-items: center; padding: 3px; background: #e9eef7; border-radius: 7px; gap: 2px; }
.canvas-switch button { border: 0; background: none; padding: 9px 13px; color: var(--muted); font-size: 10px; border-radius: 5px; min-height: 32px; }
.canvas-switch button[aria-pressed="true"] { color: var(--blue); background: var(--surface); box-shadow: 0 2px 6px #193d7510; }
.canvas-stage { height: 230px; position: relative; margin: 8px 0 15px; }
.canvas-routes { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; }
.canvas-routes path { stroke: #98b7ee; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .5s; }
.canvas-packet { fill: var(--blue); pointer-events: none; }
.canvas-routes .canvas-route-active { stroke: var(--blue); stroke-width: 1.8; opacity: 0; }
.canvas-flow-examples { display: none; }
.canvas-mobile-packet { display: none; pointer-events: none; }
.canvas-tools { position: absolute; inset: 0; }
.canvas-tool {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 76px;
  height: 76px;
  border: 0;
  background: none;
  padding: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: transform .55s, opacity .55s;
  z-index: 2;
}
.canvas-tool>span { display: grid; place-items: center; width: 52px; height: 52px; background: var(--surface); border: 1px solid #d5e0f0; border-radius: 14px; box-shadow: 0 9px 17px #2c51810a, inset 0 -3px 0 #e9eef655; transition: border-color .2s, box-shadow .2s; }
.canvas-tool img { width: 29px; height: 29px; object-fit: contain; }
.canvas-tool small { font-size: 9px; color: var(--muted); }
.canvas-tool:hover>span, .canvas-tool[aria-pressed="true"]>span { border-color: var(--blue); box-shadow: 0 5px 16px #245dcb18; }
.canvas-core { width: 232px; height: 100px; position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); z-index: 3; border-radius: 22px; background: #1d60d1; color: #fff; border: 1px solid #1d60d1; box-shadow: 0 13px 25px #235ecd24, inset 0 1px 0 #ffffff50; transition: color .4s, background .4s, box-shadow .4s; }
.core-connected, .core-separate { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.core-sas { font-size: 12px; font-weight: 650; letter-spacing: .13em; opacity: .85; margin-bottom: 9px; }
.canvas-core strong { font-size: 23px; letter-spacing: -.045em; font-weight: 550; line-height: 1.2; }
.canvas-core small { font-size: 10px; margin-top: 7px; }
.core-separate { display: none; }
.core-separate>span { font-size: 26px; line-height: 1; margin-bottom: 7px; }
.core-separate strong { font-size: 18px; }
.business-canvas figcaption { text-align: center; }
#canvas-message { font-size: 14px; letter-spacing: -.015em; font-weight: 550; }
#canvas-tool-note { font-size: 10px; min-height: 17px; margin-top: 7px; color: var(--muted); }
[data-state="separate"] .canvas-routes path { opacity: 0; }
[data-state="separate"] .canvas-packet { visibility: hidden; }
[data-state="separate"] .canvas-tool { transform: translate(-50%, -50%) rotate(var(--tilt)); }
[data-state="separate"] .canvas-core { background: transparent; color: var(--muted); border: 1px dashed #91a8cb; box-shadow: none; }
[data-state="separate"] .core-connected { display: none; }
[data-state="separate"] .core-separate { display: flex; }
[data-view="canvas"] .capabilities { border-top: 0; padding: 26px 0; }
:root[data-theme="dark"] body[data-view="canvas"] { --page: #111925; --surface: #1b293b; --ink: #eef4ff; --muted: #aebed4; --line: #34455c; --blue: #8db8ff; --wash: #223a5e; }
:root[data-theme="dark"] .canvas-switch { background: #25364f; }
:root[data-theme="dark"] .canvas-tool>span { border-color: #425878; box-shadow: 0 7px 15px #0002; background: #f0f4fa; }
:root[data-theme="dark"] .canvas-routes path { stroke: #567bb4; }
@media(min-width:1450px) { .canvas-stage { height: 250px; } .canvas-opening { padding-top: 40px!important; } }
@media(max-width:1000px) {
  [data-view="canvas"] .shell { width: calc(100% - 56px); }
  [data-view="canvas"] .site-header { padding-inline: 28px; }
  .canvas-copy h1 { font-size: clamp(43px, 5.5vw, 57px); }
  .canvas-body { font-size: 17px; max-width: 630px; }
  .canvas-tool { width: 62px; height: 66px; }
  .canvas-tool>span { width: 44px; height: 44px; border-radius: 12px; }
  .canvas-tool img { width: 25px; height: 25px; }
  .canvas-tool small { font-size: 8px; }
  .canvas-core { width: 198px; height: 112px; }
  .canvas-core strong { font-size: 21px; }
  .canvas-stage { height: 250px; }
}
@media(max-width:700px) {
  [data-view="canvas"] .review-bar { padding: 9px 20px; }
  [data-view="canvas"] .review-bar a { display: none; }
  [data-view="canvas"] .site-header { height: 70px; padding-inline: 20px; }
  [data-view="canvas"] .shell { width: calc(100% - 40px); }
  [data-view="canvas"] .canvas-opening { padding-top: 31px; }
  .canvas-copy .location { font-size: 9px; letter-spacing: .07em; margin-bottom: 20px; }
  .canvas-copy h1 { font-size: clamp(37px, 8.4vw, 55px); line-height: 1.07; }
  .canvas-copy h1 br { display: none; }
  .canvas-body { font-size: 16px; line-height: 1.55; margin-top: 23px; }
  .canvas-actions { gap: 12px; margin-top: 23px; }
  .canvas-actions .button, .canvas-secondary { font-size: 12px; padding: 16px 17px; gap: 19px; }
  .canvas-call { font-size: 9px; max-width: 260px; margin: 14px auto 0; }
  .business-canvas { margin-top: 33px; padding-bottom: 23px; }
  .canvas-toolbar { justify-content: center; }
  .canvas-toolbar>p { display: none; }
  .canvas-controls { flex-wrap: wrap; justify-content: center; gap: 5px 12px; }
  .canvas-motion-toggle { order: 2; }
  .canvas-switch button { padding: 12px 14px; font-size: 10px; min-height: 38px; }
  .canvas-stage { height: auto; margin-top: 22px; padding: 0 1px; }
  .canvas-routes { display: none; }
  .canvas-tools { position: relative; display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); row-gap: 13px; }
  .canvas-tool { position: relative; top: auto; left: auto; width: 100%; height: 60px; transform: none; gap: 6px; grid-column: span 2; }
  .canvas-tool:nth-child(11) { grid-column: 2 / span 2; }
  .canvas-tool:nth-child(12) { grid-column: 4 / span 2; }
  .canvas-tool:nth-child(13) { grid-column: 6 / span 2; }
  .canvas-tool:nth-child(14) { grid-column: 8 / span 2; }
  .canvas-tool>span { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 6px 12px #2c51810a; }
  .canvas-tool img { width: 22px; height: 22px; }
  .canvas-tool small { font-size: 9px; letter-spacing: -.025em; }
  .canvas-core { position: relative; top: auto; left: auto; transform: none; margin: 24px auto 0; height: 108px; width: 222px; }
  .canvas-core::before { content:""; position: absolute; height: 24px; width: 1px; background: #98b7ee; bottom: 100%; left: 50%; }
  .canvas-mobile-packet { display: block; position: absolute; top: -24px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: 0; }
  .core-sas { margin-bottom: 7px; }
  .canvas-core strong { font-size: 22px; }
  [data-state="separate"] .canvas-tool { transform: rotate(var(--tilt)); }
  [data-state="separate"] .canvas-core::before { opacity: 0; }
  #canvas-message { font-size: 12px; }
  #canvas-tool-note { font-size: 9px; min-height: 28px; }
}
@media(max-width:360px) {
  .canvas-copy h1 { font-size: 34px; }
  .canvas-tool>span { width: 31px; height: 31px; border-radius: 9px; }
  .canvas-tool img { width: 19px; height: 19px; }
  .canvas-tool small { font-size: 8px; }
  .canvas-switch button { padding-inline: 11px; }
}
@media(prefers-reduced-motion:reduce) {
  .canvas-tool, .canvas-core, .canvas-routes path { transition: none; }
  .canvas-packet, .canvas-mobile-packet, .canvas-motion-toggle { display: none; }
}
@media(prefers-reduced-motion:no-preference) {
  .canvas-copy>* { animation: canvas-enter .7s cubic-bezier(.16,1,.3,1) both; }
  .canvas-copy h1 { animation-delay: .06s; }
  .canvas-body { animation-delay: .14s; }
  .canvas-actions { animation-delay: .22s; }
  .canvas-call { animation-delay: .28s; }
  .canvas-tool>span { position: relative; }
  .canvas-tool>span::after { content:""; position:absolute; inset:-5px; border:1px solid var(--blue); border-radius:inherit; box-shadow:0 0 0 5px #2b65d014; opacity:0; pointer-events:none; }
  .flow-source>span { animation:canvas-source 10.8s ease-in-out var(--flow-delay) infinite; }
  .flow-target>span { animation:canvas-target 10.8s ease-in-out var(--flow-delay) infinite; }
  .flow-source>span::after { animation:canvas-source-halo 10.8s linear var(--flow-delay) infinite; }
  .flow-target>span::after { animation:canvas-target-halo 10.8s linear var(--flow-delay) infinite; }
  .route-in { animation:canvas-incoming 10.8s linear var(--flow-delay) infinite; }
  .route-out { animation:canvas-outgoing 10.8s linear var(--flow-delay) infinite; }
  .canvas-core::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--blue); border-radius: inherit; pointer-events: none; opacity: 0; animation: canvas-receive 3.6s ease-out infinite; }
  .canvas-mobile-packet { animation: canvas-mobile-flow 3.6s linear infinite; }
  .canvas-mobile-packet.mobile-return { animation-name:canvas-mobile-return; }
  .canvas-flow-examples { display:grid; height:38px; margin-top:10px; }
  .canvas-flow-examples>span { grid-area:1/1; font-size:12px; color:var(--blue); opacity:0; animation:canvas-flow-label 10.8s linear var(--flow-delay) infinite; }
  .canvas-flow-examples small { display:block; text-transform:uppercase; letter-spacing:.08em; font-size:8px; color:var(--muted); margin-bottom:5px; }
  [data-motion="paused"] .canvas-tool>span,
  [data-motion="paused"] .canvas-tool>span::after,
  [data-motion="paused"] .canvas-route-active,
  [data-motion="paused"] .canvas-flow-examples>span,
  [data-motion="paused"] .canvas-core::after,
  [data-motion="paused"] .canvas-mobile-packet { animation-play-state: paused; }
  [data-state="separate"] .canvas-core::after { visibility: hidden; }
  [data-state="separate"] .canvas-mobile-packet { visibility: hidden; }
  [data-state="separate"] .canvas-flow-examples { visibility:hidden; }
  [data-state="separate"] .canvas-tool>span::after { visibility:hidden; }
  @keyframes canvas-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes canvas-source { 0%,14%,100% { transform:translateY(0) scale(1); } 3%,8% { transform:translateY(-5px) scale(1.06); } }
  @keyframes canvas-target { 0%,19%,33%,100% { transform:translateY(0) scale(1); } 23%,28% { transform:translateY(-5px) scale(1.06); } }
  @keyframes canvas-source-halo { 0%,14%,100% { opacity:0; } 3%,8% { opacity:.8; } }
  @keyframes canvas-target-halo { 0%,19%,33%,100% { opacity:0; } 23%,28% { opacity:.8; } }
  @keyframes canvas-incoming { 0%,13%,100% { opacity:0; } 2%,10% { opacity:.9; } }
  @keyframes canvas-outgoing { 0%,14%,27%,100% { opacity:0; } 16%,24% { opacity:.9; } }
  @keyframes canvas-receive { 0%,23%,100% { transform:scale(.99); opacity:0; } 27% { opacity:.65; } 65% { transform:scale(1.15); opacity:0; } }
  @keyframes canvas-flow-label { 0%,32%,100% { opacity:0; transform:translateY(3px); } 3%,29% { opacity:1; transform:translateY(0); } }
  @keyframes canvas-mobile-flow { 0%,35%,100% { transform:translate(-50%,0); opacity:0; } 8% { opacity:1; } 32% { transform:translate(-50%,24px); opacity:0; } }
  @keyframes canvas-mobile-return { 0%,42%,82%,100% { transform:translate(-50%,24px); opacity:0; } 46% { opacity:1; } 78% { transform:translate(-50%,0); opacity:0; } }
}