@import url("./typography.css");

:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary: var(--primary-500);

  --background: #ffffff;
  --foreground: #0f172a;
  --foreground-mid: #334155;
  --foreground-subtle: #64748b;
  --secondary: #f3f4f6;
  --muted-foreground: #6b7280;
  --border: #e5e7eb;
  --success: #16a34a;
  --primary-color: var(--primary-600);
  --accent-color: var(--primary-100);
  --surface-card-bg: #ffffff;
  --surface-card-border: var(--border);
  --surface-card-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  --surface-card-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.08);
  --surface-card-radius: 1rem;
  --surface-card-padding: 1.25rem;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
}
html.preload-pending body {
  overflow: hidden;
}
body.is-loading {
  overflow: hidden;
}
html.preload-pending body > :not(.loader-overlay) {
  visibility: hidden;
}


.type-display,
.type-title,
.type-heading,
.section-title {
  color: #111827;
}

.section-intro {
  margin-top: 0.75rem;
}

img {
  display: block;
  max-width: 100%;
}

section[id] {
  scroll-margin-top: 8.5rem;
}

.bg-primary {
  background-color: var(--primary);
}
.bg-primary-50 {
  background-color: var(--primary-50);
}
.bg-primary-100 {
  background-color: var(--primary-100);
}
.bg-primary-400 {
  background-color: var(--primary-400);
}
.bg-primary-600 {
  background-color: var(--primary-600);
}
.text-primary {
  color: var(--primary);
}
.text-primary-600 {
  color: var(--primary-600);
}
.text-primary-700 {
  color: var(--primary-700);
}
.border-primary {
  border-color: var(--primary);
}
.border-primary-100 {
  border-color: var(--primary-100);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: var(--type-weight-medium);
  color: #ffffff;
  background: var(--primary-600);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.18);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.btn-primary:hover {
  background: var(--primary-700);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22);
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.btn-primary:disabled {
  cursor: wait;
  opacity: 0.8;
  box-shadow: none;
}
.btn-primary img {
  filter: brightness(0) invert(1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: var(--type-weight-medium);
  color: #111827;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
button.btn-primary {
  border: 0;
  cursor: pointer;
}
button.btn-secondary {
  cursor: pointer;
}
.btn-secondary:hover {
  background: #f9fafb;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.btn-secondary:active {
  transform: translateY(1px);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}

.section {
  padding: 4.5rem 0;
}
.section[id] {
  background: #ffffff;
}
.section[id][data-bg-cycle-index="0"] {
  background: #ffffff;
}
.section[id][data-bg-cycle-index="1"] {
  background: #f9fafb;
}
@media (min-width: 640px) {
  .section {
    padding: 5.5rem 0;
  }
}
.implant-systems-section.section {
  padding: 3.25rem 0;
}
@media (min-width: 640px) {
  .implant-systems-section.section {
    padding: 3.75rem 0;
  }
}
.implant-showcase {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 2rem;
  background:
    radial-gradient(circle at top center, rgba(191, 219, 254, 0.36), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f3f4f6 50%, #ffffff 100%);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.implant-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 55%);
  pointer-events: none;
}
.implant-showcase > * {
  position: relative;
  z-index: 1;
}
.implant-showcase__pattern {
  position: absolute;
  width: min(17rem, 38vw);
  aspect-ratio: 1;
  opacity: 0.3;
  pointer-events: none;
}
.implant-showcase__pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, rgba(148, 163, 184, 0.45) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(145deg, transparent 0 8px, rgba(148, 163, 184, 0.16) 8px 10px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 78%);
}
.implant-showcase__pattern--left {
  left: -5rem;
  top: -2.5rem;
}
.implant-showcase__pattern--right {
  right: -4.5rem;
  top: 5rem;
  transform: scaleX(-1);
}
.implant-showcase__header {
  display: grid;
  justify-items: center;
  text-align: center;
}
.implant-showcase__title {
  max-width: 14ch;
  margin-top: 1rem;
  font-size: clamp(1.625rem, 0.75vw + 1.4rem, 1.95rem);
  font-weight: var(--type-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.implant-showcase__intro {
  max-width: 44rem;
  margin-top: 1rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.implant-showcase__stage {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
  align-items: end;
}
.implant-product {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
}
.implant-product__visual {
  position: relative;
  min-width: 0;
  min-height: clamp(18rem, 34vw, 31rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.implant-product__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 72%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.24) 0%, rgba(15, 23, 42, 0) 72%);
  filter: blur(10px);
}
.implant-product__image {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: min(100%, 26rem);
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 28px rgba(15, 23, 42, 0.16));
}
.implant-product__image--neodent {
  margin-inline: auto;
}
.implant-product__image--izen {
  margin-inline: auto;
}
.implant-product__copy {
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}
.implant-product--neodent .implant-product__copy {
  text-align: left;
}
.implant-product--izen .implant-product__copy {
  text-align: left;
}
.implant-product__meta {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.implant-product__title {
  margin-top: 0.5rem;
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #0f172a;
}
.implant-product__text {
  margin-top: 0.6rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.implant-showcase__center {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 1rem;
}
.implant-showcase__center-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.42rem 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(191, 219, 254, 0.95);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.implant-showcase__center-title {
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #111827;
}
.implant-showcase__center-copy {
  max-width: 18rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.implant-showcase__center-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.implant-showcase__chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.5rem 0.8rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #334155;
}
.implant-showcase__support {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.implant-support-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.4rem;
}
.implant-support-card--accent {
  border-color: rgba(191, 219, 254, 0.96);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.4), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.implant-support-card__eyebrow {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.implant-support-card__title {
  margin-top: 0.55rem;
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #111827;
}
.implant-support-list {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.implant-support-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.implant-support-list__item img {
  margin-top: 0.2rem;
}
.implant-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.implant-showcase__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--primary-700);
  font-weight: var(--type-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, opacity 160ms ease;
}
.implant-showcase__link:hover {
  color: var(--primary-600);
}
.implant-showcase__link:active {
  opacity: 0.85;
}
.implant-showcase__link:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
  border-radius: 0.5rem;
}
@media (min-width: 900px) {
  .implant-showcase__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
  }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .implant-showcase__stage {
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}
@media (max-width: 899.98px) {
  .implant-showcase__stage {
    justify-items: center;
  }
  .implant-product__visual {
    min-height: clamp(16rem, 60vw, 24rem);
  }
  .implant-showcase__center {
    order: 3;
    padding-top: 0.25rem;
  }
  .implant-showcase__actions > * {
    flex: 1 1 14rem;
  }
}
@media (max-width: 639.98px) {
  .implant-showcase {
    border-radius: 1.5rem;
    padding: 1.2rem;
  }
  .implant-showcase__title {
    max-width: 11ch;
  }
  .implant-showcase__pattern {
    width: 10rem;
    opacity: 0.2;
  }
  .implant-showcase__pattern--left {
    left: -3.5rem;
    top: -2rem;
  }
  .implant-showcase__pattern--right {
    right: -3.5rem;
    top: 7rem;
  }
  .implant-product__copy,
  .implant-product--neodent .implant-product__copy,
  .implant-product--izen .implant-product__copy {
    text-align: center;
  }
  .implant-showcase__actions {
    justify-content: center;
  }
  .implant-support-card {
    padding: 1.2rem;
  }
}

.section-hero {
  position: relative;
  background-color: #ffffff;
  background-image: image-set(
    url("../assets/hero/hero-1024.jpg") 1x,
    url("../assets/hero/hero-1920.jpg") 2x
  );
  background-size: cover;
  background-position: 78% center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section-hero--veneers {
  background-image: image-set(
    url("../assets/hero/veneers-hero.png") 1x,
    url("../assets/hero/veneers-hero.png") 2x
  );
}
.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.9) 55%,
    rgba(255, 255, 255, 0.08) 82%,
    rgba(255, 255, 255, 0) 100%
  );
}
.hero-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.hero-copy {
  display: flex;
  flex: 1 1 22rem;
  flex-direction: column;
  min-width: 0;
}
.hero-eyebrow {
  width: fit-content;
  max-width: 100%;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.hero-actions > * {
  flex: 1 1 15rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem 1.25rem;
}
.hero-meta > * {
  flex: 1 1 11rem;
  min-width: 0;
}
.hero-note {
  width: 100%;
}
.hero-media {
  position: relative;
  display: block;
  flex: 1 1 18rem;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.92);
  background: #e5eefc;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
  min-width: 0;
  align-self: stretch;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.16) 100%);
  pointer-events: none;
}
.hero-media-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center 32%;
}
.hero-media-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  color: #0f172a;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.01em;
}
@media (max-width: 1023.98px) {
  .section-hero {
    background-image: none;
    background-position: center;
  }
  .section-hero::before {
    background: radial-gradient(circle at top right, rgba(219, 234, 254, 0.45) 0%, rgba(255, 255, 255, 0) 42%);
  }
  .hero-shell {
    align-items: flex-start;
  }
  .hero-copy,
  .hero-media {
    flex: 1 1 100%;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-copy,
  .hero-media {
    flex-basis: 100%;
  }
  .hero-media-image {
    aspect-ratio: 16 / 9.8;
    object-position: center 26%;
  }
}
.section-hero .hero-content {
  max-width: 42rem;
}
@media (min-width: 640px) {
  .section-hero .hero-content {
    max-width: 44rem;
  }
}
@media (min-width: 1024px) {
  .hero-shell {
    display: block;
  }
  .section-hero .hero-content {
    max-width: 40rem;
  }
  .hero-actions {
    justify-content: flex-start;
  }
  .hero-actions > * {
    flex: 0 1 auto;
  }
  .hero-meta {
    justify-content: flex-start;
  }
  .hero-meta > * {
    flex: 0 1 auto;
  }
  .hero-media {
    display: none;
  }
}
@media (max-width: 1023.98px) {
  .section-hero .hero-content {
    max-width: none;
  }
  .hero-actions > *,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 639.98px) {
  .hero-shell {
    gap: 1.25rem;
  }
  .hero-eyebrow {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-actions > * {
    flex-basis: 100%;
  }
  .hero-meta {
    justify-content: flex-start;
  }
  .hero-meta > * {
    flex-basis: 100%;
  }
  .hero-media-image {
    aspect-ratio: 4 / 3.9;
    object-position: center 28%;
  }
  .hero-media-badge {
    left: 0.875rem;
    bottom: 0.875rem;
    padding: 0.42rem 0.68rem;
    font-size: var(--type-body-sm-size);
  }
}
.section-hero > * {
  position: relative;
}

.site-header {
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
}
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.9rem 0;
}
.header-bottom-row {
  border-top: 1px solid rgba(229, 231, 235, 0.96);
}
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  text-decoration: none;
}
.header-brand-logo {
  display: block;
  width: auto;
  height: 3rem;
  flex-shrink: 0;
}
.header-brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.header-brand-location {
  color: #475569;
}
.footer-brand-logo {
  display: block;
  width: auto;
  height: 3rem;
}
.site-footer {
  background: #ffffff;
  color: #0f172a;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}
.site-footer__inner {
  padding-block: 2.5rem 1rem;
}
.site-footer__main {
  display: grid;
  gap: 2rem 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.site-footer__brand,
.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  min-width: 0;
}
.site-footer__brand {
  gap: 1rem;
}
.site-footer__column {
  gap: 0.9rem;
}
.site-footer__title {
  margin: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-body-sm-line-height);
  color: #0f172a;
  letter-spacing: 0.01em;
}
.site-footer__description,
.site-footer__meta,
.site-footer__bottom-copy {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #475569;
}
.site-footer__description {
  max-width: 23rem;
}
.site-footer__contact {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  font-style: normal;
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  color: #334155;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, transform 160ms ease, text-decoration-color 160ms ease, opacity 160ms ease;
}
.site-footer__link:hover {
  color: var(--primary-700);
  text-decoration: underline;
  transform: translateX(2px);
}
.site-footer__link:active {
  opacity: 0.82;
  transform: translateX(1px);
}
.site-footer__link:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 4px;
  border-radius: 0.55rem;
}
.site-footer__link--icon,
.site-footer__meta--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.site-footer__link-list {
  display: grid;
  gap: 0.7rem;
}
.site-footer__hours {
  display: grid;
  gap: 0.65rem;
}
.site-footer__hours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #475569;
}
.site-footer__hours-row span:last-child {
  justify-self: end;
  font-weight: var(--type-weight-medium);
  color: #0f172a;
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.1rem;
}
.site-footer__bottom-copy {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}
.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.header-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}
.header-top-nav {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.header-cta {
  min-height: 2.875rem;
  justify-content: center;
  white-space: nowrap;
}
.header-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #0f172a;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-medium);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  white-space: nowrap;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.header-phone-link:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.header-phone-link:active {
  transform: translateY(1px);
}
.header-phone-link:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.header-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.header-menu-toggle:hover {
  background: #f8fafc;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.header-menu-toggle:active {
  transform: translateY(1px);
}
.header-menu-toggle:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  padding: 0.8rem 0;
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.25rem;
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  color: #0f172a;
  opacity: 1;
  white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: -0.05rem;
  height: 2px;
  border-radius: 9999px;
  background: var(--primary-600);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}
