:root {
  color-scheme: light;
  --color-brand: #153243;
  --color-brand-rgb: 21, 50, 67;
  --color-accent: #66b1ad;
  --color-accent-rgb: 102, 177, 173;
  --color-danger: #9f2a20;
  --color-danger-rgb: 159, 42, 32;
  --color-warning: #bf8326;
  --color-warning-rgb: 191, 131, 38;
  --color-success: #2e7d5d;
  --color-success-rgb: 46, 125, 93;
  --color-info: color-mix(in srgb, var(--color-brand) 75%, var(--color-accent) 25%);
  --color-info-rgb: 28, 94, 128;
  --color-neutral: color-mix(in srgb, var(--color-brand) 58%, var(--color-accent) 42%);
  --color-neutral-rgb: 107, 76, 171;
  --gray-50: #fffdf8;
  --gray-100: #f9f6ef;
  --gray-150: #f3efe6;
  --gray-200: #efe9dd;
  --gray-300: #d4e0e7;
  --gray-400: #c6daf5;
  --gray-500: #8ea0ae;
  --gray-600: #5a6772;
  --gray-900: #13212c;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --black: #000;
  --black-rgb: 0, 0, 0;
  --bg: var(--gray-150);
  --ink: var(--gray-900);
  --muted: var(--gray-600);
  --text-on-dark: color-mix(in srgb, var(--white) 92%, var(--color-accent) 8%);
  --text-on-dark-muted: var(--gray-300);
  --text-danger: color-mix(in srgb, var(--color-danger) 78%, var(--black) 22%);
  --text-warning: color-mix(in srgb, var(--color-warning) 68%, var(--black) 32%);
  --text-success: color-mix(in srgb, var(--color-success) 78%, var(--black) 22%);
  --text-info: color-mix(in srgb, var(--color-info) 82%, var(--black) 18%);
  --text-neutral: color-mix(in srgb, var(--color-neutral) 78%, var(--black) 22%);
  --button-primary-text: var(--text-on-dark);
  --line: rgba(var(--color-brand-rgb), 0.12);
  --card: rgba(var(--white-rgb), 0.9);
  --card-strong: var(--gray-50);
  --surface-base: rgba(var(--color-brand-rgb), 0.08);
  --surface-muted: rgba(var(--color-brand-rgb), 0.06);
  --surface-hover: rgba(var(--color-brand-rgb), 0.12);
  --surface-elevated: rgba(var(--white-rgb), 0.72);
  --surface-elevated-strong: rgba(var(--white-rgb), 0.88);
  --surface-glass: rgba(var(--white-rgb), 0.95);
  --surface-inverse: rgba(var(--color-brand-rgb), 0.92);
  --surface-warning: rgba(var(--color-warning-rgb), 0.16);
  --surface-warning-strong: rgba(var(--color-warning-rgb), 0.28);
  --surface-danger: rgba(var(--color-danger-rgb), 0.16);
  --surface-danger-strong: rgba(var(--color-danger-rgb), 0.28);
  --surface-success: rgba(var(--color-success-rgb), 0.16);
  --surface-success-strong: rgba(var(--color-success-rgb), 0.28);
  --surface-info: rgba(var(--color-info-rgb), 0.16);
  --surface-neutral: rgba(var(--color-neutral-rgb), 0.16);
  --accent: var(--color-accent);
  --accent-deep: color-mix(in srgb, var(--color-accent) 70%, var(--black) 30%);
  --accent-soft: rgba(var(--color-accent-rgb), 0.12);
  --sea: var(--color-brand);
  --sea-soft: rgba(var(--color-brand-rgb), 0.08);
  --link: var(--sea);
  --link-visited: color-mix(in srgb, var(--color-brand) 72%, var(--color-neutral) 28%);
  /* --link-visited: color-mix(in srgb, var(--white) 92%, var(--color-accent) 8%); */
  --danger-soft: rgba(var(--color-danger-rgb), 0.16);
  --warning-soft: rgba(var(--color-warning-rgb), 0.16);
  --success-soft: rgba(var(--color-success-rgb), 0.16);
  --shadow-soft: 0 16px 32px rgba(var(--color-brand-rgb), 0.1);
  --shadow: 0 24px 60px rgba(var(--color-brand-rgb), 0.12);
  --space-0: 0;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-5-5: 1.375rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --font-size-xs: 0.8rem;
  --font-size-2xs: 0.72rem;
  --font-size-3xs: 0.68rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-md-plus: 1.1rem;
  --font-size-lg: 1.3rem;
  --font-size-xl: 1.4rem;
  --font-family-sans: 'Avenir Next', 'Segoe UI', sans-serif;
  --font-family-serif: 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-family-mono: 'SF Mono', 'IBM Plex Mono', monospace;
  --radius-pill: 999px;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-lg-soft: 22px;
  --radius-md-soft: 20px;
  --radius-md-plus: 18px;
  --radius-md: 16px;
  --radius-sm-plus: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --max-width: 1720px;
}

