@import url(../_shared/fonts.css);
/* Brand book: fixed 1600×900 pages, scaled to the viewport on screen, 1:1 in print. */
:root { --page-w: 1600px; --page-h: 900px; --scale: 1; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #1b1b1b; }
body { font-family: var(--f-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
.book { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 0 80px; }
.page-wrap { width: calc(var(--page-w) * var(--scale)); height: calc(var(--page-h) * var(--scale)); position: relative; }
.page { width: var(--page-w); height: var(--page-h); transform: scale(var(--scale)); transform-origin: top left; position: absolute; inset: 0 auto auto 0;
  background: var(--paper); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); padding: 90px 110px; display: flex; flex-direction: column; }
.page.dark { background: var(--deep); color: var(--paper); }
.page.accent { background: var(--accent); color: var(--paper); }
.folio { position: absolute; inset: auto 110px 44px 110px; display: flex; justify-content: space-between; font: 500 13px/1 var(--f-latin); letter-spacing: .14em; text-transform: uppercase; opacity: .55; direction: ltr; }
.eyebrow { font: 600 14px/1 var(--f-latin); letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: 26px; direction: ltr; text-align: left; }
[dir=rtl] .eyebrow { text-align: right; }
h1.title { font: var(--display-weight, 700) 92px/1.05 var(--f-display); letter-spacing: -.01em; }
h2.title { font: var(--display-weight, 700) 64px/1.1 var(--f-display); margin-bottom: 18px; }
.lead { font-size: 24px; line-height: 1.75; max-width: 760px; opacity: .82; }
.grid { display: grid; gap: 28px; }
.mark { display: block; }
.mark svg { width: 100%; height: 100%; display: block; }
.swatch { border-radius: 18px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; font-family: var(--f-latin); direction: ltr; }
.swatch b { font: 600 22px/1.2 var(--f-body); display: block; margin-bottom: 14px; direction: rtl; text-align: right; }
.swatch code { font: 500 14px/1.7 'JetBrains Mono', monospace; opacity: .85; display: block; }
.type-row { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 26px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); align-items: baseline; }
.type-row small { font: 500 14px/1.6 var(--f-latin); letter-spacing: .06em; opacity: .6; direction: ltr; text-align: right; }
.card { border-radius: 14px; overflow: hidden; position: relative; }
.shadow { box-shadow: 0 30px 60px -20px rgba(20,20,20,.35), 0 8px 18px -8px rgba(20,20,20,.2); }
.dont { position: relative; border-radius: 16px; background: color-mix(in srgb, currentColor 6%, transparent); aspect-ratio: 1.3; display: grid; place-items: center; }
.dont::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1.5px), #D23C3C calc(50% - 1.5px), #D23C3C calc(50% + 1.5px), transparent calc(50% + 1.5px)); border-radius: 16px; opacity: .8; }
.dont-label { font-size: 16px; margin-top: 12px; opacity: .75; text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 15px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.toolbar { position: fixed; inset: 16px 16px auto auto; display: flex; gap: 10px; z-index: 10; direction: ltr; }
.toolbar a { font: 600 14px/1 Inter, sans-serif; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); padding: 12px 18px; border-radius: 999px; text-decoration: none; border: 1px solid rgba(255,255,255,.18); }
.toolbar a:hover { background: rgba(255,255,255,.22); }
@media print {
  @page { size: 1600px 900px; margin: 0; }
  html { background: none; }
  .book { padding: 0; gap: 0; display: block; }
  .page-wrap { width: var(--page-w); height: var(--page-h); break-after: page; }
  .page { transform: none; box-shadow: none; }
  .toolbar, .demo-badge { display: none !important; }
}