/* Gift registry page. Leans on the tokens and components in main.css —
   only what's specific to the catalog, cart and checkout lives here.
   The uneven corner radii echo .modal-card: everything printed here should
   feel drawn by hand rather than stamped. */

/* ---------- header ---------- */
.rg-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.rg-header-right { display: flex; align-items: center; gap: 1rem; }

/* Currency switcher only — .lang-toggle and .theme-toggle keep the styles
   they already have in main.css so both pages match. */
.rg-cur {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.rg-cur button {
  border: 0; background: transparent;
  color: var(--muted);
  font-family: var(--body); font-size: .7rem; letter-spacing: .06em;
  padding: .3rem .6rem; cursor: pointer;
  transition: background .2s, color .2s;
}
.rg-cur button.active { background: var(--green); color: var(--paper); }

/* ---------- layout ---------- */
.rg-main {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
}
/* The cart is pinned to the bottom on mobile; keep it off the footer. */
.rg-main ~ .footer { padding-bottom: 6rem; }
.rg-intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.rg-intro h1 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: var(--green);
  letter-spacing: .01em;
  margin: 0 0 1rem;
}
.rg-status { color: var(--muted); text-align: center; padding: 4rem 0; }

/* ---------- catalog ---------- */
.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.rg-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 22px 8px 20px 10px;
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.rg-card:hover { border-color: var(--sage-deep); transform: translateY(-2px); }
.rg-thumb { aspect-ratio: 4 / 3; background: var(--tint); }
.rg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.rg-body h3 {
  font-family: var(--display); font-weight: 500; font-size: 1.02rem;
  line-height: 1.25; color: var(--ink); margin: 0;
}
.rg-desc { font-size: .82rem; line-height: 1.5; color: var(--muted); margin: 0; }
.rg-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
  font-size: .88rem; color: var(--ink); margin-top: auto; padding-top: .4rem;
}
.rg-price strong { font-family: var(--display); font-size: 1.05rem; }
.rg-tag {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bloom); border: 1px solid var(--bloom);
  border-radius: 999px; padding: .12rem .5rem;
}
.rg-card .btn { align-self: flex-start; margin-top: .3rem; }

