.aiPage {
  overflow: hidden;
  background: #ffffff;
  color: var(--yofo-navy);
}

.aiPage img {
  display: block;
}

.aiHero {
  position: relative;
  height: 12.34rem;
  overflow: hidden;
  padding-top: 1.54rem;
  background: var(--yofo-navy);
}

.aiHero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aiHero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(2, 18, 58, 0.18), transparent 56%);
  pointer-events: none;
}

.aiHeroContent {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding-top: 2.54rem;
}

.aiHeroLabel {
  width: fit-content;
  min-width: 1.2rem;
  padding-bottom: 0.1rem;
  /* border-bottom: 2px solid #ffffff; */
  font-size: clamp(24px, 0.38rem, 38px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--yofo-pale);
  position: relative;

}
.aiHeroLabel::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.2rem;
  height: 0.02rem;
  background: #F3AF4A;
}
.aiHero h1 {
  max-width: 7.73rem;
  margin-top: 2rem;
  font-size: clamp(44px, 0.65rem, 65px);
  font-weight: 600;
  line-height: 1.1714;
  color: var(--yofo-pale);
}

.aiIntro {
  max-width: 14.4rem;
  padding: 0.93rem 0 0.5rem;
  text-align: center;
}

.aiIntro h2,
.aiIntro p {
  font-size: clamp(26px, 0.38rem, 38px);
  line-height: 1.421;
}

