/* ============================================
   RENATUS V2 LANDING PAGE STYLES
   All values from design tokens - no hardcoding
   ============================================ */

/* .section-title rules (desktop size + mobile shrink) moved to
   base.css so /pricing + /work pick them up too. Single source of
   truth lives there now — do not redefine here. */

.section-desc {
  font-size: var(--section-body);
  line-height: var(--section-body-lh);
  font-weight: var(--font-weight-light);
  margin-bottom: var(--space-4);
}

.section-desc:last-of-type {
  margin-bottom: 0;
}

.section-title .accent {
  font-weight: var(--font-extrabold);
}

.desktop-break {
  display: block;
}

@media (max-width: 768px) {
  .desktop-break {
    display: none;
  }
}

.levelup-left .section-desc {
  margin-bottom: var(--space-6);
  max-width: 800px;
}

.levelup-left .section-desc strong {
  color: var(--pink);
}

.strategic-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-10);
}

.strategic-animation {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-10);
}

.strategic-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.strategic-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.strategic-card-heading {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--white);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  min-height: 120px;
  display: flex;
  align-items: center;
}

.strategic-cards-row .strategic-card:nth-child(1) .strategic-card-heading {
  background: color-mix(in srgb, var(--purple) 90%, transparent);
}

.strategic-cards-row .strategic-card:nth-child(2) .strategic-card-heading {
  background: color-mix(in srgb, var(--cyan) 80%, transparent);
}

.strategic-cards-row .strategic-card:nth-child(3) .strategic-card-heading {
  background: color-mix(in srgb, var(--yellow) 90%, transparent);
  color: var(--navy);
}

.strategic-card-desc {
  font-size: var(--section-body);
  line-height: var(--section-body-lh);
  font-weight: var(--font-weight-light);
  color: var(--navy);
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-4);
  flex: 1;
}

.strategic-card .btn-outline-pill {
  margin-top: var(--space-3);
  margin-left: var(--space-4);
  align-self: flex-start;
}

.strategic-cta-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.strategic-cta-row--centered {
  justify-content: center;
}

.who-header {
  text-align: left;
  max-width: 900px;
  margin: 0 0 var(--space-10);
}

.who-cards-row {
  display: grid;
  /* Four canonical tiers: Solo, Facilitator, Teams, Enterprise — one
     per column at desktop widths so each gets equal billing. Falls
     back to 2x2 at tablet widths and a single column on mobile (the
     existing max-width:768px rule below). */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Intermediate widths: 4-up gets cramped under ~1200px, so reflow
   to a 2x2 grid before the mobile single-column stack kicks in. */
@media (max-width: 1100px) and (min-width: 769px) {
  .who-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.who-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl-soft);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.who-card:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

.who-card--featured {
  box-shadow: var(--shadow-xl-soft);
  transform: none;
}

.who-card--featured:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

.who-card-heading {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  margin-bottom: 12px;
}

.who-card--featured .who-card-heading {
  font-weight: var(--font-weight-bold);
}

.who-card-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 auto;
}

.who-card-pricing {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}

.who-card-cta {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.who-card-cta:hover {
  text-decoration: underline;
}

.who-card-cta .link-arrow {
  transition: transform 150ms ease;
}

.who-card-cta:hover .link-arrow {
  transform: translateX(3px);
}

/* Section CTA links: small text + chevron, used under the
   trust feature cards, the assessments tile list, and the
   sims tile list. Same hover register as .who-card-cta. */
.trust-feature-link,
.hp-assessments-cta,
.sims-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-4);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--pink);
  text-decoration: none;
}

.trust-feature-link:hover,
.hp-assessments-cta:hover,
.sims-cta:hover {
  text-decoration: underline;
}

.trust-feature-link .link-arrow,
.hp-assessments-cta .link-arrow,
.sims-cta .link-arrow {
  transition: transform 150ms ease;
}

.trust-feature-link:hover .link-arrow,
.hp-assessments-cta:hover .link-arrow,
.sims-cta:hover .link-arrow {
  transform: translateX(3px);
}

.btn-outline-pill--primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.btn-outline-pill--primary:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}

/* ============================================
   LANDING CONTAINER
   Centers content at 1425px max-width
   ============================================ */
.landing-container {
  max-width: var(--landing-container);
  margin: 0 auto;
  padding: 0 var(--landing-container-padding);
  width: 100%;
}

/* ============================================
   HERO SECTION — rounded brand-gradient panel
   Inspired by the Cloudly hero treatment: a centred panel with rounded
   corners, brand gradient background, centred title/sub/CTA stack and
   a dashboard graphic anchored to the bottom of the panel.
   ============================================ */
.landing-hero {
  position: relative;
  /* Must beat the next section's z-index (.home-search-row is
     sticky with z-index: 90); otherwise the white search row
     stacks above the image's overhanging slice and clips it.
     Stays below the mega-menu backdrop (100), navbar (1000),
     dropdowns (1001), and modals (1100+). */
  z-index: 95;
  background: transparent;
  padding: 0;
  overflow: visible;
}

.landing-hero-panel {
  position: relative;
  /* Force the panel to span the full width of its parent section
     so the gradient/video bleeds edge-to-edge with no inherited
     side gap. Top margin keeps the white gap above the panel; side
     margins drop to 0 and the corner radius is removed so the hero
     reads as a flat band rather than a floating card.
     Desktop (>900px) re-introduces the floating-card look — see the
     `@media (min-width: 901px)` rule further down in this file. */
  width: 100%;
  box-sizing: border-box;
  margin: 45px 0 0;
  border-radius: 0;
  /* Desktop: pure CSS gradient — no poster image. The gradient
     paints in the first frame (zero network), and the hero video
     fades in over it ~1s later. The dark→pink tone matches the
     video's own colour so the transition is seamless. Mobile keeps
     a still image (see @media max-width:768px below) since the
     video element is hidden there. */
  background: var(--navy);
  /* Side padding dropped to 0 so the gradient/video bleeds the
     full width of the panel; the inner .landing-hero-content keeps
     its own horizontal padding so the heading + chat input don't
     touch the viewport edges. */
  padding: calc(var(--topbar-height) + 6px) 0 0;
  text-align: center;
  /* visible — lets the action-cards figure bleed below the rounded
     edge into the section beneath. The gradient + border-radius clip
     themselves, so no clipping is required here. */
  overflow: visible;
}

/* ── Hero background video ────────────────────────────────────
   Fills the panel edge-to-edge. The white action cards sit on
   top (z-index: 3) so they naturally cover the slice of video
   behind them — no need to clip the video above the card row.
   `<video>` ignores top/right/bottom/left for sizing — its
   intrinsic dimensions win unless we set width/height explicitly. */
.landing-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* Lift the panel's content above the video. The cards figure
   already has z-index: 3 (and position: absolute), so it sits
   above without help. */
.landing-hero-panel > .landing-hero-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-video { display: none; }
}

/* ── Desktop-only floating-card hero ─────────────────────────
   Restores the original Cloudly-style floating panel — side
   margins + rounded corners — on viewports wider than the
   tablet breakpoint (>900px). Below 901px the base full-bleed
   flat band kicks back in via the existing 900px / 768px /
   480px @media overrides further down in this file, so mobile
   and tablet are completely untouched by this rule. */
@media (min-width: 901px) {
  .landing-hero-panel {
    width: auto;
    box-sizing: content-box;
    margin: 45px 40px 0;
    border-radius: 48px;
  }
}

/* On mobile the panel layout collapses entirely (full-bleed
   gradient, cards stack in normal flow, no reserved bottom band).
   Hide the video and paint a still wave image on top of the
   gradient instead — keeps the brand's signature pink-wave look
   without spending 1.3 MB on an MP4 the user can't see. The image
   download is also skipped server-side via the inline JS in
   home.html that only attaches the video <source> on >768px. */
@media (max-width: 768px) {
  .landing-hero-video { display: none; }
  .landing-hero-panel {
    /* Mobile: brand gradient is the base; the hero backdrop
       (`hero-bgkd-mobile.jpg`, 1080×608) sits on top, sized
       `cover` so it fills the entire panel — including the area
       behind the floating navbar — and anchored `center bottom`
       so as the image is up-scaled to cover a portrait panel
       its focal swirl stays planted in the lower half where the
       cards sit. The gradient still acts as the colour backstop
       in case the image fails to load. */
    background:
      url('/static/videos/hero-bgkd-mobile.jpg') center bottom / cover no-repeat,
      linear-gradient(180deg, var(--navy) 0%, var(--pink) 100%);
  }
}

/* Variant used on pages (Explore, Free) that want the same gradient
   panel + white pill navbar as the home page but without the bottom
   carousel/image. Adds bottom padding so the panel closes cleanly.

   Background pinned to the LEGACY pink-wave poster on purpose: the
   home page recently switched to a new `hero-bgkd-desktop.jpg`, but
   Free/Explore must remain visually frozen against that change (the
   project goal explicitly forbids touching them). The `--no-image`
   selector outranks the bare `.landing-hero-panel` rule above, so
   declaring the legacy image here keeps Free/Explore identical to
   their pre-change state without affecting home. */
.landing-hero--no-image .landing-hero-panel {
  padding-top: calc(var(--topbar-height) + 6px);
  padding-bottom: var(--space-3);
  background:
    url('/static/videos/pink-wave-poster.jpg') center/cover no-repeat,
    #4E0432;
}
/* Mobile counterpart of the above pin — keeps the old PNG in place
   on Free/Explore mobile so the new `hero-bgkd-mobile.jpg` we wired
   in for home does NOT bleed onto those pages. */
