/* /features/competitor-tracking. The server HTML is the finished page. .ct-armed, .is-live
   and the motion media query add on top of it; script sets them only when motion is allowed.
   The rival picker is plain radio buttons, so the swap works with no script. */

@font-face {
  font-family: 'Bricolage Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-condensed-latin.woff2") format('woff2');
}

@layer components {
.ct-scenes {
  --ct-m: clamp(16px, 2.2vw, 32px);
  --ct-tw: clamp(96px, 14vw, 208px);
  --ct-rv: var(--ct-r0);
  --ct-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ct-ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ct-ease-io: cubic-bezier(.76, 0, .24, 1);
  --ct-tick-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='40'%3E%3Cpath fill='%23121413' d='M0 0h18v3H0zM0 10h7v2H0zM0 20h12v2H0zM0 30h7v2H0z'/%3E%3C/svg%3E");
  --ct-tick-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='40'%3E%3Cpath fill='%23121413' d='M0 0h18v3H0zM11 10h7v2h-7zM6 20h12v2H6zM11 30h7v2h-7z'/%3E%3C/svg%3E");
  position: relative;
  font-size: 18px;
  line-height: 1.5;
}
.ct-scenes:has(#ct-rv1:checked) { --ct-rv: var(--ct-r1); }
.ct-scenes:has(#ct-rv2:checked) { --ct-rv: var(--ct-r2); }

.ct-scenes :focus-visible { outline: 3px solid var(--ct-tape); outline-offset: 2px; }
.ct-scenes .ct-deck :focus-visible, .ct-scenes .ct-bill :focus-visible { outline-color: var(--ink); }
.ct-d { font-family: 'Bricolage Condensed', 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -.022em; line-height: .94; font-variant-numeric: tabular-nums; }

.ct-var:not([data-i="0"]) { display: none; }
.ct-scenes:has(#ct-rv1:checked) .ct-var, .ct-scenes:has(#ct-rv2:checked) .ct-var { display: none; }
.ct-scenes:has(#ct-rv1:checked) .ct-var[data-i="1"], .ct-scenes:has(#ct-rv2:checked) .ct-var[data-i="2"] { display: inline; }
.ct-shown { display: none; }
.ct-armed .ct-shown { display: inline-block; }
.ct-armed .ct-truth { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ct-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.1; text-decoration: none; cursor: pointer; background: var(--ct-you); color: var(--ct-on); transition: transform 140ms var(--ct-ease-out), background-color 180ms ease, color 180ms ease; }
.ct-btn:active { transform: scale(.97); }
.ct-btn-tape { background: var(--ct-tape); color: var(--ct-tape-ink); }
.ct-btn-on { background: var(--ct-on); color: var(--ct-tape-ink); }
.ct-btn-dark { background: var(--ct-tape-ink); color: var(--ct-on); font-size: 15px; padding: 0 12px; }
.ct-btn-big { min-height: 60px; padding: 0 28px; font-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .ct-btn:hover { background: var(--ct-you-2); }
  .ct-btn-tape:hover { background: var(--ct-tape-2); }
  .ct-btn-on:hover { background: var(--ct-on-2); }
  .ct-btn-dark:hover { background: var(--ct-r2); }
}

.ct-fl, .ct-fr { position: absolute; inset: 0; }
.ct-fl { background: var(--ct-you); }
.ct-fr { background: var(--ct-rv); clip-path: inset(0 0 0 50%); }
.ct-wipe { position: absolute; inset: 0; background: var(--ct-from, transparent); clip-path: inset(0 0 0 100%); pointer-events: none; }
.ct-ticks { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat-y; background-image: var(--ct-tick-left), var(--ct-tick-right); background-size: 18px 40px; background-position: left 0 top var(--ty, 0), right 0 top var(--ty, 0); }

.ct-hero { position: relative; color: var(--ct-on); background: var(--ct-you); display: grid; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--nav-height)); padding: clamp(18px, 3.4svh, 34px) var(--ct-m) 0; overflow: clip; isolation: isolate; }
.ct-hero .ct-fl, .ct-hero .ct-fr, .ct-hero .ct-wipe { z-index: -2; }
.ct-h1 { font-size: min(10.9vw, 20svh); max-width: 100%; position: relative; }
.ct-h1 span { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; overflow-clip-margin: .02em; }
.ct-h1 i { display: block; font-style: normal; }
.ct-lower { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 calc(var(--ct-tw) + 28px); padding-top: clamp(14px, 2.6svh, 28px); margin-inline: calc(var(--ct-m) * -1); padding-inline: var(--ct-m); min-height: 0; }
.ct-tape-h { position: absolute; z-index: -1; left: calc(50% - var(--ct-tw) / 2); width: var(--ct-tw); top: clamp(14px, 2.6svh, 28px); bottom: 0; background: var(--ct-tape); --ct-tick-left: none; }
.ct-tape-h::before { content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 14px; margin-left: -22px; background: var(--ct-tape-ink); }
.ct-boxers { position: absolute; left: 50%; bottom: 0; height: min(100%, calc(46vw * 590 / 840)); aspect-ratio: 840 / 590; transform: translateX(-50%); overflow: clip; z-index: 1; margin: 0; }
.ct-boxers img { width: 1300%; max-width: none; height: 100%; transform: translateX(calc(var(--f, 0) * -100% / 13)); }
.ct-copy { display: flex; flex-direction: column; gap: clamp(12px, 2svh, 20px); max-width: min(520px, 100%); position: relative; z-index: 2; }
.ct-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; font-weight: 500; }
.ct-plan { font-size: 16px; line-height: 1.35; font-weight: 500; margin-top: -6px; }
.ct-name { font-size: min(5.6vw, 10svh); align-self: end; padding-bottom: clamp(14px, 2.4svh, 24px); position: relative; z-index: 2; }
.ct-l-name { grid-column: 1; }
.ct-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; position: relative; z-index: 2; }
.ct-tag { display: inline-block; padding: 4px 10px; font-size: 14px; font-weight: 600; line-height: 1.3; background: var(--ct-on); color: var(--ct-tape-ink); white-space: nowrap; }
.ct-tag-tape { background: var(--ct-tape); }
.ct-tag-paper { background: var(--paper-2); color: var(--ink); }

.ct-score { position: relative; color: var(--ct-on); background: var(--ct-you); isolation: isolate; overflow: clip; }
.ct-score.is-live { height: calc(4.6 * 100svh); overflow: visible; }
.ct-stage { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-height)); padding: clamp(16px, 3svh, 28px) var(--ct-m) clamp(14px, 2.6svh, 24px); }
.is-live .ct-stage { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); overflow: clip; contain: layout paint; }
.ct-tape { position: absolute; inset: 0; background: var(--ct-tape); clip-path: inset(0 calc(50% - var(--ct-tw) / 2)); }
.ct-tape .ct-ticks { inset: 0 calc(50% - var(--ct-tw) / 2); }
.ct-vs { position: relative; display: grid; grid-template-columns: 1fr var(--ct-tw) 1fr; align-items: center; text-align: right; margin-bottom: clamp(6px, 1.6svh, 16px); }
.ct-vs b { font-size: min(6.4vw, 10.8svh); white-space: nowrap; padding-inline: 14px; }
.ct-vs h2 { text-align: center; color: var(--ct-tape-ink); font-size: clamp(16px, 1.5vw, 22px); line-height: 1.1; font-weight: 700; padding-inline: 12px; text-wrap: balance; }
.ct-vs .ct-rn { text-align: left; display: block; overflow: clip; overflow-clip-margin: .05em; }
.ct-vs .ct-rn > span { display: inline-block; }
.ct-key { position: relative; margin-bottom: clamp(6px, 1.2svh, 12px); padding: 6px 12px; background: var(--ct-tape); color: var(--ct-tape-ink); text-align: center; font-size: 16px; line-height: 1.3; font-weight: 600; }
.ct-rows { position: relative; flex: 1; display: grid; grid-auto-rows: 1fr; min-height: 0; list-style: none; }
.is-live .ct-rows { overflow: clip; }
.ct-rows li { display: grid; grid-template-columns: 1fr var(--ct-tw) 1fr; align-items: center; min-height: 0; }
.ct-c { font-size: min(6.6vw, 10.8svh); line-height: 1; position: relative; z-index: 2; white-space: nowrap; }
.ct-y { text-align: right; transform-origin: 100% 50%; padding-right: 14px; }
.ct-t { text-align: left; transform-origin: 0 50%; padding-left: 14px; }
.ct-tmi { display: inline-block; background: var(--ct-tape); text-wrap: balance; }
.ct-tm { padding: 0 10px; text-align: center; color: var(--ct-tape-ink); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.15; font-weight: 700; }
.ct-tm small { display: block; font-size: 14px; font-weight: 500; margin-top: 2px; }
.ct-foot { position: relative; display: grid; grid-template-columns: 1fr var(--ct-tw) 1fr; align-items: end; margin-top: clamp(6px, 1.4svh, 14px); }
.ct-foot-left { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-right: 14px; }
.ct-swap { grid-column: 3; display: flex; gap: 4px; margin: 0 0 0 14px; border: 0; padding: 0; min-width: 0; flex-wrap: wrap; position: relative; }
.ct-swap legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ct-swap input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; pointer-events: none; }
.ct-swap-label { align-self: center; font-size: 16px; font-weight: 600; padding-right: 6px; }
.ct-swap input:checked + label { display: none; }
.ct-swap:has(input:focus-visible) .ct-swap-label { outline: 3px solid var(--ct-tape); outline-offset: 2px; }
.ct-swap label, .ct-dswap button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--ct-shade); color: var(--ct-on); border: 0; font-family: inherit; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ct-ease-out); }
.ct-swap label:active, .ct-dswap button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ct-swap label:hover { background: var(--ct-shade-2); } }

