/* =====================================================================
   New Hope Weight Loss — Unified Funnel Theme
   Single source of truth for the PM USA (my.newhopeweightloss.com)
   new-patient funnel, restyled to match Damon's brand.

   Palette + type extracted from:
     - exports/damon-medical-intake-source.html
     - docs/pmusa-intake/qualify_quiz_source_damon.html

   NOTE (design decision): Damon runs TWO accent families live —
     - Quiz  uses gold  #857026 (Cormorant Garamond + DM Sans)
     - Intake uses teal  #1A7A8C
   To make the WHOLE process feel connected (Chip's ask), this unified
   theme standardizes on Damon's serif/gold editorial system as the
   PRIMARY brand (his public marketing look) and keeps teal + green as
   secondary/support accents. Every step now shares these tokens.
   ===================================================================== */

:root {
    /* ---- Surfaces ---- */
    --bg:          #F8FAF7;   /* off-white page background */
    --bg-card:     #FFFFFF;
    --bg-subtle:   #F0F4EE;
    --bg-input:    rgba(0,0,0,0.03);

    /* ---- Text ---- */
    --text:        #1A1F16;
    --text-sub:    #3D4A38;
    --text-muted:  #5A6B54;

    /* ---- Primary accent (Damon gold) ---- */
    --accent:      #857026;
    --accent-rgb:  133,112,38;
    --accent-h:    #75611F;
    --accent-lt:   rgba(var(--accent-rgb),0.08);
    --accent-lt2:  rgba(var(--accent-rgb),0.15);

    /* ---- Secondary accents (from intake / greens) ---- */
    --teal:        #1A7A8C;
    --teal-h:      #2A9DB2;
    --green:       #10B981;
    --green-deep:  #3D4A38;

    /* ---- Borders ---- */
    --border:      rgba(var(--accent-rgb),0.12);
    --border-med:  rgba(var(--accent-rgb),0.22);

    /* ---- Status ---- */
    --success:     #10B981;
    --success-bg:  rgba(16,185,129,0.06);
    --success-border: rgba(16,185,129,0.15);
    --urgent:      #dc2626;
    --reject-bg:   rgba(220,38,38,0.05);
    --reject-border: rgba(220,38,38,0.15);

    /* ---- Geometry ---- */
    --radius:      12px;
    --radius-lg:   20px;
    --shadow:      0 4px 24px rgba(0,0,0,0.06);
    --shadow-md:   0 8px 40px rgba(0,0,0,0.10);

    /* ---- Type ---- */
    --font-serif:  'Cormorant Garamond', Georgia, serif;
    --font-body:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:   'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* ============ SHARED HEADER ============ */
.uf-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.uf-logo {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}
.uf-logo span { color: var(--accent); }
.uf-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.uf-phone {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.uf-phone:hover { color: var(--accent-h); }
.uf-hipaa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.uf-hipaa svg { width: 14px; height: 14px; stroke: var(--success); fill: none; stroke-width: 2; }

/* ============ SHELL / WRAP ============ */
.uf-main { flex: 1; }
.uf-wrap {
    max-width: 680px;
    margin: 2rem auto;
    padding: 0 1.25rem 3rem;
    width: 100%;
}

/* ============ MASTER PROGRESS (Step X of 3) ============ */
.uf-progress {
    max-width: 680px;
    margin: 1.5rem auto 0;
    padding: 0 1.25rem;
    width: 100%;
}
.uf-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.uf-progress-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.uf-progress-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
}
.uf-progress-bar { display: flex; gap: 6px; }
.uf-progress-seg {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.4s;
}
.uf-progress-seg.active { background: var(--accent); }
.uf-progress-seg.done   { background: var(--accent); opacity: 0.45; }

/* ============ SHARED CARD ============ */
.uf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow);
}
@media (max-width: 480px) { .uf-card { padding: 1.5rem 1.25rem; } }

/* ============ HEADINGS ============ */
.uf-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.uf-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 0.4rem;
}
.uf-title em { font-style: italic; color: var(--accent); }
.uf-sub {
    color: var(--text-sub);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ============ BUTTONS ============ */
.uf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 1.6rem;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.uf-btn-primary { background: var(--accent); color: #fff; }
.uf-btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: var(--shadow); }
.uf-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.uf-btn-back {
    background: var(--bg-subtle);
    color: var(--text-sub);
    border: 1px solid var(--border);
}
.uf-btn-back:hover { color: var(--text); }
.uf-btn-block { width: 100%; }

/* ============ FIELDS ============ */
.uf-field { margin-bottom: 1rem; }
.uf-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}
.uf-field label .req { color: var(--urgent); }
.uf-field input, .uf-field select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.uf-field input:focus, .uf-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12);
}
.uf-field input::placeholder { color: var(--text-muted); }
.uf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.uf-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

/* ============ CHECK ITEMS (intake) ============ */
.uf-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 7px;
    border-radius: var(--radius);
    background: var(--accent-lt);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    font-size: 0.9rem;
    line-height: 1.5;
}
.uf-check:hover { border-color: var(--border-med); background: var(--accent-lt2); }
.uf-check input { margin-top: 2px; width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--accent); }
.uf-check.contra input { accent-color: var(--urgent); }
.uf-check.separator {
    margin-top: 1rem;
    background: var(--success-bg);
    border-color: var(--success-border);
}
.uf-check.separator input { accent-color: var(--success); }

/* ============ NAV ROW ============ */
.uf-nav { display: flex; gap: 0.75rem; margin-top: 1.75rem; }
.uf-nav .uf-btn { flex: 1; }

/* ============ REJECT / SUCCESS BOXES ============ */
.uf-reject, .uf-success {
    margin-top: 1.25rem;
    padding: 1.75rem;
    border-radius: var(--radius);
    text-align: center;
}
.uf-reject { background: var(--reject-bg); border: 1px solid var(--reject-border); }
.uf-reject h3 { color: var(--urgent); font-size: 1.05rem; margin-bottom: 0.5rem; }
.uf-reject p { font-size: 0.875rem; color: var(--text-sub); line-height: 1.7; }
.uf-success { background: var(--success-bg); border: 1px solid var(--success-border); }
.uf-ico {
    width: 52px; height: 52px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.uf-ico.ok { background: var(--success); }
.uf-ico.no { background: var(--urgent); }
.uf-ico svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.5; }

/* ============ FINE PRINT / TRUST ============ */
.uf-fine {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 0.75rem;
}
.uf-fine a { color: var(--accent); text-decoration: none; }
.uf-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.uf-trust {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.uf-trust svg { width: 15px; height: 15px; stroke: var(--success); fill: none; stroke-width: 2; }

/* ============ FOOTER ============ */
.uf-compliance {
    max-width: 980px;
    margin: 1.5rem auto 0;
    padding: 0 1.25rem;
}
.uf-compliance p {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}
.uf-footer {
    text-align: center;
    padding: 1.5rem 1.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}
.uf-footer a { color: var(--accent); text-decoration: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 600px) {
    .uf-wrap { margin-top: 1.25rem; }
    .uf-row2 { grid-template-columns: 1fr; }
    input, select, textarea { font-size: 16px !important; } /* no iOS zoom */
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}