/* =========================================================================
   GigsHQ — /about/dmo landing
   Every rule below is written mobile-safe first: nothing has a fixed width,
   every box is border-box, every media box is capped at 100%.
   ========================================================================= */

/* ---------------------------------------------------------------- 01 base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  /* release-blocking rule: no horizontal scroll at any width. `clip` is the
     safety net; the layout below is built so it is never actually needed. */
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-text);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--red-lit);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--pad); top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- 02 layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-y); }

.section--hairline { border-top: var(--hair) solid var(--line-soft); }

/* ------------------------------------------------- 03 background texture */

/* A single, very slow drift. No blobs, no glow — just an uneven charcoal
   field so the page does not read as flat #000. */
.backdrop {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46vmax 34vmax at 20% 6%,  rgba(211, 47, 47, 0.055), transparent 62%),
    radial-gradient(54vmax 42vmax at 86% 30%, rgba(120, 130, 175, 0.045), transparent 64%),
    radial-gradient(42vmax 42vmax at 48% 98%, rgba(211, 47, 47, 0.035), transparent 66%);
  animation: drift 74s ease-in-out infinite alternate;
}

.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}

/* ------------------------------------------------------------- 04 header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground-deep) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.masthead[data-scrolled='true'] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ground-deep) 94%, transparent);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  min-height: 92px;
  transition: min-height 0.32s var(--ease);
}

.masthead[data-scrolled='true'] .masthead__bar { min-height: 68px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 44px;
  color: var(--ink);
}

.wordmark img { display: block; width: 72px; height: 72px; object-fit: contain; }
.masthead[data-scrolled='true'] .wordmark img { width: 56px; height: 56px; }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin-inline-start: auto;
  min-width: 0;
}

.navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.18s var(--ease);
}

.navlink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.navlink:hover { color: var(--ink); }
.navlink:hover::after { transform: scaleX(1); }

.navlink--quiet { color: var(--ink-3); font-weight: 400; }

.masthead__cta { flex: 0 0 auto; }

.masthead__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-inline-start: auto;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.masthead__toggle span {
  position: relative;
  display: block;
  width: 17px; height: 1.5px;
  background: var(--ink);
}
.masthead__toggle span::before,
.masthead__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s var(--ease);
}
.masthead__toggle span::before { top: -5px; }
.masthead__toggle span::after  { top: 5px; }

.masthead__toggle[aria-expanded='true'] span { background: transparent; }
.masthead__toggle[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.masthead__toggle[aria-expanded='true'] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* mobile drawer — both audience routes stay visible, neither is hidden */
.drawer {
  display: none;
  border-top: var(--hair) solid var(--line);
  background: var(--ground-deep);
}

.drawer[data-open='true'] { display: block; }

.drawer__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 12px 24px;
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: var(--hair) solid var(--line-soft);
  font-size: 1.0625rem;
  font-weight: 500;
}

.drawer__link small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* The primary DMO CTA stays visible at every width — the brief treats it as
   the one control that must never be buried in a menu. */
@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .masthead__toggle { display: flex; margin-inline-start: 0; }
  .masthead__bar .masthead__cta { margin-inline-start: auto; min-height: 44px; }
}

@media (max-width: 420px) {
  .masthead__bar { gap: 10px; }
  .masthead__bar .masthead__cta { min-height: 44px; padding-inline: 12px; font-size: 0.8125rem; }
}

/* ------------------------------------------------- 05 buttons & eyebrows */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn__arrow { transition: transform 0.22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 26px -16px var(--red);
}
.btn--primary:hover { background: #e03a3a; }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
  border: var(--hair) solid var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--red-edge); background: var(--red-wash); }

.btn--compact { min-height: 44px; padding: 10px 17px; font-size: 0.875rem; }

.btn--wide { width: 100%; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--red);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------- 06 headlines */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.004em;
  text-wrap: balance;
}

.display--hero { font-size: clamp(2.9rem, 8.4vw, 6.2rem); }
.display--section { font-size: clamp(2.05rem, 4.9vw, 3.6rem); }
.display--panel { font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.02; }
.nowrap-phrase { white-space: nowrap; font-size: .92em; }

.display .accent { color: var(--red-lit); }

.display--section + .lede,
.display--section + p { margin-top: clamp(22px, 2.6vw, 30px); }

.lede {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: clamp(1.0938rem, 1.5vw, 1.3125rem);
  line-height: 1.58;
  text-wrap: pretty;
}

/* the one-line nudge under a lede, e.g. "Try one - the map follows." */
.lede--cue {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------- 07 hero */

.hero { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4.5rem, 9vw, 8.5rem); }

.hero__top { display: grid; grid-template-columns: minmax(0, 1fr); }

.hero__intro { max-width: 46rem; min-width: 0; }

/* backlit type: the words fall off very slightly toward their baseline, the
   way lit signage does. Bottom stop still clears 12:1 on the charcoal. */
.display--hero .w {
  display: inline-block;
  background: linear-gradient(180deg, #14161a 0%, #464a52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title__line,
.hero-title__city { display: block; }
.hero-title__line { white-space: nowrap; font-size: clamp(1.75rem, 4vw, 3.25rem); }

/* The only decoration on this page is the product. A slow column of shows,
   masked at both ends so it never competes with the headline. */
.feed { display: none; }

@media (min-width: 1200px) {
  .feed {
    display: block;
    position: relative;
    min-width: 0;
    padding-inline-start: 26px;
    border-inline-start: var(--hair) solid var(--line-soft);
  }

  .feed__win {
    height: 330px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent);
  }

  .feed__track { animation: feedscroll 58s linear infinite; will-change: transform; }

  .feed__track > p {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 10px 0;
    border-bottom: var(--hair) solid var(--line-soft);
    font-size: 0.8125rem;
  }

  .feed .a {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .feed .a > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feed .t {
    flex: 0 0 auto;
    min-width: 3.9em;
    color: var(--red-lit);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .feed b { color: var(--ink-2); font-weight: 600; }
  .feed em { color: var(--ink-4); font-size: 0.7188rem; font-style: normal; }

  .feed__cap {
    margin-top: 10px;
    color: var(--ink-4);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@media (min-width: 1200px) {
  .hero__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 318px);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

@keyframes feedscroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.hero__lede { margin-top: clamp(20px, 2.4vw, 28px); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

@media (max-width: 480px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* asymmetric split — DMO is the wider, first column, and stays first in the
   DOM so the mobile stack order needs no ordering hacks. */
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(40px, 5.5vw, 72px);
  align-items: stretch;
}

@media (max-width: 1023px) {
  .hero__split { grid-template-columns: minmax(0, 1fr); }
}

.route {
  position: relative;
  --mx: 50%;
  --my: 0%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--lift);
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
}

.route:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--lift-hi);
}

.route--primary { border-color: var(--line-strong); }
.route--primary:hover { border-color: var(--red-edge); }

/* a faint wash from the top edge, so the primary route reads as the lit one */
.route--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(211, 47, 47, 0.06), transparent 38%);
}

/* the cursor carries a small pool of light across the panel */
@media (hover: hover) {
  .route::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(320px circle at var(--mx) var(--my),
                rgba(211, 47, 47, 0.11), transparent 62%);
    transition: opacity 0.45s var(--ease);
  }

  .route:hover::before { opacity: 1; }
}

.route > * { position: relative; z-index: 1; }

