/* ============================================================
   hermon-cluely.css — "Cluely-style" airy re-skin (v2)
   Loaded AFTER hermon.css + hermon-ui.css to override.
   Airy lavender→white sky, floating pill nav, big centered type,
   soft layered mockups. Brand intact: Hermon Purple + Plus Jakarta Sans.
   ============================================================ */

:root {
  /* airier, cooler-warm white canvas */
  --bg: #FBFAFE;
  --surface: #FFFFFF;
  --surface-2: #F6F4FB;
  --surface-3: #EEEBF6;

  --ink: #15131D;
  --ink-2: #46414F;
  --muted: #76707F;
  --muted-2: #A7A1B0;

  --line: #ECE9F4;
  --line-strong: #E1DCEE;

  /* softer, airier, lower-contrast shadows with faint purple cast */
  --shadow-xs: 0 1px 2px rgba(30,22,60,.04);
  --shadow-sm: 0 2px 4px rgba(30,22,60,.03), 0 4px 14px -6px rgba(30,22,60,.07);
  --shadow-md: 0 10px 30px -10px rgba(40,28,90,.12), 0 4px 12px -6px rgba(30,22,60,.06);
  --shadow-lg: 0 30px 70px -24px rgba(60,40,140,.22), 0 12px 30px -16px rgba(30,22,60,.10);
  --shadow-xl: 0 50px 110px -30px rgba(64,42,150,.30), 0 18px 44px -22px rgba(30,22,60,.12);
  --shadow-purple: 0 16px 38px -14px rgba(109,74,230,.45);
  --shadow-float: 0 24px 60px -18px rgba(50,32,120,.26), 0 6px 18px -8px rgba(30,22,60,.10);

  /* bigger, softer radii */
  --r-sm: 14px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-2xl: 44px;

  --maxw: 1180px;
}

body { background: var(--bg); font-size: 17px; }

