/* NativeOffice - brand design system.
 *
 * One stylesheet for every public page: header, footer, type, buttons,
 * surfaces, device frames, the tap-through demos and the pricing blocks.
 *
 * Colour comes from the logo: the blue-to-violet N for the brand, and the
 * Writer blue, Sheets green and Slides orange for the apps. Surfaces are flat
 * and quiet so the real screenshots carry the page. Buttons are solid colours
 * (no gradients), which also keeps their edges clean.
 *
 * Dark is the default (js/theme.js); light is the same design with other
 * values. Motion respects prefers-reduced-motion.
 */

:root {
  --bn-bg: #f7f7f9;
  --bn-bg-2: #eff0f4;
  --bn-surface: #ffffff;
  --bn-surface-2: #f2f3f7;
  --bn-surface-solid: #ffffff;
  --bn-line: #e3e5ec;
  --bn-line-2: #d3d6df;
  --bn-ink: #0d0f14;
  --bn-dim: #4d5363;
  --bn-faint: #7c8293;
  --bn-accent: #3a63f5;
  --bn-accent-hover: #2f55e0;
  --bn-accent-2: #7b5cf0;
  --bn-accent-soft: rgba(58, 99, 245, 0.1);
  --bn-green: #14935d;
  --bn-glow: rgba(58, 99, 245, 0.16);
  --bn-shadow: 0 1px 2px rgba(13, 15, 20, 0.06), 0 12px 32px -12px rgba(13, 15, 20, 0.18);
  --bn-shadow-lg: 0 2px 6px rgba(13, 15, 20, 0.06), 0 40px 80px -30px rgba(13, 15, 20, 0.3);
  --bn-grad: #3a63f5;
  --bn-writer: #2f6be8;
  --bn-sheets: #13965a;
  --bn-slides: #e8641f;
  --bn-pdf: #e0434b;
  --bn-scan: #6a5cf5;
  --bn-radius: 20px;
  --bn-max: 1200px;
  --bn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bn-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --bn-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --bn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

[data-theme="dark"] {
  --bn-bg: #0a0b0e;
  --bn-bg-2: #0e1014;
  --bn-surface: #121419;
  --bn-surface-2: #181b21;
  --bn-surface-solid: #14161b;
  --bn-line: #20232b;
  --bn-line-2: #2c3039;
  --bn-ink: #f2f3f5;
  --bn-dim: #a3a8b4;
  --bn-faint: #6f7584;
  --bn-accent: #4d74ff;
  --bn-accent-hover: #6386ff;
  --bn-accent-2: #9179ff;
  --bn-accent-soft: rgba(77, 116, 255, 0.14);
  --bn-green: #34c47c;
  --bn-glow: rgba(77, 116, 255, 0.22);
  --bn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --bn-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 50px 100px -40px rgba(0, 0, 0, 0.85);
  --bn-grad: #4d74ff;
  --bn-writer: #4a86ff;
  --bn-sheets: #2fbf78;
  --bn-slides: #ff7a3a;
  --bn-pdf: #ff5a62;
  --bn-scan: #8a7dff;
  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

.bn {
  margin: 0;
  background: var(--bn-bg);
  color: var(--bn-ink);
  font-family: var(--bn-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }
.bn:where(:not(.bn-inner)) :where(img) { max-width: 100%; height: auto; display: block; }
.bn:where(:not(.bn-inner)) :where(a) { color: inherit; text-decoration: none; }
.bn :where(.bn-nav, .bn-sheet, .bn-foot) :where(a) { color: inherit; text-decoration: none; }
.bn :where(.bn-nav, .bn-sheet, .bn-foot) :where(img) { display: block; max-width: 100%; height: auto; }
.bn ::selection { background: var(--bn-accent); color: #fff; }
.bn :focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 3px; border-radius: 8px; }
.bn:where(:not(.bn-inner)) :where(h1, h2, h3, h4) { font-family: var(--bn-display); color: var(--bn-ink); margin: 0; letter-spacing: -0.03em; line-height: 1.08; font-weight: 650; }
.bn:where(:not(.bn-inner)) :where(p) { margin: 0; }
.bn :where(.bn-foot) :where(h4, p) { margin: 0; }
.bn [hidden] { display: none !important; }

.bn-wrap { width: 100%; max-width: var(--bn-max); margin: 0 auto; padding: 0 24px; }
.bn-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--bn-ink); color: var(--bn-bg); padding: 10px 14px; border-radius: 10px; }
.bn-skip:focus { left: 12px; }
.bn-muted { color: var(--bn-faint); }

/* The one bit of atmosphere: a soft wash of the logo's blue behind the top. */
.bn-ambient { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 55% at 70% 0%, var(--bn-glow), transparent 70%), radial-gradient(40% 40% at 15% 10%, color-mix(in srgb, var(--bn-accent-2) 10%, transparent), transparent 70%); }
.bn-ambient * { display: none; }
.bn-noise, .bn-progress { display: none; }

.bn-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--bn-dim); }
.bn-label i { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--bn-accent)); }

/* Two-tone headings: the second sentence in a quieter colour. */
.bn .soft { color: var(--bn-faint); }

/* ── Navigation ────────────────────────────────────────────────────────── */

.bn-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 12px 0; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, padding .3s var(--bn-ease); }
.bn-nav.scrolled { padding: 8px 0; background: color-mix(in srgb, var(--bn-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--bn-line); }
.bn-nav-inner { display: flex; align-items: center; gap: 26px; }
.bn-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bn-display); font-weight: 650; font-size: 18px; letter-spacing: -0.02em; color: var(--bn-ink); }
.bn-logo img { width: auto; height: 28px; aspect-ratio: 137 / 160; }
.bn-logo b { font-weight: 650; color: var(--bn-accent); }
.bn-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.bn-links > li { position: relative; }
.bn-links > li > a, .bn-links > li > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 0; background: none;
  font: 500 14.5px var(--bn-font); color: var(--bn-dim); cursor: pointer; transition: color .2s, background .2s;
}
.bn-links > li > a:hover, .bn-links > li > button:hover, .bn-links > li > a[aria-current="page"] { color: var(--bn-ink); background: var(--bn-surface-2); }
.bn-links .chev { width: 12px; height: 12px; transition: transform .3s var(--bn-ease); }
.bn-links li.open .chev { transform: rotate(180deg); }
.bn-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bn-actions .theme-toggle, .bn-icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bn-line); background: transparent; color: var(--bn-dim); cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.bn-actions .theme-toggle:hover, .bn-icon-btn:hover { color: var(--bn-ink); background: var(--bn-surface-2); }
.bn-actions .theme-toggle svg, .bn-icon-btn svg { width: 17px; height: 17px; }
.bn-actions .theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .bn-actions .theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .bn-actions .theme-toggle .ico-moon { display: none; }
.bn-actions .bn-burger { order: 5; display: none; }

.bn-mega {
  position: absolute; top: calc(100% + 10px); left: -16px; width: 600px; padding: 10px; border-radius: 18px;
  background: var(--bn-surface-solid); border: 1px solid var(--bn-line-2); box-shadow: var(--bn-shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .3s var(--bn-ease);
}
.bn-links li.open .bn-mega { opacity: 1; transform: none; pointer-events: auto; }
.bn-mega a { display: flex; gap: 12px; align-items: center; padding: 11px; border-radius: 12px; transition: background .2s; }
.bn-mega a:hover { background: var(--bn-surface-2); }
.bn-mega img, .bn-mega .bn-app-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.bn-mega strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--bn-ink); }
.bn-mega span { display: block; font-size: 13px; color: var(--bn-faint); line-height: 1.4; margin-top: 1px; }
.bn-mega .wide { grid-column: 1 / -1; border-top: 1px solid var(--bn-line); border-radius: 0 0 12px 12px; margin-top: 4px; padding-top: 14px; }
.bn-sheet { display: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.bn-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: 600 15px var(--bn-font); letter-spacing: -0.01em; white-space: nowrap; line-height: 1.2;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--bn-ease);
}
.bn-btn:active { transform: translateY(1px); }
.bn-btn svg { width: 18px; height: 18px; flex: none; }
.bn-btn-sm { padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.bn-btn-lg { padding: 15px 24px; border-radius: 14px; font-size: 16px; }
.bn-btn-primary { color: #fff; background-color: var(--bn-accent); }
.bn-btn-primary:hover { background-color: var(--bn-accent-hover); }
.bn-btn-glass { color: var(--bn-ink); background-color: var(--bn-surface); border-color: var(--bn-line-2); }
.bn-btn-glass:hover { background-color: var(--bn-surface-2); }
.bn-btn-text { color: var(--bn-dim); background: none; padding-left: 8px; padding-right: 8px; }
.bn-btn-text:hover { color: var(--bn-ink); }
.bn-btn .arrow { transition: transform .25s var(--bn-ease); }
.bn-btn:hover .arrow { transform: translateX(3px); }

.bn-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--bn-accent); }
.bn-link .arrow { transition: transform .25s var(--bn-ease); }
.bn-link:hover .arrow { transform: translateX(3px); }

