/* ==========================================================================
   Gleaming — Subscription & Pricing page (Figma 1256:11330 / mobile 1256:14628)
   ========================================================================== */

/* mobile-only content variants (GL2 mobile frame diverges from desktop copy) */
.sub-m {
  display: none;
}

/* ================= Hero ================= */
.sub-hero {
  position: relative;
  padding-top: 149px;
  min-height: 747px;
  overflow-x: clip;
}

.sub-hero__broom {
  position: absolute;
  top: 0;
  right: 0;
  width: 451px;
  height: auto;
}

.sub-hero__stars {
  position: absolute;
  top: 256px;
  right: 335px;
  width: 363px;
  height: auto;
}

.sub-hero .container {
  position: relative;
}

.sub-hero__title {
  max-width: 767px;
  color: var(--color-text-primary);
}

.sub-hero__lead {
  max-width: 541px;
  margin-top: 24px;
  font-size: 20px;
  line-height: 1.5;
}

.sub-hero__actions {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-top: 28px;
}

.sub-hero__link {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* ================= Statements ================= */
.statement {
  text-align: center;
}

.statement--second {
  margin-top: 268px;
}

.statement__label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-tertiary);
}

.statement__text {
  max-width: 996px;
  margin-inline: auto;
  margin-top: 36px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.statement--second .statement__text {
  margin-top: 0;
}

/* ================= Story card (blue gradient) ================= */
.story {
  max-width: 1440px;
  margin: 186px auto 0;
  padding-inline: 16px;
}

.story__card {
  position: relative;
  height: 600px;
  border-radius: var(--radius-card);
  background: linear-gradient(101deg, #1E2CA2 0%, #1E2CA2 10%, #6973C6 52%, #C0C5F0 88%, #D8DCFC 100%);
  overflow: hidden;
}

.story__logo {
  position: absolute;
  left: 26px;
  top: 93px;
  width: 160px;
  height: 138px;
}

.story__label {
  position: absolute;
  left: 62px;
  top: 231px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.75);
}

.story__heading {
  position: absolute;
  left: 62px;
  top: 277px;
  width: 572px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.1;
  color: var(--color-white);
}

.story__person {
  position: absolute;
  left: 842px;
  top: 203px;
  width: 130px;
  height: auto;
}

.story__bubble {
  position: absolute;
  width: 341px;
  padding: 18px 42px;
  background: var(--color-white);
  border: 1.5px solid #141414;
  border-radius: 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-primary);
}

.story__bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-right: 1.5px solid #141414;
  border-bottom: 1.5px solid #141414;
  transform: rotate(45deg);
}

.story__bubble--1 {
  left: 479px;
  top: 112px;
}

.story__bubble--1::after {
  right: 60px;
}

.story__bubble--2 {
  left: 899px;
  top: 95px;
  width: 345px;
}

.story__bubble--2::after {
  left: 96px;
}

.story__bubble--3 {
  display: none;
}

/* ================= Benefits bands ================= */
.benefits {
  max-width: 1440px;
  margin: 150px auto 0;
}

.benefit {
  position: relative;
  height: 609px;
  border-radius: var(--radius-card);
}

.benefit--rates {
  background: var(--color-primary-50);
}

.benefit--priority {
  margin-top: -50px;
  background: var(--color-primary-100);
}

.benefit--loyalty {
  margin-top: -50px;
  height: 558px;
  background: #A0A5EC;
}

.benefit__img {
  position: absolute;
  height: auto;
}

.benefit--rates .benefit__img {
  left: 150px;
  top: 108px;
  width: 405px;
}

.benefit--priority .benefit__img {
  left: 115px;
  top: 19px;
  width: 485px;
}

.benefit--loyalty .benefit__img {
  left: 90px;
  top: 40px;
  width: 475px;
}

.benefit__content {
  position: absolute;
  left: 729px;
  top: 146px;
  width: 534px;
}

