/* ===================================================================
   Attira — landing page
   Fonts: Inria Serif (logo/hero), Cormorant Garamond (section heads),
          DM Sans (body), Jost (footer)
   =================================================================== */

:root {
  --cream: #fffce8;
  --lavender: #ece4fe;
  --lavender-soft: #f4f0ff;
  --orange: #e04d1b;
  --orange-bright: #ff5c22;
  --ink: #3d3632;
  --dark: #1e1d1b;
  --sage: #c7c6b7;
  --peach: #f8d3cc;
  --coral: #f0926a;
  --coral-bright: #E8775A;

  --maxw: 1440px;
  --pad: clamp(20px, 5vw, 60px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* <picture> wrappers must not introduce a box — keep the inner <img> as the
   direct flex/grid/positioned child so wrapping for WebP changes no layout.
   `display: contents` also exposes the <source> elements to the parent layout,
   so hide them — otherwise each <source> eats a flex `gap` slot (this was pushing
   the hero phone ~120px below the headline). Sources are metadata; never render. */
picture { display: contents; }
source { display: none; }

section { scroll-margin-top: 95px; }

/* Screen-reader-only helper (e.g. the waitlist email label). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard-focus ring for interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.step:focus-visible,
.ptab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================== NAV ===================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 95px;
  padding: 0 var(--pad);
  background: #faf8f4;
  border-bottom: 1px solid rgba(61, 54, 50, 0.06);
}

.nav__logo {
  font-family: "Inria Serif", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 2px;
  color: #000;
  text-decoration: none;
}

/* links sit visually centered in the bar (logo left, CTA right) — Figma nav */
.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.nav__links a {
  font-size: 20px;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__links a:not(.nav__cta):hover { color: var(--orange); }

.nav__cta {
  background: var(--orange);
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(224, 77, 27, 0.25);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 26px;
  height: 2px;
  background: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* mobile-only right-side cluster (CTA + hamburger); hidden on desktop */
.nav__actions { display: none; }
.nav__cta--mobile { display: none; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* soft pale peach/salmon candy stripes (Figma hero) */
.hero__stripes {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      #fbe3d8 0, #fbe3d8 85px,
      #f0bda3 85px, #f0bda3 170px);
  z-index: 0;
}
/* faint warm glow, left-of-centre, like the Figma comp */
.hero__stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 32% 42%,
      rgba(255, 214, 184, 0.45) 0%, rgba(255, 214, 184, 0) 60%);
}

/* tagline ribbon */
.ribbon {
  position: relative;
  z-index: 3;
  background: var(--ink);
  overflow: hidden;
  padding: 14px 0;
}
.ribbon__track {
  display: flex;
  width: max-content;
  animation: ribbon 78s linear infinite;
}
.ribbon__set {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ribbon em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
  color: #efe7da;
  padding: 0 14px;
}
.ribbon i { color: var(--coral); font-style: normal; font-size: 10px; }
@keyframes ribbon { to { transform: translateX(-50%); } }

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--pad) 0;
  text-align: center;
}

.hero__title {
  font-family: "Inria Serif", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.08;
  margin: 0 0 24px;
}

/* primary call-to-action above the hero title — bold orange stadium pill.
   Desktop puts "Join Waitlist" in the nav (Figma), so this pill is mobile-only;
   the wrapper + pill are re-shown in the ≤768px block. */
.hero__cta-wrap { display: none; }
.hero__cta {
  display: none;
  align-items: center;
  justify-content: center;
  background: #ff5733;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 21px);
  letter-spacing: 0.2px;
  text-decoration: none;
  padding: 16px 64px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(255, 87, 51, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 87, 51, 0.55);
}

.hero__image {
  width: auto;
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(61, 54, 50, 0.25));
}

/* ===================== ABOUT ===================== */
.about {
  position: relative;
  background: var(--cream);
  padding: clamp(48px, 8vw, 96px) var(--pad);
  overflow: hidden;
}
/* faint pink organic line, echoing the Figma vector */
.about__decor {
  position: absolute;
  left: -10%;
  bottom: -30%;
  width: 60%;
  height: 90%;
  border: 2px solid rgba(248, 211, 204, 0.7);
  border-radius: 50% 50% 45% 55% / 60% 55% 45% 40%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.about__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(44px, 7vw, 75px);
  margin: 0 0 clamp(28px, 5vw, 48px);
  color: #000;
  max-width: var(--maxw);
  margin-inline: auto;
}
.about__grid {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about__text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.55;
  color: #2c2925;
  margin: 0;
}
.about__media img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

