/* ============================================================
   FuelHer — marketing site
   Brand system locked. Do not introduce colours outside :root.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --burgundy:      #5A1F28;
  --burgundy-deep: #431018;
  --rose:          #D8A3AA;
  --rose-deep:     #C2848C;
  /* Text-safe rose. #C2848C on cream is only 2.75:1 — below WCAG AA. This
     deeper rose hits 4.66:1 and is used for every rose-coloured *word*.
     --rose / --rose-deep stay for the wordmark and decorative shapes. */
  --rose-ink:      #9E5A63;
  --blush:         #F1D3D5;
  --cream:         #FAF3EE;
  --cream-soft:    #FDF9F6;
  --greige:        #DCCFC6;
  --greige-deep:   #BCA99C;
  --orange:        #E18B63;

  /* Semantic */
  --bg:            var(--cream);
  --surface:       #FFFDFB;
  --text:          #3A1219;
  --text-muted:    #7A5B60;
  --border:        rgba(90, 31, 40, .12);
  --border-soft:   rgba(90, 31, 40, .07);

  /* Signal colour, sampled from the shipped scan-result screen ("Nourishing").
     Functional — never reuse for decoration.
     NOTE: the identity board also defines a three-colour traffic light
     (good / okay / needs attention). That system has not been observed in the
     shipped app, so it is deliberately NOT surfaced on this site. Do not add
     amber or red states until they exist in the product. */
  --signal-sage:      #5A7757;
  --signal-sage-soft: #DDE6DB;

  /* Type scale */
  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + .27vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.25rem + .6vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);

  /* Spacing — spacious rhythm */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --section-y: clamp(4.5rem, 10vw, 8.75rem);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-phone: 38px;

  /* Warm, layered shadows — never flat grey */
  --shadow-sm: 0 1px 2px rgba(90,31,40,.05), 0 2px 8px rgba(90,31,40,.05);
  --shadow:    0 2px 6px rgba(90,31,40,.05), 0 12px 28px -8px rgba(90,31,40,.13);
  --shadow-lg: 0 4px 12px rgba(90,31,40,.06), 0 32px 64px -20px rgba(90,31,40,.24);

  --ease: cubic-bezier(.22,.68,.35,1);
  /* Weighty, spring-like settle for reveals and larger moves. */
  --ease-spring: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Paper grain — keeps large flat areas from reading as sterile */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* A class selector on an element beats the UA `[hidden]` rule, so make the
   attribute authoritative — the mobile nav, the FAQ panels and the reviews
   section all rely on it. */
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--burgundy);
  color: var(--cream);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */
.h1, .h2, .h3, .h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--burgundy);
  text-wrap: balance;
}
.h1 { font-size: var(--step-4); line-height: 1.04; }
.h1 em { font-style: italic; color: var(--rose-ink); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); line-height: 1.2; }
.h4 { font-size: var(--step-1); line-height: 1.3; }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rose-ink);
  margin-bottom: var(--space-3);
}

.lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 34ch;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--cream  { background: var(--cream-soft); }
.section--blush  { background: linear-gradient(170deg, var(--blush) 0%, #F6E1E1 55%, var(--cream) 100%); }

.section__head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__lede { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--step-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn--primary { background: var(--burgundy); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--burgundy-deep); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--cream { background: var(--cream); color: var(--burgundy); box-shadow: var(--shadow); }
.btn--cream:hover { background: #fff; transform: translateY(-1px); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--step-0); }
.btn--sm { min-height: 42px; padding: .6rem 1.15rem; }
.btn:active { transform: translateY(0) scale(.985); }
.btn__icon { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 243, 238, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border-soft); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 74px;
}

.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.logo__heart { width: 17px; height: 16px; fill: var(--rose); flex: none; margin-bottom: 6px; }
.logo__word {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--rose-deep);
  letter-spacing: -.01em;
}

.nav { display: none; align-items: center; gap: var(--space-5); }
.nav a:not(.btn) {
  text-decoration: none;
  font-size: var(--step--1);
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.nav a:not(.btn):hover { color: var(--burgundy); }

.nav-toggle {
  display: grid;
  gap: 5px;
  width: 44px;
  height: 44px;
  place-content: center;
  margin-right: -8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--burgundy);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) clamp(1.25rem, 5vw, 2.5rem) var(--space-5);
  border-top: 1px solid var(--border-soft);
  background: var(--cream);
}
.mobile-nav a:not(.btn) {
  text-decoration: none;
  padding: .6rem 0;
  color: var(--text-muted);
  font-size: var(--step-1);
}

@media (min-width: 860px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(241, 211, 213, .55) 0%, transparent 62%),
    radial-gradient(70% 60% at 100% 20%, rgba(220, 207, 198, .5) 0%, transparent 60%),
    var(--cream);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

.hero__copy > * + * { margin-top: var(--space-4); }
.hero__actions { display: grid; gap: var(--space-2); justify-items: start; }
.hero__note { font-size: var(--step--1); color: var(--text-muted); }

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.hero__pills li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: rgba(255, 253, 251, .8);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.hero__pills svg { width: 15px; height: 15px; color: var(--rose-ink); }

.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__glow {
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(216, 163, 170, .5), transparent 68%);
  filter: blur(28px);
  z-index: 0;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
  .lede { max-width: 38ch; }
}

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  z-index: 1;
  width: min(272px, 76vw);
  /* Inner screen matches the 918x1988 iPhone screenshots (1 : 2.166). */
  aspect-ratio: 272 / 568;
  padding: 9px;
  border-radius: var(--radius-phone);
  background: linear-gradient(160deg, #4A1922 0%, #2B0A10 48%, #4A1922 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.09);
  flex: none;
}

