/* =============================================================
   Blissful Birth Co, TENS Hire Website
   Single-page marketing site styles
   ============================================================= */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Brand palette (locked per the plan, do not change without sign-off) */
  --teal:           #366560;  /* page background, deep brand */
  --teal-dark:      #284a46;  /* hover / shadow accents */
  --teal-darker:    #1c3633;  /* footer */
  --lavender:       #c98fd8;  /* primary CTA / accents (white text on top) */
  --lavender-dark:  #ad6dc2;  /* hover */
  --lavender-soft:  #e7d1ff;  /* card surface (dark grey text on top) */
  --cream:          #fbf5e9;  /* foreground text on teal */
  --cream-dim:      #ede5d5;  /* secondary text on teal */
  --ink:            #2a2330;  /* dark grey text on light surfaces */
  --ink-soft:       #5a4d62;  /* secondary text on light surfaces */
  --border-soft:    rgba(251, 245, 233, 0.18); /* card borders on teal bg */

  /* Type scale */
  --font-display:   'Caprasimo', 'Tan Tangkiwood', Georgia, serif;
  --font-script:    'Pacifico', 'Brush Script MT', cursive;
  --font-body:      'Nunito', system-ui, -apple-system, sans-serif;

  /* Layout */
  --content-max:    1120px;
  --radius:         16px;
  --radius-lg:      22px;
  --shadow-card:    0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.18);
}

/* ── Reset / base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--teal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Anchored scroll offset so the sticky header doesn't cover section titles */
section[id] { scroll-margin-top: 90px; }

/* ── Reusable utilities ──────────────────────────────────────── */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lavender);
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--cream);
}
.section-lead {
  font-size: 1.05rem;
  color: var(--cream-dim);
  max-width: 640px;
  margin: 0 0 36px;
}
/* Centred section header (eyebrow + title + lead together).
   Used on Pricing + How it works to match the bigger marketing layout. */
.section-header-centered { text-align: center; }
.section-header-centered.section-lead { margin-left: auto; margin-right: auto; }
.section-title--xl {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--lavender-soft);
  max-width: none;
  letter-spacing: -0.01em;
}

/* Section vertical rhythm. All sections share the same teal page
   background; the eyebrow + title + spacing carry the visual rhythm.
   The `--soft` modifier is kept as a no-op so existing markup doesn't
   need to change, but it no longer alters the background. */
.section { padding: 56px 0; }
.section--soft { background: transparent; }
@media (max-width: 720px) { .section { padding: 40px 0; } }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--lavender);
  color: #fff;
}
.btn--primary:hover {
  background: var(--lavender-dark);
  transform: translateY(-1px);
}
.btn--soft {
  background: var(--lavender-soft);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(231, 209, 255, 0.18);
}
.btn--soft:hover {
  background: #f0e0ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(231, 209, 255, 0.28);
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--border-soft);
}
.btn--ghost:hover {
  background: rgba(251, 245, 233, 0.08);
  border-color: var(--cream);
}
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }

/* ── Header ──────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(54, 101, 96, 0.88);
  border-bottom: 1px solid var(--border-soft);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 22px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header__logo img {
  height: 76px;
  width: auto;
  object-fit: contain;
}
.header__logo-text {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--cream);
  line-height: 1;
}
@media (max-width: 560px) { .header__logo img { height: 56px; } }

/* Desktop inline nav: anchor links between the logo and Book Now.
   Hides on narrow viewports, the hamburger drawer takes over on mobile
   so the full set of nav items is still reachable. */
.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: 24px;
}
.header__nav a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  transition: color 0.15s;
  white-space: nowrap;
}
.header__nav a:hover { color: var(--lavender-soft); }
.header__cta { flex-shrink: 0; }

