/* ==========================================================================
   Gleaming — landing page ("Calculate your price" funnel)
   Figma frames: desktop 1256:16075 (1440), mobile 1256:15341 (402)
   ========================================================================== */

/* The landing frame background is pure white (not the #FCFCFC page token) */
body {
  background: #FFFFFF;
}

/* Poppins appears only in this frame's process-step cards (OFL, self-hosted).
   Other pages keep the Inter body stack. */
@font-face {
  font-family: "Poppins";
  src: url("../../assets/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* ---- Page-level title styles (landing uses 60px/36px section titles) ---- */
.landing-title-lg {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 68px;      /* Figma big section titles: 68 on a 72px pitch */
  line-height: 72px;
  letter-spacing: 1.6px; /* Figma's CG cut tracks wider than Chrome's */
  text-align: center;
  color: var(--color-text-primary);
}

.landing-title-sm {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-primary);
}

/* Big single-line section titles ("Testimonials", "Our services", "FAQ") */
.landing-title-xl {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 68px;
  line-height: 86px;
  letter-spacing: 1.9px; /* matches Figma's wider CG tracking */
  text-align: center;
  color: var(--color-text-primary);
}

/* ---- Shared button variants used on this page --------------------------- */
.btn--white {
  background: var(--color-white);
  color: var(--color-primary-400);
  min-width: 343px;
}

/* translucent "liquid glass" pill (hero CTA, signup Subscribe) */
.btn--glass {
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-primary-400);
  min-width: 343px;
}

.btn--light {
  background: var(--color-primary-100);
  color: var(--color-primary-400);
  min-width: 343px;
}

/* ==========================================================================
   Hero — full-bleed photo behind the translucent header bars
   ========================================================================== */
.landing-hero {
  position: relative;
  margin-top: -174px; /* header: 96px navbar + 78px secondary bar */
  padding-top: 174px;
  padding-bottom: 73px; /* photo ends 742, dark band continues to 815 */
  min-height: 815px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #140801; /* flat band below the photo (Figma 742–815) */
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  color: var(--color-white);
}

.landing-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 742px; /* visible crop of Figma node "image 61" */
  object-fit: cover;
  object-position: center bottom;
}

.landing-hero__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 742px;
  /* Empirically fitted against the frame export: clear until ~27%, then
     ramps to 0.69 black at the photo bottom. */
  background: linear-gradient(180deg, rgba(2, 4, 35, 0) 27%, rgba(2, 4, 35, 0.69) 100%);
}

.landing-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

/* Figma text box 520x180 — 3 lines of 60px, explicit breaks in the design */
.landing-hero__title {
  max-width: 520px;
  margin-left: 9px; /* Figma text box sits at x=89, container at 80 */
  margin-bottom: 4px; /* title bottom 738 vs aside bottom 742 */
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: var(--leading-none);
  color: var(--color-white);
}

.landing-hero__title-accent {
  color: #898FEE; /* periwinkle "Gleaming," in the hero headline */
}

.landing-hero__aside {
  max-width: 520px;
  margin-right: -7px; /* Figma aside box at x=847..1367, past the 1360 container edge */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
}

/* The design clips the lead to 2 lines (Figma box 520x54) */
.landing-hero__aside p {
  max-height: 54px;
  overflow: hidden;
}

.landing-hero__aside .btn {
  min-width: 343px; /* Figma button 343x72 */
}

/* ==========================================================================
   Intro gallery — centered heading + 3 rounded photos (560/340/340)
   ========================================================================== */
.intro-gallery {
  padding: 122px 0 0; /* hero bottom 815 -> heading 937 */
}

.intro-gallery__heading {
  margin-bottom: 12px;
}

.intro-gallery__lead {
  max-width: 356px;
  margin-inline: auto;
  max-height: 54px; /* design clips the lead to 2 lines (356x54) */
  overflow: hidden;
  text-align: center;
}

.intro-gallery__grid {
  display: grid;
  grid-template-columns: 28fr 17fr 17fr;
  gap: 20px;
  margin-top: 72px;
}