:root[data-theme='arena'] {
  --color-brand: #2f3a46;
  --color-brand-rgb: 47, 58, 70;
  --color-accent: #c48a4a;
  --color-accent-rgb: 196, 138, 74;
  --color-danger: #a74233;
  --color-danger-rgb: 167, 66, 51;
  --color-warning: #b28b2f;
  --color-warning-rgb: 178, 139, 47;
  --color-success: #3e7761;
  --color-success-rgb: 62, 119, 97;
  --color-info-rgb: 72, 108, 135;
  --color-neutral-rgb: 106, 90, 144;
  --gray-50: #fffaf3;
  --gray-100: #f7f0e4;
  --gray-150: #efe4d2;
  --gray-200: #e4d5be;
  --gray-300: #d7c5a8;
  --gray-400: #c5b39a;
  --gray-500: #9f8f7a;
  --gray-600: #6b6258;
  --gray-900: #2a2824;
}

:root[data-theme='icono'] {
  --color-brand: #2e4674;
  --color-brand-rgb: 46, 70, 116;
  --color-accent: #66b1ad;
  --color-accent-rgb: 102, 177, 173;
  --color-danger: #b34a3a;
  --color-danger-rgb: 179, 74, 58;
  --color-warning: #d08a3d;
  --color-warning-rgb: 208, 138, 61;
  --color-success: #3d8f6e;
  --color-success-rgb: 61, 143, 110;
  --color-info-rgb: 69, 118, 170;
  --color-neutral-rgb: 118, 97, 177;
  --gray-50: #fbfdff;
  --gray-100: #f0f5fd;
  --gray-150: #e4ebf8;
  --gray-200: #d7e1f3;
  --gray-300: #c4d3ec;
  --gray-400: #b0c3e3;
  --gray-500: #8192b3;
  --gray-600: #5a667f;
  --gray-900: #17243d;
  --shadow: 0 26px 64px rgba(var(--color-brand-rgb), 0.18);
}

:root[data-theme='noche'] {
  color-scheme: dark;
  --color-brand: #0e1b2a;
  --color-brand-rgb: 14, 27, 42;
  --color-accent: #4da8b2;
  --color-accent-rgb: 77, 168, 178;
  --color-danger: #c66a5f;
  --color-danger-rgb: 198, 106, 95;
  --color-warning: #d0a05c;
  --color-warning-rgb: 208, 160, 92;
  --color-success: #63a88b;
  --color-success-rgb: 99, 168, 139;
  --color-info-rgb: 95, 139, 189;
  --color-neutral-rgb: 130, 117, 173;
  --gray-50: #162333;
  --gray-100: #111d2c;
  --gray-150: #0d1826;
  --gray-200: #0a1320;
  --gray-300: #6f88a8;
  --gray-400: #5d7391;
  --gray-500: #4f627b;
  --gray-600: #9fb5cf;
  --gray-900: #e3edf9;
  --white: #e8f1ff;
  --white-rgb: 232, 241, 255;
  --black: #020912;
  --black-rgb: 2, 9, 18;
  --line: rgba(var(--white-rgb), 0.18);
  --card: rgba(var(--color-brand-rgb), 0.56);
  --card-strong: rgba(var(--color-brand-rgb), 0.68);
  --surface-base: rgba(var(--white-rgb), 0.08);
  --surface-muted: rgba(var(--white-rgb), 0.06);
  --surface-hover: rgba(var(--white-rgb), 0.14);
  --surface-elevated: rgba(var(--color-brand-rgb), 0.5);
  --surface-elevated-strong: rgba(var(--color-brand-rgb), 0.66);
  --surface-glass: rgba(var(--color-brand-rgb), 0.76);
  --surface-inverse: rgba(var(--white-rgb), 0.16);
  --text-on-dark: #eef5ff;
  --text-on-dark-muted: #bed0e7;
  --text-danger: #ffd0c7;
  --text-warning: #ffe2b3;
  --text-success: #c8f2dc;
  --text-info: #cfe6ff;
  --text-neutral: #ddd4ff;
  --button-primary-text: #08111c;
  --sea: #dce9fb;
  --sea-soft: rgba(var(--white-rgb), 0.18);
  --link: color-mix(in srgb, var(--text-on-dark) 84%, var(--color-accent) 16%);
  --link-visited: color-mix(in srgb, var(--text-on-dark) 62%, var(--color-neutral) 38%);
  --muted: #c8d8ec;
  --accent-deep: #bfeaed;
  --shadow-soft: 0 18px 38px rgba(2, 9, 18, 0.5);
  --shadow: 0 30px 70px rgba(2, 9, 18, 0.6);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(var(--color-accent-rgb), 0.22), transparent 24%),
    radial-gradient(circle at top right, rgba(var(--color-brand-rgb), 0.16), transparent 28%),
    linear-gradient(180deg, var(--gray-100) 0%, var(--gray-200) 55%, var(--gray-100) 100%);
  font-family: var(--font-family-sans);
}