/* ---------- airy page wash: pinned lavender sky behind everything ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -8%, color-mix(in oklab, var(--purple), #fff 64%) 0%, transparent 60%),
    radial-gradient(80% 50% at 88% 4%, color-mix(in oklab, #5fa8ff, #fff 55%) 0%, transparent 55%),
    radial-gradient(70% 46% at 8% 0%, color-mix(in oklab, var(--purple), #fff 72%) 0%, transparent 55%);
  opacity: .9;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 30%, var(--bg) 64%);
}

/* ---------- type: bigger, tighter, airier ---------- */
.display { font-size: clamp(2.9rem, 7.2vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.96; font-weight: 800; }
.h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -0.04em; }
.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.lead { font-size: clamp(1.12rem, 1.5vw, 1.36rem); color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.grad-ink { background: linear-gradient(100deg, var(--ink) 36%, var(--purple) 78%, #5fa8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.eyebrow { color: var(--purple-700); }

/* ---------- buttons: Cluely near-black pill + soft purple accent ---------- */
.btn { border-radius: var(--pill); font-weight: 600; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 10px 26px -10px rgba(21,19,29,.5); }
.btn--primary:hover { background: #000; box-shadow: 0 18px 40px -12px rgba(21,19,29,.55); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--purple-300); color: var(--purple-700); background:#fff; }
/* purple "accent" CTA option */
.btn--accent { background: var(--purple); color:#fff; box-shadow: var(--shadow-purple); }
.btn--accent:hover { background: var(--purple-600); transform: translateY(-2px); box-shadow: 0 22px 46px -12px rgba(109,74,230,.55); }
/* closing CTA sits on dark — give it a white pill */
.fcta .btn--primary { background:#fff; color: var(--ink); box-shadow: 0 16px 40px -14px rgba(0,0,0,.5); }
.fcta .btn--primary:hover { background:#fff; transform: translateY(-2px); }

/* ---------- floating pill nav ---------- */
.nav { top: 16px; left: 0; right: 0; border-bottom: 0; padding: 0; }
.nav__inner {
  height: auto; max-width: 1080px; margin: 0 auto; padding: 9px 9px 9px 22px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: var(--pill); transition: box-shadow .3s, background .3s;
}
.nav.scrolled { background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(150%); border-bottom: 0; }
.nav.scrolled .nav__inner { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7); }
.nav__links { background: transparent; }
.nav__link:hover { background: var(--surface-2); }
.nav__signin { color: var(--ink-2); }

/* ---------- hero: centered, airy ---------- */
.hero { padding-top: clamp(140px, 18vh, 200px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero__glow-a, .hero__glow-b { display: none; } /* replaced by body wash */
.dotgrid { display: none; }

/* announce pill — glassy */
.announce { background: rgba(255,255,255,.66); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.8); box-shadow: var(--shadow-sm); white-space: nowrap; }
.heroV2 .hero__trust .txt { white-space: nowrap; }
@media (max-width: 560px){ .announce { white-space: normal; } .heroV2 .hero__trust .txt { white-space: normal; } }

/* ---------- soften the app-window mockups ---------- */
.app { border-radius: var(--r-xl); box-shadow: var(--shadow-xl); border-color: rgba(255,255,255,.9); }
.app__bar { background: linear-gradient(var(--surface), var(--surface-2)); }
.float { border-radius: var(--r); box-shadow: var(--shadow-float); border-color: rgba(255,255,255,.9); }

/* cards & tiles → softer, rounder, lighter borders */
.card, .fcard, .testi { border-radius: var(--r-lg); }
.fcard { box-shadow: var(--shadow-sm); }
.fcard:hover { box-shadow: var(--shadow-lg); }
.itile { border-radius: var(--r); }
.kpi, .panel, .pcol, .deal, .lbr, .remr { border-radius: var(--r-sm); }
.testi { border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }

/* section background tints → very subtle */
.problem, #integrations, #results { background: color-mix(in oklab, var(--surface-2), #fff 30%) !important; }
.proof { background: transparent; }

/* social proof — customer logo wall */
.logogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lcard { display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-xs); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.lcard__gm { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .96rem; letter-spacing: -.02em; flex: none; box-shadow: var(--shadow-xs); }
.lcard__body { flex: 1; min-width: 0; }
.lcard__nm { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard__cat { display: inline-block; margin-top: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--purple-700); background: var(--purple-50); border: 1px solid var(--tint-line); padding: 3px 8px; border-radius: var(--pill); white-space: nowrap; }
@media (max-width: 880px){ .logogrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .logogrid { grid-template-columns: 1fr; } }

/* section headers a touch larger gap */
.shead .lead { margin-top: 18px; }

/* lifecycle flow nodes rounder */
.fstep__node { border-radius: 22px; }
.fstep__tool { white-space: nowrap; }

/* footer airier */
.foot { background: var(--surface); }

/* ---- fix cramped rows inside the narrower feature cards ---- */
.eyebrow { white-space: nowrap; }
.lbr > div:nth-child(3) { flex: 1; min-width: 0; }
.lbr__nm, .lbr__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbr__bar { flex: none; width: 84px; }
.lbr__amt { min-width: 64px; }
.commrow > div:nth-child(2) { flex: 1; min-width: 0; }
.commrow__nm, .commrow__s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commrow__pill { flex: none; }
.commrow__amt { flex: none; }
.remr__t, .remr__s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remr > div:nth-child(2) { flex: 1; min-width: 0; }
.remr__time { flex: none; white-space: nowrap; }

/* ---------- v2 hero structures ---------- */
.heroV2 { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.heroV2 .display { max-width: 16ch; }
.heroV2 .lead { max-width: 56ch; }

/* hero stage: layered product mockup */
.stage { position: relative; width: 100%; max-width: 1080px; margin: clamp(44px, 6vw, 76px) auto 0; }
.stage__main { position: relative; z-index: 3; }
/* soft reflection/podium under the mockup */
.stage::after {
  content:''; position: absolute; left: 8%; right: 8%; bottom: -34px; height: 120px; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(109,74,230,.22), transparent 70%);
  filter: blur(26px); border-radius: 50%;
}
.stage__float { position: absolute; z-index: 5; }
.stage__float.tl { top: -4%; left: -3%; }
.stage__float.br { bottom: -5%; right: -3%; }
.stage__float.bl { bottom: -4%; left: -3%; }
.stage__float.rg { top: 26%; right: -3%; }
@media (max-width: 860px){ .stage__float { display:none; } }

/* glassy floating chip used on hero stage */
.gchip {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: var(--r); box-shadow: var(--shadow-float);
}
.gchip .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.gchip .l { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.gchip .v { font-size: .96rem; font-weight: 800; letter-spacing: -.02em; }

/* marquee row of integration logos under hero */
.iconrow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.iconrow .ip { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius: var(--pill); background: rgba(255,255,255,.7); backdrop-filter: blur(8px); border:1px solid var(--line); font-weight:700; font-size:.84rem; color: var(--ink-2); box-shadow: var(--shadow-xs); }
.iconrow .ip .d { width: 18px; height:18px; border-radius:6px; display:grid; place-items:center; color:#fff; font-size:.6rem; font-weight:800; flex:none; }

/* tilt utility for layered depth (subtle) */
.tilt { transform: perspective(1800px) rotateX(2deg); transform-origin: center top; }

@media (prefers-reduced-motion: reduce){ .tilt { transform: none; } }

/* sky toggle */
body.no-sky::before { opacity: 0; }
body.no-sky::after { background: var(--bg); }

/* ============ live activity stream hero ============ */
.feedstage { position: relative; width: 100%; max-width: 600px; margin: clamp(44px, 6vw, 72px) auto 0; }
.feedstage::after {
  content:''; position:absolute; left:6%; right:6%; bottom:-30px; height:120px; z-index:0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(109,74,230,.22), transparent 70%);
  filter: blur(26px); border-radius:50%;
}
.afeed {
  position: relative; z-index: 3; text-align: left; overflow: hidden;
  background: rgba(255,255,255,.86); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.92); border-radius: 22px; box-shadow: var(--shadow-float);
}
.afeed__head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.afeed__title { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:1rem; white-space:nowrap; }
.afeed__live { width:9px; height:9px; border-radius:50%; background:var(--green); flex:none; animation: livePulse 1.8s ease-out infinite; }
.afeed__synced { display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; color:var(--green); background:var(--green-soft); padding:5px 11px; border-radius:var(--pill); white-space:nowrap; }
.afeed__sweep { height:2px; background:transparent; position:relative; overflow:hidden; }
.afeed__sweep i { position:absolute; left:0; top:0; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg, transparent, var(--purple), transparent); animation: feedSweep 2.6s linear infinite; }
.afeed__body { height: 310px; overflow:hidden; padding:5px 8px; }
.afeed__row { display:flex; align-items:center; gap:13px; height:62px; padding:0 12px; border-radius:14px; overflow:hidden; }
.afeed__row:hover { background: var(--surface-2); }
.afeed__row.fr--new { animation: feedRowIn .52s var(--ease-out); }
.afr__ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:none; box-shadow: var(--shadow-xs); }
.afr__main { flex:1; min-width:0; }
.afr__t { font-weight:700; font-size:.96rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.afr__sub { font-size:.8rem; color:var(--muted); font-weight:600; margin-top:2px; display:flex; align-items:center; gap:9px; flex-wrap:nowrap; min-width:0; }
.afr__sub > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.afr__src { display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:700; white-space:nowrap; flex:none; }
.afr__src .d { width:8px; height:8px; border-radius:3px; flex:none; }
.afr__right { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; white-space:nowrap; padding-left:8px; }
.afr__val { font-weight:800; font-size:.95rem; letter-spacing:-.02em; white-space:nowrap; }
.afr__val.green { color:var(--green); }
.afr__val.amber { color:var(--amber); }
.afr__time { font-size:.72rem; color:var(--muted-2); font-weight:600; }
.afeed__foot { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--line); background:var(--surface-2); }
.afeed__count { font-size:.82rem; color:var(--muted); font-weight:600; }
.afeed__count b { color:var(--ink); font-weight:800; }
.afeed__procs { display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; color:var(--muted); }
.afeed__procs i { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; color:#fff; font-size:.62rem; font-weight:800; font-style:normal; margin-left:-6px; box-shadow:0 0 0 2px var(--surface-2); }
.afeed__procs i:first-child { margin-left:0; }
.afeed__procs span { margin-left:6px; }

.ff-float { position:absolute; z-index:5; }
.ff-float.tr { top:34px; right:-150px; }
.ff-float.bl { bottom:42px; left:-150px; }
@media (max-width: 1040px){ .ff-float { display:none; } }

@keyframes feedRowIn { from { height:0; opacity:0; transform: translateY(-3px); } to { height:62px; opacity:1; transform:none; } }
@keyframes livePulse { 0% { box-shadow:0 0 0 0 rgba(31,157,107,.5); } 70% { box-shadow:0 0 0 7px rgba(31,157,107,0); } 100% { box-shadow:0 0 0 0 rgba(31,157,107,0); } }
@keyframes feedSweep { 0% { left:-40%; } 100% { left:100%; } }
@media (prefers-reduced-motion: reduce){ .afeed__sweep i, .afeed__live { animation:none; } .afeed__live{ box-shadow:0 0 0 4px rgba(31,157,107,.18); } }

/* ============ animated client journey pipeline hero ============ */
.pipe-stage { position:relative; width:100%; max-width:1040px; margin: clamp(46px,6vw,80px) auto 0; }
.pipe-stage::after {
  content:''; position:absolute; left:6%; right:6%; bottom:-34px; height:130px; z-index:0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(109,74,230,.20), transparent 70%);
  filter: blur(28px); border-radius:50%;
}
.cjpipe {
  position:relative; z-index:2; padding: clamp(26px,3vw,40px) clamp(24px,3vw,42px) clamp(22px,2.6vw,32px);
  background: rgba(255,255,255,.74); backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.9); border-radius:26px; box-shadow: var(--shadow-float);
}
/* zone labels aligned to node columns */
.pipe__zones { display:grid; grid-template-columns: repeat(6, 1fr); align-items:end; gap:0; }
.pz { grid-row:1; }
.pz--acquire { grid-column:1 / 5; }
.pz--deliver { grid-column:5 / 7; }
.pz { display:flex; align-items:center; gap:9px; padding:0 6px 9px; border-bottom:2px solid var(--line-strong); }
.pz > span:first-child { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pz--deliver { border-bottom-color: var(--green); }
.pz--deliver > span:first-child { color: var(--green); }
.pz__new { font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--green); padding:3px 8px; border-radius:var(--pill); }

.pipe__track { position:relative; margin-top:70px; }
.pipe__rail { position:absolute; top:32px; left:8.333%; right:8.333%; height:3px; background:var(--line-strong); border-radius:99px; z-index:1; }
.pipe__fill { position:absolute; top:0; left:0; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--purple), #2F9E72); box-shadow:0 0 12px rgba(109,74,230,.4); transition: width 1.15s var(--ease); }
.pipe__fill.no-anim { transition:none; }

/* delivery boundary marker on the rail (between Paid and Onboarding) */
.pipe__rail::after { content:''; position:absolute; top:-5px; left:70%; width:2px; height:13px; background:var(--line-strong); border-radius:2px; }

/* traveling client card */
.pipe__client { position:absolute; left:0; top:32px; transform: translate(-50%,0); z-index:6; transition: left 1.15s var(--ease); }
.pipe__client.no-anim { transition:none; }
.pipe__client.hide { opacity:0; }
.pclient__card { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:13px; padding:7px 13px 7px 7px; box-shadow: var(--shadow-float); }
.pclient__av { width:30px; height:30px; border-radius:50%; flex:none; }
.pclient__nm { font-size:.8rem; font-weight:800; letter-spacing:-.01em; }
.pclient__st { font-size:.72rem; font-weight:700; color:var(--purple-700); margin-top:1px; }
.pclient__stem { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 5px rgba(109,74,230,.16); }

.pipe__nodes { display:grid; grid-template-columns: repeat(6, 1fr); position:relative; z-index:2; }
.pnode { display:flex; flex-direction:column; align-items:center; text-align:center; }
.pnode__dot { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#fff; border:2px solid var(--line-strong); color:var(--muted); box-shadow: var(--shadow-xs);
  transition: transform .4s var(--ease), background .4s, color .4s, border-color .4s, box-shadow .4s; }
.pnode.lit .pnode__dot { color:#fff; transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-md); }
.pnode__t { font-weight:700; font-size:1rem; letter-spacing:-.02em; margin-top:13px; white-space:nowrap; }
.pnode__tool { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:var(--muted); margin-top:4px; opacity:.55; transition:opacity .4s; }
.pnode.lit .pnode__tool { opacity:1; }
.pnode__tool .d { width:7px; height:7px; border-radius:50%; flex:none; }

.pipe__cap { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:30px; font-size:.92rem; font-weight:600; color:var(--ink-2); }
.pipe__capdot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); flex:none; }

@media (max-width: 820px){
  .pipe__nodes { grid-template-columns: 1fr; gap:18px; }
  .pipe__rail, .pipe__client, .pipe__zones { display:none; }
  .pipe__track { margin-top:8px; }
  .pnode { flex-direction:row; gap:14px; text-align:left; justify-content:flex-start; }
  .pnode__t { margin-top:0; }
  .pipe__cap { text-align:center; }
}

/* ============================================================
   MOBILE RESPONSIVE PASS
   ============================================================ */

/* --- mobile hamburger nav --- */
.nav__burger { display: none; }
.nav__mobile { display: none; }

@media (max-width: 880px) {
  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; padding: 0 10px; flex: none;
    box-shadow: var(--shadow-xs);
  }
  .nav__burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
    transition: transform .26s var(--ease), opacity .18s var(--ease); }
  .nav--open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav--open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav--open { background: rgba(251,250,249,.92); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); }

  .nav__mobile {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 68px; left: 12px; right: 12px;
    background: rgba(251,250,249,.97); backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--line); border-radius: 20px; padding: 14px;
    box-shadow: var(--shadow-xl); z-index: 90;
    opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top center;
    pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav--open .nav__mobile { opacity: 1; transform: none; pointer-events: auto; }
  .nav__mlink { padding: 13px 14px; border-radius: 13px; font-size: 1.06rem; font-weight: 600; color: var(--ink); }
  .nav__mlink:active, .nav__mlink:hover { background: var(--surface-2); }
  .nav__mdiv { height: 1px; background: var(--line); margin: 7px 4px; }
}

