/* Nonstop Staff · richting A5 "Eén telefoon, één avond": dark, filmic, large headings with a serif accent, one accent
   colour per branch group (set on <body style="--accent">). System fonts only: nothing is loaded from third parties. */
:root {
  --bg: #07080a;
  --bg-2: #0a0b0e;
  --calc-bg: #0c0e11;
  --surface: #0f1114;
  --surface-2: #14171b;
  --surface-3: #1a1d22;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.22);
  --text: #f3f4f6;
  --muted: #a4a9b2;
  --dim: #858b95;
  --accent: #d4ff4f;
  --accent-ink: #0b0d10;
  --cool: #7cd4ff;
  --warn: #ffb547;
  --bad: #ff7a6b;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --g: 16px;
  --maxw: 1240px;
  --hdr: 60px;
  color-scheme: dark;
}
@media (min-width: 768px) {
  :root {
    --g: 32px;
    --hdr: 68px;
  }
}
@media (min-width: 1200px) {
  :root {
    --g: 40px;
  }
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-width: 320px;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--g);
}
.wrap.narrow {
  max-width: 760px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 14px;
}
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.04em;
}
.soft {
  color: var(--muted);
}
.ph {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--warn);
  background: rgba(255, 181, 71, 0.1);
  border: 1px dashed rgba(255, 181, 71, 0.5);
  border-radius: 6px;
  padding: 0 6px;
}
.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}

/* ---------- type ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.kicker.nodot::before {
  display: none;
}
.kicker a {
  text-decoration: none;
}
.kicker a:hover {
  color: var(--text);
}
.hero-h,
.h2 {
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1.02;
  text-wrap: balance;
}
.hero-h {
  font-size: clamp(34px, 5.5vw, 84px);
  line-height: 0.98;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.h2 {
  font-size: clamp(30px, 4.6vw, 62px);
  overflow-wrap: anywhere;
}
.lead {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 62ch;
}
.sec {
  position: relative;
  padding: clamp(44px, 5.5vw, 84px) 0;
}
.sec.first {
  padding-top: calc(var(--hdr) + clamp(32px, 5vw, 64px));
}
.sec-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 48px);
  max-width: 860px;
}
.sim-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(7, 8, 10, 0.6);
}
.sim-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cool);
}
.after {
  margin-top: 28px;
}

/* ---------- buttons ---------- */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 10px 24px;
  border-radius: 999px;
  font: 500 15.5px/1.2 var(--font);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.btn .arr {
  display: inline-block;
  transition: transform 0.45s var(--e-out);
}
.btn:hover .arr {
  transform: translateX(4px);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 32px -14px rgba(0, 0, 0, 0.9);
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-3);
}
.btn-block {
  width: 100%;
}
.btn-sm {
  --h: 44px;
  padding: 8px 18px;
  font-size: 14.5px;
}
.btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.cta-stack {
  display: inline-grid;
  gap: 6px;
  justify-items: start;
}
.cta-stack small {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
  padding-left: 6px;
}

/* ---------- concept banner, language bar, welcome ---------- */
.concept {
  background: rgba(255, 181, 71, 0.12);
  color: var(--warn);
  text-align: center;
  font: 13px/1.4 var(--mono);
  padding: 8px var(--g);
}
.langbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 14.5px;
  padding: 10px var(--g);
}
.langbar a {
  text-decoration: none;
  color: var(--muted);
}
.langbar b {
  color: var(--accent);
  font-weight: 600;
}
.welcome {
  margin: 12px auto 0;
  max-width: var(--maxw);
  padding: 0 var(--g);
  font-size: 15px;
}
.welcome b {
  display: inline-block;
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 7px 10px;
  border-radius: 999px;
  margin-right: 8px;
}

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--hdr);
  background: rgba(7, 8, 10, 0.82);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}
.hdr-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: calc(var(--maxw) + 80px);
  margin: 0 auto;
  padding: 0 var(--g);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 16.5px;
  min-height: 44px;
  color: var(--text);
}
.brand svg {
  width: 26px;
  height: 26px;
  color: var(--accent);
  flex: none;
}
.nav {
  display: none;
  gap: 4px;
}
.nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14.5px;
  padding: 10px 12px;
  border-radius: 999px;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.hdr-r {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdr-r .lang {
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
}
.hdr-r .lang:hover {
  color: var(--text);
  border-color: var(--line-3);
}
.hdr-r .btn-primary {
  display: none;
}
.mnav {
  position: relative;
}
.mnav summary {
  list-style: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mnav summary::-webkit-details-marker {
  display: none;
}
.mnav summary i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.mnav summary i::before,
.mnav summary i::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}
.mnav summary i::before {
  top: -5px;
}
.mnav summary i::after {
  top: 5px;
}
.mnav[open] summary i {
  background: transparent;
}
.mnav[open] summary i::before {
  transform: translateY(5px) rotate(45deg);
}
.mnav[open] summary i::after {
  transform: translateY(-5px) rotate(-45deg);
}
.mnav nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 2 * var(--g)));
  background: rgba(15, 17, 20, 0.98);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 8px;
  display: grid;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
}
.mnav nav a {
  text-decoration: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
}
.mnav nav a:hover {
  background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 1000px) {
  .nav {
    display: flex;
  }
  .mnav {
    display: none;
  }
  .hdr-r .btn-primary {
    display: inline-flex;
  }
}

/* ---------- stage (hero + phone) ---------- */
.stage {
  position: relative;
  padding: clamp(28px, 5vw, 72px) 0 clamp(32px, 5vw, 64px);
  background: radial-gradient(120% 70% at 70% 0%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 60%);
}
.st-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--g);
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .st-in {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}
.hero-copy {
  display: grid;
  gap: 22px;
  align-content: center;
}
.hero-sub {
  font-size: clamp(16.5px, 1.3vw, 19px);
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-top: 4px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--dim);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trust svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex: none;
}
.st-dev {
  display: grid;
  justify-items: center;
}

/* ---------- the phone ---------- */
.phone-wrap {
  --pw: min(320px, 84vw);
  width: var(--pw);
  display: grid;
  gap: 14px;
  justify-items: center;
  position: relative;
}
.phone {
  width: var(--pw);
  height: calc(var(--pw) * 2.05);
  border-radius: calc(var(--pw) * 0.158);
  padding: calc(var(--pw) * 0.03);
  background: linear-gradient(155deg, #43464d 0%, #1a1c20 14%, #0d0e11 48%, #17191d 84%, #3b3e45 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 calc(var(--pw) * 0.011) #060708,
    0 60px 100px -50px rgba(0, 0, 0, 1),
    0 30px 50px -30px rgba(0, 0, 0, 0.85);
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * 0.13);
  overflow: hidden;
  background: #050607;
  font-size: calc(var(--pw) * 0.045);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.sbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.75em 0;
  font-size: 0.8em;
  font-weight: 600;
  height: 3em;
}
.sbar .ic {
  font-size: 0.7em;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.v {
  position: absolute;
  inset: 3.2em 1em 1em;
  display: flex;
  flex-direction: column;
}
.c-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35em;
}
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.64em;
  padding: 0.42em 0.8em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-weight: 500;
}
.c-pill i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.c-time {
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--muted);
}
.c-who {
  margin-top: 0.9em;
}
.c-who b {
  display: block;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.c-who span {
  font-size: 0.7em;
  color: var(--muted);
}
.c-wave {
  display: flex;
  align-items: center;
  gap: 0.17em;
  height: 2.2em;
  margin-top: 0.7em;
}
.c-wave i {
  flex: 1;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.8;
}
.c-tr,
.wa-tr {
  display: flex;
  flex-direction: column;
  gap: 0.42em;
  margin-top: 0.8em;
  overflow: hidden;
  flex: 1;
}
.b {
  max-width: 88%;
  padding: 0.5em 0.72em 0.56em;
  border-radius: 1em;
  font-size: 0.76em;
  line-height: 1.32;
}
.b small {
  display: block;
  font-family: var(--mono);
  font-size: 0.68em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.18em;
  color: var(--dim);
}
.b.ai {
  align-self: flex-start;
  background: #1a1d22;
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.3em;
}
.b.ai small {
  color: var(--accent);
}
.b.me {
  align-self: flex-end;
  background: rgba(124, 212, 255, 0.12);
  border: 1px solid rgba(124, 212, 255, 0.24);
  border-bottom-right-radius: 0.3em;
}
.b.me small {
  color: var(--cool);
}
.v-chat .b.ai {
  background: #143426;
  border-color: rgba(255, 255, 255, 0.07);
}
.v-chat .b.ai small {
  margin: 0.3em 0 0;
  text-align: right;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.03em;
}
.wa-h {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 0 0.6em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wa-av {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: #20252b;
  display: grid;
  place-items: center;
  font-size: 0.7em;
  font-weight: 600;
  color: #c9ced6;
  flex: none;
}
.wa-h b {
  display: block;
  font-size: 0.78em;
  font-weight: 600;
}
.wa-h small {
  font-size: 0.6em;
  color: var(--muted);
}
.p-result {
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
  max-width: 34ch;
}
.p-result span {
  color: var(--accent);
}

/* ---------- branch chooser ---------- */
.groups {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.group {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, #111318, #0c0e11);
  display: grid;
  gap: 16px;
  align-content: start;
}
.group h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.group h3 .n {
  font: 400 12px var(--mono);
  color: var(--accent);
  letter-spacing: 0.08em;
}
.br-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.br-b {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition:
    color 0.25s,
    background-color 0.25s,
    border-color 0.25s;
}
.br-b:hover {
  color: var(--text);
  border-color: var(--accent);
}
[data-group='trades'] {
  --accent: #d4ff4f;
}
[data-group='automotive'] {
  --accent: #ffa94d;
}
[data-group='hospitality'] {
  --accent: #ff7a6b;
}
[data-group='lodging'] {
  --accent: #e9c86f;
}
[data-group='wellness'] {
  --accent: #e59bff;
}
[data-group='business'] {
  --accent: #7cd4ff;
}
[data-group='experts'] {
  --accent: #5fe6cf;
}
[data-group='retail'] {
  --accent: #6ea2ff;
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  gap: 8px;
}
.step {
  position: relative;
  padding: 0 0 30px 64px;
}
.step .node {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg);
  display: grid;
  place-items: center;
  font: 13px var(--mono);
  color: var(--accent);
}
.step h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-top: 9px;
}
.step p {
  font-size: 15.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
  max-width: 44ch;
}
@media (min-width: 960px) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
  .step {
    padding: 64px 0 0;
  }
  .step h3 {
    padding-top: 0;
  }
}

/* ---------- services ---------- */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
.st::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.st.live {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.st.building {
  color: var(--warn);
  border-color: rgba(255, 181, 71, 0.35);
}
.svc-compact {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .svc-compact {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
@media (min-width: 1040px) {
  .svc-compact {
    grid-template-columns: repeat(3, 1fr);
  }
}
.svc-compact li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.svc {
  display: grid;
  border-top: 1px solid var(--line);
}
.svc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.svc-row b {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.svc-row p {
  font-size: 15px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 60ch;
}
.svc-note {
  color: var(--warn) !important;
}
.svc-groups {
  display: grid;
  gap: 32px;
}
@media (min-width: 960px) {
  .svc-groups {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
.svc-groups h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag {
  display: inline-block;
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 6px 9px;
  border-radius: 999px;
}
.svc-row details {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.svc-row summary {
  cursor: pointer;
  color: var(--text);
}
.gov {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-top: 8px;
}
.gov dt {
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 3px;
}
.dept {
  margin-top: clamp(36px, 5vw, 56px);
}
.dept h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.letter {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font: 600 14px var(--mono);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--accent);
  flex: none;
}
.dept > .muted {
  margin-bottom: 14px;
}

/* ---------- calculator ---------- */
.calc {
  background: linear-gradient(
    180deg,
    rgba(12, 14, 17, 0) 0,
    var(--calc-bg) 160px,
    var(--calc-bg) calc(100% - 160px),
    rgba(12, 14, 17, 0) 100%
  );
}
.calc-grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .calc-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: start;
  }
}
.inputs {
  border-top: 1px solid var(--line);
}
.inp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.inp-row dt {
  font-size: 15.5px;
}
.inp-row dd {
  font-family: var(--mono);
  font-size: 15px;
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.calc-out {
  position: relative;
  border-radius: 30px;
  background: linear-gradient(180deg, #13161a, #0d0f12);
  border: 1px solid var(--line-2);
  padding: clamp(24px, 4vw, 44px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 50px 100px -50px rgba(0, 0, 0, 1);
  overflow: hidden;
  display: grid;
  gap: 14px;
}
.co-k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.odo {
  font-weight: 600;
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: -0.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.co-per {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--muted);
  max-width: 32ch;
}
.co-f {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.co-be {
  font-size: 15.5px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.disc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dim);
}

/* ---------- scan teaser ---------- */
.scan-t,
.demo-t {
  position: relative;
  border-radius: 32px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #121418, #0b0c0f);
  padding: clamp(24px, 5vw, 56px);
  display: grid;
  gap: 32px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 60px 120px -60px rgba(0, 0, 0, 1);
}
.scan-t .sec-head,
.demo-t .sec-head {
  margin-bottom: 20px;
}
@media (min-width: 960px) {
  .scan-t,
  .demo-t {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
  }
}
.stl {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.stl li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0a0b0e;
  font-size: 15px;
}
.stl svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}
.stl b {
  font-weight: 500;
}
.stl .extra {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.num-card {
  border-radius: 22px;
  border: 1px solid var(--line-2);
  background: #0a0b0e;
  padding: 24px;
  display: grid;
  gap: 10px;
}
.num-card .big {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.num-card .big a {
  text-decoration: none;
  color: var(--accent);
}

/* ---------- packages (branch pages; prices on request) ---------- */
.pk-cta {
  margin: -8px 0 clamp(24px, 3vw, 36px);
}
.pr-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 960px) {
  .pr-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
  }
}
.plan {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #121418, #0c0e11);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.plan.hot {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), rgba(0, 0, 0, 0) 38%),
    linear-gradient(180deg, #121418, #0c0e11);
}
.badge {
  position: absolute;
  top: 24px;
  right: 22px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 6px 10px;
  border-radius: 999px;
}
.plan h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.plan .svcs {
  font: 12px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: -8px;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.price .from,
.price .per {
  color: var(--muted);
  font-size: 15px;
}
.price .amt {
  font-size: clamp(42px, 4.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}
.price .amt.sm {
  font-size: clamp(28px, 3vw, 36px);
}
.setup {
  color: var(--muted);
  font-size: 15px;
  margin-top: -4px;
}
.setup strong {
  color: var(--text);
  font-weight: 500;
}
.plan ul {
  display: grid;
  margin: 6px 0 4px;
  flex: 1;
  align-content: start;
}
.plan li {
  display: flex;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.45;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.plan li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}
.pr-note {
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.ads-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .ads-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .ads-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tile {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #121418, #0d0f12);
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.tile h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.tile details {
  font-size: 14.5px;
  color: var(--muted);
}
.tile summary {
  cursor: pointer;
  color: var(--text);
}
.grid2 {
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .grid2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ticks {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.ticks.big li {
  font-size: 17px;
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--line);
}
.ticks.big li::before {
  top: 19px;
}

/* ---------- trust ---------- */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .sp-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
@media (min-width: 1040px) {
  .sp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sp {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}
.sp h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sp p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- faq ---------- */
.faq {
  max-width: 880px;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  min-height: 44px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.pm {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  flex: none;
  transition: transform 0.45s var(--e-out);
}
.pm::before,
.pm::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -0.75px 0 0 -5.5px;
  background: currentColor;
}
.pm::after {
  transform: rotate(90deg);
}
.faq details[open] .pm {
  transform: rotate(45deg);
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.faq .ans {
  padding: 0 52px 24px 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 68ch;
}

/* ---------- final + footer ---------- */
.final {
  position: relative;
  text-align: center;
  padding: clamp(64px, 9vw, 130px) 0;
  overflow: hidden;
}
.final .wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.final h2 {
  font-size: clamp(40px, 7.5vw, 110px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.95;
  text-wrap: balance;
}
.final p {
  color: var(--muted);
  max-width: 48ch;
  font-size: clamp(17px, 1.4vw, 19px);
}
.final .cta-stack {
  justify-items: center;
}
.final .meta {
  font: 12.5px var(--mono);
  color: var(--dim);
}
footer {
  border-top: 1px solid var(--line);
  padding: 52px 0 40px;
  font-size: 14.5px;
  color: var(--muted);
}
.foot {
  display: grid;
  gap: 32px;
}
@media (min-width: 800px) {
  .foot {
    grid-template-columns: 1.3fr 1fr 1fr 0.8fr;
  }
}
.foot h4 {
  font: 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
}
.foot h4 + ul + h4 {
  margin-top: 22px;
}
.foot li {
  padding: 4px 0;
}
.foot a {
  text-decoration: none;
  color: var(--text);
}
.foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-tag {
  max-width: 34ch;
  margin-top: 10px;
}
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 12px var(--mono);
  color: var(--dim);
}

/* ---------- forms ---------- */
.form-grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .form-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
}
.form {
  display: grid;
  gap: 16px;
  border-radius: 28px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #121418, #0b0c0f);
  padding: clamp(20px, 3vw, 36px);
}
.form-h {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.form-h:first-of-type {
  margin-top: 0;
}
.field {
  display: grid;
  gap: 7px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.field label,
.field legend {
  font-size: 14.5px;
  font-weight: 500;
}
.field label small,
.field legend small {
  color: var(--dim);
  font-weight: 400;
}
.inp {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #111317;
  border: 1px solid var(--line-2);
  color: var(--text);
  font: 400 16px var(--font);
  -webkit-appearance: none;
  appearance: none;
}
textarea.inp {
  resize: vertical;
}
select.inp {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.inp:focus {
  outline: none;
  border-color: var(--cool);
  background: #13161a;
}
.inp:user-invalid {
  border-color: var(--bad);
}
.yn,
.consent {
  gap: 10px;
}
.yn label,
.consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 44px;
}
.yn {
  grid-template-columns: 1fr 1fr;
}
.yn legend,
.consent legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 4px;
}
.yn input,
.consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  flex: none;
}
.consent {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 16px;
  padding: 14px;
}
.consent .small {
  grid-column: 1 / -1;
}
.err {
  font-size: 14.5px;
  color: var(--bad);
  padding: 10px 12px;
  border: 1px solid rgba(255, 122, 107, 0.4);
  border-radius: 12px;
}
.result {
  margin-top: 36px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), rgba(0, 0, 0, 0) 50%), #0f1114;
  padding: clamp(20px, 3vw, 36px);
  display: grid;
  gap: 16px;
}
.finds {
  display: grid;
  gap: 10px;
}
.find {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #0d0f12;
  display: grid;
  gap: 8px;
}
.find-t {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.find-t strong {
  font-weight: 600;
  font-size: 16px;
}
.find-t span {
  font: 11.5px var(--mono);
  color: var(--dim);
  white-space: nowrap;
}
.find.sev-high .find-t span {
  color: var(--warn);
}
.find.sev-ok .find-t span {
  color: var(--accent);
}
.find p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}
.slots {
  display: grid;
  gap: 14px;
}
.slots .day h3 {
  font-size: 14.5px;
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: capitalize;
}
.times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  font: 500 14.5px var(--mono);
  cursor: pointer;
}
.slot[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.demo-status {
  font-size: 15px;
  color: var(--muted);
  min-height: 1.5em;
}

/* ---------- about ---------- */
.founder {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 72px;
  }
}
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 420px;
  border-radius: 30px;
  border: 1px solid var(--line-2);
  background: linear-gradient(165deg, #191c21, #0b0c0f 70%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait .mm {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(150px, 24vw, 250px);
  line-height: 1;
  color: #eceef0;
}
.portrait .ph {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
}
.f-body {
  display: grid;
  gap: 18px;
}
.f-body h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.sig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
}

/* ---------- drafts ---------- */
.draft {
  display: inline-block;
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(255, 181, 71, 0.5);
  border-radius: 999px;
  padding: 7px 10px;
  margin-bottom: 18px;
}
.draftsec {
  margin-top: 28px;
}
.draftsec h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.draftsec p {
  color: var(--muted);
}

/* ==========================================================================================================
   Site v2 (homepage, owner's brief 03-11-2026): cream, near-black and one vivid green; Space Grotesk + JetBrains
   Mono, self-hosted (dist/fonts, copied from @fontsource by build.ts). Scoped to body.v2; build.ts appends this
   file to styles.css. Motion only under html.motion (set by client/home.ts without prefers-reduced-motion).
   ========================================================================================================== */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');
}

body.v2 {
  --cream: #f2f1ec;
  --cream-2: #e7e5dd;
  --paper: #fbfaf7;
  --ink: #161514;
  --ink-2: #1e1d1b;
  --ink-3: #292826;
  --green: #16c47f;
  --green-2: #2ee69a;
  /* green for text on cream (5.8:1) */
  --green-ink: #0a6b42;
  --mute-l: #5d5a54;
  --mute-d: #a7a39b;
  --line-l: rgba(22, 21, 20, 0.12);
  --line-d: rgba(242, 241, 236, 0.11);
  --sg: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mn: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --hh: 64px;
  /* warm anthracite for dark sections (light and dark share the grain and the green glow) */
  --dark: #0b0c0b;
  /* fine paper grain: a tiny static SVG noise tile, dark specks on cream, light specks on anthracite */
  --grain-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  --grain-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  /* one vertical rhythm between sections, site-wide */
  --sec-y: clamp(72px, 9vw, 128px);
  background: var(--dark);
  color: var(--ink);
  font: 400 17px/1.55 var(--sg);
  padding-bottom: 34px;
  color-scheme: light;
}
/* All-dark site (owner, 5 Nov 2026): the "light" sections keep their markup but render dark. Inside them the light
   tokens are swapped, so text that was ink on cream becomes cream on near-black, cards become thin-lined dark tiles.
   The app mockups (dashboard, mail, phone) keep the original light tokens: they are pictures of the app. */
body.v2 {
  color: var(--cream);
}
.v2 [data-theme='light'] {
  --cream: #0b0c0b;
  --cream-2: #161816;
  --paper: #111311;
  --ink: #f2f1ec;
  --ink-2: #e7e5dd;
  --ink-3: #d6d3ca;
  --green-ink: #2ee69a;
  --mute-l: #a7a39b;
  --line-l: rgba(242, 241, 236, 0.1);
  --grain-l: var(--grain-d);
  color-scheme: dark;
}
.v2 [data-theme='dark'],
.v2 :is(.dx, .ml, .ph-s, .dx-bez) {
  --cream: #f2f1ec;
  --cream-2: #e7e5dd;
  --paper: #fbfaf7;
  --ink: #161514;
  --ink-2: #1e1d1b;
  --ink-3: #292826;
  --green-ink: #0a6b42;
  --mute-l: #5d5a54;
  --line-l: rgba(22, 21, 20, 0.12);
}
.v2 [data-theme='light'] .calc2-card {
  --cream: #f2f1ec;
  --ink: #161514;
  --mute-l: #a7a39b;
  background: #111311;
  border: 1px solid rgba(242, 241, 236, 0.1);
}
.v2 .svc-note {
  color: #e0a24a !important;
}
.v2 [data-theme='dark'] :is(.dx, .ml, .ph-s, .dx-bez) {
  color: var(--ink);
}
html:has(body.v2) {
  scroll-padding-top: 72px;
  interpolate-size: allow-keywords;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.v2 .mono {
  font-family: var(--mn);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2 a {
  color: inherit;
}
.v2 :focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.v2 .home {
  position: relative;
}

/* ---------- concept / language / welcome as small floating bars ---------- */
.v2 .concept {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  font-size: 11.5px;
  padding: 7px var(--g);
  background: rgba(30, 24, 12, 0.94);
}
.v2 .langbar {
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 90;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  background: rgba(22, 21, 20, 0.92);
  color: var(--cream);
  width: max-content;
  max-width: calc(100vw - 32px);
}
.v2 .welcome {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
}
.v2 .welcome b {
  background: var(--green);
  color: var(--ink);
}
.v2 .ph {
  color: #9a5b00;
  background: rgba(255, 181, 71, 0.18);
}
.v2 [data-theme='dark'] .ph,
.v2 .f2 .ph {
  color: #ffb547;
}

/* ---------- pills ---------- */
.v2 .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.8em 1.35em;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 15px/1 var(--sg);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.35s var(--e-out);
}
.v2 .pill-lg {
  font-size: 17px;
  padding: 1em 1.6em;
  min-height: 54px;
}
.v2 .pill-xl {
  font-size: 19px;
  padding: 1.05em 1.9em;
  min-height: 64px;
}
.hero-more {
  font-size: 15px;
  color: var(--mute-l);
  text-decoration: underline;
  text-decoration-color: rgba(22, 21, 20, 0.25);
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.hero-more:hover {
  color: var(--ink);
  text-decoration-color: var(--green);
}
.v2 .pill-g {
  background: var(--green);
  color: var(--ink);
}
.v2 .pill-g:hover {
  background: var(--green-2);
  box-shadow: 0 10px 40px -10px rgba(22, 196, 127, 0.7);
}
.v2 .pill-o {
  border-color: currentColor;
  background: transparent;
}
.v2 .pill-o:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.v2 .pill-o-d {
  border-color: var(--line-d);
  color: var(--cream);
}
.v2 .pill-o-d:hover {
  border-color: var(--green);
  color: var(--green);
}
.v2 .pill-d {
  background: var(--ink);
  color: var(--cream);
}
.v2 .pill-d:hover {
  background: #000;
}
.v2 button.pill:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* ---------- header ---------- */
.h2r {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--hh);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--g);
  color: var(--ink);
  /* colour and glass switch together and fast: never a half-grey band with half-readable words in between */
  transition:
    color 0.2s,
    background-color 0.2s,
    border-color 0.2s;
  border-bottom: 1px solid transparent;
}
html[data-zone='dark'] .h2r {
  color: var(--cream);
}
/* light frosted glass with dark text on light sections, dark glass with light text on dark sections */
.h2r.scrolled {
  background: rgba(251, 250, 247, 0.9);
  border-bottom-color: var(--line-l);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
html[data-zone='dark'] .h2r.scrolled {
  background: rgba(11, 12, 11, 0.86);
  border-bottom-color: var(--line-d);
}
.h2r-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 44px;
}
.h2r-name {
  font: 700 17px/1 var(--sg);
  letter-spacing: -0.03em;
}
.lg-slot {
  position: relative;
  width: 52px;
  height: 28px;
  display: inline-grid;
  place-items: center;
}
.v2 .inf {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 0.5s;
}
/* The glossy 3D loop (client/hero3d.ts) flies from the wordmark to this spot and keeps turning there; on dark
   sections it turns dark with a green glow and a halo. The static mark stays as the fallback, and on phones it
   stays visible in the header until the loop has docked. */
.lg-slot::before {
  content: '';
  position: absolute;
  inset: -14px -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 196, 127, 0.55), transparent);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.7s var(--e-out),
    transform 0.9s var(--e-out);
  pointer-events: none;
}
html.gl-on.gl-docked .lg-slot::before {
  transform: none;
}
/* the glow only comes once the 3D loop has flown into the header (not while it is still big in the hero) */
html.gl-on.gl-docked .lg-slot::before {
  opacity: 1;
}
html.gl-wait .lg-slot .inf,
html.gl-wait .wm-sym .inf {
  opacity: 0;
  transition: none;
}
html.gl-on .lg-slot .inf,
html.gl-on .wm-sym .inf {
  opacity: 0;
}
@media (max-width: 759px) {
  html.gl-on:not(.gl-docked) .lg-slot .inf {
    opacity: 1;
  }
}
.h2r-nav {
  display: none;
  margin: 0 auto;
  gap: 2px;
}
.h2r-nav a {
  text-decoration: none;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 999px;
  opacity: 0.9;
  transition:
    opacity 0.2s,
    background-color 0.2s;
}
.h2r-nav a:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.12);
}
.h2r-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.h2r-lang {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.7;
}
.h2r-lang:hover {
  opacity: 1;
}
.h2r .pill-g {
  display: none;
}
.h2r .mnav summary {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.h2r .mnav nav {
  background: var(--ink);
  color: var(--cream);
}
@media (min-width: 640px) {
  .h2r .pill-g {
    display: inline-flex;
  }
}
@media (min-width: 1040px) {
  .h2r-nav {
    display: flex;
  }
  .h2r-r {
    margin-left: 0;
  }
  .h2r .mnav {
    display: none;
  }
}

/* ---------- the 3D canvas ---------- */
canvas.gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  animation: gl-in 1s var(--e-out) 0.1s forwards;
}
@keyframes gl-in {
  to {
    opacity: 1;
  }
}

/* ---------- shared section bits ---------- */
.v2 .sec-in {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--g);
}
.v2 .s-head {
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 980px;
}
.v2 .kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--green-ink);
}
.v2 .kick::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 196, 127, 0.18);
}
.v2 [data-theme='dark'] .kick {
  color: var(--green);
}
.v2 .s-h {
  font: 700 clamp(40px, 6.6vw, 104px) / 0.94 var(--sg);
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.v2 .s-h .g {
  color: var(--green);
}
.v2 .s-h-sm {
  font-size: clamp(28px, 3.6vw, 48px);
}
.v2 .s-lead {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--mute-l);
}
.v2 [data-theme='dark'] .s-lead {
  color: var(--mute-d);
}
.v2 [data-theme='dark'] {
  background: var(--dark);
  color: var(--cream);
}
.v2 [data-theme='light'] {
  background: var(--cream);
  color: var(--ink);
}
/* "korrel + gloed": every top-level section (and the footer) is the same paper: a static grain tile and one soft
   green glow over cream or warm anthracite. Background layers only: nothing animates, nothing extra to paint.
   Seamless (round 4): every glow is an ellipse centred in the middle band of its section and fades out well before
   the section edges, so two dark sections in a row read as one continuous surface (no seam, no cut-off glow). */
.v2 :is(main, .home) > [data-theme='light'] {
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(70% 36% at 75% 50%, rgba(22, 196, 127, 0.06), transparent 100%),
    var(--dark);
}
.v2 :is(main, .home) > [data-theme='dark'],
.v2 .f2 {
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(60% 36% at 18% 50%, rgba(22, 196, 127, 0.06), transparent 100%),
    var(--dark);
}
.v2 :is(main, .home) > [data-theme='dark']:nth-child(even) {
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(60% 36% at 82% 50%, rgba(22, 196, 127, 0.06), transparent 100%),
    var(--dark);
}
/* the closer: one centred glow behind the line, fading out inside the band */
.v2 :is(main, .home) > .closer[data-theme='dark'] {
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(56% 40% at 50% 50%, rgba(22, 196, 127, 0.13), transparent 100%),
    var(--dark);
}
.v2 .prod,
.v2 .wall,
.v2 .ctl,
.v2 .brs,
.v2 .pks,
.v2 .faq2,
.v2 .talk,
.v2 .f2 {
  position: relative;
  z-index: 2;
}

/* reveal on scroll */
.motion .v2 .rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--e-out),
    transform 0.6s var(--e-out);
}
.motion .v2 .rv.in {
  opacity: 1;
  transform: none;
}

/* status badges keep their base look on dark; a lighter take on cream */
.v2 .st {
  flex: none;
}

/* ---------- 1. hero ---------- */
/* not pinned: the next section rises in with the scroll, so there is never an empty screen in between */
.v2 .hero {
  position: relative;
  top: 0;
  z-index: 1;
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* the wordmark sits near the middle of the first screen (more room above than below the group) */
  padding: calc(var(--hh) + 40px) var(--g) 70px;
  overflow: hidden;
  isolation: isolate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-grid::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 70vmin;
  height: 70vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 196, 127, 0.16), transparent);
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(20px, 3vw, 36px);
  padding: 9px 14px;
  border: 1px solid var(--line-l);
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.6);
}
.hero-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(22, 196, 127, 0.7);
  animation: ping 2.2s infinite;
}
@keyframes ping {
  70% {
    box-shadow: 0 0 0 10px rgba(22, 196, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 196, 127, 0);
  }
}
/* Phones: NONSTOP / ∞ / STAFF stacked, the loop centred between the words; from 760px one line. */
.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  font: 700 18vw/0.86 var(--sg);
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.wm-w {
  display: inline-flex;
  overflow: hidden;
  padding: 0.06em 0.02em;
}
.wm-l {
  display: inline-block;
  animation: wm-rise 1.15s var(--e-out) backwards;
  animation-delay: calc(var(--i) * 45ms + 120ms);
}
@keyframes wm-rise {
  from {
    transform: translateY(0.9em) rotate(6deg);
    opacity: 0;
  }
}
/* The last letter's (negative) letter-spacing would pull the loop towards the P: none after a word's last letter. */
.wm-w .wm-l:last-child {
  letter-spacing: 0;
}
.wm-sym {
  display: inline-block;
  width: 1.5em;
  height: 0.78em;
  margin: 0.08em 0;
  animation: wm-pop 1.4s var(--e-out) 0.35s backwards;
}
@keyframes wm-pop {
  from {
    transform: scale(0.4) rotate(-20deg);
    opacity: 0;
  }
}
.hero-line {
  max-width: 34ch;
  margin: clamp(22px, 3vw, 40px) auto 0;
  font: 500 clamp(18px, 2vw, 26px) / 1.35 var(--sg);
  letter-spacing: -0.015em;
  text-wrap: balance;
  animation: fade-up 0.8s var(--e-out) 0.35s backwards;
}
.hero-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 40px);
  animation: fade-up 0.8s var(--e-out) 0.45s backwards;
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.hero-side {
  position: absolute;
  left: var(--g);
  bottom: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  text-align: left;
  color: var(--mute-l);
}
.hero-side li::before {
  content: '— ';
  color: var(--green-ink);
}
.hero-scroll {
  position: absolute;
  right: var(--g);
  bottom: 28px;
  margin: 0;
  color: var(--mute-l);
}
.hero-scroll span {
  display: inline-block;
  animation: bob 1.8s var(--e-io) infinite;
}
@keyframes bob {
  50% {
    transform: translateY(5px);
  }
}
.hero-dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    var(--grain-d) 0 0 / 160px 160px,
    var(--dark);
  /* reaches full dark early, so the hand-over never shows a large half-dimmed (grey) band */
  opacity: min(1, calc(var(--dim, 0) * 1.9));
  pointer-events: none;
}
/* The hero leaves as one piece: its content fades and lifts with the scroll, so nothing (like the label) lingers
   as a ghost above the dark section that slides over it. --dim is set by client/home.ts. */
.hero > :is(.hero-label, .wordmark, .hero-line, .hero-btns, .hero-side, .hero-scroll) {
  opacity: calc(1 - var(--dim, 0) * 1.6);
  translate: 0 calc(var(--dim, 0) * -48px);
}
@media (min-width: 760px) {
  .wordmark {
    flex-direction: row;
    font-size: min(9.4vw, 206px);
  }
  /* equal optical gaps: the P's open bowl reads as extra space, so the left gap is a hair smaller */
  .wm-sym {
    width: 1.7em;
    height: 0.9em;
    margin: 0 0.15em 0 0.13em;
  }
  .hero-side {
    display: block;
  }
}

/* ---------- 2. product window ---------- */
/* One transition style everywhere: sections meet on a straight edge (no rounded tops), and one vertical rhythm. */
.v2 .prod {
  padding: var(--sec-y) 0;
}
/* the dimmed hero and the dark section below are the same paper, so the hand-over has no seam */
.v2 .home > .prod[data-theme='dark'] {
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(60% 30% at 18% 40%, rgba(22, 196, 127, 0.06), transparent 100%),
    var(--dark);
}
.prod-grid {
  display: grid;
  gap: 24px;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--g) * -1);
  padding: 0 var(--g) 4px;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-d);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.tab[aria-selected='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.tab-n {
  opacity: 0.65;
}
.tab-name {
  font: 600 16px/1.2 var(--sg);
  letter-spacing: -0.01em;
}
.tab-line,
.tab .st {
  display: none;
}
.tab-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: currentColor;
  opacity: 0.6;
}
.tab.run .tab-prog {
  animation: prog var(--dur, 8s) linear forwards;
}
@keyframes prog {
  to {
    width: 100%;
  }
}
@media (min-width: 1000px) {
  .prod-grid {
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 48px;
    align-items: start;
  }
  .tabs {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line-d);
  }
  .tab {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: start;
    padding: 22px 6px;
    border: 0;
    border-bottom: 1px solid var(--line-d);
    border-radius: 0;
  }
  .tab[aria-selected='true'] {
    background: transparent;
    color: var(--cream);
  }
  .tab:hover .tab-name {
    color: var(--green);
  }
  .tab-n {
    padding-top: 6px;
    color: var(--green);
    opacity: 1;
  }
  .tab-name {
    font-size: clamp(22px, 2vw, 30px);
    transition: color 0.3s;
  }
  .tab[aria-selected='true'] .tab-name {
    color: var(--green);
  }
  .tab-b {
    display: grid;
  }
  .tab-line {
    display: block;
    color: var(--mute-d);
    font-size: 15px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.5s var(--e-out),
      opacity 0.4s,
      margin 0.4s;
  }
  .tab[aria-selected='true'] .tab-line {
    max-height: 9em;
    opacity: 1;
    margin-top: 8px;
  }
  .tab .st {
    display: inline-flex;
    margin-top: 6px;
  }
  .tab-prog {
    background: var(--green);
    opacity: 1;
  }
  .prod .win {
    position: sticky;
    top: 96px;
  }
}

