/* ============================================================
   BusinessDesk by Base91 — Landing Page
   Brand palette:
   Midnight #0B1020 · Aqua #15C8C2 · Coral #FF6B4A
   Violet #6D5DF6 · Warm Cloud #F7F6F2 · Stone #D8D5CA
   ============================================================ */

:root {
  --midnight: #0B1020;
  --aqua: #15C8C2;
  --coral: #FF6B4A;
  --violet: #6D5DF6;
  --cloud: #F7F6F2;
  --stone: #D8D5CA;

  --ink: #0B1020;
  --ink-2: #3a3f4b;
  --ink-3: #6b7280;
  --line: #E7E5DE;
  --white: #ffffff;

  --aqua-soft: rgba(21, 200, 194, .12);
  --coral-soft: rgba(255, 107, 74, .12);
  --violet-soft: rgba(109, 93, 246, .12);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(11,16,32,.06), 0 2px 8px rgba(11,16,32,.04);
  --shadow-md: 0 8px 30px rgba(11,16,32,.08);
  --shadow-lg: 0 24px 60px rgba(11,16,32,.14);
  --container: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; margin: 0; line-height: 1.12; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Anchor targets must clear the sticky nav */
section[id] { scroll-margin-top: 80px; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--midnight); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: .95rem;
  padding: 13px 22px; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { --bg: var(--midnight); box-shadow: 0 6px 18px rgba(11,16,32,.22); }
.btn--primary:hover { box-shadow: 0 10px 26px rgba(11,16,32,.28); }
.btn--ghost { --bg: #fff; --fg: var(--midnight); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--stone); }
.btn--dark-ghost { --bg: transparent; --fg: var(--midnight); border-color: rgba(11,16,32,.28); }
.btn--dark-ghost:hover { background: rgba(11,16,32,.06); }
.btn--sm { padding: 10px 16px; font-size: .88rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,246,242,.72);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(11,16,32,.05); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }
/* The lock-up is a <div>, not a link: "BusinessDesk" points home and the Base91
   logo points at base91.in, and an <a> cannot legally contain another <a>. */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.brand__link { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.brand__mark { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { font-family: "Space Grotesk", sans-serif; font-size: 1.06rem; letter-spacing: -.02em; }
.brand__by { display: inline-flex; align-items: center; gap: 5px; font-family: "Inter", sans-serif; font-weight: 500; font-size: .72rem; color: var(--ink-3); letter-spacing: 0; transition: opacity .18s var(--ease); }
.brand__by:hover { opacity: .65; }
/* Sized in em so the logo tracks the "by" text it sits next to; the intrinsic
   width/height on the <img> keeps the ratio and reserves layout space. */
.brand__by img { height: 1em; width: auto; display: block; }
.nav__links { display: flex; gap: 28px; font-size: .92rem; font-weight: 500; color: var(--ink-2); }
.nav__links a { position: relative; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--aqua); transition: width .22s var(--ease); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 10px; }

/* ---------- Shared section bits ---------- */
.section { padding: 92px 0; }
.section--tint { background: linear-gradient(180deg, #fbfaf7, #f2f0ea); }
.section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
.section__lead { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aqua); margin-bottom: 14px; }
.kicker--light { color: var(--aqua); }
.ai-dot, .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-soft); }
.ai-dot { background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }

/* NOTE: tracks use minmax(0, …) everywhere. A bare `1fr` is minmax(auto, 1fr),
   so any nowrap/wide child (screenshot chrome, source cards) blows the column
   past the viewport instead of shrinking. */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--stone); }

/* ============ HERO ============ */
.hero { position: relative; padding: 68px 0 84px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.hero__title { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 700; letter-spacing: -.02em; }
.hero__title .hl { position: relative; color: var(--midnight); white-space: nowrap; }
.hero__title .hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .32em; background: var(--aqua); opacity: .38; border-radius: 4px; z-index: -1; }
.hero__sub { margin-top: 22px; font-size: 1.12rem; color: var(--ink-2); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.chips { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink-2); font-weight: 500; }
.chip svg { color: var(--aqua); flex: none; }

