/*
  Ridi — Moto Navigator case study. Structure synced from Figma node
  816:12955 (fileKey DU3fuTo8QXIJ0uMcI3jh91).

  2026-09-11: first pass — structure only, no animation.
  2026-09-12: Roman's "final" design pass — new Hero, restructured Key
  Decisions (GPS-lost dropped), real Research artifacts, wireframe links
  + luminosity filter, and the site's animation system added:
    - 3 animated "gray line" squiggles in Hero (same technique as YOY,
      15% faster)
    - Hero screens + Audience avatars "jump up" on entrance (bounce,
      random order, driven by js/ridi-animations.js)
    - Research Artifacts / IA / mascot / wireframe groups fade in
      through a blur ("fog"), scroll-triggered
    - wireframe links open the external Figma file in a new tab, scale
      1.05x on hover; the "View wireframe flow ->" label brightens on
      hover

  Colors: exact hex values read off Figma via get_design_context this
  pass (#121317 Key Decisions wrapper, #1c1d21 Core Features/UIKit/
  Results-CTA cards) — not reused from the first-pass token guess.
*/

.ridi-page {
  background-color: #151518;
  color: #ffffff;
}

:root {
  --ridi-bg: #151518;
  --ridi-tint: #1e1e23;
  --ridi-surface3: #27272d;
  --ridi-panel-dark: #121317;
  --ridi-card: #1c1d21;
  --ridi-accent: #ff8a1f;
  --ridi-muted: #b2b2b8;
  --ridi-border: #2e2e36;
  --ridi-link: #8c76fc;
}

/* ---------- Shared primitives ---------- */

.ridi-section {
  padding: 48px var(--page-px);
}

@media (min-width: 1280px) {
  .ridi-section {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
  2026-09-12 (correction pass): tint fill must run edge-to-edge of the
  viewport even though .ridi-section itself caps at 1280px on wide
  desktops — same box-shadow+clip-path breakout as .yoy-section--tint.
*/
.ridi-section--tint {
  background-color: var(--ridi-tint);
  box-shadow: 0 0 0 100vmax var(--ridi-tint);
  clip-path: inset(0 -100vmax);
}

.ridi-heading {
  color: var(--ridi-accent);
  margin: 0 0 16px;
}

@media (min-width: 1024px) {
  .ridi-heading {
    margin-bottom: 24px;
  }
}

.ridi-subheading {
  color: #fffefe;
  margin: 0 0 8px;
}

.ridi-body-muted {
  color: var(--ridi-muted);
}

.ridi-body-muted + .ridi-body-muted {
  margin-top: 16px;
}

.ridi-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ridi-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.ridi-media img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.ridi-media--wide img {
  border-radius: 16px;
}

.ridi-panel {
  background-color: var(--ridi-tint);
  border-radius: 16px;
  padding: 24px;
}

.ridi-section--tint .ridi-panel {
  background-color: var(--ridi-surface3);
}

/* Challenge "main thing" panel: orange fill, dark semi-bold text. Same
   specificity-safe pattern as YOY's .yoy-panel--accent — the selector
   list matches .ridi-section--tint .ridi-panel's specificity so this
   modifier isn't silently outranked by it. */
.ridi-section--tint .ridi-panel--accent,
.ridi-panel--accent {
  background-color: var(--ridi-accent);
}

.ridi-panel--accent .body-large {
  color: #1a1a1a;
  font-weight: 600;
}

/* Simple list (Figma's bullet rows) */
.ridi-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ridi-list li {
  color: var(--ridi-muted);
  padding-left: 24px;
  position: relative;
}

.ridi-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--ridi-muted);
}

/* ---------- Fog-in (blur reveal), scroll-triggered ---------- */
/* Applied to Research Artifacts / IA / mascot / wireframe groups.
   .fog-init starts blurred+transparent; js/ridi-animations.js adds
   .is-fogged-in via IntersectionObserver once the element is in view. */
.fog-init {
  opacity: 0;
  filter: blur(24px);
  transition: opacity 900ms ease-out, filter 900ms ease-out;
}

.fog-init.is-fogged-in {
  opacity: 1;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .fog-init {
    opacity: 1;
    filter: none;
    transition: none;
  }
}

/* ---------- Bounce-in (jump up + settle), random order ---------- */
/* .bounce-init starts hidden below; js/ridi-animations.js assigns a
   random --bounce-delay (0.7s base + stagger) per item, then adds
   .is-bounced-in to play the overshoot keyframe once. */
