/* NEXIFY STUDIO: THE GOLDEN 10 loyalty club (js/loyalty.js).
   The card itself is an obsidian membership card with metal-gold type in both
   themes; the reward cards, history and questions take the page's theme. */

.sec--rewards .sec__head { max-width: none; }

/* ---- preview notice --------------------------------------------------------- */
.g10-demo {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  max-width: 52rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--gold-line, rgba(220, 180, 102, 0.2));
  border-left: 2px solid var(--gold-2);
  border-radius: 0.9rem;
  background: var(--gold-tint, rgba(220, 180, 102, 0.09));
  color: var(--grey-body, #c6c5c5);
  font-size: 0.95rem;
  line-height: 1.55;
}
.g10-demo__tag {
  flex: none;
  font-family: var(--font-bogle);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink, #e3c17b);
}

.g10 { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.g10 .pill { margin-top: 0; }

/* ---- the card ------------------------------------------------------------------ */
.g10-card {
  --gc-hi: #fdefc8;
  --gc-1: #f0d492;
  --gc-2: #dcb466;
  --gc-3: #c0923f;
  --gc-4: #93692b;
  --gc-line: rgba(220, 180, 102, 0.22);
  /* the card is black in both themes: keep the bright metal of the dark palette
     (the light theme darkens these tokens for paper) */
  --gold-text: linear-gradient(180deg, #fff2cf 0%, #f2d898 22%, #dcb466 46%, #b88a3a 70%, #e6c582 100%);
  --gold-text-hi: linear-gradient(180deg, #fffaeb 0%, #f8e3ae 24%, #e8c57d 48%, #c99c4c 72%, #f1d597 100%);
  --gold-fill: linear-gradient(140deg, #fbe6b0 0%, #ecca80 24%, #d6a857 50%, #e9ca88 74%, #c4933f 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.4rem, 3.2vw, 2.8rem);
  border-radius: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid rgba(220, 180, 102, 0.34);
  color: #f3ede2;
  background:
    radial-gradient(ellipse 70% 90% at 12% -20%, rgba(240, 204, 128, 0.16), rgba(240, 204, 128, 0) 60%),
    radial-gradient(ellipse 60% 80% at 100% 120%, rgba(192, 146, 63, 0.12), rgba(192, 146, 63, 0) 62%),
    linear-gradient(155deg, #17130d 0%, #0b0907 46%, #060504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1.6rem 3.6rem -1.4rem rgba(0, 0, 0, 0.55),
    0 0.4rem 1rem -0.4rem rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .g10-card { box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), 0 1.6rem 3.4rem -1.6rem rgba(74, 50, 16, 0.45), 0 0.3rem 0.9rem -0.3rem rgba(74, 50, 16, 0.25); }
/* brushed grain + a slow light across the metal edge */
.g10-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-brush);
  opacity: 0.5;
  pointer-events: none;
}
.g10-card__sheen,
.g10-rw__sheen {
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: linear-gradient(105deg, rgba(255, 240, 200, 0) 42%, rgba(255, 240, 200, 0.1) 49%, rgba(255, 240, 200, 0.02) 54%, rgba(255, 240, 200, 0) 60%);
  transform: translateX(-38%);
  pointer-events: none;
}
.g10-card:focus { outline: none; }
.g10-card:focus-visible { outline: 2px solid var(--gc-1); outline-offset: 4px; }

.g10-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.2rem, 2.6vw, 2.2rem);
}
.g10-brand {
  margin: 0;
  font-family: var(--font-bogle);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.g10-brand__the { font-size: 0.55em; letter-spacing: 0.3em; vertical-align: 0.42em; margin-right: 0.15em; }
.g10-card__member {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 237, 226, 0.68);
}
.g10-card__num { margin-left: 0.5em; color: var(--gc-1); letter-spacing: 0.2em; }

.g10-card__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem 2rem; flex-wrap: wrap; }
.g10-points { margin: 0; display: flex; align-items: baseline; gap: 0.55rem; }
.g10-points__n {
  font-family: var(--font-bogle);
  font-size: clamp(4.2rem, 8vw, 6.6rem);
  line-height: 0.82;
  color: transparent;
  background-image: var(--gold-text-hi);
  -webkit-background-clip: text;
  background-clip: text;
}
.g10-points__n--off { background-image: linear-gradient(180deg, #5a4d3a, #2b241b); }
.g10-points__of { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 237, 226, 0.6); }
.g10-msg { margin: 0 0 0.35rem; max-width: 26rem; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.5; color: #f3ede2; }

/* ---- ten markers ------------------------------------------------------------------ */
.g10-track { position: relative; margin: clamp(1.6rem, 3vw, 2.5rem) 0 clamp(1.4rem, 2.6vw, 2.1rem); }
.g10-track__dots {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.g10-track__rail {
  position: absolute;
  left: 5%;
  right: 5%;
  top: calc(var(--gem) / 2 - 1px);
  height: 2px;
  border-radius: 2px;
  background: rgba(220, 180, 102, 0.16);
  --gem: clamp(1.15rem, 2.6vw, 1.9rem);
}
.g10-track { --gem: clamp(1.15rem, 2.6vw, 1.9rem); }
.g10-track__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gc-4), var(--gc-2) 60%, var(--gc-1));
  box-shadow: 0 0 0.7rem rgba(240, 204, 128, 0.35);
  transform-origin: 0 50%;
  transform: scaleX(var(--fill, 0));
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.g10-dot { position: relative; display: grid; justify-items: center; }
.g10-dot__gem {
  width: var(--gem);
  height: var(--gem);
  border-radius: 50%;
  border: 1px solid rgba(220, 180, 102, 0.42);
  background: radial-gradient(circle at 35% 30%, #241d14, #0d0b08 70%);
  box-shadow: inset 0 1px 1px rgba(255, 236, 190, 0.08);
  transition: background 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, transform 0.6s ease;
}
.g10-dot.is-mile .g10-dot__gem {
  border-radius: 0.3em;
  transform: rotate(45deg) scale(0.86);
  border-width: 1.5px;
  border-color: rgba(220, 180, 102, 0.7);
}
.g10-dot.is-elite .g10-dot__gem { border-color: var(--gc-1); box-shadow: 0 0 0 3px rgba(220, 180, 102, 0.12), inset 0 1px 1px rgba(255, 236, 190, 0.1); }
.g10-dot.is-lit .g10-dot__gem {
  border-color: var(--gc-hi);
  background: radial-gradient(circle at 34% 28%, #fff4d2 0%, #f0d492 26%, #d2a352 58%, #8f6526 100%);
  box-shadow: 0 0 0.9rem rgba(240, 204, 128, 0.55), 0 0 0.2rem rgba(255, 240, 200, 0.8), inset 0 -2px 3px rgba(90, 62, 25, 0.45);
}
.g10-dot__tag {
  margin-top: 0.6rem;
  font-family: var(--font-bogle);
  font-size: clamp(0.7rem, 1vw, 0.86rem);
  letter-spacing: 0.08em;
  color: rgba(240, 212, 146, 0.62);
}
.g10-dot.is-lit .g10-dot__tag { color: var(--gc-1); }
.g10-dot.is-elite .g10-dot__tag { color: var(--gc-1); }

/* newly earned markers light one after another */
.g10-dot.is-new .g10-dot__gem { animation: g10-light 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.35s + var(--k, 0) * 0.16s); }
@keyframes g10-light {
  0% { background: radial-gradient(circle at 35% 30%, #241d14, #0d0b08 70%); box-shadow: none; border-color: rgba(220, 180, 102, 0.42); }
  55% { box-shadow: 0 0 1.6rem rgba(255, 226, 160, 0.95), 0 0 0.3rem #fff; }
}

.g10-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--gc-line);
}
.g10-stats dt { margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 237, 226, 0.56); }
.g10-stats dd { margin: 0; font-size: 1.05rem; color: #f3ede2; }
.g10-card__foot { margin: 1.2rem 0 0; }
.g10-link {
  padding: 0.6rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gc-1);
  text-decoration: underline;
  text-decoration-color: rgba(240, 212, 146, 0.4);
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.g10-link:hover { text-decoration-color: var(--gc-1); }

/* ---- open-your-card form (inside the dark card) --------------------------------- */
.g10-open { padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid var(--gc-line); }
.g10-open__title { margin: 0 0 1rem; font-family: var(--font-bogle); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gc-1); }
.g10-open__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.9rem; align-items: end; }
.g10-field { display: grid; gap: 0.45rem; }
.g10-field span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 237, 226, 0.62); }
.g10-field input {
  width: 100%;
  min-height: 3.2rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 1px solid rgba(220, 180, 102, 0.3);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  color: #f7f1e6;
  font: inherit;
  font-size: 16px;   /* no zoom on phones */
  letter-spacing: 0.03em;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.g10-field input::placeholder { color: rgba(243, 237, 226, 0.3); }
.g10-field input:focus { outline: none; border-color: var(--gc-1); background: rgba(240, 212, 146, 0.07); }
.g10-open__btn { min-height: 3.2rem; }
.g10-card .pill--light { background: var(--gold-fill); color: var(--gold-ink-on, #1e1408); }
.g10-err { margin: 0.9rem 0 0; color: #f0a48f; font-size: 0.95rem; }
.g10-hint { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.5; color: rgba(243, 237, 226, 0.62); }
.g10-hint a { color: var(--gc-1); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- reward cards (glass, on the page's theme) ---------------------------------- */
.g10-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.g10-rw {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border-radius: clamp(1rem, 1.6vw, 1.35rem);
  border: 1px solid var(--gold-line, rgba(220, 180, 102, 0.2));
  background: var(--panel, rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}
html[data-theme="light"] .g10-rw { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0.9rem 2rem -1.4rem rgba(74, 50, 16, 0.35); }
.g10-rw__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.g10-rw__tier { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink, #e3c17b); }
.g10-rw__chip {
  flex: none;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--gold-line-strong, rgba(220, 180, 102, 0.42));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-dim, #a9a39a);
}
.g10-rw__off { margin: clamp(1rem, 2vw, 1.5rem) 0 0.3rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.g10-rw__pct {
  font-family: var(--font-bogle);
  font-size: clamp(3rem, 5.4vw, 4.6rem);
  line-height: 0.9;
  color: transparent;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.g10-rw__offtxt { font-size: 1.02rem; color: var(--c-fg, #f3ede2); }
.g10-rw__need { margin: 0 0 1.1rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-dim, #a9a39a); }
.g10-rw__note { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--gold-line, rgba(220, 180, 102, 0.2)); font-size: 0.98rem; line-height: 1.5; color: var(--grey-body, #c6c5c5); }
.g10-rw__sub { margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--grey-dim, #a9a39a); }
.g10-rw__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.g10-rw .pill--light { background: var(--gold-fill); color: var(--gold-ink-on, #1e1408); }
.g10-code { font-family: var(--font-mono); letter-spacing: 0.14em; color: var(--c-fg, #fff); white-space: nowrap; }

/* locked: quiet, the metal unlit */
.g10-rw.is-locked .g10-rw__pct { background-image: linear-gradient(180deg, rgba(160, 140, 110, 0.55), rgba(110, 94, 70, 0.45)); }
html[data-theme="light"] .g10-rw.is-locked .g10-rw__pct { background-image: linear-gradient(180deg, rgba(150, 128, 96, 0.55), rgba(120, 100, 72, 0.45)); }
/* unlocked: lit edge, gold chip */
.g10-rw.is-open { border-color: var(--gold-line-strong, rgba(220, 180, 102, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), 0 0 0 1px rgba(220, 180, 102, 0.12), 0 1.1rem 2.6rem -1.6rem rgba(192, 146, 63, 0.55); }
.g10-rw.is-open .g10-rw__chip { border-color: transparent; background: var(--gold-fill); color: var(--gold-ink-on, #1e1408); }
.g10-rw.is-open .g10-rw__pct { background-image: var(--gold-text-hi); }
/* redeemed: settled, a hairline check of gold */
.g10-rw.is-used .g10-rw__chip { color: var(--gold-ink, #e3c17b); background: var(--gold-tint, rgba(220, 180, 102, 0.09)); }
.g10-rw.is-used .g10-rw__pct { opacity: 0.55; }
.g10-rw--elite.is-open { background: linear-gradient(160deg, var(--gold-tint, rgba(220, 180, 102, 0.09)), transparent 55%), var(--panel, rgba(255, 255, 255, 0.025)); }

@media (hover: hover) and (pointer: fine) {
  .g10-rw:hover { transform: translateY(-3px); border-color: var(--gold-line-strong, rgba(220, 180, 102, 0.42)); }
  .g10-rw:hover .g10-rw__sheen { transform: translateX(38%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
}
.g10-rw:active { transform: translateY(0) scale(0.995); }

/* ---- celebration: a single pass of light across the metal --------------------- */
.is-celebrate > .g10-card__sheen,
.is-celebrate > .g10-rw__sheen {
  background: linear-gradient(105deg, rgba(255, 240, 200, 0) 40%, rgba(255, 236, 190, 0.32) 49%, rgba(255, 240, 200, 0.08) 55%, rgba(255, 240, 200, 0) 62%);
  animation: g10-sweep 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.6s both;
}
.g10-card.is-celebrate { animation: g10-glow 2.4s ease 0.4s both; }
.g10-rw.is-celebrate { animation: g10-glow-soft 2.2s ease 0.3s both; }
@keyframes g10-sweep { from { transform: translateX(-42%); } to { transform: translateX(42%); } }
@keyframes g10-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14), 0 1.6rem 3.6rem -1.4rem rgba(0, 0, 0, 0.55); }
  40% { box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.3), 0 0 0 1px rgba(240, 212, 146, 0.55), 0 0 3.2rem -0.4rem rgba(240, 204, 128, 0.5); }
}
@keyframes g10-glow-soft {
  0%, 100% { }
  40% { border-color: var(--gold-1); box-shadow: 0 0 0 1px rgba(240, 212, 146, 0.4), 0 0 2.6rem -0.6rem rgba(240, 204, 128, 0.5); }
}

/* ---- history ---------------------------------------------------------------------- */
.g10-h3 { margin: 0 0 1.1rem; font-family: var(--font-bogle); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-fg, #fff); }
.g10-hist { padding: clamp(1.2rem, 2.2vw, 1.8rem); border-radius: clamp(1rem, 1.6vw, 1.35rem); border: 1px solid var(--gold-line, rgba(220, 180, 102, 0.2)); background: var(--panel, rgba(255, 255, 255, 0.02)); }
.g10-hist__list { margin: 0; padding: 0; list-style: none; }
.g10-hist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3rem;
  gap: 0.4rem 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  font-size: 0.98rem;
  color: var(--c-fg, #f3ede2);
}
.g10-hist__row:first-child { border-top: 0; padding-top: 0.2rem; }
.g10-hist__ref { margin-left: 0.5em; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--grey-dim, #a9a39a); }
.g10-hist__when { font-size: 0.88rem; color: var(--grey-dim, #a9a39a); white-space: nowrap; }
.g10-hist__pts { justify-self: end; font-family: var(--font-bogle); color: var(--gold-ink, #e3c17b); }
.g10-hist__row.is-redeem .g10-hist__pts { color: var(--grey-dim, #a9a39a); }
.g10-hist__empty { margin: 0; color: var(--grey-dim, #a9a39a); }

/* ---- how it works + questions ---------------------------------------------------------- */
.g10-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.g10-steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.g10-steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.8rem; padding: 0.85rem 0; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); font-size: 1.02rem; line-height: 1.5; color: var(--grey-body, #c6c5c5); }
.g10-steps li:first-child { border-top: 0; }
.g10-steps__n { font-family: var(--font-bogle); color: var(--gold-ink, #e3c17b); letter-spacing: 0.06em; }
.g10-q { border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.g10-q:last-child { border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.g10-q summary {
  position: relative;
  padding: 1rem 2.4rem 1rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.04rem;
  color: var(--c-fg, #fff);
}
.g10-q summary::-webkit-details-marker { display: none; }
.g10-q summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--gold-2);
  border-bottom: 1.5px solid var(--gold-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}
.g10-q[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.g10-q p { margin: 0 0 1.1rem; max-width: 36rem; line-height: 1.6; color: var(--grey-body, #c6c5c5); }
.g10-q summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* ---- tablets and phones ---------------------------------------------------------- */
@media (max-width: 900px) {
  .g10-info { grid-template-columns: minmax(0, 1fr); }
  .g10-open__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g10-open__btn { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .g10-demo { flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
  .g10-rewards { grid-template-columns: minmax(0, 1fr); }
  .g10-open__fields { grid-template-columns: minmax(0, 1fr); }
  .g10-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g10-stats > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .g10-track { --gem: clamp(1rem, 5.2vw, 1.5rem); }
  .g10-dot__tag { font-size: 0.68rem; }
  .g10-hist__row { grid-template-columns: minmax(0, 1fr) 2.4rem; }
  .g10-hist__when { grid-column: 1; grid-row: 2; }
  .g10-hist__pts { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .g10-rw__acts .pill { flex: 1 1 auto; }
}

/* ---- reduced motion: the light still comes on, without travel -------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.mo-full) .g10-track__fill { transition: none; }
  html:not(.mo-full) .g10-dot.is-new .g10-dot__gem { animation-duration: 0.01s; animation-delay: 0s; }
  html:not(.mo-full) .is-celebrate > .g10-card__sheen,
  html:not(.mo-full) .is-celebrate > .g10-rw__sheen { animation: none; transform: none; opacity: 0.6; }
  html:not(.mo-full) .g10-rw { transition: border-color 0.3s ease; }
  html:not(.mo-full) .g10-rw:hover { transform: none; }
}