/* =====================================================================
   mobile-tight.css — prototype layer (28 Oct, Xipz feedback)
   Symmetric, centred mobile column + tighter vertical rhythm.
   ROLLBACK: delete the <link href="mobile-tight.css"> line in index.html.
   ===================================================================== */
@media (max-width:699px){
  /* 1. Rhythm: one consistent gap between sections */
  .sec,.req,.chk,.abt,.pdc,.cbtc,.stp,.prc,.fq,.breathe{padding-top:48px!important;padding-bottom:48px!important}
  .hero{padding-bottom:16px!important}
  .final{padding-top:56px!important;padding-bottom:88px!important}
  .h2{margin-bottom:20px}
  .lead{margin-bottom:0}
  .hero__art{height:min(88vw,460px)}
  .niki{right:-12%}.ghost{right:8%}

  /* 2. About: photo and card on the same centre line, no side offsets */
  .about__photo{margin:0!important;aspect-ratio:4/3.4}
  .about__card{margin:-56px 12px 0!important;padding:26px 20px 22px}
  .about__sig{font-size:48px;margin-top:10px}
  .abt__g--l{bottom:120px}

  /* 3. Documents: straight cards, no random tilt */
  .pd{transform:none!important}
  .pdc .docs{padding-bottom:40px;margin-bottom:-20px}

  /* 4. CBT: bubbles span the column, aligned to the same edges */
  .chat2 .bub{max-width:100%;justify-self:stretch}
  .bub--old{border-bottom-left-radius:24px}
  .bub--new{border-bottom-right-radius:24px}
  .chat2__mid{justify-content:center;margin:12px 0}

  /* 5. FAQ chat cards: symmetric bubbles inside each card */
  .fq__q{max-width:92%}
  .fq__row{padding-bottom:44px;margin-bottom:-28px}

  /* 6. Steps / prices / checklist cards: equal edges */
  .stp__card,.chk .list{margin-inline:0}
  .prc__dl{margin:-8px 0 18px}

  /* 7. Breathing: compact, centred */
  .breathe .h2{margin-bottom:12px}

  /* 8. Glows sit symmetric to the column edges (no lopsided blobs) */
  .chk__g--b{left:-200px}
  .cbtc__g--p{left:-190px}
}

/* ---- 28 Oct additions ---- */
/* hero pills over the photo's bottom edge */
.hpills{position:absolute;right:0;bottom:6px;z-index:3;display:grid;gap:8px;justify-items:end}
.hpill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font:600 13px var(--sans);color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,246,250,.86));border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 24px -14px rgba(40,58,100,.45),inset 0 1px 0 #fff}
.hpill i{width:8px;height:8px;border-radius:50%;background:#8CBEF5;box-shadow:0 0 0 3px rgba(140,190,245,.25)}
@media (min-width:700px){.hpills{right:8%;bottom:10%}}

/* about: vertical timeline with dots */
.path{position:relative;padding-left:26px;margin-top:6px}
.path:before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:1.5px;background:#A4846F;opacity:.75}
.path li{position:relative;display:block;padding:10px 0;border-top:0}
.path li:before{content:"";position:absolute;left:-26px;top:15px;width:13px;height:13px;border-radius:50%;background:#FBF7F0;border:1.5px solid #A4846F;box-sizing:border-box}
.path li:last-child:before{background:#A4846F}
.path b{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.06em;color:#6A6168}
.path span{display:block;font-weight:600;font-size:15px;margin-top:2px}
@media (max-width:699px){.btn{text-align:center;padding-inline:20px;font-size:15.5px;line-height:1.25}}
@media (max-width:360px){.btn{font-size:14.5px;padding-inline:16px}}

/* ---- hero: seamless photo edges + gentle pop-in (28 Oct) ---- */
.hero__art img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 98%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 98%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.hero__art{isolation:isolate}
@keyframes hpop{0%{opacity:0;transform:translate3d(0,14px,0) scale(.86)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes hrise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.hpill{opacity:0;animation:hpop .7s cubic-bezier(.2,.8,.2,1) both;will-change:transform,opacity}
.hpill:nth-child(1){animation-delay:.9s}.hpill:nth-child(2){animation-delay:1.08s}
.hero__foot .lead{animation:hrise .7s .5s cubic-bezier(.2,.8,.2,1) both}
.hero__foot .btn{animation:hrise .7s .62s cubic-bezier(.2,.8,.2,1) both}
.hero__foot .lock{animation:hrise .7s .74s cubic-bezier(.2,.8,.2,1) both}
.cred span{opacity:0;animation:hpop .6s cubic-bezier(.2,.8,.2,1) both}
.cred span:nth-child(1){animation-delay:1.2s}.cred span:nth-child(2){animation-delay:1.28s}.cred span:nth-child(3){animation-delay:1.36s}.cred span:nth-child(4){animation-delay:1.44s}.cred span:nth-child(5){animation-delay:1.52s}
.hpill i{animation:pulse2 2.4s 1.8s ease-in-out infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 3px rgba(140,190,245,.25)}50%{box-shadow:0 0 0 6px rgba(140,190,245,.12)}}
@media (prefers-reduced-motion:reduce){.hpill,.cred span,.hero__foot .lead,.hero__foot .btn,.hero__foot .lock,.hpill i{animation:none;opacity:1}}
.hero__art .ghost{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%),linear-gradient(90deg,transparent 0,transparent 18%,#000 55%,#000 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%),linear-gradient(90deg,transparent 0,transparent 18%,#000 55%,#000 100%)}

/* ---- hero: stats row instead of pills + green glow bottom-left (29 Oct) ---- */
.st{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid rgba(31,27,30,.12)}
.st div{padding:14px 0 0;text-align:left}
.st div+div{padding-left:14px;border-left:1px solid rgba(31,27,30,.12)}
.st b{display:block;font:400 26px/1 var(--serif);color:var(--ink)}
.st span{display:block;font:600 11.5px var(--sans);color:#6A6168;letter-spacing:.04em;margin-top:6px}
.st div{opacity:0;animation:hrise .6s cubic-bezier(.2,.8,.2,1) both}
.st div:nth-child(1){animation-delay:1.1s}.st div:nth-child(2){animation-delay:1.2s}.st div:nth-child(3){animation-delay:1.3s}
.hero .sky{background:radial-gradient(80% 55% at 100% 0%,rgba(140,190,245,.85) 0%,rgba(180,214,250,.5) 38%,rgba(251,247,240,0) 75%),radial-gradient(85% 38% at 0% 70%,rgba(206,205,140,.95),rgba(211,210,154,.35) 45%,rgba(211,210,154,0) 75%)!important}
@media (min-width:1024px){.st{max-width:460px}}
@media (prefers-reduced-motion:reduce){.st div{animation:none;opacity:1}}


/* ---- requests: left brown glow stronger + reaches ~25% higher (29 Oct) ---- */
.req__glow--a{transform:none!important;width:640px!important;height:480px!important;left:-300px!important;top:-75px!important;background:radial-gradient(closest-side,rgba(214,190,168,.6),rgba(218,196,176,.3) 45%,rgba(218,196,176,0) 80%)!important}