/* ═══════════════════════════════════════════════════════════
   Knovit Landing · Version 4 styles
   ═══════════════════════════════════════════════════════════ */

/* ─── BIGGER PRIMARY BUTTON ─────────────────────────────── */
.kn-btn--xl {
  padding: 18px 30px 18px 32px;
  border-radius: 16px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.kn-nav4__cta {
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14.5px;
}

/* ─── WORDMARK V4 — dot acts as a period ────────────────── */
.kn-wordmark4 {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-wordmark);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: var(--wm-size);
  line-height: 1;
  color: inherit;
  text-decoration: none;
}
.kn-wordmark4 > span:first-child {
  margin-right: 1px;
}
.kn-wordmark4__dot {
  display: inline-block;
  width: calc(var(--wm-size) * 0.13);
  height: calc(var(--wm-size) * 0.13);
  border-radius: 50%;
  background: var(--knovit-pink);
  /* Sit on the baseline, like a typographic full-stop */
  transform: translateY(0);
  margin-left: 1px;
  flex-shrink: 0;
}

/* ─── TOP NAV V4 ───────────────────────────────────────── */
.kn-nav4 {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.kn-nav4.is-scrolled {
  background: rgba(250,248,242,0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(15,18,38,0.06);
}
.kn-nav4__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kn-nav4__brand {
  text-decoration: none;
  color: var(--knovit-purple);
}
.kn-nav4__thread {
  position: absolute;
  bottom: 0; left: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--knovit-coral), var(--knovit-pink), #8079ED);
  transition: width 0.1s linear;
}

/* ─── HERO V4 ──────────────────────────────────────────── */
.kn-hero4 {
  position: relative;
  background: #FAF8F2;
  padding: 160px 0 140px;
  overflow: hidden;
  min-height: 100vh;
}
.kn-hero4__glow {
  position: absolute;
  right: -15%;
  top: 0;
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  background: radial-gradient(circle,
    rgba(245,141,208,0.20) 0%,
    rgba(253,75,49,0.12) 22%,
    rgba(127,119,221,0.06) 50%,
    transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.kn-hero4__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.kn-hero4__copy { max-width: 620px; }
.kn-hero4__eyebrow { margin-bottom: 28px; }
.kn-hero4__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin: 0 0 32px;
  text-wrap: balance;
}
.kn-hero4__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple);
}
.kn-hero4__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 36px;
  max-width: 540px;
  text-wrap: pretty;
}
.kn-hero4__cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.kn-hero4__secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px var(--font-text);
  color: var(--ink-700);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.kn-hero4__secondary:hover {
  color: var(--knovit-purple);
  border-color: var(--knovit-purple);
}
.kn-hero4__secondary-arrow {
  transition: transform .2s var(--ease-out);
}
.kn-hero4__secondary:hover .kn-hero4__secondary-arrow {
  transform: translateY(2px);
}
.kn-hero4__scarcity {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-600);
  padding: 12px 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--ink-200);
  border-radius: 999px;
}
.kn-hero4__scarcity strong {
  color: var(--ink-900);
  font-weight: 600;
}
.kn-hero4__phone-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kn-hero4__phone {
  will-change: transform;
  /* No rotation — phone is straight, per user */
}

@media (max-width: 1000px) {
  .kn-hero4 { padding: 116px 0 80px; min-height: 0; }
  .kn-hero4__inner { grid-template-columns: 1fr; gap: 56px; }
  .kn-hero4__copy { max-width: none; }
  .kn-hero4__scarcity { font-size: 13px; }
}
/* Hero phone: visible immediately on mobile (≤1000px).
   Below 1000px the hero stacks single-column and the phone falls below the
   fold, so its scroll-reveal (Reveal / IntersectionObserver, opacity:0 until
   in view) never fires on load — leaving blank space under the CTA that reads
   as "page ends here". Force the reveal wrapper to its final visible state so
   the phone shows from first paint. Parallax on the inner .kn-hero4__phone is
   untouched; !important beats the component's inline opacity/transform. */
@media (max-width: 1000px) {
  .kn-hero4__phone-wrap > div {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 540px) {
  .kn-hero4__headline { font-size: clamp(40px, 11vw, 56px); letter-spacing: -0.03em; }
  .kn-hero4__lede { font-size: 17px; }
}

/* ─── VOICE COMMANDER V4 — same as V3, halo removed ────── */
.kn-voice4 {
  position: relative;
  background: #FAF8F2;
  padding: 140px 0 120px;
  overflow: hidden;
}
.kn-voice4__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.kn-voice4__eyebrow { margin-bottom: 26px; }
.kn-voice4__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin: 0 0 48px;
  text-wrap: balance;
}
.kn-voice4__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple);
}

.kn-voice4__quote {
  position: relative;
  max-width: 880px;
  margin: 0 auto 80px;
  padding: 24px 32px 0;
}
.kn-voice4__quote-mark {
  position: absolute;
  left: 50%; top: -20px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--knovit-pink);
  opacity: 0.55;
}
.kn-voice4__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink-800);
  margin: 0 0 18px;
  text-wrap: balance;
}
.kn-voice4__hl {
  background: transparent;
  font-style: italic;
  font-weight: 500;
  border-bottom: 2px solid;
  padding: 0 2px;
}
.kn-voice4__hl--person  { color: var(--knovit-purple); border-color: var(--knovit-purple); }
.kn-voice4__hl--project { color: var(--knovit-coral);  border-color: var(--knovit-coral);  }
.kn-voice4__hl--task    { color: #0E6E7A;              border-color: #0E6E7A;              }
.kn-voice4__quote footer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px var(--font-text);
  color: var(--ink-500);
}
.kn-voice4__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #FBD4C4, #F4B79E);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 9px var(--font-text);
  color: rgba(0,0,0,0.55);
}