@media (max-width: 768px) {
  .landing-hero--no-image .landing-hero-panel {
    background:
      url('/static/videos/pink-wave-poster-mobile.png') center bottom / 100% auto no-repeat,
      var(--gradient);
  }
}
.landing-hero--no-image .landing-hero-content {
  margin-top: 24px;
  margin-bottom: 12px;
}

/* On Explore + Free the hero lives inside .mw-page (max-width 1390px,
   side padding from --space-6), which would shrink the gradient panel
   below the home page width. Break out of that container so the panel
   spans the same viewport width as on home (margin: 45px 40px 0). */
.mw-page .landing-hero--no-image {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* Plain white wrapper for the page-specific search pill that sits
   directly under the gradient hero on Explore + Free. Replaces the
   legacy .free-hero wrapper (which painted a full-bleed gradient
   strip). */
.page-search-bar {
  background: var(--white);
  padding: 10px 0 8px;
}
.page-search-bar-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* ── Floating white pill navbar ────────────────────────────────
   MOVED to static/css/navbar.css and loaded directly by
   partials/navbar.html so every page that includes the navbar
   partial gets the pill chrome — not just pages that happen to
   load home.css. Do not re-add the rules here. */

.landing-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1025px;
  margin: 45px auto;
  text-align: center;
}

.landing-hero-title {
  font-size: clamp(48px, 5vw, 76px);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  color: var(--white);
  /* 10px above the heading; tight 12px below so the description
     reads as part of the same block (per design feedback). */
  margin-top: 10px;
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.05;
}

.landing-hero-desc {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  margin: 0 auto 40px;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 3;
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

.landing-hero-coverage {
  font-weight: var(--font-bold);
}

/* ── CTA buttons ───────────────────────────────────────── */
.landing-hero-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
}

/* ── Inline Ren chat (replaces the CTAs in the hero) ───── */
.landing-hero-chat {
  /* margin-top:auto pushes the chat to the base of the hero
     content (which is a flex column), so it visually sits just
     above the image instead of hugging the subtitle. */
  margin: auto auto 0;
  width: min(800px, 92%);
}
.landing-hero-chat .irc-input-pill {
  min-height: 68px;
  border-radius: 999px;
  /* Black ghost fill (was white at 20% opacity) — sits over the
     pink hero gradient as a darkened well rather than a frosted
     pane. White outline kept so the pill's edge stays crisp
     against the gradient and the white text/icons inside read
     as a coherent set with their bounding stroke. Applies on
     both desktop and mobile — the mobile media block below only
     overrides geometry, not colour. */
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: none;
  padding: 12px 22px 12px 42px;
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Swap the default chat-bubble icon for the Ren stars icon. */
.landing-hero-chat .irc-input-icon { display: none; }
.landing-hero-chat .irc-ren-stars-icon {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.landing-hero-chat .irc-input {
  background: transparent;
  border: 0;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  resize: none;
  line-height: 1.4;
  max-height: 160px;
}
.landing-hero-chat .irc-input::placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}
/* Recolour the leading chat icon (was tinted for white background). */
.landing-hero-chat .irc-input-pill > svg,
.landing-hero-chat .irc-input-pill .irc-icon {
  color: rgba(255, 255, 255, 0.85);
  stroke: currentColor;
}
.landing-hero-chat .irc-send-btn {
  background: var(--white);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.landing-hero-chat .irc-send-btn:hover {
  background: var(--pink);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .landing-hero-chat { width: 92%; }
}
/* Mobile-only: trim the Ren input pill so it fits inside the
   narrow gradient panel without clipping the placeholder text.
   Desktop is left untouched. */
@media (max-width: 768px) {
  .landing-hero-chat {
    /* Use the full content width; the panel/content already
       provide horizontal padding, so 92% just wastes space. */
    width: 100%;
  }
  .landing-hero-chat .irc-input-pill {
    min-height: 60px;
    padding: 12px 18px 12px 20px;
    gap: 10px;
    /* Fully-rounded pill, matching the desktop treatment.
       Stays a clean stadium even if the textarea grows to the
       160px max-height. */
    border-radius: 999px;
  }
  .landing-hero-chat .irc-ren-stars-icon {
    width: 24px;
    height: 24px;
  }
  .landing-hero-chat .irc-input {
    /* Keep ≥16px so iOS doesn't zoom on focus. */
    font-size: 17px;
  }
  .landing-hero-chat .irc-send-btn {
    width: 38px;
    height: 38px;
  }
}

.landing-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 19px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.landing-hero-btn-arrow {
  transition: transform 0.25s ease;
}

.landing-hero-btn:hover .landing-hero-btn-arrow {
  transform: translateX(3px);
}

/* Solid white pill — primary action */
.landing-hero-btn--solid {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--white);
}
.landing-hero-btn--solid:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
}

/* Transparent pill with white border — ghost action */
.landing-hero-btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
.landing-hero-btn--ghost:hover {
  background: var(--white);
  color: var(--navy);
}

/* ── Graphic / carousel anchored at the bottom of the panel ─ */
.landing-hero--panel .landing-hero-graphic {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 1100px;
  padding-top: var(--space-6);
}
/* Carousel parked offscreen visually while the placeholder owns the hero
   slot — keeps i18n payload in the DOM without rendering a duplicate. */
.landing-hero-graphic--archived {
  display: none !important;
}

/* ── Image placeholder — sits at the bottom of the panel and bleeds
       downward into the next section, matching the Cloudly hero. ── */
/* Cloudly-style overhang: the placeholder is a sibling of the panel
   pulled UP with a negative top margin so its top sits inside the
   gradient and its bottom hangs into the white section below. The
   amount of overhang is controlled by the relationship between the
   panel's padding-bottom and this margin-top. */
/* Absolute-positioned inside the panel: anchored to the panel
   bottom with a negative offset so a generous slice hangs below
   the rounded corner into the white section beneath. The panel
   bottom is tuned so the gradient ends ~50px below the middle
   of the top card row (the previous "mid-row" cap pushed 50px
   further down per follow-up feedback). To keep the cards in the
   same on-screen position when the panel grows by 50px, the
   overhang shrinks by 50px in tandem. */
.landing-hero-image {
  position: absolute;
  left: 50%;
  /* Lifts the figure UP by this many px without touching the
     panel padding (so the gradient stays put). 180 = prior 130
     plus 50px to compensate for the panel growing 50px taller
     (padding-bottom 200 → 250); the +50 lift cancels the +50
     downward shift the taller panel would otherwise impose,
     keeping the cards in their previous on-screen position. */
  bottom: calc(180px - clamp(190px, 23vw, 310px));
  transform: translateX(-50%);
  z-index: 3;
  width: calc(100% - 80px);
  max-width: 1100px;
  margin: 0;
  padding: 0;
}
/* Reserve enough room below the Ren chat input so the gradient
   extends through the upper portion of the cards. 250px = prior
   200px plus a follow-up 50px to make the hero panel taller
   (cards' on-screen position preserved by matching +50px lift
   below). Original pre-cap value was 300px. */
.landing-hero-panel {
  padding-bottom: 250px;
}

.landing-hero-image-frame {
  position: relative;
  width: 100%;
  /* Wider/shorter than 16:9 so the image stays a horizontal band
     (matches Cloudly's hero asset proportions ~12:5). */
  aspect-ratio: 12 / 5;
  border-radius: 24px;
  background: #d1d5db;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Variant used while the legacy hero animation slides act as the
   temporary visual: clean white card, no dashed placeholder chrome,
   carousel centred inside the 12:5 frame. */
.landing-hero-image-frame--carousel {
  background: var(--white);
  border: 0;
}
.landing-hero-image-frame--carousel #heroCarouselRoot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Establish a sized container so the carousel below can scale
     proportionally via container query units (cqh/cqw). */
  container-type: size;
}
/* The carousel was designed at a fixed 460×280 with absolute pixel
   values inside (font-size, SVG stroke widths, padding). Stretching
   it via width/height distorts those. Instead, keep its native size
   and scale the whole thing uniformly so internal proportions stay
   intact. We scale by the smaller of the width- and height-fit
   ratios so the carousel always fits the frame without clipping. */
.landing-hero-image-frame--carousel .hero-carousel {
  width: 1100px;
  height: 460px;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: scale(min(calc(100cqw / 1100), calc(100cqh / 460)));
  transform-origin: center center;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.landing-hero-image-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: var(--space-6);
}

.landing-hero-image-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-top: 8px;
}

.landing-hero-image-hint {
  font-size: 14px;
  opacity: 0.75;
}

/* Make sure the next section doesn't slam into the bleeding cards.
   Scoped to the search row that immediately follows the hero so we don't
   inadvertently inflate spacing if section order ever changes. With the
   panel capped mid-row, the cards now bleed ~348px (clamp 240–360px)
   below the panel — the buffer must clear the figure's deepest point
   plus a small breathing gap. */
.landing-hero--panel + .home-search-row {
  padding-top: 400px;
}

/* ============================================
   PRODUCTS TABS SECTION (from Figma)
   Split layout: text left, image right
   ============================================ */
.section-divider {
  border-bottom: 1px solid var(--gray-light);
}

