/*
 * /solutions/data-teams — Data Teams.  Page NOUN = CADENCE.
 *
 * Five acts, no SaaS-reflex composition:
 *   1. Oversize asymmetric hero + clock-loop signature SVG
 *   2. Editorial pull-quote rotated -3deg
 *   3. Interactive site-break simulator inside SOLID purple band
 *      with horizontal-wipe clip-path reveal
 *   4. Minimal cadence strip (weekday timeline + NOUN H2)
 *   5. Closer wrapped in purple band that continues into footer
 *
 * Source-of-truth: brief sect 28.2 (H1 / sub / Act 2 H2 verbatim).
 */

@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

/* Cursor portal scope: back-to-top + clock signature */
.back-to-top,
.dt-clock,
.dt-clock * { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   ACT 1 — Oversize asymmetric hero + clock-loop SVG
═══════════════════════════════════════════════════════════ */

.dt-hero {
  position: relative;
  padding: clamp(160px, 20vh, 220px) clamp(24px, 5vw, 56px) clamp(120px, 14vh, 200px);
  background: var(--surface);
  overflow: hidden;
}

.dt-hero-frame {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(48px, 6vw, 80px);
  align-items: center;
}

.dt-hero-text {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}

.dt-hero-kicker { margin: 0; }

/* Asymmetric H1: three lines, each its own size + position. */
.dt-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.dt-hero-h1 > span {
  display: block;
}



.dt-hero-h1-l2 {
  font-size: var(--mkt-hero-xl);
  padding-left: clamp(20px, 6vw, 96px);
  margin-top: clamp(-4px, -0.4vw, -8px);
}
.dt-hero-h1-l2 em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.dt-hero-h1-l3 {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: clamp(20px, 2vh, 32px);
  padding-left: clamp(0px, 2vw, 12px);
}

.dt-hero-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
}

.dt-hero-cta {
  align-items: flex-start;
}

/* Clock-loop signature.  Pure SVG + CSS rotation.  Hover lifts
   the next-run pill. */
