/* tax-invoices v2 — page-specific overrides on top of base-v2.css.
   Loaded globally via page.html (HTMX head-preserved convention).
   Every rule scoped under body.v2 — pages without that class are untouched. */

/* ============================================================
   Header / Nav-landing v2 overrides
   The base header (logo + landing-nav block + nav) is reused;
   v2 just retones its visuals.
   ============================================================ */
body.v2 .header {
  background: var(--v2-paper);
  border-bottom: 1px solid var(--v2-ink);
}
body.v2 .header-inner { padding: 0 var(--v2-container-pad); }
body.v2 .logo { color: var(--v2-ink); text-decoration: none; }
body.v2 .logo .logo-mark { display: none; }
body.v2 .logo .logo-text {
  font-family: var(--v2-font-mono);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--v2-ink);
  text-transform: lowercase;
}
body.v2 .logo .logo-sep { font-size: 0; }
body.v2 .logo .logo-sep::before {
  content: "-";
  font-size: 16px;
  color: var(--v2-accent);
}

/* Hide horizontal-scroll JS chrome on v2 (we keep the wrapper for now;
   Step 14 will remove the horizontal scroll altogether). */
body.v2 .horizontal-arrow,
body.v2 .horizontal-arrow-left,
body.v2 .horizontal-arrow-right,
body.v2 .landing-progress-bar { display: none !important; }

body.v2 .landing-nav-v2 {
  display: flex;
  align-items: center;
  gap: var(--v2-s-6);
  flex: 1;
  margin-left: var(--v2-s-6);
}
body.v2 .landing-nav-v2 .slot {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.v2 .landing-nav-v2 .slot__num { color: var(--v2-ink); }
body.v2 .landing-nav-v2 .slot__sep,
body.v2 .landing-nav-v2 .slot__total { color: var(--v2-mute-2); }
body.v2 .landing-nav-v2 .slot__name { margin-left: var(--v2-s-3); }

body.v2 .landing-nav-v2__cta {
  display: flex;
  gap: var(--v2-s-3);
  align-items: center;
  margin-left: auto;
}

/* ============================================================
   HERO v2
   ============================================================ */
body.v2 .hero-v2 {
  background: var(--v2-paper);
  color: var(--v2-ink);
  padding: var(--v2-s-9) var(--v2-container-pad);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
body.v2 .hero-v2__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--v2-s-8);
  align-items: center;
  width: 100%;
  max-width: var(--v2-container-max);
  margin: 0 auto;
}
@media (max-width: 960px) {
  body.v2 .hero-v2__layout {
    grid-template-columns: 1fr;
    gap: var(--v2-s-6);
  }
}

/* ============================================================
   Hero entrance animation — staggered reveal on page load.
   Eyebrow → title → sub → lifetime → CTA → trust → micro → mockup
   Linear/Notion-style: translateY(24px) + opacity 0→1, spring ease.
   ============================================================ */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroMockupReveal {
  from { opacity: 0; transform: translateY(32px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

body.v2 .hero-v2 .eyebrow,
body.v2 .hero-v2__title,
body.v2 .hero-v2__sub,
body.v2 .hero-v2__lifetime,
body.v2 .hero-v2__cta,
body.v2 .hero-v2__founder,
body.v2 .hero-v2__trust,
body.v2 .hero-v2__micro {
  opacity: 0;
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.v2 .hero-v2 .eyebrow      { animation-delay: 0.05s; }
body.v2 .hero-v2__title         { animation-delay: 0.12s; }
body.v2 .hero-v2__sub           { animation-delay: 0.20s; }
body.v2 .hero-v2__lifetime      { animation-delay: 0.28s; }
body.v2 .hero-v2__cta           { animation-delay: 0.35s; }
body.v2 .hero-v2__founder       { animation-delay: 0.40s; }
body.v2 .hero-v2__trust         { animation-delay: 0.46s; }
body.v2 .hero-v2__micro         { animation-delay: 0.48s; }

body.v2 .hero-v2__visual {
  opacity: 0;
  animation: heroMockupReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@media (prefers-reduced-motion: reduce) {
  body.v2 .hero-v2 .eyebrow,
  body.v2 .hero-v2__title,
  body.v2 .hero-v2__sub,
  body.v2 .hero-v2__lifetime,
  body.v2 .hero-v2__cta,
  body.v2 .hero-v2__founder,
  body.v2 .hero-v2__trust,
  body.v2 .hero-v2__micro,
  body.v2 .hero-v2__visual {
    opacity: 1;
    animation: none;
  }
}

body.v2 .hero-v2__text {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-5);
}
body.v2 .hero-v2__title {
  font-size: var(--v2-fs-h1);
  line-height: var(--v2-lh-display);
  letter-spacing: var(--v2-tracking-display);
  font-weight: 500;
  margin: 0;
}
@media (min-width: 1100px) {
  body.v2 .hero-v2__title { font-size: 76px; }
}

body.v2 .hero-v2__sub {
  font-size: var(--v2-fs-lead);
  line-height: 1.5;
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 56ch;
}
body.v2 .hero-v2__sub s {
  color: var(--v2-mute-2);
  text-decoration-color: var(--v2-mute-2);
}

/* ============================================================
   Bracket-tooltip — typewriter reveal on hover.
   Carried over from v1 with v2 visuals: ink hairlines, amber
   accent, no blur, no shadow, sharp corners.
   ============================================================ */
body.v2 .bracket-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-family: var(--v2-font-mono);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
}
body.v2 .bracket-text {
  color: var(--v2-ink);
  position: relative;
  border-bottom: 1px solid var(--v2-accent);
  padding-bottom: 1px;
}
body.v2 .bracket-text::before {
  content: "[";
  color: var(--v2-mute-2);
  margin-right: 2px;
}
body.v2 .bracket-text::after {
  content: "]";
  color: var(--v2-mute-2);
  margin-left: 2px;
}

body.v2 .bracket-examples {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: var(--v2-paper-pure);
  border: 1px solid var(--v2-ink);
  padding: 6px 10px;
  white-space: nowrap;
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 0.92em;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 180ms var(--v2-ease-quiet),
              visibility 180ms var(--v2-ease-quiet);
}
body.v2 .bracket-examples::before {
  content: "[";
  color: var(--v2-accent);
  font-weight: 600;
  font-size: 1.15em;
  display: inline-block;
  transform: translateX(8px);
  transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.v2 .bracket-examples::after {
  content: "]";
  color: var(--v2-accent);
  font-weight: 600;
  font-size: 1.15em;
  display: inline-block;
  transform: translateX(-8px);
  transition: transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.v2 .bracket-examples span {
  display: inline-block;
  white-space: nowrap;
  border-right: 2px solid var(--v2-accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 600ms steps(24, end) 80ms;
  margin: 0 4px;
}
/* Tip arrow under the tooltip body */
body.v2 .bracket-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border: 5px solid transparent;
  border-top-color: var(--v2-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms var(--v2-ease-quiet);
}

/* Tooltip show — JS-driven .is-open class for reliable touch support. */
body.v2 .bracket-tooltip.is-open .bracket-examples {
  opacity: 1 !important;
  visibility: visible !important;
}
body.v2 .bracket-tooltip.is-open .bracket-examples::before { transform: translateX(-2px) !important; }
body.v2 .bracket-tooltip.is-open .bracket-examples::after { transform: translateX(2px) !important; }
body.v2 .bracket-tooltip.is-open .bracket-examples span {
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  animation: v2-blink-caret 0.7s step-end infinite;
}
body.v2 .bracket-tooltip.is-open::after { opacity: 1 !important; visibility: visible !important; }

@media (hover: hover) {
  body.v2 .bracket-tooltip:hover .bracket-examples { opacity: 1; visibility: visible; }
  body.v2 .bracket-tooltip:hover .bracket-examples::before { transform: translateX(-2px); }
  body.v2 .bracket-tooltip:hover .bracket-examples::after { transform: translateX(2px); }
  body.v2 .bracket-tooltip:hover .bracket-examples span {
    clip-path: inset(0 0 0 0);
    animation: v2-blink-caret 0.7s step-end infinite;
  }
  body.v2 .bracket-tooltip:hover::after { opacity: 1; visibility: visible; }
}

@keyframes v2-blink-caret {
  from, to { border-right-color: transparent; }
  50%      { border-right-color: var(--v2-accent); }
}

body.v2 .hero-v2__lifetime {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.v2 .hero-v2__lifetime li {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  letter-spacing: 0.04em;
  color: var(--v2-ink);
}
body.v2 .hero-v2__lifetime li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--v2-ink);
}

body.v2 .hero-v2__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s-3);
  align-items: center;
}

body.v2 .hero-v2__founder {
  font-size: var(--v2-fs-body-sm);
  font-style: italic;
  color: var(--v2-ink-soft);
  margin: 0;
  line-height: var(--v2-lh-body);
  max-width: 48ch;
}
body.v2 .hero-v2__trust {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-muted);
  margin: 0;
  line-height: var(--v2-lh-body);
}
/* ============================================================
   Workflow card — Basis-style step-by-step animation
   ============================================================ */
body.v2 .wf-card {
  background: var(--v2-paper-pure);
  border: 1px solid var(--v2-rule-soft);
  padding: 28px 32px;
  max-width: 400px;
  font-family: var(--v2-font-sans);
}
body.v2 .wf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
body.v2 .wf-logo { color: var(--v2-ink); }
body.v2 .wf-brand {
  font-family: var(--v2-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ink);
  letter-spacing: 0.02em;
}
body.v2 .wf-time {
  margin-left: auto;
  font-family: var(--v2-font-mono);
  font-size: 12px;
  color: var(--v2-muted);
}
body.v2 .wf-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-ink);
  margin-bottom: 4px;
}
body.v2 .wf-subtitle {
  font-size: 13px;
  color: var(--v2-muted);
  margin-bottom: 24px;
}
body.v2 .wf-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.v2 .wf-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-rule-soft);
  opacity: 0.35;
  transform: translateX(-4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.v2 .wf-step:last-child { border-bottom: none; }
body.v2 .wf-step.is-active {
  opacity: 1;
  transform: translateX(0);
}
body.v2 .wf-step.is-done {
  opacity: 0.6;
  transform: translateX(0);
}
body.v2 .wf-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--v2-rule-soft);
  flex-shrink: 0;
  position: relative;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
body.v2 .wf-step.is-active .wf-icon {
  border-color: var(--v2-ink);
  background: var(--v2-ink);
  animation: wfSpin 1s linear infinite;
}
body.v2 .wf-step.is-active .wf-icon::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 10px; height: 10px;
  border: 2px solid transparent;
  border-top-color: var(--v2-paper);
  border-radius: 50%;
}
body.v2 .wf-step.is-done .wf-icon {
  border-color: var(--v2-teal, #14B8A6);
  background: var(--v2-teal, #14B8A6);
}
body.v2 .wf-step.is-done .wf-icon::after {
  content: '';
  position: absolute;
  top: 3px; left: 6px;
  width: 6px; height: 10px;
  border: solid var(--v2-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes wfSpin {
  to { transform: rotate(360deg); }
}
body.v2 .wf-text {
  font-size: 14px;
  color: var(--v2-ink);
}
body.v2 .wf-step.is-done .wf-text {
  color: var(--v2-muted);
}
body.v2 .wf-result {
  margin-top: 20px;
  padding: 16px;
  background: var(--v2-bg-bracket);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.v2 .wf-result.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body.v2 .wf-result__status {
  display: block;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--v2-teal, #14B8A6);
  margin-bottom: 4px;
}
body.v2 .wf-result__detail {
  font-size: 12px;
  color: var(--v2-muted);
}

body.v2 .hero-v2__micro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s-5);
  border-top: 1px solid var(--v2-rule-soft);
  padding-top: var(--v2-s-4);
}

/* ============================================================
   Social proof bar — right after hero
   ============================================================ */
body.v2 .social-proof-v2 {
  padding: var(--v2-s-6) var(--v2-container-pad) !important;
  border-top: 1px solid var(--v2-rule-soft);
  border-bottom: 1px solid var(--v2-rule-soft);
  text-align: center;
}
body.v2 .social-proof-v2 .container {
  max-width: var(--v2-container-max);
  margin: 0 auto;
}
body.v2 .social-proof-v2__stats {
  display: flex;
  justify-content: center;
  gap: var(--v2-s-7);
  margin-bottom: var(--v2-s-4);
}
body.v2 .social-proof-v2__stats .stat__num {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-h3);
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -0.02em;
}
body.v2 .social-proof-v2__stats .stat__label {
  font-size: var(--v2-fs-micro);
  color: var(--v2-muted);
  text-transform: uppercase;
  letter-spacing: var(--v2-tracking-eyebrow);
}
body.v2 .social-proof-v2__clients {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-muted);
  line-height: 1.8;
}
body.v2 .social-proof-v2__sep {
  margin: 0 var(--v2-s-2);
  color: var(--v2-rule-soft);
}
@media (max-width: 640px) {
  body.v2 .social-proof-v2__stats {
    flex-wrap: wrap;
    gap: var(--v2-s-4) var(--v2-s-6);
  }
}

/* ============================================================
   Hero demo iframe
   ============================================================ */
body.v2 .hero-v2__visual {
  overflow: visible !important;
}
body.v2 .hero-demo-frame {
  width: 100%;
  aspect-ratio: 4/3;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(14,14,12,0.06), 0 12px 40px rgba(14,14,12,0.12);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  overflow: visible;
}
body.v2 .hero-demo-frame:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* ============================================================
   ERP mockup v2 — premium 1C-style (from demo prototype)
   ============================================================ */
body.v2 .mockup-v2 {
  position: relative;
  border: 1px solid rgba(14,14,12,0.15);
  background: linear-gradient(180deg, #EDE6D0 0%, #E8DFC4 4%, #E8DFC4 100%);
  font-family: var(--v2-font-mono);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(14,14,12,0.06), 0 12px 40px rgba(14,14,12,0.12), 0 0 0 1px rgba(14,14,12,0.04);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
body.v2 .mockup-v2:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* Toolbar with window controls */
body.v2 .mockup-v2__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(180deg, #F0E9D4 0%, #E8DFC4 100%);
  border-bottom: 1px solid #C9BFA5;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5C5646;
}
body.v2 .mockup-v2__header::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  box-shadow: 14px 0 0 #FFC107, 28px 0 0 #F44336;
  margin-right: 16px;
  flex-shrink: 0;
}
body.v2 .mockup-v2__btn {
  font-family: var(--v2-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #1e7a67 0%, #14685a 100%);
  color: #fff;
  padding: 7px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}
body.v2 .mockup-v2__btn .arr { color: rgba(255,255,255,0.7); margin-left: 4px; }

body.v2 .mockup-v2__limit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-s-3);
  padding: var(--v2-s-3) var(--v2-s-4);
  border-bottom: 1px solid #C9BFA5;
}
body.v2 .mockup-v2__limit-label {
  font-family: var(--v2-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C8370;
}
body.v2 .mockup-v2__limit-value {
  font-family: var(--v2-font-mono);
  font-size: 18px;
  color: #3D3929;
  font-variant-numeric: tabular-nums;
}

/* KPIs strip */
body.v2 .mockup-v2__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #F4EDD8;
  border-bottom: 1px solid #C9BFA5;
}
body.v2 .mockup-v2__kpis .kpi {
  padding: 10px 14px;
  border-right: 1px solid #D4CAAE;
  text-align: center;
}
body.v2 .mockup-v2__kpis .kpi:last-child { border-right: 0; }
body.v2 .mockup-v2__kpis .kpi .kpi__l {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C8370;
  margin-bottom: 2px;
}
body.v2 .mockup-v2__kpis .kpi .kpi__v {
  font-size: 22px;
  font-weight: 700;
  color: #3D3929;
  font-variant-numeric: tabular-nums;
}
body.v2 .mockup-v2__kpis .kpi .kpi__v.ok { color: #0d7a6a; }
body.v2 .mockup-v2__kpis .kpi .kpi__v.acc { color: #B8860B; }

/* Table */
body.v2 .mockup-v2__table-wrap {
  background: #FEFDFB;
}
body.v2 .mockup-v2__table-wrap::-webkit-scrollbar { width: 6px; }
body.v2 .mockup-v2__table-wrap::-webkit-scrollbar-track { background: #F0EBD9; }
body.v2 .mockup-v2__table-wrap::-webkit-scrollbar-thumb { background: #C9BFA5; border-radius: 3px; }

body.v2 .mockup-v2__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v2-fs-body-sm);
}
body.v2 .mockup-v2__table th {
  padding: 8px 14px;
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8C8370;
  background: linear-gradient(180deg, #EDE6D0 0%, #E8DFC4 100%);
  border-bottom: 2px solid #C9BFA5;
  position: sticky;
  top: 0;
  z-index: 2;
}
body.v2 .mockup-v2__table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid #F0EBD9;
  font-variant-numeric: tabular-nums;
  background: #FEFDFB;
  color: #3D3929;
  transition: background 0.3s ease;
}
body.v2 .mockup-v2__table tr:hover td { background: #FAF6EC; }
body.v2 .mockup-v2__table tr:last-child td { border-bottom: 0; }
body.v2 .mockup-v2__table .num { color: #A09A8A; font-size: 11px; }
body.v2 .mockup-v2__table tr.is-target td {
  background: #FFF8E1;
}

/* Brand logos */
body.v2 .mockup-v2__table .mockup-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
body.v2 .mockup-v2__table .mockup-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(0.3);
}

/* ============================================================
   Toast v2 — slides IN from the top, like a real push.
   Carried over from v1 .mockup-push-notif behaviour, restyled v2:
   ink card on paper background, amber accent on the brand label.
   ============================================================ */
body.v2 .toast-v2 {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-100% - 16px));
  max-width: 340px;
  width: calc(100% - 32px);
  z-index: 10;
  background: var(--v2-ink);
  color: var(--v2-paper);
  border: 1px solid rgba(250,250,247,0.08);
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--v2-font-sans);
  box-shadow:
    0 4px 12px rgba(14,14,12,0.2),
    0 20px 48px rgba(14,14,12,0.3);
  opacity: 0;
  backdrop-filter: blur(8px);
}
body.v2 .toast-v2__avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(250, 250, 247, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-paper);
  margin-top: 1px;
}
body.v2 .toast-v2__avatar svg {
  width: 14px;
  height: 12px;
  display: block;
}

