/* ================================================================
   ZEEVRON — PROOF LAYER
   Loaded after main.css. Powers the ASO-first redesign:
   home hero, /aso landing, case study, services.

   Design thesis: the evidence IS the design. Real Google Play
   Console screenshots are framed as artifacts, not decorated.
   Signature element = the console frame + verified tag.
   ================================================================ */

:root {
  --proof-ink:      #2a1844;
  --proof-chrome:   #eee7f4;
  --proof-chrome-b: #dccbe9;
  --verify:         #1f9d5b;
  --verify-soft:    #e7f7ee;
}

/* ================================================================
   1. CONSOLE FRAME — the signature element
   Wraps every real dashboard screenshot in browser chrome so it
   reads as a captured artifact, not a marketing graphic.
   ================================================================ */
.zvp-console {
  border: 1px solid var(--proof-chrome-b);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(44,20,72,.05), 0 18px 44px -22px rgba(91,47,135,.30);
  margin: 0;
}
.zvp-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--proof-chrome);
  border-bottom: 1px solid var(--proof-chrome-b);
}
.zvp-console__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.zvp-console__dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #c9b8da; display: block;
}
.zvp-console__dots i:first-child { background: #e4a0b8; }
.zvp-console__label {
  font-family: var(--font-mono);
  font-size: .705rem;
  letter-spacing: .04em;
  color: #6b5b80;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zvp-console__tag {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--verify);
  background: var(--verify-soft);
  border: 1px solid rgba(31,157,91,.22);
  padding: 3px 8px;
  border-radius: 100px;
}
.zvp-console__tag svg { width: 10px; height: 10px; }
.zvp-console img { display: block; width: 100%; height: auto; }

.zvp-caption {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 2px 0;
  padding-left: 13px;
  border-left: 2px solid var(--purple-200);
}
.zvp-caption strong { color: var(--ink); font-weight: 650; }

/* ================================================================
   2. READOUT — metric strip
   ================================================================ */
.zvp-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
.zvp-readout > div { background: #fff; padding: 20px 18px; }
.zvp-readout .n {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--purple-600);
  letter-spacing: -.02em;
}
.zvp-readout .n.pos { color: var(--verify); }
.zvp-readout .l {
  font-size: .755rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 8px;
}
@media (max-width: 720px) {
  .zvp-readout { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   3. HERO — proof-first
   ================================================================ */
.zvp-hero {
  padding: 66px 0 54px;
  background:
    radial-gradient(1000px 460px at 78% -8%, var(--purple-100) 0%, transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.zvp-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 1.12fr;
  gap: 54px;
  align-items: center;
}
.zvp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 20px;
}
.zvp-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verify);
  box-shadow: 0 0 0 3px rgba(31,157,91,.16);
}
.zvp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
}
.zvp-hero h1 .fig {
  display: block;
  color: var(--purple-600);
  font-variant-numeric: tabular-nums;
}
.zvp-hero h1 .sub {
  display: block;
  font-size: .52em;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-soft);
  line-height: 1.32;
  margin-top: 16px;
}
.zvp-hero__lead {
  font-size: 1.06rem;
  line-height: 1.66;
  color: var(--ink-soft);
  max-width: 33rem;
  margin: 0 0 26px;
}
.zvp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zvp-price {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}
.zvp-price b { color: var(--ink); font-weight: 700; }

@media (max-width: 940px) {
  .zvp-hero { padding: 44px 0 40px; }
  .zvp-hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ================================================================
   4. SECTION SHELL
   ================================================================ */
.zvp-sec { padding: 74px 0; }
.zvp-sec.tint { background: var(--bg-tint); }
.zvp-sec.line-top { border-top: 1px solid var(--line); }
.zvp-sec__head { max-width: 44rem; margin: 0 0 42px; }
.zvp-sec__head.center { margin-left: auto; margin-right: auto; text-align: center; }
.zvp-sec__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.zvp-sec__head p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 720px) { .zvp-sec { padding: 52px 0; } }

/* ================================================================
   5. EVIDENCE BLOCK — screenshot + reading
   ================================================================ */
.zvp-ev { display: grid; gap: 30px; }
.zvp-ev + .zvp-ev { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.zvp-ev__split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 36px;
  align-items: center;
}
.zvp-ev h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.24;
  letter-spacing: -.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.zvp-read { list-style: none; margin: 0; padding: 0; }
.zvp-read li {
  position: relative;
  padding-left: 24px;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.zvp-read li + li { margin-top: 12px; }
.zvp-read li::before {
  content: "";
  position: absolute;
  left: 0; top: .56em;
  width: 11px; height: 2px;
  border-radius: 2px;
  background: var(--purple-400);
}
.zvp-read li b { color: var(--ink); font-weight: 680; }
.zvp-read li em {
  font-style: normal;
  color: var(--verify);
  font-weight: 680;
}
@media (max-width: 900px) {
  .zvp-ev__split { grid-template-columns: 1fr; gap: 26px; }
}

/* ================================================================
   6. GALLERY — portfolio titles
   ================================================================ */
.zvp-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 820px) { .zvp-gal { grid-template-columns: 1fr; } }

/* ================================================================
   7. VOUCH — testimonial
   ================================================================ */
.zvp-vouch {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple-500);
  border-radius: 16px;
  padding: 30px 32px;
  box-shadow: var(--shadow-soft);
}
.zvp-vouch img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--purple-100);
}
.zvp-vouch blockquote {
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
  font-style: italic;
}
.zvp-vouch cite {
  display: block;
  font-style: normal;
  font-size: .875rem;
  color: var(--muted);
}
.zvp-vouch cite b {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-style: normal;
  margin-bottom: 2px;
}
.zvp-vouch .flag {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple-600);
  background: var(--purple-50);
  border: 1px solid var(--purple-200);
  border-radius: 100px;
  padding: 3px 9px;
}
@media (max-width: 620px) {
  .zvp-vouch { grid-template-columns: 1fr; padding: 24px; }
}

/* ================================================================
   8. METHOD — 4 steps (a real sequence, so numbers earn their place)
   ================================================================ */
.zvp-method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.zvp-step {
  padding: 26px 24px;
  border-left: 1px solid var(--line);
  position: relative;
}
.zvp-step:first-child { border-left: 0; padding-left: 0; }
.zvp-step__n {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--purple-400);
  margin-bottom: 12px;
}
.zvp-step h4 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 9px;
  letter-spacing: -.01em;
}
.zvp-step p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .zvp-method { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .zvp-step:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .zvp-method { grid-template-columns: 1fr; }
  .zvp-step { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .zvp-step:first-child { border-top: 0; padding-top: 0; }
}

/* ================================================================
   9. OFFER — pricing with anchor
   ================================================================ */
.zvp-offer { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: stretch; }
.zvp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.zvp-card--lead {
  border: 2px solid var(--purple-500);
  box-shadow: 0 20px 50px -26px rgba(91,47,135,.42);
  position: relative;
}
.zvp-card__flag {
  position: absolute;
  top: -11px; left: 30px;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple-600);
  border-radius: 100px;
  padding: 4px 12px;
}
.zvp-card h3 {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.zvp-card__tag { font-size: .9rem; color: var(--muted); margin: 0 0 20px; }
.zvp-card__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--purple-600);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.zvp-card__price span {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.zvp-card ul { list-style: none; margin: 0 0 24px; padding: 0; }
.zvp-card ul li {
  position: relative;
  padding-left: 25px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.zvp-card ul li + li { margin-top: 11px; }
.zvp-card ul li::before {
  content: "";
  position: absolute;
  left: 1px; top: .43em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--verify);
  border-bottom: 2px solid var(--verify);
  transform: rotate(-45deg);
}
.zvp-card .btn { margin-top: auto; }
.zvp-note {
  margin-top: 22px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.zvp-note b { color: var(--ink); }
@media (max-width: 860px) { .zvp-offer { grid-template-columns: 1fr; } }

/* ================================================================
   10. CTA BAND
   ================================================================ */
.zvp-cta {
  background: var(--purple-800);
  color: #fff;
  padding: 68px 0;
  text-align: center;
}
.zvp-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.022em;
  margin: 0 0 14px;
  color: #fff;
}
.zvp-cta h2 .lime { color: var(--lime); }
.zvp-cta p {
  font-size: 1.03rem;
  line-height: 1.62;
  color: rgba(255,255,255,.76);
  max-width: 36rem;
  margin: 0 auto 28px;
}
.zvp-cta .btn-primary { background: var(--lime); color: var(--purple-900); border-color: var(--lime); }
.zvp-cta .btn-primary:hover { background: var(--lime-soft); border-color: var(--lime-soft); }

/* ================================================================
   11. REVEAL — scroll animation (respects reduced motion)
   ================================================================ */
[data-zvp] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-zvp].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-zvp] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zvp-hero__grid > * { animation: none !important; }
}

/* ================================================================
   12. ENGAGEMENT LADDER — ASO dominant, the rest as expansion
   Replaces the four-equal-cards grid. Hierarchy encodes the pitch:
   you start with ASO, you expand later.
   ================================================================ */
.zvp-ladder {
  display: grid;
  grid-template-columns: 1.34fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* --- The flagship --- */
.zvp-flag {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--purple-500);
  border-radius: 22px;
  padding: 36px 34px 32px;
  box-shadow: 0 24px 56px -30px rgba(91,47,135,.46);
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.zvp-flag:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 64px -28px rgba(91,47,135,.52);
}
.zvp-flag__badge {
  position: absolute;
  top: -11px; left: 32px;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple-600);
  border-radius: 100px;
  padding: 4px 12px;
}
.zvp-flag__abbr {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--purple-500);
  margin-bottom: 10px;
}
.zvp-flag h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.5vw, 2.15rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
}
.zvp-flag__lead {
  font-size: 1rem;
  line-height: 1.64;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.zvp-flag__proof {
  display: flex;
  gap: 26px;
  padding: 18px 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.zvp-flag__proof div { flex: 1; }
.zvp-flag__proof .n {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--purple-600);
  letter-spacing: -.02em;
}
.zvp-flag__proof .n.pos { color: var(--verify); }
.zvp-flag__proof .l {
  font-size: .74rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 7px;
}
.zvp-flag__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.zvp-flag__price {
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--muted);
}
.zvp-flag__price b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.zvp-flag__go {
  font-weight: 700;
  font-size: .95rem;
  color: var(--purple-600);
}