.aiIntro h2 {
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.aiIntro p {
  font-weight: 400;
}

.aiInner {
  width: 94%;
  max-width: 14.4rem;
  margin-right: auto;
  margin-left: auto;
}

.aiBenefits {
  display: grid;
  /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
  grid-template-columns: 1fr 1fr 3.8rem 1fr;
  gap: 0.3rem;
  padding: 0 0 0.94rem;
}

.aiBenefits article {
  min-width: 0;
}

.aiBenefits img {
  width: 0.64rem;
  height: 0.64rem;
  margin: 0 auto 0.3rem;
  object-fit: contain;
}

.aiBenefits h3,
.aiBenefits p {
  font-family: 'Inter';
  font-size: clamp(16px, 0.22rem, 22px);
  line-height: 1.23;
}

.aiBenefits h3 {
  margin-bottom: 0.16rem;
  font-weight: 700;
}

.aiBenefits p {
  font-weight: 400;
}

.aiSection {
  padding-top: 0.94rem;
}

.aiSectionHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aiSectionArrow {
  width: 0.47rem;
  height: 0.24rem;
  margin-bottom: 0.5rem;
  background: url("../images/sectionArrow.png") center / contain no-repeat;
}

.aiSectionHeader h2,
.aiContentBlock h3,
.aiPanel h3 {
  font-size: clamp(25px, 0.38rem, 38px);
  font-weight: 700;
  line-height: 1.24;
  text-align: center;
}

.aiSectionHeader > p,
.aiAvailability {
  margin-top: 0.12rem;
  font-family: 'Inter';
  font-size: clamp(14px, 0.22rem, 22px);
  line-height: 1.23;
  text-align: center;
}

.aiMedia {
  overflow: hidden;
}

.aiMedia > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.aiMedia:hover > img {
  transform: scale(1.03);
}

.aiFeatureIntro {
  display: grid;
  grid-template-columns: 8.7rem 1fr;
  min-height: 5.16rem;
  margin-top: 0.5rem;
  background: var(--yofo-light);
  border-bottom: 2px solid var(--yofo-blue);
}

.aiFeatureIntro .aiMedia {
  min-height: 5.16rem;
}

.aiFeatureIntro > p {
  align-self: center;
  padding: 0.6rem 0.7rem;
  font-size: clamp(24px, 0.38rem, 38px);
  line-height: 1.28;
}

.aiPanel,
.aiContentBlock {
  width: 14.4rem;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.aiContentBlock {
  /* width: 12.8rem; */
}

.aiPanel {
  padding: 0.49rem 0.8rem 0.45rem;
  background: var(--yofo-pale);
}

.aiPanel > p,
.aiContentBlock > p,
.aiWideFeature > p,
.aiTmjBody .aiLead,
.aiReportsBody > p {
  font-family: 'Inter';
  font-size: clamp(18px, 0.28rem, 28px);
  line-height: 1.2143;
}

.aiMprNavigation {
  margin-top: 0.5rem;
  padding-right: 0;
  padding-left: 0;
}

.aiMprNavigation h3 {
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.aiMprNavigation > .aiMedia {
  height: 7.79rem;
}

.aiPlayMedia {
  position: relative;
}

.aiPlayMedia button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 0.9rem;
  height: 0.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(44, 50, 71, 0.72);
  transform: translate(-50%, -50%);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
  display: none;
}

.aiPlayMedia button:hover {
  background: var(--yofo-blue);
  transform: translate(-50%, -50%) scale(1.08);
}

.aiPlayMedia button img {
  width: 0.28rem;
}

.aiMprViews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.075rem;
  margin-top: 0.1rem;
}

.aiMprViews .aiMedia {
  height: 2.57rem;
}

.aiMprNavigation > p {
  /* padding: 0.3rem 1.29rem 0; */
  width: 12.4rem;
  margin: .3rem auto 0;
}

.aiContentBlock {
  margin-top: 0.5rem;
}

.aiContentBlock h3 {
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.aiContentBlock > p {
  padding: 0.49rem 0rem 0;
  width: 12.4rem;
  margin: 0 auto;
}

.aiTwoImages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem;
  background: #000000;
}

.aiTwoImages .aiMedia {
  height: 7.94rem;
}

.aiModes {
  margin-top: 0.5rem;
  padding-right: 0;
  padding-left: 0;
}

.aiModes h3 {
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.aiModeGrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.1rem;
}

.aiModeGrid figure {
  grid-column: span 2;
  min-width: 0;
}

.aiModeGrid figure:nth-child(1),
.aiModeGrid figure:nth-child(2) {
  grid-column: span 5;
}

.aiModeGrid .aiMedia {
  height: 2.62rem;
  background: #000000;
}

.aiModeGrid figure:nth-child(-n + 2) .aiMedia {
  height: 3.35rem;
}

.aiModeGrid figcaption,
.aiValidation figcaption,
.aiTmjBody figcaption,
.aiCephGrid figcaption,
.aiAirway figcaption,
.aiStackFeature figcaption {
  font-family: 'Inter';
  font-size: clamp(13px, 0.22rem, 22px);
  line-height: 1.23;
  text-align: center;
}

.aiModeGrid figcaption {
  min-height: 0.72rem;
  padding: 0.12rem 0.05rem 0;
}

.aiModes > p {
  padding: 0.15rem 0.57rem 0;
}

.aiPanoramic,
.aiTmj,
.aiCeph,
.aiOrtho,
.aiReports {
  padding-top: 1rem;
}

.aiWideFeature {
  margin-top: 0.5rem;
  padding-bottom: 0.48rem;
  background: var(--yofo-light);
  border-bottom: 2px solid var(--yofo-blue);
}

.aiWideFeature .aiMedia {
  height: 8.59rem;
}

.aiWideFeature > p {
  padding: 0.48rem 0.74rem 0;
  font-size: clamp(24px, 0.38rem, 38px);
  line-height: 1.29;
}

.aiPanoramic .aiContentBlock > .aiMedia {
  height: 7.8rem;
}

.aiImplantPlanning {
  margin-top: 0.5rem;
}

.aiImplantPlanning h3 {
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.aiImplantPlanning > .aiMedia {
  height: 6.93rem;
}

.aiImplantSwiper {
  overflow: hidden;
}

.aiImplantStage {
  position: relative;
}

.aiImplantSwiper .swiper-slide {
  height: auto;
}

.aiImplantSwiper .aiMedia {
  height: 6.93rem;
}

.aiImplantPrev,
.aiImplantNext {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 0.36rem;
  height: 0.6rem;
  cursor: pointer;
  transform: translateY(-50%);
}

.aiImplantPrev {
  left: -0.54rem;
}

.aiImplantNext {
  right: -0.54rem;
}

.aiImplantPrev::before,
.aiImplantNext::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.2rem;
  content: "";
  border-top: 0.035rem solid var(--yofo-navy);
  border-left: 0.035rem solid var(--yofo-navy);
  transition: border-color 0.3s ease;
}

.aiImplantPrev::before {
  transform: translate(-35%, -50%) rotate(-45deg);
}

.aiImplantNext::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

.aiImplantPrev:hover::before,
.aiImplantNext:hover::before {
  border-color: var(--yofo-blue);
}

.aiSteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ai-step-count, 3), minmax(0, 1fr));
  margin: 0.51rem 0 0.5rem;
  font-family: 'Inter';
  font-size: clamp(14px, 0.22rem, 22px);
  line-height: 1.23;
  text-align: center;
}

