/* ============================================================================
   Hector — responsive layer
   ----------------------------------------------------------------------------
   The desktop composition (>=1440px) is the approved source of truth and is
   left untouched: every rule here lives inside a max-width media query.

   Because the design is authored with inline `style` attributes, structural
   overrides need `!important` to win the cascade (an important author rule
   beats a normal inline declaration). Values that should flow smoothly instead
   of snapping at a breakpoint are authored as `clamp()` directly in the markup,
   which needs no override at all.

   Breakpoints
     desktop  >= 1440   untouched baseline
     laptop   1024-1439 tightened gutters, no stretched measures
     tablet   768-1023  recomposed grids, 2-up cards
     mobile   <= 767    single column, stacked, touch-first
   ========================================================================== */

:root {
  /* Page gutters. Four tiers matching the desktop values already in use
     (140 header, 128 wide sections, 84 standard, 52 tight). */
  --gx-xl: 140px;
  --gx-lg: 128px;
  --gx-md: 84px;
  --gx-sm: 52px;
  /* Vertical section rhythm multiplier applied to block padding. */
  --sec-y: 1;
}

@media (max-width: 1439px) {
  :root { --gx-xl: 88px; --gx-lg: 80px; --gx-md: 64px; --gx-sm: 44px; --sec-y: .84; }
}
@media (max-width: 1023px) {
  :root { --gx-xl: 48px; --gx-lg: 48px; --gx-md: 44px; --gx-sm: 36px; --sec-y: .68; }
}
@media (max-width: 767px) {
  :root { --gx-xl: 20px; --gx-lg: 20px; --gx-md: 20px; --gx-sm: 20px; --sec-y: .54; }
}

/* --------------------------------------------------------------------------
   1. Global safety net
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  /* `clip`, never `hidden`: overflow-x:hidden turns the viewport into a scroll
     container, which silently kills every position:sticky on the page — the
     pinned hero and both capability tours depend on it. `clip` contains a stray
     pixel without creating that scroll container. */
  html, body { max-width: 100%; overflow-x: clip; }
  img, video, canvas, svg { max-width: 100%; }
  /* Media that is explicitly sized by the layout keeps its own dimensions. */
  img[style*="position: absolute"], video[style*="position: absolute"],
  canvas[style*="position: absolute"] { max-width: none; }
}

/* Horizontal gutter helpers ------------------------------------------------ */
@media (max-width: 1439px) {
  .r-gx-xl { padding-left: var(--gx-xl) !important; padding-right: var(--gx-xl) !important; }
  .r-gx-lg { padding-left: var(--gx-lg) !important; padding-right: var(--gx-lg) !important; }
  .r-gx-md { padding-left: var(--gx-md) !important; padding-right: var(--gx-md) !important; }
  .r-gx-sm { padding-left: var(--gx-sm) !important; padding-right: var(--gx-sm) !important; }
}

/* Vertical rhythm: scale block padding down as screens shrink so sections
   don't keep 110px of dead space on a phone. */
@media (max-width: 1439px) {
  .r-secy { padding-top: calc(var(--r-pt, 110px) * var(--sec-y)) !important;
            padding-bottom: calc(var(--r-pb, 120px) * var(--sec-y)) !important; }
}


/* The short chapter heading is a tablet/mobile alternative to the long
   desktop sentence; it stays out of the desktop composition entirely.
   The Analytics tour's section label is the same kind of addition: Finance
   ships one in its own markup, Analytics does not, so this one is introduced
   for the card and kept clear of the approved desktop layout. */
.r-caphead-alt,
.r-captitle--alt { display: none; }

/* Upload slots that stand in for two of the live product mocks below 1024.
   Those two screens are dense metric grids that don't survive being scaled to
   a phone-width card, so they are swapped for a real screenshot instead. */
.r-capshot { display: none; }

/* --------------------------------------------------------------------------
   2. Header + mobile navigation
   The toggle is a plain uncontrolled checkbox so it survives React re-renders
   and works with no JavaScript at all.
   -------------------------------------------------------------------------- */
.r-navtoggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }
.r-navbtn { display: none; }

@media (max-width: 1439px) {
  .r-header { padding-left: var(--gx-xl) !important; padding-right: var(--gx-xl) !important; }
}

