/* ============================================================================
   sections.css — per-section layout, in page order.
   ========================================================================= */

/* ------------------------------------------------------------------ hero --- */
.hero { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 56px) 0 clamp(48px, 7vw, 88px) }
.hero::before {
  content: ''; position: absolute; left: 50%; top: -14%;
  width: min(1500px, 150vw); aspect-ratio: 1 / 1;
  transform: translateX(-50%); pointer-events: none; z-index: -1;
  background:
    radial-gradient(closest-side, var(--glow-1), transparent 68%),
    radial-gradient(closest-side at 68% 42%, var(--glow-2), transparent 62%);
}
.hero-grid { display: grid; gap: clamp(34px, 4vw, 58px); grid-template-columns: 1fr; align-items: center }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 4vw, 72px) } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-soft);
  margin-bottom: 20px; font: 600 12px/1 var(--font); color: var(--tx-2);
}
.hero-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint) }
.hero h1 { margin-bottom: 18px }
.hero .lede { max-width: 33ch }
.cta-stack { margin-top: 28px; max-width: 430px }

/* The sweep only runs on wide screens: it is decoration, and on a phone the
   headline is the LCP element. */
.swipe {
  background: linear-gradient(100deg,
    var(--tx) 0%, var(--tx) calc(var(--sweep-pos) - 12%),
    var(--accent-soft) var(--sweep-pos),
    var(--tx) calc(var(--sweep-pos) + 12%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .swipe { animation: sweepKF 6.5s linear 1.2s infinite }
}
@keyframes sweepKF { 0% { --sweep-pos: -20% } 55%, 100% { --sweep-pos: 130% } }

/* Keep the first viewport short on phones so the device is the very next thing. */
@media (max-width: 520px) {
  .lede-more { display: none }
  .trust-x { display: none }
  .hero { padding-top: 18px }
  .hero-badge { margin-bottom: 15px; font-size: 11.5px; padding: 6px 12px 6px 9px }
  .cta-stack { margin-top: 22px }
  .hero .lede { max-width: none }
}

/* ---------------------------------------------------------------- ticker --- */
.ticker { border-block: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; padding: 15px 0 }
.tick-track { display: flex; width: max-content }
@media (prefers-reduced-motion: no-preference) { .tick-track { animation: tickKF 42s linear infinite } }
@keyframes tickKF { to { transform: translateX(-50%) } }
.tick-track ul { display: flex; align-items: center; gap: clamp(26px, 3.4vw, 48px); padding: 0 clamp(13px, 1.7vw, 24px); list-style: none }
.tick-track li { display: flex; align-items: center; gap: 9px; white-space: nowrap; font: 600 13.5px/1 var(--font); color: var(--tx-2) }
.tick-track li i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .6; flex: 0 0 auto }
.tick-track li b { color: var(--tx); font-weight: 800 }

/* ----------------------------------------------------------------- steps --- */
.step { position: relative; padding-top: 8px }
.step-n {
  font: 800 clamp(40px, 5vw, 60px)/1 var(--font); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line);
  margin-bottom: 10px; transition: -webkit-text-stroke-color .35s linear;
}
.step[data-lit] .step-n { -webkit-text-stroke-color: var(--accent-edge) }

/* ------------------------------------------------------------ gap story --- */
.story { display: grid; gap: clamp(26px, 3vw, 48px); align-items: start }
@media (min-width: 980px) { .story { grid-template-columns: 1fr 1fr } }
.story-sticky { position: relative }
@media (min-width: 980px) { .story-sticky { position: sticky; top: calc(var(--nav-h) + 32px) } }

.beat { border-left: 2px solid var(--line); padding: 0 0 30px 22px; position: relative; transition: border-color .35s linear }
.beat:last-child { padding-bottom: 0 }
.beat::before {
  content: ''; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  transition: background-color .35s linear, border-color .35s linear, transform .35s var(--ease);
}
.beat[data-lit] { border-left-color: var(--accent-edge) }
.beat[data-lit]::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25) }
.beat h3 { margin-bottom: 7px }
.beat p { color: var(--tx-2); font-size: 15px; transition: color .35s linear }
.beat[data-lit] p { color: var(--tx) }