.nav-link:hover {
  color: var(--primary-700);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}
.nav-link:active {
  opacity: 0.75;
}
.nav-link:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 4px;
  border-radius: 0.5rem;
}
.mobile-nav-shell {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  will-change: max-height, opacity, transform;
}
.mobile-nav-shell.is-open {
  max-height: 80vh;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav-card {
  transform: translateZ(0);
}
.sticky-mobile-only {
  display: none;
}
.mobile-nav-link {
  display: block;
  padding: 0.75rem 0.75rem;
  border-radius: 0.75rem;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-medium);
  color: #111827;
  background: #ffffff;
  border: 1px solid #f3f4f6;
  transition: background-color 150ms ease;
}
.mobile-nav-link:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.mobile-nav-link:active {
  transform: translateY(1px);
}
.mobile-nav-link:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
@media (min-width: 320px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  section[id] {
    scroll-margin-top: 7rem;
  }
  .header-brand-logo,
  .footer-brand-logo {
    height: 2.5rem;
  }
  .site-footer__hours-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }
  .site-footer__bottom {
    align-items: flex-start;
  }
  .header-top-row {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.6rem 0;
  }
  .header-brand {
    flex: 0 1 auto;
  }
  .header-top-actions {
    width: auto;
    justify-content: flex-end;
    gap: 0.625rem;
  }
  .header-cta {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.9rem;
    font-size: var(--type-size-label);
  }
  .header-phone-link {
    flex: 0 0 auto;
    padding: 0.7rem 0.85rem;
  }
  .header-phone-text {
    display: none;
  }
}