.bn-store {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 12px;
  border: 1px solid var(--bn-line-2); background: var(--bn-surface); transition: border-color .2s, background .2s;
}
.bn-store:hover { background: var(--bn-surface-2); }
.bn-store svg { width: 22px; height: 22px; }
.bn-store small { display: block; font-size: 10.5px; color: var(--bn-faint); line-height: 1.2; }
.bn-store b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.bn-stores { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.bn-section { position: relative; padding: 120px 0; }
.bn-section-tight { padding: 80px 0; }
.bn-head { max-width: 720px; margin-bottom: 56px; }
.bn-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bn-head h2 { font-size: clamp(32px, 4.4vw, 54px); margin-top: 14px; }
.bn-head p { margin-top: 18px; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--bn-dim); line-height: 1.65; }
.bn-head.center p { margin-left: auto; margin-right: auto; max-width: 620px; }

.bn-card { position: relative; border-radius: var(--bn-radius); background: var(--bn-surface); border: 1px solid var(--bn-line); overflow: hidden; transition: border-color .3s; }
.bn-card:hover { border-color: var(--bn-line-2); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.bn-hero { position: relative; padding: 150px 0 40px; }
.bn-hero-copy { max-width: 980px; margin: 0 auto; text-align: center; }
.bn-pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--bn-line-2); background: var(--bn-surface); font-size: 13.5px; color: var(--bn-dim); transition: border-color .2s; }
.bn-pill:hover { border-color: var(--bn-accent); }
.bn-pill .tag { padding: 3px 10px; border-radius: 999px; background: var(--bn-accent-soft); color: var(--bn-accent); font-weight: 650; font-size: 12px; }
.bn-hero h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.03; letter-spacing: -0.045em; margin-top: 24px; }
.bn-hero .lead { margin: 24px auto 0; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--bn-dim); max-width: 680px; line-height: 1.6; }
.bn-cta-row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bn-note { margin-top: 16px; font-size: 13.5px; color: var(--bn-faint); }
.bn-hero .bn-stores { justify-content: center; margin-top: 26px; }

/* Desktop window and phone, both real captures */
.bn-hero-stage { position: relative; margin: 70px auto 0; max-width: 1080px; padding: 0 0 40px; }
.bn-window { position: relative; border-radius: 14px; overflow: hidden; background: var(--bn-surface-solid); border: 1px solid var(--bn-line-2); box-shadow: var(--bn-shadow-lg); }
.bn-window-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--bn-line); background: var(--bn-surface-2); }
.bn-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--bn-line-2); }
.bn-window-bar span { margin-left: 8px; font-size: 12px; color: var(--bn-faint); }
.bn-window img { width: 100%; height: auto; display: block; }
.bn-hero-stage .bn-phone { position: absolute; right: -2%; bottom: 0; width: 23%; }

.bn-phone { position: relative; border-radius: 13.5% / 6.2%; padding: 2.4%; background: #0b0c10; box-shadow: var(--bn-shadow-lg), inset 0 0 0 1.5px #2a2d35; }
.bn-phone > img, .bn-phone > .screen { display: block; width: 100%; aspect-ratio: 9 / 20; border-radius: 11.5% / 5.2%; object-fit: cover; }

/* ── The family ────────────────────────────────────────────────────────── */

.bn-story { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bn-chapter { padding: 26px 24px 0; display: flex; flex-direction: column; }
.bn-chapter .step { font-size: 13px; font-weight: 650; color: var(--c); }
.bn-chapter h3 { font-size: 21px; margin-top: 10px; letter-spacing: -0.02em; }
.bn-chapter p { margin-top: 8px; color: var(--bn-dim); font-size: 14.5px; }
.bn-chapter .art { margin: 22px -24px 0; height: 210px; position: relative; overflow: hidden; background: var(--bn-surface-2); border-top: 1px solid var(--bn-line); margin-top: auto; }
.bn-chapter .txt { margin-bottom: 22px; }
.bn-chapter .art img { position: absolute; }
.bn-chapter .art .desk { left: 18px; top: 18px; width: 160%; max-width: none; border-radius: 8px; border: 1px solid var(--bn-line-2); box-shadow: var(--bn-shadow); }
.bn-chapter .art .ph { width: 40%; top: 18px; border-radius: 14px; box-shadow: var(--bn-shadow); border: 1px solid var(--bn-line-2); }
.bn-chapter .art .ph.a { left: 9%; }
.bn-chapter .art .ph.b { left: 52%; top: 40px; }
.bn-chapter .art .pw { left: 50%; top: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; }
.bn-chapter.next { border-style: dashed; }
.bn-pw-browse { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--bn-ink); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: background-color .2s, border-color .2s; position: relative; z-index: 5; }
.bn-pw-browse:hover { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.bn-pw-browse .arrow { transition: transform .25s var(--bn-ease); }
.bn-pw-browse:hover .arrow { transform: translateX(3px); }
.bn-tile-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bn-tile-cta { pointer-events: none; padding: 7px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(14, 16, 21, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); transition: background-color .25s; }
.bn-tile:hover .bn-tile-cta { background: rgba(255, 255, 255, 0.18); }

.bn-spin { animation: bn-spin 7s linear infinite; }
.bn-card:hover .bn-spin { animation-duration: 1.6s; }
@keyframes bn-spin { to { transform: rotate(360deg); } }
.bn-on-light { display: none !important; }
:root:not([data-theme="dark"]) .bn-on-light { display: block !important; }
:root:not([data-theme="dark"]) .bn-on-dark { display: none !important; }

/* ── Product rows ──────────────────────────────────────────────────────── */

.bn-apps { display: grid; gap: 16px; }
.bn-app { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; padding: 48px; }
.bn-app.flip > :first-child { order: 2; }
.bn-app-top { display: flex; align-items: center; gap: 12px; }
.bn-app-top img { width: 44px; height: 44px; border-radius: 12px; }
.bn-app-top b { display: block; font-size: 17px; font-weight: 650; }
.bn-app-top small { display: block; font-size: 13px; color: var(--bn-faint); }
.bn-app h3 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 22px; }
.bn-app p { margin-top: 12px; color: var(--bn-dim); font-size: 16px; max-width: 480px; }
.bn-app ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.bn-app li { display: flex; gap: 10px; color: var(--bn-dim); font-size: 15px; }
.bn-app li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--c, var(--bn-accent)); }
.bn-app .bn-cta-row { justify-content: flex-start; margin-top: 26px; }
.bn-app-art .phones { display: flex; gap: 18px; justify-content: center; }
.bn-app-art .phones .bn-phone { width: 42%; max-width: 230px; }
.bn-app-art .phones .bn-phone:nth-child(2) { margin-top: 44px; }
.bn-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--bn-dim); }
.bn-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-green); }
.bn-status.soon::before { background: #e8a33a; }

.bn-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--bn-line); background: var(--bn-surface); margin-bottom: 16px; }
.bn-tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 14px var(--bn-font); color: var(--bn-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; white-space: nowrap; }
.bn-tabs button i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.bn-tabs button.on { background: var(--bn-surface-2); color: var(--bn-ink); box-shadow: inset 0 0 0 1px var(--bn-line-2); }
.bn-stack { position: relative; }
.bn-stack > * { transition: opacity .45s var(--bn-ease); }
.bn-stack > :not(:first-child) { position: absolute; inset: 0; }
.bn-stack > .off { opacity: 0; pointer-events: none; }

/* ── Tap-through demo ──────────────────────────────────────────────────── */

