/* ==== Home ==== */

    /* v4 typography override — use TWK Lausanne everywhere */
    :root { --font-mono: 'TWK Lausanne', system-ui, sans-serif; }
    .v4-eyebrow, .v4-tele__cell .lbl, .v4-tele__cell .val, .v4-card .lbl, .v4-how__copy .num, .v4-quote .src, .v4-foot, .v4-mock__chrome, .v4-mock__panel .tile .lbl, .v4-signal-row .b, .v4-hero__seq .seq-counter { font-family: 'TWK Lausanne', system-ui, sans-serif !important; }
  
/* ==== Home ==== */

    /* ============================================================
       V4 — CINEMATIC, LIGHT
       White ground, eye image as hero backdrop,
       product visuals for How It Works.
       ============================================================ */
    body { background: #fff; color: var(--zenda-black); }
    .v4-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); }
    .v4-eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--zenda-magenta); margin-right: 8px; vertical-align: middle; animation: v4pulse 1.6s ease-in-out infinite; }
    @keyframes v4pulse { 0%,100% { opacity:1;transform:scale(1);} 50% { opacity:0.4;transform:scale(0.7);} }

    /* HERO — full-bleed eye, text on top */
    .v4-hero {
      position: relative; min-height: 820px; overflow: hidden;
      display: flex; align-items: flex-end;
      padding: 0 max(64px, calc((100% - 1280px) / 2)) 72px;
      border-bottom: 1px solid var(--slate-100);
      color: #fff;
      background: #0A0A0A;
    }
    .v4-hero__bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center 35%; background-repeat: no-repeat;
      filter: contrast(1.05);
      opacity: 0; transition: opacity 1.4s ease;
    }
    .v4-hero__bg.is-active { opacity: 1; }
    .v4-hero__veil {
      position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 22%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.35) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 55%);
    }
    .v4-hero__inner { position: relative; z-index: 3; max-width: 1100px; width: 100%; }
    .v4-hero__seq { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
    .v4-hero__seq .v4-eyebrow { color: rgba(255,255,255,0.85); }
    .v4-hero__seq .seq-counter {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
      color: rgba(255,255,255,0.5); text-transform: uppercase;
    }
    .v4-hero__seq .seq-counter b { color: var(--zenda-magenta); font-weight: 600; }
    .v4-hero__seq .seq-bars {
      display: flex; gap: 6px; flex: 1; max-width: 220px;
    }
    .v4-hero__seq .seq-bars i {
      flex: 1; height: 2px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden;
    }
    .v4-hero__seq .seq-bars i.done::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.55); }
    .v4-hero__seq .seq-bars i.active::after {
      content: ""; position: absolute; inset: 0; background: var(--zenda-magenta);
      transform-origin: left; transform: scaleX(0);
      animation: v4fill 5s linear forwards;
    }
    @keyframes v4fill { to { transform: scaleX(1); } }

    .v4-hero h1 {
      font-family: var(--font-display); font-weight: 200;
      font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.96; letter-spacing: -0.045em;
      margin: 0; color: #fff; max-width: 16ch;
    }
    .v4-hero h1 .line { display: block; }
    .v4-hero h1 .swap {
      display: inline-block; position: relative; vertical-align: baseline;
      padding: 0 0.18em; margin-right: 0.06em;
      color: #0A0A0A; background: var(--zenda-magenta);
      font-weight: 700; font-style: normal;
      box-shadow: 0 0 0 1px var(--zenda-magenta);
    }
    .v4-hero h1 .swap__inner {
      display: inline-block;
      animation: v4wordIn 0.55s cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes v4wordIn {
      from { clip-path: inset(-0.25em 100% -0.25em 0); transform: translateY(0.04em); }
      to   { clip-path: inset(-0.25em 0 -0.25em 0);     transform: translateY(0); }
    }
    .v4-hero h1 .swap.is-leaving .swap__inner {
      animation: v4wordOut 0.35s cubic-bezier(.7,0,.84,0) both;
    }
    @keyframes v4wordOut {
      from { clip-path: inset(-0.25em 0 -0.25em 0); }
      to   { clip-path: inset(-0.25em 0 -0.25em 100%); }
    }

    .v4-hero__sub {
      margin: 32px 0 0; font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.15; max-width: 44ch;
      color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 24px rgba(0,0,0,0.45); letter-spacing: -0.01em;
    }
    .v4-hero__cta { display: flex; gap: 14px; margin-top: 40px; align-items: center; }
    .v4-hero__telemetry {
      position: absolute; right: 64px; bottom: 72px; z-index: 3;
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px;
      width: 460px; padding-top: 18px; border-top: 1px dashed rgba(255,255,255,0.22);
    }
    .v4-hero__telemetry .v4-tele__cell .lbl { color: rgba(255,255,255,0.5); }
    .v4-hero__telemetry .v4-tele__cell .val { color: #fff; }
    .v4-tele__cell .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--slate-400); text-transform: uppercase; display: block; }
    .v4-tele__cell .val { font-family: var(--font-mono); font-size: 14px; color: var(--zenda-black); font-weight: 600; }
    .v4-tele__cell .val .live { color: var(--zenda-magenta); }

    /* MARQUEE */
    .v4-marquee {
      padding: 32px 0; overflow: hidden;
      border-top: 1px solid var(--slate-100);
      border-bottom: 1px solid var(--slate-100);
      background: #fff;
    }
    .v4-marquee__track {
      display: flex; gap: 80px; white-space: nowrap;
      animation: v4marq 60s linear infinite;
      font-family: var(--font-display); font-weight: 200; font-size: clamp(44px, 36.57px + 1.905vw, 64px);
      letter-spacing: -0.03em; color: var(--slate-400);
    }
    .v4-marquee__track span.hot { color: var(--zenda-magenta); font-weight: 900; }
    .v4-marquee__track span.flat { color: var(--zenda-black); }
    @keyframes v4marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* THESIS */
    .v4-thesis {
      padding: 160px 64px; max-width: 1408px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
    }
    .v4-thesis h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.04em; margin: 0; }
    .v4-thesis h2 .accent { color: var(--zenda-magenta); }
    .v4-thesis p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0 0 24px; max-width: 52ch; }

    /* COMMON LANGUAGE */
    .v4-common { padding: 120px 64px; border-top: 1px solid var(--slate-100); background: #fff; }
    .v4-common__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .v4-common__copy h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 12px 0 28px; max-width: 18ch; }
    .v4-common__copy h2 .accent { color: var(--zenda-magenta); }
    .v4-common__copy > p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0 0 28px; max-width: 56ch; }
    .v4-common__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--slate-100); }
    .v4-common__list li { padding: 14px 0; border-bottom: 1px solid var(--slate-100); font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; color: var(--slate-700); }
    .v4-common__list li b { color: var(--zenda-black); font-weight: 600; }
    .v4-common__visual { position: relative; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: #000; }
    .v4-common__visual img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
    .v4-common__veil { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55)); }
    .v4-common__tag { position: absolute; padding: 6px 12px; background: #fff; color: #000; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    .v4-common__tag::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--zenda-magenta); top:50%; transform:translateY(-50%); }
    .v4-common__tag.tag-1 { top: 10%; left: -16px; padding-left: 24px; } .v4-common__tag.tag-1::before { left:9px; }
    .v4-common__tag.tag-2 { top: 34%; right: -16px; padding-right: 24px; } .v4-common__tag.tag-2::before { right:9px; }
    .v4-common__tag.tag-3 { bottom: 30%; left: -16px; padding-left: 24px; } .v4-common__tag.tag-3::before { left:9px; }
    .v4-common__tag.tag-4 { bottom: 8%; right: -16px; padding-right: 24px; } .v4-common__tag.tag-4::before { right:9px; }

    /* IMPACT — clickable slides */
    .v4-impact { padding: 120px 64px; border-top: 1px solid var(--slate-100); background: #fff; }
    .v4-impact__head { max-width: 1280px; margin: 0 auto 40px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 80px; align-items: end; }
    .v4-impact__head h2 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; }
    .v4-impact__head p { margin: 0; color: var(--slate-700); font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; max-width: 50ch; }

    .v4-impact__tabs {
      max-width: 1280px; margin: 0 auto 0; display: flex; flex-wrap: wrap; gap: 0;
      border-top: 1px solid var(--slate-100);
      border-bottom: 1px solid var(--slate-100);
    }
    .v4-impact__tab {
      flex: 1 1 0; min-width: 140px; padding: 18px 18px 16px;
      background: #fff; border: 0; border-right: 1px solid var(--slate-100);
      text-align: left; cursor: pointer; font-family: var(--font-display);
      display: flex; flex-direction: column; gap: 4px;
      transition: background 200ms;
      position: relative;
    }
    .v4-impact__tab:last-child { border-right: 0; }
    .v4-impact__tab:hover { background: var(--slate-50); }
    .v4-impact__tab .tab-num {
      font-size: 10px; letter-spacing: 0.16em; color: var(--slate-400);
      text-transform: uppercase; font-weight: 500;
    }
    .v4-impact__tab .tab-name { font-size: 14px; font-weight: 600; color: var(--zenda-black); line-height: 1.2; }
    .v4-impact__tab[aria-selected="true"] { background: #0A0A0A; color: #fff; }
    .v4-impact__tab[aria-selected="true"] .tab-num { color: var(--zenda-magenta); }
    .v4-impact__tab[aria-selected="true"] .tab-name { color: #fff; }
    .v4-impact__tab[aria-selected="true"]::after {
      content:""; position:absolute; left:0; right:0; bottom:0; height: 2px; background: var(--zenda-magenta);
      transform-origin: left; animation: v4tabfill 7s linear forwards;
    }
    @keyframes v4tabfill { from { transform: scaleX(0);} to { transform: scaleX(1);} }

    .v4-impact__stage {
      max-width: 1280px; margin: 0 auto; padding: 64px 0 0; position: relative; min-height: 460px;
    }
    .v4-slide {
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start;
      position: absolute; inset: 64px 0 0 0; opacity: 0; pointer-events: none;
      transition: opacity 600ms ease;
    }
    .v4-slide.is-active { opacity: 1; pointer-events: auto; position: relative; inset: auto; }
    .v4-slide__num {
      font-family: var(--font-display); font-weight: 900;
      font-size: clamp(132px, 91.89px + 10.286vw, 240px); line-height: 0.85; letter-spacing: -0.06em;
      color: var(--zenda-black);
    }
    .v4-slide__num .pct {
      font-size: clamp(48px, 33.14px + 3.810vw, 88px); vertical-align: baseline; font-weight: 600; color: var(--zenda-magenta); margin-left: 4px;
    }
    .v4-slide__cap {
      font-family: var(--font-display); font-weight: 200;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); line-height: 1.1; letter-spacing: -0.025em;
      margin: 24px 0 0; max-width: 14ch;
    }
    .v4-slide__right .v4-eyebrow { color: var(--zenda-magenta); font-size: 12px; letter-spacing: 0.14em; }
    .v4-slide__right .v4-slide__label { display: block; margin: 0 0 12px; color: var(--slate-500); }
    .v4-slide__wins strong { color: var(--zenda-black); font-weight: 600; }
    .v4-slide__right h3 {
      font-family: var(--font-display); font-weight: 900;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0 16px; max-width: 24ch;
    }
    .v4-slide__right > p {
      font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0 0 28px; max-width: 48ch;
    }
    .v4-slide__wins { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--slate-100); }
    .v4-slide__wins li {
      display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 14px 0;
      border-bottom: 1px solid var(--slate-100); font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.4; color: var(--slate-800);
      align-items: baseline;
    }
    .v4-slide__wins li::before {
      content: counter(winitem, decimal-leading-zero);
      counter-increment: winitem;
      font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em;
      color: var(--zenda-magenta);
    }
    .v4-slide__wins { counter-reset: winitem; }

    .v4-impact__pager {
      max-width: 1280px; margin: 0 auto 18px; display: flex; align-items: center; gap: 20px;
    }
    .v4-impact__tabs { display: none !important; }
    .v4-impact__pager { align-items: flex-start; }
    .v4-impact__count { padding-top: 12px; }
    .v4-impact__ticks { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; position: relative; }
    .v4-impact__tick {
      flex: 1 1 0; min-width: 0; padding: 10px 0 0; background: none; border: 0; cursor: pointer;
      display: flex; flex-direction: column; gap: 10px; text-align: left; font: inherit; color: inherit;
    }
    .v4-impact__tick .tick-bar { position: relative; display: block; height: 3px; background: var(--slate-100); transition: background 220ms ease; overflow: hidden; }
    .v4-impact__tick .tick-bar::after { content: ""; position: absolute; inset: 0; background: var(--zenda-magenta); transform: scaleX(0); transform-origin: left; }
    .v4-impact__tick:hover .tick-bar { background: var(--slate-400); }
    .v4-impact__tick[aria-selected="true"] .tick-bar { background: color-mix(in oklab, var(--zenda-magenta) 25%, #fff); }
    .v4-impact__tick[aria-selected="true"] .tick-bar::after { animation: v4tabfill 7s linear forwards; }
    .v4-impact__tick .tick-label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--slate-500); text-wrap: balance; transition: color 200ms ease; }
    .v4-impact__tick .tick-num { font-size: 12px; letter-spacing: 0.16em; font-weight: 500; color: var(--slate-400); font-variant-numeric: tabular-nums; }
    .v4-impact__tick:hover .tick-label { color: var(--zenda-black); }
    .v4-impact__tick[aria-selected="true"] .tick-label { color: var(--zenda-black); }
    .v4-impact__tick[aria-selected="true"] .tick-num { color: var(--zenda-magenta); }
    .v4-impact__count {
      font-size: 12px; letter-spacing: 0.16em; color: var(--slate-400); font-weight: 500;
      font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .v4-impact__count em { font-style: normal; color: var(--zenda-black); }
    .v4-impact__arrows { display: flex; gap: 6px; }
    .v4-impact__arrow {
      width: 36px; height: 36px; border: 1px solid var(--slate-100); background: #fff;
      color: var(--zenda-black); cursor: pointer; display: inline-flex; align-items: center;
      justify-content: center; font-size: 15px; line-height: 1; transition: border-color 200ms ease, color 200ms ease;
    }
    .v4-impact__arrow:hover { border-color: var(--zenda-magenta); color: var(--zenda-magenta); }

    /* QUOTES — single rotating, light band under impact */
    .v4-quotes { padding: 64px 64px 76px; background: #fff; color: var(--zenda-black); border-top: 1px solid var(--slate-100); }
    .v4-quotes__inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; min-height: 160px; background: #fff; }
    .v4-quotes__inner .v4-eyebrow { color: var(--slate-500); }
    .v4-quote-stack { position: relative; min-height: 180px; margin-top: 24px; }
    .v4-quote {
      position: absolute; inset: 0; opacity: 0; pointer-events: none;
      transition: opacity 900ms ease;
      display: flex; flex-direction: column; justify-content: center; gap: 32px;
    }
    .v4-quote.is-active { opacity: 1; pointer-events: auto; }
    .v4-quote p {
      font-family: var(--font-display); font-weight: 200;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); line-height: 1.18; letter-spacing: -0.025em;
      color: var(--zenda-black); margin: 0; max-width: 28ch; margin-inline: auto;
    }
    .v4-quote .mark { color: var(--zenda-magenta); font-weight: 900; }
    .v4-quote .src {
      font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--slate-500);
    }
    .v4-quote-dots {
      display: flex; gap: 8px; justify-content: center; margin-top: 36px;
      position: relative; z-index: 2;
    }
    .v4-quote-dots button {
      width: 28px; height: 2px; background: var(--slate-200); border: 0; padding: 0; cursor: pointer;
      transition: background 200ms;
    }
    .v4-quote-dots button[aria-selected="true"] { background: var(--zenda-magenta); }
    .v4-card .arc { position: absolute; right: -120px; bottom: -120px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid var(--zenda-magenta); opacity: 0.18; }
    .v4-card .arc::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; border: 1px dashed var(--zenda-magenta); opacity: 0.5; }

    /* CINEMATIC SCROLL — full bleed image */
    .v4-cine {
      position: relative; height: 600px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      border-top: 1px solid var(--slate-100);
    }
    .v4-cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .v4-cine__overlay {
      position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .v4-cine__overlay h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.9; letter-spacing: -0.05em; color: #fff; margin: 0; text-align: center; }

    /* ============================================================
       HOW IT WORKS — product visuals
       Three product mockups, alternating side
       ============================================================ */
    .v4-how { padding: 160px 64px; background: #fff; border-top: 1px solid var(--slate-100); }
    .v4-how__inner { max-width: 1280px; margin: 0 auto; }
    .v4-how__head { margin-bottom: 80px; }
    .v4-how__head h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.95; letter-spacing: -0.04em; margin: 12px 0 0; max-width: 14ch; }

    .v4-how__row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
      padding: 80px 0; border-top: 1px dashed var(--slate-200);
    }
    .v4-how__row:nth-child(even) > *:first-child { order: 2; }
    .v4-how__row:nth-child(even) > *:last-child { order: 1; }
    .v4-how__copy .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--zenda-magenta); }
    .v4-how__copy h3 { font-size: clamp(44px, 36.57px + 1.905vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin: 16px 0 24px; max-width: 14ch; }
    .v4-how__copy p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0; max-width: 50ch; }

    /* product mock 1 — Common visual language (process canvas with subevent groups) */
    .v4-mock { position: relative; aspect-ratio: 16/11; background: #FAFAFA; border: 1px solid var(--slate-100); border-radius: 8px; overflow: hidden; }
    .v4-mock::before {
      content:""; position: absolute; inset: 0;
      background-image:
        linear-gradient(0deg, transparent 31px, rgba(0,0,0,0.04) 32px),
        linear-gradient(90deg, transparent 31px, rgba(0,0,0,0.04) 32px);
      background-size: 32px 32px;
    }
    .v4-mock__chrome {
      position: absolute; top: 0; left: 0; right: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px); border-bottom: 1px solid var(--slate-100);
      z-index: 10; font-family: var(--font-mono); font-size: 10px; color: var(--slate-600); letter-spacing: 0.06em;
    }
    .v4-mock__chrome b { color: var(--zenda-black); font-weight: 600; margin-left: 4px; }
    .v4-mock__chrome .pill { padding: 2px 8px; border: 1px solid var(--slate-200); border-radius: 2px; }
    .v4-mock__chrome .pill.live { background: var(--zenda-black); color: #fff; border-color: var(--zenda-black); }

    /* mock-1 — Crowdsource: production canvas asset + floating reaction cards on a blue stage */
    .v4hw1__stage {
      position: relative;
      background: oklch(0.96 0.018 245); /* soft blue */
      border-radius: 8px;
      padding: 56px 48px;
      overflow: visible;           /* allow cards to extend past stage edges */
    }
    .v4-mock--hw1 {
      background: #fff; padding: 0;
      aspect-ratio: 16/9;
      overflow: hidden;            /* keep the screenshot inside the device frame */
      border: 1px solid var(--slate-100);
      border-radius: 6px;
      box-shadow: 0 18px 48px -20px rgba(15, 20, 24, 0.18);
    }
    .v4-mock--hw1::before { display: none; }
    .v4-mock--hw1 .v4-mock__chrome { display: none; }
    .v4hw1__main {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      animation: v4hw1Drift 24s ease-in-out infinite;
    }
    @keyframes v4hw1Drift {
      0%,100% { transform: scale(1.00) translate(0%, 0%); }
      50%     { transform: scale(1.02)  translate(-0.5%, -0.3%); }
    }
    .v4hw1__react {
      position: absolute;
      width: 30%;
      opacity: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.42);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      box-shadow: 0 12px 32px -10px rgba(15, 20, 24, 0.18), inset 0 0 0 1px rgba(255,255,255,0.4);
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-timing-function: cubic-bezier(.4,.0,.2,1);
      animation-name: v4hw1Float;
    }
    @keyframes v4hw1Float {
      0%    { opacity: 0; transform: translateY(6px) scale(0.96); }
      8%    { opacity: 1; transform: translateY(0)   scale(1); }
      55%   { opacity: 1; transform: translateY(-2px) scale(1); }
      65%   { opacity: 0; transform: translateY(-8px) scale(0.98); }
      100%  { opacity: 0; transform: translateY(-8px) scale(0.98); }
    }
    /* Positions in the stage — cards can sit outside the mock frame but stay inside the stage */
    .v4hw1__r1 { left: -3%;  top:    14%; animation-delay: 0.0s; }
    .v4hw1__r2 { right: -2%; top:    8%;  animation-delay: 1.4s; }
    .v4hw1__r3 { right: -3%; bottom: 18%; animation-delay: 2.8s; }
    .v4hw1__r4 { left: -3%;  bottom: 20%; animation-delay: 4.2s; }
    .v4hw1__r5 { left:  18%; bottom: -3%; animation-delay: 5.6s; }
    .v4hw1__r6 { right: 14%; top:    -3%; animation-delay: 7.0s; }

    /* floating Smart-Signal callout (Automation Opportunity) — frosted glass over the screenshot */
    .v4hw1__signal {
      position: absolute; right: -4%; bottom: -7%; width: 46%; z-index: 4;
      border-radius: 10px; overflow: hidden;
      -webkit-backdrop-filter: blur(11px) saturate(125%);
      backdrop-filter: blur(11px) saturate(125%);
      box-shadow: 0 18px 44px -10px rgba(15, 20, 24, 0.30);
      animation: v4hw1Signal 7s cubic-bezier(.4,0,.2,1) infinite;
    }
    .v4hw1__signal img { display: block; width: 100%; }

    /* floating Create-Variant callout (Enterprise / Operational Command) — frosted glass */
    .v4hw1__variant {
      position: absolute; left: -5%; bottom: 12%; width: 44%; z-index: 4;
      padding: 16px 18px; border-radius: 12px;
      background: rgba(231, 225, 240, 0.40);
      -webkit-backdrop-filter: blur(13px) saturate(130%);
      backdrop-filter: blur(13px) saturate(130%);
      box-shadow: 0 18px 44px -10px rgba(76, 40, 130, 0.24);
      animation: v4hw1Signal 7s cubic-bezier(.4,0,.2,1) infinite;
    }
    .v4hw1__variant img { display: block; width: 100%; }
    .v4hw1__cmp {
      display: flex; align-items: center; justify-content: center; gap: 9px;
      padding: 9px 16px; border-radius: 7px;
      background: #E7E1F0; box-shadow: inset 0 0 0 1px rgba(100, 1, 228, 0.10);
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: #2A1A4A;
      white-space: nowrap;
    }
    .v4hw1__cmp svg { flex: none; width: 17px; height: 17px; }
    @keyframes v4hw1Signal {
      0%,100% { transform: translateY(0); }
      50%     { transform: translateY(-6px); }
    }

    /* mock-1 — Design workspace; clicking "Generate blueprint" refreshes the view to the Blueprint */
    .v4flip__card {
      position: relative; width: 100%; aspect-ratio: 16/9;
    }
    .v4flip__face {
      position: absolute; inset: 0; aspect-ratio: auto;
    }
    .v4flip__face .v4hw1__main { animation: none; }       /* no drift on the swap faces */
    .v4flip__back .v4hw1__main { object-position: center top; }
    .v4flip__front { z-index: 2; animation: v4flipFront 9s cubic-bezier(.4,0,.2,1) infinite; }
    .v4flip__back  { z-index: 1; opacity: 0; animation: v4flipBack 9s cubic-bezier(.4,0,.2,1) infinite; }
    @keyframes v4flipFront {
      0%, 44%   { opacity: 1; }
      50%, 92%  { opacity: 0; }
      97%, 100% { opacity: 1; }
    }
    @keyframes v4flipBack {
      0%, 44%   { opacity: 0; }
      50%, 92%  { opacity: 1; }
      97%, 100% { opacity: 0; }
    }
    /* floating Generate-Blueprint button — flickers blue, then the workspace flips */
    .v4flip__btn {
      position: absolute; right: 7%; top: 9%; z-index: 6;
      display: inline-flex; align-items: center; gap: 9px;
      padding: 11px 16px 11px 13px; border-radius: 9px;
      border: 1px solid var(--slate-200); background: #fff; color: var(--zenda-black);
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 12px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer;
      box-shadow: 0 12px 30px -12px rgba(15,20,24,0.30);
      animation: v4flipBtn 9s cubic-bezier(.4,0,.2,1) infinite;
    }
    .v4flip__btn svg { flex: none; width: 20px; height: 20px; }
    .v4flip__btn svg path { stroke: currentColor; }
    @keyframes v4flipBtn {
      0%, 38%   { background:#fff; color:var(--zenda-black); box-shadow: 0 12px 30px -12px rgba(15,20,24,0.30); opacity:1; }
      42%       { background:#2F6BFF; color:#fff; box-shadow: 0 0 0 6px rgba(47,107,255,0.26), 0 14px 34px -10px rgba(47,107,255,0.6); opacity:1; }
      48%, 90%  { opacity:0; }
      98%, 100% { opacity:1; background:#fff; color:var(--zenda-black); box-shadow: 0 12px 30px -12px rgba(15,20,24,0.30); }
    }
    @media (prefers-reduced-motion: reduce) {
      .v4flip__front, .v4flip__back, .v4flip__btn { animation: none; }
      .v4flip__back { opacity: 0; }
    }

    .v4-mock--reactions { background: #fff; }
    .v4-react-card {
      position: absolute; padding: 12px 14px; background: #fff;
      border: 1px solid var(--slate-200); border-radius: 6px; box-shadow: var(--shadow-sm);
      max-width: 200px; font-size: 11px; line-height: 1.35; color: var(--slate-800);
      animation: v4float 4s ease-in-out infinite;
    }
    .v4-react-card .badge { display: inline-block; padding: 1px 6px; background: var(--zenda-magenta); color: #000; border-radius: 2px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 6px; }
    @keyframes v4float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

    /* mock-3 — analysis dashboard */
    .v4-mock--analysis { background: #fff; }
    .v4-mock__panel { position: absolute; top: 36px; bottom: 12px; left: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .v4-mock__panel .col { display: flex; flex-direction: column; gap: 12px; }
    .v4-mock__panel .tile { padding: 14px; background: #FBFBFB; border: 1px solid var(--slate-100); border-radius: 6px; }
    .v4-mock__panel .tile .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--slate-500); text-transform: uppercase; }
    .v4-mock__panel .tile .v { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 19.77px + 0.571vw, 28px); line-height: 1; letter-spacing: -0.025em; margin-top: 4px; }
    .v4-mock__panel .tile .v .pct { font-size: 14px; vertical-align: baseline; color: var(--zenda-magenta); margin-left: 2px; }

    .v4-bars { height: 80px; display: flex; align-items: end; gap: 6px; margin-top: 8px; }
    .v4-bars b { display: block; width: 12px; background: var(--zenda-black); }
    .v4-bars b.hot { background: var(--zenda-magenta); }

    .v4-spark { width: 100%; height: 36px; }

    .v4-signal-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--slate-100); font-size: 11px; color: var(--slate-700); }
    .v4-signal-row:first-child { border-top: 0; }
    .v4-signal-row .b { padding: 1px 6px; border-radius: 2px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; }
    .v4-signal-row .b.auto { background: var(--zenda-blue); color: #000; }
    .v4-signal-row .b.cost { background: var(--zenda-red); color: #000; }
    .v4-signal-row .b.pain { background: var(--zenda-magenta); color: #000; }

    /* QUOTES — styles moved to dark band block above */

    /* CTA — black */
    .v4-cta { padding: 120px 64px; background: var(--zenda-black); color: #fff; text-align: center; position: relative; overflow: hidden; }
    .v4-cta__eye { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 1px solid rgba(254,88,206,0.2); pointer-events: none; }
    .v4-cta__eye::after { content: ""; position: absolute; inset: 100px; border-radius: 50%; border: 1px dashed rgba(254,88,206,0.3); }
    .v4-cta__inner { position: relative; z-index: 2; }
    .v4-cta h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.92; letter-spacing: -0.045em; margin: 24px 0 40px; }
    .v4-cta h2 em { font-style: normal; color: var(--zenda-magenta); }
    .v4-cta .v4-eyebrow { color: var(--zenda-magenta); }

    .v4-foot { padding: 48px 64px; border-top: 1px solid var(--slate-100); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); background: #fff; }
    .v4-foot strong { color: var(--zenda-black); display: block; margin-bottom: 12px; font-weight: 500; }
    .v4-foot a { display: block; padding: 4px 0; }
    .v4-foot a:hover { color: var(--zenda-magenta); }
  
/* ==== Use case — Transformation ==== */

    /* Force TWK Lausanne everywhere (overrides mono fallback) */
    :root { --font-mono: 'TWK Lausanne', system-ui, sans-serif; }
    body { background: #fff; color: var(--zenda-black); }
    .uc-eyebrow {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--slate-500);
    }
    .uc-eyebrow .dot {
      display: inline-block; width: 7px; height: 7px; border-radius: 50%;
      background: var(--zenda-magenta); margin-right: 8px; vertical-align: middle;
    }

    /* HERO — full bleed transformation imagery */
    .uc-hero {
      position: relative; min-height: 760px; overflow: hidden;
      display: flex; align-items: flex-end;
      padding: 0 max(64px, calc((100% - 1280px) / 2)) 80px;
      color: #fff; background: #1A0008;
    }
    .uc-hero__bg {
      position: absolute; inset: 0;
      background: url('/assets/use-transformation-hero.avif') 50% 15%/cover no-repeat;
      filter: contrast(1.02);
    }
    .uc-hero__veil {
      position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 28%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.0) 65%);
    }
    .uc-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; }
    .uc-hero__crumb { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 16px rgba(0,0,0,0.4); margin-bottom: 32px; display: flex; align-items: center; gap: 10px; }
    .uc-hero__crumb a { color: #fff; transition: color 120ms; white-space: nowrap; }
    .uc-hero__crumb a:hover { color: #fff; }
    .uc-hero__crumb .sep { color: rgba(255,255,255,0.7); }
    .uc-hero__crumb b { color: var(--zenda-magenta); font-weight: 600; letter-spacing: 0.18em; white-space: nowrap; }

    .uc-hero h1 {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-weight: 200;
      font-size: clamp(44px, 31px + 3.4vw, 80px); line-height: 1.02; letter-spacing: -0.035em;
      margin: 0; color: #fff; max-width: 22ch; text-wrap: balance;
    }
    .uc-hero h1 strong { font-weight: 900; }
    .uc-hero h1 .hi {
      display: inline; padding: 0.02em 0.18em 0.08em; margin: 0 0.04em 0 0;
      color: #0A0A0A; background: var(--zenda-magenta);
      font-weight: 700; line-height: 1.12;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    .uc-hero__sub {
      margin: 28px 0 0; font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.45; max-width: 44ch;
      color: rgba(255,255,255,0.88); letter-spacing: -0.005em;
    }
    .uc-hero__cta { display: flex; gap: 14px; margin-top: 36px; }

    /* INTRO STATS — under hero */
    .uc-stats {
      padding: 0 64px; max-width: 1280px; margin: -56px auto 0; position: relative; z-index: 5;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      background: #fff; border: 1px solid var(--slate-100); border-radius: 6px;
      box-shadow: var(--shadow-md);
    }
    .uc-stat { padding: 28px 32px; border-right: 1px solid var(--slate-100); }
    .uc-stat:last-child { border-right: 0; }
    .uc-stat .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); }
    .uc-stat .val { font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 10px 0 6px; color: var(--zenda-black); }
    .uc-stat .val .pct { font-size: clamp(19px, 17.14px + 0.476vw, 24px); vertical-align: baseline; color: var(--zenda-magenta); font-weight: 600; margin-left: 2px; }
    .uc-stat .cap { font-size: 12px; line-height: 1.45; color: var(--slate-700); max-width: 32ch; }

    /* PROBLEM SECTION */
    .uc-problem { padding: 160px 64px 120px; max-width: 1408px; margin: 0 auto; }
    .uc-problem__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .uc-problem h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 12px 0 0; max-width: 16ch;
    }
    .uc-problem h2 .accent { color: var(--zenda-magenta); }
    .uc-problem__col p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0 0 22px; max-width: 52ch; }
    .uc-problem__col p:last-child { margin-bottom: 0; }
    .uc-problem__col p strong { color: var(--zenda-black); font-weight: 600; }

    /* STEPS — three alternating rows -->
       (matches the v4 site's How It Works language) */
    .uc-steps { padding: 120px 64px 80px; background: #fff; border-top: 1px solid var(--slate-100); }
    .uc-steps__inner { max-width: 1280px; margin: 0 auto; }
    .uc-steps__head { margin-bottom: 56px; max-width: 720px; }
    .uc-steps__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 12px 0 0;
    }
    .uc-steps__head h2 .accent { color: var(--zenda-magenta); }

    /* DYNAMIC STEPS — clickable step list + one shared crossfading visual.
       Rebuilds the live site's interaction (select a step, the panel swaps),
       cleaned up: vertical accordion left, sticky media right. */
    .uc-steps__layout {
      display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 72px; align-items: start;
    }

    /* left — vertical accordion list of steps */
    .uc-steps__list { border-top: 1px solid var(--slate-200); }
    .uc-step {
      display: block; width: 100%; text-align: left; cursor: pointer;
      background: transparent; border: 0; border-bottom: 1px solid var(--slate-200);
      padding: 30px 8px 30px 28px; position: relative; font: inherit;
    }
    /* progress rail on the left edge */
    .uc-step::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--slate-200);
    }
    .uc-step::after {
      content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--zenda-magenta);
    }
    .uc-step[aria-expanded="true"]::after { animation: ucStepFill var(--uc-step-dur, 7s) linear forwards; }
    @keyframes ucStepFill { from { height: 0; } to { height: 100%; } }

    .uc-step__head { display: flex; align-items: baseline; gap: 16px; }
    .uc-step__num {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
      color: var(--slate-400); flex: none; width: 84px; padding-top: 7px;
      transition: color 240ms ease;
    }
    .uc-step__title {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em;
      color: var(--slate-400); margin: 0; max-width: none; transition: color 280ms ease;
    }
    .uc-step[aria-expanded="true"] .uc-step__num { color: var(--zenda-magenta); }
    .uc-step[aria-expanded="true"] .uc-step__title { color: var(--zenda-black); }
    .uc-step:hover .uc-step__title { color: var(--slate-700); }
    .uc-step[aria-expanded="true"]:hover .uc-step__title { color: var(--zenda-black); }

    /* collapsible description */
    .uc-step__body {
      display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
      transition: grid-template-rows 380ms ease, opacity 300ms ease, margin-top 380ms ease;
    }
    .uc-step__body > div { overflow: hidden; }
    .uc-step__body p {
      font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700);
      margin: 0; max-width: 46ch; padding-left: 0;
    }
    .uc-step[aria-expanded="true"] .uc-step__body { grid-template-rows: 1fr; opacity: 1; margin-top: 18px; }

    /* inline per-step image — desktop hides it (shared stage handles visuals) */
    .uc-step__media-m { display: none; }

    /* right — one shared visual that crossfades between steps.
       Sits directly on a white ground (no boxed chrome) to match the imagery. */
    .uc-steps__media {
      position: sticky; top: 96px; aspect-ratio: 4/3; background: #fff;
    }
    .uc-steps__media .frame {
      position: absolute; inset: 0; opacity: 0; transform: scale(1.025);
      transition: opacity 600ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
      pointer-events: none;
    }
    .uc-steps__media .frame.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
    .uc-steps__media .frame > img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

    @media (prefers-reduced-motion: reduce) {
      .uc-step__body { transition: opacity 200ms ease; }
      .uc-steps__media .frame { transition: opacity 200ms ease; transform: none; }
      .uc-step[aria-expanded="true"]::after { animation: none; height: 100%; }
    }

    /* ---- MOBILE PATTERN ----
       Below 760px the split layout collapses to one vertical flow: the sticky
       shared stage is dropped and each step reveals its own image inline as it
       opens. (Requires the page viewport meta to be device-width to engage on
       a real phone — see note in the build.) */
    @media (max-width: 760px) {
      .uc-steps { padding: 72px 24px 56px; }
      .uc-steps__layout { grid-template-columns: 1fr; gap: 0; }
      .uc-steps__media { display: none; }            /* drop the desktop stage */

      .uc-step { padding: 24px 4px 24px 22px; }
      .uc-step__head { flex-direction: column; gap: 6px; }
      .uc-step__num { width: auto; padding-top: 0; }
      .uc-step__title { font-size: 25px; max-width: none; }

      /* description + inline image stack full-width, no desktop indent */
      .uc-step__body p { padding-left: 0; max-width: none; }
      .uc-step__media-m {
        display: block; margin-top: 18px; border-radius: 8px; overflow: hidden;
        background: var(--slate-50); aspect-ratio: 4 / 3;
      }
      .uc-step__media-m img { width: 100%; height: 100%; object-fit: contain; display: block; }
    }

    /* OUTCOMES — 4 outcome cards */
    .uc-outcomes { padding: 120px 64px; background: #fff; border-top: 1px solid var(--slate-100); }
    .uc-outcomes__inner { max-width: 1280px; margin: 0 auto; }
    .uc-outcomes__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px; }
    .uc-outcomes__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 12px 0 0;
    }
    .uc-outcomes__head p { margin: 0; color: var(--slate-700); font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; max-width: 48ch; }
    .uc-outcomes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--zenda-black); }
    .uc-outcome {
      padding: 32px 24px 32px 0;
      border-right: 1px dashed var(--slate-200);
      display: flex; flex-direction: column; gap: 14px;
      min-height: 220px;
    }
    .uc-outcome + .uc-outcome { padding-left: 24px; }
    .uc-outcome:last-child { border-right: 0; }
    .uc-outcome .v {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em;
    }
    .uc-outcome .v .pct { font-size: 22px; vertical-align: baseline; color: var(--zenda-magenta); font-weight: 600; margin-left: 2px; }
    .uc-outcome .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zenda-magenta); font-weight: 600; }
    .uc-outcome p { margin: auto 0 0; font-size: 12px; line-height: 1.5; color: var(--slate-700); }

    /* QUOTE — black band */
    .uc-quote { padding: 140px 64px; background: #0A0A0A; color: #fff; text-align: center; }
    .uc-quote__inner { max-width: 1100px; margin: 0 auto; }
    .uc-quote__inner .uc-eyebrow { color: rgba(255,255,255,0.6); }
    .uc-quote p {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 200;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); line-height: 1.18; letter-spacing: -0.025em;
      max-width: 24ch; margin: 24px auto 0;
    }
    .uc-quote p .mark { color: var(--zenda-magenta); font-weight: 900; }

    /* RESOURCES */
    .uc-resources { padding: 140px 64px 80px; background: #fff; border-top: 1px solid var(--slate-100); }
    .uc-resources__inner { max-width: 1280px; margin: 0 auto; }
    .uc-resources__head { margin-bottom: 48px; }
    .uc-resources__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 12px 0 0;
    }
    .uc-resources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .uc-resource {
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 28px; border: 1px solid var(--slate-200); border-radius: 0;
      min-height: 260px; text-decoration: none; color: inherit; background: #fff;
      transition: border-color 200ms, transform 200ms;
      position: relative; overflow: hidden;
    }
    .uc-resource:hover { border-color: var(--zenda-magenta); transform: translateY(-2px); }
    .uc-resource .tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); }
    .uc-resource h3 {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em;
      margin: 16px 0 0; max-width: 28ch;
    }
    .uc-resource .arrow {
      display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
      font-size: 12px; font-weight: 600; color: var(--zenda-black);
    }
    .uc-resource .arrow::after { content: "↗"; color: var(--zenda-magenta); font-weight: 400; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1; }

    /* PIONEERS / CTA */
    .uc-cta {
      padding: 160px 64px 200px; background: var(--zenda-magenta); color: #0A0A0A; text-align: center;
      position: relative; overflow: hidden;
    }
    .uc-cta h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.95; letter-spacing: -0.045em; margin: 16px 0 32px;
      max-width: 14ch; margin-inline: auto;
    }
    .uc-cta h2 em { font-style: italic; font-weight: 200; }
    .uc-cta p { font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.35; max-width: 40ch; margin: 0 auto 32px; color: #0A0A0A; }

    .uc-foot {
      padding: 48px 64px; border-top: 1px solid var(--slate-100);
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); background: #fff;
    }
    .uc-foot strong { color: var(--zenda-black); display: block; margin-bottom: 12px; font-weight: 600; }
    .uc-foot a { display: block; padding: 4px 0; }
    .uc-foot a:hover { color: var(--zenda-magenta); }
  