body.v2 .toast-v2__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.v2 .toast-v2__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v2-s-3);
}

body.v2 .toast-v2__brand {
  font-family: var(--v2-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-paper);
  white-space: nowrap;
}
body.v2 .toast-v2__brand .h { color: var(--v2-accent); }

body.v2 .toast-v2__time {
  font-family: var(--v2-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.45);
  flex-shrink: 0;
}
body.v2 .toast-v2__brand .h { color: var(--v2-accent); }
body.v2 .toast-v2__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--v2-fs-body-sm);
}
body.v2 .toast-v2__title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--v2-font-mono);
  color: var(--v2-teal);
  font-weight: 500;
}
body.v2 .toast-v2__caption {
  color: rgba(250, 250, 247, 0.62);
  font-size: var(--v2-fs-micro);
}

/* ============================================================
   Mockup status mapping — JS in 99-postamble.html sets the
   classes `.mockup-status.is-ok / is-waiting / is-pending /
   is-sending` directly. We map those to v2 status visuals here
   instead of touching the JS.
   ============================================================ */
body.v2 .mockup-v2__table .mockup-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--v2-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink);
  padding: 3px 8px;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
body.v2 .mockup-v2__table .mockup-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
body.v2 .mockup-v2__table .mockup-status.is-ok {
  color: #0d7a6a;
  background: rgba(20,184,166,0.12);
}
body.v2 .mockup-v2__table .mockup-status.is-ok::before {
  background: var(--v2-teal);
  box-shadow: 0 0 6px rgba(20,184,166,0.5);
}
body.v2 .mockup-v2__table .mockup-status.is-waiting {
  color: #946a0c;
  background: rgba(231,132,16,0.1);
}
body.v2 .mockup-v2__table .mockup-status.is-pending {
  color: var(--v2-mute-2);
  background: rgba(0,0,0,0.04);
}
body.v2 .mockup-v2__table .mockup-status.is-sending {
  color: #946a0c;
  background: rgba(231,132,16,0.1);
}
body.v2 .mockup-v2__table .mockup-status.is-sending::before {
  animation: statusPulse 1s ease infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.6); }
}

/* anim-hidden is added/removed by JS in 99-postamble.html.
   Toast: slides DOWN from above (translateY -100% → 0) when class drops.
   Inner tg-lines: simple opacity fade as JS removes the class one by one. */
body.v2 .toast-v2 {
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 350ms var(--v2-ease-quiet);
}
body.v2 .toast-v2:not(.anim-hidden) {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.v2 .toast-v2 > .toast-v2__body > div {
  transition: opacity 220ms var(--v2-ease-quiet);
}
body.v2 .toast-v2 .anim-hidden { opacity: 0; }

/* Row highlight when JS marks PN-010 / PN-012 as actively processed.
   .mockup-row-active is set by 99-postamble.html runCycle. */
body.v2 .mockup-v2__table tr.mockup-row-active td {
  background: var(--v2-bg-bracket);
  transition: background 220ms var(--v2-ease-quiet);
}
body.v2 .mockup-v2__btn.pulse {
  animation: v2-pulse 600ms var(--v2-ease-quiet) infinite alternate;
}
@keyframes v2-pulse {
  from { background: var(--v2-ink); color: var(--v2-paper); }
  to   { background: var(--v2-accent); color: var(--v2-paper); }
}
body.v2 .mockup-v2__kpis .kpi__v.bump {
  animation: v2-bump 380ms var(--v2-ease-quiet);
}
@keyframes v2-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
body.v2 .mockup-v2__kpis .kpi__v.decrement {
  color: var(--v2-accent);
  transition: color 380ms var(--v2-ease-quiet);
}

/* ============================================================
   COMPARE  (slide 3) — 2-col, right column inverted ink
   ============================================================ */
body.v2 .compare-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .compare-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .compare-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .compare-v2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--v2-ink);
}
body.v2 .compare-v2__col {
  padding: var(--v2-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-4);
}
body.v2 .compare-v2__col--problem {
  background: var(--v2-paper);
  border-right: 1px solid var(--v2-ink);
}
body.v2 .compare-v2__col--solution {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .compare-v2__col--solution .eyebrow,
body.v2 .compare-v2__col--solution .h3,
body.v2 .compare-v2__col--solution .compare-v2__col-title { color: var(--v2-paper); }

body.v2 .compare-v2__col-title { margin: 0; }

body.v2 .compare-v2__pipeline {
  list-style: none;
  padding: 0;
  margin: var(--v2-s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .compare-v2__pipeline li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  font-size: var(--v2-fs-body);
  line-height: 1.45;
  align-items: baseline;
}
body.v2 .compare-v2__num {
  font-family: var(--v2-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--v2-mute-2);
  font-variant-numeric: tabular-nums;
}

body.v2 .compare-v2__workflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v2-s-3);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-lead);
  margin: var(--v2-s-3) 0 var(--v2-s-2);
}
body.v2 .compare-v2__chip {
  border: 1px solid rgba(250, 250, 247, 0.6);
  padding: 4px 10px;
  letter-spacing: 0.04em;
}
body.v2 .compare-v2__arrow {
  color: var(--v2-accent);
  font-size: 1.2em;
}
body.v2 .compare-v2__check {
  color: var(--v2-teal);
  font-size: 1.4em;
  margin-left: 4px;
}

body.v2 .compare-v2__list {
  list-style: none;
  padding: 0;
  margin: var(--v2-s-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .compare-v2__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: var(--v2-fs-body);
  line-height: 1.45;
}
body.v2 .compare-v2__check-mark {
  color: var(--v2-teal);
  font-family: var(--v2-font-mono);
}
body.v2 .compare-v2__cta {
  margin-top: var(--v2-s-5);
  align-self: start;
}

@media (max-width: 800px) {
  body.v2 .compare-v2__grid { grid-template-columns: 1fr; }
  body.v2 .compare-v2__col {
    padding: var(--v2-s-4);
    gap: var(--v2-s-3);
  }
  body.v2 .compare-v2__col--problem {
    border-right: 0;
    border-bottom: 1px solid var(--v2-ink);
  }
}

/* ============================================================
   PROCESS  (slide 2) — 4 horizontal steps, no frames
   ============================================================ */
body.v2 .process-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .process-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .process-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .process-v2__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: var(--v2-s-4);
  align-items: start;
}
body.v2 .process-v2__step {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
  border-top: 1px solid var(--v2-ink);
  padding-top: var(--v2-s-3);
}
body.v2 .process-v2__num {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-h2);
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
body.v2 .process-v2__step-title {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-h4);
  font-weight: 500;
  color: var(--v2-ink);
  margin: 0;
  line-height: var(--v2-lh-heading);
}
body.v2 .process-v2__step-desc {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
body.v2 .process-v2__arrow {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-h2);
  color: var(--v2-accent);
  align-self: start;
  padding-top: 12px;
  line-height: 1;
}

body.v2 .process-v2__flow {
  margin-top: var(--v2-s-7);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body);
  color: var(--v2-ink-soft);
  line-height: 1.8;
}
body.v2 .process-v2__flow .h { color: var(--v2-accent); }
body.v2 .process-v2__flow strong { color: var(--v2-ink); font-weight: 600; }
body.v2 .process-v2__strikethrough {
  color: var(--v2-mute-2);
  text-decoration: line-through;
  text-decoration-color: var(--v2-mute-2);
}
body.v2 .process-v2__now {
  color: var(--v2-mute-2);
}

@media (max-width: 900px) {
  body.v2 .process-v2__steps {
    grid-template-columns: 1fr;
    gap: var(--v2-s-5);
  }
  body.v2 .process-v2__arrow {
    display: none;
  }
}

/* ============================================================
   BENEFITS  (slide 5) — 6 numbered hairline cards, no icons
   ============================================================ */
body.v2 .benefits-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .benefits-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .benefits-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .benefits-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--v2-ink);
}
body.v2 .benefits-v2__card {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
  padding: var(--v2-s-6);
  border-right: 1px solid var(--v2-rule-soft);
  border-bottom: 1px solid var(--v2-rule-soft);
  background: var(--v2-paper-pure);
}
body.v2 .benefits-v2__card:nth-child(3n) { border-right: 0; }
body.v2 .benefits-v2__card:nth-child(n+4) { border-bottom: 0; }
body.v2 .benefits-v2__num {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-h3);
  color: var(--v2-mute-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
body.v2 .benefits-v2__title {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-h4);
  font-weight: 500;
  color: var(--v2-ink);
  margin: 0;
  line-height: var(--v2-lh-heading);
}
body.v2 .benefits-v2__desc {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) {
  body.v2 .benefits-v2__grid { grid-template-columns: repeat(2, 1fr); }
  body.v2 .benefits-v2__card:nth-child(3n) { border-right: 1px solid var(--v2-rule-soft); }
  body.v2 .benefits-v2__card:nth-child(2n) { border-right: 0; }
  body.v2 .benefits-v2__card:nth-child(n+4) { border-bottom: 1px solid var(--v2-rule-soft); }
  body.v2 .benefits-v2__card:nth-child(n+5) { border-bottom: 0; }
}
@media (max-width: 560px) {
  body.v2 .benefits-v2__grid { grid-template-columns: 1fr; }
  body.v2 .benefits-v2__card { border-right: 0; border-bottom: 1px solid var(--v2-rule-soft); }
  body.v2 .benefits-v2__card:last-child { border-bottom: 0; }
}

/* ============================================================
   SECURITY  (slide 6) — emphasis block with ASCII diagram
   Replaces the old 31k illustration-heavy section.
   ============================================================ */
body.v2 .security-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .security-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .security-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .security-v2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--v2-s-7);
  align-items: start;
}
body.v2 .security-v2__diagram {
  border: 1px solid var(--v2-ink);
  background: var(--v2-bg-bracket);
  padding: var(--v2-s-4);
  overflow: auto;
}
body.v2 .security-v2__diagram pre {
  font-family: var(--v2-font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--v2-ink);
  margin: 0;
  white-space: pre;
}
body.v2 .security-v2__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-5);
}
body.v2 .security-v2__list > li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--v2-s-3);
  align-items: baseline;
}
body.v2 .security-v2__bullet {
  color: var(--v2-accent);
  font-family: var(--v2-font-mono);
  font-size: 14px;
  line-height: 1;
}
body.v2 .security-v2__list strong {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-h4);
  font-weight: 500;
  color: var(--v2-ink);
  display: block;
  margin-bottom: 4px;
}
body.v2 .security-v2__list p {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-ink-soft);
  line-height: 1.5;
  margin: 0;
}
body.v2 .security-v2__spec {
  margin-top: var(--v2-s-5);
  font-size: var(--v2-fs-body-sm);
}
body.v2 .security-v2__spec th {
  text-align: left;
  font-weight: 500;
  color: var(--v2-mute-2);
  width: 50%;
}
body.v2 .security-v2__spec td {
  font-family: var(--v2-font-mono);
  color: var(--v2-ink);
}
@media (max-width: 900px) {
  body.v2 .security-v2__grid {
    grid-template-columns: 1fr;
    gap: var(--v2-s-5);
  }
}

/* ============================================================
   SUPPORTED  (slide 7) — reference table, not selling cards
   ============================================================ */