/* Hero device: warm titanium frame, tilted in perspective.
   Matches the App Store key-art treatment. Gallery phones stay flat —
   four tilted frames in a row reads as noise. */
.phone--hero {
  width: min(300px, 78vw);
  background: linear-gradient(145deg, #FBF7F4 0%, #DCD0C8 26%, #FFFDFC 52%, #CDBFB6 78%, #EFE7E1 100%);
  box-shadow:
    0 2px 4px rgba(90,31,40,.06),
    -18px 44px 60px -28px rgba(90,31,40,.34),
    0 60px 90px -50px rgba(90,31,40,.28),
    inset 0 0 0 1px rgba(255,255,255,.55);
  transform: perspective(1600px) rotateY(-14deg) rotateX(3deg) rotateZ(-3deg);
  transform-origin: 55% 60%;
  transition: transform .6s var(--ease);
}
.hero__visual:hover .phone--hero {
  transform: perspective(1600px) rotateY(-9deg) rotateX(2deg) rotateZ(-2deg);
}
@media (prefers-reduced-motion: reduce) {
  .phone--hero,
  .hero__visual:hover .phone--hero { transition: none; }
}
/* Below ~700px the tilt eats horizontal room and crops the screenshot. */
@media (max-width: 700px) {
  .phone--hero { transform: perspective(1600px) rotateY(-7deg) rotateZ(-1.5deg); }
}


.phone__notch {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 20px;
  border-radius: 999px;
  background: #1B0509;
  z-index: 3;
}
/* Screenshots carry their own iOS status bar, so no notch overlay on them. */
.phone--shot .phone__notch { display: none; }

/* The screenshot itself. Sized by the frame, never by its intrinsic pixels. */
.screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  object-position: top center;
  /* Shown while the file loads, and if a screenshot is ever missing. */
  background: var(--cream-soft);
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(272px, 76vw);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: var(--space-2) var(--space-5);
  margin-inline: calc(clamp(1.25rem, 5vw, 2.5rem) * -1);
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item { scroll-snap-align: start; }
.gallery__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--burgundy);
  margin-top: var(--space-4);
}
.gallery__text { font-size: var(--step--1); color: var(--text-muted); margin-top: .25rem; }
.gallery__hint { font-size: var(--step--1); color: var(--text-muted); }

@media (min-width: 900px) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--space-4);
  }
  .gallery .phone { width: 100%; }
  .gallery__hint { display: none; }
}

/* ---------- Features ---------- */
/* Editorial rows separated by hairlines — deliberately not a three-up card
   grid. The three features carry very different text lengths, and equal cards
   forced the shortest one to sit in a half-empty box. */
.features { border-top: 1px solid var(--border); }

.feature {
  display: grid;
  gap: var(--space-3);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
}

.feature__mark { display: flex; align-items: center; gap: var(--space-3); }

.feature__index {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  color: var(--rose-deep);
  font-variant-numeric: tabular-nums;
}

.feature__body > p {
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 58ch;
}
.feature .h3 { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.875rem); max-width: 22ch; }

