@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --ink: #302630;
  --ink-soft: #574650;
  --paper: #fff7ed;
  --butter: #f2d88f;
  --butter-light: #faebc2;
  --tangerine: #f08c21;
  --tangerine-ink: #9d4b00;
  --blush: #e36888;
  --blush-ink: #862b49;
  --blush-light: #f7c9d4;
  --sea: #6698cc;
  --sea-light: #c7dcf0;
  --matcha: #b4b534;
  --matcha-light: #e7e5a5;
  --white: #fffdfa;
  --line: rgba(48, 38, 48, .18);
  --line-strong: rgba(48, 38, 48, .34);

  /* Elevation, three soft tiers and one hard paper edge. There were thirteen
     shadows on the page and ten of them were used exactly once, including
     three different offsets for the same sticker effect. */
  --lift-1: 0 2px 5px rgba(48, 38, 48, .08);
  --lift-2: 0 13px 28px rgba(48, 38, 48, .15);
  --lift-3: 0 26px 70px rgba(48, 38, 48, .17);
  --lift-warm: 0 14px 30px rgba(240, 140, 33, .32);
  --paper-edge: 8px 8px 0;
  --shadow: var(--lift-3);
  --shadow-small: var(--lift-2);
  --max: 1440px;
  --duration-fast: 120ms;
  --duration-default: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: clip;
}
img { display: block; width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(48, 38, 48, .12);
}
button { color: inherit; }

:where(a, button):focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ink);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 11px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px 999px 999px 999px;
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.site-header {
  height: 94px;
  padding: 0 clamp(22px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,247,237,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 100;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark-logo { width: auto; height: 36px; }
.footer-wordmark { display: flex; }
.footer-wordmark .wordmark-logo { height: 44px; }

.primary-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; }
.primary-nav a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.primary-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--tangerine);
  transition: right var(--duration-default) var(--ease-out);
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; }
.nav-cta {
  background: var(--tangerine);
  color: var(--ink);
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: var(--lift-warm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.menu-toggle { display: none; }

.section-pad {
  padding-block: clamp(76px, 8vw, 132px);
  padding-inline: max(clamp(22px, 6vw, 88px), calc((100vw - var(--max)) / 2 + 64px));
}
.tiny-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-weight: 800;
  color: var(--blush-ink);
}

.journey-ribbon {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 28px;
  min-height: 112px;
  padding: 20px clamp(22px, 6vw, 88px);
  background: var(--butter-light);
  border-bottom: 1px solid rgba(48,38,48,.13);
}
.journey-heading { display: flex; flex-direction: column; }
.journey-heading strong { font-family: "Poppins", system-ui, sans-serif; font-size: 21px; font-weight: 600; }
/* Each step is the artefact it stands for: a query, a message, a verified
   badge, an inbox, a booked hour. The glyphs carry no words, so nothing has to
   be renamed to fit a narrow column. There is no connector: five saturated
   discs in a row read as a sequence on their own, and colour is the one thing
   that survives shrinking to a phone. The dashed path this replaced ran
   straight through three of the labels. */
.journey-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.journey-step { display: grid; justify-items: center; text-align: center; }
.journey-disc {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--step); color: var(--paper);
}
.journey-disc svg { display: block; }
.journey-num { margin-top: 12px; font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--blush-ink); font-variant-numeric: tabular-nums; }
.journey-step b { margin-top: 1px; font-family: "Poppins", system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.step-1 { --step: var(--tangerine); }
.step-2 { --step: var(--sea); }
.step-3 { --step: var(--matcha); }
.step-4 { --step: var(--blush); }
.step-5 { --step: var(--ink); }

.hero {
  min-height: calc(100svh - 82px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(44vw, 700px);
  align-items: center;
  gap: clamp(24px, 3.5vw, 58px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--paper);
  padding-block: 0;
  padding-left: max(clamp(34px, 4vw, 64px), calc((100vw - var(--max)) / 2 + 48px));
  padding-right: 0;
}
.hero-copy { padding-block: clamp(72px, 8vw, 118px); }
.hero-blob { position: absolute; z-index: -1; }
.blob-one { display: none; }
.blob-two { width: 310px; height: 160px; left: -94px; bottom: -72px; background: var(--blush-light); border-radius: 51% 49% 0 0 / 100% 100% 0 0; transform: rotate(3deg); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; margin-bottom: 18px; }
.eyebrow-star { color: var(--tangerine); font-size: 0; }
.eyebrow-star::after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--tangerine); }
.hero h1 {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(58px, 5.6vw, 88px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.042em;
  margin: 0 0 36px;
}
.hero h1 span { font-weight: 700; color: var(--blush); }
/* Melodrama ships no italic, and a synthesised slant wrecks a high-contrast
   face. Emphasis is carried by colour and the swash instead. */
.hero h1 em { font-style: normal; font-weight: 700; color: var(--blush-ink); position: relative; }
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 1%; right: -4%; bottom: 1px;
  height: 12px;
  background: var(--butter);
  z-index: -1;
  border-radius: 50%;
  transform: rotate(-1.6deg);
}
.hero-lede { max-width: 575px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.72; color: var(--ink-soft); margin: 0 0 34px; }
.hero-actions { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 16px 23px; font-size: 13px; line-height: 1.1; letter-spacing: .015em; font-weight: 800; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-default) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.button > span { transition: transform var(--duration-fast) var(--ease-out); }
.button-primary { background: var(--ink); color: var(--paper); border-radius: 999px; }
.button-secondary { border: 1.5px solid rgba(48, 38, 48, .34); border-radius: 999px; background: rgba(255,255,255,.26); }
.hand-note { font-family: "Manrope", system-ui, sans-serif; font-size: 17px; font-weight: 800; color: var(--blush-ink); }
/* The audit is the one thing the page is asking for, so it wears the one
   action colour, the same tangerine as the header button. It was ink here,
   which made the same ask look like two different offers on one screen. */
.hero .button-primary {
  background: var(--tangerine);
  color: var(--ink);
  box-shadow: var(--lift-warm);
}

/* Drawn, not typed. This was a ↳ glyph parked beside the note, pointing at
   nothing in particular. It is a curve now, and it lands on the button. */
.hero-note { margin: 26px 0 0 160px; position: relative; width: max-content; }
.hero-mobile-only, .hero-title-mobile { display: none; }
.hero h1 .hero-title-desktop { color: inherit; }
.hero-note-arrow {
  position: absolute;
  left: -82px;
  top: -40px;
  width: 78px;
  height: 70px;
  color: var(--tangerine);
  overflow: visible;
  transform: rotate(4deg);
}

.hero-collage { position: relative; min-height: calc(100svh - 82px); align-self: stretch; }
.hero-stage {
  overflow: hidden;
  background:
    radial-gradient(circle at 47% 43%, var(--tangerine) 0 25%, rgba(240, 140, 33, .76) 25.4% 37%, transparent 37.4%),
    var(--butter);
  border-radius: 13% 0 0 13% / 50% 0 0 50%;
}
.hero-stage::before {
  content: "";
  position: absolute;
  width: min(66vw, 700px);
  aspect-ratio: 1;
  left: 47%;
  top: 43%;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(122, 55, 0, .28);
  border-radius: 50%;
}
.hero-stage::after {
  content: "";
  position: absolute;
  width: 74%;
  height: 34%;
  left: 7%;
  bottom: -23%;
  border-radius: 50%;
  background: rgba(227, 104, 136, .23);
  transform: rotate(10deg);
}
.hero-orbit {
  position: absolute;
  width: min(54vw, 575px);
  aspect-ratio: 1;
  left: 47%;
  top: 43%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 247, 237, .46) 0 27%, rgba(255, 247, 237, .16) 45%, transparent 67%);
  border: 1px solid rgba(255, 247, 237, .32);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(255, 247, 237, .22);
}
.hero-cutout {
  position: absolute;
  z-index: 3;
  width: min(116%, 820px);
  height: auto;
  left: 48%;
  bottom: -2.5%;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 2px rgba(255, 247, 237, .95))
    drop-shadow(0 0 12px rgba(255, 247, 237, .46))
    drop-shadow(0 28px 28px rgba(122, 55, 0, .26))
    saturate(1.06)
    contrast(1.025);
}
/* The approved fs. tile acts as a brand seal in the portrait composition. */
.hero-brand-seal {
  position: absolute;
  z-index: 4;
  width: clamp(72px, 7vw, 104px);
  aspect-ratio: 1;
  right: 8%;
  top: 10%;
  border: 4px solid var(--paper);
  border-radius: 27%;
  background: var(--paper) url("assets/brand-icon.svg?v=founderssocial3") center / contain no-repeat;
  box-shadow: 0 8px 20px rgba(48,38,48,.16);
  transform: rotate(6deg);
  pointer-events: none;
}
.tape { position: absolute; width: 92px; height: 26px; opacity: .86; z-index: 3; box-shadow: var(--lift-1); }
.tape-yellow { background: rgba(242,216,143,.9); top: -13px; left: 45%; transform: translateX(-50%) rotate(-5deg); }
.tape-lilac { background: rgba(102,152,204,.78); top: -11px; left: 50%; transform: translateX(-50%) rotate(6deg); }
.tape-pink { background: rgba(227,104,136,.82); top: -11px; left: 43%; transform: translateX(-50%) rotate(-8deg); }
.sticker { position: absolute; z-index: 6; background: var(--paper); border: 0; box-shadow: var(--lift-2); font-family: "Poppins", system-ui, sans-serif; line-height: .9; text-align: center; }
.sticker-one { right: 5%; bottom: 7%; min-width: 250px; padding: 28px 34px 30px; border-radius: 50%; transform: rotate(4deg); font-size: 18px; }
.sticker-one strong { display: block; font-size: 26px; color: var(--blush); font-style: normal; font-weight: 600; }
/* Melodrama's 3 is flat-topped and its 0 is slashed, so "30" reads as "50" at
   sticker size. The figure is set in the body face; the phrase keeps the
   display face. */
