/* Figma 14520:8993: page-scoped values for the franchise case study.
   Existing site colors, button dimensions and card radius remain the source
   of truth. Breakpoint literals are CSS query boundaries, not visual values. */
.franchise-page {
  --franchise-zero: 0;
  --franchise-full: 100%;
  --franchise-layer-content: 1;
  --franchise-layer-menu: 2;
  --franchise-content-width: 1280px;
  --franchise-gutter: 32px;
  --franchise-font-heading: Paperlogy, Pretendard, sans-serif;
  --franchise-font-body: Pretendard, system-ui, sans-serif;
  --franchise-font-system: Roboto, Arial, sans-serif;
  --franchise-weight-regular: 400;
  --franchise-weight-medium: 500;
  --franchise-weight-semibold: 600;
  --franchise-weight-bold: 700;
  --franchise-line-heading: 1.2;
  --franchise-line-copy: 1.4;
  --franchise-line-body: 1.5;
  --franchise-hero-padding: 160px;
  --franchise-hero-photo-height: 173.29%;
  --franchise-hero-photo-top: -25.98%;
  --franchise-photo-mobile-position: 50%;
  --franchise-hero-overlay: rgb(29 33 42 / 60%);
  --franchise-hero-gap: 36px;
  --franchise-hero-title-size: 64px;
  --franchise-hero-description-size: 28px;
  --franchise-hero-description-color: var(--stroke);
  --franchise-chip-height: var(--button-height);
  --franchise-chip-radius: 8px;
  --franchise-chip-padding: 14px;
  --franchise-chip-gap: 8px;
  --franchise-chip-icon-size: 20px;
  --franchise-chip-border: 1px;
  --franchise-chip-font-size: 16px;
  --franchise-section-padding: 120px;
  --franchise-heading-gap: var(--card-content-gap);
  --franchise-heading-size: 48px;
  --franchise-description-size: 20px;
  --franchise-description-width: 840px;
  --franchise-section-content-gap: 48px;
  --franchise-layout-gap: 40px;
  --franchise-card-width: 305px;
  --franchise-card-gap: 20px;
  --franchise-card-padding: 20px;
  --franchise-card-radius: var(--card-media-radius);
  --franchise-card-title-size: 20px;
  --franchise-card-body-size: 16px;
  /* Darken muted text slightly for AA body-copy contrast on the card surface. */
  --franchise-card-body-color: color-mix(in srgb, var(--muted) 96%, var(--primary));
  --franchise-card-copy-gap: 8px;
  --franchise-media-ratio: 16 / 9;
  --franchise-media-border: 8px;
  --franchise-media-border-color: #2c2c2c;
  --franchise-media-radius: var(--card-media-radius);
  --franchise-media-label-size: 18px;
  --franchise-media-label-offset-x: 13.5px;
  --franchise-media-label-offset-y: .5px;
  --franchise-phone-width: 270px;
  --franchise-phone-scale: 1;
  --franchise-phone-status-height: 18px;
  --franchise-phone-nav-height: 36px;
  --franchise-phone-screen-background: #fff;
  --franchise-phone-time-size: 10.5px;
  --franchise-phone-time-color: #170e2b;
  --franchise-phone-time-tracking: .0105px;
  --franchise-phone-status-inset: 9px;
  --franchise-phone-time-top: 3px;
  --franchise-phone-icon-height: 9px;
  --franchise-phone-icon-top: 4.5px;
  --franchise-phone-icon-gap: 4.5px;
  --franchise-phone-cellular-width: 13.5px;
  --franchise-phone-wifi-width: 12px;
  --franchise-phone-battery-width: 18px;
  --franchise-video-center: 50%;
  --franchise-video-center-offset: -50%;
  --franchise-video-control-height: 44px;
  --franchise-video-selection-width: 2px;
  --franchise-video-hover: color-mix(in srgb, var(--secondary) 8%, var(--surface));
}

@media (width <= 960px) {
  .franchise-page {
    --franchise-section-padding: 80px;
    --franchise-hero-padding: 96px;
    --franchise-hero-title-size: 48px;
    --franchise-hero-description-size: 24px;
    --franchise-card-width: 280px;
  }
}

@media (width <= 720px) {
  .franchise-page {
    --franchise-gutter: 24px;
    --franchise-section-padding: 48px;
    --franchise-hero-padding: 64px;
    --franchise-hero-title-size: 36px;
    --franchise-hero-description-size: 20px;
    --franchise-heading-size: 32px;
    --franchise-card-width: var(--franchise-full);
    --franchise-media-label-size: 16px;
  }
}

@media (width < 360px) {
  .franchise-page {
    --franchise-hero-title-size: 32px;
    --franchise-heading-size: 28px;
    --franchise-phone-scale: .9;
  }
}