body.v2 .supported-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .supported-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .supported-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-4);
}
body.v2 .supported-v2__lead {
  font-size: var(--v2-fs-lead);
  line-height: 1.5;
  color: var(--v2-ink-soft);
  margin: 0 0 var(--v2-s-6);
  max-width: 64ch;
}
body.v2 .supported-v2__table {
  font-size: var(--v2-fs-body);
}
body.v2 .supported-v2__table th { padding: var(--v2-s-3) var(--v2-s-4); }
body.v2 .supported-v2__table td { padding: var(--v2-s-4); vertical-align: top; }
body.v2 .supported-v2__table strong {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v2-ink);
}
body.v2 .supported-v2__col-type { width: 18%; }
body.v2 .supported-v2__col-status {
  width: 12%;
  text-align: right;
}
body.v2 .supported-v2__table td:last-child { text-align: right; }
body.v2 .supported-v2__check {
  font-family: var(--v2-font-mono);
  color: var(--v2-teal);
  font-size: 18px;
}

@media (max-width: 700px) {
  body.v2 .supported-v2__col-type { width: 26%; }
}
body.v2 .hero-shield-label,
body.v2 .scroll-teaser,
body.v2 .terminal-cursor::after { display: none !important; }
body.v2 .glitch-hover { animation: none !important; }

/* ============================================================
   STATS + REVIEWS  (slide 8)
   ============================================================ */
body.v2 .reviews-v2 {
  padding: var(--v2-s-7) 0;
}
body.v2 .reviews-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}

/* ── STATS row ── */
body.v2 .stats-v2 {
  border-top: 1px solid var(--v2-ink);
  border-bottom: 1px solid var(--v2-ink);
  padding: var(--v2-s-6) 0;
  margin-bottom: var(--v2-s-7);
}
body.v2 .stats-v2 .eyebrow { margin-bottom: var(--v2-s-5); display: block; }
body.v2 .stats-v2__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--v2-s-5);
  align-items: end;
}
body.v2 .stats-v2__grid .stat__num {
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
body.v2 .stats-v2__grid .stat__label {
  margin-top: var(--v2-s-2);
}
@media (max-width: 1100px) {
  body.v2 .stats-v2__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--v2-s-6);
  }
  body.v2 .stats-v2__grid .stat__num { font-size: 44px; }
}
@media (max-width: 600px) {
  body.v2 .stats-v2__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── REVIEWS block ── */
body.v2 .reviews-v2__block { margin-bottom: var(--v2-s-7); }
body.v2 .reviews-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-6);
}
body.v2 .reviews-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--v2-s-6);
}
body.v2 .reviews-v2__grid .quote { display: flex; flex-direction: column; gap: var(--v2-s-3); }
body.v2 .reviews-v2__grid .quote p {
  font-size: var(--v2-fs-body);
  line-height: 1.55;
  margin: 0;
  color: var(--v2-ink);
}
body.v2 .reviews-v2__grid .quote p strong {
  color: var(--v2-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--v2-accent);
  padding-bottom: 1px;
}
body.v2 .reviews-v2__grid .quote__mark { font-size: 36px; line-height: 1; }
@media (max-width: 900px) {
  body.v2 .reviews-v2__grid { grid-template-columns: 1fr; gap: var(--v2-s-5); }
}

/* ── AI mention — sober mono quote ── */
body.v2 .ai-mention-v2 {
  border-top: 1px solid var(--v2-rule-soft);
  padding-top: var(--v2-s-5);
}
body.v2 .ai-mention-v2 .eyebrow { margin-bottom: var(--v2-s-3); display: block; }
body.v2 .ai-mention-v2__quote {
  margin: 0;
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-lead);
  line-height: 1.55;
  color: var(--v2-ink);
  max-width: 80ch;
}
body.v2 .ai-mention-v2__quote p {
  margin: 0 0 var(--v2-s-3);
  color: var(--v2-ink-soft);
}
body.v2 .ai-mention-v2__quote p::before { content: "« "; color: var(--v2-mute-2); }
body.v2 .ai-mention-v2__quote p::after  { content: " »"; color: var(--v2-mute-2); }
body.v2 .ai-mention-v2__quote cite {
  font-style: normal;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-mute-2);
}

/* ============================================================
   PRICING  (slide 4) — single hairline card, one-time price
   ============================================================ */
body.v2 .pricing-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .pricing-v2 .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .pricing-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .pricing-v2__layout {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

/* Card */
body.v2 .pricing-v2__card {
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper-pure);
  padding: var(--v2-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .pricing-v2__sticker { margin-bottom: var(--v2-s-2); }
body.v2 .pricing-v2__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: var(--v2-s-2);
}
body.v2 .pricing-v2__amount {
  font-family: var(--v2-font-mono);
  font-size: 88px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--v2-ink);
  font-weight: 500;
  white-space: nowrap;
}
body.v2 .pricing-v2__card--bundle .pricing-v2__amount {
  font-size: clamp(32px, 5vw, 56px);
  white-space: normal;
  word-break: keep-all;
}
body.v2 .pricing-v2__caption {
  font-size: var(--v2-fs-body);
  color: var(--v2-ink-soft);
  line-height: 1.4;
}
body.v2 .pricing-v2__alt {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-mute-2);
  letter-spacing: 0.04em;
}
body.v2 .pricing-v2__card .rule {
  margin: var(--v2-s-3) 0;
}
body.v2 .pricing-v2__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .pricing-v2__features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: var(--v2-fs-body);
  line-height: 1.45;
  color: var(--v2-ink);
}
body.v2 .pricing-v2__check {
  color: var(--v2-teal);
  font-family: var(--v2-font-mono);
}
body.v2 .pricing-v2__cta {
  margin-top: auto;
  padding-top: var(--v2-s-4);
  justify-content: center;
}

/* Bundle (extra link block beside the card) */
body.v2 .pricing-v2__bundle {
  align-self: center;
  border-left: 1px solid var(--v2-rule-soft);
  padding-left: var(--v2-s-7);
}
body.v2 .pricing-v2__bundle .eyebrow { margin-bottom: var(--v2-s-3); display: block; }
body.v2 .pricing-v2__bundle p {
  font-size: var(--v2-fs-lead);
  line-height: 1.5;
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 38ch;
}
body.v2 .pricing-v2__bundle-link {
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-accent);
  padding-bottom: 1px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.v2 .pricing-v2__layout {
    grid-template-columns: 1fr;
    gap: var(--v2-s-5);
  }
  body.v2 .pricing-v2__bundle {
    border-left: 0;
    border-top: 1px solid var(--v2-rule-soft);
    padding-left: 0;
    padding-top: var(--v2-s-5);
  }
}

/* ============================================================
   FAQ  (slide 9) — flat hairline accordion
   Reuses v1 .faq-item / .faq-header / .faq-icon / .faq-answer
   class names so the existing toggleFAQ JS keeps working.
   ============================================================ */
body.v2 .faq-v2 {
  padding: var(--v2-s-9) 0;
}
body.v2 .faq-v2 .container {
  max-width: 920px;
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .faq-v2__headline {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-7);
}
body.v2 .faq-v2__list {
  border-top: 1px solid var(--v2-ink);
  border-bottom: 1px solid var(--v2-ink);
}
body.v2 .faq-v2 .faq-item {
  border-bottom: 1px solid var(--v2-rule-soft);
  background: transparent;
}
body.v2 .faq-v2 .faq-item:last-child { border-bottom: 0; }
body.v2 .faq-v2 .faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-s-4);
  padding: var(--v2-s-5) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--v2-font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--v2-ink);
  text-align: left;
  transition: color 180ms var(--v2-ease-quiet);
}
body.v2 .faq-v2 .faq-header:hover { color: var(--v2-accent-ink); }
body.v2 .faq-v2 .faq-question {
  flex: 1;
  line-height: 1.4;
}
body.v2 .faq-v2 .faq-icon {
  font-family: var(--v2-font-mono);
  font-size: 24px;
  color: var(--v2-accent);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 220ms var(--v2-ease-quiet);
}
body.v2 .faq-v2 .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--v2-ease-quiet);
}
body.v2 .faq-v2 .faq-answer p {
  padding-bottom: var(--v2-s-5);
  font-size: var(--v2-fs-body);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 72ch;
}
body.v2 .faq-v2 .faq-item.open .faq-header { color: var(--v2-ink); }

/* ============================================================
   HONEST + FINAL  (slide 10)
   ============================================================ */
body.v2 .cta-final-v2 {
  padding: 0;
  display: flex;
  flex-direction: column;
}
body.v2 .cta-final-v2__honest-wrap {
  max-width: var(--v2-container-max);
  padding: var(--v2-s-9) var(--v2-container-pad) var(--v2-s-7);
  margin: 0 auto;
  width: 100%;
}
body.v2 .cta-final-v2__honest-title {
  margin-top: var(--v2-s-2);
  margin-bottom: var(--v2-s-6);
}
body.v2 .cta-final-v2__bundle-link {
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-accent);
  padding-bottom: 1px;
}

/* Related guides — internal-link block above honest block */
body.v2 .cta-final-v2__related {
  max-width: var(--v2-container-max);
  padding: var(--v2-s-7) var(--v2-container-pad) 0;
  margin: 0 auto;
  width: 100%;
}
body.v2 .cta-final-v2__related-list {
  list-style: none;
  margin: var(--v2-s-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--v2-rule);
}
body.v2 .cta-final-v2__related-list > li {
  border-bottom: 1px solid var(--v2-rule);
}
body.v2 .cta-final-v2__related-list > li + li {
  border-left: 1px solid var(--v2-rule);
}
body.v2 .cta-final-v2__related-link {
  display: block;
  padding: var(--v2-s-4);
  color: var(--v2-ink);
  text-decoration: none;
  transition: background 0.15s;
}
body.v2 .cta-final-v2__related-link:hover {
  background: var(--v2-paper-tint, rgba(0, 0, 0, 0.03));
}
body.v2 .cta-final-v2__related-link strong {
  display: block;
  font-weight: 600;
  margin-bottom: var(--v2-s-1);
}
body.v2 .cta-final-v2__related-link span {
  display: block;
  color: var(--v2-ink-muted, var(--text-secondary));
  font-size: 0.95em;
  line-height: 1.45;
}

/* ── Inverted final section ── */
body.v2 .cta-final-v2__final {
  /* .section--final from base-v2.css already provides dark bg + paper text */
}
body.v2 .cta-final-v2__final .container {
  max-width: var(--v2-container-max);
  padding: 0 var(--v2-container-pad);
  margin: 0 auto;
  width: 100%;
}
body.v2 .cta-final-v2__final-title {
  margin: 0 0 var(--v2-s-5);
  max-width: 22ch;
}
body.v2 .cta-final-v2__price {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s-3);
  flex-wrap: wrap;
  margin: 0 0 var(--v2-s-6);
}
body.v2 .cta-final-v2__price strong {
  font-family: var(--v2-font-mono);
  font-size: 64px;
  letter-spacing: -0.02em;
  color: var(--v2-paper);
  font-weight: 500;
  line-height: 1;
}
body.v2 .cta-final-v2__price-caption {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  color: rgba(250, 250, 247, 0.62);
  letter-spacing: 0.04em;
}

/* Social proof — subtle trust signal, sits between price and CTA */
body.v2 .cta-final-v2__social-proof {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s-1);
  margin-bottom: var(--v2-s-5);
}
body.v2 .cta-final-v2__social-proof-count {
  font-family: var(--v2-font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--v2-paper);
  letter-spacing: -0.02em;
  line-height: 1;
}
body.v2 .cta-final-v2__social-proof-text {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  color: rgba(250, 250, 247, 0.72);
  letter-spacing: 0.04em;
}

body.v2 .cta-final-v2__buttons {
  display: flex;
  gap: var(--v2-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s-5);
}
body.v2 .cta-final-v2__buy {
  font-family: var(--v2-font-mono);
  letter-spacing: 0.04em;
}
body.v2 .cta-final-v2__buy svg { color: var(--v2-ink); }
body.v2 .cta-final-v2__buy:hover svg { color: var(--v2-paper); }
body.v2 .cta-final-v2__trial,
body.v2 .cta-final-v2__timeline {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  color: rgba(250, 250, 247, 0.62);
  letter-spacing: 0.04em;
  margin: 0 0 var(--v2-s-2);
  max-width: 60ch;
}
body.v2 .cta-final-v2__timeline { margin-bottom: 0; opacity: 0.55; }

/* ============================================================
   Lead popup — v2 override
   Source styles live inline in 99-postamble.html ~1111+ (v1).
   Here we just reskin them to v2 visuals: sharp corners, ink
   hairlines, no green corner-frame ornaments.
   ============================================================ */
body.v2 .corner-frame::before,
body.v2 .corner-frame::after { display: none !important; }

body.v2 .improved-lead-modal {
  background: var(--v2-paper-pure);
  border: 1px solid var(--v2-ink);
  border-radius: 0 !important;
  box-shadow: var(--v2-shadow-modal);
  font-family: var(--v2-font-sans);
}

body.v2 .improved-lead-close {
  font-family: var(--v2-font-mono);
  color: var(--v2-mute-2);
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms var(--v2-ease-quiet);
}
body.v2 .improved-lead-close:hover { color: var(--v2-ink); background: transparent; }

body.v2 .improved-lead-header {
  text-align: center;
}
body.v2 .improved-lead-header svg {
  stroke: var(--v2-ink) !important;
  color: var(--v2-ink);
}
body.v2 .improved-lead-header h3 {
  font-family: var(--v2-font-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  line-height: 1.15;
  margin: 8px 0 12px;
}
body.v2 .improved-lead-description {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-ink-soft);
  line-height: 1.5;
  margin: 0;
}

body.v2 .method-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-s-2);
  margin: var(--v2-s-4) 0;
}
body.v2 .method-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper-pure);
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0 !important;
  transition: background 120ms var(--v2-ease-quiet),
              color 120ms var(--v2-ease-quiet);
}
body.v2 .method-button:hover { background: var(--v2-bg-bracket); }
body.v2 .method-button.active {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .method-icon { color: currentColor; }
body.v2 .method-label { color: currentColor; }

body.v2 .contact-input {
  width: 100%;
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper-pure);
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  border-radius: 0 !important;
  outline: none;
  transition: border-color 120ms var(--v2-ease-quiet);
}
body.v2 .contact-input::placeholder { color: var(--v2-mute-2); }
body.v2 .contact-input:focus { border-color: var(--v2-accent); }
body.v2 .contact-input.input-error { border-color: var(--v2-danger); }

body.v2 .input-hint {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v2-danger);
  min-height: 14px;
  margin: 6px 0 0;
}

body.v2 .trust-text,
body.v2 .improved-lead-hint {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-mute-2);
  line-height: 1.45;
  text-align: center;
  margin: var(--v2-s-3) 0;
}

body.v2 #improved-lead-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--v2-ink);
  color: var(--v2-paper);
  border: 1px solid var(--v2-ink);
  border-radius: 0 !important;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 120ms var(--v2-ease-quiet),
              color 120ms var(--v2-ease-quiet);
}
body.v2 #improved-lead-submit:hover {
  background: var(--v2-paper);
  color: var(--v2-ink);
}
body.v2 #improved-lead-submit svg { stroke: currentColor; }

