/* FamilyBoard-specific composition. Shared typography, buttons and tokens come from the app theme. */
.product-familyboard { --product-tint: var(--tp-mint); }
.product-familyboard .tp-button { color: var(--tp-white); }
.product-familyboard h2 { font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.45; letter-spacing: -.035em; font-weight: 900; }
.product-familyboard .tp-eyebrow { margin-bottom: 18px; color: var(--tp-mint-ink); }
.product-familyboard .fb-note { margin-top: 20px; font-size: .8rem; line-height: 1.9; color: var(--tp-muted); }
.product-familyboard .fb-hero .product-intro-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(24px,4vw,56px); padding-block: 24px 40px; }
.product-familyboard .fb-hero h1 { display: block; font-size: clamp(3rem,5.3vw,4.75rem); line-height: 1.3; letter-spacing: -.06em; }
.product-familyboard .fb-hero h1 > span { color: var(--tp-mint-ink); }
.product-familyboard .fb-hero .product-intro-lead { margin-top: 26px; font-size: 1rem; }
.fb-hero-art { position: relative; min-width: 0; padding-block: 10px 30px; }
.fb-hero-disc { position: absolute; inset: 10% -4% 16% -4%; border-radius: 45% 55% 50% 42%; background: var(--tp-mint); transform: rotate(-8deg); }
.fb-hero-spark { position: absolute; right: -1%; top: 2%; width: 68px; color: var(--tp-spark); transform: rotate(12deg); }
.fb-hero-phone { position: relative; width: min(60%,280px); margin: 0 auto; transform: rotate(5deg); }
.fb-screen-link { display: block; border: 1px solid var(--tp-line); border-radius: var(--tp-radius-panel); overflow: hidden; background: var(--tp-white); box-shadow: var(--tp-shadow-flat); }
.fb-screen-link img { display: block; width: 100%; height: auto; }
.fb-note-slip { position: absolute; right: -2%; bottom: 8%; display: grid; gap: 8px; background: var(--tp-yellow-2); padding: 20px 24px; transform: rotate(-5deg); box-shadow: var(--tp-shadow-flat-sm); }
.fb-note-slip span { font-size: .75rem; line-height: 1.8; }
.fb-note-slip strong { font-size: 1.4rem; }
.fb-hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px !important; border-bottom: 1px solid var(--tp-line); }
.fb-hero-bottom strong { font-size: .95rem; }
.fb-hero-bottom p { font-size: .75rem; color: var(--tp-muted); }
.fb-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-block: 36px 56px !important; }
.fb-index a { display: flex; align-items: center; gap: 12px; padding-block: 12px; text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--tp-line); }
.fb-index a span:first-child { font-family: var(--tp-font-display); color: var(--tp-mint-ink); font-size: .8rem; }
.fb-index a span:last-child { margin-left: auto; }
.fb-index a:hover,.fb-text-link:hover,.fb-legal-links a:hover { color: var(--tp-indigo); }
.fb-feature { padding-block: 88px 104px; }
.fb-tonight { background: var(--tp-mint); }
.fb-morning { background: var(--tp-lavender-3); }
.fb-feature-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(40px,6vw,80px); }
.fb-feature-copy { max-width: 34rem; }
.fb-lead { margin-top: 24px; line-height: 2; color: var(--tp-ink-soft); }
.fb-feature-list { list-style: none; padding: 0; margin: 30px 0 0; }
.fb-feature-list li { padding-block: 20px; border-top: 1px solid var(--tp-ink-soft); }
.fb-feature-list strong { display: block; margin-bottom: 8px; font-size: 1rem; }
.fb-feature-list span { display: block; line-height: 1.9; font-size: .9rem; color: var(--tp-ink-soft); }
.fb-feature-visual { min-width: 0; margin: 0; }
.fb-phone-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.fb-phone-pair .fb-screen-link:last-child { margin-top: 62px; }
.fb-feature-visual figcaption { margin-top: 24px; font-size: .75rem; line-height: 1.8; color: var(--tp-muted); }
.fb-start,.fb-sharing,.fb-faq { padding-block: 88px; }
.fb-start .product-section-header { max-width: 40rem; }
.fb-start .product-section-header > p:last-child { margin-top: 20px; }
.fb-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; list-style: none; margin: 44px 0 0; padding: 0; }
.fb-steps li { border-top: 1px solid var(--tp-line); padding-top: 24px; }
.fb-steps li > span { color: var(--tp-mint-ink); font: 700 2.2rem/1 var(--tp-font-display); }
.fb-steps h3 { margin-block: 24px 14px; font-size: 1.05rem; }
.fb-steps p { font-size: .9rem; line-height: 2; color: var(--tp-ink-soft); }
.fb-sharing-grid,.fb-faq-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; }
.fb-sharing-grid > div > p:not(.tp-eyebrow) { max-width: 30rem; margin-block: 24px; line-height: 2; }
.fb-sharing-levels { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.fb-sharing-levels > div { padding: 24px; border-radius: var(--tp-radius-card); background: var(--tp-mint); }
.fb-sharing-levels > div:last-child { background: var(--tp-paper); border: 1px solid var(--tp-line); }
.fb-sharing-levels dt { font-weight: 800; margin-bottom: 12px; }
.fb-sharing-levels dd { margin: 0; font-size: .9rem; line-height: 1.9; }
.fb-text-link { font-weight: 700; text-underline-offset: 5px; }
.fb-faq { border-top: 1px solid var(--tp-line); }
.fb-faq dl { margin: 0; }
.fb-faq dl > div { padding-block: 22px; border-bottom: 1px solid var(--tp-line); }
.fb-faq dl > div:first-child { padding-top: 0; }
.fb-faq dt { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.fb-faq dd { margin: 0; color: var(--tp-ink-soft); line-height: 2; font-size: .9rem; }
.fb-contact { padding-block: 24px 64px; }
.fb-contact-panel { display: flex; justify-content: space-between; align-items: center; gap: 36px; background: var(--tp-yellow-2); border-radius: var(--tp-radius-panel); padding: clamp(28px,5vw,64px); }
.fb-contact-panel > div > p:last-child { margin-top: 24px; line-height: 2; font-size: .9rem; }
.fb-contact-panel .tp-button { flex-shrink: 0; }
.fb-contact-note { margin-top: 24px; font-size: .75rem; color: var(--tp-muted); line-height: 1.9; }
.fb-legal-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; font-size: .85rem; text-underline-offset: 4px; }
.product-familyboard a:focus-visible { outline: 3px solid var(--tp-indigo); outline-offset: 5px; }
@media (max-width: 1000px) {
    .product-familyboard .fb-hero h1 { font-size: clamp(2.75rem,5vw,3.5rem); }
    .fb-note-slip { padding: 16px; right: -4%; }
    .fb-feature-grid,.fb-sharing-grid,.fb-faq-grid { gap: 36px; }
    .fb-phone-pair { gap: 14px; }
    .fb-contact-panel { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
    .product-familyboard .fb-hero .product-intro-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
    .product-familyboard .fb-hero h1 { font-size: clamp(2.5rem,8vw,3.75rem); }
    .fb-hero-art { width: min(100%,420px); margin-inline: auto; }
    .fb-hero-phone { width: min(62%,250px); }
    .fb-hero-spark { right: 0; width: 48px; }
    .fb-note-slip { right: 0; padding: 14px 18px; }
    .fb-note-slip strong { font-size: 1.2rem; }
    .fb-hero-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fb-index { grid-template-columns: 1fr; gap: 4px; padding-block: 24px 40px !important; }
    .fb-feature,.fb-start,.fb-sharing,.fb-faq { padding-block: 56px; }
    .fb-feature-grid,.fb-sharing-grid,.fb-faq-grid { grid-template-columns: 1fr; gap: 36px; }
    .fb-feature-grid-reverse .fb-feature-copy { grid-row: 1; }
    .fb-phone-pair { max-width: 480px; margin-inline: auto; }
    .fb-phone-pair .fb-screen-link:last-child { margin-top: 36px; }
    .fb-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
    .fb-steps h3 { margin-top: 18px; }
    .fb-sharing-levels > div { padding: 20px; }
    .fb-contact-panel .tp-button { font-size: .85rem; }
    .fb-contact-panel br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .product-familyboard *, .product-familyboard *::before, .product-familyboard *::after { scroll-behavior: auto; animation: none; transition: none; } }