/* ═══════════════════════════════════════════════════════════════════
   DOUBLE DOWN AI — DESIGN 2 (De-Vibecode + Visual Substance Pass)
   2026-05-01 · Loaded after dd-upgrade.css and dd-mobile.css.
   Strips AI-template tells, adds editorial typography, asymmetric
   layouts. Brand-true: green #10b981, gold #d4af37, ink #030303.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero 3D image styling — replaces .hc1/.hc2/.hc3 stack ─────── */
.hcw .hero-3d-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:24px;
  border:1px solid rgba(212,175,55,.18);
  box-shadow:
    0 28px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 38px rgba(16,185,129,.06);
  display:block;
  background:#030303;
}
.hcw .hero-3d-img.dd-tilt{
  transform:perspective(1200px) rotateX(2deg) rotateY(-3deg);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.hcw:hover .hero-3d-img.dd-tilt{
  transform:perspective(1200px) rotateX(0deg) rotateY(0deg);
}
@media(max-width:540px){
  .hcw{
    height:auto!important;
    width:clamp(240px,80vw,340px)!important;
    aspect-ratio:1!important;
    perspective:none!important;
    margin:0 auto!important;
  }
  .hcw .hero-3d-img{
    border-radius:18px;
    height:100%;
  }
  .hcw .hero-3d-img.dd-tilt{transform:none}
}

/* ── 2. Reduce shimmer — keep only on hero h1 ───────────────────── */
.sec-h .acc{
  animation:none!important;
  background:linear-gradient(120deg,var(--g) 0%,var(--gold) 100%)!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.si-n,.fst-n,.hs-n,.tav{animation:none!important}

/* ── 3. Kill copy-pasted radial-mouse-glow hover on every card ──── */
.scard::before{display:none!important}
.scard:hover::before{opacity:0!important}
.scard:hover{
  border-color:rgba(16,185,129,.45)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.45),0 0 0 1px rgba(16,185,129,.12)!important;
  transform:translateY(-4px)!important;
}
.sgold:hover{
  border-color:rgba(212,175,55,.45)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.45),0 0 0 1px rgba(212,175,55,.12)!important;
}
@media(max-width:540px){
  .scard:hover{transform:none!important}
}

/* ── 4. Tame .reveal stagger — single fade, not cascading ──────── */
@media(prefers-reduced-motion:no-preference){
  .reveal{transition:opacity .5s ease,transform .5s ease!important}
}

/* ── 5. Instrument Serif italic emphasis (.dd-emph) ─────────────── */
.dd-emph{
  font-family:'Instrument Serif',Georgia,serif!important;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--gold);
  background:none!important;
  -webkit-text-fill-color:var(--gold)!important;
}

/* ── 6. Editorial type kicker — display section ─────────────────── */
.dd-kicker-section{
  padding:clamp(80px,12vw,160px) clamp(20px,4vw,60px);
  position:relative;
}
.dd-kicker-section .max-w{
  max-width:1400px;
}
.dd-kicker{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:clamp(72px,16vw,240px);
  line-height:.92;
  letter-spacing:-.04em;
  color:#fff;
  margin:0;
}
.dd-kicker-cap{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:11px;
  font-weight:400;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--g);
  margin-bottom:18px;
}
.dd-kicker .dd-emph{
  font-size:.85em;
  display:inline-block;
}
@media(max-width:640px){
  .dd-kicker-section{padding:64px 16px}
  .dd-kicker{font-size:clamp(48px,14vw,96px);letter-spacing:-.03em}
}

/* ── 7. Asymmetric stats grid (1.6fr/1fr/1fr/1fr) ───────────────── */
@media(min-width:721px){
  .stats-g{grid-template-columns:1.6fr 1fr 1fr 1fr!important}
  .stats-g .si:first-child{padding:clamp(36px,5vw,72px) 28px!important}
  .stats-g .si:first-child .si-n{font-size:clamp(48px,6.5vw,88px)!important}
  .stats-g .si:first-child .si-l{font-size:13px!important}
}

/* ── 8. Editorial process — numbers as type, not circles ────────── */
@media(min-width:761px){
  .proc-g{
    grid-template-columns:1fr!important;
    gap:0!important;
    max-width:980px!important;
  }
  .proc-g::before{display:none!important}
  .ps{
    display:grid!important;
    grid-template-columns:max-content 1fr!important;
    gap:clamp(28px,4vw,56px)!important;
    text-align:left!important;
    padding:32px 0!important;
    border-bottom:1px solid var(--border);
    align-items:baseline!important;
  }
  .ps:last-child{border-bottom:none}
  .ps:hover{background:transparent!important;border-radius:0!important}
  .ps .pn{
    font-family:'Syne',sans-serif!important;
    font-size:clamp(56px,7vw,108px)!important;
    font-weight:800!important;
    background:none!important;
    border:none!important;
    width:auto!important;
    height:auto!important;
    color:var(--g)!important;
    line-height:.9!important;
    margin:0!important;
    letter-spacing:-.04em!important;
    transition:color .3s;
  }
  .ps:hover .pn{
    color:var(--gold)!important;
    background:none!important;
    box-shadow:none!important;
    border:none!important;
  }
  .ps-h{font-size:21px!important;margin-bottom:6px!important}
  .ps-p{font-size:14px!important;max-width:62ch}
  .pd{margin-top:8px!important}
}

/* ── 9. De-vibecode page heroes (non-index): static visual ──────── */
/* Pages with body.dd-static-hero get NO 3D card rotation animation */
body.dd-static-hero .hc1,
body.dd-static-hero .hc2,
body.dd-static-hero .hc3{
  animation:none!important;
  transform:none!important;
}

