:root { --nb-paper:#fbfaf7; --nb-cream:#fbfaf7; }
body, .site-header { background:var(--nb-paper); }
.nb-explain { padding:72px 0; color:#182238; }
.nb-explain h2 { font-size:clamp(1.8rem,3vw,2.75rem); line-height:1.15; letter-spacing:-.035em; margin:12px 0 20px; max-width:850px; }
.nb-explain > p,.nb-explain .container > p { max-width:780px; line-height:1.7; }
.nb-eyebrow { color:#a53c1c; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.nb-demo:nth-of-type(even) { background:#f1eee7; }
.nb-controls { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.nb-controls button,.nb-secondary,.nb-ad-steps button { border:1px solid #bcb7ac; background:#fff; color:#182238; border-radius:8px; padding:12px 16px; font:inherit; cursor:pointer; }
.nb-controls [aria-pressed=true],.nb-ad-steps [aria-pressed=true] { background:#182238; color:white; border-color:#182238; }
.nb-explain :focus-visible { outline:3px solid #b64722; outline-offset:4px; }
.nb-tv-grid,.nb-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:28px 0; }
.nb-tv { margin:0; min-width:0; }
.nb-tv-screen { background:#17644c; color:white; padding:26px 20px; aspect-ratio:16/10; border:7px solid #22252a; border-radius:12px; display:flex; flex-direction:column; justify-content:center; }
.nb-tv-screen h3 { color:inherit; font-size:clamp(1.2rem,2vw,1.8rem); line-height:1.2; margin:14px 0; }
.nb-tv-screen p { color:inherit; font-size:.9rem; }
.nb-tv-screen > span { font-size:.75rem; }
.nb-tv figcaption { font-size:.8rem; margin-top:12px; text-align:center; }
.nb-demo-result { font-weight:700; }
.nb-small { font-size:.84rem; line-height:1.6; color:#555f69; }
.nb-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:48px; align-items:start; margin-top:32px; }
.nb-form { display:grid; gap:16px; max-width:520px; }
.nb-form label { display:grid; gap:7px; font-size:.9rem; font-weight:600; }
.nb-form input,.nb-form select { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #aaa99f; border-radius:6px; background:white; color:#182238; font:inherit; }
.nb-form input[type=color] { padding:4px; }
.nb-form .nb-check { display:flex; align-items:center; gap:10px; }
.nb-form input[type=checkbox] { width:20px; min-height:20px; flex-shrink:0; }
.nb-form fieldset { border:1px solid #d7d1c5; border-radius:8px; padding:16px; display:grid; gap:16px; min-width:0; }
.nb-form legend { font-weight:600; padding:0 6px; }
.nb-explain [hidden] { display:none!important; }
.nb-tv-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; }
.nb-menu-screen { background:#fcf5e5; color:#173e32; aspect-ratio:auto; min-height:210px; }
.nb-menu-line { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid currentColor; padding:12px 0; overflow-wrap:anywhere; }
.nb-menu-line strong { white-space:nowrap; }
.nb-ad-steps { display:grid; grid-template-columns:repeat(5,1fr); list-style:none; padding:0; gap:8px; margin:30px 0; }
.nb-ad-steps button { width:100%; height:100%; text-align:left; }
.nb-ad-steps span { display:block; font-weight:700; margin-bottom:12px; }
.nb-ad-story,.nb-cost-results { padding:32px; border:1px solid #ded9ce; background:white; border-radius:12px; }
.nb-ad-story { min-height:150px; }
.nb-cost-results dl { margin:0; }
.nb-cost-results dl > div { padding:18px 0; border-bottom:1px solid #e9e5dc; }
.nb-cost-results dt { font-size:.88rem; color:#555f69; }
.nb-cost-results dd { margin:8px 0 0; font-weight:700; font-size:1.7rem; }
.nb-cost-results dd.nb-cost-detail { font-weight:400; font-size:inherit; margin:0; }
.nb-cost-results small { display:block; margin-top:8px; }
.nb-three article { padding:24px 0; border-top:1px solid #cec9bf; }
@media(max-width:760px) { .nb-explain { padding:48px 0; } .nb-split,.nb-tv-grid,.nb-three { grid-template-columns:1fr; gap:24px; } .nb-tv-screen { aspect-ratio:auto; min-height:190px; } .nb-ad-steps { grid-template-columns:1fr; } .nb-ad-steps button { display:flex; gap:12px; } .nb-ad-steps span { margin:0; } .nb-cost-results { padding:20px; } }

@media(max-width:760px) { .nb-schedule-example { grid-template-columns:minmax(0,1fr)!important; } .nb-schedule-example div[style*="justify-content:space-between"] { flex-wrap:wrap; gap:8px; } }

/* A Channel can carry its own content and visual identity. */
[data-product-demo="channels"] [data-channel-style="welcome"] {
  background:#f5ead8; color:#433628; text-align:center;
}
[data-product-demo="channels"] [data-channel-style="welcome"] h3 {
  font-family:Georgia,serif; font-weight:400; font-style:italic;
}
[data-product-demo="channels"] [data-channel-style="welcome"] > span {
  text-transform:uppercase; letter-spacing:.14em; font-size:.65rem;
}
[data-product-demo="channels"] [data-channel-style="welcome"] p {
  border-top:1px solid #b8a88e; padding-top:14px;
}
[data-product-demo="channels"] [data-channel-style="activities"] {
  background:#202d58; color:#fff; align-items:flex-start;
}
[data-product-demo="channels"] [data-channel-style="activities"] > span {
  background:#f5cf6e; color:#202d58; padding:5px 9px; font-weight:700;
}
[data-product-demo="channels"] [data-channel-style="activities"] h3 {
  text-transform:uppercase; font-weight:800; letter-spacing:-.025em;
}
[data-product-demo="channels"] [data-channel-style="activities"] p {
  border-left:3px solid #f5cf6e; padding-left:12px;
}

/* Deck-inspired rotating cards, synchronised with their TV preview. */
.nb-playlist-demo { width:100%; color:#182238; font-style:normal; }
.nb-playlist-heading { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.nb-playlist-heading span { font-size:.78rem; color:#555f69; }
.nb-playlist-queue { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.nb-sequence-card { padding:14px; border-radius:7px; display:flex; flex-direction:column; gap:6px; border:2px solid transparent; }
.nb-sequence-number { font-size:2rem; line-height:1; font-weight:700; }
.nb-sequence-card strong { font-size:.85rem; }
.nb-sequence-card small { font-size:.7rem; }
.nb-sequence-card--welcome { background:#efe5d1; color:#0e1a3d; }
.nb-sequence-card--timetable { background:#253e38; color:#fff; }
.nb-sequence-card--notice { background:#b44216; color:#fff; }
.nb-sequence-card[data-playing=true] { border-color:#0e1a3d; box-shadow:0 0 0 3px #fff; }
.nb-playlist-connection { display:flex; align-items:center; gap:10px; justify-content:center; height:30px; color:#a53c1c; }
.nb-playlist-connection span { width:32px; height:1px; background:#c7b9a6; }
.nb-playlist-tv { position:relative; border:8px solid #22252a; border-radius:12px; overflow:hidden; background:#efe5d1; }
.nb-playlist-board { aspect-ratio:16/10; padding:clamp(18px,2.5vw,32px); display:flex; flex-direction:column; justify-content:center; }
.nb-playlist-board[hidden] { display:none; }
.nb-playlist-board > span { font-size:.65rem; font-weight:700; letter-spacing:.12em; }
.nb-playlist-demo .nb-playlist-board h3 { color:inherit; font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.12; margin:14px 0; }
.nb-playlist-demo .nb-playlist-board p { color:inherit; font-size:.8rem; margin:0; }
.nb-playlist-board--welcome { background:#efe5d1; color:#0e1a3d; text-align:center; }
.nb-playlist-board--welcome h3 { font-family:Georgia,serif; font-style:italic; font-weight:400; }
.nb-playlist-board--timetable { background:#253e38; color:#fff; }
.nb-playlist-board--timetable p { display:flex; gap:15px; padding:6px 0; border-bottom:1px solid #81948d; }
.nb-playlist-board time { font-variant-numeric:tabular-nums; font-weight:700; }
.nb-playlist-board--notice { background:#b44216; color:#fff; }
.nb-playlist-board--notice h3 { text-transform:uppercase; font-weight:800; }
.nb-playlist-progress { position:absolute; bottom:0; left:0; right:0; height:4px; background:#ffffff30; }
.nb-playlist-progress span { display:block; height:100%; background:#f5cf6e; transform:scaleX(0); transform-origin:left; }
.nb-playlist-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0 12px; }
.nb-playlist-controls button { min-height:44px; font-size:.8rem; }
.nb-playlist-controls > span { font-size:.75rem; color:#555f69; }
.nb-playlist-demo .nb-small { margin:0; }
@media(max-width:480px) { .nb-playlist-queue { gap:8px; } .nb-sequence-card { padding:10px; } .nb-playlist-board { min-height:235px; aspect-ratio:auto; } }

/* Board settings swatches, adapted from frontend LookSwatch.vue. */

.look-swatch {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.look-swatch--small {
  border-radius: 6px;
  padding: 10px;
  gap: 8px;
}
.look-swatch--small .look-swatch-bar { width: 28px; height: 5px; }
.look-swatch--small .look-swatch-title { font-size: 11px; }
.look-swatch--small .look-swatch-lines { gap: 4px; }
.look-swatch--small .look-swatch-lines span { height: 3px; }

.look-swatch--large {
  padding: 24px;
  gap: 16px;
}
.look-swatch--large .look-swatch-bar { width: 64px; height: 10px; }
.look-swatch--large .look-swatch-title { font-size: 22px; }
.look-swatch--large .look-swatch-lines { gap: 8px; }
.look-swatch--large .look-swatch-lines span { height: 6px; }

.look-swatch-bar {
  border-radius: 999px;
}
.look-swatch-title {
  font-weight: 700;
  line-height: 1.1;
}
.look-swatch-lines {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.look-swatch-lines span {
  display: block;
  border-radius: 999px;
  width: 100%;
}
.look-swatch-lines span:last-child {
  width: 60%;
}

/* Signal — pure black, high-contrast */
.look-signal {
  background: #000;
}
.look-signal .look-swatch-bar { background: #ef4444; }
.look-signal .look-swatch-title { color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.look-signal .look-swatch-lines span { background: rgba(255, 255, 255, 0.35); }

/* Hairline — fine rules on a light ground */
.look-hairline {
  background: #fdfdfc;
  border: 1px solid #d8d5cf;
}
.look-hairline .look-swatch-bar { background: transparent; border-bottom: 1px solid #1a1a1a; border-radius: 0; width: 40%; }
.look-hairline .look-swatch-title { color: #1a1a1a; font-weight: 400; }
.look-hairline .look-swatch-lines span { background: #c9c6bf; border-radius: 0; }

/* Plate — bold flat colour blocks */
.look-plate {
  background: #ffcc00;
}
.look-plate .look-swatch-bar { background: #111; border-radius: 0; }
.look-plate .look-swatch-title { color: #111; text-transform: uppercase; }
.look-plate .look-swatch-lines span { background: #111; border-radius: 0; opacity: 0.7; }

/* Aurora — soft gradient glow on dark */
.look-aurora {
  background: radial-gradient(circle at 30% 20%, #6d28d9, #0f172a 70%);
}
.look-aurora .look-swatch-bar { background: linear-gradient(90deg, #a855f7, #38bdf8); }
.look-aurora .look-swatch-title { color: #f5f3ff; }
.look-aurora .look-swatch-lines span { background: rgba(232, 224, 255, 0.35); }

/* Editorial — serif, generous whitespace */
.look-editorial {
  background: #fff;
}
.look-editorial .look-swatch-bar { background: transparent; }
.look-editorial .look-swatch-title { color: #111; font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.look-editorial .look-swatch-lines span { background: #d4d4d4; }

/* Broadsheet — dense multi-column, newspaper */
.look-broadsheet {
  background: #f3f1ea;
  border: 1px solid #111;
}
.look-broadsheet .look-swatch-bar { background: #111; border-radius: 0; height: 14%; }
.look-broadsheet .look-swatch-title { color: #111; font-family: Georgia, serif; font-weight: 900; }
.look-broadsheet .look-swatch-lines { flex-direction: row; }
.look-broadsheet .look-swatch-lines span { background: #444; border-radius: 0; flex: 1; width: auto !important; }

/* Soft — rounded, pastel */
.look-soft {
  background: #fdeef4;
}
.look-soft .look-swatch-bar { background: #f472b6; border-radius: 999px; }
.look-soft .look-swatch-title { color: #831843; }
.look-soft .look-swatch-lines span { background: #fbcfe8; border-radius: 999px; }

/* Ledger — tabular, data-dense */
.look-ledger {
  background: #fff;
  border: 1px solid #94a3b8;
}
.look-ledger .look-swatch-bar { background: #0f172a; border-radius: 0; width: 100%; }
.look-ledger .look-swatch-title { color: #0f172a; font-family: 'Courier New', monospace; }
.look-ledger .look-swatch-lines span { background: #cbd5e1; border-radius: 0; border-bottom: 1px solid #94a3b8; }

/* Poster — oversized type, bold colour */
.look-poster {
  background: #e11d48;
}
.look-poster .look-swatch-bar { background: transparent; }
.look-poster .look-swatch-title { color: #fff; font-size: 1.6em; font-weight: 900; text-transform: uppercase; }
.look-poster .look-swatch-lines span { background: rgba(255, 255, 255, 0.5); }

/* Duotone — two-colour tinted imagery */
.look-duotone {
  background: linear-gradient(135deg, #0891b2 50%, #f59e0b 50%);
}
.look-duotone .look-swatch-bar { background: #fff; }
.look-duotone .look-swatch-title { color: #fff; }
.look-duotone .look-swatch-lines span { background: rgba(255, 255, 255, 0.55); }

.nb-style-picker { margin-top:30px; min-width:0; }
.nb-style-choices { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 14px; position:relative; }
.nb-style-choice { flex:0 0 150px; scroll-snap-align:center; border:2px solid #d4cfc5; border-radius:10px; padding:8px; background:#fff; color:#182238; text-align:left; font:inherit; cursor:pointer; }
.nb-style-choice:hover { border-color:#a53c1c; }
.nb-style-choice[aria-checked=true] { border-color:#a53c1c; box-shadow:0 0 0 1px #a53c1c; }
.nb-style-choice-name { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:.85rem; margin-top:9px; }
.nb-style-choice small { font-size:.72rem; color:#555f69; }
.nb-style-selected { visibility:hidden; color:#a53c1c; }
.nb-style-choice[aria-checked=true] .nb-style-selected { visibility:visible; }
.nb-style-render { margin:24px auto 0; max-width:1000px; }
.nb-style-render img { display:block; width:100%; height:auto; border:7px solid #22252a; border-radius:12px; background:#182238; }
.nb-style-render figcaption { display:grid; gap:5px; margin-top:16px; font-size:.9rem; }
.nb-style-render figcaption strong { font-size:1.15rem; }
.nb-style-render figcaption small { color:#555f69; }