/* home_260807 layout fidelity overrides v31 — muted via -webkit-text-fill-color (Webflow link fill) */

/* Fonts: Lovable declares Outfit for display but does not load the file —
   H1 falls through to ui-sans-serif/system-ui. Do NOT load Outfit or put Inter
   in the H1 stack (Inter is loaded for body and would hijack the fallback). */
.wh-aps-page {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.wh-aps-page h1,
.wh-aps-page h2,
.wh-aps-page h3,
.wh-aps-page .aps-font-display,
.wh-aps-page .aps-h1 {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
}

/* Reveal — match Lovable .reveal / .reveal-in (fade + translateY 24px, 0.9s).
   Do NOT force opacity:1 on bare .aps-reveal — that kills the viewport animation.
   Use longhand transition-* so Designer transition-delay (0/120/220ms) is preserved.
   :not() / !important avoids race where reveal-in is added before first paint. */
.wh-aps-page .aps-reveal:not(.aps-reveal-in) {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition-property: opacity, transform;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.wh-aps-page .aps-reveal.aps-reveal-in {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .wh-aps-page .aps-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Shared H1 wrap / weight — sizes are section-specific (hero ≠ CTA on Lovable) */
.wh-aps-page h1,
.wh-aps-page .aps-h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 18ch !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}
/* Hero H1 — Lovable: text-[2.5rem] md:text-[3.5rem] */
.wh-aps-page .aps-surface-hero h1,
.wh-aps-page .aps-hero-center h1,
.wh-aps-page .aps-h1 {
  font-size: 2.5rem !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-surface-hero h1,
  .wh-aps-page .aps-hero-center h1,
  .wh-aps-page .aps-h1 {
    font-size: 3.5rem !important;
  }
}
/* ® — Lovable uses <sup>; span+super alone sits ~7px too low on mobile */
.wh-aps-page h1 > span:last-child,
.wh-aps-page .aps-h1 > span:last-child {
  font-size: 0.35em !important;
  vertical-align: super !important;
  position: relative !important;
  top: -0.5em !important;
  margin-left: 0.125rem !important;
  line-height: 0 !important;
}

/* Primary CTA text must be dark on mint */
.wh-aps-page a.aps-bg-primary,
.wh-aps-page a.aps-text-primary-foreground,
.wh-aps-page .aps-bg-primary.aps-text-primary-foreground {
  color: oklch(21% 0.05 175) !important;
}

/* Hero subtitle spacing */
.wh-aps-page .aps-hero-center > .aps-reveal > p,
.wh-aps-page .aps-hero-center p {
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
}

/* Hero chrome → H1: Lovable pt-28 (7rem) mobile, md:pt-32 (8rem). Designer medium had 5rem.
   Bottom pad tightened vs Lovable pb-32 — client/Figma asked for less air above trusted logos. */
.wh-aps-page .aps-hero-center {
  padding: 7rem 1.5rem 4rem !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-hero-center {
    padding-top: 8rem !important;
    padding-bottom: 4rem !important;
  }
}

/* Trusted + logos band (Lovable py-24) — pull closer to hero CTA */
.wh-aps-page .aps-surface-hero .aps-relative.aps-overflow-hidden.aps-py-24 {
  padding-top: 2.5rem !important;
  padding-bottom: 3.5rem !important;
}

/* Trusted wrap — keep label above logos; full width for mono label */
.wh-aps-page .aps-trusted-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-trusted-wrap > .aps-reveal {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Beat Designer .inline-div-* fixed widths + zoom on trusted reveal wrappers
   (e.g. .inline-div-3 { zoom:0.67; width:680px } → ~510px visual overflow) */
.wh-aps-page .aps-trusted-wrap > [class*="inline-div"],
.wh-aps-page .aps-trusted-wrap > .aps-reveal {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  zoom: normal !important;
  box-sizing: border-box !important;
}
/* Trusted label */
.wh-aps-page .aps-trusted-wrap > .aps-reveal,
.wh-aps-page .aps-trusted-wrap > .aps-reveal > p,
.wh-aps-page .aps-trusted-label {
  font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: oklch(78% 0.012 205) !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Top banner: kill Webflow <p> margin (adds 10px on top of flex row-gap when wrapped) */
.wh-aps-page .aps-relative.aps-z-50 p,
.wh-aps-page .aps-relative.aps-z-50 .aps-flex > p {
  margin: 0 !important;
}

/* Spotlight announcement bar — deep brand green (primary mixed into ink)
   so it separates from nav/hero without matching mint CTAs */
.wh-aps-page .aps-relative.aps-z-50.aps-bg-ink {
  background-color: color-mix(
    in oklab,
    var(--primary, oklch(79% 0.18 160)) 34%,
    var(--ink, oklch(16% 0.012 210))
  ) !important;
}
.wh-aps-page .aps-relative.aps-z-50.aps-bg-ink p {
  color: var(--foreground, oklch(98% 0.005 200)) !important;
}
.wh-aps-page .aps-relative.aps-z-50.aps-bg-ink a {
  color: var(--foreground, oklch(98% 0.005 200)) !important;
  border-color: color-mix(in oklab, var(--foreground, oklch(98% 0.005 200)) 50%, transparent) !important;
}

/* Logo row: even centered pills */
.wh-aps-page .aps-logo-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.5rem !important;
  margin-top: 1.5rem !important;
  width: 100% !important;
}
/* Keep logo wrappers sized for flex; do NOT force transform:none —
   that kills Lovable translateY reveal on the logo pills. */
.wh-aps-page .aps-logo-row > div,
.wh-aps-page .aps-logo-row .aps-reveal {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 170px !important;
  max-width: 170px !important;
  margin: 0 !important;
  position: static !important;
  justify-content: center !important;
  align-items: center !important;
}
.wh-aps-page .aps-logo-row .aps-reveal.aps-reveal-in {
  transform: none;
}
.wh-aps-page .aps-logo-row .aps-lift,
.wh-aps-page .aps-logo-row [class*="rounded-full"] {
  height: 68px !important;
  width: 170px !important;
  max-width: 170px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background-color: color-mix(in oklab, var(--card, #1a2226) 70%, transparent) !important;
  box-shadow: 0 0 0 1px var(--border, rgba(255,255,255,0.12)) !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
}

/* Eyebrow pills */
.wh-aps-page .aps-eyebrow,
.wh-aps-page .aps-eyebrow-pill,
.wh-aps-page span.aps-eyebrow-pill {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background-color: color-mix(in oklab, var(--primary, #00dd92) 10%, transparent) !important;
  color: var(--primary, #00dd92) !important;
  padding: 8px 14px !important;
  font-family: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important; /* Lovable ~16.5px; bare 11px collapses pill height */
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary, #00dd92) 25%, transparent) !important;
}

/* Beat unlayered Webflow `h2 { font-size:32px; margin-top:20px }` — utilities lose without !important */
.wh-aps-page h2 {
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}
/* Feature headings — Lovable text-[1.5rem] md:text-[1.75rem] leading-snug max-w-[22ch] mt-6
   Only .aps-text-1-5rem — do NOT use .aps-surface-features h2 (intro lives there too). */
.wh-aps-page h2.aps-text-1-5rem {
  font-size: 1.5rem !important;
  line-height: 1.375 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  max-width: 22ch !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page h2.aps-text-1-5rem,
  .wh-aps-page h2.aps-md-text-1-75rem {
    font-size: 1.75rem !important;
  }
}
/* Product intro — Lovable text-[1.875rem] md:text-[2.5rem]; after feature rules so it wins */
.wh-aps-page h2.aps-text-1-875rem {
  font-size: 1.875rem !important;
  line-height: 1.25 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page h2.aps-text-1-875rem,
  .wh-aps-page h2.aps-md-text-2-5rem {
    font-size: 2.5rem !important;
  }
}
/* Feature / intro body copy — kill site `p { margin-bottom:10px }` */
.wh-aps-page .aps-surface-features p,
.wh-aps-page #product p,
.wh-aps-page h2.aps-text-1-875rem + p,
.wh-aps-page p.aps-mt-4,
.wh-aps-page p.aps-text-sm {
  margin-bottom: 0 !important;
}
.wh-aps-page p.aps-mt-4,
.wh-aps-page .aps-surface-features h2 + div p,
.wh-aps-page .aps-surface-features .aps-reveal > p {
  margin-top: 1rem !important; /* Lovable mt-4 */
}

/* Feature-row reveal shells: Designer sometimes stamps product-UI
   `.inline-div-* { width:680px; zoom:0.670588 }` on the OUTER reveal around the
   whole card (seen on AI Opportunity). That zooms the bezel and leaves a wide
   empty dark strip beside the white clip. Neutralize shells only — keep zoom on
   `.aps-screen-card [class*=inline-div]` below. */
.wh-aps-page .aps-surface-features .aps-slot > .aps-reveal,
.wh-aps-page .aps-surface-features .aps-slot > [class*="inline-div"],
.wh-aps-page .aps-surface-features .aps-md-order-1 > .aps-reveal,
.wh-aps-page .aps-surface-features .aps-md-order-1 > [class*="inline-div"],
.wh-aps-page .aps-surface-features .aps-md-order-2 > .aps-reveal,
.wh-aps-page .aps-surface-features .aps-md-order-2 > [class*="inline-div"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  zoom: normal !important;
  box-sizing: border-box !important;
}

/* Screen cards — dark bg-card bezel + white rounded-t window for screenshots.
   Fill the feature column (was capped ~456px inside 600px); keep side chrome light. */
.wh-aps-page .aps-screen-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important; /* rounded-2xl */
  background-color: var(--card, oklch(28% 0.032 200)) !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  box-shadow: 0 0 0 1px var(--border, oklch(100% 0 0 / 0.12)) !important;
  padding: 40px 20px 0 !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-screen-card > .aps-overflow-hidden,
.wh-aps-page .aps-screen-card > .aps-rounded-t-xl {
  background-color: var(--screen, #fff) !important;
  border-radius: 1rem 1rem 0 0 !important; /* Lovable rounded-t-xl ≈ 16px */
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Product screenshots replace white mock UI (mock kept in Designer tree, visibility off).
   Beat footer `.aps-overflow-hidden > :first-child` (0,4,1) with :first-child on img (0,4,2). */
.wh-aps-page .aps-screen-card > .aps-overflow-hidden > img.aps-screen-shot:first-child,
.wh-aps-page .aps-screen-card > .aps-rounded-t-xl > img.aps-screen-shot:first-child,
.wh-aps-page .aps-screen-card img.aps-screen-shot {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  zoom: 1 !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  margin: 0 !important;
}

/* Product container — full-bleed shell; content padding lives on .aps-surface-features */
#product,
#product.aps-relative {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 1.5rem !important; /* py-6 */
  padding-bottom: 1.5rem !important;
  box-sizing: border-box !important;
}
#product > .aps-container,
#product > .aps-max-w-1240px,
#product > .aps-relative.aps-mx-auto.aps-max-w-1240px {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-surface-features {
  border-radius: 0 !important;
  /* Full-bleed shell — horizontal inset lives on inner grids (match nav/CTA 1240) */
  padding: 1.5rem 0 !important; /* py-6 only */
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  /* Lovable ring-1 ring-border → --border = oklch(100% 0 0 / .12) */
  box-shadow: 0 0 0 1px var(--border, oklch(100% 0 0 / 0.12)) !important;
  outline: none !important;
  border: 0 !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-surface-features {
    padding: 2.5rem 0 !important; /* md:py-10 */
  }
}
/* Feature rows + intro: same centered 1240 column as nav / testimonial / CTA copy */
.wh-aps-page .aps-surface-features > .aps-grid {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important; /* px-6 */
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-surface-features > .aps-mx-auto,
.wh-aps-page .aps-surface-features > .aps-text-center {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

/* Feature row gap: md:gap-14 = 3.5rem (beat gap-8) */
.wh-aps-page .aps-surface-features .aps-md-gap-14,
.wh-aps-page .aps-grid.aps-md-gap-14 {
  gap: 3.5rem !important;
  column-gap: 3.5rem !important;
  row-gap: 3.5rem !important;
}
@media screen and (max-width: 767px) {
  .wh-aps-page .aps-surface-features .aps-md-gap-14,
  .wh-aps-page .aps-grid.aps-md-gap-14 {
    gap: 2rem !important;
    column-gap: 2rem !important;
    row-gap: 2rem !important;
  }
}

/* Zigzag */
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-md-order-1 { order: 1 !important; }
  .wh-aps-page .aps-md-order-2 { order: 2 !important; }
}

/* Dots */
.wh-aps-page .aps-dots,
.wh-aps-page .aps-dot-grid {
  background-image: radial-gradient(oklch(100% 0 0 / 0.07) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* Contact modal: white panel inherits page near-white --foreground — force ink */
.wh-aps-page .form-modal .form-modal-inner,
.wh-aps-page .form-modal .form-modal-inner-copy {
  color: #1d1916 !important;
  -webkit-text-fill-color: #1d1916 !important;
}
.wh-aps-page .form-modal .form-modal-inner :is(h1, h2, h3, p, label, .field-label, .heading-small),
.wh-aps-page .form-modal .form-modal-inner-copy :is(h1, h2, h3, p, label, .field-label, .heading-small) {
  color: #1d1916 !important;
  -webkit-text-fill-color: #1d1916 !important;
}
/* Site CSS sets .form-field-2col to 1fr only — First/Last + Company/Title stack.
   Restore side-by-side on desktop; keep single column on small screens. */
@media screen and (min-width: 768px) {
  .wh-aps-page .form-modal .form-field-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 16px !important;
    grid-row-gap: 16px !important;
    align-items: start !important;
  }
  .wh-aps-page .form-modal .form-field-2col > .field {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
.wh-aps-page .form-modal .form-modal-inner :is(input, select, textarea),
.wh-aps-page .form-modal .form-modal-inner-copy :is(input, select, textarea) {
  color: #333 !important;
  -webkit-text-fill-color: #333 !important;
}

/* CTA band — full-bleed green shell; inner .aps-relative keeps content ≤1240 */
.wh-aps-page .aps-surface-cta {
  display: block !important;
  border-radius: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Designer often leaves py-16 on the shell — stacks with inner py-24 and
     reads as uneven. Lovable pads only the inner max-w column. */
  padding: 0 !important;
}
/* Parent pad (aps-px-4 / py-6 / md:px-6 / lg:px-8) was insetting the green band
   and adding dark strips above/below the full-bleed gradient. */
.wh-aps-page .aps-px-4.aps-py-6.aps-md-px-6.aps-lg-px-8:has(> .aps-surface-cta) {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.wh-aps-page .aps-surface-cta > .aps-relative {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 5rem !important; /* Lovable py-20 */
  padding-bottom: 5rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-surface-cta > .aps-relative {
    padding-top: 6rem !important; /* md:py-24 */
    padding-bottom: 6rem !important;
  }
}
.wh-aps-page .aps-surface-cta .aps-reveal,
.wh-aps-page .aps-surface-cta .aps-reveal:not(.aps-reveal-in),
.wh-aps-page .aps-surface-cta .aps-reveal.aps-reveal-in {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  zoom: normal !important;
  /* Settle immediately — stuck mid-transition translateY(24px) made bottom
     padding look larger than top (same class of bug as testimonial minHeight). */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* CTA H1 — Lovable: text-[2.25rem] md:text-[3rem] (smaller than hero) */
.wh-aps-page .aps-surface-cta h1 {
  display: block !important;
  width: 100% !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  max-width: 18ch !important;
  margin: 0 auto !important;
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-surface-cta h1 {
    font-size: 3rem !important;
  }
}

/* Testimonial — Designer drops aps-flex / aps-mx-auto / quote utilities.
   Without flex, prev/next chevrons stack on the left (reads like a scrollbar). */
.wh-aps-page .aps-py-28 > .aps-relative.aps-max-w-1240px,
.wh-aps-page .aps-py-28 > .aps-max-w-1240px {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}
.wh-aps-page a[aria-label="Previous testimonial"],
.wh-aps-page a[aria-label="Next testimonial"] {
  display: flex !important;
  flex: 0 0 2.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 0 !important;
}
/* Both chevrons white — 2-slide loop has no inactive end state. */
.wh-aps-page a[aria-label="Previous testimonial"],
.wh-aps-page a[aria-label="Next testimonial"] {
  background-color: var(--foreground, oklch(98% 0.005 200)) !important;
  color: var(--ink, oklch(16% 0.012 210)) !important;
}
.wh-aps-page a[aria-label="Previous testimonial"] svg,
.wh-aps-page a[aria-label="Next testimonial"] svg {
  display: block !important;
}
.wh-aps-page .aps-py-28 .aps-grid.aps-gap-12,
.wh-aps-page .aps-py-28 .aps-md-grid-cols-1-6fr_1fr {
  display: grid !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  /* Natural height per slide — carousel minHeight left empty space under shorter quotes */
  min-height: 0 !important;
  align-items: start !important;
  gap: 3rem !important;
  width: auto !important;
  max-width: none !important;
}
.wh-aps-page .aps-py-28 .aps-grid > .aps-reveal,
.wh-aps-page .aps-py-28 .aps-grid > [class*="inline-div"] {
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-py-28 .aps-grid.aps-gap-12,
  .wh-aps-page .aps-py-28 .aps-md-grid-cols-1-6fr_1fr {
    grid-template-columns: 1.6fr 1fr !important;
  }
}
/* Quote — Lovable text-[1.5rem] md:text-[1.875rem] leading-[1.35]; classes often stripped.
   Webflow site CSS adds blockquote { border-left: 5px solid #e2e2e2 } — kills that bar. */
.wh-aps-page .aps-py-28 blockquote {
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-py-28 blockquote {
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
    padding-right: 3rem !important;
  }
}
.wh-aps-page .aps-py-28 blockquote > p:first-child {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-py-28 blockquote > p:first-child {
    font-size: 1.875rem !important;
  }
}
/* Lovable attribution footer mt-8 — Designer strip leaves 0 between quote and name */
.wh-aps-page .aps-py-28 blockquote > div {
  margin-top: 2rem !important;
}
.wh-aps-page .aps-text-4-5rem {
  font-size: 4.5rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Product UI scale — Lovable wraps each mock in width:680px; zoom:0.670588 inside
   overflow:hidden. Designer renames that wrapper to .inline-div-*; do NOT flatten to
   width:100% / zoom:normal (that made Prompt Library look unscaled and cramped). */
.wh-aps-page .aps-screen-card > .aps-overflow-hidden > :first-child:not(img),
.wh-aps-page .aps-screen-card > .aps-rounded-t-xl > :first-child:not(img),
.wh-aps-page .aps-screen-card [class*="inline-div"] {
  width: 680px !important;
  max-width: none !important;
  min-width: 680px !important;
  zoom: 0.670588 !important;
  box-sizing: border-box !important;
}

/* Prompt Library / screen chrome — utilities often stripped on <a class="w-inline-block"> */
.wh-aps-page .aps-screen-card .aps-bg-screen-blue,
.wh-aps-page .aps-screen-card a.aps-bg-screen-blue {
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
  color: var(--screen, #fff) !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.wh-aps-page .aps-screen-card .aps-bg-screen-blue-soft {
  background-color: var(--screen-blue-soft, oklch(90% 0.05 262)) !important;
}
/* AI Opportunity horizontal bars — Designer strips flex-1 / blue-soft / width */
.wh-aps-page .aps-screen-card .aps-opp-bar-track {
  position: relative !important;
  height: 2.25rem !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
}
.wh-aps-page .aps-screen-card .aps-opp-bar-fill {
  position: relative !important;
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 0.5rem !important;
  background-color: var(--screen-blue-soft, oklch(90% 0.05 262)) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}
.wh-aps-page .aps-screen-card .aps-opp-bar-edge {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 2.5px !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.wh-aps-page .aps-screen-card span.aps-opp-bar-edge.aps-bg-screen-blue,
.wh-aps-page .aps-screen-card .aps-opp-bar-edge.aps-h-full.aps-bg-screen-blue {
  border-radius: 0 !important;
  width: 2.5px !important;
  height: 100% !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
}
.wh-aps-page .aps-screen-card .aps-opp-bar-pct {
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  -webkit-text-fill-color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  position: relative !important;
  z-index: 2 !important;
}
.wh-aps-page .aps-screen-card .aps-opp-bar-label {
  width: 130px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}
/* Lovable space-y-4 between Opportunity bars — Designer strips aps-space-y-4 */
.wh-aps-page .aps-screen-card .aps-opp-bar-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
.wh-aps-page .aps-screen-card .aps-opp-bar-stack > .aps-flex.aps-items-center.aps-gap-3 {
  margin: 0 !important;
}
.wh-aps-page .aps-screen-card h3 {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
/* Per-card h3 sizes (Lovable) — never blanket 1.25rem */
.wh-aps-page .aps-screen-card h3.aps-text-1-375rem { font-size: 1.375rem !important; }
.wh-aps-page .aps-screen-card h3.aps-text-1-25rem { font-size: 1.25rem !important; }
.wh-aps-page .aps-screen-card h3.aps-text-1-125rem { font-size: 1.125rem !important; }
.wh-aps-page .aps-screen-card h3.aps-text-1-0625rem { font-size: 1.0625rem !important; }
.wh-aps-page .aps-screen-card .aps-flex.aps-items-center.aps-justify-between {
  border-bottom: 1px solid var(--screen-border, oklch(91% 0.004 260)) !important;
  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;
}
/* Prompt cards row — Designer often drops aps-grid aps-grid-cols-3 aps-gap-3 (left only aps-mt-3) */
.wh-aps-page .aps-screen-card .aps-mt-3:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 0.75rem !important;
}
.wh-aps-page .aps-screen-card .aps-mt-3 > .aps-lift,
.wh-aps-page .aps-screen-card .aps-mt-3 > div {
  border-radius: 0.5rem !important;
  padding: 0.875rem !important;
  box-shadow: 0 0 0 1px var(--screen-border, oklch(91% 0.004 260)) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
.wh-aps-page .aps-screen-card .aps-mt-3 > div:hover {
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--screen-blue, oklch(52% 0.22 262)) 40%, transparent) !important;
}

/* Screen-card type — site p/a/h* leak sizes/colors; utilities often stripped by Designer.
   Respect size utility classes; only force muted/size via class or known structure. */
.wh-aps-page .aps-screen-card,
.wh-aps-page .aps-screen-card p,
.wh-aps-page .aps-screen-card a,
.wh-aps-page .aps-screen-card span {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.wh-aps-page .aps-screen-card p {
  margin: 0 !important;
  line-height: 1.375 !important;
}
.wh-aps-page .aps-screen-card a {
  line-height: 1.25 !important;
  text-decoration: none !important;
}
/* Create Prompt — after Inter blanket. Lovable declares Inter but does not load it
   → system-ui glyphs (~99px text / ~123px btn). Loaded Inter at 12px is narrower (~84px).
   Radius: Lovable rounded-md with --radius:.75rem → 10px (not Tailwind default 6px). */
.wh-aps-page .aps-screen-card a.aps-create-prompt,
.wh-aps-page .aps-screen-card a.aps-create-prompt.aps-bg-screen-blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem 0.75rem !important; /* py-1.5 px-3 */
  border-radius: 0.625rem !important; /* Lovable rounded-md = 10px */
  font-family: ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
  color: var(--screen, #fff) !important;
  -webkit-text-fill-color: var(--screen, #fff) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-screen-card .aps-font-display,
.wh-aps-page .aps-screen-card h3,
.wh-aps-page .aps-screen-card h4.aps-font-display {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
}
.wh-aps-page .aps-screen-card .aps-font-semibold {
  font-weight: 600 !important;
}
.wh-aps-page .aps-screen-card .aps-text-0-6875rem { font-size: 0.6875rem !important; }
.wh-aps-page .aps-screen-card .aps-text-0-75rem { font-size: 0.75rem !important; }
.wh-aps-page .aps-screen-card .aps-text-0-8125rem { font-size: 0.8125rem !important; }
.wh-aps-page .aps-screen-card .aps-text-0-875rem { font-size: 0.875rem !important; }
.wh-aps-page .aps-screen-card .aps-text-0-9375rem { font-size: 0.9375rem !important; }
.wh-aps-page .aps-screen-card .aps-text-1-0625rem { font-size: 1.0625rem !important; }
.wh-aps-page .aps-screen-card .aps-text-1-125rem { font-size: 1.125rem !important; }
.wh-aps-page .aps-screen-card .aps-text-1-25rem { font-size: 1.25rem !important; }
.wh-aps-page .aps-screen-card .aps-text-1-375rem { font-size: 1.375rem !important; }
.wh-aps-page .aps-screen-card .aps-text-screen-muted,
.wh-aps-page .aps-screen-card .aps-text-screen-muted * {
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
  -webkit-text-fill-color: var(--screen-muted, oklch(55% 0.01 260)) !important;
}
.wh-aps-page .aps-screen-card .aps-text-screen-foreground {
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
/* h4 — Prompt Library Data Analysis is Outfit 0.9375; Overview chart title is Inter 0.8125 */
.wh-aps-page .aps-screen-card h4 {
  margin: 0 !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
.wh-aps-page .aps-screen-card h4.aps-text-0-8125rem {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
}
.wh-aps-page .aps-screen-card h4.aps-text-0-9375rem.aps-font-display {
  font-size: 0.9375rem !important;
}
/* Prompt Library card bodies / guide */
.wh-aps-page .aps-screen-card .aps-px-3-5.aps-pt-2-5,
.wh-aps-page .aps-screen-card .aps-mt-3 > div > p:last-child {
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
  font-size: 0.75rem !important;
  line-height: 1.375 !important;
  font-weight: 400 !important;
}
/* Prompt Library Guidance row — chevron + blue i + label on one line.
   Lovable: rounded-lg → 12px (--radius .75rem), line-height 1.5 (not screen-card a 1.25). */
.wh-aps-page .aps-screen-card a.aps-guidance-btn {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.625rem !important; /* gap-2.5 */
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0.75rem !important; /* mt-3 */
  padding: 0.625rem 0.875rem !important; /* py-2.5 px-3.5 */
  border-radius: 0.75rem !important; /* Lovable rounded-lg = 12px */
  box-sizing: border-box !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  -webkit-text-fill-color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  box-shadow: 0 0 0 1px var(--screen-border, oklch(91% 0.004 260)) !important;
  background-color: transparent !important;
}
.wh-aps-page .aps-screen-card a.aps-guidance-btn:hover,
.wh-aps-page .aps-screen-card a.aps-guidance-btn:focus-visible {
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
}
.wh-aps-page .aps-screen-card a.aps-guidance-btn > svg {
  display: block !important;
  flex: 0 0 11px !important;
  width: 11px !important;
  height: 11px !important;
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
}
.wh-aps-page .aps-screen-card a.aps-guidance-btn .aps-guidance-info,
.wh-aps-page .aps-screen-card span.aps-guidance-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1rem !important;
  height: 1rem !important;
  flex: 0 0 1rem !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
  color: var(--screen, #fff) !important;
  -webkit-text-fill-color: var(--screen, #fff) !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.wh-aps-page .aps-screen-card .aps-mt-3 > div > p:first-child {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
.wh-aps-page .aps-screen-card .aps-bg-screen-subtle,
.wh-aps-page .aps-screen-card span.aps-rounded-full.aps-text-0-6875rem,
.wh-aps-page .aps-screen-card span.aps-rounded-full.aps-text-screen-muted {
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
}
/* Opportunity bar tracks use bg-screen-subtle for the track fill — do not mute descendant % labels */
.wh-aps-page .aps-screen-card .aps-opp-bar-track.aps-bg-screen-subtle,
.wh-aps-page .aps-screen-card .aps-opp-bar-track.aps-bg-screen-subtle * {
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  -webkit-text-fill-color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
.wh-aps-page .aps-screen-card .aps-w-full.aps-bg-transparent {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
}
/* Gap-analysis expanded detail inherits muted 0.75rem from wrapper */
.wh-aps-page .aps-screen-card .aps-text-0-75rem.aps-text-screen-muted p,
.wh-aps-page .aps-screen-card p.aps-pb-3 {
  color: var(--screen-muted, oklch(55% 0.01 260)) !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}
/* Hover:bg-screen-subtle — filters, chrome pills, gap rows, icon buttons.
   Filters: beat screen-card a { line-height:1.25 } → Lovable py-1.5 + lh 1.5 ≈ 30px. */
.wh-aps-page .aps-screen-card a.aps-screen-filter {
  line-height: 1.5 !important;
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}
.wh-aps-page .aps-screen-card a.aps-screen-filter,
.wh-aps-page .aps-screen-card a.aps-hover-bg-screen-subtle,
.wh-aps-page .aps-screen-card .aps-hover-bg-screen-subtle {
  transition: background-color 0.15s ease !important;
}
.wh-aps-page .aps-screen-card a.aps-screen-filter:hover,
.wh-aps-page .aps-screen-card a.aps-hover-bg-screen-subtle:hover,
.wh-aps-page .aps-screen-card .aps-hover-bg-screen-subtle:hover {
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
}

/* Opportunity / Progress inner pad — Designer often strips aps-px-6 aps-py-6 */
.wh-aps-page .aps-screen-card .aps-px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.wh-aps-page .aps-screen-card .aps-py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.wh-aps-page .aps-screen-card .aps-p-4 {
  padding: 1rem !important;
}

/* Overview: header px-7/pt-6, pie % centered, All Time / Assessment chips */
.wh-aps-page .aps-screen-card .aps-px-7 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}
.wh-aps-page .aps-screen-card .aps-pt-6 {
  padding-top: 1.5rem !important;
}
.wh-aps-page .aps-screen-card .aps-px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.wh-aps-page .aps-screen-card .aps-py-1-5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.wh-aps-page .aps-screen-card .aps-gap-1-5 { gap: 0.375rem !important; }
.wh-aps-page .aps-screen-card .aps-gap-2 { gap: 0.5rem !important; }
.wh-aps-page .aps-screen-card a.aps-flex,
.wh-aps-page .aps-screen-card .aps-flex {
  display: flex !important;
}
.wh-aps-page .aps-screen-card .aps-items-center {
  align-items: center !important;
}
.wh-aps-page .aps-screen-card .aps-justify-center {
  justify-content: center !important;
}
.wh-aps-page .aps-screen-card .aps-absolute {
  position: absolute !important;
}
.wh-aps-page .aps-screen-card .aps-inset-0 {
  inset: 0 !important;
}
.wh-aps-page .aps-screen-card .aps-shrink-0 {
  flex-shrink: 0 !important;
}
.wh-aps-page .aps-screen-card .aps-h-68px { height: 68px !important; }
.wh-aps-page .aps-screen-card .aps-w-68px { width: 68px !important; }
.wh-aps-page .aps-screen-card .aps-relative {
  position: relative !important;
}
/* Pie % — even when Designer strips absolute/flex classes from the span */
.wh-aps-page .aps-screen-card .aps-h-68px > span,
.wh-aps-page .aps-screen-card .aps-w-68px > span {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}
/* Segment / All Time chips — beat Webflow w-inline-block display */
.wh-aps-page .aps-screen-card a.aps-chip-flex {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-screen-card a.aps-chip-flex svg {
  flex-shrink: 0 !important;
}

/* Overview — Value Generated Overview card (mx-7 mb-2 p-4) */
.wh-aps-page .aps-screen-card .aps-mx-7 {
  margin-left: 1.75rem !important;
  margin-right: 1.75rem !important;
}
.wh-aps-page .aps-screen-card .aps-mb-2 {
  margin-bottom: 0.5rem !important;
}
.wh-aps-page .aps-screen-card .aps-vgo-card {
  margin: 0 1.75rem 0.5rem !important;
  padding: 1rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 0 0 1px var(--screen-border, oklch(91% 0.004 260)) !important;
  box-sizing: border-box !important;
}

/* Overview methodology segment — light grey shell behind Assessment / Power Users */
.wh-aps-page .aps-screen-card .aps-method-seg {
  display: flex !important;
  overflow: hidden !important;
  border-radius: 0.375rem !important;
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
  box-shadow: 0 0 0 1px var(--screen-border, oklch(91% 0.004 260)) !important;
}
.wh-aps-page .aps-screen-card a.aps-hover-text-screen-foreground:hover,
.wh-aps-page .aps-screen-card a.aps-hover-text-screen-foreground:focus-visible {
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  -webkit-text-fill-color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
}

/* Gap analysis — Use Case Coverage track + fill */
.wh-aps-page .aps-screen-card .aps-gap-bar-track,
.wh-aps-page .aps-screen-card .aps-h-5px.aps-bg-screen-track {
  display: block !important;
  height: 5px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background-color: var(--screen-track, oklch(94% 0.002 260)) !important;
}
.wh-aps-page .aps-screen-card .aps-gap-bar-track > .aps-bg-screen-blue,
.wh-aps-page .aps-screen-card .aps-bg-screen-blue.aps-h-full {
  display: block !important;
  height: 100% !important;
  border-radius: 9999px !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
}

/* Gap-analysis expand panels — must stay collapsed (Lovable grid-template-rows:0fr; opacity:0).
   Designer drops the inline style → all row details expand and blow the white window height. */
.wh-aps-page .aps-screen-card .aps-collapse-closed {
  display: grid !important;
  grid-template-rows: 0fr !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.wh-aps-page .aps-screen-card .aps-collapse-closed > .aps-min-h-0,
.wh-aps-page .aps-screen-card .aps-min-h-0 {
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Segment / pill tabs — Active + Observed Usage need white fill + shadow */
.wh-aps-page .aps-screen-card a.aps-bg-screen,
.wh-aps-page .aps-screen-card .aps-bg-screen {
  background-color: var(--screen, #fff) !important;
}
.wh-aps-page .aps-screen-card a.aps-shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}
.wh-aps-page .aps-screen-card .aps-bg-screen-subtle {
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
}
/* Opportunity level tabs — underline */
.wh-aps-page .aps-screen-card a.aps-border-b-2 {
  border-bottom-width: 2px !important;
  border-bottom-style: solid !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.375rem !important;
  padding-bottom: 0.625rem !important;
  margin-bottom: -1px !important;
}
.wh-aps-page .aps-screen-card a.aps-border-screen-blue {
  border-bottom-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
}
.wh-aps-page .aps-screen-card a.aps-border-transparent {
  border-bottom-color: transparent !important;
}
.wh-aps-page .aps-screen-card .aps-flex.aps-gap-7.aps-border-b,
.wh-aps-page .aps-screen-card .aps-opp-tabs {
  display: flex !important;
  gap: 1.75rem !important;
  border-bottom: 1px solid var(--screen-border, oklch(91% 0.004 260)) !important;
  margin-top: 1.25rem !important;
}
.wh-aps-page .aps-screen-card .aps-gap-seg,
.wh-aps-page .aps-screen-card .aps-flex.aps-overflow-hidden.aps-rounded-lg.aps-bg-screen-subtle {
  display: flex !important;
  overflow: hidden !important;
  border-radius: 0.5rem !important;
  background-color: var(--screen-subtle, oklch(97% 0.002 260)) !important;
}
/* Progress Over Time legend — Lovable mt-5 flex flex-wrap gap-x-5 gap-y-2.5 (2 rows) */
.wh-aps-page .aps-screen-card .aps-legend-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 1.25rem !important; /* gap-x-5 */
  row-gap: 0.625rem !important; /* gap-y-2.5 */
  margin-top: 1.25rem !important; /* mt-5 */
  width: 100% !important;
}
.wh-aps-page .aps-screen-card a.aps-legend-chip,
.wh-aps-page .aps-screen-card a.aps-legend-chip.aps-flex {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  -webkit-text-fill-color: var(--screen-foreground, oklch(21% 0.006 260)) !important;
  transition: opacity 0.2s ease !important;
}
.wh-aps-page .aps-screen-card a.aps-legend-chip:hover {
  opacity: 0.7 !important;
}
.wh-aps-page .aps-screen-card .aps-legend-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  background-color: var(--screen-blue, oklch(52% 0.22 262)) !important;
  box-shadow: none !important;
}
.wh-aps-page .aps-screen-card .aps-legend-check svg {
  display: block !important;
  flex-shrink: 0 !important;
}
.wh-aps-page .aps-screen-card a.aps-legend-chip.is-off .aps-legend-check {
  background-color: transparent !important;
  box-shadow: 0 0 0 1px var(--screen-border, oklch(91% 0.004 260)) !important;
}
.wh-aps-page .aps-screen-card a.aps-legend-chip.is-off .aps-legend-check svg {
  display: none !important;
}
.wh-aps-page .aps-screen-card .aps-series-dot {
  display: block !important;
  width: 0.5rem !important; /* h-2 / w-2 */
  height: 0.5rem !important;
  flex: 0 0 0.5rem !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}
.wh-aps-page .aps-screen-card path.aps-progress-line {
  transition: opacity 0.4s ease !important;
}
.wh-aps-page .aps-screen-card path.aps-progress-line.is-off {
  opacity: 0 !important;
}

/* Feature ROW grids only (not nested screen-card grids) — Lovable md:gap-14 = 56px */
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-surface-features .aps-grid.aps-md-grid-cols-2.aps-gap-8,
  .wh-aps-page .aps-surface-features .aps-grid.aps-md-gap-14 {
    gap: 3.5rem !important;
    column-gap: 3.5rem !important;
    row-gap: 3.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .wh-aps-page .aps-surface-features .aps-grid.aps-md-grid-cols-2.aps-gap-8 {
    gap: 2rem !important;
    column-gap: 2rem !important;
    row-gap: 2rem !important;
  }

  /* Narrow viewports: keep feature copy + white mocks inside the column */
  .wh-aps-page .aps-surface-features .aps-grid,
  .wh-aps-page .aps-surface-features .aps-grid > *,
  .wh-aps-page .aps-surface-features .aps-slot,
  .wh-aps-page .aps-surface-features .aps-md-order-1,
  .wh-aps-page .aps-surface-features .aps-md-order-2,
  .wh-aps-page .aps-surface-features .aps-reveal {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .wh-aps-page .aps-surface-features .aps-max-w-48ch,
  .wh-aps-page .aps-surface-features p.aps-mt-4,
  .wh-aps-page .aps-surface-features h2,
  .wh-aps-page .aps-surface-features h2.aps-max-w-22ch {
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
  }
  .wh-aps-page .aps-screen-card {
    max-width: 100% !important;
    width: 100% !important;
    padding: 1.25rem 0.75rem 0 !important;
  }
  .wh-aps-page .aps-screen-card > .aps-overflow-hidden,
  .wh-aps-page .aps-screen-card > .aps-rounded-t-xl {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Logo pills: target nested wrappers too (layout only — leave transform for reveal) */
.wh-aps-page .aps-logo-row > *,
.wh-aps-page .aps-logo-row a,
.wh-aps-page .aps-logo-row .w-inline-block {
  flex: 0 0 auto !important;
  width: 170px !important;
  max-width: 170px !important;
  margin: 0 !important;
  position: static !important;
}
.wh-aps-page .aps-logo-row img {
  height: auto !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
/* Wide Autodesk PNG (≈9.9:1) — do not force height or it squashes in the 170px pill */
.wh-aps-page .aps-logo-row img[alt="Autodesk"] {
  max-height: 16px !important;
  max-width: 150px !important;
}
/* Demo / primary buttons — color only (do NOT force padding: nav is px-4/py-2, hero is px-6/py-3) */
.wh-aps-page a.aps-bg-primary,
.wh-aps-page .aps-bg-primary,
.wh-aps-page a.aps-bg-primary.aps-text-primary-foreground,
.wh-aps-page .aps-surface-cta a.aps-press.aps-lift {
  background-color: var(--primary, oklch(79% 0.18 160)) !important;
  color: var(--primary-foreground, oklch(21% 0.05 175)) !important;
}
.wh-aps-page a.aps-bg-primary:hover,
.wh-aps-page .aps-bg-primary:hover,
.wh-aps-page a.aps-hover-bg-primary-90:hover,
.wh-aps-page .aps-surface-cta a.aps-press.aps-lift:hover {
  background-color: color-mix(in oklab, var(--primary, oklch(79% 0.18 160)) 90%, transparent) !important;
  color: var(--primary-foreground, oklch(21% 0.05 175)) !important;
}
/* Footer CTA size only — never apply to nav (aps-px-4 aps-py-2).
   Lovable button wrap uses mt-8 (2rem) under the CTA H1. */
.wh-aps-page .aps-surface-cta a.aps-press.aps-lift {
  border-radius: 9999px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-top: 2rem !important;
}
.wh-aps-page .aps-text-primary {
  color: var(--primary, oklch(79% 0.18 160)) !important;
}
/* Nav / banner text */
.wh-aps-page .aps-top-chrome a,
.wh-aps-page .aps-relative.aps-z-50.aps-bg-ink a,
.wh-aps-page .aps-sticky a {
  text-decoration: none !important;
}

/* Sticky nav must be a sibling of the announcement banner under .wh-aps-page
   (not nested in short .aps-top-chrome) — sticky only sticks within its parent.
   Lovable: transparent at rest → ink/90 + blur + shadow after scroll. */
.wh-aps-page .aps-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.wh-aps-page .aps-sticky.aps-nav-scrolled {
  background-color: color-mix(in oklab, var(--ink, #0f1416) 90%, transparent) !important;
  border-bottom-color: color-mix(in oklab, var(--border, #fff) 50%, transparent) !important;
  box-shadow: var(--shadow-nav, 0 8px 30px -12px oklch(0.2 0.02 210 / 0.25)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
/* Eyebrow: also style bare uppercase mono-looking spans in feature copy via JS class */
.wh-aps-page span.aps-eyebrow-pill {
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* Hero CTA group spacing */
.wh-aps-page .aps-hero-center .aps-flex,
.wh-aps-page .aps-hero-cta-row {
  margin-top: 2rem !important;
  gap: 1rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
/* Testimonial quote sizing (see .aps-py-28 blockquote rules above) */
.wh-aps-page .aps-surface-testimonial blockquote,
.wh-aps-page .aps-surface-testimonial p.aps-quote {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
}

/* Logo row: wrap on mobile (Lovable flex-wrap); single line from md up */
.wh-aps-page .aps-logo-row {
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  justify-content: center !important;
  align-items: center !important;
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-logo-row {
    flex-wrap: nowrap !important;
  }
}
.wh-aps-page .aps-logo-row > div,
.wh-aps-page .aps-logo-row > .aps-reveal {
  flex: 0 0 170px !important;
  width: 170px !important;
  max-width: 170px !important;
  order: 0 !important;
  align-self: center !important;
}
.wh-aps-page .aps-logo-row .aps-lift {
  margin: 0 auto !important;
}
/* Beat site link color on mint CTAs harder */
.wh-aps-page a.aps-text-primary-foreground,
.wh-aps-page a.aps-bg-primary.aps-text-primary-foreground,
.wh-aps-page .aps-hero-center a.aps-bg-primary,
.wh-aps-page .aps-surface-cta a.aps-bg-primary {
  color: oklch(21% 0.05 175) !important;
}

/* Hero Demo hover glow — Lovable hover:shadow-[var(--glow-accent)]
   Hosted utility sets Tailwind --tw-shadow chain; without @layer properties
   those vars are invalid and the whole box-shadow drops. Use the token directly. */
.wh-aps-page a.aps-hover-shadow-var-glow-accent {
  transition: box-shadow 0.25s ease, background-color 0.2s ease !important;
}
.wh-aps-page a.aps-hover-shadow-var-glow-accent:hover,
.wh-aps-page a.aps-hover-shadow-var-glow-accent:focus-visible {
  box-shadow: var(--glow-accent) !important;
}

/* Nav brand mark — bumped above Lovable h-8 (2rem) for stronger presence */
.wh-aps-page .aps-sticky a.aps-press > img.aps-h-8,
.wh-aps-page .aps-sticky img.aps-h-8,
.wh-aps-page .aps-sticky img[alt="Workhelix"] {
  height: 3rem !important; /* 48px */
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}
/* Footer brand mark — Designer logo-workhelix-white (aps-h-7); do not remap to nav-light */
.wh-aps-page img.aps-h-7,
.wh-aps-page .aps-gap-x-10.aps-gap-y-6 > img[alt="Workhelix"] {
  height: 1.75rem !important; /* 28px */
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}
/* Footer social icons (X + LinkedIn) — production assets beside logo */
.wh-aps-page .aps-social-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-shrink: 0 !important;
  /* Extra space before Resources / About / Careers (on top of brand-row gap-x-10) */
  margin-right: 2rem !important;
}
.wh-aps-page .aps-social-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  text-decoration: none !important;
  opacity: 0.85;
  transition: opacity 0.2s ease !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}
.wh-aps-page .aps-social-row a:hover,
.wh-aps-page .aps-social-row a:focus-visible {
  opacity: 1;
}
.wh-aps-page .aps-social-icon,
.wh-aps-page .aps-social-row img {
  height: 1.25rem !important; /* 20px */
  width: 1.25rem !important; /* SVGs collapse with width:auto in some Webflow img rules */
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}
/* SOC 2 badge sits with social icons; do not force 20px square on it */
.wh-aps-page .aps-soc2-badge,
.wh-aps-page .aps-social-row img.aps-soc2-badge {
  width: 55px !important;
  height: auto !important;
  max-width: 55px !important;
  display: block !important;
  object-fit: contain !important;
}
/* Stale publish can leave a duplicate badge — keep only the first */
.wh-aps-page .aps-social-row > img.aps-soc2-badge ~ img.aps-soc2-badge {
  display: none !important;
}

/* Nav link row: desktop inline; mobile full-width second row so Resources/About/Careers
   stay reachable (Lovable hides them with no hamburger — that left mobile with no nav). */
.wh-aps-page .aps-sticky > .aps-mx-auto.aps-flex {
  flex-wrap: nowrap !important;
}
.wh-aps-page .aps-sticky .aps-md-flex.aps-items-center.aps-gap-8 {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .wh-aps-page .aps-sticky > .aps-mx-auto.aps-flex {
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
  }
  .wh-aps-page .aps-sticky .aps-md-flex.aps-items-center.aps-gap-8 {
    display: flex !important;
    order: 3 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0.25rem 0 0.15rem !important;
    box-sizing: border-box !important;
  }
  .wh-aps-page .aps-sticky .aps-md-flex.aps-items-center.aps-gap-8 a {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
}
@media screen and (min-width: 768px) {
  .wh-aps-page .aps-sticky .aps-md-flex.aps-items-center.aps-gap-8 {
    display: flex !important;
  }
}