/* ==== Security ==== */

    .se-eyebrow {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--slate-500);
      display: inline-flex; align-items: center; gap: 9px;
    }
    .se-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zenda-magenta); }

    /* HERO */
    .se-hero { padding: 164px 64px 120px; max-width: 1408px; margin: 0 auto; }
    .se-hero h1 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 22px 0 0; max-width: 22ch;
    }
    .se-hero h1 .accent { color: var(--zenda-magenta); }
    .se-hero__lead { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); max-width: 62ch; margin: 30px 0 40px; }

    /* SOC 2 band */
    .se-soc { padding: 120px 64px; background: var(--slate-50); border-top: 1px solid var(--slate-100); }
    .se-soc__inner {
      max-width: 1280px; margin: 0 auto; display: grid;
      grid-template-columns: 0.9fr 1.1fr; gap: 88px; align-items: center;
    }
    .se-soc__fig img { width: 100%; height: auto; border-radius: 8px; }
    .se-soc h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 14ch;
    }
    .se-soc p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 26px 0 0; max-width: 56ch; }

    /* CONTROLS GRID */
    .se-controls { padding: 130px 64px 150px; max-width: 1408px; margin: 0 auto; }
    .se-controls__head { max-width: 720px; margin-bottom: 56px; }
    .se-controls__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 16ch;
    }
    .se-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--zenda-black); }
    .se-item {
      padding: 34px 32px 44px 0; border-right: 1px dashed var(--slate-200);
      border-bottom: 1px solid var(--slate-100); min-height: 250px;
    }
    .se-item:nth-child(3n) { border-right: 0; }
    .se-item:nth-child(n+4) { padding-top: 34px; }
    .se-item + .se-item { padding-left: 32px; }
    .se-item:nth-child(3n+1) { padding-left: 0; }
    .se-item .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--zenda-magenta); font-weight: 600; }
    .se-item h3 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(22px, 20.5px + 0.4vw, 26px); letter-spacing: -0.02em; line-height: 1.15; margin: 16px 0 12px;
    }
    .se-item p { font-size: clamp(15px, 14.6px + 0.1vw, 16px); line-height: 1.55; color: var(--slate-700); margin: 0; }

    /* FOOTER (shared) */
    .se-foot {
      padding: 48px 64px; border-top: 1px solid var(--slate-100);
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); background: #fff;
    }
    .se-foot strong { color: var(--zenda-black); display: block; margin-bottom: 12px; font-weight: 600; }
    .se-foot a { display: block; padding: 4px 0; }
    .se-foot a:hover { color: var(--zenda-magenta); }
  