.bn-demo { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
.bn-demo.left { grid-template-columns: 360px 1fr; }
.bn-demo.left .bn-demo-device { order: -1; }
.bn-demo-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bn-demo-jumps button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--bn-line-2); background: var(--bn-surface); color: var(--bn-ink); font: 600 14px var(--bn-font); cursor: pointer; transition: border-color .2s, background .2s; }
.bn-demo-jumps button i { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--bn-accent)); }
.bn-demo-jumps button:hover { background: var(--bn-surface-2); }
.bn-demo-jumps button.on { border-color: var(--bn-accent); background: var(--bn-accent-soft); }
.bn-demo-now { margin-top: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--bn-line); background: var(--bn-surface); min-height: 100px; }
.bn-demo-now b { display: block; font-size: 16px; }
.bn-demo-now span { display: block; margin-top: 4px; color: var(--bn-dim); font-size: 15px; }
.bn-demo-tools { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--bn-faint); }
.bn-demo-tools button { border: 0; background: none; padding: 0; font: 600 14px var(--bn-font); color: var(--bn-accent); cursor: pointer; }
.bn-demo-tools button:disabled { color: var(--bn-faint); cursor: default; }
.bn-demo-device { position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.bn-demo-screen { position: relative; overflow: hidden; border-radius: 11.5% / 5.2%; aspect-ratio: 9 / 20; background: #000; }
.bn-demo-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.bn-demo-screen > img.out { opacity: 0; }
.bn-hot { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 10px; z-index: 2; }
.bn-hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--bn-accent); background: var(--bn-accent-soft); opacity: 0; transition: opacity .2s; }
.bn-hot:hover::after, .bn-hot:focus-visible::after { opacity: 1; }
.bn-demo.hints .bn-hot::after { opacity: .85; animation: bn-hint 1.8s ease-in-out infinite; }
@keyframes bn-hint { 50% { opacity: .2; } }

/* ── Feature grids ─────────────────────────────────────────────────────── */

.bn-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bn-grid4, .bn-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bn-feat, .bn-mini { padding: 26px; }
.bn-feat .ico, .bn-mini .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--bn-accent)) 14%, transparent); color: var(--c, var(--bn-accent)); }
.bn-feat .ico svg, .bn-mini .ico svg { width: 20px; height: 20px; }
.bn-feat h3 { font-size: 18px; margin-top: 18px; letter-spacing: -0.015em; }
.bn-feat p { margin-top: 8px; color: var(--bn-dim); font-size: 15px; }
.bn-mini b { display: block; margin-top: 16px; font-size: 16px; letter-spacing: -0.01em; }
.bn-mini span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--bn-dim); line-height: 1.55; }

.bn-formats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 36px; }
.bn-formats span { font: 500 13px var(--bn-mono); padding: 7px 12px; border-radius: 9px; border: 1px solid var(--bn-line); background: var(--bn-surface); color: var(--bn-dim); }

/* ── Pricing ───────────────────────────────────────────────────────────── */

.bn-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.bn-plan { padding: 32px; display: flex; flex-direction: column; }
.bn-plan .name { font-size: 15px; font-weight: 650; color: var(--bn-dim); }
.bn-plan .price { margin-top: 14px; font-family: var(--bn-display); font-size: 48px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.bn-plan .price small { font-size: 15px; font-weight: 500; color: var(--bn-faint); letter-spacing: 0; margin-left: 4px; }
.bn-plan .sub { margin-top: 10px; color: var(--bn-dim); font-size: 14.5px; min-height: 44px; }
.bn-plan ul { list-style: none; margin: 22px 0 28px; padding: 22px 0 0; border-top: 1px solid var(--bn-line); display: grid; gap: 11px; }
.bn-plan li { display: flex; gap: 10px; font-size: 15px; color: var(--bn-dim); }
.bn-plan li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--bn-green); }
.bn-plan .bn-btn { margin-top: auto; width: 100%; }
.bn-plan.hot { border-color: var(--bn-accent); box-shadow: 0 0 0 1px var(--bn-accent), 0 30px 60px -30px var(--bn-glow); }
.bn-plan .badge { position: absolute; top: 20px; right: 20px; padding: 4px 10px; border-radius: 999px; background: var(--bn-accent-soft); color: var(--bn-accent); font-size: 12px; font-weight: 700; }
.bn-billing { display: inline-flex; padding: 4px; border-radius: 12px; border: 1px solid var(--bn-line-2); background: var(--bn-surface); margin-bottom: 34px; }
.bn-billing button { border: 0; background: none; padding: 8px 16px; border-radius: 9px; font: 600 14px var(--bn-font); color: var(--bn-dim); cursor: pointer; transition: background .2s, color .2s; }
.bn-billing button.on { background: var(--bn-surface-2); color: var(--bn-ink); box-shadow: inset 0 0 0 1px var(--bn-line-2); }
.bn-billing em { font-style: normal; font-size: 11.5px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--bn-green) 16%, transparent); color: var(--bn-green); }
.bn-plan-extra { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; color: var(--bn-dim); font-size: 14.5px; }
.bn-plan-extra a { color: var(--bn-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bn-line-2); }

/* ── Vision and roadmap ────────────────────────────────────────────────── */

.bn-vision { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
.bn-vision blockquote { margin: 0; font-family: var(--bn-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.24; letter-spacing: -0.03em; font-weight: 600; }
.bn-vision .by { margin-top: 22px; color: var(--bn-faint); font-size: 15px; }
.bn-road { list-style: none; margin: 0; padding: 0; position: relative; }
.bn-road::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 30px; width: 2px; background: var(--bn-line-2); }
.bn-road li { position: relative; padding: 6px 0 24px 36px; }
.bn-road li::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--bn-bg); border: 2px solid var(--bn-line-2); }
.bn-road li.done::before { background: var(--c, var(--bn-accent)); border-color: var(--c, var(--bn-accent)); }
.bn-road small { font-size: 12.5px; font-weight: 650; color: var(--c, var(--bn-faint)); text-transform: uppercase; letter-spacing: .06em; }
.bn-road b { display: block; font-size: 18px; margin-top: 2px; }
.bn-road p { color: var(--bn-dim); font-size: 15px; margin-top: 4px; }

/* ── Final call to action ──────────────────────────────────────────────── */

.bn-final { text-align: center; padding: 80px 30px; border-radius: 28px; border: 1px solid var(--bn-line); background: radial-gradient(70% 90% at 50% 0%, var(--bn-glow), transparent 70%), var(--bn-surface); }
.bn-final h2 { font-size: clamp(34px, 4.6vw, 58px); }
.bn-final p { margin: 18px auto 0; max-width: 540px; color: var(--bn-dim); font-size: 17.5px; }
.bn-final canvas { display: none; }

/* ── FAQ and comparison ────────────────────────────────────────────────── */

.bn-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.bn-faq details { border: 1px solid var(--bn-line); border-radius: 16px; background: var(--bn-surface); padding: 2px 22px; }
.bn-faq details[open] { border-color: var(--bn-line-2); }
.bn-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 17px 0; font-weight: 600; font-size: 16px; }
.bn-faq summary::-webkit-details-marker { display: none; }
.bn-faq summary::after { content: "+"; font: 400 24px var(--bn-font); color: var(--bn-faint); transition: transform .3s var(--bn-ease); }
.bn-faq details[open] summary::after { transform: rotate(45deg); }
.bn-faq details p { padding: 0 0 18px; color: var(--bn-dim); font-size: 15.5px; }
.bn-faq details a { color: var(--bn-ink); text-decoration: underline; text-underline-offset: 3px; }
.bn-compare-wrap { overflow-x: auto; }
.bn-compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bn-line); border-radius: 18px; overflow: hidden; background: var(--bn-surface); }
.bn-compare th, .bn-compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bn-line); font-size: 15px; }
.bn-compare th { font-size: 13px; font-weight: 650; color: var(--bn-faint); background: var(--bn-surface-2); }
.bn-compare td { color: var(--bn-dim); }
.bn-compare td:first-child { color: var(--bn-ink); }
.bn-compare tr:last-child td { border-bottom: 0; }
.bn-compare .yes { color: var(--bn-green); font-weight: 700; }
.bn-compare .no { color: var(--bn-faint); }

/* ── Product page hero and rows ────────────────────────────────────────── */

.bn-phero { padding: 150px 0 60px; }
.bn-phero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.bn-app-badge { display: inline-flex; align-items: center; gap: 12px; }
.bn-app-badge img { width: 48px; height: 48px; border-radius: 13px; }
.bn-app-badge b { display: block; font-size: 15.5px; }
.bn-app-badge small { display: block; font-size: 13px; color: var(--bn-faint); }
.bn-phero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.045em; margin-top: 26px; }
.bn-phero .lead { margin-top: 22px; font-size: clamp(17px, 1.5vw, 19px); color: var(--bn-dim); max-width: 560px; }
.bn-phero .bn-cta-row { justify-content: flex-start; }
.bn-phero-visual { position: relative; display: flex; justify-content: center; gap: 16px; align-items: flex-end; }
.bn-phero-visual .bn-phone { width: 46%; max-width: 250px; }
.bn-phero-visual .bn-phone:nth-child(2) { margin-bottom: 40px; }