.products-section {
  padding: var(--space-10) 80px var(--space-6) 80px;
}

.pill-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.products-tabs-layout {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
}

.products-tab-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.products-tab-left-col .pill-tabs {
  margin-bottom: var(--space-16);
}


.products-tab-right-col {
  flex: 0 0 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.products-tab-right-spacer {
  flex: 0 0 60px;
}

.products-tab-right-content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.products-tabs-wrapper {
  display: grid;
}

.products-tab-anim,
.products-tab-text {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.products-tab-anim.active,
.products-tab-text.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.products-tab-text .section-title {
  margin-bottom: var(--space-5);
}

.products-tab-text .section-desc {
  margin-bottom: var(--space-4);
}

.products-tab-text .text-link {
  align-self: flex-start;
  margin-top: var(--space-5);
}

.products-tab-right img,
.products-tab-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-left: auto;
  display: block;
}

.products-tab-anim lottie-player {
  width: 100%;
  min-height: 380px;
}


.products-tab-img {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 500;
  display: block;
  border-radius: 22px;
  box-shadow: var(--shadow-xl-soft);
  object-fit: cover;
  margin: 0;
}

.products-tab-left-col .section-title {
  margin-bottom: var(--space-5);
}

.products-tab-left-col .section-desc {
  margin-bottom: var(--space-4);
}

.products-tab-left-col .text-link {
  align-self: flex-start;
  margin-top: var(--space-5);
}

.products-tab-text .section-desc {
  max-width: 800px;
}

/* ============================================
   AI TRUST PROBLEM SECTION
   ============================================ */
.trust-section {
  padding: var(--space-20) 0;
  background: var(--surface-cool);
}

.trust-section .section-title {
  font-size: 28px;
  line-height: 1.15;
}

.trust-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.trust-content--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  direction: ltr;
  max-width: 860px;
  margin: 0 auto;
}

.trust-text {
  text-align: center;
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 12px;
}

.trust-text--left {
  text-align: left;
  padding-left: 20px;
  padding-right: 30px;
}

.trust-text--left .section-title,
.trust-text--left .section-desc {
  max-width: 720px;
}

.trust-stats {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.trust-stat-value {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--navy);
}

.trust-stat-label {
  font-size: 11px;
  color: var(--gray);
}

.trust-feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.trust-feature-card {
  border-left: 2px solid var(--navy);
  padding-left: var(--space-4);
}

.trust-feature-card-heading {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--navy);
  margin-bottom: 6px;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  min-height: calc(15px * 1.3 * 2);
  line-height: 1.3;
}

.trust-feature-card-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.trust-live-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--pink);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.trust-live-link:hover {
  opacity: 0.8;
}

.trust-live-link .link-arrow {
  display: inline-block;
  transition: transform 150ms ease;
}

.trust-live-link:hover .link-arrow {
  transform: translateX(3px);
}

.trust-preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  direction: ltr;
}
.trust-preview::before {
  display: none;
}
.trust-preview > * {
  position: relative;
  z-index: 1;
}

/* ───────────────────────────────────────────────────────────────────
   .hp-report-excerpt — home page T1a demo report
   Scopes the canonical .sim-v2 design system into a compact, visually
   unified single-card excerpt sized for the .trust-preview column.
   All overrides are scoped under .sim-v2.hp-report-excerpt so real
   simulation reports are unaffected.
   Markup: templates/pages/public/_home_report_excerpt.html
   Base styles: templates/reports/partials/_sim_v2_styles.html
   ─────────────────────────────────────────────────────────────────── */
/* Outer container = the soft cool page tint of real reports
   (var(--off-white) is the canonical token; --report-bg-page in
   report/frame.css resolves to the same #FAFCFE). The cover sits
   bare on this tint, then the inner .sv-card sections become the
   white "report cards" — matching the real T1a layout. */
.sim-v2.hp-report-excerpt {
  width: 100%;
  background: var(--off-white);
  border: 0.75px solid var(--sv-rule, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Cover: bare on the tinted bg (no card chrome, no separator rule).
   Compact spacing because the section is small in this excerpt. */
.sim-v2.hp-report-excerpt .sv-cover {
  padding: 0 4px 4px 4px;
  margin-bottom: 16px;
  border-bottom: 0;
}
.sim-v2.hp-report-excerpt .sv-cover-kicker-row {
  font-size: 10px;
  margin-bottom: 12px;
}
.sim-v2.hp-report-excerpt .sv-score-square {
  width: 6px;
  height: 6px;
}
.sim-v2.hp-report-excerpt .sv-cover-head {
  margin: 8px 0 6px;
}
.sim-v2.hp-report-excerpt .sv-cover-title {
  font-size: 20px;
}
.sim-v2.hp-report-excerpt .sv-cover-standfirst {
  font-size: 13px;
  line-height: 1.55;
}
.sim-v2.hp-report-excerpt .sv-cover-meta {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 10px;
}

/* Inner sections: restore the white card chrome (background, border,
   radius) so the gauge + dimension blocks read as discrete cards
   sitting on the tinted bg — exactly like the real report. */
.sim-v2.hp-report-excerpt .sv-card {
  background: var(--white, #ffffff);
  border: 0.75px solid var(--sv-rule, rgba(15, 23, 42, 0.08));
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 14px;
  margin-bottom: 0;
}

/* Overall block: tighter gauge column so gauge + commentary fit
   comfortably side-by-side in the narrower trust-preview column. */
.sim-v2.hp-report-excerpt .sv-overall {
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 18px;
}
.sim-v2.hp-report-excerpt .sv-gauge {
  max-width: 150px;
}
.sim-v2.hp-report-excerpt .sv-gauge-num {
  font-size: 26px;
}
.sim-v2.hp-report-excerpt .sv-gauge-suffix {
  font-size: 13px;
}
.sim-v2.hp-report-excerpt .sv-gauge-label {
  font-size: 12px;
}
.sim-v2.hp-report-excerpt .sv-overall-headline {
  font-size: 13.5px;
  line-height: 1.45;
}
.sim-v2.hp-report-excerpt .sv-overall-body {
  font-size: 12.5px;
  line-height: 1.55;
}

/* Dimension profile: compact section header + tighter rows. */
.sim-v2.hp-report-excerpt .sv-section-kicker {
  font-size: 10px;
}
.sim-v2.hp-report-excerpt .sv-section-title {
  font-size: 15px;
  margin: 6px 0 14px;
}
.sim-v2.hp-report-excerpt .sv-dim-list {
  gap: 10px;
}
.sim-v2.hp-report-excerpt .sv-dim-row {
  grid-template-columns: minmax(0, 1fr) minmax(60px, 78px);
  column-gap: 12px;
  row-gap: 4px;
}
.sim-v2.hp-report-excerpt .sv-dim-row .sv-name {
  font-size: 12.5px;
}
.sim-v2.hp-report-excerpt .sv-dim-row .sv-score {
  font-size: 11.5px;
}

/* Mobile: stack the gauge above the commentary and tighten the outer
   card padding so the prose keeps a comfortable measure. The base
   .sim-v2 .sv-overall mobile stack is overridden by our 2-col rule
   above (higher specificity), so re-stack explicitly here. */
@media (max-width: 600px) {
  .sim-v2.hp-report-excerpt {
    padding: 18px 14px;
  }
  .sim-v2.hp-report-excerpt .sv-card {
    padding: 16px 14px;
  }
  .sim-v2.hp-report-excerpt .sv-overall {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    text-align: center;
  }
  .sim-v2.hp-report-excerpt .sv-overall > div:last-child {
    text-align: left;
  }
}

/* Re-instate the base dim-row compaction at very narrow widths.
   Our higher-specificity rule above (0,3,0) defeats the base
   .sim-v2 .sv-dim-row @media (max-width: 480px) compaction (0,2,0),
   so re-declare it here at matching specificity. */
@media (max-width: 480px) {
  .sim-v2.hp-report-excerpt .sv-dim-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    column-gap: 10px;
  }
}

.trust-preview-link {
  display: block;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.trust-preview-frame {
  width: 450px;
  height: 525px;
  overflow: hidden;
  position: relative;
  background: var(--white);
}

.trust-preview-iframe {
  height: 1120px;
  border: none;
  transform: scale(0.46875);
  transform-origin: top left;
  pointer-events: none;
  width: 960px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-top: 40px;
  margin-top: 0;
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}

.trust-grid-item {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.trust-grid-item:nth-child(1),
.trust-grid-item:nth-child(2),
.trust-grid-item:nth-child(3),
.trust-grid-item:nth-child(4) {
  background-color: var(--white);
  box-shadow: var(--shadow-lg);
}

.trust-grid .card-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-2) 0;
  min-height: 3.25em;
}

.trust-grid .card-desc {
  color: var(--navy);
  font-weight: var(--font-weight-light);
}

@media (max-width: 768px) {
  .trust-section {
    padding: 30px 0;
  }
  .trust-content--centered {
    max-width: 100%;
  }
  .trust-section .section-title {
    font-size: var(--section-heading-mobile);
    font-weight: var(--font-weight-bold);
    line-height: var(--section-heading-mobile-lh);
    margin-bottom: var(--space-2);
    width: 100%;
  }
  .trust-section .section-title strong {
    font-weight: inherit;
  }
  .trust-text .section-desc {
    font-size: 14px;
    line-height: 1.5;
    display: inline;
  }
  .trust-text .section-desc + .section-desc::before {
    content: " ";
  }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-top: 20px;
  }
  .trust-grid-item {
    padding: var(--space-4);
  }
  .trust-grid .card-title {
    font-size: 18px;
    margin-bottom: var(--space-1, 0.25rem);
    min-height: unset;
  }
  .trust-grid .card-title br {
    display: none;
  }
  .trust-grid .card-desc {
    font-size: 14px;
    line-height: 1.5;
    font-weight: var(--font-weight-light);
  }
}

/* ============================================
   SOUNDING BOARD SECTION
   Pink background
   ============================================ */
.sounding-section {
  padding: var(--space-16) 0;
  background: var(--white);
  color: var(--navy);
  overflow: visible;
}

.sounding-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  overflow: visible;
}

