/* ============================================================
   CAPABILITIES — "fade to light mode" growth-feature showcase
   Sits directly after the dark Pipeline section. Opens with a
   dark→white fade, then 5 alternating rows, each with a bespoke
   animated demo. On-brand: jewel green + cerulean + warm gold.
   ============================================================ */
.capabilities { position: relative; background: #fff; color: var(--color-neutral-darkest); }

/* the dark→light fade band that blends out of Pipeline (#06100b) */
.cap-fade { height: clamp(150px, 17vw, 230px);
  background: linear-gradient(to bottom, #06100b 0%, #06100b 3%, #081511 28%, #cfe0d8 82%, #ffffff 100%); }

.cap-inner { padding: var(--section-pad-y) 5%; }

/* ---- intro ---- */
.cap-intro { max-width: 50rem; margin: 0 auto 5.5rem; text-align: center; }
.cap-intro .eyebrow { color: var(--color-jewel); }
.cap-intro h2 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); margin: 0.5rem 0 1.5rem; }
.cap-intro p { font-size: var(--text-large); color: var(--color-neutral-dark); max-width: 40rem; margin: 0 auto; }
.cap-intro .cap-rise { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.cap-intro .cap-rise:nth-child(2) { transition-delay: .1s; }
.cap-intro .cap-rise:nth-child(3) { transition-delay: .22s; }
.cap-intro.in .cap-rise { opacity: 1; transform: none; }

/* ---- alternating rows ---- */
.cap-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 6vw, 6rem) 0; }
.cap-row + .cap-row { border-top: 1px solid var(--color-neutral-darkest-10); }
.cap-row.rev .cap-copy { order: 2; }
.cap-row.rev .cap-visual { order: 1; }

/* copy column */
.cap-copy { max-width: 30rem; opacity: 0; transform: translateY(28px); transition: opacity .7s ease .05s, transform .9s cubic-bezier(.2,.7,.2,1) .05s; }
.cap-row.in .cap-copy { opacity: 1; transform: none; }
.cap-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; font-family: var(--font-serif); font-weight: 600; font-size: 0.95rem;
  color: var(--color-jewel); background: var(--color-jewel-lightest); box-shadow: inset 0 0 0 1px rgba(14,83,52,0.14); margin-bottom: 1.25rem; }
.cap-eyebrow { font-weight: 600; font-size: var(--text-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-deep-cerulean-dark); margin: 0 0 0.75rem; }
.cap-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; }
.cap-body { font-size: var(--text-medium); line-height: 1.6; color: var(--color-neutral-dark); margin: 0 0 1.5rem; }
.cap-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.cap-points li { display: flex; align-items: center; gap: 0.65rem; font-size: var(--text-regular); font-weight: 500; color: var(--color-neutral-darkest); }
.cap-points .cap-check { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; flex: none;
  border-radius: 999px; background: var(--color-jewel); color: #fff; }
.cap-points .cap-check svg { width: 0.85rem; height: 0.85rem; }

/* visual column — tinted stage so the white demos pop */
.cap-visual { opacity: 0; transform: translateY(34px) scale(.98); transition: opacity .8s ease .12s, transform 1s cubic-bezier(.2,.7,.2,1) .12s; }
.cap-row.in .cap-visual { opacity: 1; transform: none; }
.cap-stage { position: relative; min-height: 400px; border-radius: 22px; padding: 30px; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(130% 120% at 18% 0%, #f2f8f5 0%, #eaf3ef 52%, #e6eef1 100%);
  box-shadow: 0 1px 2px rgba(13,13,13,0.04), 0 40px 70px -40px rgba(8,40,28,0.35), inset 0 0 0 1px rgba(13,13,13,0.06); }
.cap-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 100%, rgba(10,127,175,0.10) 0%, rgba(10,127,175,0) 70%); }