.industry { margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--stone); }
.industry__label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.industry__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ichip {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line);
  transition: all .18s var(--ease);
}
.ichip:hover { border-color: var(--aqua); color: var(--ink); }
.ichip.is-active { background: var(--midnight); color: #fff; border-color: var(--midnight); }

/* ----- Real product screenshot (browser frame) ----- */
.hero__visual { position: relative; }
/* Horizontal inset stays at 0: a negative one pushes the glow past the page edge
   in any section that is not clipped (e.g. Version B's .product2). */
.hero__glow { position: absolute; inset: -12% 0; z-index: -1; background:
  radial-gradient(50% 45% at 78% 22%, var(--aqua-soft), transparent 70%),
  radial-gradient(45% 45% at 20% 80%, var(--violet-soft), transparent 70%);
  filter: blur(6px); }
.shot {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: perspective(1800px) rotateY(-5deg) rotateX(2deg);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.hero__visual:hover .shot { transform: perspective(1800px) rotateY(0) rotateX(0); box-shadow: 0 30px 70px rgba(11,16,32,.20); }
.shot__bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--midnight); }
.shot__dots { display: inline-flex; gap: 6px; flex: none; }
.shot__dots i { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.24); }
.shot__dots i:first-child { background: var(--coral); }
.shot__dots i:nth-child(2) { background: #FFD166; }
.shot__dots i:nth-child(3) { background: var(--aqua); }
.shot__url { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 14px; margin: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot__url svg { opacity: .7; flex: none; }
.shot__url #shotWorkspace { color: var(--aqua); font-weight: 600; text-transform: capitalize; }
.shot__live { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.72); }
.pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--aqua); box-shadow: 0 0 0 0 rgba(21,200,194,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(21,200,194,.55); } 70% { box-shadow: 0 0 0 8px rgba(21,200,194,0); } 100% { box-shadow: 0 0 0 0 rgba(21,200,194,0); } }
.shot__frame { position: relative; background: #f3f4f6; aspect-ratio: 16 / 10; overflow: hidden; }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: opacity .25s var(--ease); }
.shot.is-swapping .shot__frame img { opacity: 0; }

/* ============ VALUE ============ */
.value-card { display: flex; flex-direction: column; gap: 12px; }
.value-card h3 { font-size: 1.14rem; font-weight: 600; }
.value-card p { color: var(--ink-2); font-size: .96rem; }
.vicon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; }
.vi--teal   { background: rgba(21,200,194,.13);  color: #0f9d98; }
.vi--orange { background: rgba(245,158,11,.15);  color: #dc8500; }
.vi--blue   { background: rgba(59,130,246,.12);  color: #2f6fed; }
.vi--red    { background: rgba(255,107,74,.15);  color: #e34b2b; }
.vi--purple { background: rgba(109,93,246,.13);  color: #6d5df6; }
.vi--green  { background: rgba(34,197,94,.14);   color: #17a34a; }

/* Shared soft-tint icon-badge colors (modules, steps, AI cards, business types) */
.t-teal   { background: rgba(21,200,194,.13);  color: #0f9d98; }
.t-orange { background: rgba(245,158,11,.15);  color: #dc8500; }
.t-blue   { background: rgba(59,130,246,.12);  color: #2f6fed; }
.t-red    { background: rgba(255,107,74,.15);  color: #e34b2b; }
.t-purple { background: rgba(109,93,246,.13);  color: #6d5df6; }
.t-green  { background: rgba(34,197,94,.14);   color: #17a34a; }
.t-slate  { background: rgba(11,16,32,.09);    color: #0b1020; }

/* ============ PROBLEM ============ */
.problem__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.lead { margin-top: 18px; font-size: 1.1rem; color: var(--ink); }
.muted { margin-top: 14px; color: var(--ink-2); }
.pains { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pain { display: flex; align-items: center; gap: 11px; font-size: .9rem; font-weight: 500; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 11px 13px; border-radius: 13px; box-shadow: var(--shadow-sm); }
.pain__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; }
.pi--orange { background: rgba(245,158,11,.15); color: #dc8500; }
.pi--green  { background: rgba(34,197,94,.14);  color: #17a34a; }
.pi--blue   { background: rgba(59,130,246,.12); color: #2f6fed; }
.pi--red    { background: rgba(255,107,74,.15); color: #e34b2b; }
.pi--teal   { background: rgba(21,200,194,.13); color: #0f9d98; }
.pi--purple { background: rgba(109,93,246,.13); color: #6d5df6; }

/* Scattered inputs -> one connected workspace */
.flow { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto minmax(0, max-content); align-items: center; gap: 6px; }
.flow__sources { display: flex; flex-direction: column; gap: 11px; z-index: 2; }
.srccard { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px 9px 10px; font-size: .84rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); white-space: nowrap; }
.srccard__ic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: #fff; }
.si--green { background: #1d9d54; } .si--red { background: #e5533b; } .si--wa { background: #25d366; } .si--blue { background: #2f6fed; } .si--orange { background: #f0a92c; }
.si--purple { background: #6d5df6; } .si--teal { background: #15c8c2; }

.flow__mid { position: relative; align-self: stretch; min-height: 220px; display: grid; place-items: center; }
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow__lines path { fill: none; stroke: var(--stone); stroke-width: 1.6; stroke-dasharray: 3 5; animation: dash 20s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -240; } }
.scatter { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 8px); grid-auto-rows: 8px; gap: 6px; padding: 12px; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.scatter i { width: 8px; height: 8px; border-radius: 2.5px; background: var(--stone); }
.scatter i:nth-child(1),.scatter i:nth-child(7),.scatter i:nth-child(12) { background: var(--aqua); }
.scatter i:nth-child(3),.scatter i:nth-child(10),.scatter i:nth-child(15) { background: var(--coral); }
.scatter i:nth-child(5),.scatter i:nth-child(9),.scatter i:nth-child(16) { background: var(--violet); }
.scatter i:nth-child(2),.scatter i:nth-child(14) { background: #3b82f6; }
.scatter i:nth-child(6),.scatter i:nth-child(11) { background: #22c55e; }
.flow__arrow { display: inline-grid; place-items: center; color: var(--midnight); padding: 0 2px; }

.flow__dash { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.miniDash { width: 186px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-md); overflow: hidden; }
.miniDash__bar { display: flex; gap: 5px; padding: 9px 12px; background: var(--midnight); }
.miniDash__bar i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.28); }
.miniDash__bar i:first-child { background: var(--coral); }
.miniDash__bar i:nth-child(2) { background: #ffd166; }
.miniDash__bar i:nth-child(3) { background: var(--aqua); }
.miniDash__grid { padding: 14px; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 12px 14px; align-items: end; }
.mw--bars { grid-row: 1 / 3; display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.mw--bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #5b93ff, #a9c6ff); }
.mw--bars span:nth-child(1) { height: 45%; } .mw--bars span:nth-child(2) { height: 68%; } .mw--bars span:nth-child(3) { height: 38%; } .mw--bars span:nth-child(4) { height: 82%; background: linear-gradient(180deg, var(--aqua), #8fe6e2); } .mw--bars span:nth-child(5) { height: 60%; }
.mw--donut { width: 48px; height: 48px; justify-self: end; border-radius: 50%; background: conic-gradient(var(--aqua) 0 42%, var(--violet) 42% 70%, var(--coral) 70% 100%); position: relative; }
.mw--donut::after { content: ""; position: absolute; inset: 13px; background: #fff; border-radius: 50%; }
.mw--line { align-self: center; justify-self: end; width: 100%; }
.mw--line svg { width: 100%; height: 24px; display: block; }
.mw--line polyline { fill: none; stroke: var(--aqua); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow__caption { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.flow__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-soft); }

/* ============ PRODUCT MODULES ============ */
.modules { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.module {
  flex: 1 1 250px; max-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.module:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--aqua); }
.module__ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; }
.module h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 7px; }
.module p { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }

/* ============ HOW IT WORKS ============ */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.steps::before { content: ""; position: absolute; top: 30px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--stone) 0 7px, transparent 7px 14px); z-index: 0; }
.step { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px 24px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__num { position: absolute; top: -15px; left: 22px; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--aqua); color: #04302e; font-weight: 700; font-size: .92rem; font-family: "Space Grotesk", sans-serif; box-shadow: 0 4px 12px rgba(21,200,194,.4); }
.step__ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin: 6px 0 16px; }
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: .94rem; }

/* ============ AI SUGGESTIONS ============ */
/* ---------- Brand strip (hero -> section 2) ----------
   Midnight band on purpose: the client marks are mostly white artwork and
   their own colours must not change, so a light band would erase them. */
.brands { background: var(--midnight); padding: 30px 0 34px; overflow: hidden; }
.brands__label {
  text-align: center; margin-bottom: 22px;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* Fades the marks into the band instead of clipping them mid-letter */
.brands__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Two identical rows scrolled by exactly half the track = a seamless loop */
.brands__track { display: flex; width: max-content; animation: brandscroll 46s linear infinite; }
@keyframes brandscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brands__viewport:hover .brands__track { animation-play-state: paused; }

.brands__row { display: flex; align-items: center; gap: 58px; padding-right: 58px; }

.brandlogo { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 54px; }
/* Full opacity: dimming these would alter the brand colours, which is exactly
   what we were asked not to do. */
.brandlogo img { max-height: 46px; width: auto; max-width: 200px; object-fit: contain; }

/* Optical balance. Every mark at one pixel height is not the same as every
   mark looking the same size: the two-line lockups shrink their own wordmark
   by half, and Milkvilla's script sits optically larger than the rest. */
.brandlogo img[src*="falcon-eye"],
.brandlogo img[src*="urbanyx-infra"] { max-height: 54px; }
.brandlogo img[src*="milkvilla"]     { max-height: 41px; }
/* Placeholder wordmark, used until the logo files exist */
.brandlogo__name {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  color: rgba(255,255,255,.72); transition: color .2s var(--ease);
}
.brandlogo:hover .brandlogo__name { color: #fff; }

@media (max-width: 620px) {
  .brands { padding: 24px 0 26px; }
  .brands__row { gap: 40px; padding-right: 40px; }
  .brandlogo { height: 44px; }
  .brandlogo img { max-height: 38px; max-width: 155px; }
  .brandlogo img[src*="falcon-eye"],
  .brandlogo img[src*="urbanyx-infra"] { max-height: 44px; }
  .brandlogo img[src*="milkvilla"] { max-height: 34px; }
  .brandlogo__name { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* No motion: show one static, wrapped row rather than a frozen half-scroll */
  .brands__track { animation: none; width: 100%; justify-content: center; }
  .brands__row { flex-wrap: wrap; justify-content: center; gap: 26px 42px; padding-right: 0; }
  .brands__row--dup { display: none; }
  .brands__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- AI copilot surface ----------
   Replaced a 3x2 grid of flat cards. One bordered surface with a dark bar
   reads as a piece of the product rather than six marketing tiles, and the
   figures match the module screenshots above. */
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.copilot {
  max-width: 1020px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.copilot__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; background: var(--midnight); color: #fff;
}
.copilot__who { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem; }
.copilot__ctx { font-size: .78rem; color: rgba(255,255,255,.62); }

.copilot__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.copilot__feed { border-right: 1px solid var(--line); }

.insight { display: flex; gap: 13px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.insight:last-child { border-bottom: 0; }
.insight__ic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; }
.insight__c { min-width: 0; }
.insight__t { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: .95rem; }
.insight__when { margin-left: auto; flex: none; font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.insight__d { margin-top: 3px; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.insight__d b { font-weight: 600; color: var(--ink); }

.ask { display: flex; flex-direction: column; padding: 18px 20px 20px; background: linear-gradient(180deg, #fbfaff, #f5f3ff); }
.ask__label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.ask__bar {
  display: flex; align-items: center; gap: 9px; min-height: 46px;
  margin-top: 11px; padding: 11px 13px;
  background: #fff; border: 1px solid var(--violet-soft); border-radius: 12px;
  font-size: .89rem; color: var(--ink);
}
.ask__bar svg { flex: none; color: var(--violet); }
.ask__q { overflow-wrap: anywhere; }
/* Sits on the text baseline, so it reads as a cursor rather than a divider */
.ask__caret { display: inline-block; width: 2px; height: 1.05em; flex: none; background: var(--violet); animation: askblink 1.05s steps(1) infinite; }
@keyframes askblink { 50% { opacity: 0; } }

.ask__a {
  margin-top: 11px; padding: 13px; min-height: 104px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.ask__a.is-in { opacity: 1; transform: none; }
.ask__badge { display: inline-block; margin-bottom: 7px; padding: 3px 9px; border-radius: 999px; background: var(--violet-soft); color: #5a49e8; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ask__text { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.ask__text b { font-weight: 600; color: var(--ink); }
/* Shortcuts into the same demo — they fill the column and, more usefully,
   make the panel something a visitor can poke at rather than just watch. */
.ask__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ask__chip {
  font: inherit; font-size: .78rem; font-weight: 600; color: #5a49e8;
  background: #fff; border: 1px solid var(--violet-soft); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.ask__chip:hover { background: var(--violet-soft); }
.ask__chip.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }
.ask__chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

.ask__foot { margin-top: auto; padding-top: 14px; font-size: .76rem; line-height: 1.45; color: var(--ink-3); }

/* ============ BUSINESS TYPES ============ */
.btype { text-align: left; }
/* These cards link through to the vertical pages. As an <a> they need block
   layout, and the copy needs a visible affordance that they are clickable. */
a.btype { display: flex; flex-direction: column; height: 100%; }
a.btype p { flex: 1; }
/* block + inline arrow, so if the label ever wraps the arrow stays attached to
   the last word instead of floating off to the right edge of the card */
.btype__more { display: block; margin-top: 15px; font-size: .88rem; font-weight: 600; color: var(--accent-ink); }
.btype__more svg { display: inline-block; vertical-align: -3px; margin-left: 5px; transition: transform .18s var(--ease); }
a.btype:hover { border-color: var(--accent); }
a.btype:hover .btype__more svg { transform: translateX(3px); }
a.btype:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btype__ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 16px; }
.btype h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 8px; }
.btype p { color: var(--ink-2); font-size: .94rem; }

/* ============ FINAL CTA ============ */
.final { padding: 40px 0 92px; }
.final__band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: 32px;
  background: linear-gradient(120deg, #e9fbfa 0%, #f3f1ff 55%, #fff5f2 100%);
  border: 1px solid #e4eceb; border-radius: var(--radius-lg);
  padding: 56px 52px; box-shadow: var(--shadow-md);
}
.final__glow { position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(21,200,194,.35), transparent 65%); pointer-events: none; }
.final__copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 600px; }
.final__copy p { margin-top: 16px; color: var(--ink-2); font-size: 1.06rem; max-width: 560px; }
.final__actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
/* Secondary sign-in line under the final CTA. Full-width so it drops onto its
   own row once .final__actions becomes a wrap-flex row at <=980px. */
.final__signin { flex-basis: 100%; margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); }
.final__signin a { color: var(--midnight); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ============ FOOTER ============ */
.footer { border-top: 1px solid var(--line); padding: 30px 0; background: var(--cloud); }
.footer__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand--footer .brand__mark { width: 32px; height: 32px; }
.footer__note { color: var(--ink-3); font-size: .92rem; }
.footer__copy { margin-left: auto; color: var(--ink-3); font-size: .85rem; }

/* ============ Reveal on scroll ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   VERSION B (Problem-first) — index-v2.html additions
   ============================================================ */
.kicker--coral { color: #e34b2b; }
.hero__title .hl-plain { color: #e34b2b; }

/* Hero flow (scattered inputs -> dashboard) sized to fit the hero column */
.flow--hero { grid-template-columns: 176px 1fr 24px 164px; gap: 6px; }
.flow--hero .srccard { font-size: .8rem; padding: 8px 11px 8px 8px; gap: 8px; }
.flow--hero .srccard__ic { width: 26px; height: 26px; }
.flow--hero .flow__mid { min-height: 200px; }
.flow--hero .miniDash { width: 164px; }
.flow--hero .flow__caption { font-size: .8rem; }

/* Reframe: scattered data -> useful signals */
.reframe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.reframe__title { text-align: left; font-size: clamp(1.55rem, 3vw, 2.25rem); }
/* .lead is 1.1rem and .muted inherits the 1rem body size, so these two
   paragraphs sat side by side at different sizes and read as two different
   fonts. Same family all along — match the size; the softer colour is the
   intended de-emphasis and stays. */
.reframe__copy .muted { font-size: 1.1rem; }
.reframe__viz { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.rpanel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow-sm); }
.rpanel__tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(11,16,32,.06); color: var(--ink-3); margin-bottom: 18px; }
.rpanel__tag--aqua { background: var(--aqua-soft); color: #0b8b86; }
.rpanel--scattered { background: linear-gradient(180deg, #fff, #f5f4f0); }
.rpanel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px 6px 8px; }
/* Deliberate scatter — these are the loose tools, not a tidy system */
.rchip:nth-child(3n+1) { transform: rotate(-2deg); }
.rchip:nth-child(3n+2) { transform: rotate(1.5deg); }

.rchip__ico { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.rchip__ico svg, .rchip__ico img { display: block; width: 18px; height: 18px; object-fit: contain; }

/* Lettermark stand-in for a third-party logo we do not ship. Swapping in a
   real <img> (see the comment in variant-b.html) replaces this outright. */
.rchip__mono { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(11,16,32,.07); color: var(--ink-3); font-size: .62rem; font-weight: 800; }

/* "Surfaced by BusinessDesk" lockup closing the signals panel */
/* Stacked, not inline: the panel is narrow enough that "Surfaced by" and
   the lockup on one row wrapped the label onto two lines. */
.rpanel__by { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--aqua-soft); }
.rpanel__by-label { white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rpanel__by-lockup { display: inline-flex; align-items: center; gap: 7px; }
.rpanel__by .brand__mark { width: 22px; height: 22px; }
.rpanel__by-text { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: -.02em; color: var(--ink); }
.rpanel--signals { background: linear-gradient(180deg, #fff, #f1fbfa); border-color: var(--aqua-soft); }
.rpanel__list { display: flex; flex-direction: column; gap: 13px; }
.rpanel__list li { display: flex; align-items: center; gap: 11px; font-weight: 600; color: var(--ink); font-size: .98rem; }
.rcheck { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: var(--aqua); color: #04302e; }
.reframe__arrow { align-self: center; display: inline-grid; place-items: center; color: var(--midnight); }

/* Product introduction (split copy + screenshot + module strip) */
.product2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.product2__title { text-align: left; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.mstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
/* A button now, not a label: it drives the screenshot above it. font/color are
   reset because a <button> does not inherit either. */
.mstrip__item { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); font-family: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px 9px 10px; font-weight: 600; font-size: .95rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.mstrip__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mstrip__item:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.mstrip__item.is-active { border-color: var(--midnight); box-shadow: 0 0 0 1px var(--midnight), var(--shadow-md); }
.mstrip__ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }

/* ============================================================
   VERTICAL LANDING PAGES
   retailers.html · distributors.html · manufacturers.html ·
   service-businesses.html

   Each page sets one accent on <body>; everything below reads it
   through var(--accent). Nothing here is used by index.html or the
   A/B variants, so it cannot affect the running experiment.
   ============================================================ */
body { --accent: var(--aqua); --accent-soft: var(--aqua-soft); --accent-ink: #0f9d98; }
.v-retail  { --accent: var(--aqua);   --accent-soft: var(--aqua-soft);   --accent-ink: #0f9d98; }
.v-dist    { --accent: var(--coral);  --accent-soft: var(--coral-soft);  --accent-ink: #e34b2b; }
.v-mfg     { --accent: var(--violet); --accent-soft: var(--violet-soft); --accent-ink: #5a49e8; }
.v-service { --accent: var(--aqua);   --accent-soft: var(--aqua-soft);   --accent-ink: #0f9d98; }

.kicker--accent { color: var(--accent-ink); }
.dot--accent { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.container--narrow { max-width: 860px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Shared icon badge for vertical cards */
.vic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 15px; flex: none; }
.vic--sm { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 0; }

.pcard h3, .vchange h3, .vai h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: 7px; }
.pcard p, .vchange p, .vai p { color: var(--ink-2); font-size: .94rem; }
.pcard { border-top: 3px solid var(--accent); }
.vai { background: linear-gradient(180deg, #fff, #fcfcfa); }

.vnote { margin-top: 16px; font-weight: 600; color: var(--ink); font-size: 1.02rem; }

/* The BusinessDesk answer — accent-led callout */
.answer { position: relative; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 34px 34px 32px; box-shadow: var(--shadow-md); }
.answer__title { font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; margin-top: 4px; }
.answer__body { margin-top: 14px; color: var(--ink-2); font-size: 1.05rem; }

/* Core capability groups */
.captable { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.caprow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; padding: 22px 24px; border-top: 1px solid var(--line); align-items: start; }
.caprow:first-child { border-top: 0; }
.caprow__area { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1rem; }
.caprow__copy { color: var(--ink-2); font-size: .96rem; }

/* Start simple */
.simple { background: linear-gradient(120deg, #fff, #f6f5f1); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow-sm); }
.simple__title { font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.simple p { color: var(--ink-2); font-size: 1.02rem; }

/* FAQs — native <details>, no JS */
.faqs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.faq { border-top: 1px solid var(--line); }
.faq:first-child { border-top: 0; }
.faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 19px 24px; font-weight: 600; font-size: 1.01rem; transition: background .18s var(--ease); }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.faq[open] > summary { background: var(--accent-soft); }
.faq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq > p { padding: 0 24px 21px; color: var(--ink-2); font-size: .97rem; }

/* Vertical nav + footer links */
.nav__links a.is-current { color: var(--ink); font-weight: 600; }
.nav__links a.is-current::after { width: 100%; background: var(--accent); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9rem; }
.footer__links a { color: var(--ink-2); }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }
.footer__linklabel { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Four vertical links + two CTAs do not fit between 980px and ~1100px */
.vpage .nav__links { gap: 22px; }
@media (max-width: 1100px) {
  .vpage .nav__cta .btn--ghost { display: none; }
}
@media (max-width: 860px) {
  .caprow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 620px) {
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .answer { padding: 24px 20px; border-left-width: 4px; }
  .simple { padding: 24px 20px; }
  .caprow { padding: 18px 20px; }
  .faq > summary { padding: 16px 20px; font-size: .97rem; }
  .faq > p { padding: 0 20px 18px; }
}


/* ============ PRICING ============ */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; align-items: start; }
.plan {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.plan--featured { border-color: rgba(109, 93, 246, .42); box-shadow: 0 18px 44px rgba(109, 93, 246, .15); }
.plan__head { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.plan__name { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.2rem; font-weight: 700; }
.plan__badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet); background: var(--violet-soft); padding: 4px 9px; border-radius: 999px;
}
.plan__price { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; }
.plan__amt { font-family: "Space Grotesk", Inter, sans-serif; font-size: 2.5rem; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.plan__per { color: var(--ink-3); font-size: .95rem; }
.plan__cta { width: 100%; margin-top: 22px; }
.plan__feats { list-style: none; display: grid; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--ink-2); }
.plan__feats svg { flex: 0 0 auto; margin-top: 2px; }
.plan__feats .pf--yes { color: var(--aqua); }
.plan--featured .plan__feats .pf--yes { color: var(--violet); }
/* A feature the plan does NOT include: dashed marker + muted text, so the row
   still scans as "listed but excluded" rather than as another benefit. */
.plan__feats li.is-off { color: var(--ink-3); }
.plan__feats .pf--no { color: var(--stone); }
.plans__note { max-width: 900px; margin: 22px auto 0; text-align: center; font-size: .85rem; color: var(--ink-3); }

/* Trial microcopy that sits under every "Get Started" button. */
.cta-note { margin: 12px 0 0; font-size: .85rem; color: var(--ink-3); }
.cta-note--center { text-align: center; margin-top: 10px; }
.final__actions .cta-note { flex-basis: 100%; margin: 2px 0 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 64px; }
  .reframe { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .product2 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__sub { max-width: none; }
  /* the 3D tilt reads as a rendering glitch on a narrow screen */
  .shot, .hero__visual:hover .shot { transform: none; }
  .problem__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .final__band { grid-template-columns: minmax(0, 1fr); padding: 44px 36px; }
  .final__actions { flex-direction: row; flex-wrap: wrap; }
  .nav__links { display: none; }
}
@media (max-width: 860px) {
  /* Two columns inside a 1020px card get too narrow before the page does */
  .copilot__body { grid-template-columns: minmax(0, 1fr); }
  .copilot__feed { border-right: 0; border-bottom: 1px solid var(--line); }
  .ask__a { min-height: 0; }
  .ask__foot { margin-top: 14px; }
}
@media (max-width: 620px) {
  .container { padding: 0 20px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 26px 22px; }
  .section { padding: 56px 0; }
  .section__head { margin-bottom: 36px; }
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .pains { grid-template-columns: minmax(0, 1fr); }
  .card, .module, .step { padding: 22px 20px; }
  .insight { padding: 14px 16px; }
  .copilot__bar { padding: 12px 16px; }
  .ask { padding: 16px; }
  .step { padding-top: 28px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .flow__sources { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .flow__mid { display: none; }
  .flow__arrow { transform: rotate(90deg); }
  .reframe__viz { grid-template-columns: minmax(0, 1fr); }
  .reframe__arrow { transform: rotate(90deg); }
  .final__actions { flex-direction: column; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__copy { margin-left: 0; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { white-space: normal; text-align: center; }

  /* Browser chrome: the URL is wider than the bar, so truncate it with an
     ellipsis (as a block, so text-overflow actually applies) instead of
     letting a centred flex row spill out of both ends. */
  .shot__bar { gap: 9px; padding: 9px 12px; }
  .shot__url { display: block; text-align: center; font-size: .68rem; padding: 5px 10px; margin: 0 2px; }
  .shot__url svg { display: none; }

  /* Nav: the brand lock-up + two CTAs do not fit a phone width */
  .nav__inner { height: 60px; gap: 12px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__text { font-size: .98rem; white-space: nowrap; }
  .nav .brand__by { display: none; }   /* footer keeps it — it has the room */
  .nav__cta .btn--ghost { display: none; }
  .nav__cta .btn--sm { padding: 9px 15px; font-size: .85rem; }

  /* Hero type: clamp()'s 4.6vw floor still lands ~35px on a 390px screen */
  .hero { padding: 32px 0 56px; }
  .hero__title { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
  .hero__title .hl { white-space: normal; }
  .hero__sub { font-size: 1.02rem; margin-top: 18px; }
  .section__lead { font-size: 1rem; }

  .final { padding: 24px 0 64px; }
  .final__band { padding: 32px 22px; border-radius: var(--radius); gap: 24px; }
  .final__copy p { font-size: 1rem; }
}
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .brand__text { font-size: .92rem; }
  .nav__cta .btn--sm { padding: 9px 13px; font-size: .82rem; }
  .btn { padding: 12px 16px; }
  .btn--lg { padding: 14px 18px; font-size: .95rem; }
  .flow__sources { gap: 8px; }
  .srccard { font-size: .8rem; }
  /* keep the live pulse, drop its label — the URL needs the room */
  .shot__live { font-size: 0; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Industry dropdown (top nav)
   ============================================================ */
.navdrop { position: relative; display: flex; align-items: center; }
.navdrop__btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  position: relative; line-height: inherit;
}
.navdrop__btn:hover,
.navdrop.is-open .navdrop__btn { color: var(--ink); }
.navdrop__btn::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--aqua);
  transition: width .22s var(--ease);
}
.navdrop__btn:hover::after,
.navdrop.is-open .navdrop__btn::after { width: 100%; }
.navdrop__caret { width: 11px; height: 11px; flex: none; transition: transform .2s var(--ease); }
.navdrop.is-open .navdrop__caret { transform: rotate(180deg); }

.navdrop__menu {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 60;
  width: 312px; padding: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.navdrop.is-open .navdrop__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* A little pointer, and an invisible bridge so the pointer can travel the gap */
.navdrop__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}

.navdrop__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  transition: background .16s var(--ease);
}
.navdrop__item:hover { background: var(--cloud); }
.navdrop__item:focus-visible { background: var(--cloud); outline: 2px solid var(--aqua); outline-offset: -2px; }
/* .nav__links a::after would otherwise draw its hover underline across these */
.navdrop__item::after { display: none; }
.navdrop__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.navdrop__ico svg { width: 17px; height: 17px; }
.navdrop__t { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.navdrop__d { display: block; font-size: .775rem; font-weight: 400; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }

.navdrop__item--retail  { --accent-soft: var(--aqua-soft);   --accent-ink: #0f9d98; }
.navdrop__item--dist    { --accent-soft: var(--coral-soft);  --accent-ink: #e34b2b; }
.navdrop__item--mfg     { --accent-soft: var(--violet-soft); --accent-ink: #5a49e8; }
.navdrop__item--service { --accent-soft: rgba(11,16,32,.08); --accent-ink: var(--midnight); }

/* ============================================================
   Contact modal
   ============================================================ */
.cmodal {
  width: min(660px, calc(100vw - 32px));
  max-height: min(90vh, 820px);
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cmodal.is-open { opacity: 1; transform: none; }
.cmodal::backdrop { background: rgba(11,16,32,.5); }
.cmodal.is-open::backdrop { backdrop-filter: blur(2px); }

/* The bottom gutter belongs to .cform__actions, which is sticky and owns
   the bottom edge; putting it here would float the bar above the edge. */
.cmodal__inner { max-height: inherit; overflow-y: auto; padding: 30px 32px 0; }

.cmodal__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink-2); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.cmodal__x:hover { background: var(--cloud); color: var(--ink); }
.cmodal__x svg { width: 15px; height: 15px; }

.cmodal__head { margin-bottom: 22px; padding-right: 40px; }
.cmodal__eyebrow {
  display: inline-block; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink, #0f9d98);
  background: var(--aqua-soft); padding: 5px 11px; border-radius: 999px;
}
.cmodal__title { font-size: clamp(1.4rem, 3.4vw, 1.72rem); }
.cmodal__sub { margin-top: 9px; color: var(--ink-3); font-size: .95rem; }

/* ---------- Form ---------- */
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.field--wide { grid-column: 1 / -1; }

.field__label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field__label .req { color: var(--coral); }
.field__opt { font-weight: 400; color: var(--ink-3); }

.field__input {
  width: 100%; font: inherit; font-size: .93rem; color: var(--ink);
  padding: 11px 13px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field__input::placeholder { color: #a3a8b3; }
.field__input:focus {
  outline: none; border-color: var(--aqua);
  box-shadow: 0 0 0 3px var(--aqua-soft);
}
.field__input.is-invalid { border-color: var(--coral); }
.field__input.is-invalid:focus { box-shadow: 0 0 0 3px var(--coral-soft); }
textarea.field__input { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Native select arrow varies wildly across platforms — draw our own */
select.field__input {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
}

.field__err { min-height: 15px; margin-top: 4px; font-size: .76rem; color: var(--coral); }

/* Full-bleed across the modal's gutters, or scrolling content shows through
   the 32px padding either side of the bar. */
.cform__actions {
  position: sticky; bottom: 0; z-index: 1;
  margin: 16px -32px 0; padding: 14px 32px 26px;
  background: var(--white); border-top: 1px solid var(--line);
}
.cform__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cform__submit { flex: none; }
.cform__submit.is-busy { opacity: .65; pointer-events: none; }
.cform__submit:disabled { opacity: .65; cursor: default; transform: none; }
.cform__fine { font-size: .78rem; color: var(--ink-3); line-height: 1.4; flex: 1 1 220px; }

.cform__msg { font-size: .87rem; }
.cform__msg:not(:empty) { margin-bottom: 12px; }
.cform__msg.is-error {
  color: #b3341a; background: var(--coral-soft);
  padding: 10px 13px; border-radius: var(--radius-sm);
}

/* ---------- Thank-you state ---------- */
.cform__done { text-align: center; padding: 18px 0 34px; }
.cform__done:focus { outline: none; }
.cform__done-ico {
  width: 58px; height: 58px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--aqua-soft); color: #0f9d98;
}
.cform__done-ico svg { width: 27px; height: 27px; }
.cform__done h3 { font-size: 1.3rem; }
.cform__done p { margin-top: 10px; color: var(--ink-3); font-size: .95rem; }
.cform__done .btn { margin-top: 22px; }

@media (max-width: 620px) {
  .cmodal {
    width: 100%; max-width: 100%; max-height: 92vh;
    margin: auto auto 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .cmodal__inner { padding: 26px 20px 0; }
  .cform__actions { margin: 14px -20px 0; padding: 14px 20px 22px; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
  .cform__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .cform__submit { width: 100%; }
  /* flex-basis is measured along the main axis, which is now vertical:
     leaving the row's `flex: 1 1 220px` here makes this a 220px-TALL box
     and pushes the sticky bar to a third of the screen. */
  .cform__fine { flex: 0 0 auto; text-align: center; }
}

/* ---------- "Contact us" nav button ----------
   Deliberately NOT .btn--ghost: it would look identical to "Sign in" sitting
   right beside it, and .btn--ghost is display:none'd on phones — where this
   is the CTA that must survive. Aqua tint keeps it on-brand and distinct. */
.btn--contact {
  --bg: var(--aqua-soft); --fg: #0b6b68;
  border-color: rgba(21, 200, 194, .38);
  position: relative;
}
.btn--contact:hover { --bg: rgba(21, 200, 194, .2); border-color: var(--aqua); }
.btn--contact .btn__ico { display: none; }

@media (max-width: 860px) {
  /* Sheds a word so the brand lock-up and "Get Started" keep their room */
  .btn--contact .btn__long { display: none; }
}
@media (max-width: 430px) {
  /* Three items now share a row that used to hold two. Measured against the
     real content width (the .container padding is inside .nav__inner): this
     is exactly what it takes to keep "Contact" as readable text down to
     360px without "Get Started" wrapping onto a second line. */
  .nav__inner { gap: 10px; }
  .nav__cta { gap: 7px; }
  .nav__cta .btn--sm { padding: 9px 12px; font-size: .8rem; }
  .nav__cta .btn--contact { padding: 9px 11px; font-size: .78rem; }
}
@media (max-width: 359px) {
  /* Measured: the short "Contact" label still fits the nav row down to
     360px. Below that the brand lock-up and "Get Started" win, and Contact
     goes icon-only — the label stays in the accessibility tree, so the
     button keeps its name for screen readers and voice control. */
  .nav__cta .btn--contact { padding: 0; width: 38px; height: 38px; flex: none; }
  .nav__cta .btn--contact .btn__label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav__cta .btn--contact .btn__ico { display: block; width: 17px; height: 17px; }
}