/* SleepSite Network — Homepage CSS v15.0.4
 * All themes drive their look through CSS variables set inline by SSN_Themes.
 * Layout variants are scoped via class names on .ssn-homepage and .ssn-hero--*.
 */

/* ── Base ────────────────────────────────────────────────────────────────── */
.ssn-homepage{
    max-width:1200px;margin:0 auto;
    background:var(--ssn-bg,#fff);
    color:var(--ssn-text,#1f2937);
    font-family:var(--ssn-font-body,system-ui,sans-serif);
    line-height:1.6;
}
.ssn-homepage *{box-sizing:border-box}
.ssn-homepage h1,
.ssn-homepage h2,
.ssn-homepage h3{font-family:var(--ssn-font-heading,Georgia,serif);color:var(--ssn-text);line-height:1.15;margin:0 0 .8rem}
.ssn-homepage h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.01em}
.ssn-homepage h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:1rem}
.ssn-homepage h3{font-size:1.15rem;font-weight:700}
.ssn-homepage p{margin:0 0 1rem}
.ssn-homepage a{color:var(--ssn-primary)}
.ssn-sec{padding:64px 22px}
.ssn-lead{font-size:1.05rem;color:var(--ssn-muted);max-width:680px;margin-bottom:1.5rem}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ssn-btn{
    display:inline-block;padding:14px 22px;
    background:var(--ssn-cta-bg);color:var(--ssn-cta-text)!important;
    text-decoration:none;font-weight:700;font-size:.95rem;
    border-radius:999px;
    transition:transform .15s ease,box-shadow .15s ease,opacity .15s;
    border:none;cursor:pointer;
}
.ssn-btn:hover{transform:translateY(-1px);opacity:.95}
.ssn-btn--ghost{background:transparent;color:var(--ssn-primary)!important;border:2px solid var(--ssn-primary)}
.ssn-btn--lg{padding:18px 30px;font-size:1.05rem}
.ssn-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4rem}

/* ── Hero variants ───────────────────────────────────────────────────────── */
.ssn-hero{
    background:var(--ssn-hero-bg);
    padding:80px 22px;
    border-bottom:1px solid var(--ssn-border);
}
.ssn-hero-inner{display:grid;gap:32px;max-width:1180px;margin:auto}
.ssn-badge{
    display:inline-block;background:rgba(255,255,255,.7);
    padding:6px 14px;border-radius:999px;font-size:.85rem;
    color:var(--ssn-primary);font-weight:600;border:1px solid var(--ssn-border);
    margin-bottom:1.2rem;
}
.ssn-hero-sub{font-size:1.1rem;color:var(--ssn-muted);max-width:600px;margin-top:1rem}

/* split-stats (default) — text left, stats right */
.ssn-hero--split-stats .ssn-hero-inner{grid-template-columns:1.5fr 1fr;align-items:center}
.ssn-hero--split-stats .ssn-hero-stats--side{display:grid;gap:14px}

/* centered-large — sunrise */
.ssn-hero--centered-large .ssn-hero-content--centered{text-align:center;max-width:780px;margin:auto}
.ssn-hero--centered-large .ssn-hero-content--centered .ssn-cta-row{justify-content:center}
.ssn-hero--centered-large .ssn-hero-stats{display:flex;gap:20px;justify-content:center;margin-top:2.5rem;flex-wrap:wrap}

/* centered-glow — midnight */
.ssn-hero--centered-glow{position:relative;overflow:hidden}
.ssn-hero--centered-glow::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%,rgba(6,182,212,.15) 0%,transparent 50%),
               radial-gradient(circle at 70% 80%,rgba(167,139,250,.15) 0%,transparent 50%);
    pointer-events:none;
}
.ssn-hero--centered-glow .ssn-hero-content--centered{text-align:center;max-width:820px;margin:auto;position:relative;z-index:1}
.ssn-hero--centered-glow .ssn-hero-content--centered .ssn-cta-row{justify-content:center}
.ssn-hero--centered-glow .ssn-hero-stats{display:flex;gap:18px;justify-content:center;margin-top:2.5rem;flex-wrap:wrap;position:relative;z-index:1}

