:root {
--font-display: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
--font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
--fs-hero: 60px;        --lh-hero: 58px;
--fs-hero-sm: 38px;     --lh-hero-sm: 42px;
--fs-h1: 44px;          --lh-h1: 59.27px;
--fs-h2: 32px;          --lh-h2: 43.1px;
--fs-h3: 26px;          --lh-h3: 35.02px;
--fs-h4: 24px;          --lh-h4: 32.33px;
--fs-h5: 22px;          --lh-h5: 29.63px;
--fs-h6: 20px;          --lh-h6: 26.94px;
--fs-label-lg: 18px;    --lh-label-lg: 24.25px;
--fs-label: 16px;       --lh-label: 21.55px;
--fs-label-sm: 14px;    --lh-label-sm: 18.86px;
--fs-label-xs: 13px;    --lh-label-xs: 17.51px;
--fs-label-2xs: 12px;   --lh-label-2xs: 16.16px;
--fs-prose: 16px;       --lh-prose: 26.4px;
--fs-prose-sm: 15px;    --lh-prose-sm: 26px;
--fs-lead: 15px;        --lh-lead: 24px;
--fs-body: 14px;        --lh-body: 22px;
--fs-body-tight: 14px;  --lh-body-tight: 21px;
--fs-ui: 13px;          --lh-ui: 16.9px;
--fs-ui-sm: 12px;       --lh-ui-sm: 15.6px;
--fs-ui-xs: 11px;       --lh-ui-xs: 14.3px;
--fs-ui-2xs: 10px;      --lh-ui-2xs: 13px;
--fs-ui-3xs: 9px;       --lh-ui-3xs: 11.7px;
--fs-btn: 14px;         --lh-btn: 18.2px;
--lh-auto-body: 1.3;
--lh-auto-display: 1.3465;
--color-ink: #0f1012;
--color-brand: #5f2eea;
--color-muted: #5c646c;
--color-white: #ffffff;
--color-border: #e8e2d9;
--color-subtle: #a3acb5;
--color-brand-surface: #f0ebff;
--color-accent: #c3fa3c;
--color-accent-ink: #183200;
--color-surface-dark: #2c2f36;
--color-page: #fcfaf7;
--color-page-alt: #f5f1eb;
--color-danger: #d92626;
--color-danger-surface: rgba(217, 38, 38, 0.125);
--color-danger-on-dark: #ec4040;
--color-on-dark-muted: #a6a6a6;
--color-subtle-on-light: #686e74;
--color-danger-on-light: #c62222;
--color-border-light: #ebe5e0;
--color-border-strong: #e0dcd7;
--color-border-dark: rgba(255, 255, 255, 0.133);
--color-scrim: rgba(15, 16, 25, 0.902);
--color-scrim-soft: rgba(15, 16, 18, 0.4);
--color-brand-hover: #5326d1;
--color-brand-active: #4720b8;
--color-accent-hover: #b4ef25;
--color-ink-hover: #23262b;
--color-disabled-bg: #f0ede8;
--color-disabled-text: #a3acb5;
--focus-ring: 0 0 0 3px rgba(95, 46, 234, 0.45);
--focus-ring-offset: 2px;
--focus-ring-accent: 0 0 0 3px rgba(24, 50, 0, 0.45);
--space-1: 4px;     --space-2: 6px;     --space-3: 8px;    --space-4: 10px;
--space-5: 12px;    --space-6: 14px;    --space-7: 16px;   --space-8: 20px;
--space-9: 24px;    --space-10: 32px;   --space-11: 40px;  --space-12: 48px;
--space-13: 64px;   --space-14: 80px;   --space-15: 96px;
--container: 1280px;
--container-pad: 80px;
--container-pad-mobile: 16px;
--radius-xs: 3px;   --radius-sm: 4px;   --radius: 6px;     --radius-md: 8px;
--radius-lg: 12px;  --radius-xl: 16px;  --radius-2xl: 22px;
--radius-card: 12px;
--radius-pill: 100px;
--radius-round: 999px;
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.039);
--shadow-raised: 0 8px 16px rgba(0, 0, 0, 0.031);
--shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.2);
--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.051);
--shadow-brand: 0 8px 16px rgba(95, 46, 234, 0.102);
--z-base: 0;
--z-sticky: 100;
--z-dropdown: 200;
--z-backdrop: 900;
--z-modal: 1000;
--z-cookie: 1100;
--z-agegate: 1200;
--dur-fast: 140ms;
--dur-base: 200ms;
--dur-slow: 300ms;
--dur-exit: 140ms;
--ease: cubic-bezier(.2, .7, .3, 1);
--ease-in: cubic-bezier(.5, 0, .8, .3);
}
@font-face {
font-family: "Archivo Narrow";
src: url("../fonts/archivo-narrow-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("../fonts/geist-variable.woff2") format("woff2-variations");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--color-page);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea {
font: inherit;
color: inherit;
margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 8px; top: -100px;
z-index: var(--z-agegate);
padding: 10px 16px;
background: var(--color-brand);
color: var(--color-white);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--fs-label-sm);
text-transform: uppercase;
}
.skip-link:focus { top: 8px; }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
.on-accent :focus-visible { box-shadow: var(--focus-ring-accent); }
.container {
width: 100%;
max-width: calc(var(--container) + var(--container-pad) * 2);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.d-hero,
.d-h1, .d-h2, .d-h3, .d-h4, .d-h5, .d-h6,
.d-label, .d-label-lg, .d-label-sm, .d-label-xs, .d-label-2xs {
font-family: var(--font-display);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.d-hero      { font-size: var(--fs-hero);      line-height: var(--lh-hero); }
.d-h1        { font-size: var(--fs-h1);        line-height: var(--lh-h1); }
.d-h2        { font-size: var(--fs-h2);        line-height: var(--lh-h2); }
.d-h3        { font-size: var(--fs-h3);        line-height: var(--lh-h3); }
.d-h4        { font-size: var(--fs-h4);        line-height: var(--lh-h4); }
.d-h5        { font-size: var(--fs-h5);        line-height: var(--lh-h5); }
.d-h6        { font-size: var(--fs-h6);        line-height: var(--lh-h6); }
.d-label-lg  { font-size: var(--fs-label-lg);  line-height: var(--lh-label-lg); }
.d-label     { font-size: var(--fs-label);     line-height: var(--lh-label); }
.d-label-sm  { font-size: var(--fs-label-sm);  line-height: var(--lh-label-sm); }
.d-label-xs  { font-size: var(--fs-label-xs);  line-height: var(--lh-label-xs); }
.d-label-2xs { font-size: var(--fs-label-2xs); line-height: var(--lh-label-2xs); }
.t-prose     { font-size: var(--fs-prose);     line-height: var(--lh-prose); }
.t-prose-sm  { font-size: var(--fs-prose-sm);  line-height: var(--lh-prose-sm); }
.t-lead      { font-size: var(--fs-lead);      line-height: var(--lh-lead); }
.t-body      { font-size: var(--fs-body);      line-height: var(--lh-body); }
.t-ui        { font-size: var(--fs-ui);        line-height: var(--lh-ui); }
.t-ui-sm     { font-size: var(--fs-ui-sm);     line-height: var(--lh-ui-sm); }
.t-ui-xs     { font-size: var(--fs-ui-xs);     line-height: var(--lh-ui-xs); }
.t-ui-2xs    { font-size: var(--fs-ui-2xs);    line-height: var(--lh-ui-2xs); }
.t-muted     { color: var(--color-muted); }
.t-subtle    { color: var(--color-subtle-on-light); }
.on-dark .t-subtle { color: var(--color-subtle); }
.accent { color: var(--color-brand); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-5) var(--space-9);
border-radius: var(--radius);
font-family: var(--font-body);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
white-space: nowrap;
cursor: pointer;
border: 0;
}
.btn--brand {
background: var(--color-brand);
color: var(--color-white);
}
.btn--brand:hover { background: var(--color-brand-hover); }
.btn--brand:active { background: var(--color-brand-active); }
.btn--ghost {
background: var(--color-white);
color: var(--color-ink);
box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--accent {
background: var(--color-accent);
color: var(--color-accent-ink);
}
.btn--accent:hover { background: var(--color-accent-hover); }
.btn--block { width: 100%; }
.btn[disabled],
.btn[aria-disabled="true"] {
background: var(--color-disabled-bg);
color: var(--color-disabled-text);
box-shadow: none;
cursor: not-allowed;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-1);
position: relative;
color: var(--color-brand);
font-weight: var(--fw-bold);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
}
.link-arrow:hover { text-decoration: underline; }
.tap { position: relative; }
.tap-24 { position: relative; }
.tap-24::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: max(100%, 24px);
height: max(100%, 24px);
z-index: 1;
}
.tap::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
translate: 0 -50%;
height: 100%;
min-height: 24px;
z-index: 1;
}
.card {
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-card);
}
.field { display: block; }
.field__label {
display: block;
margin-bottom: var(--space-3);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.field__req { color: var(--color-brand); }
.field__control {
width: 100%;
padding: 13px var(--space-7);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
}
.field__control::placeholder { color: var(--color-subtle-on-light); }
.field__control:hover { border-color: var(--color-border-strong); }
.field__hint {
margin-top: var(--space-2);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.field__error {
margin-top: var(--space-2);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-danger);
font-weight: var(--fw-medium);
}
.field__control[aria-invalid="true"] {
border-color: var(--color-danger);
background: var(--color-danger-surface);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-xs);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
}
.badge--display {
font-family: var(--font-display);
font-size: var(--fs-label-2xs);
line-height: var(--lh-label-2xs);
text-transform: uppercase;
}
.badge--ink { background: var(--color-ink); color: var(--color-white); }
.badge--brand { background: var(--color-brand); color: var(--color-white); }
.badge--soft { background: var(--color-brand-surface); color: var(--color-brand); }
.badge--danger {
padding: var(--space-1) var(--space-3);
background: var(--color-danger-surface);
color: var(--color-danger-on-light);
border: 1px solid var(--color-danger);
border-radius: var(--radius-sm);
}
.on-dark .badge--danger,
.section--dark .badge--danger {
color: var(--color-danger-on-dark);
border-color: var(--color-danger-on-dark);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-7);
border-radius: var(--radius-pill);
background: var(--color-white);
border: 1px solid var(--color-border);
font-family: var(--font-display);
font-size: var(--fs-label-xs);
line-height: var(--lh-label-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
cursor: pointer;
}
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-white);
}
.section { padding-block: var(--space-14); }
.section--alt { background: var(--color-page-alt); }
.section--soft { background: var(--color-brand-surface); }
.section--dark { background: var(--color-ink); color: var(--color-white); }
.section__kicker {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-brand);
font-family: var(--font-display);
font-size: var(--fs-label-2xs);
line-height: var(--lh-label-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.to-top {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-brand);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
}
@media (max-width: 1439px) {
.container { padding-inline: var(--space-11); }
}
@media (max-width: 1023px) {
.container { padding-inline: var(--space-9); }
.d-hero { font-size: var(--fs-hero-sm); line-height: var(--lh-hero-sm); }
}
@media (max-width: 767px) {
.container { padding-inline: var(--container-pad-mobile); }
.section { padding-block: var(--space-12); }
}
@media (max-width: 389px) {
.container { padding-inline: var(--space-5); }
.btn { padding-inline: var(--space-7); }
}
.odds {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex: 1;
min-width: 0;
padding: var(--space-5) var(--space-7);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius);
cursor: pointer;
}
.odds__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
color: var(--color-muted);
text-transform: uppercase;
}
.odds__value {
flex: none;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-extrabold);
color: var(--color-brand);
}
.odds:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.odds[aria-pressed="true"] {
background: var(--color-brand);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.odds[aria-pressed="true"] .odds__name { color: var(--color-white); }
.odds[aria-pressed="true"] .odds__value { color: var(--color-accent); }
.rg-bar,
.site-header,
.support-strip,
.betstop-strip,
.payments-strip,
.site-footer { padding-inline: var(--container-pad); }
.rg-bar__inner,
.site-header__inner,
.support-strip__inner,
.betstop-strip__inner,
.payments-strip__inner,
.site-footer__inner {
max-width: var(--container);
margin-inline: auto;
}
.only-narrow { display: none; }
.chip.only-wide { display: inline-flex; }
@media (max-width: 767px) {
.only-wide,
.chip.only-wide { display: none; }
.only-narrow { display: inline; }
}
.icon { width: 16px; height: 16px; }
.icon--xs { width: 12px; height: 12px; }
.icon--sm { width: 14px; height: 14px; }
.rg-bar {
height: 40px;
background: var(--color-page-alt);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.rg-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.rg-bar__left { display: flex; align-items: center; gap: var(--space-7); }
.rg-bar__right { display: flex; align-items: center; gap: var(--space-9); }
.rg-bar__strong {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
color: var(--color-ink);
text-transform: uppercase;
}
.rg-bar__left .rg-bar__strong:first-child { text-transform: none; }
.rg-bar__muted {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.rg-bar__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.rg-bar__link:hover { text-decoration: underline; }
.rg-bar__help {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-medium);
color: var(--color-ink);
}
.rg-bar__phone { position: relative; color: var(--color-brand); font-weight: var(--fw-bold); }
.site-header {
height: 80px;
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.site-header__left { display: flex; align-items: center; gap: var(--space-12); }
.site-header__right { display: flex; align-items: center; gap: var(--space-9); }
.brand {
font-family: var(--font-display);
font-size: 28px;
line-height: 37.72px;
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.site-nav__list { display: flex; align-items: center; gap: 28px; }
.site-nav__link {
position: relative;
display: inline-block;
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
white-space: nowrap;
}
.site-nav__link:hover { color: var(--color-brand); }
.site-nav__link.is-active { color: var(--color-brand); }
.site-header__login {
position: relative;
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.site-header__login:hover { color: var(--color-brand); }
.burger { display: none; width: 40px; height: 40px; padding: 8px; }
.burger__bar {
display: block;
height: 2px;
background: var(--color-ink);
border-radius: 2px;
}
.burger__bar + .burger__bar { margin-top: 5px; }
.support-strip {
height: 73px;
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.support-strip__inner { display: flex; align-items: center; height: 100%; }
.support-strip__left { display: flex; align-items: center; gap: var(--space-9); }
.support-strip__title {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-extrabold);
color: var(--color-ink);
}
.support-strip__phone {
position: relative;
padding: 4px 10px;
border-radius: var(--radius-sm);
background: var(--color-brand-surface);
color: var(--color-brand);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-black);
}
.support-strip__note {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-muted);
}
.betstop-strip {
height: 72px;
background: var(--color-ink);
color: var(--color-white);
}
.betstop-strip__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.betstop-strip__left { display: flex; align-items: center; gap: var(--space-8); }
.betstop-strip__title {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-semibold);
}
.betstop-strip__note {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-subtle);
}
.betstop-strip__cta {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-accent);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
}
.betstop-strip__cta:hover { text-decoration: underline; }
.payments-strip {
height: 104px;
background: var(--color-ink);
color: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-surface-dark);
}
.payments-strip__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--space-9);
}
.payments-strip__left { display: flex; align-items: center; gap: var(--space-9); }
.payments-strip__right { display: flex; align-items: center; gap: var(--space-5); }
.payments-strip__label {
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-subtle);
white-space: nowrap;
}
.payments-strip__logos { display: block; width: 300px; height: 40px; object-fit: cover; }
.payments-strip__badge { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); font-weight: var(--fw-extrabold); }
.payments-strip__note {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-subtle);
}
.site-footer {
padding-block: var(--space-13) var(--space-12);
background: var(--color-ink);
color: var(--color-white);
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__cols { display: flex; gap: var(--space-12); }
.site-footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-7);
width: 320px;
flex: none;
}
.site-footer__logo {
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.site-footer__about {
font-size: var(--fs-ui-sm);
line-height: 1.5;
color: var(--color-on-dark-muted);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.site-footer__heading {
font-family: var(--font-display);
font-size: var(--fs-label-xs);
line-height: var(--lh-label-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-white);
margin: 0;
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-5); }
.site-footer__link {
position: relative;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-on-dark-muted);
}
.site-footer__link:hover { color: var(--color-white); }
.site-footer__legal {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-9);
border-top: 1px solid var(--color-surface-dark);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
color: var(--color-on-dark-muted);
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9);
margin-top: var(--space-3);
flex-wrap: wrap;
}
.site-footer__slogan {
color: var(--color-accent);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-9);
}
.overlay[data-open="false"] { pointer-events: none; }
.overlay__scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.overlay__panel { position: relative; z-index: 1; }
.age-gate { z-index: var(--z-agegate); }
.cookie-bar { z-index: var(--z-cookie); align-items: flex-end; padding: 0; }
.menu-drawer { z-index: var(--z-modal); align-items: stretch; justify-content: flex-end; padding: 0; }
.age-gate__panel {
width: 100%;
max-width: 500px;
padding: var(--space-11);
background: var(--color-page);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-overlay);
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.age-gate__brand {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.age-gate__head {
display: flex;
align-items: center;
gap: var(--space-8);
padding: var(--space-8);
background: var(--color-brand-surface);
border-radius: var(--radius-lg);
}
.age-gate__ring {
display: grid;
place-items: center;
width: 56px;
height: 56px;
flex: none;
border: 2px solid var(--color-brand);
border-radius: var(--radius-round);
color: var(--color-brand);
font-weight: var(--fw-bold);
font-size: var(--fs-label);
}
.age-gate__form { display: flex; flex-direction: column; gap: var(--space-5); }
.age-gate__rule,
.auth__rule--legacy {
margin: 0;
border: 0;
border-top: 1px solid var(--color-border);
}
.cookie-bar__panel {
width: 100%;
background: var(--color-page);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.149);
}
.cookie-bar__inner {
max-width: var(--container);
margin-inline: auto;
padding: var(--space-10) var(--container-pad);
display: flex;
flex-direction: column;
gap: var(--space-9);
}
.cookie-bar__top { display: flex; gap: var(--space-12); align-items: flex-start; }
.cookie-bar__intro { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); }
.cookie-bar__links { display: flex; gap: var(--space-9); }
.cookie-bar__actions {
display: flex;
flex-direction: column;
gap: var(--space-5);
width: 320px;
flex: none;
}
.cookie-bar__cats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-9);
padding-top: var(--space-9);
border-top: 1px solid var(--color-border);
}
.cookie-cat__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cookie-cat__num { color: var(--color-brand); font-weight: var(--fw-bold); font-size: var(--fs-ui); }
.cookie-cat__name { font-weight: var(--fw-bold); font-size: var(--fs-label); }
.cookie-cat__opt { background: var(--color-page-alt); color: var(--color-muted); }
.switch { margin-left: auto; display: inline-flex; cursor: pointer; }
.switch__input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.switch__track {
display: block;
width: 44px;
height: 24px;
border-radius: var(--radius-round);
background: var(--color-border-strong);
position: relative;
transition: background-color var(--dur-fast) var(--ease);
}
.switch__track::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--color-white);
transition: transform var(--dur-fast) var(--ease);
}
.switch__input:checked + .switch__track { background: var(--color-brand); }
.switch__input:checked + .switch__track::after { transform: translateX(20px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.menu-drawer__panel {
width: min(290px, 85vw);
height: 100%;
overflow-y: auto;
background: var(--color-page);
padding: var(--space-9) var(--space-7) var(--space-12);
display: flex;
flex-direction: column;
gap: var(--space-9);
}
.menu-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.menu-drawer__logo {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.menu-drawer__close { width: 32px; height: 32px; display: grid; place-items: center; rotate: 45deg; }
.menu-drawer__list { display: flex; flex-direction: column; }
.menu-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-7);
border-bottom: 1px solid var(--color-border);
font-family: var(--font-display);
font-size: var(--fs-h6);
line-height: var(--lh-h6);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.menu-drawer__link.is-active { color: var(--color-brand); }
.menu-drawer__link .icon { color: var(--color-brand); }
.menu-drawer__rg { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-drawer__rg-list {
background: var(--color-brand-surface);
border-radius: var(--radius-lg);
padding-inline: var(--space-7);
}
.menu-drawer__rg-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-5);
font-weight: var(--fw-bold);
font-size: var(--fs-label);
}
.menu-drawer__rg-list li + li a { border-top: 1px solid var(--color-border); }
.menu-drawer__cta { display: flex; flex-direction: column; gap: var(--space-5); }
.menu-drawer__help { display: flex; flex-direction: column; gap: var(--space-1); }
.menu-drawer__help-title { font-weight: var(--fw-bold); font-size: var(--fs-label); }
.menu-drawer__phone {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-brand);
font-size: var(--fs-h5);
font-weight: var(--fw-black);
}
.menu-drawer__legal { font-size: var(--fs-ui); color: var(--color-brand); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.menu-drawer__copy { font-size: var(--fs-ui); color: var(--color-muted); }
.auth__panel {
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: var(--space-11);
background: var(--color-page);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-overlay);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.auth--wide .auth__panel { max-width: 680px; }
.auth__head { display: flex; align-items: center; justify-content: space-between; }
.auth__brand {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.auth__close { font-size: 24px; line-height: 1; width: 32px; height: 32px; }
.auth__form { display: flex; flex-direction: column; gap: var(--space-7); }
.auth__section { display: flex; flex-direction: column; gap: var(--space-5); }
.auth__legend {
display: flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--fs-label-xs);
line-height: var(--lh-label-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
margin: 0;
}
.auth__num { color: var(--color-brand); }
.auth__group {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-8);
background: var(--color-brand-surface);
border-radius: var(--radius-lg);
}
.auth__row { display: grid; gap: var(--space-5); }
.auth__row--2 { grid-template-columns: 1fr 1fr; }
.auth__row--3 { grid-template-columns: repeat(3, 1fr); }
.auth__row--title { grid-template-columns: 1fr 1.6fr; }
.auth__row--addr { grid-template-columns: 1.6fr 1fr 1fr; }
.auth__dob { border: 0; padding: 0; margin: 0; }
.auth__dob .field__label { margin-bottom: var(--space-3); padding: 0; }
.auth__dob .auth__row--3 { padding-top: 25px; }
.auth__limit {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-8);
background: var(--color-white);
border-radius: var(--radius-md);
}
.auth__limit-kicker { font-family: var(--font-body); font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); letter-spacing: 0; }
.auth__limit-hint { margin-top: 0; font-size: var(--fs-ui); line-height: 18px; }
.auth__limit-input { position: relative; display: flex; align-items: center; }
.auth__limit-cur {
position: absolute;
left: var(--space-7);
color: var(--color-muted);
font-size: var(--fs-body);
pointer-events: none;
}
.auth__limit-input .field__control { padding-left: 64px; }
.field__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.field__wrap { position: relative; display: flex; align-items: center; }
.field__wrap .field__control { padding-right: 72px; }
.field__reveal {
position: absolute;
right: var(--space-7);
color: var(--color-brand);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
}
.auth__forgot { position: relative; color: var(--color-brand); font-weight: var(--fw-bold); font-size: var(--fs-body); }
.auth__switch { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); color: var(--color-muted); flex-wrap: wrap; }
.auth__demo { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.check { display: flex; align-items: flex-start; gap: var(--space-5); cursor: pointer; }
.check__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check__box {
width: 22px; height: 22px;
flex: none;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-white);
position: relative;
}
.check__input:checked + .check__box {
background: var(--color-brand);
border-color: var(--color-brand);
}
.check__input:checked + .check__box::after {
content: "";
position: absolute;
left: 6px; top: 2px;
width: 5px; height: 10px;
border: solid var(--color-white);
border-width: 0 2px 2px 0;
rotate: 45deg;
}
.check__input:focus-visible + .check__box { box-shadow: var(--focus-ring); }
.check__text { font-size: var(--fs-ui); line-height: 18px; }
.check__text a { color: var(--color-brand); text-decoration: underline; }
.verify__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-9); }
.verify__icon {
display: grid;
place-items: center;
width: 56px; height: 56px;
flex: none;
border-radius: var(--radius-round);
background: var(--color-brand-surface);
color: var(--color-brand);
}
.verify__email {
display: inline-block;
padding: var(--space-3) var(--space-7);
border-radius: var(--radius-pill);
background: var(--color-brand-surface);
font-weight: var(--fw-bold);
font-size: var(--fs-body);
align-self: flex-start;
}
.verify__code { border: 0; padding: 0; margin: 0; }
.verify__cells { display: flex; gap: var(--space-5); margin-top: var(--space-2); }
.verify__cell {
width: 64px; height: 64px;
text-align: center;
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.verify__cell:focus-visible { border-color: var(--color-brand); }
.age-denied {
min-height: 100vh;
display: grid;
place-items: center;
padding: var(--space-9);
background: var(--color-ink);
}
.age-denied__panel {
max-width: 520px;
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-11);
background: var(--color-page);
border-radius: var(--radius-xl);
}
.age-denied__brand {
font-family: var(--font-display);
font-size: var(--fs-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.age-denied__phone { font-size: var(--fs-h5); font-weight: var(--fw-black); color: var(--color-brand); }
@media (max-width: 1199px) {
.site-nav { display: none; }
.burger { display: block; }
.site-header__join { display: none; }
.rg-bar__muted { display: none; }
}
@media (max-width: 1023px) {
.site-nav { display: none; }
.burger { display: block; }
.site-header__join { display: none; }
.rg-bar__muted { display: none; }
.cookie-bar__top { flex-direction: column; }
.cookie-bar__actions { width: 100%; }
.cookie-bar__cats { grid-template-columns: 1fr; gap: var(--space-7); }
.site-footer__cols { flex-wrap: wrap; }
.site-footer__brand { width: 100%; }
.site-footer__col { flex: 1 1 200px; }
}
@media (max-width: 767px) {
.rg-bar,
.site-header,
.support-strip,
.betstop-strip,
.payments-strip,
.site-footer { padding-inline: var(--container-pad-mobile); }
.payments-strip__left { flex-direction: column; align-items: flex-start; gap: var(--space-7); }
.payments-strip__logos { width: 200px; height: 26px; }
.payments-strip__badge { padding: 4px 8px; font-size: 9px; line-height: 11.7px; }
.payments-strip__right { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.rg-bar { height: 87px; padding-block: var(--space-3); }
.rg-bar__inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
row-gap: var(--space-2);
column-gap: var(--space-3);
}
.rg-bar__left,
.rg-bar__right { display: contents; }
.rg-bar__left > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.rg-bar__left > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.rg-bar__link { grid-area: 2 / 2 / 3 / 3; justify-self: end; }
.rg-bar__muted { grid-area: 3 / 1 / 4 / 3; }
.rg-bar__help { grid-area: 4 / 1 / 5 / 3; margin-top: -4px; }
.rg-bar__left .rg-bar__strong:first-child {
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
}
.rg-bar__strong { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.rg-bar__muted { display: block; font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.rg-bar__link { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.rg-bar__help { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.site-header { height: 56px; }
.site-header__right { gap: var(--space-5); }
.brand { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.site-header__login { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.site-header__join {
display: inline-flex;
padding: var(--space-3) var(--space-5);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
}
.burger { width: 18px; height: 12px; padding: 0; position: relative; }
.burger::after {
content: "";
position: absolute;
inset: -14px -11px;
z-index: 1;
}
.burger__bar + .burger__bar { margin-top: 3px; }
.support-strip,
.betstop-strip,
.payments-strip { height: auto; padding-block: var(--space-9); }
.site-footer { padding-block: var(--space-10); }
.support-strip__inner { align-items: stretch; }
.support-strip__left { flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); width: 100%; }
.support-strip__title { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.support-strip__phone { font-size: 16px; line-height: 20.8px; padding: 6px var(--space-5); }
.support-strip__note { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.betstop-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.betstop-strip__left { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.betstop-strip__title { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.betstop-strip__note { font-size: var(--fs-ui-sm); line-height: 16px; }
.betstop-strip__cta { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.payments-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--space-7); }
.payments-strip__label { font-size: var(--fs-label-2xs); line-height: var(--lh-label-2xs); }
.payments-strip__note { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.payments-strip__right { gap: var(--space-2); }
.site-footer__cols { flex-direction: column; gap: var(--space-10); }
.site-footer__brand { gap: var(--space-5); width: 100%; }
.site-footer__about { font-size: var(--fs-ui-sm); line-height: 18px; }
.site-footer__col { flex: 0 0 auto; gap: var(--space-3); }
.site-footer__list { gap: var(--space-3); }
.site-footer__link { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.site-footer__inner { gap: var(--space-10); }
.site-footer__legal { gap: var(--space-5); padding-top: var(--space-10); font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.site-footer__bottom { gap: var(--space-3); }
.site-footer__slogan { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cookie-bar__inner { padding-inline: var(--container-pad-mobile); }
.auth__panel { padding: var(--space-8); }
.auth__row--2,
.auth__row--title,
.auth__row--addr { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
.verify__cell { width: 56px; height: 56px; }
.menu-drawer__panel { width: 90vw; }
}
.age-gate__panel {
width: 520px;
max-width: 100%;
gap: var(--space-10);
padding: var(--space-12);
border-radius: var(--radius-2xl);
}
.age-gate__brand { font-size: var(--fs-h6); line-height: var(--lh-h6); }
.age-gate__head { gap: var(--space-9); padding: var(--space-9); border-radius: var(--radius-xl); }
.age-gate__ring {
width: 72px;
height: 72px;
box-shadow: inset 0 0 0 3px var(--color-brand);
border: 0;
font-size: var(--fs-h4);
line-height: var(--lh-h4);
}
.age-gate .d-h2 { font-size: 32px; line-height: 36px; }
.age-gate__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.age-gate__lead { margin: 0; font-size: var(--fs-lead); line-height: 22px; color: var(--color-ink); }
.age-gate__hint { margin: 0; font-size: var(--fs-btn); line-height: 20px; color: var(--color-muted); }
.age-gate__form { gap: var(--space-5); }
.age-gate__form .btn {
height: 54px;
border-radius: var(--radius-lg);
font-size: var(--fs-lead);
line-height: 19.5px;
}
.age-gate__rule { position: relative; height: 0; margin: 0; border: 0; }
.age-gate__rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border);
}
.age-gate__rg { display: flex; flex-direction: column; gap: var(--space-3); }
.age-gate__fine { margin: 0; font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
@media (max-width: 767px) {
.age-gate { padding: var(--space-7); }
.age-gate__panel {
width: 100%;
gap: var(--space-8);
padding: 28px var(--space-9) var(--space-9);
border-radius: 22px;
}
.age-gate__head { gap: var(--space-8); padding: var(--space-8); border-radius: 14px; }
.age-gate__ring {
width: 66px;
height: 66px;
box-shadow: inset 0 0 0 2px var(--color-brand);
}
.age-gate .d-h2 { font-size: 30px; line-height: 34px; }
.age-gate__copy { gap: var(--space-3); }
.age-gate__form { gap: 10px; }
.age-gate__rule { margin-top: var(--space-1); }
}
@media (max-width: 767px) {
.age-gate__rg .link-arrow { min-height: 44px; }
.age-gate__head { min-height: 115px; }
}
#login .auth__panel {
width: 520px;
max-width: min(520px, 100%);
scrollbar-width: none;
gap: var(--space-10);
padding: var(--space-12);
border-radius: var(--radius-2xl);
}
#login .auth__brand { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.auth__heading { display: flex; flex-direction: column; gap: var(--space-5); }
.auth__kicker {
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
gap: var(--space-2);
}
.auth__kicker-icon { width: 12px; height: 12px; }
#login .auth__heading .d-h2 { font-size: 36px; line-height: 40px; }
.auth__desc { margin: 0; font-size: var(--fs-lead); line-height: 22px; color: var(--color-muted); }
.auth__box {
gap: var(--space-9);
padding: var(--space-10);
background: var(--color-brand-surface);
border-radius: var(--radius-xl);
}
.overlay .field__control {
height: 52px;
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
border: 0;
}
.auth__submit {
height: 54px;
border-radius: var(--radius-lg);
font-size: var(--fs-lead);
line-height: 19.5px;
}
.auth__foot { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; text-align: center; }
.auth__rule { position: relative; height: 0; margin: 0; border: 0; }
.auth__rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border-strong);
}
.auth__foot { gap: var(--space-1); }
@media (max-width: 767px) {
.overlay.auth { padding: var(--container-pad-mobile); }
#login .auth__panel {
width: 100%;
max-width: 100%;
gap: var(--space-9);
padding: var(--space-8) var(--space-8) var(--space-9);
border-radius: 22px;
}
#login .auth__head { min-height: 44px; }
#login .auth__close { width: 44px; height: 44px; }
.auth__heading { gap: 10px; }
#login .auth__heading .d-h2 { font-size: 32px; line-height: 36px; }
.auth__box { gap: 18px; padding: var(--space-8); border-radius: var(--radius-xl); background: #f5f3ff; }
}
.overlay .auth__demo {
position: absolute;
left: 0;
right: 0;
bottom: var(--space-7);
z-index: 1;
margin: 0;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-subtle-on-light);
text-align: center;
}
.overlay .field__control {
padding-block: 0;
padding-inline: var(--space-7);
font-size: var(--fs-lead);
line-height: 22px;
}
.hero {
display: flex;
align-items: stretch;
height: 520px;
background: var(--color-page);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.hero__text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-10);
padding: 60px var(--space-12) 60px var(--container-pad);
}
.hero__headings { display: flex; flex-direction: column; gap: var(--space-7); }
.section__dash { display: inline-block; width: 16px; height: 3px; background: currentColor; border-radius: 2px; }
.hero__lead {
max-width: 632px;
font-size: var(--fs-lead);
line-height: var(--lh-lead);
color: var(--color-muted);
}
.hero__actions { display: flex; gap: var(--space-7); }
.hero__cta { height: 50px; padding-inline: var(--space-10); }
.hero__media { width: 680px; flex: none; position: relative; }
@media (max-width: 1279px) {
.hero__media { width: auto; flex: 1 1 420px; min-width: 0; }
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
@media (max-width: 1023px) {
.hero { height: auto; flex-direction: column; }
.hero__media { width: 100%; height: 280px; }
.hero__text { padding: var(--space-12) var(--container-pad); }
}
@media (max-width: 767px) {
.hero { gap: var(--space-8); padding: var(--space-9) var(--container-pad-mobile); }
.hero__text { padding: 0; gap: var(--space-8); }
.hero__headings { gap: var(--space-7); }
.d-hero { font-size: 40px; line-height: 42px; }
.hero__lead { font-size: var(--fs-body); line-height: 20px; }
.hero__actions { flex-direction: column; gap: var(--space-4); }
.hero .section__kicker { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.hero__cta { width: 100%; height: 52px; padding-inline: var(--space-7); }
.hero__media { height: auto; display: contents; }
.hero__media picture { display: block; }
.hero__media img { height: 240px; border-radius: var(--radius-lg); }
}
.preview {
position: absolute;
left: 348px;
top: 356px;
width: 300px;
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.102);
}
@media (max-width: 1279px) {
.preview { left: auto; right: 32px; }
}
.preview__head { display: flex; align-items: center; justify-content: space-between; }
.preview__badge {
padding: 2px var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-brand-surface);
color: var(--color-brand);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.preview__time {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
color: var(--color-muted);
}
.preview__match {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
}
.preview__odds { display: flex; gap: var(--space-3); }
@media (max-width: 1023px) {
.preview { left: auto; right: var(--space-7); top: auto; bottom: var(--space-7); }
}
@media (max-width: 767px) {
.preview {
position: static;
width: 100%;
padding: var(--space-7);
}
.preview__odds .odds { height: 44px; padding-inline: var(--space-5); }
}
.markets-section { padding: var(--space-12) var(--container-pad) var(--space-13); background: var(--color-page); }
.markets-section__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: flex-start;
gap: var(--space-10);
}
.markets { flex: 1; display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.markets__head { display: flex; flex-direction: column; gap: var(--space-7); }
.markets__title { display: flex; flex-direction: column; gap: var(--space-1); }
.markets__sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); }
.markets__filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip__count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding-inline: 5px;
border-radius: var(--radius-round);
background: var(--color-brand-surface);
color: var(--color-brand);
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.chip[aria-pressed="true"] .chip__count {
background: rgba(255, 255, 255, 0.25);
color: var(--color-white);
}
.markets__list { display: flex; flex-direction: column; gap: var(--space-9); }
.market {
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.market__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-7);
background: var(--color-page-alt);
}
.market__title { display: flex; align-items: center; gap: var(--space-3); }
.market__league {
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.market__meta { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.market__all {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.match {
display: flex;
align-items: center;
gap: var(--space-8);
padding: var(--space-8);
}
.match + .match { border-top: 1px solid var(--color-border); }
.markets__empty {
margin: 0;
padding: var(--space-9) var(--space-8);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-md);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-muted);
}
.markets__empty .link-arrow { font-size: inherit; }
.match__teams { width: 240px; flex: none; display: flex; flex-direction: column; gap: var(--space-2); }
.match__time { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.match__names { display: flex; flex-direction: column; gap: 2px; }
.match__names span { font-size: var(--fs-prose-sm); line-height: 19.5px; font-weight: var(--fw-bold); }
.match__market { width: 100px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.match__market-label {
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.match__market-name { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.match__odds { flex: 1; display: flex; gap: var(--space-3); min-width: 0; }
.match__more {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.slip {
width: 360px;
flex: none;
position: sticky;
top: var(--space-9);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-9);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-raised);
border-radius: var(--radius-lg);
}
.slip__head { display: flex; align-items: center; justify-content: space-between; }
.slip__title {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
margin: 0;
}
.slip__count {
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--color-brand);
color: var(--color-white);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.slip__items { display: flex; flex-direction: column; gap: var(--space-5); }
.slip__item {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7);
background: var(--color-brand-surface);
box-shadow: inset 0 0 0 1px var(--color-brand);
border-radius: var(--radius-md);
}
.slip__item-top { display: flex; align-items: center; gap: var(--space-3); }
.slip__item-league {
padding: 1px 6px;
border-radius: var(--radius-xs);
background: var(--color-brand);
color: var(--color-white);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.slip__item-event { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-bold); }
.slip__remove { margin-left: auto; color: var(--color-muted); font-size: var(--fs-ui); font-weight: var(--fw-bold); }
.slip__item-bottom { display: flex; align-items: center; justify-content: space-between; }
.slip__item-pick { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.slip__item-odds { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-extrabold); color: var(--color-brand); }
.slip__filled { display: flex; flex-direction: column; gap: var(--space-8); }
.slip__stake { display: flex; flex-direction: column; gap: var(--space-3); }
.slip__stake-label {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.slip__input {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-7);
background: var(--color-page);
box-shadow: inset 0 0 0 1.5px var(--color-brand);
border-radius: var(--radius);
}
.slip__cur,
.slip__field {
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-extrabold);
color: var(--color-ink);
}
.slip__field { border: 0; background: none; text-align: right; width: 60%; padding: 0; }
.slip__rule { position: relative; height: 0; margin: 0; border: 0; }
.slip__rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border);
}
.slip__return { display: flex; align-items: center; justify-content: space-between; }
.slip__return-label {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.slip__return-value {
padding: 6px var(--space-5);
border-radius: var(--radius-sm);
background: var(--color-accent);
color: var(--color-accent-ink);
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-black);
}
.slip__cta { padding-block: var(--space-7); }
.slip__note { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-muted); }
.slip__placed { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.slip__empty {
padding: var(--space-9) 0;
text-align: center;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
}
.slip__empty-title { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-bold); color: var(--color-muted); }
.slip__empty-note { margin-top: var(--space-2); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-subtle-on-light); }
.racing { padding: var(--space-13) var(--container-pad); background: var(--color-ink); color: var(--color-white); }
.racing__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-12); }
.racing__left { width: 420px; flex: none; display: flex; flex-direction: column; gap: var(--space-9); }
.racing__head { display: flex; flex-direction: column; gap: var(--space-1); }
.racing__kicker {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-accent);
}
.racing__title { color: var(--color-white); font-size: 48px; line-height: 64.66px; }
.racing__lead {
margin-top: var(--space-8);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-subtle);
}
.racing__photo { width: 420px; height: 200px; object-fit: cover; border-radius: var(--radius-md); }
.racing__list { flex: 1; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.race {
display: flex;
align-items: center;
gap: var(--space-9);
height: 80px;
padding: var(--space-8);
background: #191b1f;
box-shadow: inset 0 0 0 1px var(--color-surface-dark);
border-radius: var(--radius-md);
}
.race__in {
width: 57px;
flex: none;
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-extrabold);
color: var(--color-accent);
}
.race__venue { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.race__name {
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.race__no { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-subtle); }
.race__kind {
padding: 3px var(--space-3);
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.063);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-subtle);
}
.featured { padding: var(--space-14) var(--container-pad); background: var(--color-brand); color: var(--color-white); }
.featured__inner { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: var(--space-12); }
.featured__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.featured__badge {
align-self: flex-start;
padding: 4px var(--space-3);
border-radius: var(--radius-xs);
background: var(--color-accent);
color: var(--color-accent-ink);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-black);
text-transform: uppercase;
}
.featured__title {
font-family: var(--font-display);
font-size: 54px;
line-height: 52px;
font-weight: var(--fw-bold);
text-transform: uppercase;
margin: 0;
}
.featured__lead { max-width: 652px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: rgba(255, 255, 255, 0.85); }
.featured__cta { align-self: flex-start; padding: var(--space-7) var(--space-10); }
.featured__photo { width: 580px; height: 380px; flex: none; object-fit: cover; border-radius: var(--radius-lg); }
.explore { padding: var(--space-13) var(--container-pad); background: var(--color-page); }
.explore__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-10); }
.explore__mosaic { display: flex; flex-direction: column; gap: var(--space-7); }
.explore__row { display: flex; gap: var(--space-7); }
.explore__row--small > * { flex: 1; }
.tile {
position: relative;
flex: 1;
min-width: 0;
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--color-white);
}
.tile img { width: 100%; height: 260px; object-fit: cover; object-position: center 44%; }
.tile__body {
position: absolute;
inset: auto 0 0 0;
display: flex;
align-items: baseline;
gap: var(--space-5);
padding: var(--space-8);
background: linear-gradient(to top, rgba(15, 16, 18, 0.85), rgba(15, 16, 18, 0));
}
.tile__name {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.tile__meta { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-subtle); }
.tile__cta {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
color: var(--color-accent);
}
.tile-sm { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); min-width: 0; }
.tile-sm__name { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-bold); }
.tile-sm__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.tile-sm__meta { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.tile-sm__cta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.rg { padding: var(--space-13) var(--container-pad); background: var(--color-brand-surface); }
.rg--alt { background: var(--color-page-alt); }
.rg__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-10); }
.rg__head { display: flex; flex-direction: column; gap: var(--space-2); }
.rg__title { color: var(--color-brand); }
.rg__kicker { font-size: var(--fs-prose-sm); line-height: 19.5px; font-weight: var(--fw-bold); text-transform: uppercase; }
.rg__lead { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.rg__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
.rg-card { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-9); border-radius: var(--radius-md); }
.rg-card__title {
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
margin: 0;
}
.rg-card__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.rg-card__link {
position: relative;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
@media (max-width: 1279px) {
.rg__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
.markets-section__inner { flex-direction: column; align-items: stretch; }
.slip { width: 100%; position: static; }
.racing__inner { flex-direction: column; }
.racing__left { width: 100%; }
.racing__photo { width: 100%; }
.featured__inner { flex-direction: column; align-items: stretch; }
.featured__photo { width: 100%; height: 280px; }
.featured__title { font-size: 38px; line-height: 40px; }
.explore__row { flex-direction: column; }
}
@media (max-width: 767px) {
.markets-section,
.racing,
.featured,
.explore,
.rg { padding-inline: var(--container-pad-mobile); }
.match { flex-wrap: wrap; gap: var(--space-5); }
.match__teams,
.match__market { width: auto; }
.match__odds { flex-basis: 100%; }
.rg__grid { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
.race { gap: var(--space-5); padding: var(--space-5); }
.match { padding: var(--space-5); }
.match { flex-wrap: nowrap; }
.match__teams,
.match__odds,
.match__names span { min-width: 0; }
.match__names span { overflow-wrap: anywhere; }
}
.slip-bar { display: none; }
@media (max-width: 1023px) {
.slip-bar {
display: flex;
align-items: center;
gap: 10px;
height: 54px;
padding: var(--space-7) var(--container-pad-mobile);
background: var(--color-brand);
color: var(--color-white);
position: sticky;
bottom: 0;
z-index: var(--z-sticky);
}
.slip-bar__label {
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.slip-bar__count {
padding: 2px var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-brand);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.slip-bar__total {
margin-left: auto;
color: var(--color-accent);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-extrabold);
}
}
@media (max-width: 767px) {
.markets-section { padding-block: var(--space-10); }
.racing,
.featured,
.explore,
.rg { padding-block: var(--space-10); }
.markets-section__inner { gap: var(--space-8); }
.markets { gap: var(--space-8); }
.racing__inner,
.explore__inner,
.explore__mosaic { gap: var(--space-8); }
.featured__inner { gap: var(--space-9); }
.slip {
gap: var(--space-7);
padding: var(--space-7);
border-radius: 0;
box-shadow: none;
}
.slip__head,
.slip__note { display: none; }
.slip__filled { gap: var(--space-7); }
.slip__item { gap: 10px; padding: var(--space-5) var(--space-7); }
.page-home .slip__remove { font-size: 16px; line-height: 20.8px; }
.slip__item-pick { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.slip__item-odds { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.slip__stake { gap: var(--space-2); }
.slip__stake-label { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.slip__input { padding: var(--space-5) var(--space-7); }
.slip__cur,
.slip__field { font-size: var(--fs-prose-sm); line-height: 19.5px; }
.slip__return-label { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.slip__return-value { font-size: var(--fs-btn); line-height: var(--lh-btn); padding: 6px var(--space-5); }
.slip__cta { padding-block: var(--space-6); }
.slip__rule { display: none; }
.race { height: auto; padding: var(--space-7); }
.racing__title { font-size: 38px; line-height: 42px; }
}
@media (max-width: 767px) {
.racing__inner { gap: var(--space-9); }
.racing__left { gap: var(--space-9); }
.racing__head { gap: var(--space-2); }
.racing__lead { margin-top: 0; }
.racing__kicker { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.racing__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.racing__lead { font-size: var(--fs-ui); line-height: 18px; }
.racing__photo { height: 160px; }
.racing__list { gap: var(--space-3); }
.race { height: 64px; gap: var(--space-5); padding: var(--space-6); }
.race__in { width: 52px; font-size: var(--fs-body); line-height: var(--lh-body); }
.race__name { font-size: var(--fs-body); line-height: var(--lh-body); }
.race__no { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.featured__inner { gap: var(--space-9); }
.featured__text { gap: var(--space-5); }
.featured__title { font-size: var(--fs-h2); line-height: 34px; }
.featured__lead { font-size: var(--fs-body); line-height: 20px; }
.featured__cta {
align-self: stretch;
margin-top: var(--space-5);
padding: var(--space-6);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-extrabold);
}
.featured__badge { padding: 2px var(--space-2); font-weight: var(--fw-extrabold); }
.featured__photo { height: 200px; }
.explore__inner { gap: var(--space-8); }
.explore .d-h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.explore__mosaic { gap: var(--space-5); }
.explore__row { gap: var(--space-5); }
.tile img { height: 160px; }
.tile__body { padding: var(--space-7); }
.tile__name { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.tile-sm { gap: 10px; padding: var(--space-7); min-height: 82px; }
.tile-sm__name { font-size: var(--fs-label); line-height: var(--lh-label); }
.rg__inner { gap: var(--space-9); }
.rg__head { gap: var(--space-2); }
.rg__title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.rg__kicker { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.rg__lead { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.rg__grid { gap: var(--space-5); }
.rg-card { gap: var(--space-3); padding: var(--space-7); }
.rg-card__title { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }
.rg-card__text { font-size: var(--fs-ui-sm); line-height: 16px; }
.rg-card__link { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.rg--m-sports .rg__lead { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.rg--m-racing .rg__lead { font-size: var(--fs-ui); line-height: 18px; }
.rg--m-showdown .rg__inner { gap: var(--space-8); }
.rg--m-showdown .rg__lead { line-height: 16px; }
.rg--m-help .rg__inner { gap: var(--space-8); }
.rg--m-help .rg__head { gap: var(--space-1); }
.rg--m-help .rg__title { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.rg--m-help .rg__lead { font-size: var(--fs-ui); line-height: 18px; }
.rg--m-help .rg-card__text { font-size: var(--fs-ui-sm); line-height: 18px; }
.rg--m-help .rg-card__link { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.markets-section { padding: 0; }
.markets-section__inner { gap: 0; }
.markets { padding: var(--space-9) var(--container-pad-mobile); }
.chip__count { display: none; }
.markets__head { gap: var(--space-8); }
.markets__title { gap: var(--space-5); }
.markets .d-h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.markets__sub { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.markets__filters { gap: var(--space-2); }
.chip {
height: 30px;
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.markets__list { gap: var(--space-8); }
.market {
background: none;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow: visible;
}
.market__head { padding: 0; background: none; align-items: flex-start; }
.market__title { gap: var(--space-2); align-items: baseline; }
.market__league { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.market__meta,
.market__all { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.match {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-6);
padding: var(--space-7);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-md);
}
.match + .match { border-top: 0; }
.match__teams { width: auto; gap: var(--space-6); align-items: stretch; }
.match__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.match__badge {
padding: 2px var(--space-2);
border-radius: var(--radius-xs);
background: var(--color-page-alt);
color: var(--color-muted);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.match__names { gap: var(--space-1); }
.match__names span { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.match__market { display: none; }
.match__odds { flex-basis: auto; gap: var(--space-3); }
.match__odds .odds { flex: 1; min-width: 0; }
.match__odds .odds { height: 44px; padding-inline: var(--space-5); }
.match__odds--stack { flex-direction: row; gap: var(--space-2); }
.match__odds--stack .odds { flex: 1; min-width: 0; padding-inline: var(--space-5); }
.markets-section:not(.markets-section--workspace) .match__odds--stack { flex-direction: column; }
.markets-section:not(.markets-section--workspace) .match__odds--stack .odds { flex: none; }
.match__more { align-self: flex-start; font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
}
@media (max-width: 767px) {
.markets-section:not(.markets-section--workspace) .match { gap: var(--space-7); }
.markets-section:not(.markets-section--workspace) .match__teams { gap: var(--space-7); }
.markets-section:not(.markets-section--workspace) .market { gap: 10px; }
}
.intro {
padding: var(--space-12) var(--container-pad);
background: var(--color-page);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.intro__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-12); }
.intro__left { flex: 1; display: flex; flex-direction: column; gap: var(--space-9); min-width: 0; }
.intro__title {
margin: 0;
font-family: var(--font-display);
font-size: 54px;
line-height: 52px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.intro__lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--color-muted); }
.intro__right { display: flex; gap: var(--space-9); flex: none; }
.intro__photo { width: 280px; height: 220px; object-fit: cover; border-radius: var(--radius-lg); }
.today { width: 336px; flex: none; display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-9); }
.today__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.today__list { display: flex; flex-direction: column; gap: 10px; }
.today__row { display: flex; align-items: center; justify-content: space-between; }
.today__name { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-bold); }
.today__name.is-active { color: var(--color-brand); }
.today__count { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.sport-tabs { padding: var(--space-9) var(--container-pad) var(--space-5); background: var(--color-page); }
.sport-tabs__inner { max-width: var(--container); margin-inline: auto; }
.sport-tabs__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sport-tab {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 10px var(--space-8);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-ink);
text-transform: uppercase;
cursor: pointer;
}
.sport-tab:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
.sport-tab[aria-pressed="true"] {
background: var(--color-brand);
color: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.sport-tab__count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding-inline: 5px;
border-radius: var(--radius-round);
background: var(--color-brand-surface);
color: var(--color-brand);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.sport-tab[aria-pressed="true"] .sport-tab__count {
background: rgba(255, 255, 255, 0.25);
color: var(--color-white);
}
.markets-section--workspace { padding-block: var(--space-10) var(--space-13); }
.markets-section--workspace .markets__list { gap: var(--space-10); }
.editorial { padding: var(--space-10) var(--container-pad); background: var(--color-brand); color: var(--color-white); }
.editorial--tight { padding-block: var(--space-9); }
.editorial__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--space-9);
}
.editorial__cta { margin-left: auto; }
.editorial__pic { flex: none; }
.editorial__thumb { width: 80px; height: 60px; flex: none; object-fit: cover; border-radius: var(--radius); }
.editorial__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.editorial__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h6);
line-height: var(--lh-h6);
font-weight: var(--fw-bold);
}
.editorial__note { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-brand-surface); }
.editorial__cta {
flex: none;
padding: var(--space-5) var(--space-9);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-extrabold);
}
@media (max-width: 1279px) {
.intro__inner { flex-direction: column; }
.intro__right { width: 100%; }
.today { flex: 1; width: auto; }
.intro__photo { flex: 1; width: auto; }
}
@media (max-width: 767px) {
.intro { padding: var(--space-9) var(--container-pad-mobile); }
.intro__inner { gap: var(--space-8); }
.intro .section__kicker {
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
gap: var(--space-3);
}
.intro__left { gap: var(--space-5); }
.intro__title { font-size: 38px; line-height: 40px; }
.intro__lead { font-size: var(--fs-body); line-height: 20px; }
.intro__right { flex-direction: column; gap: var(--space-8); }
.today { width: 100%; padding: var(--space-7); gap: var(--space-5); }
.today__title { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }
.today__list { gap: 0; }
.today__row { min-height: 36px; }
.today__row + .today__row { box-shadow: inset 0 1px 0 var(--color-border); }
.intro__photo { width: 100%; height: 180px; object-position: 50% 26%; }
.sport-tabs { padding: var(--space-3) var(--container-pad-mobile) var(--space-9); }
.sport-tabs__row { gap: var(--space-2); }
.sport-tab {
height: 30px;
gap: var(--space-1);
padding: var(--space-3) var(--space-6);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.sport-tab__count { min-width: 17px; padding: 1px 5px; font-size: 9px; line-height: 11.7px; border-radius: 10px; }
.markets-section--workspace .market { gap: var(--space-5); padding-bottom: var(--space-9); }
.editorial { padding: var(--space-8) var(--space-8); }
.editorial__inner {
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--space-7) var(--space-5);
align-items: center;
}
.editorial__text { display: contents; }
.editorial__thumb { width: 64px; height: 48px; }
.editorial__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.editorial__note { grid-column: 1 / -1; font-size: var(--fs-ui); line-height: 18px; }
.editorial__cta {
grid-column: 1 / -1;
margin-left: 0;
height: 40px;
padding-block: var(--space-5);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
}
}
.editorial__cta { white-space: nowrap; flex-wrap: nowrap; flex: none; }
@media (min-width: 768px) {
.editorial__cta .only-wide { display: inline-flex; align-items: center; gap: var(--space-2); }
}
@media (max-width: 767px) {
.sport-tab.only-wide { display: none; }
}
.intro--racing { padding-block: 72px; }
.racing-title {
margin: 0;
font-family: var(--font-display);
font-size: 72px;
line-height: 72px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.intro__lead--wide { max-width: 612px; font-size: var(--fs-prose); line-height: var(--lh-lead); }
.intro__cta { align-self: flex-start; height: 50px; padding-inline: var(--space-10); }
.intro--racing .intro__inner { align-items: center; }
.intro__right--racing {
position: relative;
width: 620px;
height: 520px;
flex: none;
display: flex;
align-items: center;
}
.intro__right--racing { justify-content: flex-end; }
.racing-hero__photo { width: 560px; height: 420px; object-fit: cover; border-radius: 24px; margin-right: -40px; }
.next-race {
position: absolute;
right: var(--space-9);
bottom: var(--space-9);
width: 360px;
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-9);
box-shadow: var(--shadow-raised);
}
.next-race__top { display: flex; align-items: center; justify-content: space-between; }
.next-race__in {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
color: var(--color-danger);
text-transform: uppercase;
}
.next-race__venue {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.next-race__details { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.next-race__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.next-race__kind {
padding: 4px var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-page-alt);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.next-race__cta { padding: var(--space-3) var(--space-7); }
.ntj { padding: var(--space-10) var(--container-pad); background: #191524; color: var(--color-white); }
.ntj__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-8); }
.ntj__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); }
.ntj__title-area { display: flex; align-items: center; gap: var(--space-7); min-width: 0; }
.ntj__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ntj__divider { width: 1px; height: 16px; background: var(--color-surface-dark); flex: none; }
.ntj__sub { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-subtle); }
.ntj__all {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-accent);
white-space: nowrap;
}
.ntj__rail { display: flex; gap: var(--space-5); }
.ntj-card {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: var(--space-7);
background: var(--color-ink);
border-radius: var(--radius-md);
}
.ntj-card.is-active { background: var(--color-brand); }
.ntj-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ntj-card__in {
font-size: var(--fs-body);
line-height: var(--lh-btn);
font-weight: var(--fw-extrabold);
color: var(--color-accent);
}
.ntj-card__kind {
padding: 2px var(--space-2);
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.125);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-subtle);
}
.ntj-card__body { display: flex; flex-direction: column; gap: 2px; }
.ntj-card__venue {
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ntj-card__race { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-subtle); }
.race-tabs-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.race-tabs__label {
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.race-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.race-tab {
min-width: 37px;
height: 37px;
padding-inline: var(--space-5);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
cursor: pointer;
}
.race-tab[aria-pressed="true"] {
background: var(--color-brand);
color: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.market-tabs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.market-tab {
height: 36px;
padding-inline: var(--space-8);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
text-transform: uppercase;
cursor: pointer;
}
.market-tab[aria-pressed="true"] {
background: var(--color-brand);
color: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
#runners .markets { gap: var(--space-9); }
.runners { padding: 0; overflow: hidden; }
.runners__head,
.runner {
display: grid;
grid-template-columns: 30px minmax(0, 150px) 180px 60px 60px 60px 252px;
gap: var(--space-5);
align-items: center;
}
.runners__head {
padding: var(--space-5) var(--space-7);
background: var(--color-page-alt);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
color: var(--color-muted);
text-transform: uppercase;
}
.runner { padding: var(--space-5); }
.runner + .runner { border-top: 1px solid var(--color-border); }
.runner.is-active { background: #faf8ff; }
.runner__odds { display: flex; gap: var(--space-5); }
.runners__head-odds { display: flex; gap: var(--space-5); }
.runners__head-odds > span { flex: 1; text-align: center; }
.runner__no { display: flex; align-items: center; gap: var(--space-3); }
.runner__num { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-extrabold); }
.runner__silk { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.runner__details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.runner__name {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.runner__pair { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-muted); }
.runner__staff { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.runner__jockey { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.runner__trainer { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-muted); }
.runner__form,
.runner__barrier,
.runner__weight { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.runner__win,
.runner__place { flex: none; }
.upcoming { padding: 0; overflow: hidden; }
.upcoming__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-7);
background: var(--color-brand-surface);
}
.upcoming__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-brand);
}
.upcoming__all,
.upcoming__cta {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
white-space: nowrap;
}
.upcoming__row {
display: grid;
grid-template-columns: 60px minmax(0, 1fr) auto auto;
gap: var(--space-8);
align-items: center;
padding: var(--space-7);
}
.upcoming__row + .upcoming__row { border-top: 1px solid var(--color-border); }
.upcoming__time { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-extrabold); }
.upcoming__venue { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upcoming__name { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-bold); }
.upcoming__meta { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-muted); }
.upcoming__in { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
@media (max-width: 1279px) {
.intro__right--racing { width: 100%; }
.racing-hero__photo { width: 100%; }
.next-race { position: static; width: 100%; margin-top: var(--space-8); }
.runners__head,
.runner { grid-template-columns: 30px minmax(0, 1fr) 140px 60px 100px 100px; }
.runners__head span:nth-child(5),
.runners__head span:nth-child(6),
.runner__barrier,
.runner__weight { display: none; }
}
@media (max-width: 1023px) {
.racing-title { font-size: 48px; line-height: 50px; }
.ntj__rail { flex-wrap: wrap; }
.ntj-card { flex: 1 1 200px; }
}
@media (max-width: 767px) {
.intro--racing { padding-block: var(--space-9) var(--space-7); }
.intro--racing .intro__inner { gap: var(--space-7); }
.intro--racing .intro__left { gap: var(--space-7); }
.intro__right--racing { display: contents; }
.intro__right--racing picture { display: block; width: 100%; }
.racing-title { font-size: 40px; line-height: 42px; }
.intro--racing .section__kicker {
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
gap: var(--space-2);
}
.intro--racing .section__dash { width: 12px; height: 4px; }
.intro__lead--wide { font-size: var(--fs-body); line-height: 20px; }
.intro__cta { align-self: stretch; height: 42px; font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.racing-hero__photo { width: 100%; height: 210px; border-radius: var(--radius-lg); }
.next-race { margin-top: var(--space-7); padding: var(--space-7); gap: var(--space-5); }
.next-race__venue { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.next-race__details { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.next-race__in { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.next-race__kind { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.next-race__cta {
padding: 0;
height: auto;
background: none;
box-shadow: none;
color: var(--color-brand);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
}
.ntj { padding: var(--space-9) var(--container-pad-mobile); background: var(--color-ink); }
.ntj__inner { gap: var(--space-7); }
.ntj__head { display: contents; }
.ntj__title-area { flex-direction: column; align-items: flex-start; gap: var(--space-1); order: 1; }
.ntj__title { font-size: var(--fs-h6); line-height: var(--lh-h6); }
.ntj__divider { display: none; }
.ntj__sub { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-subtle); }
.ntj__rail { order: 2; flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; }
.ntj__rail::-webkit-scrollbar { display: none; }
.ntj__all { order: 3; font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.ntj-card { flex: 0 0 155px; gap: var(--space-3); padding: var(--space-5); }
.ntj-card:not(.is-active) { box-shadow: inset 0 0 0 1px var(--color-surface-dark); }
.ntj-card__in { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.ntj-card__kind { padding: 2px var(--space-1); font-size: 9px; line-height: 11.7px; }
.ntj-card__venue { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.ntj-card__race { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.race-tabs-row { flex-direction: column; align-items: flex-start; gap: var(--space-5); flex-wrap: nowrap; }
.race-tabs__label { font-size: var(--fs-label-xs); line-height: var(--lh-label-xs); }
.race-tabs {
display: flex;
flex-wrap: nowrap;
gap: var(--space-2);
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.race-tabs::-webkit-scrollbar { display: none; }
.race-tab {
flex: none;
min-width: 0;
height: 32px;
padding-inline: var(--space-6);
border-radius: 50px;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
}
.market-tab {
height: 44px;
padding-inline: var(--space-7);
border-radius: var(--radius-pill);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
}
.runners { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.runners__head { display: none; }
.runner {
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: var(--space-3);
row-gap: var(--space-5);
padding: var(--space-6);
background: #faf8ff;
box-shadow: none;
border-radius: var(--radius-lg);
}
.runner + .runner { border-top: 0; margin-top: var(--space-5); }
.runner__no { grid-area: 1 / 1; align-self: center; gap: var(--space-3); }
.runner__details { grid-area: 1 / 2; align-self: center; align-items: flex-start; text-align: left; }
.runner__pair { display: none; }
.runner__name { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-extrabold); }
.runner__barrier {
display: block;
grid-area: 1 / 3;
justify-self: end;
align-self: center;
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
color: var(--color-muted);
}
.runner__staff {
display: flex;
flex-direction: column;
gap: 2px;
grid-area: 2 / 1 / 3 / 4;
}
.runner__jockey { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-ink); }
.runner__trainer { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-muted); }
.runner__form {
grid-area: 3 / 1 / 4 / 2;
white-space: nowrap;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.runner__weight {
display: block;
grid-area: 3 / 2 / 4 / 4;
justify-self: start;
white-space: nowrap;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.runner__form::before,
.runner__weight::before { content: attr(data-label) ": "; }
.runner__barrier::before { content: "Barrier: "; text-transform: uppercase; }
.runner__odds { grid-area: 4 / 1 / 5 / 4; gap: var(--space-3); }
.runner__win,
.runner__place { flex: 1; min-width: 0; }
.runner__win,
.runner__place {
height: 44px;
justify-content: center;
gap: var(--space-2);
padding-inline: 0;
font-size: var(--fs-ui-sm);
}
.runner__win .odds__name,
.runner__place .odds__name { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.runner__win .odds__value,
.runner__place .odds__value { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.upcoming__row {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-3);
padding: var(--space-6);
border-top: 0;
box-shadow: inset 0 0 0 1px var(--color-border);
}
.upcoming__row + .upcoming__row { border-top: 0; }
.upcoming__venue { display: contents; }
.upcoming__time { grid-area: 1 / 1; }
.upcoming__name { grid-area: 1 / 2; justify-self: start; font-size: var(--fs-btn); line-height: var(--lh-btn); }
.upcoming__in {
grid-area: 1 / 3;
justify-self: end;
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
color: var(--color-danger);
}
.upcoming__meta { grid-area: 2 / 1 / 3 / 3; }
.upcoming__cta { grid-area: 2 / 3; justify-self: end; font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.upcoming__head { padding: var(--space-7); }
.intro__right--racing { position: static; }
}
@media (max-width: 767px) {
#runners .markets { padding: 0; gap: 0; }
#runners .race-tabs-row {
padding: var(--space-7) var(--container-pad-mobile) var(--space-5);
}
#runners .market-tabs {
padding: 0 var(--container-pad-mobile) var(--space-7);
}
#runners .runners {
padding: 0 var(--container-pad-mobile) var(--space-9);
}
#runners .upcoming {
margin: 0 var(--container-pad-mobile) var(--space-9);
}
#runners .slip {
width: auto;
margin: 0 var(--container-pad-mobile) var(--space-9);
padding: var(--space-7);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border), 0 8px 24px rgba(0, 0, 0, 0.078);
}
#runners .slip__head { display: flex; }
#runners .slip__title { font-size: var(--fs-h6); line-height: var(--lh-h6); }
#runners .slip__note { display: block; }
#runners .slip__rule { display: block; }
}
.ntj-card.is-active .ntj-card__kind { color: var(--color-white); }
.ntj-card.is-active .ntj-card__race { color: var(--color-brand-surface); }
@media (max-width: 767px) {
.page-racing .support-strip,
.page-racing .betstop-strip,
.page-racing .payments-strip {
padding-block: var(--space-8);
padding-inline: var(--space-8);
}
}
@media (max-width: 767px) {
.page-racing .rg { padding-inline: var(--space-8); }
.page-racing .rg__grid { gap: 10px; }
.editorial--tight { padding: var(--space-8); gap: var(--space-7); }
.editorial--tight .editorial__inner { gap: var(--space-7); }
}
@media (max-width: 767px) {
.editorial--tight .editorial__thumb { width: 64px; height: 48px; }
.editorial--tight .editorial__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
}
@media (max-width: 767px) {
.page-racing .betstop-strip__note { font-size: var(--fs-ui-xs); line-height: 16px; }
.page-racing .payments-strip__label { font-size: var(--fs-label-xs); line-height: var(--lh-label-xs); }
.page-racing .payments-strip__note { font-size: var(--fs-ui-xs); line-height: 16px; }
}
.legal-hero {
padding: var(--space-14) var(--container-pad);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.legal-hero__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-9);
text-align: center;
}
.legal-hero__title {
margin: 0;
max-width: 726px;
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: var(--lh-hero);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.legal-hero__lead { max-width: 726px; font-size: var(--fs-label-lg); line-height: 28px; color: var(--color-muted); }
.legal { padding: 60px var(--container-pad) 100px; background: var(--color-page); }
.legal__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: flex-start;
gap: var(--space-12);
}
.legal__side {
width: 280px;
flex: none;
position: sticky;
top: var(--space-9);
display: flex;
flex-direction: column;
gap: var(--space-9);
}
.toc { display: flex; flex-direction: column; gap: var(--space-9); }
.toc__head { display: flex; flex-direction: column; gap: var(--space-3); }
.toc__title {
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-brand);
}
.toc__rule { height: 1px; background: var(--color-border); }
.toc__links { display: flex; flex-direction: column; gap: 2px; }
.toc__link {
position: relative;
padding: 10px var(--space-7);
border-radius: var(--radius-md);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-medium);
color: var(--color-muted);
}
.toc__links--upper .toc__link { text-transform: uppercase; }
.toc__link:hover { color: var(--color-ink); background: var(--color-page-alt); }
.toc__link.is-active { background: var(--color-brand-surface); color: var(--color-brand); font-weight: var(--fw-bold); }
.side-help {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-8);
background: var(--color-ink);
border-radius: var(--radius-lg);
color: var(--color-white);
}
.side-help__title {
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.side-help__text { font-size: var(--fs-ui); line-height: 18px; color: var(--color-subtle); }
.side-help__phone {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
color: var(--color-accent);
}
.legal__body { flex: 0 1 880px; min-width: 0; display: flex; flex-direction: column; gap: var(--legal-body-gap, var(--space-12)); }
.legal-section { display: flex; flex-direction: column; gap: var(--legal-section-gap, 20px); }
.legal-section__title {
display: flex;
align-items: baseline;
gap: var(--space-5);
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: 35px;
font-weight: var(--fw-bold);
}
.legal-section__no { font-size: 24px; line-height: 32px; color: var(--color-brand); }
.legal-section__sub {
margin: 0;
font-family: var(--font-display);
font-size: 18px;
line-height: 24px;
font-weight: var(--fw-bold);
}
.legal-section__sub--bold {
font-family: var(--font-body);
font-size: var(--legal-prose-fs, var(--fs-prose));
line-height: var(--legal-prose-lh, 26px);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.legal-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.legal-panel__title {
margin: 0;
font-family: var(--font-display);
font-size: 18px;
line-height: 24px;
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.legal-panel__text {
margin: 0;
font-size: var(--legal-prose-fs, var(--fs-prose));
line-height: var(--legal-prose-lh, 26px);
color: var(--color-muted);
}
.legal-panel--plain { padding-top: var(--space-7); }
.legal-panel--card {
padding: var(--space-9);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.legal-panel--card.legal-panel--active {
background: var(--color-brand-surface);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.legal-panel--card.legal-panel--active .legal-panel__text { color: var(--color-ink); }
.legal-section__p { font-size: var(--legal-prose-fs, var(--fs-prose)); line-height: var(--legal-prose-lh, 26px); color: var(--color-ink); }
.legal-section__list { display: flex; flex-direction: column; gap: var(--legal-list-gap, var(--space-3)); }
.legal-section__list li {
position: relative;
font-size: var(--legal-list-fs, var(--legal-prose-fs, var(--fs-prose)));
line-height: var(--legal-list-lh, var(--legal-prose-lh, 26px));
color: var(--color-muted);
}
.legal-section__list--bullets li { padding-left: 18px; }
.legal-callout {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-10);
background: var(--color-brand-surface);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.legal-callout__title {
font-family: var(--font-display);
font-size: var(--fs-h6);
line-height: var(--lh-h6);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.legal-callout__phone {
font-family: var(--font-display);
font-size: 36px;
line-height: 48.49px;
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.legal-callout__note {
font-size: var(--fs-lead);
line-height: 19.5px;
font-weight: var(--fw-medium);
color: var(--color-muted);
}
.legal-section__nums { display: flex; flex-direction: column; gap: var(--space-5); }
.legal-section__nums li {
display: flex;
gap: var(--space-5);
font-size: var(--fs-prose);
line-height: 26px;
color: var(--color-muted);
}
.legal-section__nums-no { flex: none; font-weight: var(--fw-bold); color: var(--color-ink); }
.legal-section__list--bullets li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-brand);
}
.legal-section__divider { position: relative; height: 0; flex: none; }
.legal-section__divider::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
border-top: 1px solid var(--color-border);
}
.legal__foot {
display: flex;
flex-direction: column;
gap: var(--legal-foot-gap, var(--space-9));
margin-top: var(--space-9);
padding-top: var(--space-9);
border-top: 1px solid var(--color-border);
}
.legal__related { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.legal__related-label {
font-size: var(--fs-lead);
line-height: 19.5px;
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.legal__related .link-arrow { font-size: var(--fs-lead); line-height: 19.5px; font-weight: var(--fw-semibold); }
.legal__foot .to-top { align-self: flex-start; padding-block: var(--space-5); font-size: var(--fs-btn); line-height: var(--lh-btn); }
.to-top__icon { rotate: 180deg; }
@media (max-width: 1023px) {
.legal__inner { flex-direction: column; }
.legal__side { position: static; width: 100%; }
}
@media (max-width: 767px) {
.legal-hero { padding: var(--space-11) var(--container-pad-mobile); }
.legal-hero__inner { gap: var(--space-7); }
.legal-hero__title { font-size: var(--fs-hero-sm); line-height: var(--lh-hero-sm); }
.legal-hero__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
.toc__link { padding: 8px var(--space-5); }
.legal { padding: var(--space-10) var(--container-pad-mobile) var(--space-12); }
.legal__inner { gap: var(--space-9); }
.legal__body { gap: var(--space-10); }
.legal-section__title { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.legal-section__p,
.legal-section__list li,
.legal-panel__text { font-size: var(--fs-body); line-height: 22px; }
.legal__related { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
.legal-section__note {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.about-hero { padding: var(--space-14) var(--container-pad); background: var(--color-page); }
.about-hero__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-12); align-items: center; }
.about-hero__text { width: 592px; flex: none; display: flex; flex-direction: column; gap: var(--space-9); }
.about-hero__title {
margin: 0;
font-family: var(--font-display);
font-size: 56px;
line-height: 58px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.about-hero__lead { font-size: var(--fs-prose); line-height: var(--lh-prose-sm); color: var(--color-muted); }
.about-hero__photo { width: 640px; height: 420px; object-fit: cover; border-radius: 24px; }
.facts { padding: 0 var(--container-pad) var(--space-13); background: var(--color-page); }
.facts__inner {
max-width: var(--container);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: var(--space-10);
background: var(--color-brand-surface);
border-radius: var(--radius-xl);
}
.fact { display: flex; flex-direction: column; gap: var(--space-2); }
.fact__label {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-brand);
}
.fact__value {
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
}
.story { padding: 96px var(--container-pad); background: var(--color-page); }
.story__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-12); }
.story__left { width: 340px; flex: none; display: flex; flex-direction: column; gap: var(--space-5); }
.story__no {
font-family: var(--font-display);
font-size: 64px;
line-height: 86.2px;
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.story__label {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.story__right { flex: 1; display: flex; flex-direction: column; gap: var(--space-9); min-width: 0; }
.story__lead { font-size: var(--fs-h5); line-height: 32px; font-weight: var(--fw-medium); }
.story__text { font-size: var(--fs-prose); line-height: var(--lh-prose-sm); color: var(--color-muted); }
.story__fine { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-subtle-on-light); }
.principles { padding: 96px var(--container-pad); background: var(--color-brand-surface); }
.principles__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-12); }
.principles__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 48.5px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-9); }
.principle { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-10); }
.principle__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--radius-round);
background: var(--color-brand-surface);
color: var(--color-brand);
}
.principle__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.principle__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.offers { padding: 96px var(--container-pad); background: var(--color-page); }
.offers__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-12); }
.offers__head { display: flex; flex-direction: column; gap: var(--space-3); }
.offers__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: 59.3px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.offers__lead { font-size: var(--fs-prose); line-height: 20.8px; color: var(--color-muted); }
.offers__rows { display: flex; flex-direction: column; gap: var(--space-7); }
.offer {
display: grid;
grid-template-columns: 60px 200px 1fr auto;
gap: var(--space-11);
align-items: center;
padding: var(--space-10);
}
.offer__no {
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.offer__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.offer__text { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.offer__cta {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
white-space: nowrap;
}
@media (max-width: 1279px) {
.about-hero__inner { flex-direction: column; align-items: stretch; }
.about-hero__text { width: 100%; }
.about-hero__photo { width: 100%; }
.facts__inner { grid-template-columns: repeat(2, 1fr); }
.principles__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
.story__inner { flex-direction: column; }
.story__left { width: 100%; flex-direction: row; align-items: baseline; gap: var(--space-7); }
.offer { grid-template-columns: 48px 1fr; gap: var(--space-5) var(--space-8); }
.offer__text, .offer__cta { grid-column: 2; }
}
@media (max-width: 767px) {
.fact__label { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.fact__value { font-size: var(--fs-label); line-height: var(--lh-label); }
.fact:last-child .fact__value { font-size: var(--fs-prose-sm); line-height: 20.2px; }
.principles__grid { gap: var(--space-9); }
.principle { gap: var(--space-5); padding: var(--space-8); }
.principle__title { font-size: var(--fs-label-lg); line-height: 22px; }
.principle__text { font-size: var(--fs-ui-sm); line-height: 18px; }
.about-hero { padding: var(--space-10) var(--container-pad-mobile); }
.about-hero__inner { flex-direction: column; align-items: stretch; gap: var(--space-8); }
.about-hero__text { gap: var(--space-8); }
.about-hero__title { font-size: 38px; line-height: 42px; }
.about-hero__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
.about-hero__photo { height: 240px; }
.facts { padding: 0 var(--container-pad-mobile) var(--space-10); }
.facts__inner {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-7);
padding: var(--space-8);
border-radius: var(--radius-xl);
}
.fact { gap: var(--space-1); }
.story { padding: var(--space-11) var(--container-pad-mobile); }
.principles,
.offers { padding: var(--space-11) var(--container-pad-mobile); }
.story__inner { gap: var(--space-8); }
.story__no { font-size: 40px; line-height: 48px; }
.story__lead { font-size: var(--fs-label-lg); line-height: 26px; }
.principles__inner { gap: var(--space-9); }
.principles__title { font-size: var(--fs-h3); line-height: 30px; }
.principles__grid { gap: var(--space-9); }
.principle { padding: var(--space-8); gap: var(--space-5); }
.offers__inner { gap: var(--space-9); }
.offers__title { font-size: var(--fs-h3); line-height: 30px; }
}
@media (max-width: 767px) {
.principle__icon { width: 48px; height: 48px; }
.principle__icon .icon { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
.story { padding: var(--space-11) var(--container-pad-mobile); }
.story__inner { gap: var(--space-8); }
.story__left { align-items: center; gap: var(--space-5); }
.story__no { font-size: 36px; line-height: 48.49px; }
.story__label { font-size: var(--fs-h3); line-height: 30px; }
.story__right { gap: var(--space-8); }
.story__lead { font-size: 16px; line-height: 24px; }
.story__text { font-size: var(--fs-btn); line-height: 22px; }
.story__fine { font-size: var(--fs-ui-sm); line-height: 18px; }
}
.bs-hero { padding: var(--space-14) var(--container-pad); background: var(--color-page); }
.bs-hero__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-14); }
.bs-hero__text { width: 624px; flex: none; display: flex; flex-direction: column; gap: var(--space-7); }
.bs-hero__title {
margin: 0;
font-family: var(--font-display);
font-size: 64px;
line-height: 62px;
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.bs-hero__sub {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.bs-hero__lead { font-size: var(--fs-prose); line-height: var(--lh-prose-sm); color: var(--color-muted); }
.bs-hero__aside { flex: 1; display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.bs-hero__aside-title {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-subtle-on-light);
}
.bs-hero__list { display: flex; flex-direction: column; gap: var(--space-2); }
.bs-hero__list li {
font-size: var(--fs-ui);
line-height: 18px;
color: var(--color-muted);
}
.bs-hero__list li::before { content: "\2022\00a0"; }
.note-strip { padding: var(--space-10) var(--container-pad) var(--space-7); background: var(--color-page); }
.note-strip__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
gap: var(--space-7);
padding: var(--space-8);
background: var(--color-brand-surface);
border: 1px solid var(--color-brand);
border-radius: var(--radius-md);
}
.note-strip__icon { flex: none; color: var(--color-brand); width: 20px; height: 20px; }
.note-strip__icon .icon { width: 20px; height: 20px; }
.note-strip__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink); }
.steps { padding: var(--space-13) var(--container-pad); background: var(--color-page); }
.steps--alt { background: var(--color-page); }
.steps__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-11); }
.steps__head { display: flex; flex-direction: column; gap: var(--space-5); }
.steps__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.steps__lead { font-size: var(--fs-body); line-height: var(--lh-btn); color: var(--color-muted); }
.steps__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-9); }
.step { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-10); }
.step__head { display: flex; align-items: center; justify-content: space-between; }
.step__no {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.step__icon { color: var(--color-brand); }
.step__icon .icon { width: 32px; height: 32px; }
.step__body { display: flex; flex-direction: column; gap: var(--space-3); }
.step__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.step__title--sm { font-size: var(--fs-label); text-transform: none; }
.step__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.step__badge {
margin-top: auto;
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.consequences { padding: var(--space-13) var(--container-pad); background: var(--color-white); }
.consequences__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-10); }
.consequences__grid { display: flex; flex-direction: column; gap: var(--space-7); }
.consequence {
display: flex;
gap: var(--space-9);
padding: var(--space-9);
background: var(--color-page);
border-radius: var(--radius-md);
}
.consequence__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
flex: none;
border-radius: var(--radius-md);
background: var(--color-brand-surface);
color: var(--color-brand);
}
.consequence__icon .icon { width: 24px; height: 24px; }
.consequence__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.consequence__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.consequence__text { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.dl-intro { padding: 56px var(--container-pad) var(--space-11); background: var(--color-page); }
.dl-intro__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
text-align: center;
}
.dl-intro__title {
margin: 0;
font-family: var(--font-display);
font-size: 56px;
line-height: 54px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.dl-intro__lead { max-width: 693px; font-size: var(--fs-prose); line-height: var(--lh-lead); font-weight: var(--fw-medium); }
.dl-intro__note { max-width: 693px; font-size: var(--fs-body); line-height: 20px; color: var(--color-muted); }
.dl-workspace { padding: var(--space-12) var(--container-pad) var(--space-14); background: var(--color-brand-surface); }
.dl-workspace__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-10); align-items: flex-start; }
.limit { flex: 1; display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-11); border-radius: var(--radius-xl); }
.limit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-7); }
.limit__title-area { display: flex; flex-direction: column; gap: var(--space-2); }
.limit__kicker {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-muted);
}
.limit__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: var(--lh-h4);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.limit__state { border-radius: var(--radius-pill); padding: 6px var(--space-5); }
.limit__rule { margin: 0; border: 0; border-top: 1px solid var(--color-border); }
.limit__panel {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-10);
background: var(--color-page);
border-radius: var(--radius-md);
}
.limit__amount { display: flex; align-items: baseline; gap: var(--space-5); }
.limit__cur { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold); color: var(--color-muted); }
.limit__value { font-size: 80px; line-height: 72px; font-weight: var(--fw-extrabold); }
.limit__period {
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-brand);
}
.limit__desc { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.limit__actions { display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap; }
.limit__cta { height: 50px; padding-inline: var(--space-9); }
.limit__hint { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.limit__fine {
display: flex;
align-items: flex-start;
gap: var(--space-5);
font-size: var(--fs-ui); line-height: var(--lh-ui);
color: var(--color-muted);
}
.limit__fine-icon { color: var(--color-brand); flex: none; }
.dl-side { width: 380px; flex: none; display: flex; flex-direction: column; gap: var(--space-8); }
.dl-card { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-9); border-radius: var(--radius-lg); }
.dl-card--dark { background: var(--color-ink); color: var(--color-white); }
.dl-card__kicker {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-brand);
}
.dl-card__badge { align-self: flex-start; background: var(--color-danger); color: var(--color-white); border: 0; }
.dl-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.dl-card__text { font-size: var(--fs-ui); line-height: 20px; color: var(--color-muted); }
.dl-card--dark .dl-card__text { color: var(--color-subtle); }
.dl-side .dl-card__text { line-height: 18px; }
.ct-side .dl-card { gap: var(--space-5); }
.dl-card__label {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.dl-card__phone {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-black);
color: var(--color-accent);
}
.dl-card__fine { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-subtle); }
@media (max-width: 1279px) {
.bs-hero__inner { flex-direction: column; gap: var(--space-10); }
.bs-hero__text { width: 100%; }
.steps__row { grid-template-columns: 1fr; }
.dl-workspace__inner { flex-direction: column; }
.dl-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
.dl-card { flex: 1 1 280px; }
}
@media (max-width: 767px) {
.steps,
.consequences,
.dl-intro { padding-inline: var(--container-pad-mobile); }
.bs-hero-group {
display: flex;
flex-direction: column;
gap: var(--space-9);
padding: var(--space-12) var(--container-pad-mobile) var(--space-10);
background: var(--color-page);
}
.bs-hero { padding: 0; background: transparent; }
.bs-hero__inner { gap: var(--space-9); max-width: none; margin-inline: 0; }
.bs-hero__text { gap: var(--space-9); }
.bs-hero__title { font-size: 52px; line-height: 56px; }
.bs-hero__sub { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-semibold); }
.bs-hero__lead { font-size: 15px; line-height: 24px; }
.bs-hero .section__kicker {
align-self: flex-start;
padding: 4px 10px;
background: var(--color-brand-surface);
border: 1px solid var(--color-brand);
border-radius: 999px;
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
letter-spacing: 0;
}
.bs-hero .section__dash { display: none; }
.bs-hero__aside {
padding: var(--space-7);
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
gap: var(--space-5);
}
.bs-hero__aside-title { font-weight: var(--fw-extrabold); }
.bs-hero__list { gap: var(--space-3); }
.note-strip { padding: 0; background: transparent; }
.note-strip__text { font-size: 13px; line-height: 18px; }
.steps { padding-block: var(--space-11); }
.steps--alt { padding-block: var(--space-10); }
.steps--alt .steps__title { font-size: 28px; line-height: 30px; }
.steps--alt .steps__row { gap: var(--space-7); }
.steps__inner { gap: var(--space-9); }
.steps__title { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.steps__row { gap: var(--space-5); }
.steps:not(.steps--alt) { padding-block: var(--space-10) var(--space-7); }
.steps:not(.steps--alt) .steps__inner { gap: var(--space-3); }
.steps:not(.steps--alt) .steps__head { gap: var(--space-3); }
.steps:not(.steps--alt) .steps__title { font-size: 28px; line-height: 37.72px; }
.steps:not(.steps--alt) .steps__lead { font-size: var(--fs-body); line-height: 20px; }
.steps:not(.steps--alt) .steps__row { gap: var(--space-3); }
.steps:not(.steps--alt) .step { padding: var(--space-8); gap: var(--space-7); }
.steps:not(.steps--alt) .step__body { gap: var(--space-2); }
.steps:not(.steps--alt) .step__title {
font-family: var(--font-body);
font-size: var(--fs-prose-sm);
line-height: 19.5px;
}
.steps:not(.steps--alt) .step__text { line-height: 18px; }
.steps:not(.steps--alt) .step__badge {
position: relative;
margin-top: 0;
padding-top: var(--space-7);
}
.steps:not(.steps--alt) .step__badge::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
border-top: 1px solid var(--color-border);
}
.step { padding: var(--space-8); gap: var(--space-5); }
.consequences { padding-block: var(--space-11); }
.consequence { flex-direction: column; gap: var(--space-5); padding: var(--space-7); }
.dl-intro { padding-block: var(--space-10) var(--space-10); }
.dl-intro__inner { gap: var(--space-7); }
.dl-intro__title { font-size: 40px; line-height: 42px; }
.dl-workspace { padding: 0 var(--container-pad-mobile) var(--space-9); background: var(--color-page); }
.dl-workspace__inner { gap: 0; }
.limit { padding: var(--space-8); gap: var(--space-8); }
.limit__value { font-size: 48px; line-height: 44px; }
.limit__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.dl-intro__lead { font-size: var(--fs-body); line-height: 20px; }
.dl-intro__note { font-size: var(--fs-ui); line-height: 18px; }
.dl-intro .section__kicker {
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
gap: var(--space-2);
}
.dl-intro__lead + .dl-intro__note { margin-top: calc(var(--space-3) - var(--space-7)); }
.limit__actions { flex-direction: column; align-items: stretch; gap: var(--space-5); }
.limit__cta { width: 100%; height: 41px; }
.limit__hint { font-size: var(--fs-ui-xs); line-height: 15px; }
.limit__state { white-space: nowrap; }
.dl-side {
flex-direction: column;
gap: var(--space-7);
margin-inline: calc(var(--container-pad-mobile) * -1);
margin-top: var(--space-10);
padding: var(--space-10) var(--container-pad-mobile);
background: var(--color-brand-surface);
}
.dl-card { padding: var(--space-8); }
}
.hiw-intro { padding: var(--space-13) var(--container-pad) 56px; background: var(--color-page); }
.hiw-intro__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-9); }
.hiw-intro__cols { display: flex; gap: var(--space-13); align-items: flex-start; }
.hiw-intro__title {
margin: 0;
width: 560px;
flex: none;
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: var(--lh-hero);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.hiw-intro__aside { flex: 1; display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.hiw-intro__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-muted); }
.hiw-intro__note { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-subtle-on-light); }
.hiw-nav { padding: var(--space-8) var(--container-pad); background: var(--color-brand-surface); }
.hiw-nav__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--space-3);
}
.hiw-nav__item { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); }
.hiw-nav__dot {
display: grid;
place-items: center;
width: 24px;
height: 24px;
flex: none;
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: inset 0 0 0 1.5px var(--color-muted);
color: var(--color-muted);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
}
.hiw-nav__item.is-active .hiw-nav__dot {
background: var(--color-brand);
box-shadow: inset 0 0 0 1.5px var(--color-brand);
color: var(--color-white);
}
.hiw-nav__label {
font-family: var(--font-display);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
white-space: nowrap;
}
.hiw-nav__item.is-active .hiw-nav__label { color: var(--color-brand); }
.hiw-nav__rule { flex: 1; height: 1px; background: var(--color-border-strong); }
.hiw-step { padding: var(--space-14) var(--container-pad); }
.hiw-step--1, .hiw-step--3 { background: var(--color-white); }
.hiw-step--2 { background: var(--color-page-alt); }
.hiw-step--4 { background: var(--color-brand-surface); }
.hiw-step__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-14); align-items: center; }
.hiw-step--2 .hiw-step__inner,
.hiw-step--4 .hiw-step__inner { flex-direction: row-reverse; justify-content: flex-end; }
.hiw-step__text { width: 500px; flex: none; display: flex; flex-direction: column; gap: var(--space-9); }
.hiw-step__head { display: flex; flex-direction: column; gap: var(--space-9); }
.hiw-step__no {
font-family: var(--font-display);
font-size: 72px;
line-height: 97px;
font-weight: var(--fw-bold);
color: var(--color-border);
}
.hiw-step__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 48.5px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.hiw-step--4 .hiw-step__no { color: var(--color-white); }
.hiw-step__lead { font-size: var(--fs-prose-sm); line-height: var(--lh-lead); color: var(--color-muted); }
.hiw-step__hint {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-subtle-on-light);
}
.hiw-step__hint-icon { flex: none; color: var(--color-brand); }
.hiw-step__hint-icon .icon { width: 16px; height: 16px; }
.hiw-step__hint--brand { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-bold); color: var(--color-brand); }
.hiw-step__hint--muted { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.hiw-step__hint--subtle { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-subtle-on-light); }
.hiw-step__hint--subtle .hiw-step__hint-icon { color: var(--color-subtle-on-light); }
.hiw-step__demo { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); min-width: 0; }
.hiw-step--1 .hiw-step__demo,
.hiw-step--2 .hiw-step__demo { width: 480px; }
.hiw-step--3 .hiw-step__demo { width: 360px; }
.hiw-step--4 .hiw-step__demo { width: 340px; }
.hiw-step__panel { width: 100%; }
.hiw-step__caption {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-subtle-on-light);
text-align: center;
}
.hiw-card {
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
overflow: hidden;
}
.hiw-card__head {
display: flex;
align-items: center;
gap: var(--space-3);
height: 56px;
padding-inline: var(--space-7);
background: var(--color-page-alt);
box-shadow: inset 0 -1px 0 var(--color-border);
}
.hiw-card__league {
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.hiw-card__meta { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.hiw-card__all {
margin-left: auto;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-brand);
white-space: nowrap;
}
.hiw-card__body { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-8); }
.hiw-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.hiw-card__event { display: flex; flex-direction: column; gap: var(--space-1); }
.hiw-card__when { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.hiw-card__team {
font-size: var(--fs-prose-sm);
line-height: 19.5px;
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.hiw-card__market { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hiw-card__market-label {
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-subtle-on-light);
}
.hiw-card__market-name { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-ink); }
.hiw-card__odds { display: flex; gap: var(--space-3); }
.hiw-odds {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
min-width: 0;
height: 41px;
padding-inline: var(--space-7);
background: var(--color-white);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-odds__name {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.hiw-odds__value {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-extrabold);
color: var(--color-brand);
}
.hiw-odds.is-picked {
background: var(--color-brand);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.hiw-odds.is-picked .hiw-odds__name { color: var(--color-white); }
.hiw-odds.is-picked .hiw-odds__value { color: var(--color-accent); }
.hiw-odds__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
background: var(--color-accent);
border-radius: var(--radius-round);
color: var(--color-accent-ink);
}
.hiw-odds__dot .icon { width: 6px; height: 6px; }
.hiw-card__more {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
font-weight: var(--fw-bold);
color: var(--color-muted);
}
.hiw-card__tag {
padding: var(--space-1) var(--space-3);
background: var(--color-brand-surface);
border-radius: var(--radius-sm);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.hiw-math {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: var(--space-7);
background: var(--color-page-alt);
border-radius: var(--radius);
}
.hiw-math__label {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-muted);
}
.hiw-math__row { display: flex; align-items: center; gap: var(--space-3); }
.hiw-math__formula {
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-extrabold);
color: var(--color-ink);
}
.hiw-math__value {
padding: var(--space-1) var(--space-3);
background: var(--color-accent);
border-radius: var(--radius-sm);
font-size: var(--fs-prose-sm);
line-height: 19.5px;
font-weight: var(--fw-black);
color: var(--color-accent-ink);
}
.hiw-slip {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-9);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border), 0 8px 16px rgba(0, 0, 0, 0.031);
}
.hiw-slip__head { display: flex; align-items: center; justify-content: space-between; }
.hiw-slip__title {
font-family: var(--font-display);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.hiw-slip__count {
padding: var(--space-1) var(--space-4);
background: var(--color-brand);
border-radius: var(--radius-pill);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-white);
}
.hiw-slip__pick {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7);
background: var(--color-brand-surface);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.hiw-slip__pick-top,
.hiw-slip__pick-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hiw-slip__pick-top { gap: var(--space-3); }
.hiw-slip__pick-top .hiw-slip__event { margin-right: auto; }
.hiw-slip__league {
padding: 2px var(--space-2);
background: var(--color-white);
border-radius: var(--radius-xs);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.hiw-slip__event { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.hiw-slip__market { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.hiw-slip__odds {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-extrabold);
color: var(--color-brand);
}
.hiw-slip__stake { display: flex; flex-direction: column; gap: var(--space-3); }
.hiw-slip__stake-label {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
}
.hiw-slip__input {
display: flex;
align-items: center;
gap: var(--space-3);
height: 53px;
padding-inline: var(--space-7);
background: var(--color-page);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1.5px var(--color-brand);
}
.hiw-slip__cur,
.hiw-slip__amount { font-size: 16px; line-height: 20.8px; font-weight: var(--fw-extrabold); }
.hiw-slip__fine { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); color: var(--color-subtle-on-light); }
.hiw-slip__remove { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-bold); color: var(--color-muted); }
.hiw-slip__rule { position: relative; height: 0; }
.hiw-slip__rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border);
}
.hiw-slip__return { display: flex; align-items: center; justify-content: space-between; }
.hiw-slip__return-label {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.hiw-slip__return-value {
padding: 6px var(--space-5);
background: var(--color-accent);
border-radius: var(--radius-sm);
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-black);
color: var(--color-accent-ink);
}
.hiw-slip__cta {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: var(--color-brand);
border-radius: var(--radius);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-white);
}
.hiw-place {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-9);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-place__stake { display: flex; flex-direction: column; gap: var(--space-3); }
.hiw-place__label {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-muted);
}
.hiw-place__input {
display: flex;
align-items: center;
gap: var(--space-3);
height: 42px;
padding-inline: var(--space-5);
background: var(--color-page);
border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-place__cur,
.hiw-place__amount { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-bold); }
.hiw-place__return { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hiw-place__return-label { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.hiw-place__return-value {
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-extrabold);
color: var(--color-brand);
}
.hiw-place__cta {
display: flex;
align-items: center;
justify-content: center;
height: 46px;
background: var(--color-brand);
border-radius: var(--radius-sm);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-white);
}
.hiw-place__rule { position: relative; height: 0; }
.hiw-place__rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border);
}
.hiw-place__note {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
color: var(--color-muted);
}
.hiw-place__link { font-weight: var(--fw-bold); color: var(--color-brand); text-decoration: none; }
.hiw-flow { padding: var(--space-11) var(--container-pad); background: var(--color-white); }
.hiw-flow__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9);
}
.hiw-flow__list { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.hiw-flow__item {
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-brand);
}
.hiw-flow__sep { display: inline-flex; color: var(--color-subtle); }
.hiw-flow__tag { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.hiw-cta { padding: var(--space-13) var(--container-pad); background: var(--color-page); }
.hiw-cta__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-9);
text-align: center;
}
.hiw-cta__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.hiw-cta__actions { display: flex; gap: var(--space-7); flex-wrap: wrap; justify-content: center; }
.ct-intro { padding: var(--space-13) var(--container-pad) var(--space-11); background: var(--color-page); }
.ct-intro__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-9);
text-align: center;
}
.ct-intro__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-hero);
line-height: var(--lh-hero);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ct-intro__lead { max-width: 726px; font-size: var(--fs-prose); line-height: var(--lh-prose-sm); color: var(--color-muted); }
.ct-shortcut { padding: 0 var(--container-pad) var(--space-9); background: var(--color-page); }
.ct-shortcut__inner {
max-width: var(--container);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-9);
padding: var(--space-8);
background: var(--color-white);
box-shadow: inset 0 0 0 1px var(--color-border);
border-radius: var(--radius-md);
}
.ct-shortcut__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ct-shortcut__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label);
line-height: var(--lh-label);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ct-shortcut__note { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-muted); }
.ct-shortcut__cta { flex: none; color: var(--color-brand); }
.ct-workspace { padding: var(--space-12) var(--container-pad) var(--space-14); background: var(--color-white); }
.ct-workspace__inner { max-width: var(--container); margin-inline: auto; display: flex; gap: var(--space-10); align-items: flex-start; }
.ct-form { flex: 1; display: flex; flex-direction: column; gap: 36px; padding: var(--space-11); min-width: 0; }
.ct-form__head { display: flex; flex-direction: column; gap: var(--space-3); }
.ct-form__title {
margin: 0;
font-family: var(--font-display);
font-size: 36px;
line-height: 48.49px;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ct-form__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-7); }
.ct-form__lead { font-size: var(--fs-body); line-height: 18.2px; color: var(--color-muted); }
.ct-form__req { flex: none; font-size: var(--fs-body); line-height: 18.2px; color: var(--color-danger); font-weight: var(--fw-bold); }
.ct-form__body { display: flex; flex-direction: column; gap: 36px; }
.ct-form__section {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-9);
padding-top: 36px;
}
.ct-form__section::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: var(--color-border);
}
.ct-form__legend { display: flex; align-items: center; gap: var(--space-7); }
.ct-form__no {
flex: none;
font-family: var(--font-display);
font-size: 32px;
line-height: 43.1px;
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.ct-form__legend-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-form__legend-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-label-lg);
line-height: var(--lh-label-lg);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.ct-form__legend-note { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.ct-form__area { min-height: 120px; resize: vertical; }
.ct-form__opt {
padding: var(--space-1) var(--space-2);
background: var(--color-page-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
color: var(--color-muted);
}
.ct-form .field__label { text-transform: uppercase; }
.ct-form .field__req { color: var(--color-danger); }
.ct-form .field__control {
padding: 14px var(--space-7);
background: var(--color-page);
border-radius: var(--radius);
line-height: 18.2px;
}
.ct-form__submission { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.ct-form__fine { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.ct-form__demo { color: var(--color-subtle-on-light); }
.ct-form__submit { height: 50px; padding-inline: var(--space-10); }
.ct-attach { display: flex; flex-direction: column; gap: var(--space-3); }
.ct-attach__label { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; }
.ct-upload {
display: flex;
align-items: center;
gap: var(--space-5);
height: 80px;
padding: var(--space-9);
background: var(--color-page);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
}
.ct-upload__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--color-brand-surface);
border-radius: 100px;
color: var(--color-brand);
}
.ct-upload__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-upload__title { font-size: var(--fs-body); line-height: 18.2px; font-weight: var(--fw-bold); }
.ct-upload__note { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); color: var(--color-muted); }
.ct-upload__cta {
margin-left: auto;
flex: none;
display: inline-flex;
align-items: center;
height: 32px;
padding-inline: var(--space-7);
background: var(--color-brand);
border-radius: var(--radius-sm);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
font-weight: var(--fw-bold);
color: var(--color-white);
cursor: pointer;
}
.ct-upload__cta:hover { background: var(--color-brand-hover); }
.ct-side { width: 380px; flex: none; display: flex; flex-direction: column; gap: var(--space-8); }
.ct-side__mail { font-size: var(--fs-body); line-height: var(--lh-btn); font-weight: var(--fw-bold); }
.ct-side__rg { background: var(--color-brand-surface); border-left: 3px solid var(--color-brand); }
@media (max-width: 1279px) {
.hiw-intro__cols { flex-direction: column; gap: var(--space-9); }
.hiw-intro__title { width: 100%; }
.hiw-step__inner,
.hiw-step--2 .hiw-step__inner,
.hiw-step--4 .hiw-step__inner { flex-direction: column; gap: var(--space-10); justify-content: flex-start; }
.hiw-step__text { width: 100%; }
.hiw-step__demo { width: 100%; }
.ct-workspace__inner { flex-direction: column; }
.ct-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
.ct-side > * { flex: 1 1 280px; }
}
@media (max-width: 1023px) {
.hiw-nav__inner { flex-wrap: wrap; gap: var(--space-5); }
.hiw-nav__rule { display: none; }
}
@media (max-width: 767px) {
.hiw-intro { padding: var(--space-10) var(--container-pad-mobile); }
.hiw-intro__title { font-size: 38px; line-height: 42px; }
.hiw-intro__inner { gap: var(--space-8); }
.hiw-intro .section__kicker {
font-family: var(--font-body);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
}
.hiw-intro .section__dash { width: 12px; height: 4px; }
.hiw-intro__cols { gap: var(--space-8); }
.hiw-intro__aside { gap: var(--space-8); }
.hiw-intro__lead { font-size: var(--fs-btn); line-height: 20px; }
.hiw-intro__note { font-size: var(--fs-ui); line-height: 18px; }
.hiw-nav { padding: var(--space-5) var(--container-pad-mobile); }
.hiw-nav__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-3);
row-gap: 0;
}
.hiw-nav__item { flex: none; }
.hiw-nav__inner > :nth-child(4) {
flex-basis: 100%;
height: var(--space-5);
background: none;
}
.hiw-nav__rule { display: block; flex: 1; align-self: center; height: 2px; background: var(--color-border); }
.hiw-nav__inner > :nth-child(2) { background: var(--color-brand); }
.hiw-nav__dot { width: 24px; height: 24px; }
.hiw-nav__label { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }
.hiw-step { padding: var(--space-10) var(--container-pad-mobile); }
.hiw-step__inner,
.hiw-step--2 .hiw-step__inner,
.hiw-step--4 .hiw-step__inner { gap: var(--space-8); align-items: stretch; }
.hiw-step__text,
.hiw-step__demo { display: contents; }
.hiw-step--1 .hiw-step__demo,
.hiw-step--2 .hiw-step__demo,
.hiw-step--3 .hiw-step__demo,
.hiw-step--4 .hiw-step__demo { width: auto; }
.hiw-step__head { gap: var(--space-3); }
.hiw-step__no { font-size: 40px; line-height: 53.88px; }
.hiw-step__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.hiw-step__lead { font-size: var(--fs-btn); line-height: 20px; }
.hiw-step__hint,
.hiw-step__hint--brand,
.hiw-step__hint--muted,
.hiw-step__hint--subtle { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-step__caption { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-card { border-radius: var(--radius-lg); }
.hiw-card__head { height: 44px; padding-inline: var(--space-5); }
.hiw-card__league { font-size: var(--fs-label); line-height: var(--lh-label); }
.hiw-card__meta { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-card__all { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-card__body { gap: var(--space-5); padding: var(--space-7); }
.hiw-card__team { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hiw-odds { height: 37px; padding-inline: var(--space-5); }
.hiw-card__row--foot { padding-top: var(--space-1); }
.hiw-card__more { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-card__when { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.hiw-card__event { gap: 2px; }
.hiw-card__market-name { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-odds { padding-inline: var(--space-4); }
.hiw-card__tag { padding: 2px var(--space-2); font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.hiw-math {
gap: var(--space-3);
padding: var(--space-6);
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-math__formula { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hiw-slip {
gap: var(--space-6);
padding: var(--space-7);
box-shadow: inset 0 0 0 1.5px var(--color-brand);
}
.hiw-slip__title { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
.hiw-slip__count { padding: 2px var(--space-3); font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.hiw-slip__pick { gap: 10px; padding: var(--space-5); box-shadow: none; }
.hiw-slip__market { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hiw-slip__odds { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hiw-slip__stake { gap: var(--space-2); }
.hiw-slip__stake-label { font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); }
.hiw-slip__input { height: 44px; padding-inline: var(--space-5); }
.hiw-slip__cur,
.hiw-slip__amount { font-size: var(--fs-prose-sm); line-height: 19.5px; }
.hiw-slip__return-label { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hiw-slip__return-value { padding: var(--space-1) var(--space-4); font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hiw-slip__cta { height: 46px; }
.hiw-place { gap: var(--space-5); padding: var(--space-7); border-radius: var(--radius-md); }
.hiw-place__stake { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hiw-place__label { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); font-weight: var(--fw-bold); }
.hiw-place__input { height: auto; padding: 0; gap: 0; background: none; box-shadow: none; }
.hiw-place__cur,
.hiw-place__amount { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-extrabold); }
.hiw-place__return-label { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); font-weight: var(--fw-bold); text-transform: uppercase; }
.hiw-place__return-value { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hiw-place__cta { height: 41px; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hiw-place__note { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hiw-cta { padding: var(--space-11) var(--container-pad-mobile); }
.hiw-cta__inner { gap: var(--space-8); }
.hiw-cta__title { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.hiw-cta__actions { gap: 10px; }
.hiw-cta__actions .btn { height: 50px; }
.hiw-flow { padding: var(--space-8) var(--container-pad-mobile); }
.hiw-flow__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hiw-cta__actions { width: 100%; flex-direction: column; }
.ct-intro { padding: var(--space-11) var(--container-pad-mobile) var(--space-10); }
.ct-intro__inner { gap: var(--space-7); }
.ct-intro__title { font-size: 38px; line-height: 42px; }
.ct-intro__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
.ct-shortcut { padding: 0 var(--container-pad-mobile) var(--space-10); }
.ct-shortcut__inner { flex-direction: column; align-items: flex-start; gap: var(--space-7); padding: var(--space-8); }
.ct-shortcut__title { font-size: var(--fs-prose-sm); line-height: 20.2px; }
.ct-shortcut__note { line-height: 18px; }
.ct-shortcut__cta { padding: 10px var(--space-8); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.ct-workspace { padding: var(--space-9) var(--container-pad-mobile) var(--space-11); }
.ct-form {
padding: 0;
gap: var(--space-10);
background: none;
box-shadow: none;
border-radius: 0;
}
.ct-form__head { gap: var(--space-3); }
.ct-form__title { font-size: 28px; line-height: 37.7px; }
.ct-form__meta { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.ct-form__lead { font-size: var(--fs-ui); line-height: 18px; }
.ct-form__req { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.ct-form__row { grid-template-columns: 1fr; }
.ct-side { flex-direction: column; }
.ct-upload { flex-wrap: wrap; }
.ct-upload__cta { margin-left: 0; width: 100%; }
}
.hc-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-9);
padding: var(--space-13) var(--container-pad) var(--space-11);
background: var(--color-page);
}
.hc-intro .section__kicker {
font-family: var(--font-body);
font-weight: var(--fw-extrabold);
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
gap: var(--space-3);
}
.hc-intro .section__dash { width: 16px; height: 6px; border-radius: var(--radius-xs); }
.hc-intro__title {
max-width: var(--container);
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-hero);
line-height: var(--lh-hero);
text-transform: uppercase;
text-align: center;
color: var(--color-ink);
}
.hc-intro__lead {
max-width: 640px;
margin: 0;
font-size: var(--fs-lead);
line-height: var(--lh-lead);
text-align: center;
color: var(--color-muted);
}
.hc-search {
display: flex;
align-items: center;
gap: var(--space-7);
width: 680px;
max-width: 100%;
padding: var(--space-7) var(--space-9);
background: var(--color-white);
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 2px var(--color-brand), 0 8px 16px rgba(95, 46, 234, 0.102);
}
.hc-search__icon { width: 20px; height: 20px; flex: none; color: var(--color-brand); }
.hc-search__input {
flex: 1;
min-width: 0;
border: 0;
background: none;
font-family: var(--font-body);
font-size: 16px;
line-height: 20.8px;
color: var(--color-ink);
}
.hc-search__input::placeholder { color: var(--color-subtle-on-light); }
.hc-search__input:focus { outline: none; }
.hc-search:focus-within { box-shadow: inset 0 0 0 2px var(--color-brand), var(--focus-ring); }
.hc-search__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: none;
padding: 0;
border: 0;
background: none;
color: var(--color-subtle-on-light);
cursor: pointer;
}
.hc-search__clear .icon { width: 18px; height: 18px; }
.hc-search__clear:hover { color: var(--color-ink); }
.hc-search__status {
margin: 0;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-muted);
}
.hc-shortcuts {
padding: var(--space-7) var(--container-pad) var(--space-12);
background: var(--color-page);
}
.hc-shortcuts__rail {
display: flex;
justify-content: center;
gap: var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.hc-pill {
display: inline-flex;
align-items: center;
gap: var(--space-5);
height: 48px;
padding: var(--space-5) var(--space-8);
background: var(--color-white);
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--color-border);
text-decoration: none;
white-space: nowrap;
}
.hc-pill__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: none;
background: var(--color-brand-surface);
border-radius: var(--radius-pill);
color: var(--color-brand);
}
.hc-pill__label {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
color: var(--color-ink);
}
.hc-pill__arrow { color: var(--color-muted); }
.hc-pill:hover { box-shadow: inset 0 0 0 1px var(--color-brand); }
.hc-pill:hover .hc-pill__arrow { color: var(--color-brand); }
.hc-workspace {
padding: var(--space-12) var(--container-pad) var(--container-pad);
background: var(--color-page);
}
.hc-workspace__inner {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
align-items: start;
gap: var(--space-12);
max-width: var(--container);
margin-inline: auto;
}
.hc-topics { display: flex; flex-direction: column; gap: var(--space-9); }
.hc-topics__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h6);
line-height: var(--lh-h6);
text-transform: uppercase;
color: var(--color-ink);
}
.hc-topics__trigger { display: none; }
.hc-topics__list {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.hc-topic {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 46px;
padding: var(--space-6) var(--space-7);
background: none;
border: 0;
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px transparent;
font-family: var(--font-body);
text-align: left;
cursor: pointer;
}
.hc-topic__left { display: inline-flex; align-items: center; gap: var(--space-5); min-width: 0; }
.hc-topic__icon { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.hc-topic__label {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-medium);
color: var(--color-ink);
}
.hc-topic__chev { width: 14px; height: 14px; flex: none; color: var(--color-subtle-on-light); }
.hc-topic:hover { background: var(--color-page-alt); }
.hc-topic.is-active {
background: var(--color-brand-surface);
box-shadow: inset 0 0 0 1px var(--color-brand);
}
.hc-topic.is-active .hc-topic__label { font-weight: var(--fw-bold); color: var(--color-brand); }
.hc-topic.is-active .hc-topic__icon,
.hc-topic.is-active .hc-topic__chev { color: var(--color-brand); }
.hc-pane { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.js .hc-panel:not(.is-active) { display: none; }
.hc-panel { display: flex; flex-direction: column; gap: var(--space-10); }
.hc-panel__header { display: flex; flex-direction: column; gap: var(--space-3); }
.hc-panel__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.hc-panel__eyebrow-label {
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-brand);
}
.hc-panel__dot { color: var(--color-subtle-on-light); }
.hc-panel__count { font-weight: var(--fw-bold); color: var(--color-muted); }
.hc-panel__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 36px;
line-height: 48.49px;
text-transform: uppercase;
color: var(--color-ink);
}
.hc-panel__desc {
margin: 0;
font-size: var(--fs-lead);
line-height: 19.5px;
color: var(--color-muted);
}
.hc-acc {
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border);
overflow: hidden;
}
.hc-acc__row + .hc-acc__row { box-shadow: inset 0 1px 0 var(--color-border); }
.hc-acc__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-7);
padding: var(--space-8) var(--space-9);
cursor: pointer;
list-style: none;
}
.hc-acc__trigger::-webkit-details-marker { display: none; }
.hc-acc__q {
font-size: 16px;
line-height: 20.8px;
font-weight: var(--fw-medium);
color: var(--color-ink);
}
.hc-acc__chev { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.hc-acc__row[open] { background: var(--color-brand-surface); }
.hc-acc__row[open] .hc-acc__q { font-weight: var(--fw-bold); color: var(--color-brand); }
.hc-acc__row[open] .hc-acc__chev { color: var(--color-brand); rotate: 180deg; }
.hc-acc__row:hover .hc-acc__q { color: var(--color-brand); }
.hc-acc__body {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: 0 var(--space-9) var(--space-9);
}
.hc-acc__text {
margin: 0;
font-size: var(--fs-btn);
line-height: 20px;
color: var(--color-ink);
}
.hc-steps {
display: flex;
flex-direction: column;
gap: var(--space-7);
margin: 0;
padding: 0;
list-style: none;
}
.hc-steps__item { display: flex; gap: var(--space-5); }
.hc-steps__no {
flex: none;
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
color: var(--color-brand);
}
.hc-steps__text { font-size: var(--fs-btn); line-height: 20px; color: var(--color-ink); }
.hc-acc__actions {
display: flex;
align-items: center;
gap: var(--space-9);
margin: 0;
padding-top: var(--space-3);
}
.hc-acc__actions .link-arrow { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hc-acc__related {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
color: var(--color-muted);
text-decoration: none;
}
.hc-acc__related:hover { color: var(--color-brand); text-decoration: underline; }
.hc-pane__empty {
margin: var(--space-9) 0 0;
font-size: var(--fs-lead);
line-height: var(--lh-lead);
color: var(--color-muted);
}
@media (max-width: 1279px) {
.hc-shortcuts__rail { flex-wrap: wrap; }
}
@media (max-width: 1023px) {
.hc-workspace__inner { grid-template-columns: minmax(0, 1fr); }
.hc-topics { width: 100%; }
}
@media (max-width: 767px) {
.hc-intro {
gap: var(--space-7);
padding: var(--space-10) var(--container-pad-mobile) var(--space-9);
}
.hc-intro .section__kicker { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); gap: var(--space-2); }
.hc-intro .section__dash { width: 12px; height: 4px; border-radius: 2px; }
.hc-intro__title { font-size: var(--fs-hero-sm); line-height: 40px; }
.hc-intro__lead { font-size: var(--fs-btn); line-height: 20px; }
.hc-search {
width: 100%;
gap: var(--space-5);
padding: var(--space-5) var(--space-7);
box-shadow: inset 0 0 0 2px var(--color-brand), 0 4px 8px rgba(95, 46, 234, 0.063);
}
.hc-search__icon { width: 16px; height: 16px; }
.hc-search__input { font-size: var(--fs-btn); line-height: var(--lh-btn); }
.hc-search__clear,
.hc-search__clear .icon { width: 14px; height: 14px; }
.hc-shortcuts { padding: 0 0 var(--space-9); }
.hc-shortcuts__rail {
flex-wrap: nowrap;
justify-content: flex-start;
gap: var(--space-3);
padding-inline: var(--container-pad-mobile);
overflow-x: auto;
scrollbar-width: none;
}
.hc-shortcuts__rail::-webkit-scrollbar { display: none; }
.hc-pill {
height: 37px;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
}
.hc-pill__icon { width: 14px; height: 14px; background: none; }
.hc-pill__icon .icon { width: 14px; height: 14px; }
.hc-pill__label { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hc-pill__arrow { display: none; }
.hc-workspace { padding: 0; }
.hc-workspace__inner { display: block; }
.hc-topics {
gap: var(--space-5);
padding: 0 var(--container-pad-mobile) var(--space-9);
}
.hc-topics__title { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }
.hc-topics__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 46px;
padding: var(--space-6);
background: var(--color-white);
border: 0;
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
font-family: var(--font-body);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
color: var(--color-brand);
cursor: pointer;
}
.hc-topics__chev { width: 16px; height: 16px; color: var(--color-brand); }
.hc-topics__trigger[aria-expanded="true"] .hc-topics__chev { rotate: 180deg; }
.hc-topics__list {
gap: 0;
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border-light);
overflow: hidden;
}
.js .hc-topics__trigger[aria-expanded="false"] + .hc-topics__list { display: none; }
.hc-topic {
height: 47px;
border-radius: 0;
box-shadow: inset 0 -1px 0 var(--color-border-light);
}
.hc-topics__list li:last-child .hc-topic { box-shadow: none; }
.hc-topic__icon,
.hc-topic__chev { display: none; }
.hc-topic__label { font-weight: var(--fw-regular); }
.hc-topic.is-active {
background: #f0e8ff;
box-shadow: inset 0 -1px 0 var(--color-border-light);
}
.hc-panel { gap: 0; }
.hc-panel__header {
gap: var(--space-1);
padding: 0 var(--container-pad-mobile) var(--space-7);
}
.hc-panel__eyebrow { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.hc-panel__title { font-size: 28px; line-height: 37.72px; }
.hc-panel__desc { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hc-acc {
border-radius: 0;
box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border);
}
.hc-acc__trigger { padding: var(--space-7); }
.hc-acc__q { font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: var(--fw-medium); }
.hc-acc__body {
gap: var(--space-5);
padding: 0 var(--space-7) var(--space-8);
}
.hc-steps { gap: var(--space-5); }
.hc-steps__item { gap: var(--space-3); }
.hc-steps__no { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hc-steps__text { font-size: var(--fs-ui); line-height: 18px; }
.hc-acc__text { font-size: var(--fs-ui); line-height: 18px; }
.hc-acc__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}
.hc-acc__actions .link-arrow { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.hc-acc__related { font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.hc-pane { gap: var(--space-10); }
.hc-pane__empty { padding-inline: var(--container-pad-mobile); }
}
@media (max-width: 389px) {
.hc-topics__trigger,
.hc-topic { min-width: 0; }
.hc-topic__label { overflow-wrap: anywhere; }
}
.js .hc-pane.is-searching .hc-panel { display: flex; }
.js .hc-pane.is-searching .hc-panel.is-empty { display: none; }
#register .auth__panel {
width: 680px;
max-width: min(680px, 100%);
gap: var(--space-10);
padding: var(--space-12);
border-radius: var(--radius-2xl);
}
#register .d-h2 { font-size: 36px; line-height: 40px; text-transform: none; }
.auth__intro { display: flex; flex-direction: column; gap: var(--space-5); }
.auth__intro .section__kicker { font-family: var(--font-body); font-size: var(--fs-ui-xs); line-height: var(--lh-ui-xs); letter-spacing: 0; }
.auth__intro .t-prose { font-size: var(--fs-lead); line-height: 22px; }
#register .auth__form { gap: var(--space-10); }
#register .auth__section { gap: var(--space-7); }
#register .auth__group {
gap: var(--space-8);
padding: var(--space-9);
border-radius: var(--radius-xl);
}
.auth__row--2, .auth__row--title, .auth__row--addr { gap: var(--space-7); }
#register .auth__limit {
gap: var(--space-5);
padding: var(--space-8);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.auth__actions { display: flex; flex-direction: column; gap: var(--space-8); }
.auth__actions .btn { height: 56px; }
@media (max-width: 767px) {
#register .auth__panel {
width: 100%;
max-width: 100%;
gap: var(--space-9);
padding: var(--space-9);
border-radius: 20px;
}
#register .d-h2 { text-transform: uppercase; font-size: 28px; line-height: 32px; }
.auth__intro { gap: var(--space-3); }
.auth__intro .t-prose { font-size: var(--fs-body); line-height: 20px; }
#register .auth__form { gap: var(--space-9); }
#register .auth__section { gap: var(--space-5); }
#register .auth__group { gap: var(--space-7); padding: var(--space-7); }
.auth__dob .auth__row--3 { gap: var(--space-3); }
.auth__actions { gap: var(--space-7); }
.auth__actions .btn { height: 52px; }
}
#verify-email .auth__panel {
width: 520px;
max-width: min(520px, 100%);
gap: var(--space-10);
padding: var(--space-12);
border-radius: var(--radius-2xl);
}
#verify-email .d-h2 { font-size: 36px; line-height: 40px; }
.verify__head { align-items: center; }
.verify__titles { display: flex; flex-direction: column; gap: var(--space-3); }
.verify__delivery { display: flex; flex-direction: column; gap: var(--space-5); }
.verify__delivery > p:first-child { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.verify__hint { font-size: 14px; line-height: 20px; }
.verify__code-section { display: flex; flex-direction: column; gap: var(--space-3); }
.verify__code .field__label { margin-bottom: var(--space-3); }
.verify__cell {
width: 72px;
height: 56px;
border: 0;
box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.verify__cell:focus-visible { box-shadow: inset 0 0 0 2px var(--color-brand); }
.verify__actions .btn { height: 54px; }
.auth__switch { line-height: var(--lh-btn); }
@media (max-width: 767px) {
#verify-email .auth__panel {
width: 100%;
max-width: 100%;
gap: var(--space-9);
padding: var(--space-9);
border-radius: 20px;
}
#verify-email .d-h2 { font-size: 28px; line-height: 32px; }
.verify__titles { gap: var(--space-5); }
.verify__icon { width: 44px; height: 44px; }
.verify__delivery { gap: var(--space-3); }
.verify__actions .btn { height: 50px; }
.verify__resend { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
.cookie-bar__inner {
padding: 40px var(--container-pad) 48px;
gap: var(--space-10);
}
.cookie-bar__top { gap: var(--space-13); }
.cookie-cat__head .badge { text-transform: uppercase; }
.cookie-bar__intro { gap: var(--space-7); }
.cookie-bar__intro .t-prose { font-size: var(--fs-lead); line-height: 22px; }
@media (max-width: 767px) {
.cookie-bar__intro .t-prose { font-size: var(--fs-body); line-height: 20px; }
.cookie-bar__intro .d-h2 { font-size: 26px; line-height: 35px; }
.cookie-bar__intro { gap: var(--space-5); }
.cookie-bar__links { margin-top: var(--space-1); }
}
.cookie-bar__actions { width: 456px; flex: none; gap: var(--space-4); }
.cookie-bar__actions .btn:first-child { height: 52px; }
.cookie-bar__actions .btn:not(:first-child) {
height: 44px;
background: var(--color-page);
box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.cookie-bar__rule::before { border-top-color: var(--color-border); }
.cookie-bar__cats { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); padding-top: 0; border-top: 0; }
.cookie-cat { display: flex; flex-direction: column; gap: var(--space-7); position: relative; }
.cookie-cat > p { font-size: var(--fs-body); line-height: 20px; }
.cookie-bar__cats { align-items: start; }
.cookie-cat + .cookie-cat::before {
content: "";
position: absolute;
left: calc(var(--space-10) / -2);
top: 0; bottom: 0;
width: 1px;
background: var(--color-border);
}
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; gap: var(--space-3); }
.cookie-cat__title { display: flex; align-items: center; gap: var(--space-3); }
.cookie-cat__num { font-family: var(--font-display); font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); }
.cookie-cat__name { font-family: var(--font-display); font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); }
@media (max-width: 767px) {
.cookie-bar__panel { border-radius: 22px 22px 0 0; }
.cookie-bar__inner { padding: 24px 20px 28px 20px; gap: var(--space-9); }
.cookie-bar__top { gap: var(--space-8); }
.cookie-bar__actions { width: 100%; }
.cookie-bar__actions .btn {
height: 54px;
background: var(--color-page);
box-shadow: inset 0 0 0 1px var(--color-border-strong);
}
.cookie-bar__actions .btn:first-child { background: var(--color-brand); box-shadow: none; }
.cookie-bar__cats { grid-template-columns: 1fr; gap: 0; }
.cookie-cat { padding-block: var(--space-7); gap: var(--space-3); }
.cookie-cat + .cookie-cat::before {
left: 0; right: 0; top: 0; bottom: auto;
width: auto; height: 1px;
}
}
.menu-drawer__panel {
width: min(340px, 100%);
padding: 0;
gap: 0;
}
.menu-drawer__head {
flex: none;
height: 56px;
padding-inline: var(--space-8);
box-shadow: inset 0 -1px 0 var(--color-border);
}
.menu-drawer__logo { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.menu-drawer__close {
width: 44px;
height: 44px;
rotate: 0deg;
background: transparent;
}
.menu-drawer__close .icon { width: 20px; height: 20px; }
.menu-drawer__body {
display: flex;
flex-direction: column;
gap: var(--space-9);
padding: var(--space-7) var(--space-8) var(--space-9);
overflow-y: auto;
flex: 1 1 auto;
}
.menu-drawer__link {
height: 52px;
padding-block: 0;
border-bottom: 0;
box-shadow: inset 0 -1px 0 var(--color-border);
font-size: 15px;
line-height: 20.2px;
}
.menu-drawer__list li:last-child .menu-drawer__link { box-shadow: none; }
.menu-drawer__rg { gap: var(--space-3); }
.menu-drawer__rg-list { padding: var(--space-3) var(--space-8); border-radius: var(--radius-lg); }
.menu-drawer__rg-list a { height: 46px; padding-block: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 14px; line-height: 18.2px; }
.menu-drawer__cta .btn { height: 48px; border-radius: var(--radius-md); }
.menu-drawer__cta .btn--ghost { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.menu-drawer__help { gap: var(--space-2); }
.menu-drawer__help-title { font-family: var(--font-body); font-weight: var(--fw-extrabold); font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.menu-drawer__legal-block {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-top: var(--space-5);
box-shadow: inset 0 1px 0 var(--color-border);
}
.menu-drawer__legal { font-size: 11px; line-height: 14.3px; font-weight: var(--fw-semibold); }
.menu-drawer__copy { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.sd-rule { position: relative; height: 0; }
.sd-rule::before {
content: "";
position: absolute;
inset: 0 0 auto;
border-top: 1px solid var(--color-border);
}
.sd-hero {
display: flex;
min-height: 540px;
background: var(--color-page);
box-shadow: inset 0 -1px 0 var(--color-border);
}
.sd-hero__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-9);
flex: 760 1 760px;
min-width: 0;
padding: 60px var(--space-12) 60px var(--container-pad);
}
.sd-hero__headings { display: flex; flex-direction: column; gap: var(--space-7); }
.sd-kicker {
font-family: var(--font-body);
font-weight: var(--fw-extrabold);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
}
.sd-kicker .section__dash { width: 16px; height: 6px; border-radius: var(--radius-xs); }
.sd-hero__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 56px;
line-height: 58px;
text-transform: uppercase;
color: var(--color-ink);
}
.sd-hero__lead {
margin: 0;
max-width: 632px;
font-size: var(--fs-lead);
line-height: var(--lh-lead);
color: var(--color-muted);
}
.sd-hero__banner {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
column-gap: var(--space-5);
row-gap: 2px;
padding: var(--space-5);
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.sd-hero__banner picture { grid-row: 1 / 3; display: block; }
.sd-hero__thumb {
display: block;
width: 56px;
height: 56px;
flex: none;
object-fit: cover;
border-radius: var(--radius);
}
.sd-hero__banner-title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-label-2xs);
line-height: var(--lh-label-2xs);
text-transform: uppercase;
color: var(--color-brand);
}
.sd-hero__banner-note {
margin: 0;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.sd-hero__media {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-9);
flex: 680 1 680px;
min-width: 0;
padding: var(--space-11);
background: var(--color-brand-surface);
}
.sd-accounts { display: flex; align-items: center; gap: var(--space-8); }
.sd-acct {
display: flex;
flex-direction: column;
gap: var(--space-5);
flex: 1;
min-width: 0;
padding: var(--space-8);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border), 0 8px 16px rgba(0, 0, 0, 0.051);
}
.sd-acct--showdown {
background: #f7f5fc;
box-shadow: inset 0 0 0 1.5px var(--color-brand), 0 8px 16px rgba(0, 0, 0, 0.051);
}
.sd-acct__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.sd-acct__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: none;
background: var(--color-ink);
border-radius: var(--radius);
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
color: var(--color-white);
}
.sd-acct__mark--brand { background: var(--color-brand); }
.sd-acct__name {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
text-transform: uppercase;
color: var(--color-ink);
}
.sd-acct--showdown .sd-acct__name { color: var(--color-brand); }
.sd-acct__note {
margin: 0;
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.sd-acct__balance {
align-self: flex-start;
margin: 0;
padding: var(--space-1) var(--space-3);
background: var(--color-page-alt);
border-radius: var(--radius-sm);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.sd-acct__balance--brand { background: var(--color-brand); color: var(--color-white); }
.sd-swap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
flex: none;
width: 60px;
}
.sd-swap__line { display: none; }
.sd-swap__icon { display: inline-flex; color: var(--color-brand); }
.sd-swap__glyph { width: 24px; height: 24px; }
.sd-swap__label {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 9px;
line-height: 12.12px;
text-transform: uppercase;
text-align: center;
color: var(--color-brand);
}
.sd-separator {
display: flex;
justify-content: center;
margin: 0;
padding: var(--space-5);
background: var(--color-ink);
border-radius: var(--radius);
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-ui-xs);
line-height: 14.82px;
text-transform: uppercase;
text-align: center;
color: var(--color-white);
}
.sd-status { padding: var(--space-12) var(--container-pad); background: var(--color-page); }
.sd-status__card {
display: flex;
flex-direction: column;
gap: var(--space-9);
max-width: var(--container);
margin-inline: auto;
padding: var(--space-10);
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: inset 0 0 0 1px var(--color-border), 0 4px 12px rgba(0, 0, 0, 0.02);
}
.sd-status__head { display: flex; align-items: center; gap: var(--space-5); }
.sd-status__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
text-transform: uppercase;
color: var(--color-ink);
}
.sd-status__state {
padding: var(--space-1) var(--space-4);
background: var(--color-page-alt);
border-radius: var(--radius-pill);
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-muted);
}
.sd-status__meta {
margin: 0 0 0 auto;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-muted);
}
.sd-status__row { display: flex; align-items: center; gap: var(--space-12); }
.sd-status__text {
margin: 0;
flex: 1;
font-size: var(--fs-lead);
line-height: 22px;
color: var(--color-muted);
}
.sd-status__cta { flex: none; width: 340px; }
.sd-status__btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
text-align: center;
}
.sd-status__warning { display: flex; align-items: center; gap: var(--space-5); margin: 0; }
.sd-status__badge {
flex: none;
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
font-weight: var(--fw-extrabold);
}
.sd-status__warning-text {
font-size: var(--fs-ui-sm);
line-height: var(--lh-ui-sm);
color: var(--color-muted);
}
.sd-sep {
display: flex;
flex-direction: column;
gap: var(--space-11);
padding: var(--space-13) var(--container-pad);
background: var(--color-brand-surface);
}
.sd-sep > * { max-width: var(--container); width: 100%; margin-inline: auto; }
.sd-sep__head { display: flex; flex-direction: column; gap: var(--space-5); }
.sd-sep__eyebrow {
font-size: var(--fs-ui-xs);
line-height: var(--lh-ui-xs);
font-weight: var(--fw-extrabold);
text-transform: uppercase;
color: var(--color-brand);
}
.sd-sep__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 36px;
line-height: 48.49px;
text-transform: uppercase;
color: var(--color-ink);
}
.sd-sep__lead {
margin: 0;
font-size: var(--fs-lead);
line-height: 22px;
color: var(--color-muted);
}
.sd-sep__row { display: flex; align-items: center; gap: var(--space-10); }
.sd-sep__col { flex: 1; min-width: 0; }
.sd-panel {
display: flex;
flex-direction: column;
gap: var(--space-9);
padding: var(--space-10);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.sd-panel--brand {
background: #f7f5fc;
box-shadow: inset 0 0 0 1.5px var(--color-brand);
}
.sd-panel--brand .sd-rule::before { border-top-color: rgba(95, 46, 234, 0.3); }
.sd-panel__head {
display: flex;
align-items: center;
gap: var(--space-5);
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h6);
line-height: var(--lh-h6);
color: var(--color-ink);
}
.sd-panel--brand .sd-panel__head { color: var(--color-brand); }
.sd-panel__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: none;
background: var(--color-ink);
border-radius: var(--radius);
font-size: var(--fs-label-sm);
line-height: var(--lh-label-sm);
color: var(--color-white);
}
.sd-panel__mark--brand { background: var(--color-brand); }
.sd-panel__list {
display: flex;
flex-direction: column;
gap: var(--space-7);
margin: 0;
padding: 0;
list-style: none;
}
.sd-panel__item {
display: flex;
align-items: center;
gap: var(--space-5);
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-medium);
color: var(--color-ink);
}
.sd-panel__tick {
display: inline-flex;
color: var(--color-white);
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex: none;
background: var(--color-ink);
border-radius: var(--radius-round);
color: var(--color-white);
}
.sd-panel__tick--brand { background: var(--color-brand); }
.sd-sep__tag {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: none;
width: 180px;
margin: 0;
padding: var(--space-5) var(--space-7);
background: #f7f5fc;
border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 1px var(--color-brand);
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-ui-xs);
line-height: 14.82px;
text-transform: uppercase;
text-align: center;
color: var(--color-brand);
}
.sd-sep__tag-line { display: none; }
.sd-sep__note {
margin: 0;
padding: var(--space-8);
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: var(--fs-ui);
line-height: 20px;
color: var(--color-ink);
}
.sd-sep__note strong { font-weight: var(--fw-bold); color: var(--color-danger); }
.sd-steps {
display: flex;
flex-direction: column;
gap: var(--space-11);
padding: var(--space-13) var(--container-pad);
background: var(--color-page);
box-shadow: inset 0 -1px 0 var(--color-border);
}
.sd-steps > * { max-width: var(--container); width: 100%; margin-inline: auto; }
.sd-steps__title {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
text-transform: uppercase;
color: var(--color-ink);
}
.sd-steps__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-9);
margin: 0;
padding: 0;
list-style: none;
}
.sd-step {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-9);
background: var(--color-white);
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.sd-step__no {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 36px;
line-height: 48.49px;
color: var(--color-brand);
}
.sd-step__body { display: flex; flex-direction: column; gap: var(--space-3); }
.sd-step__title {
font-size: var(--fs-btn);
line-height: var(--lh-btn);
font-weight: var(--fw-bold);
text-transform: uppercase;
color: var(--color-ink);
}
.sd-step__text {
font-size: var(--fs-ui);
line-height: 18px;
color: var(--color-muted);
}
.sd-note {
padding: var(--space-9) var(--container-pad);
background: var(--color-brand-surface);
box-shadow: inset 0 -1px 0 var(--color-border);
}
.sd-note__text {
max-width: var(--container);
margin-inline: auto;
margin-block: 0;
font-size: var(--fs-ui);
line-height: 18px;
text-align: center;
color: var(--color-ink);
}
@media (max-width: 1279px) {
.sd-hero { flex-direction: column; min-height: 0; }
.sd-hero__text,
.sd-hero__media { width: auto; flex: none; }
.sd-status__row { flex-wrap: wrap; gap: var(--space-9); }
.sd-status__cta { width: 100%; }
.sd-sep__row { flex-wrap: wrap; }
.sd-sep__col { flex: 1 1 320px; }
.sd-sep__tag { width: 100%; }
.sd-steps__row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.sd-hero { flex-direction: column; min-height: 0; box-shadow: none; }
.sd-hero__text { display: contents; }
.sd-hero__headings {
gap: var(--space-7);
padding: var(--space-10) var(--container-pad-mobile);
}
.sd-hero__title { font-size: var(--fs-hero-sm); line-height: 42px; }
.sd-hero__lead { font-size: var(--fs-btn); line-height: 22px; }
.sd-kicker { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.sd-kicker .section__dash { width: 12px; height: 4px; }
.sd-hero__banner-wrap { padding: 0 var(--container-pad-mobile) var(--space-10); }
.sd-hero__banner {
grid-template-columns: 48px minmax(0, 1fr);
row-gap: var(--space-5);
padding: var(--space-7);
border-radius: var(--radius-lg);
}
.sd-hero__banner picture { grid-row: auto; }
.sd-hero__thumb { width: 48px; height: 48px; }
.sd-hero__banner-note { grid-column: 1 / -1; }
.sd-hero__banner-note { font-size: var(--fs-ui); line-height: 18px; }
.sd-hero__media {
width: auto;
gap: var(--space-7);
padding: var(--space-9) var(--container-pad-mobile) var(--space-10);
}
.sd-accounts { display: contents; }
.sd-acct { padding: var(--space-7); }
.sd-acct__note { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.sd-acct__balance { background: var(--color-page); }
.sd-swap { flex-direction: row; align-items: center; justify-content: center; width: auto; gap: var(--space-3); }
.sd-swap__line { display: block; flex: none; width: 100px; height: 1px; background: var(--color-brand); opacity: 0.2; }
.sd-swap__icon { display: none; }
.sd-swap__label { font-size: 10px; line-height: 13.47px; }
.sd-separator { padding: var(--space-5); font-size: 9px; line-height: 12.12px; }
.sd-status { padding: var(--space-10) var(--container-pad-mobile); }
.sd-status__card { gap: var(--space-8); padding: var(--space-9); }
.sd-status__head { flex-wrap: wrap; gap: var(--space-3); }
.sd-status__title { flex-basis: 100%; font-size: var(--fs-h6); line-height: var(--lh-h6); }
.sd-status__state {
background: var(--color-border);
font-size: var(--fs-ui-2xs);
line-height: var(--lh-ui-2xs);
}
.sd-status__meta { margin-left: 0; font-size: var(--fs-ui-sm); line-height: var(--lh-ui-sm); }
.sd-status__row,
.sd-status__cta { display: contents; }
.sd-status__text { font-size: var(--fs-ui); line-height: 20px; }
.sd-status__btn { height: 45px; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.sd-status__warning {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-danger-surface);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px var(--color-danger);
}
.sd-status__badge { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.sd-status__warning-text { line-height: 16px; }
.sd-sep { gap: 0; padding: 0; }
.sd-sep__head {
gap: var(--space-5);
padding: var(--space-10) var(--container-pad-mobile) var(--space-9);
}
.sd-sep__eyebrow { font-size: var(--fs-ui-2xs); line-height: var(--lh-ui-2xs); }
.sd-sep__title { font-size: 28px; line-height: 37.72px; }
.sd-sep__lead { font-size: var(--fs-ui); line-height: 20px; }
.sd-sep__row { display: contents; }
.sd-sep__col { padding: 0 var(--container-pad-mobile) var(--space-7); }
.sd-sep__col:last-of-type { padding: var(--space-7) var(--container-pad-mobile) var(--space-9); }
.sd-panel { gap: var(--space-7); padding: var(--space-8); }
.sd-panel__head { gap: var(--space-4); font-size: var(--fs-label); line-height: var(--lh-label); }
.sd-panel__mark { width: 28px; height: 28px; font-size: var(--fs-label-2xs); line-height: var(--lh-label-2xs); }
.sd-panel__list { gap: var(--space-5); }
.sd-panel__item {
align-items: flex-start;
gap: var(--space-2);
font-size: var(--fs-ui-sm);
line-height: 16px;
font-weight: var(--fw-regular);
}
.sd-panel__tick {
width: auto;
height: auto;
background: none;
border-radius: 0;
color: var(--color-ink);
}
.sd-panel__tick .icon { display: none; }
.sd-panel__tick::before { content: "\2713"; }
.sd-panel__tick--brand { background: none; color: var(--color-brand); }
.sd-sep__tag {
flex-direction: row;
width: auto;
padding: 0 var(--container-pad-mobile);
background: none;
box-shadow: none;
border-radius: 0;
gap: var(--space-3);
font-size: 10px;
line-height: 13.47px;
}
.sd-sep__tag-line { display: block; flex: none; width: 70px; height: 1px; background: var(--color-brand); opacity: 0.2; }
.sd-sep__note-wrap { padding: 0 var(--container-pad-mobile) var(--space-10); }
.sd-sep__note { padding: var(--space-7); font-size: var(--fs-ui-sm); line-height: 18px; }
.sd-steps { gap: var(--space-8); padding: var(--space-10) var(--container-pad-mobile); }
.sd-steps__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.sd-steps__row { grid-template-columns: 1fr; gap: var(--space-7); }
.sd-step { gap: var(--space-5); padding: var(--space-8); }
.sd-step__no { font-size: 28px; line-height: 37.72px; }
.sd-step__body { display: contents; }
.sd-step__title { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.sd-step__text { font-size: var(--fs-ui-sm); line-height: 16px; }
.sd-note { padding: var(--space-8) var(--container-pad-mobile); }
.sd-note__text { font-size: var(--fs-ui-sm); line-height: 16px; }
}
@media (max-width: 389px) {
.sd-swap__line { width: 60px; }
.sd-sep__tag-line { width: 40px; }
}
a,
.btn,
.chip,
.link-arrow,
.field__control,
.card {
transition:
color var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.card--lift { position: relative; }
.card--lift::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: var(--shadow-hover);
opacity: 0;
transition: opacity var(--dur-base) var(--ease);
pointer-events: none;
}
.card--lift:hover::after { opacity: 1; }
.collapse {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-base) var(--ease);
}
.collapse > * { overflow: hidden; }
.collapse[data-open="true"] { grid-template-rows: 1fr; }
.overlay {
opacity: 0;
visibility: hidden;
transition:
opacity var(--dur-exit) var(--ease-in),
visibility 0s linear var(--dur-exit);
}
.overlay[data-open="true"] {
opacity: 1;
visibility: visible;
transition:
opacity var(--dur-slow) var(--ease),
visibility 0s;
}
.overlay__panel {
transform: translateY(12px) scale(0.98);
transition: transform var(--dur-exit) var(--ease-in);
}
.overlay[data-open="true"] .overlay__panel {
transform: none;
transition: transform var(--dur-slow) var(--ease);
}
.cookie-bar .overlay__panel { transform: translateY(100%); }
.cookie-bar[data-open="true"] .overlay__panel { transform: none; }
.menu-drawer .overlay__panel { transform: translateX(100%); }
.menu-drawer[data-open="true"] .overlay__panel { transform: none; }
@keyframes slip-pulse {
0%   { transform: scale(1); }
40%  { transform: scale(1.04); }
100% { transform: scale(1); }
}
.slip-count[data-bump="true"] {
animation: slip-pulse var(--dur-base) var(--ease);
}
@keyframes slip-item-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: none; }
}
.slip__item { animation: slip-item-in var(--dur-base) var(--ease); }
.js [data-reveal] {
opacity: 0;
transform: translateY(12px);
transition:
opacity var(--dur-slow) var(--ease),
transform var(--dur-slow) var(--ease);
}
.js [data-reveal][data-revealed="true"] {
opacity: 1;
transform: none;
}
.js [data-reveal][data-reveal-i="1"] { transition-delay: 60ms; }
.js [data-reveal][data-reveal-i="2"] { transition-delay: 120ms; }
.js [data-reveal][data-reveal-i="3"] { transition-delay: 180ms; }
.js .hero [data-reveal],
.js [data-reveal][data-reveal-hero] {
opacity: 1;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.js [data-reveal] {
opacity: 1;
transform: none;
}
.overlay__panel,
.cookie-bar .overlay__panel,
.menu-drawer .overlay__panel { transform: none; }
}