/* ==== About ==== */

    body { background: #fff; color: var(--zenda-black); }

    .ab-eyebrow {
      font-family: 'TWK Lausanne', system-ui, sans-serif;
      font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--slate-500);
      display: inline-flex; align-items: center; gap: 9px;
    }
    .ab-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zenda-magenta); }

    /* shared striped image placeholders (drop real imagery in later) */
    .ab-ph {
      position: relative; overflow: hidden; background: var(--slate-50);
      background-image: repeating-linear-gradient(135deg, transparent 0 13px, rgba(92,114,128,0.05) 13px 14px);
      border: 1px solid var(--slate-100);
      display: flex; align-items: flex-end;
    }
    .ab-ph span {
      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--slate-400);
      padding: 12px 14px;
    }

    section { scroll-margin-top: 88px; }

    /* shared real image */
    .ab-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }

    /* ---------- HERO ---------- */
    .ab-hero {
      padding: 164px 64px 130px; max-width: 1408px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 0.82fr; gap: 72px; align-items: center;
    }
    .ab-hero h1 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 1; letter-spacing: -0.04em;
      margin: 22px 0 0; max-width: 13ch;
    }
    .ab-hero h1 .accent { color: var(--zenda-magenta); }
    .ab-hero__lead {
      font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700);
      max-width: 52ch; margin: 28px 0 0; letter-spacing: -0.005em;
    }
    .ab-hero__lead em { font-style: italic; color: var(--zenda-black); }
    .ab-hero__fig { aspect-ratio: 4 / 5; }
    .ab-hero__fig img { object-position: 92% center; }
    .ab-hero__fig .ab-ph { width: 100%; height: 100%; border-radius: 8px; }

    /* ---------- TWO-COLUMN PROSE (How we started) ---------- */
    .ab-started { padding: 140px 64px; background: var(--slate-50); border-top: 1px solid var(--slate-100); }
    .ab-started__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 96px; align-items: start; }
    .ab-started h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 16ch; text-wrap: balance;
    }
    .ab-started h2 .reg { font-size: 0.4em; vertical-align: 1.1em; font-weight: 600; }
    .ab-started__sub { margin: 28px 0 0; font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.35; color: var(--zenda-black); max-width: 30ch; text-wrap: pretty; }
    .ab-started__body p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 0 0 24px; max-width: 56ch; }
    .ab-started__body p:last-child { margin-bottom: 0; }
    .ab-started__body strong { color: var(--zenda-black); font-weight: 600; }
    .ab-started__body .reg { font-size: 0.62em; vertical-align: super; }

    /* ---------- LEADERSHIP ---------- */
    .ab-lead { padding: 140px 64px; max-width: 1408px; margin: 0 auto; }
    .ab-lead__head { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 96px; align-items: end; margin-bottom: 64px; }
    .ab-lead__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 14ch;
    }
    .ab-lead__head p { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); max-width: 60ch; }
    .ab-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
    .ab-member { cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; }
    .ab-member__photo { width: 90%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; }
    .ab-member__photo .ab-ph, .ab-member__photo .ab-img { width: 100%; height: 100%; }
    .ab-member__photo img { object-position: center 20%; }
    .ab-member h3 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 600;
      font-size: clamp(22px, 20.5px + 0.4vw, 26px); letter-spacing: -0.015em; margin: 20px 0 4px;
    }
    .ab-member .role { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.3; color: var(--zenda-magenta); font-weight: 600; }
    .ab-member .more {
      display: inline-flex; justify-self: start; align-items: center; gap: 8px; margin-top: 12px;
      font-size: clamp(16px, 15.26px + 0.190vw, 18px); font-weight: 600; color: var(--zenda-black); transition: color 160ms;
    }
    .ab-member .more::after { content: "→"; color: var(--zenda-magenta); }
    .ab-member:hover .more { color: var(--zenda-magenta); }

    /* bio modal */
    .ab-modal { position: fixed; inset: 0; z-index: 100; display: none; }
    .ab-modal[data-open="true"] { display: block; }
    .ab-modal__backdrop { position: absolute; inset: 0; background: rgba(10,12,14,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .ab-modal__panel {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 760px; max-width: calc(100vw - 64px); background: #fff; border-radius: 12px;
      box-shadow: var(--shadow-lg); overflow: hidden;
      display: grid; grid-template-columns: 300px 1fr;
    }
    .ab-modal__photo {
      background: var(--slate-50);
      background-image: repeating-linear-gradient(135deg, transparent 0 13px, rgba(92,114,128,0.05) 13px 14px);
      display: flex; align-items: flex-end;
    }
    .ab-modal__photo span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); padding: 12px 14px; }
    .ab-modal__body { padding: 44px 44px 48px; position: relative; }
    .ab-modal__role { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zenda-magenta); font-weight: 600; }
    .ab-modal__body h3 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); letter-spacing: -0.03em; margin: 10px 0 20px;
    }
    .ab-modal__bio { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 0; }
    .ab-modal__close {
      position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
      border: 1px solid var(--slate-200); background: #fff; display: inline-flex; align-items: center;
      justify-content: center; font-size: 15px; color: var(--slate-600); transition: border-color 160ms, color 160ms;
    }
    .ab-modal__close:hover { border-color: var(--zenda-magenta); color: var(--zenda-magenta); }

    /* ---------- ZENDERS ---------- */
    .ab-zenders { padding: 140px 64px; background: var(--slate-50); border-top: 1px solid var(--slate-100); }
    .ab-zenders__inner { max-width: 1280px; margin: 0 auto; }
    .ab-zenders__head { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 96px; align-items: end; margin-bottom: 56px; }
    .ab-zenders__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 14ch;
    }
    .ab-zenders__head p { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); max-width: 62ch; }
    .ab-gallery { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ab-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 6px; filter: grayscale(1); }
    @media (max-width: 560px) { .ab-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
    .ab-gallery--mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, clamp(110px, 14vw, 210px)); gap: 12px; }
    .ab-gallery--mosaic img { height: 100%; aspect-ratio: auto; }
    @media (max-width: 760px) { .ab-gallery--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; gap: 8px; } .ab-gallery--mosaic img { grid-area: auto !important; } .ab-gallery--mosaic img:first-child { grid-column: 1 / -1 !important; grid-row: span 2 !important; } }
    .ab-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(5, clamp(140px, 15vw, 230px)); gap: 12px; }
    .ab-collage > div { min-width: 0; overflow: hidden; border-radius: 6px; }
    .ab-collage .ab-ph, .ab-collage .ab-img { width: 100%; height: 100%; border-radius: 6px; }
    .ab-collage .c1 { grid-area: 1 / 1 / 3 / 6; }
    .ab-collage .c2 { grid-area: 1 / 6 / 2 / 10; }
    .ab-collage .c3 { grid-area: 1 / 10 / 3 / 13; }
    .ab-collage .c4 { grid-area: 2 / 6 / 3 / 10; }
    .ab-collage .c5 { grid-area: 3 / 1 / 4 / 5; }
    .ab-collage .c6 { grid-area: 3 / 5 / 4 / 8; }
    .ab-collage .c7 { grid-area: 3 / 8 / 4 / 13; }
    .ab-collage .c8 { grid-area: 4 / 1 / 6 / 4; }
    .ab-collage .c9 { grid-area: 4 / 4 / 5 / 8; }
    .ab-collage .c10 { grid-area: 4 / 8 / 5 / 13; }
    .ab-collage .c11 { grid-area: 5 / 4 / 6 / 9; }
    .ab-collage .c12 { grid-area: 5 / 9 / 6 / 11; }
    .ab-collage .c13 { grid-area: 5 / 11 / 6 / 13; }
    .ab-collage img { filter: grayscale(1); }
    .ab-collage .c7 img { object-position: center 28%; }
    .ab-collage .c10 img { object-position: center 40%; }
    .ab-collage .c11 img { object-position: center 35%; }
    .ab-collage .c8 img { object-position: center 30%; }
    .ab-collage .c5 img { object-position: center 15%; }

    /* ---------- MISSION ---------- */
    .ab-mission { padding: 140px max(64px, calc((100% - 1280px) / 2)); background: var(--zenda-black); color: #fff; }
    .ab-mission__head { max-width: 760px; }
    .ab-mission__head h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.04em; margin: 14px 0 0; max-width: 16ch;
    }
    .ab-mission__body { display: block; columns: 2; column-gap: 64px; margin-top: 56px; }
    .ab-mission__body p + p { margin-top: 1.2em; }
    .ab-mission__body p { break-inside: avoid; }
    .ab-mission__body p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 0; }
    .ab-mission__body p strong { color: var(--zenda-black); font-weight: 600; }
    .ab-mission__body .reg { font-size: 0.62em; vertical-align: super; }

    /* four pillars */
    .ab-pillars { max-width: 1408px; margin: 0 auto; padding: 0 64px 140px; }
    .ab-pillars__lead { max-width: 720px; margin-bottom: 40px; }
    .ab-pillars__lead h3 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); letter-spacing: -0.025em; margin: 10px 0 12px;
    }
    .ab-pillars__lead p { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); max-width: 56ch; }
    .ab-pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--zenda-black); }
    .ab-pillar { padding: 32px 28px 36px 0; border-right: 1px dashed var(--slate-200); min-height: 220px; display: flex; flex-direction: column; }
    .ab-pillar + .ab-pillar { padding-left: 28px; }
    .ab-pillar:last-child { border-right: 0; }
    .ab-pillar .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--zenda-magenta); font-weight: 600; }
    .ab-pillar h4 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(27px, 24.40px + 0.667vw, 34px); letter-spacing: -0.025em; margin: 18px 0 14px;
    }
    .ab-pillar p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; color: var(--slate-700); margin: auto 0 0; }

    /* ---------- PARTNERSHIP (compact credit strip) ---------- */
    .ab-partner { padding: 44px 64px; background: var(--slate-50); border-top: 1px solid var(--slate-100); }
    .ab-partner__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
    .ab-partner p { font-size: 12px; line-height: 1.55; color: var(--slate-700); margin: 10px 0 0; max-width: 70ch; }
    .ab-partner p strong { color: var(--zenda-black); font-weight: 600; }
    .ab-partner__logo .ab-ph { width: 190px; aspect-ratio: 16 / 6; border-radius: 6px; background: #fff; }

    /* ---------- CTA ---------- */
    .ab-cta { padding: 150px 64px 170px; background: #0A0A0A; color: #fff; text-align: center; }
    .ab-cta .ab-eyebrow { color: rgba(255,255,255,0.6); }
    .ab-cta h2 {
      font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900;
      font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.95; letter-spacing: -0.045em; margin: 18px 0 36px;
    }
    .ab-cta h2 em { font-style: italic; font-weight: 200; color: var(--zenda-magenta); }

    /* ---------- FOOTER ---------- */
    .ab-foot {
      padding: 48px 64px; border-top: 1px solid var(--slate-100);
      display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); background: #fff;
    }
    .ab-foot strong { color: var(--zenda-black); display: block; margin-bottom: 12px; font-weight: 600; }
    .ab-foot a { display: block; padding: 4px 0; }
    .ab-foot a:hover { color: var(--zenda-magenta); }

/* impact stepper wrapper: transparent on desktop, becomes the phone stepper in responsive.css */
.v4-impact__stepper { display: contents; }
.v4-impact__step { display: none; }

@media (max-width: 1100px) {
  /* bars only; the slide title names the industry */
  .v4-impact__head { margin-bottom: 24px; }
  .v4-impact__pager { align-items: center; margin-bottom: 0; }
  .v4-impact__count { padding-top: 0; }
  .v4-impact__ticks { padding-bottom: 0; }
  .v4-impact__tick { gap: 0; padding: 12px 0; }
  .v4-impact__tick .tick-label { display: none !important; }
  .v4-impact__stage { padding-top: 32px; min-height: 0; }
  .v4-slide { display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important; inset: 32px 0 0 0; }
  .v4-slide__right { display: contents; }
  .v4-slide__right > * { order: 1; }
  .v4-slide__right > h3 { order: -1; margin: 0 0 20px; max-width: none; }
  .v4-slide__left { order: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
  .v4-slide__num { font-size: clamp(64px, 48px + 4vw, 104px); }
  .v4-slide__num .pct { font-size: 0.4em; vertical-align: baseline; }
  .v4-slide__cap { margin: 0; font-size: clamp(20px, 18.5px + 0.4vw, 24px); max-width: 18ch; }
}

/* SPEED — minutes, not months */
.v4-speed { padding: 120px 64px; background: #fff; border-top: 1px solid var(--slate-100); }
.v4-speed__inner { max-width: 1280px; margin: 0 auto; }
.v4-speed__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; margin-bottom: 72px; }
.v4-speed h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 0; color: var(--zenda-black); max-width: 16ch; text-wrap: balance; }
.v4-post__sub { margin-top: 40px; font-size: clamp(18px, 16px + 0.5vw, 24px); max-width: 52ch; }
.v4-speed h2 .accent { color: var(--zenda-magenta); }
.v4-speed__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--zenda-black); }
.v4-speed__cols > div { padding: 32px 40px 0 0; }
.v4-speed__cols > div + div { padding-left: 40px; border-left: 1px solid var(--slate-100); }
.v4-speed__cols h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 17px + 0.3vw, 22px); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 14px; color: var(--zenda-black); }
.v4-speed__cols p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 0; max-width: 42ch; text-wrap: pretty; }
@media (max-width: 1024px) {
  .v4-speed { padding: 96px 40px; }
  .v4-speed__cols > div { padding-right: 24px; }
  .v4-speed__cols > div + div { padding-left: 24px; }
}
@media (max-width: 760px) {
  .v4-speed { padding: 72px 20px; }
  .v4-speed__head { margin-bottom: 48px; }
  .v4-speed__cols { grid-template-columns: 1fr; }
  .v4-speed__cols > div, .v4-speed__cols > div + div { padding: 28px 0; border-left: 0; }
  .v4-speed__cols > div + div { border-top: 1px solid var(--slate-100); }
}