@media (max-width: 768px) {
  .header-bottom-row {
    display: none;
  }
  .header-top-nav {
    display: none;
  }
  .header-menu-toggle {
    display: inline-flex;
  }
  .header-cta {
    display: none;
  }
  .header-top-actions {
    justify-content: flex-end;
  }
  .sticky-mobile-only {
    display: block;
  }
}

@media (min-width: 768px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 2.25rem 3rem;
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
  }
  .site-footer__bottom-copy {
    max-width: 38rem;
  }
  .header-top-row {
    padding: 1rem 0;
  }
  .header-brand {
    flex: 0 1 auto;
  }
  .header-top-actions {
    flex: 0 0 auto;
  }
}

@media (min-width: 769px) {
  .header-bottom-row {
    display: block;
  }
  .header-menu-toggle,
  .mobile-nav-shell,
  .sticky-mobile-only {
    display: none !important;
  }
}

a:not(.btn-primary):not(.btn-secondary):focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
  border-radius: 0.5rem;
}
a:not(.btn-primary):not(.btn-secondary):active {
  opacity: 0.85;
}

.input {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
  font-size: var(--type-body-size);
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.28);
}
textarea.input {
  min-height: 8rem;
}
select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) calc(50% - 0.12rem),
    calc(100% - 0.72rem) calc(50% - 0.12rem);
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

.form-feedback {
  min-height: 1.5rem;
}
.form-feedback.is-success {
  color: var(--success);
}
.form-feedback.is-error {
  color: #b91c1c;
}

body.candidate-quiz-open {
  overflow: hidden;
}
body.mobile-nav-open {
  overflow: hidden;
}

.card {
  min-width: 0;
  border-radius: var(--surface-card-radius);
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card-bg);
  padding: var(--surface-card-padding);
  box-shadow: var(--surface-card-shadow);
}

.tag {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.45rem;
  border-radius: 9999px;
  padding: 0.42rem 0.82rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: normal;
}
.tag-sm {
  padding: 0.36rem 0.72rem;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
}
.tag-neutral {
  border-color: var(--border);
  background: #f8fafc;
  color: #475569;
}
.tag-primary {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}
.tag-solid {
  border-color: var(--primary-600);
  background: var(--primary-600);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}
.tag img {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.tag-solid img {
  filter: brightness(0) invert(1);
}
.pricing-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  min-height: 100%;
  border-radius: 1.75rem;
  padding: 1.5rem;
  box-shadow: var(--surface-card-shadow);
}
.pricing-card--featured {
  border-width: 2px;
  border-color: var(--primary-200);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.14);
}
.pricing-card-top,
.pricing-card-head,
.pricing-card-body {
  display: grid;
  align-content: start;
}
.pricing-card-top {
  gap: 1rem;
}
.pricing-card-head {
  gap: 0.75rem;
}
.pricing-card-badge-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pricing-card-badge-row .card-icon {
  margin-bottom: 0;
}
.pricing-card-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-title-line-height);
  letter-spacing: var(--type-title-tracking);
  color: #111827;
}
.pricing-card-description {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #6b7280;
}
.pricing-card-price {
  display: grid;
  gap: 0.3rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: #f8fafc;
  padding: 1.25rem;
}
.pricing-card--featured .pricing-card-price {
  border-color: var(--primary-100);
  background: var(--primary-50);
}
.pricing-card-price-label {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #6b7280;
}
.pricing-card--featured .pricing-card-price-label {
  color: var(--primary-700);
}
.pricing-card-price-value {
  font-size: var(--type-title-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--primary-700);
}
.pricing-card--featured .pricing-card-price-value {
  color: #111827;
}
.pricing-card-price-copy {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #6b7280;
}
.pricing-card--featured .pricing-card-price-copy {
  color: #475569;
}
.pricing-card-body {
  gap: 0.8rem;
  min-height: 0;
}
.pricing-card-section-title {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #111827;
}
.pricing-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: flex-start;
  min-width: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.pricing-list-item img {
  margin-top: 0.15rem;
}
.pricing-card-footer {
  margin-top: auto;
}
.pricing-card-cta {
  width: 100%;
  justify-content: center;
  min-height: 3.5rem;
}
.card > :last-child {
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .pricing-card {
    gap: 1rem;
    padding: 1.25rem;
  }
  .pricing-card-badge-row {
    flex-wrap: wrap;
  }
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.9rem;
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  color: var(--primary-700);
  margin-bottom: 0.8rem;
}

