/* ============================================================================
   SILVERPOST
   Design law: materials and light, never flat colour. Restraint everywhere
   except the one place the light moves.
   No build step, no CDN, no tracking. Everything here is hand written.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* The void. Polished smoky quartz, not flat black. */
  --void: #040506;
  --void-2: #0b0d11;
  --void-3: #12151b;

  /* Metals. There are no colours in this brand, only metals and meaning. */
  --platinum: #eef2f7;
  --silver: #c4cbd8;
  --dim: #848c99;
  --engrave: #cdd7e4;

  /* Meaning. Used only for verdicts, never for decoration. */
  --scam: #e05545;
  --genuine: #46c98d;
  --caution: #e0a43f;

  /* Metal surfaces */
  --metal: linear-gradient(135deg, #ffffff 0%, #cfd8e3 34%, #8290a0 62%, #e3eaf2 100%);
  --rim: rgba(205, 215, 228, 0.22);
  --rim-bright: rgba(230, 240, 252, 0.42);
  --glass: rgba(255, 255, 255, 0.028);

  /* Type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 34rem;
  --section: clamp(5.5rem, 13vw, 9.5rem);
}

/* ---------- 2. Reset and base ------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Deliberately large. This product serves people over 75, and their
     children read it one handed on a phone in a waiting room. */
  font: 400 clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem)/1.68 var(--sans);
  color: var(--silver);
  background: var(--void);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

::selection { background: rgba(196, 203, 216, 0.24); color: var(--platinum); }

/* ---------- 3. The quartz: depth behind everything ----------------------- */

/* Four layers, none of them a flat fill: a base graduation, an edge vignette,
   one cool inclusion glow, and a diagonal glass sheen. */
.quartz {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* the inclusion: one barely visible cool glow, deep left */
    radial-gradient(60rem 46rem at 18% 26%, rgba(94, 124, 168, 0.10), transparent 62%),
    /* a second, dimmer inclusion low right */
    radial-gradient(48rem 40rem at 86% 78%, rgba(120, 138, 170, 0.055), transparent 66%),
    /* base graduation from quartz to true void */
    linear-gradient(168deg, var(--void-2) 0%, var(--void) 46%, #06070a 100%);
}

/* the glass sheen: one faint diagonal band of reflected light */
.quartz::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(104deg,
    transparent 34%,
    rgba(226, 236, 250, 0.035) 46%,
    rgba(226, 236, 250, 0.012) 52%,
    transparent 62%);
  transform: rotate(-2deg);
}

/* the edge vignette: the stone is thicker at the edges */
.quartz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 96% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* Engraved part circles, cut into the stone at two opposite corners. */
.engrave {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  color: var(--engrave);
  opacity: 0.1;
  width: clamp(20rem, 46vw, 40rem);
}
.engrave--tr { top: clamp(-14rem, -18vw, -6rem); right: clamp(-14rem, -18vw, -6rem); }
.engrave--bl { bottom: clamp(-16rem, -20vw, -7rem); left: clamp(-16rem, -20vw, -7rem); }

/* Silver dust drifts above the stone, below the words. */
#dust {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- 4. Layout ---------------------------------------------------- */

.page { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 46rem; }

section { padding-block: var(--section); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--platinum);
  color: #05070a;
  border-radius: 2px;
}

/* ---------- 5. Type ------------------------------------------------------ */

/* The wordmark. Thin, wide, unhurried. Never bold, never tightened. */
.wordmark {
  font-weight: 200;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optical centring, cancels the trailing space */
  color: var(--platinum);
  text-transform: uppercase;
  line-height: 1;
}

/* The hairline rule that fades at both ends. Used under the wordmark and as
   the only divider in the whole site. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, rgba(196, 203, 216, 0.42) 22%, rgba(238, 244, 251, 0.6) 50%,
    rgba(196, 203, 216, 0.42) 78%, transparent);
}
.rule--dim { background: linear-gradient(90deg, transparent, rgba(196, 203, 216, 0.2) 50%, transparent); }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}

h1, h2, h3 {
  color: var(--platinum);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.14;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem); line-height: 1.16; }
h3 { font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.28; }

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--silver);
}
.measure { max-width: var(--measure); }
.dim { color: var(--dim); }
.plat { color: var(--platinum); }

/* ---------- 6. The Eclipse ----------------------------------------------- */