.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: none;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature__icon--circle { background: var(--blush); color: var(--burgundy); }
.feature__icon--heart  { background: var(--greige); color: var(--burgundy); }
.feature__icon--leaf   { background: rgba(225, 139, 99, .2); color: #A8532C; }

@media (min-width: 820px) {
  /* Asymmetric 1:4 split — the numeral column stays narrow so the text block
     keeps a comfortable measure. */
  .feature {
    grid-template-columns: minmax(140px, 1fr) 4fr;
    gap: var(--space-5);
    align-items: start;
  }
  .feature__mark { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ---------- Scan flow ---------- */
.signal__closing {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: var(--step-2);
  color: var(--burgundy);
  margin-top: var(--space-4);
}

/* Seven frames is too many for a grid at any width, so this stays a
   horizontal strip everywhere — the sequence is the point. */
.flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(210px, 62vw);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: var(--space-2) var(--space-4);
  margin-inline: calc(clamp(1.25rem, 5vw, 2.5rem) * -1);
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  scrollbar-width: none;
  counter-reset: none;
}
.flow::-webkit-scrollbar { display: none; }

.flow__step { scroll-snap-align: start; }
.flow__step .phone { width: 100%; }

.flow__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--signal-sage-soft);
  color: var(--signal-sage);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.flow__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--burgundy);
  margin-top: var(--space-3);
}
/* Quoted product copy — the app's own words, kept verbatim. */
.flow__text {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: .25rem;
}

/* ---------- Reviews (hidden until real reviews exist) ---------- */
.reviews { display: grid; gap: var(--space-4); }
@media (min-width: 820px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ accordion ---------- */
.accordion { border-top: 1px solid var(--border); }
.acc { border-bottom: 1px solid var(--border); }
.acc h3 { font: inherit; margin: 0; }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--burgundy);
  transition: color .2s var(--ease);
}
.acc__btn:hover { color: var(--rose-ink); }
.acc__chev {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__chev { transform: rotate(180deg); }
.acc__panel { padding-bottom: var(--space-4); max-width: 62ch; }
.acc__panel p { color: var(--text-muted); }
.acc__panel p + p { margin-top: var(--space-3); }
.acc__panel a { color: var(--rose-ink); text-underline-offset: 3px; }
.acc__panel strong { color: var(--burgundy); font-weight: 600; }

/* ---------- Final CTA ---------- */
.cta {
  background:
    radial-gradient(80% 90% at 50% 0%, #6B2732 0%, transparent 60%),
    var(--burgundy);
  color: var(--cream);
  padding-block: var(--section-y);
  text-align: center;
}
.cta__inner { display: grid; justify-items: center; gap: var(--space-4); max-width: 620px; }
.cta__heart { width: 30px; height: 27px; fill: var(--rose); }
.cta__title { color: var(--cream); }
.cta__price { font-size: var(--step-0); color: rgba(250, 243, 238, .85); }
.cta__legal { font-size: var(--step--1); color: rgba(250, 243, 238, .62); max-width: 46ch; }
.cta__legal a { color: rgba(250, 243, 238, .9); text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--cream-soft);
  border-top: 1px solid var(--border-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-6);
}
.footer__inner { display: grid; gap: var(--space-6); }
.footer__brand .logo--footer { margin-bottom: var(--space-2); }
.footer__tagline { font-size: var(--step--1); color: var(--text-muted); }
.footer__head {
  font-family: Inter, sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: var(--space-3);
}
.footer__col ul { display: grid; gap: .6rem; }
.footer__col a {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.footer__disclaimer { max-width: 46ch; }

@media (min-width: 720px) {
  .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-3) clamp(1.25rem, 5vw, 2.5rem) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(250, 243, 238, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-soft);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-shown { transform: translateY(0); }
@media (min-width: 860px) { .sticky-cta { display: none; } }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Cascade reveals: each row sets --i, so order is declared in the markup
   rather than hard-coded per section here. */
.reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ring__value { stroke-dashoffset: 88; }
  .sticky-cta { transition: none; }
}

/* Shown in place of a screenshot that failed to load — see guardScreenshots()
   in main.js. Deliberately conspicuous so a missing file never ships quietly. */
.screen-missing {
  display: grid;
  place-content: center;
  gap: .35rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--greige);
  color: var(--burgundy);
  border-radius: 30px;
}
.screen-missing strong { font-size: var(--step--1); font-weight: 600; }
.screen-missing span {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  word-break: break-all;
}