/* MoSanKit — Brand guide page. Every rule is scoped to .brand-guide so it cannot affect the rest of the theme. */
.brand-guide *{box-sizing:border-box}
.brand-guide .hero{padding:78px 0 54px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.brand-guide .hero:after{content:"";position:absolute;width:440px;height:440px;border:1px solid #e6ebdf;border-radius:50%;right:-160px;top:-190px;box-shadow:0 0 0 48px rgba(229,236,218,.28),0 0 0 96px rgba(229,236,218,.18);pointer-events:none}
.brand-guide .eyebrow,.brand-guide .kicker{font:13px "DM Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:#71845a}
.brand-guide .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.brand-guide .eyebrow:before{content:"";width:22px;height:1px;background:#8aa64d}
.brand-guide .hero h1{font-size:clamp(48px,7vw,78px);line-height:.98;letter-spacing:-.078em;margin:0 0 20px;font-weight:800;max-width:800px;position:relative;z-index:1}
.brand-guide .hero h1 em{font-style:normal;color:#6d8d38}
.brand-guide .hero p{font-size:15px;line-height:1.8;color:var(--muted);max-width:600px;margin:0;position:relative;z-index:1}
.brand-guide section{padding:68px 0;border-bottom:1px solid var(--line)}
.brand-guide .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:27px}
.brand-guide .section-head h2{font-size:31px;letter-spacing:-.06em;line-height:1.1;margin:9px 0 0}
.brand-guide .section-head p{font-size:13px;line-height:1.75;color:var(--muted);max-width:390px;margin:0}
.brand-guide .palette{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.brand-guide .swatch{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.brand-guide .swatch-color{height:118px;position:relative}
.brand-guide .swatch-color span{position:absolute;bottom:12px;left:14px;font:13px "DM Mono",monospace;opacity:.8}
.brand-guide .swatch-info{padding:14px 15px}
.brand-guide .swatch-info b{display:block;font-size:13px;margin-bottom:4px}
.brand-guide .swatch-info small{font:13px "DM Mono",monospace;color:#7d8981}
.brand-guide .swatch-info p{font-size:13px;line-height:1.55;color:#7d8981;margin:9px 0 0}
.brand-guide .color-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}
.brand-guide .note{padding:17px;background:#fff;border:1px solid var(--line);border-radius:12px}
.brand-guide .note b{font-size:13px;display:block;margin-bottom:6px}
.brand-guide .note p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.brand-guide .type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brand-guide .type-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:25px}
.brand-guide .type-meta{display:flex;justify-content:space-between;gap:10px;font:13px "DM Mono",monospace;color:#819087;margin-bottom:25px}
.brand-guide .type-sample{font-size:42px;line-height:1.05;letter-spacing:-.07em;font-weight:800;margin-bottom:14px}
.brand-guide .type-sample.mono{font:32px/1.2 "DM Mono",monospace;letter-spacing:-.06em}
.brand-guide .type-card p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.brand-guide .type-card .weights{border-top:1px solid var(--line);margin-top:19px;padding-top:14px;font-size:13px;color:#7c8980}
.brand-guide .scale-table{width:100%;border-collapse:collapse;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brand-guide .scale-table th,.brand-guide .scale-table td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-size:13px}
.brand-guide .scale-table th{font:11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#839087;background:#f0f3ec}
.brand-guide .scale-table td:nth-child(2),.brand-guide .scale-table td:nth-child(3){font-family:"DM Mono",monospace;color:#68766d}
.brand-guide .scale-table tr:last-child td{border-bottom:0}
.brand-guide .specimen{background:#1d2924;color:white;border-radius:17px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.brand-guide .specimen h3{font-size:34px;line-height:1.05;letter-spacing:-.065em;margin:0 0 12px}
.brand-guide .specimen h3 em{font-style:normal;color:var(--green)}
.brand-guide .specimen p{font-size:13px;line-height:1.8;color:#a8b5ac;margin:0;max-width:390px}
.brand-guide .specimen .label{font:11px "DM Mono",monospace;color:var(--green);letter-spacing:.12em;text-transform:uppercase;margin-bottom:17px}
.brand-guide .sample-card{background:#fff;color:var(--ink);padding:19px;border-radius:12px;box-shadow:0 15px 35px rgba(0,0,0,.15)}
.brand-guide .sample-card .mini-label{font:11px "DM Mono",monospace;color:#7b8b6d;margin-bottom:11px}
.brand-guide .sample-card h4{font-size:17px;letter-spacing:-.05em;margin:0 0 8px}
.brand-guide .sample-card p{font-size:13px;color:#758078;margin:0 0 16px}
.brand-guide .sample-button{display:inline-block;background:var(--green);color:var(--ink);font-size:13px;font-weight:800;padding:10px 13px;border-radius:7px}
.brand-guide .principles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.brand-guide .principle{padding:19px;background:#fff;border:1px solid var(--line);border-radius:13px}
.brand-guide .principle .num{font:13px "DM Mono",monospace;color:#8aa05e;margin-bottom:22px}
.brand-guide .principle h3{font-size:13px;margin:0 0 8px}
.brand-guide .principle p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.brand-guide .token-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brand-guide .token-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.brand-guide .token-card h3{font-size:13px;margin:0 0 16px}
.brand-guide .radius-demo{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.brand-guide .radius-box{width:68px;height:54px;background:#edf3e5;border:1px solid #dce7d2}
.brand-guide .radius-box:nth-child(1){border-radius:6px}
.brand-guide .radius-box:nth-child(2){border-radius:10px}
.brand-guide .radius-box:nth-child(3){border-radius:14px}
.brand-guide .radius-box:nth-child(4){border-radius:18px}
.brand-guide .radius-label{font:11px "DM Mono",monospace;color:#7b887f;text-align:center;margin-top:7px}
.brand-guide .spacing-demo{display:flex;align-items:end;gap:12px;height:76px}
.brand-guide .space-bar{background:#c9f36b;border-radius:4px 4px 0 0;width:30px}
.brand-guide .space-bar:nth-child(1){height:8px}
.brand-guide .space-bar:nth-child(2){height:16px}
.brand-guide .space-bar:nth-child(3){height:24px}
.brand-guide .space-bar:nth-child(4){height:32px}
.brand-guide .space-bar:nth-child(5){height:48px}
.brand-guide .space-caption{font:11px "DM Mono",monospace;color:#7b887f;margin-top:9px}
.brand-guide .voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brand-guide .voice-card{padding:21px;border-radius:14px;border:1px solid var(--line);background:#fff}
.brand-guide .voice-card h3{font-size:13px;margin:0 0 12px}
.brand-guide .voice-card ul{padding-left:17px;margin:0;color:var(--muted);font-size:13px;line-height:2}
.brand-guide .voice-example{background:#eef2e9;border-radius:10px;padding:16px;font-size:13px;line-height:1.75;color:#536149;margin-top:14px}
.brand-guide .do-dont{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brand-guide .usage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.brand-guide .usage h3{font-size:13px;margin:0 0 13px}
.brand-guide .usage ul{margin:0;padding-left:17px;font-size:13px;line-height:2;color:var(--muted)}
.brand-guide .usage.good{border-top:3px solid #a9d85b}
.brand-guide .usage.avoid{border-top:3px solid #d6a18f}
@media(max-width:850px){.brand-guide .palette{grid-template-columns:repeat(2,1fr)}.brand-guide .principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.brand-guide .hero{padding:58px 0 40px}.brand-guide .hero h1{font-size:52px}.brand-guide .hero p{font-size:13px}.brand-guide section{padding:52px 0}.brand-guide .section-head{display:block}.brand-guide .section-head p{margin-top:12px}.brand-guide .section-head h2{font-size:28px}.brand-guide .palette{gap:9px}.brand-guide .swatch-color{height:90px}.brand-guide .swatch-info{padding:11px}.brand-guide .color-notes,.brand-guide .type-grid,.brand-guide .token-grid,.brand-guide .voice-grid,.brand-guide .do-dont{grid-template-columns:1fr}.brand-guide .type-card{padding:19px}.brand-guide .type-sample{font-size:34px}.brand-guide .specimen{grid-template-columns:1fr;padding:23px;gap:22px}.brand-guide .principles{gap:9px}.brand-guide .principle{padding:15px}}
.brand-guide .hero:before{display:none}