:root[data-theme='noche'] body {
  background:
    radial-gradient(circle at top left, rgba(var(--color-accent-rgb), 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(var(--white-rgb), 0.05), transparent 34%),
    linear-gradient(180deg, #0f1a29 0%, #0b1522 48%, #08111c 100%);
}

img {
  max-width: 100%;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

button,
input,
select,
textarea,
a {
  font: inherit;
}

button,
.button-link {
  border: 0;
  border-radius: var(--radius-pill);
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

button:hover,
.button-link:hover {
  transform: translateY(-1px);
}

button:focus-visible,
.button-link:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.38);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

button {
  padding: var(--space-3) var(--space-5);
  background: var(--sea);
  color: var(--button-primary-text);
  cursor: pointer;
}

button.secondary {
  background: var(--card-strong);
  color: var(--sea);
  border: 1px solid rgba(var(--color-brand-rgb), 0.16);
}

button.mode-button {
  background: var(--surface-elevated);
  color: var(--muted);
  border: 1px solid transparent;
}

button.mode-button.active {
  background: var(--sea);
  color: var(--white);
}

button.tiny {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  margin-right: var(--space-1-5);
  margin-bottom: var(--space-1);
}

button.danger {
  background: var(--color-danger);
}

.button-block {
  width: 100%;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  cursor: pointer;
}

.button-link--primary {
  background: var(--sea);
  color: var(--button-primary-text);
  box-shadow: 0 16px 32px rgba(var(--color-brand-rgb), 0.18);
}

.button-link--ghost {
  background: rgba(var(--color-brand-rgb), 0.04);
  color: var(--sea);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
}

.button-link--small {
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--font-size-sm);
}

.notification-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.notification-count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input,
select,
textarea {
  width: 100%;
  padding: var(--space-3-5) var(--space-4);
  border-radius: var(--radius-sm-plus);
  border: 1px solid rgba(var(--color-brand-rgb), 0.14);
  background: rgba(var(--white-rgb), 0.84);
  color: var(--ink);
}

:root[data-theme='noche'] input,
:root[data-theme='noche'] select,
:root[data-theme='noche'] textarea {
  background: rgba(var(--color-brand-rgb), 0.62);
  border-color: rgba(var(--white-rgb), 0.24);
  color: var(--text-on-dark);
}

:root[data-theme='noche'] input::placeholder,
:root[data-theme='noche'] textarea::placeholder {
  color: var(--text-on-dark-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.24);
  border-color: rgba(var(--color-accent-rgb), 0.45);
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--sea);
}

code,
pre {
  font-family: var(--font-family-mono);
}

code {
  word-break: break-all;
}

pre {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  border: 1px solid rgba(var(--color-brand-rgb), 0.1);
  overflow-x: auto;
  font-size: var(--font-size-xs);
}

ul {
  margin: 0;
  padding-left: var(--space-5);
}

p,
dl,
dt,
dd,
h1,
h2,
h3 {
  margin-top: 0;
}

h1,
h2,
h3,
.brand-mark strong,
.price-card__price,
.hero-card__label {
  font-family: var(--font-family-serif);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: 0.95;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1.05;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1rem;
  margin: 1.3rem 0 0.7rem;
}

.hidden {
  display: none !important;
}

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

.stack {
  display: grid;
  gap: 1rem;
}

.stack--tight {
  gap: 0.25rem;
}

.stack--loose {
  gap: 1.25rem;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.cluster--tight {
  gap: 0.5rem;
}

.cluster--start {
  align-items: start;
}

.cluster--end {
  justify-content: flex-end;
}

.split {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.split--end {
  align-items: end;
}

.status {
  min-height: 1.2rem;
  color: var(--accent-deep);
}

.eyebrow,
.panel__eyebrow,
.info-card__label {
  margin-bottom: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-deep);
}

.site-header,
.landing-main,
.legal-main {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
}

.app-shell {
  width: calc(100% - 2rem);
  margin: 0 auto;
}

.site-header {
  padding: 1.2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark strong,
.brand-mark small {
  display: block;
}

.brand-mark small {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.14rem;
  font-variant-numeric: tabular-nums;
}

.brand-mark__logo {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 22px rgba(var(--color-brand-rgb), 0.18));
}

.site-nav,
.app-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.site-nav a,
.site-theme-toggle,
.app-menu a,
.app-menu__summary,
.menu-popover__trigger {
  color: var(--sea);
  text-decoration: none;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

.site-theme-toggle {
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.site-nav a:hover,
.site-theme-toggle:hover,
.app-menu a:hover,
.app-menu__summary:hover,
.menu-popover__trigger:hover,
.app-menu a.active,
.app-menu__summary.active,
.menu-popover__trigger.active,
.site-theme-toggle.active,
.notification-trigger.active {
  background: var(--surface-elevated);
  border-color: rgba(var(--color-brand-rgb), 0.12);
}

.app-menu__group {
  position: relative;
}

.app-menu__group--account {
  margin-left: auto;
}

.app-menu__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  list-style: none;
  background: transparent;
}

.app-menu__summary--icon-only {
  justify-content: center;
}

.notification-trigger--icon-only {
  justify-content: center;
}

.topbar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--card-strong);
  border: 1px solid rgba(var(--color-brand-rgb), 0.16);
  color: var(--sea);
}

.topbar-icon-button .app-menu__icon,
.topbar-icon-button > span[aria-hidden='true'] {
  font-size: 1rem;
  line-height: 1;
}

.topbar-tenant-select {
  min-width: 14rem;
  max-width: 20rem;
  height: 2.9rem;
  padding: 0 2.4rem 0 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--card-strong);
  border: 1px solid rgba(var(--color-brand-rgb), 0.16);
  color: var(--sea);
}