.intro-gallery__grid img {
  width: 100%;
  height: 371px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Feature split — photo left, heading + checklist right
   ========================================================================== */
.feature-split {
  padding: 200px 0 0; /* gallery bottom 1532 -> heading 1732 */
}

.feature-split__inner {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 97px;
  align-items: start;
}

/* Figma heading box is 603x86 — one line of 68px ("Why choose us?") */
.feature-split__heading {
  max-width: 603px;
}

.feature-split__photo {
  width: 100%;
  height: auto;
  margin-top: 15px; /* photo sits 15px below the text top (1747 vs 1732) */
  border-radius: var(--radius-card);
}

.feature-split__heading {
  text-align: left;
  margin-bottom: 12px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

.check-list img {
  flex-shrink: 0;
}

/* ==========================================================================
   Price calculator — light lavender band with thin decorative wave curves
   ========================================================================== */
.calculator {
  position: relative;
  margin-top: 279px; /* feature photo bottom 2122 -> band top 2401 */
  padding: 149px 0 200px;
  background: #F4F5FF;
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--color-text-primary);
}

/* Baked backdrop (Figma vector waves can't be reproduced in CSS): section
   crop of the 1x frame export with heading + panel interiors erased. Fixed
   1440px and center-anchored so it stays aligned with the layout. */
.calculator__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.calculator__inner {
  position: relative;
}

.calculator__heading {
  max-width: 560px; /* forces the Figma wrap: "Know your price / before you book" */
  margin: 0 auto 83px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 68px;
  line-height: 72px;
  letter-spacing: 1.3px;
  text-align: center;
  color: var(--color-text-primary);
}

.calculator__cols {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* --- form panel --- */
.calculator__panel {
  position: relative;
  z-index: 1;
  flex: none;
  width: 678px;
  max-width: 100%;
  padding: 32px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.calc-field {
  border: 0;
  margin: 0;
  padding: 0;
}

.calc-field__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.4;
}

.calc-field__input {
  width: 100%;
  max-width: 522px;
  height: 64px;
  padding: 0 16px;
  background: #F6F6F6;
  border: 1px solid transparent;
  border-radius: 32px; /* pill field */
  font-size: var(--text-base);
}

.calc-field__input::placeholder {
  color: #C2C2C2;
}

.calc-seg {
  display: grid;
  max-width: 522px;
}

.calc-seg--service,
.calc-seg--size {
  grid-template-columns: repeat(3, 1fr);
}

.calc-seg--frequency {
  grid-template-columns: repeat(2, 1fr);
}

.calc-seg__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 8px 10px;
  background: #F0F0F0;
  border: 0;
  border-radius: 100px; /* individual pills, edge-to-edge */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: center;
}

.calc-seg--size .calc-seg__btn strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}

.calc-seg--size .calc-seg__btn span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-neutral-600);
}

.calc-seg--frequency .calc-seg__btn {
  min-height: 48px;
  font-size: 14px;
}

.calc-seg__btn.is-selected {
  position: relative;
  z-index: 1;
  background: var(--color-primary-400);
  color: var(--color-white);
}

.calc-seg__btn.is-selected span {
  color: rgba(255, 255, 255, 0.7);
}

/* --- result panel --- */
.calculator__result {
  position: relative;
  flex: 1;
  margin-left: -33px; /* Figma glass frame x=725 tucks 33px behind the form */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: #C8CCEB; /* translucent glass over the wave backdrop, flattened */
  border-radius: var(--radius-card);
}

.calculator__estimate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.calculator__estimate-label {
  font-family: var(--font-heading);
  font-size: var(--text-btn);
  line-height: var(--leading-body);
  color: #484848;
}

.calculator__price {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.2;
  color: var(--color-primary-400);
}

.calculator__book {
  background: var(--color-primary-400);
  color: var(--color-white);
  min-width: 344px;
}

.calculator__note {
  margin-top: 20px;
  font-size: var(--text-sm);
  color: #4E4E50;
}

.calculator__sparkle {
  position: absolute;
  pointer-events: none;
}

.calculator__sparkle--lg {
  top: 80px;
  right: 267px;
  width: 100px;
  height: auto;
}

.calculator__sparkle--sm {
  top: 67px;
  right: 267px;
  width: 43px;
  height: auto;
}

/* ==========================================================================
   Process — 4 columns with 3D numerals overhanging gradient cards
   ========================================================================== */
.process {
  padding: 290px 0 0; /* band bottom 3682 -> heading 3972 */
}

/* the whole process frame sits at x=70 (not 80) in the Figma page */
.process__heading {
  margin-left: -10px;
  margin-right: 10px;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 115px;
  margin-left: -10px; /* Figma process frame sits at x=70, container at 80 */
  margin-right: 10px;
  list-style: none;
}

.process__col {
  position: relative;
  padding: 76px 32px 52px;
  background: linear-gradient(180deg, #F8F9FC 0%, #EFF1F8 100%);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-card);
}

/* per-column card geometry (Figma columns 272/296/296/296, col 1 offset 12) */
.process__col--1 { margin-top: 12px; padding-top: 52px; min-height: 272px; }
.process__col--2 { padding-top: 76px; min-height: 296px; }
.process__col--3 { padding-top: 65px; min-height: 296px; }
.process__col--4 { padding-top: 52px; min-height: 296px; }

.process__num {
  position: absolute;
  top: -82px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.process__col:nth-child(2) .process__num {
  top: -104px;
}

.process__col:nth-child(3) .process__num,
.process__col:nth-child(4) .process__num {
  top: -114px;
}

.process__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  margin-inline: -8px; /* "We clean, you relax" stays on one line as in Figma */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}

.process__col--3 .process__title { min-height: 55px; }

.process__col p {
  max-width: 222px; /* card 2's longest Figma line is 221px */
  margin-top: 4px;
  margin-inline: auto;
  font-family: "Poppins", var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-align: center;
}

/* ==========================================================================
   Pricing — tab pills + 2x2 price cards
   ========================================================================== */
.pricing {
  padding: 338px 0 0; /* process cards bottom 4527 -> heading 4865 */
}

.pricing__heading {
  margin-bottom: 45px;
}

.pricing__tabs-wrap {
  display: flex;
  justify-content: center;
}

.pricing__tabs {
  padding: 4px;
  border-radius: var(--radius-pill);
}

.pricing__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-family: "Poppins", var(--font-body);
  font-weight: 400;
  font-size: 17px; /* width-matched against the frame export */
  color: var(--color-text-primary);
}

