/* ================================================================
   NARROW MOBILE NAV FIX (≤375px)
   responsive.css already has a (max-width: 375px) rule intending to wrap
   the Sign In button onto its own row on very narrow phones, but it's
   silently defeated by a higher-specificity / !important rule at
   (max-width: 991.98px) — .mainNav.navbar .nav-main-container sets
   flex-wrap: nowrap, and .mainNav.navbar .navbar-action-button sets
   margin-left: auto !important — so instead of wrapping, Sign In and the
   hamburger toggler overflow past the viewport edge and get clipped.
   Restore just the two overridden properties, matching the same selector
   specificity and (for the !important one) priority.
   ================================================================ */
@media (max-width: 375px) {
  /* .mainNav.navbar .nav-main-container {
    flex-wrap: wrap !important;
  } */

  /* Everywhere above 375px, Sign In renders before the hamburger toggler
     (Bootstrap's order-2/order-3 utility classes on these elements in the
     JSX). responsive.css's own (max-width: 375px) rule swaps that —
     .navbar-toggler gets order:2 and .navbar-action-button gets order:3 —
     which is what actually flips their visual order below 375px. Override
     with the same specificity the swap uses (.mainNav.navbar prefix) to
     restore the order used everywhere else, without touching anything
     else about that rule (width, wrap, spacing). */
  .mainNav.navbar .navbar-toggler {
    order: 3;
  }

  .mainNav.navbar .navbar-action-button {
    order: 2;
    /* auto margin pushes Sign In + the toggler (which follows it, with its
       own small existing margin-left) as one group to the far right,
       leaving the logo at the far left with one real gap between them —
       instead of margin-left:0, which packed all three flush together. */
    margin-left: auto !important;
    /* responsive.css's own (max-width:375px) rule sets width:100% here,
       which becomes this item's flex-basis (312px, nav-main-container's
       full content width) — flex-shrink then squeezes it back down to fit
       alongside the logo/toggler, but it's still sized as if it owned all
       the leftover space, leaving nothing for the auto margin above to
       absorb. Size to actual (now-shrunk) content instead. */
    width: auto !important;
  }

  /* Bigger logo: responsive.css's own rule gives the logo container
     flex:1 (grow to fill space) and sizes the image at 50% of that —
     since the logo no longer needs to grow now that the action-button's
     auto margin handles the left/right split, let it size to its own
     (larger) content instead. width:auto is needed too, not just flex —
     an unconditional width:12% in style.css (plus several other
     percentage widths at other breakpoints) targets .navbar-brand
     directly and otherwise still clips the container to its old narrow
     size regardless of flex, which is also why the action-button's auto
     margin above had no free space to absorb until this is reset. */
  .mainNav.navbar .navbar-brand.logo {
    flex: none;
    width: auto !important;
  }

  .mainNav.navbar .navbar-brand img {
    width: 115px !important;
  }

  /* .container has Bootstrap's standard 15px side padding, leaving exactly
     312px for the whole row at 375px width. A bigger logo plus the
     default Sign In button size (padding: 12px 25px) already use all of
     that with nothing left for the auto-margin gap above to absorb —
     shrink Sign In specifically (scoped to the navbar, not the same
     .get-started class used elsewhere on the site) to free up room. */
  .navbar-action-button .get-started {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ================================================================
   MOBILE MENU LEFT-ALIGN (≤991px)
   .navbar-expand-lg .navbar-nav { align-items: center; } in style.css
   isn't scoped to desktop only, so it also centers the collapsed mobile
   menu list (a column flex container below 992px, where align-items
   governs horizontal sizing/position of each li). "center" (like any
   value other than the flexbox default "stretch") makes each li shrink
   to its own content width instead of spanning the row — that's both
   why Home/Our Story end up centered, AND (a value of flex-start has the
   same problem) why the Solutions/Use Cases/Resources toggle buttons'
   own width:100% has no effect: with the li already shrunk to content,
   width:100% just means 100% of that shrunk width. Each toggle button
   then sizes to its own text length, so justify-content:space-between's
   chevron lands at a different absolute position per row (misaligned)
   instead of a consistent one on the right edge.
   "stretch" restores the flexbox default: each li spans the full row,
   and the toggle buttons' width:100% (and so the chevron position)
   becomes consistent across all three — while Home/Our Story's text
   still starts at the left edge regardless, since block-level links are
   left-aligned by default. This fixes both the original centering ask
   and the chevron misalignment without touching the toggle buttons' own
   internal layout at all. */
@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav {
    align-items: stretch;
  }

  /* Belt-and-suspenders: force every top-level item to the same explicit
     width rather than relying on stretch alone, since the Resources item
     was still measuring ~15px wider than the rest even with stretch. */
  .navbar-expand-lg .navbar-nav > .nav-item {
    width: 100%;
  }
}

/* ================================================================
   SOLUTIONS NAV DROPDOWN
   ================================================================ */

/* ── Toggle button ──────────────────────────────────────────── */
/* Matches Bootstrap .nav-link padding/line-height exactly so
   the item sits on the same baseline as the anchor nav links.  */
.nav-solutions-toggle {
  background: none;
  border: none;
  /* Mirror Bootstrap 4 nav-link defaults */
  display: block;
  padding: 0.5rem 1rem;
  line-height: 1.5;
  /* Visual style */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
  vertical-align: middle;
}

.nav-solutions-toggle:hover,
.nav-solutions-toggle.active {
  color: #f79500;
}

.nav-solutions-toggle:focus {
  outline: none;
  box-shadow: none;
}

.nav-solutions-chevron {
  font-size: 10px;
  transition: transform 0.25s ease;
  margin-left: 2px;
  pointer-events: none;
}

.nav-solutions-chevron.rotated {
  transform: rotate(180deg);
}

/* ── Tighter spacing between 992px (desktop nav kicks in) and
   1300px — six nav items (Home, Our Story, Solutions, Use Cases,
   Resources, Sign In) at full desktop spacing no longer comfortably
   fit in that range now that Use Cases has been added. Nothing
   below 992px (mobile menu) or above 1300px (full spacing) is
   affected. ─────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1300px) {
  .mainNav.navbar .nav-item {
    margin-right: 6px;
  }

  .mainNav.navbar .nav-item .nav-link {
    font-size: 13px;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .nav-solutions-toggle {
    font-size: 13px;
    padding: 0.5rem 0.55rem;
  }

  .navbar-action-button {
    margin-left: 8px;
  }

  .navbar-action-button .get-started {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ── Dropdown panel — desktop ───────────────────────────────── */
/* top: 100% — flush with the bottom of the li; no gap so the
   mouse never leaves the hover-zone while travelling down.     */
.nav-solutions-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  /* Centered via margin-left (half of width:900px) rather than
     transform:translateX(-50%) — the navDropIn keyframe below animates
     `transform` for its slide-in effect, and with animation-fill-mode:both
     that keyframe's transform value keeps reasserting itself after the
     animation ends, silently overriding any transform (including an inline
     one set by JS) applied by anything else. Keeping centering off of
     `transform` entirely avoids that fight — see centerMegaDropdown in
     Navbar, which likewise overrides margin-left, not transform. */
  margin-left: -450px;
  width: 900px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
  border: 1px solid #eee;
  z-index: 9999;
  animation: navDropIn 0.18s ease both;
  /* Small top padding acts as visual gap without dead mouse-zone */
  padding-top: 6px;
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.nav-solutions-dropdown--open {
  display: block;
}

/* ── "Which stage are you in?" header ──────────────────────── */
.nav-solutions-header {
  padding: 16px 28px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.nav-solutions-header-text {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.2px;
}

/* ── 4×1 grid: all four stages in one row ───────────────────── */
.nav-solutions-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 4px 0 8px;
}

/* Variant for menus with 2 groups spanning the same full width (e.g. Use Cases: By Role / By Intent) */
.nav-solutions-inner--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Group column */
.nav-solutions-group {
  padding: 18px 18px;
}

/* Vertical divider between every column except the last */
.nav-solutions-group:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.nav-solutions-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #aaa;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav-solutions-group-label i {
  color: #f5a623;
  font-size: 0.7rem;
}

.nav-solutions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Each solution link ─────────────────────────────────────── */
.nav-solutions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s, color 0.15s;
}

.nav-solutions-item:hover {
  background: #fff8ee;
  color: #f5a623;
  text-decoration: none;
}

.nav-solutions-item--active {
  background: #fff3e0;
  color: #f5a623;
  font-weight: 600;
}

/* Icon wrapper — span so flex + background work correctly on
   block-level, not on the bare <i> FontAwesome element.       */
.nav-solutions-item-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: #f0f4ff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #5a6aad;
}

.nav-solutions-item:hover .nav-solutions-item-icon,
.nav-solutions-item--active .nav-solutions-item-icon {
  background: #fff3e0;
  color: #f5a623;
}

/* li positioning anchor — the dropdown panel is absolutely positioned
   relative to this li for vertical placement (top: 100%, right under the
   trigger). Mega menus (Solutions, Use Cases) additionally recenter the
   panel horizontally on the full nav width via JS (see centerMegaDropdown
   in Navbar) since that can't be done with CSS alone without either
   guessing at the nav's padding or losing the correct vertical anchor. */
.nav-item--solutions {
  position: relative;
}

/* ── Resources dropdown — desktop ───────────────────────────── */
/* Narrower single-column sibling of .nav-solutions-dropdown; reuses
   .nav-solutions-list / .nav-solutions-item for consistent item styling. */
.nav-resources-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  /* margin-left, not transform — see .nav-solutions-dropdown for why */
  margin-left: -120px;
  width: 240px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
  border: 1px solid #eee;
  z-index: 9999;
  animation: navDropIn 0.18s ease both;
  padding: 8px;
}

.nav-resources-dropdown--open {
  display: block;
}

