/* ==========================================================================
   Oqera — marketing site
   --------------------------------------------------------------------------
   Palette and elevation are taken verbatim from the product's own tokens
   (frontend/src/index.css) so a screenshot of the app sits on the page
   without a seam. Do not invent new greys here: add a token instead.
   ========================================================================== */

:root {
  /* --- product tokens (frontend/src/index.css) --- */
  --navy: 5 22 55;
  --bg-app: 8 11 17;
  --bg-panel: 13 17 26;
  --bg-surface: 19 25 37;
  --bg-elevated: 24 32 45;
  --border: 34 43 58;
  --border-strong: 43 54 72;
  --text: 244 247 251;
  --text-2: 152 164 181;
  --text-3: 102 112 133;
  --accent: 79 124 255;
  --accent-hover: 107 146 255;
  --accent-light: 143 170 255;
  --success: 53 185 121;
  --warning: 230 180 80;

  /* --- typography --- */
  --font-display: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- rhythm --- */
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 8.4vw, 112px);
  --radius: 14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  position: relative;
  background: rgb(var(--bg-app));
  color: rgb(var(--text));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Blueprint ground: a faint square grid plus a deep navy bloom behind the fold.
   Painted on ::before so no wrapper element is needed. It is absolute, not
   fixed, and bounded in height — a fixed layer would drag the grid and the navy
   tint down the whole page and grey out every section below the hero. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1180px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 50% -12%, rgb(var(--accent) / 0.16) 0%, rgb(var(--navy) / 0.5) 34%, transparent 72%),
    linear-gradient(rgb(var(--border) / 0.4) 1px, transparent 1px) 0 0 / 100% 88px,
    linear-gradient(90deg, rgb(var(--border) / 0.4) 1px, transparent 1px) 0 0 / 88px 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 96%);
  opacity: 0.7;
}

body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }

a {
  color: rgb(var(--accent-light));
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover { color: rgb(var(--text)); }

:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgb(var(--accent) / 0.32);
  color: rgb(var(--text));
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* the header is sticky, so an anchor jump must not tuck the heading under it */
[id] { scroll-margin-top: 84px; }

.rule {
  border: 0;
  border-top: 1px solid rgb(var(--border));
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: rgb(var(--accent));
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 16px; }

/* Section label sitting on a hairline, like a callout on a technical drawing. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin: 0 0 22px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--border-strong)), transparent);
}
.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--accent));
  flex: none;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.9rem, 7.2vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.h-section {
  font-size: clamp(1.9rem, 3.9vw, 3rem);
  letter-spacing: -0.028em;
}

.h-card {
  font-size: 1.125rem;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

.lede {
  font-size: clamp(1.03rem, 1.55vw, 1.22rem);
  line-height: 1.62;
  color: rgb(var(--text-2));
  max-width: 56ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}

.muted { color: rgb(var(--text-2)); }
.faint { color: rgb(var(--text-3)); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: rgb(var(--accent));
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--primary {
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.14) inset,
              0 10px 30px -12px rgb(var(--accent) / 0.85);
}
.btn--primary:hover { --btn-bg: rgb(var(--accent-hover)); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: rgb(var(--text));
  border-color: rgb(var(--border-strong));
}
.btn--ghost:hover {
  --btn-bg: rgb(var(--bg-surface));
  border-color: rgb(var(--accent) / 0.5);
}

.btn--sm { padding: 9px 16px; font-size: 0.875rem; border-radius: 9px; }

.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgb(var(--bg-app) / 0.76);
  border-bottom: 1px solid rgb(var(--border) / 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.brand img { height: 21px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}
.site-nav a {
  color: rgb(var(--text-2));
  font-size: 0.875rem;
  letter-spacing: -0.005em;
}
.site-nav a:hover { color: rgb(var(--text)); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* EN / RU segmented control */
.lang {
  display: inline-flex;
  border: 1px solid rgb(var(--border-strong));
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgb(var(--text-3));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.lang button:hover { color: rgb(var(--text-2)); }
.lang button[aria-pressed="true"] {
  background: rgb(var(--accent) / 0.16);
  color: rgb(var(--accent-light));
}

@media (max-width: 860px) {
  .site-nav { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(56px, 8vw, 104px);
  /* Kept small on purpose: the next section (.section) already carries its
     own clamp(64px, 8.4vw, 112px) top padding. Giving the hero a matching
     bottom padding on top of that stacked to ~200px of dead air above
     "the actual problem" — bigger than either section's own rhythm called for. */
  padding-bottom: clamp(8px, 1.6vw, 28px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero .lede { max-width: 560px; }

.hero__tiers {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin: 0 0 26px;
}
.hero__tiers span { white-space: nowrap; }
.hero__tiers i {
  font-style: normal;
  color: rgb(var(--accent) / 0.7);
}

/* Framed product screenshot — a hairline "window" with a soft bloom under it. */
.frame {
  position: relative;
  border: 1px solid rgb(var(--border-strong));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel));
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / 0.95),
              0 0 0 1px rgb(255 255 255 / 0.02) inset;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgb(var(--accent) / 0.09), transparent 70%);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--bg-surface) / 0.7);
}
.frame__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--border-strong));
  flex: none;
}
.frame__bar .label {
  margin-inline-start: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}

