/* ==========================================================================
   REVOZA GAMES - shared design system (games.css)
   Owner: design-system agent. Reference: /kit  (kit.html)
   Other pages: use only the classes documented in /kit. Need something new?
   Add a page-scoped <style> with your own prefix. Do not edit this file.
   All classes are prefixed "rg-". States use "is-" classes or ARIA attributes.
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: 'GSans';
  src: url('/assets/font/gsans-lat.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'GSans';
  src: url('/assets/font/gsans-he.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F, U+20AA;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* grounds */
  --rg-bg: #070B1C;
  --rg-bg-2: #0A1128;
  --rg-surface: #0F1733;
  --rg-surface-2: #151F42;
  --rg-line: rgba(255, 255, 255, .10);
  --rg-line-strong: rgba(255, 255, 255, .22);

  /* type colours (all AA or better on --rg-bg and --rg-surface) */
  --rg-text: #FFFFFF;
  --rg-text-2: #C3CCE3;
  --rg-text-3: #93A0C2;

  /* the one accent: primary action only */
  --rg-orange: #F2761B;
  --rg-orange-bright: #FF8A2B;
  --rg-on-orange: #0A0E22;

  /* information and status (never used for emphasis) */
  --rg-info: #7AA2FF;
  --rg-ok: #5FD39A;
  --rg-warn: #F5C451;
  --rg-err: #FF8585;

  /* type scale */
  --rg-font: 'GSans', 'Heebo', 'Assistant', 'Segoe UI', Arial, sans-serif;
  --rg-fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  --rg-fs-h1: clamp(2rem, 1.45rem + 2.6vw, 3.25rem);
  --rg-fs-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.375rem);
  --rg-fs-h3: 1.25rem;
  --rg-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --rg-fs-body: 1rem;
  --rg-fs-sm: .875rem;
  --rg-fs-xs: .8125rem;

  /* spacing (4px base) */
  --rg-1: .25rem;
  --rg-2: .5rem;
  --rg-3: .75rem;
  --rg-4: 1rem;
  --rg-5: 1.5rem;
  --rg-6: 2rem;
  --rg-7: 3rem;
  --rg-8: 4rem;
  --rg-9: 6rem;
  --rg-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --rg-gutter: clamp(1.25rem, .5rem + 3vw, 2.5rem);
  --rg-max: 73rem;

  /* radii */
  --rg-r-sm: 8px;
  --rg-r: 14px;
  --rg-r-lg: 22px;
  --rg-r-pill: 999px;

  /* shadows: for things that really float (phone menu), not for flat cards */
  --rg-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --rg-glow: 0 10px 34px rgba(242, 118, 27, .28);

  /* motion */
  --rg-ease-out: cubic-bezier(.25, 1, .5, 1);
  --rg-ease-in: cubic-bezier(.5, 0, .75, 0);
  --rg-fast: 120ms;
  --rg-med: 200ms;
  --rg-slow: 280ms;

  --rg-header-h: 4.5rem;
  color-scheme: dark;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--rg-header-h) + 1rem);
  background: var(--rg-bg);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--rg-bg);
  color: var(--rg-text);
  font-family: var(--rg-font);
  font-size: var(--rg-fs-body);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; display: block; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--rg-orange); color: var(--rg-on-orange); }