/* ── Mobile (≤ 991 px) ──────────────────────────────────────── */
@media (max-width: 991px) {
  .nav-resources-dropdown {
    display: block !important;
    position: static !important;
    width: 100% !important;
    /* Flex/block children default to min-width:auto, letting their own
       content's natural (unwrapped) width push this wider than its
       width:100% — unlike .nav-solutions-dropdown's items, these ("Browse
       Companies" etc.) apparently don't wrap at the available width,
       so this ends up ~15px wider than the other dropdowns/rows without
       this override. */
    min-width: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    box-shadow: none;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-top: 6px;
    padding: 4px;
    animation: none !important;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.22s ease;
  }

  .nav-resources-dropdown--open {
    max-height: 1000px;
    opacity: 1;
  }
}

/* ── Mobile navbar collapse: fix responsive.css's broken margin-top:222px ── */
@media (max-width: 991px) {
  /* responsive.css positions .navbar-collapse absolute with margin-top:222px,
     which pushes the panel far out of place. Re-anchor it flush below the
     navbar brand row using top:100% so it drops straight down full-width. */
  .mainNav .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 16px !important;
    width: 260px !important;
    max-width: calc(100% - 32px) !important;
    margin-top: 8px !important;
    background: #fff;
    padding: 12px 20px 16px !important;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 12px !important;
    z-index: 1000;
  }
}

/* ── Mobile (≤ 991 px) ──────────────────────────────────────── */
@media (max-width: 991px) {
  /* Keep the dropdown in the document flow at all times.
     Hidden via max-height/opacity so it slides in smoothly on click
     instead of jumping (display:none→block is instant). */
  .nav-solutions-dropdown {
    display: block !important;
    position: static !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-top: 6px;
    padding-top: 0;
    animation: none !important;

    /* Smooth expand */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.22s ease;
  }

  .nav-solutions-dropdown--open {
    max-height: 1000px;
    opacity: 1;
  }

  .nav-solutions-header {
    padding: 12px 16px 10px;
  }

  .nav-solutions-header-text {
    font-size: 0.9rem;
  }

  .nav-solutions-inner {
    grid-template-columns: 1fr;
    padding: 8px 0 4px;
  }

  /* Reset desktop right-borders; stack single column with dividers */
  .nav-solutions-group,
  .nav-solutions-group:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 16px;
  }

  .nav-solutions-group:last-child {
    border-bottom: none;
  }

  .nav-solutions-list {
    gap: 0;
    min-width: 0;
  }

  .nav-solutions-item {
    min-width: 0;
    padding: 8px 4px;
    font-size: 0.88rem;
  }

  /* Full-width toggle with chevron pushed right */
  .nav-solutions-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
  }

  /* Even row spacing: responsive.css sets plain nav-links (Home, Our
     Story) to padding:0 here, while .nav-solutions-toggle above (the
     Solutions/Use Cases/Resources triggers) gets padding:8px 0 — that
     16px difference is what made row heights (and so the visual gaps
     between them) uneven despite there being no actual margin between
     any of the items. Match it so every top-level item is the same
     height. */
  .mainNav.navbar .nav-item .nav-link {
    padding: 8px 0;
  }
}

/* ===== Journey section spacing ===== */
.driven-section {
  height: auto !important;
  padding: 20px 0 !important;
}

.main-icon-box {
  margin-top: 30px !important;
}

/* ===== Journey section lottie icons ===== */
.icon-boxA,
.icon-boxB,
.icon-boxD,
.icon-boxE {
  padding: 4px !important;
  overflow: hidden;
}

.icon-boxA canvas,
.icon-boxB canvas,
.icon-boxD canvas,
.icon-boxE canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===== V2 TOOLS SECTION ===== */

.tools-section-v2 {
  padding: 60px 0 60px;
  background: #f0f4ff;
}

.tools-section-v2 .v2-section-heading {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.tools-section-v2 .v2-section-subtitle {
  text-align: center;
  color: #666;
  font-size: 1rem;
  margin-bottom: 36px;
}

/* Tab bar */
.v2-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.v2-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: #aaa;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
}

.v2-tab:hover {
  color: #777;
}

.v2-tab:focus {
  outline: none;
}

.v2-tab.active {
  color: #f5a623;
  border-bottom: 2px solid #f5a623;
  font-weight: bold;
}

.v2-tab-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8e8ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #aaa;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.v2-tab.active .v2-tab-icon {
  background: #fff3e0;
  color: #f5a623;
}

.v2-tab-connector {
  flex: 1;
  height: 1px;
  background: #ddd;
  min-width: 32px;
  max-width: 80px;
}

/* Tab content area */
.v2-tab-content {
  background: #f7f8fc;
  border-radius: 20px;
  padding: 32px 32px 32px;
}

.v2-tab-content-heading {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.v2-tab-content-subtitle {
  text-align: center;
  color: #888;
  font-size: 0.92rem;
  margin-bottom: 28px;
}

/* Tool cards grid */
.v2-tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

.v2-tool-card {
  flex: 0 0 calc(25% - 20px);
  max-width: 260px;
  min-width: 180px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 18px 22px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.v2-tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.v2-tool-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}

.v2-tool-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a2e;
  line-height: 1.3;
}

.v2-tool-card p {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 18px;
  flex: 1;
  line-height: 1.5;
}

.v2-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5ede0;
  color: #1a1a2e;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  margin-top: auto;
}

.v2-explore-btn:hover {
  background: #ede0cc;
  color: #1a1a2e;
  text-decoration: none;
}
/* Plain <a> — keep browser/bootstrap link states from recoloring or underlining it */
.v2-explore-btn:visited,
.v2-explore-btn:focus,
.v2-explore-btn:active {
  color: #1a1a2e;
  text-decoration: none;
}

/* Bottom banner */
.v2-bottom-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: -60px;
  margin-bottom: 60px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.v2-bottom-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.v2-bottom-banner-star {
  width: 46px;
  height: 46px;
  background: #fff8ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f5a623;
  flex-shrink: 0;
}

.v2-bottom-banner h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 3px;
  color: #1a1a2e;
}

.v2-bottom-banner .v2-banner-sub {
  font-size: 0.82rem;
  color: #6b6b6b;
  margin: 0;
}

.v2-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-bottom: 3px solid #f79500;
  border-radius: 8px;
  font-weight: 400;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.v2-view-all-btn:hover {
  background: #f79500;
  border-bottom-color: #000;
  color: #fff;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 991px) {
  .v2-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .v2-tab-connector {
    min-width: 16px;
  }

  .v2-tab {
    padding: 10px 10px;
    font-size: 0.85rem;
  }

  .v2-tab-content {
    padding: 24px 16px 20px;
  }

  /* Row layout gets too cramped (long heading vs the button) well before
     the 575px breakpoint below kicks in — stack earlier. The desktop
     margin-top: -60px (floats the card up over the previous section) leaves
     no breathing room once stacked/taller on mobile, so ease it off here. */
  .v2-bottom-banner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    margin-top: 20px;
  }

  .v2-bottom-banner-left {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .tools-section-v2 .v2-section-heading {
    font-size: 1.45rem;
  }

  .v2-tools-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .v2-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .v2-tab-connector {
    display: none;
  }

  .v2-bottom-banner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .v2-bottom-banner-left {
    flex-direction: column;
    text-align: center;
  }
}


/* ================================================================
   TOOL LANDING PAGE  (tlp-*)
   All styles for /solutions/[slug] pages
   ================================================================ */

/* ── Shared section spacing ──────────────────────────────────── */
.tlp-hero-section,
.tlp-screenshot-section,
.tlp-benefits-section,
.tlp-process-section,
.tlp-outputs-section,
.tlp-journey-section,
.tlp-ecosystem-section,
.tlp-faq-section,
.tlp-final-cta-section {
  padding: 80px 0;
}

.tlp-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
  line-height: 1.25;
}

.tlp-section-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 36px;
  line-height: 1.7;
}

.tlp-light {
  color: #fff !important;
}

.tlp-light.tlp-section-subtitle {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ── SECTION 1 · HERO ────────────────────────────────────────── */
.tlp-hero-section {
  background: linear-gradient(145deg, #eef2ff 0%, #f0f4ff 60%, #e8efff 100%);
  padding-top: 130px;
  text-align: center;
}

.tlp-breadcrumb {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.tlp-breadcrumb a {
  color: #888;
  text-decoration: none;
}

.tlp-breadcrumb a:hover {
  color: #f5a623;
}

.tlp-breadcrumb-sep {
  margin: 0 6px;
  color: #bbb;
}

.tlp-breadcrumb-active {
  color: #1a1a2e;
  font-weight: 500;
}

.tlp-category-badge {
  display: inline-block;
  background: #fff3e0;
  color: #f5a623;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  border: 1px solid #f5a62333;
}

.tlp-hero-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 18px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.tlp-hero-subtitle {
  font-size: 1.05rem;
  color: #555;
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.75;
}

.tlp-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Wraps the inline SurveyChat widget when it replaces .tlp-hero-ctas on the
   Surveys tool page — the hero itself is centered/text-align:center, but the
   widget's own internal content (chat bubbles, inputs) reads left-to-right. */
.tlp-hero-widget {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: left;
}

/* Plain mount animation for elements swapped in/out after initial page load
   (e.g. the Surveys hero's button-row ↔ SurveyChat widget toggle). Unlike
   data-aos — which only reveals elements in response to a scroll/resize event
   checked against the DOM as it existed at AOS's initial scan — this plays
   immediately whenever the element mounts, regardless of scroll position or
   device, since a click-triggered swap is not a scroll event. */
@keyframes tlp-fade-up-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tlp-fade-up-in {
  animation: tlp-fade-up-in 0.5s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .tlp-fade-up-in { animation: none; }
}

.tlp-cta-primary {
  padding: 14px 32px !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

.tlp-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1a1a2e;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}

.tlp-cta-secondary:hover {
  color: #f5a623;
  text-decoration: none;
}

.tlp-play-icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  color: #1a1a2e;
  flex-shrink: 0;
}

.tlp-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-bottom: 10px;
}

.tlp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: #555;
  font-weight: 500;
}

.tlp-trust-check {
  color: #f5a623;
  font-size: 0.78rem;
}

/* ── SECTION 2 · SCREENSHOT ──────────────────────────────────── */
.tlp-screenshot-section {
  background: #fff;
  padding: 40px 0 80px;
}

.tlp-screenshot-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  background: #12172b;
  max-width: 900px;
  margin: 0 auto;
}

/* When a Storylane/iframe embed is active, remove clipping so the iframe border-radius shows */
.tlp-screenshot-wrapper--embed {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

/* Storylane responsive aspect-ratio wrapper (47.5% ≈ the demo's native ratio) */
.tlp-storylane-embed {
  position: relative;
  padding-bottom: calc(47.50% + 25px);
  width: 100%;
  height: 0;
}

.tlp-demo-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid rgba(63, 95, 172, 0.35);
  box-shadow: 0 0 18px rgba(26, 19, 72, 0.15);
  border-radius: 10px;
  box-sizing: border-box;
}

.tlp-screenshot-img {
  width: 100%;
  display: block;
}

/* Click-to-play video thumbnail shown in the demo section when config.videoUrl is set */
.tlp-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #000;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.tlp-video-thumb-img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.tlp-video-thumb:hover .tlp-video-thumb-img {
  transform: scale(1.03);
  filter: brightness(0.75);
}

.tlp-video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.94);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}

.tlp-video-thumb-play i {
  margin-left: 4px; /* optically center the play glyph inside the circle */
}

.tlp-video-thumb:hover .tlp-video-thumb-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #f5a623;
}

@media (max-width: 576px) {
  .tlp-video-thumb-play {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }
}

/* Video modal — opt-in per solution page via config.videoUrl */
.tlp-video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 24, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1200;
}

.tlp-video-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
}

.tlp-video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #1a1a2e;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: color 0.2s, transform 0.2s;
}

.tlp-video-modal-close:hover {
  color: #f5a623;
  transform: scale(1.06);
}

.tlp-video-modal-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.tlp-video-modal-frame-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder mockup when no screenshot supplied */
.tlp-screenshot-placeholder {
  padding: 28px;
}

.tlp-screenshot-placeholder-inner {
  background: #1e2640;
  border-radius: 12px;
  overflow: hidden;
}

.tlp-placeholder-topbar {
  background: #2a3154;
  padding: 10px 16px;
  display: flex;
  gap: 7px;
  align-items: center;
}

.tlp-placeholder-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-block;
}

.tlp-placeholder-body {
  display: flex;
  min-height: 240px;
  gap: 0;
}

.tlp-placeholder-sidebar {
  width: 140px;
  flex-shrink: 0;
  background: #172040;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tlp-ph-block {
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.tlp-ph-block--sm {
  width: 60%;
  background: rgba(245, 166, 35, 0.3);
}

.tlp-placeholder-main {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tlp-ph-row {
  display: flex;
  gap: 14px;
}

.tlp-ph-card {
  flex: 1;
  height: 70px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tlp-ph-chart {
  flex: 1;
  height: 100px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.tlp-ph-chart::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(245, 166, 35, 0.15));
}

/* ── SECTION 3 · BENEFITS ────────────────────────────────────── */
.tlp-benefits-section {
  background: #fff;
}

.tlp-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}

.tlp-benefit-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.tlp-benefit-icon {
  width: 44px;
  height: 44px;
  background: #fff3e0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5a623;
  font-size: 1rem;
  flex-shrink: 0;
}

.tlp-benefit-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 5px;
}

.tlp-benefit-desc {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Benefits right visual */
.tlp-benefits-visual {
  padding: 20px;
}

.tlp-bv-card {
  background: #f7f8fc;
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid #eee;
}

.tlp-bv-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-weight: 600;
  color: #1a1a2e;
  font-size: 0.95rem;
}

.tlp-bv-icon {
  color: #f5a623;
  font-size: 1.1rem;
}

.tlp-bv-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.tlp-bv-bar {
  height: 28px;
  background: linear-gradient(90deg, #f5a623, #f5a62388);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  animation: tlpBarGrow 1s ease both;
}

@keyframes tlpBarGrow {
  from { width: 0 !important; opacity: 0; }
  to { opacity: 1; }
}

.tlp-bv-bar span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.tlp-bv-caption {
  font-size: 0.82rem;
  color: #888;
  text-align: center;
  margin: 0;
}

/* Reserve-access variant of the benefits visual (prelaunch) */
.tlp-reserve-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.tlp-reserve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
}

.tlp-reserve-head strong {
  font-size: 1.4rem;
  color: #f5a623;
}

.tlp-reserve-box p {
  font-size: 0.85rem;
  color: #666;
  margin: 6px 0 14px;
}

.tlp-reserve-form {
  display: flex;
  gap: 10px;
}

.tlp-reserve-form span {
  flex: 1;
  background: #f7f8fc;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #aaa;
}

.tlp-reserve-form em {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
  background: #f5a623;
  border-radius: 8px;
  padding: 10px 16px;
  white-space: nowrap;
}

.tlp-reserve-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.tlp-reserve-compare > div {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
}

.tlp-reserve-compare small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 4px;
}

.tlp-reserve-compare span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #888;
}

.tlp-reserve-compare .tlp-reserve-compare--strong {
  background: #fff3e0;
  border-color: #f5a62355;
}

.tlp-reserve-compare--strong small {
  color: #f5a623;
}

.tlp-reserve-compare--strong span {
  color: #1a1a2e;
}

/* Research-snapshot variant of the benefits visual (market research).
   .tlp-research-box / -idea / -gap are also reused by the survey variant. */
.tlp-research-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.tlp-research-idea {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 10px;
}

.tlp-research-idea small,
.tlp-research-gap small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 2px;
}

.tlp-research-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 0.85rem;
  color: #555;
}

.tlp-research-row em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  color: #c0392b;
  background: #fdecea;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.tlp-research-gap {
  background: #fff3e0;
  border: 1px solid #f5a62355;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.tlp-research-gap small {
  color: #f5a623;
}

.tlp-research-gap span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
}

/* Modules variant (AI analytics): 2×2 module tiles wired to a central AI hub */
.tlp-modules {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 20px;
}

.tlp-modules-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tlp-modules-lines path {
  fill: none;
  stroke: #f5a623;
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tlp-module {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
}

.tlp-module span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 4px;
}

.tlp-module span i {
  color: #f5a623;
  margin-right: 4px;
}

.tlp-module p {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.tlp-modules-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1a2e;
  color: #f5a623;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px #f7f8fc;
}

/* Kanban variant (AI funnel): mini board with stage markers on each lead */
.tlp-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.tlp-kanban-col {
  background: #eef0f6;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tlp-kanban-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1a2e;
  padding: 2px 2px 4px;
}

.tlp-kanban-list em {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f5a623;
  background: #fff3e0;
  border-radius: 999px;
  padding: 1px 6px;
}

.tlp-kanban-lead {
  background: #fff;
  border: 1px solid #eee;
  border-left: 3px solid #d6dae6;
  border-radius: 8px;
  padding: 6px 8px;
}

.tlp-kanban-lead b {
  display: block;
  font-size: 0.75rem;
  color: #1a1a2e;
}

.tlp-kanban-lead small {
  font-size: 0.65rem;
  color: #888;
}

.tlp-kanban-lead--alert {
  border-left-color: #c0392b;
}

.tlp-kanban-lead--alert small {
  color: #c0392b;
  font-weight: 600;
}

.tlp-kanban-lead--won {
  border-left-color: #2e9e5b;
}

.tlp-kanban-lead--won small {
  color: #2e9e5b;
  font-weight: 600;
}

/* Campaign variant: one post scheduled across channels */
.tlp-campaign-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  padding-top: 10px;
  margin-bottom: 8px;
  border-top: 1px solid #f0f0f0;
}

.tlp-campaign-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tlp-campaign-channels div {
  background: #f7f8fc;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
}

.tlp-campaign-channels i {
  display: block;
  font-size: 1.1rem;
  color: #1a1a2e;
  margin-bottom: 4px;
}

/* Official brand colours — shared by the campaign and calendar visuals */
.tlp-bv-card .tlp-brand-linkedin { color: #0a66c2; }
.tlp-bv-card .tlp-brand-x { color: #000; }
.tlp-bv-card .tlp-brand-facebook { color: #1877f2; }

.tlp-bv-card .tlp-brand-instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af 75%, #515bd4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tlp-campaign-channels small {
  font-size: 0.68rem;
  font-weight: 600;
  color: #888;
}

/* Calendar variant (social media automation): a week of queued posts */
.tlp-cal-status {
  margin-left: auto;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2e9e5b;
  background: #e8f6ee;
  border-radius: 999px;
  padding: 3px 10px;
}

.tlp-cal-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2e9e5b;
  margin-right: 6px;
  vertical-align: middle;
}

.tlp-cal-label {
  border-top: 0;
  padding-top: 0;
}

.tlp-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.tlp-cal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #f7f8fc;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px 2px;
  min-height: 84px;
}

.tlp-cal small {
  font-size: 0.68rem;
  font-weight: 600;
  color: #888;
}

.tlp-cal i {
  font-size: 1rem;
}

/* Listing variant (startup directory): sample profile card with stats.
   .tlp-listing-tags / -stats are also reused by the press variant. */
.tlp-listing-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tlp-listing-logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1a1a2e;
  color: #f5a623;
  font-weight: 800;
}

