/* HumanUp professional referral pages | v2026-08-24 | loaded ONLY by /pediatricians/ and /educators/
   =====================================================================================
   Shared stylesheet for the two sister pages described in
   Strategy/HumanUp_Pediatrician_and_Teacher_Landing_Page_Strategy.md.

   Loads AFTER css/style.css and inherits its design tokens, nav, footer, buttons,
   .eyebrow, .section-headline, .trust-card and .bookstrip. Everything here is either a
   new component or a page-scoped adjustment — no shared class is redefined in a way that
   could leak, because these two pages are the only consumers.

   Every selector below is prefixed .pro- or lives under .professional-page, so adding
   this file to a third page later is safe.
   ===================================================================================== */

/* --- 1. PAGE SHELL ------------------------------------------------------------- */

.professional-page {
    background-color: var(--bg-light);
}

.pro-section {
    width: 100%;
    padding: 100px 0;
}
.pro-section--white { background-color: var(--bg-white); }
.pro-section--light { background-color: var(--bg-light); }

.pro-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5%;
}

.pro-header {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.pro-header .section-headline { margin-bottom: 20px; }

.pro-intro {
    font-size: 1.125rem;
    line-height: 1.65;
    color: #475569;
    max-width: 680px;
    margin: 0 auto;
    text-wrap: pretty;
}
.pro-intro + .pro-intro { margin-top: 18px; }

/* Section headings are page-scoped smaller than the shared default. style.css sizes
   .section-headline at clamp(2.5rem, 4vw, 3.5rem), which on these pages left the H1 only
   1.08x the size of an H2 at 1440px — technically compliant everywhere but visually flat,
   and MOBILE_VISUAL_STANDARD.md asks for a ≥1.35 ratio. Lowering the H2 rather than
   inflating the H1 keeps the restrained tone this professional audience needs and lands
   the ratio at ~1.48 across every desktop width. */
.professional-page .section-headline {
    font-size: clamp(1.9rem, 3.1vw, 2.6rem);
    line-height: 1.18;
}

/* --- 2. HERO -------------------------------------------------------------------
   Same two-column-to-centred-column behaviour as the homepage hero. The phone trio is
   kept because it does two jobs at once on a professional page: it shows the actual
   product (the strategy doc asks for real product screens, not stock photography) and
   the flanking screens show the expert roster, which is the credibility this audience
   needs earliest. Per MOBILE_VISUAL_STANDARD.md Part 1, all three keep their outer
   bezels on mobile — a single phone communicates neither the team nor the product. */

.pro-hero {
    width: 100%;
    padding: 150px 5% 80px;
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

.pro-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.pro-hero-glow {
    position: absolute;
    top: -35%; right: -10%;
    width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(255, 207, 153, 0.14) 0%, rgba(99, 117, 207, 0.07) 42%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.pro-hero .headline {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 4.6vw, 4.2rem);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #111;
    margin: 0 0 22px;
    text-wrap: balance;
    max-width: 620px;
}

.pro-hero-lead {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 30px;
    max-width: 580px;
    text-wrap: pretty;
}

.pro-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

/* Secondary action. Underlined rather than a second filled button so the primary
   "Request materials" CTA keeps its weight — this audience has one job on the page. */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                 /* platform minimum tap target */
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: transparent;
    color: #0f172a;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.32);
}

.pro-hero-support {
    font-size: 16px;                  /* body copy floor per MOBILE_VISUAL_STANDARD.md */
    line-height: 1.62;
    color: #64748b;
    max-width: 560px;
    margin: 0;
    text-wrap: pretty;
}

/* Phone trio ---------------------------------------------------------------- */
.pro-hero-visual {
    position: relative;
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pro-stage {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.pro-screen {
    position: absolute;
    width: 232px;
    aspect-ratio: 9 / 19.5;
    background: #020408;
    border: 4px solid #1e293b;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.pro-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro-screen--center { z-index: 10; box-shadow: 0 36px 70px rgba(0, 0, 0, 0.24); }
.pro-screen--left   { z-index: 5; transform: translateX(-54%) scale(0.88) rotate(-4deg); top: 26px; }
.pro-screen--right  { z-index: 5; transform: translateX(54%) scale(0.88) rotate(4deg);  top: 26px; }

/* --- 3. PROOF LINE -------------------------------------------------------------
   The strategy doc asks for one restrained proof line, not an investor deck. */

.pro-proof {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    padding: 18px 34px;
    margin-top: 34px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.pro-proof-item {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}
.pro-proof-item strong {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: #B45309;              /* AA-safe amber: 4.86:1 on cream */
    margin-right: 7px;
}
.pro-proof-sep {
    width: 1px; height: 26px;
    background: rgba(0, 0, 0, 0.1);
}

/* --- 4. QUESTION CARDS ---------------------------------------------------------
   "What parents can bring to HumanUp" — six real parent questions. Deliberately not a
   topic-pill grid: the doc wants nuanced questions that show HumanUp is for ongoing
   parenting judgment, not factual lookup, so each needs room to be read. */

.pro-question-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pro-question {
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-card);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pro-question:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.09);
}
.pro-question-label {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B45309;
}
.pro-question-text {
    font-family: var(--font-serif);
    font-size: 1.14rem;
    line-height: 1.5;
    color: #1e293b;
    margin: 0;
    text-wrap: pretty;
}

/* --- 5. REFERRAL SCRIPTS -------------------------------------------------------
   The highest-value section per the doc: a professional should be able to skim and
   leave with one sentence they can comfortably say out loud. Styled as quotations so
   they read as speakable language rather than marketing copy. */

.pro-script-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pro-script {
    position: relative;
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--accent-apricot);
    border-radius: 18px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
}
.pro-script-when {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 14px;
}
.pro-script-quote {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.58;
    color: #1e293b;
    font-style: italic;
    margin: 0;
    text-wrap: pretty;
}

/* --- 6. EXPERT PORTRAIT ROW ---------------------------------------------------- */

.pro-expert-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 44px;
}
.pro-expert {
    text-align: center;
    text-decoration: none;
    display: block;
}
.pro-expert img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    background: #f1f5f9;
    margin-bottom: 14px;
    transition: transform 0.3s ease;
}
.pro-expert:hover img { transform: translateY(-4px); }
.pro-expert-name {
    display: block;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
    margin-bottom: 3px;
}
.pro-expert-role {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #64748b;
}