.frame img { width: 100%; height: auto; }

.frame--crop img {
  /* the office canvas has dead space bottom-right; show the populated area */
  object-fit: cover;
  object-position: left top;
  aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   Hero orchestration diagram — one task, through the COO, into the rooms it
   picks, out to a finished result. Grey = idle, blue = the active path,
   green = done — the same three states the workflow demo further down the
   page uses (.pill / .tl__step), not a new colour language for the hero.
   -------------------------------------------------------------------------- */

.orch {
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.8vw, 30px) clamp(30px, 3.4vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.orch__task,
.orch__result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgb(var(--border-strong));
  border-radius: 999px;
  background: rgb(var(--bg-surface) / 0.7);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgb(var(--text-2));
}
.orch__result {
  border-color: rgb(var(--success) / 0.45);
  background: rgb(var(--success) / 0.1);
  color: rgb(var(--success));
}

.orch__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--text-3));
  flex: none;
}
.orch__pulse--done { background: rgb(var(--success)); }

.orch__link {
  width: 1px;
  height: 24px;
  background: rgb(var(--border-strong));
}

.orch__node {
  width: 100%;
  max-width: 300px;
  border: 1px solid rgb(var(--accent) / 0.45);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(var(--accent) / 0.1), transparent 65%),
              rgb(var(--bg-panel) / 0.92);
  padding: 13px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.orch__node-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--accent-light));
}
.orch__node-d {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(var(--text-2));
}

/* the branch/merge connector — a horizontal bar with three drops. The middle
   one (the active room's) carries the accent; the outer two stay neutral. */
.orch__fan {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 22px;
  flex: none;
}
.orch__fan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: rgb(var(--border-strong));
}
.orch__fan span {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgb(var(--border-strong));
}
.orch__fan span:nth-child(1) { left: 16.6%; }
.orch__fan span:nth-child(2) { left: 50%; background: rgb(var(--accent) / 0.65); }
.orch__fan span:nth-child(3) { left: calc(83.3% - 1px); }

.orch__rooms {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.orch__room {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--bg-panel) / 0.7);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.orch__room--active {
  border-color: rgb(var(--accent) / 0.55);
  background: rgb(var(--accent) / 0.08);
}
.orch__room-h {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.orch__room-r {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.orch__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--text-3));
  flex: none;
}
.orch__dot--on {
  background: rgb(var(--accent));
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.18);
}
.orch__specs { display: flex; gap: 4px; }
.orch__specs i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--border-strong));
  font-style: normal;
}
.orch__room--active .orch__specs i { background: rgb(var(--accent) / 0.55); }

.orch__caption {
  margin: 16px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgb(var(--text-3));
  max-width: 260px;
}

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

@media (max-width: 560px) {
  .orch__rooms { grid-template-columns: 1fr; gap: 8px; }
  /* three stacked rooms can't branch sideways — collapse the fan to a
     single centred line so it still reads as one path, not a broken tree */
  .orch__fan::before,
  .orch__fan span:nth-child(1),
  .orch__fan span:nth-child(3) { display: none; }
  .orch__fan span:nth-child(2) { left: 50%; }
}

