/* ==========================================================================
   Reviorum — pages/about.css  (about.html / page-about.php)
   ========================================================================== */

/* ---------- Hero ---------- */
.rv-about-hero__art { left: 50%; top: 0; width: 1440px; height: 520px; transform: translateX(-50%); }
.rv-about-hero__inner { position: relative; display: flex; flex-direction: column; gap: 18px; padding-block: var(--rv-s-2) 80px; }
.rv-about-hero .rv-breadcrumbs { padding-bottom: var(--rv-s-6); }
.rv-about-hero .rv-hero__eyebrow { color: var(--rv-mint); }
.rv-about-hero .rv-hero__title { max-width: 720px; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.02; }
.rv-about-hero .rv-hero__lead { max-width: 600px; color: var(--rv-night-text); }

.rv-about-body { display: flex; flex-direction: column; gap: 64px; padding-block: var(--rv-s-12) 64px; }
.rv-about-h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.rv-about-section { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Stats ---------- */
.rv-about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rv-s-4); margin: 0; }
.rv-about-stat { display: flex; flex-direction: column; padding: 22px; border-radius: var(--rv-r-lg); }
.rv-about-stat dt { color: var(--rv-muted); font-size: var(--rv-fs-md); }
.rv-about-stat dd { order: -1; margin: 0; font-size: 2.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.rv-about-stat--lavender { background: var(--rv-lavender); }
.rv-about-stat--lavender dd { color: var(--rv-night); }
.rv-about-stat--mint { background: var(--rv-hue-apps); }
.rv-about-stat--mint dd { color: #0f766e; }
.rv-about-stat--warm { background: var(--rv-warm); }
.rv-about-stat--warm dd { color: #9a3412; }
.rv-about-stat--rose { background: var(--rv-hue-casino); }
.rv-about-stat--rose dd { color: #9f1239; }

/* ---------- Flow ---------- */
.rv-about-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rv-s-4); margin: 0; padding: 0; list-style: none; }
.rv-about-flow__step { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.rv-about-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.rv-about-flow__icon--hosting { background: var(--rv-hue-hosting); color: var(--rv-hue-hosting-strong); }
.rv-about-flow__icon--shop { background: var(--rv-warm); color: #c2410c; }
.rv-about-flow__icon--apps { background: var(--rv-hue-apps); color: var(--rv-hue-apps-strong); }
.rv-about-flow__icon--night { background: var(--rv-night); color: var(--rv-sun); }
.rv-about-flow__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-about-flow__text { color: var(--rv-muted); font-size: var(--rv-fs-md); line-height: 1.55; }

/* ---------- Score method (tabs) ---------- */
.rv-about-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--rv-s-10); align-items: start; }
.rv-about-score__intro { display: flex; flex-direction: column; gap: 14px; }
.rv-about-score__intro p { color: var(--rv-ink-2); font-size: var(--rv-fs-base); line-height: 1.65; }
.rv-about-score .rv-tabs__list {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--rv-night);
}
.rv-about-score .rv-tabs__tab { min-height: 40px; border: 0; border-radius: var(--rv-r-md); background: transparent; color: var(--rv-night-text); font-weight: 600; }
.rv-about-score .rv-tabs__tab:hover { color: #fff; }
.rv-about-score .rv-tabs__tab[aria-selected="true"] { background: var(--rv-surface); color: var(--rv-night); }
.rv-about-score .rv-tabs__tab:focus-visible { box-shadow: 0 0 0 2px var(--rv-night), 0 0 0 4px var(--rv-accent-tint); }
.rv-about-score__panels { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-about-panel { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.rv-no-js .rv-about-panel[hidden] { display: flex; }
.rv-about-panel__title { font-size: var(--rv-fs-lg); font-weight: 700; }
.rv-about-panel__text { color: var(--rv-ink-2); font-size: 0.9375rem; line-height: 1.65; }
.rv-about-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-s-3); margin: 0; }
.rv-about-values div { display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: #f1f3f7; }
.rv-about-values dt { color: var(--rv-muted); font-size: var(--rv-fs-xs); }
.rv-about-values dd { order: -1; margin: 0; color: var(--rv-ink-2); font-size: 1.375rem; font-weight: 800; }
.rv-about-values--accent div:first-child { background: var(--rv-accent-soft); }
.rv-about-values--accent div:first-child dd { color: var(--rv-accent); }
.rv-about-values--mint div { background: var(--rv-hue-apps); }
.rv-about-values--mint dd { color: #0f766e; }
.rv-about-values--rose div { background: var(--rv-hue-casino); }
.rv-about-values--rose dd { color: #9f1239; }

/* ---------- Rules ---------- */
.rv-about-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-4); margin: 0; padding: 0; list-style: none; }
.rv-about-rule { display: flex; gap: var(--rv-s-4); padding: 22px; }
.rv-about-rule__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 800;
}
/* Not ratings → neutral tints instead of green/red */
.rv-about-rule__icon--no { background: var(--rv-warm); color: #9a3412; }
.rv-about-rule__icon--yes { background: var(--rv-hue-apps); color: #0f766e; }
.rv-about-rule__title { margin-bottom: 4px; font-size: var(--rv-fs-base); font-weight: 700; }
.rv-about-rule__text { color: var(--rv-muted); font-size: var(--rv-fs-md); line-height: 1.55; }

/* ---------- Money ---------- */
.rv-about-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rv-s-8);
  padding: var(--rv-s-8);
  border-radius: var(--rv-r-lg);
  background: var(--rv-warm);
}
.rv-about-money__eyebrow { color: #9a3412; font-size: var(--rv-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rv-about-money .rv-about-h2 { margin-top: var(--rv-s-2); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
.rv-about-money p:last-child { color: var(--rv-ink-2); font-size: 0.9375rem; line-height: 1.65; }
.rv-about-money a { font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-about-hero__art { left: auto; right: -480px; transform: none; opacity: 0.55; }
  .rv-about-stats,
  .rv-about-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-about-score { grid-template-columns: minmax(0, 1fr); gap: var(--rv-s-6); }
}

@media (max-width: 768px) {
  .rv-about-rules,
  .rv-about-money { grid-template-columns: minmax(0, 1fr); }
  .rv-about-money { gap: var(--rv-s-3); padding: var(--rv-s-5); }
}

@media (max-width: 640px) {
  .rv-about-hero__art { display: none; }
  .rv-about-hero__inner { padding-bottom: var(--rv-s-8); gap: 14px; }
  .rv-about-hero .rv-breadcrumbs { padding-bottom: var(--rv-s-2); }
  .rv-about-hero .rv-hero__lead { font-size: var(--rv-fs-base); }
  .rv-about-body { gap: var(--rv-s-10); padding-top: var(--rv-s-6); }
  .rv-about-stats { gap: 10px; }
  .rv-about-stat { padding: 14px; }
  .rv-about-stat dd { font-size: 1.625rem; }
  .rv-about-stat dt { font-size: var(--rv-fs-sm); }
  .rv-about-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rv-about-flow__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .rv-about-flow__icon { grid-row: span 2; }
  .rv-about-score .rv-tabs__list { display: flex; align-self: stretch; }
  .rv-about-score .rv-tabs__tab { flex: 1; padding: 0 8px; }
  .rv-about-panel { padding: 18px; }
  .rv-about-values { gap: var(--rv-s-2); }
  .rv-about-values div { padding: 10px; }
  .rv-about-values dd { font-size: var(--rv-fs-lg); }
  .rv-about-rule { padding: 16px; gap: var(--rv-s-3); }
}