/* Event extras (Enventor_Event_Extras): the after-event offer on an event's page, and early access (the gate, the
   countdown bar, a giveaway as HRC+ will show it). Every value reads the system's tokens. */

/* ---------- the after-event offer, in the event page's main column ----------
   A section like the page's others (a hairline, its heading), holding one card: who it's from, what and when, then a
   panel that is either the runner's unlocked code (registered) or what registering unlocks. The reference is a
   discount card and a checkout's code field: the code in its own field with Copy, the steps numbered, one primary. */
body.hrc-coded .v6-after-sec { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--line); }
body.hrc-coded .v6-after-sec > .v6-h2 { margin: 0 0 22px; }
body.hrc-coded .v6-after {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
}
body.hrc-coded .v6-after__fig { aspect-ratio: 16 / 7; background: var(--paper-hover); }
body.hrc-coded .v6-after__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.hrc-coded .v6-after__pad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: var(--pad-card, 26px); }
body.hrc-coded .v6-after__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.hrc-coded .v6-after__heading { display: grid; gap: 6px; min-width: 0; }
body.hrc-coded .v6-after__brand { color: var(--grey); font: var(--w-ui) var(--fs-small)/1.3 var(--font-sans); }
body.hrc-coded .v6-after__title { margin: 0; color: var(--ink); font: var(--w-title) var(--fs-h3)/1.25 var(--font-sans); letter-spacing: var(--ls-h3); }
body.hrc-coded .v6-after__when { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 400 15px/1.45 var(--font-sans); }
body.hrc-coded .v6-after__when svg { flex: none; width: 18px; height: 18px; color: var(--orange); }
body.hrc-coded .v6-after__logo { flex: none; display: block; width: auto; max-width: 120px; height: 32px; object-fit: contain; }
body.hrc-coded .v6-after__text { margin: 0; color: var(--on-surface-2, var(--grey)); font: 400 16px/1.6 var(--font-sans); max-width: 62ch; }