/* ---------- cart ---------- */
.rg-cart {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--sage-deep);
  transform: translateY(calc(100% - 4.2rem));
  transition: transform .3s ease;
}
.rg-cart.open { transform: translateY(0); }
.rg-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; cursor: pointer;
  height: 4.2rem; box-sizing: border-box;
}
.rg-cart-title {
  font-family: var(--display); font-style: italic; color: var(--green); font-size: 1rem;
}
.rg-cart-toggle {
  border: 0; background: transparent; color: var(--muted);
  font-size: .9rem; cursor: pointer; transition: transform .3s;
}
.rg-cart.open .rg-cart-toggle { transform: rotate(180deg); }
.rg-cart-body { max-height: 42vh; overflow-y: auto; padding: 0 1.2rem; }
.rg-cart-foot {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.rg-totals { display: flex; flex-direction: column; flex: 1; }
.rg-totals span:first-child { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#rg-total { font-family: var(--display); font-size: 1.3rem; color: var(--green); }
#rg-pay { white-space: nowrap; }
.rg-empty { color: var(--muted); font-size: .88rem; padding: 1.5rem 0; text-align: center; }

.rg-row {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  gap: .8rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.rg-row:last-child { border-bottom: 0; }
.rg-row img { width: 44px; height: 44px; border-radius: 10px 4px 9px 5px; object-fit: cover; }
.rg-rowinfo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rg-rowname {
  font-family: var(--display); font-size: .9rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rg-rowinfo label { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.rg-rowinfo input {
  width: 5.2rem; font-family: var(--body); font-size: .8rem;
  padding: .2rem .4rem; border: 1px solid var(--rule); border-radius: 7px 3px 6px 4px;
  background: var(--paper); color: var(--ink);
}
.rg-sub { font-family: var(--display); font-size: .92rem; color: var(--ink); }
.rg-x { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; }

@media (min-width: 860px) {
  .rg-cart {
    left: auto; right: 2rem; bottom: 2rem;
    width: 22rem;
    border: 1px solid var(--sage-deep);
    border-radius: 24px 10px 22px 12px;
    transform: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .12);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .rg-cart.has-items { opacity: 1; pointer-events: auto; }
  .rg-cart-toggle { display: none; }
  .rg-cart-head { cursor: default; }
  .rg-main ~ .footer { padding-bottom: 2rem; }
}

/* ---------- checkout ---------- */
.rg-modal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20, 19, 16, .6);
  /* flex-start + margin:auto on the card, NOT align-items:center. With centering,
     a card taller than the overlay has its top pushed out of the scroll range and
     you can never reach it — that's what made "Volver" unclickable after scrolling. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rg-modal-card {
  position: relative;
  margin: auto;               /* centres when it fits, scrolls when it doesn't */
  width: 100%; max-width: 28rem;
  background: var(--paper);
  border: 1px solid var(--sage-deep);
  border-radius: 26px 10px 22px 12px;
  padding: 2rem 1.7rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .3);
}
/* Real header bar: back on the left, close on the right, stuck to the top of
   the card so both stay reachable however far down you scroll. Replaces an
   earlier float + negative-margin arrangement where the two buttons overlapped. */
.rg-modal-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 1.6rem;
  margin: -2rem -1.7rem 1rem;
  padding: 1.1rem 1.7rem .6rem;
  background: var(--paper);
  border-radius: 26px 10px 0 0;
}
.rg-back {
  border: 0; background: transparent; color: var(--muted);
  font-family: var(--body); font-size: .8rem; cursor: pointer;
  padding: .4rem .6rem .4rem 0;   /* a finger-sized target, not just the glyphs */
}
.rg-back:hover { color: var(--green); }
.rg-back[hidden] { display: none; }
.rg-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  padding: .2rem .4rem; margin-left: auto;
}
.rg-close:hover { color: var(--green); }
.rg-modal-card h3 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--green); font-size: 1.3rem; margin: 0 0 1.2rem;
}

.rg-methods { display: flex; flex-direction: column; gap: .7rem; }
.rg-method {
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 16px 6px 14px 8px;
  padding: .9rem 1.1rem; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.rg-method:hover { border-color: var(--green); background: var(--tint); }
.rg-method strong { font-family: var(--display); font-size: 1rem; color: var(--ink); }
.rg-method span { font-size: .76rem; color: var(--muted); }

/* Countries fold away so a guest only opens the one that applies to them. */
.rg-or {
  display: flex; align-items: center; gap: .8rem;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 1.4rem 0 1rem;
}
.rg-or::before, .rg-or::after {
  content: ''; flex: 1; height: 1px; background: var(--rule);
}
.rg-country { border-bottom: 1px solid var(--rule); }
.rg-country:last-of-type { border-bottom: 0; }
.rg-country summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1rem; color: var(--ink);
}
.rg-country summary::-webkit-details-marker { display: none; }
.rg-country summary::after {
  content: '›'; margin-left: auto; color: var(--muted);
  transition: transform .2s; font-size: 1.1rem;
}
.rg-country[open] summary::after { transform: rotate(90deg); }
.rg-country summary:hover { color: var(--green); }
.rg-flag { font-size: 1.1rem; line-height: 1; }
.rg-country .rg-methods { padding: .2rem .2rem 1rem; }

.rg-amount {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--tint); border-radius: 14px 5px 12px 6px;
  padding: .9rem 1.1rem; margin-bottom: 1.1rem;
}
.rg-amount span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rg-amount strong { font-family: var(--display); font-size: 1.35rem; color: var(--green); }

