/* Postpartum landing page styles.
   Tokens at the top — change once, see everywhere. */

:root {
    /* Layout — section horizontal padding lives here. */
    --flow-section-px: 8px;

    /* Brand colors used on this page. */
    --c-terracotta: #CB734B;
    --c-terracotta-dark: #B8754D;
    --c-ink: #2E2A27;
    --c-ink-soft: #332A2A;
    --c-body: #5F6368;
    --c-body-2: #4A5565;
    --c-muted: #8A8580;
    --c-cream: #FCF5F2;
    --c-cream-deep: #EDE5C1;
    --c-border: #E7E1DC;
    --c-chip-dark: #491E0A;

    /* Fonts. */
    --ff-beltram: 'Beltram Test', Georgia, serif;
    --ff-mono: 'PP Right Serif Mono', 'Times New Roman', Georgia, serif;
    --ff-garamond: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --ff-frank: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
    --ff-karla: 'Karla', system-ui, -apple-system, sans-serif;
}

/* Sample-strategy tab list — hide scrollbar but keep horizontal scroll. */
[data-sample-tabs] { scrollbar-width: none; -ms-overflow-style: none; }
[data-sample-tabs]::-webkit-scrollbar { display: none; }
[data-sample-panels] { touch-action: pan-y; }

/* Status chips for the At Home / In-Clinic priority cards. */
.badge-have, .badge-add {
    font-family: var(--ff-beltram);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    color: var(--c-ink);
    white-space: nowrap;
}
.badge-have { background: #E1E8F4; }
.badge-add  { background: var(--c-cream-deep); }

/* Pricing-grid + FAQ icon fonts. */
.font-frank { font-family: var(--ff-frank); }
.font-karla { font-family: var(--ff-karla); }
.font-chonburi { font-family: 'Chonburi', Georgia, serif; }

/* FAQ accordion — JS toggles aria-expanded; we toggle visibility from that. */
[data-faq-item] [data-faq-body] { display: none; }
[data-faq-item][aria-expanded="true"] [data-faq-body] { display: block; }

/* ---------- Section wrapper ---------- */

.flow-section {
    padding-left: var(--flow-section-px);
    padding-right: var(--flow-section-px);
}

/* ---------- Typography ---------- */

.flow-eyebrow {
    color: var(--c-terracotta);
    font-family: var(--ff-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.352px;
}

.flow-h2 {
    color: var(--c-ink);
    font-family: var(--ff-beltram);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.352px;
}

/* ---------- CTA button (used at top and bottom of page) ---------- */

.flow-cta {
    display: inline-flex;
    width: 208px;
    height: 34px;
    padding: 0 28px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #FFF;
    font-family: var(--ff-beltram);
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.2px;
    border-radius: 32px;
    border: 1px solid #000;
    background: var(--c-ink);
    transition: opacity 0.15s ease;
}
.flow-cta:hover { opacity: 0.9; }

/* Sticky bottom CTA — mobile only, always pinned to the viewport bottom. */
.flow-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
    .flow-sticky-cta { display: none; }
}

/* ---------- Dashed terracotta divider ---------- */

.flow-divider {
    height: 1px;
    background-image: linear-gradient(to right, var(--c-terracotta) 50%, transparent 50%);
    background-size: 6px 1px;
    background-repeat: repeat-x;
}

/* ---------- Concern chip (data-tone="dark" for darker variant) ---------- */

.flow-chip {
    display: inline-flex;
    height: 24px;
    padding: 2px 6px;
    align-items: center;
    color: #FFF;
    font-family: var(--ff-beltram);
    font-size: 12px;
    border-radius: 16px;
    background: var(--c-terracotta);
}
.flow-chip[data-tone="dark"] { background: var(--c-chip-dark); }

/* ---------- White card with subtle border ---------- */

.flow-card {
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--c-border);
    background: #FFF;
}