/* ============================================================
   V2 — NO SCROLL-JACKING AT ALL
   V1 (no section pinning) + the fixed outro overlay becomes a
   normal in-flow final section (no runway, no footer freeze),
   and the inner pinned stories (use-cases stage, problem head)
   are static. JS keeps setting inline transforms/visibility on
   the outro, hence the !important overrides.
   ============================================================ */
@media (min-width: 900px) and (min-height: 740px) {
  #hire, .testi, #usecases, .browserx, .pricing { position: static; top: auto; }
  .problem-x, #hire, .testi, #usecases, .browserx, .pricing, #experts, .footer { border-radius: 0; box-shadow: none; }
  .problem-x > .container, #hire > .container, .testi > .container, #usecases > .container,
  .browserx > .container, .pricing > .container, #experts > .container { transform: none; }
  #experts { position: static; z-index: auto; }
}

/* outro: keep the shared site-v3 pinned reveal (fixed overlay + footer-freeze
   runway), matching the pricing page. (V2's in-flow override removed.) */

/* inner pinned stories -> static */
#usecases { height: auto !important; min-height: 0; }
#usecases .usecase { position: static; height: auto; min-height: 100vh; }
.problem-x .px-layout .px-head { position: static; min-height: 0; }

/* ============================================================
   PROBLEM → SOLUTION — pinned scrollytelling (desktop)
   Tall track + sticky stage. One scroll-progress render() (inline,
   sauna-style) fades scattered AI-tool artifacts in, drifts them,
   converges them into the Minded mark, then reveals the solution
   beat + cost chart. All artifacts use NEW .art* classes so they
   never collide with the mobile page's .pv-item collage.
   ============================================================ */
@media (min-width: 981px) {
  .probv2 { display: block; align-items: initial; min-height: 0; height: 520vh; overflow: visible; background: #F6F6F4; }
  .probv2 .pv-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: block; }
  .probv2 .pv-stage { position: relative; width: 100%; height: 100%; min-height: 0; max-width: none; display: block; }
  .pv-cost { opacity: 0; }
}

/* scattered artifacts layer */
.pv-arts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.art { position: absolute; opacity: 0; will-change: transform, opacity; transform-origin: center center; }

/* container-less chat: human pill (right) + AI reply with provider logo on the left */
.art-chat { display: flex; flex-direction: column; gap: 9px; }
.art-chat .cu { align-self: flex-end; max-width: 88%; background: #fff; border: 1px solid var(--line); color: var(--ink-900); font-size: 16px; line-height: 1.4; padding: 8px 13px; border-radius: 13px 13px 4px 13px; box-shadow: 0 3px 10px rgba(29,38,48,.07); }
.art-chat .ca { display: flex; gap: 9px; align-items: flex-start; }
.art-chat .ca img { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.art-chat .ca span { background: #fff; border: 1px solid var(--line); border-radius: 4px 13px 13px 13px; padding: 9px 13px; font-size: 16px; line-height: 1.5; color: var(--slate-700); box-shadow: 0 3px 10px rgba(29,38,48,.06); }


/* provider chip — floating logo disc */
.art-chip { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(29,38,48,.13); }
.art-chip img { width: 54%; height: 54%; object-fit: contain; }

/* slack ping */
.art-slack { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; box-shadow: 0 14px 34px rgba(29,38,48,.11); }
.art-slack .av { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; }
.art-slack .sl-h { font-size: 12px; color: var(--slate-500); margin-bottom: 3px; }
.art-slack .sl-h b { color: var(--ink-900); }
.art-slack .sl-t { margin-left: 4px; }
.art-slack .sl-x { font-size: 12.5px; color: var(--ink-900); line-height: 1.4; }

/* usage wall — a frustrated "try again" pill above the Claude limit card */
.art-limit { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; background: transparent; border: none; box-shadow: none; padding: 0; }
.art-limit .lim-try { background: #fff; border: 1px solid var(--line); color: var(--ink-900); font-size: 16px; line-height: 1.4; padding: 8px 13px; border-radius: 13px 13px 4px 13px; box-shadow: 0 3px 10px rgba(29,38,48,.07); }
.art-limit .lim-bar { display: flex; align-items: center; gap: 11px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 34px rgba(29,38,48,.11); }
.art-limit .lim-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #FBEFEA; flex: none; }
.art-limit .lim-ic img { width: 17px; height: 17px; }
.art-limit .lim-name { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.art-limit .lim-s2 { font-size: 11.5px; color: #C2362B; }

/* text beats — centred overlays, char-split reveal (pricing-style gray → ink fill) */
.pv-beat { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6vw; text-align: center; pointer-events: none; will-change: opacity, transform; }
.pv-beat2 { opacity: 0; }
.pv-beat .w { display: inline-block; white-space: nowrap; }
.pv-beat .c { display: inline-block; color: #C6CDD5; transition: color 0.22s ease; }
.pv-beat .c.on { color: var(--ink-900); }
/* gradient phrase keeps its continuous brand gradient the whole time and simply
   reveals: it starts dimmed, then brightens to full as the line types into it — it
   never drops to flat gray (which read as the clause "disappearing") */
.pv-beat .grad-text { opacity: .32; transition: opacity .3s ease; }
.pv-beat .grad-text.lit { opacity: 1; }
.pv-h { position: relative; z-index: 5; text-align: center; color: var(--ink-900); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(34px, 4.4vw, 60px); margin: 0; max-width: 980px; }
.pv-h2 { position: relative; z-index: 5; text-align: center; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-size: clamp(30px, 4.4vw, 60px); margin: 0; max-width: min(1180px, 84vw); }
/* VS comparison embedded in the solution fold — centred overlay, revealed/scaled by the pin script (transform-origin: top centre so it scales down from under the crowned headline) */
.pv-vs { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: center; padding: 0 4vw; opacity: 0; transform-origin: 50% 0; pointer-events: none; will-change: opacity, transform; }
.pv-vs-inner { width: 100%; max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: auto; }
.pv-vs .vs-wrap { margin: 0; }
.pv-vs .section-head { display: none; }   /* lead lives in the crowned headline now — keep the fold tight */
/* the glass thread plays in below the /human h1 — exact pricing /human card: the
   BRANDED radial-gradient container (inherited from .gstage,.exp-card), the chat
   bottom-anchored by flex with a top-fade mask, hidden steps display:none */
.pv-thread { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 0 24px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.pv-thread .exp-card { max-width: 92vw; margin: 0; pointer-events: auto;
  display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 18px; }
/* thread fills the card, top-anchored: the first message holds the top (no fade);
   as the conversation grows it pins to the bottom and carries the question up (JS) */
.pv-thread .exp-card .thread { flex: 1; min-height: 0; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 13px; justify-content: flex-start; }
/* hidden future messages take NO space so the chat truly bottom-anchors (pricing fix) */
.pv-thread .exp-step:not(.show) { display: none; }
.pv-thread .exp-step.show { animation: expStepIn .45s ease both; }
@keyframes expStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* user + AI message text both at 20px in the /human thread */
.pv-thread .msg .text, .pv-thread .m-result .text { font-size: 20px; line-height: 1.5; }
/* bolder accept-offer button (and the "Accepted" tag it becomes) */
.pv-thread .approve .ok, .pv-thread .approve .approved-tag { font-weight: 700; }
/* price in the offer title (· $42), coral + bold — like the pricing card */
.pv-thread .approve { flex-wrap: wrap; }
.pv-thread .approve .ainfo .t .ofr { color: var(--brand-coral); font-weight: 700; }
/* WhatsApp logo in the "solved" card */
.pv-thread .wa-solved .wa-ic { background: transparent; }
.pv-thread .wa-solved .wa-ic img { width: 100%; height: 100%; object-fit: contain; }
/* rotating AI provider name + icon in the headline (grid-overlap = no reflow) */
.pv-rot { display: inline-grid; vertical-align: baseline; text-align: left; overflow: visible; transition: width .42s cubic-bezier(.22,1,.36,1); }
.pv-rot .ri { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; opacity: 0; transform: translateY(0.45em); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.pv-rot .ri.on { opacity: 1; transform: none; }
.pv-rot .ri img { width: 0.92em; height: 0.92em; flex: none; }
/* hero subtitle rotor — same pattern, sized for body text + inline brand SVGs */
.hero-rot { font-weight: 600; color: var(--ink-900); }
.hero-rot .ri svg { width: 0.95em; height: 0.95em; flex: none; }
.hero-rot .ri img { width: 0.95em; height: 0.95em; flex: none; }

/* cost-savings chart inside the solution beat */
.pv-cost { width: min(620px, 84vw); }
.pv-bars { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2vw, 30px); margin: 0 auto 16px; }
.pv-bars .barcol { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.pv-bars .val { font-size: 13px; font-weight: 600; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.pv-bars .barcol.us .val { color: var(--ink-900); }
.pv-bars .track { width: 48px; height: 188px; display: flex; align-items: flex-end; }
.pv-bars .bar { width: 100%; height: 0; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, #C7CDD4, #AEB6BF); }
.pv-bars .barcol.us .bar { background: linear-gradient(180deg, #FFAC6F, #FF5F34 55%, #E43CFF); box-shadow: 0 12px 30px rgba(255,95,52,.30); }
.pv-bars .lbl { display: grid; place-items: center; height: 26px; }
.pv-bars .lbl img { width: 24px; height: 24px; object-fit: contain; }
.pv-bars .barcol.us { position: relative; }
.pv-bars .save { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(95deg, #FF5F34, #E43CFF); padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 16px rgba(228,60,255,.28); }
.pv-cost-title { font-size: 14px; color: var(--slate-500); text-align: center; }

/* the Minded mark the chaos collapses into — a white circle (sauna / pricing orb).
   margin-centred so its transform is free for the crown lift + pop scale */
.pv-orb {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 999px;
  display: grid; place-items: center; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(255,95,52,.18), 0 6px 18px rgba(16,24,40,.08);
}
.pv-orb img { width: 60px; height: 60px; filter: none; }

/* ============================================================
   /HUMAN — the solution: header (title + subheader + CTAs) on top,
   the glass thread animation centred below. No longer side-by-side.
   ============================================================ */
.exp-stack .container { display: flex; flex-direction: column; align-items: center; }
.exp-head { text-align: center; max-width: 780px; margin: 0 auto; }
.exp-title { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(32px, 3.8vw, 52px); color: var(--ink-900); }
.exp-head .lead { margin: 20px auto 26px; }
.exp-head .exp-cta { justify-content: center; }
.exp-stack .exp-card { width: 100%; max-width: 600px; margin: 10px auto 0; }

/* ---- mobile: KEEP the pinned sauna scatter→converge→orb (like the pricing page).
   The render() choreography is fully viewport-relative, so we only resize +
   re-scatter the artifacts to fit a phone — we don't disable the animation. ---- */
@media (max-width: 980px) {
  .exp-title { font-size: clamp(28px, 8vw, 40px); }
  .exp-stack .exp-card { max-width: 100%; }

  .probv2 { display: block; align-items: initial; height: 360vh; min-height: 0; overflow: visible; }
  .probv2 .pv-pin { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; display: block; }
  .probv2 .pv-stage { position: relative; width: 100%; height: 100%; max-width: none; display: block; }
  .pv-arts { position: absolute; inset: 0; }

  /* scatter positions + tilt (--tilt) replicate the pricing mobile page exactly:
     4 cards hug the corners, 3 chips tucked at the edges, every artifact tilted.
     --tilt is only set here (mobile), so desktop stays axis-aligned. NOTE: this MUST
     NOT be named --r — that's the global 8px border-radius var; rotate(var(--r)) would
     resolve to rotate(8px), an invalid angle that kills the whole converge transform. */
  .pv-arts > .art:nth-child(1) { width: 166px !important; left: 3% !important; top: 5% !important; --tilt:-5deg; }   /* Gemini — top-left */
  .pv-arts > .art:nth-child(3) { width: 144px !important; left: auto !important; right: 3% !important; top: 7% !important; --tilt:4deg; }    /* ChatGPT — top-right */
  .pv-arts > .art:nth-child(6) { width: 166px !important; left: 3% !important; top: auto !important; bottom: 9% !important; --tilt:3deg; }   /* Claude — bottom-left */
  .art-limit { width: 164px !important; left: auto !important; right: 3% !important; top: auto !important; bottom: 10% !important; --tilt:-3deg; }  /* usage wall — bottom-right */
  .art-limit .lim-bar { padding: 8px 10px; gap: 8px; }
  .art-limit .lim-ic { width: 24px; height: 24px; }
  .art-limit .lim-ic img { width: 14px; height: 14px; }
  .art-limit .lim-tx { flex: 1 1 0; min-width: 0; }
  .art-limit .lim-name { font-size: 10px; }
  .art-limit .lim-s2 { font-size: 9px; line-height: 1.35; }
  .art-chip { width: 36px !important; height: 36px; }
  .pv-arts > .art:nth-child(2) { left: 5% !important; top: 21% !important; --tilt:6deg; }     /* copilot chip — left gap below the Gemini chat (was overlapping it) */
  .pv-arts > .art:nth-child(4) { display: grid !important; left: 13% !important; top: 27% !important; --tilt:-7deg; }   /* perplexity chip — upper-left, clearly ABOVE the centred h1 (top:35% collided with it on shorter phones) */
  .pv-arts > .art:nth-child(5) { left: auto !important; right: 10% !important; top: 64% !important; --tilt:8deg; }      /* grok chip — lower-right gap, clear of the h1 band */
  .art-chat .cu, .art-chat .ca span, .art-limit .lim-try { font-size: 11px; }
  .art-chat .ca img { width: 18px; height: 18px; }

  /* compact headline + smaller crown orb */
  .pv-h  { font-size: clamp(26px, 7.8vw, 36px); max-width: 90vw; }
  /* /human headline — auto-scaling (vw), ~50% bigger than the old clamp(22,6.6vw,31) */
  .pv-h2 { font-size: clamp(28px, 9.9vw, 42px); max-width: 88vw; }
  .pv-beat { padding: 0 16px; }
  .pv-orb { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .pv-orb img { width: 46px; height: 46px; }

  /* glass thread: JS sizes the card; flex bottom-anchors the chat */
  .pv-thread { padding: 0 12px; }
  .pv-thread .exp-card { max-width: none; padding: 14px; }
  .pv-thread .msg .text, .pv-thread .m-result .text { font-size: 18px; }
}

/* tablet: narrow the /human headline so it wraps to 3 lines (not 2) */
@media (min-width: 600px) and (max-width: 980px) {
  .pv-h2 { max-width: 440px; }
}

/* ---- reduced-motion (any width): no scroll animation — stack it all statically ---- */
@media (prefers-reduced-motion: reduce) {
  .probv2 { height: auto !important; min-height: 0; }
  .probv2 .pv-pin { position: static !important; height: auto !important; overflow: visible !important; }
  .probv2 .pv-stage { height: auto !important; display: flex !important; flex-direction: column; gap: 24px; padding: 48px 20px; }
  .pv-arts { position: static !important; display: flex; flex-direction: column; gap: 14px; align-items: center; }
  .art { position: static !important; opacity: 1 !important; transform: none !important; width: 100% !important; max-width: 340px; left: auto !important; top: auto !important; }
  .art-chip { display: none; }
  .pv-beat { position: static !important; opacity: 1 !important; transform: none !important; padding: 0; }
  .pv-beat .c { color: var(--ink-900) !important; }
  .pv-beat .grad-text { opacity: 1 !important; }
  .pv-orb { display: none !important; }
  .pv-vs { position: static !important; opacity: 1 !important; transform: none !important; padding: 8px 0 0; }
  .pv-vs-inner { max-width: 100%; }
  .pv-thread { position: static !important; opacity: 1 !important; transform: none !important; padding: 0; }
  .pv-thread .exp-card { width: 100% !important; max-width: 100%; height: auto !important; }
  .pv-thread .exp-card::before { display: none; }
  .pv-thread .exp-card .thread { position: static !important; left: auto; right: auto; top: auto; padding: 16px; transform: none !important; }
}

/* ============================================================
   HERO flowcard — image / dashboard AI response (DS glass-messages).
   The churn scenario renders a frosted preview card instead of a
   file chip; .fc-prev only exists on the desktop page.
   ============================================================ */
.flowcard .ans .fc-prev {
  position: relative; width: 250px; max-width: 100%; margin-top: 4px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 6px 16px rgba(29,38,48,0.10);
}
.flowcard .ans .fc-prev .thumb { width: 100%; height: 146px; object-fit: cover; object-position: top; display: block; }
.flowcard .ans .fc-prev .pname { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 24px 8px 8px 11px; color: #fff; font-size: 12px; background: linear-gradient(to top, rgba(0,0,0,0.48), rgba(0,0,0,0) 82%); }
.flowcard .ans .fc-prev .pname > svg { width: 13px; height: 13px; flex: none; }
.flowcard .ans .fc-prev .pname .pn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flowcard .ans .fc-prev .gbtn.sm { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; background: rgba(255,255,255,0.88); border: 1px solid rgba(255,255,255,0.92); color: var(--ink-900); }
.flowcard .ans .fc-prev .gbtn.sm svg { width: 13px; height: 13px; color: var(--ink-900); margin-left: -1px; }
.flowcard .ans.show .fc-prev { animation: chatpop .5s cubic-bezier(.34,1.45,.5,1) backwards; }

/* glass message: give attachments room so their shadow clears the bubble edge */
.flowcard .msg { padding: 14px 16px 19px; }
.flowcard .ans { margin-top: 2px; }
.flowcard .ans.show { overflow: visible; }
.flowcard .ans .attach { margin-top: 13px; box-shadow: 0 5px 14px rgba(29,38,48,0.09); }

/* ---- mobile hero: the demo panel hugs its content (no idle gap) but is capped
   at a max-height window. Top-anchored — the question pins to the TOP (no fade);
   the panel grows as the reply streams, and once it hits the cap the reply pushes
   the question up off the top (auto-scroll handled in site-v3.js). ---- */
@media (max-width: 920px) {
  .hero-panel {
    height: auto; min-height: 0; max-height: 470px; padding: 16px; overflow: hidden; align-items: stretch;
  }
  /* once the reply pushes the question up off the top, fade it out behind a top
     gradient (matches the /human exp-card .is-scrolled mask). Clean edge until
     it actually scrolls — .is-scrolled is toggled in site-v3.js pinBottom(). */
  .hero-panel.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
  }
  /* hug the content; only grow past the cap (and scroll) when the reply is long */
  #flowcard { max-height: none; min-height: 0; height: auto; justify-content: flex-start; }
  .flowcard .ans.show { max-height: 320px; overflow: hidden; }
  .flowcard .msg { transform: translateY(16px) scale(.97); transform-origin: 14% 100%; }
  .flowcard .msg.minded { transform-origin: 14% 100%; }
  .flowcard .msg.show { transform: none; }
}
@media (max-width: 480px) {
  .hero-panel { max-height: 460px; }
}
/* site-v3.js windowed() treats body.m as mobile too (in addition to the ≤920px
   media query above); mirror the top-fade here so the JS pin + the CSS fade can
   never diverge if a mobile build ever sets body.m on a wider viewport. */
body.m .hero-panel.is-scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
}

/* ============================================================
   SEGMENTED CONTROLS — unified across the page (comparison ·
   browser · use cases). The warm gradient-glow selected card
   already covers the comparison + browser rails; here we (1) bring
   the use-case rail onto the same gradient-glow indicator and (2)
   set ONE consistent icon size everywhere (the browser + use-case
   rails were rendering 17px icons — too small).
   ============================================================ */
.vs-tab img, .vs-tab .ico-copilot { width: 26px; height: 26px; }
.bw-tab > .bw-favic { width: 26px; height: 26px; }
.bw-tab > svg { width: 24px; height: 24px; }
#usecases .uc-tab .tp > svg { width: 24px; height: 24px; }

/* use-case selected pill → the same gradient-border + warm glow card */
#usecases .uc-ink {
  background: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(29,38,48,0.12);
}
@media (prefers-reduced-motion: reduce) { #usecases .uc-ink { animation: none; } }

/* ---- consistent corner radius · border · sliding indicator across all 3 rails ---- */
/* containers: muted surface, hairline border, one 16px radius */
.vs-select, .bw-tabs, #usecases .uc-tabs { border-radius: 16px; }
#usecases .uc-tabs { background: var(--surface-muted); border: 1px solid var(--line); }
/* tabs + indicators: one 12px radius (use-case was a full pill) */
.vs-tab, .bw-tab, #usecases .uc-tab { border-radius: 12px; }
.bw-ind, #usecases .uc-ink { border-radius: 12px; }
#usecases .uc-ink { transition: transform .45s cubic-bezier(.22,1,.36,1); }

/* comparison rail: drive selection with a sliding gradient indicator (like the
   browser + use-case rails) instead of a per-item border */
.vs-select { position: relative; }
.vs-tab { position: relative; z-index: 1; }
.vs-ink {
  position: absolute; z-index: 0; border-radius: 12px;
  background: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(29,38,48,0.12);
  transition: left .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.vs-tab.active, .vs-tab.active:hover { background: transparent; border-color: transparent; box-shadow: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .vs-ink { animation: none; } }

/* hero messages: drop the wrapper card — just avatar + a frosted-glass chat bubble.
   No container also frees ~32px of bubble width on mobile. Scoped to #flowcard = hero only. */
#flowcard .msg { background: none; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; }
#flowcard .msg .body { background: rgba(255,255,255,0.38); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border: 1px solid rgba(255,255,255,0.72); box-shadow: 0 12px 30px rgba(29,38,48,0.12), inset 0 1px 0 rgba(255,255,255,0.6); }
/* Minded logo disc — give it the same drop-shadow elevation as the user avatar (a global
   rule flattens it to no shadow); keeps the gradient disc, just lifts it off the glass. */
#flowcard .msg .avatar.minded { box-shadow: 0 3px 10px rgba(29,38,48,0.22); }