.kn-voice4__stage-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  margin-bottom: 56px;
}
.kn-voice4__actions,
.kn-voice4__confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kn-voice4__actions-label,
.kn-voice4__confirm-label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 10.5px var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--knovit-coral);
  margin-bottom: 8px;
}
.kn-voice4__confirm-label { color: var(--knovit-purple); }
.kn-voice4__actions-tick,
.kn-voice4__confirm-tick {
  width: 22px; height: 1px; background: currentColor;
}
/* Phone stage — NO halo, phone bleeds directly into the cream */
.kn-voice4__stage {
  position: relative;
  width: 420px;
  height: 720px;
  flex-shrink: 0;
  will-change: transform;
  /* No ::before / glow */
}
/* Crop the iframe to the phone's exact silhouette so the rectangular
   iframe background never reads against the cream section bg.
   The phone inside is rendered at 326.6×691.2 with a ~46.4px corner
   radius (310×656 content × 1.05366 inner scale). Insets center the
   silhouette inside the stage; a drop-shadow replaces the box-shadow
   that gets clipped along with the iframe rectangle. */
.kn-voice4__stage iframe {
  clip-path: inset(14.4px 46.68px round 46.36px);
  -webkit-clip-path: inset(14.4px 46.68px round 46.36px);
  filter: drop-shadow(0 28px 48px rgba(15, 18, 38, 0.18))
          drop-shadow(0 6px 14px rgba(91, 79, 224, 0.10));
}

/* Action cards (reuse V3 selectors via the global ActionCard) */
.kn-voice4__actions :global { /* hint only */ }

/* Confirm card (mirror V3 but namespaced) */
.kn-voice4__confirm-card {
  background: linear-gradient(180deg, #fff 0%, #FAFAF8 100%);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kn-voice4__confirm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font: 500 13px var(--font-text);
  color: var(--ink-900);
}
.kn-voice4__confirm-ago {
  font: 500 11px var(--font-text);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.kn-voice4__confirm-rule { height: 1px; background: var(--ink-200); }
.kn-voice4__confirm-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.kn-voice4__confirm-card li {
  display: flex; align-items: center; gap: 10px;
  font: 500 13.5px var(--font-text);
  color: var(--ink-800);
  letter-spacing: -0.005em;
}
.kn-voice4__confirm-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--success-500);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.kn-voice4__confirm-check::after {
  content: ''; width: 8px; height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
  margin-top: -2px;
}
.kn-voice4__confirm-btn {
  background: var(--knovit-purple);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 16px;
  font: 500 13.5px var(--font-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.kn-voice4__confirm-btn:hover {
  transform: translateY(-1px);
  background: #2A0058;
}

.kn-voice4__footnote {
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
.kn-voice4__footnote p {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: 15px; color: var(--ink-500);
  margin: 0;
}
.kn-voice4__footnote-rule {
  height: 1px; flex: 1 1 60px; max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--ink-300), transparent);
}

@media (max-width: 1100px) {
  .kn-voice4__stage-grid {
    grid-template-columns: 1fr; gap: 36px; text-align: center;
  }
  .kn-voice4__actions, .kn-voice4__confirm {
    max-width: 480px; margin: 0 auto;
  }
  .kn-voice4__stage { width: 380px; height: 640px; margin: 0 auto; }
  .kn-voice4__stage iframe {
    clip-path: inset(12.8px 44.85px round 41.21px);
    -webkit-clip-path: inset(12.8px 44.85px round 41.21px);
  }
}
@media (max-width: 540px) {
  .kn-voice4__stage { width: min(320px, 100%); height: 560px; }
  .kn-voice4__stage iframe {
    clip-path: inset(11.2px 33px round 36.06px);
    -webkit-clip-path: inset(11.2px 33px round 36.06px);
  }
  .kn-voice4__quote p { font-size: 22px; }
  .kn-voice4__quote { padding: 18px 8px 0; }
  .kn-voice4__quote-mark { font-size: 64px; top: -8px; }
}

/* ─── BRIEFING V4 — V2 text layout + V3 parallax, no bar ── */
.kn-briefing4 {
  position: relative;
  background: #FAF8F2;
  padding: 160px 0 180px;
  overflow: hidden;
}
.kn-briefing4__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.kn-briefing4__copy { max-width: 560px; }
.kn-briefing4__chrono {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 600 11.5px var(--font-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--knovit-coral);
  margin-bottom: 24px;
}
.kn-briefing4__chrono-line {
  width: 28px; height: 1px;
  background: var(--knovit-coral);
}
.kn-briefing4__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-900);
  margin: 0 0 48px;
  text-wrap: balance;
}
.kn-briefing4__headline-em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple);
}
.kn-briefing4__qs {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kn-briefing4__qs li {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.3;
  color: var(--ink-600);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.kn-briefing4__q-dash {
  color: var(--knovit-pink);
  font-style: normal;
  flex-shrink: 0;
}
.kn-briefing4__closing {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--ink-700);
  margin: 0;
  letter-spacing: -0.015em;
}
.kn-briefing4__closing strong {
  color: var(--ink-900);
  font-weight: 500;
  background: linear-gradient(120deg, transparent 0%, transparent 4%, rgba(245,141,208,0.22) 4%, rgba(245,141,208,0.22) 96%, transparent 96%);
  padding: 0 6px;
}

.kn-briefing4__phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 720px;
}
.kn-briefing4__halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 540px; height: 540px;
  margin-left: -270px; margin-top: -270px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(60,0,124,0.15) 0%,
    rgba(253,75,49,0.10) 28%,
    rgba(245,141,208,0.06) 55%,
    transparent 75%);
  filter: blur(30px);
  pointer-events: none;
  will-change: transform, opacity;
}
.kn-briefing4__phone {
  position: relative;
  z-index: 2;
  will-change: transform;
}

@media (max-width: 1000px) {
  .kn-briefing4 { padding: 100px 0 100px; }
  .kn-briefing4__grid { grid-template-columns: 1fr; gap: 56px; }
  .kn-briefing4__phone-wrap { min-height: 640px; }
}

