/* =========================================================================
   Mirra — section styles
   Every size below is pinned to Figma at 1920px and scales down via clamp().
   Formula per token T (Figma@1920): clamp(MIN, T/19.2 vw, T).
   At 1920 viewport the vw term hits T exactly. Above 1920 the max holds T.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO (4.2) — Figma node 39:22156 @ 1920
   Frame: 12px outer gap, 67.778px white border, 22.222px radius, gradient.
   ------------------------------------------------------------------------- */
.section-hero {
  min-height: 100vh;
  padding: 12px;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.section-hero__frame {
  position: relative;
  min-height: calc(100vh - 24px);
  border-radius: clamp(12px, 1.158vw, 22.222px);
  background: #87ADF1 url('/assets/images/hero/hero-no-border.png') center/cover no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.section-hero__nav {
  /* Sticky at viewport top across the whole page. Insets match the hero
     frame's outer padding (12px) so the logo/CTA stay in the same visual
     spot on first paint. Background stays transparent per user request. */
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(14px, 1.4vw, 28px) clamp(18px, 1.8vw, 36px);
}
.section-hero__logo { display: inline-block; line-height: 0; flex-shrink: 0; }
.section-hero__logo img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: block;
}
.section-hero__cta {
  padding: clamp(10px, 0.78vw, 15px) clamp(18px, 1.56vw, 30px);
  background: rgba(255, 255, 255, 0.85);
  color: #0A0A0A;
  border: none;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: clamp(13px, 0.938vw, 18px);
  font-weight: 400;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.section-hero__cta:hover { background: #FFFFFF; }
.section-hero__nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 22px);
}
/* Generic icon-only round button. Inherits stroke colour via currentColor so
   it adapts to dark nav (white) and light footer (black). */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #0A0A0A;
  background: transparent;
  text-decoration: none;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.social-link:hover { background: rgba(0, 0, 0, 0.06); }
.section-hero__nav-actions .social-link {
  color: rgba(255, 255, 255, 0.95);
}
.section-hero__nav-actions .social-link:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* Inverted nav state — applied via JS when nav scrolls past the dark hero
   and sits over a light background. CTA gets a 10% black outline instead of
   the white pill fill; Instagram icon switches from white to black. */
/* CTA "Reserve my spot" stays white-filled in every scroll state — only the
   Instagram icon swaps to black when nav sits over a light background. */
.section-hero__nav--over-light .section-hero__nav-actions .social-link {
  color: #0A0A0A;
}
.section-hero__nav--over-light .section-hero__nav-actions .social-link:hover {
  background: rgba(10, 10, 10, 0.06);
}
.section-hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 4vw, 80px) clamp(20px, 3vw, 60px);
  gap: clamp(18px, 1.667vw, 32px);
}
.section-hero__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(36px, 3.542vw, 68px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  max-width: 1068px;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}
.section-hero__subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 1.771vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  max-width: 840px;
  margin: 0;
}
.section-hero__form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin-top: clamp(8px, 0.8vw, 16px);
}
.section-hero__input {
  flex: 1;
  padding: clamp(16px, 1.406vw, 27px) clamp(20px, 1.771vw, 34px);
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 100px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.146vw, 22px);
  letter-spacing: -0.008em;
  outline: none;
  min-width: 0;
}
.section-hero__input::placeholder { color: rgba(255, 255, 255, 0.8); }
.section-hero__input:focus { background: rgba(255, 255, 255, 0.35); }
.section-hero__submit {
  padding: clamp(16px, 1.406vw, 27px) clamp(24px, 1.771vw, 34px);
  background: #FFFFFF;
  color: #0A0A0A;
  border: none;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.146vw, 22px);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out);
}
.section-hero__submit:hover { transform: translateY(-1px); }
.section-hero__micro {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.146vw, 22px);
  color: rgba(255, 255, 255, 0.85);
  margin: auto auto 0;
  padding-bottom: clamp(16px, 1.8vw, 36px);
  letter-spacing: -0.008em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45em;
}
.section-hero__micro-icon {
  width: 0.68em;
  height: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .section-hero__form { flex-direction: column; background: transparent; padding: 0; gap: 12px; }
  .section-hero__input { background: rgba(255, 255, 255, 0.5); }
}