.win,
.app {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, #22211f, #1a1918);
  border: 1px solid var(--line-d);
  box-shadow:
    0 50px 120px -50px rgba(22, 196, 127, 0.35),
    0 30px 80px -30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.02);
}
.tl {
  display: inline-flex;
  gap: 7px;
}
.tl i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.tl i:nth-child(2) {
  background: #febc2e;
}
.tl i:nth-child(3) {
  background: #28c840;
}
.win-t {
  flex: 1;
  text-align: center;
  color: var(--mute-d);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win-tag {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(22, 196, 127, 0.5);
  color: var(--green);
}
.win-body {
  display: grid;
}
.win-side {
  display: none;
}
@media (min-width: 1200px) {
  .win-body {
    grid-template-columns: 172px 1fr;
  }
  .win-side {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 16px 10px;
    border-right: 1px solid var(--line-d);
    font-size: 11px;
  }
  .ws {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--mute-d);
    transition:
      background-color 0.3s,
      color 0.3s;
  }
  .ws i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
  }
  .ws.on {
    background: rgba(22, 196, 127, 0.12);
    color: var(--green);
  }
  .ws.on i {
    opacity: 1;
    box-shadow: 0 0 10px var(--green);
  }
}
.win-main {
  position: relative;
  min-height: 500px;
  padding: 22px 18px 96px;
}
@media (min-width: 760px) {
  .win-main {
    min-height: 540px;
    padding: 28px 28px 100px;
  }
}
.pane[hidden] {
  display: none;
}
.pane.on {
  animation: pane-in 0.6s var(--e-out);
}
@keyframes pane-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
}
.sc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mute-d);
  font-size: 11px;
  margin-bottom: 18px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2s infinite;
}
/* steps of a scene */
.motion .v2 .step {
  opacity: 0;
  transform: translateY(14px);
}
.motion .v2 .step.on {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--e-out),
    transform 0.7s var(--e-out);
}
.typing::after {
  content: '▍';
  color: var(--green);
  animation: blink 0.8s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* before/after states */
.flip {
  display: inline-grid;
}
.flip > span {
  grid-area: 1 / 1;
  transition:
    opacity 0.4s,
    transform 0.5s var(--e-out);
}
.flip > span:last-child {
  opacity: 0;
  transform: translateY(6px);
  color: var(--green);
}
.flip.done > span:first-child,
html:not(.motion) .flip > span:first-child {
  opacity: 0;
}
.flip.done > span:last-child,
html:not(.motion) .flip > span:last-child {
  opacity: 1;
  transform: none;
}
/* flying agent labels */
.fly {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 8px;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font: 500 11px/1 var(--mn);
  letter-spacing: 0.04em;
  box-shadow: 0 12px 30px -8px rgba(22, 196, 127, 0.7);
  pointer-events: none;
}
.fly i {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--ink);
  transform: rotate(-35deg);
}
.fly-a {
  top: 54px;
  right: 18px;
}
.fly-b {
  bottom: 86px;
  right: 30px;
}
.motion .v2 .fly.on {
  animation:
    fly-in 0.9s var(--e-out) both,
    float 3.2s var(--e-io) 0.9s infinite;
}
@keyframes fly-in {
  from {
    opacity: 0;
    transform: translate(70px, -40px) scale(0.6) rotate(8deg);
  }
}
@keyframes float {
  50% {
    transform: translateY(-6px);
  }
}
@media (max-width: 559px) {
  .fly {
    display: none;
  }
}
/* command bar */
.cmd {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-d);
  font-size: 14px;
  color: var(--cream);
}
.cmd-k {
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.cmd-t {
  flex: 1;
  min-width: 0;
}
.cmd-go {
  color: var(--green);
}
/* phone scene */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  margin-bottom: 18px;
}
.wave i {
  flex: 1;
  height: var(--h);
  border-radius: 2px;
  background: linear-gradient(var(--green), rgba(22, 196, 127, 0.35));
  transform-origin: center;
}
.motion .v2 .pane.on .wave i {
  animation: eq 1.1s var(--e-io) var(--d) infinite alternate;
}
@keyframes eq {
  from {
    transform: scaleY(0.25);
  }
}
.tr {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.b {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
}
.b small {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--mute-d);
}
.b-ai {
  background: rgba(22, 196, 127, 0.1);
  border: 1px solid rgba(22, 196, 127, 0.28);
}
.b-ai small {
  color: var(--green);
}
.b-me {
  justify-self: end;
  background: var(--ink-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.chip {
  display: inline-flex;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22, 196, 127, 0.45);
  color: var(--green);
  font-size: 13.5px;
}
/* messages scene */
.wa {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 10%, rgba(22, 196, 127, 0.08), transparent 50%), rgba(255, 255, 255, 0.025);
}
.wa-b {
  max-width: 84%;
  margin: 0;
  padding: 11px 14px 8px;
  border-radius: 16px;
  font-size: 15.5px;
}
.wa-b small {
  display: block;
  text-align: right;
  margin-top: 4px;
  font-size: 11px;
  color: var(--mute-d);
}
.wa-in {
  background: var(--ink-3);
  border-bottom-left-radius: 4px;
}
.wa-out {
  justify-self: end;
  background: #12472f;
  border-bottom-right-radius: 4px;
}
.wa-typing {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ink-3);
  justify-self: end;
}
.wa-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute-d);
  animation: bob 1s infinite;
}
.wa-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.wa-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.motion .v2 .wa-typing.on {
  animation: typing-out 0.3s 1.1s forwards;
}
@keyframes typing-out {
  to {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}
html:not(.motion) .wa-typing {
  display: none;
}
/* follow-up scene */
.queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.q {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-d);
  overflow: hidden;
}
.q-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(22, 196, 127, 0.12);
  color: var(--green);
}
.q-l {
  display: grid;
}
.q-l small {
  color: var(--mute-d);
  font-size: 11px;
  margin-top: 3px;
}
.q-s {
  font: 500 11px/1 var(--mn);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute-d);
}
.q-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--green);
}
.motion .v2 .q.on .q-bar {
  animation: prog var(--d) var(--e-io) forwards;
}
/* appointments scene */
.cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cal-d {
  text-align: center;
  color: var(--mute-d);
  font-size: 11px;
  padding-bottom: 4px;
}
.cal-c {
  position: relative;
  min-height: 92px;
  padding: 6px;
  border-radius: 10px;
  border: 1px dashed var(--line-d);
}
.cal-c > small {
  font-size: 9.5px;
  color: var(--mute-d);
}
.slot-b {
  position: absolute;
  inset: 22px 5px 5px;
  display: grid;
  align-content: space-between;
  padding: 7px;
  border-radius: 8px;
  background: rgba(22, 196, 127, 0.14);
  border: 1px solid rgba(22, 196, 127, 0.45);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
}
.slot-b .flip {
  font: 500 9px/1.2 var(--mn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mute-d);
}
/* reviews scene */
.rev {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-d);
}
.rev p {
  margin: 8px 0;
  font-size: 16px;
}
.rev small {
  color: var(--mute-d);
  font-size: 11px;
}
.stars {
  color: var(--green);
  letter-spacing: 0.1em;
}
.stars span {
  opacity: 0.25;
}
.rev-reply {
  margin: 14px 0 0 clamp(0px, 6%, 48px);
  border-color: rgba(22, 196, 127, 0.4);
}
/* ads & website scene */
.ads {
  display: grid;
  gap: 14px;
}
@media (min-width: 600px) {
  .ads {
    grid-template-columns: 1fr 1fr;
  }
}
.ad {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-d);
}
.ad-img,
.site-mock {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  filter: grayscale(0.4) brightness(0.8);
}
.site-mock {
  display: grid;
  grid-template-rows: 14% 1fr 18% 18%;
  gap: 6%;
  padding: 7%;
  background: var(--cream);
  filter: none;
}
.site-mock i {
  border-radius: 4px;
  background: var(--cream-2);
}
.site-mock i:nth-child(2) {
  background: var(--ink);
  width: 70%;
}
.site-mock i:nth-child(3) {
  background: var(--green);
  width: 34%;
  border-radius: 999px;
}
.ad .flip .mono,
.ad .flip span {
  font-size: 11px;
}
.paused {
  color: var(--green);
}
.meter {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--green);
}
.motion .v2 .ad.on .meter i {
  animation: grow var(--d) var(--e-io) both;
}
@keyframes grow {
  from {
    width: 0;
  }
}
/* all services strip */
.all-svc {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--line-d);
}
.all-svc > p {
  margin: 0 0 16px;
  color: var(--mute-d);
}
.all-svc .gcards {
  margin-bottom: 28px;
}

/* ---------- 3. video wall ---------- */
.v2 .wall {
  height: auto;
}
.wall-pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.motion .v2 .wall {
  height: 165vh;
}
.motion .v2 .wall-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.wall-grid {
  position: absolute;
  /* one and a half screens tall: the extra row (the last four tiles) slides up into view while the wall is pinned */
  top: -3%;
  left: -3%;
  right: -3%;
  height: 159%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  transform: translateY(calc(var(--p, 0) * -33.4%)) scale(calc(1.22 - var(--p, 0) * 0.22));
  will-change: transform;
}
.wt {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.wt-phone {
  grid-row: span 2;
}
.wt video,
.wt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transform: translateY(calc((var(--p, 0) - 0.5) * var(--k, 6) * 1%)) scale(1.12);
}
.wt:nth-child(2n) {
  --k: -8;
}
.wt:nth-child(3n) {
  --k: 10;
}
@media (min-width: 760px) {
  .wall-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .wt-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
.wall-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(22, 21, 20, 0.5), rgba(22, 21, 20, 0.88) 75%),
    linear-gradient(180deg, var(--dark) 0, transparent 18%, transparent 82%, var(--dark) 100%);
}
.wall-copy {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  padding: 0 var(--g);
  text-align: center;
}
.wall-h {
  margin: 0;
  font: 700 clamp(46px, 10vw, 196px) / 0.86 var(--sg);
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-wrap: balance;
  transform: translateY(calc((0.4 - var(--p, 0.4)) * 14vh)) scale(calc(0.9 + var(--p, 1) * 0.1));
  text-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}
.wall-lines {
  max-width: 980px;
  margin: clamp(26px, 4vw, 52px) auto 0;
  font: 700 clamp(17px, 2.2vw, 30px) / 1.25 var(--sg);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.wl {
  transition:
    opacity 0.6s,
    color 0.6s;
}
.motion .v2 .wl {
  opacity: 0.42;
}
.motion .v2 .wl.on {
  opacity: 1;
}
.wl-g {
  color: var(--green);
}
.wall-cap {
  position: absolute;
  left: var(--g);
  right: var(--g);
  bottom: 48px;
  z-index: 2;
  margin: 0;
  font-size: 11px;
  color: var(--mute-d);
}

/* ---------- 4. control ---------- */
.v2 .ctl {
  padding: var(--sec-y) 0 0;
}
.app-body {
  display: grid;
}
.app-nav {
  display: none;
}
@media (min-width: 1000px) {
  .app-body {
    grid-template-columns: 180px 1fr;
  }
  .app-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 18px 10px;
    border-right: 1px solid var(--line-d);
    font-size: 11px;
    color: var(--mute-d);
  }
  .app-nav span {
    padding: 10px;
    border-radius: 8px;
  }
  .app-nav .on {
    background: rgba(22, 196, 127, 0.12);
    color: var(--green);
  }
}
.app-main {
  padding: 18px;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .app-main {
    padding: 26px;
  }
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tile,
.panel {
  position: relative;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-d);
  padding: 16px;
  overflow: hidden;
}
.tile span {
  display: block;
  color: var(--mute-d);
  font-size: 11px;
}
.tile b {
  display: block;
  margin-top: 10px;
  font: 700 clamp(34px, 4vw, 52px) / 1 var(--sg);
  letter-spacing: -0.04em;
}
.tile:last-of-type b {
  color: var(--green);
}
.tiles-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--mute-d);
  font-size: 11px;
}
.glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, -999px) var(--my, -999px),
    rgba(22, 196, 127, 0.16),
    transparent 65%
  );
  pointer-events: none;
}
.app-cols {
  display: grid;
  gap: 16px;
}
@media (min-width: 1100px) {
  .app-cols {
    grid-template-columns: 1.15fr 1fr 1fr;
  }
}
.panel h3 {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 11px;
}
.tasks,
.toggles,
.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: opacity 0.4s;
}
.task b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.task small {
  color: var(--mute-d);
  font-size: 11px;
}
.task.done b {
  text-decoration: line-through;
  opacity: 0.6;
}
.approve {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font: 500 13px/1 var(--sg);
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.approve:hover,
.approve[aria-pressed='true'] {
  background: var(--green);
  color: var(--ink);
}
.toggles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
}
.sw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mute-d);
  cursor: pointer;
}
.sw small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.sw i {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s;
}
.sw i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.35s var(--e-out);
}
.sw[aria-checked='true'] {
  color: var(--green);
}
.sw[aria-checked='true'] i {
  background: var(--green);
}
.sw[aria-checked='true'] i::after {
  transform: translateX(18px);
}
.locked {
  padding-top: 10px;
  border-top: 1px solid var(--line-d);
}
.locked .mono {
  font-size: 9.5px;
  color: var(--mute-d);
}
.bars li {
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.bar {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--green-2));
  transition: width 1.6s var(--e-out) 0.3s;
}
.motion .v2 .app:not(.in) .bar i {
  width: 0;
}
/* ticker */
.ticker {
  display: flex;
  overflow: hidden;
  margin-top: var(--sec-y);
  padding: 22px 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tk-row {
  flex: none;
  display: flex;
  gap: 48px;
  margin: 0;
  padding: 0 24px;
  list-style: none;
  animation: marquee 46s linear infinite;
}
.tk-row li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: 13px;
}
.tk-row li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}
@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

/* ---------- 5. carousel ---------- */
.v2 .brs {
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.car {
  --cw: min(78vw, 440px);
  --chh: max(520px, calc(var(--cw) * 1.3));
  --r: calc(var(--cw) * 1.32);
  position: relative;
  outline: none;
}
.car:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -4px;
}
.car-stage {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px var(--g) 20px;
}
.car-ring {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.car-card {
  position: relative;
  flex: 0 0 var(--cw);
  height: var(--chh);
  scroll-snap-align: center;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line-d);
  display: flex;
  flex-direction: column;
}
.car-card img {
  width: 100%;
  height: 42%;
  object-fit: cover;
  flex: none;
  -webkit-user-drag: none;
  user-select: none;
}
.car-body {
  position: relative;
  padding: 18px 20px 20px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.car-n {
  color: var(--green);
}
.car-body h3 {
  margin: 0;
  font: 700 clamp(22px, 2.2vw, 28px) / 1.05 var(--sg);
  letter-spacing: -0.03em;
}
.car-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.car-ex a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  font-size: 13px;
  text-decoration: none;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.car-ex a:hover {
  border-color: var(--green);
  color: var(--green);
}
.car-body p {
  margin: 0;
  color: var(--mute-d);
  font-size: 15px;
  line-height: 1.45;
}
.car-3d .car-stage {
  overflow: visible;
  height: calc(var(--chh) + 30px);
  display: grid;
  place-items: center;
  perspective: 1700px;
  touch-action: pan-y;
  cursor: grab;
  padding: 0;
}
.car-3d .car-ring {
  position: relative;
  display: block;
  width: var(--cw);
  height: var(--chh);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateY(calc(var(--rot, 0) * -45deg));
  transition: transform 1s var(--e-out);
}
.car-3d .car-ring.drag {
  transition: none;
  cursor: grabbing;
}
.car-3d .car-card {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r));
  backface-visibility: hidden;
  transition:
    filter 0.8s,
    opacity 0.8s;
}
.car-3d .car-card:not(.cur) {
  cursor: pointer;
}
.car-3d .car-card:not(.cur) img {
  filter: brightness(0.5) saturate(0.7);
}
.car-3d .car-card:not(.cur) .car-body > :not(h3) {
  visibility: hidden;
}
.car-3d .car-card:not(.cur) .car-body h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  color: rgba(242, 241, 236, 0.85);
}
.car-3d .car-card {
  -webkit-font-smoothing: antialiased;
}
.car-card.cur {
  box-shadow: 0 40px 100px -40px rgba(22, 196, 127, 0.5);
}
.car-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}
.car-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  background: transparent;
  color: var(--cream);
  font-size: 20px;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.35s var(--e-out);
}
.car-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.car-count {
  min-width: 7ch;
  text-align: center;
}
.car-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--mute-d);
}
.all-br {
  margin-top: 40px;
  border-top: 1px solid var(--line-d);
}
.all-br summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  cursor: pointer;
}
.all-br summary::-webkit-details-marker {
  display: none;
}
.all-br[open] summary span {
  transform: rotate(45deg);
}
.all-br summary span {
  transition: transform 0.3s;
  font-size: 18px;
}
.all-br-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  padding-bottom: 20px;
}
.all-br-grid h3 {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 11px;
}
.all-br-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.all-br-grid a {
  text-decoration: none;
  color: var(--mute-d);
  font-size: 15px;
}
.all-br-grid a:hover {
  color: var(--cream);
}

/* ---------- 6. packages ---------- */
.v2 .pks {
  padding-top: var(--sec-y);
}
.pk {
  border-top: 1px solid var(--line-l);
  padding: clamp(44px, 6vw, 88px) 0;
}
.v2 .pk-g {
  background: var(--green);
}
.v2 .pk-c {
  background: var(--paper);
}
.pk-in {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--g);
  display: grid;
  gap: 18px;
}
.pk-n {
  font-size: 13px;
}
.pk-t h3 {
  margin: 0;
  font: 700 clamp(56px, 7.2vw, 128px) / 0.85 var(--sg);
  letter-spacing: -0.06em;
}
.pk-t p {
  margin: 14px 0 0;
  font: 500 clamp(19px, 1.8vw, 24px) / 1.25 var(--sg);
}
.pk-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 17px;
}
.pk-l li {
  display: flex;
  gap: 10px;
}
.pk-l em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  align-self: center;
  white-space: nowrap;
}
.pk .pill {
  justify-self: start;
}
@media (min-width: 1000px) {
  /* fixed columns: the feature lists of Start, Groei and Enterprise start at the same x, whatever the name's width */
  .pk-in {
    grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr) 250px;
    align-items: start;
    gap: 40px;
  }
  .pk-n {
    padding-top: 14px;
  }
}
@media (min-width: 1000px) and (min-height: 760px) {
  .motion .v2 .pk {
    position: sticky;
    top: var(--hh);
    box-shadow: 0 -30px 60px -40px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 7. FAQ ---------- */
.v2 .faq2 {
  padding: var(--sec-y) 0;
}
.fq {
  display: grid;
  gap: 40px;
}
.fq-side .s-h {
  font-size: clamp(42px, 5vw, 84px);
}
.fq-card {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 36px;
  max-width: 340px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.4s var(--e-out);
}
.fq-card .mono {
  color: var(--mute-d);
}
.fq-card b {
  font: 600 20px/1.2 var(--sg);
  letter-spacing: -0.02em;
}
.fq-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.fq-card:hover b {
  color: var(--green);
}
@media (min-width: 1000px) {
  .fq {
    grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
    gap: 80px;
  }
  .fq-side {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}
.fq-row {
  border-bottom: 1px solid var(--line-d);
}
.fq-row:first-child {
  border-top: 1px solid var(--line-d);
}
.fq-sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 14px;
  margin: 0 -14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.fq-sum::-webkit-details-marker {
  display: none;
}
.fq-sum:hover {
  background: rgba(242, 241, 236, 0.04);
}
/* Keyboard focus stays inside the row; a mouse click drops focus (see client/home.ts). */
.fq-sum:focus-visible {
  outline: none;
  background: rgba(242, 241, 236, 0.04);
  box-shadow: inset 0 0 0 1px rgba(22, 196, 127, 0.45);
}
.fq-n {
  flex: none;
  width: 28px;
  color: var(--green);
}
.fq-q {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 clamp(19px, 1.9vw, 26px) / 1.25 var(--sg);
  letter-spacing: -0.02em;
  transition: color 0.25s;
}
.fq-sum:hover .fq-q {
  color: #fff;
}
.fq-x {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform 0.45s var(--e-out);
}
.fq-x::before,
.fq-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.fq-x::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.fq-row[open] .fq-x {
  transform: rotate(45deg);
  color: var(--green);
}
.fq-a {
  overflow: hidden;
}
.fq-a p {
  position: relative;
  margin: 0 0 28px 48px;
  padding-left: 20px;
  max-width: 58ch;
  color: var(--mute-d);
  font-size: 17px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.45s 0.08s,
    transform 0.5s var(--e-out) 0.08s;
}
.fq-a p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 14px 1px rgba(22, 196, 127, 0.65);
}
.fq-row[open] .fq-a p {
  opacity: 1;
  transform: none;
}
.fq-row::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 0.5s var(--e-out),
    content-visibility 0.5s allow-discrete;
}
.fq-row[open]::details-content {
  height: auto;
}
@media (max-width: 599px) {
  .fq-sum {
    gap: 12px;
    padding: 20px 8px;
    margin: 0 -8px;
  }
  .fq-n {
    width: 22px;
  }
  .fq-a p {
    margin-left: 34px;
    padding-left: 14px;
  }
}

/* ---------- 8. Groeiscan wizard ---------- */
.v2 .talk {
  padding: var(--sec-y) 0;
}
.wz-head {
  margin-bottom: clamp(36px, 5vw, 64px);
}
.wz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.wz > * {
  min-width: 0;
}
.wz fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.wz-prog {
  display: none;
  align-items: center;
  gap: 14px;
  color: var(--mute-l);
}
.wz-dots {
  display: inline-flex;
  gap: 6px;
}
.wz-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    transform 0.4s var(--e-out);
}
.wz-dots i.on {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.15);
}
.wz-count b {
  color: var(--ink);
}
.wz-steps {
  display: grid;
  gap: 56px;
}
.wz-leg {
  float: left;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  font: 700 clamp(26px, 3vw, 40px) / 1.05 var(--sg);
  letter-spacing: -0.035em;
}
.wz-step > :not(legend) {
  clear: both;
}
.wz-step > * + * {
  margin-top: 30px;
}
.wz-two {
  display: grid;
  gap: 18px;
  clear: both;
}
@media (min-width: 700px) {
  .wz-two {
    grid-template-columns: 1fr 1fr;
  }
}
.wz-f {
  display: grid;
  gap: 8px;
}
.wz-f > span,
.wz-q > legend,
.wz-sl > label {
  font: 500 15px/1.3 var(--sg);
  color: var(--mute-l);
  padding: 0;
  margin-bottom: 12px;
}
.wz-f small {
  font-size: 12px;
  opacity: 0.8;
}
.in2 {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1.5px solid var(--line-l);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 500 19px/1 var(--sg);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.in2:hover {
  border-color: rgba(22, 21, 20, 0.3);
}
.in2:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(22, 196, 127, 0.25);
}
.wz-opt {
  max-width: 340px;
}
/* chips */
.chips2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip2 {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.chip2 input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip2 span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line-l);
  background: var(--paper);
  font: 500 16px/1.2 var(--sg);
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.3s var(--e-out);
}
.chip2:hover span {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.chip2 input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.chip2 input:checked + span::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--green);
}
.chip2 input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.chip2-s span {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14.5px;
}
.br-set {
  margin-top: 16px !important;
}
.br-set legend {
  font: 500 12px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-l);
  margin-bottom: 10px;
  padding: 0;
}
/* sliders */
.wz-sl {
  display: grid;
  max-width: 640px;
}
.wz-big {
  font: 700 clamp(56px, 7vw, 92px) / 1 var(--sg);
  letter-spacing: -0.05em;
  margin-bottom: 14px;
  color: var(--ink);
}
.rng {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
}
.rng::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--green) var(--fill, 0%), var(--cream-2) var(--fill, 0%));
}
.rng::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: var(--cream-2);
}
.rng::-moz-range-progress {
  height: 8px;
  border-radius: 8px;
  background: var(--green);
}
.rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--green);
  box-shadow: 0 6px 20px -4px rgba(22, 196, 127, 0.7);
  transition: transform 0.2s;
}
.rng::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--green);
}
.rng:active::-webkit-slider-thumb {
  transform: scale(1.15);
}
.rng:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
.wz-consent p {
  margin: 12px 0 0;
  color: var(--mute-l);
  font-size: 11px;
}
.wz-submit {
  margin-top: 34px !important;
}
.wz-priv {
  color: var(--mute-l);
  font-size: 11px;
}
.v2 .talk .err {
  color: #b4321f;
  background: rgba(180, 50, 31, 0.08);
  border: 1px solid rgba(180, 50, 31, 0.3);
}
/* live panel */
.wz-live {
  padding: 24px;
  border-radius: 22px;
  background: var(--ink);
  color: var(--cream);
}
.wz-live-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--green);
}
.wz-pkg {
  margin: 0 0 14px;
  color: var(--mute-d);
}
.wz-pkg b {
  color: var(--cream);
}
.wz-live dl {
  margin: 0;
  display: grid;
}
.wz-li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-d);
  font-size: 15px;
}
.wz-li dt {
  color: var(--mute-d);
}
.wz-li dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.wz-li[data-empty] dd {
  color: rgba(242, 241, 236, 0.3);
}
.wz-li.pop dd {
  animation: pop 0.6s var(--e-out);
}
@keyframes pop {
  from {
    color: var(--green);
    transform: translateX(-6px);
  }
}
.wz-live-n {
  margin: 16px 0 0;
  color: var(--mute-d);
  font-size: 11px;
  line-height: 1.6;
}
.wz-nav {
  display: none;
}
/* the wizard (JavaScript on) */
.wz.wz-on .wz-prog {
  display: flex;
}
.wz.wz-on .wz-step {
  display: none;
}
.wz.wz-on .wz-step.on {
  display: block;
  animation: step-in 0.6s var(--e-out);
}
.wz.wz-on .wz-step.on.bwd {
  animation-name: step-back;
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}
@keyframes step-back {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
}
.wz.wz-on .wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.wz.wz-on .wz-next {
  margin-left: auto;
}
.wz-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
/* group → branch chips: see pages.css (.chips-on) */
@media (min-width: 1000px) {
  .wz {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: 'prog live' 'steps live' 'nav live';
    grid-template-rows: auto 1fr auto;
    column-gap: 64px;
    align-items: start;
  }
  .wz-prog {
    grid-area: prog;
  }
  .wz-steps {
    grid-area: steps;
  }
  .wz-nav {
    grid-area: nav;
  }
  .wz-live {
    grid-area: live;
    position: sticky;
    top: 100px;
  }
  .wz.wz-on .wz-steps {
    min-height: 470px;
  }
}
/* mobile: the live panel is a compact bar above the buttons */
@media (max-width: 999px) {
  .wz.wz-on .wz-live {
    padding: 12px 14px;
    border-radius: 16px;
  }
  .wz.wz-on .wz-live-h,
  .wz.wz-on .wz-live-n {
    display: none;
  }
  .wz.wz-on .wz-live dl {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .wz.wz-on .wz-li {
    flex: none;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--line-d);
    border-radius: 999px;
    font-size: 13px;
  }
  .wz.wz-on .wz-li[data-empty] {
    display: none;
  }
  .wz.wz-on .wz-live:not(:has(.wz-li:not([data-empty]))) {
    display: none;
  }
}
/* result + booking */
.talk-res {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line-l);
}
.v2 .talk .finds {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
@media (min-width: 900px) {
  .v2 .talk .finds {
    grid-template-columns: repeat(3, 1fr);
  }
}
.v2 .talk .find {
  background: var(--paper);
  border: 1px solid var(--line-l);
  border-radius: 16px;
  padding: 18px;
  color: var(--ink);
  animation: fade-up 0.8s var(--e-out) backwards;
}
.v2 .talk .find:nth-child(2) {
  animation-delay: 0.15s;
}
.v2 .talk .find:nth-child(3) {
  animation-delay: 0.3s;
}
.v2 .talk .find p {
  color: var(--mute-l);
}
.v2 .talk .find .find-t span {
  color: var(--mute-l);
}
.v2 .talk .find.sev-high .find-t span {
  color: #b4321f;
}
.v2 .talk .find.sev-ok .find-t span {
  color: var(--green-ink);
}
.v2 .talk .co-be {
  color: var(--ink);
  background: rgba(22, 196, 127, 0.12);
  border-color: rgba(22, 196, 127, 0.4);
}
.res-note {
  color: var(--mute-l);
  font-size: 15px;
}
.talk-book {
  margin-top: 40px;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 24px;
  background: var(--ink);
  color: var(--cream);
  animation: fade-up 0.8s var(--e-out) 0.45s backwards;
}
.talk-book > p {
  color: var(--mute-d);
}
.v2 .talk-book .slots {
  margin: 20px 0;
}
.v2 .talk-book .slot {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-d);
}
.v2 .talk-book .slot[aria-pressed='true'] {
  background: var(--green);
  color: var(--ink);
  border-color: var(--green);
}

/* ---------- 9. footer ---------- */
.v2 .f2 {
  padding: var(--sec-y) var(--g) 40px;
  overflow: hidden;
}
/* the closing sentence: large, always one line ("AI-team" never breaks), two real buttons beneath it */
.f2-cta {
  max-width: 1500px;
  margin: 0 auto;
}
.f2-big {
  margin: 0;
  font: 700 clamp(36px, 9vw, 196px) / 0.92 var(--sg);
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: var(--cream);
}
.v2 .nw {
  white-space: nowrap;
}
.f2-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 48px);
}
.f2-cols {
  max-width: 1500px;
  margin: clamp(56px, 7vw, 104px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 900px) {
  .f2-cols {
    /* brand + one column per link group (a "Volg" column appears once socials exist) */
    grid-template-columns: 1.4fr;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}
.f2-brand {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  align-items: center;
}
@media (min-width: 900px) {
  .f2-brand {
    grid-column: auto;
    align-items: start;
  }
}
.f2-brand .inf {
  width: 64px;
  height: 32px;
  flex: none;
}
.f2-brand p {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.f2-brand .mono {
  font-weight: 400;
  color: var(--mute-d);
  font-size: 11px;
}
.f2 h4 {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 11px;
  font-weight: 500;
}
.f2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.f2 li {
  color: var(--mute-d);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.f2 li a {
  text-decoration: none;
  transition: color 0.2s;
}
.f2 li a:hover {
  color: var(--cream);
}
.f2-legal {
  max-width: 1500px;
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-d);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  color: var(--mute-d);
  font-size: 14px;
}
.f2-legal .mono {
  font-size: 11px;
}

/* ---------- reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2 .hero {
    position: relative;
  }
  .hero-dim {
    display: none;
  }
  .tk-row {
    flex-wrap: wrap;
    row-gap: 14px;
  }
  .ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tk-row + .tk-row {
    display: none;
  }
}
/* the static ∞ in the wordmark uses the same inset as the 3D loop */
.wm-sym .inf {
  transform: scale(0.88);
}

/* ==========================================================================================================
   Site v2 — all pages besides the homepage (docs/SITE-V2-PLAN.md), plus the shared header additions (Meer menu,
   Nonstop Agent button). Same tokens as v2.css; build.ts appends this file after it.
   ========================================================================================================== */

.v2 .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v2 fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* ---------- status badges in both themes: "Live" green and glowing, "Binnenkort" calm grey ---------- */
.v2 .st {
  font-family: var(--mn);
}
.v2 .st.live,
.v2 [data-theme='dark'] .st.live {
  color: var(--green);
  border-color: rgba(22, 196, 127, 0.55);
  background: rgba(22, 196, 127, 0.12);
}
.v2 .st.live::before {
  box-shadow: 0 0 0 3px rgba(22, 196, 127, 0.22);
}
.v2 [data-theme='light'] .st.live {
  color: var(--green-ink);
  border-color: rgba(10, 107, 66, 0.45);
  background: rgba(22, 196, 127, 0.14);
}
.v2 .st.building,
.v2 [data-theme='dark'] .st.building {
  color: var(--mute-d);
  border-color: rgba(242, 241, 236, 0.18);
  background: rgba(242, 241, 236, 0.04);
}
.v2 .st.building::before {
  opacity: 0.7;
}
.v2 [data-theme='light'] .st.building {
  color: var(--mute-l);
  border-color: rgba(22, 21, 20, 0.18);
  background: rgba(22, 21, 20, 0.04);
}

/* ---------- header: Meer menu + Nonstop Agent ---------- */
.h2r-nav .more {
  position: relative;
}
.h2r-nav .more summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 999px;
  opacity: 0.78;
}
.h2r-nav .more summary::-webkit-details-marker {
  display: none;
}
.h2r-nav .more[open] summary,
.h2r-nav .more summary:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.12);
}
.more-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  display: grid;
  padding: 8px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--line-d);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  animation: pop-in 0.35s var(--e-out);
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}
.more-pop a {
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 15px;
}
.more-pop a:hover {
  background: rgba(22, 196, 127, 0.14);
  color: var(--green);
}
.ag-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: 500 14px/1 var(--sg);
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.ag-btn:hover {
  background: var(--ink);
  color: var(--cream);
}
html[data-zone='dark'] .ag-btn:hover {
  background: var(--cream);
  color: var(--ink);
}
.ag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(22, 196, 127, 0.7);
  animation: ping 2.2s infinite;
}
.ag-long {
  display: none;
}
@media (min-width: 900px) {
  .ag-btn {
    display: inline-flex;
  }
}
@media (min-width: 1400px) {
  .ag-long {
    display: inline;
  }
  .ag-short {
    display: none;
  }
}
.h2r .mnav nav {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  gap: 2px;
}
.mnav .ag-btn-m {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 6px;
  border-color: var(--green);
  color: var(--green);
}
.mnav .ag-btn-m .ag-long {
  display: inline;
}
.mnav .ag-btn-m .ag-short {
  display: none;
}
.mnav-h {
  margin: 10px 14px 2px;
  color: var(--mute-d);
}
.mnav nav a.mnav-s {
  font-size: 15px;
  padding: 10px 14px;
}
.mnav nav .pill {
  margin: 8px 0 4px;
}
@media (max-width: 1039px) {
  .h2r-scan {
    display: none !important;
  }
}

/* ---------- branch chips (shared) ---------- */
form:not(.chips-on) .wz-groups {
  display: none;
}
.chips-on .br-set {
  display: none;
}
.chips-on .br-set.on {
  display: block;
  animation: step-in 0.5s var(--e-out);
}

/* ---------- page hero ---------- */
.phero {
  position: relative;
  z-index: 1;
  min-height: 66vh;
  min-height: 66svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--hh) + 64px) 0 clamp(44px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.phero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--g);
  display: grid;
  gap: 40px;
  align-items: end;
}
@media (min-width: 1000px) {
  .phero-aside .phero-in {
    grid-template-columns: 1.5fr 1fr;
  }
}
.phero-h {
  margin: 0;
  max-width: 15ch;
  font: 700 clamp(48px, 8.4vw, 150px) / 0.9 var(--sg);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.rw {
  display: inline-block;
  white-space: pre;
  animation: rw-in 0.6s var(--e-out) backwards;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes rw-in {
  from {
    opacity: 0;
    transform: translateY(0.25em);
  }
}
.phero-lead {
  max-width: 46ch;
  margin: clamp(22px, 3vw, 34px) 0 0;
  font: 500 clamp(18px, 1.8vw, 24px) / 1.4 var(--sg);
  letter-spacing: -0.012em;
  color: var(--mute-l);
  animation: fade-up 0.7s var(--e-out) 0.2s backwards;
}
[data-theme='dark'] .phero-lead {
  color: rgba(242, 241, 236, 0.82);
}
.phero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 40px);
  animation: fade-up 0.7s var(--e-out) 0.3s backwards;
}
.phero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: ken 18s var(--e-io) infinite alternate;
}
@keyframes ken {
  to {
    transform: scale(1.14) translate(-1.5%, -1%);
  }
}
.phero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* the same grain as the sections below, and a fade to exactly their colour: no seam at the hero's foot */
  background:
    var(--grain-d) 0 0 / 160px 160px,
    linear-gradient(
      180deg,
      rgba(27, 26, 24, 0.55) 0,
      rgba(27, 26, 24, 0.35) 40%,
      rgba(27, 26, 24, 0.9) 82%,
      var(--dark) 100%
    ),
    linear-gradient(90deg, rgba(27, 26, 24, 0.75), transparent 70%);
}
.phero-img .phero-h {
  max-width: 18ch;
}
.big-num {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.big-num b {
  font: 700 clamp(110px, 18vw, 260px) / 0.8 var(--sg);
  letter-spacing: -0.07em;
  color: var(--green-ink);
}
.big-num .mono {
  color: var(--mute-l);
}

/* ---------- sections ---------- */
.v2 .sec2 {
  position: relative;
  z-index: 2;
  padding: var(--sec-y) 0;
}
/* tool pages (scan, demo, booking, contact, questions, legal): a short hero, the tool right below it */
.v2 .phero-compact {
  min-height: 0;
  padding: calc(var(--hh) + clamp(36px, 5vw, 64px)) 0 clamp(20px, 3vw, 36px);
}
.phero-compact .phero-h {
  max-width: 20ch;
  font-size: clamp(42px, 6.2vw, 104px);
}
.phero-compact .phero-lead {
  margin-top: clamp(14px, 2vw, 22px);
}
.v2 .phero-compact + .talk,
.v2 .phero-compact + .sec2 {
  padding-top: clamp(12px, 2vw, 28px);
}
.v2 .sec2[data-theme='light'] + .sec2[data-theme='light'] {
  padding-top: 0;
}
.two {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1000px) {
  .two {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}
.tick2 {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.tick2 li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.tick2 svg {
  width: 18px;
  height: 18px;
  color: var(--green);
  flex: none;
}
.tick2-l {
  display: grid;
  margin: 0;
}
.tick2-l li {
  align-items: flex-start;
  font-size: 18px;
}
[data-theme='light'] .tick2 svg {
  color: var(--green-ink);
}

/* ---------- call-to-action band ---------- */
.v2 .band {
  position: relative;
  z-index: 2;
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.band::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmax;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(22, 196, 127, 0.22), transparent);
  pointer-events: none;
}
.band-in {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
}
.band .s-h {
  max-width: 14ch;
}
.band-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ---------- mini-screens ---------- */
.mini {
  border-radius: 16px;
  background: linear-gradient(180deg, #22211f, #1a1918);
  border: 1px solid var(--line-d);
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
.mini-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-d);
  font-size: 11px;
  color: var(--mute-d);
}
.mini-bar .tl i {
  width: 8px;
  height: 8px;
}
.mini-bar .mono {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
}
.mini-tag {
  flex: none !important;
  color: var(--green);
}
.mini ul {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.mini li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 13.5px;
}
.mini li b {
  flex: none;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--green);
}
.motion .v2 .rv.in .mini li b,
.motion .v2 .in .mini li b {
  animation: mini-done 7s var(--e-out) infinite;
  animation-delay: calc(var(--i) * 0.7s);
}
@keyframes mini-done {
  0%,
  18% {
    opacity: 0.25;
    transform: translateX(-4px);
  }
  26%,
  92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0.25;
  }
}