.app-menu__icon {
  font-size: 1rem;
  line-height: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-menu__summary::-webkit-details-marker {
  display: none;
}

.app-menu__summary::after {
  content: '▾';
  font-size: 0.72rem;
  color: var(--muted);
}

.menu-popover[open] .menu-popover__trigger {
  background: var(--surface-elevated);
  border-color: rgba(var(--color-brand-rgb), 0.12);
}

.menu-popover__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 20;
  min-width: 14rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: var(--radius-md-soft);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  background: var(--surface-glass);
  box-shadow: 0 18px 38px rgba(var(--color-brand-rgb), 0.12);
  backdrop-filter: blur(18px);
}

.app-menu__submenu--right {
  left: auto;
  right: 0;
}

.menu-popover__item {
  display: block;
  color: var(--sea);
  text-decoration: none;
  border-radius: var(--radius-sm-plus);
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
}

button.menu-popover__item {
  appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.menu-popover__item:hover,
.menu-popover__item.active {
  background: var(--surface-elevated);
  border-color: rgba(var(--color-brand-rgb), 0.12);
}

:root[data-theme='noche'] .menu-popover__panel {
  border-color: rgba(var(--white-rgb), 0.2);
}

:root[data-theme='noche'] .menu-popover__item {
  color: var(--text-on-dark);
}

:root[data-theme='noche'] .menu-popover__item:hover,
:root[data-theme='noche'] .menu-popover__item.active {
  background: rgba(var(--white-rgb), 0.12);
  border-color: rgba(var(--white-rgb), 0.22);
}

.menu-popover__divider {
  height: 1px;
  margin: 0.2rem 0.35rem;
  background: rgba(var(--color-brand-rgb), 0.14);
}

.theme-menu__panel {
  min-width: 16rem;
  gap: 0.35rem;
}

.landing-main {
  padding: 2.2rem 0 4rem;
}

.legal-main {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.2rem 0 2rem;
}

.hero-panel,
.pricing-panel,
.concept-panel,
.legal-panel,
.panel,
.hero-card,
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.85fr);
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
}

.legal-panel {
  padding: clamp(1.5rem, 3vw, 2.7rem);
  border-radius: var(--radius-xl);
}

.legal-panel h2 {
  margin-top: 2rem;
}

.legal-panel p,
.legal-panel li {
  color: var(--muted);
  line-height: 1.7;
}

.legal-meta {
  margin-bottom: 1.5rem;
  color: var(--accent-deep);
  font-weight: 700;
}

.legal-list {
  display: grid;
  gap: 0.7rem;
}

