/* DATA FIRST: the four brand patterns as live data. A pinned dark room on capable screens; a stacked room elsewhere. */
.ab-data { position: relative; isolation: isolate; background: radial-gradient(70% 60% at 72% 50%, oklch(0.2 0.06 358 / .55), transparent 70%), var(--ink-0); color: var(--fg); border-top: 1px solid var(--rule-soft); }
.ab-data-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding-block: clamp(88px, 12vh, 140px); }
.motion .ab-data { height: 420vh; }
.motion .ab-data-stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--hd) + 72px) 40px; }

.ab-data-copy { display: grid; gap: 22px; align-content: center; }
.ab-data-copy .h2 { max-width: 14ch; }
.ab-data-lede { color: var(--fg-2); max-width: 46ch; font-size: var(--t-s); line-height: 1.6; }

.ab-data-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ab-data-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; opacity: .5; transition: opacity .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease); }
.ab-data-steps li:hover { opacity: .8; }
.ab-data-steps li.on { opacity: 1; border-color: var(--rule-soft); background: oklch(0.18 0.01 358 / .7); }
.ab-data-steps li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.ab-data-steps i { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; color: var(--fg-3); padding-top: 4px; font-style: normal; }
.ab-data-steps li.on i { color: var(--accent); }
.ab-data-steps small { display: block; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.ab-data-steps b { display: block; font: 700 var(--t-m)/1.15 var(--f-display); }
.ab-data-steps p { margin-top: 0; max-height: 0; overflow: hidden; color: var(--fg-2); font-size: .95rem; line-height: 1.55; transition: max-height .6s var(--ease), margin-top .6s var(--ease); }
.ab-data-steps li.on p { max-height: 8em; margin-top: 8px; }
.ab-data-foot { color: var(--fg-3); font: 400 var(--t-xs)/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }

.ab-data-vis { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; border: 1px solid var(--rule-soft); background: oklch(0.15 0.008 358); box-shadow: 0 60px 120px -50px rgb(0 0 0 / .9); }
.motion .ab-data-vis { aspect-ratio: auto; height: min(74svh, 720px); }
.ab-data-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ab-data-grid { position: absolute; inset: 0; background-image: linear-gradient(oklch(1 0 0 / .035) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.ab-data-tag { position: absolute; left: 20px; top: 18px; z-index: 2; font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); display: flex; gap: 10px; align-items: center; }
.ab-data-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.ab-data-axis { position: absolute; right: 20px; bottom: 16px; z-index: 2; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.ab-data-prog { position: absolute; left: 20px; right: 20px; bottom: 40px; height: 2px; background: oklch(1 0 0 / .08); z-index: 2; border-radius: 2px; overflow: hidden; }
.ab-data-prog span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, .25)); transition: transform .25s linear; }

/* no WebGL or reduced motion: the brand's own pattern files, one at a time */
.ab-data-svg { position: absolute; inset: 0; display: none; }
.ab-data-svg img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; opacity: 0; transition: opacity .6s var(--ease); }
.ab-data-svg img.on { opacity: 1; }
.ab-data.is-flat .ab-data-svg { display: block; }
.ab-data.is-flat canvas { display: none; }

@media (max-width: 900px) {
  .ab-data-stage { grid-template-columns: minmax(0, 1fr); }
  .ab-data-vis { order: -1; }
  .motion .ab-data { height: auto; }
  .motion .ab-data-stage { position: relative; height: auto; padding-block: clamp(88px, 12vh, 140px); }
  .motion .ab-data-vis { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 767px) {
  .ab-data-vis { aspect-ratio: 1 / 1; border-radius: 18px; }
  .motion .ab-data-vis { aspect-ratio: 1 / 1; }
  .ab-data-steps li { min-height: 44px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-data-steps p, .ab-data-steps li, .ab-data-svg img { transition: none; }
}

/* pinned: fit the copy column inside one screen */
@media (min-width: 901px) {
  .motion .ab-data-stage { padding-block: calc(var(--hd) + 56px) 32px; }
  .motion .ab-data-copy { gap: 16px; }
  .motion .ab-data-steps li { padding: 10px 14px; }
  .motion .ab-data-steps b { font-size: 1.2rem; }
}
@media (min-width: 901px) and (max-height: 940px) {
  .motion .ab-data-foot { display: none; }
  .motion .ab-data-lede { font-size: .98rem; }
}