/* Ava Monroe · OnlyFans Management
   Tokens, bar, buttons and footer are shared by every page (index, apply, apply-sent, 404).
   The form's own rules live in form.css. */

/* ---------- Fonts (self-hosted) ---------- */

@font-face {
  font-family: 'Chillax';
  src: url('/assets/fonts/chillax-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chillax';
  src: url('/assets/fonts/chillax-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --pink: #fbe3e9;        /* baby pink ground */
  --pink-2: #f5cad6;      /* deeper baby pink: hover fill of light icon buttons, photo frames while loading, form progress track */
  --milk: #fff7f9;        /* light surfaces and text on chocolate */
  --white: #fff;          /* pure white, only where it is meant: text on raspberry, light screenshot frames, form fills */
  --rasp: #c8203a;        /* raspberry red: actions and accents */
  --rasp-deep: #a3172f;   /* raspberry hover, error text */
  --rasp-tint: rgb(200 32 58 / 0.07); /* "with me" zone drawn over the charts */
  --rasp-line: rgb(200 32 58 / 0.5);   /* hover border of form answer cards */
  --rasp-glow: rgb(200 32 58 / 0.14);  /* focus glow of form fields */
  --shadow-bar: 0 -8px 24px rgb(58 27 18 / 0.08); /* sticky apply bar on phones */
  --choc: #3a1b12;        /* chocolate ink and dark sections */
  --choc-2: #5a3328;      /* secondary text on light surfaces */
  --choc-hover: #24100a;  /* hover of chocolate buttons */
  --pink-on-dark: #ff8fa6; /* raspberry accent that reads on chocolate */
  --text-on-dark-2: rgb(255 247 249 / 0.72); /* secondary text on chocolate */

  --line: rgb(58 27 18 / 0.14);          /* hairlines on light surfaces */
  --line-strong: rgb(58 27 18 / 0.5);    /* control borders: 3:1 on pink, milk and white */
  --line-on-dark: rgb(255 247 249 / 0.16); /* hairlines on chocolate */
  --ring-on-rasp: rgb(255 255 255 / 0.6);   /* ring of the ticker's pause button */
  --hover-on-rasp: rgb(255 255 255 / 0.16); /* hover fill of that button */
  --scrim-choc: rgb(58 27 18 / 0.86);       /* chocolate disc of the chips drawn over screenshots and videos */
  --ring-on-dark: rgb(255 247 249 / 0.3);   /* thin milk ring around those chips */
  --shot-dark: #0b0e15;   /* background of the dark-mode Instagram screenshots */
  --shadow-shot: 0 18px 40px rgb(0 0 0 / 0.28);

  --focus-ring: var(--choc); /* switched to milk on dark and raspberry surfaces */

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --display: 'Chillax', 'Figtree', system-ui, sans-serif;
  --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --h2: clamp(2.2rem, 9vw, 3rem);   /* section titles */
  --h3: clamp(1.5rem, 6vw, 2rem);   /* every h3 on the landing page */
  --body: 17px;
  --lede: 17.5px;                   /* intro paragraphs under a title */

  --gutter: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--pink);
  color: var(--choc);
  font: 400 var(--body)/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rasp);
  accent-color: var(--rasp);
  overflow-wrap: break-word;
}

::selection { background: var(--rasp); color: var(--white); }

img { display: block; max-width: 100%; }
picture { display: contents; } /* the <img> inside lays out as if <picture> were not there */
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
ul { margin: 0; padding: 0; list-style: none; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.ticker, .results, .apply { --focus-ring: var(--milk); }

.nowrap { white-space: nowrap; } /* keeps a short phrase together so a title never ends on a lone word */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pink);
}
.bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 12px var(--gutter);
}
.wordmark {
  font: 700 25px/1 var(--display);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  /* 44px tall hit area; the negative margin keeps the bar the height it was */
  padding: 8px 0 11px;
  margin-block: -8px;
}
.bar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bar__insta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--choc);
  transition: background-color 160ms ease;
}
.bar__insta .icon { width: 23px; height: 23px; }
.bar__insta:hover { background: var(--pink-2); }
.bar__apply {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--choc);
  color: var(--milk);
  font: 600 15px/1 var(--text);
  text-decoration: none;
  transition: background-color 160ms ease;
}
.bar__apply:hover { background: var(--choc-hover); }