.aiSteps button {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0.28rem 0.05rem 0;
  font-family: 'Inter';
  font-size: clamp(14px, 0.22rem, 22px);
  line-height: 1.23;
  color: var(--yofo-navy);
  cursor: pointer;
}

.aiSteps button:hover {
  color: var(--yofo-orange);
}   

.aiSteps button.is-active {
  font-weight: 700;
}

.aiSteps::before,
.aiSteps::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #9aa1b4;
}

.aiSteps::after {
  width: calc(100% / var(--ai-step-count, 3));
  height: 2px;
  background: var(--yofo-blue);
  transform: translateX(var(--ai-step-offset, 0%));
  transition: transform 0.65s ease;
}

.aiImplantPlanning > p {
  padding: 0;
  font-family: 'Inter';
  font-size: clamp(18px, 0.28rem, 28px);
  line-height: 1.2143;
}

.aiValidation figure {
  margin-top: 0.35rem;
}

.aiValidation .aiMedia {
  height: 6.93rem;
}

.aiValidation figcaption {
  padding-top: 0.15rem;
}

.aiTmjBody,
.aiReportsBody {
  margin-top: 0.5rem;
  padding: 0.75rem 1.53rem 0.55rem;
  background: var(--yofo-light);
}

.aiReportsBody {
  padding: 0.75rem 0.73rem 0.55rem;
}



.aiReportsBody .aiMedia {
  padding: 0 0.79rem;
}

.aiTmjBody .aiLead {
  margin-bottom: 0.55rem;
  font-size: clamp(24px, 0.38rem, 38px);
  line-height: 1.29;
}
.aiOrtho {
  padding-top: 1rem;
}

.aiTmjBody figure + figure {
  margin-top: 0.42rem;
}

.aiTmjBody .aiMedia {
  height: 6.93rem;
}

.aiTmjBody figcaption {
  padding: 0.14rem 1.7rem 0;
}

.aiTmjBody figcaption strong {
  display: block;
  font-weight: 400;
  font-size: clamp(18px, 0.22rem, 22px);
}

/* TMJ section follows the 1586px outer panel and 1280px media grid. */
.aiTmj {
  position: relative;
  padding-top: 0;
  padding-bottom: 0.5rem;
  margin-top: 1rem;
}

.aiTmj::before {
  position: absolute;
  z-index: 0;
  top: 0.74rem;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: var(--yofo-light);
}

.aiTmj .aiSectionHeader,
.aiTmj .aiTmjBody {
  position: relative;
  z-index: 1;
}

.aiTmj .aiSectionArrow {
  margin-bottom: 0.99rem;
}

.aiTmj .aiSectionHeader h2 {
  width: 9.92rem;
  max-width: calc(100% - 0.4rem);
}

.aiTmj .aiSectionHeader > p {
  margin-top: 0.15rem;
}

.aiTmjBody {
  margin-top: 0.49rem;
  padding: 0 0.73rem;
  background: transparent;
}

.aiTmjBody .aiLead {
  margin-bottom: 0.58rem;
}

.aiTmjBody figure {
  margin-right: 0.8rem;
  margin-left: 0.8rem;
}

.aiTmjBody figure + figure {
  margin-top: 0.53rem;
}

.aiTmjBody figcaption {
  min-height: 1.11rem;
  padding: 0.3rem 1.7rem 0;
}

.aiCephViews .aiAvailability {
  margin: -0.19rem 0 0.3rem;
  padding-top: 0;
}

.aiCephGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.1rem;
}

.aiCephGrid .aiMedia {
  height: 2.8rem;
  background: #000000;
}

.aiCephGrid img {
  object-fit: cover;
}

.aiCephGrid figcaption {
  padding-top: 0.12rem;
}

.aiAirway,
.aiStackFeature,
.aiSingleFeature {
  margin-top: 0.5rem;
}

.aiAirway .aiAvailability{
  font-size: clamp(18px, 0.22rem, 22px);
}

.aiAirway h3,
.aiStackFeature h3,
.aiSingleFeature h3 {
  margin-bottom: 0.12rem;
  font-weight: 500;
}

.aiAirway figure,
.aiStackFeature figure {
  margin-top: 0.28rem;
}

.aiAirway .aiMedia,
.aiStackFeature .aiMedia,
.aiSingleFeature .aiMedia {
  height: 6.98rem;
}