/* ---------- services page ---------- */
.svc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .svc-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-card {
    grid-column: span var(--span2, 1);
  }
}
@media (min-width: 1150px) {
  .svc-c3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .svc-c3 .svc-card {
    grid-column: span var(--span3, 1);
  }
  .svc-c2 .svc-card {
    grid-column: auto;
  }
}
.svc-card {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 14px 14px 22px;
  border-radius: 22px;
  border: 1px solid var(--line-l);
  background: var(--paper);
  overflow: hidden;
}
[data-theme='dark'] .svc-card {
  border-color: var(--line-d);
  background: rgba(255, 255, 255, 0.03);
}
.svc-card-b {
  padding: 0 8px;
}
.svc-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font: 600 22px/1.15 var(--sg);
  letter-spacing: -0.02em;
}
.svc-card h3 b {
  font-weight: 600;
}
.svc-card p {
  margin: 0;
  color: var(--mute-l);
  font-size: 15.5px;
}
[data-theme='dark'] .svc-card p {
  color: var(--mute-d);
}

/* ---------- how it works ---------- */
.v2 .how {
  position: relative;
  z-index: 2;
  padding: var(--sec-y) 0;
}
.how-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 46px;
  display: grid;
  gap: clamp(48px, 7vw, 100px);
}
.how-line {
  position: absolute;
  left: 14px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line-d);
}
.how-line i {
  display: block;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(var(--green), var(--green-2));
  box-shadow: 0 0 16px var(--green);
}
.how-step {
  position: relative;
  display: grid;
  gap: 22px;
  align-items: center;
}
.how-n {
  position: absolute;
  left: -46px;
  top: 2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--green);
  color: var(--green);
  font-size: 11px;
}
.how-t h3 {
  margin: 0 0 10px;
  font: 700 clamp(30px, 4vw, 56px) / 1 var(--sg);
  letter-spacing: -0.04em;
}
.how-t p {
  margin: 0;
  max-width: 46ch;
  color: var(--mute-d);
  font-size: 18px;
}
@media (min-width: 900px) {
  .how-steps {
    padding-left: 80px;
  }
  .how-line {
    left: 24px;
  }
  .how-n {
    left: -80px;
    width: 50px;
    height: 50px;
    font-size: 12px;
  }
  .how-step {
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
  }
}

/* ---------- branch page ---------- */
.story2-grid,
.calc2-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1000px) {
  .story2-grid,
  .calc2-grid {
    grid-template-columns: 1fr 1fr;
    gap: 70px;
  }
}
.v2 .phone-wrap.scene {
  width: auto;
  display: grid;
  gap: 12px;
  justify-items: stretch;
  margin: 0;
}
.v2 .phone-wrap.scene .sim-tag {
  justify-self: start;
  margin: 0;
  position: static;
}
.scene .win {
  position: relative;
  top: 0;
}
.scene-main {
  padding-bottom: 28px;
}
/* the conversation is visible at rest; only a scene armed by client/home.ts hides its bubbles until it plays */
.motion .v2 [data-play]:not(.armed) .step {
  opacity: 1;
  transform: none;
}
.scene-res {
  margin: 16px 0 0;
}
.svc2-groups {
  column-gap: 40px;
}
@media (min-width: 700px) {
  .svc2-groups {
    columns: 2;
  }
}
@media (min-width: 1000px) {
  .svc2-groups {
    columns: 3;
  }
}
.svc2-g + .svc2-g {
  margin-top: 30px;
}
.svc2-groups h3 {
  margin: 0 0 12px;
  color: var(--green-ink);
  break-after: avoid;
}
.svc2-groups li {
  break-inside: avoid;
}
.svc2 {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-l);
}
.svc2 li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-l);
}
.svc2 b {
  font-weight: 600;
  font-size: 17px;
}
.svc2 p {
  margin: 4px 0 0;
  color: var(--mute-l);
  font-size: 14.5px;
}
.svc-note {
  font-family: var(--mn);
  font-size: 11px !important;
  color: #7a4a00 !important;
}
.calc2-card {
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  background: var(--ink);
  color: var(--cream);
}
.calc2-card dl {
  margin: 0 0 24px;
  display: grid;
}
.calc2-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-d);
  font-size: 15px;
}
.calc2-card dt {
  color: var(--mute-d);
}
.calc2-card dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.calc2-k {
  margin: 0;
  color: var(--green);
}
.calc2-v {
  margin: 6px 0 0;
  font: 700 clamp(56px, 7vw, 96px) / 1 var(--sg);
  letter-spacing: -0.05em;
}
.calc2-per {
  margin: 8px 0 18px;
  color: var(--mute-d);
}
.calc2-note {
  margin: 0;
  color: var(--mute-d);
  font-size: 11px;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.02em;
}
.scanpt-l {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-d);
}
@media (min-width: 900px) {
  .scanpt-l {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }
}
.scanpt-l li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-d);
  font: 500 clamp(19px, 1.8vw, 24px) / 1.25 var(--sg);
}
.scanpt-l .mono {
  color: var(--green);
}
.scanpt-l .extra {
  color: var(--green);
}
.pk-note {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  color: var(--mute-l);
  font-size: 15px;
}
.pk-l .st {
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- booking page ---------- */
.book2-form {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .book2-form {
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: start;
  }
}
.book2-slots {
  padding: clamp(20px, 3vw, 34px);
  border-radius: 24px;
  background: var(--ink);
  color: var(--cream);
}
.book2-fields {
  display: grid;
  gap: 16px;
}
.book2-fields .pill {
  justify-self: start;
  margin-top: 10px;
}
.v2 .book2 .slots .day h3 {
  color: var(--mute-d);
  font: 500 12px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2 .book2 .slot {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-d);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}
.v2 .book2 .slot:hover {
  border-color: var(--green);
}
.v2 .book2 .slot[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.in2.ta {
  min-height: 120px;
  padding: 14px 18px;
  line-height: 1.5;
  resize: vertical;
}
select.in2 {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper) linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 20px top 52% / 7px
    7px no-repeat;
  cursor: pointer;
}
.book2-mail {
  margin-top: 30px;
  color: var(--mute-l);
  text-transform: none;
}

/* ---------- demo page ---------- */
.v2 .demo2 {
  position: relative;
  z-index: 2;
  padding: var(--sec-y) 0;
}
.demo2-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .demo2-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .demo2-side {
    position: sticky;
    top: 100px;
  }
}
.demo2-form {
  display: grid;
  gap: 26px;
}
.demo2 .chip2 span {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-d);
}
.demo2 .chip2:hover span {
  border-color: var(--cream);
}
.demo2 .chip2 input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.demo2 .chip2 input:checked + span::before {
  background: var(--ink);
}
.demo2 .wz-q > legend,
.demo2 .br-set legend {
  color: var(--mute-d);
}
.demo2-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.mic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 0 30px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font: 600 19px/1 var(--sg);
  cursor: pointer;
  transition:
    transform 0.35s var(--e-out),
    box-shadow 0.3s;
}
.mic:hover {
  box-shadow: 0 16px 50px -12px rgba(22, 196, 127, 0.8);
}
.mic:disabled {
  opacity: 0.6;
  cursor: progress;
}
.mic-ic {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--green);
}
.mic-ic svg {
  width: 24px;
  height: 24px;
}
.mic-ring {
  position: absolute;
  left: 12px;
  top: 11px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  pointer-events: none;
}
.mic.live .mic-ring {
  animation: mic-ring 1.6s var(--e-out) infinite;
}
@keyframes mic-ring {
  from {
    box-shadow: 0 0 0 0 rgba(22, 196, 127, 0.8);
  }
  to {
    box-shadow: 0 0 0 26px rgba(22, 196, 127, 0);
  }
}
.demo2-mic,
.demo2-lim {
  margin: 0;
  color: var(--mute-d);
  font-size: 11px;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.02em;
}
.demo2 .err {
  color: #ffb4a8;
  background: rgba(255, 122, 107, 0.1);
  border: 1px solid rgba(255, 122, 107, 0.3);
}
.demo2-side {
  display: grid;
  gap: 18px;
  align-content: start;
}
.demo2-side .num2 {
  margin-top: 0;
}
.demo2-tr {
  min-height: 320px;
  max-height: 520px;
  overflow-y: auto;
  padding-bottom: 24px;
}
.demo-status {
  margin: 0 0 16px;
  color: var(--mute-d);
  font-size: 11px;
}
.num2 {
  position: relative;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
[data-theme='light'] .num2 {
  border-color: var(--line-l);
  background: var(--paper);
}
.num2 .mono {
  margin: 0;
  color: var(--green);
}
[data-theme='light'] .num2 .mono {
  color: var(--green-ink);
}
.num2-v {
  margin: 8px 0;
  font: 700 clamp(28px, 3vw, 40px) / 1.1 var(--sg);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.num2-v a {
  text-decoration: none;
}
.num2 p:last-child {
  margin: 0;
  color: var(--mute-d);
  font-size: 15px;
}

/* ---------- about, trust, referral, partners ---------- */
/* about (round 4): what we do, how we work, three outcomes */
.phero-sub {
  display: block;
  margin-bottom: 10px;
  font: 700 clamp(24px, 2.6vw, 36px) / 1.1 var(--sg);
  letter-spacing: -0.035em;
  color: var(--green);
}
.about-what-g {
  display: grid;
  gap: 18px;
}
@media (min-width: 1000px) {
  .about-what-g {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: start;
  }
}
.about-what-g .s-h {
  margin: 0;
}
.about-what-t {
  margin: 0;
  max-width: 34ch;
  font: 500 clamp(22px, 2.3vw, 32px) / 1.3 var(--sg);
  letter-spacing: -0.03em;
}
.out3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
@media (min-width: 900px) {
  .out3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.out3 li {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--line-d);
}
@media (min-width: 900px) {
  .out3 li {
    padding: 8px clamp(22px, 3vw, 44px) 12px;
    border-top: 0;
    border-left: 1px solid var(--line-d);
  }
  .out3 li:first-child {
    padding-left: 0;
    border-left: 0;
  }
}
.out3-n {
  color: var(--green);
}
.out3-w {
  font: 700 clamp(44px, 5.4vw, 88px) / 0.95 var(--sg);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.out3 p {
  margin: 0;
  max-width: 30ch;
  color: var(--mute-d);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.45;
}
.cards4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) {
  .cards4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1150px) {
  .cards4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .cards3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card4 {
  position: relative;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--line-l);
  background: var(--paper);
  overflow: hidden;
}
[data-theme='dark'] .card4 {
  border-color: var(--line-d);
  background: rgba(255, 255, 255, 0.03);
}
.card4 .mono {
  color: var(--green-ink);
}
[data-theme='dark'] .card4 .mono {
  color: var(--green);
}
.card4 h3 {
  margin: 18px 0 10px;
  font: 600 24px/1.1 var(--sg);
  letter-spacing: -0.025em;
}
.card4 p {
  margin: 0;
  color: var(--mute-l);
  font-size: 15.5px;
}
[data-theme='dark'] .card4 p {
  color: var(--mute-d);
}
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-d);
}
.rules li {
  display: flex;
  gap: 22px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-d);
  font: 500 clamp(19px, 2vw, 28px) / 1.3 var(--sg);
  letter-spacing: -0.015em;
}
.rules .mono {
  color: var(--green);
  flex: none;
}
.facts {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-l);
}
@media (min-width: 800px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
  }
}
.facts div {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-l);
}
.facts dt {
  color: var(--mute-l);
}
.facts dd {
  margin: 0;
  font: 500 22px/1.2 var(--sg);
  overflow-wrap: anywhere;
}
.facts-note {
  margin-top: 26px;
  color: var(--mute-l);
  text-transform: none;
}
.ref-t {
  width: 100%;
  border-collapse: collapse;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.ref-t th {
  padding: 18px 22px;
  text-align: left;
  font: 500 11px/1.3 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-d);
  border-bottom: 1px solid var(--line-d);
}
.ref-t td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-d);
  font-size: 18px;
}
.ref-t td b {
  position: relative;
  display: inline-block;
  min-width: 70px;
  font: 700 26px/1 var(--sg);
  color: var(--green);
}
.ref-t td b::after {
  content: '';
  display: block;
  height: 4px;
  margin-top: 8px;
  width: calc(var(--w) * 1.4);
  max-width: 140px;
  border-radius: 4px;
  background: var(--green);
}
/* ---------- glass cards with an icon (round 4; replaces the pill chip lists) ---------- */
.gcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}
@media (min-width: 700px) {
  .gcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1100px) {
  .gcards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 132px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(242, 241, 236, 0.1);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 60%);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.35s var(--e-out),
    border-color 0.3s,
    box-shadow 0.35s;
}
.gcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 0% 0%, rgba(46, 230, 154, 0.24), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
}
.gcard:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 230, 154, 0.42);
  box-shadow: 0 18px 40px -22px rgba(46, 230, 154, 0.55);
}
.gcard:hover::before {
  opacity: 1;
}
.gc-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(46, 230, 154, 0.25);
  background: rgba(46, 230, 154, 0.07);
  color: #2ee69a;
}
.gc-ic .ic {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}
.gc-l {
  max-width: 100%;
  font: 500 18px/1.25 var(--sg);
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.gc-x {
  margin-top: auto;
}
.gc-x .st {
  font-size: 11px;
}
[data-theme='light'] .gcard {
  border-color: var(--line-l);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.45));
}
[data-theme='light'] .gc-l {
  color: var(--ink);
}
[data-theme='light'] .gc-ic {
  color: var(--green-ink);
}
@media (max-width: 699px) {
  .gcard {
    min-height: 0;
    padding: 16px;
    gap: 12px;
  }
  .gc-l {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard,
  .gcard:hover {
    transform: none;
  }
}

/* ---------- integrations (round 4): the integration cloud around the ∞ core, then the compact list ---------- */
.v2 .kcloud-sec {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px);
  overflow-x: clip;
}
.kcloud {
  position: relative;
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 40px) 0;
  border-radius: 32px;
  border: 1px solid rgba(46, 230, 154, 0.16);
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(22, 196, 127, 0.22), transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(242, 241, 236, 0.09) 1px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  isolation: isolate;
}
.kcloud::before {
  /* a light beam through the core */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 230, 154, 0.55), transparent);
  z-index: -1;
}
.kc-r1 {
  order: 1;
}
.kc-r2 {
  order: 2;
}
.kc-core {
  order: 3;
}
.kc-r3 {
  order: 4;
}
.kc-r4 {
  order: 5;
}
.kc-row {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.kc-track {
  flex: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
  animation: kc-drift calc(var(--n, 10) * 5.5s) linear infinite;
}
.kc-r2 .kc-track,
.kc-r4 .kc-track {
  animation-direction: reverse;
}
.kc-r3 .kc-track {
  animation-duration: calc(var(--n, 10) * 6.5s);
}
.kcloud:hover .kc-track {
  animation-play-state: paused;
}
@keyframes kc-drift {
  to {
    transform: translateX(-100%);
  }
}
.kt {
  position: relative;
  flex: none;
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 12px 15px 11px;
  border-radius: 14px;
  border: 1px solid rgba(242, 241, 236, 0.1);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--e-out);
}
.kt:hover {
  border-color: rgba(46, 230, 154, 0.55);
  box-shadow: 0 0 26px -6px rgba(46, 230, 154, 0.55);
  transform: translateY(-2px);
}
.kt-n {
  font: 600 16px/1.15 var(--sg);
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;
}
.kt-m {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(167, 163, 155, 0.8);
  white-space: nowrap;
}
.kt-dot,
.kc-l i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 241, 236, 0.45);
}
.kt-building .kt-dot,
.kc-l.building i {
  border-color: transparent;
  background: rgba(242, 241, 236, 0.55);
}
.kt-live .kt-dot,
.kc-l.live i {
  border-color: transparent;
  background: var(--green-2);
  box-shadow: 0 0 10px 2px rgba(46, 230, 154, 0.7);
}
.kt-live {
  border-color: rgba(46, 230, 154, 0.5);
  background: linear-gradient(160deg, rgba(46, 230, 154, 0.16), rgba(46, 230, 154, 0.03));
}
.kt-sub {
  font-size: 12.5px;
  color: var(--mute-d);
  white-space: nowrap;
}
.kt-st {
  font-style: normal;
}
.kt-live .kt-st {
  color: var(--green-2);
}
.kc-core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: clamp(18px, 3vw, 30px) 0;
  text-align: center;
}
.kc-core b {
  font: 700 clamp(20px, 2.2vw, 28px) / 1 var(--sg);
  letter-spacing: -0.035em;
  color: var(--cream);
}
.kc-core .mono {
  color: var(--green);
  font-size: 11px;
}
.kc-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(92px, 10vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 154, 0.45);
  background: radial-gradient(circle, rgba(22, 196, 127, 0.28), rgba(27, 26, 24, 0.9) 72%);
  box-shadow:
    0 0 40px rgba(22, 196, 127, 0.45),
    inset 0 0 22px rgba(46, 230, 154, 0.2);
}
.kc-mark .inf {
  width: 64%;
  height: auto;
}
.kc-ring {
  position: absolute;
  left: 50%;
  top: clamp(18px, 3vw, 30px);
  width: clamp(92px, 10vw, 128px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 154, 0.5);
  animation: kc-pulse 3.2s var(--e-out) infinite;
  pointer-events: none;
}
.kc-ring2 {
  animation-delay: 1.6s;
}
@keyframes kc-pulse {
  from {
    opacity: 0.8;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 2.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kc-track {
    animation: none;
  }
  .kc-row {
    flex-wrap: wrap;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .kc-track {
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 100%;
    padding: 0 16px;
  }
  .kc-dup {
    display: none;
  }
  .kc-ring {
    display: none;
  }
}
.kc-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 30px;
  margin-top: 22px;
}
.kc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  color: var(--mute-d);
  font-size: 11px;
}
.kc-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kc-other {
  margin: 0;
  font-size: 17px;
}
.kc-other a {
  color: var(--green);
}
/* the list per integration: compact rows, two columns on wide screens */
.v2 .ints-sec {
  padding-top: clamp(28px, 4vw, 56px);
}
.ints-h {
  margin: 0 0 16px;
  color: var(--green);
}
.ints2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  column-gap: 40px;
  border-top: 1px solid var(--line-d);
}
@media (min-width: 900px) {
  .ints2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.int2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-d);
}
.int2 h3 {
  margin: 0 0 3px;
  font: 600 16.5px/1.2 var(--sg);
  letter-spacing: -0.015em;
}
.int2 p {
  margin: 0;
  color: var(--mute-d);
  font-size: 14px;
  line-height: 1.45;
}
.int-by {
  color: rgba(167, 163, 155, 0.75);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- contact ---------- */
.contact2-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 1000px) {
  .contact2-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 70px;
    align-items: start;
  }
}
.contact2-form {
  display: grid;
  gap: 18px;
}
.contact2-form .pill {
  justify-self: start;
}
.contact2-side {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.contact2-side .num2 {
  width: 100%;
  margin: 0;
}
.contact2-off {
  margin: 0;
  color: var(--mute-l);
  text-transform: none;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.consent2 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  cursor: pointer;
}
.consent2 input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--green-ink);
}
.v2 .contact2 .err {
  color: #b4321f;
  background: rgba(180, 50, 31, 0.08);
  border: 1px solid rgba(180, 50, 31, 0.3);
}

/* ---------- all questions (round 4): the Nonstop Agent on top, then every question compact, grouped ---------- */
.v2 .faq-agent {
  position: relative;
  z-index: 2;
  padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 6vw, 80px);
}
.faq-agent-box {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(18px, 2.6vw, 34px);
  border-radius: 28px;
  border: 1px solid rgba(46, 230, 154, 0.28);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(22, 196, 127, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 30px 90px -30px rgba(22, 196, 127, 0.35);
}
@media (min-width: 1000px) {
  .faq-agent-box {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 40px;
    align-items: center;
  }
}
.faq-agent-head .mono {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--green);
}
.faq-agent-head .s-h {
  margin: 0;
}
.faq-agent-line {
  margin: 14px 0 0;
  max-width: 36ch;
  color: var(--mute-d);
  font-size: 16px;
  line-height: 1.5;
}
.faq-agent .nsa--inline {
  max-width: none;
  height: min(520px, 72dvh);
  border: 0;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.6);
}
.v2 .faqc {
  position: relative;
  z-index: 2;
  padding: 0 0 var(--sec-y);
}
.faqc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 26px;
}
.faqc-h {
  margin: 0;
  color: var(--green);
}
.fsearch.fsearch-s {
  flex: 0 1 380px;
  margin: 0;
}
.fsearch-s input {
  min-height: 46px;
  padding-left: 46px;
  background-position: 16px 50%;
  background-size: 18px;
  font-size: 16px;
}
.faqc-grid {
  columns: 1;
  column-gap: 22px;
}
@media (min-width: 860px) {
  .faqc-grid {
    columns: 2;
  }
}
.faqc-g {
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 16px 18px 8px;
  border-radius: 18px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.025);
}
.faqc-g[hidden] {
  display: none;
}
.faqc-gh {
  margin: 0 0 6px;
  color: var(--green);
}
.faqc-row {
  border-top: 1px solid var(--line-d);
}
.faqc-row:first-of-type {
  border-top: 0;
}
.faqc-row summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font: 500 15.5px/1.35 var(--sg);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.2s;
}
.faqc-row summary::-webkit-details-marker {
  display: none;
}
.faqc-row summary:hover,
.faqc-row[open] summary {
  color: #fff;
}
.faqc-row summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}
.faqc-row summary i {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  transition: transform 0.3s var(--e-out);
}
.faqc-row summary i::before,
.faqc-row summary i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
}
.faqc-row summary i::after {
  transform: rotate(90deg);
}
.faqc-row[open] summary i {
  transform: rotate(45deg);
  color: var(--green);
}
.faqc-row p {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--green);
  max-width: 60ch;
  color: var(--mute-d);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- all questions ---------- */
.faqall .sec-in {
  max-width: 1000px;
}
.fsearch {
  display: block;
  margin-bottom: 40px;
}
.fsearch input {
  width: 100%;
  min-height: 66px;
  padding: 0 24px 0 58px;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.04)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316c47f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    22px 50% / 22px no-repeat;
  color: var(--cream);
  font: 500 19px/1 var(--sg);
}
.fsearch input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 196, 127, 0.2);
}
.fsearch input::placeholder {
  color: var(--mute-d);
}
.fsearch-none {
  color: var(--mute-d);
}
.fgroup + .fgroup {
  margin-top: 50px;
}
.fgroup-h {
  margin: 0 0 10px;
  color: var(--green);
}
.agent-root:empty {
  min-height: 0;
}
.fq-all {
  display: inline-block;
  margin-top: 18px;
  text-decoration: none;
  color: var(--mute-d);
}
.fq-all:hover {
  color: var(--green);
}

/* ---------- legal ---------- */
.legal2-l {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
  border-top: 1px solid var(--line-l);
}
.legal2-l li {
  display: flex;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-l);
}
.legal2-l .mono {
  flex: none;
  color: var(--green-ink);
  padding-top: 6px;
}
.legal2-l h3 {
  margin: 0 0 8px;
  font: 600 22px/1.2 var(--sg);
}
.legal2-l p {
  margin: 0;
  color: var(--mute-l);
}
/* ---------- legal texts (terms, privacy): one calm long page, small readable body type ---------- */
.legal3 .sec-in > * {
  max-width: 780px;
}
.legal3 {
  font: 400 15.5px/1.68 var(--sg);
  color: var(--ink);
}
.legal3 p,
.legal3 li,
.legal3 dd {
  overflow-wrap: anywhere;
}
.legal3-meta p {
  margin: 0 0 12px;
  color: var(--mute-l);
}
.legal3-meta a,
.legal3-art p a {
  color: var(--green-ink);
}
.legal3-pdf {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal3-toc {
  margin: 28px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--line-l);
  border-radius: 14px;
}
.legal3-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 240px;
  column-gap: 28px;
}
.legal3-toc li {
  break-inside: avoid;
  padding: 3px 0;
  font-size: 14.5px;
}
.legal3-toc a,
.legal3-art h3 a {
  color: inherit;
  text-decoration: none;
}
.legal3-toc a:hover,
.legal3-art h3 a:hover {
  text-decoration: underline;
}
.legal3-art {
  padding: 26px 0 6px;
  border-bottom: 1px solid var(--line-l);
  scroll-margin-top: 90px;
}
.legal3-art h3 {
  margin: 0 0 12px;
  font: 600 18px/1.35 var(--sg);
}
.legal3-art h4 {
  margin: 18px 0 6px;
  font: 600 15.5px/1.4 var(--sg);
}
.legal3-art p {
  margin: 0 0 12px;
}
.legal3-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal3-items > li {
  display: flex;
  gap: 14px;
  margin: 0 0 12px;
  scroll-margin-top: 90px;
}
.legal3-n {
  flex: none;
  min-width: 42px;
  color: var(--mute-l);
  font-variant-numeric: tabular-nums;
}
.legal3-sub {
  margin: 8px 0 0;
  padding-left: 22px;
  list-style: lower-alpha;
}
.legal3-sub li {
  margin: 0 0 6px;
}
.legal3-block dl {
  margin: 0 0 8px;
}
.legal3-block dl > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line-l);
}
.legal3-block dt {
  color: var(--mute-l);
}
.legal3-block dd {
  margin: 0;
}
.legal3-table {
  overflow-x: auto;
  margin: 6px 0 14px;
}
.legal3-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.legal3-table th,
.legal3-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-top: 1px solid var(--line-l);
}
.legal3-table thead th {
  color: var(--mute-l);
  font-weight: 600;
}
@media (max-width: 640px) {
  .legal3-block dl > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .legal3-n {
    min-width: 34px;
  }
}
@media print {
  .legal3 {
    font-size: 11pt;
  }
  .legal3-toc {
    display: none;
  }
}
.todo-block {
  max-width: 900px;
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1.5px dashed #c98a1a;
  background: rgba(255, 181, 71, 0.1);
}
.todo-block h3 {
  margin: 0 0 6px;
}
.todo-block p {
  margin: 0;
}

/* ---------- thank-you, 404 ---------- */
.thanks-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.thanks-when .mono {
  font-size: 13px;
  text-transform: none;
}
.res-skip {
  margin: 16px 0 0;
}
.res-skip a {
  color: var(--mute-d);
}

/* ---------- /k card page ---------- */
body.card-body {
  background: var(--cream);
  padding-bottom: 0;
}
.card2 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 26px;
  padding: 40px 20px;
  text-align: center;
}
.card2-wm {
  display: grid;
  justify-items: center;
  margin: 0;
  font: 700 clamp(56px, 19vw, 120px) / 0.88 var(--sg);
  letter-spacing: -0.06em;
  animation: fade-up 1s var(--e-out) backwards;
}
.card2-inf {
  display: block;
  width: 1.7em;
  height: 0.85em;
  margin: 0.06em 0;
  animation: wm-pop 1.4s var(--e-out) 0.3s backwards;
}
.card2-line {
  max-width: 30ch;
  margin: 0;
  font: 500 19px/1.4 var(--sg);
  color: var(--mute-l);
}
.card2-btns {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
}
.card2-btns .pill {
  width: 100%;
}
.card2-en a {
  color: var(--mute-l);
}

/* ---------- small screens ---------- */
@media (max-width: 599px) {
  .phero {
    min-height: 70svh;
  }
  .ref-t th,
  .ref-t td {
    padding: 14px;
  }
  .rules li {
    gap: 14px;
  }
  .mic {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phero-media img {
    animation: none;
  }
}

/* booking slots: days stacked, times as chips */
.book2 .wz-leg {
  float: none;
}
.v2 .book2 .slots {
  display: grid;
  gap: 22px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 6px;
}
.v2 .book2 .slots .times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ==========================================================================================================
   The Groeiscan as a scripted chat (kit.tsx ScanWizard + client/chat.ts): a dark glass panel with the thread,
   and a live scan panel beside it (a compact bar on phones).
   ========================================================================================================== */
.chat-wrap {
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 1000px) {
  .chat-wrap {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
  }
}
.v2 .chat-panel {
  position: relative;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(22, 196, 127, 0.1), transparent 55%),
    linear-gradient(180deg, #22211f, #191817);
  border: 1px solid var(--line-d);
  box-shadow:
    0 60px 140px -60px rgba(22, 196, 127, 0.45),
    0 30px 80px -30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--cream);
  overflow: hidden;
}
.chat-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.02);
}
.chat-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.chat-honest {
  margin-left: auto;
  font-size: 11px;
  color: var(--mute-d);
}
@media (max-width: 520px) {
  .chat-honest {
    display: none;
  }
}
.bot-av {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 196, 127, 0.14);
  color: var(--green);
  box-shadow: 0 0 18px rgba(22, 196, 127, 0.25);
}
.bot-av svg {
  width: 22px;
  height: 11px;
}
.chat {
  padding: clamp(16px, 3vw, 30px);
}
.chat-log {
  display: grid;
  gap: 14px;
}
.cq {
  display: grid;
  gap: 12px;
}
.cq-bot {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.v2 .bubble {
  margin: 0;
  max-width: 560px;
  padding: 13px 16px;
  border-radius: 18px;
  font: 400 16.5px/1.45 var(--sg);
}
.v2 .bubble.bot {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-d);
  border-bottom-left-radius: 6px;
}
.v2 .bubble.me {
  justify-self: end;
  max-width: 85%;
  background: var(--green);
  color: var(--ink);
  border: 0;
  border-bottom-right-radius: 6px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.3s var(--e-out),
    box-shadow 0.3s;
}
.v2 .bubble.me::after {
  content: ' ✎';
  opacity: 0;
  transition: opacity 0.2s;
}
.v2 .bubble.me:hover,
.v2 .bubble.me:focus-visible {
  box-shadow: 0 10px 30px -10px rgba(22, 196, 127, 0.8);
  transform: translateY(-1px);
}
.v2 .bubble.me:hover::after,
.v2 .bubble.me:focus-visible::after {
  opacity: 0.6;
}
.v2 .bubble.me:disabled {
  cursor: default;
}
.v2 .bubble.me:disabled::after {
  display: none;
}
.cq-dots {
  display: none;
  gap: 4px;
  padding: 4px 0;
}
.cq-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute-d);
  animation: bob 1s infinite;
}
.cq-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.cq-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.cq-ctl {
  display: grid;
  gap: 12px;
  margin-left: 44px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(22, 196, 127, 0.35);
  background: rgba(22, 196, 127, 0.04);
}
.cq-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cq-go,
.cq-skip {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--ink);
  font: 600 15px/1 var(--sg);
  cursor: pointer;
}
.cq-skip {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-d);
}
.cq-go:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chat .in2 {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-d);
  color: var(--cream);
}
.chat .in2::placeholder {
  color: var(--mute-d);
}
.chat .in2:focus {
  border-color: var(--green);
}
.chat-two {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .chat-two {
    grid-template-columns: 1fr 1fr;
  }
}
.chat .chip2 span {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-d);
}
.chat .chip2:hover span {
  border-color: var(--cream);
}
.chat .chip2 input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.chat .chip2 input:checked + span::before {
  background: var(--ink);
}
.chat .wz-q > legend,
.chat .br-set legend {
  color: var(--mute-d);
}
.chat .wz-sl {
  max-width: none;
}
.chat .wz-big {
  color: var(--cream);
  margin-bottom: 6px;
}
.chat .rng::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--green) var(--fill, 0%), rgba(255, 255, 255, 0.12) var(--fill, 0%));
}
.chat .rng::-moz-range-track {
  background: rgba(255, 255, 255, 0.12);
}
.rng-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mute-d);
}
.chat-send {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 26px;
}
.chat-priv {
  margin: 0;
  color: var(--mute-d);
  font-size: 11px;
  text-transform: none;
}
.chat .err {
  color: #ffb4a8;
  background: rgba(255, 122, 107, 0.1);
  border: 1px solid rgba(255, 122, 107, 0.3);
}
.echo:empty {
  display: none;
}

/* chat mode (JavaScript on): one question at a time */
.chat-on .cq.pending {
  display: none;
}
.chat-on .cq.done .cq-ctl {
  display: none;
}
.chat-on .cq:not(.active) .cq-ctl {
  display: none;
}
.chat-on .cq.active .cq-ctl {
  animation: fade-up 0.5s var(--e-out);
}
.chat-on .cq.active .cq-bot,
.chat-on .cq.done .cq-ans {
  animation: fade-up 0.45s var(--e-out);
}
.chat-on .cq.typing .cq-dots {
  display: inline-flex;
}
.chat-on .cq.typing .cq-text,
.chat-on .cq.typing .cq-ctl {
  display: none;
}
.chat-on .chat-send {
  display: none;
}
.chat-on.ready .chat-send {
  display: grid;
  animation: fade-up 0.5s var(--e-out);
}
.chat-on.sent .chat-send,
.chat-on.sent .cq.active .cq-ctl {
  display: none;
}
form:not(.chat-on) .cq-btns {
  display: none;
}
form:not(.chat-on) .cq-ans {
  display: none;
}

