/* Family & Mom page (digitalorganizer.pro/family.html) — the baddie-mom
   layer over shared.css + digital-theme.css. Same black-plum / hot pink /
   gold palette as the CEO side, but warmer, messier and more playful:
   tilted cards, tape labels and scribble notes. Loaded only on this page. */
body.family {
  --accent: #ff2797;
  --accent2: #f2c14e;
  --hot: #ff2797;
  background:
    radial-gradient(900px 500px at 50% -120px, rgba(255, 46, 154, 0.20), transparent 65%),
    radial-gradient(700px 420px at 100% 30%, rgba(242, 193, 78, 0.10), transparent 60%),
    radial-gradient(600px 500px at 0% 60%, rgba(255, 46, 154, 0.08), transparent 60%),
    #12040f;
}
body.family .hero h1 span {
  background: linear-gradient(175deg, #ffe9a8 5%, #ffb35c 30%, #ff2797 60%, #ffb7da 95%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
body.family .mom-card {
  transform: rotate(1.2deg);
  border-color: rgba(242, 193, 78, 0.55);
}
body.family .tilt-l { transform: rotate(-0.8deg); }
body.family .tilt-r { transform: rotate(0.8deg); }
body.family .tape {
  display: inline-block;
  align-self: flex-start;
  background: linear-gradient(120deg, #f2c14e, #ffd977);
  color: #2a1503;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}
body.family .scribble {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #ffb7da;
  font-size: 1.05rem;
  transform: rotate(-1deg);
}
body.family .card strong { color: #ffd977; }
/* School Cabinet section on the family page (integrated 2026-10-23 from
   family-page-snippet.html; styles live here so the page stays CSP-clean —
   no inline <style>). Palette matched to the baddie-mom theme. */
body.family .sc-section {
  background: #24102f;
  border: 1px solid rgba(242, 193, 78, 0.4);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
body.family .sc-section h2 { color: #f2c14e; margin: 0.2rem 0 0.5rem; font-size: 1.7rem; }
body.family .sc-section .sc-tag { color: #ff7abb; font-style: italic; margin: 0.2rem 0 1rem; }
body.family .sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { body.family .sc-grid { grid-template-columns: 1fr; } }
body.family .sc-card {
  border: 2px solid #ff2797;
  border-radius: 0.75rem;
  padding: 1rem;
  background: rgba(255, 39, 151, 0.07);
}
body.family .sc-card h3 { color: #fff; margin: 0.2rem 0; }
body.family .sc-card .sc-price { font-size: 1.6rem; color: #f2c14e; }
body.family .sc-card .sc-unit { color: #ff7abb; font-size: 0.9rem; }
body.family .sc-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  text-decoration: none;
  font-weight: bold;
  margin: 0.35rem 0.35rem 0 0;
}
body.family .sc-btn-main { background: #ff2797; color: #fff; box-shadow: 0 0 16px rgba(255, 39, 151, 0.5); }
body.family .sc-btn-alt { background: #f2c14e; color: #2b1233; }
body.family .sc-fine { font-size: 0.85rem; opacity: 0.85; margin-top: 1rem; }
body.family .sc-fine a { color: #f2c14e; }
@media (max-width: 560px) {
  body.family .tilt-l, body.family .tilt-r, body.family .mom-card { transform: none; }
}