/* Page-level structure: container, utility strip, header, mobile menu, shared
 * bands (RG, payments) and footer. Numbers come from fig-spec of the homepage
 * frames (desktop 2:2, mobile 40:5); other frames draw the same blocks.
 * Desktop first here because the mockup is desktop-first; the mobile block at
 * the bottom rewrites the 390 frame. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
/* Sections carry their own padding (60 / 80 per frame); .container only caps the width. */
.section { padding-inline: var(--container-pad); }
.section--wide { padding-inline: var(--container-pad-wide); }

.only-m.only-m { display: none; }

/* ── utility strip ────────────────────────────────────────────────────── */
.utility {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 var(--container-pad);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);
  font-family: var(--font-display); font-weight: 600; font-size: 10px; line-height: 12px;
  letter-spacing: 1.5px;
}
.utility__left { display: flex; align-items: center; gap: 8px; color: var(--color-muted-2); }
.utility__line { margin: 0; white-space: nowrap; }
.utility__right { display: flex; align-items: center; gap: 20px; letter-spacing: 1px; }
.utility__link { color: var(--color-muted-3); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.utility__link:hover { color: var(--color-text); }
.utility__phone { color: var(--color-lime); font-weight: 700; text-decoration: none; }
.utility__phone:hover { color: var(--color-lime-hover); }
.star { color: var(--color-lime); font-weight: 600; }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--container-pad);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -.5px;
}
.brand__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--color-lime); }
.brand--footer { font-size: 36px; line-height: 43.2px; letter-spacing: -.5px; }
.brand--footer .brand__dot { width: 8px; height: 8px; border-radius: 4px; }

.nav__list { display: flex; gap: 4px; }
.nav__link {
  display: flex; align-items: center; height: 72px; padding: 0 18px;
  color: var(--color-muted-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px;
  letter-spacing: 1.5px;
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--color-text); }
.nav__link.is-current { color: #ffffff; }   /* current page as drawn (racing / how-it-works / RG / contact / help frames): white, no underline */

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.nav__login {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: 1.5px;
  transition: color var(--dur-fast) var(--ease);
}
.nav__login:hover { color: var(--color-lime); }
.site-header__user { color: var(--color-lime); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; }
.btn--nav { padding: 10px 24px; font-size: 13px; line-height: 16px; letter-spacing: 2px; }
.btn__short { display: none; }

.burger { display: none; }

/* ── mobile menu (frame 40:285) ───────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--color-bg);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__panel {
  display: flex; flex-direction: column; height: 100%; overflow: auto;
  transform: translateX(16px); transition: transform var(--dur-slow) var(--ease);
}
.menu.is-open .menu__panel { transform: none; }
.menu__top {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 16px; flex: none;
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.brand--menu { font-size: 22px; line-height: 26.4px; gap: 4px; }
.brand--menu .brand__dot { width: 4px; height: 4px; }
.menu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--color-lime); cursor: pointer;
  position: relative;
}
.menu__close::after { content: ""; position: absolute; inset: -10px; }
.menu__close .icon { width: 20px; height: 20px; }
.menu__links { display: flex; flex-direction: column; padding: 16px; flex: none; }
.menu__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 12px 0; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--color-border);
  transition: color var(--dur-fast) var(--ease);
}
.menu__label { color: var(--color-text); font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: 1px; }
.menu__row[aria-current] .menu__label, .menu__row:hover .menu__label { color: var(--color-lime); }
.menu__arrow { color: var(--color-lime); font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 19.2px; }
.menu__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 20px; padding: 16px; background: var(--color-bg-deep); }
.menu__bottom .btn { height: 41px; min-height: 41px; padding: 12px 0; font-size: 14px; line-height: 17px; letter-spacing: 2px; font-weight: 800; }
.menu__bottom .btn + .btn { margin-top: -10px; }   /* menu-actions gap 10 vs section gap 20 */
.menu__rule { margin: 0; border: 0; height: 1px; background: var(--color-border); }

/* ── RG band (10:310 / 40:205) ────────────────────────────────────────── */
.rg {
  display: flex; flex-direction: column; gap: 60px;
  padding: 100px var(--container-pad);
  background: var(--color-cream); color: var(--color-text-dark);
}
.rg__accent { height: 6px; border-radius: 1px; background: var(--color-lime); }
.rg__grid { display: grid; grid-template-columns: 480px 1fr; gap: 80px; align-items: start; }
.rg__left { display: flex; flex-direction: column; gap: 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 13.2px;
  letter-spacing: 2px; color: var(--color-lime);
}
.eyebrow .star { font-weight: 700; }
.eyebrow--dark .star { color: var(--color-text-dark); }
.eyebrow--dark .eyebrow__text { color: var(--color-muted); }
.rg__title {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-display); font-weight: 800; font-size: 68px; line-height: 60px; letter-spacing: -1px;
}
.hl { display: inline-block; padding: 2px 8px; background: var(--color-lime); color: var(--color-text-dark); }
.rg__lead { font-size: 16px; line-height: 26px; color: var(--color-muted-cool); }
.rg__lead a { color: inherit; text-decoration-color: var(--color-lime); text-underline-offset: 2px; }
.rg__lead a:hover { color: var(--color-text-dark); }
.rg__rows { display: flex; flex-direction: column; }
.rg__row {
  display: flex; align-items: center; height: 106px; padding: 28px 0;
  box-shadow: inset 0 1px 0 var(--color-border-light);
}
.rg__row:last-child { box-shadow: inset 0 1px 0 var(--color-border-light), inset 0 -1px 0 var(--color-border-light); }
.rg__num { flex: none; width: 72px; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 48px; }
.rg__content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rg__row-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; }
.rg__row-link { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.rg__row-link::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the tap target */
.rg__row { position: relative; }
.rg__row:hover .rg__row-link { color: var(--color-lime-deep); }
.rg__row-text { font-size: 14px; line-height: 22px; color: var(--color-muted-cool); }
.rg__arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 24px; transition: transform var(--dur-base) var(--ease); }
.rg__arrow i { display: block; width: 40px; height: 2px; background: currentColor; }
.rg__row:hover .rg__arrow { transform: translateX(4px); }

