/* Page-specific overrides only. Keep this file small — anything reused
   across more than one page belongs in components.css instead. */

.error-page {
  text-align: center;
  padding-block: var(--space-8);
}

.error-page__code {
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------
   Homepage — dark premium hero
   Deliberately not reusing the shared `.hero` class (components.css),
   since that's also used by 404.njk with a light tint background. This
   is a homepage-only dark variant.
   ------------------------------------------------------------------ */

.home-hero {
  background: var(--color-dark);
  color: #fff;
}

.home-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-section-y);
}

@media (min-width: 900px) {
  .home-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  border: 1px solid transparent;
  /* Gradient border via layered backgrounds: the padding-box layer is
     the pill's translucent fill, the border-box layer beneath it is the
     brand gradient showing only through the 1px border ring. Paired
     with a soft, low-opacity glow — restrained, not neon. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 0 18px rgba(254, 119, 53, 0.25);
}

.home-hero h1 {
  color: #fff;
}

.home-hero__lead {
  color: rgba(255, 255, 255, 0.78);
}

.home-hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.home-hero .btn--secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

.home-hero__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.home-hero__panel-head {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-4);
}

.home-hero__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.home-hero__tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.home-hero__tile-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Shared decorative icon motifs — abstract, brand-colored, no imagery.
   Used in the hero tiles and the Explore Games cards.
   ------------------------------------------------------------------ */

.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-tint);
  flex-shrink: 0;
}

.icon-box--dark {
  background: rgba(255, 255, 255, 0.07);
}

.icon-box--lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.icon-motif--slots {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
}

.icon-motif--slots i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--color-primary);
}

.icon-motif--slots i:nth-child(1) { height: 55%; }
.icon-motif--slots i:nth-child(2) { height: 100%; }
.icon-motif--slots i:nth-child(3) { height: 40%; }

.icon-motif--live {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 38%, var(--color-primary) 39% 54%, transparent 55%);
}

.icon-motif--sports {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) 0 50%, var(--color-primary-soft) 0 100%);
}

.icon-motif--lg.icon-motif--slots { height: 28px; gap: 4px; }
.icon-motif--lg.icon-motif--slots i { width: 6px; }
.icon-motif--lg.icon-motif--live,
.icon-motif--lg.icon-motif--sports { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------
   Homepage — "M2 Casino at a Glance" quick-navigation grid
   ------------------------------------------------------------------ */

/* Explicit breakpoint columns (not auto-fill/auto-fit) so the 6 cards
   always land in a full, even row — 6, 3 or 2 all divide evenly, so
   there's never an orphaned card alone on its own row. */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .glance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .glance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .glance-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.glance-card {
  border-top: 3px solid var(--color-primary);
}

.glance-card h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------------
   Homepage — "Explore M2 Casino Games" flagship cards
   ------------------------------------------------------------------ */

/* Fixed equal-width columns for the 3 flagship game-category cards, so
   they expand to fill the section width instead of clustering at a
   narrow fixed size on the left (see .card-grid's auto-fit comment for
   the general-purpose version this deliberately doesn't use — with only
   3 items, a plain minmax(220px,1fr) auto-fit column count can still
   land on an odd in-between number of tracks at some widths). */
.card-grid--3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The Login/Register pair: same full container width as every other
   card row on the page, so it lines up with the section heading and the
   header bar above it rather than stopping short. */
.card-grid--2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.game-card {
  border: none;
  border-top: 4px solid transparent;
  border-image: var(--gradient-brand) 1;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.game-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.game-card__head h3 {
  margin: 0;
}

.game-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-primary-deep);
}

/* ---------------------------------------------------------------------
   Homepage — dark "Featured Game Providers" band
   ------------------------------------------------------------------ */

.provider-band {
  background: var(--color-dark);
  color: #fff;
  padding-block: var(--space-section-y);
}

.provider-band h2 {
  color: #fff;
}

.provider-band > .container > p {
  color: rgba(255, 255, 255, 0.72);
}

.provider-band__groups {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

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

.provider-band__group h3 {
  color: #fff;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
}

.provider-chip-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.provider-chip {
  display: inline-flex;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.provider-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}

/* ---------------------------------------------------------------------
   Homepage — platform-structure journey row
   ------------------------------------------------------------------ */

.journey-row {
  list-style: none;
  /* Spacing above comes from `.mb-block` on the intro copy that precedes
     it (see index.njk), not a margin here — one source of truth for the
     heading/intro-to-content gap instead of two competing values. */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  position: relative;
}

@media (min-width: 768px) {
  .journey-row::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
  }
}

