/* ==========================================================================
   Extended components, used by generated taxonomy pages
   ========================================================================== */

/* -------- Inner hero -------- */
.inner-hero {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(14, 109, 255, 0.10), transparent 70%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface-2) 100%);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  overflow: hidden;
}
.inner-hero .container {
  position: relative;
  z-index: 1;
}
.inner-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-4);
  max-width: 22ch;
}
[data-theme='dark'] .inner-title { color: var(--color-text); }
.inner-lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 0 0 var(--space-6);
}
.product-tagline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.inner-body { display: block; }
.inner-split { display: block; }

/* Product hero shot */
.product-hero-shot,
.product-shot {
  margin: var(--space-8) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  box-shadow: 0 20px 48px -24px rgba(11, 26, 46, 0.25);
}
.product-hero-shot img,
.product-shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* -------- Product stages (01 / 02 / 03) -------- */
.product-stage {
  border-top: 1px solid var(--color-divider);
}
.product-stage:first-of-type { border-top: none; }
.stage-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.product-stage.align-right .stage-grid { grid-template-columns: 1.2fr 1fr; }
.product-stage.align-right .stage-copy { order: 2; }
.product-stage.align-right .stage-visual { order: 1; }
@media (max-width: 900px) {
  .stage-grid,
  .product-stage.align-right .stage-grid { grid-template-columns: 1fr; }
  .product-stage.align-right .stage-copy,
  .product-stage.align-right .stage-visual { order: unset; }
}
.stage-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.stage-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.stage-copy p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}
.stage-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  box-shadow: 0 16px 40px -20px rgba(11, 26, 46, 0.2);
}
.stage-visual img { width: 100%; height: auto; display: block; }

/* -------- Section headings -------- */
.section-head {
  text-align: left;
  max-width: 820px;
  margin: 0 0 var(--space-10);
}
/* Opt-in centred section head for pages that explicitly need it */
.section-head.is-centered,
.section-head--centered {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.section-head p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* -------- Feature grids -------- */
.feature-grid,
.feature-grid-section {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
}
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease, transform .2s ease;
}
.feature-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.feature-card h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-ink-2);
}
[data-theme='dark'] .feature-card h3 { color: var(--color-text); }
.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.feature-list li {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 18px);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* -------- Split (copy + visual) -------- */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 901px) {
  .split-visual { position: sticky; top: calc(var(--space-16, 80px) + 16px); }
}
.split-grid.reverse .split-copy { order: 2; }
.split-grid.reverse .split-visual { order: 1; }
@media (max-width: 900px) {
  .split-grid, .split-grid.reverse { grid-template-columns: 1fr; }
  .split-grid.reverse .split-copy,
  .split-grid.reverse .split-visual { order: unset; }
}
.split-visual { min-width: 0; }
.split-visual .product-shot,
.split-visual figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  box-shadow: 0 16px 40px -20px rgba(11, 26, 46, 0.2);
}
.split-visual img,
.split-visual .product-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 0;
}

.split-copy { min-width: 0; }
.split-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  color: var(--color-ink-2);
  max-width: 24ch;
}
[data-theme='dark'] .split-copy h2 { color: var(--color-text); }
.split-copy p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 58ch;
  margin-bottom: var(--space-5);
}
.split-copy p:last-of-type { margin-bottom: var(--space-6); }
.split-copy .eyebrow { margin-bottom: var(--space-3); display: inline-block; }

/* Bulleted feature list used inside .split-copy */
.split-copy .split-points,
ul.split-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.split-copy .split-points li,
ul.split-points li {
  position: relative;
  padding-left: 28px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 58ch;
}
.split-copy .split-points li::before,
ul.split-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, #F5B800 0%, #FFD93D 100%);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.15);
}
.split-copy .split-points li strong,
ul.split-points li strong {
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.split-copy .cta-row { margin-top: var(--space-2); }

/* Deeper feature block for use-case and product pages */
.how-it-works {
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
}
.how-it-works .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  counter-reset: step;
}
@media (max-width: 900px) { .how-steps { grid-template-columns: 1fr; } }
.how-step {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  counter-increment: step;
}
.how-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display, 'JetBrains Mono', monospace);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #9A6E00;
  background: #FFD93D;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.how-step h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
  color: var(--color-text);
}
.how-step p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

/* FAQ block */
.faq-section {
  padding-block: clamp(48px, 7vw, 96px);
}
.faq-section .section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: clamp(18px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: #9A6E00;
  transition: transform 200ms ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-a {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: var(--text-base);
  max-width: 72ch;
}
.faq-item .faq-a p { margin-bottom: var(--space-3); }
.faq-item .faq-a p:last-child { margin-bottom: 0; }

/* Narrow content blocks used for expanded prose on inner pages */
.prose-block {
  max-width: 760px;
  margin: 0 auto;
}
.prose-block p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block h3 {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
  line-height: 1.25;
}

/* -------- Stats section -------- */
.stats-section { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  text-align: center;
}
.stat-card { background: transparent; border: none; padding: var(--space-4); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink-2);
  line-height: 1;
}
[data-theme='dark'] .stat-num { color: var(--color-text); }
.stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------- Team grid -------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0; /* override generic card padding from spacing.css, photo is edge-to-edge */
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.team-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* Standardised team photo, uniform 1:1 portrait framing */
.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--color-surface-offset) 0%, var(--color-surface-offset-2) 100%);
  overflow: hidden;
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* bias toward heads */
  display: block;
  filter: saturate(0.95);
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}
.team-card:hover .team-photo img {
  transform: scale(1.03);
  filter: saturate(1.05);
}

/* Legacy initials avatar, kept for fallback contexts */
.team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  margin: var(--space-5) 0 var(--space-4) var(--space-5);
}

.team-body {
  padding: 0 var(--space-5) var(--space-5);
}
.team-card h3 {
  margin: 0 0 4px;
  color: var(--color-ink-2);
}
[data-theme='dark'] .team-card h3 { color: var(--color-text); }
.team-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.team-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Compact team strip (used on /contact-us), no bios, just photo + name */
.team-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}
.team-strip .team-card {
  text-align: center;
}
.team-strip .team-photo {
  border-radius: var(--radius-lg);
  border-bottom: none;
  margin: 0;
}
.team-strip .team-body {
  padding: var(--space-3) 0 var(--space-2);
}
.team-strip h3 {
  font-size: var(--text-sm);
  margin: 0;
}
.team-strip .team-role {
  font-size: 10px;
  margin: 2px 0 0;
}