/* ─── ACT V4 — compact tabbed ──────────────────────────── */
.kn-act4 {
  background: #FAF8F2;
  padding: 140px 0 140px;
  position: relative;
  overflow: hidden;
}
.kn-act4__inner {
  position: relative;
}
.kn-act4__head {
  max-width: 800px;
  margin: 0 auto 56px;
  text-align: center;
}
.kn-act4__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 24px 0 22px;
  text-wrap: balance;
}
.kn-act4__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple);
}
.kn-act4__lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0 auto;
  max-width: 580px;
  text-wrap: pretty;
}
.kn-act4__lede-em {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.2em;
  color: var(--knovit-coral);
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, transparent 0%, transparent 4%, rgba(253,75,49,0.10) 4%, rgba(253,75,49,0.10) 96%, transparent 96%);
  padding: 0 6px;
}

/* Tab switcher */
.kn-act4__tabs {
  display: flex;
  gap: 6px;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 6px;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
}
.kn-act4__tab {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 14px 18px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  transition: background .25s var(--ease-out);
  text-align: left;
  font-family: var(--font-text);
}
.kn-act4__tab.is-active {
  background: var(--knovit-purple);
}
.kn-act4__tab-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
  flex-shrink: 0;
}
.kn-act4__tab.is-active .kn-act4__tab-num { color: rgba(255,255,255,0.7); }
.kn-act4__tab-label {
  font: 500 14.5px var(--font-text);
  color: var(--ink-800);
  letter-spacing: -0.005em;
}
.kn-act4__tab.is-active .kn-act4__tab-label { color: #fff; }
.kn-act4__tab-label span {
  color: var(--ink-400);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
}
.kn-act4__tab.is-active .kn-act4__tab-label span { color: rgba(255,255,255,0.55); }

/* Panel */
.kn-act4__panel {
  max-width: 1080px;
  margin: 0 auto 56px;
  animation: kAct4FadeIn 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes kAct4FadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Method panel */
.kn-act4__method {
  position: relative;
  padding: 32px 0;
}
.kn-act4__flow-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 6px;
  pointer-events: none;
  z-index: 0;
}
.kn-act4__method-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.kn-act4__card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.kn-act4__card:hover {
  transform: translateY(-2px);
  border-color: var(--knovit-purple);
  box-shadow: 0 18px 36px -22px rgba(60,0,124,0.18);
}
.kn-act4__card--final {
  background: linear-gradient(180deg, #FFFBF6 0%, #FCE4DD 100%);
  border-color: rgba(253,75,49,0.20);
}
.kn-act4__card--final:hover { border-color: var(--knovit-coral); }
.kn-act4__letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 80px;
  line-height: 0.82;
  color: var(--knovit-purple);
  letter-spacing: -0.05em;
  margin-bottom: 16px;
}
.kn-act4__card--final .kn-act4__letter {
  background: linear-gradient(135deg, #FD4B31 0%, #F588C2 60%, #3C007C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kn-act4__card--method h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.kn-act4__card--method h3 em {
  font-style: italic;
  color: var(--knovit-purple);
}
.kn-act4__card--final h3 em { color: var(--knovit-coral); }
.kn-act4__card--method p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
}

/* Architecture panel */
.kn-act4__arch {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.kn-act4__card--arch {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 26px;
}
.kn-act4__card--arch::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
}
.kn-act4__card--archive::before { background: #8079ED; }
.kn-act4__card--current::before { background: #FD4B31; }
.kn-act4__card--tribe::before   { background: #F588C2; }
.kn-act4__card-tag {
  font: 600 10px var(--font-text);
  letter-spacing: 0.14em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.kn-act4__card-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--knovit-purple);
  letter-spacing: -0.03em;
  margin: 4px 0 14px;
}
.kn-act4__card--arch p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

.kn-act4__payoff {
  max-width: 800px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.kn-act4__payoff p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  color: var(--ink-700);
  margin: 0;
  letter-spacing: -0.015em;
}
.kn-act4__payoff strong { color: var(--ink-900); font-weight: 500; }
.kn-act4__payoff em { font-style: italic; color: var(--knovit-purple); }
.kn-act4__payoff-line {
  height: 1px;
  flex: 1 1 60px;
  max-width: 100px;
  background: linear-gradient(90deg, transparent, var(--ink-300), transparent);
}

@media (max-width: 1000px) {
  .kn-act4 { padding: 100px 0; }
  .kn-act4__tabs { flex-direction: row; }
  .kn-act4__tab-label span { display: none; }
  .kn-act4__method-cards,
  .kn-act4__arch { grid-template-columns: 1fr; gap: 14px; }
  .kn-act4__flow-line { display: none; }
  .kn-act4__letter { font-size: 64px; }
  .kn-act4__payoff { flex-direction: column; gap: 16px; }
  .kn-act4__payoff-line { display: none; }
}

/* ─── USE CASES V4 — fan-deck ──────────────────────────── */
.kn-cases4 {
  background: #FAF8F2;
  padding: 140px 0 140px;
  position: relative;
  overflow: hidden;
}
.kn-cases4__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.kn-cases4__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  margin: 24px 0 22px;
  text-wrap: balance;
}
.kn-cases4__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-purple);
}
.kn-cases4__lede {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
}

/* The deck */
.kn-cases4__deck {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  height: 560px;
  user-select: none;
  touch-action: pan-y;
}
.kn-cases4__card {
  --accent: var(--knovit-purple);
  --bg: #F4F3FD;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(640px, 90%);
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  overflow: hidden;
  box-shadow:
    0 30px 60px -32px rgba(15,18,38,0.15),
    0 10px 24px -12px rgba(15,18,38,0.08);
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1),
              opacity 0.4s ease,
              box-shadow 0.4s ease;
  cursor: pointer;
}
.kn-cases4__card.is-active {
  cursor: default;
  box-shadow:
    0 40px 80px -28px rgba(15,18,38,0.20),
    0 16px 32px -10px rgba(15,18,38,0.12);
}
.kn-cases4__card-photo {
  position: relative;
  aspect-ratio: auto;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}