.bounce-init {
  opacity: 0;
  transform: translateY(48px);
}

.bounce-init.is-bounced-in {
  animation: ridi-bounce-in 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--bounce-delay, 0s);
}

@keyframes ridi-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(48px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bounce-init {
    opacity: 1;
    transform: none;
  }
  .bounce-init.is-bounced-in {
    animation: none;
  }
}

/* ---------- Hero (866:14394) ---------- */

/* Gap from the header + rounded corners, same pattern as .atj2-hero:
   a permanent horizontal margin (not just padding) so the radius is
   visible at every width, not only past the 1280 max-width cap. */
.ridi-hero {
  position: relative;
  overflow: hidden;
  margin: 24px var(--page-px) 0;
  border-radius: 24px;
  padding: 48px var(--page-px);
}

@media (min-width: 1280px) {
  .ridi-hero {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .ridi-hero {
    border-radius: 48px;
    padding: 64px var(--page-px) 48px;
  }
}

.ridi-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Roman: background map.jpg may be stretched/deformed if needed to
   fill the frame — object-fit:cover above already avoids that in the
   common case, fill is the deliberate fallback for unusual aspect
   ratios. */

.ridi-hero__lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.ridi-hero__line {
  position: absolute;
  overflow: visible;
}

.ridi-hero__line--1 {
  left: 67%;
  top: -40%;
  width: 46%;
  height: 105%;
  transform: rotate(-141.16deg) scaleY(-1);
}

.ridi-hero__line--2 {
  left: -12%;
  top: -95%;
  width: 116%;
  height: 240%;
  transform: rotate(-38.84deg);
}

.ridi-hero__line--3 {
  left: -2%;
  top: -22%;
  width: 55%;
  height: 145%;
  transform: rotate(70.13deg) scaleY(-1);
}

/* "Hero gradient/lines for Ridi" — same technique as YOY/ATJ2's animated
   lines. 2026-09-12 correction: Roman reversed the earlier "15% faster"
   request — all 3 gray lines now run at YOY's own gray-line speed
   (2.7s), not faster. */
.ridi-hero__line path {
  animation-name: ridi-line-wiggle-1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ridi-hero__line--1 path {
  animation-name: ridi-line-wiggle-1;
  animation-duration: 2.7s;
}

.ridi-hero__line--2 path {
  animation-name: ridi-line-wiggle-2;
  animation-duration: 2.7s;
}

.ridi-hero__line--3 path {
  animation-name: ridi-line-wiggle-3;
  animation-duration: 2.7s;
}

@keyframes ridi-line-wiggle-1 {
  0%,
  100% {
    d: path("M6.00055 9.8113C35.1869 -10.3227 57.9417 52.9622 27.4215 113.99C-3.09863 175.019 112.136 109.046 176.812 128.742C241.487 148.438 21.3473 254.426 139.309 260.774C257.27 267.123 286.907 232.051 364.704 231.279C442.5 230.507 502.248 392.256 584.174 289.563");
  }
  33% {
    d: path("M6.00055 9.8113C34.23 -9.13 66.43 52.28 27.58 115.74C-9.41 175.26 114.73 114.91 168.69 124.81C233.30 154.63 25.22 245.26 148.95 270.07C260.35 269.43 280.06 222.35 365.27 222.47C436.30 225.35 492.85 391.53 584.174 289.563");
  }
  66% {
    d: path("M6.00055 9.8113C34.68 -7.17 61.27 45.81 17.64 111.49C-7.62 181.23 115.95 111.08 177.98 131.97C234.39 147.24 14.59 262.55 130.49 267.15C248.76 270.86 283.65 230.14 371.55 221.65C433.72 238.81 502.43 384.08 584.174 289.563");
  }
}

@keyframes ridi-line-wiggle-2 {
  0%,
  100% {
    d: path("M6.00055 14.7082C72.6865 -31.2948 124.677 113.301 54.944 252.74C-14.7896 392.179 248.503 241.442 396.276 286.444C544.048 331.446 41.0652 573.613 310.588 588.117C580.111 602.622 647.826 522.49 825.578 520.726C1003.33 518.961 1139.84 888.531 1327.03 653.895");
  }
  33% {
    d: path("M6.00055 14.7082C64.01 -24.63 131.30 125.88 43.63 243.04C-27.49 382.28 256.93 228.13 397.40 276.14C536.66 328.98 53.22 577.52 293.11 580.05C567.39 615.99 658.98 533.51 837.33 529.54C1019.51 529.54 1131.08 901.13 1327.03 653.895");
  }
  66% {
    d: path("M6.00055 14.7082C58.53 -24.00 130.15 129.15 46.70 243.95C-6.36 397.88 241.41 248.07 392.56 296.43C530.31 321.48 55.52 568.50 301.96 599.07C584.85 590.01 649.67 528.39 813.52 526.19C989.76 513.10 1124.84 877.89 1327.03 653.895");
  }
}

@keyframes ridi-line-wiggle-3 {
  0%,
  100% {
    d: path("M6.00055 10.8993C43.5188 -14.9824 72.7695 66.3686 33.5366 144.819C-5.6962 223.269 142.435 138.462 225.574 163.781C308.712 189.1 25.7283 325.345 177.365 333.506C329.001 341.666 367.099 296.583 467.104 295.59C567.109 294.598 643.914 502.522 749.227 370.513");
  }
  33% {
    d: path("M6.00055 10.8993C55.62 -27.68 78.91 57.48 46.18 132.26C4.17 227.98 151.73 151.46 218.81 159.57C314.13 183.40 19.57 318.29 186.67 343.24C336.74 334.47 378.14 296.88 460.12 294.43C565.03 283.65 645.60 498.88 749.227 370.513");
  }
  66% {
    d: path("M6.00055 10.8993C39.92 -15.49 70.61 64.98 31.18 148.92C-11.97 226.78 129.70 133.32 221.29 154.47C315.04 184.16 33.25 337.21 170.96 343.74C337.00 346.02 354.81 295.46 470.40 290.29C559.94 289.65 637.63 510.01 749.227 370.513");
  }
}

@media (prefers-reduced-motion: reduce) {
  .ridi-hero__line path {
    animation: none;
  }
}

.ridi-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ridi-hero__body {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Single flattened "Screens - cover" export (822x712, matches the
   548x474 Figma frame at 1.5x) replaces the old 3-separately-positioned
   mockup composite, per Roman's own flattened Figma layer. */
.ridi-hero__screens {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .ridi-hero__screens {
    width: 548px;
    max-width: none;
    margin: 0;
  }
}

.ridi-hero__screen-cover img {
  width: 100%;
  display: block;
}

.ridi-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .ridi-hero__content {
    gap: 24px;
    flex: 1;
  }
}

.ridi-hero__title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ridi-hero__logo {
  width: 56px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .ridi-hero__logo {
    width: 72px;
  }
}

.ridi-hero__title {
  color: var(--ridi-accent);
  font-size: 40px;
  margin: 0;
}

@media (min-width: 1024px) {
  .ridi-hero__title {
    font-size: var(--h1-size);
  }
}

.ridi-hero__desc {
  color: #ffffff;
}

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

.ridi-details li {
  color: var(--ridi-muted);
  font-size: 16px;
  line-height: 25px;
}

.ridi-details b {
  color: var(--ridi-accent);
  font-weight: 500;
}

/* ---------- Research: Analogy logos (826:13247) ---------- */

.ridi-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .ridi-logos {
    flex-direction: column;
    justify-content: center;
  }
}

.ridi-logos img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .ridi-logos img {
    height: 40px;
  }
}