/* -------------------------------------------------------------------------
   PROBLEM (4.3) — Figma node 39:22176 @ 1920
   Headline 50px Medium, subhead 30px Regular/39px line-height. Tinted aurora.
   ------------------------------------------------------------------------- */
.section-problem {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E9E5E0 url('/assets/images/hero/gradient.png') center/cover no-repeat;
  overflow: hidden;
  padding: clamp(80px, 7.45vw, 143px) clamp(24px, 3.125vw, 60px);
}
.section-problem__icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.app-icon {
  position: absolute;
  width: 100px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.app-icon--calendar     { left: 51%; top: 11%; width: 100px; }
.app-icon--chatgpt      { left: 34%; top: 18%; width: 100px; }
.app-icon--whoop        { left: 67%; top: 17%; width: 90px; }
.app-icon--myfitnesspal { left: 20%; top: 28%; width: 90px; }
.app-icon--claude       { left: 80%; top: 35%; width: 90px; }
.app-icon--oura         { left: 13%; top: 53%; width: 90px; }
.app-icon--gcal         { left: 79%; top: 57%; width: 90px; }
.app-icon--gmail        { left: 27%; top: 69%; width: 90px; }
.app-icon--apple-health { left: 39%; top: 73%; width: 90px; }
.app-icon--photos       { left: 54%; top: 72%; width: 90px; }
.app-icon--ultrahuman   { left: 68%; top: 68%; width: 90px; }

@media (max-width: 1280px) {
  .app-icon { transform: scale(0.85); transform-origin: center; }
}
@media (max-width: 1024px) {
  .app-icon { transform: scale(0.7); }
}
/* ============ MOBILE ICON LAYOUT (per spec) ============
   All 11 icons remain visible on mobile, scattered across two zones with
   the centre 50% reserved for the headline + body text. Desktop layout
   at >=769px is untouched.
   - 481px–768px: icons at 44px wide
   - <=480px:     icons at 38px wide, positions tightened
================================================================ */
@media (max-width: 768px) {
  .app-icon {
    transform: none;
    width: 48px;
    height: auto;
    opacity: 0.85;
  }

  /* Zone A — top. The whole cluster sits close to the headline; the outer
     row is closer to text than to the section's top edge. */
  .app-icon--apple-health { left: 12%;  top: 14%; right: auto; bottom: auto; }
  .app-icon--calendar     { left: 50%;  top: 11%; right: auto; bottom: auto;
                            transform: translateX(-50%) rotate(-4deg); transform-origin: center; }
  .app-icon--chatgpt      { right: 12%; top: 15%; left: auto;  bottom: auto; }
  .app-icon--whoop        { left: 20%;  top: 26%; right: auto; bottom: auto; }
  .app-icon--ultrahuman   { left: 48%;  top: 29%; right: auto; bottom: auto; }
  .app-icon--claude       { right: 20%; top: 27%; left: auto;  bottom: auto; }

  /* Zone B — bottom. Same logic mirrored: outer row sits closer to body copy
     than to the section's bottom edge. */
  .app-icon--oura         { left: 12%;  bottom: 27%; right: auto; top: auto; }
  .app-icon--myfitnesspal { left: 30%;  bottom: 30%; right: auto; top: auto; }
  .app-icon--gcal         { right: 12%; bottom: 28%; left: auto;  top: auto; }
  .app-icon--gmail        { left: 50%;  bottom: 14%; right: auto; top: auto;
                            transform: translateX(-50%) rotate(3deg); transform-origin: center; }
  .app-icon--photos       { right: 26%; bottom: 15%; left: auto;  top: auto; }

  /* Text block sits above any icon edge that brushes the zone boundary */
  .section-problem__content {
    position: relative;
    z-index: 10;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 480px) {
  /* All 11 icons still shown — slightly smaller, tighter positions. */
  .app-icon { width: 42px; }

  .app-icon--apple-health { left: 12%;  top: 14%; right: auto; bottom: auto; transform: none; }
  .app-icon--calendar     { left: 50%;  top: 11%; right: auto; bottom: auto;
                            transform: translateX(-50%) rotate(-4deg); transform-origin: center; }
  .app-icon--chatgpt      { right: 12%; top: 15%; left: auto;  bottom: auto; transform: none; }
  .app-icon--whoop        { left: 18%;  top: 27%; right: auto; bottom: auto; }
  .app-icon--ultrahuman   { left: 48%;  top: 30%; right: auto; bottom: auto; }
  .app-icon--claude       { right: 18%; top: 28%; left: auto;  bottom: auto; }

  .app-icon--oura         { left: 12%;  bottom: 28%; right: auto; top: auto; }
  .app-icon--myfitnesspal { left: 28%;  bottom: 31%; right: auto; top: auto; }
  .app-icon--gcal         { right: 12%; bottom: 29%; left: auto;  top: auto; }
  .app-icon--gmail        { left: 50%;  bottom: 14%; right: auto; top: auto;
                            transform: translateX(-50%) rotate(3deg); transform-origin: center; }
  .app-icon--photos       { right: 24%; bottom: 15%; left: auto;  top: auto; }
}
.section-problem__content {
  position: relative;
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}
.section-problem__headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 2.604vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  max-width: 882px;
  margin: 0 auto clamp(12px, 1.04vw, 20px);
}
.section-problem__body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5625vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  max-width: 758px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   STATEMENT (4.4) — Figma node 39:22207
   3 crossfaded states, always centred. (User-specified exception to 1920 match.)
   ------------------------------------------------------------------------- */
.section-statement {
  background: #DC4B31;
  position: relative;
  /* No explicit height — the inner is 100vh and ScrollTrigger's pin-spacer
     adds the pin duration (250vh) below it, so the section ends exactly
     where the pin releases and #features starts cleanly below. An explicit
     `height: 300vh` here previously caused a 50vh overlap where features
     rose over the still-settling pinned inner. Keep padding: 0 to override
     base.css `section { padding: 200px 0 }` — otherwise the inner's flow
     position shifts and ScrollTrigger pins at top:200px. */
  padding: 0;
  color: #FFFFFF;
  overflow: hidden;
}

/* Start all three lines fully hidden in CSS so they can't render between
   parse and gsap.set(). Without this, the lines flash at default opacity
   (line 3 contains the MIRRA badge + glow, which leaks into hero). */
.statement-line--1,
.statement-line--2,
.statement-line--3 { opacity: 0; }

.section-statement__inner {
  /* ScrollTrigger.pin owns positioning during the pinned range — converts to
     position:fixed;top:0 and manages the pin-spacer. Do NOT use position:sticky
     here: it conflicts with pin and causes the inner to freeze 200px below
     viewport top, pushing the centered text into the bottom third. */
  position: relative;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  width: 100%;
  padding: 0 60px;
  box-sizing: border-box;
  background: #DC4B31 url('/assets/images/statement/back-untilnow.png') center/cover no-repeat;
  overflow: hidden;
}

.statement-line {
  position: absolute;
  /* top/left/transform are owned by GSAP (xPercent/yPercent + top/left inlined by gsap.set).
     Setting transform in CSS would be clobbered every frame by GSAP's inline matrix,
     which is why CSS-only centering fixes didn't stick. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  margin: 0;
}

.statement-line h2 {
  font-family: var(--font-sans);
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 400;
  letter-spacing: -0.16px;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.statement-line--3 .statement-tagline {
  margin: 0;
}

.statement-badge {
  width: 204px;
  height: 204px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.statement-badge__glow {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border-radius: 50%;
  filter: blur(26px);
  border: 3px solid rgba(255, 255, 255, 0.91);
  box-sizing: border-box;
  opacity: 1;
}

.statement-badge__logo {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: 400;
  color: #DC4B31;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  opacity: 0.95;
}

.statement-badge__dot {
  color: #DC4B31;
  margin-left: 2px;
}

.statement-tagline {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 31px);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.16px;
  color: #FFFFFF;
  text-align: center;
  margin: 40px 0 0;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .statement-line h2 { font-size: 48px; white-space: normal; }
  .statement-badge { width: 160px; height: 160px; }
  .statement-badge__logo { font-size: 44px; }
  .statement-tagline { font-size: 15px; }
}

/* -------------------------------------------------------------------------
   FEATURES (4.5) — Figma node 40:23360
   4-card carousel. Cards 416px tall, 8px radius, overlay bg #6F7EA1.
   Uses user-supplied Value Prop PNGs.
   ------------------------------------------------------------------------- */
.section-features {
  background: var(--color-bg);
  padding: 168px 0 120px;
  position: relative;
}

/* Section-specific container - wider than the default .container (1440px) */
.section-features__container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 80px;
  box-sizing: border-box;
}

.section-features__header {
  text-align: center;
  margin: 0 auto 64px;
  max-width: 900px;
}
.section-features__header h2 {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: #0A0A0A;
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.feature-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

img.feature-card__visual {
  display: block;
  width: 100%;
  aspect-ratio: 428 / 416;
  object-fit: cover;
  object-position: top;
  background: #6F7EA1;
  border: 0.9px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-sizing: border-box;
}
.feature-card:nth-child(2n) img.feature-card__visual { background: #B68385; }

.feature-card__title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.16px;
  color: #0A0A0A;
  text-align: center;
  margin: 23px 0 8px;
  padding: 0;
}

/* Responsive */
@media (max-width: 1440px) {
  .section-features__container { padding: 0 48px; }
  .section-features__header h2 { font-size: 38px; }
}
@media (max-width: 1100px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .section-features__container { padding: 0 32px; }
  .section-features__header h2 { font-size: 34px; }
  .feature-card__title { font-size: 20px; }
}
@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section-features__container { padding: 0 24px; }
  .section-features__header h2 { font-size: 28px; }
  .feature-card__title { font-size: 18px; margin-top: 16px; }
}

/* -------------------------------------------------------------------------
   PROOF (4.6) — Figma node 75:29860 @ 1920
   Eyebrow 24px, quote 27px italic in #E3E6E7 bubble, phone 381px.
   ------------------------------------------------------------------------- */
.section-proof {
  background: var(--color-bg);
  padding: clamp(80px, 7.45vw, 143px) 0;
}
.section-proof__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 5.4vw, 104px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3.125vw, 60px);
}
.section-proof__text {
  /* Wide enough for "Your personalised protocol." to stay on one line at the
     62px desktop heading. The quote bubble and attribution constrain
     themselves to 480px individually. */
  max-width: 820px;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.section-proof__title { white-space: nowrap; }
.section-proof__phone { flex-shrink: 0; }
.section-proof__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(36px, 3.23vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #0A0A0A;
  text-align: right;
  margin: 0 0 clamp(24px, 2.08vw, 40px) 0;
  text-shadow: 0 0 80px rgba(170, 75, 33, 0.1);
}
.section-proof__title em {
  font-style: italic;
  font-weight: 600;
  color: #DC4B31;
}
.section-proof__quote {
  background: #E3E6E7;
  border-radius: 20px 20px 0 20px;
  padding: clamp(16px, 1.04vw, 20px) clamp(18px, 1.15vw, 22px);
  max-width: 480px;
}
.section-proof__quote p {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.406vw, 27px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: #646464;
  margin: 0;
}
.section-proof__attribution {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(14px, 0.99vw, 19px);
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: #646464;
  text-align: right;
  margin: clamp(10px, 0.78vw, 15px) 0 0 0;
}
.phone-img {
  display: block;
  width: 100%;
  max-width: 381.52px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 clamp(24px, 3.31vw, 63.587px) rgba(0, 0, 0, 0.3));
}
@media (max-width: 900px) {
  .section-proof__grid { flex-direction: column; gap: 48px; }
  .phone-img { max-width: 320px; }
  /* Allow the heading to wrap on narrow viewports — nowrap is desktop-only. */
  /* On mobile, only the heading is left-aligned — quote bubble and beta user
     attribution keep their right alignment. */
  .section-proof__title {
    white-space: normal;
    text-align: left;
    align-self: flex-start;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   CONNECT (4.7) — Figma node 40:23864 @ 1920
   Three-column grid: Now + Coming x 2.
   Cards 12.608px radius / 78.393px tall / 420.764px wide at Figma.
   ------------------------------------------------------------------------- */
.section-connect {
  background: var(--color-bg);
  padding: clamp(80px, 7.45vw, 143px) 0;
}
.section-connect__header {
  text-align: center;
  margin-bottom: clamp(40px, 4.17vw, 80px);
}
.section-connect__header h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 2.604vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  margin: 0 auto 16px;
  max-width: 1072px;
}
.section-connect__header p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5625vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  margin: 0;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: clamp(12px, 1.04vw, 20px);
  row-gap: clamp(8px, 0.394vw, 7.565px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 3.125vw, 60px);
  align-items: start;
}
.connect-column--now {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.394vw, 7.565px);
}
.connect-column--coming {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(12px, 1.04vw, 20px);
  row-gap: clamp(8px, 0.394vw, 7.565px);
}
.connect-column__title {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.146vw, 22px);
  line-height: 26.4px;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  margin: 0 0 8px 0;
}
/* Card type 1 — NOW */
.connect-card--now {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.788vw, 15.13px);
  padding: clamp(12px, 0.919vw, 17.651px) clamp(16px, 1.313vw, 25.216px) clamp(12px, 0.919vw, 17.651px) clamp(12px, 0.919vw, 17.651px);
  background: #FFFFFF;
  border-radius: 12.608px;
  box-shadow: 0 11.29px 23.15px rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(43.86px);
  -webkit-backdrop-filter: blur(43.86px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 0.99vw, 19px);
  line-height: 26.4px;
  letter-spacing: -0.008em;
  color: #0A0A0A;
}
/* Card type 2 — COMING */
.connect-card--coming {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.788vw, 15.13px);
  padding: clamp(12px, 0.919vw, 17.651px) clamp(16px, 1.313vw, 25.216px) clamp(12px, 0.919vw, 17.651px) clamp(12px, 0.919vw, 17.651px);
  background: rgba(203, 202, 194, 0.20);
  border-radius: 12.608px;
  backdrop-filter: blur(62.77px);
  -webkit-backdrop-filter: blur(62.77px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 0.99vw, 19px);
  line-height: 26.4px;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  opacity: 1;
}
.connect-card__label { flex: 1; }
.connect-card__icon {
  width: clamp(40px, 2.917vw, 55.995px);
  height: clamp(40px, 2.917vw, 55.995px);
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
  border-radius: 12px;
}
/* 10% black outline on Apple Health only — the white icon disappears into
   the white card without it. Four drop-shadows simulate a 1px outline that
   follows the icon's actual rounded-square pixels, not the CSS box, so the
   corners stay clean. */