.sounding-content > *:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 30px;
}

.sounding-content .section-desc {
  margin-bottom: var(--space-8);
}

.sounding-animation {
  width: 550px;
  height: 450px;
  max-width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ============================================
   ASSESSMENTS & SIMULATIONS SECTION
   ============================================ */
.sims-section {
  padding: var(--space-16) 0;
  padding-bottom: 100px;
  background: var(--surface-cool);
}

.sims-section .section-title {
  max-width: 520px;
}

.sims-section .sims-desc {
  max-width: 720px;
  margin-bottom: 48px !important;
}

.sims-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sims-intro {
  text-align: left;
}
.sims-intro .section-title {
  text-align: left;
  max-width: none;
}
.sims-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}
.sims-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.sims-list-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--navy);
}
@media (max-width: 900px) {
  .sims-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}
.sims-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sims-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px;
  border: none;
  box-shadow: var(--shadow-xl-soft);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.sims-card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
}

.sims-card-heading {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
  color: var(--navy);
}

.sims-card-desc {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  color: var(--ink-2);
  margin: 0;
}

.sims-card-icon {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 150ms ease;
}

.sims-card-icon:hover {
  opacity: 1;
}

.sims-card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--pink);
  text-decoration: none;
}

.sims-card-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .sims-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .sims-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   LEVEL UP SECTION
   ============================================ */
.levelup-section {
  padding: var(--space-16) 0;
  padding-bottom: 100px;
  background: var(--white);
}

.levelup-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}


.levelup-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.levelup-animation {
  width: 550px;
  height: 450px;
  max-width: 100%;
  border: none;
  border-radius: var(--radius-lg);
}

.levelup-animation--wide {
  width: 860px;
  height: 540px;
  overflow: hidden;
}

/* FAQ styles now in v2-base.css (shared component) */

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  padding: 70px 0;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-section .landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-centered {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.start-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
  text-align: left;
}

.start-path-card {
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.start-path-card .section-desc {
  margin-bottom: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.get-started-stat {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  letter-spacing: -0.5px;
  margin: 4px 0 0 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* ============================================
   RESPONSIVE - TABLET (900px)
   ============================================ */
@media (max-width: 1200px) {
  .hero-report-card {
    width: var(--hero-card-width-tablet);
  }
}

@media (max-width: 900px) {
  .landing-hero {
    min-height: auto;
  }
  .landing-hero-panel {
    /* Full-bleed panel: outer margin removed so the 24px inner
       padding is the single source of horizontal gutter (was
       24px margin + 24px padding = 48px total before). */
    margin: 0;
    padding: calc(var(--topbar-height) + 56px) var(--space-6) 0;
    border-radius: 36px;
  }
  .landing-hero-title {
    font-size: var(--text-6xl);
  }
  .landing-hero-desc {
    font-size: 18px;
  }
  .landing-hero-image {
    margin-bottom: -100px;
    border-radius: 18px;
  }
  .landing-hero-image-frame {
    border-radius: 18px;
  }
  .landing-hero--panel + .home-search-row {
    padding-top: 140px;
  }
  .products-tab-content.active {
    flex-direction: column;
  }
  .products-tab-left {
    max-width: 100%;
  }
  .products-tab-right {
    padding: var(--space-8);
  }
  .products-tab-text .section-title {
    font-size: var(--text-5xl);
  }
  .sounding-content,
  .levelup-content,
  .trust-content {
    grid-template-columns: 1fr;
  }
  .trust-text--left {
    text-align: center;
  }
  .sounding-section .section-title,
  .levelup-section .section-title,
  .cta-section .section-title,
  .faq-title,
  .trust-section .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
  }

  .products-tabs-layout {
    flex-direction: column;
  }

  .products-tab-right-col {
    flex: 0 0 auto;
  }
}

/* ============================================
   RESPONSIVE - MOBILE (768px)
   ============================================ */
@media (max-width: 768px) {
  .mobile-desktop-banner {
    display: none !important;
  }

  .landing-container {
    /* Single source of truth for the mobile horizontal gutter on
       every section that uses .landing-container. 24px matches
       the /free + /explore .mw-page gutter; per-section L/R
       paddings are removed so they don't double up on this. */
    padding: 0 24px;
  }

  .landing-hero {
    min-height: auto;
    height: auto;
    /* No top padding here — the gradient panel below must touch the
       very top of the viewport so the transparent navbar (white
       logo + hamburger) sits *on the gradient*, not on the white
       body strip above it. The navbar's vertical clearance is
       absorbed by the panel's own top padding instead. */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-layout {
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100%;
  }

  .landing-hero-content {
    padding: 0;
    background: transparent;
    order: 2;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .products-section {
    padding: 0 0 20px;
  }

  .products-section .landing-container {
    padding: 0 24px;
  }

  .pill-tabs {
    align-self: center;
  }

  .products-tabs-layout {
    flex-direction: column;
  }

  .products-tab-right-col {
    display: none;
  }

  .products-tab-left-col {
    text-align: center;
  }

  .products-tab-left-col .btn {
    align-self: center;
  }

  .products-tab-content.active {
    flex-direction: column;
    position: relative;
    height: auto;
  }

  .products-tab-left {
    max-width: 100%;
    order: 2;
  }

  .products-tab-right {
    padding: 20px 0;
    order: 1;
  }

  .products-tab-text .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
    text-align: center;
  }

  .products-tab-text .section-desc {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  .products-tab-features {
    font-size: 14px;
  }

  .products-tab-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .products-tab-buttons .btn {
    width: 251px;
    height: 62px;
    font-size: 22px;
    border-radius: 12px;
  }

  .levelup-right {
    display: none;
  }

  .sounding-animation {
    display: none;
  }


  .sounding-section {
    padding: 30px 0;
  }

  .sounding-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }

  .trust-section .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
  }
  .sounding-section .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
  }

  .sounding-content .section-desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .levelup-section {
    padding: 30px 0;
  }

  .levelup-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }

  .levelup-section .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
  }

  .levelup-left .section-desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .strategic-animation {
    display: none;
  }

  .strategic-cards-row {
    grid-template-columns: 1fr;
  }

  .strategic-cta-row--centered {
    flex-direction: column;
    align-items: center;
  }

  /* FAQ responsive styles now in v2-base.css */

  .cta-section {
    padding: 40px 0;
  }

  .start-paths {
    grid-template-columns: 1fr;
  }

  .cta-section .section-title {
    font-size: var(--section-heading-mobile);
    line-height: var(--section-heading-mobile-lh);
  }

  .cta-section .section-desc {
    font-size: 14px;
    line-height: 1.5;
  }


  .split-btn {
    flex-direction: column;
    border-radius: var(--radius-lg);
  }

  .split-btn-left,
  .split-btn-right {
    border-radius: var(--radius-lg);
    width: 100%;
  }
}

.report-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.report-overlay.hidden {
  display: none;
}

.report-overlay-content {
  position: relative;
  width: 90vw;
  max-width: 1000px;
  height: 85vh;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl-heavy);
}

.report-overlay-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-overlay-close:hover {
  background: rgba(0, 0, 0, 0.85);
}

.report-overlay-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   HP-STATS — credibility strip beneath the home hero carousel
   Editorial register: small, uppercase, generous letter-spacing.
   Numbers are weight 600 in --black; labels are weight 500 in
   --gray-dark; middle-dot separators in --gray-light. Reuses
   existing tokens; no hardcoded values. Inter only at 500/600
   (already loaded by base.css).
   ============================================================ */
.hp-stats {
  max-width: 1320px; /* +20% from prior 1100px to widen the pill */
  margin: 0 auto;
  /* Top padding pulls the stats pill down from the cards above.
     200px = prior 220px minus 20px to lift the stats closer to the
     cards per design feedback. */
  padding: 200px var(--space-4) var(--space-8);
}
.hp-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
}
.hp-stats-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  color: #9a9a9a;
}
.hp-stats-num {
  color: #9a9a9a;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hp-stats-label {
  color: #9a9a9a;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hp-stats-sep {
  display: none;
}

/* Desktop-only: wrap the stats in a fully-rounded off-white pill and
   switch the text to white (per design). Mobile keeps the existing
   #9a9a9a so the smaller text stays readable on the plain background. */
@media (min-width: 721px) {
  .hp-stats-list {
    /* Dark navy pill — uses --black (#1B2230), the same token as the
       primary CTA buttons. Reads as a premium editorial credibility
       strip and pairs naturally with the white text below. */
    background: var(--navy);
    border-radius: var(--radius-full);
    padding: var(--space-6) var(--space-16);
    gap: var(--space-8) var(--space-20);
    /* Widen the pill ~20% beyond its content-fit width by stretching
       it within a 20%-wider container below. */
    width: 100%;
    box-sizing: border-box;
  }
  .hp-stats-item,
  .hp-stats-num,
  .hp-stats-label {
    color: var(--white);
  }
}

