/* ============================================================
   home.css, clean, minimal, Vercel + Apple inspired.
   All home page styles live here. Scoped under body.home-v5.
   No gradients on buttons. No multicolor effects. Sharp type.
   ============================================================ */
@import url("theme.css?v=2");

body.home-v5 {
  /* The home page's --hv5-* tokens are now thin aliases onto the
     canonical theme.css palette (single source of truth). Keeping
     the --hv5-* names means every existing rule keeps working. */
  --hv5-bg:           var(--surface-0);
  --hv5-bg-1:         var(--surface-navy-1);
  --hv5-bg-2:         var(--surface-2);
  --hv5-bg-card:      var(--surface-card);
  --hv5-bg-elevated:  var(--surface-elevated);
  --hv5-line:         var(--line);
  --hv5-line-strong:  var(--line-strong);
  --hv5-ink:          var(--ink);
  --hv5-ink-2:        var(--ink-strong);
  --hv5-ink-3:        var(--ink-mid);
  --hv5-ink-4:        var(--ink-faint);
  --hv5-blue:         var(--accent);
  --hv5-radius-card:  var(--r-md);
  --hv5-radius-large: var(--r-lg);
  --hv5-radius-pill:  var(--r-pill);
  --hv5-radius-input: var(--r-sm);
  --hv5-ease:         var(--ease-out);
  --hv5-pad:          clamp(80px, 12vw, 160px);

  background: var(--hv5-bg);
  color: var(--hv5-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
  /* IMPORTANT: overflow-x: hidden breaks position: sticky on descendants.
     Use `clip` which prevents horizontal scrollbar without creating a scroll context. */
  overflow-x: clip;
}
html { overflow-x: clip; }

body.home-v5 * { box-sizing: border-box; }
body.home-v5 main { padding-top: 0 !important; }
body.page-clean main { padding-top: 0 !important; }

/* ────────────────────────────────────────────────────────────
   Reusable atoms
   ──────────────────────────────────────────────────────────── */

.hv5-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.hv5-container-tight {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}

.hv5-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hv5-ink-3);
  margin: 0 0 24px;
}

.hv5-h2 {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  color: var(--hv5-ink);
  text-wrap: balance;
}

.hv5-p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--hv5-ink-2);
  margin: 0;
}

/* ────────────────────────────────────────────────────────────
   Buttons, solid white or outlined. NO gradients.
   ──────────────────────────────────────────────────────────── */

.hv5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--hv5-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--hv5-ease),
              color 200ms var(--hv5-ease),
              border-color 200ms var(--hv5-ease),
              transform 120ms var(--hv5-ease);
  user-select: none;
  white-space: nowrap;
}
.hv5-btn:active { transform: scale(0.97); }
.hv5-btn:focus-visible { outline: 2px solid var(--hv5-ink); outline-offset: 3px; }

.hv5-btn-primary {
  background: var(--hv5-ink);
  color: #000;
}
.hv5-btn-primary:hover { background: #e9e9e9; }

.hv5-btn-secondary {
  background: transparent;
  color: var(--hv5-ink);
  border-color: var(--hv5-line-strong);
}
.hv5-btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--ink-faint);
}

.hv5-btn-lg {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}

/* ────────────────────────────────────────────────────────────
   Sections, uniform padding token
   ──────────────────────────────────────────────────────────── */
.hv5-section {
  padding: var(--hv5-pad) 0;
  position: relative;
}

/* ────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────── */
.hv5-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px 0 96px;
  overflow: hidden;
  background: var(--hv5-bg);
}
.hv5-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(41, 151, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(99, 102, 241, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hv5-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.hv5-hero-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  z-index: 1;
}
.hv5-hero-title {
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 22px;
  background: linear-gradient(180deg, #ffffff 0%, #d8dffa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.hv5-hero-sub {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hv5-ink-2);
  margin: 0 0 36px;
  max-width: 480px;
}
.hv5-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hv5-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
/* Technical grid behind the gear, extends up and to the right, faded toward
   the bottom-left so it sits cleanly under the render. */
.hv5-hero-visual::before {
  content: '';
  position: absolute;
  top: -75%;
  right: -55%;
  bottom: -12%;
  left: -12%;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(120, 165, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 165, 255, 0.16) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 72% 28%, #000 50%, transparent 82%);
  mask-image: radial-gradient(ellipse 95% 95% at 72% 28%, #000 50%, transparent 82%);
  pointer-events: none;
}
.hv5-hero-knob-wrap {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.4));
  will-change: transform;
}
.hv5-hero-knob {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  animation: hv5-knob-spin 24s linear infinite;
  will-change: transform;
}
@keyframes hv5-knob-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hv5-hero-knob { animation: none; }
}
.hv5-hero-knob-glow {
  position: absolute;
  inset: 8%;
  z-index: 1;
  background: radial-gradient(closest-side, var(--line-2), transparent 75%);
  filter: blur(40px);
}
.hv5-hero-badge {
  position: absolute;
  bottom: 6%;
  right: 6%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(20, 20, 20, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hv5-line);
  border-radius: 12px;
}
.hv5-hero-badge-text {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  line-height: 1.3;
  color: var(--hv5-ink-3);
}
.hv5-hero-badge img { height: 20px; width: auto; opacity: 0.92; }

@media (max-width: 900px) {
  .hv5-hero { padding: 100px 0 60px; }
  .hv5-hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hv5-hero-sub { margin-left: auto; margin-right: auto; }
  .hv5-hero-actions { justify-content: center; }
  .hv5-hero-visual { max-width: 440px; margin: 0 auto; }
}

/* ────────────────────────────────────────────────────────────
   BACKED BY, transparent floating logos, no card chrome
   ──────────────────────────────────────────────────────────── */
.hv5-backed {
  padding: 52px 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  background: var(--hv5-bg);
  border-top: 1px solid var(--hv5-line);
  border-bottom: 1px solid var(--hv5-line);
}
.hv5-backed-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hv5-ink-4);
}
.hv5-backed-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 200ms var(--hv5-ease);
}
.hv5-backed-logo:hover { opacity: 1; }

.hv5-nvidia { gap: 9px; }
.hv5-logo-nvidia {
  height: 28px;
  width: auto;
  display: block;
}
.hv5-logo-nvidia-badge {
  height: 56px;
  width: auto;
  display: block;
  border-radius: 6px;
}
.hv5-nvidia-inception {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--hv5-ink-1, #ffffff);
}

/* Berkeley SkyDeck, official horizontal logo */
.hv5-logo-skydeck {
  height: 26px;
  width: auto;
  display: block;
}
/* The gold/white mark is built for dark backgrounds; render it solid on light theme. */
:root[data-theme="light"] .hv5-logo-skydeck {
  filter: brightness(0);
}

@media (max-width: 720px) {
  .hv5-backed {
    flex-direction: column;
    gap: 24px;
    padding: 40px 24px;
  }
  .hv5-logo-nvidia { height: 24px; }
  .hv5-logo-skydeck { height: 22px; }
}

/* ────────────────────────────────────────────────────────────
   SHOWCASE, single big framed video
   ──────────────────────────────────────────────────────────── */
.hv5-showcase {
  padding: 0;
  margin: 0;
}

/* Scroll-driven expand / shrink scene
   Text + frame are pinned together so they share viewport real estate.
   Frame scales 0.55 → 1.0 → 0.55; text fades 1.0 → 0 → 1.0 in tandem. */
.hv5-showcase-pin-wrap {
  position: relative;
  height: 280vh;
}
.hv5-showcase-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Generous symmetric vertical padding accounts for the floating nav
     AND keeps breathing room on the bottom so the frame doesn't crash
     into the section that follows when it's at full size. */
  padding: 120px 32px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Text floats absolutely so it never fights the frame for flex space.
   Sits in the gap between the nav and the small frame on initial state.
   Fades out fast so it never overlaps the growing frame. */
.hv5-showcase-text {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 720px;
  padding: 0 32px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  will-change: opacity, transform;
}
.hv5-showcase-text .hv5-h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}
.hv5-showcase-text .hv5-p {
  font-size: 16px;
  margin: 0;
  line-height: 1.45;
}
.hv5-showcase-stage {
  width: 100%;
  /* Constrain by BOTH width (1100px max) AND height (so a 16:9 frame
     always fits in the available viewport area minus padding). */
  max-width: min(1100px, calc((100vh - 240px) * 16 / 9));
  transform-origin: center center;
  transform: scale(0.55);
  will-change: transform;
}
.hv5-showcase-frame {
  position: relative;
  background: #050505;
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 1px 0 var(--pill-bg) inset,
    0 30px 80px -20px rgba(41, 151, 255, 0.10),
    0 40px 80px -30px rgba(0,0,0,0.6);
}
.hv5-showcase-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hv5-showcase-pin-wrap { height: auto; }
  .hv5-showcase-pin { position: relative; height: auto; padding: 60px 32px; }
  .hv5-showcase-stage { transform: scale(0.85); margin-bottom: 64px; }
}
@media (max-width: 720px) {
  .hv5-showcase-pin-wrap { height: 220vh; }
  .hv5-showcase-pin { padding: 60px 16px 16px; }
  .hv5-showcase-text .hv5-p { font-size: 16px; }
}

/* ────────────────────────────────────────────────────────────
   FEATURE BLOCKS, asymmetric, alternating
   ──────────────────────────────────────────────────────────── */
.hv5-features {
  padding: 80px 0;
}
.hv5-feature {
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hv5-feature-text { max-width: 480px; }
.hv5-feature-text h3 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--hv5-ink);
}
.hv5-feature-text p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--hv5-ink-2);
  margin: 0;
}
.hv5-feature-visual {
  position: relative;
  background: var(--hv5-bg-card);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Even indigo halo on all four sides (no Y offset, no spread) + a faint
     black grounding shadow + hairline top highlight so the card reads as a
     lit surface rather than a flat hole on a black page. */
  box-shadow:
    0 0 100px 0 rgba(99, 102, 241, 0.32),
    0 12px 40px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* First-phrase accent in each feature headline. Soft indigo that matches
   the dashboard's accent palette. The second phrase stays white so the
   hierarchy reads: "hook (indigo) → outcome (white)". */
.hv5-feature-text h3 .hv5-feature-accent {
  color: #6ba8ff;
}
.hv5-feature-visual video,
.hv5-feature-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hv5-feature.is-reverse .hv5-feature-text { order: 2; }
.hv5-feature.is-reverse .hv5-feature-visual { order: 1; }
@media (max-width: 900px) {
  .hv5-feature { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
  .hv5-feature.is-reverse .hv5-feature-text { order: 1; }
  .hv5-feature.is-reverse .hv5-feature-visual { order: 2; }
}

/* ────────────────────────────────────────────────────────────
   STATS, clean, NO gradient numbers
   ──────────────────────────────────────────────────────────── */
.hv5-stats {
  position: relative;
  border-top: 1px solid var(--hv5-line);
  border-bottom: 1px solid var(--hv5-line);
  padding: 96px 0;
  overflow: hidden;
}
.hv5-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 120% at 0% 50%, rgba(41, 151, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 120% at 100% 50%, rgba(99, 102, 241, 0.10), transparent 70%);
  pointer-events: none;
}
.hv5-stats-grid { position: relative; z-index: 1; }
.hv5-stats-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.hv5-stat-num {
  font-size: clamp(48px, 6.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  font-feature-settings: 'tnum';
  background: linear-gradient(180deg, #ffffff 0%, #6BA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv5-stat-lbl {
  font-size: 15px;
  line-height: 1.5;
  color: var(--hv5-ink-2);
  max-width: 280px;
}
.hv5-stat-src {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--hv5-ink-3);
}
@media (max-width: 900px) {
  .hv5-stats-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ────────────────────────────────────────────────────────────
   BENEFITS, clean icon cards
   ──────────────────────────────────────────────────────────── */
.hv5-benefits {
  padding: var(--hv5-pad) 0;
  background: var(--hv5-bg);
}
.hv5-benefits-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.hv5-benefits-head {
  max-width: 720px;
  margin: 0 0 64px;
}
.hv5-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hv5-benefit {
  padding: 40px 36px;
  border: 1px solid var(--hv5-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 220ms var(--hv5-ease), background 220ms var(--hv5-ease), transform 220ms var(--hv5-ease);
}
.hv5-benefit:hover {
  border-color: var(--hv5-line-strong);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-3px);
}
.hv5-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: rgba(41, 151, 255, 0.12);
  color: var(--hv5-blue);
}
.hv5-benefit-icon svg { width: 22px; height: 22px; }
.hv5-benefit-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--hv5-ink);
}
.hv5-benefit-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--hv5-ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .hv5-benefits-grid { grid-template-columns: 1fr; }
  .hv5-benefits-head { margin-bottom: 40px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hv5-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────────────────────────────────────
   FITS, integration list, clean chips
   ──────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────
   ATMOSPHERE, the wrapper around Fits + Quote + FAQ + Close.
   One continuous gradient + noise across all four sections so
   the seams disappear. No section inside this wrapper paints
   its own background, gradient, or border.
   ──────────────────────────────────────────────────────────── */
.hv5-atmosphere {
  position: relative;
  background: var(--hv5-bg);
  isolation: isolate;
}
/* Vertical color wash. Builds gradually from the top of Fits to the bottom
   of Close so the eye experiences one continuous indigo gradient, not four
   stitched sections. */
.hv5-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Two soft horizontal blobs centered on the Quote, large enough to
       reach into Fits and FAQ above/below. */
    radial-gradient(ellipse 60% 30% at 22% 45%, rgba(41,151,255,0.16), transparent 70%),
    radial-gradient(ellipse 60% 30% at 78% 55%, rgba(99,102,241,0.16), transparent 70%),
    /* A final crescendo concentrated on the Close, top-left and bottom-right. */
    radial-gradient(ellipse 70% 28% at 30% 92%, rgba(41,151,255,0.18), transparent 70%),
    radial-gradient(ellipse 70% 28% at 70% 98%, rgba(99,102,241,0.18), transparent 70%),
    /* Quiet vertical lift from transparent (top) to indigo-tinted (bottom). */
    linear-gradient(180deg,
      transparent 0%,
      rgba(99,102,241,0.025) 35%,
      rgba(99,102,241,0.06)  70%,
      rgba(99,102,241,0.09) 100%
    );
}
/* SVG noise on top of the whole wash to prevent banding on the gradient. */
.hv5-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}
/* All sections inside the atmosphere render above the gradient + noise. */
.hv5-atmosphere > section { position: relative; z-index: 1; }

