/* Mr. Predicto theme layer. Loaded after css/lp.css (the shared template).
   Palette: midnight purple + gold. Token names come from the template (choc = darkest brand color, etc). */
:root {
  --cream: #F8F5FF;
  --cream-2: #EEE7FB;
  --choc: #1F1245;
  --choc-2: #120A2B;
  --caramel: #7C4DFF;
  --toffee: #4B2A8C;
  --sun: #FFD23F;
  --ink: #18102E;
  --muted: #554A72;
  --shadow: 0 18px 40px -18px rgba(31, 18, 69, .45), 0 4px 12px -4px rgba(31, 18, 69, .15);
}
.hero, .final {
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(124,77,255,.55), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(75,42,140,.7), transparent 60%),
    linear-gradient(160deg, #0D0721 0%, var(--choc) 45%, #3A1F7A 100%);
}
.hero-glow { background: radial-gradient(circle, rgba(179,136,255,.4), rgba(124,77,255,.14) 45%, transparent 70%); }
.facts li, .step, .faq-item { box-shadow: 0 6px 18px -10px rgba(31,18,69,.35); }
.facts li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231F1245' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.review { border-color: rgba(124,77,255,.2); }
.band-in { background: radial-gradient(80% 120% at 100% 0%, rgba(255,210,63,.32), transparent 55%), linear-gradient(135deg, var(--choc), var(--toffee)); }
.collect-icon { background: #F1EAFF; box-shadow: inset 0 0 0 2px rgba(75,42,140,.15); }
.collect-card { border-color: rgba(75,42,140,.15); }
.demo-hint { color: var(--toffee); border-color: rgba(75,42,140,.2); }
.sticky { background: rgba(18,10,43,.93); }
.review-big::before { color: rgba(124,77,255,.28); }
.review-more:hover { color: var(--caramel); }

/* ---------- Hero: round orb instead of a tall pen ---------- */
.hero-orb { width: 100%; height: auto; max-height: none; aspect-ratio: 1; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.orb-float { width: 100%; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 899px) {
  .hero-grid { grid-template-columns: 1fr 40%; gap: 4px 8px; padding-top: 34px; padding-bottom: 32px; }
  .hero-h { font-size: clamp(36px, 10.4vw, 64px); margin-top: 12px; }
  .hero-sub { font-size: clamp(16px, 4.3vw, 21px); margin-top: 12px; }
  .hero-visual { align-self: center; }
  .slide-float { padding: 10px 8px 22px; background: radial-gradient(closest-side, rgba(179,136,255,.32), rgba(179,136,255,0)); }
  .slide-float .hero-orb { height: auto; max-height: none; width: 100%; filter: drop-shadow(0 8px 6px rgba(0,0,0,.4)); }
  .hero-cta { margin-top: 18px; }
}
@media (max-width: 400px) {
  .hero-grid { grid-template-columns: 1fr 39%; }
  .hero-copy .rating { font-size: 14px; }
}
/* Square photo slots everywhere (listing art is 1:1, nothing gets cropped) */
.strip-slide { aspect-ratio: 1; }
.photo-sq { aspect-ratio: 1; background: #fff; }
@media (min-width: 900px) {
  .carousel { --w: min(500px, 40vw); }
  .car-track { aspect-ratio: 1; }
  .slide-float .pen-float { width: 84%; height: auto; }
  .slide-float { background: radial-gradient(closest-side, rgba(179,136,255,.34), rgba(179,136,255,0)); }
  /* shadow kept small so the clipped car-track never shows a faint box (Poop Pen v6 lesson) */
  .slide-float .hero-orb { height: auto; width: 100%; filter: drop-shadow(0 14px 12px rgba(0,0,0,.42)); }
  .car-btn { top: calc(var(--w) * .5 - 24px); }
  .thumb { width: 64px; height: 64px; }
}

/* ---------- Ask Mr. Predicto demo ---------- */
.demo {
  color: #fff;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(124,77,255,.45), transparent 70%),
    linear-gradient(180deg, #120A2B, #1F1245 60%, #160C33);
}
.demo .h2 { color: #fff; }
.demo .lead { color: rgba(240,234,255,.85); }
.demo .demo-hint { background: rgba(255,255,255,.1); color: #E9E1FF; border-color: rgba(255,255,255,.18); }
.demo-note { margin: 14px auto 0; max-width: 460px; font-size: 14px; color: rgba(233,225,255,.7); font-weight: 600; }
.demo { padding-bottom: 64px; }
.demo + .pen { padding-top: 76px; }
@media (min-width: 900px) { .demo { padding-bottom: 90px; } .demo + .pen { padding-top: 110px; } }
.demo-stage { width: min(72vw, 320px); }
@media (min-width: 900px) { .demo-stage { width: 400px; } }
.demo-ring { inset: -4%; background: radial-gradient(circle, var(--glow, rgba(255,210,63,.4)), rgba(0,0,0,0) 68%); transition: background .2s; }
.demo-stage[data-glow="yes"] { --glow: rgba(74,222,128,.75); }
.demo-stage[data-glow="no"] { --glow: rgba(255,72,72,.75); }
.demo-stage[data-glow="maybe"] { --glow: rgba(179,108,255,.8); }
.demo-stage[data-glow="off"] { --glow: rgba(255,210,63,.32); }
.orb-btn { padding: 0; transform-origin: 50% 60%; }
.orb-layer { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; opacity: 0; transition: opacity .12s linear; pointer-events: none; }
.orb-layer[data-orb="off"] { opacity: 1; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.orb-layer.on { opacity: 1; }
.demo-btn.squish { animation: orbpop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes orbpop { 0% { transform: scale(1); } 30% { transform: scale(.92); } 65% { transform: scale(1.05); } 100% { transform: scale(1); } }
.wizard-pop {
  position: absolute; left: -16%; bottom: -6%; height: 48%; width: auto; z-index: 2; pointer-events: none;
  opacity: 0; transform: translateY(24px) scale(.6) rotate(-8deg); transform-origin: 50% 100%;
  transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); filter: drop-shadow(0 8px 10px rgba(0,0,0,.4));
}
.wizard-pop.show { opacity: 1; transform: none; }
.puffs { top: 50%; }
.puff { background: radial-gradient(circle at 35% 35%, #fff, #D9C8FF 70%); box-shadow: 0 0 14px rgba(179,136,255,.7); width: 18px; height: 18px; left: -9px; top: -9px; line-height: 18px; }
.puff:nth-child(3n+1) { width: 44px; height: 44px; left: -22px; top: -22px; line-height: 44px; font-size: 28px; }
.answer { margin: 22px auto 0; min-height: 96px; max-width: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.answer-cat:empty { display: none; }
.answer-cat {
  display: inline-block; font: 900 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
}
.answer[data-cat="yes"] .answer-cat { background: #22C55E; color: #052e16; }
.answer[data-cat="no"] .answer-cat { background: #FF5A5F; color: #3b0507; }
.answer[data-cat="maybe"] .answer-cat { background: #B388FF; color: #1F1245; }
.answer-txt { font-size: clamp(22px, 6.4vw, 32px); font-weight: 900; line-height: 1.15; color: #fff; text-wrap: balance; }
.answer.in .answer-txt, .answer.in .answer-cat { animation: ansIn .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ansIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.tapme { top: -10%; right: -12%; }
.orb-btn .tapme-arrow, .demo-stage .tapme-arrow { display: none; }

/* ---------- Gifts, steps, final ---------- */
.gifts { background: var(--cream-2); }
.gift-media { background: #1F1245; }
.final-orb { height: auto; width: min(62vw, 260px); transform: none; animation: float 5.5s ease-in-out infinite; filter: drop-shadow(0 20px 24px rgba(0,0,0,.45)) drop-shadow(0 0 46px rgba(74,222,128,.45)); }
@media (min-width: 900px) { .final-orb { width: 420px; height: auto; } }
.step-ic { background: linear-gradient(145deg, var(--caramel), var(--toffee)); }
.answer:not([data-cat]) .answer-txt { font-size: 20px; color: rgba(233,225,255,.8); }

/* 360-400px header: keep the brand name and the buy link on one line each */
.topbar-link, .brand-name { white-space: nowrap; }
@media (max-width: 400px) {
  .topbar-link { font-size: 13px; }
  .brand-name { font-size: 13px; letter-spacing: .04em; }
  .brand { gap: 8px; }
}

/* Phones: stack the hero so the orb is big (was ~120px beside the headline at 360).
   Order: eyebrow, headline, orb, sub, rating, buy box, photo strip. */
@media (max-width: 599px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding-top: 30px; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; justify-self: start; font-size: 11px; padding: 6px 11px; }
  .hero-h { order: 2; font-size: clamp(38px, 11.2vw, 52px); margin-top: 12px; }
  .hero-visual { order: 3; justify-self: center; width: min(66vw, 280px); margin: 4px 0 -6px; }
  .hero-sub { order: 4; margin-top: 4px; }
  .hero-copy .rating { order: 5; margin-top: 10px; }
  .hero-cta { order: 6; margin-top: 16px; }
  .hero-strip { order: 7; }
  .slide-float { padding: 8px 6px 20px; }
}

/* v2: block sideways scroll on iOS too (body-only overflow-x is ignored there) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }