:root {
  color-scheme: dark;
  --bg: #0e1115; --surface: #171c23; --edge: #353d47; --ink: #f5f4ee;
  --muted: #b8c0c9; --accent: #e9fa54;
  font: 17px/1.55 Barlow, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
a { color: inherit; text-underline-offset: .22em; }
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; z-index: 3; left: 16px; top: -100px; background: var(--bg); padding: 12px; }
.skip:focus { top: 12px; }
.wrap { width: min(1280px, calc(100% - 72px)); margin-inline: auto; }
.header { background: #101318; border-bottom: 1px solid #343b43; }
.top, .foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.top { min-height: 81px; }
.brand { flex-shrink: 0; display: inline-flex; }
.brand img { width: auto; object-fit: contain; }
nav { display: flex; gap: clamp(16px, 3vw, 38px); }
nav a, .login { text-decoration: none; font-weight: 700; padding: 10px 0; white-space: nowrap; }
nav a[aria-current] { color: var(--accent); border-bottom: 2px solid var(--accent); }
.login { padding: 9px 14px; border: 1px solid var(--edge); }
h1, h2, h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; line-height: .98; margin: 0; }
h1 { font-size: clamp(64px, 10vw, 148px); letter-spacing: -.025em; text-transform: uppercase; font-weight: 800; }
h2 { font-size: clamp(42px, 5.2vw, 76px); font-weight: 700; }
h3 { font-size: 32px; font-weight: 700; }
p { margin: 14px 0; }
.tag { color: var(--accent); font-size: 14px; letter-spacing: .12em; font-weight: 700; margin: 0 0 14px; }
h1 em { color: var(--accent); font-style: normal; }
.intro { max-width: 560px; font-size: clamp(18px, 2vw, 22px); color: var(--muted); }
.hero { position: relative; isolation: isolate; min-height: 630px; display: grid; align-items: center; border-bottom: 3px solid var(--accent); }
.hero-home { background: #131923 url('assets/sprint-car.webp') 70% 52%/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0c1015f7 0%,#0c1015df 34%,#0c10154d 73%,#0c101521 100%); }
.hero-content { padding-block: 65px; }
.hero h1 { font-size: clamp(59px, 8vw, 112px); }
.hero .intro { color: #e0e5e8; max-width: 460px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 17px; min-height: 48px; color: #121610; background: var(--accent); border: 1px solid var(--accent); text-decoration: none; font-weight: 700; }
.button:hover { color: #111; background: #fff; border-color: #fff; }
.button.secondary { color: var(--ink); background: #0e1115b8; border-color: #79818a; }
.button.secondary:hover { color: var(--accent); border-color: var(--accent); }
.audiences { background: #171c23; border-bottom: 1px solid var(--edge); }
.audiences .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.audiences a { padding: 18px 16px; display: flex; gap: 10px; justify-content: space-between; align-items: center; border-left: 1px solid var(--edge); text-decoration: none; font-weight: 700; }
.audiences a:last-child { border-right: 1px solid var(--edge); }
.audiences span { color: var(--accent); }
.section { margin-block: 76px; }
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px,5vw,80px); align-items: center; }
.split img { display: block; width: 100%; min-width: 0; border: 1px solid var(--edge); aspect-ratio: 16/9; object-fit: cover; }
.split p:not(.tag) { color: var(--muted); max-width: 49ch; }
.split .button { margin-top: 10px; }
.showcase { padding: clamp(22px,4vw,50px); border: 1px solid var(--edge); border-left: 3px solid var(--accent); background: var(--surface); }
.page-intro { padding-block: 82px 48px; border-bottom: 1px solid var(--edge); }
.page-intro h1 { font-size: clamp(58px,9vw,122px); max-width: 15ch; }
.page-intro .button { margin-top: 12px; }
.pricing { margin-top: 44px; }
.price-top { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 18px; margin-bottom: 25px; }
.price-top h2 { font-size: clamp(38px, 4.4vw, 62px); }
.cycles { display: flex; padding: 4px; border: 1px solid var(--edge); }
.cycles button { padding: 8px 15px; border: 0; background: none; color: var(--ink); font-weight: 700; }
.cycles button[aria-pressed="true"] { background: var(--accent); color: #121610; }
.plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.plan { display: flex; flex-direction: column; padding: 24px 19px; border: 1px solid var(--edge); border-top: 3px solid var(--accent); background: var(--surface); scroll-margin-top: 20px; }
.plan:target { outline: 2px solid var(--accent); outline-offset: 3px; }
.plan p, .hint, .faq p, .feature-list p, footer p { color: var(--muted); }
.plan .price { margin-top: auto; margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.price strong { font: 800 54px/.95 "Barlow Condensed", sans-serif; }
.price span { color: var(--muted); }
.plan ul { border-top: 1px solid var(--edge); padding: 14px 0 0; margin: 20px 0 0; list-style: none; }
.plan li { margin: 6px 0; }
.plan li::before { content: '✓'; margin-right: 8px; color: var(--accent); }
.faq details { border-bottom: 1px solid var(--edge); padding: 14px 0; max-width: 800px; }
.faq summary { cursor: pointer; font-weight: 700; }
.feature-list > div { border-top: 1px solid var(--edge); padding: 22px 0; max-width: 850px; }
.feature-list h2 { margin-bottom: 25px; }
.feature-list a { color: var(--accent); }
footer { border-top: 1px solid var(--edge); padding-block: 26px; background: #101318; }
.foot > a:last-child { white-space: nowrap; }
@media (max-width: 950px) {
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wrap { width: calc(100% - 42px); }
}
@media (max-width: 720px) {
  .top { min-height: auto; padding-block: 14px 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  nav { grid-row: 2; grid-column: 1/-1; gap: 16px; flex-wrap: wrap; }
  .top .brand img { max-width: 155px; height: auto; }
  nav a, .login { font-size: 15px; }
  .hero { min-height: 580px; background-position: 61% center; }
  .hero::before { background: linear-gradient(90deg,#0c1015f2,#0c101596 100%); }
  .hero-content { padding-block: 48px; }
  .section { margin-block: 48px; }
  .page-intro { padding-block: 54px 30px; }
  .split { grid-template-columns: 1fr; }
  .audiences .wrap { grid-template-columns: 1fr 1fr; }
  .audiences a { padding: 10px; border: 0; }
  .audiences a:last-child { border: 0; }
  .foot { flex-wrap: wrap; }
}
@media (max-width: 490px) { .plan-grid { grid-template-columns: minmax(0,1fr); } }

/* Race livery: bright enamel, brushed dark panels and restrained track graphics. */
body { background: radial-gradient(ellipse at 76% 16%, #1b2229 0, transparent 46%), var(--bg); }
.header { background: linear-gradient(180deg,#1c2229,#101318); box-shadow: 0 8px 26px #0005; position: relative; z-index: 1; }
.login, .button, .cycles { border-radius: 8px; }
.button:not(.secondary) { background: linear-gradient(160deg,#f5ff99 0%,var(--accent) 48%,#c4dc34 100%); box-shadow: inset 0 1px 0 #fff9, 0 7px 17px #0004; }
.button:not(.secondary):hover { background: #f6ffae; }
.button:active { transform: translateY(1px); }
.audiences { background: linear-gradient(180deg,#242c35,#171c23); }
.audiences a:hover { background: #ffffff09; }
.showcase, .split img { border-radius: 13px; }
.showcase, .plan { background: linear-gradient(145deg,#262e37 0%,#191f27 45%,#14191f 100%); box-shadow: inset 0 1px 0 #fff1, 0 12px 30px #0004; }
.page-intro { background: linear-gradient(118deg,#151a20 28%,#252e35 100%); }
.plan-grid { gap: 17px; }
.plan { position: relative; overflow: hidden; border-radius: 14px; }
.plan::before { content: ""; position: absolute; pointer-events: none; right: -8px; top: 15px; width: 64px; height: 10px; transform: skewX(-26deg); background: repeating-linear-gradient(90deg,#e9fa5444 0 7px,transparent 7px 12px); }
.plan h3 { position: relative; }
.plan .price { gap: 6px 11px; padding: 7px 4px 5px; }
.price strong { display: inline-block; color: #f5ff83; font: 900 clamp(48px,4.55vw,74px)/1 "Barlow Condensed", "Arial Narrow", Impact, sans-serif; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.025em; transform: skewX(-9deg); -webkit-text-stroke: 1px #f9ffb6; text-shadow: 2px 3px 0 #596322, 4px 5px 0 #0a0d11; white-space: nowrap; }
.price span { white-space: nowrap; font-weight: 600; }
.cycles button { border-radius: 5px; }
@media (max-width: 950px) { .price strong { font-size: 64px; } }
@media (max-width: 540px) { .price strong { font-size: clamp(52px, 14vw, 64px); } }
.hero-home { background: #131923 url('assets/dirt-stock-car.jpg') right 46% / auto 152% no-repeat; }
.hero-home::before { background: linear-gradient(90deg,#101419 0%,#101419 31%,#101419f0 43%,#10141915 70%,#10141900 100%); }
.hero-home::after { content: ""; position: absolute; bottom: 0; right: 0; width: 105px; height: 20px; background: conic-gradient(#e9fa54 25%,#14191d 0 50%,#e9fa54 0 75%,#14191d 0) 0 0 / 20px 20px; clip-path: polygon(14% 0,100% 0,100% 100%,0 100%); }
.photo-credit { display: block; font-size: .8rem; }
@media (min-width: 1300px) { .hero-home { background-size: max(72%, 1050px) auto; } }
@media (max-width: 720px) {
  .hero-home { background-position: 55% top; background-size: auto 340px; align-items: end; }
  .hero-home::before { background: linear-gradient(180deg,transparent 9%,#10141918 27%,#101419 58%); }
  .hero-home .hero-content { padding-top: 243px; }
}

/* Interior race graphics, consistent gutters, and a compact mobile pit board. */
.wrap { width: min(1280px, calc(100% - clamp(36px, 6vw, 88px))); }
.page-intro { position: relative; isolation: isolate; min-height: 365px; padding-block: clamp(46px,7vw,94px); background: #151a20; }
.page-intro::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#151a20 9%,#151a20ee 32%,#151a2033 78%), url('assets/oval-race.svg') right center / min(75%, 970px) auto no-repeat; }
.hero-websites::before { background-position: center, right 38%; }
.hero-support::before { background-position: center, right 66%; }
.page-intro h1 { font-size: clamp(50px,7.6vw,105px); }
.page-intro .intro { color: #d7dce0; }
.audiences .wrap { gap: 1px; }
.faq details { padding: 16px 14px; }
.feature-list > div { padding-inline: 14px; }
.plan { padding: 25px clamp(17px,2vw,26px); }
.price strong { color: #efff65; paint-order: stroke fill; -webkit-text-stroke: 3px #090d10; text-shadow: 3px 4px 0 #07090b, 5px 7px 0 #07090bc9; }
.nav-toggle { display: none; }
.flag { width: 20px; height: 20px; background: conic-gradient(var(--accent) 25%,transparent 0 50%,var(--accent) 0 75%,transparent 0) 0 0/10px 10px; transform: skewX(-12deg); }
@media (max-width:720px) {
  .top { grid-template-columns: minmax(0,1fr) auto auto; padding-block: 14px; gap: 8px; }
  .top .brand img { max-width: min(155px, 35vw); }
  .top .login { padding: 8px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 6px; background: #242d35; color: var(--ink); border: 1px solid #535f65; border-radius: 7px; padding: 7px 8px; font-size: 14px; font-weight: 700; min-height: 42px; }
  .nav-toggle .flag { width: 15px; height: 15px; }
  .nav-toggle[aria-expanded="true"] { border-color: var(--accent); }
  #main-nav { display: grid; gap: 8px; padding: 12px 0 3px; }
  .nav-ready .nav-toggle[aria-expanded="false"] + #main-nav { display: none; }
  #main-nav a { display: grid; grid-template-columns: 2ch 1fr; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid #3d4952; border-left: 3px solid #6d7842; border-radius: 7px; background: linear-gradient(#2a333d,#1a2027); box-shadow: inset 0 1px #ffffff14,0 3px 0 #0b0e11; }
  #main-nav a::before { color: var(--accent); font-weight: 800; font-style: italic; }
  #main-nav a:nth-child(1)::before { content: '01' / ''; }
  #main-nav a:nth-child(2)::before { content: '02' / ''; }
  #main-nav a:nth-child(3)::before { content: '03' / ''; }
  #main-nav a:nth-child(4)::before { content: '04' / ''; }
  #main-nav a[aria-current] { border-color: var(--accent); }
  #main-nav a:active { transform: translateY(2px); }
  .page-intro::before { background: linear-gradient(90deg,#151a20f2,#151a2088),url('assets/oval-race.svg') 64% center / auto 88% no-repeat; }
}
.service-section .intro,.project-start p { max-width: 66ch; }
.service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:23px; }
.service-grid article { display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2.6vw,34px);border:1px solid var(--edge);border-top:2px solid #a4ae52;border-radius:11px;background:linear-gradient(145deg,#252e36,#181e25); }
.service-grid p,.project-start p { color:var(--muted); }
.service-grid article > .button { margin-top:auto; }
.service-grid .care-options { grid-column:span 2; }
@media(max-width:920px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){.service-grid{grid-template-columns:1fr;}.service-grid .care-options{grid-column:auto;}}

.has-video .hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 56%; pointer-events:none; }
.page-intro.has-video::before { background:linear-gradient(90deg,#10151aef 0%,#10151ada 33%,#10151a49 74%,#10151a27),linear-gradient(0deg,#10151aa0,transparent 45%); }
.hero-hosting .hero-video { object-position:center 55%; }
.hero-websites .hero-video { object-position:center 70%; }
.hero-support .hero-video { object-position:center 54%; }
.hero-home.has-video .hero-video { opacity:0; }
.hero-home.has-video.video-started .hero-video { opacity:1; }
.hero-home.has-video .hero-video { left:auto; width:74%; }
.motion-toggle { position:absolute; z-index:1; right:max(18px,calc((100% - 1280px)/2)); bottom:17px; border:1px solid #b8c0c9; border-radius:7px; padding:6px 11px; background:#10151a; color:#f5f4ee; font-size:13px; line-height:1.5; }
.motion-toggle:hover { border-color:var(--accent);color:var(--accent); }
@media (max-width:720px) {
  .page-intro.has-video { padding-bottom:76px; }
  .page-intro.has-video::before { background:linear-gradient(90deg,#10151af2,#10151a77),linear-gradient(0deg,#10151a94,transparent 60%); }
  .hero-home.has-video .hero-video { inset:0 0 auto; width:100%; height:340px; }
  .hero-home.has-video .hero-content { padding-bottom:74px; }
}

.pricing-lead { max-width: 55ch; color: var(--muted); margin-bottom: 0; }
.menu-open { overflow: hidden; }
.mobile-navigation { position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; color:var(--ink); background:radial-gradient(ellipse at 50% 40%,#292f32,#111519 76%); }
.mobile-nav-layout { min-height:100%; display:grid; align-items:center; padding:max(68px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(36px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); position:relative; }
.mobile-nav-layout::after { content:""; position:absolute; inset:auto 0 0; height:8px; background:repeating-linear-gradient(125deg,var(--accent) 0 10px,#151a1d 10px 20px); }
.mobile-nav-content { width:min(100%,410px); margin-inline:auto; text-align:center; }
.mobile-nav-content .tag { margin-bottom:8px; }
.mobile-nav-close { position:absolute; top:max(14px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); padding:8px 13px; min-height:44px; color:var(--ink); background:#20262c; border:1px solid #65717a; border-radius:8px; }
.mobile-nav-close span { color:var(--accent); margin-left:6px; }
#mobile-nav-links { display:grid; gap:12px; margin:22px 0 24px; }
#mobile-nav-links a { position:relative; display:grid; place-items:center; white-space:normal; min-height:57px; padding:11px 42px; font-size:18px; border:1px solid #515c65; border-radius:9px; background:linear-gradient(165deg,#303942,#20272e 57%,#181d23); box-shadow:inset 0 1px #ffffff25,0 4px #080b0d; }
#mobile-nav-links a::before { content:""; position:absolute; left:16px; width:12px; height:12px; transform:skewX(-14deg); border-left:3px solid var(--accent); border-right:3px solid var(--accent); }
#mobile-nav-links a[aria-current],#mobile-nav-links a:hover { border-color:var(--accent); color:var(--accent); }
#mobile-nav-links a:active { transform:translateY(2px); }
.mobile-nav-content > .login { display:inline-block; min-height:44px; }
@media(max-width:720px){.nav-ready #main-nav {display:none;} }
.mobile-menu-logo { display:block; width:min(240px,80%); height:auto; margin:0 auto 14px; }