/* --- 7. SCOPE PANEL ------------------------------------------------------------
   Role boundary. The doc is explicit that this must be visible but not alarmist, and
   must not lead the page — so it is a calm bordered panel late in the flow, not a
   warning banner. */

.pro-scope {
    background: var(--bg-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-card);
    padding: 44px 44px 40px;
    max-width: 860px;
    margin: 0 auto;
}
.pro-scope .section-headline { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 18px; }
.pro-scope p {
    font-size: 1.05rem;
    line-height: 1.68;
    color: #475569;
    margin: 0 0 16px;
    text-wrap: pretty;
}
.pro-scope p:last-child { margin-bottom: 0; }

/* --- 8. MATERIALS GRID --------------------------------------------------------- */

.pro-materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.pro-material {
    background: var(--bg-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pro-section--light .pro-material { background: var(--bg-white); }
.pro-material-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255, 207, 153, 0.22);
    color: #B45309;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.pro-material-icon svg { width: 20px; height: 20px; }
.pro-material h3 {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}
.pro-material p {
    font-size: 16px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
    text-wrap: pretty;
}

.pro-request {
    text-align: center;
}
.pro-request-note {
    font-size: 16px;                  /* body copy floor */
    line-height: 1.6;
    color: #64748b;
    margin: 16px auto 0;
    max-width: 520px;
}

/* --- 9. FINAL CTA -------------------------------------------------------------- */

.pro-final {
    background: linear-gradient(135deg, #1e2b45 0%, #0f172a 100%);
    padding: 96px 5%;
    text-align: center;
}
.pro-final h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.15;
    font-weight: 500;
    color: #ffffff;
    max-width: 760px;
    margin: 0 auto 32px;
    text-wrap: balance;
}
.pro-final .pro-cta-row { justify-content: center; margin-bottom: 0; }
.pro-final .btn-secondary {
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}
.pro-final .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
}

/* --- 10. AI DISCLOSURE ---------------------------------------------------------
   One concise factual line, per the doc's instruction not to make "how the AI works"
   a section. Sits quietly above the footer. */

.pro-disclosure {
    background: var(--bg-light);
    padding: 34px 5% 40px;
}
.pro-disclosure p {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    line-height: 1.62;
    color: #64748b;
}