.tlp-listing-head b {
  display: block;
  font-size: 0.95rem;
  color: #1a1a2e;
}

.tlp-listing-head small {
  font-size: 0.8rem;
  color: #888;
}

.tlp-listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.tlp-listing-tags em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  color: #555;
  background: #f7f8fc;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: 2px 10px;
}

.tlp-listing-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.tlp-listing-stats b {
  display: block;
  font-size: 1.1rem;
  color: #1a1a2e;
}

.tlp-listing-stats b i {
  color: #2e9e5b;
}

.tlp-listing-stats small {
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
}

/* Applicants variant (startup recruiting): ranked applicants with fit labels */
.tlp-applicant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 0.85rem;
}

.tlp-applicant-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f7f8fc;
  border: 1px solid #eee;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1a2e;
}

.tlp-applicant b {
  flex: 1;
  color: #1a1a2e;
}

.tlp-applicant strong {
  font-size: 1rem;
  color: #1a1a2e;
}

.tlp-fit {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.tlp-fit--strong { color: #2e9e5b; background: #e8f6ee; }
.tlp-fit--possible { color: #b56f00; background: #fff3e0; }
.tlp-fit--weak { color: #888; background: #f2f2f5; }

/* Survey-results variant: answer rows with a thin share bar */
.tlp-survey-option {
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.tlp-survey-option div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 6px;
}

.tlp-survey-option b {
  color: #1a1a2e;
}

.tlp-survey-option i {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f5a623, #f5a62388);
}

/* ── SECTION 4 · PROCESS ─────────────────────────────────────── */
.tlp-process-section {
  background: #fafbff;
}

.tlp-process-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 48px;
  position: relative;
}

.tlp-process-step {
  flex: 1;
  max-width: 220px;
  text-align: center;
  position: relative;
  padding: 0 12px;
}

.tlp-process-connector {
  position: absolute;
  top: 28px;
  left: calc(-50% + 28px);
  right: calc(50% + 28px);
  height: 2px;
  background: #e0e4f0;
}

.tlp-process-step:first-child .tlp-process-connector {
  display: none;
}

.tlp-process-circle {
  width: 56px;
  height: 56px;
  background: #1a1a2e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(26, 26, 46, 0.2);
  transition: background 0.3s, transform 0.3s;
}

.tlp-process-step:hover .tlp-process-circle {
  background: #f5a623;
  transform: translateY(-4px);
}

.tlp-process-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.tlp-process-step-desc {
  font-size: 0.82rem;
  color: #777;
  line-height: 1.6;
  margin: 0;
}

/* ── SECTION 5 · OUTPUTS ─────────────────────────────────────── */
.tlp-outputs-section {
  background: #12172b;
  text-align: center;
}

.tlp-outputs-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.tlp-output-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 24px;
  flex: 0 0 calc(50% - 24px);
  max-width: 380px;
  min-width: 260px;
  text-align: left;
}

.tlp-output-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tlp-output-icon {
  font-size: 1.1rem;
  color: #f5a623;
}

.tlp-output-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.tlp-output-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
  line-height: 1.5;
}

.tlp-output-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tlp-ob {
  height: 8px;
  background: rgba(245, 166, 35, 0.35);
  border-radius: 4px;
}

.tlp-download-btn-wrap {
  margin-top: 8px;
}

.tlp-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f5a623;
  color: #fff;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.tlp-download-btn:hover {
  background: #e09515;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* Prompt + button pairs ("Recruiter? Post a free job | Looking for a job? Browse Jobs") */
.tlp-example-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
}

.tlp-example-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tlp-example-prompt {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}

.tlp-download-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(245, 166, 35, 0.8);
  color: #f5a623;
}

.tlp-download-btn--ghost:hover {
  background: rgba(245, 166, 35, 0.12);
  color: #f5a623;
}

@media (max-width: 575.98px) {
  .tlp-example-link {
    flex-direction: column;
    gap: 8px;
  }
}

.tlp-download-dropdown {
  position: relative;
  display: inline-block;
}

.tlp-download-dropdown .tlp-download-btn {
  border: none;
  cursor: pointer;
}

.tlp-download-caret {
  font-size: 0.75rem;
  margin-left: 2px;
  transition: transform 0.2s;
}

.tlp-download-caret--open {
  transform: rotate(180deg);
}

.tlp-download-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 20, 40, 0.18);
  padding: 6px;
  z-index: 20;
}

.tlp-download-menu-item {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #1a1a2e;
  text-decoration: none;
  transition: background 0.15s;
}

.tlp-download-menu-item:hover {
  background: rgba(245, 166, 35, 0.12);
  color: #1a1a2e;
  text-decoration: none;
}

/* ── SECTION 6 · JOURNEY ─────────────────────────────────────── */
.tlp-journey-section {
  background: #fff;
}

.tlp-journey-tabs {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 36px;
  position: relative;
}

.tlp-journey-tab {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 10px;
}

.tlp-journey-connector {
  position: absolute;
  top: 22px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: #e0e4f0;
}

.tlp-journey-tab-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f0f4ff;
  color: #999;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border: 2px solid #e0e4f0;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.tlp-journey-tab--active .tlp-journey-tab-num {
  background: #1a1a2e;
  color: #f5a623;
  border-color: #1a1a2e;
  box-shadow: 0 4px 14px rgba(26, 26, 46, 0.25);
}

.tlp-journey-tab-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tlp-journey-tab-icon {
  font-size: 0.95rem;
  color: #aaa;
}

.tlp-journey-tab--active .tlp-journey-tab-icon {
  color: #f5a623;
}

.tlp-journey-tab-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #aaa;
}

.tlp-journey-tab--active .tlp-journey-tab-label {
  color: #1a1a2e;
}

.tlp-journey-active-note {
  text-align: center;
  margin-top: 28px;
  font-size: 1.05rem;
  font-style: italic;
  color: #3a3a52;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.tlp-journey-active-note i {
  color: #f5a623;
  font-size: 0.85rem;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .tlp-journey-active-note {
    font-size: 0.92rem;
  }
}

/* ── SECTION 7 · ECOSYSTEM ───────────────────────────────────── */
.tlp-ecosystem-section {
  background: #f0f4ff;
}

.tlp-ecosystem-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.tlp-explore-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1a1a2e;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 6px;
  transition: color 0.2s;
}

.tlp-explore-all:hover {
  color: #f5a623;
  text-decoration: none;
}

.tlp-ecosystem-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  padding: 28px 22px;
  text-decoration: none;
  margin-bottom: 24px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  height: calc(100% - 24px);
}

.tlp-ecosystem-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.tlp-ec-icon-wrap {
  width: 48px;
  height: 48px;
  background: #fff3e0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5a623;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.tlp-ec-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.tlp-ec-desc {
  font-size: 0.85rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}

.tlp-ec-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #f5a623;
  margin-top: auto;
}

/* ── SECTION 8 · FAQ ─────────────────────────────────────────── */
.tlp-faq-section {
  background: #fff;
}

.tlp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e8eaf0;
  border-radius: 16px;
  overflow: hidden;
}

.tlp-faq-item {
  border-bottom: 1px solid #e8eaf0;
}

.tlp-faq-item:last-child {
  border-bottom: none;
}

.tlp-faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
  transition: background 0.2s;
}

.tlp-faq-toggle:focus {
  outline: none;
}

.tlp-faq-toggle:hover {
  background: #fafbff;
}

.tlp-faq-toggle i {
  color: #f5a623;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.tlp-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.tlp-faq-item--open .tlp-faq-answer {
  max-height: 400px;
  padding-bottom: 20px;
}

.tlp-faq-answer p {
  padding: 0 24px;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* ── SECTION 9 · FINAL CTA ───────────────────────────────────── */
.tlp-final-cta-section {
  background: #12172b;
  text-align: center;
}

.tlp-final-cta-inner {
  max-width: 620px;
  margin: 0 auto;
}

.tlp-final-cta-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}

.tlp-final-cta-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 32px;
  line-height: 1.7;
}

.tlp-final-cta-btn {
  padding: 15px 40px !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
  margin-bottom: 16px;
}

.tlp-final-cta-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  .tlp-hero-title {
    font-size: 2rem;
  }

  .tlp-process-steps {
    flex-wrap: wrap;
    gap: 32px;
  }

  .tlp-process-step {
    flex: 0 0 calc(50% - 16px);
    max-width: none;
  }

  .tlp-process-connector {
    display: none;
  }

  .tlp-output-card {
    flex: 0 0 calc(100% - 0px);
    max-width: 500px;
  }

  .tlp-journey-tab-label {
    font-size: 0.75rem;
  }

  .tlp-ecosystem-header {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .tlp-hero-section {
    padding-top: 110px;
  }

  .tlp-hero-title {
    font-size: 1.65rem;
  }

  .tlp-section-title {
    font-size: 1.5rem;
  }

  .tlp-hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .tlp-trust-row {
    gap: 10px 18px;
  }

  .tlp-process-steps {
    flex-direction: column;
    align-items: center;
  }

  .tlp-process-step {
    flex: none;
    width: 100%;
    max-width: 320px;
  }

  .tlp-benefits-visual {
    margin-top: 32px;
  }

  .tlp-journey-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }

  .tlp-journey-tab {
    flex: 0 0 calc(50% - 8px);
    max-width: none;
  }

  .tlp-journey-connector {
    display: none;
  }

  .tlp-final-cta-title {
    font-size: 1.65rem;
  }

  .tlp-placeholder-sidebar {
    display: none;
  }
}


/* ================================================================
   HERO CHAT  (hc-*)
   v0-style dark prompt card → chat follow-ups
   ================================================================ */

/* shared spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-5px); }
}

/* card wrapper — light, compact by default, expands in chat */
.hc-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8eaf0;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  transition: box-shadow 0.3s;
}