/* ── 10. Hero h1 letter-spacing tighten ─────────────────────────── */
@media(min-width:881px){
  .hero-h1{letter-spacing:-1.5px!important;line-height:1.04!important}
  .hero-h1 .l1{letter-spacing:-1.4px}
  .hero-h1 .l2{letter-spacing:-1.5px}
}

/* ── 11. Section heading after-line (override the dd-mobile.css one
        which forces 42px width even on smaller h2) ──────────────── */
@media(min-width:1025px){
  .sec-h::after{
    width:64px!important;
    height:2px!important;
    margin-top:22px!important;
    background:linear-gradient(90deg,var(--g),var(--gold))!important;
    border-radius:0!important;
    opacity:.9!important;
  }
}

/* ── 12. Hide bad about-page 3D scene ──────────────────────────── */
/* The dd3d-hero-stage on about.html was a wireframe gyroscope that
   read as "AI startup demo." Killing it entirely. */
.dd3d-hero-stage,
.dd3d-shape,
.dd3d-orb,
.dd3d-grid,
.dd3d-rings,
.dd3d-floor,
.dd3d-glow{
  display:none!important;
}

/* ── 13. Process section — humanized typography ────────────────── */
@media(min-width:761px){
  .ps .pn{
    font-size:clamp(40px,5vw,72px)!important;
    font-weight:600!important;  /* lighter than the first-pass 800 */
    color:rgba(16,185,129,.92)!important;
    font-feature-settings:"tnum" 1,"lnum" 1;
    line-height:1!important;
  }
  .ps:hover .pn{color:var(--gold)!important}
  .ps-h{
    font-family:'Syne',sans-serif!important;
    font-size:18px!important;
    font-weight:600!important;
    color:#fff!important;
    margin-bottom:6px!important;
    letter-spacing:-.4px!important;
  }
  .ps-p{
    font-size:14.5px!important;
    line-height:1.65!important;
    color:rgba(255,255,255,.62)!important;
    max-width:58ch!important;
  }
  .ps .pd{
    margin-top:12px!important;
    background:transparent!important;
    border:none!important;
    padding:0!important;
    font-family:'Space Mono',monospace!important;
    font-size:10px!important;
    color:rgba(212,175,55,.72)!important;
    text-transform:uppercase!important;
    letter-spacing:1.6px!important;
  }
}