.v4-layer h2 { max-width: 22ch; }
.v4-post h2 { max-width: none; font-size: clamp(48px, 34px + 3.6vw, 104px); line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
.v4-post__sub { margin-top: 40px; font-size: clamp(18px, 16px + 0.5vw, 24px); max-width: 52ch; }
.v4-layer__icon { display: block; width: 48px; height: 48px; margin-bottom: 24px; color: var(--slate-300, #A3B1BB); }
.v4-layer__sub { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0; max-width: 62ch; text-wrap: pretty; }
.v4-layer .v4-speed__cols .v4-eyebrow { display: block; margin-bottom: 14px; }
.v4-layer .v4-layer__zenda { box-shadow: inset 0 3px 0 var(--zenda-black); }
.v4-layer .v4-layer__zenda .v4-eyebrow { color: var(--zenda-black); }
.v4-layer .v4-speed__head { margin-bottom: 0; }
.v4-layer { overflow-x: clip; }
.v4-layer__band { margin: 24px calc(50% - 50vw) 32px; pointer-events: none; }
.v4-layer__band img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .v4-layer__band { margin-top: 8px; margin-bottom: 16px; } }
.v4-layer .v4-speed__cols { border-top: 0; }
.v4-layer .v4-speed__cols > div { padding-top: 0; }
.v4-layer .v4-layer__zenda .v4-layer__icon { color: var(--zenda-black); }
.v4-layer .v4-speed__cols > div:not(.v4-layer__zenda) h3 { color: var(--slate-500); }
.v4-layer .v4-layer__zenda { box-shadow: none; }
@media (max-width: 760px) { .v4-layer .v4-speed__cols > div + div { border-top: 0; } }
.v4-speed__head.v4-layer__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.v4-layer__headtext { display: flex; flex-direction: column; gap: 32px; }
.v4-pmq { margin: 0; padding: 32px; background: var(--slate-50, #F4F6F8); display: flex; flex-direction: column; gap: 28px; }
.v4-pmq blockquote { margin: 20px 0 24px; padding: 0; border: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 18px + 0.8vw, 30px); line-height: 1.25; letter-spacing: -0.02em; color: var(--zenda-black); text-wrap: pretty; max-width: 30ch; }
.v4-pmq blockquote em { font-style: normal; font-weight: 900; }
.v4-pmq figcaption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); }
.v4-pmq__graphic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v4-pmq__panel { border: 2.5px solid var(--slate-300, #A3B1BB); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 160px; background: #fff; }
.v4-pmq__panel--why { border-style: dashed; border-color: var(--zenda-black); }
.v4-pmq__label { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.02em; color: var(--slate-300, #A3B1BB); }
.v4-pmq__panel--why .v4-pmq__label { color: var(--zenda-black); }
.v4-pmq__log { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; flex: 1; align-content: start; }
.v4-pmq__log i { display: block; height: 2px; background: var(--slate-300, #A3B1BB); min-width: 24px; }
.v4-pmq__log i:nth-child(odd) { width: 32px !important; }
.v4-pmq__empty { flex: 1; }
.v4-pmq__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); }
.v4-pmq__panel--why .v4-pmq__meta { color: var(--zenda-black); }
@media (max-width: 1024px) { .v4-speed__head.v4-layer__head { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 760px) { .v4-pmq { padding: 24px; } }

.v4-how__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--zenda-black); }
.v4-how__steps > div { padding: 32px 48px 0 0; }
.v4-how__steps > div + div { padding: 32px 0 0 48px; border-left: 1px solid var(--slate-100); }
.v4-how__steps .v4-eyebrow { color: var(--zenda-magenta); }
.v4-how__steps h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 19px + 0.6vw, 28px); letter-spacing: -0.015em; line-height: 1.2; margin: 12px 0 14px; color: var(--zenda-black); }
.v4-how__steps p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); margin: 0; max-width: 52ch; text-wrap: pretty; }
@media (max-width: 760px) {
  .v4-how__steps { grid-template-columns: 1fr; margin-top: 40px; }
  .v4-how__steps > div, .v4-how__steps > div + div { padding: 28px 0; border-left: 0; }
  .v4-how__steps > div + div { border-top: 1px solid var(--slate-100); }
}