/* the result inside the panel: findings as message cards, then the booking slots as chips */
.chat-panel .talk-res {
  margin: 0;
  padding: 0 clamp(16px, 3vw, 30px) clamp(20px, 3vw, 34px);
  border: 0;
  display: grid;
  gap: 14px;
}
.chat-panel .finds {
  display: grid;
  gap: 10px;
  margin: 0 0 0 44px !important;
  grid-template-columns: 1fr !important;
}
.v2 .chat-panel .find {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line-d) !important;
  color: var(--cream) !important;
  border-radius: 18px;
  animation: card-in 0.8s var(--e-out) backwards;
}
.v2 .chat-panel .find:nth-child(2) {
  animation-delay: 0.35s;
}
.v2 .chat-panel .find:nth-child(3) {
  animation-delay: 0.7s;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(4px);
  }
}
.v2 .chat-panel .find p,
.v2 .chat-panel .find .find-t span {
  color: var(--mute-d) !important;
}
.v2 .chat-panel .find.sev-high {
  border-left: 3px solid #ff7a6b !important;
}
.v2 .chat-panel .find.sev-high .find-t span {
  color: #ffb4a8 !important;
}
.v2 .chat-panel .find.sev-ok .find-t span {
  color: var(--green) !important;
}
.v2 .chat-panel .co-be {
  margin-left: 44px;
  color: var(--cream);
  background: rgba(22, 196, 127, 0.1);
  border-color: rgba(22, 196, 127, 0.35);
}
.chat-panel .res-note {
  margin: 0 0 0 44px;
  color: var(--mute-d);
}
.chat-panel .talk-book {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  display: grid;
  gap: 14px;
}
.chat-panel #book-form {
  margin-left: 44px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.v2 .chat-panel .slots .times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.v2 .chat-panel .slots .day h3 {
  margin: 10px 0 0;
  font: 500 11px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.v2 .chat-panel .slot {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-d);
  cursor: pointer;
}
.v2 .chat-panel .slot[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.chat-panel .res-skip {
  margin: 0 0 0 44px;
}

/* the live scan panel */
.v2 .chat-live {
  --lvl: 0;
  position: relative;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1d1c1a, #161514);
  border: 1px solid var(--line-d);
  color: var(--cream);
  overflow: hidden;
}
@media (min-width: 1000px) {
  .v2 .chat-live {
    position: sticky;
    top: 96px;
  }
}
.radar {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  margin: 4px auto 18px;
  display: grid;
  place-items: center;
}
.radar .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(22, 196, 127, 0.18);
  transition:
    border-color 0.6s,
    box-shadow 0.6s;
}
.radar .r1 {
  inset: 34%;
}
.radar .r2 {
  inset: 24%;
}
.radar .r3 {
  inset: 12%;
}
.radar .r4 {
  inset: 0;
}
.radar .ring.on {
  border-color: var(--green);
  box-shadow:
    0 0 18px rgba(22, 196, 127, 0.45),
    inset 0 0 18px rgba(22, 196, 127, 0.25);
}
.radar .sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(22, 196, 127, calc(0.12 + var(--lvl) * 0.35)), transparent 22%);
  animation: sweep 4s linear infinite;
}
@keyframes sweep {
  to {
    transform: rotate(1turn);
  }
}
.radar-inf {
  position: relative;
  width: 34%;
  color: var(--green);
  filter: drop-shadow(0 0 calc(6px + var(--lvl) * 14px) rgba(22, 196, 127, 0.9));
  opacity: calc(0.45 + var(--lvl) * 0.55);
  animation: breathe 3s var(--e-io) infinite;
}
.radar-inf svg {
  width: 100%;
  height: auto;
}
@keyframes breathe {
  50% {
    transform: scale(1.06);
  }
}
.live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-head .mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--green);
  font-size: 11px;
}
.live-pct {
  margin: 0;
  font: 700 34px/1 var(--sg);
  letter-spacing: -0.04em;
}
.live-pct span {
  font-size: 18px;
  color: var(--mute-d);
}
.live-checks {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.live-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--mute-d);
  transition: color 0.4s;
}
.live-checks li span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  font-size: 11px;
  transition:
    background-color 0.4s,
    border-color 0.4s;
}
.live-checks li.ok {
  color: var(--cream);
}
.live-checks li.ok span {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.live-checks li.ok span::before {
  content: '✓';
}
.chat-live .live-echo {
  margin: 0;
  display: grid;
}
.chat-live .wz-li {
  font-size: 13.5px;
  padding: 8px 0;
}
.chat-live .wz-live-n {
  margin: 14px 0 0;
}
@media (max-width: 999px) {
  /* phones and tablets: a compact sticky bar below the thread */
  .v2 .chat-live {
    position: sticky;
    bottom: 40px;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  }
  .radar {
    width: 46px;
    margin: 0;
    grid-row: span 2;
  }
  .radar .sweep {
    display: none;
  }
  .live-head .mono {
    font-size: 11px;
  }
  .live-pct {
    font-size: 22px;
  }
  .v2 .chat-live > * {
    min-width: 0;
  }
  .live-checks {
    margin: 0;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 4px 14px;
  }
  .live-checks li span {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
  .live-checks li {
    font-size: 11px;
  }
  .chat-live .live-echo,
  .chat-live .wz-live-n,
  .chat-live .wz-pkg {
    display: none;
  }
  .cq-ctl,
  .chat-panel .finds,
  .chat-panel .co-be,
  .chat-panel .res-note,
  .chat-panel #book-form,
  .chat-panel .res-skip {
    margin-left: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar .sweep,
  .radar-inf {
    animation: none;
  }
}

/* The chat stays put: a fixed-height panel whose thread scrolls inside it, like a chat app; the page never moves
   while the visitor answers (client/chat.ts scrolls only [data-scroll-box]). The live panel matches its height. */
.chat-wrap {
  --chat-h: clamp(540px, calc(100dvh - 190px), 720px);
}
.v2 .chat-panel {
  display: flex;
  flex-direction: column;
  height: var(--chat-h);
}
.chat-bar {
  flex: none;
}
.chat-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 241, 236, 0.18) transparent;
}
@media (min-width: 1000px) {
  .v2 .chat-live {
    height: var(--chat-h);
    overflow-y: auto;
    scrollbar-width: none;
  }
}
@media (max-width: 999px) {
  .chat-wrap {
    --chat-h: clamp(440px, calc(100dvh - 220px), 680px);
  }
}
.demo2-tr {
  overscroll-behavior: contain;
}
@media (max-width: 999px) {
  /* phones: the compact live bar sits right above the chat instead of floating over its answer area */
  .v2 .chat-live {
    order: -1;
    position: relative;
    bottom: auto;
  }
  .chat-wrap {
    gap: 10px;
    --chat-h: clamp(440px, calc(100dvh - 190px), 680px);
  }
}

/* ---------- live scan panel (v3): progress ring, current topic, the visitor's own answers per topic ---------- */
.live-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.pring {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
}
.pring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pring circle {
  fill: none;
  stroke-width: 8;
}
.pring-bg {
  stroke: rgba(242, 241, 236, 0.08);
}
.pring-fg {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0));
  filter: drop-shadow(0 0 6px rgba(22, 196, 127, 0.6));
  transition: stroke-dashoffset 0.8s var(--e-out);
}
.pring-inf {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--green);
  opacity: calc(0.45 + var(--lvl, 0) * 0.55);
  filter: drop-shadow(0 0 calc(4px + var(--lvl, 0) * 10px) rgba(22, 196, 127, 0.85));
}
.pring-inf svg {
  width: 40px;
  height: 20px;
  transform: none;
}
.chat-live .live-head {
  display: grid;
  gap: 2px;
}
.live-now {
  margin: 0;
  font-size: 11px;
  color: var(--mute-d);
}
.live-now span {
  color: var(--cream);
}
.live-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line-d);
}
.live-topics li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-d);
  transition: opacity 0.4s;
}
.live-topics b {
  display: block;
  font: 600 14.5px/1.2 var(--sg);
}
.live-topics p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute-d);
}
.live-topics li.mine p {
  color: var(--cream);
}
.live-topics li.pop p {
  animation: fade-up 0.5s var(--e-out);
}
.lt-ic {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--line-d);
  display: grid;
  place-items: center;
  font-size: 11px;
  transition:
    background-color 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.live-topics li.now .lt-ic {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 196, 127, 0.15);
}
.live-topics li.ok .lt-ic {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.live-topics li.ok .lt-ic::before {
  content: '✓';
}
.live-after {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(22, 196, 127, 0.07);
  border: 1px solid rgba(22, 196, 127, 0.22);
}
.live-after .mono {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 11px;
}
.live-after ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
}
.live-after li::before {
  content: '→ ';
  color: var(--green);
}
@media (max-width: 999px) {
  .live-top {
    margin: 0;
    gap: 12px;
  }
  .pring {
    width: 52px;
    height: 52px;
  }
  .pring-inf svg {
    width: 24px;
    height: 12px;
  }
  .v2 .chat-live {
    grid-template-columns: 1fr;
  }
  .live-topics,
  .live-after,
  .chat-live .wz-pkg {
    display: none;
  }
}

/* ---------- call-moment picker: a strip of days, then the times of that day ---------- */
.daystrip {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 241, 236, 0.18) transparent;
}
.day-b {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 64px;
  padding: 10px 0 9px;
  border-radius: 16px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.3s var(--e-out);
}
.day-b small {
  font: 500 11px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.day-b b {
  font: 700 22px/1.1 var(--sg);
  letter-spacing: -0.03em;
}
.day-b:hover:not(:disabled) {
  border-color: var(--green);
  transform: translateY(-2px);
}
.day-b[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(22, 196, 127, 0.8);
}
.day-b[aria-pressed='true'] small {
  color: rgba(22, 21, 20, 0.7);
}
.day-b:disabled {
  opacity: 0.3;
  cursor: default;
}
.times-h {
  margin: 14px 0 10px;
  font-size: 11px;
  color: var(--mute-d);
}
.v2 .slots .times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.times.in .slot {
  animation: fade-up 0.45s var(--e-out) backwards;
}
.times.in .slot:nth-child(2) {
  animation-delay: 0.05s;
}
.times.in .slot:nth-child(3) {
  animation-delay: 0.1s;
}
.times.in .slot:nth-child(4) {
  animation-delay: 0.15s;
}
.times.in .slot:nth-child(5) {
  animation-delay: 0.2s;
}
.v2 .slots .slot {
  min-width: 86px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  background: transparent;
  color: var(--cream);
  font: 600 16px/1 var(--sg);
  cursor: pointer;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.v2 .slots .slot:hover {
  border-color: var(--green);
}
.v2 .slots .slot[aria-pressed='true'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.v2 .book2 .slots {
  display: block;
  max-height: none;
  overflow: visible;
}
/* the day strip scrolls inside its card: grid items may shrink below their content */
.book2-form > *,
.chat-panel .talk-book,
.chat-panel #book-form,
.chat-panel #slots {
  min-width: 0;
}
.chat-panel #book-form {
  justify-items: stretch;
}
.chat-panel #book-form > .pill {
  justify-self: start;
}

/* scan chat: questions that are not asked, tick-what-applies chips, the big consent choice */
.chat-on .cq.skipped,
form:not(.chat-on) .cq[data-when] .cq-btns {
  display: none;
}
.chip2-m input:checked + span::before {
  content: '✓';
  width: auto;
  height: auto;
  margin-right: 8px;
  border-radius: 0;
  background: none;
  font-size: 13px;
}
.chat .chip2-m input:checked + span::before {
  color: var(--ink);
}
.chips-big2 .chip2 span {
  min-height: 56px;
  padding: 0 22px;
  font-size: 17px;
}
.as:empty {
  display: none;
}

/* ==========================================================================================================
   The Groeiscan result: a score dashboard inside the chat panel (client/dash.ts)
   ========================================================================================================== */
.dash-wrap[hidden] {
  display: none;
}
.dash {
  display: grid;
  gap: 16px;
  margin-left: 44px;
  animation: card-in 0.8s var(--e-out) backwards;
}
.dash-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-d);
}
.dash-ring {
  --v: 0;
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
}
.dash-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.dash-ring circle {
  fill: none;
  stroke-width: 9;
}
.dr-bg {
  stroke: rgba(242, 241, 236, 0.08);
}
.dr-fg {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--v));
  filter: drop-shadow(0 0 8px rgba(22, 196, 127, 0.6));
  animation: ring-in 1.4s var(--e-out) backwards;
}
@keyframes ring-in {
  from {
    stroke-dashoffset: 100;
  }
}
.dash-ring b {
  font: 700 46px/1 var(--sg);
  letter-spacing: -0.04em;
}
.dash-ring small {
  font: 500 11px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.dash-subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dash-subs li {
  display: grid;
  grid-template-columns: 120px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.dash-subs i {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.dash-subs i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--green);
  animation: grow 1.2s var(--e-out) backwards;
}
.dash-subs .ds-medium i::after {
  background: #e8b04a;
}
.dash-subs .ds-high i::after {
  background: #ff7a6b;
}
.dash-subs b {
  text-align: right;
  font-weight: 600;
}
.dash-how {
  border-radius: 14px;
  border: 1px solid var(--line-d);
  padding: 0 14px;
}
.dash-how summary {
  cursor: pointer;
  padding: 12px 0;
  font: 500 11px/1 var(--mn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.dash-how ul {
  margin: 0 0 14px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: var(--mute-d);
}
.dash-lost {
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(22, 196, 127, 0.16), rgba(22, 196, 127, 0.04));
  border: 1px solid rgba(22, 196, 127, 0.35);
}
.dash-lost .mono {
  margin: 0;
  color: var(--green);
  font-size: 11px;
}
.dash-big {
  margin: 6px 0 4px;
  font: 700 clamp(32px, 4vw, 48px) / 1.05 var(--sg);
  letter-spacing: -0.035em;
}
.dash-basis,
.dash-unknown {
  margin: 0;
  color: var(--mute-d);
  font-size: 14px;
}
.dash-unknown {
  color: var(--cream);
  font-size: 16px;
  margin-top: 6px;
}
.dash-eur {
  margin: 8px 0 0;
  font-size: 14px;
}
.dash-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 760px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.dc {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-d);
  border-top: 3px solid var(--green);
  animation: card-in 0.8s var(--e-out) backwards;
}
.dc:nth-child(2) {
  animation-delay: 0.12s;
}
.dc:nth-child(3) {
  animation-delay: 0.24s;
}
.dc:nth-child(4) {
  animation-delay: 0.36s;
}
.dc-medium {
  border-top-color: #e8b04a;
}
.dc-high {
  border-top-color: #ff7a6b;
}
.dc header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc header b {
  font: 600 17px/1.2 var(--sg);
}
.dc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}
.dc-medium .dc-dot {
  background: #e8b04a;
}
.dc-high .dc-dot {
  background: #ff7a6b;
}
.dc-score {
  margin-left: auto;
  font: 700 22px/1 var(--sg);
}
.dc-status {
  margin: 0;
  font-size: 11px;
  color: var(--mute-d);
}
.dc p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
}
.dc-fix .mono,
.dc-svc .mono {
  font-size: 11px;
  color: var(--green);
  margin-right: 4px;
}
.dc-svc {
  margin-top: 4px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line-d);
}
.dc-wow {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(22, 196, 127, 0.14), transparent 60%), rgba(255, 255, 255, 0.04);
}
@media (min-width: 760px) {
  .dc-wow {
    grid-column: 1 / -1;
  }
}
.dc-facts {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
}
.dc-facts .mono {
  margin: 0;
  color: var(--green);
  font-size: 11px;
}
.dc-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dc-facts li {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-d);
  font-size: 13px;
}
.dc-soon {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(242, 241, 236, 0.25);
  color: var(--mute-d);
  font-size: 11px !important;
}
.dash-actions {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line-d);
}
.dash-actions .mono {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 11px;
}
.dash-actions ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dash-actions label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  cursor: pointer;
}
.dash-actions input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
}
.dash-actions input:checked + span {
  text-decoration: line-through;
  opacity: 0.6;
}
@media (max-width: 999px) {
  .dash {
    margin-left: 0;
  }
}
@media (max-width: 520px) {
  .dash-top {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .dash-subs {
    width: 100%;
  }
  .dash-subs li {
    grid-template-columns: 104px 1fr 30px;
  }
}

/* ==========================================================================================================
   Polish (owner's final review, 04-11-2026)
   ========================================================================================================== */
/* The Groeiscan chat sizes to the conversation: a sensible minimum, growing with the thread up to the old fixed
   height, after which the thread scrolls inside it. The live panel no longer forces the same height. */
.v2 .chat-panel {
  height: auto;
  min-height: 0;
  max-height: var(--chat-h);
}
.chat-scroll {
  min-height: 300px;
}
@media (min-width: 1000px) {
  .v2 .chat-live {
    height: auto;
    max-height: var(--chat-h);
  }
}

/* page heroes with their own mood image or video, darkened, with the same "made with AI" caption as the home */
.phero-media .phero-v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phero-media .phero-v:not([src]) {
  display: none;
}
.phero-media::after {
  z-index: 1;
}
.phero-cap {
  position: absolute;
  right: var(--g);
  bottom: 14px;
  z-index: 2;
  margin: 0;
  font-size: 11px;
  color: rgba(242, 241, 236, 0.62);
}
.phero-img .big-num b {
  color: var(--green);
}
.phero-img .big-num .mono {
  color: var(--mute-d);
}
.v2 .phero-compact.phero-img {
  padding-bottom: clamp(36px, 5vw, 64px);
}
.v2 .phero-compact.phero-img + .sec2,
.v2 .phero-compact.phero-img + .faq2 {
  padding-top: var(--sec-y);
}
.phero .hero-grid {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .phero-media .phero-v {
    display: none;
  }
}

/* the closing band and the footer's closing sentence sit together: one rhythm step between them, not two */
.v2 main:has(> .band:last-child) + .f2 {
  padding-top: calc(var(--sec-y) * 0.5);
}
.v2 main > .band:last-child {
  padding-bottom: calc(var(--sec-y) * 0.5);
}

/* a card that spans a row's gap lies on its side: screen left, text right (never a stretched lonely card) */
@media (min-width: 760px) and (max-width: 1149px) {
  .svc-card.w2 {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
@media (min-width: 1150px) {
  .svc-card.w3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
  }
}
@media (max-width: 599px) {
  .phero-img {
    padding-bottom: 72px;
  }
  .phero-cap {
    left: var(--g);
    text-align: right;
  }
}

/* ---------- branch page: the other four pillars, in the order that yields most for the branch ---------- */
.pil2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 760px) {
  .pil2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1150px) {
  .pil2 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pil2-c {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--line-l);
  background: var(--paper);
  overflow: hidden;
}
.pil2-n {
  color: var(--green-ink);
}
.pil2-c h3 {
  margin: 0;
  font: 600 22px/1.15 var(--sg);
  letter-spacing: -0.02em;
}
.pil2-c > p {
  margin: 0;
  color: var(--mute-l);
  font-size: 15px;
}
.pil2-ex {
  font-size: 11px;
  color: var(--green-ink);
}
.pil2-c ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line-l);
  display: grid;
  gap: 8px;
}
.pil2-c ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.pil2-no {
  font-size: 9.5px;
  color: var(--mute-l);
  text-align: right;
}
.v2 .pil-sec + .svc-sec {
  padding-top: 0;
}

/* desktop: the chat and the live panel stand side by side at the same height (the taller of the two, capped);
   the thread scrolls inside the chat once it is longer */
@media (min-width: 1000px) {
  .chat-wrap {
    align-items: stretch;
  }
  .v2 .chat-panel,
  .v2 .chat-live {
    max-height: var(--chat-h);
  }
  .chat-scroll {
    min-height: 0;
  }
}

/* ---------- round 3: the one closer per page, the organisations card, small links ---------- */
.v2 .closer {
  position: relative;
  z-index: 2;
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.closer-in {
  display: grid;
  justify-items: center;
  text-align: center;
}
.closer-h {
  margin: 0;
  max-width: 20ch;
  font: 700 clamp(36px, 5.6vw, 92px) / 0.98 var(--sg);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.closer-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.v2 main > .closer:last-child + .f2,
.v2 main:has(> .closer:last-child) + .f2 {
  padding-top: calc(var(--sec-y) * 0.6);
}
.org-card {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 40px;
  padding: 24px 26px;
  border-radius: 22px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s;
}
.org-card .mono {
  color: var(--green);
}
.org-card b {
  font: 600 clamp(22px, 2.4vw, 32px) / 1.15 var(--sg);
  letter-spacing: -0.02em;
}
.org-card > span:last-child {
  color: var(--mute-d);
}
.org-card:hover {
  border-color: var(--green);
}
.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 28px 0 0;
}
.home-links a {
  color: var(--mute-d);
  text-decoration: none;
}
.home-links a:hover {
  color: var(--green);
}
.org-more {
  margin-top: 28px;
}
/* desktop: the live panel always shows its full content; the chat follows the taller of the two and only its
   thread scrolls once the conversation is longer than the old fixed height */
@media (min-width: 1000px) {
  .v2 .chat-live {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .v2 .chat-panel {
    max-height: none;
  }
  .chat-scroll {
    max-height: calc(var(--chat-h) - 54px);
  }
}

/* ==========================================================================================================
   Product visuals (owner's brief 04-11-2026): the example app in the look of the real customer app (apps/web:
   Fraunces + Manrope, deep green, soft bento tiles), the brand-free 3D phone and the inbox. build.ts appends this
   file to styles.css. Motion only under html.motion; without it every visual shows its final state.
   ========================================================================================================== */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-opsz-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/manrope-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/manrope-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/manrope-latin-700-normal.woff2) format('woff2');
}

/* ---------- the device frame ---------- */
.dx-dev {
  --bg: #f7f8f5;
  --surface: #ffffff;
  --soft: #f0f3ef;
  --line: #e3e8e2;
  --tline: #e6ebe5;
  --fg: #17201c;
  --muted: #56635c;
  --faint: #6f7c75;
  --accent: #1d5c4f;
  --accent-soft: #e5efe9;
  --urgent: #b3261e;
  --track: #e9efea;
  --tsh: 0 1px 2px rgba(23, 32, 28, 0.04), 0 14px 30px -22px rgba(23, 32, 28, 0.3);
  --display: 'Fraunces Variable', 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-customers: #1d5c4f;
  --c-marketing: #b5602a;
  --c-ads: #3559a8;
  --c-admin: #8a6a12;
  --c-team: #6a4c9c;
  position: relative;
  min-width: 0;
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(160deg, #3d3c39 0%, #171615 32%, #0e0d0c 64%, #2b2a27 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 70px 120px -50px rgba(0, 0, 0, 0.9),
    0 40px 140px -70px rgba(22, 196, 127, 0.55);
}
.dx-dev::after {
  /* a soft reflection of the screen on the surface below */
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 196, 127, 0.22), transparent);
  filter: blur(6px);
  pointer-events: none;
}
.dx-dev-l {
  /* on cream: a lighter frame */
  background: linear-gradient(160deg, #fdfcf9 0%, #d9d6cd 40%, #efede6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(22, 21, 20, 0.08),
    0 60px 100px -50px rgba(22, 21, 20, 0.45),
    0 20px 40px -30px rgba(22, 21, 20, 0.3);
}
.dx-dev-l::after {
  background: radial-gradient(closest-side, rgba(22, 21, 20, 0.12), transparent);
}
.dx-bez {
  border-radius: 15px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.dx-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  background: #ebede8;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--sans);
  color: var(--muted);
}
.dx-nav-btns {
  display: inline-flex;
  gap: 12px;
  padding-left: 4px;
}
.dx-nav-btns i {
  width: 7px;
  height: 7px;
  border-left: 1.6px solid #9aa39d;
  border-bottom: 1.6px solid #9aa39d;
  transform: rotate(45deg);
}
.dx-nav-btns i + i {
  transform: rotate(-135deg);
  opacity: 0.5;
}
.dx-url {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  height: 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 28, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.dx-url .ic {
  width: 11px;
  height: 11px;
}
.dx-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid #d5dbd5;
  border-radius: 999px;
  padding: 4px 8px;
}

/* ---------- the app ---------- */
.dx {
  container: dx / inline-size;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  height: 640px;
  font: 400 14px/1.45 var(--sans);
  color: var(--fg);
  text-align: left;
  background: radial-gradient(700px 380px at 85% -10%, rgba(29, 92, 79, 0.08), transparent 65%), var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* the app reuses the site's .step timing class; neutralise the site's .step layout (same specificity, later) */
.dx :where(.step) {
  padding: 0;
}
.dx :where(.step) p {
  font-size: 12.5px;
  color: inherit;
  margin-top: 0;
  line-height: 1.4;
  max-width: none;
}
.dx .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.dx b {
  font-weight: 700;
}
.dx p,
.dx h3,
.dx ul,
.dx ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dx-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 12px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.dx-co {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dx-co b {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}
.dx-co small {
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 700;
}
.dx-mono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.04em;
  flex: none;
}
.dx-locw {
  position: relative;
}
.dx-locb {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--tline);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--tsh);
  font: 600 12.5px/1.2 var(--sans);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}
.dx-locb .ic {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.dx-locl {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-locb .dx-chev {
  color: var(--faint);
  transition: transform 0.2s;
}
.dx-locb[aria-expanded='true'] .dx-chev {
  transform: rotate(180deg);
}
.dx-locm {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  padding: 5px !important;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--tline);
  box-shadow: 0 20px 40px -18px rgba(23, 32, 28, 0.4);
}
.dx-locm[hidden] {
  display: none;
}
.dx-locm button {
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: 500 13px/1 var(--sans);
  color: var(--fg);
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.dx-locm button:hover,
.dx-locm button[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent);
}
.dx-nav {
  display: grid;
  gap: 2px;
}
.dx-ni {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  transition:
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.dx-fig {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.dx-fig .ic {
  width: 15px;
  height: 15px;
}
.dx-ni.on {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--tsh);
}
.dx-ni.on .dx-fig {
  background: var(--accent);
  color: #fff;
}
.dx-badge {
  margin-left: auto;
  font: 700 10.5px/1 var(--sans);
  font-style: normal;
  color: #fff;
  background: var(--urgent);
  border-radius: 999px;
  padding: 4px 7px;
}
.dx-badge.zero,
.dx-count.zero {
  background: var(--accent);
}
.dx-me {
  margin-top: auto !important;
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 4px;
}
.dx-me b {
  display: block;
  color: var(--fg);
  font-size: 13px;
}
.dx-main {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 20px 22px;
}
.dx-pane[hidden] {
  display: none;
}
.dx-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
}
.dx-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.dx-h {
  font: 500 27px/1.12 var(--display);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-top: 2px !important;
}
.dx-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px !important;
}
.dx-crew,
.dx-stat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--tline);
  box-shadow: var(--tsh);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.dx-stat .dx-n {
  color: var(--fg);
}
.dx-crew-dots {
  display: inline-flex;
}
.dx-crew-dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(135deg, #2ee69a, #1d5c4f);
  margin-left: -6px;
}
.dx-crew-dots i:first-child {
  margin-left: 0;
}
.dx-crew-dots i:nth-child(2) {
  background: linear-gradient(135deg, #f0b37e, #b5602a);
}
.dx-crew-dots i:nth-child(3) {
  background: linear-gradient(135deg, #9db4ec, #3559a8);
}
.dx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--tline);
  box-shadow: var(--tsh);
}
.dx-lb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.dx-lb .ic {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.dx-lb-r {
  margin-left: auto;
  font-weight: 500;
}
.dx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.dx-k3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dx-kpi {
  gap: 4px;
}
.dx-big {
  font: 500 36px/1.05 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.dx-big b {
  font-weight: 500;
}
.dx-sub2 {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dx-sub2 .ic {
  width: 12px;
  height: 12px;
}
.dx-n {
  font-variant-numeric: tabular-nums;
}
.dx-flash .dx-n {
  animation: dx-flash 0.5s;
}
@keyframes dx-flash {
  40% {
    color: var(--accent);
  }
}
.dx-depts {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.dx-dc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--tline);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.25;
  min-width: 0;
}
.dx-dc .ic {
  width: 15px;
  height: 15px;
  color: var(--c);
}
.dx-dc b {
  color: var(--fg);
  font-size: 13px;
}
.dx-c-customers {
  --c: var(--c-customers);
}
.dx-c-marketing {
  --c: var(--c-marketing);
}
.dx-c-ads {
  --c: var(--c-ads);
}
.dx-c-admin {
  --c: var(--c-admin);
}
.dx-c-team {
  --c: var(--c-team);
}
.dx-row,
.dx-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.dx-grid2 {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.dx-g-wide {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.dx-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* chart */
.dx-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 104px;
  padding-top: 6px;
}
.dx-bcol {
  flex: 1;
  display: grid;
  gap: 4px;
  justify-items: center;
  height: 100%;
  grid-template-rows: 1fr auto;
}
.dx-bcol small {
  font-size: 10.5px;
  color: var(--faint);
}
.dx-stack {
  width: 100%;
  max-width: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  transform-origin: bottom;
}
.dx-stack i {
  display: block;
  border-radius: 5px;
}
.dx-in {
  background: var(--accent);
}
.dx-after {
  background: #8fd3b6;
}
.dx-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
}
.dx-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dx-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.motion .dx-chart:not(.on) .dx-stack {
  transform: scaleY(0);
}
.motion .dx-chart .dx-stack {
  transition: transform 0.9s var(--e-out) var(--d);
}
/* waiting for you */
.dx-lb-u {
  color: var(--urgent);
}
.dx-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--urgent);
  animation: dx-ping 1.6s infinite;
}
@keyframes dx-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(179, 38, 30, 0);
  }
}
.dx-count {
  font: 700 10.5px/1 var(--sans);
  font-style: normal;
  color: #fff;
  background: var(--urgent);
  border-radius: 999px;
  padding: 4px 7px;
}
.dx-task {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  transition: opacity 0.3s;
}
.dx-task:first-child {
  border-top: 0;
}
.dx-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.dx-av .ic {
  width: 14px;
  height: 14px;
}
.dx-tt {
  min-width: 0;
  display: grid;
}
.dx-tt b {
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-tt small {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-tt time {
  font-weight: 500;
  color: var(--faint);
  font-size: 11px;
  margin-left: 4px;
}
.dx-ok {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--accent);
  color: #fff;
  font: 700 11.5px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    transform 0.15s;
}
.dx-ok:hover {
  background: #174b40;
}
.dx-ok:active {
  transform: scale(0.96);
}
.dx-ok[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  cursor: default;
}
.dx-task.done .dx-tt {
  opacity: 0.5;
}
/* activity feed */
.dx-feed li {
  display: grid;
  grid-template-columns: 40px 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  border-top: 1px solid var(--line);
}
.dx-feed li:first-child {
  border-top: 0;
}
.dx-feed time,
.dx-log time {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  font-size: 11.5px;
}
.dx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.dx-feed li > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* autonomy */
.dx-auto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.dx-auto li:first-child {
  border-top: 0;
}
.dx-sw {
  flex: none;
  width: 36px;
  height: 21px;
  border-radius: 999px;
  border: 0;
  background: #cfd8d2;
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s;
}
.dx-sw i {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--e-out);
}
.dx-sw[aria-checked='true'] {
  background: var(--accent);
}
.dx-sw[aria-checked='true'] i {
  transform: translateX(15px);
}
.dx-locked {
  color: var(--muted);
}
.dx-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--urgent);
}
.dx-lock .ic {
  width: 13px;
  height: 13px;
}
/* flip states: final state without motion, first state until the player marks it done */
.dx-flip {
  display: inline-grid;
  justify-items: start;
  align-self: start;
}
.dx-flip > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    opacity 0.35s,
    transform 0.35s var(--e-out);
}
.dx-flip > span:first-child {
  color: var(--faint);
  background: var(--soft);
  opacity: 0;
}
.dx-flip > span:last-child {
  color: var(--accent);
  background: var(--accent-soft);
}
.dx-flip.dx-t-wait > span:last-child {
  color: #8a5300;
  background: #fbefd5;
}
.dx-flip .ic {
  width: 12px;
  height: 12px;
}
.motion .dx-flip:not(.done) > span:first-child {
  opacity: 1;
}
.motion .dx-flip:not(.done) > span:last-child {
  opacity: 0;
  transform: translateY(4px);
}
/* customers */
.dx-call {
  background: linear-gradient(165deg, #1c4a40 0%, #102c26 100%);
  border-color: transparent;
  color: #fff;
}
.dx-call .dx-lb {
  color: rgba(255, 255, 255, 0.82);
}
.dx-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a4f;
  animation: dx-ping 1.6s infinite;
}
.dx-timer {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #8fe6c1;
}
.dx-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}
.dx-wave i {
  flex: 1;
  max-width: 4px;
  height: var(--h);
  border-radius: 2px;
  background: #7fe0b8;
  opacity: 0.85;
}
.motion .dx-call.on .dx-wave i {
  animation: dx-wave 0.9s var(--d) ease-in-out infinite alternate;
}
@keyframes dx-wave {
  to {
    transform: scaleY(0.35);
  }
}
.dx-tr {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.dx-tr li {
  max-width: 94%;
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 12px;
}
.dx-tr .dx-ai {
  background: rgba(255, 255, 255, 0.1);
  border-top-left-radius: 4px;
}
.dx-tr .dx-me {
  align-self: flex-end;
  background: rgba(127, 224, 184, 0.2);
  border-top-right-radius: 4px;
}
.dx-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0f2b25;
  background: #8fe6c1;
  border-radius: 10px;
  padding: 7px 10px;
}
.dx-threads li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.dx-threads li:first-child {
  border-top: 0;
}
.dx-threads .dx-flip {
  grid-column: 2;
}
.dx-quotes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 150px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.dx-quotes li:first-child {
  border-top: 0;
}
.dx-quotes b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-track {
  display: flex;
  gap: 4px;
}
.dx-track span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--faint);
  padding-right: 6px;
}
.dx-track i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #c4cdc7;
}
.dx-track .on {
  color: var(--fg);
}
.dx-track .on i {
  background: var(--accent);
  border-color: var(--accent);
}
/* marketing */
.dx-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.dx-day {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 132px;
  padding: 7px 6px;
  border-radius: 11px;
  background: var(--soft);
  min-width: 0;
}
.dx-day > small {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.dx-day.today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.dx-post {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border-radius: 8px;
  background: var(--surface);
  border-left: 3px solid var(--c-marketing);
  box-shadow: 0 1px 2px rgba(23, 32, 28, 0.06);
}
.dx-post em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-marketing);
}
.dx-post b {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
}
.dx-post small {
  font-size: 10px;
  color: var(--faint);
}
.dx-post.pub small {
  color: var(--accent);
  font-weight: 700;
}
.dx-rev {
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.dx-rev:nth-child(2) {
  border-top: 0;
}
.dx-stars {
  color: #e0a100;
  letter-spacing: 1px;
  font-size: 12px;
}
.dx-stars span {
  color: #d6dbd7;
}
.dx-rev small {
  color: var(--faint);
}
.dx-rev .dx-reply {
  background: var(--soft);
  border-radius: 10px;
  padding: 6px 9px !important;
  font-size: 12px;
  color: var(--muted);
}
.dx-reply .dx-flip {
  vertical-align: middle;
}
.dx-spark {
  width: 100%;
  height: 56px;
  display: block;
}
.dx-spark-a {
  fill: rgba(29, 92, 79, 0.1);
}
.dx-spark-l {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.motion .dx-ana:not(.on) .dx-spark-l {
  stroke-dashoffset: 400;
}
.motion .dx-ana .dx-spark-l {
  transition: stroke-dashoffset 1.6s var(--e-out) 0.2s;
}
.dx-ana p {
  font-size: 12.5px;
}
.dx-ana p b {
  color: var(--accent);
}
/* ads */
.dx-camps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dx-camp {
  gap: 4px;
}
.dx-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.dx-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16c47f;
  box-shadow: 0 0 0 3px rgba(22, 196, 127, 0.2);
}
.dx-state.off {
  color: #8a5300;
}
.dx-state .ic {
  width: 12px;
  height: 12px;
}
.dx-camp-n {
  font-size: 14px;
  line-height: 1.25;
}
.dx-camp dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 2px;
}
.dx-camp dt {
  font-size: 10.5px;
  color: var(--muted);
}
.dx-camp dd {
  margin: 0;
  font: 500 20px/1.1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dx-camp dd b {
  font-weight: 500;
}
.dx-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.dx-mini i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--c-ads);
  opacity: 0.75;
  transform-origin: bottom;
}
.dx-camp:has(.off) .dx-mini i {
  background: #c9cfcb;
}
.motion .dx-camp:not(.on) .dx-mini i {
  transform: scaleY(0);
}
.motion .dx-camp .dx-mini i {
  transition: transform 0.7s var(--e-out) calc(var(--d) + 0.3s);
}
.dx-log li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.dx-log li:first-child {
  border-top: 0;
}
/* admin */
.dx-inv table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.dx-inv td {
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.dx-inv tr:first-child td {
  border-top: 0;
}
.dx-nr {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  white-space: nowrap;
}
.dx-rcpt li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.dx-slip {
  width: 22px;
  height: 28px;
  border-radius: 3px;
  background: #fbf8f0;
  border: 1px solid #e5dfcf;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 0 4px;
}
.dx-slip i {
  height: 2px;
  border-radius: 1px;
  background: #d8cfb8;
}
.dx-save p {
  font-size: 12.5px;
  padding: 3px 0 3px 14px;
  position: relative;
}
.dx-save p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-admin);
}
/* team */
.dx-loc-n {
  font-size: 12px;
  color: var(--muted);
}
.dx-loc-n b {
  font: 500 30px/1 var(--display);
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-right: 4px;
}
.dx-load {
  height: 6px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
.dx-load i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-team);
}
.dx-tl {
  position: relative;
  display: grid;
  gap: 7px;
}
.dx-tlr {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.dx-tlt {
  position: relative;
  height: 26px;
  border-radius: 8px;
  background: var(--track);
}
.dx-tlt i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 600 10.5px/26px var(--sans);
  font-style: normal;
  padding: 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left;
}
.dx-tlt i.hot {
  background: var(--urgent);
}
.motion .dx-plan:not(.on) .dx-tlt i {
  transform: scaleX(0);
}
.motion .dx-plan .dx-tlt i {
  transition: transform 0.6s var(--e-out) var(--d);
}
.dx-now {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(51px + (100% - 51px) * 0.28);
  width: 2px;
  border-radius: 2px;
  background: var(--urgent);
}
.dx-axis {
  display: flex;
  justify-content: space-between;
  padding-left: 51px !important;
  font-size: 10.5px;
  color: var(--faint);
}
.dx-week-r li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 4px 0;
  font-size: 12.5px;
}
.dx-week-r .ic {
  width: 14px;
  height: 14px;
  color: var(--accent);
  margin-top: 2px;
}
.dx-week-r .att .ic {
  color: var(--c-marketing);
}

