/* ==========================================================================
   Sovereign Asset Holdings
   Design system + page styles
   Derived from "Sovereign Asset Holdings v4" mockup (see /_design)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Icon font
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Dripicons';
  src: url('../fonts/Dripicons.woff') format('woff'),
       url('../fonts/Dripicons.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:            #0B0B0C;
  --bg-alt:        #131315;

  /* Brand */
  --gold:          #D4A94A;
  --gold-deep:     #B98C2E;
  --gold-soft:     #E8C77A;
  --gold-12:       rgba(212, 169, 74, .12);
  --gold-18:       rgba(212, 169, 74, .18);
  --gold-45:       rgba(212, 169, 74, .45);

  /* Type */
  --white:         #FFFFFF;
  --ink:           rgba(255, 255, 255, .62);
  --ink-strong:    rgba(255, 255, 255, .82);
  --ink-dim:       rgba(255, 255, 255, .52);
  --ink-faint:     rgba(255, 255, 255, .40);
  --ink-ghost:     rgba(255, 255, 255, .28);

  /* Lines */
  --line:          rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .14);
  --line-gold:     rgba(212, 169, 74, .18);

  /* State */
  --danger:        #E8A0A0;

  /* Layout */
  --shell:         1240px;
  --gutter:        24px;
  --header-h:      84px;

  /* Motion */
  --ease:          cubic-bezier(.22, .61, .36, 1);
  --fast:          200ms;
  --med:           260ms;

  /* Type. Cinzel is an inscriptional Roman capital face — it renders
     lowercase as small caps, so it is a DISPLAY face only: headings,
     short labels and numerals. All reading text, form controls and long
     copy use Inter. Never set body copy in --font-display. */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  /* `clip` rather than `hidden`: it contains the decorative rotated chips
     that intentionally hang past the layout gutter, without creating a
     scroll container (which would break the sticky header). */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure { margin: 0; }

a { color: var(--white); text-decoration: none; transition: color var(--fast) ease; }
a:hover { color: var(--gold); }

img { max-width: 100%; display: block; }

button, input, select, textarea { font-family: inherit; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--bg); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter); top: -100px;
  z-index: 200;
  background: var(--gold);
  color: var(--bg);
  font-weight: 500;
  padding: 14px 22px;
  transition: top var(--fast) ease;
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* --------------------------------------------------------------------------
   4. Primitives
   -------------------------------------------------------------------------- */

/* Bevelled corner — top-left + bottom-right (the core brand shape) */
.notch {
  --n: 20px;
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}

/* Bevelled corner — bottom-right only (buttons, inputs) */
.notch-br {
  --n: 14px;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%
  );
}

/* 1px gradient/solid "border" that survives clip-path */
.frame { padding: 1px; height: 100%; }
.frame__in { height: 100%; }

/* Brand monogram, cropped out of the standalone symbol. --s scales it.
   Measured values — do not eyeball these:
     source image .... 510 x 465   (aspect 1.0968)
     monogram bbox ... x 90-411, y 25-416  =  322 x 392  (aspect 0.8214)
   The bbox stops at y 416 on purpose: the faint ground sliver below it flares
   out to x 23-478 and would otherwise dictate the window width, shrinking the
   letters. Everything below is that bbox multiplied by k = 46/392 = 0.117347,
   so the mark renders 37.79 x 46 at --s:1 and the window frames it exactly.
   The background-size keeps the source aspect (59.85/54.57 = 1.0968), so the
   art is never distorted. If you change one number, rescale all five by k. */
.monogram {
  --s: 1;
  flex: none;
  width:  calc(37.79px * var(--s));
  height: calc(46px    * var(--s));
  background-image: url('../img/logo-symbol.png');
  background-repeat: no-repeat;
  background-size:     calc(59.85px * var(--s)) calc(54.57px * var(--s));
  background-position: calc(-10.56px * var(--s)) calc(-2.93px * var(--s));
  /* The source logo sits on solid black; screen-blending drops that
     backing plate so the mark sits cleanly on any dark surface. */
  mix-blend-mode: screen;
}

.ico { font-family: 'Dripicons'; font-style: normal; line-height: 1; speak: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 900px; }

.section { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.section--alt { background: var(--bg-alt); }
.section--tight-top { padding-top: 0; }

/* Dot texture overlay */
.dotgrid::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(212, 169, 74, .16) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
  pointer-events: none;
}

/* Typography helpers */
.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--muted { color: var(--ink-faint); letter-spacing: .34em; }
.eyebrow--sm { font-size: .72rem; letter-spacing: .26em; }

/* Capitals need positive tracking — the negative values that suited
   Rubik's lowercase cramp Cinzel badly. */
.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  /* The clamp MINIMUM is what governs small screens, and it has to keep an
     18-character line on one line inside a 272px column at 320px — otherwise
     a sentence wraps to four lines, the shared grid cell grows, and the
     three-line sentences sit above a dead gap. Measured, not guessed. */
  font-size: clamp(1.55rem, 4.3vw, 3.15rem);
  letter-spacing: .012em;
  line-height: 1.24;
  color: var(--white);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  letter-spacing: .015em;
  line-height: 1.28;
  color: var(--white);
}
.h2--sm { font-size: clamp(1.5rem, 2.7vw, 2.1rem); line-height: 1.3; }
.gold { color: var(--gold); }

/* These lists use an icon per row in place of a marker, so they need the
   UA's list padding and block margins off — left in, every row sits 40px
   further right than the heading above it, which costs real width on a
   phone. Scoped rather than a blanket ul reset: .prose styles its own. */