/* keep inline "Book a demo" from crowding the burger on the smallest phones */
@media (max-width: 420px) { .nav__cta { display: none; } }

/* --- tighter gutters on phones --- */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .section { padding: clamp(54px, 13vw, 80px) 0; }
}

/* --- hero: full-width stacked CTAs, centered trust --- */
@media (max-width: 560px) {
  .heroV2 .hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .heroV2 .hero__cta .btn { width: 100%; }
  .heroV2 .hero__trust { justify-content: center; text-align: center; }
}

/* --- hero product mockup → believable single-column mobile dashboard --- */
@media (max-width: 860px) {
  .stage { margin-top: clamp(34px, 9vw, 56px); }
  .tilt { transform: none; }
  .stage__main .hdash__shell { grid-template-columns: 1fr; }
  .stage__main .hdash__side { display: none; }
  .stage__main .hd-row3 { grid-template-columns: 1fr; }
  .stage__main .hd-appbar { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 860px) and (min-width: 561px) {
  .stage__main .hd-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .stage__main .hd-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* --- integration tiles: 3 → 2 cols --- */
@media (max-width: 520px) {
  .intg-grid { grid-template-columns: 1fr 1fr; }
}

/* --- footer: brand spans full width, bottom row stacks --- */
@media (max-width: 560px) {
  .foot { padding: 48px 0 32px; }
  .foot__grid > div:first-child { grid-column: 1 / -1; }
  .foot__bot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   LIFECYCLE RAIL — acquire → deliver, 8 nodes (desktop)
   ============================================================ */
.flow__phases { display: none; }
.flow__newtag { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--purple); padding: 3px 8px; border-radius: var(--pill); }

@media (min-width: 901px) {
  .flow__phases { display: grid; grid-template-columns: 5fr 1fr; gap: 22px; margin-top: 56px; }
  .flow__phase { display: flex; align-items: center; gap: 10px; padding: 0 6px 10px; border-bottom: 2px solid var(--line-strong); }
  .flow__phase span:first-child { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .flow__phase--deliver { border-bottom-color: var(--purple); }
  .flow__phase--deliver span:first-child { color: var(--purple); }

  .flow--6 { grid-template-columns: repeat(6, 1fr); }
  .flow--6 .fstep--deliver .fstep__node { border-color: color-mix(in oklab, var(--purple), #fff 64%); }
}