.route__label {
  margin-bottom: 16px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.route--primary .route__label { color: var(--red-lit); }

.route__mock {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.route__mock { position: relative; }

.route__mock::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  bottom: -8px;
  height: 30px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(211, 47, 47, 0.20), transparent 72%);
  filter: blur(11px);
}

.route__mock .mock { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.route__mock .widget { flex: 1 1 auto; }
.route__mock .appmock__map { flex: 1 1 auto; }

.route__body { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

.route__sub { color: var(--ink-2); font-size: 0.9688rem; }

.route__cta { align-self: flex-start; margin-top: 10px; }

@media (max-width: 480px) {
  .route__cta { align-self: stretch; }
}

/* three text-only proof points with line icons */
.proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--hair) solid var(--line-soft);
}

.proofs li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.proofs svg {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  stroke: var(--red-lit);
  stroke-width: 1.5;
  fill: none;
}

/* ==========================================================================
   08 product mockups — built from markup, not screenshots.
   ========================================================================== */

.mock {
  --mock-line: var(--line);
  min-width: 0;
  border: var(--hair) solid var(--mock-line);
  border-radius: var(--r-md);
  background: var(--panel-hi);
  overflow: hidden;
  box-shadow: var(--lift);
}

.mock__caption {
  margin-top: 10px;
  color: var(--ink-4);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- browser chrome (DMO widget) ----------------------------------- */

/* Linear's product frames have no traffic lights. A quiet address line reads
   as a browser without the skeuomorphic costume. */
.chrome {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: var(--hair) solid var(--mock-line);
  background: #f6f5f3;
}

.chrome__glyph {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  stroke: var(--ink-4);
  stroke-width: 1.4;
  fill: none;
}

.chrome__url {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-3);
  font: 400 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the destination's own brand bar — deliberately neutral, not GigsHQ red:
   the widget wears the client's colours, GigsHQ only signs the footer. */
.destbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: var(--hair) solid var(--mock-line);
  background: var(--panel-hi);
}

.destbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.destbar__mark i {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, #c6c2bc, #9b968f);
}

.destbar__nav {
  display: flex;
  gap: 12px;
  margin-inline-start: auto;
  color: var(--ink-4);
  font-size: 0.6875rem;
}

@media (max-width: 420px) { .destbar__nav { display: none; } }

/* --- widget body: filters + list + map ------------------------------ */

.widget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }

@media (max-width: 700px) { .widget { grid-template-columns: minmax(0, 1fr); } }

.widget__pane { min-width: 0; padding: 17px 16px; }

.widget__pane + .widget__pane {
  border-inline-start: var(--hair) solid var(--mock-line);
}

@media (max-width: 700px) {
  .widget__pane + .widget__pane {
    border-inline-start: 0;
    border-top: var(--hair) solid var(--mock-line);
  }
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.chip {
  padding: 4px 10px;
  border: var(--hair) solid var(--mock-line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.chip[data-on] {
  border-color: var(--red-edge);
  background: var(--red-wash);
  color: var(--red-lit);
}

.evt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: var(--hair) solid var(--line-soft);
}

.evt:first-of-type { border-top: 0; }

.evt__when {
  padding-top: 1px;
  color: var(--red-lit);
  font: 700 0.625rem/1.25 var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.evt__when b { display: block; font-size: 0.9375rem; letter-spacing: -0.01em; }

.evt__act {
  display: block;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evt__meta {
  display: block;
  color: var(--ink-4);
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the map ---------------------------------------------------------
   Drawn, not embedded: an abstract street lattice that reads as a map
   without imitating any specific mapping product. */
.map {
  position: relative;
  min-height: 148px;
  height: 100%;
  border-radius: var(--r-sm);
  background: #eceae6;
  overflow: hidden;
}

.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A light map tile is grey ground with white roads cut through it; the city
   blocks are the negative space between them. Grey roads on a light ground
   render as nothing at all. */
.map__ground { fill: #eceae6; }
.map__park   { fill: #e4e8dd; }
.map__water  { fill: #dce7ee; }

.map__streets {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.6;
  stroke-linecap: square;
}

.map__streets--minor { stroke: #f5f4f1; stroke-width: 1.1; }

.pin {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50% 50% 50% 0;
  background: var(--red);
  transform: rotate(-45deg);
  box-shadow: 0 0 0 1.5px #ffffff, 0 2px 5px -1px rgba(20, 22, 26, 0.35);
}

.pin--soft { background: #8d929c; box-shadow: 0 0 0 1.5px #ffffff; }

.pin--live::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid var(--red);
  border-radius: inherit;
  animation: ping 5.5s var(--ease) infinite;
}

.pin--live:nth-of-type(even)::after { animation-delay: 2.6s; }

@keyframes ping {
  0%, 62%   { opacity: 0; transform: scale(0.6); }
  70%       { opacity: 0.85; transform: scale(1); }
  100%      { opacity: 0; transform: scale(2.1); }
}

/* --- conversational discovery assistant ----------------------------- */

.assistant {
  padding: 17px 16px;
  border-top: var(--hair) solid var(--mock-line);
  background: #faf9f7;
}

.assistant__ask {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: var(--hair) solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-hi);
  color: var(--ink);
  font-size: 0.8125rem;
}

.assistant__ask svg {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  stroke: var(--red-lit);
  stroke-width: 1.6;
  fill: none;
}

.assistant__ask span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant__caret {
  flex: 0 0 auto;
  width: 1px; height: 14px;
  margin-inline-start: -4px;
  background: var(--red);
  animation: blink 1.15s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.assistant__reply {
  margin-top: 13px;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* grounded, clickable results — not paragraphs */
.assistant__hits { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }

.hit {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border: var(--hair) solid var(--mock-line);
  border-radius: var(--r-sm);
  background: var(--panel-hi);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.hit:hover { border-color: var(--line-strong); box-shadow: var(--lift); }

.hit__tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--red-wash);
  color: var(--red-lit);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.hit__txt {
  min-width: 0;
  color: var(--ink);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hit__txt em { color: var(--ink-4); font-style: normal; }

.hit__go { margin-inline-start: auto; color: var(--ink-4); font-size: 0.75rem; }

.poweredby {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-top: var(--hair) solid var(--line-soft);
  color: var(--ink-4);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

.poweredby img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
}

/* --- consumer app mockup -------------------------------------------- */

.appmock__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: var(--hair) solid var(--mock-line);
  background: #f6f5f3;
}

.appmock__search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: var(--hair) solid var(--mock-line);
  border-radius: 999px;
  background: var(--panel-hi);
  color: var(--ink-2);
  font-size: 0.6875rem;
}

.appmock__search svg { flex: 0 0 auto; width: 12px; height: 12px; stroke: var(--ink-3); stroke-width: 1.6; fill: none; }
.appmock__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toggle {
  display: flex;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: #eeece8;
  border: var(--hair) solid var(--mock-line);
}

.toggle span {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.toggle span[data-on] { background: var(--red); color: #fff; }

.appmock__map { position: relative; height: 172px; border-radius: 0; }

/* the editorial anchor: a drawn poster crop, so no stock photography and no
   claim about a real performer. Swap for a licensed shot before launch. */
.poster {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 40%;
  max-width: 132px;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 14px 30px -14px #000;
}

.poster svg { width: 100%; height: 100%; }

.poster__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 9, 0.92));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.appmock__list { padding: 6px 16px 16px; }

/* ======================================================= 09 data layer */

.outcomes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  align-items: center;
  margin-top: clamp(36px, 4.5vw, 56px);
}

.engine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  border: 1px solid var(--red-edge);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--red-wash), transparent);
  text-align: center;
}

.engine__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.14;
}

.engine__note { color: var(--ink-3); font-size: 0.75rem; max-width: 20ch; }

/* the branch: one line out to each outcome, drawn into the grid gap */
.engine::before,
.engine::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(16px, 2.2vw, 30px);
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
}

.engine::before { right: 100%; transform: scaleX(-1); }
.engine::after  { left: 100%; }

.engine__rings { display: flex; gap: 4px; }
.engine__rings i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.35;
}
.engine__rings i:nth-child(2) { opacity: 0.65; }
.engine__rings i:nth-child(3) { opacity: 1; }

.outcome {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.outcome__who {
  margin-bottom: 10px;
  color: var(--red-lit);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.outcome h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  text-transform: uppercase;
  line-height: 1.04;
}

.outcome p { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; }

.outcome ul { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }

.outcome li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.outcome li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--red);
}

@media (max-width: 900px) {
  .outcomes { grid-template-columns: minmax(0, 1fr); }
  .engine { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  .engine::before, .engine::after { display: none; }
}

/* ================================================ 10 destination solution */

.solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 3.5vw, 56px);
  align-items: center;
}

