/* ─────────────────────────────────────────────────────────
   Echelon | the shared look for the quieter public pages
   (reviews, terms, privacy, moderator invite).

   Same language as the landing (/echelon/): warm black, Inter for
   the words, the logo's Instrument Serif italic in lit gold on the
   accent word, glass on anything that floats, the capsule nav and
   the footer with the name set big and fading. Each page loads
   Inter + Instrument Serif from Google Fonts in its own head.
   2026-10-16 refine pass: these pages were still on the August look
   (system font, 10px captions, a plain bar on top).
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* the house fonts from this site (audit 10-17: the Google swap moved the reviews page on phones), with fallbacks
   measured against the real faces so the words keep their width while the fonts load */
@font-face { font-family: 'Inter'; src: url('/echelon/assets/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/echelon/assets/fonts/instrument-serif-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/echelon/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 104.5%; ascent-override: 92.8%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: 'Serif Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 81.6%; ascent-override: 121%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: 'Serif Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 85.6%; ascent-override: 115.7%; descent-override: 36.2%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bg: #0a0908; --panel: #101114; --panel-2: #16171a;
  --ink: #f1f2f5; --ink-2: #d0d1d4; --muted: #a39c90; --faint: #878177; /* #6f695f was 3.7:1 on the black; this clears AA */
  --line: rgba(232, 236, 242, 0.08); --line-2: rgba(232, 236, 242, 0.15);
  --gold: #b9c0cb; --gold-2: #d5dbe3; --gold-3: #f0f6fd; --gold-deep: #8b929e;
  --good: #8fc98a; --bad: #e59a8a;
  --sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Serif Fallback', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(20px, calc(5 * var(--vw, 1vw)), 48px);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
}

html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  min-height: calc(100 * var(--vh, 1vh));
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(185, 192, 203, 0.3); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: calc(1180px + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.kicker { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--gold-2); }

/* a little warmth up top, where the eye starts */
.glow { position: absolute; left: 50%; top: -260px; z-index: -1; width: min(1200px, 100%); height: 620px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(185, 192, 203, 0.11), rgba(185, 192, 203, 0.03) 55%, transparent 75%); }

