/* Pookie home page sections. Shared chrome (colours, buttons, top bar, footer, night bands) is in site.css. */

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(48px, 7.4vw, 92px); font-weight: 700; letter-spacing: -.01em; line-height: 1.02; }
.swash { background: linear-gradient(transparent 60%, var(--rose) 60%, var(--rose) 94%, transparent 94%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: .12em; }
.lede { max-width: 44ch; margin: 24px 0 0; font-size: 19px; color: var(--ink-soft); }
.proof { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.proof p { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.proof b { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 30px; }
.proof span { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.proof .stars { font-size: 14px; margin: 2px 0 3px; color: #F5A524; }
.laurel { width: 24px; height: auto; }
.laurel-r { transform: scaleX(-1); }
.proof-couples { margin-left: 18px !important; padding-left: 20px; border-left: 2px solid rgba(74,46,43,.15); }
.stars { color: #F5A524; letter-spacing: 2px; }

.hero-art { position: relative; justify-self: center; width: min(100%, 340px); }
/* hero.webp carries its own device frame, so it only needs the ink shadow. Kept upright so it stays sharp. */
.phone img { filter: drop-shadow(10px 12px 0 rgba(74,46,43,.85)); }
.sticker { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(74,46,43,.25)); }
.s-heart { width: 88px; top: 6%; left: -16%; transform: rotate(-14deg); }
.s-envelope { width: 104px; top: 38%; right: -18%; transform: rotate(10deg); }
.s-calendar { width: 74px; top: -5%; right: -6%; transform: rotate(8deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .sticker { animation: bob 5s ease-in-out infinite; }
  .s-envelope { animation-delay: -1.4s !important; }
  .s-calendar { animation-delay: -3.7s !important; }
  @keyframes bob { 50% { translate: 0 -8px; } }
}


/* ---------- features ---------- */
.features { padding: var(--pad) 0; background: #FCEBD2; border-top: 2px solid rgba(74,46,43,.1); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(36px, 5vw, 60px); }
.section-head p { margin: 14px auto 0; font-size: 18px; color: var(--ink-soft); max-width: 46ch; }
.night .section-head p { color: #DCD0C6; }


.features-h { text-align: center; font-size: clamp(36px, 5vw, 60px); margin-bottom: clamp(32px, 5vw, 56px); }
.f-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 980px; margin: 0 auto; }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-btn { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: transparent; border: 2.5px solid transparent; border-radius: 18px; padding: 12px 14px; transition: background .15s, border-color .15s, box-shadow .15s; }
.f-btn:hover { background: var(--card-top); }
.f-btn[aria-pressed="true"] { background: var(--card-top); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.f-dot { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.f-title { display: block; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; }
.f-desc { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.f-shot { position: relative; height: 620px; }
.f-img { position: absolute; inset: 0; margin: auto; max-height: 100%; width: auto; filter: drop-shadow(10px 12px 0 rgba(74,46,43,.85));
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s .18s; }
.f-img.on { opacity: 1; visibility: visible; transition: opacity .18s ease; }

/* ---------- games ---------- */
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.game-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #FFFDF5; color: var(--ink); border: var(--edge); border-radius: 22px; box-shadow: 0 3px 0 #0E0B14;
  padding: 16px 8px 14px; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.15; }
.game-grid img { height: 64px; width: auto; object-fit: contain; }
.game-grid li:nth-child(4n+1) { transform: rotate(-1.5deg); }
.game-grid li:nth-child(4n+3) { transform: rotate(1.5deg); }



/* ---------- faq ---------- */
.faq { padding: var(--pad) 0; }
.faq-wrap { max-width: 800px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--card-top); border: 2px solid rgba(74,46,43,.16); border-radius: 20px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 19px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #FFE1E6; border: 0; font-size: 20px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-soft); }

/* ---------- close ---------- */
.close { text-align: center; }
.close h2 { font-size: clamp(44px, 6.6vw, 84px); font-weight: 700; }
.close p { margin: 16px auto 0; max-width: 40ch; font-size: 19px; color: #DCD0C6; }
.close .stores { justify-content: center; }
.close .download-btn { background: #FFFDF5; color: var(--ink); box-shadow: 0 3px 0 #0E0B14; }
.close .download-btn:hover { background: #FFF; }
.close-pet { width: 104px; margin: 0 auto 18px; }
@media (prefers-reduced-motion: no-preference) {
  .close-pet { animation: wobble 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes wobble { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -9deg; } 84% { rotate: 8deg; } 92% { rotate: -4deg; } }
}

/* ---------- narrower ---------- */
@media (max-width: 1000px) {
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .stores, .proof { justify-content: center; }
  .hero-art { width: min(72%, 290px); margin-top: 12px; }
  .f-wrap { grid-template-columns: 1fr; }
  .f-shot { order: -1; height: 440px; }
}
@media (max-width: 560px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .game-grid img { height: 50px; }
  .game-grid li { font-size: 13.5px; padding: 12px 6px; }
  .f-list { grid-template-columns: 1fr; gap: 4px; }
  .s-heart { width: 62px; left: -12%; }
  .s-envelope { width: 72px; right: -14%; }
  .s-calendar { width: 54px; }
}