.ct-deck { position: relative; background: var(--paper); color: var(--ink); overflow: clip; }
.ct-deck.is-live { height: 215svh; overflow: visible; }
.ct-deck-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: clamp(16px, 3vw, 48px); align-items: center; min-height: calc(100svh - var(--nav-height)); padding: clamp(40px, 8svh, 96px) var(--ct-m); }
.ct-deck.is-live .ct-deck-stage { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); overflow: clip; padding-block: 24px; contain: layout paint; }
.ct-deck h2 { font-size: clamp(46px, 5.9vw, 92px); }
.ct-deck-side > p { margin-top: 20px; font-size: 20px; line-height: 1.35; max-width: 26em; }
.ct-flip-hint { display: none; }
.ct-armed .ct-flip-hint { display: inline; }
.ct-dswap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; visibility: hidden; }
.ct-deal-ready .ct-dswap { visibility: visible; }
.ct-dswap button { background: var(--paper-2); color: var(--ink); }
.ct-dswap button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ct-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; perspective: 1600px; min-width: 0; }
.ct-card { position: relative; color: var(--ct-on); }
.ct-card:nth-child(1) { z-index: 1; transform: rotate(-2.2deg) translateY(10px); }
.ct-card:nth-child(2) { z-index: 2; transform: rotate(.8deg) translateY(-8px); }
.ct-card:nth-child(3) { z-index: 3; transform: rotate(2deg) translateY(12px); }
.ct-card.is-flip { z-index: 5; }
.ct-inner { position: relative; display: flex; flex-direction: column; }
.ct-face { position: relative; display: flex; flex-direction: column; padding: 20px; overflow: clip; background: var(--ct-c); }
.ct-front { min-height: 420px; }
.ct-back { background: var(--ct-tape); color: var(--ct-tape-ink); }
.ct-c1 { --ct-c: var(--ct-you); }
.ct-c2 { --ct-c: var(--ct-r0); }
.ct-c3 { --ct-c: var(--ct-r2); }
.ct-verb { font-size: clamp(44px, 5.1vw, 76px); }
.ct-sk { position: absolute; right: -6%; bottom: 18%; width: 92%; height: 46%; max-width: none; object-fit: contain; object-position: right bottom; filter: invert(1); mix-blend-mode: screen; }
.ct-say { margin-top: auto; position: relative; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; font-weight: 600; }
.ct-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; position: relative; }
.ct-flip { display: none; min-height: 44px; min-width: 44px; padding: 0 12px; background: var(--ct-shade); color: inherit; border: 0; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 140ms var(--ct-ease-out), background-color 180ms ease; }
.ct-armed .ct-flip { display: inline-block; }
.ct-flip:active { transform: scale(.96); }
.ct-bfoot .ct-flip { background: var(--ct-tape-ink); color: var(--ct-on); }
.ct-back .ct-big { font-size: clamp(64px, 8vw, 120px); line-height: .9; margin-top: 6px; }
.ct-back h3 { font-size: clamp(28px, 2.6vw, 38px); }
.ct-back p { font-size: 17px; line-height: 1.25; margin-top: 6px; font-weight: 500; }
.ct-back p.ct-big { font-size: clamp(64px, 8vw, 120px); line-height: .9; font-weight: 800; }
.ct-bfoot { margin-top: 16px; }
.ct-meta .ct-flip:only-child { margin-left: auto; }
.ct-mini { margin-top: auto; padding-top: 12px; display: grid; gap: 6px; font-size: 15px; font-weight: 500; line-height: 1.2; list-style: none; }
.ct-mini li { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(26px, auto); gap: 6px; align-items: center; }
.ct-mini span { overflow-wrap: anywhere; }
.ct-mini i { display: block; height: 12px; background: var(--ct-ink-faint); }
.ct-mini u { display: block; height: 100%; background: var(--ct-tape-ink); opacity: .45; }
.ct-mini b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ct-scenes:has(#ct-rv0:checked) .ct-mini [data-i="0"], .ct-scenes:has(#ct-rv1:checked) .ct-mini [data-i="1"], .ct-scenes:has(#ct-rv2:checked) .ct-mini [data-i="2"] { font-weight: 800; }
.ct-scenes:has(#ct-rv0:checked) .ct-mini [data-i="0"] u, .ct-scenes:has(#ct-rv1:checked) .ct-mini [data-i="1"] u, .ct-scenes:has(#ct-rv2:checked) .ct-mini [data-i="2"] u { opacity: 1; }
.ct-meter { position: relative; height: 18px; margin-top: 10px; background-color: var(--ct-shade); background-image: repeating-linear-gradient(90deg, var(--ct-on-faint) 0 2px, transparent 2px calc(100% / 58 * 5)); }
.ct-meter u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ct-tape); text-decoration: none; }
.ct-meter .ct-var[data-i="0"] { display: block; }
.ct-scenes:has(#ct-rv1:checked) .ct-meter .ct-var[data-i="0"], .ct-scenes:has(#ct-rv2:checked) .ct-meter .ct-var[data-i="0"] { display: none; }
.ct-scenes:has(#ct-rv1:checked) .ct-meter .ct-var[data-i="1"], .ct-scenes:has(#ct-rv2:checked) .ct-meter .ct-var[data-i="2"] { display: block; }
.ct-move { align-self: flex-start; margin-top: auto; position: relative; }
.ct-move-next { font-size: 15px; line-height: 1.25; margin-top: 8px; }

.ct-armed .ct-card { height: min(78svh, 580px); }
.ct-armed .ct-inner { display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 640ms var(--ct-ease-io); }
.ct-armed .ct-card.is-flip .ct-inner { transform: rotateY(180deg); }
.ct-armed .ct-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ct-armed .ct-back { transform: rotateY(180deg); }
.ct-armed .ct-card:not(.is-flip) .ct-back { visibility: hidden; transition: visibility 1ms linear 320ms; }
.ct-armed .ct-back > * { opacity: 0; transition: opacity 1ms linear 320ms; }
.ct-armed .ct-card.is-flip .ct-back > * { opacity: 1; }

.ct-gap { transition: background-color 420ms ease; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - var(--nav-height)); color: var(--ct-on); background: var(--ct-r0); overflow: clip; isolation: isolate; scroll-margin-top: var(--nav-height); }
.ct-gap:has(.ct-mark:checked) { background: var(--ct-you); }
.ct-gap > img { position: absolute; z-index: -1; inset: -6% 0; width: 100%; height: 112%; max-width: none; object-fit: cover; object-position: 50% 40%; mix-blend-mode: multiply; }
.ct-pad { padding: clamp(24px, 5svh, 56px) var(--ct-m) clamp(18px, 3svh, 30px); }
.ct-gap-q { position: relative; z-index: 1; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.2; font-weight: 700; }
.ct-gap-big { font-size: min(16.8vw, 24svh); margin-top: 10px; }
.ct-gl { position: relative; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: clamp(14px, 2.4svh, 24px); }
.ct-gl p { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; line-height: 1.25; max-width: 32em; flex: 1 1 320px; }
.ct-mark { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; right: 0; }
.ct-gl:has(.ct-mark:focus-visible) label { outline: 3px solid var(--ct-tape); outline-offset: 2px; }
.ct-gap .ct-after { display: none; }
.ct-gap:has(.ct-mark:checked) .ct-before { display: none; }
.ct-gap:has(.ct-mark:checked) .ct-after { display: inline; }
.ct-gap:has(.ct-mark:checked) .ct-gap-big .ct-after { display: block; }
.ct-gap-big .ct-before { display: block; }
.ct-rule { position: relative; flex: none; height: 18px; background-color: var(--ct-tape); background-repeat: repeat-x; background-size: 40px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpath fill='%23121413' d='M0 0h3v18H0zM10 6h2v12h-2zM20 2h2v16h-2zM30 6h2v12h-2z'/%3E%3C/svg%3E"); background-position: var(--tx, 0) 0; }

.ct-bill { background: var(--paper); color: var(--ink); padding: clamp(72px, 12svh, 140px) var(--ct-m) clamp(56px, 9svh, 110px); }
.ct-bill-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-bottom: clamp(20px, 4svh, 40px); }
.ct-bill h2 { font-size: clamp(46px, 7.4vw, 112px); }
.ct-bill-head p { font-size: 18px; line-height: 1.35; }
.ct-bill-key { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.ct-bill-list { list-style: none; }
.ct-bill-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .3em; font-size: calc(var(--s) * 1.54vw); line-height: .98; }
.ct-you-row { color: var(--accent); }
.ct-bill-list li > span { display: inline-block; }
.ct-bill-foot { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 4svh, 36px); }