.hv5-fits {
  /* +200px of vertical breathing room beyond the default section padding. */
  padding: calc(var(--hv5-pad) + 100px) 0;
  position: relative;
}
.hv5-fits-inner { position: relative; z-index: 1; }
.hv5-fits-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.hv5-fits-head {
  text-align: center;
  margin-bottom: 64px;
}
.hv5-fits-head .hv5-h2 { margin-bottom: 16px; }
.hv5-fits-head .hv5-p { font-size: 17px; max-width: 580px; margin: 0 auto; }
.hv5-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 56px;
  padding: 8px 0;
}
.hv5-logo {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: var(--hv5-ink);
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 250ms var(--hv5-ease);
  user-select: none;
  font-size: 22px;
}
.hv5-logo:hover { opacity: 0.95; }

/* Each wordmark uses its brand's signature typography */
.hv5-logo-solidworks {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
}
.hv5-logo-siemens {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 20px;
}
.hv5-logo-autodesk {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.005em;
  font-size: 20px;
}
.hv5-logo-ptc {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.hv5-logo-mcmaster {
  font-family: 'Times New Roman', 'Georgia', serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.005em;
  font-size: 21px;
}
.hv5-logo-misumi {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.10em;
  font-size: 19px;
}

@media (max-width: 720px) {
  .hv5-logo-row { gap: 20px 36px; }
  .hv5-logo { font-size: 17px; }
  .hv5-logo-siemens, .hv5-logo-autodesk { font-size: 16px; }
  .hv5-logo-mcmaster { font-size: 16px; }
  .hv5-logo-misumi { font-size: 15px; }
}

/* ────────────────────────────────────────────────────────────
   QUOTE, single editorial pull quote
   ──────────────────────────────────────────────────────────── */
.hv5-quote {
  position: relative;
  padding: var(--hv5-pad) 0;
  /* No bg, no border, no overflow:hidden. Atmosphere on the parent paints
     the gradient continuously across all four sections. */
}
.hv5-quote-inner { position: relative; z-index: 1; }
.hv5-quote-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.hv5-quote-body {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--hv5-ink);
  margin: 0 0 32px;
  text-wrap: balance;
}
.hv5-quote-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hv5-quote-attrib {
  font-size: 14px;
  font-weight: 500;
  color: var(--hv5-ink);
  letter-spacing: -0.005em;
}
.hv5-quote-where {
  font-size: 13px;
  color: var(--hv5-ink-3);
}

/* ────────────────────────────────────────────────────────────
   PRICING, three minimal cards, NO gradient
   ──────────────────────────────────────────────────────────── */
.hv5-pricing {
  padding: var(--hv5-pad) 0;
}
.hv5-pricing-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.hv5-pricing-head {
  text-align: center;
  margin-bottom: 64px;
}
.hv5-pricing-head .hv5-h2 { margin-bottom: 16px; }
.hv5-pricing-head .hv5-p { font-size: 17px; max-width: 540px; margin: 0 auto; }
.hv5-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hv5-plan {
  display: block;
  position: relative;
  padding: 32px 28px;
  background: var(--hv5-bg-card);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  text-decoration: none;
  color: var(--hv5-ink);
  transition: border-color 200ms, background-color 200ms, transform 200ms;
}
.hv5-plan:hover {
  border-color: var(--hv5-line-strong);
  background: var(--hv5-bg-elevated);
  transform: translateY(-2px);
}
.hv5-plan-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--hv5-ink-2);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.hv5-plan-price {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 12px;
}
.hv5-plan-price span {
  font-size: 15px;
  font-weight: 400;
  color: var(--hv5-ink-3);
  margin-left: 4px;
  letter-spacing: -0.005em;
}
.hv5-plan-tag {
  font-size: 14px;
  color: var(--hv5-ink-3);
  line-height: 1.45;
}
.hv5-plan-featured {
  background: var(--hv5-bg-elevated);
  border-color: var(--hv5-line-strong);
}
.hv5-plan-featured::after {
  content: 'Popular';
  position: absolute;
  top: 28px; right: 28px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hv5-ink-2);
  background: var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}
.hv5-pricing-link {
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hv5-ink-2);
  text-decoration: none;
}
.hv5-pricing-link:hover { color: var(--hv5-ink); }
.hv5-pricing-link::after { content: ' →'; }

@media (max-width: 720px) {
  .hv5-plans { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   FAQ, clean accordion
   ──────────────────────────────────────────────────────────── */
.hv5-faq {
  padding: var(--hv5-pad) 0;
  position: relative;
}
.hv5-faq-inner { position: relative; z-index: 1; }
.hv5-faq-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.hv5-faq .hv5-h2 {
  text-align: center;
  margin-bottom: 64px;
}
.hv5-faq-list { display: flex; flex-direction: column; }
.hv5-faq-item {
  border-top: 1px solid var(--hv5-line);
  padding: 24px 0;
}
.hv5-faq-item:last-child { border-bottom: 1px solid var(--hv5-line); }
.hv5-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--hv5-ink);
  letter-spacing: -0.015em;
  line-height: 1.45;
  outline: none;
}
.hv5-faq-item summary::-webkit-details-marker { display: none; }
.hv5-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--hv5-ink-3);
  transition: transform 240ms var(--hv5-ease), color 200ms;
}
.hv5-faq-item:hover summary::after { color: var(--hv5-ink); }
.hv5-faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--hv5-blue);
}
.hv5-faq-answer {
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--hv5-ink-2);
  max-width: 680px;
}

/* ────────────────────────────────────────────────────────────
   CLOSE, final CTA
   ──────────────────────────────────────────────────────────── */
.hv5-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 7vw, 96px) 0;
  text-align: center;
  position: relative;
  /* Gradient + noise come from .hv5-atmosphere now; no per-section paint. */
}
.hv5-close-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
  z-index: 1;
}
.hv5-close-title {
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 20px;
  color: var(--hv5-ink);
  text-wrap: balance;
}
.hv5-close-sub {
  font-size: 18px;
  color: var(--hv5-ink-2);
  margin: 0 0 40px;
  line-height: 1.5;
}
.hv5-close-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hv5-close-link {
  display: block;
  font-size: 14px;
  color: var(--hv5-ink-3);
  text-decoration: none;
  margin-top: 16px;
}
.hv5-close-link:hover { color: var(--hv5-ink-2); }

/* ────────────────────────────────────────────────────────────
   Scroll reveal (subtle, gentle)
   ──────────────────────────────────────────────────────────── */
.hv5-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--hv5-ease),
              transform 700ms var(--hv5-ease);
}
.hv5-reveal.is-in {
  opacity: 1;
  transform: none;
}
.hv5-reveal[data-i="2"] { transition-delay: 70ms; }
.hv5-reveal[data-i="3"] { transition-delay: 140ms; }
.hv5-reveal[data-i="4"] { transition-delay: 210ms; }
.hv5-reveal[data-i="5"] { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .hv5-reveal { opacity: 1; transform: none; transition: none; }
}

/* Word-by-word fade-up on headlines */
.hv5-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change: opacity, transform;
}
.hv5-words.is-in .word {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hv5-words .word { opacity: 1; transform: none; transition: none; }
}

/* ────────────────────────────────────────────────────────────
   NAV, overrides for home page (the nav is shared)
   ──────────────────────────────────────────────────────────── */
/* Base nav state at the top of the page (matches what JS sets at p=0).
   No transitions here, JS owns the morph and writes inline styles every
   frame, so any CSS transition would just smear the per-frame writes into
   a bouncy tween. */
