/* StellarReach — shared marketing-site chrome.
 *
 * Loaded AFTER landing.css, which it builds on: it reuses landing.css's theme
 * variables, animated starfield, button system (.btn*), section/card/feature
 * primitives, and the fade-up + reduced-motion rules. This file only adds the
 * pieces the multi-page public site needs and the standalone landing.html /
 * for-agencies.html pages do not — a sticky responsive header with a mobile
 * menu, interior page heroes, a multi-column footer, the pricing grid, the
 * features rows, and the legal (privacy / terms) prose layout.
 */

/* ---------- Sticky responsive header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 6, 15, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
}
.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.brand-name {
  background: linear-gradient(95deg, #e8ecff 42%, #21d4fd 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Solid-color fallback: without background-clip:text the gradient fill renders the
   text transparent (invisible). Restore a readable color where it's unsupported. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name { color: #fff; -webkit-text-fill-color: #fff; }
}
.brand__mark { width: 1.45rem; height: 1.45rem; flex: none; filter: drop-shadow(0 0 4px rgba(33, 212, 253, 0.35)) drop-shadow(0 2px 5px rgba(124, 92, 255, 0.4)); }

.site-nav { display: flex; align-items: center; gap: 1.8rem; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.site-nav__links a:hover { color: var(--text); }
.site-nav__links a[aria-current="page"] { color: #fff; }

.site-nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.nav-login {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.nav-login:hover { color: var(--text); }

/* Hamburger — hidden on desktop, shown on narrow screens */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s, opacity 0.2s;
}
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 1.5rem 1.3rem;
    background: rgba(8, 10, 26, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__links li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .site-nav__links a { display: block; padding: 0.95rem 0.2rem; }
  .site-nav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-top: 1rem;
  }
  .site-nav__actions .nav-login { padding: 0.4rem 0.2rem; }
  .site-nav__actions .btn { width: 100%; text-align: center; }
}

/* ---------- Interior page hero ---------- */
.page-hero {
  max-width: 840px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 1.5rem;
  text-align: center;
  animation: fade-up 0.8s ease both;
}
.page-hero__title {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Roomier line box + a hair of bottom padding so descenders (the "y" tail) are
     not clipped — background-clip:text crops anything outside the line box. */
  line-height: 1.15;
  padding-bottom: 0.12em;
  margin-bottom: 1rem;
  background: linear-gradient(120deg, #fff 18%, var(--accent-2) 70%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Solid-color fallback where background-clip:text is unsupported (else invisible). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-hero__title { color: #fff; -webkit-text-fill-color: #fff; }
}
.page-hero__sub {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 auto;
}
/* Breathing room between the hero copy and its CTA buttons. */
.page-hero .cta-row { margin-top: 2rem; }

/* ---------- Generic helpers ---------- */
.center { text-align: center; }
.lead-text { color: var(--text-dim); font-size: 1.08rem; max-width: 680px; margin: 0 auto 2rem; text-align: center; }
.section--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ---------- Features page: alternating rows ---------- */
.feature-rows {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  gap: 1.6rem;
}
.feature-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.4rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2.2rem;
  transition: border-color 0.2s;
}
.feature-row:hover { border-color: var(--accent-2); }
.feature-row:nth-child(even) .feature-row__visual { order: -1; }
.feature-row__kicker {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0.7rem;
}
.feature-row__body h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.feature-row__body > p { color: var(--text-dim); }
.feature-row__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.feature-row__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text);
  font-size: 0.96rem;
}
.feature-row__list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}
.feature-row__visual {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(124, 92, 255, 0.28), transparent 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
}
.feature-row__visual svg { width: 96px; height: 96px; filter: drop-shadow(0 6px 22px rgba(124, 92, 255, 0.45)); }

@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.8rem; }
  .feature-row:nth-child(even) .feature-row__visual { order: 0; }
  .feature-row__visual { min-height: 140px; }
}

/* ---------- Pricing ---------- */
.pricing { max-width: 1260px; margin: 0 auto; padding: 2rem 1.5rem; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
.plan__price-sub {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: -1rem 0 1.5rem;
}
.plan__price-sub strong { color: var(--text); }
.plan {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  transition: transform 0.2s, border-color 0.2s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--accent-2); }
.plan--featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: 0 12px 44px rgba(124, 92, 255, 0.28);
}
.plan__badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  white-space: nowrap;
}
.plan__name { margin: 0; font-size: 1.25rem; font-weight: 800; }
.plan__best { color: var(--text-dim); font-size: 0.92rem; margin-top: 0.35rem; }
.plan__price { margin: 1.3rem 0 0.15rem; font-size: 2.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.plan__price span { font-size: 1rem; font-weight: 600; color: var(--text-dim); }
.plan__price-note { color: var(--text-dim); font-size: 0.84rem; margin-bottom: 1.5rem; }
.plan__features {
  list-style: none;
  margin: 0 0 1.7rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.plan__features li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text);
  font-size: 0.95rem;
}
.plan__features li::before { content: "✦"; position: absolute; left: 0; color: var(--accent-2); }
.plan .btn { margin-top: auto; text-align: center; }
/* Reserve equal height for the "Best for…" blurb so the price rows stay level
   across columns when the cards sit side by side (Agency's blurb wraps to three
   lines while the others are two). Not applied to the single-column stacked
   layout below 561px, where each card is independent and the extra gap is noise. */
