.brand-page { min-height: 760px; color: var(--brand-ink); background: var(--brand-paper); }
.brand-hero { min-height: 590px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 46px 30px; color: var(--brand-paper); background: var(--brand-ink); }
.brand-hero-top, .brand-principles { display: flex; justify-content: space-between; gap: 20px; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.brand-hero-top button { min-height: 34px; padding: 0 13px; color: inherit; background: transparent; border: 1px solid currentColor; cursor: pointer; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.brand-lockup strong { display: block; font: 850 clamp(84px, 15vw, 176px)/.78 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.11em; }
.brand-lockup p { margin: 42px 0 0; color: #aaa; font: 400 20px/1.4 var(--brand-title-font); }
.brand-principles { padding-top: 24px; color: #aaa; border-top: 1px solid #444; }
.brand-hero.is-editing { min-height: 590px; color: var(--draft-paper); background: var(--draft-ink); }
.brand-hero-editor { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; gap: 30px; }
.brand-editor-intro { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 0; }
.brand-editor-intro > span { color: #aaa; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.brand-editor-intro strong { overflow-wrap: anywhere; margin: auto 0 20px; font: 850 52px/.86 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.09em; }
.brand-editor-intro p { margin: 0; color: #aaa; font: 400 15px/1.45 var(--draft-title-font); }
.brand-hero.is-editing .brand-editor { border-color: #555; }
.brand-hero.is-editing .brand-field { min-height: 82px; border-color: #555; }
.brand-hero.is-editing .brand-field input[type="text"], .brand-hero.is-editing .brand-field select { color: #111; background: #fff; border-color: #777; }
.brand-hero.is-editing .brand-color-input code { color: #bbb; }
.brand-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 22px; border-top: 1px solid #444; }
.brand-editor-actions button { min-height: 42px; padding: 0 18px; color: inherit; background: transparent; border: 1px solid #666; cursor: pointer; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.brand-editor-actions button:first-child { margin-right: auto; }
.brand-editor-actions .primary { color: var(--draft-ink); background: var(--draft-paper); border-color: var(--draft-paper); }

.brand-section { padding: 58px 46px 70px; border-bottom: 1px solid #0a0a0a; }
.brand-section > header { display: grid; grid-template-columns: 70px 1fr; margin-bottom: 38px; }
.brand-section > header > span { font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.brand-section > header h2 { margin: 0 0 8px; font: 400 42px/1 var(--brand-title-font); letter-spacing: -.035em; }
.brand-section > header p { max-width: 620px; margin: 0; color: #696963; font-size: 12px; line-height: 1.55; }

.palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #0a0a0a; }
.swatch-card { aspect-ratio: .8; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-right: 1px solid #0a0a0a; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.swatch-card:last-child { border: 0; }.swatch-card.ink { color: #fff; background: var(--brand-ink); }.swatch-card.graphite { color: #fff; background: var(--brand-graphite); }.swatch-card.fog { background: var(--brand-fog); }.swatch-card.paper { background: var(--brand-paper); }.swatch-card.star-color { background: var(--review); }.swatch-card.trust-color { color: #fff; background: var(--trust); }

.brand-editor { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); border: 1px solid var(--brand-ink); }
.brand-field { min-height: 92px; display: grid; align-content: space-between; gap: 12px; padding: 15px; border-right: 1px solid var(--brand-ink); border-bottom: 1px solid var(--brand-ink); }
.brand-field > span:first-child { font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.brand-field input[type="text"], .brand-field select { width: 100%; min-height: 38px; padding: 8px 9px; color: var(--brand-ink); background: var(--brand-paper); border: 1px solid #999; border-radius: 0; font: 600 13px system-ui, sans-serif; }
.brand-color-input { display: flex; align-items: center; gap: 9px; }.brand-color-input input { width: 38px; height: 38px; padding: 2px; background: transparent; border: 1px solid #999; }.brand-color-input code { font-size: 10px; }
.brand-font-field { grid-column: span 2; }.brand-reset { min-height: 92px; color: var(--brand-paper); background: var(--brand-ink); border: 0; cursor: pointer; font: 700 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.brand-propagation { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 15px 0 0; font-size: 10px; }.brand-propagation > span { margin-right: auto; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .09em; }.brand-propagation i { color: #888; font-style: normal; }

.type-grid { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid #0a0a0a; }
.type-grid article { min-height: 340px; display: flex; flex-direction: column; padding: 28px; }.type-grid article + article { border-left: 1px solid #0a0a0a; }
.type-grid article > span, .demo-label { font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.type-grid small { margin-top: auto; color: #777; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.type-display strong { margin-top: 55px; font: 400 58px/.94 var(--brand-title-font); letter-spacing: -.045em; }
.type-system h3 { margin: 55px 0 18px; font: 700 25px/1.1 system-ui, sans-serif; letter-spacing: -.025em; }.type-system p { max-width: 410px; color: #5f5f59; font-size: 13px; line-height: 1.6; }

.component-grid { display: grid; border: 1px solid #0a0a0a; }.component-grid.two { grid-template-columns: repeat(2, 1fr); }.component-grid.three { grid-template-columns: repeat(3, 1fr); }
.brand-demo { min-height: 290px; padding: 27px; border-right: 1px solid #0a0a0a; }.brand-demo:last-child { border: 0; }.component-grid.two .brand-demo:nth-child(2n) { border-right: 0; }
.dark-demo { color: #fff; background: #0a0a0a; }.dark-demo .shop-button { color: #0a0a0a; background: #fff; border-color: #fff; }.dark-demo .shop-button.secondary { color: #fff; background: transparent; }
.button-demo { display: flex; flex-wrap: wrap; gap: 10px; margin: 68px 0 24px; }.text-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 11px; text-transform: uppercase; text-decoration: none; }.text-link .icon { width: 15px; }
.choice-demo { display: grid; grid-template-columns: repeat(3, 1fr); margin: 68px 0 24px; }.choice-demo button { min-height: 50px; color: inherit; background: transparent; border: 1px solid #999; border-right: 0; cursor: pointer; }.choice-demo button:last-child { border-right: 1px solid #999; }.choice-demo button.active { color: #fff; background: #0a0a0a; border-color: #0a0a0a; }
.switch-demo { display: flex; align-items: center; gap: 9px; font-size: 11px; }.switch-demo input { position: absolute; opacity: 0; }.switch-demo span { position: relative; width: 36px; height: 20px; background: #111; }.switch-demo span::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: #fff; }

.brand-demo > .rating-row, .brand-demo > .trustpilot-mark { margin-top: 72px; }.demo-copy { margin-top: 25px; color: #666; font-size: 11px; line-height: 1.5; }.review-demo .context-tag { margin-top: 55px; }.review-demo blockquote { margin: 20px 0; font: 400 21px/1.3 var(--brand-title-font); }.review-demo small { color: #777; }
.airline-demo .airline-row { margin-top: 52px; }.airline-demo h3 { font: 400 31px/1 var(--brand-title-font); }.dimension-demo { display: grid; gap: 7px; margin: 25px 0 18px; padding: 17px; border: 1px solid #111; }.dimension-demo span, .dimension-demo small { color: #777; font-size: 9px; }.dimension-demo strong { font: 700 23px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.gift-demo-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 52px 0 14px; border: 1px solid #111; }.gift-demo-grid > div { display: grid; gap: 6px; padding: 17px; }.gift-demo-grid > div + div { border-left: 1px solid #999; }.gift-demo-grid .icon { margin-bottom: 18px; }.gift-demo-grid span { color: #666; font-size: 9px; }.gift-demo > label { display: flex; align-items: center; gap: 8px; margin: 15px 0; font-size: 10px; }.gift-demo > label b { margin-left: auto; }

.brand-accordion { margin-top: 45px; border-top: 1px solid #111; }.brand-accordion button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #999; cursor: pointer; text-align: left; font-size: 11px; }.brand-accordion small { display: none; grid-column: 1 / -1; max-width: 420px; padding-top: 12px; color: #666; }.brand-accordion button[aria-expanded="true"] small { display: block; }.brand-accordion button[aria-expanded="true"] .icon { transform: rotate(45deg); }
.sticky-demo { background: #deded8; }.sticky-demo-bar { min-height: 75px; display: flex; align-items: center; gap: 12px; margin-top: 88px; padding: 9px; background: #f7f7f2; border: 1px solid #111; }.sticky-demo-thumb { width: 45px; height: 45px; background: #111; }.sticky-demo-bar > span:nth-child(2) { display: grid; gap: 4px; }.sticky-demo-bar small { color: #777; font-size: 8px; }.sticky-demo-bar b { margin-left: auto; }

.canvas.mobile .brand-hero { min-height: 570px; padding: 25px 20px; }.canvas.mobile .brand-lockup strong { font-size: 68px; }.canvas.mobile .brand-lockup p { font-size: 17px; }.canvas.mobile .brand-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.canvas.mobile .brand-hero.is-editing { min-height: 1080px; }
.canvas.mobile .brand-hero-editor { grid-template-columns: 1fr; gap: 18px; }
.canvas.mobile .brand-editor-intro { min-height: 190px; padding-bottom: 0; }
.canvas.mobile .brand-editor-intro strong { margin: 32px 0 16px; font-size: 46px; }
.canvas.mobile .brand-editor-actions { display: grid; grid-template-columns: 1fr 1fr; }
.canvas.mobile .brand-editor-actions button:first-child { grid-column: 1 / -1; margin: 0; }
.canvas.mobile .brand-section { padding: 44px 20px 52px; }.canvas.mobile .brand-section > header { grid-template-columns: 38px 1fr; }.canvas.mobile .brand-section > header h2 { font-size: 34px; }
.canvas.mobile .palette-grid { grid-template-columns: repeat(2, 1fr); }.canvas.mobile .swatch-card { aspect-ratio: 1; border-bottom: 1px solid #111; }.canvas.mobile .swatch-card:nth-child(2n) { border-right: 0; }
.canvas.mobile .brand-editor { grid-template-columns: 1fr 1fr; }.canvas.mobile .brand-name-field, .canvas.mobile .brand-font-field { grid-column: 1 / -1; }.canvas.mobile .brand-reset { grid-column: 1 / -1; }
.canvas.mobile .type-grid, .canvas.mobile .component-grid.two, .canvas.mobile .component-grid.three { grid-template-columns: 1fr; }.canvas.mobile .type-grid article + article, .canvas.mobile .brand-demo { border-left: 0; border-right: 0; border-top: 1px solid #111; }.canvas.mobile .type-grid article:first-child, .canvas.mobile .brand-demo:first-child { border-top: 0; }.canvas.mobile .type-display strong { font-size: 43px; }
.canvas.mobile .button-demo { display: grid; }.canvas.mobile .sticky-demo-bar { flex-wrap: wrap; }.canvas.mobile .sticky-demo-bar .shop-button { width: 100%; }