/* --- 11. FAQ ------------------------------------------------------------------- */

.pro-faq { max-width: 800px; margin: 0 auto; }

/* =====================================================================================
   RESPONSIVE
   Mobile rules follow MOBILE_VISUAL_STANDARD.md: one centred axis, the full phone trio
   with all three bezels visible, no text under 16px, 44px tap targets, and product
   imagery inside the opening frame.
   ===================================================================================== */

@media (max-width: 1024px) {
    .pro-question-grid,
    .pro-script-grid,
    .pro-materials-grid { grid-template-columns: repeat(2, 1fr); }
    .pro-expert-row { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
}

@media (max-width: 900px) {
    /* Fold budget: every element above the phone costs product visibility. Measured at
       393px, 120px of top padding plus a 26px gap left only 135px of phone inside the
       opening frame, under the 150px floor in MOBILE_VISUAL_STANDARD.md Part 1. */
    .pro-hero { padding-top: 100px; padding-bottom: 64px; }
    .pro-hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        text-align: center;
    }
    /* One centred axis: the phone trio is centred, so the copy above it is centred too.
       Left-aligned text above a centred image is an axis conflict, not a taste call. */
    .pro-hero .headline,
    .pro-hero-lead,
    .pro-hero-support { margin-left: auto; margin-right: auto; }
    .pro-cta-row { justify-content: center; }
    .pro-hero-visual { order: 2; margin-top: 16px; }
    .pro-hero-copy  { order: 1; }
}

@media (max-width: 760px) {
    .pro-section { padding: 72px 0; }
    .pro-header { margin-bottom: 40px; }

    .pro-question-grid,
    .pro-script-grid,
    .pro-materials-grid { grid-template-columns: 1fr; gap: 16px; }

    .pro-scope { padding: 34px 26px 30px; }
    .pro-final { padding: 74px 5%; }

    /* Full-width CTAs so neither is a small target on a phone. */
    .pro-cta-row { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-bottom: 18px; }
    .pro-cta-row .btn-primary,
    .pro-cta-row .btn-secondary { width: 100%; max-width: 340px; margin-inline: auto; }

    /* Phone trio, sized in vw so the composition scales without per-breakpoint tuning.
       Container height tracks the content aspect ratio. */
    .pro-hero-visual { height: min(calc(86vw + 20px), 420px); overflow: hidden; }
    .pro-screen { width: 39vw; max-width: 184px; border-radius: 24px; border-width: 3px; }
    .pro-screen--center { top: 0; }
    .pro-screen--left   { transform: translateX(-56%) scale(0.87) rotate(-3.5deg); top: 15px; }
    .pro-screen--right  { transform: translateX(56%) scale(0.87) rotate(3.5deg);  top: 15px; }

    .pro-proof { width: 100%; padding: 16px 18px; gap: 8px 16px; }
    .pro-proof-sep { display: none; }
    .pro-proof-item { font-size: 14px; white-space: normal; }
}