/* One focus ring for everything reachable by keyboard */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Latin names, addresses, commands and numbers inside Hebrew text */
.rg-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.rg-ltr { display: inline-block; }
.rg-num { font-variant-numeric: tabular-nums; }
.rg-code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .9em;
  padding: .1em .45em;
  border-radius: 6px;
  background: var(--rg-surface-2);
  color: var(--rg-text);
  overflow-wrap: anywhere;
}
.rg-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Layout ---------- */
.rg-wrap {
  width: 100%;
  max-width: calc(var(--rg-max) + 2 * var(--rg-gutter));
  margin-inline: auto;
  padding-inline: var(--rg-gutter);
}
.rg-wrap--narrow { max-width: calc(46rem + 2 * var(--rg-gutter)); }
.rg-section { padding-block: var(--rg-section); }
.rg-section--alt { background: var(--rg-bg-2); }
.rg-section--tight { padding-block: calc(var(--rg-section) * .55); }
.rg-stack > * + * { margin-top: var(--rg-4); }
.rg-stack--lg > * + * { margin-top: var(--rg-6); }
.rg-row { display: flex; flex-wrap: wrap; gap: var(--rg-3); align-items: center; }
.rg-grid { display: grid; gap: var(--rg-5); }
@media (min-width: 720px) {
  .rg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .rg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 5. Type ---------- */
.rg-display {
  font-size: var(--rg-fs-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.rg-h1 { font-size: var(--rg-fs-h1); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.rg-h2 { font-size: var(--rg-fs-h2); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.rg-h3 { font-size: var(--rg-fs-h3); font-weight: 700; line-height: 1.35; }
.rg-lead { font-size: var(--rg-fs-lead); color: var(--rg-text-2); line-height: 1.7; max-width: 38em; }
.rg-muted { color: var(--rg-text-2); }
.rg-dim { color: var(--rg-text-3); }
.rg-small { font-size: var(--rg-fs-sm); }
.rg-prose { max-width: 42em; color: var(--rg-text-2); }
.rg-prose > * + * { margin-top: var(--rg-4); }
.rg-prose strong { color: var(--rg-text); font-weight: 700; }
.rg-link {
  color: var(--rg-text);
  text-decoration: underline;
  text-decoration-color: var(--rg-line-strong);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--rg-fast) var(--rg-ease-out);
}
@media (hover: hover) { .rg-link:hover { text-decoration-color: #FFFFFF; } }

/* Section header: eyebrow (optional) + title + lead (optional) */
.rg-head { margin-bottom: var(--rg-7); max-width: 44rem; }
.rg-head > * + * { margin-top: var(--rg-3); }
.rg-head--center { margin-inline: auto; text-align: center; }
.rg-head--center .rg-lead { margin-inline: auto; }
.rg-eyebrow {
  font-size: var(--rg-fs-sm);
  font-weight: 700;
  color: var(--rg-text-3);
  letter-spacing: .04em;
}

/* ---------- 6. Buttons: primary (one per view), secondary, quiet ---------- */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-2);
  min-height: 48px;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--rg-r-pill);
  background: transparent;
  color: var(--rg-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  transition: transform var(--rg-fast) var(--rg-ease-out);
}
/* hover/pressed tint is a pseudo-element so only opacity animates */
.rg-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: #FFFFFF;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--rg-fast) var(--rg-ease-out);
}
@media (hover: hover) {
  .rg-btn:hover::after { opacity: .12; }
  .rg-btn--primary:hover::after { opacity: .2; }
}
.rg-btn:active { transform: scale(.97); }
.rg-btn--primary { background: var(--rg-orange); color: var(--rg-on-orange); box-shadow: var(--rg-glow); }
.rg-btn--secondary { border-color: var(--rg-line-strong); background: rgba(255, 255, 255, .04); }
.rg-btn--quiet { padding-inline: .9rem; color: var(--rg-text-2); }
.rg-btn--sm { min-height: 44px; padding: .5rem 1.15rem; font-size: var(--rg-fs-sm); }
.rg-btn--block { display: flex; width: 100%; }
.rg-btn[disabled], .rg-btn[aria-disabled="true"] {
  background: var(--rg-surface-2);
  border-color: transparent;
  color: var(--rg-text-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.rg-btn[disabled]::after, .rg-btn[aria-disabled="true"]::after { display: none; }
/* busy: add .is-busy and aria-busy="true"; keep the label, the spinner is added before it */
.rg-btn.is-busy { pointer-events: none; }
.rg-btn.is-busy::before {
  content: '';
  width: 1em; height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  animation: rg-spin .8s linear infinite;
}

/* ---------- 7. Header ---------- */
.rg-skip {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  border-radius: var(--rg-r-sm);
  background: #FFFFFF;
  color: var(--rg-on-orange);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
}
.rg-skip:focus { transform: none; outline: 2px solid var(--rg-orange); outline-offset: 2px; }

.rg-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(7, 11, 28, .94);
  border-bottom: 1px solid var(--rg-line);
}
.rg-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-4);
  min-height: var(--rg-header-h);
}
.rg-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--rg-text);
  flex: none;
}
.rg-mark { width: 30px; height: 30px; flex: none; display: block; }
.rg-brand__name {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
}
.rg-brand__name span { font-weight: 400; color: var(--rg-text-2); }