/* Mobile process — compact, vertical, still humanized */
@media(max-width:760px){
  .proc-g{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .proc-g::before{display:none!important}
  .ps{
    text-align:left!important;
    padding:18px 0!important;
    border-bottom:1px solid rgba(16,185,129,.1)!important;
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    gap:18px!important;
    align-items:start!important;
  }
  .ps:last-child{border-bottom:none}
  .ps:hover{background:transparent!important;border-radius:0!important}
  .ps .pn{
    font-family:'Syne',sans-serif!important;
    font-size:32px!important;
    font-weight:600!important;
    color:rgba(16,185,129,.85)!important;
    background:transparent!important;
    border:none!important;
    width:auto!important;
    height:auto!important;
    line-height:1!important;
    margin:0!important;
  }
  .ps:hover .pn{
    background:transparent!important;
    box-shadow:none!important;
    border:none!important;
    color:var(--gold)!important;
  }
  .ps-h{font-size:15px!important;margin-bottom:4px!important;color:#fff!important}
  .ps-p{font-size:13px!important;line-height:1.55!important}
  .pd{margin-top:6px!important;font-size:9.5px!important}
}

/* ── 14. AGGRESSIVE MOBILE STRIP — humanize by removing noise ─── */
@media(max-width:640px){
  /* Hide all decorative-only 3D / particle / aurora elements */
  .dd-aurora-bg,
  #lc,
  #bg-canvas,
  .hero-badge-float,
  .hero-illustration,
  .hil-preview,
  .hil-mograph-section,
  .dd-stage-3d,
  .dd-blob-cursor{
    display:none!important;
  }

  /* Force ALL multi-col grids to single column on mobile.
     Tailwind's grid-cols-3/4/5/6/7/9 utilities don't always have
     mobile-1 fallbacks set explicitly. */
  [class*="grid-cols-3"],
  [class*="grid-cols-4"],
  [class*="grid-cols-5"],
  [class*="grid-cols-6"],
  [class*="grid-cols-7"],
  [class*="grid-cols-9"]{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}

/* Stats grid: 2 columns on mobile (instead of 4 stacked or 1 column) */
@media(max-width:640px){
  .stats-g,
  .hstats,
  [class*="grid-cols-2"][class*="md:grid-cols-4"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
  .stats-g .si{padding:24px 14px!important}
  .si-n{font-size:clamp(24px,7vw,36px)!important;line-height:1!important}
  .si-l{font-size:10px!important;letter-spacing:1px!important}
}

/* Compact card style on mobile — feels less like "10 boxes lined up" */
@media(max-width:540px){
  .scard,.solution-card,.feature-card,.benefit-card,.why-i{
    padding:16px 14px!important;
    margin-bottom:8px!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  .scard .sc-body{padding:0!important}
  .scard .sc-h,.feature-card h3,.solution-card h3{
    font-size:15.5px!important;
    margin-bottom:4px!important;
    letter-spacing:-.3px!important;
  }
  .scard .sc-p,.feature-card p,.solution-card p{
    font-size:13px!important;
    line-height:1.55!important;
  }
  .scard .sc-num{display:none!important}
  .scard .sc-link{
    margin-top:8px!important;
    font-size:11.5px!important;
    opacity:1!important;
    transform:none!important;
  }
  .scard .sc-ico,.feature-card .icon{
    width:34px!important;
    height:34px!important;
    font-size:16px!important;
    margin-bottom:8px!important;
    border-radius:8px!important;
  }
  /* Reduce padding around card grids */
  .srv-grid,.solution-grid{gap:8px!important}
}

/* Section padding tighter on mobile */
@media(max-width:540px){
  section[id]{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  /* Section heading less aggressive on mobile */
  .sec-tag{margin-bottom:10px!important}
  .sec-h{font-size:clamp(24px,7vw,32px)!important;margin-bottom:8px!important}
  .sec-p{font-size:13.5px!important;line-height:1.6!important;margin-bottom:18px!important}
}

/* ── 15. Hide the 3-card hero stack on mobile ─────────────────── */
/* User feedback: "mobile should not have designs because it takes space" */
@media(max-width:640px){
  .hcw{display:none!important}
  /* Recenter hero text now that the right-col is gone */
  .hero-in{grid-template-columns:1fr!important;text-align:center!important}
  .hero-h1,.hero-sub,.hero-btns,.hstats{margin-left:auto!important;margin-right:auto!important}
}

/* ── 16. De-template card style — less glass, more typography ── */
/* Cards across the site use the same rgba(8,8,8,.78) glass + blur(18px)
   recipe. That's the "vibecoded" tell. Lighten it. */
.scard,.solution-card,.feature-card,.benefit-card,.why-i{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(10,10,10,.5)!important;
  border:1px solid rgba(255,255,255,.05)!important;
}
.scard:hover,.solution-card:hover,.feature-card:hover,.benefit-card:hover{
  background:rgba(14,14,14,.7)!important;
  border-color:rgba(16,185,129,.28)!important;
}
.sgold,.sgold:hover{border-color:rgba(212,175,55,.3)!important}
/* Featured card keeps slightly more presence */
.scard.sfeat{
  background:rgba(12,12,12,.65)!important;
  border:1px solid rgba(212,175,55,.18)!important;
}

/* ── 17. Heading wear-line — subtle hand-drawn-feeling underline ── */
@media(min-width:1025px){
  .sec-h::after{
    width:48px!important;
    height:1.5px!important;
    background:var(--g)!important;
    border-radius:0!important;
    opacity:.7!important;
  }
}

/* ── 18. Pull-quote class — Instrument Serif italic for emphasis ── */
.dd-pullquote{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.35;
  letter-spacing:-.012em;
  color:rgba(255,255,255,.86);
  max-width:42ch;
  margin:32px 0;
  padding-left:18px;
  border-left:2px solid var(--gold);
}

/* ── 18b. Footer-chat (dd-footer-chat.js) — mobile polish ─────── */
/* User feedback: "make it look better and fit in on mobile" */
@media(max-width:640px){
  #ddFC-wrap{margin:0 auto 24px!important}
  #ddFC-shell{
    border-radius:16px!important;
    margin:0 12px!important;
    box-shadow:0 18px 48px rgba(0,0,0,.55)!important;
  }
  .ddFC-intro{
    padding:16px 16px!important;
    gap:14px!important;
    flex-wrap:nowrap!important;
  }
  .ddFC-av{
    width:42px!important;
    height:42px!important;
    font-size:18px!important;
    border-radius:11px!important;
  }
  .ddFC-name{font-size:15px!important;line-height:1.2!important}
  .ddFC-tag{font-size:11.5px!important;line-height:1.4!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ddFC-eyebrow{font-size:9px!important;letter-spacing:.9px!important;margin-bottom:3px!important}
  .ddFC-meta{display:none!important}
  .ddFC-stage{padding:14px 16px 6px!important}
  .ddFC-m{height:min(40vh,240px)!important}
  .ddFC-bub{font-size:12.5px!important;padding:9px 12px!important;line-height:1.5!important}
  .ddFC-mav{width:28px!important;height:28px!important;font-size:12px!important}
  .ddFC-snd{padding:0 12px!important;font-size:11.5px!important}
  .ddFC-snd .lbl{display:none!important}
  .ddFC-chip{font-size:11px!important;padding:7px 11px!important}
}

/* ── 18c. Marketing / social-media page — kinetic life ───────── */
/* User feedback: "no animations or transitions, make some of the blocks better" */

/* Platform logo cards (Instagram, Facebook, etc.) — bouncy hover + entry */
.platform-logo{
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s ease,
             border-color .3s ease,
             border-width .3s ease!important;
  cursor:pointer;
  animation:dd-platformIn .55s cubic-bezier(.16,1,.3,1) both;
}
.platform-logo:hover{
  transform:translateY(-5px) scale(1.06)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 24px rgba(16,185,129,.18)!important;
  border-color:rgba(16,185,129,.6)!important;
}
.platform-logo svg{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)!important;
}
.platform-logo:hover svg{
  transform:scale(1.12) rotate(-3deg);
}
@keyframes dd-platformIn{
  from{opacity:0;transform:translateY(14px) scale(.9)}
  to{opacity:1;transform:none}
}
/* Stagger the 9-column platform grid */
[class*="grid-cols-9"] > .text-center:nth-child(1),
[class*="grid-cols-5"] > .text-center:nth-child(1){animation-delay:0s}
[class*="grid-cols-9"] > .text-center:nth-child(2),
[class*="grid-cols-5"] > .text-center:nth-child(2){animation-delay:.05s}
[class*="grid-cols-9"] > .text-center:nth-child(3),
[class*="grid-cols-5"] > .text-center:nth-child(3){animation-delay:.10s}
[class*="grid-cols-9"] > .text-center:nth-child(4),
[class*="grid-cols-5"] > .text-center:nth-child(4){animation-delay:.15s}
[class*="grid-cols-9"] > .text-center:nth-child(5){animation-delay:.20s}
[class*="grid-cols-9"] > .text-center:nth-child(6){animation-delay:.25s}
[class*="grid-cols-9"] > .text-center:nth-child(7){animation-delay:.30s}
[class*="grid-cols-9"] > .text-center:nth-child(8){animation-delay:.35s}
[class*="grid-cols-9"] > .text-center:nth-child(9){animation-delay:.40s}

/* App preview / hil-preview cards — depth on hover */
.app-preview,
.hil-preview{
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             box-shadow .35s ease!important;
}
.app-preview:hover,
.hil-preview:hover{
  transform:translateY(-4px);
  border-color:rgba(16,185,129,.55)!important;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 40px rgba(16,185,129,.14)!important;
}

/* Stat card animation — counter-style entry */
.stat-card{
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             background .35s ease!important;
  animation:dd-statIn .65s cubic-bezier(.16,1,.3,1) both;
}
.stat-card:hover{
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(212,175,55,.4)!important;
}
@keyframes dd-statIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
.stat-card:nth-child(1){animation-delay:0s}
.stat-card:nth-child(2){animation-delay:.07s}
.stat-card:nth-child(3){animation-delay:.14s}
.stat-card:nth-child(4){animation-delay:.21s}

/* Shimmer button — make the gradient sweep more visible (.shimmer-btn) */
.shimmer-btn{
  background-size:220% 100%!important;
  animation:dd-btnShimmer 4.5s ease-in-out infinite!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease!important;
}
@keyframes dd-btnShimmer{
  0%,100%{background-position:0% center}
  50%{background-position:100% center}
}
.shimmer-btn:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 18px 44px rgba(16,185,129,.4)!important;
}

/* Mobile: keep transforms minimal so layout doesn't shift */
@media(max-width:540px){
  .platform-logo{animation:none!important}
  .platform-logo:hover{transform:none!important}
  .app-preview:hover,.hil-preview:hover,.stat-card:hover{transform:none!important}
  .stat-card{animation:none!important}
}

/* ── 18d. Blog cards — image thumbs + life ───────────────────── */
.blog-card{
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             box-shadow .35s ease!important;
  overflow:hidden;
  border-radius:14px;
  background:rgba(10,10,10,.5)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.blog-card:hover{
  transform:translateY(-5px);
  border-color:rgba(16,185,129,.32)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.5),0 0 28px rgba(16,185,129,.08)!important;
}
.blog-card .bc-thumb{
  position:relative;
  overflow:hidden;
  background:#0a0a0a;
  height:200px;
}
.blog-card .bc-thumb img{
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .35s ease!important;
  filter:saturate(.88) brightness(.92);
}
.blog-card:hover .bc-thumb img{
  transform:scale(1.07);
  filter:saturate(1.05) brightness(1);
}
/* Subtle gradient overlay at the bottom of the thumb so badges/text below
   read cleanly even with bright images */
.blog-card .bc-thumb::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:60px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
@media(max-width:540px){
  .blog-card:hover{transform:none!important}
  .blog-card .bc-thumb img{transition:none!important;transform:none!important}
}

/* ── 18e. Loader smoothness pass (2026-05-01) ─────────────────── */
/* User feedback: "ultra ultra smooth, no glitching, fade in/out"
   Strategy: longer + smoother fade curve, GPU layers, halt infinite
   animations during exit so they don't fight the fade transform. */
#loader,#dd-loader{
  /* Force GPU layer + smoother fade */
  will-change:opacity,transform!important;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition:
    opacity 1s cubic-bezier(.4,0,.2,1),
    transform 1s cubic-bezier(.4,0,.2,1)!important;
  /* Coordinate the radial-gradient bg with a subtle fade-in on first paint */
  animation:dd-loader-fadein .55s cubic-bezier(.4,0,.2,1) both;
}
@keyframes dd-loader-fadein{
  from{opacity:0}
  to{opacity:1}
}
/* When fading out, stop infinite child animations so the exit is clean */
#loader.exit,#dd-loader.exit{
  animation:none!important;
}
#loader.exit *,#dd-loader.exit *,
#loader.exit *::before,#loader.exit *::after,
#dd-loader.exit *,#dd-loader.exit *::before,#dd-loader.exit *::after{
  animation-play-state:paused!important;
  animation-iteration-count:1!important;
}
/* GPU-promote the inner stack pieces too — keeps the float + reveal smooth */
#loader .dd-l-stack,#dd-loader .dd-l-stack{
  transform:translateZ(0);
  will-change:transform;
}
#loader .dd-l-mark,#dd-loader .dd-l-mark{
  will-change:transform,opacity;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