.sticker-lead { display: block; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .05em; margin-bottom: 5px; }

.ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-block: 1px solid rgba(255,255,255,.18); }
.ticker-track { padding: 16px clamp(22px, 5vw, 76px); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 800; }
.ticker-group { display: flex; justify-content: center; gap: clamp(18px, 2.5vw, 38px); align-items: center; }
.ticker-group:nth-child(2) { display: none; }
.ticker-track i { color: var(--butter); font-style: normal; }

.belief { position: relative; overflow: clip; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(50px, 7vw, 110px); align-items: center; background: var(--blush-light); }
.belief h2, .section-heading h2, .method h2, .wins-heading h2, .about h2, .final-cta h2 {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 700;
  margin: 16px 0 28px;
}
h2 em { font-style: normal; color: var(--blush-ink); font-weight: 700; }
.belief-copy p { max-width: 610px; font-size: 18px; color: var(--ink-soft); }
.text-link { display: inline-flex; min-height: 44px; gap: 20px; align-items: center; margin-top: 18px; font-size: 13px; font-weight: 800; border-bottom: 2px solid var(--tangerine); padding: 6px 0; }
.belief-collage { min-height: 580px; position: relative; }
/* The notes are pinned to the wall, the disc hangs behind them and she stands
   in front of both. Without a z-index the notes were only ahead of the disc by
   DOM order, which the disc won, and it sliced the circled word on the blue
   note in half. */
.paper-card { position: absolute; z-index: 2; padding: 32px 30px; box-shadow: var(--shadow-small); border: 1px solid rgba(48,38,48,.1); }
.paper-card small { display: block; margin-bottom: 15px; text-transform: uppercase; letter-spacing: .17em; font-size: 9px; font-weight: 800; }
.paper-card strong { display: block; font-family: "Poppins", system-ui, sans-serif; font-size: 30px; line-height: 1.05; }
.paper-card s { display: inline-block; margin-top: 22px; color: var(--blush-ink); font-family: "Manrope", system-ui, sans-serif; font-size: 22px; text-decoration-thickness: 2px; transform: rotate(-5deg); }
.pin { position: absolute; width: 13px; height: 13px; background: var(--tangerine); border-radius: 50%; top: 15px; left: 50%; box-shadow: var(--lift-1); }
.note-card-one { width: 43%; left: 3%; top: 10%; background: var(--butter-light); transform: rotate(-5deg); clip-path: polygon(2% 0, 98% 2%, 100% 94%, 91% 100%, 2% 97%, 0 9%); }
.note-card-two { width: 46%; right: 1%; top: 1%; background: var(--sea-light); transform: rotate(4deg); clip-path: polygon(4% 3%, 94% 0, 100% 8%, 98% 96%, 88% 100%, 0 96%, 2% 8%); }
.circle-word { display: inline-flex; margin-top: 18px; padding: 4px 17px 8px; border: 2px solid var(--blush-ink); border-radius: 50%; color: var(--blush-ink); font-family: "Manrope", system-ui, sans-serif; font-size: 22px; transform: rotate(-5deg); }
.section-cutout { position: absolute; z-index: 3; object-fit: contain; filter: drop-shadow(0 0 9px rgba(255,247,237,.5)) drop-shadow(0 26px 30px rgba(48,38,48,.2)); }
.belief-orbit { position: absolute; z-index: 0; width: 55%; aspect-ratio: 1; left: 21%; bottom: 2%; border-radius: 50%; background: radial-gradient(circle at 44% 38%, var(--butter-light) 0 29%, var(--tangerine) 30% 63%, var(--butter) 64% 100%); box-shadow: 0 0 0 1px rgba(48,38,48,.12), 0 22px 55px rgba(240,140,33,.2); }
.belief-orbit::after { content: ""; position: absolute; inset: -10%; border: 1.5px dashed rgba(48,38,48,.3); border-radius: 50%; }
.belief-cutout { width: 100%; height: 112%; left: -11%; top: -6%; transform: scale(1.48) translateY(9%); transform-origin: 50% 66%; }
.side-note { position: absolute; z-index: 4; right: 0; bottom: 4%; width: 190px; color: var(--ink); transform: rotate(4deg); }


/* ---- Build a Content Starter Pack -------------------------------------
   The supplied direction turns the language swap into a physical lead
   magnet: notes on the left peel into a ruled pack on the right. The same
   phrases, niche state and live email endpoint remain underneath it. */
