/* ==========================================================================
   Nexora Digital Systems — styles.css (light / premium)
   01 Fonts · 02 Tokens · 03 Base · 04 Layout · 05 Buttons · 06 Header · 07 Hero + flow
   08 Sections · 09 Tables · 10 Pricing · 11 FAQ · 12 Audit · 13 Footer · 14 Motion · 15 Responsive
   Rules: no blur/backdrop/blend filters, animation only on transform/opacity/stroke of small SVG,
          structure comes from hairlines and type, not from stacks of identical cards.
   ========================================================================== */

/* 01 Fonts (self-hosted: no third-party requests, CSP-friendly) ------------- */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/source-serif-4-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Monospace labels (status bars, code tags): self-hosted so Mac (SF Mono) and Windows (Consolas) look identical */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02 Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --paper: #f5f6f8;
  --surface: #ffffff;
  --wash: #edf1fb;
  --ink: #0d1829;
  --ink-2: #465268;
  --ink-3: #5c677c;
  --line: #dce1e9;
  --line-2: #c3cbd8;
  --accent: #1d4ed8;
  --accent-2: #1b3fb0;
  --accent-soft: #cfdbf8;
  --ok: #0e7a55;
  --danger: #b42318;
  --warn: #8a5300;

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-num: "Source Serif 4", Georgia, "Times New Roman", serif;
  --r-lg: 16px;
  --r-md: 10px;
  --shadow: 0 1px 2px rgba(13, 24, 41, 0.04), 0 18px 40px -18px rgba(13, 24, 41, 0.18);
  --shadow-sm: 0 1px 2px rgba(13, 24, 41, 0.06), 0 6px 16px -8px rgba(13, 24, 41, 0.2);
  --max: 1200px;
  --gutter: 24px;
  --header-h: 68px;
  --navrow-h: 0px; /* second header row with the section links, desktop only */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Large screens: the container and the type grow with the display (1080p, 1440p, 4K), so the page is not a 1200px
   strip in the middle of a 27-inch monitor. rem-based type scales with the root size; px hairlines stay crisp. */
@media (min-width: 1536px) {
  :root {
    --max: 1320px;
    --gutter: 32px;
    --header-h: 72px;
  }
}
@media (min-width: 1920px) {
  :root {
    --max: 1480px;
    --header-h: 78px;
  }
  html {
    font-size: 112.5%;
  }
}
@media (min-width: 2400px) {
  :root {
    --max: 1680px;
    --header-h: 84px;
  }
  html {
    font-size: 125%;
  }
}

/* 03 Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--navrow-h) + 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
textarea {
  resize: vertical;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0;
}
dl,
dd,
dt,
h1,
h2,
h3,
h4 {
  margin: 0;
}
[hidden] {
  display: none !important;
}
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skipLink {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  transition: top 0.2s var(--ease);
}
.skipLink:focus {
  top: 12px;
}

.h1 {
  font-size: clamp(2rem, 1.3rem + 3.7vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.lead {
  max-width: 54ch;
  margin-top: 24px;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead--sm {
  max-width: 72ch;
  margin: 0 0 32px;
  font-size: 1.0625rem;
}
.sub {
  margin-top: 16px;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.fine {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.mt {
  margin-top: 48px;
}
.mt-sm {
  margin-top: 20px;
}
.rowText {
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 62ch;
}
.link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.link:hover {
  text-decoration-color: currentColor;
}

/* 04 Layout ---------------------------------------------------------------- */
.container {
  width: min(var(--max), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.sec {
  padding-block: clamp(64px, 9vw, 112px);
  border-top: 1px solid var(--line);
}
.sec--white {
  background: var(--surface);
}
.sec--wash {
  background: var(--wash);
}
.secGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 40px;
}
.secHead {
  grid-column: 1 / span 4;
}
.secBody {
  grid-column: 5 / -1;
  min-width: 0;
}
.secHead--sticky {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + var(--navrow-h) + 32px);
}
.wideHead {
  max-width: 60rem;
  margin-bottom: 48px;
}
.wideHead .sub {
  max-width: 68ch;
}

.rows {
  border-bottom: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 24px;
}
.pair--top {
  margin-top: 56px;
}
.pair--wide {
  gap: 64px;
  margin-top: 0;
}
.pair .h4 {
  margin-bottom: 8px;
}
.pair .h3 {
  margin-bottom: 10px;
}
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.trio .h4 {
  margin-bottom: 6px;
}

.dash li,
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-top: 8px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.dash li:first-child,
.ticks li:first-child {
  margin-top: 0;
}
.dash li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.rowTitle {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* 05 Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s var(--ease);
}
.btn:active {
  transform: scale(0.98);
}
.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.btnPrimary {
  background: var(--accent);
  color: #fff;
}
.btnGhost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
@media (hover: hover) {
  .btnPrimary:hover {
    background: var(--accent-2);
  }
  .btnGhost:hover {
    border-color: var(--ink);
  }
}

/* 06 Header ---------------------------------------------------------------- */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--accent);
}
.brandMark {
  display: block;
  flex: none;
  width: auto;
  height: 2.75rem;
}
.brandText {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brandMuted {
  font-weight: 500;
  color: var(--ink-3);
}
/* Nav "pocket": one row between the brand and the language switch. At rest the list runs from the first
   section and the next one is half tucked into a pocket on the right. Opening it (hover, keyboard focus, a tap
   on touch screens; main.js adds .is-open) stretches the bar sideways over the brand name and the language
   switch: the logo glides left, the CTA glides right, the hidden sections rise in one by one.
   Performance: the bar's final size is set once, in a single layout; everything that moves afterwards is
   transform, opacity or clip-path, so the animation runs on the compositor and never re-lays out the header. */
.navSlot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  margin-left: 20px;
}
.nav {
  position: absolute;
  z-index: 5;
  top: calc((var(--header-h) - 44px) / 2);
  left: -8px;
  right: 0;
  min-height: 44px;
  overflow: hidden;
  contain: layout style;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, 0.35) calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, 0.35) calc(100% - 22px), transparent);
}
/* the bar's surface: starts clipped to the resting size and opens to the full width (clip-path only) */
.navBg,
.navShade {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
}
.navBg {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: inset(0 var(--cR, 0px) calc(100% - 44px) var(--cL, 0px) round 22px);
  transition: clip-path 0.42s var(--ease);
}
.navShade {
  box-shadow: var(--shadow);
  transition: opacity 0.1s;
}
.navTrack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 8px;
  perspective: 520px;
  transition: transform 0.42s var(--ease);
}
.navSlot::after {
  content: "";
  position: absolute;
  z-index: 6;
  right: -4px;
  top: calc((var(--header-h) - 34px) / 2);
  width: 18px;
  height: 34px;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(245, 246, 248, 0), var(--paper) 70%);
  box-shadow:
    inset -3px 0 0 var(--line),
    6px 0 14px -10px rgba(13, 24, 41, 0.35);
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.35s var(--ease);
}
.navSlot.is-fits::after {
  display: none;
}
.navSlot.is-fits .nav {
  -webkit-mask-image: none;
  mask-image: none;
}
.navLink {
  position: relative;
  transition:
    color 0.2s,
    transform 0.42s var(--ease),
    opacity 0.2s;
}
.navLink.is-tucked {
  transform: rotateY(-42deg) translateZ(-14px);
  transform-origin: 0 50%;
  opacity: 0.75;
}
.navSlot:not(.is-open):not(.is-closing) .navLink.is-hidden {
  visibility: hidden;
}
.navSlot.is-tight .navLink {
  padding-inline: 7px;
  font-size: 0.875rem;
}
/* open (and while folding back, so the geometry holds until the animation ends) */
.navSlot:is(.is-open, .is-closing) .nav {
  left: var(--navL, -8px);
  right: var(--navR, 0px);
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.navSlot:is(.is-open, .is-closing) .navBg {
  opacity: 1;
}
.navSlot:is(.is-open, .is-closing) .navTrack {
  justify-content: center;
  padding: 0 18px;
}
.navSlot.is-open .navBg {
  clip-path: inset(0 0 0 0 round 22px);
}
.navSlot.is-open .navShade {
  opacity: 1;
  transition: opacity 0.25s 0.15s;
}
.navSlot.is-wrap .navTrack {
  flex-wrap: wrap;
  padding: 0 var(--wrapPad, 18px) 6px;
}
.navSlot:is(.is-open, .is-closing)::after {
  opacity: 0;
  transform: translateX(14px);
}
.navSlot.is-open .navLink.is-tucked {
  transform: none;
  opacity: 1;
}
.navSlot.is-open .navLink.is-hidden {
  animation: navItemIn 0.4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 32ms + 90ms);
}
.navSlot.is-closing .navLink.is-hidden {
  opacity: 0;
}
.navSlot.is-closing .nav {
  pointer-events: none;
}
@keyframes navItemIn {
  from {
    opacity: 0;
    transform: translateX(-12px) rotateY(-50deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.siteHeader .brand,
.siteHeader .headerCtas {
  transition: transform 0.42s var(--ease);
}
.siteHeader .brandText,
.siteHeader .lang {
  transition: opacity 0.25s 0.2s;
} /* on close: reappear once the bar has folded */
.siteHeader.is-navOpen .brand {
  transform: translateX(calc(var(--slideL, 0px) * -1));
}
.siteHeader.is-navOpen .brandText,
.siteHeader.is-navOpen .lang {
  opacity: 0;
  pointer-events: none;
  transition-duration: 0.15s;
  transition-delay: 0s;
}
.siteHeader.is-navOpen .headerCtas {
  transform: translateX(var(--slideR, 0px));
}
/* without JS: hovering still shows every section */
html:not(.js) .navSlot:hover .nav {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 22px;
}
html:not(.js) .navSlot:hover .navTrack {
  flex-wrap: wrap;
  padding-bottom: 6px;
}
/* each item: the underline draws in from the left and the label lifts a little */
.navLink::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .navLink:hover {
    color: var(--accent);
    transform: translateY(-2px);
  }
  .navLink:hover::after {
    transform: scaleX(1);
  }
}
.navLink[aria-current]::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .navBg,
  .navShade,
  .navTrack,
  .navSlot .navLink,
  .navSlot::after,
  .siteHeader .brand,
  .siteHeader .headerCtas {
    animation: none !important;
    transition: none;
  }
  .navLink.is-tucked {
    transform: none;
  }
}
@media (max-width: 1023px) {
  .navSlot,
  .headerCtas {
    display: none;
  }
}
.navLink {
  flex: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.2s;
}
.navLink:hover,
.navLink[aria-current] {
  color: var(--ink);
}
.headerCtas .btn {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s;
}
.burger span:nth-child(1) {
  top: 14px;
}
.burger span:nth-child(2) {
  top: 21px;
}
.burger span:nth-child(3) {
  top: 28px;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translate3d(0, 7px, 0) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translate3d(0, -7px, 0) rotate(-45deg);
}
.mobileNav {
  position: absolute;
  inset: 100% 0 auto;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(13, 24, 41, 0.25);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0s 0.22s;
}
.mobileNav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.mobileNavInner {
  display: grid;
  padding: 8px 0 20px;
}
.mobileLink {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 500;
}
.mobileNavInner .btn {
  margin-top: 16px;
}

/* 07 Hero + flow diagram ---------------------------------------------------- */
.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 104px);
}
.heroGrid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.heroText .lead {
  margin-top: 24px;
}
.ctaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.heroText .fine {
  margin-top: 14px;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--line-2);
}
.facts > div {
  padding: 18px 20px 0 0;
}
.facts > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.facts dt {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.facts dd {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Hero operations-panel mockup: a light, functional rebuild of the reference
   dashboard Artem supplied (Nexora_Operations_Dashboard_Complete.zip) — same
   structure and motion, recolored to the site's own tokens (no dark theme). */
.opsWrap {
  display: grid;
  gap: 66px 10px;
}
.opsPanel {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  animation: opsEnter 0.7s var(--ease) both;
}
.opsGlow {
  position: absolute;
  z-index: -1;
  top: 8px;
  right: 8px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(80px);
  opacity: 0.14;
}
.opsWindow {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
@media (hover: hover) {
  .opsPanel:hover .opsWindow {
    transform: translateY(-3px);
    box-shadow:
      var(--shadow-sm),
      0 26px 52px -18px rgba(13, 24, 41, 0.22);
  }
}
.opsBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.opsDots {
  display: flex;
  gap: 6px;
}
.opsDots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}
.opsTitle {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-size: clamp(11px, 2.3cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
@container (max-width: 340px) {
  .opsDots {
    display: none;
  }
  .opsTitle {
    letter-spacing: 0.06em;
  }
}
.opsLive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ok);
}
.pulseDot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: livePulse 2s ease-out infinite;
}
.opsPanel.is-paused .pulseDot,
.opsPanel.is-paused .opsChip {
  animation-play-state: paused;
}
@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 122, 85, 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(14, 122, 85, 0);
  }
}

