/* =============================================================================
   Page-composer blocks — resources/views/blocks/*.blade.php
   =============================================================================

   These components previously styled themselves with inline `style` attributes:
   168 of them across 21 blocks, 67 on /about-us alone. That put the most
   visible components on the site outside the design system entirely. Inline
   styles cannot be themed, do not respond to a token change, and win every
   specificity contest against the stylesheet meant to govern them.

   Three concrete consequences this file fixes:

     1. THREE CONTAINER WIDTHS. The blocks used 1180px, 1240px and 1100px for
        what is the same container, so content edges did not line up between
        sections as the page scrolled. One width now: --pf-blk-wrap.

     2. HARD-CODED GREYS. #0f172a, #1f2937, #475569 and #f8fafc were written
        directly into markup, bypassing --px-text-* / --px-bg-* and therefore
        surviving any future palette change untouched.

     3. UNTHEMEABLE TYPE. font-weight:800 appeared 21 times inline. It now
        resolves through the type tokens, and with Inter loaded as a variable
        axis (400..800) it finally renders as extra-bold rather than resolving
        down to the 700 face.

   Prefix: pf-blk-* — distinct from v1 .ree-*, v2 .px-* and Bootstrap.
   Depends on tokens.css.
   ============================================================================= */

:root {
    /* ONE container width for composed sections. Named here rather than
       reusing --px-container-xl (1280px) because 1180px is the measure the
       site was actually designed to and changing it would reflow every page. */
    --pf-blk-wrap: 1180px;
    --pf-blk-wrap-narrow: 760px;   /* prose / reading measure */
    --pf-blk-pad-y: 60px;
    --pf-blk-pad-y-sm: 48px;
    --pf-blk-pad-x: 24px;
}

