/* =========================================================
   Trialist — shared dark theme (blog + legal pages)
   Mirrors the landing page tokens so the whole site is one system.
   ========================================================= */
:root {
  --ink: #07080b;
  --ink-2: #0a0c11;
  --panel: #0f1218;
  --panel-2: #161a22;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .055);
  --text: #e9ecf2;
  --muted: #8b93a2;
  --faint: #5c6675;
  --blue: #3b5bff;
  --violet: #a63bf0;
  --cyan: #4cc3ff;
  --pos: #34d399;
  --neg: #fb7185;
  --grad: linear-gradient(100deg, #2937f0, #9f1ae2);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Mulish", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: rgba(120, 90, 255, .35); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 760px; }
.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }

/* ---------- Nav ---------- */
header.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  backdrop-filter: blur(14px); background: rgba(7, 8, 11, .72);
  border-bottom: 1px solid var(--line-2);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; }
.brand img { height: 26px; width: auto; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .92rem; line-height: 1;
  padding: .72rem 1.1rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .25s, border-color .2s;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(74, 58, 220, .35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(74, 58, 220, .5); }
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: rgba(255,255,255,.28); }
.back-link { color: var(--muted); font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .45rem; transition: color .2s; }
.back-link:hover { color: var(--text); }
.back-link i { transition: transform .2s; }
.back-link:hover i { transform: translateX(-3px); }

/* ---------- Article / page header ---------- */
.page-header { position: relative; overflow: hidden; padding: 132px 0 52px; border-bottom: 1px solid var(--line-2); }
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 20%, transparent 72%);
}
.glow {
  position: absolute; z-index: 0; pointer-events: none; filter: blur(60px); opacity: .5;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 74, 255, .5), transparent 62%);
  top: -220px; left: -120px;
}
.glow.two { background: radial-gradient(circle, rgba(166, 59, 240, .38), transparent 62%); top: -80px; left: 260px; width: 420px; height: 420px; }
.page-header .inner { position: relative; z-index: 2; }
.page-header .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 20px 0 18px; }
.page-header .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 12px var(--pos); }
.page-title {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.05; margin: 0;
}

/* ---------- Article body ---------- */
.article { padding: 52px 0 40px; }
.post-body { }
.post-body .lead-in { font-size: 1.3rem; line-height: 1.6; color: var(--text); margin: 0 0 2rem; }
.post-body p, .post-body li { font-size: 1.12rem; line-height: 1.8; color: #c3cad6; }
.post-body p { margin: 0 0 1.3rem; }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body em { font-style: italic; color: #d6dbe6; }
.post-body h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.72rem;
  color: var(--text); letter-spacing: -.01em; margin: 2.9rem 0 1rem;
}
.post-body ul { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.post-body ul li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; }
.post-body ul li::before { content: ""; position: absolute; left: .1rem; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

.takeaway {
  position: relative; border: 1px solid var(--line); border-left: 3px solid transparent;
  border-image: var(--grad) 1; border-left-width: 3px;
  background: rgba(21, 26, 34, .6); border-radius: 12px; padding: 1.3rem 1.5rem; margin: 2.6rem 0;
}
.takeaway p { margin: 0; font-size: 1.08rem; color: #c9cfdb; }
.takeaway strong { color: var(--text); }

figure { margin: 2.6rem 0; }
figure figcaption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 1rem; line-height: 1.6; }
figure figcaption strong { color: var(--pos); }
.phone-frame {
  width: 300px; margin: 0 auto; border-radius: 40px; border: 10px solid #0c0e13; background: #0c0e13;
  overflow: hidden; box-shadow: 0 34px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-frame img { width: 100%; }

/* App-styled analysis readout (used inside posts) */
.analysis-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.4rem 1.5rem; margin: 2.2rem 0; color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.analysis-card .ac-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.analysis-card .ac-sub { font-size: .86rem; color: var(--faint); margin: .35rem 0 0; }
.ac-chip { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--mono); font-weight: 600; font-size: .8rem; padding: .22rem .55rem; border-radius: 7px; color: var(--pos); background: rgba(52,211,153,.13); }
.ac-compare { display: flex; align-items: flex-end; gap: 1rem; margin-top: .5rem; }
.ac-during { color: var(--cyan); font-weight: 800; font-size: 1.8rem; line-height: 1; }
.ac-baseline { color: #aeb6c4; font-weight: 800; font-size: 1.8rem; line-height: 1; }
.ac-arrow { color: var(--faint); }
.ac-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--line-2); }
.ac-row:first-of-type { border-top: 0; }
.ac-row .name { color: #dbe0ea; font-weight: 600; font-size: 1rem; }
.ac-row .val { font-family: var(--mono); color: var(--muted); font-size: .9rem; }
.ac-row .val b { color: var(--pos); font-weight: 600; }
.ac-caption { font-family: var(--mono); color: var(--faint); font-size: .78rem; margin: 1rem 0 0; letter-spacing: .02em; }

/* ---------- End CTA ---------- */
.post-cta { position: relative; overflow: hidden; text-align: center; padding: 84px 0; border-top: 1px solid var(--line-2); }
.post-cta .glow { top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: .5; width: 640px; height: 380px; }
.post-cta h2 { position: relative; z-index: 2; font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 26px; letter-spacing: -.02em; }
.post-cta .badge-wrap { position: relative; z-index: 2; }
.store-badge img { height: 52px; display: inline-block; }

/* ---------- Legal pages ---------- */
.legal { padding: 44px 0 72px; }
.legal .post-body h2 { font-size: 1.4rem; margin-top: 2.4rem; }
.legal .post-body h3 { font-family: var(--serif); font-weight: 600; color: var(--text); font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
.legal .updated { font-family: var(--mono); font-size: .8rem; color: var(--faint); letter-spacing: .06em; }
.legal a { color: var(--cyan); }
.legal a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
footer.foot { border-top: 1px solid var(--line-2); padding: 44px 0; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot .brand { font-size: 1rem; }
.foot-links { display: flex; gap: 20px; color: var(--muted); font-size: .9rem; }
.foot-links a:hover { color: var(--text); }
.foot-legal { color: var(--faint); font-size: .82rem; font-family: var(--mono); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .page-header { padding: 108px 0 40px; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .phone-frame { width: 100%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }