/*
 * Homepage hero (zip 186): dark green, the mark's bend turning slowly, a live
 * race console. Everything is scoped under .hx so nothing here reaches the
 * rest of site.css. Solid colours on text and buttons; the only gradients are
 * the background glow and the fade at the tape's ends.
 */
.hx{--hx-abyss:#05140D;--hx-panel:#0A2318;--hx-panel2:#0C2A1D;--hx-brass:#B98A3E;--hx-brass-lt:#D4A85C;--hx-brass-hi:#E6C27E;
  --hx-mint:#63D9A0;--hx-ink:#E9EFE9;--hx-on:#B9D3C3;--hx-dim:#7FA995;--hx-faint:#3E6B55;
  --hx-hair:rgba(212,168,92,.20);--hx-hair2:rgba(185,211,195,.10);--hx-fh:"Inter Tight";--hx-fm:"IBM Plex Mono";
  position:relative;overflow:hidden;isolation:isolate;color:var(--hx-ink);
  background:
    radial-gradient(1100px 620px at 78% 30%, rgba(26,92,62,.55), transparent 60%),
    radial-gradient(900px 500px at 8% 100%, rgba(185,138,62,.10), transparent 65%),
    linear-gradient(180deg,#06170F 0%, var(--hx-abyss) 70%)}
.hx-grid{position:absolute;inset:0;z-index:-2;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--hx-hair2) 1px,transparent 1px),linear-gradient(90deg,var(--hx-hair2) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(900px 560px at 62% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(900px 560px at 62% 40%,#000 20%,transparent 75%)}
.hx-bend{position:absolute;z-index:-1;right:-260px;top:-180px;width:1100px;height:1100px;opacity:.45;pointer-events:none;animation:hx-turn 140s linear infinite}
.hx-bend circle{fill:none;stroke:rgba(212,168,92,.28);stroke-width:1}
@keyframes hx-turn{to{transform:rotate(360deg)}}

/* top and bottom only: the side padding is .wrap's (zip 194; "0" here had wiped it, so the hero sat flush on phones) */
.hx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,610px);gap:56px;align-items:center;padding-top:76px;padding-bottom:64px}
.hx-kw{margin:0 0 24px;font:500 12.5px var(--hx-fm);letter-spacing:.22em;text-transform:uppercase;color:var(--hx-brass-lt);display:flex;align-items:center;gap:12px}
.hx-kw::before{content:"";width:28px;height:1px;background:var(--hx-brass-lt)}
.hx-title{display:block;margin:0;color:#fff;font-family:var(--hx-fh),system-ui,sans-serif;font-weight:300;letter-spacing:-.035em;line-height:1.06;font-size:clamp(38px,4.6vw,64px)}
.hx-title em{font-style:normal;color:var(--hx-brass-lt)}
.hx-lead{margin:26px 0 0;max-width:50ch;font-size:17px;line-height:1.65;color:var(--hx-on);font-weight:300}
.hx-cta{display:flex;gap:12px;margin:34px 0 0}
.hx-b{display:inline-flex;align-items:center;justify-content:center;min-width:156px;height:48px;padding:0 22px;border-radius:16px;
  font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.hx-brass{color:#1A1309;background:var(--hx-brass)}.hx-brass:hover{background:var(--hx-brass-lt);color:#1A1309}
.hx-line{color:var(--hx-ink);border-color:rgba(212,168,92,.38)}.hx-line:hover{border-color:var(--hx-brass-lt);color:#fff}
.hx-note{margin:16px 0 0;font:400 12.5px var(--hx-fm);color:var(--hx-dim)}
.hx-dials{display:grid;grid-template-columns:repeat(3,1fr);margin:44px 0 0;border-top:1px solid var(--hx-hair);max-width:540px}
.hx-dial{padding:18px 0 0}.hx-dial + .hx-dial{padding-left:22px;border-left:1px solid var(--hx-hair2)}
.hx-dial b{display:block;font-family:var(--hx-fh);font-weight:300;font-size:30px;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.hx-dial span{display:block;margin-top:4px;font:400 11.5px var(--hx-fm);letter-spacing:.12em;text-transform:uppercase;color:var(--hx-dim);white-space:nowrap}

/* the race console */
.hx-con{position:relative;border-radius:16px;background:var(--hx-panel);border:1px solid var(--hx-hair);box-shadow:0 40px 120px rgba(0,0,0,.55);overflow:hidden}
.hx-head{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-bottom:1px solid var(--hx-hair2);background:var(--hx-panel2)}
.hx-dots{display:flex;gap:6px}.hx-dots i{width:9px;height:9px;border-radius:50%;background:#1F4634}
.hx-tabs{display:flex;gap:4px;margin-left:6px;min-width:0}
.hx-tab{font:400 12px var(--hx-fm);color:var(--hx-dim);padding:6px 0;width:138px;text-align:center;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:1px solid transparent;background:none}
.hx-tab.on{color:var(--hx-brass-hi);border-color:var(--hx-hair);background:rgba(212,168,92,.07)}
.hx-live{margin-left:auto;display:flex;align-items:center;gap:8px;font:400 11.5px var(--hx-fm);color:var(--hx-dim);letter-spacing:.06em;white-space:nowrap}
.hx-live i{width:7px;height:7px;border-radius:50%;background:var(--hx-mint);animation:hx-pulse 2.4s ease-in-out infinite}
@keyframes hx-pulse{50%{opacity:.35}}
.hx-req{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;font:400 13px var(--hx-fm);white-space:nowrap;overflow:hidden;border-bottom:1px solid var(--hx-hair2)}
.hx-verb{color:var(--hx-abyss);background:var(--hx-brass-lt);border-radius:6px;padding:2px 7px;font-size:11px;letter-spacing:.06em}
.hx-path{color:#fff}.hx-cur{display:inline-block;width:7px;height:14px;background:var(--hx-brass-lt);vertical-align:-2px;margin-left:2px;animation:hx-blink 1s steps(1) infinite}
@keyframes hx-blink{50%{opacity:0}}
.hx-meta{margin-left:auto;color:var(--hx-dim);font-size:11.5px}

.hx-course{position:relative;height:244px;border-bottom:1px solid var(--hx-hair2)}
.hx-course svg{position:absolute;inset:0;width:100%;height:100%}
.hx-rail{fill:none;stroke:rgba(212,168,92,.30);stroke-width:1}
.hx-turf{fill:none;stroke:#0E2E20;stroke-width:30}
.hx-furl{fill:none;stroke:rgba(185,211,195,.10);stroke-width:1;stroke-dasharray:3 7}
.hx-gate line{stroke:rgba(212,168,92,.35);stroke-width:1}
.hx-gate text{font:400 10px var(--hx-fm);fill:var(--hx-faint);letter-spacing:.08em}
.hx-gate .hx-split{fill:var(--hx-brass-hi);opacity:0;transition:opacity .4s}
.hx-gate.hit line{stroke:var(--hx-brass-hi);stroke-width:1.6}
.hx-gate.hit text{fill:var(--hx-dim)}.hx-gate.hit .hx-split{opacity:1}
.hx-run .hx-halo{fill:none;stroke:var(--hx-panel);stroke-width:2.5}
.hx-run circle:not(.hx-halo){fill:#123B29;stroke:#5E9478;stroke-width:1}
.hx-run text{font:500 8.5px var(--hx-fm);fill:var(--hx-on);text-anchor:middle;dominant-baseline:central}
.hx-run.lead circle:not(.hx-halo){fill:var(--hx-brass);stroke:var(--hx-brass-hi)}
.hx-run.lead text{fill:#1A1309}
.hx-clock{position:absolute;left:18px;top:14px;font:400 26px var(--hx-fm);color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hx-clock small,.hx-where small{display:block;font-size:10px;color:var(--hx-faint);letter-spacing:.14em;margin-bottom:2px}
.hx-where{position:absolute;right:18px;top:14px;text-align:right;font:400 12px var(--hx-fm);color:var(--hx-dim)}

.hx-low{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hx-board{position:relative;height:232px;border-right:1px solid var(--hx-hair2);overflow:hidden}
.hx-board .hx-hd,.hx-row{display:grid;grid-template-columns:26px 26px minmax(0,1fr) 62px;align-items:center;gap:8px;padding:0 16px}
.hx-board .hx-hd{height:30px;font:400 10px var(--hx-fm);color:var(--hx-faint);letter-spacing:.12em;border-bottom:1px solid var(--hx-hair2)}
.hx-board .hx-hd span:last-child,.hx-row .hx-gap{text-align:right}
.hx-row{position:absolute;left:0;right:0;top:30px;height:25px;font-size:12px;color:var(--hx-on);transition:transform .45s cubic-bezier(.3,.7,.3,1),background .3s}
.hx-row .hx-pos{font:400 11.5px var(--hx-fm);color:var(--hx-dim);font-variant-numeric:tabular-nums}
.hx-row .hx-no{width:22px;height:18px;border-radius:5px;border:1px solid #2F5A46;font:400 10.5px var(--hx-fm);display:grid;place-items:center}
.hx-row .hx-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-row .hx-gap{font:400 11.5px var(--hx-fm);color:var(--hx-dim);font-variant-numeric:tabular-nums}
.hx-row.first{background:rgba(212,168,92,.07)}
.hx-row.first .hx-no{background:var(--hx-brass);border-color:var(--hx-brass);color:#1A1309}
.hx-row.first .hx-nm{color:#fff}.hx-row.first .hx-gap{color:var(--hx-brass-hi)}
.hx-stream{position:relative;height:232px;overflow:hidden;padding:10px 14px 0;font:400 11.5px/1.75 var(--hx-fm)}
.hx-stream .hx-hd{font-size:10px;color:var(--hx-faint);letter-spacing:.12em;margin-bottom:6px}
.hx-ev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hx-on);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.hx-ev.in{opacity:1;transform:none}.hx-ev.old{opacity:.38}
.hx-k{color:#8FB3A0}.hx-s{color:var(--hx-brass-hi)}.hx-n{color:var(--hx-mint)}.hx-p{color:var(--hx-faint)}
.hx-foot{display:flex;align-items:center;gap:18px;height:42px;padding:0 18px;border-top:1px solid var(--hx-hair2);font:400 11.5px var(--hx-fm);color:var(--hx-dim);white-space:nowrap;background:var(--hx-panel2)}
.hx-foot .hx-ok{color:var(--hx-mint)}.hx-foot .hx-sp{margin-left:auto}

.hx-tape{position:relative;border-top:1px solid var(--hx-hair);background:rgba(0,0,0,.22);overflow:hidden;height:46px}
.hx-tape::before,.hx-tape::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.hx-tape::before{left:0;background:linear-gradient(90deg,var(--hx-abyss),transparent)}.hx-tape::after{right:0;background:linear-gradient(-90deg,var(--hx-abyss),transparent)}
.hx-tape-in{display:flex;gap:44px;align-items:center;height:100%;width:max-content;animation:hx-tape 80s linear infinite;font:400 12px var(--hx-fm);color:var(--hx-dim)}
.hx-tape-in span{white-space:nowrap}.hx-tape-in b{font-weight:400;color:#fff}.hx-tape-in em{font-style:normal;color:var(--hx-brass-lt)}.hx-tape-in i{font-style:normal;color:var(--hx-faint)}
@keyframes hx-tape{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){.hx-bend,.hx-tape-in,.hx-live i{animation:none}}
@media (max-width:1060px){.hx-in{grid-template-columns:1fr;gap:44px;padding-top:56px}}
@media (max-width:640px){
  .hx-in{padding-top:40px}
  .hx-cta{flex-direction:column}.hx-cta .hx-b{width:100%}
  .hx-dial b{font-size:22px}.hx-dial + .hx-dial{padding-left:12px}.hx-dial span{letter-spacing:.06em}
  .hx-tab{width:auto;padding:6px 10px}.hx-tabs .hx-tab:not(.on){display:none}.hx-meta{display:none}
  .hx-course{height:200px}.hx-where{display:none}.hx-low{grid-template-columns:1fr}
  .hx-board{border-right:0;border-bottom:1px solid var(--hx-hair2)}.hx-stream{height:150px}
}

/* the course, zip 199: a true oval, exactly parallel rails, the race's stretch lit */
.hx-infield{fill:rgba(99,217,160,.025);stroke:none}
.hx-railband{fill:none;stroke:rgba(212,168,92,.34);stroke-width:36}
.hx-turf{fill:none;stroke:#0B271B;stroke-width:34}
.hx-lit{fill:none;stroke:#0F3426;stroke-width:34;stroke-linejoin:round}
.hx-furl{fill:none;stroke:rgba(185,211,195,.07);stroke-width:1;stroke-dasharray:2 7}
.hx-poles line{stroke:rgba(212,168,92,.5);stroke-width:1;stroke-linecap:round}
.hx-trail{fill:none;stroke:var(--hx-brass-lt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.hx-gate line{stroke:rgba(185,211,195,.22);stroke-width:1;transition:stroke .4s}
.hx-gate text{font:400 9.5px var(--hx-fm);fill:var(--hx-faint);letter-spacing:.08em;transition:fill .4s}
.hx-gate.hit line{stroke:var(--hx-brass-hi);stroke-width:1.4}
.hx-start line{stroke:rgba(185,211,195,.4);stroke-dasharray:2 2}
.hx-post line{stroke:var(--hx-brass-lt);stroke-width:2;stroke-linecap:round}
.hx-run .hx-halo{fill:none;stroke:var(--hx-panel);stroke-width:2}
.hx-run circle:not(.hx-halo){fill:#123B29;stroke:#5E9478;stroke-width:1;transition:fill .3s,stroke .3s}
.hx-run text{font:500 8px var(--hx-fm);fill:var(--hx-on);text-anchor:middle;dominant-baseline:central}
.hx-run.lead circle:not(.hx-halo){fill:var(--hx-brass);stroke:var(--hx-brass-hi)}
.hx-run.lead text{fill:#1A1309}
.hx-run.lead .hx-halo{stroke:rgba(212,168,92,.25);stroke-width:5}