/* ===================== DISCOVER ===================== */
.discover {
  position: relative;
  background: linear-gradient(165deg, #f4f0ff 0%, #fbeef0 55%, #ffe6df 100%);
  padding: clamp(32px, 4vw, 56px) var(--pad);
  overflow: clip; /* clips blobs without breaking the sticky pin */
}
.discover__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  /* promote each blob to its own GPU layer so the expensive blur is painted
     once and just composited — it is no longer re-blurred every frame while
     the screenshots crossfade above it (fixes the pinned-scroll jank) */
  transform: translateZ(0);
  will-change: transform;
}
.discover__blob--1 { width: 460px; height: 460px; top: 60px; right: 6%; background: #ffc9c2; }
.discover__blob--2 { width: 460px; height: 460px; bottom: 0; left: -4%; background: #ffd6cf; }
.discover__blob--3 { width: 520px; height: 520px; top: 30%; left: 28%; background: rgba(255, 168, 150, 0.5); }

.discover__heading {
  position: relative;
  z-index: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 70px);
  margin: 0 0 clamp(20px, 3vw, 32px);
  color: #000;
  max-width: var(--maxw);
  margin-inline: auto;
}
.discover__heading em { font-style: italic; color: var(--coral-bright); }

/* interactive app-screen showcase: stepper | copy | phone */
.discover__showcase {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  /* stepper · copy · phone packed toward the left; the trailing empty 1fr
     track soaks up the slack on the right so the phone sits next to the copy */
  grid-template-columns: auto auto auto 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}

/* ----- numbered stepper ----- */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}
.stepper__item {
  position: relative;
  display: flex;
  justify-content: center;
}
/* vertical connector line between badges */
.stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% + 26px);
  left: 50%;
  width: 1.5px;
  height: calc(100% - 52px + clamp(20px, 3vw, 36px));
  transform: translateX(-50%);
  background: rgba(224, 77, 27, 0.35);
}
.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 24px;
  box-shadow: 0 6px 16px rgba(61, 54, 50, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.step__label {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.step:hover .step__num { transform: translateY(-2px); }
.step:hover .step__label { opacity: 0.85; }
.step.is-active .step__num {
  color: var(--orange);
  box-shadow:
    0 0 0 6px rgba(255, 168, 150, 0.35),
    0 10px 30px rgba(224, 77, 27, 0.35);
}
.step.is-active .step__label {
  opacity: 1;
  color: var(--orange);
  font-weight: 500;
}

/* ----- active step copy (middle column) ----- */
.discover__copy {
  align-self: center;
  max-width: 42ch;
}
.discover__step-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  color: var(--coral-bright);
  margin: 0 0 18px;
}
.discover__step-title em { font-style: italic; }
.discover__step-desc {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: #4a443f;
  margin: 0;
}

/* ----- phone (right column) ----- */
.discover__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Static iPhone mockup — the bezel + tab bar never move; only the inner
   screenshot swaps (and the active tab highlights) when a tab is tapped. */
.device {
  position: relative;
  width: clamp(248px, 33vw, 358px);
  margin-inline: auto;
  background: #111014;
  border-radius: 14% / 6.6%;
  padding: 2.6%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 60px -20px rgba(61, 54, 50, 0.5);
}
.device__screen {
  position: relative;
  aspect-ratio: 0.49;
  border-radius: 11.5% / 5.6%;
  overflow: hidden;
  background: #fff;
}
.device__shots { position: absolute; inset: 0; }
.device__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
/* fallback / no-scroll: the active layer is shown. In scroll mode JS writes
   inline opacity/transform per frame for a scrubbed crossfade. */
.device__shot.is-active { opacity: 1; transform: none; }

/* in scroll mode JS owns opacity/transform/z-index every frame — kill the
   0.5s transition so the per-frame scrub is instant (no smear/lag). */
.discover.is-scrolly .device__shot { transition: none; transform: none; }

/* in-device bottom tab bar (consistent on every screen) */
.device__tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.8%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 2.5%;
  /* near-opaque frosted-white bar — no backdrop-filter, which would re-blur
     the crossfading screenshots beneath it on every scroll frame */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #fff 55%);
  border-top: 1px solid rgba(61, 54, 50, 0.06);
}
.ptab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 3px 0 0;
  cursor: pointer;
  color: #a39c95;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}
