/* Funnel design v3: "the reel, continued".
   Paper-white page the art sits on directly; pencil for the visitor's voice, ink for the peak self.
   Tokens come from build.py per brand: --paper --ink --graphite --pencil --rule --glow --him --display */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;font-weight:600;
  line-height:1.45;min-height:100vh;-webkit-font-smoothing:antialiased;
}
.page{max-width:460px;margin:0 auto;padding:22px 20px 40px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.screen{display:none}
.screen.on{display:block;animation:arrive .35s ease-out}
@keyframes arrive{from{opacity:0}to{opacity:1}}

/* ---------- the two voices ---------- */
.line{font-size:19px;line-height:1.4;margin:0 0 14px}
.line.you{color:var(--graphite);font-weight:700;width:82%}
.line.him{color:var(--him);font-weight:700;width:88%;margin-left:12%}
.line.heavy{font-size:24px;line-height:1.3;font-weight:900}
.line.ask{font-size:27px;line-height:1.25;font-weight:900;width:100%;margin:0 0 26px}
.talk{margin:28px 0 8px}

/* ---------- typing bubble (chat.js): three dots that stretch into the message ---------- */
.line{position:relative}
.typing{
  position:absolute;left:0;top:0;width:58px;height:32px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:5px;pointer-events:none;
  background:var(--bubble);
}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--dot)}
.line.you .typing{--bubble:#efefef;--dot:var(--graphite)}
.line.him .typing{--bubble:var(--him);--dot:var(--paper)}
/* Hide the intro until GSAP plays it, so nothing flashes on load. chat.js drops this class if it can't animate. */
.anim #s-intro .line{visibility:hidden}

/* ---------- art: multiply onto the paper so the glow shows through the white ---------- */
.art{position:relative;margin:4px -20px 0}
.art:before{
  content:"";position:absolute;right:6%;top:2%;width:46%;height:92%;
  background:radial-gradient(closest-side,var(--glow),transparent);opacity:.55;
}
.art img{position:relative;display:block;width:100%;height:auto;mix-blend-mode:multiply}
.art-small{margin:-6px 30px 0}

/* ---------- intro ---------- */
.stage{padding-top:28px}
.title{
  font-family:var(--display);font-weight:var(--display-weight);text-transform:var(--display-case);
  font-size:48px;line-height:.95;letter-spacing:var(--display-track);text-align:center;margin:18px 0 22px;
}
.note{font-size:13.5px;color:var(--pencil);text-align:center;margin-top:12px;font-weight:600}

/* ---------- buttons ---------- */
.ink{
  display:block;width:100%;padding:18px 20px;border-radius:12px;
  background:var(--ink);color:var(--paper);
  font-size:18px;font-weight:900;text-align:center;text-decoration:none;letter-spacing:.2px;
  transition:transform .1s ease;
}
.ink:active{transform:scale(.985)}
.quiet{display:block;margin:20px auto 0;font-size:15px;font-weight:700;color:var(--pencil);text-decoration:underline;text-underline-offset:4px}
.quiet.link{display:inline-block;margin:2px 0 0 12%;color:var(--him)}

/* ---------- quiz: question, then the replies right under it ---------- */
body.focus footer{display:none}
body.focus .page{padding-bottom:calc(20px + env(safe-area-inset-bottom))}

.meter{display:flex;align-items:center;gap:12px;margin:0 0 30px;min-height:44px}
.back{
  width:44px;height:44px;margin-left:-12px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink);flex:none;
}
.back:active{background:var(--rule)}
.track{flex:1;height:3px;border-radius:3px;background:var(--rule);position:relative;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);border-radius:3px;transition:width .4s ease}
.count{font-size:13px;color:var(--pencil);font-variant-numeric:tabular-nums;font-weight:800;min-width:34px;text-align:right}