.opsMain {
  display: flex;
  min-height: 420px;
}
.opsSide {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 52px;
  padding: 16px 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
}
.opsLogo {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
}
.opsLogo img {
  display: block;
  width: 100%;
  height: 100%;
}
.opsSideBtn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.opsSideBtn svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .opsSideBtn:not(.is-active):hover {
    border-color: var(--line-2);
    transform: translateY(-1px);
  }
}
.opsSideBtn.is-active {
  border-color: var(--accent-soft);
  background: var(--wash);
  color: var(--accent-2);
}

.opsContent {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 22px 22px 18px;
  overflow: hidden;
  transition: height 0.3s var(--ease);
}
.opsTabPanel {
  display: none;
}
.opsTabPanel.is-active {
  display: block;
  animation: opsFadeUp 0.35s var(--ease) both;
}
.opsHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 20px;
}
.opsEyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.opsHead h2 {
  margin: 4px 0 0;
  font-size: 1.125rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5cqw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.opsPeriod {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.opsPeriod button {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.opsPeriod button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.opsMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--line);
}
.opsMetric {
  padding: 12px 12px 10px;
  background: var(--surface);
}
.opsMetric > span {
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.opsMetric > div {
  margin-top: 6px;
}
.opsMetricVal {
  font-family: var(--font-num);
  font-size: 1.1875rem;
  font-size: clamp(1.0625rem, 0.9rem + 0.8cqw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.opsMetric--good .opsMetricVal {
  color: var(--ok);
}

.opsChartCard {
  margin-top: 12px;
  padding: 14px 14px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.opsChartHead {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.opsChartHead strong {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--ok);
}
.opsChart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  overflow: visible;
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.opsChart.is-changing {
  opacity: 0.35;
  transform: translateY(3px);
}
.opsGrid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.opsArea {
  fill: var(--accent);
  opacity: 0.1;
  transition: d 0.45s ease;
}
.opsLine {
  fill: none;
  stroke: url(#opsGrad7);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: opsDraw 1.3s var(--ease) 0.25s both;
  transition: d 0.45s ease;
}
.opsPoint {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 3;
  transition:
    cx 0.45s,
    cy 0.45s;
}
/* Faint backdrop trend lines, like the secondary indicators on a trading chart: no fill, no data
   labels, just texture suggesting the main line sits inside a wider picture we also keep an eye on. */
.opsIndicator {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: d 0.45s ease;
}
.opsIndicator--0 {
  stroke: var(--accent);
  opacity: 0.22;
}
.opsIndicator--1 {
  stroke: var(--ink-3);
  opacity: 0.16;
  stroke-dasharray: 3 4;
}
.opsChartLabels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

.opsFlow {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.opsFlow article {
  display: grid;
  flex: 1;
  min-width: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.opsFlow article span {
  overflow: hidden;
  font-size: 0.6875rem;
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opsFlow article strong {
  font-family: var(--font-num);
  font-size: 0.75rem;
  color: var(--ink);
}
.opsDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.opsDot--blue {
  background: var(--accent);
}
.opsDot--violet {
  background: #8b6cff;
}
.opsDot--green {
  background: var(--ok);
}

.opsPeople {
  display: grid;
  gap: 10px;
}
.opsPeople article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.opsPeople img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.opsPeople span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.opsPeople strong {
  font-size: 0.875rem;
  color: var(--ink);
}
.opsPeople small {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.opsSteps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opsSteps--ai {
  margin-top: 14px;
}
.opsSteps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.8125rem;
  color: var(--ink);
}
.opsSteps .actor {
  flex: none;
  padding: 3px 9px;
  font-size: 0.6875rem;
}

.opsProtocolList {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.opsProtocolList li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.opsProtocolList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}

.opsCode5 {
  padding: 16px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
}
.opsCode5Head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.opsCode5Head svg {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
}
.opsCode5Tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #6ee7b7;
}
.opsCode5 p {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.opsCode5Status {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.opsCode5Status li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}
.opsCode5Status i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.22);
}

.opsCta {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.opsTabsMobile {
  display: none;
  gap: 4px;
  padding: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--paper);
  scrollbar-width: none;
}
.opsTabsMobile::-webkit-scrollbar {
  display: none;
}
.opsTabsMobile button {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.opsTabsMobile button.is-active {
  border-color: var(--accent-soft);
  background: var(--wash);
  color: var(--accent-2);
}

.opsChip {
  position: absolute;
  z-index: 3;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.75rem;
  color: var(--ink-3);
  pointer-events: none;
}
.opsChip strong {
  font-family: var(--font-num);
  color: var(--accent-2);
}
.opsChip {
  max-width: 11.875rem;
}
.opsChip--time {
  top: -58px;
  right: 20px;
  animation: opsFloat 5s ease-in-out infinite;
}
.opsChip--status {
  left: 20px;
  bottom: -58px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: opsFloat 5s ease-in-out -2.5s infinite;
}
.opsChip--status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.opsNote {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-3);
}

@keyframes opsEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Hero entrance: the text column rises (vertical, staggered per line) while the
   Control Center panel arrives from the side (horizontal) — two distinct motions
   reading as one coordinated moment, not a single effect mirrored on both sides. */
.heroText > .h1,
.heroText > .lead,
.heroText > .ctaRow,
.heroText > .fine,
.heroText > .facts {
  animation: heroTextIn 0.5s var(--ease) both;
}
.heroText > .h1 {
  animation-delay: 0.02s;
}
.heroText > .lead {
  animation-delay: 0.12s;
}
.heroText > .ctaRow {
  animation-delay: 0.22s;
}
.heroText > .fine {
  animation-delay: 0.3s;
}
.heroText > .facts {
  animation-delay: 0.36s;
}
@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.hero .opsPanel {
  animation: heroOpsIn 0.6s var(--ease) 0.2s both;
}
@keyframes heroOpsIn {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
}
@keyframes opsFadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes opsDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes opsFloat {
  50% {
    transform: translateY(-7px);
  }
}

/* Partners ------------------------------------------------------------------ */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.partners--1 {
  grid-template-columns: minmax(0, 1fr);
}
.partnerCard {
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.partnerMain {
  padding: 24px;
}
.partners--1 .partnerMain {
  padding: 32px;
}
.partnerLogo {
  display: block;
  height: 22px;
  width: auto;
}
.partnerWordmark {
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.partnerTag {
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-2);
}
.partnerCard .rowText {
  margin-top: 12px;
  max-width: 64ch;
}
.partnerCard .link {
  display: inline-block;
  margin-top: 14px;
}
.partnerMore summary {
  padding: 0 24px;
  min-height: 52px;
}
.partners--1 .partnerMore summary {
  padding: 0 32px;
}
.partnerMore .personBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0 24px 24px;
}
.partners--1 .partnerMore .personBody {
  padding: 0 32px 32px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: start;
}
.partnerMore .personStats {
  grid-column: 1 / -1;
  margin: 0;
}
.partnerExpertise .rowText {
  max-width: 68ch;
}
.partnerSource {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.partnerGallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-self: end;
}
.partnerPic {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--r-md);
}
@media (max-width: 760px) {
  .partners--1 .partnerMore .personBody {
    grid-template-columns: minmax(0, 1fr);
  }
  .partnerGallery {
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: start;
  }
  .partnerPic {
    max-width: 220px;
    width: auto;
    flex: 1 1 160px;
  }
}

/* 08 Sections -------------------------------------------------------------- */
.tools {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.tools > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tools dt {
  font-weight: 600;
  font-size: 0.9375rem;
}
.tools dd {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.tools + .fine {
  margin-top: 14px;
}

.weeks li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px 28px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.weeks li:last-child {
  border-bottom: 1px solid var(--line);
}
.weekNo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  counter-reset: none;
}
.steps li {
  padding: 20px 0 28px;
  border-top: 1px solid var(--accent-soft);
}
.stepNo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}
.steps .h4 {
  margin-bottom: 6px;
}
.caseBottom {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  margin-top: 40px;
  align-items: start;
}
.caseAside {
  display: grid;
  gap: 16px;
  padding-top: 6px;
}

/* 09 Tables ---------------------------------------------------------------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.tbl th,
.tbl td {
  padding: 20px 20px 20px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tbl thead th {
  padding-block: 0 12px;
  border-top: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
}
.tbl tbody th {
  width: 24%;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.tbl td {
  color: var(--ink-2);
}
.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}
.tbl td:last-child {
  padding-right: 0;
}
.tbl--case td:last-child {
  color: var(--ink);
  font-weight: 600;
}
.tbl--ref {
  margin-bottom: 20px;
}
.tbl--ref th {
  width: 40%;
}
.tblScroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl--tiers {
  min-width: 640px;
}
.tbl--tiers thead th {
  padding-bottom: 20px;
  vertical-align: bottom;
}
.tierName {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.tierPrice {
  display: block;
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tierPrice small {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}
.tbl--tiers tbody th {
  width: 22%;
}

/* 10 Pricing --------------------------------------------------------------- */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 36px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.tab {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}
@media (hover: hover) {
  .tab[aria-selected="false"]:hover {
    color: var(--ink);
  }
}
[data-pricing-panel]:not([hidden]) {
  animation: panelIn 0.4s var(--ease) both;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px 28px;
}
.plan + .plan {
  border-left: 1px solid var(--line);
}
.plan--pick {
  background: var(--wash);
  box-shadow: inset 0 3px 0 var(--accent);
}
.planName {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.planLabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.planPrice {
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: clamp(2.125rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.planMeta {
  margin-top: 6px;
  font-weight: 600;
  color: var(--accent-2);
}
.planFit {
  color: var(--ink);
  text-wrap: pretty;
}
.plan > .ticks {
  flex: none;
}
.plan > .planMore {
  flex: 1;
}
.planPay {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.plan .btn {
  align-self: stretch;
}
.miniSteps {
  counter-reset: s;
  display: grid;
  gap: 10px;
}
.miniSteps li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
  counter-increment: s;
}
.miniSteps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.pair--wide .h4 {
  margin-top: 24px;
}
.pair--wide .dash {
  margin-top: 0;
}

/* 11 FAQ ------------------------------------------------------------------- */
.faqItem {
  border-top: 1px solid var(--line);
}
.faqItem:last-child {
  border-bottom: 1px solid var(--line);
}
.faqItem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
}
.faqItem summary::-webkit-details-marker {
  display: none;
}
.faqItem summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
}
.faqItem[open] summary::after {
  transform: rotate(45deg);
}
.faqItem p {
  padding: 0 40px 24px 0;
  color: var(--ink-2);
  max-width: 66ch;
  text-wrap: pretty;
}
.faqItem[open] p {
  animation: panelIn 0.35s var(--ease) both;
}

/* 12 Lead quiz --------------------------------------------------------------- */
.quizSec {
  position: relative;
  overflow: hidden;
}
.quizGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.quizIntro {
  position: sticky;
  top: calc(var(--header-h) + var(--navrow-h) + 24px);
}
.quizIntro .lead {
  margin: 16px 0 28px;
  max-width: 46ch;
}
.quizIntro .miniSteps {
  max-width: 30ch;
}
.quizIntro .fine {
  margin-top: 24px;
}

.quizCard {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.quizProgress {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.quizProgressMeta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.quizProgressMeta strong {
  color: var(--accent-2);
}
.quizProgressTrack {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--wash);
}
.quizProgressTrack span {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.quizStep {
  margin: 0;
  padding: 0;
  border: 0;
}
.quizStep.is-active {
  animation: opsFadeUp 0.32s var(--ease) both;
}
.quizStep legend {
  width: 100%;
  padding: 0;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.quizStep > p {
  margin: 6px 0 22px;
  color: var(--ink-3);
  font-size: 0.875rem;
}
.quizAnswers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quizAnswer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background-color 0.2s;
}
@media (hover: hover) {
  .quizAnswer:hover {
    border-color: var(--accent-soft);
    background: var(--wash);
  }
}
.quizAnswer:has(input:checked) {
  border-color: var(--accent);
  background: var(--wash);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.quizAnswer input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.quizAnswer > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.quizAnswer b {
  font-size: 0.875rem;
  color: var(--ink);
}
.quizAnswer small {
  font-size: 0.75rem;
  color: var(--ink-3);
}
.quizControls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.quizControls .btn {
  min-height: 44px;
  padding: 0 20px;
}
.quizHint {
  justify-self: center;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.quizResult {
  animation: opsFadeUp 0.4s var(--ease) both;
}
.quizResultStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 22px;
  padding: 6px 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  background: var(--wash);
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.quizResultStatus span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ok);
}
.quizResultLabel {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quizResult h2 {
  margin: 6px 0 8px;
  font-family: var(--font-num);
  font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quizResultReason {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-2);
}
.quizResultStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
}
.quizResultStats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quizResultStats div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.quizResultStats span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quizResultStats strong {
  font-size: 0.9375rem;
  color: var(--ink);
}
.quizResultPlan > span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quizResultPlan ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 26px;
  padding: 0;
  list-style: none;
}
.quizResultPlan li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.quizResultPlan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.quizResultCta {
  width: 100%;
}
.quizRestart {
  display: block;
  margin: 16px auto 0;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quizDisclaimer {
  display: block;
  margin-top: 16px;
  text-align: center;
}

.quizModal {
  width: min(880px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.quizModal::backdrop {
  background: rgba(13, 24, 41, 0.5);
  animation: opsFadeUp 0.001ms;
}
.quizModal[open] {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  animation: opsEnter 0.3s var(--ease) both;
}
.quizModalClose {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.quizModalIntro {
  padding: 44px 36px;
  border-right: 1px solid var(--line);
  background: var(--wash);
}
.quizModalIntro h2 {
  margin: 14px 0 16px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.quizModalIntro > p:not(.chip) {
  margin: 0 0 26px;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.65;
}
.quizAgenda {
  display: grid;
  gap: 10px;
}
.quizAgenda span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.quizAgenda i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  font: normal 600 0.6875rem/1 var(--font-mono);
  color: var(--accent-2);
}
.quizLeadForm {
  padding: 44px 36px 32px;
  display: grid;
  gap: 14px;
}
.quizFormRow {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}
.field {
  display: grid;
  gap: 8px;
}
.field span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #667085;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field [aria-invalid="true"] {
  border-color: var(--danger);
}
.btnLoader::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.formNote {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formStatus {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 500;
}
.formStatus.success {
  background: #e6f5ee;
  color: var(--ok);
  border: 1px solid #b8e0cd;
}
.formStatus.error {
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f4c1bb;
}
.formStatus.warn {
  background: #fff4e0;
  color: var(--warn);
  border: 1px solid #f0d49b;
}

/* 13 Footer ---------------------------------------------------------------- */
.siteFooter {
  padding: 64px 0 28px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}
.footerGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footerBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
}
.footerMuted {
  margin-top: 12px;
  max-width: 42ch;
}
.footerTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.footerTags li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}
.footerH {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.footerList {
  display: grid;
  gap: 10px;
}
.footerList a:hover,
.footerBottom a:hover {
  color: #fff;
}
.footerBottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
.footerBottom .link {
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

/* 08b Language switch, chips, tags ------------------------------------------ */
.lang {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.lang a {
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-3);
  transition:
    background-color 0.2s,
    color 0.2s;
}
.lang a[aria-current] {
  background: var(--ink);
  color: #fff;
}
.lang.lang--end {
  margin-left: auto;
}
@media (hover: hover) {
  .lang a:not([aria-current]):hover {
    color: var(--ink);
  }
}
.headerCtas {
  margin-left: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
}
.chip--solid {
  border-color: var(--accent-soft);
  background: var(--wash);
  color: var(--accent-2);
  font-weight: 600;
}
.secHead .chip {
  margin-bottom: 16px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* 08c Control Center carousel ------------------------------------------------ */
.cc {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ccBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.ccTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.ccTab {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.ccTab[aria-current] {
  background: var(--ink);
  color: #fff;
}
.ccNav {
  display: flex;
  gap: 8px;
}
.ccBtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.2s,
    opacity 0.2s;
}
.ccBtn:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (hover: hover) {
  .ccBtn:not(:disabled):hover {
    border-color: var(--ink);
  }
}
.ccSlides {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  transition: height 0.35s var(--ease);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ccSlides::-webkit-scrollbar {
  display: none;
}
.ccSlide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 32px;
  scroll-snap-align: start;
}
.ccHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.ccHead .chip {
  margin-bottom: 12px;
}
.ccName {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.ccMeta {
  margin-top: 4px;
  color: var(--ink-3);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ok);
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status--target {
  color: var(--warn);
}
.status--info {
  color: var(--accent-2);
}
.ccResults {
  margin-top: 36px;
}
.ccResults .ticks li {
  margin: 0;
}
.ccResults .ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.kpi {
  padding: 20px 22px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kpiLabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.kpiVal {
  margin: 8px 0 6px;
  font-family: var(--font-num);
  font-size: clamp(1.875rem, 1.4rem + 1.3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.kpiNote {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.ccCharts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  margin-top: 36px;
}
.chart {
  margin: 0;
  min-width: 0;
}
.chart--wide {
  grid-column: 1 / -1;
}
.chart figcaption {
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bars {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.875rem;
}
/* Each row hands its three cells to the shared grid above, so the label column is as wide as the longest
   label in THAT chart ("Фундамент", "Foundation") and a bar can never start underneath its own label. */
.bar {
  display: contents;
}
.barLabel {
  color: var(--ink-3);
}
.barTrack {
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--wash);
}
.barFill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 7px;
  background: var(--accent);
}
.barFill--old {
  background: var(--line-2);
}
.barFill--target {
  background: repeating-linear-gradient(135deg, var(--accent) 0 6px, var(--accent-soft) 6px 11px);
}
.barVal {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tl {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 4px;
  margin-top: 12px;
}
.tl span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}
.tl1 {
  background: var(--accent-soft);
  color: var(--ink);
}
.tl2 {
  background: var(--accent);
  color: #fff;
}
.tl3 {
  border: 1px dashed var(--ok);
  background: #e6f5ee;
  color: var(--ok);
}
.ccNote {
  margin-top: 28px;
  max-width: 80ch;
}
.steps--cc {
  margin-top: 32px;
}
.steps--cc + .ccCharts {
  margin-top: 12px;
}

/* progressive enhancement: bars grow when their panel comes into view */
.js .barFill {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.js .is-in .barFill {
  transform: none;
}
.js .ccSlide:not(.is-in) .barFill {
  transform: scaleX(0);
}

/* 08d Case story ------------------------------------------------------------- */
.pair--case {
  margin-top: 0;
  margin-bottom: 8px;
}
.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.shot {
  min-width: 0;
  margin: 0;
}
.shotFrame {
  display: block;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fafafa;
}
.shotFrame img {
  width: 100%;
  min-width: 720px;
  height: auto;
}
.shotFrame--more {
  margin-top: 10px;
}
.shot figcaption {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.shotCap {
  display: block;
}
.shotOpen {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 500;
}
.shotHow {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding-left: 1.25rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.quote {
  margin: 56px 0 0;
  padding-left: 28px;
  border-left: 3px solid var(--accent);
}
.quote blockquote {
  margin: 0;
}
.quote p {
  max-width: 60ch;
  font-family: var(--font-num);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.quote figcaption {
  display: grid;
  gap: 4px;
  margin-top: 20px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.quote figcaption strong {
  color: var(--ink);
}

/* 10b Package comparison charts ---------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* 10c Inside Nexora ---------------------------------------------------------- */
.aiFlow {
  counter-reset: none;
}
.aiFlow li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 8px 24px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.aiFlow li:last-child {
  border-bottom: 1px solid var(--line);
}
.actor {
  display: inline-flex;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.actor--ai {
  background: var(--wash);
  color: var(--accent-2);
}
.actor--human {
  background: #e6f5ee;
  color: var(--ok);
}
.actor--both {
  background: #fff4e0;
  color: var(--warn);
}

/* 10d Development section */
#dev .secBody > p:last-child {
  margin-top: 28px;
}

/* 10e Team board ------------------------------------------------------------- */
.team {
  display: grid;
  gap: 32px;
}
.person {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.personPhoto {
  position: relative;
  margin: 0;
  background: var(--wash);
}
.personPhoto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.personBadge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.personMain {
  align-self: center;
  padding: 32px 36px;
}
.personName {
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.personRole {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-2);
}
.personLead {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--ink-2);
}
.personLink {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.875rem;
}
.personLink + .personLink {
  margin-left: 20px;
}
.personStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 0 4px;
  border-top: 1px solid var(--line);
}
.stat {
  padding: 16px 16px 0 0;
}
.stat + .stat {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.personStats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.personStats--3 .stat {
  padding-right: 12px;
}
.statVal {
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.statLabel {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.personMore {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
}
.personMore summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 36px;
  font-weight: 600;
  color: var(--accent-2);
  cursor: pointer;
  list-style: none;
}
.personMore summary::-webkit-details-marker {
  display: none;
}
.personMore summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition:
    transform 0.25s var(--ease),
    margin 0.25s var(--ease);
}
.personMore[open] summary::after {
  margin-top: 5px;
  transform: rotate(225deg);
}
@media (hover: hover) {
  .personMore summary:hover {
    background: var(--paper);
  }
}
.moreOn {
  display: none;
}
.personMore[open] .moreOn {
  display: inline;
}
.personMore[open] .moreOff {
  display: none;
}
.personBody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  padding: 12px 36px 40px;
}
.personSec {
  min-width: 0;
}
.personSec--wide {
  grid-column: 1 / -1;
}
.personSec .h4 {
  margin-bottom: 10px;
}
.personDl > div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.personDl dt {
  font-weight: 600;
}
.personDl dd {
  margin: 0;
  color: var(--ink-2);
}

/* generated: bar widths (kept out of style="" attributes for the strict CSP) */
.w0 {
  width: 0%;
}
.w1 {
  width: 1%;
}
.w2 {
  width: 2%;
}
.w3 {
  width: 3%;
}
.w4 {
  width: 4%;
}
.w5 {
  width: 5%;
}
.w6 {
  width: 6%;
}
.w7 {
  width: 7%;
}
.w8 {
  width: 8%;
}
.w9 {
  width: 9%;
}
.w10 {
  width: 10%;
}
.w11 {
  width: 11%;
}
.w12 {
  width: 12%;
}
.w13 {
  width: 13%;
}
.w14 {
  width: 14%;
}
.w15 {
  width: 15%;
}
.w16 {
  width: 16%;
}
.w17 {
  width: 17%;
}
.w18 {
  width: 18%;
}
.w19 {
  width: 19%;
}
.w20 {
  width: 20%;
}
.w21 {
  width: 21%;
}
.w22 {
  width: 22%;
}
.w23 {
  width: 23%;
}
.w24 {
  width: 24%;
}
.w25 {
  width: 25%;
}
.w26 {
  width: 26%;
}
.w27 {
  width: 27%;
}
.w28 {
  width: 28%;
}
.w29 {
  width: 29%;
}
.w30 {
  width: 30%;
}
.w31 {
  width: 31%;
}
.w32 {
  width: 32%;
}
.w33 {
  width: 33%;
}
.w34 {
  width: 34%;
}
.w35 {
  width: 35%;
}
.w36 {
  width: 36%;
}
.w37 {
  width: 37%;
}
.w38 {
  width: 38%;
}
.w39 {
  width: 39%;
}
.w40 {
  width: 40%;
}
.w41 {
  width: 41%;
}
.w42 {
  width: 42%;
}
.w43 {
  width: 43%;
}
.w44 {
  width: 44%;
}
.w45 {
  width: 45%;
}
.w46 {
  width: 46%;
}
.w47 {
  width: 47%;
}
.w48 {
  width: 48%;
}
.w49 {
  width: 49%;
}
.w50 {
  width: 50%;
}
.w51 {
  width: 51%;
}
.w52 {
  width: 52%;
}
.w53 {
  width: 53%;
}
.w54 {
  width: 54%;
}
.w55 {
  width: 55%;
}
.w56 {
  width: 56%;
}
.w57 {
  width: 57%;
}
.w58 {
  width: 58%;
}
.w59 {
  width: 59%;
}
.w60 {
  width: 60%;
}
.w61 {
  width: 61%;
}
.w62 {
  width: 62%;
}
.w63 {
  width: 63%;
}
.w64 {
  width: 64%;
}
.w65 {
  width: 65%;
}
.w66 {
  width: 66%;
}
.w67 {
  width: 67%;
}
.w68 {
  width: 68%;
}
.w69 {
  width: 69%;
}
.w70 {
  width: 70%;
}
.w71 {
  width: 71%;
}
.w72 {
  width: 72%;
}
.w73 {
  width: 73%;
}
.w74 {
  width: 74%;
}
.w75 {
  width: 75%;
}
.w76 {
  width: 76%;
}
.w77 {
  width: 77%;
}
.w78 {
  width: 78%;
}
.w79 {
  width: 79%;
}
.w80 {
  width: 80%;
}
.w81 {
  width: 81%;
}
.w82 {
  width: 82%;
}
.w83 {
  width: 83%;
}
.w84 {
  width: 84%;
}
.w85 {
  width: 85%;
}
.w86 {
  width: 86%;
}
.w87 {
  width: 87%;
}
.w88 {
  width: 88%;
}
.w89 {
  width: 89%;
}
.w90 {
  width: 90%;
}
.w91 {
  width: 91%;
}
.w92 {
  width: 92%;
}
.w93 {
  width: 93%;
}
.w94 {
  width: 94%;
}
.w95 {
  width: 95%;
}
.w96 {
  width: 96%;
}
.w97 {
  width: 97%;
}
.w98 {
  width: 98%;
}
.w99 {
  width: 99%;
}
.w100 {
  width: 100%;
}

/* 14 Motion ---------------------------------------------------------------- */
@keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pulse {
  to {
    stroke-dashoffset: -16;
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .fl--pulse {
    display: none;
  }
  .js .barFill,
  .js .ccSlide:not(.is-in) .barFill {
    transform: none;
    transition: none;
  }
}

/* 15 Responsive ------------------------------------------------------------ */
/* 1024-1279: small laptops, narrow windows, half-screen on a Mac: keep the desktop layout, make the header compact */
@media (max-width: 1279px) {
  .navLink {
    padding-inline: 7px;
    font-size: 0.875rem;
  }
}
/* the emblem is wider than the old drawn N: tighten the header a little between 1280 and 1535 so nothing overflows */
@media (min-width: 1280px) and (max-width: 1535px) {
  .navLink {
    padding-inline: 8px;
  }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .brandMuted {
    display: none;
  }
  .facts > div {
    padding-right: 12px;
  }
  .facts > div + div {
    padding-left: 14px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .h1 {
    font-size: clamp(2.25rem, 1rem + 3vw, 3.25rem);
  }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .heroGrid {
    grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
    gap: 32px;
  }
}
/* below 1024: tablets and phones */
@media (max-width: 1023px) {
  .nav {
    display: none;
  }
  .lang {
    margin-left: auto;
  }
  .burger {
    display: block;
    margin-left: 12px;
  }
  .heroGrid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 84px;
  }
  .opsPanel {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .secHead,
  .secBody {
    grid-column: 1 / -1;
  }
  .secHead--sticky {
    position: static;
  }
  .secGrid {
    row-gap: 32px;
  }
  .quizGrid {
    grid-template-columns: 1fr;
  }
  .quizIntro {
    position: static;
  }
  .caseBottom {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ccCharts,
  .compare,
  .ccResults .ticks {
    grid-template-columns: 1fr;
  }
  .person {
    grid-template-columns: 1fr;
  }
  .personPhoto img {
    aspect-ratio: 1 / 1;
    object-position: 50% 22%;
  }
  .personMain,
  .personBody,
  .personMore summary {
    padding-left: 24px;
    padding-right: 24px;
  }
  .personBody {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }
  .footerGrid > :first-child {
    grid-column: 1 / -1;
  }
}

/* tablets: keep the team card as photo + text side by side instead of a full-width square photo */
@media (min-width: 640px) and (max-width: 1023px) {
  .person {
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  }
  .personPhoto img {
    aspect-ratio: auto;
    object-position: 50% 18%;
  }
  .personMain {
    padding: 26px 26px 18px;
  }
  .personStats--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .personStats--3 .stat:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 800px) {
  .opsSide {
    display: none;
  }
  .opsTabsMobile {
    display: flex;
  }
  .opsMain {
    min-height: 0;
  }
  .opsContent {
    padding: 18px 16px 14px;
  }
  .opsFlow {
    display: none;
  }
  /* Phones: the two floating chips no longer hover over the panel (they covered its tabs and header).
     They sit in a tidy row right under it instead, still showing the same live numbers. */
  .opsPanel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .opsWindow {
    flex: 1 1 100%;
    min-width: 0;
  }
  .opsChip {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.35;
    animation: none;
    box-shadow: none;
  }
  .opsChip--status {
    order: 1;
  }
  .opsChip--time {
    order: 2;
  }
  .opsWrap {
    gap: 24px 10px;
  }
  /* "Автоматизировано" / "Автоматизовано" is wider than a third of a phone panel: tighter padding and a
     soft hyphen in the label (Автомати-зировано) instead of the word being cut off at the cell edge. */
  .opsMetric {
    padding: 10px 8px 9px;
  }
  .opsMetric > span {
    display: block;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  .ccSlide {
    padding: 22px 18px;
  }
  .aiFlow li {
    grid-template-columns: 1fr;
  }
  .actor {
    justify-self: start;
  }
  .plans {
    grid-template-columns: 1fr;
  }
  .plan + .plan {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .pair,
  .pair--wide,
  .trio {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .weeks li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .row {
    grid-template-columns: 1fr;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .facts > div,
  .facts > div + div {
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .tabs {
    display: flex;
    width: 100%;
    border-radius: 22px;
  }
  .tab {
    flex: 1 1 auto;
    padding-inline: 14px;
  }
  .tools > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .tbl--stack thead {
    position: absolute;
    left: -9999px;
  }
  .tbl--stack tbody tr {
    display: block;
    padding: 20px 0;
    border-top: 1px solid var(--line);
  }
  .tbl--stack tbody tr:last-child {
    border-bottom: 1px solid var(--line);
  }
  .tbl--stack th,
  .tbl--stack td,
  .tbl--stack tbody tr:last-child th,
  .tbl--stack tbody tr:last-child td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .tbl--stack tbody th {
    width: auto;
    margin-bottom: 8px;
  }
  .tbl--stack td + td {
    margin-top: 10px;
  }
  .tbl--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink-3);
  }
  .tbl--ref th,
  .tbl--ref td {
    display: block;
    width: auto;
  }
  .quizAnswers {
    grid-template-columns: 1fr;
  }
  .quizControls {
    grid-template-columns: 1fr 1fr;
  }
  .quizHint {
    display: none;
  }
  .quizResultStats {
    grid-template-columns: 1fr;
  }
  .quizResultStats div + div {
    margin-top: 4px;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .quizResultPlan ul {
    grid-template-columns: 1fr;
  }
  .quizModalIntro,
  .quizLeadForm {
    padding: 34px 24px 26px;
  }
  .quizLeadForm {
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }
  .quizModalIntro {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 800px), (max-height: 560px) {
  /* Phones (portrait and landscape) and small tablets: the form becomes a full-screen sheet sized to the VISIBLE viewport.
     --vvh / --vvt are kept in sync with window.visualViewport by main.js while the dialog is open, so
     when the on-screen keyboard takes half the screen the sheet shrinks to the part above it and scrolls
     inside itself instead of being cut off under the keyboard. dvh is the fallback before JS runs. */
  .quizModal {
    position: fixed;
    inset: auto;
    top: var(--vvt, 0px);
    left: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    height: var(--vvh, 100dvh);
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .quizModal[open] {
    display: block;
  }
  .quizModal::backdrop {
    background: var(--surface);
  }
  .quizModalClose {
    position: sticky;
    top: max(10px, env(safe-area-inset-top));
    display: block;
    margin: 10px max(10px, env(safe-area-inset-right)) -44px auto;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi {
    padding: 14px 14px 12px;
  }
  .personDl > div {
    grid-template-columns: 1fr;
  }
  .personStats--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .personStats--3 .stat:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 16px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .personMain {
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .kpiVal {
    font-size: 1.625rem;
  }
  .tl {
    grid-template-columns: 1fr;
  }
  .bars {
    gap: 10px 8px;
  }
  .ccTabs {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ccTabs::-webkit-scrollbar {
    display: none;
  }
  .ccTab {
    flex: none;
    padding: 0 14px;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .quote {
    padding-left: 18px;
  }
  body {
    font-size: 1rem;
  }
  .btn {
    width: 100%;
  }
  .headerInner .btn {
    width: auto;
  }
  .ctaRow {
    flex-direction: column;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .quizCard {
    padding: 22px 18px;
  }
  .quizFormRow {
    grid-template-columns: 1fr;
  }
  .footerGrid {
    grid-template-columns: 1fr;
  }
  .faqItem summary {
    font-size: 1.0625rem;
  }
  .faqItem p {
    padding-right: 0;
  }
  .brandMuted {
    display: none;
  }
}

/* small phones: stat cards go single-column (two columns would leave 70-100px text). Must stay AFTER the 560px block. */
@media (max-width: 400px) {
  .brandMark {
    height: 2rem;
  }
  .headerInner {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .kpis,
  .personStats,
  .personStats--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .personStats .stat + .stat,
  .personStats--3 .stat:nth-child(3) {
    grid-column: auto;
    margin-top: 14px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* 16 Privacy policy page ----------------------------------------------------- */
.pHeader .headerInner {
  justify-content: flex-start;
  gap: 24px;
}
.pMain {
  padding: clamp(40px, 6vw, 88px) 0 80px;
}
.pWrap {
  max-width: 74ch;
  margin-inline: auto;
}
.pBack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 0.875rem;
}
.pTitle {
  margin: 0;
}
.pUpdated {
  margin-top: 10px;
}
.pBody {
  margin-top: 40px;
  display: grid;
  gap: 36px;
}
.pBody section {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.pBody section:first-child {
  padding-top: 0;
  border-top: 0;
}
.pBody h2 {
  margin: 0 0 14px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pBody p {
  margin: 0 0 12px;
  color: var(--ink-2);
  line-height: 1.7;
}
.pBody p:last-child {
  margin-bottom: 0;
}
.pBody ul {
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.7;
}
.pBody ul:last-child {
  margin-bottom: 0;
}
.pBody ol {
  counter-reset: pnum;
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  color: var(--ink-2);
  line-height: 1.7;
}
.pBody ol li {
  position: relative;
  padding-left: 32px;
  counter-increment: pnum;
}
.pBody ol li::before {
  content: counter(pnum);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.pBody li {
  margin-bottom: 4px;
}
.pDl {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.pDl div {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 0.9375rem;
}
.pDl dt {
  font-weight: 600;
  color: var(--ink-3);
}
.pDl dd {
  margin: 0;
  color: var(--ink);
}
.pFoot {
  margin-top: 8px;
  max-width: 68ch;
}
.pFooter {
  padding: 28px 0;
}

@media (max-width: 560px) {
  .pDl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* 17 Cookie consent banner --------------------------------------------------- */
.cookieBar {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  max-width: 720px;
  margin-inline: auto;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: opsFadeUp 0.3s var(--ease) both;
}
.cookieBar[hidden] {
  display: none;
}
.cookieBar p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.cookieBtns {
  display: flex;
  flex: none;
  gap: 8px;
}
.cookieBtns .btn {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.8125rem;
}

@media (max-width: 560px) {
  .cookieBar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px 16px;
  }
  .cookieBtns {
    width: 100%;
  }
  .cookieBtns .btn {
    flex: 1;
    width: auto;
  }
}
.linkBtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* 18 Customer quotes (Stylish Outfit) ---------------------------------------- */
.custQuotes {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.custQuotes .fine {
  max-width: 60ch;
  margin-top: 6px;
}
.custQuoteGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.custQuote {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  background: var(--paper);
}
.custQuote p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}
.custQuote footer {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--ink-3);
}

@media (max-width: 700px) {
  .custQuoteGrid {
    grid-template-columns: 1fr;
  }
}

/* 19 Blog --------------------------------------------------------------------- */
.pWrap--wide {
  max-width: 100%;
}
.pWrap--wide .blogGrid {
  max-width: 980px;
  margin-inline: auto;
}
.blogGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
  margin-top: 32px;
  align-items: start;
}
.blogCard {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.blogCard h2 {
  margin: 0;
  color: var(--ink);
}
@media (hover: hover) {
  a.blogCard:hover {
    border-color: var(--accent-soft);
    transform: translateY(-2px);
  }
}
.blogCard .rowText {
  margin-top: 8px;
  max-width: 68ch;
}
.blogDate {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.blogCard--soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  opacity: 0.6;
}
.blogCard--soon h2 {
  font-weight: 500;
  font-size: 1.0625rem;
}
.blogBody h2 {
  margin-top: 8px;
}
.blogSources {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.blogCtaBox {
  margin-top: 40px;
  padding: 28px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-lg);
  background: var(--wash);
}
.blogCtaBox p {
  margin: 0 0 16px;
  color: var(--ink-2);
  max-width: 62ch;
}

@media (max-width: 560px) {
  .blogCard {
    padding: 18px 20px;
  }
  .blogCard--soon {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.blogCard--feature {
  max-width: 640px;
  margin-inline: auto;
  padding: 28px 30px;
  text-align: center;
}
.blogCard--feature .chip {
  margin-bottom: 14px;
}
.blogCard--feature h3 {
  margin: 0;
}
.blogCard--feature .rowText {
  margin: 10px auto 0;
}
.blogCard--feature .blogDate {
  text-align: center;
}
.blogAllLink {
  display: block;
  margin-top: 18px;
  text-align: center;
}

/* 20 Custom 404: white/black split, Ephesis script digits in 3D, harsh glitch. Deliberately off-brand for one page.
   Everything is pure #fff / #000: the layers are white with mix-blend-mode: difference, so they invert
   on their own wherever they cross the split. No inline styles anywhere (strict CSP). */
@font-face {
  font-family: "Ephesis";
  src: url("fonts/ephesis-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.err404Lang {
  margin-left: auto;
}
.err404Header {
  background: #000;
  border-bottom: 1px solid #fff;
}
.err404Header .brandText {
  color: #fff;
}
.err404Header .brandMuted {
  color: #fff;
  opacity: 0.6;
}
.err404Header .lang {
  border-color: #fff;
  background: #000;
}
.err404Header .lang a {
  color: #fff;
}
.err404Header .lang a[aria-current] {
  background: #fff;
  color: #000;
}
.err404Page .siteFooter {
  background: #000;
  border-top: 1px solid #fff;
}

.err404Stage {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - 130px);
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  color: #fff;
  animation: e404Flash 8s linear infinite;
}
.err404Stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: difference;
  background: repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 1px, transparent 4px);
  opacity: 0.1;
}
.e404Chaos,
.e404Mocks {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: difference;
}
.e404Icon {
  position: absolute;
  color: #fff;
  opacity: 0.55;
}
.e404Icon-0 {
  left: 4%;
  top: 10%;
  transform: rotate(-12deg);
}
.e404Icon-1 {
  left: 88%;
  top: 6%;
  transform: rotate(10deg);
}
.e404Icon-2 {
  left: 8%;
  top: 62%;
  transform: rotate(6deg);
}
.e404Icon-3 {
  left: 92%;
  top: 58%;
  transform: rotate(-8deg);
}
.e404Icon-4 {
  left: 48%;
  top: 4%;
  transform: rotate(4deg);
}
.e404Icon-5 {
  left: 78%;
  top: 82%;
  transform: rotate(-14deg);
}
.e404Icon-6 {
  left: 18%;
  top: 86%;
  transform: rotate(10deg);
}
.e404Icon-7 {
  left: 60%;
  top: 90%;
  transform: rotate(-4deg);
}
.e404Icon-8 {
  left: 30%;
  top: 30%;
  transform: rotate(14deg);
}
.e404Icon-9 {
  left: 70%;
  top: 30%;
  transform: rotate(-10deg);
}
.e404Label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  opacity: 0.5;
  white-space: nowrap;
}
.e404Label-0 {
  left: 14%;
  top: 22%;
}
.e404Label-1 {
  left: 84%;
  top: 24%;
}
.e404Label-2 {
  left: 38%;
  top: 12%;
}
.e404Label-3 {
  left: 6%;
  top: 48%;
}
.e404Label-4 {
  left: 90%;
  top: 46%;
}
.e404Label-5 {
  left: 50%;
  top: 92%;
}
.e404Label-6 {
  left: 24%;
  top: 72%;
}
.e404Label-7 {
  left: 72%;
  top: 68%;
}

/* pages that keep failing to load: big wireframes with scanlines, jittering in at random-looking moments */
.e404m {
  position: absolute;
  padding: 14px;
  border: 2px solid #fff;
  border-radius: 6px;
  opacity: 0;
  animation-name: e404mFlick;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.e404m::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #fff 0, #fff 2px, transparent 2px, transparent 6px);
  opacity: 0.28;
}
.e404m--hero {
  left: 8%;
  top: 6%;
  width: 340px;
  animation-duration: 3.6s;
  animation-delay: 0s;
}
.e404m--pricing {
  left: 68%;
  top: 8%;
  width: 300px;
  animation-duration: 4.4s;
  animation-delay: 0.9s;
}
.e404m--team {
  left: 3%;
  top: 56%;
  width: 280px;
  animation-duration: 3.9s;
  animation-delay: 1.7s;
}
.e404m--ops {
  left: 66%;
  top: 60%;
  width: 320px;
  animation-duration: 5.1s;
  animation-delay: 0.5s;
}
.e404m--blog {
  left: 30%;
  top: 32%;
  width: 300px;
  animation-duration: 4.7s;
  animation-delay: 2.4s;
}
@keyframes e404mFlick {
  0%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }
  2% {
    opacity: 1;
    transform: translateX(-14px);
  }
  3% {
    opacity: 0.15;
    transform: translateX(10px);
  }
  4%,
  6% {
    opacity: 1;
    transform: translateX(0);
  }
  7% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35%,
  36% {
    opacity: 1;
    transform: translateX(18px);
  }
  37% {
    opacity: 0;
  }
}
.e404m__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #fff;
}
.e404m__bar {
  display: block;
  margin-top: 9px;
  height: 10px;
  background: #fff;
}
.e404m__bar--lg {
  width: 85%;
  height: 18px;
}
.e404m__bar--md {
  width: 60%;
}
.e404m__bar--sm {
  width: 40%;
  margin-top: 10px;
}
.e404m__btn {
  display: block;
  width: 46%;
  height: 22px;
  margin-top: 12px;
  border: 2px solid #fff;
}
.e404m--pricing {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 100px;
}
.e404m__col {
  flex: 1;
  height: 55%;
  border: 2px solid #fff;
}
.e404m__col--on {
  height: 92%;
  background: #fff;
}
.e404m--team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.e404m__circle {
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.e404m--ops {
  font-family: var(--font-mono);
}
.e404m__tag {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  color: #000;
  font-size: 0.8125rem;
  font-weight: 700;
}
.e404m__ledred {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  background: #fff;
  vertical-align: middle;
}
.e404m__row {
  display: block;
  height: 16px;
  margin-top: 10px;
  border: 2px solid #fff;
}

/* a bright band that tears across the screen during glitch bursts */
.e404Tear {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 14px;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  animation: e404Tear 5.3s linear infinite;
}
@keyframes e404Tear {
  0%,
  60%,
  100% {
    opacity: 0;
    transform: translateY(20vh);
  }
  61%,
  62% {
    opacity: 1;
    transform: translateY(22vh);
  }
  62.5%,
  63.5% {
    opacity: 1;
    transform: translateY(57vh);
    height: 34px;
  }
  64% {
    opacity: 0;
  }
  80% {
    opacity: 0;
    transform: translateY(71vh);
  }
  81%,
  82% {
    opacity: 1;
    transform: translateY(71vh);
    height: 8px;
  }
  82.5% {
    opacity: 0;
  }
}
/* whole screen inverts for a few frames */
@keyframes e404Flash {
  0%,
  88%,
  100% {
    filter: invert(0);
  }
  88.4%,
  89.6% {
    filter: invert(1);
  }
  90%,
  92% {
    filter: invert(0);
  }
  92.4%,
  93.2% {
    filter: invert(1);
  }
  93.6% {
    filter: invert(0);
  }
}

.err404Center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) 24px;
  text-align: center;
}
.err404Bar {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 7px 14px;
  border: 2px solid #fff;
  mix-blend-mode: difference;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}
.err404Live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.err404Pulse {
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  animation: e404Blink 0.9s linear infinite;
}
@keyframes e404Blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* 3D: script digits stacked in depth (outlined copies behind a heavy face), swaying, plus glitch slices */
.e404Scene {
  position: relative;
  margin-top: 10px;
  perspective: 900px;
  mix-blend-mode: difference;
  animation: e404Jitter 8s linear infinite;
}
.err404Num {
  position: relative;
  margin: 0;
  padding: 0 0.12em;
  font-family: "Ephesis", cursive;
  font-weight: 400;
  font-size: clamp(9rem, 27vw, 21rem);
  line-height: 0.95;
  color: #fff;
  transform-style: preserve-3d;
  animation: e404Sway 7s ease-in-out infinite alternate;
}
.e404L {
  position: absolute;
  inset: 0;
  padding: inherit;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
.e404L1 {
  transform: translateZ(-9px);
}
.e404L2 {
  transform: translateZ(-18px);
}
.e404L3 {
  transform: translateZ(-27px);
}
.e404L4 {
  transform: translateZ(-36px);
}
.e404L5 {
  transform: translateZ(-45px);
}
.e404L6 {
  transform: translateZ(-54px);
}
.e404L7 {
  transform: translateZ(-63px);
}
.e404L8 {
  transform: translateZ(-72px);
}
.e404L9 {
  transform: translateZ(-81px);
}
.e404L10 {
  transform: translateZ(-90px);
}
.e404Face {
  position: relative;
  display: block;
  -webkit-text-stroke: 6px #fff;
}
.e404Face::before,
.e404Face::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}
.e404Face::before {
  animation: e404SliceA 3.2s linear infinite;
}
.e404Face::after {
  animation: e404SliceB 3.7s linear infinite;
}
@keyframes e404Sway {
  0% {
    transform: rotateX(12deg) rotateY(-28deg) rotateZ(-2deg);
  }
  100% {
    transform: rotateX(4deg) rotateY(20deg) rotateZ(1deg);
  }
}
@keyframes e404Jitter {
  0%,
  88%,
  100% {
    transform: translate(0, 0) skewX(0deg);
  }
  88.5% {
    transform: translate(10px, -4px) skewX(-9deg);
  }
  89.5% {
    transform: translate(-14px, 3px) skewX(7deg);
  }
  90.5% {
    transform: translate(6px, 0) skewX(-3deg);
  }
  91% {
    transform: translate(0, 0) skewX(0deg);
  }
  92.5% {
    transform: translate(-9px, 2px) skewX(6deg);
  }
  93.5% {
    transform: translate(0, 0) skewX(0deg);
  }
}
@keyframes e404SliceA {
  0%,
  82%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateX(0);
  }
  83% {
    opacity: 0;
  }
  84%,
  86% {
    opacity: 1;
    clip-path: inset(8% 0 62% 0);
    transform: translateX(-46px);
  }
  87%,
  89% {
    opacity: 1;
    clip-path: inset(52% 0 20% 0);
    transform: translateX(52px);
  }
  90% {
    opacity: 0;
  }
  93% {
    opacity: 0;
  }
  94%,
  96% {
    opacity: 1;
    clip-path: inset(30% 0 45% 0);
    transform: translateX(-68px);
  }
  97% {
    opacity: 0;
  }
}
@keyframes e404SliceB {
  0%,
  70%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateX(0);
  }
  71% {
    opacity: 0;
  }
  72%,
  74% {
    opacity: 1;
    clip-path: inset(66% 0 6% 0);
    transform: translateX(58px);
  }
  75%,
  77% {
    opacity: 1;
    clip-path: inset(4% 0 74% 0);
    transform: translateX(-40px);
  }
  78% {
    opacity: 0;
  }
  91% {
    opacity: 0;
  }
  92%,
  94% {
    opacity: 1;
    clip-path: inset(40% 0 30% 0);
    transform: translateX(72px);
  }
  95% {
    opacity: 0;
  }
}

.err404Copy {
  margin-top: 8px;
  mix-blend-mode: difference;
  color: #fff;
}
.err404Caption {
  margin: 22px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}
.err404Sub {
  max-width: 46ch;
  margin: 10px auto 0;
  color: #fff;
  font-size: 0.9375rem;
}
.err404Cta {
  position: relative;
  z-index: 2;
  justify-content: center;
  margin-top: 30px;
}
.err404BtnDark,
.err404BtnLight {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #000;
  border-radius: 0;
}
.err404BtnDark {
  background: #000;
  color: #fff;
}
.err404BtnLight {
  background: #fff;
  color: #000;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #000;
}
@media (hover: hover) {
  .err404BtnDark:hover,
  .err404BtnLight:hover {
    transform: translate(-2px, -2px);
  }
}

@media (max-width: 760px) {
  .e404m {
    --w: 200px;
    padding: 10px;
  }
  .e404m--hero,
  .e404m--pricing,
  .e404m--team,
  .e404m--ops,
  .e404m--blog {
    width: 210px;
  }
  .e404m--ops,
  .e404m--blog {
    display: none;
  }
  .e404L:nth-child(n + 7) {
    display: none;
  }
  .err404Bar {
    gap: 10px;
    font-size: 0.6875rem;
  }
}

/* Blog teaser on the homepage: three article tiles */
.blogTeaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.blogCard--tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}
.blogCard--tile h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.blogCard--tile .rowText {
  margin: 0;
  font-size: 0.9375rem;
}
@media (max-width: 900px) {
  .blogTeaser {
    grid-template-columns: 1fr;
  }
}
/* Package cards: short highlights stay visible, the full block list from the package documents expands below */
.planMore {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.planMore summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-2);
}
.planMore summary::-webkit-details-marker {
  display: none;
}
.planMore summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.planMore[open] summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}
.planMore .ticks {
  margin-top: 12px;
  font-size: 0.875rem;
}
.planMore:not([open]) .moreOn,
.planMore[open] .moreOff {
  display: none;
}
.planMoreLead {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.planMore[open] .moreOn {
  display: inline;
}
/* Blog series 2: category eyebrow, cover illustration, in-section subheads, source note, card thumbnails */
.pCat {
  margin: 18px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}
.pCover {
  margin: 22px 0 8px;
}
.pCover img,
.blogCardImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--wash);
}
.blogBody h3 {
  margin: 22px 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.pSourceNote {
  margin-top: 10px;
}
.blogCardImg {
  margin-bottom: 16px;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.blogBody h3 + p {
  margin-top: 4px;
}
.blogGrid .blogCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blogGrid .blogCard .blogDate {
  margin-top: auto;
  padding-top: 12px;
}

/* ── Back to top ─────────────────────────────────────────────────────────── */
/* Room at the very end of the dark footer for the arrow (and the cookie banner while it is shown), so
   neither ever covers the last footer links when the page is scrolled all the way down. */
html.has-toTop .siteFooter {
  padding-bottom: calc(84px + var(--cookieLift, 0px));
}
.toTop {
  position: fixed;
  z-index: 55;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cookieLift, 0px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s linear 0.2s,
    bottom 0.2s;
}
.toTop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0s,
    bottom 0.2s;
}
.toTop:hover {
  border-color: var(--line-2);
  color: var(--accent);
}
.toTop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .toTop,
  .toTop.is-on {
    transition: none;
    transform: none;
  }
}
@media print {
  .toTop {
    display: none;
  }
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding-right: 40px;
  color: var(--ink);
  font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Blog: covers in the homepage teaser, copyright line under the list and under every article */
.blogCard--tile .blogCardImg {
  margin-bottom: 6px;
}
.blogCard--tile .blogDate {
  margin-top: auto;
}
.blogCopyright {
  max-width: 72ch;
  margin: 40px auto 0;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

/* Partner card: key facts under the description fill the column next to the illustrations */
.partnerFacts {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.partnerFacts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 6px 16px;
  align-items: start;
}
.partnerFacts dt {
  padding-top: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.partnerFacts dd {
  margin: 0;
}
.partnerChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partnerChips li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.partnerChips--text {
  display: grid;
  gap: 6px;
}
.partnerChips--text li {
  position: relative;
  padding: 4px 0 0 18px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.partnerChips--text li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 560px) {
  .partnerFacts > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .partnerFacts dt {
    padding-top: 0;
  }
}

/* Doubts we hear (objections): two columns of cards, the doubt in the client's words on top */

/* ── "Questions?" side card (bottom left; the back-to-top arrow lives bottom right) ── */
.helpCard {
  position: fixed;
  z-index: 56;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cookieLift, 0px));
  width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: opsFadeUp 0.35s var(--ease) both;
}
.helpCard[hidden] {
  display: none;
}
.helpClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.helpClose:hover {
  background: var(--wash);
  color: var(--ink);
}
.helpEyebrow {
  margin: 0 36px 6px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.helpText {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.helpWhen {
  margin: 8px 0 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.helpBtns {
  display: grid;
  gap: 8px;
}
.helpBtn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}
.helpFab {
  position: fixed;
  z-index: 55;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cookieLift, 0px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.helpFab[hidden] {
  display: none;
}
.helpFab:hover {
  background: var(--accent-2);
}
.helpFab:focus-visible,
.helpClose:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .helpCard {
    right: 72px;
    width: auto;
    padding: 16px 14px 14px;
  }
  .helpText {
    font-size: 0.9375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .helpCard {
    animation: none;
  }
}
@media print {
  .helpCard,
  .helpFab {
    display: none !important;
  }
}

/* Doubts on the home page: a messenger. Questions on the left, the reply arrives in the chat window. */
.dChat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.dSide .sub {
  margin-top: 14px;
}
.dQs {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  counter-reset: dq;
}
.dQ {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9875rem;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.2s,
    transform 0.35s var(--ease);
}
.dQn {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  transition: color 0.2s;
}
@media (hover: hover) {
  .dQ:hover {
    background: var(--paper);
    color: var(--ink);
    transform: translateX(4px);
  }
}
.dQ[aria-selected="true"] {
  background: var(--wash);
  border-color: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.dQ[aria-selected="true"] .dQn {
  color: var(--accent);
}
.dQ:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dAll {
  display: inline-block;
  margin: 18px 0 0 16px;
  font-weight: 600;
}
.dWin {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dWinHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dAva {
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 50%;
  background: var(--wash);
  object-fit: contain;
}
.dWinHead strong {
  display: block;
  font-size: 1rem;
}
.dOnline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ok);
}
.dOnline::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(14, 122, 85, 0.15);
}
.dWinBody {
  position: relative;
  min-height: 380px;
  padding: 24px 20px;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dPanel {
  display: grid;
  gap: 14px;
}
.dMsg {
  max-width: 86%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 0.9875rem;
  text-wrap: pretty;
}
.dMsg--me {
  justify-self: end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.dMsg--us {
  justify-self: start;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.dPanel.is-in .dMsg--me {
  animation: dIn 0.4s var(--ease) both;
}
.dPanel.is-in:not(.is-wait) .dMsg--us {
  animation: dIn 0.45s var(--ease) both;
}
.dPanel.is-wait .dMsg--us {
  display: none;
}
.dPanel.is-in:not(.is-wait) .dMsg--cta {
  animation-delay: 0.35s;
}
.dMsg--cta {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.dMsg--cta .btn {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.9375rem;
}
@keyframes dIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dTyping {
  display: inline-flex;
  gap: 5px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.dTyping[hidden] {
  display: none;
}
.dTyping i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: dDot 1s infinite ease-in-out;
}
.dTyping i:nth-child(2) {
  animation-delay: 0.15s;
}
.dTyping i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dDot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: none;
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.dAsk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 14px 14px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 0.9375rem;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.dSend {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .dAsk:hover {
    border-color: var(--accent);
    color: var(--ink);
  }
  .dAsk:hover .dSend {
    transform: translateX(3px) rotate(-12deg);
  }
}
@media (max-width: 1023px) {
  .dChat {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .dWin {
    position: static;
  }
  /* questions become a swipeable row of chips; the next one peeks out at the edge */
  .dQs {
    display: flex;
    gap: 8px;
    margin: 22px calc(var(--gutter) * -1) 0;
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .dQs::-webkit-scrollbar {
    display: none;
  }
  .dQ {
    flex: none;
    width: auto;
    max-width: 78vw;
    scroll-snap-align: start;
    border-color: var(--line);
    background: var(--surface);
  }
  .dAll {
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  .dWinBody {
    min-height: 340px;
    padding: 18px 14px;
  }
  .dMsg {
    max-width: 92%;
    font-size: 0.9375rem;
  }
  .dAsk {
    font-size: 0.875rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dPanel.is-in .dMsg,
  .dTyping i {
    animation: none;
  }
  .dQ,
  .dSend {
    transition: none;
  }
}

/* The /doubts/ page */
.dPage {
  max-width: 1080px;
  margin-inline: auto;
}
.dHero {
  max-width: 760px;
}
.dToc {
  margin: 36px 0 12px;
}
.dTocH {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--ink-3);
  font-weight: 600;
}
.dToc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dTile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  transition:
    border-color 0.2s,
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.dTileN,
.dNum {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
}
@media (hover: hover) {
  .dTile:hover {
    border-color: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}
.dList {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}
.dItem {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 36px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  scroll-margin-top: 24px;
}
.dItem--flip .dFig {
  order: 2;
}
.dFig {
  margin: 0;
}
.dFig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.dText h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.dText p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
}
.dCta {
  margin: 40px 0 8px;
  padding: 36px;
  border-radius: 24px;
  background: var(--accent);
  color: #fff;
}
.dCta p {
  margin: 0 0 20px;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.dCtaMain {
  background: #fff;
  color: var(--accent);
}
.dCtaTg {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
}
@media (hover: hover) {
  .dCtaMain:hover {
    background: var(--wash);
  }
  .dCtaTg:hover {
    border-color: #fff;
  }
}
@media (max-width: 860px) {
  .dItem,
  .dItem--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
  }
  .dItem--flip .dFig {
    order: 0;
  }
}
@media (max-width: 640px) {
  .dToc ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .dCta {
    padding: 24px 20px;
  }
  .dCta .ctaRow {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Blog article */
.bMain {
  padding-top: clamp(24px, 4vw, 48px);
}
.bWrap {
  max-width: 1160px;
  margin-inline: auto;
}
.bCrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.bCrumbs a {
  color: var(--ink-2);
}
.bCrumbs a:hover {
  color: var(--accent);
}
.bHero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  margin-top: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.bHeroText .chip {
  margin: 0 0 16px;
}
.bTitle {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.bLead {
  margin: 18px 0 0;
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.bMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.bMeta > * {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.bCover {
  margin: 0;
}
.bCover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.bLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
  margin-top: 44px;
}
.bArticle {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.bArticle.blogBody p,
.bArticle.blogBody li {
  margin: 0 0 1.1em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-wrap: pretty;
}
.bArticle.blogBody li {
  margin: 0;
}
.bArticle .bIntro p {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ink);
}
.bIntro {
  margin-bottom: 8px;
}
.bArticle h2 {
  margin: 2.2em 0 0.6em;
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.bArticle h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.1875rem;
  color: var(--ink);
}
.bArticle ul,
.bArticle ol {
  margin: 0 0 1.2em;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.bArticle ul li {
  position: relative;
  padding-left: 26px;
}
.bArticle ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--accent);
}
.bArticle ol {
  counter-reset: bo;
}
.bArticle ol li {
  position: relative;
  padding: 14px 16px 14px 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  counter-increment: bo;
}
.bArticle ol li::before {
  content: counter(bo);
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wash);
  color: var(--accent);
  font: 600 0.875rem var(--font-mono);
}
.bSources {
  margin-top: 2.4em;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.bSources h2 {
  margin: 0 0 10px;
  font-size: 1.0625rem;
}
.bSources .blogSources {
  gap: 8px;
}
.bSide {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 16px;
}
.bToc {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.bToc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bToc summary::-webkit-details-marker {
  display: none;
}
.bToc summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.bToc[open] summary::after {
  transform: rotate(-135deg);
}
.bToc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: bt;
}
.bToc li {
  counter-increment: bt;
}
.bToc a {
  display: flex;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition:
    background 0.2s,
    color 0.2s;
}
.bToc a::before {
  content: counter(bt, decimal-leading-zero);
  flex: none;
  font: 0.75rem var(--font-mono);
  color: var(--ink-3);
  padding-top: 2px;
}
.bToc a:hover,
.bToc a[aria-current] {
  background: var(--wash);
  color: var(--accent);
}
.bSideCta {
  padding: 20px;
  border-radius: 16px;
  background: var(--wash);
  border: 1px solid var(--accent-soft);
}
.bSideCta p {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--ink);
}
.bSideCta .btn {
  width: 100%;
  min-height: 44px;
  font-size: 0.9375rem;
}
.bCta {
  margin-top: 56px;
}
.bMore {
  margin-top: 64px;
}
.bMoreH {
  margin: 0 0 20px;
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
  letter-spacing: -0.02em;
}
@media (max-width: 1023px) {
  .bHero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .bCover {
    max-width: 640px;
  }
  .bLayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 28px;
  }
  .bSide {
    position: static;
    order: -1;
  }
  .bSideCta {
    display: none;
  }
  .bArticle {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .bArticle {
    font-size: 1rem;
  }
  .bArticle .bIntro p {
    font-size: 1.0625rem;
  }
  .bArticle ol li {
    padding-left: 50px;
  }
  .bSources {
    padding: 18px;
  }
}