/* Tablet & below: a minimal bar, and the nav becomes a full-screen overlay. */
@media (max-width: 1023px) {
  .r-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    /* Without !important this loses to the inline z-index:3 authored on the
       header element, which let the hero's scroll-hint (z-index:4) paint
       above the ENTIRE header stacking context — including the full-screen
       nav overlay nested inside it — regardless of the overlay's own much
       higher internal z-index. */
    z-index: 60 !important;
  }
  .r-header .r-logo { order: 0; justify-self: auto !important; position: relative; z-index: 62; }
  .r-header .r-cta  { order: 2; justify-self: auto !important; margin-left: auto; position: relative; z-index: 62; }
  .r-navbtn         { order: 3; }

  /* Bare three-line mark — no pill, no plate. */
  .r-navbtn {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 26px;
    height: 26px;
    flex: none;
    padding: 0;
    margin-left: 4px;
    background: none !important;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    z-index: 62;
    -webkit-tap-highlight-color: transparent;
  }
  /* The visual mark stays 26px; this restores a 44px touch area around it. */
  .r-navbtn::after {
    content: "";
    position: absolute;
    inset: -9px;
  }
  .r-navbtn span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1), opacity 180ms ease;
  }
  /* Homepage header sits over the dark hero photo (light-variant logo, white
     nav links) but .r-navbtn has no explicit color of its own, so it was
     inheriting the page's default black and disappearing against the photo.
     #rnav-home is the homepage's toggle checkbox specifically — Finance and
     Analytics use their own ids, so this doesn't touch their nav buttons. */
  #rnav-home + .r-navbtn { color: #fff; }

  /* Full-screen navigation overlay */
  .r-header .r-nav {
    position: fixed !important;
    inset: 0;
    z-index: 61;
    justify-self: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 var(--gx-xl) !important;
    background: var(--r-nav-bg, #151515);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 260ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1), visibility 320ms;
  }
  .r-navtoggle:checked ~ .r-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Stop the page scrolling behind the overlay. */
  .r-navtoggle:checked ~ .r-nav { overscroll-behavior: contain; }

  .r-header .r-nav > a {
    padding: 18px 0 !important;
    font-family: 'Hedvig Letters Serif', Georgia, serif !important;
    font-size: clamp(30px, 8vw, 44px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms ease, transform 320ms cubic-bezier(.4, 0, .2, 1);
  }
  .r-navtoggle:checked ~ .r-nav > a { opacity: 1; transform: none; }
  /* stagger the items in behind the panel */
  .r-navtoggle:checked ~ .r-nav > a:nth-child(1) { transition-delay: 60ms; }
  .r-navtoggle:checked ~ .r-nav > a:nth-child(2) { transition-delay: 110ms; }
  .r-navtoggle:checked ~ .r-nav > a:nth-child(3) { transition-delay: 160ms; }

  /* Current page: a rule in the accent plus full-strength colour. */
  .r-header .r-nav > a[aria-current="page"] {
    opacity: 1;
    position: relative;
    padding-left: 22px !important;
  }
  .r-header .r-nav > a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
  }

  /* Hamburger -> X (sits above the overlay so it also closes it) */
  .r-navtoggle:checked ~ .r-navbtn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .r-navtoggle:checked ~ .r-navbtn span:nth-child(2) { opacity: 0; }
  .r-navtoggle:checked ~ .r-navbtn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Light-header variant (Analytics) */
  .r-header--light .r-nav { --r-nav-bg: #EDECE8; }
}

@media (max-width: 767px) {
  /* A smaller, better-proportioned waitlist chip. */
  .r-header .r-cta a {
    padding: 8px 13px !important;
    font-size: 12.5px !important;
    border-radius: 7px !important;
    min-height: 0 !important;
  }
  .r-header .r-logo img { height: 20px !important; }
  .r-navbtn { width: 22px; height: 22px; gap: 3.5px; }
  .r-navtoggle:checked ~ .r-navbtn span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .r-navtoggle:checked ~ .r-navbtn span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   3. Generic layout collapse utilities
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .r-2col       { grid-template-columns: 1fr !important; gap: 40px !important; }
  .r-2col-keep  { gap: 40px !important; }
  .r-3col       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-4col       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-unstick    { position: static !important; top: auto !important; }
  .r-stack      { flex-direction: column !important; }
  .r-textleft   { text-align: left !important; }
}
@media (max-width: 767px) {
  .r-2col      { gap: 28px !important; }
  .r-3col      { grid-template-columns: 1fr !important; }
  .r-4col      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-3col-m2   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-hide-m    { display: none !important; }
}

/* Touch targets: any link/button that reads as a control gets a floor. */
@media (max-width: 1023px) {
  .r-tap { min-height: 44px; display: inline-flex !important; align-items: center; }
}

/* ==========================================================================
   4. Homepage
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
@media (max-width: 1439px) {
  /* 100vw includes the scrollbar gutter and causes a sliver of overflow. */
  [data-screen-label="Hero"] { width: 100% !important; }
}
@media (max-width: 1023px) {
  [data-screen-label="Hero"] { min-height: 640px !important; }
}
@media (max-width: 767px) {
  /* Use the small-viewport unit so mobile browser chrome can't clip the hero. */
  [data-screen-label="Hero"] { height: 100svh !important; min-height: 560px !important; }
  [data-screen-label="Hero"] h1 { max-width: 15ch !important; }
  [data-screen-label="Hero"] p  { font-size: 16px !important; line-height: 1.45 !important; }
}

/* Tablet and below the hero drops its button pair: "Join The Waitlist" already
   sits in the header at these widths, and removing the row lets the headline
   and standfirst carry the hero on their own. */
@media (max-width: 1023px) {
  .r-herocta { display: none !important; }
}

/* Thesis ------------------------------------------------------------------ */
@media (max-width: 1439px) { [data-screen-label="Thesis"] { padding: 120px var(--gx-sm) 134px !important; } }
@media (max-width: 1023px) { [data-screen-label="Thesis"] { padding: 92px var(--gx-sm) 100px !important; } }
@media (max-width: 767px)  { [data-screen-label="Thesis"] { padding: 64px var(--gx-sm) 68px !important; } }
@media (max-width: 1023px) {
  .r-thesis-grid { grid-template-columns: 1fr !important; gap: 20px; margin-top: 44px !important; padding-top: 36px !important; }
  .r-thesis-grid > div:first-child { padding-top: 0 !important; }
}

/* Products ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .r-products { gap: 16px !important; }
  .r-products > div { padding: 44px 40px 48px !important; }
  /* keep the screenshot bleed matched to the card padding */
  .r-products > div > div[style*="aspect-ratio"] { margin-right: -40px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Products"] { padding: 58px 0 64px !important; }
  [data-screen-label="Products"] > h2 { margin-bottom: 40px !important; padding: 0 20px; }
  .r-products { gap: 12px !important; }
  .r-products > div { padding: 34px 22px 38px !important; }
  .r-products > div > div[style*="aspect-ratio"] {
    margin-right: -22px !important;
    margin-top: 38px !important;
    padding: 24px 0 0 22px !important;
  }
  .r-products > div > a { margin-top: 28px !important; }
  .r-products > div > p  { margin-top: 30px !important; }
}

/* Logo wall --------------------------------------------------------------- */
@media (max-width: 1023px) { [data-screen-label="Logos"] .r-4col > div { min-height: 128px !important; } }
@media (max-width: 767px)  {
  [data-screen-label="Logos"] .r-4col > div { min-height: 104px !important; padding: 18px 14px !important; }
  [data-screen-label="Logos"] .r-4col img   { max-width: 92px !important; }
}