.site-footer {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}

.site-footer__brand {
  display: grid;
  gap: 0.2rem;
}

.site-footer__brand strong {
  color: var(--sea);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.site-footer__nav a {
  color: var(--sea);
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.hero-text,
.page-description,
.section-copy,
.panel__lede,
.price-card__summary,
.status-stack dd,
.panel p,
.hero-metrics dd,
.hero-benefits li {
  color: var(--muted);
  line-height: 1.6;
}

.hero-benefits {
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.hero-benefits li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md-plus);
  background: rgba(var(--white-rgb), 0.62);
  border: 1px solid rgba(var(--color-brand-rgb), 0.08);
}

.hero-benefits li::before {
  content: "•";
  color: var(--accent-deep);
  font-size: 1.4rem;
  line-height: 1;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.hero-metrics div,
.status-stack div {
  padding-top: 0.9rem;
  border-top: 1px solid rgba(var(--color-brand-rgb), 0.12);
}

.hero-metrics dt,
.status-stack dt {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.hero-actions {
  margin-top: 1.9rem;
}

.hero-card {
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  background:
    linear-gradient(
      180deg,
      rgba(var(--color-brand-rgb), 0.97) 0%,
      rgba(var(--color-brand-rgb), 0.86) 100%
    ),
    linear-gradient(135deg, rgba(var(--white-rgb), 0.12), transparent 55%);
  color: var(--text-on-dark);
}

.workflow-stack {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.9rem;
}

.workflow-stack li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md-plus);
  background: rgba(var(--white-rgb), 0.08);
}

.workflow-stack span {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-warning-rgb), 0.22);
  color: rgba(var(--white-rgb), 0.85);
  font-weight: 700;
}

.hero-card__label,
.hero-card__footer {
  color: rgba(var(--white-rgb), 0.82);
}

.hero-card--visual {
  display: grid;
  gap: 0.4rem;
}

.hero-image-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.hero-image-trigger:hover .hero-card__image,
.hero-image-trigger:focus-visible .hero-card__image {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(10, 35, 57, 0.24);
}

.hero-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md-plus);
  box-shadow: 0 16px 34px rgba(10, 35, 57, 0.2);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.hero-card--visual .hero-card__footer {
  margin-top: 0.15rem;
}

.image-lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(92vw, 84rem);
}

.image-lightbox::backdrop {
  background: rgba(9, 17, 28, 0.7);
  backdrop-filter: blur(6px);
}

.image-lightbox__surface {
  position: relative;
  margin: 0;
}

.image-lightbox__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 1;
}

.image-lightbox__image {
  display: block;
  width: min(92vw, 84rem);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 60px rgba(2, 9, 18, 0.35);
}

.concept-panel {
  margin-top: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

.concept-grid--landing {
  margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.concept-card {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border-radius: var(--radius-lg-soft);
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0.84) 0%, rgba(var(--white-rgb), 0.92) 100%),
    var(--card);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  box-shadow: 0 18px 40px rgba(var(--color-brand-rgb), 0.08);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.concept-card:hover {
  transform: translateY(-3px);
}

.concept-card strong {
  font-family: var(--font-family-serif);
  font-size: 1.25rem;
}

.concept-card__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}

.concept-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.concept-card--static:hover {
  transform: none;
}

.price-card,
.panel {
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.section-heading {
  max-width: 50rem;
}

.pricing-panel {
  margin-top: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.flow-panel,
.contact-panel {
  margin-top: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.flow-track {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: grid;
  gap: 0.8rem;
}

.flow-track li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-brand-rgb), 0.1);
  background: rgba(var(--white-rgb), 0.7);
}

.flow-track span {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}

.flow-track p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.flow-visual-grid {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.flow-visual {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--radius-md-soft);
  border: 1px solid var(--line);
  background:
    linear-gradient(
      160deg,
      var(--surface-glass) 0%,
      rgba(var(--white-rgb), 0.85) 65%,
      rgba(var(--white-rgb), 0.78) 100%
    ),
    var(--card);
  box-shadow: 0 16px 34px rgba(var(--color-brand-rgb), 0.12);
}

.flow-visual header {
  display: grid;
  gap: 0.2rem;
}

.flow-visual header span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}

.flow-visual header strong {
  color: var(--sea);
}

.flow-visual__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.flow-scene {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.flow-scene img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-brand-rgb), 0.1);
  background: var(--surface-elevated-strong);
}