.rg-nav { display: flex; align-items: center; gap: var(--rg-5); }
.rg-nav__list { display: flex; align-items: center; gap: var(--rg-1); margin: 0; }
.rg-nav__list a, .rg-nav__account {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .8rem;
  border-radius: var(--rg-r-sm);
  color: var(--rg-text-2);
  font-size: .9375rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.rg-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline: .8rem;
  inset-block-end: .35rem;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--rg-fast) var(--rg-ease-in), transform var(--rg-fast) var(--rg-ease-in);
}
@media (hover: hover) {
  .rg-nav__list a:hover, .rg-nav__account:hover { color: #FFFFFF; }
  .rg-nav__list a:hover::after {
    opacity: .45;
    transform: none;
    transition: opacity var(--rg-med) var(--rg-ease-out), transform var(--rg-med) var(--rg-ease-out);
  }
}
.rg-nav__list a[aria-current="page"] { color: #FFFFFF; font-weight: 700; }
.rg-nav__list a[aria-current="page"]::after { opacity: 1; transform: none; }
.rg-nav__actions { display: flex; align-items: center; gap: var(--rg-3); }

.rg-menu-btn {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--rg-r-pill);
  background: transparent;
  color: var(--rg-text);
  font-size: var(--rg-fs-sm);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.rg-menu-btn__bars { position: relative; width: 18px; height: 12px; flex: none; }
.rg-menu-btn__bars::before, .rg-menu-btn__bars::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--rg-med) var(--rg-ease-out);
}
.rg-menu-btn__bars::before { top: 0; }
.rg-menu-btn__bars::after { bottom: 0; }
.rg-menu-btn[aria-expanded="true"] .rg-menu-btn__bars::before { transform: translateY(5px) rotate(45deg); }
.rg-menu-btn[aria-expanded="true"] .rg-menu-btn__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 959.98px) {
  :root { --rg-header-h: 4rem; }
  .rg-header__in { flex-wrap: wrap; }
  .rg-nav {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rg-4);
    padding-block: var(--rg-2) var(--rg-5);
  }
  .rg-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .rg-nav__list a {
    display: flex;
    min-height: 52px;
    padding-inline: .25rem;
    font-size: 1.125rem;
    color: var(--rg-text);
    border-bottom: 1px solid var(--rg-line);
    border-radius: 0;
  }
  .rg-nav__list a::after { display: none; }
  .rg-nav__list a[aria-current="page"]::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    margin-inline-end: .6rem;
  }
  .rg-nav__actions { flex-direction: column-reverse; align-items: stretch; gap: var(--rg-2); }
  .rg-nav__actions .rg-btn { min-height: 48px; font-size: 1rem; }
  .rg-nav__account { justify-content: center; min-height: 48px; }

  /* collapsed only once games.js has run */
  .rg-js .rg-menu-btn { display: inline-flex; }
  .rg-js .rg-header__in { flex-wrap: nowrap; }
  .rg-js .rg-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-height: calc(100vh - var(--rg-header-h));
    max-height: calc(100dvh - var(--rg-header-h));
    overflow-y: auto;
    padding: var(--rg-2) var(--rg-gutter) var(--rg-5);
    background: var(--rg-bg-2);
    border-bottom: 1px solid var(--rg-line);
    box-shadow: var(--rg-shadow);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 150ms var(--rg-ease-in), transform 150ms var(--rg-ease-in), visibility 0s linear 150ms;
  }
  .rg-js .rg-header.is-open .rg-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 220ms var(--rg-ease-out), transform 220ms var(--rg-ease-out), visibility 0s;
  }
}