#loader .dd-l-fill,#dd-loader .dd-l-fill{
  will-change:width,background-position;
}
/* Smoother bar fill — slightly longer, easier curve */
#loader .dd-l-fill,#dd-loader .dd-l-fill{
  animation:ddlFill 1.6s cubic-bezier(.4,0,.2,1) 1.1s forwards,
            ddlSweep 2.6s linear 2.7s infinite!important;
}
/* Mobile: kill the infinite float + sweep entirely so it never jitters */
@media(max-width:600px){
  #loader .dd-l-mark,#dd-loader .dd-l-mark{
    animation:ddlMark .7s cubic-bezier(.16,1,.3,1) .15s both!important;
  }
  #loader .dd-l-fill,#dd-loader .dd-l-fill{
    animation:ddlFill 1.4s cubic-bezier(.4,0,.2,1) 1s forwards!important;
  }
}
/* Reduced-motion users: instant render, no float, no sweep */
@media(prefers-reduced-motion:reduce){
  #loader,#dd-loader{
    animation:none!important;
    transition:opacity .3s ease!important;
  }
  #loader *,#dd-loader *{
    animation-duration:.3s!important;
    animation-iteration-count:1!important;
  }
}

/* ── 18f. Marketing page — section-specific de-template ───────── */
/* User: "blocks are gray and lifeless". Adds variety + life to:
   .feature-box, .testimonial-card, .step-card, mini stat bar, etc. */