@media (max-width: 620px) {
    .pro-expert-row { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .pro-hero-lead { font-size: 1.14rem; margin-bottom: 22px; }

    /* H1:H2 ratio must hold at mobile widths, not just desktop — the standard asks for
       ≥1.35. The clamp MINIMUMS decide this at narrow widths, not the vw term: at 360px
       both headings were pinned to their minimums and the ratio fell to 1.31. Lowering
       the H2 floor to 1.5rem restores 1.40 while keeping it far above the 16px floor. */
    .pro-hero .headline { font-size: clamp(2.1rem, 9.2vw, 2.7rem); margin-bottom: 18px; }
    .professional-page .section-headline { font-size: clamp(1.5rem, 6.6vw, 2rem); }
}

@media (max-width: 380px) {
    .pro-expert-row { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }

    /* 320px is the narrowest supported width and the tightest fold budget on the site.
       Trimming the type and the spacing above the phone keeps product inside the
       opening frame rather than pushing it below. */
    .pro-hero { padding-top: 88px; }
    .pro-hero .headline { font-size: clamp(1.95rem, 9.6vw, 2.2rem); line-height: 1.12; margin-bottom: 14px; }
    .professional-page .section-headline { font-size: clamp(1.4rem, 7vw, 1.7rem); }
    .pro-hero-lead { font-size: 1.06rem; line-height: 1.5; margin-bottom: 18px; }
    .pro-hero-support { font-size: 16px; }
    .pro-hero-visual { margin-top: 12px; }
}

/* The homepage logo is not a link; on these pages it returns to the homepage, so it needs
   to clear the 44px minimum touch target. Scoped here so the shared nav is untouched. */
.professional-page .nav-logo {
    min-height: 44px;
    align-items: center;
}

/* Short legacy phones (iPhone SE and similar, ≤700px tall). The 150px product-above-fold
   floor in MOBILE_VISUAL_STANDARD.md was calibrated at 393×852; on a 568px-tall screen the
   homepage hero shows 0px of product too, so this is a site-wide characteristic rather than
   a regression here. These rules still claw back what they can by trimming the type and
   dropping the hero's supporting topic list — that list is a comma-separated echo of the six
   question cards in the next section, so nothing is lost that the page does not say better
   40px further down. */
@media (max-width: 900px) and (max-height: 700px) {
    .pro-hero { padding-top: 84px; padding-bottom: 48px; }
    .pro-hero .headline { font-size: clamp(1.85rem, 8.2vw, 2.15rem); line-height: 1.12; margin-bottom: 12px; }
    /* The H1 shrinks here, so the H2 must shrink with it or the ≥1.35 hierarchy ratio
       inverts — shrinking one heading in isolation is what broke it the first time. */
    .professional-page .section-headline { font-size: clamp(1.3rem, 5.8vw, 1.6rem); }
    .pro-hero-lead { font-size: 1.02rem; line-height: 1.48; margin-bottom: 14px; }
    .pro-hero-support { display: none; }
    .pro-cta-row { margin-bottom: 14px; }
    .pro-hero-visual { margin-top: 8px; height: min(calc(78vw + 16px), 340px); }
}

/* --- 12. BOOK STRIP ------------------------------------------------------------
   Ported from the homepage's page-scoped <style> block. The markup is shared but the
   CSS was never in css/style.css, so reusing the component brought the covers with no
   layout at all — they stacked full-width down the page. Worth remembering: a component
   that "already exists on the homepage" may exist only inside the homepage.
   The label sits at 16px here rather than the homepage's 14px, to hold the body-copy
   floor these pages are held to. */

.bookstrip { background: var(--bg-light); padding: 12px 24px 56px; overflow: hidden; }
.bookstrip-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.bookstrip-label {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 22px;
}
.bookstrip-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 16px;
}
.bookstrip-row img {
    height: 104px;
    width: auto;
    border-radius: 3px;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(2, 4, 8, 0.15);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    transform-origin: center bottom;
}
.bookstrip-row img:hover { transform: translateY(-5px) scale(1.12); box-shadow: 0 14px 30px rgba(2, 4, 8, 0.24); }
@media (hover: none) { .bookstrip-row img:hover { transform: none; } }

/* Below 1080px the row becomes a horizontal scroller rather than shrinking the covers
   past legibility. */
@media (max-width: 1080px) {
    .bookstrip-row {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 5% 18px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .bookstrip-row::-webkit-scrollbar { display: none; }
    .bookstrip-row img { scroll-snap-align: center; }
}
@media (max-width: 760px) {
    .bookstrip { padding: 30px 0 36px; }
    .bookstrip-label { padding: 0 20px; margin-bottom: 18px; }
    .bookstrip-row { gap: 12px; padding: 0 20px 18px; }
    .bookstrip-row img { height: 76px; }
}

/* --- 13. PEDIATRIC MEDICAL HOME + CREDENTIAL LINE ------------------------------ */

/* A calm centred panel rather than a card grid: this section's job is to place HumanUp
   inside a frame the reader already uses, so it should read as a short statement. */
.pro-medical-home {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.pro-medical-home .section-headline { margin-bottom: 22px; }
.pro-medical-home .pro-intro + .pro-intro { margin-top: 16px; }

/* Credential categories sit BELOW the numeric proof strip, not inside it. The two
   numbers have to stay instantly scannable; the categories are a different kind of
   proof and would crowd them. */
.pro-credentials {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
    color: #64748b;
    max-width: 620px;
    margin: 18px auto 0;
    text-wrap: balance;
}
@media (max-width: 620px) {
    .pro-credentials { font-size: 16px; margin-top: 14px; }
}