.benefit__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 60px;
  color: var(--color-text-primary);
}

.benefit__text {
  width: 540px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.benefit__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 343px;
  min-height: 72px;
  margin-top: 44px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-primary-400);
}

/* ================= Numbers ================= */
.numbers {
  margin-top: 256px;
  text-align: center;
}

.numbers__heading {
  max-width: 1020px;
  margin: 36px auto 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.numbers__sub {
  max-width: 1000px;
  margin: 36px auto 0;
  font-size: 28px;
  line-height: 1.43;
}

.numbers__stats {
  display: flex;
  justify-content: flex-start;
  padding-left: 233px;
  gap: 117px;
  margin-top: 56px;
}

.stat-card {
  width: 326px;
  padding: 24px;
  background: #F8F9FE;
  border-radius: 24px;
  text-align: center;
}

.stat-card--sparkle {
  position: relative;
}

.stat-card__value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.5;
  color: var(--color-primary-400);
}

.stat-card__label {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.05;
  color: var(--color-text-primary);
}

/* PNG has ~12% transparent padding — oversize/offset so the visible star is ~100px */
.stat-card__sparkle {
  position: absolute;
  top: -53px;
  right: -66px;
  width: 130px;
  height: auto;
}

/* ================= Members / testimonials ================= */
.members {
  margin-top: 295px;
  overflow: hidden;
  background: linear-gradient(105deg, #FFFFFF 40%, #F2F6FC 72%, #D2E0F7 100%);
}

.members__inner {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding: 95px 80px 85px;
}

.members__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.members__heading {
  max-width: 480px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.members__intro {
  display: flex;
  align-items: flex-start;
  max-width: 690px;
  margin-top: -45px;
}

.members__mark {
  width: 125px;
  height: 108px;
  margin-right: -15px;
  flex-shrink: 0;
}

.members__intro-text {
  max-width: 553px;
  margin-top: 54px;
  font-size: 21px;
  line-height: 1.38;
}

.members__body {
  display: flex;
  align-items: flex-start;
  gap: 134px;
  margin-top: 96px;
}

.quote {
  position: relative;
  width: 522px;
  flex-shrink: 0;
  margin: 0;
}

.quote__text {
  min-height: 199px;
  margin: 0;
  padding: 42px 40px;
  background: var(--color-white);
  border-radius: 32px;
  box-shadow: 0 14px 42px rgba(23, 15, 73, 0.08);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.35;
  color: var(--color-neutral-800);
}

.quote__mark {
  position: absolute;
  left: 32px;
  top: 175px;
  width: 103px;
  height: auto;
}

.members__gallery {
  min-width: 0;
}

.members__photos {
  display: flex;
  gap: 28px;
}

.members__photo {
  position: relative;
  width: 260px;
  height: 364px;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
}

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

.members__photo--empty {
  background: #D9D9D9;
}

.dots {
  display: flex;
  gap: 6px;
}

.dots__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C9CCEC;
}

.dots__dot.is-active {
  background: var(--color-primary-400);
}

.dots--members {
  margin-top: 35px;
  margin-left: 324px;
}

.members__cta {
  margin-top: 39px;
  text-align: center;
}

.members__cta-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.members__cta-btn {
  margin-top: 15px;
}

/* ================= Pricing ================= */
.pricing {
  margin-top: 446px;
}

.pricing__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 72px;
  text-align: center;
  color: var(--color-text-primary);
}

.pricing-tabs {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 45px auto 0;
  padding: 4px;
  background: var(--color-white);
  border: 1px solid #E9EAF8;
  border-radius: var(--radius-pill);
}

.pricing-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.pricing-tabs__tab[aria-selected="true"] {
  padding-left: 4px;
  background: var(--color-primary-50);
}

.pricing-tabs__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-primary-400);
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
}

.pricing__panel {
  margin-top: 24px;
}