/* Stats ------------------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Stats"] { padding: 84px var(--gx-md) 92px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Stats"] { padding: 68px var(--gx-md) 74px !important; }
  /* three stats stay three-up on tablet — a 2-up grid would orphan the third */
  .r-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Stats"] { padding: 56px var(--gx-md) 60px !important; }
  [data-screen-label="Stats"] > h2 { margin-bottom: 40px !important; }
  .r-stats { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* Testimonial ------------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Testimonials"] { padding: 84px var(--gx-md) 92px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Testimonials"] { padding: 68px var(--gx-md) 74px !important; }
  .r-testi { flex-direction: column !important; min-height: 0 !important; }
  /* The card carries `flex: 3.4 1 0` for the desktop row. Once the container
     becomes a column that basis of 0 applies to HEIGHT, collapsing the card and
     clipping the quote — so let it size to its content instead. */
  .r-testi > div { flex: 0 0 auto !important; padding: 38px 34px 34px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Testimonials"] { padding: 52px var(--gx-md) 56px !important; }
  .r-testi > div { padding: 30px 24px 28px !important; }
  .r-testi blockquote { margin-top: 32px !important; line-height: 1.36 !important; }
  .r-testi > div > div:last-child { padding-top: 28px !important; }
}

/* Why Hector / Why Onchain ------------------------------------------------ */
@media (max-width: 1439px) {
  [data-screen-label="WhyHector"], [data-screen-label="WhyOnchain"] { padding: 92px var(--gx-md) 100px !important; }
}
@media (max-width: 1023px) {
  [data-screen-label="WhyHector"], [data-screen-label="WhyOnchain"] { padding: 72px var(--gx-md) 78px !important; }
  /* lead with the heading, then the list */
  .r-onchain-head { order: -1; }
  [data-screen-label="WhyHector"] .r-2col > div:last-child > div,
  [data-screen-label="WhyOnchain"] .r-2col > div:first-child > div { padding: 40px 0 44px !important; gap: 20px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="WhyHector"], [data-screen-label="WhyOnchain"] { padding: 56px var(--gx-md) 60px !important; }
  [data-screen-label="WhyHector"] .r-2col > div:last-child > div,
  [data-screen-label="WhyOnchain"] .r-2col > div:first-child > div { padding: 32px 0 34px !important; gap: 16px !important; }
  [data-screen-label="WhyHector"] .r-2col > div:last-child > div > div:first-child,
  [data-screen-label="WhyOnchain"] .r-2col > div:first-child > div > div:first-child {
    width: 46px !important; height: 46px !important; border-radius: 10px !important;
  }
  [data-screen-label="WhyHector"] p, [data-screen-label="WhyOnchain"] p { font-size: 15.5px !important; line-height: 1.55 !important; }
}

/* Security strip ---------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Security"] { padding: 80px var(--gx-sm) 88px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Security"] { padding: 64px var(--gx-sm) 70px !important; }
  .r-secgrid > div { padding: 38px 24px 34px !important; gap: 16px !important; }
  .r-secgrid > div > div:first-child { width: 92px !important; height: 92px !important; }
  .r-secgrid > div > div:first-child svg { width: 100% !important; height: 100% !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Security"] { padding: 52px var(--gx-sm) 56px !important; }
  [data-screen-label="Security"] > h2 { margin-bottom: 40px !important; }
  .r-secgrid > div { padding: 28px 14px 26px !important; }
  .r-secgrid > div > div:first-child { width: 68px !important; height: 68px !important; }
  .r-secgrid > div > div:last-child { font-size: 14px !important; text-align: center; }
}

/* Team -------------------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Team"] { padding: 92px 0 100px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Team"] { padding: 72px 0 78px !important; }
  /* `scroll-snap-align: start` snaps the first card flush to the scrollport
     edge, which swallows the container's left padding and shaves the first
     name. scroll-padding keeps the gutter inside the snap geometry. */
  .r-teamscroll { padding: 40px var(--gx-sm) 8px !important; scroll-padding-left: var(--gx-sm); }
  [data-screen-label="Team"] > div[style*="height:1px"] { margin-top: 44px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Team"] { padding: 56px 0 60px !important; }
  .r-teamhead { flex-direction: column !important; gap: 24px !important; }
  .r-teamscroll { padding: 32px var(--gx-sm) 8px !important; gap: 12px !important; scroll-padding-left: var(--gx-sm); }
  .r-teamscroll > div { min-width: 74vw !important; }
}

/* New Era CTA ------------------------------------------------------------- */
@media (max-width: 1023px) {
  [data-screen-label="New Era"] { height: auto !important; min-height: 0 !important; padding: 96px 0 !important; }
  [data-screen-label="New Era"] > div:last-child { position: relative !important; inset: auto !important; gap: 36px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="New Era"] { padding: 72px 0 !important; }
  [data-screen-label="New Era"] > div:last-child { gap: 28px !important; padding: 0 20px !important; }
  [data-screen-label="New Era"] h2 { line-height: 1.1 !important; }
  .r-subform { flex-direction: column !important; gap: 10px !important; }
  .r-subform input, .r-subform button {
    width: 100% !important; text-align: center; justify-content: center;
    padding: 15px 24px !important; font-size: 15px !important;
  }
}