/* the app in narrow places (phones, the product window below 1000px): a top bar instead of the sidebar */
@container dx (max-width: 720px) {
  .dx-camps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dx-camp:nth-child(3) {
    display: none;
  }
}
@media (max-width: 999px) {
  .dx {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .dx-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dx-locw {
    margin-left: auto;
    width: 172px;
  }
  .dx-nav {
    order: 3;
    flex-basis: 100%;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dx-ni {
    flex: none;
    padding: 5px 10px 5px 5px;
  }
  .dx-me {
    display: none;
  }
  .prod .dx-main {
    min-height: 700px;
  }
}
@media (max-width: 759px) {
  .dx-dev {
    padding: 5px;
    border-radius: 18px;
  }
  .dx-bez {
    border-radius: 13px;
  }
  .dx-bar {
    height: 32px;
  }
  .dx-nav-btns {
    display: none;
  }
  .dx-main {
    padding: 14px 12px 16px;
  }
  .dx-head {
    flex-direction: column;
  }
  .dx-h {
    font-size: 23px;
  }
  .dx-kpis,
  .dx-k3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dx-k3 > :nth-child(3) {
    grid-column: 1 / -1;
  }
  .dx-big {
    font-size: 30px;
  }
  .dx-depts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dx-depts > :last-child {
    display: none;
  }
  .dx-row,
  .dx-grid2,
  .dx-g-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .dx-week {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dx-day:nth-child(n + 4) {
    display: none;
  }
  .dx-quotes li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dx-track {
    display: none;
  }
  .dx-feed li:nth-child(n + 4) {
    display: none;
  }
  .prod .dx-main {
    min-height: 0;
  }
}

/* ---------- product section and control section placement ---------- */
.prod .dx-dev {
  align-self: start;
}
@media (min-width: 1000px) {
  .prod-grid {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  }
  .prod .dx-dev {
    position: sticky;
    top: 88px;
  }
}
.ctl-dev {
  max-width: 1120px;
  margin: 0 auto;
}
.ctl-dev .dx {
  height: auto;
  min-height: 0;
}
.ctl-note,
.ibx-note {
  margin: 34px auto 0;
  text-align: center;
  color: var(--mute-d);
  font-size: 11px;
}

/* ---------- the phone ---------- */
.v2 .ph-fig {
  --pw: 290px;
  width: auto;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 54px;
}
.v2 .ph-fig .sim-tag {
  position: static;
}
.ph-stage {
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 2.06);
  perspective: 1500px;
}
.ph-stage::before {
  content: '';
  position: absolute;
  inset: 8% -30%;
  background: radial-gradient(closest-side, rgba(22, 196, 127, 0.22), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.ph-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.motion .ph-float {
  animation: ph-float 7s ease-in-out infinite;
}
@keyframes ph-float {
  50% {
    transform: translateY(-12px);
  }
}
.ph3 {
  --mx: 0;
  --my: 0;
  --r: calc(var(--pw) * 0.158);
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(-17deg + var(--mx) * 11deg)) rotateX(calc(6deg - var(--my) * 7deg)) rotateZ(1.2deg);
}
.ph-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(
    90deg,
    #4a4844 0%,
    #a29d94 8%,
    #e4e0d8 13%,
    #8c8880 22%,
    #6a6762 50%,
    #8c8880 78%,
    #d6d2ca 88%,
    #6e6b65 100%
  );
  transform: translateZ(calc(var(--z) * -1.5px));
}
.ph-layer:nth-child(7) {
  background: #2a2927;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.ph-btn {
  position: absolute;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6d6a64, #e6e2da 45%, #9b978f 70%, #5f5c57);
  transform: translateZ(-5px);
}
.ph-btn-act,
.ph-btn-up,
.ph-btn-dn {
  left: -3px;
}
.ph-btn-act {
  top: 17%;
  height: 4.5%;
}
.ph-btn-up {
  top: 25.5%;
  height: 8.5%;
}
.ph-btn-dn {
  top: 36%;
  height: 8.5%;
}
.ph-btn-pw {
  right: -3px;
  top: 28%;
  height: 13%;
}
.ph-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  padding: 3.5px;
  background: linear-gradient(
    145deg,
    #f6f3ec 0%,
    #9e9a92 10%,
    #dcd8cf 24%,
    #77736d 46%,
    #c8c3ba 68%,
    #f3efe8 84%,
    #8b8780 100%
  );
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.ph-glass {
  position: relative;
  height: 100%;
  border-radius: calc(var(--r) - 3.5px);
  background: #030303;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1.5px #1c1c1c,
    inset 0 0 0 2.5px #000;
}
.ph-screen {
  position: relative;
  height: 100%;
  border-radius: calc(var(--r) - 11.5px);
  overflow: hidden;
  background: #000;
  color: #fff;
  font:
    400 14px/1.35 -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  text-align: left;
}
.ph-screen p {
  margin: 0;
}
.ph-island {
  position: absolute;
  z-index: 10;
  top: 9px;
  left: 50%;
  width: 32%;
  height: 25px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #000;
}
.ph-island::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #33415e, #0b0f18 60%);
}
.ph-home {
  display: none;
}
.ph-glare {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    calc(118deg + var(--mx) * 16deg),
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0.16) 40%,
    rgba(255, 255, 255, 0.04) 47%,
    rgba(255, 255, 255, 0) 58%
  );
}
.ph-shadow {
  position: absolute;
  left: 10%;
  right: 4%;
  bottom: -46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  filter: blur(7px);
  pointer-events: none;
}
.motion .ph-shadow {
  animation: ph-shadow 7s ease-in-out infinite;
}
@keyframes ph-shadow {
  50% {
    transform: scale(0.86);
    opacity: 0.65;
  }
}
/* screens */
.ph-s {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12%) scale(0.98);
  transition:
    opacity 0.55s ease,
    transform 0.75s var(--e-out);
}
.ph-screen:not(.run) .ph-s:last-of-type,
.ph-s.on {
  opacity: 1;
  transform: none;
  z-index: 2;
}
.ph-s.out {
  opacity: 0;
  transform: translateX(-10%) scale(0.98);
  z-index: 1;
}
.ph-s::after {
  content: '';
  position: absolute;
  z-index: 6;
  bottom: 6px;
  left: 50%;
  width: 36%;
  height: 4px;
  border-radius: 4px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
}
.ph-chat::after {
  background: #0b0b0b;
}
.run .ph-m:not(.in) {
  display: none;
}
.run .ph-m.in {
  animation: ph-pop 0.38s var(--e-out);
}
@keyframes ph-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}
.ph-sb {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 22px 0 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}
.ph-chat .ph-sb {
  color: #000;
}
.ph-ind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ph-ind svg {
  fill: currentColor;
}
.ph-bat {
  position: relative;
  width: 23px;
  height: 11px;
  border-radius: 3.5px;
  border: 1px solid currentColor;
  padding: 1.5px;
  opacity: 0.95;
}
.ph-bat::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 3px;
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
  opacity: 0.5;
}
.ph-bat i {
  display: block;
  width: 76%;
  height: 100%;
  border-radius: 1.5px;
  background: currentColor;
}
/* call */
.ph-call {
  background:
    radial-gradient(120% 70% at 50% 0%, #5b6e7c 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #3a3330 0%, transparent 70%),
    linear-gradient(180deg, #2c3741 0%, #151a1f 70%, #0d1013 100%);
}
.ph-call-top {
  padding-top: 70px;
  text-align: center;
}
.ph-callee {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ph-callst {
  position: relative;
  height: 20px;
  margin-top: 4px !important;
  font-size: 15px;
  color: rgba(235, 235, 245, 0.62);
}
.ph-callst span {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s;
}
.ph-tm {
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
.ph-call.live .ph-ans {
  opacity: 0;
}
.ph-call.live .ph-tm {
  opacity: 1;
}
.ph-cap {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 142px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 34%);
  mask-image: linear-gradient(transparent, #000 34%);
}
.ph-cap p {
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ph-cap small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 1px;
}
.ph-cap .ph-cap-me {
  background: rgba(255, 255, 255, 0.24);
}
.ph-keys {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 112px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 14px;
  justify-items: center;
}
.ph-key {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.ph-key i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
}
.ph-key svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-key.on i {
  background: #fff;
}
.ph-key.on svg {
  stroke: #111;
}
.ph-key small {
  font-size: 11px;
  color: #fff;
}
.ph-end {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border-radius: 50%;
  background: #ff3b30;
  display: grid;
  place-items: center;
  transition:
    transform 0.25s,
    filter 0.25s;
}
.ph-end svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
.ph-call.ending .ph-end {
  transform: scale(0.88);
  filter: brightness(0.8);
}
/* lock screen with the summary */
.ph-lock {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 9px 30px;
  background:
    radial-gradient(80% 50% at 15% 18%, rgba(46, 230, 154, 0.45), transparent 70%),
    radial-gradient(70% 55% at 95% 62%, rgba(58, 111, 216, 0.45), transparent 70%),
    radial-gradient(90% 60% at 40% 110%, rgba(232, 160, 90, 0.35), transparent 70%), #0b1a17;
}
.ph-lock-d {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.ph-lock-t-big {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 74px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.ph-lock-t .ph-lock-t-big {
  font-size: 58px;
}
.ph-note {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 20px;
  background: rgba(246, 246, 246, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  color: #111;
}
.ph-app {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #161514;
  display: grid;
  place-items: center;
}
.ph-app .inf {
  width: 27px;
  height: auto;
}
.ph-note-b {
  min-width: 0;
  flex: 1;
  display: grid;
  font-size: 13px;
  line-height: 1.3;
}
.ph-note-b small {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 1px;
}
.ph-note-b b {
  font-weight: 600;
}
.ph-note-tr {
  display: block;
  font-size: 11px;
  line-height: 1.36;
  max-height: 250px;
  overflow: hidden;
}
.ph-note-tr p {
  margin: 0 0 4px;
}
.ph-note-tr b {
  font-weight: 600;
}
/* chat */
.ph-chat {
  background-color: #efe7de;
  color: #111b21;
}
.ph-chat-h {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: rgba(246, 246, 246, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.16);
}
.ph-chat-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 8px;
}
.ph-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #007aff;
}
.ph-back svg {
  width: 11px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-back em {
  font-style: normal;
  font-size: 15px;
}
.ph-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, #8fcfb1, #2b7a60);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 600;
}
.ph-who {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.2;
}
.ph-who b {
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-who small {
  position: relative;
  height: 15px;
  font-size: 11.5px;
  color: #8a8a8e;
}
.ph-who small span {
  position: absolute;
  left: 0;
  transition: opacity 0.25s;
}
.ph-typ {
  opacity: 0;
}
.ph-chat.typing .ph-typ {
  opacity: 1;
}
.ph-chat.typing .ph-on {
  opacity: 0;
}
.ph-acts {
  display: inline-flex;
  gap: 16px;
}
.ph-acts svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: #007aff;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.ph-wall {
  position: absolute;
  top: 90px;
  bottom: 76px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 10px 10px;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.055' stroke-width='1.3'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M60 12l4 8 9 1-6 6 1 9-8-4-8 4 1-9-6-6 9-1z'/%3E%3Crect x='92' y='14' width='16' height='12' rx='3'/%3E%3Cpath d='M14 70c4-6 12-6 16 0M10 64h0M34 64h0'/%3E%3Cpath d='M62 64c0-5 7-7 9-2 2-5 9-3 9 2 0 6-9 11-9 11s-9-5-9-11z'/%3E%3Cpath d='M96 60l10 10M106 60L96 70'/%3E%3Ccircle cx='30' cy='104' r='4'/%3E%3Cpath d='M58 100h18M58 106h12'/%3E%3Cpath d='M94 98l6 10 6-10z'/%3E%3C/svg%3E");
}
.ph-day {
  align-self: center;
  margin: 0 0 6px !important;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #54656f;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1);
}
.ph-b {
  position: relative;
  max-width: 82%;
  padding: 6px 8px 5px 9px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.32;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.12);
}
.ph-b small {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -4px 8px;
  font-size: 10px;
  color: #667781;
}
.ph-b-in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 2px;
}
.ph-b-out {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 2px;
}
.ph-b-in::before,
.ph-b-out::before {
  content: '';
  position: absolute;
  top: 0;
  width: 8px;
  height: 11px;
  background: inherit;
}
.ph-b-in::before {
  left: -7px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ph-b-out::before {
  right: -7px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ph-tick {
  width: 15px;
  height: 10px;
  fill: none;
  stroke: #53bdeb;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-typing {
  display: none;
  gap: 4px;
  padding: 10px 12px;
}
.ph-chat.typing .ph-typing {
  display: inline-flex;
}
.ph-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8696a0;
  animation: ph-dot 1.1s infinite;
}
.ph-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.ph-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ph-dot {
  30% {
    transform: translateY(-3px);
    opacity: 0.5;
  }
}
.ph-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px 0;
  background: rgba(246, 246, 246, 0.96);
  border-top: 0.5px solid rgba(0, 0, 0, 0.12);
  color: #007aff;
}
.ph-plus {
  font-size: 27px;
  line-height: 30px;
  font-weight: 300;
}
.ph-field {
  flex: 1;
  height: 31px;
  border-radius: 16px;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.16);
  color: #b4b4b4;
  font-size: 13.5px;
  line-height: 31px;
  padding: 0 12px;
}
.ph-input svg {
  width: 23px;
  height: 23px;
  margin-top: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
@media (max-width: 759px) {
  .v2 .ph-fig {
    --pw: min(270px, 70vw);
  }
  .ph3 {
    transform: rotateY(-10deg) rotateX(5deg) rotateZ(1deg);
  }
}

/* phone section on the homepage */
.v2 .phs {
  padding: var(--sec-y) 0;
  background:
    var(--grain-d) 0 0 / 160px 160px,
    radial-gradient(50% 36% at 75% 50%, rgba(22, 196, 127, 0.12), transparent 100%),
    var(--dark);
  color: var(--cream);
  overflow: hidden;
}
.phs-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
.phs-k {
  color: var(--green);
  margin: 0 0 14px;
}
.phs-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.phs-list b {
  color: var(--green);
  margin-right: 6px;
}
.phs-st {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  color: var(--mute-d);
  font-size: 15px;
}
.phs-st > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1000px) {
  .phs-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 80px;
  }
  .v2 .ph-fig {
    --pw: 300px;
  }
}

/* branch pages: the phone instead of the window */
.story2-grid .ph-fig {
  justify-self: center;
}

/* ---------- the inbox ---------- */
.v2 .ibx {
  padding: var(--sec-y) 0;
  background:
    var(--grain-l) 0 0 / 160px 160px,
    var(--cream);
  color: var(--ink);
}
.ibx-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(36px, 5vw, 60px);
}
.ibx-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-ink);
  margin: 0 0 14px;
}
.ibx-h,
.ibx-l {
  display: grid;
}
.v2 .ibx-h {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  margin: 0;
}
.ibx-h > span,
.ibx-l > span {
  grid-area: 1 / 1;
  align-self: center;
  transition:
    opacity 0.7s var(--e-out),
    transform 0.7s var(--e-out);
}
.ibx-l {
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
}
.ibx .ibx-a,
.ibx[data-phase] .ibx-b {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}
.ibx .ibx-b,
.ibx[data-phase='done'] .ibx-b,
.ibx[data-phase] .ibx-a {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.ibx[data-phase='done'] .ibx-a {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
}
.ibx-win {
  max-width: 1120px;
  margin: 0 auto;
}
.ibx .ibx-note {
  color: var(--mute-l);
}
.ml {
  --mb: #f6f8fc;
  font:
    400 14px/1.4 Roboto,
    'Segoe UI',
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  color: #1f1f1f;
  background: var(--mb);
  text-align: left;
  letter-spacing: 0;
}
.ml .ic {
  width: 20px;
  height: 20px;
  flex: none;
  color: #444746;
}
.ml-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 16px;
}
.ml-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 168px;
  font-size: 19px;
  color: #444746;
}
.ml-env svg {
  display: block;
  width: 28px;
  height: 20px;
}
.ml-env rect {
  fill: #fff;
  stroke: #16a06a;
  stroke-width: 1.8;
}
.ml-env path {
  fill: none;
  stroke: #16a06a;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.ml-search {
  flex: 1;
  max-width: 620px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 24px;
  background: #e9eef6;
  color: #444746;
  font-size: 15px;
}
.ml-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ml-me {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8a5a3b;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
}
.ml-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  height: 560px;
}
.ml-rail {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 0 0;
  font-size: 14px;
}
.ml-compose {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  margin: 0 0 14px 8px;
  padding: 0 24px 0 18px;
  border-radius: 16px;
  background: #c2e7ff;
  font-weight: 500;
}
.ml-f {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 32px;
  padding: 0 12px 0 26px;
  border-radius: 0 16px 16px 0;
  transition: opacity 0.5s;
}
.ml-f .ic {
  width: 18px;
  height: 18px;
}
.ml-f.on {
  background: #d3e3fd;
  font-weight: 700;
}
.ml-count {
  margin-left: auto;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ml-lh {
  padding: 16px 0 6px 26px;
  font-size: 15px;
  font-weight: 500;
}
.ml-lf i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin: 0 3px;
  background: var(--c);
}
.ml-l-offerte {
  --c: #16a06a;
}
.ml-l-afspraak {
  --c: #1a73e8;
}
.ml-l-factuur {
  --c: #e37400;
}
.ml-l-klacht {
  --c: #d93025;
}
.ml-l-vraag {
  --c: #12a4af;
}
.ml-l-bestelling {
  --c: #9334e6;
}
.ml-l-nieuws {
  --c: #80868b;
}
.ml-l-spam {
  --c: #5f6368;
}
.ml-l-admin {
  --c: #8430ce;
}
.ml-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 16px 16px 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.ml-tool {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 48px;
  flex: none;
  padding: 0 16px;
}
.ml-tool .ic {
  width: 18px;
  height: 18px;
}
.ml-cb {
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid #8e918f;
  border-radius: 2px;
}
.ml-range {
  margin-left: auto;
  font-size: 12.5px;
  color: #444746;
}
.ml-range b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ml-tabs {
  display: flex;
  flex: none;
  border-bottom: 1px solid #ececec;
}
.ml-tabs span {
  position: relative;
  flex: 0 1 230px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  font-size: 14px;
  color: #444746;
  white-space: nowrap;
}
.ml-tabs .on {
  color: #0b57d0;
  font-weight: 500;
}
.ml-tabs .on .ic {
  color: #0b57d0;
}
.ml-tabs .on::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #0b57d0;
}
.ml-new {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
}
.ml-new.g {
  background: #188038;
}
.ml-new.b {
  background: #1a73e8;
}
.ml-ai {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 6px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e3f6ec, #eff8f3);
  color: #0d4a32;
  font-size: 13.5px;
  overflow: hidden;
  max-height: 60px;
  transition:
    max-height 0.5s var(--e-out),
    opacity 0.4s,
    margin 0.5s,
    padding 0.5s;
}
.ml-ai .ic {
  color: #16a06a;
}
.ml-ai-t {
  display: grid;
}
.ml-ai-t > span {
  grid-area: 1 / 1;
  transition: opacity 0.4s;
}
.ml-ai-run {
  opacity: 0;
}
.ml-ai-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.ml-ai-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #16c47f;
  transition-property: width;
  transition-timing-function: linear;
}
.ml-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.ml-r {
  display: grid;
  grid-template-columns: 15px 18px 170px minmax(0, 1fr) auto 62px;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid #f1f3f4;
  background: #fff;
  overflow: hidden;
  transition:
    height 0.45s var(--e-out),
    opacity 0.4s,
    background-color 0.4s,
    border-color 0.4s;
}
.ml-star {
  color: #c4c7c5;
  font-size: 16px;
  line-height: 1;
}
.ml-star.on {
  color: #f4b400;
}
.ml-from {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-line b {
  font-weight: 700;
}
.ml-snip {
  color: #5e5e5e;
}
.ml-lab {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--c);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: 1px;
}
.ml-st em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.ml-st .ic {
  width: 13px;
  height: 13px;
  color: currentColor;
}
.ml-done {
  color: #137333;
  background: #e6f4ea;
}
.ml-d-admin {
  color: #8430ce;
  background: #f3e8fd;
}
.ml-d-spam,
.ml-d-archive {
  color: #5f6368;
  background: #f1f3f4;
}
.ml-w {
  color: #9a5b00;
  background: #feefc3;
}
.ml-time {
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ml-wait-r,
.ml-r.ml-wait {
  background: #fffbeb;
}
/* end state (also without JavaScript): only what waits for you stays */
.ml-r:not(.ml-wait) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.ml-r.ml-wait {
  height: 52px;
  box-shadow: inset 3px 0 0 #f4b400;
}
/* the animation: idle → chaos → work → done */
.ml[data-phase='idle'] .ml-r,
.ml[data-phase='chaos'] .ml-r:not(.in) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.ml[data-phase='chaos'] .ml-r.in,
.ml[data-phase='work'] .ml-r:not(.gone) {
  height: 40px;
  opacity: 1;
  border-color: #f1f3f4;
  box-shadow: none;
  background: #fff;
}
.ml[data-phase='chaos'] .ml-r.in {
  animation: ml-in 0.45s var(--e-out);
}
@keyframes ml-in {
  from {
    background: #e8f0fe;
  }
}
.ml[data-phase='work'] .ml-r.fin:not(.ml-wait) {
  background: #f2f6fc;
}
.ml[data-phase='work'] .ml-r.fin:not(.ml-wait) :is(.ml-from, .ml-line b, .ml-time) {
  font-weight: 400;
}
.ml[data-phase='work'] .ml-r.ml-wait.fin {
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f4b400;
}
.ml[data-phase='idle'] .ml-lab,
.ml[data-phase='chaos'] .ml-lab,
.ml[data-phase='work'] .ml-r:not(.lab) .ml-lab {
  display: none;
}
.ml-r.lab .ml-lab {
  animation: ml-lab 0.35s var(--e-out);
}
@keyframes ml-lab {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
.ml[data-phase='idle'] .ml-st,
.ml[data-phase='chaos'] .ml-st,
.ml[data-phase='work'] .ml-r:not(.fin) .ml-st {
  visibility: hidden;
}
.ml[data-phase='idle'] .ml-lf,
.ml[data-phase='chaos'] .ml-lf {
  opacity: 0;
}
.ml[data-phase='idle'] .ml-ai,
.ml[data-phase='chaos'] .ml-ai {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.ml[data-phase='work'] .ml-ai-run {
  opacity: 1;
}
.ml[data-phase='work'] .ml-ai-done {
  opacity: 0;
}
.ml[data-phase='work'] .ml-ai-bar i:not(.go),
.ml[data-phase='idle'] .ml-ai-bar i,
.ml[data-phase='chaos'] .ml-ai-bar i {
  width: 0;
}
.ml-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 16px;
  transition: opacity 0.6s 0.2s;
}
.ml-sum span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f3f4;
  font-size: 12.5px;
  color: #444746;
}
.ml-sum span b {
  font-variant-numeric: tabular-nums;
  color: #1f1f1f;
}
.ml-sum i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--c);
}
.ml[data-phase='idle'] .ml-sum,
.ml[data-phase='chaos'] .ml-sum,
.ml[data-phase='work'] .ml-sum {
  opacity: 0;
  transition: none;
}
.ml-compact .ml-body {
  height: 470px;
}
@media (max-width: 899px) {
  .ml-body {
    grid-template-columns: minmax(0, 1fr);
    height: 520px;
  }
  .ml-rail,
  .ml-brand,
  .ml-tools .ic {
    display: none;
  }
  .ml-main {
    margin: 0 8px 8px;
  }
  .ml-top {
    padding: 0 10px;
    gap: 10px;
  }
  .ml-tabs span:not(.on) {
    flex: none;
    font-size: 0;
    gap: 6px;
  }
  .ml-tabs span:not(.on) .ml-new {
    font-size: 10px;
  }
  .ml-r {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-content: center;
    padding: 0 12px;
  }
  .ml-r .ml-cb,
  .ml-r .ml-star,
  .ml-snip {
    display: none;
  }
  .ml-from {
    grid-column: 1;
    grid-row: 1;
  }
  .ml-time {
    grid-column: 2;
    grid-row: 1;
  }
  .ml-line {
    grid-column: 1;
    grid-row: 2;
  }
  .ml-st {
    grid-column: 2;
    grid-row: 2;
  }
  .ml[data-phase='chaos'] .ml-r.in,
  .ml[data-phase='work'] .ml-r:not(.gone) {
    height: 56px;
  }
  .ml-r.ml-wait {
    height: 60px;
  }
  .ml-tool {
    gap: 14px;
  }
}

/* ---------- services page placements ---------- */
.svc-dash {
  padding: var(--sec-y) 0 0;
}
.svc-ibx {
  margin-top: clamp(40px, 6vw, 72px);
}
.svc-ibx .ibx-note {
  color: var(--mute-d);
}
.v2 [data-theme='light'] .svc-ibx .ibx-note {
  color: var(--mute-l);
}

@media (prefers-reduced-motion: reduce) {
  .ph-float,
  .ph-shadow,
  .dx-pulse,
  .dx-rec,
  .ph-typing i {
    animation: none !important;
  }
}
.ml-clear {
  margin: auto 0 0;
  padding: 0 24px 34px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  font-size: 14px;
  color: #5e5e5e;
  transition: opacity 0.6s 0.4s;
}
.ml-clear span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e6f4ea;
}
.ml .ml-clear .ic {
  width: 26px;
  height: 26px;
  color: #137333;
}
.ml:not([data-phase='done']) .ml-clear {
  opacity: 0;
  transition: none;
}
.v2 .phs .s-h {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.02;
}
.ml[data-phase='idle'] .ml-ai,
.ml[data-phase='idle'] .ml-r {
  transition: none;
}

/* hero: the group sits lower, so the wordmark is near the middle and the 3D loop starts well below the header */
@media (min-width: 760px) {
  .v2 .hero {
    padding-top: calc(var(--hh) + min(17vh, 150px));
    padding-bottom: min(6vh, 56px);
  }
}
.v2 [data-theme='light'] .ctl-note {
  color: var(--mute-l);
}
.scene-ph {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.scene-ph .scene-res {
  margin: 0;
}
/* the caption fills the room between the name and the buttons, whatever the phone's size */
.ph-cap {
  top: 128px;
  bottom: 290px;
  height: auto;
}
.v2 .story2,
.v2 .phs {
  overflow-x: clip;
}
@media (max-width: 759px) {
  .ph-stage::before {
    inset: 8% -8%;
  }
}
@media (max-width: 899px) {
  .ml-tabs span:nth-child(3) {
    display: none;
  }
}
.dx-inv .dx-flip > span,
.dx-threads .dx-flip > span,
.dx-week-r .dx-flip > span {
  white-space: normal;
}
.dx-g-plan {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@media (max-width: 759px) {
  .dx-g-plan {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* the hand-over: the first dark section rises in while the hero dims (--hd on .home, client/home.ts), so there is
   never a tall empty band; its negative margin lets the sections after it follow, so no gap opens below it */
.motion .v2 .home > .prod {
  position: relative;
  z-index: 2;
  translate: 0 calc(var(--hd, 0) * -400px);
  margin-bottom: calc(var(--hd, 0) * -400px);
}
/* --dim is a colour token elsewhere (styles.css); in the hero it is the scroll progress, 0 until the script runs */
.v2 .hero {
  --dim: 0;
}

/* video wall: the green closing sentence always starts on its own line and never breaks apart */
.wl-g {
  display: block;
  margin-top: 0.35em;
  white-space: nowrap;
}
@media (max-width: 759px) {
  .wl-g {
    /* the longest version ("We take the work off your hands.") still fits one line at 360px */
    font-size: min(1em, 4.2vw);
  }
}

/* footer: the still of the 3D chrome loop */
.f2-brand .f2-inf {
  display: block;
  width: 64px;
  height: 32px;
  flex: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(22, 196, 127, 0.18));
}

/* ---------- social media simulation (sims/social.tsx, client/sims/social.ts) ---------- */
.sa {
  --sa-bg: #f5f6f8;
  --sa-line: #e3e5e9;
  --sa-line-2: #eef0f3;
  --sa-ink: #18191c;
  --sa-mute: #6b7079;
  --sa-ok: #137a4b;
  --sa-ok-t: #e4f5ec;
  --sa-amb: #9a5b00;
  --sa-red: #e0352b;
  display: flex;
  flex-direction: column;
  height: 690px;
  font:
    400 13px/1.4 Inter,
    -apple-system,
    'Segoe UI',
    system-ui,
    Arial,
    sans-serif;
  color: var(--sa-ink);
  background: var(--sa-bg);
  text-align: left;
  letter-spacing: 0;
}
.sa p {
  margin: 0;
}
.sa .ic,
.sa .sa-g {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
}

/* ---------- photos (public/media/sims/social) ---------- */
.sa-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e9e3d9;
}

/* ---------- AI status bar ---------- */
.sa-ai {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 0;
  padding: 10px 14px;
  border-radius: 11px;
  background: linear-gradient(90deg, #e3f6ec, #eff8f3);
  box-shadow: inset 0 0 0 1px #cfeedd;
  color: #0d4a32;
  font-size: 13px;
  overflow: hidden;
  max-height: 64px;
  transition:
    max-height 0.5s var(--e-out),
    opacity 0.4s,
    margin 0.5s,
    padding 0.5s;
}
.sa .sa-ai .ic {
  color: #16a06a;
}
.sa-ai-t {
  display: grid;
}
.sa-ai-t > span {
  grid-area: 1 / 1;
  transition: opacity 0.4s;
}
.sa-ai-run {
  opacity: 0;
}
.sa-ai-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.sa-ai-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #16c47f;
  transition-property: width;
  transition-timing-function: linear;
}

/* ---------- two halves ---------- */
.sa-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  margin-top: 10px;
  border-top: 1px solid var(--sa-line);
}

/* left: the planner */
.sa-pl {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--sa-line);
}
.sa-pl-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 50px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--sa-line);
}
.sa-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sa-logo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5px;
  width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 7px;
  background: linear-gradient(135deg, #2b2d33, #121316);
  box-sizing: border-box;
}
.sa-logo i {
  border-radius: 2px;
  background: #fff;
}
.sa-logo i:nth-child(4) {
  background: #f2b84b;
}
.sa-pl-tabs {
  display: flex;
  gap: 16px;
  align-self: stretch;
  font-size: 12.5px;
  color: var(--sa-mute);
}
.sa-pl-tabs span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.sa-pl-tabs .on {
  color: var(--sa-ink);
  font-weight: 600;
}
.sa-pl-tabs .on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--sa-ink);
}
.sa-pl-tabs em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--sa-bg);
  color: var(--sa-ink);
}
.sa-new {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--sa-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sa .sa-new .ic {
  width: 14px;
  height: 14px;
}
.sa-pl-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}
.sa-cal,
.sa-cmp {
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  overflow: hidden;
}
.sa-cal {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sa-cal-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
}
.sa-cal-h > b {
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
}
.sa-arrows {
  display: inline-flex;
  gap: 2px;
}
.sa .sa-arrows .ic {
  width: 20px;
  height: 20px;
  padding: 3px;
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--sa-mute);
  transform: rotate(90deg);
}
.sa .sa-arrows .ic + .ic {
  transform: rotate(-90deg);
}
.sa-acct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px 0 3px;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sa-mini-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
}
.sa-flag {
  margin-left: auto;
  justify-items: end;
}
.sa-flag > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.sa .sa-flag .ic {
  width: 12px;
  height: 12px;
}
.sa-flag-bad {
  color: #c2362b;
  background: #fdecea;
}
.sa-flag-good {
  color: var(--sa-ok);
  background: var(--sa-ok-t);
}
.sa-wd {
  flex: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--sa-line);
  background: #fafbfc;
}
.sa-wd span {
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sa-mute);
}
.sa-weeks {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.sa-wk {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 0;
  border-top: 1px solid var(--sa-line);
}
.sa-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  padding: 4px 5px 5px;
  overflow: hidden;
}
.sa-day + .sa-day {
  border-left: 1px solid var(--sa-line-2);
}
.sa-past {
  background: repeating-linear-gradient(135deg, #fafbfc 0 6px, #f2f3f5 6px 7px);
}
.sa-dn {
  flex: none;
  align-self: flex-start;
  min-width: 19px;
  height: 19px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-mute);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.sa-past .sa-dn {
  color: #a5a9b0;
}
.sa-today .sa-dn {
  background: var(--sa-ink);
  color: #fff;
}
.sa-post {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sa-pthumb {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 7px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px -2px rgba(16, 24, 40, 0.18);
}
.sa-approve .sa-pthumb {
  box-shadow:
    0 0 0 2px #f4b400,
    0 2px 6px -2px rgba(16, 24, 40, 0.18);
}
.sa .sa-ti {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  z-index: 2;
}
.sa-pst {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sa-ok);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sa-pst i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sa-approve .sa-pst {
  color: var(--sa-amb);
}
.sa-nothing {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 250px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px var(--sa-line),
    0 18px 40px -18px rgba(16, 24, 40, 0.3);
  text-align: center;
  font-size: 12px;
  color: var(--sa-mute);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s,
    visibility 0.4s;
}
.sa-nothing b {
  font-size: 14px;
  color: var(--sa-ink);
}
.sa-nothing span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #fdecea;
  color: #c2362b;
}

/* composer */
.sa-cmp {
  position: relative;
  flex: none;
  height: 176px;
}
.sa-cmp-a,
.sa-cmp-b {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 14px;
  padding: 12px;
  transition:
    opacity 0.5s,
    transform 0.5s var(--e-out);
}
.sa-cmp-img {
  position: relative;
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
}
.sa-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}
.sa-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.sa-dots .on {
  background: #fff;
}
.sa-cmp-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sa-cmp-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sa-cmp-h b {
  font-size: 13px;
  font-weight: 650;
}
.sa-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}
.sa-pill-bad {
  color: #c2362b;
  background: #fdecea;
}
.sa-pill-w {
  color: var(--sa-amb);
  background: #feefc3;
}
.sa-cap {
  font-size: 12px;
  line-height: 1.45;
  color: #2b2e33;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sa-cap-bad {
  -webkit-line-clamp: 5;
}
.sa-tags {
  color: #2f55a4;
}
.sa-meta {
  margin-top: auto !important;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: var(--sa-mute);
  white-space: nowrap;
}
.sa-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sa .sa-meta .ic,
.sa .sa-meta .sa-g {
  width: 14px;
  height: 14px;
}
.sa-meta-bad > span + span {
  color: #c2362b;
  font-weight: 600;
}
.sa .sa-acts {
  margin-left: auto;
  gap: 6px;
}
.sa-btn {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--sa-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
.sa-btn-q {
  background: #fff;
  color: var(--sa-ink);
  box-shadow: inset 0 0 0 1px var(--sa-line);
}

/* right: the profile on a phone-width column */
.sa-pf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.7), transparent),
    linear-gradient(180deg, #e9ebee, #e1e4e8);
  overflow: hidden;
}
.sa-pf-l {
  flex: none;
  margin: 0 0 8px !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #80858e;
}
.sa-phone {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 364px;
  max-width: calc(100% - 24px);
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 24px 50px -24px rgba(16, 24, 40, 0.35);
  overflow: hidden;
  font-family: -apple-system, 'SF Pro Text', Inter, 'Segoe UI', system-ui, sans-serif;
  color: #0f0f0f;
}
.sa-sb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 4px 26px 0;
  font-size: 12.5px;
}
.sa-sb span {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.sa-sb i {
  width: 3px;
  border-radius: 1px;
  background: #111;
}
.sa-sb i:nth-child(1) {
  height: 5px;
}
.sa-sb i:nth-child(2) {
  height: 7px;
}
.sa-sb i:nth-child(3) {
  height: 9px;
}
.sa-sb u {
  width: 20px;
  height: 9px;
  margin-left: 6px;
  border-radius: 3px;
  border: 1px solid #111;
  background: linear-gradient(90deg, #111 0 72%, transparent 72%) 1px 1px / calc(100% - 2px) calc(100% - 2px)
    no-repeat;
}
.sa-pf-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 14px;
}
.sa-pf-top b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sa .sa-pf-top > .sa-g {
  width: 15px;
  height: 15px;
}
.sa-pf-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.sa .sa-pf-icons .sa-g {
  width: 23px;
  height: 23px;
}
.sa-heart {
  position: relative;
  display: grid;
}
.sa-heart em {
  position: absolute;
  top: -5px;
  left: 13px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  border: 2px solid #fff;
  background: var(--sa-red);
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sa[data-phase='done'] .sa-heart em {
  display: none;
}
.sa-pf-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 16px 10px;
}
.sa-ring {
  flex: none;
  width: 80px;
  height: 80px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #d6a25f, #a7b07a, #5f8a76, #d6a25f);
  box-sizing: border-box;
  transition: background 0.6s;
}
.sa-av {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.sa-av b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font:
    700 18px/1 Georgia,
    'Times New Roman',
    serif;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  background: rgba(24, 40, 32, 0.42);
  z-index: 2;
}
.sa-counts {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-size: 12.5px;
  color: #262626;
}
.sa-counts > span {
  display: grid;
}
.sa-counts b {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sa-bio {
  flex: none;
  display: grid;
  padding: 0 16px;
  font-size: 12.5px;
  line-height: 1.38;
}
.sa-bio > b {
  font-weight: 650;
}
.sa-catg {
  color: #737373;
}
.sa-pf-btns {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 16px 8px;
}
.sa-pf-btns span {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  background: #efefef;
  font-size: 12.5px;
  font-weight: 600;
}
.sa-pf-btns span:first-child {
  background: #262a33;
  color: #fff;
}
.sa-hl {
  flex: none;
  padding: 4px 16px 8px;
}
.sa-hl > span {
  display: flex;
  gap: 15px;
}
.sa-hc {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 58px;
}
.sa-hi {
  display: block;
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d6d6d6;
  box-sizing: border-box;
}
.sa-hi .sa-ph {
  border-radius: 50%;
}
.sa-hc small {
  max-width: 62px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-hplus {
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 26px;
  font-weight: 300;
  color: #262626;
}
.sa-pf-tabs {
  flex: none;
  display: flex;
  border-top: 1px solid #ececec;
}
.sa-pf-tabs span {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  height: 38px;
  color: #a8a8a8;
}
.sa-pf-tabs .on {
  color: #111;
}
.sa-pf-tabs .on::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 1.5px;
  background: #111;
}
.sa .sa-pf-tabs .sa-g {
  width: 21px;
  height: 21px;
}
.sa-feed {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.sa-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eee;
}
.sa-bad,
.sa-good {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.7s var(--e-out),
    transform 0.9s var(--e-out),
    filter 0.7s;
}
.sa-bad {
  opacity: 0;
}
.sa-cb {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  z-index: 3;
}
.sa-cb::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: var(--sa-red);
}
.sa .sa-cb .sa-g {
  width: 11px;
  height: 11px;
}
.sa-toast {
  position: absolute !important;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: grid;
}
.sa-toast > span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 13px;
  font-size: 11.5px;
  line-height: 1.3;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35);
}
.sa-toast-bad {
  background: #1d1e21;
  color: #fff;
}
.sa-toast-bad b {
  font-variant-numeric: tabular-nums;
}
.sa .sa-toast-bad .sa-g {
  color: #ff6b61;
}
.sa-toast-good {
  background: #effaf4;
  color: #0d4a32;
  box-shadow:
    inset 0 0 0 1px #cfeedd,
    0 14px 30px -12px rgba(0, 0, 0, 0.25) !important;
}
.sa .sa-toast-good .ic {
  color: #16a06a;
}