/* ---------- 8. Footer ---------- */
.rg-footer {
  flex: none;
  background: var(--rg-bg-2);
  border-top: 1px solid var(--rg-line);
  padding-block: var(--rg-7) var(--rg-6);
  color: var(--rg-text-2);
  font-size: .9375rem;
}
.rg-footer__in { display: grid; gap: var(--rg-6); }
.rg-footer__about { max-width: 26rem; }
.rg-footer__about > * + * { margin-top: var(--rg-3); }
.rg-footer__title { font-size: var(--rg-fs-sm); font-weight: 700; color: var(--rg-text-3); margin-bottom: var(--rg-2); }
.rg-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rg-text);
  text-decoration: none;
}
@media (hover: hover) {
  .rg-footer__list a:hover { text-decoration: underline; text-underline-offset: .25em; }
}
.rg-footer__base {
  margin-top: var(--rg-6);
  padding-top: var(--rg-5);
  border-top: 1px solid var(--rg-line);
  font-size: var(--rg-fs-sm);
  color: var(--rg-text-3);
}
@media (min-width: 560px) {
  .rg-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-footer__about { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .rg-footer__in { grid-template-columns: 2fr 1fr 1fr; }
  .rg-footer__about { grid-column: auto; }
}

/* ---------- 9. Status badges: a shape AND a word, never colour alone ---------- */
.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .28rem .75rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--rg-r-pill);
  font-size: var(--rg-fs-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rg-text);
  white-space: nowrap;
}
.rg-badge::before {
  content: '';
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  box-sizing: border-box;
}
/* open for requests: solid dot */
.rg-badge--open { border-color: rgba(95, 211, 154, .5); }
.rg-badge--open::before { background: var(--rg-ok); }
/* planned: hollow ring */
.rg-badge--planned { border-color: rgba(122, 162, 255, .5); }
.rg-badge--planned::before { border: 2px solid var(--rg-info); }
/* unavailable: flat bar */
.rg-badge--off { color: var(--rg-text-2); }
.rg-badge--off::before { height: 2px; border-radius: 2px; background: var(--rg-text-3); }

/* ---------- 10. Game tile ---------- */
.rg-tiles { display: grid; gap: var(--rg-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.rg-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--rg-r);
  background: var(--rg-surface);
  color: var(--rg-text);
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
/* the art slot: put an original abstract scene (inline SVG or <img>) inside */
.rg-tile__art {
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 90% at 30% 100%, #1B2A63 0%, #0D1534 55%, #0A1128 100%);
  overflow: hidden;
}
.rg-tile__art > img, .rg-tile__art > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rg-slow) var(--rg-ease-out);
}
.rg-tile__body { display: flex; flex-direction: column; gap: var(--rg-1); padding: var(--rg-4) var(--rg-5) var(--rg-5); flex: 1; }
.rg-tile__name { font-size: 1.375rem; font-weight: 700; line-height: 1.25; direction: ltr; unicode-bidi: isolate; text-align: end; }
.rg-tile__meta { color: var(--rg-text-2); font-size: var(--rg-fs-sm); }
.rg-tile__foot { margin-top: auto; padding-top: var(--rg-4); display: flex; }
.rg-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--rg-line);
  pointer-events: none;
  transition: opacity var(--rg-fast) var(--rg-ease-out);
}
.rg-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--rg-fast) var(--rg-ease-in);
}
@media (hover: hover) {
  a.rg-tile:hover::before { opacity: .55; transition: opacity var(--rg-med) var(--rg-ease-out); }
  a.rg-tile:hover .rg-tile__art > img, a.rg-tile:hover .rg-tile__art > svg { transform: scale(1.04); }
}
a.rg-tile:focus-visible { border-radius: var(--rg-r); }
/* a game that cannot be requested yet */
.rg-tile.is-off .rg-tile__art { opacity: .55; }