.bn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.bn-split + .bn-split { margin-top: 110px; }
.bn-split.flip > :first-child { order: 2; }
.bn-split h3 { font-size: clamp(28px, 3vw, 40px); margin-top: 14px; }
.bn-split p { margin-top: 14px; color: var(--bn-dim); font-size: 16.5px; max-width: 520px; }
.bn-split ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bn-split li { display: flex; gap: 10px; color: var(--bn-dim); font-size: 15.5px; }
.bn-split li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--c, var(--bn-accent)); }
.bn-split-art { display: flex; justify-content: center; gap: 16px; }
.bn-split-art .bn-phone { width: 46%; max-width: 250px; }

.bn-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bn-howto .bn-card { padding: 26px; }
.bn-howto em { font-style: normal; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bn-accent-soft); color: var(--bn-accent); font-weight: 700; font-size: 14px; }
.bn-howto b { display: block; font-size: 18px; margin-top: 16px; }
.bn-howto span { display: block; margin-top: 6px; color: var(--bn-dim); font-size: 15px; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.bn-foot, body.bn footer.bn-foot { position: relative; margin-top: 100px; padding: 64px 0 36px; border-top: 1px solid var(--bn-line); background: transparent; }
.bn-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.bn-foot .about p { margin-top: 14px; color: var(--bn-dim); font-size: 14.5px; max-width: 320px; }
.bn-foot h4 { font: 600 13.5px var(--bn-font); color: var(--bn-ink); }
.bn-foot ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.bn-foot ul a { color: var(--bn-dim); font-size: 14.5px; transition: color .2s; }
.bn-foot ul a:hover { color: var(--bn-ink); }
.bn-foot-invest { margin-top: 48px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--bn-line); display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--bn-dim); }
.bn-foot-invest svg { flex: none; width: 18px; height: 18px; color: var(--bn-accent); }
.bn-foot-invest a { color: var(--bn-ink); font-weight: 600; }
.bn-social { display: flex; gap: 8px; margin-top: 18px; }
.bn-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--bn-line); color: var(--bn-dim); transition: color .2s, border-color .2s, background-color .2s; }
.bn-social a:hover { color: var(--bn-ink); border-color: var(--bn-line-2); background: var(--bn-surface); }
.bn-social svg { width: 17px; height: 17px; }
.bn-foot-base { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--bn-faint); }
.bn-foot-mark { display: none; }

/* ── Reveal on scroll ──────────────────────────────────────────────────── */
/* Visible without JavaScript; brand.js hides only what is still below the
   fold and reveals it well before it arrives. */
.bn-js [data-reveal].pre { opacity: 0; transform: translateY(18px); }
.bn-js [data-reveal] { transition: opacity .7s var(--bn-ease), transform .8s var(--bn-ease); transition-delay: var(--d, 0s); }

/* ── Inner pages ───────────────────────────────────────────────────────── */

body.bn.bn-inner { padding-top: 70px; }
body.bn-inner > main, body.bn-inner > .container, body.bn-inner > .page { position: relative; z-index: 1; }

/* ── In motion: the bento of live tiles and films ──────────────────────── */
/* Live tiles are drawn and animated by brand.js; film tiles play muted while
   on screen and open larger on click. */

.bn-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bn-tile { position: relative; grid-column: span 2; height: 360px; border-radius: 18px; overflow: hidden; background: var(--bn-surface); border: 1px solid var(--bn-line); isolation: isolate; }
.bn-tile.media { background: #0b0c10; border-color: var(--bn-line-2); }
.bn-tile.tall { height: auto; }
.bn-tile.wide { grid-column: span 4; height: auto; aspect-ratio: 16 / 9; }
.bn-tile.half { grid-column: span 3; height: auto; aspect-ratio: 16 / 9; }
.bn-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--bn-ease); }
.bn-tile.tall video { object-position: 50% 0; }
.bn-tile video.mid { object-position: 50% 42%; }
.bn-tile.media:hover video { transform: scale(1.025); }
.bn-tile-open { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: zoom-in; }
.bn-tile-open:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: -4px; border-radius: 18px; }
.bn-tile-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; pointer-events: none; }
.bn-tile-foot b { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bn-tile-foot small { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
.bn-tile-foot a { pointer-events: auto; font-size: 14px; font-weight: 600; color: var(--bn-ink); }
.bn-tile-foot a .arrow { display: inline-block; transition: transform .25s var(--bn-ease); }
.bn-tile-foot a:hover .arrow { transform: translateX(3px); }
.bn-tile.media .bn-tile-foot { color: #fff; padding-top: 48px; background: linear-gradient(to top, rgba(6, 7, 10, 0.72), rgba(6, 7, 10, 0)); }
.bn-tile.media .bn-tile-foot a { color: #fff; }
.bn-tile.live .bn-tile-foot { background: linear-gradient(to top, var(--bn-surface) 55%, transparent); padding-top: 34px; }

/* Writer: a page that writes itself. */
.bn-live-doc { position: absolute; inset: 18px 18px 0; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; border: 1px solid var(--bn-line-2); border-bottom: 0; background: var(--bn-surface-2); overflow: hidden; }
.bn-live-doc .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--bn-line); font-size: 11.5px; color: var(--bn-faint); }
.bn-live-doc .bar span { margin-right: auto; font-family: var(--bn-mono); }
.bn-live-doc .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--bn-line-2); }
.bn-live-doc .page { flex: 1; margin: 14px 22px 0; padding: 20px 22px; background: #fff; color: #1d2230; border-radius: 6px 6px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.35); font-family: Georgia, "Times New Roman", serif; font-size: 12.5px; line-height: 1.55; transition: opacity .5s; }
.bn-live-doc .page.fade { opacity: 0; }
.bn-live-doc .page h4 { font-family: var(--bn-font); font-size: 17px; font-weight: 650; color: #1b3f9e; letter-spacing: -0.01em; margin-bottom: 4px; }
.bn-live-doc .page h5 { font-family: var(--bn-font); font-size: 12px; font-weight: 650; color: #2f6be8; margin: 10px 0 2px; }
.bn-live-doc .page p { margin: 0; }
.bn-live-doc .page em { color: #6b7180; font-size: 11.5px; }
.bn-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: #2f6be8; animation: bn-blink 1s steps(2, start) infinite; }
@keyframes bn-blink { to { visibility: hidden; } }

/* Sheets: a total that keeps recalculating. */
.bn-live-sheet { position: absolute; inset: 18px 18px 0; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.bn-live-sheet .fx { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--bn-line-2); background: var(--bn-surface-2); font-family: var(--bn-mono); font-size: 11.5px; min-height: 31px; }
.bn-live-sheet .fx b { color: var(--bn-faint); font-weight: 500; padding-right: 10px; border-right: 1px solid var(--bn-line-2); }
.bn-live-sheet .fx .f { color: var(--bn-sheets); white-space: nowrap; overflow: hidden; }
.bn-live-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; border-radius: 9px; overflow: hidden; background: var(--bn-surface-2); }
.bn-live-sheet th, .bn-live-sheet td { border: 1px solid var(--bn-line); padding: 5px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-live-sheet th { font-weight: 500; color: var(--bn-faint); font-size: 10.5px; text-align: center; background: var(--bn-bg-2); }
.bn-live-sheet thead th:first-child { width: 26px; }
.bn-live-sheet thead th:nth-child(3) { width: 22%; }
.bn-live-sheet thead th:nth-child(4) { width: 30%; }
.bn-live-sheet td { color: var(--bn-dim); }
.bn-live-sheet td.h { color: var(--bn-ink); font-weight: 600; }
.bn-live-sheet td.n { text-align: right; font-variant-numeric: tabular-nums; transition: background-color .6s, color .6s; }
.bn-live-sheet td.t { color: var(--bn-ink); font-weight: 650; }
.bn-live-sheet td.sel { box-shadow: inset 0 0 0 2px var(--bn-sheets); }
.bn-live-sheet td.flash { background: color-mix(in srgb, var(--bn-sheets) 22%, transparent); color: var(--bn-ink); }
.bn-live-sheet .bars { display: flex; align-items: flex-end; gap: 8px; height: 50px; padding: 0 4px; }
.bn-live-sheet .bars i { flex: 1; height: 8%; border-radius: 4px 4px 0 0; background: var(--bn-sheets); opacity: .85; transition: height .9s var(--bn-ease); }
.bn-live-sheet .bars i:nth-child(2) { opacity: .7; }
.bn-live-sheet .bars i:nth-child(3) { opacity: .55; }
.bn-live-sheet .bars i:nth-child(4) { opacity: .4; }

/* Latest releases, above the bento. */
.bn-releases { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; font-size: 13px; }
.bn-releases .live { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-weight: 600; color: var(--bn-dim); }
.bn-releases .live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--bn-green); }
.bn-releases .live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--bn-green); opacity: 0; animation: bn-ping 2.4s var(--bn-ease) infinite; }
@keyframes bn-ping { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.bn-releases a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; border: 1px solid var(--bn-line); background: var(--bn-surface); color: var(--bn-dim); transition: border-color .2s; }
.bn-releases a::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.bn-releases a:hover { border-color: var(--bn-line-2); }
.bn-releases b { color: var(--bn-ink); font-weight: 600; }
.bn-releases span { font-variant-numeric: tabular-nums; }