/* ── payments band (10:356 / 40:241) ──────────────────────────────────── */
.payments {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 var(--container-pad);
  background: var(--color-surface);
  font-family: var(--font-display); font-size: 12px; line-height: 14.4px;
}
.payments__left { display: flex; align-items: center; gap: 20px; }
.payments__title { color: var(--color-lime); font-weight: 800; letter-spacing: 2px; }
.payments__sep { width: 1px; height: 16px; background: var(--color-border-3); }
.payments__note { color: var(--color-muted-3); font-weight: 600; letter-spacing: 1px; }
.payments__marks img { width: 300px; height: 40px; }

/* ── footer (15:1622 / 40:245) ────────────────────────────────────────── */
.site-footer {
  display: flex; flex-direction: column; gap: 64px;
  padding: 80px var(--container-pad) 0;   /* frame FIXED 530: legal block ends flush with the bottom */
  background: var(--color-bg-deep); color: var(--color-text);
}
.site-footer__rule { height: 3px; background: var(--color-lime); }
.site-footer__cols { display: flex; justify-content: space-between; align-items: flex-start; min-height: 149px; }   /* brand-col height in the mockup (blurb + badge dropped per TZ) */
.site-footer__brand { width: 420px; }
.site-footer__nav { display: flex; gap: 48px; }
.site-footer__col { display: flex; flex-direction: column; gap: 16px; width: 140px; }
.site-footer__col:nth-child(n+3) { width: 160px; }
.site-footer__title { margin: 0; color: var(--color-lime); font-family: var(--font-display); font-weight: 800; font-size: 12px; line-height: 14.4px; letter-spacing: 2px; }
.site-footer__list { display: flex; flex-direction: column; gap: 16px; }
.site-footer__list li { display: flex; }   /* a block li takes the body line-height (22) around a 17px link */
.site-footer__link { display: inline-block; color: var(--color-muted); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 17px; transition: color var(--dur-fast) var(--ease); }
.site-footer__link:hover { color: var(--color-lime); }
.site-footer__legal {
  display: flex; flex-direction: column; gap: 12px; padding: 32px 0 48px;
  box-shadow: inset 0 1px 0 var(--color-border);
  font-size: 11px; line-height: 18px; color: var(--color-muted-5);
}
.site-footer__line { margin: 0; }
.site-footer__line a { color: var(--color-muted); text-decoration-color: var(--color-lime-deep); text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); }
.site-footer__line a:hover { color: var(--color-lime); }
.site-footer__bottom { display: flex; justify-content: flex-end; align-items: center; height: 30px; }
.site-footer__copy { margin: 0; font-size: 11px; line-height: 13.2px; color: var(--color-muted-6); }

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--z-header);
  width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-text-dark); cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.to-top::before { content: "↑"; }
.to-top:hover { background: var(--color-lime-hover); transform: translateY(-2px); }