/* --- The expansion stack --- */
.zvp-next { display: flex; flex-direction: column; gap: 12px; }
.zvp-next__cap {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 2px;
  margin-bottom: 2px;
}
.zvp-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  flex: 1;
  transition: border-color .22s, transform .22s;
}
.zvp-mini:hover {
  border-color: var(--purple-300);
  transform: translateX(3px);
}
.zvp-mini__abbr {
  flex: 0 0 auto;
  width: 50px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--purple-500);
}
.zvp-mini__body { flex: 1; min-width: 0; }
.zvp-mini__body h4 {
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
  letter-spacing: -.005em;
}
.zvp-mini__body p {
  font-size: .83rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
.zvp-mini__arw {
  flex: 0 0 auto;
  color: var(--purple-400);
  font-weight: 700;
}

@media (max-width: 900px) {
  .zvp-ladder { grid-template-columns: 1fr; }
  .zvp-flag__proof { gap: 18px; }
}
@media (max-width: 520px) {
  .zvp-flag { padding: 30px 24px 26px; }
  .zvp-flag__proof { flex-wrap: wrap; gap: 16px 20px; }
  .zvp-flag__proof div { flex: 0 0 calc(50% - 10px); }
}

/* ================================================================
   13. VOUCHES — short, scannable social proof
   Replaces the 6-card carousel of long paragraphs. Each quote is
   trimmed to the one sentence a prospect actually needs.
   ================================================================ */
.zvp-vouches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.zvp-v {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-soft);
}
.zvp-v--lead {
  border: 1px solid var(--purple-300);
  background: linear-gradient(180deg, #fff 0%, var(--purple-50) 100%);
}
.zvp-v blockquote {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.58;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -.005em;
}
.zvp-v__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.zvp-v__by img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1.5px solid var(--purple-100);
}
.zvp-v__by .who { min-width: 0; }
.zvp-v__by .nm {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.zvp-v__by .co {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
}
.zvp-v__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple-600);
  background: var(--purple-50);
  border: 1px solid var(--purple-200);
  border-radius: 100px;
  padding: 3px 9px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .zvp-vouches { grid-template-columns: 1fr; }
}

/* ================================================================
   14. SERVICES PAGE — ASO as the feature, Complete as the anchor
   Inverts the old hierarchy (Complete was the big block on top).
   ================================================================ */

/* --- The ASO feature block --- */
.zvp-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: #fff;
  border: 2px solid var(--purple-500);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 60px -32px rgba(91,47,135,.44);
  position: relative;
  text-decoration: none;
  margin-bottom: 44px;
}
.zvp-feature__badge {
  position: absolute;
  top: 22px; left: 38px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple-600);
  border-radius: 100px;
  padding: 5px 13px;
}
.zvp-feature__body { padding: 62px 40px 40px; display: flex; flex-direction: column; }
.zvp-feature__abbr {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--purple-500);
  margin-bottom: 10px;
}
.zvp-feature__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0 0 14px;
}
.zvp-feature__lead {
  font-size: 1.02rem;
  line-height: 1.64;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.zvp-feature__list { list-style: none; margin: 0 0 26px; padding: 0; }
.zvp-feature__list li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.zvp-feature__list li + li { margin-top: 10px; }
.zvp-feature__list li::before {
  content: "";
  position: absolute;
  left: 1px; top: .42em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--verify);
  border-bottom: 2px solid var(--verify);
  transform: rotate(-45deg);
}
.zvp-feature__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.zvp-feature__price {
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--muted);
}
.zvp-feature__price b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}
.zvp-feature__cta { font-weight: 700; font-size: .96rem; color: var(--purple-600); }

/* proof panel inside the feature */
.zvp-feature__proof {
  background: var(--bg-tint);
  border-left: 1px solid var(--line);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.zvp-feature__proof .cap {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.zvp-fp { display: flex; align-items: baseline; gap: 14px; }
.zvp-fp .n {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--purple-600);
  letter-spacing: -.02em;
  flex: 0 0 auto;
  min-width: 94px;
  font-variant-numeric: tabular-nums;
}
.zvp-fp .n.pos { color: var(--verify); }
.zvp-fp .l { font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 900px) {
  .zvp-feature { grid-template-columns: 1fr; }
  .zvp-feature__proof { border-left: 0; border-top: 1px solid var(--line); }
  .zvp-feature__body { padding: 58px 28px 32px; }
}

/* --- Expansion row (SEO / GEO) --- */
.zvp-exp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 44px;
}
.zvp-exp__cap {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: -2px;
}
.zvp-x {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
  text-decoration: none;
  transition: border-color .22s, transform .22s;
}
.zvp-x:hover { border-color: var(--purple-300); transform: translateY(-2px); }
.zvp-x__abbr {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--purple-500);
  margin-bottom: 8px;
}
.zvp-x h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.012em;
}
.zvp-x p {
  font-size: .92rem;
  line-height: 1.58;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.zvp-x__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.zvp-x__price { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.zvp-x__price b { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; color: var(--ink); }
.zvp-x__cta { font-weight: 700; font-size: .88rem; color: var(--purple-500); }

@media (max-width: 720px) { .zvp-exp { grid-template-columns: 1fr; } }

/* --- The anchor (Complete Engagement, now last) --- */
.zvp-anchor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  background: var(--purple-800);
  border-radius: 20px;
  padding: 34px 38px;
  text-decoration: none;
  transition: transform .24s;
}
.zvp-anchor:hover { transform: translateY(-2px); }
.zvp-anchor__cap {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 10px;
}
.zvp-anchor h3 {
  font-family: var(--font-display);
  font-size: 1.68rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.015em;
}
.zvp-anchor p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0;
  max-width: 40rem;
}
.zvp-anchor__right { text-align: right; flex: 0 0 auto; }
.zvp-anchor__price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
.zvp-anchor__price span {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
}
.zvp-anchor__cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--lime);
}
@media (max-width: 780px) {
  .zvp-anchor { grid-template-columns: 1fr; padding: 28px 26px; }
  .zvp-anchor__right { text-align: left; }
}


/* ================================================================
   15. CASE STUDY CAROUSEL (from approved design)
   ================================================================ */
/* ================================================================
   CASE STUDY CAROUSEL — horizontal drag track
   Cards bleed past the container edges. Drag, wheel, arrows, keys.
   ================================================================ */
.zvc{
  padding:78px 0 84px;
  background:
    radial-gradient(900px 400px at 82% -10%, var(--purple-100) 0%, transparent 60%),
    var(--bg);
  border-top:1px solid var(--line);
  overflow:hidden;
}

/* --- header --- */
.zvc__head{text-align:center;max-width:44rem;margin:0 auto 14px;padding:0 32px;}
.zvc__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.69rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple-600);
  margin-bottom:18px;
}
.zvc__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--verify);box-shadow:0 0 0 3px rgba(31,157,91,.16);
}
.zvc__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.95rem,3.4vw,2.85rem);
  font-weight:600;line-height:1.1;letter-spacing:-.024em;
  color:var(--ink);margin:0 0 14px;
}
.zvc__head h2 .accent{color:var(--purple-600);}
.zvc__head p{font-size:1.02rem;line-height:1.66;color:var(--ink-soft);margin:0;}
.zvc__cta{display:flex;justify-content:center;margin:26px 0 40px;}

/* --- track --- */
.zvc__viewport{
  position:relative;
  /* bleed: track runs edge-to-edge, cards start aligned to container */
  padding-left:max(32px, calc((100vw - 1180px) / 2 + 32px));
  padding-right:max(32px, calc((100vw - 1180px) / 2 + 32px));
}
.zvc__track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-left:max(32px, calc((100vw - 1180px) / 2 + 32px));
  scroll-behavior:smooth;
  padding:6px 0 22px;
  margin:0 calc(-1 * max(32px, calc((100vw - 1180px) / 2 + 32px)));
  padding-left:max(32px, calc((100vw - 1180px) / 2 + 32px));
  padding-right:max(32px, calc((100vw - 1180px) / 2 + 32px));
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.zvc__track::-webkit-scrollbar{display:none;}
.zvc__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.zvc__track.is-dragging a{pointer-events:none;}