/* ── FAQ pure CSS (no JS) — native <details>/<summary> ── */
body.v2 .faq-v2 details.faq-v2__item {
  border-bottom: 1px solid var(--v2-rule-soft);
}
body.v2 .faq-v2 details.faq-v2__item:last-child { border-bottom: 0; }
body.v2 .faq-v2 summary.faq-v2__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-s-4);
  padding: var(--v2-s-5) 0;
  cursor: pointer;
  font-family: var(--v2-font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--v2-ink);
  list-style: none;
  transition: color 180ms var(--v2-ease-quiet);
}
body.v2 .faq-v2 summary.faq-v2__head::-webkit-details-marker { display: none; }
body.v2 .faq-v2 summary.faq-v2__head::marker { content: ""; }
body.v2 .faq-v2 summary.faq-v2__head:hover { color: var(--v2-accent-ink); }
body.v2 .faq-v2 details[open] summary.faq-v2__head { color: var(--v2-ink); }
body.v2 .faq-v2 details[open] summary.faq-v2__head .faq-v2__icon::before { content: "−"; }
body.v2 .faq-v2 summary.faq-v2__head .faq-v2__icon { font-size: 0; }
body.v2 .faq-v2 summary.faq-v2__head .faq-v2__icon::before {
  content: "+";
  font-family: var(--v2-font-mono);
  font-size: 24px;
  color: var(--v2-accent);
  line-height: 1;
}
body.v2 .faq-v2 details .faq-v2__answer p {
  padding: 0 0 var(--v2-s-5);
  font-size: var(--v2-fs-body);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 72ch;
}

/* ============================================================
   HERO mockup — CSS-only animation (no JS).
   Total cycle: 10s, infinite loop. Every state transition
   is driven by opacity at fixed keyframe percentages.

   Timeline (% of 10s cycle):
     0–24%  : initial state (ПН-012 ОЧІКУЄ, ПН-010 ОЧІКУЄ КВ.2)
     24–34% : ПН-012 ВІДПРАВКА  (sending)
     34–44% : ПН-012 ОЧІКУЄ КВ.2 (after-state on row 12)
     44–55% : ПН-010 → ЗАРЕЄСТРОВАНО, KPIs flip, limit countdown
     55–65% : Toast slides in from top
     65–72% : Telegram lines fade in 1, 2, 3 sequentially
     72–95% : hold
     95–100%: toast slides out + reset to initial
   ============================================================ */

/* Stack overlay — both/all states share the same cell */
/* ============================================================
   Hero mockup animation — 8s cinematic cycle

   Timeline:
   0-12%   idle (table visible, PN-010 ОЧІКУЄ, PN-012 ОЧІКУЄ)
   12-18%  button "Зареєструвати" pulses (click)
   18-28%  PN-012: ОЧІКУЄ → ВІДПРАВКА (sending spinner feel)
   28-38%  PN-010: ОЧІКУЄ КВ.2 → ЗАРЕЄСТРОВАНО (flash green)
   38-45%  KPIs tick: 163→164, limit drops, PN-012 → ОЧІКУЄ КВ.2
   45-55%  toast slides in from top
   55-75%  toast lines reveal sequentially
   75-85%  toast holds
   85-95%  toast fades out
   95-100% reset pause
   ============================================================ */

body.v2 .anim-stack {
  position: relative;
  display: inline-block;
  min-height: 1em;
}
body.v2 .anim-stack .anim-state {
  display: inline-block;
}
body.v2 .anim-stack .anim-state ~ .anim-state {
  position: absolute;
  left: 0;
  top: 0;
}