/* Footer ------------------------------------------------------------------ */
@media (max-width: 1439px) { [data-screen-label="Footer"] { padding: 64px var(--gx-md) 0 !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Footer"] { padding: 56px var(--gx-md) 0 !important; }
  .r-footgrid--legal { margin-top: 44px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Footer"] { padding: 48px var(--gx-md) 0 !important; }
  .r-footgrid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .r-footgrid--legal { margin-top: 32px !important; gap: 20px !important; }
  /* the legal row's second cell spans columns that no longer exist */
  .r-footgrid--legal > div:last-child { grid-column: auto !important; }
  /* the oversized wordmark watermark is desktop flourish; it swamps a phone */
  [data-screen-label="Footer"] > div[aria-hidden] { bottom: -4% !important; opacity: .1 !important; }
  [data-screen-label="Footer"] > div[style*="height:clamp"] { height: 150px !important; }
}

/* ==========================================================================
   5. Hector Finance
   ========================================================================== */

/* Particle hero ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .r-hud { padding: 0 var(--gx-xl) 40px !important; gap: 20px !important; }
  .r-hud > div:first-child { gap: 32px !important; }
}
@media (max-width: 767px) {
  /* Shorten the pinned scroll runway — 160vh of scrub is tiring on a phone. */
  [data-screen-label="Hero Particles"] { height: 130vh !important; }
  [data-screen-label="Hero Particles"] > div { height: 100svh !important; }
  .r-hud {
    padding: 0 var(--gx-xl) 28px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .r-hud > div:first-child { gap: 26px !important; flex-wrap: wrap; }
  .r-hud span { font-size: 13px !important; }
  .r-hud > div:first-child span:last-child { font-size: 16px !important; }
  /* "Scroll to explore" competes with the figures once stacked */
  .r-hud > span:last-child { display: none !important; }
  #fx-hero h1 { letter-spacing: -0.5px !important; line-height: 1.04 !important; }
}

/* Statement band ---------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Statement"] { padding: 120px var(--gx-sm) 134px !important; } }
@media (max-width: 1023px) { [data-screen-label="Statement"] { padding: 92px var(--gx-sm) 100px !important; } }
/* The capability tour that follows centres its card inside a 100vh pinned
   frame, so it already carries generous space above it. Trimming the
   statement's trailing padding closes the gap between the two. */
@media (max-width: 767px)  { [data-screen-label="Statement"] { padding: 64px var(--gx-sm) 68px !important; } }

/* Lifecycle --------------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Lifecycle"] { padding: 92px var(--gx-md) 100px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Lifecycle"] { padding: 72px var(--gx-md) 78px !important; }
  .r-lcrow { gap: 24px !important; padding: 40px 0 44px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Lifecycle"] { padding: 56px var(--gx-md) 60px !important; }
  /* number over title rather than beside it — the side column starves the copy */
  .r-lcrow { grid-template-columns: 1fr !important; gap: 14px !important; padding: 30px 0 32px !important; }
}

/* Comparison table -> stacked rows on mobile -------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Comparison"] { padding: 92px var(--gx-md) 100px !important; } }
@media (max-width: 1023px) {
  [data-screen-label="Comparison"] { padding: 72px var(--gx-md) 78px !important; }
}
@media (max-width: 767px) {
  [data-screen-label="Comparison"] { padding: 56px var(--gx-md) 60px !important; }
  [data-screen-label="Comparison"] > h2 { margin-bottom: 40px !important; }

  /* label sits above the bar instead of a fixed-width side column */
  .r-cmphead { display: none !important; }
  .r-cmprow { grid-template-columns: 1fr !important; gap: 8px !important; padding: 14px 0 !important; }
  .r-cmprow + .r-cmprow { border-top: 1px solid rgba(255,255,255,0.1); }
  .r-cmplabel { font-size: 15px !important; }
  .r-cmpbar { height: 44px !important; }
}

/* Ecosystem reels --------------------------------------------------------- */
@media (max-width: 1439px) { [data-screen-label="Ecosystem"] { padding: 92px 0 100px !important; } }
@media (max-width: 1023px) { [data-screen-label="Ecosystem"] { padding: 72px 0 78px !important; } }
@media (max-width: 767px) {
  [data-screen-label="Ecosystem"] { padding: 56px 0 60px !important; }
  [data-screen-label="Ecosystem"] > div:first-child { padding: 0 20px 40px !important; }
  [data-screen-label="Ecosystem"] > div:last-child { gap: 16px !important; }
  [data-screen-label="Ecosystem"] > div:last-child > div > div { gap: 16px !important; }
  [data-screen-label="Ecosystem"] > div:last-child > div > div > div { width: 52px !important; height: 52px !important; }
}

/* ==========================================================================
   6. Hector Analytics
   ========================================================================== */
@media (max-width: 1439px) {
  /* hard-coded desktop measurements on the CoStar statement */
  .r-costar { width: auto !important; height: auto !important; }
}
@media (max-width: 1439px) { .r-anahero { padding: 56px var(--gx-md) 0 !important; } }
@media (max-width: 1023px) { .r-anahero { padding: 44px var(--gx-md) 0 !important; } }
@media (max-width: 767px)  { .r-anahero { padding: 32px var(--gx-md) 0 !important; } }

/* Hero media band: it bleeds edge-to-edge by negating the section gutter. */
@media (max-width: 1439px) {
  .r-anaband {
    margin-left: calc(var(--gx-md) * -1) !important;
    margin-right: calc(var(--gx-md) * -1) !important;
    width: calc(100% + var(--gx-md) * 2) !important;
  }
}
/* Headline-to-image gap widened here too: the hero standfirst that used to
   fill this space was removed, so the old 36px/28px values (tuned for
   "after a paragraph") now sit directly under the h1 and read as cramped. */
@media (max-width: 1023px) { .r-anaband { height: min(46vh, 420px) !important; margin-top: 56px !important; } }
@media (max-width: 767px)  { .r-anaband { height: min(66vh, 480px) !important; margin-top: 44px !important; } }

/* The floating prompt card sits over the photo. */
@media (max-width: 1023px) {
  .r-anacard { width: min(560px, 90%) !important; padding: 20px 20px 16px !important; }
  .r-anacard > div:first-child { font-size: 17px !important; min-height: 52px !important; }
}
@media (max-width: 767px) {
  .r-anacard { width: calc(100% - 32px) !important; top: 50% !important; padding: 16px 16px 12px !important; }
  .r-anacard > div:first-child { font-size: 15px !important; min-height: 66px !important; line-height: 1.35 !important; }
  .r-anacard button { width: 38px !important; height: 38px !important; }
}
@media (max-width: 1439px) { .r-anastate { padding: 120px var(--gx-sm) 134px !important; } }
@media (max-width: 1023px) { .r-anastate { padding: 92px var(--gx-sm) 100px !important; } }
@media (max-width: 767px)  { .r-anastate { padding: 64px var(--gx-sm) 68px !important; } }

/* ==========================================================================
   7. Pinned capability tours (Analytics Capabilities / CapabilitySection)
   --------------------------------------------------------------------------
   Desktop pins a 100vh stage for 640vh of scroll: a clickable list on one side,
   a cropped product mock on the other. Below 1024 the two columns can't
   coexist, so the section is re-composed as a single column — the active
   heading leads, the mock sits underneath — and the scroll runway is shortened
   so the tour doesn't outstay its welcome on a phone.
   ========================================================================== */