body.home-v5 .nav-wrap,
body.page-clean .nav-wrap {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 72px;
  padding: 0 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: none;
}
body.home-v5 .nav-wrap.is-scrolled,
body.page-clean .nav-wrap.is-scrolled,
body.page-clean .nav-wrap.is-scrolled {
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(700px, calc(100vw - 32px));
  height: 60px;
  padding: 8px 8px 8px 22px !important;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-color: var(--line-2);
  border-radius: 999px;
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--pill-bg);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px;
}
body.home-v5 .nav-wrap.is-scrolled .nav,
body.page-clean .nav-wrap.is-scrolled .nav,
body.page-clean .nav-wrap.is-scrolled .nav {
  padding: 0 !important;
  gap: 24px !important;
  min-height: 0 !important;
  align-items: center !important;
  flex: 0 1 auto !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-brand,
body.page-clean .nav-wrap.is-scrolled .nav-brand,
body.page-clean .nav-wrap.is-scrolled .nav-brand {
  gap: 8px !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-logo,
body.page-clean .nav-wrap.is-scrolled .nav-logo,
body.page-clean .nav-wrap.is-scrolled .nav-logo {
  width: 32px !important;
  height: 32px !important;
}
body.home-v5 .nav-wrap.is-scrolled .brand-text,
body.page-clean .nav-wrap.is-scrolled .brand-text,
body.page-clean .nav-wrap.is-scrolled .brand-text {
  font-size: 15px !important;
  line-height: 1 !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-links,
body.page-clean .nav-wrap.is-scrolled .nav-links,
body.page-clean .nav-wrap.is-scrolled .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex: 0 1 auto !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-links li,
body.page-clean .nav-wrap.is-scrolled .nav-links li,
body.page-clean .nav-wrap.is-scrolled .nav-links li { display: inline-flex; align-items: center; }
body.home-v5 .nav-wrap.is-scrolled .nav-links a,
body.page-clean .nav-wrap.is-scrolled .nav-links a,
body.page-clean .nav-wrap.is-scrolled .nav-links a {
  font-size: 14px !important;
  line-height: 1 !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-divider,
body.page-clean .nav-wrap.is-scrolled .nav-divider,
body.page-clean .nav-wrap.is-scrolled .nav-divider {
  display: none !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-cta,
body.page-clean .nav-wrap.is-scrolled .nav-cta,
body.page-clean .nav-wrap.is-scrolled .nav-cta {
  padding: 0 !important;
  gap: 6px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
body.home-v5 .nav-wrap.is-scrolled .nav-cta .btn,
body.page-clean .nav-wrap.is-scrolled .nav-cta .btn,
body.page-clean .nav-wrap.is-scrolled .nav-cta .btn {
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
body.home-v5 .nav,
body.page-clean .nav {
  min-height: 0 !important;
  padding: 4px 16px 4px 8px !important;
  gap: 20px !important;
  transition: padding 680ms cubic-bezier(0.16, 1, 0.3, 1),
              gap 680ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.home-v5 .nav-logo,
body.page-clean .nav-logo,
body.home-v5 .brand-text,
body.page-clean .brand-text,
body.home-v5 .nav-links a,
body.page-clean .nav-links a,
body.home-v5 .nav-cta,
body.page-clean .nav-cta,
body.home-v5 .nav-cta .btn,
body.page-clean .nav-cta .btn {
  transition: all 680ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.home-v5 .nav-brand,
body.page-clean .nav-brand,
body.page-clean .nav-brand {
  gap: 8px;
}
body.home-v5 .nav-logo,
body.page-clean .nav-logo,
body.page-clean .nav-logo {
  width: 32px !important;
  height: 32px !important;
}
body.home-v5 .nav-cta,
body.page-clean .nav-cta,
body.page-clean .nav-cta {
  padding: 4px !important;
  gap: 6px !important;
}
body.home-v5 .nav-cta .btn,
body.page-clean .nav-cta .btn,
body.page-clean .nav-cta .btn {
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
body.home-v5 .nav-pill,
body.page-clean .nav-pill,
body.home-v5 .nav-cta.nav-pill,
body.page-clean .nav-cta.nav-pill,
body.page-clean .nav-cta.nav-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.home-v5 .nav,
body.page-clean .nav { padding-left: 0; }
body.home-v5 .nav-divider,
body.page-clean .nav-divider,
body.page-clean .nav-divider { display: none; }
body.home-v5 .brand-text,
body.page-clean .brand-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
body.home-v5 .nav-links a,
body.page-clean .nav-links a,
body.page-clean .nav-links a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--hv5-ink-2) !important;
  letter-spacing: -0.005em !important;
}
body.home-v5 .nav-links a:hover,
body.page-clean .nav-links a:hover,
body.page-clean .nav-links a:hover,
body.home-v5 .nav-links a.is-active,
body.page-clean .nav-links a.is-active,
body.page-clean .nav-links a.is-active {
  color: var(--hv5-ink) !important;
}
body.home-v5 .nav-cta .btn,
body.page-clean .nav-cta .btn,
body.page-clean .nav-cta .btn { /* clean-style nav buttons, same 44px height in both pill + non-pill modes */
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--hv5-radius-pill) !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background-color 200ms, color 200ms, border-color 200ms !important;
}
body.home-v5 .nav-cta .btn .chev,
body.page-clean .nav-cta .btn .chev,
body.page-clean .nav-cta .btn .chev { display: none !important; }
body.home-v5 .nav-cta .btn-ghost,
body.page-clean .nav-cta .btn-ghost,
body.page-clean .nav-cta .btn-ghost {
  background: transparent !important;
  color: var(--hv5-ink) !important;
  border: 1px solid transparent !important;
}
body.home-v5 .nav-cta .btn-ghost:hover,
body.page-clean .nav-cta .btn-ghost:hover,
body.page-clean .nav-cta .btn-ghost:hover {
  background: var(--line-soft) !important;
}
body.home-v5 .nav-cta .btn-primary,
body.page-clean .nav-cta .btn-primary,
body.page-clean .nav-cta .btn-primary {
  background: var(--hv5-ink) !important;
  color: #000 !important;
  border: 1px solid var(--hv5-ink) !important;
}
body.home-v5 .nav-cta .btn-primary:hover,
body.page-clean .nav-cta .btn-primary:hover,
body.page-clean .nav-cta .btn-primary:hover { background: #e9e9e9 !important; }

/* ────────────────────────────────────────────────────────────
   FOOTER, overrides for home page
   ──────────────────────────────────────────────────────────── */
body.home-v5 .footer {
  background: var(--hv5-bg) !important;
  border-top: 1px solid var(--hv5-line) !important;
  margin: 0 !important;
  padding: 80px 0 32px !important;
}
body.home-v5 .footer-grid {
  max-width: 1240px !important;
  padding: 0 32px !important;
  grid-template-columns: 1.4fr 2.5fr !important;
  gap: 64px !important;
  margin-bottom: 48px !important;
}
body.home-v5 .footer-headline {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  max-width: 220px;
  margin: 0 0 24px !important;
}
body.home-v5 .footer-left .btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--hv5-ink) !important;
  color: #000 !important;
  border: 1px solid var(--hv5-ink) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  height: auto !important;
  margin-bottom: 32px !important;
}
body.home-v5 .footer-address {
  font-size: 13px !important;
  color: var(--hv5-ink-3) !important;
  line-height: 1.6 !important;
}
body.home-v5 .footer-col h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hv5-ink) !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.005em !important;
}
body.home-v5 .footer-col a {
  font-size: 13px !important;
  color: var(--hv5-ink-3) !important;
  letter-spacing: -0.005em !important;
}
body.home-v5 .footer-col a:hover {
  color: var(--hv5-ink) !important;
}
body.home-v5 .footer-legal {
  max-width: 1240px !important;
  padding: 24px 32px 0 !important;
  border-top: 1px solid var(--hv5-line) !important;
  font-size: 12px !important;
  color: var(--hv5-ink-4) !important;
}
body.home-v5 .footer-legal ul a { color: var(--hv5-ink-4) !important; }
body.home-v5 .footer-legal ul a:hover { color: var(--hv5-ink-3) !important; }
body.home-v5 .footer-disclaimer {
  font-size: 11px !important;
  color: var(--hv5-ink-4) !important;
  line-height: 1.55 !important;
}

/* ────────────────────────────────────────────────────────────
   Suppress every legacy home class so nothing leaks through.
   ──────────────────────────────────────────────────────────── */
body.home-v5 .hero,
body.home-v5 .hero-v2,
body.home-v5 .hero-clean,
body.home-v5 .home-v3,
body.home-v5 .s1-hero,
body.home-v5 .s2-sentence,
body.home-v5 .s3-showcase,
body.home-v5 .s4-caps,
body.home-v5 .s5-stats,
body.home-v5 .s6-fit,
body.home-v5 .s7-voice,
body.home-v5 .s8-try,
body.home-v5 .s9-pricing,
body.home-v5 .s10-faq,
body.home-v5 .s11-close,
body.home-v5 .prompts,
body.home-v5 .integrates,
body.home-v5 .workflow,
body.home-v5 .benefits,
body.home-v5 .faq,
body.home-v5 .newsletter,
body.home-v5 .trust-strip,
body.home-v5 .stats-band,
body.home-v5 .final-cta { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   PAGE-CLEAN, shared clean treatment for pricing, blog, legal,
   comparison, etc. Same tokens as home-v5. Same buttons. Same nav.
   ════════════════════════════════════════════════════════════════ */

body.page-clean {
  --c-bg:           var(--surface-0);
  --c-bg-1:         var(--surface-navy-1);
  --c-bg-card:      var(--surface-card);
  --c-bg-elevated:  var(--surface-elevated);
  --c-line:         var(--line);
  --c-line-strong:  var(--line-strong);
  --c-ink:          var(--ink);
  --c-ink-2:        var(--ink-strong);
  --c-ink-3:        var(--ink-mid);
  --c-ink-4:        var(--ink-faint);
  --c-blue:         var(--accent);
  --c-radius-card:  var(--r-md);
  --c-radius-large: var(--r-lg);
  --c-radius-pill:  var(--r-pill);
  --c-ease:         var(--ease-out);

  background: var(--c-bg);
  color: var(--c-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  overflow-x: clip;
}

body.page-clean * { box-sizing: border-box; }

/* page-clean nav rules merged into shared selectors below */
body.page-clean .nav-pill,
body.page-clean .nav-cta.nav-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.page-clean .nav-divider { display: none; }
body.page-clean .brand-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
body.page-clean .nav-links a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-ink-2) !important;
  letter-spacing: -0.005em !important;
}
body.page-clean .nav-links a:hover,
body.page-clean .nav-links a[aria-current="page"] {
  color: var(--c-ink) !important;
}
body.page-clean .nav-cta .btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--c-radius-pill) !important;
  padding: 8px 16px !important;
  height: auto !important;
}
body.page-clean .nav-cta .btn .chev { display: none !important; }
body.page-clean .nav-cta .btn-ghost {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1px solid transparent !important;
}
body.page-clean .nav-cta .btn-ghost:hover { background: var(--line-soft) !important; }
body.page-clean .nav-cta .btn-primary {
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 1px solid var(--c-ink) !important;
}
body.page-clean .nav-cta .btn-primary:hover { background: #e9e9e9 !important; }

/* Footer for clean pages */
body.page-clean .footer {
  background: var(--c-bg) !important;
  border-top: 1px solid var(--c-line) !important;
  margin: 0 !important;
  padding: 80px 0 32px !important;
}
body.page-clean .footer-grid {
  max-width: 1240px !important;
  padding: 0 32px !important;
  grid-template-columns: 1.4fr 2.5fr !important;
  gap: 64px !important;
  margin-bottom: 48px !important;
}
body.page-clean .footer-headline {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  max-width: 220px;
  margin: 0 0 24px !important;
}
body.page-clean .footer-left .btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 1px solid var(--c-ink) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  height: auto !important;
  margin-bottom: 32px !important;
}
body.page-clean .footer-address {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
  line-height: 1.6 !important;
}
body.page-clean .footer-col h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-ink) !important;
  margin: 0 0 16px !important;
}
body.page-clean .footer-col a {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .footer-col a:hover { color: var(--c-ink) !important; }
body.page-clean .footer-legal {
  max-width: 1240px !important;
  padding: 24px 32px 0 !important;
  border-top: 1px solid var(--c-line) !important;
  font-size: 12px !important;
  color: var(--c-ink-4) !important;
}
body.page-clean .footer-legal ul a { color: var(--c-ink-4) !important; }
body.page-clean .footer-legal ul a:hover { color: var(--c-ink-3) !important; }
body.page-clean .footer-disclaimer {
  font-size: 11px !important;
  color: var(--c-ink-4) !important;
  line-height: 1.55 !important;
}

/* Clean buttons for clean pages */
body.page-clean .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--c-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--c-ease),
              color 200ms var(--c-ease),
              border-color 200ms var(--c-ease),
              transform 120ms var(--c-ease);
  white-space: nowrap;
}
body.page-clean .c-btn:active { transform: scale(0.97); }
body.page-clean .c-btn-primary { background: var(--c-ink); color: #000; }
body.page-clean .c-btn-primary:hover { background: #e9e9e9; }
body.page-clean .c-btn-secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
body.page-clean .c-btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--ink-faint);
}