/* --- card --- */
.zvc-card{
  flex:0 0 380px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px 24px 22px;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 16px 40px -26px rgba(91,47,135,.30);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
.zvc-card:hover{
  transform:translateY(-4px);
  border-color:var(--purple-300);
  box-shadow:0 1px 2px rgba(44,20,72,.05), 0 26px 56px -26px rgba(91,47,135,.44);
}
.zvc-card--lead{border:2px solid var(--purple-500);}

/* card head: mark + name */
.zvc-card__head{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.zvc-card__mark{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--purple-50);
  border:1px solid var(--purple-100);
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.04em;color:var(--purple-600);text-align:center;line-height:1.15;
}
.zvc-card__mark.is-star{background:var(--purple-600);border-color:var(--purple-600);color:#fff;}
.zvc-card__id{min-width:0;}
.zvc-card__id h3{
  font-family:var(--font-body);font-size:1.02rem;font-weight:700;
  color:var(--ink);margin:0 0 2px;letter-spacing:-.008em;
}
.zvc-card__id p{
  font-size:.84rem;line-height:1.4;color:var(--muted);margin:0;
}

/* console shot */
.zvc-card__shot{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  margin-bottom:20px;
}
.zvc-card__bar{
  display:flex;align-items:center;gap:7px;
  padding:6px 10px;
  background:#eee7f4;
  border-bottom:1px solid #dccbe9;
}
.zvc-card__bar i{width:6px;height:6px;border-radius:50%;background:#c9b8da;}
.zvc-card__bar i:first-child{background:#e4a0b8;}
.zvc-card__bar span{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.03em;
  color:#6b5b80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zvc-card__tag{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font-mono);font-size:.53rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--verify);background:#e7f7ee;
  border:1px solid rgba(31,157,91,.22);
  border-radius:100px;padding:2px 6px;
}
.zvc-card__shot img{display:block;width:100%;height:150px;object-fit:cover;object-position:top left;}

/* metric */
.zvc-card__foot{
  margin-top:auto;
  display:flex;align-items:baseline;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);
}
.zvc-card__n{
  font-family:var(--font-display);
  font-size:2.5rem;font-weight:600;line-height:1;
  letter-spacing:-.028em;color:var(--purple-600);
  flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.zvc-card__n.pos{color:var(--verify);}
.zvc-card__l{font-size:.87rem;line-height:1.42;color:var(--ink-soft);}
.zvc-card__l b{color:var(--ink);font-weight:700;}

/* --- controls --- */
.zvc__ctl{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-top:26px;
}
.zvc__rail{
  flex:1;height:2px;background:var(--purple-100);
  border-radius:2px;position:relative;overflow:hidden;
}
.zvc__thumb{
  position:absolute;top:0;left:0;height:100%;
  background:var(--purple-500);border-radius:2px;
  width:30%;transition:transform .12s linear;
}
.zvc__btns{display:flex;gap:9px;flex:0 0 auto;}
.zvc__btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;
  color:var(--ink);transition:all .2s;
}
.zvc__btn:hover:not(:disabled){border-color:var(--purple-400);color:var(--purple-600);}
.zvc__btn:disabled{opacity:.32;cursor:default;}
.zvc__hint{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;
}

@media (max-width:900px){
  .zvc__viewport,.zvc__track{padding-left:22px;padding-right:22px;}
  .zvc__track{margin:0 -22px;}
  .zvc-card{flex:0 0 300px;}
  .zvc-card__n{font-size:2.1rem;}
  .zvc__hint{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .zvc-card{transition:none;}
  .zvc__track{scroll-behavior:auto;}
}


/* ================================================================
   16. MAGNIFIER REVEAL (from approved design)
   ================================================================ */
/* ================================================================
   MAGNIFIER REVEAL
   A lens drifts across a real Play Console screenshot, magnifying
   what's underneath. Idles on a path; follows the cursor on hover.
   The point: this is literally what ASO is — finding what everyone
   else missed in the store data.
   ================================================================ */
.zvm{
  position:relative;
  background:
    radial-gradient(900px 460px at 78% -12%, var(--purple-800) 0%, transparent 62%),
    var(--purple-900);
  padding:78px 0 84px;
  overflow:hidden;
}
.zvm__grid{
  display:grid;
  grid-template-columns:1.32fr 1fr;
  gap:52px;
  align-items:center;
}

/* --- stage --- */
.zvm__stage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  cursor:none;
  background:#fff;
  user-select:none;
}
.zvm__bar{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;
  background:#eee7f4;
  border-bottom:1px solid #dccbe9;
  position:relative;z-index:3;
}
.zvm__bar i{width:8px;height:8px;border-radius:50%;background:#c9b8da;}
.zvm__bar i:first-child{background:#e4a0b8;}
.zvm__bar span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;color:#6b5b80;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zvm__tag{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--verify);background:#e7f7ee;
  border:1px solid rgba(31,157,91,.22);
  border-radius:100px;padding:3px 8px;
}
.zvm__shot{position:relative;overflow:hidden;}
.zvm__shot img{display:block;width:100%;height:auto;}

/* --- the lens --- */
/* The instrument: a wrapper carries the handle + rim so the two are
   welded together and rotate as one. The glass itself is the inner disc. */
.zvm__lens{
  position:absolute;
  width:196px;height:196px;
  pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .5s ease;
  z-index:2;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.42));
}
.zvm__lens.on{opacity:1;}

/* --- handle: sits at the lower-right of the rim and runs outward.
       No rotate+translate chaining — position is explicit, so the
       direction can't flip on us. --- */
.zvm__lens::before{
  content:"";
  position:absolute;
  /* lower-right of the circle: cos45/sin45 of the radius ≈ 70.7% */
  left:83%;
  top:83%;
  width:15px;
  height:104px;
  margin-left:-7px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,
    #55555f 0%, #2c2c34 26%, #141419 56%, #34343d 84%, #4c4c57 100%);
  transform-origin:top center;
  transform:rotate(-45deg);   /* top pinned at the rim, body falls down-right */
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.5);
  z-index:-1;                 /* tucks behind the rim at the join */
}

/* --- the glass --- */
.zvm__glass{
  position:absolute;inset:0;
  border-radius:50%;
  overflow:hidden;
  background-repeat:no-repeat;
  /* rim: outer chrome ring + inner dark bezel */
  box-shadow:
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 8px #2c2c34,
    0 0 0 9px rgba(0,0,0,.35),
    inset 0 0 30px rgba(255,255,255,.16),
    inset 0 3px 12px rgba(255,255,255,.30);
}
/* glass sheen */
.zvm__glass::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 52%),
    radial-gradient(circle at 72% 78%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%);
  pointer-events:none;
}
/* collar: the ferrule where handle meets rim — hides the join */
.zvm__collar{
  position:absolute;
  left:83%;
  top:83%;
  width:23px;height:26px;
  margin:-8px 0 0 -11px;
  border-radius:5px;
  background:linear-gradient(90deg,#6a6a76 0%,#3a3a44 40%,#1d1d23 72%,#45454f 100%);
  transform-origin:top center;
  transform:rotate(-45deg);
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}

/* --- callout that fires when the lens is over the number --- */
.zvm__hit{
  position:absolute;
  z-index:4;
  pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s, transform .3s;
}
.zvm__hit.on{opacity:1;transform:none;}
.zvm__hit b{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple-900);
  background:var(--lime);
  border-radius:100px;
  padding:6px 12px;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);
  white-space:nowrap;
}

/* --- hint --- */
.zvm__hint{
  position:absolute;left:16px;bottom:14px;z-index:4;
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(30,15,51,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:6px 12px;
  transition:opacity .4s;
}
.zvm__stage.is-live .zvm__hint{opacity:0;}

/* --- copy side --- */
.zvm__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.69rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple-300);
  margin-bottom:20px;
}
.zvm__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(200,245,96,.18);
}
.zvm h2{
  font-family:var(--font-display);
  font-size:clamp(1.95rem,3.3vw,2.8rem);
  font-weight:600;line-height:1.1;letter-spacing:-.024em;
  color:#fff;margin:0 0 18px;
}
.zvm h2 .lime{color:var(--lime);}
.zvm__lead{
  font-size:1.03rem;line-height:1.7;
  color:rgba(255,255,255,.72);
  margin:0 0 28px;max-width:32rem;
}

/* steps */
.zvm__steps{list-style:none;margin:0 0 30px;padding:0;counter-reset:s;}
.zvm__step{
  position:relative;
  padding:14px 0 14px 46px;
  border-top:1px solid rgba(255,255,255,.10);
  transition:opacity .3s;
}
.zvm__step:last-child{border-bottom:1px solid rgba(255,255,255,.10);}
.zvm__step::before{
  counter-increment:s;
  content:"0" counter(s);
  position:absolute;left:0;top:15px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;
  color:var(--purple-300);
  transition:color .3s;
}
.zvm__step h4{
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  color:#fff;margin:0 0 3px;letter-spacing:-.005em;
}
.zvm__step p{
  font-size:.89rem;line-height:1.55;
  color:rgba(255,255,255,.56);margin:0;
}
/* the step currently being "looked at" lights up */
.zvm__step.is-active::before{color:var(--lime);}
.zvm__step.is-active h4{color:var(--lime);}

@media (max-width:960px){
  .zvm__grid{grid-template-columns:1fr;gap:38px;}
  .zvm__lens{width:150px;height:150px;}
  .zvm__lens::before{width:12px;height:80px;margin-left:-6px;}
  .zvm__collar{width:18px;height:21px;margin:-6px 0 0 -9px;}
}
@media (max-width:560px){
  .zvm{padding:54px 0 58px;}
  .zvm__lens{width:118px;height:118px;}
  .zvm__lens::before{width:10px;height:62px;margin-left:-5px;}
  .zvm__collar{width:15px;height:17px;margin:-5px 0 0 -7px;}
  .zvm__glass{box-shadow:
    0 0 0 2px rgba(255,255,255,.92),
    0 0 0 6px #2c2c34,
    0 0 0 7px rgba(0,0,0,.35),
    inset 0 0 20px rgba(255,255,255,.16);}
}
@media (prefers-reduced-motion:reduce){
  .zvm__lens{transition:none;}
}


/* ================================================================
   17. FOOTER WORDMARK (from approved design)
   ================================================================ */
/* ============================================================
   ZV FOOTER WORDMARK
   Giant company name with left→right luminance falloff,
   sitting on a horizon line with pools of light beneath.
   ============================================================ */
.zv-foot{
  position:relative;
  background:var(--purple-900);
  overflow:hidden;
  padding:0 0 56px;
  isolation:isolate;
}