.swipe { background: #f7eee6; position: relative; overflow: clip; border-block: 1px solid var(--line); }
.starter-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 62px);
}
.starter-heading { max-width: 760px; }
.starter-kicker {
  display: inline-flex;
  padding: 7px 11px 6px;
  margin-bottom: 22px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.starter-intro h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(52px, 6.1vw, 88px);
  line-height: .96;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.starter-intro h2 em { display: block; color: var(--blush-ink); }
.starter-intro > p {
  max-width: 44ch;
  margin: 0 0 7px;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.starter-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 clamp(36px, 4vw, 58px);
  padding: 0;
  list-style: none;
}
.starter-steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 100px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 3px 0 rgba(48, 38, 48, .05);
}
.starter-steps strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blush-light);
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
}
.starter-steps li:nth-child(2) strong { background: var(--sea-light); }
.starter-steps li:nth-child(3) strong { background: var(--ink); color: var(--paper); }
.starter-steps span { color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.starter-steps b { display: block; color: var(--ink); font-family: "Poppins", system-ui, sans-serif; font-size: 15px; line-height: 1.35; margin-bottom: 5px; }

.swipe-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(310px, .65fr); gap: clamp(30px, 3.7vw, 58px); align-items: start; }
.swipe-panel { min-width: 0; padding: clamp(20px, 2.2vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.starter-step-label,
.starter-note-legend {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.2;
  text-transform: uppercase;
}
.starter-step-label { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--ink); font-size: 12px; letter-spacing: .08em; }
.starter-step-number { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--blush-ink); font-size: 11px; letter-spacing: 0; }
.starter-note-legend { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 30px 0 26px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--ink); font-size: 11px; letter-spacing: .06em; }
.starter-note-legend > span:last-child { color: var(--blush-ink); }
.niche-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.niche-chip { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 92px; padding: 15px 12px; border: 1px solid #b9aab0; border-radius: 12px; background: var(--paper); color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.niche-icon { width: 25px; height: 25px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.niche-copy { display: grid; gap: 5px; min-width: 0; }
.niche-copy strong { font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1.2; }
.niche-copy > span { max-width: 15ch; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.niche-selection { position: absolute; top: 7px; right: 7px; width: 12px; height: 12px; border: 1px solid #8a7680; border-radius: 50%; }
.niche-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 4px 12px rgba(48,38,48,.14); }
.niche-chip[aria-pressed="true"] .niche-copy > span { color: #f7c9d4; }
.niche-chip[aria-pressed="true"] .niche-selection { background: var(--blush-light); border-color: var(--blush-light); }
.niche-chip[aria-pressed="true"] .niche-selection::after { content: ""; display: block; width: 5px; height: 3px; margin: 2px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }

.swap-screen { background: transparent; border: 0; box-shadow: none; }
.swap-cols { display: block; }
.swap-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.swap-list[hidden] { display: none; }
.swap-row {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 245px;
  padding: 28px 16px 16px;
  border: 1px solid #9c8792;
  border-radius: 3px 3px 12px 3px;
  background: var(--white);
  box-shadow: 2px 5px 9px rgba(48, 38, 48, .09);
  transform: rotate(-1.4deg);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.swap-row:nth-child(2n) { background: var(--sea-light); transform: rotate(1.2deg); }
.swap-row:nth-child(3n) { background: var(--blush-light); transform: rotate(-.7deg); }
.swap-row:nth-child(4n) { transform: rotate(.8deg); }
.swap-row::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 17px;
  width: 66px;
  height: 22px;
  border: 1px solid rgba(48, 38, 48, .15);
  background: #85aacb;
  transform: rotate(-3.5deg);
}
.swap-row:nth-child(2n)::before { background: #e59caf; }
.swap-row:nth-child(3n)::before { background: #85aacb; }
.swap-row.is-picked { background: #e2e39a; box-shadow: 3px 4px 0 rgba(48, 38, 48, .25); transform: rotate(-.2deg) translateY(-3px); }
.swap-search { order: 1; margin: 0; min-width: 0; }
.swap-clinical { order: 2; margin: auto 0 0; min-width: 0; }
.swap-add { order: 3; }
.swap-clinical span,
.swap-search span {
  display: block;
  margin-bottom: 5px;
  color: var(--blush-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.swap-search span { display: none; }
.swap-clinical span { color: var(--ink-soft); }
.swap-clinical s { display: block; color: var(--ink-soft); font-size: 11.5px; line-height: 1.28; text-decoration-thickness: 1.5px; }
.swap-search q {
  display: block;
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-wrap: balance;
}
.swap-add {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 6px;
  min-height: 44px;
  margin: 10px -3px -4px 0;
  padding: 0 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.swap-add[aria-pressed="true"] { background: var(--matcha); border-color: #6d6e22; }

.swipe-ticker {
  position: sticky;
  top: 104px;
  z-index: 6;
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
}
.swipe-ticker-count {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--matcha);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.swipe-ticker-label { margin-right: auto; }
.swipe-ticker-go { color: var(--butter); white-space: nowrap; }

.swipe-file {
  position: sticky;
  top: 104px;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1.5px solid var(--ink);
  background: var(--white);
  border-radius: 4px 4px 16px 4px;
  box-shadow: 5px 7px 0 #e7dae0;
  transform: none;
}
.swipe-file-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 82px;
  height: 27px;
  border: 1px solid rgba(48, 38, 48, .14);
  background: #e59caf;
  transform: translateX(-50%) rotate(-3deg);
}
.swipe-file-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -.04em;
}
.swipe-count {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 29px;
  height: 29px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.swipe-progress { margin: 0 0 14px; color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.swipe-empty { margin: 0 0 10px; padding: 12px; border: 1px dashed rgba(48, 38, 48, .28); background: var(--paper); color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.swipe-picked { margin: 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; }
.swipe-picked li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; min-height: 39px; padding: 9px 0 7px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-size: 12px; line-height: 1.3; }
.swipe-line-number { color: var(--blush-ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.swipe-line-copy { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; letter-spacing: -.015em; }
.swipe-form { margin-top: 18px; padding-top: 17px; border-top: 2px solid var(--ink); }
.swipe-label { display: block; margin-bottom: 10px; color: var(--blush-ink); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.swipe-field { display: grid; gap: 9px; }
.swipe-input { min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; }
.swipe-input::placeholder { color: var(--ink-soft); }
.swipe-submit { justify-content: center; width: 100%; min-height: 48px; padding-inline: 14px; }
.swipe-submit:disabled { border-color: rgba(48, 38, 48, .5); background: #efe7dc; color: var(--ink-soft); cursor: not-allowed; }
.swipe-status { min-height: 1.35em; margin: 10px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.swipe-status[data-tone="error"] { color: var(--blush-ink); }
.swipe-fineprint { margin: 8px 0 0; color: var(--ink-soft); font-size: 10.5px; line-height: 1.4; }

@media (hover: hover) {
  .niche-chip:hover { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .swap-row:hover { box-shadow: 3px 7px 16px rgba(48, 38, 48, .14); transform: rotate(0deg) translateY(-3px); }
  .swap-add:hover { background: var(--butter-light); }
  .swap-add[aria-pressed="true"]:hover { background: var(--matcha); }
}
@media (max-width: 1000px) {
  .starter-intro { grid-template-columns: 1fr; gap: 24px; }
  .starter-intro > p { max-width: 62ch; }
  .swipe-body { grid-template-columns: 1fr; gap: 44px; }
  .swipe-file { position: relative; top: auto; width: min(100%, 520px); margin-inline: auto; }
  .swipe-ticker { display: flex; }
}
@media (max-width: 760px) {
  .starter-steps { grid-template-columns: 1fr; gap: 10px; }
  .starter-steps li { min-height: 0; padding: 15px 16px; }
  .swap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 13px; }
}
@media (max-width: 580px) {
  .swipe.section-pad { padding-inline: 20px; }
  .starter-intro { gap: 20px; margin-bottom: 28px; }
  .starter-kicker { margin-bottom: 17px; }
  .starter-intro h2 { font-size: clamp(43px, 12.6vw, 58px); line-height: .98; letter-spacing: -.06em; }
  .starter-intro h2 em { display: inline; }
  .starter-intro > p { font-size: 15px; line-height: 1.5; }
  .starter-steps { margin-bottom: 32px; }
  .starter-steps strong { font-size: 19px; }
  .niche-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .niche-chips::-webkit-scrollbar { display: none; }
  .niche-chip { min-height: 94px; padding: 16px 10px 12px; gap: 8px; }
  .niche-icon { width: 20px; height: 20px; }
  .niche-copy strong { font-size: 12px; }
  .niche-copy > span { font-size: 10.5px; }
  .swipe-panel { padding: 20px 12px; border-radius: 14px; }
  .starter-note-legend { margin-top: 25px; font-size: 10px; line-height: 1.5; }
  .starter-note-legend > span:last-child { display: none; }
  .swipe-ticker { top: 94px; margin-inline: 0; }
  .swap-list { gap: 15px 11px; }
  .swap-row { min-height: 225px; padding: 24px 11px 10px; box-shadow: 2px 4px 7px rgba(48, 38, 48, .10); }
  .swap-row::before { left: 12px; width: 54px; height: 19px; top: -9px; }
  .swap-search q { font-size: clamp(13.5px, 4.05vw, 16px); line-height: 1.16; }
  .swap-clinical span { font-size: 9px; letter-spacing: .05em; }
  .swap-clinical s { font-size: 11px; overflow-wrap: anywhere; line-height: 1.4; }
  .swap-add { min-height: 44px; margin-top: 12px; padding-inline: 12px; font-size: 11px; }
  .swipe-file { padding: 27px 18px 20px; }
  .swipe-file-title { font-size: 21px; }
}
@media (max-width: 340px) {
  .swipe.section-pad { padding-inline: 16px; }
  .niche-chip { flex-direction: column; align-items: flex-start; gap: 7px; }
  .swap-list { gap-inline: 9px; }
  .swap-row { min-height: 245px; padding-inline: 9px; }
  .swap-search q { font-size: 13px; }
}

.offers { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 65px; }
.section-heading p { max-width: 470px; color: var(--ink-soft); font-size: 17px; }
/* stretch, not start: at start the three cards took their own content height
   (491 / 502 / 430) and each CTA sat 33px off its own card's bottom, so the
   row of links landed on three different lines and the set read as three
   unrelated things. */
.offer-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.offer-card { position: relative; min-height: 430px; padding: 38px 34px 32px; border: 1px solid rgba(48,38,48,.18); box-shadow: var(--shadow-small); transition: transform .25s ease; display: flex; flex-direction: column; }
.offer-number { font-family: "Manrope", system-ui, sans-serif; font-size: 23px; }
.offer-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 35px 0 22px; background: var(--paper); border: 2px solid var(--ink); border-radius: 51% 49% 45% 55% / 49% 40% 60% 51%; }
.offer-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-card h3 { font-family: "Poppins", system-ui, sans-serif; font-size: 38px; line-height: 1; margin: 0 0 17px; }
.offer-card > p:not(.offer-price) { color: var(--ink-soft); }
/* PLACEHOLDER PRICES. Two of these read $XXX on purpose. Search
   data-placeholder="price" in index.html and swap the two strings. */
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 16px; }
.offer-price strong { font-family: "Poppins", system-ui, sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.offer-price span { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.offer-card a { min-height: 44px; margin-top: auto; padding-top: 22px; font-size: 13px; font-weight: 800; display: flex; gap: 18px; align-items: center; }
.card-community { background: var(--butter-light); transform: rotate(-2deg); border-radius: 38px 14px 48px 20px; }
.card-coaching { background: var(--sea-light); transform: translateY(25px) rotate(1.5deg); border-radius: 18px 48px 20px 42px; }
.card-resources { background: var(--blush-light); transform: rotate(-1deg); border-radius: 51px 18px 37px 14px; }
.paper-tab { position: absolute; top: -13px; right: 28px; background: var(--blush-ink); color: var(--white); padding: 8px 15px; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; transform: rotate(4deg); }
.scribble-underline { position: absolute; right: 28px; bottom: 37px; width: 88px; height: 9px; border-top: 3px solid var(--tangerine); border-radius: 50%; transform: rotate(-5deg); }

.method { background: var(--tangerine); overflow: hidden; }
/* On the tangerine ground the blush eyebrow measured 3.45:1 at 11px, under the
   4.5 floor for text that small. Ink on the same ground is 5.86. */
.method .tiny-label { color: var(--ink); }
.method-intro { max-width: 880px; margin-bottom: 70px; }
.method-intro p { max-width: 650px; font-size: 18px; }
.method-path { position: relative; min-height: 360px; }
.method-line { position: absolute; inset: 12px 0 auto; width: 100%; height: 300px; overflow: visible; }
.method-line path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 9; }
.method-step { position: absolute; width: 22%; padding: 24px 24px 22px; background: var(--paper); box-shadow: var(--shadow-small); }
.method-step::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--blush); border: 4px solid var(--butter-light); top: -31px; left: 50%; transform: translateX(-50%); }
.method-step span { color: var(--blush-ink); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.method-step h3 { font-family: "Poppins", system-ui, sans-serif; font-size: 26px; line-height: 1.05; margin: 9px 0; }
.method-step p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.m1 { left: 0; top: 154px; transform: rotate(-2deg); border-radius: 20px 8px 20px 8px; }
.m2 { left: 25.5%; top: 28px; transform: rotate(1.5deg); border-radius: 8px 24px 9px 21px; }
.m3 { left: 51%; top: 150px; transform: rotate(-1deg); border-radius: 26px 8px 19px 11px; }
.m4 { right: 0; top: 62px; transform: rotate(2deg); border-radius: 10px 28px 12px 23px; }

/* ---- The wins wall: real client messages that fly in on scroll ---- */

/* ---- The trial reels system --------------------------------------------
   Deliberately not the method section's scattered cards on a curve. Two
   four-step sections in a row have to look like two different proposals, or
   the page reads as though it repeated itself. This one is a numbered ledger:
   flat ground, hard rules, the count doing the work. */
.system { background: var(--butter-light); }
.system-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 70px);
  border-top: 2px solid var(--ink);
}
.system-step {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line-strong);
}
/* Without explicit placement the paragraph auto-flows into the 62px number
   column and every line wraps to a single word. */
.system-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  font-variant-numeric: tabular-nums;
}
.system-step h3 {
  grid-column: 2;
  margin: 0 0 8px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.system-step p { grid-column: 2; margin: 0; color: var(--ink-soft); font-size: 16px; }
.system-note { display: block; margin: clamp(24px, 3vw, 38px) 0 0; text-align: right; }

@media (max-width: 860px) {
  .system-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 580px) {
  .system-step { grid-template-columns: 46px minmax(0, 1fr); gap: 0 14px; }
  .system-note { text-align: left; }
}

.wins { background: var(--sea-light); position: relative; overflow: clip; }
.wins::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(48,38,48,.09) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; pointer-events: none; }
.wins > * { position: relative; }
/* The offers head fills 88% of the row while these two used 49% and 43%,
   leaving an empty right half in both. One pattern now, used three times. */
.wins-heading { margin-bottom: clamp(38px, 4vw, 60px); }
.wins-heading > div, .clinicians-head > div { min-width: 0; }
.wins-heading h2 { line-height: 1.02; margin: 12px 0 18px; }
.wins-heading h2 em { font-style: normal; color: var(--blush-ink); }
.wins-heading p { margin: 0; max-width: 470px; color: var(--ink-soft); font-size: 17px; }

/* Tape. In normal flow with compensating negative margins, never absolutely
   positioned: Chrome paints absolutely positioned children of a fragmented
   container against the last fragment, which strands loose strips. */
.win-tape { display: block; width: 74px; height: 22px; margin: -21px auto -1px; position: relative; z-index: 3; opacity: .86; box-shadow: var(--lift-1); }
.win-tape-yellow { background: rgba(242,216,143,.92); transform: translateX(-17%) rotate(-5deg); }
.win-tape-sea { background: rgba(102,152,204,.8); transform: translateX(7%) rotate(6deg); }
.win-tape-pink { background: rgba(227,104,136,.84); transform: translateX(-25%) rotate(-8deg); }

/* ---- The deck: the rest of the wins, dropped in a pile ----
   Real paper cards, taped and tilted, stacked on one another. Clicking pops the
   next one forward. The pile costs one card of page height however many
   messages it holds, so volume never turns into scrolling. */
/* The deck used to sit in a tall band of empty ground below its arrows. */
.wins-rest { margin-top: clamp(46px, 6vw, 82px); margin-bottom: clamp(-40px, -3vw, -12px); }
.wins-rest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 34px); }
.wins-rest-note { display: block; }
.wins-rest-count { margin: 0; font-size: 14px; color: var(--ink-soft); }

.wins-deck { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.2vw, 28px); }
.wins-deck-stack {
  position: relative;
  width: min(500px, 80vw);
  aspect-ratio: var(--deck-ratio, .8);
  cursor: pointer;
  perspective: 1400px;
}
.win-deck-card {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  transform-origin: 50% 60%;
}
.win-deck-card .win-paper {
  width: 100%;
  background: var(--white);
  padding: 11px;
  border: 1px solid rgba(48, 38, 48, .1);
  box-shadow: var(--shadow-small);
}
.win-deck-card img { display: block; width: 100%; height: auto; }
.win-deck-card .win-tape { width: 84px; height: 24px; margin: -23px auto -1px; }

/* Only the card in front is readable, named and reachable. */
.win-deck-label {
  position: absolute;
  left: 2px;
  bottom: -26px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--blush-ink);
  transform: rotate(-2deg);
  opacity: 0;
}
.win-deck-card.is-front .win-deck-label { opacity: 1; }
.win-deck-card.is-front .win-paper { box-shadow: var(--shadow); }

.wins-deck-controls { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.wins-deck-count { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); min-width: 84px; text-align: center; }
.wins-deck-count b { font-size: 17px; color: var(--ink); }
.wins-deck-step {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .wins-deck-step:hover { background: var(--butter); }
  .wins-deck-stack:hover .win-deck-card.is-front { transform: translate(var(--dx), calc(var(--dy) - 6px)) rotate(var(--rot)); }
}
.wins-deck-step:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .win-deck-card { transition: transform 520ms cubic-bezier(.2, .9, .25, 1.02), opacity 320ms var(--ease-out); }
  .win-deck-label { transition: opacity 260ms var(--ease-out) 140ms; }
  .win-deck-card .win-paper { transition: box-shadow var(--duration-default) var(--ease-out); }

  /* The back paper lands first; the readable front message lands last.
     Only the six visible layers fly, in 805ms total on every screen size. */
  .deck-armed .win-deck-card:nth-child(-n + 6) .win-paper {
    opacity: 0;
    transform: translate3d(var(--deal-x), var(--deal-y), 0) rotate(var(--deal-rotation)) scale(.92);
  }
  .deck-armed.deck-landed .win-deck-card:nth-child(-n + 6) .win-paper {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    transition: transform 480ms cubic-bezier(.16, 1, .3, 1) var(--deal-delay), opacity 80ms linear var(--deal-delay);
  }
  .deck-armed .win-deck-card.is-front .win-deck-label { opacity: 0; transition: none; }
}

@media (max-width: 580px) {
  .wins-deck-stack { width: 76vw; }
  .win-deck-card .win-paper { padding: 8px; }
  .win-deck-label { font-size: 15px; bottom: -23px; }
}

/* ---- The stage: four wins fly across the screen under the scroll wheel ----
   Default is the finished composition, so a page with no JavaScript or a
   reader who asked for less motion gets the four cards laid out and readable.
   The pin and the flight are added only when both are available. */
.wins-stage { position: relative; margin-top: clamp(30px, 4vw, 56px); }
/* Row gap is generous on purpose: each paper carries a handwritten note
   hanging 13px below it, and the pile's overlap is subtracted from this gap.
   Too tight and the card below covers the note above it. */
.wins-stage-pin { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 3vw, 46px); row-gap: clamp(50px, 5.5vw, 80px); align-items: start; }
.wins-stage-pin .wins-heading { grid-column: 1 / -1; }
.win-flier { margin: 0; }
.win-flier .win-paper { padding: 15px 15px 19px; box-shadow: var(--shadow); background: var(--butter-light); transform: rotate(var(--tilt, 0deg)); }
.win-flier .win-tape { width: 96px; height: 26px; margin: -26px auto -1px; }
.win-flier .win-paper::after { content: attr(data-note); position: absolute; left: 16px; bottom: -13px; font-family: "Manrope", system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--blush-ink); transform: rotate(-2.5deg); }


/* The four land as a pile rather than a grid: each overlaps the one before,
   but only across the paper margin, so no message is ever covered. */
.win-flier { position: relative; }
.win-flier-1 { z-index: 2; }
.win-flier-2 { z-index: 3; margin-top: clamp(16px, 2.4vw, 34px); margin-left: clamp(-32px, -1.8vw, -12px); }
.win-flier-3 { z-index: 4; margin-top: clamp(-34px, -2.2vw, -14px); }
.win-flier-4 { z-index: 5; margin-top: clamp(-24px, -1.6vw, -10px); margin-left: clamp(-32px, -1.8vw, -12px); }

@media (prefers-reduced-motion: no-preference) {
  /* They fly in from off screen and settle onto the pile. This replaced a
     190vh pinned stage that scrubbed the same four cards against scroll
     position: it read well but it charged the reader most of two viewports of
     scrolling to get past the section, which is exactly the cost a proof strip
     should not carry. The whole entrance is now 0.73s and the section is its
     own height again.

     The figure holds the grid slot and never moves; the paper inside it
     carries the transform. Observing the element that moves is what left the
     clinicians parked off canvas, because a card a viewport sideways stops
     intersecting and is never told to land.

     The hidden pre-flight state hangs off .wins-armed, which THIS script sets,
     not off .js, which boot.js sets before paint. Gated on .js, a visitor
     holding a cached older script.js got the new stylesheet's hidden state
     with nothing left to land the cards, and the four receipts simply were not
     there. Armed by the same file that lands them, a stale or failed script
     leaves the wall composed instead of empty. The section is far below the
     fold, so arming it from the tail script cannot flash. */
  .wins-armed .win-flier .win-paper {
    opacity: 0;
    will-change: transform;
    transform: translate3d(var(--from-x), 0, 0) rotate(var(--fr)) scale(.94);
    transition: opacity 240ms var(--ease-out), transform 520ms cubic-bezier(.22, .9, .28, 1.02);
  }
  .wins-armed .win-flier-2 .win-paper { transition-delay: 70ms; }
  .wins-armed .win-flier-3 .win-paper { transition-delay: 140ms; }
  .wins-armed .win-flier-4 .win-paper { transition-delay: 210ms; }
  .wins-armed .win-flier.landed .win-paper {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tilt)) scale(1);
  }
}