.journey-step {
  flex: 1 1 130px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.journey-step__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #1a1204;
  font-weight: 700;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.journey-step__label {
  font-weight: 700;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.journey-step__caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Homepage — promotions banner
   ------------------------------------------------------------------ */

.promo-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: linear-gradient(135deg, rgba(20, 19, 25, 0.18), rgba(20, 19, 25, 0.04)), var(--gradient-brand);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.promo-banner h2 {
  color: #fff;
  margin-bottom: var(--space-2);
}

.promo-banner p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 56ch;
  margin: 0;
}

.promo-banner .btn--primary {
  background: #fff;
  color: var(--color-primary-deep);
  flex-shrink: 0;
}

.promo-banner .btn--primary:hover {
  background: #fff;
  filter: brightness(0.95);
  color: var(--color-primary-deep);
}

/* ---------------------------------------------------------------------
   Homepage — "Funding, Withdrawals and Identity Checks" cards
   ------------------------------------------------------------------ */

.funding-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 3px solid var(--color-primary);
}

.funding-card h3 {
  margin: 0;
}

.funding-card p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Two more abstract CSS-drawn icon motifs, same visual language as the
   slots/live/sports icons above — a chevron for the up/down of a
   deposit vs. a withdrawal, and a checkmark for an identity check. No
   icon font or image asset. */
.icon-chevron {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-chevron::before,
.icon-chevron::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

.icon-chevron--up::before {
  left: 1px;
  top: 58%;
  transform: rotate(38deg);
}

.icon-chevron--up::after {
  right: 1px;
  top: 58%;
  transform: rotate(-38deg);
}

.icon-chevron--down::before {
  left: 1px;
  top: 42%;
  transform: rotate(-38deg);
}

.icon-chevron--down::after {
  right: 1px;
  top: 42%;
  transform: rotate(38deg);
}

.icon-check {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-check::before,
.icon-check::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: var(--color-primary);
}

.icon-check::before {
  width: 7px;
  height: 2px;
  left: 3px;
  top: 11px;
  transform: rotate(45deg);
}

.icon-check::after {
  width: 12px;
  height: 2px;
  left: 7px;
  top: 9px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Homepage — light section tint + dark panel, for the three sections
   that otherwise read as plain text on white ("How to Check an M2
   Website", "About M2Casinos.com", "Responsible Gaming"). Deliberately
   varied (tint / dark panel / muted notice) rather than repeating the
   same treatment three times in a row.
   ------------------------------------------------------------------ */

.section--tint {
  background: var(--color-primary-tint);
}

.about-panel {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.about-panel h2 {
  color: #fff;
}

.about-panel a {
  color: var(--color-primary-light);
}

.about-panel a:hover {
  color: var(--color-primary-soft);
}

/* ---------------------------------------------------------------------
   Login page
   ------------------------------------------------------------------ */

/* Icon-led checklist rows — used for the pre-login checklist and the
   login-security checklist. Generic enough to reuse elsewhere later. */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checklist__item > span:last-child {
  padding-top: 2px;
}

/* A fourth abstract icon motif — a small 2x2 dot grid, standing in for
   "a form field" on the login-fields cards. Same visual language as the
   slots/live/sports/chevron/check motifs already on the Homepage. */
.icon-dots {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  grid-template-rows: repeat(2, 6px);
  gap: 4px;
  width: 20px;
  height: 20px;
  align-content: center;
  justify-content: center;
}

.icon-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Dark, two-column Login hero — mirrors the Homepage's dark hero
   treatment (same tokens, same premium-panel language) so the page
   feels connected without reusing the Homepage's own class names. */
.login-hero {
  background: var(--color-dark);
  color: #fff;
}

.login-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-section-y);
}

@media (min-width: 900px) {
  .login-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.login-hero h1 {
  color: #fff;
}

.login-hero__lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}

.login-hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.login-hero .btn--secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

/* Uploaded banner, framed as an elevated premium panel: soft orange
   outer glow, a subtle 1px brand-colored border, and rounded corners
   that clip the image itself (via overflow: hidden) rather than
   cropping its content. */
.login-hero__banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(254, 119, 53, 0.4);
  box-shadow:
    0 0 0 1px rgba(254, 119, 53, 0.1),
    0 0 48px rgba(254, 119, 53, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

.login-hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tighten the shared breadcrumb bar specifically when it precedes this
   page's dark hero, so it doesn't read as an empty pale band wedged
   between a white header and a dark section. Scoped to this page only
   — the shared breadcrumbs component/markup is untouched. */
body:has(.login-hero) .breadcrumbs {
  padding-block: var(--space-2);
}

/* Compact checklist cards (icon + text, side by side) for a grid rather
   than a long vertical list — "Before You Sign In". */
.checklist-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checklist-card p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Light orange-tinted recovery panel, distinct from both the plain
   `.notice` card and the dark `.about-panel`. */
.recovery-panel {
  background: var(--color-primary-tint);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.recovery-panel h2 {
  margin-top: 0;
}

/* Larger icon-box variant used as a section anchor (e.g. above the
   security panel's heading) rather than inline with a line of text. */
.icon-box--xl {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: var(--space-4);
}

.icon-box--xl .icon-check::before {
  width: 16px;
}

.icon-box--xl .icon-check::after {
  width: 26px;
}

/* Small uppercase category tag on a troubleshooting card, so 7 issues
   read as a few grouped categories (credentials, account, browser,
   verification, destination) rather than one flat list. */
.card-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-1);
}

/* Neutral (non-orange) top accent for the "site/browser issue" card, so
   it reads as deliberately different from the account-level card next
   to it rather than an inconsistent copy of it. */
.card--accent-muted {
  border-top: 3px solid var(--color-text-muted);
}

/* Small CSS-drawn phone/browser motifs for the Mobile/Desktop cards —
   same abstract icon language as the rest of the site, no imagery. */
.icon-phone {
  position: relative;
  width: 13px;
  height: 20px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
}

.icon-phone::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

.icon-browser {
  position: relative;
  width: 22px;
  height: 16px;
  border: 2px solid var(--color-primary);
  border-radius: 3px;
  overflow: hidden;
}

.icon-browser::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Register page
   ------------------------------------------------------------------ */

.register-hero {
  background: var(--color-dark);
  color: #fff;
}

.register-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-section-y);
}

