/* ============================================================
   We Do content pages (landing pages + blog)

   Loaded AFTER styles.css, which owns the tokens, the reset, the
   nav, the buttons and the type scale. Nothing here redefines a
   colour: every value below is a var() from that file, same as
   the homepage. Raw hex is banned here too.

   The homepage is a set-piece. These pages are the opposite:
   long-form reading, one column, quiet. The only decorated thing
   on the page is the answer block, and that is deliberate,
   because it is the passage the page exists to deliver.
   ============================================================ */

/* ---------- Document shell ---------- */

.doc__main {
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Reading measure. 34rem lands around 70 characters at this size,
   which is the range long-form text stays comfortable in. */
.prose {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.prose--index { max-width: 52rem; }

.prose__head {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}
.prose__head .eyebrow { margin-bottom: 0.875rem; }
.prose__head .eyebrow a { color: inherit; text-decoration-color: var(--color-accent); }
.prose__head .display {
  font-size: clamp(2.25rem, 5.4vw, 3.6rem);
  margin-bottom: 1rem;
}
.prose__head .lede { font-size: 1.1875rem; max-width: 34rem; }

/* ---------- Long-form typography ---------- */

.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: 2.75rem;
  margin-bottom: 0.875rem;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose p { margin-bottom: 1.125rem; }
.prose p:last-child { margin-bottom: 0; }

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--color-accent);
  transition: text-decoration-color 160ms var(--ease-out);
}
.prose a:hover { text-decoration-color: var(--color-primary); }

.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.prose ul, .prose ol {
  margin-bottom: 1.125rem;
  padding-left: 1.4rem;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.prose li::marker { color: var(--color-accent); }
.prose ol li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }

.prose blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1875rem;
  color: var(--color-foreground);
}
.prose blockquote p { margin-bottom: 0.5rem; }

.prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

/* ---------- The answer block ----------
   The one passage on the page written to be lifted out and quoted
   without the rest of the page around it. It gets the only real
   decoration on the page so a reader skimming for the answer finds
   it in the first screenful, which is the same thing a retrieval
   system is doing. */

.answer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 2rem;
}
.answer__q {
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0 !important;
  margin-bottom: 0.625rem !important;
}
.answer p { margin-bottom: 0.75rem; }
.answer p:last-child { margin-bottom: 0; }

/* ---------- Aside ---------- */

.note {
  background: var(--color-soft);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  margin: 2rem 0;
  font-size: 1rem;
  color: var(--color-foreground);
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Table of contents ---------- */

.toc {
  margin-bottom: 2.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.toc__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-muted);
  margin-bottom: 0.625rem;
}
.toc ul {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
}
.toc li { margin: 0; padding: 0; }
.toc a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.toc a:hover { color: var(--color-primary); }

/* ---------- Tables ---------- */

/* The wrapper scrolls, not the page. A wide comparison table on a
   375px phone must never make the whole document pan sideways. */
.tablewrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch;
}
.tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 32rem;
}
.tablewrap th, .tablewrap td {
  text-align: left;
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.tablewrap th {
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
}
.tablewrap tbody tr:last-child td { border-bottom: 0; }
.tablewrap td:first-child { font-weight: 500; }

/* ---------- FAQ ----------
   Answers are visible, never collapsed. A question a reader has to
   click is a question an assistant is less likely to quote, and
   these are written to survive being lifted out one at a time. */

.faq {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.faq__item {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--color-border);
}
.faq__q {
  font-family: var(--font-sans) !important;
  font-weight: 700;
  font-size: 1.0625rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}
.faq__a {
  color: var(--color-muted);
  margin-bottom: 0 !important;
}

/* ---------- Plan cards ----------
   Rendered from the plans parsed out of the app's tier-config.ts. Three
   columns that collapse to one, hairline borders rather than shadows, and no
   "most popular" badge: the highest tier is marked only by a lilac rule,
   because a badge is a sales device and this page is a price list. */

.plans {
  display: grid;
  gap: 1rem;
  /* 10.5rem, not 13rem: inside the 44rem reading measure minus its inline
     padding there is ~197px per column at three across, so a 13rem minimum
     silently dropped the third card onto its own row. */
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  margin: 2rem 0;
}
.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.plan-card--top { border-top-color: var(--color-primary); }
.plan-card__name {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  margin-bottom: 0.375rem !important;
}
.plan-card__price {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.875rem !important;
  font-variant-numeric: tabular-nums;
}
.plan-card__price span {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-left: 0.375rem;
  letter-spacing: 0.04em;
}
.plan-card__adds {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem !important;
}
.plan-card__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.9375rem;
}
.plan-card__list li {
  padding-left: 1rem;
  margin-bottom: 0.3125rem;
  position: relative;
}
.plan-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Byline and author ---------- */

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.byline b { color: var(--color-foreground); font-weight: 500; }
.byline__updated { color: var(--color-primary); }

.prose__foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.authorbox {
  font-size: 0.9375rem;
  color: var(--color-muted);
}
.authorbox b { color: var(--color-foreground); }

/* ---------- Blog index ---------- */

/* Scoped under .prose because `.prose ul` sets list-style and padding, and a
   bare `.postlist` loses that specificity contest. It shipped once with a
   lilac bullet floating beside every post date. */
.prose .postlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.prose .postlist__item {
  padding: 1.75rem 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}
.prose .postlist__item:first-child { padding-top: 0; }
.postlist__meta {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.postlist__item h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.postlist__item h2 em { font-style: italic; color: var(--color-primary); }
.postlist__item h2 a { text-decoration: none; }
.postlist__item h2 a:hover { color: var(--color-primary); }
.postlist__item > p { color: var(--color-muted); margin: 0; }

/* ---------- Closing CTA ---------- */

.cta {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.cta__inner { display: grid; justify-items: center; gap: 1rem; }
.cta .display { max-width: 26rem; }
.cta .lede { max-width: 30rem; }
.cta .btn { margin-top: 0.5rem; }
.cta__note {
  font-size: 0.875rem;
  color: var(--color-muted);
  max-width: 26rem;
}

/* ---------- Footer links ---------- */

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}
.footer__links a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.footer__links a:hover { color: var(--color-primary); }

@media (max-width: 48rem) {
  .footer__links { justify-content: center; }
}