.pricing__tab[aria-selected="true"] {
  background: var(--color-primary-50);
  color: var(--color-text-primary);
}

.pricing__tab-chip {
  padding: 2px 8px;
  background: var(--color-primary-400);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-white);
}

.pricing__body {
  position: relative;
  display: flow-root; /* keep the 20px card-grid margins from collapsing */
  max-width: 1104px;
  margin: 24px auto 0;
}

/* Figma: white cards are inset 20px inside 552x284 grid cells */
.pricing__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 20px;
}

.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__label {
  font-size: var(--text-base);
  line-height: 1.4;
  color: #7F7F7F; /* sampled from the reference ("One room") */
}

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

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

.price-card__features li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.price-card__book {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn-lg);
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

/* ==========================================================================
   Membership intro — centered heading + lead + "Learn more"
   ========================================================================== */
.membership-intro {
  padding: 386px 0 0; /* price cards bottom 5626 -> heading 6012 */
  text-align: center;
}

/* Capped so the line breaks after "Rewarding" like the frame. */
.membership-intro__heading {
  letter-spacing: 2px;
  max-width: 1220px;
  margin-inline: auto;
}

.membership-intro__lead {
  max-width: 615px;
  margin: 33px auto 0;
  font-size: var(--text-md); /* Figma box 615x40 = 2 lines of 18/20 */
  line-height: 20px;
}

.membership-intro__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 38px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn-lg);
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

/* ==========================================================================
   Membership rows — full-bleed lavender bands
   ========================================================================== */
.member-rows {
  margin-top: 76px; /* learn-more bottom 6303 -> row 1 top 6379 */
}

.member-row {
  display: flex;
  align-items: flex-start;
  min-height: 609px;
  border-radius: var(--radius-card);
}

.member-row--1 {
  background: var(--color-primary-50);
}

.member-row--2 {
  margin-top: -50px; /* rows overlap 50px in the design (stacked cards) */
  background: var(--color-primary-100);
}

.member-row--3 {
  margin-top: -50px;
  background: #A0A5EC;
  min-height: 558px;
}

.member-row__inner {
  display: grid;
  grid-template-columns: 1fr 534px;
  align-items: start;
  gap: 0;
  padding-right: 177px; /* text column 729..1263 in the 1440 frame */
}

.member-row__img {
  justify-self: start;
  height: auto;
}

.member-row--1 .member-row__img { width: 374px; margin: 124px 0 0 83px; }
.member-row--2 .member-row__img { width: 461px; margin: 32px 0 0 49px; }
.member-row--3 .member-row__img { width: 452px; margin: 53px 0 0 22px; }

.member-row__content {
  margin-top: 146px; /* Figma text block y=146 in every row */
}

.member-row__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px; /* Figma box h=60 */
  line-height: 60px;
}

.member-row__content p {
  margin-top: 16px;
  font-family: "Poppins", var(--font-body);
  font-size: 17px; /* Figma box 534x40 = 2 lines of 17/20 */
  line-height: 20px;
}

.member-row__content .btn {
  margin-top: 44px;
}

/* ==========================================================================
   Testimonials — horizontal card strip (desktop/tablet only)
   ========================================================================== */
.testimonials {
  padding: 232px 0 0; /* rows bottom 8055 -> heading 8287 */
}

.testimonials__heading {
  margin-bottom: 93px;
}

.testimonials__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  margin-right: -80px; /* 4th card bleeds to the canvas edge in the design */
  padding-bottom: 114px;
}

.testimonial {
  position: relative;
  flex: 0 0 390px;
  padding: 32px 30px;
  background: var(--color-purple-100);
  border-radius: 24px;
}

.testimonial__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.testimonial__avatar {
  border-radius: 50%;
}

.testimonial__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-md); /* Figma box 107x20 = 18px */
  line-height: 20px;
  color: var(--color-neutral-800);
}

.testimonial__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-alt);
  font-size: var(--text-base);
  color: var(--color-neutral-800);
}