@media (max-width: 1439px) {
  .r-captext { padding: 0 0 0 var(--gx-lg) !important; }
  .r-capstage { margin-right: var(--gx-md) !important; padding: 0 36px 0 48px !important; }
  .r-capgrid { gap: 40px !important; }
}

@media (max-width: 1023px) {
  .r-capsec { min-height: 460vh !important; }
  .r-capgrid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .r-captitle { padding: 26px var(--gx-lg) 0 !important; text-align: left !important; }
  .r-captext {
    order: 0 !important;
    justify-content: flex-start !important;
    padding: 24px var(--gx-lg) 0 !important;
  }
  .r-capstage {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 0 0 24px !important;
  }
  /* The list of chapters is a desktop affordance — scroll already drives the
     active state, and 8 stacked labels would eat the whole pinned viewport. */
  .r-caplist { display: none !important; }
  .r-capcopy { margin-top: 0 !important; }
  .r-capcopy h3 { font-size: 23px !important; }
  .r-capcopy p  { margin-top: 12px !important; font-size: 15px !important; max-width: none !important; }
}

@media (max-width: 767px) {
  .r-capsec { min-height: 400vh !important; }
  .r-capgrid > .r-capstage, .r-capgrid { gap: 16px !important; }
  .r-captext { padding: 18px var(--gx-lg) 0 !important; }
  .r-capcopy h3 { font-size: 21px !important; line-height: 1.2 !important; }
  .r-capcopy p  { font-size: 14.5px !important; line-height: 1.5 !important; }
  .r-capstage { padding: 0 0 0 14px !important; }
}

/* The 1280px product mocks are deliberately cropped even on desktop. Scaling
   them to fit would render 13px UI text at 3px, so instead they are scaled
   just enough to keep the composition legible and allowed to crop as designed. */
@media (max-width: 1439px) { .r-mock { transform: scale(.84); } }
@media (max-width: 1023px) { .r-mock { transform: scale(.72); } }
@media (max-width: 767px)  { .r-mock { transform: scale(.58); } }

/* ==========================================================================
   8. Firm Intelligence cards
   ========================================================================== */
@media (max-width: 1439px) { .r-firm { padding: 92px var(--gx-md) 100px !important; } }
@media (max-width: 1023px) {
  .r-firm { padding: 72px var(--gx-md) 78px !important; }
  .r-firmgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; margin-top: 52px !important; }
  .r-firmgrid > div { min-height: 0 !important; padding: 34px 32px 38px !important; overflow: hidden !important; }
}
@media (max-width: 767px) {
  .r-firm { padding: 56px var(--gx-md) 60px !important; }
  .r-firmgrid { margin-top: 38px !important; }
  .r-firmgrid > div { padding: 26px 20px 30px !important; }
  .r-firmchips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* Third-Party Audited Security: the two auditor logos sit side by side with a
   vertical rule between them. On a phone that row is too wide, so it stacks and
   the rule turns horizontal. The wrapper also takes a min-height so this card,
   which carries far less content than its siblings, doesn't read as stunted
   next to the six-row cards above and below it. */
@media (max-width: 767px) {
  .r-auditwrap { min-height: 300px !important; }
  .r-auditrow  { flex-direction: column !important; gap: 34px !important; }
  .r-auditrule { width: 110px !important; height: 1px !important; }
}

/* .r-firmnet is a fixed 300x300px absolutely-positioned radial diagram, so it
   is scaled down like .r-mock rather than reflowed.
   `flex: none` is essential: as a flex item it would otherwise shrink below
   300px, and the ring nodes are pinned to absolute pixel coordinates measured
   against a 300px box (centred on 150px) while the middle logo uses left:50%.
   Once the box shrinks those two stop agreeing and the ring sits off-centre.
   The negative margins then pull the layout footprint back to the *scaled*
   size, so the flex parent still centres it correctly. */
@media (max-width: 1023px) {
  .r-firmnet { transform: scale(.82); flex: none !important;
               margin-left: -27px !important; margin-right: -27px !important; }
}
@media (max-width: 767px) {
  .r-firmnet { transform: scale(.72); flex: none !important;
               margin-left: -42px !important; margin-right: -42px !important; }
}

/* ==========================================================================
   9. Capability Comparison (desktop-only, 3-up card grid)
   Rebuilt from a light 3-column card layout that isn't designed to reflow —
   each card already stacks HECTOR/platform/AI as rows, so there's no tablet
   or mobile composition for it. Per request, it shows on desktop only
   (>=1440) and is hidden at laptop width and below.
   ========================================================================== */
@media (max-width: 1439px) { .r-capcmp { display: none !important; } }

/* ==========================================================================
   10. Security strip (light variant, imported into Analytics)
   ========================================================================== */
@media (max-width: 1439px) { [data-screen-label="Security"] { padding: 84px var(--gx-lg) 92px !important; } }
@media (max-width: 1023px) { [data-screen-label="Security"] { padding: 64px var(--gx-lg) 70px !important; } }
@media (max-width: 767px)  { [data-screen-label="Security"] { padding: 52px var(--gx-lg) 56px !important; } }

/* The dc-import host carries an explicit height:640vh, which outranks the
   shortened runway set on the section itself. */
@media (max-width: 1023px) { .sc-host:has(> .r-capsec) { height: 460vh !important; } }
@media (max-width: 767px)  { .sc-host:has(> .r-capsec) { height: 400vh !important; } }

/* ==========================================================================
   11. Motion & rendering cost
   ========================================================================== */

/* Honour the OS setting everywhere. The marquees and the logo wipe are
   decorative, so they stop outright rather than merely slowing down. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  /* backdrop-filter is expensive per-frame on mobile GPUs, and these chips sit
     on solid or near-solid backgrounds where the blur reads as noise anyway. */
  .r-header .r-cta a,
  [data-screen-label="Hero"] a[style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(190, 195, 192, .42) !important;
  }
  /* Long marquees at phone width redraw a lot for very little payoff. */
  [data-screen-label="Ecosystem"] > div:last-child > div > div { animation-duration: 48s !important; }
  /* Promote only what actually moves. */
  #fx-canvas, .r-mock { will-change: transform; }
}