/* --------------------------------------------------------------------------
   Before / after diagram
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}
@media (max-width: 780px) {
  .compare { grid-template-columns: 1fr; }
}

.panel {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel) / 0.7);
  padding: clamp(22px, 3vw, 32px);
}
.panel--accent {
  border-color: rgb(var(--accent) / 0.42);
  background:
    linear-gradient(180deg, rgb(var(--accent) / 0.07), transparent 55%),
    rgb(var(--bg-panel) / 0.7);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}
.panel__head h3 { font-size: 1.05rem; }

.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgb(var(--border-strong));
  color: rgb(var(--text-3));
  white-space: nowrap;
}
.tag--accent {
  border-color: rgb(var(--accent) / 0.45);
  color: rgb(var(--accent-light));
  background: rgb(var(--accent) / 0.1);
}
.tag--free {
  border-color: rgb(var(--success) / 0.42);
  color: rgb(var(--success));
  background: rgb(var(--success) / 0.09);
}

/* the manual chain: node, then a dashed hand-off line */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li {
  position: relative;
  padding: 0 0 0 30px;
  min-height: 46px;
}
.chain li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgb(var(--border-strong));
  background: rgb(var(--bg-app));
}
.chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: -4px;
  width: 1px;
  border-left: 1px dashed rgb(var(--border-strong));
}
.chain .step {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.chain .hand {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin-top: 3px;
}
.chain--solid li::before {
  border-color: rgb(var(--accent) / 0.75);
  background: rgb(var(--accent) / 0.2);
}
.chain--solid li:not(:last-child)::after {
  border-left: 1px solid rgb(var(--accent) / 0.4);
}
.chain--solid .hand { color: rgb(var(--accent-light) / 0.85); }

.panel__foot {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--border));
  font-size: 0.875rem;
  color: rgb(var(--text-2));
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 46px;
  background: rgb(var(--border));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step-card {
  background: rgb(var(--bg-panel));
  padding: clamp(24px, 3vw, 34px);
}
.step-card__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgb(var(--accent));
  margin-bottom: 16px;
}
.step-card h3 { font-size: 1.16rem; margin-bottom: 11px; }
.step-card p { margin: 0; font-size: 0.9375rem; color: rgb(var(--text-2)); }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Core rooms — three cards carrying a real roster and the real routes
   -------------------------------------------------------------------------- */

.cores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
@media (max-width: 1000px) { .cores { grid-template-columns: 1fr; } }

.core {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgb(var(--accent) / 0.05), transparent 42%),
    rgb(var(--bg-panel) / 0.85);
  padding: clamp(22px, 2.6vw, 30px);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.core:hover { border-color: rgb(var(--accent) / 0.4); transform: translateY(-2px); }

.core__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.core h3 { font-size: 1.24rem; }
.core__strap {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.core__p {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(var(--text-2));
}

/* the roster, read as a chain: each role hands back to the manager */
.core__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(var(--border));
}
.role {
  font-size: 0.8125rem;
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgb(var(--border-strong));
  background: rgb(var(--bg-surface) / 0.7);
  color: rgb(var(--text-2));
}
.role--check {
  border-color: rgb(var(--success) / 0.4);
  background: rgb(var(--success) / 0.08);
  color: rgb(var(--success));
}

.core__routes {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
  align-content: start;
}
.core__routes li {
  position: relative;
  padding-inline-start: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgb(var(--text-3));
}
.core__routes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 1px;
  background: rgb(var(--accent) / 0.8);
}

/* --------------------------------------------------------------------------
   Secondary rooms — the same information, deliberately quieter
   -------------------------------------------------------------------------- */

.more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(var(--border));
}
.more__h { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
.more__sub { margin: 0; font-size: 0.875rem; color: rgb(var(--text-3)); }

.mores {
  display: grid;
  /* Explicitly five, not auto-fill: there are exactly five of these and an
     auto-fill row of four left Growth Lab orphaned on a line of its own. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
@media (max-width: 1080px) { .mores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .mores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .mores { grid-template-columns: 1fr; } }
.mroom {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--bg-panel) / 0.65);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.mroom:hover { border-color: rgb(var(--border-strong)); background: rgb(var(--bg-surface) / 0.8); }
.mroom__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mroom h4 { font-size: 0.9375rem; }
.mroom p {
  margin: 0;
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(var(--text-2));
}
.mroom__a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  padding-top: 10px;
  border-top: 1px solid rgb(var(--border));
}

/* --------------------------------------------------------------------------
   ChatGPT / Claude comparison — a ledger, not an attack
   -------------------------------------------------------------------------- */

.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
@media (max-width: 820px) { .versus { grid-template-columns: 1fr; } }

.vcol {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel) / 0.7);
  padding: clamp(22px, 3vw, 32px);
}
.vcol--accent {
  border-color: rgb(var(--accent) / 0.42);
  background:
    linear-gradient(180deg, rgb(var(--accent) / 0.07), transparent 55%),
    rgb(var(--bg-panel) / 0.7);
}
.vcol__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.vcol__head h3 { font-size: 1.05rem; }
.vcol__lead {
  margin: 0 0 18px;
  font-size: 0.9375rem;
  color: rgb(var(--text-2));
}