.aiAirway figcaption,
.aiStackFeature figcaption {
  padding-top: 0.12rem;
}

.aiAirway > p:last-child,
.aiStackFeature > p,
.aiSingleFeature > p {
  margin-top: 0.28rem;
}

.aiOrtho .aiContentBlock > .aiMedia {
  height: 6.98rem;
  max-width: 12.80rem;
  margin: 0 auto;
}

.aiOrtho .aiContentBlock > .aiMedia + p {
  width: 12.80rem;
}

.aiReportsBody .aiMedia {
  height: 6.98rem;
}

.aiReportsBody .aiMedia + .aiMedia {
  height: 8rem;
  margin-top: 0.3rem;
}

.aiReportsBody > p {
  margin-top: 0.5rem;
  font-size: clamp(24px, 0.38rem, 38px);
  line-height: 1.29;
}

.aiReportsBody > .tip {
  font-family: 'Inter';
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  margin-top: 0.2rem;
}

.aiClosing {
  padding: 1.55rem 0.2rem 0;
  font-size: clamp(25px, 0.38rem, 38px);
  /* font-weight: 600; */
  line-height: 1.29;
  color: var(--yofo-blue);
  text-align: center;
}

@media (max-width: 1200px) {
  .aiBenefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.6rem;
  }

  .aiFeatureIntro {
    grid-template-columns: 55% 1fr;
  }
}