/* --- Section shell ------------------------------------------------------- */
.pf-blk {
    padding: var(--pf-blk-pad-y) var(--pf-blk-pad-x);
    background: var(--px-bg-page, #fff);
}
.pf-blk--sm   { padding-block: var(--pf-blk-pad-y-sm); }
.pf-blk--tint { background: var(--px-bg-muted, #f8fafc); }
.pf-blk--flush{ padding-block: 0; }

.pf-blk__wrap        { max-width: var(--pf-blk-wrap); margin-inline: auto; }
.pf-blk__wrap--narrow{ max-width: var(--pf-blk-wrap-narrow); margin-inline: auto; }

/* --- Section header ------------------------------------------------------ */
.pf-blk__head {
    text-align: center;
    margin-bottom: 32px;
    max-width: 760px;
    margin-inline: auto;
}
.pf-blk__head--tight { margin-bottom: 28px; }
.pf-blk__head--left  { text-align: left; margin-inline: 0; }

.pf-blk__eyebrow {
    display: inline-block;
    font-size: var(--px-text-xs, .72rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--px-brand-600, #5b3df5);
    margin-bottom: 10px;
}

.pf-blk__title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--px-text-primary, #0f172a);
    text-wrap: balance;
}
.pf-blk__title--lg { font-size: clamp(2rem, 4vw, 3rem); }

.pf-blk__sub {
    font-size: 1.02rem;
    color: var(--px-text-secondary, #475569);
    line-height: 1.65;
    margin: 0;
}

/* --- Grid ---------------------------------------------------------------- */
.pf-blk__grid { display: grid; gap: 20px; }
.pf-blk__grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pf-blk__grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pf-blk__grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --- Card ---------------------------------------------------------------- */
.pf-blk__card {
    background: var(--px-bg-surface, #fff);
    border: 1px solid var(--px-border-subtle, #e6e9f0);
    border-radius: var(--px-radius-card);
    padding: 22px;
    box-shadow: var(--px-shadow-sm);
    transition: box-shadow var(--px-duration, 250ms) var(--px-ease-out, ease),
                transform var(--px-duration, 250ms) var(--px-ease-out, ease);
}
.pf-blk__card:hover { box-shadow: var(--px-shadow-md); transform: translateY(-2px); }
.pf-blk__card--flat { box-shadow: none; }
.pf-blk__card--flat:hover { box-shadow: none; transform: none; }

.pf-blk__card-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--px-text-primary, #0f172a);
    margin: 0 0 8px;
}
.pf-blk__card-text {
    font-size: .94rem;
    line-height: 1.65;
    color: var(--px-text-secondary, #475569);
    margin: 0;
}

/* --- Stat / counter ------------------------------------------------------ */
.pf-blk__stat-v {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pf-blk__stat-l {
    font-size: .85rem;
    opacity: .85;
    margin-top: 6px;
    font-weight: 500;
}

/* --- Media --------------------------------------------------------------- */
.pf-blk__img       { width: 100%; height: auto; display: block; }
.pf-blk__img--round{ border-radius: var(--px-radius-card); }
.pf-blk__img--lift { border-radius: 16px; box-shadow: var(--px-shadow-2xl); }
.pf-blk__img--fit  { width: 100%; height: 100%; object-fit: contain; }

.pf-blk__avatar {
    width: 96px; height: 96px;
    border-radius: var(--px-radius-full);
    object-fit: cover;
    margin: 0 auto 12px;
    display: block;
}
.pf-blk__avatar--sm { width: 38px; height: 38px; margin: 0; }

.pf-blk__ratio {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--px-bg-muted, #f8fafc) 0%, var(--px-bg-page, #fff) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--px-radius-card);
    overflow: hidden;
}

/* --- Icon ---------------------------------------------------------------- */
.pf-blk__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ede9fe, #e0f2fe);
    color: var(--px-brand-600, #5b3df5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex: none;
}
.pf-blk__icon-img { width: 44px; height: 44px; object-fit: contain; }

/* --- Prose --------------------------------------------------------------- */
.pf-blk__prose {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--px-text-primary, #1f2937);
}
.pf-blk__prose > :first-child { margin-top: 0; }
.pf-blk__prose > :last-child  { margin-bottom: 0; }

/* --- Pill / tag ---------------------------------------------------------- */
.pf-blk__pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--px-radius-full);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Utility ------------------------------------------------------------- */
.pf-blk__center { text-align: center; }
.pf-blk__mb-0   { margin-bottom: 0; }

@media (max-width: 640px) {
    :root { --pf-blk-pad-y: 44px; --pf-blk-pad-y-sm: 36px; --pf-blk-pad-x: 18px; }
    .pf-blk__stat-v { font-size: 2rem; }
}

/* =============================================================================
   Landing layout chrome (layouts/website/landing.blade.php)
   -----------------------------------------------------------------------------
   Header is a logo and one phone CTA, nothing else. A full nav on a landing
   page offers a visitor eight ways to leave before reaching the form, and on
   paid traffic every one of those is a lost click you paid for.
   ============================================================================= */
.pfl-head {
    background: var(--px-bg-surface, #fff);
    border-bottom: 1px solid var(--px-border-subtle, #e6e9f0);
    position: sticky;
    top: 0;
    z-index: var(--px-z-sticky, 1020);
}
.pfl-head__in {
    max-width: var(--pf-blk-wrap, 1180px);
    margin-inline: auto;
    padding: 14px var(--pf-blk-pad-x, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pfl-head__logo img { display: block; height: auto; max-width: 150px; }

.pfl-head__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--px-text-sm, .9rem);
    text-decoration: none;
    color: var(--px-white, #fff);
    background: var(--px-brand-primary, #6c5ce7);
    padding: 10px 18px;
    border-radius: var(--px-radius-full, 9999px);
    white-space: nowrap;
}
.pfl-head__cta:hover { background: var(--px-brand-primary-dark, #5a4fcf); color: #fff; }
.pfl-head__cta svg { width: 16px; height: 16px; flex: none; }

.pfl-foot {
    background: var(--px-bg-muted, #f1f5f9);
    border-top: 1px solid var(--px-border-subtle, #e6e9f0);
    margin-top: 48px;
}
.pfl-foot__in {
    max-width: var(--pf-blk-wrap, 1180px);
    margin-inline: auto;
    padding: 20px var(--pf-blk-pad-x, 24px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    font-size: var(--px-text-sm, .86rem);
    color: var(--px-text-secondary, #475569);
}
.pfl-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pfl-foot a { color: var(--px-text-secondary, #475569); text-decoration: none; }
.pfl-foot a:hover { color: var(--px-brand-primary, #6c5ce7); text-decoration: underline; }

@media (max-width: 640px) {
    .pfl-head__in  { padding: 10px 16px; }
    .pfl-head__cta span { display: none; }   /* icon-only, keeps the tap target */
    .pfl-head__cta { padding: 10px; }
    .pfl-foot__in  { flex-direction: column; align-items: flex-start; }
}