/* -------- Values / Value cards -------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
}
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.value-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-ink-2);
}
[data-theme='dark'] .value-card h3 { color: var(--color-text); }

/* -------- Use-case / Solution / Partner cards -------- */
.uc-card, .sol-card, .partner-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.uc-card:hover, .sol-card:hover, .partner-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(14, 109, 255, 0.25);
}
.uc-card h3, .sol-card h3, .partner-card h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-ink-2);
}
[data-theme='dark'] .uc-card h3,
[data-theme='dark'] .sol-card h3,
[data-theme='dark'] .partner-card h3 { color: var(--color-text); }
.uc-card p, .sol-card p, .partner-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
}
.partner-type {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.partner-logo {
  max-height: 36px;
  width: auto;
  max-width: 160px;
  margin-bottom: var(--space-3);
  object-fit: contain;
  object-position: left center;
  display: block;
}
[data-theme='dark'] .partner-logo {
  filter: invert(1) brightness(1.6) saturate(0);
  opacity: 0.9;
}

/* -------- Quote / Testimonial -------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
.quote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.3;
  position: absolute;
  top: 12px;
  left: 18px;
}
.quote-card blockquote, .quote-card .quote {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-4);
}
.quote-card cite, .quote-card .cite {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.quote-card cite strong, .quote-card .cite strong { color: var(--color-ink-2); display: block; }
[data-theme='dark'] .quote-card cite strong,
[data-theme='dark'] .quote-card .cite strong { color: var(--color-text); }

/* -------- Pricing -------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
  align-items: stretch;
}
.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--color-primary);
  box-shadow: 0 20px 48px -24px rgba(14, 109, 255, 0.35);
  position: relative;
}
.price-card-featured::before {
  content: "Most popular";
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.price-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.price-card .price {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-ink-2);
  margin: var(--space-3) 0;
}
[data-theme='dark'] .price-card .price { color: var(--color-text); }
.price-card ul { list-style: none; padding: 0; margin: var(--space-4) 0; }
.price-card li {
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
  border-top: 1px solid var(--color-divider);
}
.price-card li:first-child { border-top: none; }
.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600;
}
.price-foot { margin-top: auto; padding-top: var(--space-5); }

/* -------- News grid + card -------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.news-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.news-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.news-card-link { color: inherit; text-decoration: none; display: contents; }
.news-card-img, .news-card-placeholder, .news-card-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(14,109,255,0.14), rgba(75,212,255,0.14));
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 0;
  overflow: hidden;
}
.news-card-img img, .news-card-placeholder img, .news-card-media img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card-media img { transform: scale(1.04); }
.news-card-body {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.news-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.news-card h3 {
  font-size: var(--text-base);
  line-height: 1.35;
  margin: 0;
  color: var(--color-ink-2);
}
[data-theme='dark'] .news-card h3 { color: var(--color-text); }
.news-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Article (news detail) -------- */
.article-hero { border-bottom: 1px solid var(--color-divider); }
.article-hero .container { max-width: 780px; }
.article-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-ink-2);
  margin-bottom: var(--space-3);
}
[data-theme='dark'] .article-hero h1 { color: var(--color-text); }
.article-hero .article-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.article-body .container { max-width: 760px; }
.article-body, .prose, .prose-wide {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.prose h2, .prose-wide h2 { font-size: var(--text-xl); margin-block: 1.6em 0.5em; }
.prose h3, .prose-wide h3 { font-size: var(--text-lg); margin-block: 1.4em 0.4em; }
.prose p, .prose-wide p { margin-block: 0.8em; }
.prose ul, .prose ol, .prose-wide ul, .prose-wide ol { margin-block: 0.8em; padding-inline-start: 1.4em; }
.prose-wide { max-width: 72ch; margin-inline: auto; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.two-col > * { min-width: 0; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-3);
}
.bullet-list li {
  padding-left: 1.5em;
  position: relative;
  line-height: 1.55;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* -------- Contact + form -------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.contact-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.contact-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-divider);
  background: var(--color-surface-alt, var(--color-surface));
}
.contact-photo img, .contact-photo picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-email {
  display: block;
  color: var(--color-primary);
  margin-top: var(--space-2);
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  line-height: 1.35;
}
.contact-generic { max-width: 560px; margin-inline: auto; text-align: center; }
.contact-form-wrap {
  max-width: 640px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.contact-form { display: grid; gap: var(--space-4); }
.contact-form label { font-size: var(--text-sm); font-weight: 500; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font: inherit;
  color: var(--color-text);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14,109,255,0.15);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* -------- Partner grid (partnerships page) -------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

/* -------- Logo wall (clients) -------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  justify-items: center;
}
.logo-mark {
  max-height: 36px;
  max-width: 140px;
  width: auto;
  height: auto;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.logo-mark:hover { opacity: 1; filter: grayscale(0); }
[data-theme='dark'] .logo-mark { opacity: 0.8; }

/* -------- Jobs (careers) -------- */
.job-list { display: grid; gap: var(--space-4); }
.job-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease;
}
.job-card:hover { border-color: var(--color-primary); }
.job-card h3 {
  font-size: var(--text-lg);
  margin: 0 0 4px;
  color: var(--color-ink-2);
}
[data-theme='dark'] .job-card h3 { color: var(--color-text); }
.job-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* -------- CTA band -------- */
.cta-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.cta-inner p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.cta-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* -------- Cross-reference section (internal linking footer) -------- */
.xref-section {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
  padding-block: clamp(40px, 5vw, 72px);
}
.xref-section h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
  text-align: center;
}
.xref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.xlink {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.xlink:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.xlink strong {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  font-weight: 600;
}
[data-theme='dark'] .xlink strong { color: var(--color-text); }
.xlink span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* -------- ROI placeholder -------- */
.roi-placeholder {
  background: var(--color-surface);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Newsletter grid (newsletters.html) */
.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

/* -------- Nav fixes (no text wrap on triggers) -------- */
.nav-menu > a, .nav-menu .nav-trigger { white-space: nowrap; }
.nav-login { white-space: nowrap; }
.nav-cta .btn { white-space: nowrap; }
/* Legacy .nav-panel a { display: grid } and related rules moved into
   css/components.css (current mega-panel styling lives there). */

/* -------- Footer generic (fallback when .footer-col is not present) -------- */
.footer-grid > div h5 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.footer-grid > div ul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-grid > div li a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.footer-grid > div li a:hover { color: #fff; }

/* -------- Mobile-specific polish -------- */
@media (max-width: 640px) {
  .inner-title { font-size: clamp(1.75rem, 8vw, 2.25rem); max-width: none; }
  .inner-lede { font-size: var(--text-base); }
  .stage-copy h2 { font-size: clamp(1.3rem, 6vw, 1.75rem); }
  .cta-inner h2 { font-size: clamp(1.35rem, 6.5vw, 1.75rem); }
  .section-head h2 { font-size: clamp(1.4rem, 7vw, 2rem); }
  .cta-row, .cta-actions, .hero-cta { gap: var(--space-3); }
  .cta-row .btn, .cta-actions .btn, .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-stats { gap: var(--space-6); }
  .feature-list { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Clients / Customers page, world-class layout
   ========================================================================= */

/* Hero stat strip */
.clients-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--color-divider);
}
.clients-hero-stats .stat,
.clients-hero-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clients-hero-stats .stat-num,
.clients-hero-stats .stat-label { display: block; }
.clients-hero-stats .stat-num {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1;
}
.clients-hero-stats .stat-num .accent { color: var(--color-accent, #F5B800); }
.clients-hero-stats .stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 860px) {
  .clients-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Vertical filter chips (non-functional visual grouping) */
.vertical-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(24px, 3vw, 40px) 0 clamp(20px, 2vw, 28px);
  justify-content: center;
}
.vertical-filter .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.vertical-filter .chip:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.vertical-filter .chip.is-active {
  background: var(--color-ink);
  color: var(--color-surface);
  border-color: var(--color-ink);
}
[data-theme='dark'] .vertical-filter .chip.is-active {
  background: var(--color-accent, #F5B800);
  color: #1a1300;
  border-color: var(--color-accent, #F5B800);
}

/* Client category blocks */
.client-category {
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--color-divider);
}
.client-category:first-of-type { border-top: 0; padding-top: 0; }
.client-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.client-category-head h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.client-category-head .cat-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Stronger logo wall for real SVGs */
.logo-wall.refined {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(24px, 2.8vw, 44px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg, 16px);
}
.logo-wall.refined .logo-mark {
  max-height: 32px;
  max-width: 140px;
  opacity: 0.62;
  filter: grayscale(1) contrast(0.9);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
.logo-wall.refined .logo-mark:hover {
  opacity: 1;
  filter: grayscale(0) contrast(1);
  transform: translateY(-2px);
}
[data-theme='dark'] .logo-wall.refined .logo-mark {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.7;
}
[data-theme='dark'] .logo-wall.refined .logo-mark:hover {
  filter: none;
  opacity: 1;
}

/* Featured story card (Very Group 43% impact) */
.story-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.story-card .story-body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.story-card .story-logo {
  max-height: 36px;
  width: auto;
  max-width: 160px;
  opacity: 0.85;
}
.story-card .story-quote {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.story-card .story-quote .accent {
  color: var(--color-accent, #F5B800);
  font-weight: 700;
}
.story-card .story-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.story-card .story-stat {
  background: linear-gradient(135deg, var(--color-accent, #F5B800) 0%, #FFD93D 100%);
  color: #1a1300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 4vw, 56px);
  gap: 8px;
}
.story-card .story-stat .big {
  font-size: clamp(60px, 9vw, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.story-card .story-stat .small {
  font-size: clamp(13px, 1.2vw, 15px);
  text-align: center;
  max-width: 22ch;
  font-weight: 500;
  opacity: 0.9;
}
.story-card .story-cta { margin-top: 8px; }
@media (max-width: 860px) {
  .story-card { grid-template-columns: 1fr; }
  .story-card .story-stat { order: -1; padding: clamp(32px, 8vw, 48px) 20px; }
  .story-card .story-stat .big { font-size: clamp(64px, 18vw, 96px); }
}

/* Trust pillars (why customers choose Rightlander) */
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(24px, 3vw, 40px);
}
.trust-pillar {
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-surface);
}
.trust-pillar .pillar-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(245, 184, 0, 0.12);
  color: var(--color-accent, #F5B800);
  margin-bottom: 18px;
}
.trust-pillar h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-ink);
  letter-spacing: -0.005em;
}
.trust-pillar p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
/* 4-column variant for pages with four pillars */
.trust-pillars.trust-pillars-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1100px) {
  .trust-pillars.trust-pillars-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .trust-pillars { grid-template-columns: 1fr; gap: 16px; }
  .trust-pillars.trust-pillars-4 { grid-template-columns: 1fr; gap: 16px; }
}

/* Refined quote card tweaks for clients page */
.quote-grid.refined { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.quote-grid.refined .quote-card {
  padding: clamp(24px, 2.6vw, 32px);
  transition: transform .2s ease, border-color .2s ease;
}
.quote-grid.refined .quote-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent, #F5B800);
}
.quote-grid.refined .quote-card footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-grid.refined .quote-card footer strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
}
.quote-grid.refined .quote-card footer span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================
   USE-CASES LANDING PAGE
   ============================================ */

.uc-hero { padding-bottom: clamp(32px, 5vw, 56px); }
.uc-hero .cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.uc-hero-stats { margin-top: 40px; }

.section-head-compact {
  max-width: 760px;
  margin-bottom: 28px;
}
.section-head-compact .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #F5B800);
  display: block;
  margin-bottom: 10px;
}
.section-head-compact h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ============ FEATURED USE CASE ============ */
.uc-featured-section {
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
}
.uc-featured-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -20px rgba(0,0,0,0.08);
}
.uc-featured-card .story-card-body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.uc-featured-card .story-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  background: rgba(245,184,0,0.14);
  color: #9A6E00;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
[data-theme="dark"] .uc-featured-card .story-chip {
  background: rgba(245,184,0,0.18);
  color: #FFD93D;
}
.uc-featured-card h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.uc-featured-card .story-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 56ch;
}
.uc-featured-card .story-points {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.uc-featured-card .story-points li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}
.uc-featured-card .story-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F5B800;
  background-image: linear-gradient(135deg, #F5B800 0%, #FFD93D 100%);
}
.uc-featured-card .story-points strong { color: var(--color-text); font-weight: 600; }
.uc-featured-card .story-actions {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.uc-featured-card .story-card-panel-yellow {
  background: linear-gradient(135deg, #F5B800 0%, #FFD93D 100%);
  color: #1a1300;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  min-height: 240px;
}
.uc-featured-card .panel-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(26,19,0,0.7);
}
.uc-featured-card .panel-number {
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #1a1300;
}
.uc-featured-card .panel-label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(26,19,0,0.85);
  max-width: 28ch;
}

@media (max-width: 840px) {
  .uc-featured-card { grid-template-columns: 1fr; }
  .uc-featured-card .story-card-panel-yellow { order: -1; min-height: 180px; }
}

/* ============ OUTCOMES BAND ============ */
.uc-outcomes {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.outcome-item {
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 180ms ease, transform 180ms ease;
}
.outcome-item:hover {
  border-color: #F5B800;
  transform: translateY(-2px);
}
.outcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245,184,0,0.14);
  color: #9A6E00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
[data-theme="dark"] .outcome-icon {
  background: rgba(245,184,0,0.18);
  color: #FFD93D;
}
.outcome-item h3 {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.outcome-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 960px) {
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .outcomes-grid { grid-template-columns: 1fr; }
}

/* ============ RICH USE-CASE GRID ============ */
.uc-grid-section { padding: clamp(56px, 8vw, 96px) 0; }
.uc-grid-section .section-head { max-width: 760px; margin-bottom: 40px; }
.uc-grid-section .section-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: 12px;
  max-width: 68ch;
}

.uc-rich-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1020px) { .uc-rich-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .uc-rich-grid { grid-template-columns: 1fr; } }

/* 4-column variant (for vertical cards etc.) */
.uc-rich-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1200px) { .uc-rich-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 640px)  { .uc-rich-grid-4 { grid-template-columns: 1fr; } }

