:root{
    --bg:#FBFAF6;
    --forest:#2F4A3E;
    --forest-deep:#20332A;
    --sand:#E7DCC4;
    --sand-soft:#F3ECDA;
    --ink:#26302B;
    --ink-soft:#5C6960;
    --line:#E1DACB;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
    line-height:1.55;
}
a{color:inherit;}

/* NAV */
nav{
    position:relative;
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px 22px;
    max-width:1180px;
    margin:50px auto;
}
nav .logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-weight:700;
    font-size:0.75rem;
    letter-spacing:-0.01em;
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
nav .logo span{color:var(--forest);}
nav .logo img{
    max-width:220px;
    height:auto;
    object-fit:contain;
    display:block;
    margin:12px auto;
}
nav .links{
    display:flex;
    gap:28px;
    font-size:0.9rem;
    color:var(--ink-soft);
    z-index:1;
}
nav .links a{
    text-decoration:none;
    color:var(--ink-soft);
}
nav .links a:hover{color:var(--forest-deep);}
nav .links a.active{color:var(--forest-deep);font-weight:600;}
nav .cta{
    background:var(--forest);
    color:#fff;
    padding:9px 18px;
    border-radius:6px;
    font-size:0.88rem;
    text-decoration:none;
    font-weight:600;
    z-index:1;
}
@media(max-width:680px){
    nav{
          flex-direction:column;
          gap:8px;
          padding:0 20px 20px;
    }
    nav .logo{
          position:static;
          transform:none;
    }
    nav .logo img{
          max-width:160px;
          margin:0 auto;
    }
    nav .links{
          flex-wrap:wrap;
          justify-content:center;
          gap:16px 20px;
          margin-bottom:20px;
          margin-top:8px;
    }
}

.logo-upload{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
}
.logo-upload .preview{
    width:44px;height:44px;
    border-radius:8px;
    background:#fff;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    flex-shrink:0;
}
.logo-upload .preview img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.logo-upload .preview span{
    font-size:0.7rem;
    color:var(--ink-soft);
}
.logo-upload label{
    margin:0;
    font-size:0.85rem;
    color:var(--ink-soft);
}
.logo-upload input[type="file"]{
    padding:0;
    border:none;
    background:none;
    font-size:0.82rem;
}
.logo-upload .clear-logo{
    font-size:0.76rem;
    color:var(--ink-soft);
    text-decoration:underline;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    width:auto;
}
.doc-body .doc-logo{
    max-width:300px;
    object-fit:contain;
    display:block;
}

/* BREADCRUMB */
.breadcrumb{
    max-width:760px;
    margin:0 auto 18px;
    padding:0 24px;
    text-align:center;
    font-size:0.82rem;
    color:var(--ink-soft);
}
.breadcrumb a{text-decoration:underline;}

/* HERO */
.hero{
    max-width:760px;
    margin:0 auto 90px;
    padding:0 24px;
    text-align:center;
}
.hero.fw-hero{margin-bottom:60px;}
.hero .eyebrow{
    display:inline-block;
    background:var(--sand-soft);
    color:var(--forest-deep);
    font-size:0.78rem;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:22px;
    letter-spacing:0.02em;
}
.hero h1{
    font-size:2.7rem;
    line-height:1.15;
    margin:0 0 18px;
    letter-spacing:-0.02em;
    color:var(--forest-deep);
}
.hero p.sub{
    font-size:1.1rem;
    color:var(--ink-soft);
    max-width:560px;
    margin:0 auto 32px;
}
.hero-ctas{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
}
.btn-primary{
    background:var(--forest);
    color:#fff;
    padding:14px 26px;
    border-radius:8px;
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    border:none;
    cursor:pointer;
    display:inline-block;
}
.btn-secondary{
    background:#fff;
    color:var(--forest-deep);
    padding:14px 26px;
    border-radius:8px;
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    border:1px solid var(--line);
    cursor:pointer;
    display:inline-block;
}

/* FEATURES */
.features{
    max-width:1080px;
    margin:0 auto 90px;
    padding:0 24px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}
.feature{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
}
.feature .icon{
    width:38px;height:38px;
    border-radius:9px;
    background:var(--sand-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--forest);
    font-weight:700;
    margin-bottom:16px;
}
.feature h3{
    font-size:1.05rem;
    margin:0 0 8px;
    color:var(--forest-deep);
}
.feature p{
    font-size:0.92rem;
    color:var(--ink-soft);
    margin:0;
}