/* ---------- Shared type ---------- */

.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-intro {
  max-width: 32em;
  margin: 16px 0 0;
  font-size: var(--lede);
  color: var(--choc-2);
}

.who__name,
.proof-group__title,
.handle__name,
.steps__name {
  margin: 0;
  font-family: var(--display);
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-md);
  background: var(--rasp);
  color: var(--white);
  font: 600 17px/1 var(--text);
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--rasp-deep); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; transition: transform 220ms var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 600 16.5px/1 var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rasp);
}
.link .icon { width: 18px; height: 18px; color: var(--rasp); transition: transform 220ms var(--ease-out); }
.link:hover .icon { transform: translateY(2px); }

/* ---------- Hero ---------- */

.hero__inner {
  display: grid;
  gap: 32px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 20px var(--gutter) 40px;
}

.hero__title {
  margin: 0;
  max-width: 11ch;
  font: 600 clamp(2.6rem, 11vw, 5.5rem) / 0.97 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 32em;
  margin: 22px 0 0;
  font-size: var(--lede);
  line-height: 1.55;
  color: var(--choc-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 28px;
}

.hero__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  background: var(--pink-2);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The one moment of motion: the photo settles into its frame once it has arrived.
   The photo waits hidden until site.js has it decoded, so the animation never plays on an empty frame
   and the photo never flashes in before it. site.js then adds .is-settling (photo ready within about 1s
   of the page opening) or .is-fading (later: a quick fade, no zoom), or .is-shown (no animation).
   If site.js never runs, hero-failsafe shows the photo after 3s. Without JavaScript (the <noscript>
   style in index.html) and with reduced motion, the photo is simply shown. */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { opacity: 0; animation: hero-failsafe 0.4s ease-out 3s forwards; }
  .hero__photo img.is-waiting { animation: none; }
  .hero__photo img.is-settling { opacity: 1; animation: settle 1.4s var(--ease-out) both; }
  .hero__photo img.is-fading { opacity: 1; animation: hero-fade 0.35s ease-out both; }
  .hero__photo img.is-shown { opacity: 1; animation: none; }
  @keyframes settle { from { opacity: 0; transform: scale(1.07); } 22% { opacity: 1; } }
  @keyframes hero-fade { from { opacity: 0; } }
  @keyframes hero-failsafe { to { opacity: 1; } }
}

/* ---------- Results ticker ---------- */

.ticker {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--rasp);
  color: var(--white);
}
.ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* soft fade where the figures enter and leave (a mask: only the alpha counts) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* The still strip (reduced motion, no JavaScript) scrolls, so it takes keyboard focus. The mask would
   hide the focus ring drawn around it, so the fade goes while it has focus. */
.ticker__viewport:focus-visible { -webkit-mask-image: none; mask-image: none; }
.ticker__track { display: flex; width: max-content; }
.ticker__list { display: flex; flex: none; }
.ticker__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px 0 0;
  font: 400 15.5px/1 var(--text);
  white-space: nowrap;
}
.ticker__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
}
.ticker__list b { font: 600 17px/1 var(--display); letter-spacing: -0.01em; }

/* Pause / play: a 44px hit area around a 32px ring, at the right end of the strip.
   First in the source so it comes before the moving figures; site.js unhides it and flips .is-paused.
   The negative block margins keep the strip the height it was. */
.ticker__toggle {
  order: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -14px -6px -14px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ticker__toggle[hidden] { display: none; }
.ticker__toggle::before {
  content: "";
  grid-area: 1 / 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-on-rasp);
  transition: background-color 160ms ease;
}
.ticker__toggle .icon { grid-area: 1 / 1; width: 14px; height: 14px; }
.ticker__toggle:hover::before { background: var(--hover-on-rasp); }
.ticker__toggle:focus-visible { outline-offset: -4px; border-radius: 50%; }
.ticker__play,
.ticker.is-paused .ticker__pause { display: none; }
.ticker.is-paused .ticker__play { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: ticker 48s linear infinite; }
  .ticker.is-paused .ticker__track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(-50%); } }
}
/* Mouse users can also stop it by pointing at the figures (not at the button, so "play" works at once). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ticker__viewport:hover .ticker__track { animation-play-state: paused; }
}
/* Reduced motion: a still strip you can swipe, so there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .ticker__viewport { overflow-x: auto; }
  .ticker__list[aria-hidden] { display: none; }
  .ticker__toggle { display: none; }
}

/* ---------- About Ava ---------- */