/* Sized against the viewport height as well as its width, so that on a short
   laptop screen the eclipse gives way and the buttons stay above the fold.
   The light is the hero, but it must never bury the invitation. */
.eclipse {
  width: min(27rem, 58vw, 31svh);
  min-width: 13rem;
  margin-inline: auto;
  aspect-ratio: 1;
}
.eclipse svg { width: 100%; height: auto; overflow: visible; }

/* Two halos breathing gently out of phase. Transform and opacity only, so
   this stays on the compositor. */
.halo-a, .halo-b {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.halo-a { animation: breathe-a 3.4s ease-in-out infinite; }
.halo-b { animation: breathe-b 2.3s ease-in-out infinite; }

@keyframes breathe-a {
  0%, 100% { transform: scale(1);     opacity: 0.20; }
  50%      { transform: scale(1.065); opacity: 0.055; }
}
@keyframes breathe-b {
  0%, 100% { transform: scale(1.045); opacity: 0.055; }
  50%      { transform: scale(1);     opacity: 0.155; }
}

/* The diamond: one brilliant point of light walking the rim. */
.orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit 18s linear infinite;
  will-change: transform;
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* It flares very slightly as it goes, the way a real diamond ring does. */
.diamond { animation: flare 6s ease-in-out infinite; }
@keyframes flare {
  0%, 100% { opacity: 0.92; }
  38%      { opacity: 1; }
  70%      { opacity: 0.78; }
}

/* ---------- 7. Buttons: metal, and black glass --------------------------- */

.btn {
  --sweep: -30%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 1.9rem;
  border: 0;
  border-radius: 2px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease;
}

/* Primary: milled silver. Near black text, because metal reflects. */
.btn--metal {
  color: #05070a;
  background: var(--metal);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 30px rgba(150, 175, 210, 0.14);
}
/* A band of light travels across the metal when touched. Materials behave
   like materials. */
.btn--metal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  transform: translateX(var(--sweep));
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.3, 0.6, 0.2, 1), opacity 0.2s ease;
  pointer-events: none;
}
.btn--metal:hover, .btn--metal:focus-visible { transform: translateY(-1px); }
.btn--metal:hover::after, .btn--metal:focus-visible::after { --sweep: 130%; opacity: 0.5; }

/* Secondary: black glass with a silver shimmer at the rim. */
.btn--glass {
  color: var(--platinum);
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--rim) inset;
  backdrop-filter: blur(2px);
}
.btn--glass:hover, .btn--glass:focus-visible {
  box-shadow: 0 0 0 1px var(--rim-bright) inset;
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* One visible focus treatment everywhere, on every interactive thing. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--platinum);
  outline-offset: 3px;
  border-radius: 2px;
}

.link {
  color: var(--platinum);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 203, 216, 0.32);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.link:hover { border-color: var(--platinum); }

/* ---------- 7b. Store buttons -------------------------------------------
   The familiar badge shape, cut from the same black glass as everything
   else. Two lines: the quiet one on top, the name underneath.
------------------------------------------------------------------------ */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.stores--hero { margin-top: clamp(1.1rem, 3vh, 1.6rem); }

.store {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.05rem;
  border-radius: 3px;
  text-decoration: none;
  color: var(--platinum);
  background: var(--glass);
  box-shadow: 0 0 0 1px var(--rim) inset;
  transition: box-shadow 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.store:hover, .store:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 1px var(--rim-bright) inset;
  transform: translateY(-1px);
}
.store__mark { width: 1.6rem; height: 1.6rem; flex: none; color: var(--platinum); }
.store__mark svg { width: 100%; height: 100%; }
.store__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store__small {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.store__big {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0.18rem;
}

/* Before launch the badges are honest about it, and take you to the form. */
.store--soon .store__mark { opacity: 0.72; }

.stores__note {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--dim);
}

/* ---------- 8. Panels: black glass with a silver rim --------------------- */

.panel {
  position: relative;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.008) 46%, rgba(255, 255, 255, 0.022));
  box-shadow: 0 0 0 1px var(--rim) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
/* A hairline of brighter light along the top edge, as though lit from above */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 244, 251, 0.34) 30%, rgba(238, 244, 251, 0.34) 70%, transparent);
}