/* FRAMEWORKS SECTION (index.html) */
.frameworks{
    max-width:1080px;
    margin:0 auto 90px;
    padding:0 24px;
}
.frameworks h2{
    text-align:center;
    font-size:1.9rem;
    color:var(--forest-deep);
    margin:0 0 44px;
    letter-spacing:-0.01em;
}
.framework-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
}
.framework-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
    text-decoration:none;
    display:block;
    transition:border-color .15s ease;
}
.framework-card:hover{border-color:var(--forest);}
.framework-card h3{
    font-size:1.15rem;
    margin:0 0 8px;
    color:var(--forest-deep);
}
.framework-card p{
    font-size:0.92rem;
    color:var(--ink-soft);
    margin:0 0 14px;
}
.framework-card .link-arrow{
    font-size:0.85rem;
    font-weight:600;
    color:var(--forest);
}

/* CONTENT BLOCK (framework pages) */
.content-block{
    max-width:760px;
    margin:0 auto 70px;
    padding:0 24px;
}
.content-block h2{
    font-size:1.6rem;
    color:var(--forest-deep);
    margin:0 0 16px;
    letter-spacing:-0.01em;
}
.content-block p{
    font-size:1rem;
    color:var(--ink-soft);
    margin:0 0 16px;
}

/* DOC TYPE GRID (framework pages) */
.doc-list{
    max-width:1080px;
    margin:0 auto 90px;
    padding:0 24px;
}
.doc-list h2{
    text-align:center;
    font-size:1.9rem;
    color:var(--forest-deep);
    margin:0 0 12px;
    letter-spacing:-0.01em;
}
.doc-list > p.doc-list-sub{
    text-align:center;
    color:var(--ink-soft);
    max-width:560px;
    margin:0 auto 44px;
}
.doc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
}
.doc-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px;
    text-decoration:none;
    display:block;
    transition:border-color .15s ease;
}
.doc-card:hover{border-color:var(--forest);}
.doc-card h3{
    font-size:1.02rem;
    margin:0 0 8px;
    color:var(--forest-deep);
}
.doc-card p{
    font-size:0.88rem;
    color:var(--ink-soft);
    margin:0 0 12px;
}
.doc-card .link-arrow{
    font-size:0.82rem;
    font-weight:600;
    color:var(--forest);
}

/* FAQ */
.faq{
    max-width:760px;
    margin:0 auto 90px;
    padding:0 24px;
}
.faq h2{
    font-size:1.6rem;
    color:var(--forest-deep);
    margin:0 0 24px;
    letter-spacing:-0.01em;
}
.faq-item{
    border-bottom:1px solid var(--line);
    padding:18px 0;
}
.faq-item h3{
    font-size:1rem;
    color:var(--forest-deep);
    margin:0 0 8px;
}
.faq-item p{
    font-size:0.92rem;
    color:var(--ink-soft);
    margin:0;
}

/* TOOL SECTION */
.tool-section{
    background:#fff;
    border-top:1px solid var(--line);
    padding:70px 24px 90px;
}
.tool-heading{
    max-width:640px;
    margin:0 auto 44px;
    text-align:center;
}
.tool-heading h2{
    font-size:1.9rem;
    color:var(--forest-deep);
    margin:0 0 12px;
    letter-spacing:-0.01em;
}
.tool-heading p{
    color:var(--ink-soft);
    font-size:1rem;
    margin:0;
}
.tool-grid{
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
}
@media(min-width:880px){
    .tool-grid{grid-template-columns:340px 1fr;align-items:start;}
}
.panel{
    background:var(--sand-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px;
}
.panel h4{
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--ink-soft);
    margin:0 0 20px;
}
label{
    display:block;
    font-size:0.85rem;
    color:var(--ink-soft);
    margin:16px 0 6px;
}
label:first-of-type{margin-top:0;}
select,input{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    font-family:inherit;
    font-size:0.95rem;
    color:var(--ink);
}
select:focus,input:focus{
    outline:2px solid var(--forest);
    outline-offset:1px;
}
.panel .actions{margin-top:22px;}
.panel button{
    width:100%;
}
.locked-note{
    font-size:0.78rem;
    color:var(--ink-soft);
    margin-top:12px;
}
.locked-note a{color:var(--forest);font-weight:600;text-decoration:underline;}