/* Clean page headers */
body.page-clean .c-page-hero {
  padding: 140px 32px 80px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
body.page-clean .c-page-hero h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--c-ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
body.page-clean .c-page-hero p {
  font-size: 19px;
  color: var(--c-ink-2);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 600px;
}

/* Pricing override for clean style */
body.page-clean .pricing-hero { padding: 160px 32px 60px !important; text-align: center; }
body.page-clean .pricing-title {
  font-size: clamp(40px, 5.4vw, 72px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: var(--c-ink) !important;
  margin: 0 0 20px !important;
  text-wrap: balance;
  background: none !important;
  -webkit-text-fill-color: var(--c-ink) !important;
}
body.page-clean .pricing-sub {
  font-size: 19px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.5 !important;
  margin: 0 auto 32px !important;
  max-width: 560px;
}
body.page-clean .billing-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  padding: 4px !important;
}
body.page-clean .billing-tab {
  height: 36px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  color: var(--c-ink-2) !important;
}
body.page-clean .billing-tab:hover { color: var(--c-ink) !important; }
body.page-clean .billing-tab.is-active {
  background: var(--c-ink) !important;
  color: #000 !important;
}
body.page-clean .billing-save {
  background: rgba(41, 151, 255, 0.15) !important;
  color: var(--c-blue) !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
}
body.page-clean .billing-tab.is-active .billing-save {
  background: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.7) !important;
}
body.page-clean .tiers { padding: 60px 32px 100px !important; max-width: 1240px !important; }
body.page-clean .tiers-grid { gap: 16px !important; grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 899px) {
  body.page-clean .tiers-grid { grid-template-columns: 1fr !important; }
  /* The pricing tiers-grid is set to inline flex (forced 3-up) on the
     pricing page. Those inline styles have no !important, so restore the
     intended single-column stacking on small screens here. */
  body.page-clean .tiers-grid { flex-direction: column !important; flex-wrap: wrap !important; }
  body.page-clean .tiers-grid .tier { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; }
}
body.page-clean .tier {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  padding: 32px 28px !important;
  box-shadow: none !important;
  transition: border-color 200ms, background-color 200ms, transform 200ms;
}
body.page-clean .tier:hover {
  border-color: var(--c-line-strong) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px);
}
body.page-clean .tier-featured {
  border-color: var(--c-line-strong) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.page-clean .tier-featured {
  overflow: visible;
}
body.page-clean .tier-ribbon {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  background: var(--c-ink) !important;
  color: #000 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  border: 0 !important;
  white-space: nowrap;
  z-index: 2;
}
body.page-clean .tier-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-ink-2) !important;
  margin: 0 0 8px !important;
}
body.page-clean .tier-tag {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
  line-height: 1.45 !important;
  margin: 0 0 24px !important;
}
body.page-clean .tier-header { margin-bottom: 20px !important; }
body.page-clean .tier-price-amt {
  font-size: 40px !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  color: var(--c-ink) !important;
}
body.page-clean .tier-price-period {
  font-size: 15px !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .tier-price-sub {
  font-size: 12px !important;
  color: var(--c-ink-4) !important;
}
body.page-clean .tier-features li {
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.45 !important;
}
body.page-clean .tier-features .check {
  color: var(--c-ink) !important;
  opacity: 0.7;
}
body.page-clean .tier-cta {
  width: 100%;
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  letter-spacing: -0.005em !important;
}
body.page-clean .tier-cta .chev { display: none !important; }
body.page-clean .btn-tier-secondary,
body.page-clean .tier .btn-tier-secondary {
  background: var(--line) !important;
  color: var(--c-ink) !important;
  border: 0 !important;
}
body.page-clean .btn-tier-secondary:hover {
  background: var(--line-strong) !important;
}
body.page-clean .tier-featured .tier-cta,
body.page-clean .btn-tier-primary {
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 0 !important;
}
body.page-clean .tier-featured .tier-cta:hover,
body.page-clean .btn-tier-primary:hover { background: #e9e9e9 !important; }
body.page-clean .tier-fineprint {
  font-size: 12px !important;
  color: var(--c-ink-4) !important;
  margin-top: 16px !important;
}

/* Compare table for clean pages */
body.page-clean .compare {
  max-width: 1080px !important;
  padding: 80px 32px !important;
  margin: 0 auto !important;
}
body.page-clean .compare .big-heading {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink) !important;
  text-align: center;
  margin: 0 auto 48px !important;
  background: none !important;
  -webkit-text-fill-color: var(--c-ink) !important;
}
body.page-clean .compare-table-wrap {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
}
body.page-clean .compare-table {
  font-size: 14px !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
body.page-clean .compare-table colgroup col:first-child { width: 34%; }
body.page-clean .compare-table colgroup col:not(:first-child) { width: 22%; }
body.page-clean .compare-table th,
body.page-clean .compare-table td {
  border-bottom: 1px solid var(--c-line) !important;
  padding: 16px 20px !important;
  vertical-align: middle !important;
}
/* Row header (first column), left aligned */
body.page-clean .compare-table thead th:first-child,
body.page-clean .compare-table tbody th {
  text-align: left !important;
  width: 34% !important;
}
/* Plan columns, center aligned, equal width */
body.page-clean .compare-table thead th:not(:first-child),
body.page-clean .compare-table tbody td {
  text-align: center !important;
  width: 22% !important;
}
body.page-clean .compare-table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--c-ink-3) !important;
  background: transparent !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
body.page-clean .compare-table tbody th { color: var(--c-ink) !important; font-weight: 500 !important; }
body.page-clean .compare-table tbody td { color: var(--c-ink-2) !important; }

/* FAQ for clean pages */
body.page-clean .faq {
  max-width: 820px !important;
  padding: 80px 32px 120px !important;
}
body.page-clean .faq .big-heading {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink) !important;
  text-align: center;
  margin: 0 auto 48px !important;
  background: none !important;
  -webkit-text-fill-color: var(--c-ink) !important;
}
body.page-clean .faq-list { display: flex; flex-direction: column; gap: 0 !important; }
body.page-clean .faq-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--c-line) !important;
  border-radius: 0 !important;
  padding: 24px 0 !important;
  margin: 0 !important;
}
body.page-clean .faq-item:last-child { border-bottom: 1px solid var(--c-line) !important; }
body.page-clean .faq-item summary {
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--c-ink) !important;
  letter-spacing: -0.015em !important;
}
body.page-clean .faq-item summary::after {
  content: '+' !important;
  border: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--c-ink-3) !important;
  transform: none !important;
  transition: transform 240ms var(--c-ease), color 200ms !important;
  margin: 0 !important;
}
body.page-clean .faq-item:hover summary::after { color: var(--c-ink) !important; }
body.page-clean .faq-item[open] summary::after {
  transform: rotate(45deg) !important;
  color: var(--c-ink) !important;
}
body.page-clean .faq-answer {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--c-ink-2) !important;
  padding-top: 16px !important;
}

/* Blog/article for clean pages */
body.page-clean .blog-page,
body.page-clean .blog-article {
  background: var(--c-bg);
}
body.page-clean .blog-page > section:not(.blog-hero-v2):first-child,
body.page-clean .blog-page > .blog-section:first-child { padding-top: 120px; }

/* ──── BLOG HERO, clean rebuild ──────────────────────────── */
body.page-clean .blog-hero-v2 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 100px 24px 80px;
  overflow: hidden;
  isolation: isolate;
}
body.page-clean .blog-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(41, 151, 255, 0.50), transparent 65%),
    radial-gradient(ellipse 80% 70% at 0% 100%, rgba(99, 102, 241, 0.45), transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99, 102, 241, 0.06), transparent 75%);
}
body.page-clean .blog-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
body.page-clean .blog-hero-v2-inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-clean .blog-hero-v2-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
body.page-clean .blog-hero-v2-title {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 18px;
  text-wrap: balance;
  max-width: 100%;
}
body.page-clean .blog-hero-v2-sub {
  font-size: 17px;
  color: var(--ink-strong);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 520px;
}
@media (max-width: 720px) {
  body.page-clean .blog-hero-v2 { min-height: 80vh; padding: 100px 20px 60px; }
  body.page-clean .blog-hero-v2-title { font-size: clamp(30px, 8vw, 44px); }
  body.page-clean .blog-hero-v2-sub { font-size: 15px; }
}

/* Legacy blog-hero kept for safety net */
body.page-clean .blog-hero {
  padding: 120px 32px 64px !important;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
body.page-clean .blog-hero h1 {
  font-size: clamp(40px, 5.4vw, 64px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: var(--c-ink) !important;
  margin: 0 0 16px !important;
  text-wrap: balance;
}
body.page-clean .blog-lede {
  font-size: 18px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.5 !important;
}
body.page-clean .legal-eyebrow {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .blog-section { margin-bottom: 80px; }
body.page-clean .blog-section-head { margin-bottom: 32px; }
body.page-clean .blog-section-head h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
  margin: 0 0 6px !important;
}
body.page-clean .blog-section-sub {
  font-size: 14px !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .blog-grid { gap: 16px !important; }
body.page-clean .blog-card {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  box-shadow: none !important;
  transition: border-color 200ms, transform 200ms;
}
body.page-clean .blog-card:hover {
  border-color: var(--c-line-strong) !important;
  transform: translateY(-2px);
}
body.page-clean .blog-card-link { padding: 24px !important; }
body.page-clean .blog-tag {
  background: var(--line) !important;
  color: var(--c-ink-2) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
body.page-clean .blog-card h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-ink) !important;
  margin: 12px 0 !important;
}
body.page-clean .blog-card p {
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
}
body.page-clean .blog-meta {
  font-size: 12px !important;
  color: var(--c-ink-3) !important;
  letter-spacing: -0.005em !important;
}
body.page-clean .press-empty {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
  padding: 28px 0 0 !important;
  max-width: 640px !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}
body.page-clean .press-empty strong { color: #ffffff !important; font-weight: 500 !important; }
body.page-clean .press-empty a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ink-faint) !important;
}

/* CTA, no giant card, just centered text + pill buttons */
body.page-clean .blog-cta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 96px 28px 140px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body.page-clean .blog-cta-inner {
  max-width: 640px !important;
  margin: 0 auto !important;
}
body.page-clean .blog-cta h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
  color: #ffffff !important;
}
body.page-clean .blog-cta p {
  font-size: 16px !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.5 !important;
  margin: 0 0 28px !important;
}
body.page-clean .blog-cta-actions {
  display: inline-flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
body.page-clean .blog-cta-actions .btn-primary {
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 999px !important;
}
body.page-clean .blog-cta-actions .btn-ghost {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 999px !important;
}
body.page-clean .blog-cta-actions .btn .chev { display: none !important; }

/* Article body */
body.page-clean .blog-article { padding-top: 120px; }
body.page-clean .article-header h1 {
  font-size: clamp(32px, 4.4vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  color: var(--c-ink) !important;
  text-wrap: balance;
}
body.page-clean .article-meta {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .article-eyebrow {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: var(--c-ink-3) !important;
  background: none !important;
}
body.page-clean .article-body { font-size: 17px !important; line-height: 1.7 !important; color: var(--c-ink-2) !important; }
body.page-clean .article-body .article-lede {
  font-size: 20px !important;
  color: var(--c-ink) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}
body.page-clean .article-body h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-ink) !important;
  margin: 56px 0 16px !important;
}
body.page-clean .article-body h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-ink) !important;
  margin: 32px 0 12px !important;
}
body.page-clean .article-body a { color: var(--c-blue) !important; }
body.page-clean .article-body strong { color: var(--c-ink) !important; }
body.page-clean .article-cta {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  padding: 40px !important;
  margin-top: 64px !important;
}
body.page-clean .article-cta h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
}
body.page-clean .article-cta p {
  font-size: 15px !important;
  color: var(--c-ink-2) !important;
  margin: 0 0 24px !important;
}
body.page-clean .article-cta .btn-primary {
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 999px !important;
}
body.page-clean .article-cta .btn-ghost {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 999px !important;
}
body.page-clean .article-cta .btn .chev { display: none !important; }
body.page-clean .related-card {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-card) !important;
  padding: 24px !important;
  transition: border-color 200ms, transform 200ms;
}
body.page-clean .related-card:hover {
  border-color: var(--c-line-strong) !important;
  transform: translateY(-2px);
}
body.page-clean .related-label {
  font-size: 11px !important;
  color: var(--c-ink-3) !important;
  letter-spacing: 0.06em !important;
}
body.page-clean .related-title {
  font-size: 16px !important;
  color: var(--c-ink) !important;
}

