/* WHAT DO I EVEN SAY? — funnel stylesheet (redesigned 2026-09-10)
   Same system as the products: cream paper, plum-navy ink, the sentence she
   used to say struck through in coral, the one to say instead set big with a
   highlighter behind it. Young Serif for the words, Fira Sans for reading (static: it survives into PDF). */
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Young+Serif&display=swap");

:root {
  --paper:#FBF6EE; --lift:#FFFDF9; --band:#F3EADC;
  --ink:#221C35; --ink-2:#4A4264; --line:#E4D6C2;
  --coral:#E24A33; --coral-ink:#B3321E; --coral-deep:#8F2615; --coral-wash:#FCE3DC;
  --mint:#BDEFD3; --mint-ink:#17704A;
  --butter:#FFE08A; --butter-wash:#FFF4CC;
  --radius:16px;
  --shadow:0 1px 0 rgba(34,28,53,.04), 0 12px 32px -20px rgba(34,28,53,.4);
  --display:"Young Serif", "Iowan Old Style", Georgia, serif;
  --body:"Fira Sans", ui-sans-serif, "Segoe UI", Helvetica, Arial, sans-serif;
  --max:41rem;
  --hl-h:60%; --hl-y:88%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#15121D; --lift:#1D1828; --band:#221C30;
    --ink:#F6EFE5; --ink-2:#CFC4DE; --line:#342B45;
    --coral:#FF7A61; --coral-ink:#FF9C87; --coral-deep:#FFB4A3; --coral-wash:#3A1D1C;
    --mint:rgba(116,224,168,.78); --mint-ink:#8FE6B8;
    --hl-h:30%; --hl-y:97%;
    --butter:#FFD66B; --butter-wash:rgba(255,214,107,.10);
    --shadow:0 14px 34px -20px rgba(0,0,0,.8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.08rem/1.65 var(--body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
@media screen {
  body::before {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0 0.2 0 0 0 .05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
}

.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 1.35rem; }
.wide { max-width: 60rem; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 8.2vw, 3.9rem); line-height: 1.02; letter-spacing: -0.025em; margin: .9rem 0 1rem; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.015em; margin: 3rem 0 .9rem; }
h3 { font: 700 1.1rem/1.3 var(--body); margin: 1.8rem 0 .45rem; }
p  { margin: 0 0 1.05rem; }
strong { font-weight: 700; }
a { color: inherit; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--coral-ink); }

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 700 .74rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral-ink); margin: 0 0 .4rem;
}
.kicker::before {
  content:""; width:1.05rem; height:.8rem; border-radius:.45rem .45rem .45rem .1rem;
  background: var(--coral); display:inline-block;
}
.lede { font-size: 1.22rem; line-height: 1.55; color: var(--ink-2); max-width: 34rem; }
.meta { font: 700 .8rem/1.4 var(--body); letter-spacing: .04em; color: var(--ink-2); }
.small { font-size: .92rem; }
mark { color: inherit; padding: 0 .1em; background: linear-gradient(100deg, transparent .2%, var(--mint) .6% 99%, transparent 99.6%) no-repeat 0 var(--hl-y) / 100% var(--hl-h); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- layout ---------- */
header.hero { padding: clamp(3rem, 10vw, 5.5rem) 0 1.4rem; }
section { padding: .4rem 0; }
footer {
  margin-top: 4.5rem; padding: 2rem 0 3rem;
  border-top: 1.5px dashed var(--line);
  font-size: .88rem; color: var(--ink-2);
}
footer a { color: var(--ink-2); }
hr.rule { border: 0; border-top: 1.5px dashed var(--line); margin: 3rem 0; }

/* ---------- the script card: the product's atomic unit ---------- */
.script {
  background: var(--lift); border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.15rem 1.25rem 1.05rem; margin: 1.15rem 0;
}
.script .situation {
  font: 700 .76rem/1.3 var(--body); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 .75rem;
}
/* Not flex: a flex item is blockified, so the highlighter painted one block to
   the card edge instead of following the words line by line. The mark sits
   in the gutter and the sentence stays a true inline run. */
.line { display: block; position: relative; padding-left: 2.15rem; margin: 0 0 .65rem; }
.line .mark {
  flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: inline-grid; place-items: center; font: 700 .78rem/1 var(--body);
  position: absolute; left: 0; top: .2rem;
}
.line.no .mark  { background: var(--coral-wash); color: var(--coral-ink); }
.line.yes .mark { background: var(--mint); color: var(--mint-ink); }
.line.no > span:last-child {
  color: var(--ink-2); font-size: 1rem;
  text-decoration: line-through; text-decoration-color: var(--coral);
  text-decoration-thickness: .11em; text-decoration-skip-ink: none;
}
.line.yes > span:last-child {
  font: 400 1.32rem/1.38 var(--display); color: var(--ink);
  background: linear-gradient(100deg, transparent .2%, var(--mint) .6% 99%, transparent 99.6%) no-repeat 0 var(--hl-y) / 100% var(--hl-h);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .1em;
}
.line.yes em { font: italic 400 .95rem var(--body); color: var(--ink-2); }
.why { font-size: .96rem; color: var(--ink-2); margin: .3rem 0 0; padding-left: 1.35rem; position: relative; }
.why::before { content: "\2192"; position: absolute; left: 0; color: var(--coral); }

/* ---------- callouts ---------- */
.note {
  background: var(--band); border-radius: var(--radius);
  padding: 1.05rem 1.2rem; margin: 1.6rem 0;
}
.note.warn { background: var(--coral-wash); }
.note p:last-child { margin-bottom: 0; }

/* ---------- form + buttons ---------- */
form.optin { margin: 1.8rem 0 .6rem; }
.field { display: flex; gap: .6rem; flex-wrap: wrap; }
input[type=email] {
  flex: 1 1 15rem; min-width: 0;
  font: 400 1.05rem var(--body);
  padding: .95rem 1.1rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--lift); color: var(--ink);
}
input[type=email]:focus { outline: 3px solid var(--mint); outline-offset: 1px; border-color: var(--ink); }