.zbtn { white-space: nowrap; }

/* USE CASES index */
.ucx-inner { max-width: 1280px; margin: 0 auto; }
.ucx-head { padding: 180px 64px 72px; border-bottom: 1px solid var(--slate-100); }
.ucx-crumb, .ucx-crumb a { color: var(--slate-500); text-shadow: none; }
.ucx-crumb b { color: var(--zenda-black); }
.ucx-crumb a:hover { color: var(--zenda-magenta); }
.ucx-crumb .sep { color: var(--slate-200); }
.ucx-head h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.95; letter-spacing: -0.04em; margin: 0; color: var(--zenda-black); }
.ucx-head p { margin: 24px 0 0; font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.35; color: var(--slate-700); max-width: 44ch; }
.ucx-list { padding: 72px 64px 140px; }
.ucx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ucx-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; min-height: 280px; border: 1px solid var(--slate-100); border-radius: 8px; background: #fff; color: var(--zenda-black); transition: border-color 200ms var(--ease-standard); }
.ucx-card:hover { border-color: var(--zenda-black); }
.ucx-card img { width: 40px; height: 40px; margin-bottom: 20px; }
.ucx-card h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 19px + 0.6vw, 28px); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.ucx-card p { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; color: var(--slate-700); margin: 0; max-width: 32ch; }
.ucx-more { margin-top: auto; padding-top: 20px; font-size: clamp(16px, 15.26px + 0.190vw, 18px); font-weight: 600; display: inline-flex; gap: 8px; }
.ucx-card:hover .ucx-more { color: var(--zenda-magenta); }
@media (max-width: 1024px) { .ucx-head, .ucx-list { padding-left: 40px; padding-right: 40px; } .ucx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ucx-head { padding: 120px 20px 48px; } .ucx-list { padding: 40px 20px 80px; } .ucx-grid { grid-template-columns: 1fr; } .ucx-card { min-height: 0; padding: 24px; } }