.testimonial__text {
  max-width: 330px;
  margin-top: 24px;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.testimonial__quote {
  position: absolute;
  left: 98px;
  bottom: -114px;
}

/* ==========================================================================
   Ready CTA — gradient panel with decorations
   ========================================================================== */
.ready-cta {
  /* quote marks bottom -> panel 9192 (+22 compensates the shorter quote PNG) */
  padding: 401px 0 0;
}

.ready-cta__panel {
  position: relative;
  overflow: hidden; /* the broom art is clipped by the panel in the design */
  min-height: 441px;
  padding: 79px 83px;
  /* fitted against the frame export: plateau then linear toward bottom-right */
  background: linear-gradient(114deg, #1E2CA2 27%, #A2AAFF 100%);
  border-radius: var(--radius-card);
  color: var(--color-white);
}

.ready-cta__content {
  position: relative;
  z-index: 1;
  max-width: 602px;
}

.ready-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px; /* Figma box 602x60 */
  line-height: 60px;
  color: var(--color-white);
}

.ready-cta__content p {
  max-width: 602px;
  margin-top: 16px;
  font-size: var(--text-base);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}

.ready-cta__content .btn {
  margin-top: 44px;
}

/* Figma box "image 102" is 466x466 at (927,-78); the exported PNGs are the
   338x428 broom crop + 182x210 stars crop, placed to reproduce it. */
.ready-cta__broom {
  position: absolute;
  top: -70px;
  right: 12px;
  width: 338px;
  height: 428px;
  pointer-events: none;
}

.ready-cta__stars {
  position: absolute;
  top: 170px;
  right: 315px;
  width: 160px;
  height: auto;
  pointer-events: none;
}

.ready-cta__bubble {
  position: absolute;
  pointer-events: none;
}

.ready-cta__bubble--lg {
  left: 744px;
  top: 388px;
  width: 262px;
  height: auto;
}

.ready-cta__bubble--sm {
  left: 880px;
  top: 374px;
  width: 122px;
  height: auto;
}

/* ==========================================================================
   Services cards — 4 shared cards + page-control dots
   ========================================================================== */
.services {
  padding: 220px 0 0; /* CTA panel bottom 9633 -> heading 9853 */
}

.services__heading {
  margin-bottom: 89px;
}

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

.services__card {
  min-height: 341px;
  padding-top: 31px;
  box-shadow: 0 24px 48px -20px rgba(23, 15, 73, 0.10);
}

.services__card .link-more {
  margin-top: auto;
}

.services__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 23px;
  padding: 28px 0;
}

.services__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary-100);
}

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

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-section {
  padding: 148px 0 0; /* services dots bottom 10459 -> heading 10607 */
}

.faq-section__heading {
  margin-bottom: 72px;
}

.faq__item {
  padding: 0 32px; /* accordion cards are inset 32px (Figma card x=32) */
  border-bottom: 1px solid #E9EAF3;
}

.faq__item:last-child {
  border-bottom: none;
}

.faq__item:has(button[aria-expanded="true"]) {
  background: var(--color-purple-100);
  border-radius: 24px;
  border-bottom: none;
}

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

.faq__q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 57px 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px;   /* Figma questions are 32px on the same 34px box */
  line-height: 34px;
  text-align: left;
  color: var(--color-neutral-800);
}

.faq__q button[aria-expanded="true"] {
  padding: 61px 0 32px;
}

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

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

.faq__a {
  padding: 0 0 61px;
}

.faq__a p {
  max-width: 1050px; /* wraps to 3 lines like the reference (Figma h=101) */
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--color-neutral-600);
}

/* Landing frame's footer instance raises the giant wordmark 22px compared
   to the shared component (verified against the 1256:16075 export).
   Desktop-only: unscoped it also beat components.css's mobile margin-top 52px
   (landing.css loads later), sinking landing's mobile wordmark 57px vs every
   other page. The GL2 mobile footer is identical across pages. */
@media (min-width: 768px) {
  .site-footer__wordmark {
    margin-top: -5px;
  }
}

/* ==========================================================================
   Sign up — navy panel with photo left, form right
   ========================================================================== */
.signup {
  /* FAQ bottom 11800 -> panel 12158; panel -> footer 288 (footer owns 80) */
  padding: 354px 0 213px;
}

.signup__panel {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 472px;
  padding: 60px 69px 80px;
  background: var(--color-primary-800);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--color-white);
}

.signup__photo {
  position: absolute;
  left: 0; /* the 2x asset is the panel-clipped region (Figma node clipped at 533x472) */
  top: 0;
  pointer-events: none;
}

.signup__content {
  position: relative;
  z-index: 1;
  max-width: 602px;
}

.signup__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px; /* Figma box 602x60 */
  line-height: 60px;
}

.signup__content > p {
  margin-top: 16px;
  font-size: var(--text-base);
  line-height: 1.25;
}

.signup__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  margin-top: 36px;
}

.signup__input {
  width: 100%;
  max-width: 522px;
  height: 64px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.5); /* glass field over the navy panel */
  border: 1px solid transparent;
  border-radius: 32px;
  font-size: var(--text-base);
  color: var(--color-primary-800);
}

.signup__input::placeholder {
  color: #5A5E85;
}