/* Legal pages */
body.page-clean .legal-page {
  max-width: 720px !important;
  padding: 140px 32px 80px !important;
}
body.page-clean .legal-page h1 {
  font-size: clamp(36px, 4.4vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  color: var(--c-ink) !important;
  margin: 16px 0 24px !important;
}
body.page-clean .legal-page h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-ink) !important;
  margin: 48px 0 16px !important;
}
body.page-clean .legal-page h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
  margin: 24px 0 12px !important;
}
body.page-clean .legal-page p,
body.page-clean .legal-page ul,
body.page-clean .legal-page ol {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--c-ink-2) !important;
  margin-bottom: 16px !important;
}
body.page-clean .legal-page a { color: var(--c-blue) !important; }
body.page-clean .legal-page strong { color: var(--c-ink) !important; }
body.page-clean .legal-meta {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
  margin-bottom: 32px !important;
}
body.page-clean .legal-callout, body.page-clean .legal-warn {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-left: 2px solid var(--c-ink-2) !important;
  border-radius: var(--c-radius-card) !important;
  padding: 20px 24px !important;
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
  margin: 24px 0 !important;
}
body.page-clean .legal-toc {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-card) !important;
  padding: 20px 24px !important;
  font-size: 14px !important;
  margin-bottom: 32px !important;
}
body.page-clean .legal-toc li { margin-bottom: 8px; }
body.page-clean .legal-toc a { font-size: 13px !important; color: var(--c-ink-2) !important; border: 0 !important; }
body.page-clean .legal-toc a:hover { color: var(--c-ink) !important; }
body.page-clean .legal-contact {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-card) !important;
  padding: 20px 24px !important;
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
  margin-top: 48px !important;
}

/* Comparison page (vs-aura) */
body.page-clean .vsx-hero {
  max-width: 1240px !important;
  padding: 140px 32px 60px !important;
}
body.page-clean .vsx-hero-inner { gap: 64px !important; }
body.page-clean .vsx-title {
  font-size: clamp(40px, 5.4vw, 72px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: var(--c-ink) !important;
}
body.page-clean .vsx-vs {
  color: var(--c-ink-3) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}
body.page-clean .vsx-tag-cad { color: var(--c-ink) !important; }
body.page-clean .vsx-tag-aura { color: var(--c-ink-3) !important; }
body.page-clean .vsx-sub {
  font-size: 17px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.5 !important;
}
body.page-clean .vsx-visual-card {
  border-radius: var(--c-radius-large) !important;
  border: 1px solid var(--c-line) !important;
}
body.page-clean .vsx-section-title {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink) !important;
}
body.page-clean .vsx-kicker {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--c-blue) !important;
}
body.page-clean .vsx-col {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  padding: 32px !important;
}
body.page-clean .vsx-col-cad { border-color: var(--c-line-strong) !important; }
body.page-clean .vsx-col-name {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
}
body.page-clean .vsx-col-tag {
  font-size: 13px !important;
  color: var(--c-ink-3) !important;
}
body.page-clean .vsx-list li {
  font-size: 14px !important;
  color: var(--c-ink-2) !important;
}
body.page-clean .vsx-value {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  padding: 40px !important;
}
body.page-clean .vsx-value-icon {
  background: var(--line-soft) !important;
  color: var(--c-ink) !important;
  border-radius: 12px !important;
}
body.page-clean .vsx-value-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--c-ink) !important;
}
body.page-clean .vsx-value-body {
  font-size: 15px !important;
  color: var(--c-ink-2) !important;
  line-height: 1.6 !important;
}
body.page-clean .vsx-cta-card {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius-large) !important;
  box-shadow: none !important;
}
body.page-clean .vsx-cta-title {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--c-ink) !important;
}
body.page-clean .vsx-cta-sub {
  font-size: 16px !important;
  color: var(--c-ink-2) !important;
}
body.page-clean .vsx-cta-actions .btn-primary {
  background: var(--c-ink) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 999px !important;
}
body.page-clean .vsx-cta-actions .btn-ghost {
  background: transparent !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 999px !important;
}
body.page-clean .vsx-cta-actions .btn .chev { display: none !important; }

/* Reveal animation for page-clean */
body.page-clean .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--c-ease), transform 700ms var(--c-ease);
}
body.page-clean .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.page-clean .reveal { opacity: 1; transform: none; transition: none; }
}

/* Focus visible */
body.page-clean :focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: inherit;
}

/* ════════════════════════════════════════════════════════════════
   MODAL OVERHAUL, clean Apple/Vercel aesthetic
   Applies to demo + signup modals across all pages
   ════════════════════════════════════════════════════════════════ */

body.home-v5 .modal-backdrop,
body.page-clean .modal-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.home-v5 .modal-card,
body.page-clean .modal-card {
  background: #111111 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7) !important;
  max-width: 480px !important;
}
body.home-v5 .modal-card.modal-card-wizard-wide,
body.page-clean .modal-card.modal-card-wizard-wide {
  max-width: 640px !important;
}

body.home-v5 .modal-close,
body.page-clean .modal-close {
  right: 16px !important;
  top: 16px !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--line-soft) !important;
  color: var(--ink-strong) !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  transition: background-color 180ms, color 180ms !important;
}
body.home-v5 .modal-close:hover,
body.page-clean .modal-close:hover {
  background: var(--line-12) !important;
  color: #fff !important;
}

body.home-v5 .modal-card h3,
body.page-clean .modal-card h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  color: #fafafa !important;
  padding-right: 40px;
}
body.home-v5 .modal-sub,
body.page-clean .modal-sub {
  font-size: 14px !important;
  color: var(--ink-strong) !important;
  margin: 0 0 24px !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
}

/* Form fields, sentence-case labels, clean inputs */
body.home-v5 .modal-form .field,
body.page-clean .modal-form .field {
  margin-bottom: 14px !important;
  gap: 6px !important;
}
body.home-v5 .modal-form label,
body.page-clean .modal-form label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--ink-strong) !important;
}
body.home-v5 .modal-form .req,
body.page-clean .modal-form .req {
  color: var(--ink-mid) !important;
  font-weight: 400 !important;
}
body.home-v5 .modal-form input,
body.home-v5 .modal-form select,
body.home-v5 .modal-form textarea,
body.page-clean .modal-form input,
body.page-clean .modal-form select,
body.page-clean .modal-form textarea {
  width: 100%;
  background: var(--pill-bg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  height: 44px !important;
  color: #fafafa !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  outline: none !important;
  transition: border-color 180ms, background-color 180ms, box-shadow 180ms !important;
  appearance: none;
  -webkit-appearance: none;
}
body.home-v5 .modal-form select,
body.page-clean .modal-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  padding-right: 36px !important;
}
body.home-v5 .modal-form textarea,
body.page-clean .modal-form textarea {
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
  resize: vertical;
}
body.home-v5 .modal-form input:hover,
body.home-v5 .modal-form select:hover,
body.home-v5 .modal-form textarea:hover,
body.page-clean .modal-form input:hover,
body.page-clean .modal-form select:hover,
body.page-clean .modal-form textarea:hover {
  border-color: rgba(255,255,255,0.22) !important;
}
body.home-v5 .modal-form input:focus,
body.home-v5 .modal-form select:focus,
body.home-v5 .modal-form textarea:focus,
body.page-clean .modal-form input:focus,
body.page-clean .modal-form select:focus,
body.page-clean .modal-form textarea:focus {
  border-color: rgba(255,255,255,0.55) !important;
  background: var(--line-soft) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.05) !important;
}
body.home-v5 .modal-form input::placeholder,
body.home-v5 .modal-form textarea::placeholder,
body.page-clean .modal-form input::placeholder,
body.page-clean .modal-form textarea::placeholder {
  color: var(--ink-mute) !important;
}
body.home-v5 .modal-form-2col,
body.page-clean .modal-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.home-v5 .modal-form-2col .field-full,
body.page-clean .modal-form-2col .field-full {
  grid-column: 1 / -1;
}
body.home-v5 .field-hint,
body.page-clean .field-hint {
  font-size: 12px !important;
  color: var(--ink-mid) !important;
  margin-top: 2px;
}
@media (max-width: 600px) {
  body.home-v5 .modal-form-2col,
  body.page-clean .modal-form-2col { grid-template-columns: 1fr; }
}

/* Modal buttons */
body.home-v5 .modal-card .btn,
body.page-clean .modal-card .btn,
body.home-v5 .modal-submit,
body.page-clean .modal-submit {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  height: 44px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  transition: background-color 180ms, color 180ms, transform 120ms !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent !important;
}
body.home-v5 .modal-card .btn .chev,
body.page-clean .modal-card .btn .chev {
  display: none !important;
}
body.home-v5 .modal-card .btn-primary,
body.page-clean .modal-card .btn-primary,
body.home-v5 .modal-submit,
body.page-clean .modal-submit {
  background: #ffffff !important;
  color: #000 !important;
  border-color: #ffffff !important;
  width: 100% !important;
  box-shadow: none !important;
  margin-top: 8px;
}
body.home-v5 .modal-card .btn-primary:hover,
body.page-clean .modal-card .btn-primary:hover,
body.home-v5 .modal-submit:hover,
body.page-clean .modal-submit:hover {
  background: #e9e9e9 !important;
}
body.home-v5 .modal-card .btn-ghost,
body.page-clean .modal-card .btn-ghost {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
body.home-v5 .modal-card .btn-ghost:hover,
body.page-clean .modal-card .btn-ghost:hover {
  background: var(--line-soft) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #fff !important;
}

/* Wizard stepper, minimal */
body.home-v5 .wizard-stepper,
body.page-clean .wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none;
}
body.home-v5 .wizard-step,
body.page-clean .wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-mid) !important;
  font-size: 13px !important;
  font-weight: 500;
}
body.home-v5 .wizard-step.is-active,
body.page-clean .wizard-step.is-active {
  color: #fafafa !important;
}
body.home-v5 .wizard-step.is-complete,
body.page-clean .wizard-step.is-complete {
  color: rgba(255,255,255,0.55) !important;
}
body.home-v5 .wizard-step-num,
body.page-clean .wizard-step-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-soft);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}
body.home-v5 .wizard-step.is-active .wizard-step-num,
body.page-clean .wizard-step.is-active .wizard-step-num {
  background: #ffffff;
  color: #000;
}
body.home-v5 .wizard-step-label,
body.page-clean .wizard-step-label {
  font-size: 13px;
  letter-spacing: -0.005em;
}
body.home-v5 .wizard-step-sep,
body.page-clean .wizard-step-sep {
  width: 24px;
  height: 1px;
  background: var(--line-12);
}

/* Wizard actions */
body.home-v5 .wizard-actions,
body.page-clean .wizard-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Calendar card in demo step 2 */
body.home-v5 .gcal-card,
body.page-clean .gcal-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
}
body.home-v5 .gcal-card-icon,
body.page-clean .gcal-card-icon {
  color: rgba(255,255,255,0.55) !important;
  margin: 0 auto 16px !important;
}
body.home-v5 .gcal-card-body,
body.page-clean .gcal-card-body {
  margin-bottom: 20px;
}
body.home-v5 .gcal-card-body strong,
body.page-clean .gcal-card-body strong {
  display: block;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fafafa !important;
  margin-bottom: 6px;
  letter-spacing: -0.015em !important;
}
body.home-v5 .gcal-card-body span,
body.page-clean .gcal-card-body span {
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  display: block;
}
body.home-v5 .gcal-card-btn,
body.page-clean .gcal-card-btn {
  display: inline-flex !important;
  margin: 0 auto !important;
}
body.home-v5 .gcal-card-note,
body.page-clean .gcal-card-note {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: var(--ink-mute) !important;
}

/* Modal messages */
body.home-v5 .modal-error,
body.page-clean .modal-error {
  background: rgba(255,69,58,0.10) !important;
  color: #FF6961 !important;
  border: 1px solid rgba(255,69,58,0.22) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin: 0 0 12px !important;
}
body.home-v5 .modal-success,
body.page-clean .modal-success {
  background: rgba(52,199,89,0.10) !important;
  color: #4CD964 !important;
  border: 1px solid rgba(52,199,89,0.22) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin: 0 0 12px !important;
}

