/* ══════════════════════ REGISTER PAGE ══════════════════════

   Lifted from claude/designs/"Old register page.css" and
   "Verify email & sms pop up.css", with three deliberate departures.

   1. THE DESIGN'S VARIABLES ARE SCOPED, NOT GLOBAL. The design declares
      --ink, --surface, --red and friends on :root. option5.css names
      everything --o5-*, so there is no collision today, but this file is
      loaded on one page and its palette has no business outliving it --
      the shared header and footer fragments render inside it. They hang
      off .o5-register instead, which is the section wrapper.

   2. The header, sign-in drawer and footer rules that shared the design
      file are dropped. Those are already in oh-overrides.css and the
      fragments that use them; a second copy here would be a second thing
      to change and a silent way for the two to disagree.

   3. SIX CODE CELLS, NOT FOUR. See the code-row block at the end.
*/

.rgv-overlay{position:fixed;inset:0;background:rgba(10,10,12,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:600;opacity:0;visibility:hidden;transition:opacity .2s}
.rgv-overlay.is-open{opacity:1;visibility:visible}
.rgv-overlay .vp{margin:0}

/* ── The register card ── */
    .o5-register {
      --bg: var(--o5-bg);
      --surface: var(--o5-surface);
      --surface-2: var(--o5-surface-2);
      --silver: #ecebe6;
      --soft-silver: #f0eee9;
      --ink: var(--o5-ink);
      --ink2: var(--o5-ink2);
      --ink3: var(--o5-ink3);
      /* Aliased to the site's tokens for the same reason: one definition, and
         a change to the skin reaches this page too. The values are already
         identical except --silver, which was a hair warmer than --o5-line. */
      --line: var(--o5-line);
      --green: #1f8a5b;
      --green-soft: #e9f4ee;
      --red: #d62133;
      --red-dark: #b91c2c;
      --accent: #ff6f3c;
      /* ── THE SITE'S STACK, NOT THE DESIGN FILE'S ──
         The design declares 'Plus Jakarta Sans', sans-serif. option5.css
         declares the same face with a real fallback chain. Identical while the
         webfont loads, and divergent the moment it does not -- a slow
         connection, a blocked Google Fonts, an offline first paint -- where the
         purchase page falls to the system UI face and this page fell to generic
         sans-serif. Invisible in normal testing, which is what makes it worth
         pinning. Aliased to --o5-display rather than copied, so the two cannot
         drift apart again. */
      --display: var(--o5-display);
      --mono: 'JetBrains Mono', ui-monospace, monospace;
    }
    .rg-wrap {
      flex: 1;
      width: 100%;
      max-width: 1020px;
      margin: 0 auto;
      padding: 40px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .rg-wrap > .rg-card { width: 100%; }

    /* Picker */
    .rg-picker {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      margin: 0 auto 22px;
    }
    .rg-picker-wrap { display: flex; justify-content: center; }
    .rg-picker-lbl {
      font-family: var(--mono);
      font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink3);
      padding: 0 8px 0 6px;
    }
    .rg-pick {
      padding: 6px 14px;
      border-radius: 999px;
      border: 0; background: transparent;
      font-family: var(--display);
      font-size: 12px; font-weight: 800;
      letter-spacing: -0.005em;
      color: var(--ink2);
      cursor: pointer;
    }
    .rg-pick:hover { color: var(--ink); }
    .rg-pick.is-on { background: var(--ink); color: #fff; }

    /* Card shell */
    .rg-card {
      max-width: 980px; margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 0;
      /* NO overflow:hidden -- and that one declaration was the whole bug.

         An absolutely positioned child cannot escape a clipping ancestor,
         whatever its z-index, so the phone panel was cut off at the card's
         bottom edge and showed a single row. The four dropdowns above it looked
         fine only because they sit high enough that their panels never reach
         that edge -- the fault was always there, the phone picker is simply the
         last field.

         The design carries the same card WITHOUT this line, and rounds the
         hero's own left corners instead (see .rg-hero). That is what makes the
         clip unnecessary: the only thing it was containing was the hero's
         square corner poking outside the card radius. */
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 22px;
    }
    .rg-hero {
      padding: 36px 32px;
      display: flex; flex-direction: column;
      justify-content: space-between;
      gap: 16px;
      transition: background .25s ease, color .25s ease;
      position: relative;
      overflow: hidden;
          /* The hero rounds its own left corners, so the card does not have to
         clip to hide them. Straight from the design; it is the counterpart to
         removing overflow:hidden above. */
      border-radius: 22px 0 0 22px;
}
    .rg-hero-top { display: flex; flex-direction: column; gap: 16px; }
    .rg-hero .eyebrow {
      font-family: var(--display);
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: color .25s ease;
    }
    .rg-hero h2 {
      font-family: var(--display);
      font-size: 30px; font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.05;
      margin: 0;
      transition: color .25s ease;
    }
    .rg-hero p {
      font-family: var(--display);
      font-size: 14px;
      line-height: 1.55;
      margin: 0;
      transition: color .25s ease;
    }
    .rg-hero ul {
      list-style: none; margin: 12px 0 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .rg-hero ul li {
      display: flex; align-items: flex-start; gap: 10px;
      font-family: var(--display);
      font-size: 13px;
      transition: color .25s ease;
    }
    .rg-hero ul li svg { flex: none; margin-top: 2px; transition: color .25s ease; }
    .rg-hero > * { position: relative; z-index: 1; }

    /* Mode variants */
    .rg-card[data-mode="dark"] .rg-hero { background: var(--ink); color: #fff; }
    .rg-card[data-mode="dark"] .rg-hero .eyebrow { color: var(--accent); }
    .rg-card[data-mode="dark"] .rg-hero h2 { color: #fff; }
    .rg-card[data-mode="dark"] .rg-hero p { color: rgba(255,255,255,0.7); }
    .rg-card[data-mode="dark"] .rg-hero ul li { color: rgba(255,255,255,0.85); }
    .rg-card[data-mode="dark"] .rg-hero ul li svg { color: var(--green); }

    .rg-card[data-mode="white"] .rg-hero {
      background: var(--surface);
      color: var(--ink);
      border-right: 1px solid var(--line);
    }
    .rg-card[data-mode="white"] .rg-hero .eyebrow { color: var(--red); }
    .rg-card[data-mode="white"] .rg-hero h2 { color: var(--ink); }
    .rg-card[data-mode="white"] .rg-hero p { color: var(--ink2); }
    .rg-card[data-mode="white"] .rg-hero ul li { color: var(--ink); }
    .rg-card[data-mode="white"] .rg-hero ul li svg { color: var(--green); }

    .rg-card[data-mode="red"] .rg-hero {
      background: var(--red); color: #fff;
    }
    .rg-card[data-mode="red"] .rg-hero::before {
      content: ""; position: absolute;
      width: 280px; height: 280px;
      right: -120px; top: -140px;
      background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    .rg-card[data-mode="red"] .rg-hero .eyebrow { color: rgba(255,255,255,0.9); }
    .rg-card[data-mode="red"] .rg-hero h2 { color: #fff; }
    .rg-card[data-mode="red"] .rg-hero p { color: rgba(255,255,255,0.85); }
    .rg-card[data-mode="red"] .rg-hero ul li { color: #fff; }
    .rg-card[data-mode="red"] .rg-hero ul li svg { color: #fff; }

    /* Form — matches Checkout · Buyer information vocabulary */
    .rg-form { padding: 36px 36px; background: var(--surface); }

    .rg-intro {
      font-family: var(--display);
      font-size: 14px;
      color: var(--ink2);
      line-height: 1.55;
      margin: 0 0 14px;
    }

    .rg-hero-foot {
      margin-top: auto;
      padding-top: 18px;
      font-family: var(--display);
      font-size: 13.5px;
      line-height: 1.55;
      transition: color .25s ease;
    }
    .rg-hero-foot a {
      font-weight: 800;
      text-decoration: none;
      color: inherit;
    }

    .rg-sso-list { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 4px; }
    .rg-sso {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      flex: 1; min-width: 0;
      padding: 11px 12px;
      border: 1px solid var(--o5-line);
      border-radius: 999px;
      background: var(--surface);
      font-family: var(--display);
      font-size: 12.5px; font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      text-decoration: none;
      transition: border-color .15s;
    }
    .rg-sso:hover { border-color: var(--ink); }
    .rg-sso .ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
    .lg-google {
      width: 16px; height: 16px;
      background: conic-gradient(from -45deg, #ea4335 0deg 90deg, #fbbc04 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg);
      border-radius: 50%;
      mask: radial-gradient(circle, transparent 26%, #000 27%) center / contain no-repeat;
      -webkit-mask: radial-gradient(circle, transparent 26%, #000 27%) center / contain no-repeat;
    }
    .lg-ig {
      width: 16px; height: 16px;
      border-radius: 5px;
      background: conic-gradient(from 240deg, #fdf497 0%, #fd5949 40%, #d6249f 60%, #285AEB 100%);
      position: relative;
    }
    .lg-ig::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; border: 1.4px solid #fff; }
    .lg-fb {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #1877f2;
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--display);
      font-size: 11px; font-weight: 800;
      line-height: 1;
    }
    .lg-fb::before { content: "f"; }
    .lg-apple svg { width: 14px; height: 16px; }

    .rg-or {
      font-family: var(--display);
      font-size: 14px;
      color: var(--ink2);
      line-height: 1.55;
      margin: 22px 0 18px;
      text-align: left;
    }

    /* ─── Buyer-info-style field atoms ─── */
    .rg-fields { display: grid; gap: 14px; }
    .rg-fields.two { grid-template-columns: 1fr 1fr; }
    .rg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
    .rg-ctl {
      display: flex; align-items: center; gap: 0;
      /* --o5-line and transparent, matching .co-ctl on the purchase page.
         --silver was a warmer grey, and an opaque white pill sits a shade
         lighter than the card it is on. */
      border: 1px solid var(--o5-line);
      border-radius: 999px;
      background: transparent;
      padding: 0;
      min-height: 46px;
      transition: border-color .15s;
    }
    .rg-ctl:focus-within { border-color: var(--ink); }
    .rg-ctl input,
    .rg-ctl select {
      flex: 1;
      border: 0; background: transparent;
      padding: 12px 18px;
      font-family: var(--display);
      font-size: 14px; font-weight: 600;
      color: var(--ink);
      outline: none;
      min-width: 0;
      width: 100%;
      appearance: none;
    }
    .rg-ctl input::placeholder { color: var(--ink3); font-weight: 500; }
    /* Suppress autofill blue highlight */
    .rg-ctl input:-webkit-autofill,
    .rg-ctl input:-webkit-autofill:hover,
    .rg-ctl input:-webkit-autofill:focus,
    .rg-ctl input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
      box-shadow: 0 0 0 1000px transparent inset !important;
      -webkit-text-fill-color: var(--ink) !important;
      caret-color: var(--ink);
      transition: background-color 9999s ease-in-out 0s;
    }
    .rg-hint {
      font-size: 11.5px;
      color: var(--ink3);
      padding: 0 18px;
      line-height: 1.3;
    }

    /* Email/phone with Verify pill */
    .rg-field-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
    .rg-verify {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 11px 22px;
      border-radius: 999px;
      border: 1px solid var(--o5-line);
      background: var(--silver);
      color: var(--ink);
      font-family: var(--display);
      font-size: 13px; font-weight: 500;
      letter-spacing: -0.005em;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      white-space: nowrap;
    }
    .rg-verify:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
    .rg-verify.is-verified {
      background: var(--green-soft);
      color: var(--green);
      border-color: var(--green-soft);
      pointer-events: none;
      padding: 11px 18px;
    }
    .rg-verify .verify-text { display: inline; }
    .rg-verify .verified-text { display: none; align-items: center; gap: 5px; }
    .rg-verify.is-verified .verify-text { display: none; }
    .rg-verify.is-verified .verified-text { display: inline-flex; }

    /* Phone field with country code */
    .rg-phone-ctl { display: grid; grid-template-columns: auto 1fr; gap: 0; padding: 0; }
    .rg-phone-cc {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0 14px 0 14px;
      border-right: 1px solid var(--o5-line);
      font-family: var(--display);
      font-size: 14px; font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      user-select: none;
    }
    .rg-phone-cc { border: 0; background: transparent; cursor: pointer; }
    .rg-phone-ctl { position: relative; }
    .rg-phone-ctl .rg-pop { top: calc(100% + 8px); left: 0; right: auto; width: 260px; }
    .rg-phone-ctl input {
      padding: 12px 18px;
    }

    /* Select trigger (Gender / Profession / Nationality / Country / City / DOB) */
    .rg-trigger {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      width: 100%;
      min-height: 46px;
      padding: 12px 18px;
      border: 1px solid var(--o5-line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      font-family: var(--display);
      font-size: 14px; font-weight: 700;
      cursor: pointer;
      text-align: left;
      transition: border-color .15s;
    }
    .rg-trigger:hover { border-color: var(--ink); }
    .rg-trigger .l {
      display: inline-flex; align-items: center; gap: 10px;
      min-width: 0; flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* ── .rg-label, NOT .label ── AND THIS IS A REAL BUG, NOT TIDYING.

       bootstrap.min.css is loaded by master on every page, and it defines a
       GLOBAL .label:

           .label { display:inline; padding:.2em .6em .3em; font-size:75%;
                    font-weight:700; color:#fff; ... }

       The design was drawn standalone, with no Bootstrap, so its .label was
       safe there and is not here. Two consequences, and the second is worse:

         placeholder  75% of the intended size with stray padding -- the rule
                      below wins on colour by specificity but not on anything
                      else, which is why it read as "missing" rather than wrong
         SELECTED     the JS removes is-placeholder, leaving class="label"
                      alone, so Bootstrap's color:#fff applied unopposed --
                      white text on a white control. Every value chosen from
                      every one of these dropdowns was invisible.

       Namespaced so nothing global can reach it. Both states are styled now;
       only the placeholder ever was. */
    .rg-trigger .rg-label { color: var(--ink); font-weight: 700; font-size: 14px; }
    .rg-trigger .rg-label.is-placeholder { color: var(--ink3); font-weight: 500; }
    .rg-trigger .flag { font-size: 16px; line-height: 1; flex: none; }
    .rg-trigger .rg-caret { color: var(--ink2); flex: none; transition: transform .18s; }
    .rg-trigger.is-open .rg-caret { transform: rotate(180deg); }
    .rg-trigger.is-open { border-color: var(--ink); }
    .rg-field { position: relative; z-index: 1; }
    /* BOTH TRIGGER SHAPES, and the second one is why the phone panel was still
       behind everything after the first fix. The four plain dropdowns open a
       .rg-trigger; the phone pill opens a .rg-phone-cc. This rule knew only the
       first, so .rg-field never left z-index 1 for the phone field -- and
       .rg-field is a stacking context, so the panel's z-index 500 could not
       clear the fields below it. What you see is the top sliver of the list
       above the next field: "only one country shows", and a panel that looks
       clipped and misaligned rather than behind. */
    .rg-field:has(.rg-trigger.is-open),
    .rg-field:has(.rg-phone-cc.is-open) { z-index: 40; }
    .rg-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 500; background: var(--surface); border: 1px solid var(--o5-line); border-radius: 16px; padding: 8px; box-shadow: 0 22px 44px -16px rgba(0,0,0,0.22), 0 4px 12px -4px rgba(0,0,0,0.05); max-height: 320px; display: flex; flex-direction: column; }
    .rg-pop[hidden] { display: none; }
    .rg-pop-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--o5-line); border-radius: 999px; margin-bottom: 6px; }
    .rg-pop-search svg { color: var(--ink3); flex: none; }
    .rg-pop-search input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink); }
    .rg-pop-search input::placeholder { color: var(--ink3); font-weight: 500; }
    .rg-pop-list { list-style: none; margin: 0; padding: 4px 2px; overflow-y: auto; max-height: 240px; }
    .rg-pop-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background .12s; }
    .rg-pop-list li:hover { background: var(--surface-2); }
    .rg-pop-list li.is-on { background: var(--ink); color: #fff; }
    .rg-pop-list li .flag { font-size: 15px; line-height: 1; }
    .rg-pop-list .empty { padding: 14px 12px; font-family: var(--display); font-size: 12.5px; color: var(--ink3); text-align: center; }
    .rg-pop-list .rg-pop-other { border-top: 1px solid var(--o5-line); margin-top: 4px; padding: 9px 12px 4px; cursor: default; display: flex; gap: 8px; align-items: center; }
    .rg-pop-list .rg-pop-other:hover { background: transparent; }
    .rg-pop-list .rg-pop-other input { flex: 1; border: 1px solid var(--o5-line); border-radius: 999px; padding: 9px 14px; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface-2); outline: none; }
    .rg-pop-list .rg-pop-other input::placeholder { color: var(--ink3); font-weight: 500; }
    .rg-pop-list .rg-pop-other input:focus { border-color: var(--ink); }
    .rg-pop-list .rg-pop-add { flex: none; border: 0; border-radius: 999px; padding: 9px 16px; background: var(--ink); color: #fff; font-family: var(--display); font-size: 12.5px; font-weight: 800; cursor: pointer; }
    .rg-pop-list .rg-pop-add:hover { background: #000; }
    .rg-field-caption { margin: -2px 0 0; padding: 0 18px; font-family: var(--display); font-size: 11.5px; color: var(--ink3); line-height: 1.3; }
    /* ── THE SAME RED PILL THE PURCHASE PAGE USES ──
       Was flat red text under the field, which read as a louder hint rather
       than as an error. .co-dupe-error's shape: soft red field, round mark,
       red line. Hints stay grey -- nothing here touches .rg-hint, and an error
       that recolours the advice next to it makes both harder to read. */
    .rg-field-err, .rg-form-error {
      display: none; align-items: center; gap: 10px;
      background: #fdecec; border-radius: 999px;
      padding: 12px 18px; margin: 2px 0 0;
    }
    .rg-field-err.is-on, .rg-form-error.is-on { display: flex; }
    .rg-field-err .de-mark, .rg-form-error .de-mark {
      width: 22px; height: 22px; border-radius: 50%;
      background: #fff; color: var(--red);
      display: inline-flex; align-items: center; justify-content: center;
      flex: none; font-family: var(--display); font-weight: 800; font-size: 13px;
    }
    .rg-field-err .de-line, .rg-form-error .de-line {
      flex: 1; font-family: var(--display); font-size: 12.5px; font-weight: 600;
      letter-spacing: -.005em; color: var(--red); line-height: 1.35;
    }
    .rg-ctl.is-error { border-color: var(--red); }

    /* Submit row + footer */
    .rg-check {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--display);
      font-size: 11px;
      line-height: 1.45;
      color: var(--ink);
      cursor: pointer;
      user-select: none;
    }
    .rg-check input { display: none; }
    .rg-check .track {
      width: 32px; height: 19px;
      border-radius: 999px;
      background: var(--silver);
      position: relative;
      transition: background .2s ease;
      flex: none;
    }
    .rg-check .track::after {
      content: "";
      position: absolute;
      top: 2px; left: 2px;
      width: 15px; height: 15px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      transition: transform .2s ease;
    }
    .rg-check input:checked + .track { background: var(--green); }
    .rg-check input:checked + .track::after { transform: translateX(13px); }
    .rg-check a { color: var(--red); font-weight: 700; text-decoration: none; }

    .rg-submit {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 32px;
      background: var(--red);
      color: #fff;
      border: 0;
      border-radius: 999px;
      font-family: var(--display);
      font-size: 14.5px; font-weight: 800;
      cursor: pointer;
      box-shadow: 0 14px 28px -14px rgba(214,33,51,0.5);
      transition: background .15s;
    }
    .rg-submit:hover { background: var(--red-dark); }

    /* ─── Congratulations modal ─── */
    .rg-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(20,20,20,0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9000;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    .rg-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
    .rg-modal {
      position: fixed;
      left: 50%; top: 50%;
      transform: translate(-50%, -45%) scale(0.92);
      width: 380px; max-width: calc(100vw - 32px);
      z-index: 9100;
      background: #fff;
      border-radius: 24px;
      padding: 48px 28px 32px;
      text-align: center;
      box-shadow: 0 40px 80px -16px rgba(0,0,0,0.45);
      opacity: 0;
      pointer-events: none;
      transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
      overflow: hidden;
    }
    .rg-modal.is-open {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .rg-modal-emoji {
      width: 96px; height: 96px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--red) 0%, var(--accent) 100%);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 48px;
      margin: 0 auto 22px;
      animation: rg-pop .6s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes rg-pop {
      0% { transform: scale(0); }
      60% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    .rg-modal h2 {
      font-family: var(--display);
      font-size: 24px; font-weight: 800;
      letter-spacing: -0.022em;
      color: var(--ink);
      margin: 0 0 12px;
    }
    .rg-modal p {
      font-family: var(--display);
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink2);
      margin: 0 0 28px;
      max-width: 100%;
    }
    .rg-modal-actions {
      display: flex; flex-direction: column-reverse;
      gap: 10px;
    }
    .rg-modal-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      padding: 14px 24px;
      border-radius: 999px;
      border: 1px solid var(--o5-line);
      background: #fff;
      color: var(--ink);
      font-family: var(--display);
      font-size: 14px; font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      transition: background .15s, border-color .15s, color .15s, transform .15s;
    }
    .rg-modal-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
    .rg-modal-btn.is-primary {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      box-shadow: 0 14px 28px -14px rgba(214,33,51,0.5);
    }
    .rg-modal-btn.is-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

    /* Confetti */
    .rg-confetti {
      position: fixed;
      pointer-events: none;
      z-index: 9200;
      inset: 0;
      overflow: hidden;
    }
    .rg-confetti span {
      position: absolute;
      top: -20px;
      width: 10px; height: 14px;
      opacity: 0.95;
      animation: rg-confetti-fall linear forwards;
      will-change: transform;
    }
    @keyframes rg-confetti-fall {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
      100% { transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(var(--rot, 720deg)); opacity: 0.9; }
    }

    .rg-submit-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-top: 26px;
      padding-bottom: 6px;
    }
    .rg-consents {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      min-width: 0;
    }
    .rg-foot {
      font-family: var(--display);
      font-size: 13.5px;
      color: var(--ink2);
      text-align: left;
      margin-top: 12px;
    }
    .rg-foot a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ── The verification pop-up ──

   Straight from the design, which already writes in --o5-* variables, so
   it needs no palette adaptation. The demo page's own scaffolding
   (.vep-wrap, .vep-stage, .vp-group -- the four-states-side-by-side
   gallery) is not here: the real page shows one card, in one state, in
   the .rgv-overlay above. */
.vp{width:380px;max-width:100%;background:var(--o5-surface,#fff);border-radius:24px;padding:28px 28px 26px;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 60px -16px rgba(0,0,0,0.35)}
.vp::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#d62133,#ff6f3c);border-radius:24px 24px 0 0}
.vp .timer{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--o5-surface-2);color:var(--o5-ink2);font-family:var(--o5-display);font-size:11px;font-weight:700}
.vp h2{font-family:var(--o5-display);font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--o5-ink);margin:14px 0 10px}
.vp .vp-lead{font-family:var(--o5-display);font-size:13.5px;line-height:1.5;color:var(--o5-ink2);margin:0 0 20px}
.vp .vp-lead .target{color:var(--o5-red,#d62133);font-weight:800;display:block;margin-top:2px}
.vp .code-row{display:flex;justify-content:center;gap:8px;margin:0 0 20px}
.vp .code-cell{width:48px;height:56px;border-radius:12px;border:1.5px solid var(--o5-line);background:var(--o5-surface-2);text-align:center;font-family:var(--o5-display);font-size:22px;font-weight:800;color:var(--o5-ink);transition:border-color .15s,transform .15s}
.vp .code-cell:focus{outline:none;border-color:var(--o5-red,#d62133);transform:scale(1.03)}
.vp .code-cell.is-filled{border-color:var(--o5-ink)}
.vp .vp-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:13px 18px;border-radius:999px;border:0;background:var(--o5-red,#d62133);color:#fff;font-family:var(--o5-display);font-weight:800;font-size:13.5px;cursor:pointer;box-shadow:0 14px 28px -14px rgba(214,33,51,0.5);transition:background .15s}
.vp .vp-btn:hover{background:#b91c2c}
.vp .resend{display:block;margin-top:12px;font-family:var(--o5-display);font-size:12.5px;color:var(--o5-ink2)}
.vp .resend a{color:var(--o5-red,#d62133);font-weight:800;text-decoration:none}
.vp .resent-toast{display:none;align-items:center;gap:6px;justify-content:center;padding:9px 14px;margin:0 0 18px;background:#e9f4ee;border:1px solid #1f8a5b33;border-radius:999px;color:#1f8a5b;font-family:var(--o5-display);font-size:12px;font-weight:700}
.vp.is-resent .resent-toast{display:inline-flex}
.vp.is-resent .timer{background:#e9f4ee;color:#1f8a5b}
.vp .resend .countdown{font-family:var(--o5-mono,monospace);font-size:11px;color:var(--o5-ink3);font-weight:700;margin-left:4px}
.vp.is-error .code-cell{border-color:var(--o5-red,#d62133);background:#fdecee}
.vp.is-error .timer{background:#fceaec;color:var(--o5-red,#d62133)}
.vp .error-msg{display:none}
.vp.is-error .error-msg{display:flex;align-items:center;gap:6px;justify-content:center;font-family:var(--o5-display);font-size:12.5px;font-weight:700;color:var(--o5-red,#d62133);margin:0 0 16px}
.vp.is-success .vp-lead,.vp.is-success h2:not(.h-success),.vp.is-success .code-row,.vp.is-success .vp-btn,.vp.is-success .resend,.vp.is-success .timer,.vp.is-success .error-msg{display:none}
.vp .h-success,.vp .p-success{display:none}
.vp.is-success .h-success{display:block;font-family:var(--o5-display);font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--o5-ink);margin:14px 0 10px}
.vp.is-success .p-success{display:block;font-family:var(--o5-display);font-size:13.5px;color:var(--o5-ink2);line-height:1.55;margin:0}
.vp .confetti-host{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px}
.vp .confetti-host span{position:absolute;top:-20px;width:8px;height:12px;opacity:.95;animation:vp-confetti-fall linear forwards}
@keyframes vp-confetti-fall{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}100%{transform:translate3d(var(--dx,0px),540px,0) rotate(var(--rot,720deg));opacity:.85}}

/* ── SIX CELLS, NOT FOUR ──

   The design draws a 4-digit code at a fixed 48px per cell. Ours is 6
   digits, and 6 x 48 + 5 x 8 of gap is 328px inside a card that offers
   324px between its paddings -- so a fixed width overflows before it is
   ever seen on a phone.

   Fluid instead, capped at the design's 48px so the desktop card is the
   width it was drawn at, and floored by nothing: at 360px of viewport
   the six cells settle around 37px each, which still takes a comfortable
   tap. flex-basis 0 with min-width 0 is what stops the inputs claiming
   their default intrinsic size and pushing the row wide. */
.vp .code-cell {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
}
@media (max-width: 420px) {
  .vp .code-row { gap: 6px; }
}

/* The overlay's card wants no outer margin -- the design's gallery gave
   each state one so the four sat apart. */
.rgv-overlay .vp { margin: 0; width: 380px; }

/* ── Date-of-birth picker, and the password fields ──
   From the updated design file (claude/designs), which added both. Written in
   the design's own variables, which are scoped to .o5-register at the top of
   this file. */
.rg-dob-pop { padding: 14px; width: 280px; }
.rg-dob-head { display: flex; gap: 8px; margin-bottom: 10px; }
.rg-dob-head select {
  flex: 1; padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--line); font-family: var(--display);
  font-size: 12.5px; background: var(--surface); color: var(--ink);
}
.rg-dob-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rg-dob-grid .dow { font-size: 11px; color: var(--ink3); text-align: center; font-weight: 700; padding: 4px 0; }
.rg-dob-day { border: 0; background: transparent; border-radius: 8px; padding: 7px 0; font-family: var(--display); font-size: 12.5px; color: var(--ink); cursor: pointer; }
.rg-dob-day:hover { background: var(--silver); }
.rg-dob-day.is-sel { background: var(--red); color: #fff; font-weight: 700; }
.rg-ctl-password { background: var(--silver); }

/* ── Show / hide password ──
   The purchase page's .co-eye, namespaced. The password control needs to be a
   positioning context for it, which .rg-ctl was not: it is a flex row, so the
   button would have taken part in the layout and pushed the input narrow. */
.rg-ctl-password { position: relative; }
.rg-ctl-password input { padding-right: 46px; }
.rg-eye {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  background: transparent; border: 0; padding: 0;
  color: var(--ink2); cursor: pointer; display: inline-flex;
}
.rg-eye:hover { color: var(--ink); }
/* The slash is the "hidden" state, so the default eye reads as "show me". */
.rg-eye.is-on .rg-eye-slash { display: none; }