/* the accent words: the logo's serif, italic, in a gold that catches the light */
.gt {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.012em;
  padding-right: 0.08em; margin-right: -0.04em;
  background-image: linear-gradient(100deg, transparent 38%, rgba(243, 244, 247, 0.95) 50%, transparent 62%), linear-gradient(180deg, #f0f6fd 0%, #d3d9e0 48%, #aab0b7 78%, #8b929e 100%);
  background-size: 260% 100%, 100% 100%; background-position: 140% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .gt.shine { animation: shine 8s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite; }
  @keyframes shine { 0% { background-position: 140% 0, 0 0; } 34%, 100% { background-position: -40% 0, 0 0; } }
}

/* ── buttons ── */
.btn {
  --h: 48px;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 24px; border: 0; border-radius: 999px;
  font: 600 15px/1 var(--sans); letter-spacing: -0.006em; white-space: nowrap; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, background-position 0.7s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}
.btn .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }
.btn-gold {
  color: #0f1114;
  background: linear-gradient(110deg, #b9c0cb 0%, #d5dbe3 32%, #9aa1ac 64%, #b9c0cb 100%);
  background-size: 300% 100%; background-position: 0% 0;
  box-shadow: inset 0 1px 0 rgba(240, 243, 247, 0.65), inset 0 -1px 0 rgba(40, 46, 56, 0.38), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px -14px rgba(185, 192, 203, 0.7);
}
.btn-gold:hover { background-position: 100% 0; transform: translateY(-2px); }
.btn-gold::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-gold:hover::after { animation: sheen 0.7s ease; }
  @keyframes sheen { 0% { left: -70%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
}
.btn-ghost { background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(213, 219, 227, 0.45); }
.btn.sm { --h: 40px; padding: 0 18px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

/* ── the nav: a glass capsule, the same one the landing wears ── */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.nav-in {
  pointer-events: auto; width: 100%; max-width: 1100px; height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 10px 0 16px; border-radius: 999px;
  background: rgba(13, 14, 17, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(240, 243, 247, 0.06), 0 12px 34px -20px rgba(0, 0, 0, 0.9);
  transition: max-width 0.6s var(--ease), height 0.5s var(--ease), background 0.4s ease, box-shadow 0.4s ease;
}
.nav.on .nav-in { max-width: 860px; height: 56px; background: rgba(13, 14, 17, 0.8); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(240, 243, 247, 0.07), 0 18px 44px -18px rgba(0, 0, 0, 0.95); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; color: var(--ink); }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-2); }
.nav-r { display: flex; align-items: center; gap: 4px; }
.nav-link { height: 40px; padding: 0 15px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; }
.nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav .btn { margin-left: 4px; }
@media (max-width: 520px) {
  .nav { top: 10px; padding: 0 10px; }
  .nav-in, .nav.on .nav-in { height: 54px; padding: 0 7px 0 12px; }
  .nav-link { padding: 0 12px; font-size: 14px; }
  .nav-link.wide-only { display: none; }
}

/* ── page head ── */
.page { position: relative; isolation: isolate; overflow-x: clip; padding-top: clamp(132px, calc(18 * var(--vh, 1vh)), 190px); }
.ph { text-align: center; }
.ph h1 { margin-top: 14px; font-size: clamp(46px, calc(6.4 * var(--vw, 1vw)), 92px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.98; }
.ph h1 .gt { font-size: 1.08em; }
.ph .lede { margin: 22px auto 0; max-width: 34em; color: var(--muted); font-size: clamp(16px, calc(1.2 * var(--vw, 1vw)), 18.5px); line-height: 1.6; }

/* reveals: settle up into place as they arrive (opacity and transform only) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* glass, with light that follows the pointer */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(213, 219, 227, 0.1), transparent 46%);
  opacity: 0; transition: opacity 0.4s ease;
}
@media (hover: hover) { .spot:hover::after { opacity: 1; } }

/* ── reviews ── */
.ratesum { margin: clamp(40px, calc(6 * var(--vh, 1vh)), 64px) auto clamp(32px, calc(5 * var(--vh, 1vh)), 52px); max-width: 440px; display: flex; gap: 24px; align-items: center; padding: 22px 24px; border-radius: 24px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }
.ratesum .left { text-align: center; flex: none; }
.ratesum .big { font-size: 58px; font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.ratesum .rs-stars { color: var(--gold-2); font-size: 13px; letter-spacing: 3px; margin: 10px 0 4px; }
.ratesum .n { font-size: 12.5px; color: var(--faint); }
.ratesum .bars { flex: 1; display: grid; gap: 7px; }
.ratesum .r { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--faint); }
.ratesum .r b { width: 8px; font-weight: 600; color: var(--muted); }
.ratesum .track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ratesum .track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); width: 0; transition: width 1.3s cubic-bezier(0.77, 0, 0.175, 1); }
.ratesum.in .track i { width: var(--w); }
.ratesum .r:nth-child(2) i { transition-delay: 0.08s; } .ratesum .r:nth-child(3) i { transition-delay: 0.16s; } .ratesum .r:nth-child(4) i { transition-delay: 0.24s; } .ratesum .r:nth-child(5) i { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .ratesum .track i { transition: none; width: var(--w); } }
.rev-cols { columns: 3; column-gap: 18px; }
.rev {
  position: relative; break-inside: avoid; margin-bottom: 18px; padding: 28px 28px 24px; border-radius: 26px; overflow: hidden;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, 0.9);
  transition: box-shadow 0.4s ease, transform 0.5s var(--ease);
}
.rev::before { content: "\201D"; position: absolute; z-index: -1; top: 6px; right: 20px; font: italic 150px/1 var(--serif); color: rgba(213, 219, 227, 0.1); pointer-events: none; }
@media (hover: hover) { .rev:hover { box-shadow: inset 0 0 0 1px rgba(213, 219, 227, 0.28), 0 34px 70px -40px rgba(0, 0, 0, 0.95); transform: translateY(-3px); } }
.rev .stars { display: block; color: var(--gold-2); font-size: 13px; letter-spacing: 3px; }
.rev p { margin: 16px 0 22px; font-size: clamp(17px, calc(1.3 * var(--vw, 1vw)), 19.5px); line-height: 1.5; letter-spacing: -0.012em; color: var(--ink-2); }
.rev .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--faint); }
.rev .ava {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(140deg, var(--gold-2), var(--gold-deep)); color: #0f1114;
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(10, 9, 8, 0.9), 0 0 0 3px rgba(213, 219, 227, 0.35);
}
.rev .ava img { width: 100%; height: 100%; object-fit: cover; }
.rev .who b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .rev-cols { columns: 2; } }
@media (max-width: 640px) { .rev-cols { columns: 1; } }
.empty { text-align: center; color: var(--muted); font-size: 15px; margin-top: 40px; }
.cta-line { margin-top: clamp(28px, calc(4 * var(--vh, 1vh)), 48px); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ── legal pages: contents on the left, the words on the right ── */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; margin-top: clamp(48px, calc(7 * var(--vh, 1vh)), 80px); align-items: start; }
.toc { position: sticky; top: 104px; display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.toc a { position: relative; display: block; padding: 5px 0; font-size: 14px; color: var(--faint); transition: color 0.2s ease; }
.toc a::before { content: ""; position: absolute; left: -15px; top: 7px; bottom: 7px; width: 1px; background: var(--gold-2); opacity: 0; transition: opacity 0.25s ease; }
.toc a:hover { color: var(--ink-2); }
.toc a.on { color: var(--ink); }
.toc a.on::before { opacity: 1; }
.prose { max-width: 68ch; }
.prose section { padding: 34px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.prose section:first-child { border-top: 0; padding-top: 0; }
.prose h2 { font-size: clamp(22px, calc(1.9 * var(--vw, 1vw)), 28px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.2; }
.prose p, .prose li { margin-top: 14px; color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.prose ul { list-style: none; margin-top: 4px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: 0.82em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.75; }
.prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--gold-2); border-bottom: 1px solid rgba(213, 219, 227, 0.3); transition: border-color 0.2s ease, color 0.2s ease; }
.prose a:hover { color: var(--gold-3); border-color: var(--gold-2); }
.updated { margin-top: 18px; font-size: 14px; color: var(--faint); }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}

/* ── footer: dense, then the name, big and fading ── */
.foot { position: relative; margin-top: clamp(110px, calc(16 * var(--vh, 1vh)), 190px); padding-top: 46px; border-top: 1px solid var(--line); overflow: hidden; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: var(--muted); }
.foot-links a { transition: color 0.2s ease; }
.foot-links a:hover { color: var(--gold-2); }
.risk { margin-top: 34px; color: var(--muted); font-size: 12.5px; line-height: 1.8; max-width: 92ch; }
.base { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
.mark {
  margin: clamp(34px, calc(6 * var(--vh, 1vh)), 70px) 0 -0.14em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font-weight: 800; font-size: clamp(92px, calc(24 * var(--vw, 1vw)), 360px); letter-spacing: -0.075em; line-height: 0.8;
  background: linear-gradient(180deg, rgba(240, 246, 253, 0.2) 0%, rgba(240, 246, 253, 0.04) 62%, rgba(240, 246, 253, 0) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── a single card in the middle of the screen (moderator invite) ── */
.solo { min-height: calc(100 * var(--vh, 1vh)); display: grid; place-items: center; padding: 96px 20px 40px; position: relative; isolation: isolate; overflow: hidden; }
.solo .glow { top: -220px; }
.card {
  position: relative; width: 100%; max-width: 440px; padding: 34px 32px 30px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(240, 243, 247, 0.06), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.card .brand { margin-bottom: 26px; }
.card h1 { font-size: clamp(30px, calc(4 * var(--vw, 1vw)), 38px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; }
.card h1 .gt { font-size: 1.1em; }
.card .sub { margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.inp {
  width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 14px;
  background: rgba(0, 0, 0, 0.35); color: var(--ink); font: 400 16px var(--sans);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 0.2s ease, background 0.2s ease;
}
.inp::placeholder { color: var(--faint); }
.inp:focus { outline: none; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(213, 219, 227, 0.6), 0 0 0 4px rgba(185, 192, 203, 0.12); }
.pw { position: relative; }
.pw .inp { padding-right: 70px; }
.pw .toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; }
.pw .toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.help { display: block; margin-top: 8px; font-size: 13px; color: var(--faint); }
.card form .btn { margin-top: 26px; }
.msg { margin-top: 16px; font-size: 14px; padding: 13px 15px; border-radius: 14px; display: none; line-height: 1.5; }
.msg.ok { display: block; background: rgba(143, 201, 138, 0.1); color: var(--good); box-shadow: inset 0 0 0 1px rgba(143, 201, 138, 0.28); }
.msg.err { display: block; background: rgba(229, 154, 138, 0.1); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(229, 154, 138, 0.28); }
.msg a { color: var(--gold-2); font-weight: 600; }
.card .after { margin-top: 22px; font-size: 13.5px; color: var(--faint); text-align: center; }
.done .after, .done form { display: none; }
.legal-h { margin-top: 14px; font-size: clamp(44px, calc(6 * var(--vw, 1vw)), 84px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.legal-h .gt { font-size: 1.08em; }

/* ── 10-17 audit, public funnel ── */
/* reviews: the cards' room is held by skeletons shaped like them until the list arrives (the late cards pushed the
   footer and Join off a phone screen), and the cards keep their gap under the lede when the rating summary is off */
.ratesum[hidden] + .rev-cols { margin-top: clamp(40px, calc(6 * var(--vh, 1vh)), 64px); }
.rev-skel { pointer-events: none; }
.rev-skel::before { display: none; }
.rev-skel i { display: block; height: 13px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); }
.rev-skel .sk-stars { width: 86px; }
.rev-skel .sk-text { margin: 20px 0 26px; display: grid; gap: 12px; }
.rev-skel .sk-text i { height: 15px; }
.rev-skel .sk-text i:last-child { width: 62%; }
.rev-skel .who i { height: 12px; width: 110px; }
.rev-skel .ava { background: rgba(255, 255, 255, 0.07); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .rev-skel i, .rev-skel .ava { animation: sk-pulse 1.4s ease-in-out infinite; } @keyframes sk-pulse { 50% { opacity: 0.45; } } }