/* Memory: the published minimum against what NativeOffice uses. */
.bn-ram { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 36px; }
.bn-ram h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 12px; letter-spacing: -0.02em; }
.bn-ram p { margin-top: 12px; color: var(--bn-dim); font-size: 15.5px; line-height: 1.6; }
.bn-ram small { display: block; margin-top: 16px; color: var(--bn-faint); font-size: 12px; line-height: 1.5; }
.bn-ram .meter { padding: 22px; border-radius: 14px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); }
.bn-ram .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin: 0 0 10px; }
.bn-ram .row span { color: var(--bn-dim); font-variant-numeric: tabular-nums; }
.bn-ram .row em { font-style: normal; }
.bn-ram .cells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; margin-bottom: 22px; }
.bn-ram .cells i { aspect-ratio: 1.6; border-radius: 3px; background: var(--bn-line); transition: background-color .25s; }
.bn-ram .cells.ms i.on { background: #e5534b; }
.bn-ram .cells.no i.on { background: var(--bn-accent); }
.bn-ram .meter > em { font-style: normal; font-size: 11.5px; color: var(--bn-faint); font-family: var(--bn-mono); }

/* The larger player. */
.bn-lightbox { padding: 0; border: 0; background: transparent; max-width: min(1100px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.bn-lightbox::backdrop { background: rgba(5, 6, 8, 0.82); backdrop-filter: blur(6px); }
.bn-lightbox video { display: block; width: 100%; max-height: calc(100vh - 120px); border-radius: 16px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.bn-lightbox button { position: absolute; top: -48px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.bn-lightbox button:hover { background: rgba(255, 255, 255, 0.2); }

/* A single film inside a product page. */
.bn-film { position: relative; border-radius: 18px; overflow: hidden; background: #0b0c10; border: 1px solid var(--bn-line-2); box-shadow: var(--bn-shadow-lg); aspect-ratio: 16 / 9; }
.bn-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-film.square { aspect-ratio: 1 / 1; }
.bn-film.square video { object-position: 50% 0; }

/* ── Light mode: keep white screenshots off white surfaces ─────────────── */
:root:not([data-theme="dark"]) .bn-chapter .art { background: #e9ebf1; }
:root:not([data-theme="dark"]) .bn-window { border-color: #cfd3dc; }
:root:not([data-theme="dark"]) .bn-window-bar { background: #eceef3; }
:root:not([data-theme="dark"]) .bn-live-doc .page { box-shadow: 0 0 0 1px #dfe2e9, 0 10px 30px -14px rgba(13, 15, 20, 0.25); }

/* ══ Polish layer ═════════════════════════════════════════════════════════
   Glass, light and motion on top of the flat system above. Everything here
   is decoration: with it removed the pages still read and work. Motion stops
   for prefers-reduced-motion (see the end of this block). */

@property --bn-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* 1. Glass header: frosted, a bright hairline on top, a lit seam below. */
.bn-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; opacity: 0; transition: opacity .4s;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 25%, color-mix(in srgb, var(--bn-accent) 70%, transparent) 50%, rgba(255, 255, 255, 0.12) 75%, transparent); }
.bn-nav.scrolled { border-bottom-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bn-bg) 80%, transparent), color-mix(in srgb, var(--bn-bg) 64%, transparent));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px -22px rgba(0, 0, 0, 0.7); }
.bn-nav.scrolled::after { opacity: 1; }
.bn-mega, .bn-sheet { background: color-mix(in srgb, var(--bn-surface-solid) 84%, transparent) !important; backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--bn-shadow-lg) !important; }

/* Search button in the header. */
.bn-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px; border-radius: 10px; border: 1px solid var(--bn-line); background: color-mix(in srgb, var(--bn-surface) 60%, transparent); color: var(--bn-faint); font: 500 13.5px var(--bn-font); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.bn-search:hover { color: var(--bn-ink); border-color: var(--bn-line-2); }
.bn-search svg { width: 16px; height: 16px; }
.bn-search kbd { font: 500 11px var(--bn-mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--bn-line-2); background: var(--bn-surface-2); color: var(--bn-dim); }

/* 2. Spotlight: a soft light and a lit border that follow the pointer. */
.bn-spot { isolation: isolate; }
.bn-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--bn-accent) 10%, transparent), transparent 65%); }
.bn-spot::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .4s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--bn-accent) 85%, #fff), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.bn-spot:hover::before, .bn-spot:hover::after { opacity: 1; }

/* 3. Frosted labels on the films, and a frosted "watch" mark on hover. */
.bn-tile.media .bn-tile-foot { background: none; padding: 14px; }
.bn-tile.media .bn-tile-foot b { padding: 7px 13px; border-radius: 99px; font-size: 14px; color: #fff;
  background: rgba(14, 16, 21, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); }
.bn-tile.media .bn-tile-foot small { background: rgba(255, 255, 255, 0.14); color: #fff; }
.bn-tile-open::after { content: ""; position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--bn-ease);
  background: rgba(14, 16, 21, 0.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 17px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bn-tile-open:hover::after, .bn-tile-open:focus-visible::after { opacity: 1; transform: none; }
.bn-film .bn-tile-open::after { top: 18px; right: 18px; }

/* 4. Premium card: glass with a slowly turning lit edge. */
.bn-plan.hot { border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--bn-accent) 9%, var(--bn-surface)), var(--bn-surface) 55%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bn-accent) 35%, transparent), 0 40px 90px -40px var(--bn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.bn-plan.hot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--bn-a), transparent 0 55%, var(--bn-accent) 72%, var(--bn-accent-2) 82%, #ffffff 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bn-turn 6s linear infinite; }
@keyframes bn-turn { to { --bn-a: 360deg; } }

/* 5, 6 and 7. Hero: a grid that fades out, lit near the pointer, beams of
   light running along its lines, and slow glows behind the copy. */
.bn-hero { isolation: isolate; }
.bn-hero > .bn-wrap { position: relative; z-index: 1; }
.bn-hero-fx { position: absolute; inset: 0 0 auto; height: 980px; z-index: 0; pointer-events: none; overflow: hidden; --g: 64px; --line: rgba(255, 255, 255, 0.055); --lit: color-mix(in srgb, var(--bn-accent) 60%, transparent); }
.bn-hero-fx .grid { position: absolute; inset: 0; background-size: var(--g) var(--g); background-position: 50% 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 18%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 62% 70% at 50% 18%, #000 25%, transparent 72%); }
.bn-hero-fx .grid.lit { --line: var(--lit); opacity: 0; transition: opacity .5s;
  -webkit-mask-image: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 30%), #000, transparent 72%); mask-image: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 30%), #000, transparent 72%); }
.bn-hero-fx.lit .grid.lit { opacity: 1; }
.bn-hero-fx .beams { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 18%, #000 30%, transparent 72%); mask-image: radial-gradient(ellipse 62% 70% at 50% 18%, #000 30%, transparent 72%); }
.bn-beam { position: absolute; top: 0; left: 0; opacity: 0; border-radius: 2px; }
.bn-beam.v { width: 1px; height: 140px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bn-accent) 80%, transparent) 75%, #fff); animation: bn-beam-v var(--dur, 7s) linear var(--delay, 0s) infinite; }
.bn-beam.h { height: 1px; width: 160px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--bn-accent-2) 80%, transparent) 75%, #fff); animation: bn-beam-h var(--dur, 7s) linear var(--delay, 0s) infinite; }
@keyframes bn-beam-v { 0% { transform: translate(var(--x), -140px); opacity: 0; } 4% { opacity: 1; } 45% { transform: translate(var(--x), 820px); opacity: 1; } 46%, 100% { transform: translate(var(--x), 820px); opacity: 0; } }
@keyframes bn-beam-h { 0% { transform: translate(-160px, var(--y)); opacity: 0; } 4% { opacity: 1; } 45% { transform: translate(var(--w, 1600px), var(--y)); opacity: 1; } 46%, 100% { transform: translate(var(--w, 1600px), var(--y)); opacity: 0; } }
.bn-hero-fx .blob { position: absolute; left: 50%; top: 260px; width: 520px; height: 360px; margin-left: -260px; border-radius: 50%; filter: blur(70px); opacity: .5;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bn-sheets) 26%, transparent), transparent); animation: bn-drift-c 26s ease-in-out infinite alternate; }
.bn-ambient::before, .bn-ambient::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.bn-ambient::before { width: 720px; height: 620px; left: -6%; top: -260px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bn-accent) 22%, transparent), transparent); animation: bn-drift-a 24s ease-in-out infinite alternate; }
.bn-ambient::after { width: 640px; height: 560px; right: -8%; top: -180px; background: radial-gradient(closest-side, color-mix(in srgb, var(--bn-accent-2) 18%, transparent), transparent); animation: bn-drift-b 30s ease-in-out infinite alternate; }
@keyframes bn-drift-a { to { transform: translate(18vw, 120px) scale(1.15); } }
@keyframes bn-drift-b { to { transform: translate(-16vw, 160px) scale(.9); } }
@keyframes bn-drift-c { 0% { transform: translate(-30%, 0) scale(1); } 100% { transform: translate(30%, -60px) scale(1.2); } }

