/* =============================================
   SCHWAY — HEADER COMPONENT
   Figma source: node 17:122
   Naming convention: BEM (Block__Element--Modifier)
   ============================================= */


/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  --schway-blue:  #0075f5;
  --color-white:  #ffffff;
  --color-black:  #000000;
  --color-dark:   #262626;
}


/* =============================================
   RESET / BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Barlow', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}


/* =============================================
   HEADER BLOCK
   Full-bleed blue section wrapping the card.
   ============================================= */
.header {
  background-color: var(--schway-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
  padding: 66px 20px;
  position: relative;           /* needed for overlay + smiley positioning */
  overflow: hidden;
}


/* =============================================
   HEADER__OVERLAY
   33:237 — Blue Mask Group. Soft-light glow
   decorative layer, clipped to a circle.
   Only visible on the blue background.
   ============================================= */
.header__overlay {
  position: absolute;
  width: 460px;
  height: 460px;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0.5;
}

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


/* =============================================
   HEADER__CARD
   White centered content card.
   1000px max-width matches Figma exactly.
   ============================================= */
.header__card {
  background-color: var(--color-white);
  width: 100%;
  max-width: 1000px;
  min-height: 567px;           /* Figma card height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;                   /* space between text-block and lower row */
  padding: 60px 30px;
}


/* =============================================
   HEADER__TEXT-BLOCK
   Stacked eyebrow + headline, centered.
   ============================================= */
.header__text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}


/* =============================================
   HEADER__EYEBROW
   "A Staff Member In A Box"
   Barlow Black · 36px · black
   ============================================= */
.header__eyebrow {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 36px;
  line-height: 24px;
  color: var(--color-black);
}


/* =============================================
   HEADER__HEADLINE
   "Not Another Software Subscription."
   Barlow Black · 72px · schway-blue
   ============================================= */
.header__headline {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 72px;
  line-height: 61px;
  color: var(--schway-blue);
  text-align: center;
  max-width: 781px;            /* matches Figma text width */
}


/* =============================================
   HEADER__LOWER
   Flex row: left mascot | body copy | right mascot.
   align-items: center keeps smileys vertically
   centered with the paragraph.
   ============================================= */
.header__lower {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}


/* =============================================
   SMILEY — COMPOSITE MASCOT COMPONENT
   35:272 / 35:282 — 6-layer illustration.
   Base circle + mouth + 2 eyes + 2 blush marks,
   all using percentage insets from Figma.
   ============================================= */
.smiley {
  position: relative;
  width: 121px;
  height: 121px;
  flex-shrink: 0;
}

/* Base yellow circle */
.smiley__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Shared layer positioning — children fill their parent div */
.smiley__layer {
  position: absolute;
}

.smiley__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mouth / Subtract — inset: top right bottom left from Figma */
.smiley__mouth      { top: 50.41%; right: 37.19%; bottom: 37.19%; left: 38.02%; }

/* Left eye (same in both states) */
.smiley__eye--left { top: 41.32%; right: 66.94%; bottom: 43.8%; left: 18.18%; }

/* Right eye — Default state: slightly lower position, different asset */
.smiley__eye--right-default { top: 47.11%; right: 17.36%; bottom: 49.59%; left: 67.77%; }

/* Right eye — Hover state: same position as left eye */
.smiley__eye--right-hover   { top: 41.32%; right: 17.36%; bottom: 43.8%;  left: 67.77%; }

/* Blush positions */
.smiley__blush--left  { top: 59.5%; right: 66.94%; bottom: 25.62%; left: 18.18%; }
.smiley__blush--right { top: 59.5%; right: 17.36%; bottom: 25.62%; left: 67.77%; }

/* =============================================
   SMILEY HOVER STATE TRANSITIONS
   Default → Hover: light blush fades to red,
   right eye asset/position crossfades.
   transition: all 0.3s ease-in-out per spec.
   ============================================= */