@media (max-width: 720px) {
  .hp-stats {
    /* 24px gutter on each side per design spec.
       .hp-stats does NOT use .landing-container, so the gutter has
       to live here. */
    padding: 40px 24px var(--space-7);
  }
  /* Mirror the desktop pill styling on mobile: soft neutral pill,
     white text, fully-rounded. Padding / gaps / font-sizes are
     scaled down so it fits comfortably inside a phone width. */
  .hp-stats-list {
    /* Mirror the desktop pill — --black (#1B2230) navy matches the
       primary CTA palette for cross-section cohesion. */
    background: var(--navy);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-3);
    gap: var(--space-2) var(--space-2);
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    justify-content: space-around;
  }
  .hp-stats-item,
  .hp-stats-num,
  .hp-stats-label {
    color: var(--white);
  }
  .hp-stats-item {
    gap: 2px;
  }
  .hp-stats-num {
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .hp-stats-label {
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1;
  }
}

/* ============================================================
   SECTION A — HP-REN-CHAT (scripted Ren conversation demo)
   ============================================================ */
.hp-ren-chat {
  background: var(--white);
  padding: var(--space-12) var(--space-4);
}
.hp-ren-chat-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-10);
  align-items: start;
}
.hp-ren-chat-text {
  max-width: 460px;
  height: 510px;
}
.trust-section .landing-container {
  max-width: 1400px;
}
.hp-ren-chat-panel {
  background: transparent;
  border: none;
  border-radius: 24px;
  padding: 0;
  height: 480px;
  box-shadow: none;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
}
.hp-ren-chat-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: auto;
  width: 100%;
}
.hp-feature-anim {
  position: relative;
  padding: var(--space-4);
  min-height: 480px;
}
.hp-feature-anim-stream {
  height: 100%;
  min-height: 480px;
}

/* ============================================================
   SOURCE CHECK PANEL — "What Renatus is" left column
   Static panel that animates once on load, illustrating Ren's
   live cross-checking against tier-1 sources.
   ============================================================ */
.sc-panel {
  --sc-pink: var(--pink);
  --sc-black: var(--navy);
  --sc-gray-dark: #706669;
  --sc-gray-bg: #FAFAFA;
  --sc-positive: #7dbc19;
  --sc-positive-bg: rgba(125, 188, 25, 0.15);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(63, 53, 56, 0.2),
              0 12px 30px -10px rgba(63, 53, 56, 0.08);
  padding: 40px 44px;
  position: relative;
}
.sc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sc-gray-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc-label .dot {
  width: 8px;
  height: 8px;
  background: var(--sc-pink);
  border-radius: 50%;
  animation: sc-scan-pulse 1.8s ease-in-out infinite;
}
.sc-claim {
  font-size: 22px;
  font-weight: 600;
  color: var(--sc-black);
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(63, 53, 56, 0.08);
}
.sc-sources-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sc-gray-dark);
  margin-bottom: 14px;
}
.sc-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(63, 53, 56, 0.06);
  opacity: 0;
  transform: translateX(-8px);
  animation: sc-source-land 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sc-source:nth-of-type(2) { animation-delay: 0.4s; }
.sc-source:nth-of-type(3) { animation-delay: 1.2s; }
.sc-source:nth-of-type(4) { animation-delay: 2.0s; }
.sc-source-name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sc-source-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--sc-gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--sc-black);
  letter-spacing: 0.3px;
}
.sc-source-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-black);
}
.sc-source-meta {
  font-size: 11px;
  color: var(--sc-gray-dark);
}
.sc-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sc-positive);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.3);
  animation: sc-check-pop 0.4s cubic-bezier(0.16, 1.5, 0.3, 1) forwards;
}
.sc-source:nth-of-type(2) .sc-check { animation-delay: 0.9s; }
.sc-source:nth-of-type(3) .sc-check { animation-delay: 1.7s; }
.sc-source:nth-of-type(4) .sc-check { animation-delay: 2.5s; }
.sc-check svg {
  width: 14px;
  height: 14px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}
.sc-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(63, 53, 56, 0.08);
  opacity: 0;
  transform: translateY(8px);
  animation: sc-verdict-land 0.6s cubic-bezier(0.16, 1, 0.3, 1) 3s forwards;
}
.sc-verdict-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sc-gray-dark);
}
.sc-confidence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sc-positive-bg);
  color: #3d7200;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 7px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}
.sc-confidence::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-positive);
}
@keyframes sc-scan-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
@keyframes sc-source-land {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes sc-check-pop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes sc-verdict-land {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .sc-panel { padding: 28px 24px; }
  .sc-claim { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-label .dot,
  .sc-source,
  .sc-check,
  .sc-verdict {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.hp-ren-chat-msg {
  max-width: 78%;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  animation: hpRenChatIn 220ms ease forwards;
}
.hp-ren-chat-msg--user {
  align-self: flex-end;
  background: var(--surface-cool-strong);
  color: var(--navy);
  border-bottom-right-radius: 6px;
}
.hp-ren-chat-msg--ren {
  align-self: flex-start;
  background: transparent;
  color: var(--navy);
  border-bottom-left-radius: 6px;
}
.hp-ren-chat-typing {
  align-self: flex-start;
  background: var(--gray-bg);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  padding: 12px 16px;
  display: inline-flex;
  gap: 4px;
}
.hp-ren-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-medium);
  animation: hpRenChatTyping 0.8s infinite ease-in-out;
}
.hp-ren-chat-typing span:nth-child(2) { animation-delay: 0.1s; }
.hp-ren-chat-typing span:nth-child(3) { animation-delay: 0.2s; }
@keyframes hpRenChatIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hpRenChatTyping {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hp-ren-chat-msg, .hp-ren-chat-typing span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 820px) {
  .hp-ren-chat-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hp-ren-chat-panel {
    min-height: 380px;
    padding: var(--space-4);
  }
}

/* ============================================================
   SECTION B — HP-ASSESSMENTS (radar example + tile grid)
   ============================================================ */
.hp-assessments {
  padding: 80px var(--space-4);
}
.hp-assessments-desc {
  max-width: 560px;
  margin: 0 0 var(--space-7);
  text-align: left;
}
.hp-assessments-text {
  text-align: left;
}
.hp-assessments-text .section-title {
  text-align: left;
}
.hp-assessments-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-left: -40px;
}
.hp-assessments-example {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  justify-self: start;
}
.hp-radar {
  width: 100%;
  height: auto;
  display: block;
}
.hp-radar-grid {
  fill: none;
  stroke: var(--gray-light);
  stroke-width: 1;
}
.hp-radar-axis {
  stroke: var(--gray-light);
  stroke-width: 1;
}
.hp-radar-area {
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.hp-radar-dot {
  fill: var(--pink);
  opacity: 0.55;
}
.hp-radar-dot--peak {
  fill: var(--pink);
  opacity: 1;
}
.hp-radar-label {
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hp-radar-label--peak {
  fill: var(--pink);
  font-weight: 600;
}
.hp-assessments-finding {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-light);
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 500;
}
.hp-assessments-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}
.hp-assessments-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hp-assessments-list-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--navy);
}
.hp-assessments-list-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
@media (max-width: 820px) {
  .hp-assessments-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hp-assessments-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   SECTION C — HP-PRICING-STRIP (4-column ladder)
   ============================================================ */
.hp-pricing-strip {
  background: var(--white);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}
.hp-pricing-strip-desc {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.hp-pricing-strip-grid {
  list-style: none;
  margin: 64px auto var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  max-width: 1280px;
}
.hp-pricing-strip-col {
  background: var(--white);
  border-radius: 20px;
  padding: 56px var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-xl-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.hp-pricing-strip-col:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl-heavy);
}
.hp-pricing-strip-col--pro:hover {
  transform: scale(1.1) translateY(-4px);
}
.hp-pricing-strip-price {
  font-size: 56px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-pricing-strip-claim {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  max-width: 220px;
}
.hp-pricing-strip-micro {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hp-pricing-strip-col--pro {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl-heavy);
  z-index: 1;
  position: relative;
}
.hp-pricing-strip-price--cyan {
  color: var(--cyan);
}
.hp-pricing-strip-price-unit {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: baseline;
}
.hp-pricing-strip-cta {
  margin-top: var(--space-1);
  background: var(--cyan);
  color: var(--white);
}
.hp-pricing-strip-cta:hover {
  background: var(--cyan);
}
.hp-pricing-strip-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
}
.hp-pricing-strip-features li { margin: 0; }
.hp-pricing-pro {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}
.hp-pricing-pro-lead {
  margin: 0 auto;
  max-width: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray-700);
  white-space: nowrap;
}
@media (max-width: 820px) {
  .hp-pricing-pro-lead {
    white-space: normal;
    max-width: 640px;
  }
}
.hp-pricing-pro-cta {
  margin: var(--space-3) auto 0;
  max-width: 640px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
}
.hp-pricing-pro-link {
  color: var(--pink);
  text-decoration: none;
}
.hp-pricing-pro-link:hover {
  text-decoration: underline;
}
.hp-pricing-strip-link {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: 14px;
  font-weight: 500;
  color: var(--pink);
  text-decoration: none;
}
.hp-pricing-strip-link:hover {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .hp-pricing-strip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .hp-pricing-strip-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .hp-pricing-strip-price {
    font-size: 44px;
  }
}

