/* Home page motion. One easing family, transforms and opacity where possible,
   and every effect rests at its end state under reduced motion. */
body:has(.sq-home) {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --m-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.8%, 1.051 22.6%, 1.059 25.3%, 1.049 28.6%, 1.012 36.4%, 0.996 41.9%, 0.995 49.6%, 1.001 63.7%, 1);
  --sq-map-dot: rgba(107, 102, 93, 0.24);
}
:root[data-theme='dark'] body:has(.sq-home) { --sq-map-dot: rgba(204, 199, 186, 0.17); }

/* ---- Hero arrival: lines resolve from a soft blur; the product frame settles.
   The frame never starts transparent, so it does not delay LCP. */
.sq-intro > *, .sq-intro .sq-line { animation: sq-rise 900ms var(--m-ease) var(--d, 0ms) both; }
.sq-intro > h1 { animation: none; }
.sq-intro .sq-line { display: inline-block; --rise: 22px; --blur: 10px; }
.sq-intro .sq-line:first-child { --d: 60ms; }
.sq-intro .sq-line:last-child { --d: 170ms; }
.sq-intro-copy { --d: 320ms; }
.sq-intro > .sq-actions { --d: 440ms; }
.sq-intro > .sq-fine-print { --d: 540ms; }
.sq-intro > .check-location-summary { --d: 600ms; }
@keyframes sq-rise { from { opacity: 0; transform: translateY(var(--rise, 10px)); filter: blur(var(--blur, 6px)); } }

.sq-product { transform-origin: 50% 0; animation: sq-product-in 1300ms var(--m-ease) 150ms both; }
@keyframes sq-product-in { from { transform: perspective(1600px) translateY(56px) rotateX(7deg) scale(0.985); } }

/* The announcement's route icon draws itself, then its label catches the light once. */
.sq-announcement > .ico:first-child > * { stroke-dasharray: 1; animation: sq-draw 800ms var(--m-ease-io) both; }
.sq-announcement > .ico:first-child > :nth-child(1) { animation-delay: 450ms; }
.sq-announcement > .ico:first-child > :nth-child(3) { animation-delay: 650ms; }
.sq-announcement > .ico:first-child > :nth-child(2) { animation-delay: 850ms; }
@keyframes sq-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sq-announcement > span {
    background: linear-gradient(100deg, var(--stone) 42%, var(--ink) 50%, var(--stone) 58%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: sq-shimmer 1500ms var(--m-ease-io) 1300ms both;
  }
  .sq-announcement:hover > span { color: var(--ink); }
}
@keyframes sq-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---- Product tour: tabs advance behind a progress line; the next view resolves. */
.sq-tab-list button { position: relative; }
.sq-tab-list button::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--clay); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.sq-product.is-touring .sq-tab-list button[aria-selected="true"]::after { opacity: 1; animation: sq-tour-progress 5200ms linear forwards; }
.sq-product.is-touring:is(:hover, :focus-within, .is-paused) .sq-tab-list button::after { animation-play-state: paused; }
@keyframes sq-tour-progress { to { transform: scaleX(1); } }

/* The selected background slides between tabs. */
.sq-tab-list.has-indicator { position: relative; }
.sq-tab-list.has-indicator button { z-index: 1; }
.sq-tab-list.has-indicator button[aria-selected="true"] { background: transparent; }
.sq-tab-indicator {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px; background: var(--sq-tab-on); pointer-events: none;
  transition: transform 460ms var(--m-spring), width 460ms var(--m-spring);
}

.sq-product-image { overflow: hidden; }
.sq-product-panel.is-entering { animation: none; }
.sq-product-panel.is-entering .sq-product-image img { animation: sq-img-in 760ms var(--m-ease) both; }
.sq-product-panel.is-entering .sq-product-caption :is(strong, p > span, .sq-text-link) { animation: sq-cap-in 560ms var(--m-ease) both; }
.sq-product-panel.is-entering .sq-product-caption p > span { animation-delay: 70ms; }
.sq-product-panel.is-entering .sq-product-caption .sq-text-link { animation-delay: 140ms; }
@keyframes sq-img-in { from { opacity: 0; filter: blur(10px); transform: scale(1.015); } }
@keyframes sq-cap-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- Links: the underline draws in; "Explore the platform" points down. */
.sq-link-text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 360ms var(--m-ease); }
.sq-text-link:is(:hover, :focus-visible) .sq-link-text { background-size: 100% 1px; }
.sq-intro .sq-text-link .ico { transition: transform 260ms var(--m-ease); }
.sq-intro .sq-text-link:hover .ico { transform: translateY(3px); }