/* 8. Film grain over everything, faint enough to feel rather than see. */
body.bn::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bn .grain, .bn .aurora { display: none; }

/* 9. The hero showcase: Writer, Sheets, Slides and PDF cross-fade in one
   flat window, with tabs in its title bar showing progress. */
.bn-show .bn-window-bar { gap: 7px; }
.bn-show-tabs { margin-left: auto; display: flex; gap: 4px; }
.bn-show-tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 0; border-radius: 8px; background: none; color: var(--bn-faint); font: 600 12.5px var(--bn-font); cursor: pointer; transition: color .25s, background-color .25s; }
.bn-show-tabs button i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); opacity: .55; transition: opacity .25s; }
.bn-show-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--c); }
.bn-show-tabs button:hover { color: var(--bn-ink); }
.bn-show-tabs button.on { color: var(--bn-ink); background: var(--bn-surface); }
.bn-show-tabs button.on i { opacity: 1; }
.bn-show-stage { position: relative; aspect-ratio: 1600 / 889; background: #f3f4f7; }
.bn-show-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .9s var(--bn-ease); }
.bn-show-stage img.on { opacity: 1; }
@media (max-width: 680px) {
  .bn-show .bn-window-bar > span { display: none; }
  .bn-show-tabs { margin-left: 0; }
  .bn-show-tabs button { padding: 5px 8px; font-size: 12px; }
}

/* 10. Headlines rise in word by word. */
.bn-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.bn-w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--bn-ease); transition-delay: calc(var(--i) * 55ms); }
.bn-words-in .bn-w > span { transform: none; }

/* 11. Pinned products: on large screens the three rows share one stage and
   swap as you scroll. Smaller screens keep them stacked. */
.bn-pin { position: relative; padding: 40px 0 0; }
.bn-pin-rail { display: none; }
@media (min-width: 1081px) and (min-height: 720px) {
  .bn-pin { height: 280vh; padding: 0; }
  .bn-pin-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 58px; overflow: hidden; }
  .bn-pin-sticky > .bn-wrap { display: flex; flex-direction: column; gap: 22px; }
  .bn-pin-rail { display: flex; justify-content: center; gap: 8px; }
  .bn-pin-rail button { position: relative; overflow: hidden; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 99px; border: 1px solid var(--bn-line); background: color-mix(in srgb, var(--bn-surface) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--bn-faint); font: 600 14px var(--bn-font); cursor: pointer; transition: color .3s, border-color .3s; }
  .bn-pin-rail button span { position: relative; z-index: 1; }
  .bn-pin-rail button i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--c); }
  .bn-pin-rail button.on { color: var(--bn-ink); border-color: var(--bn-line-2); }
  .bn-pin .bn-apps { display: grid; }
  .bn-pin .bn-app { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s var(--bn-ease), visibility 0s linear .6s; }
  .bn-pin .bn-app.on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .bn-pin .bn-app > * { transition: transform .9s var(--bn-ease), opacity .9s var(--bn-ease); }
  .bn-pin .bn-app:not(.on) > * { transform: translateY(30px); opacity: 0; }
}

/* 12. A light sheen passes over the main buttons every few seconds. */
.bn-btn-lg.bn-btn-primary, .bn-actions .bn-btn-primary, .bn-plan.hot .bn-btn-primary { overflow: hidden; isolation: isolate; }
.bn-btn-lg.bn-btn-primary::after, .bn-actions .bn-btn-primary::after, .bn-plan.hot .bn-btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.38) 50%, transparent 80%); transform: translateX(-160%) skewX(-12deg);
  animation: bn-sheen 5.5s var(--bn-ease) infinite; }
.bn-actions .bn-btn-primary::after { animation-delay: 1.4s; }
@keyframes bn-sheen { 0%, 62% { transform: translateX(-160%) skewX(-12deg); } 100% { transform: translateX(260%) skewX(-12deg); } }

