/* ===========================================================================
RevBase website — shared stylesheet
Transcribed from the Claude Design mockup "RevBase Web - Home.dc.html".
Colours, type, radii and spacing are the mockup's own values, not new ones.
Sections marked NEW are additions the mockup did not cover (responsive
rules, and the contact/legal pages, which have no design of their own).
========================================================================= */
/* --- Fonts — NEW (2026-08-04). Self-hosted, previously Google Fonts. ---------
Built from the SAME TTFs the Flutter app bundles (`assets/fonts/`), subset to
Google's own latin + latin-ext unicode-ranges, so glyph coverage is identical
to what the CDN was serving — verified face by face, nothing dropped.
Regenerate with `scripts/build-website-fonts.py` (see website/README.md).
Only the six faces this stylesheet uses are built. The old asked for
Barlow 500/700 (never used here) and missed JetBrains Mono 600 (used once, by
`.badge-going`, and it fell back to 700 then as it does now).
`font-display:swap` matches the CDN's behaviour. Files are local, so the swap
window is effectively never hit. Licences sit beside the fonts, per the OFL. */
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/JetBrainsMono-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/JetBrainsMono-700.woff2) format("woff2")}
html,body{margin:0;padding:0;background:#0E1013;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#00b3a4;text-decoration:none}
a:hover{color:#4fd8cb}
::selection{background:#00b3a4;color:#141414}
html{scroll-behavior:smooth} /* NEW */
body{background:#0E1013;color:#F2F3F5;font-family:Barlow,sans-serif;min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}
section{scroll-margin-top:90px} /* NEW — clears the sticky header */
/* `.wrap` sets ONLY horizontal padding, as longhands. It shares elements with
the section-padding classes below, so a `padding:` shorthand here would reset
their vertical padding to zero — which is exactly the bug this replaced. */
.wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.hatch{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.kicker-row{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.kicker-tick{width:14px;height:3px;border-radius:2px;background:#00b3a4}
.kicker{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* ===== Header ===== */
header{position:sticky;top:0;z-index:60;background:rgba(13,15,17,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
.header-inner{height:74px;display:flex;align-items:center;gap:36px}
/* The real brand logo replaced the CSS-drawn mark + Barlow wordmark on
2026-08-03. revbase-logo.svg is a 204 KB wrapper around a bitmap with no
vector paths, so the bitmap was extracted and shipped at 505x184 (4x the
46px display height) for 67 KB instead. The lockup is stacked, which is why
it needs ~46px rather than the 34px the old square mark used. */
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{height:46px;width:auto;display:block;flex:none}
nav{display:flex;align-items:center;gap:28px;flex:1}
.nav-link{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.nav-link:hover,.nav-link.current{color:#F2F3F5}
.header-actions{display:flex;align-items:center;gap:12px}
.contact-link{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.62);padding:11px 4px}
.contact-link:hover{color:#F2F3F5}
.btn-primary{font:700 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;background:#00b3a4;color:#141414;padding:12px 18px;border-radius:14px}
.btn-primary:hover{background:#12c9b9;color:#141414}
/* ===== Hero ===== */
main{flex:1}
.hero{padding-top:56px}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:40px;align-items:center;min-height:560px}
.hero-copy{padding:8px 0}
.hero-copy .kicker-row{margin-bottom:16px}
.hero-copy .kicker{color:rgba(255,255,255,.7)}
h1{font:700 72px/.94 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0;text-wrap:balance}
.hero-sub{font:400 17px/1.55 Barlow,sans-serif;color:rgba(255,255,255,.72);margin:22px 0 0;max-width:480px;text-wrap:pretty}
.hero-ctas{display:flex;gap:12px;margin-top:32px}
.btn-hero{font:700 11.5px "JetBrains Mono",monospace;letter-spacing:.1em;background:#00b3a4;color:#141414;padding:16px 26px;border-radius:16px}
.btn-hero:hover{background:#12c9b9;color:#141414}
.btn-ghost{font:700 11.5px "JetBrains Mono",monospace;letter-spacing:.1em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#F2F3F5;padding:16px 26px;border-radius:16px}
.btn-ghost:hover{background:rgba(255,255,255,.16);color:#F2F3F5}
.hero-media{position:relative;border-radius:24px;overflow:hidden;background:#1C2024;height:560px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.hero-media .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.3) 100%)}
.hero-media .hatch{opacity:.6}
.hero-stripes{position:absolute;top:-30px;bottom:-30px;right:46px;width:110px;pointer-events:none;transform:skewX(-14deg);display:flex;gap:14px}
.hero-stripes .s1{width:46px;background:#00b3a4;opacity:.92}
.hero-stripes .s2{width:20px;background:#F2F3F5;opacity:.9}
/* Stand-in for the mockup's : shows assets/*.jpg when present,
otherwise the labelled placeholder. */
/* Carbon hatch belongs to the EMPTY slot only — never over a real photo (Harry, 2026-08-03,
same rule as the app). It lives inside .img-slot so a filled slot loses it automatically. */
.img-slot{position:absolute;inset:0;background:#1C2024;display:grid;place-items:center;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.img-slot:has(img){background-image:none}
.img-slot::before{content:attr(data-label);font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.35);border:1px dashed rgba(255,255,255,.22);border-radius:12px;padding:12px 18px;text-align:center}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The hero slot changes shape a lot with viewport — 1.02:1 on desktop, ~1.9:1 once the
grid stacks, ~1.05:1 on a phone. So hero.jpg ships at its native 1.98:1 and the crop is
chosen here: 28% puts the Audi centred in the narrow desktop window, while the wider
stacked slot simply reveals more of the frame and both cars. */
.hero-media .img-slot img{object-position:28% center}
/* ===== Five pillar cards ===== */
.pillars{padding-top:96px}
h2{font:700 46px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0 0 28px;max-width:620px}
.pillar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pillar{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:22px;position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column}
.pillar:hover{border-color:rgba(0,179,164,.45)}
.pillar-inner{position:relative;display:flex;flex-direction:column;height:100%;gap:14px}
.pillar-icon{width:42px;height:42px;border-radius:13px;background:rgba(0,179,164,.14);border:1px solid rgba(0,179,164,.34);display:grid;place-items:center;flex:none}
.pillar-title{font:700 20px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.pillar-desc{font:400 13.5px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.6)}
.pillar-tag{margin-top:auto;font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.4)}
/* NEW (2026-08-15) — the About row. It reuses `.pillar` unchanged, but the row
holds three cards where `.pillar-grid` holds five, so it needs its own base
track. `gap` and `margin-top` are values already used elsewhere in this file
(`.pillar-grid` and `.bullets`), not new ones, and the responsive steps below
are `.pillar-grid`'s own breakpoints reused verbatim. */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
/* ===== Feature sections ===== */
.feature{padding-top:110px}
.feature-grid{display:grid;gap:56px;align-items:center}
.feature-grid.copy-first{grid-template-columns:1fr 1.05fr}
.feature-grid.panel-first{grid-template-columns:1.05fr 1fr}
.h2-lg{font:700 52px/.98 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0;max-width:none}
.feature-sub{font:400 16.5px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.66);margin:18px 0 0;max-width:460px;text-wrap:pretty}
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.bullet{display:flex;gap:12px;align-items:flex-start}
.bullet-dot{width:7px;height:7px;border-radius:2px;background:#00b3a4;margin-top:7px;flex:none}
.bullet-text{font:400 15px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.78)}
.bullet-text b{font-weight:600}
.panel{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.garage-photo{position:relative;height:240px;background:#1C2024}
.garage-photo .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.2) 55%,transparent 100%)}
/* The mockup put teal/white livery stripes over this photo too. Removed on
Harry's call, 2026-08-03 — they cut across the car. The hero keeps its own. */
.garage-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.car-name{font:700 30px/1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.car-sub{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-top:6px}
.badge-default{font:700 9px "JetBrains Mono",monospace;padding:6px 9px;border-radius:7px;background:#00b3a4;color:#141414}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.stat{border-radius:16px;background:#0D0F11;border:1px solid rgba(255,255,255,.08);padding:14px;position:relative;overflow:hidden;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between}
.stat .hatch{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 8px,transparent 8px 16px)}
.stat-label{position:relative;font:500 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.44)}
.stat-body{position:relative}
.stat-value{font:700 24px "JetBrains Mono",monospace}
.stat-note{font:500 9px "JetBrains Mono",monospace;color:rgba(255,255,255,.4);margin-top:4px}
.amber{color:#E8B23A}.green{color:#4CC38A}.teal{color:#00b3a4}.red{color:#FF8078}
.record-list{padding:0 14px 14px;display:flex;flex-direction:column;gap:1px}
.record{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#0D0F11;border:1px solid rgba(255,255,255,.08)}
.record:first-child{border-radius:16px 16px 6px 6px}
.record:last-child{border-radius:6px 6px 16px 16px}
.record-main{flex:1}
.record-title{font:600 13.5px Barlow,sans-serif}
.record-sub{font:500 10px "JetBrains Mono",monospace;color:rgba(255,255,255,.45);margin-top:3px}
.record-price{font:700 14px "JetBrains Mono",monospace}
.track-panel{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:20px;box-shadow:0 12px 30px rgba(0,0,0,.5);position:relative;overflow:hidden}
.track-inner{position:relative;display:flex;flex-direction:column;gap:14px}
.track-head{display:flex;align-items:flex-end;justify-content:space-between}
.track-name{font:700 26px/1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.track-sub{font:500 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-top:6px}
.session-chip{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;background:rgba(255,128,120,.14);border:1px solid rgba(255,128,120,.3)}
.session-dot{width:7px;height:7px;border-radius:50%;background:#FF8078}
.session-label{font:700 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:#FF8078}
.lap-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lap-stat{border-radius:16px;background:#0D0F11;border:1px solid rgba(255,255,255,.08);padding:14px}
.lap-stat-label{font:500 9px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.44)}
.lap-stat-value{font:700 24px "JetBrains Mono",monospace;margin-top:8px}
.lap-stat-unit{font-size:13px;color:rgba(255,255,255,.45)}
.lap-table{border-radius:16px;background:#0D0F11;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.lap-row{display:grid;grid-template-columns:44px 1fr 84px 74px;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.lap-row:last-child{border-bottom:none}
.lap-row.head{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);font:700 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.4)}
.lap-num{font:700 12px "JetBrains Mono",monospace;color:rgba(255,255,255,.55)}
.sectors{display:flex;gap:4px}
.sectors i{height:6px;border-radius:3px;background:rgba(255,255,255,.22);display:block}
.sectors i.best{background:#00b3a4}
.lap-time{font:700 13px "JetBrains Mono",monospace;text-align:right}
.lap-delta{font:500 11px "JetBrains Mono",monospace;text-align:right;color:rgba(255,255,255,.4)}
.track-circuits{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.42);margin-top:26px}
/* ===== Clubs ===== */
.clubs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:28px}
.clubs-head .h2-lg{max-width:560px}
.clubs-head p{font:400 16.5px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.66);margin:0;max-width:400px;text-wrap:pretty}
.clubs-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.club-photo{position:relative;border-radius:24px;overflow:hidden;background:#1C2024;min-height:340px}
.club-photo .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 58%,transparent 100%)}
.club-caption{position:absolute;left:0;right:0;bottom:0;padding:24px;pointer-events:none}
.club-id{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.club-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#00b3a4 50%,#f2f3f5 50%);flex:none}
.club-name{font:600 15px Barlow,sans-serif}
.club-sub{font:500 10px "JetBrains Mono",monospace;color:rgba(255,255,255,.55);margin-top:3px}
.club-headline{font:700 34px/1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.club-side{display:flex;flex-direction:column;gap:10px}
.club-card{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:20px;position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.club-card-head{position:relative;display:flex;align-items:center;justify-content:space-between}
.club-card-label{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.badge-going{font:700 9px "JetBrains Mono",monospace;padding:5px 8px;border-radius:7px;background:rgba(76,195,138,.16);border:1px solid rgba(76,195,138,.32);color:#4CC38A}
.club-card-body{position:relative}
.event-title{font:700 26px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;margin-bottom:8px}
.event-sub{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.thread-title{font:600 15px/1.35 Barlow,sans-serif;margin-bottom:8px}
/* ===== CTA ===== */
.cta-panel{border-radius:24px;background:#16191C;border:1px solid rgba(255,255,255,.1);padding:56px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.cta-stripes{position:absolute;top:-40px;bottom:-40px;right:60px;width:220px;transform:skewX(-14deg);display:flex;gap:14px;opacity:.9}
.cta-stripes .s1{width:56px;background:#00b3a4}
.cta-stripes .s2{width:22px;background:#F2F3F5;opacity:.85}
.cta-copy{position:relative;max-width:620px}
.cta-copy h2{font:700 60px/.96 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0;max-width:none}
.cta-sub{font:400 17px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.68);margin:18px 0 0;max-width:480px;text-wrap:pretty}
.store-btns{display:flex;gap:12px;margin-top:32px}
.btn-store{display:flex;align-items:center;gap:11px;background:#00b3a4;color:#141414;padding:14px 22px;border-radius:16px}
.btn-store:hover{background:#12c9b9;color:#141414}
.btn-store span{font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em}
.btn-store-alt{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#F2F3F5;padding:14px 22px;border-radius:16px}
.btn-store-alt:hover{background:rgba(255,255,255,.14);color:#F2F3F5}
.btn-store-alt span{font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em}
/* Line under the beta button — the app is not on either store yet, so the CTA
has to say what signing up actually gets you. */
.store-note{position:relative;font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:rgba(255,255,255,.45);margin-top:16px;max-width:420px;line-height:1.6}
/* ===== Footer ===== */
footer{max-width:1240px;margin:0 auto;width:100%;padding:72px 32px 56px}
.footer-rule{height:1px;background:rgba(255,255,255,.09);margin-bottom:28px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:11px}
.footer-logo{height:32px;width:auto;display:block;flex:none;opacity:.85}
.footer-copy{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.42)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{font:600 12px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.footer-links a:hover{color:#F2F3F5}
/* ===========================================================================
NEW — pages the mockup does not cover (contact, legal).
Built only from components above: same panel, same kicker, same mono labels.
========================================================================= */
.page-head{padding-top:64px;padding-bottom:8px}
.page-head h1{font-size:60px}
.page-lede{font:400 17px/1.6 Barlow,sans-serif;color:rgba(255,255,255,.68);margin:20px 0 0;max-width:560px;text-wrap:pretty}
.page-body{padding-top:44px;padding-bottom:96px}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.form-panel{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:28px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.form-inner{position:relative;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:500 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.field .req{color:#00b3a4}
.field input,.field select,.field textarea{
font:400 15px/1.45 Barlow,sans-serif;color:#F2F3F5;background:#0D0F11;
border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:13px 15px;width:100%;
appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:150px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23F2F3F5' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#00b3a4;box-shadow:0 0 0 3px rgba(0,179,164,.18)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field-hint{font:400 12.5px/1.45 Barlow,sans-serif;color:rgba(255,255,255,.42)}
.field-error{font:500 11px "JetBrains Mono",monospace;letter-spacing:.04em;color:#FF8078;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:rgba(255,128,120,.55)}
.field.invalid .field-error{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* spam honeypot */
.btn-submit{font:700 11.5px "JetBrains Mono",monospace;letter-spacing:.1em;background:#00b3a4;color:#141414;padding:16px 26px;border-radius:16px;border:none;cursor:pointer;align-self:flex-start}
.btn-submit:hover{background:#12c9b9}
.btn-submit[disabled]{opacity:.55;cursor:default}
.form-status{font:400 14.5px/1.5 Barlow,sans-serif;border-radius:16px;padding:14px 16px;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(76,195,138,.14);border:1px solid rgba(76,195,138,.34);color:#9fe0c0}
.form-status.err{background:rgba(255,128,120,.13);border:1px solid rgba(255,128,120,.32);color:#ffb3ad}
.side-card{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:24px;position:relative;overflow:hidden;margin-bottom:10px}
.side-card:last-child{margin-bottom:0}
.side-inner{position:relative}
.side-title{font:700 22px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px}
.side-text{font:400 14.5px/1.55 Barlow,sans-serif;color:rgba(255,255,255,.64)}
.side-text + .side-text{margin-top:10px}
.side-mono{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-top:14px}
/* Legal */
.legal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.legal-card{background:#16191C;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:200px}
.legal-card:hover{border-color:rgba(0,179,164,.45)}
.legal-card .pillar-icon{margin-bottom:2px}
.legal-card-title{font:700 22px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#F2F3F5}
.legal-card-desc{font:400 13.5px/1.5 Barlow,sans-serif;color:rgba(255,255,255,.6)}
.legal-card-go{margin-top:auto;font:700 9.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:#00b3a4}
.notice{background:rgba(232,178,58,.1);border:1px solid rgba(232,178,58,.34);border-radius:16px;padding:16px 18px;margin-bottom:28px}
.notice-title{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:#E8B23A;margin-bottom:8px}
.notice-text{font:400 14px/1.55 Barlow,sans-serif;color:rgba(255,255,255,.72)}
/* Rendered legal document body */
.doc{max-width:760px}
.doc h2{font:700 30px/1.05 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:44px 0 14px;max-width:none;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.doc h2:first-of-type{margin-top:8px;border-top:none;padding-top:0}
.doc h3{font:600 17px/1.3 Barlow,sans-serif;margin:26px 0 10px;color:#F2F3F5}
.doc p{font:400 15.5px/1.7 Barlow,sans-serif;color:rgba(255,255,255,.72);margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{font:400 15.5px/1.7 Barlow,sans-serif;color:rgba(255,255,255,.72);margin-bottom:7px}
.doc b,.doc strong{color:#F2F3F5;font-weight:600}
.doc code{font:500 13px "JetBrains Mono",monospace;background:#0D0F11;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:2px 6px;color:#7fe3d9}
.doc hr{border:none;border-top:1px solid rgba(255,255,255,.09);margin:34px 0}
.doc blockquote{margin:0 0 18px;padding:14px 18px;background:#16191C;border:1px solid rgba(255,255,255,.09);border-left:3px solid #00b3a4;border-radius:0 16px 16px 0}
.doc blockquote p{margin:0 0 8px;color:rgba(255,255,255,.66);font-size:14.5px}
.doc blockquote p:last-child{margin-bottom:0}
.doc blockquote.warn{background:rgba(232,178,58,.1);border:1px solid rgba(232,178,58,.34);border-left:3px solid #E8B23A;border-radius:0 16px 16px 0}
.doc blockquote.warn p{color:rgba(255,255,255,.76)}
.doc blockquote.warn strong{color:#E8B23A}
.doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font:400 14px/1.5 Barlow,sans-serif}
.doc th,.doc td{border:1px solid rgba(255,255,255,.1);padding:10px 12px;text-align:left;color:rgba(255,255,255,.72);vertical-align:top}
.doc th{font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);background:#16191C}
.doc-scroll{overflow-x:auto}
.doc-meta{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:26px}
.back-link{font:700 10px "JetBrains Mono",monospace;letter-spacing:.12em;color:rgba(255,255,255,.5);display:inline-block;margin-bottom:20px}
.back-link:hover{color:#F2F3F5}
/* ===== NEW — responsive. The mockup is desktop-only.
Media-query overrides use padding-left/right longhands ONLY, so they can
never reset a section's vertical padding. ===== */
@media (max-width:1080px){
.pillar-grid{grid-template-columns:repeat(3,1fr)}
h1{font-size:60px}
.legal-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.wrap{padding-left:20px;padding-right:20px}
footer{padding-left:20px;padding-right:20px}
.hero-grid{grid-template-columns:1fr;min-height:0}
.hero-media{height:420px}
.feature-grid.copy-first,.feature-grid.panel-first{grid-template-columns:1fr;gap:32px}
.feature-grid.panel-first .track-panel{order:2}
.clubs-head{flex-direction:column;align-items:flex-start;gap:16px}
.clubs-grid{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
.cta-panel{padding:40px 28px}
.cta-stripes{display:none}
.cta-copy h2{font-size:46px}
.page-head h1{font-size:46px}
}
@media (max-width:720px){
nav{display:none}
.header-inner{gap:16px;justify-content:space-between}
.brand{flex:1}
.contact-link{display:none}
h1{font-size:46px}
.h2-lg{font-size:40px}
h2{font-size:36px}
.pillar-grid{grid-template-columns:1fr 1fr}
.about-grid{grid-template-columns:1fr 1fr}
.legal-grid{grid-template-columns:1fr}
.stat{aspect-ratio:auto;min-height:96px;gap:10px}
.stat-value{font-size:18px}
.lap-stat-value{font-size:18px}
.hero-ctas,.store-btns{flex-wrap:wrap}
.hero-media{height:320px}
.hero-stripes{right:20px}
.form-panel{padding:22px}
.doc h2{font-size:26px}
}
@media (max-width:460px){
.pillar-grid{grid-template-columns:1fr}
.about-grid{grid-template-columns:1fr}
.pillar{min-height:0}
.lap-row{grid-template-columns:34px 1fr 70px 56px;padding:11px 10px}
}
/* --- Cookie consent banner — NEW (2026-08-26). Injected by consent.js. -------
Panel = .pillar recipe; title = kicker type; copy = .pillar-desc; buttons =
the .btn-primary / .btn-ghost recipes as