/* Clean funnel pages (homepage, quick questions, trial reminder): white space, one accent used on
   buttons, plain rows instead of decorated cards, and gentle fades only. Built on site.css tokens. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clean { --ink: var(--text); --soft: #f5f6f3; --rule: #e6e8e3; --warm: #fdf4e3; --warm-ink: #8a5208; background: #ffffff; }
.clean .wrap { max-width: 1080px; }
.cx-section { padding-block: 56px; }
.cx-section + .cx-section { border-top: 1px solid var(--rule); }
.cx-h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 800; }
.cx-sub { margin: 0 0 24px; color: var(--text-2); max-width: 60ch; }
.cx-kicker { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-strong); }

/* Buttons: one solid style, one quiet outline */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--cta); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
.cx-btn:hover { background: var(--cta-hover); color: #fff; }
.cx-btn:disabled { opacity: 0.6; cursor: progress; }
.cx-btn-quiet { background: transparent; color: var(--brand-strong); border: 1.5px solid var(--line-strong); }
.cx-btn-quiet:hover { background: var(--soft); color: var(--brand-strong); border-color: var(--brand); }
.cx-btn-sm { min-height: 42px; padding: 0 16px; font-size: 0.92rem; border-radius: 10px; }

/* Hero */
.cx-hero { padding-block: 48px 40px; }
@media (min-width: 900px) { .cx-hero { padding-block: 72px 56px; } }
.cx-hero-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .cx-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.cx-hero h1 { margin: 0; font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
.cx-hero h1 em { font-style: normal; color: var(--brand); }
.cx-lede { margin: 16px 0 0; font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-2); max-width: 46ch; }
.cx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cx-cta-note { display: block; font-size: 0.8rem; font-weight: 600; color: #fff; }
.cx-cta-main { flex-direction: column; gap: 0; line-height: 1.2; padding-block: 8px; }
.cx-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: var(--text-2); }
.cx-proof li { display: flex; gap: 6px; align-items: baseline; }
.cx-proof li::before { content: "✓"; color: var(--brand); font-weight: 800; }

/* Top picks beside the headline */
.cx-picks { border: 1px solid var(--rule); border-radius: 16px; padding: 6px 18px; background: #fff; }
.cx-picks-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 12px 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cx-picks-h a { font-size: 0.85rem; letter-spacing: 0; text-transform: none; font-weight: 700; }
.cx-picks .cx-row:last-child { border-bottom: 0; }
/* Placeholders the size of a pick row, so the page doesn't jump when the picks load */
.cx-skel { height: 108px; border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, transparent 0, var(--soft) 40%, transparent 80%) 0 0 / 200% 100%; animation: cx-shimmer 1.4s linear infinite; }
.cx-skel:last-child { border-bottom: 0; }
@keyframes cx-shimmer { to { background-position: -200% 0; } }
@media (min-width: 561px) { .cx-skel { height: 92px; } }

/* Offer rows: name, one line on what you get, the facts we checked, and the button */
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cx-row-name { font-weight: 800; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.cx-row-name:hover { color: var(--brand-strong); text-decoration: underline; }
.cx-row-desc { margin: 2px 0 0; color: var(--text-2); font-size: 0.93rem; }
.cx-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.cx-facts li::before { content: "✓ "; color: var(--brand); font-weight: 700; }
.cx-row-go { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: end; gap: 6px; }
.cx-row-go small { font-size: max(0.78rem, 12.5px); color: var(--muted); white-space: nowrap; }
.cx-row-go .cx-remind { font-size: 0.82rem; font-weight: 700; }
.cx-fit { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 0.74rem; font-weight: 700; vertical-align: 2px; }
.cx-why { margin: 6px 0 0; font-size: 0.85rem; color: var(--brand-strong); font-weight: 600; }
@media (max-width: 560px) {
  .cx-row { grid-template-columns: minmax(0, 1fr); }
  .cx-row-go { grid-column: 1; grid-row: auto; justify-items: start; grid-auto-flow: column; align-items: center; margin-top: 10px; }
}

/* Groups: free first, then trials, then purchase needed */
.cx-group + .cx-group { margin-top: 40px; }
.cx-group-h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.cx-group-h h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.cx-group-h p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.cx-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: max(0.78rem, 12.5px); font-weight: 800; letter-spacing: 0.02em; }
.cx-tag-free { background: var(--brand-soft); color: var(--brand-strong); }
.cx-tag-trial { background: var(--warm); color: var(--warm-ink); }
.cx-tag-deal { background: var(--soft); color: var(--text-2); }

/* What we do for you: three real jobs */
.cx-tools { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cx-tool { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--rule); border-radius: 16px; color: var(--ink); text-decoration: none; background: #fff; transition: border-color 0.15s ease; }
.cx-tool:hover { border-color: var(--brand); color: var(--ink); }
.cx-tool h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.cx-tool p { margin: 0; color: var(--text-2); font-size: 0.93rem; flex: 1; }
.cx-tool span { margin-top: 8px; color: var(--brand-strong); font-weight: 700; font-size: 0.92rem; }
.cx-tool-n { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* How we check, and how we make money */
.cx-steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: s; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cx-steps li { counter-increment: s; }
.cx-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--soft); font-weight: 800; color: var(--brand-strong); }
.cx-steps strong { display: block; margin-bottom: 4px; }
.cx-steps span { color: var(--text-2); font-size: 0.93rem; }
.cx-video { margin: 0 0 32px; max-width: 560px; }
.cx-video video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; background: var(--soft); border: 1px solid var(--rule); }
.cx-video-frame { position: relative; }
.cx-video-play { position: absolute; left: 8%; top: 64%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(15, 33, 51, 0.22); cursor: pointer; }
.cx-video-play:hover { background: var(--brand-strong); }
.cx-video-play:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 3px; }
.cx-video figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; color: var(--text-2); font-size: 0.9rem; }
.cx-video figcaption strong { color: var(--ink); }
.cx-video-text { margin-top: 10px; font-size: 0.9rem; color: var(--text-2); }
.cx-video-text summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--brand-strong); }
.cx-video-text p { margin: 4px 0 0; }
.cx-money { margin: 32px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--soft); color: var(--text-2); font-size: 0.95rem; max-width: 760px; }
.cx-money strong { color: var(--ink); }