/* ---------- 11. Package card ---------- */
.rg-pkgs { display: grid; gap: var(--rg-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); align-items: stretch; }
.rg-pkg {
  display: flex;
  flex-direction: column;
  gap: var(--rg-4);
  padding: var(--rg-5);
  border: 1px solid var(--rg-line);
  border-radius: var(--rg-r);
  background: var(--rg-surface);
}
.rg-pkg__name { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.rg-pkg__for { color: var(--rg-text-2); font-size: .9375rem; line-height: 1.6; }
/* resource list: <dl class="rg-specs"><div><dt>label</dt><dd>value</dd></div>…</dl> */
.rg-specs { border-top: 1px solid var(--rg-line); }
.rg-specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rg-4);
  padding-block: .7rem;
  border-bottom: 1px solid var(--rg-line);
}
.rg-specs dt { color: var(--rg-text-2); font-size: .9375rem; }
.rg-specs dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
/* price slot: text for now ("מחיר יפורסם בקרוב"); .rg-price--set when the API returns a price */
.rg-price { margin-top: auto; padding-top: var(--rg-2); }
.rg-price__label { display: block; font-size: var(--rg-fs-xs); color: var(--rg-text-3); }
.rg-price__value { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--rg-text-2); }
.rg-price--set .rg-price__value { font-size: 1.75rem; color: var(--rg-text); line-height: 1.2; }

/* ---------- 12. Notices ---------- */
.rg-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rg-3);
  align-items: start;
  padding: var(--rg-4);
  padding-inline-end: var(--rg-5);
  border-radius: var(--rg-r);
  border: 1px solid var(--rg-line);
  background: var(--rg-surface);
  color: var(--rg-text-2);
}
.rg-notice::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  margin-top: .15rem;
  border-radius: 50%;
  border: 2px solid var(--rg-notice, var(--rg-info));
  color: var(--rg-notice, var(--rg-info));
  font-family: Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}
.rg-notice > :not(:first-child) { grid-column: 2; }
.rg-notice__title { color: var(--rg-text); font-weight: 700; }
.rg-notice__body > * + * { margin-top: var(--rg-2); }
.rg-notice--info { --rg-notice: var(--rg-info); }
.rg-notice--warn { --rg-notice: var(--rg-warn); }
.rg-notice--warn::before { content: '!'; }
.rg-notice--error { --rg-notice: var(--rg-err); }
.rg-notice--error::before { content: '\00D7'; font-size: 1rem; }
.rg-notice--success { --rg-notice: var(--rg-ok); }
.rg-notice--success::before { content: '\2713'; }
/* a notice inserted after an action (form result) may enter; never on first paint */
.rg-notice.is-new { animation: rg-enter var(--rg-slow) var(--rg-ease-out) both; }

