/* Enthusiast Racing brand layer, Oct 2026.
   Night navy, electric blue and brushed gold, taken from the ERO logo set in img/brand/.
   Every public page loads this after its own styles, so the colors are set once here for the whole site.
   Gold is for actions and key accents, blue is for lines and focus, brushed metal is for the logo and impact boxes. */

:root{
  --blk:#050f1d;            /* night navy, the page */
  --blk2:#0b1c31;           /* pit navy, panels */
  --ink:#06101e;
  --yel:#e5b04f;            /* trophy gold */
  --gun:#24456f;
  --muted:#9fb1c7;
  --g1:#a8762f; --g2:#f2cd72; --g3:#c8913c;
  --blue:#1683ff;           /* arc blue */
  --line:#1a3150;
  --metal:linear-gradient(100deg,#a8762f 0%,#fbe1a0 32%,#c8913c 55%,#fde49c 76%,#a8762f 100%);
  --steel:linear-gradient(180deg,#ffffff 0%,#e6e2d8 45%,#aaa59b 55%,#f2efe9 100%);
  --hazard:linear-gradient(90deg,var(--blue) 0%,var(--blue) 30%,var(--yel) 50%,var(--blue) 70%,var(--blue) 100%);
}
body{background:var(--blk)}
::selection{background:var(--blue);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--blue)}

/* ---------- header: the ERO badge is the home mark ---------- */
.top{background:rgba(5,15,29,.97);border-bottom:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--blue),var(--yel) 50%,var(--blue));pointer-events:none}
.mark{align-items:center}
.mark b{font-size:0;flex:none;width:58px;height:46px;background:url(img/brand/ero-badge-128.webp) center/contain no-repeat;-webkit-background-clip:border-box;background-clip:border-box;color:transparent}
.mark span{color:#e8e4da}
.top nav a{color:#e6ebf2}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--g2);border-bottom-color:var(--blue)}
.top nav a.signin{border-color:var(--line);color:#b9c6d6}
.top nav a.signin:hover{border-color:var(--yel);color:var(--g2)}

/* ---------- footer ---------- */
footer{background:#030b16}
footer .ecr{font-size:0;display:inline-block;width:42px;height:34px;vertical-align:middle;margin-right:8px;background:url(img/brand/ero-badge-128.webp) center/contain no-repeat;-webkit-background-clip:border-box;background-clip:border-box;color:transparent}
footer a{text-decoration-color:var(--blue)}

/* ---------- section labels and buttons ---------- */
.sec-h .num{background:var(--metal);color:var(--ink)}
.btn.solid{background:var(--metal);border-color:#c8913c;color:var(--ink)}
.btn.solid:hover{filter:brightness(1.07)}
.btn.solid.dark{background:var(--blk);color:var(--g2);border-color:var(--blk)}

/* ---------- home hero: speed lines from the logo instead of hazard stripes ---------- */
.hero::before{background:
  radial-gradient(60% 70% at 80% 26%,rgba(22,131,255,.20),transparent 70%),
  linear-gradient(115deg,transparent 0 61%,rgba(22,131,255,.8) 61% 61.5%,transparent 61.5% 63.4%,rgba(229,176,79,.9) 63.4% 64.1%,transparent 64.1% 67%,rgba(22,131,255,.32) 67% 70%,transparent 70% 74%,rgba(229,176,79,.45) 74% 74.5%,transparent 74.5%),
  repeating-linear-gradient(115deg,transparent 0 46px,rgba(22,131,255,.045) 46px 58px)}
.hero h1{text-shadow:0 3px 0 #000,0 0 24px rgba(5,15,29,.6)}
.hero-lock{display:block;width:min(400px,86%);height:auto;margin:0 0 4px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))}
.hazard{height:4px}

/* ---------- inner page titles: the same speed lines, thinner than the old stripes ---------- */
.page-top{border-bottom:4px solid transparent;border-image:var(--hazard) 4}
.page-top::before{opacity:1;background:
  radial-gradient(55% 80% at 85% 20%,rgba(22,131,255,.16),transparent 70%),
  linear-gradient(115deg,transparent 0 70%,rgba(22,131,255,.7) 70% 70.5%,transparent 70.5% 72.5%,rgba(229,176,79,.85) 72.5% 73.2%,transparent 73.2% 76%,rgba(22,131,255,.28) 76% 79%,transparent 79% 83%,rgba(229,176,79,.4) 83% 83.5%,transparent 83.5%)}

/* ---------- impact boxes: brushed-metal frames ---------- */
.stats{background:linear-gradient(180deg,#0c2038,#081729);border-bottom:1px solid var(--line)}
.stat{position:relative;border-left:0;border-right:1px solid var(--line);padding-left:26px}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--metal)}
.stat b{background:var(--steel);-webkit-background-clip:text;background-clip:text;color:transparent}
.paddle{border:2px solid transparent;background:linear-gradient(180deg,#071426,#030a14) padding-box,var(--metal) border-box}
.board,.board-note{background:#020812;border-color:#16304f}
.tc-cash{background:#06111f}
.tc-run{background:var(--blk2)}
.why-p{border:2px solid transparent;border-top-width:6px;background:linear-gradient(180deg,#0e233d,#0a1a2e) padding-box,var(--metal) border-box}
.want{border:2px solid transparent;border-top-width:6px;background:linear-gradient(180deg,#0e233d,#0a1a2e) padding-box,var(--metal) border-box}
.s27-tab{border:2px solid transparent;border-top-width:6px;background:linear-gradient(rgba(7,19,35,.93),rgba(7,19,35,.93)) padding-box,var(--metal) border-box}
.s27-tab:hover{border-color:transparent;box-shadow:0 0 0 2px var(--blue)}
.s27-tab.big{background:var(--metal) padding-box,var(--metal) border-box;color:var(--ink);border-top-color:transparent}
.s27-tab.big b.y{color:#0b4fbf}
.s27-tab.big span{color:#1d2a3b}
.s27-tab.big u{border-bottom-color:var(--ink)}
.work{background:var(--metal);color:var(--ink)}
.work .sec-h .num{background:var(--blk);color:var(--g2)}
.work .tile{background:var(--blk);box-shadow:0 12px 26px rgba(4,14,28,.35)}

/* ---------- bands and panels ---------- */
.games{background:var(--blk2);border-bottom:1px solid var(--line)}
.why{border-bottom:1px solid var(--line)}
.why-q{border-left-color:var(--blue);background:#081a2f}
.why-txt .why-open{border-left-color:var(--blue)}
.shop-pic::before{background:rgba(229,176,79,.85)}
.why-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:12px 40px;align-items:center}
.why-crest{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
@media (max-width:860px){.why-head{grid-template-columns:1fr}.why-crest{max-width:340px;margin:6px auto 0}}
.s27{border-bottom:4px solid var(--blue);background:#04101e}
.s27-bg::after{background:linear-gradient(90deg,rgba(5,15,29,.97) 0%,rgba(5,15,29,.86) 46%,rgba(5,15,29,.35) 100%)}
.rfc-band{background:linear-gradient(90deg,#050f1d,#0c1f38);border-block:1px solid var(--line)}
.t-pm{background:linear-gradient(180deg,#071528 0%,#0b1d33 100%);border-top-color:var(--blue)}
.t-pm::before{background:var(--metal)}
.t-pm h3 span{color:#4aa3ff}
.pgal figure{border-color:var(--line);border-top-color:var(--yel)}
.rf{border-color:var(--line)}
.rf label.ck{background:#06111f;border-color:var(--line)}
.cm-bar{background:#081729}
.role{background:var(--line)}

/* ---------- tree challenge winner card ---------- */
.win-in{background:#06111f;border-color:var(--line);background-image:linear-gradient(115deg,transparent 0 70%,rgba(22,131,255,.12) 70% 73%,transparent 73% 77%,rgba(229,176,79,.09) 77% 79%,transparent 79%)}
.win p.win-next{background:#0b1c31;border-left-color:var(--blue)}
.win .board.cash b{text-shadow:0 0 8px rgba(229,176,79,.55),0 0 18px rgba(229,176,79,.22)}

/* ---------- tree challenge page art ---------- */
.velocity{display:block;width:min(560px,100%);height:auto;margin:0 0 6px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}

/* ---------- floating share button (its own styles load later in the page, so these carry "body" for weight) ---------- */
body .ecs-btn{background:var(--metal);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 2px rgba(22,131,255,.55)}
body .ecs-ico{background:var(--blk)}
body .ecs-btn::before{border-color:var(--blue)}
body .ecs-ico::after{background:linear-gradient(90deg,transparent,rgba(74,163,255,.6),transparent)}
body .ecs-panel{background:#06111f;border-color:var(--yel)}
body .ecs-panel::before{background:var(--hazard)}
body .ecs-g a:hover,body .ecs-g button:hover{border-color:var(--blue);background:#0b1c31}
body .ecs-g .ecs-copy{background:var(--metal);color:var(--ink);border-color:#c8913c}
body .ecs-g .ecs-copy:hover{background:var(--metal);filter:brightness(1.08);border-color:#c8913c}

/* ---------- big gold call-to-action panels become brushed metal ---------- */
.cta-row.light,.support,.portal-card,.deal-card.us{background:var(--metal)}
.tc-mode.on{background:var(--metal);border-color:#c8913c}

/* ---------- Oct 20: new logo at the entry, the IHRA strip, the $343 sponsor, hosting five races, RFC, racing services ---------- */
.hero-lock.nitro{width:min(560px,100%);margin:0 0 2px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.5))}
.hero .lede b.need{color:var(--g2);font-weight:600}
.ihra-strip{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin:0 0 30px;padding:9px 16px;
  background:linear-gradient(90deg,#9e0c24,#c8102e 30%,#c8102e 70%,#9e0c24);color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.2)}
.ihra-strip b{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:22px;line-height:1;letter-spacing:.02em}
.ihra-strip span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ihra-strip u{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.1;text-decoration:none;border-bottom:2px solid #fff}
.ihra-strip:hover,.ihra-strip:focus-visible{background:#e01b3a}
.ihra-strip[hidden]{display:none}
@media (max-width:560px){.ihra-strip{margin-bottom:22px;gap:2px 10px}.ihra-strip span{font-size:10.5px}}

/* the $343 cash game: when it goes live, and who sponsors it */
.tc-line .tc-live{display:block;margin:8px 0 6px;padding:6px 10px;border-left:3px solid var(--blue);background:rgba(22,131,255,.12);border-radius:0 4px 4px 0;color:#eef3fa;font-weight:600;font-size:14.5px}
.tc-line .tc-live[hidden]{display:none}
.tc-spon{display:flex;align-items:center;gap:12px;margin:2px 0 0;padding:8px 12px 8px 10px;border:2px solid transparent;border-radius:8px;
  background:linear-gradient(180deg,#0e233d,#0a1a2e) padding-box,var(--metal) border-box;color:#e8edf4;text-decoration:none;transition:transform .15s ease}
.tc-spon:hover{transform:translateY(-1px)}
.tc-spon-k{max-width:64px;font-family:var(--mono);font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#9fb1c7}
.tc-spon-logo{flex:none;display:grid;place-items:center;background:#fff;border-radius:6px;padding:4px 8px}
.tc-spon-logo img{display:block;width:92px;height:auto}
.tc-spon-n{font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:21px;line-height:1;color:var(--g2)}
.tc-spon-n small{display:block;margin-top:4px;font-family:var(--mono);font-style:normal;font-weight:500;font-size:10.5px;letter-spacing:.1em;color:#9fb1c7}

/* 2027: what we need to host five races */
.s27-need{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;max-width:1080px}
.s27-tab.need{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 18px 16px;border:2px solid transparent;border-top-width:6px}
.s27-tab.need i{font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.14em;color:#4aa3ff}
.s27-tab.need b{font-size:clamp(30px,3.2vw,40px)}
.s27-tab.need span{font-size:15px;color:#c9d3df}
.s27-tab.need u{margin-top:auto;padding-top:6px;align-self:flex-start;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:18px;text-decoration:none;color:var(--g2);border-bottom:2px solid var(--yel)}
@media (max-width:820px){.s27-need{grid-template-columns:1fr}}
.s27-paul{margin:18px 0 0;max-width:70ch;color:#d5dde8;font-size:16px}
.s27-paul b{color:var(--g2)}
.s27-more a+a{margin-left:18px}

/* Racers For Christ: their logo on the link out */
.rfc-logo{flex:none;display:block;border:2px solid transparent;border-radius:10px;padding:10px 14px;background:linear-gradient(#fff,#fff) padding-box,var(--metal) border-box;transition:transform .15s ease}
.rfc-logo:hover,.rfc-logo:focus-visible{transform:translateY(-2px)}
.rfc-logo img{display:block;width:180px;height:auto}
.rfc-band-t{flex:1 1 380px}
.rfc-top .rfc-logo{display:inline-block;margin:0 0 16px}
.rfc-top .rfc-logo img{width:220px}
.rfc-thanks{margin:18px 0 0;padding:12px 16px;border-left:4px solid var(--yel);background:#0b1c31;border-radius:0 6px 6px 0;color:#e3e8ef;max-width:70ch}
@media (max-width:560px){.rfc-logo img{width:150px}.rfc-top .rfc-logo img{width:180px}}

/* racing services page */
.svc-hero .wrap{padding-bottom:34px}
.svc-hero h1{font-size:clamp(48px,8vw,96px);font-style:italic;margin:8px 0 0;line-height:.95}
.svc-hero h1 em{color:var(--yel);font-style:italic}
.svc .svc-lede{max-width:62ch;margin:0 0 20px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px}
.svc-card{display:flex;flex-direction:column;gap:8px;padding:18px;border:2px solid transparent;border-top-width:6px;border-radius:6px;
  background:linear-gradient(180deg,#0e233d,#0a1a2e) padding-box,var(--metal) border-box;color:#d4dbe5;text-decoration:none}
.svc-card h3{margin:0;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:26px;line-height:1;color:#fff}
.svc-card p{margin:0;font-size:15.5px;line-height:1.5}
.svc-card u{margin-top:auto;padding-top:4px;align-self:flex-start;font-family:var(--display);font-weight:700;font-style:italic;text-transform:uppercase;font-size:17px;text-decoration:none;color:var(--g2);border-bottom:2px solid var(--yel)}
a.svc-card:hover{box-shadow:0 0 0 2px var(--blue)}
.svc-fine{margin:16px 0 0;color:#9fb1c7;font-size:14.5px;max-width:70ch}
.svc .ctas{margin-top:22px}
.money-tag[hidden]{display:none}
/* Oct 20: Services joined the nav; keep it on one row beside the badge on laptop screens */
@media (min-width:641px){.top nav{gap:4px 14px}}
@media (min-width:641px) and (max-width:1240px){.top nav a{font-size:16px}.top nav a.money,.top nav a.signin{font-size:14px;padding:4px 10px}}
@media (max-width:620px){.s27{padding-bottom:58px}.s27-credit{left:16px;right:16px;bottom:10px;text-align:right}}

/* Oct 20: Beat The Tree. Dove Fuels across the top of the game; the button is gray until it goes live, then green */
.paddle>.tc-spon-top{grid-column:1/-1;justify-self:stretch;margin:0}
.tc-spon-top .tc-spon-k{max-width:118px}
.tc-mode.tc-btt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;padding:6px 16px}
.tc-mode.tc-btt small{font-family:var(--mono);font-style:normal;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tc-mode.tc-btt.off{background:#1a1d22;border-color:#3a3f47;color:#7d848e;cursor:not-allowed;box-shadow:none}
.tc-mode.tc-btt.live{background:linear-gradient(180deg,#36e266,#129a39);border-color:#1fbf4a;color:#03140a;box-shadow:0 0 18px rgba(40,230,80,.45)}
.tc-mode.tc-btt.live.on{box-shadow:0 0 0 2px #fff,0 0 22px rgba(40,230,80,.6)}
.tc-test{display:grid;gap:8px;margin:2px 0 0;padding:12px 14px;border:1px dashed #4aa3ff;border-radius:6px;background:#0b1c31}
.tc-test[hidden]{display:none}
.tc-test .tc-head{margin:0;font-family:var(--display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:20px;color:#4aa3ff}
.tc-test .tc-ref{margin:0;font-size:13.5px;line-height:1.45;color:#cfd8e3}
.tc-test .tc-to{margin:0;display:grid;gap:4px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb1c7}
.tc-test input{min-height:44px;padding:0 12px;border-radius:4px;border:1px solid #3a4a60;background:#050f1d;color:#fff;font:16px/1.2 "IBM Plex Sans",system-ui,sans-serif}
.tc-test .rf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}