/* ==========================================================================
   THE REGISTRAR: the Certifyd marketing design system (Phase C, 2026-10-03)
   Spec: docs/superpowers/specs/2026-10-03-marketing-redesign-the-registrar-design.md

   The site is meant to feel like a finely made official document: certificate paper, navy ink,
   hairline rules, statute-style section numbers (§), and one amber seal. Amber is used for seals
   and fills only, never for text (it fails 4.5:1 on paper).

   Layout of this file
     1. Tokens
     2. Chrome shared by EVERY marketing page (navbar, footer, language toggle, cookie note)
     3. Page base (.rg on <body>): paper, grain, hairline frame, typography, buttons, links
     4. Components: section marker, ledger, panels, stamps, credential, verify box, seal
     5. Home page sections
     6. Inner-page patterns (page head, prose, tables, FAQ, code, closing)
     7. Legacy class families re-skinned (np-*, hv-*) so older pages share the look
     8. Motion + reduced motion

   Page-family styles (pricing ledger, FAQ, developers, clients, maker, gallery, step rows, sample documents)
   live in /css/registrar-pages.css so the home page and the plain pages do not download them.

   Every colour pair used for text or icons was measured against WCAG AA (4.5:1 text, 3:1 icons):
   see the table in the spec. Never add amber text.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  --rg-paper: #FBF8F1;      /* certificate stock: the page */
  --rg-paper-2: #F3EEE2;    /* alternate band, quiet panels */
  --rg-paper-3: #EAE3D2;    /* pressed / hover on paper-2 */
  --rg-card: #FFFDF8;       /* the credential itself: slightly whiter than the page */
  --rg-ink: #0B1B33;        /* text, dark band, primary button */
  --rg-ink-2: #2B3952;      /* body copy */
  --rg-mute: #566178;       /* secondary text (5.9:1 on paper, 4.9:1 on paper-3) */
  --rg-rule: #D9D2C3;       /* decorative hairlines only (1.4:1, never the only cue) */
  --rg-rule-ui: #8C8472;    /* input borders, outlines that must be seen (3.5:1) */
  --rg-blue: #0A4F94;       /* links, primary actions (7.7:1) */
  --rg-blue-hover: #073B70;
  --rg-seal: #E8952F;       /* FILL ONLY: seals, foil tabs, the single highlight */
  --rg-seal-deep: #B8741A;
  --rg-verified: #0F6B40;   /* verified state text (6.3:1 on paper) */
  --rg-revoked: #B42318;
  --rg-expired: #8A5A00;
  --rg-on-ink: #F3EEE2;     /* text on the dark band (14.9:1) */
  --rg-on-ink-mute: #B4BDCC;/* secondary text on the dark band (9.1:1) */

  --rg-display: 'Newsreader Display', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --rg-sans: 'Hanken Grotesk', 'Hanken Fallback', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --rg-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --rg-gutter: clamp(20px, 5vw, 72px);
  --rg-max: 1320px;
  --rg-r: 3px;              /* crisp, document-like corners: nothing is a pill */
  --rg-ease: cubic-bezier(.2, .8, .2, 1);
  --rg-spring: cubic-bezier(.2, .9, .3, 1.25);
  --rg-shadow-flat: 7px 7px 0 var(--rg-paper-3);
  --rg-shadow-paper: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 2px rgba(11,27,51,.10), 0 14px 30px -14px rgba(11,27,51,.28), 0 38px 70px -34px rgba(11,27,51,.38);
}

/* ------------------------------------------- 2. Chrome shared by every marketing page */
.cd-skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--rg-r);
  background: var(--rg-ink); color: #fff; font: 600 14px var(--rg-sans); text-decoration: none;
}
.cd-skip-link:focus { top: 12px; color: #fff; }
.cd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rg-blue, #0A4F94); outline-offset: 3px; border-radius: 2px;
}
main:focus { outline: none; }