/* ---------- 9. Header ---------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--gutter);
  background: linear-gradient(180deg, rgba(4, 5, 6, 0.92), rgba(4, 5, 6, 0.55) 70%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}
.header.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.header__mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-size: 0.875rem;
}
.header__glyph { width: 1.15rem; height: 1.15rem; flex: none; }
.header__cta { font-size: 0.9375rem; padding: 0.6rem 1.1rem; }

/* ---------- 10. Hero ----------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  text-align: center;
  padding-block: clamp(4rem, 12vh, 7rem) clamp(3rem, 9vh, 5rem);
}
.hero__mark { font-size: clamp(1.05rem, 0.72rem + 1.5vw, 1.7rem); }

/* On a short laptop screen the hero stops trying to be a full stage and
   simply makes sure the invitation is visible without scrolling. */
/* On anything shorter than a desktop monitor the hero stops trying to be a
   full stage. Anchored to the top rather than centred, because with centring
   anything added below the buttons pushes the whole block down again, and the
   invitation and the store badges have to be visible without scrolling. */
@media (max-height: 1000px) {
  .hero {
    min-height: auto;
    align-content: start;
    padding-block: clamp(3.5rem, 8vh, 5rem) clamp(2.5rem, 5vh, 3.5rem);
  }
  .hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.85rem); }
  .hero .eclipse { width: min(27rem, 58vw, 27svh); }
  .hero__foot { margin-top: 1.25rem; }
}
@media (max-height: 800px) {
  .hero { padding-block: 3rem clamp(2rem, 4vh, 3rem); }
  .hero .eclipse { width: min(27rem, 58vw, 24svh); }
  .stores--hero { margin-top: 0.85rem; }
  .hero__rule { margin-top: 0.9rem; }
}
.hero__rule { width: min(20rem, 62%); margin: 1.15rem auto 0; }
.hero h1 { margin-top: clamp(1.5rem, 4.5vh, 3rem); }
.hero__sub { margin: clamp(1rem, 2.4vh, 1.4rem) auto 0; max-width: 33rem; }
.hero__btns { margin-top: clamp(1.5rem, 4.5vh, 2.75rem); }
.hero__foot {
  margin-top: clamp(1.5rem, 5vh, 3.25rem);
  font-size: 0.9375rem;
  color: var(--dim);
}

/* The scroll cue: a single hairline that fills and empties, forever. */
.cue {
  width: 1px;
  height: 3.5rem;
  margin: 1.25rem auto 0;
  background: rgba(196, 203, 216, 0.16);
  position: relative;
  overflow: hidden;
}
.cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--silver));
  transform: translateY(-100%);
  animation: cue 3s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* ---------- 11. The three beats ------------------------------------------ */

/* Not cards. A thread of light with three moments hung along it. */
.beats { margin-top: clamp(2.5rem, 6vw, 4rem); position: relative; }
.beats::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 203, 216, 0.28) 12%, rgba(196, 203, 216, 0.28) 88%, transparent);
}
.beat { position: relative; padding-left: clamp(2rem, 5vw, 3rem); }
.beat + .beat { margin-top: clamp(2.75rem, 6vw, 4rem); }
.beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--void);
  box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.5), 0 0 14px rgba(196, 203, 216, 0.18);
}
.beat__when {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.beat h3 { margin-top: 0.5rem; }
.beat p { margin-top: 0.75rem; max-width: 33rem; }

.figure-line {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--silver);
  max-width: 40rem;
}
.figure-line b { color: var(--platinum); font-weight: 500; }
.source { display: block; margin-top: 0.6rem; font-size: 0.875rem; color: var(--dim); }

/* ---------- 12. Steps ---------------------------------------------------- */

.steps {
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step__art { width: 4.5rem; height: 4.5rem; color: var(--silver); }
.step__n {
  margin-top: 1.15rem;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--dim);
}
.step h3 { margin-top: 0.45rem; }
.step p { margin-top: 0.7rem; }

/* ---------- 13. The verdict card (exact app dress) ----------------------- */

.verdict { max-width: 27rem; }
.verdict__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
/* The seal. A struck disc, not an icon. */
.seal {
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--void);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 26px -6px currentColor;
}
.seal--scam { background: var(--scam); }
.seal--genuine { background: var(--genuine); }
.seal--caution { background: var(--caution); }
.seal svg { width: 1.35rem; height: 1.35rem; }

