/* Keelsum landing page. Hand-written CSS: tokens, layout, components. No framework. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("assets/fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/inter-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --ink: #0b1424;
  --ink-soft: #152238;
  --hivis: #c6e23b;
  --hivis-ink: #1d2a00;
  --signal: #f2994a;

  --bg: #f6f7f9;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --text: #111a2b;
  --muted: #55627a;
  --line: #d9dee7;
  --accent-text: #4a6300;
  --danger: #b42318;
  --ok: #3f6b00;
  --shadow: 0 1px 2px rgba(11, 20, 36, 0.06), 0 12px 32px -12px rgba(11, 20, 36, 0.18);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 14px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 120px);
  --header-h: 68px;

  /* the big sections (top of the page, self-hosting, book a demo, footer) follow the theme too */
  --s-bg: #eaf0f8;
  --s-bg-data: #e4ebf5;
  --s-bg-cta: #e4ebf5;
  --s-text: #111a2b;
  --s-lit: #6d7c20;  /* the lit strip of the Keelsum mark: hi-vis on dark, deep hi-vis on light */
  --s-head: #0b1424;
  --s-sub: #3d4a63;
  --s-micro: #55627a;
  --s-line: rgba(11, 20, 36, 0.14);
  --s-ghost: rgba(11, 20, 36, 0.3);
  --s-hover: rgba(11, 20, 36, 0.07);
  --s-glass: rgba(255, 255, 255, 0.96);
  --s-bar: #dbe2ed;
  --s-nav: rgba(234, 240, 248, 0.97);
  --s-em: #4a6300;
  --s-glow: rgba(198, 226, 59, 0.38);
  --s-grid: rgba(11, 20, 36, 0.055);
  --s-shadow: 0 30px 70px -28px rgba(11, 20, 36, 0.4);
  --s-foot-bg: #d9e1ed;
  --s-foot-text: #4a5872;
  --s-foot-head: #111a2b;
  --s-foot-mute: #6b7891;
  --dg-box: #ffffff;
  --dg-box-line: #b7c3d6;
  --dg-line: #b7c3d6;
  --dg-text: #111a2b;
  --dg-muted: #55627a;
  --dg-ok: #4a6300;
  --dg-warn: #b45c0c;
  --dg-danger: #b42318;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1424;
    --bg-alt: #0f1b30;
    --surface: #152238;
    --text: #eaf0f8;
    --muted: #9dabc2;
    --line: #24344f;
    --accent-text: #c6e23b;
    --danger: #ff8a7a;
    --ok: #c6e23b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
    --s-bg: #0b1424;
    --s-bg-data: #060c18;
    --s-bg-cta: #0b1424;
    --s-text: #eaf0f8;
    --s-lit: #c6e23b;  /* the lit strip of the Keelsum mark: hi-vis on dark, deep hi-vis on light */
    --s-head: #ffffff;
    --s-sub: #b7c3d7;
    --s-micro: #8fa0bb;
    --s-line: rgba(255, 255, 255, 0.12);
    --s-ghost: rgba(234, 240, 248, 0.3);
    --s-hover: rgba(255, 255, 255, 0.08);
    --s-glass: rgba(11, 20, 36, 0.94);
    --s-bar: #0e1a2e;
    --s-nav: rgba(11, 20, 36, 0.97);
    --s-em: #c6e23b;
    --s-glow: rgba(198, 226, 59, 0.14);
    --s-grid: rgba(255, 255, 255, 0.045);
    --s-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
    --s-foot-bg: #070e1a;
    --s-foot-text: #9dabc2;
    --s-foot-head: #eaf0f8;
    --s-foot-mute: #6f809c;
    --dg-box: #152238;
    --dg-box-line: #3a4d6d;
    --dg-line: #24344f;
    --dg-text: #eaf0f8;
    --dg-muted: #9dabc2;
    --dg-ok: #c6e23b;
    --dg-warn: #f2994a;
    --dg-danger: #ff6b5b;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1424;
  --bg-alt: #0f1b30;
  --surface: #152238;
  --text: #eaf0f8;
  --muted: #9dabc2;
  --line: #24344f;
  --accent-text: #c6e23b;
  --danger: #ff8a7a;
  --ok: #c6e23b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  --s-bg: #0b1424;
  --s-bg-data: #060c18;
  --s-bg-cta: #0b1424;
  --s-text: #eaf0f8;
  --s-lit: #c6e23b;  /* the lit strip of the Keelsum mark: hi-vis on dark, deep hi-vis on light */
  --s-head: #ffffff;
  --s-sub: #b7c3d7;
  --s-micro: #8fa0bb;
  --s-line: rgba(255, 255, 255, 0.12);
  --s-ghost: rgba(234, 240, 248, 0.3);
  --s-hover: rgba(255, 255, 255, 0.08);
  --s-glass: rgba(11, 20, 36, 0.94);
  --s-bar: #0e1a2e;
  --s-nav: rgba(11, 20, 36, 0.97);
  --s-em: #c6e23b;
  --s-glow: rgba(198, 226, 59, 0.14);
  --s-grid: rgba(255, 255, 255, 0.045);
  --s-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  --s-foot-bg: #070e1a;
  --s-foot-text: #9dabc2;
  --s-foot-head: #eaf0f8;
  --s-foot-mute: #6f809c;
  --dg-box: #152238;
  --dg-box-line: #3a4d6d;
  --dg-line: #24344f;
  --dg-text: #eaf0f8;
  --dg-muted: #9dabc2;
  --dg-ok: #c6e23b;
  --dg-warn: #f2994a;
  --dg-danger: #ff6b5b;
}

/* The big sections take their colours from the --s-* set, so they follow light and dark like everything else */
.on-ink { background: var(--s-bg); color: var(--s-text); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 6px; }
.on-ink :focus-visible, .hero :focus-visible { outline-color: var(--s-em); }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--hivis); color: var(--hivis-ink); padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 600; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }

/* A casual pen-drawn underline for the handful of spots that need extra emphasis (not every eyebrow or highlight, just the ones marked with it). Tinted with currentColor via a mask, so it follows whatever colour and theme the marked text already has. */
.hand-u { position: relative; display: inline-block; width: fit-content; }
.hand-u::after {
  content: "";
  position: absolute;
  left: -1%; right: -3%;
  bottom: -0.22em;
  height: 0.24em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5 C 20 5 30 18 48 11 C 66 4 78 17 97 10 C 116 3 128 17 147 10 C 166 3 179 16 197 9 C 204 6.5 209 8 215 7.5' fill='none' stroke='black' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5 C 20 5 30 18 48 11 C 66 4 78 17 97 10 C 116 3 128 17 147 10 C 166 3 179 16 197 9 C 204 6.5 209 8 215 7.5' fill='none' stroke='black' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62ch; }
.h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 700; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 780px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--hivis); color: var(--hivis-ink); box-shadow: 0 8px 24px -10px rgba(198, 226, 59, 0.7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(198, 226, 59, 0.85); }
.btn--ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--text); }
.hero .btn--ghost, .on-ink .btn--ghost { border-color: var(--s-ghost); color: var(--s-text); }
.hero .btn--ghost:hover, .on-ink .btn--ghost:hover { border-color: var(--s-text); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled { background: var(--s-nav); box-shadow: 0 1px 0 var(--s-line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--s-text); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
.brand__mark { width: 30px; height: 30px; }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav a { color: var(--s-sub); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; }
.nav a:hover { color: var(--s-head); background: var(--s-hover); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--s-ghost); background: transparent; color: var(--s-text); }
.icon-btn:hover { background: var(--s-hover); }
.icon-btn .icon { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}
.menu-btn { display: none; }
@media (max-width: 900px) {
  .nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.18s ease, transform 0.22s ease, visibility 0s 0.22s; position: absolute; left: 0; right: 0; top: var(--header-h); flex-direction: column; align-items: stretch; margin: 0; padding: 12px var(--gutter) 20px; background: var(--s-nav); border-bottom: 1px solid var(--s-line); }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .menu-btn { display: inline-grid; }
  .header-actions .btn { min-height: 42px; padding: 0 16px; font-size: 0.92rem; }
  .header-inner { gap: 10px; }
  .brand { margin-right: auto; }
}
@media (max-width: 420px) { .header-actions .btn { display: none; } }

/* ---------- Hero ---------- */
.hero {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 88px));
  padding-bottom: clamp(56px, 8vw, 104px);
  background:
    radial-gradient(60% 50% at 82% 8%, var(--s-glow), transparent 70%),
    linear-gradient(var(--s-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--s-grid) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--s-bg);
  color: var(--s-text);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.45vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.hero h1 em { font-style: normal; color: var(--s-em); }
.hero .eyebrow { color: var(--s-em); }
.hero__copy { display: grid; gap: 20px; }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--s-sub); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__micro { font-family: var(--font-mono); font-size: 0.78rem; color: var(--s-micro); display: flex; flex-wrap: wrap; gap: 6px 18px; letter-spacing: 0.02em; }
.hero__micro span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--hivis); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.hero__visual { position: relative; margin-right: clamp(-48px, -3vw, 0px); container-type: inline-size; }
.hero-phone { position: absolute; display: block; --w: 23cqw; left: -7%; bottom: 0; width: var(--w); }
.hero-phone .phone { display: block; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 640px; }
  .hero-phone { --w: 27cqw; left: auto; right: 2%; }
}