.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vlist li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgb(var(--text-2));
}
/* a dash for the manual column, a tick for the delegated one */
.vlist li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 11px;
  width: 10px;
  height: 1px;
  background: rgb(var(--text-3));
}
.vlist--check li::before {
  content: "";
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  background: none;
  border-inline-start: 1.5px solid rgb(var(--accent));
  border-block-end: 1.5px solid rgb(var(--accent));
  transform: rotate(-45deg);
}

.versus__foot {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  text-align: center;
}

/* --------------------------------------------------------------------------
   Infrastructure strip — the old feature grid, tightened
   -------------------------------------------------------------------------- */

.infra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 40px;
  background: rgb(var(--border));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .infra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .infra { grid-template-columns: 1fr; } }

.icard {
  background: rgb(var(--bg-panel));
  padding: clamp(20px, 2.2vw, 26px);
}
.icard h3 {
  font-size: 0.9875rem;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.icard h3 svg { flex: none; color: rgb(var(--accent)); }
.icard p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgb(var(--text-2)); }
.icard b { color: rgb(var(--text)); font-weight: 500; }

/* --------------------------------------------------------------------------
   Key / BYO block
   -------------------------------------------------------------------------- */

.keyblock {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border: 1px solid rgb(var(--accent) / 0.32);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 0% 0%, rgb(var(--accent) / 0.12), transparent 62%),
    rgb(var(--bg-panel));
  padding: clamp(28px, 4vw, 52px);
}
@media (max-width: 880px) {
  .keyblock { grid-template-columns: 1fr; }
}

.keyfacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.keyfacts li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  color: rgb(var(--text-2));
  line-height: 1.5;
}
.keyfacts svg { flex: none; margin-top: 3px; color: rgb(var(--accent)); }
.keyfacts strong { color: rgb(var(--text)); font-weight: 500; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
  align-items: start;
}
@media (max-width: 780px) { .plans { grid-template-columns: 1fr; } }

.plan {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel) / 0.85);
  padding: clamp(26px, 3vw, 36px);
}
.plan--featured {
  border-color: rgb(var(--accent) / 0.45);
  background:
    linear-gradient(180deg, rgb(var(--accent) / 0.08), transparent 46%),
    rgb(var(--bg-panel));
}
.plan__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.plan__name h3 { font-size: 1.16rem; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.035em;
}
.plan__price .amount { font-size: clamp(2.5rem, 5vw, 3.2rem); line-height: 1; }
.plan__price .per {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.plan__for {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: rgb(var(--text-2));
  min-height: 3em;
}
/* A full-width plan CTA has to be allowed to wrap. `.btn` is nowrap by
   default, and the Russian labels are long enough that a nowrap button sets a
   min-content floor which pushes the whole card wider than a 375px phone. */
.plan .btn {
  width: 100%;
  margin-top: 24px;
  white-space: normal;
  text-align: center;
  min-width: 0;
}

.plan__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgb(var(--border));
  display: grid;
  gap: 12px;
}
.plan__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: rgb(var(--text-2));
}
.plan__list svg { flex: none; margin-top: 4px; color: rgb(var(--accent)); }
.plan__list b { color: rgb(var(--text)); font-weight: 500; }