/* magazine-cover — editorial */
.ssn-hero--magazine-cover{background:var(--ssn-hero-bg);border-bottom:2px solid var(--ssn-primary)}
.ssn-hero--magazine-cover .ssn-hero-eyebrow{
    font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;
    color:var(--ssn-accent);font-weight:700;margin:0 0 1.2rem;
}
.ssn-hero--magazine-cover h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.02;font-weight:900}
.ssn-hero--magazine-cover .ssn-hero-sub{font-size:1.2rem;font-style:italic;border-top:1px solid var(--ssn-border);padding-top:1.2rem;margin-top:1.5rem}
.ssn-hero--magazine-cover .ssn-hero-stats--inline{
    display:flex;gap:0;margin-top:2.5rem;border-top:2px solid var(--ssn-border);border-bottom:2px solid var(--ssn-border);
    padding:18px 0;flex-wrap:wrap;
}
.ssn-hero--magazine-cover .ssn-hero-stats--inline .ssn-stat{flex:1;min-width:160px;padding:0 18px;border-left:1px solid var(--ssn-border)}
.ssn-hero--magazine-cover .ssn-hero-stats--inline .ssn-stat:first-child{border-left:none}

/* asymmetric — forest */
.ssn-hero--asymmetric .ssn-hero-inner{grid-template-columns:1.3fr 1fr;align-items:center}
.ssn-hero--asymmetric .ssn-hero-visual{position:relative}
.ssn-hero--asymmetric .ssn-hero-visual img{width:100%;height:auto;border-radius:24px 8px 24px 8px;display:block}
.ssn-hero--asymmetric .ssn-hero-visual-placeholder{aspect-ratio:1/1;background:var(--ssn-surface);display:flex;align-items:center;justify-content:center;font-size:6rem;border-radius:24px 8px 24px 8px}
.ssn-hero--asymmetric .ssn-hero-stats--stacked{margin-top:18px;display:grid;gap:10px}

/* split-image — coral */
.ssn-hero--split-image .ssn-hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:48px}
.ssn-hero--split-image .ssn-hero-visual img{width:100%;height:auto;border-radius:30px;display:block;box-shadow:0 20px 60px rgba(255,107,138,.2)}
.ssn-hero--split-image .ssn-hero-visual-placeholder{aspect-ratio:4/5;background:var(--ssn-surface);display:flex;align-items:center;justify-content:center;font-size:7rem;border-radius:30px}
.ssn-hero--split-image .ssn-hero-stats--stacked{display:none}

/* Stat cards */
.ssn-stat{
    background:var(--ssn-surface);border:1px solid var(--ssn-border);
    padding:14px 18px;border-radius:14px;
    font-weight:700;font-size:.95rem;color:var(--ssn-primary);
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}

/* ── Two-col & fact card ─────────────────────────────────────────────────── */
.ssn-two-col{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:start;max-width:1180px;margin:auto}
.ssn-fact-card{background:var(--ssn-surface);border:1px solid var(--ssn-border);border-radius:18px;padding:28px;text-align:center}
.ssn-fact-number{font-size:3rem;font-weight:900;color:var(--ssn-accent);font-family:var(--ssn-font-heading);line-height:1}
.ssn-fact-text{margin-top:.5rem;color:var(--ssn-muted);font-size:.95rem}