.signup__submit {
  min-width: 343px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-primary-800);
}

/* ==========================================================================
   Narrow desktop (1024–1279): let the calculator columns compress
   ========================================================================== */
@media (max-width: 1279px) {
  .calculator__panel {
    flex: 0 1 678px;
    min-width: 0;
  }

  .calculator__result {
    min-width: 280px;
    padding: 48px 24px;
  }

  .calculator__book {
    min-width: 0;
    width: 100%;
    max-width: 344px;
  }

  .calculator__sparkle--lg,
  .calculator__sparkle--sm {
    right: 90px;
  }

  .member-row__inner {
    padding-right: var(--page-pad, 80px);
  }
}

/* ==========================================================================
   Tablet (768–1023): compressed desktop layouts, hamburger header (96px)
   ========================================================================== */
@media (max-width: 1023px) {
  /* the baked desktop wave backdrop doesn't fit fluid layouts */
  .calculator__bg {
    display: none;
  }


  .landing-hero {
    margin-top: -96px;
    padding-top: 96px;
    padding-bottom: 0;
    min-height: 640px;
  }

  /* below desktop the photo fills the hero again (no exposed dark band) */
  .landing-hero__bg,
  .landing-hero__scrim {
    height: 100%;
  }

  .feature-split__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .calculator {
    margin-top: 160px;
    padding: 90px 0 110px;
  }

  .calculator__cols {
    flex-direction: column;
  }

  .calculator__panel {
    flex: none; /* the 1279 flex-basis would become a fixed height here */
    width: 100%;
  }

  .calculator__result {
    margin-left: 0;
    margin-top: 16px;
    padding: 64px 32px;
  }

  .intro-gallery,
  .feature-split {
    padding-top: 120px;
  }

  .process,
  .pricing,
  .membership-intro,
  .testimonials,
  .ready-cta,
  .services,
  .faq-section {
    padding-top: 160px;
  }

  .signup {
    padding: 160px 0 80px;
  }

  .process__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 140px;
  }

  .pricing__grid {
    gap: 24px;
  }

  .testimonials__track {
    margin-right: calc(-1 * var(--page-pad-tablet)); /* keep the bleed inside the viewport */
  }

  .member-row {
    align-items: center;
    min-height: 0;
    padding: 64px 0;
  }

  .member-row__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
    padding-right: var(--page-pad-tablet, 40px);
  }

  .member-row__content {
    margin-top: 0;
  }

  .member-row--1 .member-row__img,
  .member-row--2 .member-row__img,
  .member-row--3 .member-row__img {
    width: 100%;
    max-width: 380px;
    margin: 0;
  }

  .member-row__title {
    font-size: 40px;
    line-height: 1.2;
  }

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

  .ready-cta__broom {
    top: -40px;
    right: 0;
    width: 240px;
    height: 304px;
  }

  .ready-cta__stars {
    top: 130px;
    right: 220px;
    width: 110px;
  }

  .ready-cta__bubble--lg,
  .ready-cta__bubble--sm {
    display: none;
  }

  .signup__photo {
    left: -160px;
  }
}

/* mobile-only gallery cards (the GL2 mobile frame recomposes the gallery);
   hidden at >=768px so the desktop frame stays byte-identical */
@media (min-width: 768px) {
  .intro-gallery__mcard { display: none; }
}

/* ==========================================================================
   Mobile (<768): matches the 402px frame; section order per mobile design
   ========================================================================== */