.ct-ring { position: relative; background: var(--ct-night); color: var(--ct-night-ink); overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; min-height: calc(100svh - var(--nav-height)); padding: clamp(48px, 8svh, 96px) var(--ct-m) 28px; isolation: isolate; scroll-margin-top: var(--nav-height); }
.ct-ring h2 { font-size: clamp(46px, 7.4vw, 112px); text-wrap: balance; }
.ct-say2 { font-size: 20px; line-height: 1.4; margin-top: 20px; max-width: 30em; }
.ct-legend { margin-top: 24px; display: grid; gap: 8px; font-size: 18px; font-weight: 600; list-style: none; }
.ct-legend li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ct-legend i { flex: none; width: 16px; height: 16px; margin-right: -8px; }
.ct-legend i:last-of-type { margin-right: 0; }
.ct-k-likely { background: var(--ct-tape); }
.ct-k-r0 { background: var(--ct-r0); }
.ct-k-r1 { background: var(--ct-r1); }
.ct-k-r2 { background: var(--ct-on); }
.ct-k-open { box-shadow: inset 0 0 0 2px var(--ct-night-ink-2); }
.ct-credit-line { margin-top: 16px; font-size: 16px; line-height: 1.4; color: var(--ct-night-ink-2); max-width: 32em; }
.ct-credit-line a { color: var(--ct-night-ink); text-decoration: underline; text-underline-offset: 3px; }
.ct-ring-act { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ct-arena { position: relative; width: min(100%, 86svh); margin-inline: auto; aspect-ratio: 1; }
.ct-arena svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-arena .ct-boxers { left: 50%; top: 50%; bottom: auto; height: auto; width: 34%; transform: translate(-50%, -52%); }
.ct-seats { fill: var(--ct-seat); }
.ct-likely { fill: var(--ct-tape); }
.ct-canvas { fill: var(--ct-r2); }
.ct-ropes { fill: none; stroke: var(--ct-tape); stroke-width: 6; }
.ct-post-you { fill: var(--ct-you); }
.ct-post-r0 { fill: var(--ct-r0); }
.ct-post-r1 { fill: var(--ct-r1); }
.ct-post-r2 { fill: var(--ct-on); }
.ct-credit { grid-column: 1 / -1; color: var(--ct-night-ink-2); font-size: 14px; line-height: 1.45; }
.ct-credit a { color: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .ct-h1 i { animation: ct-rise 860ms var(--ct-ease-expo) both; animation-delay: calc(80ms + var(--i) * 90ms); }
  .ct-tape-h { animation: ct-drop 900ms var(--ct-ease-expo) 120ms both; }
  .ct-copy, .ct-hero .ct-name, .ct-right { animation: ct-fade 520ms var(--ct-ease-out) 420ms both; }
  .ct-armed [data-competitor-tape-target~="rise"] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ct-ease-out), transform 860ms var(--ct-ease-expo); transition-delay: calc(var(--d, 0) * 70ms); }
  .ct-armed [data-competitor-tape-target~="rise"].is-in { opacity: 1; transform: none; }
  .ct-armed [data-competitor-tape-target~="grow"] { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--ct-ease-io); transition-delay: calc(var(--d, 0) * 90ms); }
  .ct-armed [data-competitor-tape-target~="grow"].is-in { clip-path: inset(-5% -2% -5% 0); }
  .ct-rn > span.is-in { animation: ct-in-up 480ms var(--ct-ease-expo) both; }
  .ct-wipe.is-going { animation: ct-wipe 620ms var(--ct-ease-io) both; }
  .ct-t .ct-shown.is-popping { animation: ct-pop 420ms var(--ct-ease-expo) both; animation-delay: calc(var(--d, 0) * 55ms); }
  .ct-card.is-redeal { animation: ct-redeal 620ms var(--ct-ease-io) both; animation-delay: calc(var(--d, 0) * 50ms); }
}
@keyframes ct-rise { from { transform: translateY(106%); } }
@keyframes ct-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes ct-fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes ct-in-up { from { transform: translateY(110%); } }
@keyframes ct-wipe { from { clip-path: inset(0 0 0 50%); } to { clip-path: inset(0 0 0 100%); } }
@keyframes ct-pop { from { opacity: .25; transform: translateY(.16em); } }
@keyframes ct-redeal { 0% { translate: 0 0; rotate: 0deg; } 45% { translate: calc(var(--px, 0) * 1px) 60px; rotate: calc(var(--d, 0) * 3deg - 3deg); } 100% { translate: 0 0; rotate: 0deg; } }