/* ---------- 13. Forms ---------- */
.rg-form { display: grid; gap: var(--rg-5); }
.rg-form__row { display: grid; gap: var(--rg-5); align-items: start; }
@media (min-width: 640px) { .rg-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rg-field { display: grid; align-content: start; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.rg-label { font-weight: 700; font-size: .9375rem; color: var(--rg-text); padding: 0; }
.rg-label__opt { font-weight: 400; color: var(--rg-text-3); margin-inline-start: .35rem; }
.rg-hint { font-size: var(--rg-fs-sm); color: var(--rg-text-3); line-height: 1.5; }
.rg-input, .rg-select, .rg-textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .7rem .95rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--rg-r-sm);
  background: var(--rg-bg-2);
  color: var(--rg-text);
  font-size: 1rem; /* 16px: stops iOS zooming on focus */
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}
.rg-textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.rg-input::placeholder, .rg-textarea::placeholder { color: var(--rg-text-3); opacity: 1; }
.rg-input[dir="ltr"] { text-align: left; }
.rg-select {
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C3CCE3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left .95rem center;
}
[dir="ltr"] .rg-select { background-position: right .95rem center; }
.rg-select option { background: var(--rg-bg-2); color: var(--rg-text); }
@media (hover: hover) {
  .rg-input:hover, .rg-select:hover, .rg-textarea:hover { border-color: rgba(255, 255, 255, .4); }
}
.rg-input:focus-visible, .rg-select:focus-visible, .rg-textarea:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 1px;
  border-color: #FFFFFF;
  border-radius: var(--rg-r-sm);
}
.rg-input:disabled, .rg-select:disabled, .rg-textarea:disabled { opacity: .5; cursor: not-allowed; }
/* inline validation: add .is-invalid on .rg-field and aria-invalid="true" + aria-describedby on the control */
.rg-error {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  font-size: var(--rg-fs-sm);
  font-weight: 700;
  color: var(--rg-err);
  line-height: 1.5;
}
.rg-error::before {
  content: '!';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--rg-err);
  color: var(--rg-on-orange);
  font-family: Arial, sans-serif;
  font-size: .75rem;
  line-height: 1;
  transform: translateY(.1rem);
}
.rg-field.is-invalid .rg-input, .rg-field.is-invalid .rg-select, .rg-field.is-invalid .rg-textarea,
.rg-input[aria-invalid="true"], .rg-select[aria-invalid="true"], .rg-textarea[aria-invalid="true"] {
  border-color: var(--rg-err);
  border-width: 2px;
}
/* choice pills (radio): <div class="rg-choices"><label class="rg-choice"><input type="radio"><span>…</span></label>…</div> */
.rg-choices { display: flex; flex-wrap: wrap; gap: var(--rg-2); }
.rg-choice { position: relative; display: inline-flex; }
.rg-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rg-choice span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: var(--rg-r-pill);
  color: var(--rg-text-2);
  font-weight: 700;
}
.rg-choice span::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rg-text-3);
  box-sizing: border-box;
  flex: none;
}
.rg-choice input:checked + span { border-color: #FFFFFF; color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.rg-choice input:checked + span::before { border: 4px solid #FFFFFF; }
.rg-choice input:focus-visible + span { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* checkbox row */
.rg-check { display: flex; gap: .75rem; align-items: flex-start; min-height: 44px; padding-block: .5rem; color: var(--rg-text-2); cursor: pointer; }
.rg-check input { flex: none; width: 22px; height: 22px; margin: .15rem 0 0; accent-color: #FFFFFF; }
/* honeypot field ("company"): off-screen, not display:none */
.rg-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 14. Table (stacks below 640px; give every <td> a data-label) ---------- */
.rg-table-wrap { border: 1px solid var(--rg-line); border-radius: var(--rg-r); background: var(--rg-surface); overflow: hidden; }
.rg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rg-table caption { text-align: start; padding: var(--rg-4) var(--rg-5); font-weight: 700; border-bottom: 1px solid var(--rg-line); }
.rg-table th, .rg-table td { padding: .9rem var(--rg-5); text-align: start; vertical-align: top; border-bottom: 1px solid var(--rg-line); }
.rg-table thead th { font-size: var(--rg-fs-sm); font-weight: 700; color: var(--rg-text-3); white-space: nowrap; }
.rg-table tbody th { font-weight: 700; color: var(--rg-text); }
.rg-table td { color: var(--rg-text-2); }
.rg-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 639.98px) {
  .rg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rg-table caption { display: block; }
  .rg-table, .rg-table tbody, .rg-table tr, .rg-table th, .rg-table td { display: block; }
  .rg-table tr { padding: var(--rg-3) var(--rg-4); border-bottom: 1px solid var(--rg-line); }
  .rg-table tbody tr:last-child { border-bottom: 0; }
  .rg-table th, .rg-table td { padding: .3rem 0; border: 0; }
  .rg-table tbody th { font-size: 1.125rem; padding-bottom: .4rem; }
  .rg-table td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rg-4); }
  .rg-table td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--rg-text-3); font-size: var(--rg-fs-sm); }
  .rg-table td > * { min-width: 0; }
  .rg-table td { text-align: end; }
  .rg-table td::before { text-align: start; }
}

/* ---------- 15. FAQ disclosure: <details class="rg-faq"><summary>…</summary><div class="rg-faq__a">…</div></details> ---------- */
.rg-faqs { border-top: 1px solid var(--rg-line); }
.rg-faq { border-bottom: 1px solid var(--rg-line); }
.rg-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-4);
  min-height: 60px;
  padding-block: var(--rg-4);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.rg-faq > summary::-webkit-details-marker { display: none; }
