/* ===========================================================================
   /reviews page styles — pixel-perfect from Figma
   Source: figma.com/design/7wYnX0uiEKW7Iyv58eMFGE node 3084:5354 ("DAO LLC")
   Page namespace: .uc-*
   =========================================================================== */

/* ===== CSS VARIABLES (from Figma fill_*) ===== */
:root {
  /* Text colors */
  --uc-heading: #212935;          /* fill_I2EDQU — H1 */
  --uc-body: #4E5660;             /* fill_AXXJOJ — subtitle */
  --uc-muted: #6D737E;
  --uc-divider: #E6E7EA;          /* stroke_36M2BN — tab divider */

  /* Brand */
  --uc-teal: #008F99;             /* stroke_D6Q6AE — active tab underline */
  --uc-teal-dark: #004A5C;        /* gradient start */
  --uc-teal-tag: #147E69;         /* fill_T2CED2 — active tab tag */
  --uc-purple-tag: #4C3F7D;       /* fill_P2LKPT */
  --uc-red-tag: #DB493B;          /* fill_C49XYB */
  --uc-white: #FFFFFF;            /* fill_PMDL1M / fill_L6VBI1 */
  --uc-page-bg: #F3F4F6;          /* fill_3H98RT — page bg */

  /* Footer */
  --uc-footer-bg: #131925;        /* fill_S186YH */

  /* Promo card gradient (fill_1AVB3G) */
  --uc-promo-gradient: linear-gradient(135deg, #004A5C 0%, #008F99 100%);
}

/* ===== PAGE WRAPPER ===== */
.uc-page {
  overflow-x: hidden;
  background: var(--uc-page-bg);
}

/* ===========================================================================
   RISK VARIANT VISIBILITY  — interactive tab switcher (zero-flicker)
   All 3 variants are rendered in DOM. [data-active-risk] on .uc-page
   determines which is visible. Inline JS in UseCasesPage.astro updates
   the attribute on tab click — no navigation, no flicker.

   IMPORTANT: rules below use `.uc-page` prefix + `[data-risk]` attribute
   selector so they beat the `.uc-media__card { display: grid }` and
   `.uc-promo__variant { display: flex }` block-display rules defined later
   in this file. Specificity = (0,2,1) here vs (0,1,0) there.
   =========================================================================== */
.uc-page .uc-media__card[data-risk],
.uc-page .uc-promo__variant[data-risk] {
  display: none;
}

/* Carousel: several cards share a risk — only the --active one (managed by
   the inline script; SSR marks the first card of each risk) is shown. */
.uc-page[data-active-risk="low"]    .uc-media__card[data-risk="low"].uc-media__card--active,
.uc-page[data-active-risk="middle"] .uc-media__card[data-risk="middle"].uc-media__card--active,
.uc-page[data-active-risk="high"]   .uc-media__card[data-risk="high"].uc-media__card--active {
  display: grid;
}

.uc-page[data-active-risk="low"]    .uc-promo__variant[data-risk="low"],
.uc-page[data-active-risk="middle"] .uc-promo__variant[data-risk="middle"],
.uc-page[data-active-risk="high"]   .uc-promo__variant[data-risk="high"] {
  display: flex;
}

/* Blog: hide ONLY the featured card of the active risk (it's already on the
   Media card). All other use-case articles stay visible in the catalog grid. */
.uc-page[data-active-risk="low"]    .uc-blog__card[data-risk="low"][data-featured],
.uc-page[data-active-risk="middle"] .uc-blog__card[data-risk="middle"][data-featured],
.uc-page[data-active-risk="high"]   .uc-blog__card[data-risk="high"][data-featured] {
  display: none;
}

/* Promo variant container: each variant is the column previously held by
   .uc-promo__info (text + CTA stacked). When visible (display:flex above),
   inherit the same column layout the old single .uc-promo__info had. */
.uc-promo__variant {
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-width: 0;
}

/* Cascade isolation — keep navbar styling on white over the light bg, like .page-about does */
.page-reviews .navbar_component,
.page-reviews .navbar_component.w-variant-69a13b80-afff-f185-280c-87f400b743ed,
.page-reviews .navbar_component.is-scroll_nav {
  --neutral--neutral-100: #ffffff;
  background-color: #ffffff;
}

/* ===========================================================================
   HERO  (Figma node 3084:5355)
   layout_PIVVKW: column, gap 24, padding 216px 360px 0
   =========================================================================== */
.uc-hero {
  width: 100%;
  padding: 216px 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  box-sizing: border-box;
}

.uc-hero__content {
  /* Figma uses padding 360px each side at 1920 viewport => max 1200px inner.
     1248 = 1200 content + 2×24 side padding (border-box), so content is exactly 1200. */
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.uc-hero__head {
  /* Frame 39525: column, center, gap 16px (layout_JAH6YZ) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.uc-hero__heading {
  /* style_1UD0AK: Inter 54 / 1.35em / weight 400, center, fill #212935 */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1.35em;
  text-align: center;
  color: var(--uc-heading);
  margin: 0;
}

.uc-hero__heading strong {
  /* Mixed weight per Figma PNG — emphasized phrase is heavier than surrounding text. */
  font-weight: 700;
}

.uc-hero__subtitle {
  /* style_731QYN: Inter 20 / 1.75em / weight 400, center, fill #4E5660 */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.75em;
  text-align: center;
  color: var(--uc-body);
  margin: 0;
}

/* ===== HERO — Breadcrumbs ===== */
/* Figma component 2682:75888 — 2 level
   Default + Active variants. Figma shows white fill (#FFFFFF) but page bg is
   light — that's a Figma error inherited from the breadcrumbs component which
   is designed against dark backgrounds. On a light page, breadcrumbs use the
   page text colors instead. */
.uc-breadcrumbs {
  /* layout_CJMBAG: row, center, gap 12px */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4em;
}

.uc-breadcrumbs__link {
  color: var(--uc-body);
  text-decoration: none;
  transition: color 0.15s ease;
}

.uc-breadcrumbs__link:hover {
  color: var(--uc-heading);
}

.uc-breadcrumbs__link--active {
  color: var(--uc-heading);
  font-weight: 500;
  pointer-events: none;
}

.uc-breadcrumbs__dot {
  /* layout_4FMVAW: row, center, gap 10px, padding 3px 0 0 0 */
  width: 3px;
  height: 3px;
  background: var(--uc-muted);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===========================================================================
   TABS  (Figma node 3085:37293 "Why invest" — Cards row 1 = 3085:37303)
   Outer:  layout_9GFVEQ — column, padding 60px 0 80px
   Inner:  layout_0S115Y — row wrap, padding 0 360px (= 1200px content)
   Row:    layout_KVBJ2C — row, fill width, bottom stroke 2px #E6E7EA
   Item:   layout_WUY0VI — column center, gap 16px, padding 32px 24px
           Active tab: bottom stroke 4px #008F99 (stroke_D6Q6AE)
           Inactive: width 400px, content @ opacity 0.4
   =========================================================================== */
.uc-tabs {
  /* layout_9GFVEQ: padding 60px 0 80px (top section gap from Hero, bottom space to next section) */
  width: 100%;
  padding: 60px 0 80px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-tabs__inner {
  /* layout_0S115Y: padding 0 360px → 1200px content at 1920 viewport (1248 − 48 padding) */
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.uc-tabs__row {
  /* layout_KVBJ2C: row, fill width, bottom stroke 2px #E6E7EA (stroke_36M2BN) */
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.uc-tabs__row::after {
  /* Container bottom line (#E6E7EA, 2px) */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--uc-divider);
  z-index: 0;
}

.uc-tabs__item {
  /* layout_WUY0VI / layout_VFFWDX / layout_UV4IQF: column center, gap 16, padding 32 24, width 400 */
  flex: 1;
  max-width: 400px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  box-sizing: border-box;
  /* Buttons act as in-page tabs — strip default chrome, keep keyboard focus visible */
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  transition: opacity 0.15s ease;
}

.uc-tabs__item:focus-visible {
  outline: 2px solid var(--uc-tab-active-color, var(--uc-teal));
  outline-offset: -2px;
  border-radius: 4px;
}

.uc-tabs__item--active::after {
  /* Active bottom stroke 4px. Color comes from --uc-tab-active-color inline var
     set per-tab (teal for low / purple for middle / red for high). Falls back to teal. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--uc-tab-active-color, var(--uc-teal));
  z-index: 1;
}

/* ===== TABS — Pill (Tag frame) ===== */
.uc-tabs__pill {
  /* layout_3RGFLG: row, center, gap 8, padding 0 16 0 0; border-radius 100; backdrop-filter blur(24)
     pillColor is set inline per-tab (fill_ZF8Z5J / fill_YUP7CT / fill_0ZIUI5) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  border-radius: 100px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-tabs__pill-icon {
  /* layout_GKEMR0: 36x36 fixed, 8px padding, border-radius ~37.71 (effectively pill); inline-flex center
     iconBg is set inline per-tab (fill_JNZFNA / fill_X4DROY / fill_L13J06) */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uc-tabs__pill-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.uc-tabs__pill-text {
  /* style_YE30KH: Inter 18 / 1.35em, weight 500, white (fill_ZVZOI4) */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35em;
  color: var(--uc-white);
}

.uc-tabs__title {
  /* style_Z2LP6M: Inter 26 / 1.35em, weight 400, #212935 (fill_PFHEOO), center align */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.35em;
  text-align: center;
  color: var(--uc-heading);
  margin: 0;
}

.uc-tabs__title strong {
  /* "X% APR" is heavier per Figma reference PNG (API reports uniform 400 — see memory note). */
  font-weight: 700;
}

/* Inactive tab: Tag has opacity 0.4 AND H2 has opacity 0.4 (per Figma per-element opacity) */
.uc-tabs__item:not(.uc-tabs__item--active) .uc-tabs__pill,
.uc-tabs__item:not(.uc-tabs__item--active) .uc-tabs__title {
  opacity: 0.4;
}

/* ===========================================================================
   MEDIA  — Featured investor story for the active risk variant
   Originally Figma had a composite PNG (3085:37490). We replaced it with an
   HTML card sourced from src/data/use-cases-stories.ts so each risk page
   shows its OWN testimonial (photo + name + quote + stats + CTA).
   Layout: row at desktop (photo left ~40%, content right ~60%); column on mobile.
   Card chrome: rounded 16px, off-white bg, subtle border — same visual tier as FAQ items.
   =========================================================================== */
.uc-media {
  width: 100%;
  padding: 0 0 60px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-media__inner {
  max-width: 1248px; /* 1200 content + 48 padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.uc-media__card {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 48px;
  background: #F9FAFB;
  border: 1px solid #ECEDEF;
  border-radius: 16px;
  padding: 32px;
  align-items: stretch;
  overflow: hidden;
}

.uc-media__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

.uc-media__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uc-media__badge {
  /* Same pattern as Blog card badge — absolute top-left, risk color, white text */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  color: var(--uc-white);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35em;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-media__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.uc-media__content {
  position: relative; /* anchor for the absolute coral quote-mark */
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.uc-media__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uc-media__name {
  /* style_A4WQ4J: Inter 28 / 1.35 / 600, #3A424E (fill_61W637) */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.35em;
  color: #3A424E;
  margin: 0;
}

.uc-media__role {
  /* style_8AP4N5: Inter 18 / 1.35 / 500, #6D737E — was 14px (Figma audit 2026-06-11) */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35em;
  color: var(--uc-muted);
  margin: 0;
}

.uc-media__quote {
  /* style_QIIPNF: Inter 16 / 1.75 / 400, +0.25% tracking, #212935 — was lh 1.6 */
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75em;
  letter-spacing: 0.0025em;
  color: #212935;
  margin: 0;
  padding-left: 0;
}

.uc-media__quote-mark {
  /* Figma Vector 3085:37496: 63×48 coral #FD5042 at card x:1031 y:59 of 1200-wide
     card (content starts x:600) → top-right of the content column, clear of the name. */
  position: absolute;
  top: 26px;
  right: 74px;
  width: 63px;
  height: 48px;
}

.uc-media__stats {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uc-media__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #ECEDEF;
}

.uc-media__stat:first-child { border-top: none; padding-top: 0; }

.uc-media__stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35em;
  color: #3A424E;
}

.uc-media__stat-value {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35em;
  color: #3A424E;
}

.uc-media__stat-value--accent {
  /* style_E20YL7: Inter 16 / 1.35 / 600 — was 800 (the 800 weight belongs to
     the Blog catalog accent style_IQ7S1D, not the media card) */
  font-weight: 600;
  color: #131925;
}

.uc-media__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.uc-media__cta {
  /* Figma button Large (20:9801) + style_ZUL9W1: Inter 18 / 1.35 / 600,
     −1.39% tracking, padding 14 24 — was 16px / 12 24 (Figma audit 2026-06-11) */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  background: var(--uc-teal);
  color: var(--uc-white);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35em;
  letter-spacing: -0.014em;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.uc-media__cta:hover {
  transform: translateY(-1px);
  background: var(--uc-teal-dark);
  box-shadow: 0 8px 16px rgba(0, 74, 92, 0.18);
}

/* ===========================================================================
   PROMO CTA  (Figma node 3169:43520 / 3169:43562 "Content")
   layout_362IXF: row wrap, padding 25 360 0 (top gap before, container 1200)
   layout_VBKTEE: row, center, gap 42, padding 48 16; border-radius 16
   fill_1AVB3G: linear-gradient(135deg, #004A5C 0%, #008F99 100%)
   Left:  Illustration  600x286
   Right: Info — H2 28/1.35 500 white + p 16/1.75 400 #ECEDEF + CTA button
   CTA: white bg, 8px radius, padding 14 24 14 16, house icon 28px + text 18/1.35 600 #004A5C
   =========================================================================== */
.uc-promo {
  width: 100%;
  padding: 25px 0 80px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-promo__inner {
  max-width: 1248px; /* 1200 content + 48 padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.uc-promo__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 42px;
  padding: 48px 16px;
  background: var(--uc-promo-gradient);
  border-radius: 16px;
}

.uc-promo__illustration {
  flex: 0 0 600px;
  width: 600px;
  max-width: 100%;
}

.uc-promo__illustration img {
  display: block;
  width: 100%;
  height: auto;
}

.uc-promo__info {
  /* layout_BGP3JM: column, gap 32, fill horizontal */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.uc-promo__text {
  /* layout_BV134M: column, stretch, gap 8 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uc-promo__heading {
  /* style_GZ9DW7: Inter 28 / 1.35em / weight 500, left, white */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.35em;
  color: var(--uc-white);
  margin: 0;
}

.uc-promo__paragraph {
  /* style_S3EY8L: Inter 16 / 1.75em / weight 400, left, #ECEDEF (fill_WHP1FN) */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75em;
  color: #ECEDEF;
  margin: 0;
}

.uc-promo__cta {
  /* layout_3P273M: row, center, gap 8, padding 14 24 14 16 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px 14px 16px;
  background: var(--uc-white);
  color: var(--uc-teal-dark);  /* fill_200OZQ #004A5C */
  border-radius: 8px;
  text-decoration: none;
  align-self: flex-start;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.uc-promo__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 74, 92, 0.18);
}

.uc-promo__cta-icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--uc-teal-dark);
}

.uc-promo__cta-text {
  /* style_0PTW9J: Inter 18 / 1.35em / weight 600, letter-spacing -1.388%, center, #004A5C */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35em;
  letter-spacing: -0.01388em;
  color: var(--uc-teal-dark);
}

/* ===========================================================================
   BLOG  (Figma node 3172:50006)
   layout_VPZR8O: column, gap 42, padding 60 0
   Top heading: H2 "Proven Strategies in Action" — Inter 48/1.35 weight 300
   UPPERCASE, center, color #3A424E (fill_3915W6)
   3 blog cards in a row, gap 42, padding 0 360
   Each card: image (220px, br 8) + content; badge over image
   =========================================================================== */
.uc-blog {
  width: 100%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 42px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-blog__top {
  max-width: 1248px; /* 1200 content + 48 padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.uc-blog__titles {
  /* layout_U5VG91: column, stretch, gap 24, fixed 618 (constrained heading width) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 618px;
  width: 100%;
}

.uc-blog__tag {
  /* layout_O28E7B: row, center, gap 8, padding 0 16 0 0; border-radius 100; backdrop-filter blur(24)
     fill_2TLME4: #E3F1F3 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  background: #E3F1F3;
  border-radius: 100px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-blog__tag-icon {
  /* Book icon: 36x36 SVG with teal #008F99 round bg + white book glyph baked in (book-icon.svg) */
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.uc-blog__tag-text {
  /* style_NYSKBB: Inter 18 / 1.35em / weight 500, color #008F99 (fill_5K07FD — same as icon bg) */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35em;
  color: var(--uc-teal);
}

.uc-blog__heading {
  /* style_3UM0KL: Inter 48 / 1.35em / weight 300, UPPERCASE, center, #3A424E */
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.35em;
  text-transform: uppercase;
  text-align: center;
  color: #3A424E;
  margin: 0;
}

.uc-blog__grid {
  /* layout_HLU8N6: row, gap 42, padding 0 360 (= 1200 content; 1248 − 48 padding) */
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  box-sizing: border-box;
}

/* When featuring 2 cards (other risks after Media steals one), center the pair
   in the 1200px container by switching to a 2-column grid with max card width. */
.uc-blog__grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
}

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

.uc-blog__card {
  /* layout_ZEMN7E: column, stretch, gap 16, fill */
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.uc-blog__card:hover {
  transform: translateY(-4px);
}

.uc-blog__image-wrap {
  /* layout_EQKAWS: column, fill horizontal, height 220 (layout_7JX2L3); border-radius 8 */
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
}

.uc-blog__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uc-blog__badge {
  /* layout_V5QEXD: row, center, gap 4, padding 4 10; absolute 6, 6.68; border-radius 100 */
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--uc-white);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.35em;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-blog__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.uc-blog__content {
  /* layout_EJ2V0J / layout_NRSNJV: column, stretch, gap 8 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uc-blog__card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4em;
  color: var(--uc-heading);
  margin: 0;
}

.uc-blog__card-excerpt {
  /* style_Q8I90M: Inter 16 / 1.5em, weight 400, color #6D737E (fill_8QBKA6) */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  color: var(--uc-muted);
  margin: 0;
}

/* ===== BLOG — Stats list ===== */
/* layout_ADRNF3: column, gap 8, padding 16 0 0 (16px top spacer above stats) */
.uc-blog__stats {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uc-blog__stat {
  /* layout_62MP9K: row, space-between, center, gap 8 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.uc-blog__stat-label {
  /* style_EVHHTC: Inter 14 / 1.35em, weight 500, color #3A424E (fill_6LYA8V) */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35em;
  color: #3A424E;
}

.uc-blog__stat-value {
  /* style_VN4S3U: Inter 16 / 1.35em, weight 500, #3A424E for normal stats (projects, USDT) */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35em;
  color: #3A424E;
}

.uc-blog__stat-value--accent {
  /* style_IQ7S1D: Inter 16 / 1.35em, weight 800, #131925 (fill_1HDL1Y) — only the % return is emphasized */
  font-weight: 800;
  color: #131925;
}

/* ===========================================================================
   FAQ  (Figma node 3172:50306 — FAQ's component instance)
   layout_HJNOBQ: column, gap 45, padding 120 0 60
   Info: column, stretch, gap 24, padding 0 360 (1200 inner)
   Titles: column center gap 12 — Tag pill + H2 (Inter 48/1.35 weight 300 UPPERCASE #3A424E)
   Subtitle: Inter 20/1.75 weight 400 center #6D737E
   Questions: column gap 16 — each = bg #F9FAFB stroke #ECEDEF 1px br 12 padding 24
   Q text:  Inter 20/1.2 weight 600 #3A424E
   A text:  Manrope 16/1.75 weight 500 #4E5660
   Toggle:  32x32 close-circle icon (white on teal — uses native <details> rotation)
   =========================================================================== */
.uc-faq {
  width: 100%;
  padding: 120px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 45px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-faq__info {
  max-width: 1248px; /* 1200 content + 48 padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  align-items: center;
}

.uc-faq__titles {
  /* layout_RDJMFE: column, center, gap 12, fill */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.uc-faq__tag {
  /* layout_XE9DRC: row, center, gap 8, padding 0 16 0 0; border-radius 100; backdrop blur(24); bg #E3F1F3 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  background: #E3F1F3;
  border-radius: 100px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-faq__tag-icon {
  /* 36x36 teal circle with white question icon centered */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: var(--uc-teal);
  border-radius: 50%;
  flex-shrink: 0;
}

.uc-faq__tag-text {
  /* style_23NA90: Inter 18 / 1.35em, weight 500, #008F99 */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35em;
  color: var(--uc-teal);
}

.uc-faq__heading {
  /* style_ZSON2Z: Inter 48 / 1.35em, weight 300, UPPERCASE, center, #3A424E */
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.35em;
  text-transform: uppercase;
  text-align: center;
  color: #3A424E;
  margin: 0;
  max-width: 1200px;
  /* Figma renders the H2 as two balanced centered lines
     ("…QUESTIONS" / "ABOUT REAL…") — balance reproduces that break. */
  text-wrap: balance;
}

.uc-faq__heading strong {
  /* Mixed weight per Figma PNG — "Real Estate Investing" is heavier than the
     light-300 base (API reports uniform 300; same gap as the Hero heading). */
  font-weight: 600;
}

.uc-faq__subtitle {
  /* style_K990HY: Inter 20 / 1.75em, weight 400, center, #6D737E.
     Figma reference render: the paragraph wraps as two ~780px centered lines
     (text x 579–1347 at 1920) — cap at 800 to reproduce the same break. */
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.75em;
  text-align: center;
  color: var(--uc-muted);
  margin: 0;
  max-width: 800px;
}

.uc-faq__questions {
  /* layout_EURBXL: column, gap 16. Figma reference render: questions column
     is 992px wide centered (x 464→1455 at 1920) — narrower than the 1200 info. */
  max-width: 1040px; /* 992 content + 48 padding */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.uc-faq__item {
  /* layout_SNJ1A8: column, stretch, gap 8, padding 24; bg #F9FAFB; stroke #ECEDEF 1px; br 12 */
  background: #F9FAFB;
  border: 1px solid #ECEDEF;
  border-radius: 12px;
  padding: 24px;
}

.uc-faq__top {
  /* layout_4EASJ3: row, center, fill, gap 32 — and the <summary> needs cursor + no default marker */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  cursor: pointer;
  list-style: none;
}

.uc-faq__top::-webkit-details-marker { display: none; }
.uc-faq__top::marker { content: ''; }

.uc-faq__q {
  /* style_5S0MUQ: Inter 20 / 1.2em, weight 600, #3A424E */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2em;
  color: #3A424E;
  margin: 0;
  flex: 1;
}

.uc-faq__icon {
  /* 32x32 toggle button — dark navy circle + white plus/minus glyph
     (Figma close-circle renders #3A424E, pipette-verified [58 66 78]).
     <details> closed: + ; open: × (rotated 45°) */
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3A424E;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.uc-faq__icon::before,
.uc-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--uc-white);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.uc-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

details[open] .uc-faq__icon::after {
  /* Rotate vertical bar by 45° so + becomes × on open */
  transform: translate(-50%, -50%) rotate(45deg);
}

details[open] .uc-faq__icon::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.uc-faq__answer {
  /* layout_7RD0MI: row stretch fill gap 8 padding 0 64 0 0 (right-padding leaves icon column visual);
     style_9VC8Z6: Manrope 16 / 1.75em, weight 500, #4E5660 */
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75em;
  color: var(--uc-body);
  padding: 8px 64px 0 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .uc-hero {
    padding: 120px 0 0;
    gap: 16px;
  }
  .uc-hero__heading {
    font-size: 32px;
    line-height: 1.3em;
  }
  .uc-hero__subtitle {
    font-size: 16px;
    line-height: 1.6em;
  }

  .uc-tabs {
    padding: 40px 0 48px;
  }
  .uc-tabs__row {
    flex-direction: column;
    gap: 0;
  }
  .uc-tabs__item {
    max-width: none;
    border-bottom: 1px solid var(--uc-divider);
  }
  .uc-tabs__item--active::after {
    /* On mobile, stretch active border across full width of stacked item bottom */
    height: 3px;
  }
  .uc-tabs__title {
    font-size: 20px;
  }

  .uc-media { padding: 0 0 40px; }
  .uc-media__image { border-radius: 12px; }
  .uc-media__card {
    /* Single column on mobile (per the section's design note) — the desktop
       photo|content grid is too cramped under 768px. */
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
  .uc-media__quote-mark {
    /* Keep the coral accent beside the name; the desktop right-offset (74px)
       would clip on narrow content columns. */
    top: 0;
    right: 16px;
    width: 48px;
    height: auto;
  }

  .uc-promo { padding: 16px 0 48px; }
  .uc-promo__card {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }
  .uc-promo__illustration {
    flex: 0 0 auto;
    width: 100%;
  }
  .uc-promo__heading { font-size: 22px; }

  .uc-blog { padding: 40px 0; gap: 24px; }
  .uc-blog__heading { font-size: 28px; }
  .uc-blog__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===========================================================================
   TRUSTPILOT STRIP  (new /reviews section — no Figma source; chrome reuses
   the uc-blog card language: white card on --uc-page-bg, radius, Inter)
   =========================================================================== */
.uc-trust {
  width: 100%;
  padding: 48px 0 0;
  box-sizing: border-box;
}

.uc-trust__inner {
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.uc-trust__card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--uc-white);
  border-radius: 16px;
  padding: 24px 32px;
}

.uc-trust__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  text-decoration: none;
}

.uc-trust__stars {
  display: inline-flex;
  gap: 4px;
  line-height: 0;
}

.uc-trust__score {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2em;
  color: var(--uc-heading);
}

.uc-trust__count {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35em;
  color: var(--uc-muted);
}

.uc-trust__link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35em;
  color: var(--uc-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-trust__rating:hover .uc-trust__link {
  text-decoration: none;
}

.uc-trust__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--uc-divider);
  padding-left: 32px;
  min-width: 0;
}

.uc-trust__passage {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5em;
  color: #3A424E;
  margin: 0;
}

.uc-trust__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  color: var(--uc-muted);
  margin: 0;
}

.uc-trust__updated {
  font-weight: 600;
  color: #3A424E;
  white-space: nowrap;
}

/* ===========================================================================
   VIDEO REVIEWS WALL  (new /reviews section — header mirrors uc-blog's
   tag + uppercase heading; cards are lightbox facades, iframe only on click)
   =========================================================================== */
.uc-videos {
  width: 100%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 42px;
  background: var(--uc-page-bg);
  box-sizing: border-box;
}

.uc-videos__top {
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.uc-videos__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 618px;
  width: 100%;
}

.uc-videos__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 0;
  background: #E3F1F3;
  border-radius: 100px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.uc-videos__tag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--uc-teal);
  color: var(--uc-white);
  flex-shrink: 0;
}

.uc-videos__tag-icon svg {
  width: 16px;
  height: 16px;
}

.uc-videos__tag-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35em;
  color: var(--uc-teal);
}

.uc-videos__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 1.35em;
  text-transform: uppercase;
  text-align: center;
  color: #3A424E;
  margin: 0;
}

.uc-videos__grid {
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  box-sizing: border-box;
}

.uc-videos__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.uc-videos__card:hover {
  transform: translateY(-4px);
}

.uc-videos__thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: #131925;
}

.uc-videos__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uc-videos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--uc-teal);
  color: var(--uc-white);
  opacity: 0.92;
  transition: transform 0.2s ease;
}

.uc-videos__card:hover .uc-videos__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.uc-videos__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uc-videos__name {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4em;
  color: var(--uc-heading);
}

.uc-videos__meta {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  color: var(--uc-muted);
}

/* ===========================================================================
   LINKEDIN BADGES + BLOG CARD STRETCHED-LINK
   Cards became <div> (nested anchors are invalid HTML): the title anchor
   stretches over the card via ::after, the LinkedIn icon floats above it.
   =========================================================================== */
.uc-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: #0A66C2;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.uc-linkedin:hover {
  opacity: 0.75;
}

.uc-media__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uc-blog__card {
  position: relative;
}

.uc-blog__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.uc-blog__card-link {
  color: inherit;
  text-decoration: none;
}

/* Stretched link — covers the whole card; LinkedIn stays clickable above it */
.uc-blog__card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.uc-blog__title-row .uc-linkedin {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .uc-trust { padding: 32px 0 0; }
  .uc-trust__card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .uc-trust__facts {
    border-left: none;
    border-top: 1px solid var(--uc-divider);
    padding-left: 0;
    padding-top: 16px;
  }
  .uc-trust__passage { font-size: 16px; }

  .uc-videos { padding: 40px 0; gap: 24px; }
  .uc-videos__heading { font-size: 28px; }
  .uc-videos__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===========================================================================
   MID-PAGE CTA  (CRO 2026-06-11) — slim conversion touchpoint between the
   video wall and the FAQ; same white-card chrome as the Trustpilot strip.
   =========================================================================== */
.uc-midcta {
  width: 100%;
  padding: 0 0 12px;
  box-sizing: border-box;
}

.uc-midcta__inner {
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.uc-midcta__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--uc-white);
  border-radius: 16px;
  padding: 20px 32px;
}

.uc-midcta__fact {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5em;
  color: #3A424E;
  margin: 0;
}

.uc-midcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 28px;
  border-radius: 100px;
  background: var(--uc-teal);
  color: var(--uc-white);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35em;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.uc-midcta__btn:hover {
  background: var(--uc-teal-dark);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .uc-midcta__card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }
  .uc-midcta__fact { font-size: 16px; }
}

/* ===========================================================================
   FEATURED-STORY CAROUSEL NAV + VERIFIED BADGE  (owner request 2026-06-11)
   =========================================================================== */
.uc-media__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 4px 0;
}

.uc-media__nav[hidden] {
  display: none;
}

.uc-media__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--uc-divider);
  background: var(--uc-white);
  color: #3A424E;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uc-media__nav-btn:hover {
  background: var(--uc-teal);
  border-color: var(--uc-teal);
  color: var(--uc-white);
}

.uc-media__nav-counter {
  min-width: 48px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35em;
  color: var(--uc-muted);
  font-variant-numeric: tabular-nums;
}

/* "Verified" pill next to the investor name — LinkedIn-profile link.
   LinkedIn brand blue on its tint; small enough not to compete with the H2. */
.uc-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  background: #EAF2FB;
  color: #0A66C2;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35em;
  text-decoration: none;
  transition: background 0.15s ease;
}

.uc-verified:hover {
  background: #DCE9F8;
}

@media (max-width: 768px) {
  .uc-media__nav {
    justify-content: center;
    padding-top: 12px;
  }
}

/* Instagram flavor of the verified pill / catalog icon (investors without
   LinkedIn — Alex, Liza). Same shape, Instagram brand color on its tint. */
.uc-verified--ig {
  background: #FDEEF4;
  color: #E1306C;
}

.uc-verified--ig:hover {
  background: #FBDCE9;
}

.uc-linkedin--ig {
  color: #E1306C;
}