/* First-run feature discovery showcase. Deliberately separate from Start Here. */
.grounded-first-run-showcase[hidden],
.grounded-post-walk-discovery[hidden] { display:none !important; }
.grounded-first-run-showcase,
.grounded-post-walk-discovery {
  position:fixed; inset:0; z-index:12000; display:flex; align-items:stretch; justify-content:center;
  background:linear-gradient(155deg,#f8f3ee 0%,#efe5dd 58%,#e8d9d0 100%);
  color:#4d423c; overflow:hidden; isolation:isolate;
}
.grounded-first-run-showcase::before,
.grounded-post-walk-discovery::before { content:""; position:absolute; width:22rem; height:22rem; border-radius:50%; background:rgba(255,255,255,.3); filter:blur(2px); top:-8rem; right:-7rem; z-index:-1; }
.frs-shell { width:min(100%, 520px); min-height:100%; display:flex; flex-direction:column; padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); box-sizing:border-box; }
.frs-top { display:flex; align-items:center; justify-content:space-between; min-height:34px; }
.frs-progress { display:flex; gap:7px; align-items:center; }
.frs-dot { width:6px; height:6px; border-radius:50%; background:rgba(105,83,73,.22); transition:all .25s ease; }
.frs-dot.is-active { width:22px; border-radius:8px; background:#927067; }
.frs-skip { border:0; background:transparent; color:rgba(84,70,63,.68); font:500 12px/1 Inter,system-ui,sans-serif; padding:8px 2px; cursor:pointer; }
.frs-viewport { flex:1; display:flex; align-items:center; min-height:0; padding:8px 0 10px; touch-action:pan-y; }
.frs-slide { width:100%; display:none; flex-direction:column; align-items:center; animation:frs-in .34s ease both; }
.frs-slide.is-active { display:flex; }
@keyframes frs-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
.frs-kicker { margin:0 0 10px; font:600 10px/1 Inter,system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#a07167; }
.frs-title { margin:0; max-width:18ch; text-align:center; font:500 clamp(30px,8vw,43px)/1.02 'Playfair Display',Georgia,serif; letter-spacing:-.035em; color:#4b403a; }
.frs-sub { margin:11px 0 0; max-width:31ch; text-align:center; font:400 14px/1.5 Inter,system-ui,sans-serif; color:rgba(78,67,60,.7); }
.frs-hero { position:relative; width:min(100%,340px); height:min(48vh,430px); min-height:270px; margin:22px auto 18px; border-radius:22px; overflow:hidden; background:#eee6df; box-shadow:0 18px 42px rgba(91,67,56,.18),0 2px 5px rgba(91,67,56,.08); border:1px solid rgba(255,255,255,.72); }
.frs-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.frs-hero--isg img { object-position:50% 0%; }
.frs-hero--guidance { background:#fbf7f4; height:min(48vh,405px); }
.frs-hero--guidance img { object-fit:cover; object-position:50% 46%; }
.frs-hero--verse-memory { height:auto; min-height:0; aspect-ratio:642 / 520; background:#f7f7f7; }
.frs-hero--verse-memory img { object-fit:contain; object-position:center; }
.frs-slide[data-frs-slide="2"] .frs-hero--verse-memory { width:min(calc(100vw - 24px),360px); margin:16px auto 14px; }
.frs-glimpses { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:350px; }
.frs-glimpse { padding:8px 11px; border-radius:999px; background:rgba(255,252,249,.58); border:1px solid rgba(162,128,113,.2); color:#7d655b; font:500 11px/1 Inter,sans-serif; }
.frs-footer { padding-top:7px; }
.frs-next { width:100%; min-height:0; padding:14px 18px; font:600 14px/1 Inter,sans-serif; cursor:pointer; }
.grounded-first-run-showcase .frs-next.todays-walk-btn-primary { min-height:0; padding:14px 18px; font:600 14px/1 Inter,sans-serif; letter-spacing:normal; }
.frs-next:active { transform:scale(.985); }
.grounded-post-walk-discovery { background:rgba(53,43,39,.38); align-items:flex-end; padding:0; }
.pwd-card { width:min(100%,520px); box-sizing:border-box; padding:26px 20px max(22px,env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fbf7f3; box-shadow:0 -12px 40px rgba(40,28,22,.18); }
.pwd-grabber { width:38px; height:4px; border-radius:4px; margin:0 auto 19px; background:#d7c5bb; }
.pwd-kicker { margin:0 0 8px; text-align:center; font:600 10px/1 Inter,sans-serif; letter-spacing:.15em; text-transform:uppercase; color:#a07167; }
.pwd-title { margin:0 auto 7px; text-align:center; font:500 25px/1.12 'Playfair Display',Georgia,serif; color:#4b403a; }
.pwd-body { margin:0 auto 18px; text-align:center; font:400 13px/1.45 Inter,sans-serif; color:#776860; }
.pwd-options { display:grid; gap:9px; }
.pwd-option { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 15px; border-radius:15px; border:1px solid rgba(173,143,129,.26); background:#fffdfb; color:#5b4c45; text-align:left; cursor:pointer; font:600 14px/1.2 Inter,sans-serif; }
.pwd-option span:last-child { color:#ad8276; font-size:18px; }
.pwd-dismiss { display:block; margin:14px auto 0; border:0; background:transparent; color:#8b766b; padding:7px 12px; font:500 12px/1 Inter,sans-serif; cursor:pointer; }
@media (max-height:680px) {
  .frs-hero { height:34vh; min-height:205px; margin-top:15px; margin-bottom:12px; }
  .frs-hero--isg { height:315px; min-height:315px; }
  .frs-hero--guidance { width:min(100%,300px); height:320px; min-height:320px; }
  .frs-hero--guidance img { object-position:50% 38%; }
  .frs-hero--verse-memory { height:auto; min-height:0; }
  .frs-title { font-size:30px; }
  .frs-sub { margin-top:7px; }
}
@media (min-width:430px) and (min-height:750px) { .frs-hero { width:360px; } }