.flow-scene figcaption {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.flow-visual__card {
  border: 1px solid rgba(var(--color-brand-rgb), 0.14);
  background: var(--surface-elevated-strong);
  border-radius: var(--radius-sm-plus);
  padding: 0.8rem;
}

.flow-visual__card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.flow-visual__card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.flow-visual__arrow {
  font-size: 1.4rem;
  color: var(--sea);
  font-weight: 700;
}

.flow-visual__stack {
  display: grid;
  gap: 0.8rem;
}

.prospect-form {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.9rem;
}

.prospect-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.prospect-form .cluster {
  align-items: center;
}

.contact-layout {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-card {
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  background:
    linear-gradient(160deg, rgba(var(--white-rgb), 0.88) 0%, rgba(var(--white-rgb), 0.96) 100%),
    var(--card);
  box-shadow: 0 18px 38px rgba(var(--color-brand-rgb), 0.08);
}

.section-heading--compact {
  max-width: none;
}

.section-heading--compact h3 {
  margin-bottom: 0.55rem;
}

.trial-signup__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.trial-signup__bullets span {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  background: rgba(var(--white-rgb), 0.72);
  color: var(--sea);
  font-size: 0.88rem;
  font-weight: 600;
}

.status--error {
  color: var(--text-danger);
}

.price-card__name {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
}

.price-card__price {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0.5rem 0;
}

.price-card__price span {
  font-size: 1rem;
  color: var(--muted);
}

.price-card ul {
  margin: 1rem 0 1.4rem;
  display: grid;
  gap: 0.5rem;
}

.price-card--featured {
  background: linear-gradient(
    180deg,
    rgba(var(--color-brand-rgb), 0.97) 0%,
    rgba(var(--color-brand-rgb), 0.88) 100%
  );
  color: var(--text-on-dark);
  transform: translateY(-0.35rem);
}

.price-card--featured .price-card__name,
.price-card--featured .price-card__summary,
.price-card--featured li,
.price-card--featured .price-card__price span {
  color: var(--text-on-dark-muted);
}

.price-card--featured .button-link--primary {
  background: linear-gradient(180deg, rgba(var(--white-rgb), 0.98) 0%, rgba(var(--white-rgb), 0.9) 100%);
  color: var(--color-brand);
  border: 1px solid rgba(var(--white-rgb), 0.42);
  box-shadow:
    0 16px 32px rgba(var(--black-rgb), 0.16),
    inset 0 1px 0 rgba(var(--white-rgb), 0.4);
}

.price-card--featured .button-link--primary:hover {
  background: var(--white);
  color: var(--color-brand);
}

.hero-panel--operations {
  gap: 1.8rem;
}

.hero-benefits--tight li {
  background: rgba(var(--white-rgb), 0.72);
}

.hero-metrics--proof div {
  background: rgba(var(--white-rgb), 0.34);
  padding: 1rem 0 0;
}

.concept-grid--buyers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.concept-card--segment {
  min-height: 100%;
}

.comparison-panel,
.proof-panel {
  margin-top: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.comparison-grid,
.proof-grid {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-card {
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0.88) 0%, rgba(var(--white-rgb), 0.96) 100%),
    var(--card);
  box-shadow: 0 18px 38px rgba(var(--color-brand-rgb), 0.08);
}

.comparison-card--before {
  border-color: rgba(var(--color-danger-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0.94) 0%, rgba(var(--white-rgb), 0.98) 100%),
    var(--card);
}

.comparison-card--after {
  border-color: rgba(var(--color-success-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0.78) 0%, rgba(var(--white-rgb), 0.9) 100%),
    linear-gradient(
      135deg,
      rgba(var(--color-success-rgb), 0.08),
      rgba(var(--color-brand-rgb), 0.05)
    );
}

.comparison-card__kicker {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}

.comparison-card h3 {
  margin: 0 0 0.75rem;
}

.comparison-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
}

.cta-band {
  margin-top: 1.3rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--color-brand-rgb), 0.12);
  background:
    linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.08), rgba(var(--white-rgb), 0.78)),
    var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cta-band p,
.cta-band strong {
  margin: 0;
}

:root[data-theme="noche"] .landing-shell {
  color: var(--text-on-dark);
}

:root[data-theme="noche"] .landing-shell .hero-panel,
:root[data-theme="noche"] .landing-shell .pricing-panel,
:root[data-theme="noche"] .landing-shell .concept-panel,
:root[data-theme="noche"] .landing-shell .comparison-panel,
:root[data-theme="noche"] .landing-shell .proof-panel,
:root[data-theme="noche"] .landing-shell .flow-panel,
:root[data-theme="noche"] .landing-shell .contact-panel,
:root[data-theme="noche"] .landing-shell .hero-card,
:root[data-theme="noche"] .landing-shell .price-card {
  color: var(--text-on-dark);
}