/* Homepage Research tab: same width as the other tabs' tool cards (3 × ~320px + gaps), so the chat
   sits within the Research → Launch tab row instead of spanning the whole panel */
.v2-tab-content .hc-card {
  max-width: 1010px;
  margin: 0 auto;
}

.hc-card:focus-within {
  box-shadow: 0 4px 24px rgba(247,149,0,0.12);
  border-color: rgba(247,149,0,0.3);
}

/* ── OVERLAY PHASE ─────────────────────────────────────────── */

.hc-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  min-height: 260px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  text-align: center;
}

.hc-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

.hc-overlay-icon {
  width: 52px;
  height: 52px;
  background: #fff8ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f79500;
  margin-bottom: 4px;
  border: 1.5px solid #ffe4a0;
}

.hc-overlay-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
}

.hc-overlay-sub {
  font-size: 0.82rem;
  color: #6b6b6b;
  margin: 0;
  line-height: 1.55;
}

.hc-start-btn {
  margin-top: 6px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-bottom: 2.5px solid #f79500;
  border-radius: 10px;
  padding: 11px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.18s, transform 0.15s;
}

.hc-start-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.hc-overlay-hint {
  font-size: 0.72rem;
  color: #6b6b6b;
  margin: 0;
  margin-top: 2px;
}

/* ── returning visitor: saved report found ──────────────────
   Two-column layout, seamed into a single card: left side lists
   what the saved report covers (fills the empty space a lone
   centered card left behind), right side is the warm tinted CTA.
   Stays within the site's light/white + navy/orange palette. ── */

.hc-returning-split {
  display: flex;
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f1e4c9;
  box-shadow: 0 10px 26px rgba(247,149,0,0.14);
  text-align: left;
}

.hc-returning-list {
  flex: 1 1 50%;
  background: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hc-returning-list-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b0a68f;
  margin-bottom: 16px;
}

.hc-returning-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hc-returning-items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #33333f;
}

.hc-returning-items li i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff3e0;
  color: #f79500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.hc-overlay-returning {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1 1 50%;
  padding: 32px 26px;
  background: linear-gradient(160deg, #fffaf2 0%, #ffedd1 100%);
  border-left: 1px solid #f1e4c9;
  position: relative;
}

.hc-overlay-returning-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b35f00;
  background: rgba(247,149,0,0.12);
  border: 1px solid rgba(247,149,0,0.3);
  padding: 4px 11px;
  border-radius: 20px;
}

.hc-overlay-returning-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f79500, #ffb648);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
  margin: 4px 0 2px;
  animation: hc-pulse-ring 2.4s ease-out infinite;
}

@keyframes hc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(247,149,0,0.35); }
  70%  { box-shadow: 0 0 0 11px rgba(247,149,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(247,149,0,0); }
}

.hc-overlay-returning-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
}

.hc-overlay-returning-sub {
  font-size: 0.83rem;
  color: #8a7a63;
  margin: 0;
  line-height: 1.55;
}

.hc-view-report-btn {
  margin-top: 8px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-bottom: 2.5px solid #f79500;
  border-radius: 10px;
  padding: 11px 30px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(26,26,46,0.18);
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.15s;
  text-decoration: none; /* rendered as <a> */
}
.hc-view-report-btn:hover, .hc-view-report-btn:focus { color: #fff; text-decoration: none; }

.hc-view-report-btn i { transition: transform 0.15s; }
.hc-view-report-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,26,46,0.24); }
.hc-view-report-btn:hover i { transform: translateX(3px); }

.hc-overlay-returning-hint {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #b3a98f;
  font-family: inherit;
  transition: color 0.15s;
}

.hc-overlay-returning-hint:hover { color: #8a7a63; }

/* ── (prompt phase removed — kept for legacy) ──────────────── */
.hc-prompt-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hc-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3f4f6;
  border: none;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.18s, color 0.18s;
}

.hc-icon-btn:hover { background: #fff3d6; color: #f79500; }
.hc-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Custom tooltip (replaces the native title="" attribute, which has a
   browser-imposed hover delay) — appears immediately, matches the app's
   existing tf-avatar-tooltip pattern (surveys/[slug]/page.tsx). */
.hc-tooltip-wrap { position: relative; display: inline-flex; }
.hc-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  width: 220px;
  background: #26262b;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 20;
}
.hc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #26262b;
}
.hc-tooltip-wrap:hover .hc-tooltip { opacity: 1; visibility: visible; }

.hc-file-label {
  font-size: 0.7rem;
  color: #aaa;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-upload-hint {
  font-size: 0.72rem;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* send button */
.hc-send-btn {
  width: 34px;
  height: 34px;
  background: #1a1a2e;
  border: none;
  border-radius: 9px;
  border-bottom: 2px solid #f79500;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.hc-send-btn:disabled { opacity: 0.3; cursor: default; }
.hc-send-btn:not(:disabled):hover { opacity: 0.85; transform: scale(1.06); }
.hc-send-btn--sm { width: 32px; height: 32px; font-size: 0.78rem; border-radius: 8px; }

/* mini spinner */
.hc-mini-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #e5e7eb;
  border-top-color: #f79500;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── CHAT PHASE (expanded) ─────────────────────────────────── */

.hc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.hc-chat-header-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f79500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hc-reset-btn {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s;
}

.hc-reset-btn:hover { color: #888; }

/* AI-processing notice — sits outside .hc-messages so it never scrolls away */
.hc-ai-notice {
  margin: 0;
  padding: 8px 16px 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9ca3af;
  text-align: center;
}
.hc-ai-notice a { color: inherit; text-decoration: underline; }
.hc-ai-notice a:hover { color: #6b7280; }

/* email-step notice — continues the grey input band, left edge lined up with
   the input field (12px bar padding + 30px attach button + 7px gap) */
.hc-email-notice {
  margin: 0;
  padding: 0 12px 10px 49px;
  background: #fafafa;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9ca3af;
}

/* message area */
.hc-messages {
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scroll-behavior: smooth;
  height: 280px;
}

/* message rows (avatar + name + bubble) */
.hc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.hc-msg-row--ai { justify-content: flex-start; }
.hc-msg-row--user { justify-content: flex-end; }

.hc-msg-col {
  display: flex;
  flex-direction: column;
  max-width: 84%;
}

.hc-msg-row--user .hc-msg-col { align-items: flex-end; }

.hc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  overflow: hidden;
}

.hc-avatar--ai { background: #1a1a2e; }
.hc-avatar--user { background: #e5e7eb; color: #888; }

.hc-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* small grey help text under a bubble (e.g. "check your spam folder") */
.hc-msg-hint {
  font-size: 0.7rem;
  color: #9ca3af;
  margin: 4px 0 0 4px;
  line-height: 1.4;
}

.hc-msg-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px 2px;
}

/* bubbles */
.hc-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 0.865rem;
  line-height: 1.55;
  animation: bubble-in 0.22s ease;
  word-break: break-word;
}

/* nested inside .hc-msg-col, which already caps width — don't double-constrain */
.hc-msg-col .hc-bubble { max-width: 100%; }

.hc-bubble--ai {
  background: #f3f4f6;
  color: #1a1a2e;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.hc-bubble--user {
  background: #f79500;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

/* typing dots */
.hc-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}

.hc-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bbb;
  animation: typing-bounce 1.1s infinite;
}

.hc-typing span:nth-child(2) { animation-delay: 0.18s; }
.hc-typing span:nth-child(3) { animation-delay: 0.36s; }

/* generating pill */
.hc-generating {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: #f3f4f6;
  border-radius: 13px;
  border-bottom-left-radius: 3px;
  padding: 9px 13px;
  font-size: 0.8rem;
  color: #666;
  animation: bubble-in 0.22s ease;
}

/* stage chips */
.hc-chips {
  display: flex;
  gap: 7px;
  padding: 2px 16px 12px;
  flex-wrap: wrap;
}

.hc-chip {
  background: #fff8ee;
  border: 1.5px solid #f79500;
  color: #1a1a2e;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.hc-chip:hover { background: #f79500; color: #fff; }

/* marketing opt-in: both options identical width, no pre-selection */
.hc-chips--optin { flex-wrap: nowrap; padding: 0; flex-shrink: 0; } /* sits inside .hc-messages, which has its own padding */
.hc-chips--optin .hc-chip { flex: 1 1 0; min-width: 0; }

/* input bar */
.hc-input-bar {
  display: flex;
  gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid #f3f4f6;
  align-items: center;
  background: #fafafa;
}

.hc-input {
  flex: 1;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 0.865rem;
  color: #1a1a2e;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.hc-input::placeholder { color: #bbb; }
.hc-input:focus { border-color: #f79500; }

.hc-skip-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #bbb;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s;
}

.hc-skip-btn:hover { border-color: #aaa; color: #666; }

/* OTP entry (chat question 7) */
.hc-input--otp {
  text-align: center;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.hc-otp-actions {
  display: flex;
  gap: 8px;
  padding: 2px 12px 12px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hc-card { border-radius: 12px; }
  .hc-bubble { max-width: 92%; font-size: 0.82rem; }
  .hc-msg-col { max-width: 88%; }
  .hc-avatar { width: 22px; height: 22px; font-size: 10px; }
  .hc-messages { height: 240px; }
  .hc-prompt-textarea { min-height: 60px; }
  .hc-returning-split { flex-direction: column; }
  .hc-overlay-returning { border-left: none; border-top: 1px solid #f1e4c9; }
}


/* ================================================================
   SURVEY BUILDER CHAT WIDGET  (svc-*)
   Standalone widget for src/components/landing/SurveyChat.tsx.
   Deliberately a full duplicate of the hc-* (HeroChat) styling under
   its own class names — kept independent so the two widgets can
   diverge later without one edit risking the other.
   ================================================================ */

.svc-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8eaf0;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  transition: box-shadow 0.3s;
}

.svc-card:focus-within {
  box-shadow: 0 4px 24px rgba(247,149,0,0.12);
  border-color: rgba(247,149,0,0.3);
}

/* ── OVERLAY PHASE ─────────────────────────────────────────── */

.svc-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  min-height: 260px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  text-align: center;
}

.svc-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

.svc-overlay-icon {
  width: 52px;
  height: 52px;
  background: #fff8ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f79500;
  margin-bottom: 4px;
  border: 1.5px solid #ffe4a0;
}

.svc-overlay-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
}

.svc-overlay-sub {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
  line-height: 1.55;
}

.svc-start-btn {
  margin-top: 6px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-bottom: 2.5px solid #f79500;
  border-radius: 10px;
  padding: 11px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.18s, transform 0.15s;
}

.svc-start-btn:hover { opacity: 0.88; transform: translateY(-1px); }

.svc-overlay-hint {
  font-size: 0.72rem;
  color: #bbb;
  margin: 0;
  margin-top: 2px;
}

/* ── returning visitor: saved survey found ──────────────────── */

.svc-returning-split {
  display: flex;
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #f1e4c9;
  box-shadow: 0 10px 26px rgba(247,149,0,0.14);
  text-align: left;
}

.svc-returning-list {
  flex: 1 1 50%;
  background: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svc-returning-list-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b0a68f;
  margin-bottom: 16px;
}

.svc-returning-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.svc-returning-items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #33333f;
}

.svc-returning-items li i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff3e0;
  color: #f79500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.svc-overlay-returning {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1 1 50%;
  padding: 32px 26px;
  background: linear-gradient(160deg, #fffaf2 0%, #ffedd1 100%);
  border-left: 1px solid #f1e4c9;
  position: relative;
}

.svc-overlay-returning-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b35f00;
  background: rgba(247,149,0,0.12);
  border: 1px solid rgba(247,149,0,0.3);
  padding: 4px 11px;
  border-radius: 20px;
}

.svc-overlay-returning-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f79500, #ffb648);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
  margin: 4px 0 2px;
  animation: svc-pulse-ring 2.4s ease-out infinite;
}

@keyframes svc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(247,149,0,0.35); }
  70%  { box-shadow: 0 0 0 11px rgba(247,149,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(247,149,0,0); }
}