.free-list { display: grid; gap: 10px }
.free-row { display: flex; gap: 10px; align-items: flex-start }
.free-row svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; margin-top: 2px }
.free-row b { display: block; font-size: 14.5px }
.free-foot { border-top: 1px solid var(--line); padding: 15px clamp(18px, 2vw, 24px); background: var(--accent-tint) }

/* ---------------------------------------------------------------- safety --- */
.safety-band { background: linear-gradient(180deg, var(--toxic-wash), transparent 55%) }
.verdicts { display: grid; gap: 10px; grid-template-columns: 1fr }
@media (min-width: 720px) { .verdicts { grid-template-columns: repeat(3, 1fr) } }
.verdict { border: 1px solid var(--line); border-radius: 16px; padding: 15px; background: var(--surface-soft) }
.verdict-c { display: flex; align-items: center; gap: 8px; font: 800 12px/1 var(--font); letter-spacing: .03em }
.verdict-c svg { width: 16px; height: 16px; flex: 0 0 auto }
.verdict p { font-size: 12.5px; color: var(--tx-3); margin-top: 9px; line-height: 1.45 }
.v-safe { color: var(--safe) } .v-mild { color: var(--mild) } .v-tox { color: var(--toxic) }
@media (prefers-reduced-motion: no-preference) {
  .verdict[data-lit].v-ring { animation: ringPulse 1.6s ease-out 1 }
}
@keyframes ringPulse {
  from { box-shadow: 0 0 0 0 var(--toxic-edge) }
  to   { box-shadow: 0 0 0 15px transparent }
}
.honesty {
  margin-top: 20px; border-left: 3px solid var(--toxic); padding: 13px 16px; border-radius: 0 13px 13px 0;
  background: var(--toxic-wash); font-size: 13.5px; line-height: 1.55; color: var(--tx-2);
}
.honesty b { color: var(--tx) }

/* -------------------------------------------------------- before / after --- */
.ba { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--surface) }
.ba-layer { position: absolute; inset: 0 }
.ba-layer img { width: 100%; height: 100%; object-fit: cover }
.ba-top { clip-path: inset(0 calc(100% - var(--x, 52%)) 0 0) }
.ba-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; font: 700 10.5px/1 var(--font); letter-spacing: .06em; backdrop-filter: blur(6px) }
.ba-tag.l { left: 12px;  background: rgba(168,41,27,.34);  color: #FFD8CF; border: 1px solid rgba(255,140,110,.45) }
.ba-tag.r { right: 12px; background: rgba(10,107,63,.36);  color: #C8F5D9; border: 1px solid rgba(120,225,165,.45) }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--x, 52%); width: 2px; background: var(--cta); box-shadow: 0 0 16px 2px var(--cta-glow); pointer-events: none }
.ba-knob {
  position: absolute; top: 50%; left: var(--x, 52%); transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--cta); color: var(--cta-ink);
  display: grid; place-items: center; pointer-events: none; box-shadow: 0 8px 22px -6px rgba(0,0,0,.55);
}
.ba-knob svg { width: 17px; height: 17px }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none }
.ba input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100% }

.dx-steps { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--tx-2); padding-left: 20px }
.dx-note {
  margin-top: 16px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--sun) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--sun) 24%, transparent);
  color: var(--tx-2);
}

/* ------------------------------------------------------------ care rows --- */
.care-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft) }
.care-row.done { opacity: .68 }
.care-row .th { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; overflow: hidden }
.care-row .th img { width: 100%; height: 100%; object-fit: cover }
.care-row .gr { flex: 1; min-width: 0 }
.care-row .gr b { display: block; font-size: 14px }
.care-row .act { padding: 7px 13px; border-radius: 12px; background: var(--accent); color: var(--bg); font: 800 12px/1 var(--font); flex: 0 0 auto }
.care-row .act.ghost { background: none; border: 1px solid var(--line); color: var(--tx-3); font-weight: 700 }

/* ---------------------------------------------------------------- bento --- */
.bento { display: grid; gap: 13px; grid-template-columns: 1fr }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(3, 1fr) } .bento .w2 { grid-column: span 2 } }
.bento .card { padding: 19px }
.bento h3 { font-size: 17px; margin-bottom: 6px }
.bento p { font-size: 13.5px; color: var(--tx-3) }