.prefer,
.trust__lines,
.tier__list { padding-left: 0; margin-block: 0; list-style: none; }

/* Everything else that carries the display face: short labels, section
   titles and standalone numerals. Reading text is deliberately absent. */
.brand__name,
.eyebrow,
.assurance__title,
.step__title,
.tier__title,
.tier__cta,
.fact__value,
.badge__ring,
.form__legend,
.form-success__title,
.cta-band__copy h2,
.prose h2,
.btn {
  font-family: var(--font-display);
}

.lede {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .6);
}

.section__head { max-width: 620px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .h2 { margin-top: 12px; }
.section__head .lede { margin-top: 18px; }

/* Buttons */
.btn {
  --n: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color var(--fast) ease, color var(--fast) ease, box-shadow var(--fast) ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%);
}
.btn--gold { background: var(--gold); color: var(--bg); }
.btn--gold:hover { background: var(--white); color: var(--bg); }

.btn--ghost {
  box-shadow: 0 0 0 1px rgba(212, 169, 74, .6) inset;
  color: var(--white);
  font-weight: 400;
  padding: 16px 30px;
}
.btn--ghost:hover { background: var(--gold); color: var(--bg); }

.btn--dark { background: var(--bg); color: var(--gold); padding: 17px 34px; }
.btn--dark:hover { background: var(--white); color: var(--bg); }

.btn--outline-dark {
  box-shadow: 0 0 0 1px rgba(11, 11, 12, .5) inset;
  color: var(--bg);
  padding: 17px 32px;
}
.btn--outline-dark:hover { background: var(--bg); color: var(--gold); }

.btn--sm { --n: 11px; padding: 13px 28px; font-size: .88rem; letter-spacing: .04em; }
.btn--block { display: flex; width: 100%; }

/* Scroll reveal
   --------------------------------------------------------------------
   Elements start hidden and play `rv-in` when the observer in main.js
   adds .is-in as they scroll into view.

   The offset lives in the KEYFRAME, never on the base rule. A filled
   animation outranks every :hover declaration in the cascade, so an
   element left holding `transform` from a forwards-filled animation
   could never be lifted on hover again — which is most of the cards
   further down this file. main.js swaps .is-in for .rv-done once the
   animation ends, which drops it entirely and hands `transform` back.

   --rv-i is the child's index inside a [data-reveal-group]; that is
   what staggers a row of cards. Variants only change the start offset.

   Scoped to .js so the page still reads if the script never runs — the
   class is set by an inline script in <head>, before first paint. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in {
  animation: rv-in var(--rv-dur, .75s) var(--ease) var(--rv-delay, 0ms) both;
  will-change: opacity, transform;
}
.js [data-reveal].rv-done { animation: none; opacity: 1; will-change: auto; }

[data-reveal]         { --rv-delay: calc(var(--rv-i, 0) * var(--rv-step, 90ms)); }
[data-reveal="left"]  { --rv-x: -30px; --rv-y: 0; }
[data-reveal="right"] { --rv-x:  30px; --rv-y: 0; }
[data-reveal="zoom"]  { --rv-s: .93;   --rv-y: 16px; }
[data-reveal="blur"]  { --rv-b: 12px;  --rv-y: 10px; }

@keyframes rv-in {
  from {
    opacity: 0;
    transform: translate3d(var(--rv-x, 0), var(--rv-y, 24px), 0) scale(var(--rv-s, 1));
    filter: blur(var(--rv-b, 0px));
  }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(-14px); }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 11, 12, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-gold);
}
.site-header__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 36px;
}

/* Brand lock-up. Two sizes, deliberately independent:

   --brand-s scales the wordmark block. Its two lines run at line-height 1 and
   stack into a 25.25px band, measured rather than eyeballed at --brand-s: 1:
     name cap ..... 10.86  (Cinzel caps are .724em of 15px)
     interline ....  5.64  (what gap:4px leaves between baseline and cap)
     tag cap ......  8.75  (Inter .795em of 8.5px — the & sets the top, not a
                            letter, which is why this is above a cap ratio)
     total ........ 25.25
   --mark-s sizes the symbol, which carries 46px of ink at --s: 1. At .826 it
   stands 38px, half again the text band, and the flex centring hangs it
   evenly above and below. Set --mark-s to .5489 (25.25 / 46) instead and the
   name's cap line and the tagline's baseline land exactly on the symbol's top
   and bottom edges — that is the ratio to restore if the two should ever
   bracket again, and it has to be re-derived from span / 46 whenever a size
   or the gap above changes.

   Sizes are px, not rem: they are pinned to a px-sized image, so a rem base
   change would slide the text against the mark. Both tokens flow through
   --brand-s, so it alone resizes the whole lock-up proportionally. */
.brand {
  --brand-s: 1;
  --mark-s: .826;
  display: flex;
  align-items: center;
  gap: calc(14px * var(--brand-s));
  flex: 0 1 auto;
  min-width: 0;
}
.brand .monogram { --s: calc(var(--brand-s) * var(--mark-s)); }
.brand__text {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--brand-s));
  min-width: 0;
}
.brand__name {
  font-weight: 600;
  font-size: calc(15px * var(--brand-s));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}
.brand__tag {
  font-size: calc(8.5px * var(--brand-s));
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1;
  white-space: nowrap;
}