/* 3-column explicit (when default needs to be forced) */
.uc-rich-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .uc-rich-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .uc-rich-grid-3 { grid-template-columns: 1fr; } }

.uc-rich-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.uc-rich-card:hover {
  border-color: #F5B800;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.04);
}

.uc-rich-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f4f2ed 0%, #e9e5dd 100%);
  overflow: hidden;
}
[data-theme="dark"] .uc-rich-media {
  background: linear-gradient(135deg, #2a2520 0%, #1e1a16 100%);
}
.uc-rich-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.uc-rich-card:hover .uc-rich-media img { transform: scale(1.04); }
.uc-rich-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  background: rgba(20,20,20,0.82);
  color: #FFD93D;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.uc-rich-body {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.uc-rich-body h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-text);
}
.uc-rich-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.uc-rich-tags {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.uc-rich-tags li {
  padding: 4px 9px;
  background: var(--color-surface-offset, rgba(0,0,0,0.04));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 500;
}
[data-theme="dark"] .uc-rich-tags li {
  background: rgba(255,255,255,0.04);
}
.uc-rich-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  transition: color 180ms ease, gap 180ms ease;
}
.uc-rich-link svg { transition: transform 180ms ease; }
.uc-rich-card:hover .uc-rich-link { color: #9A6E00; gap: 10px; }
[data-theme="dark"] .uc-rich-card:hover .uc-rich-link { color: #FFD93D; }
.uc-rich-card:hover .uc-rich-link svg { transform: translateX(3px); }

/* ============ HERO TESTIMONIAL ============ */
.uc-quote { padding: clamp(48px, 7vw, 88px) 0; }
.quote-card-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-card-hero .quote-mark {
  color: #F5B800;
  opacity: 0.25;
  position: absolute;
  top: 24px;
  right: 28px;
}
.quote-card-hero blockquote {
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
  max-width: 68ch;
}
.quote-card-hero figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.quote-card-hero figcaption strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.quote-card-hero figcaption span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============ PILLARS WRAPPER ============ */
.uc-pillars { padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 56px); }
.uc-pillars .section-head { margin-bottom: 32px; max-width: 760px; }

/* ============================================
   Quote card unification
   Ensures all blockquote.quote-card renders identically
   regardless of grid context (refined or base).
   ============================================ */
.quote-card {
  padding: clamp(24px, 2.6vw, 32px) !important;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}
.quote-card:hover {
  transform: translateY(-3px);
  border-color: #F5B800;
}
[data-theme='dark'] .quote-card:hover { border-color: #FFD93D; }

.quote-card > p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 auto;
  padding-top: var(--space-4);
}

.quote-card > footer,
.quote-card cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  font-style: normal;
}
.quote-card > footer strong,
.quote-card cite strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  display: block;
}
.quote-card > footer span,
.quote-card cite span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================
   Quiz: /what-rightlander-is-for-you.html
   ============================================ */
