/* Shared base for every demo page: reset, the Zapizen switcher bar, the demo notice and
   the scroll-reveal helper. The bar and notice are Zapizen's own frame around each demo,
   so they keep Zapizen navy/lime in both themes. Each demo sets its own tokens in <demo>.css. */
:root {
  --zd-navy: #0B1D38;
  --zd-navy-2: #16305A;
  --zd-line: rgba(255, 255, 255, .14);
  --zd-text: #F4F6F9;
  --zd-muted: #A9B6CA;
  --zd-lime: #7AC31C;
  --zd-lime-hi: #8DD62C;
  --zd-ink: #0E2240;
  --zd-font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --zd-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --zd-bar-h: 58px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--zd-bar-h) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--zd-navy); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* Smooth colour change when the visitor flips light/dark */
.zd-theme-anim, .zd-theme-anim *, .zd-theme-anim *::before, .zd-theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important;
}

/* ---------- Switcher bar ---------- */
.zd-bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--zd-navy); color: var(--zd-text);
  font-family: var(--zd-font); font-size: 14px; line-height: 1.2;
  border-bottom: 1px solid var(--zd-line);
}
.zd-bar-in {
  display: flex; align-items: center; gap: 14px; height: var(--zd-bar-h);
  max-width: 1360px; margin-inline: auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.zd-home { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; border-radius: 6px; }
.zd-home img { height: 30px; width: auto; }
.zd-home-label {
  font-family: var(--zd-font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zd-muted); padding-left: 10px; border-left: 1px solid var(--zd-line);
}
.zd-home[aria-current] .zd-home-label { color: var(--zd-lime-hi); }
.zd-tabs {
  display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: center;
  overflow-x: auto; scrollbar-width: none; padding-block: 6px;
}
.zd-tabs::-webkit-scrollbar { display: none; }
.zd-tabs a {
  display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center;
  flex: none; padding: 7px 14px; border-radius: 8px; text-decoration: none;
  color: var(--zd-muted); transition: background .2s, color .2s;
}
.zd-tabs a:hover { background: var(--zd-navy-2); color: var(--zd-text); }
.zd-tabs a[aria-current] { background: #fff; color: var(--zd-ink); }
.zd-dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.zd-tabs a[aria-current] .zd-dot { box-shadow: 0 0 0 2px rgba(14, 34, 64, .12); }
.zd-tab-label { font-weight: 700; white-space: nowrap; }
.zd-tab-name { font-size: 11.5px; opacity: .75; white-space: nowrap; }
.zd-cta {
  flex: none; text-decoration: none; font-weight: 700; color: var(--zd-ink);
  background: var(--zd-lime); padding: 9px 14px; border-radius: 8px; transition: background .2s;
}
.zd-cta:hover { background: var(--zd-lime-hi); }
.zd-cta-short { display: none; }
.zd-bar :focus-visible { outline: 2px solid var(--zd-lime-hi); outline-offset: 2px; }

@media (max-width: 1080px) { .zd-tab-name { display: none; } .zd-dot { grid-row: auto; } }
@media (max-width: 720px) {
  :root { --zd-bar-h: 54px; }
  .zd-bar-in { gap: 8px; }
  .zd-home img { height: 24px; }
  .zd-home-label { display: none; }
  .zd-tabs { justify-content: flex-start; mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); }
  .zd-tabs a { padding: 7px 10px; }
  .zd-cta { padding: 8px 10px; }
  .zd-cta-long { display: none; }
  .zd-cta-short { display: inline; }
}

/* ---------- Demo notice (bottom of every page) ---------- */
.zd-notice { background: var(--zd-navy); color: var(--zd-muted); font-family: var(--zd-font); font-size: 14px; line-height: 1.5; }
.zd-notice-in {
  max-width: 1200px; margin-inline: auto; padding-block: 18px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
}
.zd-notice p { max-width: 75ch; }
.zd-notice strong { color: var(--zd-text); }
.zd-notice-link { color: var(--zd-lime-hi); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Scroll reveal ----------
   Content is visible at rest. base.js only adds .rv-wait to blocks that start below the
   fold; they slide up the first time they enter the screen. */
[data-rv] { transition: transform .8s var(--ease-out), opacity .8s var(--ease-out); }
[data-rv].rv-wait { transform: translateY(36px); opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { transition: none; }
  [data-rv].rv-wait { transform: none; opacity: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}