.nav { display: none; margin-left: auto; gap: 30px; align-items: center; }
.nav__link {
  font-size: .92rem;
  font-weight: 400;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
}
.nav__link:hover,
.nav__link.is-active { color: var(--gold); }

.site-header .btn--sm { display: none; flex: none; }

.burger {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: transform var(--fast) ease, opacity var(--fast) ease;
}

/* --------------------------------------------------------------------------
   6. Mobile drawer
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  /* The menu is ~500px tall, which is more than a landscape phone has.
     Without this the links past the fold — and the CTA under them — are
     simply unreachable, since a fixed inset:0 box does not scroll. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Flex items shrink before their container scrolls, so the links would
   squash into each other instead. Let them keep their height and scroll. */
.drawer > * { flex-shrink: 0; }
.drawer[hidden] { display: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__close {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, .07);
  border: 0; border-radius: 50%;
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
}
.drawer__nav { display: flex; flex-direction: column; gap: 6px; margin-top: 48px; }
.drawer__link {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--white);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: auto; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--bg); overflow: hidden; }

/* Holds the orb on the right of the hero. Deliberately invisible — no border,
   no fill, no clip-path. The only paint is a radial glow that fades to
   transparent, so there is never a hard panel edge; the orb reads as sitting
   directly on the page. Right edge lines up with the shell. */
