/* ============================================================
   paws web app — design system (1:1 with the iOS Theme tokens)
   ============================================================ */
:root{
  /* Backgrounds */
  --sky:        #5EBEFF;   /* hero / primary */
  --sky-select: #A8DCFF;
  --sky-load:   #3DB1FF;
  --pink:       #FD7AC4;
  --name-bg-bot:#F0F9FF;

  /* CTA */
  --ink:        #000000;
  --blue-text:  #49B5FF;

  /* Gold */
  --gold-top:   #FFEC95;
  --gold-bot:   #E0B700;
  --ring-gold:  #FFD500;

  /* Cards (cream unselected / maroon selected — Frame 338) */
  --cream:      #FFF5EF;
  --cream-tile: #FFE4D2;
  --maroon:     #3E1515;
  --maroon-tile:#754444;
  --maroon-border:#F5A1A1;

  --card-unsel: #F2F2F2;
  --row-unsel:  #F5F5F5;
  --tile-unsel: #EBEBEB;
  --tile-green: #C0FBC5;
  --tile-blue:  #C0EBFB;
  --tile-purple:#E3BAFE;
  --gender-blue:#C0EBFB;
  --gender-pink:#FBC0D1;

  /* Text greys */
  --title:      #444444;
  --sub:        #949494;
  --footer:     #B4B4B4;
  --chat-bg:    #EFF5FF;
  --field-border:#E2E8F2;

  --cta-h: 60px;
  --cta-r: 129px;
  --card-r: 28px;
  --panel-r: 28px;

  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
/* solid paws blue behind everything, incl. iOS safe areas / overscroll (no white bars) */
html{background:#56B9FC;}
body{
  font-family:var(--rounded);
  color:#fff;
  /* solid paws blue — brand #5EBEFF, only a hair deeper at the base so it stays saturated (never washes out) */
  background:linear-gradient(180deg,#5EBEFF 0%, #4FB3F7 100%);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---- paws sky: very subtle floating hearts, paws + soft gradient blobs ---- */
.skybg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
/* soft blurred colour blobs (pink / purple), barely there */
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;}
.blob-pink{width:38vw; height:38vw; left:-8vw; top:26vh; background:radial-gradient(circle, rgba(255,150,205,.55), rgba(255,150,205,0) 68%);}
.blob-purple{width:30vw; height:30vw; right:-4vw; top:34vh; background:radial-gradient(circle, rgba(170,150,255,.5), rgba(170,150,255,0) 68%);}
/* faint oversized paw prints */
.deco-paw{position:absolute; opacity:.1; will-change:transform;}
.deco-paw.p1{--r:14deg; width:170px; top:16vh; right:5vw; animation:floatA 16s ease-in-out infinite alternate;}
.deco-paw.p2{--r:-8deg; width:120px; top:50vh; right:9vw; opacity:.08; animation:floatA 20s ease-in-out infinite alternate;}
.deco-paw.p3{--r:-18deg; width:150px; bottom:8vh; left:4vw; opacity:.08; animation:floatA 22s ease-in-out infinite alternate;}
/* small floating hearts */
.deco-heart{position:absolute; color:rgba(255,255,255,.5); font-size:22px; will-change:transform;}
.deco-heart.h1{top:22vh; left:14vw; font-size:26px; animation:floatB 9s ease-in-out infinite alternate;}
.deco-heart.h2{top:40vh; left:7vw; font-size:18px; color:rgba(255,180,220,.55); animation:floatA 11s ease-in-out infinite alternate;}
.deco-heart.h3{top:30vh; right:16vw; font-size:20px; color:rgba(190,170,255,.55); animation:floatA 12s ease-in-out infinite alternate;}
.deco-heart.h4{bottom:20vh; right:12vw; font-size:24px; animation:floatB 10s ease-in-out infinite alternate;}
@keyframes floatA{from{transform:translateY(0) rotate(var(--r,0deg));} to{transform:translateY(-16px) rotate(var(--r,0deg));}}
@keyframes floatB{from{transform:translateY(0);} to{transform:translateY(14px);}}
@media (prefers-reduced-motion: reduce){ .skybg *{animation:none !important;} }

button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,textarea{font-family:inherit;}
img{display:block;}

/* ---- app shell: a centered phone-width column ---- */
#app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
/* Every screen is full-bleed (its background spans the viewport); the inner
   content sits in a centered, readable column — a real web layout, not a
   phone-width strip floating on a colored page. */
.screen{
  width:100%;
  min-height:100dvh;
  display:none;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
}
/* every screen eases in with a gentle spring */
.screen.active{display:flex; animation:screenIn .5s cubic-bezier(.34,1.26,.5,1) both;}
@keyframes screenIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}

/* landing: a choreographed, staggered on-load reveal (each piece springs up) */
.landing.active{animation:none;}
.landing.active .nav     {animation:revealUp .7s cubic-bezier(.34,1.5,.5,1) .02s both;}
.landing.active .stars   {animation:revealUp .7s cubic-bezier(.34,1.5,.5,1) .14s both;}
.landing.active .badge   {animation:revealUp .7s cubic-bezier(.34,1.5,.5,1) .22s both;}
.landing.active .hero-h1 {animation:revealUp .8s cubic-bezier(.34,1.5,.5,1) .3s both;}
.landing.active .hero-sub{animation:revealUp .7s cubic-bezier(.34,1.5,.5,1) .42s both;}
.landing.active .cta3d   {animation:revealPop .75s cubic-bezier(.34,1.56,.64,1) .52s both;}
.landing.active .trust   {animation:revealUp .6s ease .64s both;}
.landing.active .proof   {animation:revealUp .75s cubic-bezier(.34,1.5,.5,1) .68s both;}
.landing.active .land-foot{animation:revealUp .6s ease .74s both;}
/* the headline's underline draws itself in */
.landing.active .scribble path{stroke-dasharray:320; stroke-dashoffset:320; animation:draw .7s ease .66s forwards;}
@keyframes revealUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
@keyframes revealPop{0%{opacity:0; transform:translateY(18px) scale(.9);} 100%{opacity:1; transform:none;}}
@keyframes draw{to{stroke-dashoffset:0;}}

#account, #paywall, #building, #gate{ padding:0 20px; }
.pane, #paywall .footer-cta{
  width:100%; max-width:440px; margin-left:auto; margin-right:auto;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* soft cloud backdrop on blue screens */
.sky-bg{background:transparent; color:#fff;}   /* the fixed sky shows through */
.light-bg{background:transparent;}

/* ============================================================
   CTA pill (black primary, white secondary)
   ============================================================ */
.cta{
  width:100%;
  height:var(--cta-h);
  border-radius:var(--cta-r);
  background:var(--ink);
  color:#fff;
  font-size:18px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  transition:transform .12s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.cta:active{transform:scale(.97);}
.cta:disabled{opacity:.35; box-shadow:none;}
.cta.white{background:#fff; color:var(--blue-text);}
.cta.blue{background:var(--sky); color:#fff;}
.cta.ghost{background:transparent; box-shadow:none; color:var(--sub); font-weight:700; height:auto; padding:12px;}
.sky-bg .cta.ghost{color:rgba(255,255,255,.85);}

.footer-cta{position:sticky; bottom:0; padding:14px 0 max(18px, env(safe-area-inset-bottom)); background:linear-gradient(to top, rgba(255,255,255,.92) 60%, rgba(255,255,255,0));}
.sky-bg .footer-cta{background:linear-gradient(to top, rgba(94,190,255,.96) 60%, rgba(94,190,255,0));}

/* ============================================================
   SECRET GATE
   ============================================================ */
#gate{align-items:center; justify-content:center;}
.gate-center{flex:1; display:flex; align-items:center; justify-content:center;}
.gate-logo{
  width:min(104px, 30vw);
  border-radius:26px;
  cursor:pointer;
  user-select:none; -webkit-user-select:none;
  transition:transform .09s ease;
  box-shadow:0 18px 40px rgba(0,40,80,.28);
}
.gate-logo:active{transform:scale(.9);}
.gate-logo.tap{animation:gateTap .18s ease;}
@keyframes gateTap{0%{transform:scale(.9);} 60%{transform:scale(1.08);} 100%{transform:scale(1);}}

/* ============================================================
   LANDING (new splash)
   ============================================================ */
.landing{
  display:none;                 /* .screen.active overrides */
  width:100%; min-height:100dvh;
  background:transparent;       /* the sky shows through */
  align-items:center;
}
.landing.active{display:flex; flex-direction:column; align-items:center; justify-content:flex-start;}
/* nav stays pinned at top; everything else centers in the remaining height (like craybox) */
.land-body{width:100%; margin:auto 0; display:flex; flex-direction:column; align-items:center;}

.nav{width:100%; max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:22px 34px 6px;}
.brand{display:flex; align-items:center; gap:8px;}
.brand img{width:26px; height:26px; filter:drop-shadow(0 2px 6px rgba(10,55,100,.2));}
.brand span{font-weight:900; font-size:23px; letter-spacing:-.6px; color:#fff; text-shadow:0 1px 6px rgba(10,55,100,.22);}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-link{font-size:16px; font-weight:700; color:rgba(255,255,255,.95); text-decoration:none; text-shadow:0 1px 6px rgba(10,55,100,.2);}
.nav-link:hover{opacity:.8;}

/* centered hero column (craybox) — compact, not obnoxious */
.hero{width:100%; max-width:640px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(16px,3vw,32px) 24px 6px;}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:8px 16px; margin-bottom:20px; backdrop-filter:blur(8px); text-shadow:0 1px 5px rgba(10,55,100,.2);}
.badge .spark{color:#FFE05A; font-size:13px;}
.badge .s{color:#FFE05A; letter-spacing:2px; font-size:14px; text-shadow:0 1px 3px rgba(0,40,80,.22);}

.hero-h1{font-size:clamp(30px,5vw,50px); font-weight:900; line-height:1.03; letter-spacing:-1.4px; color:#fff; margin:0; text-shadow:0 3px 18px rgba(8,52,98,.22);}
.hl{position:relative; color:#fff; white-space:nowrap;}
.scribble{position:absolute; left:-2%; bottom:-.3em; width:104%; height:.42em; overflow:visible;}
.scribble path{fill:none; stroke:#FFE05A; stroke-width:5; stroke-linecap:round;}
.scribble path.s2{stroke:#FFE05A; stroke-width:4; opacity:.7;}
.hero-sub{font-size:clamp(15px,1.15vw,17px); font-weight:600; color:rgba(255,255,255,.95); line-height:1.5; max-width:560px; margin:20px 0 0; text-shadow:0 1px 8px rgba(8,52,98,.2);}

.cta3d{
  margin-top:26px; width:100%; max-width:360px;
  height:62px; border-radius:18px;
  background:#fff; color:#2f9fe8; font-size:18px; font-weight:900; letter-spacing:-.2px;
  box-shadow:0 6px 0 #c3def2, 0 16px 30px rgba(10,60,110,.26);
  transition:transform .08s ease, box-shadow .08s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.cta3d:active{transform:translateY(4px); box-shadow:0 2px 0 #c3def2, 0 6px 14px rgba(10,60,110,.24);}
.cta3d .arr{transition:transform .15s;}
.cta3d:hover{transform:translateY(-1px);}
.cta3d:hover .arr{transform:translateX(3px);}
.cta3d.wide{max-width:400px;}
.trust{font-size:12.5px; font-weight:700; color:rgba(255,255,255,.9); margin-top:14px; text-shadow:0 1px 6px rgba(8,52,98,.2);}

/* narrower, centered slider (craybox): ~3 cards visible, not edge-to-edge */
.proof{width:100%; max-width:1000px; margin:16px auto 0; padding:0 20px;}
.proof-row{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.proof-track{display:flex; gap:22px; width:max-content; padding:30px 0 32px; animation:slide 46s linear infinite;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(calc(-50% - 11px));}}
/* a pet photo + name sit atop a frosted-glass conversation card */
.pcard{flex:0 0 296px; background:rgba(255,255,255,.2); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); border:1px solid rgba(255,255,255,.32); border-radius:22px; box-shadow:0 16px 44px -14px rgba(15,65,115,.3); padding:15px; display:flex; flex-direction:column; gap:10px;}
.pc-head{display:flex; align-items:center; gap:12px; padding:1px 1px 3px;}
.pc-photo{width:50px; height:50px; border-radius:15px; object-fit:cover; flex:0 0 auto; border:2.5px solid rgba(255,255,255,.9); box-shadow:0 6px 16px rgba(10,50,95,.25);}
.pc-name{font-size:15px; font-weight:800; color:#fff; line-height:1.2; text-shadow:0 1px 5px rgba(10,55,100,.25);}
.pc-name span{display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85);}
@media (prefers-reduced-motion: reduce){ .proof-track{animation:none;} }
.pc-u{align-self:flex-end; background:rgba(56,164,240,.95); color:#fff; font-size:13.5px; font-weight:700; padding:9px 13px; border-radius:15px 15px 4px 15px; max-width:90%; box-shadow:0 4px 12px rgba(20,90,160,.22);}
.pc-p{display:flex; gap:8px; align-items:flex-start; background:#fff; color:#1f3240; font-size:13.5px; font-weight:600; line-height:1.38; padding:10px 13px; border-radius:15px 15px 15px 4px; box-shadow:0 4px 12px rgba(15,65,115,.12);}
.pc-p img{width:17px; height:17px; flex:0 0 auto; margin-top:1px;}
.proof-cap{text-align:center; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.9); margin:20px 0 0; text-shadow:0 1px 6px rgba(8,52,98,.2);}
/* as seen on */
.seen{margin:10px auto 0; text-align:center;}
.seen-label{display:block; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:12px;}
.seen-logos{display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap;}
.seen-logos img{height:21px; width:auto; filter:brightness(0) invert(1); opacity:.92;}

/* ============================================================
   WELCOME MODAL — instant social proof on Start
   ============================================================ */
.modal-wrap{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(16,70,125,.5); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);}
.modal-wrap.show{display:flex; animation:fadeIn .25s ease both;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal-card{width:100%; max-width:452px; background:#fff; border-radius:30px; box-shadow:0 34px 90px rgba(0,45,95,.4); padding:44px 30px 30px; text-align:center; animation:modalPop .42s cubic-bezier(.34,1.4,.5,1) both;}
@keyframes modalPop{from{opacity:0; transform:translateY(26px) scale(.95);} to{opacity:1; transform:none;}}
/* scattered pet photos, varied sizes + tilts, each pops in */
.pet-ring{display:flex; justify-content:center; align-items:center; margin-bottom:24px; padding-top:6px;}
.pet-ring img{border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 8px 20px rgba(10,50,95,.24); margin-left:-14px; position:relative; transform:rotate(var(--rot,0deg)); animation:petPop .55s cubic-bezier(.3,1.5,.5,1) both;}
.pet-ring img:first-child{margin-left:0;}
.pet-ring img:nth-child(1){--rot:-9deg; width:52px; height:52px; margin-top:16px; animation-delay:.05s;}
.pet-ring img:nth-child(2){--rot:6deg;  width:64px; height:64px; margin-top:-10px; z-index:2; animation-delay:.14s;}
.pet-ring img:nth-child(3){--rot:-5deg; width:80px; height:80px; margin-top:4px;  z-index:3; animation-delay:.23s;}
.pet-ring img:nth-child(4){--rot:8deg;  width:62px; height:62px; margin-top:-14px; z-index:2; animation-delay:.32s;}
.pet-ring img:nth-child(5){--rot:-11deg; width:50px; height:50px; margin-top:18px; animation-delay:.41s;}
@keyframes petPop{0%{opacity:0; transform:scale(0) rotate(-30deg);} 70%{transform:scale(1.14) rotate(calc(var(--rot,0deg) + 5deg));} 100%{opacity:1; transform:scale(1) rotate(var(--rot,0deg));}}
.modal-title{font-size:28px; font-weight:900; color:#15293a; margin:0 0 10px; letter-spacing:-.7px;}
.modal-sub{font-size:15px; font-weight:600; color:#5a6b7a; line-height:1.45; margin:0 auto 20px; max-width:350px;}
.modal-list{list-style:none; margin:0 auto 24px; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; max-width:310px;}
.modal-list li{display:flex; align-items:flex-start; gap:11px; font-size:15px; font-weight:700; color:#243441;}
.modal-list li::before{content:"✓"; width:24px; height:24px; border-radius:50%; background:var(--tile-green); color:#1E9E52; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.modal-list li span{padding-top:2px;}
.modal-list b{color:var(--blue-text);}
.modal-cta{height:58px; border-radius:16px; background:var(--sky); color:#fff; box-shadow:0 5px 0 #2f9fe8, 0 10px 20px rgba(47,159,232,.26); gap:8px;}
.modal-cta:active{transform:translateY(4px); box-shadow:0 1px 0 #2f9fe8;}
.modal-cta .arr{transition:transform .15s;}
.modal-cta:hover .arr{transform:translateX(3px);}
.modal-skip{display:block; width:100%; background:none; color:#9bb0c2; font-size:14px; font-weight:700; margin-top:12px; padding:6px;}
.modal-skip:hover{color:#6b7a88;}

.land-foot{width:100%; max-width:600px; margin:30px auto 0; padding:22px 24px max(30px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:14px;}
.foot-links{font-size:12px; font-weight:600; color:rgba(255,255,255,.82); text-align:center; line-height:1.5;}
.foot-links a{color:#fff; text-decoration:underline;}

/* mobile: fit the whole splash on screen without scrolling (compact like desktop) */
@media (max-width:600px){
  .nav{padding:14px 18px 2px;}
  .brand span{font-size:19px;}
  .brand img{width:21px; height:21px;}
  .nav-links{gap:20px;}
  .nav-link{font-size:14px;}
  .hero{padding:8px 22px 2px;}
  .badge{margin-bottom:12px; padding:7px 15px; font-size:13px;}
  .hero-h1{font-size:28px; letter-spacing:-1px; line-height:1.05;}
  .hero-sub{font-size:13.5px; line-height:1.4; margin-top:12px;}
  .cta3d{margin-top:16px; height:54px; font-size:16.5px;}
  .trust{margin-top:9px; font-size:11.5px;}
  .proof{margin-top:8px;}
  .proof-track{padding:18px 0 20px;}        /* gap stays 22 so the loop is seamless */
  .pcard{flex:0 0 262px; padding:13px; gap:8px;}
  .pc-photo{width:42px; height:42px;}
  .pc-name{font-size:14px;}
  .pc-name span{font-size:12px;}
  .pc-u{font-size:13px; padding:8px 12px;}
  .pc-p{font-size:12.5px; padding:9px 12px;}
  .seen{margin-top:6px;}
  .seen-label{margin-bottom:8px;}
  .seen-logos{gap:24px;}
  .seen-logos img{height:18px;}
}

/* persistent paws wordmark across the funnel (so screens never feel dead) */
.funnel-brand{display:flex; align-items:center; gap:9px; padding:18px 0 2px; flex:0 0 auto; z-index:2;}
.funnel-brand img{width:30px; height:30px; border-radius:9px; box-shadow:0 4px 12px rgba(0,40,80,.2);}
.funnel-brand span{font-weight:900; font-size:19px; letter-spacing:-.5px; color:#fff; text-shadow:0 1px 6px rgba(10,55,100,.22);}

/* ============================================================
   QUIZ  (one clean card on the light sky — like Laura's)
   ============================================================ */
.quizscreen{display:none; background:transparent; padding:clamp(12px,3vh,32px) 20px; justify-content:flex-start;}
.quizscreen.active{display:flex; flex-direction:column; align-items:center;}

.quiz-card{
  width:100%; max-width:540px; margin:auto; position:relative;
  min-height:min(560px, 86vh);           /* stable size — no jarring resize between questions */
  /* soft light-blue frosted glass (not stark white) */
  background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.6); border-radius:30px;
  box-shadow:0 24px 58px rgba(0,55,105,.18);
  padding:86px 24px 26px;                 /* top room for the pinned progress bar */
  display:flex; flex-direction:column; justify-content:flex-start;  /* top-anchored: question stays put between screens (no shifting) */
}
.quizscreen.active .quiz-card{animation:cardIn .45s cubic-bezier(.3,1,.5,1) both;}  /* only on entering the quiz, not per-question */
@keyframes cardIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
/* gentle blur-fade when the quiz is over, so the jump to building isn't abrupt */
.quizscreen.leaving .quiz-card{animation:quizOut .6s ease forwards;}
@keyframes quizOut{to{opacity:0; filter:blur(12px); transform:translateY(-6px) scale(.97);}}
#building.active{animation:bldIn .85s ease both;}
@keyframes bldIn{from{opacity:0; filter:blur(16px);} to{opacity:1; filter:blur(0);}}

.quiz-bar{position:absolute; top:22px; left:24px; right:24px; display:flex; align-items:center; gap:14px;}
.back-btn{width:38px; height:38px; border-radius:50%; background:#EEF3F8; color:#45586a; font-size:21px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s;}
.back-btn:hover{background:#e2eaf2;}

/* progress: label + count + smooth fill */
.prog{flex:1;}
.prog-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px;}
.prog-top #plabel{font-size:12px; font-weight:800; color:#49b5ff; letter-spacing:.6px; text-transform:uppercase;}
.prog-top #pcount{font-size:12.5px; font-weight:800; color:#aab7c4;}
.pbar{height:8px; border-radius:5px; background:#EBF1F7; overflow:hidden;}
.pfill{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#5EBEFF,#49B5FF); width:0; transition:width .55s cubic-bezier(.33,1,.4,1);}

.q-prompt{font-size:clamp(23px, 5.6vw, 28px); font-weight:900; line-height:1.14; letter-spacing:-.5px; margin:6px 0 6px; white-space:pre-line; color:#15293a; text-align:center;}
.q-sub{font-size:14.5px; font-weight:600; color:#7a8794; margin:0 0 18px; line-height:1.35; text-align:center;}
.q-prompt{animation:qIn .28s ease both;}
@keyframes qIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.q-body > *{animation:fadeItem .3s ease both;}
.q-body > *:nth-child(2){animation-delay:.04s;}
.q-body > *:nth-child(3){animation-delay:.08s;}
.q-body > *:nth-child(4){animation-delay:.12s;}
.q-body > *:nth-child(5){animation-delay:.16s;}
@keyframes fadeItem{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}

.q-body{display:flex; flex-direction:column; gap:10px; margin-top:22px; margin-bottom:10px;}

/* answer rows (light grey on the white card, blue when chosen) */
.choice{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px;
  background:#F3F7FB;
  border-radius:16px;
  border:2px solid #E8EEF5;
  text-align:left; width:100%;
  transition:border-color .15s, background .15s, transform .1s ease;
}
.choice:hover{border-color:#CFE6F8; background:#EEF4FA;}
.choice:active{transform:scale(.985);}
.choice .emoji{width:46px; height:46px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; flex:0 0 auto;}
/* gender symbols: bold, colored, centered in the tile */
.choice .emoji.sym{font-size:30px; font-weight:900; padding-bottom:2px;}
.choice .ctext{display:flex; flex-direction:column; gap:1px; min-width:0;}
.choice .clabel{font-size:17px; font-weight:800; color:#1f3042;}
.choice .cnote{font-size:13px; font-weight:600; color:#8795a2; line-height:1.3;}
.choice.sel{background:#EAF6FF; border-color:var(--sky);}
.choice .check{margin-left:auto; width:25px; height:25px; border-radius:50%; border:2px solid #D3DDE7; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; transition:all .15s;}
.choice.sel .check{background:var(--sky); border-color:var(--sky); color:#fff;}

/* text field */
.q-field{width:100%; height:58px; background:#F3F7FB; border-radius:14px; border:2px solid #E6EDF4; font-size:17px; font-weight:700; color:#1f3042; padding:0 18px; outline:none; transition:border-color .15s, background .15s;}
.q-field:focus{border-color:var(--sky); background:#fff;}
.q-field::placeholder{color:#AEBCC9; font-weight:600;}
textarea.q-field{height:110px; padding:15px 18px; resize:none; line-height:1.4;}

/* breed type-ahead dropdown */
.combo{position:relative; width:100%;}
.combo-menu{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid #E6EDF4; border-radius:16px; box-shadow:0 20px 44px rgba(10,55,105,.2); max-height:252px; overflow-y:auto; z-index:20; padding:6px; -webkit-overflow-scrolling:touch;}
.combo-menu::-webkit-scrollbar{width:8px;}
.combo-menu::-webkit-scrollbar-thumb{background:#DCE6F0; border-radius:8px;}
.combo-opt{display:block; width:100%; text-align:left; padding:12px 14px; border-radius:11px; font-size:16px; font-weight:700; color:#1f3042; background:none; transition:background .12s;}
.combo-opt:hover{background:#EFF6FD;}

/* number stepper */
.stepper-group{display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 0 14px;}
.stepper{display:flex; align-items:center; justify-content:center; gap:22px; padding:12px 0;}
.stepper.dim{opacity:.35; pointer-events:none; filter:grayscale(.4);}
.step-btn{width:60px; height:60px; border-radius:50%; background:#F2F7FC; color:var(--sky); border:2px solid #E6EDF4; font-size:28px; font-weight:800; display:flex; align-items:center; justify-content:center; transition:transform .1s, background .15s;}
.step-btn:hover{background:#E8F4FF;}
.step-btn:active{transform:scale(.9);}
.step-val{min-width:132px; text-align:center;}
.step-num{font-size:56px; font-weight:900; color:#15293a; line-height:1; animation:numPop .34s cubic-bezier(.3,1.7,.5,1);}
@keyframes numPop{0%{transform:scale(.55); opacity:.3;} 60%{transform:scale(1.16);} 100%{transform:scale(1); opacity:1;}}
.step-unit{font-size:13px; font-weight:700; color:#8795a2; margin-top:5px; text-transform:uppercase; letter-spacing:.5px;}
/* lb / kg toggle */
.unit-toggle{display:inline-flex; background:#EEF4FA; border-radius:999px; padding:4px; gap:2px;}
.unit-toggle button{padding:7px 20px; border-radius:999px; font-size:14px; font-weight:800; color:#7a8794; transition:all .15s;}
.unit-toggle button.on{background:var(--sky); color:#fff; box-shadow:0 3px 8px rgba(47,159,232,.3);}
/* not sure pill */
.not-sure{padding:9px 18px; border-radius:999px; background:#F2F7FC; border:2px solid #E6EDF4; font-size:14px; font-weight:800; color:#7a8794; transition:all .15s;}
.not-sure.on{background:#EAF6FF; border-color:var(--sky); color:var(--blue-text);}
.not-sure:hover{background:#E8F4FF;}
/* weight slider (drag, so no endless +/- clicking) */
.weightpick{display:flex; flex-direction:column; align-items:center; gap:16px; padding:6px 0 14px; width:100%;}
.weight-num{display:flex; align-items:baseline; gap:7px; justify-content:center;}
.weight-num .step-num{font-size:56px;}
.weight-unit{font-size:19px; font-weight:800; color:#8795a2; text-transform:uppercase; letter-spacing:.5px;}
.weight-slider{-webkit-appearance:none; appearance:none; width:100%; max-width:330px; height:12px; border-radius:7px; background:linear-gradient(90deg,#5EBEFF,#9BD8FF); outline:none; margin:2px 0;}
.weight-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; background:#fff; border:3px solid var(--sky); box-shadow:0 5px 14px rgba(47,159,232,.45); cursor:pointer; transition:transform .1s;}
.weight-slider::-webkit-slider-thumb:active{transform:scale(1.12);}
.weight-slider::-moz-range-thumb{width:32px; height:32px; border:3px solid var(--sky); border-radius:50%; background:#fff; box-shadow:0 5px 14px rgba(47,159,232,.45); cursor:pointer;}
.weight-scale{display:flex; justify-content:space-between; width:100%; max-width:330px; font-size:12px; font-weight:700; color:#aab7c4;}

/* Continue — inside the card */
#qNext{margin-top:4px; width:100%; background:var(--sky); color:#fff; border-radius:16px; height:58px; font-size:17px; box-shadow:0 5px 0 #2f9fe8, 0 10px 20px rgba(47,159,232,.26);}
#qNext:hover{transform:translateY(-1px);}
#qNext:active{transform:translateY(4px); box-shadow:0 1px 0 #2f9fe8;}
#qNext:disabled{background:#CFE6F8; box-shadow:none; opacity:1; color:#fff; transform:none;}

/* ============================================================
   "FEEL SEEN" INTERSTITIAL — pattern-break beats between questions
   ============================================================ */
#interstitial{display:none; background:transparent; padding:clamp(12px,3vh,32px) 20px; justify-content:flex-start; align-items:center;}
#interstitial.active{display:flex; flex-direction:column;}
.inter-card{
  position:relative; width:100%; max-width:480px; margin:auto;
  /* hugs its content — no forced tall min-height (was leaving a big empty top that read as 'clipped') */
  background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:30px; box-shadow:0 30px 64px -20px rgba(0,55,105,.3);
  padding:56px 32px 36px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
#interstitial.active .inter-card{animation:interIn .55s cubic-bezier(.34,1.4,.5,1) both;}
#interstitial.active .inter-card.social{animation:bldIn .9s ease both;}  /* slow blur-in for the social-proof moment */
@keyframes interIn{from{opacity:0; transform:translateY(22px) scale(.97);} to{opacity:1; transform:none;}}
.inter-bar{position:absolute; top:22px; left:24px; right:auto;}
.inter-emoji{font-size:62px; line-height:1; margin-bottom:8px; animation:interPop .6s cubic-bezier(.34,1.7,.5,1) .12s both;}
/* big banner image on the social-proof beat */
.inter-photo{width:100%; max-width:420px; height:226px; border-radius:26px; object-fit:cover; object-position:center 30%; margin-bottom:20px; border:6px solid #fff; box-shadow:0 30px 60px -26px rgba(10,50,95,.32); animation:photoIn .75s cubic-bezier(.22,1,.36,1) .1s both;}
@keyframes photoIn{from{opacity:0; transform:scale(.92); filter:blur(8px);} to{opacity:1; transform:none; filter:blur(0);}}
/* no back arrow on the social-proof beat */
.inter-card.social .inter-bar{display:none;}
@keyframes interPop{0%{opacity:0; transform:scale(.4) rotate(-12deg);} 100%{opacity:1; transform:none;}}
.inter-tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#49b5ff; background:#EAF6FF; border-radius:999px; padding:6px 14px; margin-bottom:14px; animation:fadeItem .4s ease .24s both;}
.inter-title{font-size:clamp(25px,6vw,31px); font-weight:900; line-height:1.14; letter-spacing:-.6px; color:#15293a; margin:0 0 12px; animation:fadeItem .45s ease .3s both;}
.inter-title b{color:var(--blue-text);}
.inter-body{font-size:16px; font-weight:600; color:#54707f; line-height:1.5; max-width:420px; margin:0 0 26px; animation:fadeItem .45s ease .38s both;}
/* social-proof variant: big number */
.inter-card.social .inter-emoji{font-size:52px;}
.inter-card.social .inter-title{font-size:clamp(42px,11vw,60px); color:var(--blue-text); letter-spacing:-1.8px; line-height:1;}
.inter-cta{background:var(--sky); color:#fff; border-radius:16px; height:58px; max-width:300px; box-shadow:0 5px 0 #2f9fe8, 0 10px 20px rgba(47,159,232,.26); animation:fadeItem .45s ease .46s both;}
.inter-cta:hover{transform:translateY(-1px);}
.inter-cta:active{transform:translateY(4px); box-shadow:0 1px 0 #2f9fe8;}

/* ============================================================
   INTERSTITIAL (building profile)
   ============================================================ */
#building{align-items:center; justify-content:flex-start;}
.build-wrap{margin:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:28px;}
.build-card{width:100%; max-width:440px; background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); border:1px solid rgba(255,255,255,.6); border-radius:28px; box-shadow:0 24px 56px rgba(0,55,105,.17); padding:34px 26px; text-align:center;
  animation:cardIn .5s cubic-bezier(.34,1.28,.5,1) both;}
/* craybox-style sliding testimonials under the building card */
.testi-row{width:100%; max-width:720px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.testi-track{display:flex; gap:22px; width:max-content; padding:4px 0; animation:slide 42s linear infinite;}
.testi{flex:0 0 272px; background:#FFF2CC; border:1px solid rgba(200,150,40,.2); border-radius:20px; padding:16px 18px; box-shadow:0 14px 30px -10px rgba(150,110,30,.3); text-align:left;}
.testi:nth-child(3n+2){background:#FBE3B6;}
.testi:nth-child(3n+3){background:#F0E0BC;}
.testi-stars{font-size:13px; letter-spacing:1px; margin-bottom:9px;}
.testi p{margin:0 0 12px; font-size:14px; font-weight:600; color:#5a4529; line-height:1.42;}
.testi-by{display:flex; align-items:center; gap:9px;}
.testi-av{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:900; color:#fff; flex:0 0 auto; box-shadow:0 3px 7px rgba(150,100,20,.25);}
.av1{background:linear-gradient(135deg,#F0B34A,#D6923A);} .av2{background:linear-gradient(135deg,#D6923A,#B9792A);} .av3{background:linear-gradient(135deg,#E8A542,#C98A2E);} .av4{background:linear-gradient(135deg,#C98A2E,#A86F22);}
.testi-by span:last-child{font-size:12.5px; font-weight:800; color:#8a5a1e;}
@media (prefers-reduced-motion: reduce){ .testi-track{animation:none;} }
.build-logo{width:76px; height:76px; border-radius:50%; background:var(--sky); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 10px 24px rgba(47,159,232,.35); animation:pulse 1.4s ease-in-out infinite;}
.build-logo img{width:38px; height:38px;}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
.build-title{font-size:23px; font-weight:900; color:#15293a; margin:0 0 18px; letter-spacing:-.4px;}
.build-title span{color:var(--blue-text);}
.build-bar{height:10px; border-radius:6px; background:#EBF1F7; overflow:hidden; margin-bottom:20px;}
.build-fill{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#5EBEFF,#49B5FF); transition:width .3s linear;}
/* single current-step line that pops when it changes */
.build-step{font-size:15.5px; font-weight:800; color:#2f9fe8; text-align:center; min-height:22px; margin-top:2px;}
.build-step.pop{animation:stepPop .42s cubic-bezier(.3,1.6,.5,1);}
@keyframes stepPop{0%{opacity:0; transform:translateY(7px) scale(.95);} 100%{opacity:1; transform:none;}}

/* ============================================================
   ACCOUNT + PAYWALL  (light)
   ============================================================ */
#account{justify-content:flex-start;}
#paywall{justify-content:flex-start; padding-top:clamp(20px,4vh,46px);}
#account{position:relative;}
#account .quiz-head{position:absolute; top:max(14px,env(safe-area-inset-top)); left:18px; z-index:2;}
#account .quiz-bar{padding:0;}
.pane{display:flex; flex-direction:column; gap:15px; padding:26px 0; width:100%; max-width:440px;}
/* account = one clean card */
#account .pane{background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); border:1px solid rgba(255,255,255,.6); border-radius:28px; box-shadow:0 24px 56px rgba(0,55,105,.17); padding:30px 24px; margin:auto; gap:13px;
  animation:cardIn .5s cubic-bezier(.34,1.28,.5,1) both;}
.pane-icon{width:62px; height:62px; border-radius:18px; margin:0 auto 2px; box-shadow:0 10px 24px rgba(0,60,110,.16);}
.pane-title{font-size:clamp(25px,6.5vw,30px); font-weight:900; text-align:center; line-height:1.12; letter-spacing:-.5px; margin:0; color:#15293a;}
.pane-sub{font-size:15px; font-weight:600; color:#2b4961; text-align:center; line-height:1.4; margin:0 auto; max-width:320px;}

.field-stack{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.err{color:#D64545; font-size:13.5px; font-weight:700; text-align:center;}
.err:empty{display:none;}
.switch-line{font-size:14.5px; font-weight:700; text-align:center; color:#8696a6;}
.switch-line a{color:var(--blue-text); text-decoration:none;}

/* account + paywall primary buttons = solid blue (pop on white/light) */
#acctBtn, #payBtn{background:var(--sky); color:#fff; border-radius:16px; box-shadow:0 5px 0 #2f9fe8, 0 12px 22px rgba(47,159,232,.26);}
#acctBtn:active, #payBtn:active{transform:translateY(4px); box-shadow:0 1px 0 #2f9fe8;}
#acctBtn:disabled{opacity:.5;}

/* ===== PAYWALL as a single card: photo on top, chart, pricing ===== */
#paywall{justify-content:flex-start; padding:clamp(14px,3vh,34px) 20px 44px;}
.pay-card{width:100%; max-width:452px; margin:auto; background:#fff; border-radius:30px; box-shadow:0 30px 72px rgba(0,50,100,.24); overflow:hidden;
  animation:cardIn .5s cubic-bezier(.34,1.28,.5,1) both;}
.pay-hero{position:relative; height:158px; overflow:hidden;}
.pay-hero img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.pay-hero .pay-ready{position:absolute; left:50%; bottom:12px; transform:translateX(-50%);}
.pay-body{padding:24px 24px 24px; display:flex; flex-direction:column; gap:14px;}
.pay-ready{display:inline-block; font-size:13px; font-weight:800; color:#1E9E52; background:#fff; border-radius:999px; padding:8px 15px; box-shadow:0 8px 20px rgba(10,60,110,.2); white-space:nowrap;}
.pay-title{font-size:clamp(23px,6vw,28px); font-weight:900; text-align:center; line-height:1.14; letter-spacing:-.5px; margin:0; color:#15293a;}
.pay-title span{color:var(--blue-text);}
.pay-sub{font-size:14.5px; font-weight:600; color:#5a6b7a; text-align:center; line-height:1.4; margin:0 auto; max-width:330px;}
.pet-recap{background:#F7FAFD; border:1px solid #E6EFF7; border-radius:16px; padding:13px 15px; display:flex; flex-direction:column; gap:8px;}
.recap-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:700; color:#2b3a47; line-height:1.35; text-align:left;}
.recap-row .ri{flex:0 0 auto; width:20px; text-align:center; font-size:15px;}
.recap-row b{color:var(--blue-text);}

/* confidence chart */
.pay-chart{background:#F6FAFE; border:1px solid #E6EFF7; border-radius:16px; padding:15px 15px 12px;}
.chart-head{font-size:13px; font-weight:800; color:#2b3a47; text-align:center; line-height:1.32; margin-bottom:8px;}
.chart-svg{width:100%; height:118px; display:block;}
.chart-svg .grid{stroke:#E2EBF3; stroke-width:1; stroke-dasharray:3 4;}
.chart-svg .line{fill:none; stroke-width:4; stroke-linecap:round;}
.chart-svg .line-p{stroke:#2f9fe8;}
.chart-svg .line-g{stroke:#F2994A;}
.chart-svg .dot-p{fill:#2f9fe8;}
.chart-svg .dot-g{fill:#F2994A;}
#paywall.active .chart-svg .line{stroke-dasharray:640; stroke-dashoffset:640; animation:draw 1.2s ease .35s forwards;}
#paywall.active .chart-svg .dot{opacity:0; animation:fadeItem .4s ease 1.35s both;}
#paywall.active .chart-svg .area{opacity:0; animation:fadeItem .7s ease 1s both;}
.chart-x{display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:#9bb0c2; margin-top:3px; padding:0 6px;}
.chart-legend{display:flex; justify-content:center; gap:18px; margin-top:9px;}
.chart-legend .lg{font-size:12px; font-weight:800; display:flex; align-items:center; gap:6px;}
.chart-legend .lg::before{content:""; width:10px; height:10px; border-radius:50%;}
.chart-legend .lg-p{color:#2f9fe8;} .chart-legend .lg-p::before{background:#2f9fe8;}
.chart-legend .lg-g{color:#E08A3C;} .chart-legend .lg-g::before{background:#F2994A;}

/* pricing with strikethrough */
.price-row{display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap;}
.price-strike{font-size:21px; font-weight:800; color:#b4c0cc; text-decoration:line-through;}
.price-num{font-size:46px; font-weight:900; color:#15293a; letter-spacing:-1px;}
.price-per{font-size:16px; font-weight:700; color:var(--sub);}
.price-badge{font-size:12px; font-weight:900; color:#fff; background:#E54D6A; border-radius:999px; padding:5px 11px; align-self:center; box-shadow:0 5px 14px rgba(229,77,106,.3);}
.perks{display:flex; flex-direction:column; gap:11px; margin:2px 0;}
.perk{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; color:#243441;}
.perk .tick{width:25px; height:25px; border-radius:50%; background:var(--tile-green); color:#1E9E52; display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto;}
/* urgency timer */
.pay-timer{text-align:center; font-size:13.5px; font-weight:800; color:#C0392B; background:#FFF0ED; border:1px solid #FBD5CD; border-radius:12px; padding:9px 12px; margin:2px 0;}
.pay-timer b{color:#C0392B;}
/* mini reviews */
.pay-reviews{display:flex; flex-direction:column; gap:10px; margin:2px 0;}
.prev{background:#F7FAFD; border:1px solid #E6EFF7; border-radius:14px; padding:12px 14px;}
.pr-top{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.pr-av{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#fff; flex:0 0 auto;}
.pr-name{font-size:13px; font-weight:800; color:#2b3a47;}
.pr-stars{font-size:11px; margin-left:auto; letter-spacing:1px;}
.prev p{margin:0; font-size:13.5px; font-weight:600; color:#4a5a67; line-height:1.4;}
.pay-btn{height:60px; border-radius:16px; gap:8px; margin-top:4px;}
.pay-btn .arr{transition:transform .15s;}
.pay-btn:hover .arr{transform:translateX(3px);}
.fine{font-size:11.5px; font-weight:600; color:#90a0ae; text-align:center; line-height:1.4; margin:6px 0 0;}
.fine a{color:#7d8f9d; text-decoration:underline;}

/* ============================================================
   "PLAN IS READY" transition (pure blue, blur-in)
   ============================================================ */
#ready{align-items:center; justify-content:center;}
.ready-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:24px;}
.ready-check{width:92px; height:92px; border-radius:50%; background:rgba(255,255,255,.18); border:2.5px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 40px rgba(8,52,98,.25); animation:readyPop .6s cubic-bezier(.34,1.6,.5,1) .1s both;}
.ready-check svg{width:46px; height:46px; fill:none; stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .55s ease .5s forwards;}
@keyframes readyPop{0%{opacity:0; transform:scale(.4);} 100%{opacity:1; transform:scale(1);}}
.ready-text{font-size:clamp(28px,7vw,42px); font-weight:900; color:#fff; letter-spacing:-.8px; line-height:1.12; margin:0; text-shadow:0 2px 16px rgba(8,52,98,.25); animation:blurIn .9s ease .55s both;}
.ready-text span{color:#FFE05A;}
.ready-sub{font-size:16px; font-weight:600; color:rgba(255,255,255,.9); margin:0; text-shadow:0 1px 8px rgba(8,52,98,.2); animation:blurIn .9s ease .85s both;}
@keyframes blurIn{from{opacity:0; filter:blur(16px); transform:translateY(8px);} to{opacity:1; filter:blur(0); transform:none;}}

/* ============================================================
   PRIZE WHEEL
   ============================================================ */
#wheel{justify-content:flex-start; padding:clamp(16px,3vh,34px) 20px 40px; position:relative;}
.wheel-wrap{margin:auto; width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;}
.wheel-title{font-size:clamp(24px,6vw,30px); font-weight:900; color:#fff; letter-spacing:-.6px; margin:0; text-shadow:0 2px 12px rgba(8,52,98,.24);}
.wheel-sub{font-size:14.5px; font-weight:600; color:rgba(255,255,255,.92); margin:0 0 18px; text-shadow:0 1px 6px rgba(8,52,98,.2);}
.wheel-stage{position:relative; width:min(320px,80vw); height:min(320px,80vw); margin-bottom:22px;}
.wheel-pointer{position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:26px solid #fff; z-index:5; filter:drop-shadow(0 4px 6px rgba(10,50,95,.3));}
.wheel{position:absolute; inset:0; border-radius:50%; border:8px solid #fff; box-shadow:0 20px 50px rgba(8,52,98,.35), inset 0 0 0 2px rgba(255,255,255,.4);
  background:conic-gradient(#8AD0FF 0deg 45deg,#5EBEFF 45deg 90deg,#FFE05A 90deg 135deg,#5EBEFF 135deg 180deg,#8AD0FF 180deg 225deg,#5EBEFF 225deg 270deg,#8AD0FF 270deg 315deg,#5EBEFF 315deg 360deg);
  will-change:transform;}
.wedge{position:absolute; top:0; left:50%; width:84px; margin-left:-42px; height:50%; transform-origin:bottom center; transform:rotate(calc(var(--i)*45deg + 22.5deg)); display:flex; justify-content:center; pointer-events:none;}
.wedge b{display:block;}
.wedge{padding-top:16px; font-size:12px; font-weight:800; color:#1b4a6b; line-height:1;}
.wedge b{font-size:18px; font-weight:900; color:#13395a;}
.wedge.win b, .wedge.win{color:#8a5a00;}
.wheel-hub{position:absolute; top:50%; left:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%; background:var(--sky); border:4px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(10,50,95,.3); z-index:3; transform:none;}
.wheel-hub img{width:26px; height:26px;}
.wheel-btn{width:100%; max-width:300px; height:60px; border-radius:16px; background:#fff; color:#2f9fe8; font-weight:900; box-shadow:0 6px 0 #c3def2, 0 16px 30px rgba(10,60,110,.26);}
.wheel-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #c3def2;}
.wheel-btn:disabled{opacity:.9;}
/* result overlay */
.wheel-result{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(16,70,125,.55);}
.wheel-result.show{display:flex; animation:fadeIn .25s ease both;}
.wr-card{width:100%; max-width:400px; background:#fff; border-radius:28px; box-shadow:0 34px 90px rgba(0,45,95,.4); padding:34px 28px 26px; text-align:center; animation:modalPop .45s cubic-bezier(.34,1.5,.5,1) both;}
.wr-emoji{font-size:54px; line-height:1; margin-bottom:8px; animation:petPop .6s cubic-bezier(.3,1.6,.5,1) .1s both;}
.wr-title{font-size:28px; font-weight:900; color:#15293a; margin:0 0 10px; letter-spacing:-.5px;}
.wr-title span{color:#E54D6A;}
.wr-sub{font-size:14.5px; font-weight:600; color:#5a6b7a; line-height:1.45; margin:0 auto 22px; max-width:320px;}
.wr-cta{height:58px; border-radius:16px; background:var(--sky); color:#fff; box-shadow:0 5px 0 #2f9fe8, 0 10px 20px rgba(47,159,232,.26); gap:8px;}
.wr-cta:active{transform:translateY(4px); box-shadow:0 1px 0 #2f9fe8;}

/* ============================================================
   CHAT
   ============================================================ */
#chat{background:var(--chat-bg); padding:0; min-height:100dvh; align-items:center;}
.chat-head, .chat-scroll, #suggest, .composer{width:100%; max-width:760px; margin-left:auto; margin-right:auto;}
.chat-head{display:flex; align-items:center; gap:10px; padding:max(14px,env(safe-area-inset-top)) 18px 12px; border-bottom:1px solid rgba(0,0,0,.06); background:rgba(239,245,255,.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:5;}
.chat-avatar-sm{width:30px; height:30px; border-radius:50%; background:var(--sky); display:flex; align-items:center; justify-content:center;}
.chat-avatar-sm img{width:16px; height:16px;}
.chat-title{font-weight:900; font-size:17px; color:var(--title);}
.chat-sub{font-size:12px; font-weight:600; color:var(--sub);}
.chat-menu{margin-left:auto; color:var(--sub); font-size:15px; font-weight:800; background:rgba(0,0,0,.05); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center;}

.chat-scroll{flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:18px;}
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:34px;}
.empty .big-av{width:54px; height:54px; border-radius:50%; background:var(--sky); display:flex; align-items:center; justify-content:center;}
.empty .big-av img{width:26px; height:26px;}
.empty h3{font-size:22px; font-weight:900; color:var(--title); margin:6px 0 0;}
.empty p{font-size:14px; font-weight:600; color:var(--sub); margin:0; max-width:260px;}

.turn{display:flex; max-width:100%; animation:fadeUp .3s ease both;}
.turn.user{justify-content:flex-end;}
.bubble{font-size:16px; font-weight:600; line-height:1.4; padding:11px 16px; border-radius:20px; max-width:82%; white-space:pre-wrap; word-wrap:break-word;}
.turn.user .bubble{background:var(--sky); color:#fff;}
.turn.paws{gap:10px; align-items:flex-start;}
.turn.paws .bubble{background:#fff; color:var(--title); box-shadow:0 2px 8px rgba(0,40,80,.05);}
.turn.paws .mini-av{width:28px; height:28px; border-radius:50%; background:var(--sky); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.turn.paws .mini-av img{width:14px; height:14px;}

.dots{display:flex; gap:5px; padding:4px 0;}
.dots span{width:7px; height:7px; border-radius:50%; background:var(--sub); animation:blink 1.2s infinite;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;} 30%{opacity:1;}}

.suggest{display:flex; gap:8px; padding:0 14px 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.suggest::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,.05); color:var(--title); font-size:14px; font-weight:700; padding:10px 14px; border-radius:14px; white-space:nowrap;}
.chip:active{transform:scale(.97);}

.composer{display:flex; gap:10px; align-items:flex-end; padding:10px 14px max(12px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid rgba(0,0,0,.06); position:sticky; bottom:0;}
.composer textarea{flex:1; border:1px solid var(--field-border); border-radius:22px; padding:11px 16px; font-size:16px; font-weight:600; color:var(--title); resize:none; max-height:120px; outline:none; line-height:1.4;}
.composer textarea:focus{border-color:var(--sky);}
.send{width:40px; height:40px; border-radius:50%; background:var(--sky); display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, transform .12s;}
.send:disabled{background:#E9EEF6;}
.send:active{transform:scale(.92);}
.send svg{width:18px; height:18px;}

/* rotate-lock for landscape phones */
.rotate-lock{display:none;}
@media (max-width:900px) and (orientation:landscape){
  .screen{display:none !important;}
  .rotate-lock{display:flex; position:fixed; inset:0; background:var(--sky); color:#fff; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:30px; z-index:99;}
  .rotate-lock img{width:60px; opacity:.9;}
  .rotate-lock p{font-size:18px; font-weight:800; max-width:260px;}
}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,.85); color:#fff; font-size:14px; font-weight:700; padding:12px 18px; border-radius:14px; opacity:0; pointer-events:none; transition:all .25s; z-index:50;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}