/* Signup modal consent row, proper checkbox sizing */
body.home-v5 #signupModal .consent-field,
body.page-clean #signupModal .consent-field {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin: 14px 0 4px !important;
  text-align: left;
}
body.home-v5 #signupModal #s-consent,
body.page-clean #signupModal #s-consent {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  flex: 0 0 16px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: #fafafa;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.home-v5 #signupModal .consent-field label,
body.page-clean #signupModal .consent-field label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  flex: 1 1 auto;
}
body.home-v5 #signupModal .consent-field label a,
body.page-clean #signupModal .consent-field label a {
  color: #fafafa !important;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}
body.home-v5 #signupModal .consent-field label a:hover,
body.page-clean #signupModal .consent-field label a:hover {
  border-bottom-color: rgba(255,255,255,0.55);
}

/* Demo modal, compact so it fits without scrolling */
body.home-v5 .modal-card.modal-card-wizard,
body.page-clean .modal-card.modal-card-wizard {
  max-height: 92vh !important;
}
body.home-v5 .modal-card.modal-card-wizard-wide,
body.page-clean .modal-card.modal-card-wizard-wide {
  max-width: 720px !important;
}
body.home-v5 #demoModal .modal-form .field,
body.page-clean #demoModal .modal-form .field {
  margin-bottom: 10px !important;
  gap: 4px !important;
}
body.home-v5 #demoModal .modal-form input,
body.home-v5 #demoModal .modal-form select,
body.page-clean #demoModal .modal-form input,
body.page-clean #demoModal .modal-form select {
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
}
body.home-v5 #demoModal .modal-form textarea,
body.page-clean #demoModal .modal-form textarea {
  min-height: 64px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
}
body.home-v5 #demoModal .modal-form label,
body.page-clean #demoModal .modal-form label {
  font-size: 12px !important;
}
body.home-v5 #demoModal .modal-form-2col,
body.page-clean #demoModal .modal-form-2col {
  gap: 10px !important;
}
body.home-v5 #demoModal .modal-card h3,
body.page-clean #demoModal .modal-card h3 {
  font-size: 20px !important;
  margin-bottom: 6px !important;
  padding-right: 0 !important;
  text-align: center !important;
}
body.home-v5 #demoModal .modal-sub,
body.page-clean #demoModal .modal-sub {
  font-size: 13.5px !important;
  margin: 0 auto 18px !important;
  text-align: center !important;
  max-width: 320px !important;
}
body.home-v5 #demoModal .modal-card,
body.page-clean #demoModal .modal-card {
  padding: 36px 32px 28px !important;
}
body.home-v5 #demoModal .modal-submit,
body.page-clean #demoModal .modal-submit {
  margin-top: 4px !important;
  height: 42px !important;
}
body.home-v5 #demoModal .field-hint,
body.page-clean #demoModal .field-hint {
  font-size: 11.5px !important;
  margin-top: 1px;
}
body.home-v5 #demoModal .wizard-stepper,
body.page-clean #demoModal .wizard-stepper {
  margin-bottom: 18px !important;
}

/* ════════════════════════════════════════════════════════════════
   MODAL POLISH PASS, pill inputs, circle checkbox, aligned actions
   ════════════════════════════════════════════════════════════════ */

/* All inputs and selects become pills */
body.home-v5 .modal-form input,
body.home-v5 .modal-form select,
body.page-clean .modal-form input,
body.page-clean .modal-form select {
  border-radius: 999px !important;
  padding: 0 18px !important;
  border: 1px solid var(--line-12) !important;
  background: var(--pill-bg) !important;
  height: 44px !important;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms !important;
}
body.home-v5 .modal-form input:hover,
body.home-v5 .modal-form select:hover,
body.page-clean .modal-form input:hover,
body.page-clean .modal-form select:hover {
  border-color: rgba(255,255,255,0.24) !important;
}
body.home-v5 .modal-form input:focus,
body.home-v5 .modal-form select:focus,
body.page-clean .modal-form input:focus,
body.page-clean .modal-form select:focus {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.07) !important;
  box-shadow: 0 0 0 4px var(--line-soft) !important;
}

/* Textareas: rounded but not full pill */
body.home-v5 .modal-form textarea,
body.page-clean .modal-form textarea {
  border-radius: 18px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--line-12) !important;
  background: var(--pill-bg) !important;
  min-height: 90px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms !important;
}
body.home-v5 .modal-form textarea:focus,
body.page-clean .modal-form textarea:focus {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.07) !important;
  box-shadow: 0 0 0 4px var(--line-soft) !important;
}

/* Labels tighter and lighter */
body.home-v5 .modal-form label,
body.page-clean .modal-form label {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: -0.005em !important;
  padding-left: 4px;
}
body.home-v5 .modal-form .req,
body.page-clean .modal-form .req {
  color: var(--ink-mute) !important;
}
body.home-v5 .modal-form .field,
body.page-clean .modal-form .field {
  gap: 6px !important;
  margin-bottom: 12px !important;
}
body.home-v5 .field-hint,
body.page-clean .field-hint {
  padding-left: 16px;
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
}

/* Custom circle checkbox */
body.home-v5 #signupModal .consent-field,
body.page-clean #signupModal .consent-field {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin: 18px 0 6px !important;
  text-align: left;
}
body.home-v5 #signupModal #s-consent,
body.page-clean #signupModal #s-consent {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.30) !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 180ms, background-color 180ms !important;
  display: inline-block !important;
}
body.home-v5 #signupModal #s-consent:hover,
body.page-clean #signupModal #s-consent:hover {
  border-color: rgba(255,255,255,0.55) !important;
}
body.home-v5 #signupModal #s-consent:checked,
body.page-clean #signupModal #s-consent:checked {
  background: #ffffff !important;
  border-color: #ffffff !important;
}
body.home-v5 #signupModal #s-consent:checked::after,
body.page-clean #signupModal #s-consent:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #000 !important;
  border-width: 0 1.8px 1.8px 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
body.home-v5 #signupModal .consent-field label,
body.page-clean #signupModal .consent-field label {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.5 !important;
  cursor: pointer;
  margin: 0 !important;
  padding-left: 0 !important;
  flex: 1 1 auto;
}
body.home-v5 #signupModal .consent-field label a,
body.page-clean #signupModal .consent-field label a {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ink-faint);
}

/* Modal actions: equal-height pill buttons, right-aligned */
body.home-v5 .modal-actions,
body.page-clean .modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 4px;
}
body.home-v5 .modal-actions .btn,
body.page-clean .modal-actions .btn {
  height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background-color 180ms, color 180ms, border-color 180ms, transform 120ms !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
body.home-v5 .modal-actions .btn .chev,
body.page-clean .modal-actions .btn .chev {
  display: none !important;
}
body.home-v5 .modal-actions .btn-ghost,
body.page-clean .modal-actions .btn-ghost {
  background: transparent !important;
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
body.home-v5 .modal-actions .btn-ghost:hover,
body.page-clean .modal-actions .btn-ghost:hover {
  background: var(--line-soft) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.30) !important;
}
body.home-v5 .modal-actions .btn-primary,
body.page-clean .modal-actions .btn-primary {
  background: #ffffff !important;
  color: #000 !important;
  border-color: #ffffff !important;
  padding: 0 28px !important;
}
body.home-v5 .modal-actions .btn-primary:hover,
body.page-clean .modal-actions .btn-primary:hover {
  background: #e9e9e9 !important;
}
body.home-v5 .modal-actions .btn:active,
body.page-clean .modal-actions .btn:active {
  transform: scale(0.97);
}

/* Demo modal: single-button submit also pill */
body.home-v5 #demoModal .modal-submit,
body.page-clean #demoModal .modal-submit {
  border-radius: 999px !important;
  width: 100% !important;
  height: 48px !important;
  background: #ffffff !important;
  color: #000 !important;
  border: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-top: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.home-v5 #demoModal .modal-submit .chev,
body.page-clean #demoModal .modal-submit .chev {
  display: none !important;
}

/* Modal card padding tightened */
body.home-v5 .modal-card,
body.page-clean .modal-card {
  padding: 32px !important;
  border-radius: 22px !important;
}
body.home-v5 .modal-card h3,
body.page-clean .modal-card h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 6px !important;
  color: #ffffff !important;
}
body.home-v5 .modal-sub,
body.page-clean .modal-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 0 24px !important;
  line-height: 1.45 !important;
}

/* Modal close button */
body.home-v5 .modal-close,
body.page-clean .modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--line-soft) !important;
  border: 0 !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: background-color 180ms, color 180ms !important;
}
body.home-v5 .modal-close:hover,
body.page-clean .modal-close:hover {
  background: var(--line-12) !important;
  color: #ffffff !important;
}

/* Modal error/success messages */
body.home-v5 .modal-error,
body.page-clean .modal-error,
body.home-v5 .modal-success,
body.page-clean .modal-success {
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  margin: 12px 0 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   NAV, gradual morph (lower threshold + smoother transition)
   ════════════════════════════════════════════════════════════════ */

/* Smoother + longer transitions on the morph so the pill collapse
   feels gradual even though it's class-toggled. */
body.home-v5 .nav-wrap,
body.page-clean .nav-wrap {
  transition:
    top 900ms cubic-bezier(0.22, 1, 0.36, 1),
    left 900ms cubic-bezier(0.22, 1, 0.36, 1),
    right 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 900ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 900ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 700ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 700ms cubic-bezier(0.4, 0, 0.2, 1),
    width 900ms cubic-bezier(0.22, 1, 0.36, 1),
    height 900ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ════════════════════════════════════════════════════════════════
   BLOG HERO, break out of .blog-page max-width container
   ════════════════════════════════════════════════════════════════ */
body.page-clean .blog-page {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-clean .blog-hero-v2 {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}
/* Re-pad the sections that ARE supposed to be contained, since
   we just stripped .blog-page padding. */
body.page-clean .blog-section,
body.page-clean .blog-cta {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
body.page-clean .blog-section { padding-top: 96px !important; padding-bottom: 64px !important; }
body.page-clean .blog-cta { padding-top: 64px !important; padding-bottom: 120px !important; }
@media (max-width: 720px) {
  body.page-clean .blog-section,
  body.page-clean .blog-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Wizard stepper, clear of close button, breathing room */
body.home-v5 #demoModal .wizard-stepper,
body.page-clean #demoModal .wizard-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 56px 0 0 !important;
  margin: 0 0 22px !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
body.home-v5 #demoModal .wizard-step,
body.page-clean #demoModal .wizard-step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.45) !important;
  white-space: nowrap !important;
}
body.home-v5 #demoModal .wizard-step.is-active,
body.page-clean #demoModal .wizard-step.is-active {
  color: #ffffff !important;
}
body.home-v5 #demoModal .wizard-step-num,
body.page-clean #demoModal .wizard-step-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: var(--line) !important;
  color: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--line-2) !important;
}
body.home-v5 #demoModal .wizard-step.is-active .wizard-step-num,
body.page-clean #demoModal .wizard-step.is-active .wizard-step-num {
  background: #ffffff !important;
  color: #000 !important;
  border-color: #ffffff !important;
}
body.home-v5 #demoModal .wizard-step-sep,
body.page-clean #demoModal .wizard-step-sep {
  flex: 1 1 auto !important;
  height: 1px !important;
  max-width: 40px !important;
  background: var(--line-12) !important;
}

/* Need-subscription banner on pricing.html */
body.page-clean .need-sub-banner {
  max-width: 720px;
  margin: 120px auto 0;
  padding: 12px 20px;
  background: rgba(255, 159, 10, 0.08);
  border: 1px solid rgba(255, 159, 10, 0.25);
  border-radius: 999px;
  color: #ffd28b;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  body.page-clean .need-sub-banner {
    margin: 96px 16px 0;
    border-radius: 14px;
    padding: 12px 16px;
  }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE, single centered column, three pill fields, breathing room.
   ════════════════════════════════════════════════════════════════ */
body.page-clean .contact-page {
  min-height: 100vh;
  /* No top padding here — the global `main { padding-top: 88px }` in
     styles.css fights with anything set on the main element directly.
     Top spacing lives on .contact-inner instead. */
  padding: 0 24px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.page-clean .contact-inner {
  width: 100%;
  max-width: 600px;
  text-align: center;
  padding-top: 160px;
}
body.page-clean .contact-title {
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 18px;
  text-wrap: balance;
}
body.page-clean .contact-sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.52);
  margin: 0 0 52px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
