/* Scroll-led hero: a quiet work scene with Bay IT operating around it. */
.msp-story { position: relative; overflow: clip; color: var(--ink); background: #eaf5f8; border-bottom: 1px solid #d7e6ed; }
.msp-story-track { position: relative; }
.msp-story-sticky { position: sticky; top: 0; z-index: 1; height: 100svh; min-height: 680px; margin-bottom: -100svh; overflow: clip; background: #eaf5f8; }
.msp-story-sticky::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 18%, #ffffffb8 0, #ffffff00 32%), linear-gradient(110deg, #eaf5f8 0%, #eaf5f8 60%, #e3f2f5 100%); }
.msp-story-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(340px, .92fr) minmax(440px, 1.08fr); align-items: center; gap: clamp(44px, 5.2vw, 100px); width: min(100%, 1600px); min-height: 100%; margin-inline: auto; padding: 132px var(--gutter) 60px; }
.msp-story-copy { min-width: 0; container-type: inline-size; }
.msp-story-copy h1 { max-width: none; margin-top: 0; font-size: min(82px, 13.2cqw); line-height: 1.03; letter-spacing: -.055em; }
.msp-story-copy h1 > span { display: block; }
.msp-story-accent { color: var(--blue); }
.msp-story-copy .lead { max-width: 43ch; margin-top: 28px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; }
.msp-story-copy .actions { margin-top: 32px; }
.msp-story-copy .actions .text-link { font-size: 14px; }
.msp-story-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; margin-top: 44px; }
.msp-story-controls button { display: grid; align-content: start; gap: 9px; min-width: 0; min-height: 44px; padding: 0; color: var(--muted); text-align: left; transition: color .25s var(--ease); }
.msp-story-controls button::before { content: ''; display: block; height: 3px; border-radius: 2px; background: #c3dce4; transition: background .25s var(--ease); }
.msp-story-controls button:hover { color: var(--ink); }
.msp-story-controls button:hover::before { background: #8ebdcc; }
.msp-story-controls button.is-past::before { background: #7fc0d4; }
.msp-story-controls button small { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.msp-story-controls button[aria-selected=true] { color: var(--blue); }
.msp-story-controls button[aria-selected=true]::before { background: var(--blue); }
.msp-story-hint { margin-top: 24px; color: var(--muted); font-size: 12px; }
.msp-story-hint span { padding-left: 5px; color: var(--blue); font-size: 15px; }
.msp-story-stage { min-width: 0; }
.msp-story-visual { position: relative; display: grid; place-items: center; min-height: 530px; }
.msp-story-aura { position: absolute; inset: 4% -14% -8% 4%; opacity: .65; background: radial-gradient(ellipse at center, #d4edf2 0, #eaf5f800 68%); }
.msp-story-surface { position: relative; width: min(100%, 760px); min-height: 454px; padding: 22px 0 20px; }
.msp-device-stage { position: relative; z-index: 1; padding-top: 4px; }
/* Bay IT's mark is three signal arcs. Scaled up they become the canopy the customer's work sits under:
   the source and what it just did at the top, its coverage sweeping the full width, the laptop below. */
.msp-device-stage { position: relative; z-index: 0; }
.msp-canopy { position: relative; width: min(100%, 640px); margin: 0 auto -56px; }
.msp-canopy-source { display: flex; align-items: center; justify-content: center; gap: 14px; padding-inline: 16px; }
.msp-canopy-mark { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border: 1px solid #b7deeb; border-radius: 50%; background: #fff; box-shadow: 0 3px 14px #1a4e611a, 0 0 0 5px #ffffff8c; }
.msp-canopy-mark img { width: 22px; height: 22px; object-fit: contain; }
/* Sized to the widest scene, not to a fixed number. The previous min(100%, 196px) left 155px for
   the label while "Support request handled" needs 156px, so it ellipsised — and a box tuned to a
   1px tolerance was always going to break on a platform whose text metrics differ slightly. The
   scenes cross-fade stacked in one grid cell, so the container takes the width of the longest one
   and every label fits on its own terms. */
.msp-story-scenes { position: relative; display: grid; width: max-content; max-width: 100%; height: 46px; }
.msp-story-scene { grid-area: 1 / 1; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 11px; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .14s ease, transform .14s ease; }
.msp-story-scene.is-active { opacity: 1; pointer-events: auto; transform: none; transition: opacity .26s ease .1s, transform .3s var(--ease) .1s; }
.msp-canopy-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--blue); }
.msp-canopy-icon .icon { width: 25px; height: 25px; stroke-width: 1.3; }
.msp-canopy-icon.action-threat { color: #a36c2d; }
.msp-canopy-icon.action-phishing { color: #8b5d78; }
.msp-canopy-icon.action-support { color: #477685; }
.msp-canopy-text { min-width: 0; }
.msp-canopy-text b { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.msp-canopy-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.msp-canopy-arcs { display: block; width: 100%; height: 230px; margin-top: -4px; mask-image: linear-gradient(90deg, #0000, #000 9%, #000 91%, #0000), linear-gradient(#000 46%, #0000 96%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.msp-canopy-shade { fill: url(#mspCanopyShade); }
.msp-canopy-arc { fill: none; stroke: var(--cyan); stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .45s var(--ease); }
.msp-canopy-arc.arc-1 { stroke-width: 2.5; opacity: 1; }
.msp-canopy-arc.arc-2 { stroke-width: 1.75; opacity: .5; }
.msp-canopy-arc.arc-3 { stroke-width: 1.5; opacity: .28; }
/* A stage change sends one quiet pulse down through the coverage, nearest the source first. */
.msp-canopy.is-pulsing .arc-3 { animation: msp-arc-pulse .85s var(--ease); }
.msp-canopy.is-pulsing .arc-2 { animation: msp-arc-pulse .85s var(--ease) .09s; }
.msp-canopy.is-pulsing .arc-1 { animation: msp-arc-pulse .85s var(--ease) .18s; }
@keyframes msp-arc-pulse { 40% { opacity: .95; stroke-width: 2.4; } }
.msp-laptop { position: relative; z-index: 1; width: min(100%, 575px); margin: 0 auto; padding: 7px 7px 10px; border: 1px solid #6d9baa; border-radius: 12px 12px 4px 4px; background: #244a5a; box-shadow: 0 20px 34px #1a4e6122; }
.msp-laptop-screen { position: relative; container-type: size; overflow: hidden; aspect-ratio: 1.82; border: 1px solid #b8d3db; border-radius: 7px 7px 2px 2px; background: #fbfdfd; }
.msp-app-bar { display: flex; align-items: center; gap: 8px; height: 31px; padding: 0 12px; border-bottom: 1px solid #dae8eb; color: #56727d; background: #fff; font-size: 9px; }
.msp-app-bar b { color: var(--ink); font-size: 10px; font-weight: 500; }
.msp-app-mark { width: 10px; height: 10px; border-radius: 3px; background: #00aeef; }
.msp-app-time { margin-left: auto; color: var(--muted); font-size: 8px; }
.msp-app-body { height: calc(100% - 31px); }
.msp-app-main { min-width: 0; padding: 18px 22px; }
.msp-app-main-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.msp-app-main-head small { color: var(--muted); font-size: 8px; }
.msp-app-main h2 { margin-top: 7px; color: var(--ink); font-size: 20px; line-height: 1.1; }
.msp-app-main p { margin-top: 4px; color: var(--muted); font-size: 9px; }
.msp-app-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #3f7a68; background: #e5f3ed; }
.msp-app-check .icon { width: 14px; height: 14px; stroke-width: 2; }
.msp-sheet { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, .7fr); margin-top: 20px; border-top: 1px solid #dbe8eb; }
.msp-sheet-row { display: contents; }
.msp-sheet-row > span { min-width: 0; overflow: hidden; padding: 9px 8px; border-bottom: 1px solid #e5edef; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.msp-sheet-row:not(.msp-sheet-heading) > span:last-child { color: #3d6952; }
.msp-sheet-row.msp-sheet-heading > span { color: var(--muted); font-weight: 500; background: #f4f8f9; }
.msp-sheet-state { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.msp-sheet-state i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.msp-sheet-action { color: var(--blue); font-weight: 500; }
.msp-sheet-row.is-done > span { color: #5f757e; }
.msp-sheet-row.is-done > span:first-child { text-decoration: line-through; text-decoration-color: #b3c6cd; }
.msp-sheet-state.is-done { color: #3d6952; }
.msp-sheet-row > span { transition: color .3s var(--ease); }
.msp-laptop-base { position: absolute; bottom: -9px; left: -5%; width: 110%; height: 10px; border-radius: 2px 2px 50% 50%; background: linear-gradient(#c7d3d8, #7896a0); }
.msp-laptop-screen { --msp-cursor-x: 81cqw; --msp-cursor-y: 63cqh; }
.msp-app-click { position: absolute; z-index: 2; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1px solid #00aeef; border-radius: 50%; opacity: 0; transform: translate3d(var(--msp-cursor-x),var(--msp-cursor-y),0) scale(.5); }
.msp-app-click.is-clicking { animation: msp-cursor-click .75s ease-out; }
.msp-app-cursor { position: absolute; z-index: 3; left: 0; top: 0; width: 15px; height: 21px; background: #fff; clip-path: polygon(0 0, 100% 67%, 62% 68%, 77% 100%, 61% 100%, 45% 72%, 19% 100%); filter: drop-shadow(0 2px 2px #123e5066); transform: translate3d(var(--msp-cursor-x),var(--msp-cursor-y),0); will-change: transform; transition: transform .6s var(--ease); }
.msp-app-cursor::after { content: ''; position: absolute; inset: 2px; background: var(--deep); clip-path: polygon(0 0, 100% 67%, 62% 68%, 77% 100%, 61% 100%, 45% 72%, 19% 100%); }
@keyframes msp-cursor-click { 0% { opacity: .85; transform: translate3d(var(--msp-cursor-x),var(--msp-cursor-y),0) scale(.5); } 45% { opacity: .5; transform: translate3d(var(--msp-cursor-x),var(--msp-cursor-y),0) scale(1.15); } 100% { opacity: 0; transform: translate3d(var(--msp-cursor-x),var(--msp-cursor-y),0) scale(1.5); } }
.msp-story-triggers { position: relative; z-index: 2; pointer-events: none; }
.msp-story-trigger { height: 50svh; min-height: 0; }
.msp-story-trigger:first-child { height: 60svh; }

@media(max-width:1180px) {
  .msp-story-layout { grid-template-columns: minmax(320px, .88fr) minmax(430px, 1.12fr); gap: 42px; }

  .msp-story-visual { min-height: 480px; }
  .msp-story-surface { min-height: 430px; }
}
@media(max-width:960px) {
  .msp-story-sticky { height: 100svh; min-height: 640px; }
  .msp-story-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 100%; gap: 20px; padding-top: 112px; padding-bottom: 24px; }
  .msp-story-copy h1 { max-width: 15ch; font-size: clamp(40px, 6vw, 58px); }
  .msp-story-copy .lead { max-width: 56ch; margin-top: 18px; }
  .msp-story-copy .actions { margin-top: 24px; }
  .msp-story-controls { margin-top: 22px; }
  .msp-story-hint { display: none; }
  .msp-story-stage { display: grid; align-items: center; justify-self: center; width: min(100%, 720px); min-height: 0; }
  .msp-story-visual { min-height: 0; }
  .msp-story-surface { min-height: 0; padding: 8px 0; }
  .msp-canopy { width: min(100%, 486px); margin-bottom: -44px; }
  .msp-canopy-arcs { height: clamp(140px, 18svh, 164px); }
  .msp-laptop { width: min(100%, 430px); }
  .msp-story-trigger { height: 52svh; }
  .msp-story-trigger:first-child { height: 62svh; }
}
@media(max-width:600px) {
  .msp-story-sticky { height: 100svh; min-height: 600px; margin-bottom: -100svh; }
  .msp-story-layout { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 100%; gap: 16px; padding-top: 116px; padding-bottom: 14px; }
  .msp-story-copy h1 { max-width: none; margin-top: 0; font-size: clamp(34px, 9.4vw, 46px); line-height: 1.06; }
  .msp-story-copy .lead { margin-top: 14px; font-size: 15px; }
  .msp-story-copy .actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 18px; }
  .msp-story-copy .actions .button { width: 100%; justify-content: space-between; }
  .msp-story-copy .actions .text-link { min-height: 44px; }
  .msp-story-controls { gap: 7px; max-width: none; margin-top: 18px; }
  .msp-story-controls button { gap: 7px; }
  .msp-story-controls button small { font-size: 13px; }
  .msp-story-stage { display: grid; align-items: center; width: 100%; min-height: 0; }
  .msp-story-visual { min-height: 0; }
  .msp-story-surface { min-height: 0; padding: 0 0 6px; }
  .msp-canopy { width: min(100%, 364px); margin-bottom: -42px; }
  .msp-canopy-source { gap: 10px; padding-inline: 6px; }
  .msp-canopy-mark { width: 28px; height: 28px; }
  .msp-canopy-mark img { width: 15px; height: 15px; }
  .msp-story-scenes { height: 38px; }
  .msp-story-scene { grid-template-columns: 24px 1fr; gap: 8px; }
  .msp-canopy-icon { width: 24px; height: 24px; }
  .msp-canopy-icon .icon { width: 20px; height: 20px; }
  .msp-canopy-text b { font-size: 12.5px; }
  .msp-canopy-text small { font-size: 11px; }
  .msp-canopy-arcs { height: clamp(100px, 14svh, 118px); margin-top: 0; }
  .msp-laptop { width: min(100%, 330px); padding: 5px 5px 8px; }
  .msp-app-bar { height: 25px; padding-inline: 8px; gap: 5px; }
  .msp-app-bar b { font-size: 8px; }
  .msp-app-mark { width: 8px; height: 8px; }
  .msp-app-body { height: calc(100% - 25px); }
  .msp-laptop-screen { aspect-ratio: 1.6; }
  .msp-app-main { padding: 8px 11px; }
  .msp-app-main-head { gap: 8px; }
  .msp-app-main h2 { margin-top: 3px; font-size: 14px; }
  .msp-app-main p { font-size: 7px; }
  .msp-app-check { width: 18px; height: 18px; }
  .msp-app-check .icon { width: 11px; height: 11px; }
  .msp-sheet { grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, .7fr); margin-top: 8px; }
  .msp-sheet-row > span { padding: 4px; font-size: 7px; }
  .msp-app-cursor { width: 12px; height: 17px; }
  .msp-story-trigger { height: 55svh; min-height: 0; }
  .msp-story-trigger:first-child { height: 66svh; }
}
@media(prefers-reduced-motion:reduce) {
  .msp-story-scene, .msp-story-scene.is-active, .msp-story-controls button { transform: none; transition: none; }
  .msp-sheet-row > span, .msp-app-cursor { transition: none; }
  .msp-app-click { display: none; }
}

@media(max-height:720px) and (max-width:960px) {
  .msp-story-sticky { position: static; height: auto; min-height: 0; margin-bottom: 0; overflow: visible; }
  .msp-story-layout { min-height: 0; padding-top: 34px; padding-bottom: 40px; }
  .msp-story-triggers { display: none; }
  .msp-story-hint { display: none; }
}