.connect-card__icon[src*="logo-applehealth"] {
  filter:
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.07))
    drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.07))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.07))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.07));
}
.connect-card__check {
  width: clamp(20px, 1.416vw, 27.19px);
  height: clamp(20px, 1.416vw, 27.19px);
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
}
.connect-more {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 0.99vw, 19px);
  color: #0A0A0A;
  text-align: right;
  margin: 8px 0 0;
}
@media (max-width: 960px) {
  .connect-grid { grid-template-columns: 1fr 1fr; }
  .connect-column--now { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .connect-column--coming { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .connect-grid { grid-template-columns: 1fr; }
  .connect-column--now, .connect-column--coming { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   PRIVACY (4.8) — Figma node 39:22215 @ 1920
   1602px #F1F1F1 container, 18px radius white cards, 72px headline.
   ------------------------------------------------------------------------- */
.section-privacy {
  background: var(--color-bg);
  padding: clamp(80px, 7.45vw, 143px) 0;
}
.section-privacy__inner {
  max-width: 1602px;
  margin: 0 auto clamp(-120px, -6.23vw, -119.55px);
  background: #F1F1F1;
  border-radius: 20px;
  padding: clamp(60px, 8.33vw, 160px) clamp(24px, 3.125vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 2.5vw, 48px);
}
.lock-icon {
  display: block;
  width: clamp(60px, 6.25vw, 120px);
  height: auto;
  margin: 0;
}
.section-privacy__headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.75vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #0A0A0A;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.section-privacy__subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.458vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #0A0A0A;
  text-align: center;
  max-width: 514px;
  margin: 0;
}
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 0.99vw, 19px);
  margin: 0;
  text-align: left;
  width: 100%;
  max-width: 1038px;
  padding-top: clamp(12px, 1.04vw, 20px);
}
.privacy-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: clamp(20px, 1.667vw, 32px);
  min-height: clamp(160px, 11.46vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 0.594vw, 11.41px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.privacy-card__icon {
  width: clamp(32px, 2.5vw, 48px);
  height: clamp(32px, 2.5vw, 48px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.privacy-card__icon svg { display: block; width: 100%; height: 100%; }
.privacy-card__text {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.336vw, 6.45px);
  width: 100%;
}
.privacy-card h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.342;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0;
}
.privacy-card p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.006em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}
.section-privacy__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.146vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.023em;
  color: var(--color-accent);
  text-decoration: underline;
  text-align: center;
}
@media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   CLOSING (4.9) — Figma node 39:22276 @ 1920
   56px headline Regular, 32px subhead, 20px button on 360px pill.
   ------------------------------------------------------------------------- */