.candidate-quiz-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.candidate-quiz-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(10px);
}
.candidate-quiz-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 44rem);
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  border-radius: 1.5rem;
  border: 1px solid rgba(219, 234, 254, 0.9);
  background:
    radial-gradient(circle at top right, rgba(219, 234, 254, 0.72), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}
.candidate-quiz-shell {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
}
.candidate-quiz-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.candidate-quiz-close svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  pointer-events: none;
}
.candidate-quiz-close:hover {
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}
.candidate-quiz-close:active {
  transform: translateY(1px);
}
.candidate-quiz-close:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.candidate-quiz-header {
  display: grid;
  gap: 0.6rem;
  padding-right: 3rem;
}
.candidate-quiz-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
}
.candidate-quiz-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.1;
  color: #0f172a;
}
.candidate-quiz-description {
  max-width: 34rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.candidate-quiz-progress {
  display: grid;
  gap: 0.55rem;
}
.candidate-quiz-progress-bar {
  overflow: hidden;
  width: 100%;
  height: 0.55rem;
  border-radius: 9999px;
  background: #dbeafe;
}
.candidate-quiz-progress-fill {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  transition: width 220ms ease;
}
.candidate-quiz-progress-copy {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  color: #475569;
}
.candidate-quiz-body {
  min-height: 22rem;
}
.candidate-quiz-question {
  display: grid;
  gap: 1.25rem;
}
.candidate-quiz-question-header {
  display: grid;
  gap: 0.4rem;
}
.candidate-quiz-question-title {
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.2;
  color: #111827;
}
.candidate-quiz-question-copy {
  font-size: 0.98rem;
  line-height: var(--type-body-line-height);
  color: #64748b;
}
.candidate-quiz-options {
  display: grid;
  gap: 0.85rem;
}
.candidate-quiz-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  border-radius: 1.1rem;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  padding: 1rem 1.05rem;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}
.candidate-quiz-option:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.1);
}
.candidate-quiz-option:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.candidate-quiz-option.is-selected {
  border-color: #60a5fa;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
}
.candidate-quiz-option-indicator {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  border: 2px solid #94a3b8;
  box-shadow: inset 0 0 0 0 #2563eb;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.candidate-quiz-option.is-selected .candidate-quiz-option-indicator {
  border-color: #2563eb;
  box-shadow: inset 0 0 0 0.28rem #2563eb;
}
.candidate-quiz-option-label {
  display: block;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.4;
  color: #0f172a;
}
.candidate-quiz-option-description {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #64748b;
}
.candidate-quiz-result {
  display: grid;
  gap: 1rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(191, 219, 254, 0.95);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.48), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}
.candidate-quiz-result-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 9999px;
  padding: 0.38rem 0.8rem;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
}
.candidate-quiz-result-title {
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #0f172a;
}
.candidate-quiz-result-copy {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #475569;
}
.candidate-quiz-result-points {
  display: grid;
  gap: 0.75rem;
}
.candidate-quiz-result-point {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 0.7rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.9rem 1rem;
  border: 1px solid rgba(219, 234, 254, 0.95);
}
.candidate-quiz-result-point img {
  margin-top: 0.15rem;
}
.candidate-quiz-result-point span {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #334155;
}
.candidate-quiz-result-actions,
.candidate-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.candidate-quiz-result-actions > *,
.candidate-quiz-actions > * {
  flex: 1 1 12rem;
}
.candidate-quiz-actions {
  justify-content: space-between;
}

.quiz-cta-stack {
  display: grid;
  gap: 0.6rem;
  flex: 1 1 22rem;
  min-width: 0;
}
.quiz-cta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}
.quiz-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 9999px;
  padding: 0.35rem 0.7rem;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(37, 99, 235, 0.16));
  color: #1d4ed8;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.quiz-cta-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #0ea5e9;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35);
  animation: quiz-cta-pulse 1.8s ease-out infinite;
}
.quiz-cta-meta-copy {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #475569;
}
.quiz-cta-btn {
  position: relative;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 5.5rem;
  padding: 1rem 1.05rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.24), transparent 28%),
    linear-gradient(135deg, #0ea5e9 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.24);
  overflow: hidden;
}
.quiz-cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.14) 46%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 420ms ease;
}
.quiz-cta-btn:hover {
  background:
    radial-gradient(circle at top left, rgba(125, 211, 252, 0.28), transparent 28%),
    linear-gradient(135deg, #0284c7 0%, #2563eb 58%, #1d4ed8 100%);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.28);
  transform: translateY(-2px);
}
.quiz-cta-btn:hover::before {
  transform: translateX(120%);
}
.quiz-cta-main,
.quiz-cta-trailing,
.quiz-cta-copy {
  position: relative;
  z-index: 1;
}
.quiz-cta-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
}
.quiz-cta-icon-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  margin: 0;
  transform: none;
}
.quiz-cta-icon-shell::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.quiz-cta-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}
.quiz-cta-title {
  display: block;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.4;
  color: #ffffff;
}
.quiz-cta-subtitle {
  display: block;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-body-sm-line-height);
  color: rgba(255, 255, 255, 0.84);
}
.quiz-cta-trailing {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  color: #ffffff;
  transform: none;
}
.quiz-cta-trailing-copy {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.quiz-cta-trailing img {
  transition: transform 180ms ease;
}
.quiz-cta-btn:hover .quiz-cta-trailing img,
.quiz-cta-btn:focus-visible .quiz-cta-trailing img {
  transform: translateX(3px);
}
.quiz-cta-footnote {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #64748b;
}

@keyframes quiz-cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35);
  }
  70% {
    box-shadow: 0 0 0 0.45rem rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: #ffffff;
  padding: 0.75rem 1rem;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #111827;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

[data-trust-ticker-viewport] {
  overflow: hidden;
}

[data-trust-ticker] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: max-content;
  animation: trust-ticker var(--trust-ticker-duration, 28s) linear infinite;
  will-change: transform;
}