.hero__orb {
  display: none;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: min(52vw, 820px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(212, 169, 74, .06), transparent 76%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(72px, 9vw, 140px) clamp(80px, 10vw, 150px);
}
/* Rotating headline — a slow dissolve rather than a cut. All lines occupy the
   same grid cell, so the block keeps the height of the tallest sentence and
   nothing below it moves when they swap. The "ghostly" quality is blur and a
   small drift resolving together with the fade, not opacity alone. */
.rotator { display: grid; }

.rotator__line {
  grid-area: 1 / 1;
  display: block;
  /* Without min-width:0 a grid item's automatic minimum is its min-content
     width, so one long word widens the track past the container and overflows
     the viewport. break-word is the backstop if copy ever gets longer. */
  min-width: 0;
  overflow-wrap: break-word;
  opacity: 0;
  filter: blur(16px);
  transform: translateY(16px) scale(1.02);
  transition:
    opacity   1700ms cubic-bezier(.33, 0, .2, 1),
    filter    1700ms cubic-bezier(.33, 0, .2, 1),
    transform 1700ms cubic-bezier(.33, 0, .2, 1);
}
.rotator__line.is-active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.hero__copy { max-width: 620px; }
.hero__copy .h1 { margin-top: 22px; }
.hero__copy .hero__lede {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink);
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__actions .ico { font-size: .8rem; }

/* --------------------------------------------------------------------------
   8. Media panels (photo slots)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
.media--notch { --n: 24px; }
.media--benefit { height: clamp(300px, 32vw, 420px); }
.media--about   { height: clamp(300px, 34vw, 440px); }

.media img { width: 100%; height: 100%; object-fit: cover; }

/* Photo sequences (see main.js §4e) — the striking desk lamp and the torch
   sweeping the archive wall. Every frame is the same photograph relit, stacked
   in one box and revealed in order by fading it in over the one below. The
   script sets each fade's duration as it goes, so the same markup covers a
   flicker that snaps and a light that glides. */
.seq { background: #000; }
.seq .seq__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* No script, or reduced motion: the final frame is simply the section's image. */
.seq .seq__frame:last-child { opacity: 1; }

.seq.is-live .seq__frame {
  opacity: 0;
  transition: opacity 0ms linear;
}
.seq.is-live .seq__frame.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   Hero orb — rings rising through a sphere
   --------------------------------------------------------------------------
   Rebuilt from a GSAP/DrawSVG demo as plain SVG + CSS keyframes. Two things
   make it work without any script:

   1. The original's `drawSVG` values are set once and never tweened, so they
      are simply a static stroke-dasharray. pathLength="100" normalises every
      ellipse to 100 units, so the halves can be written as round numbers.
   2. Each ring is drawn twice — the arc behind the sphere in .orb__bg, the arc
      in front in .orb__fg — with the sphere painted between the two groups.
      That is what makes the rings appear to pass through it.

   The easing is baked into the keyframe values (sine.inOut on the rise, sine
   on the swell), so the animation itself runs linear.
   -------------------------------------------------------------------------- */
/* WebGL sphere. Hidden until orb3d.js confirms the pipeline works, so a
   failed init leaves the SVG showing rather than an empty box. */
.orb3d {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__orb.is-3d .orb3d { display: block; }
.hero__orb.is-3d .orb   { display: none; }

.orb {
  --orb-duration: 26s;          /* one full rise, per ring */
  --orb-rings: 16;
  --orb-dim: rgba(212, 169, 74, .10);
  --orb-hot: rgba(232, 199, 122, .85);

  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .46;                 /* watermark, not foreground */

  /* Tilt the whole sphere. Rotating the SVG root rather than the rings keeps
     the ring animation coherent — they still rise along the sphere's own
     axis, which now leans on screen. Positive = clockwise. */
  transform: rotate(28deg);
  transform-origin: 50% 50%;
}

.orb ellipse {
  fill: none;
  stroke: var(--orb-dim);
  stroke-width: .5;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: orb-ring var(--orb-duration) linear infinite;
  animation-delay: calc(var(--i) * (var(--orb-duration) / var(--orb-rings)) * -1);
}

/* Back half of each ring (drawn from -5% to 50% of the path) … */
.orb__bg ellipse { stroke-dasharray: 55 45; stroke-dashoffset: 5; }
/* … and the front half (50% to 99%). */
.orb__fg ellipse { stroke-dasharray: 49 51; stroke-dashoffset: -50; }

@keyframes orb-ring {
  0%   { transform: translateY(26px)     scale(.10); opacity: 0; stroke: var(--orb-dim); }
  10%  { transform: translateY(24.75px)  scale(.38); opacity: 1; }
  20%  { transform: translateY(21.13px)  scale(.63); }
  30%  { transform: translateY(15.49px)  scale(.83); }
  40%  { transform: translateY(8.38px)   scale(.96); }
  50%  { transform: translateY(.5px)     scale(1);              stroke: var(--orb-hot); }
  60%  { transform: translateY(-7.38px)  scale(.96); }
  70%  { transform: translateY(-14.49px) scale(.83); }
  80%  { transform: translateY(-20.13px) scale(.63); }
  90%  { transform: translateY(-23.75px) scale(.38); opacity: 1; }
  100% { transform: translateY(-25px)    scale(.10); opacity: 0; stroke: var(--orb-dim); }
}

/* Floating bevelled accent chip */
.chip {
  position: absolute;
  --n: 22px;
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}
.chip--bl {
  left: -28px; bottom: -28px;
  width: 106px; height: 106px;
  background: rgba(212, 169, 74, .20);
}
.chip--tr {
  right: -26px; top: -26px;
  width: 92px; height: 92px;
  --n: 20px;
  background: rgba(212, 169, 74, .14);
  animation-duration: 9s;
}

/* --------------------------------------------------------------------------
   9. Benefits
   -------------------------------------------------------------------------- */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.benefits__copy .h2 { margin-bottom: 34px; }

.assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 30px;
}
.assurance { display: flex; flex-direction: column; gap: 10px; }
.assurance__head { display: flex; align-items: center; gap: 12px; }
.assurance__head .ico { flex: none; font-size: 1.35rem; color: var(--gold); }
.assurance__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--white);
}
.assurance__note {
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */
.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.prefer { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.prefer li { display: flex; gap: 12px; align-items: center; }
.prefer .ico { flex: none; font-size: .85rem; color: var(--gold); }
.prefer span {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}

.facts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 44px; }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact .ico { font-size: 1.5rem; line-height: 1.1; color: var(--gold); }
.fact__value {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.fact__label {
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.about__cta { margin-top: 34px; padding: 15px 32px; }

/* --------------------------------------------------------------------------
   11. Process / steps
   -------------------------------------------------------------------------- */
.steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.step.frame {
  --n: 20px;
  background: rgba(255, 255, 255, .09);
  transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.step.frame:hover {
  background: var(--gold);
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 34px rgba(212, 169, 74, .22);
}
.step .frame__in {
  --n: 19px;
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__icon {
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-12);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.step__num { font-size: 1.5rem; font-weight: 500; color: rgba(255, 255, 255, .10); }
.step__title { font-size: 1.02rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--white); }
.step__body { font-size: .92rem; font-weight: 300; line-height: 1.8; color: var(--ink-dim); }

/* --------------------------------------------------------------------------
   12. Trust band
   -------------------------------------------------------------------------- */
.trust {
  position: relative;
  --n: 26px;
  background: var(--bg-alt);
  border: 1px solid var(--line-gold);
  padding: clamp(32px, 4.5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  overflow: hidden;
}
.trust::before {
  content: '';
  position: absolute;
  top: -100px; right: -70px;
  width: 290px; height: 290px;
  transform: rotate(45deg);
  border-radius: 58px;
  background: rgba(212, 169, 74, .06);
  pointer-events: none;
}
.trust__copy { position: relative; }
.trust__copy .h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; }
.trust__copy .h2 .muted { color: var(--ink-dim); }

.trust__badges { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 36px; }
.badge { display: flex; align-items: center; gap: 16px; }
.badge__ring {
  width: 72px; height: 72px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold) inset;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
}
.badge__title { font-size: .98rem; font-weight: 500; color: var(--white); }
.badge__note {
  margin-top: 5px;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.trust__lines { position: relative; display: flex; flex-direction: column; gap: 12px; }
.trust__lines li {
  --n: 14px;
  background: rgba(255, 255, 255, .04);
  padding: 16px 22px;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}

/* --------------------------------------------------------------------------
   13. Eligibility tiers
   -------------------------------------------------------------------------- */
.tiers {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
  align-items: stretch;
}
.tier.frame { --n: 22px; background: rgba(255, 255, 255, .10); }
.tier .frame__in {
  --n: 21px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  background: var(--bg);
}
.tier--hi.frame { background: var(--gold); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.tier--hi .frame__in { background: var(--bg-alt); }

.tier__icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, .06);
  color: var(--gold);
}
.tier--hi .tier__icon { background: var(--gold); color: var(--bg); }

.tier__label {
  margin-top: 22px;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tier--hi .tier__label { color: var(--gold); }

.tier__title {
  margin-top: 10px;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
}

.tier__list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.tier__list li { display: flex; gap: 12px; align-items: flex-start; }
.tier__list .ico { flex: none; font-size: .8rem; line-height: 1.6; }
.tier__list span:last-child { font-size: .95rem; font-weight: 300; line-height: 1.6; }
.tier__list .is-yes .ico  { color: var(--gold); }
.tier__list .is-yes span:last-child { color: rgba(255, 255, 255, .74); }
.tier__list .is-no .ico   { color: var(--ink-ghost); }
.tier__list .is-no span:last-child  { color: rgba(255, 255, 255, .42); }

.tier__cta {
  margin-top: auto;
  padding-top: 26px;
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.tier--hi .tier__cta { color: var(--gold); }

.tiers__note {
  margin-top: 26px;
  text-align: center;
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   14. Registration types
   -------------------------------------------------------------------------- */
.types__label { margin-bottom: 26px; text-align: center; }
.types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}
.type.frame {
  --n: 18px;
  background: rgba(255, 255, 255, .10);
  transition: background-color var(--fast) ease;
}
.type.frame:hover { background: rgba(212, 169, 74, .7); }
.type .frame__in {
  --n: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 86px;
  padding: 18px;
  background: var(--bg);
  font-size: .96rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}

/* --------------------------------------------------------------------------
   15. Seller disclosure
   -------------------------------------------------------------------------- */
.disclosure__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.disclosure__intro { margin-top: 20px; max-width: 42ch; }

.disclosure__ask {
  --n: 16px;
  margin-top: 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 20px 24px;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
}
.disclosure__ask a { color: var(--gold); }

.disclosure__panel {
  --n: 22px;
  background: var(--bg);
  border: 1px solid var(--line-gold);
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.disclosure__panel .lead {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--white);
}
.disclosure__panel p { font-size: .98rem; font-weight: 300; line-height: 1.85; color: rgba(255, 255, 255, .6); }
.disclosure__warn {
  --n: 14px;
  padding: 16px 22px;
  background: rgba(212, 169, 74, .10);
  border: 1px solid rgba(212, 169, 74, .28);
  font-size: .96rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--gold-soft) !important;
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq__list { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; }

.faq__item {
  --n: 18px;
  background: var(--bg-alt);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color 220ms ease;
}
.faq__item.is-open { border-color: var(--gold-45); }

.faq__q {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
}
.faq__marker {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--med) ease, background-color var(--fast) ease, color var(--fast) ease;
}
.faq__item.is-open .faq__marker {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--bg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--med) ease;
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  margin: 0 26px 24px;
  max-width: 62ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .58);
}

/* --------------------------------------------------------------------------
   17. Submission form
   -------------------------------------------------------------------------- */
.form-card {
  --n: 24px;
  max-width: 820px;
  margin: 44px auto 0;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(26px, 4vw, 52px);
}

.form__legend {
  margin-bottom: 20px;
  padding: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.form fieldset { border: 0; margin: 0; padding: 0; }
.form fieldset + fieldset { margin-top: 40px; }

.form__error-summary {
  --n: 14px;
  margin-bottom: 24px;
  padding: 16px 22px;
  background: rgba(232, 160, 160, .10);
  border: 1px solid rgba(232, 160, 160, .35);
  color: var(--danger);
  font-size: .94rem;
  font-weight: 400;
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}
.form__error-summary[hidden] { display: none; }

.grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: .84rem; font-weight: 400; color: var(--ink-strong); }
.field__error { font-size: .82rem; color: var(--danger); }
.field__error[hidden] { display: none; }

.input {
  --n: 11px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  background-color: var(--bg-alt);
  color: var(--white);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%
  );
}
.input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 169, 74, .16);
  outline: none;
}
.input[aria-invalid='true'] { border-color: var(--danger); }
.input--onalt { background-color: var(--bg); }

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23D4A94A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px 8px;
  cursor: pointer;
}
input[type='date'].input::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(35%) saturate(760%) hue-rotate(2deg) brightness(92%);
  cursor: pointer;
}