body.page-clean .contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.page-clean .contact-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  font: 400 15.5px 'Inter', sans-serif;
  letter-spacing: -0.005em;
  text-align: left;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
}
body.page-clean .contact-input::placeholder {
  color: rgba(255,255,255,0.32);
}
body.page-clean .contact-input:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}
body.page-clean .contact-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
}
body.page-clean .contact-textarea {
  height: auto;
  min-height: 160px;
  padding: 18px 22px;
  border-radius: 20px;
  line-height: 1.6;
  resize: vertical;
}
body.page-clean .contact-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 54px;
  padding: 0 28px;
  margin-top: 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font: 600 15px 'Inter', sans-serif;
  letter-spacing: -0.01em;
  transition: background-color 180ms, transform 120ms;
}
body.page-clean .contact-submit:hover { background: #e8e8e8; }
body.page-clean .contact-submit:active { transform: scale(0.98); }
body.page-clean .contact-msg {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.50);
  letter-spacing: -0.005em;
  line-height: 1.5;
}
body.page-clean .contact-fallback {
  margin: 32px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  letter-spacing: -0.005em;
}
body.page-clean .contact-fallback a {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  transition: color 150ms, border-color 150ms;
}
body.page-clean .contact-fallback a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.5);
}

@media (max-width: 640px) {
  body.page-clean .contact-page { padding: 120px 20px 80px; }
  body.page-clean .contact-title { font-size: clamp(38px, 10vw, 56px); }
}

/* ════════════════════════════════════════════════════════════════
   SOLUTIONS PAGES, full-screen, sleek, standardized to home-v5
   ════════════════════════════════════════════════════════════════ */
body.page-clean .sol-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Hero: full viewport, centered, like the home hero ---- */
body.page-clean .sol-hero {
  position: relative;
  text-align: center;
  padding: clamp(140px, 18vh, 210px) 0 clamp(40px, 6vw, 72px);
}
body.page-clean .sol-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
body.page-clean .sol-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin: 0 0 26px;
  padding: 8px 16px;
  background: rgba(41, 151, 255, 0.10);
  border: 1px solid rgba(41, 151, 255, 0.22);
  border-radius: 999px;
}
body.page-clean .sol-title {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.02;
  margin: 0 auto 26px;
  max-width: 18ch;
  color: var(--c-ink);
  text-wrap: balance;
}
body.page-clean .sol-sub {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: 600px;
  margin: 0 auto 40px;
}
body.page-clean .sol-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- White primary button identical to the home hero ---- */
body.page-clean .sol-actions .btn-primary,
body.page-clean .sol-cta-actions .btn-primary {
  background: #ffffff !important;
  color: #04060f !important;
  border: 1px solid transparent !important;
}
body.page-clean .sol-actions .btn-primary:hover,
body.page-clean .sol-cta-actions .btn-primary:hover { background: #e9ecf5 !important; }
body.page-clean .sol-actions .btn,
body.page-clean .sol-cta-actions .btn {
  height: 54px;
  padding: 0 28px;
  font-size: 16px;
  border-radius: 999px;
}

/* ---- Content sections ---- */
body.page-clean .sol-section { padding: clamp(72px, 9vw, 130px) 0; }
body.page-clean .sol-section + .sol-section { padding-top: 0; }
body.page-clean .sol-section-head {
  max-width: 720px;
  margin: 0 0 56px;
}
body.page-clean .sol-h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin: 0 0 18px;
  color: var(--c-ink);
  text-wrap: balance;
}
body.page-clean .sol-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0;
  max-width: 600px;
}

body.page-clean .sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
body.page-clean .sol-card {
  padding: 36px;
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.022);
  transition: border-color .25s cubic-bezier(0.22,1,0.36,1), background .25s ease, transform .25s ease;
}
body.page-clean .sol-card:hover {
  border-color: var(--c-line-strong);
  background: var(--pill-bg);
  transform: translateY(-4px);
}
body.page-clean .sol-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: rgba(41, 151, 255, 0.12);
  color: var(--c-blue);
}
body.page-clean .sol-card-icon svg { width: 22px; height: 22px; }
body.page-clean .sol-card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--c-ink);
}
body.page-clean .sol-card-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-2);
  margin: 0;
}

body.page-clean .sol-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  max-width: 760px;
}
body.page-clean .sol-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-ink);
}
body.page-clean .sol-list svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--c-blue);
  margin-top: 1px;
}

/* ---- Closing CTA band ---- */
body.page-clean .sol-cta { padding: 0 0 clamp(80px, 10vw, 140px); }
body.page-clean .sol-cta-card {
  padding: clamp(56px, 7vw, 96px) 40px;
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.025);
}
body.page-clean .sol-cta-card h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.032em;
  margin: 0 auto 16px;
  max-width: 18ch;
  color: var(--c-ink);
}
body.page-clean .sol-cta-card p {
  font-size: 18px;
  color: var(--c-ink-2);
  margin: 0 auto 32px;
  max-width: 520px;
}
body.page-clean .sol-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  body.page-clean .sol-grid { grid-template-columns: 1fr; }
  body.page-clean .sol-hero { min-height: auto; padding: 150px 0 90px; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  body.page-clean .sol-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Solutions: hero product visual ---- */
body.page-clean .sol-hero-media {
  max-width: 900px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  overflow: hidden;
  background: #04060f;
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.85);
}
body.page-clean .sol-hero-media video,
body.page-clean .sol-hero-media img { display: block; width: 100%; height: auto; }

/* ---- Solutions: alternating product feature rows (real footage) ---- */
body.page-clean .sol-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(48px, 6vw, 88px) 0;
  border-top: 1px solid var(--c-line);
}
body.page-clean .sol-feature.is-reverse .sol-feature-media { order: 2; }
body.page-clean .sol-feature-media {
  border: 1px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  background: #04060f;
}
body.page-clean .sol-feature-media video,
body.page-clean .sol-feature-media img { display: block; width: 100%; height: auto; }

/* Feature-card grid -- replaces video column when no footage is available.
   Renders a 2x2 grid of compact stat/feature cards matching the site aesthetic. */
body.page-clean .sol-feature-icon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-self: center;
}
body.page-clean .sol-feature.is-reverse .sol-feature-icon { order: 2; }

/* Individual mini card */
body.page-clean .sol-feat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 22px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  transition: border-color 200ms ease, background 200ms ease;
}
body.page-clean .sol-feat-card:hover {
  border-color: rgba(10,132,255,0.3);
  background: rgba(10,132,255,0.05);
}

/* Icon circle */
body.page-clean .sol-feat-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(10,132,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.page-clean .sol-feat-card-ico svg {
  width: 18px;
  height: 18px;
  color: #0A84FF;
  flex-shrink: 0;
}

/* Card label */
body.page-clean .sol-feat-card-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.01em;
}

/* Card sub-text */
body.page-clean .sol-feat-card-sub {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

@media (max-width: 860px) {
  body.page-clean .sol-feature-icon { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.page-clean .sol-feat-card { padding: 16px; }
}

/* Coming soon badge */
body.page-clean .sol-badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,196,0,0.12);
  border: 1px solid rgba(255,196,0,0.25);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5c518;
}

body.page-clean .sol-feature-text h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 16px;
  color: var(--c-ink);
}
body.page-clean .sol-feature-text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-2);
  margin: 0 0 22px;
  max-width: 48ch;
}
body.page-clean .sol-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
body.page-clean .sol-points li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--c-ink);
}
body.page-clean .sol-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}

/* ---- Solutions: plain who-it's-for ---- */
body.page-clean .sol-who { display: grid; gap: 16px; max-width: 760px; }
body.page-clean .sol-who p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--c-ink-2); }
body.page-clean .sol-who strong { color: var(--c-ink); font-weight: 600; }

@media (max-width: 860px) {
  body.page-clean .sol-feature { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  body.page-clean .sol-feature.is-reverse .sol-feature-media { order: 0; }
}

/* ════════════════════════════════════════════════════════════════
   SECTIONS PORTED FROM THE ORIGINAL SITE, restyled to hv5.
   Prompt input · Integrates · Set-up workflow · Newsletter.
   ════════════════════════════════════════════════════════════════ */

/* ── Prompt input ──────────────────────────────────────────────── */
.hv5-prompt { padding: var(--hv5-pad) 0; text-align: center; }
.hv5-prompt-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.hv5-prompt .hv5-h2 { margin-bottom: 18px; }
.hv5-prompt .hv5-feature-accent { color: var(--hv5-blue); }
.hv5-prompt .hv5-p { max-width: 560px; margin: 0 auto 40px; }
.hv5-prompt-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  padding: 8px 8px 8px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hv5-line-strong);
  border-radius: var(--hv5-radius-pill);
  transition: border-color 200ms var(--hv5-ease), background 200ms var(--hv5-ease);
}
.hv5-prompt-form:focus-within {
  border-color: var(--hv5-blue);
  background: rgba(255, 255, 255, 0.06);
}
.hv5-prompt-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--hv5-ink);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-align: left;
}
.hv5-prompt-form input::placeholder { color: var(--hv5-ink-3); }
.hv5-prompt-send {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--hv5-radius-pill);
  background: var(--hv5-blue);
  color: #fff;
  cursor: pointer;
  transition: background 180ms var(--hv5-ease), transform 120ms var(--hv5-ease);
}
.hv5-prompt-send:hover { background: var(--accent-pressed); }
.hv5-prompt-send:active { transform: scale(0.94); }
.hv5-prompt-send svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .hv5-prompt-form { padding-left: 18px; }
  .hv5-prompt-form input { font-size: 15px; }
}

/* ── Integrates (native add-in) ────────────────────────────────── */
.hv5-integrates { padding: var(--hv5-pad) 0; }
.hv5-integrates-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.hv5-integrates-head .hv5-h2 { margin-bottom: 18px; }
.hv5-integrates-head .hv5-p { max-width: 600px; margin: 0 auto; }
.hv5-integ-diagram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 6vw, 72px);
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  background: rgba(255, 255, 255, 0.025);
}
.hv5-integ-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: clamp(150px, 22vw, 210px);
  padding: 30px 20px;
  border: 1px solid var(--hv5-line-strong);
  border-radius: var(--hv5-radius-card);
  background: rgba(255, 255, 255, 0.04);
}
.hv5-integ-node.is-primary {
  border-color: rgba(10, 132, 255, 0.5);
  background: rgba(10, 132, 255, 0.06);
}
.hv5-integ-mark { display: block; height: 40px; width: auto; }
.hv5-integ-mark--ds { height: 28px; opacity: 0.92; }
.hv5-integ-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hv5-ink);
}
.hv5-integ-name--sw { font-weight: 400; letter-spacing: 0.03em; }
.hv5-integ-name--sw b { font-weight: 700; }
.hv5-integ-wire {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 240px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(10, 132, 255, 0.12), rgba(10, 132, 255, 0.5) 50%, rgba(10, 132, 255, 0.12));
}
.hv5-integ-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(10, 132, 255, 0.9);
  animation: hv5-flow 2.6s var(--hv5-ease) infinite;
}
.hv5-integ-dot:nth-child(2) { animation-delay: 0.87s; }
.hv5-integ-dot:nth-child(3) { animation-delay: 1.73s; }
@keyframes hv5-flow {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (max-width: 640px) {
  .hv5-integ-diagram { flex-direction: column; gap: 24px; padding: 56px 28px; }
  .hv5-integ-wire {
    width: 2px;
    height: 64px;
    max-width: none;
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.12), rgba(10, 132, 255, 0.5) 50%, rgba(10, 132, 255, 0.12));
  }
  .hv5-integ-dot { left: 50%; top: 0; margin: 0 0 0 -3.5px; animation-name: hv5-flow-v; }
  @keyframes hv5-flow-v {
    0%   { top: 0;    opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hv5-integ-dot { animation: none; opacity: 1; left: 50%; }
}

/* ── Set-up workflow (structured steps) ────────────────────────── */
.hv5-workflow { padding: var(--hv5-pad) 0; }
.hv5-workflow-head { max-width: 720px; margin: 0 0 64px; }
.hv5-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hv5-step {
  padding: 40px 36px;
  border: 1px solid var(--hv5-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 220ms var(--hv5-ease), background 220ms var(--hv5-ease), transform 220ms var(--hv5-ease);
}
.hv5-step:hover {
  border-color: var(--hv5-line-strong);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-3px);
}
.hv5-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: rgba(41, 151, 255, 0.12);
  color: var(--hv5-blue);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hv5-step-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--hv5-ink);
}
.hv5-step-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--hv5-ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .hv5-steps { grid-template-columns: 1fr; }
  .hv5-workflow-head { margin-bottom: 40px; }
}