/* ───── Button pulse at 12-18% ───── */
body.v2 .mockup-v2__btn {
  animation: hero-btn-pulse 8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes hero-btn-pulse {
  0%, 11%  { transform: scale(1); filter: brightness(1); }
  14%      { transform: scale(1.08); filter: brightness(1.3); }
  18%      { transform: scale(1); filter: brightness(1); }
  100%     { transform: scale(1); filter: brightness(1); }
}

/* ───── PN-010 (target row) — ОЧІКУЄ КВ.2 → ЗАРЕЄСТРОВАНО ───── */
body.v2 .is-target .anim-state--before {
  animation: hero-010-before 8s ease infinite;
}
body.v2 .is-target .anim-state--after {
  animation: hero-010-after 8s ease infinite;
}
@keyframes hero-010-before {
  0%, 27%  { opacity: 1; }
  32%      { opacity: 0; }
  95%      { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes hero-010-after {
  0%, 27%  { opacity: 0; transform: translateY(4px); }
  34%      { opacity: 1; transform: translateY(0); }
  95%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* row-flash: bright green pulse on PN-010 when registered */
body.v2 tr.row-flash td {
  animation: hero-row-flash 8s ease infinite;
}
@keyframes hero-row-flash {
  0%, 27%  { background: var(--v2-bg-bracket, #FFFAE6); box-shadow: none; }
  30%      { background: rgba(20,184,166,0.25); box-shadow: inset 0 0 0 1px rgba(20,184,166,0.4); }
  34%      { background: rgba(20,184,166,0.12); box-shadow: none; }
  50%      { background: var(--v2-bg-bracket, #FFFAE6); }
  95%      { background: var(--v2-bg-bracket, #FFFAE6); }
  100%     { background: var(--v2-bg-bracket, #FFFAE6); }
}

/* ───── PN-012 — ОЧІКУЄ → ВІДПРАВКА... → ОЧІКУЄ КВ.2 ───── */
body.v2 tbody tr:not(.is-target) .anim-state--before {
  animation: hero-012-pending 8s ease infinite;
}
body.v2 tbody tr:not(.is-target) .anim-state--mid {
  animation: hero-012-sending 8s ease infinite;
}
body.v2 tbody tr:not(.is-target) .anim-state--after {
  animation: hero-012-waiting 8s ease infinite;
}
@keyframes hero-012-pending {
  0%, 17%  { opacity: 1; }
  22%      { opacity: 0; }
  95%      { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes hero-012-sending {
  0%, 17%  { opacity: 0; }
  22%      { opacity: 1; }
  35%      { opacity: 1; }
  40%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes hero-012-waiting {
  0%, 35%  { opacity: 0; }
  40%      { opacity: 1; }
  95%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* ───── KPI numbers + limit — tick at 38% ───── */
body.v2 .mockup-v2__kpis .anim-state--before,
body.v2 .mockup-v2__limit .anim-state--before {
  animation: hero-kpi-before 8s ease infinite;
}
body.v2 .mockup-v2__kpis .anim-state--mid {
  animation: hero-kpi-mid 8s ease infinite;
}
body.v2 .mockup-v2__kpis .anim-state--after,
body.v2 .mockup-v2__limit .anim-state--after {
  animation: hero-kpi-after 8s ease infinite;
}
@keyframes hero-kpi-before {
  0%, 36%  { opacity: 1; transform: translateY(0); }
  40%      { opacity: 0; transform: translateY(-8px); }
  95%      { opacity: 0; }
  100%     { opacity: 1; transform: translateY(0); }
}
@keyframes hero-kpi-mid {
  0%, 17%  { opacity: 0; }
  22%      { opacity: 1; transform: translateY(0); }
  36%      { opacity: 1; }
  40%      { opacity: 0; transform: translateY(-8px); }
  100%     { opacity: 0; }
}
@keyframes hero-kpi-after {
  0%, 36%  { opacity: 0; transform: translateY(8px); }
  42%      { opacity: 1; transform: translateY(0); }
  95%      { opacity: 1; }
  100%     { opacity: 0; transform: translateY(8px); }
}

/* ───── Toast — dramatic slide-in from top ───── */
body.v2 .toast-v2--anim {
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-100% - 20px));
  animation: hero-toast 8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes hero-toast {
  0%, 43%  { opacity: 0; transform: translateX(-50%) translateY(calc(-100% - 20px)) scale(0.95); }
  48%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  82%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  88%      { opacity: 0; transform: translateX(-50%) translateY(calc(-100% - 20px)) scale(0.95); }
  100%     { opacity: 0; }
}

/* ───── Toast lines — staggered fade-in ───── */
body.v2 .toast-v2--anim .toast-v2__line {
  opacity: 0;
}
body.v2 .toast-v2--anim .toast-v2__line--1 {
  animation: hero-tg-1 8s ease-out infinite;
}
body.v2 .toast-v2--anim .toast-v2__line--2 {
  animation: hero-tg-2 8s ease-out infinite;
}
body.v2 .toast-v2--anim .toast-v2__line--3 {
  animation: hero-tg-3 8s ease-out infinite;
}
@keyframes hero-tg-1 {
  0%, 49%  { opacity: 0; transform: translateY(6px); }
  53%      { opacity: 1; transform: translateY(0); }
  82%      { opacity: 1; }
  88%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes hero-tg-2 {
  0%, 52%  { opacity: 0; transform: translateY(6px); }
  56%      { opacity: 1; transform: translateY(0); }
  82%      { opacity: 1; }
  88%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes hero-tg-3 {
  0%, 55%  { opacity: 0; transform: translateY(6px); }
  59%      { opacity: 1; transform: translateY(0); }
  82%      { opacity: 1; }
  88%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* Reduced-motion users get a static snapshot — no infinite loops */
@media (prefers-reduced-motion: reduce) {
  body.v2 .mockup-v2--anim *,
  body.v2 .toast-v2--anim,
  body.v2 .toast-v2--anim * {
    animation: none !important;
  }
  body.v2 .mockup-v2--anim .anim-state--before { opacity: 1; }
  body.v2 .mockup-v2--anim .anim-state--mid,
  body.v2 .mockup-v2--anim .anim-state--after { opacity: 0; }
  body.v2 .toast-v2--anim {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  body.v2 .toast-v2--anim .toast-v2__line { opacity: 1; }
}

/* ============================================================
   Demo popup — CSS :target only, no JS
   Open: <a href="#demo-popup">  Close: <a href="#"> (overlay or ×)
   ============================================================ */
body.v2 .popup-v2 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--v2-s-4);
}
body.v2 .popup-v2:target {
  display: flex;
  animation: popup-v2-fade-in 200ms var(--v2-ease-quiet) both;
}
@keyframes popup-v2-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
body.v2 .popup-v2__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  display: block;
}
body.v2 .popup-v2__card {
  position: relative;
  background: var(--v2-paper-pure);
  border: 1px solid var(--v2-ink);
  padding: var(--v2-s-7);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--v2-shadow-modal);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
  animation: popup-v2-slide-in 220ms var(--v2-ease-quiet) both;
}
@keyframes popup-v2-slide-in {
  0%   { transform: translateY(-12px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
body.v2 .popup-v2__close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--v2-font-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--v2-mute-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms var(--v2-ease-quiet);
}
body.v2 .popup-v2__close:hover { color: var(--v2-ink); }
body.v2 .popup-v2__icon {
  color: var(--v2-ink);
  display: flex;
  justify-content: center;
  margin-bottom: var(--v2-s-2);
}
body.v2 .popup-v2__title {
  font-family: var(--v2-font-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  text-align: center;
  margin: 0;
}
body.v2 .popup-v2__desc {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-ink-soft);
  text-align: center;
  margin: 0 0 var(--v2-s-2);
}
body.v2 .popup-v2__form {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .popup-v2__methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-s-2);
  border: 0;
  padding: 0;
  margin: 0;
}
body.v2 .popup-v2__method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper-pure);
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms var(--v2-ease-quiet),
              color 120ms var(--v2-ease-quiet);
}
body.v2 .popup-v2__method input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.v2 .popup-v2__method:has(input:checked) {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .popup-v2__method-glyph { color: currentColor; line-height: 0; }
body.v2 .popup-v2__input {
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper-pure);
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms var(--v2-ease-quiet);
}
body.v2 .popup-v2__input::placeholder { color: var(--v2-mute-2); }
body.v2 .popup-v2__input:focus { border-color: var(--v2-accent); }
body.v2 .popup-v2__trust,
body.v2 .popup-v2__hint {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-mute-2);
  text-align: center;
  margin: 0;
  line-height: 1.45;
}
body.v2 .popup-v2__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: var(--v2-font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.v2 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Checkbox-hack popup toggle — overrides display:none on .popup-v2 when toggle is checked.
   :not(.video-popup) prevents the video popup from opening together with lead popup
   (both share .popup-v2 class and sit as siblings after the lead toggle). */
body.v2 #lead-popup-toggle:checked ~ .popup-v2:not(.video-popup) {
  display: flex !important;
  animation: popup-v2-fade-in 200ms var(--v2-ease-quiet) both;
}
body.v2 .popup-v2__toggle { display: none !important; }
body.v2 label.btn { user-select: none; cursor: pointer; }

/* Anti-bot fields */
body.v2 .popup-v2__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
body.v2 .popup-v2__turnstile {
  margin: var(--v2-s-2) 0;
  display: flex;
  justify-content: center;
}

/* ============================================================
   Kill main.css snap-scroll globally for v2 pages.
   main.css sets scroll-snap-type:y mandatory on html at ≥769px
   and scroll-snap-align:start on every section/footer — this
   hijacks free scroll. v2 pages use normal vertical flow.
   ============================================================ */
html:has(body.v2) {
  scroll-snap-type: none !important;
}
body.v2 section,
body.v2 footer,
body.v2 .horizontal-slide {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* ============================================================
   Tablet & Mobile (≤1024px) — switch from horizontal-scroll to vertical.
   Desktop layout (10 slides × 100vw, JS pager) starts at min-width:1025px
   (see tax-invoices.css). Anything below MUST stack vertically, otherwise
   the 901–1024px range has no layout rules and slides collapse onto each
   other with abs-positioned decorations overlapping body text.
   ============================================================ */
/* ============================================================
   Desktop (≥1025px) — vertical flow + scroll-driven animations.
   No snap, no scroll hijack. Native scroll + CSS view() reveals.
   ============================================================ */
@media (min-width: 1025px) {
  html, body.v2 {
    height: auto !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: none !important;
    scrollbar-width: auto !important;
  }
  html::-webkit-scrollbar,
  body.v2::-webkit-scrollbar { display: block !important; width: 8px !important; }
  body.v2::-webkit-scrollbar-track { background: var(--v2-paper); }
  body.v2::-webkit-scrollbar-thumb { background: var(--v2-rule-soft); }
  body.v2 { scrollbar-width: auto !important; }
  /* Kill main.css snap on sections */
  body.v2 section,
  body.v2 footer {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  body.v2 .horizontal-scroll-wrapper {
    display: block !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    width: 100% !important;
    scroll-snap-type: none !important;
    counter-reset: slide-counter;
  }
  body.v2 .horizontal-slide {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 48px) !important;
    position: relative;
  }

  /* ── Scroll-driven fade-in (CSS-only, no JS) ── */
  body.v2 .horizontal-slide .section-header,
  body.v2 .horizontal-slide .eyebrow,
  body.v2 .horizontal-slide .h2,
  body.v2 .horizontal-slide .process-v2__steps,
  body.v2 .horizontal-slide .process-v2__flow,
  body.v2 .horizontal-slide .compare-v2__grid,
  body.v2 .horizontal-slide .pricing-v2__layout,
  body.v2 .horizontal-slide .benefits-v2__grid,
  body.v2 .horizontal-slide .security-v2__grid,
  body.v2 .horizontal-slide .supported-v2__table,
  body.v2 .horizontal-slide .reviews-v2__grid,
  body.v2 .horizontal-slide .stats-v2__grid,
  body.v2 .horizontal-slide .faq-v2,
  body.v2 .horizontal-slide .cta-final-v2__honest-wrap,
  body.v2 .horizontal-slide .cta-final-v2__final,
  body.v2 .horizontal-slide .cta-final-v2__related,
  body.v2 .horizontal-slide .seo-content {
    animation: v2FadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 5% entry 40%;
  }

  @keyframes v2FadeIn {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Section number (top-right, subtle) ── */
  body.v2 .horizontal-slide::before {
    counter-increment: slide-counter;
    content: "0" counter(slide-counter);
    position: absolute;
    top: clamp(48px, 6vw, 96px);
    right: clamp(24px, 4vw, 48px);
    font-family: var(--v2-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-muted);
    letter-spacing: 0.08em;
    z-index: 2;
  }

  /* Hide horizontal-scroll nav chrome */
  body.v2 .landing-section-indicator,
  body.v2 .landing-progress-bar,
  body.v2 .landing-nav-v2 .slot,
  body.v2 .horizontal-arrow,
  body.v2 .horizontal-arrow-left,
  body.v2 .horizontal-arrow-right,
  body.v2 .scroll-teaser,
  body.v2 [class*="horizontal-nav-dot"],
  body.v2 .horizontal-nav-dots {
    display: none !important;
  }
}


/* Very narrow phones — squeeze tooltips and brackets */
@media (max-width: 380px) {
  body.v2 .bracket-tooltip .bracket-examples { font-size: 11px; }
  body.v2 .hero-v2__title { font-size: clamp(28px, 8vw, 40px) !important; }
  body.v2 .stats-v2__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FRAIN Ch 3 — Media Queries Level 4 features.
   Touch / hover / color-scheme detection — more accurate than
   width-based breakpoints for input affordances.
   ============================================================ */

/* (pointer: coarse) — primary input is touch (finger / stylus).
   Independent of viewport width — a touch laptop on 1920×1080 still
   needs 44×44 touch targets, while a tiny browser window on a desktop
   mouse does not. */
@media (pointer: coarse) {
  body.v2 .btn,
  body.v2 label.btn,
  body.v2 .faq-v2 summary,
  body.v2 .landing-nav-v2__cta a,
  body.v2 .pricing-v2__cta,
  body.v2 .cta-final-v2__buy,
  body.v2 button {
    min-height: 44px !important;
    min-width: 44px;
  }
  /* tooltips are unreliable on touch — make underline always visible */
  body.v2 .bracket-text {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
}

/* (hover: none) — device cannot hover (touch-only).
   Disable :hover effects that depend on cursor presence. */
@media (hover: none) {
  body.v2 .btn:hover            { background: var(--v2-ink); color: var(--v2-paper); }
  body.v2 .btn--ghost:hover     { background: transparent;   color: var(--v2-ink); }
  body.v2 .mockup-v2__table tr:hover .mockup-logo {
    /* don't recolour on tap */
    filter: grayscale(0.4);
  }
  body.v2 .bracket-tooltip:hover .bracket-examples,
  body.v2 .bracket-tooltip:hover::after {
    /* tooltip via :focus-within instead — trigger on tap */
    opacity: 0;
    visibility: hidden;
  }
  body.v2 .bracket-tooltip:focus-within .bracket-examples,
  body.v2 .bracket-tooltip:focus-within::after {
    opacity: 1;
    visibility: visible;
  }
}

/* (any-hover: hover) — at least one input has hover.
   Re-enable hover-based affordances if a stylus or external mouse
   is present even on a touch device. */
@media (any-hover: hover) {
  body.v2 .btn:hover { background: var(--v2-paper); color: var(--v2-ink); }
}

/* Dark mode — OS preference (when no explicit data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.v2 {
    --v2-paper: #14130F;
    --v2-paper-pure: #1B1A16;
    --v2-ink: #F2EFE5;
    --v2-ink-soft: #BFBCB1;
    --v2-rule-soft: #3A3830;
    --v2-bg-bracket: #22201A;
  }
  :root:not([data-theme="light"]) body.v2 .mockup-v2 { background: #E8DFC4; color: #0E0E0C; }
  :root:not([data-theme="light"]) body.v2 .mockup-v2 .mockup-status,
  :root:not([data-theme="light"]) body.v2 .mockup-v2 .num,
  :root:not([data-theme="light"]) body.v2 .mockup-v2 .kpi__l,
  :root:not([data-theme="light"]) body.v2 .mockup-v2 .kpi__v { color: inherit; }
}
/* Dark mode — explicit via data-theme (time-based auto) */
:root[data-theme="dark"] body.v2 {
  --v2-paper: #14130F;
  --v2-paper-pure: #1B1A16;
  --v2-ink: #F2EFE5;
  --v2-ink-soft: #BFBCB1;
  --v2-rule-soft: #3A3830;
  --v2-bg-bracket: #22201A;
}
:root[data-theme="dark"] body.v2 .mockup-v2 { background: #E8DFC4; color: #0E0E0C; }
:root[data-theme="dark"] body.v2 .mockup-v2 .mockup-status,
:root[data-theme="dark"] body.v2 .mockup-v2 .num,
:root[data-theme="dark"] body.v2 .mockup-v2 .kpi__l,
:root[data-theme="dark"] body.v2 .mockup-v2 .kpi__v { color: inherit; }

/* ============================================================
   TABLET & MOBILE — kill ALL nested vertical scrolls.
   Page-level body scroll only; per-slide overflow-y:auto from
   main.css is overridden so the page reads as one continuous flow.
   Boundary must match the structural switch above (1024px) so the
   901–1024px range doesn't fall through to default horizontal-scroll.
   ============================================================ */
@media (max-width: 1024px) {
  /* ── Mobile vertical layout ── */
  body.v2 .horizontal-scroll-wrapper {
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  body.v2 .horizontal-slide {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }
  /* Flatten nested scrollables */
  body.v2 .horizontal-slide .mockup-v2__table-wrap,
  body.v2 .horizontal-slide .reviews-v2__grid,
  body.v2 .horizontal-slide .features-grid,
  body.v2 .horizontal-slide .faq-container,
  body.v2 .horizontal-slide .pricing-v2__card,
  body.v2 .horizontal-slide [class*="-scroll"]:not(.horizontal-scroll-wrapper),
  body.v2 .horizontal-slide [class*="-overflow"] {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
}


/* ============================================================
   MOBILE — design-lead directives (≤768px):
   1. Hero mockup hidden, replaced with 1-line caption
   2. Bracket eyebrows flat (no [ ]), 11px mono uppercase
   3. Header logo only (no nav menu — there isn't one)
   ============================================================ */
/* Inline SVG hero anim is mobile-only; desktop keeps the JS demo stage. */
body.v2 .hero-anim-svg { display: none; }
@media (max-width: 768px) {
  /* Bracket eyebrows → flat. SKILL.md brackets are a desktop-only signature;
     on mobile they eat horizontal width and add visual noise. */
  body.v2 .eyebrow.eyebrow--bracket::before,
  body.v2 .eyebrow.eyebrow--bracket::after,
  body.v2 .section-title::before,
  body.v2 .section-title::after {
    content: "" !important;
    margin: 0 !important;
  }
  /* Compact wireframe-style underline on the eyebrow itself */
  body.v2 .eyebrow {
    border-bottom: 1px solid var(--v2-rule-soft);
    padding-bottom: 4px;
    margin-bottom: 12px;
  }

  /* Hero mockup — hide on mobile per design-lead. The desktop story is
     "look how it sits inside your ERP"; on mobile we replace it with a
     single tagline so the hero isn't dragged out by a 6-row mock table. */
  /* Mobile hero: headline -> demo -> CTA above the fold (was: wall of text,
     demo buried at order:2 below the fold where 90% never scroll).
     display:contents promotes the text block's children to flex items of the
     layout so they reorder around the visual (a sibling) via `order`. */
  /* Müller-Brockmann mobile grid: ONE left axis (flush-left, ragged-right —
     not centered), modular vertical rhythm (kicker hugs headline; equal gaps
     between modules). The centered layout had every block on its own axis
     (eyebrow@75 / title@24 / svg@70) = ragged left edge = "несбалансовано". */
  body.v2 .hero-v2__layout {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--v2-s-5);                 /* 24px — single module rhythm */
    text-align: left;
  }
  body.v2 .hero-v2 .eyebrow,
  body.v2 .hero-v2__title,
  body.v2 .hero-v2__sub,
  body.v2 .hero-v2__cta { text-align: left !important; }
  body.v2 .hero-v2__text { display: contents; }
  body.v2 .hero-v2__text::after { content: none; }
  body.v2 .hero-v2__text .eyebrow { order: 1; margin-bottom: 0; }
  /* kicker tightens onto the headline: they read as one unit (24 gap − 14) */
  body.v2 .hero-v2__title { order: 2; margin-top: -14px; }
  body.v2 .hero-v2__visual {
    display: block !important;
    order: 3;
    margin: 0 !important;
  }
  body.v2 .hero-v2__cta { order: 4; }
  body.v2 .hero-v2__sub { order: 5; }
  body.v2 .hero-v2__lifetime { order: 6; }
  body.v2 .hero-v2__founder { order: 7; }
  body.v2 .hero-v2__trust { order: 8; }
  body.v2 .hero-v2__micro { order: 9; }
  body.v2 .hero-v2__visual .hero-demo-caption { display: none; }
  body.v2 .hero-demo-wrap { overflow: hidden; }
  /* Mobile: show the reliable inline-SVG anim, hide the fragile JS demo stage. */
  body.v2 .hero-anim-svg { display: block; order: 3; margin: 0; max-width: 340px; width: 100%; }
  body.v2 .hero-demo-wrap .stage { display: none !important; }
  body.v2 .hero-v2__visual { display: contents !important; }
  /* Hide cursor on touch — no mouse pointer on phone */
  body.v2 .stage .cursor { display: none !important; }
  /* Mock table — compact cells */
  body.v2 #stage .mock { border-radius: 4px; }
  body.v2 #stage .mock-header { font-size: 8px; padding: 8px 10px; }
  body.v2 #stage .mock-header::before { width: 6px; height: 6px; margin-right: 10px; box-shadow: 10px 0 0 #FFC107, 20px 0 0 #F44336; }
  body.v2 #stage .mock-btn { font-size: 8px; padding: 5px 10px; }
  body.v2 #stage .mock-kpis { grid-template-columns: repeat(4, 1fr); gap: 0; }
  body.v2 #stage .mock-kpi { padding: 4px 4px; }
  body.v2 #stage .mock-kpi-label { font-size: 6px; }
  body.v2 #stage .mock-kpi-value { font-size: 13px; }
  body.v2 #stage th { font-size: 7px; padding: 5px 8px; }
  body.v2 #stage td { font-size: 10px; padding: 5px 8px; }
  body.v2 #stage .co-logo { width: 12px; height: 12px; }
  body.v2 #stage .mock-table { max-height: 150px; }
  /* Toast — smaller on phone */
  body.v2 #mock .toast { width: 240px !important; font-size: 11px !important; padding: 10px 14px !important; }
  /* Selection bar — compact */
  body.v2 #stage .sel-bar { font-size: 10px; padding: 8px 12px; }
  /* Title card — readable on phone */
  body.v2 #stage .title-card__text { font-size: clamp(18px, 5vw, 24px); padding: 20px; }
  /* Reel — compact */
  body.v2 #stage .reel-inner { font-size: clamp(14px, 4vw, 18px); padding: 0 12px; }
  body.v2 #stage .reel-logo { width: 80px; height: 64px; margin-bottom: 16px; }

  /* Header: drop the slot indicator, keep logo + single CTA */
  body.v2 .header .landing-nav-v2 { gap: 8px !important; }
  body.v2 .landing-nav-v2__cta .btn--ghost { display: none !important; }

  /* Footer-mounted Демо CTA also drops a 5-min hint to be self-explanatory */
  body.v2 .landing-cta { font-size: 12px !important; padding: 10px 14px !important; }

  /* Stats numerals smaller on phone */
  body.v2 .stats-v2__grid .stat__num { font-size: clamp(28px, 7vw, 36px) !important; }

  /* AI mention block — readable on phone */
  body.v2 .ai-mention-v2__quote { font-size: 14px !important; }
}

/* ============================================================
   SEO content — slide #11 inside the horizontal carousel.
   Inherits slide-level padding/background/scroll from
   .horizontal-slide; only the inner reading-width and the
   article-specific typography live here.
   ============================================================ */
body.v2 .seo-content__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--v2-container-pad);
  width: 100%;
}
body.v2 .seo-content__header {
  margin-bottom: var(--v2-s-5);
}
body.v2 .seo-content__title {
  margin: var(--v2-s-2) 0 var(--v2-s-3);
  color: var(--v2-ink);
}
body.v2 .seo-content__meta {
  font-family: var(--v2-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--v2-mute-2);
  margin: 0 0 var(--v2-s-3);
  text-transform: uppercase;
}
body.v2 .seo-content__meta time {
  color: var(--v2-ink-soft);
}
body.v2 .seo-content__toc {
  margin: var(--v2-s-5) 0 var(--v2-s-2);
  padding: var(--v2-s-4);
  border: 1px solid var(--v2-ink);
}
body.v2 .seo-content__toc-title {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-mute-2);
  margin: 0 0 var(--v2-s-2);
  font-weight: 500;
}
body.v2 .seo-content__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
body.v2 .seo-content__toc li {
  counter-increment: toc;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.5;
}
body.v2 .seo-content__toc li::before {
  content: counter(toc, decimal-leading-zero) ".  ";
  font-family: var(--v2-font-mono);
  color: var(--v2-mute-2);
  font-size: 12px;
}
body.v2 .seo-content__toc a {
  color: var(--v2-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.v2 .seo-content__toc a:hover {
  border-bottom-color: var(--v2-accent);
}
body.v2 .seo-content__lede {
  font-family: var(--v2-font-sans);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--v2-ink-soft, var(--text-secondary));
  margin: 0 0 var(--v2-s-5);
}
body.v2 .seo-content__article h3 {
  font-family: var(--v2-font-sans);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  line-height: var(--v2-lh-heading);
  margin: var(--v2-s-6) 0 var(--v2-s-2);
  color: var(--v2-ink);
  scroll-margin-top: 80px;
}
body.v2 .seo-content__article p,
body.v2 .seo-content__article li {
  font-family: var(--v2-font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--v2-ink);
}
body.v2 .seo-content__article p {
  margin: 0 0 var(--v2-s-3);
}
body.v2 .seo-content__article ol,
body.v2 .seo-content__article ul {
  padding-left: 20px;
  margin: 0 0 var(--v2-s-4);
}
body.v2 .seo-content__article li {
  margin: 0 0 var(--v2-s-2);
}
body.v2 .seo-content__article a {
  color: var(--v2-ink);
  border-bottom: 1px solid var(--v2-accent);
  padding-bottom: 1px;
}
body.v2 .seo-content__article a:hover {
  background: var(--v2-paper-tint, rgba(0, 0, 0, 0.04));
}
body.v2 .seo-content__article strong {
  font-weight: 600;
}
body.v2 .seo-content__glossary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;
  gap: var(--v2-s-2) var(--v2-s-4);
  margin: var(--v2-s-3) 0 var(--v2-s-5);
  padding: var(--v2-s-4);
  border: 1px solid var(--v2-rule);
}
body.v2 .seo-content__glossary dt {
  font-weight: 600;
  font-family: var(--v2-font-mono, var(--font-mono));
  font-size: 14px;
  color: var(--v2-ink);
}
body.v2 .seo-content__glossary dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v2-ink);
}
body.v2 .seo-content__cta-link {
  margin-top: var(--v2-s-7);
  padding: var(--v2-s-5);
  border: 1px solid var(--v2-ink);
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
}
body.v2 .seo-content__cta-link::before {
  content: '[ ДАЛІ ]';
  display: block;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--v2-mute-2, #7a786e);
  margin-bottom: var(--v2-s-3);
}
@media (max-width: 640px) {
  body.v2 .seo-content__glossary {
    grid-template-columns: 1fr;
    gap: 4px var(--v2-s-2);
  }
  body.v2 .seo-content__glossary dt {
    margin-top: var(--v2-s-2);
  }
}

/* ============================================================
   Mobile sticky CTA bar — v2 design tokens
   Appears after scrolling past hero. IntersectionObserver toggle.
   ============================================================ */
body.v2 .mobile-sticky-cta {
  display: none;
}
@media (max-width: 1024px) {
  body.v2 .mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--v2-paper);
    opacity: 1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--v2-rule-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.v2 .mobile-sticky-cta.visible {
    transform: translateY(0);
  }
  body.v2 .mobile-sticky-cta .sticky-price {
    font-family: var(--v2-font-mono, var(--font-mono));
    font-size: 18px;
    font-weight: 700;
    color: var(--v2-ink);
    white-space: nowrap;
  }
  body.v2 .mobile-sticky-cta .btn {
    flex: 1;
    min-width: 0; /* allow the flex item to shrink below content width */
    min-height: 44px;
    /* Adaptive: shrink + ellipsis so the CTA stays on one line and never
       overflows the bar on narrow phones. */
    font-size: clamp(10px, 3vw, 14px);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 10px;
    justify-content: center;
  }
  /* Very narrow phones: drop the price (already shown in the hero) so the
     CTA gets the full bar width. */
  @media (max-width: 380px) {
    body.v2 .mobile-sticky-cta .sticky-price { display: none; }
  }
  /* Push footer up so sticky bar doesn't cover content */
  body.v2 .footer {
    padding-bottom: 72px;
  }
}

/* Nav drawer — retheme to v2 tokens (main.css uses cold blue --bg-surface) */
body.v2 .nav-drawer {
  background: var(--v2-paper-pure);
  border-left-color: var(--v2-rule-soft);
}
body.v2 .nav-drawer-head { border-bottom-color: var(--v2-rule-soft); }
body.v2 .nav-drawer-title { color: var(--v2-mute-2); }
body.v2 .nav-drawer-close { color: var(--v2-ink); }
body.v2 .nav-drawer-link {
  color: var(--v2-ink);
  font-family: var(--v2-font-mono);
}
body.v2 .nav-drawer-link:hover,
body.v2 .nav-drawer-link:focus { background: var(--v2-bg-bracket); color: var(--v2-ink); }
body.v2 .nav-drawer-link.active { color: var(--v2-accent); }
body.v2 .nav-drawer-link.sub { color: var(--v2-ink-soft); }
body.v2 .nav-drawer-group-title { color: var(--v2-mute-2); }
body.v2 .nav-drawer-foot { border-top-color: var(--v2-rule-soft); }

/* Video demo popup */
body.v2 #video-popup-toggle:checked ~ .video-popup {
  display: flex !important;
  animation: popup-v2-fade-in 200ms var(--v2-ease-quiet) both;
  z-index: 1001;
}
/* Lead form must sit above video popup when both are open */
body.v2 #lead-popup-toggle:checked ~ .popup-v2:not(.video-popup) {
  z-index: 1002 !important;
}
body.v2 .video-popup__card {
  position: relative;
  background: var(--v2-ink);
  border: 1px solid var(--v2-rule-soft);
  padding: 0;
  width: 100%;
  max-width: 720px;
  box-shadow: var(--v2-shadow-modal);
  display: flex;
  flex-direction: column;
  animation: popup-v2-slide-in 220ms var(--v2-ease-quiet) both;
}
body.v2 .video-popup__card .popup-v2__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.2);
}
body.v2 .video-popup__card .popup-v2__close:hover,
body.v2 .video-popup__card .popup-v2__close:active {
  background: rgba(0,0,0,0.9);
}
body.v2 .video-popup__player { width: 100%; }
body.v2 .video-popup__player iframe { display: block; width: 100%; }
body.v2 .video-popup__cta {
  margin: var(--v2-s-3);
  justify-content: center;
  background: var(--v2-paper);
  color: var(--v2-ink);
  border-color: var(--v2-paper);
}

/* Skip-link — retheme to v2 */
body.v2 .skip-link { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-paper); }

/* Header auth/account view — retheme to v2 (same --bg-surface blue fix as nav-drawer) */
body.v2 .header-view {
  background: var(--v2-paper);
}
body.v2 .header-view .nav-link { color: var(--v2-ink); font-family: var(--v2-font-mono); }
body.v2 .header-view .nav-link:hover { color: var(--v2-accent); }
body.v2 .header-view-back { color: var(--v2-ink); }
body.v2 .header-view-back-label { color: var(--v2-ink-soft); }

/* Apple Pay mobile mount — hidden on desktop, visible ≤768px */
body.v2 .hero-v2__apple-pay-mobile { display: none; }

/* ============================================================
   MOBILE CONVERSION UPGRADE — ad traffic on 360-414px phones.
   Every rule below targets a measured conversion blocker:
   overflow, unreachable CTA, unreadable price, wasted space.
   Breakpoints: 768px (phone), 480px (narrow phone).
   ============================================================ */

/* ── Phone (≤768px) ── */
@media (max-width: 768px) {
  /* Frain fundamentals */
  html:has(body.v2) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body.v2 img { max-width: 100%; height: auto; }
  html:has(body.v2) { scroll-padding-top: 56px; }

  /* Kill horizontal scroll + hide scrollbar on phone */
  html:has(body.v2), body.v2 { overflow-x: hidden; }
  html:has(body.v2) { scrollbar-width: none; }
  html:has(body.v2)::-webkit-scrollbar { display: none; }
  /* Restore scrollbar inside hero mock table — neutral color, not v1 green */
  body.v2 #stage .mock-table { scrollbar-width: thin !important; scrollbar-color: #C9BFA5 #F0EBD9 !important; }
  body.v2 #stage .mock-table::-webkit-scrollbar { display: block; width: 6px; }
  body.v2 #stage .mock-table::-webkit-scrollbar-track { background: #F0EBD9; }
  body.v2 #stage .mock-table::-webkit-scrollbar-thumb { background: #C9BFA5; }

  /* Scroll-to-top button — hidden until JS adds .visible after scroll */
  body.v2 .scroll-top-btn {
    position: fixed;
    bottom: 80px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-paper-pure);
    border: 1px solid var(--v2-ink);
    color: var(--v2-ink);
    font-family: var(--v2-font-mono);
    font-size: 18px;
    line-height: 1;
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  body.v2 .scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* CRITICAL FIX: v1 tax-invoices.css hides .scanlines at ≤640px,
     which nukes the entire hero (it carries the scanlines class).
     Override with higher specificity + !important. */
  body.v2 .hero-v2.scanlines { display: flex !important; }

  /* Hero — get CTA above the fold */
  body.v2 .hero-v2 { min-height: auto; }
  body.v2 .hero-v2__title { font-size: clamp(28px, 8vw, 42px) !important; }
  body.v2 .hero-v2__sub { font-size: 15px; }
  body.v2 .hero-v2__text { gap: var(--v2-s-3); }
  body.v2 .hero-v2.scanlines { padding-top: var(--v2-s-4) !important; }

  /* CTA buttons — full-width stacked for thumb reach */
  body.v2 .hero-v2__cta {
    flex-direction: column;
    width: 100%;
    gap: var(--v2-s-2);
  }
  body.v2 .hero-v2__cta .btn,
  body.v2 .hero-v2__cta label.btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  body.v2 .hero-v2__cta form { width: 100%; display: flex !important; }
  body.v2 .hero-v2__cta form .btn { flex: 1; }

  /* Lifetime list — horizontal compact */
  body.v2 .hero-v2__lifetime {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  body.v2 .hero-v2__lifetime li { font-size: 12px; }

  /* Micro badges — tighter */
  body.v2 .hero-v2__micro { gap: var(--v2-s-2) var(--v2-s-3); }

  /* Founder / trust — compact */
  body.v2 .hero-v2__founder,
  body.v2 .hero-v2__trust { font-size: 13px; }

  /* Apple Pay / Google Pay — show mobile mount, hide desktop mount */
  body.v2 .hero-v2__apple-pay-mobile { display: block; margin-top: var(--v2-s-3); }
  body.v2 #payment-request-button { display: none; }

  /* Pricing — 88px overflows on 375px screens */
  body.v2 .pricing-v2__amount { font-size: clamp(36px, 11vw, 56px) !important; white-space: normal !important; }
  body.v2 .pricing-v2__card { padding: var(--v2-s-4); }
  body.v2 .pricing-v2__cta { width: 100%; }

  /* Final CTA — price + buttons */
  body.v2 .cta-final-v2__price strong { font-size: clamp(36px, 11vw, 52px) !important; }
  body.v2 .section--final { padding: var(--v2-s-7) 0 !important; }
  body.v2 .cta-final-v2__buttons {
    flex-direction: column;
    width: 100%;
  }
  body.v2 .cta-final-v2__buttons .btn,
  body.v2 .cta-final-v2__buttons label.btn {
    width: 100%;
    justify-content: center;
  }
  body.v2 .cta-final-v2__buy-form { width: 100%; }
  body.v2 .cta-final-v2__social-proof { flex-wrap: wrap; }

  /* Related links — stack without left border artifact */
  body.v2 .cta-final-v2__related-list { grid-template-columns: 1fr; }
  body.v2 .cta-final-v2__related-list > li + li { border-left: 0; }

  /* Social proof clients — readable wrap */
  body.v2 .social-proof-v2__clients { font-size: 13px; line-height: 2; }

  /* Cap reel — long UA words overflow at nowrap */
  .cap-reel__item { white-space: normal !important; }

  /* Process flow — wrap long mono text */
  body.v2 .process-v2__flow { font-size: 14px; word-break: break-word; }

  /* Section headlines — proportional to screen */
  body.v2 .h2 { font-size: clamp(28px, 7vw, 36px); }

  /* Supported table — horizontal scroll on overflow */
  body.v2 .supported-v2__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Header nav — hide section name, keep CTA */
  body.v2 .landing-nav-v2 .slot__name { display: none; }

  /* FAQ — readable on phone */
  body.v2 .faq-v2 summary.faq-v2__head { font-size: 16px; }

  /* Honest block — tighter padding */
  body.v2 .cta-final-v2__honest-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Lead popup — mobile form UX */
  body.v2 .popup-v2__card {
    padding: var(--v2-s-5);
    max-width: none;
    margin: var(--v2-s-2);
  }
  body.v2 .popup-v2__title { font-size: 22px; }
  body.v2 .popup-v2__method { min-height: 44px; }
  body.v2 .popup-v2__input {
    font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
    min-height: 44px;
  }
  body.v2 .popup-v2__submit { min-height: 48px; }

  /* Process steps — Basis-style vertical timeline (scroll+click) */
  body.v2 .process-v2__steps {
    position: relative;
    padding-left: 40px;
  }
  /* Vertical connector line — centered on dots (dot center = 9px from container) */
  body.v2 .process-v2__steps::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--v2-ink);
    opacity: 0.25;
    transform: translateX(-50%);
  }
  body.v2 .process-v2__step {
    position: relative;
    border-top: 0;
    padding-top: 0;
    padding-bottom: var(--v2-s-6);
    cursor: pointer;
  }
  /* Dot — vertically centered with heading text */
  body.v2 .process-v2__step::before {
    content: '';
    position: absolute;
    left: -40px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--v2-ink);
    background: transparent;
    box-sizing: border-box;
    z-index: 1;
    transition: background 0.3s, top 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  body.v2 .process-v2__step.is-active::before {
    background: var(--v2-ink);
    top: 4px;
  }
  /* Heading — shrink when inactive */
  body.v2 .process-v2__step-title {
    font-size: 18px;
    opacity: 0.5;
    transition: font-size 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  }
  body.v2 .process-v2__step.is-active .process-v2__step-title {
    font-size: 24px;
    opacity: 1;
  }
  /* Body — accordion: show title always, expand desc on active */
  body.v2 .process-v2__step {
    min-height: 56px;
  }
  body.v2 .process-v2__step-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
  }
  body.v2 .process-v2__step.is-active .process-v2__step-desc {
    max-height: 200px;
    opacity: 1;
  }
  body.v2 .process-v2__step:last-child { padding-bottom: 0; }
  body.v2 .process-v2__num { display: none; }
  /* Contain scroll inside process section */
  body.v2 .process-v2__steps {
    overscroll-behavior: contain;
  }

  /* Compare — solution chips don't overflow */
  body.v2 .compare-v2__workflow { font-size: 15px; }
  body.v2 .compare-v2__chip { padding: 3px 8px; }

  /* Security spec table — stack on phone */
  body.v2 .security-v2__spec th,
  body.v2 .security-v2__spec td { display: block; width: 100%; }
}

/* ── Narrow phone (≤480px) ── */
@media (max-width: 480px) {
  /* Tighter horizontal padding — gain 16px content width */
  body.v2 .horizontal-slide { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero — fit above fold on SE/mini */
  body.v2 .hero-v2__title { font-size: 30px !important; letter-spacing: -0.01em; }
  body.v2 .hero-v2__sub { font-size: 14px; }
  body.v2 .hero-v2__text::after { font-size: 12px !important; }

  /* Headlines */
  body.v2 .h2 { font-size: clamp(24px, 7vw, 30px); }
  body.v2 .h3 { font-size: clamp(18px, 5vw, 22px); }

  /* Pricing — readable on 360px */
  body.v2 .pricing-v2__amount { font-size: 36px !important; }
  body.v2 .cta-final-v2__price strong { font-size: 32px !important; }
  body.v2 .cta-final-v2__social-proof-count { font-size: 22px; }

  /* Stats — 2-col on narrow */
  body.v2 .stats-v2__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--v2-s-4) !important;
  }
  body.v2 .stats-v2__grid .stat__num { font-size: 24px !important; }

  /* Cap reel — smaller, no overflow */
  .cap-reel { min-height: 20vh !important; padding: 24px 16px !important; }
  .cap-reel__inner { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Process step numbers */
  body.v2 .process-v2__num { font-size: 24px; }

  /* Benefits cards — tighter */
  body.v2 .benefits-v2__card { padding: var(--v2-s-4); }

  /* Security diagram — fits narrow screen */
  body.v2 .security-v2__diagram pre { font-size: 11px; }
  body.v2 .security-v2__diagram { overflow-x: auto; }

  /* Popup — near full-screen */
  body.v2 .popup-v2__card { margin: 8px; padding: var(--v2-s-4); }
  body.v2 .popup-v2__title { font-size: 20px; }

  /* Header CTA — ultra compact */
  body.v2 .landing-cta { font-size: 11px !important; padding: 8px 10px !important; }

  /* Scroll-top — higher for 2-row sticky bar on narrow screens */
  body.v2 .scroll-top-btn { bottom: 100px; }

  /* Social proof stats — stack on tiny */
  body.v2 .social-proof-v2__stats {
    flex-direction: column;
    align-items: center;
    gap: var(--v2-s-4);
  }
}

/* ============================================================
   Agent tags — subtle "agent" labels on cards and steps
   ============================================================ */
body.v2 .agent-tag {
  display: inline-block;
  font-family: var(--v2-font-mono, monospace);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-teal, #14B8A6);
  opacity: 0.6;
  padding: 0;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}

/* ============================================================
   Mobile back button
   ============================================================ */
body.v2 .mobile-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
}
body.v2 .mobile-back-btn .mobile-back-glyph {
  font-family: var(--v2-font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--v2-accent, #C17817);
}
/* Landing pages (dark bg) — accent color stays, matches logo > glyph */
body.v2 .header-landing .mobile-back-btn .mobile-back-glyph {
  color: var(--v2-accent, #C17817);
}
@media (max-width: 768px) {
  body.v2.has-back-nav .mobile-back-btn {
    display: inline-flex;
  }
}

/* ============================================================
   Bottom sheet — mobile-only internal page preview
   z-index 997: below nav-drawer (999), nav-backdrop (998)
   ============================================================ */
body.v2 .bottom-sheet {
  display: none;
}

@media (max-width: 768px) {
  body.v2 .bottom-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 997;
  }
  body.v2 .bottom-sheet[aria-hidden="false"] {
    display: block;
  }
  body.v2 .bottom-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 12, 0.35);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  body.v2 .bottom-sheet[aria-hidden="false"] .bottom-sheet__backdrop {
    opacity: 1;
  }
  body.v2 .bottom-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90vh;
    background: var(--v2-paper-pure, #fafaf9);
    border-top: 1px solid var(--v2-ink, #0e0e0c);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.v2 .bottom-sheet[aria-hidden="false"] .bottom-sheet__panel {
    transform: translateY(0);
  }
  body.v2 .bottom-sheet__handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
  }
  body.v2 .bottom-sheet__handle-bar {
    width: 32px;
    height: 3px;
    background: var(--v2-mute-2, #a8a69e);
  }
  body.v2 .bottom-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 8px;
    border-bottom: 1px solid var(--v2-rule-soft, #d4d2c8);
    flex-shrink: 0;
  }
  body.v2 .bottom-sheet__title {
    font-family: var(--v2-font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-mute-2, #a8a69e);
  }
  body.v2 .bottom-sheet__close {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--v2-ink, #0e0e0c);
    cursor: pointer;
  }
  body.v2 .bottom-sheet__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--v2-paper, #f5f5f0);
  }
  /* Ensure iframe is truly gone when sheet is closed */
  body.v2 .bottom-sheet:not([aria-hidden="false"]) .bottom-sheet__frame,
  body.v2 .bottom-sheet:not([aria-hidden="false"]) .bottom-sheet__panel {
    display: none;
  }
  body.v2.sheet-open {
    overflow: hidden;
  }
}

/* ============================================================
   MORNING (slide 6) — Before/after timeline
   ============================================================ */
body.v2 .morning-v2 {
  padding-block: var(--v2-s-7);
}
body.v2 .morning-v2__headline {
  margin: var(--v2-s-2) 0 var(--v2-s-6);
}
body.v2 .morning-v2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-s-5);
}
body.v2 .morning-v2__col {
  border: 1px solid var(--v2-ink);
  padding: var(--v2-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .morning-v2__col--relief {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .morning-v2__label {
  font-family: var(--v2-font-mono);
  letter-spacing: 0.08em;
  opacity: 0.7;
}
body.v2 .morning-v2__col--relief .morning-v2__label { color: var(--v2-paper); opacity: 0.7; }
body.v2 .morning-v2__timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s-3);
}
body.v2 .morning-v2__timeline li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--v2-s-3);
  align-items: baseline;
  font-size: var(--v2-fs-body);
  line-height: 1.45;
}
body.v2 .morning-v2__time {
  font-family: var(--v2-font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.55;
}
body.v2 .morning-v2__time--red { color: #c83333; opacity: 1; }
body.v2 .morning-v2__time--ok { color: var(--v2-teal, #14B8A6); opacity: 1; }
body.v2 .morning-v2__act--red { color: #c83333; }
body.v2 .morning-v2__act--ok { color: var(--v2-teal, #14B8A6); font-weight: 500; }
body.v2 .morning-v2__sum {
  margin-top: var(--v2-s-3);
  padding-top: var(--v2-s-3);
  border-top: 1px solid currentColor;
  display: flex;
  justify-content: space-between;
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-body-sm);
  opacity: 0.8;
}
body.v2 .morning-v2__sum-val { font-weight: 500; opacity: 1; }
body.v2 .morning-v2__sum-val--ok { color: var(--v2-teal, #14B8A6); }

@media (max-width: 800px) {
  body.v2 .morning-v2__grid { grid-template-columns: 1fr; }
  body.v2 .morning-v2__col { padding: var(--v2-s-4); }
  body.v2 .morning-v2__timeline li {
    grid-template-columns: 48px 1fr;
    font-size: 14px;
  }
}
body.v2 .morning-v2__twist {
  margin: var(--v2-s-3) 0 0;
  font-size: var(--v2-fs-body-sm);
  font-style: italic;
  line-height: 1.5;
  opacity: 0.85;
  border-left: 2px solid currentColor;
  padding-left: var(--v2-s-3);
}
body.v2 .morning-v2__twist--ok { color: var(--v2-teal, #14B8A6); opacity: 1; }

/* Morning section — pain column with B&W stamping video bg */
body.v2 .morning-v2__col--pain {
  position: relative;
  overflow: hidden;
  background: #0e0e0c;
  color: #f0eee5;
  border-color: #0e0e0c;
}
body.v2 .morning-v2__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
body.v2 .morning-v2__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(14,14,12,0.92) 0%, rgba(14,14,12,0.75) 55%, rgba(14,14,12,0.4) 100%);
}
body.v2 .morning-v2__col--pain > *:not(.morning-v2__video):not(.morning-v2__veil) {
  position: relative;
  z-index: 2;
}
body.v2 .morning-v2__col--pain .morning-v2__time { opacity: 0.7; color: #f0eee5; }
body.v2 .morning-v2__col--pain .morning-v2__time--red { color: #ff6b6b; opacity: 1; }
body.v2 .morning-v2__col--pain .morning-v2__act--red { color: #ff6b6b; }
body.v2 .morning-v2__col--pain .morning-v2__label { color: #f0eee5; opacity: 0.65; }
body.v2 .morning-v2__col--pain .morning-v2__sum { border-top-color: rgba(240,238,229,0.3); }
body.v2 .morning-v2__col--pain .morning-v2__twist { color: #f0eee5; opacity: 0.85; }

/* Morning video credit — Threads link */
body.v2 .morning-v2__credit {
  display: inline-block;
  margin-top: var(--v2-s-3);
  align-self: flex-end;
  font-family: var(--v2-font-mono);
  font-size: 11px;
  color: rgba(240,238,229,0.55);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
body.v2 .morning-v2__credit:hover { color: rgba(240,238,229,0.95); text-decoration: underline; }

/* Floating video CTA (desktop only) */
body.v2 .floating-cta {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 320px;
  z-index: 80;
  background: #0e0e0c;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
}
body.v2 .floating-cta--out { transform: translateY(20px); opacity: 0; pointer-events: none; }
body.v2 .floating-cta__inner {
  display: block;
  position: relative;
  cursor: pointer;
  aspect-ratio: 16/9;
}
body.v2 .floating-cta__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
body.v2 .floating-cta__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,14,12,0.85) 0%, rgba(14,14,12,0.35) 50%, rgba(14,14,12,0.15) 100%);
  z-index: 1;
}
body.v2 .floating-cta__label {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 2;
  color: #f0eee5;
  font-family: var(--v2-font-sans);
}
body.v2 .floating-cta__eyebrow {
  display: block;
  font-family: var(--v2-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.65;
  margin-bottom: 4px;
  text-transform: uppercase;
}
body.v2 .floating-cta__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}
body.v2 .floating-cta__close {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #f0eee5;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
body.v2 .floating-cta__close:hover { background: rgba(0,0,0,0.85); }

@media (min-width: 1025px) {
  body.v2 .floating-cta { display: block; }
}

/* Pricing: M.E.Doc comparison table */
body.v2 .pricing-v2__compare {
  margin: var(--v2-s-4) 0 var(--v2-s-2);
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v2-fs-body-sm);
  font-family: var(--v2-font-mono);
}
body.v2 .pricing-v2__compare th,
body.v2 .pricing-v2__compare td {
  padding: 8px 6px;
  text-align: right;
  border-bottom: 1px solid var(--v2-rule-soft);
}
body.v2 .pricing-v2__compare th:first-child,
body.v2 .pricing-v2__compare td:first-child {
  text-align: left;
  color: var(--v2-ink-soft);
  font-weight: 400;
}
body.v2 .pricing-v2__compare th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--v2-mute-2);
  border-bottom-color: var(--v2-ink);
}
body.v2 .pricing-v2__compare-total {
  font-weight: 500;
}
body.v2 .pricing-v2__compare-total td {
  border-top: 1px solid var(--v2-ink);
  border-bottom: 0;
  padding-top: 10px;
}
body.v2 .pricing-v2__compare-note {
  font-size: 11px;
  color: var(--v2-mute-2);
  line-height: 1.4;
  margin: 0 0 var(--v2-s-3);
}

/* Reading progress bar — fixed top, monochrome */
body.v2 .reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--v2-ink);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* Article layout — single-column default, 2-col with sticky TOC on desktop */
body.v2 .seo-article {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--v2-s-6) var(--v2-s-5);
}
body.v2 .seo-article > section,
body.v2 .seo-article > p,
body.v2 .seo-article > h2,
body.v2 .seo-article > h3 {
  max-width: 72ch;
}

@media (min-width: 1100px) {
  body.v2 .seo-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: var(--v2-s-7);
    align-items: start;
    padding: var(--v2-s-7) var(--v2-s-6);
  }
  body.v2 .seo-article > section,
  body.v2 .seo-article > p,
  body.v2 .seo-article > h2,
  body.v2 .seo-article > h3 { max-width: none; }
  body.v2 .seo-article > .article-breadcrumbs,
  body.v2 .seo-article > h1,
  body.v2 .seo-article > .article-intro {
    grid-column: 1 / -1;
  }
  body.v2 .seo-article .article-toc {
    grid-column: 2;
    grid-row: span 100;
    position: sticky;
    top: 88px;
    margin: 0;
    padding: var(--v2-s-4);
    border: 1px solid var(--v2-ink);
    background: transparent;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  body.v2 .seo-article > section {
    grid-column: 1;
  }
}

/* TOC eyebrow + items style — mono, no left border accent */
body.v2 .seo-article .article-toc {
  position: relative;
}
body.v2 .seo-article .article-toc .toc-title {
  font-family: var(--v2-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-mute-2);
  margin: 0 0 var(--v2-s-3);
}
body.v2 .seo-article .article-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: toc;
}
body.v2 .seo-article .article-toc li {
  counter-increment: toc;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}
body.v2 .seo-article .article-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--v2-font-mono);
  color: var(--v2-mute-2);
  flex-shrink: 0;
}
body.v2 .seo-article .article-toc a {
  color: var(--v2-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
body.v2 .seo-article .article-toc a:hover { color: var(--v2-ink); border-bottom-color: var(--v2-ink); }
body.v2 .seo-article .article-toc li.is-active a {
  color: var(--v2-ink);
  font-weight: 500;
}
body.v2 .seo-article .article-toc li.is-active::before {
  color: var(--v2-ink);
}

/* Heading anchor — appears on hover, monospace # */
body.v2 .seo-article h2,
body.v2 .seo-article h3 {
  position: relative;
  scroll-margin-top: 88px;
}
body.v2 .seo-article h2:hover .heading-anchor,
body.v2 .seo-article h3:hover .heading-anchor {
  opacity: 0.6;
}
body.v2 .seo-article .heading-anchor {
  position: absolute;
  left: -1.2em;
  top: 0;
  font-family: var(--v2-font-mono);
  color: var(--v2-mute-2);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
body.v2 .seo-article .heading-anchor:hover { opacity: 1 !important; color: var(--v2-ink); }

/* Scroll-spy active state for seo-content TOC */
body.v2 .seo-content__toc li.is-active a {
  color: var(--v2-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--v2-ink);
}
body.v2 .seo-content__toc li.is-active::before { color: var(--v2-ink); }

/* Lead popup: "watch video" secondary link */
body.v2 .popup-v2__watch-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--v2-s-3) auto 0;
  padding: 8px 14px;
  border: 1px solid var(--v2-rule-soft);
  background: transparent;
  color: var(--v2-ink-soft);
  font-family: var(--v2-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
body.v2 .popup-v2__watch-video:hover {
  color: var(--v2-ink);
  border-color: var(--v2-ink);
}

/* Lead popup: inline error + success state + disabled submit */
body.v2 .popup-v2__error {
  background: rgba(220, 53, 53, 0.08);
  border: 1px solid #dc3535;
  color: #b1281c;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0;
}
body.v2 .popup-v2__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
body.v2 .popup-v2__success[hidden],
body.v2 .popup-v2__error[hidden] {
  display: none !important;
}
body.v2 .popup-v2__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--v2-s-5) var(--v2-s-4);
  color: var(--v2-ink);
}
body.v2 .popup-v2__success svg { color: #14B8A6; margin-bottom: var(--v2-s-3); }
body.v2 .popup-v2__success h3 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 var(--v2-s-2);
}
body.v2 .popup-v2__success p {
  margin: 0 0 var(--v2-s-3);
  color: var(--v2-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Process steps clickable on desktop too (accordion expand on click) */
body.v2 .process-v2__step {
  cursor: pointer;
  transition: opacity 0.2s;
}
body.v2 .process-v2__step:active { transform: scale(0.99); }
body.v2 .process-v2__step:hover .process-v2__step-title { opacity: 0.85; }

/* Social-proof clients — explicitly static, no clickability illusion */
body.v2 .social-proof-v2__clients,
body.v2 .social-proof-v2__clients span {
  cursor: default;
  user-select: text;
}
body.v2 .social-proof-v2__clients span:not(.social-proof-v2__sep):hover {
  /* no hover effect — these are facts, not links */
  opacity: 1;
}

/* Universal :active tactile feedback for buttons and CTAs */
body.v2 .btn:active,
body.v2 label.btn:active,
body.v2 [role="button"]:active {
  transform: scale(0.97);
  transition: transform 0.06s ease-out;
}

/* Headings with id — copy URL hint on hover (desktop) */
@media (hover: hover) {
  body.v2 h2[id]:hover,
  body.v2 h3[id]:hover {
    cursor: pointer;
  }
}

/* ============================================================
   INTEGRATIONS (slide 7b) — Ramp-style floating tiles grid
   ============================================================ */
body.v2 .integrations-v2 {
  padding-block: var(--v2-s-7);
}
body.v2 .integrations-v2__headline {
  margin: var(--v2-s-2) 0 var(--v2-s-3);
  max-width: 22ch;
}
body.v2 .integrations-v2__lead {
  font-size: var(--v2-fs-body);
  color: var(--v2-ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--v2-s-6);
  max-width: 60ch;
}
body.v2 .integrations-v2__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v2-s-3);
  margin-bottom: var(--v2-s-5);
}
body.v2 .integrations-v2__tile {
  border: 1px solid var(--v2-ink);
  background: var(--v2-paper);
  padding: var(--v2-s-4) var(--v2-s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transition: background 0.15s, color 0.15s, transform 0.2s;
}
body.v2 .integrations-v2__tile:hover {
  background: var(--v2-ink);
  color: var(--v2-paper);
  transform: translateY(-2px);
}
body.v2 .integrations-v2__tile--primary {
  background: var(--v2-ink);
  color: var(--v2-paper);
}
body.v2 .integrations-v2__tile--primary:hover {
  background: transparent;
  color: var(--v2-ink);
}
body.v2 .integrations-v2__tile--more {
  background: transparent;
  color: var(--v2-mute-2);
  border-style: dashed;
}
body.v2 .integrations-v2__tile--more:hover {
  background: transparent;
  color: var(--v2-ink);
  border-color: var(--v2-ink);
  border-style: solid;
  transform: none;
}
body.v2 .integrations-v2__name {
  font-family: var(--v2-font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
body.v2 .integrations-v2__type {
  font-family: var(--v2-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}
body.v2 .integrations-v2__note {
  font-size: var(--v2-fs-body-sm);
  color: var(--v2-mute-2);
  margin: 0;
  font-family: var(--v2-font-mono);
  letter-spacing: 0.02em;
}

@media (min-width: 900px) {
  body.v2 .integrations-v2__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--v2-s-4);
  }
  body.v2 .integrations-v2__tile {
    padding: var(--v2-s-5) var(--v2-s-4);
  }
}

/* ============================================================
   AGENT BUBBLES + MINI-DIALOG (run-done assistant on landing)
   ============================================================ */
/* Agent bubble — paper card on paper page (matches v2 micrographics aesthetic) */
body.v2 .rd-agent-bubble {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 90;
  max-width: 340px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 40px 14px 14px;
  background: var(--v2-paper-pure, #ffffff);
  color: var(--v2-ink, #0e0e0c);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  border-radius: 10px;
  font-family: var(--v2-font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(14,14,12,0.10), 0 2px 6px rgba(14,14,12,0.06);
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s, box-shadow 0.2s;
  text-align: left;
}
body.v2 .rd-agent-bubble:hover { box-shadow: 0 14px 38px rgba(14,14,12,0.14), 0 3px 8px rgba(14,14,12,0.07); }
body.v2 .rd-agent-bubble--in { transform: translateY(0) scale(1); opacity: 1; }
/* Small brand mark — solid teal disc with white "R" */
body.v2 .rd-agent-bubble__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--v2-teal, #14B8A6);
  color: #ffffff;
  font-family: var(--v2-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
body.v2 .rd-agent-bubble__text { flex: 1; }
body.v2 .rd-agent-bubble__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: var(--v2-mute-2, #7a786e);
  font-family: var(--v2-font-sans);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  border: 0;
}
body.v2 .rd-agent-bubble__close:hover { background: rgba(14,14,12,0.06); color: var(--v2-ink, #0e0e0c); }

/* Mini dialog — paper card with run-done micrographics */
body.v2 .rd-agent-dialog {
  position: fixed;
  right: 16px; bottom: 24px;
  z-index: 95;
  width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  background: var(--v2-paper-pure, #ffffff);
  color: var(--v2-ink, #0e0e0c);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(14,14,12,0.16), 0 4px 12px rgba(14,14,12,0.08);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
  overflow: hidden;
}
body.v2 .rd-agent-dialog--in { transform: translateY(0) scale(1); opacity: 1; }
body.v2 .rd-agent-dialog__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--v2-rule-soft, #d4d2c8);
  background: var(--v2-paper, #f5f4ee);
}
body.v2 .rd-agent-dialog__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--v2-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--v2-ink, #0e0e0c);
  text-transform: none;
}
/* Brand status dot (live indicator) instead of brackets */
body.v2 .rd-agent-dialog__title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--v2-teal, #14B8A6);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
  flex-shrink: 0;
}
body.v2 .rd-agent-dialog__close {
  background: none; border: 0;
  color: var(--v2-mute-2, #7a786e);
  font-family: var(--v2-font-sans);
  font-size: 20px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
body.v2 .rd-agent-dialog__close:hover { color: var(--v2-ink, #0e0e0c); background: rgba(14,14,12,0.06); }
body.v2 .rd-agent-dialog__close:hover { color: #fff; }
body.v2 .rd-agent-dialog__messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}
body.v2 .rd-agent-msg {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: var(--v2-font-sans);
}
body.v2 .rd-agent-msg--assistant {
  align-self: flex-start;
  background: var(--v2-paper, #f5f4ee);
  color: var(--v2-ink, #0e0e0c);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
}
body.v2 .rd-agent-msg--user {
  align-self: flex-end;
  background: var(--v2-teal, #14B8A6);
  color: #ffffff;
}
body.v2 .rd-agent-msg--typing { opacity: 0.5; font-style: italic; }
body.v2 .rd-agent-dialog__form {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--v2-rule-soft, #d4d2c8);
  background: var(--v2-paper-pure, #ffffff);
}
body.v2 .rd-agent-dialog__form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--v2-ink, #0e0e0c);
  font-family: var(--v2-font-sans); font-size: 14px;
  outline: none;
}
body.v2 .rd-agent-dialog__form input::placeholder { color: var(--v2-mute-2, #7a786e); }
body.v2 .rd-agent-dialog__form button.rd-agent-send {
  background: var(--v2-ink, #0e0e0c);
  color: #ffffff;
  border: 0; border-radius: 999px;
  width: 36px; height: 36px;
  margin: 6px 10px 6px 4px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
  transition: transform .12s ease, background .15s ease;
  box-shadow: 0 2px 6px rgba(14,14,12,0.18);
}
body.v2 .rd-agent-dialog__form button.rd-agent-send:hover { background: var(--v2-teal, #14B8A6); }
body.v2 .rd-agent-dialog__form button.rd-agent-send:active { transform: scale(0.92); }
body.v2 .rd-agent-dialog__form button.rd-agent-send svg { display: block; }
body.v2 .rd-agent-dialog__lead {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(20,184,166,0.05);
}
body.v2 .rd-agent-dialog__lead-prompt {
  margin: 0;
  font-size: 13px;
  color: #f0eee5;
}
body.v2 .rd-agent-dialog__lead input {
  padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f0eee5;
  font-family: inherit; font-size: 14px;
  border-radius: 6px;
}
body.v2 .rd-agent-dialog__lead button {
  background: var(--v2-teal, #14B8A6);
  color: #0e0e0c;
  border: 0;
}
body.v2 .rd-agent-dialog__lead button:disabled { opacity: 0.55; cursor: wait; }
body.v2 .rd-agent-dialog__lead-status {
  margin: 4px 0 0; font-size: 12px;
  color: rgba(240,238,229,0.85);
}

/* Agent dialog: quick-reply chips below first assistant message */
body.v2 .rd-agent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 6px;
}
body.v2 .rd-agent-chip {
  background: var(--v2-paper-pure, #ffffff);
  color: var(--v2-ink, #0e0e0c);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  font-family: var(--v2-font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.2;
}
body.v2 .rd-agent-chip:hover {
  background: var(--v2-ink, #0e0e0c);
  color: var(--v2-paper-pure, #ffffff);
  border-color: var(--v2-ink, #0e0e0c);
}

/* Inline widgets emitted by the agent ([[ACTION:demo]], [[FORM:contact]]) */
body.v2 .rd-agent-action-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: var(--v2-ink, #0e0e0c);
  color: var(--v2-paper-pure, #ffffff);
  border: 0; border-radius: 999px;
  font-family: var(--v2-font-sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  box-shadow: 0 2px 6px rgba(14,14,12,0.16);
}
body.v2 .rd-agent-action-btn:hover { background: var(--v2-teal, #14B8A6); }
body.v2 .rd-agent-action-btn:active { transform: scale(0.97); }
body.v2 .rd-agent-action-btn::after { content: '→'; font-weight: 500; opacity: 0.85; }

body.v2 .rd-agent-form-inline {
  align-self: stretch;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--v2-paper, #f5f4ee);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  border-radius: 10px;
  margin-top: 2px;
}
body.v2 .rd-agent-form-inline__input {
  padding: 10px 12px;
  background: var(--v2-paper-pure, #ffffff);
  color: var(--v2-ink, #0e0e0c);
  border: 1px solid var(--v2-rule-soft, #d4d2c8);
  border-radius: 8px;
  font-family: var(--v2-font-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s ease;
}
body.v2 .rd-agent-form-inline__input:focus { border-color: var(--v2-teal, #14B8A6); }
body.v2 .rd-agent-form-inline__input::placeholder { color: var(--v2-mute-2, #7a786e); }
body.v2 .rd-agent-form-inline__submit {
  align-self: flex-end;
  padding: 9px 16px;
  background: var(--v2-ink, #0e0e0c);
  color: var(--v2-paper-pure, #ffffff);
  border: 0; border-radius: 999px;
  font-family: var(--v2-font-sans);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
body.v2 .rd-agent-form-inline__submit:hover { background: var(--v2-teal, #14B8A6); }
body.v2 .rd-agent-form-inline__submit:disabled { opacity: 0.6; cursor: wait; }
body.v2 .rd-agent-form-inline__status {
  font-family: var(--v2-font-sans);
  font-size: 12.5px;
  color: var(--v2-ink-soft, #4a4942);
}
body.v2 .rd-agent-form-inline__status.is-ok { color: var(--v2-teal, #14B8A6); font-weight: 600; }
body.v2 .rd-agent-form-inline__status.is-error { color: #c1374a; }

/* Awwwards-level typing indicator — 3 bouncing dots, cascading delay */
body.v2 .rd-agent-typing {
  display: inline-flex !important;
  gap: 4px;
  align-items: center;
  padding: 14px 14px !important;
  min-width: 48px;
}
body.v2 .rd-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(240,238,229,0.75);
  display: inline-block;
  animation: rdTypingPulse 1.2s ease-in-out infinite;
}
body.v2 .rd-typing-dot:nth-child(2) { animation-delay: 0.18s; }
body.v2 .rd-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes rdTypingPulse {
  0%, 70%, 100% { transform: translateY(0) scale(0.85); opacity: 0.5; }
  35%           { transform: translateY(-3px) scale(1); opacity: 1; }
}

/* Mobile: agent dialog -> Dynamic-Island-style top sheet, not bottom block.
   User can still scroll content below. */
@media (max-width: 800px) {
  body.v2 .rd-agent-bubble {
    right: 10px;
    left: 10px;
    bottom: auto;
    top: max(env(safe-area-inset-top, 0px), 10px);
    max-width: none;
  }
  body.v2 .rd-agent-bubble--in {
    transform: translateY(0) scale(1);
  }
  body.v2 .rd-agent-dialog {
    right: 8px;
    left: 8px;
    bottom: auto;
    top: max(env(safe-area-inset-top, 0px), 8px);
    width: auto;
    max-height: min(70vh, 560px);
    transform: translateY(-24px) scale(0.96);
    border-radius: 16px;
  }
  body.v2 .rd-agent-dialog--in {
    transform: translateY(0) scale(1);
  }
  /* On mobile, dialog header gets a slight grab-handle hint */
  body.v2 .rd-agent-dialog__header::before {
    content: '';
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
  }
  body.v2 .rd-agent-dialog__header {
    position: relative;
    padding-top: 18px;
  }
}

/* ============================================================
   Mobile redesign — video-proof hero + persistent action bar.
   Lead-gen warm-up: hero carries the demo VIDEO (proof) instead of
   CTA buttons; all actions live in an always-visible bottom bar
   (call / callback / Telegram). Tablet+phone (≤1024px).
   ============================================================ */
body.v2 .hero-video-proof { display: none; }
body.v2 .mobile-action-bar { display: none; }

@media (max-width: 1024px) {
  /* Hero: drop the two CTA buttons — actions live in the bottom bar */
  body.v2 .hero-v2__cta { display: none !important; }
  /* Video proof replaces the abstract SVG flow on mobile */
  body.v2 .hero-anim-svg { display: none !important; }
  body.v2 .hero-video-proof {
    display: block; position: relative; order: 3;
    width: 100%; max-width: 480px; margin: 0;
    border: 1px solid var(--v2-rule-soft); background: #000;
    overflow: hidden; cursor: pointer;
  }
  body.v2 .hero-video-proof__vid { display: block; width: 100%; height: auto; }
  body.v2 .hero-video-proof__play {
    position: absolute; left: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; background: rgba(14,14,12,0.82); color: #fff;
    font-family: var(--v2-font-mono); font-size: 12px; letter-spacing: .04em;
  }
  body.v2 .hero-video-proof__play svg { flex-shrink: 0; }

  /* Persistent bottom action bar */
  body.v2 .mobile-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1px;
    background: var(--v2-rule-soft); border-top: 1px solid var(--v2-ink);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.v2 .mab-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 4px; min-height: 56px; line-height: 1.1; text-align: center;
    background: var(--v2-paper); color: var(--v2-ink); text-decoration: none;
    font-family: var(--v2-font-mono); font-size: 11px; letter-spacing: .02em;
    border: 0; cursor: pointer;
  }
  body.v2 .mab-item--primary { background: var(--v2-ink); color: var(--v2-paper); font-weight: 600; }
  body.v2 .mab-item svg { display: block; }
  /* keep page content clear of the fixed bar; hide any leftover sticky CTA */
  body.v2 { padding-bottom: 64px; }
  body.v2 .mobile-sticky-cta { display: none !important; }
}