/* Compact app discovery and personal Puzzli Kids storytelling. */
.hp-apps { padding: 38px 0 44px; background: #fffdf7; border-bottom: 1px solid #dbe4d8; }
.hp-overview-heading { margin-bottom: 24px; }
.hp-overview-heading h2 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 35px); letter-spacing: -.04em; color: #203f36; }
.hp-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hp-app-card { min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-content: start; padding: 19px 16px; border: 1px solid #dce5d8; border-radius: 20px; background: #fff; }
.hp-app-card > img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 12px; }
.hp-app-card small { display: block; color: #647568; font-size: .72rem; line-height: 1.5; }
.hp-app-card h3 { margin: 3px 0 8px; font-size: 1.04rem; line-height: 1.3; letter-spacing: -.025em; }
.hp-app-card p { margin: 0 0 13px; color: #53645c; font-size: .85rem; line-height: 1.55; }
.hp-app-card a { font-size: .81rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.hp-app-family { background: #eaf2e5; border-color: #adc7a4; }
.hp-store-link { display: block; align-self: flex-start; margin-top: 14px; color: #3e5c55; font-size: .8rem; text-decoration: underline; text-underline-offset: 4px; }
.hp-store-link:hover { color: #173f36; }
.hp-help { padding-block: 52px; }
.hp-help .family-section-label { margin-bottom: 14px; }
.hp-help .family-actions { margin-top: 24px; }
.hp-hammer-note { max-width: 580px; margin: 17px 0 0; color: #b3c9db; font-size: .83rem; line-height: 1.65; }
.pk-price-note { margin: 14px 0 0; font-size: .83rem !important; line-height: 1.55; }
.pk-price-note a { color: #1165a2; text-decoration: underline; text-underline-offset: 4px; }
.pk-photo-story { padding-top: 62px; background: #fffdf7; }
.pk-story-heading { max-width: 700px; }
.pk-story-heading > p { color: var(--muted); font-size: 1.06rem; }
.pk-photo-steps { padding: 0; margin: 30px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pk-photo-steps li { min-width: 0; border-top: 2px solid #b8dce6; padding: 20px 0 8px; }
.pk-photo-steps li > span { color: #1165a2; font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.pk-photo-steps h3 { margin: 8px 0 9px; font-size: 1.18rem; letter-spacing: -.025em; }
.pk-photo-steps p { margin: 0; color: var(--muted); }
.pk-parents { padding-block: 58px; background: #eff8fa; }
.pk-parents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pk-parents-grid > div { min-width: 0; }
.pk-parents-grid > div > p { color: var(--muted); font-size: 1.05rem; }
.pk-parent-points { margin: 23px 0; padding-left: 19px; }
.pk-parent-points li { padding-left: 4px; margin-block: 13px; color: var(--muted); }
.pk-parent-points strong { color: var(--text); }
.pk-screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(100%, 410px); justify-self: center; align-items: start; }
.pk-screen-pair figure { margin: 0; min-width: 0; }
.pk-screen-pair img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 14px 35px #1e526c21; }
.pk-screen-pair figcaption { font-size: .8rem; color: #30526a; text-align: center; margin-top: 13px; line-height: 1.5; }
.pk-screen-pair > p { grid-column: 1 / -1; margin: 0; font-size: .75rem; text-align: center; color: #5b7080; }
.pk-faq { padding-block: 48px; }
.pk-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; }
.pk-faq-grid > div { min-width: 0; }
.pk-faq-grid > div > p { color: var(--muted); }
.pk-faq .faq-list details[open] { border-color: #b7dce8; background: #f1faff; }
.pk-faq .faq-list summary::after { color: #1165a2; }
.pk-final { padding-block: 58px; background: #dff3fb; text-align: center; }
.pk-final .container { max-width: 760px; }
.pk-final p { color: var(--muted); }
.pk-final .button { margin-top: 8px; }
@media (max-width: 1100px) {
  .hp-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-app-card { grid-template-columns: 48px minmax(0, 1fr); }
  .pk-parents-grid { gap: 35px; }
}
@media (max-width: 760px) {
  .hp-apps { padding-block: 30px; }
  .hp-app-grid { gap: 12px; }
  .hp-app-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 15px 13px; }
  .hp-app-card > img { width: 42px; height: 42px; border-radius: 11px; }
  .hp-app-card h3 { font-size: .98rem; }
  .hp-app-card p { font-size: .81rem; }
  .hp-app-card a { display: inline-block; font-size: .77rem; line-height: 1.5; }
  .hp-help .family-actions { flex-direction: column; gap: 20px; }
  .pk-photo-story, .pk-parents, .pk-faq, .pk-final { padding-block: 38px; }
  .pk-parents-grid, .pk-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pk-screen-pair { max-width: 380px; }
  .pk-photo-steps { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .pk-photo-steps li { padding-top: 15px; }
  .pk-photo-steps h3 { margin-top: 6px; }
}
@media (max-width: 360px) {
  .hp-app-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-app-card { grid-template-columns: 42px minmax(0, 1fr); }
  .pk-screen-pair { gap: 12px; }
  .pk-screen-pair img { border-radius: 18px; }
}