@media (min-width: 561px) {
  .plan__best { min-height: 4.4rem; }
}

@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

.usage-note {
  max-width: 860px;
  margin: 2.6rem auto 0;
  background: rgba(33, 212, 253, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.6rem 1.9rem;
}
.usage-note h2 { font-size: 1.15rem; margin-bottom: 0.5rem; font-weight: 700; }
.usage-note p { color: var(--text-dim); font-size: 0.97rem; }
.usage-note p + p { margin-top: 0.7rem; }

/* ---------- FAQ (native <details>) ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 0.8rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0 1.4rem;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 0;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--accent-2);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { color: var(--text-dim); font-size: 0.96rem; margin: 0 0 1.2rem; }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal { max-width: 800px; margin: 0 auto; padding: 1rem 1.5rem 4.5rem; }
.legal__meta {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--card-border);
}
.legal__meta strong { color: var(--text); }
.legal__toc {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.3rem 1.6rem;
  margin-bottom: 2.6rem;
}
.legal__toc h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 0.9rem;
}
.legal__toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 1.6rem; }
.legal__toc li { margin-bottom: 0.45rem; break-inside: avoid; }
.legal__toc a { color: var(--text-dim); text-decoration: none; font-size: 0.92rem; }
.legal__toc a:hover { color: var(--accent-2); }

.legal section { margin-bottom: 2.3rem; scroll-margin-top: 90px; }
.legal h2.legal__h {
  font-size: 1.4rem;
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.legal h3 { font-size: 1.08rem; margin: 1.4rem 0 0.5rem; color: #fff; }
.legal p, .legal li { color: var(--text-dim); font-size: 0.98rem; line-height: 1.72; }
.legal p { margin-bottom: 0.9rem; }
.legal ul, .legal ol { margin: 0 0 1rem 1.3rem; }
.legal li { margin-bottom: 0.45rem; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent-2); }
.legal table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: 0.92rem; }
.legal th, .legal td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-dim);
  vertical-align: top;
}
.legal th { color: #fff; font-weight: 700; }
.legal__backlinks { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--card-border); font-size: 0.9rem; }
.legal__backlinks a { color: var(--accent-2); text-decoration: none; }

@media (max-width: 560px) {
  .legal__toc ol { columns: 1; }
}

/* ---------- Multi-column footer ---------- */
.site-footer--full { text-align: left; padding: 3.2rem 1.5rem 2.2rem; }
.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2.2rem;
}
.footer-col h2 {
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.9rem;
}
.footer-col a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.26rem 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent-2); }
.footer-col--brand .brand { font-size: 1.2rem; margin-bottom: 0.7rem; }
.footer-tagline { color: var(--text-dim); font-size: 0.9rem; max-width: 280px; }
.footer-bottom {
  max-width: 1100px;
  margin: 2.4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 440px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 2.4rem;
  align-items: start;
}
.contact-form { display: grid; gap: 1.1rem; }
.contact-form .field { display: grid; gap: 0.4rem; }
/* display:grid above overrides the UA [hidden] rule — the OAuth-ticket signup
   mode hides the email/password fields via the hidden attribute. */
