/* Foghorn adaptive workspace: the post-hero homepage experience. */
:root {
  --workspace-line: rgba(255, 255, 255, 0.14);
  --workspace-line-soft: rgba(255, 255, 255, 0.075);
  --workspace-ink: #f5f5f3;
  --workspace-muted: #a5a5aa;
  --workspace-paper: #f1f1ef;
  --workspace-red: #e50917;
  --workspace-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --onyx-curtain-ease: cubic-bezier(.76, 0, .24, 1);
  --onyx-scene-ease: cubic-bezier(.43, 0, .02, 1);
  --system-morph-speed: 1.3s;
}

/* Keep every scroll surface usable without exposing browser chrome. */
html,
body,
body * {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.workspace-home {
  background: #080809;
}

/* Copy may wrap between words, never through the middle of one. */
body *:not(input):not(textarea) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* A permanent Onyx-style frame shared by the hero and workspace. */
.site-frame {
  position: fixed;
  inset: 16px;
  z-index: 1000;
  pointer-events: none;
  border: 1px solid var(--workspace-line);
}

.site-frame-cross {
  position: absolute;
  width: 13px;
  height: 13px;
}

.site-frame-cross::before,
.site-frame-cross::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .68);
}

.site-frame-cross::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 2px;
}

.site-frame-cross::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 13px;
}

.site-frame-cross--tl { top: -7px; left: -7px; }
.site-frame-cross--tr { top: -7px; right: -7px; }
.site-frame-cross--bl { bottom: -7px; left: -7px; }
.site-frame-cross--br { right: -7px; bottom: -7px; }

body.workspace-active {
  overflow: hidden;
}

/* The homepage remains mounted behind the full-screen workspace so its state is
   preserved. Stop its decorative motion while it is completely covered. */
body.workspace-active .hero,
body.workspace-active .hero *,
body.workspace-active .hero::before,
body.workspace-active .hero::after,
body.workspace-active .hero *::before,
body.workspace-active .hero *::after {
  animation-play-state: paused !important;
}

body.workspace-home .conversation-dock {
  display: none !important;
}

body.workspace-home .hero .nav {
  transition: opacity 280ms ease, transform 420ms var(--workspace-ease), visibility 280ms ease;
}

body.workspace-home .hero {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: auto;
  height: auto;
  min-height: 0;
  transform-origin: 50% 50%;
  will-change: opacity;
  transition:
    opacity .65s var(--onyx-scene-ease),
    border-color .4s ease;
}

body.workspace-active .hero {
  inset: 0;
  transform: none;
}

/* The hero resolves into a quiet system surface before the split completes. */
.hero-system-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: #0b0b0d;
  transition: opacity 700ms var(--onyx-curtain-ease);
  will-change: opacity;
}

body.workspace-hero-fading .hero-system-veil {
  opacity: 1;
}

body.workspace-hero-fading .hero-bg-video { filter: none; }

/* Once the veil is opaque, remove every live hero layer before the morph ends. */
body.workspace-hero-covered .hero {
  background-color: #080809 !important;
  background-image: none !important;
}

body.workspace-hero-covered .hero-bg-video,
body.workspace-hero-covered .hero-video-fade,
body.workspace-hero-covered .hero-grid-glow,
body.workspace-hero-covered .hero-shade,
body.workspace-hero-covered .hero-content,
body.workspace-hero-covered .hero .nav {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

body.workspace-hero-covered .hero-system-veil {
  opacity: 1;
  visibility: visible;
}

body.workspace-settled .hero {
  background-color: #050506 !important;
  background-image: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

body.workspace-home .hero-bg-video {
  transition:
    opacity 700ms var(--onyx-curtain-ease),
    filter 700ms var(--onyx-curtain-ease),
    visibility 0s linear 0s;
}

body.workspace-home .hero-bg-video.is-loop-active,
body.workspace-home .hero-bg-video.is-loop-inactive {
  transition:
    opacity 1.1s cubic-bezier(.45, 0, .55, 1),
    filter 700ms var(--onyx-curtain-ease),
    visibility 0s linear 0s;
}

body.workspace-home .hero-bg-video.is-loop-active { opacity: 1; }
body.workspace-home .hero-bg-video.is-loop-inactive { opacity: 0; }

body.workspace-home .hero-video-fade,
body.workspace-home .hero-grid-glow,
body.workspace-home .hero-shade {
  transition: opacity .59s var(--onyx-curtain-ease), visibility 0s linear 0s;
}

body.workspace-settled .hero-bg-video,
body.workspace-settled .hero-video-fade,
body.workspace-settled .hero-grid-glow,
body.workspace-settled .hero-shade {
  opacity: 0 !important;
  visibility: hidden;
}

body.workspace-home .hero-content {
  transition: none;
}

body.workspace-active .hero-content {
  transform: none;
  pointer-events: none;
}

.hero-content h1 .hero-word {
  display: inline-block;
  white-space: nowrap;
}

.hero-content h1 .hero-char {
  display: inline-block;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    opacity 300ms var(--onyx-scene-ease) var(--hero-char-in-delay, 0ms),
    filter 380ms var(--onyx-scene-ease) var(--hero-char-in-delay, 0ms),
    transform 420ms var(--onyx-scene-ease) var(--hero-char-in-delay, 0ms);
  will-change: opacity, filter, transform;
}

body.workspace-active .hero-content h1 .hero-char {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(var(--hero-char-x, 0), var(--hero-char-y, -3px), 0) scale(.975);
  transition-delay: var(--hero-char-out-delay, 0ms);
}

body.workspace-home .hero-content > .location-pill,
body.workspace-home .hero-content > .ask-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 360ms var(--onyx-scene-ease), transform 480ms var(--onyx-scene-ease);
}

body.workspace-active .hero-content > .location-pill,
body.workspace-active .hero-content > .ask-card {
  opacity: 0;
  transform: translate3d(0, 5px, 0);
  pointer-events: none;
}

body.workspace-active .hero-content > .location-pill { transition-delay: 40ms; }
body.workspace-active .hero-content > .ask-card { transition-delay: 140ms; }

.hero-intro .hero-intro-line {
  display: block;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 360ms var(--onyx-scene-ease) var(--hero-line-in-delay, 0ms),
    filter 420ms var(--onyx-scene-ease) var(--hero-line-in-delay, 0ms),
    transform 460ms var(--onyx-scene-ease) var(--hero-line-in-delay, 0ms);
  will-change: opacity, filter, transform;
}

body.workspace-active .hero-intro .hero-intro-line {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 5px, 0);
  transition-delay: var(--hero-line-out-delay, 0ms);
}

.hero-intro .hero-intro-measure-word { display: inline; }

body.workspace-active .hero .nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

body.workspace-settled .hero-system-veil {
  opacity: 1;
}

body.workspace-home main > section:not(.hero):not(.foghorn-workspace),
body.workspace-home main > footer {
  display: none;
}

.foghorn-workspace {
  position: fixed;
  inset: 16px;
  z-index: 100;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  background: transparent;
  border: 0;
  isolation: isolate;
  visibility: hidden;
  pointer-events: none;
  transition: border-color 520ms var(--onyx-curtain-ease), visibility 0s linear var(--system-morph-speed);
}

.foghorn-workspace.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: border-color 520ms var(--onyx-curtain-ease), visibility 0s linear 0s;
}

.foghorn-workspace.is-entered {
  border-color: transparent;
}

.foghorn-workspace > .workspace-cross { display: none; }

.workspace-mount > .workspace-cross--tm,
.workspace-mount > .workspace-cross--bm { display: block; }

.workspace-exit {
  --workspace-exit-size: clamp(44px, 4.3vw, 62px);
  --workspace-exit-inset: clamp(14px, 2.64vw, 38px);
  --workspace-exit-mark-size: calc(var(--workspace-exit-size) * .4516);
  --workspace-exit-mark-weight: clamp(1.5px, .139vw, 2px);
  position: absolute;
  top: var(--workspace-exit-inset);
  right: var(--workspace-exit-inset);
  z-index: 140;
  display: grid;
  place-items: center;
  width: var(--workspace-exit-size);
  height: var(--workspace-exit-size);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
  background: var(--workspace-red);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--workspace-exit-size) + var(--workspace-exit-inset) + 16px), 0, 0);
  transition:
    opacity 380ms ease,
    transform 680ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 680ms,
    background-color 240ms ease;
}

.workspace-exit > span {
  --workspace-exit-icon-scale: 1;
  display: grid;
  place-items: center;
  width: var(--workspace-exit-mark-size);
  height: var(--workspace-exit-mark-size);
  transform: scale(var(--workspace-exit-icon-scale)) rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform 420ms var(--workspace-ease);
}

.workspace-exit > span::before,
.workspace-exit > span::after {
  content: "";
  grid-area: 1 / 1;
  width: var(--workspace-exit-mark-size);
  height: var(--workspace-exit-mark-weight);
  border-radius: 99px;
  background: currentColor;
  transform-origin: center;
}

.workspace-exit > span::before { transform: rotate(45deg); }
.workspace-exit > span::after { transform: rotate(-45deg); }

.foghorn-workspace.is-entered .workspace-exit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 520ms, 520ms, 0s, 0s;
}

.foghorn-workspace.is-closing .workspace-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--workspace-exit-size) + var(--workspace-exit-inset) + 16px), 0, 0);
  transition-delay: 500ms, 500ms, 1180ms, 0s;
}

/* On phones, the close control belongs to the top edge of the interface.
   Keep its desktop treatment intact and only change the direction of travel. */
@media (max-width: 950px) {
  .workspace-exit {
    transform: translate3d(0, calc(0px - 100dvh - var(--workspace-exit-size) - var(--workspace-exit-inset) - 16px), 0);
    transition:
      opacity var(--system-morph-speed) var(--onyx-curtain-ease),
      transform var(--system-morph-speed) var(--onyx-curtain-ease),
      visibility 0s linear var(--system-morph-speed),
      background-color 240ms ease;
  }

  .foghorn-workspace.is-entered .workspace-exit {
    transform: none;
    transition-delay: 0s, 0s, 0s, 0s;
  }

  .foghorn-workspace.is-closing .workspace-exit {
    transform: translate3d(0, calc(0px - 100dvh - var(--workspace-exit-size) - var(--workspace-exit-inset) - 16px), 0);
    transition-delay: 0s, 0s, var(--system-morph-speed), 0s;
  }
}

 .viewer-about-team .viewer-team-bio { position: relative; z-index: 2; padding: 0 24px 28px; }
 .viewer-about-team .viewer-team-bio p { margin: 0 0 14px; color: #c7c7ce; font-size: 15px; line-height: 1.65; }
 .viewer-about-team .viewer-team-bio p:last-child { margin-bottom: 0; }
 .viewer-about-team .viewer-team-bio .viewer-team-role { margin-top: -10px; margin-bottom: 18px; color: #f4f4f5; font-size: 13px; font-weight: 600; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
  .workspace-exit:hover { background: #f10c1b; }
  .workspace-exit:hover > span {
    transform: scale(var(--workspace-exit-icon-scale)) rotate(90deg);
  }
}

.workspace-exit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.workspace-mobile-view-toggle {
  --workspace-mobile-control-size: clamp(44px, 4.3vw, 62px);
  --workspace-mobile-control-inset: clamp(14px, 2.64vw, 38px);
  --workspace-mobile-control-icon: calc(var(--workspace-mobile-control-size) * .4516);
  --workspace-companion-enter-delay: 228ms;
  --workspace-companion-exit-delay: 267ms;
  --workspace-companion-flight-x: -24px;
  --workspace-companion-flight-y: calc(0px - var(--workspace-mobile-control-size) - var(--workspace-mobile-control-inset) - 24px);
  display: none;
  position: absolute;
  z-index: 150;
  place-items: center;
  width: var(--workspace-mobile-control-size);
  height: var(--workspace-mobile-control-size);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
  color: #fff;
  background: var(--workspace-red);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 320ms var(--workspace-ease),
    visibility 0s linear 520ms,
    transform 480ms var(--workspace-ease),
    background-color 240ms ease;
}

.workspace-direct-nav { display: none; }

@media (min-width: 901px), (max-width: 900px) and (orientation: landscape) {
  .workspace-direct-nav {
    position: fixed;
    z-index: 500;
    top: clamp(14px, 2.64vw, 38px);
    left: 25%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(430px, calc(50% - 116px));
    height: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(24, 22, 24, .94), rgba(15, 15, 17, .94));
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition:
      opacity 320ms var(--workspace-ease),
      visibility 0s linear 520ms,
      transform 480ms var(--workspace-ease);
  }

  .workspace-direct-nav button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 4px 3px 3px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .075);
    color: #aaa9ae;
    background: transparent;
    display: grid;
    grid-template-columns: 17px minmax(0, auto);
    place-content: center;
    align-items: center;
    gap: 6px;
    font: 700 8px/1 Inter, Arial, sans-serif;
    letter-spacing: .065em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease;
  }

  .workspace-direct-nav button:first-child { border-left: 0; }

  .workspace-direct-nav button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--workspace-red);
    box-shadow: 0 0 12px rgba(229, 9, 23, .52);
    opacity: 0;
    transform: translateX(-50%) scaleX(.35);
    transition: opacity 220ms ease, transform 320ms var(--workspace-ease);
  }

  .workspace-direct-nav svg {
    width: 17px;
    height: 17px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .workspace-direct-nav button.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(229, 9, 23, .105), rgba(229, 9, 23, .025));
  }

  .workspace-direct-nav button.is-active::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  .workspace-direct-nav button.is-active svg { color: #f33a45; }

  .workspace-direct-nav button:focus-visible {
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: -3px;
  }

  .workspace-direct-nav.is-entered {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 300ms, 0s, 300ms;
  }

  .workspace-direct-nav.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition-delay: 0s;
  }

  @media (hover: hover) and (pointer: fine) {
    .workspace-direct-nav button:hover {
      color: #fff;
      background: rgba(229, 9, 23, .085);
    }
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .workspace-direct-nav {
    top: 14px;
    width: calc(50% - 42px);
  }

  .workspace-direct-nav button {
    grid-template-columns: 15px minmax(0, auto);
    gap: 4px;
    padding-inline: 2px;
    font-size: 7px;
  }

  .workspace-direct-nav svg { width: 15px; height: 15px; }
}

.workspace-mobile-view-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition:
    opacity 260ms var(--workspace-ease),
    transform 440ms var(--workspace-ease);
}

.workspace-mobile-view-icon svg {
  width: var(--workspace-mobile-control-icon);
  height: var(--workspace-mobile-control-icon);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.workspace-mobile-view-icon--viewer svg,
.workspace-mobile-view-icon--chat svg {
  fill: currentColor;
  stroke: none;
}

.workspace-mobile-view-icon--viewer {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.workspace-mobile-view-icon--chat {
  opacity: 0;
  transform: scale(.68) rotate(-28deg);
}

.workspace-mobile-view-toggle.is-viewer-active .workspace-mobile-view-icon--viewer {
  opacity: 0;
  transform: scale(.68) rotate(28deg);
}

.workspace-mobile-view-toggle.is-viewer-active .workspace-mobile-view-icon--chat {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.workspace-mobile-view-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .workspace-mobile-view-toggle:hover {
    background: #f10c1b;
  }
}

.viewer-icon-switch {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 145;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition:
    opacity 360ms var(--workspace-ease),
    transform 520ms var(--workspace-ease),
    visibility 0s linear 520ms;
}

.foghorn-workspace.is-entered .viewer-icon-switch {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 180ms, 180ms, 0s;
}

.foghorn-workspace.is-closing .viewer-icon-switch {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition-delay: 0s;
}

.viewer-icon-switch button {
  --viewer-toggle-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 34px);
  place-items: center;
  width: 76px;
  height: 42px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: rgba(255, 255, 255, .48);
  background: rgba(11, 11, 13, .92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 280ms ease, box-shadow 360ms ease;
}

.viewer-icon-switch button.is-site-active { --viewer-toggle-shift: 34px; }

.viewer-icon-switch button > span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transition: color 320ms var(--workspace-ease), transform 420ms var(--workspace-ease);
}

.viewer-icon-switch button > span:first-child,
.viewer-icon-switch button.is-site-active > span:last-of-type { color: #fff; }
.viewer-icon-switch button.is-site-active > span:first-child { color: rgba(255, 255, 255, .44); }

.viewer-icon-switch button > i {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--workspace-red);
  box-shadow: 0 4px 16px rgba(229, 9, 23, .34);
  transform: translateX(var(--viewer-toggle-shift));
  transition: transform 520ms var(--workspace-ease), box-shadow 320ms ease;
}

.viewer-icon-switch svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
  shape-rendering: geometricPrecision;
  transition: transform 420ms var(--workspace-ease);
}

@media (hover: hover) and (pointer: fine) {
  .viewer-icon-switch button:hover {
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .045);
  }

  .viewer-icon-switch button:hover > i { box-shadow: 0 5px 20px rgba(229, 9, 23, .48); }
  .viewer-icon-switch button:hover > span { transform: translateY(-1px); }
}

.viewer-icon-switch button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.workspace-mount {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.workspace-mount::after {
  content: "";
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: calc(100% + 16px);
  width: 13px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.24)) center / 1px 100% no-repeat;
  transform: translateX(-6.5px);
  transition:
    left var(--system-morph-speed) var(--onyx-curtain-ease),
    opacity 295ms var(--onyx-curtain-ease);
  will-change: left;
}

.foghorn-workspace.is-entered .workspace-mount::after {
  left: 50%;
  opacity: 1;
}

/* Keep the divider attached to the retreating curtain until both reach the
   physical right edge; hiding it early makes the close motion look detached. */
.foghorn-workspace.is-closing .workspace-mount::after {
  opacity: 1;
}

.workspace-cross {
  position: absolute;
  z-index: 121;
  width: 13px;
  height: 13px;
  pointer-events: none;
  opacity: 0;
  transition:
    left var(--system-morph-speed) var(--onyx-curtain-ease),
    opacity 295ms var(--onyx-curtain-ease);
  will-change: left;
}

.foghorn-workspace.is-entered .workspace-cross { opacity: 1; }

.workspace-cross::before,
.workspace-cross::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.68);
}

.workspace-cross::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 2px;
}

.workspace-cross::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 13px;
}

.workspace-cross--tl { top: -7px; left: -7px; }
.workspace-cross--tr { top: -7px; right: -7px; }
.workspace-cross--bl { bottom: -7px; left: -7px; }
.workspace-cross--br { right: -7px; bottom: -7px; }
.workspace-cross--tm,
.workspace-cross--bm {
  left: calc(100% + 16px);
  transform: translateX(-50%);
}
.workspace-cross--tm { top: -7px; }
.workspace-cross--bm { bottom: -7px; }
.foghorn-workspace.is-entered .workspace-cross--tm,
.foghorn-workspace.is-entered .workspace-cross--bm { left: 50%; }

.foghorn-workspace.is-closing .workspace-cross--tm,
.foghorn-workspace.is-closing .workspace-cross--bm { opacity: 1; }

.chat-experience.is-workspace {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.chat-experience.is-workspace::before,
.chat-experience.is-workspace::after {
  display: none;
}

.foghorn-workspace .chat-experience.is-workspace .chat-topbar {
  display: none !important;
}

.foghorn-workspace .chat-brand {
  min-height: 48px;
}

.foghorn-workspace .chat-close {
  min-width: 48px;
  min-height: 48px;
}

.foghorn-workspace .chat-canvas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.foghorn-workspace .guided-panel {
  position: relative;
  min-width: 0;
  padding: 0;
  border-right: 0;
  background: #0b0b0d;
}

.foghorn-workspace .guided-panel::before,
.foghorn-workspace .guided-panel::after {
  display: none;
}

.foghorn-workspace .guided-panel::before { top: 0; }
.foghorn-workspace .guided-panel::after { top: 100%; }

.foghorn-workspace .adaptive-site-preview {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0e0e10;
  box-shadow: none;
  opacity: 0;
  transition: opacity .52s var(--onyx-curtain-ease);
}

.foghorn-workspace.is-content-ready .adaptive-site-preview {
  opacity: 1;
}

.foghorn-workspace.is-closing .adaptive-site-preview {
  opacity: 0;
  transition-duration: 160ms;
  transition-delay: 0s;
}

.foghorn-workspace .adaptive-browser-bar {
  display: none !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--workspace-line);
  background: #0b0b0d;
}

.viewer-status-mark {
  display: flex;
  align-items: center;
  gap: 4px;
}

.foghorn-workspace .viewer-status-mark i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3c3c41;
}

.foghorn-workspace .viewer-status-mark i:first-child {
  background: var(--workspace-red);
  box-shadow: 0 0 12px rgba(229, 9, 23, 0.55);
}

.foghorn-workspace .adaptive-browser-bar small {
  justify-self: center;
  color: #89898f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.viewer-mode-switch,
.workspace-mobile-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--workspace-line);
  background: #111113;
}

.viewer-mode-switch button,
.workspace-mobile-switch button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: max-content !important;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  color: #87878d;
  background: transparent;
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.viewer-mode-switch button + button,
.workspace-mobile-switch button + button {
  border-left: 1px solid var(--workspace-line);
}

.viewer-mode-switch button.is-active,
.workspace-mobile-switch button.is-active {
  color: #fff;
  background: #29292d;
}

.viewer-mode-switch button:focus-visible,
.workspace-mobile-switch button:focus-visible,
.viewer-route-strip button:focus-visible,
.viewer-page button:focus-visible,
.viewer-page input:focus-visible,
.viewer-page select:focus-visible,
.viewer-page textarea:focus-visible {
  outline: 2px solid #ff3b46;
  outline-offset: -2px;
}

.foghorn-workspace .adaptive-page {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.workspace-site-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #0e0e10;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  will-change: transform;
  transition:
    transform 720ms var(--workspace-ease),
    box-shadow 360ms ease,
    visibility 0s linear 720ms;
}

.workspace-site-layer::-webkit-scrollbar { display: none; }

.workspace-site-layer.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  box-shadow: -28px 0 64px rgba(0, 0, 0, .26);
  transition-delay: 0s;
}

.workspace-site-layer.is-view-changing { opacity: 1; }

.viewer-route-transition {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(213, 1, 13, .18), transparent 34%),
    linear-gradient(135deg, #111114 0%, #0c0c0e 68%, #101012 100%);
  transition:
    opacity 520ms var(--workspace-ease),
    visibility 0s linear 520ms;
}

.viewer-route-transition::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(232, 16, 29, .92) 30%, rgba(232, 16, 29, .36) 72%, transparent);
  box-shadow: 0 0 28px rgba(213, 1, 13, .34);
  transform: translate3d(-12px, 0, 0);
}

.viewer-route-transition.is-covering,
.viewer-route-transition.is-revealing {
  visibility: visible;
  transition-delay: 0s;
}

.viewer-route-transition.is-covering {
  opacity: 1;
  transition-duration: 240ms;
}

.viewer-route-transition.is-covering::after {
  opacity: 1;
  transform: translate3d(calc(100vw - 2px), 0, 0);
  transition: opacity 180ms ease, transform 520ms var(--workspace-ease);
}

.viewer-route-transition.is-revealing {
  opacity: 0;
  transition-duration: 560ms;
}

@media (prefers-reduced-motion: reduce) {
  .viewer-route-transition,
  .viewer-route-transition::after { transition: none; }
}

.workspace-site-layer > .viewer-page {
  min-height: 100%;
  background: #f6f6f5;
}

.foghorn-workspace [data-guide-content] {
  position: relative;
  z-index: 1;
}

/* A silent, living canvas while the guide is waiting for its first presentation. */
.guide-idle-space {
  --idle-grid-size: clamp(52px, 5vw, 76px);
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 16%, rgba(213, 1, 13, .14), transparent 34%),
    radial-gradient(circle at 12% 86%, rgba(255, 255, 255, .025), transparent 30%),
    linear-gradient(145deg, #111113 0%, #0d0d0f 68%, #101012 100%);
}

.guide-idle-space::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: var(--idle-grid-size) var(--idle-grid-size);
}

.guide-idle-space::before {
  content: "";
  z-index: 0;
  opacity: .72;
}

.guide-idle-space::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -30%;
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(112deg, transparent 28%, rgba(213, 1, 13, .075) 46%, rgba(255, 255, 255, .025) 50%, transparent 67%);
  transform: translate3d(-4%, 2%, 0) rotate(-1deg);
}

.guide-grid-glow {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.guide-grid-glow i {
  --guide-glow-opacity: .58;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--guide-glow-opacity);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .94) 1px, rgba(255, 24, 40, .48) 2px, transparent 3px),
    linear-gradient(rgba(255, 255, 255, .94) 1px, rgba(255, 24, 40, .48) 2px, transparent 3px);
  background-size: var(--idle-grid-size) var(--idle-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 50%, #000 0%, #000 12%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.3) 58%, transparent 82%);
  mask-image: radial-gradient(ellipse 42% 38% at 50% 50%, #000 0%, #000 12%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.3) 58%, transparent 82%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 292px 196px;
  mask-size: 292px 196px;
  contain: layout paint style;
  will-change: mask-position, mask-size, opacity;
}

.guide-grid-glow i + i {
  -webkit-mask-image: radial-gradient(ellipse 36% 43% at 50% 50%, #000 0%, rgba(0,0,0,.8) 25%, rgba(0,0,0,.22) 60%, transparent 84%);
  mask-image: radial-gradient(ellipse 36% 43% at 50% 50%, #000 0%, rgba(0,0,0,.8) 25%, rgba(0,0,0,.22) 60%, transparent 84%);
  -webkit-mask-size: 180px 300px;
  mask-size: 180px 300px;
}

.guide-grid-glow b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 1px, rgba(255, 24, 40, .46) 2px, transparent 3px),
    linear-gradient(rgba(255, 255, 255, .96) 1px, rgba(255, 24, 40, .46) 2px, transparent 3px);
  background-size: var(--idle-grid-size) var(--idle-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 43% 40% at center, #000 0 8%, rgba(0,0,0,.72) 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 43% 40% at center, #000 0 8%, rgba(0,0,0,.72) 30%, transparent 78%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 112px 88px;
  mask-size: 112px 88px;
  contain: layout paint style;
  will-change: mask-position, opacity;
}

.guide-idle-prompt {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 4px;
  border: 0;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  font: 600 11px/1 "Inter", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transform: translate3d(-50%, calc(-50% + 8px), 0);
  transition: color 300ms ease, opacity 700ms ease 500ms, transform 700ms var(--workspace-ease) 500ms;
}

.foghorn-workspace.is-content-ready .guide-idle-prompt {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
}

.guide-idle-prompt > i {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #ef1827;
  box-shadow: 0 0 12px rgba(239, 24, 39, .58);
}

.guide-idle-prompt .ui-icon {
  --ui-icon-size: 17px;
  transition: transform 300ms var(--workspace-ease);
}

.guide-idle-prompt:hover,
.guide-idle-prompt:focus-visible { color: #fff; }
.guide-idle-prompt:hover .ui-icon,
.guide-idle-prompt:focus-visible .ui-icon { transform: translateX(4px); }
.guide-idle-prompt:focus-visible { outline: 1px solid rgba(255, 255, 255, .56); outline-offset: 6px; }

.adaptive-site-preview[data-viewer-mode="site"] .guide-idle-space::after,
.foghorn-workspace.is-closing .guide-idle-space::after {
  animation-play-state: paused;
}

.adaptive-site-preview[data-viewer-mode="site"] .guide-grid-glow,
.foghorn-workspace.is-closing .guide-grid-glow {
  visibility: hidden;
}

@keyframes guide-idle-aura {
  0% { transform: translate3d(-12%, 8%, 0) rotate(-2deg); }
  50% { transform: translate3d(12%, -7%, 0) rotate(2deg); }
  100% { transform: translate3d(-12%, 8%, 0) rotate(-2deg); }
}

.foghorn-workspace .adaptive-mini-nav {
  display: none !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  min-height: 66px;
  padding: 0 18px;
  gap: 18px;
  border-bottom: 1px solid var(--workspace-line);
  background: rgba(12, 12, 14, 0.96);
}

.foghorn-workspace .adaptive-mini-nav img {
  width: 124px;
  max-height: 34px;
  object-fit: contain;
}

.foghorn-workspace .adaptive-mini-nav > span {
  color: #f4f4f5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.viewer-route-strip {
  justify-self: end;
  display: flex;
  min-width: 0;
  height: 100%;
}

.viewer-route-strip button {
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  color: #85858b;
  background: transparent;
  font: 700 9px/1 "Inter", sans-serif;
  letter-spacing: 0.075em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}

.viewer-route-strip button:hover,
.viewer-route-strip button.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.foghorn-workspace [data-guide-content] {
  position: relative;
  min-height: 0;
  overflow: hidden;
  transition: opacity 180ms ease, transform 240ms var(--workspace-ease);
}

.foghorn-workspace [data-guide-content].is-site-view {
  display: block !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.foghorn-workspace [data-guide-content].is-site-view::-webkit-scrollbar {
  display: none;
}

.foghorn-workspace .adaptive-page,
.foghorn-workspace [data-guide-content] {
  height: 100%;
}

.signal-resume-label { display: none; }
.has-saved-conversation .hero-prompt-rotator { display: none !important; }
.has-saved-conversation .signal-resume-label { display: inline; }
.signal-session-menu { position: relative; margin: 0 0 5px; color: #c8c8cb; font-size: 12px; }
.signal-session-menu > summary { display: flex; align-items: center; gap: 9px; width: fit-content; min-height: 44px; margin-left: auto; padding: 0 11px 0 14px; list-style: none; color: #aaaab0; cursor: pointer; border: 1px solid transparent; border-radius: 999px; user-select: none; -webkit-user-select: none; transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease; }
.signal-session-menu > summary::-webkit-details-marker { display: none; }
.signal-session-menu > summary .ui-icon { --ui-icon-size: 14px; transition: transform 380ms cubic-bezier(.2,.75,.2,1); }
.signal-session-menu[open] > summary { color: #fff; border-color: rgba(255,255,255,.13); background: #202023; }
.signal-session-menu[open] > summary .ui-icon { transform: rotate(180deg); }
.signal-session-options { position: fixed; top: clamp(12px,2vw,24px); right: clamp(16px,2vw,32px); bottom: auto; left: auto; z-index: 80; width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 32px); margin: 0; padding: 0; overflow: hidden auto; color: #f3f3f1; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: linear-gradient(145deg, rgba(30,25,28,.985), rgba(13,13,15,.992) 58%); box-shadow: 0 30px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(213,1,13,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0,-18px,0) scale(.985); transform-origin: 50% 0; transition: opacity 340ms ease, transform 430ms cubic-bezier(.2,.78,.2,1), visibility 430ms; }
.signal-session-options::backdrop { background: transparent; }
.signal-session-options::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #e60012 0 19%, rgba(230,0,18,.18) 19% 100%); }
.signal-session-menu.is-visible .signal-session-options { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0,0,0) scale(1); }
.signal-session-menu.is-closing .signal-session-options { opacity: 0; visibility: visible; pointer-events: none; transform: translate3d(0,-18px,0) scale(.985); transition-duration: 340ms; }
.signal-session-menu[data-session-view="home"] .signal-session-options { overflow: hidden; }
.signal-session-view { padding: clamp(24px, 4vw, 34px); }
.signal-session-options [hidden] { display: none !important; }
.signal-session-head > span,
.signal-session-subview > header > span,
.signal-session-confirm > span { color: #ff4651; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.signal-session-head h3,
.signal-session-subview > header h3 { max-width: 13ch; margin: 11px 0 0; color: #f6f6f4; font: 560 clamp(25px, 3vw, 34px)/1.02 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.signal-session-head p,
.signal-session-subview > header p { margin: 15px 0 0; color: #97979d; font-size: 12px; line-height: 1.58; }
.signal-session-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 25px; }
.signal-session-option { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; gap: 12px; align-items: center; min-height: 94px; margin: 0; padding: 17px 15px; overflow: hidden; color: #eeeef0; text-align: left; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.025); cursor: pointer; opacity: 0; transform: translate3d(0,13px,0); transition: opacity 320ms ease, transform 450ms cubic-bezier(.2,.75,.2,1), border-color 300ms ease, background-color 300ms ease; }
.signal-session-option::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #e60012; transform: scaleX(.15); transform-origin: left; transition: transform 480ms cubic-bezier(.2,.75,.2,1); }
.signal-session-option.is-primary { border-color: rgba(230,0,18,.34); background: linear-gradient(135deg, rgba(213,1,13,.13), rgba(255,255,255,.018)); }
.signal-session-option > span:nth-child(2) { display: block; min-width: 0; }
.signal-session-option strong { display: block; color: #f4f4f2; font: 560 13px/1.2 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.signal-session-option small { display: block; margin-top: 5px; color: #85858b; font-size: 10px; line-height: 1.35; }
.signal-session-option > .ui-icon { --ui-icon-size: 14px; color: #ff4651; }
.signal-session-option-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #ff4651; border: 1px solid rgba(255,70,81,.3); border-radius: 50%; background: rgba(213,1,13,.08); }
.signal-session-option-icon .ui-icon { --ui-icon-size: 15px; }
.signal-session-menu.is-visible .signal-session-option { opacity: 1; transform: translate3d(0,0,0); }
.signal-session-menu.is-visible .signal-session-option:nth-child(1) { transition-delay: 70ms, 70ms, 0ms, 0ms; }
.signal-session-menu.is-visible .signal-session-option:nth-child(2) { transition-delay: 115ms, 115ms, 0ms, 0ms; }
.signal-session-menu.is-visible .signal-session-option:nth-child(3) { transition-delay: 160ms, 160ms, 0ms, 0ms; }
.signal-session-menu.is-visible .signal-session-option:nth-child(4) { transition-delay: 205ms, 205ms, 0ms, 0ms; }
.signal-session-menu.is-visible .signal-session-option:nth-child(5) { transition-delay: 250ms, 250ms, 0ms, 0ms; }
.signal-session-menu.is-closing .signal-session-option { opacity: 0; transform: translate3d(0,10px,0); transition-delay: 0ms; }
.signal-session-option:disabled { opacity: .36 !important; cursor: default; }
.signal-session-new { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 18px; align-items: center; width: 100%; min-height: 62px; margin-top: 18px; padding: 14px 17px; color: #d3d3d6; text-align: left; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: transparent; cursor: pointer; }
.signal-session-new span { font-weight: 700; }
.signal-session-new small { grid-column: 1; color: #77777d; font-size: 10px; }
.signal-session-new > i { grid-column: 2; grid-row: 1 / span 2; --ui-icon-size: 16px; color: #ff4651; transform: rotate(45deg); }
.signal-session-confirm { margin-top: 12px; padding: 18px; border: 1px solid rgba(255,70,81,.33); border-radius: 12px; background: rgba(213,1,13,.08); animation: session-subview-in 340ms cubic-bezier(.2,.75,.2,1) both; }
.signal-session-confirm p { margin: 9px 0 15px; color: #c0c0c4; font-size: 11px; line-height: 1.5; }
.signal-session-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.signal-session-confirm button { min-height: 42px; padding: 9px 11px; color: #fff; font-size: 10px; font-weight: 700; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: transparent; cursor: pointer; }
.signal-session-confirm [data-session-clear] { border-color: #e60012; background: #e60012; }
.signal-session-view.is-confirming { display: grid; place-items: center; height: 100%; }
.signal-session-view.is-confirming .signal-session-head,
.signal-session-view.is-confirming .signal-session-action-grid,
.signal-session-view.is-confirming .signal-session-new { display: none; }
.signal-session-view.is-confirming .signal-session-confirm { width: 100%; margin: 0; }
.signal-session-subview { animation: session-subview-in 400ms cubic-bezier(.2,.75,.2,1) both; }
.signal-session-back { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: -8px 0 22px; padding: 0; color: #a8a8ad; font-size: 11px; font-weight: 700; border: 0; background: transparent; cursor: pointer; }
.signal-session-back .ui-icon { --ui-icon-size: 14px; color: #ff4651; }
.signal-session-history-list { display: grid; gap: 8px; margin-top: 22px; }
.signal-session-history-list button { display: grid; grid-template-columns: 30px minmax(0,1fr) 15px; gap: 12px; align-items: center; min-height: 58px; padding: 12px 14px; color: #eeeef0; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.025); cursor: pointer; }
.signal-session-history-list button > span:first-child { color: #ff4651; font-size: 9px; font-weight: 800; }
.signal-session-history-list button strong { display: block; overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.signal-session-history-list button small { display: block; margin-top: 3px; color: #7f7f85; font-size: 9px; }
.signal-session-save-count { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 15px; border: 1px solid rgba(97,207,149,.25); border-radius: 11px; background: rgba(97,207,149,.055); }
.signal-session-save-count > i { width: 8px; height: 8px; border-radius: 50%; background: #61cf95; box-shadow: 0 0 0 6px rgba(97,207,149,.08); }
.signal-session-save-count strong,
.signal-session-save-count small { display: block; }
.signal-session-save-count strong { color: #dfeee5; font-size: 11px; }
.signal-session-save-count small { margin-top: 3px; color: #789085; font-size: 9px; }
.signal-session-save-actions { display: grid; gap: 9px; margin-top: 14px; }
.signal-session-save-actions button { display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; min-height: 62px; padding: 13px 16px; color: #eeeef0; text-align: left; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(255,255,255,.025); cursor: pointer; }
.signal-session-save-actions button.is-share { color: #fff; border-color: rgba(230,0,18,.55); background: linear-gradient(120deg, #c9000b, #e60012); }
.signal-session-save-actions strong,
.signal-session-save-actions small { display: block; }
.signal-session-save-actions strong { font-size: 12px; }
.signal-session-save-actions small { margin-top: 4px; color: #87878d; font-size: 9px; }
.signal-session-save-actions .is-share small { color: rgba(255,255,255,.68); }
.signal-session-save-actions .ui-icon { --ui-icon-size: 16px; justify-self: end; }
.signal-session-save-actions button:disabled { opacity: .4; cursor: default; }
.signal-session-status { min-height: 20px; margin: 13px 0 0; color: #9adbb8; font-size: 10px; line-height: 1.5; }
.signal-session-menu :focus-visible { outline: 2px solid #ff344d; outline-offset: 2px; }

@keyframes session-subview-in { from { opacity: 0; transform: translate3d(16px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

@media (hover: hover) and (pointer: fine) {
  .signal-session-menu > summary:hover { color: #fff; border-color: rgba(255,70,81,.25); background: rgba(255,255,255,.045); }
  .signal-session-option:not(:disabled):hover { border-color: rgba(255,70,81,.36); background-color: rgba(255,255,255,.055); }
  .signal-session-option:not(:disabled):hover::before { transform: scaleX(1); }
  .signal-session-new:hover { border-color: rgba(255,70,81,.3); color: #fff; }
  .signal-session-history-list button:hover,
  .signal-session-save-actions button:not(.is-share):hover { border-color: rgba(255,70,81,.34); background: rgba(255,255,255,.055); }
  .signal-session-save-actions button.is-share:hover { background: linear-gradient(120deg, #df0010, #f20b19); }
}

@media (max-width: 520px) {
  .signal-session-options { width: calc(100vw - 24px); height: auto; max-height: calc(100dvh - 16px); border-radius: 18px; }
  .signal-session-view { padding: 16px 18px; }
  .signal-session-head h3 { max-width: none; margin-top: 7px; font-size: 24px; line-height: 1.04; }
  .signal-session-head p { margin-top: 8px; font-size: 10.5px; line-height: 1.4; }
  .signal-session-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
  .signal-session-option { grid-template-columns: 28px minmax(0,1fr) 12px; gap: 8px; min-height: 64px; padding: 10px; }
  .signal-session-option.is-primary { grid-column: 1 / -1; min-height: 56px; }
  .signal-session-option strong { font-size: 11.5px; }
  .signal-session-option small { display: none; }
  .signal-session-option-icon { width: 28px; height: 28px; }
  .signal-session-option-icon .ui-icon { --ui-icon-size: 13px; }
  .signal-session-new { min-height: 50px; margin-top: 10px; padding: 10px 14px; }
  .signal-session-new small { display: none; }
  .signal-session-view.is-confirming { height: auto; min-height: 220px; }
  .signal-session-subview > header h3 { font-size: 27px; }
}

@media (max-height: 700px) {
  .signal-session-options { top: 8px; right: 12px; max-height: calc(100dvh - 16px); }
  .signal-session-view { padding: 12px 16px; }
  .signal-session-head h3 { max-width: none; margin-top: 5px; font-size: 22px; line-height: 1; }
  .signal-session-head p { margin-top: 6px; font-size: 9.5px; line-height: 1.3; }
  .signal-session-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
  .signal-session-option { grid-template-columns: 26px minmax(0,1fr) 12px; gap: 7px; min-height: 56px; padding: 8px 10px; }
  .signal-session-option.is-primary { grid-column: 1 / -1; min-height: 50px; }
  .signal-session-option small { display: none; }
  .signal-session-option-icon { width: 26px; height: 26px; }
  .signal-session-new { min-height: 44px; margin-top: 8px; padding: 8px 13px; }
  .signal-session-new small { display: none; }
  .signal-session-view.is-confirming { height: auto; min-height: 200px; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .signal-session-options {
    position: fixed;
    top: -8px;
    right: clamp(12px, 2.64vw, 38px);
    bottom: auto;
    max-height: calc(100dvh - 16px);
    transform: translate3d(0,-18px,0) scale(.985);
    transform-origin: 50% 0;
  }

  .signal-session-menu.is-closing .signal-session-options { transform: translate3d(0,-18px,0) scale(.985); }
  /* The options panel enters the browser's overlay layer. Nothing in the
     workspace changes layer, opacity or visibility when it opens. */
}

.chat-experience:has(.signal-session-menu[open]) .conversation-jump-latest { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .signal-session-options,
  .signal-session-option,
  .signal-session-subview,
  .signal-session-confirm { transition: none !important; animation: none !important; }
}

.foghorn-workspace .immersive-toolbar,
.foghorn-workspace .immersive-history,
.foghorn-workspace .save-drawer,
.foghorn-workspace .viewer-mode-switch,
.foghorn-workspace .viewer-route-strip,
.foghorn-workspace .immersive-suggestions,
.foghorn-workspace .compose-foot {
  display: none !important;
}

.foghorn-workspace .chat-messages {
  padding: clamp(34px, 5vw, 92px) clamp(28px, 5vw, 88px);
}

.foghorn-workspace .chat-welcome {
  width: min(610px, 100%);
  margin: auto 0;
}

.foghorn-workspace .chat-welcome::before {
  width: 240px;
  height: 240px;
  top: -82px;
  left: -68px;
  opacity: .68;
}

.foghorn-workspace .chat-welcome-conversation {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.foghorn-workspace .chat-welcome .ready-orb {
  width: 46px;
  height: 46px;
  margin: 3px 0 0;
  opacity: 0;
  transform: translateY(8px) scale(.92);
  translate: 0 var(--welcome-orb-y, 0px);
  transition: translate 680ms cubic-bezier(.16, 1, .3, 1);
  animation: none;
}

.foghorn-workspace .chat-welcome-dialogue {
  display: grid;
  justify-items: start;
  gap: 9px;
  min-width: 0;
}

.foghorn-workspace .chat-welcome-typing {
  display: none;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px 17px 17px 17px;
  background: rgba(25, 25, 28, .88);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}

.foghorn-workspace .chat-welcome-typing.is-visible {
  display: flex;
  animation: chat-welcome-typing-in 240ms cubic-bezier(.22, 1, .36, 1) both;
}

.foghorn-workspace .chat-welcome-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4450;
  box-shadow: 0 0 12px rgba(213, 1, 13, .48);
  animation: chat-welcome-dot 900ms ease-in-out infinite;
}

.foghorn-workspace .chat-welcome-typing i:nth-child(2) { animation-delay: 120ms; }
.foghorn-workspace .chat-welcome-typing i:nth-child(3) { animation-delay: 240ms; }

.foghorn-workspace .chat-welcome-message {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px 17px 17px 17px;
  color: #ececef;
  background: rgba(25, 25, 28, .88);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transform-origin: 0 0;
}

.foghorn-workspace .chat-welcome-greeting {
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.foghorn-workspace .chat-welcome-lead {
  padding: 13px 16px 14px;
  border-color: rgba(213, 1, 13, .28);
  color: #f7f7f8;
  background:
    linear-gradient(125deg, rgba(213, 1, 13, .10), transparent 55%),
    rgba(24, 24, 27, .94);
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.28;
}

.foghorn-workspace.is-content-ready .chat-welcome .ready-orb {
  opacity: 1;
  animation: none;
}

.foghorn-workspace.is-content-ready .chat-welcome .ready-orb.is-arriving {
  opacity: 1;
  will-change: transform, opacity;
}

.foghorn-workspace.is-content-ready .chat-welcome .ready-orb.is-arrived {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: ready-breathe 3.2s ease-in-out 180ms infinite;
}

/* Resting Signal still breathes. Pause only when the identity is not visible
   or the visitor has requested reduced motion, as managed by its controller. */
.foghorn-workspace .signal-orb[data-signal-motion="paused"],
.foghorn-workspace .signal-orb[data-signal-motion="paused"] *,
.foghorn-workspace .signal-orb[data-signal-motion="paused"]::before,
.foghorn-workspace .signal-orb[data-signal-motion="paused"] *::before,
.foghorn-workspace .signal-orb[data-signal-motion="paused"] *::after {
  animation-play-state: paused !important;
}

.foghorn-workspace.is-content-ready .chat-welcome-message.is-typing,
.foghorn-workspace.is-content-ready .chat-welcome-message.is-complete {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.foghorn-workspace .chat-welcome-message.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .9em;
  margin-left: 3px;
  border-radius: 2px;
  background: #ff3542;
  vertical-align: -.08em;
  animation: chat-welcome-caret 620ms steps(1, end) infinite;
}

@keyframes chat-welcome-orb-in {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chat-welcome-message-in {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 5px 17px 17px 17px);
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 5px 17px 17px 17px);
    transform: translateY(0) scale(1);
  }
}

@keyframes chat-welcome-typing-in {
  from { opacity: 0; transform: translateY(7px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chat-welcome-dot {
  0%, 70%, 100% { opacity: .3; transform: translateY(0) scale(.8); }
  35% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@keyframes chat-welcome-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.foghorn-workspace .chat-compose {
  padding: 16px clamp(24px, 4vw, 68px) 20px;
  background: #0d0d0f;
}

.foghorn-workspace .immersive-form {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  margin: 0;
  padding: 7px 8px 7px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .075), transparent 36%),
    rgba(11, 11, 13, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 22px 58px rgba(0, 0, 0, .38);
  backdrop-filter: blur(20px) saturate(1.08);
  cursor: text;
  transform: translateY(0);
  transition:
    border-color 320ms var(--workspace-ease),
    background-color 320ms var(--workspace-ease),
    box-shadow 420ms var(--workspace-ease),
    transform 420ms var(--workspace-ease);
}

.foghorn-workspace .immersive-form::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, .065) 31%, transparent 57%),
    radial-gradient(circle at 82% 46%, rgba(213, 1, 13, .1), transparent 27%);
  transform: translate3d(-2.5%, 0, 0);
  transition:
    opacity 420ms var(--workspace-ease),
    transform 620ms var(--workspace-ease);
}

@media (hover: hover) and (pointer: fine) {
  .foghorn-workspace .immersive-form:hover {
    border-color: rgba(255, 255, 255, .31);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .09),
      0 24px 62px rgba(0, 0, 0, .43),
      0 0 0 1px rgba(213, 1, 13, .055);
    transform: translateY(-1px);
  }

  .foghorn-workspace .immersive-form:hover::before {
    opacity: .8;
    transform: translate3d(0, 0, 0);
  }
}

.foghorn-workspace .immersive-form:focus-within {
  border-color: rgba(255, 70, 80, .46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .095),
    inset 0 0 0 1px rgba(213, 1, 13, .1),
    0 20px 54px rgba(0, 0, 0, .42),
    0 0 28px rgba(213, 1, 13, .075);
  transform: translateY(0);
}

.foghorn-workspace .immersive-form:focus-within::before {
  opacity: .48;
  transform: translate3d(0, 0, 0);
}

.foghorn-workspace .interface-prompt-rotator {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 20px;
  right: 72px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  color: rgba(255, 255, 255, .54);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -.012em;
  line-height: 1.5;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color 320ms var(--workspace-ease);
}

.foghorn-workspace .immersive-form:hover .interface-prompt-rotator {
  color: rgba(255, 255, 255, .66);
}

.foghorn-workspace .interface-prompt-rotator::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.14em;
  background: rgba(255, 255, 255, .72);
  animation: hero-prompt-caret 1.05s steps(1, end) infinite;
}

.foghorn-workspace .interface-prompt-rotator:empty::after { display: none; }

.foghorn-workspace .immersive-form:has(.interface-prompt-rotator:not(:empty)) textarea {
  caret-color: transparent;
}

.foghorn-workspace .immersive-form textarea {
  align-self: center;
  min-height: 24px;
  max-height: 96px;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  color: rgba(255, 255, 255, .92);
  line-height: 1.5;
  box-shadow: none !important;
}

.foghorn-workspace .immersive-form textarea::placeholder {
  color: rgba(255, 255, 255, .54);
}

.foghorn-workspace .immersive-form button {
  place-self: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: var(--workspace-red);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 8px 24px rgba(213, 1, 13, .3);
}

/* Match the hero and travelling handoff exactly so the action never appears
   to resize as the shared prompt lands in the interface. */
.foghorn-workspace .immersive-form .prompt-send-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.15;
}

/* One continuous prompt object travels above the scene while the hero becomes
   the two-panel workspace. The real controls are hidden only for the handoff. */
.prompt-handoff {
  position: fixed;
  z-index: 180;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 7px 8px 7px 20px;
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .075), transparent 36%),
    rgba(11, 11, 13, .94);
  backdrop-filter: blur(20px) saturate(1.08);
  transform-origin: center;
  will-change: left, top, width, height, transform, box-shadow;
}

.prompt-handoff > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .64);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -.012em;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-handoff > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: var(--workspace-red);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(213,1,13,.3);
}

.prompt-handoff .prompt-send-icon {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.prompt-handoff-active .hero .hero-prompt,
body.prompt-handoff-active .foghorn-workspace .immersive-form {
  opacity: 0 !important;
}

body.prompt-handoff-active .signal-return-control {
  opacity: 0 !important;
}

body.prompt-handoff-active .foghorn-workspace .viewer-icon-switch {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.prompt-handoff-active .foghorn-workspace .chat-panel > .chat-compose {
  opacity: 1 !important;
  transition: none !important;
}

.foghorn-workspace [data-guide-content].is-view-changing {
  opacity: 0;
  transform: translateY(12px);
}

.viewer-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 100%;
  color: #101012;
  background: var(--workspace-paper);
}

.viewer-page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(38px, 6vw, 82px);
  overflow: hidden;
  text-align: left;
  color: var(--workspace-ink);
  background:
    linear-gradient(115deg, rgba(213, 1, 13, 0.03), rgba(213, 1, 13, 0.19)),
    radial-gradient(circle at 86% 18%, rgba(232, 16, 29, 0.36), transparent 31%),
    #0c0c0e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.viewer-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 25% 25%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 82%);
}

.viewer-page--about .viewer-page-hero,
.viewer-page--services .viewer-page-hero {
  background:
    linear-gradient(115deg, rgba(213, 1, 13, .03), rgba(213, 1, 13, .12)),
    #0c0c0e;
}

.viewer-page--about .viewer-page-hero::before { z-index: 1; }

.viewer-page--about .viewer-page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(2.5%, -2.5%, 0) scale(.84);
  transform-origin: 86% 18%;
  background: radial-gradient(circle at 86% 18%, rgba(255, 77, 88, .22), rgba(232, 16, 29, .38) 12%, rgba(213, 1, 13, .16) 24%, transparent 42%);
  transition: opacity 1.5s cubic-bezier(.22, 1, .36, 1) 100ms, transform 1.75s cubic-bezier(.22, 1, .36, 1) 100ms;
  will-change: opacity, transform;
}

.viewer-page--about.is-entered .viewer-page-hero::after {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.viewer-page--about .viewer-page-hero h1,
.viewer-page--about .viewer-page-hero .viewer-page-intro,
.viewer-page--about .viewer-page-hero .viewer-page-eyebrow { z-index: 2; }

/* Each primary page animates its own existing visual language into place.
   The motion settles completely after entry and never competes with reading. */
.viewer-page--services .viewer-page-hero h1,
.viewer-page--services .viewer-page-hero .viewer-page-intro,
.viewer-page--services .viewer-page-hero .viewer-page-eyebrow,
.viewer-page--approach .viewer-page-hero h1,
.viewer-page--approach .viewer-page-hero .viewer-page-intro,
.viewer-page--approach .viewer-page-hero .viewer-page-eyebrow,
.viewer-page--contact .viewer-page-hero h1,
.viewer-page--contact .viewer-page-hero .viewer-page-intro,
.viewer-page--contact .viewer-page-hero .viewer-page-eyebrow { z-index: 2; }

.viewer-page--services .viewer-page-hero::before {
  z-index: 1;
  opacity: 0;
  background-position: -8% 0, -8% 0;
  transform: scale(1.075);
  transform-origin: 18% 62%;
  transition: opacity 1.05s ease 80ms, transform 1.55s cubic-bezier(.22,1,.36,1) 80ms, background-position 1.55s cubic-bezier(.22,1,.36,1) 80ms;
  will-change: opacity, transform, background-position;
}
.viewer-page--services .viewer-page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(92deg, transparent 8%, rgba(229,9,23,.035) 32%, rgba(229,9,23,.16) 49%, transparent 72%),
    radial-gradient(ellipse at 18% 65%, rgba(229,9,23,.2), transparent 43%);
  transform: translate3d(-14%, 0, 0) scale(.94);
  transition: opacity 1.1s ease 100ms, transform 1.7s cubic-bezier(.16,1,.3,1) 100ms;
  will-change: opacity, transform;
}
.viewer-page--services.is-entered .viewer-page-hero::before {
  opacity: .45;
  background-position: 0 0, 0 0;
  transform: scale(1);
}
.viewer-page--services.is-entered .viewer-page-hero::after { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.viewer-page--approach .viewer-page-hero::before {
  z-index: 1;
  opacity: 0;
  transform: translate3d(5%, -5%, 0);
  transition: opacity .9s ease 100ms, transform 1.45s cubic-bezier(.22,1,.36,1) 100ms;
  will-change: opacity, transform;
}
.viewer-page--approach .viewer-page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(137deg, transparent 45%, rgba(255,61,72,.17) 45.15%, rgba(255,61,72,.17) 45.35%, transparent 45.5%),
    linear-gradient(137deg, transparent 58%, rgba(255,255,255,.065) 58.1%, rgba(255,255,255,.065) 58.22%, transparent 58.35%),
    radial-gradient(circle at 82% 20%, rgba(229,9,23,.18), transparent 34%);
  transform: translate3d(9%, -8%, 0) scale(1.08);
  transition: opacity 1.05s ease 120ms, transform 1.65s cubic-bezier(.16,1,.3,1) 120ms;
  will-change: opacity, transform;
}
.viewer-page--approach.is-entered .viewer-page-hero::before { opacity: .38; transform: translate3d(0, 0, 0); }
.viewer-page--approach.is-entered .viewer-page-hero::after { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.viewer-page--contact .viewer-page-hero::before {
  z-index: 1;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 1s ease 120ms, transform 1.35s cubic-bezier(.22,1,.36,1) 120ms;
  will-change: opacity, transform;
}
.viewer-page--contact .viewer-page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 84% 20%, transparent 0 54px, rgba(255,66,78,.24) 55px 56px, transparent 57px),
    radial-gradient(circle at 84% 20%, transparent 0 112px, rgba(255,255,255,.07) 113px 114px, transparent 115px),
    radial-gradient(circle at 84% 20%, rgba(229,9,23,.2), transparent 29%);
  transform: scale(1.2);
  transform-origin: 84% 20%;
  transition: opacity 1.15s ease 100ms, transform 1.7s cubic-bezier(.16,1,.3,1) 100ms;
  will-change: opacity, transform;
}
.viewer-page--contact.is-entered .viewer-page-hero::before { opacity: .38; transform: scale(1); }
.viewer-page--contact.is-entered .viewer-page-hero::after { opacity: 1; transform: scale(1); }

.viewer-page-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: #ff5b64;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.viewer-page-eyebrow i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--workspace-red);
  box-shadow: 0 0 14px rgba(229, 9, 23, 0.8);
}

.viewer-page-hero h1 {
  position: relative;
  max-width: 870px;
  margin: 0;
  font: 500 clamp(48px, 5.2vw, 82px)/0.94 "Space Grotesk", sans-serif;
  letter-spacing: -0.055em;
}

.viewer-page-hero .viewer-page-intro {
  position: relative;
  display: block;
  width: 100%;
  max-width: 680px;
  margin: clamp(26px, 3vw, 34px) 0 0;
  color: #b8b8bd;
  font-size: 16px;
  line-height: 1.65;
}

.viewer-scroll-cue {
  position: absolute;
  z-index: 5;
  top: 28%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 64px;
  height: 70px;
  padding: 4px 8px;
  border: 0;
  color: rgba(255, 255, 255, .58);
  background: transparent;
  font: 700 8px/1 "Inter", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  transition: color 220ms ease, opacity 300ms ease, transform 420ms var(--workspace-ease);
}

.viewer-scroll-cue > span {
  font-size: 8px;
  line-height: 1;
}

.viewer-scroll-cue > i {
  position: relative;
  display: block;
  width: 21px;
  height: 35px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.viewer-scroll-cue > i > b {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: #f12a35;
  box-shadow: 0 0 9px rgba(241, 42, 53, .72);
  transform: translate3d(-50%, 0, 0);
  animation: viewer-scroll-cue-pulse 1.85s cubic-bezier(.45, 0, .25, 1) infinite;
}

.viewer-scroll-cue:hover,
.viewer-scroll-cue:focus-visible { color: #fff; }
.viewer-scroll-cue:hover > i,
.viewer-scroll-cue:focus-visible > i {
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 0 22px rgba(213, 1, 13, .16);
}
.viewer-scroll-cue:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 5px; }
.viewer-scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 8px), 0);
}

@keyframes viewer-scroll-cue-pulse {
  0% { opacity: 0; transform: translate3d(-50%, -2px, 0); }
  24% { opacity: 1; }
  72% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(-50%, 14px, 0); }
}

/* The opening panel is structural, so it stays solid while only its type
   responds to the entrance and scroll position. */
.viewer-page-hero[data-viewer-reveal] {
  opacity: 1;
  transform: none;
}

.viewer-page-hero[data-viewer-reveal] .viewer-page-eyebrow,
.viewer-page-hero[data-viewer-reveal] .viewer-page-intro {
  opacity: var(--viewer-text-progress, 0);
  transform: translateY(calc((1 - var(--viewer-text-progress, 0)) * 30px));
  transition: none;
  will-change: opacity, transform;
}

.viewer-page.is-entry-animating .viewer-page-hero .viewer-page-eyebrow,
.viewer-page.is-entry-animating .viewer-page-hero .viewer-page-intro {
  transition: opacity 620ms var(--workspace-ease), transform 720ms var(--workspace-ease);
}

.viewer-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.viewer-word-mask:not(:last-child) {
  margin-right: 0.23em;
}

.viewer-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(108%);
  transition:
    opacity 720ms var(--workspace-ease) calc(var(--word-index, 0) * 48ms),
    transform 820ms var(--workspace-ease) calc(var(--word-index, 0) * 48ms);
}

[data-viewer-reveal].is-revealed .viewer-word {
  opacity: 1;
  transform: translateY(0);
}

.viewer-page--about .viewer-page-hero h1 em,
.viewer-page--services .viewer-page-hero h1 em,
.viewer-page--web-design .viewer-page-hero h1 em { color: var(--workspace-red); font-style: normal; }
.viewer-page .viewer-page-eyebrow {
  position: absolute;
  z-index: 1;
  top: clamp(38px, 6vw, 82px);
  left: clamp(38px, 6vw, 82px);
  margin: 0;
  padding: 13px 15px;
  max-width: calc(100% - 76px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  color: #d7d7dc;
  background: rgba(255, 255, 255, .07);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.viewer-page--about .viewer-page-eyebrow i,
.viewer-page--services .viewer-page-eyebrow i { display: none; }
.viewer-hero-word { display: inline-block; white-space: nowrap; }
.viewer-hero-char {
  --char-progress: clamp(0, calc((var(--viewer-progress, 0) - var(--char-order, 0) * .52) * 2.083), 1);
  display: inline-block;
  opacity: var(--char-progress);
  filter: blur(calc((1 - var(--char-progress)) * 8px));
  transform: translate3d(calc(var(--char-x, 0px) * (1 - var(--char-progress))), calc(var(--char-y, 7px) * (1 - var(--char-progress))), 0) scale(calc(.94 + var(--char-progress) * .06));
  transition: none;
  will-change: opacity, filter, transform;
}
.viewer-page.is-entry-animating .viewer-page-hero .viewer-hero-char {
  transition: opacity 520ms var(--onyx-scene-ease) var(--char-delay, 100ms), filter 680ms var(--onyx-scene-ease) var(--char-delay, 100ms), transform 760ms var(--onyx-scene-ease) var(--char-delay, 100ms);
}

.viewer-about-story { padding: clamp(58px, 8vw, 112px) clamp(48px, 7vw, 96px); background: #f4f4f2; border-bottom: 1px solid #c8c8c7; }
.viewer-about-story h2 { max-width: 760px; margin: 0; font: 500 clamp(40px, 5vw, 72px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-about-story-copy { max-width: none; margin: clamp(70px, 10vw, 136px) 0 0; color: #151517; font: 450 clamp(28px, 3.4vw, 50px)/1.14 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.viewer-about-story-copy p { margin: 0; }
.viewer-about-story-copy p + p { margin-top: .72em; }
.viewer-about-story-copy blockquote {
  --quote-line-progress: 0;
  position: relative;
  max-width: 24ch;
  margin: .9em 0;
  padding: .12em 0 .12em .88em;
  box-shadow: inset clamp(4px, .42vw, 7px) 0 0 rgba(213, 1, 13, .14);
  color: #101012;
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.05em;
}
.viewer-about-story-copy blockquote::before {
  content: "“";
  position: absolute;
  top: -.08em;
  left: .18em;
  color: var(--workspace-red);
  font-size: .72em;
  line-height: 1;
}
.viewer-about-story-copy blockquote::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(4px, .42vw, 7px);
  border-radius: 999px;
  background: var(--workspace-red);
  box-shadow: 0 0 18px rgba(213, 1, 13, .22);
  transform: scaleY(var(--quote-line-progress));
  transform-origin: 50% 0;
  transition: transform 90ms linear;
  will-change: transform;
}
.viewer-story-word { opacity: calc(.17 + var(--story-word-progress, 0) * .83); }
.viewer-about-principles { padding: clamp(58px, 7vw, 92px); color: #f5f5f6; background: radial-gradient(circle at 92% 14%, rgba(213, 1, 13, .13), transparent 34%), #0c0c0e; }
.viewer-about-principles > h2 { max-width: 580px; margin: 0; font: 600 clamp(42px, 5vw, 72px)/.94 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-about-principles > h2 em { color: var(--workspace-red); font-style: normal; }
.viewer-about-principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 76px); }
.viewer-about-principles article {
  --card-glow-x: 50%;
  --card-glow-y: 50%;
  position: relative;
  isolation: isolate;
  min-height: 154px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  transition: transform 520ms var(--workspace-ease), border-color 360ms ease, background-color 360ms ease, box-shadow 520ms var(--workspace-ease);
}
.viewer-about-principles article::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle 190px at var(--card-glow-x) var(--card-glow-y), rgba(213, 1, 13, .2), rgba(213, 1, 13, .055) 42%, transparent 72%);
  transition: opacity 360ms ease;
}
.viewer-about-principles article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  opacity: 0;
  transform: scaleX(.25);
  background: linear-gradient(90deg, transparent, rgba(255, 45, 57, .9), transparent);
  transition: opacity 360ms ease, transform 520ms var(--workspace-ease);
}
.viewer-about-principles h3 { position: relative; z-index: 1; margin: 0; color: #f1f1f3; font: 600 clamp(18px, 1.7vw, 24px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -.025em; transition: color 320ms ease, transform 520ms var(--workspace-ease); }
.viewer-about-principles p { position: relative; z-index: 1; max-width: 520px; margin: 14px 0 0; color: #96969d; font-size: 14px; line-height: 1.6; transition: color 320ms ease, transform 520ms var(--workspace-ease); }

@media (hover: hover) and (pointer: fine) {
  .viewer-about-principles article:hover {
    z-index: 2;
    transform: translateY(-7px) scale(1.008);
    border-color: rgba(255, 57, 69, .42);
    background-color: rgba(255, 255, 255, .04);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .32), 0 0 34px rgba(213, 1, 13, .1);
  }
  .viewer-about-principles article:hover::before,
  .viewer-about-principles article:hover::after { opacity: 1; }
  .viewer-about-principles article:hover::after { transform: scaleX(1); }
  .viewer-about-principles article:hover h3 { color: #fff; transform: translateY(-2px); }
  .viewer-about-principles article:hover p { color: #c0c0c6; transform: translateY(1px); }
}
.viewer-about-team { padding: clamp(58px, 7vw, 92px); color: #f5f5f6; background: radial-gradient(circle at 4% 8%, rgba(213, 1, 13, .1), transparent 30%), #111113; }
.viewer-about-team > h2 { max-width: 620px; margin: 0; font: 600 clamp(42px, 5vw, 72px)/.94 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-about-team > h2 em { color: var(--workspace-red); font-style: normal; }
.viewer-about-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(48px, 6vw, 76px); perspective: 1200px; }
.viewer-about-team article {
  --team-rotate-x: 0deg;
  --team-rotate-y: 0deg;
  --team-glow-x: 50%;
  --team-glow-y: 35%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: #151517;
  transform: rotateX(var(--team-rotate-x)) rotateY(var(--team-rotate-y));
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), border-color 520ms ease, box-shadow 720ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.viewer-about-team article::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 180px at var(--team-glow-x) var(--team-glow-y), rgba(255, 255, 255, .18), rgba(213, 1, 13, .08) 34%, transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 560ms ease;
}
.viewer-team-portrait { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; color: rgba(255, 255, 255, .92); background: radial-gradient(circle at 72% 22%, rgba(232, 16, 29, .5), transparent 27%), linear-gradient(145deg, #29292e, #121214 58%, #25070a); transform: translateZ(0); transition: transform 720ms cubic-bezier(.16, 1, .3, 1), filter 560ms ease; }
.viewer-team-portrait::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 25% 20%; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.viewer-team-portrait::after { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 72px rgba(213, 1, 13, .035); }
.viewer-team-portrait span { position: relative; z-index: 1; font: 500 clamp(80px, 10vw, 144px)/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; text-shadow: 0 18px 38px rgba(0, 0, 0, .36); transition: transform 720ms cubic-bezier(.16, 1, .3, 1); }
.viewer-team-portrait--photo::before,
.viewer-team-portrait--photo::after { display: none; }
.viewer-team-portrait img { --portrait-scale: 1; --portrait-y: 0%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: translateY(var(--portrait-y)) scale(var(--portrait-scale)); transition: transform 820ms cubic-bezier(.16, 1, .3, 1), filter 560ms ease; }
.viewer-team-portrait--closer img { --portrait-scale: 1.08; --portrait-y: 1.2%; }
.viewer-about-team article:nth-child(2) .viewer-team-portrait { background: radial-gradient(circle at 28% 18%, rgba(232, 16, 29, .46), transparent 28%), linear-gradient(215deg, #2d2d31, #131315 58%, #210609); }
.viewer-about-team h3 { position: relative; z-index: 2; margin: 0; padding: 22px 24px 24px; color: #f4f4f5; font: 600 clamp(22px, 2.2vw, 30px)/1 "Space Grotesk", sans-serif; letter-spacing: -.035em; transform: translateZ(0); transition: transform 720ms cubic-bezier(.16, 1, .3, 1), color 480ms ease; }

@media (hover: hover) and (pointer: fine) {
  .viewer-about-team article:hover {
    z-index: 3;
    transform: translateY(-11px) rotateX(var(--team-rotate-x)) rotateY(var(--team-rotate-y)) scale(1.02);
    border-color: rgba(255, 62, 74, .42);
    box-shadow: 0 30px 68px rgba(0, 0, 0, .42), 0 0 36px rgba(213, 1, 13, .12);
  }
  .viewer-about-team article:hover::before { opacity: 1; }
  .viewer-about-team article:hover .viewer-team-portrait { transform: translateZ(36px); filter: saturate(1.07) contrast(1.035); }
  .viewer-about-team article:hover .viewer-team-portrait img { transform: translateY(var(--portrait-y)) scale(calc(var(--portrait-scale) + .075)); }
  .viewer-about-team article:hover .viewer-team-portrait span { transform: scale(1.05); }
  .viewer-about-team article:hover h3 { color: #fff; transform: translateZ(46px) translateY(-2px); }
}

.viewer-about-team article.is-tilting {
  z-index: 3;
  transform: translateY(-11px) rotateX(var(--team-rotate-x)) rotateY(var(--team-rotate-y)) scale(1.02);
  border-color: rgba(255, 62, 74, .42);
  box-shadow: 0 30px 68px rgba(0, 0, 0, .42), 0 0 36px rgba(213, 1, 13, .12);
  transition-duration: 360ms, 460ms, 560ms;
}
.viewer-about-team article.is-tilting::before { opacity: 1; }
.viewer-about-team article.is-tilting .viewer-team-portrait { transform: translateZ(36px); filter: saturate(1.07) contrast(1.035); }
.viewer-about-team article.is-tilting .viewer-team-portrait img { transform: translateY(var(--portrait-y)) scale(calc(var(--portrait-scale) + .075)); }
.viewer-about-team article.is-tilting .viewer-team-portrait span { transform: scale(1.05); }
.viewer-about-team article.is-tilting h3 { color: #fff; transform: translateZ(46px) translateY(-2px); }

.viewer-about-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(430px, 72vh, 720px);
  place-items: center;
  perspective: 1000px;
  padding: clamp(70px, 10vw, 140px) clamp(24px, 6vw, 84px);
  overflow: hidden;
  color: #f5f5f3;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 50% 42%, rgba(213, 1, 13, .1), transparent 34%),
    radial-gradient(ellipse at 8% 24%, rgba(108, 18, 82, .12), transparent 34%),
    linear-gradient(115deg, #151017, #0d0d0f 52%, #18090c);
}

.viewer-about-cta-ambient {
  position: absolute;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  opacity: calc(.42 + var(--viewer-section-progress, .5) * .5);
  background:
    radial-gradient(circle at 54% 48%, rgba(213, 1, 13, .24), transparent 22%),
    radial-gradient(ellipse at 28% 62%, rgba(96, 13, 72, .2), transparent 36%),
    radial-gradient(circle at 76% 28%, rgba(255, 54, 66, .06), transparent 24%);
  transform: translate3d(calc(-3vw + var(--viewer-section-progress, .5) * 6vw), calc(24px - var(--viewer-section-progress, .5) * 46px), 0) scale(calc(.94 + var(--viewer-section-progress, .5) * .14));
  transition: opacity 100ms linear, transform 100ms linear;
  will-change: opacity, transform;
}

.viewer-about-cta-orbit {
  position: absolute;
  z-index: 1;
  left: clamp(-76px, 4vw, 72px);
  top: 16%;
  width: clamp(170px, 23vw, 330px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: calc(.34 + var(--viewer-section-progress, .5) * .5);
  transform-style: preserve-3d;
  transform: translate3d(calc(-5vw + var(--viewer-section-progress, .5) * 10vw), calc(42px - var(--viewer-section-progress, .5) * 68px), 0) rotateX(calc(68deg - var(--viewer-section-progress, .5) * 24deg)) rotateY(calc(-18deg + var(--viewer-section-progress, .5) * 32deg)) rotateZ(calc(-34deg + var(--viewer-section-progress, .5) * 58deg)) scale(calc(.88 + var(--viewer-section-progress, .5) * .14));
  transition: opacity 100ms linear, transform 100ms linear;
  will-change: opacity, transform;
}

.viewer-about-cta-orbit::before,
.viewer-about-cta-orbit::after,
.viewer-about-cta-orbit span {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.viewer-about-cta-orbit::before {
  inset: 3%;
  border: 2px solid rgba(255, 41, 53, .55);
  background: radial-gradient(circle at 36% 28%, rgba(255, 103, 112, .12), rgba(213, 1, 13, .035) 46%, transparent 68%);
  box-shadow: inset 0 0 28px rgba(255, 44, 56, .1), 0 0 34px rgba(213, 1, 13, .14);
  transform: translateZ(12px);
}

.viewer-about-cta-orbit::after {
  width: 27%;
  aspect-ratio: 1;
  top: 36.5%;
  left: 36.5%;
  background: radial-gradient(circle at 32% 27%, #ff6b73, #d5010d 42%, #670006 76%);
  box-shadow: inset -12px -14px 22px rgba(54, 0, 4, .45), 0 13px 34px rgba(213, 1, 13, .28);
  transform: translateZ(72px);
}

.viewer-about-cta-orbit span {
  inset: 17%;
  border: 1px solid rgba(255, 112, 121, .28);
  transform: translateZ(38px) rotateX(72deg) rotateY(18deg);
}

.viewer-about-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .3;
  background-image: radial-gradient(circle, rgba(255, 62, 74, .7) 0 2px, transparent 2.5px);
  background-position: 78% 19%;
  background-size: 340px 290px;
  mask-image: radial-gradient(circle at 78% 24%, #000, transparent 37%);
  transform: translate3d(calc(-2vw + var(--viewer-section-progress, .5) * 4vw), calc(18px - var(--viewer-section-progress, .5) * 36px), 0) scale(calc(.96 + var(--viewer-section-progress, .5) * .06));
  transition: transform 100ms linear;
  will-change: transform;
}

.viewer-about-cta-content { position: relative; z-index: 2; display: grid; justify-items: center; }

.viewer-about-cta h2 {
  max-width: 820px;
  margin: 0;
  font: 600 clamp(46px, 6.6vw, 92px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.055em;
}

.viewer-about-cta .viewer-hero-char {
  filter: none;
  transition: opacity 90ms linear, transform 90ms linear;
  will-change: opacity, transform;
}

.viewer-about-cta .nav-cta {
  position: relative;
  isolation: isolate;
  width: 168px;
  min-height: 50px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: #d5010d;
  box-shadow: 0 8px 24px rgba(213, 1, 13, .24);
  cursor: pointer;
}

.viewer-about-cta .nav-cta-label,
.viewer-about-cta .nav-cta-contact {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  backface-visibility: hidden;
  transition: opacity 300ms cubic-bezier(.8, 0, .2, 1), transform 440ms cubic-bezier(.8, 0, .2, 1);
  will-change: opacity, transform;
}

.viewer-about-cta .nav-cta-label {
  opacity: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
}

.viewer-about-cta .nav-cta-contact {
  opacity: 0;
  transform: translate3d(0, 13px, 0) scale(.76) rotate(-7deg);
}

.viewer-about-cta .nav-cta-contact svg { width: 25px; height: 25px; }

@media (hover: hover) and (pointer: fine) {
  .viewer-about-cta .nav-cta:hover .nav-cta-label {
    opacity: 0;
    transform: translate3d(0, -13px, 0) scale(.96);
  }

  .viewer-about-cta .nav-cta:hover .nav-cta-contact {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

.viewer-about-cta .nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.viewer-about-cta .nav-cta:focus-visible .nav-cta-label { opacity: 0; transform: translate3d(0, -13px, 0) scale(.96); }
.viewer-about-cta .nav-cta:focus-visible .nav-cta-contact { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }

@media (max-width: 900px) {
  .viewer-page-hero { min-height: var(--viewer-viewport-height, calc(100dvh - 82px)); }
}

@media (max-width: 760px) {
  .viewer-page .viewer-page-eyebrow { top: 34px; left: 22px; max-width: calc(100% - 44px); }
  .viewer-about-story { padding: 52px 22px 64px; }
  .viewer-about-story-copy { margin-top: 42px; }
  .viewer-about-principles { padding: 52px 22px 64px; }
  .viewer-about-principles-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .viewer-about-principles article { min-height: 0; }
  .viewer-about-team { padding: 52px 22px 64px; }
  .viewer-about-team-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .viewer-about-cta { min-height: 66vh; padding: 80px 22px; }
  .viewer-about-cta h2 { font-size: clamp(46px, 13vw, 64px); }
  .viewer-about-cta-orbit { left: -92px; top: 8%; width: 230px; }
}

.viewer-page-body {
  background: var(--workspace-paper);
}

[data-viewer-reveal] {
  --viewer-progress: 0;
  --viewer-text-progress: 0;
  opacity: 1;
  transform: none;
  transition: none;
}

.viewer-page.is-entry-animating [data-viewer-reveal] {
  transition: none;
}

.viewer-stat-board,
.viewer-route-board,
.viewer-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px 0;
  background: #c8c8c7;
}

.viewer-stat-board article {
  min-height: 240px;
  padding: clamp(28px, 4vw, 54px);
  background: #f4f4f2;
}

.viewer-stat-board span,
.viewer-index,
.viewer-end-panel > span,
.viewer-comparison article > span,
.viewer-question > span,
.viewer-answer > span {
  color: #d5010d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.viewer-stat-board strong {
  display: block;
  margin-top: 58px;
  font: 500 clamp(26px, 2.4vw, 40px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.viewer-stat-board p {
  max-width: 28ch;
  margin: 15px 0 0;
  color: #66666b;
  font-size: 14px;
  line-height: 1.6;
}

.viewer-feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  min-height: 390px;
  border-bottom: 1px solid #c8c8c7;
}

.viewer-feature-split > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
}

.viewer-feature-split > div + div { border-left: 1px solid #c8c8c7; }

.viewer-feature-split h2,
.viewer-end-panel h2 {
  max-width: 650px;
  margin: 20px 0 0;
  font: 500 clamp(38px, 4.2vw, 68px)/0.98 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.viewer-feature-split p {
  color: #626267;
  font-size: 16px;
  line-height: 1.68;
}

.viewer-page button {
  min-height: 48px;
  border-radius: 0;
}

.viewer-feature-split button,
.viewer-end-panel button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 0 18px;
  border: 1px solid #171719;
  color: #fff;
  background: #171719;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.viewer-feature-split button .ui-icon,
.viewer-end-panel button .ui-icon {
  --ui-icon-size: 18px;
  color: #ff3340;
  transition: transform 250ms var(--workspace-ease);
}

.viewer-feature-split button:hover .ui-icon,
.viewer-end-panel button:hover .ui-icon { transform: translate(3px, -3px); }

.viewer-route-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viewer-route-board button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  min-height: 180px;
  padding: 28px;
  border: 0;
  color: #161618;
  background: #f4f4f2;
  text-align: left;
  cursor: pointer;
}

.viewer-route-board button:hover { background: #e9e9e7; }
.viewer-route-board span { color: #d5010d; font-size: 10px; font-weight: 800; }
.viewer-route-board strong { font: 500 clamp(23px, 2.6vw, 38px)/1 "Space Grotesk", sans-serif; letter-spacing: -0.04em; }
.viewer-route-board .ui-icon { --ui-icon-size: 22px; color: #d5010d; }

.viewer-service-list article,
.viewer-process article {
  display: grid;
  grid-template-columns: minmax(82px, 0.18fr) minmax(0, 1fr);
  min-height: 310px;
  border-bottom: 1px solid #c8c8c7;
}

.viewer-service-list article > span,
.viewer-process article > span {
  padding: clamp(28px, 4vw, 54px);
  color: #d5010d;
  font-size: 11px;
  font-weight: 800;
  border-right: 1px solid #c8c8c7;
}

.viewer-service-list article > div,
.viewer-process article > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px);
}

.viewer-service-list h2,
.viewer-process h2,
.viewer-comparison h2 {
  margin: 0;
  font: 500 clamp(34px, 4vw, 62px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.viewer-service-list p,
.viewer-process p,
.viewer-comparison p {
  max-width: 660px;
  margin: 20px 0 0;
  color: #68686d;
  font-size: 16px;
  line-height: 1.68;
}

.viewer-service-list small {
  margin-top: 34px;
  color: #8a8a8e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.viewer-end-panel {
  padding: clamp(48px, 7vw, 96px);
  color: #f5f5f3;
  background: #0d0d0f;
}

.viewer-end-panel > span { color: #ff4a55; }
.viewer-end-panel button { color: #111113; background: #f4f4f2; border-color: #f4f4f2; }

.viewer-process {
  counter-reset: process;
}

.viewer-process article:nth-child(even) > div { background: #e9e9e7; }

.viewer-quote-panel {
  padding: clamp(52px, 8vw, 110px);
  color: #fff;
  background: linear-gradient(120deg, #0d0d0f 55%, #35080c);
}

.viewer-quote-panel blockquote {
  max-width: 920px;
  margin: 0;
  font: 500 clamp(38px, 5vw, 76px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.viewer-quote-panel p { margin: 38px 0 0; color: #ff4a55; font-size: 10px; font-weight: 800; letter-spacing: .14em; }

/* How we work */
.viewer-page--approach {
  --approach-paper: #f2f2ef;
  --approach-ink: #111113;
  --approach-muted: #66666c;
  container-type: inline-size;
}
.viewer-page--approach .viewer-page-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(213, 1, 13, .3), transparent 28%),
    linear-gradient(140deg, rgba(255, 255, 255, .035), transparent 46%),
    #0c0c0e;
}
.viewer-page--approach .viewer-page-hero h1 em { color: #ff3541; font-style: normal; }
.viewer-page--approach .viewer-page-body .viewer-hero-char {
  --char-progress: 1;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  will-change: auto;
}
.viewer-approach-start,
.viewer-approach-timelines,
.viewer-approach-launch,
.viewer-approach-faq {
  padding: clamp(72px, 8vw, 124px) clamp(36px, 7vw, 104px);
  color: var(--approach-ink);
  background: var(--approach-paper);
}
.viewer-approach-roadmap,
.viewer-approach-responsibilities,
.viewer-approach-human,
.viewer-approach-ownership,
.viewer-approach-cta {
  padding: clamp(72px, 8vw, 124px) clamp(36px, 7vw, 104px);
  color: #f5f5f3;
  background: #0c0c0e;
}
.viewer-approach-heading { display: grid; grid-template-columns: minmax(140px, .34fr) minmax(0, 1fr); gap: 20px 42px; align-items: start; }
.viewer-approach-heading > p:first-child,
.viewer-approach-human-copy > p:first-child,
.viewer-approach-ownership > div:first-child > p:first-child {
  margin: 7px 0 0;
  color: #d5010d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.viewer-approach-heading > p:first-child span,
.viewer-approach-human-copy > p:first-child span,
.viewer-approach-ownership > div:first-child > p:first-child span { margin-right: 10px; color: #ff4a55; }
.viewer-approach-heading h2,
.viewer-approach-human-copy h2,
.viewer-approach-ownership h2,
.viewer-approach-cta h2 {
  max-width: 780px;
  margin: 0;
  font: 500 clamp(42px, 5vw, 78px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.055em;
}
.viewer-approach-heading h2 em,
.viewer-approach-human-copy h2 em,
.viewer-approach-ownership h2 em { color: #d5010d; font-style: normal; }
.viewer-approach-heading--light h2 em,
.viewer-approach-human-copy h2 em,
.viewer-approach-ownership h2 em { color: #ff3541; }
.viewer-approach-lead {
  grid-column: 2;
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--approach-muted);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.68;
}
.viewer-approach-heading--light .viewer-approach-lead { color: #a5a5aa; }

.viewer-approach-start-grid,
.viewer-approach-time-grid,
.viewer-approach-ownership-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-top: clamp(48px, 7vw, 82px);
}
.viewer-approach-start-grid article,
.viewer-approach-time-grid article,
.viewer-approach-responsibility-grid article,
.viewer-approach-ownership-cards article {
  position: relative;
  overflow: hidden;
}
.viewer-approach-start-grid article::before,
.viewer-approach-time-grid article::before,
.viewer-approach-responsibility-grid article::before,
.viewer-approach-ownership-cards article::before,
.viewer-approach-check-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  background: #d5010d;
  transition: width 700ms cubic-bezier(.16, 1, .3, 1), background-color 420ms ease;
}
.viewer-approach-start-grid article:hover::before,
.viewer-approach-time-grid article:hover::before,
.viewer-approach-responsibility-grid article:hover::before,
.viewer-approach-ownership-cards article:hover::before,
.viewer-approach-check-grid article:hover::before { width: 100%; background: #ff3541; }
.viewer-approach-start-grid article {
  min-height: 300px;
  padding: 34px;
  border: 1px solid #d2d2ce;
  background: #f7f7f5;
  transition: border-color 520ms ease, background-color 520ms ease;
}
.viewer-approach-start-grid article:hover { border-color: rgba(213, 1, 13, .45); background: #fff; }
.viewer-approach-start-grid span,
.viewer-approach-responsibility-grid article > span,
.viewer-approach-ownership-cards article > span { color: #d5010d; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.viewer-approach-start-grid h3,
.viewer-approach-time-grid h3,
.viewer-approach-responsibility-grid h3,
.viewer-approach-ownership-cards h3 {
  margin: 62px 0 0;
  font: 550 clamp(25px, 2.2vw, 35px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
}
.viewer-approach-start-grid p,
.viewer-approach-time-grid p,
.viewer-approach-responsibility-grid p,
.viewer-approach-ownership-cards p {
  margin: 18px 0 0;
  color: #6b6b70;
  font-size: 14px;
  line-height: 1.65;
}

.viewer-approach-roadmap {
  background:
    radial-gradient(circle at 88% 4%, rgba(213, 1, 13, .18), transparent 24%),
    #0c0c0e;
}
.viewer-approach-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(52px, 7vw, 86px); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); }
.viewer-approach-steps article {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 360px;
  color: #f4f4f2;
  background: #111113;
  transition: background-color 520ms ease;
}
.viewer-approach-steps article:hover { background: #171012; }
.viewer-approach-steps article::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #d5010d; transition: width 720ms cubic-bezier(.16, 1, .3, 1); }
.viewer-approach-steps article:hover::after { width: 100%; }
.viewer-approach-steps article > span { padding-top: 30px; color: #ff4a55; font-size: 10px; font-weight: 800; text-align: center; border-right: 1px solid rgba(255, 255, 255, .12); }
.viewer-approach-steps article > div { display: flex; flex-direction: column; justify-content: center; padding: 38px; }
.viewer-approach-steps small { color: #ff4a55; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.viewer-approach-steps h3 { max-width: 15ch; margin: 22px 0 0; font: 540 clamp(28px, 2.8vw, 43px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-approach-steps p { max-width: 48ch; margin: 20px 0 0; color: #a5a5aa; font-size: 14px; line-height: 1.65; }
.viewer-approach-steps b { margin-top: auto; padding-top: 30px; color: #d8d8d5; font-size: 9px; letter-spacing: .08em; }

.viewer-approach-time-grid article { container-type: inline-size; min-height: 390px; padding: 34px; border: 1px solid #d1d1cd; background: #f7f7f5; transition: border-color 520ms ease, box-shadow 650ms ease; }
.viewer-approach-time-grid article:hover { border-color: rgba(213, 1, 13, .46); box-shadow: 0 26px 64px rgba(18, 18, 20, .1); }
.viewer-approach-time-grid small { color: #77777c; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.viewer-approach-time-grid strong { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 46px; color: #d5010d; font: 560 clamp(32px, 34cqi, 78px)/.9 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-approach-time-grid strong > span { flex: 0 0 auto; white-space: nowrap; }
.viewer-approach-time-grid strong em { flex: 0 0 auto; padding-bottom: 4px; color: #77777c; font-size: 13px; font-style: normal; letter-spacing: 0; }
.viewer-approach-time-grid h3 { margin-top: 48px; font-size: clamp(23px, 2vw, 31px); }
.viewer-approach-time-note { display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); gap: 24px 42px; margin-top: 24px; padding: 28px 0; border-top: 1px solid #c9c9c5; border-bottom: 1px solid #c9c9c5; }
.viewer-approach-time-note span { color: #d5010d; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.viewer-approach-time-note p { max-width: 720px; margin: 0; color: #66666c; font-size: 14px; line-height: 1.65; }

.viewer-approach-responsibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(50px, 7vw, 82px); }
.viewer-approach-responsibility-grid article { min-height: 590px; padding: 38px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .025); }
.viewer-approach-responsibility-grid article:nth-child(2) { background: linear-gradient(145deg, rgba(213, 1, 13, .11), transparent 52%), rgba(255, 255, 255, .025); }
.viewer-approach-responsibility-grid h3 { max-width: 12ch; margin-top: 72px; color: #f4f4f2; }
.viewer-approach-responsibility-grid ul { display: grid; gap: 0; margin: 38px 0 0; padding: 0; list-style: none; }
.viewer-approach-responsibility-grid li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid rgba(255, 255, 255, .1); color: #b4b4b8; font-size: 14px; line-height: 1.45; }
.viewer-approach-responsibility-grid li::before { content: "✓"; position: absolute; left: 0; color: #ff3541; font-weight: 800; }
.viewer-approach-access-note { margin: 24px 0 0; padding: 24px 28px; border: 1px solid rgba(255, 255, 255, .14); color: #a9a9ae; font-size: 14px; line-height: 1.6; }
.viewer-approach-access-note strong { color: #fff; }

.viewer-approach-human { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr); gap: clamp(48px, 8vw, 112px); align-items: center; min-height: var(--viewer-viewport-height, 720px); color: #161618; background: #efefec; }
.viewer-approach-human-copy h2 { margin-top: 34px; color: #111113; font-size: clamp(42px, 4.6vw, 72px); }
.viewer-approach-human-copy > p:not(:first-child) { max-width: 680px; margin: 28px 0 0; color: #66666b; font-size: 15px; line-height: 1.7; }
.viewer-approach-human-flow { position: relative; min-width: 0; overflow: hidden; padding: 0 30px; border: 1px solid #303033; border-radius: 18px; color: #f5f5f3; background: radial-gradient(ellipse at 100% 0%, rgba(213, 1, 13, .15), transparent 52%), #111113; box-shadow: 0 24px 60px rgba(16, 16, 18, .1); }
.viewer-approach-human-flow::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #d5010d; transform: scaleX(.22); transform-origin: left; transition: transform 620ms var(--workspace-ease); }
.viewer-approach-human-flow:hover::before { transform: scaleX(1); }
.viewer-approach-human-flow-heading { display: grid; gap: 10px; padding: 32px 0 26px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.viewer-approach-human-flow-heading > span { color: #ff5963; font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; }
.viewer-approach-human-flow-heading > small { color: #b4b4ba; font-size: 13px; line-height: 1.5; }
.viewer-approach-human-flow ol { margin: 0; padding: 0; list-style: none; }
.viewer-approach-human-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.viewer-approach-human-flow li::before { content: ""; position: absolute; inset: 0 -30px; pointer-events: none; opacity: 0; background: linear-gradient(100deg, rgba(213, 1, 13, .11), transparent 85%); transition: opacity 420ms ease; }
.viewer-approach-human-flow li:hover::before { opacity: 1; }
.viewer-approach-human-flow li > * { position: relative; min-width: 0; }
.viewer-approach-human-number { display: grid; place-items: center; align-self: start; width: 36px; height: 36px; border: 1px solid rgba(255, 89, 99, .4); border-radius: 50%; color: #ff5963; background: rgba(213, 1, 13, .06); font-size: 10px; font-weight: 800; transition: color 420ms ease, background-color 420ms ease, box-shadow 420ms ease; }
.viewer-approach-human-flow li:hover .viewer-approach-human-number { color: #fff; background: #d5010d; box-shadow: 0 0 0 6px rgba(213, 1, 13, .1); }
.viewer-approach-human-flow h3 { margin: 4px 0 0; color: #f5f5f3; font: 550 clamp(21px, 2vw, 27px)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.035em; overflow-wrap: break-word; }
.viewer-approach-human-flow li p { margin: 12px 0 0; color: #b4b4ba; font-size: 14px; line-height: 1.65; overflow-wrap: break-word; }
.viewer-approach-human-signoff { display: flex; align-items: center; gap: 12px; padding: 25px 0; }
.viewer-approach-human-signoff > span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; color: #ff5963; background: rgba(213, 1, 13, .12); font-size: 13px; }
.viewer-approach-human-signoff > p { margin: 0; color: #e2e2e5; font-size: 12px; font-weight: 600; line-height: 1.5; }
@container (max-width: 1100px) {
  .viewer-approach-human { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .viewer-approach-human-copy h2 { max-width: 18ch; font-size: clamp(40px, 6cqi, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-approach-human-flow::before,
  .viewer-approach-human-flow li::before,
  .viewer-approach-human-number { transition: none; }
}

.viewer-approach-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 7vw, 82px); }
.viewer-approach-check-grid article { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 22px; min-height: 170px; padding: 30px; border: 1px solid #d0d0cc; background: #f8f8f6; }
.viewer-approach-check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #d5010d; font-size: 18px; opacity: .36; transform: scale(.78); transition: opacity 620ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1); }
.viewer-approach-launch.is-render-active .viewer-approach-check { opacity: 1; transform: scale(1); }
.viewer-approach-check-grid article:nth-child(2) .viewer-approach-check { transition-delay: 80ms; }
.viewer-approach-check-grid article:nth-child(3) .viewer-approach-check { transition-delay: 160ms; }
.viewer-approach-check-grid article:nth-child(4) .viewer-approach-check { transition-delay: 240ms; }
.viewer-approach-check-grid article:nth-child(5) .viewer-approach-check { transition-delay: 320ms; }
.viewer-approach-check-grid article:nth-child(6) .viewer-approach-check { transition-delay: 400ms; }
.viewer-approach-check-grid h3 { margin: 4px 0 0; font: 550 23px/1.08 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.viewer-approach-check-grid p { margin: 14px 0 0; color: #6b6b70; font-size: 13px; line-height: 1.58; }
.viewer-approach-launch-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border: 1px solid #c9c9c5; }
.viewer-approach-launch-strip article { min-height: 116px; padding: 24px; border-right: 1px solid #c9c9c5; }
.viewer-approach-launch-strip article:last-child { border-right: 0; }
.viewer-approach-launch-strip span { color: #d5010d; font-size: 9px; font-weight: 800; }
.viewer-approach-launch-strip strong { display: block; margin-top: 28px; font: 550 17px/1.1 "Space Grotesk", sans-serif; }
.viewer-approach-launch-note { max-width: 760px; margin: 24px 0 0 auto; color: #66666c; font-size: 13px; line-height: 1.62; }

.viewer-approach-ownership { display: grid; grid-template-columns: minmax(220px, .5fr) minmax(0, 1fr); gap: clamp(50px, 7vw, 96px); background: radial-gradient(circle at 10% 90%, rgba(213, 1, 13, .16), transparent 28%), #0c0c0e; }
.viewer-approach-ownership > div:first-child > p:last-child { max-width: 470px; margin: 28px 0 0; color: #a4a4a9; font-size: 15px; line-height: 1.7; }
.viewer-approach-ownership h2 { margin-top: 32px; }
.viewer-approach-ownership-cards { grid-template-columns: 1fr; margin-top: 0; }
.viewer-approach-ownership-cards article { min-height: 250px; padding: 30px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .025); }
.viewer-approach-ownership-cards h3 { margin-top: 32px; color: #f5f5f3; font-size: clamp(25px, 2.2vw, 34px); }
.viewer-approach-ownership-cards p { max-width: 58ch; color: #a6a6ab; }
.viewer-approach-link { display: inline-flex; align-items: center; gap: 10px; min-height: 36px !important; margin-top: 22px; padding: 0; border: 0; color: #fff; background: transparent; font: 700 11px/1 "Inter", sans-serif; cursor: pointer; }
.viewer-approach-link .ui-icon { --ui-icon-size: 16px; color: #ff3541; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); }
.viewer-approach-link:hover .ui-icon { transform: translate(3px, -3px); }

.viewer-approach-faq { display: grid; grid-template-columns: minmax(240px, .58fr) minmax(0, 1fr); gap: clamp(46px, 8vw, 112px); }
.viewer-approach-faq .viewer-approach-heading { display: block; }
.viewer-approach-faq .viewer-approach-heading h2 { margin-top: 32px; }
.viewer-approach-faq-list { border-top: 1px solid #c9c9c5; }
.viewer-approach-faq-list details { border-bottom: 1px solid #c9c9c5; }
.viewer-approach-faq-list summary { position: relative; padding: 26px 44px 26px 0; cursor: pointer; list-style: none; font: 550 clamp(19px, 1.7vw, 25px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-approach-faq-list summary::-webkit-details-marker { display: none; }
.viewer-approach-faq-list summary i { position: absolute; top: 50%; right: 4px; width: 18px; height: 18px; transform: translateY(-50%); }
.viewer-approach-faq-list summary i::before,
.viewer-approach-faq-list summary i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: #d5010d; transition: transform 380ms ease; }
.viewer-approach-faq-list summary i::after { transform: rotate(90deg); }
.viewer-approach-faq-list details[open]:not([data-disclosure-expanded="false"]) summary i::after { transform: rotate(0); }
.viewer-approach-faq-list details p { max-width: 680px; margin: 0; padding: 0 44px 28px 0; color: #66666c; font-size: 14px; line-height: 1.68; }

.viewer-approach-cta { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: min(760px, var(--viewer-viewport-height, 760px)); overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(213, 1, 13, .28), transparent 29%), #0c0c0e; }
.viewer-approach-cta::before { content: ""; position: absolute; inset: 0; opacity: .36; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 25% 25%; mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent); }
.viewer-approach-cta > * { position: relative; z-index: 1; }
.viewer-approach-cta > p { margin: 0; color: #ff4a55; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.viewer-approach-cta h2 { margin-top: 30px; font-size: clamp(54px, 7vw, 104px); }
.viewer-approach-cta > span { max-width: 560px; margin-top: 28px; color: #aaaab0; font-size: 16px; line-height: 1.65; }
.viewer-approach-cta .foghorn-cta { width: min(100%, 350px); margin-top: 38px; }

@container (max-width: 760px) {
  .viewer-approach-heading { grid-template-columns: 1fr; }
  .viewer-approach-lead { grid-column: 1; }
  .viewer-approach-start-grid,
  .viewer-approach-time-grid { grid-template-columns: 1fr; }
  .viewer-approach-steps,
  .viewer-approach-responsibility-grid,
  .viewer-approach-check-grid { grid-template-columns: 1fr; }
  .viewer-approach-start-grid article,
  .viewer-approach-time-grid article { min-height: 330px; }
  .viewer-approach-steps article { min-height: 330px; }
  .viewer-approach-responsibility-grid article { min-height: 0; }
  .viewer-approach-human,
  .viewer-approach-ownership,
  .viewer-approach-faq { grid-template-columns: 1fr; }
  .viewer-approach-launch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-approach-launch-strip article:nth-child(2) { border-right: 0; }
  .viewer-approach-launch-strip article:nth-child(-n+2) { border-bottom: 1px solid #c9c9c5; }
}
@container (max-width: 480px) {
  .viewer-approach-start,
  .viewer-approach-timelines,
  .viewer-approach-launch,
  .viewer-approach-faq,
  .viewer-approach-roadmap,
  .viewer-approach-responsibilities,
  .viewer-approach-human,
  .viewer-approach-ownership,
  .viewer-approach-cta { padding: 58px 22px 68px; }
  .viewer-approach-heading h2,
  .viewer-approach-human-copy h2,
  .viewer-approach-ownership h2 { font-size: clamp(39px, 11vw, 52px); }
  .viewer-approach-start-grid article,
  .viewer-approach-time-grid article { min-height: 310px; padding: 28px; }
  .viewer-approach-steps article { grid-template-columns: 50px minmax(0, 1fr); min-height: 350px; }
  .viewer-approach-steps article > div { padding: 30px 24px; }
  .viewer-approach-steps h3 { font-size: 30px; }
  .viewer-approach-responsibility-grid article { padding: 30px 24px; }
  .viewer-approach-responsibility-grid h3 { margin-top: 52px; }
  .viewer-approach-human { min-height: 0; }
  .viewer-approach-human-flow { padding-inline: 22px; }
  .viewer-approach-human-flow li { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-block: 25px; }
  .viewer-approach-human-flow li::before { inset-inline: -22px; }
  .viewer-approach-human-number { width: 32px; height: 32px; }
  .viewer-approach-check-grid article { grid-template-columns: 42px 1fr; padding: 26px 22px; }
  .viewer-approach-check { width: 40px; height: 40px; }
  .viewer-approach-time-note { grid-template-columns: 1fr; }
  .viewer-approach-ownership-cards article { padding: 26px 22px; }
  .viewer-approach-launch-strip { grid-template-columns: 1fr; }
  .viewer-approach-launch-strip article { border-right: 0; border-bottom: 1px solid #c9c9c5; }
  .viewer-approach-launch-strip article:last-child { border-bottom: 0; }
  .viewer-approach-faq-list summary { font-size: 20px; }
  .viewer-approach-cta h2 { font-size: clamp(50px, 14vw, 68px); }
}

.viewer-conversation-demo {
  display: grid;
  gap: 24px;
  padding: clamp(42px, 7vw, 92px);
  color: #fff;
  background: #0d0d0f;
}

.viewer-question,
.viewer-answer {
  max-width: 72%;
  padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.16);
}

.viewer-question { justify-self: end; background: #202023; }
.viewer-answer { position: relative; background: #161618; }
.viewer-question p,
.viewer-answer p { margin: 12px 0 0; font: 500 clamp(20px, 2.4vw, 34px)/1.25 "Space Grotesk",sans-serif; letter-spacing: -.03em; }
.viewer-answer i { position: absolute; left: -1px; bottom: -1px; width: 34%; height: 2px; background: var(--workspace-red); box-shadow: 0 0 18px rgba(229,9,23,.55); }

.viewer-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #c8c8c7;
}

.viewer-comparison article { min-height: 350px; padding: clamp(34px, 5vw, 70px); }
.viewer-comparison article + article { border-left: 1px solid #c8c8c7; background: #e9e9e7; }
.viewer-comparison h2 { margin-top: 48px; }

.viewer-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.viewer-trust-grid span { min-height: 130px; padding: 28px 20px; color: #1b1b1d; background: #f4f4f2; font: 700 13px/1.4 "Space Grotesk",sans-serif; }
.viewer-trust-grid span::before { content: "+"; display: block; margin-bottom: 28px; color: #d5010d; }

.viewer-contact-form {
  display: grid;
  gap: 20px;
  padding: clamp(38px, 6vw, 82px);
}

.viewer-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.viewer-contact-form label { display: grid; gap: 9px; color: #3f3f43; font-size: 12px; font-weight: 700; }
.viewer-contact-form input,
.viewer-contact-form select,
.viewer-contact-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid #bebebd;
  border-radius: 0;
  color: #171719;
  background: #f8f8f6;
  font: 400 16px/1.45 "Inter",sans-serif;
}
.viewer-contact-form textarea { min-height: 150px; resize: vertical; }
.viewer-contact-form > button { justify-self: start; min-width: 220px; padding: 0 18px; border: 0; color: #fff; background: #d5010d; font-size: 12px; font-weight: 800; cursor: pointer; }
.viewer-contact-form > button .ui-icon { --ui-icon-size: 18px; float: none; margin: 0; }
.viewer-form-note,
.viewer-form-status { margin: 0; color: #747479; font-size: 12px; }
.viewer-contact-form.is-reviewing { box-shadow: inset 4px 0 #d5010d; }
.viewer-contact-form > .signal-lead-summary {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(213,1,13,.25);
  background: linear-gradient(135deg,rgba(213,1,13,.06),rgba(213,1,13,.015));
}

/* Signal service page readability pass. Keep compact interface labels distinct,
   while ensuring every explanatory sentence remains comfortable to read. */
.viewer-page--conversation-sites :is(
  .viewer-signal-section-head > p,
  .viewer-signal-handover-copy > p,
  .viewer-signal-knowledge-copy > p,
  .viewer-signal-cta p,
  .viewer-signal-demo-note,
  .viewer-signal-enquiry-label,
  .viewer-signal-visitor span,
  .viewer-signal-response > div > span,
  .viewer-signal-conclusion > span,
  .viewer-signal-outcome > span,
  .viewer-signal-discovery-note > span,
  .viewer-signal-visual-perspective small,
  .viewer-signal-visual-dialogue > small,
  .viewer-signal-visual-dialogue > div > span:last-child > small,
  .viewer-signal-visual-stage > header span,
  .viewer-signal-visual-stage > header small,
  .viewer-signal-contrast-grid article > span,
  .viewer-signal-contrast-grid b,
  .viewer-signal-difference-head span,
  .viewer-signal-shared-value span,
  .viewer-signal-existing-copy > p,
  .viewer-signal-existing-console header small,
  .viewer-signal-existing-platforms > small,
  .viewer-signal-existing-stack small,
  .viewer-signal-momentum-caption,
  .viewer-signal-context-status span,
  .viewer-signal-context-message small,
  .viewer-signal-enquiry-card header small,
  .viewer-signal-enquiry-card dt,
  .viewer-signal-enquiry-toggle small,
  .viewer-signal-enquiry-draft small,
  .viewer-signal-safety-status
) { font-size: 10px; line-height: 1.35; }

.viewer-page--conversation-sites .viewer-signal-prompts button { font-size: 14px; }
.viewer-page--conversation-sites .viewer-signal-prompts button small { font-size: 12.5px; line-height: 1.45; }
.viewer-page--conversation-sites .viewer-signal-visual-dialogue > div p { font-size: 14.5px; line-height: 1.68; }
.viewer-page--conversation-sites .viewer-signal-visual-tabs button { min-height: 78px; padding: 15px 17px; }
.viewer-page--conversation-sites .viewer-signal-visual-tabs button > span { font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-visual-tabs button strong { font-size: 15px; line-height: 1.25; }
.viewer-page--conversation-sites .viewer-signal-visual-tabs button small { color: #8f8f95; font-size: 12px; line-height: 1.45; }
.viewer-page--conversation-sites .viewer-signal-visual-tabs button.is-active small { color: #b8b8bd; }

.viewer-page--conversation-sites .viewer-signal-product-count { font-size: 13px; }
.viewer-page--conversation-sites .viewer-signal-product-count span,
.viewer-page--conversation-sites .viewer-signal-product-image > span,
.viewer-page--conversation-sites .viewer-signal-product-body > small { font-size: 9.5px; line-height: 1.3; }
.viewer-page--conversation-sites .viewer-signal-product-body > p { min-height: 66px; font-size: 13px; line-height: 1.6; }
.viewer-page--conversation-sites .viewer-signal-product-body footer b { font-size: 12px; }
.viewer-page--conversation-sites .viewer-signal-product-body footer span { font-size: 11px; }
.viewer-page--conversation-sites .viewer-signal-image-feature span { font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-image-feature p { font-size: 13px; line-height: 1.65; }
.viewer-page--conversation-sites .viewer-signal-image-pair figcaption { font-size: 12px; line-height: 1.45; }

.viewer-page--conversation-sites .viewer-signal-presentation-frame > header > span { width: 40px; height: 34px; font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-presentation-frame header strong { font-size: 13px; }
.viewer-page--conversation-sites .viewer-signal-presentation-frame header small,
.viewer-page--conversation-sites .viewer-signal-presentation-formats span,
.viewer-page--conversation-sites .viewer-signal-presentation-formats small,
.viewer-page--conversation-sites .viewer-signal-itinerary-intro small,
.viewer-page--conversation-sites .viewer-signal-itinerary-days b,
.viewer-page--conversation-sites .viewer-signal-presentation-range > span,
.viewer-page--conversation-sites .viewer-signal-visual-next span { font-size: 9.5px; line-height: 1.35; }
.viewer-page--conversation-sites .viewer-signal-presentation-formats { padding-block: 13px; }
.viewer-page--conversation-sites .viewer-signal-itinerary-intro { padding: 29px 24px 24px; }
.viewer-page--conversation-sites .viewer-signal-itinerary-intro p { font-size: 12.5px; line-height: 1.65; }
.viewer-page--conversation-sites .viewer-signal-itinerary-map > span { padding: 6px 8px; font-size: 9.5px; }
.viewer-page--conversation-sites .viewer-signal-itinerary-map > span b { width: 19px; height: 19px; font-size: 8px; }
.viewer-page--conversation-sites .viewer-signal-itinerary-days span { min-height: 74px; padding: 13px; font-size: 11.5px; line-height: 1.5; }
.viewer-page--conversation-sites .viewer-signal-presentation-range b { padding: 8px 10px; font-size: 10.5px; }
.viewer-page--conversation-sites .viewer-signal-visual-next { padding: 16px 17px; }
.viewer-page--conversation-sites .viewer-signal-visual-next strong { font-size: 13px; line-height: 1.45; }
.viewer-page--conversation-sites .viewer-signal-visual-stage > footer { color: #99999f; font-size: 11.5px; line-height: 1.6; }

.viewer-page--conversation-sites .viewer-signal-difference-row > span,
.viewer-page--conversation-sites .viewer-signal-difference-row > strong { font-size: 14px; line-height: 1.55; }
.viewer-page--conversation-sites .viewer-signal-existing-copy li small { font-size: 13px; line-height: 1.6; }
.viewer-page--conversation-sites .viewer-signal-existing-assurance strong { font-size: 14px; }
.viewer-page--conversation-sites .viewer-signal-existing-assurance span { font-size: 12.5px; line-height: 1.6; }
.viewer-page--conversation-sites .viewer-signal-existing-console header > span,
.viewer-page--conversation-sites .viewer-signal-existing-platforms span,
.viewer-page--conversation-sites .viewer-signal-existing-stack article > i,
.viewer-page--conversation-sites .viewer-signal-existing-stack article > b { font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-existing-platforms p { font-size: 12px; line-height: 1.55; }
.viewer-page--conversation-sites .viewer-signal-existing-stack strong { font-size: 14px; }
.viewer-page--conversation-sites .viewer-signal-existing-stack article span { font-size: 12px; line-height: 1.5; }
.viewer-page--conversation-sites .viewer-signal-existing-console > footer span { font-size: 9.5px; }
.viewer-page--conversation-sites .viewer-signal-existing-console > footer strong { font-size: 12.5px; line-height: 1.5; }

.viewer-page--conversation-sites .viewer-signal-momentum-point b { font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-momentum-point small { font-size: 13.5px; line-height: 1.55; }
.viewer-page--conversation-sites .viewer-signal-value-strip small { color: #929298; font-size: 13px; line-height: 1.55; }
.viewer-page--conversation-sites .viewer-signal-context-steps button > span { font-size: 10px; }
.viewer-page--conversation-sites .viewer-signal-context-steps button strong { font-size: 14.5px; }
.viewer-page--conversation-sites .viewer-signal-context-status b,
.viewer-page--conversation-sites .viewer-signal-context-memory span { font-size: 11px; }
.viewer-page--conversation-sites .viewer-signal-context-stage footer strong { font-size: 14px; }

.viewer-page--conversation-sites .viewer-signal-handover-copy li strong { font-size: 15px; }
.viewer-page--conversation-sites .viewer-signal-handover-copy li span { font-size: 14px; line-height: 1.6; }
.viewer-page--conversation-sites .viewer-signal-enquiry-person strong,
.viewer-page--conversation-sites .viewer-signal-enquiry-person > span { font-size: 14px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-person small { font-size: 12px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-card dd { font-size: 13px; line-height: 1.55; }
.viewer-page--conversation-sites .viewer-signal-enquiry-toggle strong { font-size: 13.5px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-draft p { font-size: 13px; line-height: 1.72; }
.viewer-page--conversation-sites .viewer-signal-enquiry-steps strong { font-size: 12.5px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-steps small { font-size: 11px; line-height: 1.5; }
.viewer-page--conversation-sites .viewer-signal-enquiry-thread > span { font-size: 12px; line-height: 1.6; }
.viewer-page--conversation-sites .viewer-signal-enquiry-thread small { font-size: 9.5px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-card > footer > span { font-size: 12px; }
.viewer-page--conversation-sites .viewer-signal-enquiry-card > footer strong { font-size: 13px; }
.viewer-page--conversation-sites .viewer-signal-knowledge-copy li { font-size: 14px; }
.viewer-page--conversation-sites .viewer-signal-safety-checks span { font-size: 12px; }
.viewer-page--conversation-sites .viewer-signal-safety-rules p,
.viewer-page--conversation-sites .viewer-signal-faq details > p { font-size: 14.5px; line-height: 1.65; }

@media (max-width: 760px) {
  .viewer-page--conversation-sites .viewer-signal-visual-dialogue > div p,
  .viewer-page--conversation-sites .viewer-signal-difference-row > span,
  .viewer-page--conversation-sites .viewer-signal-difference-row > strong,
  .viewer-page--conversation-sites .viewer-signal-handover-copy li span,
  .viewer-page--conversation-sites .viewer-signal-safety-rules p,
  .viewer-page--conversation-sites .viewer-signal-faq details > p { font-size: 14px; }
  .viewer-page--conversation-sites .viewer-signal-product-body > p,
  .viewer-page--conversation-sites .viewer-signal-image-feature p,
  .viewer-page--conversation-sites .viewer-signal-enquiry-draft p { font-size: 13px; }
  .viewer-page--conversation-sites .viewer-signal-itinerary-intro p,
  .viewer-page--conversation-sites .viewer-signal-itinerary-days span { font-size: 12px; }
}

@media (max-width: 760px) {
  .viewer-scroll-cue {
    display: none;
  }
  .viewer-page-hero .viewer-page-intro { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-scroll-cue > i > b { animation: none; opacity: 1; }
  .viewer-page--services .viewer-page-hero::before,
  .viewer-page--services .viewer-page-hero::after,
  .viewer-page--approach .viewer-page-hero::before,
  .viewer-page--approach .viewer-page-hero::after,
  .viewer-page--contact .viewer-page-hero::before,
  .viewer-page--contact .viewer-page-hero::after {
    transition: none;
    will-change: auto;
  }
}
.viewer-contact-form > .signal-lead-summary > span {
  color: #d5010d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}
.viewer-contact-form > .signal-lead-summary > strong { color: #171719; font: 650 19px/1.2 "Space Grotesk",sans-serif; }
.viewer-contact-form > .signal-lead-summary ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.viewer-contact-form > .signal-lead-summary li { color: #55555a; font-size: 13px; line-height: 1.45; }

.signal-conversation-consent {
  min-inline-size: 0;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid #c8c8c7;
  background: rgba(255,255,255,.42);
}
.contact-form > .signal-conversation-consent,
.adaptive-contact-form.contact-form > .signal-conversation-consent { grid-column: 1 / -1; }
.signal-conversation-consent legend {
  padding: 0 6px;
  color: inherit;
  font: 750 12px/1.3 "Space Grotesk",sans-serif;
}
.signal-conversation-consent .signal-conversation-choice {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.signal-conversation-consent .signal-conversation-choice input[type="checkbox"] {
  appearance: auto;
  width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  accent-color: #d5010d;
}
.signal-conversation-consent > p { margin: 7px 0 0; color: #707075; font-size: 12px; line-height: 1.5; }
.signal-conversation-consent details { margin-top: 14px; border-top: 1px solid rgba(90,90,94,.22); padding-top: 12px; }
.signal-conversation-consent summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 12px; font-weight: 700; }
.signal-conversation-consent pre {
  max-height: 240px;
  margin: 8px 0 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid #d1d1cf;
  background: #fff;
  color: #353538;
  font: 400 12px/1.55 "Inter",sans-serif;
}
.contact-form .signal-conversation-consent,
.adaptive-contact-form.contact-form .signal-conversation-consent { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.025); color: #f2f2f4; }
.contact-form .signal-conversation-consent > p,
.adaptive-contact-form.contact-form .signal-conversation-consent > p { color: #a9a9ae; }
.contact-form .signal-conversation-consent details,
.adaptive-contact-form.contact-form .signal-conversation-consent details { border-color: rgba(255,255,255,.13); }
.contact-form .signal-conversation-consent pre,
.adaptive-contact-form.contact-form .signal-conversation-consent pre { border-color: #35353a; background: #101012; color: #d7d7da; }
.signal-conversation-consent :focus-visible { outline: 3px solid rgba(213,1,13,.35); outline-offset: 3px; }
.contact-form > .form-review-note { grid-column: 1 / -1; margin: 0; color: #9d9da2; font-size: 12px; line-height: 1.5; }
.viewer-contact-form .optional { color: #7c7c81; font-size: 10px; font-weight: 500; }
.viewer-form-status:focus,
.form-status:focus { outline: none; }

.viewer-page-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px clamp(24px, 5vw, 58px);
  border-top: 1px solid #c8c8c7;
  color: #77777c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.viewer-services-catalogue {
  container-type: inline-size;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(58px, 8vw, 112px) clamp(48px, 7vw, 96px);
  color: #151517;
  background: #f4f4f2;
  border-bottom: 1px solid #c8c8c7;
}
.viewer-services-catalogue-head {
  display: grid;
  grid-template-columns: minmax(130px, .3fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
.viewer-services-catalogue-head > p {
  margin: .55em 0 0;
  color: var(--workspace-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}
.viewer-services-catalogue-head h2 {
  max-width: 760px;
  margin: 0;
  font: 500 clamp(38px, 4.3vw, 60px)/.98 "Space Grotesk", sans-serif;
  letter-spacing: -.055em;
}
.viewer-services-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(42px, 6vw, 72px);
  perspective: 1400px;
}
.viewer-service-card {
  --service-glow-x: 78%;
  --service-glow-y: 18%;
  --service-rotate-x: 0deg;
  --service-rotate-y: 0deg;
  --service-lift: 0px;
  min-width: 0;
  min-height: clamp(350px, 31vw, 420px);
  height: 100%;
  opacity: 1;
  transform: translate3d(0, var(--service-lift), 0) rotateX(var(--service-rotate-x)) rotateY(var(--service-rotate-y));
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), opacity 420ms ease;
  will-change: auto;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.viewer-service-card-surface {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 34px);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: clamp(14px, 1.4vw, 20px);
  color: #f7f7f5;
  background: #101012;
  box-shadow: 0 24px 70px rgba(15, 15, 17, .13), inset 0 1px rgba(255, 255, 255, .035);
  text-align: left;
  transition: border-color 520ms ease, box-shadow 720ms cubic-bezier(.16, 1, .3, 1), background-color 520ms ease;
}
button.viewer-service-card-surface {
  appearance: none;
  font: inherit;
  cursor: pointer;
}
.viewer-service-card--signal .viewer-service-card-surface {
  background:
    linear-gradient(145deg, rgba(213, 1, 13, .18), transparent 47%),
    radial-gradient(circle at 88% 10%, rgba(229, 9, 23, .22), transparent 34%),
    #101012;
}
.viewer-service-card--web .viewer-service-card-surface {
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    radial-gradient(circle at 82% 12%, rgba(213, 1, 13, .13), transparent 30%),
    #101012;
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.viewer-service-card--care .viewer-service-card-surface {
  background:
    linear-gradient(90deg, rgba(213, 1, 13, .16), transparent 42%),
    radial-gradient(circle at 90% 50%, rgba(255, 70, 81, .15), transparent 24%),
    #101012;
}
.viewer-service-card--care .viewer-service-card-copy { max-width: min(650px, 68%); }
.viewer-service-card--care .viewer-service-card-description { max-width: 66ch; }
.viewer-service-card--growth .viewer-service-card-surface {
  background:
    linear-gradient(135deg, rgba(36, 73, 65, .26), transparent 47%),
    radial-gradient(circle at 88% 12%, rgba(255, 70, 81, .14), transparent 30%),
    #101012;
}
.viewer-service-card-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background: radial-gradient(380px circle at var(--service-glow-x) var(--service-glow-y), rgba(255, 62, 74, .18), transparent 64%);
  transition: opacity 560ms ease;
}
.viewer-service-card-badge {
  align-self: flex-start;
  padding: 6px 9px;
  border: 1px solid rgba(255, 84, 94, .42);
  border-radius: 999px;
  color: #ff6972;
  background: rgba(213, 1, 13, .08);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .16em;
}
.viewer-service-card-visual {
  position: absolute;
  z-index: 2;
  top: clamp(22px, 2.5vw, 34px);
  right: clamp(22px, 2.5vw, 34px);
  width: clamp(68px, 7vw, 94px);
  aspect-ratio: 1;
  transform: translateZ(26px);
  transform-origin: 50% 50%;
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), filter 620ms ease, box-shadow 720ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform, filter;
}
.viewer-service-card-visual--signal.signal-orb {
  transform: translateZ(26px) scale(1);
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1), filter 620ms ease;
}
.viewer-service-card-visual--signal .signal-orb-ring--outer { inset: 5%; }
.viewer-service-card-visual--signal .signal-orb-ring--inner { inset: 23%; }
.viewer-service-card-visual--signal .signal-orb-core { width: 23%; }
.viewer-service-card-visual--signal .signal-orb-node { width: 8%; }
.viewer-service-card-visual--web {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
  box-shadow: 18px 20px 0 -8px rgba(213, 1, 13, .16), 28px 32px 0 -12px rgba(255, 255, 255, .04);
}
.viewer-service-card-visual--web::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4651;
  box-shadow: 13px 0 rgba(255, 255, 255, .22), 26px 0 rgba(255, 255, 255, .1);
}
.viewer-service-card-visual--web::after {
  content: "";
  position: absolute;
  inset: 34px 13px 13px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  background: linear-gradient(135deg, rgba(213, 1, 13, .28), transparent 48%);
  opacity: .62;
  transform: translateX(-3px);
  transition: opacity 580ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1);
}
.viewer-service-card-visual--web i {
  position: absolute;
  z-index: 1;
  left: 24px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  opacity: .72;
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: opacity 540ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1);
}
.viewer-service-card-visual--web i:nth-child(1) { top: 52%; width: 48%; }
.viewer-service-card-visual--web i:nth-child(2) { top: 62%; width: 34%; background: #e52b36; }
.viewer-service-card-visual--web i:nth-child(3) { top: 76%; width: 58%; background: rgba(255, 255, 255, .2); }
.viewer-service-card-visual--care {
  display: grid;
  align-content: center;
  gap: 7px;
  width: clamp(68px, 7vw, 94px);
  padding: clamp(10px, 1vw, 14px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  box-shadow: 14px 16px 0 -8px rgba(213, 1, 13, .18);
}
.viewer-service-card-visual--care::before {
  content: "SITE STATUS";
  color: #77777d;
  font-size: 5px;
  font-weight: 800;
  letter-spacing: .14em;
}
.viewer-service-card-visual--care i {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}
.viewer-service-card-visual--care i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #d5010d, #ff4a55);
  transform: scaleX(var(--care-status, .56));
  transform-origin: 0 50%;
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
}
.viewer-service-card-visual--care i:nth-child(2)::after { --care-status: .78; }
.viewer-service-card-visual--care i:nth-child(3)::after { --care-status: .92; }
.viewer-service-card-visual--care i:nth-child(1)::after { --care-peak: .92; }
.viewer-service-card-visual--care i:nth-child(2)::after { --care-peak: .64; }
.viewer-service-card-visual--care i:nth-child(3)::after { --care-peak: 1; }
.viewer-service-card-visual--care b {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4be39a;
  box-shadow: 0 0 0 4px rgba(75, 227, 154, .1);
}
.viewer-service-card-visual--growth {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 6px;
  width: clamp(68px, 7vw, 94px);
  padding: clamp(10px, 1vw, 14px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
}
.viewer-service-card-visual--growth::before { content: "SEARCH"; position: absolute; top: 9px; left: 11px; color: #77777d; font-size: 5px; font-weight: 800; letter-spacing: .14em; }
.viewer-service-card-visual--growth i { width: 20%; height: var(--growth-bar, 32%); border-radius: 3px 3px 0 0; background: linear-gradient(#ff4a55, #a30611); transform: scaleY(1); transform-origin: 50% 100%; transition: transform 620ms cubic-bezier(.16, 1, .3, 1); }
.viewer-service-card-visual--growth i:nth-child(2) { --growth-bar: 52%; }
.viewer-service-card-visual--growth i:nth-child(3) { --growth-bar: 76%; }
.viewer-service-card-visual--growth i:nth-child(1) { --growth-pulse: 1.42; }
.viewer-service-card-visual--growth i:nth-child(2) { --growth-pulse: 1.24; }
.viewer-service-card-visual--growth i:nth-child(3) { --growth-pulse: 1.12; }
.viewer-service-card-visual--growth b { position: absolute; right: 10px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #4be39a; box-shadow: 0 0 0 4px rgba(75, 227, 154, .1); }
.viewer-service-card-visual--growth:hover {
  transform: translateZ(42px) translateY(-5px) rotateZ(1.4deg);
  border-color: rgba(255, 74, 85, .4);
  box-shadow: 17px 20px 0 -8px rgba(213, 1, 13, .22);
}
.viewer-service-card-visual--care:hover {
  transform: translateZ(42px);
  border-color: rgba(255, 74, 85, .4);
  box-shadow: 17px 20px 0 -8px rgba(213, 1, 13, .26);
}

.viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .viewer-service-card-visual--signal {
  transform: translateZ(44px) scale(1.12);
}
.viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .viewer-service-card-visual--signal::before {
  border-color: rgba(255, 75, 86, .84);
}
.viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-ring--outer {
  box-shadow: 0 0 28px rgba(255, 55, 68, .7), inset 0 0 14px rgba(255, 55, 68, .22);
}
.viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-ring--inner {
  box-shadow: 0 0 20px rgba(255, 55, 68, .58), inset 0 0 10px rgba(255, 55, 68, .18);
}

.viewer-service-card-visual--web:hover {
  transform: translateZ(42px) translateY(-5px) rotateZ(1.4deg);
  box-shadow: 22px 26px 0 -8px rgba(213, 1, 13, .24), 34px 40px 0 -12px rgba(255, 255, 255, .07);
}
.viewer-service-card-visual--web:hover::after {
  opacity: 1;
  transform: translateX(4px);
}
.viewer-service-card-visual--web:hover i {
  opacity: 1;
  transform: scaleX(1.1);
}
.viewer-service-card-visual--web i:nth-child(2) { transition-delay: 70ms; }
.viewer-service-card-visual--web i:nth-child(3) { transition-delay: 140ms; }

@media (prefers-reduced-motion: no-preference) {
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .viewer-service-card-visual--signal::before { animation: signal-orb-shell-active 1.65s cubic-bezier(.45, 0, .2, 1) infinite; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-ring--outer { animation: signal-orb-ring-active 1.15s cubic-bezier(.45, 0, .2, 1) infinite; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-ring--inner { animation: signal-orb-ring-active 1.15s cubic-bezier(.45, 0, .2, 1) -.38s infinite reverse; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-core { animation: signal-orb-core-active .78s ease-in-out infinite; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-node--one { animation: signal-orb-node-active-one 1.35s ease-in-out infinite; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-node--two { animation: signal-orb-node-active-two 1.72s cubic-bezier(.45, 0, .2, 1) -.63s infinite; }
  .viewer-service-card--signal:is(:hover, .is-tilting, :focus-within) .signal-orb-node--three { animation: signal-orb-node-active-three 1.48s cubic-bezier(.37, 0, .3, 1) -.91s infinite; }
  .viewer-service-card-visual--web:hover::after {
    animation: service-web-sheen-loop 2.7s ease-in-out infinite;
  }
  .viewer-service-card-visual--web:hover i {
    animation: service-web-line-loop 2.5s ease-in-out infinite;
  }
  .viewer-service-card-visual--web:hover i:nth-child(2) { animation-delay: -830ms; }
  .viewer-service-card-visual--web:hover i:nth-child(3) { animation-delay: -1660ms; }
  .viewer-service-card-visual--care:hover i::after {
    animation: service-care-status-loop 2.35s cubic-bezier(.45, 0, .2, 1) infinite;
  }
  .viewer-service-card-visual--care:hover i:nth-child(2)::after { animation-delay: -780ms; }
  .viewer-service-card-visual--care:hover i:nth-child(3)::after { animation-delay: -1560ms; }
  .viewer-service-card-visual--care:hover b,
  .viewer-service-card-visual--growth:hover b {
    animation: service-status-dot-loop 1.45s ease-in-out infinite;
  }
  .viewer-service-card-visual--growth:hover i {
    animation: service-growth-bar-loop 2.15s cubic-bezier(.45, 0, .2, 1) infinite;
  }
  .viewer-service-card-visual--growth:hover i:nth-child(2) { animation-delay: -720ms; }
  .viewer-service-card-visual--growth:hover i:nth-child(3) { animation-delay: -1440ms; }
}

@keyframes service-web-sheen-loop {
  0%, 100% { opacity: 1; transform: translateX(4px); }
  50% { opacity: .68; transform: translateX(11px); }
}
@keyframes service-web-line-loop {
  0%, 100% { opacity: 1; transform: scaleX(1.1); }
  50% { opacity: .48; transform: scaleX(.72); }
}
@keyframes service-care-status-loop {
  0%, 100% { transform: scaleX(var(--care-status, .56)); }
  50% { transform: scaleX(var(--care-peak, .92)); }
}
@keyframes service-growth-bar-loop {
  0%, 100% { transform: scaleY(1); filter: brightness(1); }
  50% { transform: scaleY(var(--growth-pulse, 1.3)); filter: brightness(1.24); }
}
@keyframes service-status-dot-loop {
  0%, 100% { box-shadow: 0 0 0 4px rgba(75, 227, 154, .1), 0 0 0 rgba(75, 227, 154, 0); }
  50% { box-shadow: 0 0 0 6px rgba(75, 227, 154, .06), 0 0 14px rgba(75, 227, 154, .58); }
}
.viewer-service-card-copy {
  display: block;
  max-width: 610px;
  margin-top: auto;
  transform: translateZ(34px);
}
.viewer-service-card-title {
  display: block;
  max-width: 16ch;
  color: #f7f7f5;
  font: 620 clamp(28px, 2.35vw, 38px)/.98 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
}
.viewer-service-card-tagline {
  display: block;
  max-width: 26ch;
  margin-top: 12px;
  color: #e5e5e5;
  font: 520 clamp(18px, 1.35vw, 22px)/1.12 "Space Grotesk", sans-serif;
  letter-spacing: -.025em;
}
.viewer-service-card-description {
  display: block;
  max-width: 58ch;
  margin-top: 14px;
  color: #ababaf;
  font-size: clamp(13px, .95vw, 14.5px);
  line-height: 1.58;
}
.viewer-service-card-action {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(20px, 2.4vw, 28px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  transform: translateZ(38px);
}
.viewer-service-card-action .ui-icon { --ui-icon-size: 17px; color: #ff4a55; }

@media (hover: hover) and (pointer: fine) {
  .viewer-service-card:hover { --service-lift: -7px; }
  .viewer-service-card:hover .viewer-service-card-surface { border-color: rgba(255, 78, 89, .36); box-shadow: 0 34px 90px rgba(15, 15, 17, .24), inset 0 1px rgba(255, 255, 255, .055); }
  .viewer-service-card:hover .viewer-service-card-glow { opacity: 1; }
}

.viewer-service-card.is-tilting {
  --service-lift: -7px;
  transition-duration: 360ms, 420ms;
  will-change: transform;
}
.viewer-service-card.is-tilting .viewer-service-card-surface { border-color: rgba(255, 78, 89, .36); box-shadow: 0 34px 90px rgba(15, 15, 17, .24), inset 0 1px rgba(255, 255, 255, .055); }
.viewer-service-card.is-tilting .viewer-service-card-glow { opacity: 1; }

@container (max-width: 720px) {
  .viewer-services-card-grid { grid-template-columns: 1fr; }
  .viewer-service-card { min-height: 400px; }
  .viewer-service-card--care .viewer-service-card-copy { max-width: 100%; }
}

/* Web design — opening editorial section */
.viewer-page--web-design {
  --web-coral: #ff4651;
  --web-paper: #f2f2ef;
  container-type: inline-size;
}

.viewer-page--web-design .viewer-page-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(229, 9, 23, .28), transparent 31%),
    radial-gradient(circle at 8% 88%, rgba(114, 11, 20, .18), transparent 32%),
    #09090b;
}

.viewer-web-foundation {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(48px, 7vw, 112px);
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(72px, 9vw, 132px) clamp(34px, 7vw, 104px);
  overflow: hidden;
  color: #f4f4f2;
  background:
    radial-gradient(circle at 92% 10%, rgba(213, 1, 13, .13), transparent 28%),
    radial-gradient(circle at 8% 96%, rgba(127, 9, 18, .09), transparent 30%),
    #0b0b0d;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.viewer-web-foundation::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: clamp(64px, 7.5vw, 116px) clamp(64px, 7.5vw, 116px);
  mask-image: linear-gradient(105deg, rgba(0, 0, 0, .82), transparent 69%);
}

.viewer-web-foundation::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -24%;
  width: clamp(340px, 42vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 70, 81, .14);
  border-radius: 50%;
  box-shadow: inset 0 0 0 clamp(58px, 7vw, 108px) rgba(255, 70, 81, .012);
  transform: rotate(-12deg) scale(calc(.9 + var(--viewer-progress, 0) * .1));
}

.viewer-web-foundation-number {
  position: absolute;
  z-index: -1;
  top: -.12em;
  right: -.02em;
  color: transparent;
  font: 700 clamp(180px, 31vw, 520px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.1em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .035);
  user-select: none;
}

.viewer-web-foundation-copy {
  align-self: center;
  max-width: 760px;
}

.viewer-web-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  color: #b9b9bd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.viewer-web-kicker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 70, 81, .44);
  border-radius: 50%;
  color: var(--web-coral);
  background: rgba(213, 1, 13, .08);
  letter-spacing: 0;
}

.viewer-web-foundation h2 {
  max-width: 12ch;
  margin: 0;
  color: #f7f7f5;
  font: 560 clamp(44px, 5.7vw, 82px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.062em;
}

.viewer-web-foundation h2 em {
  color: var(--web-coral);
  font-style: normal;
}

.viewer-web-prose {
  max-width: 650px;
  margin-top: clamp(38px, 5vw, 68px);
  padding-left: clamp(22px, 3vw, 44px);
  border-left: 1px solid rgba(255, 70, 81, .42);
}

.viewer-web-prose p {
  margin: 0;
  color: #9d9da3;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.72;
}

.viewer-web-prose p + p { margin-top: 1.35em; }

.viewer-web-prose .viewer-web-lead {
  color: #eeeef0;
  font: 500 clamp(18px, 1.6vw, 23px)/1.55 "Space Grotesk", sans-serif;
  letter-spacing: -.025em;
}

.viewer-web-inclusions {
  position: relative;
  align-self: center;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .048), transparent 42%),
    rgba(18, 18, 21, .9);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .34),
    inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px);
}

.viewer-web-inclusions-glow {
  position: absolute;
  top: -130px;
  right: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(213, 1, 13, .16);
  filter: blur(72px);
}

.viewer-web-inclusions-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.viewer-web-inclusions-head p,
.viewer-web-inclusions-head span { margin: 0; }
.viewer-web-inclusions-head p {
  color: var(--web-coral);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .17em;
}
.viewer-web-inclusions-head span {
  color: #737379;
  font-size: 10px;
}

.viewer-web-inclusions h3 {
  position: relative;
  max-width: 12ch;
  margin: clamp(28px, 3vw, 38px) 0 20px;
  color: #f6f6f4;
  font: 570 clamp(30px, 3vw, 42px)/1.02 "Space Grotesk", sans-serif;
  letter-spacing: -.048em;
}

.viewer-web-inclusions ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viewer-web-inclusions li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 3px 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.viewer-web-inclusion-mark {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 61, 72, .48);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16), transparent 38%),
    rgba(213, 1, 13, .14);
  box-shadow: 0 0 0 5px rgba(213, 1, 13, .045), inset 0 0 18px rgba(213, 1, 13, .13);
  opacity: 0;
  transform: scale(.72);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1), border-color 260ms ease, background-color 260ms ease;
}

.viewer-web-inclusion-mark svg {
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: #ff4b55;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer-web-inclusion-mark svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 620ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-web-inclusion-mark b {
  position: absolute;
  right: -9px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  color: #8e8e94;
  background: #141417;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .04em;
}

.viewer-web-foundation.is-render-active .viewer-web-inclusion-mark {
  opacity: 1;
  transform: scale(1);
}

.viewer-web-foundation.is-render-active .viewer-web-inclusion-mark svg path { stroke-dashoffset: 0; }
.viewer-web-foundation.is-render-active li:nth-child(1) .viewer-web-inclusion-mark { transition-delay: 80ms; }
.viewer-web-foundation.is-render-active li:nth-child(2) .viewer-web-inclusion-mark { transition-delay: 140ms; }
.viewer-web-foundation.is-render-active li:nth-child(3) .viewer-web-inclusion-mark { transition-delay: 200ms; }
.viewer-web-foundation.is-render-active li:nth-child(4) .viewer-web-inclusion-mark { transition-delay: 260ms; }
.viewer-web-foundation.is-render-active li:nth-child(5) .viewer-web-inclusion-mark { transition-delay: 320ms; }
.viewer-web-foundation.is-render-active li:nth-child(6) .viewer-web-inclusion-mark { transition-delay: 380ms; }
.viewer-web-foundation.is-render-active li:nth-child(7) .viewer-web-inclusion-mark { transition-delay: 440ms; }
.viewer-web-foundation.is-render-active li:nth-child(1) .viewer-web-inclusion-mark svg path { transition-delay: 170ms; }
.viewer-web-foundation.is-render-active li:nth-child(2) .viewer-web-inclusion-mark svg path { transition-delay: 230ms; }
.viewer-web-foundation.is-render-active li:nth-child(3) .viewer-web-inclusion-mark svg path { transition-delay: 290ms; }
.viewer-web-foundation.is-render-active li:nth-child(4) .viewer-web-inclusion-mark svg path { transition-delay: 350ms; }
.viewer-web-foundation.is-render-active li:nth-child(5) .viewer-web-inclusion-mark svg path { transition-delay: 410ms; }
.viewer-web-foundation.is-render-active li:nth-child(6) .viewer-web-inclusion-mark svg path { transition-delay: 470ms; }
.viewer-web-foundation.is-render-active li:nth-child(7) .viewer-web-inclusion-mark svg path { transition-delay: 530ms; }

@media (prefers-reduced-motion: reduce) {
  .viewer-web-inclusion-mark { opacity: 1; transform: none; }
  .viewer-web-inclusion-mark svg path { stroke-dashoffset: 0; }
}

.viewer-web-inclusions li strong {
  color: #efeff0;
  font: 550 14px/1.28 "Space Grotesk", sans-serif;
  letter-spacing: -.015em;
}

.viewer-web-inclusions li small {
  color: #8e8e94;
  font-size: 11px;
  line-height: 1.52;
}

.viewer-web-cta {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  margin-top: 24px;
  padding: 0 20px;
  border: 1px solid var(--web-coral);
  border-radius: 999px;
  color: #fff;
  background: #d5010d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
  box-shadow: 0 14px 34px rgba(213, 1, 13, .22);
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1), background-color 240ms ease, box-shadow 300ms ease;
}

.viewer-web-cta .ui-icon { --ui-icon-size: 19px; }

/* Mid-width viewer panes need a different composition from both a full page
   and a phone. Let the heading breathe across the section, then pair the
   editorial copy with the inclusion card beneath it. */
@container (max-width: 1100px) and (min-width: 761px) {
  .viewer-web-foundation {
    grid-template-columns: minmax(250px, .72fr) minmax(380px, 1.28fr);
    gap: 48px clamp(40px, 6vw, 72px);
    padding-inline: clamp(42px, 6vw, 72px);
  }
  .viewer-web-foundation-copy { display: contents; }
  .viewer-web-kicker {
    grid-column: 1 / -1;
    margin-bottom: -12px;
  }
  .viewer-web-foundation h2 {
    grid-column: 1 / -1;
    max-width: 13ch;
    font-size: clamp(56px, 7.2cqw, 76px);
  }
  .viewer-web-prose {
    grid-column: 1;
    align-self: start;
    margin-top: 0;
    padding-left: 22px;
  }
  .viewer-web-prose .viewer-web-lead { font-size: clamp(18px, 2.25cqw, 22px); }
  .viewer-web-inclusions {
    grid-column: 2;
    align-self: start;
    width: 100%;
  }
}

@container (max-width: 760px) {
  .viewer-web-foundation {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .viewer-web-foundation-copy { display: block; max-width: 780px; }
  .viewer-web-foundation h2 { max-width: 13ch; }
  .viewer-web-inclusions { width: min(680px, 100%); }
}

@container (max-width: 560px) {
  .viewer-web-foundation {
    gap: 46px;
    min-height: 0;
    padding: 58px 22px 66px;
  }
  .viewer-web-foundation h2 {
    max-width: none;
    font-size: clamp(40px, 12vw, 56px);
  }
  .viewer-web-prose {
    margin-top: 34px;
    padding-left: 18px;
  }
  .viewer-web-prose p { font-size: 14px; }
  .viewer-web-prose .viewer-web-lead { font-size: 19px; }
  .viewer-web-inclusions {
    padding: 26px 22px 22px;
    border-radius: 18px;
  }
  .viewer-web-inclusions-head {
    display: block;
    padding-bottom: 20px;
  }
  .viewer-web-inclusions-head span {
    display: block;
    margin-top: 7px;
  }
  .viewer-web-inclusions h3 { font-size: 32px; }
  .viewer-web-inclusions li { padding: 13px 0; }
  .viewer-web-inclusions li small { font-size: 10.5px; }
  .viewer-web-cta { min-height: 54px; padding-inline: 17px; }
}

/* Web design — clear build routes */
.viewer-web-packages { container-type: inline-size; min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); color: #f4f4f2; background: radial-gradient(circle at 90% 5%, rgba(213, 1, 13, .17), transparent 28%), #0b0b0d; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.viewer-web-packages-head { display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); gap: clamp(38px, 7vw, 104px); }
.viewer-web-packages-kicker { display: flex; align-items: center; gap: 14px; margin: 0; color: #a2a2a7; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.viewer-web-packages-kicker span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(255, 70, 81, .4); border-radius: 50%; color: #ff4a55; }
.viewer-web-packages h2 { max-width: 14ch; margin: 0; font: 540 clamp(42px, 5vw, 76px)/.96 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-web-packages h2 em { color: #ff3440; font-style: normal; }
.viewer-web-packages-head > div > p { max-width: 700px; margin: 24px 0 0; color: #9d9da2; font-size: clamp(14px, 1.13vw, 16.5px); line-height: 1.7; }
.viewer-web-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(54px, 7vw, 92px); }
.viewer-web-package-grid > article { position: relative; display: flex; flex-direction: column; min-height: 590px; padding: clamp(28px, 3vw, 42px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 20px; background: rgba(255, 255, 255, .035); transition: border-color 420ms ease, background-color 420ms ease; }
.viewer-web-package-grid > article::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 2px; background: #e50917; transition: width 620ms cubic-bezier(.16, 1, .3, 1); }
.viewer-web-package-grid > article.is-signal { background: linear-gradient(145deg, rgba(213, 1, 13, .17), transparent 52%), rgba(255, 255, 255, .04); box-shadow: 0 30px 80px rgba(0, 0, 0, .24); }
.viewer-web-package-meta { display: flex; justify-content: space-between; gap: 18px; color: #ff4a55; }
.viewer-web-package-meta span { font: 650 clamp(36px, 4vw, 54px)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-web-package-meta small { max-width: 18ch; padding-top: 8px; color: #85858b; font-size: 7px; font-weight: 800; line-height: 1.45; letter-spacing: .14em; text-align: right; }
.viewer-web-package-grid h3 { margin: 48px 0 0; color: #f4f4f2; font: 570 clamp(27px, 2.4vw, 36px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.viewer-web-package-grid article > p { margin: 20px 0 0; color: #9d9da2; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.66; }
.viewer-web-package-grid ul { display: grid; margin: 30px 0 34px; padding: 0; list-style: none; }
.viewer-web-package-grid li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid rgba(255, 255, 255, .1); color: #b7b7bc; font-size: clamp(12px, .95vw, 13.5px); line-height: 1.48; }
.viewer-web-package-grid li::before { content: "✓"; position: absolute; left: 1px; color: #ff4a55; font-weight: 800; }
.viewer-web-package-grid .foghorn-cta { align-self: flex-start; margin-top: auto; }
.viewer-web-packages-close { display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); gap: clamp(38px, 7vw, 104px); margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-web-packages-close strong { color: #ff4a55; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.viewer-web-packages-close p { max-width: 760px; margin: 0; color: #b2b2b7; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.68; }
@media (hover: hover) and (pointer: fine) { .viewer-web-package-grid > article:hover { border-color: rgba(255, 70, 81, .38); background-color: rgba(255, 255, 255, .055); } .viewer-web-package-grid > article:hover::before { width: 100%; } }
@container (max-width: 980px) { .viewer-web-package-grid { grid-template-columns: 1fr; } .viewer-web-package-grid > article { min-height: 0; } }
@container (max-width: 700px) { .viewer-web-packages-head, .viewer-web-packages-close { grid-template-columns: 1fr; gap: 28px; } }
@container (max-width: 560px) { .viewer-web-packages { min-height: 0; padding: 64px 22px 72px; } .viewer-web-packages h2 { font-size: clamp(42px, 12vw, 56px); } .viewer-web-package-grid { margin-top: 48px; } .viewer-web-package-grid > article { padding: 28px 24px; } .viewer-web-package-grid h3 { margin-top: 38px; font-size: 29px; } }

/* Web design — commercial outcomes */
.viewer-web-outcomes {
  position: relative;
  isolation: isolate;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(76px, 9vw, 132px) clamp(34px, 7vw, 104px);
  overflow: hidden;
  color: #151517;
  background: #f2f2ef;
  border-bottom: 1px solid #c9c9c6;
}

.viewer-web-outcomes::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(-180px, -12vw, -80px);
  right: clamp(-160px, -8vw, -60px);
  width: clamp(300px, 35vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(213, 1, 13, .12);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 clamp(42px, 5vw, 80px) rgba(213, 1, 13, .018),
    inset 0 0 0 clamp(92px, 11vw, 168px) rgba(213, 1, 13, .012);
  transform: rotate(-14deg) scale(calc(.9 + var(--viewer-progress, 0) * .1));
  transform-origin: center;
}

.viewer-web-outcomes-head {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 112px);
  align-items: start;
}

.viewer-web-outcomes-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  color: #59595e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.viewer-web-outcomes-kicker span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(213, 1, 13, .32);
  border-radius: 50%;
  color: #d5010d;
  background: rgba(213, 1, 13, .045);
  letter-spacing: 0;
}

.viewer-web-outcomes-head h2 {
  max-width: 13ch;
  margin: 0;
  color: #151517;
  font: 560 clamp(46px, 5.5vw, 78px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.062em;
}

.viewer-web-outcomes-head h2 em {
  color: #d5010d;
  font-style: normal;
}

.viewer-web-outcomes-head > div > p {
  max-width: 670px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  color: #66666b;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.7;
}

.viewer-web-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: clamp(58px, 7vw, 96px);
}

.viewer-web-outcome-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(330px, 30vw, 410px);
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid #d2d2cf;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: rgba(250, 250, 248, .88);
  box-shadow: 0 20px 55px rgba(20, 20, 22, .055);
  transform: translate3d(0, calc((1 - var(--viewer-progress, 0)) * 18px), 0);
  transition:
    border-color 420ms ease,
    box-shadow 520ms cubic-bezier(.16, 1, .3, 1),
    transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-web-outcome-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(320px, 100%);
  height: 3px;
  background: #d5010d;
  transform: scaleX(.225);
  transform-origin: 0 50%;
  transition: transform 560ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-web-outcome-grid article:nth-child(2) {
  color: #f6f6f4;
  border-color: #19191c;
  background:
    radial-gradient(circle at 90% 10%, rgba(213, 1, 13, .18), transparent 30%),
    #111113;
  box-shadow: 0 28px 70px rgba(20, 20, 22, .16);
}

.viewer-web-outcome-grid article:nth-child(2) p { color: #9f9fa4; }
.viewer-web-outcome-grid article:nth-child(2) strong { color: #f2f2f3; border-color: rgba(255, 255, 255, .12); }

.viewer-web-outcome-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.viewer-web-outcome-meta span {
  color: #d5010d;
  font: 700 clamp(34px, 3.2vw, 48px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
}

.viewer-web-outcome-meta small {
  color: #77777c;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .16em;
}

.viewer-web-outcome-grid h3 {
  max-width: 15ch;
  margin: clamp(44px, 5vw, 72px) 0 0;
  color: inherit;
  font: 580 clamp(25px, 2.2vw, 34px)/1.06 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
}

.viewer-web-outcome-grid article > p {
  margin: 20px 0 0;
  color: #66666b;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.68;
}

.viewer-web-outcome-grid article > strong {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #d8d8d5;
  color: #242427;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.viewer-web-outcomes-close {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 112px);
  align-items: start;
  margin-top: clamp(52px, 7vw, 88px);
  padding-top: clamp(28px, 3vw, 42px);
  border-top: 1px solid #c9c9c6;
}

.viewer-web-outcomes-close span {
  color: #d5010d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.viewer-web-outcomes-close p {
  max-width: 780px;
  margin: 0;
  color: #242427;
  font: 530 clamp(22px, 2.5vw, 34px)/1.24 "Space Grotesk", sans-serif;
  letter-spacing: -.035em;
}

@media (hover: hover) and (pointer: fine) {
  .viewer-web-outcome-grid article:hover {
    border-color: rgba(213, 1, 13, .32);
    box-shadow: 0 30px 76px rgba(20, 20, 22, .11);
    transform: translate3d(0, -5px, 0);
  }
  .viewer-web-outcome-grid article:hover::before { transform: scaleX(1); }
  .viewer-web-outcome-grid article:nth-child(2):hover { border-color: rgba(255, 70, 81, .48); box-shadow: 0 34px 82px rgba(20, 20, 22, .23); }
}

@container (max-width: 1180px) {
  .viewer-web-outcomes { padding-inline: clamp(42px, 6vw, 72px); }
  .viewer-web-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-web-outcome-grid article { min-height: 350px; }
  .viewer-web-outcome-grid article:nth-child(3) {
    grid-column: 1 / -1;
    min-height: 300px;
  }
  .viewer-web-outcome-grid article:nth-child(3) h3 { max-width: 20ch; }
  .viewer-web-outcome-grid h3 { margin-top: 42px; }
}

@container (max-width: 820px) {
  .viewer-web-outcomes-head,
  .viewer-web-outcomes-close { grid-template-columns: 1fr; gap: 28px; }
  .viewer-web-outcomes-head h2 { max-width: 14ch; }
  .viewer-web-outcome-grid { grid-template-columns: 1fr; }
  .viewer-web-outcome-grid article,
  .viewer-web-outcome-grid article:nth-child(3) {
    grid-column: auto;
    min-height: 310px;
  }
}

@container (max-width: 560px) {
  .viewer-web-outcomes {
    min-height: 0;
    padding: 62px 22px 70px;
  }
  .viewer-web-outcomes-head h2 { font-size: clamp(40px, 12vw, 56px); }
  .viewer-web-outcomes-head > div > p { font-size: 14px; }
  .viewer-web-outcome-grid { gap: 14px; margin-top: 48px; }
  .viewer-web-outcome-grid article { min-height: 330px; padding: 28px 24px; border-radius: 16px; }
  .viewer-web-outcome-grid h3 { margin-top: 38px; font-size: 29px; }
  .viewer-web-outcome-grid article > p { font-size: 13.5px; }
  .viewer-web-outcomes-close { margin-top: 48px; padding-top: 28px; }
  .viewer-web-outcomes-close p { font-size: 24px; }
}

/* Web design — Progressive Web App architecture */
.viewer-web-pwa {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
  gap: clamp(58px, 8vw, 126px);
  align-items: center;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(78px, 9vw, 136px) clamp(38px, 7vw, 108px);
  overflow: hidden;
  color: #f4f4f2;
  background:
    radial-gradient(circle at 92% 18%, rgba(213, 1, 13, .2), transparent 30%),
    radial-gradient(circle at 9% 86%, rgba(86, 24, 92, .16), transparent 31%),
    #0b0b0d;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.viewer-web-pwa::before {
  content: "PWA";
  position: absolute;
  z-index: -1;
  right: -.04em;
  bottom: -.2em;
  color: rgba(255, 255, 255, .018);
  font: 700 clamp(180px, 29vw, 450px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.1em;
}

.viewer-web-pwa::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  top: -20%;
  width: clamp(360px, 42vw, 680px);
  aspect-ratio: 1.75;
  border: 1px solid rgba(255, 70, 81, .14);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.viewer-web-pwa-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(42px, 6vw, 72px); color: #ff4a55; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.viewer-web-pwa-kicker span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(255, 70, 81, .42); border-radius: 50%; }
.viewer-web-pwa h2 { max-width: 13ch; margin: 0; font: 520 clamp(42px, 5vw, 76px)/.96 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-web-pwa h2 em { color: #ff3440; font-style: normal; }
.viewer-web-pwa-copy > p:not(.viewer-web-pwa-kicker) { max-width: 690px; margin: 24px 0 0; color: #a9a9af; font-size: clamp(14px, 1.13vw, 16.5px); line-height: 1.7; }
.viewer-web-pwa-copy > .viewer-web-pwa-lead { color: #d2d2d4; font-size: clamp(16px, 1.34vw, 19px); line-height: 1.62; }
.viewer-web-pwa-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(38px, 5vw, 62px); background: rgba(255, 255, 255, .09); }
.viewer-web-pwa-points article { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; min-height: 148px; padding: 25px 22px; overflow: hidden; background: #0d0d0f; transition: background-color 420ms ease; }
.viewer-web-pwa-points article::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #e60012; transform: scaleX(.16); transform-origin: left; transition: transform 520ms cubic-bezier(.2,.75,.2,1); }
.viewer-web-pwa-points article > span { color: #ff4a55; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.viewer-web-pwa-points strong { display: block; color: #f3f3f1; font: 560 clamp(17px, 1.45vw, 21px)/1.16 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
.viewer-web-pwa-points p { margin: 9px 0 0; color: #919197; font-size: 12.5px; line-height: 1.55; }

.viewer-web-pwa-demo { position: relative; min-height: clamp(540px, 58vw, 760px); padding: clamp(34px, 4.5vw, 62px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)); box-shadow: 0 38px 90px rgba(0, 0, 0, .34); }
.viewer-web-pwa-browser { position: absolute; top: 13%; left: 8%; width: 70%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; background: #151518; box-shadow: 0 26px 70px rgba(0, 0, 0, .38); opacity: 0; transform: translate3d(-24px, 18px, 0); transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.75,.2,1); }
.viewer-web-pwa-browser header { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); background: #1a1a1d; }
.viewer-web-pwa-browser header i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.viewer-web-pwa-browser header i:first-child { background: #e60012; }
.viewer-web-pwa-browser header span { min-width: 0; margin-left: 8px; color: #77777d; font-size: 10px; letter-spacing: .04em; }
.viewer-web-pwa-browser-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: clamp(250px, 27vw, 380px); padding: clamp(26px, 4vw, 54px); background: radial-gradient(circle at 75% 24%, rgba(213, 1, 13, .23), transparent 30%), linear-gradient(145deg, #181216, #0e0e11); }
.viewer-web-pwa-browser-body b,
.viewer-web-pwa-phone b { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: auto; border: 1px solid rgba(255, 70, 81, .55); border-radius: 13px; color: #ff3642; background: rgba(213, 1, 13, .11); font: 700 13px/1 "Space Grotesk", sans-serif; }
.viewer-web-pwa-browser-body small,
.viewer-web-pwa-phone small { color: #ff4a55; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-pwa-browser-body strong { max-width: 9ch; margin-top: 12px; color: #f6f6f4; font: 540 clamp(27px, 3vw, 44px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-web-pwa-browser-body > span,
.viewer-web-pwa-phone div > span { margin-top: 15px; color: #919197; font-size: 11px; }
.viewer-web-pwa-phone { position: absolute; z-index: 2; right: 8%; bottom: 14%; width: clamp(180px, 26vw, 280px); aspect-ratio: .57; padding: 11px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 34px; background: #08080a; box-shadow: 0 32px 80px rgba(0, 0, 0, .58); opacity: 0; transform: translate3d(26px, 34px, 0) rotate(2deg); transition: opacity 700ms 180ms ease, transform 920ms 180ms cubic-bezier(.2,.75,.2,1); }
.viewer-web-pwa-phone > div { display: flex; flex-direction: column; height: 100%; padding: 26px 20px 28px; border-radius: 25px; background: radial-gradient(circle at 75% 20%, rgba(213, 1, 13, .28), transparent 32%), linear-gradient(155deg, #201318, #101012 62%); }
.viewer-web-pwa-phone b { width: 48px; height: 48px; margin: 18px auto auto 0; }
.viewer-web-pwa-phone strong { max-width: 8ch; margin-top: 14px; color: #fff; font: 540 clamp(25px, 2.9vw, 38px)/1 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-web-pwa-speaker { position: absolute; z-index: 3; top: 17px; left: 50%; width: 44px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .22); transform: translateX(-50%); }
.viewer-web-pwa-path { position: absolute; z-index: 3; top: 50%; left: 57%; display: flex; align-items: center; gap: 10px; color: #ff4651; opacity: 0; transform: translateY(-50%); transition: opacity 500ms 600ms ease; }
.viewer-web-pwa-path i { display: block; width: clamp(20px, 3vw, 42px); height: 1px; background: currentColor; }
.viewer-web-pwa-path span { font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-pwa-demo footer { position: absolute; right: clamp(28px, 4vw, 52px); bottom: clamp(22px, 3vw, 38px); left: clamp(28px, 4vw, 52px); display: flex; justify-content: space-between; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-web-pwa-demo footer span { display: flex; align-items: center; gap: 9px; color: #ff4a55; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.viewer-web-pwa-demo footer span i { width: 7px; height: 7px; border-radius: 50%; background: #34d890; box-shadow: 0 0 0 5px rgba(52, 216, 144, .09); }
.viewer-web-pwa-demo footer strong { color: #c7c7ca; font-size: 12px; font-weight: 600; }
.viewer-web-pwa.is-render-active .viewer-web-pwa-browser,
.viewer-web-pwa.is-render-active .viewer-web-pwa-phone { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
.viewer-web-pwa.is-render-active .viewer-web-pwa-path { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .viewer-web-pwa-points article:hover { background-color: #131316; }
  .viewer-web-pwa-points article:hover::before { transform: scaleX(1); }
  .viewer-web-pwa-demo:hover .viewer-web-pwa-browser { border-color: rgba(255, 70, 81, .4); }
  .viewer-web-pwa-demo:hover .viewer-web-pwa-phone { box-shadow: 0 34px 90px rgba(213, 1, 13, .13), 0 32px 80px rgba(0, 0, 0, .58); }
}

@container (max-width: 1020px) {
  .viewer-web-pwa { grid-template-columns: 1fr; }
  .viewer-web-pwa-copy { max-width: 820px; }
  .viewer-web-pwa-demo { min-height: 680px; }
}

@container (max-width: 600px) {
  .viewer-web-pwa { min-height: 0; gap: 48px; padding: 64px 22px 72px; }
  .viewer-web-pwa-kicker { margin-bottom: 44px; }
  .viewer-web-pwa h2 { max-width: none; font-size: clamp(40px, 12vw, 56px); }
  .viewer-web-pwa-copy > p:not(.viewer-web-pwa-kicker) { font-size: 14px; }
  .viewer-web-pwa-copy > .viewer-web-pwa-lead { font-size: 16px; }
  .viewer-web-pwa-points { grid-template-columns: 1fr; }
  .viewer-web-pwa-points article { min-height: 0; padding: 24px 20px; }
  .viewer-web-pwa-demo { min-height: 570px; padding: 22px; border-radius: 20px; }
  .viewer-web-pwa-browser { top: 8%; left: 6%; width: 88%; }
  .viewer-web-pwa-browser-body { min-height: 275px; padding: 26px; }
  .viewer-web-pwa-phone { right: 7%; bottom: 16%; width: 178px; }
  .viewer-web-pwa-path { top: 53%; left: 10%; }
  .viewer-web-pwa-demo footer { right: 20px; bottom: 22px; left: 20px; flex-direction: column; padding-top: 15px; }
}

/* Web design — protected content editing */
.viewer-web-editing {
  position: relative;
  isolation: isolate;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(78px, 9vw, 136px) clamp(34px, 7vw, 104px);
  overflow: hidden;
  color: #18181a;
  background:
    linear-gradient(rgba(24, 24, 26, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 26, .055) 1px, transparent 1px),
    #e9e7e1;
  background-size: clamp(66px, 7vw, 108px) clamp(66px, 7vw, 108px);
  border-bottom: 1px solid #c7c5bf;
}

.viewer-web-editing::before {
  content: "05";
  position: absolute;
  z-index: -1;
  right: -.04em;
  top: -.24em;
  color: rgba(24, 24, 26, .035);
  font: 650 clamp(220px, 32vw, 500px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.1em;
}

.viewer-web-editing::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -11%;
  bottom: -38%;
  width: clamp(380px, 48vw, 760px);
  aspect-ratio: 1.45;
  border: 1px solid rgba(213, 1, 13, .16);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.viewer-web-editing-head {
  display: grid;
  grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr);
  gap: clamp(38px, 7vw, 112px);
  align-items: start;
}

.viewer-web-editing-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  color: #58585d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.viewer-web-editing-kicker span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(213, 1, 13, .32);
  border-radius: 50%;
  color: #d5010d;
  background: rgba(213, 1, 13, .045);
  letter-spacing: 0;
}

.viewer-web-editing-head h2 {
  max-width: 13ch;
  margin: 0;
  color: #18181a;
  font: 560 clamp(46px, 5.5vw, 78px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.062em;
}

.viewer-web-editing-head h2 em { color: #d5010d; font-style: normal; }

.viewer-web-editing-head > div > p {
  max-width: 720px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  color: #626267;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.7;
}

.viewer-web-editing-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.08fr) minmax(350px, .92fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: stretch;
  margin-top: clamp(56px, 7vw, 94px);
}

.viewer-web-editor {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #28282c;
  border-radius: clamp(16px, 1.8vw, 24px);
  color: #ededee;
  background: #111113;
  box-shadow: 0 34px 86px rgba(21, 21, 23, .19);
  transform: translate3d(0, calc((1 - var(--viewer-progress, 0)) * 18px), 0);
}

.viewer-web-editor > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 0 clamp(20px, 2.3vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .018);
}

.viewer-web-editor > header > div { display: flex; align-items: center; gap: 14px; }
.viewer-web-editor > header small,
.viewer-web-editor > header strong { display: block; }
.viewer-web-editor > header small { margin-bottom: 3px; color: #77777d; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-editor > header strong { font: 570 15px/1.2 "Space Grotesk", sans-serif; }
.viewer-web-editor > header > b { display: flex; align-items: center; gap: 7px; color: #9e9ea3; font-size: 7px; letter-spacing: .12em; }
.viewer-web-editor > header > b i { width: 7px; height: 7px; border-radius: 50%; background: #54d89a; box-shadow: 0 0 0 5px rgba(84, 216, 154, .07); }

.viewer-web-editor-mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 3px;
  width: 27px;
  height: 27px;
  padding: 5px;
  border: 1px solid rgba(255, 63, 75, .32);
  border-radius: 7px;
  background: rgba(213, 1, 13, .1);
}
.viewer-web-editor-mark i { display: block; border: 1px solid #ff4551; border-radius: 2px; }
.viewer-web-editor-mark i:first-child { grid-row: 1 / 3; }

.viewer-web-editor-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 410px; }

.viewer-web-editor nav {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 24px 14px;
  border-right: 1px solid rgba(255, 255, 255, .075);
  background: #0d0d0f;
}

.viewer-web-editor nav > span { margin: 0 10px 8px; color: #626268; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-editor nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #85858b;
  background: transparent;
  font: 650 10px/1.2 "Inter", sans-serif;
  text-align: left;
  pointer-events: none;
}
.viewer-web-editor nav button.is-active { border-color: rgba(255, 66, 78, .2); color: #f3f3f4; background: rgba(213, 1, 13, .09); }
.viewer-web-editor nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.viewer-web-editor-content { min-width: 0; padding: clamp(22px, 2.6vw, 34px); }
.viewer-web-editor-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.viewer-web-editor-title small,
.viewer-web-editor-title strong { display: block; }
.viewer-web-editor-title small { margin-bottom: 5px; color: #ff4651; font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.viewer-web-editor-title strong { font: 560 clamp(20px, 2vw, 28px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.viewer-web-editor-title button,
.viewer-web-editor-content footer button { border: 1px solid rgba(255, 70, 81, .42); border-radius: 999px; color: #fff; background: rgba(213, 1, 13, .12); font-size: 9px; font-weight: 750; pointer-events: none; }
.viewer-web-editor-title button { min-height: 36px; padding: 0 13px; }
.viewer-web-editor-title button i { margin-left: 8px; color: #ff4651; font-size: 15px; font-style: normal; }

.viewer-web-editor-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 28px; gap: 12px; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.viewer-web-editor-drag { color: #4f4f54; font-size: 17px; }
.viewer-web-editor-row div { min-width: 0; }
.viewer-web-editor-row strong,
.viewer-web-editor-row small { display: block; }
.viewer-web-editor-row strong { overflow: hidden; color: #e7e7e9; font: 540 12px/1.25 "Space Grotesk", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.viewer-web-editor-row small { margin-top: 5px; color: #717177; font-size: 8.5px; }
.viewer-web-editor-row > b { color: #c7c7ca; font-size: 10px; }
.viewer-web-editor-row > i { position: relative; display: block; width: 25px; height: 14px; border-radius: 999px; background: #343438; }
.viewer-web-editor-row > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #74747a; transition: transform 260ms ease; }
.viewer-web-editor-row > i.is-on { background: rgba(213, 1, 13, .42); }
.viewer-web-editor-row > i.is-on::after { background: #ff515b; transform: translateX(11px); }

.viewer-web-editor-content footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; }
.viewer-web-editor-content footer span { display: flex; align-items: center; gap: 8px; color: #6f6f75; font-size: 8px; }
.viewer-web-editor-content footer span i { width: 7px; height: 7px; border-radius: 50%; background: #54d89a; }
.viewer-web-editor-content footer button { min-height: 39px; padding: 0 16px; border-color: #e50917; background: #d5010d; }

.viewer-web-editing-benefits { display: grid; gap: 14px; }
.viewer-web-editing-benefits article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: clamp(25px, 2.8vw, 36px);
  border: 1px solid #cfcdc7;
  border-radius: 18px;
  background: rgba(248, 247, 243, .78);
  box-shadow: 0 20px 50px rgba(24, 24, 26, .045);
}
.viewer-web-editing-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(213, 1, 13, .25); border-radius: 50%; color: #d5010d; background: rgba(213, 1, 13, .045); }
.viewer-web-editing-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viewer-web-editing-benefits small { color: #d5010d; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-editing-benefits h3 { margin: 12px 0 0; color: #202023; font: 570 clamp(20px, 1.8vw, 27px)/1.12 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.viewer-web-editing-benefits article p { margin: 13px 0 0; color: #68686d; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.62; }
.viewer-web-editing-benefits aside { padding: clamp(24px, 2.7vw, 34px); border: 1px solid rgba(213, 1, 13, .24); border-radius: 18px; background: linear-gradient(125deg, rgba(213, 1, 13, .09), rgba(255, 255, 255, .2)); }
.viewer-web-editing-benefits aside span { color: #d5010d; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-editing-benefits aside p { margin: 14px 0 0; color: #4f4f54; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.64; }

.viewer-web-editing-close { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .62fr) minmax(0, .55fr); gap: clamp(28px, 5vw, 76px); align-items: start; margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3vw, 42px) 0 0; border-top: 1px solid #c7c5bf; background: transparent; }
.viewer-web-editing-close span { color: #c9000d; font-size: 10px; line-height: 1.6; font-weight: 800; letter-spacing: .12em; }
.viewer-web-editing-close strong { color: #242427; font: 560 clamp(21px, 2.2vw, 31px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.viewer-web-editing-close p { margin: 0; color: #66666b; font-size: clamp(13px, 1vw, 15px); line-height: 1.65; }

@container (max-width: 1100px) {
  .viewer-web-editing { padding-inline: clamp(42px, 6vw, 72px); }
  .viewer-web-editing-layout { grid-template-columns: 1fr; }
  .viewer-web-editing-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-web-editing-benefits aside { grid-column: 1 / -1; }
}

@container (max-width: 760px) {
  .viewer-web-editing-head,
  .viewer-web-editing-close { grid-template-columns: 1fr; gap: 28px; }
  .viewer-web-editing-head h2 { max-width: 14ch; }
  .viewer-web-editing-benefits { grid-template-columns: 1fr; }
  .viewer-web-editing-benefits aside { grid-column: auto; }
  .viewer-web-editor-body { grid-template-columns: 112px minmax(0, 1fr); }
  .viewer-web-editor nav { padding-inline: 9px; }
  .viewer-web-editor nav button { padding-inline: 8px; }
}

@container (max-width: 560px) {
  .viewer-web-editing { min-height: 0; padding: 62px 22px 70px; }
  .viewer-web-editing-head h2 { max-width: none; font-size: clamp(40px, 12vw, 56px); }
  .viewer-web-editing-head > div > p { font-size: 14px; }
  .viewer-web-editing-layout { margin-top: 48px; }
  .viewer-web-editor { border-radius: 16px; }
  .viewer-web-editor > header { min-height: 66px; padding-inline: 16px; }
  .viewer-web-editor > header > b { font-size: 6.5px; }
  .viewer-web-editor-body { display: block; min-height: 0; }
  .viewer-web-editor nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .075); }
  .viewer-web-editor nav > span { display: none; }
  .viewer-web-editor nav button { justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 5px; font-size: 8px; }
  .viewer-web-editor nav svg { width: 14px; height: 14px; }
  .viewer-web-editor-content { padding: 20px 16px; }
  .viewer-web-editor-title strong { font-size: 22px; }
  .viewer-web-editor-title button { min-height: 34px; padding-inline: 10px; font-size: 8px; }
  .viewer-web-editor-row { grid-template-columns: 13px minmax(0, 1fr) auto 25px; gap: 8px; min-height: 72px; }
  .viewer-web-editor-row strong { font-size: 11px; }
  .viewer-web-editor-row small { font-size: 7.5px; }
  .viewer-web-editor-content footer { align-items: end; }
  .viewer-web-editor-content footer span { max-width: 120px; line-height: 1.4; }
  .viewer-web-editing-benefits article { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 26px 22px; }
  .viewer-web-editing-icon { width: 40px; height: 40px; }
  .viewer-web-editing-benefits h3 { font-size: 23px; }
  .viewer-web-editing-close { margin-top: 48px; padding-top: 28px; }
}

/* Web design — launch, hosting and ownership */
.viewer-web-launch {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(380px, 1.16fr);
  gap: clamp(58px, 8vw, 118px);
  align-items: center;
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px);
  overflow: hidden;
  color: #202023;
  background: radial-gradient(circle at 8% 20%, rgba(213, 1, 13, .08), transparent 26%), linear-gradient(rgba(17, 17, 19, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 19, .045) 1px, transparent 1px), #f2f2ef;
  background-size: auto, 76px 76px, 76px 76px, auto;
  border-bottom: 1px solid #c8c8c6;
}
.viewer-web-launch::after { content: "06"; position: absolute; z-index: -1; right: -.05em; bottom: -.22em; color: rgba(213, 1, 13, .035); font: 700 clamp(210px, 34vw, 520px)/1 "Space Grotesk", sans-serif; letter-spacing: -.09em; }
.viewer-web-launch-kicker,
.viewer-care-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(42px, 6vw, 72px); color: #d5010d; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.viewer-web-launch-kicker span,
.viewer-care-kicker span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(213, 1, 13, .34); border-radius: 50%; font-size: 9px; }
.viewer-web-launch h2 { max-width: 12ch; margin: 0; font: 520 clamp(42px, 5vw, 76px)/.96 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-web-launch h2 em { color: #d5010d; font-style: normal; }
.viewer-web-launch-copy > p:not(.viewer-web-launch-kicker) { max-width: 610px; margin: 26px 0 0; color: #626267; font-size: clamp(14px, 1.18vw, 17px); line-height: 1.7; }
.viewer-web-launch-cta { margin-top: 34px; }
.viewer-web-launch-assurance { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 22px; background: #101012; box-shadow: 0 36px 90px rgba(20, 20, 22, .2); }
.viewer-web-launch-assurance::before { content: "CLIENT CONTROL"; position: absolute; top: 24px; right: 26px; color: rgba(255, 255, 255, .18); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.viewer-web-launch-assurance article { position: relative; min-height: 230px; padding: clamp(28px, 3vw, 42px); border-right: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(145deg, rgba(213, 1, 13, .09), transparent 55%); transition: background-color 480ms ease; }
.viewer-web-launch-assurance article:nth-child(even) { border-right: 0; }
.viewer-web-launch-assurance article:nth-last-child(-n + 2) { border-bottom: 0; }
.viewer-web-launch-assurance article::before,
.viewer-care-includes-grid article::before,
.viewer-care-compare-grid > article::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 2px; background: #e50917; transition: width 620ms cubic-bezier(.16, 1, .3, 1); }
.viewer-web-launch-assurance article > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 70, 81, .45); border-radius: 50%; color: #ff4a55; font-size: 9px; font-weight: 800; }
.viewer-web-launch-assurance small { display: block; margin-top: 34px; color: #ff4a55; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-web-launch-assurance strong { display: block; margin-top: 10px; color: #f4f4f2; font: 560 clamp(19px, 1.7vw, 25px)/1.12 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.viewer-web-launch-assurance p { margin: 12px 0 0; color: #99999f; font-size: 13px; line-height: 1.55; }
@media (hover: hover) and (pointer: fine) {
  .viewer-web-launch-assurance article:hover::before,
  .viewer-care-includes-grid article:hover::before,
  .viewer-care-compare-grid > article:hover::before { width: 100%; }
  .viewer-web-launch-assurance article:hover { background-color: rgba(255, 255, 255, .025); }
}
@container (max-width: 1000px) { .viewer-web-launch { grid-template-columns: 1fr; } }
@container (max-width: 700px) {
  .viewer-web-launch-assurance { grid-template-columns: 1fr; }
  .viewer-web-launch-assurance article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .viewer-web-launch-assurance article:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .viewer-web-launch-assurance article:last-child { border-bottom: 0; }
}
@container (max-width: 560px) {
  .viewer-web-launch { min-height: 0; gap: 48px; padding: 64px 22px 72px; }
  .viewer-web-launch-kicker { margin-bottom: 44px; }
  .viewer-web-launch h2 { max-width: none; font-size: clamp(42px, 12.5vw, 56px); }
  .viewer-web-launch-copy > p:not(.viewer-web-launch-kicker) { font-size: 14px; }
  .viewer-web-launch-assurance article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 16px; padding: 26px 22px; }
  .viewer-web-launch-assurance article > span { grid-row: 1 / span 3; }
  .viewer-web-launch-assurance small { margin-top: 2px; }
  .viewer-web-launch-assurance strong { margin-top: 7px; }
  .viewer-web-launch-assurance p { margin-top: 9px; }
}

/* Website Care & Support */
.viewer-page--website-care { --care-paper: #f2f2ef; container-type: inline-size; }
.viewer-page--website-care .viewer-page-hero { background: radial-gradient(circle at 82% 22%, rgba(229, 9, 23, .25), transparent 29%), radial-gradient(circle at 5% 90%, rgba(111, 8, 16, .17), transparent 31%), #09090b; }
.viewer-page--website-care .viewer-page-hero h1 em { color: #e50917; font-style: normal; }
.viewer-page--search-growth { --care-paper: #f2f2ef; container-type: inline-size; }
.viewer-page--search-growth .viewer-page-hero { background: radial-gradient(circle at 80% 18%, rgba(42, 105, 89, .26), transparent 30%), radial-gradient(circle at 12% 88%, rgba(213, 1, 13, .18), transparent 31%), #09090b; }
.viewer-page--search-growth .viewer-page-hero h1 em { color: #e50917; font-style: normal; }
.viewer-care-opening,
.viewer-care-includes,
.viewer-care-compare,
.viewer-care-details { container-type: inline-size; }
.viewer-care-opening { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: clamp(56px, 8vw, 122px); align-items: center; min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); overflow: hidden; color: #202023; background: linear-gradient(rgba(20, 20, 22, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 22, .04) 1px, transparent 1px), var(--care-paper); background-size: 72px 72px, 72px 72px, auto; }
.viewer-care-opening::after { content: "01"; position: absolute; right: -.02em; bottom: -.23em; color: rgba(213, 1, 13, .035); font: 700 clamp(220px, 34vw, 520px)/1 "Space Grotesk", sans-serif; letter-spacing: -.09em; }
.viewer-care-opening-copy { position: relative; z-index: 1; }
.viewer-care-opening h2,
.viewer-care-includes h2,
.viewer-care-compare h2,
.viewer-care-details h2 { margin: 0; font: 520 clamp(42px, 5vw, 76px)/.96 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-care-opening h2 { max-width: 13ch; }
.viewer-care-opening h2 em,
.viewer-care-includes h2 em,
.viewer-care-compare h2 em,
.viewer-care-details h2 em { color: #d5010d; font-style: normal; }
.viewer-care-opening-copy > p:not(.viewer-care-kicker) { max-width: 650px; margin: 24px 0 0; color: #606066; font-size: clamp(14px, 1.16vw, 17px); line-height: 1.72; }
.viewer-care-opening-copy .viewer-care-lead { color: #252529; font: 520 clamp(19px, 1.8vw, 27px)/1.4 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-care-ownership { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 22px; color: #f4f4f2; background: linear-gradient(145deg, rgba(213, 1, 13, .14), transparent 46%), #101012; box-shadow: 0 36px 90px rgba(17, 17, 19, .22); }
.viewer-care-ownership header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #85858a; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-care-ownership header b { display: flex; align-items: center; gap: 8px; color: #b9b9bd; font-size: 8px; }
.viewer-care-ownership header b i { width: 7px; height: 7px; border-radius: 50%; background: #4be39a; box-shadow: 0 0 0 4px rgba(75, 227, 154, .1); }
.viewer-care-ownership article { display: grid; grid-template-columns: minmax(86px, .34fr) minmax(120px, .62fr) minmax(150px, 1fr); gap: 18px; align-items: center; min-height: 92px; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.viewer-care-ownership article > span { color: #ff4a55; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.viewer-care-ownership article strong { font: 550 clamp(15px, 1.3vw, 19px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-care-ownership article small { color: #909095; font-size: 11.5px; line-height: 1.45; }
.viewer-care-ownership footer { display: flex; gap: 16px; align-items: center; padding: 22px 24px; background: rgba(0, 0, 0, .22); }
.viewer-care-ownership footer > i { width: 11px; height: 11px; border: 2px solid #ff4a55; border-radius: 50%; box-shadow: 0 0 0 6px rgba(213, 1, 13, .08); }
.viewer-care-ownership footer span { display: grid; gap: 3px; }
.viewer-care-ownership footer strong { color: #f4f4f2; font-size: 12px; }
.viewer-care-ownership footer small { color: #8f8f94; font-size: 11px; }

.viewer-care-includes { min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); color: #f4f4f2; background: radial-gradient(circle at 86% 5%, rgba(213, 1, 13, .16), transparent 26%), #0b0b0d; }
.viewer-care-includes > header,
.viewer-care-compare > header { display: grid; grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 100px); }
.viewer-care-includes > header .viewer-care-kicker,
.viewer-care-compare > header .viewer-care-kicker { margin: 0; }
.viewer-care-includes > header > div > p { max-width: 690px; margin: 24px 0 0; color: #9b9ba0; font-size: clamp(14px, 1.12vw, 16px); line-height: 1.7; }
.viewer-care-includes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(52px, 7vw, 88px); }
.viewer-care-includes-grid article { position: relative; min-height: 290px; padding: clamp(28px, 3.2vw, 44px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; background: rgba(255, 255, 255, .035); }
.viewer-care-check { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 70, 81, .45); border-radius: 50%; color: #ff4a55; }
.viewer-care-check svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewer-care-includes-grid small { display: block; margin-top: 30px; color: #ff4a55; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-care-includes-grid h3 { max-width: 20ch; margin: 12px 0 0; color: #f4f4f2; font: 560 clamp(22px, 2vw, 30px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.viewer-care-includes-grid p { max-width: 56ch; margin: 15px 0 0; color: #99999f; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.65; }
.viewer-care-includes > aside { display: grid; grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 100px); margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .13); }
.viewer-care-includes > aside strong { color: #ff4a55; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.viewer-care-includes > aside p { max-width: 720px; margin: 0; color: #b3b3b8; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; }

.viewer-care-compare { min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); color: #202023; background: var(--care-paper); }
.viewer-care-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 90px); }
.viewer-care-compare-grid > article { position: relative; display: flex; flex-direction: column; min-height: 560px; overflow: hidden; padding: clamp(30px, 3.3vw, 48px); border: 1px solid #d0d0cd; border-radius: 20px; background: #fafaf8; }
.viewer-care-compare-grid > article.is-care { color: #f4f4f2; border-color: rgba(255, 255, 255, .12); background: linear-gradient(145deg, rgba(213, 1, 13, .13), transparent 48%), #101012; box-shadow: 0 30px 76px rgba(17, 17, 19, .16); }
.viewer-care-compare-grid small { color: #d5010d; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-care-compare-grid h3 { max-width: 17ch; margin: 18px 0 0; font: 580 clamp(28px, 2.8vw, 42px)/1.03 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-care-compare-grid > article > div p { margin: 14px 0 0; color: #6a6a70; font-size: 14px; line-height: 1.55; }
.viewer-care-compare-grid > article.is-care > div p { color: #a3a3a8; }
.viewer-care-compare-grid ul { display: grid; gap: 0; margin: 34px 0 38px; padding: 0; list-style: none; }
.viewer-care-compare-grid li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid #dededb; color: #4d4d52; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.5; }
.viewer-care-compare-grid li::before { content: "✓"; position: absolute; left: 2px; color: #d5010d; font-weight: 800; }
.viewer-care-compare-grid .is-care li { color: #b2b2b7; border-color: rgba(255, 255, 255, .11); }
.viewer-care-compare-grid .foghorn-cta { margin-top: auto; align-self: flex-start; }

.viewer-care-details { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr); gap: clamp(58px, 9vw, 132px); min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); color: #f4f4f2; background: radial-gradient(circle at 12% 5%, rgba(213, 1, 13, .19), transparent 25%), #0b0b0d; }
.viewer-care-details > div:first-child { align-self: start; }
.viewer-care-details h2 { max-width: 9ch; }
.viewer-care-faq { align-self: start; border-top: 1px solid rgba(255, 255, 255, .14); }
.viewer-care-faq details { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.viewer-care-faq summary { position: relative; padding: 26px 52px 26px 0; color: #f4f4f2; font: 530 clamp(17px, 1.6vw, 23px)/1.25 "Space Grotesk", sans-serif; letter-spacing: -.025em; cursor: pointer; list-style: none; }
.viewer-care-faq summary::-webkit-details-marker { display: none; }
.viewer-care-faq summary i { position: absolute; top: 50%; right: 8px; width: 18px; height: 18px; transform: translateY(-50%); }
.viewer-care-faq summary i::before,
.viewer-care-faq summary i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: #ff4a55; transition: transform 360ms ease; }
.viewer-care-faq summary i::after { transform: rotate(90deg); }
.viewer-care-faq details[open]:not([data-disclosure-expanded="false"]) summary i::after { transform: rotate(0); }
.viewer-care-faq details p { max-width: 700px; margin: -4px 0 28px; color: #a3a3a8; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.7; }
.viewer-growth-console { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 22px; color: #f4f4f2; background: linear-gradient(145deg, rgba(35, 95, 80, .2), transparent 46%), #101012; box-shadow: 0 36px 90px rgba(17, 17, 19, .22); }
.viewer-growth-console header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #85858a; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-growth-console header b { display: flex; align-items: center; gap: 8px; color: #b9b9bd; font-size: 8px; }
.viewer-growth-console header b i { width: 7px; height: 7px; border-radius: 50%; background: #4be39a; box-shadow: 0 0 0 4px rgba(75, 227, 154, .1); }
.viewer-growth-console article { display: grid; grid-template-columns: minmax(84px, .32fr) minmax(150px, .72fr) minmax(160px, 1fr); gap: 18px; align-items: center; min-height: 96px; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.viewer-growth-console article > span { color: #ff4a55; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.viewer-growth-console article strong { font: 550 clamp(15px, 1.3vw, 19px)/1.2 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-growth-console article small { color: #909095; font-size: 11.5px; line-height: 1.45; }
.viewer-growth-console footer { display: flex; gap: 16px; align-items: center; padding: 22px 24px; background: rgba(0, 0, 0, .22); }
.viewer-growth-console footer > i { width: 11px; height: 11px; border: 2px solid #4be39a; border-radius: 50%; box-shadow: 0 0 0 6px rgba(75, 227, 154, .08); }
.viewer-growth-console footer span { display: grid; gap: 3px; }
.viewer-growth-console footer strong { color: #f4f4f2; font-size: 12px; }
.viewer-growth-console footer small { color: #8f8f94; font-size: 11px; }
.viewer-growth-options .viewer-care-compare-grid > article { min-height: 520px; }
@container (max-width: 1000px) {
  .viewer-care-opening { grid-template-columns: 1fr; }
  .viewer-care-includes > header,
  .viewer-care-compare > header { grid-template-columns: 1fr; }
  .viewer-care-includes > header .viewer-care-kicker,
  .viewer-care-compare > header .viewer-care-kicker { margin-bottom: 42px; }
  .viewer-care-details { grid-template-columns: 1fr; }
  .viewer-care-details h2 { max-width: 12ch; }
  .viewer-care-compare-grid { grid-template-columns: 1fr; }
}
@container (max-width: 700px) {
  .viewer-care-includes-grid,
  .viewer-care-compare-grid { grid-template-columns: 1fr; }
  .viewer-care-includes > aside { grid-template-columns: 1fr; gap: 16px; }
  .viewer-care-compare-grid > article { min-height: 0; }
}
@container (max-width: 560px) {
  .viewer-care-opening,
  .viewer-care-includes,
  .viewer-care-compare,
  .viewer-care-details { min-height: 0; padding: 64px 22px 72px; }
  .viewer-care-opening { gap: 48px; }
  .viewer-care-kicker { margin-bottom: 44px; }
  .viewer-care-opening h2,
  .viewer-care-includes h2,
  .viewer-care-compare h2,
  .viewer-care-details h2 { max-width: none; font-size: clamp(42px, 12.5vw, 56px); }
  .viewer-care-opening-copy > p:not(.viewer-care-kicker) { font-size: 14px; }
  .viewer-care-ownership article { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .viewer-growth-console article { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .viewer-care-ownership article small { font-size: 11px; }
  .viewer-care-includes-grid { margin-top: 48px; }
  .viewer-care-includes-grid article { min-height: 0; padding: 28px 24px; }
  .viewer-care-includes-grid h3 { font-size: 24px; }
  .viewer-care-compare-grid { margin-top: 48px; }
  .viewer-care-compare-grid > article { padding: 30px 24px; }
  .viewer-care-compare-grid h3 { font-size: 31px; }
  .viewer-care-details { gap: 48px; }
  .viewer-care-faq summary { padding-block: 23px; font-size: 18px; }
}

/* Web design — fit check */
.viewer-web-fit {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(440px, 1.18fr);
  gap: clamp(64px, 8vw, 130px);
  min-height: var(--viewer-viewport-height, calc(100dvh - 32px));
  padding: clamp(84px, 10vw, 148px) clamp(44px, 8vw, 124px);
  overflow: hidden;
  color: #f5f5f3;
  background:
    radial-gradient(circle at 18% 46%, rgba(87, 25, 91, .18), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(213, 1, 13, .10), transparent 30%),
    #0b0b0d;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.viewer-web-fit::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: clamp(-180px, -8vw, -80px);
  bottom: clamp(-210px, -13vw, -100px);
  width: clamp(340px, 38vw, 610px);
  aspect-ratio: 1.5;
  border: 1px solid rgba(255, 70, 81, .15);
  border-radius: 50%;
  transform: rotate(28deg);
}

.viewer-web-fit::after {
  content: "07";
  position: absolute;
  z-index: -1;
  right: -0.04em;
  bottom: -.18em;
  color: rgba(255, 255, 255, .018);
  font: 650 clamp(250px, 34vw, 520px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.1em;
}

.viewer-web-fit-intro { align-self: start; }

.viewer-web-fit-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(56px, 7vw, 92px);
  color: #9b9ba1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.viewer-web-fit-kicker span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 70, 81, .38);
  border-radius: 50%;
  color: #ff4651;
  background: rgba(213, 1, 13, .07);
  letter-spacing: 0;
}

.viewer-web-fit h2 {
  max-width: 11ch;
  margin: 0;
  font: 560 clamp(48px, 5.6vw, 82px)/.94 "Space Grotesk", sans-serif;
  letter-spacing: -.065em;
}

.viewer-web-fit h2 em { color: #ff3440; font-style: normal; }

.viewer-web-fit-intro > p:last-child {
  max-width: 500px;
  margin: clamp(28px, 3.5vw, 46px) 0 0;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 70, 81, .45);
  color: #aaaab0;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.72;
}

.viewer-web-fit-list {
  display: grid;
  align-content: start;
  gap: 14px;
}

.viewer-web-fit-list article {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
  min-height: 150px;
  padding: clamp(25px, 2.7vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
  transform: translate3d(0, calc((1 - var(--viewer-progress, 0)) * 16px), 0);
  transition: border-color 350ms ease, background-color 350ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-web-fit-list article::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #e50917;
  transform: scaleY(.22);
  transform-origin: 50% 50%;
  transition: transform 480ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-web-fit-number {
  color: #ff4651;
  font: 700 11px/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}

.viewer-web-fit-list h3 {
  margin: -4px 0 0;
  color: #f4f4f2;
  font: 570 clamp(19px, 1.75vw, 25px)/1.16 "Space Grotesk", sans-serif;
  letter-spacing: -.035em;
}

.viewer-web-fit-list p {
  max-width: 650px;
  margin: 13px 0 0;
  color: #98989f;
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.62;
}

.viewer-web-fit-close {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 36px;
  align-items: end;
  margin-top: clamp(10px, 2vw, 28px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, .11);
}

.viewer-web-fit-close > div { display: grid; grid-template-columns: minmax(110px, .28fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.viewer-web-fit-close > div > span { color: #ff4651; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.viewer-web-fit-close p { max-width: 620px; margin: 0; color: #b2b2b7; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.65; }

.viewer-web-fit-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid #e50917;
  border-radius: 999px;
  color: #fff;
  background: #d5010d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
  box-shadow: 0 16px 38px rgba(213, 1, 13, .24);
}

@media (hover: hover) and (pointer: fine) {
  .viewer-web-fit-list article:hover { border-color: rgba(255, 70, 81, .3); background: rgba(255, 255, 255, .065); transform: translate3d(0, -3px, 0); }
  .viewer-web-fit-list article:hover::after { transform: scaleY(1); }
}

@container (max-width: 1100px) {
  .viewer-web-fit { grid-template-columns: 1fr; gap: 60px; padding-inline: clamp(42px, 6vw, 72px); }
  .viewer-web-fit-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); gap: 28px 54px; }
  .viewer-web-fit-kicker { grid-column: 1 / -1; margin-bottom: 8px; }
  .viewer-web-fit h2 { max-width: 12ch; }
  .viewer-web-fit-intro > p:last-child { align-self: end; margin: 0; }
  .viewer-web-fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-web-fit-list article { min-height: 205px; }
}

@container (max-width: 760px) {
  .viewer-web-fit-intro { grid-template-columns: 1fr; gap: 0; }
  .viewer-web-fit-kicker { margin-bottom: 54px; }
  .viewer-web-fit-intro > p:last-child { margin-top: 32px; }
  .viewer-web-fit-list { grid-template-columns: 1fr; }
  .viewer-web-fit-list article { min-height: 0; }
  .viewer-web-fit-close { grid-template-columns: 1fr; align-items: start; }
}

@container (max-width: 560px) {
  .viewer-web-fit { min-height: 0; gap: 48px; padding: 64px 22px 72px; }
  .viewer-web-fit-kicker { margin-bottom: 44px; }
  .viewer-web-fit h2 { max-width: none; font-size: clamp(42px, 12.5vw, 56px); }
  .viewer-web-fit-intro > p:last-child { padding-left: 18px; font-size: 14px; }
  .viewer-web-fit-list { gap: 12px; }
  .viewer-web-fit-list article { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 26px 22px; border-radius: 15px; }
  .viewer-web-fit-list h3 { font-size: 21px; }
  .viewer-web-fit-list p { font-size: 13px; }
  .viewer-web-fit-close { gap: 28px; margin-top: 2px; padding-top: 30px; }
  .viewer-web-fit-close > div { grid-template-columns: 1fr; gap: 14px; }
  .viewer-web-fit-cta { min-height: 54px; padding-inline: 17px; }
}

/* Signal flagship page */
.viewer-page--conversation-sites {
  container-type: inline-size;
  --signal-red: #e50917;
  --signal-paper: #f2f2ef;
  --signal-ink: #0b0b0d;
}

.viewer-page--conversation-sites .viewer-page-hero {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 18%, rgba(229, 9, 23, .3), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(107, 10, 18, .19), transparent 34%),
    #09090b;
}

.viewer-page--conversation-sites .viewer-page-hero::after {
  display: none;
}

.viewer-signal-hero-orb {
  position: absolute;
  z-index: -1;
  top: clamp(48px, 9vh, 110px);
  right: clamp(-150px, -7vw, -44px);
  width: clamp(290px, 39vw, 560px);
  aspect-ratio: 1;
  opacity: calc(.12 + var(--viewer-progress, 0) * .88);
  transform: scale(calc(.8 + var(--viewer-progress, 0) * .2));
  transform-origin: 54% 48%;
  pointer-events: none;
}

.viewer-signal-hero-glow,
.viewer-signal-hero-ring,
.viewer-signal-hero-core,
.viewer-signal-hero-node {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.viewer-signal-hero-glow {
  inset: -7%;
  z-index: 0;
  background: radial-gradient(circle at 43% 42%, rgba(255, 83, 95, .18), rgba(229, 9, 23, .075) 42%, transparent 72%);
  filter: blur(1px);
}

.viewer-signal-hero-ring {
  top: 50%;
  left: 50%;
  z-index: 2;
  border: 1px solid rgba(255, 78, 90, .31);
  box-shadow: inset 0 0 55px rgba(229, 9, 23, .045), 0 0 34px rgba(229, 9, 23, .035);
}

.viewer-signal-hero-ring--outer {
  width: 268%;
  height: 238%;
  border-color: rgba(255, 78, 90, .18);
  animation: signal-hero-orbit-outer 13.5s ease-in-out infinite alternate;
}

.viewer-signal-hero-ring--middle {
  width: 210%;
  height: 192%;
  border-color: rgba(255, 89, 100, .21);
  animation: signal-hero-orbit-middle 10.8s ease-in-out -2.4s infinite alternate;
}

.viewer-signal-hero-ring--inner {
  width: 158%;
  height: 148%;
  border-color: rgba(255, 105, 115, .25);
  background: transparent;
  animation: signal-hero-orbit-inner 8.6s ease-in-out -4.1s infinite alternate;
}

.viewer-signal-hero-core {
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 92%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 91, 101, .3);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 105, 116, .18), rgba(229, 9, 23, .07) 34%, rgba(98, 5, 13, .045) 61%, transparent 74%),
    rgba(229, 9, 23, .018);
  box-shadow: inset 0 0 100px rgba(229, 9, 23, .14), 0 0 110px rgba(229, 9, 23, .12);
  animation: signal-hero-brain 5.7s ease-in-out infinite;
}

.viewer-signal-hero-node {
  z-index: 3;
  width: clamp(14px, 2.15vw, 25px);
  aspect-ratio: 1;
  background: #ff4050;
  box-shadow: 0 0 0 9px rgba(229, 9, 23, .07), 0 0 30px rgba(255, 64, 80, .78);
}

.viewer-signal-hero-node--one { top: -18%; left: 29%; animation: signal-hero-node-one 9.7s ease-in-out infinite alternate; }
.viewer-signal-hero-node--three {
  top: 43%;
  left: -44%;
  width: clamp(18px, 2.7vw, 31px);
  box-shadow: 0 0 0 11px rgba(229, 9, 23, .075), 0 0 38px rgba(255, 64, 80, .82);
  animation: signal-hero-node-three 11.3s ease-in-out -5.2s infinite alternate;
}

@keyframes signal-hero-orbit-outer {
  0% { transform: translate3d(-51%, -48%, 0) rotate(-7deg) scale(1); }
  38% { transform: translate3d(-48.5%, -52%, 0) rotate(3deg) scale(1.035, .985); }
  72% { transform: translate3d(-52%, -49.5%, 0) rotate(-2deg) scale(.985, 1.025); }
  100% { transform: translate3d(-49%, -51%, 0) rotate(6deg) scale(1.02, .99); }
}

@keyframes signal-hero-orbit-middle {
  0% { transform: translate3d(-47%, -53%, 0) rotate(8deg) scale(.97, 1.03); }
  45% { transform: translate3d(-53%, -48%, 0) rotate(-5deg) scale(1.04, .98); }
  100% { transform: translate3d(-49%, -51%, 0) rotate(2deg) scale(.99, 1.035); }
}

@keyframes signal-hero-orbit-inner {
  0% { transform: translate3d(-54%, -47%, 0) scale(1.02, .96); }
  52% { transform: translate3d(-46%, -54%, 0) scale(.94, 1.07); }
  100% { transform: translate3d(-51%, -49%, 0) scale(1.06, .98); }
}

@keyframes signal-hero-brain {
  0%, 100% { transform: translate3d(-50%, -50%, 0) scale(.985, 1.015); }
  34% { transform: translate3d(-49%, -51%, 0) scale(1.018, .992); }
  68% { transform: translate3d(-51%, -49.5%, 0) scale(.994, 1.02); }
}

@keyframes signal-hero-node-one {
  0% { transform: translate3d(-16px, 7px, 0) scale(.78); opacity: .52; }
  47% { transform: translate3d(13px, -16px, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(28px, 11px, 0) scale(.9); opacity: .7; }
}

@keyframes signal-hero-node-three {
  0% { transform: translate3d(-15px, 8px, 0) scale(.84); opacity: .62; }
  41% { transform: translate3d(19px, 21px, 0) scale(1.14); opacity: .95; }
  100% { transform: translate3d(7px, -19px, 0) scale(.74); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-signal-hero-ring,
  .viewer-signal-hero-core,
  .viewer-signal-hero-node { animation: none; }
  .viewer-signal-hero-ring { transform: translate3d(-50%, -50%, 0); }
  .viewer-signal-hero-core { transform: translate3d(-50%, -50%, 0); }
  .viewer-signal-momentum-signal,
  .viewer-signal-momentum-signal::before,
  .viewer-signal-momentum-signal > i { animation: none !important; transition: none !important; }
  .viewer-signal-momentum-point { transition: none; }
  .viewer-signal-momentum-visual::before,
  .viewer-signal-momentum-path::after { animation: none !important; }
}

.viewer-page--conversation-sites .viewer-page-hero h1 { max-width: 11ch; }
.viewer-page--conversation-sites .viewer-page-hero h1 em { color: #ff2a38; font-style: normal; }
.viewer-page--conversation-sites .viewer-page-hero .viewer-page-intro { max-width: 650px; color: #b5b5ba; }

.viewer-signal-live,
.viewer-signal-flow,
.viewer-signal-visual,
.viewer-signal-contrast,
.viewer-signal-existing,
.viewer-signal-momentum,
.viewer-signal-context,
.viewer-signal-handover,
.viewer-signal-knowledge,
.viewer-signal-safety,
.viewer-signal-faq,
.viewer-signal-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) clamp(38px, 7vw, 96px);
}

/* Suspend motion outside the scroll viewport. The product page remains
   visually rich while avoiding continuous work for invisible sections. */
.viewer-page [data-viewer-reveal]:not(.is-render-active),
.viewer-page [data-viewer-reveal]:not(.is-render-active) *,
.viewer-page [data-viewer-reveal]:not(.is-render-active)::before,
.viewer-page [data-viewer-reveal]:not(.is-render-active)::after,
.viewer-page [data-viewer-reveal]:not(.is-render-active) *::before,
.viewer-page [data-viewer-reveal]:not(.is-render-active) *::after {
  animation-play-state: paused !important;
}

.viewer-signal-live,
.viewer-signal-visual,
.viewer-signal-contrast,
.viewer-signal-existing,
.viewer-signal-momentum,
.viewer-signal-handover,
.viewer-signal-knowledge,
.viewer-signal-safety,
.viewer-signal-faq,
.viewer-signal-cta {
  color: #f6f6f4;
  background: #0b0b0d;
}

.viewer-signal-section-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(128px, .3fr) minmax(0, 1fr);
  gap: 12px clamp(28px, 5vw, 74px);
  align-items: start;
}

.viewer-signal-section-head > p,
.viewer-signal-handover-copy > p,
.viewer-signal-knowledge-copy > p,
.viewer-signal-cta p {
  margin: 7px 0 0;
  color: #ff4652;
  font: 800 9px/1.25 Inter, sans-serif;
  letter-spacing: .15em;
}

.viewer-signal-section-head h2,
.viewer-signal-handover-copy h2,
.viewer-signal-knowledge-copy h2,
.viewer-signal-cta h2 {
  margin: 0;
  font: 500 clamp(42px, 5.2vw, 76px)/.96 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
}

.viewer-signal-section-head h2 em { color: #ff2a38; font-style: normal; }

.viewer-signal-section-head > span {
  grid-column: 2;
  max-width: 530px;
  margin-top: 6px;
  color: #99999f;
  font-size: 15px;
  line-height: 1.62;
}

.viewer-signal-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 55%, rgba(229, 9, 23, .16), transparent 31%);
  pointer-events: none;
}

.viewer-signal-live-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(200px, .42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 62px);
  margin-top: clamp(48px, 7vw, 90px);
}

.viewer-signal-demonstration {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.viewer-signal-demo-title {
  display: block;
  min-height: 42px;
  padding: 0 4px;
}

.viewer-signal-demo-title > strong {
  display: block;
  color: #f4f4f2;
  font: 620 clamp(20px, 2vw, 28px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.035em;
}

.viewer-signal-demo-title > strong.is-animating .viewer-hero-char {
  transition:
    opacity 340ms var(--onyx-scene-ease) var(--char-delay, 70ms),
    filter 440ms var(--onyx-scene-ease) var(--char-delay, 70ms),
    transform 520ms var(--onyx-scene-ease) var(--char-delay, 70ms);
}

.viewer-signal-prompts {
  display: grid;
  align-content: start;
  gap: 10px;
}

.viewer-page .viewer-signal-prompts button {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  color: #99999f;
  background: rgba(255, 255, 255, .025);
  font: 620 13px/1.35 "Space Grotesk", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-signal-prompts button::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff3946;
  box-shadow: 0 0 14px rgba(255, 57, 70, .8);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 260ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-signal-prompts button > strong {
  display: grid;
  gap: 6px;
  color: inherit;
  font: 650 14px/1.2 "Space Grotesk", sans-serif;
}

.viewer-signal-prompts button small {
  color: #6f6f75;
  font: 500 11px/1.3 Inter, sans-serif;
}

.viewer-signal-niche-icon {
  --niche-icon: url("/assets/icons/presentation/storefront-bold.svg");
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  color: #77777d;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  transition: color 260ms ease, border-color 260ms ease, background 260ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms ease;
}

.viewer-signal-niche-icon::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  mask: var(--niche-icon) center / contain no-repeat;
  -webkit-mask: var(--niche-icon) center / contain no-repeat;
}

.viewer-signal-niche-icon--trades { --niche-icon: url("/assets/icons/presentation/wrench-bold.svg"); }
.viewer-signal-niche-icon--hospitality { --niche-icon: url("/assets/icons/presentation/bed-bold.svg"); }
.viewer-signal-niche-icon--professional { --niche-icon: url("/assets/icons/presentation/scales-bold.svg"); }
.viewer-signal-niche-icon--fitness { --niche-icon: url("/assets/icons/presentation/barbell-bold.svg"); }

.viewer-page .viewer-signal-prompts button.is-active {
  color: #fff;
  border-color: rgba(255, 67, 79, .34);
  background: linear-gradient(110deg, rgba(229, 9, 23, .13), rgba(255, 255, 255, .035));
  transform: translate3d(7px, 0, 0);
}

.viewer-signal-prompts button.is-active::after { opacity: 1; transform: scale(1); }

.viewer-signal-prompts button.is-active .viewer-signal-niche-icon {
  color: #ff4652;
  border-color: rgba(255, 70, 82, .42);
  background: rgba(229, 9, 23, .14);
  box-shadow: 0 0 24px rgba(229, 9, 23, .14), inset 0 1px rgba(255, 255, 255, .06);
  transform: scale(1.045) rotate(-2deg);
}
.viewer-signal-prompts button.is-active small { color: #aaaab0; }

.viewer-signal-stage {
  position: relative;
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: clamp(18px, 2.4vw, 28px);
  min-height: 780px;
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(145deg, #18181b, #101012 64%);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .035);
  contain: layout paint;
}

.viewer-signal-stage::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -90px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: rgba(229, 9, 23, .14);
  filter: blur(80px);
  transition: opacity 220ms ease, transform 600ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-signal-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 12%;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff3441, transparent);
  box-shadow: 0 0 18px rgba(255, 52, 65, .7);
  opacity: .72;
  animation: signal-stage-scan 5.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.viewer-signal-stage.is-thinking::before { opacity: .72; transform: scale(1.18); }

.viewer-signal-demo-note,
.viewer-signal-enquiry-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #85858b;
  font: 750 8px/1.4 Inter, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.viewer-signal-demo-note i,
.viewer-signal-enquiry-label i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3d4a;
  box-shadow: 0 0 12px rgba(255, 61, 74, .68);
}

.viewer-signal-visitor {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(82%, 520px);
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px 16px 3px 16px;
  background: rgba(255, 255, 255, .065);
}

.viewer-signal-visitor span,
.viewer-signal-response > div > span,
.viewer-signal-conclusion > span,
.viewer-signal-outcome > span {
  color: #808087;
  font: 800 8px/1 Inter, sans-serif;
  letter-spacing: .15em;
}

.viewer-signal-visitor p,
.viewer-signal-response p { margin: 10px 0 0; }
.viewer-signal-visitor p { font: 650 clamp(16px, 1.5vw, 20px)/1.42 Inter, sans-serif; letter-spacing: -.012em; }

.viewer-signal-response {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-self: center;
  width: min(92%, 670px);
  min-height: 0;
}

.viewer-signal-response p { color: #d7d7d8; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; }
.viewer-signal-response > div > span { color: #ff4652; }
.viewer-signal-response [data-signal-answer] {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.viewer-signal-response [data-signal-answer] p { margin: 0; }
.viewer-signal-response [data-signal-answer] p:first-child { color: #ededee; font-weight: 600; }
.viewer-signal-response [data-signal-answer] p + p { color: #a9a9ae; }

.viewer-signal-visitor--reply {
  justify-self: end;
  width: min(74%, 470px);
  padding: 15px 18px;
  background: rgba(255, 255, 255, .045);
}

.viewer-signal-visitor--reply p { font-size: clamp(14px, 1.15vw, 17px); }

.viewer-signal-conclusion {
  position: relative;
  z-index: 1;
  width: min(94%, 680px);
  padding-left: 72px;
}

.viewer-signal-conclusion::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 19px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 71, 82, .5);
  border-radius: 50%;
  background: radial-gradient(circle, #ff3441 0 3px, transparent 4px);
  box-shadow: 0 0 18px rgba(229, 9, 23, .18);
}

.viewer-signal-conclusion > span { color: #ff4652; }
.viewer-signal-conclusion p { margin: 9px 0 0; color: #d2d2d4; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.62; }

.viewer-signal-response-mark {
  position: relative;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 71, 82, .58);
  border-radius: 50%;
  background: radial-gradient(circle, #ff2836 0 5px, rgba(229, 9, 23, .15) 6px 38%, transparent 39%);
  box-shadow: 0 0 28px rgba(229, 9, 23, .18);
}

.viewer-signal-response-mark i {
  position: absolute;
  inset: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 67, 79, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.52);
  animation: signal-response-pulse 3.2s ease-out infinite;
}

.viewer-signal-response-mark i:nth-child(2) { animation-delay: 1.05s; }
.viewer-signal-response-mark i:nth-child(3) { animation-delay: 2.1s; }

.viewer-signal-outcome {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid rgba(255, 61, 73, .18);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(229, 9, 23, .11), rgba(255, 255, 255, .025));
}

.viewer-signal-outcome > span { grid-column: 1; }
.viewer-signal-outcome strong { grid-column: 1; color: #fff; font: 700 14px/1.4 Inter, sans-serif; letter-spacing: -.01em; }
.viewer-signal-outcome .ui-icon { grid-column: 2; grid-row: 1 / 3; --ui-icon-size: 22px; color: #ff4652; }

@keyframes signal-response-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  22% { opacity: .75; }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes signal-stage-scan {
  from { transform: translate3d(-20%, 0, 0); opacity: .35; }
  to { transform: translate3d(150%, 0, 0); opacity: .85; }
}

.viewer-signal-flow {
  --signal-scroll-progress: 0;
  color: #111113;
  background: var(--signal-paper);
}

.viewer-signal-section-head--light > span { color: #6e6e73; }

.viewer-signal-flow-track {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 940px;
  margin: clamp(54px, 8vw, 104px) 0 0 auto;
  padding-left: 78px;
}

.viewer-signal-flow-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26px;
  width: 1px;
  background: #c9c9c8;
}

.viewer-signal-flow-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal-red);
  box-shadow: 0 0 18px rgba(229, 9, 23, .35);
  transform: scaleY(var(--signal-scroll-progress));
  transform-origin: top;
}

.viewer-signal-flow-track article {
  --step-start: 0;
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  min-height: 190px;
  padding: 34px 0 38px;
  border-top: 1px solid #c9c9c8;
  opacity: clamp(.35, calc((var(--signal-scroll-progress) - var(--step-start)) * 4 + .35), 1);
  transform: translate3d(0, calc((1 - var(--signal-scroll-progress)) * 13px), 0);
}

.viewer-signal-flow-track article:nth-of-type(2) { --step-start: .22; }
.viewer-signal-flow-track article:nth-of-type(3) { --step-start: .45; }
.viewer-signal-flow-track article > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  background: #111113;
  font: 800 9px/1 Inter, sans-serif;
  letter-spacing: .08em;
}

.viewer-signal-flow-track h3 { margin: 0; font: 600 clamp(26px, 3vw, 42px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-signal-flow-track p { max-width: 600px; margin: 15px 0 0; color: #68686d; font-size: 15px; line-height: 1.65; }

.viewer-signal-discovery-note {
  display: grid;
  grid-template-columns: minmax(140px, .27fr) minmax(220px, .55fr) minmax(260px, 1fr);
  gap: 22px clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(46px, 7vw, 88px);
  padding: clamp(24px, 3.5vw, 42px) 0;
  border-block: 1px solid #c9c9c8;
}
.viewer-signal-discovery-note > span { padding-top: 5px; color: #d5010d; font: 800 8px/1.4 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-discovery-note > strong { max-width: 15ch; color: #111113; font: 600 clamp(23px, 2.5vw, 34px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.viewer-signal-discovery-note > p { max-width: 62ch; margin: 0; color: #68686d; font-size: 14px; line-height: 1.7; }
.viewer-signal-discovery-note > * { min-width: 0; overflow-wrap: break-word; }

.viewer-signal-visual {
  --signal-scroll-progress: 0;
  background:
    radial-gradient(circle at 78% 42%, rgba(229, 9, 23, calc(.08 + var(--signal-scroll-progress) * .15)), transparent 34%),
    linear-gradient(145deg, #0b0b0d 0%, #100b0d 54%, #0b0b0d 100%);
}
.viewer-signal-visual .viewer-signal-section-head h2 { max-width: 13ch; }
.viewer-signal-visual-perspective {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
  margin-top: clamp(42px, 6vw, 70px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .035), rgba(229, 9, 23, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.viewer-signal-visual-perspective > span { display: grid; gap: 9px; }
.viewer-signal-visual-perspective small { color: #ff5360; font: 800 8px/1.25 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-visual-perspective strong { max-width: 34ch; color: #e9e9e7; font: 600 clamp(17px, 1.8vw, 23px)/1.3 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-signal-visual-perspective > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 83, 96, .3); border-radius: 50%; color: #ff5360; font: 500 18px/1 Inter, sans-serif; }
.viewer-signal-visual-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: min(100%, 980px);
  margin-inline: auto;
  margin-top: clamp(58px, 8vw, 102px);
}
.viewer-signal-visual-perspective + .viewer-signal-visual-layout { margin-top: clamp(38px, 5vw, 64px); }
.viewer-signal-visual-dialogue {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 17px 20px 19px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(105deg, rgba(229, 9, 23, .055), rgba(255, 255, 255, .018));
}
.viewer-signal-visual-dialogue > small { justify-self: end; color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-visual-dialogue > p {
  justify-self: end;
  max-width: min(82%, 560px);
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 83, 96, .3);
  border-radius: 16px 16px 3px 16px;
  color: #f3f3f1;
  background: linear-gradient(135deg, rgba(229, 9, 23, .15), rgba(255, 255, 255, .035));
  font: 650 14px/1.5 Inter, sans-serif;
}
.viewer-signal-visual-dialogue > div { display: grid; grid-column: 1; grid-row: auto; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: center; width: min(92%, 680px); margin-top: 7px; }
.viewer-signal-visual-dialogue > div > span:last-child { padding: 14px 16px 15px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 3px 16px 16px 16px; background: rgba(255, 255, 255, .04); box-shadow: 0 13px 30px rgba(0, 0, 0, .16); }
.viewer-signal-visual-dialogue > div p { margin: 0; color: #c2c2c7; font-size: 13px; line-height: 1.65; }
.viewer-signal-visual-dialogue > div > span:last-child > small { display: block; margin-bottom: 7px; color: #ff5360; font: 800 8px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-visual-dialogue .viewer-signal-mini-core { width: 38px; height: 38px; }
.viewer-signal-visual-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.viewer-page .viewer-signal-visual-tabs button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  min-height: 70px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: #8b8b91;
  background: rgba(255, 255, 255, .02);
  text-align: left;
  cursor: pointer;
  transition: color 260ms ease, border-color 260ms ease, background 260ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}
.viewer-signal-visual-tabs button > span { grid-row: 1 / 3; color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-visual-tabs button strong { font: 650 13px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-visual-tabs button small { color: #6f6f75; font: 500 10px/1.35 Inter, sans-serif; }
.viewer-page .viewer-signal-visual-tabs button.is-active { color: #fff; border-color: rgba(255, 70, 82, .35); background: linear-gradient(110deg, rgba(229, 9, 23, .11), rgba(255, 255, 255, .035)); transform: translate3d(0, -4px, 0); }
.viewer-signal-visual-tabs button.is-active small { color: #a9a9ae; }

.viewer-signal-visual-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(10, 10, 12, .76);
  box-shadow: 0 45px 110px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
  transform: translate3d(0, calc((1 - var(--signal-scroll-progress)) * 18px), 0);
}
.viewer-signal-visual-stage::before { content: ""; position: absolute; inset: -40% -20% auto 35%; height: 340px; background: radial-gradient(circle, rgba(229, 9, 23, .2), transparent 63%); pointer-events: none; }
.viewer-signal-visual-stage > header { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.viewer-signal-visual-stage > header span,
.viewer-signal-visual-stage > header small { color: #77777d; font: 800 8px/1.2 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-visual-stage > header span { color: #ff5360; }
.viewer-signal-visual-stage > header span i { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #e50917; box-shadow: 0 0 12px rgba(229, 9, 23, .75); vertical-align: 1px; }
.viewer-signal-visual-panels { position: relative; min-height: 520px; padding: clamp(18px, 2.5vw, 28px); }
.viewer-signal-visual-panel { position: relative; z-index: 1; min-height: 464px; }
.viewer-signal-visual-panel[hidden] { display: none !important; }
.viewer-signal-product-count { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #c8c8cc; font: 650 11px/1 Inter, sans-serif; }
.viewer-signal-product-count span { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #77777d; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.viewer-signal-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
.viewer-signal-product-grid > section { overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; background: #141416; box-shadow: 0 20px 40px rgba(0, 0, 0, .22); transition: transform 520ms cubic-bezier(.16, 1, .3, 1), border-color 260ms ease, box-shadow 520ms ease; }
.viewer-signal-product-image { position: relative; height: 150px; overflow: hidden; background: #1d191c; isolation: isolate; }
.viewer-signal-product-image::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(7, 7, 9, .72)); pointer-events: none; }
.viewer-signal-product-image > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); transition: transform 800ms cubic-bezier(.16, 1, .3, 1), filter 500ms ease; }
.viewer-signal-product-grid > section:hover .viewer-signal-product-image > img { filter: saturate(1.08) contrast(1.03); transform: scale(1.055); }
.viewer-signal-product-image > span { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #eeeef0; background: rgba(10, 10, 12, .72); box-shadow: 0 8px 22px rgba(0, 0, 0, .24); backdrop-filter: blur(10px); font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-product-body { padding: 16px; }
.viewer-signal-product-body > small { color: #ff5360; font: 800 7px/1.3 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-product-body > strong { display: block; margin-top: 8px; color: #f4f4f2; font: 650 17px/1.15 "Space Grotesk", sans-serif; }
.viewer-signal-product-body > p { min-height: 54px; margin: 10px 0 0; color: #929298; font-size: 11px; line-height: 1.55; }
.viewer-signal-product-body footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .1); }
.viewer-signal-product-body footer b { color: #e9e9e7; font-size: 10px; }
.viewer-signal-product-body footer span { color: #ff5360; font-size: 9px; }
.viewer-signal-visual-next { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 5px 16px; align-items: center; margin-top: 16px; padding: 14px 15px; border: 1px solid rgba(255, 70, 82, .2); border-radius: 12px; background: linear-gradient(110deg, rgba(229, 9, 23, .08), rgba(255, 255, 255, .025)); }
.viewer-signal-visual-next span { color: #ff5360; font: 800 7px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-visual-next strong { color: #dcdcdf; font: 650 11px/1.35 "Space Grotesk", sans-serif; }
.viewer-signal-visual-next i { display: grid; grid-column: 2; grid-row: 1 / 3; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #d5010d; font: 600 15px/1 Inter, sans-serif; }
.viewer-signal-visual-stage > footer { display: flex; gap: 10px; align-items: flex-start; padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, .1); color: #74747a; font-size: 9px; line-height: 1.5; }
.viewer-signal-visual-stage > footer i { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #ff4652; }

.viewer-signal-image-feature { position: relative; min-height: 244px; overflow: hidden; border-radius: 16px; background: #49564f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); isolation: isolate; }
.viewer-signal-image-feature::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(7, 10, 12, .9) 0%, rgba(7, 10, 12, .62) 45%, rgba(7, 10, 12, .12) 78%); }
.viewer-signal-image-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.viewer-signal-image-feature:hover > img { transform: scale(1.045); }
.viewer-signal-image-feature > div { position: relative; z-index: 2; padding: clamp(28px, 5vw, 48px); }
.viewer-signal-image-feature span { color: #b9e4d1; font: 800 8px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-image-feature strong { display: block; max-width: 10ch; margin-top: 44px; color: #fff; font: 600 clamp(27px, 3vw, 38px)/1 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.viewer-signal-image-feature p { max-width: 44ch; margin: 15px 0 0; color: rgba(255, 255, 255, .72); font-size: 11px; line-height: 1.55; }
.viewer-signal-image-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.viewer-signal-image-pair figure { position: relative; min-height: 104px; overflow: hidden; margin: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #17191a; isolation: isolate; }
.viewer-signal-image-pair figure::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(7, 8, 9, .86)); }
.viewer-signal-image-pair figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.16, 1, .3, 1); }
.viewer-signal-image-pair figure:hover img { transform: scale(1.055); }
.viewer-signal-image-pair figcaption { position: absolute; z-index: 2; right: 12px; bottom: 11px; left: 12px; color: #f1f1ef; font: 650 10px/1.35 Inter, sans-serif; }
.viewer-signal-image-pair figcaption small { display: block; margin-bottom: 5px; color: #b9e4d1; font: 800 7px/1 Inter, sans-serif; letter-spacing: .12em; }

.viewer-signal-presentation-frame { overflow: hidden; min-height: 365px; border-radius: 16px; color: #10202d; background: #eaf3f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.viewer-signal-presentation-frame > header { display: flex; gap: 12px; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(20, 82, 116, .18); }
.viewer-signal-presentation-frame > header > span { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 8px; color: #fff; background: #1175a6; font: 800 8px/1 Inter, sans-serif; letter-spacing: -.04em; }
.viewer-signal-presentation-frame > header div { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex: 1; }
.viewer-signal-presentation-frame header strong { font: 700 11px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-presentation-frame header small { color: #237ca7; font: 800 7px/1 Inter, sans-serif; letter-spacing: .11em; }
.viewer-signal-presentation-formats { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid rgba(20, 82, 116, .13); background: rgba(255, 255, 255, .4); }
.viewer-signal-presentation-formats span { padding: 6px 8px; border-radius: 999px; color: #fff; background: #1175a6; font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-presentation-formats small { color: #688395; font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-itinerary { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(260px, 1.28fr); }
.viewer-signal-itinerary-intro { padding: 25px 22px 20px; }
.viewer-signal-itinerary-intro small { color: #1675a4; font: 800 7px/1.3 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-itinerary-intro strong { display: block; margin-top: 12px; color: #10202d; font: 600 clamp(24px, 2.5vw, 35px)/1 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-signal-itinerary-intro p { margin: 14px 0 0; color: #587082; font-size: 10px; line-height: 1.55; }
.viewer-signal-itinerary-map { position: relative; min-height: 225px; overflow: hidden; border-left: 1px solid rgba(20, 82, 116, .13); background: linear-gradient(145deg, #dcebf0, #f7f2e8); }
.viewer-signal-itinerary-map::before,
.viewer-signal-itinerary-map::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(17, 117, 166, .1); }
.viewer-signal-itinerary-map::before { width: 190px; height: 190px; right: -88px; top: -102px; }
.viewer-signal-itinerary-map::after { width: 110px; height: 110px; left: -52px; bottom: -66px; }
.viewer-signal-itinerary-map svg { position: absolute; inset: 14px 12px 8px; width: calc(100% - 24px); height: calc(100% - 22px); overflow: visible; }
.viewer-signal-itinerary-map .viewer-signal-map-land { fill: rgba(255, 255, 255, .54); stroke: rgba(34, 107, 132, .18); stroke-width: 1; }
.viewer-signal-itinerary-map .viewer-signal-map-route { fill: none; stroke: #e50917; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 7; }
.viewer-signal-itinerary-map circle { fill: #fff; stroke: #e50917; stroke-width: 3; }
.viewer-signal-itinerary-map > span { position: absolute; display: flex; gap: 5px; align-items: center; padding: 5px 7px; border: 1px solid rgba(16, 32, 45, .1); border-radius: 999px; color: #29495a; background: rgba(255, 255, 255, .9); box-shadow: 0 7px 18px rgba(16, 32, 45, .1); font: 700 7px/1 Inter, sans-serif; }
.viewer-signal-itinerary-map > span b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #1175a6; font: 800 6px/1 Inter, sans-serif; }
.viewer-signal-itinerary-map .is-tenby { left: 5%; bottom: 8%; }
.viewer-signal-itinerary-map .is-bosherston { left: 22%; top: 36%; }
.viewer-signal-itinerary-map .is-solva { left: 48%; top: 49%; }
.viewer-signal-itinerary-map .is-davids { right: 4%; top: 15%; }
.viewer-signal-itinerary-days { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 18px 18px; }
.viewer-signal-itinerary-days span { min-height: 62px; padding: 11px; border: 1px solid rgba(17, 117, 166, .18); border-radius: 10px; color: #36596c; background: rgba(255, 255, 255, .56); font: 650 8px/1.4 Inter, sans-serif; }
.viewer-signal-itinerary-days b { display: block; margin-bottom: 6px; color: #1675a4; font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-presentation-body { padding: 27px 24px 22px; }
.viewer-signal-presentation-body small { color: #1675a4; font: 800 8px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-presentation-body > strong { display: block; margin-top: 12px; font: 600 clamp(27px, 3.4vw, 43px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-signal-presentation-body p { max-width: 54ch; margin: 15px 0 0; color: #587082; font-size: 11px; line-height: 1.55; }
.viewer-signal-presentation-thread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 18px 18px; }
.viewer-signal-presentation-thread span { min-height: 76px; padding: 12px; border: 1px solid rgba(17, 117, 166, .22); border-radius: 10px; color: #36596c; background: rgba(255, 255, 255, .58); font: 650 9px/1.4 Inter, sans-serif; }
.viewer-signal-presentation-thread b { display: block; margin-bottom: 7px; color: #1675a4; font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-presentation-range { margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.viewer-signal-presentation-range > span { display: block; color: #ff5360; font: 800 7px/1.2 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-presentation-range > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.viewer-signal-presentation-range b { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #a6a6ac; background: rgba(255, 255, 255, .025); font: 650 8px/1 Inter, sans-serif; }

@media (hover: hover) and (pointer: fine) {
  .viewer-page .viewer-signal-visual-tabs button:hover { color: #fff; border-color: rgba(255, 255, 255, .24); transform: translate3d(4px, 0, 0); }
  .viewer-page .viewer-signal-visual-tabs button.is-active:hover { transform: translate3d(0, -4px, 0); }
  .viewer-signal-product-grid > section:hover { border-color: rgba(255, 83, 96, .34); box-shadow: 0 28px 55px rgba(0, 0, 0, .32); transform: translate3d(0, -5px, 0); }
}

.viewer-signal-contrast {
  --signal-scroll-progress: 0;
  padding-block: clamp(68px, 6.2vw, 88px);
  background:
    radial-gradient(circle at calc(72% + var(--signal-scroll-progress) * 8%) 60%, rgba(229, 9, 23, .2), transparent 34%),
    #0b0b0d;
}

.viewer-signal-contrast .viewer-signal-section-head h2 {
  max-width: 12ch;
  font-size: clamp(46px, 4.7vw, 62px);
}

.viewer-signal-contrast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(52px, 8vw, 96px);
}

.viewer-signal-contrast-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}

.viewer-signal-contrast-grid article:last-child {
  border-color: rgba(255, 73, 84, calc(.2 + var(--signal-scroll-progress) * .35));
  background: linear-gradient(145deg, rgba(229, 9, 23, calc(.05 + var(--signal-scroll-progress) * .13)), rgba(255, 255, 255, .025));
  transform: translate3d(0, calc((1 - var(--signal-scroll-progress)) * 18px), 0);
}

.viewer-signal-contrast-grid article > span { color: #717177; font: 800 9px/1 Inter, sans-serif; letter-spacing: .15em; }
.viewer-signal-contrast-grid article:last-child > span { color: #ff4652; }
.viewer-signal-contrast-grid strong { max-width: 12ch; margin-top: 48px; font: 600 clamp(30px, 3.6vw, 50px)/1 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
.viewer-signal-contrast-grid p { max-width: 48ch; margin: 22px 0 0; color: #919197; font-size: 14px; line-height: 1.65; }
.viewer-signal-contrast-grid b { margin-top: auto; padding-top: 30px; color: #76767b; font: 800 9px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-contrast-grid article:last-child b { color: #ff4652; }

.viewer-signal-difference-board {
  position: relative;
  z-index: 1;
  margin-top: clamp(42px, 5vw, 62px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .035);
}

.viewer-signal-difference-head,
.viewer-signal-difference-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viewer-signal-difference-head {
  min-height: 54px;
  background: rgba(255, 255, 255, .025);
}

.viewer-signal-difference-head span {
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 28px);
  color: #737379;
  font: 850 8px/1 Inter, sans-serif;
  letter-spacing: .16em;
}

.viewer-signal-difference-head span:last-child {
  border-left: 1px solid rgba(255, 255, 255, .11);
  color: #ff4c58;
  background: rgba(229, 9, 23, .055);
}

.viewer-signal-difference-row {
  min-height: 68px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.viewer-signal-difference-row > span,
.viewer-signal-difference-row > strong {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(16px, 3vw, 28px);
  text-wrap: pretty;
}

.viewer-signal-difference-row > span {
  color: #85858b;
  font: 520 clamp(11.5px, 1.05vw, 13px)/1.5 Inter, sans-serif;
}

.viewer-signal-difference-row > strong {
  border-left: 1px solid rgba(255, 255, 255, .11);
  color: #ececee;
  background: linear-gradient(90deg, rgba(229, 9, 23, .065), transparent 78%);
  font: 620 clamp(11.5px, 1.05vw, 13px)/1.5 Inter, sans-serif;
}

.viewer-signal-difference-row i {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.viewer-signal-difference-row > span i::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 3px;
  left: 3px;
  height: 1px;
  background: #707076;
}

.viewer-signal-difference-row > strong i {
  border-color: rgba(255, 72, 84, .4);
  background: rgba(229, 9, 23, .08);
  box-shadow: 0 0 14px rgba(229, 9, 23, .12);
}

.viewer-signal-difference-row > strong i::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid #ff5360;
  border-bottom: 1.5px solid #ff5360;
  transform: translate(4px, 2px) rotate(45deg);
}

.viewer-signal-shared-value {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(calc(100% - clamp(24px, 5vw, 70px)), 1080px);
  margin: clamp(26px, 3.5vw, 42px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 70, 82, .25);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(229, 9, 23, .1), rgba(255, 255, 255, .025) 48%, rgba(229, 9, 23, .055));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .04);
}

.viewer-signal-shared-value > header {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 22px clamp(18px, 3vw, 28px) 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(100deg, rgba(229, 9, 23, .08), rgba(8, 8, 10, .32) 54%);
}

.viewer-signal-shared-value > header span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ff4b57;
  font: 850 8px/1 Inter, sans-serif;
  letter-spacing: .16em;
}

.viewer-signal-shared-value > header span::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px rgba(255, 75, 87, .7);
  content: "";
}

.viewer-signal-shared-value > header strong {
  max-width: none;
  margin-top: 0;
  color: #f0f0ef;
  font: 600 clamp(17px, 1.8vw, 22px)/1.25 "Space Grotesk", sans-serif;
  letter-spacing: -.03em;
  text-align: left;
}

.viewer-signal-shared-value article {
  position: relative;
  min-height: 112px;
  padding: 22px clamp(18px, 3vw, 28px) 24px;
  background: rgba(10, 10, 12, .5);
}

.viewer-signal-shared-value article + article { border-left: 1px solid rgba(255, 255, 255, .1); }

.viewer-signal-shared-value span {
  display: block;
  color: #ff4b57;
  font: 850 8px/1 Inter, sans-serif;
  letter-spacing: .15em;
}

.viewer-signal-shared-value strong {
  display: block;
  max-width: 34ch;
  margin-top: 15px;
  color: #d8d8db;
  font: 590 clamp(14px, 1.35vw, 17px)/1.42 "Space Grotesk", sans-serif;
  letter-spacing: -.018em;
  text-wrap: pretty;
}

.viewer-signal-existing {
  --signal-scroll-progress: 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr);
  gap: clamp(50px, 8vw, 112px);
  align-items: center;
  min-height: 850px;
  color: #111113;
  background:
    radial-gradient(circle at 83% 19%, rgba(229, 9, 23, .09), transparent 27%),
    #f0f0ed;
}

.viewer-signal-existing-copy { position: relative; z-index: 2; }
.viewer-signal-existing-copy > p { color: #d5010d; font: 850 9px/1 Inter, sans-serif; letter-spacing: .17em; }
.viewer-signal-existing-copy h2 { max-width: 12ch; margin: 24px 0 0; font: 580 clamp(46px, 5.5vw, 76px)/.95 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.viewer-signal-existing-copy h2 em { color: #d5010d; font-style: normal; }
.viewer-signal-existing-copy > span { display: block; max-width: 58ch; margin-top: 28px; color: #626267; font-size: 15px; line-height: 1.72; }
.viewer-signal-existing-copy ul { display: grid; margin: 35px 0 0; padding: 0; border-top: 1px solid #cececc; list-style: none; }
.viewer-signal-existing-copy li { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 15px; padding: 20px 0; border-bottom: 1px solid #cececc; }
.viewer-signal-existing-copy li > i { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(213, 1, 13, .2); border-radius: 50%; color: #d5010d; font: 800 8px/1 Inter, sans-serif; font-style: normal; }
.viewer-signal-existing-copy li > div { display: grid; gap: 6px; }
.viewer-signal-existing-copy li strong { color: #18181a; font: 650 14px/1.3 "Space Grotesk", sans-serif; }
.viewer-signal-existing-copy li small { max-width: 49ch; color: #737378; font: 500 11px/1.55 Inter, sans-serif; }
.viewer-signal-existing-assurance { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin-top: 25px; padding: 18px; border: 1px solid rgba(213, 1, 13, .18); border-radius: 13px; background: rgba(213, 1, 13, .045); }
.viewer-signal-existing-assurance > i { position: relative; width: 30px; height: 30px; border: 1px solid rgba(213, 1, 13, .28); border-radius: 50%; }
.viewer-signal-existing-assurance > i::before { content: ""; position: absolute; inset: 8px; border-right: 2px solid #d5010d; border-bottom: 2px solid #d5010d; transform: rotate(45deg) translate(-1px, -2px); }
.viewer-signal-existing-assurance > div { display: grid; gap: 6px; }
.viewer-signal-existing-assurance strong { color: #231416; font: 700 12px/1.35 "Space Grotesk", sans-serif; }
.viewer-signal-existing-assurance span { color: #765e61; font-size: 10px; line-height: 1.55; }

.viewer-signal-existing-console {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3.5vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(145deg, #1b1719, #0d0d0f 66%);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 42px 105px rgba(45, 20, 23, .22), 0 0 0 1px rgba(213, 1, 13, calc(var(--signal-scroll-progress) * .12));
  transform: translate3d(0, calc((1 - var(--signal-scroll-progress)) * 18px), 0);
}
.viewer-signal-existing-console::before { content: ""; position: absolute; top: -140px; right: -100px; width: 330px; height: 330px; border-radius: 50%; background: rgba(229, 9, 23, .18); filter: blur(78px); }
.viewer-signal-existing-console > header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 23px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-existing-console > header > div { display: grid; gap: 7px; }
.viewer-signal-existing-console header small,
.viewer-signal-existing-platforms > small,
.viewer-signal-existing-stack small { color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-existing-console header strong { color: #f4f4f4; font: 650 18px/1.25 "Space Grotesk", sans-serif; }
.viewer-signal-existing-console header > span { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: #cdcdcf; font: 800 8px/1 Inter, sans-serif; letter-spacing: .11em; }
.viewer-signal-existing-console header > span i { width: 6px; height: 6px; border-radius: 50%; background: #4ce598; box-shadow: 0 0 12px rgba(76, 229, 152, .65); }
.viewer-signal-existing-platforms { position: relative; z-index: 1; margin-top: 24px; }
.viewer-signal-existing-platforms > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.viewer-signal-existing-platforms span { padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 999px; color: #c4c4c8; background: rgba(255, 255, 255, .035); font: 650 9px/1 Inter, sans-serif; }
.viewer-signal-existing-platforms p { margin: 12px 0 0; color: #6f6f75; font-size: 9px; }
.viewer-signal-existing-stack { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 24px; }
.viewer-signal-existing-stack article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 86px; padding: 15px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.viewer-signal-existing-stack article > i { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255, 70, 82, .25); border-radius: 50%; color: #ff4652; font: 800 8px/1 Inter, sans-serif; font-style: normal; }
.viewer-signal-existing-stack article > div { display: grid; gap: 5px; }
.viewer-signal-existing-stack strong { color: #ececee; font: 650 12px/1.25 "Space Grotesk", sans-serif; }
.viewer-signal-existing-stack article span { color: #77777d; font-size: 9.5px; line-height: 1.4; }
.viewer-signal-existing-stack article > b { color: #77777d; font: 800 7px/1 Inter, sans-serif; letter-spacing: .1em; }
.viewer-signal-existing-stack article:first-child { border-color: rgba(255, 69, 81, .2); background: rgba(229, 9, 23, .055); }
.viewer-signal-existing-stack article:first-child > b { color: #ff4652; }
.viewer-signal-existing-console > footer { position: relative; z-index: 1; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 14px; margin-top: 22px; padding-top: 21px; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-existing-console > footer span { color: #ff4652; font: 800 7px/1.4 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-existing-console > footer strong { color: #cfcfd2; font: 600 10px/1.4 Inter, sans-serif; }

.viewer-signal-momentum {
  --signal-scroll-progress: 0;
  background:
    radial-gradient(circle at 32% 58%, rgba(229, 9, 23, .11), transparent 28%),
    linear-gradient(145deg, #0b0b0d, #100d0f 72%);
}

.viewer-signal-momentum::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
  pointer-events: none;
}

.viewer-signal-momentum-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: center;
  margin-top: clamp(64px, 9vw, 118px);
}

.viewer-signal-momentum-visual {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1;
  transform: scale(calc(.91 + var(--signal-scroll-progress) * .09));
}

.viewer-signal-momentum-visual::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255, 58, 71, .12);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(229, 9, 23, .08), inset 0 0 70px rgba(229, 9, 23, .035);
  animation: signal-momentum-field 8s ease-in-out infinite alternate;
}

.viewer-signal-momentum-path {
  position: absolute;
  z-index: 1;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(255, 62, 74, .2) 18%, rgba(255, 62, 74, .8) 52%, rgba(255, 62, 74, .18) 86%, transparent);
  box-shadow: 0 0 14px rgba(229, 9, 23, .32);
  transform-origin: left center;
}

.viewer-signal-momentum-path::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3341;
  box-shadow: 0 0 18px rgba(255, 45, 58, .9);
  animation: signal-momentum-packet 2.8s cubic-bezier(.45, 0, .2, 1) infinite;
}

.viewer-signal-momentum-path--in { top: 29%; left: 24%; width: 33%; transform: rotate(29deg); }
.viewer-signal-momentum-path--out { top: 58%; left: 57%; width: 30%; transform: rotate(129deg); }
.viewer-signal-momentum-path--out::after { animation-delay: -1.35s; }

.viewer-signal-momentum-signal {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(132px, 33%, 180px);
  aspect-ratio: 1;
  pointer-events: auto;
  cursor: pointer;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate3d(-50%, -50%, 0) scale(calc(.92 + var(--signal-scroll-progress) * .08));
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.viewer-signal-momentum-signal::before { border-color: rgba(255, 67, 78, .58); background: transparent !important; }
.viewer-signal-momentum-signal::after { display: none !important; }
.viewer-signal-momentum-signal .signal-orb-ring {
  transition: border-color 360ms ease, box-shadow 520ms ease;
}
.viewer-signal-momentum-signal .signal-orb-ring--outer {
  inset: 8%;
  box-shadow: 0 0 17px rgba(255, 55, 68, .4), inset 0 0 9px rgba(255, 55, 68, .14);
}
.viewer-signal-momentum-signal .signal-orb-ring--inner {
  inset: 25%;
  box-shadow: 0 0 12px rgba(255, 55, 68, .32), inset 0 0 7px rgba(255, 55, 68, .11);
}
.viewer-signal-momentum-signal .signal-orb-core { width: 20%; }
.viewer-signal-momentum-signal .signal-orb-node { width: 7%; }
.viewer-signal-momentum-signal.is-momentum-engaged {
  box-shadow: none !important;
  transform: translate3d(-50%, -50%, 0) scale(calc(1.04 + var(--signal-scroll-progress) * .08));
}
.viewer-signal-momentum-signal.is-momentum-engaged::before { animation: signal-orb-shell-active 1.65s cubic-bezier(.45, 0, .2, 1) infinite; }
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-ring--outer {
  box-shadow: 0 0 26px rgba(255, 55, 68, .64), inset 0 0 13px rgba(255, 55, 68, .2);
  animation: signal-orb-ring-active 1.15s cubic-bezier(.45, 0, .2, 1) infinite;
}
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-ring--inner {
  box-shadow: 0 0 19px rgba(255, 55, 68, .52), inset 0 0 10px rgba(255, 55, 68, .16);
  animation: signal-orb-ring-active 1.15s cubic-bezier(.45, 0, .2, 1) -.38s infinite reverse;
}
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-core { animation: signal-orb-core-active .78s ease-in-out infinite; }
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-node--one { animation: signal-orb-node-active-one 1.35s ease-in-out infinite; }
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-node--two { animation: signal-orb-node-active-two 1.72s cubic-bezier(.45, 0, .2, 1) -.63s infinite; }
.viewer-signal-momentum-signal.is-momentum-engaged .signal-orb-node--three { animation: signal-orb-node-active-three 1.48s cubic-bezier(.37, 0, .3, 1) -.91s infinite; }

.viewer-signal-momentum-point {
  --momentum-rotate-x: 0deg;
  --momentum-rotate-y: 0deg;
  --momentum-glow-x: 50%;
  --momentum-glow-y: 28%;
  --momentum-card-scale: 1;
  --momentum-entry-x: 0px;
  --momentum-entry-y: 0px;
  position: absolute;
  z-index: 3;
  isolation: isolate;
  display: grid;
  gap: 8px;
  width: clamp(210px, 43%, 260px);
  min-height: 130px;
  padding: 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(31, 28, 31, .94), rgba(14, 14, 17, .9));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .055);
  transform: none;
  transform-style: flat;
  transition: transform 680ms cubic-bezier(.16, 1, .3, 1), border-color 420ms ease, box-shadow 520ms ease;
  touch-action: pan-y;
}

.viewer-signal-momentum-point::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at var(--momentum-glow-x) var(--momentum-glow-y), rgba(255, 55, 68, .22), transparent 55%);
  opacity: .55;
  transition: opacity 440ms ease;
}
.viewer-signal-momentum-point::after { content: ""; position: absolute; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 72, 84, .64), transparent); opacity: .55; }
.viewer-signal-momentum-point.is-tilting {
  --momentum-card-scale: 1.055;
  border-color: rgba(255, 75, 87, .42);
  box-shadow: 0 32px 82px rgba(0, 0, 0, .42), 0 0 36px rgba(213, 1, 13, .1), inset 0 1px rgba(255, 255, 255, .08);
  transform: perspective(900px) rotateX(var(--momentum-rotate-x)) rotateY(var(--momentum-rotate-y)) scale(var(--momentum-card-scale));
  transform-style: preserve-3d;
}
.viewer-signal-momentum-point.is-tilting::before { opacity: 1; }
.viewer-signal-momentum-point b { position: relative; transform: translateZ(28px); color: #ff4652; font: 850 9.5px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-momentum-point strong { position: relative; transform: translateZ(34px); color: #f4f4f5; font: 650 18px/1.16 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.viewer-signal-momentum-point small { position: relative; transform: translateZ(28px); color: #99999f; font: 500 12.5px/1.45 Inter, sans-serif; }
.viewer-signal-momentum-point--ask { top: 1%; left: 0; }
.viewer-signal-momentum-point--answer { top: 38%; right: -2%; }
.viewer-signal-momentum-point--act { bottom: 1%; left: 7%; }

.viewer-signal-momentum-caption {
  position: absolute;
  z-index: 4;
  top: calc(50% + 102px);
  left: 50%;
  color: #ff4652;
  font: 850 9px/1 Inter, sans-serif;
  letter-spacing: .2em;
  transform: translateX(-50%);
}

@keyframes signal-momentum-field {
  0% { transform: scale(.93) rotate(-3deg); opacity: .55; }
  100% { transform: scale(1.08) rotate(4deg); opacity: 1; }
}

@keyframes signal-momentum-packet {
  0%, 12% { left: 0; opacity: 0; transform: scale(.55); }
  22% { opacity: 1; }
  78% { opacity: 1; }
  92%, 100% { left: calc(100% - 7px); opacity: 0; transform: scale(1.15); }
}

.viewer-signal-benefit-list { border-top: 1px solid rgba(255, 255, 255, .13); }
.viewer-signal-benefit-list article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.viewer-signal-benefit-list article > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 70, 82, .3); border-radius: 50%; color: #ff4652; font: 800 8px/1 Inter, sans-serif; }
.viewer-signal-benefit-list h3 { margin: 0; color: #f2f2f2; font: 600 clamp(23px, 2.4vw, 34px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.viewer-signal-benefit-list p { max-width: 56ch; margin: 12px 0 0; color: #929298; font-size: 14px; line-height: 1.65; }

.viewer-signal-value-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(70px, 9vw, 120px); border-top: 1px solid rgba(255, 255, 255, .13); border-bottom: 1px solid rgba(255, 255, 255, .13); }
.viewer-signal-value-strip > span { display: grid; gap: 8px; min-height: 118px; padding: 28px 20px; border-right: 1px solid rgba(255, 255, 255, .13); }
.viewer-signal-value-strip > span:last-child { border-right: 0; }
.viewer-signal-value-strip strong { color: #f2f2f3; font: 650 15px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-value-strip small { max-width: 22ch; color: #77777d; font: 500 11px/1.5 Inter, sans-serif; }

.viewer-signal-context {
  --signal-scroll-progress: 0;
  color: #111113;
  background:
    radial-gradient(circle at 82% 20%, rgba(229, 9, 23, .08), transparent 25%),
    #f0f0ed;
}

.viewer-signal-context-console {
  display: grid;
  grid-template-columns: minmax(190px, .32fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  margin-top: clamp(60px, 8vw, 102px);
}

.viewer-signal-context-steps { display: grid; align-content: start; gap: 10px; }
.viewer-page .viewer-signal-context-steps button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 66px; padding: 14px; border: 1px solid #d2d2d0; border-radius: 10px; color: #8a8a8d; background: rgba(255, 255, 255, .32); text-align: left; cursor: pointer; transition: color 260ms ease, border-color 260ms ease, background 260ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease; }
.viewer-signal-context-steps button > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d0d0ce; border-radius: 50%; font: 800 8px/1 Inter, sans-serif; }
.viewer-signal-context-steps button strong { font: 650 13px/1.25 "Space Grotesk", sans-serif; }
.viewer-page .viewer-signal-context-steps button.is-active { color: #101012; border-color: rgba(213, 1, 13, .3); background: #fff; box-shadow: 0 18px 45px rgba(29, 14, 15, .08); transform: translate3d(7px, 0, 0); }
.viewer-signal-context-steps button.is-active > span { color: #fff; border-color: #d5010d; background: #d5010d; }

.viewer-signal-context-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: clamp(28px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid #d0d0ce;
  border-radius: 24px;
  background:
    linear-gradient(rgba(18, 18, 20, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 20, .035) 1px, transparent 1px),
    rgba(255, 255, 255, .66);
  background-size: 46px 46px, 46px 46px, auto;
  box-shadow: 0 35px 100px rgba(37, 16, 18, .1), inset 0 1px #fff;
}

.viewer-signal-context-stage::before { content: ""; position: absolute; top: -160px; right: -110px; width: 400px; height: 400px; border-radius: 50%; background: rgba(229, 9, 23, .12); filter: blur(88px); }
.viewer-signal-context-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 28px; }
.viewer-signal-context-status i { width: 7px; height: 7px; border-radius: 50%; background: #d5010d; box-shadow: 0 0 0 6px rgba(213, 1, 13, .09); }
.viewer-signal-context-status span { color: #d5010d; font: 800 8px/1 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-context-status b { margin-left: auto; color: #858589; font: 700 9px/1 Inter, sans-serif; }
.viewer-signal-context-memory { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; min-height: 31px; margin-top: 23px; }
.viewer-signal-context-memory span { padding: 8px 11px; border: 1px solid rgba(213, 1, 13, .16); border-radius: 999px; color: #6d3338; background: rgba(213, 1, 13, .055); font: 700 9px/1 Inter, sans-serif; }
.viewer-signal-context-message { position: relative; z-index: 1; margin-top: 30px; }
.viewer-signal-context-message small { display: block; margin-bottom: 9px; color: #8a8a8d; font: 800 8px/1 Inter, sans-serif; letter-spacing: .15em; }
.viewer-signal-context-message p { margin: 0; font-family: Inter, sans-serif; letter-spacing: -.02em; }
.viewer-signal-context-message--visitor { width: min(78%, 530px); margin-left: auto; padding: 18px 20px; border: 1px solid #d0d0ce; border-radius: 16px 16px 3px 16px; background: rgba(255, 255, 255, .74); }
.viewer-signal-context-message--visitor p { color: #171719; font-size: clamp(17px, 1.7vw, 23px); font-weight: 650; line-height: 1.4; }
.viewer-signal-context-message--signal { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; width: min(88%, 650px); }
.viewer-signal-context-message--signal p { color: #4f4f53; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.65; }
.viewer-signal-context-message--signal small { color: #d5010d; }
.viewer-signal-mini-core { position: relative; display: block; width: 44px; height: 44px; border: 1px solid rgba(213, 1, 13, .38); border-radius: 50%; background: radial-gradient(circle, #e50917 0 5px, rgba(229, 9, 23, .13) 6px 36%, transparent 37%); }
.viewer-signal-mini-core::before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(213, 1, 13, .13); border-radius: 50%; }
.viewer-signal-mini-core i { position: absolute; top: 4px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: #e50917; box-shadow: 0 0 12px rgba(229, 9, 23, .6); }
.viewer-signal-context-stage footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 8px 20px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 17px 16px 17px 19px;
  border: 1px solid rgba(213, 1, 13, .17);
  border-radius: 14px;
  background: linear-gradient(112deg, rgba(213, 1, 13, .065), rgba(255, 255, 255, .72) 54%, rgba(255, 255, 255, .9));
  box-shadow: 0 18px 42px rgba(37, 16, 18, .08), inset 0 1px rgba(255, 255, 255, .9);
}
.viewer-signal-context-stage footer::after {
  content: "↗";
  display: grid;
  grid-column: 3;
  grid-row: 1;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #d5010d;
  box-shadow: 0 8px 22px rgba(213, 1, 13, .2);
  font: 600 17px/1 Inter, sans-serif;
}
.viewer-signal-context-stage footer span { color: #8a5559; font: 800 8px/1.3 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-context-stage footer strong { color: #171719; font: 700 13px/1.35 "Space Grotesk", sans-serif; text-align: right; }

.viewer-signal-handover {
  --signal-scroll-progress: 0;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(380px, 1fr);
  gap: clamp(48px, 8vw, 118px);
  align-items: center;
  min-height: 820px;
  background:
    radial-gradient(circle at 75% 38%, rgba(229, 9, 23, calc(.08 + var(--signal-scroll-progress) * .12)), transparent 30%),
    #0b0b0d;
}

.viewer-signal-handover-copy { position: relative; z-index: 2; }
.viewer-signal-handover-copy h2 { margin-top: 24px; }
.viewer-signal-handover-copy > span { display: block; max-width: 580px; margin-top: 28px; color: #a1a1a7; font-size: 15px; line-height: 1.7; }
.viewer-signal-handover-copy ul { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-handover-copy li { display: grid; grid-template-columns: minmax(120px, .43fr) minmax(0, 1fr); gap: 20px; padding: 21px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-handover-copy li strong { color: #efeff0; font: 650 13px/1.4 "Space Grotesk", sans-serif; }
.viewer-signal-handover-copy li span { color: #818187; font-size: 12px; line-height: 1.55; }

.viewer-signal-enquiry-card {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3.5vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(145deg, rgba(32, 25, 27, .96), rgba(15, 15, 18, .98));
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 45px 130px rgba(0, 0, 0, .42), 0 0 0 1px rgba(229, 9, 23, calc(var(--signal-scroll-progress) * .15));
  transform: perspective(1100px) rotateY(calc((1 - var(--signal-scroll-progress)) * -3deg)) translate3d(0, calc((1 - var(--signal-scroll-progress)) * 22px), 0);
}

.viewer-signal-enquiry-card::before { content: ""; position: absolute; top: -130px; right: -100px; width: 310px; height: 310px; border-radius: 50%; background: rgba(229, 9, 23, .15); filter: blur(70px); }
.viewer-signal-enquiry-label { margin-bottom: 18px; }
.viewer-signal-enquiry-card > header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-enquiry-card header > div { display: grid; gap: 8px; }
.viewer-signal-enquiry-card header small { color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .15em; }
.viewer-signal-enquiry-card header strong { color: #f4f4f4; font: 650 19px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-enquiry-card header > span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: #cfcfd2; font: 800 8px/1 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-enquiry-card header > span i { width: 6px; height: 6px; border-radius: 50%; background: #4ce598; box-shadow: 0 0 12px rgba(76, 229, 152, .7); }
.viewer-signal-enquiry-card header > span.is-not-sent { color: #d7c9ca; border-color: rgba(255, 86, 97, .22); background: rgba(229, 9, 23, .07); }
.viewer-signal-enquiry-card header > span.is-not-sent i { background: #ff4a56; box-shadow: 0 0 12px rgba(255, 74, 86, .66); }
.viewer-signal-enquiry-person { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.viewer-signal-enquiry-person > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #d5010d; font: 700 13px/1 Inter, sans-serif; box-shadow: 0 0 24px rgba(213, 1, 13, .24); }
.viewer-signal-enquiry-person div { display: grid; gap: 5px; }
.viewer-signal-enquiry-person strong { color: #e7e7e8; font: 650 13px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-enquiry-person small { color: #727278; font: 500 10px/1.3 Inter, sans-serif; }
.viewer-signal-enquiry-card dl { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }
.viewer-signal-enquiry-card dl > div { min-height: 92px; padding: 16px; border-right: 1px solid rgba(255, 255, 255, .1); }
.viewer-signal-enquiry-card dl > div:last-child { border-right: 0; }
.viewer-signal-enquiry-card dt { color: #737379; font: 700 8px/1.3 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.viewer-signal-enquiry-card dd { margin: 9px 0 0; color: #dedee0; font: 600 11px/1.45 Inter, sans-serif; }
.viewer-signal-enquiry-toggle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px; border: 1px solid rgba(255, 72, 84, .22); border-radius: 12px; background: rgba(229, 9, 23, .07); }
.viewer-signal-enquiry-toggle > span { display: grid; gap: 6px; }
.viewer-signal-enquiry-toggle small { color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-enquiry-toggle strong { color: #f0f0f1; font: 650 12px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-enquiry-toggle > i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #d5010d; box-shadow: 0 0 20px rgba(213, 1, 13, .28); }
.viewer-signal-enquiry-toggle > i b { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.viewer-signal-enquiry-toggle.is-off { border-color: rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .025); }
.viewer-signal-enquiry-toggle.is-off small { color: #939399; }
.viewer-signal-enquiry-toggle.is-off > i { background: #37373d; box-shadow: none; }
.viewer-signal-enquiry-toggle.is-off > i b { right: 22px; background: #a6a6ab; }
.viewer-signal-enquiry-draft { position: relative; z-index: 1; margin-top: 18px; padding: 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.viewer-signal-enquiry-draft small { color: #ff4652; font: 800 8px/1 Inter, sans-serif; letter-spacing: .13em; }
.viewer-signal-enquiry-draft p { margin: 12px 0 0; color: #d6d6d8; font: 500 11px/1.68 Inter, sans-serif; }
.viewer-signal-enquiry-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.viewer-signal-enquiry-steps li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; align-items: start; min-height: 70px; padding: 12px 10px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(255, 255, 255, .018); }
.viewer-signal-enquiry-steps li > i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; color: #8b8b91; font: 800 8px/1 Inter, sans-serif; font-style: normal; }
.viewer-signal-enquiry-steps li > span { display: grid; gap: 5px; }
.viewer-signal-enquiry-steps strong { color: #d7d7d9; font: 650 10px/1.3 "Space Grotesk", sans-serif; }
.viewer-signal-enquiry-steps small { color: #74747a; font: 500 8.5px/1.4 Inter, sans-serif; }
.viewer-signal-enquiry-steps li.is-current { border-color: rgba(255, 69, 81, .24); background: rgba(229, 9, 23, .065); }
.viewer-signal-enquiry-steps li.is-current > i { color: #fff; border-color: #d5010d; background: #d5010d; box-shadow: 0 0 18px rgba(213, 1, 13, .25); }
.viewer-signal-enquiry-thread { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 18px; }
.viewer-signal-enquiry-thread > span { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-left: 2px solid rgba(255, 255, 255, .12); color: #aaaab0; background: rgba(255, 255, 255, .025); font: 500 10px/1.55 Inter, sans-serif; }
.viewer-signal-enquiry-thread small { color: #ff4652; font: 800 7px/1.4 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-enquiry-card > footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-enquiry-card > footer > span { color: #77777d; font: 600 10px/1.4 Inter, sans-serif; }
.viewer-signal-enquiry-card > footer strong { display: flex; align-items: center; gap: 9px; color: #fff; font: 700 11px/1.4 Inter, sans-serif; }
.viewer-signal-enquiry-card > footer .ui-icon { --ui-icon-size: 16px; color: #ff4652; }

.viewer-signal-knowledge {
  --signal-scroll-progress: 0;
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
  min-height: 760px;
  background: linear-gradient(145deg, #120b0d, #09090b 58%);
}

.viewer-signal-knowledge-map {
  position: relative;
  min-height: 490px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 9, 23, .21), rgba(229, 9, 23, .04) 31%, transparent 62%);
  transform: rotate(calc((var(--signal-scroll-progress) - .5) * 8deg)) scale(calc(.91 + var(--signal-scroll-progress) * .09));
}

.viewer-signal-knowledge-map::before,
.viewer-signal-knowledge-map::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 70, 82, .2);
  border-radius: 50%;
}

.viewer-signal-knowledge-map::after { inset: 31%; background: #e50917; border: 0; box-shadow: 0 0 80px rgba(229, 9, 23, .42); }
.viewer-signal-knowledge-map i { position: absolute; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: #ff3b48; box-shadow: 0 0 18px rgba(255, 59, 72, .8); }
.viewer-signal-knowledge-map i:nth-of-type(1) { top: 10%; left: 47%; }
.viewer-signal-knowledge-map i:nth-of-type(2) { top: 27%; right: 10%; }
.viewer-signal-knowledge-map i:nth-of-type(3) { right: 18%; bottom: 15%; }
.viewer-signal-knowledge-map i:nth-of-type(4) { bottom: 7%; left: 39%; }
.viewer-signal-knowledge-map i:nth-of-type(5) { top: 53%; left: 7%; }
.viewer-signal-knowledge-map i:nth-of-type(6) { top: 22%; left: 18%; }
.viewer-signal-knowledge-map > span { position: absolute; z-index: 1; top: 50%; left: 50%; width: 42%; height: 1px; background: linear-gradient(90deg, rgba(255, 66, 78, .6), transparent); transform-origin: left; }
.viewer-signal-knowledge-map > span:nth-of-type(1) { transform: rotate(calc(-68deg + var(--signal-scroll-progress) * 8deg)); }
.viewer-signal-knowledge-map > span:nth-of-type(2) { transform: rotate(calc(4deg + var(--signal-scroll-progress) * 11deg)); }
.viewer-signal-knowledge-map > span:nth-of-type(3) { transform: rotate(calc(116deg - var(--signal-scroll-progress) * 9deg)); }

.viewer-signal-knowledge-copy { position: relative; z-index: 2; }
.viewer-signal-knowledge-copy h2 { margin-top: 24px; }
.viewer-signal-knowledge-copy > span { display: block; max-width: 570px; margin-top: 28px; color: #a4a4a9; font-size: 15px; line-height: 1.68; }
.viewer-signal-knowledge-copy ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-knowledge-copy li { position: relative; min-height: 80px; padding: 22px 12px 20px 22px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #ddd; font: 600 13px/1.4 "Space Grotesk", sans-serif; }
.viewer-signal-knowledge-copy li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-knowledge-copy li::before { content: ""; position: absolute; top: 28px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #ff3441; box-shadow: 0 0 12px rgba(255, 52, 65, .7); }

.viewer-signal-safety {
  --signal-scroll-progress: 0;
  background:
    radial-gradient(circle at 19% 62%, rgba(229, 9, 23, .14), transparent 27%),
    linear-gradient(145deg, #0b0b0d, #110c0e 76%);
}

.viewer-signal-safety::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  pointer-events: none;
}

.viewer-signal-safety-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 8vw, 118px);
  align-items: center;
  margin-top: clamp(64px, 9vw, 110px);
}

.viewer-signal-safety-console {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .045);
}

.viewer-signal-safety-console-head {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 62px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(6, 6, 8, .38);
}

.viewer-signal-safety-console-head small { color: #6f6f75; font: 800 9px/1.3 Inter, sans-serif; letter-spacing: .14em; }

.viewer-signal-safety-field { position: relative; min-height: 392px; }

.viewer-signal-safety-field::before,
.viewer-signal-safety-field::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 57, 70, .17);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(.82 + var(--signal-scroll-progress) * .18));
}

.viewer-signal-safety-field::after {
  width: 48%;
  border-style: dashed;
  border-color: rgba(255, 57, 70, .32);
  transform: translate(-50%, -50%) rotate(calc(-18deg + var(--signal-scroll-progress) * 52deg));
}

.viewer-signal-safety-orb {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: clamp(128px, 33%, 174px);
  aspect-ratio: 1;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
}

.viewer-signal-safety-orb::after { display: none !important; }
.viewer-signal-safety-orb .signal-orb-ring--outer { box-shadow: 0 0 26px rgba(255, 55, 68, .56), inset 0 0 12px rgba(255, 55, 68, .18); }
.viewer-signal-safety-orb .signal-orb-ring--inner { box-shadow: 0 0 18px rgba(255, 55, 68, .42), inset 0 0 9px rgba(255, 55, 68, .14); }

.viewer-signal-safety-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ff5a65;
  font: 850 8px/1 Inter, sans-serif;
  letter-spacing: .17em;
}

.viewer-signal-safety-status i { width: 7px; height: 7px; border-radius: 50%; background: #ff3441; box-shadow: 0 0 0 7px rgba(255, 52, 65, .08), 0 0 16px rgba(255, 52, 65, .75); }

.viewer-signal-safety-core-label {
  position: absolute;
  z-index: 4;
  top: calc(50% + 78px);
  left: 50%;
  display: grid;
  gap: 5px;
  width: 190px;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
}
.viewer-signal-safety-core-label b { color: #fff; font: 800 11px/1 Inter, sans-serif; letter-spacing: .16em; }
.viewer-signal-safety-core-label small { color: #77777d; font: 750 8px/1.35 Inter, sans-serif; letter-spacing: .11em; }

.viewer-signal-safety-control {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 174px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #c8c8cc;
  background: rgba(9, 9, 11, .82);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px);
}
.viewer-signal-safety-control::after { content: ""; position: absolute; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(255, 64, 76, .65), transparent); }
.viewer-signal-safety-control > b { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255, 71, 83, .28); border-radius: 50%; color: #ff5964; font: 800 8px/1 Inter, sans-serif; }
.viewer-signal-safety-control > span { display: grid; gap: 4px; }
.viewer-signal-safety-control strong { color: #eeeeef; font: 650 11px/1.2 "Space Grotesk", sans-serif; }
.viewer-signal-safety-control small { color: #7f7f85; font: 550 9px/1.25 Inter, sans-serif; }
.viewer-signal-safety-control--knowledge { top: 52px; left: 24px; }
.viewer-signal-safety-control--knowledge::after { right: -28px; transform: rotate(24deg); }
.viewer-signal-safety-control--limits { top: 52px; right: 24px; }
.viewer-signal-safety-control--limits::after { left: -28px; transform: rotate(156deg); }
.viewer-signal-safety-control--fallback { bottom: 34px; left: 24px; }
.viewer-signal-safety-control--fallback::after { right: -28px; transform: rotate(-24deg); }
.viewer-signal-safety-control--consent { right: 24px; bottom: 34px; }
.viewer-signal-safety-control--consent::after { left: -28px; transform: rotate(204deg); }

.viewer-signal-safety-path { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 78px; padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(6, 6, 8, .46); }
.viewer-signal-safety-path span { display: grid; gap: 5px; color: #a4a4aa; font: 600 10px/1.3 Inter, sans-serif; }
.viewer-signal-safety-path b { color: #ff5360; font: 800 8px/1 Inter, sans-serif; letter-spacing: .12em; }
.viewer-signal-safety-path > i { height: 1px; background: linear-gradient(90deg, rgba(255, 68, 80, .24), rgba(255, 68, 80, .8)); }
.viewer-signal-safety-path > i::after { content: ""; display: block; width: 5px; height: 5px; margin: -2px 0 0 auto; border-radius: 50%; background: #ff4652; box-shadow: 0 0 9px rgba(255, 70, 82, .7); }

.viewer-signal-safety-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.viewer-signal-safety-rules article {
  position: relative;
  min-height: 230px;
  padding: 25px 23px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .043), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  transition: transform 560ms cubic-bezier(.16, 1, .3, 1), border-color 420ms ease, background 420ms ease;
}

.viewer-signal-safety-rules article::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 20% 10%, rgba(229, 9, 23, .18), transparent 54%); transition: opacity 420ms ease; }
.viewer-signal-safety-rules b { position: relative; z-index: 1; color: #ff4652; font: 850 9px/1 Inter, sans-serif; letter-spacing: .14em; }
.viewer-signal-safety-rules h3 { position: relative; z-index: 1; max-width: 15ch; margin: 48px 0 0; color: #f4f4f5; font: 600 clamp(21px, 2vw, 29px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.viewer-signal-safety-rules p { position: relative; z-index: 1; max-width: 38ch; margin: 15px 0 0; color: #8f8f95; font-size: 12px; line-height: 1.62; }

/* Signal — subscription continuity */
.viewer-signal-continuity { container-type: inline-size; min-height: var(--viewer-viewport-height, calc(100dvh - 32px)); padding: clamp(76px, 9vw, 132px) clamp(38px, 7vw, 104px); color: #f4f4f2; background: radial-gradient(circle at 86% 10%, rgba(213, 1, 13, .18), transparent 28%), #0b0b0d; }
.viewer-signal-continuity-stage { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 18px; align-items: stretch; margin-top: clamp(54px, 7vw, 88px); }
.viewer-signal-continuity-stage article { position: relative; min-height: 330px; padding: clamp(28px, 3vw, 42px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .035); }
.viewer-signal-continuity-stage article.is-signal-mode { background: linear-gradient(145deg, rgba(213, 1, 13, .18), transparent 54%), rgba(255, 255, 255, .035); }
.viewer-signal-continuity-stage article::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 2px; background: #e50917; }
.viewer-signal-continuity-stage small { color: #ff4a55; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.viewer-signal-continuity-stage h3 { max-width: 14ch; margin: 54px 0 0; font: 570 clamp(28px, 3vw, 43px)/1.04 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.viewer-signal-continuity-stage article > p { max-width: 52ch; margin: 20px 0 0; color: #a1a1a6; font-size: clamp(13px, 1vw, 14.5px); line-height: 1.66; }
.viewer-signal-continuity-stage article > span { position: absolute; left: clamp(28px, 3vw, 42px); bottom: clamp(28px, 3vw, 42px); display: flex; align-items: center; gap: 9px; color: #a9a9ae; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.viewer-signal-continuity-stage article > span i { width: 8px; height: 8px; border-radius: 50%; background: #4be39a; box-shadow: 0 0 0 5px rgba(75, 227, 154, .09); }
.viewer-signal-continuity-switch { display: grid; place-items: center; align-content: center; gap: 18px; color: #77777d; text-align: center; }
.viewer-signal-continuity-switch span { font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.viewer-signal-continuity-switch i { position: relative; width: 64px; height: 34px; border: 1px solid rgba(255, 70, 81, .42); border-radius: 999px; background: rgba(213, 1, 13, .08); }
.viewer-signal-continuity-switch i::before { content: ""; position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: #e50917; box-shadow: 0 0 18px rgba(229, 9, 23, .35); }
.viewer-signal-continuity > footer { display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); gap: clamp(38px, 7vw, 104px); margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); }
.viewer-signal-continuity > footer strong { color: #ff4a55; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.viewer-signal-continuity > footer p { max-width: 760px; margin: 0; color: #b2b2b7; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.68; }
@container (max-width: 860px) { .viewer-signal-continuity-stage { grid-template-columns: 1fr; } .viewer-signal-continuity-switch { min-height: 78px; } .viewer-signal-continuity-switch i { transform: rotate(90deg); } }
@container (max-width: 620px) { .viewer-signal-continuity { min-height: 0; padding: 64px 22px 72px; } .viewer-signal-continuity > footer { grid-template-columns: 1fr; gap: 20px; } .viewer-signal-continuity-stage article { min-height: 310px; padding: 28px 24px; } .viewer-signal-continuity-stage article > span { left: 24px; bottom: 28px; } }

.viewer-signal-faq {
  color: #111113;
  background:
    radial-gradient(circle at 84% 12%, rgba(229, 9, 23, .075), transparent 26%),
    var(--signal-paper);
}

.viewer-signal-faq-list { display: grid; margin-top: clamp(48px, 7vw, 84px); border-top: 1px solid #d2d2d0; }
.viewer-signal-faq details { border-bottom: 1px solid #d2d2d0; }
.viewer-signal-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 24px; align-items: center; min-height: 86px; padding: 22px 0; color: #171719; font: 620 clamp(18px, 2vw, 25px)/1.25 "Space Grotesk", sans-serif; letter-spacing: -.025em; cursor: pointer; list-style: none; }
.viewer-signal-faq summary:focus { outline: none; }
.viewer-signal-faq summary:focus-visible { outline: 2px solid rgba(213, 1, 13, .62); outline-offset: 6px; border-radius: 4px; }
.viewer-signal-faq summary::-webkit-details-marker { display: none; }
.viewer-signal-faq summary i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(213, 1, 13, .2); border-radius: 50%; background: rgba(213, 1, 13, .035); transition: transform 420ms cubic-bezier(.16, 1, .3, 1), background 220ms ease; }
.viewer-signal-faq summary i::before,
.viewer-signal-faq summary i::after { content: ""; position: absolute; width: 14px; height: 1.5px; background: #d5010d; }
.viewer-signal-faq summary i::after { transform: rotate(90deg); transition: transform 300ms ease; }
.viewer-signal-faq details[open]:not([data-disclosure-expanded="false"]) summary i { color: #fff; background: #d5010d; transform: rotate(180deg); }
.viewer-signal-faq details[open]:not([data-disclosure-expanded="false"]) summary i::before,
.viewer-signal-faq details[open]:not([data-disclosure-expanded="false"]) summary i::after { background: #fff; }
.viewer-signal-faq details[open]:not([data-disclosure-expanded="false"]) summary i::after { transform: rotate(0); }
.viewer-signal-faq details > p { max-width: 72ch; margin: 0 66px 0 0; padding: 5px 0 26px; color: #66666b; font-size: 14px; line-height: 1.72; }
.viewer-disclosure { box-sizing: border-box; }
.viewer-disclosure.is-disclosure-moving { overflow: hidden; }
.viewer-care-faq, .viewer-approach-faq-list, .viewer-signal-faq-list { align-content: start; }

@media (hover: hover) and (pointer: fine) {
  .viewer-signal-safety-rules article:hover { border-color: rgba(255, 73, 84, .36); background: linear-gradient(145deg, rgba(229, 9, 23, .09), rgba(255, 255, 255, .025)); transform: translate3d(0, -5px, 0); }
  .viewer-signal-safety-rules article:hover::after { opacity: 1; }
}

.viewer-signal-cta {
  --signal-scroll-progress: 0;
  display: grid;
  place-items: center;
  min-height: 680px;
  text-align: center;
  background: #efefec;
  color: #101012;
}

.viewer-signal-cta > div { position: relative; z-index: 2; display: grid; justify-items: center; max-width: 900px; }
.viewer-signal-cta h2 { margin-top: 22px; max-width: 14ch; font-size: clamp(48px, 7vw, 94px); }
.viewer-signal-cta > div > span { max-width: 560px; margin-top: 26px; color: #6d6d71; font-size: 15px; line-height: 1.65; }
.viewer-page .viewer-signal-cta button { display: flex; align-items: center; gap: 20px; min-height: 58px; margin-top: 34px; padding: 0 18px 0 24px; border: 0; border-radius: 999px; color: #fff; background: #d5010d; box-shadow: 0 15px 38px rgba(213, 1, 13, .2); font: 800 11px/1 Inter, sans-serif; cursor: pointer; transition: transform 480ms cubic-bezier(.16, 1, .3, 1), box-shadow 480ms ease, background 240ms ease; }
.viewer-signal-cta button .ui-icon { --ui-icon-size: 20px; }
.viewer-signal-cta-orbit { position: absolute; left: 50%; top: 50%; width: min(70vw, 700px); aspect-ratio: 1.6; border: 1px solid rgba(213, 1, 13, .22); border-radius: 50%; transform: translate(-50%, -50%) rotate(calc(-12deg + var(--signal-scroll-progress) * 18deg)) scale(calc(.86 + var(--signal-scroll-progress) * .15)); }
.viewer-signal-cta-orbit::before,
.viewer-signal-cta-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(213, 1, 13, .13); border-radius: 50%; }
.viewer-signal-cta-orbit::after { inset: 28%; }
.viewer-signal-cta-orbit i { position: absolute; top: 46%; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: #e50917; box-shadow: 0 0 0 10px rgba(229, 9, 23, .08), 0 0 32px rgba(229, 9, 23, .42); }

@media (hover: hover) and (pointer: fine) {
  .viewer-page .viewer-signal-prompts button:hover { color: #fff; border-color: rgba(255, 255, 255, .27); transform: translate3d(4px, 0, 0); }
  .viewer-page .viewer-signal-prompts button.is-active:hover { transform: translate3d(7px, 0, 0); }
  .viewer-page .viewer-signal-prompts button:hover .viewer-signal-niche-icon { color: #ff4652; transform: scale(1.06) rotate(-3deg); }
  .viewer-page .viewer-signal-context-steps button:hover { color: #111113; border-color: rgba(213, 1, 13, .24); transform: translate3d(4px, 0, 0); }
  .viewer-page .viewer-signal-context-steps button.is-active:hover { transform: translate3d(7px, 0, 0); }
}

@container (max-width: 1100px) {
  .viewer-signal-discovery-note {
    grid-template-columns: minmax(140px, .38fr) minmax(0, 1fr);
    gap: 18px clamp(28px, 4vw, 52px);
  }
  .viewer-signal-discovery-note > p { grid-column: 2; }
}

@container (max-width: 960px) {
  .viewer-signal-section-head { grid-template-columns: 1fr; gap: 18px; }
  .viewer-signal-section-head > span { grid-column: 1; max-width: 620px; }
  .viewer-signal-live-layout,
  .viewer-signal-visual-layout,
  .viewer-signal-existing,
  .viewer-signal-momentum-layout,
  .viewer-signal-handover,
  .viewer-signal-knowledge { grid-template-columns: 1fr; }
  .viewer-signal-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .viewer-page .viewer-signal-prompts button { min-height: 92px; transform: none; }
  .viewer-page .viewer-signal-prompts button.is-active { transform: none; }
  .viewer-signal-stage {
    grid-template-rows: repeat(6, auto);
    gap: 30px;
    width: 100%;
    height: auto;
    min-height: 600px;
    padding: clamp(28px, 4vw, 40px);
  }
  .viewer-signal-response { align-self: start; }
  .viewer-signal-outcome { align-self: end; }
  .viewer-signal-momentum-layout { gap: 62px; margin-top: 68px; }
  .viewer-signal-momentum-visual { width: min(100%, 660px); aspect-ratio: 1.34; margin-inline: auto; }
  .viewer-signal-momentum-point { width: clamp(220px, 40%, 250px); }
  .viewer-signal-momentum-point--ask { top: 1%; left: 0; }
  .viewer-signal-momentum-point--answer { top: 30%; right: 0; }
  .viewer-signal-momentum-point--act { bottom: 0; left: 10%; }
  .viewer-signal-momentum-path--in { top: 28%; left: 26%; width: 30%; transform: rotate(18deg); }
  .viewer-signal-momentum-path--out { top: 55%; left: 57%; width: 28%; transform: rotate(142deg); }
  .viewer-signal-context-console { grid-template-columns: 1fr; gap: 30px; }
  .viewer-signal-context-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .viewer-page .viewer-signal-context-steps button { grid-template-columns: 1fr; min-height: 78px; }
  .viewer-page .viewer-signal-context-steps button.is-active { transform: translate3d(0, -4px, 0); }
  .viewer-signal-handover { min-height: 0; }
  .viewer-signal-enquiry-card { width: min(100%, 680px); margin-inline: auto; }
  .viewer-signal-existing { min-height: 0; }
  .viewer-signal-existing-console { width: min(100%, 720px); margin-inline: auto; }
  .viewer-signal-knowledge { min-height: 0; }
  .viewer-signal-safety-layout { grid-template-columns: 1fr; }
  .viewer-signal-safety-console { width: min(100%, 620px); margin-inline: auto; }
}

@container (max-width: 760px) {
  .viewer-signal-live,
  .viewer-signal-flow,
  .viewer-signal-visual,
  .viewer-signal-contrast,
  .viewer-signal-existing,
  .viewer-signal-momentum,
  .viewer-signal-context,
  .viewer-signal-handover,
  .viewer-signal-knowledge,
  .viewer-signal-safety,
  .viewer-signal-faq,
  .viewer-signal-cta { padding: 58px 24px; }
  .viewer-signal-section-head { grid-template-columns: 1fr; gap: 18px; }
  .viewer-signal-section-head > span { grid-column: 1; }
  .viewer-signal-live-layout,
  .viewer-signal-visual-layout,
  .viewer-signal-existing,
  .viewer-signal-momentum-layout,
  .viewer-signal-handover,
  .viewer-signal-knowledge { grid-template-columns: 1fr; }
  .viewer-signal-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .viewer-page .viewer-signal-prompts button { min-height: 92px; transform: none; }
  .viewer-page .viewer-signal-prompts button.is-active { transform: none; }
  .viewer-signal-stage {
    grid-template-rows: repeat(6, auto);
    gap: 28px;
    height: auto;
    min-height: 560px;
    padding: 32px;
  }
  .viewer-signal-response { align-self: start; }
  .viewer-signal-outcome { align-self: end; }
  .viewer-signal-flow-track { padding-left: 50px; }
  .viewer-signal-flow-line { left: 18px; }
  .viewer-signal-flow-track article { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; }
  .viewer-signal-flow-track article > span { width: 44px; height: 44px; }
  .viewer-signal-contrast-grid { grid-template-columns: 1fr; }
  .viewer-signal-contrast-grid article { min-height: 310px; }
  .viewer-signal-existing-copy h2 { font-size: clamp(48px, 9vw, 70px); }
  .viewer-signal-momentum-visual { width: min(100%, 500px); margin-inline: auto; }
  .viewer-signal-momentum-caption { display: none; }
  .viewer-signal-value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-signal-value-strip > span:nth-child(2) { border-right: 0; }
  .viewer-signal-value-strip > span:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .13); }
  .viewer-signal-context-console { grid-template-columns: 1fr; gap: 30px; }
  .viewer-signal-context-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .viewer-page .viewer-signal-context-steps button { grid-template-columns: 1fr; min-height: 78px; }
  .viewer-page .viewer-signal-context-steps button.is-active { transform: translate3d(0, -4px, 0); }
  .viewer-signal-handover { min-height: 0; }
  .viewer-signal-enquiry-card { width: min(100%, 650px); margin-inline: auto; }
  .viewer-signal-knowledge { min-height: 0; }
  .viewer-signal-knowledge-map { min-height: 380px; }
  .viewer-signal-cta { min-height: 610px; }
  .viewer-signal-cta-orbit { width: 120%; }
}

@media (max-width: 600px) {
  .viewer-signal-live,
  .viewer-signal-flow,
  .viewer-signal-visual,
  .viewer-signal-contrast,
  .viewer-signal-existing,
  .viewer-signal-momentum,
  .viewer-signal-context,
  .viewer-signal-handover,
  .viewer-signal-knowledge,
  .viewer-signal-safety,
  .viewer-signal-faq,
  .viewer-signal-cta { padding: 54px 22px; }
  .viewer-signal-section-head h2,
  .viewer-signal-handover-copy h2,
  .viewer-signal-knowledge-copy h2 { font-size: clamp(39px, 12vw, 56px); }
  .viewer-signal-section-head > span { max-width: 34ch; margin-top: 0; }
  .viewer-signal-live-layout { margin-top: 34px; }
  .viewer-page .viewer-signal-prompts button { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-height: 78px; padding: 11px; }
  .viewer-signal-prompts button > strong { font-size: 12.5px; }
  .viewer-signal-prompts button small { display: none; }
  .viewer-signal-niche-icon { width: 36px; height: 36px; border-radius: 10px; }
  .viewer-signal-niche-icon::before { width: 18px; height: 18px; }
  .viewer-signal-prompts button::after { top: 9px; right: 9px; }
  .viewer-signal-demo-title { min-height: 46px; }
  .viewer-signal-stage { gap: 24px; height: auto; min-height: 0; padding: 22px 18px; border-radius: 16px; }
  .viewer-signal-visitor { width: 92%; }
  .viewer-signal-visitor--reply { width: 88%; }
  .viewer-signal-response { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; width: 100%; }
  .viewer-signal-response-mark { width: 42px; height: 42px; }
  .viewer-signal-conclusion { width: 100%; padding-left: 56px; }
  .viewer-signal-conclusion::before { left: 12px; }
  .viewer-signal-flow-track { margin-top: 48px; padding-left: 38px; }
  .viewer-signal-flow-line { left: 10px; }
  .viewer-signal-flow-track article { grid-template-columns: 1fr; min-height: 0; padding: 28px 0 34px; }
  .viewer-signal-discovery-note { margin-top: 34px; padding: 24px 0; }
  .viewer-signal-visual-perspective { grid-template-columns: 1fr; gap: 15px; padding: 20px 18px; }
  .viewer-signal-visual-perspective > i { width: 34px; height: 34px; transform: rotate(90deg); }
  .viewer-signal-visual-tabs { gap: 7px; }
  .viewer-page .viewer-signal-visual-tabs button { min-height: 62px; padding: 11px 12px; }
  .viewer-signal-visual-stage > header { align-items: flex-start; padding: 14px 15px; }
  .viewer-signal-visual-stage > header small { max-width: 15ch; text-align: right; }
  .viewer-signal-product-grid { grid-template-columns: 1fr; }
  .viewer-signal-product-grid > section { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
  .viewer-signal-product-image { height: 100%; min-height: 176px; }
  .viewer-signal-product-body > p { min-height: 0; }
  .viewer-signal-product-body footer { align-items: flex-start; flex-direction: column; }
  .viewer-signal-image-feature { min-height: 260px; }
  .viewer-signal-image-feature > div { padding: 28px 22px; }
  .viewer-signal-image-pair { grid-template-columns: 1fr; }
  .viewer-signal-presentation-frame > header div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .viewer-signal-presentation-formats { align-items: flex-start; flex-direction: column; }
  .viewer-signal-itinerary { grid-template-columns: 1fr; }
  .viewer-signal-itinerary-map { min-height: 210px; border-top: 1px solid rgba(20, 82, 116, .13); border-left: 0; }
  .viewer-signal-itinerary-days { grid-template-columns: 1fr; }
  .viewer-signal-itinerary-days span { min-height: 0; }
  .viewer-signal-presentation-body { padding: 24px 19px 19px; }
  .viewer-signal-visual-stage > footer { padding: 14px 15px; }
  .viewer-signal-discovery-note { grid-template-columns: 1fr; gap: 13px; }
  .viewer-signal-discovery-note > strong { max-width: 18ch; }
  .viewer-signal-discovery-note > p { grid-column: 1; max-width: 100%; }
  .viewer-signal-visual-layout { grid-template-columns: 1fr; margin-top: 44px; }
  .viewer-signal-visual-dialogue { grid-template-columns: 1fr; padding: 16px; }
  .viewer-signal-visual-dialogue > p { max-width: 100%; }
  .viewer-signal-visual-dialogue > div { grid-column: 1; grid-row: auto; width: 100%; margin-top: 8px; }
  .viewer-signal-visual-tabs { grid-template-columns: repeat(3, minmax(205px, 1fr)); overflow-x: auto; padding: 5px 2px 9px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .viewer-signal-visual-tabs button { scroll-snap-align: start; }
  .viewer-signal-visual-stage { border-radius: 18px; }
  .viewer-signal-visual-panels { min-height: 0; padding: 17px; }
  .viewer-signal-visual-panel { min-height: 0; }
  .viewer-signal-product-image { height: 128px; }
  .viewer-signal-presentation-thread { grid-template-columns: 1fr; }
  .viewer-signal-presentation-thread span { min-height: 0; }
  .viewer-signal-contrast-grid article { min-height: 290px; padding: 26px 22px; }
  .viewer-signal-existing-copy h2 { font-size: clamp(42px, 12vw, 56px); }
  .viewer-signal-existing-copy > span { font-size: 14px; }
  .viewer-signal-existing-copy li { grid-template-columns: 31px minmax(0, 1fr); gap: 12px; }
  .viewer-signal-existing-console { padding: 22px 17px; border-radius: 17px; }
  .viewer-signal-existing-console > header { align-items: flex-start; }
  .viewer-signal-existing-console header strong { font-size: 15px; }
  .viewer-signal-existing-stack article { grid-template-columns: 27px minmax(0, 1fr); }
  .viewer-signal-existing-stack article > b { grid-column: 2; }
  .viewer-signal-existing-console > footer { grid-template-columns: 1fr; }
  .viewer-signal-existing-console > footer strong + span { margin-top: 8px; }
  .viewer-signal-momentum-layout { margin-top: 44px; }
  .viewer-signal-momentum-visual { width: 112%; aspect-ratio: .88; margin-left: -6%; }
  .viewer-signal-momentum-point { width: 166px; min-width: 0; min-height: 104px; padding: 15px 15px; }
  .viewer-signal-momentum-point b { font-size: 8px; }
  .viewer-signal-momentum-point strong { font-size: 14px; }
  .viewer-signal-momentum-point small { font-size: 11px; }
  .viewer-signal-momentum-point--ask { top: 0; left: 0; }
  .viewer-signal-momentum-point--answer { top: 38%; right: 0; }
  .viewer-signal-momentum-point--act { bottom: 0; left: 2%; }
  .viewer-signal-momentum-signal { width: 128px; }
  .viewer-signal-momentum-caption { top: calc(50% + 76px); font-size: 7px; }
  .viewer-signal-momentum-path--in { top: 24%; left: 27%; width: 31%; transform: rotate(43deg); }
  .viewer-signal-momentum-path--out { top: 58%; left: 58%; width: 34%; transform: rotate(130deg); }
  .viewer-signal-benefit-list article { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
  .viewer-signal-value-strip { margin-top: 56px; }
  .viewer-signal-value-strip > span { min-height: 106px; padding: 22px 14px; }
  .viewer-signal-context-console { margin-top: 42px; }
  .viewer-signal-context-steps { grid-template-columns: 1fr; }
  .viewer-page .viewer-signal-context-steps button { grid-template-columns: 30px minmax(0, 1fr); min-height: 56px; padding: 11px; }
  .viewer-signal-context-stage { min-height: 0; padding: 22px 18px; border-radius: 17px; }
  .viewer-signal-context-status b { font-size: 8px; }
  .viewer-signal-context-message--visitor { width: 93%; }
  .viewer-signal-context-message--signal { grid-template-columns: 40px minmax(0, 1fr); width: 100%; }
  .viewer-signal-mini-core { width: 38px; height: 38px; }
  .viewer-signal-context-stage footer { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px 14px; margin-top: 30px; padding: 15px; }
  .viewer-signal-context-stage footer::after { grid-column: 2; grid-row: 1 / span 2; }
  .viewer-signal-context-stage footer strong { grid-column: 1; text-align: left; }
  .viewer-signal-handover-copy li { grid-template-columns: 1fr; gap: 7px; }
  .viewer-signal-enquiry-card { padding: 22px 17px; border-radius: 17px; }
  .viewer-signal-enquiry-card dl { grid-template-columns: 1fr; }
  .viewer-signal-enquiry-card dl > div { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .viewer-signal-enquiry-card dl > div:last-child { border-bottom: 0; }
  .viewer-signal-enquiry-thread > span { grid-template-columns: 1fr; gap: 5px; }
  .viewer-signal-enquiry-steps { grid-template-columns: 1fr; }
  .viewer-signal-enquiry-steps li { min-height: 0; }
  .viewer-signal-enquiry-card > footer { align-items: flex-start; flex-direction: column; }
  .viewer-signal-knowledge-map { min-height: 320px; }
  .viewer-signal-knowledge-copy ul { grid-template-columns: 1fr; }
  .viewer-signal-knowledge-copy li:nth-child(odd) { border-right: 0; }
  .viewer-signal-safety-layout { margin-top: 44px; }
  .viewer-signal-safety-console { min-height: 440px; border-radius: 18px; }
  .viewer-signal-safety-rules { grid-template-columns: 1fr; }
  .viewer-signal-safety-rules article { min-height: 0; padding: 23px 20px; }
  .viewer-signal-safety-rules h3 { max-width: 19ch; margin-top: 34px; font-size: 23px; }
  .viewer-signal-safety-rules p { font-size: 13px; }
  .viewer-signal-faq summary { grid-template-columns: minmax(0, 1fr) 38px; min-height: 76px; gap: 16px; font-size: 18px; }
  .viewer-signal-faq summary i { width: 36px; height: 36px; }
  .viewer-signal-faq details > p { margin-right: 0; font-size: 13px; }
  .viewer-signal-cta { min-height: 590px; }
  .viewer-signal-cta h2 { font-size: clamp(45px, 14vw, 66px); }
}

[data-signal-section] {
  scroll-margin-top: clamp(18px, 4vw, 48px);
}

.viewer-page [data-signal-section].is-signal-target {
  outline: 2px solid var(--workspace-red, #d5010d);
  outline-offset: 8px;
  animation: signal-target-arrival 1.35s cubic-bezier(.16, 1, .3, 1) both;
}

.signal-route-journey {
  position: fixed;
  z-index: 118;
  top: clamp(72px, 10vh, 96px);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: min(330px, calc(100% - 36px));
  padding: 12px 16px 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  color: #fff;
  background: rgba(13, 13, 15, .9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -14px, 0) scale(.965);
  backdrop-filter: blur(18px) saturate(1.15);
  transition: opacity 360ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.workspace-site-layer.is-signal-journey .signal-route-journey {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.signal-route-journey.is-leaving {
  opacity: 0 !important;
  transform: translate3d(-50%, -8px, 0) scale(.985) !important;
}

.signal-route-journey span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.signal-route-journey i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2635;
  box-shadow: 0 0 0 0 rgba(255, 38, 53, .5);
  animation: signal-journey-beacon 1.1s ease-out infinite;
}

.workspace-site-layer.is-signal-arrived .signal-route-journey i {
  animation: none;
  box-shadow: 0 0 16px rgba(255, 38, 53, .8);
}

.signal-route-journey small {
  color: #ff5964;
  font: 800 8px/1.2 Inter, sans-serif;
  letter-spacing: .16em;
}

.signal-route-journey strong {
  overflow: hidden;
  color: #f5f5f6;
  font: 650 13px/1.35 "Space Grotesk", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-route-journey b {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #d5010d, #ff3340);
  transform: scaleX(var(--signal-journey-progress, 0));
  transform-origin: left center;
  box-shadow: 0 0 18px rgba(255, 38, 53, .6);
}

@keyframes signal-journey-beacon {
  0% { box-shadow: 0 0 0 0 rgba(255, 38, 53, .5); }
  75%, 100% { box-shadow: 0 0 0 7px rgba(255, 38, 53, 0); }
}

.signal-return-control {
  display: none;
}

.signal-return-control[hidden] {
  display: none !important;
}

@keyframes signal-target-arrival {
  0% { outline-color: transparent; box-shadow: 0 0 0 0 rgba(213, 1, 13, 0); filter: brightness(1); }
  42% { outline-color: var(--workspace-red, #d5010d); box-shadow: 0 22px 72px rgba(213, 1, 13, .2); filter: brightness(1.06); }
  100% { outline-color: color-mix(in srgb, var(--workspace-red, #d5010d) 58%, transparent); box-shadow: 0 12px 42px rgba(213, 1, 13, .08); filter: brightness(1); }
}

@media (max-width: 900px) and (orientation: portrait) {
  .signal-return-control:not([hidden]) {
    position: fixed;
    isolation: isolate;
    z-index: 90;
    right: 15px;
    bottom: calc(28px + env(safe-area-inset-bottom));
    left: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    height: 60px;
    min-height: 60px;
    padding: 7px 7px 7px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .075), transparent 36%),
      rgba(11, 11, 13, .86);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .055),
      0 22px 58px rgba(0, 0, 0, .38);
    color: #fff;
    font: inherit;
    text-align: left;
    backdrop-filter: blur(20px) saturate(1.08);
    cursor: pointer;
  }

  .signal-return-control span { min-width: 0; }
  .signal-return-control small,
  .signal-return-control strong { display: block; }
  .signal-return-control small { color: #ff5360; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
  .signal-return-control strong { margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .signal-return-control .signal-return-action {
    place-self: center;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: var(--workspace-red);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 8px 24px rgba(213, 1, 13, .3);
  }

  .signal-return-control .prompt-send-icon {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-page [data-signal-section].is-signal-target { animation: none; }
  .signal-route-journey { display: none; }
}

.workspace-mobile-switch { display: none; }

.foghorn-workspace .immersive-suggestions button {
  min-height: 44px;
}

.foghorn-workspace .chat-experience.is-workspace .chat-topbar {
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform .72s var(--onyx-curtain-ease),
    opacity .38s var(--onyx-curtain-ease);
}

.foghorn-workspace.is-entered .chat-experience.is-workspace .chat-topbar {
  opacity: 1;
  transform: none;
  transition:
    transform .9s var(--onyx-curtain-ease) .32s,
    opacity .5s var(--onyx-curtain-ease) .32s;
}

.foghorn-workspace .chat-experience.is-workspace .guided-panel {
  opacity: 0;
  transform: none;
  transition: opacity 460ms var(--workspace-ease);
}

.foghorn-workspace.is-content-ready .chat-experience.is-workspace .guided-panel {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.foghorn-workspace .chat-experience.is-workspace .chat-panel {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 100%);
  background: #0d0d0f;
  transition: clip-path var(--system-morph-speed) var(--onyx-curtain-ease) 0s;
  transition-delay: 0s;
  transform-origin: right center;
  will-change: clip-path;
}

@media (min-width: 901px) {
  /* Keep the animation's compositing root viewport-sized. The visible board
     remains inset, but the moving chat surface can paint behind its frame. */
  .foghorn-workspace {
    inset: 0;
    content-visibility: visible;
    contain: none;
  }

  .foghorn-workspace .workspace-mount {
    position: absolute;
    inset: 16px;
    width: auto;
    height: auto;
  }

  .foghorn-workspace .chat-experience.is-workspace,
  .foghorn-workspace .workspace-mount,
  .foghorn-workspace .chat-canvas {
    overflow: visible;
  }

  .foghorn-workspace .chat-experience.is-workspace {
    /* The base chat shell advertises transform via will-change, which turns it
       into the containing block for fixed descendants and traps the curtain
       inside the inset board. The workspace transition must use the viewport. */
    will-change: auto;
  }

  .foghorn-workspace .chat-experience.is-workspace .chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 16px 16px 16px 0;
  }

  .foghorn-workspace .viewer-icon-switch {
    top: 38px;
  }
}

.foghorn-workspace.is-entered .chat-experience.is-workspace .chat-panel {
  clip-path: inset(0);
}

/* Keep controls from being visibly sliced by the moving panel curtain. */
.foghorn-workspace .chat-experience.is-workspace .chat-panel > .chat-messages,
.foghorn-workspace .chat-experience.is-workspace .chat-panel > .chat-compose {
  opacity: 0;
  transition: opacity 160ms ease 0s;
}

.foghorn-workspace.is-settled .chat-experience.is-workspace .chat-panel > .chat-messages,
.foghorn-workspace.is-settled .chat-experience.is-workspace .chat-panel > .chat-compose {
  opacity: 1;
  transition: opacity 480ms var(--onyx-curtain-ease) 120ms;
}

.foghorn-workspace.is-closing .chat-experience.is-workspace .chat-panel > .chat-messages,
.foghorn-workspace.is-closing .chat-experience.is-workspace .chat-panel > .chat-compose {
  opacity: 0;
  transition: opacity 160ms ease 0s;
}

@media (max-width: 1180px) {
  body.workspace-active .hero { inset: 0 50% 0 0; }
  .foghorn-workspace .chat-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-route-strip button { padding-inline: 7px; font-size: 8px; }
  .foghorn-workspace .adaptive-mini-nav { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .foghorn-workspace .adaptive-mini-nav > span { display: none; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .site-frame { inset: 8px; }
  .workspace-mount::after { display: none; }
  .workspace-mount > .workspace-cross--tm,
  .workspace-mount > .workspace-cross--bm { display: none; }
  .viewer-icon-switch { display: none !important; }

  .workspace-mobile-view-toggle {
    display: grid;
    position: fixed;
    top: var(--workspace-mobile-control-inset);
    left: var(--workspace-mobile-control-inset);
  }

  .workspace-direct-nav {
    --workspace-direct-control-size: clamp(44px, 4.3vw, 62px);
    --workspace-direct-control-inset: clamp(14px, 2.64vw, 38px);
    position: fixed;
    z-index: 500;
    top: var(--workspace-direct-control-inset);
    right: calc(var(--workspace-direct-control-inset) + var(--workspace-direct-control-size) + 8px);
    left: calc(var(--workspace-direct-control-inset) + var(--workspace-direct-control-size) + 8px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: 520px;
    height: var(--workspace-direct-control-size);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(24, 22, 24, .96), rgba(15, 15, 17, .96));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 320ms var(--workspace-ease),
      visibility 0s linear 520ms,
      transform 480ms var(--workspace-ease);
  }

  .workspace-direct-nav button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 4px 2px 3px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .075);
    color: #aaa9ae;
    background: transparent;
    display: grid;
    grid-template-rows: 18px minmax(0, 1fr);
    place-items: center;
    align-content: center;
    gap: 2px;
    font: 700 8px/1 Inter, Arial, sans-serif;
    letter-spacing: .075em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease;
  }

  .workspace-direct-nav button:first-child { border-left: 0; }

  .workspace-direct-nav button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--workspace-red);
    box-shadow: 0 0 12px rgba(229, 9, 23, .52);
    opacity: 0;
    transform: translateX(-50%) scaleX(.35);
    transform-origin: center;
    transition: opacity 220ms ease, transform 320ms var(--workspace-ease);
  }

  .workspace-direct-nav svg {
    width: 17px;
    height: 17px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
  }

  .workspace-direct-nav button > span {
    display: block;
    max-width: 100%;
    overflow-wrap: normal;
  }

  .workspace-direct-nav button.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(229, 9, 23, .105), rgba(229, 9, 23, .025));
  }

  .workspace-direct-nav button.is-active::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  .workspace-direct-nav button.is-active svg { color: #f33a45; }

  .workspace-direct-nav button:focus-visible {
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: -3px;
  }

  @media (hover: hover) and (pointer: fine) {
    .workspace-direct-nav button:hover {
      color: #fff;
      background: rgba(229, 9, 23, .085);
    }
  }

  .workspace-mobile-view-toggle.is-entered {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 300ms, 0s, 300ms, 0s;
  }

  .workspace-direct-nav.is-entered {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 300ms, 0s, 300ms;
  }

  .workspace-mobile-view-toggle.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition-delay: 0s;
  }

  .workspace-direct-nav.is-closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition-delay: 0s;
  }

  .foghorn-workspace {
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    border-color: transparent;
    content-visibility: visible;
    contain: none;
    clip-path: none;
    background: #0b0b0d;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    transition:
      border-color .35s ease,
      visibility 0s linear var(--system-morph-speed);
  }

  .foghorn-workspace .workspace-mount {
    position: absolute;
    inset: 8px;
    width: auto;
    height: auto;
  }

  .foghorn-workspace.is-entered {
    animation: workspace-mobile-enter var(--system-morph-speed) var(--onyx-curtain-ease) both;
  }

  .foghorn-workspace.is-closing {
    animation: workspace-mobile-exit var(--system-morph-speed) var(--onyx-curtain-ease) both;
  }

  .foghorn-workspace .chat-experience.is-workspace .chat-panel,
  .foghorn-workspace.is-entered .chat-experience.is-workspace .chat-panel {
    clip-path: none;
  }

  body.workspace-active:not(.workspace-settled) .hero {
    inset: 0;
    opacity: 1;
    transform: none;
  }

  .foghorn-workspace .chat-topbar {
    display: none !important;
  }

  .foghorn-workspace .chat-brand { width: 48px; padding: 0; }
  .foghorn-workspace .chat-brand > span:last-child,
  .foghorn-workspace .chat-progress,
  .foghorn-workspace .chat-close { display: none; }

  .workspace-mobile-switch {
    display: flex;
    justify-self: end;
  }

  .workspace-mobile-switch button {
    min-width: 76px;
    min-height: 44px;
    padding: 0 12px;
  }

  .foghorn-workspace .chat-canvas { display: block; }
  .foghorn-workspace .guided-panel { display: none; }
  .foghorn-workspace .chat-panel { width: 100%; height: 100%; }

  .foghorn-workspace .mobile-preview-drawer {
    position: absolute;
    inset: 0;
    z-index: 18;
    padding: 0;
    background: #0b0b0d;
    transform: translateX(-4%);
  }

  .foghorn-workspace .mobile-preview-drawer.is-open { transform: none; }
  .foghorn-workspace .mobile-guide-topbar { min-height: 56px; border-bottom: 1px solid var(--workspace-line); background: #0b0b0d; }
  .foghorn-workspace .mobile-guide-topbar button { min-height: 44px; }
  /* Leave clearance above the persistent return control, including phone safe areas. */
  .foghorn-workspace .mobile-guide-host { height: calc(100% - 84px - env(safe-area-inset-bottom)); padding: 8px; overflow: hidden; }
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation::-webkit-scrollbar { display: none; }
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation .adaptive-site-preview,
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation .adaptive-page,
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation .grounded-webview,
  .foghorn-workspace .mobile-guide-host.has-flowing-presentation .generated-presentation-host {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .foghorn-workspace .mobile-guide-host .adaptive-site-preview { height: 100%; border-radius: 0; }
  .foghorn-workspace .adaptive-browser-bar { min-height: 46px; }
  .viewer-mode-switch button { min-height: 44px; padding-inline: 10px; }

  .foghorn-workspace .adaptive-mini-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 58px;
    padding: 0;
  }
  .foghorn-workspace .adaptive-mini-nav img { display: none; }
  .viewer-route-strip { justify-self: stretch; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .viewer-route-strip::-webkit-scrollbar { display: none; }
  .viewer-route-strip button { min-height: 44px; padding: 0 9px; font-size: 10px; }
  .foghorn-workspace [data-guide-content].is-site-view { padding: 0 !important; }

  .foghorn-workspace [data-close-save] { min-width: 44px; min-height: 44px; }

  .viewer-page-hero { min-height: var(--viewer-viewport-height, calc(100dvh - 82px)); padding: 34px 22px; }
  .viewer-page-hero h1 { font-size: clamp(40px, 11.5vw, 58px); line-height: .98; }
  .viewer-page-hero .viewer-page-intro { margin-top: 22px; font-size: 16px; line-height: 1.58; }
  .viewer-stat-board { grid-template-columns: 1fr; }
  .viewer-stat-board article { min-height: 190px; padding: 28px 22px; }
  .viewer-stat-board strong { margin-top: 38px; font-size: 32px; }
  .viewer-stat-board p { font-size: 15px; }
  .viewer-feature-split { grid-template-columns: 1fr; }
  .viewer-feature-split > div { padding: 40px 22px; }
  .viewer-feature-split > div + div { border-top: 1px solid #c8c8c7; border-left: 0; }
  .viewer-feature-split h2,
  .viewer-end-panel h2 { font-size: clamp(38px, 10vw, 54px); }
  .viewer-route-board { grid-template-columns: 1fr; }
  .viewer-route-board button { min-height: 132px; padding: 22px; }
  .viewer-route-board strong { font-size: 28px; }
  .viewer-service-list article,
  .viewer-process article { grid-template-columns: 58px minmax(0, 1fr); min-height: 250px; }
  .viewer-service-list article > span,
  .viewer-process article > span { padding: 28px 16px; }
  .viewer-service-list article > div,
  .viewer-process article > div { padding: 36px 22px; }
  .viewer-service-list h2,
  .viewer-process h2,
  .viewer-comparison h2 { font-size: 38px; }
  .viewer-service-list p,
  .viewer-process p,
  .viewer-comparison p { font-size: 16px; }
  .viewer-end-panel,
  .viewer-quote-panel,
  .viewer-conversation-demo { padding: 48px 22px; }
  .viewer-quote-panel blockquote { font-size: 43px; }
  .viewer-question,
  .viewer-answer { max-width: 92%; padding: 20px; }
  .viewer-question p,
  .viewer-answer p { font-size: 22px; }
  .viewer-comparison { grid-template-columns: 1fr; }
  .viewer-comparison article { min-height: 280px; padding: 38px 22px; }
  .viewer-comparison article + article { border-top: 1px solid #c8c8c7; border-left: 0; }
  .viewer-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-trust-grid span { min-height: 116px; }
  .viewer-contact-form { padding: 34px 22px; }
  .viewer-page-footer { padding: 18px 22px; }
}

@media (max-width: 760px) {
  .viewer-services-catalogue { padding: 52px 22px 64px; }
  .viewer-services-catalogue-head { grid-template-columns: 1fr; gap: 22px; }
  .viewer-services-catalogue-head > p { margin: 0; }
  .viewer-services-card-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .viewer-service-card { min-height: 400px; }
  .viewer-service-card-surface { padding: 26px; }
  .viewer-service-card-visual { top: 26px; right: 26px; width: 78px; }
  .viewer-service-card-title { font-size: clamp(30px, 8vw, 38px); }
  .viewer-service-card-tagline { font-size: 19px; }
  .viewer-service-card-description { margin-top: 14px; font-size: 13px; }

  .foghorn-workspace .immersive-form,
  .prompt-handoff {
    grid-template-columns: minmax(0, 1fr) 44px;
    min-height: 60px;
    padding: 7px 7px 7px 16px;
    border-radius: 999px;
  }

  /* Align the workspace prompt with the hero prompt and mobile page frame.
     The 8px workspace frame plus this 7px inset reproduces the hero's 15px
     outer edge, so the handoff lands without changing width. */
  .foghorn-workspace .chat-compose {
    padding-right: 7px;
    padding-left: 7px;
  }

  .foghorn-workspace .immersive-form button,
  .prompt-handoff > i {
    width: 44px;
    height: 44px;
  }

  .prompt-handoff > span { font-size: 13px; }

  .foghorn-workspace .interface-prompt-rotator {
    left: 16px;
    right: 66px;
    font-size: 13px;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  .workspace-direct-nav {
    right: calc(var(--workspace-direct-control-inset) + var(--workspace-direct-control-size) + 5px);
    left: calc(var(--workspace-direct-control-inset) + var(--workspace-direct-control-size) + 5px);
  }

  .workspace-direct-nav button {
    padding-inline: 1px;
    font-size: 7px;
    letter-spacing: .035em;
  }

  .workspace-direct-nav svg {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  .workspace-direct-nav button { font-size: 9px; }
  .workspace-direct-nav svg { width: 18px; height: 18px; }
}

@keyframes workspace-mobile-enter {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes workspace-mobile-exit {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}

@media (max-width: 560px) and (orientation: portrait) {
  .viewer-form-row { grid-template-columns: 1fr; }
  .viewer-contact-form > button { width: 100%; min-height: 50px; }
  .viewer-trust-grid { grid-template-columns: 1fr; }
  .viewer-page-footer { gap: 12px; flex-direction: column; }
}

@media (max-height: 560px) and (orientation: landscape) and (max-width: 950px) {
  .site-frame { inset: 6px; }
  .foghorn-workspace {
    inset: 6px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    clip-path: none;
  }

  body.workspace-active .hero { inset: 0 50% 0 0; opacity: 1; transform: none; }

  .foghorn-workspace .chat-topbar {
    display: none !important;
  }

  .foghorn-workspace .chat-brand small,
  .foghorn-workspace .chat-progress { display: none; }
  .foghorn-workspace .chat-brand { min-height: 44px; }
  .foghorn-workspace .chat-close { min-height: 44px; height: 44px; }
  .workspace-mobile-switch { display: none; }
  .foghorn-workspace .chat-canvas { display: grid; grid-template-columns: 1fr 1fr; }
  .foghorn-workspace .guided-panel { display: block; padding: 0; }
  .foghorn-workspace .chat-panel { display: flex; min-width: 0; }
  .foghorn-workspace .mobile-preview-drawer { display: none !important; }
  .foghorn-workspace .adaptive-browser-bar { min-height: 44px; padding: 0 8px; }
  .foghorn-workspace .adaptive-browser-bar small { font-size: 8px; }
  .viewer-mode-switch button { min-height: 44px; padding: 0 8px; font-size: 8px; }
  .foghorn-workspace .adaptive-mini-nav { min-height: 44px; padding: 0 8px; }
  .foghorn-workspace .adaptive-mini-nav img { width: 82px; }
  .viewer-route-strip { overflow-x: auto; scrollbar-width: none; }
  .viewer-route-strip button { min-height: 44px; padding: 0 6px; font-size: 8px; }
  .viewer-page-hero { min-height: 260px; padding: 72px 20px 24px; }
  .viewer-scroll-cue { display: none; }
  .viewer-page-eyebrow { margin-bottom: 12px; font-size: 8px; }
  .viewer-page-hero h1 { font-size: clamp(34px, 5.8vw, 48px); }
  .viewer-page-hero .viewer-page-intro { margin-top: 14px; font-size: 14px; line-height: 1.45; }
  .foghorn-workspace .immersive-toolbar { min-height: 44px; padding: 6px 10px; }
  .foghorn-workspace .chat-messages { padding: 12px; }
  .foghorn-workspace .chat-welcome .ready-orb { width: 36px; height: 36px; margin-bottom: 10px; }
  .foghorn-workspace .chat-welcome .kicker { margin-bottom: 5px; font-size: 8px; }
  .foghorn-workspace .chat-welcome h3 { font-size: 28px; line-height: .98; }
  .foghorn-workspace .chat-welcome-copy { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .foghorn-workspace .chat-welcome-note { display: none; }
  .foghorn-workspace .chat-compose { padding: 6px 8px; }
  .foghorn-workspace .immersive-suggestions { display: none; }
  .foghorn-workspace .compose-foot { display: none; }
}

/* Phones use one consistent bottom-sheet transition in either orientation.
   Keep this after the landscape layout rules so those rules cannot restore the
   old inset or horizontal curtain. */
@media (max-width: 950px) {
  .foghorn-workspace {
    inset: 0;
    border-color: transparent;
    clip-path: none;
    background: #0b0b0d;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
  }

  .foghorn-workspace.is-entered {
    animation: workspace-mobile-enter var(--system-morph-speed) var(--onyx-curtain-ease) both;
  }

  .foghorn-workspace.is-closing {
    animation: workspace-mobile-exit var(--system-morph-speed) var(--onyx-curtain-ease) both;
  }

  .foghorn-workspace .chat-experience.is-workspace .chat-panel,
  .foghorn-workspace.is-entered .chat-experience.is-workspace .chat-panel {
    clip-path: none;
  }

  body.workspace-active:not(.workspace-settled) .hero {
    inset: 0;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .foghorn-workspace .workspace-mount {
    position: absolute;
    inset: 6px;
    width: auto;
    height: auto;
  }

  .foghorn-workspace .grounded-webview[data-presentation="system-simulation"] {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .foghorn-workspace .grounded-webview[data-presentation="system-simulation"]::-webkit-scrollbar { display: none; }

  .foghorn-workspace .grounded-webview[data-presentation="system-simulation"] > .system-simulation-host {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
}

/* The workspace covers the hero; it never resizes or reflows the hero itself. */
body.workspace-home.workspace-active .hero {
  inset: 0;
  transform: none;
}

body.workspace-home.workspace-active:not(.workspace-settled) .hero {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .foghorn-workspace.is-open {
    transform: translate3d(0, 0, 0) !important;
    animation: none !important;
  }

  .hero-content h1 .hero-char,
  body.workspace-home .hero-content > .location-pill,
  body.workspace-home .hero-content > .ask-card,
  .hero-intro .hero-intro-line,
  body.workspace-home .hero .nav,
  .hero-system-veil {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .foghorn-workspace *,
  .foghorn-workspace *::before,
  .foghorn-workspace *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .viewer-word,
  [data-viewer-reveal] {
    opacity: 1;
    transform: none;
  }

  .viewer-about-principles article:hover,
  .viewer-about-team article:hover,
  .viewer-about-team article:hover .viewer-team-portrait,
  .viewer-about-team article:hover .viewer-team-portrait img,
  .viewer-about-team article:hover .viewer-team-portrait span,
  .viewer-about-team article:hover h3 { transform: none; }
}

/* The navigation arrives independently of the workspace curtain. Each item
   crosses the top edge on its own timing, then returns there in reverse order
   when the workspace closes. Page-to-page routing does not replay the reveal. */
.workspace-direct-nav button {
  --workspace-direct-flight-y: calc(-100dvh - 80px);
  --workspace-direct-flight-x: 0px;
  --workspace-direct-flight-rotate: 0deg;
  --workspace-direct-order: 0;
  --workspace-direct-reverse-order: 3;
  opacity: 0;
  transform: translate3d(var(--workspace-direct-flight-x), var(--workspace-direct-flight-y), 0)
    scale(.76) rotate(var(--workspace-direct-flight-rotate));
  transform-origin: 50% 20%;
  will-change: opacity, transform;
}

.workspace-direct-nav {
  gap: 4px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-direct-nav button,
.workspace-direct-nav button:first-child,
.workspace-direct-nav button:last-child {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(24, 22, 24, .96), rgba(15, 15, 17, .96));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .2),
    inset 0 1px rgba(255, 255, 255, .025);
}

.workspace-direct-nav button:nth-child(1) {
  --workspace-direct-flight-x: -52px;
  --workspace-direct-flight-rotate: -8deg;
  --workspace-direct-order: 0;
  --workspace-direct-reverse-order: 3;
}

.workspace-direct-nav button:nth-child(2) {
  --workspace-direct-flight-x: -17px;
  --workspace-direct-flight-rotate: -3deg;
  --workspace-direct-order: 1;
  --workspace-direct-reverse-order: 2;
}

.workspace-direct-nav button:nth-child(3) {
  --workspace-direct-flight-x: 17px;
  --workspace-direct-flight-rotate: 3deg;
  --workspace-direct-order: 2;
  --workspace-direct-reverse-order: 1;
}

.workspace-direct-nav button:nth-child(4) {
  --workspace-direct-flight-x: 52px;
  --workspace-direct-flight-rotate: 8deg;
  --workspace-direct-order: 3;
  --workspace-direct-reverse-order: 0;
}

.workspace-direct-nav.is-entered:not(.is-closing) button {
  animation: workspace-direct-item-arrive 780ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(300ms + var(--workspace-direct-order) * 72ms);
}

.workspace-direct-nav.is-closing {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: workspace-direct-shell-depart 940ms ease both;
  transition: none;
}

@media (min-width: 901px), (max-width: 900px) and (orientation: landscape) {
  .workspace-direct-nav.is-closing { transform: translate(-50%, 0); }
}

@media (max-width: 900px) and (orientation: portrait) {
  .workspace-direct-nav.is-closing { transform: none; }
}

.workspace-direct-nav.is-closing button {
  animation: workspace-direct-item-depart 720ms cubic-bezier(.7, 0, .84, 0) both;
  animation-delay: calc(35ms + var(--workspace-direct-reverse-order) * 58ms);
}

/* The panel switch is the companion control to the four route buttons. It
   leads their entrance, then waits for their reverse sequence before leaving. */
.workspace-mobile-view-toggle.is-entered:not(.is-closing) {
  visibility: visible;
  animation: workspace-companion-control-arrive 720ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--workspace-companion-enter-delay);
  transition: background-color 240ms ease;
}

.workspace-mobile-view-toggle.is-closing {
  visibility: visible;
  animation: workspace-companion-control-depart 660ms cubic-bezier(.65, 0, .35, 1) both;
  animation-delay: var(--workspace-companion-exit-delay);
  transition: background-color 240ms ease;
}

@keyframes workspace-companion-control-arrive {
  0% {
    opacity: 0;
    transform: translate3d(var(--workspace-companion-flight-x), var(--workspace-companion-flight-y), 0)
      scale(.84) rotate(-6deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes workspace-companion-control-depart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--workspace-companion-flight-x), var(--workspace-companion-flight-y), 0)
      scale(.84) rotate(-6deg);
  }
}

@keyframes workspace-direct-item-arrive {
  0% {
    opacity: 0;
    transform: translate3d(var(--workspace-direct-flight-x), var(--workspace-direct-flight-y), 0)
      scale(.76) rotate(var(--workspace-direct-flight-rotate));
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.025) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes workspace-direct-item-depart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.025) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--workspace-direct-flight-x), var(--workspace-direct-flight-y), 0)
      scale(.76) rotate(var(--workspace-direct-flight-rotate));
  }
}

@keyframes workspace-direct-shell-depart {
  0%, 68% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-direct-nav,
  .workspace-direct-nav button,
  .workspace-mobile-view-toggle {
    animation: none !important;
    transition: none !important;
  }

  .workspace-direct-nav button {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile uses a clean vertical journey; desktop keeps the full orbit. */
@container (max-width: 680px) {
  .viewer-signal-momentum-layout { gap: 48px; margin-top: 52px; }

  .viewer-signal-momentum-visual {
    display: grid;
    grid-template-rows: auto 170px auto 32px auto;
    gap: 16px;
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
  }

  .viewer-signal-momentum-visual::before { display: none; }

  .viewer-signal-momentum-visual::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 90px;
    bottom: 90px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 54, 67, .64) 18%, rgba(255, 54, 67, .16) 82%, transparent);
    box-shadow: 0 0 18px rgba(229, 9, 23, .22);
  }

  .viewer-signal-momentum-path { display: none; }

  .viewer-signal-momentum-point {
    position: relative;
    inset: auto;
    width: min(82%, 310px);
    min-height: 128px;
    padding: 20px 21px;
  }

  .viewer-signal-momentum-point b { font-size: 9px; }
  .viewer-signal-momentum-point strong { font-size: 18px; }
  .viewer-signal-momentum-point small { font-size: 12.5px; }
  .viewer-signal-momentum-point--ask { grid-row: 1; grid-column: 1; justify-self: start; }
  .viewer-signal-momentum-point--answer { grid-row: 3; grid-column: 1; justify-self: end; }
  .viewer-signal-momentum-point--act { grid-row: 5; grid-column: 1; justify-self: start; }

  .viewer-signal-momentum-signal,
  .viewer-signal-momentum-signal.is-momentum-engaged {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    width: 142px;
    transform: scale(calc(.94 + var(--signal-scroll-progress) * .06));
  }

  .viewer-signal-momentum-signal.is-momentum-engaged { transform: scale(1.08); }

  .viewer-signal-momentum-caption {
    position: relative;
    top: auto;
    left: auto;
    z-index: 4;
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    align-self: end;
    margin-bottom: 4px;
    font-size: 8px;
    transform: none;
  }
}

/* Signal product-page polish: keep the flagship presentation editorial,
   readable and composed at every point in the split workspace. */
.viewer-page--conversation-sites .viewer-page-hero h1 {
  max-width: 13.5ch;
  text-wrap: balance;
}

.viewer-page--conversation-sites .viewer-page-hero .viewer-page-intro {
  max-width: 52ch;
  color: #c4c4c8;
  text-wrap: pretty;
}

.viewer-page--conversation-sites .viewer-page-eyebrow {
  text-shadow: none;
}

.viewer-signal-section-head h2,
.viewer-signal-handover-copy h2,
.viewer-signal-knowledge-copy h2,
.viewer-signal-cta h2,
.viewer-signal-existing-copy h2 {
  text-wrap: balance;
}

.viewer-signal-section-head > span,
.viewer-signal-handover-copy > span,
.viewer-signal-knowledge-copy > span,
.viewer-signal-existing-copy > span,
.viewer-signal-cta > div > span {
  text-wrap: pretty;
}

.viewer-page .viewer-signal-prompts button,
.viewer-page .viewer-signal-context-steps button,
.viewer-signal-faq summary {
  -webkit-tap-highlight-color: transparent;
}

.viewer-page .viewer-signal-prompts button:focus-visible,
.viewer-page .viewer-signal-context-steps button:focus-visible {
  outline: 2px solid #ff5360;
  outline-offset: 3px;
}

.foghorn-workspace .immersive-suggestions button {
  padding-inline: 14px;
  font-size: 10.5px;
  line-height: 1.2;
}

@container (max-width: 760px) {
  .viewer-page--conversation-sites .viewer-page-hero {
    padding-inline: clamp(22px, 6cqw, 38px);
  }

  .viewer-page--conversation-sites .viewer-page-hero h1 {
    max-width: 13.5ch;
    font-size: clamp(44px, 9.6cqw, 64px);
    line-height: .96;
  }

  .viewer-page--conversation-sites .viewer-page-hero .viewer-page-intro {
    max-width: 39ch;
    font-size: 15.5px;
    line-height: 1.64;
  }
}

@container (max-width: 520px) {
  /* Scroll-driven character blur looks unresolved at a phone-sized fold.
     Mobile headings arrive crisp while the larger composition keeps its motion. */
  .viewer-page--conversation-sites [data-viewer-reveal] h2 .viewer-hero-char {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .viewer-page--conversation-sites .viewer-page-hero {
    min-height: min(680px, var(--viewer-viewport-height, 100dvh));
    padding-block: 42px 46px;
  }

  .viewer-page--conversation-sites .viewer-page-hero h1 {
    max-width: 13.5ch;
    font-size: clamp(40px, 11.2cqw, 47px);
  }

  .viewer-page--conversation-sites .viewer-page-hero .viewer-page-intro {
    margin-top: 24px;
    color: #c8c8cc;
  }

  .viewer-page--conversation-sites .viewer-signal-hero-node--three {
    display: none;
  }

  .viewer-signal-section-head h2,
  .viewer-signal-handover-copy h2,
  .viewer-signal-knowledge-copy h2,
  .viewer-signal-existing-copy h2 {
    letter-spacing: -.047em;
  }

  .viewer-page .viewer-signal-prompts button,
  .viewer-page .viewer-signal-context-steps button {
    min-height: 48px;
  }

  .viewer-signal-faq details > p {
    color: #58585d;
    font-size: 14px;
    line-height: 1.7;
  }

  .viewer-signal-difference-board { margin-top: 40px; border-radius: 16px; }
  .viewer-signal-difference-head { min-height: 48px; }
  .viewer-signal-difference-head span { padding-inline: 13px; font-size: 7px; }
  .viewer-signal-difference-row { min-height: 78px; }
  .viewer-signal-difference-row > span,
  .viewer-signal-difference-row > strong { gap: 8px; padding: 13px; font-size: 11.5px; line-height: 1.42; }
  .viewer-signal-difference-row i { width: 14px; height: 14px; }
  .viewer-signal-difference-row > span i::before { top: 6px; }
  .viewer-signal-difference-row > strong i::before { transform: translate(3px, 1px) rotate(45deg); }
  .viewer-signal-shared-value { grid-template-columns: 1fr; width: 100%; }
  .viewer-signal-shared-value > header { gap: 9px; padding: 20px 18px 21px; }
  .viewer-signal-shared-value article { min-height: 0; padding: 20px 18px; }
  .viewer-signal-shared-value article + article { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
}

/* Final Signal legibility floor. These are compact interface labels rather
   than body copy, but they still need to remain effortless to scan in the
   desktop split view and on a phone. Keep this after the container rules. */
.viewer-page--conversation-sites :is(
  .viewer-signal-section-head > p,
  .viewer-signal-handover-copy > p,
  .viewer-signal-knowledge-copy > p,
  .viewer-signal-cta p,
  .viewer-signal-demo-note,
  .viewer-signal-enquiry-label,
  .viewer-signal-visitor span,
  .viewer-signal-response > div > span,
  .viewer-signal-conclusion > span,
  .viewer-signal-outcome > span,
  .viewer-signal-discovery-note > span,
  .viewer-signal-visual-perspective small,
  .viewer-signal-visual-dialogue > small,
  .viewer-signal-visual-dialogue > div > span:last-child > small,
  .viewer-signal-visual-stage > header span,
  .viewer-signal-visual-stage > header small,
  .viewer-signal-image-pair figcaption small,
  .viewer-signal-contrast-grid article > span,
  .viewer-signal-contrast-grid b,
  .viewer-signal-difference-head span,
  .viewer-signal-shared-value span,
  .viewer-signal-existing-copy > p,
  .viewer-signal-existing-console header small,
  .viewer-signal-existing-platforms > small,
  .viewer-signal-existing-stack small,
  .viewer-signal-momentum-caption,
  .viewer-signal-context-status span,
  .viewer-signal-context-message small,
  .viewer-signal-context-stage footer span,
  .viewer-signal-enquiry-card header small,
  .viewer-signal-enquiry-card dt,
  .viewer-signal-enquiry-toggle small,
  .viewer-signal-enquiry-draft small,
  .viewer-signal-enquiry-thread small,
  .viewer-signal-safety-status,
  .viewer-signal-safety-console-head small,
  .viewer-signal-safety-core-label small,
  .viewer-signal-safety-control small,
  .viewer-signal-safety-path b,
  .viewer-signal-safety-rules b
) { font-size: 10px; line-height: 1.35; }

.chat-product-selection {
  width: min(707px, calc(100% - 53px));
  margin: 20px 0 20px 53px;
  min-width: 0;
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 680ms ease,
    filter 760ms ease,
    transform 820ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, filter, transform;
}
.chat-product-selection.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}
.chat-product-selection[hidden] { display: none !important; }
@media (max-width: 600px) {
  .chat-product-selection { width: 100%; margin: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-product-selection { opacity: 1; filter: none; transform: none; transition: none; }
}

@container (max-width: 520px) {
  .viewer-signal-safety-console-head { min-height: 58px; padding-inline: 16px; }
  .viewer-signal-safety-console-head small { max-width: 14ch; text-align: right; }
  .viewer-signal-safety-field { min-height: 440px; }
  .viewer-signal-safety-field::before { width: 86%; }
  .viewer-signal-safety-field::after { width: 60%; }
  .viewer-signal-safety-orb { top: 31%; width: 128px; }
  .viewer-signal-safety-core-label { top: calc(31% + 68px); }
  .viewer-signal-safety-control { width: calc(50% - 22px); min-height: 66px; padding: 9px; }
  .viewer-signal-safety-control::after { display: none; }
  .viewer-signal-safety-control strong { font-size: 10.5px; }
  .viewer-signal-safety-control small { font-size: 8.5px; }
  .viewer-signal-safety-control--knowledge { top: 274px; left: 14px; }
  .viewer-signal-safety-control--limits { top: 274px; right: 14px; }
  .viewer-signal-safety-control--fallback { bottom: 18px; left: 14px; }
  .viewer-signal-safety-control--consent { right: 14px; bottom: 18px; }
  .viewer-signal-safety-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-height: 96px; padding: 14px; }
  .viewer-signal-safety-path > i { display: none; }
  .viewer-signal-safety-path span { text-align: center; }
}