.ptab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 21px;
  border-radius: 7px;
  transition: background 0.25s ease;
}
.ptab__icon svg { width: 18px; height: 18px; display: block; }
.ptab span:last-child {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 6.5px;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.ptab.is-active { color: var(--orange-bright); }
.ptab.is-active .ptab__icon { background: rgba(255, 92, 34, 0.12); }

/* AIRA — raised centre tab with the signature gradient ring + serif A */
.ptab--aira .ptab__icon {
  width: 30px;
  height: 30px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff5c22, #b14cff) border-box;
  font-family: "Inria Serif", serif;
  font-style: italic;
  font-size: 14px;
  color: #b14cff;
}
.ptab--aira.is-active .ptab__icon {
  color: #b14cff;
  background:
    linear-gradient(rgba(255, 92, 34, 0.1), rgba(255, 92, 34, 0.1)) padding-box,
    linear-gradient(135deg, #ff5c22, #b14cff) border-box;
}

/* ----- scroll-driven storytelling (enabled by JS adding .is-scrolly) ----- */
.discover__scroll { position: relative; }
.discover.is-scrolly .discover__scroll { height: 500vh; }
.discover.is-scrolly .discover__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 22px);
  overflow: hidden;
}
.discover.is-scrolly .discover__heading { margin-bottom: 0; }
.discover.is-scrolly .discover__showcase { width: 100%; align-items: center; }
/* keep the whole pinned stage inside one viewport: size the phone off the
   viewport height (screen aspect ≈0.49 → device height ≈ width × 2.1) */
.discover.is-scrolly .device {
  width: min(clamp(220px, 40vw, 340px), 30svh);
  max-width: 30svh;
}
/* smooth copy fade when the active screen changes */
.discover__copy { transition: opacity 0.3s ease; }
.discover__copy.is-swapping { opacity: 0; }
/* honour reduced-motion: no pin, fall back to the click stepper */
@media (prefers-reduced-motion: reduce) {
  .discover.is-scrolly .discover__scroll { height: auto; }
  .discover.is-scrolly .discover__sticky { position: static; height: auto; overflow: visible; }
}