@media (max-width: 900px) {
  .aiPage {
    padding-top: 0.72rem;
  }

  .aiHero {
    height: 7rem;
  }

  .aiHero > img {
    object-position: 58% center;
  }

  .aiHeroContent {
    padding-top: 0.55rem;
  }

  .aiHero h1 {
    margin-top: 1rem;
  }

  .aiIntro,
  .aiSection {
    width: calc(100vw - 0.4rem);
  }

  .aiFeatureIntro {
    grid-template-columns: 1fr;
  }

  .aiFeatureIntro .aiMedia {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .aiFeatureIntro > p {
    padding: 0.45rem;
  }

  .aiMprNavigation > .aiMedia,
  .aiWideFeature .aiMedia,
  .aiPanoramic .aiContentBlock > .aiMedia,
  .aiImplantPlanning > .aiMedia,
  .aiImplantSwiper .aiMedia,
  .aiValidation .aiMedia,
  .aiTmjBody .aiMedia,
  .aiAirway .aiMedia,
  .aiStackFeature .aiMedia,
  .aiSingleFeature .aiMedia,
  .aiOrtho .aiContentBlock > .aiMedia,
  .aiReportsBody .aiMedia,
  .aiReportsBody .aiMedia + .aiMedia {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .aiTwoImages .aiMedia {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .aiTmjBody,
  .aiReportsBody {
    padding: 0.45rem;
  }

  .aiTmj .aiSectionArrow {
    margin-bottom: 0.55rem;
  }

  .aiTmjBody figure {
    margin-right: 0;
    margin-left: 0;
  }

  .aiModeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aiModeGrid figure,
  .aiModeGrid figure:nth-child(1),
  .aiModeGrid figure:nth-child(2) {
    grid-column: auto;
  }

  .aiModeGrid figure:last-child {
    grid-column: 1 / -1;
  }

  .aiModeGrid .aiMedia,
  .aiModeGrid figure:nth-child(-n + 2) .aiMedia {
    height: auto;
    aspect-ratio: 1 / 0.86;
  }

  .aiCephGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .aiHero {
    height: 5.8rem;
  }

  .aiHero > img {
    object-position: 63% center;
  }

  .aiHero h1 {
    max-width: 70%;
  }

  .aiBenefits {
    grid-template-columns: 1fr;
  }

  .aiMprViews,
  .aiTwoImages,
  .aiCephGrid {
    grid-template-columns: 1fr;
  }

  .aiMprViews .aiMedia,
  .aiTwoImages .aiMedia,
  .aiCephGrid .aiMedia {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .aiMprNavigation > p,
  .aiContentBlock > p,
  .aiTmjBody figcaption {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  .aiPanel {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
  }

  .aiSteps {
    gap: 0.1rem;
  }

  .aiImplantPrev {
    left: -0.42rem;
  }

  .aiImplantNext {
    right: -0.42rem;
  }
}

/* Mobile layout refinements */
@media (max-width: 750px) {
  .aiPage {
    padding-top: 64px;
  }

  .aiHero {
    height: 520px;
  }

  .aiHeroContent {
    width: 100%;
    max-width: none;
    padding: 30px 20px 0;
  }

  .aiHeroLabel {
    font-size: 25px;
  }

  .aiHero h1 {
    max-width: 100%;
    margin-top: 48px;
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.14;
  }

  .aiIntro,
  .aiSection {
    width: calc(100% - 40px);
    max-width: none;
  }

  .aiPanel,
  .aiContentBlock {
    width: 100%;
    max-width: none;
  }

  .aiIntro {
    padding-top: 44px;
  }

  .aiIntro h2,
  .aiIntro p,
  .aiSectionHeader h2,
  .aiContentBlock h3,
  .aiPanel h3,
  .aiTmjBody .aiLead,
  .aiWideFeature > p,
  .aiClosing {
    font-size: 26px;
    line-height: 1.24;
  }

  .aiTmjBody .aiLead{
    font-size: 18px;
  }

  .aiSection {
    padding-top: 44px;
  }

  .aiBenefits,
  .aiFeatureIntro,
  .aiTwoImages,
  .aiMprViews,
  .aiModeGrid,
  .aiCephGrid,
  .aiTmjBody,
  .aiReportsBody {
    width: 100%;
  }

  .aiBenefits{
    padding: 0 20px;
  }

  .aiBenefits,
  .aiFeatureIntro,
  .aiTwoImages,
  .aiMprViews,
  .aiCephGrid,
  .aiTmjBody,
  .aiReportsBody {
    grid-template-columns: 1fr;
  }

  .aiFeatureIntro,
  .aiContentBlock,
  .aiPanel,
  .aiTmjBody,
  .aiReportsBody {
    margin-top: 30px;
  }

  .aiFeatureIntro .aiMedia,
  .aiMprNavigation > .aiMedia,
  .aiWideFeature .aiMedia,
  .aiPanoramic .aiContentBlock > .aiMedia,
  .aiImplantPlanning > .aiMedia,
  .aiImplantSwiper .aiMedia,
  .aiValidation .aiMedia,
  .aiTmjBody .aiMedia,
  .aiAirway .aiMedia,
  .aiStackFeature .aiMedia,
  .aiSingleFeature .aiMedia,
  .aiOrtho .aiContentBlock > .aiMedia,
  .aiReportsBody .aiMedia,
  .aiReportsBody .aiMedia + .aiMedia {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .aiTwoImages .aiMedia,
  .aiModeGrid .aiMedia,
  .aiCephGrid .aiMedia {
    height: auto;
    aspect-ratio: 1 / .86;
  }

  .aiModeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aiModeGrid figure,
  .aiModeGrid figure:nth-child(1),
  .aiModeGrid figure:nth-child(2) {
    grid-column: auto;
  }

  .aiModeGrid figure:last-child {
    grid-column: 1 / -1;
  }

  .aiImplantStage {
    margin-right: -20px;
    margin-left: -20px;
  }

  .aiImplantPrev,
  .aiImplantNext {
    width: 44px;
    height: 64px;
  }

  .aiImplantPrev {
    left: 0;
  }

  .aiImplantNext {
    right: 0;
  }

  .aiSteps button {
    min-height: 44px;
    padding-top: 12px;
  }

  .aiClosing {
    padding: 44px 20px 0;
  }
}

/* Final AI mobile containment and readable touch targets. */
@media (max-width: 1024px) {
  .aiPage {
    max-width: 100%;
    overflow-x: clip;
  }

  .aiPage h1,
  .aiPage h2,
  .aiPage h3,
  .aiPage p,
  .aiPage li,
  .aiPage button {
    overflow-wrap: anywhere;
  }
  
  .aiPage h3,
  .aiPage p{
    text-align: center;
  }
}

@media (max-width: 600px) {
  .aiMprNavigation > p,
  .aiContentBlock > p,
  .aiOrtho .aiContentBlock > .aiMedia + p,
  .aiPanel > p,
  .aiWideFeature > p,
  .aiReportsBody > p {
    width: 100%;
    max-width: 100%;
  }

  .aiBenefits p,
  .aiSection p,
  .aiClosing p {
    font-size: 15px;
    line-height: 1.5;
  }

  .aiSteps button,
  .aiImplantPrev,
  .aiImplantNext {
    min-width: 44px;
    min-height: 44px;
  }
}