.rg-qr {
  display: block; width: 100%; max-width: 14rem; margin: 0 auto 1rem;
  border-radius: 14px 5px 12px 6px;
}
.rg-acct { margin-bottom: 1rem; }
.rg-acct h4 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--green); font-size: .95rem; margin: 0 0 .4rem;
}
.rg-detail {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin: .3rem 0; font-size: .8rem;
}
.rg-detail > span { color: var(--muted); white-space: nowrap; }
.rg-copy {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: transparent; padding: .1rem .3rem;
  font-family: var(--body); font-size: .82rem; color: var(--ink);
  cursor: pointer; border-bottom: 1px dashed var(--sage-deep);
  text-align: right; word-break: break-all;
  transition: color .2s;
}
.rg-copy:hover { color: var(--green); }
.rg-copy.is-copied { color: var(--green); border-bottom-color: var(--green); }
.rg-copyicon { color: var(--muted); font-size: .8rem; flex-shrink: 0; }
.rg-copy:hover .rg-copyicon { color: var(--green); }
.rg-plain { font-size: .82rem; color: var(--ink); text-align: right; }

/* Copy confirmation. Fixed to the viewport so it reads the same whether the
   guest is at the top or bottom of a long transfer screen. */
.rg-toast {
  position: fixed; left: 50%; bottom: 2rem;
  transform: translate(-50%, 1rem);
  background: var(--green); color: var(--paper);
  font-family: var(--display); font-style: italic; font-size: .9rem;
  padding: .55rem 1.3rem; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 130; margin: 0;
}
.rg-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .rg-toast { transition: opacity .2s; transform: translate(-50%, 0); }
}

.rg-after { margin: 1.4rem 0 .7rem; }
.rg-muted { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.rg-form { display: flex; flex-direction: column; gap: .6rem; }
.rg-form input[type="text"], .rg-form input:not([type]), .rg-form textarea {
  font-family: var(--body); font-size: .9rem;
  padding: .6rem .8rem;
  border: 1px solid var(--rule); border-radius: 10px 4px 9px 5px;
  background: var(--card); color: var(--ink);
  width: 100%; box-sizing: border-box;
}
.rg-form textarea { resize: vertical; }
.rg-file { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--muted); }
.rg-file input { font-size: .76rem; }
.rg-form .btn { margin-top: .4rem; }

.rg-warn-box {
  background: var(--tint); border-left: 3px solid var(--bloom);
  padding: .7rem .9rem; border-radius: 0 8px 8px 0;
  font-size: .82rem; line-height: 1.5; color: var(--ink); margin: 0 0 1rem;
}
.rg-thanks {
  font-family: var(--display); font-style: italic; font-size: 1.15rem;
  color: var(--green); text-align: center; padding: 2rem 0;
}

/* Thank-you bloom: flowers open around the whole edge of the card and STAY.
   Deliberately not the hero's `hero-bloom`, which fades back out at 75% and
   loops — here they arrive and remain, like a bouquet being set down.
   No overflow:hidden and no clipping: left/top are the flower's CENTRE, so 0%
   and 100% land on the border and each one straddles it instead of being sliced.
   The modal's 1.2rem padding leaves room for the half that hangs outside. */
.rg-bloom { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rg-bloom span {
  position: absolute;
  background: center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2) rotate(-12deg);
  animation: rg-bloom-in .7s cubic-bezier(.34, 1.56, .64, 1) var(--delay) forwards;
}
@keyframes rg-bloom-in {
  to { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); }
}
/* The message sits above the flowers. */
.rg-thanks { position: relative; z-index: 1; }
/* On the thank-you the header bar has nothing left to hold (no Volver), and its
   opaque background was hiding the whole top row of flowers. */
.rg-modal-card.is-thanks .rg-modal-head { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .rg-bloom span { animation-duration: .01ms; }
}