.about { background: var(--milk); }
.about__inner {
  display: grid;
  gap: 28px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 64px var(--gutter);
}
.about__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  background: var(--pink-2);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about__body .section-title { max-width: 12ch; }
.about__body p { max-width: 34em; margin: 16px 0 0; font-size: var(--lede); color: var(--choc-2); }
.about__body .section-title + p { margin-top: 22px; }
.about__body .about__sign {
  margin-top: 22px;
  font: 700 26px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--rasp);
}

/* ---------- Who I work with ---------- */

.who__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 64px var(--gutter);
}
.who__list { display: grid; gap: 0; margin-top: 28px; }
.who__list li { padding: 20px 0; border-top: 1px solid var(--line); }
.who__list li:last-child { border-bottom: 1px solid var(--line); }
.who__name { color: var(--rasp); }
.who__list p { max-width: 30em; margin: 8px 0 0; color: var(--choc-2); }

/* ---------- Results ---------- */

.results {
  background: var(--choc);
  color: var(--milk);
}
.results__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 64px var(--gutter) 72px;
}
.results__title { max-width: 16ch; }
.results__intro {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--text-on-dark-2);
}
.results__updated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--text-on-dark-2);
}
.results__updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-on-dark); }

.proof { margin: 40px 0 0; }
.proof__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-shot);
}
.proof__shot img { width: 100%; height: auto; }
.proof__text { margin-top: 18px; }

/* Every proof screenshot is a link to the image file, so it can be opened full size and zoomed. */
.proof__zoom { display: block; color: inherit; cursor: zoom-in; }
/* The focus ring goes around the whole frame (the frame clips anything drawn inside it). */
.proof__zoom:focus-visible { outline-offset: -3px; }
@supports selector(:has(*)) {
  .proof__zoom:focus-visible { outline: none; }
  .proof__shot:has(.proof__zoom:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
}
/* "Tap to enlarge" hint: a small chip, top right by default. Always there on touch screens,
   on hover or focus with a mouse. Positioned on the frame, so it stays put when a chart scrolls.
   Since touch screens always show it, each one sits on a blank part of its own screenshot. */
.proof__hint {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--scrim-choc);
  box-shadow: 0 0 0 1px var(--ring-on-dark);
  color: var(--milk);
  pointer-events: none;
}
.proof__hint .icon { width: 13px; height: 13px; }
/* Views wall: both top corners hold labels (period, date range). The shorter screenshots leave blank space
   at the bottom of their frame, so the chip goes bottom left. */
.proof-group__row--wall .proof__hint { top: auto; right: auto; bottom: 6px; left: 6px; }
/* The two views rings fill their frame: the chip goes on the blank space right of the ring. */
.proof-group__row--wall .proof__hint--ring { top: 16%; right: 6px; bottom: auto; left: auto; }
/* Dark insights screenshot: on the blank space right of the followers / non-followers split. */
.proof-group__row--wall .proof__hint--split { top: 34%; right: 6px; bottom: auto; left: auto; }
/* Leak report: in the blank gap between the Delist and Takedown columns. */
.proof__hint--leaks { right: 19%; }
/* Telegram chat: on the chat background, below the first bubble. */
.proof__hint--chat { top: auto; right: auto; bottom: 8px; left: 8px; }
@media (hover: hover) {
  .proof__hint { opacity: 0; transition: opacity 160ms ease; }
  .proof__zoom:hover .proof__hint,
  .proof__zoom:focus-visible .proof__hint { opacity: 1; }
}

/* Before / after marker drawn over a chart screenshot. .proof__plot is sized to the image,
   so the marker stays on its date at any width, including inside the phone scroller below. */
.proof__plot { display: block; position: relative; }
.proof__plot::after {
  content: "";
  position: absolute;
  left: var(--mark-x);
  right: 3%;
  top: var(--plot-top);
  bottom: calc(100% - var(--plot-bottom));
  background: var(--rasp-tint);
  pointer-events: none;
}
.mark {
  position: absolute;
  left: var(--mark-x);
  top: calc(var(--plot-top) - var(--mark-lift, 9%));
  bottom: calc(100% - var(--plot-bottom));
  border-left: 2px dashed var(--rasp);
  z-index: 1;
}
.mark__tag {
  position: absolute;
  left: 6px;
  top: -4px;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--rasp);
  color: var(--white);
  font: 600 12px/1.2 var(--text);
  white-space: nowrap;
}
/* Phones: the charts keep a readable width and scroll sideways; site.js starts them on the marker.
   The captions stay outside the scroller. */
