/* FrozenBuddy landing page (public/landing.js): frozen blue hero with the mascot, coral calls to action. */
.landing { margin: calc(-1 * var(--page-pad, 16px)) calc(-1 * var(--page-pad, 16px)) 0; }
.lp-hero { position: relative; overflow: hidden; text-align: center; padding: 28px 20px 40px; color: #fff; background: linear-gradient(180deg, #5BC4F7 0%, #1E7BE0 100%); border-radius: 0 0 32px 32px; }
.lp-brand { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; }
.lp-brand b { color: #FFE27A; }
.lp-mascot { width: 168px; height: 168px; margin: 14px auto 6px; display: block; border-radius: 40px; box-shadow: 0 16px 30px rgba(14, 76, 153, .35); animation: lp-float 3.6s ease-in-out infinite; }
.lp-hero h1 { font-family: var(--font-heading); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; margin: 10px 0 8px; color: #fff; }
.lp-sub { font-size: 1.05rem; line-height: 1.5; max-width: 34rem; margin: 0 auto; }
.lp-hero .lp-sub { color: #EAF6FF; }
.lp-ctas { display: grid; gap: 12px; max-width: 22rem; margin: 22px auto 0; }
.lp-btn { display: block; padding: 16px 20px; border-radius: 16px; font-weight: 800; font-size: 1.1rem; text-decoration: none; text-align: center; }
.lp-btn.primary { background: var(--color-primary, #FF6B4A); color: #fff; box-shadow: 0 5px 0 var(--color-primary-edge, #D9502F); }
.lp-btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--color-primary-edge, #D9502F); }
.lp-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: #fff; color: #1F2A44; font-weight: 800; text-decoration: none; border: 2px solid #DADCE0; box-shadow: 0 4px 0 #C9CDD3; }
.google-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C9CDD3; }
.lp-snow { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#fff 1.5px, transparent 2px), radial-gradient(#fff 1px, transparent 1.5px); background-size: 90px 90px, 60px 60px; background-position: 10px 20px, 40px 50px; opacity: .35; animation: lp-snow 18s linear infinite; }
.lp-section { padding: 30px 18px 6px; max-width: 900px; margin: 0 auto; }
.lp-section h2, .lp-end h2 { font-family: var(--font-heading); font-size: 1.7rem; text-align: center; margin: 0 0 14px; }
.lp-section > .lp-sub { text-align: center; color: var(--color-ink-soft); margin-bottom: 14px; }
.lp-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-card { background: var(--color-surface); border: 2px solid var(--color-line); border-radius: 22px; padding: 16px; box-shadow: 0 5px 0 var(--color-line); text-align: center; }
.lp-card img { width: 100%; max-width: 220px; height: 120px; object-fit: contain; }
.lp-card h3 { font-family: var(--font-heading); margin: 6px 0 4px; font-size: 1.25rem; }
.lp-card p { margin: 0; color: var(--color-ink-soft); line-height: 1.45; }
.lp-emoji { font-size: 44px; }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lp-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--color-surface); border-radius: 20px; padding: 14px 16px; border: 2px solid var(--color-line); }
.lp-steps h3 { margin: 0 0 2px; font-family: var(--font-heading); }
.lp-steps p { margin: 0; color: var(--color-ink-soft); }
.lp-step-icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--color-secondary-soft); }
.lp-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-faces img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 4px 0 var(--color-line); animation: lp-pop .5s both; }
.lp-faces img:nth-child(2n) { animation-delay: .1s; }
.lp-faq details { background: var(--color-surface); border: 2px solid var(--color-line); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; }
.lp-faq summary { font-weight: 800; cursor: pointer; }
.lp-faq p { margin: 8px 0 0; color: var(--color-ink-soft); line-height: 1.5; }
.lp-end { text-align: center; padding: 30px 18px; display: grid; gap: 12px; max-width: 22rem; margin: 0 auto; }
.legal-footer { text-align: center; color: var(--color-ink-soft); padding: 18px 12px 28px; }
.legal-footer a { color: inherit; }
.legal { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.legal h2 { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 22px; }
.legal-nav { margin-top: 26px; }
.cookie-notice { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--color-surface); border: 2px solid var(--color-line); border-radius: 18px; box-shadow: 0 10px 30px rgba(31, 42, 68, .18); max-width: 640px; margin: 0 auto; }
.cookie-notice p { margin: 0; flex: 1; }
.consent-checks { display: grid; gap: 8px; margin: 10px 0; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--color-ink-soft); margin: 14px 0; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 2px; background: var(--color-line); }
@keyframes lp-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes lp-snow { from { background-position: 10px 20px, 40px 50px; } to { background-position: 10px 380px, 40px 290px; } }
@keyframes lp-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp-mascot, .lp-snow, .lp-faces img { animation: none; } }

/* Computer and tablet: the landing uses the whole width (body.landing-wide, set by app.js). */
body.landing-wide main { max-width: none; padding: 0; }
body.landing-wide .landing { margin: 0; }
@media (min-width: 900px) {
  .lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: "brand mascot" "title mascot" "sub mascot" "ctas mascot";
    align-items: center;
    column-gap: 48px;
    text-align: left;
    padding: 64px max(56px, calc((100vw - 1180px) / 2)) 80px;
    border-radius: 0 0 56px 56px;
  }
  .lp-brand { grid-area: brand; font-size: 1.8rem; }
  .lp-mascot { grid-area: mascot; width: min(360px, 30vw); height: auto; aspect-ratio: 1; margin: 0; justify-self: center; border-radius: 72px; }
  .lp-hero h1 { grid-area: title; font-size: clamp(3rem, 5vw, 4.4rem); margin: 12px 0; }
  .lp-hero .lp-sub { grid-area: sub; margin: 0; font-size: 1.25rem; max-width: 40rem; }
  .lp-ctas { grid-area: ctas; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: none; margin: 30px 0 0; }
  .lp-ctas .lp-btn, .lp-ctas .google-btn { min-width: 240px; }
  .lp-section { max-width: 1180px; padding: 64px 32px 8px; }
  .lp-section h2, .lp-end h2 { font-size: 2.4rem; margin-bottom: 22px; }
  .lp-section > .lp-sub { font-size: 1.2rem; max-width: 46rem; margin: 0 auto 26px; }
  .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .lp-card { padding: 24px; }
  .lp-card img { height: 160px; max-width: 280px; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .lp-steps li { padding: 22px; }
  .lp-faces { gap: 18px; }
  .lp-faces img { width: 112px; height: 112px; }
  .lp-faq { max-width: 860px; }
  .lp-end { max-width: 560px; padding: 64px 32px; }
  .lp-end .lp-btn, .lp-end .google-btn { font-size: 1.15rem; }
}
@media (min-width: 1400px) {
  .lp-mascot { width: 420px; }
}

/* Sign-up: gender choice as three big pills. */
.gender-pick { border: 0; padding: 0; margin: 4px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.gender-pick legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.gender-opt { flex: 1; min-width: 84px; }
.gender-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gender-opt span { display: block; text-align: center; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--color-line); background: var(--color-surface); font-weight: 800; box-shadow: 0 3px 0 var(--color-line); cursor: pointer; }
.gender-opt input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 3px 0 var(--color-primary-edge); }
.gender-opt input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.gender-opt span { display: grid; justify-items: center; gap: 2px; }
.gender-opt img { width: 40px; height: 50px; }