@media (max-width: 580px) {
  /* One column, so the pile stacks straight down and only the vertical
     overlap survives. The note under each paper still needs its room. */
  .wins-stage-pin { grid-template-columns: 1fr; column-gap: 0; row-gap: clamp(44px, 10vw, 60px); }
  .win-flier-2, .win-flier-4 { margin-left: 0; }
  .win-flier-2, .win-flier-3, .win-flier-4 { margin-top: clamp(-20px, -3vw, -8px); }
  .win-flier .win-paper { padding: 10px 10px 15px; }
  .win-flier .win-paper::after { font-size: 15px; left: 11px; bottom: -11px; }
}

.win-dialog { width: max-content; max-width: min(94vw, 1180px); max-height: 92svh; padding: 0; border: 0; background: transparent; overflow: visible; }
.win-dialog::backdrop { background: rgba(48, 38, 48, .88); }
.win-dialog-frame { position: relative; background: var(--white); padding: 14px; box-shadow: var(--shadow); max-height: 92svh; overflow: auto; transform: rotate(-.6deg); }
.win-dialog img { display: block; width: auto; max-width: 100%; height: auto; }
.win-dialog-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ink); background: var(--butter); color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-small); }

@media (hover: hover) {
  /* Matches the landed rule's specificity so the straighten-and-lift is not
     overridden by it. The wall's only other affordance is the cursor. */
      .win-dialog-close:hover { background: var(--tangerine); }
}
.win-open:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* Mobile drops the pin, so the stage cards keep their tilt in normal flow and
   the lightbox is allowed to exceed the viewport and pan. */