/* ===================== WAITLIST ===================== */
/* orange block, lavender input, deep-purple submit — Figma "Get early access" */
.waitlist {
  background: #ff5722;
  padding: clamp(56px, 9vw, 110px) var(--pad);
}
.waitlist__inner {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.waitlist__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 75px);
  margin: 0 0 16px;
  color: #fff;
}
.waitlist__sub {
  font-size: clamp(17px, 2vw, 24px);
  margin: 0 auto 40px;
  max-width: 620px;
  color: #fff;
}
.waitlist__form {
  display: flex;
  gap: 16px;
  max-width: 795px;
  margin-inline: auto;
}
.waitlist__input {
  flex: 1;
  min-width: 0;
  height: 72px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #d9cafe;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
}
.waitlist__input:focus {
  outline: none;
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 3px rgba(255, 92, 34, 0.15);
}
.waitlist__submit {
  height: 72px;
  padding: 0 48px;
  border: 0;
  border-radius: 14px;
  background: #4c1d95;
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.waitlist__submit:hover { background: #3d1679; transform: translateY(-2px); }
.waitlist__msg {
  min-height: 22px;
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 500;
}
.waitlist__msg.is-ok { color: #1f7a4d; }
.waitlist__msg.is-err { color: #c0392b; }

/* ===================== FOOTER ===================== */
.footer {
  background: var(--dark);
  color: #fff;
  padding: 80px var(--pad) 40px;
}
.footer__top {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(250, 248, 244, 0.08);
}
.footer__brand {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: 2.5px;
  color: var(--lavender-soft);
}
.footer__col h4 {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.footer__col a {
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 14px;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer__col a:hover { opacity: 1; color: var(--coral); }
.footer__bottom {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  font-family: "Jost", sans-serif;
}
.footer__bottom > span { font-weight: 300; font-size: 11px; letter-spacing: 0.5px; }
.footer__social { display: flex; gap: 20px; }
.footer__social a {
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer__social a:hover { opacity: 1; color: var(--coral); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  /* ----- HEADER: sticky bar — ATTIRA left, inline links right (no hamburger) ----- */
  .nav {
    height: 64px;
    padding: 0 20px;
  }
  .nav__logo { font-size: 24px; }

  /* keep the links inline on mobile — no dropdown, no hamburger */
  .nav__links {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 5vw, 28px);
  }
  .nav__links a { font-size: 16px; }
  /* the nav Join Waitlist button is desktop-only — on mobile the orange pill
     under the nav (.hero__cta) is the CTA, so hide the nav button here */
  .nav__cta { display: none; }
  /* no mobile menu toggle */
  .nav__actions,
  .nav__toggle { display: none; }

  /* anchors land below the 64px sticky header */
  section { scroll-margin-top: 64px; }

  /* ----- HERO: one full viewport — iPhone mockup (nav inside) on stripes ----- */
  /* keep the scrolling tagline loop on mobile, just slimmer so it fits the hero */
  /* center the running marquee vertically in the bar (it was bottom-jammed) and
     give it a touch more height so the letters aren't compacted */
  .ribbon { padding: 14px 0; display: flex; align-items: center; }
  .ribbon__track { flex: none; }
  .ribbon em { font-size: 13px; letter-spacing: 1.2px; font-weight: 500; line-height: 1; padding: 0 11px; }

  /* at least one screen below the 64px sticky header, but allowed to GROW so that
     on short devices (iPhone SE, iPhone 14 w/ address bar) the content is never
     clipped — the CTA pill must stay fully visible, not hidden under the header.
     No fixed height + no vertical clip; horizontal overflow is handled by
     body{overflow-x:hidden}. */
  .hero {
    min-height: calc(100svh - 64px);
    overflow: visible;
  }

  /* soft pale peach/salmon candy stripes (same palette as desktop, slimmer) */
  .hero__stripes {
    background:
      repeating-linear-gradient(90deg,
        #fbe3d8 0, #fbe3d8 46px,
        #f0bda3 46px, #f0bda3 92px);
  }
  /* faint warm glow, centred behind the phone so the hero reads balanced */
  .hero__stripes::after {
    background:
      radial-gradient(64% 46% at 50% 46%,
        rgba(255, 214, 184, 0.45) 0%, rgba(255, 214, 184, 0) 62%);
  }

  .hero__inner {
    justify-content: center;
    /* don't shrink below the content (base sets min-height:0): on short screens
       this lets the inner grow to fit so the centered content's top — the pill —
       sits just below the ribbon instead of overflowing up under the header */
    min-height: auto;
    /* stretch (not center) so the CTA wrapper fills the full width and the pill
       can reach the right edge; title/phone re-center themselves below */
    align-items: stretch;
    gap: clamp(20px, 4.5vh, 38px);
    /* full-bleed inner: the base `margin: 0 auto` shrink-wraps the inner to its
       content width (auto cross-axis margins disable flex stretch), which would
       stop the CTA pill from ever reaching the screen edge. Force full width with
       no side padding so the pill can sit flush against the right edge. Title and
       phone stay centered, so they don't need the side padding. */
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: clamp(24px, 6vh, 48px);
    padding-bottom: clamp(20px, 5vh, 40px);
  }
  /* title near the top, with the Figma drop shadow */
  .hero__title {
    font-size: clamp(22px, 7vw, 30px);
    margin-bottom: 0;
    text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  }
  /* Figma mobile: pill anchored to the right screen edge, rounded left end ~a
     third in. The wrapper spans the full hero width (no side padding on the
     inner), and the pill is a normal block inside it sized purely by percentages:
     margin-left 32% + width 68% = 100%, so the right edge is always flush and the
     left always lands at a third — identical proportions on every device width.
     Padding/font use clamp so the pill scales up on larger screens. */
  /* full-width flex wrapper; pill grows (flex:1) to fill from a 30% left inset to
     the right edge — same proportions on every device width, always flush right */
  .hero__cta-wrap {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding-left: 25%;
  }
  .hero__cta {
    display: flex;
    flex: 1;
    padding: clamp(11px, 3.3vw, 20px) clamp(20px, 6vw, 48px);
    font-size: clamp(15px, 4.4vw, 24px);
    border-radius: 999px 0 0 999px;
  }
  /* the single hero <picture> serves the upright single-phone shot on mobile;
     size + shadow it for the one-screen hero (was .hero__phone-mobile) */
  .hero__image {
    max-width: 80%;
    max-height: 60vh;
    filter: drop-shadow(0 22px 38px rgba(61, 54, 50, 0.28));
  }

  /* ----- ABOUT: rack photo, then text in a rounded lavender card, no heading ----- */
  .about {
    padding-top: clamp(40px, 12vw, 64px);
  }
  .about__title { display: none; }
  .about__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about__media {
    order: -1;
    position: relative;
  }
  /* peach concentric rings + soft coral blob behind the top of the photo,
     echoing the hero's radial decor (kept faint so the photo reads clearly) */
  .about__media::before {
    content: "";
    position: absolute;
    top: -7%;
    right: -6%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        transparent 0, transparent 14px,
        rgba(240, 146, 106, 0.18) 14px, rgba(240, 146, 106, 0.18) 16px),
      radial-gradient(circle at 70% 30%, var(--peach) 0%, rgba(248, 211, 204, 0) 62%);
    pointer-events: none;
    z-index: -1;
  }
  /* inset, rounded photo with a soft shadow (drop the heavy desktop drop shadow) */
  .about__media img {
    width: 88%;
    margin-inline: auto;
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(61, 54, 50, 0.12);
  }
  .about__text {
    background: var(--lavender);
    border-radius: 20px;
    padding: clamp(22px, 6vw, 34px);
    box-shadow: 0 16px 34px rgba(61, 54, 50, 0.12);
  }
  /* soften the desktop pink line so it reads as a faint background swirl, not a hard arc */
  .about__decor { opacity: 0.5; }

  /* ----- DISCOVER: stepper vertical (left), phone right, copy spanning below ----- */
  .discover__showcase {
    grid-template-columns: auto 1fr;
    gap: clamp(14px, 4vw, 24px);
    align-items: start;
  }
  .stepper { grid-column: 1; grid-row: 1; }
  .discover__phone { grid-column: 2; grid-row: 1; }
  .device { width: 100%; max-width: 244px; }
  .discover__copy {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    max-width: none;
    margin-top: clamp(10px, 3vw, 20px);
  }
  /* keep the pinned title fully visible on phones: top-align the stack so the
     two-line heading sits just under the 64px sticky header instead of being
     vertically centered — centering pushed "Your wardrobe," above the
     overflow-hidden clip on short viewports. Tighten the heading and trim the
     phone so the whole composition still fits one short viewport. */
  .discover.is-scrolly .discover__sticky {
    justify-content: flex-start;
    padding-top: clamp(70px, 9vh, 88px);
    gap: clamp(6px, 1.5vh, 14px);
  }
  .discover.is-scrolly .discover__heading {
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.12;
  }
  .discover.is-scrolly .device {
    width: min(clamp(180px, 40vw, 280px), 22svh);
    max-width: 22svh;
  }

  /* ----- WAITLIST: stack the form (colors now come from the base rules) ----- */
  .waitlist__form { flex-direction: column; }
  .waitlist__input, .waitlist__submit { width: 100%; height: 60px; }

  /* ----- FOOTER: single stacked column ----- */
  .footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
}

/* short phones (e.g. iPhone SE, 667px tall): the pinned Discover stack can't fit
   the heading + the full-height 5-item stepper + phone + step description inside
   one 100svh stage, so the description was clipped at the bottom. On these short
   viewports only, compact the stepper (smaller badges, tighter gaps), the phone,
   the step title and the top padding so every step's description stays visible.
   Taller phones (iPhone 14+, ~844px) already have ample headroom — the
   max-height query leaves them completely untouched. */
@media (max-width: 768px) and (max-height: 720px) {
  .discover.is-scrolly .discover__sticky {
    padding-top: clamp(58px, 8vh, 70px);
    gap: clamp(4px, 1vh, 10px);
  }
  .discover.is-scrolly .device {
    width: min(clamp(150px, 36vw, 220px), 19svh);
    max-width: 19svh;
  }
  .discover.is-scrolly .stepper { gap: 12px; }
  .discover.is-scrolly .step__num { width: 44px; height: 44px; font-size: 20px; }
  /* realign the connector line to the smaller 44px badge + 12px gap */
  .discover.is-scrolly .stepper__item:not(:last-child)::after {
    top: calc(50% + 22px);
    height: calc(100% - 44px + 12px);
  }
  .discover.is-scrolly .discover__step-title {
    font-size: clamp(28px, 7vw, 36px);
    margin-bottom: 10px;
  }
}

@media (max-width: 420px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===================== LEGAL / CONTENT PAGES ===================== */
.legal { background: var(--cream); }

.legal__hero {
  background: linear-gradient(165deg, #f4f0ff 0%, #fbeef0 55%, #ffe6df 100%);
  padding: clamp(48px, 8vw, 96px) var(--pad) clamp(36px, 5vw, 64px);
}
.legal__hero-inner {
  max-width: 820px;
  margin-inline: auto;
}
.legal__eyebrow {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--coral-bright);
  margin: 0 0 16px;
}
.legal__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: #000;
}
.legal__title em { font-style: italic; color: var(--coral-bright); }
.legal__intro {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: #4a443f;
  margin: 0;
}

.legal__body {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--pad) clamp(64px, 9vw, 110px);
}
.legal__body h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  color: var(--dark);
  margin: clamp(34px, 5vw, 52px) 0 14px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h2 em { font-style: italic; color: var(--coral-bright); }
.legal__body p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}
.legal__body ul,
.legal__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal__body li {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 8px;
}
.legal__body li::marker { color: var(--coral); }
.legal__body a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.legal__body a:hover { color: var(--coral-bright); }
.legal__body strong { font-weight: 700; color: var(--dark); }
.legal__body em { font-style: italic; }

/* ===================== FAQ ACCORDION ===================== */
.faq {
  max-width: 820px;
  margin-inline: auto;
}
.faq__item {
  border: 1px solid rgba(61, 54, 50, 0.12);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item:hover {
  border-color: rgba(232, 119, 90, 0.5);
  box-shadow: 0 10px 24px rgba(61, 54, 50, 0.06);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--dark);
}
.faq__icon {
  flex-shrink: 0;
  color: var(--coral-bright);
  transition: transform 0.3s ease;
}
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__a {
  padding: 0 clamp(18px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px);
}
.faq__a[hidden] { display: none; }
.faq__a p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink);
}

/* ===================== CONTACT PAGE ===================== */
.contact {
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* contact form */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact__field label {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.contact__field input,
.contact__field textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(61, 54, 50, 0.18);
  border-radius: 14px;
  background: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  resize: vertical;
}
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--orange-bright);
  box-shadow: 0 0 0 3px rgba(255, 92, 34, 0.15);
}
.contact__submit {
  align-self: flex-start;
  padding: 0 48px;
  height: 60px;
  border: 0;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact__submit:hover { background: #c8431a; transform: translateY(-2px); }
.contact__note {
  margin: 0;
  font-size: 14px;
  color: var(--grey, #6b6b6b);
  color: #7a736d;
}

/* "prefer email" aside */
.contact__aside {
  background: var(--lavender-soft);
  border: 1px solid rgba(61, 54, 50, 0.08);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
}
.contact__aside h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
  color: var(--dark);
}
.contact__aside p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.contact__email {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 77, 27, 0.4);
  margin-bottom: 18px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact__email:hover {
  color: var(--coral-bright);
  border-color: var(--coral-bright);
}
.contact__aside-note {
  font-size: 14px !important;
  color: #7a736d;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .contact { grid-template-columns: 1fr; }
}