@media (min-width: 900px) {
  .register-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.register-hero h1 {
  color: #fff;
}

.register-hero__lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}

.register-hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.register-hero .btn--secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

/* Tighten the shared breadcrumb bar on this page too (see the identical
   Login-page rule) — same reasoning, scoped separately since each page
   has its own hero class. */
body:has(.register-hero) .breadcrumbs {
  padding-block: var(--space-2);
}

/* Uploaded Register banner, framed identically to .login-hero__banner:
   soft orange outer glow, a subtle 1px brand-colored border, rounded
   corners that clip the image via overflow: hidden. */
.register-hero__banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(254, 119, 53, 0.4);
  box-shadow:
    0 0 0 1px rgba(254, 119, 53, 0.1),
    0 0 48px rgba(254, 119, 53, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

.register-hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* An "X" motif — same 20x20 sizing convention as .icon-check — for the
   "Avoid" side of the data-consistency comparison. */
.icon-x {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-x::before,
.icon-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-muted);
}

.icon-x::before {
  transform: translateY(-50%) rotate(45deg);
}

.icon-x::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* Neutral icon-box fill for the "Avoid" list, so it reads as
   deliberately different from the orange "Good practice" checklist
   next to it. */
.icon-box--muted {
  background: var(--color-border);
}

/* ---------------------------------------------------------------------
   Download page
   ------------------------------------------------------------------ */

.download-hero {
  background: var(--color-dark);
  color: #fff;
}

.download-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-section-y);
}

@media (min-width: 900px) {
  .download-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.download-hero h1 {
  color: #fff;
}

.download-hero__lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
}

.download-hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.download-hero .btn--secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
}

body:has(.download-hero) .breadcrumbs {
  padding-block: var(--space-2);
}

/* Uploaded Download banner, framed identically to .login-hero__banner
   and .register-hero__banner. */
.download-hero__banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(254, 119, 53, 0.4);
  box-shadow:
    0 0 0 1px rgba(254, 119, 53, 0.1),
    0 0 48px rgba(254, 119, 53, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

.download-hero__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* A small download-arrow-into-a-tray motif, same abstract sizing
   convention as the other icon motifs (roughly a 16-20px box). */
.icon-download {
  position: relative;
  width: 16px;
  height: 18px;
}

.icon-download::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--color-primary);
}

.icon-download::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

/* A term/description row list — a "form map" reading more like a
   compact data table than an icon-card grid, so the Register page's
   field overview doesn't look like a re-skin of the icon-card grids
   used for the same purpose on Login and Download. */
.field-map {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.field-map__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.field-map__row:last-child {
  border-bottom: none;
}

.field-map__term {
  flex: 0 0 220px;
  font-weight: 700;
}

.field-map__desc {
  flex: 1 1 320px;
  margin: 0;
  color: var(--color-text-muted);
}