.cd-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,248,241,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rg-rule, #D9D2C3);
  font-family: var(--rg-sans, 'Segoe UI', system-ui, sans-serif);
}
.cd-nav__inner { max-width: var(--rg-max, 1320px); margin: 0 auto; height: 68px; padding: 0 var(--rg-gutter, 32px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cd-nav__logo { flex: none; display: block; }
.cd-nav__logo img { display: block; height: 26px; width: auto; }
.cd-nav__links { display: flex; gap: 2px; }
.cd-nav__link {
  border: 0; background: transparent; height: 36px; padding: 0 11px; border-radius: 2px; font: 500 14px var(--rg-sans, sans-serif);
  text-decoration: none; display: flex; align-items: center; color: var(--rg-ink-2, #2B3952); cursor: pointer; white-space: nowrap; position: relative;
  transition: color 150ms ease;
}
.cd-nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--rg-ease, ease); }
.cd-nav__link:hover { color: var(--rg-ink, #0B1B33); }
.cd-nav__link:hover::after, .cd-nav__link.is-active::after { transform: scaleX(1); }
.cd-nav__link.is-active { color: var(--rg-ink, #0B1B33); font-weight: 700; }
.cd-nav__actions { display: flex; align-items: center; gap: 10px; }
.cd-langgroup { display: flex; border: 1px solid var(--rg-rule-ui, #8C8472); border-radius: var(--rg-r, 3px); overflow: hidden; flex: none; }
.cd-langbtn { border: 0; padding: 6px 9px; font: 700 11px/1 var(--rg-sans, sans-serif); letter-spacing: .06em; cursor: pointer; background: transparent; color: var(--rg-ink-2, #2B3952); min-width: 34px; }
.cd-langbtn.is-active { background: var(--rg-ink, #0B1B33); color: #fff; }
.cd-nav__signin { height: 38px; padding: 0 10px; font: 600 14px var(--rg-sans, sans-serif); color: var(--rg-ink, #0B1B33); text-decoration: none; display: flex; align-items: center; white-space: nowrap; }
.cd-nav__cta {
  height: 40px; padding: 0 18px; border-radius: var(--rg-r, 3px); background: var(--rg-ink, #0B1B33); color: #fff; font: 600 14px var(--rg-sans, sans-serif);
  text-decoration: none; display: flex; align-items: center; white-space: nowrap; transition: background 150ms ease, transform 200ms var(--rg-ease, ease);
}
.cd-nav__cta:hover { background: var(--rg-blue, #0A4F94); color: #fff; }
.cd-nav__burger { display: none; border: 0; background: transparent; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; color: var(--rg-ink, #0B1B33); flex: none; padding: 0; }
.cd-nav__mobile { display: none; flex-direction: column; gap: 2px; padding: 8px var(--rg-gutter, 20px) 18px; border-top: 1px solid var(--rg-rule, #D9D2C3); background: var(--rg-paper, #FBF8F1); }
.cd-nav__mobile a.cd-nav__link, .cd-nav__mobile button.cd-nav__link { justify-content: flex-start; width: 100%; height: 46px; font-size: 16px; }
.cd-nav__mobile .cd-nav__link::after { display: none; }
.cd-nav__mobile-lang { margin: 8px 0; width: max-content; }
.cd-nav__mobile .cd-nav__cta { justify-content: center; margin-top: 8px; }
@media (max-width: 1180px) {
  .cd-nav__links { display: none; }
  .cd-nav__actions .cd-langgroup, .cd-nav__actions .cd-nav__signin { display: none; }
  .cd-nav__burger { display: flex; }
  .cd-nav__mobile.is-open { display: flex; }
  /* The header keeps its "Start free" button at every width (audit: the mobile header had none). */
  .cd-nav__mobile > .cd-nav__cta { display: none; }
  .cd-nav__inner { height: 60px; }
  .cd-nav__cta { height: 38px; padding: 0 14px; }
}

/* Footer: a colophon on paper, not a dark slab (the page's one dark band is reserved for the verification story). */
.cd-foot { background: var(--rg-paper-2, #F3EEE2); border-top: 1px solid var(--rg-rule, #D9D2C3); color: var(--rg-ink-2, #2B3952); font-family: var(--rg-sans, sans-serif); }
.cd-foot__inner { max-width: var(--rg-max, 1320px); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--rg-gutter, 32px) 32px; }
.cd-foot-grid { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 1fr)); gap: 32px; }
.cd-foot__brand { display: flex; flex-direction: column; gap: 12px; }
.cd-foot__brand img { display: block; height: 26px; width: auto; }
.cd-foot__tag { font-size: 14px; line-height: 1.6; max-width: 280px; color: var(--rg-mute, #566178); }
.cd-foot__col { display: flex; flex-direction: column; gap: 9px; }
.cd-foot__h { font: 700 12px/1 var(--rg-sans, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--rg-ink, #0B1B33); margin: 0 0 6px; }
.cd-foot-link { font-size: 14px; color: var(--rg-ink-2, #2B3952); text-decoration: none; }
.cd-foot-link:hover { color: var(--rg-blue, #0A4F94); text-decoration: underline; text-underline-offset: 3px; }
.cd-foot-bottom { max-width: var(--rg-max, 1320px); margin: 0 auto; padding: 18px var(--rg-gutter, 32px) 28px; border-top: 1px solid var(--rg-rule, #D9D2C3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--rg-mute, #566178); }
.cd-foot__rule { height: 6px; background: repeating-linear-gradient(90deg, var(--rg-ink, #0B1B33) 0 2px, transparent 2px 6px); opacity: .12; }
@media (max-width: 760px) { .cd-foot-grid { grid-template-columns: 1fr 1fr; } .cd-foot__brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .cd-foot-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- 3. Page base (body.rg) */
body.rg {
  margin: 0; background: var(--rg-paper); color: var(--rg-ink-2);
  font-family: var(--rg-sans); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
  overflow-x: hidden;
}
body.rg *, body.rg *::before, body.rg *::after { box-sizing: border-box; }

/* Paper grain: a small tiling noise tile, drawn once and never animated (cheap to composite). */
body.rg::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The hairline page frame with registration marks at the corners: the whole page is a document. */
body.rg::before {
  content: ""; position: fixed; inset: 12px; z-index: 40; pointer-events: none; border: 1px solid var(--rg-rule); display: none;
}
@media (min-width: 1100px) { body.rg::before { display: block; } }

.rg h1, .rg h2, .rg h3, .rg h4 { font-family: var(--rg-display); font-weight: 400; color: var(--rg-ink); margin: 0; text-wrap: balance; }
.rg p { margin: 0; }
a:where(.rg *) { color: var(--rg-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:where(.rg *):hover { color: var(--rg-blue-hover); }
.rg em { font-style: italic; }
.rg strong { font-weight: 700; color: var(--rg-ink); }

.rg-wrap { width: 100%; max-width: var(--rg-max); margin-inline: auto; padding-inline: var(--rg-gutter); }
.rg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); }
.rg-section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.rg-section--tight { padding-block: clamp(40px, 6vw, 80px); }
.rg-band { background: var(--rg-paper-2); border-block: 1px solid var(--rg-rule); }

/* Type scale: display 52-104, h2 34-60, h3 22-26, body 17, small 14, eyebrow 12. */
.rg-display { font-size: clamp(44px, 6.2vw, 92px); line-height: .96; letter-spacing: -.032em; font-optical-sizing: auto; }
.rg-display em { letter-spacing: -.02em; }
.rg-h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -.028em; }
.rg-h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.024em; }
.rg-h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.012em; }
.rg-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--rg-ink-2); max-width: 36em; text-wrap: pretty; }
.rg-lede em, .rg-pull { font-family: var(--rg-display); font-style: italic; color: var(--rg-ink); }
.rg-small { font-size: 14px; line-height: 1.55; color: var(--rg-mute); }
.rg-mono { font-family: var(--rg-mono); font-size: .86em; letter-spacing: 0; color: var(--rg-ink); }
.rg-num { font-variant-numeric: tabular-nums lining-nums; }

/* Section marker: "§ 02  Verify" with a hairline that runs to the edge, like a statute heading. */
.rg-sec { display: flex; align-items: center; gap: 14px; font: 600 12px/1 var(--rg-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rg-mute); margin: 0 0 clamp(20px, 3vw, 36px); }
.rg-sec__n { font-family: var(--rg-display); font-style: italic; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--rg-ink); font-weight: 400; }
.rg-sec::after { content: ""; flex: 1; height: 1px; background: var(--rg-rule); }
.rg-band--ink .rg-sec, .rg-ink .rg-sec { color: var(--rg-on-ink-mute); }
.rg-ink .rg-sec__n { color: var(--rg-on-ink); }
.rg-ink .rg-sec::after { background: rgba(243,238,226,.2); }

/* Buttons: crisp rectangles. Primary is ink (the document's own colour); the hover turns registry blue.
   [data-magnetic] buttons are pulled toward the pointer by marketing.js (a spring, not a tween). */
.rg-btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: var(--rg-r);
  font: 600 16px/1 var(--rg-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid var(--rg-ink);
  background: var(--rg-ink); color: #fff !important; position: relative; transform: translate(var(--mx), var(--my));
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 300ms var(--rg-ease);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -10px rgba(11,27,51,.6);
}
.rg-btn:hover { background: var(--rg-blue); border-color: var(--rg-blue); color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 28px -12px rgba(10,79,148,.65); }
.rg-btn:active { transform: translate(var(--mx), calc(var(--my) + 1px)); }
.rg-btn--ghost { background: transparent; color: var(--rg-ink) !important; border-color: var(--rg-ink); box-shadow: none; }
.rg-btn--ghost:hover { background: var(--rg-ink); color: #fff !important; border-color: var(--rg-ink); box-shadow: none; }
.rg-btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.rg-btn--on-ink { background: var(--rg-paper); color: var(--rg-ink) !important; border-color: var(--rg-paper); box-shadow: none; }
.rg-btn--on-ink:hover { background: var(--rg-seal); border-color: var(--rg-seal); color: var(--rg-ink) !important; }
.rg-btn__arrow { transition: transform 240ms var(--rg-ease); }
.rg-btn:hover .rg-btn__arrow { transform: translateX(4px); }
.rg-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rg-link { font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 150ms; }
.rg-link:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------- 4. Components */

/* Panels and ledgers */
.rg-panel { background: var(--rg-card); border: 1px solid var(--rg-rule); border-radius: var(--rg-r); padding: clamp(20px, 2.4vw, 32px); }
.rg-ledger { border-top: 2px solid var(--rg-ink); margin: 0; padding: 0; list-style: none; }
.rg-ledger > li, .rg-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rg-rule); }
.rg-rule { height: 1px; background: var(--rg-rule); border: 0; margin: 0; }

/* Status stamps: Valid / Expired / Revoked, set like a rubber stamp (rotated, double border). */
.rg-stamp { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--rg-sans); letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border: 2px solid currentColor; border-radius: 2px; outline: 1px solid currentColor; outline-offset: 2px; transform: rotate(-3deg); }
.rg-stamp--valid { color: var(--rg-verified); }
.rg-stamp--expired { color: var(--rg-expired); }
.rg-stamp--revoked { color: var(--rg-revoked); }
.rg-ink .rg-stamp--valid { color: #6FD3A2; } .rg-ink .rg-stamp--expired { color: #F0C060; } .rg-ink .rg-stamp--revoked { color: #FF9C94; }

/* The seal (wax / foil): scalloped amber disc. Stamps in when scrolled into view. */
.rg-seal { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(120,70,10,.35)); }
.rg-seal-wrap { position: relative; width: clamp(84px, 10vw, 128px); aspect-ratio: 1; }
.rg-js .rg-seal-wrap:not(.is-stamped) { opacity: 0; transform: scale(1.5) rotate(-14deg); }
.rg-seal-wrap.is-stamped { animation: rg-stamp 640ms var(--rg-spring) both; }
@keyframes rg-stamp {
  0% { opacity: 0; transform: scale(1.55) rotate(-14deg); filter: blur(3px); }
  55% { opacity: 1; transform: scale(.93) rotate(2.5deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

/* Reveal on scroll (only when JS is on, so no-JS visitors always see content). */
.rg-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--rg-ease), transform 700ms var(--rg-ease); transition-delay: var(--d, 0ms); }
.rg-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ 5. Home page */
.rg-hero { position: relative; overflow: hidden; padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 112px); isolation: isolate; }
/* Security-print pattern: two sets of concentric hairlines whose interference (moire) reads as
   guilloche engraving. Zero image bytes. The second set drifts a few pixels with the pointer. */
.rg-hero__print { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(60% 75% at 74% 42%, #000 0, transparent 74%); mask-image: radial-gradient(60% 75% at 74% 42%, #000 0, transparent 74%); }
.rg-hero__print::before, .rg-hero__print::after { content: ""; position: absolute; inset: -12%; }
.rg-hero__print::before { background: repeating-radial-gradient(circle at 72% 44%, transparent 0 6px, rgba(11,27,51,.2) 6px 6.8px); }
.rg-hero__print::after { background: repeating-radial-gradient(circle at 80% 50%, transparent 0 7px, rgba(10,79,148,.17) 7px 7.8px); transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 500ms var(--rg-ease); }

.rg-hero__grid { row-gap: 40px; align-items: center; }
.rg-hero__copy { grid-column: 1 / span 6; position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.rg-hero__copy .rg-sec { margin-bottom: 0; }
.rg-hero__title { max-width: 9.5em; }
.rg-hero__title em { color: var(--rg-blue); }
.rg-hero__note { font-size: 14px; color: var(--rg-mute); display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.rg-hero__note .rg-mono { font-size: 13px; }
.rg-hero__desk { grid-column: 7 / span 6; position: relative; z-index: 1; padding-block: 24px 8px; }

/* The credential: HTML and CSS, so it is sharp at any size, translatable and free to load.
   It scales with its own width (container query units), so it never needs per-breakpoint tuning. */
.rg-cert { container-type: inline-size; position: relative; perspective: 1600px; width: 100%; max-width: 620px; margin-inline: auto; transform: rotate(-2.2deg); transition: transform 600ms var(--rg-ease); }
.rg-cert:hover { transform: rotate(-.6deg) translateY(-3px); }
.rg-cert__inner { position: relative; aspect-ratio: 1.42; transform-style: preserve-3d; transform: rotateY(var(--flip, 0deg)); transition: transform 760ms var(--rg-ease); }
html[lang="es"] .rg-cert { --flip: 180deg; }
html[lang="en"] .rg-cert.is-flipped { --flip: 180deg; }
html[lang="es"] .rg-cert.is-flipped { --flip: 360deg; }
.rg-cert__face {
  position: absolute; inset: 0; background: var(--rg-card); border-radius: 2px; box-shadow: var(--rg-shadow-paper);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 6.5cqw 7cqw; display: flex; flex-direction: column; text-align: center; color: var(--rg-ink);
}
.rg-cert__face--es { transform: rotateY(180deg); }
/* Double hairline border and corner rosettes, the way a printed diploma is framed. */
.rg-cert__face::before { content: ""; position: absolute; inset: 2.6cqw; border: 1px solid var(--rg-ink); opacity: .55; pointer-events: none; }
.rg-cert__face::after { content: ""; position: absolute; inset: 3.4cqw; border: 1px solid var(--rg-ink); opacity: .22; pointer-events: none; }
.rg-cert__rosette { position: absolute; width: 17cqw; aspect-ratio: 1; pointer-events: none; opacity: .5; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 .5cqw, rgba(11,27,51,.45) .5cqw .62cqw); -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, transparent 70%); mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, transparent 70%); }
.rg-cert__rosette--tl { top: 1cqw; left: 1cqw; --cx: 0%; --cy: 0%; } .rg-cert__rosette--br { bottom: 1cqw; right: 1cqw; --cx: 100%; --cy: 100%; }
.rg-cert__issuer { height: 3.6cqw; width: auto; align-self: center; opacity: .85; margin-bottom: 1.6cqw; }
.rg-cert__kicker { font: 600 2cqw/1 var(--rg-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--rg-mute); }
.rg-cert__title { font-family: var(--rg-display); font-size: 4.6cqw; line-height: 1.05; margin-top: 1.4cqw; letter-spacing: -.01em; }
.rg-cert__label { font-size: 2.5cqw; color: var(--rg-mute); margin-top: 2.4cqw; }
.rg-cert__name { font-family: var(--rg-display); font-style: italic; font-size: 7.6cqw; line-height: 1.08; margin-top: .6cqw; letter-spacing: -.01em; }
.rg-cert__course { font: 700 3cqw/1.25 var(--rg-sans); margin-top: .8cqw; color: var(--rg-ink); }
.rg-cert__foot > span:first-child { padding-left: 9cqw; }
.rg-cert__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 3cqw; }
.rg-cert__issued { font-size: 2.2cqw; color: var(--rg-mute); display: block; }
.rg-cert__id { font: 400 2.4cqw/1.2 var(--rg-mono); color: var(--rg-ink); letter-spacing: .02em; display: block; margin-top: .6cqw; }
.rg-cert__qr { width: 11cqw; height: 11cqw; flex: none; background: #fff; padding: .8cqw; border: 1px solid var(--rg-rule); }
.rg-cert__qr img { display: block; width: 100%; height: 100%; }
.rg-cert__sig { font-family: var(--rg-display); font-style: italic; font-size: 3cqw; color: var(--rg-ink); border-bottom: 1px solid var(--rg-ink); padding: 0 2cqw .4cqw 0; display: inline-block; }
/* The seal sits across the lower-left edge so it overlaps the card like a stuck-on foil. */
.rg-cert .rg-seal-wrap { position: absolute; width: 17cqw; left: -4cqw; bottom: -4cqw; z-index: 3; }

/* Hover callouts: each part of the credential explains itself. Pure CSS; works on tap and with keyboard. */
.rg-pin { position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1px solid var(--rg-ink); background: var(--rg-paper); color: var(--rg-ink); font: 600 13px/1 var(--rg-mono); display: grid; place-items: center; cursor: help; padding: 0; transition: background 200ms, color 200ms, transform 300ms var(--rg-spring); }
.rg-pin::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--rg-ink); opacity: .25; animation: rg-pulse 2.8s ease-out infinite; }
.rg-pin:hover, .rg-pin:focus-visible { background: var(--rg-ink); color: #fff; transform: scale(1.12); }
.rg-pin__tip { position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, 6px); width: max-content; max-width: 230px; background: var(--rg-ink); color: var(--rg-on-ink); font: 400 12.5px/1.45 var(--rg-mono); padding: 10px 12px; border-radius: 2px; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms, transform 240ms var(--rg-ease), visibility 180ms; z-index: 6; }
.rg-pin__tip::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; background: var(--rg-ink); transform: translateX(-50%) rotate(45deg); }
.rg-pin:hover .rg-pin__tip, .rg-pin:focus-visible .rg-pin__tip, .rg-pin:focus .rg-pin__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.rg-pin--end .rg-pin__tip { left: auto; right: -6px; transform: translate(0, 6px); }
.rg-pin--end .rg-pin__tip::before { left: auto; right: 14px; transform: rotate(45deg); }
.rg-pin--end:hover .rg-pin__tip, .rg-pin--end:focus-visible .rg-pin__tip, .rg-pin--end:focus .rg-pin__tip { transform: translate(0, 0); }
.rg-pin--up .rg-pin__tip { top: auto; bottom: calc(100% + 12px); }
.rg-pin--up .rg-pin__tip::before { top: auto; bottom: -5px; }
@keyframes rg-pulse { 0% { transform: scale(.8); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }

/* Verify box: the signature interaction. It overlaps the bottom of the credential. */
.rg-verify { position: relative; z-index: 5; margin: -1% 4% 0 8%; background: var(--rg-card); border: 1px solid var(--rg-ink); border-radius: var(--rg-r); padding: 14px 14px 14px 18px; box-shadow: var(--rg-shadow-paper); }
.rg-verify__label { display: block; font: 700 11px/1 var(--rg-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rg-mute); margin-bottom: 8px; }
.rg-verify__row { display: flex; gap: 10px; }
.rg-verify__input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--rg-rule-ui); border-radius: var(--rg-r); background: #fff; font: 400 16px var(--rg-mono); color: var(--rg-ink); letter-spacing: .03em; text-transform: uppercase; }
.rg-verify__input:focus { border-color: var(--rg-blue); outline: 2px solid var(--rg-blue); outline-offset: 1px; }
.rg-verify__go { height: 46px; padding: 0 20px; border-radius: var(--rg-r); border: 1px solid var(--rg-ink); background: var(--rg-ink); color: #fff; font: 600 15px var(--rg-sans); cursor: pointer; transition: background 160ms; white-space: nowrap; }
.rg-verify__go:hover { background: var(--rg-blue); border-color: var(--rg-blue); }
.rg-verify__go[aria-busy="true"] { opacity: .65; cursor: progress; }
.rg-verify__hint { margin-top: 8px; font-size: 13px; color: var(--rg-mute); }
.rg-verify__hint a { font-weight: 600; }
/* The verdict slides out from behind the verify box (grid rows 0fr -> 1fr animates height without JS measuring). */
.rg-verdict { display: grid; grid-template-rows: 0fr; margin: 0 7% 0 11%; position: relative; z-index: 2; transition: grid-template-rows 520ms var(--rg-ease); }
.rg-verdict.is-open { grid-template-rows: 1fr; }
.rg-verdict__clip { overflow: hidden; min-height: 0; }
.rg-verdict__body { background: var(--rg-paper-2); border: 1px solid var(--rg-rule); border-top: 0; padding: 18px 18px 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
.rg-verdict__mark { width: 56px; height: 56px; }
.rg-verdict__state { font: 700 12px/1 var(--rg-sans); letter-spacing: .18em; text-transform: uppercase; }
.rg-verdict[data-state="valid"] .rg-verdict__state { color: var(--rg-verified); }
.rg-verdict[data-state="notfound"] .rg-verdict__state, .rg-verdict[data-state="error"] .rg-verdict__state, .rg-verdict[data-state="revoked"] .rg-verdict__state { color: var(--rg-revoked); }
.rg-verdict[data-state="expired"] .rg-verdict__state { color: var(--rg-expired); }
/* No seal for a failed check: a seal means "in the register". */
.rg-verdict[data-state="notfound"] .rg-verdict__body, .rg-verdict[data-state="error"] .rg-verdict__body { grid-template-columns: minmax(0, 1fr); }
.rg-verdict[data-state="notfound"] .rg-verdict__mark, .rg-verdict[data-state="error"] .rg-verdict__mark { display: none; }
.rg-verdict__state[hidden] { display: none; }
.rg-verdict__who { font-family: var(--rg-display); font-size: 24px; line-height: 1.1; color: var(--rg-ink); margin-top: 6px; }
.rg-verdict__what { font-size: 14px; color: var(--rg-ink-2); margin-top: 4px; }
.rg-verdict__meta { font: 400 12.5px/1.5 var(--rg-mono); color: var(--rg-mute); margin-top: 8px; word-break: break-all; }
.rg-verdict__more { font-size: 14px; font-weight: 600; margin-top: 8px; display: inline-block; }
.rg-verdict [hidden] { display: none !important; }
.rg-verdict__hash span { display: inline-block; }

/* Proof strip: issuers, single row, monochrome ink. */
.rg-proof { padding-block: 28px; }
.rg-proof__inner { display: flex; align-items: center; gap: 20px 56px; flex-wrap: wrap; justify-content: space-between; }
.rg-proof__label { font: 600 12px/1.4 var(--rg-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rg-mute); margin: 0; }
.rg-proof__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(32px, 6vw, 80px); margin: 0; padding: 0; list-style: none; }
.rg-proof__row img { display: block; height: 30px; width: auto; filter: grayscale(1) contrast(1.3); opacity: .72; transition: filter 240ms, opacity 240ms; mix-blend-mode: multiply; }
.rg-proof__row li:hover img, .rg-proof__row li:focus-within img { filter: none; opacity: 1; }
.rg-proof__line { font: 400 13px/1.4 var(--rg-mono); color: var(--rg-mute); margin: 14px 0 0; }

/* § 01 What it is: one large credential spread, two supporting artefacts, text in the margin. */
.rg-what { row-gap: 40px; align-items: start; }
.rg-what__lead { grid-column: 1 / span 5; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.rg-what__list { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--rg-ink); }
.rg-what__item { padding: 28px 0 30px; border-bottom: 1px solid var(--rg-rule); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 18px; }
.rg-what__n { font-family: var(--rg-display); font-style: italic; font-size: 30px; line-height: 1; color: var(--rg-ink); }
.rg-what__item h3 { font-size: clamp(26px, 2.6vw, 34px); }
.rg-what__item p { grid-column: 2; font-size: 16px; max-width: 34em; margin-top: 6px; }
.rg-what__item .rg-small { grid-column: 2; margin-top: 8px; }

/* § 02 Horizontal scroll storytelling. Without JS (or on narrow screens, or with reduced motion) the three
   panels are an ordinary vertical sequence; marketing.js adds .rg-hscroll to pin the section and slide the track. */
.rg-story__head { margin-bottom: clamp(28px, 4vw, 56px); }
.rg-story__head h2 { max-width: 16em; }
.rg-story__track { display: grid; gap: clamp(28px, 4vw, 48px); max-width: var(--rg-max); margin-inline: auto; padding-inline: var(--rg-gutter); }
.rg-story__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-block: 8px; border-top: 1px solid var(--rg-rule); padding-top: clamp(20px, 3vw, 36px); }
.rg-story__step { font-family: var(--rg-display); font-style: italic; font-size: clamp(72px, 9vw, 132px); line-height: .8; color: var(--rg-ink); letter-spacing: -.04em; }
.rg-story__panel h3 { font-size: clamp(28px, 3vw, 40px); margin: 14px 0 12px; }
.rg-story__panel p { max-width: 28em; }
.rg-story__art { position: relative; }
.rg-story__bar { display: none; }
@media (max-width: 859px) { .rg-story__panel { grid-template-columns: 1fr; } }
@media (min-width: 860px) {
  .rg-hscroll .rg-story { height: 320vh; padding: 0; }
  .rg-hscroll .rg-story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 68px; }
  .rg-hscroll .rg-story__head { margin-bottom: clamp(20px, 3vh, 40px); }
  .rg-hscroll .rg-story__track { display: flex; width: max-content; gap: clamp(40px, 6vw, 96px); padding-inline: var(--rg-gutter); max-width: none; margin-inline: 0; transform: translate3d(calc(var(--travel, 0px) * var(--p, 0) * -1), 0, 0); will-change: transform; }
  .rg-hscroll .rg-story__panel { width: min(80vw, 1060px); flex: none; border-top: 0; padding-top: 0; border-left: 1px solid var(--rg-rule); padding-left: clamp(24px, 3vw, 48px); }
  .rg-hscroll .rg-story__bar { display: block; height: 1px; background: var(--rg-rule); margin: clamp(20px, 3vh, 40px) var(--rg-gutter) 0; position: relative; }
  .rg-hscroll .rg-story__bar span { position: absolute; left: 0; top: -1px; height: 3px; background: var(--rg-ink); width: calc(var(--p, 0) * 100%); }
}
/* The small artefacts drawn in each story panel */
.rg-csv { background: var(--rg-card); border: 1px solid var(--rg-ink); border-radius: var(--rg-r); font: 400 14px/1.5 var(--rg-mono); box-shadow: var(--rg-shadow-flat); overflow: hidden; }
.rg-csv__bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--rg-paper-2); border-bottom: 1px solid var(--rg-rule); font: 600 12px var(--rg-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rg-mute); }
.rg-csv table { width: 100%; border-collapse: collapse; }
.rg-csv th, .rg-csv td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rg-rule); white-space: nowrap; }
.rg-csv th { font-weight: 400; color: var(--rg-mute); background: var(--rg-paper); }
.rg-csv td:first-child, .rg-csv th:first-child { color: var(--rg-mute); width: 36px; }
.rg-csv tr:last-child td { border-bottom: 0; }
.rg-csv__ok { color: var(--rg-verified); font-family: var(--rg-sans); font-weight: 600; font-size: 13px; }
.rg-merge { display: grid; gap: 14px; }
.rg-merge__doc { background: var(--rg-card); border: 1px solid var(--rg-ink); box-shadow: var(--rg-shadow-flat); padding: 22px 26px; text-align: center; display: grid; gap: 6px; }
.rg-merge__doc .rg-merge__t { font-family: var(--rg-display); font-size: 22px; color: var(--rg-ink); }
.rg-field { display: inline-block; font: 400 15px/1 var(--rg-mono); background: color-mix(in srgb, var(--rg-blue) 10%, var(--rg-card)); color: var(--rg-blue); border: 1px dashed var(--rg-blue); padding: 7px 10px; border-radius: 2px; justify-self: center; }
.rg-merge__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-mail { background: var(--rg-card); border: 1px solid var(--rg-ink); border-radius: var(--rg-r); box-shadow: var(--rg-shadow-flat); }
.rg-mail__head { padding: 12px 16px; border-bottom: 1px solid var(--rg-rule); font-size: 13px; color: var(--rg-mute); display: grid; gap: 2px; }
.rg-mail__head strong { color: var(--rg-ink); font-size: 15px; }
.rg-mail__body { padding: 16px; display: grid; gap: 12px; font-size: 15px; }
.rg-mail__link { font: 400 13px var(--rg-mono); color: var(--rg-blue); word-break: break-all; }

/* § 03 Expanding bento: tiles in two rows; the tile you hover or focus grows and opens its detail. */
.rg-bento { display: grid; gap: 14px; }
.rg-bento__row { display: flex; gap: 14px; min-height: 250px; }
.rg-tile { flex: var(--g, 1) 1 0; min-width: 0; background: var(--rg-card); border: 1px solid var(--rg-rule); border-radius: var(--rg-r); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: flex-grow 640ms var(--rg-ease), background 300ms, border-color 300ms, box-shadow 400ms var(--rg-ease); outline-offset: -3px; }
.rg-tile::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 5px, rgba(11,27,51,.1) 5px 5.8px); transition: transform 700ms var(--rg-ease); }
.rg-tile__n { font: 600 12px/1 var(--rg-sans); letter-spacing: .16em; color: var(--rg-mute); }
.rg-tile h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; max-width: 12em; }
.rg-tile p { font-size: 15.5px; line-height: 1.55; }
.rg-tile__more { font-size: 14.5px; line-height: 1.55; color: var(--rg-ink-2); border-top: 1px solid var(--rg-rule); padding-top: 12px; margin-top: auto; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 400ms ease 120ms, max-height 640ms var(--rg-ease); }
@media (hover: hover) and (min-width: 960px) {
  .rg-tile:hover, .rg-tile:focus-within { flex-grow: calc(var(--g, 1) * 2.1); background: var(--rg-paper-2); border-color: var(--rg-ink); box-shadow: 0 24px 40px -28px rgba(11,27,51,.5); }
  .rg-tile:hover::before, .rg-tile:focus-within::before { transform: scale(1.5) rotate(30deg); }
  .rg-tile:hover .rg-tile__more, .rg-tile:focus-within .rg-tile__more { opacity: 1; max-height: 140px; }
}
@media not all and ((hover: hover) and (min-width: 960px)) { .rg-tile__more { opacity: 1; max-height: none; } }
@media (max-width: 959px) { .rg-bento__row { flex-direction: column; min-height: 0; } .rg-tile { flex: none; } }

/* The one dark band: the verification story. */
.rg-ink { background: var(--rg-ink); color: var(--rg-on-ink); position: relative; overflow: hidden; }
.rg-ink h2, .rg-ink h3 { color: var(--rg-on-ink); }
.rg-ink p { color: var(--rg-on-ink-mute); }
.rg-ink a { color: #9EC5F0; }
.rg-ink::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(243,238,226,.04) 14px 15px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.rg-ink .rg-wrap { position: relative; }
.rg-states { row-gap: 40px; align-items: center; }
.rg-states__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 22px; }
.rg-states__list { grid-column: 7 / span 6; display: grid; gap: 0; border-top: 1px solid rgba(243,238,226,.25); }
.rg-state { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(243,238,226,.25); align-items: center; }
.rg-state p { font-size: 15.5px; }
.rg-state .rg-stamp { justify-self: start; }

/* Closing: signature, seal and the action, instead of a repeated coloured banner. */
.rg-close { padding-block: clamp(72px, 10vw, 144px); position: relative; overflow: hidden; }
.rg-close__inner { row-gap: 40px; align-items: end; }
.rg-close__copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.rg-close__copy .rg-sec { margin-bottom: 0; }
.rg-close__sign { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; position: relative; padding-bottom: 6px; }
.rg-close__sign .rg-seal-wrap { position: absolute; right: -10px; bottom: 34px; width: 112px; z-index: 0; }
.rg-close__name { position: relative; z-index: 1; font-family: var(--rg-display); font-style: italic; font-size: clamp(44px, 5vw, 68px); line-height: 1; color: var(--rg-ink); transform: rotate(-4deg); margin: 0 0 -6px 14px; letter-spacing: -.02em; }
.rg-close__line { position: relative; z-index: 1; width: 100%; height: 1px; background: var(--rg-ink); }
.rg-close__cap { font: 600 11px/1.4 var(--rg-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rg-mute); display: flex; justify-content: space-between; width: 100%; gap: 12px; }

/* ------------------------------------------------- 6. Inner-page patterns */
.rg-pagehead { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 56px); position: relative; isolation: isolate; overflow: hidden; }
.rg-pagehead .rg-grid { row-gap: 20px; align-items: end; }
.rg-pagehead__title { grid-column: 1 / span 8; }
.rg-pagehead__aside { grid-column: 9 / span 4; padding-bottom: 8px; }
.rg-pagehead__lede { grid-column: 1 / span 7; }
.rg-crumbs { font-size: 13px; color: var(--rg-mute); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.rg-crumbs a { color: var(--rg-mute); }

.rg-prose { max-width: 40em; }
.rg-prose p + p, .rg-prose p + ul, .rg-prose ul + p { margin-top: 1em; }
.rg-prose ul { padding-left: 1.2em; }
.rg-twocol { row-gap: 28px; }
.rg-twocol__side { grid-column: 1 / span 4; }
.rg-twocol__main { grid-column: 6 / span 7; }

/* Statute list: numbered clauses ("§ 1.1") in the margin. */
.rg-clauses { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--rg-ink); counter-reset: clause; }
.rg-clause { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 24px 0; border-bottom: 1px solid var(--rg-rule); counter-increment: clause; }
.rg-clause::before { content: "§ " counter(clause); font-family: var(--rg-display); font-style: italic; font-size: 24px; color: var(--rg-ink); line-height: 1.2; }
.rg-clause h3 { font-size: clamp(22px, 2.2vw, 30px); }
.rg-clause p { grid-column: 2; max-width: 36em; }

/* Tables as ruled ledgers */
.rg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--rg-ink); position: relative; }
.rg-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; line-height: 1.5; }
.rg-table th, .rg-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rg-rule); color: var(--rg-ink-2); }
.rg-table thead th { font: 700 12px/1.2 var(--rg-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rg-ink); border-bottom: 1px solid var(--rg-ink); background: var(--rg-paper); white-space: nowrap; }
.rg-table tbody th { font-weight: 600; color: var(--rg-ink); }
.rg-table tbody tr:hover td, .rg-table tbody tr:hover th { background: var(--rg-paper-2); }
.rg-table .rg-yes { color: var(--rg-verified); font-weight: 700; }
.rg-table-hint { display: none; font-size: 12px; color: var(--rg-mute); margin: 8px 0 0; letter-spacing: .04em; }
@media (max-width: 820px) { .rg-table-hint { display: block; } .rg-table th:first-child, .rg-table td:first-child { position: sticky; left: 0; background: var(--rg-paper); z-index: 1; padding-right: 12px; box-shadow: 1px 0 0 var(--rg-rule); } }

/* FAQ */
.rg-faq { border-top: 2px solid var(--rg-ink); }
.rg-faq details { border-bottom: 1px solid var(--rg-rule); }
.rg-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font: 600 18px/1.35 var(--rg-sans); color: var(--rg-ink); position: relative; }
.rg-faq summary::-webkit-details-marker { display: none; }
.rg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--rg-display); transition: transform 300ms var(--rg-ease); }
.rg-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rg-faq .rg-faq__a { padding: 0 0 22px; max-width: 42em; }
.rg-faq .rg-faq__a p + p { margin-top: .8em; }

/* Chips and tags */
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chip { display: inline-flex; align-items: center; border: 1px solid var(--rg-rule-ui); border-radius: 2px; padding: 7px 12px; font: 600 14px/1 var(--rg-sans); color: var(--rg-ink); text-decoration: none; background: var(--rg-card); transition: background 150ms, color 150ms, border-color 150ms; }
.rg-chip:hover { background: var(--rg-ink); color: #fff; border-color: var(--rg-ink); }
.rg-code { font-family: var(--rg-mono); font-size: .88em; background: var(--rg-paper-2); border: 1px solid var(--rg-rule); padding: 1px 6px; border-radius: 2px; color: var(--rg-ink); word-break: break-word; }
.rg-pre { margin: 0; background: var(--rg-ink); color: var(--rg-on-ink); font: 400 13.5px/1.65 var(--rg-mono); padding: 20px 22px; border-radius: var(--rg-r); overflow-x: auto; position: relative; }
.rg-pre code { font: inherit; }

/* Forms (filters, maker) */
.rg-field-input, .rg input[type="text"], .rg input[type="email"], .rg input[type="search"], .rg select { font: 400 16px var(--rg-sans); height: 46px; padding: 0 12px; border: 1px solid var(--rg-rule-ui); border-radius: var(--rg-r); background: #fff; color: var(--rg-ink); max-width: 100%; }

/* ------------------------------------------ 7. Legacy families re-skinned */
/* np-* (alternatives, use cases, DC-3) and hv-* (how to verify) were written before the Registrar. They keep their
   markup and take the new look from here, so ten pages move together. */
.rg .np-header, .rg .hv-header { max-width: var(--rg-max); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--rg-gutter) 16px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.rg .np-crumbs { font-size: 13px; color: var(--rg-mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rg .np-crumbs a { color: var(--rg-mute); }
.rg .np-eyebrow, .rg .hv-eyebrow { font: 600 12px/1 var(--rg-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rg-mute); display: flex; align-items: center; gap: 14px; }
.rg .np-eyebrow::before, .rg .hv-eyebrow::before { content: "§"; font: italic 400 22px/1 var(--rg-display); letter-spacing: 0; color: var(--rg-ink); text-transform: none; }
.rg .np-h1, .rg .hv-h1 { margin: 0; font-family: var(--rg-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -.028em; max-width: 14em; color: var(--rg-ink); text-wrap: balance; }
.rg .np-lede, .rg .hv-lede { margin: 0; max-width: 38em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--rg-ink-2); }
.rg .np-section, .rg .hv-section { max-width: var(--rg-max); margin: 0 auto; padding: clamp(24px, 3.5vw, 44px) var(--rg-gutter); }
.rg .np-section--tight { padding-top: 0; padding-bottom: 16px; }
.rg .np-h2, .rg .hv-h2 { margin: 0 0 clamp(18px, 2.4vw, 30px); font-family: var(--rg-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.02em; color: var(--rg-ink); padding-top: 18px; border-top: 1px solid var(--rg-rule); }
.rg .np-h3 { margin: 0; font: 700 18px/1.3 var(--rg-sans); color: var(--rg-ink); }
.rg .np-p { margin: 0 0 16px; max-width: 40em; font-size: 17px; line-height: 1.65; color: var(--rg-ink-2); }
.rg .np-grid, .rg .hv-steps, .rg .hv-status { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--rg-ink); }
@media (min-width: 820px) { .rg .np-grid, .rg .hv-steps, .rg .hv-status { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rg .np-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rg .np-card, .rg .hv-step, .rg .hv-card { padding: 26px 26px 28px 0; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--rg-rule); background: transparent; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
@media (min-width: 820px) { .rg .np-card + .np-card, .rg .hv-step + .hv-step, .rg .hv-card + .hv-card { padding-left: 26px; border-left: 1px solid var(--rg-rule); } }
.rg .np-card--link { color: inherit; transition: background 200ms; }
.rg .np-card--link:hover { background: var(--rg-paper-2); color: inherit; }
.rg .np-n, .rg .hv-n { font-family: var(--rg-display); font-style: italic; font-size: 52px; line-height: 1; color: var(--rg-ink); }
.rg .np-card__text, .rg .hv-step__text, .rg .hv-card__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--rg-ink-2); }
.rg .hv-step__title { font: 700 18px/1.3 var(--rg-sans); color: var(--rg-ink); }
.rg .np-more { font-size: 14px; font-weight: 600; color: var(--rg-blue); margin-top: 4px; }
.rg .np-list, .rg .hv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; max-width: 46em; border-top: 2px solid var(--rg-ink); }
.rg .np-list li, .rg .hv-list li { display: flex; gap: 14px; font-size: 16.5px; line-height: 1.6; color: var(--rg-ink-2); padding: 14px 0; border-bottom: 1px solid var(--rg-rule); }
.rg .np-tick, .rg .hv-list__check { width: 22px; height: 22px; flex: none; color: var(--rg-verified); display: flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 2px; font-weight: 700; }
.rg .np-table-wrap { overflow-x: auto; margin-bottom: 12px; border-top: 2px solid var(--rg-ink); }
.rg .np-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; line-height: 1.5; }
.rg .np-table th, .rg .np-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rg-rule); color: var(--rg-ink-2); }
.rg .np-table thead th { font: 700 12px/1.2 var(--rg-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rg-ink); border-bottom: 1px solid var(--rg-ink); }
.rg .np-table tbody th { color: var(--rg-ink); font-weight: 600; width: 24%; }
.rg .np-source { margin: 0 0 6px; font-size: 13px; color: var(--rg-mute); }
.rg .np-src { text-decoration: underline; }
.rg .np-note { margin: 0; font-size: 13px; color: var(--rg-mute); max-width: 46em; }
.rg .np-faq, .rg .hv-faq { display: block; max-width: 46em; border-top: 2px solid var(--rg-ink); }
.rg .np-faq details, .rg .hv-faq details { border: 0; border-bottom: 1px solid var(--rg-rule); border-radius: 0; padding: 0; }
.rg .np-faq summary, .rg .hv-faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font: 600 17px/1.35 var(--rg-sans); color: var(--rg-ink); position: relative; }
.rg .np-faq summary::-webkit-details-marker, .rg .hv-faq summary::-webkit-details-marker { display: none; }
.rg .np-faq summary::after, .rg .hv-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--rg-display); transition: transform 300ms var(--rg-ease); }
.rg .np-faq details[open] summary::after, .rg .hv-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rg .np-faq p, .rg .hv-faq p { margin: 0; padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--rg-ink-2); }
.rg .np-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rg .np-chip { border: 1px solid var(--rg-rule-ui); border-radius: 2px; padding: 8px 14px; font: 600 14px/1 var(--rg-sans); color: var(--rg-ink); background: var(--rg-card); }
.rg .np-chip:hover { background: var(--rg-ink); color: #fff; border-color: var(--rg-ink); }
.rg .hv-code { font-family: var(--rg-mono); font-size: .88em; background: var(--rg-paper-2); border: 1px solid var(--rg-rule); padding: 1px 6px; border-radius: 2px; color: var(--rg-ink); word-break: break-all; }
.rg .hv-pill { display: inline-flex; align-self: flex-start; font: 700 13px/1 var(--rg-sans); letter-spacing: .16em; text-transform: uppercase; padding: 8px 14px; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 2px; transform: rotate(-2deg); }
.rg .hv-card--valid .hv-pill { color: var(--rg-verified); } .rg .hv-card--expired .hv-pill { color: var(--rg-expired); } .rg .hv-card--revoked .hv-pill { color: var(--rg-revoked); }
.rg .hv-card { gap: 16px; }

/* ----------------------------------------------- 8. Motion and reduced motion */
.rg-nojs-only { display: none; }
@media (max-width: 1099px) {
  .rg-hero__copy, .rg-hero__desk { grid-column: 1 / -1; }
  .rg-hero__title { max-width: 11em; }
  .rg-what__lead, .rg-what__list, .rg-states__copy, .rg-states__list, .rg-twocol__side, .rg-twocol__main, .rg-pagehead__title, .rg-pagehead__aside, .rg-pagehead__lede, .rg-close__copy, .rg-close__sign { grid-column: 1 / -1; }
  .rg-what__lead { position: static; }
  .rg-close__sign { max-width: 360px; margin-top: 8px; }
}
@media (max-width: 560px) {
  body.rg { font-size: 16.5px; }
  .rg-btn { height: 52px; padding: 0 22px; width: 100%; }
  .rg-actions { width: 100%; }
  .rg-verify { margin-inline: 2%; }
  .rg-verify__row { flex-direction: column; }
  .rg-verify__go { height: 48px; }
  .rg-state { grid-template-columns: 1fr; gap: 10px; }
  .rg-verdict { margin-inline: 4%; }
  .rg-pin__tip { max-width: 190px; }
  .rg-csv th, .rg-csv td { padding: 8px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-pin::before { animation: none; }
  .rg-seal-wrap.is-stamped { animation: none; }
  .rg-js .rg-seal-wrap:not(.is-stamped) { opacity: 1; transform: none; }
  .rg-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rg-cert, .rg-cert__inner, .rg-tile, .rg-tile__more, .rg-verdict, .rg-btn, .rg-hero__print::after { transition: none !important; }
  .rg-tile__more { opacity: 1; max-height: none; }
  .rg-cert { transform: none; }
  .rg-cert:hover { transform: none; }
}
@media print { body.rg::before, body.rg::after, .rg-hero__print, .cd-nav { display: none !important; } }

/* ---- small shared rules ---- */
.rg-pagehead .rg-sec { margin-bottom: clamp(28px, 4vw, 52px); }
.rg-story__panel > *, .rg-step__text, .rg-step__art { min-width: 0; }
.rg-csv { overflow-x: auto; max-width: 100%; }
.rg-sec__n { flex: none; white-space: nowrap; }
.rg-sec > span:not(.rg-sec__n) { min-width: 0; }

/* Below-the-fold sections are not laid out or painted until they approach the viewport (keeps first render fast).
   The pinned story section is deliberately NOT here: its height must be real for the sticky scroll maths. */
#platform, #why, #verification, .rg-close, .cd-foot { content-visibility: auto; contain-intrinsic-size: auto 720px; }