/* comparison table */
.table-wrap {
  margin-top: 42px;
  overflow-x: auto;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel) / 0.6);
}
table.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
table.cmp th,
table.cmp td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgb(var(--border));
}
table.cmp thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  font-weight: 400;
  background: rgb(var(--bg-surface) / 0.6);
}
table.cmp tbody th {
  font-weight: 400;
  color: rgb(var(--text-2));
}
table.cmp td { color: rgb(var(--text)); font-variant-numeric: tabular-nums; }
table.cmp tr:last-child th,
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp td.is-featured { background: rgb(var(--accent) / 0.05); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  margin-top: 42px;
  border-top: 1px solid rgb(var(--border));
}
.faq details {
  border-bottom: 1px solid rgb(var(--border));
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: -0.014em;
  color: rgb(var(--text));
  transition: color 0.18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: rgb(var(--accent-light)); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1.5px solid rgb(var(--text-3));
  border-bottom: 1.5px solid rgb(var(--text-3));
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer {
  padding: 0 0 24px;
  max-width: 74ch;
  color: rgb(var(--text-2));
  font-size: 0.9375rem;
}
.faq .answer p { margin: 0 0 12px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Honesty / status note
   -------------------------------------------------------------------------- */

.status {
  border: 1px solid rgb(var(--border-strong));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-surface) / 0.6);
  padding: clamp(24px, 3vw, 38px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.status__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgb(var(--warning) / 0.45);
  background: rgb(var(--warning) / 0.1);
  color: rgb(var(--warning));
  display: grid;
  place-items: center;
  flex: none;
}
.status h3 { font-size: 1.06rem; margin-bottom: 10px; }
.status p { margin: 0 0 10px; font-size: 0.9375rem; color: rgb(var(--text-2)); max-width: 78ch; }
.status p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
  .status { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.closer {
  text-align: center;
  padding-block: clamp(76px, 11vw, 140px);
  border-top: 1px solid rgb(var(--border));
  background: radial-gradient(80% 120% at 50% 100%, rgb(var(--accent) / 0.11), transparent 68%);
}
.closer .lede { margin-inline: auto; }
.closer .cta-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--bg-panel) / 0.6);
  padding-block: 46px 40px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer li a { color: rgb(var(--text-2)); font-size: 0.875rem; }
.site-footer li a:hover { color: rgb(var(--text)); }
.site-footer__note {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: rgb(var(--text-3));
  max-width: 42ch;
}
.site-footer__bar {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--border));
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgb(var(--text-3));
}
@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Long-form document pages (terms, privacy)
   -------------------------------------------------------------------------- */

.doc { max-width: 78ch; margin-inline: auto; padding-block: clamp(48px, 7vw, 88px); }
.doc h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: 10px; }
.doc h2 {
  font-size: 1.35rem;
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--border));
}
.doc h3 { font-size: 1.06rem; margin: 28px 0 10px; }
.doc p, .doc li { color: rgb(var(--text-2)); font-size: 0.9375rem; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-inline-start: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: rgb(var(--text)); font-weight: 500; }
.doc blockquote {
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid rgb(var(--warning) / 0.4);
  border-radius: var(--radius);
  background: rgb(var(--warning) / 0.07);
  color: rgb(var(--text-2));
  font-size: 0.875rem;
}
.doc blockquote p:last-child { margin-bottom: 0; }
.doc code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: rgb(var(--bg-surface));
  border: 1px solid rgb(var(--border));
  border-radius: 5px;
  padding: 1px 5px;
}
.doc hr { border: 0; border-top: 1px solid rgb(var(--border)); margin: 34px 0; }

/* --------------------------------------------------------------------------
   Proof — the animated recreation of the shipped Market question route
   --------------------------------------------------------------------------
   Every visible string here is the product's own (workflow stage names, status
   vocabulary, durable-event names, artifact type). Keep it that way: the whole
   value of this section is that a visitor recognises it once they sign up.
   -------------------------------------------------------------------------- */

[hidden] { display: none !important; }

.section--tight { padding-block: calc(var(--section-y) * 0.62); }

.proof__shot { margin: 44px 0 0; }
/* The COO canvas is mostly empty space above the input. Crop to the band that
   carries the story — the prompt, the single task field and the suggestions —
   instead of spending 500px of the page on blank board. */
.proof__shot .frame img {
  object-fit: cover;
  object-position: center bottom;
  aspect-ratio: 21 / 8;
}
@media (max-width: 700px) {
  /* on a phone the same crop would shrink the UI past reading size */
  .proof__shot .frame img { aspect-ratio: 4 / 3; object-position: center 78%; }
}
.proof__shot figcaption {
  margin-top: 14px;
  font-size: 0.875rem;
  color: rgb(var(--text-3));
  max-width: 62ch;
}

/* --- the run panel ------------------------------------------------------- */

.run {
  margin-top: 22px;
  border: 1px solid rgb(var(--border-strong));
  border-radius: var(--radius-lg);
  background: rgb(var(--bg-panel));
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / 0.95);
}

