/* ==================================================================
   MyPetsFiles Design System — mpf-public.css
   Version 20A Phase 1. Public-site composition (landing page,
   privacy/terms placeholders) built on mpf-design-system.css tokens
   and components. Login/Register/Pricing will reuse the same
   .mpf-site-header/.mpf-site-footer/.mpf-marketing-hero building
   blocks in later phases rather than each page inventing its own.
   ================================================================== */

.mpf-announcement-banner{
    text-align:center;
    padding:10px 16px;
    font-weight:var(--mpf-weight-medium);
    font-size:var(--mpf-text-caption);
    background:var(--mpf-surface-2);
    color:var(--mpf-text-primary);
    border-bottom:1px solid var(--mpf-border);
}
.mpf-announcement-banner a{color:var(--mpf-accent);text-decoration:underline;}
.mpf-announcement-warning{background:var(--mpf-warning-bg);color:var(--mpf-warning);}
.mpf-announcement-success{background:var(--mpf-success-bg);color:var(--mpf-success);}

/* ---------- Shared site header ---------- */
.mpf-site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--mpf-bg-page);
    border-bottom:1px solid var(--mpf-border);
}
.mpf-site-header-inner{
    width:min(1180px,94%);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--mpf-space-4);
    padding:14px 0;
}
.mpf-site-logo{
    font-size:18px;
    font-weight:var(--mpf-weight-medium);
    color:var(--mpf-text-primary);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
}
.mpf-site-logo img{max-height:34px;max-width:180px;object-fit:contain;}

.mpf-site-nav{
    display:flex;
    align-items:center;
    gap:var(--mpf-space-4);
}
.mpf-site-nav a{
    color:var(--mpf-text-secondary);
    text-decoration:none;
    font-size:var(--mpf-text-body);
    font-weight:var(--mpf-weight-medium);
}
.mpf-site-nav a:hover{color:var(--mpf-text-primary);}
.mpf-site-nav .mpf-btn{padding:8px 16px;min-height:auto;}

.mpf-site-nav-toggle{
    display:none;
    background:transparent;
    border:1px solid var(--mpf-border);
    color:var(--mpf-text-primary);
    border-radius:var(--mpf-radius-sm);
    width:40px;
    height:40px;
    font-size:18px;
    cursor:pointer;
}

@media(max-width:767px){
    .mpf-site-nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
    .mpf-site-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:var(--mpf-surface-1);
        border-bottom:1px solid var(--mpf-border);
        padding:var(--mpf-space-2) var(--mpf-space-4) var(--mpf-space-4);
    }
    .mpf-site-nav.is-open{display:flex;}
    .mpf-site-nav a{padding:12px 0;border-bottom:1px solid var(--mpf-border);}
    .mpf-site-nav .mpf-btn{margin-top:var(--mpf-space-2);text-align:center;}
}

/* ---------- Marketing hero ---------- */
.mpf-marketing-hero{
    padding:56px 0 40px;
    background:linear-gradient(160deg, var(--mpf-navy) 0%, var(--mpf-navy-2) 100%);
}
.mpf-marketing-hero-inner{
    width:min(1180px,94%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:36px;
    align-items:center;
}
.mpf-marketing-hero-text h1{
    margin:0;
    font-size:32px;
    font-weight:var(--mpf-weight-medium);
    color:var(--mpf-text-primary);
    line-height:1.15;
}
.mpf-marketing-hero-text p{
    margin:16px 0 0;
    font-size:var(--mpf-text-body);
    color:var(--mpf-text-secondary);
    line-height:1.6;
    max-width:52ch;
}
.mpf-marketing-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--mpf-space-3);
    margin-top:var(--mpf-space-4);
}

/* Decorative dashboard/QR preview mock -- CSS-only illustration, not a
   screenshot, aria-hidden in the template since it conveys no content. */
.mpf-preview-mock{display:flex;flex-direction:column;gap:var(--mpf-space-3);}
.mpf-preview-mock-card{
    background:var(--mpf-surface-1);
    border:1px solid var(--mpf-edge);
    border-radius:var(--mpf-radius-lg);
    box-shadow:var(--mpf-shadow-md);
    padding:var(--mpf-space-4);
    display:flex;
    align-items:center;
    gap:var(--mpf-space-3);
}
.mpf-preview-ring{
    width:56px;
    height:56px;
    border-radius:50%;
    flex-shrink:0;
    background:conic-gradient(var(--mpf-accent-cyan) 0% 72%, rgba(255,255,255,.08) 72% 100%);
}
.mpf-preview-lines{flex:1;display:flex;flex-direction:column;gap:8px;}
.mpf-preview-line{
    display:block;
    height:8px;
    border-radius:var(--mpf-radius-pill);
    background:rgba(255,255,255,.1);
    width:60%;
}
.mpf-preview-line--wide{width:85%;height:12px;}
.mpf-preview-mock-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--mpf-space-2);
}
.mpf-preview-tile{
    height:52px;
    background:var(--mpf-surface-1);
    border:1px solid var(--mpf-border);
    border-radius:var(--mpf-radius-md);
}

@media(min-width:900px){
    .mpf-marketing-hero-inner{grid-template-columns:1.1fr 0.9fr;}
    .mpf-marketing-hero-text h1{font-size:44px;}
}

/* ---------- Feature row ---------- */
.mpf-feature-row{padding:48px 0;}
.mpf-feature-row-inner{
    width:min(1180px,94%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:var(--mpf-space-3);
}
.mpf-feature-card{text-align:left;}
.mpf-feature-icon{
    width:36px;
    height:36px;
    border-radius:var(--mpf-radius-sm);
    margin-bottom:var(--mpf-space-2);
}

@media(min-width:640px){
    .mpf-feature-row-inner{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:960px){
    .mpf-feature-row-inner{grid-template-columns:repeat(4,1fr);}
}

/* ---------- Final CTA ---------- */
.mpf-final-cta{
    padding:56px 0 64px;
    text-align:center;
    background:var(--mpf-surface-2);
}
.mpf-final-cta-inner{width:min(700px,94%);margin:0 auto;}
.mpf-final-cta h2{
    margin:0 0 var(--mpf-space-2);
    font-size:26px;
    font-weight:var(--mpf-weight-medium);
    color:var(--mpf-text-primary);
}

/* ---------- Footer ---------- */
.mpf-site-footer{
    padding:24px 0;
    border-top:1px solid var(--mpf-border);
    background:var(--mpf-bg-page);
}
.mpf-site-footer-inner{
    width:min(1180px,94%);
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--mpf-space-3);
    font-size:var(--mpf-text-caption);
    color:var(--mpf-text-secondary);
}
.mpf-site-footer-nav{display:flex;gap:var(--mpf-space-4);}
.mpf-site-footer-nav a{color:var(--mpf-text-secondary);text-decoration:none;}
.mpf-site-footer-nav a:hover{color:var(--mpf-text-primary);}

/* ---------- Legal placeholder page ---------- */
.mpf-legal-page{padding:48px 0 64px;}
.mpf-legal-page-inner{width:min(760px,94%);margin:0 auto;}
.mpf-legal-page-inner h1{
    margin:0 0 var(--mpf-space-4);
    font-size:26px;
    font-weight:var(--mpf-weight-medium);
    color:var(--mpf-text-primary);
}

@media(prefers-reduced-motion:reduce){
    .mpf-site-nav{transition:none;}
}