/* ---- Section intros: headings rise line by line; the copy lights word by word on scroll. */
.sq-h-rise .sq-h-line {
  display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity 800ms var(--m-ease), transform 800ms var(--m-ease), filter 800ms var(--m-ease);
  transition-delay: var(--d, 0ms);
}
.sq-h-rise.is-in .sq-h-line { opacity: 1; transform: none; filter: none; }
.sq-w { opacity: 0.24; transition: opacity 260ms linear; }
.sq-w.is-lit { opacity: 1; }

/* ---- Check-location map. */
.sq-map { padding: 84px 0 88px; border-top: 1px solid var(--sq-line); }
.sq-map-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.sq-map h2 { font-size: 42px; line-height: 1.18; font-weight: 700; text-wrap: balance; }
.sq-map-copy > p { margin: 22px 0 18px; max-width: 440px; font-size: 16px; line-height: 1.75; color: var(--stone); }
.sq-map-log { margin-top: 30px; font: 400 12px/1 var(--font-mono); color: var(--stone); }
.sq-map-log-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; font-size: 10px; }
.sq-map-log-head > span:last-child { color: var(--stone); }
.sq-map-log-head .sq-mono { color: var(--stone); }
.sq-map-rows {
  height: 168px; overflow: hidden; border-top: 1px solid var(--sq-line);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
}
.sq-map-row { display: grid; grid-template-columns: 74px 1fr 56px 58px; gap: 10px; align-items: center; height: 33px; border-bottom: 1px solid var(--sq-line); }
.sq-map-row.is-new { animation: sq-row-in 520ms var(--m-ease) both; }
.sq-map-row > span:nth-child(2) { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-map-row > span:nth-child(3) { color: var(--sage); }
.sq-map-row > span:nth-child(4) { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes sq-row-in { from { opacity: 0; transform: translateY(-10px); margin-top: -33px; } }
.sq-map-art { position: relative; aspect-ratio: 2 / 1.02; }
.sq-map-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq-map-label {
  position: absolute; left: 0; top: 0; font: 500 11px/1 var(--font-mono); color: var(--ink); white-space: nowrap; pointer-events: none;
  background: var(--sq-paper); border: 1px solid var(--sq-edge); border-radius: 4px; padding: 5px 7px;
  opacity: 0; transform: translateY(-6px); transition: opacity 260ms var(--m-ease), transform 420ms var(--m-ease);
}
.sq-map-label.is-on { opacity: 1; transform: translateY(-10px); }
.sq-map-label b { color: var(--sage); font-weight: 600; margin-right: 6px; }
html:not(.js) .sq-map-art, html:not(.js) .sq-map-log { display: none; }
html:not(.js) .sq-map-layout { grid-template-columns: 1fr; }

/* ---- AI section: a trace builds itself as a playhead sweeps the request. */
.sq-ai-layout > * { min-width: 0; }
.sq-trace { margin-bottom: 30px; border: 1px solid var(--sq-line); border-radius: 8px; background: var(--sq-paper); padding: 18px 20px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.sq-trace-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--sq-line); white-space: nowrap; }
.sq-trace-head b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.sq-trace-total { color: var(--ink); font-variant-numeric: tabular-nums; }
.sq-trace-body { position: relative; }
.sq-trace-row { display: grid; grid-template-columns: 168px 1fr 62px; gap: 12px; align-items: center; height: 27px; }
.sq-trace-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.sq-trace-track { position: relative; height: 8px; }
.sq-trace-bar { position: absolute; top: 0; height: 8px; border-radius: 2px; background: var(--c); transform-origin: 0 50%; }
.sq-trace-bar.is-slowest { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); transition: box-shadow 400ms; }
.sq-trace-dur { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; transition: opacity 300ms; }
.sq-trace-playhead { position: absolute; top: -4px; bottom: -4px; left: 0; width: 1px; background: var(--ink); opacity: 0; transition: opacity 400ms; }
.sq-trace-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sq-line); white-space: nowrap; }
.sq-trace-slow { color: var(--clay); transition: opacity 400ms; }
.sq-trace.is-playing .sq-trace-playhead { opacity: 0.55; }
.sq-trace.is-playing .sq-trace-dur:not(.is-done), .sq-trace.is-playing .sq-trace-slow { opacity: 0; }
.sq-trace.is-playing .sq-trace-bar.is-slowest { box-shadow: none; }

