:root{
            --bg:#f7f4ee;
            --text:#171717;
            --muted:#666;
            --line:#e6ded2;
            --card:#fffaf2;
            --dark:#111;
            --accent:#f2b233;
            --soft:#fff6e5;
        }
        
        *{box-sizing:border-box}
        
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }
        
        body{
            margin:0;
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            background:var(--bg);
            color:var(--text);
            line-height:1.68;
            font-feature-settings: "kern" 1, "liga" 1;
        }
        
        a{color:inherit;text-decoration:none}
        
        .site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
        
        .nav-wrap{max-width:1320px;margin:0 auto;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:22px}
        
        .logo{font-size:28px;font-weight:900;letter-spacing:-.8px;font-feature-settings: "kern" 1}
        
        .main-nav{display:flex;gap:26px;align-items:center}
        
        .main-nav a{font-weight:700;color:#222;font-feature-settings: "kern" 1}
        
        .hamburger{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
        
        .hamburger span{display:block;width:26px;height:3px;background:#111;border-radius:999px;margin:5px 0;transition:transform .25s ease,opacity .25s ease}
        
        .hero{max-width:1320px;margin:0 auto;padding:80px 22px 50px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
        
        .eyebrow{font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.12em;color:#9a6500;margin-bottom:16px}
        
        .hero h1{font-size:58px;line-height:1.05;letter-spacing:-2px;margin:0 0 22px;font-weight:900;font-feature-settings: "kern" 1}
        
        .hero p{font-size:20px;color:#444;max-width:650px;margin:0 0 30px;font-weight:400}
        
        .actions{display:flex;gap:14px;flex-wrap:wrap}
        
        .btn{background:#111;color:white;padding:13px 22px;border-radius:999px;font-weight:800;display:inline-flex;font-feature-settings: "kern" 1}
        
        .btn.secondary{background:#fff;color:#111;border:1px solid var(--line)}
        
        .quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
        
        .quick-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;min-height:130px;box-shadow:0 12px 35px rgba(0,0,0,.04)}
        
        .quick-card h4{font-size:20px;margin:0;font-weight:700}
        
        .section{max-width:1320px;margin:0 auto;padding:62px 22px}
        
        .section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}
        
        .section h2{font-size:40px;line-height:1.1;margin:0;letter-spacing:-1px;font-weight:800}
        
        .section-intro{color:#555;max-width:650px;margin:10px 0 35px;font-size:18px}
        
        .feature-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}
        
        .post-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 12px 35px rgba(0,0,0,.04)}
        
        .post-card.large{grid-row:span 2}
        
        .post-card h3,.post-card h4{margin:0 0 12px;line-height:1.2;font-feature-settings: "kern" 1}
        
        .post-card h3{font-size:30px;font-weight:800}
        
        .post-card h4{font-size:21px;font-weight:700}
        
        .post-card p{color:#555;margin:0}
        
        .editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
        
        .help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
        
        .faq{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px}
        
        .faq .section-intro{margin-bottom:45px}
        
        .faq-item{border-top:1px solid var(--line);padding:0}
        
        .faq-item:first-child{border-top:0}
        
        .faq-question{width:100%;background:transparent;border:0;padding:20px 0;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;color:var(--text);font-family:inherit;font-weight:600}
        
        .faq-question h3{font-size:20px;margin:0;line-height:1.35;font-weight:700}
        
        .faq-icon{font-size:28px;font-weight:500;line-height:1;transition:transform .25s ease}
        
        .faq-answer{display:none;padding:0 0 20px;color:#555}
        
        .faq-answer p{margin:0;color:#555}
        
        .faq-item.active .faq-answer{display:block}
        
        .faq-item.active .faq-icon{transform:rotate(45deg)}
        
        .footer{background:#111;color:#eee;margin-top:60px}
        
        .footer-wrap{max-width:1320px;margin:0 auto;padding:48px 22px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
        
        .footer h3,.footer h4{margin:0 0 14px;font-weight:700}
        
        .footer p,.footer li{color:#bbb}
        
        .footer ul{list-style:none;padding:0;margin:0}
        
        .footer li{margin-bottom:8px}
        
        .copy{border-top:1px solid #333;text-align:center;padding:18px;color:#aaa}
        
        h1, h2, h3, h4, h5, h6 {
            font-feature-settings: "kern" 1, "liga" 1;
        }
        
        p, li {
            font-feature-settings: "kern" 1;
        }
        
        @media(max-width:900px){
            .nav-wrap{position:relative}
            .main-nav{display:none;position:absolute;top:100%;left:22px;right:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.08);flex-direction:column;align-items:flex-start;gap:0}
            .main-nav a{display:block;width:100%;padding:13px 4px;border-bottom:1px solid var(--line)}
            .main-nav a:last-child{border-bottom:0}
            .main-nav.open{display:flex}
            .hamburger{display:block}
            .hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
            .hamburger.active span:nth-child(2){opacity:0}
            .hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
            .hero{grid-template-columns:1fr;padding-top:48px}
            .hero h1,.article-hero h1{font-size:40px}
            .feature-grid,.editor-grid,.help-grid,.footer-wrap,.article-layout{grid-template-columns:1fr}
            .section-head{display:block}
        }
    
/* Full-width homepage alignment refinement */
.hero{
    padding:76px 22px 54px;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:44px;
}

.hero h1{
    max-width:860px;
}

.hero p{
    max-width:720px;
}

.quick-grid{
    gap:18px;
}

.quick-card{
    min-height:145px;
    display:flex;
    align-items:flex-end;
}

.section{
    padding:58px 22px;
}

.section-head{
    margin-bottom:30px;
}

.feature-grid{
    grid-template-columns:1.2fr 1fr 1fr;
    gap:22px;
}

.post-card{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.post-card.large{
    min-height:405px;
    background:linear-gradient(135deg,#fff,#fff6e5);
}

.editor-grid,
.help-grid{
    gap:22px;
}

.editor-grid .post-card,
.help-grid .post-card{
    min-height:190px;
}

.faq{
    box-shadow:0 12px 35px rgba(0,0,0,.04);
}

@media(max-width:900px){
    .hero{
        grid-template-columns:1fr;
        padding-top:52px;
    }

    .quick-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-grid,
    .editor-grid,
    .help-grid,
    .footer-wrap{
        grid-template-columns:1fr;
    }

    .post-card.large{
        min-height:260px;
    }
}

@media(max-width:560px){
    .hero h1{
        font-size:36px;
    }

    .section h2{
        font-size:32px;
    }

    .quick-grid{
        grid-template-columns:1fr;
    }

    .quick-card,
    .post-card,
    .faq{
        border-radius:22px;
    }
}