@media (max-width: 980px) {
  .solution { grid-template-columns: minmax(0, 1fr); }
}

.solution__copy { min-width: 0; }
.solution__copy .lede { margin-top: 20px; }

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
  margin-top: 28px;
}

.path {
  min-width: 0;
  padding: 16px;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}

.path__step {
  color: var(--red-lit);
  font: 700 0.6875rem/1 var(--font-text);
  letter-spacing: 0.14em;
}

.path h4 { margin-top: 9px; font-size: 0.9375rem; }
.path p { margin-top: 8px; color: var(--ink-3); font-size: 0.875rem; line-height: 1.55; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 480px) {
  .actions .btn { flex: 1 1 100%; }
}

/* sourced market evidence — every figure carries its study */
.evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: var(--hair) solid var(--line);
}

.evidence .evidence__fig {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 0.92;
  color: var(--ink);
}

.evidence p { margin-top: 8px; color: var(--ink-2); font-size: 0.875rem; }

@media (max-width: 760px) {
  .evidence { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

.evidence cite {
  display: block;
  margin-top: 8px;
  color: var(--ink-4);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.04em;
}

/* =============================================== 11 consumer discovery */

.discover {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 56px);
  align-items: center;
}

@media (max-width: 980px) {
  .discover { grid-template-columns: minmax(0, 1fr); }
}

.discover__map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(30% 34% at 53% 40%, rgba(211, 47, 47, 0.10), transparent 70%),
    radial-gradient(26% 30% at 64% 33%, rgba(211, 47, 47, 0.08), transparent 70%);
}

.discover__map .pin, .discover__map .discover__cards, .discover__map .mapflag { z-index: 2; }

.discover__map {
  position: relative;
  min-height: clamp(290px, 38vw, 440px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #f4f3f1, #eceae7);
}

/* A photograph of the running product, framed. Everything that used to be
   drawn here — the grid, the pins, the event cards — was invented; this is
   what the platform actually renders. */
.shot {
  margin: 0;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--lift-hi);
}

.shot img { display: block; width: 100%; height: auto; }

/* full width, because the screenshot carries real detail — venue names, dates,
   cluster counts — and a half column throws it away */
.shot--wide { margin-top: clamp(36px, 4.5vw, 60px); }

.discover__copy { max-width: 46rem; }
.discover__copy .actions { margin-top: 28px; }

/* the required Mapbox / OpenStreetMap credit. It has to stay legible, so the
   links run at --ink-2 (8:1) rather than the caption's --ink-4. */
.credit { white-space: nowrap; }

.credit a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-strong);
}

.credit a:hover { color: var(--red-lit); text-decoration-color: currentColor; }

@media (max-width: 620px) {
  .credit { display: block; margin-top: 4px; white-space: normal; }
}

.discover__cards {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.discover__cards::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 auto;
  width: min(196px, 74%);
  scroll-snap-align: start;
  padding: 12px;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
}

.card__when {
  color: var(--red-lit);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card h4 { margin-top: 6px; font-size: 0.9375rem; }
.card p { margin-top: 3px; color: var(--ink-4); font-size: 0.75rem; }

/* ------------------------------------------------------------ 12 footer */

.footer {
  border-top: var(--hair) solid var(--line);
  padding-block: clamp(40px, 5vw, 64px) 32px;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-start;
}

.footer__brand { flex: 1 1 220px; min-width: 0; }
.footer__brand .wordmark img { width: 96px; height: 96px; }
.footer__brand p { margin-top: 14px; color: var(--ink-4); font-size: 0.8125rem; max-width: 34ch; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 34px;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.footer__links a:hover { color: var(--ink); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: var(--hair) solid var(--line-soft);
  color: var(--ink-4);
  font-size: 0.75rem;
}

/* ------------------------------------------------------- 13 reveal/motion */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease),
              filter 0.72s var(--ease);
}

.js .reveal[data-seen] { opacity: 1; transform: none; filter: none; }

/* the hero sets itself word by word rather than as one block */
.js .stagger .eyebrow,
.js .stagger .lede,
.js .stagger .hero__actions,
.js .stagger .w {
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(7px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease),
              filter 0.75s var(--ease);
}

.js .stagger .w { transition-delay: calc(var(--i, 0) * 70ms); }
.js .stagger .eyebrow { transition-delay: 0ms; }
.js .stagger .lede { transition-delay: 460ms; }
.js .stagger .hero__actions { transition-delay: 580ms; }

.js .stagger[data-seen] .eyebrow,
.js .stagger[data-seen] .lede,
.js .stagger[data-seen] .hero__actions,
.js .stagger[data-seen] .w { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .stagger .eyebrow,
  .js .stagger .lede,
  .js .stagger .hero__actions,
  .js .stagger .w { opacity: 1; transform: none; filter: none; }
  .backdrop { animation: none; }
  .feed__track { animation: none; }
}

/* --------------------------------------------------------- 14 print */