/* Feature boxes — flat dark + accent stroke on top, alternating tint */
.feature-box{
  position:relative;
  overflow:hidden;
  background:rgba(10,10,10,.55)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px!important;
  padding:24px 22px!important;
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             background .35s ease!important;
  animation:dd-cardEnter .55s cubic-bezier(.16,1,.3,1) both;
}
.feature-box::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:32px;
  height:2px;
  background:linear-gradient(90deg,var(--g) 0%,transparent 100%);
  transition:width .45s cubic-bezier(.16,1,.3,1),
             background .35s ease;
}
.feature-box:hover{
  transform:translateY(-4px);
  border-color:rgba(16,185,129,.32)!important;
  background:rgba(14,14,14,.7)!important;
}
.feature-box:hover::before{
  width:72px;
  background:linear-gradient(90deg,var(--g) 0%,var(--gold) 100%);
}
/* Every 3rd card uses gold-tint for visual variety */
.feature-box:nth-child(3n+2){
  background:rgba(12,10,8,.55)!important;
  border-color:rgba(212,175,55,.12)!important;
}
.feature-box:nth-child(3n+2)::before{
  background:linear-gradient(90deg,var(--gold) 0%,transparent 100%);
}
.feature-box:nth-child(3n+2):hover{
  border-color:rgba(212,175,55,.32)!important;
  background:rgba(16,14,8,.7)!important;
}
.feature-box:nth-child(3n+2):hover::before{
  background:linear-gradient(90deg,var(--gold) 0%,var(--g) 100%);
}
/* Stagger entrance */
.feature-box:nth-child(1){animation-delay:0s}
.feature-box:nth-child(2){animation-delay:.06s}
.feature-box:nth-child(3){animation-delay:.12s}
.feature-box:nth-child(4){animation-delay:.18s}
.feature-box:nth-child(5){animation-delay:.24s}
.feature-box:nth-child(6){animation-delay:.30s}

/* Testimonial cards — editorial pull-quote style, no gray boxes */
.testimonial-card{
  background:transparent!important;
  border:none!important;
  border-left:2px solid rgba(212,175,55,.32)!important;
  border-radius:0!important;
  padding:8px 22px 14px 28px!important;
  position:relative;
  transition:border-left-color .35s ease!important;
}
.testimonial-card:hover{
  background:transparent!important;
  border-left-color:var(--gold)!important;
}
.testimonial-card p{
  font-family:'Instrument Serif',Georgia,serif!important;
  font-style:italic;
  font-weight:400;
  font-size:clamp(16px,1.6vw,19px)!important;
  line-height:1.5!important;
  color:rgba(255,255,255,.88)!important;
  margin-bottom:18px!important;
}
.testimonial-card .text-gray-500,
.testimonial-card .text-gray-400{
  font-family:'Outfit',sans-serif!important;
  font-style:normal!important;
  font-size:13px!important;
  font-weight:500!important;
}
/* Avatar — circle with image */
.testimonial-card .avatar,
.testimonial-card [class*="rounded-full"]{
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  border:1px solid rgba(212,175,55,.28)!important;
  flex-shrink:0;
}
.testimonial-card .avatar img,
.testimonial-card img.t-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Step cards — fill empty emoji slot with branded number ring */
.step-card,.process-step{
  position:relative;
  background:rgba(10,10,10,.55)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px!important;
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease!important;
  counter-increment:dd-step;
}
.step-card:hover,.process-step:hover{
  transform:translateY(-4px);
  border-color:rgba(16,185,129,.32)!important;
}
.step-card .step-num,
.process-step .step-num{
  font-family:'Syne',sans-serif!important;
  font-weight:800!important;
  font-size:42px!important;
  line-height:1!important;
  color:var(--g)!important;
  margin-bottom:14px!important;
  display:block;
  letter-spacing:-2px;
}

/* Stats — kill the duplicate gray-box repetition. Variant 2 uses gold */
.stat-card,
[class*="bg-dd-gray"]{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
  position:relative;
  transition:border-color .35s ease,transform .35s ease!important;
}
.stat-card:hover{
  border-color:rgba(212,175,55,.32)!important;
  transform:translateY(-2px);
}

/* Marketing-specific section padding tightening on mobile */
@media(max-width:540px){
  .feature-box{
    padding:18px 16px!important;
    margin-bottom:8px!important;
  }
  .feature-box::before{
    width:24px;
  }
  .testimonial-card{
    padding:6px 16px 10px 22px!important;
  }
  .testimonial-card p{font-size:15px!important;line-height:1.5!important}
  .step-card .step-num,
  .process-step .step-num{font-size:32px!important}
  /* Force grid-cols-9/5 platform logos to 4 cols max on mobile */
  [class*="grid-cols-5"][class*="md:grid-cols-9"]{
    grid-template-columns:repeat(4,1fr)!important;
    gap:8px!important;
  }
}

/* Section break — typographic divider between sections, replaces gray bg-grad */
.dd-section-break{
  height:1px;
  max-width:120px;
  margin:0 auto;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.45) 50%,transparent 100%);
}

/* Marketing — full-bleed visual section style */
.dd-mkt-visual{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.18);
  box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 36px rgba(16,185,129,.06);
  background:#030303;
}
.dd-mkt-visual img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)!important;
}
.dd-mkt-visual:hover img{transform:scale(1.04)}

/* ── 18g. Marketing — kill remaining gray-box patterns ────────── */
/* Stat cards using Tailwind .bg-dd-gray/50 rounded-xl pattern */
[class*="bg-dd-gray"][class*="rounded-xl"]{
  background:rgba(10,10,10,.5)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
  position:relative;
  overflow:hidden;
  transition:border-color .35s ease,transform .35s ease!important;
}
[class*="bg-dd-gray"][class*="rounded-xl"]::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:24px;height:1.5px;
  background:linear-gradient(90deg,var(--g) 0%,transparent 100%);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