/* the panel: unlocked (the runner's code), locked (what registering unlocks), or the codes for everyone */
body.hrc-coded .v6-after__panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--paper-hover);
}
body.hrc-coded .v6-after__panel.is-open { border-color: var(--orange-ghost-line); background: var(--orange-tint); }
body.hrc-coded .v6-after__panel.is-locked { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; }
body.hrc-coded .v6-after__state { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: var(--w-ui) 15px/1.3 var(--font-sans); }
body.hrc-coded .v6-after__mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; background: var(--orange-tint); color: var(--orange-type-aa);
}
body.hrc-coded .v6-after__panel.is-open .v6-after__mark { background: var(--paper); }
body.hrc-coded .v6-after__mark svg { width: 14px; height: 14px; }
body.hrc-coded .v6-after__mark.is-big { width: 40px; height: 40px; background: var(--paper); border: 1px solid var(--line); }
body.hrc-coded .v6-after__mark.is-big svg { width: 20px; height: 20px; }
body.hrc-coded .v6-after__locked { display: grid; gap: 3px; min-width: 0; }
body.hrc-coded .v6-after__locked-title { color: var(--ink); font: var(--w-ui) 15px/1.35 var(--font-sans); }
body.hrc-coded .v6-after__locked-text { color: var(--grey); font: 400 14px/1.5 var(--font-sans); }
body.hrc-coded .v6-after__act { display: block; }
body.hrc-coded .v6-after__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: v6step; }
body.hrc-coded .v6-after__steps li {
  position: relative; padding-left: 32px; counter-increment: v6step;
  color: var(--ink); font: 400 15px/1.45 var(--font-sans);
}
body.hrc-coded .v6-after__steps li::before {
  content: counter(v6step); position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: var(--w-ui) 12px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
/* The steps' picture: the partner's page in a hairline frame, with a red box (the system's --error) drawn over where
   to type, then one line saying so. It's for following along, so it keeps to a readable width. */
body.hrc-coded .v6-after__shot { display: grid; gap: 8px; max-width: 460px; margin: 0; }
body.hrc-coded .v6-after__shot-frame { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-inner); background: var(--paper); }
body.hrc-coded .v6-after__shot-frame img { display: block; width: 100%; height: auto; }
body.hrc-coded .v6-after__shot-mark { position: absolute; border: 3px solid var(--error, #C8321B); border-radius: 6px; pointer-events: none; }
body.hrc-coded .v6-after__shot-cap { color: var(--app-ink-2, var(--grey)); font: 400 13px/1.45 var(--font-sans); }
body.hrc-coded .v6-after__fold { border-top: 1px solid var(--line); }
body.hrc-coded .v6-after__fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 0;
  cursor: pointer; list-style: none; color: var(--ink); font: var(--w-ui) 15px/1.4 var(--font-sans);
}
body.hrc-coded .v6-after__fold > summary::-webkit-details-marker { display: none; }
body.hrc-coded .v6-after__fold > summary svg { flex: none; width: 16px; height: 16px; color: var(--grey); transition: transform var(--dur-action, .2s) var(--ease-action, ease); }
body.hrc-coded .v6-after__fold[open] > summary svg { transform: rotate(180deg); }
body.hrc-coded .v6-after__fold-body { padding-top: 10px; color: var(--grey); font: 400 14px/1.55 var(--font-sans); max-width: 62ch; }
body.hrc-coded .v6-after__fold-body p { margin: 0 0 8px; }
@media (max-width: 640px) {
  body.hrc-coded .v6-after__panel.is-locked { grid-template-columns: auto minmax(0, 1fr); }
  body.hrc-coded .v6-after__panel.is-locked .v6-btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  body.hrc-coded .v6-after__logo { height: 26px; max-width: 96px; }
}
@media (prefers-reduced-motion: reduce) { body.hrc-coded .v6-after__fold > summary svg { transition: none; } }

/* ---------- a code, wherever it shows (the page, beside it, HRC+) ----------
   Who it's for, the system's code chip with Copy (.v6-code, as on a perk card), and what it gives. Spans, not
   paragraphs: HRC+'s run card turns every paragraph in it into a small grey note. */
body.hrc-coded .v6-after__code { display: grid; justify-items: start; gap: 6px; min-width: 0; }
body.hrc-coded .v6-after__code-label { color: var(--app-ink-2, var(--grey)); font: var(--w-ui, 500) 13px/1.3 var(--font-sans); }
body.hrc-coded .v6-after__code .v6-code { max-width: 100%; }
body.hrc-coded .v6-after__code .v6-code code { min-width: 0; overflow-wrap: anywhere; }
/* v6.css gives buttons inside v6- blocks the font around them; Copy keeps the chip's own 13px, as on the perk cards. */
body.hrc-coded .v6-after__code .v6-code__copy { font: 500 13px/1 var(--font-sans); }
body.hrc-coded .v6-after__gives { color: var(--app-ink, var(--ink)); font: 400 14px/1.4 var(--font-sans); }
/* A code's price: what it's for, the usual price crossed out, then the deal. It is the shop's own value line and chip
   (v7-shop.css: .hrc-value-line, .hrc-value-strike, .hrc-value-chip, as a bundle's saving shows), kept to the code's
   measure. It also sits under the locked panel's title, so the saving shows before anyone registers. */
body.hrc-coded .v6-after__price.hrc-value-line { margin: 0; gap: 8px; }
body.hrc-coded .v6-after__price-for { color: var(--app-ink-2, var(--grey)); font: 400 14px/1.4 var(--font-sans); }
body.hrc-coded .v6-after__locked .v6-after__price { margin: 4px 0 2px; }

/* ---------- the runner's own code, in the card beside the page ---------- */
body.hrc-coded .v6-after-mine {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: var(--stack-block, 24px); padding: 16px;
  border: 1px solid var(--orange-ghost-line); border-radius: var(--radius-inner); background: var(--orange-tint);
}
body.hrc-coded .v6-after-mine__kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-type-aa); font: var(--w-ui) 13px/1.3 var(--font-sans); }
body.hrc-coded .v6-after-mine .v6-after__mark { width: 20px; height: 20px; background: var(--paper); }
body.hrc-coded .v6-after-mine .v6-after__mark svg { width: 12px; height: 12px; }
body.hrc-coded .v6-after-mine__title { color: var(--ink); font: var(--w-ui) 16px/1.35 var(--font-sans); }
body.hrc-coded .v6-after-mine__more { justify-self: center; }