.run__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--bg-surface) / 0.7);
}
.run__bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--border-strong));
  flex: none;
}
.run__bar .label {
  margin-inline-start: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.run__type {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--accent-light));
  border: 1px solid rgb(var(--accent) / 0.35);
  background: rgb(var(--accent) / 0.1);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.run__task {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid rgb(var(--border));
  background: rgb(var(--bg-app) / 0.4);
}
.run__tasklabel {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  padding-top: 2px;
}
.run__task p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(var(--text));
  max-width: 70ch;
}

.run__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .run__body { grid-template-columns: 1fr; } }

.run__main { padding: clamp(18px, 2.4vw, 26px); }
.run__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.run__head h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.run__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(var(--text-2));
  font-variant-numeric: tabular-nums;
}

/* --- timeline ------------------------------------------------------------ */

.tl { list-style: none; margin: 0; padding: 0; }
.tl__step {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}
.tl__step:last-child { padding-bottom: 0; }
.tl__dot {
  flex: none;
  margin-top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgb(var(--border-strong));
  background: rgb(var(--bg-app));
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.tl__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 2px;
  width: 1px;
  background: rgb(var(--border-strong));
  transition: background 0.3s var(--ease);
}
.tl__body { flex: 1; min-width: 0; }
.tl__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tl__name {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: rgb(var(--text-2));
  transition: color 0.3s var(--ease);
}
.tl__meta {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
}
.tl__who { position: relative; padding-inline-start: 12px; }
.tl__who::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgb(var(--accent) / 0.8);
}

/* status pill — Queued / Working / Complete, exactly as the app labels them */
.pill {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgb(var(--border-strong));
  background: rgb(var(--bg-surface) / 0.7);
  color: rgb(var(--text-3));
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.tl__step.is-running .pill {
  border-color: rgb(var(--accent) / 0.5);
  background: rgb(var(--accent) / 0.12);
  color: rgb(var(--accent-light));
}
.tl__step.is-running .tl__name { color: rgb(var(--text)); }
.tl__step.is-running .tl__dot {
  border-color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.3);
  box-shadow: 0 0 0 4px rgb(var(--accent) / 0.12);
  animation: tlpulse 1.5s var(--ease) infinite;
}
.tl__step.is-done .pill {
  border-color: rgb(var(--success) / 0.42);
  background: rgb(var(--success) / 0.1);
  color: rgb(var(--success));
}
.tl__step.is-done .tl__name { color: rgb(var(--text)); }
.tl__step.is-done .tl__dot {
  border-color: rgb(var(--success) / 0.8);
  background: rgb(var(--success) / 0.35);
}
.tl__step.is-done:not(:last-child)::after { background: rgb(var(--success) / 0.35); }

@keyframes tlpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(var(--accent) / 0.1); }
  50%      { box-shadow: 0 0 0 7px rgb(var(--accent) / 0.03); }
}
@media (prefers-reduced-motion: reduce) {
  .tl__step.is-running .tl__dot { animation: none; }
}

/* --- right rail ---------------------------------------------------------- */

.run__rail {
  border-inline-start: 1px solid rgb(var(--border));
  background: rgb(var(--bg-app) / 0.35);
  display: grid;
  align-content: start;
}
@media (max-width: 860px) {
  .run__rail { border-inline-start: 0; border-top: 1px solid rgb(var(--border)); }
}
.rail__block { padding: clamp(18px, 2.4vw, 24px); }
.rail__block + .rail__block { border-top: 1px solid rgb(var(--border)); }
.rail__block h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin: 0 0 14px;
}

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.events li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: rgb(var(--text-2));
}
.events li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--accent) / 0.6);
  transform: translateY(-2px);
}
.events li.events__empty { color: rgb(var(--text-3)); }
.events li.events__empty::before { background: rgb(var(--border-strong)); }
.events li em {
  font-style: normal;
  color: rgb(var(--text-3));
}
.events li.is-new { animation: evin 0.4s var(--ease) both; }
@keyframes evin {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.artifact-slot .events__empty {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(var(--text-3));
}
.artifact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(var(--accent) / 0.35);
  background: rgb(var(--accent) / 0.07);
  border-radius: 9px;
  padding: 11px 13px;
  animation: evin 0.4s var(--ease) both;
}
.artifact-card svg { flex: none; color: rgb(var(--accent)); }
.artifact-card b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(var(--text));
  letter-spacing: 0.02em;
}
.artifact-card i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(var(--text-3));
}