/* ---------- Audience segmentation (816:13030) ---------- */

.ridi-audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .ridi-audience {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ridi-audience__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Soft orange glow behind each avatar — subtle, independently pulsing
   so the 3 items don't sync up ("хаотично"), per Roman. */
.ridi-audience__avatar-wrap {
  position: relative;
  width: 125px;
  height: 126px;
}

.ridi-audience__avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 31, 0.2) 0%, rgba(255, 138, 31, 0) 70%);
  animation-name: ridi-avatar-glow-pulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.ridi-audience__avatar-wrap--1::before {
  animation-duration: 4.2s;
  animation-delay: 0s;
}

.ridi-audience__avatar-wrap--2::before {
  animation-duration: 5.1s;
  animation-delay: 1.1s;
}

.ridi-audience__avatar-wrap--3::before {
  animation-duration: 3.6s;
  animation-delay: 0.6s;
}

@keyframes ridi-avatar-glow-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ridi-audience__avatar-wrap::before {
    animation: none;
    opacity: 0.7;
  }
}

.ridi-audience__avatar {
  position: relative;
  width: 125px;
  height: 126px;
  border-radius: 50%;
  object-fit: cover;
}

.ridi-audience__item p {
  margin: 0;
}

.ridi-audience__name {
  color: var(--ridi-accent);
  font-weight: 700;
  font-size: 18px;
}

