/* ==========================================================================
   PPC — page visuals
   targeting pipeline (hero), budget split (intro), editorial channel rows,
   scroll-stepped campaign system, A/B tests, metric formulas, click field (cinematic)
   ========================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --hit: #ff8a3d; --hit-soft: rgb(255 138 61 / 0.16); --hit-ink: #c2551b; }
.ppc-title { font-size: clamp(3rem, 0.4rem + 8.4vw, 11rem); }
.d-glow--ppc {
  inset: -4% 4% 42%;
  background:
    radial-gradient(34% 55% at 20% 58%, rgb(58 126 246 / 0.45), transparent 70%),
    radial-gradient(38% 58% at 52% 44%, rgb(107 63 212 / 0.45), transparent 70%),
    radial-gradient(30% 50% at 88% 52%, rgb(255 138 61 / 0.3), transparent 70%);
}

/* ==========================================================================
   Hero — audience → campaign → click → landing page → conversion
   ========================================================================== */
.hq { --px: 0; --py: 0; position: relative; max-width: 80rem; margin-inline: auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.12); border-radius: clamp(1rem, 1.6vw, 1.75rem); background: #05060a; color: var(--white); }
.hq__bar { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.hq__run { flex: 1; }
.hq__live { display: inline-flex; align-items: center; gap: 0.5rem; color: #ffb27a; }
.hq__live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--hit); }
.hq__canvas { position: relative; aspect-ratio: 1000 / 420; container-type: inline-size; translate: calc(var(--px) * 6px) calc(var(--py) * 4px); }
.hq__plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hq__field { fill: rgb(91 150 255 / 0.04); stroke: rgb(255 255 255 / 0.09); stroke-dasharray: 3 5; }
.hd { fill: rgb(255 255 255 / 0.3); }
.hd.is-match { fill: var(--blue-bright); }
.hq__rail { fill: none; stroke: rgb(255 255 255 / 0.08); stroke-width: 1.5; }
.hs { fill: none; stroke: var(--blue-bright); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 calc(var(--gap) * 1px); }
.hs--b { stroke: #9b7cf0; }
.hs--hot { stroke: var(--hit); }

.hq__reticle { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 13cqi; aspect-ratio: 1; border: 1px solid rgb(91 150 255 / 0.6); border-radius: 50%; translate: -50% -50%; }
.hq__reticle::before, .hq__reticle::after { content: ""; position: absolute; background: linear-gradient(90deg, rgb(91 150 255 / 0.75) 0 16%, transparent 16% 84%, rgb(91 150 255 / 0.75) 84%); }
.hq__reticle::before { left: -12%; right: -12%; top: 50%; height: 1px; }
.hq__reticle::after { top: -12%; bottom: -12%; left: 50%; width: 1px; background: linear-gradient(rgb(91 150 255 / 0.75) 0 16%, transparent 16% 84%, rgb(91 150 255 / 0.75) 84%); }
.hq__reticle i { position: absolute; inset: 20%; border: 1px dashed rgb(91 150 255 / 0.45); border-radius: 50%; }

.hn2 { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; }
.hn2__ad { display: grid; gap: 0.45cqi; width: 11cqi; padding: 0.9cqi 1cqi; border-radius: 1cqi; background: #fff; color: #202124; box-shadow: 0 1.5cqi 3cqi rgb(0 0 0 / 0.5); }
.hn2__ad small { font: 700 max(0.5rem, 0.75cqi)/1 var(--mono); letter-spacing: 0.06em; color: #5f6368; }
.hn2__ad b { font-size: max(0.58rem, 1.05cqi); font-weight: 600; line-height: 1.15; color: #1a0dab; }
.hn2__ad i { height: 0.45cqi; border-radius: 99em; background: rgb(0 0 0 / 0.12); }
.hn2__ad i:last-of-type { width: 70%; }
.hn2__ad em { justify-self: start; margin-top: 0.2cqi; padding: 0.25cqi 0.5cqi; border-radius: 99em; background: var(--hit-soft); font: 600 max(0.5rem, 0.78cqi)/1 var(--mono); font-style: normal; color: var(--hit-ink); }
.hn2--click { width: 6cqi; aspect-ratio: 1; }
.hn2__ring { position: absolute; inset: 0; border: 1px solid rgb(255 138 61 / 0.7); border-radius: 50%; }
.hn2__ring--2 { inset: 22%; background: rgb(255 138 61 / 0.2); }
.hn2__cursor { position: absolute; left: 44%; top: 40%; width: 2.2cqi; fill: #fff; stroke: #05060a; stroke-width: 1.2; }
.hn2__page { display: grid; gap: 0.5cqi; width: 12cqi; padding: 0.9cqi; border-radius: 1cqi; background: #fbfbfa; box-shadow: 0 1.5cqi 3cqi rgb(0 0 0 / 0.5); }
.hn2__page i { height: 0.45cqi; border-radius: 99em; background: rgb(0 0 0 / 0.12); }
.hn2__page .hn2__nav { height: 0.6cqi; margin-bottom: 0.3cqi; background: rgb(0 0 0 / 0.08); }
.hn2__page b { width: 80%; height: 1.1cqi; border-radius: 99em; background: #141414; }
.hn2__page u { justify-self: start; margin-top: 0.3cqi; padding: 0.45cqi 0.8cqi; border-radius: 99em; background: var(--hit); font-size: max(0.5rem, 0.8cqi); font-weight: 600; line-height: 1; text-decoration: none; color: #fff; }
.hn2--conv { display: grid; justify-items: center; }
.hn2__check { display: grid; place-items: center; width: 6.8cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 138 61 / 0.25), rgb(255 138 61 / 0.05)); box-shadow: 0 0 0 0.3cqi var(--hit); }
.hn2__check svg { width: 50%; fill: none; stroke: #ffb27a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; }
.hn2__plus { position: absolute; left: 50%; top: -1.2cqi; translate: -50% -100%; font: 700 max(0.6rem, 1.2cqi)/1 var(--mono); font-style: normal; color: var(--hit); }
.hq__chip { position: absolute; left: calc(var(--x) * 1%); top: 7%; translate: -50% -50%; padding: 0.45cqi 0.8cqi; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 99em; background: rgb(255 255 255 / 0.04); font: 500 max(0.56rem, 0.95cqi)/1 var(--mono); color: rgb(255 255 255 / 0.75); white-space: nowrap; }
.hq__chip--hot { border-color: rgb(255 138 61 / 0.5); color: #ffb27a; }
.hq__label { position: absolute; left: calc(var(--x) * 1%); top: 89%; translate: -50% 0; display: flex; align-items: baseline; gap: 0.5cqi; font-size: max(0.72rem, 1.35cqi); font-weight: 600; white-space: nowrap; }
.hq__label b { font: 600 max(0.55rem, 0.9cqi)/1 var(--mono); color: rgb(255 255 255 / 0.45); }
.hq__legend { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hs { animation: hs-flow calc(var(--gap) * 0.06s) linear infinite; }
  .hd { animation: hd-tw 3.2s ease-in-out infinite; animation-delay: calc(var(--j) * -0.46s); }
  .hq__reticle { animation: hq-drift 7s var(--ease-in-out) infinite; }
  .hq__reticle i { animation: hq-spin 14s linear infinite; }
  .hn2__ring { animation: hq-ripple 2.4s var(--ease-out) infinite; }
  .hn2__cursor { animation: hq-tap 2.4s var(--ease-out) infinite; }
  .hn2__page u { animation: hq-cta 2.4s ease-in-out infinite 0.6s; }
  .hn2__check svg { animation: hq-check 3.6s var(--ease-out) infinite; }
  .hn2__plus { animation: hq-plus 3.6s var(--ease-out) infinite; }
  .d-hero.is-paused .hq *, .d-hero.is-paused .hq *::before, .d-hero.is-paused .hq *::after { animation-play-state: paused; }
  @keyframes hs-flow { to { stroke-dashoffset: calc(var(--gap) * -1px); } }
  @keyframes hd-tw { 50% { opacity: 0.45; } }
  @keyframes hq-drift { 0%, 100% { translate: -50% -50%; } 35% { translate: -44% -56%; } 70% { translate: -55% -46%; } }
  @keyframes hq-spin { to { rotate: 360deg; } }
  @keyframes hq-ripple { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
  @keyframes hq-tap { 0%, 10% { transform: none; } 16% { transform: scale(0.82); } 26%, 100% { transform: none; } }
  @keyframes hq-cta { 50% { box-shadow: 0 0 0 0.5cqi rgb(255 138 61 / 0.3); } }
  @keyframes hq-check { 0% { stroke-dashoffset: 22; } 25%, 100% { stroke-dashoffset: 0; } }
  @keyframes hq-plus { 0%, 20% { opacity: 0; transform: translate3d(0, 1cqi, 0); } 32%, 72% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translate3d(0, -1cqi, 0); } }
}

/* ==========================================================================
   Intro — where the budget goes
   ========================================================================== */
.spend { max-width: 64rem; margin: clamp(3.5rem, 6.5vw, 6.5rem) auto 0; text-align: left; }
.spend__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--black); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); font-weight: 600; letter-spacing: -0.02em; }
.spend__head small { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8a8a8a; }
.spend__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--border-light); }
.spend__k { font: 600 var(--fs-small)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #5e5e5e; }
.spend__bar { display: flex; gap: 3px; height: clamp(2.6rem, 4vw, 3.4rem); }
.spend__seg { display: flex; flex: 0 1 var(--w); align-items: center; min-width: 0; padding-inline: 0.8rem; overflow: hidden; border-radius: 0.45rem; transform-origin: 0 50%; }
.spend__seg em { overflow: hidden; font-size: 0.8rem; font-style: normal; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.spend__seg--junk { background: repeating-linear-gradient(135deg, #d8d8d4 0 6px, #cdcdc9 6px 12px); color: #5e5e5e; }
.spend__seg--untested { background: #c6c6c2; color: #4d4d4d; }
.spend__seg--blind { background: #b3b3af; color: #333; }
.spend__seg--good { background: linear-gradient(90deg, var(--blue), var(--purple) 70%, var(--hit)); color: #fff; }
.ppc-intro .d-traits { margin-top: clamp(3rem, 5.5vw, 5.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .spend .spend__seg { transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.3s; }
  .js .spend .spend__row + .spend__row .spend__seg { transition-delay: 0.9s; }
  .js .spend.is-in .spend__seg { transform: none; }
}

/* ==========================================================================
   Channels — large editorial rows
   ========================================================================== */
.chn { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.chn__list { margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid rgb(255 255 255 / 0.25); }
.chn__item { position: relative; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.chn__link { position: relative; display: grid; grid-template-columns: clamp(3rem, 5vw, 5rem) minmax(0, 1fr) minmax(0, 0.45fr) 3.5rem; align-items: center; gap: 1rem clamp(1rem, 3vw, 3rem); padding-block: clamp(1.75rem, 3.2vw, 3.25rem); }
.chn__link:focus-visible { outline-offset: -2px; }
.chn__n { align-self: start; padding-top: 0.9rem; font: 600 var(--fs-small)/1 var(--mono); color: rgb(255 255 255 / 0.4); transition: color 0.35s; }
.chn__main { display: grid; gap: 0.75rem; }
.chn__title { font-size: clamp(2.6rem, 1rem + 5.2vw, 7.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; transition: transform 0.8s var(--ease-out), color 0.4s; }
.chn__text { max-width: 34em; font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.1rem); line-height: 1.45; color: rgb(255 255 255 / 0.55); }
.chn__formats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; transition: opacity 0.35s; }
.chn__formats em { padding: 0.4rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 99em; font: 500 0.74rem/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.7); }
.chn__arrow { justify-self: end; display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
.chn__arrow svg { width: 1.3rem; height: 0.65rem; rotate: -45deg; transition: rotate 0.6s var(--ease-out); }
.chn__peek { position: absolute; right: 5.5rem; top: 50%; z-index: 2; width: min(23rem, 32%); opacity: 0; pointer-events: none; translate: 0 -50%; transform: translate3d(1.5rem, 0, 0) rotate(3deg) scale(0.95); transition: opacity 0.35s var(--ease-soft), transform 0.7s var(--ease-out); }
@media (hover: hover) {
  .chn__link:is(:hover, :focus-visible) .chn__title { transform: translateX(clamp(0.5rem, 1.5vw, 1.5rem)); }
  .chn__list:hover .chn__item:not(:hover) .chn__title { color: rgb(255 255 255 / 0.32); }
  .chn__link:is(:hover, :focus-visible) .chn__n { color: var(--hit); }
  .chn__link:is(:hover, :focus-visible) .chn__formats { opacity: 0; }
  .chn__link:is(:hover, :focus-visible) .chn__peek { opacity: 1; transform: none; }
  .chn__link:is(:hover, :focus-visible) .chn__arrow { border-color: var(--hit); background: var(--hit); color: #111; }
  .chn__link:is(:hover, :focus-visible) .chn__arrow svg { rotate: 0deg; }
}
@media (hover: none) {
  .chn__peek { position: static; grid-column: 2 / -1; width: auto; max-width: 24rem; opacity: 1; translate: none; transform: none; }
}

.pk { display: grid; gap: 0.6rem; padding: 1rem; border-radius: 1rem; background: #fff; color: #202124; box-shadow: 0 2rem 3rem -1rem rgb(0 0 0 / 0.65); }
.pk__q { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.85rem; border-radius: 99em; box-shadow: 0 1px 5px rgb(0 0 0 / 0.15); font-size: 0.8rem; }
.pk__q i { width: 0.75rem; height: 0.75rem; border: 2px solid #9aa0a6; border-radius: 50%; }
.pk__ad { display: grid; gap: 0.25rem; }
.pk__ad small { font-size: 0.7rem; color: #4d5156; }
.pk__ad small b { font-weight: 700; color: #202124; }
.pk__h { font-size: 0.98rem; font-weight: 400; line-height: 1.25; color: #1a0dab; }
.pk__d { font-size: 0.76rem; line-height: 1.4; color: #4d5156; }
.pk__links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.2rem; }
.pk__links em { font-size: 0.74rem; font-style: normal; color: #1a0dab; }
.pk--social { padding: 0.8rem; }
.pk__who { display: flex; align-items: center; gap: 0.5rem; }
.pk__who i { width: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); }
.pk__who b { font-size: 0.82rem; }
.pk__who small { margin-left: auto; font-size: 0.7rem; color: #65676b; }
.pk__img { display: grid; place-items: end start; aspect-ratio: 16 / 9; padding: 0.7rem; border-radius: 0.6rem; background: radial-gradient(circle at 76% 34%, #ffb27a 0 13%, transparent 13.5%), linear-gradient(135deg, #3a7ef6, #6b3fd4); }
.pk__img em { font-size: 1.05rem; font-style: normal; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pk__cta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pk__cta b { font-size: 0.85rem; }
.pk__cta em { padding: 0.4rem 0.75rem; border-radius: 0.45rem; background: #e4e6eb; font-size: 0.76rem; font-style: normal; font-weight: 600; }
.pk--pmax, .pk--ai { background: #10121a; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 2rem 3rem -1rem rgb(0 0 0 / 0.65); }
.pk__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 3.4rem; gap: 0.4rem; }
.pk__tiles i { position: relative; border-radius: 0.45rem; }
.pk__tiles i:nth-child(1) { grid-column: span 2; background: linear-gradient(135deg, #3a7ef6, #6b3fd4); }
.pk__tiles i:nth-child(2) { background: linear-gradient(160deg, #ffb27a, var(--hit)); }
.pk__tiles i:nth-child(3) { background: #fff linear-gradient(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.14)) 0.5rem 0.6rem / 60% 0.3rem no-repeat; }
.pk__tiles i:nth-child(4) { background: #1b1e29; }
.pk__tiles i:nth-child(4)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 1rem; translate: -40% -50%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pk__tiles i:nth-child(5) { background: linear-gradient(135deg, #9be15d, #3f8f55); }
.pk__tiles i:nth-child(6) { background: linear-gradient(135deg, #c9a4ff, #6b3fd4); }
.pk__pill { display: flex; align-items: center; gap: 0.5rem; font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.7); }
.pk__pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hit); }
.pk__ask { justify-self: end; max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: rgb(255 255 255 / 0.1); font-size: 0.8rem; }
.pk__ans { display: grid; gap: 0.4rem; }
.pk__ans > i { height: 0.45rem; border-radius: 99em; background: rgb(255 255 255 / 0.16); }
.pk__ans > i:nth-child(2) { width: 86%; }
.pk__ans > i:nth-child(3) { width: 64%; }
.pk__sug { display: grid; gap: 0.2rem; margin-top: 0.3rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem; background: rgb(255 138 61 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 138 61 / 0.4); }
.pk__sug small { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #ffb27a; }
.pk__sug b { font-size: 0.92rem; }
.pk__sug em { font-size: 0.76rem; font-style: normal; color: rgb(255 255 255 / 0.6); }

/* ==========================================================================
   Campaign system — six stages, stepped by scroll (js/detail.js [data-flow])
   ========================================================================== */
.cs { position: relative; background: var(--off-white); color: var(--black); }
.cs .flow__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.cs .flow__title { margin-top: 1rem; font-size: clamp(2rem, 0.9rem + 2.8vw, 4.25rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; }
.cs .flow__title .mask { display: block; width: fit-content; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.cs .flow__status { font: 500 var(--fs-small)/1 var(--mono); letter-spacing: 0.04em; color: var(--blue); white-space: nowrap; }
.cs__copy { display: grid; }
.cs__panel { grid-area: 1 / 1; align-self: center; }
.cs__n { display: block; font-size: clamp(3.5rem, 2rem + 4vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.2px rgb(0 0 0 / 0.25); }
.cs__h { margin-top: 0.4rem; font-size: clamp(2rem, 1.1rem + 2.4vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.cs__p { max-width: 26em; margin-top: 1rem; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); line-height: 1.5; color: #4d4d4d; }
.cs__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; }
.cs__facts li { padding: 0.42rem 0.75rem; border: 1px solid rgb(0 0 0 / 0.14); border-radius: 99em; font: 500 0.74rem/1 var(--mono); color: #4d4d4d; }
.cs__chain { position: relative; padding: 0 2.25rem 0 2rem; }
.cs__chain ol { display: grid; gap: clamp(0.4rem, 1vh, 0.7rem); }
.cs .flow__rail { position: absolute; left: 0.5rem; top: 1.5rem; bottom: 1.5rem; width: 1px; background: rgb(0 0 0 / 0.12); }
.cs .flow__rail i { position: absolute; inset: 0; background: linear-gradient(var(--blue), var(--hit)); transform-origin: 50% 0; transform: scaleY(var(--flow-progress, 0.16)); transition: transform 0.8s var(--ease-out); }
.cs__step { position: relative; display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; min-height: clamp(3.6rem, 8.2vh, 4.9rem); padding: 0.6rem 1rem; border: 1px solid var(--border-light); border-radius: 1rem; background: rgb(255 255 255 / 0.5); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.6s var(--ease-out); }
.cs__step::before { content: ""; position: absolute; left: calc(-2rem + 0.5rem - 5px); top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1.5px solid rgb(0 0 0 / 0.3); border-radius: 50%; background: var(--off-white); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.cs .flow__btn { display: flex; align-items: baseline; gap: 0.7rem; text-align: left; }
.cs .flow__num { font: 600 var(--fs-micro)/1 var(--mono); color: #8a8a8a; transition: color 0.4s; }
.cs .flow__name { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem); font-weight: 600; letter-spacing: -0.03em; }
.cs .flow__btn:focus-visible { outline-offset: 4px; }
.cs__viz { min-width: 0; opacity: 0.5; transition: opacity 0.4s; }
.cs__metric { font: 600 0.85rem/1 var(--mono); color: #8a8a8a; white-space: nowrap; transition: color 0.4s; }
.cs__mobile { display: none; }
.cs__step.is-done { background: var(--white); }
.cs__step.is-done::before { border-color: var(--blue); background: var(--blue); }
.cs__step.is-active { border-color: var(--blue); background: var(--white); box-shadow: 0 1rem 2rem -1rem rgb(58 126 246 / 0.35), 0 0 0 4px rgb(58 126 246 / 0.12); transform: translateX(-0.5rem); }
.cs__step.is-active::before { border-color: var(--hit); background: var(--hit); box-shadow: 0 0 0 4px rgb(255 138 61 / 0.25); }
.cs__step.is-active .cs__viz { opacity: 1; }
.cs__step.is-active .flow__num { color: var(--blue); }
.cs__step.is-active .cs__metric { color: var(--hit-ink); }
.cs__loop { position: absolute; right: 0; top: 2.2rem; bottom: 2.2rem; width: 1.5rem; border: 1px dashed rgb(0 0 0 / 0.28); border-left: 0; border-radius: 0 1rem 1rem 0; }
.cs__loop::before { content: ""; position: absolute; left: -2px; top: -4px; border: 4px solid transparent; border-right: 6px solid rgb(0 0 0 / 0.4); border-left: 0; }
.cs__loop em { position: absolute; left: 100%; top: 50%; padding-left: 0.4rem; font: 500 0.64rem/1 var(--mono); font-style: normal; color: #8a8a8a; white-space: nowrap; writing-mode: vertical-rl; translate: 0 -50%; }

.csv { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }
.csv em { flex: none; padding: 0.3rem 0.55rem; border-radius: 99em; background: rgb(58 126 246 / 0.1); font: 500 0.7rem/1 var(--mono); font-style: normal; color: var(--blue); white-space: nowrap; }
.csv--cre i { position: relative; flex: none; width: 2.6rem; height: 2rem; border-radius: 0.4rem; background: linear-gradient(135deg, #ff9f7a, #6b79d8); }
.csv--cre i:nth-child(2) { background: linear-gradient(135deg, #6b3fd4, #3a7ef6); }
.csv--cre i:nth-child(3) { background: linear-gradient(135deg, #ffcf7a, var(--hit)); }
.csv--cre b { position: absolute; left: 0.3rem; bottom: 0.2rem; font: 700 0.62rem/1 var(--mono); color: #fff; }
.csv--cam { display: grid; gap: 0.35rem; width: 100%; max-width: 16rem; }
.csv__pace { height: 0.45rem; overflow: hidden; border-radius: 99em; background: rgb(0 0 0 / 0.08); }
.csv__pace i { display: block; width: 64%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--hit)); }
.csv--cam small { font: 500 0.68rem/1 var(--mono); color: #5e5e5e; white-space: nowrap; }
.csv__page { position: relative; flex: none; width: 2.2rem; height: 2.6rem; border-radius: 0.3rem; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.csv__page b { position: absolute; left: 0.3rem; right: 0.3rem; top: 0.4rem; height: 0.3rem; border-radius: 99em; background: #141414; }
.csv__page u { position: absolute; left: 0.3rem; bottom: 0.35rem; width: 1rem; height: 0.4rem; border-radius: 99em; background: var(--hit); }
.csv--conv code { padding: 0.3rem 0.5rem; border-radius: 0.35rem; background: #141414; font: 500 0.68rem/1 var(--mono); color: #9be15d; white-space: nowrap; }
.csv--opt .is-up { background: rgb(255 138 61 / 0.14); color: var(--hit-ink); }

@media (min-width: 64.0625em) {
  .cs { --mark: 55svh; }
  .cs .flow__stage {
    position: sticky; top: 0; height: 100svh;
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem); row-gap: clamp(1rem, 3vh, 2.5rem);
    padding: calc(var(--header-h) + 1vh) max(var(--gutter), (100% - var(--container)) / 2) clamp(1.5rem, 4vh, 3rem);
  }
  .cs .flow__head { grid-column: 1 / -1; }
  .cs__copy, .cs__chain { align-self: center; }
  .cs__panel { visibility: hidden; opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 0.45s var(--ease-soft), transform 0.8s var(--ease-out), visibility 0s linear 0.8s; }
  .cs__panel.is-current { visibility: visible; opacity: 1; transform: none; transition-delay: 0.08s, 0.08s, 0s; }
  .cs .flow__markers { margin-top: -100svh; pointer-events: none; }
  .cs .flow__markers i { display: block; height: var(--mark); }
  .cs .flow__markers i:last-child { height: calc(var(--mark) + 45svh); }
}
@media (min-width: 64.0625em) and (max-height: 50em) {
  .cs .flow__title { font-size: clamp(1.8rem, 0.6rem + 2.2vw, 3rem); }
  .cs__step { min-height: 3.3rem; padding-block: 0.4rem; }
  .cs__n { font-size: 3rem; }
}
@media (max-width: 64em) {
  .cs { padding-block: clamp(4.5rem, 12vw, 7rem); }
  .cs .flow__stage { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
  .cs .flow__status, .cs .flow__markers, .cs__copy, .cs__loop { display: none; }
  .cs__chain { margin-top: 2.5rem; padding-right: 0; }
  .cs .flow__rail i { transform: none; }
  .cs .cs__step { grid-template-columns: minmax(0, 1fr) auto; padding: 1rem; border-color: var(--border-light); background: var(--white); box-shadow: none; transform: none; }
  .cs .cs__step::before { border-color: var(--blue); background: var(--blue); box-shadow: none; }
  .cs__viz { grid-column: 1 / -1; opacity: 1; }
  .csv { flex-wrap: wrap; }
  .cs__mobile { display: block; grid-column: 1 / -1; font-size: 0.92rem; line-height: 1.45; color: #5e5e5e; }
  .cs .cs__metric { color: var(--hit-ink); }
}

/* ==========================================================================
   Experimentation — A vs B, then measure → learn → optimize
   ========================================================================== */
.ab { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.ab__tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.abt { display: grid; align-content: start; gap: 0.8rem; padding: clamp(1rem, 1.8vw, 1.5rem); border-radius: clamp(1rem, 1.4vw, 1.4rem); background: #0c0d13; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.abt__head { display: grid; gap: 0.35rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.abt__k { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.04em; }
.abt__metric { font: 500 0.72rem/1 var(--mono); color: rgb(255 255 255 / 0.5); }
.abv { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "viz name" "viz bar"; align-items: center; gap: 0.55rem 1rem; padding: 0.8rem; border-radius: 0.9rem; background: rgb(255 255 255 / 0.03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: box-shadow 0.4s, background-color 0.4s; }
.abv__tag { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #262833; font: 700 0.7rem/1 var(--mono); color: var(--white); }
.abv__viz { position: relative; grid-area: viz; aspect-ratio: 1; overflow: hidden; border-radius: 0.6rem; background: #fff; }
.abv__name { grid-area: name; font-size: 0.9rem; line-height: 1.3; color: rgb(255 255 255 / 0.85); }
.abv__bar { grid-area: bar; display: flex; align-items: center; gap: 0.6rem; }
.abv__bar i { width: calc(var(--v) * (100% - 3.5rem)); height: 0.55rem; border-radius: 99em; background: rgb(255 255 255 / 0.3); transform-origin: 0 50%; }
.abv__bar b { font: 600 0.9rem/1 var(--mono); }
.abv.is-win { background: rgb(255 138 61 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 138 61 / 0.45); }
.abv.is-win .abv__tag { background: var(--hit); color: #111; }
.abv.is-win .abv__bar i { background: linear-gradient(90deg, #ff6f3d, #ffb27a); }
.abv.is-win .abv__bar b { color: #ffb27a; }
.abt__result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding-top: 0.9rem; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.8rem; color: rgb(255 255 255 / 0.55); }
.abt__result strong { font-weight: 600; color: #ffb27a; }
.abv__ad { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 0.25rem; padding: 0.35rem; }
.abv__img { border-radius: 0.35rem; }
.abv__img--a { background: linear-gradient(135deg, #5b96ff, #3fb6a8); }
.abv__img--b { background: radial-gradient(circle at 70% 35%, #ffe0c2 0 16%, transparent 16.5%), linear-gradient(135deg, var(--hit), #6b3fd4); }
.abv__ad b { height: 0.3rem; border-radius: 99em; background: rgb(0 0 0 / 0.18); }
.abv__ad b:last-child { width: 60%; }
.abv__aud { background: #11131b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.abv__aud i { position: absolute; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgb(255 255 255 / 0.4); }
.abv__aud i:nth-child(1) { left: 12%; top: 18%; }
.abv__aud i:nth-child(2) { left: 62%; top: 12%; }
.abv__aud i:nth-child(3) { left: 30%; top: 50%; }
.abv__aud i:nth-child(4) { left: 78%; top: 44%; }
.abv__aud i:nth-child(5) { left: 16%; top: 76%; }
.abv__aud i:nth-child(6) { left: 52%; top: 78%; }
.abv__aud i:nth-child(7) { left: 82%; top: 74%; }
.abv__aud--tight::after { content: ""; position: absolute; inset: 22%; border: 1px dashed rgb(255 138 61 / 0.6); border-radius: 50%; }
.abv__aud--tight i { background: #ffb27a; }
.abv__aud--tight i:nth-child(1) { left: 34%; top: 32%; }
.abv__aud--tight i:nth-child(2) { left: 52%; top: 28%; }
.abv__aud--tight i:nth-child(3) { left: 42%; top: 46%; }
.abv__aud--tight i:nth-child(4) { left: 60%; top: 46%; }
.abv__aud--tight i:nth-child(5) { left: 32%; top: 58%; }
.abv__aud--tight i:nth-child(6) { left: 50%; top: 62%; }
.abv__aud--tight i:nth-child(7) { left: 64%; top: 32%; }
.abv__lp { display: grid; align-content: start; gap: 0.22rem; padding: 0.4rem; }
.abv__lp b { width: 70%; height: 0.35rem; border-radius: 99em; background: #141414; }
.abv__lp i { height: 0.22rem; border-radius: 99em; background: rgb(0 0 0 / 0.14); }
.abv__lp u { width: 55%; height: 0.5rem; border-radius: 99em; background: var(--hit); }
.abv__lp--short u { width: 100%; height: 1.3rem; border-radius: 0.3rem; background: rgb(255 138 61 / 0.25); box-shadow: inset 0 0 0 1px var(--hit); }

.loop3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 0.15); }
.loop3__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 1rem; }
.loop3__n { grid-row: span 2; font: 600 var(--fs-small)/1 var(--mono); color: var(--hit); }
.loop3__step b { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.04em; }
.loop3__step small { grid-column: 2; margin-top: 0.35rem; font-size: 0.92rem; line-height: 1.45; color: rgb(255 255 255 / 0.55); }
.loop3__step:not(:last-child)::after { content: "→"; position: absolute; right: calc(clamp(1.5rem, 4vw, 4rem) / -2); top: 0.5rem; translate: 50% 0; font-size: 1.4rem; color: rgb(255 255 255 / 0.35); }
.loop3__step:last-child::after { content: "↺"; position: absolute; right: 0; top: 0.4rem; font-size: 1.4rem; color: rgb(255 138 61 / 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .js .abt .abv__bar i { transform: scaleX(0); transition: transform 1s var(--ease-out) 0.5s; }
  .js .abt .abv + .abv .abv__bar i { transition-delay: 0.75s; }
  .js .abt.is-in .abv__bar i { transform: none; }
  .loop3__step b { animation: loop3-glow 4.5s ease-in-out infinite; animation-delay: calc(var(--k) * 1.5s); }
  .ab.is-paused .loop3__step b { animation-play-state: paused; }
  @keyframes loop3-glow { 0%, 30%, 100% { color: var(--white); } 12% { color: #ffb27a; } }
}

/* ==========================================================================
   Metrics — five numbers as formulas
   ========================================================================== */
.mx { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.mx__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(3rem, 5.5vw, 6rem); border-top: 1px solid var(--black); }
.mxm { position: relative; display: grid; align-content: start; gap: 0.9rem; padding: 1.6rem clamp(0.8rem, 1.6vw, 1.6rem) 0; }
.mxm:first-child { padding-left: 0; }
.mxm:last-child { padding-right: 0; }
.mxm + .mxm { border-left: 1px solid var(--border-light); }
.mxm + .mxm::before { content: "→"; position: absolute; left: 0; top: -0.7rem; padding: 0.1rem 0.35rem; translate: -50% 0; background: var(--off-white); font: 500 0.85rem/1 var(--mono); color: #8a8a8a; }
.mxm__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.mxm__name abbr { font: 700 0.95rem/1 var(--mono); letter-spacing: 0.06em; text-decoration: none; color: var(--blue); }
.mxm__name small { font-size: 0.8rem; font-weight: 500; color: #6a6a6a; }
.mxm__val { font-size: clamp(2.6rem, 1.2rem + 3.3vw, 5.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; }
.mxm__val small { margin-left: 0.04em; font-size: 0.5em; letter-spacing: -0.02em; color: #6a6a6a; }
.mxm__frac { display: inline-grid; justify-self: start; justify-items: center; font: 500 0.8rem/1.2 var(--mono); color: #4d4d4d; }
.mxm__frac i { font-style: normal; padding: 0.22rem 0.45rem; }
.mxm__frac i:nth-of-type(2) { width: 100%; border-top: 1.5px solid var(--black); text-align: center; }
.mxm__trend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font: 500 0.78rem/1.2 var(--mono); color: #5e5e5e; }
.mxm__arrow { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--hit-soft); font-weight: 700; color: var(--hit-ink); }
.mxm__rule { flex-basis: 100%; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }
.mxm__note { max-width: 16em; padding-bottom: 1.6rem; font-size: 0.9rem; line-height: 1.4; color: #5e5e5e; }
.mx__note { margin-top: 1.5rem; font-size: 0.8rem; color: #8a8a8a; }

/* ==========================================================================
   Cinematic — every click has a reason
   ========================================================================== */
.why { position: relative; overflow: hidden; background: #030306; color: var(--white); padding-top: clamp(5rem, 9vw, 9rem); }
.why__title { margin-top: 1rem; font-size: clamp(3rem, 0.8rem + 7.4vw, 9.5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.055em; }
.why__title .mask { display: block; width: fit-content; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.why__stage { position: relative; aspect-ratio: 1200 / 520; margin-top: clamp(0rem, 1vw, 1rem); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.why__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.why__layer--1 circle { fill: rgb(255 255 255 / 0.3); }
.why__layer--2 circle { fill: rgb(91 150 255 / 0.5); }
.why__layer--3 circle { fill: rgb(155 124 240 / 0.55); }
.why__links path { stroke: rgb(255 138 61 / 0.35); stroke-width: 1; }
.why__links circle { fill: rgb(255 138 61 / 0.65); }
.why__scan { stroke: rgb(255 255 255 / 0.14); stroke-width: 1; }
.why__hit { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.why__hit > i { position: absolute; left: -0.45rem; top: -0.45rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--hit); box-shadow: 0 0 0 0.35rem rgb(255 138 61 / 0.2), 0 0 2rem rgb(255 138 61 / 0.6); }
.why__hit > i::after { content: ""; position: absolute; inset: -0.6rem; border: 1px solid rgb(255 138 61 / 0.6); border-radius: 50%; opacity: 0; }
.why__tag { position: absolute; left: 1.2rem; top: -1.2rem; display: grid; gap: 0.25rem; padding: 0.55rem 0.8rem; border-radius: 0.7rem; background: rgb(12 13 20 / 0.85); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); white-space: nowrap; }
.why__tag b { font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem); font-weight: 600; }
.why__tag small { font: 500 0.7rem/1 var(--mono); color: #ffb27a; }
.why__hit:nth-of-type(5) .why__tag { left: auto; right: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .why__layer { transform-box: view-box; animation: why-drift 22s var(--ease-in-out) infinite alternate; }
  .why__layer--2 { animation-duration: 28s; animation-direction: alternate-reverse; }
  .why__layer--3 { animation-duration: 34s; }
  .why__scan { animation: why-scan 9s linear infinite; }
  .why__tag { animation: why-tag 10s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); }
  .why__hit > i::after { animation: why-ping 10s var(--ease-out) infinite; animation-delay: calc(var(--k) * 2s); }
  .why.is-paused :is(.why__layer, .why__scan, .why__tag) { animation-play-state: paused; }
  .why.is-paused .why__hit > i::after { animation-play-state: paused; }
  @keyframes why-drift { from { translate: -24px 0; } to { translate: 24px 6px; } }
  @keyframes why-scan { from { translate: 0 0; } to { translate: 1200px 0; } }
  @keyframes why-tag { 0%, 100% { opacity: 0.45; transform: none; } 8%, 20% { opacity: 1; transform: translate3d(0.25rem, 0, 0); } 30% { opacity: 0.45; transform: none; } }
  @keyframes why-ping { 0% { opacity: 0.9; transform: scale(0.5); } 12%, 100% { opacity: 0; transform: scale(1.6); } }
}

/* ==========================================================================
   Process — seven stages wrap earlier than the shared six
   ========================================================================== */
@media (min-width: 64.0625em) and (max-width: 80em) {
  .ppc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 3.5rem; padding-top: 0; }
  .ppc-steps::before, .ppc-steps::after { display: none; }
  .ppc-steps .d-step { padding-top: 1.5rem; border-top: 1px solid rgb(0 0 0 / 0.16); }
  .ppc-steps .d-step::before { top: -6px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .chn__link { grid-template-columns: clamp(2.5rem, 5vw, 4rem) minmax(0, 1fr) 3rem; }
  .chn__formats { grid-column: 2; justify-content: flex-start; }
  .chn__arrow { grid-column: 3; grid-row: 1; width: 3rem; }
  .chn__peek { right: 4.5rem; width: min(22rem, 45%); }
  .ab__tests { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .mx__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mxm, .mxm:first-child, .mxm:last-child { padding: 1.5rem 1.25rem 0 0; }
  .mxm + .mxm { border-left: 0; }
  .mxm + .mxm::before { display: none; }
  .mxm { border-bottom: 1px solid var(--border-light); }
}

@media (max-width: 48em) {
  .hq__live { display: none; }
  .hq__chip, .hq__label, .hn2__plus, .hn2__ad :is(small, b, em) { display: none; }
  .hn2__ad { gap: 1cqi; padding: 1.4cqi; }
  .hn2__ad i { height: 1cqi; }
  .hn2__page u { padding: 0.8cqi 2.5cqi; font-size: 0; }
  .hq__legend { display: grid; gap: 0.1rem; padding: 0.75rem 1rem 1rem; border-top: 1px solid rgb(255 255 255 / 0.08); }
  .hq__legend li { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 0.35rem; font-size: 0.85rem; font-weight: 600; }
  .hq__legend b { font: 600 0.66rem/1 var(--mono); color: rgb(255 255 255 / 0.45); }
  .hq__legend em { margin-left: auto; font: 500 0.72rem/1 var(--mono); font-style: normal; color: rgb(255 255 255 / 0.6); }
  .hq__legend li:last-child em { color: #ffb27a; }

  .spend__row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .spend__seg em { font-size: 0.7rem; }

  .chn__link { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  .chn__n { display: none; }
  .chn__main, .chn__formats, .chn__peek { grid-column: 1 / -1; }
  .chn__arrow { grid-column: 2; grid-row: 1; align-self: start; width: 2.75rem; }

  .cs .cs__step { grid-template-columns: minmax(0, 1fr); }
  .cs .cs__metric { justify-self: start; }

  .loop3 { grid-template-columns: minmax(0, 1fr); }
  .loop3__step::after { display: none; }

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

  .why__stage { aspect-ratio: auto; display: grid; gap: 0.6rem; padding: 14rem var(--gutter) 3rem; -webkit-mask-image: none; mask-image: none; }
  .why__field { height: 16rem; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
  .why__links { display: none; }
  .why__hit { position: relative; left: auto; top: auto; display: flex; align-items: center; gap: 0.9rem; }
  .why__hit > i { position: relative; left: auto; top: auto; flex: none; }
  .why__tag, .why__hit:nth-of-type(5) .why__tag { position: static; white-space: normal; }
}