.section-closing {
  background: var(--color-bg);
  text-align: center;
  padding: clamp(120px, 17.7vw, 340px) clamp(24px, 3.125vw, 60px);
}
.section-closing__inner {
  max-width: 1288px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.6vw, 50px);
}
.section-closing__headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 3.229vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.013em;
  color: #0A0A0A;
  margin: 0;
  max-width: 1288px;
}
.section-closing__headline-accent { color: #DC4B31; }
.section-closing__subline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 1.719vw, 33px);
  line-height: 1.27;
  letter-spacing: -0.005em;
  color: #0A0A0A;
  margin: 0;
  max-width: 840px;
}
.section-closing .btn-primary {
  padding: clamp(16px, 1.302vw, 25px);
  width: clamp(260px, 18.75vw, 360px);
  background: #0A0A0A;
  color: #FFFFFF;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.008em;
  border: 1px solid #0A0A0A;
}

/* -------------------------------------------------------------------------
   FAQ (4.10) — Figma node 39:22426 @ 1920
   288px decorative FAQ title, 20px item rows, 1280px list.
   ------------------------------------------------------------------------- */
.section-faq {
  position: relative;
  background: var(--color-bg);
  padding: clamp(40px, 2.5vw, 48px) clamp(24px, 3.125vw, 60px) clamp(60px, 5.21vw, 100px);
}
.section-faq__heading-decorative {
  position: relative;
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(80px, 15vw, 288px);
  color: rgba(0, 0, 0, 0.06);
  line-height: 0.85;
  letter-spacing: -0.006em;
  text-align: center;
  margin: 0 auto 0;
  pointer-events: none;
}
.faq-list {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: clamp(-40px, -2vw, -48px) auto 0;
  /* Single source of truth for the indent shared by question text and answer text.
     = number column min-width + flex gap. Keeps Q + A vertically aligned. */
  --faq-number-col: clamp(32px, 3.125vw, 60px);
  --faq-gap: 24px;
  --faq-indent: calc(var(--faq-number-col) + var(--faq-gap));
}
.faq-item { border-top: 0.909px solid #E8E8E8; }
/* Last FAQ item's bottom edge is covered by the .faq-footer top-border below. */
.faq-item__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  gap: var(--faq-gap);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.faq-item__number {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.75;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  min-width: var(--faq-number-col);
}
.faq-item__question {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.75;
  letter-spacing: -0.008em;
  color: #0A0A0A;
}
.faq-item__arrow {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.75;
  color: #0A0A0A;
  transition: transform 0.3s var(--ease-out);
}
.faq-item--open .faq-item__arrow { transform: rotate(180deg); }
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
  /* Indent the entire answer block to align under the question text column. */
  padding-left: var(--faq-indent);
  padding-right: clamp(24px, 1.6vw, 60px);
}
.faq-item--open .faq-item__answer { max-height: 800px; padding-bottom: 24px; }
.faq-item__answer p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: #6B6B6B;
  margin: 0;
}
.faq-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(24px, 1.77vw, 34px);
  border-top: 0.909px solid #E8E8E8;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 32px;
}
.faq-footer span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.75;
  color: #0A0A0A;
}
.faq-footer .btn-secondary {
  padding: clamp(13px, 0.933vw, 17.9px) clamp(22px, 2.599vw, 49.9px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 0.938vw, 18px);
  line-height: 1.75;
  letter-spacing: -0.008em;
  color: #0A0A0A;
  border: 1px solid #1A1A1A;
  border-radius: 100px;
  background: transparent;
}
@media (max-width: 640px) {
  .faq-footer { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   VISION (4.11) — Figma node 39:22542 @ 1920
   #DC4B31 bg + overlay image, 56px quote, 36px subhead with italic 'understanding'.
   ------------------------------------------------------------------------- */
.section-vision {
  background: #DC4B31 url('/assets/images/vision/back-vision.png') center/cover no-repeat;
  color: #FFFFFF;
  text-align: left;
  padding: clamp(120px, 15.29vw, 293.5px) clamp(24px, 6.25vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 2.6vw, 50px);
  position: relative;
  overflow: hidden;
}
.section-vision__inner {
  max-width: 944px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(28px, 2.6vw, 50px);
}
.section-vision__manifesto {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(32px, 2.917vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.013em;
  color: #FFFFFF;
  margin: 0;
  max-width: 944px;
}
.section-vision__tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(20px, 1.875vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  margin: 0;
  max-width: 578px;
}
.section-vision__tagline em { font-style: italic; }
.btn-white-pill {
  display: inline-flex;
  align-items: center;
  padding: clamp(16px, 1.406vw, 27px) clamp(36px, 4.48vw, 86px);
  background: #FFFFFF;
  color: #0A0A0A;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.24;
  letter-spacing: -0.007em;
  transition: transform 0.2s var(--ease-out);
}
.btn-white-pill:hover { transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   FOOTER (4.12) — Figma node 39:22517 @ 1920
   36px heading Medium, 17px body Medium, 80px side padding, 2px divider.
   ------------------------------------------------------------------------- */
.footer {
  background: var(--color-bg);
  padding: clamp(40px, 4.17vw, 80px) clamp(24px, 4.17vw, 80px) clamp(24px, 2.08vw, 40px);
  position: relative;
}
.footer__container {
  max-width: 1760px;
  margin: 0 auto;
}
.footer__divider {
  height: 2px;
  background: #000000;
  margin-bottom: clamp(32px, 4.17vw, 80px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: clamp(32px, 4.17vw, 80px);
  margin-bottom: clamp(40px, 2.5vw, 48px);
  opacity: 0.86;
}
.footer__left h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 1.875vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #0A0A0A;
  margin: 0 0 clamp(8px, 0.625vw, 12px);
}
.footer__left p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 0.885vw, 17px);
  line-height: 1.456;
  letter-spacing: -0.009em;
  color: #000000;
  margin: 0;
}
.footer__right .waitlist-form {
  background: transparent;
  padding: 0;
  gap: clamp(8px, 0.625vw, 11.99px);
}
.footer__right .waitlist-form__input {
  padding: clamp(14px, 0.98vw, 18.8px) clamp(16px, 1.24vw, 23.8px);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  color: #0A0A0A;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(13px, 0.781vw, 15px);
}
.footer__right .waitlist-form__input::placeholder { color: #9B9B9B; }
.footer__right .waitlist-form__button {
  padding: clamp(14px, 0.99vw, 19px) clamp(24px, 1.875vw, 36px);
  background: #0A0A0A;
  color: #FFFFFF;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 0.781vw, 15px);
  letter-spacing: -0.008em;
  border: none;
  cursor: pointer;
}
.footer__micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(13px, 0.781vw, 15px);
  line-height: 1.65;
  letter-spacing: -0.009em;
  color: #000000;
  margin: clamp(8px, 0.208vw, 4px) 0 0;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(16px, 1.26vw, 24.2px);
  border-top: 0.455px solid rgba(0, 0, 0, 0.08);
}
.footer__bottom a {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(11px, 0.625vw, 12px);
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #0A0A0A;
  text-decoration: none;
}
.footer__bottom span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(12px, 0.677vw, 13px);
  line-height: 1.48;
  color: rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__right .waitlist-form { flex-direction: column; }
}