/* Figma: white cards are inset 20px inside 552x284 grid cells */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1104px;
  padding: 20px;
  margin-inline: auto;
}

.price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 244px;
  padding: 12px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -24px rgba(23, 15, 73, 0.12);
}

.price-card__name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-600);
}

.price-card__price {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 58px;
}

.price-card__old {
  color: var(--color-text-primary);
}

.price-card__new {
  color: var(--color-text-primary);
}

.price-card__divider {
  width: 100%;
  margin: 12px 0 0;
  border: none;
  border-top: 1px solid #EFEFF5;
}

.price-card__features {
  width: 100%;
}

.price-card__features li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  font-family: var(--font-alt);
  font-size: 18px;
  line-height: 1.33;
  color: var(--color-text-primary);
}

.price-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-primary-400);
}

/* ================= Book CTA banner ================= */
.book-cta {
  margin-top: 232px;
  overflow-x: clip;
}

.book-cta__wrap {
  position: relative;
}

.book-cta__card {
  position: relative;
  height: 441px;
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, #1E2CA2 0%, #1E2CA2 15%, #4653BF 48%, #5E6AD0 64%, #939EF7 98%);
  overflow: hidden;
}

.book-cta__content {
  position: absolute;
  left: 83px;
  top: 79px;
  width: 602px;
}

.book-cta__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 60px;
  color: var(--color-white);
}

.book-cta__text {
  width: 610px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
}

.book-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 343px;
  min-height: 72px;
  margin-top: 44px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-primary-400);
}

.book-cta__sparkle {
  position: absolute;
  left: 736px;
  top: 160px;
  width: 265px;
  height: auto;
}

.book-cta__broom {
  position: absolute;
  top: -78px;
  right: 83px;
  width: 353px;
  height: auto;
}

/* ================= FAQ ================= */
.faq-section {
  margin-top: 301px;
}

.faq-section__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 68px;
  line-height: 86px;
  text-align: center;
  color: var(--color-text-primary);
}

.faq {
  margin-top: 72px;
}

.faq__item {
  padding-block: 26px;
  border-radius: 24px;
}

/* Figma shows a single divider, between items 3 and 4 */
.faq__item:nth-child(4) {
  position: relative;
}

.faq__item:nth-child(4)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #ECEAF5;
}

.faq__item:has(.faq__trigger[aria-expanded="true"]) {
  background: var(--color-purple-100);
}

.faq__item:has(.faq__trigger[aria-expanded="true"])::before,
.faq__item:has(.faq__trigger[aria-expanded="true"]) + .faq__item::before {
  display: none;
}

.faq__q {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 128px;
  padding: 32px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-neutral-800);
}

.faq__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(23, 15, 73, 0.08);
}

.faq__trigger[aria-expanded="true"] .faq__chevron img {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 6px 32px 32px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

/* ================= Our services ================= */
.services {
  margin-top: 478px;
  margin-bottom: 483px;
}

.services__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-primary);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 89px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 341px;
  padding: 31px 24px 32px;
  background: #F8F9FE;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(23, 15, 73, 0.05);
}

.svc-card__icon {
  width: 48px;
  height: 48px;
}

.svc-card__title {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  color: var(--color-neutral-800);
}