/* --------------------------------------------------------------- badges --- */
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px }
@media (min-width: 620px) { .badges { grid-template-columns: repeat(6, 1fr) } }
.bdg { text-align: center }
.bdg-d {
  width: 100%; aspect-ratio: 1; max-width: 78px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.bdg[data-lock] .bdg-d { opacity: .45 }
.bdg-d svg { width: 40%; height: auto }
.bdg b { display: block; font: 700 11.5px/1.25 var(--font) }
.bdg span { display: block; font: 500 10.5px/1.3 var(--font); color: var(--tx-3); margin-top: 2px }
html.reveal .badges.in .bdg { animation: pop .5s var(--ease) both; animation-delay: calc(var(--d) * 55ms) }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.9) } to { opacity: 1; transform: none } }

/* ---------------------------------------------------------------- stats --- */
.stat { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--surface-soft) }
.stat b { display: block; font: 800 clamp(28px, 3.4vw, 40px)/1 var(--font); letter-spacing: -.035em; color: var(--amber) }
.stat .stat-l { display: block; font: 700 12.5px/1.3 var(--font); margin-top: 9px }
.stat p { font-size: 12.5px; color: var(--tx-3); margin-top: 5px; line-height: 1.45 }

/* -------------------------------------------------------------- compare --- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-soft) }
table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 13.5px }
th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line) }
thead th { font: 700 11.5px/1.3 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap }
tbody th { font-weight: 600; color: var(--tx-2); white-space: nowrap }
td { color: var(--tx-2); white-space: nowrap }
col.uscol { background: var(--accent-tint) }
thead .us { color: var(--accent) }
tbody .us { color: var(--tx); font-weight: 700 }
.yes { color: var(--accent); font-weight: 800 }
.no { color: var(--tx-3) }
.cmp-note { margin-top: 12px; font-size: 12px; color: var(--tx-3) }

/* -------------------------------------------------------------- pricing ---
   Deliberately still. Trial-shock is the category's number-one complaint, and
   any motion here reactivates the suspicion the rest of the page just defused. */
.plan-grid { display: grid; gap: 15px; grid-template-columns: 1fr }
@media (min-width: 820px) { .plan-grid { grid-template-columns: 1fr 1fr } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.3vw, 28px) }
.plan[data-pro] { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)) }
.plan-t { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap }
.plan-tag { font: 800 10px/1 var(--font); letter-spacing: .08em; padding: 5px 8px; border-radius: 7px; background: var(--pill-safe-bg); color: var(--pill-safe-tx) }
.plan[data-pro] .plan-tag { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold) }
.plan-price { margin-top: 14px; font: 800 clamp(26px, 3vw, 34px)/1 var(--font); letter-spacing: -.03em }
.plan-price small { font: 600 14px/1 var(--font); color: var(--tx-2); letter-spacing: 0 }
.plan-sub { margin-top: 9px; font-size: 13.5px; color: var(--tx-2); line-height: 1.5 }
.plan ul { list-style: none; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px }
.plan li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--tx) }
.plan li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--accent) }
.plan[data-pro] li svg { color: var(--gold) }
.plan-fine { margin-top: 12px; font-size: 12px; color: var(--tx-3); line-height: 1.5 }
.btn-plan {
  display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px;
  background: var(--cta); color: var(--cta-ink); font: 800 15.5px/1 var(--font); margin-top: 20px;
  transition: background-color .2s linear, transform .2s var(--ease-out);
}
.btn-plan:hover { background: var(--cta-hover); transform: translateY(-2px) }
.btn-plan.secondary { background: none; border: 1px solid var(--line); color: var(--tx) }
.btn-plan.secondary:hover { background: var(--accent-tint); border-color: var(--accent) }

/* ------------------------------------------------------------------ faq --- */
.faq { max-width: 760px; margin-inline: auto }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 44px 19px 0; position: relative;
  font: 700 16.5px/1.4 var(--font); letter-spacing: -.014em;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 26px; width: 11px; height: 11px;
  border-right: 2.2px solid var(--tx-3); border-bottom: 2.2px solid var(--tx-3);
  transform: rotate(45deg); transition: transform .28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) }
