/* 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 — top banner slider
   Deliberately true full-bleed: NOT wrapped in `.container`, unlike
   every other section on the site (including the Login/Register/
   Download uploaded banners, which stay inside their normal container —
   this is a one-off exception for the Homepage slider only). It's a
   direct child of <main> with no width constraint, so it naturally
   spans the viewport without a 100vw hack. No card framing (no
   radius/border/shadow) — it should read as a banner strip, not a
   panel sitting on the page. All 5 supplied banners share one exact
   aspect ratio (1979x795), so `aspect-ratio` + object-fit: cover never
   actually crops anything — it only ever scales.
   ------------------------------------------------------------------ */

.hero-slider {
  padding-top: 0;
}

.hero-slider__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-slider__track {
  display: flex;
  transition: transform 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track {
    transition: none;
  }
}

.hero-slider__slide {
  flex: 0 0 100%;
  aspect-ratio: 1979 / 795;
}

.hero-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 19, 25, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
  background: var(--gradient-brand);
  color: #1a1204;
  box-shadow: 0 0 16px rgba(254, 119, 53, 0.6);
}

.hero-slider__arrow--prev { left: var(--space-3); }
.hero-slider__arrow--next { right: var(--space-3); }

@media (min-width: 640px) {
  .hero-slider__arrow--prev { left: var(--space-4); }
  .hero-slider__arrow--next { right: var(--space-4); }
}

.hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.hero-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hero-slider__dot.is-active {
  background: var(--gradient-brand);
  box-shadow: 0 0 10px rgba(254, 119, 53, 0.8);
  transform: scale(1.15);
}

/* ---------------------------------------------------------------------
   Homepage — dark premium hero (text only, sits under the slider)
   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__inner {
  padding-block: var(--space-section-y-sm);
  /* Deliberately no extra max-width here — this must line up with the
     slider and header above it, which both size against the plain
     `.container` (see the width-alignment fix that added this comment).
     Individual text elements (`.home-hero__lead`) keep their own
     readable measure instead of constraining the whole block. */
}

.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);
  /* No max-width: this must reach the exact same right edge as the H1
     and the CTA row above/below it, which both use the full
     header-aligned container width. A narrower cap here (even 1100px)
     visibly wraps shorter than the H1 on wide screens and reads as
     misaligned, even though the left edge already matches exactly. */
}

.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__external-note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
}

.home-hero__external-note a {
  color: var(--color-primary-light);
  font-weight: 700;
  text-decoration: none;
}

.home-hero__external-note a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   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--dots {
  width: 20px;
  height: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.icon-motif--dots i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
}

.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);
}

/* Featured Game Providers — 3-tab switcher (Slots / Live Casino / Sports).
   Ships with all three panels visible and stacked in raw HTML (same
   progressive-enhancement approach as the mobile nav: usable with JS
   disabled), then main.js hides the inactive two panels and wires the
   click/keyboard behavior once it confirms the toggle works. */

.provider-tabs__list {
  display: flex;
  /* One scrollable row on mobile/tablet — all 4 tabs stay reachable by
     swipe instead of wrapping to a second, uneven row. Wraps normally
     from 640px up, where all 4 comfortably fit without scrolling. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--space-3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  padding-bottom: 2px;
}

.provider-tabs__list::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .provider-tabs__list {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.provider-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  border: 2px solid transparent;
  flex-shrink: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)) padding-box,
    rgba(255, 255, 255, 0.25) border-box;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.provider-tabs__tab:hover {
  background:
    linear-gradient(rgba(254, 119, 53, 0.16), rgba(254, 119, 53, 0.16)) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-primary-light);
}

.provider-tabs__tab.is-active {
  background: var(--gradient-brand) border-box;
  color: #1a1204;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(254, 119, 53, 0.2), 0 8px 24px rgba(254, 119, 53, 0.45);
}

.provider-tabs__tab.is-active:hover {
  color: #1a1204;
}

.provider-tabs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.provider-tabs__tab .icon-motif--slots i { background: var(--color-primary-light); }
.provider-tabs__tab .icon-motif--live { background: radial-gradient(circle, transparent 38%, var(--color-primary-light) 39% 54%, transparent 55%); }
.provider-tabs__tab .icon-motif--sports { background: conic-gradient(var(--color-primary-light) 0 50%, rgba(255, 255, 255, 0.35) 0 100%); }
.provider-tabs__tab .icon-motif--dots i { background: var(--color-primary-light); }

.provider-tabs__tab.is-active .icon-motif--slots i { background: #1a1204; }
.provider-tabs__tab.is-active .icon-motif--live { background: radial-gradient(circle, transparent 38%, #1a1204 39% 54%, transparent 55%); }
.provider-tabs__tab.is-active .icon-motif--sports { background: conic-gradient(#1a1204 0 50%, rgba(26, 18, 4, 0.45) 0 100%); }
.provider-tabs__tab.is-active .icon-motif--dots i { background: #1a1204; }

.provider-tabs__panel + .provider-tabs__panel {
  margin-top: var(--space-6);
}

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

/* JS-enhanced state only: main.js adds this once tabs are wired, so a
   no-JS visitor always sees every panel's heading and grid. */
.provider-tabs.is-enhanced .provider-tabs__panel-heading {
  display: none;
}

.provider-tabs__grid {
  display: grid;
  /* 3 per row even on the smallest phones — tighter gap than the rest
     of the grid so 3 columns stay comfortable at ~360-390px. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .provider-tabs__grid {
    gap: var(--space-4);
  }
}

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

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

.provider-tile {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.provider-tile:hover,
.provider-tile:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(254, 119, 53, 0.3);
  transform: translateY(-2px);
}

.provider-tile__image {
  display: block;
  aspect-ratio: 310 / 400;
}

.provider-tile__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-tile__name {
  display: block;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 600;
}

@media (min-width: 480px) {
  .provider-tile__name {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
}

/* ---------------------------------------------------------------------
   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 carousel
   Card width is driven by --cards-visible so the layout always shows a
   deliberate partial next card (1.5 mobile / 2.5 tablet / 3.5 desktop)
   rather than a clean full row — the "peek" is what signals there's
   more to scroll.
   ------------------------------------------------------------------ */

.promotions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-block-gap);
}

.promotions-head__cta {
  flex-shrink: 0;
}

.promo-carousel {
  position: relative;
}

.promo-carousel__track {
  --gap: var(--space-4);
  --cards-visible: 1.5;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
  cursor: grab;
}

.promo-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.promo-carousel__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .promo-carousel__track {
    --cards-visible: 2.5;
  }
}

@media (min-width: 1024px) {
  .promo-carousel__track {
    --cards-visible: 3.5;
  }
}

.promo-card {
  flex: 0 0 calc((100% - (var(--cards-visible) - 1) * var(--gap)) / var(--cards-visible));
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.promo-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 28px rgba(254, 119, 53, 0.25);
  transform: translateY(-2px);
}

.promo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1080 / 343;
  pointer-events: none;
}

.promo-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  color: #1a1204;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(254, 119, 53, 0.4);
  transition: box-shadow var(--transition-fast), filter var(--transition-fast);
}

.promo-carousel__arrow:hover,
.promo-carousel__arrow:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(254, 119, 53, 0.55);
}

.promo-carousel__arrow--prev {
  left: calc(-1 * var(--space-3));
}

.promo-carousel__arrow--next {
  right: calc(-1 * var(--space-3));
}

@media (max-width: 639px) {
  .promo-carousel__arrow {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   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);
}