.doc-wrap{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
}
.doc-control{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0;
    background:var(--sand-soft);
    border-bottom:1px solid var(--line);
}
.doc-control div{
    padding:14px 22px;
    font-size:0.78rem;
}
.doc-control .k{
    color:var(--ink-soft);
    display:block;
    margin-bottom:3px;
}
.doc-control .v{font-weight:700;color:var(--forest-deep);}
.doc-body{padding:36px 42px 46px;}
.doc-body h3{
    font-size:1.5rem;
    margin:0 0 4px;
    color:var(--forest-deep);
}
.doc-body .subtitle{
    color:var(--ink-soft);
    font-size:0.85rem;
    margin-bottom:26px;
}
.doc-body h4{
    font-size:1rem;
    margin:24px 0 8px;
    color:var(--forest-deep);
}
.doc-body p, .doc-body li{
    font-size:0.94rem;
    color:var(--ink);
}
.doc-body ul{padding-left:20px;}
.status-chip{
    display:inline-block;
    margin-top:26px;
    padding:7px 14px;
    border-radius:20px;
    background:var(--sand-soft);
    color:var(--forest-deep);
    font-size:0.76rem;
    font-weight:600;
}

footer{
    text-align:center;
    font-size:0.82rem;
    color:var(--ink-soft);
    padding:36px 24px 56px;
    max-width:640px;
    margin:0 auto;
}
footer a{text-decoration:underline;}
footer .footer-links{
    display:flex;
    gap:14px 18px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:14px;
    font-size:0.85rem;
}

/* ARTICLE / GUIDE PAGES */
.article-hero{
    max-width:760px;
    margin:0 auto 50px;
    padding:0 24px;
    text-align:center;
}
.article-hero .eyebrow{
    display:inline-block;
    background:var(--sand-soft);
    color:var(--forest-deep);
    font-size:0.78rem;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:22px;
    letter-spacing:0.02em;
}
.article-hero h1{
    font-size:2.3rem;
    line-height:1.2;
    margin:0 0 14px;
    letter-spacing:-0.02em;
    color:var(--forest-deep);
}
.article-hero .article-meta{
    font-size:0.85rem;
    color:var(--ink-soft);
}
.article-body{
    max-width:700px;
    margin:0 auto 60px;
    padding:0 24px;
}
.article-body p{
    font-size:1.02rem;
    color:var(--ink);
    margin:0 0 20px;
}
.article-body h2{
    font-size:1.45rem;
    color:var(--forest-deep);
    margin:44px 0 16px;
    letter-spacing:-0.01em;
}
.article-body h3{
    font-size:1.15rem;
    color:var(--forest-deep);
    margin:32px 0 12px;
}
.article-body ul, .article-body ol{
    padding-left:22px;
    margin:0 0 20px;
}
.article-body li{
    font-size:1.02rem;
    color:var(--ink);
    margin-bottom:8px;
}
.article-body strong{color:var(--forest-deep);}
.article-cta{
    background:var(--sand-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px;
    text-align:center;
    margin:40px 0;
}
.article-cta p{margin:0 0 16px;}
.article-related{
    max-width:700px;
    margin:0 auto 60px;
    padding:0 24px;
}
.article-related h2{
    font-size:1.3rem;
    color:var(--forest-deep);
    margin:0 0 20px;
}
.article-related-links{
    display:grid;
    gap:14px;
}
.article-related-links a{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 20px;
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    color:var(--forest-deep);
    transition:border-color .15s ease;
}
.article-related-links a:hover{border-color:var(--forest);}

/* GUIDES HUB */
.guides-list{
    max-width:1080px;
    margin:0 auto 90px;
    padding:0 24px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}
.guide-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
    text-decoration:none;
    display:block;
    transition:border-color .15s ease;
}
.guide-card:hover{border-color:var(--forest);}
.guide-card .eyebrow{
    display:inline-block;
    background:var(--sand-soft);
    color:var(--forest-deep);
    font-size:0.72rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:20px;
    margin-bottom:14px;
    letter-spacing:0.02em;
}
.guide-card h3{
    font-size:1.1rem;
    margin:0 0 10px;
    color:var(--forest-deep);
    line-height:1.35;
}
.guide-card p{
    font-size:0.9rem;
    color:var(--ink-soft);
    margin:0 0 14px;
}
.guide-card .link-arrow{
    font-size:0.85rem;
    font-weight:600;
    color:var(--forest);
}

/* LEGAL PAGES (privacy, terms, about) */
.legal-body{
    max-width:700px;
    margin:0 auto 70px;
    padding:0 24px;
}
.legal-body p{
    font-size:0.98rem;
    color:var(--ink);
    margin:0 0 18px;
}
.legal-body h2{
    font-size:1.3rem;
    color:var(--forest-deep);
    margin:36px 0 14px;
}
.legal-body ul{
    padding-left:22px;
    margin:0 0 18px;
}
.legal-body li{
    font-size:0.98rem;
    color:var(--ink);
    margin-bottom:8px;
}
.legal-body .updated{
    font-size:0.85rem;
    color:var(--ink-soft);
    margin-bottom:8px;
}