.dt-clock {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  justify-self: center;
  color: var(--text-primary);
  width: 100%;
  max-width: 420px;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dt-clock:hover {
  transform: translateY(-4px);
}

.dt-clock-ring {
  width: clamp(220px, 28vw, 380px);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: visible;
}

.dt-clock-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.dt-clock-pointer {
  transform-origin: 120px 120px;
  animation: dt-clock-spin 24s linear infinite;
}

.dt-clock:hover .dt-clock-pointer,
.dt-clock:hover .dt-clock-mon-ripple,
.dt-clock:hover .dt-clock-mon-dot,
.dt-clock:hover .dt-clock-tick--mon,
.dt-clock:hover .dt-clock-label--mon,
.dt-clock:hover .dt-clock-cap-text,
.dt-clock:hover .dt-clock-cap-landed { animation-play-state: paused; }

@keyframes dt-clock-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* "Monday landed" delight beat.  Every 24s the pointer crosses
   the MON tick at the top of the ring.  Five elements share the
   24s cycle so the beat is exactly in sync — the ripple expands,
   the dot pulses, the tick + label brighten, and the cap pill
   briefly swaps "Mon 09:00 ... catalog batch" for "landed".
   All beats fire in the first ~5% of the cycle, just as the
   pointer crosses the top tick. */
.dt-clock-mon-burst { pointer-events: none; }

.dt-clock-mon-ripple {
  transform-origin: 120px 22px;
  transform-box: fill-box;
  opacity: 0;
  animation: dt-clock-mon-ripple 24s linear infinite;
}
@keyframes dt-clock-mon-ripple {
  0%   { transform: scale(0.6); opacity: 0; stroke-width: 1.4; }
  1%   { transform: scale(1);   opacity: 0.9; stroke-width: 1.4; }
  6%   { transform: scale(5.5); opacity: 0;   stroke-width: 0.6; }
  100% { transform: scale(5.5); opacity: 0; }
}

.dt-clock-mon-dot {
  transform-origin: 120px 22px;
  transform-box: fill-box;
  opacity: 0;
  animation: dt-clock-mon-dot 24s linear infinite;
}
@keyframes dt-clock-mon-dot {
  0%   { transform: scale(0.6); opacity: 0; }
  1%   { transform: scale(1);   opacity: 1; }
  4%   { transform: scale(1.6); opacity: 0.7; }
  6%   { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}

.dt-clock-tick--mon {
  animation: dt-clock-mon-tick 24s linear infinite;
}
@keyframes dt-clock-mon-tick {
  0%   { stroke: currentColor; stroke-width: 1.4; }
  1%   { stroke: #7C4FE8;       stroke-width: 2.4; }
  6%   { stroke: #7C4FE8;       stroke-width: 1.6; }
  10%  { stroke: currentColor; stroke-width: 1.4; }
  100% { stroke: currentColor; stroke-width: 1.4; }
}

.dt-clock-label--mon {
  transform-origin: 120px 6px;
  transform-box: fill-box;
  animation: dt-clock-mon-label 24s linear infinite;
}
@keyframes dt-clock-mon-label {
  0%   { fill-opacity: 0.6; transform: scale(1); }
  1%   { fill-opacity: 1;   transform: scale(1.15); fill: #7C4FE8; }
  6%   { fill-opacity: 0.85; transform: scale(1); }
  10%  { fill-opacity: 0.6; transform: scale(1); fill: currentColor; }
  100% { fill-opacity: 0.6; transform: scale(1); }
}

/* Cap pill — text + "landed" stack on top of each other and
   crossfade for ~1.2s at the start of each cycle. */
.dt-clock-cap-value { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 12ch; }
.dt-clock-cap-text,
.dt-clock-cap-landed {
  display: inline-block;
  transition: none;
}
.dt-clock-cap-landed {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C4FE8;
  opacity: 0;
}
.dt-clock-cap-text   { animation: dt-clock-cap-text   24s linear infinite; }
.dt-clock-cap-landed { animation: dt-clock-cap-landed 24s linear infinite; }
@keyframes dt-clock-cap-text {
  0%   { opacity: 1; }
  0.5% { opacity: 0; }
  6%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes dt-clock-cap-landed {
  0%   { opacity: 0; transform: translateY(2px); }
  1%   { opacity: 1; transform: translateY(0); }
  6%   { opacity: 1; transform: translateY(0); }
  8%   { opacity: 0; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .dt-clock-mon-ripple,
  .dt-clock-mon-dot,
  .dt-clock-tick--mon,
  .dt-clock-label--mon,
  .dt-clock-cap-text,
  .dt-clock-cap-landed { animation: none; }
  .dt-clock-cap-landed { display: none; }
}

.dt-clock-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
}

.dt-clock-cap-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.dt-clock-cap-value {
  font-size: 13px;
  color: var(--text-primary);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #7C4FE8 60%, transparent);
  background: color-mix(in srgb, #7C4FE8 10%, transparent);
  transition: background 240ms ease, border-color 240ms ease;
}

.dt-clock:hover .dt-clock-cap-value {
  background: color-mix(in srgb, #7C4FE8 22%, transparent);
  border-color: color-mix(in srgb, #7C4FE8 90%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .dt-clock-pointer { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 2 — Pull-bracket composition (NO rotation).
   Hard asymmetric grid: corner-bracket SVG pinned left, the
   oversized quote text aligns to the RIGHT page edge.
═══════════════════════════════════════════════════════════ */

.dt-quote {
  position: relative;
  padding: clamp(120px, 18vh, 220px) clamp(24px, 5vw, 56px);
  background: var(--surface);
  overflow: hidden;
}

.dt-quote-frame {
  max-width: 1480px;
  margin: 0 auto;
}

.dt-quote-body {
  margin: 0;
  text-align: right;
}

.dt-quote-text {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}

.dt-quote-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--text-primary);
}

/* Word-by-word cascade — each word wrapped in <span class="dt-w">
   by JS at runtime.  Hidden until .is-in is added. */
.dt-quote-text .dt-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
}

.dt-quote[data-dt-quote].is-in .dt-quote-text .dt-w {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .dt-quote-text .dt-w { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 3 — Scroll-driven site-break simulator.
   Sticky-stage: outer min-height 220vh, inner pin sticks to
   top:0 for full viewport while scroll progress (0..1) toggles
   data-broken at 50%.  Saturated purple band fills the pin.
═══════════════════════════════════════════════════════════ */

.dt-break {
  position: relative;
  min-height: 220vh;
  background: #7C4FE8;
  color: #FFFFFF;
  isolation: isolate;
}

.dt-break-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #7C4FE8;
  padding: clamp(56px, 8vh, 96px) 0;
}

.dt-break-band {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 56px);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.dt-break-head {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-break-kicker {
  color: color-mix(in srgb, #FFFFFF 65%, transparent);
}

.dt-break-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  max-width: 22ch;
  text-wrap: balance;
}

.dt-break-h2 em {
  font-style: normal;
  font-weight: 400;
  color: #FFFFFF;
}

.dt-break-demo {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: clamp(20px, 2.4vw, 28px);
  align-items: start;
}

/* Left half: fake site mockup.  Fill removed — hairline border
   alone defines the widget against the saturated purple ground. */
.dt-break-site {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  overflow: hidden;
}

.dt-break-site-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-break-site-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.dt-break-site-url {
  margin-left: 12px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.dt-break-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dt-break-rows > li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-base);
  font-size: 13px;
  color: #FFFFFF;
}
.dt-break-rows > li:first-child { border-top: 0; }

.dt-break-row-name { font-weight: 500; }
.dt-break-row-price,
.dt-break-row-stars {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* Broken-state mockup: rename fields */
.dt-break-demo[data-broken="true"] .dt-break-row-name::before {
  content: "item-";
  opacity: 0.7;
}
.dt-break-demo[data-broken="true"] .dt-break-row-name { text-transform: lowercase; }
.dt-break-demo[data-broken="true"] .dt-break-row-price::before {
  content: "price=";
  opacity: 0.7;
}
.dt-break-demo[data-broken="true"] .dt-break-row-stars::before {
  content: "rating-stars=";
  opacity: 0.7;
}
.dt-break-demo[data-broken="true"] .dt-break-row-stars { white-space: nowrap; }

/* Right half: two output columns */
.dt-break-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.dt-break-col {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dt-break-col-label {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-break-col-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dt-break-col-rows > li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-base);
  font-size: 12px;
  color: #FFFFFF;
  transition: opacity 320ms ease;
}
.dt-break-col-rows > li:first-child { border-top: 0; }
.dt-break-col-rows > li > span:nth-child(2),
.dt-break-col-rows > li > span:nth-child(3) {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12.5px;
}

/* Broken state: "Without" empties out, "With" stays full */
.dt-break-demo[data-broken="true"] .dt-break-col--bad .dt-break-col-rows > li > span { opacity: 0; }

.dt-break-demo[data-broken="true"] .dt-break-col--bad::after {
  content: "× parser error · 0 rows returned";
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 16px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background: color-mix(in srgb, #1D1612 80%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.dt-break-demo[data-broken="true"] .dt-break-col--good .dt-break-col-label::after {
  content: " · 4/4";
  color: #7ADAE6;
}

/* Scroll-progress dial: a thin horizontal bar that fills with
   section scroll progress (0..1).  Flags at each end label
   the two states (stable / broken).  The fill width is set
   by JS via --p custom property. */
.dt-break-progress {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.dt-break-progress-flag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #FFFFFF 75%, transparent);
}

.dt-break-progress-track {
  grid-column: 2;
  grid-row: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  width: 100%;
}

.dt-break-progress-fill {
  grid-column: 2;
  grid-row: 1;
  height: 2px;
  background: #FFFFFF;
  border-radius: 999px;
  width: calc(var(--p, 0) * 100%);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow 240ms ease, background 240ms ease;
}

.dt-break-demo[data-broken="true"] .dt-break-progress-fill {
  background: #7ADAE6;
  box-shadow: 0 0 12px 2px rgba(122, 218, 230, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   ACT 4 — Minimal cadence strip
═══════════════════════════════════════════════════════════ */

.dt-cadence {
  position: relative;
  padding: clamp(120px, 18vh, 220px) clamp(24px, 5vw, 56px);
  background: var(--surface);
}

.dt-cadence-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vh, 96px);
}

.dt-cadence-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 56ch;
}

.dt-cadence-kicker {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dt-cadence-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.dt-cadence-h2 em {
  font-style: normal;
  font-weight: 400;
}

.dt-cadence-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--border-subtle);
}

.dt-cadence-day {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) clamp(8px, 1vw, 16px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  align-items: flex-start;
  min-height: clamp(160px, 22vh, 220px);
  border-right: 1px solid var(--border-subtle);
}

.dt-cadence-day:last-child { border-right: 0; }
.dt-cadence-day--weekend .dt-cadence-d { color: var(--text-quaternary); }

.dt-cadence-d {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.dt-cadence-pins {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pins land on a loop — each pin runs a 5s cycle: drop from
   above with overshoot, hold visible, fade downward (as if data
   flows through the pipeline), reset.  Per-day + per-pin delays
   stagger the cascade across the week, then the wave restarts.
   Animation is paused until the section enters the viewport. */
.dt-cadence-pins i {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-primary);
  opacity: 0;
  transform: translateY(-16px);
  animation: dt-cadence-pin-loop 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-play-state: paused;
}

.dt-cadence.is-in .dt-cadence-pins i {
  animation-play-state: running;
}

@keyframes dt-cadence-pin-loop {
  /* Land: drop in + overshoot */
  0%   { opacity: 0;   transform: translateY(-16px); }
  20%  { opacity: 0.7; transform: translateY(0); }
  /* Held visible — the "datasets sit on schedule" beat */
  65%  { opacity: 0.7; transform: translateY(0); }
  /* Flow through: fade downward as if the data leaves the pipeline */
  85%  { opacity: 0;   transform: translateY(14px); }
  /* Snap back invisible above, ready for next cycle */
  86%  { opacity: 0;   transform: translateY(-16px); }
  100% { opacity: 0;   transform: translateY(-16px); }
}

/* Per-day + per-pin land delays.  The whole week cascades over
   ~1.3s, then loops every 5s. */
.dt-cadence-day:nth-child(1) .dt-cadence-pins i:nth-child(1) { animation-delay: 100ms; }
.dt-cadence-day:nth-child(1) .dt-cadence-pins i:nth-child(2) { animation-delay: 220ms; }
.dt-cadence-day:nth-child(2) .dt-cadence-pins i:nth-child(1) { animation-delay: 360ms; }
.dt-cadence-day:nth-child(3) .dt-cadence-pins i:nth-child(1) { animation-delay: 520ms; }
.dt-cadence-day:nth-child(3) .dt-cadence-pins i:nth-child(2) { animation-delay: 620ms; }
.dt-cadence-day:nth-child(3) .dt-cadence-pins i:nth-child(3) { animation-delay: 720ms; }
.dt-cadence-day:nth-child(4) .dt-cadence-pins i:nth-child(1) { animation-delay: 880ms; }
.dt-cadence-day:nth-child(5) .dt-cadence-pins i:nth-child(1) { animation-delay: 1040ms; }
.dt-cadence-day:nth-child(5) .dt-cadence-pins i:nth-child(2) { animation-delay: 1140ms; }
.dt-cadence-day:nth-child(6) .dt-cadence-pins i:nth-child(1) { animation-delay: 1300ms; }
.dt-cadence-day:nth-child(7) .dt-cadence-pins i:nth-child(1) { animation-delay: 1460ms; }

/* The highlighted Wednesday pin — brand purple, full opacity
   at its hold position so it stands out from the dim ones. */
.dt-cadence-day:nth-child(3) .dt-cadence-pins i:nth-child(2) {
  background: #7C4FE8;
  animation-name: dt-cadence-pin-loop-bright;
}

@keyframes dt-cadence-pin-loop-bright {
  0%   { opacity: 0; transform: translateY(-16px); }
  20%  { opacity: 1; transform: translateY(0); }
  65%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 0; transform: translateY(14px); }
  86%  { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* H2 italic phrase keeps the brand-purple underline, drawn on
   first viewport enter and held thereafter. */
.dt-cadence-h2 em {
  position: relative;
}
.dt-cadence-h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  background: #7C4FE8;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) 1400ms;
}
.dt-cadence.is-in .dt-cadence-h2 em::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .dt-cadence-pins i { animation: none; opacity: 0.7; transform: none; }
  .dt-cadence-day:nth-child(3) .dt-cadence-pins i:nth-child(2) { opacity: 1; }
  .dt-cadence-h2 em::after { transition: none; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════
   ACT 5 + Footer — Mesh-gradient band wrapping both
   Teal base + 4 drifting colour bubbles for the watercolor
   look (pattern from /workflows/serp-monitoring sm-end-mesh).
═══════════════════════════════════════════════════════════ */

.dt-end {
  position: relative;
  z-index: 1;
  padding: clamp(140px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(120px, 14vh, 200px);
  display: flex;
  justify-content: center;
  text-align: center;
}

.dt-end-frame {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vh, 40px);
}

.dt-end-kicker {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.dt-end-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.dt-end-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}

.dt-end-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
}

.dt-end-cta { margin-top: clamp(20px, 3vh, 36px); }

[data-act="5"] .cta-stack-tag {
  color: rgba(255, 255, 255, 0.55);
}

/* Closer reveal stagger */
.dt-end-frame[data-dt-end] > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.dt-end-frame[data-dt-end].is-in > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.dt-end-frame[data-dt-end].is-in > *:nth-child(1) { transition-delay: 0ms; }
.dt-end-frame[data-dt-end].is-in > *:nth-child(2) { transition-delay: 120ms; }
.dt-end-frame[data-dt-end].is-in > *:nth-child(3) { transition-delay: 280ms; }
.dt-end-frame[data-dt-end].is-in > *:nth-child(4) { transition-delay: 420ms; }

/* Topbar / chrome inversion on the SATURATED PURPLE band (.dt-break,
   Act 3 site-break simulator).  Purple is a DARK saturated colour
   so the chrome flips the other way from teal/mesh: white text on
   the purple band.  Hardcoded #FFFFFF — theme-invariant since the
   band is the same #7C4FE8 in both audiences.  Pablo 2026-06-15
   flagged that data-teams' purple band had no topbar adaptation. */

/* The footer now sits on the page's dark ground (outside the mesh band),
   so it uses the universal light-on-dark footer styling — no per-page
   inversion needed. The mesh band wraps the closer only. */

/* ═══════════════════════════════════════════════════════════
   Wide-desktop tiers (1600 / 1920 / 2400)
═══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .dt-hero-frame { max-width: 1640px; }
  
  .dt-break-h2 { font-size: var(--mkt-h2); }
  
  
  .dt-clock-ring { width: clamp(280px, 26vw, 440px); }
}

@media (min-width: 1920px) {
  .dt-hero-frame { max-width: 1840px; }
  .dt-hero-h1-l1, 
}

@media (min-width: 2400px) {
  .dt-hero-frame { max-width: 2160px; }
}

/* ═══════════════════════════════════════════════════════════
   Responsive collapses
═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .dt-hero-frame { grid-template-columns: 1fr; }
  .dt-clock { justify-self: flex-start; }
  .dt-break-demo { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .dt-hero { padding: clamp(120px, 14vh, 160px) clamp(20px, 5vw, 28px) clamp(80px, 10vh, 120px); }
  .dt-hero-h1-l1, 
  .dt-hero-h1-l2 { padding-left: clamp(16px, 6vw, 32px); }
  .dt-hero-h1-l3 { font-size: 11px; }
  .dt-hero-sub { font-size: 14px; }

  .dt-quote { padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 28px); }
  

  .dt-break { min-height: 0; }
  .dt-break-pin { position: static; min-height: 0; padding: clamp(80px, 12vh, 120px) 0; }
  .dt-break-band { padding: 0 clamp(20px, 5vw, 28px); }
  .dt-break-h2 { font-size: var(--mkt-h3); }
  .dt-break-cols { grid-template-columns: 1fr; }
  .dt-break-rows > li,
  .dt-break-col-rows > li { font-size: 12.5px; padding: 12px 14px; }
  /* On phones, drop sticky and just flip the broken state once
     as the section enters the viewport (no scroll-driven). */
  .dt-break-progress { display: none; }

  .dt-cadence { padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 28px); }
  
  .dt-cadence-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--border-subtle); }
  .dt-cadence-day { border-bottom: 1px solid var(--border-subtle); min-height: 120px; }

  .dt-end { padding: clamp(120px, 16vh, 160px) clamp(20px, 5vw, 28px) clamp(96px, 12vh, 140px); }
  
  .dt-end-sub { font-size: 14px; }
}

@media (max-width: 480px) {
  .dt-cadence-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dt-clock-pointer { animation: none; }
  .dt-mesh-bubble { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  Body bg recess + non-saturated-band
   rgba-white chromes flipped to warm-dark alphas.
   --font-display auto-flips to Mq12 via DS-level override.
   The .dt-break saturated purple band (Act 3) + closer mesh
   keep their #FFFFFF chrome — saturated brand bands are
   theme-invariant.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

/* Teal text on light bg — break-col good label flip. */
html:not(.dark) .dt-break-demo[data-broken="true"] .dt-break-col--good .dt-break-col-label::after {
  color: #1C9E97;
}