/* ---------- Frames for screenshots ---------- */
.frame { border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.hero .frame, .on-ink .frame { border-color: var(--s-line); box-shadow: var(--s-shadow); }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--s-bar); }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2c3d5a; }
.frame img { width: 100%; height: auto; }
.phone { border-radius: 26px; padding: 7px; background: #0e1a2e; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.7); }
.phone img { border-radius: 20px; width: 100%; height: auto; }

/* ---------- Proof strip ---------- */
.proof { padding-block: 34px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.proof__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; }
.proof__item { display: flex; gap: 14px; align-items: flex-start; }
.proof__item .icon { color: var(--accent-text); margin-top: 2px; width: 1.7em; height: 1.7em; }
.proof__item h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.proof__item p { font-size: 0.93rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
@media (max-width: 900px) { .proof__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof__list { grid-template-columns: 1fr; } }

/* ---------- Problems ---------- */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.problem { padding: 30px 28px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.problem .icon { color: var(--signal); width: 1.9em; height: 1.9em; }
.problem h3 { font-size: 1.28rem; font-weight: 700; }
.problem p { color: var(--muted); font-size: 0.98rem; }
.closing-line { margin-top: 40px; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; max-width: 30ch; }
@media (max-width: 900px) { .problems { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .problems { grid-template-columns: 1fr; } }

/* ---------- Journey ---------- */
/* Seven equal stops. When the row scrolls into view a line is drawn from the first stop to the last,
   and each stop lights up at the moment the line reaches it (line: 1.8s linear; stops: 0.3s apart). */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.journey::before, .journey::after { content: ""; position: absolute; top: 26px; height: 2px; left: calc((100% - 60px) / 14); right: calc((100% - 60px) / 14); }
.journey::before { background: var(--line); }
.journey::after { background: var(--accent-text); transform: scaleX(0); transform-origin: left center; transition: transform 1.8s linear; will-change: transform; }
.journey.is-in::after { transform: scaleX(1); }
.step { position: relative; display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; }
.step__dot { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--text); z-index: 1; transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease; }
.journey.is-in .step__dot { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); }
.journey.is-in .step:nth-child(1) .step__dot { transition-delay: 0s; }
.journey.is-in .step:nth-child(2) .step__dot { transition-delay: 0.3s; }
.journey.is-in .step:nth-child(3) .step__dot { transition-delay: 0.6s; }
.journey.is-in .step:nth-child(4) .step__dot { transition-delay: 0.9s; }
.journey.is-in .step:nth-child(5) .step__dot { transition-delay: 1.2s; }
.journey.is-in .step:nth-child(6) .step__dot { transition-delay: 1.5s; }
.journey.is-in .step:nth-child(7) .step__dot { transition-delay: 1.8s; }
.step h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.step p { font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
/* Without JavaScript, show the finished state straight away. */
.no-js .journey::after { transform: none; }
.no-js .journey .step__dot { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); }
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before, .journey::after { left: 26px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
  .journey::after { transform: scaleY(0); transform-origin: center top; transition-duration: 1.8s; }
  .journey.is-in::after { transform: scaleY(1); }
  .step { grid-template-columns: 54px 1fr; justify-items: start; text-align: left; column-gap: 16px; padding-block: 12px; align-items: center; }
  .step__dot { grid-row: span 2; }
  .step h3 { white-space: normal; }
}

/* ---------- Pillars and the feature explorer ---------- */
.pillar { margin-top: clamp(56px, 8vw, 96px); }
.pillar:first-of-type { margin-top: 0; }
.pillar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-bottom: 26px; }
.pillar__head h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; }
.pillar__head p { color: var(--muted); }
.explorer { display: grid; grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.explorer__tabs { display: grid; gap: 6px; }
.explorer__tab { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; background: transparent; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--muted); display: flex; gap: 12px; align-items: center; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.explorer__tab:hover { color: var(--text); background: var(--surface); }
.explorer__tab[aria-selected="true"] { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
.explorer__tab .icon { width: 1.35em; height: 1.35em; color: var(--accent-text); }
.explorer__panels { min-width: 0; }
.panel { display: grid; gap: 22px; }
.panel + .panel { margin-top: 48px; }
.js .panel + .panel { margin-top: 0; }
.panel h4 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }
.panel p { color: var(--muted); max-width: 64ch; margin-top: 8px; }
.panel__media { display: grid; gap: 16px; }
.panel__media--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); align-items: end; }
.panel__media .phone { max-width: 260px; justify-self: center; }
/* The gate poster, shown pinned to a wall next to the phone it opens on, with what stops a photo of it being used at home */
.clockfig { display: grid; gap: 20px; }
.clockfig__wall { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px) clamp(24px, 4vw, 36px); border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--accent-text) 10%, var(--surface)), var(--surface)); overflow: hidden; }
.clockfig__poster { position: relative; margin: 0; width: min(46%, 300px); flex: none; transform: rotate(-2.5deg); background: #fff; border-radius: 3px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18); }
.clockfig__poster img { width: 100%; height: auto; border-radius: 3px; }
.clockfig__poster::before, .clockfig__poster::after { content: ""; position: absolute; top: -9px; width: 46px; height: 18px; background: rgba(230, 226, 210, 0.75); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.clockfig__poster::before { left: 10%; transform: rotate(-8deg); }
.clockfig__poster::after { right: 10%; transform: rotate(7deg); }
.clockfig__phone { position: relative; flex: none; --w: clamp(140px, 16vw, 236px); width: var(--w); margin-left: clamp(-36px, -4vw, -16px); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.35)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.clockfig__phone [data-phone-mount] { display: block; perspective: 1500px; padding: 4% 0 6%; }
.clockfig__phone:hover, .clockfig__phone:focus-visible { transform: translateY(-6px) scale(1.03); }
.device--3d { transform-style: preserve-3d; transform: rotateY(var(--ry, -27deg)) rotateX(var(--rx, 7deg)) rotateZ(calc(var(--ry, -27deg) * 0.05)); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.55); }
.device--3d .device__btn--v0 { display: none; }
.device--3d .device__btn { width: calc(8 * var(--u)); transform: translateZ(calc(-2 * var(--u))); }
.device--3d .device__btn--v1, .device--3d .device__btn--v2 { left: calc(-6 * var(--u)); }
.device--3d .device__btn--power { right: calc(-6 * var(--u)); }
.device__layer { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #7c7e84, #c9cacf 40%, #6f7177); pointer-events: none; }
.clockfig__phone:focus-visible { outline: 2px solid var(--hivis); outline-offset: 6px; border-radius: 40px; }
/* The cursor that shows the clock-in phone can be tapped: glides on, taps Clock In, glides off, loops (main.js drives it). */
.tapcursor { --cs: clamp(18px, 1.9vw, 26px); position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.35s ease; will-change: transform; }
.tapcursor.is-on, .tapcursor.is-static { opacity: 1; }
.tapcursor.is-static { transition: none; }
/* Each pointer is placed so its hotspot (arrow tip, fingertip) sits on the cursor's point, like a real cursor. */
.tapcursor__arrow, .tapcursor__hand { position: absolute; width: var(--cs); height: var(--cs); max-width: none; filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.4)); transition: transform 0.12s ease; }
.tapcursor__arrow { left: calc(var(--cs) * -0.23); top: calc(var(--cs) * -0.11); transform-origin: 23% 11%; }
.tapcursor__hand { --cs-h: calc(var(--cs) * 1.1); width: var(--cs-h); height: var(--cs-h); left: calc(var(--cs-h) * -0.44); top: calc(var(--cs-h) * -0.07); transform-origin: 44% 7%; visibility: hidden; }
.tapcursor.is-hand .tapcursor__hand { visibility: visible; }
.tapcursor.is-hand .tapcursor__arrow { visibility: hidden; }
.tapcursor.is-press .tapcursor__arrow, .tapcursor.is-press .tapcursor__hand { transform: scale(0.85); }
.tapcursor__ripple { position: absolute; left: calc(var(--cs) * -0.8); top: calc(var(--cs) * -0.8); width: calc(var(--cs) * 1.6); height: calc(var(--cs) * 1.6); border-radius: 50%; border: 2px solid var(--hivis); opacity: 0; transform: scale(0.2); }
.tapcursor.is-press .tapcursor__ripple { animation: tap-ripple 0.6s ease-out; }
@keyframes tap-ripple { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.6); } }
.clockfig__phone .ph-btn.is-demo-tap { transform: scale(0.96); filter: brightness(1.15); transition: transform 0.12s, filter 0.12s; }
.clockfig__notes { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.clockfig__notes li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.93rem; line-height: 1.5; color: var(--text-2, var(--muted)); }
.clockfig__notes b { color: var(--text); font-weight: 600; }
.clockfig__notes .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }
@media (max-width: 560px) { .clockfig__poster { width: 46%; } .clockfig__phone { --w: 43vw; margin-left: -12vw; } }
.js .panel[hidden] { display: none; }
.js .explorer__tabs { position: sticky; top: calc(var(--header-h) + 16px); }
.no-js .explorer__tabs { display: none; }
.no-js .explorer { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer__tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; scroll-snap-type: x proximity; position: static !important; }
  .explorer__tab { flex: none; scroll-snap-align: start; border-color: var(--line); white-space: nowrap; padding: 12px 16px; }
  .explorer__tab .icon { display: none; }
}
.alerts { display: grid; gap: 12px; max-width: 520px; }
.alert { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.alert .icon { color: var(--accent-text); margin-top: 2px; }
.alert small { font-family: var(--font-mono); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.alert p { margin: 0; color: var(--text); font-size: 0.98rem; }
.alert--sms { border-radius: 18px 18px 18px 4px; }
.small-print { margin-top: 36px; font-size: 0.9rem; color: var(--muted); max-width: 70ch; }

/* ---------- Your data (always dark) ---------- */
.data { position: relative; overflow: hidden; }
.data.on-ink { background: var(--s-bg-data); }
.data::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 15% 20%, var(--s-glow), transparent 70%); pointer-events: none; }
.data .h2 { color: var(--s-head); }
.data__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; position: relative; }
.data__diagram { position: sticky; top: calc(var(--header-h) + 28px); }
.data__copy { display: grid; gap: 22px; }
.benefits { display: grid; gap: 18px; margin-top: 8px; }
.benefit { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.benefit .icon { color: var(--s-em); margin-top: 2px; width: 1.4em; height: 1.4em; }
.benefit h3 { font-size: 1.08rem; font-weight: 700; color: var(--s-head); }
.benefit p { color: var(--muted); font-size: 0.97rem; margin-top: 2px; }
.honest { border-left: 3px solid var(--signal); padding: 4px 0 4px 16px; color: var(--s-sub); font-size: 0.95rem; max-width: 60ch; }
.diagram { width: 100%; height: auto; }
@media (max-width: 960px) { .data__diagram { position: static; } }
.diagram text { font-family: var(--font-mono); }
/* the picture's colours follow the theme (the values in the drawing are the dark ones) */
.diagram [fill="#152238"] { fill: var(--dg-box); }
.diagram [stroke="#3a4d6d"] { stroke: var(--dg-box-line); }
.diagram [stroke="#24344f"] { stroke: var(--dg-line); }
.diagram [fill="#eaf0f8"] { fill: var(--dg-text); }
.diagram [fill="#9dabc2"] { fill: var(--dg-muted); }
.diagram [fill="#c6e23b"] { fill: var(--dg-ok); }
.diagram [stroke="#c6e23b"] { stroke: var(--dg-ok); }
.diagram [fill="#f2994a"] { fill: var(--dg-warn); }
.diagram [stroke="#f2994a"] { stroke: var(--dg-warn); }
.diagram [fill="#ef4444"] { fill: var(--dg-danger); }
.diagram [stroke="#ef4444"] { stroke: var(--dg-danger); }
@media (max-width: 960px) { .data__grid { grid-template-columns: 1fr; } }

/* ---------- Who it helps ---------- */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.role { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; align-content: start; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.role:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.role .icon { color: var(--accent-text); width: 1.9em; height: 1.9em; }
.role h3 { font-size: 1.35rem; font-weight: 700; }
.role .tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.role li { position: relative; padding-left: 20px; color: var(--muted); font-size: 0.97rem; margin-top: 8px; }
.role li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--accent-text); }
@media (max-width: 1080px) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* ---------- How it works ---------- */
.how { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; counter-reset: how; }
.how li { position: relative; padding-top: 22px; border-top: 2px solid var(--line); counter-increment: how; }
.how li::before { content: counter(how); position: absolute; top: -13px; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--hivis); color: var(--hivis-ink); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; display: grid; place-items: center; }
.how h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.how p { color: var(--muted); font-size: 0.96rem; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; gap: 28px; } .how li { border-top: 0; border-left: 2px solid var(--line); padding: 0 0 0 26px; } .how li::before { top: 0; left: -13px; } }