@media (max-width: 900px) {
  .ct-scenes { --ct-tw: 116px; }
  .ct-h1 { font-size: 9.9vw; }
  .ct-lower { display: block; flex: 1; padding-bottom: 0; }
  .ct-copy { max-width: none; }
  .ct-hero .ct-boxers { position: relative; left: auto; bottom: auto; transform: none; width: min(100%, 46svh * 840 / 590); height: auto; margin: clamp(8px, 2svh, 20px) auto 0; }
  .ct-tape-h { top: auto; height: calc(46svh + 16px); bottom: 0; }
  .ct-hero .ct-name { display: none; }
  .ct-right { position: absolute; inset: auto var(--ct-m) 10px var(--ct-m); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; z-index: 3; }
  .ct-tape::before, .ct-tape::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; opacity: var(--band, 0); background-repeat: repeat-x; background-size: 40px 14px; background-position: var(--tx, 0) 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath fill='%23121413' d='M0 0h3v14H0zM10 0h2v6h-2zM20 0h2v10h-2zM30 0h2v6h-2z'/%3E%3C/svg%3E"); }
  .ct-tape::before { top: calc(56% - 50px); }
  .ct-tape::after { top: calc(56% + 36px); transform: scaleY(-1); }
  .ct-vs b { font-size: 4.7vw; padding-inline: 4px; }
  .ct-key { padding: 4px 8px; font-size: 14px; line-height: 1.25; }
  .ct-vs b:first-child { text-align: right; }
  .ct-vs h2 { font-size: 14px; padding-inline: 4px; }
  .ct-c { font-size: 11vw; }
  .ct-y, .ct-t { transform-origin: 50% 50%; padding-inline: 0; text-align: center; }
  .ct-tm { padding: 0 4px; font-size: 14px; }
  .ct-foot { display: block; }
  .ct-foot-left { margin: 0 0 6px; }
  .ct-swap { flex-wrap: nowrap; margin-left: 0; }
  .ct-swap label { flex: 1; padding: 0 2px; justify-content: center; font-size: 14px; }
  .ct-swap-label { font-size: 14px; white-space: nowrap; }
  .ct-deck-stage { display: block; padding: 56px var(--ct-m); }
  .ct-deck h2 { font-size: 13vw; }
  .ct-fan { display: block; margin-top: 24px; }
  .ct-card { margin: 0 0 14px; }
  .ct-armed .ct-card { height: 400px; }
  .ct-card:nth-child(1) { transform: rotate(-1deg); }
  .ct-card:nth-child(2) { transform: rotate(.8deg); }
  .ct-card:nth-child(3) { transform: rotate(-.6deg); }
  .ct-verb { font-size: 60px; }
  .ct-gap-big { font-size: 15.8vw; }
  .ct-bill-head { display: block; }
  .ct-bill h2 { font-size: 12vw; }
  .ct-bill-head p { margin-top: 12px; }
  .ct-bill-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; font-size: calc(14px + var(--s) * 4.9px); }
  .ct-bill-list li > span:first-child { font-size: clamp(16px, calc(var(--s) * 2.9px + 12px), 30px); line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
  .ct-ring { display: block; padding: 56px var(--ct-m) 28px; }
  .ct-ring h2 { font-size: 12vw; }
  .ct-arena { margin-top: 24px; width: 100%; }
  .ct-credit { margin-top: 24px; }
}

.ct-btn, .ct-swap label, .ct-dswap button, .ct-flip, .ct-tag, .ct-face, .ct-key { border-radius: var(--radius-family); }
}

/* tg-input-field sits in the utilities layer, so this stays outside any layer to win. */
.ct-hero .tg-input-field { max-width: 460px; outline: 0; background: var(--ct-input); color: var(--ct-tape-ink); }
.ct-hero .tg-input-field input { height: 56px; padding-block: 0; font-size: 18px; color: var(--ct-tape-ink); }
.ct-hero .tg-input-field input::placeholder { color: var(--ct-input-ink-2); }
.ct-hero .tg-input-field .tg-btn { min-height: 56px; padding-inline: 24px; background: var(--ct-tape); color: var(--ct-tape-ink); font-size: 18px; font-weight: 700; }
.ct-hero .tg-input-field:focus-within { outline: 3px solid var(--ct-tape); outline-offset: 2px; }
@media (max-width: 900px) { .ct-hero .tg-input-field .tg-btn { padding-inline: 16px; } }