/* --- the wordmark --- */
.zv-foot__mark{
  position:relative;
  padding:70px 0 0;
}
.zv-foot__mark-inner{
  max-width:1180px;margin:0 auto;padding:0 32px;
  position:relative;
}
.zv-foot__word{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.zv-foot__word text{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:-.035em;
  /* gradient handles the falloff */
  fill:url(#zvFade);
}

/* --- horizon line --- */
.zv-foot__horizon{
  position:relative;
  height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 12%,
    rgba(255,255,255,.20) 88%,
    rgba(255,255,255,0) 100%);
  margin-top:-2px;
  z-index:2;
}

/* --- pools of light beneath the letters --- */
.zv-foot__glow{
  position:relative;
  height:78px;
  margin-top:-1px;
  z-index:1;
  overflow:hidden;
}
.zv-foot__glow-inner{
  max-width:1180px;margin:0 auto;padding:0 32px;
  position:relative;height:100%;
  box-sizing:border-box;
}
/* pools are positioned against the same content box the SVG occupies */
.zv-foot__glow-track{
  position:absolute;
  left:32px;right:32px;top:0;bottom:0;
}
.zv-foot__glow span{
  position:absolute;
  top:-30px;
  width:118px;height:74px;
  margin-left:-59px;          /* centre the pool on the glyph */
  border-radius:50%;
  filter:blur(19px);
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.50) 0%,
    rgba(214,189,239,.24) 42%,
    rgba(123,63,181,0) 72%);
}
/* per-letter pools, dimming to the right to match the type falloff */
/* centres measured from the rendered glyphs: Z e e v r o n */
.zv-foot__glow span:nth-child(1){left:7.9%;  opacity:.95;}
.zv-foot__glow span:nth-child(2){left:23.1%; opacity:.78;}
.zv-foot__glow span:nth-child(3){left:37.8%; opacity:.60;}
.zv-foot__glow span:nth-child(4){left:52.2%; opacity:.44;}
.zv-foot__glow span:nth-child(5){left:64.4%; opacity:.31;}
.zv-foot__glow span:nth-child(6){left:77.1%; opacity:.20;}
.zv-foot__glow span:nth-child(7){left:92.3%; opacity:.12;}

/* --- link columns --- */
.zv-foot__cols{
  position:relative;z-index:3;
  max-width:1180px;margin:0 auto;padding:26px 32px 0;
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  gap:40px;
}
.zv-foot__col h4{
  font-family:var(--font-body);
  font-size:.92rem;font-weight:700;color:#fff;
  margin:0 0 20px;letter-spacing:-.005em;
}
.zv-foot__col ul{list-style:none;margin:0;padding:0;}
.zv-foot__col li+li{margin-top:13px;}
.zv-foot__col a{
  color:rgba(255,255,255,.56);
  text-decoration:none;font-size:.9rem;line-height:1.5;
  transition:color .18s;
}
.zv-foot__col a:hover{color:#fff;}
.zv-foot__col a.is-lead{color:rgba(255,255,255,.82);font-weight:600;}
.zv-foot__col a.is-lead:hover{color:var(--lime);}

.zv-foot__blurb{
  font-size:.88rem;line-height:1.66;
  color:rgba(255,255,255,.5);
  margin:0 0 20px;max-width:22rem;
}
.zv-foot__proof{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--lime);
  background:rgba(200,245,96,.09);
  border:1px solid rgba(200,245,96,.22);
  border-radius:100px;padding:5px 11px;
}