/* Open-eye / red-blush state visible by default */
.smiley__blush--red,
.smiley__eye--right-hover {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Winking / light-blush state hidden by default */
.smiley__blush--light,
.smiley__eye--right-default {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* On hover: crossfade to winking state */
.smiley:hover .smiley__blush--red,
.smiley:hover .smiley__eye--right-hover {
  opacity: 0;
}

.smiley:hover .smiley__blush--light,
.smiley:hover .smiley__eye--right-default {
  opacity: 1;
}

/* Right smiley drop shadow — Figma: 0px 4px 4px rgba(0,0,0,0.25) */
.smiley--shadow {
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}


/* =============================================
   HEADER__BODY
   Descriptive paragraph copy.
   Barlow Medium · 20px · #262626
   ============================================= */
.header__body {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-dark);
  text-align: center;
  max-width: 611px;            /* matches Figma text width */
}


/* =============================================
   THE PLAN — SECTION BLOCK
   Cream background section. Figma node 17:162
   ============================================= */
.plan {
  background-color: #f5eddf;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 887px;             /* Figma section height */
  padding: 80px 20px;
}


/* =============================================
   PLAN__CARD
   Browser-window style card.
   Asymmetric border creates the offset-shadow
   "comic book" effect from Figma.
   ============================================= */
.plan__card {
  background-color: #fffef5;
  width: 100%;
  max-width: 750px;
  border-top:    4px  solid var(--color-black);
  border-left:   4px  solid var(--color-black);
  border-right:  12px solid var(--color-black);
  border-bottom: 12px solid var(--color-black);
  border-radius: 32px;
  overflow: hidden;
}


/* =============================================
   PLAN__CARD-TITLEBAR
   Blue rounded-top bar that mimics a browser
   window chrome. Recreated in pure CSS from
   the Figma "Subtract" vector shape.
   ============================================= */
.plan__card-titlebar {
  background-color: var(--schway-blue);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
}


/* =============================================
   PLAN__CARD-CLOSE
   Circle X button — top-right of title bar.
   Figma: Ellipse7 + Braah One "X" text.
   ============================================= */
.plan__card-close {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
  font-family: 'Braah One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.plan__card-close:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}


/* =============================================
   PLAN__CARD-BODY
   Inner content area with padding.
   ============================================= */
.plan__card-body {
  padding: 40px 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}


/* =============================================
   PLAN__PRICING
   Centered label + price + tagline stack.
   ============================================= */
.plan__pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

/* "THE PLAN" — Barlow Bold · 20px · #262626 */
.plan__label {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-dark);
  letter-spacing: 0.05em;
}

/* "$500/month" — Barlow Black · 72px · schway-blue */
.plan__price {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 86px;
  color: var(--schway-blue);
}

/* Tagline — Barlow Bold · 20px · #262626 */
.plan__tagline {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-dark);
  text-align: center;
}


/* =============================================
   PLAN__FEATURES
   Two-column grid of accordion feature items.
   Matches Figma's left/right column layout.
   ============================================= */
.plan__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

.plan__features-col {
  display: flex;
  flex-direction: column;
}


/* =============================================
   PLAN__ITEM
   Each <details> accordion row.
   Bottom border acts as the "Active Line" divider.
   ============================================= */
.plan__item {
  border-bottom: 1px solid #003057;
}

.plan__item:first-child {
  border-top: 1px solid #003057;
}


/* =============================================
   PLAN__ITEM-TITLE
   <summary> row — feature name + chevron icon.
   Barlow Bold · 20px · #003057 (navy)
   ============================================= */
.plan__item-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #003057;
  list-style: none;              /* remove default <details> marker */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
}

/* Remove WebKit default disclosure triangle */
.plan__item-title::-webkit-details-marker {
  display: none;
}

/* CSS chevron using border trick */
.plan__item-title::after {
  content: '';
  width:  9px;
  height: 9px;
  border-right: 2px solid #003057;
  border-top:   2px solid #003057;
  transform: rotate(-45deg);     /* points right = collapsed */
  flex-shrink: 0;
  transition: transform 0.3s ease-in-out;
}

/* Chevron points up when expanded */
details[open] > .plan__item-title::after {
  transform: rotate(-135deg);
}


/* =============================================
   PLAN__ITEM-DESC
   Expanded feature description.
   Barlow Regular · 18px · #003057
   ============================================= */
.plan__item-desc {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #003057;
  padding-bottom: 14px;
}


/* =============================================
   HOW IT STARTS — SECTION BLOCK
   Lavender background. Figma node 17:203
   ============================================= */
.how-it-starts {
  background-color: #cbd0e5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 581px;
  padding: 80px 20px;
}


/* =============================================
   HOW-IT-STARTS__INNER
   Two-column flex row: left text | right sprint.
   Max-width matches other page sections.
   ============================================= */
.how-it-starts__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1000px;
}


/* =============================================
   HOW-IT-STARTS__LEFT
   Text content column — fills available space.
   ============================================= */
.how-it-starts__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* =============================================
   HOW-IT-STARTS__HEADING
   "How It Starts" — Barlow Black · 48px · blue
   ============================================= */
.how-it-starts__heading {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 48px;
  line-height: 58px;
  color: var(--schway-blue);
}


/* =============================================
   HOW-IT-STARTS__BODY
   Body copy paragraphs — Barlow SemiBold · 20px
   ============================================= */
.how-it-starts__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-it-starts__body p {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #0d0d0d;
}


/* =============================================
   HOW-IT-STARTS__QUOTE
   Green quote box. Background recreated from
   the Figma "Green Box" asset (quote-box.svg).
   Barlow Medium · 18px · #0d0d0d
   ============================================= */