/* shared mini chrome bits */
.cap-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(13,13,13,0.05), 0 18px 40px -22px rgba(13,13,13,0.4); border: 1px solid rgba(13,13,13,0.06); }
.cap-av { border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.cap-floatpill { position: absolute; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; background: #fff; color: var(--color-jewel-dark);
  box-shadow: 0 10px 30px -8px rgba(13,13,13,0.35), inset 0 0 0 1px rgba(13,13,13,0.05); }
.cap-floatpill svg { width: 14px; height: 14px; }

/* =========================================================
   VISUAL 1 · responsive lead-gen site
   ========================================================= */
.cap-v1 { position: relative; width: 100%; max-width: 384px; aspect-ratio: 1/1; display: grid; place-items: center; }

/* desktop browser showing the live customer site */
.cap-browser { position: absolute; left: 0; top: 22%; width: 80%; border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 2px rgba(13,13,13,0.06), 0 30px 60px -28px rgba(13,13,13,0.5); border: 1px solid rgba(13,13,13,0.07);
  transform: translateX(-6px); }
.cap-browser-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #f3f5f4; border-bottom: 1px solid rgba(13,13,13,0.06); }
.cap-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(13,13,13,0.14); }
.cap-url { margin-left: 7px; flex: 1; font-size: 8.5px; font-weight: 600; color: #8a948f; background: #fff; border-radius: 5px; padding: 3px 9px; white-space: nowrap; overflow: hidden; }

/* the customer website itself (shared by desktop + phone) */
.cap-web { position: relative; background: #fff; }
.cap-web-hero { position: relative; height: 150px; overflow: hidden; }
.cap-web-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-web-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,20,15,0.80) 0%, rgba(8,20,15,0.10) 52%, rgba(8,20,15,0.38) 100%); }
.cap-web-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; }
.cap-web-logo { font-family: var(--font-serif); font-weight: 600; font-size: 11px; color: #fff; letter-spacing: -0.01em; }
.cap-web-right { display: flex; align-items: center; gap: 10px; }
.cap-web-links { display: flex; gap: 9px; font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.88); }
.cap-web-book { font-size: 8px; font-weight: 700; color: var(--color-jewel-dark); background: #fff; padding: 4px 9px; border-radius: 999px; }
.cap-web-burger { color: #fff; display: inline-flex; }
.cap-web-burger svg { width: 14px; height: 14px; }
.cap-web-copy { position: absolute; left: 13px; right: 13px; bottom: 12px; z-index: 3; }
.cap-web-eyebrow { font-size: 7px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.cap-web-h { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.02; color: #fff; margin-top: 5px; letter-spacing: -0.01em; }
.cap-web-btn { display: inline-block; margin-top: 9px; font-size: 8px; font-weight: 700; color: #14110e; background: #fff; padding: 5px 11px; border-radius: 999px; }
.cap-web-strip { display: flex; gap: 7px; padding: 11px 12px; }
.cap-web-svc { flex: 1; }
.cap-web-svc-bar { height: 5px; border-radius: 3px; background: var(--color-jewel-lightest); margin-bottom: 4px; }
.cap-web-svc:nth-child(2) .cap-web-svc-bar { background: var(--color-deep-cerulean-lightest); }
.cap-web-svc:nth-child(3) .cap-web-svc-bar { background: #fbf0db; }
.cap-web-svc-line { height: 4px; border-radius: 2px; background: rgba(13,13,13,0.09); }
.cap-web-svc-line.short { width: 60%; margin-top: 3px; }

/* phone (responsive view) overlapping bottom-right */
.cap-phone { position: absolute; right: 0; bottom: 2%; width: 37%; border-radius: 20px; overflow: hidden;
  background: #0d0d0d; padding: 5px; box-shadow: 0 1px 2px rgba(13,13,13,0.1), 0 36px 60px -22px rgba(13,13,13,0.6);
  animation: capFloat 5.5s ease-in-out infinite; }
.cap-phone-screen { border-radius: 16px; overflow: hidden; background: #fff; }
.cap-phone .cap-web-hero { height: 212px; }
.cap-phone .cap-web-h { font-size: 15px; }
.cap-phone .cap-web-strip { display: none; }
.cap-toast { position: absolute; left: 4%; top: 6%; opacity: 0; transform: translateY(10px);
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 12px; background: #fff;
  box-shadow: 0 14px 36px -10px rgba(13,13,13,0.4), inset 0 0 0 1px rgba(13,13,13,0.05); }
.cap-toast-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--color-jewel-lightest); color: var(--color-jewel); display: grid; place-items: center; flex: none; }
.cap-toast-ic svg { width: 16px; height: 16px; }
.cap-toast-t { font-size: 12px; font-weight: 700; line-height: 1.1; }
.cap-toast-s { font-size: 10.5px; color: var(--color-neutral); margin-top: 2px; }
.cap-row.in .cap-toast { animation: capToast 4.5s ease-in-out 0.6s infinite; }
.cap-v1-count { right: 0; bottom: 0; }
@keyframes capFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes capToast { 0% { opacity: 0; transform: translateY(10px); } 12%,46% { opacity: 1; transform: translateY(0); } 60%,100% { opacity: 0; transform: translateY(-6px); } }

/* =========================================================
   VISUAL 2 · 5-star review funnel
   ========================================================= */
.cap-v2 { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.cap-rating { padding: 18px 20px; display: flex; align-items: center; gap: 18px; }
.cap-rating-num { font-family: var(--font-serif); font-weight: 600; font-size: 46px; line-height: 1; color: var(--color-jewel); }
.cap-rating-side { display: flex; flex-direction: column; gap: 6px; }
.cap-gchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--color-neutral-dark); }
.cap-g { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from -45deg, #0a7faf, #0e5334, #e2a72e, #0a7faf); display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; font-family: var(--font-body); }
.cap-stars { display: flex; gap: 3px; }
.cap-stars svg { width: 17px; height: 17px; color: #e2a72e; fill: #e2a72e; opacity: 0; transform: scale(.4); }
.cap-row.in .cap-stars svg { animation: capStar .5s cubic-bezier(.2,1.4,.4,1) forwards; }
.cap-row.in .cap-stars svg:nth-child(1){animation-delay:.25s} .cap-row.in .cap-stars svg:nth-child(2){animation-delay:.37s}
.cap-row.in .cap-stars svg:nth-child(3){animation-delay:.49s} .cap-row.in .cap-stars svg:nth-child(4){animation-delay:.61s}
.cap-row.in .cap-stars svg:nth-child(5){animation-delay:.73s}
.cap-rating-meta { font-size: 11px; color: var(--color-neutral); }
.cap-rev { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; opacity: 0; transform: translateX(18px); }
.cap-row.in .cap-rev { animation: capSlideIn .6s cubic-bezier(.2,.7,.2,1) forwards; }
.cap-row.in .cap-rev:nth-child(1){animation-delay:.5s} .cap-row.in .cap-rev:nth-child(2){animation-delay:.66s} .cap-row.in .cap-rev:nth-child(3){animation-delay:.82s}
.cap-rev .cap-av { width: 30px; height: 30px; }
.cap-rev-name { font-size: 12.5px; font-weight: 700; }
.cap-rev-stars { color: #e2a72e; font-size: 10px; letter-spacing: 1px; margin: 1px 0 3px; }
.cap-rev-txt { font-size: 11px; color: var(--color-neutral-dark); line-height: 1.4; }
.cap-v2-pill { right: 22px; bottom: 14px; }
@keyframes capStar { to { opacity: 1; transform: scale(1); } }
@keyframes capSlideIn { to { opacity: 1; transform: none; } }

/* =========================================================
   VISUAL 3 · missed-call text-back (phone)
   ========================================================= */
.cap-v3 { position: relative; display: grid; place-items: center; }
.cap-phone3 { width: 230px; border-radius: 30px; background: #0d0d0d; padding: 9px; box-shadow: 0 1px 2px rgba(13,13,13,0.1), 0 40px 70px -28px rgba(13,13,13,0.6); }
.cap-phone3-screen { border-radius: 22px; background: #f4f6f5; overflow: hidden; height: 372px; display: flex; flex-direction: column; }
.cap-chat-head { display: flex; align-items: center; gap: 9px; padding: 14px 14px 11px; background: #fff; border-bottom: 1px solid rgba(13,13,13,0.07); }
.cap-chat-head .cap-av { width: 30px; height: 30px; }
.cap-chat-name { font-size: 13px; font-weight: 700; line-height: 1.1; }
.cap-chat-sub { font-size: 10px; color: var(--color-neutral); }
.cap-chat { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; }
.cap-chat > * { opacity: 0; transform: translateY(8px); }
.cap-row.in .cap-chat > * { animation: capChat .5s ease forwards; }
.cap-row.in .cap-missed { animation-delay: .35s; }
.cap-row.in .cap-autotag { animation-delay: .9s; }
.cap-row.in .cap-b1 { animation-delay: 1.35s; }
.cap-row.in .cap-typing { animation: capChat .5s ease 1.9s forwards, capTypeOut .01s linear 3.0s forwards; }
.cap-row.in .cap-b2 { animation-delay: 3.0s; }
.cap-missed { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
  color: #b23b2e; background: #fbeae8; padding: 5px 11px; border-radius: 999px; }
.cap-missed svg { width: 12px; height: 12px; }
.cap-autotag { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-deep-cerulean-dark); background: var(--color-deep-cerulean-lightest); padding: 4px 9px; border-radius: 999px; }
.cap-autotag svg { width: 11px; height: 11px; }
.cap-bubble { max-width: 78%; font-size: 11.5px; line-height: 1.4; padding: 9px 12px; border-radius: 15px; }
.cap-bubble.out { align-self: flex-end; background: var(--color-jewel); color: #fff; border-bottom-right-radius: 5px; }
.cap-bubble.in { align-self: flex-start; background: #fff; color: var(--color-neutral-darkest); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(13,13,13,0.07); }
.cap-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 13px; background: #fff; border-radius: 15px; box-shadow: 0 1px 2px rgba(13,13,13,0.07); }
.cap-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-light); animation: capBlink 1.2s infinite; }
.cap-typing span:nth-child(2){animation-delay:.2s} .cap-typing span:nth-child(3){animation-delay:.4s}
@keyframes capChat { to { opacity: 1; transform: none; } }
@keyframes capTypeOut { to { opacity: 0; display: none; } }
@keyframes capBlink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* =========================================================
   VISUAL 4 · local SEO ranking climb
   ========================================================= */
.cap-v4 { width: 100%; max-width: 370px; }
.cap-serp { padding: 0; overflow: hidden; }
.cap-serp-bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid rgba(13,13,13,0.07); font-size: 12.5px; color: var(--color-neutral-dark); }
.cap-serp-bar svg { width: 15px; height: 15px; color: var(--color-neutral); }
.cap-serp-bar .cap-maps { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--color-deep-cerulean-dark); display: inline-flex; align-items: center; gap: 4px; }
.cap-ladder { position: relative; height: 248px; padding: 10px; }
.cap-rung { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; }
.cap-rung .cap-rung-pos { font-size: 11px; font-weight: 700; color: var(--color-neutral-light); width: 16px; }
.cap-rung .cap-rung-ico { width: 22px; height: 22px; border-radius: 6px; background: rgba(13,13,13,0.06); flex: none; }
.cap-rung .cap-rung-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cap-rung .cap-rung-lines i { display: block; height: 6px; border-radius: 3px; background: rgba(13,13,13,0.08); }
.cap-rung .cap-rung-lines i:first-child { width: 60%; } .cap-rung .cap-rung-lines i:last-child { width: 38%; }
.cap-climber { position: absolute; left: 10px; right: 10px; top: 162px; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: #fff; border-radius: 10px; box-shadow: 0 14px 30px -10px rgba(8,40,28,0.4), inset 0 0 0 1.5px var(--color-jewel); }
.cap-row.in .cap-climber { animation: capClimb 3.4s cubic-bezier(.5,0,.2,1) 0.4s forwards; }
.cap-climber .cap-rung-ico { background: linear-gradient(135deg, var(--color-jewel), var(--color-deep-cerulean)); color: #fff; display: grid; place-items: center; }
.cap-climber .cap-rung-ico svg { width: 13px; height: 13px; }
.cap-climber .cap-cl-name { font-size: 12.5px; font-weight: 700; }
.cap-climber .cap-cl-sub { font-size: 10px; color: var(--color-neutral); }
.cap-pos-badge { margin-left: auto; font-size: 11px; font-weight: 800; color: #fff; background: var(--color-jewel); border-radius: 7px; padding: 4px 8px; min-width: 30px; text-align: center; }
.cap-pos-badge.top { animation: capPop .45s ease; }
.cap-v4-pill { right: 14px; bottom: 22px; opacity: 0; }
.cap-row.in .cap-v4-pill { animation: capChat .5s ease 3.9s forwards; }
@keyframes capClimb {
  0%, 9%    { top: 162px; }
  20%, 29%  { top: 124px; }
  40%, 49%  { top: 86px; }
  60%, 69%  { top: 48px; }
  82%, 100% { top: 10px; }
}
@keyframes capPop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* =========================================================
   VISUAL 5 · automated marketing campaigns
   ========================================================= */
.cap-v5 { position: relative; width: 100%; max-width: 330px; padding: 6px 0; }
.cap-flowline { position: absolute; left: 32px; top: 34px; bottom: 64px; width: 2px; overflow: hidden; }
.cap-flowline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--color-jewel) 0 8px, transparent 8px 16px); opacity: .5;
  animation: capDash 1s linear infinite; }
.cap-node { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 15px; margin: 0 0 16px; opacity: 0; transform: translateX(-14px); z-index: 1; }
.cap-row.in .cap-node { animation: capSlideX .6s cubic-bezier(.2,.7,.2,1) forwards; }
.cap-row.in .cap-node:nth-child(2){animation-delay:.3s} .cap-row.in .cap-node:nth-child(3){animation-delay:.65s}
.cap-row.in .cap-node:nth-child(4){animation-delay:1.0s} .cap-row.in .cap-node:nth-child(5){animation-delay:1.35s}
.cap-node-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.cap-node-ico svg { width: 17px; height: 17px; }
.cap-node-ico.trigger { background: var(--color-neutral-darkest); }
.cap-node-ico.mail { background: var(--color-jewel); }
.cap-node-ico.sms { background: var(--color-deep-cerulean); }
.cap-node-ico.star { background: #e2a72e; }
.cap-node-t { font-size: 13px; font-weight: 700; line-height: 1.15; }
.cap-node-s { font-size: 10.5px; color: var(--color-neutral); margin-top: 1px; }
.cap-node-tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-jewel); background: var(--color-jewel-lightest); padding: 3px 7px; border-radius: 6px; }
.cap-v5-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--color-jewel-dark); }
.cap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-jewel); box-shadow: 0 0 0 0 rgba(14,83,52,0.45); animation: capPulse 1.8s ease-out infinite; }
@keyframes capDash { to { transform: translateY(16px); } }
@keyframes capSlideX { to { opacity: 1; transform: none; } }
@keyframes capPulse { 0% { box-shadow: 0 0 0 0 rgba(14,83,52,0.45); } 70% { box-shadow: 0 0 0 9px rgba(14,83,52,0); } 100% { box-shadow: 0 0 0 0 rgba(14,83,52,0); } }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .cap-row { grid-template-columns: 1fr; gap: 2.25rem; }
  .cap-row .cap-copy { order: 2 !important; }
  .cap-row .cap-visual { order: 1 !important; }
  .cap-stage { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-intro .cap-rise, .cap-copy, .cap-visual { opacity: 1 !important; transform: none !important; transition: none; }
  .cap-phone, .cap-toast, .cap-stars svg, .cap-rev, .cap-chat > *, .cap-climber, .cap-node, .cap-flowline::before, .cap-dot, .cap-typing span, .cap-v4-pill {
    animation: none !important; opacity: 1 !important; transform: none !important; }
  .cap-climber { top: 10px; }
}