.verdict__word {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
}
.verdict__word--scam { color: var(--scam); }
.verdict__word--genuine { color: var(--genuine); }
.verdict__word--caution { color: var(--caution); }
.verdict__of { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.verdict__say {
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--platinum);
}
.verdict__do { margin-top: 0.85rem; }
/* The standing safe-practice line. Set apart so it reads as the house rule
   it is, rather than as part of this particular answer. */
.verdict__safe {
  margin-top: 1rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(196, 203, 216, 0.3);
  font-size: 0.9375rem;
  color: var(--silver);
}
.verdict__flag {
  margin-top: 1.35rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(196, 203, 216, 0.16);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--dim);
}
.verdict__flag svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--silver); }

/* ---------- 14. Try it: the interactive moment --------------------------- */

.try { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(2.25rem, 5vw, 3rem); }
@media (min-width: 56rem) { .try { grid-template-columns: 1fr 1fr; align-items: start; } }

.pick { display: grid; gap: 0.75rem; }
.pick__btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.14) inset;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  color: var(--silver);
  transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.pick__btn:hover { background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.3) inset; }
.pick__btn[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 1px var(--rim-bright) inset;
  transform: translateX(2px);
}
.pick__kind {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.pick__text { display: block; margin-top: 0.45rem; color: var(--platinum); font-size: 1rem; line-height: 1.5; }

/* The card re-strikes each time you choose. */
.struck .seal { animation: strike 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.struck .verdict__word { animation: rise 0.45s ease both 0.06s; }
.struck .verdict__say { animation: rise 0.5s ease both 0.12s; }
.struck .verdict__do { animation: rise 0.5s ease both 0.18s; }
.struck .verdict__flag { animation: rise 0.5s ease both 0.24s; }
@keyframes strike {
  from { transform: scale(1.5) rotate(-12deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes rise {
  from { transform: translateY(0.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- 15. What it catches ------------------------------------------ */

.catches {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  display: grid;
  gap: 1px;
  background: rgba(196, 203, 216, 0.13);
  box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.13);
}
@media (min-width: 40rem) { .catches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .catches { grid-template-columns: repeat(3, 1fr); } }

.catch {
  background: var(--void);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.4s ease;
}
.catch:hover { background: #080a0e; }
.catch svg { width: 1.65rem; height: 1.65rem; flex: none; color: var(--silver); margin-top: 0.15rem; }
.catch h3 { font-size: 1.0625rem; font-weight: 500; }
.catch p { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--dim); }

/* ---------- 16. Privacy -------------------------------------------------- */

.vow { position: relative; }
.vow__big {
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--platinum);
  max-width: 24ch;
  letter-spacing: -0.01em;
}
.vow__list { margin-top: clamp(2rem, 5vw, 2.75rem); display: grid; gap: 1.15rem; max-width: 38rem; }
.vow__list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.vow__list svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.34rem; color: var(--silver); }

/* The line she can send to her brother. */
.quotable { margin-top: clamp(2.25rem, 5vw, 3rem); max-width: 40rem; }
.quotable blockquote {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--platinum);
  padding-left: 1.35rem;
  border-left: 1px solid rgba(196, 203, 216, 0.34);
}
.copy {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  color: var(--dim);
  font-size: 0.9375rem;
  transition: color 0.3s ease;
}
.copy:hover { color: var(--platinum); }
.copy svg { width: 1rem; height: 1rem; }

/* ---------- 17. Pricing: an invitation, not a table ---------------------- */

.invite { max-width: 34rem; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3rem); }
.invite__price {
  margin-top: 1.5rem;
  font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
  font-weight: 200;
  color: var(--platinum);
  line-height: 1;
  letter-spacing: -0.02em;
}
.invite__per { font-size: 1.0625rem; color: var(--dim); margin-top: 0.7rem; }
.invite__inc { margin-top: 1.75rem; display: grid; gap: 0.7rem; text-align: left; max-width: 21rem; margin-inline: auto; }
.invite__inc li { display: flex; gap: 0.75rem; align-items: flex-start; }
.invite__inc svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.42rem; color: var(--silver); }

.founding {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: clamp(1.75rem, 4vw, 2.25rem);
  border-top: 1px solid rgba(196, 203, 216, 0.16);
}
.founding__tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--metal);
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
}