/* Replies are the visitor's message bubbles: tail bottom-left, outlined until tapped, then inked. */
.answers{display:grid;gap:10px}
.answer{
  position:relative;display:block;width:100%;min-height:58px;padding:16px 18px;
  text-align:left;color:var(--ink);font-size:17px;font-weight:700;line-height:1.35;
  background:var(--paper);border:1.5px solid var(--edge);border-radius:20px 20px 20px 6px;
  overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,border-color .12s ease;
}
.answer:active{transform:scale(.985);border-color:var(--ink)}
.answer:after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out;
}
.answer.picked{color:var(--paper);border-color:var(--ink)}
.answer.picked:after{transform:scaleX(1)}
.pause{padding:40px 0 0}
.pause .ink{margin-top:8px}
.pause .ink + .note{margin-bottom:4px}
.field-label{display:block;font-size:13px;color:var(--pencil);font-weight:800;margin-bottom:6px}
.field{width:100%;padding:16px;border:0;border-bottom:2px solid var(--ink);font:inherit;font-size:19px;background:transparent;color:var(--ink);margin-bottom:18px;border-radius:0}
.field.bad{border-color:#c4372f}


/* ---------- result ---------- */
.verdict{text-align:center;margin-top:8px}
.verdict .line.him{width:auto;margin:0 0 2px;font-size:17px;color:var(--pencil)}
.type{
  font-family:var(--display);font-weight:var(--display-weight);text-transform:var(--display-case);
  font-size:68px;line-height:.9;letter-spacing:var(--display-track);color:var(--him);
}
.sub{font-size:18px;font-weight:800;color:var(--graphite);margin-top:10px}
#r-echo .line.you:before{content:"You said: ";color:var(--pencil);font-weight:700}

.tonight{
  margin:30px 0 6px;padding:20px 18px 18px;border:1.5px solid var(--ink);border-radius:14px;position:relative;
}
.tonight .tag{
  position:absolute;top:-11px;left:14px;padding:0 8px;background:var(--paper);
  font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
}
.tonight p{font-size:18px;font-weight:800;line-height:1.4}

/* ---------- offer ---------- */
.offer{margin-top:34px;padding-top:30px;border-top:1px solid var(--rule)}
.cover{display:block;width:calc(100% + 40px);margin:0 -20px 22px;height:auto}
.offer.has-cover .product{display:none}
.product{
  font-family:var(--display);font-weight:var(--display-weight);text-transform:var(--display-case);
  font-size:38px;line-height:.98;letter-spacing:var(--display-track);margin-bottom:14px;
}
.days{list-style:none;margin:18px 0 18px}
.days li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px;font-weight:700;color:var(--pencil)}
.days li b{min-width:46px;font-size:13px;font-weight:900;color:var(--pencil);font-variant-numeric:tabular-nums}
.days li.open{color:var(--ink)}
.days li.open b{color:var(--ink)}
.days li.more{justify-content:flex-start;font-size:14px}
.facts{list-style:none;margin:0 0 22px}
.facts li{padding:6px 0 6px 18px;position:relative;font-size:15.5px;color:var(--graphite);font-weight:700}
.facts li:before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.price b{font-family:var(--display);font-weight:var(--display-weight);font-size:56px;line-height:1;letter-spacing:var(--display-track)}
.price span{font-size:14.5px;color:var(--graphite);font-weight:700}
.soon{padding:16px 0;font-size:17px;font-weight:800;color:var(--graphite)}
.inapp{display:none}

/* ---------- sticky buy ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),var(--paper) 40%);display:none;z-index:5}
.sticky .ink{max-width:420px;margin:0 auto}
body.has-sticky .sticky{display:block}
body.has-sticky .page{padding-bottom:120px}

footer{margin-top:46px;font-size:12px;color:var(--pencil);text-align:center;line-height:1.6;font-weight:600}
footer a{color:var(--pencil)}

@media (max-width:370px){.line.ask{font-size:24px}.type{font-size:58px}.title{font-size:42px}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}