.ridi-audience__desc {
  color: var(--ridi-muted);
  font-size: 14px;
}

/* ---------- Research Artifacts / IA (816:13042, 816:13045) ---------- */

.ridi-artifact-heading {
  text-align: center;
  color: #ffffff;
  margin: 0 0 16px;
}

.ridi-artifact-media img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

/* ---------- Key Decisions (816:13050) ---------- */

/*
  2026-09-12 (correction pass): the panel's dark fill goes edge-to-edge
  of the viewport (same box-shadow+clip-path breakout used on
  .ridi-section--tint) — the rounded corners get pushed far past the
  visible viewport by the spread, so they read as flush edges rather
  than a boxed rounded card. Horizontal padding matches the standard
  section inset (var(--page-px)) instead of an extra desktop-only
  80px, so the panel's own content (Screens, decision cards) lines up
  with the same column edges as every other section.
*/
.ridi-decisions-panel {
  position: relative;
  background-color: var(--ridi-panel-dark);
  box-shadow: 0 0 0 100vmax var(--ridi-panel-dark);
  clip-path: inset(0 -100vmax);
  border-radius: 24px;
  padding: 32px var(--page-px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ridi-decisions-panel {
    border-radius: 48px;
    padding: 48px var(--page-px);
  }
}

.ridi-decision {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

.ridi-decision h3 {
  color: #ffffff;
  margin: 0;
}

.ridi-decision__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
  2026-09-12 (correction pass): "description" and "Screens" must always
  match height on this page — switched from align-items:center (which
  just centers a shorter column, leaving mismatched whitespace) to
  stretch, so the Screens/gif-frame column grows or shrinks to the
  cards column's actual height (text length varies decision to
  decision and after translation), scaling the phone image
  proportionally via aspect-ratio instead of distorting it.
*/
@media (min-width: 1024px) {
  .ridi-decision__body {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }
}

.ridi-decision__screens {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* 262x534 aspect, matching every other "Screens" image on this page
   (Core Features ride shots, the AutoZoom gif frame) — was wrongly
   shrunk to a fixed 140/180px, which made this column read much
   shorter than its sibling "description" column instead of matching
   its height, per Roman. */
.ridi-decision__screens img {
  flex-shrink: 0;
  width: 160px;
  aspect-ratio: 262 / 534;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/*
  Desktop height comes from js/ridi-animations.js (syncDecisionHeights),
  set as an explicit inline px height on .ridi-decision__screens itself
  — matching the sibling .ridi-decision__cards column, per Roman. A
  plain CSS flex-stretch here doesn't reliably transfer through to the
  aspect-ratio'd <img> children (verified: resolves to 0 width), so the
  height needs to be a real specified length for aspect-ratio's width
  derivation to work — hence the JS measurement instead of %/stretch.
*/
@media (min-width: 1024px) {
  /* overflow-x stays auto (not visible) as a safety net: JS caps the
     height to fit, but a scrollbar here is a much smaller failure mode
     than page-level horizontal overflow if a rounding edge case slips
     through. */
  .ridi-decision__screens img {
    width: auto;
    height: 100%;
  }
}

.ridi-decision__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .ridi-decision__cards {
    width: 280px;
    flex-shrink: 0;
  }
}

.ridi-decision__card {
  background-color: var(--ridi-card);
  border-radius: 10px;
  padding: 16px;
}

.ridi-decision__card h4 {
  color: var(--ridi-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}

.ridi-decision__card p {
  color: var(--ridi-muted);
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

/* 262x534, matching the "Screens" size used everywhere else on this
   page (ride shots, Danger/auto-save decision screens) — per Figma
   (861:14350) this gif frame is that same "Screens" element. */
.ridi-gif-frame {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  max-width: 262px;
  aspect-ratio: 262 / 534;
}

/*
  Desktop height comes from js/ridi-animations.js (syncDecisionHeights),
  set as an explicit inline px height matching the sibling
  .ridi-decision__cards column, per Roman — width then follows from the
  preserved aspect-ratio so the phone scales without distorting, and
  the gif/bezel children (percentage-sized off this box) scale with it.
  A plain CSS flex-stretch alone doesn't reliably transfer through to
  aspect-ratio here (verified: resolves to 0 width) — hence JS instead
  of relying on align-items:stretch/height:100%.
*/
@media (min-width: 1024px) {
  .ridi-gif-frame {
    width: auto;
    max-width: none;
  }
}

/* Gif fills the "Paste gif here" cutout (861:14351: inset 20/22/17/22,
   radius 34 in the 262x534 frame). */
.ridi-gif-frame__gif {
  position: absolute;
  top: 3.75%;
  right: 8.4%;
  bottom: 3.2%;
  left: 8.4%;
  width: 83.2%;
  height: 93.1%;
  border-radius: 34px;
  object-fit: cover;
  display: block;
}

/* "iPhone 16 Pro Max" bezel (861:14352) — transparent screen cutout,
   painted above the gif so it reads as playing inside the phone. */
.ridi-gif-frame__bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- Core Features (816:13126) + UIKit (816:13105) + Results CTA (816:13149) ---------- */

.ridi-card-block {
  background-color: var(--ridi-card);
  border-radius: 16px;
  padding: 24px;
}

.ridi-card-block + .ridi-card-block {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .ridi-card-block + .ridi-card-block {
    margin-top: 48px;
  }
}

.ridi-feature__text h3 {
  color: #ffffff;
  margin: 0 0 12px;
}

.ridi-feature__text p {
  margin: 0;
}

.ridi-feature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .ridi-feature__body {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
  }
}

/* Ride screenshot: 262x534, per Figma (851:13779) and Roman's explicit
   spec — this is the primary image, "ride" is not secondary. */
.ridi-feature__ride {
  flex-shrink: 0;
  width: 100%;
  max-width: 262px;
}

.ridi-feature__ride img {
  width: 100%;
  max-width: 262px;
  aspect-ratio: 262 / 534;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* Wireframe screenshot + "View wireframe flow ->" link — both are real
   external links (Figma prototype URL), opening in a new tab. Grayscale
   via filter (see note below). Constrained to Figma's own wireframe
   width (858:13889, 482px) so it reads as a secondary/reference image
   instead of stretching to the flex row's full remaining width. */
.ridi-wireframe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 482px;
}

.ridi-wireframe__link {
  display: block;
  width: 100%;
  aspect-ratio: 2130 / 1590;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ridi-wireframe__link:hover {
  transform: scale(1.05);
}

.ridi-wireframe__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Fixed: mix-blend-mode:luminosity (Figma's own export technique)
     depends on what's painted behind the element and rendered as
     still-color here — filter:grayscale is the reliable way to get an
     actual black-and-white image regardless of backdrop. */
  filter: grayscale(1);
}

.ridi-wireframe__cta {
  color: var(--ridi-link);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  transition: filter 0.15s ease;
}

.ridi-wireframe__cta:hover {
  filter: brightness(1.4);
}

.ridi-scenario3__rides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.ridi-scenario3__rides img {
  width: 100%;
  max-width: 262px;
  aspect-ratio: 262 / 534;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.ridi-scenario3__wireframe {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* UIKit body: vertically center the text/image columns against each
   other, per Roman — matches Figma's own "body" row (816:13107), which
   uses items-center. */
.ridi-uikit-body {
  align-items: center;
}

.ridi-uikit__media img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.ridi-mascot {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .ridi-mascot {
    flex-direction: row;
    align-items: center;
  }
}

.ridi-mascot__media {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .ridi-mascot__media {
    width: 360px;
  }
}

.ridi-mascot__media img {
  border-radius: 12px;
  width: 100%;
  object-fit: contain;
  background-color: var(--ridi-tint);
  display: block;
}

/*
  ---------- Results CTA (816:13149) ----------
  2026-09-12 (correction pass): Roman reworked this into a banner —
  outer section fills with the card color (#1c1d21, edge-to-edge like
  the other full-bleed sections), and .ridi-results-cta is now the
  inner #2a2929 rounded "Content" box from Figma (816:13151), not a
  .ridi-card-block wrapper.
*/
.ridi-results-section {
  position: relative;
  background-color: var(--ridi-card);
  box-shadow: 0 0 0 100vmax var(--ridi-card);
  clip-path: inset(0 -100vmax);
}

.ridi-results-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  background-color: #2a2929;
  border-radius: 16px;
  padding: 16px;
}

.ridi-results-cta p {
  color: #fffefe;
  margin: 0;
  font-size: 24px;
}

.ridi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #7b61ff;
  border: 1px solid #4f4c61;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: #fffefe;
  transition: background-color 0.15s ease;
}

.ridi-btn-primary:hover {
  background-color: #6a52e0;
}