/* ==========================================================================
   12. Capability tour as a Product-Suite card (tablet & mobile)
   --------------------------------------------------------------------------
   Scoped to `.r-capshell`, which only the Finance "For Investors" / "For Asset
   Issuers" sections use — the Analytics tour keeps its own treatment.

   The desktop split (copy one side, product UI the other) has nowhere to go on
   a narrow screen, so the section is rebuilt with the same anatomy as a
   homepage Product Suite card: a full-bleed #212121 panel running
   heading -> product UI -> body copy, the UI inset from the top and left and
   bleeding off the right, with the identical gradient dissolving its top,
   bottom and left edges back into the card.

   The section name keeps its original type and colour and stays above the card,
   exactly as on desktop — only its alignment and insets change.
   ========================================================================== */
@media (max-width: 1023px) {
  .r-capshell {
    padding: 0 !important;
    justify-content: center !important;
  }

  .r-capshell .r-captitle {
    flex: none !important;
    padding: 0 22px 18px !important;
    text-align: left !important;
  }
  .r-capshell .r-captitle--alt { display: block !important; }

  /* Swap the live mock for the uploaded screenshot. The two tours tag things
     differently, so the hide has to be scoped to match:
       - Intelligence tags each swapped branch's own wrapper, so those are hidden
         outright (a branch that isn't swapped simply has no .r-caplive);
       - Finance tags the single shared stage wrapper, so it may only be hidden
         on chapters that actually carry a slot — otherwise every chapter in the
         tour would render an empty stage. */
  .r-capshell .r-capshot { display: block !important; }
  .r-capsec--intel .r-caplive { display: none !important; }
  .r-capsec--fin .r-capstage:has(.r-capshot) .r-caplive { display: none !important; }

  /* The uploaded screenshot gets the same dissolve as the live mocks, so it
     reads as part of the card rather than a pasted-in rectangle. The stage's
     own fade is suppressed here so the two don't stack up. */
  .r-capshell .r-capstage:has(.r-capshot)::after { display: none !important; }
  .r-capshell .r-capshot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to bottom, #212121 0%, rgba(33, 33, 33, .55) 9%, transparent 22%,
                                 transparent 55%, rgba(33, 33, 33, .7) 84%, #212121 100%),
      linear-gradient(to right,  #212121 0%, rgba(33, 33, 33, .5) 6%, transparent 18%);
  }

  .r-capshell .r-capgrid {
    display: flex !important;
    flex-direction: column !important;
    /* Hug the content. Left to stretch it filled the whole pinned viewport and
       the card read as an over-long slab. */
    flex: none !important;
    background: #212121 !important;
    padding: 32px 22px 34px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* Product Suite order is heading -> UI -> body copy, but the heading and the
     paragraph are two levels down inside .r-captext > .r-capcopy, and `order`
     only sorts siblings. `display: contents` dissolves both wrappers so the
     heading, the stage and the paragraph become direct children of the card and
     can be sequenced. */
  .r-capshell .r-captext,
  .r-capshell .r-capcopy { display: contents !important; }
  .r-capshell .r-caplist { display: none !important; }

  /* Two headings ship in the markup: the long sentence (capHeading) that the
     desktop split uses, and the short section name (capTitle) that labels the
     chapter. The card wants the short one. */
  .r-capshell .r-caphead-main { display: none !important; }
  .r-capshell .r-caphead-alt  { display: block !important; }

  .r-capshell .r-capcopy h3 {
    order: 0 !important;
    flex: none !important;
    margin: 0 !important;
    font-size: clamp(22px, 2.9vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.4px !important;
    color: #fff !important;
  }

  /* The product UI: inset from the top and left, bleeding off the right edge. */
  .r-capshell .r-capstage {
    order: 1 !important;
    position: relative !important;
    flex: none !important;
    aspect-ratio: 16 / 12;
    margin: 30px -22px 0 0 !important;
    padding: 26px 0 0 22px !important;
    background: transparent !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
  }
  /* The desktop stage sizes itself in vh and carries its own edge mask; inside
     a card both fight the container, so the window governs instead. */
  .r-capshell .r-capstage > div {
    height: 100% !important;
    max-height: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .r-capshell .r-capstage > div > div { height: 100% !important; }

  /* The Product Suite fade, verbatim: top, bottom and left dissolve into the
     card; the right edge stays hard so the UI reads as running off the side. */
  .r-capshell .r-capstage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to bottom, #212121 0%, rgba(33, 33, 33, .55) 10%, transparent 22%,
                                 transparent 45%, rgba(33, 33, 33, .7) 80%, #212121 100%),
      linear-gradient(to right,  #212121 0%, rgba(33, 33, 33, .5) 8%, transparent 20%);
  }

  .r-capshell .r-capcopy p {
    order: 2 !important;
    flex: none !important;
    margin: 30px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: none !important;
    color: rgba(255, 255, 255, .68) !important;
  }

  /* the wrapper carried the cross-fade; with it dissolved, the children do */
  .r-capshell .r-capcopy h3,
  .r-capshell .r-capcopy p { animation: acFade 400ms ease; }

  /* Equal-height cards. The heading and the UI window are already a fixed size,
     so the paragraph was the only thing making some chapters taller than their
     siblings. Reserving it to the longest copy in each tour levels every card.
     Expressed in em (line-height is 1.5, so one line = 1.5em) so it tracks the
     font size, and as min-height so longer copy still grows rather than clips. */
  .r-capsec--intel .r-capcopy p,
  .r-capsec--fin   .r-capcopy p { min-height: 4.5em; }   /* 3 lines */
}

@media (max-width: 767px) {
  .r-capsec--intel .r-capcopy p { min-height: 7.5em; }   /* 5 lines */
  .r-capsec--fin   .r-capcopy p { min-height: 9em; }     /* 6 lines */
}

@media (max-width: 767px) {
  .r-capshell .r-captitle { padding: 0 20px 14px !important; }
  .r-capshell .r-capgrid { padding: 28px 20px 30px !important; }
  .r-capshell .r-capstage {
    margin: 26px -20px 0 0 !important;
    padding: 22px 0 0 20px !important;
  }
  .r-capshell .r-capcopy p { margin-top: 26px !important; font-size: 14.5px !important; }
  /* At the desktop scale a 1280px dashboard shows barely a third of itself in a
     phone-width card. Inside the card it shrinks further so the shape of the
     product — nav, chart, table — reads as a whole. */
  .r-capshell .r-mock { transform: scale(.42) !important; }
}

/* Reports stage on small screens -------------------------------------------
   Institutional Underwriting, Transparency & Protection and The HECTOR Score
   used to swap to an uploaded PNG here. They now render their real markup at
   every width, so the labels stay crisp vector text instead of a resampled
   bitmap. Tablet shows the UI at native size and lets it crop, matching what
   .r-mock does at this breakpoint; only the phone rules zoom out. */
@media (max-width: 1023px) {
  .r-capsec--fin .r-caprepwin {
    position: absolute !important;
    inset: 0 !important;
    /* the desktop stage sizes itself in vh and carries its own edge mask; both
       fight the card, and .r-capstage::after already supplies the dissolve */
    height: auto !important;
    overflow: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .r-capsec--fin .r-caprepscore { z-index: 5; }
}

@media (max-width: 767px) {
  /* A 190px card column does not survive a phone-width window, so the grid is
     zoomed out the way .r-mock is. Driving the width off the window rather than
     a fixed pixel size keeps the crop identical across phone widths. */
  .r-capsec--fin .r-caprepgrid {
    --cap-zoom: .5;
    width: calc(100% / var(--cap-zoom)) !important;
    transform-origin: left top;
    transform: scale(var(--cap-zoom));
    /* Desktop pulls the grid up 40px to crop the first row. At this zoom that
       lands mid-sentence and reads as broken text, so it starts flush instead —
       the first row is whole and the card's own top fade dissolves it. */
    margin-top: 0 !important;
  }

  /* Institutional Underwriting drops the metric wall on a phone and shows the
     score panel alone on black. At this window the 16 cards were down to ~6px
     type, which carried texture but nothing readable; the rating is the point of
     the chapter, so it gets the whole frame. */
  .r-caprep[data-cap-variant="metrics"] .r-caprepgrid { display: none !important; }

  /* The black field carries the same dissolve as the HECTOR Vaults stage — the
     gradient stops below are that fade inverted, so top, left and bottom read
     identically to every other chapter and the right edge stays hard.

     It is a mask on the field rather than the stage's ::after overlay because the
     overlay paints over everything: at Vaults' depth it swallowed the lower
     sub-scores with the backdrop. Masking the backdrop lets the fade match while
     the score panel — a sibling painting above it — stays fully opaque. */
  .r-caprep[data-cap-variant="metrics"] .r-caprepwin {
    background: #000 !important;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 10%, #000 22%,
                                 #000 45%, rgba(0, 0, 0, .3) 80%, transparent 100%),
      linear-gradient(to right,  transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%) !important;
    mask-image:
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 10%, #000 22%,
                                 #000 45%, rgba(0, 0, 0, .3) 80%, transparent 100%),
      linear-gradient(to right,  transparent 0, rgba(0, 0, 0, .5) 8%, #000 20%) !important;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* the mask above replaces it, and stacking it would dim the panel twice */
  .r-capshell .r-capstage:has(.r-caprep[data-cap-variant="metrics"])::after {
    display: none;
  }

  /* 330x344 against a ~350x256 window. Scaled to fit with room to breathe: the
     score panel is centred in the window, which is inset from the card's top and
     left and runs off its right edge, so it sits where every other chapter's UI
     sits. Larger where it stands alone than where a grid reads behind it. */
  .r-capsec--fin .r-caprepscore {
    transform: translate(-50%, -50%) scale(.54) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .8) !important;
  }
  /* Smaller than it was where it stood alone at .64: the panel has to clear the
     field's edges for that dissolve to be visible around it rather than running
     under it. */
  .r-caprep[data-cap-variant="metrics"] .r-caprepscore {
    transform: translate(-50%, -50%) scale(.55) !important;
  }

  /* Transparency & Protection and The HECTOR Score sit on a black field, and the
     first row of cards ran flush into its top and left edges. A 5px strip of the
     field on both sides gives the grid something to sit on rather than a hard cut.

     The field and the cards are masked together as one layer, so the strip
     dissolves into the card instead of ending on a visible black line — a mask on
     the field alone would fade it out from under cards that kept their own black
     background, which just moves the hard edge inward. The stage's ::after is off
     for the same reason the metric wall turns it off: two dissolves stacked read
     as one heavy one. */
  .r-caprep[data-cap-variant="protect"] .r-caprepwin,
  .r-caprep[data-cap-variant="score"] .r-caprepwin {
    background: #000 !important;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to right,  transparent 0, #000 12%, #000 100%) !important;
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to right,  transparent 0, #000 12%, #000 100%) !important;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .r-caprep[data-cap-variant="protect"] .r-caprepgrid,
  .r-caprep[data-cap-variant="score"] .r-caprepgrid {
    margin-top: 5px !important;
    margin-left: 5px !important;
  }
  .r-capshell .r-capstage:has(.r-caprep[data-cap-variant="protect"])::after,
  .r-capshell .r-capstage:has(.r-caprep[data-cap-variant="score"])::after {
    display: none;
  }

  /* The Full Stack Solution is six lifecycle stages, so the whole 2x3 block fits
     the window the same way the metric wall did. Its cards carry a 150px floor
     from the desktop layout, which would push the three rows past the frame —
     released here so the rows divide the window instead. */
  .r-caprep[data-cap-variant="stack"] .r-caprepgrid {
    --cap-zoom: .56;
    height: calc(100% / var(--cap-zoom)) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    align-content: stretch !important;
    margin: 0 !important;
  }
  .r-caprep[data-cap-variant="stack"] .r-caprepgrid > * { min-height: 0 !important; }

  /* Same reason as the metric wall: the shared dissolve is opaque well before the
     bottom, which buried Trade and Exit. These cards have no black field to mask,
     so the overlay itself is softened — edges still dissolve, just past the block.
     (Stage 5 and 6 are the end of the lifecycle; they have to be readable.) */
  .r-capshell .r-capstage:has(.r-caprep[data-cap-variant="stack"])::after {
    background:
      linear-gradient(to bottom, #212121 0%, rgba(33, 33, 33, .45) 5%, transparent 14%,
                                 transparent 88%, rgba(33, 33, 33, .45) 97%, rgba(33, 33, 33, .7) 100%),
      linear-gradient(to right,  #212121 0%, rgba(33, 33, 33, .4) 4%, transparent 12%);
  }
}

/* --------------------------------------------------------------------------
   13. Mobile section headings
   These section heads (Commercial Real Estate / Built for On Chain Finance,
   AI That Understands..., How Hector Compares, Built for institutional real
   estate...) all ship at clamp(30px,3vw,40px), which bottoms out at 30px and
   reads a step too large next to "Who is Hector Finance For" (26px on a phone).
   Matched here at the mobile end only, so laptop and desktop are unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .r-secthead { font-size: 26px !important; line-height: 1.06 !important; }
}

/* --------------------------------------------------------------------------
   14. Finance hero — connecting lines on the metrics
   A thin rule rises from each figure in the hero HUD (Tokenised pipeline,
   Liquidity available), fading out as it goes. Applies at every breakpoint,
   scaling with the viewport so it keeps its proportions on a phone.
   -------------------------------------------------------------------------- */
.r-hud > div:first-child > div {
  position: relative;
  padding-left: clamp(12px, 1.1vw, 18px);
}
.r-hud > div:first-child > div::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: clamp(64px, 11vh, 132px);
  background: linear-gradient(to top,
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, .22) 45%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  /* the HUD stacks here, so the rules shorten to match the tighter block */
  .r-hud > div:first-child > div::before { height: clamp(44px, 7vh, 76px); }
}

/* --------------------------------------------------------------------------
   15. "A New Era" footer image — bottom fade
   The section image previously ran hard into the footer. This dissolves its
   lower edge into the footer's own black on every page and at every size.
   The overlay sits above the picture but below the copy, so nothing is dimmed
   except the photograph.
   -------------------------------------------------------------------------- */
[data-screen-label="New Era"] { position: relative; }
[data-screen-label="New Era"].r-nofade::after { content: none; }
[data-screen-label="New Era"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 22vh, 260px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(12, 12, 12, 0) 0%,
    rgba(12, 12, 12, .55) 55%,
    rgba(12, 12, 12, .88) 82%,
    #0c0c0c 100%);
}
/* keep the headline, form and social row above the fade */
[data-screen-label="New Era"] > div:last-child { z-index: 2; }

/* --------------------------------------------------------------------------
   16. Hero scroll hint
   Sits midway between the centred headline and the foot of the hero, in the
   same 14px / 45% white as the hero metric labels. Every breakpoint.
   -------------------------------------------------------------------------- */
.r-scrollhint {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'PP Neue Montreal', 'Neue Montreal', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1px;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
  pointer-events: none;
}
.r-scrollhint svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 767px) { .r-scrollhint { font-size: 13px; gap: 8px; } }

/* --------------------------------------------------------------------------
   17. Mobile footer watermark
   The oversized wordmark is anchored below the fold and was being sliced in
   half by the footer edge; lift it fully into view on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  [data-screen-label="Footer"] > div[aria-hidden] {
    bottom: 20px !important;
    opacity: .12 !important;
  }
  [data-screen-label="Footer"] > div[style*="height:clamp"] { height: 118px !important; }
}

/* --------------------------------------------------------------------------
   18. Waitlist overlay on mobile
   The role and product steps lay out as a fixed-width pill grid that ran past
   the viewport; here the pills wrap and the whole panel keeps a gutter.
   -------------------------------------------------------------------------- */
/* The blurred backdrop inside the overlay is scaled 1.08, so it spills ~15px
   either side and gives the panel a horizontal scrollbar. Clip the axis while
   leaving the vertical scroll the form needs. */
.r-waitlist { overflow-x: clip; }

@media (max-width: 767px) {
  .r-waitlist > div:last-child { padding: 108px 20px 72px !important; }
  .r-waitlist h2 { font-size: 30px !important; line-height: 1.08 !important; }
  .r-waitlist p  { font-size: 15px !important; }
  /* pill rows */
  .r-waitlist > div:last-child > div[style*="flex-wrap"] {
    max-width: 100% !important;
    width: 100%;
    gap: 8px !important;
    margin-top: 28px !important;
  }
  .r-waitlist button {
    font-size: 13.5px !important;
    padding: 10px 15px !important;
    white-space: normal !important;
    max-width: 100%;
  }
  /* the email / details forms */
  .r-waitlist form { max-width: 100% !important; }
  .r-waitlist input { font-size: 16px !important; }   /* 16px stops iOS zooming on focus */
  .r-waitlist .r-tap, .r-waitlist form button { min-height: 44px; }
  /* the "join thousands" row wraps rather than pushing the panel wide */
  .r-waitlist > div:last-child > div[style*="margin-top:30px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}


/* --------------------------------------------------------------------------
   19. Hide "Home" from the desktop/laptop nav
   The logo already links home, and a persistent "Home" link reads as
   redundant once there's a full page-title in the logo lockup. It stays in
   the mobile/tablet full-screen nav (@media 1023px and below owns that), so
   this only needs to hide it from 1024px up.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .r-nav-home { display: none !important; }
}

/* --------------------------------------------------------------------------
   20. "What is HECTOR X" mission rows
   Same two-column label/body construction as the homepage "Our Mission" row,
   but living inside the existing statement sections so it shares their gutter
   and aligns with the statement copy above it. Collapses on tablet/mobile
   exactly like .r-thesis-grid does.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .r-whatis-row {
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-top: 40px !important;
  }
  .r-whatis-row > div:first-child { padding-top: 0 !important; }
}

/* --------------------------------------------------------------------------
   20. Vault Keys "Create Asset Vault Key" button — laptop
   This live table only shows from 1024px up (below that the screenshot slot
   takes over), and the full-label button only clears its own column at
   1440px+. Rather than chase exact column-width math across the 1024-1439
   band, the button collapses to its icon alone there — small enough to fit
   any realistic column width, with the label kept as an aria-label/tooltip.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .r-vaultbtn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  .r-vaultbtn-label { display: none; }
}