@media (max-width: 599.98px) {
  .proof__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) var(--white);
  }
  .proof__plot { width: 640px; }
}

/* Follower recordings: site.js gives them their poster and file shortly before they scroll into view. */
.proof__shot--video { aspect-ratio: 9 / 16; }
.proof--phone .proof__shot--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Play / pause: a 44px hit area around a 32px disc, bottom right. */
.vid-toggle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--milk);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vid-toggle[hidden] { display: none; }
.vid-toggle::before {
  content: "";
  grid-area: 1 / 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--scrim-choc);
  box-shadow: 0 0 0 1px var(--ring-on-dark);
  transition: background-color 160ms ease;
}
.vid-toggle .icon { grid-area: 1 / 1; width: 14px; height: 14px; }
.vid-toggle:hover::before { background: var(--choc); }
/* The ring hugs the disc (milk, then chocolate) so it shows on the light recording and is not clipped by the frame. */
.vid-toggle:focus-visible { outline: none; }
.vid-toggle:focus-visible::before { box-shadow: 0 0 0 3px var(--milk), 0 0 0 5px var(--choc); }
.vid-toggle__pause,
.vid-toggle.is-playing .vid-toggle__play { display: none; }
.vid-toggle.is-playing .vid-toggle__pause { display: block; }

/* Caption paragraphs: each one sets its own top margin. */
.ba {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  margin: 0;
}
.ba__side { display: flex; flex-direction: column; gap: 6px; }
.ba__k { font: 600 13px/1 var(--text); letter-spacing: 0.02em; color: var(--text-on-dark-2); }
.ba__v {
  font: 600 clamp(1.9rem, 8vw, 3rem) / 1 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-2);
}
.ba__v--after { color: var(--pink); }
.ba__arrow { width: 26px; height: 26px; margin-bottom: 8px; color: var(--pink-on-dark); flex: none; }
.proof__figure {
  margin: 0;
  font: 600 clamp(1.5rem, 6.4vw, 2.4rem) / 1 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
}
.proof__unit { margin: 12px 0 0; font: 600 16px/1.3 var(--text); color: var(--pink); }
.proof__label { margin: 8px 0 0; font-size: 17px; line-height: 1.45; }
.proof__meta { margin: 6px 0 0; font-size: 14.5px; color: var(--text-on-dark-2); }

.proof-group { margin-top: 72px; }
.proof-group__text { max-width: 30em; margin: 10px 0 0; color: var(--text-on-dark-2); }
.proof-group__row { margin-top: 24px; }
.proof-group__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
/* Phones: one recording per row, so the numbers inside the recordings stay readable. */
@media (max-width: 479.98px) {
  .proof-group__row--two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.proof-group__row--wall {
  display: flex;
  gap: 14px;
  margin-inline: calc(var(--gutter) * -1);
  margin-top: 18px;
  padding: 6px var(--gutter) 8px; /* 6px on top so a focused frame's ring is not clipped by the scroller */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--text-on-dark-2) transparent;
}
.proof-group__row--wall > li { flex: 0 0 58%; scroll-snap-align: start; } /* site.js brings a card that gets keyboard focus fully into view */

.proof--phone { margin: 0; }
.proof--leaks { margin: 24px 0 0; }
.proof--chat { margin: 24px 0 0; max-width: 560px; }
.proof-pair2 { display: grid; gap: 8px; }
.proof--chat .proof__label { margin-top: 14px; font-size: 16px; }
.proof--chat .proof__label strong { color: var(--pink); font-weight: 600; }
.proof--chat .proof__meta { margin-top: 12px; }
/* The second chat takes a full row: screenshot under the first chat, its caption beside it in the second column. */
@media (min-width: 600px) {
  .proof--chat-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; max-width: none; }
  .proof--chat-row .proof__label { margin-top: 0; }
}
@media (min-width: 900px) {
  .proof--chat-row { gap: 32px; }
}
.proof--phone .proof__shot { border-radius: var(--r-sm); }
.proof--phone .proof__shot img { display: block; width: 100%; height: auto; }
.proof--phone .proof__text { margin-top: 14px; }
.proof--phone .proof__label { font-size: 15px; text-wrap: balance; }
.proof--phone .proof__meta { font-size: 13.5px; }