/* FOOTER (shared, matches current site) */
.zfoot { padding: 72px max(64px, calc((100% - 1280px) / 2)) 32px; border-top: 1px solid var(--slate-100); background: #fff; color: var(--zenda-black); }
.zfoot__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; padding-bottom: 56px; }
.zfoot__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.zfoot__logo img { height: 28px; width: auto; display: block; }
.zfoot__social { display: flex; gap: 16px; align-items: center; }
.zfoot__social img { height: 20px; width: auto; display: block; }
.zfoot__social a:hover { opacity: 0.6; }
.zfoot__locs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.zfoot__locs strong { display: block; font-size: clamp(16px, 15.26px + 0.190vw, 18px); font-weight: 600; margin-bottom: 10px; }
.zfoot__locs span, .zfoot__locs a { display: block; font-size: 14px; line-height: 1.5; color: var(--slate-700); }
.zfoot__locs a:hover { color: var(--zenda-magenta); }
.zfoot__contact { display: flex; flex-direction: column; gap: 24px; }
.zfoot__bottom { padding-top: 24px; font-size: 14px; color: var(--slate-500); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.zfoot__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.zfoot__legal a { color: var(--slate-500); }
.zfoot__legal a:hover { color: var(--zenda-magenta); }
@media (max-width: 1024px) {
  .zfoot { padding-left: 40px; padding-right: 40px; }
  .zfoot__inner { grid-template-columns: 1fr; }
  .zfoot__brand { flex-direction: row; align-items: center; }
}
@media (max-width: 760px) {
  .zfoot { padding: 56px 20px 24px; }
  .zfoot__locs { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* POLICY pages */
.pol-head h1 { font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; max-width: none; text-wrap: balance; }
.v4-post__sub { margin-top: 40px; font-size: clamp(18px, 16px + 0.5vw, 24px); max-width: 52ch; }
.pol-body { padding: 72px 64px 140px; }
.pol-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 80px; align-items: start; }
.pol-side { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 40px; }
.pol-dates { margin: 0; display: grid; gap: 20px; }
.pol-dates dt { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.pol-dates dd { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); color: var(--zenda-black); font-weight: 600; }
.pol-doc { max-width: 72ch; }
.pol-doc a { color: var(--zenda-black); text-decoration: underline; text-decoration-color: var(--zenda-magenta); text-underline-offset: 3px; }
.pol-intro { font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.4; color: var(--zenda-black); margin: 0 0 48px; }
.pol-intro strong { font-weight: 600; }
.pol-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zenda-black); }
.pol-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--slate-100); }
.pol-n { font-size: 12px; letter-spacing: 0.16em; color: var(--slate-500); padding-top: 5px; font-variant-numeric: tabular-nums; }
.pol-list p { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); text-wrap: pretty; }
.pol-addr { font-style: normal; margin-top: 16px; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; color: var(--zenda-black); }
@media (max-width: 1024px) { .pol-body { padding-left: 40px; padding-right: 40px; } .pol-grid { grid-template-columns: 1fr; gap: 40px; } .pol-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 32px; } }
@media (max-width: 760px) { .pol-body { padding: 40px 20px 80px; } .pol-list li { grid-template-columns: 1fr; gap: 6px; } }