/* Sign-up card */
.cx-join { max-width: 560px; padding: 28px; border: 1px solid var(--rule); border-radius: 18px; background: #fff; scroll-margin-top: 90px; }
.cx-join.is-flash { animation: cx-flash 1.2s ease; }
@keyframes cx-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--brand-soft); border-color: var(--brand); } }
.cx-join h2 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; }
.cx-join > p, .cx-join form > p.cx-join-sub { margin: 0 0 16px; color: var(--text-2); }
.cx-join input[type="email"] { min-height: 52px; font-size: 1rem; border-radius: 12px; background: #fff; }
.cx-join .consent { margin: 14px 0 16px; }
.cx-join .consent label { font-size: 0.86rem; color: var(--text-2); }
.cx-join .cx-btn { width: 100%; }
.cx-promise { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }
.cx-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .cx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.cx-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cx-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; color: var(--text-2); }
.cx-list li::before { content: "✓"; color: var(--brand); font-weight: 800; }
.cx-list strong { color: var(--ink); display: block; }

.cx-faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.cx-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.cx-faq details[open] summary::after { content: "–"; }
.cx-faq details p { margin: 8px 0 0; color: var(--text-2); max-width: 70ch; }
.cx-fine { margin-top: 20px; font-size: 0.8rem; color: var(--muted); }

/* Phone: one slim button once the hero has scrolled away */
.cx-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 0.25s ease; }
.cx-sticky.is-on { transform: none; }
.cx-sticky .cx-btn { width: 100%; }
@media (min-width: 900px) { .cx-sticky { display: none; } }

.cx-empty { padding: 20px; border-radius: 12px; background: var(--soft); color: var(--text-2); }
.cx-fade { animation: cx-in 0.4s ease both; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx-fade, .cx-join.is-flash, .cx-skel { animation: none; } .cx-sticky { transition: none; } }

/* Hero: sign-up box beside the headline, explainer video beside it (below it on phones) */
.cx-hero-main .cx-join { margin-top: 22px; padding: 22px; box-shadow: 0 10px 30px rgba(15, 33, 51, 0.08); }
.cx-hero-main .cx-join h2 { font-size: 1.2rem; }
.cx-hero-main .cx-join .consent { margin: 12px 0 14px; }
.cx-hero-main .cx-proof { margin-top: 16px; }
.cx-hero-side { display: grid; gap: 18px; }
.cx-hero-side .cx-video { margin: 0; max-width: none; }
.cx-hero-side .cx-ctas { margin: 0; }
@media (max-width: 560px) {
  .cx-hero { padding-block: 28px 32px; }
  .cx-hero-main .cx-join { margin-top: 18px; padding: 18px 16px; }
  .cx-hero-grid { gap: 28px; }
  /* Offer rows stay short on phones; each offer's own page lists every fact */
  #offers .cx-facts { display: none; }
}
.cx-gets { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.95rem; color: var(--text-2); }
.cx-gets li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
.cx-gets li::before { content: "✓"; color: var(--brand); font-weight: 800; }
.cx-week { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); font-size: 0.9rem; }

/* Oct 18 redesign: headline beside the sign-up box, offers on a warm band so the white cards
   stand out, one type scale (32/22/18/16/14/12) and a 4px spacing grid. */