:root[data-theme="noche"] .landing-shell .hero-text,
:root[data-theme="noche"] .landing-shell .page-description,
:root[data-theme="noche"] .landing-shell .section-copy,
:root[data-theme="noche"] .landing-shell .panel__lede,
:root[data-theme="noche"] .landing-shell .price-card__summary,
:root[data-theme="noche"] .landing-shell .status-stack dd,
:root[data-theme="noche"] .landing-shell .panel p,
:root[data-theme="noche"] .landing-shell .hero-metrics dd,
:root[data-theme="noche"] .landing-shell .hero-benefits li,
:root[data-theme="noche"] .landing-shell .legal-panel p,
:root[data-theme="noche"] .landing-shell .legal-panel li,
:root[data-theme="noche"] .landing-shell .site-footer,
:root[data-theme="noche"] .landing-shell .concept-card p,
:root[data-theme="noche"] .landing-shell .flow-track p,
:root[data-theme="noche"] .landing-shell .flow-scene figcaption,
:root[data-theme="noche"] .landing-shell .flow-visual__card p,
:root[data-theme="noche"] .landing-shell .comparison-card ul,
:root[data-theme="noche"] .landing-shell .cta-band p,
:root[data-theme="noche"] .landing-shell .price-card__price span {
  color: var(--text-on-dark-muted);
}