/* policy rich text */
.pol-rich { counter-reset: polli; }
.pol-rich > p:first-child { font-size: clamp(20px, 18.5px + 0.4vw, 24px); line-height: 1.4; color: var(--zenda-black); margin: 0 0 48px; }
.pol-rich p { margin: 0 0 16px; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); text-wrap: pretty; }
.pol-rich strong { font-weight: 600; color: var(--zenda-black); }
.pol-rich h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 19px + 0.6vw, 28px); letter-spacing: -0.015em; line-height: 1.2; margin: 48px 0 16px; color: var(--zenda-black); }
.pol-rich h3 { font-weight: 600; font-size: clamp(16px, 15.26px + 0.190vw, 18px); margin: 32px 0 12px; color: var(--zenda-black); }
.pol-rich ul { margin: 0 0 16px; padding-left: 1.2em; }
.pol-rich ul li { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin-bottom: 8px; }
.pol-rich ol { list-style: none; margin: 0 0 32px; padding: 0; }
.pol-rich ol > li { counter-increment: polli; position: relative; padding: 12px 0 12px 64px; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); text-wrap: pretty; }
.pol-rich ol > li::before { content: counter(polli, decimal-leading-zero); position: absolute; left: 0; top: 17px; font-size: 12px; letter-spacing: 0.16em; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.pol-rich address { font-style: normal; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.5; color: var(--zenda-black); }
@media (max-width: 760px) { .pol-rich ol > li { padding-left: 0; padding-top: 36px; } .pol-rich ol > li::before { top: 12px; } }

/* eyebrow: one style site-wide */
.v4-eyebrow, .uc-eyebrow, .se-eyebrow, .ab-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); display: inline-block; }