/* Views wall: every screenshot sits in the same phone-shaped frame, whole (never cropped),
   on its own background colour, so the figures under them line up. The colour is painted by the
   <img> box itself, which fills the frame, so it shows around the contained screenshot. */
.proof-group__row--wall .proof__shot { aspect-ratio: 9 / 16; }
.proof-group__row--wall .proof__zoom { height: 100%; }
.proof-group__row--wall .proof__shot img {
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
  background: var(--white);
}
.proof-group__row--wall .proof__shot--dark img { background: var(--shot-dark); }

/* ---------- What I handle ---------- */

.handle__inner {
  display: grid;
  gap: 32px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px var(--gutter) 64px;
}
.handle__photo {
  order: 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  max-height: 460px;
  background: var(--pink-2);
}
.handle__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.handle__list { margin-top: 28px; }
.handle__list li { padding: 20px 0; border-top: 1px solid var(--line); }
.handle__list li:last-child { border-bottom: 1px solid var(--line); }
.handle__list p { max-width: 34em; margin: 8px 0 0; color: var(--choc-2); }

/* ---------- How it works ---------- */

.steps { background: var(--milk); }
.steps__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px var(--gutter);
}
.steps__list {
  display: grid;
  gap: 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.steps__n {
  display: block;
  font: 700 clamp(3rem, 12vw, 4.5rem) / 0.9 var(--display);
  color: var(--rasp);
}
.steps__name { margin-top: 12px; }
.steps__list p { max-width: 26em; margin: 8px 0 0; color: var(--choc-2); }

/* ---------- FAQ ---------- */

.faq__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px var(--gutter);
}
.faq__list { margin-top: 32px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  font: 600 clamp(1.15rem, 4.6vw, 1.4rem) / 1.25 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance; /* no question ends on a lone word */
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2.5px solid var(--rasp);
  border-bottom: 2.5px solid var(--rasp);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:hover { color: var(--rasp-deep); }
.faq details p { max-width: 38em; margin: 0 0 22px; color: var(--choc-2); }
.faq details a { color: var(--choc); font-weight: 600; text-decoration-color: var(--rasp); }

/* ---------- Apply ---------- */

.apply { background: var(--choc); color: var(--milk); }
.apply .section-intro { color: var(--text-on-dark-2); }
.apply__inner {
  display: grid;
  gap: 32px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px var(--gutter);
}
.apply__photo {
  display: none;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  background: var(--choc-2);
}
.apply__photo img { width: 100%; height: 100%; object-fit: cover; }
.apply__choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 28px;
}
.apply__choice + .apply__choice {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-on-dark);
}
.apply__choice p { margin: 0; max-width: 24em; font-size: 15px; color: var(--text-on-dark-2); }
.apply__choice .btn { min-width: min(220px, 100%); border: 0; cursor: pointer; }
.btn--dm { background: var(--milk); color: var(--choc); }
.btn--dm:hover { background: var(--pink); }
.btn--dm .icon { color: var(--rasp); width: 22px; height: 22px; }

/* ---------- Sticky apply bar (phones and tablets) ----------
   site.js marks it ready (so it never shows without JS), then slides it in once the hero is gone
   and hides it while the apply section or the footer is on screen. */
.stick { display: none; }
@media (max-width: 899.98px) {
  .stick.is-ready {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--milk);
    box-shadow: var(--shadow-bar);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
  }
  .stick.is-on { transform: none; visibility: visible; transition: transform 280ms var(--ease-out); }
  .stick__text { margin: 0; font-size: 14.5px; line-height: 1.3; color: var(--choc-2); text-wrap: pretty; }
  .stick__btn { flex: none; min-height: 48px; padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .stick.is-ready, .stick.is-on { transition: none; }
}

/* ---------- Footer ---------- */

.foot { border-top: 1px solid var(--line); } /* the FAQ above shares its pink ground */
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 48px var(--gutter) 40px;
}
.foot__brand p { max-width: 26em; margin: 10px 0 0; color: var(--choc-2); font-size: 15.5px; }
.foot__links { display: grid; gap: 4px; }
.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration-color: var(--rasp);
  overflow-wrap: anywhere;
}