.contact-form .field[hidden] { display: none; }
.contact-form label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(33, 212, 253, 0.15);
}
.contact-form select option { color: #0b1026; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { justify-self: start; }
.hidden-field { display: none; }
.form-status { margin: 0.2rem 0 0; font-size: 0.95rem; padding: 0.75rem 0.95rem; border-radius: 10px; }
.form-status--ok { color: #c8ffe0; background: rgba(33, 212, 253, 0.10); border: 1px solid var(--card-border); }
.form-status--err { color: #ffd6de; background: rgba(255, 90, 120, 0.10); border: 1px solid rgba(255, 90, 120, 0.32); }
.form-status a { color: var(--accent-2); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.contact-aside { display: grid; gap: 1rem; }
.contact-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.contact-card p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.3rem; }
.contact-card a { color: var(--accent-2); text-decoration: none; word-break: break-word; }
.contact-card a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Signup (create workspace) ---------- */
/* Prominent post-signup confirmation (form hidden, this is the next step).
   Mirror of the styles.css rules of the same name — signup.html loads only
   landing.css + site.css, so the rules must exist here to apply. */
.signup-success {
  display: block;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  line-height: 1.5;
}
.signup-success strong { display: inline-block; margin-bottom: .25rem; font-size: 1.05rem; }
/* Spam-folder heads-up: its own block so it reads as a distinct instruction. */
.signup-success__spam { display: block; margin-top: .6rem; font-size: .95rem; }

.signup-wrap { max-width: 460px; margin: 0 auto; padding: 0.5rem 1.5rem 2.5rem; }
.signup-wrap .contact-form .btn { width: 100%; text-align: center; justify-self: stretch; }
.signup-hint { color: var(--text-dim); font-size: 0.88rem; margin: 0; }
.signup-wrap > .signup-hint { text-align: center; margin-top: 1rem; }
.signup-consent { margin-top: 0.2rem; }
.signup-consent a, .signup-wrap .signup-hint a { color: var(--accent-2); text-decoration: none; }
.signup-consent a:hover, .signup-wrap .signup-hint a:hover { text-decoration: underline; }
.signup-plan {
  text-align: center;
  background: rgba(33, 212, 253, 0.08);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.4rem;
}
/* A text-styled button (e.g. "resend it") that reads as an inline link. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-2);
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Forced-colors / high-contrast fallback ----------
   The hero, page-hero, section and brand titles paint their text via a clipped
   gradient (color: transparent). In forced-colors mode the gradient is dropped
   and transparent text would render invisible, so restore a system text colour. */
@media (forced-colors: active) {
  .hero__title,
  .page-hero__title,
  .section__title,
  .brand-name {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
}

/* Horizontal-scroll wrapper for wide legal tables so they never force the whole
   page to scroll sideways on narrow viewports. */
.legal__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.1rem 0; }
.legal__table-wrap > table { margin: 0; }
.legal caption { text-align: left; color: var(--text-dim); font-size: 0.85rem; padding-bottom: 0.5rem; caption-side: top; }
/* Inline code (e.g. the long Google OAuth scope URLs in the privacy policy) can
   be unbreakable strings; let them wrap so they never force the whole page to
   scroll sideways on narrow viewports. */
.legal code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Blog — index listing (/blog) + post prose (/blog/<slug>). Built on the same
   tokens and layout primitives as the rest of the marketing site (.page-hero,
   .card grid, the .legal prose rhythm) so it inherits the shared look without a
   new design system. Post bodies reuse the .legal reading column conventions.
   --------------------------------------------------------------------------- */
.blog-list { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.post-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: 1.8rem 1.6rem; text-decoration: none; transition: transform 0.2s, border-color 0.2s; }
.post-card:hover, .post-card:focus-visible { transform: translateY(-4px); border-color: var(--accent-2); }
.post-card__tag { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; }
.post-card__title { font-size: 1.22rem; color: #fff; margin: 0.6rem 0 0.6rem; line-height: 1.3; letter-spacing: -0.01em; }
.post-card__excerpt { color: var(--text-dim); font-size: 0.96rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.post-card__meta { font-size: 0.82rem; color: var(--text-dim); opacity: 0.85; }
.post-card__more { color: var(--accent-2); font-size: 0.9rem; font-weight: 600; margin-top: 0.9rem; }

.post { max-width: 760px; margin: 0 auto; padding: 1rem 1.5rem 4.5rem; }
.post__meta { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.8rem; }
.post__meta .post__tag { color: var(--accent-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.post h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); color: #fff; margin: 2.2rem 0 0.7rem; letter-spacing: -0.01em; scroll-margin-top: 90px; }
.post h3 { font-size: 1.08rem; margin: 1.5rem 0 0.5rem; color: #fff; }
.post p, .post li { color: var(--text-dim); font-size: 1rem; line-height: 1.75; }
.post p { margin-bottom: 1rem; }
.post ul, .post ol { margin: 0 0 1.1rem 1.3rem; }
.post li { margin-bottom: 0.5rem; }
.post strong { color: var(--text); }
.post a:not(.btn) { color: var(--accent-2); }
.post blockquote { margin: 1.4rem 0; padding: 0.6rem 0 0.6rem 1.2rem; border-left: 3px solid var(--accent-2); color: var(--text); font-style: italic; }
.post table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: 0.92rem; }
/* Horizontal-scroll wrapper for wide post/compare tables (same pattern as the
   legal tables) so a 3-column table never forces the page sideways on phones. */
.post__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.3rem 0; }
.post__table-wrap > table { margin: 0; }
.post th, .post td { border: 1px solid var(--card-border); padding: 0.6rem 0.8rem; text-align: left; color: var(--text-dim); vertical-align: top; }
.post th { color: #fff; background: rgba(124, 92, 255, 0.08); }
.post__back { display: inline-block; margin-bottom: 1.4rem; color: var(--text-dim); text-decoration: none; font-size: 0.9rem; }
.post__back:hover { color: var(--accent-2); }
.post__cta { margin-top: 2.6rem; padding: 1.8rem; background: rgba(124, 92, 255, 0.06); border: 1px solid var(--card-border); border-radius: 18px; text-align: center; }
.post__cta h3 { margin-top: 0; }
.post__cta p { margin-bottom: 1.2rem; }