/* ---------- 18. Join ----------------------------------------------------- */

.join { max-width: 30rem; margin: clamp(2rem, 5vw, 2.75rem) auto 0; }
.field { display: block; margin-bottom: 1.1rem; text-align: left; }
.field span { display: block; margin-bottom: 0.45rem; font-size: 0.9375rem; color: var(--silver); }
.field input {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.2) inset;
  border-radius: 2px;
  color: var(--platinum);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.field input::placeholder { color: #5c636e; }
.field input:hover { box-shadow: 0 0 0 1px rgba(196, 203, 216, 0.34) inset; }
.field input:focus { background: rgba(255, 255, 255, 0.05); }
.join .btn { width: 100%; margin-top: 0.35rem; }
.join__note { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--dim); }
.join__err { margin-top: 0.9rem; color: var(--scam); font-size: 0.9375rem; }
.join__done { text-align: center; }
.join__done h3 { margin-bottom: 0.85rem; }

/* ---------- 19. Footer --------------------------------------------------- */

.footer { padding-block: clamp(3rem, 7vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: clamp(2rem, 5vw, 2.75rem);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; font-size: 0.9375rem; }
.footer a { color: var(--silver); text-decoration: none; transition: color 0.3s ease; }
.footer a:hover { color: var(--platinum); }
.footer__fine {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  font-size: 0.875rem;
  color: #6d747f;
  max-width: 44rem;
  line-height: 1.65;
}
/* The studio colophon, set exactly as on the other sites: a small italic
   lead-in and the wordmark as live text, not an image. A signature, not an
   advertisement. */
.colophon {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #6d747f;
  margin-top: 1.15rem;
}

/* bezier.studio wordmark, reproduced as live text the way the studio sets
   it: Space Grotesk 500, tight tracking, and a dotless i whose tittle is
   replaced by a hollow bezier anchor point. The subset carries only the
   glyphs this one word needs, so it costs 1.7 kB. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2e, U+62, U+64-65, U+69, U+6f, U+72-75, U+7a, U+131;
}
.bez {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.045em;
  /* line-height 1 is load-bearing: the anchor point is positioned from the
     bottom of the inline box, so an inherited line-height drops it onto the
     stem of the i instead of floating it above. */
  line-height: 1;
  color: #6d747f;
  text-decoration: none;
  margin-left: 3px;
  transition: color 0.35s ease;
}
.bez__sub { opacity: 0.6; }
.bez:hover, .bez:focus-visible { color: var(--silver); }
.bez__dotless { position: relative; display: inline-block; }
/* Floors, not pure em values: at this size 0.032em renders as a sub-pixel
   grey smudge, and the anchor point is the whole identity. */
.bez__dotless::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.74em;
  width: max(4px, 0.13em);
  height: max(4px, 0.13em);
  border: max(1px, 0.032em) solid #769aff;
  background: transparent;
}

/* ---------- 20. Reveals -------------------------------------------------- */

/* Scoped to html.js so that with JavaScript off or failed, nothing is ever
   invisible. The content is the site; the motion is decoration. */
.js .reveal { opacity: 0; transform: translateY(1.25rem); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.85s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- 21. Legal page ----------------------------------------------- */

.legal { padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 9vw, 6rem); }
.legal h2 { font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem); margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.legal h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.legal p, .legal li { margin-top: 1rem; max-width: 38rem; }
.legal ul { margin-top: 0.5rem; }
.legal li { position: relative; padding-left: 1.35rem; }
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--dim);
}
/* Numbered clauses. The number is the reference somebody will quote back at
   you, so it is set in the metal, not left grey. */
.legal ol.clauses { counter-reset: clause; margin-top: 0.5rem; }
.legal ol.clauses li {
  counter-increment: clause;
  position: relative;
  padding-left: 2.4rem;
  margin-top: 1.1rem;
  max-width: 38rem;
}
.legal ol.clauses li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  text-align: right;
  color: var(--silver);
  font-variant-numeric: tabular-nums;
  background: none;
  border-radius: 0;
  height: auto;
}

.legal__meta { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--dim); }
.tbc {
  color: var(--caution);
  border-bottom: 1px dotted rgba(224, 164, 63, 0.6);
}

/* ---------- 22. Motion, only if wanted ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .cue { display: none; }
}