/* History questions */
.history { display: flex; flex-direction: column; }
.history__row { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.history__q {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 0; margin: 0; padding: 0;
}
.history__q legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-strong);
}
.history__label {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-strong);
  max-width: 44ch;
}
.seg { display: flex; gap: 8px; flex: none; }
.seg button {
  --n: 11px;
  min-width: 76px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: .94rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%
  );
}
.seg button:hover { border-color: var(--gold); color: var(--white); }
.seg button[aria-pressed='true'] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
  font-weight: 500;
}

.followups {
  --n: 16px;
  margin: 18px 0 6px;
  padding: 20px 22px;
  background: var(--bg-alt);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 16px;
}
.followups[hidden] { display: none; }

/* Confirmations */
.confirms { display: flex; flex-direction: column; gap: 18px; }
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: .94rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  cursor: pointer;
}
.check input {
  width: 18px; height: 18px;
  margin-top: 4px;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.check a { color: var(--gold); }
.confirms .field__error { margin-left: 32px; }

.form__submit { margin-top: 36px; padding: 20px; font-size: 1rem; }
/* .btn is nowrap, and this is the one label long enough to outgrow its
   button on a small phone (+36px at 320px). Wrapping beats spilling out
   of the gold; line-height comes off .btn's 1 so two lines can breathe. */
@media (max-width: 419px) {
  .form__submit { white-space: normal; line-height: 1.35; }
}
.form__submit[disabled] { background: var(--gold-deep); cursor: default; }
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(11, 11, 12, .35);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner[hidden] { display: none; }

.form__note {
  margin-top: 16px;
  text-align: center;
  font-size: .8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .35);
}