.rg-bloom span:nth-child(1) { left: 6%; top: 0%; width: 26px; height: 26px; --delay: 0.05s; --rot: 17deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D97E3E'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(2) { left: 22%; top: 0%; width: 16px; height: 16px; --delay: 0.1s; --rot: 14deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D9A6BB'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(3) { left: 40%; top: 0%; width: 22px; height: 22px; --delay: 0.27s; --rot: 11deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%238D97C2'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(4) { left: 58%; top: 0%; width: 14px; height: 14px; --delay: 0.2s; --rot: 8deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23C1503F'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(5) { left: 76%; top: 0%; width: 24px; height: 24px; --delay: 0.25s; --rot: 5deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D9A6BB'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(6) { left: 93%; top: 0%; width: 18px; height: 18px; --delay: 0.42s; --rot: 2deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D97E3E'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(7) { left: 100%; top: 16%; width: 20px; height: 20px; --delay: 0.35s; --rot: -1deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%238D97C2'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(8) { left: 100%; top: 36%; width: 14px; height: 14px; --delay: 0.4s; --rot: -4deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23C1503F'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(9) { left: 100%; top: 56%; width: 24px; height: 24px; --delay: 0.57s; --rot: -7deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D97E3E'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(10) { left: 100%; top: 76%; width: 16px; height: 16px; --delay: 0.5s; --rot: -10deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D9A6BB'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(11) { left: 100%; top: 93%; width: 22px; height: 22px; --delay: 0.55s; --rot: -13deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%238D97C2'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(12) { left: 84%; top: 100%; width: 18px; height: 18px; --delay: 0.72s; --rot: -16deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23C1503F'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(13) { left: 66%; top: 100%; width: 24px; height: 24px; --delay: 0.65s; --rot: -19deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D97E3E'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(14) { left: 48%; top: 100%; width: 14px; height: 14px; --delay: 0.7s; --rot: 18deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D9A6BB'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(15) { left: 30%; top: 100%; width: 20px; height: 20px; --delay: 0.87s; --rot: 15deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%238D97C2'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(16) { left: 12%; top: 100%; width: 16px; height: 16px; --delay: 0.8s; --rot: 12deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23C1503F'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(17) { left: 0%; top: 84%; width: 22px; height: 22px; --delay: 0.85s; --rot: 9deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D9A6BB'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(18) { left: 0%; top: 64%; width: 14px; height: 14px; --delay: 1.02s; --rot: 6deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23D97E3E'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(19) { left: 0%; top: 44%; width: 20px; height: 20px; --delay: 0.95s; --rot: 3deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23C1503F'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }
.rg-bloom span:nth-child(20) { left: 0%; top: 22%; width: 16px; height: 16px; --delay: 1.0s; --rot: 0deg; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%238D97C2'%3E%3Ccircle cx='6' cy='2.6' r='2.1'/%3E%3Ccircle cx='9.2' cy='4.9' r='2.1'/%3E%3Ccircle cx='8' cy='8.8' r='2.1'/%3E%3Ccircle cx='4' cy='8.8' r='2.1'/%3E%3Ccircle cx='2.8' cy='4.9' r='2.1'/%3E%3C/g%3E%3Ccircle cx='6' cy='5.8' r='1.6' fill='%23E8DFAF'/%3E%3C/svg%3E"); }

/* The hand-off link only appears once the warning has had time to be read. */
#rg-cardstate { margin: 0 0 1.5rem; }
#rg-cardgo { margin: 0; }
.rg-cardbtn { display: inline-block; animation: rg-cardbtn-in .35s ease-out; }
@keyframes rg-cardbtn-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rg-cardbtn { animation: none; } }

/* This page is a detour off the one-pager, so the way back has to be obvious.
   The monogram alone reads as decoration — on the home page it only scrolls up. */
.rg-home { display: flex; align-items: center; gap: .4rem; text-decoration: none; }
.rg-home-arrow, .rg-home-label {
  font-family: var(--display); font-style: italic;
  font-size: .85rem; color: var(--muted);
  transition: color .2s;
}
.rg-home:hover .rg-home-arrow, .rg-home:hover .rg-home-label { color: var(--green); }
@media (max-width: 560px) {
  /* The words would push the currency/language/theme toggles off a 390px screen,
     but the arrow has to stay: without it the monogram reads as decoration and
     there's no visible way back at all. */
  .rg-home-label { display: none; }
}