.faq p { padding: 0 8px 20px 0; font-size: 14.8px; line-height: 1.6; color: var(--tx-2) }

/* ------------------------------------------------------------ final CTA --- */
.final { text-align: center; position: relative; overflow: hidden }
.final::before {
  content: ''; position: absolute; left: 50%; bottom: -45%;
  width: min(1100px, 140vw); aspect-ratio: 1; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-2), transparent 70%);
}
.final-row { display: flex; gap: clamp(24px, 3vw, 44px); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px }
.final .btn-primary { max-width: 400px }

/* Desktop pointer devices only: a touch tablet cannot scan its own screen. */
.qr { display: none }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .qr { display: block; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.45) }
  .qr svg { width: 168px; height: 168px }
  .qr span { display: block; margin-top: 9px; font: 700 11px/1.3 var(--font); color: #0B1F17; text-align: center; max-width: 168px }
}

/* ------------------------------------------------------------ voices wall ---
   Two rows drifting in opposite directions. Full-bleed on purpose: the cards
   running past the shell edge is what makes it read as a wall rather than a
   grid. Hovering or focusing anything inside pauses both rows so a card can
   actually be read.                                                          */
.wall {
  position: relative; margin-top: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 13px;
  overflow: hidden;   /* the rows are wider than the viewport by design */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wall-row { display: flex; gap: 13px; width: max-content; will-change: transform }
@media (prefers-reduced-motion: no-preference) {
  .wall-row[data-dir="l"] { animation: wallL 64s linear infinite }
  .wall-row[data-dir="r"] { animation: wallR 72s linear infinite }
  .wall:hover .wall-row,
  .wall:focus-within .wall-row { animation-play-state: paused }
}
@keyframes wallL { to { transform: translateX(-50%) } }
@keyframes wallR { from { transform: translateX(-50%) } to { transform: none } }

/* Without motion the rows become ordinary swipeable strips. */
@media (prefers-reduced-motion: reduce) {
  .wall { -webkit-mask-image: none; mask-image: none }
  .wall-row { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px }
  .wall-row > * { scroll-snap-align: start }
}

.voice {
  flex: 0 0 auto; width: min(340px, 78vw); margin: 0;
  min-height: 196px;            /* keeps the two rows from going ragged */
  display: flex; flex-direction: column; gap: 11px;
  padding: 20px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .25s linear, transform .25s var(--ease);
}
.voice:hover { border-color: var(--accent-edge); transform: translateY(-3px) }
.voice-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  font: 700 10px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-edge);
}
.voice-tag svg { width: 12px; height: 12px }
/* --toxic on its own 9% wash lands at 4.09:1 in dark, under the AA floor for
   10px text. Reuse the verdict-pill pair, which is also more consistent with
   how toxicity reads everywhere else on the page. */
.voice-tag[data-t="toxic"] { background: var(--pill-tox-bg); color: var(--pill-tox-tx); border-color: var(--toxic-edge) }
.voice-tag[data-t="water"] { background: color-mix(in srgb, var(--water) 10%, transparent); color: var(--water); border-color: color-mix(in srgb, var(--water) 26%, transparent) }
.voice-tag[data-t="sun"]   { background: color-mix(in srgb, var(--sun) 10%, transparent);   color: var(--sun);   border-color: color-mix(in srgb, var(--sun) 26%, transparent) }
.voice-tag[data-t="ai"]    { background: color-mix(in srgb, var(--ai) 10%, transparent);    color: var(--ai);    border-color: color-mix(in srgb, var(--ai) 26%, transparent) }
.voice-tag[data-t="gold"]  { background: color-mix(in srgb, var(--gold) 12%, transparent);  color: var(--gold);  border-color: color-mix(in srgb, var(--gold) 26%, transparent) }
.voice blockquote {
  margin: 0; font-size: 15.5px; line-height: 1.5; letter-spacing: -.008em; color: var(--tx);
  quotes: '\201C' '\201D';
}
.voice blockquote::before { content: open-quote } 
.voice blockquote::after  { content: close-quote }
.voice figcaption { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 12.5px; color: var(--tx-3) }
.voice figcaption svg { width: 14px; height: 14px; color: var(--tx-3); flex: 0 0 auto }