.svc-overlay-returning-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
}

.svc-overlay-returning-sub {
  font-size: 0.83rem;
  color: #8a7a63;
  margin: 0;
  line-height: 1.55;
}

/* This is an <a> (opens the survey in a new tab), not a <button> — the
   text-decoration/color rules below override the browser's default link
   styling (underline, visited-purple) at every pseudo-class state. */
.svc-view-survey-btn,
.svc-view-survey-btn:link,
.svc-view-survey-btn:visited,
.svc-view-survey-btn:hover,
.svc-view-survey-btn:active {
  margin-top: 8px;
  background: #1a1a2e;
  color: #fff;
  text-decoration: none;
  border: none;
  border-bottom: 2.5px solid #f79500;
  border-radius: 10px;
  padding: 11px 30px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(26,26,46,0.18);
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.15s;
}

.svc-view-survey-btn i { transition: transform 0.15s; }
.svc-view-survey-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,26,46,0.24); }
.svc-view-survey-btn:hover i { transform: translateX(3px); }

.svc-overlay-returning-hint {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #b3a98f;
  font-family: inherit;
  transition: color 0.15s;
}

.svc-overlay-returning-hint:hover { color: #8a7a63; }

.svc-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3f4f6;
  border: none;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.18s, color 0.18s;
}

.svc-icon-btn:hover { background: #fff3d6; color: #f79500; }
.svc-icon-btn:disabled { opacity: 0.4; cursor: default; }

/* Custom tooltip (replaces the native title="" attribute, which has a
   browser-imposed hover delay) — appears immediately, matches the app's
   existing tf-avatar-tooltip pattern (surveys/[slug]/page.tsx). */
.svc-tooltip-wrap { position: relative; display: inline-flex; }
.svc-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  width: 220px;
  background: #26262b;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 20;
}
.svc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #26262b;
}
.svc-tooltip-wrap:hover .svc-tooltip { opacity: 1; visibility: visible; }

