/* Brand kit page — works with every theme */
.bk-hero { padding: clamp(48px, 6vw, 96px) 0; background: linear-gradient(120deg, #EEF3FE 0%, #F3EEFF 55%, #FDF0F7 100%); border-bottom: 1px solid #E5E7EB; }
.bk-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bk-kicker { margin: 0 0 10px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7C3AED; }
.bk-hero h1 { margin: 0 0 14px; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.035em; }
.bk-lead { margin: 0; font-size: 1.12rem; color: #374151; max-width: 36rem; }
.bk-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 12px; }
.bk-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 10px; border: 1px solid #D1D5DB; background: #fff; color: #111827; font-weight: 700; text-decoration: none; }
.bk-btn:hover { border-color: #111827; }
.bk-btn-p { background: linear-gradient(120deg, #1A56DB, #7C3AED 55%, #EC4899); border: 0; color: #fff; box-shadow: 0 14px 28px -14px rgba(124,58,237,.65); }
.bk-btn-p:hover { filter: brightness(1.05); }
.bk-small { margin: 10px 0 0; color: #6B7280; font-size: .92rem; }
.bk-hero-logo { background: #fff; border-radius: 24px; padding: clamp(28px, 4vw, 56px); box-shadow: 0 30px 60px -36px rgba(11,21,48,.45); display: grid; place-items: center; }
.bk-hero-logo img { width: 100%; max-width: 520px; height: auto; }
.bk-sec { padding: clamp(56px, 6vw, 96px) 0; }
.bk-soft { background: #F7F8FA; }
.bk-head { margin-bottom: 28px; max-width: 46rem; }
.bk-head h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -.025em; }
.bk-head p { margin: 0; color: #4B5563; font-size: 1.05rem; }
.bk-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 18px; }
.bk-logo { border: 1px solid #E5E7EB; border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.bk-logo-art { display: grid; grid-template-columns: 1fr 1fr; min-height: 170px; }
.bk-logo-art span { display: grid; place-items: center; padding: 26px; }
.bk-logo-art .on-dark { background: #0B1530; }
.bk-logo-art img { max-width: 100%; max-height: 96px; }
.bk-logo:not(.wide) .bk-logo-art img { max-height: 110px; }
.bk-logo-info { padding: 18px 20px 20px; border-top: 1px solid #EEF0F4; }
.bk-logo-info h3 { margin: 0 0 4px; font-size: 1.1rem; }
.bk-logo-info p { margin: 0 0 12px; color: #6B7280; font-size: .93rem; }
.bk-dl { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-dl a, .bk-mono a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; background: #EEF3FE; color: #1A56DB; font-weight: 700; font-size: .84rem; text-decoration: none; }
.bk-dl a:hover, .bk-mono a:hover { background: #1A56DB; color: #fff; }
.bk-mono { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 18px; }
.bk-mono > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px; border: 1px solid #E5E7EB; border-radius: 18px; }
.bk-mono > div.dark { background: #1A56DB; border-color: #1A56DB; }
.bk-mono img { height: 54px; margin-right: auto; }
.bk-mono small { flex-basis: 100%; color: #6B7280; }
.bk-mono .dark small { color: #DBE4FF; }
.bk-mono .dark a { background: rgba(255,255,255,.18); color: #fff; }
.bk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 14px; }
.bk-color { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 0 16px; border: 1px solid #E5E7EB; border-radius: 16px; background: #fff; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: #111827; }
.bk-color:hover { box-shadow: 0 16px 30px -24px rgba(11,21,48,.5); }
.bk-sw { width: 100%; height: 96px; margin-bottom: 10px; border-bottom: 1px solid #EEF0F4; }
.bk-color b, .bk-color code, .bk-color small { padding: 0 16px; }
.bk-color code { font: 700 .95rem ui-monospace, monospace; color: #374151; }
.bk-color small { color: #6B7280; font-size: .84rem; }
.bk-copied { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: .78rem; font-weight: 700; background: #0B1530; color: #fff; border-radius: 20px; padding: 0 9px; line-height: 22px; }
.bk-copied:empty { display: none; }
.bk-ratio { display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin-top: 24px; border: 1px solid #E5E7EB; }
.bk-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 18px; }
.bk-font { padding: 26px; border: 1px solid #E5E7EB; border-radius: 18px; }
.bk-font-sample { margin: 0 0 14px; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: #0B1530; }
.bk-font-sample.bri { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; }
.bk-font-sample.han { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; }
.bk-font h3 { margin: 0 0 6px; font-size: 1.1rem; }
.bk-font p { color: #4B5563; }
.bk-font a { color: #1A56DB; font-weight: 700; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.bk-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 18px; }
.bk-rule { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #E5E7EB; }
.bk-rule h3 { margin: 16px 0 4px; font-size: 1.05rem; }
.bk-rule p { margin: 0; color: #6B7280; font-size: .93rem; }
.bk-space { padding: 26px; border: 2px dashed #C4B5FD; border-radius: 12px; background: repeating-linear-gradient(45deg, #F5F3FF 0 8px, #fff 8px 16px); }
.bk-space img { width: 100%; background: #fff; display: block; }
.bk-min { display: flex; align-items: center; gap: 22px; min-height: 108px; padding: 0 12px; }
.bk-ok { display: grid; place-items: center; min-height: 108px; border-radius: 12px; background: #0B1530; padding: 16px; }
.bk-ok img { max-height: 60px; max-width: 100%; }
.bk-donts-h { margin: 36px 0 14px; font-size: 1.15rem; }
.bk-donts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.bk-donts > div { border: 1px solid #FECDD3; border-radius: 14px; background: #fff; overflow: hidden; }
.bk-donts .art { display: grid; place-items: center; height: 110px; padding: 16px; overflow: hidden; }
.bk-donts .art img { max-height: 48px; max-width: 80%; }
.bk-donts .art.busy { background: linear-gradient(120deg, #F59E0B, #E11D48 50%, #10B981); }
.bk-donts .retype { font: italic 700 2.2rem Georgia, serif; color: #1A56DB; }
.bk-donts b { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid #FFE4E6; color: #BE123C; font-size: .9rem; }
.bk-end { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.bk-end h2 { margin: 0 0 6px; }
.bk-end p { margin: 0; color: #4B5563; max-width: 44rem; }
.bk-end a:not(.bk-btn) { color: #1A56DB; }
@media (max-width: 860px) {
  .bk-hero-in { grid-template-columns: 1fr; }
  .bk-logo-art { grid-template-columns: 1fr; }
}