/* ---------- 200% zoom and very narrow screens (a 390px phone zoomed to 200% is 195px wide) ---------- */

@media (max-width: 299px) {
  :root { --h2: 1.75rem; --h3: 1.3rem; }
  .bar { position: static; }
  .hero__title { font-size: 2rem; }
  .ba__v { font-size: 1.6rem; }
  .proof__figure { font-size: 1.3rem; }
  .proof-group__row--two { grid-template-columns: minmax(0, 1fr); }
  .proof-group__row--wall > li { flex-basis: 82%; }
  .steps__n { font-size: 2.6rem; }
  .btn { padding-inline: 18px; line-height: 1.15; }
}

/* ---------- Tablets and large phones (600 to 899px) ---------- */

@media (min-width: 600px) and (max-width: 899.98px) {
  :root { --gutter: 32px; --h2: clamp(2.5rem, 6vw, 3rem); }

  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 40px;
    padding-top: 28px;
    padding-bottom: 56px;
  }
  .hero__title { font-size: clamp(2.6rem, 6.8vw, 3.75rem); }

  .about__inner {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 40px;
    padding-block: 80px;
  }
  .about__photo { aspect-ratio: 4 / 5; }

  .proof-group__row--two { max-width: 560px; }
  .proof-group__row--wall > li { flex-basis: 34%; }
  .proof-group__row--wall .proof__figure { font-size: 1.75rem; }
  .proof-pair2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
  .proof--chat { margin: 0; }

  .handle__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 40px;
    padding-block: 80px;
  }
  .handle__photo { order: 0; max-height: none; position: sticky; top: 88px; }
}

/* From 720px the three steps sit side by side, as on wider screens. */
@media (min-width: 720px) and (max-width: 899.98px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* ---------- Wider screens ---------- */

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
    --h2: clamp(3rem, 4.6vw, 4rem);
  }

  .bar__inner { padding-block: 16px; }
  .wordmark { font-size: 28px; }

  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 72px;
    padding-top: 36px;
    padding-bottom: 72px;
  }
  .hero__title { font-size: clamp(3.75rem, 6.4vw, 5.5rem); }
  .hero__lede { margin-top: 28px; font-size: 19px; }
  .hero__actions { margin-top: 32px; }
  .ticker { padding: 20px 12px; }
  .ticker__list li { font-size: 16.5px; }
  .ticker__list b { font-size: 19px; }
  .hero__photo { border-radius: var(--r-xl); }

  .results__inner { padding-top: 104px; padding-bottom: 112px; }
  .results__intro { font-size: 18px; }
  .proof--wide {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
    gap: 48px;
    align-items: center;
    margin-top: 64px;
  }
  .proof--wide .proof__shot { order: 2; }
  .proof--wide .proof__text { order: 1; margin: 0; }
  /* sized to the text column so "$160 → $1,200" always fits beside the chart */
  .proof--wide .ba__v { font-size: clamp(1.9rem, 3.4vw, 3rem); }
  .proof-group {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
    gap: 48px;
    align-items: start;
    margin-top: 104px;
  }
  .proof-group__row { margin-top: 0; }
  .proof-group__row--two { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 40px; justify-content: end; }
  .proof-group__row--wall {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .proof-group__row--wall .proof__figure { font-size: 1.75rem; }
  .proof--leaks { margin: 0; }
  .proof--chat { margin: 0; }
  .proof-pair2 { grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }

  .about__inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 80px;
    align-items: center;
    padding-block: 104px;
  }
  .about__photo { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
  .who__inner { padding-block: 96px 104px; }
  .who__list { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
  .who__list li, .who__list li:last-child { border-bottom: 0; padding-top: 24px; }
  .about__body p { font-size: 19px; }
  .handle__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: start;
    padding-block: 120px;
  }
  .handle__photo { order: 0; max-height: none; position: sticky; top: 104px; border-radius: var(--r-xl); }
  .steps__inner, .faq__inner { padding-block: 112px; }
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
  .faq__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
  .faq__list { margin-top: 0; }
  .apply__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 80px;
    align-items: start;
    padding-block: 112px;
  }
  .apply__photo { display: block; position: sticky; top: 104px; border-radius: var(--r-xl); }
  .foot__inner { grid-template-columns: 1.2fr 1fr; align-items: start; }
}