.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--coral-ink); color: #fff;
  font: 700 1.02rem/1.2 var(--body); letter-spacing: .01em;
  padding: 1rem 1.6rem; border-radius: 999px;
  text-decoration: none; text-align: center; min-height: 52px;
  box-shadow: 0 10px 22px -12px rgba(179,50,30,.7);
  transition: transform .15s, background .15s;
}
.btn:hover { background: var(--coral-deep); color: #fff; transform: translateY(-1px); }
/* dark: the label stays dark on hover too - white on the pale hover coral was 1.71:1.
   This MUST come after .btn:hover: a media block adds no specificity, so when it sat
   above, the plain hover rule won and the fix did nothing (design-critic-r2 #4). */
@media (prefers-color-scheme: dark) { .btn, .btn:hover { color: #15121D; } }
.btn.block { display: block; width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.consent { font-size: .86rem; color: var(--ink-2); margin: .8rem 0 0; }

/* ---------- order bump ---------- */
.bump {
  border: 2px dashed var(--coral-ink); border-radius: var(--radius); background: var(--butter-wash);
  padding: 1.1rem 1.2rem; margin: 1.5rem 0;
}
.bump label { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.bump input[type=checkbox] { width: 1.45rem; height: 1.45rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--coral-ink); }
.bump .price { color: var(--coral-ink); font-family: var(--display); font-weight: 400; font-size: 1.1em; }

/* ---------- list ---------- */
ul.plain { list-style: none; padding: 0; margin: 1.1rem 0; }
ul.plain li { padding: .45rem 0 .45rem 1.9rem; position: relative; }
ul.plain li::before {
  content: ""; position: absolute; left: .1rem; top: .95em;
  width: 1.1rem; height: .55rem; border-radius: 3px; background: var(--mint); transform: rotate(-4deg);
}

/* ---------- price ---------- */
.pricebox {
  position: relative; background: var(--lift); border: 2px solid var(--ink); border-radius: 22px;
  padding: 1.5rem 1.4rem 1.3rem; margin: 1.8rem 0; box-shadow: var(--shadow);
}
.price-lg { font: 400 clamp(2.6rem, 9vw, 3.4rem)/1 var(--display); letter-spacing: -0.02em; }

/* ---------- misc ---------- */
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
img { max-width: 100%; height: auto; }

@media screen and (prefers-reduced-motion: no-preference) {
  header.hero > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  header.hero > *:nth-child(2) { animation-delay: .07s; }
  header.hero > *:nth-child(3) { animation-delay: .14s; }
  header.hero > *:nth-child(4) { animation-delay: .21s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 30rem) {
  body { font-size: 1.04rem; }
  .field { flex-direction: column; }
  .btn { width: 100%; }
}