@media (max-width: 580px) {
  .win-dialog { max-width: 96vw; }
  .win-dialog img { max-width: none; width: max(96vw, 620px); }
}

/* ---- Licensed clinicians: their credentials do the work ----
   She has no clinical letters of her own, so the trust signal is borrowed from
   the licensed people vouching for her. Cutouts sit on a colour disc so the
   figures read as portraits rather than pasted photographs. */
.clinicians { background: var(--butter-light); overflow: clip; }
.clinicians-head { margin-bottom: clamp(34px, 4.5vw, 58px); }
.clinicians-head p { margin: 0; color: var(--ink-soft); font-size: 17px; max-width: 470px; }
.clinician-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4.5vw, 72px); }
.clinician-grid-more { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); }
.clinician-grid-more .clinician-stage img { height: clamp(250px, 26vw, 360px); }
.clinician-grid-more .clinician-name { font-size: clamp(21px, 1.9vw, 25px); }
.clinician-grid-more .clinician-site { overflow-wrap: anywhere; }
.clinician { margin: 0; }
.clinician-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 18px; }
.clinician-disc {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(300px, 74%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--tangerine);
  opacity: .9;
}
.disc-two { background: var(--sea); }
.disc-three { background: var(--blush); }
.disc-four { background: var(--matcha); }
.clinician-stage img { position: relative; width: auto; max-width: 100%; height: clamp(260px, 30vw, 420px); object-fit: contain; filter: drop-shadow(0 22px 26px rgba(48, 38, 48, .22)); }
.clinician-followers {
  position: absolute;
  z-index: 2;
  right: max(0px, calc(50% - 220px));
  bottom: clamp(12px, 2vw, 24px);
  display: inline-flex;
  min-width: clamp(88px, 9vw, 108px);
  padding: 10px 13px 9px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  line-height: 1;
  text-align: center;
  transform: rotate(2.5deg);
}
.clinician:nth-child(even) .clinician-followers { transform: rotate(-2.5deg); }
.clinician-followers::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 30px;
  height: 12px;
  background: rgba(227, 104, 136, .55);
  transform: translateX(-50%) rotate(-3deg);
}
.clinician-followers strong { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.04em; }
.clinician-followers span { color: var(--blush-ink); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.clinician figcaption { margin-top: 22px; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.clinician-name { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.clinician-name span { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--blush-ink); }
.clinician-focus { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.clinician-quote { margin: 14px 0 0; font-family: "Manrope", system-ui, sans-serif; font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--blush-ink); }

/* Handle and site sit as one stack so the two links share a baseline rhythm
   and the 44px tap target is not inherited by the quieter of the two. */
.clinician-links { display: flex; flex-direction: column; align-items: flex-start; }
.clinician-site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1.5px solid transparent;
}
.clinician-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 800;
  color: var(--blush-ink);
  border-bottom: 1.5px solid transparent;
}
.clinician-handle span, .clinician-site span { transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) {
  .clinician-handle:hover { border-bottom-color: var(--blush-ink); }
  .clinician-site:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
  .footer-credit a:hover { border-bottom-color: var(--tangerine); }
  .clinician-handle:hover span, .clinician-site:hover span { transform: translate(2px, -2px); }
}

/* The figure holds the layout box and never moves, so the observer measures it
   where it really sits. A figure translated most of a viewport sideways stops
   intersecting and would never be told to land. */
@media (prefers-reduced-motion: no-preference) {
  .js .clinician-inner { opacity: 0; transition: opacity 520ms var(--ease-out), transform 900ms cubic-bezier(.22, .9, .28, 1.02); }
  .js .from-left .clinician-inner { transform: translateX(-78vw) rotate(-4deg); }
  .js .from-right .clinician-inner { transform: translateX(78vw) rotate(4deg); }
  .js .clinician.landed .clinician-inner { opacity: 1; transform: translateX(0) rotate(0deg); }
  .js .from-right .clinician-inner { transition-delay: 140ms; }
}

