/**
 * Home page — page-specific layout only (hero, bento, differentiator lead).
 * Design system (tokens, type, buttons, .eyebrow, .display, .sec, .nameplate,
 * .edition, .diff-cols, .steps, .price-grid, .faq, .close, reduced-motion)
 * comes from includes/theme.css, loaded first via head-public.php.
 * "The Periodical" redesign 2026-06-23.
 */

/* Hero */
.hero { padding: 54px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 48px; align-items: center; }
.hero .lede {
    font-size: 1.18rem;
    color: var(--ink);
    max-width: 48ch;
    margin: 22px 0 28px;
    line-height: 1.55;
}
.hero-btns { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero-trust {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 26px;
}

/* Differentiator lead */
.diff-intro p {
    font-family: var(--body);
    font-size: 1.12rem;
    color: var(--ink);
    max-width: 64ch;
    line-height: 1.65;
    margin-top: 14px;
}
.diff-intro .drop {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: -0.02em;
    color: var(--navy);
}

/* Features — bento grid */
.bento {
    display: grid;
    gap: 14px;
    margin-top: 34px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "ads ads ai ai"
        "ads ads sched topics"
        "multi podcast control control";
}
.btile {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btile:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(0,55,109,0.4); }
.btile .ic { color: var(--green-dark); margin-bottom: 12px; }
.btile h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 7px;
}
.btile p { font-size: 0.93rem; color: var(--muted); line-height: 1.55; }
.bt-ads {
    grid-area: ads;
    background: #f4faf7;
    border-color: rgba(16,160,119,0.35);
    justify-content: center;
}
.bt-ads h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.025em;
    color: var(--navy);
    margin-bottom: 10px;
}
.bt-ads p { font-size: 1.02rem; color: var(--ink); max-width: 44ch; }
.bt-ads small { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); margin-top: 14px; letter-spacing: 0.03em; }
.bt-ai { grid-area: ai; }
.bt-sched { grid-area: sched; }
.bt-topics { grid-area: topics; }
.bt-multi { grid-area: multi; }
.bt-podcast { grid-area: podcast; }
.bt-control { grid-area: control; }

@media (max-width: 900px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "ads ads"
            "ai ai"
            "sched topics"
            "multi podcast"
            "control control";
    }
}
@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
    .bento {
        grid-template-columns: 1fr;
        grid-template-areas: "ads" "ai" "sched" "topics" "multi" "podcast" "control";
    }
}