@media print {
  .backdrop, .backdrop__grid, .backdrop__fx,
  .masthead, .drawer, .mock, .discover__map,
  .demo__asks, .cell__art, .code__tabs { display: none !important; }
  .figure-contour::before, .closer::before { display: none !important; }
  .qa details { display: block; }
  .qa details p { display: block !important; }
  body { background: #fff; color: #000; }
  .display .accent, .eyebrow, .outcome__who, .path__step { color: #000; }
  .display--hero .w { background: none; color: #000; -webkit-text-fill-color: #000; }
  .backdrop__fx svg { display: none !important; }
  .feed { display: none !important; }
  .section { padding-block: 18pt; break-inside: avoid; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* a standing label on the discovery map, the way the live product marks the
   active time window */
.mapflag {
  position: absolute;
  left: 14px; top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: var(--hair) solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mapflag i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* =========================================================================
   15  shared two-column split
   ========================================================================= */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.split--wide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--faq { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; }

@media (max-width: 980px) {
  .split,
  .split--wide,
  .split--faq { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
}

/* =========================================================================
   16  coverage band
   ========================================================================= */

.band {
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-top: var(--hair) solid var(--line-soft);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-top: 6px;
}

@media (max-width: 700px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* proportional figures, never tabular: equal-width digits read loose at
   display sizes and these numbers do not align in a column */
.kpi__fig {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  font-variant-numeric: proportional-nums;
  line-height: 0.94;
  color: var(--ink);
}

.kpi__label {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.band__note {
  max-width: 74ch;
  margin-top: clamp(22px, 3vw, 30px);
  color: var(--ink-4);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* =========================================================================
   17  the gap - notes + the 80% meter
   ========================================================================= */

.notes {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
  margin-top: clamp(30px, 4vw, 44px);
}

.notes li { padding-top: clamp(18px, 2.2vw, 24px); border-top: var(--hair) solid var(--line); }

.notes h4 {
  max-width: 39ch;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.meter {
  min-width: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 38px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--lift);
}

/* the number IS the chart; the track below is supporting geometry, which is
   why this is a meter and not a two-slice pie */
.meter__fig {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 8.5vw, 6.4rem);
  font-variant-numeric: proportional-nums;
  line-height: 0.86;
  color: var(--red-lit);
}

.meter__cap {
  max-width: 40ch;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.meter__cap strong { color: var(--ink); font-weight: 600; }

/* 2px surface gap between the fills, 4px data-ends - no borders drawn to
   separate them */
.meter__track {
  display: flex;
  gap: 2px;
  height: 14px;
  margin-top: clamp(26px, 3vw, 34px);
}

.meter__fill { width: var(--pct); border-radius: 4px; }
.meter__fill--on { background: var(--red); }
.meter__fill--off { background: #868c98; }

.meter__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 15px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.meter__key li { display: flex; align-items: center; gap: 8px; }

.meter__key i {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.meter__key i.on { background: var(--red); }
.meter__key i.off { background: #868c98; }
.meter__key em { color: var(--ink-4); font-style: normal; }

/* =========================================================================
   18  the mechanism
   ========================================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 30px);
  margin-top: clamp(34px, 4.5vw, 52px);
}

@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

.step {
  position: relative;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

@media (min-width: 861px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    width: clamp(16px, 2.6vw, 30px);
    height: 1px;
    background: linear-gradient(90deg, var(--red), transparent);
  }
}

.step__n {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--red-lit);
}

.step__icon {
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  width: 20px; height: 20px;
  stroke: var(--ink-4);
  stroke-width: 1.4;
  fill: none;
}

.step h3 { margin-top: 16px; font-size: 1.0625rem; }
.step p { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }

/* =========================================================================
   19  the interactive assistant
   ========================================================================= */

.demo__asks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.ask {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 16px;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease);
}

.ask:hover { border-color: var(--line-strong); color: var(--ink); }

.ask[aria-selected='true'] {
  border-color: var(--red-edge);
  background: var(--red-wash);
  color: var(--ink);
}

.demo__panel[hidden] { display: none; }
.demo__panel { animation: swapin 0.36s var(--ease); }
.demo__map { height: clamp(200px, 25vw, 260px); border-radius: 0; }

@keyframes swapin {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   20  what you get - bento
   ========================================================================= */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(34px, 4.5vw, 52px);
}

.cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

/* short cells sit their copy on the baseline of the tall one beside them,
   so the extra height reads as deliberate space rather than a gap */
.cell h3,
.cell__paths { margin-top: auto; }

.cell--wide,
.cell--tall { grid-column: span 2; }

.cell h3 { font-size: 1.0625rem; }
.cell h3 em { color: var(--red-lit); font-style: normal; }
.cell p { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }

.cell__art {
  position: relative;
  height: clamp(165px, 19vw, 230px);
  margin-bottom: 22px;
  border: var(--hair) solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #eceae6;
}

.cell__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cell__paths { display: flex; flex-direction: column; gap: 22px; }
.cell__paths h4 { margin-top: 8px; font-size: 0.9688rem; }
.cell__paths p { margin-top: 8px; color: var(--ink-3); font-size: 0.875rem; line-height: 1.55; }

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .cell--wide, .cell--tall { grid-column: span 1; }
}

/* =========================================================================
   21  the API - ticks + tabbed code
   ========================================================================= */

.ticks { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }

.ticks li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 1px; top: 0.42em;
  width: 11px; height: 6px;
  border-inline-start: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: rotate(-45deg);
}

.code {
  min-width: 0;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-hi);
  overflow: hidden;
  box-shadow: var(--lift);
}

.code__tabs {
  display: flex;
  gap: 3px;
  padding: 8px 8px 0;
  background: #faf9f7;
  border-bottom: var(--hair) solid var(--line-soft);
}

.code__tab {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.code__tab:hover { color: var(--ink-2); }

.code__tab[aria-selected='true'] {
  background: var(--panel-hi);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--red);
}

.code__pane {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  font: 400 0.8125rem/1.7 var(--font-mono);
}

.code__pane[hidden] { display: none; }
.code__pane code { display: block; white-space: pre; }

.c-m { color: var(--red-lit); font-weight: 700; }
.c-u,
.c-k { color: var(--ink); }
.c-s { color: var(--ink-2); }
.c-n { color: var(--red-lit); }
.c-p { color: #6d727b; }

/* =========================================================================
   22  questions
   ========================================================================= */

.qa { border-top: var(--hair) solid var(--line); }
.qa details { border-bottom: var(--hair) solid var(--line); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 18px 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-inline-end: 4px;
  border-inline-end: 1.5px solid var(--red-lit);
  border-bottom: 1.5px solid var(--red-lit);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.26s var(--ease);
}

.qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.qa details p {
  max-width: 64ch;
  padding-bottom: 22px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* =========================================================================
   23  closing band
   ========================================================================= */

.closer {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  border-top: var(--hair) solid var(--line);
  background:
    radial-gradient(88% 120% at 50% 0%, rgba(211, 47, 47, 0.07), transparent 62%),
    var(--ground-deep);
}

.closer__inner { text-align: center; }
.closer__inner .eyebrow { justify-content: center; }
.closer__inner .display { max-width: 22ch; margin-inline: auto; }
.closer__lede { max-width: 52ch; margin-inline: auto; margin-top: 22px; }
.closer__actions { justify-content: center; }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 24px;
  max-width: 620px;
  margin: clamp(34px, 4.5vw, 50px) auto 0;
  padding-top: 26px;
  border-top: var(--hair) solid var(--line);
  color: var(--ink-3);
  font-size: 0.875rem;
  font-style: normal;
}

.contact strong { color: var(--ink); font-weight: 600; }

.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  transition: color 0.18s var(--ease);
}

.contact a:hover { color: var(--red-lit); }

/* =========================================================================
   24  background figures
   The brief bans "glowing neon" and "generic gradient blobs". What is left
   that still carries a room is light and structure - so the layers below are
   a stage wash, a structural grid, and two motifs that come from the product
   itself (the territory it covers, the sound it indexes) rather than from a
   component library.
   ========================================================================= */

.backdrop__grid,
.backdrop__fx {
  position: absolute;
  inset: 0;
  display: block;
}

/* A field of dots rather than a ruled grid: on white, ruled lines read as
   graph paper, dots read as texture. Masked in radial so it never reaches an
   edge, and drifting on its own axis so it is never quite still. */
.backdrop__grid {
  background-image:
    radial-gradient(circle at center, rgba(20, 22, 26, 0.085) 1.1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(72% 58% at 50% 26%, #000 4%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 58% at 50% 26%, #000 4%, transparent 78%);
  animation: dotdrift 96s linear infinite;
}

@keyframes dotdrift {
  from { background-position: 0 0; }
  to   { background-position: 26px 52px; }
}

/* --- the curves. Long, slow, barely-there strokes drawn as SVG in the
   markup so they can be dashed and animated; `?bg=` still switches them off
   for comparison. ------------------------------------------------------- */

.backdrop__fx { overflow: hidden; }

.backdrop__fx svg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
}

.backdrop__fx path {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  opacity: 0.16;
  stroke-dasharray: 620 340;
  animation: flow 58s linear infinite;
}

.backdrop__fx path:nth-child(2) { opacity: 0.11; animation-duration: 74s; animation-direction: reverse; }
.backdrop__fx path:nth-child(3) { opacity: 0.13; animation-duration: 66s; animation-delay: -12s; }
.backdrop__fx path:nth-child(4) { stroke: #78829b; opacity: 0.14; animation-duration: 86s; animation-delay: -30s; }
.backdrop__fx path:nth-child(5) { stroke: #78829b; opacity: 0.10; animation-duration: 92s; animation-direction: reverse; }

@keyframes flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -960; }
}

.backdrop__fx[data-bg='dots'] svg { display: none; }
.backdrop__fx[data-bg='plain'] svg { display: none; }
.backdrop[data-bg='plain'] .backdrop__grid { display: none; }

/* --- section-scoped figures, each motivated by the section it sits in ---- */

/* the territory a destination buys, drawn as contour under the product section */
.figure-contour { position: relative; }

.figure-contour::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%2314161a' stroke-width='1' opacity='.07'%3E%3Cpath d='M-20 210 C 60 180 90 240 170 210 S 300 150 440 190'/%3E%3Cpath d='M-20 180 C 70 148 100 208 180 176 S 310 116 440 156'/%3E%3Cpath d='M-20 150 C 80 116 110 176 190 142 S 320 82 440 122'/%3E%3Cpath d='M-20 120 C 90 84 120 144 200 108 S 330 48 440 88'/%3E%3Cpath d='M-20 90 C 100 52 130 112 210 74 S 340 14 440 54'/%3E%3Cpath d='M-20 60 C 110 20 140 80 220 40 S 350 -20 440 20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  mask-image: radial-gradient(70% 60% at 78% 46%, #000 4%, transparent 76%);
  -webkit-mask-image: radial-gradient(70% 60% at 78% 46%, #000 4%, transparent 76%);
}

.figure-contour > .shell { position: relative; z-index: 1; }

/* the closing band signs off on a spectrum ridge - the one figure on this
   page that no other destination-tech site can use honestly */
.closer { position: relative; overflow: hidden; }

.closer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 190px;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    rgba(211, 47, 47, 0.30) 0 3px, transparent 3px 12px);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 600 300'%3E%3Cpath fill='%23000' d='M0 300 L0 250 L12 262 L24 224 L36 246 L48 196 L60 232 L72 258 L84 210 L96 240 L108 180 L120 226 L132 252 L144 216 L156 244 L168 190 L180 234 L192 260 L204 222 L216 248 L228 202 L240 238 L252 264 L264 214 L276 242 L288 186 L300 230 L312 256 L324 218 L336 246 L348 194 L360 236 L372 262 L384 220 L396 250 L408 204 L420 240 L432 266 L444 212 L456 244 L468 188 L480 232 L492 258 L504 224 L516 248 L528 200 L540 238 L552 264 L564 216 L576 246 L588 208 L600 250 L600 300 Z'/%3E%3C/svg%3E"),
    linear-gradient(to top, #000 10%, transparent 90%);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 600 300'%3E%3Cpath fill='%23000' d='M0 300 L0 250 L12 262 L24 224 L36 246 L48 196 L60 232 L72 258 L84 210 L96 240 L108 180 L120 226 L132 252 L144 216 L156 244 L168 190 L180 234 L192 260 L204 222 L216 248 L228 202 L240 238 L252 264 L264 214 L276 242 L288 186 L300 230 L312 256 L324 218 L336 246 L348 194 L360 236 L372 262 L384 220 L396 250 L408 204 L420 240 L432 266 L444 212 L456 244 L468 188 L480 232 L492 258 L504 224 L516 248 L528 200 L540 238 L552 264 L564 216 L576 246 L588 208 L600 250 L600 300 Z'/%3E%3C/svg%3E"),
    linear-gradient(to top, #000 10%, transparent 90%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-position: bottom, bottom;
  -webkit-mask-position: bottom, bottom;
}

.closer__inner { position: relative; z-index: 1; }


/* =========================================================================
   24  product-led hero — the mock sits beside the headline, not below it
   ========================================================================= */

.hero__art { min-width: 0; }

/* Under 1024 the mock stacks; the headline then owns the full measure and can
   run at poster size. Beside the mock it has half the width, so it steps down
   with it — one clamp per layout, never a headline that outgrows its column. */
@media (min-width: 1024px) {
  .hero__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
    gap: clamp(34px, 4vw, 68px);
    align-items: center;
  }

  .hero__intro { max-width: 34rem; }
  .display--hero { font-size: clamp(3rem, 4.4vw, 4.6rem); }
}

@media (max-width: 1023px) {
  .hero__art { margin-top: clamp(38px, 6vw, 58px); max-width: 640px; }
}

/* three facts under the buttons: the smallest possible proof that the thing
   behind the headline is already running */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2.4vw, 30px);
  margin-top: clamp(30px, 3.6vw, 42px);
  padding-top: clamp(20px, 2.4vw, 26px);
  border-top: var(--hair) solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.hero__trust li { display: flex; align-items: baseline; gap: 6px; }
.hero__trust b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* a live marker in the browser bar: the widget is a running surface, not a
   screenshot of one */
.chrome__live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chrome__live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2.8s var(--ease) infinite;
}

@keyframes pulse {
  0%, 70%, 100% { opacity: 1; }
  85%           { opacity: 0.25; }
}

/* the licensed boundary, drawn on the map the way it is drawn at setup */
.map__bounds {
  fill: rgba(211, 47, 47, 0.06);
  stroke: var(--red);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}

/* the map pane bleeds to the card edge; only the list pane is padded */
.widget__pane--map { padding: 0; }
.widget__pane--map .map { height: 100%; min-height: 210px; border-radius: 0; }

@media (max-width: 700px) {
  .widget__pane--map .map { min-height: 180px; }
}

/* =========================================================================
   25  the integration — one line, staged as the product it is
   ========================================================================= */

.lede-block { max-width: 46rem; }

.embed {
  margin-top: clamp(30px, 3.8vw, 48px);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel-hi);
  box-shadow: var(--lift);
  overflow: hidden;
}

.embed__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px 10px 18px;
  border-bottom: var(--hair) solid var(--line-soft);
  background: #faf9f7;
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  background: var(--panel-hi);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease);
}

.copy svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.copy:hover { border-color: var(--red-edge); background: var(--red-wash); color: var(--red-lit); }
.copy[data-done] { border-color: var(--red-edge); background: var(--red-wash); color: var(--red-lit); }

/* the line itself is the largest monospace on the page — it is the promise */
.embed__code {
  padding: clamp(22px, 3.4vw, 40px) clamp(18px, 2.6vw, 30px);
  overflow-x: auto;
  color: var(--ink);
  font: 400 clamp(0.8125rem, 1.35vw, 1.0625rem)/1.7 var(--font-mono);
  -webkit-overflow-scrolling: touch;
}

.embed__code code { display: block; white-space: pre; }

.embed__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(22px, 2.6vw, 30px);
}

@media (max-width: 760px) {
  .embed__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .embed__facts li { padding-block: 16px; }
}

.embed__facts li {
  padding-top: 16px;
  border-top: var(--hair) solid var(--line);
}

.embed__facts b {
  display: block;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.embed__facts span {
  display: block;
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.55;
}

.api-block {
  margin-top: clamp(46px, 6vw, 86px);
  padding-top: clamp(38px, 4.6vw, 62px);
  border-top: var(--hair) solid var(--line-soft);
  align-items: start;
}

.api-block .display--panel + .lede { margin-top: 18px; }

/* =========================================================================
   26  masthead: five routes need more room than two
   ========================================================================= */

@media (max-width: 1160px) {
  .masthead__nav .navlink:nth-child(2),
  .masthead__nav .navlink:nth-child(3) { display: none; }
}

/* =========================================================================
   27  bento tiles: a spec label on every one, a figure where it informs
   ========================================================================= */

/* the label sits at the top of the tile, the copy at the bottom; the space
   between them is what makes a short tile read as deliberate */
.cell__spec {
  margin-bottom: 18px;
  color: var(--ink-4);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cell--wide .cell__spec,
.cell--tall .cell__spec { margin-bottom: 14px; }

/* the 80/20 split, restated at tile scale rather than repeated in words */
.cell__split { margin-top: auto; margin-bottom: 22px; }

.cell__split-bar { display: flex; gap: 3px; height: 7px; }
.cell__split-bar i,
.cell__split-bar b { width: var(--pct); border-radius: 4px; }
.cell__split-bar i { background: var(--red); }
.cell__split-bar b { background: #9298a3; }

.cell__split-key {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  color: var(--ink-4);
  font-size: 0.6875rem;
}

.cell__split-key em { font-style: normal; }

/* what the pipeline reads, as a checklist rather than a sentence */
.cell__srcs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 22px;
  color: var(--ink-3);
  font-size: 0.75rem;
}

.cell__srcs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: var(--hair) solid var(--line-soft);
}

.cell__srcs li:last-child { border-bottom: 0; padding-bottom: 0; }

.cell__srcs i {
  flex: 0 0 auto;
  width: 9px; height: 5px;
  margin-inline-start: auto;
  border-inline-start: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: rotate(-45deg);
}

/* a tile that already carries a figure must not push its heading down twice */
.cell__split + h3,
.cell__srcs + h3 { margin-top: 0; }

/* =========================================================================
   28  the hero widget is live: the chips actually filter it
   ========================================================================= */

.chips button.chip {
  min-height: 26px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              color 0.18s var(--ease);
}

.chips button.chip:hover { border-color: var(--line-strong); color: var(--ink-2); }
.chips button.chip[data-on]:hover { border-color: var(--red-edge); color: var(--red-lit); }

/* the pill stays widget-sized; the touch target does not. A finger gets 44px
   either way, which is the rule the rest of the page keeps. */
.chips button.chip { position: relative; }

.chips button.chip::after {
  content: '';
  position: absolute;
  inset: -9px -4px;
}

.widget__list[hidden],
.map__pins[hidden] { display: none; }

/* the pin layer is a positioning context only; the map underneath owns it */
.map__pins { position: absolute; inset: 0; }
.map__pins .pin, .map__pins .mapflag { z-index: 2; }

/* =========================================================================
   29  micro-interaction — a card knows where the cursor is
   The pool of light is the cheapest way to make a flat card feel like a
   surface. It is decoration only: pointer-events off, and it never runs
   without a real pointer or under reduced motion.
   ========================================================================= */

.cell,
.step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}

.cell::before,
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(211, 47, 47, 0.055), transparent 68%);
  transition: opacity 0.32s var(--ease);
}

@media (hover: hover) {
  .cell:hover,
  .step:hover { border-color: var(--line-strong); }

  .cell:hover::before,
  .step:hover::before { opacity: 1; }
}

/* a listing row is a link in the real product; it should feel like one here */
.evt { transition: background 0.18s var(--ease); }

@media (hover: hover) {
  .widget__list .evt:hover,
  .appmock__list .evt:hover { background: #faf9f7; }
}

@media (hover: hover) {
  .qa summary:hover { color: var(--red-lit); }
}

/* =========================================================================
   30  rhythm — the integration section stands on its own ground
   Ten sections of the same white read as one long scroll. One tinted band,
   on the section the whole page is arguing towards.
   ========================================================================= */

#integration {
  position: relative;
  background: var(--ground-deep);
  border-top: var(--hair) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
}

#integration .embed__label { background: #f5f4f1; }
#integration .code__tabs { background: #f5f4f1; }

/* =========================================================================
   31  measure — a section heading is not a banner
   Full-width headings ran edge to edge on one line at 1440, which reads as a
   masthead rather than a sentence. Constrained, they break where the meaning
   breaks and can carry more weight per line.
   ========================================================================= */

.section > .shell > .display--section,
.section > .shell > .lede-block > .display--section { max-width: 21ch; }

.section > .shell > .display--section + .steps,
.section > .shell > .display--section + .bento { margin-top: clamp(38px, 4.8vw, 60px); }

/* the hero mock earns more of the row, and a deeper contact shadow so it
   sits on the page rather than in it */
@media (min-width: 1024px) {
  .hero__top { grid-template-columns: minmax(0, 1fr) minmax(0, 52%); }
}

.hero__art .mock { box-shadow: var(--lift-hi); }

/* =========================================================================
   32  original editorial imagery — culture revealed by the data layer
   ========================================================================= */

.hero-visual,
.discovery-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  background: #090a0c;
  box-shadow: 0 34px 74px -38px rgba(13, 15, 18, 0.62);
}

.hero-visual {
  aspect-ratio: 3 / 2;
  border-radius: clamp(3px, 0.8vw, 10px);
}

.hero-visual::before,
.discovery-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--hair) rgba(255, 255, 255, 0.22);
}