[data-trust-ticker-viewport]:hover [data-trust-ticker],
[data-trust-ticker-viewport]:focus-within [data-trust-ticker] {
  animation-play-state: paused;
}

@keyframes trust-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--trust-ticker-distance, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-trust-ticker] {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
  }
}

.hero-card {
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.timeline-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.timeline-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  min-width: 0;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  height: 100%;
}
.timeline-media {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #eef2ff;
}
.timeline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.timeline-image-top {
  object-position: center top;
}
.timeline-step {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.9rem;
  background: var(--primary-600);
  color: #ffffff;
  font-weight: var(--type-weight-medium);
  font-size: var(--type-body-size);
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.24);
}
.timeline-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}
.timeline-kicker {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .timeline-media {
    height: 220px;
  }
}

@media (min-width: 768px) {
  .timeline-card {
    flex-basis: calc(50% - 0.75rem);
  }
}

@media (min-width: 1280px) {
  .timeline-card {
    flex-basis: calc(33.333% - 1rem);
  }
}

.accordion-item {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.4;
  color: #111827;
  background: #ffffff;
  transition: background-color 150ms ease;
  text-align: left;
}
.accordion-trigger:hover {
  background: #f9fafb;
}
.accordion-trigger:active {
  background: #f3f4f6;
}
.accordion-trigger:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: -2px;
}

button[data-mobile-nav-trigger]:active {
  transform: translateY(1px);
}
button[data-mobile-nav-trigger]:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.accordion-panel {
  padding: 0 1.2rem 1.1rem 1.2rem;
}
.accordion-panel[hidden] {
  display: none;
}

.comparison-table-shell {
  width: 100%;
}
.comparison-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.comparison-table-scroll::-webkit-scrollbar {
  height: 10px;
}
.comparison-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.comparison-table-grid {
  min-width: 44rem;
}
.comparison-row {
  background: #ffffff;
}
.comparison-row[data-bg-cycle-index="0"] {
  background: #f8fbff;
}
.comparison-row[data-bg-cycle-index="1"] {
  background: #ffffff;
}
.before-after-showcase {
  display: block;
}
.reviews-showcase {
  display: block;
}
.switcher {
  display: grid;
  gap: 0.75rem;
}
.switcher-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
}
.switcher-toolbar > :first-child {
  min-width: 0;
}
.switcher-label {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.switcher-current {
  margin-top: 0.25rem;
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: #111827;
}
.switcher-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.switcher-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.switcher-count {
  min-width: 3.25rem;
  margin-right: 0.5rem;
  text-align: right;
  font-size: 0.875rem;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  color: #111827;
}
.switcher-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.switcher-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  border: 1px solid var(--primary-100);
  background: #d1d5db;
  transition: transform 180ms ease, background-color 180ms ease, width 180ms ease;
}
.switcher-dot:hover {
  background: #9ca3af;
}
.switcher-dot:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.switcher-dot.is-active {
  width: 1.7rem;
  background: var(--primary-600);
}
.reviews-main {
  display: grid;
  gap: 1.25rem;
}
.reviews-stage-shell,
.reviews-details {
  border-radius: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.reviews-stage-shell {
  padding: clamp(0.75rem, 1.6vw, 1rem);
  display: flex;
  align-items: stretch;
}
.reviews-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 16 / 9.5;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #f59e0b 0%, #f8fafc 52%, #f97316 100%);
}
.reviews-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.2));
  pointer-events: none;
}
.reviews-stage-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 2;
}
.reviews-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.42rem 0.78rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #111827;
}
.reviews-chip-muted {
  color: var(--primary-700);
}
.reviews-video-frame-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.reviews-video-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  background: #0f172a;
}
.reviews-image-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  background: #f8fafc;
}
.reviews-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.reviews-copy {
  min-width: 0;
}
.reviews-eyebrow {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.reviews-title {
  margin-top: 0.45rem;
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #111827;
}
.reviews-summary {
  margin-top: 0.75rem;
  max-width: 42rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #4b5563;
}
.reviews-quote-card {
  margin: 0;
  border-radius: 1.15rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 1rem 1.1rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.reviews-quote-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.reviews-quote-author-group {
  min-width: 0;
}
.reviews-quote-author {
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.4;
  color: #111827;
}
.reviews-quote-date {
  margin-top: 0.2rem;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: #6b7280;
}
.reviews-rating {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.12);
  padding: 0.42rem 0.75rem;
  color: #92400e;
}
.reviews-rating-stars {
  font-size: var(--type-size-label);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #f59e0b;
}
.reviews-quote-text {
  margin: 0.9rem 0 0;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-body-line-height);
  color: #111827;
}
.reviews-points {
  display: grid;
  gap: 0.65rem;
}
.reviews-point-text {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #4b5563;
}
.reviews-point-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-weight: var(--type-weight-semibold);
  color: #111827;
}
.reviews-point-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  opacity: 0.82;
}
.reviews-point-copy {
  color: inherit;
}
.before-after-main {
  display: grid;
  gap: 1.25rem;
}
.before-after-stage-shell,
.before-after-details {
  border-radius: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.96);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.before-after-stage-shell {
  padding: clamp(0.75rem, 1.6vw, 1rem);
  display: flex;
  align-items: stretch;
  align-self: start;
}
.before-after-stage {
  --before-after-position: 50%;
  --before-after-accent-from: #f59e0b;
  --before-after-accent-to: #f97316;
  --before-after-aspect-ratio: 16 / 9.5;
  --before-after-object-position-before: 50% 50%;
  --before-after-object-position-after: 50% 50%;
  --before-after-object-fit: cover;
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: var(--before-after-aspect-ratio);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(135deg, var(--before-after-accent-from) 0%, #f8fafc 52%, var(--before-after-accent-to) 100%);
  touch-action: none;
  user-select: none;
}
.before-after-stage.is-dragging {
  cursor: ew-resize;
}
.before-after-stage.is-loading {
  cursor: progress;
}
.before-after-stage.is-dragging .before-after-overlay,
.before-after-stage.is-dragging .before-after-divider,
.before-after-stage.is-dragging .before-after-handle {
  transition: none;
}
.before-after-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--before-after-object-fit);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.before-after-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--before-after-position)) 0 0);
  transition: clip-path 180ms ease;
}
.before-after-image-base {
  object-position: var(--before-after-object-position-after);
}
.before-after-image-overlay {
  object-position: var(--before-after-object-position-before);
}
.before-after-divider {
  position: absolute;
  inset: 0 auto 0 var(--before-after-position);
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: left 180ms ease;
}
.before-after-handle {
  position: absolute;
  left: var(--before-after-position);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  transition: left 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.before-after-handle:hover {
  transform: translate(-50%, -50%) scale(1.02);
}
.before-after-stage.is-loading .before-after-handle {
  pointer-events: none;
  opacity: 0.8;
}
.before-after-handle:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.before-after-handle-grip {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
}
.before-after-handle-grip::before,
.before-after-handle-grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid #111827;
  border-right: 2px solid #111827;
}
.before-after-handle-grip::before {
  left: 0.05rem;
  transform: translateY(-50%) rotate(-135deg);
}
.before-after-handle-grip::after {
  right: 0.05rem;
  transform: translateY(-50%) rotate(45deg);
}
.before-after-stage-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 2;
}
.before-after-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.42rem 0.78rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  color: #111827;
}
.before-after-chip-muted {
  color: var(--primary-700);
}
.before-after-stage-label {
  position: absolute;
  bottom: 1rem;
  z-index: 2;
  border-radius: 9999px;
  padding: 0.42rem 0.78rem;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.02em;
}
.before-after-stage-label-left {
  left: 1rem;
}
.before-after-stage-label-right {
  right: 1rem;
}
.before-after-status {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  border-radius: 9999px;
  padding: 0.65rem 0.95rem;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  text-align: center;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}