@media (max-width: 767px) {
  /* mobile section order (cards section moves before the Ready CTA) */
  .landing-hero        { order: 1; }
  .intro-gallery       { order: 2; }
  .feature-split       { order: 3; }
  .calculator          { order: 4; }
  .process             { order: 5; }
  .pricing             { order: 6; }
  .membership-intro    { order: 7; }
  .member-rows         { order: 8; }
  .services            { order: 9; }
  .ready-cta           { order: 10; }
  .faq-section         { order: 11; }
  .signup              { order: 12; }

  .testimonials {
    display: none;
  }

  .landing-title-lg {
    font-size: 32px;
    line-height: 32px;  /* GL2 mobile: 3-line headings pitch exactly 32 */
    letter-spacing: 0;  /* mobile-size CG needs no extra tracking (wrap-critical) */
  }

  .landing-title-sm {
    font-size: 32px; /* Figma mobile section headings are 32px (h=38) */
  }

  .landing-title-xl {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0; /* truth "Pick your path"/"Our services" ink is untracked */
  }

  /* hero */
  .landing-hero {
    min-height: 558px; /* Figma 612 minus the 54px iOS status bar */
    align-items: flex-start;
  }

  .landing-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 104px;
    padding-bottom: 61px;
  }

  .landing-hero__title {
    max-width: 357px;
    margin-left: 0; /* mobile heading sits at the container edge (truth x=20),
                       unlike the desktop 9px inset */
    margin-bottom: 0;
    font-size: var(--text-display-mobile); /* 44px */
  }

  .landing-hero__aside {
    gap: 27px;
  }

  .landing-hero__aside p {
    max-height: 72px; /* 3 lines of 16/24 (Figma 357x72) */
  }

  .landing-hero__aside .btn {
    min-width: 237px; /* Figma 237x46 */
    /* mobile hero CTA is the solid brand-blue pill (truth fill = #1E2CA2),
       not the desktop white-glass pill */
    background: var(--color-primary-400);
    color: var(--color-white);
  }

  .landing-hero__aside .btn .btn__icon {
    filter: brightness(0) invert(1); /* blue arrow asset -> white, as in truth */
  }

  /* truth headline reads "Get your Space Gleaming," (capital S on mobile) */
  .landing-hero__title-cap {
    text-transform: capitalize;
  }

  /* mobile hero photo is the GL2 mobile frame's own export (node 1001:8462
     "image 61", 402x612 at frame y=0) with the frame's scrim rectangle
     (1001:8463) baked in; the top 54px sit behind the cropped status bar */
  .landing-hero__bg {
    content: url("../../assets/img/landing/m-hero.jpg");
    width: 100%;
    height: 612px;
    top: -54px;
    left: 0;
  }

  .landing-hero__scrim {
    display: none; /* scrim is baked into m-hero.jpg */
  }

  /* intro gallery */
  .intro-gallery {
    padding: 106px 0 0; /* hero 612 -> heading 718 */
  }

  .intro-gallery__lead {
    max-width: none;
    max-height: 48px; /* 2 lines of 16/24 (Figma 356x48) */
  }

  .intro-gallery__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 29px;
  }

  /* the mobile frame rebuilds the gallery cards: photo + caption + chip as
     separate nodes (desktop assets have captions baked in; card 3 changes
     from "Detailing" to "For Transport") */
  .intro-gallery__grid > img {
    display: none;
  }

  .intro-gallery__mcard {
    position: relative;
    overflow: hidden;
    height: 240px;
    margin: 0;
    border-radius: var(--radius-card);
  }

  /* m-gallery-1/2/3.jpg are 1:1 exports of the GL2 mobile Card frames
     (1001:8605 / 1001:8612 / 1001:8619, 362x240) with photo, caption and
     chip baked in, so the HTML caption/chip layers stay hidden */
  .intro-gallery__mcard > img {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  .intro-gallery__mcard figcaption,
  .intro-gallery__mchip {
    display: none;
  }

  .intro-gallery__mchip img {
    width: 24px;
    height: 24px;
    filter: brightness(0); /* blue arrow asset -> black, as in truth */
  }

  /* feature split: text first, photo below */
  .feature-split {
    padding: 157px 0 0;
  }

  .feature-split__inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 48px; /* truth: checklist bottom 2016 -> photo 2066 */
  }

  .feature-split__photo {
    margin-top: 0;
  }

  .feature-split__content > p {
    max-height: 96px; /* 4 lines of 16/24 (Figma 362x96) */
    overflow: hidden;
  }

  .check-list {
    gap: 16px;
    margin-top: 12px;
  }

  /* calculator */
  .calculator {
    margin-top: 104px;
    padding: 70px 0 86px;
    border-radius: var(--radius-panel);
  }

  .calculator__heading {
    max-width: 362px;
    margin-bottom: 50px;
    font-size: 32px;
    line-height: 32px; /* truth line pitch 32 (2477->2509) */
    letter-spacing: 0;
  }

  .calculator__panel {
    padding: 16px;
    gap: 48px;
  }

  .calc-field__input {
    height: 52px;
  }

  .calc-seg__btn {
    min-height: 52px;
    font-size: var(--text-sm);
  }

  .calc-seg--frequency .calc-seg__btn {
    min-height: 52px;
  }

  .calc-seg--size .calc-seg__btn {
    height: 52px; /* truth 52; two-line content otherwise pushes to 56 */
  }

  .calculator__result {
    margin-top: 10px;
    justify-content: flex-start;
    min-height: 321px; /* truth panel 3206-3527 */
    padding: 110px 24px 31px; /* truth: estimate label box at y=110 */
  }

  .calculator__estimate {
    gap: 4px; /* truth: label box bottom ~3337 -> price box 3340 */
    margin-bottom: 20px;
  }

  .calculator__estimate-label {
    font-size: var(--text-sm); /* Figma mobile label h=20 */
  }

  .calculator__note {
    margin-top: 11px;
    font-size: 12px; /* truth note ink h=10 */
  }

  .calculator__price {
    font-size: 44px; /* truth "€ 120" ink 31px tall, 101px wide */
  }

  .calculator__book {
    min-width: 197px; /* truth button 196x41 */
    width: auto;
    min-height: 41px;
    height: 41px;
    padding: 0 24px;
    font-size: 16px;
  }

  .calculator__sparkle--lg {
    top: 38px;
    right: auto;
    left: 153px;
    width: 57px;
  }

  .calculator__sparkle--sm {
    top: 31px;
    right: auto;
    left: 185px;
    width: 25px;
  }

  /* process */
  .process {
    padding-top: 165px;
  }

  .process__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 115px;
  }

  .process__col {
    padding: 87px 32px 52px;
    min-height: 244px;
  }

  /* per-col paddings measured off the truth (title ink offsets + card bottoms):
     heights land 244/244/234/253, matching the frame's 276/277/266 pitches */
  .process__col--1 { margin-top: 0; padding: 87px 32px 50px; min-height: 0; }
  .process__col--2 { padding: 87px 32px 50px; min-height: 0; }
  .process__col--3 { padding: 63px 32px 40px; min-height: 0; }
  .process__col--4 { padding: 72px 32px 50px; min-height: 0; }

  .process__title {
    min-height: 0;
    font-size: 24px;
    line-height: 1.2;
  }

  .process__col--3 .process__title { min-height: 0; }

  .process__col p {
    max-width: 268px; /* truth card text lines run ~245px; Chrome's Poppins is a
                         touch wider, 268 reproduces the truth wraps */
  }

  .process__col--3 .process__card p {
    max-width: 282px; /* col-3 truth wraps "…detail is / handled" — needs the
                         extra word on line 1 despite Poppins' wider advance */
  }

  /* truth breaks col-3's line 2 after "care." — Chrome's Poppins can't hit
     both wrap points with one max-width; a mobile-only <br> reproduces it
     (hidden ≥768px via the helper rule at the end of this file) */

  .process__num {
    width: auto;
    height: 183px;
    top: -82px;
  }

  .process__col:nth-child(2) .process__num {
    top: -83px;
  }

  .process__col:nth-child(3) .process__num,
  .process__col:nth-child(4) .process__num {
    height: 180px;
    top: -90px;
  }

  /* pricing */
  .pricing {
    padding-top: 66px;
  }

  .pricing__heading {
    margin-bottom: 49px; /* heading box bottom 5160 -> tab pills 5209 */
  }

  .pricing__tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0; /* truth pills start flush at x=20 */
  }

  .pricing__tab {
    padding: 8px 21px;
    font-size: 16px;
    line-height: 28px; /* uniform 44px pills, two wrapped rows (truth 5209-5297) */
  }

  .pricing__tab-chip {
    padding: 2px 6px;
    line-height: 24px; /* truth chip h=28 */
  }

  .pricing__body {
    margin-top: 24px;
  }

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

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

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

  .price-card__book {
    margin-top: 20px;
    font-size: var(--text-md);
  }

  /* membership intro */
  .membership-intro {
    padding-top: 166px;
  }

  .membership-intro__lead {
    max-width: 340px; /* reproduces the truth's 4-line wrap (line1 331 wide) */
    margin-top: 26px;
    font-size: 16px;
    line-height: 18px; /* truth: 4 tight lines, pitch 18 (6487->6541) */
  }

  .membership-intro__more {
    margin-top: 26px;
  }

  /* membership rows */
  .member-rows {
    margin-top: 57px;
  }

  .member-row {
    align-items: flex-start;
    min-height: 0;
    padding: 54px 0 68px;
  }

  /* per-row spacing measured off the truth (rows are hand-laid in Figma) */
  .member-row--1 { padding-bottom: 68px; }  /* row pitch 533 */
  .member-row--2 { padding-bottom: 100px; } /* row pitch 575 */
  .member-row--3 { padding-bottom: 52px; }  /* row height 581 */
  .member-row--2 .member-row__inner { gap: 56px; }
  .member-row--3 .member-row__inner { gap: 42px; }

  .member-row--1 {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .member-row__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 59px; /* image bottom 254 -> text 313 */
    padding-right: var(--page-pad-mobile);
  }

  .member-row__img {
    align-self: center;
  }

  .member-row--1 .member-row__img { width: 200px; margin: 0; }
  .member-row--2 .member-row__img { width: 231px; margin: 0; }
  .member-row--3 .member-row__img { width: 231px; margin: 0; }

  .member-row__content {
    display: flex;
    flex-direction: column;
    align-items: center; /* truth mobile rows are center-aligned */
    width: 100%;
    margin-top: 0;
    text-align: center;
  }

  .member-row__title {
    font-size: 32px;
    line-height: 1.0;
  }

  .member-row__content p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 18px; /* truth text pitch 18 (row3: 8160->8178->8197) */
    letter-spacing: -0.2px; /* Chrome Poppins runs wider than the frame's cut */
  }

  /* truth text boxes are hand-sized per row (line wraps measured off the frame) */
  .member-row--1 .member-row__content p { max-width: 352px; }
  .member-row--3 .member-row__content p { max-width: 345px; }

  .member-row__content .btn {
    align-self: center;
    min-width: 231px;
    min-height: 56px; /* Figma mobile row button 231x56 */
  }

  /* ready CTA */
  .ready-cta {
    padding: 217px 0 0; /* services 9784 -> panel 10001 */
  }

  .ready-cta__panel {
    min-height: 718px;
    padding: 79px 31px 0;
    /* the mobile frame's gradient is near-horizontal: solid #1E2CA2 until ~8%,
       ramping right (and slightly down) to ~#99A4F8 (sampled off the truth) */
    background: linear-gradient(96deg, #1E2CA2 8%, #99A4F8 100%);
  }

  .ready-cta__title {
    font-size: 32px;
    line-height: 1.0;
  }

  .ready-cta__content {
    max-width: 278px; /* truth wraps "...for staying / with us." */
  }

  .ready-cta__content .btn {
    min-width: 192px;
  }

  .ready-cta__broom {
    /* fitted vs truth: 219x278 at panel (140,387) */
    top: 387px;
    right: 3px;
    width: 219px;
    height: 278px;
  }

  .ready-cta__stars {
    /* truth shows the star pair at the panel's bottom-left (127x147 @ 26,488) */
    top: 488px;
    right: auto;
    left: 26px;
    width: 127px;
  }

  .ready-cta__bubble--lg,
  .ready-cta__bubble--sm {
    display: none; /* no bubbles on the mobile frame's CTA panel */
  }

  /* services */
  .services {
    padding: 217px 0 0; /* rows 8419 -> heading 8636 */
  }

  .services__heading {
    margin-bottom: 24px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .services__card {
    min-height: 245px;
    gap: 20px;       /* truth: icon 64 -> title box 84 -> text box 130 */
    padding-top: 16px;
    padding-bottom: 14px; /* truth: Book box at 207 in the 245 card */
  }

  .services__card .card__title {
    font-size: 24px; /* Figma mobile card heading h=31 */
    line-height: 26px;
  }

  .services__card .card__text {
    font-size: 16px; /* truth text pitch 24 (16/1.5); desktop is 18/27 */
  }

  .services__dots {
    display: none; /* no page control on the mobile frame */
  }

  /* FAQ */
  .faq-section {
    padding: 134px 0 0; /* CTA panel 10719 -> heading 10853 */
  }

  .faq-section__heading {
    margin-bottom: 24px;
  }

  .faq__item:has(button[aria-expanded="true"]) {
    padding: 0 24px;
  }

  .faq__q button {
    position: relative;
    padding: 32px 46px 32px 0; /* truth question box ~285 wide, text runs under the chevron */
    font-size: var(--text-btn); /* 20px, as desktop */
    line-height: 27px;  /* truth line pitch 27 */
  }

  /* chevron is vertically centered and out of flow (truth items are exactly
     32 + lines*27 + 32 tall; the 60px circle must not set the row height) */
  .faq__q button .faq__chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .faq__q button[aria-expanded="true"] {
    padding: 75px 46px 32px 0; /* truth: expanded item top 10979 -> question ink 11061 */
  }

  /* item 4's paddings are hand-nudged in the frame (25/30, 3-line question) */
  .faq__item:nth-child(4) .faq__q button {
    padding-top: 25px;
    padding-bottom: 30px;
  }

  .faq__a {
    margin-right: -17px; /* truth answer box runs to x375, past the item padding */
    padding-bottom: 55px;
  }

  .faq__a p {
    font-size: var(--text-base);
    line-height: 30px; /* truth answer pitch 30 (11145->11175->...) */
  }

  /* signup: full-bleed panel with the photo below the form */
  .signup {
    padding: 132px 0 246px; /* truth panel top 11881; render FAQ runs 2px long,
                               so 132 (not the Figma 134) re-syncs the panel,
                               photo and footer with the truth */
  }

  .signup .container {
    padding-inline: 0;
  }

  .signup__panel {
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: 60px 25px 0;
    border-radius: var(--radius-card);
  }

  .signup__photo {
    /* GL2 mobile frame's own export (node 1001:8854 "Frame 26", panel-clipped
       to the visible 402x358 region) */
    content: url("../../assets/img/landing/m-signup.jpg");
    position: static;
    order: 2;
    align-self: flex-start;
    width: 402px;
    max-width: none;
    margin: 97px -25px 0; /* truth: button bottom 342 -> photo 439 */
    height: 358px; /* truth photo band 12320-12678 */
  }

  .signup__title {
    font-size: 32px;
    line-height: 1.25;
  }

  .signup__content p {
    max-width: 340px; /* truth wraps "...thank you / for staying with us." */
  }

  .signup__form {
    gap: 22px;
    margin-top: 48px;
  }

  .signup__input {
    height: 44px;
  }

  .signup__submit {
    min-width: 202px;
    min-height: 52px; /* Figma mobile 202x52 */
  }
}

/* mobile-only hard break helper (used by the process col-3 body): a <br>
   that exists only under 768px — desktop/tablet render the plain space */
@media (min-width: 768px) {
  .u-br-mobile {
    display: none;
  }
}