/* ---------- text that swaps (a = before, b = after; sa-mid swaps halfway through the work) ---------- */
.sa-sw {
  display: grid;
}
.sa-sw > span {
  grid-area: 1 / 1;
  transition:
    opacity 0.5s,
    transform 0.5s var(--e-out),
    visibility 0.5s;
}
.sa-sw-a,
.sa:not([data-phase='done']) .sa-sw:not(.sa-mid) > .sa-sw-b,
.sa:not([data-phase='done']):not(.mid) .sa-sw.sa-mid > .sa-sw-b {
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
}
.sa:not([data-phase='done']) .sa-sw:not(.sa-mid) > .sa-sw-a,
.sa:not([data-phase='done']):not(.mid) .sa-sw.sa-mid > .sa-sw-a {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sa-cmp-a {
  opacity: 0;
  visibility: hidden;
}
.sa:not([data-phase='done']):not(.mid) .sa-cmp-a {
  opacity: 1;
  visibility: visible;
}
.sa:not([data-phase='done']):not(.mid) .sa-cmp-b {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

/* ---------- the animation: idle → chaos → work → done ---------- */
.sa[data-phase='idle'] .sa-ai,
.sa[data-phase='chaos'] .sa-ai {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.sa[data-phase='work'] .sa-ai-run {
  opacity: 1;
}
.sa[data-phase='work'] .sa-ai-done {
  opacity: 0;
}
.sa[data-phase='work'] .sa-ai-bar i:not(.go),
.sa[data-phase='idle'] .sa-ai-bar i,
.sa[data-phase='chaos'] .sa-ai-bar i {
  width: 0;
}
/* the feed: messy until each post is redone */
.sa:not([data-phase='done']) .sa-tile:not(.fx) .sa-bad {
  opacity: 1;
}
.sa:not([data-phase='done']) .sa-tile:not(.fx) .sa-good {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(4px);
}
.sa[data-phase='chaos'] .sa-tile.cm .sa-cb,
.sa[data-phase='work'] .sa-tile.cm:not(.fx) .sa-cb {
  display: inline-flex;
  animation: sa-pop 0.4s var(--e-out);
}
@keyframes sa-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
.sa[data-phase='chaos'] .sa-heart em {
  animation: sa-bump 0.9s ease-in-out infinite;
}
@keyframes sa-bump {
  50% {
    transform: scale(1.18);
  }
}
.sa:not([data-phase='done']):not(.mid) .sa-ring {
  background: #dbdbdb;
}
/* the calendar: empty until the team fills it */
.sa[data-phase='idle'] .sa-day.has .sa-post,
.sa[data-phase='chaos'] .sa-day.has .sa-post,
.sa[data-phase='work'] .sa-day.has:not(.in) .sa-post {
  visibility: hidden;
}
.sa[data-phase='work'] .sa-day.in .sa-post {
  animation: sa-post 0.55s var(--e-out);
}
@keyframes sa-post {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
}
.sa[data-phase='idle'] .sa-nothing,
.sa[data-phase='chaos'] .sa-nothing {
  opacity: 1;
  visibility: visible;
}
.sa[data-phase='idle'] *,
.sa[data-phase='idle'] {
  transition: none !important;
}
.sa.played .sa-toast-good {
  animation: sa-toast 0.6s 0.3s var(--e-out) backwards;
}
@keyframes sa-toast {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ---------- phones and small tablets: only the profile ---------- */
@media (max-width: 899px) {
  .sa {
    height: 740px;
  }
  .sa-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .sa-pl,
  .sa-pf-l {
    display: none;
  }
  .sa-ai {
    max-height: 90px;
    margin: 8px 8px 0;
    padding: 9px 12px;
    font-size: 12px;
  }
  .sa-phone {
    width: 364px;
    max-width: calc(100% - 16px);
  }
  .sa-pf-h {
    gap: 12px;
  }
  .sa-ring {
    width: 72px;
    height: 72px;
  }
  .sa-hl > span {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa *,
  .sa *::before,
  .sa *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- ads simulation: the familiar ads manager (sims/ads.tsx, client/sims/ads.ts) ---------- */
.am {
  --am-bg: #f0f2f5;
  --am-line: #dadde1;
  --am-line-2: #e9ebee;
  --am-ink: #1c2b33;
  --am-mute: #606770;
  --am-acc: #1b6fd8;
  --am-acc-d: #1559b5;
  --am-acc-l: #e7f0fd;
  --am-go: #2e9e44;
  --am-on: #1b6fd8;
  font:
    400 12.5px/1.35 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--am-ink);
  background: var(--am-bg);
  text-align: left;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.am .ic {
  width: 17px;
  height: 17px;
  flex: none;
  color: #4b4f56;
}
.am-eur::before {
  content: '€';
  margin-right: 0.12em;
}
.am-nil::before {
  content: none;
}

/* top bar: wordmark, account, date range, publish */
.am-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--am-line);
}
.am-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.am-logo {
  flex: none;
}
.am-logo svg {
  display: block;
  width: 26px;
  height: 26px;
}
.am-logo rect {
  fill: var(--am-acc-l);
}
.am-logo path {
  fill: none;
  stroke: var(--am-acc);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.am-acct,
.am-date {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--am-line);
  border-radius: 6px;
  background: #fff;
  white-space: nowrap;
}
.am-acct > span:not(.am-av) {
  display: grid;
  line-height: 1.15;
}
.am-acct b {
  font-size: 12.5px;
  font-weight: 600;
}
.am-acct small {
  font-size: 11px;
  color: var(--am-mute);
}
.am-acct .ic,
.am-date .ic {
  width: 14px;
  height: 14px;
}
.am-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2b4a6b;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
}
.am-date {
  margin-left: auto;
  padding: 0 10px;
  font-size: 12px;
}
.am-date b {
  font-weight: 600;
}
.am-date-r {
  color: var(--am-mute);
}
.am-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}
.am-bell {
  position: relative;
  display: flex;
}
.am-bell b {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e41e3f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  box-sizing: border-box;
}
.am-bell b.pop {
  animation: am-pop 0.4s var(--e-out);
}
.am-bell b.zero {
  visibility: hidden;
}
.am-pub {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--am-go);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* body: icon rail + main */
.am-body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 100%;
  height: 572px;
}
.am-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: #fff;
  border-right: 1px solid var(--am-line);
}
.am-rail > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
}
.am-rail .on {
  background: var(--am-acc-l);
}
.am-rail .on .ic {
  color: var(--am-acc);
}
.am-rail-end {
  margin-top: auto;
}
.am-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden;
}

/* the three level cards, attached to the panel below */
.am-cards {
  display: flex;
  flex: none;
  gap: 2px;
}
.am-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 230px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--am-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #e4e6eb;
  color: var(--am-mute);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.am-card.on {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  height: 43px;
  background: #fff;
  color: var(--am-acc);
}
.am-lvl {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.am-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--am-line);
  border-radius: 0 8px 8px 8px;
  background: #fff;
  overflow: hidden;
}

/* toolbar */
.am-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 48px;
  padding: 0 12px;
}
.am-make {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--am-acc);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.am-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--am-line);
  border-radius: 6px;
  color: var(--am-ink);
  font-weight: 600;
  white-space: nowrap;
}
.am-btn .ic {
  width: 13px;
  height: 13px;
}
.am-cols {
  margin-left: auto;
}

/* message slot: search (idle) → alert (chaos) → AI status (work, done) */
.am-slot {
  display: grid;
  flex: none;
  height: 38px;
  margin: 0 12px 10px;
}
.am-slot > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity 0.45s,
    transform 0.45s var(--e-out),
    visibility 0.45s;
}
.am-filt {
  display: flex;
  align-items: center;
}
.am-q {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--am-line);
  border-radius: 6px;
  color: #8a8d91;
  white-space: nowrap;
}
.am-q .ic {
  width: 15px;
  height: 15px;
}
.am-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 6px;
  background: #fdeef0;
  box-shadow: inset 0 0 0 1px #f5c2ca;
  color: #8f1027;
  white-space: nowrap;
  overflow: hidden;
}
.am-alert b {
  font-weight: 700;
}
.am-alert-ic {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e41e3f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.am-alert-x {
  color: #a8334a;
}
.am-ai {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e3f6ec, #eff8f3);
  color: #0d4a32;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
}
.am .am-ai .ic {
  color: #16a06a;
}
.am-ai-t {
  display: grid;
  min-width: 0;
}
.am-ai-t > span {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.4s;
}
.am-ai-run {
  opacity: 0;
}
.am-ai-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.am-ai-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #16c47f;
  transition-property: width;
  transition-timing-function: linear;
}
.am-filt,
.am-alert {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}
.am[data-phase='idle'] .am-filt,
.am[data-phase='chaos'] .am-filt:not(.off),
.am[data-phase='chaos'] .am-alert.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.am[data-phase='idle'] .am-ai,
.am[data-phase='chaos'] .am-ai {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
}
.am[data-phase='work'] .am-ai-run {
  opacity: 1;
}
.am[data-phase='work'] .am-ai-done {
  opacity: 0;
}
.am[data-phase='work'] .am-ai-bar i:not(.go),
.am[data-phase='idle'] .am-ai-bar i,
.am[data-phase='chaos'] .am-ai-bar i {
  width: 0;
}

/* the campaign table */
.am-tbl {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--am-line);
}
.am-th,
.am-r {
  display: grid;
  grid-template-columns: 24px 40px minmax(0, 1fr) 122px 62px 58px 60px 66px 50px 78px 80px 78px;
  align-items: center;
  column-gap: 6px;
  padding: 0 12px 0 8px;
}
.am-th {
  flex: none;
  height: 40px;
  background: #f5f6f7;
  border-bottom: 1px solid var(--am-line);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  color: #444950;
}
.am-th > span,
.am-r > span {
  min-width: 0;
}
:is(.am-th, .am-r)
  :is(.am-c-bud, .am-c-res, .am-c-reach, .am-c-impr, .am-c-ctr, .am-c-cpr, .am-c-spent, .am-c-end) {
  text-align: right;
  justify-self: end;
}
.am-c-cb,
.am-c-tg {
  display: grid;
  place-items: center;
}
.am-th .am-c-tg {
  font-size: 10.5px;
}
.am-cb {
  width: 13px;
  height: 13px;
  border: 1px solid #a5a9ae;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
}
.am-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.am-r {
  position: relative;
  height: 44px;
  border-bottom: 1px solid var(--am-line-2);
  background: #fff;
  overflow: hidden;
  transition:
    height 0.5s var(--e-out),
    opacity 0.4s,
    background-color 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.am-c-name {
  display: grid;
  line-height: 1.25;
}
.am-c-name b {
  font-weight: 600;
  color: var(--am-acc-d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-r small,
.am-c-name small {
  display: block;
  font-size: 11px;
  color: var(--am-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-r > span:not(.am-c-name) small {
  line-height: 1.2;
}
.am-n {
  white-space: nowrap;
}
.am-c-end {
  color: var(--am-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-c-bud {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.am-bb {
  display: block;
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: #e9ebee;
  overflow: hidden;
}
.am-bb i {
  display: block;
  height: 100%;
  margin-left: auto;
  border-radius: 2px;
  background: #a5adb8;
  transition:
    width 0.9s var(--e-out),
    background-color 0.4s;
}
.am-f-win .am-bb i {
  background: var(--am-acc);
}

/* the totals row */
.am-tot {
  flex: none;
  height: 48px;
  margin-top: auto;
  border-top: 1px solid var(--am-line);
  border-bottom: 0;
  background: #f5f6f7;
  font-weight: 700;
}
.am-tot .am-c-name b {
  color: var(--am-ink);
}
.am-tot small {
  font-weight: 400;
}
.am-tot .am-c-spent .am-n {
  font-size: 13.5px;
}

/* small toggles */
.am-tg {
  position: relative;
  display: block;
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: var(--am-on);
  transition: background-color 0.3s;
}
.am-tg::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.3s var(--e-out);
}
.am-r:is([data-fate='pause'], [data-fate='new']) .am-tg {
  background: #bcc0c4;
}
.am-r:is([data-fate='pause'], [data-fate='new']) .am-tg::after {
  left: 2px;
}
.am:not([data-phase='done']) .am-r[data-fate='pause']:not(.fin) .am-tg {
  background: var(--am-on);
}
.am:not([data-phase='done']) .am-r[data-fate='pause']:not(.fin) .am-tg::after {
  left: 14px;
}

/* delivery */
.am-c-lev > span {
  display: inline-flex;
}
.am-lv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.am-lv i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.am-t-ok {
  --c: #31a24c;
}
.am-t-off {
  --c: #bcc0c4;
  color: var(--am-mute);
}
.am-t-rev {
  --c: #f7b928;
}
.am-t-warn,
.am-t-bad,
.am-t-wait {
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
}
.am-t-warn {
  --c: #e47600;
  color: #964d00;
  background: #fff1df;
}
.am-t-bad {
  --c: #e41e3f;
  color: #a10d2b;
  background: #fdeef0;
}
.am-t-wait {
  --c: #f7b928;
  color: #855200;
  background: #fff3cf;
}
.am-f-win .am-b .am-lv {
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #137333;
  font-weight: 600;
  font-size: 11.5px;
}

/* a/b states: before (chaos) and after (handled); the HTML shows "after" */
.am .am-a,
.am .am-a1 {
  display: none;
}
.am:not([data-phase='done']) .am-own:not(.fin) .am-a {
  display: inline-flex;
}
.am:not([data-phase='done']) .am-own:not(.fin) .am-b {
  display: none;
}
.am-r.warn .am-a0 {
  display: none;
}
.am-r.warn .am-a1 {
  display: inline-flex;
  animation: am-pop 0.45s var(--e-out);
}
.am-r.warn {
  box-shadow: inset 3px 0 0 #e47600;
}
.am-r.warn[data-fate='fix'] {
  box-shadow: inset 3px 0 0 #e41e3f;
}
.am .am-r.warn.fin,
.am[data-phase='done'] .am-r.warn {
  box-shadow: none;
}
.am-b {
  animation: am-in 0.4s var(--e-out);
}
.am-n.flash {
  animation: am-flash 0.9s var(--e-out);
}
@keyframes am-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes am-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@keyframes am-flash {
  30% {
    color: #137333;
  }
}

/* rows: the AI checks them one by one */
.am-r.scan {
  background: #f0faf5;
}
.am-r.scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(22, 196, 127, 0.16), transparent);
  animation: am-scan 0.6s linear;
  pointer-events: none;
}
@keyframes am-scan {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.am[data-phase='work'] .am-r.fin[data-fate='pause'] > span:not(.am-c-tg) {
  opacity: 0.5;
  transition: opacity 0.4s;
}

/* end state (also without JavaScript): paused rows hidden, the two new ads waiting for you */
.am-r[data-fate='pause'] {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.am:not([data-phase='done']) .am-r[data-fate='pause']:not(.gone) {
  height: 44px;
  opacity: 1;
  border-color: var(--am-line-2);
}
.am-r[data-fate='new'] {
  height: 50px;
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f7b928;
}
.am:not([data-phase='done']) .am-r[data-fate='new']:not(.in) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.am-r[data-fate='new'].in {
  animation: am-new 0.6s var(--e-out);
}
@keyframes am-new {
  from {
    background: #fff3c4;
  }
}
.am-c-var {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 12px;
}
.am-c-var > span:last-child {
  display: grid;
  min-width: 0;
}
.am-c-var b {
  color: var(--am-ink);
}
.am-th-img {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.am-th-img.am-th-img {
  background:
    radial-gradient(circle at 72% 30%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 30% 22%, #fff 0 1.5px, transparent 2.5px),
    linear-gradient(180deg, #9cc3e6 0 60%, #eef1f4 60% 100%);
}
.am-th-img::after {
  content: '';
  position: absolute;
  left: 6px;
  bottom: 8px;
  width: 20px;
  height: 9px;
  border-radius: 2px;
  background: #fff;
  box-shadow:
    0 1px 0 #aab1b9,
    inset 0 -2px 0 #dfe3e8;
}
.am-th-img.am-th-play {
  background: linear-gradient(140deg, #36414d, #1c232b);
}
.am-th-play::after {
  left: 12px;
  top: 10px;
  bottom: auto;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.am-c-ask {
  grid-column: 5 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
.am-ask-t {
  min-width: 0;
  font-size: 12px;
  color: var(--am-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-ok {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--am-acc);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.am .am-ok .ic {
  width: 14px;
  height: 14px;
  color: #fff;
  stroke-width: 2.4;
}
.am-hid {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--am-line-2);
  font-size: 12px;
  color: var(--am-mute);
  overflow: hidden;
  transition:
    height 0.5s var(--e-out),
    opacity 0.4s;
}
.am .am-hid .ic {
  width: 14px;
  height: 14px;
  color: #a5a9ae;
}
.am-hid span {
  margin-left: auto;
  color: var(--am-acc);
  font-weight: 600;
}
.am:not([data-phase='done']) .am-hid:not(.in) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.am-sum {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: 8px;
  margin: 0;
  padding: 10px 0 0;
  animation: am-in 0.6s var(--e-out);
}
.am-sum span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--am-line);
  font-size: 12px;
  color: #3f454c;
  white-space: nowrap;
}
.am .am-sum .ic {
  width: 13px;
  height: 13px;
  color: #16a06a;
}
.am-sum .am-sum-g {
  background: #e6f4ea;
  box-shadow: none;
  color: #137333;
}
.am-sum-g b {
  font-weight: 700;
}
.am:not([data-phase='done']) .am-sum {
  display: none;
}
.am[data-phase='idle'] :is(.am-r, .am-hid, .am-slot > *) {
  transition: none;
}

/* narrower windows: fewer columns */
@media (max-width: 1100px) {
  .am-th,
  .am-r {
    grid-template-columns: 24px 40px minmax(0, 1fr) 122px 60px 56px 64px 78px 80px;
  }
  :is(.am-th, .am-r) :is(.am-c-reach, .am-c-ctr, .am-c-end) {
    display: none;
  }
  .am-acct,
  .am-btn-3 {
    display: none;
  }
}
@media (max-width: 899px) {
  .am-body {
    grid-template-columns: minmax(0, 1fr);
    height: 616px;
  }
  .am-rail,
  .am-btn-2,
  .am-pub,
  .am-date-r,
  .am-alert-x,
  .am-ask-t {
    display: none;
  }
  .am-top {
    padding: 0 10px;
    height: 48px;
    gap: 10px;
  }
  .am-brand {
    font-size: 0;
  }
  .am-date {
    margin-left: auto;
  }
  .am-date > .ic:last-child {
    display: none;
  }
  .am-date {
    font-size: 11.5px;
  }
  .am-main {
    padding: 8px;
  }
  .am-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    gap: 6px;
    font-size: 0;
  }
  .am-card.on {
    flex: 2 1 0;
    font-size: 12.5px;
  }
  .am-bar {
    padding: 0 8px;
  }
  .am-slot {
    margin: 0 8px 8px;
  }
  .am-ai {
    font-size: 12px;
    padding: 0 10px;
  }
  .am-th,
  .am-r {
    grid-template-columns: 34px minmax(0, 1fr) 64px 62px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-content: center;
    padding: 0 10px 0 0;
  }
  :is(.am-th, .am-r) :is(.am-c-cb, .am-c-bud, .am-c-res, .am-c-reach, .am-c-impr, .am-c-ctr, .am-c-end) {
    display: none;
  }
  .am-th .am-c-lev,
  .am-r .am-c-name small {
    display: none;
  }
  .am-c-tg,
  .am-th > span {
    grid-row: 1 / 3;
  }
  .am-r .am-c-name {
    grid-column: 2;
    grid-row: 1;
  }
  .am-r .am-c-lev {
    grid-column: 2;
    grid-row: 2;
  }
  :is(.am-th, .am-r) .am-c-spent {
    grid-column: 3;
    grid-row: 1 / 3;
  }
  :is(.am-th, .am-r) .am-c-cpr {
    grid-column: 4;
    grid-row: 1 / 3;
  }
  .am-tot .am-c-name small {
    display: none;
  }
  .am-tot .am-c-name b {
    white-space: normal;
    line-height: 1.15;
  }
  .am-r,
  .am:not([data-phase='done']) .am-r[data-fate='pause']:not(.gone) {
    height: 48px;
  }
  .am-r[data-fate='new'] {
    height: 54px;
  }
  .am-c-var {
    padding-left: 0;
    gap: 8px;
  }
  .am-th-img {
    width: 28px;
    height: 28px;
  }
  .am-r .am-c-ask {
    grid-column: 3 / -1;
    grid-row: 1 / 3;
  }
  .am-ok {
    padding: 0 10px;
  }
  .am-sum {
    gap: 6px;
  }
  .am-sum span {
    font-size: 11px;
    padding: 5px 9px;
  }
  .am-sum span:nth-child(-n + 3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .am *,
  .am *::before,
  .am *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- reviews simulation (sims/reviews.tsx, client/sims/reviews.ts) ---------- */
.rw-app {
  --rw-gold: #f0a420;
  --rw-line: #e7e9ec;
  --rw-hair: #eef0f2;
  --rw-mute: #686d73;
  --rw-ink: #1f2226;
  --rw-green: #137a52;
  font:
    400 14px/1.4 Roboto,
    'Segoe UI',
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  color: var(--rw-ink);
  background: #f3f4f6;
  text-align: left;
  letter-spacing: 0;
}
.rw-app .ic {
  width: 18px;
  height: 18px;
  flex: none;
  color: #4b5056;
}
:where(.rw-app) p {
  margin: 0;
}

/* top bar */
.rw-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 18px;
  background: #fff;
}
.rw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 196px;
  flex: none;
}
.rw-brand > span {
  display: grid;
  font-size: 15.5px;
  font-weight: 500;
  color: #34383d;
  line-height: 1.15;
}
.rw-brand small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--rw-mute);
}
.rw-logo {
  display: block;
  width: 28px;
  height: 26px;
  flex: none;
}
.rw-logo path {
  fill: #1c7c58;
}
.rw-logo path.s {
  fill: #fff;
}
.rw-biz {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--rw-line);
  border-radius: 10px;
}
.rw-biz i {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #c2410c;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
}
.rw-biz > span {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.rw-biz b {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rw-biz small {
  font-size: 11.5px;
  color: var(--rw-mute);
  white-space: nowrap;
}
.rw-biz .ic {
  width: 15px;
  height: 15px;
}
.rw-search {
  flex: 1;
  max-width: 360px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 20px;
  background: #f1f3f4;
  color: #5b6066;
  font-size: 13.5px;
}
.rw-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.rw-me {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #5b6b8a;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
}

/* sub navigation */
.rw-nav {
  display: flex;
  gap: 2px;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--rw-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.rw-nav span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-size: 13.5px;
  color: #5b6066;
  white-space: nowrap;
}
.rw-nav .on {
  color: #0f5c3d;
  font-weight: 600;
}
.rw-nav .on::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #1c7c58;
}
.rw-nb {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #d93025;
  padding: 1px 7px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s;
}
.rw-app[data-phase='done'] .rw-nb {
  display: none;
}

/* body */
.rw-body {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 14px;
  height: 500px;
  padding: 14px;
}
.rw-side,
.rw-main {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rw-line);
  border-radius: 12px;
}

/* the score card */
.rw-side {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 6px;
  overflow: hidden;
}
.rw-cap {
  font-size: 12px;
  color: var(--rw-mute);
}
.rw-big {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
}
.rw-avg {
  font-size: 46px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rw-trend {
  display: grid;
}
.rw-trend > span {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.4s;
}
.rw-tdown {
  color: #c5221f;
  background: #fce8e6;
  opacity: 0;
}
.rw-tup {
  color: #137333;
  background: #e6f4ea;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-tdown {
  opacity: 1;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-tup {
  opacity: 0;
}
.rw-bigstars {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.rw-bigstars .rw-s0,
.rw-bigstars .rw-s1 {
  display: flex;
  gap: 2px;
}
.rw-bigstars .rw-s1 {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--r, 92%);
  overflow: hidden;
}
.rw-bigstars svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: #dfe1e4;
}
.rw-bigstars .rw-s1 svg {
  fill: var(--rw-gold);
}
.rw-tot {
  margin-top: 4px;
  font-size: 13px;
  color: var(--rw-mute);
}
.rw-tot b {
  font-weight: 500;
  color: var(--rw-ink);
  font-variant-numeric: tabular-nums;
}
.rw-delta {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  color: #137333;
  background: #e6f4ea;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s;
}
.rw-app[data-phase='idle'] .rw-delta {
  opacity: 0;
}
.rw-dist em {
  font-style: normal;
  text-align: right;
  color: var(--rw-mute);
}
.rw-dist {
  list-style: none;
  margin: 16px 0 6px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.rw-dist li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #4b5056;
  font-variant-numeric: tabular-nums;
}
.rw-dist i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #eceef0;
  overflow: hidden;
}
.rw-dist b {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 4px;
  background: var(--rw-gold);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.rw-stats {
  margin: 8px 0 0;
}
.rw-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--rw-hair);
  font-size: 12.5px;
}
.rw-stats dt {
  color: #4b5056;
}
.rw-stats dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.rw-stats dd b {
  display: inline-block;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #f1f3f4;
  transition:
    color 0.4s,
    background-color 0.4s;
}
.rw-st-un dd b {
  color: #137333;
  background: #e6f4ea;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos'], [data-phase='work']) .rw-st-un dd b {
  color: #c5221f;
  background: #fce8e6;
}
.rw-st-30 dd b {
  color: #137333;
  background: #e6f4ea;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-st-30 dd b {
  color: #8a5300;
  background: #feefc3;
}
.rw-flip {
  display: grid;
  font-weight: 600;
}
.rw-flip > span {
  grid-area: 1 / 1;
  justify-self: end;
  transition: opacity 0.4s;
}
.rw-old {
  color: #c5221f;
  opacity: 0;
}
.rw-now {
  color: #137333;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-old {
  opacity: 1;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-now {
  opacity: 0;
}

/* main column */
.rw-main {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  flex: none;
  padding: 0 16px;
  border-bottom: 1px solid var(--rw-hair);
}
.rw-chips {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.rw-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  font-size: 12.5px;
  color: #3c4043;
  white-space: nowrap;
}
.rw-chips .on {
  border-color: transparent;
  background: #e3f1ea;
  color: #0f5c3d;
  font-weight: 600;
}
.rw-chips b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rw-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: #4b5056;
  white-space: nowrap;
}
.rw-sort .ic {
  width: 15px;
  height: 15px;
}

/* the AI status bar */
.rw-ai {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e3f6ec, #eff8f3);
  color: #0d4a32;
  font-size: 13px;
  overflow: hidden;
  max-height: 60px;
  transition:
    max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s,
    margin 0.5s,
    padding 0.5s;
}
.rw-app .rw-ai .ic {
  color: #16a06a;
}
.rw-ai-t {
  display: grid;
}
.rw-ai-t > span {
  grid-area: 1 / 1;
  transition: opacity 0.4s;
}
.rw-ai-run {
  opacity: 0;
}
.rw-ai-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.rw-ai-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #16c47f;
  transition-property: width;
  transition-timing-function: linear;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-ai {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.rw-app[data-phase='work'] .rw-ai-run {
  opacity: 1;
}
.rw-app[data-phase='work'] .rw-ai-done {
  opacity: 0;
}
.rw-app[data-phase='work'] .rw-ai-bar i:not(.go),
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-ai-bar i {
  width: 0;
}

/* the feed of review cards */
.rw-feed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.rw-c {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--rw-hair);
  transition:
    grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s,
    background-color 0.5s,
    border-color 0.4s;
}
.rw-ci {
  min-height: 0;
  overflow: hidden;
}
.rw-cb {
  padding: 13px 18px 14px;
}
.rw-ch {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}
.rw-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: hsl(var(--h) 42% 45%);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.rw-who {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.rw-who b {
  font-size: 13.5px;
  font-weight: 600;
}
.rw-who small {
  font-size: 11.5px;
  color: var(--rw-mute);
}
.rw-new {
  display: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  color: #1d4fb8;
  background: #e8effd;
}
.rw-app .rw-dots .ic {
  width: 16px;
  height: 16px;
  color: #80868b;
}
.rw-cm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0 4px;
}
.rw-stars {
  display: inline-flex;
  gap: 1px;
}
.rw-stars svg {
  width: 14px;
  height: 14px;
  fill: #dfe1e4;
}
.rw-stars svg.on {
  fill: var(--rw-gold);
}
.rw-cm time {
  font-size: 12px;
  color: var(--rw-mute);
}
.rw-tx {
  font-size: 13.5px;
  line-height: 1.45;
  color: #2b2f33;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.rw-cf {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}
.rw-none {
  font-size: 12px;
  font-weight: 500;
  color: #b3261e;
}
.rw-none::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}
.rw-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #dadce0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1c6b4c;
}
.rw-app .rw-btn .ic {
  width: 13px;
  height: 13px;
  color: currentColor;
}

/* the owner reply */
.rw-rep {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 10px;
  transition:
    grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s;
}
.rw-ri {
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f7f6;
  box-shadow: inset 2px 0 0 #c9d6cf;
}
.rw-rh {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 0;
  font-size: 12.5px;
}
.rw-rh i {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #c2410c;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}
.rw-rh b {
  font-weight: 600;
  white-space: nowrap;
}
.rw-rh em {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.rw-ok {
  color: #137333;
  background: #e6f4ea;
}
.rw-app .rw-ok .ic {
  width: 12px;
  height: 12px;
  color: currentColor;
}
.rw-wt {
  color: #8a5300;
  background: #feefc3;
}
.rw-rt {
  padding: 5px 12px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #33373b;
  min-height: 1.45em;
}
.rw-rt.typing::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  background: #1c7c58;
  vertical-align: -2px;
  animation: rw-k-caret 0.8s steps(1) infinite;
}
@keyframes rw-k-caret {
  50% {
    opacity: 0;
  }
}
.rw-act {
  display: flex;
  gap: 8px;
  padding: 0 12px 11px;
}
.rw-act span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
}
.rw-go {
  background: var(--rw-green);
  color: #fff;
}
.rw-ed {
  border: 1px solid #d5d8dc;
  background: #fff;
  color: #3c4043;
}
.rw-app .rw-act .ic {
  width: 13px;
  height: 13px;
  color: currentColor;
}

/* end state (also without JavaScript): only the drafts that need the owner stay */
.rw-c {
  grid-template-rows: 0fr;
  opacity: 0;
  border-color: transparent;
}
.rw-c.rw-f-wait {
  grid-template-rows: 1fr;
  opacity: 1;
  border-color: var(--rw-hair);
  background: #fffcf1;
  box-shadow: inset 3px 0 0 #f4b400;
}

/* the animation: idle → chaos → work → done */
.rw-app[data-phase='idle'] .rw-c,
.rw-app:is([data-phase='chaos'], [data-phase='work']) .rw-c:not(.in) {
  grid-template-rows: 0fr;
  opacity: 0;
  border-color: transparent;
}
.rw-app[data-phase='chaos'] .rw-c.in,
.rw-app[data-phase='work'] .rw-c.in:not(.gone) {
  grid-template-rows: 1fr;
  opacity: 1;
  border-color: var(--rw-hair);
  background: #fff;
  box-shadow: none;
}
.rw-app:is([data-phase='chaos'], [data-phase='work']) .rw-c.in .rw-cb {
  animation: rw-k-arrive 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rw-k-arrive {
  from {
    background: #eaf1fe;
    transform: translateY(-8px);
  }
  40% {
    transform: none;
  }
}
.rw-app:is([data-phase='chaos'], [data-phase='work']) .rw-c.in:not(.fin) .rw-new {
  display: inline-block;
}
.rw-app[data-phase='work'] .rw-c.in.fin {
  background: #f7fbf9;
}
.rw-app[data-phase='work'] .rw-c.rw-f-wait.fin {
  background: #fffcf1;
  box-shadow: inset 3px 0 0 #f4b400;
}
.rw-app[data-phase='work'] .rw-c.gone {
  grid-template-rows: 0fr;
  opacity: 0;
  border-color: transparent;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-cf,
.rw-app[data-phase='work'] .rw-c:not(.fin) .rw-cf {
  display: flex;
}
.rw-app:is([data-phase='idle'], [data-phase='chaos']) .rw-rep,
.rw-app[data-phase='work'] .rw-c:not(.fin) .rw-rep {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
}
.rw-app[data-phase='idle'] :is(.rw-c, .rw-rep, .rw-ai, .rw-dist b) {
  transition: none;
}

/* review requests going out */
.rw-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  background: #202428;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition:
    opacity 0.4s,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.rw-app .rw-toast .ic {
  width: 15px;
  height: 15px;
  color: #5fe0a8;
}
.rw-app.req .rw-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* summary and the calm end */
.rw-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  transition: opacity 0.6s 0.2s;
}
.rw-sum span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f3f4;
  font-size: 12.5px;
  color: #444746;
}
.rw-sum b {
  font-variant-numeric: tabular-nums;
  color: var(--rw-ink);
}
.rw-app .rw-sum .ic {
  width: 14px;
  height: 14px;
  color: #1c7c58;
}
.rw-clear {
  margin: auto 0 0;
  padding: 0 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5e5e5e;
  transition: opacity 0.6s 0.4s;
}
.rw-clear span {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e6f4ea;
}
.rw-app .rw-clear .ic {
  width: 15px;
  height: 15px;
  color: #137333;
}
.rw-app:not([data-phase='done']) :is(.rw-sum, .rw-clear) {
  display: none;
}

/* tablet and phone */
@media (max-width: 899px) {
  .rw-top {
    gap: 10px;
    padding: 0 12px;
  }
  .rw-brand {
    width: auto;
  }
  .rw-brand > span,
  .rw-search,
  .rw-tools .ic {
    display: none;
  }
  .rw-biz {
    flex: 1;
  }
  .rw-nav {
    padding: 0 4px;
    overflow: hidden;
  }
  .rw-nav span {
    padding: 0 11px;
    font-size: 13px;
  }
  .rw-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 470px;
    height: auto;
    gap: 10px;
    padding: 10px;
  }
  .rw-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    padding: 12px 14px 4px;
  }
  .rw-avg {
    font-size: 38px;
  }
  .rw-bigstars svg {
    width: 16px;
    height: 16px;
  }
  .rw-dist {
    margin: 0;
    gap: 4px;
  }
  .rw-dist i {
    height: 6px;
  }
  .rw-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    margin-top: 8px;
  }
  .rw-stats > div {
    padding: 7px 0;
    font-size: 11.5px;
  }
  .rw-stats dd b {
    min-width: 22px;
    padding: 0 6px;
  }
  .rw-bar {
    height: 46px;
    padding: 0 10px;
  }
  .rw-cb {
    padding: 11px 12px 12px;
  }
  .rw-tx {
    font-size: 13px;
  }
  .rw-rt {
    font-size: 12.5px;
  }
  .rw-toast {
    white-space: normal;
    width: max-content;
    font-size: 12.5px;
  }
}
@media (max-width: 560px) {
  .rw-nav span:nth-child(n + 4),
  .rw-chips span:nth-child(3),
  .rw-sort,
  .rw-biz small {
    display: none;
  }
  .rw-side {
    column-gap: 14px;
  }
  .rw-cap {
    font-size: 11px;
  }
  .rw-trend > span {
    font-size: 11px;
    padding: 1px 6px;
  }
  .rw-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .rw-stats > :not(.rw-st-last, .rw-st-30) {
    display: none;
  }
  .rw-body {
    grid-template-rows: auto 540px;
  }
  .rw-sum {
    gap: 6px;
    padding: 10px 12px;
  }
  .rw-sum span {
    padding: 5px 10px;
    font-size: 12px;
  }
  .rw-app .rw-act .ic {
    display: none;
  }
  .rw-rh {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .rw-rh em {
    margin-left: 0;
  }
  .rw-act span {
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .rw-clear {
    display: none;
  }
  .rw-ai {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-app *,
  .rw-app *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- invoices & receipts simulation (sims/invoices.tsx, client/sims/invoices.ts) ----------
 * A brand-free bookkeeping app. The HTML is the solved end state; data-phase idle → chaos → work → done plays it.
 * Invoice rows carry data-s (open | late | rem | end) and receipts data-s (loose | end) while it plays. */
.iv {
  container-type: inline-size;
  --iv-ink: #1b1e24;
  --iv-mute: #687080;
  --iv-line: #e6e8ed;
  --iv-soft: #f4f5f8;
  --iv-acc: #4a4fc4;
  --iv-red: #b42318;
  --iv-red-bg: #fdecea;
  --iv-green: #137333;
  --iv-green-bg: #e6f4ea;
  --iv-amber: #8f5300;
  --iv-amber-bg: #fdf0cf;
  --iv-blue: #2f55c8;
  --iv-blue-bg: #ebf0fe;
  --iv-rh: 38px;
  font:
    400 13.5px/1.4 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    system-ui,
    Arial,
    sans-serif;
  color: var(--iv-ink);
  background: #f6f7f9;
  text-align: left;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.iv .ic {
  width: 18px;
  height: 18px;
  flex: none;
  color: #4b5262;
}
.iv b {
  font-weight: 600;
}

/* top bar */
.iv-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--iv-line);
}
.iv-burger {
  display: none;
}
.iv-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 168px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.iv-mark svg {
  display: block;
  width: 24px;
  height: 24px;
}
.iv-mark rect {
  fill: var(--iv-acc);
}
.iv-mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.iv-co {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 5px;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.iv-co i {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #ece9fb;
  color: #4a3fa8;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}
.iv-co .ic {
  width: 14px;
  height: 14px;
}
.iv-search {
  flex: 1;
  max-width: 420px;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--iv-soft);
  color: #7a8190;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.iv-search span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv-search .ic {
  width: 16px;
  height: 16px;
  color: #7a8190;
}
.iv-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.iv-me {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2f3a4a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

/* body: sidebar + main */
.iv-body {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  height: 560px;
}
.iv-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px 12px;
  background: #fff;
  border-right: 1px solid var(--iv-line);
  font-size: 13.5px;
}
.iv-new {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin: 0 0 12px;
  border-radius: 8px;
  background: var(--iv-acc);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.iv-f {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px 0 10px;
  border-radius: 7px;
  color: #3d4352;
}
.iv-f .ic {
  width: 17px;
  height: 17px;
  color: #6b7282;
}
.iv-f.on {
  background: #eeefff;
  color: var(--iv-acc);
  font-weight: 600;
}
.iv-f.on .ic {
  color: var(--iv-acc);
}
.iv-bdg {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #e9ebf0;
  color: #3d4352;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.4s;
}
.iv-bdg.r {
  background: #d93a2f;
  color: #fff;
}
.iv-bdg b {
  font-weight: 700;
}
.iv-bdg:has(.zero) {
  visibility: hidden;
}
.iv-yr {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--iv-line);
  font-size: 11.5px;
  color: var(--iv-mute);
}
.iv-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: hidden;
}

/* the status bar: VAT warning (chaos) → AI at work → VAT overview ready */
.iv-bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e3f6ec, #eff8f3);
  box-shadow: inset 0 0 0 1px #cfe9da;
  color: #0d4a32;
  overflow: hidden;
  transition:
    background-color 0.5s,
    color 0.5s,
    box-shadow 0.5s;
}
.iv-bar-ic {
  display: grid;
}
.iv-bar-ic .ic {
  grid-area: 1 / 1;
  color: #16a06a;
  transition: opacity 0.4s;
}
.iv-bar-ic .ic:not(:last-child) {
  opacity: 0;
}
.iv-bar-t {
  display: grid;
  min-width: 0;
}
.iv-bar-t > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.4s;
}
.iv-bar-warn,
.iv-bar-run {
  opacity: 0;
}
.iv-bar-p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}
.iv-bar-p i {
  display: block;
  width: 100%;
  height: 100%;
  background: #16c47f;
  transition-property: width;
  transition-timing-function: linear;
}
.iv:is([data-phase='idle'], [data-phase='chaos']) .iv-bar {
  background: #fdf0ee;
  box-shadow: inset 0 0 0 1px #f5d0cb;
  color: #8f2219;
}
.iv:is([data-phase='idle'], [data-phase='chaos']) .iv-bar-warn,
.iv[data-phase='work'] .iv-bar-run {
  opacity: 1;
}
.iv:is([data-phase='idle'], [data-phase='chaos'], [data-phase='work']) .iv-bar-done,
.iv:is([data-phase='idle'], [data-phase='chaos'], [data-phase='work']) .iv-bar-ic .ic:last-child {
  opacity: 0;
}
.iv:is([data-phase='idle'], [data-phase='chaos']) .iv-bar-ic .ic:first-child,
.iv[data-phase='work'] .iv-bar-ic .ic:nth-child(2) {
  opacity: 1;
}
.iv:is([data-phase='idle'], [data-phase='chaos']) .iv-bar-ic .ic:first-child {
  color: #d93a2f;
}
.iv[data-phase='chaos'] .iv-bar {
  animation: iv-alarm 1.6s ease-in-out infinite;
}
@keyframes iv-alarm {
  50% {
    box-shadow:
      inset 0 0 0 1px #eba79f,
      0 0 0 4px rgba(217, 58, 47, 0.08);
  }
}
.iv:is([data-phase='idle'], [data-phase='chaos']) .iv-bar-p i,
.iv[data-phase='work'] .iv-bar-p i:not(.go) {
  width: 0;
}

/* KPI tiles */
.iv-kpis {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.iv-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 11px 14px 12px;
  border: 1px solid var(--iv-line);
  border-radius: 10px;
  background: #fff;
}
.iv-kl {
  font-size: 12px;
  font-weight: 500;
  color: var(--iv-mute);
  white-space: nowrap;
}
.iv-kv {
  margin-top: 3px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color 0.4s;
}
.iv-kv b {
  font-weight: inherit;
}
.iv-eur {
  font-weight: 500;
  color: #8a91a0;
}
.iv-kpi-late .iv-kv {
  color: var(--iv-red);
}
.iv-ks {
  margin-top: 2px;
  font-size: 12px;
  color: var(--iv-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv-ks b {
  font-weight: 500;
}
.iv-ks-w {
  color: var(--iv-amber);
  transition: opacity 0.5s;
}
.iv-meter {
  position: absolute;
  right: 14px;
  top: 16px;
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: #d9dbf6;
  overflow: hidden;
}
.iv-meter i {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: 3px;
  background: #e0483d;
  transition: width 0.6s var(--e-out, ease-out);
}
.iv-spark {
  position: absolute;
  right: 14px;
  top: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.iv-spark i {
  width: 4px;
  border-radius: 1px;
  background: #e1e4ea;
}
.iv-spark .iv-now {
  height: var(--h);
  background: #16a06a;
  transition: height 0.6s var(--e-out, ease-out);
}
.iv-kpi.bump {
  animation: iv-bump 0.5s var(--e-out, ease-out);
}
@keyframes iv-bump {
  30% {
    border-color: #f0b3ac;
  }
}
.iv-kpi.bump-g {
  animation: iv-bump-g 0.6s var(--e-out, ease-out);
}
@keyframes iv-bump-g {
  30% {
    border-color: #9fd9b7;
  }
}

/* the two panels */
.iv-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 12px;
}
.iv-inv,
.iv-rec {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--iv-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.iv-ph {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--iv-line);
}
.iv-ph > b {
  font-size: 14px;
}
.iv-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: var(--iv-soft);
  font-size: 12px;
  color: #5b6272;
}
.iv-seg span {
  padding: 3px 9px;
  border-radius: 5px;
}
.iv-seg .on {
  background: #fff;
  color: var(--iv-ink);
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(20, 24, 40, 0.06),
    0 1px 2px rgba(20, 24, 40, 0.08);
}

/* invoice table */
.iv-th,
.iv-r {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 92px 164px;
  grid-template-areas: 'nr cus amt st';
  align-items: center;
  column-gap: 12px;
  padding: 0 14px;
}
.iv-th {
  flex: none;
  height: 30px;
  border-bottom: 1px solid var(--iv-line);
  background: #fafbfc;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--iv-mute);
}
.iv-c-date {
  display: none;
}
.iv-c-amt {
  text-align: right;
}
.iv-th > :nth-child(1),
.iv-nr {
  grid-area: nr;
}
.iv-th > :nth-child(2),
.iv-cus {
  grid-area: cus;
}
.iv-th > .iv-c-amt,
.iv-amt {
  grid-area: amt;
}
.iv-th > :last-child,
.iv-st {
  grid-area: st;
}
.iv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  flex: none;
}
.iv-r {
  height: var(--iv-rh);
  border-bottom: 1px solid #f0f1f4;
  background: #fff;
  overflow: hidden;
  transition:
    height 0.45s var(--e-out, ease-out),
    opacity 0.4s,
    background-color 0.45s,
    box-shadow 0.45s,
    border-color 0.4s;
}
.iv-nr {
  font-size: 12.5px;
  color: var(--iv-mute);
}
.iv-cus {
  display: grid;
  min-width: 0;
}
.iv-cus b,
.iv-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-cus b {
  font-weight: 500;
}
.iv-note {
  display: none;
  font-size: 12px;
  color: #6b5a2e;
}
.iv-date {
  font-size: 12.5px;
  color: var(--iv-mute);
}
.iv-amt {
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.4s;
}
.iv-st {
  display: grid;
  justify-items: start;
  min-width: 0;
}
.iv-p {
  grid-area: 1 / 1;
  display: none;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--iv-soft);
  color: #4b5160;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv-p .ic {
  width: 13px;
  height: 13px;
  color: currentColor;
}
.iv-p-late {
  background: var(--iv-red-bg);
  color: var(--iv-red);
}
.iv-p-late i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.iv-p-rem {
  background: var(--iv-blue-bg);
  color: var(--iv-blue);
}
.iv-e-paid {
  background: var(--iv-green-bg);
  color: var(--iv-green);
}
.iv-e-wait {
  background: var(--iv-amber-bg);
  color: var(--iv-amber);
}
.iv-r:not([data-s]) .iv-p-end,
.iv-r[data-s='open'] .iv-p-open,
.iv-r[data-s='late'] .iv-p-late,
.iv-r[data-s='rem'] .iv-p-rem,
.iv-r[data-s='end'] .iv-p-end {
  display: inline-flex;
}
.iv:not([data-phase='done']) .iv-r[data-s]:not([data-s='open']) .iv-p {
  animation: iv-pop 0.35s var(--e-out, ease-out);
}
@keyframes iv-pop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* end state (also without JavaScript): only what waits for you stays */
.iv-r:not(.iv-wait) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.iv-r.iv-wait {
  height: 54px;
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f4b400;
}
.iv-r.iv-wait:not([data-s]) .iv-note,
.iv-r.iv-wait[data-s='end'] .iv-note {
  display: block;
}

/* the animation: idle → chaos → work → done */
.iv[data-phase='idle'] .iv-r,
.iv[data-phase='chaos'] .iv-r:not(.in) {
  height: 0;
  opacity: 0;
  border-color: transparent;
}
.iv[data-phase='chaos'] .iv-r.in,
.iv[data-phase='work'] .iv-r:not(.gone) {
  height: var(--iv-rh);
  opacity: 1;
  border-color: #f0f1f4;
  background: #fff;
  box-shadow: none;
}
.iv[data-phase='chaos'] .iv-r.in {
  animation: iv-in 0.45s var(--e-out, ease-out);
}
@keyframes iv-in {
  from {
    background: #eef0ff;
  }
}
.iv[data-phase] .iv-r[data-s='late'] {
  background: #fffafa;
  box-shadow: inset 2px 0 0 #e0483d;
}
.iv[data-phase] .iv-r[data-s='late'] .iv-amt {
  color: var(--iv-red);
}
.iv[data-phase='chaos'] .iv-r[data-s='late'] {
  animation: iv-red 0.7s var(--e-out, ease-out);
}
@keyframes iv-red {
  from {
    background: #fbd9d5;
  }
}
.iv[data-phase] .iv-r[data-s='rem'] {
  background: #f8faff;
  box-shadow: inset 2px 0 0 #6d8ae0;
}
.iv[data-phase='work'] .iv-r.iv-paid[data-s='end'] {
  background: #f1faf4;
  box-shadow: inset 2px 0 0 #2fa866;
  animation: iv-green 0.8s var(--e-out, ease-out);
}
.iv[data-phase='work'] .iv-r.iv-paid[data-s='end'] .iv-amt {
  color: var(--iv-green);
}
@keyframes iv-green {
  from {
    background: #cfeedb;
  }
}
.iv[data-phase='work'] .iv-r.iv-wait[data-s='end'] {
  height: 54px;
  background: #fffbeb;
  box-shadow: inset 3px 0 0 #f4b400;
}
.iv[data-phase='idle'] .iv-r,
.iv[data-phase='idle'] .iv-b,
.iv[data-phase='idle'] .iv-bar {
  transition: none;
}

/* summary + note under the invoices (end state) */
.iv-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 16px 14px 0;
  transition: opacity 0.6s 0.2s;
}
.iv-sum span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--iv-soft);
  font-size: 12.5px;
  color: #444a58;
  white-space: nowrap;
}
.iv-sum span b {
  color: var(--iv-ink);
}
.iv-sum .ic {
  width: 14px;
  height: 14px;
  color: #6b7282;
}
.iv-sum .g {
  background: var(--iv-green-bg);
  color: var(--iv-green);
}
.iv-sum .g b,
.iv-sum .g .ic {
  color: var(--iv-green);
}
.iv-clear {
  margin: auto 0;
  padding: 14px 28px 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--iv-mute);
  text-align: center;
  text-wrap: balance;
  transition: opacity 0.6s 0.4s;
}
.iv-clear span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--iv-green-bg);
}
.iv .iv-clear .ic {
  width: 22px;
  height: 22px;
  color: var(--iv-green);
}
.iv:not([data-phase='done']) :is(.iv-sum, .iv-clear, .iv-rok, .iv-ks-w) {
  opacity: 0;
  transition: none;
}