[class*="bg-dd-gray"][class*="rounded-xl"]:hover{
  border-color:rgba(212,175,55,.32)!important;
  transform:translateY(-2px);
}
[class*="bg-dd-gray"][class*="rounded-xl"]:hover::before{width:48px}
/* Alternate gold tint every 2nd stat */
[class*="bg-dd-gray"][class*="rounded-xl"]:nth-child(2n)::before{
  background:linear-gradient(90deg,var(--gold) 0%,transparent 100%);
}

/* Mini stat bar (line 2550) — bg:rgba(26,26,26,0.6) inline */
section[style*="background:rgba(26,26,26"],
[style*="background:rgba(26,26,26,0.6)"]{
  background:transparent!important;
  border-top:1px solid rgba(212,175,55,.18)!important;
  border-bottom:1px solid rgba(212,175,55,.18)!important;
  border-radius:0!important;
}

/* Mobile breakpoint safety pass — sm:640px handling */
@media(max-width:640px){
  /* Force any 3-7 col grid without sm: prefix to single column */
  [class*="md:grid-cols-3"]:not([class*="sm:grid-cols"]),
  [class*="md:grid-cols-4"]:not([class*="sm:grid-cols"]),
  [class*="md:grid-cols-5"]:not([class*="sm:grid-cols"]),
  [class*="md:grid-cols-6"]:not([class*="sm:grid-cols"]){
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  /* 2-col stat grids stay 2-col on phone (more compact) */
  [class*="grid-cols-2"][class*="md:grid-cols-4"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
  }
  /* Container padding tighter */
  section .container{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* ── 19. Humanize — subtle paper grain (existing, increase) ──── */
.dd-grain::before{opacity:.07!important}

/* ── 19a. ADD LIFE — animations + transitions for humanized cards ── */
/* User feedback: "give it more life... add more animations and transitions"
   Applied to: .solution-card, .demo-flow-step, .why-box, .scard, .feature-card */

/* Counter-reset on plausible card grid containers (modern browsers).
   Each direct grid wrapping these card classes resets to 1. */
.grid,
.srv-grid,
.solution-grid,
[class*="md:grid-cols"],
[class*="lg:grid-cols"],
[class*="sm:grid-cols"]{
  counter-reset:dd-card;
}

/* Increment on each humanized card type */
.solution-card,
.demo-flow-step,
.why-box,
.feature-card,
.benefit-card{
  counter-increment:dd-card;
  position:relative;
}

/* === SOLUTION CARDS — full life pass === */
.solution-card{
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             background .35s ease!important;
  animation:dd-cardEnter .6s cubic-bezier(.16,1,.3,1) both;
}
.solution-card::before{
  /* extend the top stroke transition */
  transition:width .45s cubic-bezier(.16,1,.3,1),
             background .35s ease!important;
}
.solution-card::after{
  content:counter(dd-card,decimal-leading-zero);
  position:absolute;
  top:24px;
  right:22px;
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:2px;
  color:rgba(212,175,55,.42);
  transition:color .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.solution-card:hover{
  transform:translateY(-4px);
  background:rgba(14,14,14,.72)!important;
  border-color:rgba(16,185,129,.32)!important;
}
.solution-card:hover::before{
  width:64px!important;
  background:linear-gradient(90deg,var(--g) 0%,var(--gold) 100%)!important;
}
.solution-card:hover::after{
  color:rgba(212,175,55,.95);
  transform:translateX(-3px);
}
.solution-card:hover h4,
.solution-card:hover h3{
  color:var(--g)!important;
  transition:color .3s ease;
}

/* === DEMO FLOW STEPS — kinetic timeline === */
.demo-flow-step{
  transition:border-top-color .35s ease,
             background .35s ease,
             transform .4s cubic-bezier(.16,1,.3,1)!important;
  animation:dd-cardEnter .55s cubic-bezier(.16,1,.3,1) both;
}
.demo-flow-step::after{
  content:counter(dd-card,decimal-leading-zero);
  position:absolute;
  top:-9px;
  left:0;
  background:#030303;
  padding:0 8px 0 0;
  font-family:'Space Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  color:rgba(16,185,129,.7);
  line-height:1;
  transition:color .3s ease, padding-right .3s ease;
}
.demo-flow-step:hover{
  border-top-color:rgba(16,185,129,.85)!important;
  background:rgba(16,185,129,.04)!important;
}
.demo-flow-step:hover::after{
  color:var(--gold);
  padding-right:14px;
}
.demo-flow-step:hover h4{
  color:var(--g)!important;
  transition:color .3s ease;
}

/* === WHY-BOX (about page + similar) === */
.why-box{
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             background .35s ease!important;
  animation:dd-cardEnter .6s cubic-bezier(.16,1,.3,1) both;
  /* re-declare to merge with phase 19b — allow ::before/::after */
}
.why-box::before{
  transition:width .45s cubic-bezier(.16,1,.3,1)!important;
}
.why-box::after{
  content:counter(dd-card,decimal-leading-zero);
  position:absolute;
  top:18px;
  right:18px;
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:2px;
  color:rgba(212,175,55,.42);
  transition:color .35s ease;
  pointer-events:none;
}
.why-box:hover{
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.32)!important;
}
.why-box:hover::before{
  width:52px!important;
  background:linear-gradient(90deg,var(--gold) 0%,var(--g) 100%)!important;
}
.why-box:hover::after{color:rgba(212,175,55,.95)}
.why-box:hover h3{
  color:var(--gold)!important;
  transition:color .3s ease;
}

/* === SERVICE CARDS (.scard) on homepage — keep .sc-num, add life === */
.scard{
  transition:transform .42s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             background .35s ease,
             box-shadow .35s ease!important;
  animation:dd-cardEnter .55s cubic-bezier(.16,1,.3,1) both;
}
.scard:hover .sc-num{
  color:var(--gold)!important;
  letter-spacing:3px!important;
  transition:color .35s ease, letter-spacing .35s ease;
}
.scard:hover .sc-h{
  color:var(--g)!important;
  transition:color .3s ease;
}
.sgold:hover .sc-num{color:rgba(212,175,55,.92)!important}
.sgold:hover .sc-h{color:var(--gold)!important}

/* === Override .reveal opacity:0 on these card classes ===
   The site-wide `.reveal` class sets opacity:0 + transform:translateY(34px)
   and waits for an IntersectionObserver to add `.in`. Our entry animation
   already handles the fade-up — without this override, after our animation
   ends, .reveal's opacity:0 would re-apply and the card would disappear. */
.solution-card.reveal,
.demo-flow-step.reveal,
.why-box.reveal,
.feature-card.reveal,
.benefit-card.reveal,
.scard.reveal{
  opacity:1!important;
  transform:none!important;
}

/* === STAGGERED ENTRY ANIMATION === */
@keyframes dd-cardEnter{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to  {opacity:1;transform:none}
}
.solution-card:nth-child(1){animation-delay:0s}
.solution-card:nth-child(2){animation-delay:.06s}
.solution-card:nth-child(3){animation-delay:.12s}
.solution-card:nth-child(4){animation-delay:.18s}
.solution-card:nth-child(5){animation-delay:.24s}
.solution-card:nth-child(6){animation-delay:.30s}
.solution-card:nth-child(7){animation-delay:.36s}
.solution-card:nth-child(8){animation-delay:.42s}

.demo-flow-step:nth-child(1){animation-delay:0s}
.demo-flow-step:nth-child(2){animation-delay:.08s}
.demo-flow-step:nth-child(3){animation-delay:.16s}
.demo-flow-step:nth-child(4){animation-delay:.24s}
.demo-flow-step:nth-child(5){animation-delay:.32s}
.demo-flow-step:nth-child(6){animation-delay:.40s}

.why-box:nth-child(1){animation-delay:0s}
.why-box:nth-child(2){animation-delay:.06s}
.why-box:nth-child(3){animation-delay:.12s}
.why-box:nth-child(4){animation-delay:.18s}

.scard:nth-child(1){animation-delay:0s}
.scard:nth-child(2){animation-delay:.05s}
.scard:nth-child(3){animation-delay:.10s}
.scard:nth-child(4){animation-delay:.15s}
.scard:nth-child(5){animation-delay:.20s}
.scard:nth-child(6){animation-delay:.25s}

/* === MOBILE — lighter animation, no heavy transforms === */
@media(max-width:540px){
  .solution-card,.demo-flow-step,.why-box,.scard,.feature-card{
    animation:none!important;
    transition:border-color .2s ease, background .2s ease!important;
  }
  .solution-card:hover,.demo-flow-step:hover,.why-box:hover,.scard:hover{
    transform:none!important;
  }
  .solution-card::after,.why-box::after{
    top:14px!important;right:14px!important;font-size:9.5px!important;
  }
  .solution-card:hover::before{width:36px!important}
  .why-box:hover::before{width:36px!important}
}

/* === Reduced-motion users — kill all entry animation === */
@media(prefers-reduced-motion:reduce){
  .solution-card,.demo-flow-step,.why-box,.scard,.feature-card{
    animation:none!important;
  }
}

/* ── 19b. .why-box cards — humanized (about page + others) ────── */
.why-box{
  background:rgba(10,10,10,.5)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px!important;
  padding:22px 20px!important;
  position:relative;
}
.why-box::before{
  content:'';
  display:block;
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg,var(--g) 0%,transparent 100%);
  margin-bottom:16px;
}
.why-box h3{
  font-family:'Syne',sans-serif!important;
  font-weight:700!important;
  font-size:16px!important;
  color:#fff!important;
  margin-bottom:6px!important;
  letter-spacing:-.3px!important;
}
.why-box p{
  font-size:13.5px!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.55)!important;
}
.why-box:hover{
  background:rgba(14,14,14,.7)!important;
  border-color:rgba(16,185,129,.28)!important;
}

/* ── 20. Match homepage hero typography on solutions pages ───── */
/* Solutions pages use Tailwind text-4xl/5xl/6xl/7xl which renders
   massive (up to 72-80px). Homepage hero is clamp(24px,3vw,40px).
   Override h1.dd-speakable to match the refined homepage scale. */
h1.dd-speakable,
h1.dd-speakable.text-4xl,
h1.dd-speakable.text-5xl,
h1.dd-speakable.text-6xl,
h1.dd-speakable.text-7xl,
h1[class*="dd-speakable"][class*="text-"]{
  font-family:'Syne',sans-serif!important;
  font-size:clamp(28px,3.4vw,44px)!important;
  font-weight:800!important;
  line-height:1.06!important;
  letter-spacing:-1.2px!important;
  margin-bottom:18px!important;
}
@media(max-width:880px){
  h1.dd-speakable{
    font-size:clamp(24px,4.6vw,36px)!important;
    letter-spacing:-.8px!important;
  }
}
@media(max-width:640px){
  h1.dd-speakable{
    font-size:clamp(22px,5.4vw,30px)!important;
    letter-spacing:-.4px!important;
    margin-bottom:14px!important;
  }
}

/* Hero sub-paragraph(s) — match homepage muted, lighter, smaller */
h1.dd-speakable ~ p,
h1.dd-speakable + p{
  font-size:clamp(14px,1.4vw,16.5px)!important;
  line-height:1.7!important;
  font-weight:500!important;
  color:rgba(255,255,255,.6)!important;
  margin-bottom:16px!important;
  max-width:540px!important;
}
/* The "highlight" sub-paragraph (often font-black with green color) — keep
   the green but reduce size + weight so it doesn't shout */
h1.dd-speakable ~ p[class*="font-black"],
h1.dd-speakable ~ p[style*="color:#10b981"]{
  font-size:clamp(15px,1.5vw,17.5px)!important;
  font-weight:600!important;
  color:rgba(16,185,129,.92)!important;
  margin-bottom:14px!important;
}
/* The longer descriptive paragraph */
h1.dd-speakable ~ p[class*="text-base"],
h1.dd-speakable ~ p[class*="leading-relaxed"]{
  font-size:14.5px!important;
  font-weight:400!important;
  color:rgba(255,255,255,.5)!important;
  line-height:1.75!important;
}
@media(max-width:640px){
  h1.dd-speakable ~ p,
  h1.dd-speakable + p{
    font-size:13.5px!important;
    line-height:1.65!important;
    margin-bottom:14px!important;
  }
}

/* ── 21. KILL EMOJI ICON BLOCKS site-wide ─────────────────────── */
/* User feedback: "we don't want emojis" + "design blocks are super ugly".
   Replace emoji-in-icon-box patterns with typographic marks. */

/* Solution cards (.solution-icon emoji block) */
.solution-card .solution-icon{display:none!important}

/* Demo-flow-step emoji (the .text-3xl above each step title) */
.demo-flow-step > .text-3xl,
.demo-flow-step > div[class*="text-3xl"]{display:none!important}

/* Demo flow connector arrows (the → between steps) */
.demo-connector{display:none!important}

/* Service card 52px icon box (.sc-ico) — replaced by typographic number */
.sc-ico{display:none!important}
.scard .sc-num{
  display:inline-block!important;
  font-family:'Space Mono',monospace!important;
  font-size:11px!important;
  font-weight:400!important;
  letter-spacing:2px!important;
  color:rgba(212,175,55,.62)!important;
  margin-bottom:20px!important;
  text-transform:uppercase!important;
}

/* Hero 3-card stack icons (.hci) — kill emojis, keep cards */
.hci{display:none!important}
.hcard{padding-top:22px!important}

/* Generic emoji-in-icon-box patterns elsewhere (Tailwind .text-3xl/.text-4xl
   used as a single-character emoji holder above a heading) */
.feature-card > .text-3xl:first-child,
.benefit-card > .text-3xl:first-child,
[class*="-card"] > .text-3xl:first-child:not(:has(*)),
.why-i > .text-3xl:first-child{display:none!important}

/* Solution card — add a typographic top-mark instead of icon */
.solution-card{
  padding:24px 22px!important;
  position:relative;
}
.solution-card::before{
  content:'';
  display:block;
  width:28px;
  height:1.5px;
  background:linear-gradient(90deg,var(--g) 0%,transparent 100%);
  margin-bottom:18px;
}
.solution-card h4,
.solution-card h3{
  font-family:'Syne',sans-serif!important;
  font-size:16px!important;
  margin-bottom:6px!important;
  letter-spacing:-.3px!important;
  font-weight:700!important;
  color:#fff!important;
}
.solution-card p{
  font-size:13.5px!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.55)!important;
}