/* ── Grid + cards ────────────────────────────────────────────────────────── */
.ssn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1180px;margin:0 auto}
.ssn-grid--blog{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ssn-card-item{background:var(--ssn-surface);border:1px solid var(--ssn-border);border-radius:18px;padding:22px}
.ssn-card-icon{font-size:1.8rem;margin-bottom:.6rem}
.ssn-treatment-card{background:var(--ssn-surface);border:1px solid var(--ssn-border);border-radius:18px;padding:24px;position:relative}
.ssn-tag{position:absolute;top:14px;right:14px;background:var(--ssn-accent);color:#fff;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700}
.ssn-pros{margin:.8rem 0 0;padding:0 0 0 1.1rem}
.ssn-pros li{margin-bottom:.3rem;font-size:.92rem;color:var(--ssn-muted)}

/* Card style variants */
.ssn-cards-rounded-shadow .ssn-card-item,
.ssn-cards-rounded-shadow .ssn-treatment-card{box-shadow:0 4px 20px rgba(0,0,0,.05)}
.ssn-cards-soft-elevated .ssn-card-item,
.ssn-cards-soft-elevated .ssn-treatment-card{border-radius:24px;box-shadow:0 12px 30px rgba(139,58,46,.08)}
.ssn-cards-flat-bordered .ssn-card-item,
.ssn-cards-flat-bordered .ssn-treatment-card{box-shadow:none;border-width:1px;border-radius:14px}
.ssn-cards-hard-bordered .ssn-card-item,
.ssn-cards-hard-bordered .ssn-treatment-card{border:2px solid var(--ssn-primary);border-radius:0;box-shadow:none}
.ssn-cards-pillowy .ssn-card-item,
.ssn-cards-pillowy .ssn-treatment-card{border-radius:28px;border-color:transparent;box-shadow:0 14px 40px rgba(255,107,138,.12)}
.ssn-cards-glass .ssn-card-item,
.ssn-cards-glass .ssn-treatment-card{background:rgba(255,255,255,.04);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.ssn-cards-glass .ssn-stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

/* ── Steps / diagnosis ───────────────────────────────────────────────────── */
.ssn-steps{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:14px;max-width:780px}
.ssn-steps li{display:flex;gap:14px;align-items:flex-start;background:var(--ssn-surface);border:1px solid var(--ssn-border);border-radius:14px;padding:14px 18px}
.ssn-step-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ssn-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.ssn-step-desc{color:var(--ssn-muted);font-size:.9rem}
.ssn-callout{margin-top:1.4rem;background:var(--ssn-surface);border-left:4px solid var(--ssn-accent);padding:14px 18px;border-radius:0 12px 12px 0;color:var(--ssn-primary);font-weight:600}

/* ── CTA banner ──────────────────────────────────────────────────────────── */
.ssn-cta-banner{background:var(--ssn-primary);color:var(--ssn-cta-text);padding:48px 32px;border-radius:24px;text-align:center;max-width:1180px;margin:auto}
.ssn-cta-banner h2{color:var(--ssn-cta-text)}
.ssn-cta-banner p{color:var(--ssn-cta-text);opacity:.92;max-width:680px;margin:0 auto 1.5rem}
.ssn-cta-banner .ssn-btn--primary{background:var(--ssn-accent)}

/* Theme tweaks for editorial CTA */
.ssn-theme-editorial .ssn-cta-banner{background:var(--ssn-primary);border-radius:0}

/* ── Blog cards ──────────────────────────────────────────────────────────── */
.ssn-blog-card{background:var(--ssn-surface);border:1px solid var(--ssn-border);border-radius:18px;overflow:hidden}
.ssn-blog-card img{width:100%;height:200px;object-fit:cover;display:block}
.ssn-blog-card-body{padding:18px}
.ssn-blog-card h3{font-size:1.05rem}
.ssn-blog-card h3 a{color:var(--ssn-primary);text-decoration:none}
.ssn-blog-card p{font-size:.9rem;color:var(--ssn-muted);margin:0}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:900px){
    .ssn-hero-inner{grid-template-columns:1fr!important}
    .ssn-two-col{grid-template-columns:1fr}
    .ssn-cta-row{flex-direction:column;align-items:stretch}
    .ssn-btn{text-align:center}
}
@media (max-width:600px){
    .ssn-sec{padding:48px 18px}
    .ssn-hero{padding:60px 18px}
}