/* Hamburger button. Three lines that morph into an X when active.
   Hidden on desktop (inline nav is visible); shown on mobile. */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background 0.15s;
}
@media (max-width: 880px) {
  .header__nav, .header__cta { display: none; }
  .hamburger { display: flex; }
}
.hamburger:hover { background: rgba(251, 245, 233, 0.10); }
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s;
}
.hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Menu drawer: slides in from the right with a scrim covering the page. */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 54, 51, 0.55);
  backdrop-filter: blur(4px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.menu-scrim.open { opacity: 1; pointer-events: auto; }

.menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--teal-darker);
  border-left: 1px solid var(--border-soft);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  z-index: 70;
  padding: 80px 28px 28px;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.2, .8, .25, 1);
  display: flex;
  flex-direction: column;
}
.menu-drawer.open { transform: translateX(0); }
.menu-drawer__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.menu-drawer__close:hover { background: rgba(251, 245, 233, 0.10); }
.menu-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-drawer__list a {
  display: block;
  padding: 14px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--cream);
  transition: background 0.12s, color 0.12s;
}
.menu-drawer__list a:hover { background: rgba(201, 143, 216, 0.16); color: var(--lavender-soft); }
.menu-drawer__cta { margin-top: auto; justify-content: center; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding: 90px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lavender-soft);
  margin-bottom: 28px;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  line-height: 1.04;
  margin: 0 0 28px;
  color: var(--lavender-soft);
  max-width: 18ch;
  letter-spacing: -0.01em;
}
/* Script-styled word inside the headline (e.g. "blissful"). Uses the
   Pacifico script font with a deeper lavender so it pops against the
   softer lavender of the rest of the headline. */
.hero__script {
  font-family: var(--font-script);
  color: var(--lavender);
  font-weight: 400;
  font-size: 1.05em;
  padding: 0 0.04em;
  line-height: 1;
}
.hero__subhead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--cream-dim);
  max-width: 640px;
  margin: 0 0 40px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 560px) {
  .hero { padding: 60px 0 56px; }
  .hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── How TENS works (educational) ────────────────────────────── */
.how-tens-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 20px;
}
.how-tens-card {
  background: rgba(251, 245, 233, 0.06);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.how-tens-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lavender);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.how-tens-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: var(--cream);
}
.how-tens-card p {
  font-size: 0.94rem;
  color: var(--cream-dim);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 960px) { .how-tens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .how-tens-grid { grid-template-columns: 1fr; } }

/* ── What's included ─────────────────────────────────────────── */
/* Wide light-pink pills laid out in a 2-column grid (3 rows × 2 cols
   on desktop, single column on narrow viewports). Each pill: sparkle
   on the left, descriptive text inline, fully rounded shape. */
.included-pills {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.included-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lavender-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(40, 28, 60, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}
.included-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(40, 28, 60, 0.16);
}
.included-pill__sparkle {
  flex-shrink: 0;
  color: var(--lavender);
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 720px) {
  .included-pills { grid-template-columns: 1fr; gap: 12px; }
  .included-pill { padding: 14px 20px; font-size: 0.95rem; }
}

/* ── How it works (5-step timeline) ──────────────────────────── */
.steps {
  margin-top: 38px;
  position: relative;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* Per-step connector line. Each step draws its OWN line segment from
   below its number circle to the bottom of the step, meeting the next
   step's circle. The last step's segment is hidden so the line doesn't
   trail past circle 05. */
.step {
  position: relative;
  padding: 18px 0 26px 80px;
  min-height: 76px;
}
.step::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 74px;   /* below the 56px circle + its top offset */
  bottom: 0;
  width: 2px;
  background: rgba(201, 143, 216, 0.45);
}
.step:last-child::before { display: none; }
.step__number {
  position: absolute;
  left: 0;
  top: 12px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lavender);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  box-shadow: 0 0 0 6px var(--teal);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin: 6px 0 10px;
  color: var(--lavender-soft);
  line-height: 1.15;
}
.step p {
  margin: 0 0 10px;
  color: var(--cream-dim);
  font-size: 0.98rem;
  line-height: 1.55;
}
.step p:last-child { margin-bottom: 0; }
/* Bold lead-ins inside a step paragraph (e.g. "Pick up:" / "Posted:")
   get the lavender accent so they read as a sub-label, not just bold body. */