/* ── Newsletter ────────────────────────────────────────────────── */
.hv5-newsletter { padding: clamp(48px, 6vw, 80px) 0; }
.hv5-newsletter-card {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  background: rgba(255, 255, 255, 0.025);
}
.hv5-newsletter-copy .hv5-eyebrow { margin-bottom: 16px; }
.hv5-newsletter-copy .hv5-h2 { margin-bottom: 14px; }
.hv5-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hv5-newsletter-form input {
  flex: 1;
  min-width: 220px;
  height: 52px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hv5-line-strong);
  border-radius: var(--hv5-radius-pill);
  color: var(--hv5-ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 200ms var(--hv5-ease), background 200ms var(--hv5-ease);
}
.hv5-newsletter-form input:focus { border-color: var(--hv5-blue); background: rgba(255, 255, 255, 0.06); }
.hv5-newsletter-form input::placeholder { color: var(--hv5-ink-3); }
.hv5-newsletter-form .hv5-btn { height: 52px; }
.hv5-newsletter-status {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--hv5-ink-3);
  min-height: 18px;
}
.hv5-newsletter-status.is-error { color: var(--danger); }
.hv5-newsletter-status.is-success { color: var(--success); }
@media (max-width: 820px) {
  .hv5-newsletter-card { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH PASS — phones (<=640px), tablets where noted.
   Goals: kill oversized pinned scenes, contain wide tables, bump
   tiny text up to legible sizes, comfortable tap targets.
   ════════════════════════════════════════════════════════════════ */

/* 1) Showcase: the 300vh pinned scroll track creates huge empty gaps
   on phones. Collapse it to a normal stacked block. */
@media (max-width: 768px) {
  .hv5-showcase-pin-wrap { height: auto; }
  .hv5-showcase-pin { position: static; height: auto; padding: 56px 0; gap: 24px; }
  .hv5-showcase-stage { transform: none !important; }
}

/* 2) Comparison table: keep it inside its own scroll box, never widen
   the page. A subtle hint that it scrolls horizontally. */
@media (max-width: 760px) {
  body.page-clean .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-line);
    border-radius: 14px;
  }
  body.page-clean .compare-table { min-width: 560px; }
}

/* 3) Legibility: lift sub-12px text. Disclaimers and micro-labels. */
@media (max-width: 640px) {
  body.home-v5 .footer-disclaimer,
  body.page-clean .footer-disclaimer { font-size: 12.5px; line-height: 1.65; }
  .hv5-backed-label { font-size: 12px; }
}

/* 4) Comfortable tap targets for footer + inline text links on phones. */
@media (max-width: 640px) {
  .footer-col a,
  .footer-legal a,
  .footer-socials a { display: inline-flex; align-items: center; min-height: 36px; }
  .footer-col li { margin-bottom: 2px; }
}

/* 5) Hero media on phones: a touch less letterboxing. */
@media (max-width: 640px) {
  body.page-clean .sol-hero-media { margin-top: 32px; }
}

/* ════════════════════════════════════════════════════════════════
   INTEGRATIONS MARQUEE (replaces the fake text-span logo row)
   Real brand marks for what ships today; "soon" chips for the rest.
   Continuously scrolls; pauses for reduced-motion.
   ════════════════════════════════════════════════════════════════ */
.hv5-marquee {
  position: relative;
  margin: 8px auto 0;
  max-width: 1100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hv5-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  animation: hv5-marquee 28s linear infinite;
}
.hv5-marquee:hover .hv5-marquee-track { animation-play-state: paused; }
@keyframes hv5-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hv5-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hv5-ink-2);
}
.hv5-brand img {
  height: 26px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(1) brightness(1.6);
}
/* Wide logos (Siemens NX, Creo, Fusion 360, Inventor, CATIA) rendered from SVG viewBox */
.hv5-brand img.hv5-integ-mark--wide {
  height: 28px;
  width: auto;
  filter: none;
  opacity: 0.9;
}
/* Ansys wordmark SVG */
.hv5-brand img.hv5-integ-mark--ansys {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.hv5-brand-soon { color: var(--hv5-ink-3); }
.hv5-brand-soon em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hv5-blue);
  background: rgba(10, 132, 255, 0.12);
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .hv5-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   FINAL OVERRIDE: no tiny all-caps accent labels anywhere.
   (Authoritative, last-wins over earlier per-component rules.)
   ════════════════════════════════════════════════════════════════ */
body.page-clean .blog-tag,
body.page-clean .article-eyebrow,
body.page-clean .related-label,
body.page-clean .vsx-kicker,
body.page-clean .legal-eyebrow,
body.page-clean .compare-table thead th {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-clean .vsx-kicker,
body.page-clean .article-eyebrow { color: var(--c-blue) !important; font-weight: 600 !important; font-size: 13px !important; }
body.page-clean .blog-tag,
body.page-clean .related-label,
body.page-clean .legal-eyebrow { font-size: 12.5px !important; }
body.page-clean .compare-table thead th { font-size: 14px !important; font-weight: 600 !important; color: var(--c-ink-2) !important; }

/* Comparison table yes/no markers (replaces the em-dash that the
   punctuation sweep turned into a stray comma). */
body.page-clean .compare-yes { color: var(--success); font-weight: 700; }
body.page-clean .compare-no  { color: var(--c-ink-4); }

/* Ansys / Creo styled text marks in the marquee */
/* hv5-brand-ansys and hv5-brand-creo now use SVG logos; classes retained for selector compatibility */

/* ════════════════════════════════════════════════════════════════
   THREE POWERFUL MODES SECTION
   ════════════════════════════════════════════════════════════════ */
.hv5-modes {
  padding: 80px 24px;
  background: var(--c-bg, #040714);
}
.hv5-modes-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.hv5-modes-inner .hv5-h2 {
  margin-bottom: 12px;
}
.hv5-modes-inner .hv5-p {
  margin-bottom: 48px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hv5-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.hv5-mode-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.2s, background 0.2s;
}
.hv5-mode-card:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.hv5-mode-icon {
  width: 44px;
  height: 44px;
  background: rgba(99,102,241,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #818cf8;
}
.hv5-mode-icon svg {
  width: 22px;
  height: 22px;
}
.hv5-mode-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink-1, #f1f5f9);
  margin-bottom: 10px;
  line-height: 1.3;
}
.hv5-mode-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-3, #94a3b8);
}
@media (max-width: 900px) {
  .hv5-modes-grid {
    grid-template-columns: 1fr;
  }
  .hv5-modes {
    padding: 60px 20px;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hv5-modes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hv5-modes-grid .hv5-mode-card:last-child {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ════════════════════════════════════════════════════════════════
   WHO IS THIS FOR — SEGMENT SWITCHER
   Matches the existing hv5-feature / hv5-showcase design language:
   navy surfaces, var(--line) borders, Inter type, accent blue.
   ════════════════════════════════════════════════════════════════ */
.hv5-seg {
  padding: 96px 32px;
  background: var(--hv5-bg-1);
  border-top: 1px solid var(--hv5-line);
  border-bottom: 1px solid var(--hv5-line);
}
.hv5-seg-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* Header above the tabs */
.hv5-seg-header {
  text-align: center;
  margin-bottom: 16px;
}
.hv5-seg-eyebrow {
  display: block;
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--hv5-ink-3);
  margin-bottom: 0;
}

/* ── TABS ── identical pill style to .hv5-pricing-toggle ── */
.hv5-seg-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--hv5-bg-1);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-pill);
  padding: 4px;
  width: fit-content;
  margin: 24px auto 48px;
  font-family: var(--font-sans);
}
.hv5-seg-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--hv5-ink-3);
  padding: 10px 32px;
  border-radius: var(--hv5-radius-pill);
  transition: background var(--dur-ui) var(--hv5-ease),
              color var(--dur-ui) var(--hv5-ease);
  white-space: nowrap;
  line-height: 1;
}
.hv5-seg-tab:hover {
  color: var(--hv5-ink);
}
.hv5-seg-tab.is-active {
  background: var(--hv5-bg-elevated);
  color: var(--hv5-ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ── PANELS ── */
.hv5-seg-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hv5-seg-panel.is-active { display: grid; }

@keyframes hv5-seg-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hv5-seg-panel.is-active {
  animation: hv5-seg-in var(--dur-mid) var(--hv5-ease) both;
}

/* ── COPY SIDE — mirrors .hv5-feature-text ── */
.hv5-seg-copy { max-width: 520px; }

.hv5-seg-headline {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  color: var(--hv5-ink);
  margin: 0 0 18px;
}
.hv5-seg-sub {
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--hv5-ink-2);
  margin: 0 0 36px;
}

/* Feature bullets */
.hv5-seg-points {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hv5-seg-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hv5-seg-point-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hv5-blue);
  margin-top: 2px;
}
.hv5-seg-point-icon svg { width: 15px; height: 15px; }
.hv5-seg-points li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hv5-seg-points strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--hv5-ink);
  line-height: 1.35;
}
.hv5-seg-points span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--hv5-ink-2);
}

/* CTAs — reuse existing .hv5-btn atoms */
.hv5-seg-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── VIDEO SIDE — mirrors .hv5-feature-visual ── */
.hv5-seg-visual {
  position: relative;
  background: var(--hv5-bg-card);
  border: 1px solid var(--hv5-line);
  border-radius: var(--hv5-radius-large);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 0 100px 0 rgba(99, 102, 241, 0.32),
    0 12px 40px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hv5-seg-visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hv5-seg-panel.is-active {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hv5-seg-visual { order: -1; aspect-ratio: 16 / 9; }
  .hv5-seg-copy { max-width: 100%; }
  .hv5-seg { padding: 72px 24px; }
  .hv5-seg-tab { padding: 9px 22px; font-size: 14px; }
}
@media (max-width: 500px) {
  .hv5-seg-tabs { width: 100%; }
  .hv5-seg-tab { flex: 1; padding: 9px 0; text-align: center; font-size: 13px; }
}

/* ── MOBILE NAV OVERRIDES (max-width: 720px) ── */
@media (max-width: 720px) {
  body.home-v5 .nav-wrap,
  body.page-clean .nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    padding: 0 16px;
    height: 60px;
    background: rgba(4, 7, 20, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    z-index: 200;
  }
  body.home-v5 .nav-wrap.is-scrolled,
  body.page-clean .nav-wrap.is-scrolled {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 0 16px !important;
    height: 60px !important;
  }
  body.home-v5 .nav-wrap .nav-links,
  body.page-clean .nav-wrap .nav-links,
  body.home-v5 .nav-wrap.is-scrolled .nav-links,
  body.page-clean .nav-wrap.is-scrolled .nav-links {
    display: none !important;
  }
  body.home-v5 .nav-wrap .nav-divider,
  body.page-clean .nav-wrap .nav-divider,
  body.home-v5 .nav-wrap.is-scrolled .nav-divider,
  body.page-clean .nav-wrap.is-scrolled .nav-divider {
    display: none !important;
  }
  body.home-v5 .nav-wrap .nav-cta .btn-ghost,
  body.page-clean .nav-wrap .nav-cta .btn-ghost {
    display: none !important;
  }
  /* Push page content below fixed nav */
  body.home-v5 .home-v5-main,
  body.page-clean main {
    padding-top: 60px;
  }
}