@media (max-width: 720px) {
  .clinician-grid { grid-template-columns: 1fr; gap: 44px; }
  .clinician-stage img { height: 300px; }
  .clinician-disc { width: 260px; }
  .clinician-followers { right: max(0px, calc(50% - 170px)); }
}

.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(55px, 7vw, 100px); align-items: center; background: var(--butter-light); }
.about-collage { position: relative; min-height: 650px; }
.about-photo { position: absolute; margin: 0; background: var(--white); padding: 9px; box-shadow: var(--shadow); }
.about-photo img { height: 100%; object-fit: cover; }
.about-main { width: 56%; height: 69%; left: 10%; top: 4%; transform: rotate(-4deg); border-radius: 38% 8% 28% 12% / 16% 8% 22% 18%; }
.about-main img { object-position: 50% 54%; border-radius: 36% 6% 26% 10% / 14% 6% 20% 16%; }
.about-bw { width: 39%; height: 43%; right: 2%; top: 16%; transform: rotate(6deg); border-radius: 10% 30% 8% 21%; }
.about-bw img { object-position: 50% 43%; border-radius: 8% 27% 6% 18%; }
.about-work { width: 38%; height: 39%; left: 32%; bottom: 0; transform: rotate(4deg); border-radius: 10% 19% 11% 29%; }
.about-work img { object-position: 50% 42%; border-radius: 8% 16% 9% 26%; }
.about-stamp { position: absolute; right: 3%; bottom: 6%; width: 130px; height: 130px; padding: 14px; display: grid; place-items: center; text-align: center; background: var(--blush-ink); color: var(--white); border-radius: 50%; font-family: "Manrope", system-ui, sans-serif; font-size: 18px; line-height: 1.25; font-weight: 700; transform: rotate(-8deg); box-shadow: var(--paper-edge) var(--ink); }
.about-stamp > span { display: block; white-space: nowrap; }
.about-copy p { font-size: 17px; color: var(--ink-soft); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.about-emphasis { max-width: 620px; padding: 18px 21px; background: var(--matcha-light); border: 1px solid rgba(48,38,48,.12); border-radius: 9px 24px 10px 20px; font-weight: 700; color: var(--ink) !important; margin: 26px 0 32px; transform: rotate(-.7deg); }

.truth-strip { padding: 34px clamp(22px, 6vw, 88px); background: var(--sea-light); display: flex; align-items: center; justify-content: center; gap: 30px; text-align: center; flex-wrap: wrap; }
.truth-strip strong { font-family: "Poppins", system-ui, sans-serif; font-size: clamp(20px, 2vw, 30px); font-weight: 700; }

.final-cta { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; position: relative; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; width: 500px; height: 500px; right: -170px; top: -200px; background: var(--sea); border-radius: 45% 55% 59% 41% / 47% 38% 62% 53%; opacity: .32; }
.final-cta h2 { font-size: clamp(66px, 7vw, 105px); margin-bottom: 25px; }
.final-cta h2 em { color: var(--butter); }
.final-cta p { max-width: 580px; color: rgba(255,247,237,.78); font-size: 18px; }
.light { color: var(--butter); }
.button-yellow { background: var(--butter); color: var(--ink); border-radius: 18px 999px 999px 999px; }
.button-ghost { border: 1.5px solid rgba(255,255,255,.55); color: var(--paper); border-radius: 999px 18px 999px 999px; }
/* The blob is decoration and must sit behind the words. It is absolutely
   positioned, so without a stacking position of its own the copy is painted
   under it: on desktop that hid nothing, because the copy is in the left
   column and the blob sits over the collage, but a one-column phone puts the
   headline directly under it and "waiting on Psychology" washed out. */
.cta-copy { position: relative; z-index: 1; }
.cta-star { z-index: 1; }
.cta-collage { min-height: 520px; position: relative; z-index: 1; isolation: isolate; }
.cta-orbit { position: absolute; z-index: 0; width: 68%; aspect-ratio: 1; left: 4%; top: 9%; border-radius: 50%; background: radial-gradient(circle at 42% 38%, var(--butter) 0 24%, var(--tangerine) 25% 63%, var(--blush) 64% 100%); box-shadow: 0 0 0 1px rgba(255,247,237,.42), 0 0 0 18px rgba(102,152,204,.2); }
.cta-orbit::after { content: ""; position: absolute; inset: -12%; border: 1px dashed rgba(255,247,237,.48); border-radius: 50%; }
.cta-cutout { z-index: 2; width: 76%; height: 100%; left: -2%; top: 2%; filter: brightness(1.16) contrast(1.08) saturate(1.06) drop-shadow(0 0 1px rgba(255,247,237,.8)) drop-shadow(0 16px 18px rgba(0,0,0,.24)); }
.cta-note { position: absolute; right: 1%; top: 23%; z-index: 3; background: var(--blush); color: var(--ink); padding: 23px 27px; font-family: "Poppins", system-ui, sans-serif; font-size: 31px; line-height: .88; transform: rotate(6deg); border-radius: 18px 45px 14px 38px; box-shadow: var(--paper-edge) var(--butter); }
.cta-note strong { color: var(--paper); font-size: 41px; }
.cta-doodle { position: absolute; z-index: 3; right: 8%; bottom: 9%; font-family: "Manrope", system-ui, sans-serif; color: var(--butter); font-size: 27px; transform: rotate(-7deg); }
.cta-star { position: absolute; color: var(--butter); font-size: 34px; }
.star-a { left: 2.5%; top: 13%; } .star-b { left: 47%; bottom: 8%; font-size: 24px; }

.site-footer { padding: 44px clamp(22px, 6vw, 88px); background: var(--butter-light); display: grid; grid-template-columns: 1.2fr 1fr 1.5fr; gap: 25px; align-items: center; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; font-size: 13px; }
.footer-links { display: flex; gap: 20px; justify-content: end; font-size: 12px; font-weight: 700; }
.footer-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.site-footer small { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.footer-credit { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.footer-credit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink); font-weight: 700; border-bottom: 1px solid transparent; }

.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: hero-intro 600ms var(--ease-out) both; }
  .hero-collage { animation: hero-intro 720ms 80ms var(--ease-out) both; }
}

@keyframes hero-intro {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) {
  .nav-cta:hover { transform: translateY(-2px); background: var(--tangerine); box-shadow: var(--lift-warm); }
  .button:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-small); }
  .button:hover > span { transform: translate(2px, -2px); }
  .offer-card:hover { transform: translateY(-9px) rotate(0deg); }
}

@media (max-width: 1100px) {
  .primary-nav { gap: 18px; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(68px, 9vw, 92px); }
  .offer-card { min-height: 460px; }
  .method-step { width: 23%; }
}