.quiz {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 56px);
}
.quiz-progress {
  height: 4px;
  width: 100%;
  background: var(--color-divider);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.quiz-progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F5B800 0%, #FFD93D 100%);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.quiz-step-counter {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.quiz-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--color-surface);
}
.quiz-question {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.01em;
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.quiz-option:hover {
  border-color: #F5B800;
  background: color-mix(in oklab, #F5B800 10%, var(--color-bg));
  transform: translateY(-1px);
}
.quiz-option:focus-visible {
  outline: 2px solid #F5B800;
  outline-offset: 2px;
}
/* Result screen --------------------------------------------- */
.quiz-card.quiz-result { text-align: left; }
.quiz-card.quiz-result .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.quiz-card.quiz-result .quiz-question {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}
.quiz-result-summary {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  max-width: 64ch;
}
.quiz-result-recs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-8);
}
@media (max-width: 640px) {
  .quiz-result-recs { grid-template-columns: 1fr; }
}
/* Override global .quiz-result h3 (26px) with tight card h3 */
.quiz-card.quiz-result .quiz-result-recs .related-card h3,
.quiz-result-recs .related-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.quiz-result-recs .related-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
/* Hide the progress bar + step counter on the result step */
.quiz.is-result .quiz-progress,
.quiz.is-result .quiz-step-counter { display: none; }

/* Quiz whitespace trim ================================================== */
/* Tighten the inner-hero + inner-body stacking on the quiz page so the
   card sits closer to the top instead of being pushed way down. */
.quiz-hero { padding-block: clamp(28px, 3vw, 48px) clamp(16px, 1.5vw, 24px) !important; }
.quiz-hero .inner-title { margin-bottom: var(--space-2); }
.quiz-hero .inner-lede { max-width: 58ch; margin-bottom: 0; }
section.inner-body:has(#quiz) { padding-block: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px); }

/* In result state, collapse the redundant top padding even more. */
.quiz.is-result { margin-top: calc(var(--space-4) * -1); }

/* One Platform CTA yellow pulse ========================================= */
.btn-pulse {
  position: relative;
  isolation: isolate;
}
.btn-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55);
  animation: btnPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse::before { animation: none; }
}

/* Trust band ============================================================ */
.trust-band {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.trust-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.trust-band-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.trust-band-badges,
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.15s ease;
}
.trust-badge:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.trust-badge svg { flex-shrink: 0; color: var(--color-primary); }
.trust-band-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.trust-band-link:hover { text-decoration: underline; }

/* Integrations strip ==================================================== */
.integrations-strip {
  padding-block: var(--space-10);
}
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.integration-card {
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.integration-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #F5B800 0%, #FFD93D 100%);
  display: grid;
  place-items: center;
  color: #1a1a1a;
}
.integration-card h4 { margin: 0; font-size: 16px; font-weight: 600; }
.integration-card p { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }

/* ROI calculator ======================================================== */
.roi-calc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  background: var(--color-bg);
}
.roi-calc h3 { margin-top: 0; }
.roi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.roi-field label { font-size: 14px; font-weight: 500; }
.roi-field input[type="range"] { width: 100%; accent-color: #F5B800; }
.roi-field-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-muted);
}
.roi-field-value { font-weight: 600; color: var(--color-text); }
.roi-output {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245,184,0,0.08), rgba(255,217,61,0.12));
  border: 1px solid rgba(245, 184, 0, 0.25);
}
.roi-output-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.roi-output-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.roi-output-note {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Command palette (Ctrl+K) ============================================== */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-overlay.is-open { display: flex; }
.cmdk {
  width: min(560px, 92vw);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.3);
}
.cmdk-input {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  outline: none;
}
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
}
.cmdk-item:hover,
.cmdk-item.is-active { background: rgba(245,184,0,0.08); }
.cmdk-item-kind {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-divider);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cmdk-empty { padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.cmdk-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.cmdk-kbd {
  padding: 2px 6px;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 11px;
  background: var(--color-bg);
}

/* Cookie consent ======================================================== */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 56px; /* above staging banner */
  max-width: 560px;
  margin-inline: auto;
  padding: 20px 24px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.1));
  border-radius: 14px;
  box-shadow: 0 16px 48px -16px rgba(0,0,0,0.25);
  z-index: 9998;
  display: none;
}
[data-theme='dark'] .cookie-banner {
  background: var(--color-surface, #0f1629);
  border-color: var(--color-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 16px 48px -16px rgba(0,0,0,0.6);
}
.cookie-banner.is-visible { display: block; }
.cookie-banner h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.cookie-banner p { margin: 0 0 14px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner .btn { font-size: 13px; padding: 8px 14px; }
.cookie-prefs {
  display: none;
  margin: 12px 0;
  padding: 12px;
  background: var(--color-surface-subtle, #f7f8fb);
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(15,23,42,0.1));
}
[data-theme='dark'] .cookie-prefs {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.cookie-banner.show-prefs .cookie-prefs { display: block; }
.cookie-pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-divider);
}
.cookie-pref:last-child { border-bottom: none; }
.cookie-pref-label { font-weight: 500; }
.cookie-pref-desc { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.cookie-pref input[type="checkbox"] { accent-color: #F5B800; }
.cookie-pref input:disabled { opacity: 0.5; }

/* Breadcrumb strip (for new/edited pages) =============================== */
.breadcrumbs-strip {
  padding: 12px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface-2);
}
.breadcrumbs-strip a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs-strip a:hover { color: var(--color-text); }
.breadcrumbs-strip .sep { margin: 0 8px; opacity: 0.4; }
.breadcrumbs-strip .current { color: var(--color-text); font-weight: 500; }

/* 404 page styling ====================================================== */
.page-404 {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-5);
}
.page-404 .eyebrow {
  font-family: var(--font-mono, JetBrains Mono, monospace);
  color: #F5B800;
  font-weight: 600;
  font-size: 14px;
}
.page-404 h1 { font-size: clamp(40px, 6vw, 72px); margin: var(--space-3) 0 var(--space-4); letter-spacing: -0.02em; }
.page-404 .links-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* Ambassador quote block ================================================ */
.ambassador-quote {
  padding-block: var(--space-10);
}
.ambassador-inner {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-6);
  align-items: center;
  max-width: 840px;
  margin: 0 auto;
}
.ambassador-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(245, 184, 0, 0.3);
}
.ambassador-text blockquote {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text);
}
.ambassador-cite {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--color-text-muted);
}
.ambassador-cite strong { color: var(--color-text); font-weight: 600; }
@media (max-width: 640px) {
  .ambassador-inner { grid-template-columns: 80px 1fr; gap: var(--space-4); }
  .ambassador-photo { width: 80px; height: 80px; }
}

/* Image-hero block for image-starved pages ============================== */
.brand-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.brand-hero-visual {
  margin-top: clamp(24px, 3vw, 40px);
  border-radius: 16px;
  overflow: hidden;
  max-height: 360px;
}
.brand-hero-visual picture,
.brand-hero-visual img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
@media (max-width: 860px) {
  .brand-hero { grid-template-columns: 1fr; }
  .brand-hero-visual { order: -1; max-height: 240px; }
  .brand-hero-visual img { max-height: 240px; }
}

/* Linked ambassador photo + brand-hero-visual as anchors ============== */
a.ambassador-photo, a.brand-hero-visual-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.ambassador-photo:hover, a.brand-hero-visual-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ambassador-cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(245,184,0,0.5);
}
.ambassador-cite a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Section-visual: editorial figure inserted between sections =========== */
.section-visual {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  max-height: 420px;
}
.section-visual picture,
.section-visual img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.section-visual-wrap {
  padding-block: clamp(24px, 4vw, 56px);
}
@media (max-width: 760px) {
  .section-visual, .section-visual img { max-height: 260px; }
}

/* Quiz teaser (drives traffic to the 60-sec quiz) ====================== */
.quiz-teaser {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(245,184,0,0.08) 0%, rgba(245,184,0,0.02) 100%);
  border: 1px solid rgba(245,184,0,0.35);
  margin: clamp(32px, 5vw, 56px) 0;
}
[data-theme='dark'] .quiz-teaser {
  background: linear-gradient(135deg, rgba(245,184,0,0.12) 0%, rgba(245,184,0,0.03) 100%);
  border-color: rgba(245,184,0,0.45);
}
.quiz-teaser-body { min-width: 0; }
.quiz-teaser-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9A6E00;
  margin-bottom: 8px;
}
[data-theme='dark'] .quiz-teaser-eyebrow { color: #FFD93D; }
.quiz-teaser-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #F5B800;
  box-shadow: 0 0 0 0 rgba(245,184,0,0.6);
  animation: quizPulse 2s ease-out infinite;
}
@keyframes quizPulse {
  0% { box-shadow: 0 0 0 0 rgba(245,184,0,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(245,184,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,184,0,0); }
}
.quiz-teaser h3 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--color-ink);
}
[data-theme='dark'] .quiz-teaser h3 { color: var(--color-text); }
.quiz-teaser p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.quiz-teaser .btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .quiz-teaser {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .quiz-teaser .btn { width: 100%; justify-content: center; }
}