.step p strong {
  color: var(--lavender-soft);
  font-weight: 700;
  margin-right: 4px;
}

/* ── Availability calendar (compact, paged 2-up) ───────────────
   Small light-pink card. Hire-length selector + "next available"
   headline at the top, two month grids side-by-side, arrow buttons
   to scroll forward/back, legend, Book Now CTA. */
.availability-card {
  background: var(--lavender-soft);
  color: var(--ink-soft);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin: 24px auto 0;
  box-shadow: var(--shadow-card);
  max-width: 500px;
  position: relative;
}

.availability-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.availability-controls__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.availability-controls select {
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  border: 1.5px solid rgba(42, 35, 48, 0.18);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c98fd8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
.availability-controls select:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(201, 143, 216, 0.25);
}

.availability-headline {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 10px 0 4px;
  line-height: 1.4;
}
.availability-headline strong { color: var(--lavender-dark); font-weight: 700; }
.availability-headline__warn { color: #b85a5a; font-weight: 600; font-size: 0.85rem; }

/* Floating prev/next arrows positioned over the calendar header row
   (sit above the month names). Disabled state is greyed out. */
.availability-monthnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 0;
  height: 0;
}
.cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  color: var(--lavender-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.12s, opacity 0.12s;
  position: relative;
  top: 18px; /* nudge down so it sits next to the month name */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-btn:hover:not(:disabled) { background: #fff; }
.cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.availability-calendar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.availability-calendar__loading,
.availability-calendar__error {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 18px 0;
}
.availability-calendar__error { color: #b85a5a; }

.cal-month__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-wd {
  text-align: center;
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 0 2px;
}
/* Three-state colour key for the calendar cells:
     - --busy     : grey, unavailable (no machine free for the chosen
                    hire length starting that day)
     - --free     : LIGHT pink, available but not selected. Clickable.
     - --selected : DARK pink, this date plus every day of the hire
                    window starting from it. Set by clicking a --free cell. */
.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 600;
  transition: transform 0.1s, background 0.12s;
  cursor: default;
}
.cal-cell--empty { background: transparent; }
.cal-cell--past {
  background: transparent;
  color: rgba(42, 35, 48, 0.22);
}
.cal-cell--free {
  background: #d8b8ec; /* between lavender-soft (card bg) and lavender, so it stays visible */
  color: var(--ink);
  cursor: pointer;
}
.cal-cell--free:hover {
  background: #caa1e3;
  transform: scale(1.12);
}
.cal-cell--selected {
  background: var(--lavender);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(173, 109, 194, 0.35);
}
.cal-cell--busy {
  background: rgba(42, 35, 48, 0.14);
  color: rgba(42, 35, 48, 0.5);
}

.availability-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.leg-dot--free     { background: #d8b8ec; }
.leg-dot--selected { background: var(--lavender); }
.leg-dot--busy     { background: rgba(42, 35, 48, 0.18); }

.availability-card__cta {
  display: flex;
  justify-content: center;
  margin: 12px auto 0;
  width: 100%;
  max-width: 200px;
  padding: 8px 16px;
  font-size: 0.88rem;
}

@media (max-width: 460px) {
  .availability-card { padding: 14px 12px 16px; }
  .availability-calendar { grid-template-columns: 1fr; gap: 14px; }
  .cal-month__name { font-size: 0.95rem; }
  .cal-cell { font-size: 0.78rem; }
  .cal-wd { font-size: 0.62rem; }
}

/* ── Pricing ─────────────────────────────────────────────────── */
/* Tier colours match the screenshot:
     - Outer (4 week, 8 week): LIGHT pink (lavender-soft) + dark ink
       text + dark-pink (lavender) CTA with white text.
     - Featured (6 week): DARK pink (lavender) + white text +
       white CTA with dark-pink text + slight TEAL outline.
   Featured tier sits raised + scaled so the green outline frames it
   distinctly without crowding the outer cards. */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 36px;
  align-items: stretch;
}
/* Outer tier text colour: dark grey (--ink-soft) instead of near-black
   (--ink). Softens the contrast against the light pink card so the
   numbers feel less harsh, especially on larger screens. Featured tier
   still uses pure white text because it sits on the dark pink card. */
.tier {
  background: var(--lavender-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-lg);
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 6px 18px rgba(40, 28, 60, 0.14);
  border: 4px solid transparent; /* reserve room so featured outline doesn't shift layout */
}
.tier:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(40, 28, 60, 0.20); }
.tier--featured {
  background: var(--lavender);
  color: #fff;
  /* All three cards align to the same baseline. Featured is distinguished
     by colour + a WIDER, SOFTER teal outline (4px, with reduced opacity
     so the edge feels diffuse rather than hard). */
  border: 4px solid rgba(54, 101, 96, 0.55);
  box-shadow: 0 6px 18px rgba(40, 28, 60, 0.18);
}
.tier--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(40, 28, 60, 0.24);
}
.tier__label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.tier--featured .tier__label { color: rgba(255, 255, 255, 0.80); }
.tier__weeks {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.2rem;
  margin-bottom: 2px;
  color: var(--ink-soft);
  line-height: 1;
}
.tier--featured .tier__weeks { color: #fff; }
.tier__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.8rem;
  line-height: 1;
  color: var(--ink-soft);
  margin-bottom: 26px;
  flex: 1; /* push the button to the bottom of the card */
}
.tier--featured .tier__price { color: #fff; }
.tier__price-dollar { font-size: 1.9rem; vertical-align: top; margin-right: 4px; }
.tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.tier--featured .tier__features li { color: rgba(255, 255, 255, 0.95); }
.tier__sparkle {
  flex-shrink: 0;
  color: var(--lavender);
  font-size: 0.95rem;
  margin-top: 2px;
}
.tier--featured .tier__sparkle { color: rgba(255, 255, 255, 0.85); }
/* Tier CTA buttons.
     - Outer tiers: DARK PINK (lavender) background + white text.
     - Featured tier: WHITE background + dark-pink text. */
.btn--tier {
  background: var(--lavender);
  color: #fff;
  border: none;
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 0.98rem;
  margin-top: auto;
}
.btn--tier:hover {
  background: var(--lavender-dark);
  transform: translateY(-1px);
}
.btn--tier-featured {
  background: #fff;
  color: var(--lavender-dark);
  border: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
.btn--tier-featured:hover {
  background: var(--lavender-soft);
  color: var(--lavender-dark);
}
/* Simple payment note beneath the tier cards. Plain centred text on
   the teal page background, no card or image. The previous fancy
   "Payment options" card was overengineered for what's essentially a
   one-line disclosure. */
.pricing-note {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.96rem;
  color: var(--cream-dim);
  line-height: 1.65;
}
@media (max-width: 880px) {
  .pricing-tiers { grid-template-columns: 1fr; gap: 18px; }
  .tier--featured { transform: none; }
  .tier--featured:hover { transform: translateY(-3px); }
}

/* ── Add-ons ─────────────────────────────────────────────────── */
/* Styling mirrors the pricing tiers: light pink (lavender-soft) cards
   with ink-soft text and a lavender ✦ price tag. The featured bundle
   below the grid uses the dark pink + white + teal outline treatment
   from the "Most popular" 6-week tier so the two sections feel like
   the same family. */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.addon {
  background: var(--lavender-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 6px 18px rgba(40, 28, 60, 0.14);
  border: 4px solid transparent; /* keep visual rhythm with the bundle's outline */
}
.addon:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(40, 28, 60, 0.20); }
.addon__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--lavender-dark);
  line-height: 1;
  margin-bottom: 12px;
}
.addon__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--ink-soft);
  line-height: 1.15;
}
.addon p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Featured bundle banner under the grid. Same dark-pink + white-text
   + teal outline as the 6-week pricing tier, but laid out horizontally
   (label/title/copy on the left, big price on the right) so it reads as
   a single offer rather than a 5th card. */