/* Success state */
.form-success { text-align: center; padding: 26px 0; }
.form-success[hidden] { display: none; }
.form-success__mark {
  width: 74px; height: 74px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-size: 1.5rem;
}
.form-success__title { margin-top: 24px; font-size: 1.45rem; font-weight: 600; letter-spacing: .02em; color: var(--white); }
.form-success__body {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .6);
}
.form-success__ref {
  margin-top: 26px;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}
.form-success__code {
  --n: 8px;
  display: inline-block;
  margin-top: 10px;
  padding: 11px 22px;
  background: rgba(198, 160, 91, .10);
  border: 1px solid rgba(198, 160, 91, .38);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .16em;
  color: var(--gold);
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}

.form-success__next {
  margin: 32px auto 0;
  padding: 0;
  max-width: 46ch;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 14px;
}
.form-success__next li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
}
.form-success__step {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 160, 91, .4);
  border-radius: 50%;
  font-size: .72rem;
  color: var(--gold);
}
.form-success__foot {
  margin: 28px auto 0;
  max-width: 52ch;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, .42);
}
.form-success__foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(198, 160, 91, .35); }
.form-success__foot a:hover { border-bottom-color: var(--gold); }

/* Honeypot — kept out of sight and out of the tab order, but still a real
   field so automated submitters fill it in and give themselves away. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   18. Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  --n: 28px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-deep) 100%);
  padding: clamp(34px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
  align-items: center;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -110px; right: -60px;
  width: 300px; height: 300px;
  transform: rotate(45deg);
  border-radius: 60px;
  background: rgba(11, 11, 12, .09);
  pointer-events: none;
}
.cta-band__copy { position: relative; }
.cta-band__copy h2 {
  font-weight: 600;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  letter-spacing: .015em;
  line-height: 1.28;
  color: var(--bg);
}
.cta-band__copy p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(11, 11, 12, .72);
}
.cta-band__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line-gold);
  padding: 72px 0 30px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 48px;
}
.site-footer__logo {
  width: 100%;
  max-width: 290px;
  height: auto;
  mix-blend-mode: screen;
}
.site-footer__about {
  margin-top: 16px;
  max-width: 34ch;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-dim);
}

/* Below 516px the grid can no longer fit a second 210px column (measured,
   not guessed) and .site-footer__brand drops to sit above the link
   columns instead of beside them. Left-aligned there it reads as just
   another list, competing with Navigate/Contact/Legal for the same left
   edge; centered, it reads as the masthead it actually is. Left alone
   above this width, where it sits in its own column next to those lists. */
@media (max-width: 515px) {
  .site-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .site-footer__about { margin-inline: auto; }
}
.site-footer h2 { margin-bottom: 18px; }
.site-footer__links { display: flex; flex-direction: column; gap: 12px; }
.site-footer__links a { font-size: .94rem; font-weight: 300; color: rgba(255, 255, 255, .6); }
.site-footer__links a:hover { color: var(--gold); }

.site-footer__base {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer__base p {
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-faint);
}
.site-footer__base p:last-child { max-width: 60ch; }

/* --------------------------------------------------------------------------
   19b. Simple content pages (privacy, terms)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(56px, 7vw, 96px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.page-head .h2 { margin-top: 12px; }
.page-head .lede { margin-top: 16px; max-width: 62ch; }

.prose { max-width: 74ch; padding-block: clamp(40px, 5vw, 64px); }
.prose h2 {
  margin-top: 48px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--white);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li {
  margin-top: 14px;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255, 255, 255, .6);
}
.prose ul { margin: 6px 0 0; padding-left: 22px; }
.prose li::marker { color: var(--gold); }
.prose a { color: var(--gold); }

.notice {
  --n: 16px;
  margin-top: 32px;
  padding: 20px 24px;
  background: rgba(212, 169, 74, .10);
  border: 1px solid rgba(212, 169, 74, .28);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--gold-soft);
  clip-path: polygon(
    var(--n) 0, 100% 0,
    100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    0 100%, 0 var(--n)
  );
}
.notice strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   20. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgba(11, 11, 12, .96);
  border-top: 1px solid rgba(212, 169, 74, .2);
  padding: 12px 16px;
  transform: translateY(120%);
  transition: transform 220ms ease;
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar .btn { padding: 16px; }

/* --------------------------------------------------------------------------
   20b. Interaction — cursor spotlight, hover glow, live counters
   -------------------------------------------------------------------------- */

/* An unregistered custom property is an untyped token, so a gradient that
   reads one cannot transition — it snaps. Registering --spot-a as a number
   is what lets the spotlight below fade in and out. */