/* ---------- Comparison ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.98rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--font-display); font-size: 1rem; background: var(--bg-alt); }
tbody th { font-weight: 600; width: 26%; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td:nth-child(2), td:nth-child(3) { color: var(--muted); }
.col-us { background: rgba(198, 226, 59, 0.1); color: var(--text) !important; font-weight: 600; }
thead .col-us { background: var(--hivis); color: var(--hivis-ink) !important; }
.table-note { margin-top: 14px; font-size: 0.88rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; line-height: 1; color: var(--accent-text); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq details p { padding: 0 22px 20px; color: var(--muted); max-width: 72ch; }

/* ---------- Final CTA and form ---------- */
.cta { position: relative; overflow: hidden; }
.cta.on-ink { background: var(--s-bg-cta); }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 90% 0%, var(--s-glow), transparent 70%); pointer-events: none; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; position: relative; }
.cta .h2 { color: var(--s-head); }
.cta__copy { display: grid; gap: 20px; align-content: start; }
.checks { display: grid; gap: 12px; margin-top: 6px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--s-sub); }
.checks .icon { color: var(--s-em); margin-top: 3px; width: 1.25em; height: 1.25em; }
.form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--hivis); box-shadow: 0 0 0 3px rgba(198, 226, 59, 0.35); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: 0.86rem; min-height: 1.1em; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 0.86rem; color: var(--muted); }
.form__status { padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; border: 1px solid var(--line); }
.form__status[hidden] { display: none; }
.form__status.is-ok { border-color: var(--ok); color: var(--ok); }
.form__status.is-error { border-color: var(--danger); color: var(--danger); }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--s-foot-bg); color: var(--s-foot-text); padding-block: 64px 28px; font-size: 0.95rem; scroll-margin-top: var(--header-h); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.5fr; gap: 40px 48px; align-items: start; }
.site-footer .brand { color: var(--s-foot-head); }
.site-footer h4 { font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-foot-head); margin-bottom: 14px; font-weight: 500; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { text-decoration: none; color: var(--s-foot-text); }
.site-footer a:hover { color: var(--s-foot-head); text-decoration: underline; }
.footer__tag { margin-top: 14px; max-width: 30ch; }
.footer__maker { margin-top: 18px; font-size: 0.88rem; color: var(--s-foot-mute); }
.site-footer .footer__maker a { color: var(--s-foot-head); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--s-line); }
.site-footer .footer__maker a:hover { text-decoration-color: currentColor; }
.footer__contact { display: grid; gap: 10px; }
.footer__contact h4 { margin-bottom: 4px; }

/* Email, phone and office: clearly things you can tap */
.contact-link { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-hover); color: var(--s-foot-head); text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; }
.site-footer a.contact-link, .nav a.contact-link { color: var(--s-foot-head); text-decoration: none; }
a.contact-link:hover { border-color: var(--s-em); background: color-mix(in srgb, var(--s-em) 10%, transparent); transform: translateY(-1px); }
a.contact-link:focus-visible { outline: 2px solid var(--s-em); outline-offset: 2px; }
.contact-link__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--s-em) 16%, transparent); color: var(--s-em); }
.contact-link__icon .icon { width: 19px; height: 19px; }
.contact-link__text { min-width: 0; display: grid; gap: 1px; }
.contact-link__text small { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-foot-mute); }
.contact-link__text strong { font-size: 0.98rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-link__go { width: 16px; height: 16px; margin-left: auto; color: var(--s-em); transition: transform 0.2s ease; }
a.contact-link:hover .contact-link__go { transform: translateX(3px); }
.contact-link--static { background: transparent; border-color: transparent; padding-block: 4px; }
.nav__contact { display: none; }
.placeholder { color: var(--s-foot-mute); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--s-line); font-size: 0.85rem; color: var(--s-foot-mute); }
.site-footer .footer__top { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.footer__top .icon { width: 15px; height: 15px; transform: rotate(-90deg); }
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__contact { grid-column: 1 / -1; }
  .footer__contact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .footer__contact h4 { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__contact { grid-template-columns: 1fr; } }
/* the phone menu: Contact, then the email and phone themselves */
@media (max-width: 900px) {
  .nav__contact { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--s-line); }
  .nav .contact-link { padding: 10px 14px 10px 10px; font-size: 1rem; }
  .nav .contact-link:hover { background: color-mix(in srgb, var(--s-em) 10%, transparent); }
}

/* ---------- Simple pages (privacy, terms) ---------- */
.doc { padding-block: 120px 80px; max-width: 760px; }
.doc h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.doc p { color: var(--muted); margin-top: 14px; }
.doc .note { margin-top: 28px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--text); }
.doc a { color: var(--accent-text); }
.doc { color: var(--text); }
.doc .updated { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; margin-top: 0; }
.doc h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin-top: 40px; font-weight: 700; }
.doc p, .doc li { color: var(--muted); }
.doc ul { margin-top: 12px; padding-left: 0; }
.doc li { position: relative; padding-left: 20px; margin-top: 8px; }
.doc li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 2px; background: var(--accent-text); }
.doc strong { color: var(--text); font-weight: 600; }
.doc table { min-width: 0; margin-top: 16px; font-size: 0.95rem; }
.doc .table-wrap { margin-top: 16px; }
.doc-footer { border-top: 1px solid var(--line); padding-block: 28px 44px; font-size: 0.9rem; color: var(--muted); }
.doc-footer .container { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.doc-footer nav { display: flex; gap: 18px; }
.doc-footer a { text-decoration: none; }
.doc-footer a:hover { text-decoration: underline; }
.doc-header .nav { margin-left: auto; }
.doc-header .nav a { padding: 8px 12px; white-space: nowrap; }
@media (max-width: 520px) { .doc-header .nav a { padding: 8px 8px; font-size: 0.9rem; } }
@media (max-width: 900px) { .doc-header .nav { display: flex; visibility: visible; opacity: 1; transform: none; position: static; flex-direction: row; background: none; border: 0; padding: 0; } }
.doc-header { background: var(--s-bg); }

/* ---------- Reveal on scroll (only ever applied by JS, with a fail-safe) ---------- */
.js .reveal-pending { opacity: 0; transform: translateY(18px); }
.js .reveal-pending.is-visible { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal-pending { opacity: 1; transform: none; }
  .journey::after { transform: none; }
  .journey .step__dot { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); }
}

/* ---------- Clickable screenshots and the interactive demo ---------- */
.hero-shot { position: relative; display: block; width: 100%; padding: 0 0 8%; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.hero-shot .frame { display: block; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-shot .frame__bar { display: flex; }
.hero-shot:hover .frame, .hero-shot:focus-visible .frame { transform: scale(1.035); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.85), 0 0 0 2px rgba(198, 226, 59, 0.55); }
.hero-shot .hero-phone { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-shot:hover .hero-phone { transform: translate(-6px, 4px) scale(1.03); }
.hero-phone .ph-body { touch-action: pan-y; }
.hero-shot__cue { position: absolute; right: 3%; bottom: 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--s-glass); border: 1px solid var(--s-em); color: var(--s-text); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hivis); }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--hivis); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
.cue-touch { display: none; }
@media (hover: none) { .cue-hover { display: none; } .cue-touch { display: inline; } }
/* On a phone the big desktop screenshot is too small to read: show the phone screen instead, large, with the cue under it */
@media (max-width: 640px) {
  .hero-shot { padding-bottom: 58px; }
  .hero-shot .frame { display: none; }
  .hero__visual .hero-shot .hero-phone { position: relative; left: auto; right: auto; bottom: auto; --w: min(68cqw, 270px); margin: 0 auto; }
  .hero-shot:hover .hero-phone { transform: none; }
}
@media (max-width: 520px) { .hero-shot__cue { left: 3%; right: 3%; justify-content: center; font-size: 0.7rem; padding: 8px 12px; } }