.svc-card__text {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

.svc-card .link-more {
  margin-top: auto;
  padding-top: 24px;
}

.dots--services {
  justify-content: center;
  gap: 10px;
  margin-top: 46px;
}

.dots--services .dots__dot {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Tablet (768–1023) — compress desktop layout
   ========================================================================== */
@media (max-width: 1279px) {
  .benefit {
    display: flex;
    align-items: center;
    gap: 40px;
    height: auto;
    padding: 60px 40px;
  }

  .benefit__img {
    position: static;
    width: 36%;
    max-width: 420px;
  }

  .benefit--rates .benefit__img,
  .benefit--priority .benefit__img,
  .benefit--loyalty .benefit__img {
    left: auto;
    top: auto;
    width: 36%;
  }

  .benefit__content {
    position: static;
    width: auto;
    flex: 1;
  }

  .benefit__text {
    width: auto;
    max-width: 540px;
  }

  .numbers {
    overflow-x: clip;
  }

  .story__bubble--1 {
    left: 38%;
  }

  .story__bubble--2 {
    left: 66%;
  }

  .story__person {
    left: 62%;
  }

  .members__body {
    gap: 60px;
  }

  .numbers__stats {
    justify-content: center;
    padding-left: 0;
  }

  .dots--members {
    margin-left: 0;
  }

  .book-cta__broom {
    right: 40px;
  }

  .sub-hero__broom {
    width: 360px;
  }

  .sub-hero__stars {
    right: 240px;
    width: 300px;
  }
}

@media (max-width: 1023px) {
  .sub-hero {
    min-height: 0;
    padding-top: 80px;
    padding-bottom: 340px;
  }

  .sub-hero__broom {
    top: auto;
    bottom: 40px;
    width: 320px;
  }

  .sub-hero__stars {
    top: auto;
    bottom: 120px;
    right: auto;
    left: 60px;
    width: 220px;
  }

  .statement--second {
    margin-top: 140px;
  }

  .story {
    margin-top: 120px;
  }

  .story__heading {
    font-size: 36px;
    width: 60%;
  }

  .members__inner {
    padding: 60px 40px;
  }

  .members__head {
    flex-direction: column;
  }

  .members__intro {
    margin-top: 0;
  }

  .members__intro-text {
    margin-top: 30px;
  }

  .members__body {
    flex-direction: column;
    margin-top: 48px;
  }

  .numbers,
  .pricing,
  .book-cta,
  .faq-section,
  .services {
    margin-top: 160px;
  }

  .services {
    margin-bottom: 120px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }

  .book-cta__content {
    left: 40px;
    top: 48px;
    width: min(602px, 60%);
  }

  .book-cta__broom {
    width: 280px;
    top: -40px;
  }

  .statement--first {
    margin-top: 40px;
  }
}

/* ==========================================================================
   Mobile (<768) — matches the 402px frame; section order changes
   ========================================================================== */
@media (max-width: 767px) {
  /* GL2 mobile frame 1001:7730 page background is pure white (not #FCFCFC) */
  body {
    background: #ffffff;
  }

  .sub-m {
    display: revert;
  }

  .sub-d {
    display: none;
  }

  main {
    display: flex;
    flex-direction: column;
  }

  .sub-hero        { order: 1; }
  .statement--first{ order: 2; }
  .story           { order: 3; }
  .statement--second { order: 4; }
  .benefits        { order: 5; }
  .numbers         { order: 6; }
  .members         { order: 7; }
  .pricing         { order: 8; }
  .services        { order: 9; }
  .book-cta        { order: 10; }
  .faq-section     { order: 11; }

  /* --- hero --- */
  .sub-hero {
    padding-top: 35px;
    padding-bottom: 331px;
  }

  .sub-hero__title {
    max-width: 357px;
  }

  .sub-hero__lead {
    margin-top: 20px;
    font-size: 16px;
    max-width: 357px;
    transform: translateX(-1px); /* frame ink sits 1px left of the flow grid */
  }

  .sub-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 27px;
  }

  .sub-hero__link {
    margin-left: 20px;
    font-size: 20px;
  }

  /* mobile frame uses different decor renditions — exported from GL2 nodes
     1001:7917 / 1001:7918 (white-baked); placed at node boxes / truth ink */
  .sub-hero__broom {
    content: url("../../assets/img/subscription/m-broom-hero.png");
    bottom: auto;
    top: 312px;
    right: auto;
    left: 187px;
    width: 215px;
  }

  .sub-hero__stars {
    content: url("../../assets/img/subscription/m-stars.png");
    bottom: auto;
    top: 454px;
    left: 60px;
    width: 182.5px;
  }

  /* --- statements --- */
  .statement--first {
    margin-top: 0;
  }

  .statement__label {
    letter-spacing: 2px;
  }

  .statement__text {
    margin-top: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
  }

  .statement--second {
    margin-top: 160px;
  }

  .statement--second .statement__text {
    margin-top: 0;
  }

  /* --- story card --- */
  .story {
    width: 100%;
    margin-top: 125px;
    padding-inline: 20px;
  }

  .story__card {
    overflow: visible;
  }

  .benefits {
    width: 100%;
  }

  .story__card {
    height: 683px;
    background: linear-gradient(94deg, #1E2CA2 7%, #949EFF 100%);
  }

  .story__logo {
    left: 5px;
    top: 35px;
    width: 87px;
    height: 75px;
  }

  .story__label {
    left: 20px;
    top: 110px;
  }

  .story__heading {
    left: 20px;
    top: 142px;
    width: 298px;
    font-size: 32px;
    line-height: 1;
  }

  /* mobile person rendition (node 1001:7925 export, gradient patch baked);
     clip to the figure so the patch seam stays off the gradient */
  .story__person {
    content: url("../../assets/img/subscription/m-person.png");
    left: 86px;
    top: 389px;
    width: 191px;
    clip-path: inset(20px 60px 25px 62px);
  }

  /* frame hand-tunes each bubble's type and box */
  .story__bubble {
    padding: 12px;
    font-size: 12px;
    line-height: 1.3;
  }

  .story__bubble--1 {
    left: -42px;
    top: 419px;
    width: 190px;
    padding: 8px 24px;
    font-size: 10px;
    line-height: 13px;
  }

  .story__bubble--1::after {
    right: 0;
  }

  .story__bubble--2 {
    left: auto;
    right: -18px;
    top: 303px;
    width: 234px;
    padding: 21px 16px;
    font-size: 14px;
    line-height: 18px;
  }

  .story__bubble--2::after {
    left: 40px;
  }

  .story__bubble--3 {
    display: block;
    left: auto;
    right: 14px;
    top: 577px;
    width: 175px;
    padding: 8px 12px;
    line-height: 16px;
  }

  /* truth's third bubble points its tail UP toward the person */
  .story__bubble--3::after {
    bottom: auto;
    top: -10px;
    border-right: none;
    border-bottom: none;
    border-left: 1.5px solid #141414;
    border-top: 1.5px solid #141414;
  }

  .story__bubble--3::after {
    left: 46px;
  }

  /* --- benefits --- */
  .benefits {
    margin-top: 89px;
  }

  /* loyalty card's text block sits 28px lower than the flow of the others */
  .benefit--loyalty .benefit__content {
    margin-top: 40px;
  }

  .benefit {
    display: block;
    height: auto;
    padding: 40px 20px 120px;
  }

  .benefit--priority {
    padding-bottom: 120px;
  }

  .benefit--loyalty {
    padding-bottom: 60px;
  }

  .benefit__text {
    width: auto;
  }

  .benefit--rates .benefit__img,
  .benefit--priority .benefit__img,
  .benefit--loyalty .benefit__img {
    width: 184px;
    height: 184px; /* savings PNG is 405x400; frame slots are square */
  }

  .benefit__content {
    margin-top: 12px;
  }

  .benefit__title {
    font-size: 32px;
    line-height: 1;
  }

  .benefit__text {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.125;
  }

  .book-cta__text {
    width: auto;
  }

  .benefit__btn {
    width: 192px;
    min-height: 52px;
    margin-top: 20px;
    font-size: 24px;
  }

  .benefit--loyalty {
    height: auto;
  }

  /* --- numbers --- */
  .numbers {
    margin-top: 216px;
    text-align: center;
  }

  .numbers .statement__label {
    display: none;
  }

  .numbers__heading {
    max-width: 335px;
    margin-top: 0;
    font-size: 32px;
    line-height: 32px;
  }

  .numbers__sub {
    max-width: 335px;
    margin-top: 17px;
    font-size: 16px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.85);
    transform: translateX(1px);
  }

  .numbers__stats {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 85px;
  }

  .stat-card {
    max-width: 326px;
    width: 100%;
  }

  /* frame hand-sizes the two cards: 180px / 168px */
  .numbers__stats .stat-card:first-child {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .numbers__stats .stat-card:first-child .stat-card__label {
    margin-top: 24px;
  }

  .stat-card__label {
    margin-top: 12px;
    font-size: 24px;
    line-height: 24px;
    color: #000;
  }

  .stat-card__sparkle {
    display: none;
  }

  /* --- members --- */
  .members {
    margin-top: 136px;
    background: linear-gradient(121deg, #FFFFFF 30%, #CEDDF6 49%);
  }

  .members__inner {
    padding: 125px 20px 66px 23px;
  }

  .members__head {
    gap: 0;
  }

  .members__heading {
    max-width: none;
    font-size: 44px;
    line-height: 44px;
  }

  .members__mark {
    display: none;
  }

  /* Chrome rasterizes Inter ~15% heavier than the frame — compensate */
  .members__intro-text {
    margin-top: 24px;
    font-size: 18px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }

  .members__body {
    gap: 31px;
    margin-top: 30px;
  }

  .quote {
    width: 100%;
  }

  .quote__text {
    min-height: 0;
    padding: 20px;
    font-size: 17.5px;
    line-height: 28px;
    letter-spacing: -0.25px;
    color: #000;
    background: linear-gradient(93deg, #F7F8FC 0%, rgba(247, 248, 252, 0) 100%);
    box-shadow: none;
  }

  .quote__mark {
    position: static;
    display: block;
    margin: 1px 0 9px 25px;
    width: 70px;
  }

  .members__photos {
    gap: 23px;
  }

  .members__photo {
    width: 214px;
    height: 300px;
  }

  .dots--members {
    margin-top: 20px;
    margin-left: 0;
  }

  .members__cta {
    margin-top: 126px;
  }

  .members__cta-text {
    max-width: 300px;
    margin-inline: auto;
    font-size: 32px;
    line-height: 1.125;
  }

  .members__cta-btn {
    margin-top: 15px;
    width: 100%;
    max-width: 345px;
    min-height: 72px;
    font-size: 24px;
  }

  /* --- pricing --- */
  .pricing {
    margin-top: 292px;
  }

  .pricing__heading {
    font-size: 32px;
    line-height: 1;
  }

  .pricing-tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-top: 45px;
    border-radius: 24px;
    /* frame draws no enclosing box around the tabs — keep the layout box,
       drop the paint */
    background: transparent;
    border-color: transparent;
  }

  .pricing__panel {
    margin-top: 23px;
  }

  /* frame renders the card label near-black, not neutral-600 */
  .price-card__name {
    color: #212121;
  }

  /* frame hand-sizes the four tabs into two rows */
  .pricing-tabs__tab:nth-child(1) { width: 198px; }
  .pricing-tabs__tab:nth-child(2) { width: 153px; }
  .pricing-tabs__tab:nth-child(3) { width: 152px; }
  .pricing-tabs__tab:nth-child(4) { width: 177px; }

  .pricing-tabs__tab[aria-selected="true"] {
    padding-left: 24px;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .price-card {
    min-height: 219px;
    padding: 20px;
  }

  .price-card__price {
    font-size: 32px;
    line-height: 38px;
  }

  .price-card__cta {
    font-size: 18px;
  }

  /* --- book CTA --- */
  .book-cta {
    margin-top: 105px;
  }

  .book-cta__card {
    height: 718px;
    background: linear-gradient(96deg, #1E2CA2 23%, #94A0FA 100%);
  }

  .book-cta__content {
    left: 31px;
    top: 79px;
    width: calc(100% - 62px);
    max-width: 288px;
  }

  .book-cta__heading {
    font-size: 32px;
    line-height: 1;
  }

  .book-cta__text {
    margin-top: 16px;
    font-size: 18px;
    line-height: 20px;
  }

  .book-cta__btn {
    width: 192px;
    min-height: 46px;
    margin-top: 44px;
    font-size: 20px;
  }

  /* CTA decor exports (nodes 1001:7855 / 1001:7856, gradient patches baked).
     Broom patch top is clipped so it cannot cover the button; sparkle gets
     z-index so the broom patch background does not erase the star. */
  .book-cta__broom {
    content: url("../../assets/img/subscription/m-broom.png");
    top: 314px;
    right: auto;
    left: 142px;
    width: 240.5px;
    clip-path: inset(34px 0 0 0);
  }

  .book-cta__sparkle {
    content: url("../../assets/img/subscription/m-stars-cta.png");
    left: 20px;
    top: 459px;
    width: 178.5px;
    z-index: 1;
  }

  /* --- FAQ --- */
  /* footer gap: 242 + footer's own 80 margin = 322 (main is flex, no collapse) */
  .faq-section {
    margin-top: 327px;
    margin-bottom: 242px;
  }

  /* the frame's off-grid FAQ block bleeds 4px past the 402 viewport — clip so
     the page keeps the no-horizontal-scroll invariant (renders identically) */
  html,
  body {
    overflow-x: clip;
  }

  /* the whole FAQ block sits 24px right of the container (bleeds 4px offscreen) */
  .faq-section__heading,
  .faq {
    margin-left: 24px;
    margin-right: -24px;
  }

  .faq-section__heading {
    font-size: 32px;
    line-height: 1.2;
  }

  .faq {
    margin-top: 23px;
  }

  .faq__item {
    padding-block: 0;
  }

  .faq__trigger {
    position: relative;
    min-height: 128px;
    padding: 24px 70px 24px 32px;
    font-size: 18px;
    line-height: 1.5;
  }

  /* chevron must not size the row; truth overlaps text zone */
  .faq__chevron {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
  }

  /* expanded card: text indents 24, chevron rides the right edge */
  .faq__item:has(.faq__trigger[aria-expanded="true"]) .faq__trigger {
    min-height: 0;
    padding: 66px 100px 22px 24px;
    align-items: flex-start;
  }

  .faq__item:has(.faq__trigger[aria-expanded="true"]) .faq__chevron {
    right: 0;
    top: 64px;
    transform: none;
  }

  .faq__answer {
    padding: 6px 0 46px 24px;
    font-size: 16px;
    line-height: 30px;
    color: #6f6c8f; /* frame paints the answer at full opacity */
  }

  /* frame wraps item 4 as "…or in the / office during the cleaning?" —
     needs more text width than the shared 70px chevron gutter allows */
  .faq .faq__item:nth-child(4) .faq__trigger {
    padding-right: 48px;
  }

  /* --- services --- */
  .services {
    margin-top: 469px;
    margin-bottom: 0;
  }

  .services__heading {
    font-size: 32px;
    line-height: 1.2;
  }

  .services__grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .svc-card {
    min-height: 0;
    padding: 16px 24px;
  }

  /* frame hand-sizes the four cards */
  .services__grid .svc-card:nth-child(1) { min-height: 245px; }
  .services__grid .svc-card:nth-child(2) { min-height: 257px; }
  .services__grid .svc-card:nth-child(3) { min-height: 263px; }
  .services__grid .svc-card:nth-child(4) { min-height: 261px; }

  .svc-card__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .svc-card__text {
    font-size: 16px;
    line-height: 23px;
  }

  .svc-card .link-more {
    padding-top: 0;
  }

  .dots--services {
    display: none;
  }
}