@property --spot-a {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Cursor spotlight.
   Deliberately a BACKGROUND LAYER rather than a ::before overlay: a
   background always paints beneath the element's own text, so none of
   these cards need a z-index on every child to stay legible. main.js
   writes --mx/--my as percentages of the card on pointermove; without
   the script they stay at 50%/50% and the glow is simply centred. */
.step .frame__in,
.tier .frame__in,
.type .frame__in,
.trust__lines li,
.faq__item {
  --spot-a: 0;
  background-image: radial-gradient(
    circle var(--spot-r, 240px) at var(--mx, 50%) var(--my, 50%),
    rgba(212, 169, 74, var(--spot-a)),
    rgba(212, 169, 74, 0) 70%
  );
  transition:
    --spot-a 280ms ease,
    background-color var(--fast) ease,
    border-color var(--fast) ease,
    color var(--fast) ease,
    transform var(--med) var(--ease),
    box-shadow var(--med) ease;
}
.step.frame:hover .frame__in,
.tier.frame:hover .frame__in,
.type.frame:hover .frame__in,
.trust__lines li:hover,
.faq__item:hover { --spot-a: .16; }

/* ---- Benefits: assurances ---- */
.assurance { transition: transform var(--med) var(--ease); }
.assurance__head .ico {
  transition: color var(--fast) ease, filter var(--fast) ease, transform var(--med) var(--ease);
}
.assurance__title { transition: color var(--fast) ease, text-shadow var(--fast) ease; }
.assurance__note  { transition: color var(--fast) ease; }

.assurance:hover { transform: translateY(-4px); }
.assurance:hover .assurance__head .ico {
  color: var(--gold-soft);
  filter: drop-shadow(0 0 12px rgba(212, 169, 74, .55));
  transform: scale(1.12);
}
.assurance:hover .assurance__title { text-shadow: 0 0 26px rgba(212, 169, 74, .4); }
.assurance:hover .assurance__note  { color: var(--ink-strong); }

/* ---- About: preference list + facts ---- */
.prefer li { transition: transform var(--med) var(--ease); }
.prefer li .ico { transition: color var(--fast) ease, filter var(--fast) ease; }
.prefer li span { transition: color var(--fast) ease; }

.prefer li:hover { transform: translateX(6px); }
.prefer li:hover .ico  { color: var(--gold-soft); filter: drop-shadow(0 0 10px rgba(212, 169, 74, .6)); }
.prefer li:hover span  { color: var(--white); }

.fact { transition: transform var(--med) var(--ease); }
.fact .ico { transition: color var(--fast) ease, filter var(--fast) ease, transform var(--med) var(--ease); }
.fact__value { transition: color var(--fast) ease, text-shadow var(--fast) ease; }
.fact__label { transition: color var(--fast) ease; }

.fact:hover { transform: translateY(-4px); }
.fact:hover .ico {
  color: var(--gold-soft);
  filter: drop-shadow(0 0 14px rgba(212, 169, 74, .6));
  transform: scale(1.1);
}
.fact:hover .fact__value { color: var(--gold-soft); text-shadow: 0 0 30px rgba(212, 169, 74, .5); }
.fact:hover .fact__label { color: var(--ink-strong); }

/* ---- Process: steps ---- */
.step__icon {
  transition: background-color var(--fast) ease, color var(--fast) ease,
              transform var(--med) var(--ease), box-shadow var(--fast) ease;
}
.step__num  { transition: color var(--fast) ease, text-shadow var(--fast) ease; }
.step__body { transition: color var(--fast) ease; }

.step.frame:hover .step__icon {
  background: var(--gold);
  color: var(--bg);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 26px rgba(212, 169, 74, .5);
}
.step.frame:hover .step__num {
  color: rgba(212, 169, 74, .55);
  text-shadow: 0 0 26px rgba(212, 169, 74, .35);
}
.step.frame:hover .step__body { color: var(--ink-strong); }

/* ---- Trust badges ---- */
.badge { transition: transform var(--med) var(--ease); }
.badge__ring {
  position: relative;
  transition: color var(--fast) ease, box-shadow var(--fast) ease, transform var(--med) var(--ease);
}
.badge__title,
.badge__note { transition: color var(--fast) ease, text-shadow var(--fast) ease; }

.badge:hover { transform: translateY(-3px); }
.badge:hover .badge__ring {
  color: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold-soft) inset, 0 0 30px rgba(212, 169, 74, .4);
  transform: scale(1.05);
}
.badge:hover .badge__note { color: var(--gold-soft); text-shadow: 0 0 18px rgba(212, 169, 74, .5); }

/* Ring sweep. --p is driven 0 → 100 by the counter in main.js, so the arc
   fills in step with the numeral inside it. The mask cuts the conic fill
   back to a 3px annulus, clear of the numeral. */
.badge__ring::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--gold-soft) calc(var(--p, 100) * 1%),
    rgba(212, 169, 74, .10) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: .85;
  pointer-events: none;
}

.trust__lines li:hover { color: var(--white); transform: translateX(6px); }

/* ---- Eligibility tiers ---- */
.tier.frame {
  transition: background-color var(--med) ease, transform var(--med) var(--ease), box-shadow var(--med) ease;
}
.tier.frame:hover {
  background: var(--gold);
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 34px rgba(212, 169, 74, .2);
}
.tier--hi.frame:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 44px rgba(212, 169, 74, .32); }

.tier__icon {
  transition: background-color var(--fast) ease, color var(--fast) ease,
              transform var(--med) var(--ease), box-shadow var(--fast) ease;
}
.tier__label,
.tier__cta,
.tier__list span:last-child { transition: color var(--fast) ease; }

.tier.frame:hover .tier__icon {
  background: var(--gold);
  color: var(--bg);
  transform: scale(1.06);
  box-shadow: 0 0 26px rgba(212, 169, 74, .45);
}
.tier.frame:hover .tier__label { color: var(--gold); }
.tier.frame:hover .tier__cta   { color: var(--gold-soft); }
.tier.frame:hover .tier__list .is-yes span:last-child { color: var(--white); }

/* ---- Registration types ---- */
.type.frame {
  transition: background-color var(--fast) ease, transform var(--med) var(--ease), box-shadow var(--med) ease;
}
.type.frame:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(212, 169, 74, .2);
}
.type.frame:hover .frame__in { color: var(--white); }