.svc-file-label {
  font-size: 0.7rem;
  color: #aaa;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* send button */
.svc-send-btn {
  width: 34px;
  height: 34px;
  background: #1a1a2e;
  border: none;
  border-radius: 9px;
  border-bottom: 2px solid #f79500;
  color: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.svc-send-btn:disabled { opacity: 0.3; cursor: default; }
.svc-send-btn:not(:disabled):hover { opacity: 0.85; transform: scale(1.06); }
.svc-send-btn--sm { width: 32px; height: 32px; font-size: 0.78rem; border-radius: 8px; }

/* mini spinner — reuses the global `spin` keyframe already defined above for hc-mini-spin */
.svc-mini-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #e5e7eb;
  border-top-color: #f79500;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── CHAT PHASE (expanded) ─────────────────────────────────── */

.svc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.svc-chat-header-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f79500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.svc-reset-btn {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s;
}

.svc-reset-btn:hover { color: #888; }

/* AI-processing notice — sits outside .svc-messages so it never scrolls away */
.svc-ai-notice {
  margin: 0;
  padding: 8px 16px 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9ca3af;
  text-align: center;
}
.svc-ai-notice a { color: inherit; text-decoration: underline; }
.svc-ai-notice a:hover { color: #6b7280; }

/* email-step notice — continues the grey input band, left edge lined up with
   the input field (12px bar padding + 30px attach button + 7px gap) */
.svc-email-notice {
  margin: 0;
  padding: 0 12px 10px 49px;
  background: #fafafa;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9ca3af;
}

/* message area */
.svc-messages {
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scroll-behavior: smooth;
  height: 200px;
}

.svc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.svc-msg-row--ai { justify-content: flex-start; }
.svc-msg-row--user { justify-content: flex-end; }

.svc-msg-col {
  display: flex;
  flex-direction: column;
  max-width: 84%;
}

.svc-msg-row--user .svc-msg-col { align-items: flex-end; }

/* small grey help text under a bubble (e.g. "check your spam folder") */
.svc-msg-hint {
  font-size: 0.7rem;
  color: #9ca3af;
  margin: 4px 0 0 4px;
  line-height: 1.4;
}

.svc-msg-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px 2px;
}

/* bubbles */
.svc-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 0.865rem;
  line-height: 1.55;
  animation: bubble-in 0.22s ease;
  word-break: break-word;
}

.svc-msg-col .svc-bubble { max-width: 100%; }

.svc-bubble--ai {
  background: #f3f4f6;
  color: #1a1a2e;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.svc-bubble--user {
  background: #f79500;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

/* typing dots — reuses the global `typing-bounce` keyframe */
.svc-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}

.svc-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bbb;
  animation: typing-bounce 1.1s infinite;
}

.svc-typing span:nth-child(2) { animation-delay: 0.18s; }
.svc-typing span:nth-child(3) { animation-delay: 0.36s; }

/* generating pill */
.svc-generating {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: #f3f4f6;
  border-radius: 13px;
  border-bottom-left-radius: 3px;
  padding: 9px 13px;
  font-size: 0.8rem;
  color: #666;
  animation: bubble-in 0.22s ease;
}

/* chip choices (goal / depth steps) */
.svc-chips {
  display: flex;
  gap: 7px;
  padding: 2px 16px 12px;
  flex-wrap: wrap;
}

.svc-chip {
  background: #fff8ee;
  border: 1.5px solid #f79500;
  color: #1a1a2e;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.svc-chip:hover { background: #f79500; color: #fff; }

/* marketing opt-in: both options identical width, no pre-selection */
.svc-chips--optin { flex-wrap: nowrap; padding: 0; flex-shrink: 0; } /* sits inside .svc-messages, which has its own padding */
.svc-chips--optin .svc-chip { flex: 1 1 0; min-width: 0; }

/* input bar */
.svc-input-bar {
  display: flex;
  gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid #f3f4f6;
  align-items: center;
  background: #fafafa;
}

.svc-input {
  flex: 1;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 0.865rem;
  color: #1a1a2e;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.svc-input::placeholder { color: #bbb; }
.svc-input:focus { border-color: #f79500; }

.svc-skip-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #bbb;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s;
}

.svc-skip-btn:hover { border-color: #aaa; color: #666; }

/* OTP entry */
.svc-input--otp {
  text-align: center;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.svc-otp-actions {
  display: flex;
  gap: 8px;
  padding: 2px 12px 12px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .svc-card { border-radius: 12px; }
  .svc-bubble { max-width: 92%; font-size: 0.82rem; }
  .svc-msg-col { max-width: 88%; }
  .svc-messages { height: 180px; }
  .svc-returning-split { flex-direction: column; }
  .svc-overlay-returning { border-left: none; border-top: 1px solid #f1e4c9; }
}


/* ================================================================
   PUBLIC REPORT PAGE  (rp-*)
   /report/[id] — no app shell, sticky claim bar
   ================================================================ */

.rp-root {
  background: #f7f8fc;
  min-height: 100vh;
  padding-top: 64px; /* space for sticky bar */
  font-family: 'Poppins', sans-serif;
}

/* sticky claim bar */
.rp-claim-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #1a1a2e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.rp-claim-bar-text {
  font-size: 0.85rem;
  opacity: 0.9;
}

.rp-claim-btn {
  display: inline-flex;
  align-items: center;
  background: #f79500;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.rp-claim-btn:hover { opacity: 0.88; color: #fff; }

.rp-claim-btn--large {
  padding: 13px 32px;
  font-size: 1rem;
  border-radius: 12px;
}

/* content container */
.rp-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* header */
.rp-header {
  text-align: center;
  padding: 32px 0 12px;
}

.rp-header-badge {
  display: inline-block;
  background: #fff8ee;
  color: #f79500;
  border: 1.5px solid #f79500;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.rp-title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 8px;
  line-height: 1.25;
}

.rp-meta {
  font-size: 0.85rem;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* cards */
.rp-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.rp-card--accent {
  border-left: 4px solid #f79500;
}

.rp-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rp-card-title i { color: #f79500; }

.rp-body-text {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/* two-col layout */
.rp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* bullet list */
.rp-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-bullet-list li {
  font-size: 0.875rem;
  color: #444;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.rp-bullet-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #f79500;
  font-weight: 700;
}

/* competitors */
.rp-competitors { display: flex; flex-direction: column; gap: 20px; }

.rp-competitor {
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 18px 20px;
}

.rp-competitor-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.rp-competitor-url {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a2e;
  word-break: break-all;
}

.rp-competitor-score-label {
  font-size: 0.72rem;
  color: #aaa;
  margin-top: 2px;
}

.rp-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rp-pros-cons-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.rp-pros-label  { color: #22c55e; }
.rp-cons-label  { color: #ef4444; }

.rp-list-item {
  font-size: 0.8rem;
  color: #555;
  padding: 3px 0;
  line-height: 1.45;
}

.rp-list-item--pro { color: #166534; }
.rp-list-item--con { color: #991b1b; }

/* suggestions */
.rp-suggestions { display: flex; flex-direction: column; gap: 12px; }

.rp-suggestion {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.rp-suggestion-num {
  width: 28px;
  height: 28px;
  background: #fff8ee;
  color: #f79500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.rp-suggestion-text {
  font-size: 0.875rem;
  color: #333;
  line-height: 1.6;
}

/* footer CTA */
.rp-footer-cta {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  color: #fff;
  margin-top: 12px;
}

.rp-footer-cta h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.rp-footer-cta p {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* loading */
.rp-loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Poppins', sans-serif;
  color: #888;
}

.rp-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f4f6;
  border-top-color: #f79500;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* responsive */
@media (max-width: 600px) {
  .rp-claim-bar { padding: 10px 16px; gap: 10px; }
  .rp-claim-bar-text { font-size: 0.75rem; }
  .rp-title { font-size: 1.4rem; }
  .rp-two-col { grid-template-columns: 1fr; }
  .rp-pros-cons { grid-template-columns: 1fr; }
  .rp-footer-cta { padding: 32px 20px; }
  .rp-card { padding: 20px 18px; }
}

/* ================================================================
   USE CASE LANDING PAGE  (ucp-*)
   All styles for /use-cases/[lens]/[slug] pages. Section headings,
   the benefits checklist, the process steps, and the recommended
   solutions grid all reuse tlp-* classes from the Tool Landing Page
   above — only the hero and the closing testimonial/CTA are new.
   ================================================================ */

.ucp-hero-section,
.ucp-steps-section,
.ucp-testimonial-section {
  padding: 80px 0;
}

.ucp-hero-section {
  background: linear-gradient(145deg, #eef2ff 0%, #f0f4ff 60%, #e8efff 100%);
  padding-top: 130px;
  overflow: hidden;
}

.ucp-hero-grid {
  display: flex;
  align-items: center;
  gap: 56px;
}

.ucp-hero-copy {
  flex: 1 1 480px;
  min-width: 280px;
}

.ucp-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 18px;
}

.ucp-hero-subtitle {
  font-size: 1.05rem;
  color: #555;
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.75;
}

.ucp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ucp-hero-visual-wrap {
  flex: 1 1 420px;
  min-width: 280px;
  position: relative;
  display: flex;
  justify-content: center;
}

.ucp-hero-visual {
  width: 100%;
  max-width: 420px;
  background: #1a1a2e;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(26, 26, 46, 0.22);
  position: relative;
  z-index: 1;
}

.ucp-hero-visual-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

.ucp-hero-mock-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.ucp-hero-mock-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: block;
}

.ucp-hero-mock-line {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.ucp-hero-mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 90px;
  margin-top: 24px;
}

.ucp-hero-mock-bar {
  flex: 1;
  background: linear-gradient(180deg, #f5a623, #f5a62366);
  border-radius: 6px 6px 0 0;
}

.ucp-hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 12px 30px rgba(26, 26, 46, 0.16);
  z-index: 2;
  white-space: nowrap;
}

.ucp-hero-badge--1 {
  top: -18px;
  left: -18px;
}

.ucp-hero-badge--2 {
  bottom: -18px;
  right: -18px;
}

.ucp-hero-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ucp-hero-badge-icon--navy {
  background: #1a1a2e;
  color: #fff;
}

.ucp-hero-badge-icon--amber {
  background: #fff3e0;
  color: #f5a623;
}

.ucp-hero-badge-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2;
}

.ucp-hero-badge-sublabel {
  font-size: 0.7rem;
  color: #888;
}

/* ── Recognition ("Is this you?") — rows reuse tlp-benefit-item ── */
.ucp-recognition-section {
  padding: 80px 0;
  background: #fff;
}

/* tlp-benefit-item's own align-items:flex-start (shared with the Solutions
   pages' benefits section) pins the icon to the top of multi-line text —
   scoped here to just this section so Solutions pages and the use-case
   benefits-checklist section (same shared class) aren't affected. */
.ucp-recognition-section .tlp-benefit-item {
  align-items: center;
}

/* Benefits checklist (tlp-benefits-section) is the same shared class as
   Solutions pages' own benefits section, so scope via .ucp-page (the
   use-case template's own wrapper) rather than the section class. */
.ucp-page .tlp-benefits-section .tlp-benefit-item {
  align-items: center;
}

.ucp-recognition-stats {
  display: flex;
  gap: 32px;
  margin-top: 28px;
}

.ucp-recognition-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a1a2e;
}

.ucp-recognition-stat-label {
  font-size: 0.8rem;
  color: #888;
}

/* ── Steps ── */
.ucp-steps-section {
  background: #fafbff;
}

/* ── Testimonial + closing CTA ── */
.ucp-testimonial-section {
  background: #12172b;
}

.ucp-testimonial-grid {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.ucp-testimonial-col {
  flex: 1.2 1 420px;
  min-width: 280px;
}

.ucp-testimonial-quote-mark {
  font-size: 2.2rem;
  color: #f5a623;
  margin-bottom: 12px;
  display: block;
}

.ucp-testimonial-text {
  font-size: 1.3rem;
  color: #fff;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 24px;
}

.ucp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ucp-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5a623;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.ucp-testimonial-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
}

.ucp-testimonial-role {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.ucp-cta-col {
  flex: 1 1 340px;
  min-width: 260px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ucp-cta-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.ucp-cta-subtitle {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 22px;
  line-height: 1.6;
}

.ucp-cta-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 14px;
}

@media (max-width: 991px) {
  .ucp-hero-grid,
  .ucp-testimonial-grid {
    flex-direction: column;
  }

  .ucp-hero-visual-wrap {
    margin-top: 40px;
  }

  .ucp-hero-badge--1,
  .ucp-hero-badge--2 {
    display: none;
  }
}

@media (max-width: 767px) {
  .ucp-hero-section {
    padding-top: 110px;
  }

  .ucp-hero-title {
    font-size: 1.7rem;
  }
}

/* ================================================================
   OUR STORY — "What We Believe" (sits in a .team-section container)
   ================================================================ */
.beliefs-section { padding-bottom: 20px; }
/* Three cards in a row; stacked on mobile */
.beliefs-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Deliberately unlike the agent cards (white, bordered, shadowed): soft cream
   tiles with no border or shadow, led by a large faded ordinal (01/02/03 via a
   CSS counter) — reads as a statement of principles, not a UI card. */
.beliefs-list { counter-reset: belief; }
.beliefs-list li {
  counter-increment: belief;
  background: linear-gradient(160deg, #fff6e6 0%, #fffbf4 100%);
  border: none;
  border-radius: 18px;
  padding: 24px 24px 26px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}
.beliefs-list li::before {
  content: counter(belief, decimal-leading-zero);
  display: block;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f79500;
  opacity: 0.35;
  margin-bottom: 14px;
}
/* The lead phrase becomes the card's title */
.beliefs-list li strong {
  display: block;
  color: #222;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .beliefs-list { grid-template-columns: 1fr; gap: 14px; }
}
.beliefs-list li a { color: #f79500; text-decoration: none; font-weight: 500; }
.beliefs-list li a:hover { text-decoration: underline; }

/* ================================================================
   OUR STORY — stats band (two rows of four; 2 per row on mobile)
   Reuses .stat-box / .stat-number / .stat-label from style.css.
   ================================================================ */
.stats-band {
  background-color: #FFEEC3;
  padding: 50px 20px;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.stats-band-row { max-width: 1100px; width: 100%; margin: 0 auto; }
.stats-band-row-title {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a6b12;
  margin: 0 0 18px;
}
.stats-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 768px) {
  .stats-band-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
/* Count-up numbers: fixed-width digits so the figure doesn't jitter while counting */
.stats-band .stat-number { font-variant-numeric: tabular-nums; }

/* ================================================================
   OUR STORY — "Three Agents. One Loop." (src/app/our-story/AgentLoop.tsx)
   Desktop (>= 992px): triangle, clockwise SVG arrows behind the cards.
   Below 992px: stacked cards + bracket arrow from Analyst back to Creator.
   ================================================================ */
/* Full-width band with a repeating dotted-pixel pattern (pure CSS, no image).
   No edge lines: the top layer fades both the cream and the dots into the
   white page at the top and bottom, so the band blends in instead of starting
   with a hard edge. Layers, top to bottom: edge fade, dots, cream base. */
.loop-section {
  width: 100%;
  margin: 40px 0;
  padding: 110px 20px;
  background-image:
    linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, #fff 100%),
    radial-gradient(#e9d6b3 1.2px, transparent 1.3px),
    linear-gradient(to bottom, #fff 0%, #fff8ec 30%, #fff8ec 70%, #fff 100%);
  background-size: 100% 100%, 18px 18px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, no-repeat;
}
.loop-inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.loop-title {
  font-weight: 700;
  font-size: 2.8rem;
  color: #222;
  margin-bottom: 12px;
}
.loop-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}
.loop-closing {
  margin: 36px 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #222;
}
.loop-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Cards */
.loop-card {
  background: #fff;
  border: 1px solid #f1e4c9;
  border-top: 3px solid #f79500;
  border-radius: 14px;
  padding: 20px 20px 18px;
  text-align: left;
  box-shadow: 0 8px 22px rgba(26, 26, 46, 0.07);
  z-index: 1;
}
.loop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.loop-card-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f79500;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.loop-card-icon { color: #f79500; font-size: 1.1rem; }
.loop-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 6px;
}
.loop-card-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #555;
  margin: 0;
}

/* Arrows + loop label */
.loop-arrow {
  fill: none;
  stroke: #f7c47a;
  stroke-width: 3;
  stroke-linecap: round;
}
.loop-arrow--back {
  stroke: #f79500;
  stroke-width: 3.5;
  stroke-dasharray: 9 7;
}
.loop-back-label {
  display: inline-block;
  background: #fff8ee;
  border: 1px solid #f79500;
  color: #b36b00;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}

/* ── Desktop: triangle ── */
@media (min-width: 992px) {
  .loop-cycle {
    position: relative;
    max-width: 1000px;
    margin: 44px auto 0;
    aspect-ratio: 1000 / 620; /* matches the SVG viewBox, so arrows line up */
  }
  .loop-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .loop-card {
    position: absolute;
    width: 34%;
  }
  .loop-card--creator   { top: 0; left: 50%; transform: translateX(-50%); }
  .loop-card--publisher { bottom: 0; right: 0; }
  .loop-card--analyst   { bottom: 0; left: 0; }
  .loop-back-label--desktop {
    position: absolute;
    left: 4%;
    top: 36%;
  }
  .loop-back-bracket,
  .loop-down-arrow { display: none; }
}

/* ── Tablet / mobile: stacked ── */
@media (max-width: 991.98px) {
  .loop-title { font-size: 2rem; }
  .loop-cycle {
    position: relative;
    max-width: 560px;
    margin: 32px auto 0;
    padding-right: 64px; /* room for the side arrow */
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .loop-arrows,
  .loop-back-label--desktop { display: none; }
  .loop-card { position: relative; }
  .loop-down-arrow {
    position: absolute;
    left: 50%;
    bottom: -38px;
    transform: translateX(-50%);
    color: #f7c47a;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
  }
  /* Curved bracket from the Analyst (bottom) back up to the Creator (top) */
  .loop-back-bracket {
    position: absolute;
    top: 56px;
    bottom: 56px;
    right: 14px;
    width: 38px;
    border: 3px dashed #f79500;
    border-left: none;
    border-radius: 0 28px 28px 0;
  }
  /* Arrowhead at the top end, pointing left into the Creator card */
  .loop-back-bracket::before {
    content: "";
    position: absolute;
    top: -9px;
    left: -10px;
    border-style: solid;
    border-width: 7.5px 11px 7.5px 0;
    border-color: transparent #f79500 transparent transparent;
  }
  .loop-back-label--mobile {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    padding: 12px 5px;
  }
}
/* "We Believe" intro line — the cards below already add their own top margin */
.beliefs-section .team-subtitle { margin-bottom: 0; }

/* OUR STORY — "Why / Most Launches Go Quiet": one centred column, two separate paragraphs */
.agency-text-row--single {
  display: block;
  max-width: 680px;
  margin: 0 auto 30px;
  font-size: 1rem;
}
.agency-text-row--single p {
  width: 100%;
  line-height: 1.65;
  margin: 0 0 16px;
}
.agency-text-row--single p:last-child { margin-bottom: 0; }

/* ── Homepage hero (Poppins) ───────────────────────────────────────────────
   <h1 className="hero-poppins"> (components/landing/HeroHeadline.tsx): chip on top, Poppins
   Bold heading with a slanted orange highlight behind "Your <rotating word>". Selectors are
   long on purpose — they beat .build-text span / p in style.css + responsive.css, which would
   otherwise turn every span in here into a 64px Caveat table. */
.build-text .hero-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 5px 6px 5px 14px;
  border: 1px solid rgba(247, 149, 0, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
  font-family: "Poppins", sans-serif;
  font-style: normal;
}

.build-text .hero-chip .hero-chip-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f79500;
  box-shadow: 0 0 0 3px rgba(247, 149, 0, 0.18);
  animation: hero-chip-pulse 2s ease-in-out infinite;
}

@keyframes hero-chip-pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(247, 149, 0, 0.08);
  }
}

.build-text .hero-chip .hero-chip-icon {
  font-size: 12px;
  color: #f79500;
}

.build-text .hero-chip .hero-chip-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2328;
  white-space: nowrap;
}

.build-text .hero-chip .hero-chip-pill {
  padding: 3px 10px;
  border: 1px solid rgba(247, 149, 0, 0.3);
  border-radius: 999px;
  background: #fff4e2;
  font-size: 11.5px;
  font-weight: 600;
  color: #c26f00;
  white-space: nowrap;
}

.build-text .hero-poppins {
  position: relative;
  z-index: 666; /* what .build-text h2 gave the heading before it became an h1 */
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-align: center;
  color: #0b0f1a;
  margin: 0;
}

.build-text .hero-poppins:before {
  display: none;
}

/* "Validate & Grow Your" on its own line, the highlighted word always on the next — at every
   width, so no word can reflow the heading */
.build-text .hero-poppins .hero-lead {
  all: unset;
  display: block;
}

/* The h1's real last word, for crawlers and screen readers (the visible word is aria-hidden) */
.build-text .hero-poppins .hero-sr-only {
  all: unset;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.build-text .hero-poppins .hero-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0 0.22em;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
}

/* Slanted orange block behind the rotating word */
.build-text .hero-poppins .hero-highlight::before {
  content: "";
  position: absolute;
  inset: 0.06em 0 -0.02em;
  z-index: -1;
  border-radius: 0.18em;
  background: linear-gradient(100deg, #f7a21b 0%, #fbb534 100%);
  box-shadow: 0 10px 24px rgba(247, 162, 27, 0.28);
  transform: skewX(-12deg);
}

/* Rotating word. Its width comes from a hidden copy of the current word (::after), so at rest it
   sizes itself like plain text — before hydration, on resize, after the font loads; during a swap
   HeroHeadline tweens an explicit width. The words themselves are stacked absolute layers (::before
   from data-word, so they're not part of the h1's text). The clip is the orange block's top and
   bottom (same insets as .hero-highlight::before), with room at the sides for the slant. */
.build-text .hero-poppins .hero-rotator {
  all: unset;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0.06em -0.3em -0.02em -0.3em);
}

.build-text .hero-poppins .hero-rotator::after {
  content: attr(data-word);
  visibility: hidden;
}

.build-text .hero-poppins .hero-rotator-word {
  all: unset;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}

.build-text .hero-poppins .hero-rotator-word::before {
  content: attr(data-word);
}

/* Two lines at every width, neither of which may wrap (a wrap would change the heading's height
   between words): "Validate & Grow Your" (~10.05em — the wider one) and the highlight with the
   longest word, "Breakthrough" (~7.2em). So on the narrowest phones the font shrinks to fit the
   column (100cqi = the .build-text column's content width), with a little headroom — from 34px
   only below ~390px wide screens. */
.build-text:has(> .hero-poppins) {
  container: hero / inline-size;
}

.build-text .hero-poppins {
  font-size: min(clamp(34px, 5.2vw, 64px), calc(100cqi / 10.4));
}

.build-text p.hero-sub {
  margin: 16px auto 36px !important; /* responsive.css sets .build-text p { margin-top: 70px !important } */
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: #4b5563;
}

@media (max-width: 575.98px) {
  .build-text .hero-chip {
    padding-left: 12px;
  }

  .build-text .hero-chip .hero-chip-pill {
    display: none; /* keep the chip on one line on phones */
  }

  .build-text p.hero-sub {
    margin: 12px auto 28px !important;
    font-size: 15px;
  }
}

/* "free" in the homepage list-your-company banner — same slanted orange as the hero highlight */
.v2-free-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.3em;
  margin: 0 0.05em;
  background: none;
  color: inherit;
  font: inherit;
}

.v2-free-mark::before {
  content: "";
  position: absolute;
  inset: 0.05em 0 0;
  z-index: -1;
  border-radius: 0.2em;
  background: linear-gradient(100deg, #f7a21b 0%, #fbb534 100%);
  box-shadow: 0 4px 12px rgba(247, 162, 27, 0.28); /* same glow as the hero highlight */
  transform: skewX(-12deg);
}

/* Testimonials intro ("MANY … LAUNCHMELOUD'S MANUAL FRAMEWORK"): the hero's slanted orange
   highlight instead of the flat .number-i box (which the companies list still uses) */
.number-i.number-i--slant {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 1px 0.45em;
  margin: 2px 0.15em;
  background: none;
  color: #0b0f1a;
  font-weight: 600;
}

.number-i.number-i--slant::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.2em;
  background: linear-gradient(100deg, #f7a21b 0%, #fbb534 100%);
  box-shadow: 0 4px 12px rgba(247, 162, 27, 0.28);
  transform: skewX(-12deg);
}