/* --- bottom bar --- */
.zv-foot__bar{
  position:relative;z-index:3;
  max-width:1180px;margin:44px auto 0;padding:22px 32px 0;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.zv-foot__bar p{
  margin:0;font-size:.82rem;color:rgba(255,255,255,.42);
}
.zv-foot__bar nav{display:flex;gap:22px;flex-wrap:wrap;}
.zv-foot__bar nav a{
  color:rgba(255,255,255,.42);text-decoration:none;font-size:.82rem;
  transition:color .18s;
}
.zv-foot__bar nav a:hover{color:#fff;}

/* --- responsive --- */
@media (max-width:900px){
  .zv-foot__cols{grid-template-columns:1fr 1fr;gap:34px 28px;}
  .zv-foot__glow{height:56px;}
  .zv-foot__glow span{width:80px;height:52px;margin-left:-40px;top:-20px;filter:blur(15px);}
}
@media (max-width:560px){
  .zv-foot__cols{grid-template-columns:1fr;}
  .zv-foot__mark{padding-top:48px;}
  .zv-foot__glow{height:40px;}
  .zv-foot__glow span{width:52px;height:38px;margin-left:-26px;top:-14px;filter:blur(11px);}
  .zv-foot__bar{flex-direction:column;align-items:flex-start;}
}


/* --- seam: wordmark band sits flush on top of the existing footer --- */
.zv-foot{ padding-bottom:0; }
.zv-foot + .footer{ padding-top:30px; }
.zv-foot__glow{ margin-bottom:0; }

/* --- star glyph: optically matched to the digits.
       The ★ has a taller cap-height than the numerals, so left raw it
       makes the +1.62 card sit higher than its neighbours. --- */
.zvc-star{
  font-style:normal;
  font-size:.62em;      /* bring it down to the digits' visual weight */
  line-height:1;
  vertical-align:.06em; /* nudge onto the numeral baseline */
  margin-left:.04em;
}

/* --- pin the metric row so an over-long label can never push one
       number out of line with its neighbours (labels wrap differently
       at narrow widths, so reserve room for 3 lines) --- */
.zvc-card__foot{ min-height:76px; align-items:center; }
@media (max-width:900px){
  .zvc-card__foot{ min-height:92px; }
}


/* ================================================================
   18. HERO RANK CLIMB (approved)
   ================================================================ */
/* ================================================================
   THE RANK CLIMB
   A store search result. Your app starts at #5, we start working,
   and it physically climbs to #2 — pushing the rows above it down.
   The displacement IS the story: you don't just move, you take
   someone else's spot.
   ================================================================ */
.rk__panel, .rk-wrap > .rk{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 26px 60px -30px rgba(91,47,135,.46);
}

/* search bar */
.rk__q{
  display:flex;align-items:center;gap:10px;
  background:var(--purple-50);
  border:1px solid var(--purple-100);
  border-radius:100px;
  padding:10px 15px;margin-bottom:6px;
}
.rk__q svg{flex:0 0 auto;color:var(--purple-400)}
.rk__q span{font-size:.87rem;color:var(--ink-soft);font-weight:600}
.rk__q .caret{
  width:1.5px;height:13px;background:var(--purple-400);margin-left:-4px;
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

/* the working indicator */
.rk__status{
  display:flex;align-items:center;gap:7px;
  height:22px;margin:0 0 6px;padding-left:4px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  transition:color .4s;
}
.rk__status .pip{
  width:5px;height:5px;border-radius:50%;
  background:var(--purple-200);
  transition:background .4s, box-shadow .4s;
}
.rk__status.working{color:var(--purple-600)}
.rk__status.working .pip{
  background:var(--purple-500);
  box-shadow:0 0 0 3px rgba(123,63,181,.16);
  animation:pulse 1s ease-in-out infinite;
}
.rk__status.done{color:var(--verify)}
.rk__status.done .pip{background:var(--verify);box-shadow:0 0 0 3px rgba(31,157,91,.16);animation:none}
@keyframes pulse{50%{transform:scale(1.25)}}

/* list */
.rk__list{position:relative;padding-top:2px}
.rk__row{
  display:flex;align-items:center;gap:12px;
  padding:9px 8px;
  border-radius:13px;
  background:#fff;
  transition:transform .95s cubic-bezier(.34,1.15,.4,1),
             box-shadow .5s, border-color .5s, background .5s;
  position:relative;
  border:1px solid transparent;
}
.rk__rank{
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  color:var(--muted);width:22px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;text-align:center;
  transition:color .4s;
}
.rk__ico{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;color:#fff;
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.10);
}
.rk__meta{flex:1;min-width:0}
.rk__nm{
  height:8px;border-radius:4px;background:var(--purple-100);
  transition:background .5s, width .5s;
}
.rk__sb{
  height:6px;border-radius:3px;background:var(--purple-50);
  margin-top:6px;transition:background .5s;
}
.rk__stars{
  flex:0 0 auto;font-size:.62rem;color:var(--purple-300);
  font-family:var(--font-mono);letter-spacing:.02em;
  transition:color .5s;
}

/* the competitors */
.rk__row[data-r="1"] .rk__ico{background:linear-gradient(140deg,#b0a4c4,#8d7fa6)}
.rk__row[data-r="2"] .rk__ico{background:linear-gradient(140deg,#a9bcd0,#7f95ad)}
.rk__row[data-r="3"] .rk__ico{background:linear-gradient(140deg,#c4aeb8,#a08794)}
.rk__row[data-r="4"] .rk__ico{background:linear-gradient(140deg,#b6bfa8,#93a084)}
.rk__row[data-r="1"] .rk__nm{width:66%}
.rk__row[data-r="2"] .rk__nm{width:54%}
.rk__row[data-r="3"] .rk__nm{width:61%}
.rk__row[data-r="4"] .rk__nm{width:49%}
.rk__row[data-r="1"] .rk__sb{width:38%}
.rk__row[data-r="2"] .rk__sb{width:44%}
.rk__row[data-r="3"] .rk__sb{width:33%}
.rk__row[data-r="4"] .rk__sb{width:41%}

/* YOUR app */
.rk__row.me{
  z-index:3;
  background:var(--purple-50);
  border-color:var(--purple-200);
}
.rk__row.me .rk__ico{
  background:linear-gradient(140deg,var(--purple-500),var(--purple-800));
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.18), 0 4px 12px -3px rgba(91,47,135,.5);
}
.rk__row.me .rk__rank{color:var(--purple-600)}
.rk__row.me .rk__nm{background:var(--purple-400);width:58%}
.rk__row.me .rk__sb{background:var(--purple-200);width:36%}
.rk__row.me .rk__stars{color:var(--purple-500)}

/* lifted state, while climbing */
.rk__row.me.lift{
  box-shadow:0 18px 34px -14px rgba(91,47,135,.5);
  border-color:var(--purple-400);
}
.rk__row.me.landed .rk__nm{width:70%}
.rk__row.me.landed{background:linear-gradient(90deg,var(--purple-50),#fff)}

/* the badge */
.rk__badge{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--font-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:var(--purple-600);
  border-radius:100px;padding:3px 9px;white-space:nowrap;
}
/* the delta chip that fires on arrival */
.rk__delta{
  position:absolute;right:8px;top:50%;
  transform:translateY(-50%) scale(.7);
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.06em;
  color:var(--purple-900);background:var(--lime);
  border-radius:100px;padding:4px 9px;
  opacity:0;pointer-events:none;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.3);
  transition:opacity .45s, transform .45s cubic-bezier(.34,1.6,.5,1);
}
.rk__delta.on{opacity:1;transform:translateY(-50%) scale(1)}

/* footer */
.rk__foot{
  margin-top:16px;padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;align-items:flex-start;gap:13px;
}
.rk__foot .n{
  font-family:var(--font-display);font-size:1.95rem;font-weight:600;
  color:var(--purple-600);letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;
  /* match the label's first-line box so the two sit on one optical line */
  line-height:1.45;
  font-size:1.95rem;
  display:block;
  flex:0 0 auto;
}
.rk__foot .l{font-size:.83rem;line-height:1.45;color:var(--muted);padding-top:.30em}
.rk__foot .l b{color:var(--ink);font-weight:700}

@media(max-width:520px){
  .rk__panel{padding:16px 14px 14px}
  .rk__ico{width:32px;height:32px}
  .rk__stars{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rk__row{transition:none}
  .rk__delta{transition:none}
  .rk__q .caret{animation:none}
}


/* ================================================================
   19. SERVICES ASO FEATURE + LIVE DEMO PANEL (approved)
   ================================================================ */
/* ================================================================
   ASO FEATURE — the empty right panel now carries a live proof
   demo: your app climbing the store ranks. It demonstrates the
   service instead of describing it.
   ================================================================ */
.fe{
  position:relative;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  background:#fff;
  border:2px solid var(--purple-500);
  border-radius:26px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 30px 70px -34px rgba(91,47,135,.46);
  transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s;
  margin-bottom:40px;
}
.fe:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(44,20,72,.05), 0 40px 88px -34px rgba(91,47,135,.56)}

.fe__badge{
  position:absolute;top:22px;left:38px;z-index:4;
  font-family:var(--font-mono);font-size:.63rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:var(--purple-600);
  border-radius:100px;padding:5px 14px;
}

/* --- left: the offer --- */
.fe__body{padding:62px 40px 34px;display:flex;flex-direction:column}
.fe__abbr{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;color:var(--purple-500);margin-bottom:10px;
}
.fe__title{
  font-family:var(--font-display);
  font-size:clamp(1.85rem,2.8vw,2.4rem);
  font-weight:600;line-height:1.08;letter-spacing:-.024em;
  color:var(--ink);margin:0 0 14px;
}
.fe__lead{font-size:1rem;line-height:1.66;color:var(--ink-soft);margin:0 0 24px}

.fe__list{list-style:none;margin:0 0 26px;padding:0}
.fe__list li{
  position:relative;padding-left:27px;
  font-size:.94rem;line-height:1.55;color:var(--ink-soft);
}
.fe__list li+li{margin-top:11px}
.fe__list li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:12px;height:6px;
  border-left:2px solid var(--purple-500);
  border-bottom:2px solid var(--purple-500);
  transform:rotate(-45deg);
}
.fe__foot{
  margin-top:auto;padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.fe__price{
  font-family:var(--font-display);font-size:1.85rem;font-weight:600;
  letter-spacing:-.024em;color:var(--ink);line-height:1;
}
.fe__price span{
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;
  color:var(--muted);letter-spacing:0;
}
.fe__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.95rem;color:var(--purple-600);
}
.fe__cta svg{transition:transform .25s}
.fe:hover .fe__cta svg{transform:translateX(3px)}

/* --- right: the live demo --- */
.fe__demo{
  position:relative;
  background:
    radial-gradient(500px 300px at 80% 0%, var(--purple-100) 0%, transparent 64%),
    var(--bg-tint);
  border-left:1px solid var(--purple-200);
  padding:34px 32px;
  display:flex;flex-direction:column;justify-content:center;
}
.fe__cap{
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin-bottom:16px;
}

/* the rank widget */

.fe__demo .rk{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 14px 34px -20px rgba(91,47,135,.4);
}

.fe__demo .rk__q{
  display:flex;align-items:center;gap:8px;
  background:var(--purple-50);
  border:1px solid var(--purple-100);
  border-radius:100px;padding:7px 12px;margin-bottom:4px;
}

.fe__demo .rk__q svg{flex:0 0 auto;color:var(--purple-400)}

.fe__demo .rk__q span{font-size:.76rem;color:var(--ink-soft);font-weight:600}

.fe__demo .rk__q i{width:1.4px;height:11px;background:var(--purple-400);margin-left:-3px;
  animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.fe__demo .rk__status{
  display:flex;align-items:center;gap:6px;height:20px;
  padding-left:3px;margin-bottom:2px;
  font-family:var(--font-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color .4s;
}

.fe__demo .rk__status .pip{width:4px;height:4px;border-radius:50%;background:var(--purple-200);
  transition:background .4s, box-shadow .4s}

.fe__demo .rk__status.working{color:var(--purple-600)}

.fe__demo .rk__status.working .pip{background:var(--purple-500);box-shadow:0 0 0 3px rgba(123,63,181,.16);
  animation:pulse 1s ease-in-out infinite}

.fe__demo .rk__status.done{color:var(--purple-700)}

.fe__demo .rk__status.done .pip{background:var(--purple-600);box-shadow:0 0 0 3px rgba(91,47,135,.18);animation:none}
@keyframes pulse{50%{transform:scale(1.3)}}

.fe__demo .rk__list{position:relative}

.fe__demo .rk__row{
  display:flex;align-items:center;gap:9px;
  padding:6px 6px;border-radius:10px;
  background:#fff;border:1px solid transparent;
  position:relative;
  transition:transform .95s cubic-bezier(.34,1.15,.4,1), box-shadow .5s, border-color .5s, background .5s;
}

.fe__demo .rk__rank{
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--muted);
  width:16px;flex:0 0 auto;text-align:center;font-variant-numeric:tabular-nums;
  transition:color .4s;
}

.fe__demo .rk__ico{
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.5rem;font-weight:700;color:#fff;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.10);
}

.fe__demo .rk__meta{flex:1;min-width:0}

.fe__demo .rk__nm{height:6px;border-radius:3px;background:var(--purple-100);transition:background .5s,width .5s}

.fe__demo .rk__sb{height:5px;border-radius:2.5px;background:var(--purple-50);margin-top:4px;transition:background .5s}

.fe__demo .rk__stars{
  flex:0 0 auto;font-family:var(--font-mono);font-size:.55rem;
  color:var(--purple-300);transition:color .5s;
}

.fe__demo .rk__row[data-r="1"] .rk__ico{background:linear-gradient(140deg,#b0a4c4,#8d7fa6)}

.fe__demo .rk__row[data-r="2"] .rk__ico{background:linear-gradient(140deg,#a9bcd0,#7f95ad)}

.fe__demo .rk__row[data-r="3"] .rk__ico{background:linear-gradient(140deg,#c4aeb8,#a08794)}

.fe__demo .rk__row[data-r="4"] .rk__ico{background:linear-gradient(140deg,#b6bfa8,#93a084)}

.fe__demo .rk__row[data-r="1"] .rk__nm{width:64%}

.fe__demo .rk__row[data-r="2"] .rk__nm{width:52%}

.fe__demo .rk__row[data-r="3"] .rk__nm{width:59%}

.fe__demo .rk__row[data-r="4"] .rk__nm{width:47%}

.fe__demo .rk__row[data-r="1"] .rk__sb{width:36%}

.fe__demo .rk__row[data-r="2"] .rk__sb{width:42%}

.fe__demo .rk__row[data-r="3"] .rk__sb{width:31%}

.fe__demo .rk__row[data-r="4"] .rk__sb{width:39%}

.fe__demo .rk__row.me{
  z-index:3;background:var(--purple-50);border-color:var(--purple-200);
}

.fe__demo .rk__row.me .rk__ico{
  background:linear-gradient(140deg,var(--purple-500),var(--purple-800));
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.18), 0 3px 10px -2px rgba(91,47,135,.5);
}

.fe__demo .rk__row.me .rk__rank{color:var(--purple-600)}

.fe__demo .rk__row.me .rk__nm{background:var(--purple-400);width:56%}

.fe__demo .rk__row.me .rk__sb{background:var(--purple-200);width:34%}

.fe__demo .rk__row.me .rk__st{color:var(--purple-500)}

.fe__demo .rk__row.me.lift{box-shadow:0 14px 28px -12px rgba(91,47,135,.5);border-color:var(--purple-400)}

.fe__demo .rk__row.me.landed{background:linear-gradient(90deg,var(--purple-50),#fff)}

.fe__demo .rk__row.me.landed .rk__nm{width:68%}

.fe__demo .rk__delta{
  position:absolute;right:6px;top:50%;
  transform:translateY(-50%) scale(.7);
  font-family:var(--font-mono);font-size:.52rem;font-weight:700;letter-spacing:.05em;
  color:var(--purple-900);background:var(--lime);
  border-radius:100px;padding:3px 7px;
  opacity:0;pointer-events:none;
  box-shadow:0 5px 12px -3px rgba(0,0,0,.3);
  transition:opacity .45s, transform .45s cubic-bezier(.34,1.6,.5,1);
}

.fe__demo .rk__delta.on{opacity:1;transform:translateY(-50%) scale(1)}

/* metrics under the widget */
.fe__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;margin-top:20px;
  border-top:1px solid var(--purple-200);
  padding-top:18px;
}
.fe__s{padding:0 12px;border-left:1px solid var(--purple-200);text-align:center}
.fe__s:first-child{border-left:0;padding-left:0}
.fe__s:last-child{padding-right:0}
.fe__s-n{
  font-family:var(--font-display);font-size:1.42rem;font-weight:600;
  line-height:1;letter-spacing:-.022em;color:var(--purple-600);
  font-variant-numeric:tabular-nums;
}
.fe__s-l{font-size:.7rem;line-height:1.4;color:var(--muted);margin-top:7px}

@media(max-width:940px){
  .fe{grid-template-columns:1fr}
  .fe__demo{border-left:0;border-top:1px solid var(--purple-200)}
  .fe__body{padding:58px 26px 28px}
}
@media(max-width:520px){
  .fe__stats{grid-template-columns:1fr;gap:14px}
  .fe__s{border-left:0;padding:0;text-align:left;display:flex;align-items:baseline;gap:10px}
  .fe__s-l{margin-top:0}

.fe__demo .rk__stars{display:none}
}
@media (prefers-reduced-motion:reduce){

.fe__demo .rk__row{transition:none}

.fe__demo .rk__q i{animation:none}
}


/* --- hero: outer box only; .rk itself carries the card chrome --- */
.rk-wrap{
  width:100%;max-width:430px;
  margin-left:auto;
}
.rk-wrap > .rk{
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 26px 60px -30px rgba(91,47,135,.46);
}
@media(max-width:940px){ .rk-wrap{ margin:0 auto; } }

/* --- hero: the 700K+ footer sits inside the panel, as in the approved design --- */
/* keep breathing room under the last row before the panel edge */
.rk-wrap > .rk{ padding-bottom:18px; }
.rk-wrap .rk .rk__foot{
  margin-top:16px;padding:15px 0 0;
  border-top:1px solid var(--line);
  display:flex;align-items:flex-start;gap:13px;
}
.rk-wrap .rk .rk__foot .n{
  font-family:var(--font-display);font-size:1.95rem;font-weight:600;
  color:var(--purple-600);letter-spacing:-.022em;line-height:1.45;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.rk-wrap .rk .rk__foot .l{
  font-size:.83rem;line-height:1.45;color:var(--muted);padding-top:.30em;
}
.rk-wrap .rk .rk__foot .l b{ color:var(--ink);font-weight:700; }


/* ================================================================
   21. ABOUT — founders
   The portraits are cutouts on white, so they must not be cropped:
   contain + bottom-aligned, so each figure stands in the card.
   Cards alternate so the two portraits face into the page.
   ================================================================ */
.fdr-list{
  max-width:1060px;margin:0 auto;
  display:flex;flex-direction:column;gap:30px;
}
.fdr{
  display:grid;
  grid-template-columns:380px 1fr;
  align-items:end;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 24px 56px -34px rgba(91,47,135,.42);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.fdr:hover{
  border-color:var(--purple-300);
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(44,20,72,.05), 0 32px 70px -34px rgba(91,47,135,.5);
}

/* --- alternate: second founder's photo sits on the right --- */
.fdr:nth-child(even){ grid-template-columns:1fr 380px; }
.fdr:nth-child(even) .fdr__photo{ order:2; }
.fdr:nth-child(even) .fdr__body{ order:1; }

.fdr__photo{
  align-self:end;
  min-height:380px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#fff;
  padding:0;
}
.fdr__photo img{
  display:block;
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:contain;
  object-position:bottom center;
  filter:grayscale(100%) contrast(1.06);
  transition:filter .55s ease;
}
.fdr:hover .fdr__photo img{ filter:grayscale(0%) contrast(1); }

.fdr__body{
  padding:38px 40px 34px;
  display:flex;flex-direction:column;
  justify-content:center;
}
.fdr__bio{
  font-size:1rem;line-height:1.74;
  color:var(--ink-soft);
  margin:0 0 24px;
}
.fdr__id{
  padding-top:20px;
  border-top:1px solid var(--line);
}
.fdr__id h3{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;
  letter-spacing:-.016em;
  color:var(--ink);
  margin:0 0 5px;
}
.fdr__role{
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--purple-500);
  margin-bottom:14px;
}
.fdr__link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:.9rem;
  color:var(--purple-600);
  text-decoration:none;
}
.fdr__link:hover{ color:var(--purple-700); }

/* --- team photos: monochrome, layout untouched --- */
.partner-card .photo img{
  filter:grayscale(100%) contrast(1.06);
  transition:filter .55s ease;
}
.partner-card:hover .photo img{ filter:grayscale(0%) contrast(1); }

@media(max-width:820px){
  .fdr,
  .fdr:nth-child(even){ grid-template-columns:1fr; }
  .fdr:nth-child(even) .fdr__photo,
  .fdr__photo{ order:1; min-height:0; padding-top:22px; }
  .fdr:nth-child(even) .fdr__body,
  .fdr__body{ order:2; padding:28px 24px 26px; }
  /* stacked: cap the portrait's WIDTH, not just its height, or the box
     stretches full-bleed and the cutout floats in a sea of white */
  .fdr__photo img{
    width:auto;
    max-width:min(72%, 300px);
    max-height:330px;
  }
}
@media (prefers-reduced-motion:reduce){
  .fdr, .fdr__photo img, .partner-card .photo img{ transition:none; }
}

/* ================================================================
   22. ASO SCOPE — proven vs included, execution promise, AI wedge
   ================================================================ */

/* --- the execution promise --- */
.zvx-exec{
  display:flex;align-items:flex-start;gap:16px;
  max-width:860px;margin:0 auto 52px;
  background:linear-gradient(120deg,var(--purple-50),#fff);
  border:1px solid var(--purple-200);
  border-left:3px solid var(--purple-500);
  border-radius:16px;
  padding:22px 26px;
}
.zvx-exec__i{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--purple-600);color:#fff;
}
.zvx-exec p{
  margin:0;font-size:.97rem;line-height:1.68;color:var(--ink-soft);
}
.zvx-exec p b{color:var(--ink);}

/* --- bands --- */
.zvx-band{margin-bottom:46px;}
.zvx-band__hd{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.zvx-band__hd p{
  margin:0;font-size:.88rem;color:var(--muted);line-height:1.5;
}
.zvx-tag{
  display:inline-flex;align-items:center;gap:6px;
  flex:0 0 auto;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:100px;padding:5px 12px;
}
.zvx-tag--proof{
  color:#fff;background:var(--purple-600);border-color:var(--purple-600);
}

/* --- capability cards --- */
.zvx-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.zvx{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 26px;
  transition:border-color .22s, transform .22s;
}
.zvx:hover{border-color:var(--purple-300);transform:translateY(-2px);}
.zvx h4{
  font-size:1.05rem;font-weight:700;letter-spacing:-.008em;
  color:var(--ink);margin:0 0 8px;
}
.zvx p{
  font-size:.9rem;line-height:1.62;color:var(--ink-soft);
  margin:0 0 16px;flex:1;
}
.zvx__n, .zvx__t{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  border-radius:100px;padding:5px 11px;
}
.zvx__n{
  color:var(--purple-700);background:var(--purple-50);
  border:1px solid var(--purple-200);
}
.zvx__t{
  color:var(--muted);background:var(--bg-tint);
  border:1px solid var(--line);
}

/* --- the AI wedge --- */
.zvx-ai{
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;
  background:
    radial-gradient(700px 400px at 88% 0%, var(--purple-700) 0%, transparent 62%),
    var(--purple-900);
  border-radius:24px;
  padding:44px 46px;
  margin-top:8px;
}
.zvx-ai__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--purple-300);margin-bottom:16px;
}
.zvx-ai__eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(200,245,96,.18);
}
.zvx-ai h3{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:600;line-height:1.16;letter-spacing:-.02em;
  color:#fff;margin:0 0 16px;
}
.zvx-ai h3 .lime{color:var(--lime);}
.zvx-ai__l p{
  font-size:.95rem;line-height:1.72;
  color:rgba(255,255,255,.72);margin:0 0 14px;
}
.zvx-ai__l p:last-child{margin-bottom:0;}
.zvx-ai__l em{color:rgba(255,255,255,.92);font-style:italic;}

.zvx-ai__r{
  list-style:none;margin:0;padding:0;
  align-self:center;
}
.zvx-ai__r li{
  position:relative;
  padding:13px 0 13px 26px;
  font-size:.9rem;line-height:1.55;
  color:rgba(255,255,255,.7);
  border-top:1px solid rgba(255,255,255,.1);
}
.zvx-ai__r li:last-child{border-bottom:1px solid rgba(255,255,255,.1);}
.zvx-ai__r li b{color:#fff;font-weight:700;}
.zvx-ai__r li::before{
  content:"";position:absolute;left:2px;top:1.28em;
  width:9px;height:5px;
  border-left:2px solid var(--lime);
  border-bottom:2px solid var(--lime);
  transform:rotate(-45deg);
}

@media(max-width:900px){
  .zvx-grid{grid-template-columns:1fr;}
  .zvx-ai{grid-template-columns:1fr;gap:30px;padding:34px 26px;}
}
@media(max-width:560px){
  .zvx-exec{flex-direction:column;gap:12px;padding:20px;}
}

/* --- pricing card: the execution promise, restated at the ask --- */
.zvp-card__note{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.03em;color:var(--purple-600);
  background:var(--purple-50);
  border:1px solid var(--purple-200);
  border-radius:10px;
  padding:9px 12px;
  margin:0 0 16px;
  line-height:1.45;
}
.fe__note{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  color:var(--purple-600);background:var(--purple-50);
  border:1px solid var(--purple-200);border-radius:10px;
  padding:9px 12px;margin:0 0 20px;line-height:1.45;
}

/* ================================================================
   23. TEARDOWN FORM
   The highest-intent form on the site. One link, one email, nothing
   else. Every field added here costs conversions.
   ================================================================ */
.td-form{
  max-width:760px;margin:30px auto 0;
  text-align:left;
}
.td-form__row{
  display:grid;
  grid-template-columns:1.35fr 1fr auto;
  gap:10px;
  background:#fff;
  border:1px solid var(--purple-200);
  border-radius:16px;
  padding:10px;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 18px 44px -26px rgba(91,47,135,.45);
  transition:border-color .25s, box-shadow .25s;
}
.td-form__row:focus-within{
  border-color:var(--purple-400);
  box-shadow:0 1px 2px rgba(44,20,72,.05), 0 22px 52px -26px rgba(91,47,135,.55);
}
.td-form__field{
  display:flex;align-items:center;gap:9px;
  background:var(--purple-50);
  border:1px solid transparent;
  border-radius:11px;
  padding:0 13px;
  min-width:0;
  transition:background .2s, border-color .2s;
}
.td-form__field:focus-within{
  background:#fff;
  border-color:var(--purple-200);
}
.td-form__field svg{flex:0 0 auto;color:var(--purple-400);}
.td-form__field input{
  flex:1;min-width:0;
  border:0;background:transparent;outline:none;
  font-family:var(--font-body);
  font-size:.95rem;color:var(--ink);
  padding:14px 0;
}
.td-form__field input::placeholder{color:var(--muted);opacity:.85;}
.td-form__go{
  flex:0 0 auto;
  border-radius:11px;
  padding:14px 20px;
  white-space:nowrap;
}
.td-form__fine{
  font-size:.82rem;line-height:1.55;color:var(--muted);
  margin:14px 2px 0;text-align:center;
}
.td-form__fine span{display:block;margin-top:3px;opacity:.8;}

@media(max-width:760px){
  .td-form__row{grid-template-columns:1fr;}
  .td-form__go{justify-content:center;}
}

/* ================================================================
   24. ASO SCORE CHECKER
   ================================================================ */
.asc{
  max-width:820px;margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(44,20,72,.04), 0 26px 60px -34px rgba(91,47,135,.42);
}
.asc__hd{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 30px 20px;
}
.asc__hd h2{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  letter-spacing:-.018em;color:var(--ink);margin:0 0 4px;
}
.asc__hd p{font-size:.88rem;color:var(--muted);margin:0;}
.asc__meter{display:flex;align-items:baseline;gap:3px;flex:0 0 auto;}
.asc__meter-n{
  font-family:var(--font-display);font-size:2.6rem;font-weight:600;
  letter-spacing:-.03em;color:var(--purple-600);line-height:1;
  font-variant-numeric:tabular-nums;
  transition:color .4s;
}
.asc__meter-d{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);}

.asc__bar{height:4px;background:var(--purple-50);}
.asc__bar-f{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--purple-400),var(--purple-600));
  transition:width .45s cubic-bezier(.22,.8,.3,1);
}

.asc__list{padding:8px 12px 4px;}
.asc__q{
  display:flex;align-items:flex-start;gap:13px;
  padding:15px 18px;
  border-radius:13px;
  cursor:pointer;
  transition:background .2s;
}
.asc__q:hover{background:var(--purple-50);}
.asc__q input{position:absolute;opacity:0;pointer-events:none;}
.asc__box{
  flex:0 0 auto;
  width:20px;height:20px;margin-top:1px;
  border:2px solid var(--purple-200);
  border-radius:6px;
  background:#fff;
  position:relative;
  transition:background .2s, border-color .2s;
}
.asc__box::after{
  content:"";position:absolute;
  left:5px;top:2px;width:5px;height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(0);
  transition:transform .22s cubic-bezier(.34,1.6,.5,1);
}
.asc__q.on .asc__box{
  background:var(--purple-600);
  border-color:var(--purple-600);
}
.asc__q.on .asc__box::after{transform:rotate(45deg) scale(1);}
.asc__t{
  font-size:.86rem;line-height:1.55;color:var(--muted);
}
.asc__t b{
  display:block;
  font-size:.95rem;font-weight:700;
  color:var(--ink);margin-bottom:3px;
  transition:color .2s;
}
.asc__q.on .asc__t b{color:var(--purple-700);}

/* verdict */
.asc__out{
  border-top:1px solid var(--line);
  padding:24px 30px 26px;
  background:var(--bg-tint);
  transition:background .4s;
}
.asc__out[data-band="low"]{background:#fdf3f4;}
.asc__out[data-band="mid"]{background:#fdf8ee;}
.asc__out[data-band="high"]{background:#f0f8f3;}
.asc__grade{
  display:block;
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:5px;
}
.asc__verdict p{font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin:0;}
.asc__cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
  margin-top:20px;padding-top:20px;
  border-top:1px solid rgba(44,20,72,.09);
}
.asc__cta p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft);max-width:30rem;}
.asc__cta p b{display:block;color:var(--ink);}
.asc__cta .btn{flex:0 0 auto;}

/* key */
.asc-key{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.asc-key__i{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;
}
.asc-key__r{
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--purple-500);
}
.asc-key__i h4{
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);margin:9px 0 8px;
}
.asc-key__i p{font-size:.88rem;line-height:1.62;color:var(--ink-soft);margin:0;}

@media(max-width:760px){
  .asc__hd{flex-direction:column;align-items:flex-start;gap:12px;}
  .asc__cta{flex-direction:column;align-items:stretch;}
  .asc__cta .btn{justify-content:center;}
  .asc-key{grid-template-columns:1fr;}
}

/* keyboard focus must be visible: the input is hidden, so ring the box */
.asc__q input:focus-visible + .asc__box{
  outline:2px solid var(--purple-500);
  outline-offset:3px;
}

/* --- teardown form, stacked variant (services page, narrow column) --- */
.td-form--stack{
  max-width:440px;margin:0;
}
.td-form--stack .td-form__field{
  background:#fff;
  border:1px solid var(--purple-200);
  border-radius:12px;
  margin-bottom:10px;
}
.td-form--stack .td-form__field:focus-within{
  border-color:var(--purple-400);
  box-shadow:0 0 0 3px rgba(123,63,181,.10);
}
.td-form--stack .btn{margin-top:4px;}

/* --- carousel to next section: 84px + 96px was stacking into 180px of
       dead white. The drag rail is the section's natural end point. --- */
section.zvc{ padding-bottom:22px; }
section.zvc + section.problem-section{ padding-top:40px; }
/* main.css:5830 forces `section{padding:52px 0 !important}` below 760px,
   which stacks 104px of dead white under the carousel rail. Beat it. */
@media(max-width:900px){
  section.zvc{ padding-bottom:14px !important; }
  section.zvc + section.problem-section{ padding-top:30px !important; }
}


/* ================================================================
   25. HOMEPAGE RHYTHM
   Every section was the same wash, so the page read as one flat
   sheet. Alternate light/tint, with the CAROUSEL as the dark break
   in the middle, the way /aso does it.
   ================================================================ */

/* the service ladder takes the tint, so it separates from the carousel */
section.problem-section{ background:var(--bg-tint) !important; }

/* ---------- THE DARK BREAK: the case-study carousel ---------- */
section.zvc.zv-dark{
  background:
    radial-gradient(1000px 500px at 84% -12%, var(--purple-700) 0%, transparent 62%),
    var(--purple-900);
}

/* header */
.zvc.zv-dark .zvc__eyebrow{ color:var(--purple-300); }
.zvc.zv-dark .zvc__head h2{ color:#fff; }
.zvc.zv-dark .zvc__head h2 .accent{ color:var(--lime); }
.zvc.zv-dark .zvc__head p{ color:rgba(255,255,255,.72); }

/* the "All case studies" button */
.zvc.zv-dark .btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  background:transparent;
}
.zvc.zv-dark .btn-ghost:hover{
  color:var(--lime);
  border-color:var(--lime);
}

/* the cards stay LIGHT: the console screenshots are the point, and
   they read sharpest on white. Floating them on the dark background
   is what gives the section its depth. */
.zvc.zv-dark .zvc-card{
  background:#fff;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 24px 56px -28px rgba(0,0,0,.65);
}
.zvc.zv-dark .zvc-card:hover{
  border-color:var(--purple-300);
  box-shadow:0 32px 70px -28px rgba(0,0,0,.75);
}
.zvc.zv-dark .zvc-card--lead{
  border-color:var(--purple-400);
}

/* drag rail + arrows */
.zvc.zv-dark .zvc__hint{ color:rgba(255,255,255,.5); }
.zvc.zv-dark .zvc__rail{ background:rgba(255,255,255,.14); }
.zvc.zv-dark .zvc__thumb{ background:var(--lime); }
.zvc.zv-dark .zvc__btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}
.zvc.zv-dark .zvc__btn:hover:not(:disabled){
  background:var(--lime);
  border-color:var(--lime);
  color:var(--purple-900);
}
.zvc.zv-dark .zvc__btn:disabled{
  opacity:.3;
}

/* After the dark carousel, alternate light / tint / light so no two
   neighbours share a wash.

   NB: these MUST stay scoped to the homepage. The last rule was written as a
   bare sibling selector and it reached into /aso, stripping the dark CTA's
   background and leaving white text on a white section (contrast 1.1). */
body.page-home section.zvc.zv-dark + section.problem-section{ background:var(--bg) !important; }
body.page-home section.problem-section + section.zvp-sec.tint{ background:var(--bg-tint) !important; }
body.page-home section.zvp-sec.tint + section:not(.zvp-cta):not(.cta-band){ background:var(--bg) !important; }

/* whatever else happens, the CTA band is dark. It is the last thing a founder
   reads before the teardown form. */
section.zvp-cta{ background:var(--purple-800) !important; color:#fff; }

/* --- testimonials: only Bernie's card carries the "International client"
       badge, which pushed his quote 39px below the other two. Reserve the
       badge's row in every card so all three quotes start on one line. --- */
.zvp-vouches > *{
  display:flex;
  flex-direction:column;
}
.zvp-vouches > *:not(:has(.zvp-v__tag))::before{
  content:"";
  display:block;
  height:26px;            /* badge height */
  margin-bottom:14px;     /* badge's own bottom margin */
  flex:0 0 auto;
}
/* footer pinned to the bottom, so the attributions line up too */
.zvp-vouches blockquote{ flex:1; }

/* --- The desktop nav needs ~1083px to lay out, but main.css only handed
       over to the hamburger at 768px. Every width in between (laptops,
       half-screen windows) overflowed horizontally. Hand over earlier. --- */
@media (max-width:1120px){
  .nav-links{
    display:none;
    position:absolute; top:72px; left:16px; right:16px;
    flex-direction:column; align-items:stretch;
    background:var(--card);
    padding:18px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-strong);
    border:1px solid var(--line);
    z-index:60;
  }
  .nav-links.open{ display:flex; }
  .menu-toggle{ display:flex; }
}


/* ================================================================
   26. CASE STUDY THUMBNAILS
   The artwork is 3:2. main.css sets .essay-card .cover to 16/9, and
   then overrides it to `16/10 !important` in THREE separate media
   blocks, so the art was cropped ~16% top and bottom, clipping the
   CASE STUDY badge. Restate 3:2 with !important at every one of those
   breakpoints so the art keeps the framing it was designed with.

   The cover also carries a white radial ::after, so the image was
   already being washed; ::before now applies one deliberate 20% veil
   and the radial is pulled right back.
   ================================================================ */
.essay-card .cover[style*="background-image"],
.essay-card .cover[style*="background-image"]:is(:hover, :focus){
  aspect-ratio:3 / 2 !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#fff;
  position:relative;
}
@media (max-width:900px){
  .essay-card .cover[style*="background-image"]{ aspect-ratio:3 / 2 !important; }
}
@media (max-width:760px){
  .essay-card .cover[style*="background-image"]{ aspect-ratio:3 / 2 !important; }
}

/* the 20% fade */
.essay-card .cover[style*="background-image"]::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.20);
  transition:background .35s ease;
  pointer-events:none;
}
/* pull back the pre-existing white radial, or the art washes out twice */
.essay-card .cover[style*="background-image"]::after{
  background:radial-gradient(circle at 30% 60%, rgba(255,255,255,.12), transparent 60%);
}
/* art returns to full strength on hover */
.essay-card:hover .cover[style*="background-image"]::before{
  background:rgba(255,255,255,0);
}

/* --- featured case study: the art is 3:2 but the cover was pinned to 4/3
       with object-fit:cover, which sliced the right edge off (the tall bar).
       Give the panel the art's own ratio so the full frame shows. --- */
.cs-feat__cover{
  /* Fill the card, no letterboxing. The text column drives the height, so
     the card is also capped below: that keeps the panel close to the art's
     own 3:2 and reduces how much cover has to crop. */
  aspect-ratio:auto !important;
  align-self:stretch;
  height:100%;
  min-height:100%;
}
/* Cap the card so the image panel stays near the art's 3:2 instead of going
   tall and narrow (which forced a 22% horizontal crop). height, not
   max-height: max-height let the stretched cover overflow the box. */
/* min-height, not height: the text needs ~473px, so a hard 420px clipped it
   and (being centre-flexed) bled 13px off BOTH the top and the bottom.
   The card now grows to whatever the text needs, and the image panel
   stretches to match, so it still meets top/bottom/right with no gap. */
.cs-feat__card{
  display:grid;
  grid-template-columns:0.92fr 1.3fr;
  gap:0;
  padding:0;
  overflow:hidden;
  align-items:stretch;
  min-height:420px;
}
/* the dek is what makes the column tall; tighten it and the whole card
   shortens, which widens the image panel's ratio and cuts the crop */
.cs-feat__card h2{ font-size:2rem !important; line-height:1.12 !important; margin-bottom:14px !important; }
.cs-feat__card p{ font-size:.98rem !important; line-height:1.55 !important; margin-bottom:20px !important; }
.cs-feat__card > div:first-child{
  display:flex; flex-direction:column; justify-content:center;
}
.cs-feat__cover{ height:auto !important; min-height:100% !important; align-self:stretch; }
@media (max-width:900px){
  .cs-feat__card{ height:auto; }
  .cs-feat__cover{ height:auto !important; }
}
@media (max-width:900px){
  /* stacked: no text column forcing the height, so show the whole frame */
  .cs-feat__cover{ aspect-ratio:3 / 2 !important; height:auto; min-height:0; }
  .cs-feat__cover img{ object-fit:contain !important; object-position:center !important; }
}

/* At ~1024px the dek wraps to more lines, so the card grows taller, the image
   panel gets narrow, and cover crops ~17% into the artwork. Stack the featured
   card below 1100px instead: full-width art, no crop, no squeeze. */
@media (max-width:1100px){
  .cs-feat__card{ grid-template-columns:1fr !important; min-height:0; }
  .cs-feat__cover{
    aspect-ratio:3 / 2 !important;
    height:auto !important; min-height:0 !important;
    order:-1;                      /* art on top when stacked */
  }
  .cs-feat__cover img{ object-fit:contain !important; object-position:center !important; }
}

/* ================================================================
   27. CASE STUDY PROOF — the real console screenshots
   The whole pitch is "we can show you the dashboard", but the case
   study pages were pure text. These are the receipts.
   ================================================================ */
.cs-proof__head{ margin-bottom:26px; }
.cs-proof__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--purple-600);
  border-radius:100px;padding:5px 12px;
  margin-bottom:14px;
}
.cs-proof__head h3{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.2vw,1.85rem);
  font-weight:600;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 8px;
}
.cs-proof__head p{
  font-size:.94rem;color:var(--muted);margin:0;
}

.cs-proof{
  display:flex;flex-direction:column;gap:34px;
}
.cs-proof__item{ margin:0; }
.cs-proof__item figcaption{
  margin-top:14px;
  font-size:.92rem;line-height:1.6;
  color:var(--ink-soft);
  padding-left:14px;
  border-left:2px solid var(--purple-200);
}
/* the console frame already exists (§ earlier); just make sure the shot
   fills it cleanly inside the narrow container */
.cs-proof .zvp-console{ width:100%; }
.cs-proof .zvp-console img{
  display:block;width:100%;height:auto;
}

@media(max-width:760px){
  .cs-proof{ gap:26px; }
  .cs-proof__item figcaption{ font-size:.88rem; }
}

/* ================================================================
   28. PRICE COMPARISON
   ================================================================ */
.zvc-table{
  max-width:920px;margin:0 auto;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.zvc-row{
  display:grid;
  grid-template-columns:1.05fr .7fr 1.6fr;
  gap:20px;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.zvc-row:last-child{ border-bottom:0; }

.zvc-row--head{
  background:var(--bg-tint);
  padding:13px 26px;
  font-family:var(--font-mono);
  font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.zvc-row--head div{ align-self:center; }

/* our row: the whole point of the table */
.zvc-row--us{
  background:linear-gradient(100deg,var(--purple-50),#fff 70%);
  border-left:3px solid var(--purple-500);
  position:relative;
}
.zvc-who{
  display:block;
  font-weight:700;font-size:1.02rem;
  color:var(--ink);
  letter-spacing:-.01em;
}
.zvc-sub{
  display:block;margin-top:3px;
  font-size:.8rem;color:var(--muted);
}
.zvc-flag{
  display:inline-block;margin-top:6px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--purple-600);
  border-radius:100px;padding:3px 9px;
}
.zvc-row b{
  font-family:var(--font-display);
  font-size:1.16rem;font-weight:600;
  color:var(--ink);
  letter-spacing:-.015em;
  white-space:nowrap;
}
.zvc-price{ color:var(--purple-600) !important; font-size:1.45rem !important; }
.zvc-plus{
  display:block;margin-top:3px;
  font-size:.76rem;color:var(--muted);
}
.zvc-row > div:last-child{
  font-size:.9rem;line-height:1.6;color:var(--ink-soft);
}
.zvc-row em{ font-style:italic; color:var(--ink); }

.zvc-note{
  max-width:820px;margin:22px auto 0;
  text-align:center;
  font-size:.86rem;line-height:1.62;
  color:var(--muted);
}

@media(max-width:820px){
  .zvc-row{ grid-template-columns:1fr; gap:8px; padding:20px; }
  .zvc-row--head{ display:none; }
  .zvc-row b{ font-size:1.3rem; }
}

/* ================================================================
   29. FAQ
   ================================================================ */
.zvq{ max-width:820px;margin:0 auto; }
.zvq__i{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .22s;
}
.zvq__i[open]{ border-color:var(--purple-300); }
.zvq__i summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;
  font-weight:700;font-size:1rem;
  color:var(--ink);
  transition:color .2s;
}
.zvq__i summary::-webkit-details-marker{ display:none; }
.zvq__i summary:hover{ color:var(--purple-700); }
.zvq__i summary i{
  flex:0 0 auto;
  position:relative;width:13px;height:13px;
}
.zvq__i summary i::before,
.zvq__i summary i::after{
  content:"";position:absolute;
  background:var(--purple-500);
  transition:transform .25s cubic-bezier(.3,.9,.4,1);
}
.zvq__i summary i::before{ top:5.5px;left:0;width:13px;height:2px; }
.zvq__i summary i::after{ left:5.5px;top:0;width:2px;height:13px; }
.zvq__i[open] summary i::after{ transform:rotate(90deg); }
.zvq__a{
  padding:0 22px 20px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:-1px;
}
.zvq__a p{
  font-size:.94rem;line-height:1.68;
  color:var(--ink-soft);
  margin:0 0 11px;
}
.zvq__a p:last-child{ margin-bottom:0; }
.zvq__a b{ color:var(--ink); }
.zvq__i summary:focus-visible{
  outline:2px solid var(--purple-500);
  outline-offset:-2px;
}