/* =====================================================================
   page-ui.css — shared UI for the new content pages
   (founder, drivers, safety, pricing, etc.)
   All classes prefixed .pf- so nothing here affects existing pages.
   ===================================================================== */

:root{
    --pf-green:rgb(133,169,4);
    --pf-green-lt:#b9d95a;
    --pf-dark:#1f2c22;
    --pf-muted:#6b7280;
    --pf-line:#e9e9e4;
    --pf-soft:#f7f7f4;
}

/* clears the fixed site header on pages that have no top banner */
.pf-offset{height:78px}

/* ---------- breadcrumb bar ---------- */
.pf-crumb{background:var(--pf-soft);border-bottom:1px solid #e7e7e0;padding:.6rem 0;font-size:.9rem}
.pf-crumb .breadcrumb{margin:0;--bs-breadcrumb-divider:'\203A'}
.pf-crumb .breadcrumb-item+.breadcrumb-item::before{color:#9aa39a;padding:0 .55rem}
.pf-crumb a{color:var(--pf-green);text-decoration:none}
.pf-crumb a:hover{text-decoration:underline}

/* ---------- hero ---------- */
.pf-hero{
    background:linear-gradient(135deg,#122a17 0%,#1e4526 55%,#2b5c31 100%);
    color:#fff;padding:56px 0 64px;position:relative;overflow:hidden;
}
.pf-hero::after{content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 85% 15%,rgba(133,169,4,.28),transparent 45%);pointer-events:none}
.pf-hero .container{position:relative;z-index:1}
.pf-hero h1{color:#fff;font-size:2.6rem;line-height:1.15;margin:0 0 .9rem;font-weight:700}
.pf-hero h1 span{color:var(--pf-green-lt)}
.pf-hero a{color:var(--pf-green-lt)}
.pf-eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;font-weight:700;
    color:var(--pf-green-lt);margin-bottom:.6rem}
.pf-lede{color:#dbe6cf;font-size:1.06rem;line-height:1.7;margin-bottom:0}
.pf-hero--center{text-align:center}
.pf-hero--center .pf-lede{max-width:820px;margin:0 auto}

/* answer box: the direct 40-55 word answer for snippets/AI */
.pf-answer{background:rgba(255,255,255,.1);border-left:4px solid var(--pf-green-lt);
    border-radius:0 12px 12px 0;padding:1.15rem 1.4rem;margin-top:1.4rem;text-align:left}
.pf-answer p{margin:0;color:#eef4e4;font-size:1.05rem;line-height:1.7}

/* ---------- photo ---------- */
.pf-photo{width:250px;height:250px;border-radius:50%;object-fit:cover;
    border:5px solid rgba(255,255,255,.9);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pf-photo--sm{width:170px;height:170px;border-width:4px}

/* ---------- chips ---------- */
.pf-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.pf-hero--center .pf-chips{justify-content:center}
.pf-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    border-radius:30px;padding:.34rem .9rem;font-size:.85rem;color:#eef4e4}
.pf-chip i{color:var(--pf-green-lt);margin-right:.35rem}

/* ---------- stat strip ---------- */
.pf-stats{background:#fff;border-bottom:1px solid #ececec}
.pf-stat{text-align:center;padding:1.5rem .5rem}
.pf-stat b{display:block;font-size:1.9rem;color:var(--pf-green);line-height:1;font-weight:700}
.pf-stat span{display:block;font-size:.82rem;color:var(--pf-muted);margin-top:.4rem}

/* ---------- sections & cards ---------- */
.pf-section{padding:52px 0}
.pf-section--soft{background:var(--pf-soft)}
.pf-h2{font-size:1.85rem;color:var(--pf-dark);margin:0 0 .5rem}
.pf-sub{color:var(--pf-muted);margin:0 0 1.8rem}
.pf-card{background:#fff;border:1px solid var(--pf-line);border-radius:14px;padding:1.7rem;height:100%;
    box-shadow:0 1px 3px rgba(0,0,0,.04);transition:transform .25s ease,box-shadow .25s ease}
.pf-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.09)}
.pf-card h2,.pf-card h3{font-size:1.28rem;margin:0 0 .9rem;color:var(--pf-dark)}
.pf-card h2 i,.pf-card h3 i{color:var(--pf-green);margin-right:.5rem}
.pf-card--sm{padding:1.3rem}
.pf-card--sm h3{font-size:1.1rem}
.pf-icon{font-size:1.6rem;color:var(--pf-green);margin-bottom:.6rem;display:block}

/* ---------- lists ---------- */
.pf-list{list-style:none;padding:0;margin:0}
.pf-list li{padding:.6rem 0;border-bottom:1px dashed #e8e8e2;font-size:.97rem}
.pf-list li:last-child{border-bottom:none}
.pf-list strong{color:var(--pf-dark)}
.pf-ticks{list-style:none;padding:0;margin:0}
.pf-ticks li{padding:.5rem 0 .5rem 1.8rem;position:relative;font-size:.97rem}
.pf-ticks li::before{content:"\f00c";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;
    position:absolute;left:0;color:var(--pf-green)}

/* ---------- quote ---------- */
.pf-quote{background:#f4f7ec;border-left:4px solid var(--pf-green);border-radius:0 12px 12px 0;
    padding:1.4rem 1.6rem;font-style:italic;color:#3c4a35;font-size:1.05rem;margin:0}

/* ---------- FAQ ---------- */
.pf-faq{background:#fff;border:1px solid var(--pf-line);border-radius:12px;padding:1.3rem 1.5rem;margin-bottom:.9rem}
.pf-faq h3{font-size:1.12rem;color:var(--pf-dark);margin:0 0 .5rem}
.pf-faq h3 i{color:var(--pf-green);margin-right:.5rem}
.pf-faq p{margin:0;color:#41504a}

/* ---------- table ---------- */
.pf-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--pf-line);
    border-radius:12px;overflow:hidden}
.pf-table th,.pf-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--pf-line);font-size:.95rem}
.pf-table th{background:#eef2e4;color:var(--pf-dark);font-weight:700}
.pf-table tr:last-child td{border-bottom:none}
.pf-table tbody tr:hover{background:#fafbf6}

/* ---------- CTA ---------- */
.pf-cta{background:var(--pf-soft);border-top:1px solid #e7e7e0;padding:48px 0;text-align:center}
.pf-cta h2{font-size:1.7rem;margin-bottom:.6rem;color:var(--pf-dark)}
.pf-btn{display:inline-block;padding:.8rem 1.7rem;border-radius:9px;font-weight:600;
    text-decoration:none;margin:.35rem;transition:.2s;font-size:1rem}
.pf-btn-wa{background:#25d366;color:#fff}
.pf-btn-wa:hover{background:#1eb455;color:#fff;transform:translateY(-2px)}
.pf-btn-alt{background:transparent;color:var(--pf-dark);border:2px solid var(--pf-dark)}
.pf-btn-alt:hover{background:var(--pf-dark);color:#fff;transform:translateY(-2px)}

/* ---------- responsive ---------- */
@media(max-width:767px){
    .pf-offset{height:66px}
    .pf-hero{padding:38px 0 44px;text-align:center}
    .pf-hero h1{font-size:1.95rem}
    .pf-photo{width:190px;height:190px;margin-bottom:1.6rem}
    .pf-photo--sm{width:150px;height:150px}
    .pf-chips{justify-content:center}
    .pf-section{padding:34px 0}
    .pf-h2{font-size:1.5rem}
    .pf-answer{text-align:left}
    .pf-table{display:block;overflow-x:auto}
}