.kn-cases4__card-photo image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.kn-cases4__card-photo-default {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.kn-cases4__card-body {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.kn-cases4__card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 10.5px var(--font-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kn-cases4__card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.kn-cases4__card-tick {
  width: 22px; height: 1px;
  background: currentColor;
}
.kn-cases4__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0;
  text-wrap: balance;
}
.kn-cases4__card-body-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  text-wrap: pretty;
}

/* Navigation */
.kn-cases4__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.kn-cases4__navbtn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}
.kn-cases4__navbtn:hover:not(:disabled) {
  border-color: var(--knovit-purple);
  color: var(--knovit-purple);
  transform: translateY(-1px);
}
.kn-cases4__navbtn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.kn-cases4__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kn-cases4__dot {
  --dot-accent: var(--knovit-purple);
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-family: var(--font-text);
}
.kn-cases4__dot-num {
  font: 600 11px var(--font-text);
  letter-spacing: 0.02em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.kn-cases4__dot:hover { background: rgba(60,0,124,0.05); }
.kn-cases4__dot.is-active {
  background: color-mix(in oklab, var(--dot-accent) 10%, transparent);
}
.kn-cases4__dot.is-active .kn-cases4__dot-num {
  color: var(--dot-accent);
}

@media (max-width: 1000px) {
  .kn-cases4 { padding: 100px 0; }
  .kn-cases4__deck { height: 600px; }
  .kn-cases4__card {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    width: min(420px, 92%);
  }
  .kn-cases4__card-body { padding: 24px; }
}
@media (max-width: 540px) {
  .kn-cases4__deck { height: 560px; }
  .kn-cases4__card {
    grid-template-rows: 180px 1fr;
    width: 88%;
  }
}

/* ─── CTA FINAL V4 ────────────────────────────────────── */
.kn-cta4 {
  position: relative;
  padding: 160px 0 140px;
  background: #0c0814;
  color: #fff;
  overflow: hidden;
}
.kn-cta4__atmosphere {
  position: absolute;
  inset: -10% -10% 0 -10%;
  background: var(--knovit-atmosphere, radial-gradient(ellipse 70% 60% at 50% 100%, rgba(253,75,49,0.40) 0%, rgba(245,141,208,0.20) 35%, rgba(60,0,124,0.10) 60%, transparent 80%));
  opacity: 0.30;
  pointer-events: none;
}
.kn-cta4__noise {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.kn-cta4__inner {
  text-align: center;
  max-width: 720px;
  position: relative;
  z-index: 2;
}
.kn-cta4__mark {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}
.kn-cta4__payoff {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  color: #fff;
  text-wrap: balance;
}
.kn-cta4__payoff em {
  font-style: italic;
  font-weight: 400;
  color: #F0A2EE;
}
.kn-cta4__sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 0 44px;
}

/* The form — higher contrast button, solid white CTA */
.kn-cta4__form {
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
}
.kn-cta4__form.is-shaking {
  animation: kCta4Shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes kCta4Shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.kn-cta4__form-row {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 6px;
  transition: border-color 0.2s ease;
}
.kn-cta4__form-row:focus-within {
  border-color: rgba(245,141,208,0.55);
}
.kn-cta4__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 14px 18px;
  font: 400 15.5px var(--font-text);
  outline: none;
  min-width: 0;
}
.kn-cta4__input::placeholder { color: rgba(255,255,255,0.45); }
/* Solid white CTA — high contrast against dark background */
.kn-cta4__submit {
  background: #fff;
  color: var(--knovit-purple);
  border: 0;
  padding: 14px 24px;
  border-radius: 10px;
  font: 600 14.5px var(--font-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s ease;
  letter-spacing: -0.005em;
}
.kn-cta4__submit:hover {
  transform: translateY(-1px);
  background: #F8F8FB;
  box-shadow: 0 10px 28px -8px rgba(255,255,255,0.30);
}
.kn-cta4__submit .kn-btn__arrow {
  transition: transform .25s var(--ease-out);
}
.kn-cta4__submit:hover .kn-btn__arrow {
  transform: translateX(3px);
}
/* Beta form — sending + error states (wired to the /api/beta Function). */
.kn-cta4__submit.is-sending {
  opacity: .62;
  pointer-events: none;
}
.kn-cta4__error {
  margin: 12px 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ff8f8f;
}

/* Consent-required error: red message + red checkbox box until ticked */
.kn-cta4__consent-error {
  margin: 8px 4px 0;
  font: 500 13px var(--font-text);
  line-height: 1.5;
  color: #ff8f8f;
}
.kn-cta4__consent.has-error .kn-cta4__consent-box {
  border-color: #ff8f8f;
  background: rgba(255,143,143,0.10);
}

/* Privacy consent — custom animated checkbox */
.kn-cta4__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 4px 0;
  cursor: pointer;
  user-select: none;
}
.kn-cta4__consent-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.kn-cta4__consent-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  color: #fff;
  position: relative;
}
.kn-cta4__consent-box svg {
  /* Animated check path */
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.kn-cta4__consent.is-checked .kn-cta4__consent-box {
  background: var(--knovit-coral);
  border-color: var(--knovit-coral);
  transform: scale(1.05);
}
.kn-cta4__consent.is-checked .kn-cta4__consent-box svg {
  stroke-dashoffset: 0;
}
.kn-cta4__consent-box::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 2px solid var(--knovit-coral);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}
.kn-cta4__consent.is-checked .kn-cta4__consent-box::after {
  animation: kCta4Ring 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes kCta4Ring {
  0%   { opacity: 0.6; transform: scale(0.6); }
  60%  { opacity: 0.4; transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.8); }
}
.kn-cta4__consent:hover .kn-cta4__consent-box {
  border-color: rgba(245,141,208,0.7);
}
.kn-cta4__consent-text {
  font: 400 13px var(--font-text);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.005em;
  flex: 1;
}
.kn-cta4__consent-link {
  color: var(--knovit-pink);
  text-decoration: underline;
  text-decoration-color: rgba(245,141,208,0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.kn-cta4__consent-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}
.kn-cta4__micro {
  margin: 14px 4px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}
.kn-cta4__done {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  background: rgba(45,174,115,0.14);
  border: 1px solid rgba(45,174,115,0.32);
  border-radius: 14px;
}
.kn-cta4__done-check {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--success-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kn-cta4__done-title {
  font: 500 16px var(--font-text);
  color: #fff;
}
.kn-cta4__done-sub {
  font: 400 13px var(--font-text);
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
}
.kn-cta4__meta {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 500 12px var(--font-text);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  /* Text hidden per request; keep the block so section height stays the same. */
  visibility: hidden;
}
.kn-cta4__meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
}
@media (max-width: 540px) {
  .kn-cta4 { padding: 110px 0 90px; }
  .kn-cta4__form-row { flex-direction: column; gap: 8px; }
  .kn-cta4__submit { width: 100%; justify-content: center; }
  .kn-cta4__meta { flex-direction: column; gap: 6px; }
  .kn-cta4__meta-dot { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   V5 — strategic refresh on top of V4
   1. Unified type scale (bookend vs section)
   2. Color rhythm: warm tones in 2 inner sections
   3. Sphere as decorative leitmotiv
   4. Ambient motion (atmosphere drift, notification card hover)
   5. Voice Commander trim, Privacy de-formalized
   ════════════════════════════════════════════════════════════════ */

/* ─── 1.  TYPE SCALE ─────────────────────────────────────────────
   Bookends (Hero + CTA Final): clamp(56px, 7vw, 92px)   — larger
   All inner sections:           clamp(42px, 5.4vw, 72px) — unified
   Eyebrows + ledes unchanged. */

.kn-hero4__headline,
.kn-cta4__payoff {
  font-size: clamp(56px, 7vw, 92px) !important;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.kn-voice4__headline,
.kn-briefing4__headline,
.kn-act4__headline,
.kn-cases4__headline,
.kn-privacy__headline,
.kn-integrations-v2__headline {
  font-size: clamp(42px, 5.4vw, 72px) !important;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
/* The em accents inherit; force-balance specifically where line-height was off */
.kn-act4__headline { line-height: 1.0; }

@media (max-width: 540px) {
  .kn-hero4__headline,
  .kn-cta4__payoff {
    font-size: clamp(40px, 11vw, 60px) !important;
    letter-spacing: -0.03em;
  }
  .kn-voice4__headline,
  .kn-briefing4__headline,
  .kn-act4__headline,
  .kn-cases4__headline,
  .kn-privacy__headline,
  .kn-integrations-v2__headline {
    font-size: clamp(34px, 9vw, 48px) !important;
    letter-spacing: -0.025em;
  }
}

/* ─── 2.  COLOR RHYTHM ──────────────────────────────────────────
   v5.1 — i blocchi di colore pieni (warm-shell, blush) erano troppo
   gauche. Torno al cream ovunque e introduco solo una variazione
   tonale impercettibile su una sezione per evitare la monotonia. */

.kn-briefing4 { background: #FBF7F0; }   /* warm-cream, +calore */

/* (Voice Commander e Use Cases tornano al cream — vedi più sotto) */
.kn-voice4   { background: #FAF8F2; }
.kn-cases4   { background: #FAF8F2; }

/* Use Cases needs slightly stronger contrast for the dot navigation
   over the pink background — bump the active state. */
.kn-cases4__dot.is-active {
  background: color-mix(in oklab, var(--dot-accent) 18%, transparent);
}
.kn-cases4__dot:hover {
  background: color-mix(in oklab, var(--knovit-purple) 8%, transparent);
}

/* ─── 3.  THE SPHERE — recurring decorative element ─────────────
   The Knovit sphere lives as a 320–440px ornament behind specific
   headlines. Slow drifting scale + opacity keeps it ambient. */

.kn-v5__sphere {
  position: absolute;
  width: clamp(280px, 36vw, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--knovit-gradient);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: knv5-sphere-drift 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.kn-v5__sphere--soft {
  opacity: 0.32;
  filter: blur(28px);
}
.kn-v5__sphere--ghost {
  opacity: 0.18;
  filter: blur(48px);
}
@keyframes knv5-sphere-drift {
  0%   { transform: translate3d(0, 0, 0) scale(0.96); opacity: var(--sphere-op, 0.55); }
  50%  { transform: translate3d(-1.5%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, 2%, 0) scale(1.02); opacity: calc(var(--sphere-op, 0.55) * 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .kn-v5__sphere { animation: none; }
}

/* Per-section placement
   Hero gets a delicate, blurred sphere — feels like a halo, not a planet.
   ACT placement kept for historical reference (the section no longer
   mounts a sphere in v5.1+). */
.kn-hero4 .kn-v5__sphere {
  right: -8%;
  top: 18%;
  --sphere-op: 0.18;
  width: clamp(240px, 30vw, 380px);
  filter: blur(36px);
}
.kn-act4 .kn-v5__sphere {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  --sphere-op: 0.35;
}
.kn-privacy .kn-v5__sphere {
  right: -8%;
  top: 50%;
  --sphere-op: 0.42;
}

/* ─── 4.  AMBIENT MOTION ─────────────────────────────────────────
   The atmosphere glow behind Hero drifts slowly to give the section
   a subtle "alive" feel. (Integrations cards already animate in via
   Reveal stagger — over-animating them would feel busy.) */

.kn-hero4__glow {
  animation: knv5-glow-drift 22s ease-in-out infinite alternate;
}
@keyframes knv5-glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.0); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .kn-hero4__glow { animation: none; }
}

/* ─── 5.  VOICE COMMANDER — TRIM ────────────────────────────────
   The bottom "flow strip" (1·2·3 with descriptions) duplicates the
   side captions. Hide it, reclaim the height. */
.kn-voice4__flow,
.kn-voice4__footnote { display: none; }

/* Make the Privacy section host the floating sphere */
.kn-privacy { position: relative; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   ACT — V5.1 REDESIGN
   - One unified card layout shared between Method and Architecture
   - A sliding-pill mode toggle ("Read it as a method / an architecture")
   - Persistent A · C · T letter monoliths, content crossfades
   - Subtle hover tilt, dashed gradient connector between cards
   ════════════════════════════════════════════════════════════════ */

/* Toggle */
.kn-act5__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 52px;
}
.kn-act5__toggle-prefix {
  font: 500 11.5px var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.kn-act5__pill {
  position: relative;
  display: inline-flex;
  padding: 6px;
  background: rgba(60, 0, 124, 0.06);
  border: 1px solid rgba(60, 0, 124, 0.10);
  border-radius: 999px;
  isolation: isolate;
}
.kn-act5__pill-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #FBF7F0 100%);
  border: 1px solid rgba(60,0,124,0.16);
  box-shadow:
    0 10px 22px -10px rgba(60, 0, 124, 0.32),
    0 2px 6px -2px rgba(60, 0, 124, 0.16);
  transition: transform 0.42s cubic-bezier(0.18, 0.92, 0.22, 1.05);
  z-index: 0;
  will-change: transform;
}
.kn-act5__pill[data-mode="arch"] .kn-act5__pill-thumb {
  transform: translateX(100%);
}
.kn-act5__pill-seg {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px 24px 12px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-text);
  color: var(--ink-500);
  transition: color 0.28s var(--ease-out);
  white-space: nowrap;
  min-width: 220px;
  justify-content: center;
}
.kn-act5__pill-seg:hover { color: var(--ink-700); }
.kn-act5__pill-seg.is-active { color: var(--knovit-purple); }
.kn-act5__pill-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.kn-act5__pill-name {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.kn-act5__pill-hint {
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  opacity: 0.55;
  letter-spacing: -0.002em;
}

/* Stage */
.kn-act5__stage {
  position: relative;
  max-width: 1080px;
  margin: 0 auto 64px;
  padding: 28px 0 8px;
}
.kn-act5__connector {
  position: absolute;
  left: 8%; right: 8%;
  top: 110px;            /* aligned with the bottom of the letter */
  height: 6px;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s ease;
}
@media (max-width: 1000px) {
  .kn-act5__connector { display: none; }
}

/* Card grid */
.kn-act5__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
}

/* Card */
.kn-act5__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 34px 28px 26px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition:
    transform 0.32s var(--ease-out),
    border-color 0.32s var(--ease-out),
    box-shadow 0.32s var(--ease-out);
}
.kn-act5__card:hover {
  transform: translateY(-4px);
  border-color: rgba(60, 0, 124, 0.25);
  box-shadow:
    0 28px 56px -28px rgba(60, 0, 124, 0.22),
    0 4px 14px -6px rgba(60, 0, 124, 0.10);
}
.kn-act5__card--final {
  background: linear-gradient(180deg, #FFFBF6 0%, #FCE4DD 100%);
  border-color: rgba(253, 75, 49, 0.22);
}
.kn-act5__card--final:hover {
  border-color: rgba(253, 75, 49, 0.55);
  box-shadow:
    0 28px 56px -28px rgba(253, 75, 49, 0.30),
    0 4px 14px -6px rgba(253, 75, 49, 0.14);
}

/* Subtle dot above the letter — matches the eyebrow vocabulary */
.kn-act5__card-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--knovit-purple);
  margin-bottom: 18px;
  opacity: 0.85;
  transition: background 0.45s ease, transform 0.45s var(--ease-out);
}
.kn-act5__card--final .kn-act5__card-dot { background: var(--knovit-coral); }
.is-mode-arch .kn-act5__card-dot { transform: scale(1.6); }

/* The letter — single, huge, persistent across modes */
.kn-act5__card-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--knovit-purple);
  margin-bottom: 18px;
  transition: transform 0.45s var(--ease-out), color 0.45s ease;
  transform-origin: left center;
}
.kn-act5__card--final .kn-act5__card-letter {
  background: linear-gradient(135deg, #FD4B31 0%, #F588C2 60%, #3C007C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* The pulse animation fires on every mode switch. CSS won't restart
   a same-named animation when classes change, so we alias two named
   variants and switch between them via .is-mode-* on the section. */
.is-mode-method .kn-act5__card-letter {
  animation: kAct5LetterPulseA 0.55s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.is-mode-arch .kn-act5__card-letter {
  animation: kAct5LetterPulseB 0.55s cubic-bezier(0.2, 0.85, 0.2, 1);
}
@keyframes kAct5LetterPulseA {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes kAct5LetterPulseB {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .is-mode-method .kn-act5__card-letter,
  .is-mode-arch .kn-act5__card-letter { animation: none; }
}

/* Card body — title + description crossfade on mode switch */
.kn-act5__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kn-act5__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: 0 0 10px;
  animation: kAct5Swap 0.4s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.kn-act5__card-title em {
  font-style: italic;
  color: var(--knovit-purple);
}
.kn-act5__card--final .kn-act5__card-title em { color: var(--knovit-coral); }
.kn-act5__card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0 0 22px;
  text-wrap: pretty;
  animation: kAct5Swap 0.4s 0.04s cubic-bezier(0.2, 0.85, 0.2, 1) backwards;
}
@keyframes kAct5Swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card foot — shows the other reading, gives the duality at a glance */
.kn-act5__card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(15, 18, 38, 0.12);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-text);
}
.kn-act5__card-foot-label {
  font: 500 10px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.kn-act5__card-foot-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-700);
  letter-spacing: -0.005em;
}

/* The connector dasharray shifts feel between modes — purple-coral
   for "method" (a flow in time), purple-pink-coral for "architecture"
   (overlapping containers). Done via gradient stop changes on the SVG
   defs above; the JSX uses a single id so a CSS-only swap can fade it. */
.is-mode-arch .kn-act5__connector { opacity: 0.55; }

/* RESPONSIVE — collapse to a single column on tablet/mobile */
@media (max-width: 1000px) {
  .kn-act5__cards { grid-template-columns: 1fr; gap: 14px; }
  .kn-act5__card { min-height: 0; padding: 28px 24px 22px; }
  .kn-act5__card-letter { font-size: 72px; margin-bottom: 14px; }
  .kn-act5__pill-seg {
    min-width: 0;
    padding: 10px 16px;
  }
  .kn-act5__pill-hint { display: none; }
  .kn-act5__pill-num { display: none; }
}
@media (max-width: 540px) {
  .kn-act5__pill-name { font-size: 13.5px; }
}

/* Hide the old V4 tab/panel chrome — JSX no longer renders them, but
   keep the styles dormant in case a legacy view is opened. */
.kn-act4__tabs,
.kn-act4__panel { display: none; }

/* The v5 ACT chrome is replaced by v6 in this build. Hide any leftover
   v5 nodes so they don't double-stack with v6 above the cards. */
.kn-act6 .kn-act5__toggle,
.kn-act6 .kn-act5__stage { display: none; }

/* ════════════════════════════════════════════════════════════════
   ACT — V6 "LINE ↔ TRIANGLE"
   The section's purpose: show that ACT means two different things
   at once. Made visible through GEOMETRY: same three cards rearrange
   from a horizontal LINE (a method, in time) to a TRIANGLE (an
   architecture, with relations).
   ════════════════════════════════════════════════════════════════ */

/* Hide any leftover v5 chrome the v7 selector also matches on */
.kn-act7 .kn-act5__toggle,
.kn-act7 .kn-act5__stage { display: none; }

/* Toggle ─────────────────────────────────────────────────────────
   Two large "option cards" centered on their own row, each previewing
   the geometry it will produce. The active option fills with a warm
   white surface and a brand-coloured shadow so it reads as a tactile
   button being pressed. */
.kn-act7__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 8px auto 64px;
}
.kn-act7 .kn-act4__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
.kn-act7__toggle-prefix {
  font: 500 11.5px var(--font-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kn-act7__toggle-prefix::before,
.kn-act7__toggle-prefix::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
.kn-act7__toggle-row {
  display: inline-flex;
  align-items: stretch;
  gap: 18px;
}
.kn-act7__choice {
  --choice-accent: var(--knovit-purple);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  padding: 22px 28px 20px;
  background: transparent;
  border: 1px solid rgba(60, 0, 124, 0.14);
  border-radius: 20px;
  cursor: pointer;
  color: var(--ink-600);
  font-family: var(--font-text);
  transition:
    background 0.32s var(--ease-out),
    color 0.32s var(--ease-out),
    border-color 0.32s var(--ease-out),
    transform 0.32s var(--ease-out),
    box-shadow 0.32s var(--ease-out);
}
.kn-act7__choice:nth-child(2) { --choice-accent: var(--knovit-coral); }
.kn-act7__choice:hover {
  color: var(--ink-900);
  border-color: color-mix(in oklab, var(--choice-accent) 36%, transparent);
  transform: translateY(-2px);
}
.kn-act7__choice.is-active {
  color: var(--choice-accent);
  border-color: transparent;
  background: linear-gradient(180deg, #fff 0%, #FBF7F0 100%);
  box-shadow:
    0 18px 38px -16px color-mix(in oklab, var(--choice-accent) 38%, transparent),
    0 3px 10px -3px color-mix(in oklab, var(--choice-accent) 22%, transparent),
    inset 0 0 0 1.5px color-mix(in oklab, var(--choice-accent) 40%, transparent);
}
.kn-act7__choice-icon {
  width: 76px;
  height: 38px;
  color: currentColor;
  opacity: 0.55;
  transition: opacity 0.32s ease, transform 0.5s var(--ease-out);
}
.kn-act7__choice.is-active .kn-act7__choice-icon { opacity: 1; }
.kn-act7__choice:hover .kn-act7__choice-icon { transform: scale(1.04); }
.kn-act7__choice-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.kn-act7__choice-name {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.kn-act7__choice-name em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.kn-act7__choice-hint {
  font-size: 12px;
  opacity: 0.55;
  letter-spacing: 0.005em;
}

/* Stage ──────────────────────────────────────────────────────────
   Fixed-aspect canvas where cards live. Three absolute-positioned
   nodes that translate to the right anchor for the active view.
   Smooth long transitions so the geometry change reads as movement,
   not as a swap. */
.kn-act7__stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 560px;
  margin: 0 auto 64px;
}

.kn-act7__edges {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.kn-act7__edges-line,
.kn-act7__edges-tri {
  transition: opacity 0.6s var(--ease-out);
}
.kn-act7.is-method .kn-act7__edges-line { opacity: 1; }
.kn-act7.is-method .kn-act7__edges-tri  { opacity: 0; }
.kn-act7.is-arch   .kn-act7__edges-line { opacity: 0; }
.kn-act7.is-arch   .kn-act7__edges-tri  { opacity: 1; }

/* The three cards — same DOM, anchored differently per view */
.kn-act7__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    transform 0.78s cubic-bezier(0.32, 0.94, 0.30, 1.04),
    box-shadow 0.32s var(--ease-out),
    border-color 0.32s var(--ease-out);
  z-index: 1;
  will-change: transform;
}
.kn-act7__card:hover {
  border-color: rgba(60, 0, 124, 0.30);
  box-shadow:
    0 28px 56px -28px rgba(60, 0, 124, 0.22),
    0 4px 14px -6px rgba(60, 0, 124, 0.10);
}
.kn-act7__card--final {
  background: linear-gradient(180deg, #FFFBF6 0%, #FCE4DD 100%);
  border-color: rgba(253, 75, 49, 0.22);
}
.kn-act7__card--final:hover {
  border-color: rgba(253, 75, 49, 0.55);
  box-shadow:
    0 28px 56px -28px rgba(253, 75, 49, 0.32),
    0 4px 14px -6px rgba(253, 75, 49, 0.16);
}

/* METHOD view — horizontal line, three equal stops along the row.
   Stage is 1000×560; cards are 280 wide. Centerline at y = 280-90 ≈ 190
   (we anchor by top-left, card height ~280 so top at y=110 places
   center near 250).
   Anchors:
     A : x =   12, y = 150
     C : x =  360, y = 150
     T : x =  708, y = 150  */
.kn-act7.is-method .kn-act7__card--0 { transform: translate(12px,  150px); }
.kn-act7.is-method .kn-act7__card--1 { transform: translate(360px, 150px); }
.kn-act7.is-method .kn-act7__card--2 { transform: translate(708px, 150px); }

/* ARCHITECTURE view — A and C in the top row, T centered below.
   Anchors chosen so the cards form a clean equilateral-ish triangle:
     A : x =   60, y =  20
     C : x =  660, y =  20
     T : x =  360, y = 280  */
.kn-act7.is-arch .kn-act7__card--0 { transform: translate(60px,  20px); }
.kn-act7.is-arch .kn-act7__card--1 { transform: translate(660px, 20px); }
.kn-act7.is-arch .kn-act7__card--2 { transform: translate(360px, 280px); }

/* Stagger the move slightly so cards travel as a small wave */
.kn-act7__card--0 { transition-delay: 0s;    }
.kn-act7__card--1 { transition-delay: 0.06s; }
.kn-act7__card--2 { transition-delay: 0.12s; }

/* Card content */
.kn-act7__card-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--knovit-purple);
  margin-bottom: 14px;
  transform-origin: left center;
}
.kn-act7__card--final .kn-act7__card-letter {
  background: linear-gradient(135deg, #FD4B31 0%, #F588C2 60%, #3C007C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.kn-act7__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kn-act7__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: 0;
  animation: kAct7Swap 0.42s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.kn-act7__card-title em {
  font-style: italic;
  color: var(--knovit-purple);
}
.kn-act7__card--final .kn-act7__card-title em { color: var(--knovit-coral); }
.kn-act7__card-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
  text-wrap: pretty;
  animation: kAct7Swap 0.42s 0.04s cubic-bezier(0.2, 0.85, 0.2, 1) backwards;
}
@keyframes kAct7Swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kn-act7__card { transition: none; }
  .kn-act7__card-title,
  .kn-act7__card-desc { animation: none; }
}

/* RESPONSIVE ──────────────────────────────────────────────────────
   Below 1100px the line geometry no longer fits 3×280 cards. Fall back
   to a vertical stack regardless of view; keep the toggle visible so
   the section still tells its story through copy. */
@media (max-width: 1100px) {
  .kn-act7__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
    padding-bottom: 4px;
  }
  .kn-act7__edges { display: none; }
  .kn-act7__card {
    position: static;
    width: 100%;
    transform: none !important;
    transition: opacity 0.32s var(--ease-out);
  }
  .kn-act7__card-letter { font-size: 76px; }
}

@media (max-width: 540px) {
  .kn-act7__toggle-row {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
  .kn-act7__choice {
    min-width: 0;
    width: 100%;
    padding: 16px 18px;
    flex-direction: row;
    gap: 16px;
  }
  .kn-act7__choice-text { align-items: flex-start; text-align: left; }
  .kn-act7__choice-icon { width: 56px; height: 28px; flex-shrink: 0; }
  .kn-act7__card-letter { font-size: 64px; }
}

/* ════════════════════════════════════════════════════════════════
   USE CASES — V6 EDITORIAL GALLERY
   The section pivots from the fan-deck (v4) to a 2×2 editorial grid
   on a deep brand-plum background. All four lives are visible at
   once; each tile is a "poster" with a large photo, oversized italic
   number, kicker, title, and body. The dark surface is what makes
   the section feel different from the cream sequence around it.
   ════════════════════════════════════════════════════════════════ */

/* Section — replaces the cream bg of v4 entirely.
   Brand-aligned (purple family) but desaturated and warmer than the
   integrations/CTA black, so it reads as its own moment. */
.kn-cases7 {
  background: #2D1C3D;           /* dusty plum */
  color: #fff;
  position: relative;
  overflow: hidden;
}
.kn-cases7__atmosphere {
  position: absolute;
  inset: -10% -10% 0 -10%;
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(253, 75, 49, 0.20) 0%,
    rgba(245, 141, 208, 0.10) 30%,
    rgba(60, 0, 124, 0.08) 55%,
    transparent 75%);
  opacity: 0.55;
  pointer-events: none;
}

/* Hide the v4 deck/nav chrome — JSX no longer renders it */
.kn-cases7 .kn-cases4__deck,
.kn-cases7 .kn-cases4__nav,
.kn-cases7 .kn-cases4__card { display: none; }

/* Head — same vertical rhythm as the rest of the page, but in light
   on the dark surface */
.kn-cases7__head {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto 64px;
  text-align: center;
}
.kn-cases7__eyebrow { color: rgba(255, 255, 255, 0.65); }
.kn-cases7__eyebrow .kn-eyebrow-dot { background: var(--knovit-coral); }
.kn-cases7__headline {
  color: #fff;
}
.kn-cases7__headline em {
  color: var(--knovit-pink);
  font-style: italic;
}
.kn-cases7__lede {
  color: rgba(255, 255, 255, 0.65);
}

/* Grid — 2×2 of posters */
.kn-cases7__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Each poster */
.kn-cases7__poster {
  position: relative;
  background: var(--bg);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
  box-shadow:
    0 24px 50px -22px rgba(0, 0, 0, 0.50),
    0 2px 6px -2px rgba(0, 0, 0, 0.20);
}
.kn-cases7__poster:hover {
  transform: translateY(-4px);
  box-shadow:
    0 36px 72px -22px rgba(0, 0, 0, 0.62),
    0 4px 10px -2px rgba(0, 0, 0, 0.28);
}

/* Photo — top portion of the poster, takes ~58% of the height.
   The accent shows through if no image is dropped. */
.kn-cases7__poster-image {
  position: relative;
  height: 320px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, white) 0%, var(--accent) 100%);
  overflow: hidden;
}
.kn-cases7__poster-image image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.kn-cases7__poster-image-default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.kn-cases7__poster-image-default svg {
  width: 100%;
  height: 100%;
}

/* Text panel — the bottom of the poster */
.kn-cases7__poster-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 26px 6px;
}
.kn-cases7__poster-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.kn-cases7__poster-kicker {
  font: 500 11px var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 18, 38, 0.55);
  line-height: 1.35;
}
.kn-cases7__poster-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 6px 26px 12px;
  text-wrap: balance;
}
.kn-cases7__poster-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 26px 26px;
  text-wrap: pretty;
}

/* Responsive — stack 1×4 below 900px */
@media (max-width: 900px) {
  .kn-cases7__grid { grid-template-columns: 1fr; max-width: 480px; gap: 18px; }
  .kn-cases7__poster-image { height: 240px; }
  .kn-cases7__poster-num { font-size: 38px; }
}
@media (max-width: 540px) {
  .kn-cases7__poster-image { height: 200px; }
  .kn-cases7__poster-num { font-size: 32px; }
  .kn-cases7__poster-title { font-size: 19px; }
}