.cx-hero { padding-block: 32px 40px; }
@media (min-width: 900px) { .cx-hero { padding-block: 64px 64px; } .cx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: center; } }
.cx-hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.08; }
.cx-hero h1 em { display: block; }
.cx-hero .cx-lede { margin-top: 16px; font-size: 16px; line-height: 24px; }
@media (min-width: 900px) { .cx-hero .cx-lede { font-size: 18px; line-height: 28px; } }
.cx-hero-main .cx-proof { margin-top: 20px; display: grid; gap: 8px; font-size: 14px; }
.cx-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 12px; }
.cx-watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.cx-watch:hover { text-decoration: underline; }
.cx-watch-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-strong); color: #fff; }
.cx-see { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.cx-see:hover { text-decoration: underline; }
@media (max-width: 899px) { .cx-see { display: none; } }

.cx-hero .cx-join { margin: 0; max-width: none; padding: 20px; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 33, 51, 0.04), 0 16px 40px -20px rgba(15, 33, 51, 0.25); }
@media (min-width: 900px) { .cx-hero .cx-join { padding: 28px; } }
.cx-hero .cx-join h2 { font-size: 20px; line-height: 26px; margin: 0 0 6px; }
.cx-hero .cx-join .cx-join-sub { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
.cx-week { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: #e8f3ef; color: var(--brand-strong); font-size: 13px; line-height: 18px; }
.cx-week span { color: var(--text-2); }
.cx-hero .cx-join .consent { margin: 12px 0 14px; }
.cx-hero .cx-join .consent label { font-size: 13px; line-height: 18px; }
.cx-hero .cx-join .cx-promise { margin-top: 10px; font-size: 12px; }

.cx-offers { background: #fbfaf7; }
.cx-offers-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.cx-quiz { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--brand-strong); text-decoration: none; }
.cx-quiz:hover { text-decoration: underline; }
.cx-disclose { margin: 4px 0 24px; padding: 12px 14px; border-radius: 12px; background: #e8f3ef; color: var(--text-2); font-size: 13px; line-height: 18px; max-width: 760px; }
.cx-disclose a { font-weight: 700; color: var(--brand-strong); }
.cx-offers .cx-group + .cx-group { margin-top: 36px; }
.cx-offers .cx-group-h { display: block; margin: 0 0 12px; padding: 0; border: 0; font-size: 16px; line-height: 22px; font-weight: 800; }
.cx-offers .cx-group-h span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.cx-offers .offer-grid { margin-bottom: 0; }
.cx-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 20px; border-radius: 16px; background: var(--text); color: #fff; }
.cx-cta-band p { margin: 0; font-size: 15px; line-height: 22px; color: #d6dee6; max-width: 46ch; }
.cx-cta-band strong { color: #fff; }
.cx-cta-band .cx-btn { background: #fff; color: var(--text); }
.cx-cta-band .cx-btn:hover { background: #e8f3ef; color: var(--text); }
@media (max-width: 560px) { .cx-cta-band .cx-btn { width: 100%; } }

.cx-how { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .cx-how { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; } }
.cx-how .cx-video { margin: 0; max-width: 520px; }
@media (max-width: 560px) { .cx-hero { padding-block: 24px 32px; } .cx-hero .cx-join { padding: 18px 16px; } }
.cx-offers-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cx-offers-links [hidden] { display: none; }

/* Oct 19 polish: a framed explainer that previews silently when it scrolls into view, softer
   depth on the sign-up card, cards that settle in one after another, and tactile buttons. */
.cx-how .cx-video-frame { padding: 10px; border-radius: 24px; background: linear-gradient(145deg, var(--brand-soft), #fdf4e3); box-shadow: 0 24px 48px -24px rgba(15, 33, 51, 0.28); }
.cx-how .cx-video video { border: 0; border-radius: 16px; cursor: pointer; }
.cx-video .cx-ico-sound { display: none; }
.cx-video.is-preview .cx-video-play { left: auto; right: 22px; top: 22px; transform: none; min-height: 40px; padding: 0 14px 0 12px; font-size: 0.88rem; background: rgba(15, 33, 51, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cx-video.is-preview .cx-ico-play { display: none; }
.cx-video.is-preview .cx-ico-sound { display: block; }
.cx-video.is-preview .cx-video-play::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: #ff5a4f; animation: cx-live 1.6s ease-in-out infinite; }
@keyframes cx-live { 50% { opacity: 0.25; } }
.cx-video-play { transition: background 0.15s ease, transform 0.15s ease; }
.cx-video:not(.is-preview) .cx-video-play:hover { transform: translateY(-50%) scale(1.04); }
.cx-watch-icon { box-shadow: 0 0 0 0 rgba(11, 95, 74, 0.35); animation: cx-ping 2.4s ease-out 1s 3; }
@keyframes cx-ping { 0% { box-shadow: 0 0 0 0 rgba(11, 95, 74, 0.35); } 80%, 100% { box-shadow: 0 0 0 12px rgba(11, 95, 74, 0); } }

.cx-hero-grid .cx-join { box-shadow: 0 1px 2px rgba(15, 33, 51, 0.04), 0 18px 40px -18px rgba(15, 33, 51, 0.22); }
.cx-join input[type="email"]:focus { box-shadow: 0 0 0 4px rgba(14, 122, 95, 0.14); }
.cx-btn { transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; box-shadow: 0 6px 16px -8px rgba(14, 122, 95, 0.6); }
.cx-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(14, 122, 95, 0.7); }
.cx-btn:active { transform: translateY(0) scale(0.98); }
.cx-btn-quiet { box-shadow: none; }

.offer-grid > .pc { animation: cx-in 0.45s cubic-bezier(.2, .7, .2, 1) both; }
.offer-grid > .pc:nth-child(2) { animation-delay: 60ms; }
.offer-grid > .pc:nth-child(3) { animation-delay: 120ms; }
.offer-grid > .pc:nth-child(4) { animation-delay: 180ms; }
.offer-grid > .pc:nth-child(n+5) { animation-delay: 240ms; }
.pc { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
@media (hover: hover) { .pc:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(15, 33, 51, 0.35); } }

@media (prefers-reduced-motion: reduce) {
  .offer-grid > .pc, .cx-watch-icon, .cx-video.is-preview .cx-video-play::after { animation: none; }
  .pc, .cx-btn { transition: none; }
  .pc:hover, .cx-btn:hover, .cx-btn:active { transform: none; }
}


/* Oct 19 funnel rebuild: Hoppy the frog looks over real offers in the hero (vector art, CSS
   animation, still under reduced motion), the sign-up box after the first three offers, locked
   offers that still show what you get, and one unlock box after the list. */
.hp-hero { padding-block: 28px 32px; }
.hp-hero-grid { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) {
  .hp-hero { padding-block: 64px; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'main scene' 'rest join'; column-gap: 48px; row-gap: 8px; align-items: start; }
  .hp-hero-main { grid-area: main; }
  .hp-hero-rest { grid-area: rest; }
  .hp-hero-join { grid-area: join; }
  .hp-scene { grid-area: scene; align-self: end; }
  .hp-hero h1 { font-size: 3rem; text-wrap: pretty; }
}
.hp-hero h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.hp-hero h1 em { display: block; font-style: normal; color: var(--brand); }
.hp-hero .cx-lede { margin-top: 14px; font-size: 17px; line-height: 26px; }
.hp-see { width: 100%; margin-top: 20px; font-size: 17px; }
@media (min-width: 560px) { .hp-see { width: auto; } }
.hp-proof { margin-top: 16px; font-size: 14px; }
.hp-scene { margin: 0; display: grid; gap: 6px; }
.hp-scene figcaption { text-align: center; font-size: 13px; color: var(--muted); }
/* Phones: Hoppy sits right under the headline, so the first screen shows what the site does */
@media (max-width: 899px) { .hp-scene { max-width: 400px; width: 100%; justify-self: center; } .hp-hero-grid { gap: 12px; } .hp-hero-rest .hp-quiz { margin-top: 8px; } }

.hero-scene{width:100%;height:auto;max-width:100%;display:block;overflow:visible}
.hero-scene .t1{font:700 12.5px "Plus Jakarta Sans",system-ui,sans-serif;fill:var(--text)}
.hero-scene .t2{font:600 11px "Plus Jakarta Sans",system-ui,sans-serif;fill:var(--brand-strong)}
.hero-scene *{animation-duration:7.5s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.hero-scene .arm2{transform-box:view-box;transform-origin:121px 160px;animation-name:scan2}
@keyframes scan2{0%,22%{transform:rotate(-39deg)}30%,48%{transform:rotate(-14deg)}56%,74%{transform:rotate(38deg)}88%,100%{transform:rotate(-39deg)}}
.hero-scene .pup{animation-name:look2}
@keyframes look2{0%,22%{transform:translate(3px,-4px)}30%,48%{transform:translate(5px,-1px)}56%,74%{transform:translate(4px,4px)}88%,100%{transform:translate(3px,-4px)}}
.hero-scene .eyes-happy{animation-name:happy}.hero-scene .eyes-open{animation-name:open}
@keyframes happy{0%,11%{opacity:0}12%,18%{opacity:1}19%,37%{opacity:0}38%,44%{opacity:1}45%,63%{opacity:0}64%,70%{opacity:1}71%,79%{opacity:0}80%,94%{opacity:1}95%,100%{opacity:0}}
@keyframes open{0%,11%{opacity:1}12%,18%{opacity:0}19%,37%{opacity:1}38%,44%{opacity:0}45%,63%{opacity:1}64%,70%{opacity:0}71%,79%{opacity:1}80%,94%{opacity:0}95%,100%{opacity:1}}
.hero-scene .eye{transform-box:fill-box;transform-origin:center;animation:blink2 3.7s infinite}
@keyframes blink2{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.hero-scene .breathe{transform-box:view-box;transform-origin:74px 206px;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
.hero-scene .hop2{transform-box:view-box;transform-origin:74px 208px;animation-name:hop2}
@keyframes hop2{0%,10%{transform:none}12%{transform:scale(1.04,.95)}15%{transform:translateY(-6px)}18%,36%{transform:none}38%{transform:scale(1.04,.95)}41%{transform:translateY(-6px)}44%,62%{transform:none}64%{transform:scale(1.04,.95)}67%{transform:translateY(-6px)}70%,77%{transform:none}80%{transform:scale(1.09,.9)}84%{transform:translateY(-20px) scale(.95,1.07)}88%{transform:scale(1.08,.92)}91%,100%{transform:none}}
.hero-scene .ck2-1{transform-box:fill-box;transform-origin:center;transform:scale(0);animation-name:ck1;animation-timing-function:ease-out}
@keyframes ck1{0%,12.0%{transform:scale(0)}15.0%{transform:scale(1.3)}17.0%,93%{transform:scale(1)}97%,100%{transform:scale(0)}}
.hero-scene .c2-1 .c2r{animation-name:hl1}
@keyframes hl1{0%,11.0%{stroke:var(--line);stroke-width:1}12.0%,93%{stroke:#3ccf7a;stroke-width:2}97%,100%{stroke:var(--line);stroke-width:1}}
.hero-scene .cf1{transform-box:fill-box;transform-origin:center;opacity:0;animation-name:cf1;animation-timing-function:ease-out}
@keyframes cf1{0%,12.0%{opacity:0;transform:none}13.0%{opacity:1;transform:none}21.0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}100%{opacity:0}}
.hero-scene .ck2-2{transform-box:fill-box;transform-origin:center;transform:scale(0);animation-name:ck2;animation-timing-function:ease-out}
@keyframes ck2{0%,38.0%{transform:scale(0)}41.0%{transform:scale(1.3)}43.0%,93%{transform:scale(1)}97%,100%{transform:scale(0)}}
.hero-scene .c2-2 .c2r{animation-name:hl2}
@keyframes hl2{0%,37.0%{stroke:var(--line);stroke-width:1}38.0%,93%{stroke:#3ccf7a;stroke-width:2}97%,100%{stroke:var(--line);stroke-width:1}}
.hero-scene .cf2{transform-box:fill-box;transform-origin:center;opacity:0;animation-name:cf2;animation-timing-function:ease-out}
@keyframes cf2{0%,38.0%{opacity:0;transform:none}39.0%{opacity:1;transform:none}47.0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}100%{opacity:0}}
.hero-scene .ck2-3{transform-box:fill-box;transform-origin:center;transform:scale(0);animation-name:ck3;animation-timing-function:ease-out}
@keyframes ck3{0%,64.0%{transform:scale(0)}67.0%{transform:scale(1.3)}69.0%,93%{transform:scale(1)}97%,100%{transform:scale(0)}}
.hero-scene .c2-3 .c2r{animation-name:hl3}
@keyframes hl3{0%,63.0%{stroke:var(--line);stroke-width:1}64.0%,93%{stroke:#3ccf7a;stroke-width:2}97%,100%{stroke:var(--line);stroke-width:1}}
.hero-scene .cf3{transform-box:fill-box;transform-origin:center;opacity:0;animation-name:cf3;animation-timing-function:ease-out}
@keyframes cf3{0%,64.0%{opacity:0;transform:none}65.0%{opacity:1;transform:none}73.0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-scene *{animation:none!important}.hero-scene .ck2-1,.hero-scene .ck2-2,.hero-scene .ck2-3{transform:none}.hero-scene .arm2{transform:rotate(-14deg)}.hero-scene .eyes-happy{opacity:0}}
.hero-scene.is-paused * { animation-play-state: paused !important; }
.hp-anchor { position: relative; top: -90px; display: block; height: 0; }

/* The small Hoppy (founder note and unlock box): blinks and bobs gently */
.hoppy { display: block; width: 100%; height: auto; overflow: visible; }
.hoppy .fbody { transform-box: fill-box; transform-origin: 50% 100%; animation: hp-bob 3s ease-in-out infinite; }
.hoppy .eye { transform-box: fill-box; transform-origin: center; animation: blink2 4.2s infinite; }
@keyframes hp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }

/* The one sign-up box: right after the quiz, above the three open picks */
.hp-join { margin: 24px 0; max-width: 640px; border: 2px solid var(--brand); box-shadow: 0 18px 40px -22px rgba(15, 33, 51, 0.3); }
.hp-join h2 { font-size: 22px; line-height: 28px; }
.hp-tag { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hp-join .cx-join-sub strong { color: var(--text); }
.hp-welcome h2 { margin: 0 0 6px; }
.hp-welcome .cx-btn { width: 100%; }
.hp-notyou { margin: 12px 0 0; text-align: center; }
.hp-notyou button { min-height: 44px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hp-more:not(:empty) { margin-bottom: 0; }

/* Locked offers: name and what you get stay readable; the details blur until you join */
.cx-offers .pc.is-locked .pc-desc, .cx-offers .pc.is-locked .pc-pros, .cx-offers .pc.is-locked .pc-asks, .cx-offers .pc.is-locked .pc-meta { filter: blur(5px); user-select: none; }
.cx-offers .pc.is-locked .pc-btn { background: var(--brand-soft); color: var(--brand-strong); box-shadow: none; }
.cx-offers .pc.is-locked .pc-btn:hover { background: #d3ece3; color: var(--brand-strong); }
.pc.is-just-open { animation: hp-open 1.2s ease 0.6s both; }
@keyframes hp-open { 0% { box-shadow: 0 0 0 0 rgba(60, 207, 122, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(60, 207, 122, 0); } }

.hp-unlock { display: grid; justify-items: center; gap: 8px; margin-top: 32px; padding: 24px 20px; border-radius: 18px; background: #eef1f5; text-align: center; }
.hp-unlock[hidden] { display: none; }
.hp-unlock-frog { width: 64px; }
.hp-unlock h3 { margin: 0; font-size: 20px; font-weight: 800; }
.hp-unlock p { margin: 0 0 6px; color: var(--text-2); max-width: 40ch; }
.hp-unlock .cx-btn { width: 100%; max-width: 420px; }

/* How we check, and what's the catch */
.hp-how { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .hp-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.hp-steps { grid-template-columns: 1fr; }
.hp-founder { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding: 16px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; }
.hp-founder-frog { width: 64px; flex: none; }
.hp-founder p { margin: 0; font-size: 14px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.hp-founder strong { display: block; color: var(--text); font-size: 16px; }
.hp-turned { margin: 16px 0 0; padding-left: 12px; border-left: 3px solid #d99a2b; font-size: 15px; color: var(--text-2); }
.hp-turned strong { color: var(--text); }
.hp-catch h3 { margin: 20px 0 4px; font-size: 17px; }
.hp-catch p { margin: 0; color: var(--text-2); }

.hp-toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 60; transform: translate(-50%, -16px); opacity: 0; padding: 10px 18px; border-radius: 999px; background: var(--text); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.hp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .hoppy .fbody, .hoppy .eye, .pc.is-just-open { animation: none; }
  .hp-toast { transition: none; }
}
.cx-offers #grp-trial, .cx-offers #grp-deal { margin-top: 36px; }
.hp-more:empty { display: none; }
.hp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.hp-steps li::before { grid-row: span 2; margin: 0; }
.hp-join { margin-inline: auto; }

/* "What are you after?": the first thing to do on the page, one tap, no email */
.hp-quiz { margin-top: 20px; }
.hp-quiz-q { margin: 0 0 10px; font-weight: 800; font-size: 17px; }
.hp-quiz-q span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.hp-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hp-opt { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; }
.hp-opt:hover { border-color: var(--brand); box-shadow: 0 8px 20px -14px rgba(14, 122, 95, 0.6); }
.hp-opt:active { transform: scale(0.98); }
.hp-opt:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.hp-opt[aria-pressed="true"] { border-color: var(--brand); background: #e8f3ef; }
.hp-opt-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: #e8f3ef; color: var(--brand-strong); }
.hp-opt-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-opt-t { display: grid; min-width: 0; font-weight: 700; font-size: 15px; line-height: 19px; }
.hp-opt-t small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.hp-picked { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--brand-strong); font-weight: 600; }
.hp-picked button { min-height: 32px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hp-next { margin: 4px 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.hp-next li { padding-left: 14px; border-left: 3px solid var(--brand-soft); }
.hp-next strong { color: var(--text); }
.hp-next [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hp-opt { transition: none; } .hp-opt:active { transform: none; } }
#offers { scroll-margin-top: 64px; }
.hp-join-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; font-weight: 700; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.hp-join-link[hidden] { display: none; }

/* Oct 20 polish: soft glow on the sign-up box, 48px tap targets on phones */
.hp-join { box-shadow: 0 0 0 6px rgba(14, 122, 95, 0.08), 0 22px 48px -20px rgba(14, 122, 95, 0.45); }
@media (max-width: 899px) {
  .pc-btn, .pc-link, .hp-opt, .hp-join-link, .cx-faq summary, .hp-notyou button, #hp-change, .sbtn { min-height: 48px; }
  .pc-link, .hp-join-link, #hp-change { display: inline-flex; align-items: center; }
  .cx-join .consent input[type="checkbox"] { width: 24px; height: 24px; }
  body.smart .footer-legal { padding-bottom: 100px; }
  .site-footer .footer-nav a { display: inline-block; padding-block: 6px; }
}

/* "Your top pick" after joining: the one obvious next step */
.hp-toppick { display: grid; gap: 4px; margin: 14px 0; padding: 16px; border-radius: 14px; background: var(--brand-soft); border: 1px solid rgba(14, 122, 95, 0.25); text-align: left; }
.hp-toppick-k { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-strong); }
.hp-toppick-name { font-size: 18px; line-height: 24px; }
.hp-toppick-v { font-size: 14px; color: var(--text-2, var(--muted)); }
.hp-toppick .cx-btn { margin-top: 8px; width: 100%; }
.hp-toppick small { text-align: center; font-size: 12px; color: var(--muted); }
.hp-welcome .cx-btn-quiet { margin-top: 4px; }

/* Email and button side by side on wider screens; one column on phones */
.hp-joinrow { display: grid; gap: 8px; }
@media (min-width: 560px) { .hp-joinrow { grid-template-columns: minmax(0, 1fr) auto; } .hp-joinrow .cx-btn { width: auto; white-space: nowrap; } }
.hp-join .cx-promise { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.hp-join .form-error:empty { display: none; }

/* "You're in": one tap to their own inbox, then their picks */
.hp-inbox { display: grid; gap: 8px; margin: 14px 0 4px; }
.hp-inbox p { margin: 0; font-size: 14px; color: var(--text-2, var(--muted)); }
.hp-alsopick { margin: 10px 0 0; padding: 10px 0 0 18px; border-top: 1px solid rgba(14, 122, 95, 0.2); display: grid; gap: 6px; font-size: 14px; }
.hp-alsopick a { font-weight: 700; color: var(--brand-strong); }
.hp-links-after { margin: 4px 0 28px; }

/* Oct 20 desktop alignment: the hero's left column holds the words, checks and quiz with Hoppy
   centred beside them, and everything in the offers section shares one width (no ragged edges). */
@media (min-width: 900px) {
  .hp-hero-grid { grid-template-areas: 'main scene' 'join scene' 'rest scene'; grid-template-rows: auto auto 1fr; row-gap: 0; }
  .hp-scene { align-self: center; }
  .hp-hero-join .hp-proof { margin-top: 18px; }
  .hp-hero-rest .hp-quiz { margin-top: 28px; }
  .cx-offers .cx-disclose { max-width: none; }
  .cx-offers .hp-join { max-width: none; margin: 24px 0 32px; padding: 28px 32px; }
  .hp-join .optin { display: grid; max-width: none; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 48px; align-items: center; }
  .hp-join .hp-joinrow input { min-height: 52px; }
  .hp-join .hp-joinrow .cx-btn { min-height: 52px; }
  .hp-join .hp-join-form .cx-promise { text-align: left; }
  .hp-join .hp-join-copy h2 { margin-bottom: 8px; }
  .hp-join .hp-join-copy .cx-join-sub { margin-bottom: 0; }
}

/* Oct 20 research-based hero: words, the email box and the cartoon on the left; Hoppy checking
   today's top free offer on the right (below the box on phones). Compact: under ~520px tall. */
.brand .wm { font-weight: 800; letter-spacing: -0.03em; }
.brand .wm span { color: var(--brand); }
.hp-hero { padding-block: 22px 26px; }
.hp-hero-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-items: center; }
.hp-hero-main, .hp-hero-side { min-width: 0; grid-area: auto; }
.hp-hero h1 { font-size: clamp(1.9rem, 7.6vw, 3rem); }
.hp-hero .cx-lede { margin-top: 10px; font-size: 16px; line-height: 24px; max-width: 46ch; }
.hp-hero .hp-join { margin: 16px 0 0; padding: 0; max-width: 580px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hp-hero .hp-join .optin { display: block; max-width: none; }
.hp-hero .hp-join-copy { display: none; }
.hp-hero .hp-join .consent { margin: 10px 0 0; }
.hp-hero .hp-join .cx-promise { display: none; }
.hp-hero .hp-join:has(.hp-welcome:not([hidden])) { padding: 20px; border: 2px solid var(--brand); border-radius: 18px; background: #fff; }
.hp-hero .hp-join.is-flash { animation: none; }
.hp-hero .hp-joinrow input { min-height: 52px; }
.hp-hero .hp-joinrow .cx-btn { min-height: 52px; }
.hp-hero .hp-proof { margin-top: 12px; font-size: 13.5px; }
@media (min-width: 900px) {
  .hp-hero { padding-block: 40px 40px; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: none; grid-template-rows: none; column-gap: 56px; }
  .hp-hero h1 { font-size: 2.9rem; }
}

/* Hoppy checks one real offer */
.hc { position: relative; padding: 16px 0 4px 64px; max-width: 460px; margin-inline: auto; }
.hc[hidden] { display: none; }
@media (min-width: 900px) { .hc { padding: 20px 0 6px 150px; max-width: none; } }
.hc-card { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 33, 51, 0.05), 0 18px 36px -24px rgba(15, 33, 51, 0.35); }
.hc-top { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; }
.hc-chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); }
.hc-chip svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-name { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.hc-val { margin: 1px 0 0; font-size: 13.5px; font-weight: 700; color: var(--brand); }
.hc-facts { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.hc-facts li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.hc-tick { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.hc-tick svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); }
.hc-facts li.on .hc-tick { background: var(--brand); border-color: var(--brand); }
.hc-facts li.on .hc-tick svg { opacity: 1; transform: none; transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.hc-stamp { display: block; width: fit-content; margin: 10px 0 0 auto; padding: 5px 9px; border: 2px solid var(--brand); border-radius: 8px; color: var(--brand); background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1.2; text-align: center; text-transform: uppercase; transform: rotate(-6deg); }
.hc-stamp small { display: block; font-size: 9.5px; font-weight: 700; color: var(--text-2); letter-spacing: 0; text-transform: none; }
@media (min-width: 900px) { .hc-stamp { position: absolute; right: 12px; bottom: 12px; margin: 0; } }
.hc-note { margin: 8px 0 0; padding-left: 36px; font-size: 11.5px; color: var(--muted); }
@media (min-width: 900px) { .hc-note { padding-left: 0; } }
.hc-frog { position: absolute; left: -4px; bottom: 26px; width: 80px; overflow: visible; }
@media (min-width: 900px) { .hc-frog { width: 140px; bottom: 34px; } }
.hc-frog * { transform-box: fill-box; }
.hc-lens-layer { position: absolute; inset: 0; pointer-events: none; }
.hc-lens { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; overflow: visible; }
@media (min-width: 900px) { .hc-lens { width: 58px; height: 58px; margin: -29px 0 0 -29px; } }
@media (prefers-reduced-motion: reduce) { .hc-tick, .hc-facts li.on .hc-tick svg { transition: none; } }

/* "Watch: how we check offers": a captioned cartoon starring Hoppy */
.hv { margin-top: 14px; max-width: 580px; --hv-bg: #eef7f1; }
.hv-open { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hv-open:hover { border-color: var(--brand); }
.hv-thumb { position: relative; width: 52px; height: 44px; flex: none; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; }
.hv-thumb svg { width: 40px; height: 37px; }
.hv-thumb i { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff; }
.hv-thumb i::before { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hv-open-t { display: grid; gap: 2px; min-width: 0; }
.hv-open-t b { font-size: 14.5px; }
.hv-open-t small { font-size: 12.5px; color: var(--muted); }
.hv-open[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hv-player { padding: 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.hv-stage { display: block; width: 100%; height: auto; border-radius: 12px; }
.hv-cap { min-height: 3.2em; margin: 10px 2px 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text); }
.hv-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hv-btn { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hv-btn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hv-btn .hv-i-pause { display: none; fill: none; }
.hv-btn.is-playing .hv-i-pause { display: block; }
.hv-btn.is-playing .hv-i-play { display: none; }
.hv-prog { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.hv-prog i { display: block; width: 0; height: 100%; background: var(--brand); }
.hv-join { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; color: var(--brand-strong); font: 800 13.5px var(--font); cursor: pointer; }
.hv.is-done .hv-join { background: var(--brand); color: #fff; }

.hv-stage text { font-family: var(--font); fill: var(--text); }
.hv-t8 { font-size: 8px; font-weight: 700; } .hv-t9 { font-size: 9px; font-weight: 800; } .hv-t10 { font-size: 10px; font-weight: 800; }
.hv-t12 { font-size: 13px; font-weight: 800; } .hv-t16 { font-size: 15px; font-weight: 800; } .hv-t18 { font-size: 17px; font-weight: 800; }
.hv-stage .hv-w { fill: #fff; } .hv-stage .hv-red { fill: #c62828; } .hv-stage .hv-grn { fill: #0b5f4a; } .hv-stage .hv-mut { fill: #5b6b7b; }
.hv-ln { fill: #e7e3da; }
.hv-s { opacity: 0; transition: opacity .35s ease; }
.hv-s.on { opacity: 1; }
.hv-s * { transform-box: fill-box; transform-origin: center; }
.hv-stage.is-paused *, .hv-stage.is-paused { animation-play-state: paused !important; }
/* scene 1: the lens finds the fee in the small print */
.hv-s.on .hv-in-r { animation: hv-in-r .6s cubic-bezier(.22,1,.36,1) both; }
.hv-lens1 { transform-box: view-box; transform-origin: 0 0; }
.hv-s.on .hv-lens1 { animation: hv-lens1 3.4s cubic-bezier(.45,0,.25,1) .5s both; }
.hv-s.on .hv-pop1 { animation: hv-pop .5s cubic-bezier(.34,1.56,.64,1) 3.1s both; }
@keyframes hv-in-r { from { opacity: 0; transform: translateX(24px); } }
@keyframes hv-lens1 { 0% { transform: translate(112px, 120px); opacity: 0; } 15% { opacity: 1; } 45% { transform: translate(190px, 70px); } 75%, 100% { transform: translate(226px, 128px); opacity: 1; } }
@keyframes hv-pop { from { opacity: 0; transform: scale(.4); } }
/* scene 2: a card, a trial that ends, a charge */
.hv-s.on .hv-card2 { animation: hv-in-r .6s cubic-bezier(.22,1,.36,1) both; }
.hv-s.on .hv-cal { animation: hv-pop .5s cubic-bezier(.34,1.56,.64,1) 1s both; }
.hv-s.on .hv-charge { animation: hv-drop .6s cubic-bezier(.34,1.56,.64,1) 2.2s both; }
@keyframes hv-drop { from { opacity: 0; transform: translateY(-18px); } }
/* scene 3: reading every line, then signing up */
.hv-s.on .hv-doc { animation: hv-in-r .5s ease both; }
.hv-s.on .hv-ln { animation: hv-ln .3s ease both; }
.hv-s.on .hv-ln1 { animation-delay: .7s; } .hv-s.on .hv-ln2 { animation-delay: 1.1s; } .hv-s.on .hv-ln3 { animation-delay: 1.5s; }
.hv-s.on .hv-ln4 { animation-delay: 1.9s; } .hv-s.on .hv-ln5 { animation-delay: 2.3s; } .hv-s.on .hv-ln6 { animation-delay: 2.7s; }
@keyframes hv-ln { to { fill: #9fdcc0; } }
.hv-lens3 { transform-box: view-box; transform-origin: 0 0; }
.hv-s.on .hv-lens3 { animation: hv-lens3 2.6s linear .6s both; }
@keyframes hv-lens3 { 0% { transform: translate(196px, 48px); } 100% { transform: translate(196px, 118px); } }
.hv-s.on .hv-phone { animation: hv-in-r .6s cubic-bezier(.22,1,.36,1) 3.2s both; }
.hv-s.on .hv-ok3 { animation: hv-pop .45s cubic-bezier(.34,1.56,.64,1) 4.4s both; }
/* scene 4: the fee one is out, the free one is checked */
.hv-s.on .hv-out { animation: hv-stamp .45s ease-out 1s both; }
.hv-s.on .hv-bad { animation: hv-gone .7s ease-in 2.6s both; }
.hv-s.on .hv-in4 { animation: hv-stamp .45s ease-out 3s both; }
@keyframes hv-stamp { from { opacity: 0; transform: scale(1.8); } }
@keyframes hv-gone { to { opacity: .15; transform: translateY(16px) rotate(-6deg); } }
/* scene 5: the checked list lands in the inbox, once a week */
.hv-env { transform-box: view-box; transform-origin: 0 0; }
.hv-s.on .hv-inbox { animation: hv-in-r .5s ease both; }
.hv-s.on .hv-env { animation: hv-env 1.6s cubic-bezier(.45,0,.25,1) .6s both; }
@keyframes hv-env { 0% { transform: translate(120px, 110px) scale(.6); opacity: 0; } 20% { opacity: 1; } 80% { transform: translate(250px, 70px) scale(1); opacity: 1; } 100% { transform: translate(250px, 77px) scale(.2); opacity: 0; } }
.hv-s.on .hv-row { animation: hv-pop .45s cubic-bezier(.34,1.56,.64,1) 2.2s both; }
.hv-s.on .hv-week { animation: hv-pop .45s cubic-bezier(.34,1.56,.64,1) 3s both; }
/* Hoppy's mood in each scene */
.hv-frog { transform-box: fill-box; transform-origin: 50% 100%; }
.hv-frog[data-mood="look"] { animation: hv-look 2.8s ease-in-out infinite; }
.hv-frog[data-mood="shock"] { animation: hv-shock .6s ease-out 2.3s both; }
.hv-frog[data-mood="read"] { animation: hv-look 1.4s ease-in-out infinite; }
.hv-frog[data-mood="nod"] { animation: hv-nod .5s ease-in-out 3.1s 2; }
.hv-frog[data-mood="happy"] { animation: hv-hop .8s ease-out 2.2s 2; }
@keyframes hv-look { 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes hv-shock { 30% { transform: translateY(-10px) scale(1.04, .96); } 60% { transform: rotate(-6deg); } 100% { transform: rotate(-4deg); } }
@keyframes hv-nod { 50% { transform: translateY(4px) rotate(3deg); } }
@keyframes hv-hop { 20% { transform: scale(1.06, .92); } 50% { transform: translateY(-20px) scale(.96, 1.05); } 80% { transform: scale(1.04, .95); } }
@media (prefers-reduced-motion: reduce) { .hv-stage *, .hv-frog { animation: none !important; } .hv-s { transition: none; } .hv-lens1, .hv-lens3, .hv-env { transform: translate(-100px, -100px); } }

/* Oct 20 evening: calm, list-first homepage (top10.com pattern). A thin ad disclosure, a short
   hero, sticky group tabs, the numbered list with "Our top pick", then the email box after the
   open picks. Hoppy is small and only blinks. */
.hp-disc { padding: 7px 0; background: #f4f5f7; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
.hp-disc strong { color: var(--text-2); }
.hp-hero { padding-block: 22px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f2f9f5 0%, #fbfaf7 100%); }
.hp-hero-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
.hp-upd { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--brand-strong); letter-spacing: 0; text-transform: none; }
.hp-upd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #cdeadc; }
.hp-hero h1 { font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.hp-hero h1 em { display: inline; color: var(--brand); }
.hp-hero .cx-lede { margin-top: 10px; font-size: 15.5px; line-height: 1.55; max-width: 60ch; color: var(--text-2); }
.hp-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--text); }
.hp-trust li { display: flex; align-items: center; gap: 6px; }
.hp-trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7.5 12.2 3 3 6-6.4' fill='none' stroke='%230e7a5f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hp-note { display: none; }
@media (min-width: 900px) {
  .hp-hero { padding-block: 36px 28px; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: center; }
  .hp-hero h1 { font-size: 2.45rem; }
  .hp-note { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  .hp-note p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
  .hp-note strong { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--text); }
  .hp-note-frog svg { display: block; width: 72px; height: auto; }
}

.hp-tabs { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.hp-tabs .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.hp-tabs .wrap::-webkit-scrollbar { display: none; }
.hp-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--text-2); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.hp-tab small { font-size: 12px; font-weight: 600; opacity: 0.7; }
.hp-tab.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.hp-tab[hidden] { display: none; }
.cx-offers { padding-top: 20px; }
.cx-offers .cx-group { scroll-margin-top: 70px; }
.hp-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.hp-gh .cx-group-h { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.hp-gh p { margin: 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.hp-gnote { display: inline-block; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--brand-strong); }
.hp-gnote[hidden] { display: none; }
.cx-offers .cx-group + .cx-group, .hp-more + .cx-group { margin-top: 28px; }

/* The top pick */
.pc.is-top { position: relative; border: 2px solid var(--brand); padding-top: 28px; }
.pc-ribbon { position: absolute; top: -1px; left: 16px; padding: 3px 10px; border-radius: 0 0 8px 8px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pc.is-top .pc-rank { color: var(--brand); }
@media (min-width: 720px) { .pc.is-ranked.is-top { padding-top: 30px; } }

/* The email box, right after the open picks */
.cx-offers .hp-join { margin: 16px 0; max-width: none; padding: 20px 18px; border: 0; border-radius: 18px; background: #0f2133; color: #fff; box-shadow: none; }
.cx-offers .hp-join .optin { display: grid; gap: 14px; max-width: none; grid-template-columns: minmax(0, 1fr); }
.hp-join-frog { display: none; }
.cx-offers .hp-join h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; color: #fff; }
.cx-offers .hp-join .cx-join-sub { margin: 0; font-size: 14px; line-height: 1.5; color: #c8d3dd; }
.cx-offers .hp-join .cx-join-sub strong { color: #fff; }
.cx-offers .hp-join input[type="email"] { min-height: 50px; border: 0; }
.cx-offers .hp-join .cx-btn { min-height: 50px; background: #3ccf91; color: #06281d; box-shadow: none; }
.cx-offers .hp-join .cx-btn:hover { background: #5bdba5; color: #06281d; }
.cx-offers .hp-join .consent { margin: 10px 0 0; }
.cx-offers .hp-join .consent label { color: #c8d3dd; font-size: 12.5px; }
.cx-offers .hp-join .consent a { color: #fff; }
.cx-offers .hp-join .form-error { color: #ffb4a8; }
.cx-offers .hp-join .cx-promise { display: none; }
.cx-offers .hp-join.is-flash { animation: none; box-shadow: 0 0 0 4px rgba(60, 207, 145, 0.45); }
.cx-offers .hp-join .hp-welcome { color: #fff; }
.cx-offers .hp-join .hp-welcome p, .cx-offers .hp-join .hp-welcome li { color: #dbe4ec; }
.cx-offers .hp-join .hp-welcome a:not(.cx-btn) { color: #fff; }
.cx-offers .hp-join .hp-notyou button { color: #c8d3dd; }
.cx-offers .hp-join .hp-toppick { background: #fff; color: var(--text); }
.cx-offers .hp-join .hp-toppick * { color: inherit; }
@media (min-width: 900px) {
  .cx-offers .hp-join { padding: 26px 30px; }
  .cx-offers .hp-join .optin { grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: center; }
  .hp-join-frog { display: block; }
  .hp-join-frog svg { display: block; width: 92px; height: auto; }
  .cx-offers .hp-join .hp-joinrow { grid-template-columns: minmax(0, 1fr); }
  .cx-offers .hp-join .hp-joinrow .cx-btn { width: 100%; }
}

/* Hoppy only blinks, now and then */
.hp-note-frog .eye, .hp-join-frog .eye { transform-box: fill-box; transform-origin: center; animation: hp-blink 5.5s infinite; }
@keyframes hp-blink { 0%, 93%, 100% { transform: none; } 96% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) { .hp-note-frog .eye, .hp-join-frog .eye { animation: none; } }

/* The cartoon sits under "How an offer gets on this list", small */
#how .hv { max-width: 440px; margin-top: 18px; }