.ab-mission .ab-mission__head h2 { color: #fff; }
.ab-mission .ab-mission__body p { color: rgba(255,255,255,0.86); }
.ab-mission .ab-mission__body p strong { color: #fff; }

.uc-steps__head .uc-eyebrow { font-size: clamp(20px, 18.5px + 0.4vw, 24px); letter-spacing: -0.01em; text-transform: none; font-weight: 600; color: var(--zenda-black); }

/* ==== Schedule a demo ==== */
.sd { max-width: 1408px; margin: 0 auto; padding: 164px 64px 120px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.sd__copy { position: sticky; top: 120px; }
.sd h1 { font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 900; font-size: clamp(48px, 34px + 3.6vw, 88px); line-height: 1; letter-spacing: -0.04em; margin: 0; max-width: 12ch; }
.sd__lead { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.55; color: var(--slate-700); max-width: 46ch; margin: 28px 0 0; text-wrap: pretty; }
.sd__form { border: 1px solid var(--slate-100); border-top: 2px solid var(--zenda-magenta); background: #fff; padding: 40px; min-height: 560px; }
.sd__form iframe { width: 100% !important; border: 0; display: block; }
@media (max-width: 1024px) { .sd { grid-template-columns: 1fr; gap: 48px; padding: 140px 40px 96px; } .sd__copy { position: static; } }
@media (max-width: 760px) { .sd { padding: 112px 20px 72px; gap: 32px; } .sd__form { padding: 24px 20px; } }