/* a payment arriving */
.iv-toast {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 8px;
  background: #1f232b;
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(10, 14, 24, 0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.4s var(--e-out, ease-out);
}
.iv-toast span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv .iv-toast .ic {
  width: 14px;
  height: 14px;
  color: #4ee09a;
}
.iv[data-phase='work'] .iv-toast.on {
  opacity: 1;
  transform: none;
}

/* receipts */
.iv-rcp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--iv-amber-bg);
  color: var(--iv-amber);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.iv-rcp b {
  font-weight: 700;
}
.iv-rl {
  list-style: none;
  margin: 0;
  padding: 10px 10px 0;
  flex: none;
}
.iv-b {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  row-gap: 1px;
  height: 46px;
  margin-bottom: 6px;
  padding: 0 10px;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition:
    height 0.45s var(--e-out, ease-out),
    margin 0.45s var(--e-out, ease-out),
    opacity 0.4s,
    transform 0.6s var(--e-out, ease-out),
    box-shadow 0.6s,
    background-color 0.4s,
    border-color 0.4s;
}
.iv-slip {
  grid-row: 1 / 3;
  width: 20px;
  height: 26px;
  border: 1px solid #d5d9e1;
  border-radius: 2px;
  background:
    linear-gradient(#c3c8d2, #c3c8d2) 4px 5px / 10px 1.5px no-repeat,
    linear-gradient(#d6dae1, #d6dae1) 4px 9px / 8px 1.5px no-repeat,
    linear-gradient(#d6dae1, #d6dae1) 4px 13px / 10px 1.5px no-repeat,
    linear-gradient(#c3c8d2, #c3c8d2) 4px 19px / 6px 2px no-repeat,
    #fff;
}
.iv-wait .iv-slip {
  border-style: dashed;
  border-color: #d8b25a;
  background: #fffaf0;
}
.iv-bw {
  display: contents;
}
.iv-bw b,
.iv-bw span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-bw b {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 500;
}
.iv-bw span {
  grid-column: 2;
  grid-row: 2;
  font-size: 11.5px;
  color: var(--iv-mute);
}
.iv-ba {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.iv-bs {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  display: grid;
}
.iv-q {
  grid-area: 1 / 1;
  display: none;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 17px;
  white-space: nowrap;
  background: var(--iv-green-bg);
  color: var(--iv-green);
}
.iv-q .ic {
  width: 11px;
  height: 11px;
  color: currentColor;
}
.iv-q-loose {
  background: var(--iv-soft);
  color: #6b7282;
}
.iv-q.iv-e-wait {
  background: var(--iv-amber-bg);
  color: var(--iv-amber);
}
.iv-b:not([data-s]) .iv-q-end,
.iv-b[data-s='loose'] .iv-q-loose,
.iv-b[data-s='end'] .iv-q-end {
  display: inline-flex;
}
.iv:not([data-phase='done']) .iv-b[data-s='end'] .iv-q-end {
  animation: iv-pop 0.35s var(--e-out, ease-out);
}
/* end state: only the payment without a receipt stays */
.iv-b:not(.iv-wait) {
  height: 0;
  margin-bottom: 0;
  opacity: 0;
  border-width: 0;
}
.iv-b.iv-wait {
  background: #fffbeb;
  border-color: #f3dc9a;
}
.iv[data-phase='idle'] .iv-b,
.iv[data-phase='chaos'] .iv-b:not(.in) {
  height: 0;
  margin-bottom: 0;
  opacity: 0;
  border-width: 0;
}
.iv[data-phase='chaos'] .iv-b.in,
.iv[data-phase='work'] .iv-b:not(.gone) {
  height: 46px;
  margin-bottom: 6px;
  opacity: 1;
  border-width: 1px;
  background: #fff;
  border-color: var(--iv-line);
}
.iv[data-phase] .iv-b[data-s='loose'] {
  transform: translateX(var(--x)) rotate(var(--r));
  box-shadow: 0 8px 16px -10px rgba(20, 24, 40, 0.35);
}
.iv[data-phase='chaos'] .iv-b.in {
  animation: iv-drop 0.55s var(--e-out, ease-out);
}
@keyframes iv-drop {
  from {
    opacity: 0;
    transform: translate(calc(var(--x) * 3), -26px) rotate(calc(var(--r) * 3));
  }
}
.iv[data-phase='work'] .iv-b.iv-wait[data-s='end'] {
  background: #fffbeb;
  border-color: #f3dc9a;
}
.iv-rmore {
  margin: 0;
  padding: 2px 14px 0;
  font-size: 12px;
  color: var(--iv-mute);
  transition: opacity 0.4s;
}
.iv[data-phase='idle'] .iv-rmore,
.iv[data-phase='done'] .iv-rmore {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.iv-rok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
  padding: 14px;
  border-top: 1px solid var(--iv-line);
  font-size: 12.5px;
  color: var(--iv-mute);
  transition: opacity 0.6s 0.4s;
}
.iv-rok span {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--iv-green-bg);
}
.iv .iv-rok .ic {
  width: 16px;
  height: 16px;
  color: var(--iv-green);
}

/* narrower frames (small laptops, tablets): the sidebar folds to icons */
@container (max-width: 1040px) {
  .iv-body {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .iv-rail {
    align-items: center;
    padding: 12px 8px;
  }
  .iv-new,
  .iv-f {
    position: relative;
    justify-content: center;
    width: 38px;
    padding: 0;
    font-size: 0;
  }
  .iv-new::before {
    content: '+';
    font-size: 20px;
    font-weight: 500;
  }
  .iv-bdg {
    position: absolute;
    top: 1px;
    right: -3px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 15px;
  }
  .iv-yr,
  .iv-co {
    display: none;
  }
  .iv-brand {
    width: auto;
  }
}

/* wide frames show the invoice date */
@container (min-width: 1180px) {
  .iv .iv-c-date {
    display: block;
  }
  .iv-th,
  .iv-r {
    grid-template-columns: 74px minmax(0, 1fr) 76px 92px 164px;
    grid-template-areas: 'nr cus date amt st';
  }
  .iv-c-date {
    grid-area: date;
  }
}

@media (max-width: 899px) {
  .iv {
    --iv-rh: 50px;
    font-size: 13px;
  }
  .iv-top {
    gap: 10px;
    height: 48px;
    padding: 0 12px;
  }
  .iv-burger {
    display: block;
  }
  .iv-brand {
    width: auto;
    font-size: 14.5px;
  }
  .iv-co,
  .iv-tools .ic,
  .iv-rail,
  .iv-seg,
  .iv-th,
  .iv-spark,
  .iv-ks,
  .iv-xm,
  .iv-bar-warn > span {
    display: none;
  }
  .iv-search span {
    display: none;
  }
  .iv-search {
    flex: none;
    margin-left: auto;
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .iv-tools {
    margin-left: 0;
  }
  .iv-body {
    grid-template-columns: minmax(0, 1fr);
    height: 660px;
  }
  .iv-main {
    gap: 10px;
    padding: 10px;
  }
  .iv-bar {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12.5px;
  }
  .iv-kpis {
    gap: 6px;
  }
  .iv-kpi {
    justify-content: space-between;
    padding: 9px 10px 10px;
  }
  .iv-kl {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
  .iv-kv {
    margin-top: 6px;
    font-size: 15.5px;
  }
  .iv-meter {
    position: static;
    width: auto;
    margin-top: 7px;
    height: 4px;
  }
  .iv-cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    gap: 10px;
  }
  .iv-ph {
    height: 40px;
    padding: 0 12px;
  }
  .iv-r,
  .iv-th {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      'cus amt'
      'nr st';
    column-gap: 8px;
    row-gap: 2px;
    align-content: center;
    padding: 0 12px;
  }
  .iv-st {
    justify-items: end;
  }
  .iv-nr {
    font-size: 11.5px;
  }
  .iv-p {
    font-size: 11px;
    padding: 1px 8px;
  }
  .iv-r.iv-wait,
  .iv[data-phase='work'] .iv-r.iv-wait[data-s='end'] {
    height: 70px;
  }
  .iv-sum {
    gap: 6px;
    padding: 12px 12px 0;
  }
  .iv-sum span {
    font-size: 11.5px;
    padding: 4px 9px;
  }
  .iv-clear {
    padding: 10px 14px 14px;
    font-size: 12px;
  }
  .iv-clear span {
    display: none;
  }
  .iv-rl {
    padding: 8px 8px 0;
  }
  .iv-rok {
    padding: 10px 12px;
    font-size: 12px;
  }
  .iv-toast {
    right: 8px;
    bottom: 8px;
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv *,
  .iv {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================================================
   Detail pass (5 Nov 2026). The big type, the ∞ logo and the motion stay as they are; this layer only refines
   the small things: surfaces, hairlines, icon tiles, status lights, buttons, labels, fields and hover states,
   so every card and control reads as one considered system on the near-black site.
   ========================================================================================================== */

/* ---------- 1. surface: a truer black (the grain was lifting it to grey) ---------- */
body.v2 {
  --grain-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.94 0 0 0 0 0.92 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  --hair: rgba(255, 255, 255, 0.075);
  --hair-2: rgba(255, 255, 255, 0.13);
  --tile: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 70%);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -32px rgba(0, 0, 0, 0.9);
}
.v2 ::selection {
  background: rgba(46, 230, 154, 0.28);
  color: #fff;
}
html:has(body.v2) {
  scrollbar-color: #2a2c2a #0b0c0b;
}
.v2 :focus-visible {
  outline: 2px solid #2ee69a;
  outline-offset: 3px;
}

/* ---------- 2. one card language: hairline, faint top light, soft depth ---------- */
.v2 :is(.gcard, .card4, .svc-card, .kt, .org-card, .car-card) {
  border-color: var(--hair) !important;
  background: var(--tile) !important;
  box-shadow: var(--lift);
}
.v2 .mini {
  border-color: var(--hair);
  background: linear-gradient(180deg, #151715, #0f110f);
  box-shadow: var(--lift);
}
/* a thin light edge along the top of every card, like light catching a glass rim */
.v2 :is(.gcard, .card4, .svc-card, .org-card)::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
.v2 :is(.gcard, .card4, .svc-card, .org-card, .kt) {
  transition:
    transform 0.4s var(--e-out),
    border-color 0.3s,
    box-shadow 0.4s var(--e-out);
}
@media (hover: hover) {
  .v2 :is(.gcard, .card4, .svc-card, .org-card, .kt):hover {
    border-color: rgba(46, 230, 154, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(46, 230, 154, 0.08),
      0 28px 60px -30px rgba(46, 230, 154, 0.35);
  }
}

/* ---------- 3. service cards (the grid in the screenshot) ---------- */
.v2 .gcard {
  gap: 16px;
  padding: 22px 22px 20px;
}
/* cursor spotlight instead of the flat corner wash */
.v2 .gcard::before {
  background: radial-gradient(260px circle at var(--mx, 0%) var(--my, 0%), rgba(46, 230, 154, 0.14), transparent 65%);
}
/* icon tile: lit from above, with a soft green core */
.v2 .gc-ic {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(46, 230, 154, 0.22);
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(46, 230, 154, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(46, 230, 154, 0.1), rgba(46, 230, 154, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px -10px rgba(46, 230, 154, 0.45);
  transition:
    transform 0.4s var(--e-out),
    box-shadow 0.4s;
}
.v2 .gc-ic .ic {
  filter: drop-shadow(0 0 6px rgba(46, 230, 154, 0.35));
}
@media (hover: hover) {
  .v2 .gcard:hover .gc-ic {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 12px 30px -10px rgba(46, 230, 154, 0.7);
  }
}
.v2 .gc-l {
  font-weight: 500;
  color: #f4f3ef;
}
/* live services stand out: a green rim along the top and a faint standing glow */
.v2 .gcard:has(.st.live) {
  border-color: rgba(46, 230, 154, 0.22) !important;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(46, 230, 154, 0.09), transparent 60%),
    var(--tile) !important;
}
.v2 .gcard:has(.st.live)::after {
  background: linear-gradient(90deg, transparent, rgba(46, 230, 154, 0.7), transparent);
}
/* not-yet services sit one step back */
.v2 .gcard:has(.st.building) .gc-ic {
  filter: saturate(0.65);
}
.v2 .gcard:has(.st.building) .gc-l {
  color: #d9d7d1;
}

/* ---------- 4. status lights: Live breathes, Binnenkort is a quiet tag ---------- */
.v2 .st {
  gap: 7px;
  padding: 4px 10px 4px 9px;
  letter-spacing: 0.12em;
}
.v2 .st.live,
.v2 [data-theme='dark'] .st.live {
  color: #2ee69a;
  border-color: rgba(46, 230, 154, 0.35);
  background: rgba(46, 230, 154, 0.08);
  box-shadow: 0 0 18px -6px rgba(46, 230, 154, 0.55);
}
.v2 .st.live::before {
  background: #2ee69a;
  box-shadow: 0 0 0 0 rgba(46, 230, 154, 0.6);
  animation: st-breathe 2.4s ease-out infinite;
}
@keyframes st-breathe {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 230, 154, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px rgba(46, 230, 154, 0);
  }
}
.v2 .st.building,
.v2 [data-theme='dark'] .st.building {
  color: #9b9890;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}
.v2 .st.building::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #8a877f;
  opacity: 1;
}

/* ---------- 5. buttons ---------- */
.v2 .pill-g {
  background: linear-gradient(180deg, #2fe39b, #16c47f) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #04140c !important;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 30px -12px rgba(22, 196, 127, 0.7);
}
@media (hover: hover) {
  .v2 .pill-g:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 14px 40px -10px rgba(46, 230, 154, 0.85);
  }
}
.v2 :is(.pill-o-d, .pill-o) {
  border-color: var(--hair-2) !important;
  background: rgba(255, 255, 255, 0.025);
  color: #f4f3ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (hover: hover) {
  .v2 :is(.pill-o-d, .pill-o):hover {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.07);
  }
}
.v2 .pill-d {
  background: #f4f3ef !important;
  color: #0b0c0b !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
/* the arrow in a button nudges forward on hover */
.v2 .pill {
  --nudge: 0px;
}
@media (hover: hover) {
  .v2 a.pill:hover {
    --nudge: 3px;
  }
}

/* ---------- 6. small labels: a green tick before every section label ---------- */
.v2 .kicker {
  letter-spacing: 0.16em;
}
.v2 .kicker:not(.nodot)::before {
  background: #2ee69a;
  box-shadow: 0 0 10px rgba(46, 230, 154, 0.7);
}
.v2 .all-svc > .mono:first-child,
.v2 .all-svc .mono:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.v2 .all-svc > .mono:first-child::before,
.v2 .all-svc .mono:first-of-type::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, #2ee69a, transparent);
}

/* ---------- 7. fields (contact, booking, scan) ---------- */
.v2 main :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  background: #0f110f;
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  color: #f4f3ef;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.v2 main :is(input, textarea, select)::placeholder {
  color: #6f6c66;
}
.v2 main :is(input:not([type='checkbox']):not([type='radio']), textarea, select):focus {
  outline: none;
  border-color: rgba(46, 230, 154, 0.6);
  box-shadow:
    0 0 0 4px rgba(46, 230, 154, 0.12),
    inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.v2 .slot {
  border-color: var(--hair-2);
  background: rgba(255, 255, 255, 0.025);
}
.v2 .slot:is(:hover, [aria-pressed='true'], .on) {
  border-color: rgba(46, 230, 154, 0.55);
}

/* ---------- 8. FAQ rows and tables: crisp hairlines ---------- */
.v2 .fq-row {
  border-color: var(--hair) !important;
}
.v2 .fq-row summary {
  transition: color 0.2s;
}
@media (hover: hover) {
  .v2 .fq-row summary:hover {
    color: #fff;
  }
}
.v2 table :is(th, td) {
  border-color: var(--hair) !important;
}

/* ---------- 9. footer ---------- */
.v2 .f2 {
  border-top: 1px solid var(--hair);
}
.v2 .f2-legal {
  border-color: var(--hair) !important;
  color: #8a877f;
}
.v2 .f2 a {
  transition: color 0.2s;
}

/* ---------- 10. cards rise in one after another ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .v2 .rv .gcards > .gcard {
    opacity: 0;
    transform: translateY(14px);
  }
  .motion .v2 .rv.in .gcards > .gcard {
    animation: card-in 0.7s var(--e-out) forwards;
  }
  .motion .v2 .rv.in .gcards > .gcard:nth-child(4n + 2) {
    animation-delay: 0.06s;
  }
  .motion .v2 .rv.in .gcards > .gcard:nth-child(4n + 3) {
    animation-delay: 0.12s;
  }
  .motion .v2 .rv.in .gcards > .gcard:nth-child(4n + 4) {
    animation-delay: 0.18s;
  }
  @keyframes card-in {
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .st.live::before {
    animation: none;
  }
}

/* ---------- 11. booking: the slot picker was a cream panel inside a dark section ---------- */
.v2 .book2-slots {
  --cream: #0b0c0b;
  --paper: #111311;
  --ink: #f2f1ec;
  --ink-2: #e7e5dd;
  --mute-l: #a7a39b;
  --line-l: rgba(255, 255, 255, 0.1);
  --green-ink: #2ee69a;
  background: var(--tile) !important;
  color: #f2f1ec;
  border: 1px solid var(--hair);
  box-shadow: var(--lift);
}

/* ---------- 12. checkboxes: a drawn box with a green tick instead of the grey system control ---------- */
.v2 main input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #0f110f;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.v2 main input[type='checkbox']::after {
  content: '';
  width: 10px;
  height: 6px;
  border: 2px solid #04140c;
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.2s var(--e-out);
}
.v2 main input[type='checkbox']:checked {
  background: #2ee69a;
  border-color: #2ee69a;
}
.v2 main input[type='checkbox']:checked::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

/* ---------- 13. Nonstop Agent chat: dark like the rest (own tokens, swapped) ---------- */
.v2 .nsa,
.v2 .nsa-backdrop {
  --nsa-cream: #151715;
  --nsa-cream-2: #1c1f1c;
  --nsa-paper: #0f110f;
  --nsa-ink: #f2f1ec;
  --nsa-ink-3: #d6d3ca;
  --nsa-green-ink: #2ee69a;
  --nsa-mute: #a7a39b;
  --nsa-line: rgba(255, 255, 255, 0.09);
}
.v2 .nsa {
  border-color: var(--hair);
}
.v2 .nsa-head {
  background: #0b0c0b;
  color: #f2f1ec;
  border-bottom: 1px solid var(--hair);
}
.v2 .nsa-msg--me .nsa-text {
  background: rgba(46, 230, 154, 0.14);
  color: #f2f1ec;
  border: 1px solid rgba(46, 230, 154, 0.25);
}

/* ---------- 14. the app example on the site matches the real customer app: near-black, hairlines, sans ---------- */
.v2 .dx-dev:not(.dx-dev-l) {
  --bg: #0a0a0a;
  --surface: #111111;
  --soft: #171717;
  --line: rgba(255, 255, 255, 0.08);
  --tline: rgba(255, 255, 255, 0.08);
  --fg: #f5f5f4;
  --muted: #a3a3a3;
  --faint: #8a8a8a;
  --accent: #2ee69a;
  --accent-soft: rgba(46, 230, 154, 0.1);
  --urgent: #ff8f86;
  --track: #1f1f1f;
  --tsh: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --display: var(--sans);
}
.v2 .dx-dev:not(.dx-dev-l) .dx-bar {
  background: #0d0d0d;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.v2 .dx-dev:not(.dx-dev-l) .dx-url {
  background: #161616;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.v2 .dx-dev:not(.dx-dev-l) .dx-tag {
  border-color: rgba(255, 255, 255, 0.12);
}
.v2 .dx-dev:not(.dx-dev-l) .dx {
  background: radial-gradient(700px 380px at 85% -10%, rgba(46, 230, 154, 0.05), transparent 65%), var(--bg);
}
.v2 .dx-dev:not(.dx-dev-l) :is(h1, h2, h3, .dx-h) {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.v2 .dx-dev:not(.dx-dev-l) .dx {
  --ink: #f5f5f4;
  --cream: #0a0a0a;
}
.v2 .dx-dev:not(.dx-dev-l) .dx-flip.dx-t-wait > span:last-child {
  color: #f4c25a;
  background: rgba(244, 180, 0, 0.12);
}
.v2 .dx-dev:not(.dx-dev-l) .dx-sum {
  color: #2ee69a;
  background: rgba(46, 230, 154, 0.12);
  box-shadow: inset 0 0 0 1px rgba(46, 230, 154, 0.3);
}

/* ---------- 15. inbox: while mail pours in, the list fills the whole window (no reserved space below) ---------- */
.v2 .ml:is([data-phase='idle'], [data-phase='chaos'], [data-phase='work']) .ml-clear {
  display: none;
}
.v2 .ml:is([data-phase='chaos'], [data-phase='work']) .ml-list {
  flex: none;
}

/* ---------- 16. service cards: what it does, a live example line, and a click opens the explanation ---------- */
.v2 .gc-line {
  margin-top: -8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #a7a39b;
}
.v2 .gc-x {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.v2 .gc-acts {
  position: relative;
  display: block;
  width: 100%;
  height: 18px;
  overflow: hidden;
  font: 500 11.5px/18px var(--mn);
  color: #8a877f;
}
.v2 .gc-acts i {
  position: absolute;
  inset: 0;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 14px;
}
.v2 .gc-acts i::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ee69a;
  box-shadow: 0 0 8px rgba(46, 230, 154, 0.8);
}
.v2 .gcard:has(.st.building) .gc-acts i::before {
  background: #8a877f;
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .v2 .gc-acts i {
    animation: gc-act 7s calc(var(--gi, 0) * -0.6s) infinite;
  }
  .v2 .gc-acts i + i {
    animation-delay: calc(var(--gi, 0) * -0.6s - 3.5s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .gc-acts i + i {
    display: none;
  }
}
@keyframes gc-act {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  6%,
  44% {
    opacity: 1;
    transform: none;
  }
  50%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
/* the whole card is the button */
.v2 .gc-pop {
  cursor: pointer;
}
.v2 .gc-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.v2 .gc-hit::after {
  content: '+';
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #a7a39b;
  font: 400 16px/1 var(--sg);
  transition:
    transform 0.35s var(--e-out),
    color 0.2s,
    border-color 0.2s,
    background-color 0.2s;
}
@media (hover: hover) {
  .v2 .gc-pop:hover .gc-hit::after {
    transform: rotate(90deg);
    color: #04140c;
    border-color: #2ee69a;
    background: #2ee69a;
  }
}

/* the pop-up */
.svp {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(46, 230, 154, 0.1), transparent 60%),
    linear-gradient(180deg, #151715, #0e100e);
  color: #f2f1ec;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 120px -30px rgba(0, 0, 0, 0.9),
    0 0 80px -30px rgba(46, 230, 154, 0.35);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition:
    opacity 0.22s,
    transform 0.35s var(--e-out);
  overflow: auto;
}
.svp.on {
  opacity: 1;
  transform: none;
}
.svp::backdrop {
  background: rgba(5, 6, 5, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.svp-in {
  padding: 28px 28px 24px;
}
.svp-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #a7a39b;
  font-size: 14px;
  cursor: pointer;
}
.svp-x:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.svp-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 40px;
}
.svp-head .gc-ic {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.svp-head .gc-ic .ic {
  width: 26px;
  height: 26px;
}
.svp-h {
  margin: 0 0 6px;
  font: 600 24px/1.15 var(--sg);
  letter-spacing: -0.025em;
  color: #fff;
}
.svp-head .st {
  font-size: 11px;
}
.svp-what {
  margin: 20px 0 18px;
  font-size: 16px;
  line-height: 1.55;
  color: #d9d7d1;
}
.svp-wins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.svp-wins li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  line-height: 1.4;
  color: #f2f1ec;
}
.svp-wins li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(46, 230, 154, 0.14);
  color: #2ee69a;
}
.svp-wins .ic {
  width: 13px;
  height: 13px;
}
.svp.on .svp-wins li {
  animation: svp-in 0.5s var(--e-out) both;
}
.svp.on .svp-wins li:nth-child(2) {
  animation-delay: 0.07s;
}
.svp.on .svp-wins li:nth-child(3) {
  animation-delay: 0.14s;
}
@keyframes svp-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.svp-live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(46, 230, 154, 0.25);
  font-size: 13px;
  color: #a7a39b;
}
.svp-live .mono {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2ee69a;
}
.svp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ee69a;
  box-shadow: 0 0 10px #2ee69a;
}
.svp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
@media (max-width: 520px) {
  .svp-in {
    padding: 22px 18px 18px;
  }
  .svp-h {
    font-size: 20px;
  }
  .svp-cta .pill {
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svp,
  .svp.on .svp-wins li {
    transition: none;
    animation: none;
  }
}

/* ---------- 17. about page: bento, principles with working examples, the start, outcomes, organisations ---------- */
.v2 .ab-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2ee69a;
}
.v2 .ab-k::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, #2ee69a, transparent);
}
.v2 .ab-h {
  margin: 0;
  font: 600 clamp(32px, 4.2vw, 60px) / 1.02 var(--sg);
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.v2 .ab-p {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: #a7a39b;
}
.v2 .ab-head {
  max-width: 820px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.v2 .ab-sec :is(.ab-dept, .ab-val, .ab-orgs, .ab-steps li) {
  position: relative;
  border: 1px solid var(--hair);
  background: var(--tile);
  box-shadow: var(--lift);
  overflow: hidden;
}
.v2 .ab-sec :is(.ab-dept, .ab-val, .ab-orgs)::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

/* what we do: statement + five department tiles */
.v2 .ab-what {
  display: grid;
  gap: 14px;
}
@media (min-width: 1000px) {
  .v2 .ab-what {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-auto-rows: minmax(210px, auto);
  }
  .v2 .ab-lead {
    grid-row: span 2;
  }
  .v2 .ab-depts {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }
}
.v2 .ab-lead {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 26px;
  border: 1px solid rgba(46, 230, 154, 0.22);
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(46, 230, 154, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: var(--lift);
  min-height: 360px;
}
.v2 .ab-depts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 640px) {
  .v2 .ab-depts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v2 .ab-dept:first-child {
    grid-column: span 2;
  }
}
.v2 .ab-dept {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 22px;
  transition:
    transform 0.4s var(--e-out),
    border-color 0.3s;
}
@media (hover: hover) {
  .v2 .ab-dept:hover {
    transform: translateY(-3px);
    border-color: rgba(46, 230, 154, 0.32);
  }
}
.v2 .ab-dept-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.v2 .ab-dept-n {
  font-size: 11px;
  color: #6f6c66;
}
.v2 .ab-dept b {
  font: 600 19px/1.2 var(--sg);
  letter-spacing: -0.02em;
  color: #fff;
}
.v2 .ab-dept-s {
  font-size: 14px;
  line-height: 1.5;
  color: #a7a39b;
}
.v2 .ab-dept-f {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a877f;
}
.v2 .ab-dept-f em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.v2 .ab-live {
  color: #2ee69a;
}
.v2 .ab-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ee69a;
  box-shadow: 0 0 8px #2ee69a;
}

/* principles */
.v2 .ab-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .v2 .ab-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .v2 .ab-values {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  }
}
.v2 .ab-val {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 20px;
  border-radius: 24px;
}
.v2 .ab-val h3 {
  margin: 6px 0 0;
  font: 600 21px/1.2 var(--sg);
  letter-spacing: -0.025em;
  color: #fff;
}
.v2 .ab-val p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #a7a39b;
}
.v2 .ab-demo {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  color: #d9d7d1;
}
.v2 .ab-demo .mono {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a877f;
}
.v2 .ab-bar {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 10px;
}
.v2 .ab-bar i {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2ee69a var(--w), rgba(255, 255, 255, 0.08) var(--w));
}
.v2 .ab-d-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.v2 .ab-d-row em {
  font-style: normal;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 99px;
  color: #f4c25a;
  background: rgba(244, 180, 0, 0.12);
  white-space: nowrap;
}
.v2 .ab-d-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  background: #2ee69a;
  color: #04140c;
  font-weight: 600;
}
.v2 .ab-d-btn .ic,
.v2 .ab-d-data .ic {
  width: 14px;
  height: 14px;
}
.v2 .ab-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}
.v2 .ab-wave i {
  flex: 1;
  height: var(--h);
  border-radius: 2px;
  background: #2ee69a;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .v2 .ab-wave i {
    animation: ab-wave 1.2s var(--d) ease-in-out infinite alternate;
  }
}
@keyframes ab-wave {
  to {
    transform: scaleY(0.35);
  }
}
.v2 .ab-quote {
  font-style: italic;
  line-height: 1.45;
}
.v2 .ab-tag {
  color: #2ee69a !important;
}
.v2 .ab-d-data span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2 .ab-d-data .ic {
  color: #2ee69a;
}

/* the start: a five-step track */
.v2 .ab-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: s;
}
@media (min-width: 1000px) {
  .v2 .ab-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.v2 .ab-steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: 20px;
}
.v2 .ab-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #2ee69a, rgba(46, 230, 154, 0.1));
  opacity: calc(1 - var(--i) * 0.15);
}
.v2 .ab-step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 154, 0.35);
  background: rgba(46, 230, 154, 0.08);
  font-size: 12px;
  color: #2ee69a;
}
.v2 .ab-steps b {
  font: 600 18px/1.2 var(--sg);
  letter-spacing: -0.02em;
  color: #fff;
}
.v2 .ab-steps span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: #a7a39b;
}

