/* ============================================================================
   Family Pack — SHARED sales view (single source of truth).
   Rendered by shared/family-pack.js and consumed by BOTH surfaces:
     • website  → auth/index.html (parent purchase screen)
     • in-app   → playnow/accounts-hub.js (Accounts Hub "Family Pack" view)
   Self-contained: no dependency on either surface's own theme. Class prefix
   `fp-` is deliberately neutral. Parallel-copied to Match2.Cards verbatim.

   Editorial treatment: warm cream ground, Playfair Display serif for the
   headline / price / teacher link (Nunito for everything else), orange dot
   bullets separated by hairlines. Serif falls back to Georgia if the webfont
   isn't loaded (each surface loads Playfair Display via Google Fonts).
   ============================================================================ */

.fp-pack {
  max-width: 480px;
  margin: 0 auto;
  background: #faf6ee;                 /* warm cream */
  border-radius: 22px;
  padding: 30px 28px 22px;
  box-shadow: 0 12px 44px rgba(60, 40, 20, 0.10);
  text-align: left;
  color: #241f1a;
  -webkit-font-smoothing: antialiased;
}

.fp-eyebrow {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d97a2b;                      /* terracotta */
  margin: 0 0 16px;
}

.fp-headline {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1c1712;
  margin: 0 0 22px;
  text-wrap: balance;
}

.fp-price-row {
  display: flex;
  align-items: flex-end;   /* bottom-align the two note lines with the price */
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
.fp-price {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  color: #1c1712;
  letter-spacing: -0.01em;
}
.fp-price-note {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #8a7a63;                      /* muted warm brown */
  line-height: 1.4;
}

.fp-benefits {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid rgba(40, 30, 20, 0.10);
}
.fp-benefits li {
  position: relative;
  padding: 15px 0 15px 24px;
  border-bottom: 1px solid rgba(40, 30, 20, 0.10);
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #3a322a;
  line-height: 1.4;
}
.fp-benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0812c;                 /* orange dot */
}
.fp-benefits li strong { font-weight: 800; color: #1c1712; }

/* Free-tier showcase, rendered as the 2nd benefit <li>: the flag row wraps
   onto its own line below the label, left-aligned with the bullet text. */
.fp-flags {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 3px;
}
.fp-flags-more {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #a1937c;
  letter-spacing: 0;
  vertical-align: middle;
}

.fp-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-top: 24px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  padding: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5992f, #e77d16 60%, #d96f08);
  box-shadow: 0 4px 0 #b85e06, 0 10px 24px rgba(201, 95, 0, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
  -webkit-tap-highlight-color: transparent;
}
.fp-cta:disabled { opacity: 0.6; cursor: default; }

/* In-button spinner while checkout is created (each surface injects the span). */
.fp-spinner {
  display: inline-block;
  width: 17px; height: 17px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fp-spin 0.7s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fp-spinner { animation-duration: 1.4s; } }

.fp-fine {
  font-family: 'Nunito', sans-serif;
  text-align: center;
  font-size: 12.5px;
  color: #a1937c;
  margin: 14px 0 0;
  font-weight: 600;
  line-height: 1.5;
}

/* Quiet >5-children signpost to the teacher/@School plan. */
.fp-more {
  font-family: 'Nunito', sans-serif;
  text-align: center;
  font-size: 13.5px;
  color: #6f6252;
  margin: 12px 0 2px;
  font-weight: 600;
}
.fp-more a {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: #d97a2b;
  text-decoration: none;
  white-space: nowrap;
}
.fp-more a:hover { text-decoration: underline; }

.fp-view-err {
  margin-top: 10px;
  font-size: 13px;
  color: #c0392b;
  font-weight: 700;
  text-align: center;
}