.how-it-starts__quote {
  background-color: #d4f0dc;    /* light green matching quote-box.svg */
  border-radius: 8px;
  padding: 12px 32px;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #0d0d0d;
  font-style: normal;           /* override browser default italic on <blockquote> */
}


/* =============================================
   HOW-IT-STARTS__RIGHT
   Sprint frame column — fixed width from Figma.
   ============================================= */
.how-it-starts__right {
  flex: 0 0 477px;
}


/* =============================================
   HOW-IT-STARTS__SPRINT-FRAME
   Decorative corner-circle border frame.
   The sizing-frame.png asset is used as an
   absolutely-positioned overlay; content sits
   inside with relative positioning.
   ============================================= */
.how-it-starts__sprint-frame {
  position: relative;
  width: 477px;
  min-height: 389px;
}

.how-it-starts__sprint-frame-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}


/* =============================================
   HOW-IT-STARTS__SPRINT-CONTENT
   Content layer inside the frame — padded so
   text clears the corner circles.
   ============================================= */
.how-it-starts__sprint-content {
  position: relative;           /* sits above the frame bg img */
  padding: 48px 48px 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* =============================================
   HOW-IT-STARTS__SPRINT-TITLE
   "THE ONBOARDING SPRINT"
   Barlow Bold · 30px · schway-blue
   ============================================= */
.how-it-starts__sprint-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: var(--schway-blue);
}


/* =============================================
   HOW-IT-STARTS__CHECKLIST
   Vertical list of sprint items.
   ============================================= */
.how-it-starts__checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-it-starts__checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #0d0d0d;
}


/* =============================================
   HOW-IT-STARTS__CHECKBOX
   Green check box recreated in pure CSS.
   Figma: 24×24px, #24d95a bg, 1px black border,
   4px border-radius, white checkmark via ::after.
   ============================================= */
.how-it-starts__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background-color: #24d95a;
  border: 1px solid var(--color-black);
  border-radius: 4px;
}

/* CSS checkmark using rotated border */
.how-it-starts__checkbox::after {
  content: '';
  width:  10px;
  height:  6px;
  border-left:  2.5px solid white;
  border-bottom: 2.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}


/* =============================================
   PERSPECTIVE — SECTION BLOCK
   24:204 — Cream (#f5eddf) background section.
   52:313 — Pink pill banner at the top.
   ============================================= */
.perspective {
  background-color: #f5eddf;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 400px;
  padding: 80px 20px;
}

.perspective__inner {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}


/* =============================================
   PERSPECTIVE__BANNER
   52:313 — Pink pill with magnifying glass icon
   and "Let's Put That Into Perspective_" label.
   Pink bg: #ffc3c2 · 4px black border · 14px radius
   ============================================= */
.perspective__banner {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: #ffc3c2;
  border: 4px solid var(--color-black);
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
}

/* Magnifying glass icon column */
.perspective__banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 10px 20px;
  flex-shrink: 0;
}

.perspective__banner-icon img {
  /* Scales with viewport — clamp keeps it between 36px and 60px */
  width: clamp(36px, 7vw, 60px);
  height: auto;
}

/* "Let's Put That Into Perspective_" text */
.perspective__banner-text {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  /* Fluid: shrinks to 16px on small screens, max 36px on large */
  font-size: clamp(16px, 3.2vw, 36px);
  line-height: 1.25;
  color: var(--color-black);
  padding: 12px 16px 12px 8px;
}


/* =============================================
   PERSPECTIVE__COMPARE
   Three-column comparison card grid.
   Cards: 309×520px, 36px gap, border-radius 22px.
   ============================================= */
.perspective__compare {
  display: flex;
  flex-direction: row;
  gap: 36px;
  width: 100%;
  /* Touch-scrollable horizontal gallery with CSS scroll snap */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar visually but keep it functional */
  scrollbar-width: none;
  padding-bottom: 8px;          /* prevent card shadow clipping */
}

.perspective__compare::-webkit-scrollbar {
  display: none;
}

.compare-card {
  border-radius: 22px;
  min-height: 520px;
  padding: 28px 24px;
  /* Each card snaps into place and stays a fixed width */
  flex: 0 0 309px;
  scroll-snap-align: start;
}

.compare-card--white { background-color: var(--color-white); }
.compare-card--gray  { background-color: #d9d9d9; }

/* Compare card header */
.compare-card__header {
  margin-bottom: 20px;
}

.compare-card__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: normal;
  color: var(--color-black);
}

.compare-card__price {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: normal;
  color: var(--color-black);
}

/* Compare card label/value list */
.compare-card__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.compare-card__label {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  text-transform: uppercase;
  margin-top: 12px;
}

.compare-card__value {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  margin-left: 0;
}


/* =============================================
   PERSPECTIVE__FEATURES
   Staggered two-column layout for feature cards.
   Left col: text block + yellow + pink.
   Right col: blue + lavender (offset ~200px down).
   ============================================= */