.addon-bundle {
  margin-top: 22px;
  background: var(--lavender);
  color: #fff;
  border: 4px solid rgba(54, 101, 96, 0.55);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: 0 6px 18px rgba(40, 28, 60, 0.18);
  position: relative;
}
.addon-bundle__label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 12px;
}
.addon-bundle__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.addon-bundle__main { flex: 1 1 320px; }
/* Type sizes here match the individual .addon cards above so the
   bundle reads as a "bigger sibling" rather than a totally different
   visual scale. Only the layout (horizontal banner) and colour scheme
   (dark pink + teal outline) make it feel featured. */
.addon-bundle__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: #fff;
  line-height: 1.15;
}
.addon-bundle__main p {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}
.addon-bundle__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.65rem;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 980px) { .addons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .addons-grid { grid-template-columns: 1fr; }
  .addon-bundle { padding: 24px 22px; }
  .addon-bundle__body { gap: 18px; }
}

/* ── Refund ──────────────────────────────────────────────────── */
.refund-card {
  background: var(--lavender-soft);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-top: 20px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.refund-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--lavender);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.refund-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 10px;
  color: var(--ink);
}
.refund-card p {
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.6;
}
.refund-card p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .refund-card { padding: 26px; flex-direction: column; } }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq {
  max-width: 820px;
  margin: 30px auto 0;
}
.faq__item {
  border-top: 1px solid var(--border-soft);
}
.faq__item:last-child { border-bottom: 1px solid var(--border-soft); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--lavender-soft);
  transition: color 0.15s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--lavender); }