@media (max-width: 860px) {
  .site-header { height: 88px; background: var(--paper); backdrop-filter: none; }
  .menu-toggle { min-width: 82px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--ink); background: var(--paper); padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
  .menu-lines { display: grid; gap: 5px; width: 15px; }
  .menu-lines i { display: block; width: 15px; height: 1.5px; background: currentColor; transition: transform var(--duration-default) var(--ease-in-out); transform-origin: center; }
  .menu-toggle[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 100%; left: 14px; right: 14px; background: var(--paper); padding: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-small); border-radius: 18px 18px 34px 18px; display: flex; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity var(--duration-default) var(--ease-out), transform var(--duration-default) var(--ease-out), visibility 0s var(--duration-default); flex-direction: column; align-items: stretch; gap: 6px; }
  .primary-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .primary-nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 10px; }
  .nav-cta { text-align: center; }
  .journey-ribbon { grid-template-columns: 1fr; gap: 10px; padding-top: 18px; padding-bottom: 22px; }
  .journey-heading { text-align: center; }
  .journey-disc { width: 46px; height: 46px; }
  .journey-disc svg { width: 22px; height: 22px; }
  .journey-step b { font-size: 14px; }
  .hero { grid-template-columns: 1fr; gap: 52px; padding: 72px 0 0; }
  .hero-copy { max-width: 700px; padding: 0 40px; }
  .hero-collage { width: 100%; min-height: 660px; }
  .hero-stage { border-radius: 11% 11% 0 0 / 9% 9% 0 0; }
  .hero-stage::before { width: 620px; }
  .hero-orbit { width: 520px; }
  .hero-cutout { width: min(70%, 530px); }
  .belief, .about, .final-cta { grid-template-columns: 1fr; }
  .belief-collage, .about-collage { max-width: 680px; width: 100%; margin-inline: auto; }
  .section-heading { align-items: start; flex-direction: column; gap: 10px; }
  .offer-stack { grid-template-columns: 1fr; max-width: 650px; margin-inline: auto; gap: 22px; }
  .offer-card {
    min-height: 0;
    padding: 30px 30px 28px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 20px;
    align-items: start;
    transform: none !important;
  }
  .offer-number { grid-column: 1; grid-row: 1; margin-top: 4px; }
  .offer-icon { grid-column: 1; grid-row: 2; width: 50px; height: 50px; margin: 18px 0 0; }
  .offer-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(32px, 6vw, 42px); }
  .offer-price { grid-column: 2; grid-row: 2; margin: 14px 0 0; }
  .offer-card > p:not(.offer-price) { grid-column: 2; grid-row: 3; margin: 12px 0 0; }
  .offer-card a { grid-column: 2; grid-row: 4; margin-top: 14px; padding-top: 0; }
  .method-path { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-height: 0; }
  .method-line { display: none; }
  .method-step { position: relative; inset: auto !important; width: auto; transform: none !important; }
  .method-step::before { display: none; }
  .cta-collage { max-width: 650px; width: 100%; margin-inline: auto; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .footer-wordmark { justify-content: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 580px) {
  .section-pad { padding: 64px 20px; }
  .paper-noise { display: none; }
  .wordmark-logo { height: 26px; }
  .site-header { height: 88px; min-height: 88px; padding: 8px 22px; }
  .menu-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .menu-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-lines { display: flex; flex-direction: column; gap: 5px; width: 20px; }
  .menu-lines i { width: 20px; height: 2px; flex: 0 0 2px; }
  .hero { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 18px 0 0; }
  .hero-copy, .hero-actions { display: contents; animation: none !important; }
  .hero-mobile-only { display: block; }
  .hero-title-desktop, .hero-lede-desktop { display: none; }
  .hero .eyebrow { grid-row: 1; grid-column: 1 / -1; margin: 0 22px 12px; font-size: clamp(8px, 2.05vw, 10px); letter-spacing: .12em; }
  .hero h1 { grid-row: 2; grid-column: 1 / -1; margin: 0 22px; font-size: clamp(40px, 13.2vw, 75px); line-height: 1; letter-spacing: -.055em; text-wrap: initial; }
  .hero h1 .hero-title-mobile { display: block; color: var(--ink); }
  .hero h1 .hero-title-mobile em { color: var(--blush-ink); margin-left: .1em; }
  .hero-blob { display: none; }
  .hero h1 em::after { display: none; }
  .hero-lede { grid-row: 3; grid-column: 1 / -1; max-width: none; margin: 14px 22px 16px; font-size: clamp(16px, 4.2vw, 22px); line-height: 1.3; }
  .hero .button-primary { grid-row: 4; grid-column: 1 / -1; width: auto; margin: 0 20px; min-height: 56px; padding: 12px 18px; font-size: clamp(17px, 4.5vw, 23px); letter-spacing: -.035em; box-shadow: none; }
  .hero-audit-detail { grid-row: 5; grid-column: 1; align-self: center; margin: 6px 0 4px 22px; font-size: clamp(12px, 3.1vw, 16px); white-space: nowrap; }
  .hero .button-secondary { grid-row: 5; grid-column: 2; justify-self: end; margin: 6px 22px 4px 0; padding: 8px 0; min-height: 44px; width: max-content; border: 0; background: transparent; font-size: clamp(12px, 3.1vw, 16px); gap: 5px; text-decoration: underline; text-decoration-color: var(--tangerine); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .hero-note { display: none; }
  .hero-collage { grid-row: 6; grid-column: 1 / -1; min-height: 0; width: auto; height: auto; aspect-ratio: 1.3; margin: 8px 8px 0; align-self: auto; animation: none; }
  .hero-stage { border-radius: 48px 30px 52px 30px; background: var(--butter-light); }
  .hero-stage::before, .hero-stage::after { display: none; }
  .hero-brand-seal { width: 58px; right: 6%; top: 7%; border-width: 3px; }
  .hero-stage .sticker-one { min-width: 0; font-size: 11px; right: 3%; bottom: 3%; padding: 9px 13px; }
  .hero-stage .sticker-one strong { font-size: 15px; }
  .hero-stage .sticker-lead { font-size: 9px; }
  .hero-orbit { width: 82%; height: auto; aspect-ratio: 1; top: 60%; left: 50%; background: var(--tangerine); border: 0; box-shadow: none; }
  .hero-cutout { width: 126%; max-width: none; height: auto; top: -58%; bottom: auto; left: 44%; filter: none; }
  .hero-photo-note { position: absolute; z-index: 5; left: 5%; top: 59%; padding: 10px 12px; background: var(--paper); color: var(--ink); font-family: "Poppins", system-ui, sans-serif; font-size: clamp(14px, 3.9vw, 21px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; border-radius: 3px; transform: rotate(-8deg); box-shadow: var(--lift-2); }
  .hero-photo-note::before { content: ""; position: absolute; width: 40px; height: 14px; top: -8px; left: 35%; background: var(--blush-light); opacity: .9; transform: rotate(-4deg); }
  .journey-ribbon { overflow: hidden; min-height: 0; gap: 16px; margin: 10px 8px 8px; padding: 24px 20px; border: 0; border-radius: 30px; }
  .journey-heading { align-items: flex-start; gap: 4px; text-align: left; }
  .journey-heading strong { font-size: clamp(22px, 6.2vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
  .journey-heading .tiny-label { font-size: 9px; font-weight: 500; color: var(--ink); }
  .journey-track { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; padding: 0; border: 0; }
  .journey-step { position: relative; }
  .journey-step + .journey-step::before { content: ""; position: absolute; width: calc(100% - 44px); height: 1px; right: calc(50% + 24px); top: 22px; background: var(--tangerine); }
  .journey-disc { width: 44px; height: 44px; }
  .journey-disc svg { width: 21px; height: 21px; }
  .journey-num { display: none; }
  .journey-step b { max-width: 100%; margin-top: 7px; font-size: 10px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
  .hero-context { margin: 22px 22px 28px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
  .ticker { display: none; }
  .belief { border-radius: 28px 28px 0 0; padding-top: 26px; }
  .ticker-track { padding: 14px 20px; }
  .ticker-group { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; text-align: center; font-size: 9px; }
  .ticker-track i { display: none; }
  .belief h2, .section-heading h2, .method h2, .about h2 { font-size: clamp(42px, 12.2vw, 52px); }
  /* One column puts the notes and the portrait in the same narrow stage, and
     the portrait carries z-index 3, so at the old heights it printed straight
     over "Answer what she typed. Show up in search." The stage grows and the
     notes move to the top so the two never share space. */
  .belief-collage { min-height: clamp(560px, 156vw, 645px); }
  .note-card-one { width: 52%; left: 0; top: 2%; }
  .note-card-two { width: 54%; right: 0; top: 9%; }
  .paper-card { padding: 25px 20px; }
  .paper-card strong { font-size: clamp(20px, 6vw, 24px); }
  .belief-orbit { width: 64%; left: 17%; bottom: 1%; }
  .belief-cutout { width: 112%; height: 100%; left: -18%; top: 8%; transform: scale(1.35) translateY(8%); }
  .side-note { width: 150px; font-size: 18px; right: -2%; }
  .offer-card { grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; padding: 26px 22px 24px; box-shadow: var(--lift-2); }
  .offer-icon { width: 44px; height: 44px; }
  .offer-icon svg { width: 21px; height: 21px; }
  .offer-card h3 { font-size: clamp(30px, 9vw, 36px); }
  .offer-card > p:not(.offer-price) { font-size: 14px; line-height: 1.6; }
  .offer-price strong { font-size: 30px; }
  .card-community { transform: rotate(-.6deg) !important; }
  .card-coaching { transform: translateX(3px) rotate(.35deg) !important; }
  .card-resources { transform: translateX(-2px) rotate(-.35deg) !important; }
  .paper-tab { right: 18px; }
  .method-intro { margin-bottom: 36px; }
  .method-path { display: block; border-top: 1px solid var(--line-strong); }
  .method-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 24px 0; background: transparent; border-bottom: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }
  .method-step span { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; font-family: "Manrope", system-ui, sans-serif; font-size: 20px; letter-spacing: .04em; }
  .method-step h3 { grid-column: 2; grid-row: 1; margin: 0 0 5px; font-size: 27px; }
  .method-step p { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.55; }
  .about-collage { min-height: clamp(420px, 116vw, 490px); }
  .about-main { width: 63%; height: 64%; left: 0; }
  .about-bw { width: 42%; height: 39%; right: 0; }
  .about-work { width: 45%; height: 34%; left: 26%; }
  .about-stamp { width: 104px; height: 104px; padding: 10px; font-size: 13px; right: 0; }
  .truth-strip { padding: 28px 20px; }
  .final-cta { padding-top: 70px; }
  .final-cta h2 { font-size: clamp(56px, 16vw, 70px); }
  .cta-collage { min-height: clamp(350px, 96vw, 410px); }
  .cta-orbit { width: 70%; left: 2%; top: 12%; }
  .cta-cutout { width: 80%; height: 100%; left: -4%; top: 3%; }
  .cta-note { right: -2%; top: 22%; padding: 14px 16px; font-size: 18px; }
  .cta-note strong { font-size: 26px; }
  .cta-doodle { right: 1%; bottom: 7%; font-size: 18px; }
}

@media (max-width: 340px) {
  .site-header { padding-inline: 16px; }
  .section-pad { padding-inline: 16px; }
  .hero { padding-inline: 0; }
  .hero h1 { margin-inline: 16px; }
  .hero-lede { margin-inline: 16px; }
  .journey-ribbon { padding-inline: 16px; }
  .offer-card { grid-template-columns: 44px minmax(0, 1fr); padding-inline: 18px; }
  .offer-icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker-track { animation: none; transform: none; }
  .ticker-group:nth-child(2) { display: none; }
}

@supports not (overflow: clip) {
  html, body, .hero { overflow-x: hidden; }
}

.not-found {
  min-height: 100svh;
  padding: 32px clamp(22px, 6vw, 88px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: clip;
}
.not-found::before {
  content: "";
  position: absolute;
  width: min(68vw, 760px);
  aspect-ratio: 1;
  right: -20%;
  top: -34%;
  z-index: -1;
  border-radius: 43% 57% 59% 41% / 47% 36% 64% 53%;
  background: var(--sea-light);
  transform: rotate(-10deg);
}
.not-found-card {
  width: min(100%, 760px);
  padding: clamp(34px, 7vw, 74px);
  background: var(--butter-light);
  border: 1px solid var(--line);
  border-radius: 34px 12px 42px 17px;
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}
.not-found-card strong {
  display: block;
  margin-bottom: 14px;
  color: var(--blush-ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 26px;
}
.not-found-card h1 {
  max-width: 10ch;
  margin: 0 0 24px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(54px, 10vw, 100px);
  line-height: .9;
  letter-spacing: -.05em;
}
.not-found-card p { max-width: 52ch; margin: 0 0 28px; color: var(--ink-soft); font-size: 17px; }
.not-found-logo { width: 220px; max-width: 100%; height: auto; margin-bottom: 36px; }

/* wins:generated-start */
.wins-deck-stack { --deck-ratio: 0.825; }
.win-flier-1 {
  --from-x: -96vw;
  --fr: -19deg;
  --tilt: -2.6deg;
}
.win-flier-2 {
  --from-x: 104vw;
  --fr: 16deg;
  --tilt: 2.2deg;
}
.win-flier-3 {
  --from-x: -92vw;
  --fr: 21deg;
  --tilt: 1.7deg;
}
.win-flier-4 {
  --from-x: 100vw;
  --fr: -17deg;
  --tilt: -2.1deg;
}
.win-deck-1 { --dx: -2.59%; --dy: 1.24%; --rot: 3.01deg; z-index: 200; }
.win-deck-2 { --dx: 1.15%; --dy: 1.85%; --rot: 0.04deg; z-index: 199; }
.win-deck-3 { --dx: -1.71%; --dy: -1.41%; --rot: -2.79deg; z-index: 198; }
.win-deck-4 { --dx: -1.21%; --dy: 0.77%; --rot: -2.03deg; z-index: 197; }
.win-deck-5 { --dx: 1.69%; --dy: -0.99%; --rot: 0.74deg; z-index: 196; }
.win-deck-6 { --dx: -1.94%; --dy: 2.29%; --rot: -1.95deg; z-index: 195; }
.win-deck-7 { --dx: 3.34%; --dy: -1.07%; --rot: 3.10deg; z-index: 194; }
.win-deck-8 { --dx: -2.41%; --dy: 0.01%; --rot: 0.83deg; z-index: 193; }
.win-deck-9 { --dx: 0.26%; --dy: 0.72%; --rot: 1.03deg; z-index: 192; }
.win-deck-10 { --dx: 0.77%; --dy: -0.85%; --rot: 3.56deg; z-index: 191; }
.win-deck-11 { --dx: -0.64%; --dy: 2.17%; --rot: 0.58deg; z-index: 190; }
.win-deck-12 { --dx: 0.75%; --dy: 0.61%; --rot: -3.54deg; z-index: 189; }
.win-deck-13 { --dx: -0.67%; --dy: 1.83%; --rot: 0.44deg; z-index: 188; }
.win-deck-14 { --dx: 2.10%; --dy: -2.25%; --rot: -2.88deg; z-index: 187; }
.win-deck-15 { --dx: -2.50%; --dy: 0.47%; --rot: 0.30deg; z-index: 186; }
.win-deck-16 { --dx: -0.94%; --dy: 1.44%; --rot: -0.18deg; z-index: 185; }
.win-deck-17 { --dx: -2.09%; --dy: -1.57%; --rot: 1.68deg; z-index: 184; }
.win-deck-18 { --dx: 1.95%; --dy: -0.68%; --rot: 0.84deg; z-index: 183; }
.win-deck-19 { --dx: 2.28%; --dy: 1.89%; --rot: -2.16deg; z-index: 182; }
.win-deck-20 { --dx: 3.09%; --dy: 1.66%; --rot: -1.01deg; z-index: 181; }
.win-deck-21 { --dx: -0.85%; --dy: 1.26%; --rot: 3.39deg; z-index: 180; }
.win-deck-22 { --dx: 1.81%; --dy: 0.40%; --rot: 0.70deg; z-index: 179; }
.win-deck-23 { --dx: -1.76%; --dy: -0.86%; --rot: -1.08deg; z-index: 178; }
.win-deck-24 { --dx: 0.92%; --dy: -1.92%; --rot: 3.52deg; z-index: 177; }
.win-deck-25 { --dx: 1.97%; --dy: 0.26%; --rot: 0.64deg; z-index: 176; }
.win-deck-26 { --dx: 2.38%; --dy: -0.86%; --rot: -0.81deg; z-index: 175; }
.win-deck-27 { --dx: 2.42%; --dy: 0.34%; --rot: -2.27deg; z-index: 174; }
.win-deck-28 { --dx: 2.72%; --dy: 0.97%; --rot: 3.47deg; z-index: 173; }
.win-deck-29 { --dx: -0.99%; --dy: 1.06%; --rot: -3.09deg; z-index: 172; }
.win-deck-30 { --dx: -3.11%; --dy: -2.60%; --rot: 1.08deg; z-index: 171; }
.win-deck-31 { --dx: -2.01%; --dy: -2.47%; --rot: -2.11deg; z-index: 170; }
.win-deck-32 { --dx: 3.12%; --dy: -0.69%; --rot: -2.33deg; z-index: 169; }
.win-deck-33 { --dx: 2.59%; --dy: -1.12%; --rot: -0.27deg; z-index: 168; }
.win-deck-34 { --dx: 2.88%; --dy: 2.45%; --rot: -2.92deg; z-index: 167; }
/* wins:generated-end */

/* Contrast and finishing details from the full-page visual audit. */
.hero h1 span:not(.hero-title-desktop):not(.hero-title-mobile) { color: #cb5275; }
.hero-stage .sticker strong { color: var(--blush-ink); }
.starter-steps, .niche-chips, .swipe-panel { scroll-margin-top: 100px; }
.swipe-input { border-radius: 8px; }
.swipe-input[aria-invalid="true"] { border: 2px solid var(--blush-ink); }
.swipe-label, .swipe-fineprint { font-size: 11px; }
.swipe-picked li { min-height: 43px; padding-block: 11px; }
.swipe-progress { font-size: 13px; }
.swipe-empty { padding: 16px; line-height: 1.55; }
.site-footer { padding-block: 54px 32px; }
.footer-credit { padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 580px) {
  .method-step p { color: var(--ink); }
  .starter-intro h2 { font-size: clamp(40px, 11vw, 54px); line-height: 1.06; letter-spacing: -.05em; }
  .starter-steps b { font-size: 14px; }
  .starter-steps span { font-size: 12px; line-height: 1.5; }
  .swipe-body { gap: 38px; }
  .swipe-file { width: 100%; }
  .footer-wordmark .wordmark-logo { height: 32px; }
}

.starter-note-legend > span:first-child { display: flex; align-items: center; gap: 8px; }
.starter-step-number { flex: none; }