.frame[data-demo] { position: relative; cursor: pointer; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.frame[data-demo]:hover, .frame[data-demo]:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(198, 226, 59, 0.6); }
.frame[data-demo]::after { content: "Open in the demo"; position: absolute; right: 12px; top: 40px; padding: 6px 12px; border-radius: 999px; background: var(--hivis); color: var(--hivis-ink); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.frame[data-demo]:hover::after, .frame[data-demo]:focus-visible::after { opacity: 1; transform: none; }
html { scrollbar-gutter: stable; }
html.demo-open { overflow: hidden; }

.demo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(8px, 2.4vw, 32px); }
.demo[hidden] { display: none; }
.demo__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 16, 0.88); }
.demo__panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1280px, 100%); height: min(820px, 100%); border-radius: 16px; overflow: hidden; background: #0b1424; color: #eaf0f8; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); outline: none; }
.demo__bar { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; height: 44px; background: #0e1a2e; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.demo__dots { display: flex; gap: 6px; }
.demo__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c3d5a; }
.demo__title { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.78rem; color: #9dabc2; letter-spacing: 0.04em; }
.demo__close { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #eaf0f8; }
.demo__close:hover { background: rgba(255, 255, 255, 0.1); }
.demo__close .icon { width: 16px; height: 16px; }
.demo__body { position: relative; display: grid; grid-template-columns: 288px minmax(0, 1fr); min-height: 0; }
.demo__nav { display: flex; flex-direction: column; min-height: 0; background: #020617; border-right: 1px solid #0e1019; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
.dsw { flex: none; display: flex; gap: 4px; width: 240px; padding: 4px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(148, 163, 184, 0.08); }
.dsw button { flex: 1; padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #94a3b8; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.dsw button:hover { color: #fff; }
.dsw { position: relative; }
.dsw::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 9px; background: rgba(212, 175, 55, 0.18); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45); transition: transform 0.38s cubic-bezier(0.65, 0, 0.35, 1); }
.dsw:has(> [data-goto="portal"].is-current)::before, .dsw[data-slide="portal"]::before { transform: translateX(calc(100% + 4px)); }
.dsw[data-slide="admin"]::before { transform: none; }
.dsw button { position: relative; z-index: 1; transition: color 0.25s ease; }
.dsw button.is-current { color: #fff; }
.dsw[data-slide] button.is-current { color: #94a3b8; }
.dsw[data-slide="admin"] [data-goto="admin"], .dsw[data-slide="portal"] [data-goto="portal"] { color: #fff; }
.fnav, .pnav { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fnav[hidden], .pnav[hidden] { display: none; }
.fnav button, .pnav button { font-family: inherit; }

/* the real admin sidebar */
.fnav__head { flex: none; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px; background: #0f172a; border-bottom: 1px solid #1c1f2e; }
.fnav__logo { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #d4af37; color: #111827; font-size: 12px; font-weight: 700; }
.fnav__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.025em; }
.fnav__list { flex: 1; min-height: 0; margin: 0; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: #1e293b transparent; }
.fnav__group { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.fnav__group ul { display: flex; flex-direction: column; gap: 4px; }
.fnav__group ul[hidden] { display: none; }
.fnav__glabel { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; }
.fnav__chev { width: 20px; height: 20px; flex: none; color: #64748b; transition: transform 0.15s; }
.fnav__glabel[aria-expanded="false"] .fnav__chev { transform: rotate(180deg); }
.fnav__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #e2e8f0; font-size: 14px; font-weight: 500; line-height: 24px; text-align: left; }
.fnav__icon { flex: none; width: 24px; height: 24px; color: #64748b; }
.fnav__label { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fnav__item:hover { background: rgba(255, 255, 255, 0.05); }
.fnav__item[aria-current="page"] { background: #0f1323; color: #e1c773; }
.fnav__item[aria-current="page"] .fnav__icon { color: #e1c773; }
.fnav__badge { flex: none; min-width: 28px; padding: 3px 8px; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.fnav__badge--primary { --c: #e1c773; }
.fnav__badge--warning { --c: #fbbf24; }
.fnav__badge--danger { --c: #f87171; }

/* the real staff portal menu */
.pnav { background: #060a14; }
.pnav__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 20px 10px; }
.pnav__head .fnav__logo { width: 32px; height: 32px; }
.pnav__name { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.pnav__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: #4a4426 transparent; }
.pnav__list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pnav__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: #9b9da1; font-size: 14px; font-weight: 500; line-height: 22px; text-align: left; }
.pnav__icon { flex: none; width: 20px; height: 20px; }
.pnav__label { flex: none; }
.pnav__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-left: -4px; }
/* Unread count, as the product's chat badge draws it. */
.pnav__count { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.pnav__item:hover { background: rgba(255, 255, 255, 0.05); color: #e2e8f0; }
.pnav__item[aria-current="page"] { background: #252319; color: #d4af37; }
.pnav__more { margin: 24px 12px 8px; color: #6a6c72; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.demo__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dtop { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 20px; height: 56px; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
.dtop[hidden] { display: none; }
.dtop--admin { height: 64px; background: #0f172a; border-bottom: 1px solid #1c1f2e; }
.dtop--portal { background: #060a14; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dtop__searchwrap { position: relative; }
.dtop__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #e2e8f0; font: inherit; }
.dtop__search input::placeholder { color: #64748b; }
.dtop__search:focus-within { border-color: rgba(212, 175, 55, 0.6); }
.dtop__results { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 340px; max-height: 320px; overflow-y: auto; padding: 4px 0 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0f172a; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7); }
.dtop__results[hidden] { display: none; }
.dtop__cat { margin: 0; padding: 10px 16px 4px; color: #64748b; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dtop__hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 16px; border: 0; background: transparent; color: #e2e8f0; font-size: 14px; text-align: left; }
.dtop__hit small { color: #94a3b8; font-size: 12px; }
.dtop__hit:hover, .dtop__hit:focus-visible { background: rgba(255, 255, 255, 0.06); outline: 0; }
.dtop__none { margin: 0; padding: 18px 16px; text-align: center; color: #64748b; font-size: 14px; }
.dtop__search { display: flex; align-items: center; gap: 8px; width: 200px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: #64748b; font-size: 14px; }
.dtop__search svg { width: 16px; height: 16px; flex: none; }
.dtop__bell { display: grid; place-items: center; width: 36px; height: 36px; color: #94a3b8; }
.dtop__bell svg { width: 22px; height: 22px; }
.dtop__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(212, 175, 55, 0.18); color: #d4af37; font-size: 12px; font-weight: 700; flex: none; }
.demo__stage { flex: 1; overflow: auto; background: #020617; min-height: 0; scrollbar-color: #2c3d5a #020617; }
.demo__body[data-mode="portal"] .demo__stage { background: #0b1220; }
.demo__stage img { width: 100%; height: auto; display: block; transition: opacity 0.22s ease; }
.demo__stage img.is-loading { opacity: 0.25; }
.demo__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 18px; background: #0e1a2e; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.86rem; color: #9dabc2; }
.demo__foot .btn { min-height: 38px; padding: 0 18px; font-size: 0.9rem; }
@media (max-width: 820px) {
  .demo { padding: 0; }
  .demo__panel { border-radius: 0; height: 100%; }
  .demo__body { grid-template-columns: minmax(0, 1fr); }
  .demo__nav { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: min(320px, 88%); box-shadow: 24px 0 60px -10px rgba(0, 0, 0, 0.7); }
  .demo__dots { display: none; }
  .demo__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .dtop__search { display: none; }
  .dtop { padding: 0 12px; gap: 8px; }
  .dsw { width: auto; min-width: 0; }
  .dsw button { padding: 7px 8px; font-size: 12px; }
  .demo__foot span { display: none; }
  .demo__foot { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .hero-shot { animation: none; } .pulse::after { animation: none; } }

/* ---------- Live donut on the dashboard picture ---------- */
.shot { position: relative; display: block; }
.shot[hidden] { display: none; }
.shot > img { display: block; width: 100%; height: auto; }
.donut { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1120 / 834; max-width: none; pointer-events: none; }
.donut.is-off { display: none; }
.donut__hit { pointer-events: stroke; }
.donut__move { transition: transform 0.15s ease-out; }
.donut__move.is-out { transform: translate(var(--dx), var(--dy)); }
.donut__cover { fill: #0f172b; }
.donut__centre { display: none; }
.donut__centre.is-on { display: inline; }
.donut__num { fill: #fff; font-family: "Inter", -apple-system, "Segoe UI", sans-serif; font-weight: 800; font-size: 26px; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.donut__lbl { fill: #fff; fill-opacity: 0.55; font-family: "Inter", -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: 10px; dominant-baseline: central; }

/* ---------- Demo: menu toggle ---------- */
.demo__toggle { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #eaf0f8; font-size: 0.82rem; font-weight: 500; }
.demo__toggle:hover { background: rgba(255, 255, 255, 0.1); }
.demo__toggle .icon { width: 16px; height: 16px; }
.demo__body { grid-template-columns: auto minmax(0, 1fr); }
.demo__nav { width: 288px; overflow: hidden; }
.demo__nav > * { width: 288px; flex-shrink: 0; }
.demo.is-nav-closed .demo__nav { width: 0; visibility: hidden; }
.fnav__group ul { overflow: hidden; }
@media (max-width: 820px) {
  .demo__nav > * { width: auto; }
  .demo.is-nav-closed .demo__nav { width: min(320px, 88%); }
  .demo__nav { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .demo.is-nav-closed .demo__body { grid-template-columns: minmax(0, 1fr); }
  .demo.is-nav-closed .demo__nav { transform: translateX(-105%); transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1), visibility 0s 0.24s; }
}
@media (prefers-reduced-motion: reduce) { .demo__nav, .dsw::before { transition: none; } }

/* ---------- The org chart in the demo (same look and lines as the product's) ---------- */
.demo__stage .orgpage { min-height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 32px; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; color: #fff; }
.orgpage[hidden] { display: none; }
.orgpage__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.orgpage__tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.orgpage__tools button { height: 28px; min-width: 28px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; color: #94a3b8; font-family: inherit; font-size: 12px; font-weight: 600; }
.orgpage__tools button:hover { background: rgba(255, 255, 255, 0.05); }
.orgpage__tools svg { width: 16px; height: 16px; }
.orgpage__hint { margin-right: auto; color: #64748b; font-size: 12px; }
.orgpage__pct { min-width: 56px !important; }
.orgpage__full { margin-left: 8px; }
.orgpage__view { position: relative; flex: 1; min-height: 340px; overflow: hidden; border-radius: 12px; cursor: grab; outline: none; background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px); background-size: 20px 20px; touch-action: none; }
.orgpage__view.is-dragging { cursor: grabbing; }
.orgpage__view:focus-visible { box-shadow: 0 0 0 2px rgba(198, 226, 59, 0.6); }
.orgpage__canvas { display: inline-block; padding: 32px; transform-origin: top center; will-change: transform; }
.orgpage:fullscreen { padding: 16px; background: #020617; }
.orgpage:fullscreen .orgpage__view { min-height: 0; }
.org-tree, .org-tree ul { display: flex; justify-content: center; padding-top: 32px; margin: 0; }
.org-tree { padding-top: 0; }
.org-tree ul { position: relative; }
.org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; list-style: none; padding: 32px 12px 0; }
.org-tree li::before, .org-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 32px; border-top: 2px solid rgba(255, 255, 255, 0.15); }
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid rgba(255, 255, 255, 0.15); }
.org-tree li:first-child::before { border: none; }
.org-tree li:last-child::after { border: none; }
.org-tree li:first-child::after { border-radius: 8px 0 0 0; }
.org-tree li:last-child::before { border-right: 2px solid rgba(255, 255, 255, 0.15); border-radius: 0 8px 0 0; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree > li { padding-top: 0; }
.org-tree > li::before, .org-tree > li::after { display: none; }
.org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 32px; border-left: 2px solid rgba(255, 255, 255, 0.15); }
.org-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 192px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0f172a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.org-card__av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(212, 175, 55, 0.2); color: #eedfaf; font-size: 14px; font-weight: 700; }
.org-card__txt { text-align: center; }
.org-card__txt p { margin: 0; }
.org-card__name { color: #fff; font-size: 14px; font-weight: 600; }
.org-card__job { color: #94a3b8; font-size: 12px; }
.org-card__dept { color: #64748b; font-size: 11px; }
.org-card__tag { color: #fbbf24; font-size: 11px; font-weight: 500; }
.org-card__count { color: #e1c773; font-size: 11px; font-weight: 500; }
@media (max-width: 820px) { .demo__stage .orgpage { padding: 16px; } .orgpage__title { font-size: 24px; } }
.orgpage, .orgpage * { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }

/* The switching indicator inside the demo: the real product's default style (a curtain panel sweeps in
   from the side you're heading to, over a fixed dark gradient — this doesn't follow the page/demo theme,
   the same way it doesn't in the real app). */
.dswitch { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
.dswitch.is-on { pointer-events: all; }
.dswitch__panel { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #0b1220, #131c30); transition: transform 0.42s cubic-bezier(0.7, 0, 0.2, 1); }
.dswitch--from-right .dswitch__panel { transform: translateX(101%); }
.dswitch--from-left .dswitch__panel { transform: translateX(-101%); }
.dswitch.is-on .dswitch__panel { transform: none; }
.dswitch__edge { position: absolute; top: 0; bottom: 0; width: 6px; background: #d4af37; }
.dswitch--from-right .dswitch__edge { left: 0; }
.dswitch--from-left .dswitch__edge { right: 0; }
.dswitch__box { text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.3s 0.28s ease, transform 0.4s 0.28s cubic-bezier(0.16, 1, 0.3, 1); padding: 24px; }
.dswitch.is-on .dswitch__box { opacity: 1; transform: none; }
.dswitch p { margin: 0; color: #fff; font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.dswitch small { display: block; margin-top: 6px; color: #94a3b8; font-size: 14px; }
.dswitch__dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.dswitch__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d4af37; animation: dswitch-dot 1.1s infinite ease-in-out; }
.dswitch__dots i:nth-child(2) { animation-delay: 0.15s; }
.dswitch__dots i:nth-child(3) { animation-delay: 0.3s; }
.dswitch__toast { position: absolute; top: 56px; left: 50%; z-index: 31; padding: 10px 18px; border-radius: 999px; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font: 600 14px/1.2 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, -14px); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.dswitch__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@keyframes dswitch-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dswitch__panel, .dswitch__box { transition: none; } .dswitch__dots i { animation: none; } }

/* ---------- A phone that looks like a phone, showing the product's own phone page at its real size.
   The screen is 390 units wide (a common phone), so every number inside is the product's CSS pixel size; --u scales it all to fit. ---------- */
.device { --u: calc(var(--w, 340px) / 412); position: relative; width: var(--w, 340px); aspect-ratio: 412 / 866; padding: calc(11 * var(--u)); border-radius: calc(78 * var(--u)); background: linear-gradient(135deg, #a9abb1 0%, #e4e5e8 14%, #8b8d93 32%, #d3d4d8 52%, #7d7f85 74%, #c3c4c9 100%); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.55), inset 0 0 0 calc(4 * var(--u)) rgba(60, 62, 68, 0.55), 0 calc(40 * var(--u)) calc(60 * var(--u)) calc(-22 * var(--u)) rgba(0, 0, 0, 0.45), 0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, 0.35); font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; text-align: left; color: var(--ph-text); --ph-page: #0b1120; --ph-bar: #060a14; --ph-line: rgba(255, 255, 255, 0.05); --ph-text: #fff; --ph-muted: rgba(255, 255, 255, 0.6); --ph-faint: rgba(255, 255, 255, 0.4); --ph-card: rgba(255, 255, 255, 0.05); --ph-card-b: rgba(255, 255, 255, 0.1); --ph-grey: rgba(255, 255, 255, 0.08); --ph-accent: #d4af37; }
.device[data-dtheme="light"] { --ph-page: #f4f5f9; --ph-bar: #fff; --ph-line: #edf0f5; --ph-text: #0b1120; --ph-muted: #64748b; --ph-faint: #94a3b8; --ph-card: #fff; --ph-card-b: #e2e6ef; --ph-grey: #eef0f6; --ph-accent: #8a7224; }
.device::before { content: ""; position: absolute; inset: calc(5 * var(--u)); border-radius: calc(73 * var(--u)); background: #05070b; box-shadow: inset 0 0 0 calc(2 * var(--u)) #1b1e25; }
.device__btn { position: absolute; width: calc(5 * var(--u)); border-radius: calc(2 * var(--u)); background: linear-gradient(90deg, #6d6f75, #cfd0d4 50%, #82848a); }
.device__btn--power { right: calc(-4 * var(--u)); top: calc(274 * var(--u)); height: calc(118 * var(--u)); }
.device__btn--v0 { left: calc(-4 * var(--u)); top: calc(161 * var(--u)); height: calc(37 * var(--u)); }
.device__btn--v1 { left: calc(-4 * var(--u)); top: calc(230 * var(--u)); height: calc(72 * var(--u)); }
.device__btn--v2 { left: calc(-4 * var(--u)); top: calc(320 * var(--u)); height: calc(72 * var(--u)); }
.device__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: linear-gradient(112deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.07) 100%); }
.device__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(67 * var(--u)); background: var(--ph-page); display: flex; flex-direction: column; }
.device__island { position: absolute; z-index: 3; top: calc(11 * var(--u)); left: 50%; width: calc(112 * var(--u)); height: calc(32 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: #000; }
.device__island::after { content: ""; position: absolute; right: calc(13 * var(--u)); top: calc(9 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #37457a 0, #131a33 45%, #05070c 75%); box-shadow: 0 0 0 calc(2 * var(--u)) #0d1018; }
.device__status { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--u)); padding: calc(8 * var(--u)) calc(34 * var(--u)) 0 calc(40 * var(--u)); background: var(--ph-bar); color: var(--ph-text); font-size: calc(15 * var(--u)); font-weight: 700; }
.device__status span { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
.device__status svg { height: calc(12 * var(--u)); width: auto; }
.device__home { position: absolute; z-index: 3; left: 50%; bottom: calc(9 * var(--u)); width: calc(136 * var(--u)); height: calc(5 * var(--u)); transform: translateX(-50%); border-radius: 999px; background: var(--ph-text); opacity: 0.8; }

/* the page itself: the product's phone top bar and clock-in page */
.ph-bar { flex: none; display: flex; align-items: center; height: calc(56 * var(--u)); padding: 0 calc(16 * var(--u)); background: var(--ph-bar); border-bottom: calc(1 * var(--u)) solid var(--ph-line); color: var(--ph-muted); }
.ph-menu, .ph-tool { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; }
.ph-menu { margin-left: calc(-4 * var(--u)); margin-right: calc(12 * var(--u)); }
.ph-menu svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
/* The top-bar tools are real buttons in the small phone popup (see PH_NOTES in main.js); this resets the button
   chrome so they look identical to the plain span they are everywhere else on the page. */
button.ph-menu, button.ph-tool { border: 0; background: none; padding: 0; margin-block: 0; font: inherit; color: inherit; cursor: pointer; border-radius: calc(8 * var(--u)); transition: background-color 0.15s ease; }
button.ph-menu:hover, button.ph-tool:hover { background: var(--ph-grey); }
button.ph-menu:focus-visible, button.ph-tool:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 1px; }
.ph-brand { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ph-logo { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(6 * var(--u)); background: #d4af37; color: #0f172a; font-size: calc(12 * var(--u)); font-weight: 700; line-height: 1; }
.ph-name { color: var(--ph-text); font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.43; letter-spacing: -0.025em; }
.ph-sp { flex: 1; }
.ph-tool--sun { margin-right: calc(4 * var(--u)); }
.ph-tool--sun svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ph-tool--bell svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ph-body { flex: 1; min-height: 0; padding: calc(32 * var(--u)) calc(16 * var(--u)) calc(60 * var(--u)); background: var(--ph-page); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.ph-body::-webkit-scrollbar { display: none; }
.ph-body p, .ph-body h3 { margin: 0; }
.ph-eyebrow { color: var(--ph-faint); font-size: calc(12 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); letter-spacing: 0.025em; text-transform: uppercase; }
.ph-hello { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.ph-avatar { display: grid; place-items: center; flex: none; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: rgba(212, 175, 55, 0.2); color: var(--ph-accent); font-size: calc(14 * var(--u)); font-weight: 700; }
.ph-title { color: var(--ph-text); font-size: calc(24 * var(--u)); font-weight: 700; line-height: calc(32 * var(--u)); }
.ph-date { margin-top: calc(2 * var(--u)) !important; color: var(--ph-muted); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ph-kyc { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(1 * var(--u)) solid rgba(217, 119, 6, 0.3); background: rgba(217, 119, 6, 0.1); color: #b45309; font-size: calc(14 * var(--u)); font-weight: 500; line-height: calc(20 * var(--u)); }
.ph-kyc__i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.ph-kyc > span { flex: 1; }
.ph-kyc__a { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; margin-left: auto; }
.ph-grid { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.ph-card { padding: calc(24 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(1 * var(--u)) solid var(--ph-card-b); background: var(--ph-card); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.05); }
.ph-ch { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(16 * var(--u)); margin-bottom: calc(16 * var(--u)); color: var(--ph-faint); }
.ph-ch p { color: var(--ph-faint); font-size: calc(12 * var(--u)); font-weight: 600; line-height: calc(16 * var(--u)); letter-spacing: 0.025em; text-transform: uppercase; }
.ph-chi { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; }
.ph-grid > .ph-card:first-child .ph-ch { margin-bottom: calc(8 * var(--u)); }
.ph-grid > .ph-card:nth-child(2) .ph-ch { margin-bottom: calc(12 * var(--u)); }
.ph-viewall { margin-left: auto; color: var(--ph-accent) !important; font-size: calc(12 * var(--u)); font-weight: 400; letter-spacing: 0; text-transform: none; }
.ph-muted, .ph-note, .ph-lab { color: var(--ph-muted); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ph-note { margin-bottom: calc(16 * var(--u)) !important; }
.ph-big { color: var(--ph-text); font-size: calc(18 * var(--u)); font-weight: 600; line-height: calc(28 * var(--u)); }
.ph-big + .ph-muted { margin-top: calc(2 * var(--u)) !important; }
.ph-muted--mt { margin-top: calc(4 * var(--u)) !important; }
.ph-btn { display: block; width: 100%; padding: calc(10 * var(--u)) 0; border: 0; border-radius: calc(8 * var(--u)); text-align: center; font-family: inherit; font-size: calc(14 * var(--u)); font-weight: 700; line-height: calc(20 * var(--u)); }
.ph-btn--gold { background: #d4af37; color: #060a14; }
.ph-btn--grey { background: var(--ph-grey); color: var(--ph-text); font-weight: 600; }
.ph-btn--mt { margin-top: calc(16 * var(--u)) !important; }
.ph-msg { margin-top: calc(12 * var(--u)) !important; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); border: calc(1 * var(--u)) solid var(--ph-card-b); background: var(--ph-grey); color: var(--ph-text); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ph-leave { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
button.ph-leave { width: 100%; border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; cursor: pointer; border-radius: calc(8 * var(--u)); transition: background-color 0.15s ease; }
button.ph-leave:hover { background: var(--ph-grey); }
button.ph-leave:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 2px; }
.ph-num { color: var(--ph-text); font-size: calc(24 * var(--u)); font-weight: 700; line-height: calc(32 * var(--u)); }
.ph-lab { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
.ph-week { color: var(--ph-text); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ph-week b { font-weight: 700; }
.ph-week span { color: var(--ph-muted); }
.ph-week--btn { display: block; width: 100%; border: 0; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; border-radius: calc(8 * var(--u)); transition: background-color 0.15s ease; }
.ph-week--btn:hover { background: var(--ph-grey); }
.ph-week--btn:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 2px; }
.ph-item { padding: calc(12 * var(--u)) 0; border-bottom: calc(1 * var(--u)) solid var(--ph-line); }
.ph-item:last-child { border-bottom: 0; padding-bottom: calc(12 * var(--u)); }
.ph-item:first-child { padding-top: 0; }
.ph-it { color: var(--ph-text); font-size: calc(16 * var(--u)); font-weight: 500; line-height: calc(24 * var(--u)); }
.ph-ib { margin-top: calc(4 * var(--u)) !important; color: var(--ph-muted); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.ph-iw { margin-top: calc(8 * var(--u)) !important; color: var(--ph-faint); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
button.ph-btn { cursor: pointer; transition: filter 0.15s, transform 0.1s; }
button.ph-btn:hover { filter: brightness(1.1); }
button.ph-btn:active { transform: scale(0.98); }
button.ph-btn:disabled { cursor: progress; }
button.ph-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the pop-up phone: as big as the screen allows, with its words beside it (or above it on a phone) */
.phonedemo { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity 0.2s ease; }
.phonedemo.is-on { opacity: 1; }
.phonedemo[hidden] { display: none; }
.phonedemo__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 16, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.phonedemo__panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 290px); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: "phone ." "phone title" "phone sub" "phone note" "phone foot" "phone ."; column-gap: clamp(28px, 4vw, 56px); row-gap: 8px; align-items: start; max-height: 100%; outline: none; transform: translateY(14px) scale(0.98); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.phonedemo.is-on .phonedemo__panel { transform: none; }
.phonedemo__x { position: fixed; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(11, 20, 36, 0.9); color: #eaf0f8; }
.phonedemo__x .icon { width: 18px; height: 18px; }
.phonedemo__title { grid-area: title; margin: 0; color: #fff; font-weight: 600; font-size: 1.15rem; line-height: 1.35; }
.phonedemo__sub { grid-area: sub; margin: 0 0 8px; color: #9dabc2; font-size: 0.95rem; line-height: 1.5; }
.phonedemo__phone { grid-area: phone; align-self: center; --w: min(520px, calc((100vh - 56px) * 0.4757), 46vw); --w: min(520px, calc((100dvh - 56px) * 0.4757), 46vw); }
.phonedemo__note { grid-area: note; min-height: 4.4em; margin: 6px 0 0; color: #b7c3d7; font-size: 0.88rem; line-height: 1.5; }
.phonedemo__foot { grid-area: foot; margin-top: 6px; }
.phonedemo__again { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #eaf0f8; font-size: 0.88rem; font-weight: 600; }
.phonedemo__again:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 900px) {
  .phonedemo { padding: 10px; }
  .phonedemo__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "title" "phone" "note" "foot"; justify-items: center; text-align: center; row-gap: 6px; align-content: center; }
  .phonedemo__sub { display: none; }
  .phonedemo__title { font-size: 1rem; padding: 0 44px; }
  .phonedemo__phone { --w: min(94vw, calc((100vh - 170px) * 0.4757)); --w: min(94vw, calc((100dvh - 170px) * 0.4757)); }
  .phonedemo__note { min-height: 3.2em; max-width: 26rem; }
}
@media (max-width: 560px) { .phonedemo__title { display: none; } .phonedemo__phone { --w: min(94vw, calc((100vh - 110px) * 0.4757)); --w: min(94vw, calc((100dvh - 110px) * 0.4757)); } .phonedemo__note { min-height: 2.6em; } }
@media (prefers-reduced-motion: reduce) { .phonedemo, .phonedemo__panel, .clockfig__phone { transition: none; } }

/* ---------- Light theme: when the site is light, the demo is light too (the product's own light look) ---------- */
.demo[data-dtheme="light"] .demo__backdrop { background: rgba(15, 23, 42, 0.5); }
.demo[data-dtheme="light"] .demo__panel { background: #f8fafc; color: #0f172a; border-color: #d9dee8; box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.45); }
.demo[data-dtheme="light"] .demo__bar { background: #eef1f6; border-bottom-color: #dfe4ed; }
.demo[data-dtheme="light"] .demo__dots i { background: #c5cedb; }
.demo[data-dtheme="light"] .demo__title { color: #64748b; }
.demo[data-dtheme="light"] .demo__close, .demo[data-dtheme="light"] .demo__toggle { border-color: #cfd6e2; color: #0f172a; }
.demo[data-dtheme="light"] .demo__close:hover, .demo[data-dtheme="light"] .demo__toggle:hover { background: rgba(15, 23, 42, 0.06); }
.demo[data-dtheme="light"] .demo__foot { background: #eef1f6; border-top-color: #dfe4ed; color: #475569; }
.demo[data-dtheme="light"] .demo__nav { background: #f8fafc; border-right-color: #e5e9f0; }
.demo[data-dtheme="light"] .demo__stage { background: #f8fafc; scrollbar-color: #cbd5e1 #f8fafc; }
.demo[data-dtheme="light"] .demo__body[data-mode="portal"] .demo__stage { background: #f4f5f9; }

/* the admin sidebar */
.demo[data-dtheme="light"] .fnav__head { background: #fff; border-bottom-color: #e2e8f0; }
.demo[data-dtheme="light"] .fnav__name { color: #020617; }
.demo[data-dtheme="light"] .fnav__list { scrollbar-color: #cbd5e1 transparent; }
.demo[data-dtheme="light"] .fnav__glabel { color: #64748b; }
.demo[data-dtheme="light"] .fnav__chev, .demo[data-dtheme="light"] .fnav__icon { color: #94a3b8; }
.demo[data-dtheme="light"] .fnav__item { color: #334155; }
.demo[data-dtheme="light"] .fnav__item:hover { background: rgba(15, 23, 42, 0.05); }
.demo[data-dtheme="light"] .fnav__item[aria-current="page"] { background: #f1f5f9; color: #bf9e32; }
.demo[data-dtheme="light"] .fnav__item[aria-current="page"] .fnav__icon { color: #bf9e32; }
.demo[data-dtheme="light"] .fnav__badge--primary { --c: #bf9e32; }
.demo[data-dtheme="light"] .fnav__badge--warning { --c: #d97706; }
.demo[data-dtheme="light"] .fnav__badge--danger { --c: #dc2626; }

/* the staff portal menu */
.demo[data-dtheme="light"] .pnav { background: #fff; }
.demo[data-dtheme="light"] .pnav__name { color: #0b1120; }
.demo[data-dtheme="light"] .pnav__scroll { scrollbar-color: #d9cf9d transparent; }
.demo[data-dtheme="light"] .pnav__item { color: #64748b; }
.demo[data-dtheme="light"] .pnav__item:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
.demo[data-dtheme="light"] .pnav__item[aria-current="page"] { background: rgba(212, 175, 55, 0.15); color: #8a7224; }
.demo[data-dtheme="light"] .pnav__more { color: #94a3b8; }

/* the top bars */
.demo[data-dtheme="light"] .dtop--admin { background: rgba(255, 255, 255, 0.92); border-bottom-color: #e2e8f0; }
.demo[data-dtheme="light"] .dtop--portal { background: #fff; border-bottom-color: #edf0f5; }
.demo[data-dtheme="light"] .dtop__search { background: #fff; border-color: rgba(2, 6, 23, 0.1); color: #64748b; }
.demo[data-dtheme="light"] .dtop__search input { color: #020617; }
.demo[data-dtheme="light"] .dtop__search input::placeholder { color: #94a3b8; }
.demo[data-dtheme="light"] .dtop__bell { color: #94a3b8; }
.demo[data-dtheme="light"] .dtop__avatar { background: rgba(212, 175, 55, 0.2); color: #8a7224; }
.demo[data-dtheme="light"] .dsw { border-color: rgba(148, 163, 184, 0.3); background: rgba(148, 163, 184, 0.1); }
.demo[data-dtheme="light"] .dsw button { color: #64748b; }
.demo[data-dtheme="light"] .dsw button:hover { color: #0f172a; }
.demo[data-dtheme="light"] .dsw button.is-current, .demo[data-dtheme="light"] .dsw[data-slide="admin"] [data-goto="admin"], .demo[data-dtheme="light"] .dsw[data-slide="portal"] [data-goto="portal"] { color: #6f5a12; }
.demo[data-dtheme="light"] .dsw[data-slide] button.is-current { color: #64748b; }
.demo[data-dtheme="light"] .dsw::before { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5); }
.demo[data-dtheme="light"] .dtop__results { background: #fff; border-color: #e2e8f0; box-shadow: 0 20px 40px -14px rgba(15, 23, 42, 0.3); }
.demo[data-dtheme="light"] .dtop__cat, .demo[data-dtheme="light"] .dtop__none { color: #94a3b8; }
.demo[data-dtheme="light"] .dtop__hit { color: #0f172a; }
.demo[data-dtheme="light"] .dtop__hit small { color: #64748b; }
.demo[data-dtheme="light"] .dtop__hit:hover, .demo[data-dtheme="light"] .dtop__hit:focus-visible { background: #f1f5f9; }

/* the chart drawn over the dashboard picture */
.demo[data-dtheme="light"] .donut__cover, html[data-shots="light"] .donut__cover { fill: #fff; }
.demo[data-dtheme="light"] .donut__num, html[data-shots="light"] .donut__num { fill: #020617; }
.demo[data-dtheme="light"] .donut__lbl, html[data-shots="light"] .donut__lbl { fill: #020617; }

/* the org chart */
.demo[data-dtheme="light"] .demo__stage .orgpage { color: #020617; }
.demo[data-dtheme="light"] .orgpage__hint { color: #94a3b8; }
.demo[data-dtheme="light"] .orgpage__tools button { border-color: #d1d5db; color: #6b7280; }
.demo[data-dtheme="light"] .orgpage__tools button:hover { background: #f3f4f6; }
.demo[data-dtheme="light"] .orgpage__view { background-image: radial-gradient(#d1d5db 1px, transparent 1px); }
.demo[data-dtheme="light"] .orgpage:fullscreen { background: #f8fafc; }
.demo[data-dtheme="light"] .org-tree li::before, .demo[data-dtheme="light"] .org-tree li::after { border-top-color: #d1d5db; }
.demo[data-dtheme="light"] .org-tree li::after { border-left-color: #d1d5db; }
.demo[data-dtheme="light"] .org-tree li:last-child::before { border-right-color: #d1d5db; }
.demo[data-dtheme="light"] .org-tree ul::before { border-left-color: #d1d5db; }
.demo[data-dtheme="light"] .org-card { background: #fff; border-color: #e5e7eb; }
.demo[data-dtheme="light"] .org-card__av { background: rgba(212, 175, 55, 0.22); color: #8a7224; }
.demo[data-dtheme="light"] .org-card__name { color: #030712; }
.demo[data-dtheme="light"] .org-card__job { color: #6b7280; }
.demo[data-dtheme="light"] .org-card__dept { color: #9ca3af; }
.demo[data-dtheme="light"] .org-card__count { color: #8a7224; }

/* The switching indicator doesn't follow the theme (neither does the real app's) — nothing to override here. */

/* the pop-up phone */
.phonedemo[data-dtheme="light"] .phonedemo__backdrop { background: rgba(226, 232, 240, 0.97); }
.phonedemo[data-dtheme="light"] .phonedemo__title { color: #0f172a; }
.phonedemo[data-dtheme="light"] .phonedemo__sub, .phonedemo[data-dtheme="light"] .phonedemo__note { color: #475569; }
.phonedemo[data-dtheme="light"] .phonedemo__x { border-color: #cbd5e1; background: #fff; color: #0f172a; }
.phonedemo[data-dtheme="light"] .phonedemo__again { border-color: #cbd5e1; color: #0f172a; }
.phonedemo[data-dtheme="light"] .phonedemo__again:hover { background: rgba(15, 23, 42, 0.06); }

.brand__mark g { fill: var(--s-text); }
.brand__mark .brand__lit { fill: var(--s-lit); }

/* The header logo arrives "sewn together", once, as the page loads: the two outer strips slide in and
   meet, the centre strip grows between them and lights up, then the name is revealed left to right. */
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand__mark { overflow: visible; }
  .site-header .brand__mark rect { transform-box: fill-box; transform-origin: center; }
  .site-header .brand__l { animation: brand-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .site-header .brand__r { animation: brand-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .site-header .brand__lit { animation: brand-grow 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) 0.55s both, brand-light 0.4s ease-out 1s both; }
  .site-header .brand [data-brand="name"] { animation: brand-wipe 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.85s both; }
}
@keyframes brand-left { from { transform: translateX(-190%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes brand-right { from { transform: translateX(190%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes brand-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes brand-light { from { fill: var(--s-text); } to { fill: var(--s-lit); } }
@keyframes brand-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the light-theme rules of the desktop demo's menus and bars, also used in the phone */
.mapp[data-dtheme="light"] .fnav__head { background: #fff; border-bottom-color: #e2e8f0; }
.mapp[data-dtheme="light"] .fnav__name { color: #020617; }
.mapp[data-dtheme="light"] .fnav__list { scrollbar-color: #cbd5e1 transparent; }
.mapp[data-dtheme="light"] .fnav__glabel { color: #64748b; }
.mapp[data-dtheme="light"] .fnav__chev, .mapp[data-dtheme="light"] .fnav__icon { color: #94a3b8; }
.mapp[data-dtheme="light"] .fnav__item { color: #334155; }
.mapp[data-dtheme="light"] .fnav__item:hover { background: rgba(15, 23, 42, 0.05); }
.mapp[data-dtheme="light"] .fnav__item[aria-current="page"] { background: #f1f5f9; color: #bf9e32; }
.mapp[data-dtheme="light"] .fnav__item[aria-current="page"] .fnav__icon { color: #bf9e32; }
.mapp[data-dtheme="light"] .fnav__badge--primary { --c: #bf9e32; }
.mapp[data-dtheme="light"] .fnav__badge--warning { --c: #d97706; }
.mapp[data-dtheme="light"] .fnav__badge--danger { --c: #dc2626; }
.mapp[data-dtheme="light"] .pnav { background: #fff; }
.mapp[data-dtheme="light"] .pnav__name { color: #0b1120; }
.mapp[data-dtheme="light"] .pnav__scroll { scrollbar-color: #d9cf9d transparent; }
.mapp[data-dtheme="light"] .pnav__item { color: #64748b; }
.mapp[data-dtheme="light"] .pnav__item:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
.mapp[data-dtheme="light"] .pnav__item[aria-current="page"] { background: rgba(212, 175, 55, 0.15); color: #8a7224; }
.mapp[data-dtheme="light"] .pnav__more { color: #94a3b8; }
.mapp[data-dtheme="light"] .dtop--admin { background: rgba(255, 255, 255, 0.92); border-bottom-color: #e2e8f0; }
.mapp[data-dtheme="light"] .dtop--portal { background: #fff; border-bottom-color: #edf0f5; }
.mapp[data-dtheme="light"] .dtop__search { background: #fff; border-color: rgba(2, 6, 23, 0.1); color: #64748b; }
.mapp[data-dtheme="light"] .dtop__search input { color: #020617; }
.mapp[data-dtheme="light"] .dtop__search input::placeholder { color: #94a3b8; }
.mapp[data-dtheme="light"] .dtop__bell { color: #94a3b8; }
.mapp[data-dtheme="light"] .dtop__avatar { background: rgba(212, 175, 55, 0.2); color: #8a7224; }
.mapp[data-dtheme="light"] .dsw { border-color: rgba(148, 163, 184, 0.3); background: rgba(148, 163, 184, 0.1); }
.mapp[data-dtheme="light"] .dsw button { color: #64748b; }
.mapp[data-dtheme="light"] .dsw button:hover { color: #0f172a; }
.mapp[data-dtheme="light"] .dsw button.is-current, .mapp[data-dtheme="light"] .dsw[data-slide="admin"] [data-goto="admin"], .mapp[data-dtheme="light"] .dsw[data-slide="portal"] [data-goto="portal"] { color: #6f5a12; }
.mapp[data-dtheme="light"] .dsw[data-slide] button.is-current { color: #64748b; }
.mapp[data-dtheme="light"] .dsw::before { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.5); }
.mapp[data-dtheme="light"] .dtop__results { background: #fff; border-color: #e2e8f0; box-shadow: 0 20px 40px -14px rgba(15, 23, 42, 0.3); }
.mapp[data-dtheme="light"] .dtop__cat, .mapp[data-dtheme="light"] .dtop__none { color: #94a3b8; }
.mapp[data-dtheme="light"] .dtop__hit { color: #0f172a; }
.mapp[data-dtheme="light"] .dtop__hit small { color: #64748b; }
.mapp[data-dtheme="light"] .dtop__hit:hover, .mapp[data-dtheme="light"] .dtop__hit:focus-visible { background: #f1f5f9; }

/* ---------- The product on a phone (a phone-sized screen opens this, not the big demo) ---------- */
.mapp .phonedemo__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.mapp .phonedemo__phone { align-self: auto; --w: min(94vw, calc((100vh - 126px) * 0.4757)); --w: min(94vw, calc((100dvh - 126px) * 0.4757)); }
.mapp .phonedemo__note { min-height: 2.8em; max-width: 24rem; margin: 0; text-align: center; font-size: 0.84rem; }
.mapp .device { --ph-accent: #d4af37; }
.mapp .device[data-dtheme="light"] { --ph-accent: #8a7224; }
.device[data-mode="admin"] { --ph-bar: #0f172a; --ph-page: #020617; --ph-line: #1c1f2e; --ph-card: #0f172a; --ph-card-b: #1c2436; --ph-muted: #94a3b8; --ph-faint: #64748b; --ph-text: #fff; }
.device[data-dtheme="light"][data-mode="admin"] { --ph-bar: #fff; --ph-page: #f8fafc; --ph-line: #e5e7ea; --ph-card: #fff; --ph-card-b: #e2e8f0; --ph-muted: #64748b; --ph-faint: #94a3b8; --ph-text: #020617; }
:where(.mp) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ph-page); --bar-h: 56px; }
.mp[data-mode="admin"] { --bar-h: 64px; }
.mp__scale { position: absolute; left: 0; top: 0; width: 390px; height: 700px; transform-origin: 0 0; transform: scale(var(--mp-k, 0.8)); --u: 1px; color: var(--ph-text); font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; text-align: left; }
.mp__scale p, .mp__scale h3 { margin: 0; }
.mp .ph-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 56px; }
.mp .ph-bar[hidden], .mp-abar[hidden] { display: none; }
.mp .ph-tool--sun { position: relative; }
.mp .ph-tool--sun .mp-moon { display: none; width: 20px; height: 20px; }
.device[data-dtheme="light"] .mp .ph-tool--sun svg:first-child { display: none; }
.device[data-dtheme="light"] .mp .ph-tool--sun .mp-moon { display: block; }
.mp-abar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--ph-bar); border-bottom: 1px solid var(--ph-line); color: var(--ph-muted); }
.mp-abar__menu { display: grid; place-items: center; width: 36px; height: 36px; flex: none; margin-left: -4px; }
.mp-abar__menu svg { width: 24px; height: 24px; }
.mp-abar__searchwrap { flex: 1; min-width: 0; }
.mp-abar__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ph-card-b); background: var(--ph-card); color: var(--ph-faint); font-size: 14px; }
.mp-abar__search svg { width: 20px; height: 20px; flex: none; }
.mp-abar__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ph-text); font: inherit; font-size: 16px; }
.mp-abar__search input::placeholder { color: var(--ph-faint); }
.mp-abar__search:focus-within { border-color: rgba(212, 175, 55, 0.6); }
.mp-abar__bell { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--ph-faint); }
.mp-abar__bell svg { width: 24px; height: 24px; }
.mp-abar__avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #0f172a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 700; }
.mp .dtop__results { position: absolute; z-index: 25; top: calc(100% + 6px); left: 12px; right: 12px; width: auto; }
.mp__body { position: absolute; left: 0; right: 0; bottom: 0; top: var(--bar-h); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.mp__body::-webkit-scrollbar { display: none; }
.mp__body img { display: block; width: 390px; height: auto; max-width: none; }
.mp__pad { height: 44px; }
.mp__body.ph-body { position: absolute; padding-bottom: 60px; }
.mp .ph-kyc { width: 100%; text-align: left; }
.mp .ph-kyc--gold { border-color: rgba(212, 175, 55, 0.32); background: rgba(212, 175, 55, 0.1); color: var(--ph-accent); }
.mp .ph-viewall { color: var(--ph-accent); }
.mp__scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.mp.is-drawer .mp__scrim { opacity: 1; pointer-events: auto; }
.mp__drawer { position: absolute; z-index: 21; top: 0; bottom: 0; left: 0; width: 328px; max-width: 88%; display: flex; flex-direction: column; overflow: hidden; transform: translateX(-104%); transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 24px 0 60px -10px rgba(0, 0, 0, 0.6); background: #0f172a; }
.mp__drawer[hidden] { display: none; }
.mp__drawer[data-pane="portal"] { background: #060a14; }
.mp.is-drawer .mp__drawer { transform: none; }
.mp__drawer .pnav, .mp__drawer .fnav { min-height: 0; }
.mp__drawer .fnav__head { height: 64px; padding: 0 16px; }
.mp__drawer .pnav__head { padding: 16px 16px 10px; }
.mp__x { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; color: #94a3b8; }
.mp__x svg { width: 22px; height: 22px; }
.mp__sw { flex: none; padding: 8px 16px 6px; }
.mp__sw .dsw { width: auto; }
.mp__sw .dsw button { padding: 9px 10px; font-size: 14px; }
.mp__drawer .fnav__list { padding: 8px 16px 24px; }
.mp__drawer .fnav__group { margin-top: 14px; }
.mp__acct { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: #64748b; }
.mp__acct-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(212, 175, 55, 0.18); color: #d4af37; font-size: 12px; font-weight: 700; flex: none; }
.mp__acct-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp__acct-t b { color: #e2e8f0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mp__acct-t small { color: #64748b; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp__acct svg { width: 18px; height: 18px; flex: none; }
.mp .dswitch { z-index: 40; }
.mp .dswitch__toast { z-index: 41; }
/* light theme */
.mapp[data-dtheme="light"] .mp__scrim { background: rgba(15, 23, 42, 0.32); }
.mapp[data-dtheme="light"] .mp__drawer, .mapp[data-dtheme="light"] .mp__drawer[data-pane="portal"] { background: #fff; box-shadow: 24px 0 60px -10px rgba(15, 23, 42, 0.35); }
.mapp[data-dtheme="light"] .mp-abar__avatar { background: #0f172a; box-shadow: none; }
.mapp[data-dtheme="light"] .mp__acct { border-top-color: #edf0f5; }
.mapp[data-dtheme="light"] .mp__acct-t b { color: #0f172a; }
.mapp[data-dtheme="light"] .mp__acct-av { color: #8a7224; }
.mapp[data-dtheme="light"] .mp__x { color: #64748b; }
.mp .dswitch__toast { white-space: nowrap; }

/* the phone on the page scrolls with a swipe or the wheel, without opening it; a tap opens it */
.clockfig__phone .ph-body { touch-action: pan-y; }

/* ---------- The solution, told as a story you steer ---------- */
.st__fallback { margin: 0 0 20px; padding-left: 1.1rem; color: var(--muted); }
.js .st__fallback { display: none; }
.st__rail { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0 0 30px; padding: 4px 0 0; --p: 0; }
.js .st__rail { display: grid; }
.st__rail::before, .st__rail::after { content: ""; position: absolute; top: 25px; left: calc(100% / 14); right: calc(100% / 14); height: 2px; background: var(--line); }
.st__rail::after { right: auto; width: calc((100% - 100% / 7) * var(--p)); background: var(--accent-text); transition: width 0.6s ease; }
.st__rail li { position: relative; z-index: 1; }
.st__rail button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 0.8rem var(--font-body); color: var(--muted); text-align: center; }
.st__rail button:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 8px; }
.st__dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); transition: all 0.35s ease; }
.st__dot .icon { width: 20px; height: 20px; }
.st__rail li.done .st__dot { background: var(--accent-text); border-color: var(--accent-text); color: var(--bg-alt); }
.st__rail li.done button, .st__rail li.now button { color: var(--text); }
.st__rail li.now .st__dot { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); }
.st__rail button:hover .st__dot { transform: translateY(-2px); border-color: var(--accent-text); }
.st__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; min-height: 470px; }
.st__panel { transition: opacity 0.35s ease, transform 0.35s ease; }
.st__panel.out { opacity: 0; transform: translateY(10px); }
.st__when { display: inline-flex; align-items: center; gap: 8px; font: 600 0.8rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.st__who { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #d4af37; color: #111827; font: 700 10px var(--font-body); }
.st__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.1; margin: 12px 0 14px; letter-spacing: -0.02em; color: var(--text); }
.st__text { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin: 0 0 18px; max-width: 34rem; }
.st__usual { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 11px 14px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); font-size: 0.95rem; max-width: 34rem; color: var(--muted); }
.st__usual b { font: 700 0.7rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; padding-top: 3px; color: var(--text); }
.st__ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st__ctl button, .st__btn { font: inherit; font-weight: 600; font-size: 0.92rem; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.st__ctl .next { background: var(--hivis); border-color: var(--hivis); color: var(--hivis-ink); font-weight: 700; }
.st__ctl button[disabled] { opacity: 0.4; cursor: default; }
.st__count { flex: 1 1 100%; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.st__count i { display: block; height: 100%; width: 0; background: var(--accent-text); }
.st__right { display: grid; gap: 14px; }
.st__person { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.st__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #d4af37; color: #111827; font: 700 15px var(--font-body); flex: none; }
.st__nm { margin: 0; font: 700 1rem var(--font-display); color: var(--text); }
.st__rl { margin: 0; color: var(--muted); font-size: 0.85rem; }
.st__pill { margin-left: auto; padding: 5px 14px; border-radius: 999px; font: 700 0.82rem var(--font-body); background: var(--hivis); color: var(--hivis-ink); white-space: nowrap; }
.st__evs { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; min-height: 232px; align-content: start; }
.st__ev { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); animation: st-in 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
.st__t { font: 600 0.72rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.st__b { display: flex; flex-direction: column; gap: 3px; color: var(--text); }
.st__b > span:last-child { font-size: 1rem; line-height: 1.4; }
.st__actor { align-self: flex-start; font: 700 0.66rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.st__actor--sys { background: color-mix(in srgb, var(--accent-text) 16%, transparent); color: var(--accent-text); }
.st__actor--hr { background: rgba(59, 130, 246, 0.16); color: #3b82f6; }
.st__actor--ng { background: rgba(193, 154, 43, 0.2); color: #b08a1c; }
.st__actor--mgr { background: rgba(168, 85, 247, 0.16); color: #9d4edd; }
@keyframes st-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* where HR sees it: a picture of the real screen with Ngozi marked; click to enlarge */
.st__see { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: zoom-in; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.st__see:hover, .st__see:focus-visible { border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 25%, transparent); transform: translateY(-2px); outline: none; }
.st__thumb { position: relative; display: block; aspect-ratio: 1120 / 834; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.st__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 0.5s ease; }
.st__thumb img.on { opacity: 1; }
.st__zoom { position: absolute; z-index: 3; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(11, 20, 36, 0.88); color: #eaf0f8; font: 600 0.66rem var(--font-mono); }
.st__zoom .icon { width: 12px; height: 12px; }
.st__seetx { display: grid; gap: 4px; }
.st__seetx b { font: 700 0.7rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.st__seetx > span { font-size: 0.95rem; color: var(--text); line-height: 1.45; }
.st__seetx em { font-style: normal; font-size: 0.82rem; color: var(--muted); }
/* the ending */
.st__end { display: none; text-align: center; padding: 30px 10px 10px; }
.steer.is-end .st__grid, .steer.is-end .st__rail { display: none; }
.steer.is-end .st__end { display: block; }
.st__end h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 12px; color: var(--text); }
.st__end p { color: var(--muted); max-width: 38rem; margin: 0 auto 22px; font-size: 1.08rem; }
.st__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 46rem; margin: 0 auto 26px; list-style: none; padding: 0; }
.st__sum li { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.st__sum b { display: block; font: 700 1.5rem var(--font-display); color: var(--accent-text); }
.st__sum span { color: var(--muted); font-size: 0.92rem; }
.st__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 860px) {
  .st__grid { grid-template-columns: 1fr; min-height: 0; margin-top: 18px; }
  .st__rail { gap: 0; margin-bottom: 14px; }
  .st__rail .lbl { display: none; } /* the current chapter's name is already in .st__when below; showing it again here just overlapped it */
  .st__dot { width: 36px; height: 36px; }
  .st__rail::before, .st__rail::after { top: 21px; }
  .st__see { grid-template-columns: 130px 1fr; }
  .st__sum { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .st__ev, .st__panel, .st__thumb img { animation: none !important; transition: none !important; } }
/* The picture is taller than the frame; scroll it to see the rest of the dashboard, the same way the phone next to it scrolls. Clicking still opens the full interactive demo. */
.hero-shot .shot { aspect-ratio: 1120 / 834; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; }
.hero-shot .shot::-webkit-scrollbar { display: none; }


/* ---------- The data diagram: side by side, mono-labelled, the vendor's wall porous and the Keelsum wall sealed.
   Colours come from the diagram's own theme-following tokens (--dg-*), so this follows light/dark like the rest of the page. ---------- */
.dd2 { width: 100%; opacity: 0; transform: translateY(14px); animation: dd2-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes dd2-in { to { opacity: 1; transform: none; } }
.dd2__split { position: relative; display: flex; border-radius: 18px; border: 1.5px solid var(--dg-line); overflow: hidden; }
.dd2__half { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px 18px; position: relative; text-align: center; }
.dd2__half--warn { background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--dg-warn) 9%, transparent), transparent 60%); }
.dd2__half--ok { background: radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--dg-ok) 10%, transparent), transparent 60%); }
.dd2__eyebrow { margin: 0; font: 700 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; }
.dd2__eyebrow--warn { color: var(--dg-warn); }
.dd2__eyebrow--ok { color: var(--dg-ok); display: flex; align-items: center; gap: 7px; }
.dd2__eyebrow--ok::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--dg-ok); }
.dd2__box { width: 100%; max-width: 172px; border-radius: 12px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease; }
.dd2__box--warn { border: 1.5px dashed var(--dg-warn); background: color-mix(in srgb, var(--dg-warn) 5%, transparent); color: var(--dg-warn); }
.dd2__box--neutral { border: 1.5px solid var(--dg-box-line); background: var(--dg-box); color: var(--dg-muted); }
.dd2__box--warn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--dg-warn) 55%, transparent); }
.dd2__box--neutral:hover { transform: translateY(-3px); border-color: var(--dg-ok); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--dg-ok) 45%, transparent); }
.dd2__box svg { width: 24px; height: 24px; }
.dd2__box span { font-size: 13.5px; font-weight: 600; color: var(--dg-text); }
.dd2__connector { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Just the track and the moving dot (no fixed checkpoint icon) — nothing here can look off-centre, since there's no glyph to misalign. */
.dd2__track { width: 1.5px; height: 58px; }
.dd2__track--warn { background: repeating-linear-gradient(180deg, var(--dg-warn) 0 4px, transparent 4px 8px); }
.dd2__track--ok { background: var(--dg-ok); box-shadow: 0 0 8px color-mix(in srgb, var(--dg-ok) 55%, transparent); }
.dd2__conn-cap { margin: 0; font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.dd2__conn-cap--warn { color: var(--dg-warn); }
.dd2__conn-cap--ok { color: var(--dg-ok); }
.dd2__endpoint { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dd2__cloud-wrap { position: relative; }
.dd2__cloud { width: 44px; height: 32px; color: var(--dg-warn); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dg-warn) 35%, transparent)); transition: color 0.2s ease; }
.dd2__cloud.is-hit { color: var(--dg-danger); }
.dd2__warn-chip { position: absolute; top: -9px; right: -11px; width: 18px; height: 18px; border-radius: 50%; background: var(--dg-box); border: 1px solid var(--dg-danger); display: grid; place-items: center; opacity: 0; }
.dd2__warn-chip.is-on { opacity: 1; animation: dd2-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), dd2-beacon 1.1s ease-in-out 0.32s infinite; }
.dd2__warn-chip svg { width: 10px; height: 10px; color: var(--dg-danger); }
.dd2__server-wrap { position: relative; display: inline-block; }
.dd2__server { width: 28px; height: 28px; color: var(--dg-ok); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dg-ok) 45%, transparent)); }
.dd2__server.idle-glow { animation: dd2-idle-glow 2.8s ease-in-out infinite; }
/* Each rack unit gets two lights, like real server hardware: the status light (drawn in the icon's own SVG, its
   colour from currentColor) and a second, faster-blinking light in the same colour, both out of sync with each
   other and with the glow above. The second lights are plain HTML dots overlaid at the SVG's own light positions
   (9.8,7.5 and 9.8,16.5 in its 24x24 viewBox, as a percentage) rather than more circles inside the SVG — a second
   explicit fill inside this particular svg (root has fill="none") wasn't painting its own colour reliably. */
.dd2__server-led { animation: dd2-beacon 1.7s ease-in-out infinite; }
.dd2__server-led--b { animation-delay: 0.55s; }
.dd2__server-net { position: absolute; left: 40.83%; top: 31.25%; transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background: var(--dg-ok); box-shadow: 0 0 4px var(--dg-ok); animation: dd2-beacon 0.9s ease-in-out infinite; animation-delay: 0.2s; pointer-events: none; }
.dd2__server-net--b { top: 68.75%; animation-delay: 0.65s; }
.dd2__label { font-size: 13.5px; font-weight: 600; color: var(--dg-text); }
.dd2__sub { font-size: 9.5px; margin-top: -3px; opacity: 0; transform: translateY(-3px); transition: opacity 0.35s ease, transform 0.35s ease; }
.dd2__sub.active { opacity: 1; transform: none; }
.dd2__sub--warn { color: var(--dg-warn); }
.dd2__sub--ok { color: var(--dg-ok); }
.dd2__pill { margin: 4px 0 0; padding: 6px 13px; border-radius: 999px; font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; opacity: 0.4; transform: scale(0.96); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
.dd2__pill.active { opacity: 1; transform: none; }
.dd2__pill--warn { background: color-mix(in srgb, var(--dg-warn) 12%, transparent); border: 1px solid var(--dg-warn); color: var(--dg-warn); }
.dd2__pill--warn.active { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--dg-warn) 60%, transparent); }
.dd2__pill--ok { background: color-mix(in srgb, var(--dg-ok) 12%, transparent); border: 1px solid var(--dg-ok); color: var(--dg-ok); }
.dd2__pill--ok.active { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--dg-ok) 60%, transparent); }
.dd2__divider { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%) scaleY(0); transform-origin: top; background: linear-gradient(to bottom, transparent, var(--dg-line) 15%, var(--dg-line) 85%, transparent); z-index: 1; animation: dd2-div-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards; }
.dd2__vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 40px; height: 40px; border-radius: 50%; background: var(--s-bg-data); border: 1px solid var(--dg-line); display: grid; place-items: center; font: 600 9.5px var(--font-mono); color: var(--dg-muted); z-index: 2; animation: dd2-vs-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards; }
/* left/top (set in JS) are the exact centre point the dot should sit on; this centres the dot on that point
   regardless of its own box size, instead of the caller having to subtract half its width by hand. */
.dd2__dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.dd2__dot--warn { background: var(--dg-warn); box-shadow: 0 0 6px var(--dg-warn); }
.dd2__dot--ok { background: var(--dg-ok); box-shadow: 0 0 6px var(--dg-ok); }
.dd2__caption { margin: 16px 0 0; min-height: 1.4em; font-size: 0.95rem; text-align: center; color: var(--s-sub); transition: opacity 0.25s ease, transform 0.25s ease; }
.dd2__caption.out { opacity: 0; transform: translateY(3px); }
.dd2__caption[data-tone="danger"] { color: var(--dg-danger); }
.dd2__caption[data-tone="ok"] { color: var(--dg-ok); }
.dd2__progress { width: 180px; height: 2px; margin: 8px auto 0; border-radius: 2px; background: color-mix(in srgb, var(--dg-text) 10%, transparent); overflow: hidden; }
.dd2__progress i { display: block; height: 100%; width: 0%; background: var(--dg-muted); }
.dd2__progress[data-tone="danger"] i { background: var(--dg-danger); }
.dd2__progress[data-tone="ok"] i { background: var(--dg-ok); }
.dd2__progress[hidden] { visibility: hidden; }
@keyframes dd2-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes dd2-beacon { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes dd2-idle-glow { 0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dg-ok) 40%, transparent)); } 50% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--dg-ok) 85%, transparent)); } }
@keyframes dd2-div-in { to { transform: translateX(-50%) scaleY(1); } }
@keyframes dd2-vs-in { to { transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 620px) {
  .dd2__split { flex-direction: column; }
  .dd2__divider, .dd2__vs { display: none; }
  .dd2__half--warn { border-bottom: 1.5px solid var(--dg-line); }
  .dd2__half { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd2 { animation: none; opacity: 1; transform: none; }
  .dd2__divider, .dd2__vs { animation: none; transform: translateX(-50%) scaleY(1); }
  .dd2__vs { transform: translate(-50%, -50%) scale(1); }
  .dd2__warn-chip.is-on, .dd2__server.idle-glow, .dd2__server-led, .dd2__server-net { animation: none; }
  .dd2__warn-chip.is-on { opacity: 1; }
}