/* outcomes: three big tiles instead of loose words */
.v2 .outcomes .out3 {
  gap: 14px;
}
.v2 .outcomes .out3 li {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--hair);
  border-radius: 26px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(46, 230, 154, 0.1), transparent 60%),
    var(--tile);
  box-shadow: var(--lift);
}
.v2 .outcomes .out3 li:first-child {
  padding-left: clamp(26px, 3vw, 40px);
  border-left: 1px solid var(--hair);
}

/* organisations */
.v2 .ab-orgs {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(26px, 3.5vw, 52px);
  border-radius: 30px;
  border-color: rgba(46, 230, 154, 0.2) !important;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(46, 230, 154, 0.12), transparent 60%),
    var(--tile) !important;
}
@media (min-width: 1000px) {
  .v2 .ab-orgs {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
  }
}
.v2 .ab-orgs-l .pill {
  margin-top: 26px;
}
.v2 .ab-orgs-g {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .v2 .ab-orgs-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.v2 .ab-orgs-g li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0.3);
}
.v2 .ab-orgs-g b {
  margin-top: 6px;
  font: 600 17px/1.2 var(--sg);
  color: #fff;
}
.v2 .ab-orgs-g span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: #a7a39b;
}
.v2 .ab-d-row {
  align-items: flex-start;
}
.v2 .ab-d-row em {
  align-self: flex-start;
  line-height: 1.5;
}

/* ---------- 18. the card page (/k): dark like the rest of the site ---------- */
body.v2.card-body {
  background:
    radial-gradient(70% 45% at 50% 30%, rgba(46, 230, 154, 0.12), transparent 70%),
    #0b0c0b !important;
  color: #f2f1ec;
}
.v2 .card2 {
  --ink: #f2f1ec;
  --cream: #0b0c0b;
  --paper: #111311;
  --mute-l: #a7a39b;
  --line-l: rgba(255, 255, 255, 0.14);
  color: #f2f1ec;
}
.v2 .card2 .pill-o {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f2f1ec !important;
}

/* ==========================================================================================================
   Style preview "cinema black" (owner, 5 Nov 2026; inspired by the look of sintra.ai, in our own theme):
   A  pure black, more air, images that dissolve into the black, calmer type (Figtree), green as the only glow;
   C  real 3D devices: the sticky tilted phone on "How it works", the app window tilting in on the homepage;
   B  a touch of colour: glowing department cards around the four tool examples and the inbox.
   Content, copy and order stay exactly the same; this layer only changes the look.
   ========================================================================================================== */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-latin-700-normal.woff2) format('woff2');
}

/* ---------- tokens: pure black, softer type, one accent per department ---------- */
body.v2 {
  --brand: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sg: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dark: #000;
  --sec-y: clamp(104px, 12vw, 176px);
  --c-customers: #2ee69a;
  --c-marketing: #a78bfa;
  --c-ads: #60a5fa;
  --c-admin: #fbbf24;
  --c-team: #2dd4bf;
  background: #000;
  font-family: var(--sg);
  -webkit-font-smoothing: antialiased;
}
/* the wordmark stays our logo face */
.v2 :is(.wm-w, .card2-wm, .f2-wm) {
  font-family: var(--brand);
}

/* ---------- A: pure black sections, no grain, no seams ---------- */
.v2 :is(main, .home) > section,
.v2 :is(main, .home) > [data-theme],
.v2 .f2 {
  background: #000 !important;
}
.v2 :is(main, .home) > .closer[data-theme] {
  background: radial-gradient(50% 45% at 50% 50%, rgba(46, 230, 154, 0.12), transparent 100%), #000 !important;
}
html[data-zone='dark'] .h2r.scrolled {
  background: rgba(0, 0, 0, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.v2 .f2 {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ---------- A: calmer, rounder type ---------- */
.v2 :is(h1, h2, h3, .s-h, .phero-h, .ab-h, .wall-h, .ibx-h, .how-t h3) {
  font-family: var(--sg);
}
.v2 :is(.s-h, .phero-h, .ab-h, .ibx-h) {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.v2 .wall-h {
  font-weight: 700;
  letter-spacing: -0.045em;
}
.v2 :is(.s-lead, .phero-lead, .ab-p, .ibx-l, .how-t p) {
  color: #9b9b9b;
  line-height: 1.6;
}
.v2 .how-t h3 {
  font-weight: 600;
  letter-spacing: -0.035em;
}
.v2 .mono {
  letter-spacing: 0.12em;
}

/* ---------- A: images dissolve into the black ---------- */
.v2 .phero-media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.v2 .phero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.85) 85%, #000 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 70%);
}
.v2 .wall-grid {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
}
.v2 .wall-shade {
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85) 75%),
    linear-gradient(180deg, #000 0, transparent 16%, transparent 84%, #000 100%);
}
.v2 .car-card img {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.v2 .car-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.v2 .car-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- B: a glowing department card around each tool example ---------- */
.v2 .ibx {
  --acc: var(--c-customers);
}
.v2 #social,
.v2 #reviews {
  --acc: var(--c-marketing);
}
.v2 #ads {
  --acc: var(--c-ads);
}
.v2 #facturen {
  --acc: var(--c-admin);
}
.v2 .ibx .ibx-k {
  color: var(--acc);
}
.v2 .ibx .ibx-win {
  position: relative;
  padding: clamp(14px, 2.6vw, 36px);
  border-radius: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--acc) 34%, #000) 0%, color-mix(in srgb, var(--acc) 10%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent);
  box-shadow:
    0 40px 160px -40px color-mix(in srgb, var(--acc) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.v2 .ibx .ibx-win .dx-dev {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}

/* department colours elsewhere: the about tiles and the product tabs */
.v2 .ab-dept:nth-child(1) {
  --acc: var(--c-customers);
}
.v2 .ab-dept:nth-child(2) {
  --acc: var(--c-marketing);
}
.v2 .ab-dept:nth-child(3) {
  --acc: var(--c-ads);
}
.v2 .ab-dept:nth-child(4) {
  --acc: var(--c-admin);
}
.v2 .ab-dept:nth-child(5) {
  --acc: var(--c-team);
}
.v2 .ab-dept .gc-ic {
  color: var(--acc);
  border-color: color-mix(in srgb, var(--acc) 35%, transparent);
  background: radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 70%);
  box-shadow: 0 8px 22px -10px var(--acc);
}
.v2 .ab-dept:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, transparent) !important;
}

/* ---------- C: the app window tilts in as it scrolls into view (browsers with scroll timelines) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .v2 .prod .dx-dev {
      transform-origin: 50% 100%;
      animation: tilt-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes tilt-in {
      from {
        transform: perspective(1800px) rotateX(16deg) scale(0.94);
      }
      to {
        transform: none;
      }
    }
  }
}

/* ---------- C: How it works: a tilted 3D phone that stays in view and shows the active step ---------- */
.v2 .how-dev {
  display: none;
}
@media (min-width: 1000px) {
  .v2 .how-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .v2 .how-grid .how-step {
    grid-template-columns: 1fr;
    min-height: 62vh;
    align-content: center;
  }
  .v2 .how-grid .how-step .mini {
    display: none;
  }
  .v2 .how-grid .how-step .how-t {
    opacity: 0.35;
    transition: opacity 0.4s;
  }
  .v2 .how-grid[data-step='0'] .how-step[data-i='0'] .how-t,
  .v2 .how-grid[data-step='1'] .how-step[data-i='1'] .how-t,
  .v2 .how-grid[data-step='2'] .how-step[data-i='2'] .how-t,
  .v2 .how-grid[data-step='3'] .how-step[data-i='3'] .how-t,
  .v2 .how-grid[data-step='4'] .how-step[data-i='4'] .how-t,
  .v2 .how-grid[data-step='5'] .how-step[data-i='5'] .how-t,
  .v2 .how-grid:not([data-step]) .how-step .how-t {
    opacity: 1;
  }
  .v2 .how-dev {
    display: block;
    position: sticky;
    top: calc(50vh - 330px);
    height: 660px;
    perspective: 1800px;
  }
  .v2 .how-phone {
    position: relative;
    width: 330px;
    height: 660px;
    margin: 0 auto;
    border-radius: 54px;
    padding: 10px;
    background: linear-gradient(145deg, #f6f3ec 0%, #9e9a92 10%, #dcd8cf 24%, #77736d 46%, #c8c3ba 68%, #f3efe8 84%, #8b8780 100%);
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.4),
      0 60px 120px -40px rgba(0, 0, 0, 0.9),
      0 0 120px -40px rgba(46, 230, 154, 0.35);
    transform: rotateY(-18deg) rotateX(6deg) rotateZ(2deg);
    transform-style: preserve-3d;
  }
  .v2 .how-notch {
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 3;
    width: 96px;
    height: 28px;
    margin-left: -48px;
    border-radius: 99px;
    background: #000;
  }
  .v2 .how-screen {
    position: relative;
    height: 100%;
    border-radius: 45px;
    overflow: hidden;
    background:
      radial-gradient(90% 50% at 50% 0%, rgba(46, 230, 154, 0.14), transparent 70%),
      #0b0c0b;
  }
  .v2 .how-scr {
    position: absolute;
    inset: 70px 16px 16px;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.45s,
      transform 0.55s var(--e-out);
  }
  .v2 .how-scr .mini {
    border-radius: 18px;
  }
  .v2 .how-grid[data-step='0'] .how-scr[data-i='0'],
  .v2 .how-grid[data-step='1'] .how-scr[data-i='1'],
  .v2 .how-grid[data-step='2'] .how-scr[data-i='2'],
  .v2 .how-grid[data-step='3'] .how-scr[data-i='3'],
  .v2 .how-grid[data-step='4'] .how-scr[data-i='4'],
  .v2 .how-grid[data-step='5'] .how-scr[data-i='5'],
  .v2 .how-grid:not([data-step]) .how-scr[data-i='0'] {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .how-scr,
  .v2 .how-grid .how-step .how-t {
    transition: none;
  }
}
@media (min-width: 1000px) {
  .v2 .how-scr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    inset: 64px 14px 20px;
  }
  .v2 .how-scr .mini {
    background: linear-gradient(180deg, #151715, #0e100e);
  }
  .v2 .how-scr .mini-bar {
    height: 44px;
  }
  .v2 .how-scr .mini ul li {
    padding-block: 16px;
    font-size: 15px;
  }
  .v2 .how-screen::before {
    content: 'Nonstop Staff';
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    text-align: center;
    font: 600 13px/1 var(--sg);
    letter-spacing: 0.02em;
    color: #8a8a8a;
  }
}

/* ---------- header: log in, and the language suggestion fading out ---------- */
.v2 .h2r-login {
  display: none;
  align-items: center;
  min-height: 40px;
  padding: 0 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: #d9d7d1;
  text-decoration: none;
  transition: color 0.2s;
}
.v2 .h2r-login:hover {
  color: #fff;
}
@media (min-width: 1100px) {
  .v2 .h2r-login {
    display: inline-flex;
  }
}
.v2 .mnav-login {
  display: block;
  margin: 8px 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f2f1ec;
  text-decoration: none;
  font-weight: 600;
}
.v2 .langbar {
  transition:
    opacity 0.6s,
    transform 0.6s var(--e-out);
}
.v2 .langbar.out {
  opacity: 0;
  transform: translateY(12px);
}

/* ==========================================================================================================
   Branch carousel, sintra.ai style (owner, 5 Nov 2026): a flat row of tall cards on black. The centre card is
   fully visible, the neighbours fade out at the edges (mask). Each card is a tall rounded image with the group
   name, the line and the trade chips below it. Round glass arrows sit over the image row at the left and right;
   hover glides, click steps one card (client/home.ts carousel()). Overrides the old 3D ring in v2/sintra/polish.
   ========================================================================================================== */
.v2 .car {
  --cw: min(76vw, 320px); /* card width */
  --ih: calc(var(--cw) * 1.28); /* image height: tall */
  --pt: 12px; /* stage padding top: the arrows are centred on the images */
  position: relative;
  outline: none;
}
@media (min-width: 760px) {
  .v2 .car {
    --cw: clamp(300px, 27vw, 380px);
  }
}

/* the row: native horizontal scroll with snap, edges fade into the black */
.v2 .car-stage {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: auto;
  height: auto;
  display: block;
  perspective: none;
  padding: var(--pt) calc(50% - var(--cw) / 2) 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
@media (min-width: 760px) {
  .v2 .car-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
}
.v2 .car-stage::-webkit-scrollbar {
  display: none;
}
/* while the script drives the scroll (hover glide, click step) snapping is off, else it fights every frame */
.v2 .car-free .car-stage {
  scroll-snap-type: none;
}
.v2 .car-ring {
  position: static;
  display: flex;
  gap: 20px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: none;
  transition: none;
}

/* the card: no box, just the image and the text under it */
.v2 .car .car-card {
  position: relative;
  inset: auto;
  flex: 0 0 var(--cw);
  height: auto;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  transform: none;
  border: 0 !important;
  border-radius: 22px;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}
.v2 .car-media {
  position: relative;
  height: var(--ih);
  border-radius: 22px;
  overflow: hidden;
  background: #0e0f0e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  isolation: isolate;
}
.v2 .car .car-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* a soft shade at the bottom of the image, so it sits in the black */
.v2 .car-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.35));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  pointer-events: none;
}
.v2 .car .car-n {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* the cursor glow only lights the image */
.v2 .car-card.glow::before {
  bottom: auto;
  height: var(--ih);
  border-radius: 22px;
  z-index: 2;
}
.v2 .car-card.cur .car-media {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 90px -50px rgba(22, 196, 127, 0.55);
}

.v2 .car .car-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 4px 0;
  visibility: visible;
}
.v2 .car .car-body > * {
  visibility: visible;
}
.v2 .car .car-body h3 {
  margin: 0;
  color: #fff;
  font: 500 clamp(24px, 2.2vw, 30px) / 1.1 var(--sg);
  letter-spacing: -0.02em;
}
.v2 .car .car-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.5;
}
.v2 .car .car-ex {
  margin-top: 6px;
  gap: 6px;
}
.v2 .car .car-ex a {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.68);
  font-size: 12.5px;
}
.v2 .car .car-ex a:hover {
  border-color: rgba(46, 230, 154, 0.55);
  color: #2ee69a;
}

/* the cards beside the centre one step back a little */
@media (prefers-reduced-motion: no-preference) {
  .v2 .car-media {
    transition:
      opacity 0.6s var(--e-out),
      box-shadow 0.6s;
  }
  .v2 .car .car-card img {
    transition: transform 0.9s var(--e-out);
  }
  .v2 .car .car-card:hover img {
    transform: scale(1.035);
  }
}
.v2 .car-card:not(.cur) .car-media {
  opacity: 0.72;
}

/* round glass arrows over the image row, left and right */
.v2 .car .car-btn {
  position: absolute;
  z-index: 3;
  top: calc(var(--pt) + var(--ih) / 2 - 28px);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  cursor: pointer;
  transform: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    opacity 0.3s,
    transform 0.3s var(--e-out);
}
.v2 .car .car-prev {
  left: clamp(12px, 4vw, 56px);
}
.v2 .car .car-next {
  right: clamp(12px, 4vw, 56px);
}
.v2 .car .car-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.v2 .car .car-btn:active {
  transform: scale(0.94);
}
.v2 .car .car-btn:focus-visible {
  outline: 2px solid #2ee69a;
  outline-offset: 3px;
}
/* at either end the arrow dims (stays focusable; aria-disabled) */
.v2 .car .car-btn.end {
  opacity: 0.3;
  cursor: default;
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 759px) {
  .v2 .car .car-btn {
    width: 44px;
    height: 44px;
    top: calc(var(--pt) + var(--ih) / 2 - 22px);
  }
}

/* the counter stays, small and quiet, under the row */
.v2 .car .car-ctl {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.v2 .car .car-count {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================================================
   Integrations page (cinema black): the web (our ∞ mark with thin curves to eight glass cards), then one full,
   searchable list of every integration, grouped, with a request form. Plain names only, never brand marks.
   ========================================================================================================== */

/* ---------- the web ---------- */
.v2 .kweb-sec {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
  overflow-x: clip;
}
.kweb {
  position: relative;
  height: clamp(560px, 46vw, 660px);
  isolation: isolate;
}
.kweb::before {
  /* one soft green glow behind the mark, dissolving into the black */
  content: '';
  position: absolute;
  inset: 8% 22%;
  background: radial-gradient(closest-side, rgba(46, 230, 154, 0.16), transparent 100%);
  filter: blur(8px);
  z-index: -2;
  pointer-events: none;
}
.kw-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.kw-line,
.kw-pulse {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.kw-line {
  stroke: url(#kw-g);
  stroke-width: 1px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.kw-pulse {
  stroke: #2ee69a;
  stroke-width: 1.5px;
  stroke-dasharray: 0.07 1;
  stroke-dashoffset: 0.07;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(46, 230, 154, 0.9));
}

/* the mark in the middle: its centre is where the curves start; the caption hangs below it */
.kw-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.kw-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 10.5vw, 136px);
  aspect-ratio: 1;
  border-radius: 34%;
  border: 1px solid rgba(46, 230, 154, 0.38);
  background:
    radial-gradient(circle at 50% 30%, rgba(46, 230, 154, 0.26), transparent 70%),
    linear-gradient(180deg, #0d100e, #050605);
  box-shadow:
    0 0 60px rgba(46, 230, 154, 0.32),
    0 0 140px rgba(46, 230, 154, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 26px rgba(46, 230, 154, 0.16);
}
.kw-mark::before {
  /* a thin halo ring */
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 40%;
  border: 1px solid rgba(46, 230, 154, 0.14);
  pointer-events: none;
}
.kw-mark .inf {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(46, 230, 154, 0.55));
}
.kw-core b,
.kw-core .mono {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
}
.kw-core b {
  top: calc(100% + 34px);
  font: 600 clamp(18px, 1.8vw, 22px) / 1 var(--sg);
  letter-spacing: -0.03em;
  color: #f5f5f4;
}
.kw-core .mono {
  top: calc(100% + 62px);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-2);
}

/* the glass cards */
.kw-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kw-c {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 12px;
  width: clamp(200px, 19vw, 248px);
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--hair-2, rgba(255, 255, 255, 0.13));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 70%), rgba(8, 9, 8, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 48px -28px rgba(0, 0, 0, 0.95);
  transform: translate(-50%, -50%);
}
.kw-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #e7e5dd;
}
.kw-ic .ic {
  width: 18px;
  height: 18px;
}
.kw-live .kw-ic {
  color: var(--green-2);
  border-color: rgba(46, 230, 154, 0.35);
}
.kw-t {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.kw-t b {
  font: 600 14.5px/1.2 var(--sg);
  letter-spacing: -0.01em;
  color: #f5f5f4;
}
.kw-t small {
  font: 400 13px/1.2 var(--sg);
  color: #8f8c86;
}
.kw-dot,
.kw-l i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(242, 241, 236, 0.28);
}
.kw-dot {
  margin-left: auto;
}
.kw-dot.live,
.kw-l.live i {
  background: var(--green-2);
  box-shadow: 0 0 0 3px rgba(46, 230, 154, 0.18);
}
.kw-dot.building,
.kw-l.building i {
  background: #d9a441;
}

/* legend and the line under the web */
.kw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: clamp(20px, 3vw, 36px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.kw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a39b;
}
.kw-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kw-other {
  margin: 0;
  color: #a7a39b;
  font-size: 15px;
}
.kw-other a {
  color: #f5f5f4;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 154, 0.5);
}
.kw-other a:hover {
  color: var(--green-2);
}

/* motion: the curves draw in, a green spark travels along them, the cards and mark float a little */
.motion .kweb.rv:not(.in) .kw-line {
  stroke-dashoffset: 1;
}
.motion .kweb .kw-line {
  transition: stroke-dashoffset 1.4s var(--e-out) calc(0.25s + var(--i, 0) * 0.09s);
}
.motion .kweb.in .kw-pulse {
  animation: kw-pulse 5.6s linear calc(1.6s + var(--i, 0) * 0.7s) infinite;
}
@keyframes kw-pulse {
  0% {
    stroke-dashoffset: 0.07;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  32% {
    stroke-dashoffset: -0.93;
    opacity: 0.9;
  }
  36%,
  100% {
    stroke-dashoffset: -0.93;
    opacity: 0;
  }
}
.motion .kweb.in .kw-mark {
  animation: kw-float 6s ease-in-out infinite;
}
.motion .kweb.in .kw-c {
  animation: kw-card 7s ease-in-out calc(var(--i, 0) * -0.9s) infinite;
}
@keyframes kw-float {
  50% {
    transform: translateY(-6px);
    box-shadow:
      0 0 74px rgba(46, 230, 154, 0.4),
      0 0 160px rgba(46, 230, 154, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 26px rgba(46, 230, 154, 0.2);
  }
}
@keyframes kw-card {
  50% {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

/* phones and small tablets: the mark on top, the cards in a neat grid, no curves */
@media (max-width: 900px) {
  .kweb {
    height: auto;
    display: grid;
    gap: 28px;
  }
  .kweb::before {
    inset: -4% 10% auto;
    height: 260px;
  }
  .kw-lines {
    display: none;
  }
  .kw-core {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding-top: 22px;
    transform: none;
    margin: 0 auto;
  }
  .kw-core b,
  .kw-core .mono {
    position: static;
    translate: none;
  }
  .kw-core b {
    margin-top: 26px;
  }
  .kw-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kw-c {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
  }
  .motion .kweb.in .kw-c {
    animation: none;
  }
}
@media (max-width: 520px) {
  .kw-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- the full list ---------- */
.v2 .klist-sec {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 128px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kl-head {
  display: grid;
  gap: 28px;
  align-items: end;
  margin-bottom: 26px;
}
@media (min-width: 960px) {
  .kl-head {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  }
}
.kl-kick {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-2);
}
.v2 .kl-h {
  margin: 0;
  font: 600 clamp(34px, 4.6vw, 60px) / 1.02 var(--sg);
  letter-spacing: -0.04em;
  color: #f5f5f4;
}
.kl-lead {
  max-width: 560px;
  margin: 16px 0 0;
  color: #a7a39b;
  font-size: 17px;
  line-height: 1.5;
}
.kl-tools {
  display: grid;
  gap: 10px;
}
.fsearch.kl-search {
  margin: 0;
}
.kl-search input {
  min-height: 58px;
  font-size: 17px;
  background-color: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.kl-count {
  margin: 0;
  padding-left: 24px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f8c86;
}
.klist-sec .kw-legend {
  margin-bottom: 26px;
}

/* the groups: glass cards that fill the width */
.kl-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.kl-g {
  padding: 18px 18px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.kl-g[hidden] {
  display: none;
}
.kl-gh {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a7a39b;
}
.kl-gh span {
  color: #5f5d59;
}
.kl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kl-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kl-i:first-child {
  border-top: 0;
}
.kl-i[hidden] {
  display: none;
}
.kl-t {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.kl-t b {
  font: 600 16px/1.25 var(--sg);
  letter-spacing: -0.01em;
  color: #f5f5f4;
}
.kl-t span {
  font-size: 13.5px;
  line-height: 1.4;
  color: #8f8c86;
}
.kl-i .st {
  font-size: 10.5px;
  padding: 5px 9px;
}
.v2 .kl-i .st.request {
  color: #8f8c86;
  border-color: rgba(242, 241, 236, 0.12);
  background: transparent;
}
.v2 .kl-i .st.request::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* nothing found */
.kl-none {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 20px;
  border: 1px dashed rgba(46, 230, 154, 0.3);
  background: radial-gradient(60% 120% at 50% 0%, rgba(46, 230, 154, 0.08), transparent 70%);
  text-align: center;
}
.kl-none p {
  max-width: 560px;
  margin: 0 auto;
  color: #a7a39b;
}
.kl-none .kl-none-h {
  margin-bottom: 10px;
  font: 600 clamp(22px, 2.4vw, 30px) / 1.15 var(--sg);
  letter-spacing: -0.03em;
  color: #f5f5f4;
}

/* the request form: a permanent button that opens it (works without JavaScript) */
.kreq {
  margin-top: clamp(28px, 4vw, 44px);
}
.kreq > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}
.kreq > summary::-webkit-details-marker {
  display: none;
}
.kreq[open] > summary {
  opacity: 0.7;
}
.kreq-form {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(46, 230, 154, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.kreq-lead {
  max-width: 640px;
  margin: 0;
  color: #a7a39b;
}
.kreq-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 860px) {
  .kreq-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}
.kreq-form .in2 {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f4;
}
.kreq-form .in2:hover {
  border-color: rgba(255, 255, 255, 0.24);
}
.kreq-form .in2:focus {
  border-color: var(--green-2);
}
.kreq-form .consent2 {
  color: #d6d3ca;
}
.kreq-privacy {
  margin: -6px 0 0;
  font-size: 13.5px;
  color: #8f8c86;
}
.kreq-privacy a {
  color: #d6d3ca;
}
.kreq-form .err {
  margin: 0;
  color: #ffb4a8;
  background: rgba(255, 122, 107, 0.1);
}
.kreq-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.kreq-go .mono,
.kreq-off {
  margin: 0;
  font-size: 12px;
  color: #8f8c86;
}

@media (prefers-reduced-motion: reduce) {
  .kweb .kw-line {
    transition: none;
    stroke-dashoffset: 0;
  }
  .kweb .kw-pulse,
  .kweb .kw-mark,
  .kweb .kw-c {
    animation: none !important;
  }
}

/* ==========================================================================================================
   Nonstop Agent (src/client/agent.ts): the chat dialog and the inline chat of "Alle vragen". Site v2 language:
   cream / near-black / one green, Space Grotesk + JetBrains Mono. Own tokens on .nsa (the v2 values) so it renders
   the same on every page; dialog = floating panel on desktop, full-screen sheet on phones.
   ========================================================================================================== */
.nsa,
.nsa-backdrop {
  --nsa-cream: #f2f1ec;
  --nsa-cream-2: #e7e5dd;
  --nsa-paper: #fbfaf7;
  --nsa-ink: #161514;
  --nsa-ink-3: #292826;
  --nsa-green: #16c47f;
  --nsa-green-ink: #0a6b42;
  --nsa-mute: #5d5a54;
  --nsa-line: rgba(22, 21, 20, 0.12);
  --nsa-sg: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nsa-mn: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --nsa-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.nsa {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: var(--nsa-sg);
  color: var(--nsa-ink);
  background: var(--nsa-paper);
  text-align: left;
}
.nsa *,
.nsa *::before,
.nsa *::after {
  box-sizing: border-box;
}
.nsa[hidden],
.nsa-backdrop[hidden],
.nsa [hidden] {
  display: none !important;
}
.nsa-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- dialog ---------- */
.nsa-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(22, 21, 20, 0.38);
}
.nsa--panel {
  position: fixed;
  z-index: 91;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 48px));
  border: 1px solid var(--nsa-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(22, 21, 20, 0.45),
    0 2px 6px rgba(22, 21, 20, 0.08);
}
html.nsa-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .nsa--panel:not([hidden]) {
    animation: nsa-in 0.42s var(--nsa-ease);
  }
  .nsa-backdrop:not([hidden]) {
    animation: nsa-fade 0.3s ease-out;
  }
}
@keyframes nsa-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
@keyframes nsa-fade {
  from {
    opacity: 0;
  }
}
/* Phones: a full-screen sheet. */
@media (max-width: 640px) {
  .nsa--panel {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .nsa-backdrop {
    display: none;
  }
}

/* ---------- inline (Alle vragen) ---------- */
.nsa--inline {
  width: 100%;
  max-width: 760px;
  height: min(600px, 80dvh);
  margin-inline: auto;
  border: 1px solid var(--nsa-line);
  border-radius: 20px;
  overflow: hidden;
}

/* ---------- header ---------- */
.nsa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  background: var(--nsa-ink);
  color: var(--nsa-cream);
}
.nsa-who {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-width: 0;
}
.nsa-mark {
  grid-row: span 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nsa-green);
  box-shadow: 0 0 0 4px rgba(22, 196, 127, 0.18);
}
.nsa-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.nsa-sub {
  margin: 2px 0 0;
  font-family: var(--nsa-mn);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(242, 241, 236, 0.66);
}
.nsa-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.nsa-clear,
.nsa-close {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(242, 241, 236, 0.18);
  border-radius: 999px;
  cursor: pointer;
}
.nsa-clear {
  padding: 6px 10px;
  font-family: var(--nsa-mn);
  font-size: 11px;
}
.nsa-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
}
.nsa-clear:hover,
.nsa-close:hover {
  border-color: rgba(242, 241, 236, 0.5);
}

/* ---------- messages ---------- */
.nsa-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--nsa-cream);
}
.nsa-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 88%;
}
.nsa-msg--agent {
  align-self: flex-start;
}
.nsa-msg--me {
  align-self: flex-end;
  align-items: flex-end;
}
.nsa-text {
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 16px;
}
.nsa-msg--agent .nsa-text {
  background: var(--nsa-paper);
  border: 1px solid var(--nsa-line);
  border-bottom-left-radius: 6px;
}
.nsa-msg--me .nsa-text {
  background: var(--nsa-ink);
  color: var(--nsa-cream);
  border-bottom-right-radius: 6px;
}
.nsa-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nsa-act {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nsa-ink);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--nsa-ink);
  border-radius: 999px;
  transition:
    background 0.2s,
    color 0.2s;
}
.nsa-act:hover {
  background: var(--nsa-ink);
  color: var(--nsa-cream);
}
.nsa-act--scan {
  background: var(--nsa-green);
  border-color: var(--nsa-green);
}
.nsa-act--scan:hover {
  background: var(--nsa-ink);
  border-color: var(--nsa-ink);
}

/* ---------- typing ---------- */
.nsa-typing {
  padding: 0 16px 8px;
  background: var(--nsa-cream);
}
.nsa-dots {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--nsa-paper);
  border: 1px solid var(--nsa-line);
  border-radius: 16px 16px 16px 6px;
}
.nsa-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nsa-mute);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .nsa-dots i {
    animation: nsa-dot 1.1s infinite ease-in-out;
  }
  .nsa-dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .nsa-dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@keyframes nsa-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ---------- starters ---------- */
.nsa-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 10px;
  background: var(--nsa-cream);
}
.nsa-chip {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  color: var(--nsa-ink);
  background: var(--nsa-cream-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.nsa-chip:hover {
  border-color: var(--nsa-ink);
}

/* ---------- input ---------- */
.nsa-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 12px 8px 16px;
  border-top: 1px solid var(--nsa-line);
  background: var(--nsa-paper);
}
.nsa-input {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px; /* no zoom on iOS */
  line-height: 1.4;
  color: var(--nsa-ink);
  background: var(--nsa-cream);
  border: 1px solid var(--nsa-line);
  border-radius: 14px;
  resize: none;
}
.nsa-input::placeholder {
  color: var(--nsa-mute);
}
.nsa-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--nsa-ink);
  background: var(--nsa-green);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.nsa-send:disabled {
  opacity: 0.45;
  cursor: progress;
}
.nsa-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-family: var(--nsa-mn);
  font-size: 11px;
  line-height: 1.5;
  color: var(--nsa-mute);
  background: var(--nsa-paper);
}
.nsa-foot a {
  color: var(--nsa-green-ink);
}
@media (max-width: 640px) {
  .nsa-form {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ---------- focus: visible for keyboard use only ---------- */
.nsa :focus {
  outline: none;
}
.nsa :focus-visible {
  outline: 2px solid var(--nsa-green-ink);
  outline-offset: 2px;
}
.nsa-head :focus-visible {
  outline-color: var(--nsa-green);
}
.nsa-input:focus-visible,
.nsa-input:focus {
  border-color: var(--nsa-ink);
  outline: 2px solid var(--nsa-green);
  outline-offset: 0;
}