.faq__chev {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201, 143, 216, 0.18);
  color: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.2s, background 0.15s;
}
.faq__item[open] .faq__chev { transform: rotate(45deg); background: var(--lavender); color: #fff; }
.faq__item p {
  padding: 0 50px 22px 0;
  margin: 0;
  color: var(--cream-dim);
  line-height: 1.65;
  font-size: 0.97rem;
}

/* ── Footer CTA + Footer ─────────────────────────────────────── */
/* Footer CTA now uses the dark-pink / light-pink theme from the
   pricing tiers: LIGHT PINK card background (lavender-soft) with
   ink-soft text and a DARK PINK (lavender) primary button. The
   teal page bands the section visually, so we wrap the card in
   the section padding and let the card sit centred in the page. */
.footer-cta {
  padding: 60px 0;
  background: var(--teal);
  border-top: 1px solid var(--border-soft);
}
.footer-cta > .container {
  background: var(--lavender-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-lg);
  padding: 50px 32px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--ink-soft);
}
.footer-cta p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 6px;
  line-height: 1.5;
}
.footer-cta p + p { margin-bottom: 28px; }
@media (max-width: 560px) {
  .footer-cta > .container { padding: 40px 22px; }
}
.footer {
  background: var(--teal);
  padding: 50px 0 36px;
  border-top: 1px solid var(--border-soft);
}
.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand-name {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--cream);
}
/* Logo image variant of the brand mark, used in place of the script
   wordmark in the footer. Capped at a modest size so it doesn't tower
   over the link columns next to it. */
.footer__brand-logo {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
}
.footer__tag {
  color: var(--cream-dim);
  font-size: 0.9rem;
  max-width: 280px;
  line-height: 1.5;
}
.footer__col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--lavender);
  margin: 4px 0 14px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  color: var(--cream-dim);
  font-size: 0.92rem;
  transition: color 0.15s;
}
.footer__col a:hover { color: var(--cream); }
.footer__bottom {
  max-width: var(--content-max);
  margin: 36px auto 0;
  padding: 24px 22px 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--cream-dim);
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { justify-content: center; text-align: center; }
}