.before-after-status-copy {
  display: block;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-body-sm-line-height);
}
.before-after-stage[data-image-fit-mode="contain"] {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #0f172a, #1e293b);
}
.before-after-stage[data-image-fit-mode="contain"] .before-after-image {
  object-fit: contain;
  background: rgba(15, 23, 42, 0.26);
}
.before-after-details {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}
.before-after-copy {
  min-width: 0;
}
.before-after-eyebrow {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.before-after-title {
  margin-top: 0.45rem;
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
  color: #111827;
}
.before-after-summary {
  margin-top: 0.75rem;
  max-width: 42rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  color: #4b5563;
}
.before-after-points {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.before-after-point-card {
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 1rem;
}
.before-after-point-label {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--type-tracking-label);
  text-transform: uppercase;
  color: var(--primary-700);
}
.before-after-point-copy {
  margin-top: 0.45rem;
  font-size: var(--type-body-size);
  font-weight: var(--type-weight-semibold);
  line-height: 1.5;
  color: #111827;
}
@media (min-width: 768px) {
  .switcher-dots {
    justify-content: flex-end;
  }
  .reviews-main {
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
    align-items: stretch;
  }
  .reviews-stage-shell {
    grid-column: 1 / 2;
    height: 100%;
  }
  .reviews-details {
    grid-column: 2 / 3;
    align-self: stretch;
    min-height: 100%;
  }
  .before-after-main {
    grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
    align-items: start;
  }
  .before-after-stage-shell {
    grid-column: 1 / 2;
    height: auto;
  }
  .before-after-details {
    grid-column: 2 / 3;
    justify-self: stretch;
    align-self: start;
    min-height: auto;
  }
}
@media (min-width: 1024px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem 3.25rem;
  }
  .site-footer__brand {
    grid-column: auto;
  }
}
@media (min-width: 1100px) {
  .header-nav {
    gap: 0.9rem;
  }
  .reviews-main {
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.82fr);
    gap: 1.5rem;
  }
  .reviews-stage {
    min-height: clamp(360px, 36vw, 520px);
  }
  .before-after-main {
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.82fr);
    gap: 1.5rem;
  }
  .before-after-stage {
    min-height: clamp(240px, 24vw, 320px);
  }
}
@media (max-width: 767.98px) {
  .quiz-cta-stack {
    width: 100%;
  }
  .quiz-cta-btn {
    align-items: flex-start;
    min-height: 0;
    padding: 0.95rem;
  }
  .quiz-cta-main {
    align-items: flex-start;
  }
  .quiz-cta-trailing {
    align-self: flex-end;
  }
  .quiz-cta-trailing-copy {
    display: none;
  }
  .quiz-cta-title {
    font-size: 0.98rem;
  }
  .quiz-cta-subtitle {
    font-size: var(--type-body-sm-size);
  }
  .candidate-quiz-modal {
    padding: 0.75rem;
  }
  .candidate-quiz-dialog {
    max-height: calc(100vh - 1.5rem);
    border-radius: 1.2rem;
  }
  .candidate-quiz-shell {
    gap: 1.1rem;
    padding: 1rem;
  }
  .candidate-quiz-header {
    padding-right: 2.6rem;
  }
  .candidate-quiz-body {
    min-height: 20rem;
  }
  .candidate-quiz-option {
    padding: 0.95rem;
  }
  .candidate-quiz-result-actions > *,
  .candidate-quiz-actions > * {
    flex-basis: 100%;
  }
  .switcher-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .switcher-nav {
    justify-content: space-between;
  }
  .switcher-count {
    margin-right: 0;
    text-align: left;
  }
  .reviews-stage,
  .reviews-video-frame,
  .reviews-image-frame {
    min-height: 260px;
    aspect-ratio: 4 / 5;
  }
  .reviews-quote-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews-details {
    min-height: 0;
  }
  .before-after-stage {
    min-height: 200px;
    aspect-ratio: var(--before-after-aspect-ratio);
  }
  .before-after-handle {
    width: 3rem;
    height: 3rem;
  }
  .before-after-points {
    grid-template-columns: minmax(0, 1fr);
  }
  .before-after-details {
    min-height: 0;
  }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .reviews-stage,
  .reviews-video-frame,
  .reviews-image-frame {
    min-height: clamp(340px, 44vw, 460px);
  }
  .before-after-stage {
    min-height: clamp(220px, 26vw, 300px);
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.icon-btn:hover {
  background: #f9fafb;
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.icon-btn:active {
  transform: translateY(1px);
  background: #f3f4f6;
}
.icon-btn:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: 3px;
}
.icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}
.icon-btn:disabled:hover {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: none;
}
.icon-btn img {
  pointer-events: none;
}

.team-switcher {
  display: grid;
  gap: 1rem;
}
.section#team {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
#team .max-w-3xl > p {
  margin-top: 0.75rem;
  max-width: 38rem;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}
