.brand-page{--brand-section-pad:5rem 0}.brand-hero{color:#fff;text-align:center;background:linear-gradient(135deg,#0a1628 0%,#0c2d5a 40%,#0f3d7a 70%,#1a5ba8 100%);padding:6rem 2rem;position:relative;overflow:hidden}.brand-hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 30%,#0284c71f,#0000 40%),radial-gradient(circle at 70% 30%,#6d28d914,#0000 40%);position:absolute;inset:0}.brand-hero__inner{z-index:1;position:relative}.brand-hero__title{font-family:var(--font-family-heading);letter-spacing:-.04em;color:#fff;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:3.5rem;font-weight:800;display:flex}.brand-hero__logo{color:#ffffffe6;flex-shrink:0;width:60px;height:60px}.brand-hero__subtitle{font-family:var(--font-family);color:#ffffffb3;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;font-size:1.25rem;font-weight:400}.brand-hero__version{color:#fff6;font-size:.875rem}.brand-toc{z-index:50;background:#fff;border-bottom:1px solid #0000000f;padding:1rem 0;position:sticky;top:0}.brand-toc__grid{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.25rem;display:flex;overflow-x:auto}.brand-toc__grid::-webkit-scrollbar{display:none}.brand-toc__item{color:var(--text-secondary);white-space:nowrap;border-radius:var(--radius-xl);padding:.5rem 1rem;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .2s}.brand-toc__item:hover{background:var(--bg-primary);color:var(--accent-primary)}.brand-container{max-width:1100px;margin:0 auto;padding:0 2rem}.brand-section{padding:var(--brand-section-pad)}.brand-section--alt{background:var(--bg-primary)}.brand-section__title{font-family:var(--font-family-heading);letter-spacing:-.04em;color:var(--text-primary);margin-bottom:.75rem;font-size:2rem;font-weight:700}.brand-section__desc{color:var(--text-secondary);max-width:640px;margin-bottom:2.5rem;font-size:1.05rem;line-height:1.7}.brand-section__desc code{background:#0000000d;border-radius:3px;padding:.15em .4em;font-size:.85em}.brand-section h3{font-family:var(--font-family-heading);color:var(--text-primary);letter-spacing:-.02em;margin-top:2.5rem;margin-bottom:1.25rem;font-size:1.15rem;font-weight:600}.brand-section h3:first-of-type{margin-top:0}.brand-logo-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2.5rem;display:grid}.brand-logo-card{border-radius:var(--radius-xl);border:1px solid #0000000f;overflow:hidden}.brand-logo-card__display{justify-content:center;align-items:center;gap:.75rem;padding:3rem 2rem;display:flex}.brand-logo-card--light .brand-logo-card__display{color:#0f172a;background:#fff}.brand-logo-card--dark .brand-logo-card__display{color:#fff;background:#0a1628}.brand-logo-card--gradient .brand-logo-card__display{color:#fff;background:linear-gradient(135deg,#0c2d5a,#0f3d7a,#1a5ba8)}.brand-logo-icon{width:40px;height:40px}.brand-logo-text{font-family:var(--font-family-heading);letter-spacing:-.03em;font-size:1.75rem;font-weight:800}.brand-logo-card__label{color:var(--text-muted);background:var(--bg-primary);text-align:center;padding:.6rem 1rem;font-size:.8rem;font-weight:500;display:block}.brand-logo-sizing{background:var(--bg-primary);border-radius:var(--radius-xl);border:1px solid #0000000f;padding:1.5rem}.brand-logo-sizing h3{margin-bottom:.5rem;margin-top:0!important}.brand-logo-sizing p{color:var(--text-secondary);margin:0;font-size:.925rem}.brand-type-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:3rem;display:grid}.brand-type-card{border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;overflow:hidden}.brand-type-card__role{text-transform:uppercase;letter-spacing:.05em;color:var(--accent-primary);background:var(--bg-primary);padding:.75rem 1.25rem;font-size:.8rem;font-weight:600}.brand-type-card__sample{align-items:baseline;gap:1rem;padding:2rem 1.25rem;display:flex}.brand-type-card__big{color:var(--text-primary);font-size:5rem;font-weight:700;line-height:1}.brand-type-card__name{color:var(--text-secondary);font-size:1.25rem;font-weight:500}.brand-type-card__weights{color:var(--text-secondary);flex-wrap:wrap;gap:.75rem;padding:0 1.25rem 1rem;font-size:.85rem;display:flex}.brand-type-card__chars{color:var(--text-muted);letter-spacing:.05em;border-top:1px solid #0000000d;padding:1rem 1.25rem;font-size:.8rem;line-height:1.8}.brand-type-scale{border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;padding:1.5rem}.brand-type-scale h3{margin-bottom:1.5rem;margin-top:0!important}.brand-type-scale__list{flex-direction:column;gap:1.25rem;display:flex}.brand-type-scale__row{border-bottom:1px solid #0000000a;align-items:baseline;gap:1.5rem;padding-bottom:1.25rem;display:flex}.brand-type-scale__row:last-child{border-bottom:none;padding-bottom:0}.brand-type-scale__row code{width:60px;color:var(--accent-primary);flex-shrink:0;font-size:.8rem;font-weight:600}.brand-swatch-row{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.brand-swatch{border-radius:var(--radius-xl);border:1px solid #0000000f;overflow:hidden}.brand-swatch__color{align-items:flex-end;height:90px;padding:.5rem .75rem;display:flex}.brand-swatch__hex{opacity:.8;font-family:monospace;font-size:.75rem;font-weight:600}.brand-swatch__label{background:#fff;padding:.6rem .75rem}.brand-swatch__label strong{color:var(--text-primary);margin-bottom:.15rem;font-size:.85rem;display:block}.brand-swatch__label code{color:var(--text-muted);font-size:.75rem}.brand-gradient-grid{flex-direction:column;gap:1rem;display:flex}.brand-gradient-card{border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;align-items:stretch;display:flex;overflow:hidden}.brand-gradient-preview{flex-shrink:0;width:200px}.brand-gradient-info{flex-direction:column;gap:.35rem;padding:1.25rem 1.5rem;display:flex}.brand-gradient-info strong{color:var(--text-primary);font-size:.95rem}.brand-gradient-info code{color:var(--text-muted);background:var(--bg-primary);border-radius:3px;padding:.25em .5em;font-size:.78rem;display:inline-block}.brand-gradient-info span{color:var(--text-secondary);font-size:.85rem}.brand-radius-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;display:grid}.brand-radius-demo{text-align:center}.brand-radius-box{aspect-ratio:1.6;background:linear-gradient(135deg,#0284c7,#6d28d9);width:100%;margin-bottom:.75rem}.brand-radius-label{flex-direction:column;gap:.25rem;display:flex}.brand-radius-label code{color:var(--accent-primary);font-size:.8rem;font-weight:600}.brand-radius-label span{color:var(--text-muted);font-size:.85rem}.brand-shadow-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;display:grid}.brand-shadow-demo{border-radius:var(--radius-xl);height:120px;color:var(--text-secondary);background:#fff;justify-content:center;align-items:center;font-size:.85rem;font-weight:500;display:flex}.brand-button-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.brand-button-card{border-radius:var(--radius-xl);text-align:center;background:#fff;border:1px solid #0000000f;padding:2rem 1.5rem}.brand-button-card h4{font-family:var(--font-family-heading);color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.brand-button-card p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem;line-height:1.5}.brand-button-card .btn{margin-bottom:1rem}.brand-button-card code{color:var(--text-muted);font-size:.75rem;display:block}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.brand-lib-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.brand-lib-card{border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;overflow:hidden}.brand-lib-card__header{align-items:center;gap:.5rem;padding:1rem 1.25rem;display:flex}.brand-lib-card__header--tailwind{background:#f0fdfa}.brand-lib-card__header--shadcn{background:#faf5ff}.brand-lib-card__header--magic{background:#fef3c7}.brand-lib-card__icon{font-size:1.25rem}.brand-lib-card__header h4{font-family:var(--font-family-heading);color:var(--text-primary);margin:0;font-size:1rem}.brand-lib-card p{color:var(--text-secondary);padding:.75rem 1.25rem 0;font-size:.9rem;line-height:1.6}.brand-lib-card ul{margin:0;padding:.75rem 1.25rem 1.25rem;list-style:none}.brand-lib-card li{color:var(--text-secondary);padding:.25rem 0 .25rem 1rem;font-size:.85rem;position:relative}.brand-lib-card li:before{content:"•";color:var(--accent-primary);position:absolute;left:0}.brand-lib-card__link{color:var(--accent-primary);border-top:1px solid #0000000d;padding:.75rem 1.25rem;font-size:.85rem;font-weight:500;text-decoration:none;display:block}.brand-lib-card__link:hover{background:var(--bg-primary)}.brand-spacing-table{margin-bottom:2rem}.brand-spacing-table table{border-collapse:collapse;border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;width:100%;overflow:hidden}.brand-spacing-table th,.brand-spacing-table td{text-align:left;border-bottom:1px solid #0000000d;padding:.85rem 1.25rem;font-size:.9rem}.brand-spacing-table th{background:var(--bg-primary);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);font-size:.8rem;font-weight:600}.brand-spacing-table td code{color:var(--accent-primary);background:#0000000a;border-radius:3px;padding:.15em .4em;font-size:.85em}.brand-spacing-container-demo__outer{border-radius:var(--radius-xl);background:#0284c714;border:1px dashed #0284c733;padding:1rem}.brand-spacing-container-demo__inner{border-radius:var(--radius-lg);text-align:center;max-width:1280px;color:var(--text-secondary);background:#fff;border:1px solid #0000000f;margin:0 auto;padding:1rem;font-size:.9rem;font-weight:500}.brand-rules-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.brand-rules-card{border-radius:var(--radius-xl);background:#fff;border:1px solid #0000000f;padding:2rem}.brand-rules-card h4{font-family:var(--font-family-heading);margin-bottom:1rem;font-size:1.15rem}.brand-rules-card--do{border-top:3px solid #16a34a}.brand-rules-card--dont{border-top:3px solid #dc2626}.brand-rules-card ul{margin:0;padding:0;list-style:none}.brand-rules-card li{color:var(--text-secondary);border-bottom:1px solid #00000008;padding:.5rem 0 .5rem 1.25rem;font-size:.9rem;line-height:1.5;position:relative}.brand-rules-card li:last-child{border-bottom:none}.brand-rules-card--do li:before{content:"✓";color:#16a34a;font-weight:700;position:absolute;left:0}.brand-rules-card--dont li:before{content:"✗";color:#dc2626;font-weight:700;position:absolute;left:0}.brand-rules-card code{background:#0000000a;border-radius:3px;padding:.1em .35em;font-size:.85em}.brand-footer{text-align:center;color:var(--text-muted);border-top:1px solid #0000000d;padding:2rem 0;font-size:.8rem}@media (max-width:768px){.brand-hero{padding:4rem 1.5rem}.brand-hero__title{font-size:2.5rem}.brand-logo-grid,.brand-type-grid,.brand-button-grid,.brand-lib-grid,.brand-rules-grid{grid-template-columns:1fr}.brand-radius-grid,.brand-shadow-grid{grid-template-columns:repeat(2,1fr)}.brand-gradient-card{flex-direction:column}.brand-gradient-preview{width:100%;height:80px}}