/* ---- FAQ ---- */
.faq__item:hover { border-color: var(--gold-45); }
.faq__q { transition: color var(--fast) ease; }
.faq__item:hover .faq__q { color: var(--gold-soft); }
/* :not() keeps this off the open item, whose marker is already a filled
   gold disc — without it the hover would repaint it mid-state. */
.faq__item:not(.is-open):hover .faq__marker {
  background: var(--gold-18);
  color: var(--gold-soft);
}

/* ---- Disclosure ---- */
.disclosure__panel { transition: border-color var(--med) ease, box-shadow var(--med) ease; }
.disclosure__panel:hover { border-color: var(--gold-45); box-shadow: 0 0 46px rgba(212, 169, 74, .12); }
.disclosure__ask { transition: border-color var(--med) ease, color var(--fast) ease; }
.disclosure__ask:hover { border-color: var(--line-gold); color: var(--ink-strong); }

/* ---- Footer ---- */
.site-footer__links a { transition: color var(--fast) ease, text-shadow var(--fast) ease; }
.site-footer__links a:hover { text-shadow: 0 0 18px rgba(212, 169, 74, .45); }

/* ---- Live counters ----
   Held gold while the number is still moving, so the eye is drawn to the
   one thing on screen that is changing. */
[data-count].is-counting {
  color: var(--gold-soft);
  text-shadow: 0 0 26px rgba(212, 169, 74, .45);
}

/* --------------------------------------------------------------------------
   21. Breakpoints
   -------------------------------------------------------------------------- */
/* Narrow phones: let the brand lock-up wrap instead of pushing the burger
   off-screen, and pull the decorative chips inside the viewport. Their
   rotate(45deg) inflates the bounding box by ~21% of their size on each
   side, so negative offsets that read fine on desktop overflow here. */
/* Smallest phones: 1.55rem still wraps the longest headline line inside a
   272px column, which would reopen the rotator gap. Scoped to this band so
   360px and up keep the larger size. */
@media (max-width: 359px) {
  .h1 { font-size: 1.38rem; }
}

/* Phones drop the tagline, so the two-line geometry has nothing left to
   bracket the mark with, and the name falls back to a legible .8rem that is
   allowed to wrap — at 15px with .16em tracking the wordmark alone is 285px,
   which will not sit beside a burger on a 320px screen. The mark keeps its
   full --brand-s here: against a 12.8px name it reads as the larger element,
   which is the right way round once the wordmark is the thing that broke. */
@media (max-width: 559px) {
  .site-header__inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand__tag { display: none; }
  .brand__name {
    white-space: normal;
    font-size: .8rem;
    letter-spacing: .12em;
    line-height: 1.25;
  }
}

/* Once the shell stops being centred there is no spare gutter to hang a
   chip in, and .chip--tr drags the whole page sideways: rotate(45deg)
   inflates a 92px square's box to 130px, so right:-26px lands 21px past
   the viewport edge. Measured — it only clears again at 1288px. Note that
   body's overflow-x:clip does NOT save us here; it does not stop the
   viewport itself from scrolling. Keep the sizes, drop the offsets. */
@media (max-width: 1287px) {
  .chip--bl { left: 0; bottom: -20px; }
  .chip--tr { right: 0; top: -20px; }
}

@media (max-width: 899px) {
  .chip--bl { left: 0; bottom: -14px; width: 72px; height: 72px; --n: 16px; }
  .chip--tr { right: 0; top: -14px;  width: 64px; height: 64px; --n: 14px; }
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shown from 1280px only. Below that the hero copy is wide relative to the
   viewport and the orb's rings crowd the headline — measured, not guessed:
   clearance falls to 9px at 1200px and goes negative by 1100px, against 33px
   here. If you widen the orb or move it further left, re-measure this. */
@media (min-width: 1280px) {
  .hero__orb { display: block; }
}

@media (min-width: 1024px) {
  .benefits__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The inline header appears only once it genuinely fits. Measured by forcing
   it on and reading the gap before "Home": 1024px leaves -70px, 1060 -34,
   1100 +6, 1120 +26. That is why the wordmark used to run through "Home" at
   this site's old 1024 breakpoint — it never fitted there, at any wordmark
   size. Below 1120 the already-built mobile pattern takes over: burger,
   drawer and the sticky bottom CTA, so nothing is lost. main.js closes the
   drawer on the same boundary — move both together or the drawer strands
   itself open with no button left to close it. */
@media (min-width: 1120px) {
  .nav { display: flex; }
  .site-header .btn--sm { display: inline-flex; }
  .burger { display: none; }

  .mobile-bar { display: none; }
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .chip { animation: none !important; }

  /* No cursor spotlight, no card lift, and the ring sweep is drawn already
     full rather than animated in (main.js skips the count for the same
     reason and leaves the authored number in place). */
  .step .frame__in,
  .tier .frame__in,
  .type .frame__in,
  .trust__lines li,
  .faq__item { background-image: none !important; }

  .step.frame:hover,
  .tier.frame:hover,
  .type.frame:hover,
  .assurance:hover,
  .fact:hover,
  .badge:hover,
  .prefer li:hover,
  .trust__lines li:hover { transform: none !important; }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Headline holds on the first sentence; the rotator script also stops. */
  .rotator__line {
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Don't blank the orb — each ring keeps its negative delay but is paused,
     so it freezes at its own phase and the whole thing renders as a static
     set of nested rings rather than disappearing on the last keyframe. */
  .orb ellipse {
    animation-duration: var(--orb-duration) !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
  }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mobile-bar, .drawer, .hero__orb, .chip { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}