.rg-faq > summary::after {
  content: '';
  flex: none;
  width: 10px; height: 10px;
  margin-inline: .5rem;
  border-right: 2px solid var(--rg-text-2);
  border-bottom: 2px solid var(--rg-text-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--rg-med) var(--rg-ease-out);
}
.rg-faq[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rg-faq__a { padding-bottom: var(--rg-5); color: var(--rg-text-2); max-width: 44em; }
.rg-faq__a > * + * { margin-top: var(--rg-3); }
.rg-faq[open] > .rg-faq__a { animation: rg-enter var(--rg-med) var(--rg-ease-out); transform-origin: top; }

/* ---------- 16. Steps: <ol class="rg-steps"><li class="rg-step">…</li></ol> ---------- */
.rg-steps { counter-reset: rg-step; display: grid; gap: var(--rg-6); }
.rg-step { counter-increment: rg-step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rg-4); row-gap: .3rem; }
.rg-step::before {
  content: counter(rg-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rg-line-strong);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rg-step__title { font-size: var(--rg-fs-h3); font-weight: 700; line-height: 1.4; align-self: center; }
.rg-step__text { grid-column: 2; color: var(--rg-text-2); }
@media (min-width: 880px) {
  .rg-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--rg-6); }
  .rg-steps--row .rg-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--rg-3); }
  .rg-steps--row .rg-step::before { grid-row: auto; }
  .rg-steps--row .rg-step__text { grid-column: 1; }
}

/* ---------- 17. States: empty, loading, error ---------- */
.rg-state {
  display: grid;
  justify-items: center;
  gap: var(--rg-3);
  padding: var(--rg-7) var(--rg-5);
  border: 1px dashed var(--rg-line-strong);
  border-radius: var(--rg-r);
  text-align: center;
}
.rg-state__title { font-size: var(--rg-fs-h3); font-weight: 700; line-height: 1.4; }
.rg-state__text { color: var(--rg-text-2); max-width: 30em; }
.rg-state__action { margin-top: var(--rg-2); }
.rg-state--error { border-style: solid; border-color: rgba(255, 133, 133, .55); }
.rg-state--error .rg-state__title::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  margin-inline-end: .6rem;
  border-radius: 50%;
  background: var(--rg-err);
  color: var(--rg-on-orange);
  font-family: Arial, sans-serif;
  font-size: .9375rem;
  line-height: 1;
  vertical-align: .1em;
}
.rg-state--loading { border-style: solid; border-color: var(--rg-line); }
.rg-spinner {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 3px solid var(--rg-line-strong);
  border-inline-start-color: #FFFFFF;
  animation: rg-spin .9s linear infinite; /* linear is correct for a continuous loop */
}
/* skeleton: reserve the final size so nothing jumps when content lands */
.rg-skel { display: block; border-radius: var(--rg-r-sm); background: var(--rg-surface-2); animation: rg-pulse 1.4s ease-in-out infinite; }
.rg-skel--line { height: .9rem; margin-block: .4rem; }
.rg-skel--title { height: 1.5rem; width: 55%; }
.rg-skel--art { aspect-ratio: 16 / 10; border-radius: 0; }
.rg-skel--btn { height: 48px; border-radius: var(--rg-r-pill); }

/* ---------- 18. Gateway (signature visual) ---------- */
.rg-gateway { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 760; }

/* ---------- 19. Motion ---------- */
@keyframes rg-spin { to { transform: rotate(360deg); } }
@keyframes rg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rg-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* a spinner that does not spin reads as broken: keep a slow pulse instead */
  .rg-spinner, .rg-btn.is-busy::before {
    animation: rg-pulse 1.6s ease-in-out infinite !important;
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
  .rg-btn:active { transform: none; }
}

@media print {
  .rg-header, .rg-footer, .rg-skip { display: none; }
  body { background: #fff; color: #000; }
}