/* 13. Numbers that count up when they arrive. */
.bn-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: -16px 0 40px; border: 1px solid var(--bn-line); border-radius: var(--bn-radius); background: var(--bn-surface); overflow: hidden; }
.bn-stats > div { padding: 26px 26px 24px; border-left: 1px solid var(--bn-line); }
.bn-stats > div:first-child { border-left: 0; }
.bn-stats b { display: flex; align-items: baseline; gap: 2px; font-family: var(--bn-display); font-size: clamp(34px, 3.6vw, 46px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--bn-ink), color-mix(in srgb, var(--bn-ink) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn-stats b small { font-size: .45em; letter-spacing: 0; margin-left: 4px; }
.bn-stats > div > span { display: block; margin-top: 10px; color: var(--bn-dim); font-size: 14.5px; }

/* 14. The file types, drifting past under the hero. */
.bn-marquee { position: relative; z-index: 1; margin-top: 54px; }
.bn-marquee p { text-align: center; font-size: 13px; font-weight: 600; color: var(--bn-faint); letter-spacing: .02em; }
.bn-marquee .track { display: flex; overflow: hidden; margin-top: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bn-marquee ul { display: flex; flex: none; gap: 12px; margin: 0; padding: 0 6px; list-style: none; animation: bn-marquee 55s linear infinite; }
.bn-marquee:hover ul { animation-play-state: paused; }
@keyframes bn-marquee { to { transform: translateX(-100%); } }
.bn-marquee li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 12px; border: 1px solid var(--bn-line); background: color-mix(in srgb, var(--bn-surface) 70%, transparent); white-space: nowrap; }
.bn-marquee li i { width: 18px; height: 22px; flex: none; border-radius: 3px; background: var(--c); clip-path: polygon(0 0, 66% 0, 100% 28%, 100% 100%, 0 100%); box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.18); }
.bn-marquee li b { font: 600 13.5px var(--bn-mono); color: var(--bn-ink); }
.bn-marquee li span { font-size: 13px; color: var(--bn-faint); }

/* 15. Command palette. */
.bn-cmdk { padding: 0; border: 0; background: transparent; width: min(640px, calc(100vw - 24px)); max-width: none; max-height: none; margin: 12vh auto auto; overflow: visible; color: var(--bn-ink); }
.bn-cmdk::backdrop { background: rgba(5, 6, 8, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bn-cmdk[open] { animation: bn-pop .28s var(--bn-ease); }
@keyframes bn-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.bn-cmdk-box { border-radius: 18px; border: 1px solid var(--bn-line-2); overflow: hidden; font-family: var(--bn-font); text-align: left;
  background: color-mix(in srgb, var(--bn-surface-solid) 88%, transparent); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 100px -30px rgba(0, 0, 0, 0.7); }
.bn-cmdk-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bn-line); }
.bn-cmdk-in svg { width: 19px; height: 19px; color: var(--bn-faint); flex: none; }
.bn-cmdk-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--bn-ink); font: 500 17px var(--bn-font); padding: 0; box-shadow: none; }
.bn-cmdk-in input::placeholder { color: var(--bn-faint); }
.bn .bn-cmdk-in input:focus, .bn .bn-cmdk-in input:focus-visible { outline: none; box-shadow: none; }
.bn-cmdk kbd { font: 500 11px var(--bn-mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--bn-line-2); color: var(--bn-dim); background: none; }
.bn-cmdk-list { max-height: min(420px, 58vh); overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.bn-cmdk-list .grp { padding: 10px 10px 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--bn-faint); }
.bn-cmdk-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 11px; color: var(--bn-dim); text-decoration: none; }
.bn-cmdk-list a .ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); color: var(--c, var(--bn-dim)); }
.bn-cmdk-list a .ic svg { width: 16px; height: 16px; }
.bn-cmdk-list a b { display: block; font-weight: 600; font-size: 14.5px; color: var(--bn-ink); }
.bn-cmdk-list a small { display: block; font-size: 12.5px; color: var(--bn-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-cmdk-list a > div { min-width: 0; flex: 1; }
.bn-cmdk-list a.sel { background: var(--bn-accent-soft); }
.bn-cmdk-list a.sel .ic { border-color: color-mix(in srgb, var(--bn-accent) 50%, transparent); color: var(--bn-accent); }
.bn-cmdk-list a.sel::after { content: "↵"; color: var(--bn-accent); font-size: 14px; }
.bn-cmdk-empty { padding: 30px 16px; text-align: center; color: var(--bn-faint); font-size: 14.5px; }
.bn-cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--bn-line); font-size: 12px; color: var(--bn-faint); }
.bn-cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* 16. The 404 page: a spreadsheet that cannot find the page either. */
.bn-404 { padding: 150px 0 40px; }
.bn-404-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.bn-404 h1 { font-size: clamp(38px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.045em; margin-top: 18px; }
.bn-404 .lead { margin-top: 20px; color: var(--bn-dim); font-size: 18px; max-width: 480px; }
.bn-404 .bn-cta-row { justify-content: flex-start; }
.bn-404-sheet { font-size: 13px; }
.bn-404-sheet .fx { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--bn-line); font-family: var(--bn-mono); font-size: 12.5px; color: var(--bn-dim); background: var(--bn-surface); overflow: hidden; white-space: nowrap; }
.bn-404-sheet .fx b { color: var(--bn-faint); font-weight: 500; padding-right: 12px; border-right: 1px solid var(--bn-line-2); }
.bn-404-sheet .fx .fn { color: var(--bn-sheets); }
.bn-404-sheet .fx .str { color: var(--bn-slides); overflow: hidden; text-overflow: ellipsis; }
.bn-404-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--bn-surface); }
.bn-404-sheet th, .bn-404-sheet td { border: 1px solid var(--bn-line); height: 34px; padding: 0 10px; text-align: left; white-space: nowrap; overflow: hidden; }
.bn-404-sheet th { background: var(--bn-surface-2); color: var(--bn-faint); font-weight: 500; font-size: 11.5px; text-align: center; }
.bn-404-sheet thead th:first-child { width: 40px; }
.bn-404-sheet td { color: var(--bn-dim); }
.bn-404-sheet td.err { position: relative; color: var(--bn-pdf); font: 600 14px var(--bn-mono); box-shadow: inset 0 0 0 2px var(--bn-pdf); background: color-mix(in srgb, var(--bn-pdf) 9%, transparent); }
.bn-404-sheet td.err::before { content: ""; position: absolute; top: 0; left: 0; border: 5px solid transparent; border-top-color: var(--bn-pdf); border-left-color: var(--bn-pdf); }
.bn-404-tip { position: absolute; left: 30%; top: 214px; z-index: 2; max-width: 62%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--bn-ink); background: color-mix(in srgb, var(--bn-surface-solid) 82%, transparent); border: 1px solid var(--bn-line-2); box-shadow: var(--bn-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bn-404-tip b { color: var(--bn-pdf); font-family: var(--bn-mono); }

/* Light mode for the layer above. */
:root:not([data-theme="dark"]) .bn-nav.scrolled { background: rgba(247, 247, 249, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 30px -20px rgba(13, 15, 20, 0.3); }
:root:not([data-theme="dark"]) .bn-nav::after { background: linear-gradient(90deg, transparent, rgba(13, 15, 20, 0.08) 25%, color-mix(in srgb, var(--bn-accent) 50%, transparent) 50%, rgba(13, 15, 20, 0.08) 75%, transparent); }
:root:not([data-theme="dark"]) .bn-hero-fx { --line: rgba(13, 15, 20, 0.06); --lit: color-mix(in srgb, var(--bn-accent) 45%, transparent); }
:root:not([data-theme="dark"]) body.bn::after { opacity: .03; filter: invert(1); }
:root:not([data-theme="dark"]) .bn-ambient::before, :root:not([data-theme="dark"]) .bn-ambient::after { opacity: .55; }
:root:not([data-theme="dark"]) .bn-cmdk::backdrop { background: rgba(13, 15, 20, 0.25); }

@media (max-width: 1080px) {
  .bn-stats { grid-template-columns: 1fr 1fr; }
  .bn-stats > div:nth-child(3) { border-left: 0; }
  .bn-stats > div:nth-child(n+3) { border-top: 1px solid var(--bn-line); }
  .bn-404-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .bn-search { width: 36px; padding: 0; justify-content: center; }
  .bn-search span, .bn-search kbd { display: none; }
}
@media (max-width: 680px) {
  .bn-hero-fx { --g: 44px; }
  .bn-marquee { margin-top: 36px; }
  .bn-stats b { font-size: 34px; }
  .bn-stats > div { padding: 20px 18px; }
  .bn-cmdk { margin-top: 10px; }
  .bn-404 { padding-top: 116px; }
  .bn-404-tip { left: 16%; max-width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-ambient::before, .bn-ambient::after, .bn-hero-fx .blob, .bn-marquee ul, .bn-plan.hot::before, .bn-btn-primary::after { animation: none !important; }
  .bn-beam { display: none; }
  .bn-w > span { transform: none !important; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .bn-bento { grid-template-columns: 1fr 1fr; }
  .bn-tile, .bn-tile.half { grid-column: span 1; }
  .bn-tile.wide { grid-column: 1 / -1; }
  .bn-tile.media:not(.wide):not(.half) { height: auto; aspect-ratio: 4 / 5; }
  .bn-tile.half { aspect-ratio: 16 / 10; }
  .bn-story { grid-template-columns: 1fr 1fr; }
  .bn-app, .bn-phero-grid, .bn-split, .bn-vision { grid-template-columns: 1fr; gap: 36px; }
  .bn-app.flip > :first-child, .bn-split.flip > :first-child { order: 0; }
  .bn-demo, .bn-demo.left { grid-template-columns: 1fr; gap: 40px; }
  .bn-demo.left .bn-demo-device { order: 0; }
  .bn-pricing { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .bn-grid3 { grid-template-columns: 1fr 1fr; }
  .bn-grid4, .bn-mini-grid { grid-template-columns: 1fr 1fr; }
  .bn-howto { grid-template-columns: 1fr; }
  .bn-foot-grid { grid-template-columns: 1fr 1fr; }
  .bn-foot .about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bn-links, .bn-actions .bn-hide-m { display: none; }
  .bn-actions .bn-burger { display: grid; }
  .bn-sheet { display: block; position: fixed; inset: 62px 12px auto; z-index: 99; padding: 12px; border-radius: 18px; border: 1px solid var(--bn-line-2);
    background: var(--bn-surface-solid); box-shadow: var(--bn-shadow-lg); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .3s var(--bn-ease); max-height: calc(100vh - 80px); overflow: auto; }
  .bn-sheet.open { opacity: 1; transform: none; pointer-events: auto; }
  .bn-sheet a { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 11px; font-weight: 500; }
  .bn-sheet a:hover { background: var(--bn-surface-2); }
  .bn-sheet img { width: 30px; height: 30px; border-radius: 8px; }
  .bn-sheet hr { border: 0; border-top: 1px solid var(--bn-line); margin: 8px 0; }
  .bn-sheet .bn-btn { width: 100%; margin-top: 8px; }
}
@media (max-width: 680px) {
  .bn-section { padding: 84px 0; }
  .bn-hero { padding-top: 116px; }
  .bn-hero-stage { margin-top: 44px; padding-bottom: 40px; }
  .bn-hero-stage .bn-phone { width: 30%; right: -3%; }
  .bn-story, .bn-grid3, .bn-grid4, .bn-mini-grid { grid-template-columns: 1fr; }
  .bn-app { padding: 26px; }
  .bn-phero { padding-top: 116px; }
  .bn-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bn-final { padding: 60px 20px; border-radius: 22px; }
  .bn-nav-inner { gap: 12px; }
  .bn-actions { gap: 6px; }
  .bn .nav-account { padding: 4px; gap: 0; }
  .bn .nav-account > span:not(.nav-avatar-fb), .bn .nav-account .chevron { display: none; }
  .bn-tabs { display: flex; overflow-x: auto; max-width: 100%; }
  .bn-ram { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .bn-ram .meter { padding: 16px; }
  .bn-releases { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 22px; padding: 0 24px 4px; scrollbar-width: none; }
  .bn-releases::-webkit-scrollbar { display: none; }
  .bn-releases > * { flex: none; }
  .bn-bento { grid-template-columns: 1fr; gap: 12px; }
  .bn-tile, .bn-tile.half, .bn-tile.wide { grid-column: auto; }
  .bn-tile.half, .bn-tile.wide { aspect-ratio: 16 / 9; }
  .bn-tile.media:not(.wide):not(.half):not(.tall) { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bn *, .bn *::before, .bn *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .bn-js [data-reveal].pre { opacity: 1; transform: none; }
}

/* ── Account menu, profile editor, referrals and toasts ─────────────────
   Rendered by js/session.js and js/referral.js, which the inner pages style
   through css/style.css. The rules are carried here verbatim so pages built
   only on this sheet get the same menu, and the variables they use are
   mapped onto the brand tokens for those pages. */
body.bn:not(.bn-inner) {
  --line: var(--bn-line-2); --line-2: var(--bn-line-2);
  --surface: var(--bn-surface-solid); --surface-2: var(--bn-surface-2); --surface-3: var(--bn-surface-2);
  --ink: var(--bn-ink); --text: var(--bn-dim); --text-dim: var(--bn-dim); --text-faint: var(--bn-faint);
  --accent: var(--bn-accent); --accent-dark: var(--bn-accent); --accent-wash: var(--bn-surface-2);
  --grad-brand: var(--bn-grad); --danger: #f05265; --teal: var(--bn-green); --bg: var(--bn-bg);
  --radius: 18px; --radius-sm: 12px; --radius-lg: 22px;
  --sh-1: none; --sh-2: var(--bn-shadow); --sh-3: var(--bn-shadow);
  --font-mono: var(--bn-mono); --font-body: var(--bn-font);
}
body.bn:not(.bn-inner) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--bn-line-2); background: var(--bn-surface-2); color: var(--bn-ink); font: 600 14px var(--bn-font); cursor: pointer; }
body.bn:not(.bn-inner) .btn-primary { border-color: transparent; background: var(--bn-grad); color: #fff; }
body.bn:not(.bn-inner) .btn-sm { padding: 8px 13px; font-size: 13px; }
body.bn:not(.bn-inner) .btn-block { width: 100%; }
.bn .nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-account-wrap { position: relative; flex: none; }
.nav-account {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 13px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 640;
  box-shadow: var(--sh-1);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.nav-account:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: var(--sh-2); }
.nav-account img, .nav-avatar-fb, .avatar, .avatar-img {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; object-fit: cover;
}
.nav-avatar-fb, .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #5b34e0, #e0357a);
  color: #fff; font-size: 12px; font-weight: 700;
}
.nav-account .chevron { display: inline-flex; width: 13px; height: 13px; color: var(--text-faint); transition: transform .2s; }
.nav-account .chevron svg { width: 100%; height: 100%; }
.nav-account-wrap.open .chevron { transform: rotate(180deg); }
.caret { display: inline-flex; width: 13px; height: 13px; color: var(--text-faint); }

.acct-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 150;
  width: 268px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .18s, transform .2s cubic-bezier(.22,1,.36,1), visibility .18s;
}
.nav-account-wrap.open .acct-pop { opacity: 1; visibility: visible; transform: none; }
.acct-pop-info { display: grid; gap: 2px; padding: 4px 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.acct-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.acct-pop-row span { display: flex; align-items: center; gap: 8px; color: var(--text-faint); white-space: nowrap; }
.acct-pop-row span svg { width: 15px; height: 15px; flex: none; }
.acct-pop-row b { color: var(--ink); font-weight: 640; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.acct-pop-row.plan-premium b { color: var(--accent); }
.acct-pop-row.plan-free b { color: var(--text-faint); }

.acct-pop-btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 11px;
  border: 0; border-radius: 11px;
  background: none; color: var(--text);
  font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.acct-pop-btn + .acct-pop-btn { margin-top: 2px; }
.acct-pop-btn svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.acct-pop-btn:hover { background: var(--surface-3); color: var(--ink); }
.acct-pop-btn.primary { margin-bottom: 4px; background: var(--grad-brand); color: #fff; }
.acct-pop-btn.primary svg { color: #fff; }
.acct-pop-btn.primary:hover { filter: brightness(1.07); color: #fff; }
.acct-pop-btn.signout {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--line); border-radius: 0 0 11px 11px;
  color: var(--text-faint);
}
.acct-pop-btn.signout:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.acct-pop-btn.signout:hover svg { color: var(--danger); }

.role-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-dark);
  font-size: 11px; font-weight: 700;
}
/* The class is on the <svg> itself, so it has to be sized here. The rule
   that was meant to do it read .verified-badge svg, which matches a child
   that does not exist, so the tick had no dimensions at all and stretched
   to whatever space its container offered. On a post byline that was a
   quarter of the article header. */
.verified-badge {
  width: 15px; height: 15px; flex: none; display: block;
}

/* ── modal ─────────────────────────────────────────────────── */

.no-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(12, 10, 18, .5);
  backdrop-filter: blur(6px);
  animation: no-fade .2s ease;
}
@keyframes no-fade { from { opacity: 0; } to { opacity: 1; } }
.no-modal-card {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  animation: no-rise .26s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes no-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.no-modal-card h3 { margin-bottom: 8px; font-size: 20px; font-weight: 730; letter-spacing: -.035em; }
.no-modal-card > p { margin-bottom: 20px; color: var(--text); font-size: 14px; }
.no-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.no-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── referral ──────────────────────────────────────────────── */

.ref-card, .ref-card-sm {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.ref-card-sm { padding: 18px 18px; }
.ref-gift { color: var(--accent); }
.ref-body { color: var(--text); font-size: 14px; line-height: 1.62; }
.ref-linkrow { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.ref-link {
  flex: 1; min-width: 170px; min-height: 44px; padding: 0 14px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
  font: 600 13px var(--font-mono);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ref-copy { flex: none; }
.ref-count { color: var(--ink); font-size: 26px; font-weight: 760; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ref-share { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ref-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-faint);
  transition: background .16s, color .16s;
}
.ref-close:hover { background: var(--surface-3); color: var(--ink); }

/* Confirmation state: solid green replaces the brand gradient. */
.ref-card.done, .ref-card-sm.done {
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
}
.ref-card.done .ref-gift { color: var(--teal); }

/* ── toast ─────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 700;
  transform: translate(-50%, 20px);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 570;
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity .26s, transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── reveal ────────────────────────────────────────────────── */
.no-modal-card form { display: flex; flex-direction: column; gap: 14px; }
/* Block, not flex column. A label here is a text node plus sometimes an
   inline span, and flex turns each of those into a row of its own, which
   split "Phone (optional)" across two lines. Block lets the caption flow
   as one sentence and the input sit under it as the block element it is.
   session.js sets one of these to display:flex to reveal it, which still
   shows it, so that path is unaffected. */
.no-modal-card label {
  display: block;
  color: var(--text-dim); font-size: 12.5px; font-weight: 640;
}
.no-modal-card label > input,
.no-modal-card label > select { margin-top: 6px; }
.no-modal-card .no-modal-sub { margin: 0 0 20px; color: var(--text-faint); font-size: 13.5px; line-height: 1.6; }
.no-field-row label { flex: 1; min-width: 0; }
.no-modal-card input, .no-modal-card select {
  width: 100%; min-height: 44px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
  font: 500 14px var(--font-body);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.no-modal-card select {
  /* Native selects ignore most of the above on their arrow, so the arrow is
     drawn here and the platform one removed. */
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918da4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}


/* Pinwheel's mark is white on a dark tile in menus, in either theme. */
.bn-pw-tile { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #111317; display: grid; place-items: center; }
.bn-pw-tile img { width: 26px !important; height: 26px !important; border-radius: 0 !important; }
.bn-sheet .bn-pw-tile { width: 30px; height: 30px; border-radius: 8px; }
.bn-sheet .bn-pw-tile img { width: 20px !important; height: 20px !important; }