.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.12), transparent 42%),
    linear-gradient(0deg, rgba(5, 6, 8, 0.48), transparent 38%);
}

.hero-visual picture,
.hero-visual img,
.discovery-visual picture,
.discovery-visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-visual img,
.discovery-visual img {
  object-fit: cover;
}

.hero-visual__caption,
.discovery-visual__caption {
  position: absolute;
  z-index: 2;
  display: grid;
  border-inline-start: 2px solid var(--red);
  background: rgba(8, 9, 11, 0.78);
  color: #fff;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.hero-visual__caption {
  left: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  width: min(46%, 220px);
  padding: clamp(14px, 1.8vw, 20px);
}

.hero-visual__caption span,
.discovery-visual__caption span {
  color: #ef817b;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-visual__caption strong,
.discovery-visual__caption strong {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.75vw, 1.7rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero-visual__caption strong {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
}

.hero-visual__caption small,
.discovery-visual__caption small {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-visual__signal {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);
  right: clamp(12px, 1.8vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: var(--hair) solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 9, 11, 0.64);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-visual__signal i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4b46;
  box-shadow: 0 0 0 5px rgba(239, 75, 70, 0.16);
  animation: pulse 2.8s var(--ease) infinite;
}

.discovery-visual {
  width: min(100%, 520px);
  aspect-ratio: 4 / 5;
  margin-inline-start: auto;
  border-radius: clamp(3px, 0.8vw, 10px);
  overflow: visible;
}

.discovery-visual picture {
  overflow: hidden;
  border-radius: inherit;
}

.discovery-visual::before {
  inset: 0;
  border-radius: inherit;
}

.discovery-visual::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: -12px;
  z-index: -1;
  width: 42%;
  height: 44%;
  border-right: 2px solid rgba(211, 47, 47, 0.72);
  border-bottom: 2px solid rgba(211, 47, 47, 0.72);
}

.discovery-visual__caption {
  right: -1px;
  bottom: clamp(18px, 3vw, 34px);
  width: min(70%, 310px);
  padding: clamp(16px, 2vw, 22px);
}

.discovery-visual__caption strong {
  font-size: clamp(1.5rem, 2.7vw, 2.35rem);
}

@media (max-width: 1023px) {
  .hero-visual { max-width: 760px; }
}

@media (max-width: 760px) {
  .hero-visual__caption { width: min(64%, 250px); }
  .discovery-visual { margin: 42px auto 0; }
}

@media (max-width: 480px) {
  .hero-visual {
    aspect-ratio: 4 / 5;
  }

  .hero-visual img {
    object-position: 68% center;
  }

  .hero-visual__caption {
    right: 14px;
    width: auto;
  }

  .hero-visual__signal { left: 14px; right: auto; }
  .discovery-visual__caption { width: min(82%, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual__signal i { box-shadow: none; animation: none; }
}

/* =========================================================================
   33  map-free proof — answers and coverage are the visual language
   ========================================================================= */

.demo__map { display: none; }

.result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  min-height: clamp(124px, 15vw, 162px);
  padding: clamp(18px, 2.4vw, 28px);
  border-top: var(--hair) solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(100% 160% at 100% 0%, rgba(211, 47, 47, 0.22), transparent 54%),
    #101114;
  color: #fff;
}

.result-head > span {
  color: #ef817b;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.result-head > strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.result-head > small {
  align-self: end;
  max-width: 20ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo__screen .assistant {
  border-top-color: var(--line-soft);
  padding: clamp(18px, 2.2vw, 24px);
}

.demo__screen .assistant__reply {
  margin-top: 0;
  max-width: 48ch;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.demo__screen .hit {
  min-height: 46px;
  border-inline-start: 2px solid transparent;
}

.demo__screen .hit:hover { border-inline-start-color: var(--red); }

.coverage-ledger {
  min-height: clamp(190px, 22vw, 250px);
  margin-bottom: 22px;
  padding: clamp(18px, 2.2vw, 26px);
  border: var(--hair) solid #24262c;
  border-radius: var(--r-md);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(211, 47, 47, 0.20), transparent 50%),
    #101114;
  color: #fff;
  box-shadow: 0 24px 48px -36px rgba(10, 11, 14, 0.72);
}

.coverage-ledger__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: var(--hair) solid rgba(255, 255, 255, 0.15);
}

.coverage-ledger__head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ef817b;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coverage-ledger__head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4b46;
  box-shadow: 0 0 0 5px rgba(239, 75, 70, 0.14);
}

.coverage-ledger__head strong {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coverage-ledger ul { margin-top: 12px; }

.coverage-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  border-bottom: var(--hair) solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.75rem;
}

.coverage-ledger li b {
  color: #ef817b;
  font-size: 0.5938rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cell .coverage-ledger > p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .result-head { min-height: 116px; }
  .result-head > strong { font-size: 4.25rem; }
  .coverage-ledger__head { flex-direction: column; gap: 10px; }
}

/* On phones the cultural image is the arrival, not a reward below the fold. */
@media (max-width: 700px) {
  .hero { padding-top: 0; }

  .hero__top { display: grid; }

  .hero__art {
    grid-row: 1;
    max-width: none;
    margin: 0 calc(var(--pad) * -1);
  }

  .hero-visual {
    max-width: none;
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .hero-visual img { object-position: 64% center; }

  .hero-visual__caption {
    left: var(--pad);
    right: auto;
    bottom: 18px;
    width: min(46%, 180px);
    padding: 12px 14px;
  }

  .hero-visual__caption span,
  .hero-visual__caption small { display: none; }

  .hero-visual__caption strong { margin-top: 0; font-size: 1rem; }

  .hero__intro {
    grid-row: 2;
    position: relative;
    z-index: 2;
    margin-top: -24px;
    padding-top: 34px;
  }

  .hero__intro::before {
    content: '';
    position: absolute;
    inset: 0 calc(var(--pad) * -1) -30px;
    z-index: -1;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.98);
  }
}

/* =========================================================================
   34  Live media system — S3 event carousel + moving list/map preview
   ========================================================================= */

.event-carousel {
  position: relative;
  overflow: hidden;
  border: var(--hair) solid #25272d;
  border-radius: 18px;
  background: #0c0d10;
  color: #fff;
  box-shadow: 0 34px 70px -38px rgba(10, 11, 14, 0.75);
  isolation: isolate;
}

.event-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: inherit;
}