#team .team-switcher {
  margin-top: 1.5rem;
  gap: 1rem;
}

.team-state-card {
  border-radius: 1rem;
  border: 1px solid var(--surface-card-border);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 1.5rem;
  box-shadow: var(--surface-card-shadow);
}
.team-loading {
  display: grid;
  gap: 1rem;
}
.team-loading-pulse {
  border-radius: 1rem;
  min-height: clamp(12rem, 30vw, 16rem);
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: team-pulse 1.6s linear infinite;
}
.team-loading-lines {
  display: grid;
  gap: 0.5rem;
}
.team-loading-lines span {
  display: block;
  height: 0.95rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  animation: team-pulse 1.6s linear infinite;
}
.team-loading-lines span:nth-child(1) {
  width: min(18rem, 85%);
}
.team-loading-lines span:nth-child(2) {
  width: min(26rem, 100%);
}
.team-loading-lines span:nth-child(3) {
  width: min(22rem, 92%);
}

.team-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.team-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  min-width: 0;
}
.team-layout {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}
.team-overview {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
  grid-auto-rows: max-content;
}
.team-panel.is-entering {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.team-panel.is-entering.from-next {
  animation-name: team-enter-next;
}
.team-panel.is-entering.from-prev {
  animation-name: team-enter-prev;
}

.team-profile {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  height: fit-content;
  min-width: 0;
}
.team-profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.team-profile-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  border-radius: 9999px;
  min-height: 2rem;
  padding: 0.5rem 1rem;
  background: var(--accent-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-100);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.02em;
  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
}
.team-profile-name {
  min-width: 0;
  line-height: 1.25;
}
.team-profile-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.team-profile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.35rem;
  row-gap: 0.2rem;
  min-width: 0;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-body-sm-line-height);
  color: #4b5563;
}
.team-profile-role,
.team-profile-location {
  min-width: 0;
  white-space: nowrap;
}
.team-profile-role::after {
  content: ",";
  margin-right: 0.35rem;
}
.team-profile-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.team-metric-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  border-radius: 1rem;
  border: 1px solid rgba(191, 219, 254, 0.9);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.42), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.95rem 1rem;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
}
.team-metric-value {
  flex-shrink: 0;
  font-size: var(--type-title-size);
  font-weight: var(--type-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary-700);
}
.team-metric-copy {
  min-width: 0;
}
.team-metric-label {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-body-sm-line-height);
  color: #111827;
}
.team-metric-caption {
  margin-top: 0.18rem;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-body-sm-line-height);
  color: #64748b;
}
.team-highlights {
  display: grid;
  gap: 0.5rem;
  line-height: 1.5;
}
.team-highlight-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}
.team-details {
  min-height: 0;
  align-self: start;
  padding: 1.5rem;
  display: flex;
  height: fit-content;
  min-width: 0;
}
.team-features-grid,
.team-details [data-team-features] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 1rem;
  align-items: stretch;
}
.team-feature-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  transition: transform 300ms ease-in-out, border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
.team-feature-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-body-sm-line-height);
  overflow-wrap: anywhere;
  color: #111827;
}
.team-feature-copy {
  margin-top: 0.5rem;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  overflow-wrap: anywhere;
  color: #4b5563;
}
.team-gallery {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
  min-width: 0;
  align-content: stretch;
  overflow: hidden;
}
.team-gallery-stage {
  position: relative;
  --team-photo-focus-x: 50%;
  --team-photo-focus-y: 18%;
  --team-photo-focus-shift-y: 0%;
  --team-photo-min-height: 18rem;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--primary-100);
  background: linear-gradient(135deg, var(--accent-color) 0%, #ffffff 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
}
.team-gallery-stage.is-loading {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
.team-gallery-stage-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--team-photo-min-height);
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: var(--team-photo-focus-x) calc(var(--team-photo-focus-y) + var(--team-photo-focus-shift-y));
  transform-origin: center top;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, filter 300ms ease-in-out;
}
.team-gallery-stage.is-loading .team-gallery-stage-photo {
  opacity: 0.45;
  transform: scale(1.03);
  filter: saturate(0.82);
}
.team-gallery-stage-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.82) 100%);
  color: #ffffff;
}
.team-gallery-stage-name {
  font-size: var(--type-heading-size);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
}
.team-gallery-stage-role {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
  color: rgba(255, 255, 255, 0.84);
}
.team-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.team-thumb {
  position: relative;
  display: grid;
  padding: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.03);
  cursor: pointer;
  text-align: left;
  transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out, transform 300ms ease-in-out, background-color 300ms ease-in-out;
}
.team-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--primary-100);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.team-thumb:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
.team-thumb.active {
  border-color: var(--primary-color);
  background: #f8fbff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
  transform: translateY(-2px);
  animation: team-thumb-activate 300ms ease-in-out;
}
.team-thumb-media {
  position: relative;
  --team-photo-focus-x: 50%;
  --team-photo-focus-y: 18%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-color) 0%, #ffffff 100%);
}
.team-thumb-image {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  object-position: var(--team-photo-focus-x) var(--team-photo-focus-y);
  transition: transform 300ms ease-in-out, filter 300ms ease-in-out, opacity 300ms ease-in-out;
}
.team-thumb.active .team-thumb-image {
  transform: scale(1.04);
}