/* ---------- the instructions popup (Enventor_Event_Extras::go_html) ----------
   The button out to the partner opens the steps first, in the browser's own popover, so they don't fill the page. It
   is the site's dialog made small: paper on the dialog's --overlay, the card radius, the round close (.v6-ico) at the
   top right, the dialog's rise (--dur-glyph on --ease-glyph), and on a phone a bottom sheet. Its body scrolls between
   a fixed head and a foot that keeps the code with Copy and the real link in reach. The reference is an "unlock with a
   code" modal (Linktree on Mobbin): picture and steps, then the code, then one primary. A browser without popovers
   shows it in place instead, as the steps were, and hides its button. Nothing here sets the popup's display until it
   is open: the browser's own rule hides it, and an author display would beat that. */
body.hrc-coded .v6-howto {
  margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-inner);
  background: var(--paper); color: var(--ink);
}
body.hrc-coded .v6-howto__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 18px 14px var(--pad-card, 26px); }
body.hrc-coded .v6-howto__heading { display: grid; gap: 4px; min-width: 0; padding-top: 6px; }
body.hrc-coded .v6-howto__brand { color: var(--grey); font: var(--w-ui) var(--fs-small)/1.3 var(--font-sans); }
body.hrc-coded .v6-howto__title { color: var(--ink); font: var(--w-title) var(--fs-h3)/1.25 var(--font-sans); letter-spacing: var(--ls-h3); }
body.hrc-coded .v6-howto__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px var(--pad-card, 26px) 22px; }
body.hrc-coded .v6-howto .v6-after__shot { max-width: none; }
body.hrc-coded .v6-howto__foot { display: grid; gap: 8px; padding: 16px var(--pad-card, 26px) 22px; border-top: 1px solid var(--line); }
body.hrc-coded .v6-howto__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.hrc-coded .v6-howto__code { display: grid; justify-items: start; gap: 4px; min-width: 0; }
body.hrc-coded .v6-howto__code-label { color: var(--grey); font: var(--w-ui, 500) 13px/1.3 var(--font-sans); }
body.hrc-coded .v6-howto .v6-code { max-width: 100%; }
body.hrc-coded .v6-howto .v6-code code { min-width: 0; overflow-wrap: anywhere; }
body.hrc-coded .v6-howto .v6-code__copy { font: 500 13px/1 var(--font-sans); }
body.hrc-coded .v6-howto__go { flex: 1 1 180px; justify-content: center; }
body.hrc-coded .v6-howto__note { color: var(--grey); font: 400 13px/1.45 var(--font-sans); }
body.hrc-coded .v6-howto:popover-open {
  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  width: min(520px, calc(100% - 32px)); height: fit-content; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); margin: auto;
  border: 0; border-radius: var(--radius-card);
  transform: none; opacity: 1;
  transition: transform var(--dur-glyph) var(--ease-glyph), opacity var(--dur-bloom-in) linear;
}
@starting-style { body.hrc-coded .v6-howto:popover-open { transform: translateY(200px); opacity: 0; } }
body.hrc-coded .v6-howto:popover-open .v6-howto__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.hrc-coded .v6-howto::backdrop { background: var(--overlay, rgba(231, 231, 231, .9)); }
html:has(.v6-howto:popover-open) { overflow: hidden; }
@supports not selector(:popover-open) {
  body.hrc-coded .v6-howto-open, body.hrc-coded .v6-howto__close { display: none !important; }
}
@media (max-width: 720px) {
  body.hrc-coded .v6-howto:popover-open {
    inset: auto 0 0; width: 100%; max-height: 92vh; max-height: 92dvh; margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  body.hrc-coded .v6-howto__head { padding: 16px 16px 12px 24px; }
  body.hrc-coded .v6-howto__body { padding: 4px 24px 20px; }
  body.hrc-coded .v6-howto__foot { padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { body.hrc-coded .v6-howto:popover-open { transition: none; } }

/* ---------- HRC+: a runner's offer on their own registration card (registration_box) ----------
   On HRC+'s app roles (light or ink), falling back to the site's tokens outside the app frame. Spans throughout, and
   the button's colours held by specificity, because the run card's own sheet styles its paragraphs and links. */
body.hrc-coded .plus-after {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; padding: 16px;
  border: 1px solid var(--app-tint-line, var(--orange-ghost-line)); border-radius: var(--radius-inner);
  background: var(--app-tint, var(--orange-tint)); color: var(--app-ink, var(--ink));
}
body.hrc-coded .plus-after__kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--app-type-on, var(--orange-type-aa)); font: 600 13px/1.3 var(--font-sans); }
body.hrc-coded .plus-after .v6-after__mark { width: 20px; height: 20px; background: var(--app-panel, var(--paper)); color: var(--app-type-on, var(--orange-type-aa)); }
body.hrc-coded .plus-after .v6-after__mark svg { width: 12px; height: 12px; }
body.hrc-coded .plus-after__title { color: var(--app-ink, var(--ink)); font: 600 17px/1.35 var(--font-sans); }
body.hrc-coded .plus-after__when { margin-top: -6px; color: var(--app-ink-2, var(--grey)); font: 400 14px/1.4 var(--font-sans); }
body.hrc-coded .plus-after .v6-after__steps li { color: var(--app-ink, var(--ink)); font-size: 14px; }
body.hrc-coded .plus-after .v6-after__steps li::before { border-color: var(--app-line, var(--line)); background: var(--app-panel, var(--paper)); color: var(--app-ink, var(--ink)); }
body.hrc-coded .plus-after__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* The button is a link, or a button when it opens the instructions popup: one look for both, held over the run card's
   own button style (v6-site.css styles every button in a registration card as Register). */
body.hrc-coded .plus-after .plus-after__btn {
  display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-action);
  background: var(--app-accent, var(--orange)); color: var(--app-on-accent, var(--paper)); font: 600 14px/1 var(--font-sans); text-decoration: none; cursor: pointer;
}
body.hrc-coded .plus-after .plus-after__btn:hover { background: var(--app-accent-press, var(--orange-press)); color: var(--app-on-accent, var(--paper)); }
body.hrc-coded .plus-after .plus-after__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
body.hrc-coded .plus-after a.plus-after__more { color: var(--app-ink, var(--ink)); font: 500 14px/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }
body.hrc-coded .plus-after a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* the code chip on HRC+'s roles (light or ink) */
body.hrc-coded .plus-after .v6-code { border-color: var(--app-line, var(--rule)); background: var(--app-panel, var(--paper)); }
body.hrc-coded .plus-after .v6-code code { background: var(--app-raised, var(--paper-hover)); color: var(--app-ink, var(--ink)); }
/* The run card styles every button as Register (v6-site.css); Copy stays the chip's quiet half. */
body.hrc-coded .plus-after .v6-code .v6-code__copy {
  display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 0; border-left: 1px solid var(--app-line, var(--rule)); border-radius: 0;
  background: transparent; color: var(--app-ink, var(--ink)); font: 500 13px/1 var(--font-sans);
}
body.hrc-coded .plus-after .v6-code .v6-code__copy:hover { border-color: var(--app-line, var(--rule)); background: var(--app-tint, var(--orange-tint)); color: var(--app-type-on, var(--orange-type-aa)); }
body.hrc-coded .plus-after .v6-code .v6-code__copy.is-copied { color: var(--success, #1E7F4F); }
/* the steps' picture on HRC+: a narrower frame on the app's line */
body.hrc-coded .plus-after .v6-after__shot { max-width: 360px; }
body.hrc-coded .plus-after .v6-after__shot-frame { border-color: var(--app-line, var(--line)); }
/* the price line on HRC+'s roles: the crossed-out price in the app's second ink, the chip in its accent */
body.hrc-coded .plus-after .hrc-value-strike { color: var(--app-ink-2, var(--grey)); }
body.hrc-coded .plus-after .hrc-value-chip { background: var(--app-accent, var(--orange)); color: var(--app-on-accent, #fff); }
/* the instructions popup on HRC+'s roles: the app's panel on its scrim, the perk sheet's title, and the close as the
   app's round arrow button (.plus-arrow), held over the run card's button style */
body.hrc-coded .plus-after .v6-howto { border-color: var(--app-line, var(--line)); background: var(--app-panel, var(--paper)); color: var(--app-ink, var(--ink)); }
body.hrc-coded .plus-after .v6-howto::backdrop { background: var(--app-scrim, rgba(11, 11, 12, .42)); }
body.hrc-coded .plus-after .v6-howto__brand, body.hrc-coded .plus-after .v6-howto__note, body.hrc-coded .plus-after .v6-howto__code-label { color: var(--app-ink-2, var(--grey)); }
body.hrc-coded .plus-after .v6-howto__title { color: var(--app-ink, var(--ink)); font: var(--w-title, 700) 18px/1.25 var(--font-sans); letter-spacing: 0; }
body.hrc-coded .plus-after .v6-howto__heading { padding-top: 4px; }
body.hrc-coded .plus-after .v6-howto__foot { border-top-color: var(--app-line, var(--line)); }
body.hrc-coded .plus-after .v6-howto .v6-after__shot { max-width: none; }
body.hrc-coded .plus-after .v6-howto__close {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--app-line, var(--line)); border-radius: var(--radius-dot); background: var(--app-panel, var(--paper)); color: var(--app-ink, var(--ink));
}
body.hrc-coded .plus-after .v6-howto__close:hover { border-color: var(--app-hover-line, var(--line)); background: var(--app-raised, var(--paper-hover)); color: var(--app-ink, var(--ink)); }

/* ---------- early access: the bar over a page seen early ---------- */
body.hrc-coded .v6-early-bar { background: var(--ink); color: var(--paper); }
body.hrc-coded .v6-early-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 12px; padding-bottom: 12px; }
body.hrc-coded .v6-early-bar__tag {
  padding: 3px 9px; border: 1px solid var(--line-ink); border-radius: var(--radius-chip); color: var(--paper);
  font: 600 12px/1.3 var(--font-sans);
}
body.hrc-coded .v6-early-bar__text { font: 500 14px/1.45 var(--font-sans); min-width: 0; }
body.hrc-coded .v6-early-bar__count { margin-left: auto; color: var(--grey-on-ink); font: 500 14px/1.45 var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------- early access: the gate ---------- */
body.hrc-coded .v6-gate__wrap { display: grid; place-items: center; min-height: 52vh; }
body.hrc-coded .v6-gate__card {
  display: grid; gap: var(--stack-tight, 12px); width: 100%; max-width: 520px; padding: var(--pad-card, 26px);
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
}
body.hrc-coded .v6-gate__kicker { margin: 0; color: var(--grey); font: 600 13px/1.4 var(--font-sans); }
body.hrc-coded .v6-gate__title { margin: 0; }
body.hrc-coded .v6-gate__when { margin: 0; color: var(--on-surface-2, var(--grey)); font: 400 16px/1.55 var(--font-sans); }
body.hrc-coded .v6-gate__when strong { color: var(--ink); font-weight: 600; }
body.hrc-coded .v6-gate__count { margin: 0; color: var(--ink); font: 600 22px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
body.hrc-coded .v6-gate__form { display: grid; gap: 8px; margin-top: 12px; padding-top: var(--stack-block, 24px); border-top: 1px solid var(--line); }
body.hrc-coded .v6-gate__label { color: var(--ink); font: 500 14px/1.4 var(--font-sans); }
body.hrc-coded .v6-gate__row { display: flex; flex-wrap: wrap; gap: 8px; }
body.hrc-coded .v6-gate__input {
  flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--grey-mark); border-radius: var(--radius-action); background: var(--paper); color: var(--ink);
  font: 400 16px/1.2 var(--font-sans);
}
body.hrc-coded .v6-gate__input:focus { outline: 2px solid var(--accent, var(--orange)); outline-offset: 1px; }
body.hrc-coded .v6-gate__error { margin: 0; color: var(--error); font: 400 14px/1.5 var(--font-sans); }

/* ---------- early access: a giveaway as HRC+ will show it ---------- */
body.hrc-coded .v6-early-perk {
  --app-panel: var(--paper);
  --app-raised: var(--paper-hover);
  --app-line: var(--line);
  --app-ink: var(--ink);
  --app-ink-2: var(--grey);
  --app-accent: var(--orange);
  --app-type-on: var(--orange-type-aa);
  --app-tint: var(--orange-tint);
  --app-tint-line: var(--orange-ghost-line);
  --app-shadow: 0 14px 34px rgba(11, 11, 12, .12);
}
body.hrc-coded .v6-early-perk__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--stack-group, 44px); align-items: start; }
body.hrc-coded .v6-early-perk__label { margin: 0 0 12px; color: var(--grey); font: 500 13px/1.4 var(--font-sans); }
body.hrc-coded .v6-early-perk__one { display: grid; grid-template-columns: minmax(0, 1fr); }
body.hrc-coded .v6-early-sheet { display: flex; flex-direction: column; overflow: hidden; max-width: 520px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); color: var(--ink); }
@media (max-width: 760px) {
  body.hrc-coded .v6-early-perk__grid { grid-template-columns: minmax(0, 1fr); gap: var(--stack-block, 24px); }
  body.hrc-coded .v6-early-bar__count { margin-left: 0; }
}