/* Demo-flow steps — clean editorial timeline (no emoji, no arrows) */
.demo-flow-step{
  padding:16px 14px 14px 14px!important;
  text-align:left!important;
  border-top:1.5px solid rgba(16,185,129,.28)!important;
  border-radius:0!important;
  background:transparent!important;
  position:relative;
}
.demo-flow-step h4{
  font-family:'Syne',sans-serif!important;
  font-size:13px!important;
  margin-bottom:5px!important;
  font-weight:700!important;
  color:#fff!important;
  letter-spacing:-.2px!important;
}
.demo-flow-step p{
  font-size:11.5px!important;
  color:rgba(255,255,255,.55)!important;
  line-height:1.55!important;
}

/* Force the demo flow grid to clean wrap (it was md:grid-cols-9 with 5
   steps + 4 connectors, now connectors hidden so 5 elements). */
[class*="md:grid-cols-9"]{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;
  gap:18px!important;
}
@media(max-width:640px){
  [class*="md:grid-cols-9"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
}

/* Hero CTA buttons — match homepage refined proportions */
section h1.dd-speakable ~ div a[class*="px-10"],
section h1.dd-speakable ~ div a[class*="px-8"],
section h1.dd-speakable ~ div button[class*="px-10"],
section h1.dd-speakable ~ div button[class*="px-8"]{
  padding:13px 26px!important;
  font-size:14.5px!important;
  font-weight:700!important;
}
@media(max-width:640px){
  section h1.dd-speakable ~ div a[class*="px-"],
  section h1.dd-speakable ~ div button[class*="px-"]{
    padding:12px 22px!important;
    font-size:13.5px!important;
  }
}

/* ── 16. Asymmetric testimonial — single pull quote, no carousel ── */

/* ── 13. Asymmetric testimonial — single pull quote, no carousel ── */
.tcarousel.dd-asym .tslides{overflow:visible}
.tcarousel.dd-asym .ttrack{flex-direction:column}
.tcarousel.dd-asym .tslide{
  padding:clamp(40px,6vw,80px) clamp(28px,5vw,72px)!important;
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
}
.tcarousel.dd-asym .tq{
  font-family:'Instrument Serif',Georgia,serif!important;
  font-size:clamp(22px,3vw,38px)!important;
  font-style:italic;
  line-height:1.3!important;
  color:#fff!important;
}
.tcarousel.dd-asym .tq::before{
  font-size:96px!important;
  top:-26px!important;
  left:-8px!important;
}