@keyframes team-pulse {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes team-enter-next {
  from {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes team-enter-prev {
  from {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes team-thumb-activate {
  from {
    transform: translateY(0) scale(0.98);
  }
  to {
    transform: translateY(-2px) scale(1);
  }
}

@media (min-width: 320px) {
  .team-gallery-stage {
    --team-photo-focus-shift-y: 0%;
    --team-photo-min-height: clamp(18rem, 88vw, 24rem);
  }
  .team-gallery-stage-photo {
    aspect-ratio: 4 / 4.05;
  }
}

@media (min-width: 768px) {
  .team-gallery-stage {
    --team-photo-focus-shift-y: -2%;
    --team-photo-min-height: clamp(24rem, 62vw, 32rem);
  }
  .team-gallery-stage-photo {
    aspect-ratio: 4 / 4.45;
  }
}

@media (min-width: 1024px) {
  .team-gallery-stage {
    --team-photo-focus-shift-y: -4%;
    --team-photo-min-height: 100%;
  }
  .team-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }
  .team-gallery-stage-photo {
    min-height: 0;
    aspect-ratio: auto;
  }
  .team-thumbnail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .team-features-grid,
  .team-details [data-team-features] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}

@media (min-width: 1920px) {
  .team-gallery-stage {
    --team-photo-focus-shift-y: -6%;
  }
}

@media (max-width: 1023.98px) {
  .comparison-table-grid {
    min-width: 40rem;
  }
  .team-gallery-stage-photo {
    max-height: min(32rem, 78vh);
  }
}

@media (max-width: 767.98px) {
  .team-profile-header {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .team-profile-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  body {
    padding-bottom: 5.75rem;
  }
  .comparison-table-scroll {
    padding-bottom: 0.35rem;
  }
  .comparison-table-grid {
    min-width: 36rem;
  }
  .case-media {
    height: auto;
    min-height: 190px;
  }
  .case-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .team-error {
    flex-direction: column;
    align-items: flex-start;
  }
  .team-switcher-toolbar {
    gap: 1rem;
  }
  .team-profile,
  .team-details,
  .team-gallery,
  .team-state-card {
    padding: 1rem;
  }
  .team-panel {
    overflow: hidden;
  }
  .team-gallery-stage {
    --team-photo-min-height: clamp(18rem, 92vw, 24rem);
  }
  .team-gallery-stage-photo {
    aspect-ratio: 4 / 4.05;
  }
  .team-features-grid,
  .team-details [data-team-features] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .team-thumbnail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) and (orientation: landscape) {
  .team-gallery-stage {
    --team-photo-focus-shift-y: -3%;
    --team-photo-min-height: clamp(16rem, 70vh, 24rem);
  }
  .team-gallery-stage-photo {
    aspect-ratio: 4 / 3.55;
  }
}

[data-sticky-cta] {
  padding-bottom: env(safe-area-inset-bottom);
}

@supports not (backdrop-filter: blur(10px)) {
  header,
  [data-sticky-cta] {
    background: rgba(255, 255, 255, 0.98);
  }

  .team-profile-badge {
    background: #ffffff;
  }
}

[hidden] {
  display: none !important;
}

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #eaf4fb;
  background-image: linear-gradient(180deg, #edf6fd 0%, #dfedf8 100%);
  isolation: isolate;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
html.preload-pending .loader-overlay,
.loader-overlay[data-active="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}
.loader-shell {
  display: -ms-grid;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  width: 14rem;
  max-width: 100%;
  min-height: 10.75rem;
  padding: 1rem 0.9rem 0.9rem;
  border-radius: 1.25rem;
  background-color: #f2f8fd;
  border: 1px solid #d7e6f1;
  -webkit-box-shadow: 0 12px 30px rgba(66, 110, 143, 0.12);
  box-shadow: 0 12px 30px rgba(66, 110, 143, 0.12);
}
.tooth-loader {
  position: relative;
  width: clamp(6rem, 18vw, 7.5rem);
  height: clamp(6rem, 18vw, 7.5rem);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.tooth-loader__progress-track,
.tooth-loader__progress-arc,
.tooth-loader__panel {
  position: absolute;
  border-radius: 50%;
}
.tooth-loader__progress-track {
  inset: 0;
  border: 2px solid #cbddea;
  background-color: #f4faff;
}
.tooth-loader__progress-arc {
  inset: 0;
  border: 2px solid transparent;
  border-top-color: #6fb6e4;
  border-right-color: #4f86eb;
  -webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
  -webkit-animation: tooth-loader-orbit 1.5s linear infinite;
  animation: tooth-loader-orbit 1.5s linear infinite;
}
.tooth-loader__panel {
  inset: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #dce8f2;
}
.tooth-loader__icon {
  position: relative;
  z-index: 1;
  width: 42%;
  height: auto;
  max-width: 2.5rem;
  max-height: 2.5rem;
  object-fit: contain;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: tooth-loader-float 1.6s ease-in-out infinite;
  animation: tooth-loader-float 1.6s ease-in-out infinite;
}
.loader-copy {
  box-sizing: border-box;
  width: 100%;
  max-width: 10rem;
  min-height: 1.4rem;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.01em;
  color: #4d6b84;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

@-webkit-keyframes tooth-loader-orbit {
  from {
    -webkit-transform: rotate(-36deg);
    transform: rotate(-36deg);
  }
  to {
    -webkit-transform: rotate(324deg);
    transform: rotate(324deg);
  }
}

@keyframes tooth-loader-orbit {
  from {
    -webkit-transform: rotate(-36deg);
    transform: rotate(-36deg);
  }
  to {
    -webkit-transform: rotate(324deg);
    transform: rotate(324deg);
  }
}

@-webkit-keyframes tooth-loader-float {
  0%,
  100% {
    -webkit-transform: translateY(0) scale(0.985);
    transform: translateY(0) scale(0.985);
  }
  50% {
    -webkit-transform: translateY(-0.35rem) scale(1);
    transform: translateY(-0.35rem) scale(1);
  }
}

@keyframes tooth-loader-float {
  0%,
  100% {
    -webkit-transform: translateY(0) scale(0.985);
    transform: translateY(0) scale(0.985);
  }
  50% {
    -webkit-transform: translateY(-0.35rem) scale(1);
    transform: translateY(-0.35rem) scale(1);
  }
}

@media (max-width: 639.98px) {
  .loader-overlay {
    padding: 1rem;
  }
  .loader-shell {
    width: 13rem;
    max-width: 100%;
    min-height: 10rem;
    padding: 0.9rem 0.8rem 0.8rem;
    border-radius: 1rem;
  }
  .tooth-loader {
    width: min(6.5rem, 28vw);
    height: min(6.5rem, 28vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-cta-badge-dot {
    animation: none;
  }
  .quiz-cta-btn::before,
  .quiz-cta-trailing img {
    transition: none;
  }
  .team-loading-pulse,
  .team-loading-lines span,
  .team-panel.is-entering,
  .tooth-loader__progress-arc,
  .tooth-loader__icon {
    -webkit-animation: none;
    animation: none;
  }
  .switcher-dot,
  .switcher-arrow {
    transition: none;
  }
}