:root[data-theme="noche"] .landing-shell .concept-card,
:root[data-theme="noche"] .landing-shell .flow-visual,
:root[data-theme="noche"] .landing-shell .comparison-card,
:root[data-theme="noche"] .landing-shell .comparison-card--before,
:root[data-theme="noche"] .landing-shell .comparison-card--after,
:root[data-theme="noche"] .landing-shell .cta-band,
:root[data-theme="noche"] .landing-shell .contact-card,
:root[data-theme="noche"] .landing-shell .hero-benefits li,
:root[data-theme="noche"] .landing-shell .workflow-stack li,
:root[data-theme="noche"] .landing-shell .flow-track li,
:root[data-theme="noche"] .landing-shell .hero-card__image,
:root[data-theme="noche"] .landing-shell .flow-visual__card {
  border-color: rgba(var(--white-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(var(--white-rgb), 0.06) 0%, rgba(var(--white-rgb), 0.03) 100%),
    var(--surface-elevated-strong);
  box-shadow: 0 18px 40px rgba(2, 9, 18, 0.32);
}

:root[data-theme="noche"] .landing-shell .site-footer__nav a,
:root[data-theme="noche"] .landing-shell .site-footer__brand strong,
:root[data-theme="noche"] .landing-shell .flow-visual header strong {
  color: var(--text-on-dark);
}

:root[data-theme="noche"] .landing-shell .contact-card .section-heading,
:root[data-theme="noche"] .landing-shell .contact-card h3,
:root[data-theme="noche"] .landing-shell .contact-card label span,
:root[data-theme="noche"] .landing-shell .contact-card .status {
  color: var(--text-on-dark);
}

:root[data-theme="noche"] .landing-shell .trial-signup__bullets span {
  border-color: rgba(var(--white-rgb), 0.14);
  background: rgba(var(--white-rgb), 0.08);
  color: var(--text-on-dark);
}

@media (max-width: 1100px) {
  .hero-panel,
  .concept-grid,
  .flow-visual-grid,
  .contact-layout,
  .comparison-grid,
  .proof-grid,
  .pricing-grid,
  .prospect-form__grid,
  .dashboard-grid,
  .metric-grid,
  .snapshot-grid,
  .review-shell,
  .review-summary-grid,
  .review-workspace-grid,
  .review-field-grid,
  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .intake-link-preview {
    grid-template-columns: 1fr;
  }

  .review-preview--pdf,
  .review-preview--image,
  .review-preview-shell {
    height: min(60vh, 30rem);
    min-height: 20rem;
  }

  .review-panel--preview {
    position: static;
    top: auto;
  }

  .flow-visual__content {
    grid-template-columns: 1fr;
  }

  .flow-visual__arrow {
    display: none;
  }

  .cta-band {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 1600px) {
  .review-workspace-grid {
    grid-template-columns: minmax(0, 1fr) minmax(25rem, 1fr);
  }

  .review-preview-shell,
  .review-preview--pdf,
  .review-preview--image {
    height: clamp(26rem, calc(100vh - 16rem), 56rem);
    min-height: 26rem;
  }
}

@media (max-width: 760px) {
  .upload-shell {
    padding: 1rem 0.8rem 1.5rem;
  }

  .upload-brand {
    margin-bottom: 0.8rem;
  }

  .upload-hero {
    margin-bottom: 0.6rem;
  }

  #upload-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .upload-status-inline {
    margin: 0.2rem 0 0.18rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .site-header,
  .page-header {
    align-items: start;
    flex-direction: column;
  }

  .app-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.65rem;
  }

  .landing-main {
    padding-top: 1.4rem;
  }

  .hero-panel,
  .flow-panel,
  .contact-panel,
  .pricing-panel,
  .legal-panel,
  .panel,
  .price-card {
    border-radius: var(--radius-lg-soft);
  }

  .site-header,
  .landing-main,
  .legal-main,
  .app-shell {
    width: min(var(--max-width), calc(100% - 1rem));
  }

  .page-header__links,
  .auth-mode,
  .site-nav {
    width: 100%;
  }

  .topbar-tenant-select {
    width: 100%;
    max-width: none;
  }

  .site-footer {
    width: min(var(--max-width), calc(100% - 1rem));
    flex-direction: column;
    align-items: start;
  }

  .app-topbar .brand-mark {
    width: 100%;
  }

  .app-menu {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    gap: 0.45rem;
    padding-bottom: 0.25rem;
  }

  .app-menu__group {
    width: auto;
    flex: 0 0 auto;
  }

  .app-menu .menu-popover[open] {
    z-index: 220;
  }

  .app-menu__group--account {
    margin-left: 0;
  }

  .app-menu a,
  .app-menu__summary,
  .site-nav a,
  .button-link,
  button {
    justify-content: center;
  }

  .app-menu a,
  .app-menu__summary {
    width: auto;
    justify-content: flex-start;
    white-space: nowrap;
    padding: 0.52rem 0.78rem;
  }

  .site-nav > * {
    display: none;
  }

  .site-nav > a[data-console-link] {
    display: inline-flex;
    margin-left: auto;
  }

  .page-header__links {
    justify-content: flex-end;
  }

  .menu-popover__panel {
    position: absolute;
    left: 0;
    right: auto;
    z-index: 230;
    min-width: min(16rem, calc(100vw - 1rem));
    max-width: min(22rem, calc(100vw - 1rem));
    margin-top: 0.4rem;
  }

  .app-menu__submenu--right {
    left: auto;
    right: 0;
  }

  .documents-filters,
  .documents-toolbar,
  .documents-toolbar__actions,
  .documents-pagination,
  .documents-pagination__actions,
  .review-header-actions,
  .review-preview-toolbar,
  .review-preview-toolbar__group,
  .upload-shell {
    width: 100%;
  }

  .documents-filters {
    grid-template-columns: 1fr;
  }

  .summary-platform-toolbar,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .review-header-actions {
    position: static;
    backdrop-filter: none;
  }

  .documents-table--sticky {
    min-width: 0;
  }

  .documents-table--sticky thead {
    display: none;
  }

  .documents-table--sticky tbody {
    display: grid;
    gap: 0.75rem;
  }

  .documents-session-row,
  .documents-session-row td {
    display: block;
  }

  .documents-session-row td {
    border-bottom: 0;
    padding: 0.6rem 0.55rem;
  }

  .documents-session-child-row {
    display: grid;
    gap: 0.5rem;
    border: 1px solid rgba(var(--color-brand-rgb), 0.12);
    border-radius: var(--radius-md);
    background: rgba(var(--white-rgb), 0.92);
    padding: 0.6rem;
  }

  .documents-session-child-row td {
    display: grid;
    gap: 0.3rem;
    padding: 0;
    border-bottom: 0;
  }

  .documents-session-child-row td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .documents-session-child-row td:first-child::before {
    content: '';
    display: none;
  }

  .documents-session-child-row td:first-child,
  .documents-session-child-row td:last-child {
    position: static;
    background: transparent;
  }

  .documents-session-child-row .documents-actions-inline {
    gap: 0.4rem;
  }

  .documents-action-menu {
    width: 100%;
  }

  .documents-action-menu__trigger {
    width: 100%;
    justify-content: center;
  }

  .documents-action-menu__panel {
    position: static;
    min-width: 0;
    margin-top: 0.35rem;
  }

  .auth-grid--two {
    grid-template-columns: 1fr;
  }

  .review-section__header--spread,
  .review-field__header,
  .review-history-list li {
    flex-direction: column;
  }

  th,
  td {
    font-size: 0.82rem;
  }
}