@font-face { font-family: "Anton"; src: url("/opus-versus-sol/assets/fonts/anton-400.cdc7434946.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bangers"; src: url("/opus-versus-sol/assets/fonts/bangers-400.b29b9a15f5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LabMono"; src: url("/opus-versus-sol/assets/fonts/mono-var.106df23f5e.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root {
  --navy: #0D1427;
  --deep: #060A14;
  --blue: #0AA4DB;
  --gold: #FFCF00;
  --sol: #FF7A3D;
  --text: #EDF2FB;
  --muted: #A7B3CC;
  --line: rgba(255, 255, 255, 0.11);
  --card: rgba(8, 13, 27, 0.86);
  --disp: "Anton", "Impact", "Arial Narrow", "Helvetica Neue", sans-serif;
  --comic: "Bangers", "Anton", "Impact", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "LabMono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: max(16px, 4vw);
  --glow: 0 0 28px rgba(255, 207, 0, 0.45);
  --tap: 48px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--deep); color: var(--text); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--gold); }
a[href^="tel:"] { white-space: nowrap; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); position: relative; }
.wrap.narrow { max-width: 860px; }
.kicker { display: inline-block; font: 700 12px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.fine { margin-top: 12px; font: 500 12.5px/1.5 var(--mono); color: #9AA7C2; }
#bar { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 70; background: linear-gradient(90deg, var(--gold), var(--blue), var(--sol)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: var(--glow); pointer-events: none; }
.top { position: relative; z-index: 40; padding: 12px var(--gutter) 0; font: 700 13px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.top p { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; justify-content: flex-end; }
.top .brand { color: var(--text); }
.top a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(255, 207, 0, 0.5); }
body.home .top { position: absolute; left: 0; right: 0; top: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; min-height: var(--tap);
  padding: 14px 24px; border-radius: 999px; border: 0; text-decoration: none; text-align: center;
  font: 400 20px/1.05 var(--disp); letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, color 0.18s;
}
.btn.gold { background: linear-gradient(180deg, #FFE36B, var(--gold) 55%, #E3B400); color: var(--navy); box-shadow: 0 14px 44px -10px rgba(255, 207, 0, 0.75), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.btn.gold:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 20px 60px -10px rgba(255, 207, 0, 0.95); }
.btn.ghost { background: rgba(6, 10, 20, 0.8); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.34); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn.sm { font-size: 17px; padding: 10px 18px; min-height: 44px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.share-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share-say { font: 600 14px/1.3 var(--mono); color: var(--gold); }
.scene { position: relative; --p: 0; }
.stage { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--deep); isolation: isolate; z-index: 0; }
.media { position: absolute; inset: 0; }
.media .poster, .media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.media.pic .poster img { transform: scale(calc(1.02 + var(--p) * 0.06)); }
.media video { opacity: 0; transition: opacity 0.45s ease; }
.media video.is-ready { opacity: 1; }
.shade { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.shade.left { background: linear-gradient(90deg, rgba(6, 10, 20, 0.86) 0%, rgba(6, 10, 20, 0.35) 42%, rgba(6, 10, 20, 0) 66%), linear-gradient(0deg, rgba(6, 10, 20, 0.8) 0%, rgba(6, 10, 20, 0) 26%); }
.shade.hero { background: linear-gradient(90deg, rgba(6, 10, 20, 0.92) 0%, rgba(6, 10, 20, 0.5) 40%, rgba(6, 10, 20, 0) 64%), linear-gradient(0deg, rgba(6, 10, 20, 0.85) 0%, rgba(6, 10, 20, 0) 30%); }
.credit { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 4; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237, 242, 251, 0.72); background: rgba(6, 10, 20, 0.6); padding: 4px 8px; border-radius: 6px; }
.overlay { position: relative; z-index: 5; margin-top: -100vh; margin-top: -100svh; padding: 22vh var(--gutter) 34vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: 50vh; max-width: 1320px; margin-inline: auto; pointer-events: none; }
.overlay > * { pointer-events: auto; }
.beat { max-width: 580px; padding: 24px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.beat.left { justify-self: start; }
.beat.wide { max-width: 980px; width: 100%; }
.beat > h2, .band h2 { font-family: var(--disp); font-size: clamp(34px, 4.8vw, 64px); line-height: 0.98; text-transform: uppercase; margin: 6px 0 14px; }
.beat > h3, .band h3 { font-family: var(--disp); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; text-transform: uppercase; margin: 0 0 12px; color: var(--gold); }
.beat p + p, .beat p + figure, .beat figure + p, .beat figure + figure { margin-top: 12px; }
.beat .line, .beat .card { color: #D5DDEC; }
.beat.big { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: 900px; padding: 0; }
.joke { font: 400 clamp(26px, 3.4vw, 44px)/1.12 var(--comic); letter-spacing: 0.035em; color: var(--gold); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 0 2px #000; }
.beat.big .joke { font-size: clamp(34px, 5.6vw, 76px); }
.beat.hero { max-width: 760px; background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.beat.hero h1 { font-family: var(--disp); font-size: clamp(44px, 5.4vw, 86px); line-height: 0.92; text-transform: uppercase; margin: 10px 0 14px; text-shadow: 0 8px 40px rgba(0, 0, 0, 0.9); }
.beat.hero .kicker { color: var(--navy); background: var(--gold); padding: 7px 11px; border-radius: 6px; letter-spacing: 0.16em; transform: rotate(-2deg); font-size: 12px; }
.beat.hero .subhead { font-size: clamp(16px, 1.5vw, 20px); color: #D5DDEC; max-width: 56ch; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.counter { margin-top: 14px; font: 400 clamp(24px, 3vw, 40px)/1.12 var(--comic); letter-spacing: 0.035em; color: var(--gold); text-shadow: var(--glow), 0 3px 18px rgba(0, 0, 0, 0.9); max-width: 26ch; }
.who { margin-top: 12px; font-size: 15px; color: var(--muted); max-width: 52ch; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.counter-sub { color: #D5DDEC; }
.nw { white-space: nowrap; }
.beat.hero .tagline { margin: 0 0 12px; font: 400 clamp(22px, 2.3vw, 34px)/1.1 var(--comic); letter-spacing: 0.04em; color: #fff; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9); }
.byline { margin-top: 12px; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.phone { margin-top: 14px; font-weight: 600; }
.phone a { color: var(--gold); }
.quote { margin: 0; padding: 14px 16px; border-left: 4px solid var(--blue); background: rgba(10, 164, 219, 0.08); border-radius: 0 12px 12px 0; }
.quote blockquote { margin: 0; font-size: 16px; color: var(--text); }
.quote figcaption { font: 700 11.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-top: 8px; }
.media.drawn { overflow: hidden; background: radial-gradient(ellipse at 74% 40%, rgba(255, 207, 0, 0.18), transparent 55%), radial-gradient(ellipse at 90% 10%, rgba(10, 164, 219, 0.22), transparent 50%), linear-gradient(165deg, #0F1830 0%, #070B17 70%); }
.media.drawn .set { position: absolute; display: block; pointer-events: none; }
.media.drawn .m { position: absolute; width: auto; height: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(10, 164, 219, 0.25)); }
.sky { inset: 0; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px), radial-gradient(circle at 34% 12%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px), radial-gradient(circle at 62% 8%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px), radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px), radial-gradient(circle at 48% 28%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px); }
.d1 .track { left: -20%; right: -20%; bottom: 0; height: 46%; transform: perspective(700px) rotateX(58deg); transform-origin: 50% 100%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 3px, transparent 3px 12%), linear-gradient(0deg, rgba(10, 164, 219, 0.25), rgba(13, 20, 39, 0)); }
.d1 .line { left: 56%; right: 0; bottom: 21%; height: 6px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 24px rgba(255, 207, 0, 0.9), 0 0 60px rgba(255, 207, 0, 0.5); }
.d1 .dust { right: 18%; bottom: 24%; width: 34vw; height: 30vh; opacity: calc(0.25 + var(--p) * 0.75); background: radial-gradient(circle at 80% 70%, rgba(255, 207, 0, 0.9) 0 3px, transparent 4px), radial-gradient(circle at 60% 50%, rgba(255, 207, 0, 0.7) 0 2px, transparent 3px), radial-gradient(circle at 40% 80%, rgba(255, 207, 0, 0.6) 0 2px, transparent 3px), radial-gradient(circle at 20% 60%, rgba(255, 207, 0, 0.5) 0 2px, transparent 3px), linear-gradient(90deg, transparent, rgba(255, 207, 0, 0.12)); transform: translateX(calc(var(--p) * -6vw)); }
.d1 .opus { right: 4%; bottom: 20%; height: 46vh; transform: translateX(calc(var(--p) * 10vw)) translateY(calc(var(--p) * -3vh)) rotate(calc(var(--p) * 7deg)); }
.d1 .sol { right: 27%; bottom: 20.5%; height: 30vh; }
.spot { inset: 0; background: radial-gradient(ellipse 34% 80% at 72% -8%, rgba(255, 240, 190, 0.32), rgba(255, 240, 190, 0) 72%); }
.d2 .scale { bottom: 13%; width: 22vw; height: 4.4vh; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #2A3557, #121A33); border: 2px solid rgba(255, 207, 0, 0.6); box-shadow: 0 0 30px rgba(10, 164, 219, 0.35); }
.d2 .scale.a { right: 32%; }
.d2 .scale.b { right: 4%; }
.d2 .opus { right: 33%; bottom: 17%; height: 48vh; transform-origin: 50% 100%; transform: scale(calc(0.94 + var(--p) * 0.12)); }
.d2 .sol { right: 5%; bottom: 17%; height: 40vh; }
.d3 .ribbon { right: 30%; bottom: 12%; width: 12px; height: 58%; background: repeating-linear-gradient(0deg, #FFFFFF 0 14px, #0D1427 14px 28px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.35); }
.d3 .ribbon::after { content: ""; position: absolute; left: 12px; top: 34%; width: 16vw; height: 8px; background: var(--gold); transform-origin: 0 50%; transform: rotate(calc(18deg + var(--p) * 40deg)); border-radius: 4px; box-shadow: var(--glow); }
.d3 .confetti { inset: -30% 0 0 0; background-image: radial-gradient(circle, var(--gold) 0 3px, transparent 4px), radial-gradient(circle, var(--blue) 0 3px, transparent 4px), radial-gradient(circle, var(--sol) 0 3px, transparent 4px), radial-gradient(circle, #FFFFFF 0 2px, transparent 3px); background-size: 140px 120px, 170px 150px, 210px 170px, 90px 110px; background-position: 10px 20px, 60px 80px, 120px 40px, 30px 60px; opacity: 0.7; transform: translateY(calc(var(--p) * 24vh)); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 70%); mask-image: linear-gradient(90deg, transparent 40%, #000 70%); }
.d3 .opus { right: 6%; bottom: 14%; height: 54vh; transform: translateX(calc(var(--p) * 4vw)) rotate(calc(-6deg + var(--p) * 10deg)); }
.d3 .sol { right: 52%; bottom: 16%; height: 15vh; opacity: 0.9; }
.d4 .judge { right: 25%; bottom: 12%; height: 50vh; }
.d4 .opus { right: 49%; bottom: 13%; height: 30vh; transform: rotate(calc(var(--p) * -4deg)); }
.d4 .sol { right: 3%; bottom: 13%; height: 29vh; transform: rotate(calc(var(--p) * 4deg)); }
.d5 .sand { left: 0; right: 0; bottom: 0; height: 24%; background: radial-gradient(ellipse at 70% 0%, rgba(255, 220, 150, 0.35), transparent 60%), linear-gradient(180deg, #8A6A3E 0%, #5E4426 60%, #3B2A17 100%); }
.d5 .sand::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: linear-gradient(0deg, rgba(138, 106, 62, 0.8), transparent); }
.d5 .receipt { right: 31%; bottom: 9%; width: 6.5vh; height: calc(16vh + var(--p) * 24vh); border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(180deg, #FBF8F0 0 14px, #E7E1D2 14px 15px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transform: rotate(-14deg); transform-origin: 50% 0; top: auto; }
.d5 .sol { right: 6%; bottom: 13%; height: 48vh; }
.d5 .opus { display: none; }
@keyframes bob { 50% { translate: 0 -10px; } }
.media.drawn .m.opus { animation: bob 2.6s ease-in-out infinite; }
.media.drawn .m.sol { animation: bob 5.5s ease-in-out infinite; }
@media (max-width: 47.99rem), (orientation: portrait) and (max-width: 63.99rem) {
  .media.only-wide { display: none; }
  .d1 .opus { right: 2%; bottom: 4%; height: 24vh; transform: translateX(calc(var(--p) * 6vw)) rotate(calc(var(--p) * 6deg)); }
  .d1 .sol { right: auto; left: 2%; bottom: 4.5%; height: 17vh; }
  .d1 .line { left: 0; bottom: 5%; }
  .d1 .dust { right: 30%; bottom: 12%; width: 50vw; height: 20vh; }
  .d2 .scale { width: 40vw; height: 3vh; bottom: 6%; }
  .d2 .scale.a { right: auto; left: 4%; }
  .d2 .scale.b { right: 4%; }
  .d2 .opus { right: auto; left: 5%; bottom: 8.5%; height: 27vh; }
  .d2 .sol { right: 4%; bottom: 8.5%; height: 22vh; }
  .d3 .ribbon { right: 46%; bottom: 6%; height: 34%; }
  .d3 .opus { right: 4%; bottom: 7%; height: 32vh; }
  .d3 .sol { right: auto; left: 3%; bottom: 8%; height: 10vh; }
  .d4 .judge { right: 50%; bottom: 6%; height: 28vh; transform: translateX(50%); }
  .d4 .opus { right: auto; left: 0; bottom: 5%; height: 17vh; }
  .d4 .sol { right: 0; bottom: 5%; height: 16vh; }
  .d5 .sol { right: 4%; bottom: 7%; height: 28vh; }
  .d5 .receipt { right: 52%; bottom: 4%; height: calc(8vh + var(--p) * 14vh); width: 5vh; }
  .d5 .sand { height: 16%; }
  .shade.left, .shade.hero { background: linear-gradient(180deg, rgba(6, 10, 20, 0.9) 0%, rgba(6, 10, 20, 0.62) 46%, rgba(6, 10, 20, 0.1) 70%, rgba(6, 10, 20, 0.35) 100%); }
  .overlay { padding: 16vh var(--gutter) 30vh; gap: 46vh; }
  .scene.hero .overlay { padding-top: 52px; }
  .beat { padding: 18px 18px; }
  .beat.hero h1 { font-size: clamp(40px, 11.5vw, 64px); margin: 8px 0 10px; }
  .beat.hero .tagline { font-size: 20px; margin-bottom: 8px; }
  .counter { font-size: 25px; margin-top: 10px; }
  .who { font-size: 14px; margin-top: 8px; }
  .beat.hero .subhead { font-size: 15px; }
  .beat.hero .ctas { margin-top: 14px; gap: 10px; }
  .beat.hero .btn { font-size: 18px; padding: 12px 18px; }
  .hero-floor { margin: 8px -10px 0; padding: 8px 10px 10px; border-radius: 14px; background: rgba(6, 10, 20, 0.82); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .hero-floor > :first-child { margin-top: 0; }
  .hero-floor .counter { margin-top: 8px; }
  .hero-floor .who { margin-top: 6px; }
  .media.fit-wide .poster { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 7%); height: auto; }
  .media.fit-wide .poster img { width: 118%; max-width: none; height: auto; max-height: 86vh; max-height: 86svh; margin-left: -9%; aspect-ratio: 16 / 9; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .media.fit-wide video { display: none; }
}
@media (min-width: 64rem), (orientation: landscape) and (min-width: 48rem) {
  .media.only-tall { display: none; }
}
@media (min-width: 48rem) and (orientation: landscape), (min-width: 64rem) {
  .scene.hero .overlay { padding-top: 11vh; }
  .beat.hero .subhead { max-width: 44ch; }
}
@media (orientation: landscape) and (min-width: 48rem) and (max-height: 820px) {
  .scene.hero .overlay { padding-top: 56px; }
  .beat.hero h1 { font-size: clamp(40px, 7.5vh, 86px); margin: 8px 0 10px; }
  .beat.hero .tagline { margin-bottom: 8px; }
  .counter { font-size: clamp(22px, 4.2vh, 40px); margin-top: 8px; }
  .who { margin-top: 8px; }
  .beat.hero .ctas { margin-top: 14px; }
}
.race-card { margin-top: 16px; }
.race-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.legend { display: flex; gap: 16px; font: 700 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.key::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.key.o::before { background: var(--gold); }
.key.s::before { background: var(--sol); }
.race-ctl { display: flex; gap: 10px; }
.race { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lane { display: grid; grid-template-columns: minmax(0, 15.5em) minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.lane-name { font: 600 12.5px/1.25 var(--mono); color: #C9D3E6; text-decoration: none; overflow-wrap: anywhere; }
.lane-name:hover { color: var(--gold); text-decoration: underline; }
.bars { display: grid; gap: 3px; padding-right: 4.2em; }
.bar { position: relative; height: 11px; width: calc(var(--w) * 100%); min-width: 3px; border-radius: 6px; transform-origin: 0 50%; }
.bar.o { background: linear-gradient(90deg, #E3B400, var(--gold)); box-shadow: 0 0 10px rgba(255, 207, 0, 0.45); }
.bar.s { background: linear-gradient(90deg, #E2561A, var(--sol)); }
.bar b { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font: 700 11px/1 var(--mono); color: var(--text); white-space: nowrap; }
.js .race.armed .bar { transform: scaleX(0); }
.js .race.armed .bar b { opacity: 0; }
.js .race.armed.run .bar { transform: scaleX(1); transition: transform calc(var(--s) * 1s / 60) linear; }
.js .race.armed.run .bar b { opacity: 1; transition: opacity 0.25s calc(var(--s) * 1s / 60); }
.race-card.mini { margin: 18px 0; padding: 16px 18px; border-radius: 14px; background: rgba(13, 20, 39, 0.8); border: 1px solid var(--line); }
.race-card.mini .lane { grid-template-columns: minmax(0, 1fr); }
.race-card.mini .bar { height: 16px; }
.race-card.mini .legend { margin-bottom: 10px; }
@media (max-width: 47.99rem) {
  .lane { grid-template-columns: minmax(0, 1fr); }
  .lane-name { font-size: 11.5px; }
}
.tape-wrap, .tests-wrap { width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { caption-side: top; text-align: left; font: 700 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); padding-bottom: 10px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th, thead td { font: 700 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom-color: rgba(255, 255, 255, 0.25); }
.tape th[scope="row"] { font-weight: 500; color: #C9D3E6; }
.tape td { font-variant-numeric: tabular-nums; }
.tape thead .o, .win.o { color: var(--gold); }
.tape thead .s, .win.s { color: var(--sol); }
.win { font-weight: 800; }
.tests td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tests th[scope="row"] a { color: var(--text); text-decoration: none; border-bottom: 1px dotted rgba(255, 207, 0, 0.6); }
.tests th[scope="row"] a:hover { color: var(--gold); }
.tests tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 47.99rem) {
  .tape { font-size: 14px; }
  .tape th, .tape td { padding: 8px 6px; }
  .tests thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tests, .tests tbody, .tests tr, .tests th, .tests td { display: block; width: 100%; }
  .tests tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tests th[scope="row"] { border: 0; padding: 4px 0 6px; font-size: 15px; }
  .tests td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; white-space: normal; }
  .tests td::before { content: attr(data-label); color: var(--muted); font: 600 12px/1.6 var(--mono); }
}
.band { position: relative; padding: clamp(64px, 11vh, 130px) 0; background: var(--deep); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 12% 0%, rgba(10, 164, 219, 0.13), transparent 50%), radial-gradient(ellipse at 92% 100%, rgba(255, 207, 0, 0.08), transparent 50%); }
.band .wrap > p { color: #C9D3E6; max-width: 66ch; }
.band .wrap > p + p { margin-top: 12px; }
.band .wrap > .tests-wrap { margin-top: 30px; }
.band-mascots { display: flex; gap: 10px; float: right; margin: 0 0 12px 16px; }
.band-mascots img { width: clamp(64px, 9vw, 120px); height: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 26px; clear: both; }
.card { padding: 20px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.card h3 { font-size: clamp(20px, 2vw, 26px); color: var(--gold); }
.card p { color: #D5DDEC; font-size: 16px; }
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 26px; }
.qa { padding: 20px; border-radius: 16px; background: rgba(13, 20, 39, 0.85); border: 1px solid var(--line); }
.qa h3 { font: 700 18px/1.3 var(--body); text-transform: none; color: var(--text); margin-bottom: 8px; }
.qa p { color: #C9D3E6; font-size: 16px; }
.downloads { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.downloads a { font-weight: 700; }
.downloads details:not([open]) > ul { display: none; }
.b9 h3 { margin-top: 34px; }
.b9 .phone { font-size: 18px; }
.job h1, .writeup h1 { font-family: var(--disp); font-size: clamp(40px, 6.6vw, 84px); line-height: 0.95; text-transform: uppercase; margin: 8px 0 16px; }
.job .what-we-asked { font-size: 19px; color: #D5DDEC; }
.job .times { margin-top: 18px; font: 400 clamp(22px, 2.6vw, 32px)/1.15 var(--comic); letter-spacing: 0.03em; color: var(--gold); }
.job .tests, .job .pick, .job .review, .job .note { margin-top: 10px; color: #D5DDEC; }
.job .quote { margin-top: 16px; }
.job .quote figcaption { margin: 0 0 6px; }
.job h1 { font-size: clamp(34px, 5.4vw, 68px); }
.jobnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 30px; }
.jobnav a { display: flex; flex-direction: column; gap: 4px; min-height: var(--tap); padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(13, 20, 39, 0.85); color: var(--text); text-decoration: none; max-width: 100%; }
.jobnav a.next { margin-left: auto; text-align: right; }
.jobnav .k { font: 700 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.jobnav .j { font-weight: 700; }
.jobnav a:hover .j, .jobnav a:focus-visible .j { text-decoration: underline; }
.vs { display: flex; gap: 14px; margin: 6px 0 14px; }
.vs .sticker { width: 96px; height: auto; }
.writeup .wrap > p, .writeup li { font-size: 18px; line-height: 1.7; color: #D5DDEC; }
.writeup .wrap > p + p { margin-top: 14px; }
.writeup h2 { margin-top: 44px; }
.writeup h3 { margin-top: 26px; }
.writeup ul { padding-left: 22px; margin: 14px 0; }
.writeup li + li { margin-top: 6px; }
.writeup .lead { font-size: 21px; color: var(--text); }
.writeup .tests-wrap { margin-top: 24px; }
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); background: #04070F; }
.foot p { font: 500 12.5px/1.6 var(--mono); color: #95A2BE; }
@supports (animation-timeline: view()) {
  .card, .qa { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes rise { from { opacity: 0.25; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .media.drawn .m.opus, .media.drawn .m.sol { animation: none; }
  .card, .qa { animation: none; }
  .btn { transition: none; }
}
.follow-band form { max-width: 38rem; }
.follow-band form[hidden] { display: none; }
.follow-band label { display: block; margin: 1rem 0 .5rem; }
.follow-band input[type=email] { display: block; width: 100%; padding: .8rem; font: inherit; color: #0D1427; background: #fff; border: 2px solid #FFCF00; border-radius: .4rem; }
.follow-consent { font-size: 1rem; line-height: 1.6; }
.follow-band input[type=checkbox] { width: 1.2rem; height: 1.2rem; vertical-align: middle; }
.follow-band button:disabled { opacity: .6; cursor: wait; }
.follow-band :focus-visible { outline: 3px solid #FFCF00; outline-offset: 4px; }
.follow-trap { display: none; }