/* ============================================================
   TRUST EXCERPT — static report-2512 excerpt
   Mirrors the in-report register: no card chrome, plain text,
   centred arc gauge, footer notes.
   ============================================================ */
.trust-excerpt-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 560px;
  height: 652px;
  margin-left: 0;
  background: var(--white);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transform: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.06);
}
.trust-excerpt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 50px;
  height: 100%;
  box-sizing: border-box;
}
.trust-excerpt-gauge {
  padding: var(--space-2) 0 var(--space-1);
  gap: var(--space-1);
}
.trust-excerpt-lead {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.trust-excerpt-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.trust-excerpt-stamp {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
  margin-top: var(--space-1);
}
.trust-excerpt-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-3);
}
.trust-excerpt-gauge-svg {
  width: 140px;
  height: 100px;
  display: block;
}
.trust-excerpt-gauge-track {
  fill: none;
  stroke: var(--gray-light);
  stroke-width: 14;
  stroke-linecap: round;
}
.trust-excerpt-gauge-fill {
  fill: none;
  stroke: var(--pink);
  stroke-width: 14;
  stroke-linecap: round;
}
.trust-excerpt-gauge-pct {
  font-size: 36px;
  font-weight: 700;
  fill: var(--pink);
  letter-spacing: -0.02em;
}
.trust-excerpt-gauge-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
}
.trust-excerpt-gauge-dims {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 340px;
}
.trust-excerpt-notes {
  border-top: 1px solid var(--gray-light);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.trust-excerpt-notes p {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.trust-excerpt-notes strong {
  color: var(--navy);
  font-weight: 600;
}

/* ============================================================
   ============================================================
   FINAL MOBILE PASS — comprehensive responsive overrides
   This block lives at the bottom so it wins the cascade over
   any earlier section-specific media queries. Two breakpoints:
     768px → tablet/large phone
     480px → small phone
   ============================================================
   ============================================================ */

@media (max-width: 768px) {
  /* Container gutter is set in the @720px rule above (30px). No
     override here on purpose — keeping a single source of truth
     prevents per-section paddings from doubling up. */

  /* ============================================================
     HERO PANEL
     ============================================================ */
  .landing-hero-panel {
    margin: 16px 12px 0;
    border-radius: 28px;
    padding: calc(var(--topbar-height) + 28px) 20px 0;
  }
  .landing-hero-content {
    max-width: 100%;
  }
  .landing-hero-title {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.08;
    margin-bottom: var(--space-3);
  }
  .landing-hero-desc {
    font-size: 15px;
    line-height: 1.5;
    /* Defeat desktop's nowrap so the subtitle wraps cleanly */
    white-space: normal;
    padding: 0 4px;
    margin-bottom: 28px;
  }
  .landing-hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
    padding: 0 8px;
  }
  .landing-hero-btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 16px;
  }
  /* Full-bleed gradient on mobile — the panel touches the top edge
     of the viewport (no white margin above) and bleeds straight
     into the section below. The navbar floats *over* the gradient
     instead of above it, removing the awkward "gradient starts low"
     gap caused by the desktop floating-pill pattern. */
  .landing-hero-panel {
    margin: 0;
    /* Flat band — square corners on all four sides so the gradient
       runs edge-to-edge horizontally and has no curved bottom that
       would expose white pockets at the bottom-left/right. The text
       content gets its own horizontal padding so it doesn't touch
       the screen edges. Bottom padding is 0: the action-cards
       carousel inside the panel provides its own 10px bottom
       padding for the gap between cards and panel edge. Free /
       Explore keep their own bottom padding via the more-specific
       `.landing-hero--no-image .landing-hero-panel` rule. */
    border-radius: 0;
    padding: calc(var(--topbar-height) + 8px) 0 0;
  }
  .landing-hero-panel .landing-hero-content {
    padding-left: 20px;
    padding-right: 20px;
  }
  .landing-hero-image {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 28px 0 -32px;
    border-radius: 14px;
  }
  .landing-hero-image-frame {
    /* Match the carousel's built-in mobile design ratio so its
       inner graphics (already tuned for 240×170 in
       hero-carousel.css) sit cleanly inside without scaling */
    aspect-ratio: 240 / 170;
    border-radius: 14px;
  }
  /* Use the carousel's native mobile dimensions instead of
     forcing the desktop 1100×460 + transform-scale. The
     carousel's own @media rule already adjusts fonts, padding
     and stat sizes for 240×170, so no scaling is needed and
     the inner graphics render at correct proportions. */
  .landing-hero-image-frame--carousel .hero-carousel {
    width: 240px;
    height: 170px;
    transform: none;
  }
  /* Center the now-smaller frame in the panel */
  .landing-hero-image {
    max-width: 280px;
    margin: 28px auto -32px;
  }
  /* The next section (.hp-stats) no longer needs a giant top
     padding to make room for the hanging image. */
  .landing-hero--panel + .home-search-row {
    padding-top: 24px;
  }

  /* On mobile we drop the white pill entirely and let the navbar
     sit directly on the gradient. Logo, hamburger and language
     icon all flip to white so they read against the pink.
     All these overrides are gated on `body.page-home` because
     home.css is also loaded by /free and /explore (which have
     white backgrounds and need the default black navbar). */
  body.page-home .top-bar.transparent {
    padding: 10px 20px 0;
    align-items: center;
  }
  body.page-home .top-bar.transparent .top-bar-inner {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    height: auto;
  }
  /* Show the white logo, hide the dark one (reverses the desktop
     pill rule which forces logo-color visible). On mobile the
     wordmark is the visible logo (.logo-full is hidden via base.css),
     so we also flip wordmark-color → wordmark-inverse here. */
  body.page-home .top-bar.transparent .logo-full.logo-inverse {
    display: block;
  }
  body.page-home .top-bar.transparent .logo-full.logo-color {
    display: none;
  }
  body.page-home .top-bar.transparent .logo-wordmark.logo-inverse {
    display: block;
  }
  body.page-home .top-bar.transparent .logo-wordmark.logo-color {
    display: none;
  }
  /* White nav controls on the gradient. */
  body.page-home .top-bar.transparent .mobile-menu-btn,
  body.page-home .top-bar.transparent .mobile-search-btn,
  body.page-home .top-bar.transparent .mobile-profile-btn,
  body.page-home .top-bar.transparent .nav-lang-trigger {
    color: var(--white);
  }
  body.page-home .top-bar.transparent .nav-lang-trigger svg {
    stroke: var(--white);
    color: var(--white);
  }
  /* Ghost-white avatar over the gradient (matches the white logo
     and hamburger). Reverts to solid black once scrolled. */
  body.page-home .top-bar.transparent .top-bar-user-avatar {
    background: var(--white);
    color: var(--navy);
    box-shadow: none;
  }
  /* Credits / Upgrade pill flips to white-on-gradient over the hero
     (base.css defaults to black for inner pages). */
  body.page-home .top-bar.transparent .top-bar-pill-credits,
  body.page-home .top-bar.transparent .top-bar-pill-upgrade {
    color: var(--white);
    border-color: var(--white);
  }
  body.page-home .top-bar.transparent .top-bar-pill-credits:hover,
  body.page-home .top-bar.transparent .top-bar-pill-upgrade:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
  }
  /* Once the user scrolls past the gradient, restore the white
     navbar with dark controls (the existing .scrolled rules cover
     text colours; we just need to reverse our white-on-gradient
     overrides for the logo + icons) */
  body.page-home .top-bar.transparent.scrolled {
    background: var(--white);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    /* Mirror the unscrolled mobile padding (the desktop rule sets
       6px 56px 0 on .scrolled which is more specific than our
       .transparent override and would otherwise indent the
       hamburger/avatar inward by ~56px). */
    padding: 10px 20px 0;
    align-items: center;
  }
  /* Cancel the desktop floating-pill style on .top-bar-inner in
     scrolled state — on mobile we want the inner row to stay
     full-width with the same logo-left / avatar-right layout as
     the unscrolled (transparent) state, just with a white bg
     provided by the parent .top-bar above. Height collapses to
     `auto` to match the unscrolled state and inner pages. */
  body.page-home .top-bar.transparent.scrolled .top-bar-inner {
    background: transparent;
    border-radius: 0;
    padding: 0;
    height: auto;
    max-width: none;
    box-shadow: none;
  }
  body.page-home .top-bar.transparent.scrolled .logo-full.logo-inverse {
    display: none;
  }
  body.page-home .top-bar.transparent.scrolled .logo-full.logo-color {
    display: block;
  }
  /* Mobile uses the wordmark (not the full logo). The unscrolled rule
     above flips wordmark to white over the gradient; once scrolled
     onto the white bar we have to flip it back to the black wordmark
     or it disappears against the white. */
  body.page-home .top-bar.transparent.scrolled .logo-wordmark.logo-inverse {
    display: none;
  }
  body.page-home .top-bar.transparent.scrolled .logo-wordmark.logo-color {
    display: block;
  }
  body.page-home .top-bar.transparent.scrolled .mobile-menu-btn,
  body.page-home .top-bar.transparent.scrolled .nav-lang-trigger {
    color: var(--navy);
  }
  body.page-home .top-bar.transparent.scrolled .nav-lang-trigger svg {
    stroke: var(--navy);
    color: var(--navy);
  }
  /* Reverse the ghost-white avatar override (used over the gradient)
     so the scrolled state matches inner pages: solid black bg with
     white initials. */
  body.page-home .top-bar.transparent.scrolled .top-bar-user-avatar {
    background: var(--navy);
    color: var(--white);
  }

  /* ============================================================
     STATS STRIP
     ============================================================ */
  .hp-stats {
    /* 24px gutter on each side per design spec — matches the
       sibling mobile sections. The horizontal padding was previously
       0, which let the pill touch the screen edges.
       Top padding tightened from 80px to 30px per design feedback —
       the previous gap below the hero was too large. */
    padding: 30px 24px var(--space-6);
  }
  .hp-stats-list {
    gap: var(--space-4) var(--space-5);
  }
  .hp-stats-num {
    font-size: 36px;
  }
  .hp-stats-label {
    font-size: 11px;
  }
  /* Hide the "100 products" stat on mobile to keep the row from
     wrapping awkwardly. */
  .hp-stats-item--hide-mobile {
    display: none;
  }

  /* ============================================================
     HP REN CHAT (Section A)
     ============================================================ */
  .hp-ren-chat {
    /* 24px gutter to match the rest of the mobile sections.
       .hp-ren-chat does NOT use .landing-container, so the gutter
       has to live here. */
    padding: var(--space-8) 24px;
  }
  .hp-ren-chat-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Release fixed height on the text block so it can flow */
  .hp-ren-chat-text {
    height: auto;
    min-height: 0;
  }
  /* On mobile, lock the chat panel to a compact fixed height and
     scroll the conversation inside it instead of pushing the page
     down as new messages stream in. */
  .hp-ren-chat-panel {
    height: 260px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hp-ren-chat-stream {
    height: auto;
    min-height: 0;
  }
  .hp-ren-chat .section-title,
  .sims-section .section-title,
  .hp-pricing-strip .section-title,
  .trust-section .section-title,
  .hp-assessments .section-title {
    font-size: 28px;
    line-height: 1.15;
  }
  .hp-pricing-strip-price {
    font-size: 28px;
  }

  /* "Who it's for" cards: vertical stack on mobile, one per row. */
  .who-cards-row {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 14px;
  }
  .who-card {
    width: 100%;
    max-width: none;
    padding: 20px 18px;
    border-radius: 16px;
  }
  .who-card-heading {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .who-card-desc {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .who-card-pricing {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .who-card-cta {
    font-size: 14px;
  }

  /* ============================================================
     "WHAT RENATUS IS" / TRUST SECTION
     ============================================================ */
  .trust-section {
    padding: 56px 0;
  }
  .trust-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  /* Place the text first and the source-check visual after it on
     mobile (DOM order is panel → text on desktop). */
  .trust-content .trust-text {
    order: 1;
  }
  /* Hide the "View our legal policies" link on mobile to keep the
     section compact. */
  .trust-content .trust-feature-link {
    display: none;
  }
  .trust-content .sc-panel {
    order: 2;
    /* Compact mobile treatment: tighter padding, smaller type, hide
       the cross-checked sources block (BNEF/MOIT) so the panel
       stays short without losing the live-source-check proof. */
    padding: 18px 18px;
    border-radius: 16px;
    box-shadow: 0 12px 30px -12px rgba(63, 53, 56, 0.18);
  }
  .trust-content .sc-panel .sc-label {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .trust-content .sc-panel .sc-claim {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .trust-content .sc-panel .sc-sources-title {
    font-size: 10px;
    margin-bottom: 8px;
  }
  /* Show only the first source on mobile */
  .trust-content .sc-panel .sc-source {
    padding: 8px 0;
  }
  .trust-content .sc-panel .sc-source:nth-of-type(3),
  .trust-content .sc-panel .sc-source:nth-of-type(4) {
    display: none;
  }
  .trust-content .sc-panel .sc-source-logo {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .trust-content .sc-panel .sc-source-title {
    font-size: 13px;
  }
  .trust-content .sc-panel .sc-source-meta {
    font-size: 10px;
  }
  .trust-content .sc-panel .sc-verdict {
    margin-top: 12px;
    padding-top: 12px;
  }
  .trust-content .sc-panel .sc-confidence {
    font-size: 11px;
    padding: 5px 10px;
  }
  .trust-text--left {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .trust-feature-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  /* Source-check panel — fluid width, tighter padding */
  .sc-panel {
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  /* ============================================================
     ASSESSMENTS (Section B)
     ============================================================ */
  .hp-assessments {
    padding: 56px 0;
  }
  .hp-assessments-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    /* Reset desktop's negative margin that pulled the radar left */
    margin-left: 0;
  }
  .hp-assessments-example {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    justify-self: center;
  }
  .hp-radar { width: 100%; }
  /* Hide the 6-item assessments bullet list on mobile — the radar
     and CTA already convey the offering, and the list is the single
     biggest space hog in this section on a phone. */
  .hp-assessments-list {
    display: none;
  }

  /* ============================================================
     SIMULATIONS / SIMS SECTION
     ============================================================ */
  .sims-section {
    padding: 56px 0;
  }
  .sims-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Place the section text first and the simulation report after
     it on mobile (DOM order is report → text on desktop). */
  .sims-layout .sims-intro {
    order: 1;
  }
  .sims-layout .trust-preview {
    order: 2;
  }
  /* On mobile, the report excerpt card carries the section instead
     of the product bullet list — hide the list. */
  .sims-list {
    display: none;
  }
  /* Desktop adds a 48px margin below the desc to space it from the
     bullet list. With the list hidden on mobile, that gap sits
     between the paragraph and the "Try now ›" link and looks
     stranded — tighten it back to a normal paragraph spacing. */
  .sims-section .sims-desc {
    margin-bottom: var(--space-3) !important;
  }
  /* The desktop excerpt card is fixed at 560×652; make it fluid
     so it never overflows a phone viewport */
  .trust-excerpt-link {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
  }
  .trust-excerpt {
    padding: 28px 24px;
  }
  /* Show only the first sentence of the body and trail with "..."
     so the report card stays compact on a phone. */
  .trust-excerpt-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trust-excerpt-gauge-svg {
    width: 120px;
    height: 86px;
  }
  .sims-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sims-card {
    padding: 18px 20px;
  }

  /* ============================================================
     PRICING STRIP
     ============================================================ */
  .hp-pricing-strip {
    padding-left: 0;
    padding-right: 0;
  }
  .hp-pricing-strip .landing-container {
    /* Let the carousel reach the viewport edges so cards can peek
       in/out without an awkward white gutter. The eyebrow / title /
       description below get their own 20px gutter. */
    padding-left: 0;
    padding-right: 0;
  }
  .hp-pricing-strip .section-eyebrow,
  .hp-pricing-strip .section-title,
  .hp-pricing-strip-desc,
  .hp-pricing-pro {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* Convert the 5-column grid into a horizontal snap carousel.
     Initial scroll position is set in JS so the $20 (pro) card
     starts centred. */
  .hp-pricing-strip-grid {
    display: flex;
    grid-template-columns: none;
    margin-top: 32px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Symmetric side padding so the first/last card can sit dead
       centre when snapped. Calculated as (100vw - card width) / 2
       where the card width below is 70vw, max 260px. Generous
       vertical padding so card shadows aren't clipped. */
    padding: 12px max(20px, calc((100vw - 260px) / 2)) 24px;
    scroll-padding-left: max(20px, calc((100vw - 260px) / 2));
    /* Let cards sit at their natural height (the pro card is taller
       than the others) and centre them vertically against the
       (taller) pro card. */
    align-items: center;
  }
  .hp-pricing-strip-grid::-webkit-scrollbar {
    display: none;
  }
  .hp-pricing-strip-grid > li {
    flex: 0 0 auto;
    width: min(70vw, 260px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .hp-pricing-strip-col {
    padding: 24px 18px;
    box-sizing: border-box;
  }
  /* Desktop scales the pro card 1.1x for emphasis; on a phone that
     reads as way too big. Keep a small 1.04x bump so it still feels
     emphasised without dwarfing its neighbours. */
  .hp-pricing-strip-col--pro {
    transform: scale(1.04);
  }
  .hp-pricing-strip-price {
    font-size: 36px;
  }
  .hp-pricing-pro {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
  }
  .hp-pricing-pro-cta {
    font-size: 17px;
  }

  /* ============================================================
     LEVEL UP
     ============================================================ */
  .levelup-section {
    padding: 56px 0 64px;
  }
  .levelup-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .levelup-animation,
  .levelup-animation--wide {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* ============================================================
     CHAT WIDGET (Ren FAB) — keep the icon present but
     smaller so it doesn't dominate a 390px viewport
     ============================================================ */
  .ren-fab-icon {
    width: 64px !important;
    height: 64px !important;
  }
  .ren-fab-text {
    display: none;
  }
  .ren-chat-popup {
    bottom: 88px;
  }
}

/* ── Small phones (≤480px) refinements ─────────────────────── */
@media (max-width: 480px) {
  .landing-hero-panel {
    margin: 0;
    /* Flat band — square corners on all four sides, matching the
       ≤768px rule so the gradient stays flush to the viewport edge
       on small phones too. Bottom padding 0; the carousel inside
       provides its own ~10px gap from cards to panel edge. */
    border-radius: 0;
    padding: calc(var(--topbar-height) + 6px) 0 0;
  }
  .landing-hero-title {
    font-size: clamp(30px, 9.5vw, 40px);
  }
  .landing-hero-desc {
    font-size: 14px;
  }
  .hp-stats {
    padding: 30px 30px var(--space-5);
  }
  .hp-stats-list {
    gap: var(--space-3) var(--space-4);
  }
  .hp-stats-num { font-size: 30px; }
  .trust-section,
  .sims-section,
  .levelup-section,
  .hp-assessments {
    padding-top: 44px;
    padding-bottom: 44px;
  }
  .sc-panel { padding: 20px 16px; }
  .hp-pricing-strip-col {
    padding: 28px 16px;
  }
  .hp-pricing-strip-price { font-size: 38px; }
  .trust-excerpt { padding: 22px 18px; }
}

/* ── Performance: trim heavy effects on small screens ──────── */
@media (max-width: 768px) {
  /* Remove decorative drop shadows from oversized SVGs that
     can cause repaint cost on low-end devices */
  .hp-radar { filter: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sc-panel, .hp-ren-chat-msg, .hp-ren-chat-typing span {
    animation: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   HOME-ONLY MOBILE HERO LAYOUT (two-wrapper approach)
   The home hero markup wraps the title/desc/chat in
   `.home-hero-copy` and the cards in `.home-hero-carousel`
   (templates/pages/public/home.html). Both class names exist
   nowhere else in the codebase, so every rule below is
   guaranteed scoped to the home page — Free / Explore are not
   touched.
   Goals on phones:
   ① The copy block must NEVER bleed past the viewport. The
      original `.landing-hero-desc` has `white-space: nowrap`
      (home.css:433) which forces the description onto a single
      line wider than any phone. Fix locally inside the wrapper.
   ② The cards become a horizontal scroll-snap carousel — two
      cards visible per view, swipe to reveal the rest.
   ────────────────────────────────────────────────────────── */
/* Default-hide the carousel arrow buttons; they're shown only
   inside the mobile media query below. The wrapper isn't a
   carousel on desktop. */
.home-hero-carousel-arrow {
  display: none;
}

@media (max-width: 768px) {
  /* ── Wrapper ① : copy block (title + desc + Ren input) ─── */
  .home-hero-copy {
    /* Fixed pixel width on mobile — using `width: 100%` made
       the wrapper inherit the panel's bloated width (the
       carousel sibling was pushing the panel wider than the
       viewport). Hard-coding a number breaks that dependency
       so the copy sits inside the viewport regardless of what
       the carousel does. */
    width: 370px;
    /* Cap at viewport so the wrapper never exceeds the device
       width on tiny phones (e.g. 320px iPhone SE). Using vw
       (viewport-relative) instead of % so it can't be polluted
       by a wider parent. */
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* 10px side gutters so "Fuel your Brain" gets the full 350px
       width it needs to fit on one line at the 52px font size on a
       370px viewport (370 wrapper − 20 total gutter = 350 content).
       Was 20px; trimmed to 10px to keep the heading on one line.
       Description and chat input sit close to but never flush to
       the viewport edge. */
    padding-left: 10px;
    padding-right: 10px;
    /* Pull the heading up by 30px on mobile to tighten the gap
       between the navbar and "Fuel your Brain". Negative margin
       on this wrapper avoids touching the shared
       `.landing-hero-content` rule used by Free / Explore. */
    margin-top: -45px;
    /* Defensive clip: contain any rogue wide child inside the
       wrapper instead of letting it push the layout wider. */
    overflow-x: hidden;
  }
  /* Allow normal wrapping for the description on home only. */
  .home-hero-copy .landing-hero-desc {
    white-space: normal;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.45;
    padding: 0 4px;
  }
  /* Mobile home hero heading. User has explicitly pinned this at
     52px (not a clamp) — every responsive scaling attempt has been
     reverted. Do NOT replace with a clamp() or vw-based value.
     To keep "Fuel your Brain" on ONE line at 52px we (a) negate the
     wrapper's 10px side padding via negative margins so the heading
     gets the full 370px width while desc + chat keep their gutter,
     and (b) tighten letter-spacing slightly (–0.04em vs the desktop
     –0.02em) which shaves a few extra pixels. */
  .home-hero-copy .landing-hero-title {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-left: -10px;
    margin-right: -10px;
    max-width: calc(100% + 20px);
  }
  /* Force the chat input + its inner pill to respect the
     wrapper width — `box-sizing: border-box` so padding is
     included in the 100% width. */
  .home-hero-copy .landing-hero-chat,
  .home-hero-copy .landing-hero-chat .irc-input-wrapper,
  .home-hero-copy .landing-hero-chat .irc-input-pill {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Wrapper ② : cards carousel ──────────────────────── */
  .home-hero-carousel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Positioning context for the prev/next arrow buttons that
       sit as absolute children of this wrapper (see further
       below). */
    position: relative;
  }
  /* Flip the 2×4 CSS grid into a horizontal flex scroller.
     Scoped via `.home-hero-carousel` so no other grid in the
     site can be affected. */
  .home-hero-carousel .hero-action-grid {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    /* overflow-x:auto forces overflow-y to clip; give vertical
       padding so the cards' drop-shadow + tap-lift render
       inside the scroller rather than being chopped off. Use
       existing spacing tokens. */
    padding-top: var(--space-4);
    padding-bottom: var(--space-3);
    /* Horizontal gutter inside the scroll container. The
       padding is part of the scrollable area, so the first
       and last card's shadows render fully into it at the
       scroll extents instead of being clipped at the edge. */
    padding-inline: var(--space-5);
    /* Make scroll-snap respect the gutter so Card 1 and the
       last card snap fully into view (with the gutter still
       visible) at scrollLeft=0 and scrollLeft=max. */
    scroll-padding-inline: var(--space-5);
    /* Proximity (not mandatory) so the user can rest at either
       scroll extent without the browser snapping back. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar — arrows + peek provide discoverability. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* ── Prev / next navigation arrows (mobile only) ─────────
     Sit absolute over the carousel edges, sized in tokens, dark
     pill on white panel. Hidden on desktop (default `display:
     none` below); only shown inside this mobile media query. */
  .home-hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--navy);
    color: var(--white);
    cursor: pointer;
    z-index: 2;
  }
  .home-hero-carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .home-hero-carousel-arrow--prev { left: var(--space-1); }
  .home-hero-carousel-arrow--next { right: var(--space-1); }
  .home-hero-carousel-arrow svg {
    width: var(--space-5);
    height: var(--space-5);
    display: block;
  }
  /* The figure parent had a -32px bottom margin that was meant
     to pull the desktop cards into the section below; on mobile
     we just added 36px bottom padding inside the carousel for
     the shadow, so cancel that pull-down to keep the gradient
     panel sitting cleanly under the cards. */
  .home-hero-carousel .landing-hero-image--cards {
    margin-bottom: 0;
  }
  .home-hero-carousel .hero-action-grid::-webkit-scrollbar {
    display: none;
  }
  /* Mobile-only: trim the trailing "— not for you, with you"
     tagline from the hero description. The template wraps this
     fragment in a `.landing-hero-tagline` span and supplies its
     own trailing period after the span, so hiding the span here
     leaves a clean sentence. Class only exists on the home
     template, so Free / Explore are unaffected. */
  .home-hero-copy .landing-hero-tagline {
    display: none;
  }
  /* Two-and-a-half cards visible per view (so a third card peeks
     past the right edge as a swipeable hint).
     IMPORTANT: this MUST stay a percentage-based formula. We
     tried `flex: 0 0 140px` (fixed pixels) and the scroll silently
     broke — the flex container ballooned to fit the cards'
     intrinsic widths instead of staying at 100% of its parent,
     which removed the overflow that scrolling depends on.
     Percentage flex-basis forces a stable circular calculation
     that pins the container at its parent's width and lets the
     children overflow normally.
     Math: (grid_width − 3 gaps) / 3.5 cards. On a 372px grid
     (typical phone) that resolves to ≈96px per card. */
  .home-hero-carousel .hero-action-grid > li {
    flex: 0 0 calc((100% - var(--space-3) * 3) / 3.5);
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Christine (28 May v22): Brand-black override for /home (home_v2).
   Brevon's vendor main.css (loaded before our token sheets) defaults
   headings to #1B2230 (slate-700) and body copy to #475569 (slate-600).
   Inspector confirmed those values landing on the .section-title H1,
   "Think through anything, faster" H2, and the "Unlike other AI…" P
   on the home page. Scoping these overrides to `body.home-v2` keeps
   the brand-black pin from leaking into other pages while raising
   specificity above the Brevon defaults so the brand navy actually
   wins the cascade. --brand-black = #0f1e41 (Brand Guidelines V3.0).
   ───────────────────────────────────────────────────────────────── */
body.home-v2 h1,
body.home-v2 h2,
body.home-v2 h3,
body.home-v2 h4,
body.home-v2 h5,
body.home-v2 h6,
body.home-v2 p,
body.home-v2 .section-title,
body.home-v2 .section-title strong,
body.home-v2 .section-desc,
body.home-v2 .hp-section-title,
body.home-v2 .hp-section-desc {
  color: var(--navy);
}