/* --- the deliverable ----------------------------------------------------- */

.deliv {
  border-top: 1px solid rgb(var(--border));
  background:
    linear-gradient(180deg, rgb(var(--accent) / 0.05), transparent 30%),
    rgb(var(--bg-surface) / 0.35);
  padding: clamp(22px, 3vw, 32px);
  animation: delivin 0.55s var(--ease) both;
}
@keyframes delivin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.deliv__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgb(var(--border));
}
.deliv__type {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--accent-light));
  margin-bottom: 7px;
}
.deliv__type i { font-style: normal; color: rgb(var(--text-3)); }
.deliv__head h3 { font-size: 1.16rem; }

.verdict {
  display: grid;
  gap: 4px;
  text-align: end;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.verdict__k { text-transform: uppercase; color: rgb(var(--text-3)); }
.verdict__v { color: rgb(var(--warning)); }

.deliv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 44px);
}
@media (max-width: 820px) { .deliv__grid { grid-template-columns: 1fr; } }

.deliv__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--text-3));
  margin: 0 0 12px;
}
.deliv__label + * { margin-top: 0; }
* + .deliv__label { margin-top: 26px; }

.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.findings li {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--bg-panel) / 0.8);
  padding: 14px 16px;
}
.findings p { margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.45; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgb(var(--border-strong));
  color: rgb(var(--text-3));
  white-space: nowrap;
}
.chip--hi   { border-color: rgb(var(--success) / 0.45); color: rgb(var(--success)); background: rgb(var(--success) / 0.08); }
.chip--mid  { border-color: rgb(var(--accent) / 0.42);  color: rgb(var(--accent-light)); background: rgb(var(--accent) / 0.08); }
.chip--warn { border-color: rgb(var(--warning) / 0.45); color: rgb(var(--warning)); background: rgb(var(--warning) / 0.08); }
.chip--down { border-color: rgb(var(--warning) / 0.4); color: rgb(var(--warning)); text-transform: uppercase; }
.chip--ev   { border-style: dashed; }

.deliv__concl {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgb(var(--text));
  border-inline-start: 2px solid rgb(var(--accent) / 0.55);
  padding-inline-start: 14px;
}

.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plainlist li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--text-2));
  position: relative;
  padding-inline-start: 16px;
}
.plainlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 1px;
  background: rgb(var(--text-3));
}
.deliv__next { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgb(var(--text-2)); }

/* --- footer of the panel ------------------------------------------------- */

.run__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px clamp(16px, 2.4vw, 26px);
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--bg-app) / 0.4);
}
.run__foot .btn { flex: none; }
.run__disclose {
  margin: 0;
  flex: 1;
  min-width: 240px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgb(var(--text-3));
}

@media (max-width: 700px) {
  /* Keep the status pill on the same line as the stage name. Left to wrap,
     the one long stage name ("Decide whether answer needs verification")
     orphans its pill onto a line of its own and the four rows stop matching. */
  .tl__top { flex-wrap: nowrap; }
  .tl__name { flex: 1; min-width: 0; }
  /* the verifier verdict reads as a stray indent once it stacks */
  .verdict { text-align: start; }
}

/* --------------------------------------------------------------------------
   Pricing additions
   -------------------------------------------------------------------------- */

.keyblock--slim {
  margin-top: 40px;
  padding: clamp(24px, 3.2vw, 38px);
  align-items: start;
}
.keyblock--slim .eyebrow { margin-bottom: 16px; }
.key__h { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.028em; }
.key__sub {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(var(--text-2));
  max-width: 54ch;
}

/* the BYO-key disclosure: visible in the card, not buried in a footnote */
.plan__byok {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgb(var(--border));
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(var(--text-3));
}

.faq__more {
  margin: 26px 0 0;
  font-size: 0.875rem;
  color: rgb(var(--text-3));
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Hero entrance — staggered, runs once on load */
.hero .rise {
  animation: rise 0.78s var(--ease) both;
}
.hero .rise:nth-child(1) { animation-delay: 0.04s; }
.hero .rise:nth-child(2) { animation-delay: 0.11s; }
.hero .rise:nth-child(3) { animation-delay: 0.18s; }
.hero .rise:nth-child(4) { animation-delay: 0.25s; }
.hero .rise:nth-child(5) { animation-delay: 0.32s; }
.hero__visual { animation: rise 0.9s var(--ease) 0.22s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}