/* ── mobile (390 frames) ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .only-d.only-d { display: none; }
  .only-m.only-m { display: revert; }
  .section, .section--wide { padding-inline: var(--container-pad-m); }

  .utility {
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    height: 46px; padding: 8px 16px; background: var(--color-bg-deep);
  }
  .utility__left { gap: 6px; letter-spacing: 1px; }
  .utility__left .star, .eyebrow .star { font-size: 8px; line-height: 10px; font-weight: 800; letter-spacing: 0; }
  .utility__line { white-space: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utility__right { justify-content: space-between; gap: 0; }

  .site-header { height: 56px; padding: 0 16px; }
  .brand { font-size: 22px; line-height: 26.4px; gap: 4px; }
  .brand__dot { width: 4px; height: 4px; }
  .nav { display: none; }
  .site-header__actions { gap: 12px; }
  .nav__login { font-size: 12px; line-height: 14.4px; letter-spacing: 1px; }
  .site-header .btn--nav { padding: 6px 12px; font-size: 11px; line-height: 13.2px; letter-spacing: 1px; color: #000; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
  .burger {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .burger::after { content: ""; position: absolute; inset: -10px; }   /* 44×44 tap zone */
  .burger__box { display: flex; flex-direction: column; gap: 4px; width: 18px; }
  .burger__box i { display: block; height: 2px; background: var(--color-lime); transition: transform var(--dur-base) var(--ease); }

  .rg { gap: 24px; padding: 16px; }
  .rg__accent { height: 4px; }
  .rg__grid { grid-template-columns: 1fr; gap: 24px; }
  .rg__left { gap: 0; }
  .rg__left .eyebrow { gap: 6px; font-size: 10px; line-height: 12px; letter-spacing: 1.5px; margin-bottom: 24px; }
  .rg__left .eyebrow .star { font-size: 8px; line-height: 10px; font-weight: 800; color: #000; }
  .rg__row-link, .rg__arrow, .rg__title .hl { color: #000; }
  .rg__left .eyebrow__text { color: var(--color-muted-3-light); }
  .rg__title { font-size: 40px; line-height: 36px; letter-spacing: normal; gap: 4px; margin-bottom: 24px; color: #000; }
  .rg__l1::after { content: " IN"; }
  .rg__l2 { display: none; }
  .rg__title .hl { padding: 2px 8px 2px 6px; }
  .rg__lead { font-size: 13px; line-height: 18.2px; color: var(--color-muted-3-light); }
  .rg__row { height: 62px; padding: 14px 0; box-shadow: none; }
  .rg__row:last-child { box-shadow: none; }
  .rg__num { width: 36px; font-size: 28px; line-height: 34px; color: #000; }
  .rg__content { gap: 1px; }
  .rg__row-title { font-size: 14px; line-height: 17px; }
  .rg__row-text { font-size: 11px; line-height: 13.2px; color: var(--color-muted-3-light); }
  .rg__arrow { font-size: 18px; line-height: 22px; }
  .rg__arrow i { display: none; }

  .payments { flex-direction: column; justify-content: center; gap: 6px; height: 101px; padding: 12px; }
  .payments__left { flex-direction: column; gap: 6px; }
  .payments__sep { display: none; }
  .payments__title { font-size: 11px; line-height: 13.2px; letter-spacing: 1px; }
  .payments__note { font-size: 10px; line-height: 12px; letter-spacing: normal; }

  .site-footer { gap: 28px; padding: 32px 16px 24px; }
  .site-footer__rule { height: 2px; }
  .site-footer__cols { flex-direction: column; gap: 28px; }
  .site-footer__brand { width: auto; }
  .brand--footer { font-size: 28px; line-height: 34px; letter-spacing: -.5px; gap: 6px; }
  .brand--footer .brand__dot { width: 6px; height: 6px; }
  .site-footer__nav { flex-direction: column; gap: 16px; }
  .site-footer__col, .site-footer__col:nth-child(n+3) { width: auto; gap: 6px; }
  .site-footer__title { letter-spacing: 1px; }
  .site-footer__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .site-footer__link { font-size: 12px; line-height: 14px; color: var(--color-muted-2); }
  .site-footer__legal { gap: 8px; padding: 16px 0; font-size: 10px; line-height: 14px; }
  .site-footer__bottom { justify-content: flex-start; height: auto; padding: 12px 0; }
  .site-footer__copy { font-size: 10px; line-height: 12px; color: var(--color-muted-3); }
  .site-footer__legal { color: var(--color-muted-3); }
}