.perspective__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: start;
  width: 100%;
}

/* Right column starts lower to create stagger */
.perspective__features-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.perspective__features-col--right {
  padding-top: 215px;  /* Figma: blue card (top 3028) vs yellow card (top 3228) = 200px stagger,
                          +15px to align blue card baseline with Build Trust text */
}


/* =============================================
   PERSPECTIVE__FEATURE-TEXT
   Standalone "Build Trust & Credibility" block
   (no card background — node 24:216)
   ============================================= */
.perspective__feature-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perspective__feature-text-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 43px;
  color: #262626;
}

.perspective__feature-text-body {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #1a1a1a;
}


/* =============================================
   PERSPECTIVE__FEATURE-CARD
   Large rounded cards — 460×460px in Figma.
   border-radius: 56px (very rounded corners).
   ============================================= */
.perspective__feature-card {
  border-radius: 56px;
  min-height: 400px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.perspective__feature-card--blue    { background-color: #3272ec; }
.perspective__feature-card--yellow  { background-color: #ffb106; }
.perspective__feature-card--lavender { background-color: #cbd0e5; }
.perspective__feature-card--pink    { background-color: #ffc3c2; }

/* Card content wrapper (needed for blue card's overlay) */
.perspective__feature-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Feature card title */
.perspective__feature-card-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 43px;
  color: #262626;
}

/* Title color modifiers */
.perspective__feature-card-title--white { color: var(--color-white); }
.perspective__feature-card-title--blue  { color: var(--schway-blue); }

/* Feature card body text */
.perspective__feature-card-body {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #262626;
}

.perspective__feature-card-body--white { color: var(--color-white); }

/* Blue card overlay — 33:237 Blue Mask Group texture.
   Positioned at exact Figma offsets within the 460×460 card:
   texture (318×228px) sits at left 146px, top 234px.
   mix-blend-mode: soft-light creates the mosaic glow effect. */
.perspective__feature-card-overlay {
  position: absolute;
  left: 146px;
  top: 234px;
  width: 318px;
  height: 228px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.perspective__feature-card-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Pixel-art heart image — bottom-right of blue card */
.perspective__feature-card-img {
  position: absolute;
  bottom: 32px;
  right: 32px;
  width: 154px;
  height: 104px;
  object-fit: contain;
  z-index: 1;
}


/* =============================================
   RESPONSIVE — TABLET  (≤ 900px)
   ============================================= */
@media (max-width: 900px) {
  .header__headline {
    font-size: 52px;
    line-height: 54px;
  }

  .header__card {
    gap: 32px;
    padding: 48px 24px;
  }

  .plan__price {
    font-size: 56px;
    line-height: 68px;
  }

  .plan__card-body {
    padding: 32px 36px 48px;
  }
}


/* =============================================
   RESPONSIVE — MOBILE  (≤ 640px)
   Stack mascots above and below body copy.
   Single-column feature list for plan.
   ============================================= */
@media (max-width: 640px) {
  .header {
    padding: 40px 16px;
    min-height: unset;
  }

  .header__card {
    padding: 36px 20px;
    gap: 20px;
    min-height: unset;
  }

  .header__headline {
    font-size: 34px;
    line-height: 38px;
  }

  .header__eyebrow {
    font-size: 18px;
    line-height: 22px;
  }

  /* Body text takes full width on its own row, smileys sit side-by-side below */
  .header__lower {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .header__body {
    flex: 0 0 100%;            /* force body text onto its own full-width row */
    order: -1;                 /* body text appears before smileys */
    font-size: 16px;
    text-align: center;
  }

  /* Smileys smaller on mobile — sit side by side */
  .smiley {
    width: 80px;
    height: 80px;
  }

  .perspective__banner-text {
    font-size: 24px;
    line-height: 30px;
  }

  /* .perspective__compare stays horizontal — scroll snap handles all screen sizes */

  .perspective__features {
    grid-template-columns: 1fr;  /* single column on tablet */
  }

  .perspective__features-col--right {
    padding-top: 0;
  }

  .header__overlay {
    display: none;             /* hide decorative overlay on small screens */
  }

  .how-it-starts__inner {
    flex-direction: column;
  }

  .how-it-starts__right {
    flex: unset;
    width: 100%;
  }

  .how-it-starts__sprint-frame {
    width: 100%;
  }

  .plan {
    padding: 48px 16px;
    min-height: unset;
  }

  .plan__card-body {
    padding: 24px 20px 36px;
    gap: 28px;
  }

  .plan__price {
    font-size: 48px;
    line-height: 56px;
  }

  .plan__features {
    grid-template-columns: 1fr;  /* single column on mobile */
  }

  .plan__features-col:last-child .plan__item:first-child {
    border-top: 1px solid #003057;
  }
}