/**
 * Design tokens — source: FIGMA-REDESIGN-UI-KIT.md
 * Loaded only on Home v2, safe to use :root.
 */
:root {
  --color-green: #64db69;
  --color-green-mid: #5acf5f;
  --color-green-dark: #5cce61;
  --color-green-dot: #44b949;
  --color-black: #202020;
  --color-canvas: #f5f5f5;
  --color-gray-card: #ebebeb;
  --color-white: #ffffff;

  --text-40: rgba(32, 32, 32, 0.4);
  --text-60: rgba(32, 32, 32, 0.6);
  --text-white-40: rgba(255, 255, 255, 0.4);
  --text-white-60: rgba(255, 255, 255, 0.6);

  --radius-sm: 10px;
  --radius-pill: 130px;
  --radius-chip: 999px;

  --container-max: 1800px;
  --container-pad: clamp(20px, 3.125vw, 60px);
  /* Figma 1920: content column 1800px = 93.75vw, centered (60px gutters) */
  --layout-width: min(93.75vw, 1800px);
  --content-width: var(--layout-width);

  --text-hero: clamp(40px, 5.21vw, 100px);
  --text-section: clamp(36px, 4.69vw, 90px);
  --text-h4: clamp(22px, 1.98vw, 38px);
  --text-body: clamp(14px, 0.94vw, 18px);
  --text-caption: clamp(12px, 1.04vw, 20px);
  --text-btn: clamp(16px, 1.04vw, 20px);

  --btn-height: 80px;
  --btn-height-mobile: 60px;
  --bp-desktop: 1024px;
  --bp-mobile-max: 1023px;
}

@media (min-width: 1024px) {
  :root {
    /* Shared desktop grid: 663 + 20 + 662 + 20 + 435 = 1800px at 1920px viewport. */
    --v2-grid-col-1: calc(100vw * 663 / 1920);
    --v2-grid-col-2: calc(100vw * 662 / 1920);
    --v2-grid-col-3: calc(100vw * 435 / 1920);
    --v2-grid-gap: calc(100vw * 20 / 1920);
    --v2-grid-main-start: calc(var(--v2-grid-col-1) + var(--v2-grid-gap));
    --v2-grid-side-start: calc(var(--v2-grid-main-start) + var(--v2-grid-col-2) + var(--v2-grid-gap));
    --v2-grid-main-width: calc(var(--v2-grid-col-2) + var(--v2-grid-gap) + var(--v2-grid-col-3));
  }
}

html {
  background-color: #202020;
  overflow-x: clip;
}

body.is-home-v2 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-synthesis: none;
  letter-spacing: -0.02em;
  color: var(--color-black);
  background-color: #202020;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body.is-home-v2 .home-v2 {
  background-color: #f5f5f5;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1023px) {
  :root {
    --container-pad: 20px;
    --v2-section-gap: calc(100vw * 110 / 390);
    /* Mobile: Figma px → calc(100vw * N / 390) */
    --text-hero: 40px;
    --text-section: 36px;
    --text-h4: 22px;
    --text-body: 14px;
    --text-caption: 12px;
    --text-btn: 16px;
    --btn-height: var(--btn-height-mobile);
  }

  /*
   * clip alone is not enough on iOS Safari — swiper tracks and the off-canvas
   * menu still expand scrollWidth. hidden on html only; body stays visible
   * so position: sticky (advantages stack) keeps working.
   */
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /*
   * overflow-x: clip forces overflow-y to compute as auto, which turns .home-v2
   * into a scroll container and breaks native position: sticky (card stack jitter).
   * Keep horizontal clipping on html only; page content must stay overflow: visible.
   */
  body.is-home-v2 {
    overflow-x: visible;
    overflow-y: visible;
  }

  body.is-home-v2 .home-v2 {
    overflow: visible;
  }
}