/* Figma 14520:8993. Shared header/footer stay under the site styles. */
.franchise-page main {
  padding-bottom: var(--franchise-zero);
}
.franchise-page main > section {
  background: var(--page);
}
.franchise-page main .container {
  width: calc(var(--franchise-full) - var(--franchise-gutter) - var(--franchise-gutter));
  max-width: var(--franchise-content-width);
}
.franchise-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--franchise-hero-padding);
}
.franchise-hero-background {
  position: absolute;
  inset: var(--franchise-zero);
  overflow: hidden;
  pointer-events: none;
}
.franchise-hero-background img {
  position: absolute;
  top: var(--franchise-hero-photo-top);
  left: var(--franchise-zero);
  width: var(--franchise-full);
  height: var(--franchise-hero-photo-height);
}
.franchise-hero-background::after {
  content: '';
  position: absolute;
  inset: var(--franchise-zero);
  background: var(--franchise-hero-overlay);
}
.franchise-hero-content {
  position: relative;
  z-index: var(--franchise-layer-content);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--franchise-hero-gap);
}
.franchise-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--franchise-chip-gap);
}
.franchise-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--franchise-chip-height);
  padding-inline: var(--franchise-chip-padding);
  gap: var(--button-gap);
  border: var(--franchise-chip-border) solid var(--stroke);
  border-radius: var(--franchise-chip-radius);
  background: var(--component-white);
  color: var(--primary);
  font-family: var(--franchise-font-body);
  font-size: var(--franchise-chip-font-size);
  font-weight: var(--franchise-weight-medium);
  line-height: var(--franchise-line-copy);
  cursor: pointer;
  list-style: none;
}
.franchise-chip::-webkit-details-marker { display: none; }
.franchise-chip img { display: block; flex: none; }
/* Keep Figma SVGs at their authored intrinsic sizes despite shared UI icon sizing. */
.franchise-page main img[src^="/assets/icons/franchise/"] {
  width: auto;
  height: auto;
  flex: none;
}
.franchise-case-picker { position: relative; }
.franchise-case-menu {
  position: absolute;
  z-index: var(--franchise-layer-menu);
  right: var(--franchise-zero);
  top: calc(var(--franchise-full) + var(--franchise-chip-gap));
  width: max-content;
  max-width: calc(100vw - var(--franchise-gutter) - var(--franchise-gutter));
  padding: var(--franchise-chip-gap);
  border: var(--franchise-chip-border) solid var(--stroke);
  border-radius: var(--franchise-chip-radius);
  background: var(--component-white);
  color: var(--primary);
  font-size: var(--franchise-chip-font-size);
}
.franchise-case-menu a {
  display: block;
  padding: var(--franchise-chip-padding);
  border-radius: var(--franchise-chip-radius);
}
.franchise-case-menu a:hover,
.franchise-case-menu a[aria-current='page'] { background: var(--surface); }
.franchise-case-menu .site-case-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--franchise-chip-padding);
  color: var(--muted);
}
.franchise-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--franchise-heading-gap);
}
.franchise-page .franchise-hero h1 {
  font-family: var(--franchise-font-heading);
  font-size: var(--franchise-hero-title-size);
  font-weight: var(--franchise-weight-bold);
  line-height: var(--franchise-line-heading);
  letter-spacing: var(--franchise-zero);
  color: var(--secondary);
}
.franchise-hero-copy > p {
  font-size: var(--franchise-hero-description-size);
  font-weight: var(--franchise-weight-medium);
  line-height: var(--franchise-line-heading);
  color: var(--franchise-hero-description-color);
}
.franchise-scene {
  padding-block: var(--franchise-section-padding);
}
.franchise-scene > .container {
  display: flex;
  flex-direction: column;
  gap: var(--franchise-section-content-gap);
}
.franchise-scene-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--franchise-heading-gap);
  text-align: center;
}
.franchise-scene-heading h2 {
  font-family: var(--franchise-font-heading);
  font-size: var(--franchise-heading-size);
  font-weight: var(--franchise-weight-bold);
  line-height: var(--franchise-line-heading);
  letter-spacing: var(--franchise-zero);
  color: var(--primary);
}
.franchise-description {
  width: var(--franchise-full);
  max-width: var(--franchise-description-width);
  font-size: var(--franchise-description-size);
  font-weight: var(--franchise-weight-medium);
  line-height: var(--franchise-line-copy);
  color: var(--muted);
  word-break: normal;
}
.franchise-scene-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--franchise-layout-gap);
  min-width: var(--franchise-zero);
}
.franchise-media {
  flex: 1;
  min-width: var(--franchise-zero);
  margin: var(--franchise-zero);
}
.franchise-media-stage {
  display: grid;
  place-items: center;
  width: var(--franchise-full);
  aspect-ratio: var(--franchise-media-ratio);
  overflow: hidden;
  border-radius: var(--franchise-media-radius);
  box-shadow: var(--franchise-zero) var(--franchise-zero) var(--franchise-zero) var(--franchise-media-border) var(--franchise-media-border-color);
  background: var(--component-white);
}
.franchise-media-stage[data-franchise-player] {
  display: block;
  aspect-ratio: auto;
}
.franchise-media-placeholder {
  padding: var(--franchise-card-padding);
  font-size: var(--franchise-media-label-size);
  font-weight: var(--franchise-weight-semibold);
  line-height: var(--franchise-line-copy);
  text-align: center;
  color: var(--primary);
  transform: translate(var(--franchise-media-label-offset-x), var(--franchise-media-label-offset-y));
}
.franchise-media-stage > img,
.franchise-media-stage > video {
  display: block;
  width: var(--franchise-full);
  height: var(--franchise-full);
  min-width: var(--franchise-zero);
  min-height: var(--franchise-zero);
  object-fit: contain;
}
.franchise-concept-stage {
  display: block;
  aspect-ratio: auto;
  box-shadow: none;
  background: transparent;
}
.franchise-concept-stage > img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.franchise-concept figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--franchise-font-body);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.franchise-steps {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--franchise-card-gap);
  flex: none;
  width: var(--franchise-card-width);
  margin: var(--franchise-zero);
}
.franchise-steps > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--franchise-card-copy-gap);
  padding: var(--franchise-card-padding);
  border-radius: var(--franchise-card-radius);
  background: var(--surface);
  word-break: normal;
}
.franchise-steps h3,
.franchise-video-title {
  width: var(--franchise-full);
  font-family: var(--franchise-font-heading);
  font-size: var(--franchise-card-title-size);
  font-weight: var(--franchise-weight-medium);
  line-height: var(--franchise-line-copy);
  color: var(--primary);
}
.franchise-steps p,
.franchise-video-description {
  width: var(--franchise-full);
  font-family: var(--franchise-font-body);
  font-size: var(--franchise-card-body-size);
  font-weight: var(--franchise-weight-regular);
  line-height: var(--franchise-line-body);
  color: var(--franchise-card-body-color);
}
.franchise-phone-frame {
  position: relative;
  flex: none;
  width: calc(var(--franchise-phone-width) * var(--franchise-phone-scale));
}
.franchise-phone {
  display: flex;
  flex: none;
  flex-direction: column;
  width: var(--franchise-full);
  overflow: hidden;
  border-radius: var(--franchise-media-radius);
  box-shadow: var(--franchise-zero) var(--franchise-zero) var(--franchise-zero) var(--franchise-media-border) var(--franchise-media-border-color);
  background: var(--component-white);
}
.franchise-phone-status {
  position: relative;
  flex: none;
  width: var(--franchise-phone-width);
  height: var(--franchise-phone-status-height);
  background: var(--component-white);
}
.franchise-phone-time {
  position: absolute;
  top: var(--franchise-phone-time-top);
  left: var(--franchise-phone-status-inset);
  font-family: var(--franchise-font-system);
  font-size: var(--franchise-phone-time-size);
  font-weight: var(--franchise-weight-medium);
  line-height: var(--franchise-line-heading);
  letter-spacing: var(--franchise-phone-time-tracking);
  color: var(--franchise-phone-time-color);
}
.franchise-phone-status-icons {
  position: absolute;
  top: var(--franchise-phone-icon-top);
  right: var(--franchise-phone-status-inset);
  display: flex;
  align-items: flex-start;
  gap: var(--franchise-phone-icon-gap);
}
.franchise-phone-status-icons img,
.franchise-phone-navigation { display: block; flex: none; }
.franchise-phone-screen {
  flex: 1;
  min-height: var(--franchise-zero);
  background: var(--franchise-phone-screen-background);
}
.franchise-phone-screen > img,
.franchise-phone-screen > video {
  display: block;
  width: var(--franchise-full);
  height: var(--franchise-full);
  object-fit: contain;
}
[data-franchise-player] { position: relative; }
/* Intrinsic dimensions reserve the cropped video's ratio before it loads. */
.franchise-media-stage > video,
.franchise-phone-screen > video { height: auto; }
.franchise-video-start {
  position: absolute;
  z-index: var(--franchise-layer-content);
  top: var(--franchise-video-center);
  left: var(--franchise-video-center);
  transform: translate(var(--franchise-video-center-offset), var(--franchise-video-center-offset));
  min-height: var(--franchise-video-control-height);
  white-space: nowrap;
}
.franchise-video-start[hidden],
.franchise-video-status[hidden] { display: none; }
.franchise-video-start:disabled { cursor: progress; }
.franchise-video-status {
  position: absolute;
  z-index: var(--franchise-layer-content);
  left: var(--franchise-chip-gap);
  right: var(--franchise-chip-gap);
  bottom: var(--franchise-video-control-height);
  padding: var(--franchise-chip-gap);
  border-radius: var(--franchise-chip-radius);
  background: var(--component-white);
  color: var(--primary);
  font-size: var(--franchise-card-body-size);
  line-height: var(--franchise-line-copy);
  text-align: center;
}
.franchise-video-choices > li { padding: var(--franchise-zero); }
#manual-learning .franchise-video-choices > .franchise-manual-setup { padding: var(--franchise-card-padding); }
.franchise-video-select {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--franchise-card-copy-gap);
  width: var(--franchise-full);
  padding: var(--franchise-card-padding);
  border: none;
  border-radius: var(--franchise-card-radius);
  background: transparent;
  color: var(--primary);
  text-align: left;
  cursor: pointer;
}
.franchise-video-select:hover { background: var(--franchise-video-hover); }
.franchise-video-select[aria-pressed='true'] {
  box-shadow: inset var(--franchise-zero) var(--franchise-zero) var(--franchise-zero) var(--franchise-video-selection-width) var(--secondary);
}
.franchise-video-link {
  font-family: var(--franchise-font-body);
  font-size: var(--franchise-card-body-size);
  font-weight: var(--franchise-weight-semibold);
  line-height: var(--franchise-line-copy);
}
@media (width <= 960px) {
  .franchise-hero-background img { object-fit: cover; object-position: var(--franchise-photo-mobile-position); }
}
@media (width <= 720px) {
  .franchise-breadcrumb { position: relative; }
  .franchise-case-picker { position: static; }
  .franchise-case-menu { left: var(--franchise-zero); right: auto; }
  .franchise-scene-layout { flex-direction: column; align-items: stretch; }
  .franchise-media { flex: none; }
  .franchise-scene-layout-phone { align-items: center; }
  .franchise-phone-screen { scroll-margin-bottom: calc(var(--franchise-video-control-height) + var(--franchise-card-gap)); }
  .franchise-media-placeholder { transform: none; }
  .franchise-hero-copy br,
  .franchise-description br { display: none; }
}