/* ═══════════════════════════════════════════════════════════════════════
   GLINT — "Daylight" web edition, shared foundation.

   One system with the app (Glint Voice v7): white paper, near black ink,
   colour spent only where it MEANS something. Instrument Serif owns the big
   lines, Geist owns the UI, Geist Mono owns specs and counters. CTAs are ink
   pills wearing a halo, never a coloured fill.

   Every page on the site links this file. Page specific layout stays in that
   page's own <style> block; tokens, chrome and document typography live here
   so there is exactly one place to change them.
   ═══════════════════════════════════════════════════════════════════════ */

/* Registered so a page can CROSSFADE between voices instead of snapping. */
@property --accent      { syntax: "<color>"; inherits: true; initial-value: #3A5F8F; }
@property --accent-deep { syntax: "<color>"; inherits: true; initial-value: #2A4569; }

:root {
  /* Ground and ink — the app's LIGHT palette, token for token */
  --bg:#FFFFFF; --bg-elev:#FAFAFB; --surface:#FFFFFF;
  --surface-2:#F4F4F6; --surface-3:#EBEBEF;
  --border:rgba(17,17,19,0.07); --border-strong:rgba(17,17,19,0.16); --divider:rgba(17,17,19,0.07);
  --ink:#111113; --ink-bright:#000000; --ink-inverse:#FFFFFF;
  --ink-2:rgba(17,17,19,0.62); --ink-3:rgba(17,17,19,0.42); --ink-4:rgba(17,17,19,0.25);

  /* The three voices — the only hues on the site (app light ramps) */
  --genuine:#41704A; --rizz:#3A5F8F; --roast:#A32A2A;

  --accent:#3A5F8F; --accent-deep:#2A4569;
  --accent-soft:color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-wash:color-mix(in srgb, var(--accent) 13%, transparent);

  --font:"Geist","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --serif:"Instrument Serif",Georgia,serif;

  --shadow-sm:0 1px 2px rgba(16,16,20,0.04), 0 4px 14px rgba(16,16,20,0.05);
  --shadow-md:0 8px 22px rgba(16,16,20,0.08), 0 2px 6px rgba(16,16,20,0.04);
  --shadow-lg:0 14px 34px rgba(16,16,20,0.11), 0 4px 10px rgba(16,16,20,0.05);
  --shadow-xl:0 30px 70px rgba(16,16,20,0.14), 0 8px 20px rgba(16,16,20,0.06);
  --halo:0 10px 30px var(--accent-glow);

  --ease:cubic-bezier(.2,.7,.3,1);   /* the app's curve */
  --expo:cubic-bezier(.16,1,.3,1);   /* the long settle */
  --max:1180px;
}

/* Guides and legal pages stay on the house voice: the accent means "which
   voice am I speaking in", so a page that is not speaking must not claim one. */
html[data-voice="genuine"] { --accent:#41704A; --accent-deep:#2E5234; }
html[data-voice="rizz"]    { --accent:#3A5F8F; --accent-deep:#2A4569; }
html[data-voice="roast"]   { --accent:#A32A2A; --accent-deep:#7A1F1F; }
html { transition:--accent .8s var(--expo), --accent-deep .8s var(--expo); }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body { margin:0; padding:0; max-width:100%; overflow-x:clip; }
body {
  font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.6;
  font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
button,input { font:inherit; color:inherit; }
::selection { background:var(--accent-wash); color:var(--ink-bright); }
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:#fff; }
::-webkit-scrollbar-thumb { background:#dcdce1; border-radius:10px; border:3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background:#c4c4cc; }
.container { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ─────────────────────────────────────────────────────  atmosphere  ── */
.fx { position:fixed; inset:0; pointer-events:none; z-index:0; }
.fx-aurora {
  background:
    radial-gradient(760px 520px at 78% -10%, var(--accent-soft), transparent 64%),
    radial-gradient(560px 560px at 4% 18%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 62%),
    radial-gradient(820px 560px at 52% 112%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-2.2%,1.6%,0) scale(1.07); }
}
.fx-grid {
  opacity:.55;
  background-image:linear-gradient(rgba(17,17,19,0.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(17,17,19,0.03) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(128% 76% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(128% 76% at 50% 0%,#000 0%,transparent 72%);
}
.fx-grain {
  opacity:.032; mix-blend-mode:multiply; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(1) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(2%,-3%)} 40%{transform:translate(-3%,2%)}
  60%{transform:translate(3%,3%)} 80%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}
.pointer-halo {
  position:fixed; top:0; left:0; width:560px; height:560px; z-index:1; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle, var(--accent-soft), transparent 62%); mix-blend-mode:multiply;
}
nav, main, footer { position:relative; z-index:2; }

/* ─────────────────────────────────────────────────  reveal system  ── */
[data-rv] {
  opacity:0; transform:translateY(26px) scale(.985); filter:blur(12px);
  transition:opacity .9s var(--expo), transform .9s var(--expo), filter .9s var(--expo);
  transition-delay:var(--d,0ms);
}
[data-rv].in { opacity:1; transform:none; filter:blur(0); }
[data-rv="fade"] { transform:none; filter:blur(8px); }
[data-rv="rise"] { transform:translateY(40px) scale(.97); }

.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); transition:letter-spacing 1.1s var(--expo);
}
[data-rv]:not(.in) .eyebrow, .eyebrow[data-rv]:not(.in) { letter-spacing:.62em; }
.eyebrow .bolt { width:12px; height:12px; fill:var(--accent); }
.eyebrow .tick { width:16px; height:1px; background:var(--accent-line); }

/* the refraction sweep */
.sweep { position:relative; overflow:hidden; isolation:isolate; }
.sweep::after {
  content:""; position:absolute; top:-40%; bottom:-40%; width:44%; left:0; z-index:4;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85) 46%, transparent);
  transform:translateX(-170%) rotate(6deg); pointer-events:none; opacity:0;
}
.sweep.lit::after { animation:refract 1.25s var(--expo) forwards; }
@keyframes refract {
  0%   { transform:translateX(-170%) rotate(6deg); opacity:0; }
  18%  { opacity:.9; }
  100% { transform:translateX(300%) rotate(6deg); opacity:0; }
}

/* ───────────────────────────────────────────────────────────  nav  ── */
.nav { position:fixed; top:14px; left:0; right:0; z-index:80; display:flex; justify-content:center; padding:0 16px; }
.nav-inner {
  display:flex; align-items:center; width:100%; max-width:var(--max);
  height:56px; padding:0 10px 0 20px; border-radius:999px;
  background:rgba(255,255,255,0.70);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border:1px solid transparent;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
.nav.stuck .nav-inner { border-color:var(--border); box-shadow:var(--shadow-md); background:rgba(255,255,255,0.85); }
.brand {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif); font-size:25px; letter-spacing:-.01em; line-height:1; padding-bottom:2px;
}
.brand .mark {
  width:17px; height:17px; fill:var(--accent);
  filter:drop-shadow(0 2px 6px var(--accent-glow)); transition:transform .5s var(--ease);
}
.brand:hover .mark { transform:translateY(-1px) rotate(-6deg); }
.nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a {
  font-size:13.5px; font-weight:500; color:var(--ink-2); padding:9px 13px; border-radius:999px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color:var(--ink); background:var(--surface-2); }
.nav-cta {
  background:var(--ink-bright) !important; color:var(--ink-inverse) !important;
  padding:11px 20px !important; font-weight:600 !important; margin-left:8px;
  box-shadow:var(--halo); transition:transform .3s var(--ease), box-shadow .4s var(--ease) !important;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 14px 34px var(--accent-glow); }

/* ───────────────────────────────────────────────────────  buttons  ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 26px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em; cursor:pointer; border:none;
  transition:transform .3s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.btn-primary { background:var(--ink-bright); color:#fff; box-shadow:var(--halo); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 38px var(--accent-glow); }
.btn-ghost { background:var(--surface-2); color:var(--ink); }
.btn-ghost:hover { background:var(--surface-3); transform:translateY(-2px); }

/* ─────────────────────────────────────  display type (shared scale)  ── */
h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(50px, 7.2vw, 90px); line-height:.98; letter-spacing:-.022em; margin:0 0 22px;
}
h1 em { font-style:italic; color:var(--accent); }
h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 4.6vw, 60px); line-height:1.04; letter-spacing:-.02em; margin:18px 0 16px;
}
h2 em { font-style:italic; color:var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   DOCUMENT pages — guides and legal. Narrow measure, serif headings,
   the same cards and hairlines as the landing page at reading scale.
   ══════════════════════════════════════════════════════════════════════ */
.doc { padding:132px 0 96px; }
.doc .container { max-width:760px; }

.doc .meta {
  display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.doc .meta .tick { width:18px; height:1px; background:var(--accent-line); }

.doc h1 { font-size:clamp(38px, 5.4vw, 62px); line-height:1.02; margin:0 0 20px; }
.doc .lede { font-size:19.5px; line-height:1.62; color:var(--ink-2); margin:0 0 14px; }
.doc h2 {
  font-size:clamp(27px, 3.2vw, 38px); line-height:1.1; margin:58px 0 14px;
}
.doc h3 {
  font-family:var(--font); font-size:17.5px; font-weight:700; letter-spacing:-.02em;
  margin:34px 0 10px; color:var(--ink);
}
.doc p, .doc li { font-size:16.5px; line-height:1.75; color:var(--ink-2); }
.doc p { margin:0 0 18px; }
.doc ul, .doc ol { padding-left:22px; margin:14px 0 22px; }
.doc li { margin-bottom:10px; }
.doc li::marker { color:var(--ink-4); }
.doc strong { color:var(--ink); font-weight:600; }
.doc em { color:var(--ink); font-style:italic; }
.doc a { color:var(--accent); font-weight:500; border-bottom:1px solid var(--accent-line); }
.doc a:hover { border-bottom-color:var(--accent); }
/* a pill is an object, not a link in a sentence: it must outrank `.doc a` */
.doc a.btn { border-bottom:0; font-weight:600; }
.doc a.btn-primary { color:var(--ink-inverse); }
.doc a.btn-ghost { color:var(--ink); }
.doc hr { border:0; border-top:1px solid var(--divider); margin:46px 0; }

/* a quoted message, in the app's bubble shape */
.doc blockquote {
  margin:20px 0; padding:14px 18px; border-radius:20px 20px 20px 7px;
  background:var(--surface-2); color:var(--ink); font-size:16px; line-height:1.6;
}
.doc blockquote p:last-child { margin-bottom:0; }

/* the example cards — the site's one recurring object */
.reply-block {
  position:relative; margin:16px 0; padding:18px 20px 18px 22px; border-radius:22px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .5s var(--ease);
}
.reply-block:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.reply-block::before {
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px;
  background:var(--accent); border-radius:2px;
}
.reply-block .label {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.reply-block .prompt { font-size:14px; color:var(--ink-3); margin:6px 0 12px; font-style:italic; line-height:1.6; }
.reply-block .reply {
  font-family:var(--serif); font-size:21px; line-height:1.42; letter-spacing:-.01em; color:var(--ink);
}
.reply-block.bad::before { background:var(--roast); }
.reply-block.bad .label { color:var(--roast); }
.reply-block.bad .reply { color:var(--ink-3); }
.reply-block.good::before { background:var(--accent); }

/* ticked list, the app's selection tick */
.checklist { list-style:none; padding-left:0 !important; }
.checklist li { position:relative; padding-left:30px; margin-bottom:13px; }
.checklist li::before {
  content:""; position:absolute; left:0; top:5px; width:18px; height:18px; border-radius:6px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.checklist li::after {
  content:""; position:absolute; left:5px; top:10px; width:8px; height:4px;
  border-left:1.8px solid var(--accent); border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* in document CTA — the landing page's join strip at article scale */
.doc-cta {
  position:relative; margin:64px 0 0; padding:40px 36px; border-radius:32px; overflow:hidden;
  background:linear-gradient(168deg, color-mix(in srgb, var(--accent) 8%, #fff), var(--surface) 66%);
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.doc-cta::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 88% -10%, var(--accent-wash), transparent 60%);
}
.doc-cta > * { position:relative; }
.doc-cta h3 {
  font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.1; letter-spacing:-.02em;
  margin:14px 0 10px;
}
.doc-cta h3 em { font-style:italic; color:var(--accent); }
.doc-cta p { font-size:16px; color:var(--ink-2); margin:0 0 24px; max-width:34em; }

/* related reading */
.related { margin:60px 0 0; padding-top:34px; border-top:1px solid var(--divider); }
.related h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px; font-weight:500;
}
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.related-grid a {
  display:block; padding:20px 22px; border-radius:22px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); font-weight:400;
  transition:transform .45s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.related-grid a:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent-line); }
.related-grid .k {
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.related-grid .t { display:block; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.35; }

/* ────────────────────────────────────────────────────────  footer  ── */
footer { border-top:1px solid var(--divider); padding:64px 0 0; position:relative; overflow:hidden; }
.foot-top { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr); gap:48px; padding-bottom:44px; }
.foot-top .lead p { font-size:14.5px; line-height:1.65; color:var(--ink-2); max-width:30em; margin:14px 0 0; }
.foot-links { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.foot-col h4 {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; font-weight:500;
}
.foot-col a { display:block; font-size:14.5px; color:var(--ink-2); padding:5px 0; transition:color .25s ease; }
.foot-col a:hover { color:var(--accent); }
.foot-bottom {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 0 24px; border-top:1px solid var(--divider); font-size:13px; color:var(--ink-3);
}
.watermark {
  font-family:var(--serif); font-size:clamp(90px,20vw,260px); line-height:.78; text-align:center;
  color:var(--ink); opacity:.04; user-select:none; pointer-events:none;
  margin:0 0 -.14em; letter-spacing:-.03em;
}

/* ────────────────────────────────────────────────────  responsive  ── */
@media (max-width:1000px) {
  .foot-top { grid-template-columns:1fr; gap:34px; }
}
@media (max-width:760px) {
  .nav { top:10px; }
  .nav-inner { height:52px; padding:0 8px 0 16px; }
  .nav-links a:not(.nav-cta) { display:none; }
  .nav-cta { padding:10px 17px !important; font-size:13px !important; }
  .container { padding:0 20px; }
  .doc { padding:104px 0 80px; }
  .doc-cta { padding:30px 24px; border-radius:26px; }
  .related-grid { grid-template-columns:1fr; }
  .foot-links { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; }
  [data-rv] { opacity:1 !important; transform:none !important; filter:none !important; }
  html { scroll-behavior:auto; }
}