.event-carousel__topline {
  position: absolute;
  inset: 18px 18px auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.event-carousel__demo,
.event-carousel__city {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  background: rgba(8, 9, 12, 0.68);
  backdrop-filter: blur(14px);
}

.event-carousel__viewport {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #111216;
}

.event-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(5%);
  transition: opacity 0.62s var(--ease), transform 0.72s var(--ease);
  pointer-events: none;
}

.event-slide[data-active] {
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.event-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94) contrast(1.04);
  transform: scale(1.025);
  transition: transform 6.4s linear;
}

.event-slide[data-active] img { transform: scale(1.085); }

.event-slide__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 5, 7, 0.16) 18%, transparent 46%),
    linear-gradient(0deg, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.46) 45%, transparent 72%);
}

.event-slide__meta {
  position: absolute;
  inset: auto clamp(20px, 4vw, 34px) clamp(24px, 4.5vw, 38px);
  z-index: 2;
  max-width: 88%;
}

.event-slide__genre {
  display: inline-flex;
  margin-bottom: 10px;
  color: #ff8a85;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-slide h2 {
  max-width: 12ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.event-slide p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.75rem;
}

.event-slide p strong { color: #fff; font-weight: 750; }

.event-carousel__controls {
  display: grid;
  grid-template-columns: 36px minmax(80px, 1fr) auto 36px;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.event-carousel__arrow {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  font-size: 0.875rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.event-carousel__dots { display: flex; align-items: center; gap: 7px; }
.event-carousel__dots button {
  position: relative;
  overflow: hidden;
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
  transition: width 0.25s var(--ease), background 0.25s ease;
}
.event-carousel__dots button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ef4b46;
  transform: scaleX(0);
  transform-origin: left center;
}
.event-carousel__dots button[data-on] {
  width: 42px;
  background: rgba(239, 75, 70, 0.24);
}
.event-carousel__dots button[data-on]::after {
  animation: carousel-progress 5.6s linear forwards;
}
.event-carousel:hover .event-carousel__dots button[data-on]::after,
.event-carousel:focus-within .event-carousel__dots button[data-on]::after {
  animation-play-state: paused;
}
.event-carousel__count { color: rgba(255, 255, 255, 0.48); font-family: var(--font-mono); font-size: 0.6875rem; }
.event-carousel__count b { color: #fff; font-size: 0.8125rem; }
.event-carousel__sample {
  padding: 0 18px 15px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.live-surface__layout { align-items: start; }

.event-browser {
  overflow: hidden;
  border: var(--hair) solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--lift-hi);
}

.event-browser__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: var(--hair) solid var(--line);
  background: #0f1014;
  color: #fff;
}

.event-browser__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.event-browser__brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(211,47,47,.18); }

.view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
}
.view-switch button { min-width: 66px; height: 31px; border-radius: 99px; color: rgba(255,255,255,.64); font-size: .6875rem; font-weight: 700; }
.view-switch button[data-on] { background: #fff; color: #111216; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

.event-browser__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: var(--hair) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.event-browser__filters::-webkit-scrollbar { display: none; }
.event-browser__filters span {
  flex: none;
  padding: 7px 10px;
  border: var(--hair) solid var(--line);
  border-radius: 99px;
  color: var(--ink-2);
  font-size: 0.625rem;
  font-weight: 700;
}
.event-browser__filters span[data-on] { border-color: rgba(211,47,47,.28); background: var(--red-wash); color: var(--red-lit); }
.event-browser__filters b { margin-left: auto; flex: none; color: var(--ink-4); font-size: 0.625rem; font-weight: 650; }

.event-browser__view { height: 542px; }
.event-stream { position: relative; height: 100%; overflow: hidden; background: #f5f5f3; }
.event-stream::before,
.event-stream::after { content: ''; position: absolute; inset: 0 0 auto; z-index: 3; height: 64px; pointer-events: none; background: linear-gradient(#f5f5f3, transparent); }
.event-stream::after { inset: auto 0 0; background: linear-gradient(transparent, #f5f5f3); }
.event-stream__track { animation: event-stream-roll 42s linear infinite; }
.event-stream:hover .event-stream__track,
.event-stream:focus-within .event-stream__track { animation-play-state: paused; }
.event-stream__group { padding: 10px 12px; }

.stream-event {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  margin-bottom: 8px;
  padding: 8px 12px 8px 8px;
  border: var(--hair) solid #e5e4e0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px -16px rgba(20,22,26,.45);
}
.stream-event img { width: 78px; height: 78px; object-fit: cover; border-radius: 7px; background: #ddd; }
.stream-event__copy { min-width: 0; }
.stream-event__time { display: block; margin-bottom: 5px; color: var(--red-lit); font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stream-event h3 { overflow: hidden; color: var(--ink); font-size: .8125rem; font-weight: 760; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.stream-event p { overflow: hidden; margin-top: 5px; color: var(--ink-4); font-size: .6875rem; text-overflow: ellipsis; white-space: nowrap; }
.stream-event__go { color: var(--ink-4); font-size: 1rem; }

@keyframes carousel-progress { to { transform: scaleX(1); } }
@keyframes event-stream-roll { to { transform: translateY(-50%); } }

.event-browser__map { position: relative; overflow: hidden; background: #eeeae4; }
.event-browser__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-map__ground { fill: #f0eee9; }
.city-map__water { fill: #dce9ea; }
.city-map__park { fill: #dce5d7; }
.city-map__blocks { fill: none; stroke: #fff; stroke-width: 12; opacity: .92; }
.city-map__blocks path + path { stroke-width: 6; }
.city-map__district { position: absolute; color: rgba(20,22,26,.38); font-size: .5rem; font-weight: 800; letter-spacing: .17em; }
.event-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #111216;
  color: #fff;
  box-shadow: 0 8px 20px rgba(20,22,26,.24);
  transform: translate(-50%, -50%);
}
.event-pin i { width: 7px; height: 7px; border-radius: 50%; background: #ef4b46; }
.event-pin b { font-size: .625rem; }
.event-pin--small { min-width: 28px; min-height: 28px; padding: 0; justify-content: center; }
.event-pin[data-on] { background: var(--red); transform: translate(-50%, -50%) scale(1.12); }

.map-event {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  overflow: hidden;
  min-height: 124px;
  border-radius: 12px;
  background: rgba(14,15,18,.96);
  color: #fff;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.62);
  backdrop-filter: blur(18px);
}
.map-event img { width: 112px; height: 100%; object-fit: cover; }
.map-event__copy { align-self: center; padding: 15px 18px; min-width: 0; }
.map-event__copy span { color: #ff8a85; font-size: .5938rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.map-event__copy h3 { margin-top: 5px; color: #fff; font-size: 1rem; }
.map-event__copy p { margin-top: 6px; color: rgba(255,255,255,.62); font-size: .6875rem; }

.event-browser__powered { min-height: 48px; margin: 0; padding: 12px 16px; border-top: var(--hair) solid var(--line); }

@media (hover: hover) {
  .event-carousel__arrow:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.10); }
  .stream-event:hover { border-color: rgba(211,47,47,.32); transform: translateX(2px); }
  .event-pin:hover { background: var(--red); }
}

/* Desktop: copy and product become one continuous cinematic surface. */
@media (min-width: 1024px) {
  .hero__top {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    border: var(--hair) solid #25272d;
    border-radius: 20px;
    background: #0c0d10;
    box-shadow: 0 34px 76px -42px rgba(10, 11, 14, 0.78);
  }

  .hero__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: clamp(38px, 4.2vw, 62px);
    background:
      radial-gradient(90% 82% at 0% 100%, rgba(211, 47, 47, 0.13), transparent 58%),
      #0c0d10;
  }

  .hero .eyebrow { color: rgba(255, 255, 255, 0.58); }
  .hero .display--hero .w {
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
  .hero .hero__lede { color: rgba(255, 255, 255, 0.68); }
  .hero .btn--ghost {
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
  }
  .hero .btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.08);
  }
  .hero .hero__trust {
    border-top-color: rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.48);
  }
  .hero .hero__trust b { color: #fff; }

  .hero__art { display: flex; }
  .hero__art .event-carousel {
    flex: 1 1 auto;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: none;
  }
  .hero__art .event-carousel::after { border: 0; border-radius: 0; }
}

@media (max-width: 1023px) {
  .event-carousel { max-width: 760px; }
  .event-browser__view { height: 520px; }
}

@media (max-width: 700px) {
  .event-carousel { max-width: none; border-radius: 0; border-inline: 0; }
  .event-carousel__viewport { aspect-ratio: 16 / 10; }
  .event-slide h2 { max-width: 15ch; font-size: clamp(2rem, 10vw, 3rem); }
  .event-slide__meta { bottom: 20px; }
  .event-carousel__controls { min-height: 54px; padding-block: 8px; }
  .event-carousel__sample { padding-bottom: 11px; }
  .event-browser__view { height: 480px; }
}

@media (max-width: 480px) {
  .event-carousel__topline { inset: 13px 12px auto; }
  .event-carousel__city { display: none; }
  .event-slide__meta { right: 18px; left: 18px; }
  .event-slide__genre { margin-bottom: 6px; font-size: .5625rem; }
  .event-slide p { margin-top: 9px; font-size: .625rem; }
  .event-carousel__controls { grid-template-columns: 32px 1fr auto 32px; gap: 8px; padding-inline: 12px; }
  .event-carousel__arrow { width: 30px; height: 30px; }
  .event-carousel__dots button { width: 12px; }
  .event-carousel__dots button[data-on] { width: 26px; }
  .event-carousel__sample { font-size: .75rem; }
  .event-browser { margin-inline: -4px; border-radius: 12px; }
  .event-browser__bar { min-height: 58px; padding-inline: 12px; }
  .view-switch button { min-width: 58px; }
  .event-browser__filters { padding-inline: 10px; }
  .event-browser__filters b { display: none; }
  .event-browser__view { height: 456px; }
  .stream-event { grid-template-columns: 66px minmax(0,1fr) auto; min-height: 84px; gap: 10px; }
  .stream-event img { width: 66px; height: 66px; }
  .map-event { grid-template-columns: 88px minmax(0,1fr); right: 10px; bottom: 10px; left: 10px; min-height: 106px; }
  .map-event img { width: 88px; }
  .map-event__copy { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .event-stream__track { animation: none; }
  .event-slide,
  .event-slide img { transition: none; }
}