/* Homepage stylesheet (Garrett 2026-11-01): the champs.design homepage only (public/index.html). App UI, never exported
   to Webflow, not under the element-level gate. Design CSS lives in champs.css, the design controller in controller.css.
   Moved here unchanged from champs.css: homepage rules found elsewhere in the file (in file order), then the homepage section. */
.look-champs {
  background-color: var(--_theme---background--page);
  font-family: var(--font-family--body);
  color: var(--_theme---text--body);
  --font-family--body: var(--selection--font-body, Inter, sans-serif);
  --font-family--heading: var(--selection--font-heading, Archivo, sans-serif);
  --brand--white: #fff;
  --others--white-70: #ffffffb3;
  --others--black-70: #020617b3;
  --others--black-40: #02061766;
  --others--white-20: #fff3;
  --neutral--600: color-mix(in srgb, var(--brand--dark) 75%, var(--brand--light));
  --neutral--950: var(--brand--dark);
  --neutral--0: var(--brand--light);
  --others--white-10: #ffffff1a;
  --neutral--700: color-mix(in srgb, var(--brand--dark) 85%, var(--brand--light));
  --others--black-10: #0206171a;
  --neutral--100: color-mix(in srgb, var(--brand--dark) 10%, var(--brand--light));
  --neutral--300: color-mix(in srgb, var(--brand--dark) 30%, var(--brand--light));
  --neutral--500: color-mix(in srgb, var(--brand--dark) 60%, var(--brand--light));
  --neutral--900: color-mix(in srgb, var(--brand--dark) 96%, var(--brand--light));
  --neutral--200: color-mix(in srgb, var(--brand--dark) 18%, var(--brand--light));
  --neutral--50: color-mix(in srgb, var(--brand--dark) 5%, var(--brand--light));
  --neutral--400: color-mix(in srgb, var(--brand--dark) 45%, var(--brand--light));
  --neutral--800: color-mix(in srgb, var(--brand--dark) 92%, var(--brand--light));
  --_theme---background--page: var(--neutral--0);
  --_theme---text--body: var(--brand--dark);
  --_theme---background--alternate: var(--neutral--50);
  --_theme---text--heading: var(--neutral--900);
  --_theme---text--muted: var(--brand--dark);
  --_theme---border--primary: var(--neutral--200);
  --_theme---accent--primary: var(--brand--accent);
  --_theme---button-primary--background: var(--brand--primary);
  --_theme---button-primary--text: var(--neutral--0);
  --_theme---link--primary: var(--brand--primary);
  --_theme---background--icon: var(--brand--primary-50);
  --_theme---text--icon: var(--brand--primary);
  --_theme---text--eyebrow: var(--brand--accent);
  --_theme---background--card: var(--neutral--0);
  --_theme---button-secondary--border: var(--neutral--300);
  --_theme---button-primary--background-hover: var(--brand--primary-700);
  --_theme---button-secondary--text: var(--neutral--900);
  --_theme---background--overlay: var(--others--black-40);
  --_typography---body--body-font-weight: 400;
  --_typography---display--display-font-weight: 900;
  --_typography---display--display-letter-spacing: -.04em;
  --_typography---heading--heading-font-weight: 800;
  --_typography---heading--heading-letter-spacing: -.03em;
  --_typography---subheading--subheading-font-weight: 700;
  --_typography---interface--interface-font-weight: 700;
  --_typography---eyebrow--eyebrow-letter-spacing: .06em;
  --_sizes---border--width: 2px;
  --_typography---subheading--subheading-letter-spacing: -.01em;
  position: relative;
}
.studio-nav {
  z-index: 50;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_theme---border--primary);
  background-color: var(--_theme---background--page);
  position: sticky;
  top: 0;
}
.studio-nav_inner {
  height: var(--_sizes---navigation--height);
  grid-column-gap: var(--_layout---spacing--small);
  grid-row-gap: var(--_layout---spacing--small);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.studio-nav_logo-link {
  align-items: center;
  display: flex;
}
.studio-nav_logo {
  width: auto;
  height: var(--_layout---spacing--medium);
  display: block;
}
.studio-nav_links {
  grid-column-gap: var(--_layout---spacing--medium);
  grid-row-gap: var(--_layout---spacing--medium);
  align-items: center;
  display: flex;
}
.studio-nav_link {
  color: var(--_theme---text--heading);
  font-size: var(--_typography---font-size--text-small);
  font-weight: 600;
  text-decoration: none;
}
.studio-nav_link:hover {
  color: var(--_theme---link--primary);
}
.studio-hero {
  background-color: var(--brand--light);
  position: relative;
  overflow: hidden;
}
.studio-hero_grid {
  grid-column-gap: var(--_layout---spacing--xxlarge);
  grid-row-gap: var(--_layout---spacing--xxlarge);
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  display: grid;
}
.studio-hero_content {
  grid-column-gap: var(--_layout---spacing--small);
  grid-row-gap: var(--_layout---spacing--small);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.studio-hero_badge {
  padding: var(--_layout---spacing--xxtiny) var(--_layout---spacing--xxsmall) var(--_layout---spacing--xxtiny) var(--_layout---spacing--xxtiny);
  grid-column-gap: var(--_layout---spacing--xtiny);
  grid-row-gap: var(--_layout---spacing--xtiny);
  border: 1px solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--round);
  background-color: var(--_theme---background--card);
  color: var(--_theme---text--heading);
  font-size: var(--_typography---font-size--text-small);
  align-items: center;
  font-weight: 600;
  display: flex;
}
.studio-hero_badge-icon {
  width: var(--_sizes---icon--small);
  height: var(--_sizes---icon--small);
  display: block;
}
.studio-hero_media {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.studio-hero_glow {
  border-radius: var(--_sizes---border-radius--round);
  background-color: var(--brand--primary-100);
  width: 80%;
  height: 84%;
  position: absolute;
  top: 8%;
  left: 10%;
}
.studio-hero_mascot {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
.studio-how {
  background-color: var(--_theme---background--page);
  position: relative;
}
.studio-how_grid {
  margin-top: var(--_layout---spacing--xxlarge);
  grid-row-gap: var(--_layout---spacing--grid-gap);
  grid-column-gap: var(--_layout---spacing--grid-gap);
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}
.studio-step {
  padding: var(--_layout---spacing--medium);
  grid-column-gap: var(--_layout---spacing--xxsmall);
  grid-row-gap: var(--_layout---spacing--xxsmall);
  border-radius: var(--_sizes---border-radius--large);
  background-color: var(--_theme---background--alternate);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.studio-step_num {
  width: var(--_sizes---icon--medium);
  height: var(--_sizes---icon--medium);
  border-top-left-radius: var(--_sizes---border-radius--round);
  border-top-right-radius: var(--_sizes---border-radius--round);
  border-bottom-left-radius: var(--_sizes---border-radius--round);
  border-bottom-right-radius: var(--_sizes---border-radius--round);
  background-color: var(--brand--accent);
  color: var(--brand--dark);
  font-size: var(--_typography---font-size--text-medium);
  font-weight: 900;
  line-height: 1;
  font-family: var(--font-family--heading);
  justify-content: center;
  align-items: center;
  display: flex;
}
.studio-step_image {
  aspect-ratio: 5 / 4;
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
}
.studio-wf {
  background-color: var(--brand--light);
  position: relative;
}
.studio-wf_grid {
  margin-top: var(--_layout---spacing--xxlarge);
  grid-column-gap: var(--_layout---spacing--large);
  grid-row-gap: var(--_layout---spacing--large);
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}
.studio-wf_card {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--_theme---border--primary);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--_theme---border--primary);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_theme---border--primary);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--_theme---border--primary);
  border-top-left-radius: var(--_sizes---border-radius--large);
  border-top-right-radius: var(--_sizes---border-radius--large);
  border-bottom-left-radius: var(--_sizes---border-radius--large);
  border-bottom-right-radius: var(--_sizes---border-radius--large);
  background-color: var(--_theme---background--card);
  color: var(--_theme---text--body);
  flex-direction: column;
  text-decoration: none;
  transition: border-color .3s;
  display: flex;
  overflow: hidden;
}
.studio-wf_card:hover {
  border-color: var(--_theme---link--primary);
}
.studio-wf_shot {
  aspect-ratio: 16 / 10;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_theme---border--primary);
  background-color: var(--neutral--100);
  position: relative;
  overflow: hidden;
}
.studio-wf_img {
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 100%;
  display: block;
}
.studio-wf_body {
  padding: var(--_layout---spacing--medium);
  grid-column-gap: var(--_layout---spacing--xtiny);
  grid-row-gap: var(--_layout---spacing--xtiny);
  flex-direction: column;
  display: flex;
}
.studio-wf_head {
  grid-column-gap: var(--_layout---spacing--xxsmall);
  grid-row-gap: var(--_layout---spacing--xxsmall);
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: .25rem;
  display: flex;
}
.studio-wf_name {
  color: var(--_theme---text--heading);
  font-size: var(--_typography---h4--h4-font-size);
  font-weight: 800;
  line-height: 1.2;
  font-family: var(--font-family--heading);
}
.studio-wf_cta {
  color: var(--_theme---link--primary);
  font-size: var(--_typography---font-size--text-small);
  white-space: nowrap;
  font-weight: 600;
}
.studio-wf_text {
  color: var(--_theme---text--body);
  font-size: var(--_typography---font-size--text-regular);
  margin-top: 0;
  margin-bottom: 0;
}
.studio-wf_tags {
  margin-top: var(--_layout---spacing--xtiny);
  grid-column-gap: var(--_layout---spacing--xtiny);
  grid-row-gap: var(--_layout---spacing--xtiny);
  flex-wrap: wrap;
  display: flex;
}
.studio-wf_tag {
  padding: var(--_layout---spacing--xxtiny) var(--_layout---spacing--xxsmall);
  border-radius: var(--_sizes---border-radius--round);
  background-color: var(--brand--primary-50);
  color: var(--brand--primary-700);
  font-size: var(--_typography---font-size--text-tiny);
  font-weight: 600;
}
.studio-cta {
  position: relative;
  overflow: hidden;
}
.studio-cta.theme-brand {
  --others--white-70: #ffffffb3;
  --brand--accent-50: #fff9ee;
  --brand--accent-300: #fcd895;
  --others--black-70: #020617b3;
  --brand--secondary-300: #8096a4;
  --others--black-40: #02061766;
  --brand--accent-200: #fee8bf;
  --others--white-20: #fff3;
  --neutral--600: color-mix(in srgb, var(--brand--dark) 75%, var(--brand--light));
  --neutral--950: var(--brand--dark);
  --neutral--0: var(--brand--light);
  --others--white-10: #ffffff1a;
  --brand--accent-100: #fef3df;
  --brand--accent-900: #644711;
  --brand--accent-400: #fbc560;
  --brand--secondary-400: #406277;
  --neutral--700: color-mix(in srgb, var(--brand--dark) 85%, var(--brand--light));
  --others--black-10: #0206171a;
  --brand--primary-100: #d9e5ed;
  --brand--primary-300: #80a9c3;
  --brand--primary-700: #003a5e;
  --brand--primary-900: #002136;
  --neutral--100: color-mix(in srgb, var(--brand--dark) 10%, var(--brand--light));
  --neutral--300: color-mix(in srgb, var(--brand--dark) 30%, var(--brand--light));
  --neutral--500: color-mix(in srgb, var(--brand--dark) 60%, var(--brand--light));
  --neutral--900: color-mix(in srgb, var(--brand--dark) 96%, var(--brand--light));
  --neutral--200: color-mix(in srgb, var(--brand--dark) 18%, var(--brand--light));
  --neutral--50: color-mix(in srgb, var(--brand--dark) 5%, var(--brand--light));
  --brand--primary-50: #ebf1f5;
  --brand--primary-200: #b2cbdb;
  --brand--accent-600: #d49725;
  --brand--primary-400: #407ea5;
  --brand--primary-600: #004773;
  --brand--primary-800: #002e4a;
  --brand--secondary-50: #ebeef1;
  --brand--secondary-100: #d9e0e4;
  --brand--secondary-200: #b2c0c9;
  --brand--secondary-600: #00273f;
  --brand--secondary-700: #002034;
  --brand--secondary-800: #001929;
  --brand--secondary-900: #00121e;
  --brand--accent-700: #af7d1e;
  --brand--accent-800: #8a6218;
  --neutral--400: color-mix(in srgb, var(--brand--dark) 45%, var(--brand--light));
  --neutral--800: color-mix(in srgb, var(--brand--dark) 92%, var(--brand--light));
}
.studio-cta_grid {
  grid-column-gap: var(--_layout---spacing--large);
  grid-row-gap: var(--_layout---spacing--large);
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  display: grid;
}
.studio-cta_mascot {
  width: 100%;
  height: auto;
  display: block;
}
.studio-cta_content {
  grid-column-gap: var(--_layout---spacing--small);
  grid-row-gap: var(--_layout---spacing--small);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.studio-footer {
  border-top: 1px solid var(--_theme---border--primary);
  background-color: var(--_theme---background--page);
  position: relative;
}
.studio-footer_inner {
  padding-top: var(--_layout---spacing--large);
  padding-bottom: var(--_layout---spacing--large);
  grid-column-gap: var(--_layout---spacing--medium);
  grid-row-gap: var(--_layout---spacing--medium);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.studio-footer_brand {
  grid-column-gap: var(--_layout---spacing--xtiny);
  grid-row-gap: var(--_layout---spacing--xtiny);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.studio-footer_logo {
  width: auto;
  height: var(--_layout---spacing--medium);
  display: block;
}
.studio-footer_legal {
  color: var(--_theme---text--muted);
  font-size: var(--_typography---font-size--text-small);
}
.studio-footer_links {
  column-gap: var(--_layout---spacing--small);
  row-gap: var(--_layout---spacing--xtiny);
  flex-wrap: wrap;
  display: flex;
}
.studio-footer_link {
  color: var(--_theme---text--body);
  font-size: var(--_typography---font-size--text-small);
  text-decoration: none;
}
.studio-footer_link:hover {
  color: var(--_theme---link--primary);
}
@media screen and (max-width: 991px) {
.studio-hero_grid {
    grid-column-gap: var(--_layout---spacing--large);
    grid-row-gap: var(--_layout---spacing--large);
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }
.studio-how_grid {
    max-width: var(--_sizes---container--small);
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
    margin-left: auto;
    margin-right: auto;
  }
.studio-wf_grid {
    grid-column-gap: var(--_layout---spacing--medium);
    grid-row-gap: var(--_layout---spacing--medium);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
.studio-nav_links {
    display: none;
  }
.studio-hero_media {
    max-width: 100%;
  }
.studio-how_grid {
    max-width: 100%;
    margin-top: var(--_layout---spacing--large);
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }
.studio-step {
    padding: var(--_layout---spacing--small);
  }
.studio-wf_grid {
    margin-top: var(--_layout---spacing--large);
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }
.studio-wf_body {
    padding: var(--_layout---spacing--small);
  }
.studio-cta_grid {
    grid-column-gap: var(--_layout---spacing--small);
    grid-row-gap: var(--_layout---spacing--small);
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }
.studio-footer_inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
:is(.studio-wf_tag:not(:where([data-chs-v])),[data-chs-v~="studio-wf_tag"]) {font-size:11px}
html[data-chs-modes]:not(#chs):not(#chm):not(#chn) :is([data-chs-mode="plain"],[data-chs-mode="tint"],[data-chs-mode="soft"],[data-chs-mode="accent"]) .studio-step {--_theme---text--heading:var(--_theme---controller--mode-alt-heading)!important;--_theme---text--body:var(--_theme---controller--mode-alt-body)!important;--_theme---text--muted:var(--_theme---controller--mode-alt-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-alt-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-alt-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-alt-eyebrow)!important;color:var(--_theme---controller--mode-alt-body)}
html[data-chs-modes]:not(#chs):not(#chm):not(#chn) :is([data-chs-mode="plain"],[data-chs-mode="tint"],[data-chs-mode="soft"],[data-chs-mode="accent"]) .studio-hero_badge, html[data-chs-modes]:not(#chs):not(#chm):not(#chn) :is([data-chs-mode="plain"],[data-chs-mode="tint"],[data-chs-mode="soft"],[data-chs-mode="accent"]) .studio-wf_card {--_theme---text--heading:var(--_theme---controller--mode-card-heading)!important;--_theme---text--body:var(--_theme---controller--mode-card-body)!important;--_theme---text--muted:var(--_theme---controller--mode-card-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-card-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-card-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-card-eyebrow)!important;color:var(--_theme---controller--mode-card-body)}
html[data-chs-colors="roles"]:not(#chs):not(#chm):not(#chn) [data-chs-mode] .studio-step {--_theme---text--heading:var(--_theme---controller--mode-alt-heading)!important;--_theme---text--body:var(--_theme---controller--mode-alt-body)!important;--_theme---text--muted:var(--_theme---controller--mode-alt-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-alt-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-alt-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-alt-eyebrow)!important;color:var(--_theme---controller--mode-alt-body);--_theme---link--primary:var(--chs-mode-alt-link)!important}
html[data-chs-colors="roles"]:not(#chs):not(#chm):not(#chn) [data-chs-mode] .studio-hero_badge, html[data-chs-colors="roles"]:not(#chs):not(#chm):not(#chn) [data-chs-mode] .studio-wf_card {--_theme---text--heading:var(--_theme---controller--mode-card-heading)!important;--_theme---text--body:var(--_theme---controller--mode-card-body)!important;--_theme---text--muted:var(--_theme---controller--mode-card-muted)!important;--_theme---controller--src-muted:var(--_theme---controller--mode-card-muted)!important;--_theme---text--eyebrow:var(--_theme---controller--mode-card-eyebrow)!important;--_theme---controller--accent-ink:var(--_theme---controller--mode-card-eyebrow)!important;color:var(--_theme---controller--mode-card-body);--_theme---link--primary:var(--chs-mode-card-link)!important}
/* ===== Homepage section (formerly home-rebuild.css inside champs.css) ===== */
/* ===== home-rebuild.css ===== */
/* champs.design homepage sections added by tools/homepage_rebuild.py (Garrett 2026-10-23): video under the hero, the industry marquee,
   Your style, the designer demo and what happens next. The page keeps the site's Client-First classes and --_size / --_theme tokens;
   everything here is a home-* class. Every color is a token on .page-home, never a fixed value in a component. */
.page-home {
  --home-brand-blue: #005387;
  --home-ctl-bg: #14171c;
  --home-ctl-raised: #1d222a;
  --home-ctl-line: #2c323c;
  --home-ctl-ink: #eef0f4;
  --home-ctl-muted: #9aa1b0;
  --home-ctl-accent: #fab22b;
  --home-ctl-saved: #ff6b6b;
  --home-photo: #9aa3ae;
  --home-scrim: 10, 15, 25;
  --home-on-photo: #ffffff;
  --home-video-bg: #0b0f16;
  --home-play-bg: var(--_theme---button-primary--background);
  --home-play-ink: var(--_theme---button-primary--text);
  --home-hero-title: clamp(2rem, 5vh, 2.5rem);
  --home-card-w: 13.5rem;
  --home-menu-shadow: 0 1rem 2rem rgba(16, 24, 40, .08);
}
/* ---- mobile nav: the hamburger opens the hidden links as a panel below the bar ---- */
.home-nav_toggle { display: none; }
.home-nav_menu { display: contents; }
@media (max-width: 991px) {
.home-nav_actions .home-demo_btn { display: none; }
.studio-nav_logo { width: 8rem; height: auto; }
.home-nav_menu { display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: .5rem var(--_layout---spacing--global-padding) 1rem; background: var(--_theme---background--page);
    border-bottom: 1px solid var(--_theme---border--primary); box-shadow: var(--home-menu-shadow); }
.studio-nav.is-open .home-nav_menu { display: flex; flex-direction: column; }
.home-nav_menu .home-nav_actions { padding-top: .75rem; margin-top: .5rem; border-top: 1px solid var(--_theme---border--primary); }
.studio-nav .home-nav_menu .home-nav_actions { flex-direction: column; align-items: stretch; gap: .5rem; }
.home-nav_menu .home-nav_actions .home-saved:not([hidden]), .home-nav_menu .home-nav_actions .button {
    display: flex; width: 100%; min-height: 2.75rem; justify-content: center; align-items: center;
    border-radius: .5rem; padding: .65rem 1rem; font-size: .875rem; line-height: 1.2; font-weight: 600; text-align: center;
  }
.home-nav_toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; flex: none;
    width: 2.5rem; height: 2.5rem; padding: 0 .55rem; cursor: pointer; background: none;
    border: 1px solid var(--_theme---border--primary); border-radius: .5rem; }
.home-nav_toggle span { display: block; height: 2px; background: var(--_theme---text--heading); border-radius: 2px; transition: transform .2s, opacity .2s; }
.studio-nav.is-open .home-nav_toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.studio-nav.is-open .home-nav_toggle span:nth-child(2) { opacity: 0; }
.studio-nav.is-open .home-nav_toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.home-nav_toggle:focus-visible { outline: 2px solid var(--_theme---link--primary); outline-offset: 3px; }
.studio-nav .button { white-space: nowrap; }
.studio-nav.is-open .studio-nav_links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.studio-nav.is-open .studio-nav_links a { padding: .85rem 0; font-size: 1rem; border-top: 1px solid var(--_theme---border--primary); text-decoration: none; }
.studio-nav.is-open .studio-nav_links a:first-child { border-top: 0; }
}
/* ---- nav: Saved layouts ---- */
.studio-nav_inner .home-nav_actions { display: flex; align-items: center; gap: var(--_layout---spacing--xxsmall); }
.home-saved { display: inline-flex; align-items: center; padding: .4rem .9rem; border: 1px solid var(--_theme---border--primary); border-radius: 99px; background: var(--_theme---background--card); white-space: nowrap; text-decoration: none; }
.home-saved[hidden], .home-demo_btn[hidden] { display: none; }
button.home-saved { font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; color: var(--_theme---text--heading); }
.home-hero_actions { margin-top: var(--_layout---spacing--xtiny); display: flex; flex-wrap: wrap; align-items: center; gap: var(--_layout---spacing--xxsmall); }
.home-saved:hover { border-color: var(--_theme---text--heading); }
.home-saved_count {
  display: inline-block; min-width: 1.5em; margin-left: .4em; padding: 0 .45em; border-radius: 99px;
  background: var(--_theme---text--heading); color: var(--_theme---background--page); font-size: .75em; line-height: 1.6; text-align: center;
}
/* ---- Watch demo: a button in the nav and the hero, opening the how-it-works video ---- */
.home-demo_btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 600; font-size: .875rem; padding: .45rem .9rem; cursor: pointer;
  border: 0; background: none; color: var(--_theme---text--heading); border-radius: 99px; white-space: nowrap; }
.home-demo_btn:hover { background: var(--_theme---background--alternate); }
.studio-hero .home-demo_btn { font-size: 1rem; padding: .75rem 1.25rem; }
.home-demo_icon { flex: none; }
.home-demo_btn:focus-visible, .home-mq:focus-visible { outline: 2px solid var(--_theme---link--primary); outline-offset: 3px; }
/* The heading stays contained; Swiper is its sibling, spanning the viewport. */
.home-mq.swiper { width: 100%; margin-top: var(--_layout---spacing--xxlarge); overflow: clip; touch-action: pan-y; }
.home-mq .home-mq_track { align-items: stretch; transition-timing-function: linear; }
.home-mq.is-coasting .home-mq_track { transition-timing-function: ease-out; }
.home-mq .studio-wf_card.swiper-slide { width: min(25rem, 85vw); height: auto; flex-shrink: 0; user-select: none; border-radius: .75rem; }
.home-mq .studio-wf_img { -webkit-user-drag: none; }
@media (max-width: 767px) {
.home-mq .studio-wf_card.swiper-slide { width: min(18rem, 72vw); }
.home-mq .studio-wf_body { padding: 1rem; gap: .5rem; }
.home-mq .studio-wf_head .heading-style-h4 { font-size: 1.125rem; line-height: 1.2; }
.home-mq .studio-wf_head .text-size-small { font-size: .75rem; }
.home-mq .studio-wf_body > p { font-size: .8rem; line-height: 1.45; }
}
/* ---- Your style and the designer: one contained panel each ---- */
.home-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; align-items: stretch; height: clamp(30rem, calc(100vh - 10rem), 44rem);
  margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium, .75rem); background: var(--_theme---background--card); }
.home-panel.is-designer { align-items: stretch; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.home-panel.is-designer > .home-col { gap: var(--_layout---spacing--small); }
@media (max-width: 767px) {
.home-panel, .home-panel.is-designer { grid-template-columns: minmax(0, 1fr); padding: 1rem; height: auto; }
}
.home-col { display: flex; flex-direction: column; min-width: 0; }
.home-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--_theme---border--primary); }
.home-tabs button { font: inherit; font-size: 1.05rem; font-weight: 600; background: none; border: 0; border-bottom: 2px solid transparent; padding: .75rem 1rem;
  color: var(--_theme---text--muted); cursor: pointer; }
.home-tabs button[aria-selected="true"] { color: var(--_theme---text--heading); border-bottom-color: var(--_theme---text--heading); }
.home-opts { display: grid; gap: .75rem; overflow: auto; padding: .125rem .5rem .5rem .125rem; align-content: start; }
.home-opts-wrap { position: relative; flex: 1; min-height: 0; }
.home-opts-wrap > .home-opts { position: absolute; inset: 0; }
.home-opts.is-pal, .home-opts.is-btn { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.home-opts.is-fnt { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.home-opt { font: inherit; text-align: left; display: flex; flex-direction: column; gap: .5rem; min-width: 0; cursor: pointer;
  padding: .75rem; border: 1px solid var(--_theme---border--primary); border-radius: .5rem; background: var(--_theme---background--page); color: var(--_theme---text--heading); }
.home-opt[aria-pressed="true"] { border-color: var(--_theme---text--heading); box-shadow: inset 0 0 0 1px var(--_theme---text--heading); }
.home-opt small { display: block; width: 100%; min-width: 0; font-size: .9rem; line-height: 1.4; color: var(--_theme---text--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-opt_sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; height: 1.5rem; min-height: 1.5rem; flex: none; border-radius: .25rem; overflow: hidden; }
.home-opt_sw > span { display: block; min-width: 0; height: 1.5rem; }
.home-opt_aa { display: block; width: 100%; min-width: 0; flex: none; font-size: 1.5rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-opt_btn { font-size: .85rem; padding: .45rem .9rem; width: max-content; background: var(--_theme---text--heading); color: var(--_theme---background--page); }
.home-opt_corner { height: 2.25rem; width: 60%; border: 2px solid var(--_theme---text--heading); border-right: 0; border-bottom: 0; }
/* the mini website */
.home-site { --hs-ground: #fff; --hs-ink: #111; --hs-head: #111; --hs-btn: #333; --hs-btn-ink: #fff; --hs-card: #fff; --hs-ground-2: #eee;
  --hs-radius: 0; font-family: var(--font-family--body); border: 1px solid var(--_theme---border--primary); border-radius: var(--_sizes---border-radius--medium, .75rem);
  overflow: hidden; background: var(--hs-ground); color: var(--hs-ink); transition: background .2s, color .2s; flex: 1; display: flex; flex-direction: column; }
.home-site_hero { flex: 1.4; justify-content: center; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; padding: 1.5rem; background: var(--hs-ground); color: var(--hs-ink); }
.home-site_title { font-family: var(--font-family--heading); font-weight: var(--hs-hw, 700); font-size: var(--home-hero-title); line-height: 1.05; color: var(--hs-head); margin: 0; }
.home-site_text { font-size: 1.15rem; margin: 0; opacity: .85; color: inherit; }
.home-site_actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.home-btn { font-family: var(--button-font, var(--font-family--body)); font-size: .875rem; text-transform: var(--button-case, none);
  letter-spacing: var(--button-tracking, normal); font-weight: 600; padding: .65rem 1.25rem; border-radius: var(--button-radius, .375rem);
  background: var(--hs-btn); color: var(--hs-btn-ink); border: 1.5px solid var(--hs-btn); box-shadow: var(--_theme---button--shadow, none); cursor: default; }
.home-btn.is-secondary { background: var(--_theme---button-secondary--background, transparent); color: var(--hs-ink); border-color: var(--hs-ink); }
.home-site_cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1.25rem; background: var(--hs-ground-2); }
.home-site_card { background: var(--hs-card); box-shadow: inset 0 0 0 1px var(--hs-card-border, transparent); border-radius: var(--hs-radius); padding: 1.25rem; min-height: 7rem; font-size: .95rem; color: var(--hs-card-ink, var(--hs-ink)); }
.home-site_card b { display: block; font-family: var(--font-family--heading); color: inherit; font-size: 1.15rem; margin-bottom: .25rem; }
.home-modes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.home-modes button { font: inherit; font-size: 1rem; border: 1px solid var(--_theme---border--primary); border-radius: 99px; padding: .4rem 1rem; background: var(--_theme---background--page);
  color: var(--_theme---text--heading); cursor: pointer; }
.home-modes button[aria-pressed="true"] { background: var(--_theme---text--heading); color: var(--_theme---background--page); border-color: var(--_theme---text--heading); }
/* designer demo */
.home-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; border: 1px solid var(--_theme---border--primary);
  border-radius: var(--_sizes---border-radius--medium, .75rem); background: var(--hs-ground); color: var(--hs-ink); }
.home-hero { position: relative; flex: 1; display: flex; align-items: center; min-height: 0; background: var(--home-photo); overflow: hidden; }
.home-hero_media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero_scrim { position: absolute; inset: 0; pointer-events: none; }
.home-hero_text { position: relative; max-width: 60%; padding: 1.5rem; color: var(--home-on-photo); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.home-hero_text .home-site_title { color: var(--home-on-photo); font-size: var(--home-hero-title); }
.home-hero_badge { position: absolute; right: .75rem; top: .75rem; font-size: .8rem; letter-spacing: .08em; background: rgba(var(--home-scrim), .6); color: var(--home-on-photo);
  border-radius: 99px; padding: .3rem .9rem; }
.home-coll { flex: 1; display: flex; flex-direction: column; gap: .8rem; justify-content: center; padding: 1.5rem; background: var(--hs-ground); color: var(--hs-ink); }
.home-coll_head { display: flex; flex-direction: column; gap: .35rem; }
.home-coll_head.is-center { align-items: center; text-align: center; }
.home-coll_eyebrow { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--hs-head); }
.home-coll_cards { display: grid; gap: .6rem; }
.home-coll_cards.is-grid { grid-template-columns: repeat(auto-fill, var(--home-card-w)); justify-content: start; }
.home-coll_rail { display: flex; gap: .6rem; overflow: hidden; }
.home-coll_rail .home-card { flex: 0 0 var(--home-card-w); }
.home-coll_slider { width: 100%; overflow: hidden; }
.home-coll_slider .home-coll_rail { overflow: visible; gap: 0; }
.home-coll_slider .home-card.swiper-slide { height: auto; }
.home-coll_mq { overflow: hidden; }
.home-coll_mq-track { display: flex; gap: .6rem; width: max-content; animation: home-mq 60s linear infinite; }
@keyframes home-mq { to { transform: translateX(-50%); } }
.home-coll_mq-track .home-card { width: var(--home-card-w); flex: none; }
.home-card { position: relative; width: var(--home-card-w); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--hs-radius); display: flex; align-items: flex-end;
  background: var(--home-photo) center / cover no-repeat; color: var(--home-on-photo); min-width: 0; }
.home-card_scrim { position: absolute; inset: 0; }
.home-card_body { position: relative; padding: .8rem; font-size: .85rem; display: flex; flex-direction: column; gap: .1rem; }
.home-card_body b { font-family: var(--font-family--heading); font-size: 1.1rem; }
.home-coll_arrows { display: flex; gap: .4rem; }
.home-coll_arrows span, .home-coll_arrows button { width: 1.7rem; height: 1.7rem; border: 1px solid var(--hs-ink); border-radius: var(--button-radius, .375rem); display: grid; place-items: center; font-size: .8rem; }
.home-coll_arrows button { background: transparent; color: inherit; cursor: pointer; padding: 0; }
.home-coll_arrows button:disabled { opacity: .35; cursor: default; }
.home-coll_search { border: 1px solid var(--hs-ink); border-radius: var(--button-radius, .375rem); padding: .6rem .9rem; font-size: .95rem; opacity: .8; width: 60%; }
.home-coll_pills { display: flex; gap: .3rem; flex-wrap: wrap; }
.home-coll_pills span { border: 1px solid var(--hs-ink); border-radius: 99px; padding: .2rem .85rem; font-size: .9rem; }
.home-coll_pills span:first-child { background: var(--hs-btn); color: var(--hs-btn-ink); border-color: var(--hs-btn); }
.home-coll_side { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .8rem; }
.home-coll_aside { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.home-coll_aside b { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.home-coll_aside span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border: 1px solid var(--hs-ink); margin-right: .4rem; }
/* the controller panel, drawn like the designer's sidebar */
.home-ctl { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: var(--_sizes---border-radius--medium, .75rem);
  background: var(--home-ctl-bg); color: var(--home-ctl-ink); font-size: 1rem; }
.home-ctl h3 { margin: 0; font-size: 1.2rem; color: var(--home-ctl-ink); }
.home-ctl_card { display: flex; flex-direction: column; gap: .9rem; padding: 1rem; border: 1px solid var(--home-ctl-line); border-radius: .6rem; }
.home-ctl_heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.home-ctl_heart { font: inherit; width: 2.5rem; height: 2.3rem; font-size: 1.1rem; border-radius: .5rem; background: var(--home-ctl-raised); border: 1px solid var(--home-ctl-line); color: var(--home-ctl-ink); cursor: pointer; }
.home-ctl_heart[aria-pressed="true"] { color: var(--home-ctl-saved); border-color: var(--home-ctl-saved); }
.home-ctl_row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.home-ctl_label { width: 5rem; color: var(--home-ctl-muted); }
.home-ctl_seg { display: flex; gap: .25rem; flex-wrap: wrap; }
.home-ctl_seg button { font: inherit; font-size: .95rem; color: var(--home-ctl-ink); background: var(--home-ctl-raised); border: 1px solid var(--home-ctl-line);
  border-radius: .5rem; padding: .4rem .85rem; cursor: pointer; text-transform: capitalize; }
.home-ctl_seg button[aria-pressed="true"] { border-color: var(--home-ctl-accent); color: var(--home-ctl-accent); }
.home-ctl input[type="range"] { accent-color: var(--home-ctl-accent); width: 9rem; }
.home-ctl_foot { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.home-ctl button:focus-visible, .home-tabs button:focus-visible, .home-opt:focus-visible, .home-modes button:focus-visible { outline: 2px solid var(--home-ctl-accent); outline-offset: 2px; }
.home-opt:focus-visible, .home-modes button:focus-visible, .home-ctl_seg button:focus-visible { outline-offset: -3px; }
/* ---- what happens next ---- */
.home-next_grid { margin-top: var(--_layout---spacing--xxlarge); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--_layout---spacing--grid-gap, var(--_layout---spacing--medium)); }
@media (max-width: 991px) {
.home-next_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
.home-next_grid { grid-template-columns: minmax(0, 1fr); }
}
.home-next_action { display: flex; justify-content: center; margin-top: var(--_layout---spacing--large); }
@media (max-width: 767px) {
#style .home-panel, #designer .home-panel { margin-top: 1.25rem; padding: .75rem; gap: .75rem; }
#style .home-panel, #designer .home-panel { --home-work-height: calc(100svh - 6.0625rem); grid-template-rows: minmax(0, 1fr) auto; }
#style .section-header { gap: .5rem; margin-bottom: 1rem; }
#style .section-header h2 { font-size: clamp(1.875rem, 8vw, 2rem); line-height: 1.15; }
#style .home-panel { display: flex; flex-direction: column; margin-top: 1rem; height: auto; min-height: min(var(--home-work-height), 56rem); }
#style .home-site { flex: 1 0 auto; min-height: 0; height: auto; }
#style .home-site_hero { padding: 1.5rem; gap: .75rem; }
#style .home-site_title { font-size: 2rem; line-height: 1.1; }
#designer .home-site_title { font-size: 1.5rem; line-height: 1.12; }
#style .home-site_text, #designer .home-site_text { font-size: .8125rem; line-height: 1.4; }
#style .home-site_text, #designer [data-home-kind="hero"] .home-site_text { font-size: .9375rem; }
#designer [data-home-kind="hero"] .home-site_title { font-size: 1.75rem; }
#style .home-site_actions, #designer .home-site_actions { flex-wrap: wrap; gap: .5rem; }
#style .home-btn, #designer .home-btn { font-size: .75rem; padding: .5rem .75rem; white-space: nowrap; }
#style .home-site_cards { display: flex; flex: none; gap: .625rem; padding: 1rem; overflow-x: auto; scrollbar-width: none; }
#style .home-site_cards::-webkit-scrollbar { display: none; }
#style .home-site_card { flex: 0 0 44%; min-width: 0; min-height: 0; padding: .75rem; font-size: .875rem; line-height: 1.45; }
#style .home-site_card b { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
#designer .home-panel { height: auto; min-height: min(var(--home-work-height), 56rem); grid-template-rows: minmax(20.375rem, 1fr) auto; }
#designer .home-panel > .home-col { gap: .75rem; min-height: 0; }
#designer .home-tabs button { font-size: .875rem; padding: .5rem .75rem; min-height: 2.75rem; }
#designer .home-view { flex: 1; height: auto; min-height: 16.875rem; --home-card-w: 8.5rem; }
#designer .home-hero { min-height: 0; }
#designer .home-hero_text { max-width: 100%; padding: 1rem; gap: .625rem; }
#designer .home-hero_badge { font-size: .625rem; padding: .2rem .5rem; }
#designer .home-coll { padding: 1rem; gap: .5rem; }
#designer .home-coll_eyebrow { font-size: .625rem; line-height: 1.2; letter-spacing: .08em; }
#designer .home-card { aspect-ratio: 16 / 9; }
#designer .home-card_body { padding: .5rem; font-size: .75rem; }
#designer .home-card_body b { font-size: .875rem; }
#designer .home-coll_arrows button { width: 2rem; height: 2rem; font-size: .875rem; }
#designer .home-coll_side { grid-template-columns: 4rem minmax(0, 1fr); gap: .5rem; }
#designer .home-coll_cards.is-grid { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
#designer .home-coll_cards .home-card { width: 100%; }
#designer .home-ctl { padding: .75rem; gap: .625rem; font-size: clamp(.8125rem, 2svh, .9375rem); }
#designer .home-ctl h3 { font-size: 1rem; }
#designer .home-ctl_card { padding: clamp(.625rem, 1.5svh, .875rem); gap: clamp(.25rem, .8svh, .5rem); }
#designer .home-ctl_card[aria-label="Hero media"] { row-gap: clamp(.5rem, 1.2svh, .75rem); }
#designer .home-ctl_heart { width: 2rem; height: 2rem; font-size: 1.125rem; }
#designer .home-ctl_foot { font-size: .75rem; }
#designer .home-ctl_row { flex-wrap: nowrap; min-width: 0; gap: .4rem; }
#designer .home-ctl_label { width: 3.25rem; flex: none; }
#designer .home-ctl_seg { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#designer .home-ctl_seg::-webkit-scrollbar { display: none; }
#designer .home-ctl_seg button { flex: none; white-space: nowrap; font-size: inherit; line-height: 1.3; padding: .35rem .6rem; min-height: clamp(1.875rem, 4.4svh, 2.25rem); }
/* Your style on phone: the preview leads, the controls follow as one-row tabs and swipeable option rails (Garrett 2026-10-23) */
#style .home-panel > .home-col:last-child { order: -1; }
#style .home-panel > .home-col:last-child { flex: 1 0 auto; }
#style .home-panel > .home-col { min-height: 0; }
#style .home-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#style .home-tabs::-webkit-scrollbar { display: none; }
#style .home-tabs button { flex: none; padding: .55rem .65rem; font-size: .875rem; min-height: 2.75rem; }
#style .home-opts-wrap { flex: none; height: auto; }
#style .home-opts-wrap > .home-opts { position: static; display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: none; scrollbar-width: none; padding: .125rem; }
#style .home-opts::-webkit-scrollbar { display: none; }
#style .home-opts .home-opt { flex: 0 0 42%; }
#style .home-opts.is-fnt .home-opt { flex-basis: 56%; }
#style .home-modes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#style .home-modes::-webkit-scrollbar { display: none; }
#style .home-modes button { flex: none; }
#style .home-modes { margin-top: .75rem; }
#style .home-modes button { font-size: .875rem; line-height: 1.25; padding: .3rem .75rem; min-height: 2.125rem; }
#style .home-opt { padding: .75rem; gap: .5rem; }
#style .home-opt small { font-size: .875rem; }
#style .home-opt_aa { font-size: 1.15rem; line-height: 1.3; max-width: 100%; }
#style .home-opt_btn { font-size: .7rem; padding: .4rem .6rem; }
#style .home-tabs, #style .home-modes, #style .home-opts, #designer .home-ctl_seg {
    touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
[data-home-rail] { cursor: grab; }
[data-home-rail].is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
}
@media (min-width: 360px) and (max-width: 767px) {
#designer .home-ctl_card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#designer .home-ctl_card > * { grid-column: 1 / -1; }
#designer .home-ctl_row[data-home-control="header"], #designer .home-ctl_row[data-home-control="align"] { grid-column: auto; gap: .25rem; }
#designer [data-home-control="header"] .home-ctl_label, #designer [data-home-control="align"] .home-ctl_label { width: auto; font-size: clamp(.6875rem, 1.65svh, .75rem); }
#designer [data-home-control="header"] .home-ctl_seg button, #designer [data-home-control="align"] .home-ctl_seg button { padding-inline: .375rem; }
}
/* Champs brand blue (the logo's blue) for every primary button and link on the homepage */
.look-champs { --brand--primary: var(--home-brand-blue); }
/* Client-First utility: hidden element (2026-10-31) */
.home-tabs.is-flush { margin-bottom: 0; }
/* ===== Part B: add to styles/home.css (homepage only) =====
   Replaces the inline style= values home-rebuild.js and howto.js wrote; home.js now sets only the custom properties. */
/* Your style: swatches, font sample, button sample, corner sample (merge into the existing rules of the same name) */
.home-opt_sw > span { background-color: var(--home-sw); }
.home-opt_aa { font-family: var(--home-aa-font); font-weight: var(--home-aa-weight); }
.home-opt_btn { border-radius: var(--home-opt-radius); text-transform: var(--home-opt-case); letter-spacing: var(--home-opt-tracking); }
.home-opt_corner { border-radius: var(--home-opt-radius); }
/* designer demo: overlay strength and kind, card photos, the outline button on a photo */
.home-hero_scrim, .home-card_scrim { background: var(--home-scrim-bg, none); }
.home-card { background-image: var(--home-card-img); }
#designer .home-btn.is-photo { color: var(--home-on-photo); border-color: var(--home-on-photo); }
/* "Watch how it works" link (only drawn when the page has no how-to button; was style="align-self:center;text-decoration:underline") */
.home-howto_link { align-self: center; text-decoration: underline; }
/* ===== Landing page (runtime/setup.js on / and /studio). Goes in styles/home.css. ===== */
.chob-inline-link{align-self:center;text-decoration:underline}
@media (min-width:768px){.chob-inline-link.is-phone-only{display:none}}
.chob-shot{position:relative;overflow:hidden;aspect-ratio:16/10;width:100%}
.chob-shot_img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.chob-shot_img[hidden]{display:none}
.chob-shot_frame{visibility:hidden;position:absolute;left:0;top:0;width:1366px;height:854px;border:0;pointer-events:none;transform-origin:top left;transform:scale(var(--chob-shot-scale,1))}
.chob-shot_frame.is-ready{visibility:visible}

/* ===== Page frames (CSS rebuild 2026-11-01) ===== */
/* frames-home.css: the champs.design homepage frame classes
   consolidate (2026-11-01). One rule per class chain, element-level only, rem, variables, Webflow breakpoints. */

/* ---------- home ---------- */

.home_text {
  margin: 0;
  font-family: var(--font-family--heading);
}