/* The modern-tool mockup of crm.bamya.co (Yana, 2026-11-05): dev-sales.bamya.co only.
   White page, hairlines, one dark ink for buttons, mint and violet from the Bamya
   mark. The tokens below are panel.css's names, so sales.css (the real price
   calculator and demo player) draws in this page's colours without being touched. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --raise: #ffffff;
  --raise-2: #f6f8f8;
  --line: #e7e9ec;
  --line-strong: #d3d7dc;
  --text: #15171a;
  --dim: #5b6470;
  --faint: #6b7480;
  --you: #0b8573;
  --them: #7c5cf0;
  --live: #0b8573;
  --warn: #b76e00;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--sans);
  --tint: #fafbfb;
  --ink: #17191c;
  --mint: #38d9be;
  --violet: #a78bfa;
  --dark: #0c0e10;
  --dark-2: #15181b;
  --dark-line: rgba(255, 255, 255, .1);
  --dark-dim: #9aa5ab;
  /* The sticky header's height, its border included (.hd-in's 64px and 1px; 58px and 1px on a phone, below): what stays under it
     sits at this top. */
  --hd-h: 65px;
}
@media (max-width: 720px) {
  :root { --hd-h: 59px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
/* `hidden` first for Safari 15 and older, which have no `clip`: the dark sections run 100vw past both edges. */
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------- the mark */
.mk { display: inline-flex; align-items: center; gap: .3em; color: var(--text); font-size: 23px; line-height: 1; font-weight: 650; letter-spacing: -.035em; }
.mk-tile { width: 28px; height: 28px; flex: none; order: -1; margin-right: .1em; }
.mk-b { font-weight: 450; }
.logo-b .mk .mk-tile { order: 0; margin: 0; }
.mk-colon { width: .62em; height: .62em; margin: .06em .08em 0; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(16,24,40,.28); }
.btn-dark:hover { background: #000; }
.btn-line { background: #fff; border-color: var(--line-strong); color: var(--text); }
.btn-line:hover { border-color: #aeb4bb; background: var(--tint); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #dffaf3; }
.btn-line-d { background: transparent; border-color: rgba(255,255,255,.24); color: #fff; }
.btn-line-d:hover { border-color: rgba(255,255,255,.5); }
.btn .ic { font-size: 15px; }

/* The first thing in the body: out of sight until a key brings the focus to it, then at the top left over the header. */
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 80; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; background: var(--ink); color: #fff; border-radius: 9px; box-shadow: 0 8px 22px -8px rgba(16,24,40,.45); font-size: 14px; font-weight: 550; white-space: nowrap; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid var(--you); outline-offset: 2px; }

/* ------------------------------------------------------------- top line */
.bar { position: relative; display: flex; justify-content: center; align-items: center; height: 40px; padding: 0 44px; background: var(--dark); color: #fff; font-size: 13.5px; font-weight: 500; }
.bar a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.bar a:hover { color: var(--mint); }
.bar-x { position: absolute; right: 14px; top: 11px; padding: 0; background: none; border: 0; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; opacity: .7; }
.bar-x:hover { opacity: 1; }
/* A 44px target round the small cross, from the line's top edge, 4px of it over the header's top (the line sits over the header for it,
   z-index 61): the screen's top would cut one centred on the cross. */
.bar { z-index: 61; }
.bar-x::after { content: ""; position: absolute; left: 50%; top: -11px; width: 44px; height: 44px; margin-left: -22px; }
.bar[hidden], .bar-off .bar { display: none; }

/* ------------------------------------------------------------- header */
.hd { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.hd-in { display: flex; align-items: center; gap: 36px; max-width: 1440px; height: 64px; margin: 0 auto; padding: 0 28px; }
.hd-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.hd-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: none; border: 0; border-radius: 8px; font-size: 15px; font-weight: 450; color: #383d44; cursor: pointer; white-space: nowrap; }
.hd-link:hover, .hd-drop:hover > .hd-link { background: #f3f5f6; color: var(--text); }
.hd-link.on { color: var(--text); font-weight: 550; }
.hd-link .ic { font-size: 14px; color: #7c8590; transition: transform .15s; }
.hd-right { display: flex; align-items: center; gap: 10px; }
.hd-burger { position: relative; display: none; width: 38px; height: 36px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 20px; cursor: pointer; }
/* A 44px target, the button drawn as before. */
.hd-burger::after { content: ""; position: absolute; inset: -5px -4px; }
.hd-phone { display: flex; flex-direction: column; padding: 6px 20px 16px; border-top: 1px solid var(--line); }
.hd-phone[hidden] { display: none; }
.hd-phone a { padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
/* The phone menu belongs to the burger's widths only: one left open does not stay when the window is widened. */
@media not all and (max-width: 1000px) {
  .hd-phone { display: none; }
}

.hd-drop { position: relative; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; display: grid; grid-template-columns: 300px 320px; gap: 8px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -12px rgba(16,24,40,.2), 0 2px 6px rgba(16,24,40,.05);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* Open only when the script says so (crm-modern.js opens it on hover and on a press, and closes it), so a press can close it
   under the pointer. If the script never ran (no js-on), hover and focus still open it. */
.hd-drop.open .mega,
html:not(.js-on) .hd-drop:hover .mega, html:not(.js-on) .hd-drop:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.hd-drop.open .hd-link .ic,
html:not(.js-on) .hd-drop:hover .hd-link .ic, html:not(.js-on) .hd-drop:focus-within .hd-link .ic { transform: rotate(180deg); }
.mega-h { padding: 6px 10px 8px; font-size: 13px; font-weight: 500; color: var(--faint); }
.mega a { display: flex; gap: 12px; padding: 9px 10px; border-radius: 9px; }
.mega a:hover { background: #f3f5f6; }
.mega a .ic { font-size: 19px; margin-top: 2px; color: var(--you); }
.mega a b { display: block; font-size: 14.5px; font-weight: 550; }
.mega a small { display: block; font-size: 13px; line-height: 1.35; color: var(--dim); }

/* ------------------------------------------------------------- hero */
.hero { padding: 76px 24px 48px; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; margin-bottom: 26px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(56,217,190,.22); display: inline-block; }
.hero h1, .page-hero h1 { font-size: clamp(42px, 6.2vw, 80px); line-height: 1.02; font-weight: 600; letter-spacing: -.032em; }
.lede { margin-top: 22px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.4; color: var(--dim); letter-spacing: -.008em; }
.hero-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.hero-stage {
  position: relative; padding: 8px 24px 84px;
  background:
    linear-gradient(180deg, #fff 0, rgba(255,255,255,0) 34%),
    repeating-linear-gradient(90deg, rgba(11,133,115,.09) 0 1px, transparent 1px 6px),
    radial-gradient(900px 460px at 28% 100%, #d9f8f0, rgba(217,248,240,0) 70%),
    radial-gradient(900px 460px at 76% 100%, #e7e0fd, rgba(231,224,253,0) 70%),
    #f4fdfb;
  border-bottom: 1px solid var(--line);
}
.shell { max-width: 1160px; margin: 0 auto; background: #fff; border: 1px solid rgba(18,28,38,.18); border-radius: 9px; overflow: hidden; box-shadow: 0 30px 70px -28px rgba(16,40,50,.32); }
.shell .win { border: 0; border-radius: 0; }
.shell .vframe { border-radius: 0; }
.wbar { display: flex; align-items: center; justify-content: space-between; height: 34px; padding-left: 12px; background: #f1f3f5; border-bottom: 1px solid var(--line); color: #383d44; font-size: 12.5px; }
.wbar-t { display: inline-flex; align-items: center; gap: 7px; font-weight: 450; letter-spacing: -.005em; }
.wbar .mk-tile { order: 0; width: 15px; height: 15px; margin: 0; }
.wctl { display: inline-flex; align-self: stretch; flex: none; }
.wctl svg { box-sizing: content-box; width: 10px; height: 10px; padding: 0 18px; align-self: center; fill: none; stroke: currentColor; stroke-width: 1; }

/* ------------------------------------------------------- a drawn window */
.win { background: #fff; border: 1px solid #e4e7ea; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 1px rgba(16,24,40,.03), 0 14px 34px -16px rgba(16,24,40,.18); font-size: 13.5px; line-height: 1.4; letter-spacing: -.003em; }
.shell .win { box-shadow: none; }
.mini { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--text); }
.mini .ic { font-size: 13px; }
button.mini { cursor: pointer; }
button.mini:hover { background: var(--tint); }
.mini-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
button.mini-dark:hover { background: #000; }
.mini-teal { background: #e6faf5; border-color: #9fe6d6; color: #075e51; }

.app-top { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.app-top .mk-tile { width: 24px; height: 24px; }
.app-top .mk { font-size: 18px; }
.app-nav { display: flex; gap: 2px; font-size: 13.5px; font-weight: 550; color: #272b30; }
.app-nav span { padding: 5px 9px; border-radius: 7px; }
.app-nav .on { background: #eef0f2; }
.app-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 18px; color: #3a3f46; }
.app-help { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; }
.app-help i { width: 12px; height: 12px; border: 1.5px solid #7c8590; border-radius: 3px; }

.seg { display: inline-flex; padding: 3px; background: #eceef0; border-radius: 10px; font-size: 14px; font-weight: 600; }
.seg > b, .seg > span { padding: 5px 14px; border-radius: 8px; font-weight: 600; }
.seg > b { background: var(--ink); color: #fff; }
.seg > span { color: var(--faint); }
.seg-sm { font-size: 12px; }
.seg-sm > b, .seg-sm > span { padding: 3px 9px; font-weight: 550; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.c-blue { background: #e4edf6; color: #234e78; }
.c-grn { background: #e7f2e2; color: #3b6a24; }
.c-vio { background: #ece6fe; color: #5636c7; }

/* The hero window: the companies list and the AI assistant beside it. */
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) 348px; height: 540px; }
.hero-main { min-width: 0; padding: 18px 20px 0; overflow: hidden; position: relative; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-head-btns { display: flex; gap: 6px; }
.state-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 6px; }
.state { padding: 8px 12px 7px; text-align: center; background: #f4f5f7; border-radius: 9px; color: var(--dim); }
.state b { display: block; font-size: 19px; line-height: 1.15; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text); transition: color .25s; }
.state span { font-size: 12.5px; font-weight: 550; }
.state.on { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); }
.state b.bump { color: var(--you); }

.rows { font-size: 13px; }
.row { display: grid; grid-template-columns: 22px 1.45fr 1.1fr 1.05fr .72fr; gap: 10px; align-items: center; min-height: 50px; max-height: 60px; padding: 6px 4px; border-bottom: 1px solid #eff1f3; transition: background .3s, max-height .45s ease, min-height .45s ease, padding .45s ease, opacity .3s; overflow: hidden; }
.row-h { min-height: 32px; font-size: 12.5px; font-weight: 650; }
.row b { display: block; color: #0d6b78; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row small { display: block; font-size: 12.5px; color: #3a3f46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row > span { min-width: 0; }
.lnk { color: #0d6b78; font-size: 12.5px; }
.dash { color: #9aa2ab; }
.cb { width: 14px; height: 14px; border: 1.5px solid #b9bfc6; border-radius: 4px; display: inline-block; flex: none; }

[data-step="1"] .is-rome, [data-step="2"] .is-rome { background: #f4f0ff; }
[data-step="2"] [data-apply] { transform: scale(.94); }
[data-apply] { transition: transform .12s; }
[data-step="3"] .is-rome { max-height: 0; min-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; }

.ai-side { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); background: #fdfdfe; }
.ai-side-h { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 14px; flex: none; }
.ai-side-h .ic { font-size: 17px; color: var(--them); }
.ai-side-h b { font-weight: 600; }
.ai-side-h small { font-size: 12.5px; color: var(--dim); }
.ai-side-body { flex: 1; min-height: 0; padding: 14px; overflow: hidden; }
.ai-you { width: fit-content; max-width: 92%; margin: 0 0 12px auto; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: 12px 12px 3px 12px; font-size: 13.5px; line-height: 1.35; }
.ai-change { padding: 12px 13px; background: #fff; border: 1px solid var(--line-strong); border-radius: 11px; font-size: 13px; }
.ai-change-h { font-size: 13px; font-weight: 600; color: #5636c7; margin-bottom: 5px; }
.ai-change b { font-weight: 600; }
.ai-change ul { margin: 8px 0 0; padding-left: 0; color: #383d44; }
.ai-change li { padding: 2px 0 2px 12px; position: relative; font-size: 12.5px; }
.ai-change li::before { content: ""; position: absolute; left: 1px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #5636c7; }
.ai-nothing { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.ai-btns { display: flex; gap: 6px; margin-top: 10px; }
.ai-done { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: #e6faf5; border: 1px solid #a8e9da; border-radius: 11px; font-size: 13px; color: #075e51; }
.ai-done > .ic { font-size: 16px; }
.ai-done > span:not(.mini) { flex: 1; }
.ai-box { display: flex; align-items: center; gap: 2px; min-height: 58px; margin: 0 12px 12px; padding: 9px 11px; border: 1px solid #bcd9f5; border-radius: 10px; box-shadow: 0 0 0 3px #eaf3fd; font-size: 13.5px; color: var(--text); flex: none; }
.ai-box > .ic { margin-left: auto; font-size: 16px; color: var(--dim); flex: none; }
.caret { width: 1.5px; height: 15px; background: #1f6fd6; animation: blink 1s steps(2) infinite; flex: none; }
@keyframes blink { 50% { opacity: 0; } }

.win-hero .ai-you, .win-hero .ai-change, .win-hero .ai-done { display: none; }
.win-hero[data-step="1"] .ai-you, .win-hero[data-step="2"] .ai-you, .win-hero[data-step="3"] .ai-you { display: block; animation: rise .3s ease; }
.win-hero[data-step="1"] .ai-change, .win-hero[data-step="2"] .ai-change { display: block; animation: rise .35s ease; }
.win-hero[data-step="3"] .ai-done { display: flex; animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* The request, typed big over the window before it moves into the AI's box (Yavor, 2026-11-07). The script moves it with
   the scroll; the veil is white, so the window recedes and the page stays light. */
.hero-wrap > .shell { position: relative; }
.hero-ask-room { position: absolute; inset: 34px 0 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero-ask-room[hidden] { display: none; }
.hero-veil { position: absolute; inset: 0; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hero-ask { position: relative; width: min(620px, 86%); padding: 16px 20px 14px; background: #fff; border: 1px solid #bcd9f5; border-radius: 16px; box-shadow: 0 0 0 5px #eaf3fd, 0 30px 70px -24px rgba(16,40,50,.38); transform-origin: 50% 50%; will-change: transform, opacity; }
.hero-ask-h { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.hero-ask-h .ic { font-size: 17px; color: var(--them); }
.hero-ask-h b { font-weight: 600; }
.hero-ask-t { display: flex; align-items: flex-start; min-height: 74px; padding: 12px 0 8px; font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.014em; color: var(--text); text-align: left; }
.hero-ask-t .caret { width: 2px; height: 30px; margin-left: 1px; }
.hero-ask-f { display: flex; justify-content: flex-end; }
.hero-ask-key { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; background: var(--ink); color: #fff; border-radius: 9px; font-size: 13.5px; font-weight: 550; transition: transform .12s, background .12s; }
.hero-ask-key .ic { font-size: 14px; }
.hero-ask.is-enter .hero-ask-key { transform: scale(.92); background: #000; box-shadow: 0 0 0 4px rgba(31,111,214,.22); }
.hero-ask.is-sent .caret { visibility: hidden; }
@media (max-width: 720px) {
  .hero-ask { padding: 12px 14px 11px; }
  .hero-ask-t { min-height: 56px; font-size: 18px; }
  .hero-ask-t .caret { height: 22px; }
}

/* ------------------------------------------------------------- frame */
.frame { max-width: 1392px; margin: 0 auto; border-inline: 1px solid var(--line); }
.frame-open { border-inline: 0; max-width: 1240px; }

/* The strip of the product's parts, where a modern tool shows customers' logos. */
.parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.part { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 16px 18px; background: #fff; transition: background .15s; }
.part:hover { background: var(--tint); }
.part b { display: block; font-size: 15px; line-height: 1.22; font-weight: 550; letter-spacing: -.01em; }
.part-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: #e6faf5; border-radius: 10px; color: #0a7c6b; font-size: 19px; }
.part-ic.pv { background: #f0ebff; color: #5f3fd6; }

/* AI-native above the side menu; the rail, sticky beside the processes, and the one it is on marked. */
.intro-secs { border-top: 1px solid var(--line); }
.railed { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-top: 1px solid var(--line); }
/* z-index 2: over AI-native's dark, which reaches across the rail's column (.rs-ai::before); the phone's row takes 40, below. */
.rail { position: sticky; top: calc(var(--hd-h) + 39px); z-index: 2; align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 40px 0; }
.rail a { padding: 7px 24px 7px 40px; margin-left: -1px; border-left: 2px solid transparent; font-size: 17px; font-weight: 500; letter-spacing: -.012em; color: var(--faint); transition: color .18s, border-color .18s; }
.rail a:hover { color: var(--text); }
.rail a.on { color: var(--text); border-left-color: var(--you); }
.rail-body { min-width: 0; border-left: 1px solid var(--line); }

.rs { border-bottom: 1px solid var(--line); }
.rs:last-child { border-bottom: 0; }
.rs-head { padding: 56px 56px 48px; }
.rs-head h2, .rs-sub h3 { max-width: 700px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing: -.018em; }
.rs-head h2 b, .rs-sub h3 b { font-weight: inherit; }
.rs-head h2 span, .rs-sub h3 span { color: #6e7680; }
.rs-btn { margin-top: 24px; }
.rs-sub { padding: 48px 56px; border-top: 1px solid var(--line); }

.stage { position: relative; padding: 44px 56px; background: var(--tint); border-top: 1px solid var(--line); overflow: hidden; }

.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cells-top { border-top: 1px solid var(--line); }
.cell { min-width: 0; padding: 36px 32px 40px; }
.cell + .cell { border-left: 1px solid var(--line); }
.cell h3 { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.012em; }
.cell > p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--dim); }

.pressed { transform: scale(.93); }

/* The people on Contact, each with a round initial. */
.roster { margin-top: 12px; }
.roster li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15.5px; line-height: 1.3; border-top: 1px solid #eff1f3; }
.roster li:first-child { border-top: 0; }
.roster small { margin-left: auto; font-size: 13.5px; color: var(--dim); }
.av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font-style: normal; font-size: 12.5px; font-weight: 600; }
.av-v { background: #f0ebff; color: #5f3fd6; }
.av-t { background: #e6faf5; color: #0a7c6b; }

/* Bamya Call. */
.stage-call { padding-bottom: 0; }
.win-call { max-width: 820px; margin: 0 auto; border-bottom: 0; border-radius: 12px 12px 0 0; }
.cl-body { padding: 16px 20px 22px; }
.cl-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cl-title > b { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.cl-rec { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; background: #ffb454; border-radius: 8px; color: #392100; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.bars u { display: block; width: 2.5px; height: 100%; background: #392100; border-radius: 2px; transform-origin: center; animation: wave 1.1s ease-in-out infinite; text-decoration: none; }
.bars u:nth-child(2) { animation-delay: .12s; }
.bars u:nth-child(3) { animation-delay: .24s; }
.bars u:nth-child(4) { animation-delay: .36s; }
.bars u:nth-child(5) { animation-delay: .48s; }
@keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.cl-answer { padding: 13px 15px; background: linear-gradient(135deg, #e6faf5, #f4f1ff); border: 1px solid #a8e9da; border-radius: 11px; font-size: 15.5px; line-height: 1.4; }
.cl-a-h { margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: #0a7c6b; }
.cl-a-o { color: #a96400; }
.cl-says { padding: 13px 2px 11px; font-size: 16px; font-weight: 500; border-bottom: 1px solid #eff1f3; }

.tag { font-size: 14px; font-weight: 600; color: var(--you); }

/* The dark closer. */
.closer { position: relative; padding: 96px 24px 92px; background: var(--dark); color: #fff; text-align: center; overflow: hidden; }
.closer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    radial-gradient(820px 340px at 32% 112%, rgba(56,217,190,.3), transparent 70%),
    radial-gradient(820px 340px at 70% 112%, rgba(167,139,250,.28), transparent 70%);
}
.closer-in { position: relative; max-width: 860px; margin: 0 auto; }
.closer h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.closer .lede { color: var(--dark-dim); }
.fine { margin-top: 22px; font-size: 14px; color: var(--dark-dim); }
.fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pill-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }

/* The footer. */
.ft { background: var(--dark); color: #fff; border-top: 1px solid var(--dark-line); }
.ft .mk { color: #fff; }
.ft-in { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px; max-width: 1392px; margin: 0 auto; padding: 60px 40px 44px; }
.ft-brand p { margin-top: 14px; font-size: 14.5px; color: var(--dark-dim); }
.ft-col h2 { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.ft-col li { padding: 4px 0; font-size: 14.5px; color: var(--dark-dim); }
.ft-col a:hover { color: #fff; }
.ft-low { max-width: 1392px; margin: 0 auto; padding: 18px 40px 26px; border-top: 1px solid var(--dark-line); font-size: 13.5px; color: var(--dark-dim); }
.ft-low a { text-decoration: underline; text-underline-offset: 3px; }
.ft-low strong { font-weight: 600; color: #fff; }
/* The company's legal name, number and address, under the copyright: small, muted, 7.7:1 on the footer. */
.ft-legal { max-width: 760px; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--dark-dim); }

.mockpill { position: fixed; right: 14px; bottom: 14px; z-index: 70; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 8px 22px -8px rgba(16,24,40,.32); font-size: 12.5px; font-weight: 500; color: var(--text); }
.mockpill:hover { border-color: var(--you); }

/* ------------------------------------------------------- the other pages */
.page-hero { padding: 84px 24px 56px; text-align: center; }
.page-hero h1 { font-size: clamp(36px, 4.8vw, 64px); max-width: 960px; margin-inline: auto; }
.pill-under { margin: 20px 0 0; }
.page-hero .lede { max-width: 720px; margin-inline: auto; }
.page-hero .cur-switch { margin-top: 22px; }
.page-hero-left { text-align: left; max-width: 1392px; margin: 0 auto; padding-inline: 40px; }
.page-hero-left h1, .page-hero-left .lede { margin-inline: 0; }
.page-hero-post { padding-bottom: 44px; }
.page-hero-post h1 { font-size: clamp(30px, 3.6vw, 48px); max-width: 860px; }
.crumbs { margin-bottom: 16px; font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--you); font-weight: 500; }
.post-meta { margin-top: 16px; font-size: 14.5px; color: var(--dim); }

/* Pricing: the real calculator, sales.css's layout in this page's look. */
.pr-body { padding: 0 24px 96px; }
.fine-grey { max-width: 760px; margin: 14px auto 0; font-size: 14px; color: var(--dim); text-align: center; }
.fine-grey a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-pricing .sl-calc-title { font-size: 24px; font-weight: 550; letter-spacing: -.02em; }
.page-pricing .sl-row, .page-pricing .sl-free, .page-pricing .sl-sum { border-radius: 12px; box-shadow: none; }
.page-pricing .sl-toggle-name { font-weight: 550; letter-spacing: -.008em; }
.page-pricing .sl-row-gives { color: var(--dim); }
.page-pricing .sl-sum h3 { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--dim); }
.page-pricing .sl-plan-price { letter-spacing: -.03em; }
.page-pricing .sl-plan-billed, .page-pricing .sl-more, .page-pricing .sl-row-price small { letter-spacing: 0; text-transform: none; }
.page-pricing .sl-more { font-weight: 500; }
.cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cta.solid { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(16,24,40,.28); }
.cta.solid:hover { background: #000; }
/* The calculator's switches, in this page's light colours; the name stays beside its switch. */
.sl-table { --sl-cols: 226px minmax(0, 1.3fr) 128px; }
.sl-table .sl-tname { flex-wrap: nowrap; }
.sl-table .sl-tcount { flex-wrap: wrap; }
.page-pricing .sl-tname:has(.sl-count) { flex-wrap: wrap; }
.page-pricing .sl-toggle-track { width: 36px; height: 21px; border: 0; border-radius: 999px; background: #cdd2d7; }
.page-pricing .sl-toggle-track::after { top: 2px; left: 2px; width: 17px; height: 17px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.28); transform: none; }
.page-pricing .sl-toggle input:checked + .sl-toggle-track { background: var(--you); border: 0; box-shadow: none; }
.page-pricing .sl-toggle input:checked + .sl-toggle-track::after { background: #fff; left: 2px; transform: translateX(15px); }
.page-pricing .sl-row.is-on:not(.sl-free) { background: #f3fcf9; border-color: #8fdccb; }
.page-pricing .sl-free { background: #fff; }

/* Demos. */
.cell > .tag { margin-top: 0; font-size: 14px; color: var(--you); }
.svc-card { margin: 22px 0; padding: 14px 16px; box-shadow: none; }
.svc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.svc-h .pulse { width: 7px; height: 7px; }
.svc-card dl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid #eff1f3; font-size: 14.5px; line-height: 1.35; }
.svc-card dt { font-weight: 550; color: #5f3fd6; font-size: 13.5px; }
.svc-card .yours dt { color: var(--you); }
.svc-card dd { color: #383d44; }

/* Contact. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-copy { padding: 72px 56px; }
.split-copy h2 { margin: 6px 0 16px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 550; letter-spacing: -.024em; }
.split-copy > p:not(.tag) { margin-bottom: 12px; font-size: 16.5px; color: var(--dim); }
.split-pic { padding: 56px; background: var(--tint); border-left: 1px solid var(--line); }
.split-pic img { width: 100%; max-height: 560px; object-fit: cover; object-position: 50% 22%; border-radius: 12px; border: 1px solid var(--line); }
.split-pic figcaption { margin-top: 10px; font-size: 13.5px; color: var(--dim); }

/* Blog. */
.blg { padding: 8px 40px 72px; }
.bl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 24px 0 8px; }
.bl-filter[hidden] { display: none; }
.bl-filter button { height: 32px; padding: 0 11px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.bl-filter button span { color: var(--dim); font-weight: 400; margin-left: 3px; }
.bl-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-filter button[aria-pressed="true"] span { color: #cfd4d9; }
.bl-rss { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--dim); }
.bl-month[hidden], .bl-card[hidden], .bl-none[hidden] { display: none; }
.bl-month-label { margin: 30px 0 12px; font-size: 15px; font-weight: 600; color: var(--dim); }
.bl-month-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bl-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.bl-card:hover { border-color: var(--line-strong); box-shadow: 0 12px 26px -16px rgba(16,24,40,.3); }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--dim); }
.bl-tag { color: var(--you); font-weight: 550; }
.bl-card h3 { margin-top: 8px; font-size: 16.5px; line-height: 1.28; font-weight: 550; letter-spacing: -.012em; }
.bl-stretch::after { content: ""; position: absolute; inset: 0; }
.bl-card p { margin-top: 7px; font-size: 14.5px; line-height: 1.42; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-read { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--you); }
.bl-none { padding: 24px 0; color: var(--dim); }
.bl-prose { max-width: 720px; margin: 0 auto; padding: 56px 24px 64px; font-size: 17px; line-height: 1.6; color: #2a2e34; }
.bl-prose > * + * { margin-top: 16px; }
.bl-prose h2, .bl-prose h3 { margin-top: 30px; font-weight: 550; letter-spacing: -.016em; line-height: 1.25; color: var(--text); }
.bl-prose a { color: var(--you); text-decoration: underline; text-underline-offset: 3px; }
.bl-prose ul, .bl-prose ol { padding-left: 22px; }
.bl-prose ul { list-style: disc; }
.vb-watch { padding: 40px 24px 0; }
.vb-watch .wrap { max-width: 980px; margin: 0 auto; }
.pager { display: flex; flex-direction: column; gap: 4px; transition: background .15s; }
.pager:hover { background: var(--tint); }
.pager small { font-size: 13px; color: var(--dim); }
.pager b { font-size: 16px; font-weight: 550; letter-spacing: -.01em; }
/* Read by a screen reader, not drawn (with sales.css's own .vh, so the page needs no sales.css for it). */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------- arriving softly */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .rv.in { opacity: 1; transform: none; }
/* The script adds js-on first thing. If it never starts, what waits for it to show (the sections' arrivals, the year's card, the
   tasks on the boards) comes in anyway after 2.5s, as it stands without a script at all. */
@keyframes failsafe { to { opacity: 1; transform: none; } }
html.js:not(.js-on) .rv, html.js:not(.js-on) .fin-task, html.js:not(.js-on) .cc-task { animation: failsafe .4s ease 2.5s forwards; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .bars u, .caret { animation: none; }
  /* Nothing slides either: what the script moves (cards, chips, rows, the fabric's words) jumps to its place. */
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* ------------------------------------------------------- narrower screens */
@media (max-width: 1240px) {
  .parts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .railed { grid-template-columns: 216px minmax(0, 1fr); }
  .rail a { padding-left: 22px; font-size: 15.5px; }
  .rs-head, .rs-sub { padding-inline: 40px; }
  .stage { padding: 40px; }
  .bl-month-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hd-nav { display: none; }
  .hd-right { margin-left: auto; }
  .hd-burger { display: inline-flex; }
  .hero-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero-main { height: 400px; }
  .ai-side { border-left: 0; border-top: 1px solid var(--line); min-height: 356px; }
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .railed { display: block; }
  .rail { top: var(--hd-h); z-index: 40; flex-direction: row; gap: 2px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail a { flex: none; margin: 0; padding: 6px 11px; border: 0; border-radius: 8px; font-size: 14px; white-space: nowrap; }
  .rail a.on { background: var(--ink); color: #fff; }
  .rail-body { border-left: 0; }
  html { scroll-padding-top: 128px; }
  .ft-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-brand { grid-column: 1 / -1; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-pic { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .frame { border-inline: 0; }
  .bar { font-size: 13px; padding: 0 36px 0 14px; justify-content: flex-start; }
  .hd-in { height: 58px; padding: 0 14px; gap: 10px; }
  .hd-right .btn-line { display: none; }
  .hero { padding: 56px 18px 36px; }
  .hero-stage { padding: 4px 10px 40px; }
  .wctl svg { padding: 0 11px; }
  .app-top { gap: 8px; padding: 0 10px; }
  .app-nav { display: none; }
  .app-head-btns { display: none; }
  .hero-main { height: 360px; padding: 12px 10px 0; }
  .row { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .row > span:nth-child(3), .row > span:nth-child(5) { display: none; }
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part { min-height: 72px; padding: 12px; gap: 10px; }
  .part b { font-size: 14px; }
  .part-ic { width: 32px; height: 32px; font-size: 17px; }
  .rs-head, .rs-sub { padding: 48px 20px 40px; }
  .stage { padding: 20px 14px; }
  .cells { grid-template-columns: minmax(0, 1fr); }
  .cell + .cell { border-left: 0; border-top: 1px solid var(--line); }
  .cell { padding: 28px 20px 32px; }
  .closer { padding: 80px 20px 84px; }
  .ft-in { padding: 44px 20px 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-low { padding-inline: 20px; padding-bottom: 60px; }
  .page-hero { padding: 56px 18px 36px; }
  .page-hero-left { padding-inline: 20px; }
  .pr-body { padding: 0 12px 64px; }
  .split-copy { padding: 44px 20px; }
  .split-pic { padding: 20px; }
  .blg { padding: 4px 16px 48px; }
  .bl-month-posts { grid-template-columns: minmax(0, 1fr); }
  .bl-rss { margin-left: 0; }
  .mockpill { right: 8px; bottom: 8px; height: 28px; font-size: 11.5px; }
  .svc-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* ------------------------------------------------- round two (2026-11-05) */

/* The whole page turns dark over a dark zone: the header goes with it. */
.hd { transition: background-color .22s, border-color .22s; }
.hd .mk, .hd-link, .hd-burger { transition: color .22s, background-color .22s, border-color .22s; }
html.in-dark { background: var(--dark); }
html.in-dark .hd { background: var(--dark); border-bottom-color: var(--dark-line); }
html.in-dark .hd .mk { color: #fff; }
html.in-dark .hd-link { color: #d9dee2; }
html.in-dark .hd-link.on { color: #fff; }
html.in-dark .hd-link:hover, html.in-dark .hd-drop:hover > .hd-link { background: rgba(255,255,255,.08); color: #fff; }
html.in-dark .hd-link .ic { color: #9aa5ab; }
html.in-dark .hd-right .btn-line { background: transparent; border-color: rgba(255,255,255,.22); color: #fff; }
html.in-dark .hd-right .btn-line:hover { border-color: rgba(255,255,255,.5); background: transparent; }
html.in-dark .hd-right .btn-dark { background: #2b3036; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
html.in-dark .hd-right .btn-dark:hover { background: #383e45; }
html.in-dark .hd-burger { border-color: rgba(255,255,255,.22); color: #fff; }
html.in-dark .hd-phone { border-top-color: var(--dark-line); }
html.in-dark .hd-phone a { color: #fff; border-bottom-color: var(--dark-line); }
html.in-dark .mockpill { background: #1a1d20; border-color: rgba(255,255,255,.2); color: #fff; }

.dz { position: relative; background: var(--dark); color: #f3f5f6; overflow: hidden; scroll-margin-top: -84px; }
.dz-frame { position: relative; max-width: 1392px; margin: 0 auto; border-inline: 1px solid var(--dark-line); }
.dz-hero { padding: 112px 24px 0; text-align: center; }
.dz-small { margin-bottom: 8px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; color: var(--dark-dim); }
.dz-title { font-size: clamp(44px, 8.2vw, 118px); line-height: 1.02; font-weight: 600; letter-spacing: -.036em; color: #f6f8f9; }
.dz-wave { display: block; width: 100%; height: 300px; }
.dz-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--dark-line); }
.dz-cell { padding: 30px 28px 34px; }
.dz-cell + .dz-cell { border-left: 1px solid var(--dark-line); }
.dz-cell b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.dz-cell span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--dark-dim); }
.dz-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.dz-tag { display: inline-block; margin-bottom: 18px; padding: 3px 9px; background: rgba(56,217,190,.14); border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--mint); }

/* A demo video playing in its window. */
.vframe { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark); border-radius: 10px; }
/* Dark too until its poster comes (crm-modern.js sets data-poster as the frame comes near), so there is no white flash. */
.vframe video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--dark); }
.vframe-open { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 14px; background: none; border: 0; cursor: pointer; }
.vframe-tag { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; background: rgba(12,14,16,.8); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, color .15s; }
.vframe-open:hover .vframe-tag, .vframe-open:focus-visible .vframe-tag { background: var(--mint); border-color: var(--mint); color: #05241e; }

.faq { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; scroll-margin-top: 64px; }
.faq h2 { margin-bottom: 26px; text-align: center; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 550; letter-spacing: -.026em; }
.faq-q { border-bottom: 1px solid var(--line); }
.faq-q summary { position: relative; padding: 20px 40px 20px 0; font-size: 17px; line-height: 1.35; font-weight: 500; letter-spacing: -.008em; list-style: none; cursor: pointer; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before, .faq-q summary::after { content: ""; position: absolute; right: 6px; top: 31px; width: 13px; height: 1.6px; background: #7c8590; transition: transform .2s; }
.faq-q summary::after { transform: rotate(90deg); }
.faq-q[open] summary::after { transform: rotate(0); }
.faq-q summary:hover { color: var(--you); }
.faq-a { padding: 0 40px 22px 0; font-size: 16px; line-height: 1.55; color: var(--dim); }
.faq-a a { color: var(--you); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1240px) {
  .dz-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .dz { scroll-margin-top: -128px; }
}
@media (max-width: 860px) {
  .dz-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-cell:nth-child(3) { border-left: 0; }
  .dz-cell:nth-child(n+3) { border-top: 1px solid var(--dark-line); }
}
@media (max-width: 720px) {
  .dz-frame { border-inline: 0; }
  .dz-hero { padding-top: 76px; }
  .dz-wave { height: 200px; }
  .dz-cell { padding: 22px 18px 26px; }
  .vframe-open { padding: 8px; }
  .vframe-tag { height: 28px; padding: 0 10px; font-size: 12px; }
  .faq { padding: 52px 18px 72px; }
  .faq-q summary { font-size: 16px; }
  .faq-a { padding-right: 8px; font-size: 15.5px; }
}

/* ------------------------------------------------ round three (2026-11-05) */

/* Cards floating beside the hero's window, as a modern tool's does. */
.hero-wrap { position: relative; max-width: 1392px; margin: 0 auto; }
.hero-wrap > .shell { max-width: 1000px; }
.fl { position: absolute; z-index: 4; overflow: hidden; border-radius: 13px; box-shadow: 0 18px 44px -16px rgba(16,40,50,.42), 0 2px 6px rgba(16,40,50,.08); }
.fl-video { right: 0; top: 56px; width: 212px; padding: 8px; background: #fff; border: 1px solid rgba(18,28,38,.1); }
.fl-h { display: flex; align-items: center; gap: 6px; padding: 1px 3px 7px; font-size: 12.5px; line-height: 1.2; }
.fl-h b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-h .mk-tile { width: 16px; height: 16px; }
.fl-video .vframe { border-radius: 8px; }
.fl-video .vframe-open { padding: 5px; }
.fl-video .vframe-tag { width: 24px; height: 24px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.fl-video .vframe-tag .ic { font-size: 12px; }
.fl-tabs { display: flex; align-items: center; justify-content: space-between; padding: 8px 3px 5px; font-size: 11.5px; font-weight: 500; }
.fl-tabs .on { padding: 2px 7px; background: #eef0f2; border-radius: 6px; }
.fl-tabs small { font-size: 11px; color: var(--dim); }
.fl-lines { position: relative; height: 92px; margin: 0; padding: 0 3px; list-style: none; overflow: hidden; }
.fl-lines li { padding: 3px 0; font-size: 11.5px; line-height: 1.32; color: var(--faint); transition: color .25s; }
.fl-lines li.on { color: var(--text); }
@media (min-width: 1560px) {
  .fl-video { right: -56px; top: 40px; width: 268px; }
}
@media (max-width: 1180px) {
  .hero-wrap > .shell { margin: 0 auto; }
  .fl-video { position: static; width: auto; max-width: 460px; margin: 16px auto 0; }
  .fl-video .vframe-tag { width: auto; height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
  .fl-h { font-size: 14px; }
  .fl-lines { height: 62px; }
  .fl-lines li { font-size: 13px; }
}

/* Bigger statements and more cells in the Leads and Call sections. */
.rs-big { padding: 56px; border-top: 1px solid var(--line); background: var(--tint); }
.rs-big h2 { max-width: 780px; margin-top: 8px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; font-weight: 550; letter-spacing: -.024em; }
.rs-big h2 b { font-weight: inherit; }
.rs-big h2 span { color: #6e7680; }
.cell > p + p { margin-top: 10px; }
.people { margin-top: 16px; }
.people li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14.5px; }
.people .av { width: 26px; height: 26px; font-size: 11px; }
@keyframes langs { to { transform: translateX(-50%); } }

/* Diagram one: a campaign across its channels. */
.stage-sq { --sq-vertical: 0; padding: 40px 44px 44px; background-color: var(--tint); background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; }
.sq-grid { position: relative; display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, 82px); align-items: center; }
.sq-grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(#e4e7ea, #e4e7ea) 0 82px / 100% 1px no-repeat, linear-gradient(#e4e7ea, #e4e7ea) 0 164px / 100% 1px no-repeat; }
.sq-lane { position: relative; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; grid-column: 1; }
.sq-lane.l1 { grid-row: 1; }
.sq-lane.l2 { grid-row: 2; }
.sq-lane.l3 { grid-row: 3; }
.sq-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; font-style: normal; font-size: 14px; font-weight: 700; }
.c-li { background: #0a66c2; color: #fff; font-size: 13px; letter-spacing: -.02em; }
.c-em { background: #f0ebff; color: #5f3fd6; }
.c-ph { background: #e6faf5; color: #0a7c6b; }
.sq-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sq-base { fill: none; stroke: #b4bbc2; stroke-width: 1.5; }
.sq-fill { fill: none; stroke: var(--you); stroke-width: 2.2; stroke-linecap: round; }
.sq-dot { position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #fff; border: 3px solid var(--you); border-radius: 50%; box-shadow: 0 0 0 4px rgba(56,217,190,.28); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sq-dot.on { opacity: 1; }
.sq-step { position: relative; z-index: 2; grid-column: calc(var(--col) + 1); grid-row: var(--lane); justify-self: center; display: block; width: calc(100% - 30px); min-width: 96px; padding: 7px 6px 8px; background: #fff; border: 1px solid #dfe3e7; border-radius: 11px; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sq-step small { display: block; font-size: 11.5px; line-height: 1.2; color: var(--faint); }
.sq-step b { display: block; font-size: 13.5px; line-height: 1.25; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-step:hover { border-color: #aeb4bb; }
.sq-step.done { border-color: #86d9c6; }
.sq-step.on { border-color: var(--you); box-shadow: 0 0 0 3px rgba(56,217,190,.22); transform: translateY(-2px); }
.sq-msg { position: relative; z-index: 2; margin: 24px 0 0 96px; padding: 14px 18px 15px; box-shadow: 0 16px 34px -18px rgba(16,24,40,.28); }
.sq-msg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.sq-msg-h b { font-size: 14.5px; font-weight: 600; }
.sq-msg-h small { font-size: 13px; color: var(--dim); }
.sq-msg-h em { margin-left: auto; padding: 0 8px; background: #f0ebff; border: 1px solid #cfc2fb; border-radius: 999px; font-style: normal; font-size: 11.5px; line-height: 19px; font-weight: 500; color: #5636c7; }
.sq-msg-b { min-height: 104px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: #383d44; white-space: pre-line; }
.sq-msg-b.in { animation: rise .28s ease; }
.sq-msg-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sq-msg-f [data-seq-btn]:empty { display: none; }

/* Demos: a wall of tiles. */
.page-hero-demos { padding-bottom: 40px; }
.tile-filter { position: sticky; top: calc(var(--hd-h) - 1px); z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 12px 16px; background: #fff; border-block: 1px solid var(--line); }
.tile-filter button { height: 34px; padding: 0 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.tile-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { min-width: 0; padding: 36px 36px 40px; border-bottom: 1px solid var(--line); transition: background .2s; }
.tile:not(.t-wide) { margin-left: -1px; border-left: 1px solid var(--line); }
.tile[hidden], .tile-h[hidden] { display: none; }
.tile-txt h3 { font-size: 21px; line-height: 1.22; font-weight: 500; letter-spacing: -.016em; }
.tile-txt h3 b { font-weight: inherit; }
.tile-txt h3 span { color: #6e7680; }
.tile-len { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--dim); }
.tile-len .ic { font-size: 11px; }
.tile-vid { margin-top: 22px; }
.vwin { overflow: hidden; border: 1px solid rgba(18,28,38,.14); border-radius: 9px; box-shadow: 0 18px 40px -22px rgba(16,40,50,.42); transition: transform .25s, box-shadow .25s; }
.vwin .vframe { border-radius: 0; }
.tile:hover .vwin { transform: translateY(-3px); box-shadow: 0 26px 50px -22px rgba(16,40,50,.5); }
.t-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; padding: 48px 48px 52px; background: var(--tint); background-image: radial-gradient(#e2e5e8 1px, transparent 1.2px); background-size: 18px 18px; }
.t-wide .tile-txt h3 { font-size: clamp(25px, 2.5vw, 36px); line-height: 1.12; font-weight: 550; letter-spacing: -.024em; }
.t-wide .tile-vid { margin-top: 0; }
.t-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.t-flip .tile-txt { order: 2; }
.t-dark { background: var(--dark); color: #fff; }
.t-dark .tile-txt h3 span, .t-dark .tile-len { color: var(--dark-dim); }
.tile-h { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 64px 48px; border-bottom: 1px solid var(--line); }
.tile-h h2 { margin-top: 8px; font-size: clamp(25px, 2.5vw, 36px); line-height: 1.12; font-weight: 550; letter-spacing: -.024em; }
.tile-h h2 b { font-weight: inherit; }
.tile-h h2 span { color: #6e7680; }
.tile-h .svc-card { margin: 0; }

/* Pricing: the giant table. */
.cmp { max-width: 1272px; margin: 0 auto; padding: 72px 24px 16px; scroll-margin-top: 64px; }
.cmp-h { text-align: center; }
.cmp-h h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 550; letter-spacing: -.026em; }
.cmp-h p { max-width: 620px; margin: 12px auto 0; font-size: 17px; line-height: 1.45; color: var(--dim); }
.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 30px; }
.geek-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.geek-parts button { height: 32px; padding: 0 11px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.geek-parts button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.geek-search { display: flex; align-items: center; gap: 7px; flex: 0 1 220px; min-width: 150px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--dim); }
.geek-search:focus-within { border-color: var(--you); box-shadow: 0 0 0 3px rgba(56,217,190,.18); }
.geek-search input { width: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--text); }
.geek-soon { display: inline-block; margin-left: 6px; padding: 0 6px; background: #fff4d9; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 500; line-height: 17px; color: #755300; white-space: nowrap; }
.geek-none { padding: 32px 0; text-align: center; font-size: 16px; color: var(--dim); }
.geek-none[hidden] { display: none; }
.cmp-pick { display: none; }
.cmp-t { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14.5px; }
.cmp-t th { font-weight: 400; text-align: left; }
.cmp-first { width: 31%; }
.cmp-t thead th { position: sticky; top: calc(var(--hd-h) - 1px); z-index: 6; padding: 14px 8px 12px; background: #fff; border-bottom: 1px solid var(--line-strong); vertical-align: top; text-align: center; }
.cmp-t thead th.cmp-first { vertical-align: middle; text-align: left; padding-left: 0; }
.cmp-t thead b { display: block; font-size: 14.5px; line-height: 1.2; font-weight: 550; letter-spacing: -.008em; }
.cmp-price { display: block; min-height: 36px; margin: 3px 0 7px; }
.cmp-price > span[data-when], .cmp-price small { display: block; }
.cmp-price i { display: block; font-style: normal; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: -.012em; }
.cmp-price small { font-size: 11.5px; line-height: 1.2; color: var(--dim); }
.cmp-t thead .mini { justify-content: center; width: 100%; max-width: 112px; }
.cmp-seg { display: inline-flex; padding: 3px; background: #eceef0; border-radius: 10px; }
.cmp-seg button { height: 30px; padding: 0 12px; background: none; border: 0; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--dim); cursor: pointer; }
.cmp-seg button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.cmp-part th { padding: 44px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 550 !important; letter-spacing: -.018em; }
.cmp-group th { padding: 18px 0 8px; font-size: 14.5px; font-weight: 600 !important; color: var(--dim); border-bottom: 1px solid var(--line); }
.cmp-row th, .cmp-row td { padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp-row th { padding-left: 0; line-height: 1.3; color: #2a2e34; }
.cmp-row td { text-align: center; font-size: 14px; font-weight: 500; color: #383d44; }
.cmp-row td[data-c="crm"], .cmp-t thead th[data-c="crm"] { background: #f5fcfa; }
.cmp-row:hover th, .cmp-row:hover td { background-color: #f6f8f9; }
.cmp-n { display: inline; }
.tick { display: inline-grid; place-items: center; width: 19px; height: 19px; background: #2b3036; border-radius: 50%; color: #fff; font-size: 12px; }
.tick .ic { stroke-width: 2.6; }
.nope { display: inline-grid; place-items: center; width: 19px; height: 19px; color: var(--faint); font-size: 12px; }
/* A row's note: a small "i" button, its words over it on hover, on keyboard focus, and while the script has it open (a press). The
   hover is only for a pointer that hovers: a phone's tap would leave it stuck open. */
.cmp-i { position: relative; display: inline-block; width: 14px; height: 14px; margin: 0 0 0 6px; padding: 0; vertical-align: -2px; background: #dfe3e7; border: 0; border-radius: 50%; font: inherit; color: inherit; text-align: left; cursor: help; -webkit-appearance: none; appearance: none; }
.cmp-i::before { content: "i"; position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; font-weight: 700; color: var(--dim); }
.cmp-tip { position: absolute; left: -8px; bottom: calc(100% + 8px); z-index: 12; display: none; width: 300px; padding: 10px 12px; background: var(--ink); border-radius: 9px; box-shadow: 0 14px 30px -10px rgba(12,14,16,.5); font-size: 13px; line-height: 1.42; font-weight: 400; color: #fff; text-align: left; white-space: normal; }
@media (hover: hover) {
  .cmp-i:hover .cmp-tip { display: block; }
}
.cmp-i:focus-visible .cmp-tip, .cmp-i[aria-expanded="true"] .cmp-tip { display: block; }
.cmp-i:focus-visible { outline: 2px solid var(--you); outline-offset: 1px; }

@media (max-width: 1240px) {
  .rs-big { padding-inline: 40px; }
  .stage-sq { padding-inline: 32px; }
  .sq-grid { grid-template-columns: 84px repeat(5, minmax(0, 1fr)); }
  .sq-step b { font-size: 12.5px; }
  .sq-msg { margin-left: 84px; }
  .t-wide { gap: 32px; padding-inline: 36px; }
  .cmp-first { width: 26%; }
  .cmp-t thead .mini { padding: 0 4px; }
}
@media (max-width: 1000px) {
  .t-wide, .t-flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .t-flip .tile-txt { order: 0; }
  .tile-h { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 48px 36px; }
}
@media (max-width: 860px) {
  /* The campaign turns on its side: a column for each channel, a row for each step. */
  .stage-sq { --sq-vertical: 1; }
  .sq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 34px repeat(5, 60px); column-gap: 6px; }
  .sq-grid::before { display: none; }
  .sq-lane { grid-row: 1 !important; justify-content: center; font-size: 12.5px; gap: 5px; }
  .sq-lane.l1 { grid-column: 1; }
  .sq-lane.l2 { grid-column: 2; }
  .sq-lane.l3 { grid-column: 3; }
  .sq-step { grid-column: var(--lane); grid-row: calc(var(--col) + 1); width: 100%; padding: 5px 4px 6px; }
  .sq-msg { margin-left: 0; }
  .cmp-tools { display: none; }
  /* The table shows one part at a time. */
  .cmp-pick { position: sticky; top: calc(var(--hd-h) - 1px); z-index: 8; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; padding: 8px 0; background: #fff; }
  .cmp-pick button { flex: 1 1 auto; height: 32px; padding: 0 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
  .cmp-pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .cmp-t, .cmp-t thead, .cmp-t tbody { display: block; width: 100%; }
  .cmp-t [hidden] { display: none !important; }
  .cmp-t tr { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; }
  .cmp-part th, .cmp-group th { grid-column: 1 / -1; }
  .cmp-t { margin-top: 0; }
  .cmp-first { width: auto; }
  .cmp-t thead th { position: static; }
  .cmp-t thead th.cmp-first { align-self: center; }
  .cmp-t[data-col="crm"] [data-c]:not([data-c="crm"]),
  .cmp-t[data-col="leads"] [data-c]:not([data-c="leads"]),
  .cmp-t[data-col="call"] [data-c]:not([data-c="call"]),
  .cmp-t[data-col="customer_care"] [data-c]:not([data-c="customer_care"]),
  .cmp-t[data-col="ai"] [data-c]:not([data-c="ai"]) { display: none; }
  .cmp-t thead .mini { max-width: none; }
  /* A note's words open across its row, from the row's left, not from the icon, so they stay on the screen: the row places them,
     the icon is static (its overflow keeps it sitting on its foot, and clips nothing the row places). */
  .cmp-row { position: relative; }
  .cmp-i { position: static; overflow: hidden; }
  .cmp-i::before { position: static; display: block; height: 14px; }
  .cmp-tip { left: 0; width: min(100%, 520px); }
}
@media (max-width: 720px) {
  .rs-big { padding: 40px 20px; }
  .stage-sq { padding: 22px 14px 26px; }
  .sq-step b { font-size: 12px; }
  .sq-step small { font-size: 10.5px; }
  .sq-msg-b { min-height: 150px; }
  .tile { padding: 24px 16px 28px; margin-left: 0 !important; border-left: 0 !important; grid-column: 1 / -1; }
  .t-wide { padding: 28px 16px 32px; }
  .tile-h { padding: 36px 16px; }
  .cmp { padding: 52px 14px 12px; }
}

/* ------------------------------------------------- round four (2026-11-05) */

/* Demos on the dark background: the tokens turn, so what is drawn from them turns too. */
body.page-demos { background: var(--dark); }
.dark-page {
  --line: var(--dark-line);
  --line-strong: rgba(255,255,255,.22);
  --text: #f3f5f6;
  --dim: var(--dark-dim);
  --faint: #8d979d;
  --you: var(--mint);
  position: relative;
  background: var(--dark);
  color: #f3f5f6;
}
.dark-page + .closer, .dz + .closer { border-top: 1px solid var(--dark-line); }
.dark-page .page-hero {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px),
    radial-gradient(700px 300px at 34% 118%, rgba(56,217,190,.17), transparent 70%),
    radial-gradient(700px 300px at 68% 118%, rgba(167,139,250,.17), transparent 70%);
}
.dark-page .page-hero h1 { color: #f6f8f9; }
.dark-page .pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.dark-page .frame { border-inline-color: var(--dark-line); }
.dark-page .tile-filter { background: var(--dark); border-block-color: var(--dark-line); }
.dark-page .tile-filter button { background: transparent; border-color: rgba(255,255,255,.22); color: #d9dee2; }
.dark-page .tile-filter button:hover { border-color: rgba(255,255,255,.5); }
.dark-page .tile-filter button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--dark); }
.dark-page .tile, .dark-page .tile-h { border-color: var(--dark-line); }
.dark-page .tile-txt h3, .dark-page .tile-h h2 { color: #f6f8f9; }
.dark-page .tile-txt h3 span, .dark-page .tile-h h2 span { color: var(--dark-dim); }
.dark-page .tile-len { color: var(--dark-dim); }
.dark-page .t-wide {
  background-color: #101316;
  background-image: radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.dark-page .t-dark { background: transparent; }
.dark-page .vwin { border-color: rgba(255,255,255,.14); box-shadow: 0 26px 60px -28px #000; }
.dark-page .tile:hover .vwin { box-shadow: 0 30px 70px -30px rgba(56,217,190,.5), 0 0 0 1px rgba(56,217,190,.3); }
.dark-page .wbar { background: #1b1f23; border-bottom-color: var(--dark-line); color: #c9d0d5; }
.dark-page .tile-h { background: #101316; }
.dark-page .tag { color: var(--mint); }
.dark-page .svc-card { background: var(--dark-2); border-color: var(--dark-line); }
.dark-page .svc-card dl > div { border-top-color: var(--dark-line); }
.dark-page .svc-card dt { color: var(--violet); }
.dark-page .svc-card .yours dt { color: var(--mint); }
.dark-page .svc-card dd { color: #d9dee2; }
/* The window a video plays in with sound, dark on every page: sales.css's own rules for it (the live site's player, sales-demos.js),
   here so the main page needs no sales.css; where a page still loads sales.css, the same values twice. */
.sl-demo-modal { --raise: #101316; --raise-2: #15181b; --text: #f3f5f6; --dim: #9aa5ab; --faint: #8d979d; --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.22); margin: auto; width: 96vw; height: 96vh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--line-strong); border-radius: 14px; background: #101316; color: #f3f5f6; overflow: hidden; }
.sl-demo-modal[open] { display: flex; flex-direction: column; }
.sl-demo-modal::backdrop { background: rgba(4, 6, 8, .86); backdrop-filter: blur(4px); }
.sl-demo-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 12px 0 20px; background: var(--raise); }
.sl-demo-modal-title { margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-demo-modal-close { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.sl-demo-modal-close::before, .sl-demo-modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.sl-demo-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sl-demo-modal-close:hover, .sl-demo-modal-close:focus-visible { border-color: var(--you); color: var(--you); }
.sl-demo-modal-video { display: block; flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ------------------------------------------------- round five (2026-11-06) */

/* The hero's tagline in two sentences, one to a line (Yana, 2026-11-07): room for the first on one line. */
.lede-tag { max-width: 36em; margin-inline: auto; }

/* The dark section runs past both margins: main clips it at the screen, so nothing can scroll sideways. `hidden` first for Safari 15
   and older, which have no `clip` (there the rail, the demos' filter and the compare table's head do not stick: a hidden box is a
   scroller; the script does not pin there either). */
main { overflow-x: hidden; overflow-x: clip; overflow-anchor: none; }

/* AI-native: the whole page goes dark, the rail's column and both margins too, not a card on white. */
.rs-ai {
  --line: var(--dark-line);
  --line-strong: rgba(255,255,255,.22);
  --text: #f3f5f6;
  --dim: var(--dark-dim);
  --faint: #8d979d;
  --you: var(--mint);
  --tint: transparent;
  position: relative;
  z-index: 1;
  color: #f3f5f6;
  border-bottom: 0;
}
.rs-ai::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -1;
  background:
    radial-gradient(760px 420px at 62% 12%, rgba(167,139,250,.13), transparent 70%),
    radial-gradient(760px 520px at 38% 74%, rgba(56,217,190,.1), transparent 70%),
    var(--dark);
}
.rail.on-dark a { color: #8d979d; }
.rail.on-dark a:hover, .rail.on-dark a.on { color: #fff; }
.rail.on-dark a.on { border-left-color: var(--mint); }
.rs-ai .rs-head { padding-top: 88px; }
.ai-name { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 16px; font-weight: 550; color: var(--mint); }
.ai-name .ic { font-size: 19px; }
.rs-ai .rs-head h2 { max-width: 780px; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.07; font-weight: 550; letter-spacing: -.028em; color: #f6f8f9; }
.rs-ai .rs-head h2 span, .rs-ai .rs-sub h3 span { color: var(--dark-dim); }
.rs-ai .rs-sub { padding-top: 72px; }
.rs-ai .rs-sub h3 { max-width: 760px; font-size: clamp(25px, 2.5vw, 36px); line-height: 1.14; font-weight: 550; letter-spacing: -.024em; }
.rs-ai .stage { background: none; }
.rs-ai .win { background: #14171a; border-color: rgba(255,255,255,.13); border-radius: 9px; box-shadow: 0 34px 70px -34px #000, 0 0 70px -36px rgba(56,217,190,.5); }
.rs-ai .wbar { background: #1d2125; border-bottom-color: var(--dark-line); color: #c9d0d5; }
.ai-side-h small { margin-left: auto; }
.rs-ai .mini { background: transparent; color: #f3f5f6; }
.rs-ai button.mini:hover { background: rgba(255,255,255,.08); }
.rs-ai .mini-dark { background: var(--mint); border-color: var(--mint); color: #05241e; }
.rs-ai button.mini-dark:hover { background: #5ce4cd; }

/* No rigid tier: her words, and the year as a small card that pops up, as the hero's business card does. */
.rs-big-fx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 36px; align-items: start; }
.rs-big-fx h2 { margin-top: 0; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.16; letter-spacing: -.022em; }
.fx { position: relative; z-index: 5; overflow: hidden; background: #fff; border: 1px solid rgba(18,28,38,.16); border-radius: 9px; box-shadow: 0 26px 56px -20px rgba(16,40,50,.42), 0 2px 6px rgba(16,40,50,.08); }
.fx-pop.rv { opacity: 0; transform: translateY(28px) scale(.9); transform-origin: 80% 100%; transition: opacity .45s ease, transform .6s cubic-bezier(.2, 1.25, .35, 1); }
.fx-pop.rv.in { opacity: 1; transform: none; }
html:not(.js) .fx-pop.rv { opacity: 1; transform: none; }
.fx .wbar { height: 30px; padding-left: 9px; font-size: 11.5px; white-space: nowrap; }
.fx .wbar-t { min-width: 0; overflow: hidden; }
.fx .wbar .mk-tile { width: 13px; height: 13px; }
.fx .wctl svg { width: 8px; height: 8px; padding: 0 6px; }
.fx-chart { --label: 38px; --pos: 12; position: relative; margin: 10px 12px 0; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.fx-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-left: var(--label); padding-bottom: 3px; font-size: 10.5px; color: var(--faint); }
.fx-months span { padding-left: 1px; transition: color .15s; }
.fx-months .on { color: var(--text); font-weight: 650; }
.fx-row { display: flex; align-items: center; gap: 10px; min-height: 37px; border-top: 1px solid #f0f2f4; }
.fx-cell { flex: 1; min-width: 0; }
.fx-name { font-size: 12px; line-height: 1.2; font-weight: 500; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.fx-row.on .fx-name { color: var(--text); }
.sw { position: relative; flex: none; width: 28px; height: 16px; background: #d3d7dc; border-radius: 999px; transition: background .18s; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(16,24,40,.3); transition: transform .18s; }
.fx-row.on .sw { background: var(--you); }
.fx-row.on .sw::after { transform: translateX(12px); }
.sw-plus { display: grid; place-items: center; flex: none; width: 28px; height: 16px; border: 1px dashed #aeb4bb; border-radius: 999px; font-style: normal; font-size: 11px; color: var(--dim); }
.fx-track { position: relative; height: 7px; margin-top: 4px; background: #f1f3f5; border-radius: 4px; }
.fx-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 12 * 100%); width: calc(max(0, min(var(--pos), var(--e)) - var(--s)) / 12 * 100%); background: #ad99f6; border-radius: 4px; }
.fx-bar.b-crm { background: var(--mint); }
.fx-row-new .fx-name { color: var(--dim); }
.fx-line { position: absolute; top: 15px; bottom: 37px; left: calc(var(--label) + (100% - var(--label)) * var(--pos) / 12); width: 1.5px; margin-left: -.75px; background: var(--ink); pointer-events: none; }
.fx-cap { min-height: 5.6em; margin: 0; padding: 9px 12px 11px; border-top: 1px solid var(--line); background: var(--tint); font-size: 13px; line-height: 1.38; color: #383d44; }
.fx-cap b { font-weight: 600; color: var(--you); }

/* Show, don't tell: real screens filmed on dev. */
.stage-show { padding: 32px 56px 44px; background-color: var(--tint); background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; }
.stage-show .vwin { max-width: 960px; margin: 0 auto; box-shadow: 0 30px 60px -28px rgba(16,40,50,.5); }
.vwin { background: #fff; }
.show-more { padding: 24px 32px; border-top: 1px solid var(--line); text-align: center; }
.rs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* The sales call assistant: the wow in a small space. */
.stage-call { padding-bottom: 36px; }
.win-call { border: 1px solid #e4e7ea; border-radius: 12px; }
.cl-says { padding: 2px 2px 12px; border-bottom: 0; }
.cl-answer { transition: opacity .3s, transform .3s; min-height: 92px; }
.cl-answer.off { opacity: 0; transform: translateY(6px); }
.cl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cl-facts li { display: flex; align-items: center; gap: 10px; padding: 20px 22px; font-size: 15px; line-height: 1.25; font-weight: 500; letter-spacing: -.006em; }
.cl-facts li + li { border-left: 1px solid var(--line); }
.cl-facts .ic { font-size: 19px; color: var(--you); }

@media (max-width: 1240px) {
  .stage-show { padding-inline: 32px; }
  .rs-big-fx { grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; }
  .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-facts li:nth-child(3) { border-left: 0; }
  .cl-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1000px) {
  .rs-big-fx { grid-template-columns: minmax(0, 1fr); }
  .fx { width: 100%; max-width: 440px; margin: 0; }
  html.in-dark .rail { background: var(--dark); border-bottom-color: var(--dark-line); }
  html.in-dark .rail a { color: #9aa5ab; }
  html.in-dark .rail a.on { background: #fff; color: var(--dark); }
  .rail.on-dark a.on { border-left-color: transparent; }
}
@media (max-width: 720px) {
  .rs-ai .rs-head { padding-top: 60px; }
  .rs-ai .rs-sub { padding-top: 48px; }
  .stage-show { padding: 14px 10px 20px; }
  .cl-facts li { padding: 14px 14px; font-size: 13.5px; gap: 8px; }
}

/* ------------------------------------------------- round eight (2026-11-06) */

/* Finance: where the money is, drawn in the light. */
.stage-fin { background-color: var(--tint); background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; }
.stage-fin { padding: 30px 40px 26px; }
.fin-board { --g: 14px; --head: 62px; --row: 50px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); min-height: 270px; }
.fin-col { padding: 10px 12px; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; }
.fin-col p { font-size: 12.5px; font-weight: 550; color: var(--dim); }
.fin-col b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.fin-late { border-color: #f0d9a8; background: #fffaf0; }
.fin-late p { color: #a96400; }
.fin-in { border-color: #a8e9da; background: #f2fcf9; }
.fin-in p { color: #0a7c6b; }
.fin-chip, .fin-task { position: absolute; left: calc(var(--col) * ((100% - 2 * var(--g)) / 3 + var(--g)) + 8px); top: calc(var(--head) + var(--slot) * var(--row)); width: calc((100% - 2 * var(--g)) / 3 - 16px); }
.fin-chip { z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 42px; padding: 0 11px; background: #fff; border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 6px 14px -10px rgba(16,24,40,.4); font-size: 13px; transition: left .75s cubic-bezier(.5, 0, .2, 1), top .75s cubic-bezier(.5, 0, .2, 1), border-color .3s, background .3s; }
.fin-chip span { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chip b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-chip.c1 { border-color: #e5b45a; background: #fff6e3; }
.fin-chip.c2 { border-color: #86d9c6; }
.fin-task { z-index: 2; display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 8px 10px; background: var(--ink); border-radius: 9px; color: #fff; font-size: 12.5px; line-height: 1.25; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.3, .35, 1); }
/* Hidden only for the script to bring in: without one the tasks stand on the board. */
.js .fin-task { opacity: 0; transform: translateY(8px) scale(.96); }
.fin-task.on { opacity: 1; transform: none; }
.fin-task i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; font-style: normal; font-size: 10px; color: transparent; transition: background .25s, border-color .25s, color .25s; }
.fin-task.ticked i { background: var(--mint); border-color: var(--mint); color: #05241e; }
.fin-task small { display: block; margin-top: 1px; font-size: 11px; color: rgba(255,255,255,.72); }

/* Customer Care: who needs you, and who is ready for more. */
.care-note { padding: 14px 32px; border-top: 1px solid var(--line); background: var(--tint); font-size: 14px; font-weight: 500; text-align: center; color: var(--dim); }

/* AI in the fabric: the vision, in the dark. */
.dz-hero { padding-top: 104px; }
.dz-sub { max-width: 640px; margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.42; letter-spacing: -.008em; color: var(--dark-dim); }
.dz-wave { height: 320px; }
.dz-cells-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dz-cells-6 .dz-cell { padding: 26px 20px 30px; }
.dz-cells-6 .dz-cell > .ic { display: block; margin-bottom: 26px; font-size: 22px; color: var(--mint); }
.dz-cells-6 .dz-cell:nth-child(even) > .ic { color: var(--violet); }
.dz-cells-6 .dz-cell b { font-size: 16px; line-height: 1.22; }
.dz-cells-6 .dz-cell span { font-size: 14px; }
.dz-split { align-items: stretch; }
.fab-list { display: flex; flex-direction: column; justify-content: center; padding: 56px 40px 56px 48px; }
.fab-item { position: relative; display: block; width: 100%; padding: 18px 0 18px 18px; background: none; border: 0; border-left: 2px solid var(--dark-line); text-align: left; color: #f3f5f6; }
.fab-t { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.012em; color: var(--dark-dim); transition: color .2s; }
.fab-item:hover .fab-t, .fab-item.on .fab-t { color: #f6f8f9; }
.fab-b { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 16px; line-height: 1.42; transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease; }
.fab-b b { font-weight: 500; }
.fab-b i { font-style: normal; color: var(--dark-dim); }
.fab-item.on .fab-b { max-height: 220px; margin-top: 10px; opacity: 1; }
.fab-item.on::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--mint); transform-origin: top; transform: scaleY(var(--along, 0)); }
.fab-show { min-width: 0; min-height: 470px; border-left: 1px solid var(--dark-line); display: grid; align-items: center; }
.fab-panel { min-width: 0; animation: rise .35s ease; }
.fab-panel[hidden] { display: none; }
.fab-one { padding: 40px 40px; }

/* Integrations: a placeholder that names no partner until there is one. */
.eco { padding: 96px 0 72px; border-top: 1px solid var(--dark-line); text-align: center; scroll-margin-top: 40px; }
.eco .dz-tag { margin-bottom: 16px; }
.eco-h { padding: 0 24px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; font-weight: 550; letter-spacing: -.026em; color: #f6f8f9; }
.eco-sub { max-width: 560px; margin: 16px auto 24px; padding: 0 24px; font-size: 17px; line-height: 1.42; color: var(--dark-dim); }
.eco-rows { display: grid; gap: 14px; margin-top: 52px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.eco-track { display: flex; gap: 14px; width: max-content; animation: langs 60s linear infinite; }
.eco-back { animation-direction: reverse; animation-duration: 70s; }
.eco-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 124px; height: 112px; padding: 8px; background: linear-gradient(170deg, #1c2024, #14171a); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; font-size: 26px; color: #f3f5f6; }
.eco-tile small { font-size: 12px; line-height: 1.2; font-weight: 500; color: #c9d0d5; }
.eco-tile.is-next { background: transparent; border: 1.5px dashed rgba(255,255,255,.2); color: var(--dark-dim); }
.eco-tile.is-next small { color: var(--dark-dim); }
.eco-tile.is-you { background: rgba(56,217,190,.07); border: 1.5px dashed rgba(56,217,190,.65); color: var(--mint); }
.eco-tile.is-you small { color: var(--mint); }
.eco-fine { margin-top: 22px; font-size: 13.5px; color: var(--dark-dim); }

@media (max-width: 1240px) {
  .stage-fin { padding-inline: 28px; }
  .dz-cells-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dz-cells-6 .dz-cell:nth-child(4) { border-left: 0; }
  .dz-cells-6 .dz-cell:nth-child(n+4) { border-top: 1px solid var(--dark-line); }
  .fab-list { padding: 44px 32px 8px; }
  .fab-show { border-left: 0; min-height: 0; }
}
@media (max-width: 860px) {
  .dz-cells-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-cells-6 .dz-cell:nth-child(n) { border-left: 0; border-top: 1px solid var(--dark-line); }
  .dz-cells-6 .dz-cell:nth-child(even) { border-left: 1px solid var(--dark-line); }
  .dz-cells-6 .dz-cell:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 720px) {
  .stage-fin { padding: 16px 10px 16px; }
  .fin-board { --g: 6px; --row: 46px; --head: 54px; min-height: 240px; }
  .fin-col { padding: 7px 7px; }
  .fin-col p { font-size: 11px; }
  .fin-col b { font-size: 13.5px; }
  .fin-chip, .fin-task { left: calc(var(--col) * ((100% - 2 * var(--g)) / 3 + var(--g)) + 3px); width: calc((100% - 2 * var(--g)) / 3 - 6px); }
  .fin-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: 40px; padding: 0 6px; font-size: 11px; }
  .fin-task { padding: 5px 6px; gap: 4px; font-size: 10.5px; }
  .fin-task small { display: none; }
  .dz-hero { padding-top: 72px; }
  .dz-wave { height: 220px; }
  .fab-list { padding: 32px 20px 4px; }
  .fab-one { padding: 20px 14px; }
  .eco { padding: 64px 0 52px; }
  .eco-tile { width: 104px; height: 96px; font-size: 22px; }
  .eco-tile small { font-size: 11px; }
  .care-note { padding-inline: 16px; }
}

/* ------------------------------------------------- round ten (2026-11-06) */

/* Outreach on the dark: it borrows AI-native's dark, and what only this section draws follows here. */
/* Outreach's head is Bamya AI's size since 2026-11-07 (Yana): .rs-ai .rs-head h2 sets it. */
.rs-out .rs-big h2 span { color: var(--dark-dim); }
.rs-out .stage-sq { background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); }
.rs-out .sq-grid::before { opacity: .14; }
.rs-out .sq-base { stroke: rgba(255,255,255,.24); }
.rs-out .sq-step { background: #15191c; border-color: rgba(255,255,255,.16); color: #f3f5f6; }
.rs-out .sq-step:hover { border-color: rgba(255,255,255,.42); }
.rs-out .sq-step.done { background: #122320; border-color: rgba(56,217,190,.5); }
.rs-out .sq-step.on { background: #122320; border-color: var(--mint); }
.rs-out .sq-msg-b { color: #d5dbdf; }
.rs-out .mini-teal { background: rgba(56,217,190,.14); border-color: rgba(56,217,190,.45); color: var(--mint); }

/* ------------------------------------------------- round twelve (2026-11-06) */

/* A window that stops on the screen while the scroll plays it: its parents must clip without becoming a scrolling box. */
.stage-sq, .stage-show, .stage-fin, .stage-call, .dz { overflow: clip; }
.pin-room { position: relative; }

/* Your process follows what actually happens: the pipeline chart's own elements, drawn at 960 by 540 and scaled to its window. */
.bx { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.bx-scene { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; color: var(--text); }
.bx-top { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.bx-top b { font-weight: 600; }
.bx-top .ic { font-size: 17px; }
.bx-name { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; height: 46px; padding: 9px 12px; }
.bx-name span { display: flex; align-items: center; padding: 0 10px; background: #eef0f2; border-radius: 6px; font-size: 13px; color: var(--dim); }
.bx-name span:first-child { font-weight: 500; color: var(--text); }
.bx-chart { position: relative; width: 936px; height: 396px; margin: 0 12px; background-color: #fbfcfc; background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.bx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bx-e { fill: none; stroke: #8b95a1; stroke-width: 1.6; stroke-dasharray: 1; stroke-linejoin: round; }
.bx-e-way { stroke: #6d55d8; stroke-width: 1.8; }
.bx-card { position: absolute; width: 132px; height: 86px; padding: 8px 12px; background: #fff; border: 1px solid #d3d7dc; border-radius: 11px; box-shadow: 0 6px 16px -10px rgba(16,24,40,.35); transition: border-color .2s, box-shadow .2s; }
.bx-card.on { border-color: #1c7f4c; box-shadow: 0 0 0 2px rgba(28,127,76,.16), 0 6px 16px -10px rgba(16,24,40,.35); }
.bx-new { border-color: #1c7f4c; box-shadow: 0 0 0 2px rgba(28,127,76,.2), 0 10px 22px -12px rgba(16,24,40,.4); }
.bx-n { font-size: 11.5px; line-height: 1.2; color: var(--dim); }
.bx-card b { display: block; margin-top: 2px; font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.bx-meta { display: flex; align-items: center; gap: 3px; margin-top: 11px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.bx-meta .ic { font-size: 12px; }
.bx-meta span { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; }
.bx-add { position: absolute; right: -10px; top: 50%; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; background: #fff; border: 1px solid #b9bfc6; border-radius: 50%; font-style: normal; font-size: 12px; color: #4b525b; transition: background .15s, border-color .15s, color .15s, transform .12s; }
.bx-add.on { background: #1c7f4c; border-color: #1c7f4c; color: #fff; }
.bx-add.pressed { transform: scale(.86); }
.bx-way { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 90px; height: 24px; background: #fff; border: 1px solid #6d55d8; border-radius: 7px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.bx-ring { position: absolute; z-index: 3; width: 24px; height: 24px; border: 2px solid #1c7f4c; border-radius: 50%; opacity: 0; pointer-events: none; }
.bx-ptr { position: absolute; left: 0; top: 0; z-index: 4; width: 20px; height: 24px; overflow: visible; pointer-events: none; transform-origin: 2px 2px; filter: drop-shadow(0 2px 3px rgba(16,24,40,.3)); }
.bx-foot { display: flex; justify-content: flex-end; align-items: center; gap: 6px; height: 54px; padding: 0 12px; }
.js .bx-card, .js .bx-way { will-change: left, top, opacity; }

/* Then the two ways to start (Yavor, 2026-11-07): the window shrinks to the right (to --bx-shrink of its size, read by the script too)
   and the two come on the left, each joined to it. Under the window when there is no room beside it, or no script. */
.bx-show { --bx-shrink: .45; position: relative; max-width: 960px; margin: 0 auto; container-type: inline-size; }
.stage-show .bx-show .vwin { max-width: none; margin: 0; }
.bx-win { position: relative; z-index: 1; transform-origin: 100% 50%; }
.js .bx-win { will-change: transform; }
.bx-links { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bx-link { fill: none; stroke: #8b95a1; stroke-width: 1.6; stroke-dasharray: 1; }
.bx-dot { fill: #fff; stroke: #8b95a1; stroke-width: 1.6; }
.bx-notes { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.bx-note { padding: 18px 20px 19px; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 34px -18px rgba(16,40,50,.4); text-align: left; }
.bx-note :is(h3, h4) { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -.014em; color: var(--text); }
.bx-note p { margin-top: 8px; font-size: 15px; line-height: 1.45; letter-spacing: -.004em; color: var(--dim); }
.bx-note-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: #ece6fe; border-radius: 8px; font-size: 16px; color: #5636c7; }
.bx-note-ic-t { background: #e6faf5; color: #075e51; }
.js .bx-note { will-change: transform, opacity; }
@container (min-width: 840px) {
  .js .bx-notes { position: absolute; left: 0; top: 0; bottom: 0; width: calc((1 - var(--bx-shrink)) * 100% - 56px); grid-template-columns: minmax(0, 1fr); align-content: center; gap: 24px; margin: 0; }
  /* Once both are there they are what the eye lands on (Yavor, 2026-11-07): the window beside them is only the picture. */
  .js .bx-note { padding: 26px 30px 28px; border-radius: 16px; box-shadow: 0 24px 54px -24px rgba(16,40,50,.45); }
  .js .bx-note :is(h3, h4) { gap: 14px; font-size: 25px; line-height: 1.2; letter-spacing: -.02em; }
  .js .bx-note p { margin-top: 12px; font-size: 18px; line-height: 1.45; }
  .js .bx-note-ic { width: 42px; height: 42px; border-radius: 11px; font-size: 22px; }
}
@media (max-width: 720px) {
  .bx-notes { gap: 14px; margin-top: 16px; }
  .bx-note { padding: 14px 16px 15px; }
  .bx-note :is(h3, h4) { font-size: 16.5px; }
  .bx-note p { font-size: 14.5px; }
}

/* The same two cards on the right of their window, which shrinks to the left (Multi-step outreach campaigns, Yavor, 2026-11-07),
   across the stage's whole width, and on the dark. */
.stage-sq .bx-show { max-width: none; }
.bx-show-r .bx-win { transform-origin: 0 50%; }
/* Too tall for the screen with both cards under the window: the window shrinks to the top and they come into the room it gives up. */
.js .bx-show.is-under .bx-notes { position: absolute; left: 0; right: 0; top: auto; bottom: 0; grid-template-columns: minmax(0, 1fr); margin: 0; }
.bx-show.is-under .bx-win { transform-origin: 50% 0; }
@container (min-width: 840px) {
  .js .bx-show-r .bx-notes { left: auto; right: 0; }
}
.rs-out .bx-note { background: #15191c; border-color: rgba(255,255,255,.16); box-shadow: 0 24px 54px -24px #000; }
.rs-out .bx-note :is(h3, h4) { color: #f3f5f6; }
.rs-out .bx-note p { color: var(--dark-dim); }
.rs-out .bx-note-ic { background: rgba(124,98,232,.24); color: #cbbfff; }
.rs-out .bx-note-ic-t { background: rgba(56,217,190,.14); color: var(--mint); }
.rs-out .bx-link { stroke: rgba(255,255,255,.4); }
.rs-out .bx-dot { fill: #15191c; stroke: rgba(255,255,255,.4); }

/* ------------------------------------------------- round fourteen (2026-11-06) */

/* The call assistant: its window and the demo card beside it, side by side, nothing covering either. */
.stage-call { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: center; }
.stage-call .win-call { max-width: none; width: 100%; margin: 0; }
.stage-call .fl-video { position: static; width: auto; }
.fl-h .wctl { margin-left: auto; color: var(--faint); }
.fl-h .wctl svg { width: 8px; height: 8px; padding: 0 7px; }
@media (max-width: 1240px) {
  .stage-call { grid-template-columns: minmax(0, 1fr); }
  .stage-call .fl-video { max-width: 460px; width: 100%; justify-self: center; }
}

/* ------------------------------------------------- round fifteen (2026-11-06) */

/* AI in the fabric: section titles. */
.dz-cap { padding: 56px 24px 40px; font-size: clamp(27px, 3vw, 42px); line-height: 1.1; font-weight: 550; letter-spacing: -.024em; text-align: center; color: #f6f8f9; }
.dz-cap-gap { padding-top: 88px; padding-bottom: 16px; }
.dz-cap-sub { max-width: 620px; margin: 0 auto; padding: 0 24px 48px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.42; letter-spacing: -.006em; text-align: center; color: var(--dark-dim); }
@media (max-width: 720px) {
  .dz-cap { padding: 40px 20px 28px; }
  .dz-cap-gap { padding-top: 60px; padding-bottom: 12px; }
  .dz-cap-sub { padding: 0 20px 32px; }
}

/* ------------------------------------------------- round sixteen (2026-11-07) */

/* The opening line went into the dark section: its top line would sit on the strip's own. */
.intro-secs { border-top: 0; }

/* Calls to action stand out by size, weight, depth and room, not by colour (Yana, 2026-11-07: "they get lost in the design").
   The header's two stay as they are: they live outside main. */
main .btn { height: 48px; padding: 0 22px; gap: 10px; border-radius: 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; transition: background .15s, border-color .15s, color .15s, transform .18s ease, box-shadow .18s ease; }
main .btn-lg { height: 56px; padding: 0 28px; border-radius: 14px; font-size: 17px; }
main .btn-dark { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -14px rgba(16,24,40,.6); }
main .btn-white { box-shadow: 0 14px 30px -14px rgba(0,0,0,.75); }
main .btn-line { border-width: 1.5px; border-color: #bfc5cc; box-shadow: 0 10px 22px -16px rgba(16,24,40,.45); }
main .btn-line-d { border-width: 1.5px; border-color: rgba(255,255,255,.45); }
main .btn:hover { transform: translateY(-2px); }
main .btn-dark:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 32px -14px rgba(16,24,40,.7); }
main .btn-line:hover { border-color: var(--ink); background: #fff; }
main .btn-line-d:hover { border-color: #fff; background: rgba(255,255,255,.06); }
main .btn .ic { font-size: 17px; }
/* The arrow sits in a small round of its own, in the button's own ink, and steps forward on hover. */
main .btn > .ic:has(use[href="#i-arrow"]) { box-sizing: content-box; width: 16px; height: 16px; margin-right: -9px; padding: 5px; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); transition: transform .18s ease; }
main .btn-lg > .ic:has(use[href="#i-arrow"]) { width: 18px; height: 18px; padding: 6px; margin-right: -12px; }
main .btn:hover > .ic:has(use[href="#i-arrow"]) { transform: translateX(3px); }
/* Room around them, so they are not lost among the words. */
.rs-btn { margin-top: 32px; }
.rs-btns { gap: 12px; margin-top: 32px; }
.hero-btns { gap: 12px; margin-top: 36px; }
.show-more { padding: 40px 32px; }
@media (prefers-reduced-motion: reduce) {
  main .btn:hover, main .btn:hover > .ic:has(use[href="#i-arrow"]) { transform: none; }
}
@media (max-width: 720px) {
  main .btn { height: 46px; padding: 0 18px; font-size: 15px; }
  main .btn-lg { height: 52px; padding: 0 22px; font-size: 16px; }
}

/* ------------------------------------------------- live on crm.bamya.co (2026-11-07) */

/* "Finance and Customer Care" takes two lines in the table's head: every title keeps room for two, sitting on its
   last line, so the prices and the buttons stay on one level. */
.cmp-t thead th[data-c] b { display: flex; align-items: flex-end; justify-content: center; min-height: 2.4em; }

/* ------------------------------------------------- AI in the fabric, the pictures redrawn (Yana, 2026-11-07) */

/* One customer, one story: the card, its story and six pieces that start apart. The script moves each piece; the card's face,
   its head, the spine and the badge follow --card, --spine and --whole. Without script the story is simply whole. */
.fab-one { position: relative; display: grid; place-items: center; min-height: 470px; padding: 36px 40px; }
.os-card { position: relative; width: min(100%, 460px); padding: 18px 18px 12px; }
.os-card::before { content: ""; position: absolute; inset: 0; background: var(--dark-2); border: 1px solid rgba(56,217,190,.3); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.85), 0 0 34px -6px rgba(56,217,190, calc(var(--whole, 1) * .35)); opacity: var(--card, 1); transform: scale(calc(.96 + var(--card, 1) * .04)); }
.os-h { position: relative; display: flex; align-items: center; gap: 11px; margin: 0; padding: 0 4px 14px; opacity: var(--card, 1); }
.os-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--mint)); color: var(--dark); font-size: 12.5px; font-weight: 700; }
.os-h b { display: block; font-size: 15px; font-weight: 600; color: #f3f5f6; }
.os-h small { display: block; font-size: 12.5px; color: var(--dark-dim); }
.os-badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(56,217,190,.13); color: var(--mint); font-size: 12px; font-style: normal; font-weight: 600; opacity: var(--whole, 1); }
.os-story { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.os-story::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 16px; width: 2px; border-radius: 2px; background: linear-gradient(var(--violet), var(--mint)); transform-origin: top; transform: scaleY(var(--spine, 1)); opacity: .75; }
.os-line { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 44px; margin-bottom: 6px; padding: 0 12px; background: #1b1f23; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font-size: 13.5px; color: #e9edf0; transition: border-color .3s, background .3s; }
.os-line.is-apart { background: #171a1d; border-style: dashed; border-color: rgba(255,255,255,.22); box-shadow: 0 16px 30px -18px rgba(0,0,0,.9); }
.os-line::before { content: ""; position: absolute; left: -18px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px 2px rgba(56,217,190,.6); opacity: var(--in, 1); }
.os-src { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #c9d0d5; }
.os-src .ic { font-size: 16px; color: var(--violet); }
.os-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-when { font-size: 12px; color: var(--dark-dim); font-variant-numeric: tabular-nums; }


@media (max-width: 720px) {
  .fab-one { min-height: 400px; padding: 20px 10px; }
  .os-card { padding: 14px 12px 8px; }
  .os-line { grid-template-columns: 106px minmax(0, 1fr) auto; gap: 7px; height: 40px; padding: 0 9px; font-size: 12px; }
  .os-src { gap: 5px; }
  .os-src .ic { font-size: 14px; }
  .os-when { font-size: 10.5px; }
}

/* Outreach's intro (2026-11-07), beside the side menu since Yavor's word the same day: dark straight into its dark section. */
.rs-out-intro .rs-head { padding-bottom: 24px; }
/* One dark line across the whole page under the intro, as under Bamya AI's, in place of the first sub-head's own. */
.rs-out-intro::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--dark-line); }
.rs-out > .rs-sub:first-child { border-top: 0; }
/* The intro's glow stays at its top, so its bottom meets the plain dark of the section under it with no seam. */
.rs-out-intro::before { background: radial-gradient(760px 420px at 62% 12%, rgba(167,139,250,.13), transparent 70%), var(--dark); }

/* On a phone the side menu is a row: the one under Outreach's intro is dark whenever the dark section is right under it. */
@media (max-width: 1000px) {
  .rail.on-dark { background: var(--dark); border-bottom-color: var(--dark-line); }
  .rail.on-dark a { color: #9aa5ab; }
  .rail.on-dark a.on { background: #fff; color: var(--dark); }
}

/* ------------------------------------------------- Finance, round eighteen (Yavor, 2026-11-07) */

/* A screen-high view: the board (pro-formas on the money, a fourth column for costs) stands in its middle while it plays, then the
   view goes on down inside itself to Finance's Overview, alone across the whole width, joined to the board; then a small accountant
   card opens on the right, squeezing the overview, joined to the board and to the overview at once. Under it all, what each moment
   is worth, lit as it happens. Without a script it all stands, one under the other. */
.stage-fin { padding-bottom: 26px; }
.sv-stage .pin-body { position: relative; display: flex; flex-direction: column; }
.sv-view { position: relative; }
.js .sv-view { flex: none; clip-path: inset(-14px -90px 0 -90px); }
.sv-cam { position: relative; }
.js .sv-cam { will-change: transform; }
.fin-top { position: relative; z-index: 1; padding: 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 18px 40px -26px rgba(16,40,50,.42); }
.fin-top .fin-board { grid-template-columns: repeat(4, minmax(0, 1fr)); --head: 62px; --row: 56px; min-height: 292px; }
.fin-top .fin-chip, .fin-top .fin-task { left: calc(var(--col) * ((100% - 3 * var(--g)) / 4 + var(--g)) + 8px); width: calc((100% - 3 * var(--g)) / 4 - 16px); }
.fin-top .fin-chip { height: 48px; transition: left .75s cubic-bezier(.5, 0, .2, 1), top .75s cubic-bezier(.5, 0, .2, 1), border-color .3s, background .3s, box-shadow .3s, opacity .3s, transform .35s; }
.fin-chip span small { display: block; margin-top: 1px; font-size: 11px; font-weight: 450; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chip.off { opacity: 0; transform: scale(.9); }
.fin-chip.is-new { border-color: #8b74e8; box-shadow: 0 0 0 3px rgba(124,92,240,.2), 0 6px 14px -10px rgba(16,24,40,.4); }
.fin-chip.is-new small { color: #5636c7; font-weight: 550; }
.fin-cost { border-color: #f0cfcf; background: #fff8f8; }
.fin-cost p { color: #b03a3a; }
.fin-chip.c3 { border-color: #efc3c3; }

/* The row: the overview, and the accountant's column, which opens from nothing (`--side`, set by the script; 1 without it; `--side-w` its width). */
.sv-row { --side: 1; --side-w: 270px; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--side) * var(--side-w)); column-gap: calc(var(--side) * 40px); align-items: center; margin-top: 48px; }
.sv-side { min-width: 0; overflow: hidden; padding: 30px 0; margin: -30px 0; }
.fin-dash, .fin-acc { background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 22px 50px -30px rgba(16,40,50,.45); }
.js .fin-dash, .js .fin-acc { will-change: transform, opacity; }

.fin-dash { --grow: 1; padding: 18px 20px 20px; }
.fd-h { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.fd-h > .ic { font-size: 18px; color: var(--you); }
.fd-h b { font-weight: 600; }
.fd-h small { font-size: 13px; color: var(--dim); }
.fd-h .seg { margin-left: auto; }
.fd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.fd-tile { min-width: 0; padding: 12px 14px 13px; background: #f5f6f8; border-radius: 12px; }
.fd-tile p { font-size: 12.5px; font-weight: 550; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-tile b { display: block; margin-top: 3px; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-tile small { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-split { display: flex; gap: 2px; height: 5px; margin-top: 8px; border-radius: 3px; overflow: hidden; }
.fd-split i { display: block; background: #8aa6c4; }
.fd-split i + i { background: #b9a9f5; }
.fd-in { background: #eefaf7; }
.fd-in p { color: #0a7c6b; }
.fd-late p { color: #a96400; }
.fd-subs p { color: #5636c7; }
.fd-panels { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.fd-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-panel { min-width: 0; padding: 13px 15px 14px; border: 1px solid var(--line); border-radius: 12px; }
.fd-panel .fd-h { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-chart { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; height: 118px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.fd-m { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
/* The bars of a month grow as one stack. */
.fd-m span { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; width: 100%; height: 96px; transform: scaleY(var(--grow)); transform-origin: 50% 100%; }
.fd-m i { display: block; width: min(26px, 70%); height: var(--h); transform: none; transform-origin: 50% 100%; }
.fd-m i:last-child { border-radius: 4px 4px 0 0; }
.fd-m small { margin-top: 5px; font-size: 11px; color: var(--faint); }
.fd-ahead small { color: var(--faint); font-style: italic; } /* the hatched bars mark the months ahead; the label stays readable (4.7:1) */
.fd-k-in { background: #38c9ad; }
.fd-k-late { background: #f0b44c; }
.fd-k-due { background: #8aa6c4; }
.fd-k-sub { background: repeating-linear-gradient(135deg, #cfc4fa 0 4px, #e9e3fd 4px 8px); }
.fd-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: 11.5px; color: var(--dim); }
.fd-key span { background: none; }
.fd-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.fd-key .fd-k-in::before { background: #38c9ad; }
.fd-key .fd-k-late::before { background: #f0b44c; }
.fd-key .fd-k-due::before { background: #8aa6c4; }
.fd-key .fd-k-sub::before { background: #cfc4fa; }
.fd-margin ul, .fd-next ul, .fd-who ul { margin-top: 8px; }
.fd-margin li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f2f4; font-size: 13px; color: var(--dim); }
.fd-margin li b { font-weight: 550; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-margin li.fd-sum { color: var(--text); font-weight: 600; }
.fd-margin li.fd-net-row { border-bottom: 0; margin-top: 4px; padding: 8px 10px; background: var(--ink); border-radius: 9px; color: rgba(255,255,255,.75); }
.fd-margin li.fd-net-row b { color: #fff; font-size: 15px; }
.fd-next li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.fd-next li span { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-next li small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); }
.fd-next li b, .fd-who li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-who li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; margin-top: 4px; font-size: 13px; }
.fd-who li i { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: var(--w); background: #eefaf7; border-radius: 7px; transform: scaleX(var(--grow)); transform-origin: 0 50%; }
.fd-who li { z-index: 0; }
.fd-big { display: block; margin-top: 8px; font-size: 26px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.fd-deals > small { font-size: 12.5px; color: var(--faint); }
.fd-late-avg { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #f0f2f4; font-size: 12.5px; color: var(--dim); }
.fd-late-avg b { color: var(--text); font-weight: 600; }

.fin-acc { width: 270px; padding: 22px 22px 24px; text-align: left; }
.fa-top { display: flex; align-items: center; gap: 10px; }
.fa-ic { display: grid; place-items: center; width: 42px; height: 42px; background: #ece6fe; border-radius: 50%; font-size: 20px; color: #5636c7; }
.fin-acc h3 { margin-top: 14px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.016em; }
.fin-acc > p:last-child { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--dim); }

.sv-links { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* What each moment is worth, under the view: lit when it plays, ticked once passed. */
.sv-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.sv-values li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--text); transition: color .3s, border-color .3s, box-shadow .3s, background .3s; }
.sv-values .ic { font-size: 15px; color: var(--you); transition: color .3s; }
.js .sv-values li { color: var(--faint); }
.js .sv-values li .ic { color: #c3c8ce; }
.js .sv-values li.done { color: var(--text); }
.js .sv-values li.done .ic { color: var(--you); }
.js .sv-values li.on { color: var(--text); border-color: var(--you); background: #f2fcf9; box-shadow: 0 0 0 4px rgba(56,217,190,.18); }
.js .sv-values li.on .ic { color: var(--you); }

@media (max-width: 1240px) {
  .fd-tile b { font-size: 22px; }
}
@media (max-width: 1000px) {
  .sv-row { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 34px; }
  .sv-side { overflow: visible; padding: 0; margin: 0; }
  .fin-acc { width: auto; }
  .fd-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-deals { display: none; }
}
@media (max-width: 720px) {
  .fin-top { padding: 8px; }
  .fin-top .fin-board { --head: 54px; --row: 48px; min-height: 252px; }
  .fin-top .fin-chip, .fin-top .fin-task { left: calc(var(--col) * ((100% - 3 * var(--g)) / 4 + var(--g)) + 3px); width: calc((100% - 3 * var(--g)) / 4 - 6px); }
  .fin-top .fin-chip { height: 42px; }
  .fin-chip span small { display: none; }
  .sv-row { row-gap: 26px; }
  .fin-dash { padding: 13px 13px 14px; }
  .fd-h .seg, .fd-tile small, .fd-split { display: none; }
  .fd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
  .fd-tile { padding: 9px 11px; }
  .fd-tile b { font-size: 18px; }
  .fd-panels { grid-template-columns: minmax(0, 1fr); }
  .fd-wide, .fd-three { display: none; }
  .fin-acc { padding: 15px 17px 17px; }
  .fin-acc h3 { font-size: 17px; margin-top: 10px; }
  .fin-acc > p:last-child { font-size: 13.5px; }
  .sv-values { margin-top: 12px; }
  .js .sv-values li:not(.on) { display: none; }
}
/* The overview kept short enough that the board's foot stays in view above it (its line starts there): no inherited heading or
   list margins, tiles that keep their titles when the accountant squeezes them. */
.fin-dash .fd-h, .fin-dash p, .fin-dash ul { margin-top: 0; margin-bottom: 0; }
.fd-panel .fd-h { margin: 0; }
.fd-margin ul, .fd-next ul, .fd-who ul { margin-top: 8px; }
.fd-tile { padding: 11px 12px 12px; }
.fd-tile p { font-size: 12px; }
.sv-short [data-sv-drop] { display: none; }
/* On a wide screen the five fit one row, so the view keeps its height for the overview. */
@media (min-width: 1300px) {
  .sv-values { flex-wrap: nowrap; gap: 6px; margin-inline: -24px; }
  .sv-values li { height: 34px; padding: 0 11px; gap: 6px; font-size: 12.5px; white-space: nowrap; }
  .sv-values .ic { font-size: 14px; }
}
/* Margin gets the width its labels need once the accountant squeezes the overview; room under the overview at the end of the view;
   on a phone the one lit value is counted when the stop is measured. */
.fd-panels { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.fd-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.js .sv-cam { padding-bottom: 18px; }
@media (max-width: 1000px) {
  .fd-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fd-panels { grid-template-columns: minmax(0, 1fr); }
  .sv-values { min-height: 36px; }
}

/* ------------------------------------------------- Customer Care, round eighteen (Yavor, 2026-11-07) */

/* Told as Finance is (storyView): the Customer Care list as things happen, its Overview, one customer's Health score in six areas. */
.stage-cc { padding: 30px 40px 26px; background-color: var(--tint); background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; overflow: clip; }
.stage-cc .sv-row { --side-w: 300px; }
.cc-top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 18px 40px -26px rgba(16,40,50,.42); text-align: left; }
.cc-list { min-width: 0; }
.cc-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cc-head b { font-weight: 600; }
.cc-head .seg { margin-left: auto; }
.cc-tabs { display: flex; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 550; color: var(--dim); }
.cc-tabs span { padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.cc-tabs .on { background: var(--ink); color: #fff; }
.cc-tabs i { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; background: rgba(255,255,255,.18); border-radius: 999px; font-style: normal; font-size: 11px; transition: background .3s; }
.cc-tabs i.on { background: #e0a100; color: var(--ink); }
.cc-row { display: grid; grid-template-columns: 18px minmax(0, 1.5fr) 78px 52px 78px minmax(0, .9fr); gap: 10px; align-items: center; min-height: 52px; padding: 6px 8px; font-size: 13px; }
.cc-row-h { min-height: 30px; margin-top: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; }
.cc-rows { --row: 54px; position: relative; height: calc(5 * var(--row)); }
.cc-rows .cc-row { position: absolute; left: 0; right: 0; top: calc(var(--slot) * var(--row)); border-bottom: 1px solid #eff1f3; transition: top .6s cubic-bezier(.5, 0, .2, 1), background .3s; }
.cc-rows .cc-row.attn { background: #fffaf0; }
.cc-attn { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #e0a100; color: var(--ink); font-style: normal; font-size: 11px; font-weight: 800; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.cc-row.attn .cc-attn { opacity: 1; transform: none; }
.cc-name { min-width: 0; line-height: 1.25; }
.cc-name b { display: block; color: #0d6b78; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-name small { display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-health { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.cc-health i { width: 9px; height: 9px; border-radius: 50%; background: #1c9d63; }
.cc-health.h-amber i { background: #e0a100; }
.cc-health.h-red i { background: #d64545; }
.cc-score { justify-self: start; min-width: 34px; padding: 2px 7px; border-radius: 7px; background: #e7f6ee; color: #146c43; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; transition: background .3s, color .3s; }
.cc-score.mid { background: #fff3d6; color: #8a5a00; }
.cc-score.lo { background: #fde4e4; color: #b32f2f; }
.cc-margin { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-last { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-last.late { color: #b32f2f; font-weight: 600; }
.cc-chip { position: absolute; right: 8px; top: 50%; z-index: 1; padding: 4px 10px; background: #fff6e3; border: 1px solid #e5b45a; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #7a4f00; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(16,24,40,.35); opacity: 0; transform: translateY(-50%) translateX(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cc-chip.on { opacity: 1; transform: translateY(-50%); }
.cc-chip.differ { background: #fde4e4; border-color: #eea7a7; color: #9b2626; }
.cc-chip.grow { background: #f0ebff; border-color: #cfc2fb; color: #5636c7; }
.cc-chip small { margin-left: 6px; font-weight: 450; opacity: .8; }
.cc-tasks { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0 14px; border-left: 1px solid var(--line); }
.cc-tasks-h { font-size: 12.5px; font-weight: 650; color: var(--dim); }
.cc-task { display: flex; gap: 10px; padding: 11px 12px; background: var(--ink); border-radius: 11px; color: #fff; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.3, .35, 1); }
.js .cc-task { opacity: 0; transform: translateY(8px) scale(.97); }
.cc-task.on { opacity: 1; transform: none; }
.cc-task i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; font-style: normal; font-size: 11px; color: transparent; transition: background .25s, border-color .25s, color .25s; }
.cc-task.ticked i { background: var(--mint); border-color: var(--mint); color: #05241e; }
.cc-task.ticked b { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.5); }
.cc-task p { min-width: 0; font-size: 13px; line-height: 1.3; }
.cc-task b { display: block; font-weight: 600; }
.cc-task small { display: block; margin-top: 3px; font-size: 11.5px; color: rgba(255,255,255,.72); }

/* The Overview. */
.cc-dash { --grow: 1; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 22px 50px -30px rgba(16,40,50,.45); text-align: left; }
.js .cc-dash, .js .cc-card { will-change: transform, opacity; }
/* No inherited margins, at no weight of its own (:where), so the margins below need no !important. */
:where(.cc-dash .fd-h, .cc-dash p, .cc-dash ul, .cc-card p) { margin-top: 0; margin-bottom: 0; }
.cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cc-grid-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: 10px; }
.cc-dash .fd-panel .fd-h { margin: 0 0 8px; }
.cc-big { display: flex; align-items: baseline; gap: 6px; }
.cc-big b { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.cc-big small { font-size: 12.5px; color: var(--faint); }
.cc-sub { margin-top: 8px; font-size: 12px; color: var(--dim); }
.cc-bar { display: flex; gap: 2px; height: 10px; margin-top: 10px; border-radius: 5px; overflow: hidden; background: #f0f2f4; }
.cc-bar i { flex: var(--w) 0 0; transform: scaleX(var(--grow)); transform-origin: 0 50%; }
.cc-bar-thin { height: 6px; margin-top: 6px; opacity: .75; }
.cc-bar .g { background: #1c9d63; } .cc-bar .a { background: #e0a100; } .cc-bar .r { background: #d64545; }
.cc-bar .n { background: #7c5cf0; } .cc-bar .m { background: #38c9ad; } .cc-bar .s { background: #8aa6c4; }
.cc-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 7px; font-size: 11.5px; color: var(--dim); }
.cc-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; vertical-align: 0; }
.cc-legend .g::before { background: #1c9d63; } .cc-legend .a::before { background: #e0a100; } .cc-legend .r::before { background: #d64545; }
.cc-legend .n::before { background: #7c5cf0; } .cc-legend .m::before { background: #38c9ad; } .cc-legend .s::before { background: #8aa6c4; }
.cc-differ { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 9px; background: #fdf0f0; border-radius: 8px; font-size: 12px; font-weight: 550; color: #9b2626; }
.cc-differ b { font-variant-numeric: tabular-nums; }
.cc-reasons { margin-top: 8px; }
.cc-reasons li { position: relative; z-index: 0; display: flex; justify-content: space-between; padding: 5px 8px; margin-top: 4px; font-size: 12.5px; }
.cc-reasons li i { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: var(--w); background: #fff3d6; border-radius: 7px; transform: scaleX(var(--grow)); transform-origin: 0 50%; }
.cc-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 76px; margin-top: 10px; }
.cc-months span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cc-months i { display: block; width: min(18px, 80%); height: var(--h); background: #7c5cf0; border-radius: 4px 4px 0 0; transform: scaleY(var(--grow)); transform-origin: 50% 100%; }
.cc-months small { margin-top: 4px; font-size: 10.5px; color: var(--faint); }
.cc-kept { position: relative; }
.cc-ring { display: block; width: 92px; height: 92px; margin: 2px auto 0; transform: rotate(-90deg); }
.cc-ring circle { fill: none; stroke-width: 9; }
.cc-ring-bg { stroke: #eef0f2; }
.cc-ring-on { stroke: #1c9d63; stroke-linecap: round; stroke-dasharray: var(--part) 1; }
.cc-ring-n { position: absolute; left: 0; right: 0; top: 66px; text-align: center; line-height: 1; }
.cc-ring-n b { display: block; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cc-ring-n small { font-size: 11px; color: var(--faint); }
.cc-kept .cc-sub { text-align: center; }
.cc-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-lines p { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-lines b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cc-lines svg { display: block; width: 100%; height: 44px; margin-top: 4px; overflow: visible; }
.cc-lines path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.cc-l-nps { stroke: #7c5cf0; }
.cc-l-csat { stroke: #38c9ad; }
.cc-times { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f2f4; font-size: 12px; color: var(--dim); }
.cc-times b { font-size: 24px; font-weight: 650; color: #0a7c6b; }
.cc-growth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.cc-growth-h { margin-right: auto; font-weight: 600; }
.cc-growth span:not(.cc-growth-h) { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; background: #f0ebff; border-radius: 999px; color: #5636c7; font-weight: 550; }
.cc-growth span b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; background: #fff; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* One customer's Health score, in its six areas: now over last month. */
.cc-card { --grow: 1; width: 300px; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 22px 50px -30px rgba(16,40,50,.45); text-align: left; }
.cc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; }
.cc-card-h b { font-weight: 600; color: #0d6b78; }
.cc-card-sub { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.cc-card-score { display: flex; align-items: baseline; gap: 10px; }
.cc-card-score b { font-size: 40px; line-height: 1.05; font-weight: 650; letter-spacing: -.03em; color: #b32f2f; font-variant-numeric: tabular-nums; }
.cc-card-score small { font-size: 13px; color: var(--faint); }
.cc-radar { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.cc-rg { fill: none; stroke: #e6e9ec; stroke-width: 1; }
.cc-ax { stroke: #e6e9ec; stroke-width: 1; }
.cc-radar .cc-last { fill: rgba(28,157,99,.06); stroke: #1c9d63; stroke-width: 1.5; stroke-dasharray: 4 3; }
.cc-now { fill: rgba(214,69,69,.2); stroke: #d64545; stroke-width: 2; stroke-linejoin: round; transform-box: view-box; transform-origin: 120px 104px; transform: scale(var(--grow)); }
.cc-radar text { font-size: 10.5px; fill: var(--dim); font-family: inherit; }
.cc-card-key { display: flex; gap: 14px; justify-content: center; font-size: 11.5px; color: var(--dim); }
.cc-card-key span::before { content: ""; display: inline-block; width: 12px; height: 0; margin-right: 5px; vertical-align: 3px; border-top: 2px solid #d64545; }
.cc-card-key .cc-k-last::before { border-top: 2px dashed #1c9d63; }
.cc-differ-on { justify-content: center; }
.cc-card-btns { display: flex; gap: 6px; margin-top: 12px; }

.stage-cc .sv-values { margin-top: 18px; }
@media (min-width: 1300px) {
  .stage-cc .sv-values { margin-inline: -40px; }
}
@media (max-width: 1240px) {
  .stage-cc { padding-inline: 28px; }
  .cc-top { grid-template-columns: minmax(0, 1fr) 240px; }
  .cc-row { grid-template-columns: 18px minmax(0, 1.5fr) 74px 50px minmax(0, .9fr); }
  .cc-row > .cc-margin, .cc-row-h > span:nth-child(5) { display: none; }
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-grid-3 .cc-worth { display: none; }
}
@media (max-width: 1000px) {
  .cc-top { grid-template-columns: minmax(0, 1fr); }
  .cc-tasks { flex-direction: row; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .cc-tasks-h { display: none; }
  .cc-task { flex: 1; }
  .cc-card { width: auto; }
}
@media (max-width: 720px) {
  .stage-cc { padding: 16px 10px 18px; }
  .cc-top { padding: 8px; }
  .cc-head .seg, .cc-tabs span:nth-child(n+3) { display: none; }
  .cc-row { grid-template-columns: 16px minmax(0, 1fr) 44px minmax(0, .8fr); gap: 6px; padding: 6px 4px; }
  .cc-row > .cc-health, .cc-row-h > span:nth-child(3), .cc-row-h > span:nth-child(5) { display: none; }
  .cc-chip { right: 4px; font-size: 10.5px; padding: 3px 8px; }
  .cc-chip small { display: none; }
  .cc-tasks { flex-direction: column; }
  .cc-dash { padding: 13px; }
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cc-grid > :nth-child(3), .cc-grid-3, .cc-growth { display: none; }
  .cc-big b { font-size: 22px; }
}
/* A row's badge stands where its owner's name was, so it covers none of the row's figures; the card narrower and the Overview's titles
   wrapping, so the squeeze cuts no words; the value strip within the stage. */
.cc-name { position: relative; }
.cc-name small { transition: opacity .25s; }
.cc-name .cc-chip { position: absolute; left: 0; right: auto; top: auto; bottom: -3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; font-size: 11px; transform: translateY(4px); }
.cc-name .cc-chip.on { transform: none; }
/* The owner's line only gives way to a badge, never the badge's own why. */
.cc-name:has(.cc-chip.on) small { opacity: 1; }
.cc-name:has(.cc-chip.on) > small { opacity: 0; }
.cc-chip small { display: inline; margin-top: 0; font-size: inherit; color: inherit; }
.cc-dash .fd-panel .fd-h { font-size: 13px; white-space: normal; overflow: visible; line-height: 1.25; }
.cc-radar text { font-size: 10px; }
@media (min-width: 1300px) {
  .stage-cc .sv-values { margin-inline: 0; }
}
/* A second level an overview drops on short screens. */
.sv-shorter [data-sv-drop2] { display: none; }
@media (max-width: 720px) {
  .cc-rows { --row: 62px; }
}
/* Without the script, a section's top still lands under the header (and under the side menu's row on a phone): the html's padding
   and the section's margin together are that height (measured: header 65px; 65px plus the 50px row up to 1000px; 59px plus 50px on a
   phone). The script measures it at each press instead. */
.rs { scroll-margin-top: calc(var(--hd-h) - 84px); }
@media (max-width: 1000px) { .rs { scroll-margin-top: calc(var(--hd-h) + 50px - 128px); } }

/* ------------------------------------------------- phone review (2026-11-07) */

/* The pipeline upright on a narrow window (crm-modern.js, the branch): 400 by 714, so a phone draws it at about 0.92, not 0.38. */
.bx.is-v { aspect-ratio: 400 / 714; }
.bx.is-v .bx-scene { width: 400px; height: 714px; }
.bx.is-v .bx-chart { width: 376px; height: 570px; }
.bx.is-v .bx-name { grid-template-columns: 1fr 1fr; }
.bx.is-v .bx-add { right: auto; top: auto; left: 50%; bottom: -10px; margin: 0 0 0 -10px; }
.bx.is-v .bx-n { font-size: 12.5px; }
.bx.is-v .bx-card b { font-size: 15px; }
.bx.is-v .bx-meta { font-size: 12.5px; }
.bx.is-v .bx-meta .ic { font-size: 13px; }
.bx.is-v .bx-way { font-size: 12.5px; width: 94px; height: 26px; }
.bx.is-v .bx-top, .bx.is-v .bx-name span, .bx.is-v .bx-foot .mini { font-size: 14px; }

/* Cards over the window where shrinking it would make its words unreadable: the window keeps its size and dims behind them. */
.bx-show.is-over .bx-win { transition: none; }
.js .bx-show.is-over .bx-notes { gap: 10px; padding: 0 6px 6px; }
.bx-show.is-over .bx-note { box-shadow: 0 24px 50px -16px rgba(16,40,50,.5); }
.rs-out .bx-show.is-over .bx-note { box-shadow: 0 24px 50px -16px #000; }

/* Phone review (2026-11-07): nothing under 11px where it is read, no stop scaled down, taps of 32px and more. */
@media (max-width: 720px) {
  /* The hero's window fits the screen without being scaled: no app bar, a shorter list. */
  .win-hero .app-top { display: none; }
  .hero-main { height: 290px; }
  /* Outreach's days. */
  .sq-step small { font-size: 11.5px; }
  .sq-step b { font-size: 12.5px; }
  /* Finance. */
  .fin-task { font-size: 11.5px; }
  .fin-col p { font-size: 11.5px; }
  .fd-tile p { white-space: normal; }
  /* Customer Care: the name has the room, a badge says only its name, the radar's areas can be read. */
  .cc-row { grid-template-columns: 16px minmax(0, 1fr) 40px 74px; }
  .cc-name b { font-size: 13px; }
  .cc-chip small { display: none; }
  .cc-last { font-size: 12px; }
  .cc-radar text { font-size: 12px; }
  /* AI in the fabric on a phone: the words beside the picture, tighter. */
  .fab-list { padding: 28px 20px 4px; }
  .fab-item { padding-top: 10px; padding-bottom: 12px; }
  /* No rigid tier: the months. */
  .fx-months { font-size: 11.5px; }
  /* Footer: links you can tap. */
  .ft-col li { padding: 0; }
  .ft-col a, .ft-low a { display: inline-block; padding: 8px 0; }
  /* The side menu's row says it scrolls: its end fades. */
  .rail { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
}
@media (max-width: 720px) {
  .fab-list { padding-top: 18px; }
}
@media (max-width: 720px) {
  .fab-b { font-size: 15px; line-height: 1.38; }
}
@media (max-width: 720px) {
  /* Second pass at 360 wide (its stops are scaled to 0.85 to 0.9): the last texts under 11px brought over it. */
  .bx.is-v .bx-n, .bx.is-v .bx-meta, .bx.is-v .bx-way { font-size: 13.5px; }
  .bx.is-v .bx-way { width: 104px; height: 28px; }
  .sq-step small, .sq-msg-h em { font-size: 12.5px; }
  .win-hero .chip { font-size: 12.5px; }
  .win-hero .mini { font-size: 13.5px; }
  .os-line { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .os-when { font-size: 12px; }
  /* "Customer Care" is wider than its column on a phone: it takes two lines, the icon beside both. */
  .os-src { font-size: 12.5px; line-height: 1.1; }
  .os-text { font-size: 13px; }
  .fine a { display: inline-block; padding: 8px 0; }
}

/* Multi-step outreach campaigns: the campaign in a window of its own on the dark (Yavor, 2026-11-07: "frame the left side"), so it
   reads as one thing beside the two cards, and before them as the app's own screen. */
.stage-sq .bx-win { padding: 24px 26px 26px; background: linear-gradient(180deg, #15191c, #101315); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; box-shadow: 0 34px 80px -34px #000, inset 0 1px 0 rgba(255,255,255,.04); }
@media (max-width: 720px) {
  .stage-sq .bx-win { padding: 12px 10px 12px; border-radius: 14px; }
}

/* ------------------------------------------------- four ways in (Yavor, 2026-11-07) */

/* The four ways on the left, lit as each plays, the same deals in one window on the right: list, board, Bamya AI over the board, and
   the reader's own AI app beside it. */
.w4-stage { padding: 40px 44px 44px; background-color: var(--tint); background-image: radial-gradient(#dfe3e7 1px, transparent 1.2px); background-size: 18px 18px; overflow: clip; }
.w4-split { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 40px; align-items: center; }
.w4-list { margin: 0; padding: 0; list-style: none; text-align: left; }
.w4-item { position: relative; padding: 16px 0 16px 20px; border-left: 2px solid var(--line); }
.w4-item b { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 550; letter-spacing: -.012em; color: var(--faint); transition: color .2s; }
.w4-item b i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #eef0f2; font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--dim); transition: background .2s, color .2s; }
.w4-item span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15.5px; line-height: 1.45; color: var(--dim); transition: max-height .4s ease, opacity .35s ease, margin-top .35s ease; }
.w4-item.on b { color: var(--text); }
.w4-item.on b i { background: var(--ink); color: #fff; }
.w4-item.on span { max-height: 140px; margin-top: 8px; opacity: 1; }
.w4-item.on::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--you); transform-origin: top; transform: scaleY(var(--along, 0)); }
html:not(.js) .w4-item span { max-height: none; opacity: 1; margin-top: 8px; }

.w4-show { position: relative; min-width: 0; padding-bottom: 46px; }
.w4-win { box-shadow: 0 30px 60px -28px rgba(16,40,50,.5); text-align: left; }
.w4-app { position: relative; height: 410px; overflow: hidden; background: #fff; font-size: 13px; }
.w4-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.w4-views { display: inline-flex; padding: 3px; background: #eceef0; border-radius: 9px; font-size: 12.5px; font-weight: 600; }
.w4-views span { padding: 4px 11px; border-radius: 7px; color: var(--faint); transition: background .25s, color .25s; }
.w4-views span.on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.w4-pane { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; padding: 12px 16px; transition: opacity .3s; }
.w4-pane.off { opacity: 0; pointer-events: none; }
.w4-tools { display: flex; gap: 6px; min-height: 28px; }
.w4-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 550; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.w4-chip.on { opacity: 1; transform: none; border-color: #86d9c6; background: #f2fcf9; color: #0a7c6b; }
.w4-row { display: grid; grid-template-columns: 18px minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .9fr); gap: 10px; align-items: center; min-height: 44px; padding: 0 6px; }
.w4-row-h { min-height: 32px; margin-top: 6px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; }
.w4-rows { --row: 46px; position: relative; height: calc(5 * var(--row)); }
.w4-rows .w4-row { position: absolute; left: 0; right: 0; top: calc(var(--slot) * var(--row)); border-bottom: 1px solid #eff1f3; transition: top .45s cubic-bezier(.5, 0, .2, 1), opacity .3s, background .25s; }
.w4-row.gone { opacity: 0; }
.w4-row.ticked { background: #f2fcf9; }
.w4-row.ticked .cb { background: var(--you); border-color: var(--you); box-shadow: inset 0 0 0 2px #fff; }
.w4-name { min-width: 0; font-weight: 600; color: #0d6b78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w4-val { font-variant-numeric: tabular-nums; }
.w4-own { white-space: nowrap; transition: color .3s; }
.w4-own.changed { color: #0a7c6b; font-weight: 600; }
.w4-act { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; background: var(--ink); border-radius: 11px; color: #fff; font-size: 12.5px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.w4-act.on { opacity: 1; transform: none; }
.w4-act b { font-weight: 600; }
.w4-menu { display: flex; gap: 4px; margin-right: auto; }
.w4-menu span { padding: 4px 9px; border-radius: 7px; color: rgba(255,255,255,.62); white-space: nowrap; transition: background .2s, color .2s; }
.w4-menu span.on { background: rgba(255,255,255,.14); color: #fff; }
.w4-act .mini-dark { background: #fff; color: var(--ink); border-color: #fff; transition: transform .12s; }
.w4-act .mini-dark.pressed { transform: scale(.92); }

.w4-board { --cols: 4; --g: 10px; --head: 44px; --row: 66px; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--g); height: 100%; }
.w4-col { padding: 9px 10px; background: #f5f6f8; border-radius: 11px; }
.w4-col p { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12.5px; }
.w4-col b { font-weight: 650; }
.w4-col small { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w4-card { position: absolute; z-index: 1; left: calc(var(--col) * ((100% - (var(--cols) - 1) * var(--g)) / var(--cols) + var(--g)) + 6px); top: calc(var(--head) + var(--slot) * var(--row)); width: calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols) - 12px); min-height: 56px; padding: 8px 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 4px 10px -8px rgba(16,24,40,.35); transition: left .5s cubic-bezier(.5, 0, .2, 1), top .5s cubic-bezier(.5, 0, .2, 1), box-shadow .2s, transform .2s; }
.w4-card b { display: block; font-size: 12.5px; font-weight: 600; color: #0d6b78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w4-card small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w4-card.dragging { z-index: 3; transition: none; transform: rotate(2.5deg) translateY(-5px); box-shadow: 0 20px 36px -16px rgba(16,24,40,.5); border-color: #86d9c6; }
.w4-card.fresh { border-color: #86d9c6; box-shadow: 0 0 0 3px rgba(56,217,190,.18); }
/* The follow-up badge sits on the card's foot, so a card keeps its height and the column its spacing. */
.w4-task { position: absolute; right: 6px; bottom: -9px; display: none; align-items: center; gap: 4px; margin: 0; padding: 2px 7px; width: fit-content; background: #f0ebff; border: 1px solid #d9cffc; border-radius: 999px; box-shadow: 0 4px 10px -6px rgba(86,54,199,.5); font-style: normal; font-size: 11px; font-weight: 600; color: #5636c7; white-space: nowrap; }
.w4-task.on { display: inline-flex; animation: rise .3s ease; }
.w4-ptr { position: absolute; left: 0; top: 0; z-index: 4; width: 20px; height: 24px; overflow: visible; pointer-events: none; transform-origin: 2px 2px; filter: drop-shadow(0 2px 3px rgba(16,24,40,.3)); opacity: 0; }
.w4-toast { position: absolute; left: 50%; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--ink); border-radius: 10px; color: #fff; font-size: 12.5px; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .3s; }
.w4-toast.on { opacity: 1; transform: translate(-50%, 0); }
.w4-toast span { font-weight: 650; color: var(--mint); }

.w4-ai { position: absolute; right: 0; top: 48px; bottom: 0; z-index: 6; display: flex; flex-direction: column; width: 320px; background: #fdfdfe; border-left: 1px solid var(--line); box-shadow: -20px 0 40px -30px rgba(16,24,40,.4); transform: translateX(105%); }
.w4-ai-h { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.w4-ai-h .ic { font-size: 17px; color: var(--them); }
.w4-ai-h b { font-weight: 600; }
.w4-ai-h small { margin-left: auto; font-size: 12px; color: var(--dim); }
.w4-ai-body { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; overflow: hidden; }
.w4-ai-body .ai-you { margin: 0 0 0 auto; }
.w4-ai-body .ai-you span:empty::after { content: "\200b"; }
.w4-ans { padding: 9px 11px; background: #fff; border: 1px solid var(--line-strong); border-radius: 11px; font-size: 13px; line-height: 1.4; animation: rise .3s ease; }
.w4-ans b { font-weight: 600; }
.w4-ai-body .ai-change, .w4-ai-body .ai-done { animation: rise .3s ease; }
.w4-ai-body [hidden] { display: none !important; }
[data-w4-aiapply] { transition: transform .12s; }
[data-w4-aiapply].pressed { transform: scale(.92); }

.w4-ext { position: absolute; left: -22px; bottom: 0; z-index: 8; width: min(380px, 70%); padding: 14px 16px 16px; background: #111417; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); color: #e9edf0; text-align: left; opacity: 0; transform: translateY(24px); pointer-events: none; }
.w4-ext-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.w4-ext-h i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(56,217,190,.2); }
.w4-ext-h b { font-weight: 600; color: #fff; }
.w4-ext-h small { font-size: 12px; color: #9aa5ab; }
.w4-mcp { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 9px; background: rgba(167,139,250,.16); border: 1px solid rgba(167,139,250,.4); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #cbbfff; }
.w4-mcp .ic { font-size: 12px; }
.w4-ext-you { width: fit-content; max-width: 92%; min-height: 34px; margin: 12px 0 0 auto; padding: 8px 12px; background: #2a2f35; border-radius: 12px 12px 3px 12px; font-size: 13.5px; line-height: 1.35; color: #fff; }
.w4-tool { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; background: rgba(56,217,190,.1); border: 1px solid rgba(56,217,190,.35); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--mint); opacity: 0; transition: opacity .3s; }
.w4-tool.on { opacity: 1; }
.w4-reply { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: #d5dbdf; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.w4-reply.on { opacity: 1; transform: none; }

@media (max-width: 1240px) {
  .w4-stage { padding: 32px 28px 36px; }
  .w4-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .w4-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .w4-item { padding: 10px 0 0 14px; }
  .w4-item b { font-size: 16px; }
  .w4-item span { font-size: 14px; }
  .w4-ext { left: 10px; }
}
@media (max-width: 720px) {
  .w4-stage { padding: 16px 10px 20px; }
  .w4-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .w4-item:not(.on) { display: none; }
  .w4-item { padding: 4px 0 4px 14px; }
  .w4-app { height: 420px; }
  .w4-bar { padding: 0 10px; }
  .w4-pane { padding: 10px; }
  .w4-row { grid-template-columns: 16px minmax(0, 1fr) 70px 62px; gap: 6px; }
  .w4-row > .w4-stg, .w4-row-h > span:nth-child(3) { display: none; }
  .w4-name { font-size: 13px; }
  .w4-act { left: 10px; right: 10px; flex-wrap: wrap; gap: 6px; }
  .w4-menu span:not([data-w4-pick]) { display: none; }
  .w4-board { --cols: 3; --row: 72px; }
  .w4-board > .w4-col:nth-child(4) { display: none; }
  .w4-card { min-height: 62px; padding: 7px 8px; }
  .w4-card b { white-space: normal; line-height: 1.2; }
  .w4-ai { width: 100%; }
  .w4-ext { left: 6px; right: 6px; width: auto; }
}
@media (max-width: 720px) {
  .w4-task span { display: none; }
  .w4-col p { flex-direction: column; align-items: flex-start; gap: 1px; }
  .w4-board { --head: 52px; }
}

/* No rigid tier (Yavor, 2026-11-07): the words and the year side by side, half each, and the card on the scroll like the rest. */
.rs-big-fx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.rs-big-fx .fx { width: 100%; max-width: none; margin: 0; }
.rs-big-fx .fx .wbar { height: 34px; font-size: 12.5px; }
.rs-big-fx .fx-chart { --label: 44px; margin: 14px 16px 0; }
.rs-big-fx .fx-months { font-size: 12px; }
.rs-big-fx .fx-row { min-height: 42px; }
.rs-big-fx .fx-name { font-size: 13.5px; }
.rs-big-fx .fx-cap { font-size: 14.5px; }
@media (max-width: 1240px) {
  .rs-big-fx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 1000px) {
  .rs-big-fx { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ------------------------------------------------- review (2026-11-07) */

/* On a phone every press is at least 44px, each drawn as before: a transparent area round it. Where buttons wrap in rows a few
   pixels apart, the areas sit under every button's own face (z-index -1 in the row's stacking context), so a press on a button
   is always that button. */
@media (max-width: 720px) {
  .rail a { position: relative; }
  .rail a::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .cmp-t thead .mini, .cmp-seg button { position: relative; }
  .cmp-t thead .mini::after, .cmp-seg button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
  .bl-filter { isolation: isolate; }
  .cmp-pick button, .bl-filter button { position: relative; }
  .cmp-pick button::after, .bl-filter button::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; z-index: -1; }
  /* A link inside the legal sentence stays in its line (an inline link needs no 44px), so the lines keep an even spacing. */
  .ft-legal a { display: inline; padding: 0; }
  /* The note's "i": a 44px button whose transparent border is the target, its margins taking the border back so the row is as it was.
     2px more of it above than below, as the next row (positioned, later) lies over what passes its own top; the radii keep the
     14px circle round. */
  .cmp-i { width: 44px; height: 44px; margin: -17px -15px -13px -9px; border: solid transparent; border-width: 17px 15px 13px; border-radius: 22px / 24px 24px 20px 20px; background-clip: padding-box; }
}

/* Review, 2026-11-07. The page's own scroll anchoring moved a #section landing by 2 to 6px in about 2 loads of 15 while
   the stops sized themselves; the script keeps the reader's place itself (crm-modern.js, the remeasure anchor). */
html, body { overflow-anchor: none; }
/* After a landing the script focuses the section (tabindex -1) so the next Tab goes into it; a mouse press there must not
   draw the browser's ring round the whole section. Keyboard focus still shows it. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* AI Insight (owner, 2026-11-07: "Now care and finance have their own AI advisers", then "make the AI insight pushaway (and resize)
   the other containers around and to make it bigger. and use AI Insight as name"): the product's Insight window, arriving last in
   Finance's and Customer Care's story (home.html's insight macro, `data-sv-card2`). `--ins` (0 to 1, set by crm-modern.js storyView;
   1 without the script) opens its room: beside the overview the side column widens and the overview narrows, the card above folds
   (the accountant to its title, Ashby's radar smaller, its buttons gone), and AI Insight grows in under it; under the overview (a
   narrow screen) it grows in under the card. */
.sv-row { --ins: 0; --side-w: calc(270px + var(--ins) * 150px); --ins-w: 420px; }
.stage-cc .sv-row { --side-w: calc(300px + var(--ins) * 130px); --ins-w: 430px; }
html:not(.js-on) .sv-row { --ins: 1; }
.sv-side { position: relative; align-self: stretch; }
.sv-ins { width: var(--ins-w); max-height: calc(var(--ins) * 700px); margin-top: calc(var(--ins) * 18px); overflow: hidden; text-align: left;
          background: #fff; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 26px 56px -26px rgba(16,40,50,.5); }
.js .sv-ins { will-change: opacity; }
.sv-ins > * { margin-inline: 20px; }
.si-top { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.si-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; background: #ece6fe; border-radius: 50%; font-size: 18px; color: #5636c7; }
.si-brand { font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.si-top .chip { margin-left: auto; }
.si-name { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-size: 15.5px; }
.si-name b { min-width: 0; font-weight: 600; color: #0d6b78; }
.si-tone { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.si-tone i, .si-areas i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #d64545; }
.si-watch i { background: #e0a40e; }
.si-good i { background: #1c9d63; }
.si-text { margin-top: 5px; font-size: 15px; line-height: 1.45; color: var(--text); }
.si-areas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding: 0; list-style: none; }
.si-areas li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); white-space: nowrap; }
.si-job { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--dim); }
.si-job b { font-weight: 600; color: var(--text); }
.si-step { margin-top: 14px; padding: 11px 13px 12px; background: #f7f9fa; border: 1px solid var(--line); border-radius: 11px; }
.si-when { font-size: 12px; font-weight: 600; color: #0d6b78; }
.si-title { margin-top: 2px; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--text); }
.si-step .mini { margin-top: 9px; }
.si-foot { margin-top: 12px; margin-bottom: 16px; font-size: 11.5px; line-height: 1.3; color: var(--faint); }
:where(.sv-ins p, .sv-ins ul) { margin-top: 0; margin-bottom: 0; }
/* Beside the overview, the card above folds as AI Insight opens. */
@media (min-width: 1001px) {
  .fin-acc, .cc-card { width: var(--side-w); }
  .fin-acc > p:last-child { max-height: calc((1 - var(--ins)) * 130px); opacity: calc(1 - var(--ins)); overflow: hidden; }
  .cc-radar { height: calc(195px - var(--ins) * 85px); }
  .cc-card-btns { max-height: calc((1 - var(--ins)) * 40px); margin-top: calc((1 - var(--ins)) * 12px); opacity: calc(1 - var(--ins)); overflow: hidden; }
  .cc-card-key { max-height: calc((1 - var(--ins)) * 24px); opacity: calc(1 - var(--ins)); overflow: hidden; }
}
@media (max-width: 1000px) {
  .sv-ins { width: auto; }
}
@media (max-width: 720px) {
  .sv-ins > * { margin-inline: 15px; }
  .si-text { font-size: 14px; }
  .si-areas li { font-size: 12.5px; }
}
/* Seven values on one row at 1300px and wider (AI Insight made Customer Care's seventh): a little tighter, never cut. */
@media (min-width: 1300px) {
  .sv-values { gap: 3px; }
  .sv-values li { padding: 0 7px; gap: 5px; font-size: 11.5px; }
  .sv-values .ic { font-size: 12.5px; }
}
/* Every section beside the side menu (owner, 2026-11-08: "all sections should have a menu on the side and all should have item in
   the menu"). AI in the fabric and the closer are dark the whole width, behind the menu's column too, as AI-native and Outreach are:
   a shadow reaching out sideways (their own overflow stays hidden for what they draw inside), clipped to their own height. The menu
   turns light-on-dark over them (crm-modern.js, the dark header). */
.rail-body .dz, .rail-body .closer { box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax); }
.rail-body .dz-frame { border-inline: 0; }
.rail-body .dz { border-bottom: 1px solid var(--dark-line); }

/* ------------------------------------------------- A pulsing arrow when the reader stops (owner, 2026-11-08) */

/* At the foot of the screen after two seconds without a scroll (crm-modern.js, 'the scroll nudge'): dark with a light ring, so it reads
   on the light sections and on the dark ones; a mint ring pulses out and the arrow bobs. Gone the moment the page moves. */
.nudge { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; place-items: center;
         width: 46px; height: 46px; margin-left: -23px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.26);
         background: rgba(12,14,16,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
         box-shadow: 0 12px 30px -10px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(12px);
         transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.nudge.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.nudge:hover { background: rgba(12,14,16,.94); }
.nudge svg { width: 20px; height: 20px; }
.nudge::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }
.nudge.on::before { animation: nudge-ring 1.6s ease-out infinite; }
.nudge.on svg { animation: nudge-bob 1.6s ease-in-out infinite; }
@keyframes nudge-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes nudge-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .nudge.on::before, .nudge.on svg { animation: none; }
}