/* =============================================================================
   PRICE BROKER — feature explainer page
   CR: fysh-price-broker-2026-06-27
   Loaded only by price-broker.php via $page_css.
============================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pb-hero {
    background: linear-gradient(150deg, var(--navy) 0%, #12305A 55%, #1A3A6E 100%);
    padding: 5rem 0 4rem;
    text-align: center;
}

.pb-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.pb-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(201,168,76,0.14);
    color: var(--gold-lt, #E8C96A);
    border: 1px solid rgba(201,168,76,0.32);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
}

.pb-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.05;
    margin: 0;
}

.pb-hero__sub {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    max-width: 54ch;
    margin: 0;
}

.pb-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.pb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.82);
    padding: 0.35rem 0.85rem;
    font-weight: 500;
}
.pb-pill svg { color: var(--gold-lt, #E8C96A); flex-shrink: 0; }

.pb-hero__cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ── What it is — two-column ─────────────────────────────────────────────── */
.pb-what {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
}
@media (min-width: 900px) {
    .pb-what { flex-direction: row; align-items: flex-start; gap: 4rem; }
    .pb-what__copy  { flex: 1; }
    .pb-what__diagram { flex-shrink: 0; }
}

.pb-what__copy { font-size: 0.92rem; color: var(--muted); line-height: 1.7; }
.pb-what__copy .section-eyebrow { display: block; margin-bottom: 0.5rem; }
.pb-what__copy .section-heading { margin-bottom: 1rem; }
.pb-what__copy p + p { margin-top: 0.85rem; }

/* Offer exchange diagram */
.pb-flow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 320px;
    max-width: 100%;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(15,35,64,0.08);
}

