/* PANDORA, presented like a product: black and silver, big type, the box does the talking.
 * Gold and red belong to the Share and Steal buttons and are used for nothing else. */
:root {
  --black: #000; --ink: #1d1d1f; --silver: #f5f5f7; --white: #fff;
  --gray: #86868b; --gray-d: #6e6e73; --line: #d2d2d7; --line-d: #333336;
  --gold: #ffb81c; --gold-ink: #a86d00; --red: #ff3b30;
  --display: 'Inter Tight', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --text: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --nav: 52px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: #f5f5f7; font: 400 17px/1.47 var(--text); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.g { color: var(--gold); } .r { color: var(--red); }

/* ---------------------------------------------------------------- nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav); display: flex; align-items: center; gap: 28px; padding: 0 max(22px, calc((100vw - 1024px) / 2));
  background: rgba(22,22,23,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.08); }
.wordmark { font: 600 19px var(--display); letter-spacing: -.02em; text-decoration: none; color: #f5f5f7; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { font: 400 13px var(--text); color: rgba(245,245,247,.82); text-decoration: none; }
.links a:hover, .links a.on { color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 980px; padding: 6px 14px; font: 500 13px var(--text); text-decoration: none; background: var(--gold); color: #000; }
.pill:hover { background: #ffc642; }
.pill.big { padding: 12px 22px; font-size: 17px; }
.pill.ghost { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.link { color: var(--gold); text-decoration: none; font: 400 17px var(--text); }
.link:hover { text-decoration: underline; }
.link::after { content: " ›"; }
.light .link { color: var(--gold-ink); }
.snd { background: none; border: 0; padding: 6px; color: rgba(245,245,247,.82); display: inline-flex; }
.snd svg { width: 20px; height: 20px; }
.snd .x { display: none; } .snd[aria-pressed="false"] .x { display: inline; } .snd[aria-pressed="false"] .w { display: none; }
.snd:hover { color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 740px) { .links { display: none; } .nav .links + .snd, .nav .links + .pill { margin-left: auto; } }

/* ---------------------------------------------------------------- type scale */
.eyebrow { font: 600 21px/1.2 var(--display); color: var(--gray); margin: 0 0 8px; letter-spacing: -.01em; }
.h-xl { font: 700 clamp(48px, 9vw, 96px)/1.02 var(--display); letter-spacing: -.035em; margin: 0; }
.h-l { font: 700 clamp(36px, 6vw, 64px)/1.06 var(--display); letter-spacing: -.03em; margin: 0; }
.h-m { font: 600 clamp(26px, 3.6vw, 40px)/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
.sub { font: 500 clamp(19px, 2.2vw, 24px)/1.35 var(--display); color: var(--gray); letter-spacing: -.01em; margin: 14px 0 0; }
.sub b { color: #f5f5f7; font-weight: 600; }
.sub b.g { color: var(--gold); } .sub b.r { color: var(--red); }
.light { background: var(--silver); color: var(--ink); }
.light .sub b { color: var(--ink); }
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.foot { background: var(--silver); color: var(--gray-d); font: 400 12px/1.5 var(--text); padding: 18px 22px 40px; border-top: 1px solid var(--line); }
.foot .wrap { padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}