/* ---- "A clear view": rules draw down, content settles, each icon acts out its job. */
.sq-capabilities.has-motion .sq-rise { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--m-ease), transform 700ms var(--m-ease); transition-delay: var(--d, 0ms); }
.sq-capabilities.has-motion article.is-in .sq-rise { opacity: 1; transform: none; }
@media (min-width: 761px) {
  .sq-capabilities.has-motion .sq-capability-grid article { position: relative; border-left-color: transparent; }
  .sq-capabilities.has-motion .sq-capability-grid article + article::before {
    content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--sq-line);
    transform: scaleY(0); transform-origin: 50% 0; transition: transform 1100ms var(--m-ease-io) var(--ld, 0ms);
  }
  .sq-capabilities.has-motion .sq-capability-grid article + article.is-in::before { transform: none; }
}
.sq-capability-icon svg { overflow: visible; }
.sq-capability-icon svg * { transform-box: fill-box; transform-origin: center; }
.sq-icon-target .sq-ping { opacity: 0; }
.is-acting .sq-icon-target .sq-ping { animation: sq-ping 1300ms var(--m-ease); }
.is-acting .sq-icon-target circle:nth-child(3) { animation: sq-pop 700ms var(--m-ease) 80ms; }
@keyframes sq-ping { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sq-pop { 40% { transform: scale(1.18); } }
.is-acting .sq-icon-layers path:nth-child(1) { animation: sq-lift-1 900ms var(--m-spring); }
.is-acting .sq-icon-layers path:nth-child(2) { animation: sq-lift-2 900ms var(--m-spring) 70ms; }
.is-acting .sq-icon-layers path:nth-child(3) { animation: sq-lift-3 900ms var(--m-spring) 140ms; }
@keyframes sq-lift-1 { 35% { transform: translateY(-3.2px); } }
@keyframes sq-lift-2 { 35% { transform: translateY(-1.6px); } }
@keyframes sq-lift-3 { 35% { transform: translateY(-0.5px); } }
.is-acting .sq-icon-eye path { animation: sq-blink 520ms var(--m-ease-io); }
.is-acting .sq-icon-eye circle { animation: sq-glance 1500ms var(--m-ease-io) 380ms; }
@keyframes sq-blink { 45% { transform: scaleY(0.08); } }
@keyframes sq-glance { 25% { transform: translateX(-2.4px); } 60% { transform: translateX(2.4px); } }
.sq-capability-grid li .ico { transition: transform 200ms var(--m-ease), color 200ms; }
.sq-capability-grid li a:hover .ico { transform: translate(2px, -2px); color: var(--clay); }

/* ---- "Less noise": jittery signals converge into one calm line. */
.sq-calm { display: none; position: relative; height: 150px; margin: -18px 0 40px; }
.js .sq-calm { display: block; }
.sq-calm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sq-calm-noise path { fill: none; stroke-width: 1.2; stroke-linejoin: round; opacity: 0.55; }
.sq-calm-line { fill: none; stroke: #e98c73; stroke-width: 1.5; }
.sq-calm-node { fill: #e98c73; transition: opacity 400ms; }
.sq-calm-ring { fill: none; stroke: #e98c73; stroke-width: 1; opacity: 0; }
.sq-calm-axis { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--sq-r-line); }
.sq-calm-tag { position: absolute; right: 0; top: 18px; display: flex; align-items: center; gap: 7px; font: 400 10px/1 var(--font-mono); color: #b8c1b8; opacity: 0; transition: opacity 600ms 2200ms; }
.sq-calm-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b6d6a8; }
.sq-calm.is-on .sq-calm-tag { opacity: 1; }

/* ---- Incident story: the response tour plays itself once it is in view. */
.sq-response-steps button { position: relative; }
.sq-response-steps button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #e98c73;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.sq-response-steps button.is-running::after { animation: sq-step-run var(--step, 6000ms) linear forwards; }
@keyframes sq-step-run { to { transform: scaleX(1); } }
.sq-response-panel.is-entering { animation: sq-panel-in 420ms var(--m-ease); }
@keyframes sq-panel-in { from { opacity: 0; transform: translateY(6px); } }

/* New checks push in from the right: the track slides one bar, then recycles the first. */
.sq-signal-bars.has-track { gap: 0; overflow: hidden; }
.sq-bars-track { display: flex; align-items: flex-end; flex: none; height: 100%; width: calc(100% * 45 / 44); }
.sq-bars-track.is-sliding { transform: translateX(calc(-100% / 45)); transition: transform 400ms linear; }
.sq-bars-track i { flex: 1 1 0; min-width: 0; margin-right: 4px; transition: background-color 300ms; }
.sq-signal-bars.has-track i { animation: none !important; }
.sq-event-row.is-hidden { opacity: 0; transform: translateY(6px); }
.sq-event-row.is-shown { transition: opacity 420ms var(--m-ease), transform 420ms var(--m-ease); }
.sq-status { transition: opacity 180ms, filter 180ms; }
.sq-status.is-swapping { opacity: 0; filter: blur(3px); }
.sq-response-story .sq-status--amber::before { animation: sq-blip 1100ms ease-in-out infinite; }
@keyframes sq-blip { 50% { opacity: 0.35; } }

/* The alert lands with a small spring and the bell swings once; channels tick off. */
.sq-notification.is-arriving { animation: sq-arrive 760ms var(--m-spring) both; }
.sq-notification.is-arriving > .ico { transform-origin: 50% 10%; animation: sq-swing 900ms var(--m-ease) 200ms; }
.sq-notification.is-waiting { opacity: 0; }
@keyframes sq-arrive { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
@keyframes sq-swing { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.sq-response-story .sq-channel-row span { display: inline-flex; align-items: center; gap: 7px; opacity: 0.4; transition: opacity 300ms; }
.sq-response-story .sq-channel-row span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #5d665d; transition: background-color 300ms, box-shadow 300ms; }
.sq-response-story .sq-channel-row span.is-sent { opacity: 1; }
.sq-response-story .sq-channel-row span.is-sent::before { background: #b6d6a8; box-shadow: 0 0 0 3px #b6d6a826; }

/* Status text flips like a split-flap: the old value rises out, the new one rises in. */
.sq-flip { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.sq-flip > span { grid-area: 1 / 1; text-align: right; }
.sq-flip > .is-out { animation: sq-flip-out 420ms var(--m-ease) forwards; }
.sq-flip > .is-in { animation: sq-flip-in 420ms var(--m-ease) both; }
@keyframes sq-flip-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes sq-flip-in { from { transform: translateY(100%); opacity: 0; } }

/* ---- Start: a monitor is typed in, created, and its checks keep landing. */
.sq-new { min-width: 0; border: 1px solid var(--sq-line); border-radius: 8px; background: var(--sq-paper); box-shadow: var(--sq-shadow); padding: 22px 22px 18px; font-size: 11px; color: var(--stone); }
.sq-new-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--ink); }
.sq-new-up { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--sage); transition: opacity 300ms, transform 300ms var(--m-ease); }
.sq-new-up::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.sq-new-up.is-hidden { opacity: 0; transform: translateY(4px); }
.sq-new-label { display: block; margin-bottom: 7px; }
.sq-new-input { display: flex; align-items: center; height: 42px; padding: 0 12px; overflow: hidden; white-space: nowrap; border: 1px solid var(--sq-edge); border-radius: 6px; background: var(--sq-paper); font: 500 13px var(--font-mono); color: var(--ink); transition: border-color 200ms, box-shadow 200ms; }
:root[data-theme='dark'] .sq-new-input { background: var(--canvas); }
.sq-new-input.is-focus { border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent); }
.sq-new-ph, .sq-new-caret { display: none; }
.sq-new.is-empty .sq-new-ph { display: inline; color: var(--stone); opacity: 0.6; }
.sq-new-input.is-focus .sq-new-caret { display: block; flex: none; width: 1.5px; height: 17px; margin-left: 1px; background: var(--clay); animation: sq-caret 1.05s steps(1) infinite; }
@keyframes sq-caret { 50% { opacity: 0; } }
.sq-new-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.sq-new-meta { display: flex; gap: 14px; }
.sq-new-btn { padding: 9px 15px; border-radius: var(--r-md); background: var(--clay); color: var(--canvas); font-size: 13px; font-weight: 700; line-height: 1.2; transition: transform 140ms var(--m-ease), filter 200ms; }
:root[data-theme='dark'] .sq-new-btn { background: #E0613F; color: #1A1816; }
.sq-new-btn.is-press { transform: scale(0.96); filter: brightness(0.92); }
.sq-new-checks { margin-top: 16px; border-top: 1px solid var(--sq-line); font: 400 12px var(--font-mono); }
.sq-new-check { display: grid; grid-template-columns: 14px 1fr auto 64px; gap: 10px; align-items: center; height: 36px; border-bottom: 1px solid var(--sq-line); }
.sq-new-check > span:first-child { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.sq-new-check > span:first-child::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--sage); opacity: 0; }
.sq-new-check.is-ping > span:first-child::after { animation: sq-new-ping 900ms var(--m-ease); }
@keyframes sq-new-ping { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.sq-new-check > span:nth-child(2) { color: var(--ink); }
.sq-new-check > span:nth-child(3) { color: var(--sage); }
.sq-new-check > span:nth-child(4) { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.sq-new-check.is-hidden { opacity: 0; transform: translateY(6px); }
.sq-new-check.is-shown { transition: opacity 380ms var(--m-ease), transform 380ms var(--m-ease); }
.sq-new-strip { display: flex; height: 22px; margin-top: 14px; overflow: hidden; }
.sq-new-track { display: flex; flex: none; width: calc(100% * 41 / 40); }
.sq-new-track i { flex: 1 1 0; min-width: 0; margin-right: 3px; border-radius: 2px; background: var(--sq-line); transition: background-color 300ms; }
.sq-new-track i.is-up { background: var(--sage); }
.sq-new-track.is-sliding { transform: translateX(calc(-100% / 41)); transition: transform var(--slide, 400ms) linear; }
.sq-new-foot { display: flex; justify-content: space-between; margin-top: 8px; }

/* ---- Switch row: the tool name rotates in the heading and its link lights in step. */
.sq-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; white-space: nowrap; transition: width 520ms var(--m-ease); }
.sq-rot > span { grid-area: 1 / 1; }
.sq-rot b { color: var(--clay); }
#sq-switch-title b { font-weight: inherit; }
#sq-switch-title { position: relative; }
.sq-rot-measure { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.sq-rot > .is-out { animation: sq-rot-out 520ms var(--m-ease) forwards; }
.sq-rot > .is-in { animation: sq-rot-in 520ms var(--m-ease) both; }
@keyframes sq-rot-out { to { transform: translateY(-90%); opacity: 0; filter: blur(4px); } }
@keyframes sq-rot-in { from { transform: translateY(90%); opacity: 0; filter: blur(4px); } }
.sq-switch-links a { transition: color 300ms; }
.sq-switch-links a .ico { transition: transform 300ms var(--m-ease); }
.sq-switch-links a.is-on { color: var(--clay); }
.sq-switch-links a.is-on .ico { transform: translate(2px, -2px); }

@media (max-width: 1100px) {
  .sq-map-layout { gap: 40px; }
  .sq-map h2 { font-size: 36px; }
}
@media (max-width: 760px) {
  .sq-map { padding: 56px 0 60px; }
  .sq-map-layout { grid-template-columns: 1fr; gap: 28px; }
  .sq-map h2 { font-size: 34px; }
  .sq-map-log { margin-top: 24px; }
  .sq-map-rows { height: 134px; }
  .sq-trace { padding: 14px 14px 12px; font-size: 10px; }
  .sq-trace-row { grid-template-columns: 132px 1fr 46px; gap: 8px; }
  .sq-calm { height: 110px; margin: -10px 0 28px; }
  .sq-new { padding: 18px 16px 14px; }
}
@media (max-width: 480px) {
  .sq-map h2 { font-size: 30px; }
  .sq-map-row { grid-template-columns: 64px 1fr 50px 52px; gap: 8px; font-size: 11px; }
  .sq-trace-row { grid-template-columns: 124px 1fr 44px; }
  .sq-new-input { font-size: 12px; }
  .sq-new-check { grid-template-columns: 10px 1fr auto 56px; gap: 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sq-intro > *, .sq-intro .sq-line, .sq-product, .sq-announcement > .ico:first-child > *, .sq-announcement > span,
  .sq-product-panel.is-entering .sq-product-image img, .sq-product-panel.is-entering .sq-product-caption :is(strong, p > span, .sq-text-link),
  .sq-response-panel.is-entering, .sq-map-row.is-new { animation: none; }
  .sq-tab-indicator, .sq-link-text, .sq-intro .sq-text-link .ico, .sq-capability-grid li .ico, .sq-switch-links a .ico { transition: none; }
  .sq-tab-list.has-indicator button[aria-selected="true"] { background: var(--sq-tab-on); }
  .sq-tab-indicator { display: none; }
  .sq-calm-tag { transition: none; }
}