.pb-flow__party {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pb-flow__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-lt, #E8C96A);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pb-flow__avatar--buyer { background: var(--blue); color: #fff; }

.pb-flow__exchange {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pb-flow__msg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 0.78rem;
    max-width: 85%;
}
.pb-flow__msg--out { align-self: flex-start; }
.pb-flow__msg--in  { align-self: flex-end;   background: #EBF3FC; }
.pb-flow__msg--accepted {
    background: #E6F5EC;
    outline: 1.5px solid #2D7A4F;
}

.pb-flow__tag {
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.pb-flow__msg--accepted .pb-flow__tag { color: #2D7A4F; }
.pb-flow__text {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 0.88rem;
    flex: 1;
}
.pb-flow__ts {
    font-size: 0.62rem;
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.pb-flow__lock {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    color: var(--muted);
    justify-content: center;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border);
    margin-top: 0.25rem;
}

/* ── When to use — two cards ─────────────────────────────────────────────── */
.pb-when-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pb-when-grid { grid-template-columns: 1fr 1fr; } }

.pb-when-card {
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pb-when-card--yes {
    background: #EAF7EE;
    border: 1.5px solid rgba(45,122,79,0.3);
}
.pb-when-card--no  {
    background: #FFF0F0;
    border: 1.5px solid rgba(200,60,60,0.2);
}

.pb-when-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pb-when-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pb-when-card--yes .pb-when-card__icon { background: #2D7A4F; color: #fff; }
.pb-when-card--no  .pb-when-card__icon { background: #C83C3C; color: #fff; }

.pb-when-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.pb-when-card--yes .pb-when-card__title { color: #1A5E36; }
.pb-when-card--no  .pb-when-card__title { color: #8B1A1A; }

.pb-when-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.pb-when-card__list li {
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 1.1rem;
    position: relative;
}
.pb-when-card--yes .pb-when-card__list li { color: #1A5E36; }
.pb-when-card--no  .pb-when-card__list li { color: #7A1818; }
.pb-when-card__list li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 0.75rem;
}
.pb-when-card--yes .pb-when-card__list li::before { content: '✓'; color: #2D7A4F; }
.pb-when-card--no  .pb-when-card__list li::before { content: '✗'; color: #C83C3C; }

/* ── How it works steps ──────────────────────────────────────────────────── */
.pb-steps {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}
.pb-steps::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 48px;
    bottom: 48px;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold) 0%, rgba(201,168,76,0.15) 100%);
}

.pb-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    position: relative;
}

.pb-step__num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-lt, #E8C96A);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 3px solid var(--cream);
    box-shadow: 0 0 0 2px var(--gold);
}

.pb-step__body { flex: 1; padding-top: 0.5rem; }

.pb-step__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.4rem;
}

.pb-step__text {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Limitations band ────────────────────────────────────────────────────── */
.pb-limits-band {
    background: var(--navy);
    padding: 5rem 0;
}

.pb-limits-eyebrow { color: var(--gold-lt, #E8C96A); }

.pb-limits-heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.12;
    margin: 0.5rem 0 0.75rem;
}
.pb-limits-heading em { font-style: italic; color: rgba(255,255,255,0.55); }

.pb-limits-intro {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.60);
    max-width: 50ch;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.pb-limits-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pb-limits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-limits-grid { grid-template-columns: repeat(4, 1fr); } }

.pb-limit {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pb-limit__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(200,60,60,0.18);
    border: 1px solid rgba(200,60,60,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F87171;
    flex-shrink: 0;
}

.pb-limit__title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}

.pb-limit__body {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.60);
    line-height: 1.65;
    margin: 0;
}
.pb-limit__body strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ── Security section ────────────────────────────────────────────────────── */
.pb-security {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    flex-direction: column;
}
@media (min-width: 900px) {
    .pb-security { flex-direction: row; }
    .pb-security__copy { flex: 1; }
}

.pb-security__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--cream) 0%, #EDE9DF 100%);
    border: 1px solid rgba(201,168,76,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
}

.pb-security__copy .section-eyebrow { display: block; margin-bottom: 0.5rem; }
.pb-security__copy .section-heading  { margin-bottom: 1.5rem; }

.pb-security__facts {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pb-security__facts { grid-template-columns: repeat(2, 1fr); } }

.pb-security__fact h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 0.4rem;
}
.pb-security__fact p {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.pb-cta-band {
    background: linear-gradient(150deg, var(--navy) 0%, #12305A 55%, #1A3A6E 100%);
    padding: 5.5rem 0;
    text-align: center;
}

.pb-cta-inner {
    max-width: 580px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pb-cta-heading {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin: 0;
}
.pb-cta-heading em { font-style: italic; color: var(--gold-lt, #E8C96A); }

.pb-cta-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.68);
    line-height: 1.65;
    max-width: 46ch;
    margin: 0;
}

.pb-cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.pb-cta-legal {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.30);
    line-height: 1.5;
    max-width: 52ch;
    margin: 0.5rem 0 0;
    text-align: center;
}

/* =============================================================================
   ADDED: "Replacing the negotiator" (problem + comparison) & smart-features grid
   CR: fysh-price-broker-enhance-2026-07-17
============================================================================= */
.pb-lead {
    max-width: 760px;
    color: var(--muted, #6B7A8D);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto 0.8rem;   /* centred column, left-aligned text */
}

/* Pain-point list — how the offer stage gets frustrated */
.pb-pains {
    list-style: none;
    margin: 1.5rem auto 0;
    padding: 0;
    max-width: 760px;
    display: grid;
    gap: 0.85rem;
}
.pb-pains li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--muted, #6B7A8D);
    font-size: 0.95rem;
    line-height: 1.65;
}
.pb-pains li::before {
    content: '\2715'; /* ✕ */
    position: absolute;
    left: 0;
    top: 0;
    color: #C83C3C;
    font-weight: 700;
}
.pb-pains strong { color: var(--navy, #0F2340); }

/* Comparison table — agency negotiator vs Price Broker */
.pb-compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-lg, 20px);
    max-width: 900px;
    margin: 2rem auto 0.75rem;
}
.pb-compare {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.pb-compare th,
.pb-compare td {
    padding: 0.9rem 1.1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border, #E2E8F0);
}
.pb-compare thead th {
    background: var(--navy, #0F2340);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
}
.pb-compare thead th.pb-compare__fysh { background: var(--blue, #1E5BA8); }
.pb-compare tbody th {
    font-weight: 600;
    color: var(--navy, #0F2340);
    background: #FAFBFC;
    width: 32%;
}
.pb-compare tbody td { color: var(--muted, #6B7A8D); }
.pb-compare td.pb-compare__fysh {
    background: rgba(201,168,76,0.08);
    color: var(--navy, #0F2340);
    font-weight: 500;
}
.pb-compare tr:last-child th,
.pb-compare tr:last-child td { border-bottom: 0; }
.pb-note {
    font-size: 0.8rem;
    color: #9BA8B4;
    margin: 0.5rem auto 0;
    max-width: 900px;
}

/* Smart-features grid */
.pb-feature-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pb-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-feature-grid { grid-template-columns: repeat(3, 1fr); } }
.pb-feature {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-lg, 20px);
    padding: 1.5rem;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.pb-feature:hover {
    box-shadow: var(--shadow-md, 0 6px 20px rgba(15,35,64,.13));
    transform: translateY(-3px);
    border-color: rgba(201,168,76,0.5);
}
.pb-feature__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(201,168,76,0.14);
    color: #9A7B1F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    font-size: 22px;
}
.pb-feature__title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy, #0F2340);
    margin: 0 0 0.4rem;
}
.pb-feature__text {
    font-size: 0.875rem;
    color: var(--muted, #6B7A8D);
    line-height: 1.65;
    margin: 0;
}

/* Emphasis callout — the incentive conflict behind an agent negotiator */
.pb-callout {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(201,168,76,0.10), rgba(201,168,76,0.03));
    border: 1px solid rgba(201,168,76,0.35);
    border-left: 4px solid var(--gold, #C9A84C);
    border-radius: var(--radius-lg, 20px);
}
.pb-callout__title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.2rem;
    color: var(--navy, #0F2340);
    margin: 0 0 0.7rem;
}
.pb-callout p {
    color: #4A5568;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 0.8rem;
}
.pb-callout p:last-child { margin-bottom: 0; }
.pb-callout strong { color: var(--navy, #0F2340); }