/* Newsletter archive ==================================================== */
.news-year-group { margin-bottom: var(--space-10); }
.news-year-heading {
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 14px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.quiz-card.quiz-result .cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================
   Related / Keep exploring card grid
   Used on product, about, newsletters and other
   inner pages to link out to sibling content.
   ============================================ */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: var(--space-6);
}
a.related-card,
.related-card {
  display: block;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.related-card:hover,
.related-card:hover {
  transform: translateY(-3px);
  border-color: #F5B800;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
[data-theme='dark'] a.related-card:hover,
[data-theme='dark'] .related-card:hover {
  border-color: #FFD93D;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.related-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.related-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================
   FEATURE ICON (chip container around inline SVG)
   Same visual language as .outcome-icon / .pillar-icon
========================================================= */
.feature-icon,
.card-icon,
.panel-icon,
.step-icon,
.capability-icon,
.service-icon,
.trust-icon,
.solution-icon,
.coverage-icon,
.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245, 184, 0, 0.14);
  color: var(--color-primary, #F5B800);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.feature-icon svg,
.card-icon svg,
.panel-icon svg,
.step-icon svg,
.capability-icon svg,
.service-icon svg,
.trust-icon svg,
.solution-icon svg,
.coverage-icon svg,
.tab-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}
[data-theme='dark'] .feature-icon,
[data-theme='dark'] .card-icon,
[data-theme='dark'] .panel-icon,
[data-theme='dark'] .step-icon,
[data-theme='dark'] .capability-icon,
[data-theme='dark'] .service-icon,
[data-theme='dark'] .trust-icon,
[data-theme='dark'] .solution-icon,
[data-theme='dark'] .coverage-icon,
[data-theme='dark'] .tab-icon {
  background: rgba(245, 184, 0, 0.18);
  color: #FFD93D;
}

/* =========================================================
   FEATURE BULLETS — used across feature cards, product stages,
   solution rows, use-case detail pages. Global base rule so
   the list always renders as real bulleted items.
========================================================= */
.feature-bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-base, 15px);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.feature-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #F5B800);
  opacity: 0.9;
}
.feature-bullets li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  text-underline-offset: 2px;
}
.feature-bullets li a:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }

/* Tighter size inside feature cards */
.feature-card .feature-bullets,
.feature-card > ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-card .feature-bullets li,
.feature-card > ul > li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.feature-card .feature-bullets li::before,
.feature-card > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary, #F5B800);
  opacity: 0.9;
}
[data-theme='dark'] .feature-card .feature-bullets li,
[data-theme='dark'] .feature-card > ul > li {
  color: var(--color-text-muted, #a8b3c4);
}

/* Also ensure feature-card heading / paragraph have proper spacing */
.feature-card > h3 { margin-top: var(--space-2); margin-bottom: var(--space-3); }
.feature-card > p { margin-bottom: 0; }

/* =========================================================
   STORY POINTS (inside .split-copy) — healthcare uses these
========================================================= */
.split-copy .story-points,
ul.story-points:not(.uc-featured-card .story-points) {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.split-copy .story-points li,
ul.story-points:not(.uc-featured-card .story-points) li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.split-copy .story-points li::before,
ul.story-points:not(.uc-featured-card .story-points) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 2px;
  background: var(--color-primary, #F5B800);
  border-radius: 2px;
}
.split-copy .story-points strong,
ul.story-points strong { color: var(--color-text); font-weight: 600; }

/* =========================================================
   SECTION LEDE — used above feature-grid sections
========================================================= */
.feature-grid-section .section-lede,
.how-it-works .section-lede,
.faq-section .section-lede {
  max-width: 680px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.feature-grid-section .section-head,
.faq-section .section-head { text-align: left; margin-inline: 0; }
.feature-grid-section .section-head .eyebrow { color: var(--color-primary-link, #0263E0); }

/* =========================================================
   FEATURE GRID SECTION PADDING
========================================================= */
.feature-grid-section {
  padding-block: clamp(48px, 7vw, 96px);
}
.feature-grid-section .section-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* =========================================================
   FAQ-A (answer body) visibility in dark mode
========================================================= */
[data-theme='dark'] .faq-item .faq-a p,
[data-theme='dark'] .faq-item .faq-a {
  color: var(--color-text-muted, #a8b3c4);
}
.faq-item .faq-a {
  padding: 0 var(--space-5) var(--space-5);
}
.faq-item .faq-a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.faq-item .faq-a p:last-child { margin-bottom: 0; }

/* ============================================
   News article related-block (internal linking)
   ============================================ */
.related-block {
  padding-top: var(--space-8, 48px);
  padding-bottom: var(--space-8, 48px);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt, var(--color-surface));
}
.related-block .related-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.related-block .related-col {
  padding: clamp(16px, 2vw, 22px) 0;
}
.related-block .related-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 650;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  text-align: left;
  color: var(--color-text);
}
.related-block .related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related-block .related-list li {
  padding: 0;
}
.related-block .related-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.related-block .related-list a::before {
  content: "\2192";
  color: #9A6E00;
  font-weight: 600;
  transition: transform .16s ease;
}
[data-theme='dark'] .related-block .related-list a::before {
  color: #FFD93D;
}
.related-block .related-list a:hover {
  color: #9A6E00;
  border-bottom-color: #F5B800;
}
[data-theme='dark'] .related-block .related-list a:hover {
  color: #FFD93D;
  border-bottom-color: #FFD93D;
}
.related-block .related-list a:hover::before {
  transform: translateX(3px);
}

/* ============================================
   Hero eyebrow: verticals list. Allowed to wrap
   so no vertical (e.g. Crypto) is ever clipped.
   ============================================ */
.eyebrow-verticals {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  line-height: 1.5;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 720px) {
  .eyebrow-verticals {
    font-size: clamp(10px, 2.6vw, 12px);
    letter-spacing: 0.02em;
  }
}
@media (max-width: 480px) {
  .eyebrow-verticals {
    font-size: 10.5px;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
}
@media (max-width: 380px) {
  .eyebrow-verticals {
    font-size: 10px;
    letter-spacing: 0.01em;
  }
}

/* ============================================
   Mobile overflow safety: lock horizontal scroll
   ============================================ */
html {
  overflow-x: hidden;
}
/* Compare table: make it horizontally scrollable on narrow viewports
   instead of pushing the whole body wider */
@media (max-width: 720px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr {
    display: table;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }
}

/* ---------------------------------------------------------------
   Dark-mode contrast fixes for hub cards (use-cases / solutions /
   products / book-a-demo / security / sub-processors).
   Inline page CSS uses var(--surface-2, #f8f8f8) as a near-white
   fallback which never flipped in dark mode, leaving H2 text
   invisible on a near-white card.
   --------------------------------------------------------------- */
[data-theme='dark'] .uc-hub-card,
[data-theme='dark'] .hub-card,
[data-theme='dark'] .sol-hub-card,
[data-theme='dark'] .pr-hub-card {
  background: var(--color-surface-2, #0f2440);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-ink-0, #eaf0fa);
}
[data-theme='dark'] .uc-hub-card h2,
[data-theme='dark'] .uc-hub-card h3,
[data-theme='dark'] .hub-card h2,
[data-theme='dark'] .hub-card h3,
[data-theme='dark'] .sol-hub-card h2,
[data-theme='dark'] .sol-hub-card h3,
[data-theme='dark'] .pr-hub-card h2,
[data-theme='dark'] .pr-hub-card h3 {
  color: var(--color-ink-0, #eaf0fa);
}
[data-theme='dark'] .uc-hub-card p,
[data-theme='dark'] .hub-card p,
[data-theme='dark'] .sol-hub-card p,
[data-theme='dark'] .pr-hub-card p {
  color: var(--color-ink-2, #c8d2e3);
}
[data-theme='dark'] .uc-hub-thumb-placeholder,
[data-theme='dark'] .hub-card-thumb-placeholder {
  background: rgba(255,255,255,0.04);
}
/* Thin neutral text (muted) used on book-a-demo / security /
   sub-processors panels with --surface-2 backgrounds. */
[data-theme='dark'] [style*="background: var(--surface-2"],
[data-theme='dark'] [style*="background:var(--surface-2"] {
  background: var(--color-surface-2, #0f2440) !important;
  color: var(--color-ink-0, #eaf0fa) !important;
}

/* =================================================================
   DARK MODE — Raster illustration softening
   ---------------------------------------------------------------
   The brand illustration set (pricing, solutions-*, partnerships,
   contact, careers, quiz, newsletters, data-monitoring, compliance-hero,
   team-culture, global-coverage, uc-* and hub screenshots) was produced
   on a near-white cream canvas. In dark mode these sit on the navy page
   as bright rectangles. Rather than regenerate all assets, we wrap them
   in a subtle dark frame, tone down brightness and add a divider.
   ---------------------------------------------------------------- */
/* Dark mode: brand illustrations sit on the page background directly.
   We key out the cream canvas from the PNGs (transparent variants in
   /img/brand/dark/) and serve those when data-theme=dark. No frame,
   no border, no drop shadow — the illustration floats naturally. */
[data-theme='dark'] .brand-hero-visual {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
[data-theme='dark'] .brand-hero-visual img,
[data-theme='dark'] .brand-hero-visual picture img {
  background: transparent;
  border-radius: 0;
  filter: none;
  mix-blend-mode: normal;
}
/* Dark-mode image swap: swap to transparent /img/brand/dark/ variants
   by file-name matching. Using attribute selectors so we don't have to
   touch the HTML. */
[data-theme='dark'] img[src$="/img/brand/pricing.webp"] { content: url("/img/brand/dark/pricing.webp"); }
[data-theme='dark'] img[src$="/img/brand/pricing.png"]  { content: url("/img/brand/dark/pricing.png"); }
[data-theme='dark'] img[src$="/img/brand/quiz.webp"] { content: url("/img/brand/dark/quiz.webp"); }
[data-theme='dark'] img[src$="/img/brand/quiz.png"]  { content: url("/img/brand/dark/quiz.png"); }
[data-theme='dark'] img[src$="/img/brand/careers.webp"] { content: url("/img/brand/dark/careers.webp"); }
[data-theme='dark'] img[src$="/img/brand/careers.png"]  { content: url("/img/brand/dark/careers.png"); }
[data-theme='dark'] img[src$="/img/brand/contact.webp"] { content: url("/img/brand/dark/contact.webp"); }
[data-theme='dark'] img[src$="/img/brand/contact.png"]  { content: url("/img/brand/dark/contact.png"); }
[data-theme='dark'] img[src$="/img/brand/partnerships.webp"] { content: url("/img/brand/dark/partnerships.webp"); }
[data-theme='dark'] img[src$="/img/brand/partnerships.png"]  { content: url("/img/brand/dark/partnerships.png"); }
[data-theme='dark'] img[src$="/img/brand/newsletters.webp"] { content: url("/img/brand/dark/newsletters.webp"); }
[data-theme='dark'] img[src$="/img/brand/newsletters.png"]  { content: url("/img/brand/dark/newsletters.png"); }
[data-theme='dark'] img[src$="/img/brand/team-culture.webp"] { content: url("/img/brand/dark/team-culture.webp"); }
[data-theme='dark'] img[src$="/img/brand/team-culture.png"]  { content: url("/img/brand/dark/team-culture.png"); }
[data-theme='dark'] img[src$="/img/brand/global-coverage.webp"] { content: url("/img/brand/dark/global-coverage.webp"); }
[data-theme='dark'] img[src$="/img/brand/global-coverage.png"]  { content: url("/img/brand/dark/global-coverage.png"); }
[data-theme='dark'] img[src$="/img/brand/data-monitoring.webp"] { content: url("/img/brand/dark/data-monitoring.webp"); }
[data-theme='dark'] img[src$="/img/brand/data-monitoring.png"]  { content: url("/img/brand/dark/data-monitoring.png"); }
[data-theme='dark'] img[src$="/img/brand/compliance-hero.webp"] { content: url("/img/brand/dark/compliance-hero.webp"); }
[data-theme='dark'] img[src$="/img/brand/compliance-hero.png"]  { content: url("/img/brand/dark/compliance-hero.png"); }
[data-theme='dark'] img[src$="/img/brand/solutions-igaming.webp"] { content: url("/img/brand/dark/solutions-igaming.webp"); }
[data-theme='dark'] img[src$="/img/brand/solutions-igaming.png"]  { content: url("/img/brand/dark/solutions-igaming.png"); }
[data-theme='dark'] img[src$="/img/brand/solutions-finance.webp"] { content: url("/img/brand/dark/solutions-finance.webp"); }
[data-theme='dark'] img[src$="/img/brand/solutions-finance.png"]  { content: url("/img/brand/dark/solutions-finance.png"); }
[data-theme='dark'] img[src$="/img/brand/solutions-crypto.webp"] { content: url("/img/brand/dark/solutions-crypto.webp"); }
[data-theme='dark'] img[src$="/img/brand/solutions-crypto.png"]  { content: url("/img/brand/dark/solutions-crypto.png"); }
[data-theme='dark'] img[src$="/img/brand/solutions-ecommerce.webp"] { content: url("/img/brand/dark/solutions-ecommerce.webp"); }
[data-theme='dark'] img[src$="/img/brand/solutions-ecommerce.png"]  { content: url("/img/brand/dark/solutions-ecommerce.png"); }
[data-theme='dark'] img[src$="/img/brand/solutions-healthcare.webp"] { content: url("/img/brand/dark/solutions-healthcare.webp"); }
[data-theme='dark'] img[src$="/img/brand/solutions-healthcare.png"]  { content: url("/img/brand/dark/solutions-healthcare.png"); }
[data-theme='dark'] img[src$="/img/brand/uc-affiliate-compliance.png"] { content: url("/img/brand/dark/uc-affiliate-compliance.webp"); }
[data-theme='dark'] img[src$="/img/brand/uc-brand-protection.png"]    { content: url("/img/brand/dark/uc-brand-protection.webp"); }
[data-theme='dark'] img[src$="/img/brand/uc-marketing-optimisation.png"] { content: url("/img/brand/dark/uc-marketing-optimisation.webp"); }
[data-theme='dark'] img[src$="/img/brand/uc-ppc-monitoring.png"] { content: url("/img/brand/dark/uc-ppc-monitoring.webp"); }
[data-theme='dark'] img[src$="/img/brand/uc-social-media.png"]  { content: url("/img/brand/dark/uc-social-media.webp"); }
[data-theme='dark'] img[src$="/img/brand/uc-sub-affiliate.png"] { content: url("/img/brand/dark/uc-sub-affiliate.webp"); }
[data-theme='dark'] img.hub-hero-img {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  filter: none;
}
[data-theme='dark'] .uc-hub-thumb img,
[data-theme='dark'] .hub-card-thumb img { filter: none; }
/* Inline product screenshots on product pages: product UI is already
   light-themed, so dim very slightly so whites don't punch out. */
[data-theme='dark'] main img[src*="/img/product/"],
[data-theme='dark'] main img[src*="/img/products/"] {
  filter: saturate(0.92) brightness(0.94);
  border-radius: 8px;
}

/* Clients page: featured story card gradient panel already OK, but
   the story-body background inherits --color-surface — force the
   dark surface to keep body readable (was fine, explicit for safety) */
[data-theme='dark'] .story-card {
  background: var(--color-surface-2, #0f2440);
  border-color: rgba(255,255,255,0.08);
}

/* Products.html 'platform-note' — had no styles, inherited default
   white bg with faint body copy. Give it a proper dark card look. */
.platform-note {
  background: var(--color-surface-2, #f5f7fa);
  border-left: 3px solid var(--color-accent, #F5B800);
  border-radius: 12px;
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 32px);
  margin: clamp(32px, 4vw, 48px) 0;
  color: var(--color-ink, #0b1220);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}
.platform-note p { margin: 0; }
[data-theme='dark'] .platform-note {
  background: var(--color-surface-2, #0f2440);
  color: var(--color-ink-0, #eaf0fa);
  border-left-color: var(--color-accent, #F5B800);
}

/* Logos band / logo-wall — customer brand logos (fidelity, revolut,
   kraken, draftkings, etc.) are mono dark and disappear in dark mode.
   Invert them. The Rightlander brand logo uses its own blue tokens and
   must NOT be inverted — so target only customer logo containers. */
[data-theme='dark'] .logo-wall img.logo-mark,
[data-theme='dark'] .logo-wall .logo-mark,
[data-theme='dark'] .story-card .story-logo,
[data-theme='dark'] .logo-row img,
[data-theme='dark'] .partner-logos img {
  filter: invert(1) brightness(1.6) saturate(0);
  opacity: 0.82;
}
[data-theme='dark'] .logo-wall img.logo-mark:hover,
[data-theme='dark'] .partner-logos img:hover {
  opacity: 1;
}

/* Nav brand logo — already an SVG with white lines baked in for some
   variants; leave untouched. Footer logo may be dark — invert. */


/* =================================================================
   Brand-hero proof block — replaces the decorative illustration on
   commercial pages (pricing, about) with a stat trio that buyers
   actually read. Sits in the same grid slot as .brand-hero-visual.
   ---------------------------------------------------------------- */
.brand-hero-proof {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(245,184,0,0.06) 0%, rgba(245,184,0,0.02) 100%);
  border: 1px solid rgba(245,184,0,0.18);
  align-self: start;
}
[data-theme='dark'] .brand-hero-proof {
  background: linear-gradient(180deg, rgba(245,184,0,0.08) 0%, rgba(245,184,0,0.02) 100%);
  border-color: rgba(245,184,0,0.25);
}
.brand-hero-proof .proof-big {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-hero-proof .proof-num {
  font-size: clamp(64px, 9vw, 112px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}
[data-theme='dark'] .brand-hero-proof .proof-num { color: var(--color-ink-0, #eaf0fa); }
.brand-hero-proof .proof-num .accent { color: var(--color-accent, #F5B800); font-size: 0.6em; }
.brand-hero-proof .proof-label {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
  color: var(--color-text-muted, #5a6577);
  max-width: 36ch;
}
[data-theme='dark'] .brand-hero-proof .proof-label { color: var(--color-ink-2, #c8d2e3); }
.brand-hero-proof .proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--color-divider);
}
.brand-hero-proof .proof-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-hero-proof .proof-mini-num {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
}
[data-theme='dark'] .brand-hero-proof .proof-mini-num { color: var(--color-ink-0, #eaf0fa); }
.brand-hero-proof .proof-mini-num .accent { color: var(--color-accent, #F5B800); }
.brand-hero-proof .proof-mini-label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.brand-hero-proof .proof-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent, #F5B800);
  text-decoration: none;
  margin-top: 4px;
}
.brand-hero-proof .proof-link:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .brand-hero-proof .proof-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .brand-hero-proof .proof-mini:nth-child(3) { grid-column: 1 / -1; }
}

/* Why Rightlander page */
.why-hero {
  text-align: center;
  padding: 80px 0 40px;
}
.why-hero h1 {
  max-width: 900px;
  margin: 12px auto 16px;
}
.why-hero .hero-sub {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-text-muted, #6B7280);
  font-size: 17px;
  line-height: 1.6;
}
.why-hero .btn-row {
  justify-content: center;
}
.feature-block {
  padding: 24px;
  border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s, transform .15s;
}
.feature-block:hover {
  border-color: var(--color-primary, #0263E0);
  transform: translateY(-2px);
}
.feature-block h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink, #0D1117);
}
.feature-block p {
  margin: 0;
  color: var(--color-text-muted, #6B7280);
  font-size: 15px;
  line-height: 1.6;
}
[data-theme="dark"] .feature-block {
  background: #111827;
  border-color: #374151;
}
[data-theme="dark"] .feature-block h3 { color: #F9FAFB; }
[data-theme="dark"] .feature-block p { color: #D1D5DB; }

/* ============================================================
   PROBLEM / COST / SOLUTION — eCommerce solution page
   Three-column grid of diagnostic cards inserted between
   the hero and the feature grid.
   ============================================================ */

.problem-solution-section {
  padding: var(--space-10, 64px) 0 var(--space-8, 48px);
}

.problem-solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 24px);
}

@media (max-width: 900px) {
  .problem-solution-grid {
    grid-template-columns: 1fr;
  }
}

/* Card titles inherit the same style as .feature-card h3,
   but we give each box a discreet labelling eyebrow so readers
   can orient quickly without extra markup clutter. */
.problem-solution-card {
  display: flex;
  flex-direction: column;
}

/* The closing summary line sits at the bottom of each card
   and reads as a conclusion rather than a bullet. */
.problem-solution-closing {
  margin-top: var(--space-4, 16px);
  margin-bottom: 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-muted, #6B7280);
  line-height: 1.5;
}

[data-theme="dark"] .problem-solution-closing {
  color: var(--color-text-muted, #9CA3AF);
}