/* ============================================
   Legs Guide — Dark Theme Stylesheet
   Background: #0c0c0e
   ============================================ */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* The body was dark and the html element was not, so any overscroll,
     any rubber-band on a phone, and every full-page screenshot showed
     white behind the page. 18 September 2026. */
  background-color: #0c0c0e;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #0c0c0e;
  color: #e8e8ec;
  line-height: 1.6;
  min-height: 100vh;
}

main {
  padding: 0;
}

a {
  color: #a0a0ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Visually Hidden (accessibility) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Navigation ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid #1a1a1f;
}

.nav-brand a {
  font-weight: 700;
  font-size: 1.1rem;
  color: #e8e8ec;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 0.9rem;
  color: #a0a0b0;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #e8e8ec;
}

/* ── Hero ── */
.hero {
  padding: 5rem 2rem;
  text-align: center;
  border-bottom: 1px solid #1a1a1f;
}

.hero-content {
  max-width: 720px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7a7a88;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: #f2f2f5;
}

.hero-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #a8a8b5;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.hero-cta {
  /* Presentation pass, 16 September 2026. Every node home page had a
     headline, a paragraph, and then nothing to do: the guide itself —
     the only thing on these sites that no blog has — was mentioned
     last, as prose. This row puts it in the first screen. */
  margin: 2.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* A quiet panel that repeats the invitation at the foot of the page,
   for the man who read the whole thing before deciding. */
.invite-panel {
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: #121218;
  border: 1px solid #23232b;
  border-radius: 10px;
}

.invite-panel p {
  margin-bottom: 1.1rem;
}

.invite-panel p:last-of-type {
  margin-bottom: 0;
}

.invite-panel .btn-primary {
  margin-top: 0.25rem;
}

/* Structure for sections that were a uniform run of paragraphs. No new
   claims: existing sentences, given shape so the eye has somewhere to
   land. */
.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 0;
}

.point {
  padding: 1.1rem 1.2rem;
  background: #101016;
  border: 1px solid #1f1f27;
  border-radius: 10px;
}

.point h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #e6e6ee;
  margin-bottom: 0.4rem;
}

.point p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: #b6b6c6;
}

@media (max-width: 640px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn-primary,
  .hero-cta .btn-secondary {
    text-align: center;
  }
}

/* ── Buttons ──
   Pill shape (22 Aug 2026) to match the chat interface's send/CTA buttons —
   ruling 4 requires core component classes stay consistent site-wide. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary {
  background: #3b3b4f;
  color: #ffffff;
}

.btn-primary:hover {
  background: #4a4a60;
}

.btn-secondary {
  background: transparent;
  color: #a0a0b0;
  border: 1px solid #2a2a35;
}

.btn-secondary:hover {
  background: #1a1a22;
  color: #e8e8ec;
}

/* ── Content Sections ── */
.content-section {
  padding: 3.5rem 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.content-section.highlight {
  background: #121218;
  border-top: 1px solid #1a1a1f;
  border-bottom: 1px solid #1a1a1f;
}

/* Several nodes open a section with a short label line above the
   heading. Until 16 September 2026 that line inherited body paragraph
   styling, so it read as an orphaned sentence rather than a label. */
.section-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7a7a88;
  margin-bottom: 0.6rem;
}

.attribution {
  font-size: 0.9rem;
  color: #8a8a99;
  margin-top: 0.75rem;
}

.content-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #f5f5f8;
  letter-spacing: -0.01em;
}

.content-section h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #e0e0e8;
}

.content-section p {
  margin-bottom: 1.1rem;
  /* Presentation pass, 16 September 2026. Body text was 1rem at #b0b0c0
     on #0c0c0e: legible, but quieter than its own headings, so the page
     read as administrative rather than authored. Raised one step in size
     and brightness. Contrast against the page background is now about
     9.5:1, comfortably past WCAG AA for body text. */
  font-size: 1.04rem;
  line-height: 1.68;
  color: #c4c4d2;
  /* Reading measure — added 26 Aug 2026 per audit finding 8.1: the
     720px section width was fine for headings/cards, but let body
     text bleed too wide for comfortable reading. ~68 characters is
     the accepted comfortable line length. */
  max-width: 65ch;
}

.content-section p:last-child {
  margin-bottom: 0;
}

/* ── Pillars (Body/Work/Sobriety subsections within about-james.html) ── */
.pillar {
  padding: 1.5rem 0;
  border-top: 1px solid #1a1a1f;
}

.pillar:first-child {
  border-top: none;
}

/* ── Self-checks (self-checks.html) ──
   These classes existed in the HTML with no CSS at all before 22 Aug 2026 —
   added now as part of the ruling-5 restraint/whitespace pass: quiet visual
   separation between entries, no clutter, no decoration beyond a hairline. */
.self-check {
  padding: 1.5rem 0;
  border-top: 1px solid #1a1a1f;
}

.self-check:first-of-type {
  border-top: none;
  padding-top: 0.5rem;
}

.self-check h3 {
  margin-bottom: 0.6rem;
}

.self-check-share {
  margin-top: 0.75rem !important;
}

.self-check-share a {
  font-size: 0.8rem;
  color: #82828c;
}

.self-check-share a:hover {
  color: #a0a0b0;
}

.boundary-note {
  font-size: 0.85rem;
  font-style: italic;
  color: #9090a0;
  border-left: 3px solid #3b3b4f;
  padding-left: 0.85rem;
}

/* ── Fern section dividers (self-checks.html) — added 25 Aug 2026 ──
   Ties the visual identity directly into content structure, per the
   original brief's suggested use case. Small, quiet, opacity-muted
   rather than full-strength orange, so it reads as punctuation
   between sections, not a decorative interruption. */
.fern-divider {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
  opacity: 0.55;
}

/* ── Method Definition ── */
.method-definition {
  font-size: 1.1rem;
  font-style: italic;
  color: #c0c0d0;
  border-left: 3px solid #3b3b4f;
  padding-left: 1rem;
  margin-bottom: 2rem;
}

/* ── Measurables List ── */
.measurables-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
}

.measurables-list li {
  background: #1a1a22;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: #d0d0e0;
}

/* ── Network ── */
.network-note {
  font-size: 0.9rem;
  color: #a0a0b0;
  margin-bottom: 1rem;
}

.network-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.node-pill {
  display: inline-block;
  background: #1a1a22;
  border: 1px solid #2a2a35;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #a0a0ff;
  transition: background 0.2s, border-color 0.2s;
}

.node-pill:hover {
  background: #222230;
  border-color: #3b3b4f;
  text-decoration: none;
}

/* ── Testimonials ── */
.composite-label {
  font-size: 0.8rem;
  color: #9090a0;
  margin-bottom: 1rem;
  font-style: italic;
}

.testimonial {
  background: #121218;
  border-left: 3px solid #e8873d;
  border-radius: 4px;
  padding: 2rem 2rem 1.5rem;
  margin: 0;
  position: relative;
}

.testimonial p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #e0e0e8;
  margin-bottom: 1rem;
}

.testimonial cite {
  display: block;
  font-size: 0.85rem;
  color: #9090a0;
  font-style: normal;
}

/* ── Pricing ── */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.pricing-tier {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 8px;
  padding: 1.5rem;
}

.pricing-tier h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.pricing-tier .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.pricing-note {
  font-size: 0.8rem;
  color: #9090a0;
  margin-top: 1rem;
}

/* ── Chat ──
   Redesigned 22 Aug 2026, refined again same day into Concept A ("editorial") —
   James's chosen direction after reviewing three mockups. Matches the pattern
   both Claude.ai and current ChatGPT use: the visitor's message keeps a
   subtle bubble, the assistant's reply is plain flowing text with no
   background — content-forward rather than "chat toy." No HTML/JS changed:
   app.js already outputs .message-wrapper.user / .message-wrapper.assistant,
   so this remains a pure CSS restyle. */
.chat-container {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.chat-boundary {
  background: #121218;
  border: 1px solid #2a2a35;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

/* Safety card — replaces the previous paragraph-style boundary text,
   26 Aug 2026. Same exact approved wording, restructured for
   scannability rather than a wall of prose. Genuinely wired into the
   real chat.html this time (not a standalone concept preview) — the
   button keeps id="boundary-accept" so app.js's existing click
   handling works completely unchanged. */
.safety-card {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.safety-card-eyebrow {
  color: #82828c;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.safety-card-title {
  color: #f2f2f5;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #1a1a1f;
}

.safety-card-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 1.1rem;
}

.safety-card-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e8873d;
  color: #e8873d;
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safety-card-item p {
  color: #e0e0e8;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

.safety-card-button {
  width: 100%;
  margin-top: 0.4rem;
}

.boundary-text {
  font-size: 0.9rem;
  color: #b0b0c0;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.chat-usage-notice {
  font-size: 0.85rem;
  color: #9090a0;
  background: #121218;
  border: 1px solid #2a2a35;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Empty-state invitation — the first thing every visitor sees on the
   chat page before typing anything. Previously unstyled default text;
   given real presence 25 Aug 2026 since this is the single
   highest-visibility moment on the whole site. */
.chat-static-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 2.75rem 1rem 2rem;
  /* Raised from #9090a0 on 18 September 2026. On a phone at low screen
     brightness the opening line was the hardest thing on the page to read,
     and it is the first thing anyone reads. */
  color: #c9c9d6;
  font-size: 1.0625rem;
  line-height: 1.6;
  position: relative;
}

/* A single warm pool of light behind the opening, so the page has somewhere
   to look instead of presenting a flat wall of dark grey. */
.chat-static-invitation::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 50%;
  width: min(34rem, 108%);
  height: 19rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 35%, rgba(232, 135, 61, 0.14), rgba(232, 135, 61, 0.04) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.chat-static-invitation > * {
  position: relative;
  z-index: 1;
}

.chat-static-invitation > p {
  max-width: 30rem;
  margin: 0 auto;
  text-wrap: balance;
}

.invitation-fern {
  width: 38px;
  height: 38px;
  margin-bottom: 1.35rem;
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(232, 135, 61, 0.38));
}

@media (prefers-reduced-motion: no-preference) {
  .invitation-fern {
    animation: invitation-fern-settle 900ms ease-out both;
  }

  .invitation-starters li {
    animation: starter-settle 520ms ease-out both;
  }

  .invitation-starters li:nth-child(1) { animation-delay: 60ms; }
  .invitation-starters li:nth-child(2) { animation-delay: 130ms; }
  .invitation-starters li:nth-child(3) { animation-delay: 200ms; }
  .invitation-starters li:nth-child(n+4) { animation-delay: 260ms; }
}

@keyframes invitation-fern-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes starter-settle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.chat-messages {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.message {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
  word-wrap: break-word;
}

/* The visitor's own message: the only bubble left in this layout, so the
   two roles stay instantly distinguishable by shape as well as alignment. */
.message.user {
  background: #2a2a40;
  color: #e8e8ec;
  margin-left: auto;
  max-width: 75%;
  padding: 0.7rem 1.05rem;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  line-height: 1.55;
}

/* The assistant's reply: no bubble, no background — pure text, more
   generous line-height and width, reading like a considered written
   response rather than a chat-widget message. */
.message.assistant {
  background: none;
  color: #d8d8e0;
  margin-right: auto;
  padding: 0;
  line-height: 1.75;
}

.message.assistant p,
.message.assistant + .message.assistant {
  margin-top: 0.85rem;
}

/* Typing indicator — replaced 24 Aug 2026 with the "unravelling wound ball"
   motif: a tightly wound core with one band working
   itself loose (the process of noticing/unwinding), matching the site's own
   "Legs Guide approach" / "uncompressing" language rather than an imported
   metaphor. app.js renders this as inline SVG with id="chat-loading". Static
   fallback (no motion) for prefers-reduced-motion below. */
.message.assistant.loading {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.thinking-ball-core {
  animation: thinking-core-breathe 3.4s cubic-bezier(0.45,0,0.55,1) infinite;
  transform-origin: 60px 60px;
}

.thinking-ball-band {
  stroke-dasharray: 70;
  animation: thinking-band-unspool 3.4s cubic-bezier(0.45,0,0.55,1) infinite;
}

@keyframes thinking-core-breathe {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.03); }
}

@keyframes thinking-band-unspool {
  0% { stroke-dashoffset: 70; opacity: 0.3; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 70; opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-ball-core,
  .thinking-ball-band {
    animation: none;
  }
  .thinking-ball-band {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }
}

/* Reveal cursor — the small pulsing marker at the leading edge of a
   message while it's being progressively revealed (see app.js header
   comment for why this exists instead of real network streaming).
   Same orange as the thinking-ball indicator, so the two read as one
   continuous "still in progress" signal rather than two different
   things. */
.reveal-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #e8873d;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: reveal-cursor-pulse 0.9s ease-in-out infinite;
}

@keyframes reveal-cursor-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-cursor {
    display: none;
  }
}

/* Input row — pill-shaped, familiar send-button placement, no gradients
   or startup-style vibrancy. */
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

.chat-form textarea {
  flex: 1;
  background: #1a1a22;
  border: 1px solid #2a2a35;
  border-radius: 22px;
  padding: 0.75rem 1.15rem;
  color: #e8e8ec;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  /* Hidden by default and switched to auto by the autosize code only once
     the text actually exceeds the cap. An empty one-line composer was
     rendering a default scrollbar on Windows: a pale bar down the right of
     the box before a word had been typed. */
  overflow-y: hidden;
  min-height: 3rem;
  max-height: 12rem;
  line-height: 1.4;
  scrollbar-width: thin;
  scrollbar-color: #3a3a45 transparent;
}
.chat-form textarea::-webkit-scrollbar {
  width: 8px;
}
.chat-form textarea::-webkit-scrollbar-track {
  background: transparent;
}
.chat-form textarea::-webkit-scrollbar-thumb {
  background-color: #3a3a45;
  border-radius: 8px;
}

.chat-form textarea:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-form textarea::placeholder {
  color: #9090a0;
}

.chat-form button {
  padding: 0.75rem 1.4rem;
  background: #3b3b4f;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.chat-form button:hover {
  background: #4a4a60;
}

.chat-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Equipment badge and glossary list — added for tools.html/glossary.html/
   movements.html, 27 Aug 2026. Colors match the existing orange accent
   (#e8873d) used everywhere else, not a new palette. */
.equipment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(232, 135, 61, 0.1);
  border: 1px solid rgba(232, 135, 61, 0.35);
  border-radius: 4px;
  color: #e8873d;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.glossary-list dt {
  font-weight: 700;
  color: #f2f2f5;
  margin-top: 1.25rem;
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 0.3rem 0 0;
  color: #b0b0c0;
  line-height: 1.6;
}

/* Local reflection log — per-movement private notes, local-device only.
   Matches the existing quiet, bordered-box visual language. */
.local-reflection-log {
  margin-top: 1rem;
  padding: 1rem;
  background: #16161c;
  border: 1px solid #232329;
  border-radius: 8px;
}

.log-label {
  display: block;
  font-size: 0.8rem;
  color: #a0a0b0;
  margin-bottom: 0.4rem;
}

.log-input {
  width: 100%;
  background: #0c0c0e;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  color: #e0e0e8;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.log-input:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.log-status {
  font-size: 0.75rem;
  color: #82828c;
  margin-top: 0.4rem;
}

.clear-notes-btn {
  display: block;
  margin: 2rem auto 0;
  background: none;
  border: 1px solid #2a2a35;
  color: #a0a0b0;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

.clear-notes-btn:hover {
  background: #16161c;
  color: #d0d0e0;
}

.clear-notes-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

/* Stop state — a distinct filled-square icon in a compact circular
   button, replacing the Send label entirely while a response is in
   flight. Previously this only relabelled the same button's text to
   "Stop", which didn't read as a genuinely different control — every
   mainstream chat product visually transforms Send into a stop icon,
   not just its label. */
#chat-submit.is-stop {
  padding: 0.6rem !important;
  width: 42px;
  border-radius: 50% !important;
  background: #e8873d !important;
  color: #0c0c0e;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chat-submit.is-stop:hover {
  background: #f0954d !important;
}

/* Voice dictation button — added 27 Aug 2026. A compact circular icon
   button rather than the wide pill used for Send, since it holds a
   single icon, not text. Removed entirely by app.js in browsers
   without Speech Recognition support, rather than shown broken. */
.chat-mic-btn {
  padding: 0.6rem !important;
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  background: #1a1a22 !important;
  color: #9090a0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-mic-btn:hover {
  background: #232330 !important;
  color: #d0d0e0;
}

.chat-mic-btn.recording {
  background: #e8873d !important;
  color: #0c0c0e;
}

.chat-mic-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* Deleting a conversation is not what anyone came here to do, and it was
   offered as a bordered button carrying the same weight as the controls
   that matter. It is a quiet link now. */
.chat-controls button {
  background: none;
  border: 0;
  color: #7e7e8e;
  padding: 0.2rem 0.1rem;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(126, 126, 142, 0.5);
}

.chat-controls button:hover,
.chat-controls button:focus-visible {
  color: #c9c9d6;
  text-decoration-color: currentColor;
}

/* ── Site Footer ── */
.site-footer {
  border-top: 1px solid #1a1a1f;
  padding: 2rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.footer-col {
  font-size: 0.85rem;
  color: #9090a0;
}

.company-line {
  font-size: 0.8rem;
  color: #9090a0;
}

/* ── Legal Pages ── */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.legal-page h1 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.legal-page h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #e0e0e8;
}

.legal-page p {
  margin-bottom: 1rem;
  color: #b0b0c0;
}

/* ── FAQ cards — reverted to flat/always-open, 26 Aug 2026 ──
   James's call: the accordion was a NEW interaction pattern nothing
   else on the site uses — every other page (self-checks, about-james,
   homepage) presents content as calm, static, always-visible sections
   with quiet bordered dividers. "On brand" meant matching that
   existing language, not introducing click-to-expand. Each question
   is now a proper card, matching the same bordered-box treatment
   already used for callouts elsewhere on the site (e.g. the
   homepage's "See it for yourself" box), rather than plain unstyled
   text or a novel interaction pattern. */
.faq-card {
  background: #121218;
  border: 1px solid #1a1a1f;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.faq-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f0f4;
  margin: 0 0 0.75rem;
}

.faq-card p {
  margin: 0;
  color: #b0b0c0;
  max-width: 65ch;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .hero {
    padding: 2.5rem 1rem;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .content-section {
    padding: 2rem 1rem;
  }

  .pricing-tiers {
    grid-template-columns: 1fr;
  }

  .chat-container {
    padding: 0 1rem;
  }
}

/* ============================================
   Full-screen chat page (chat.html) — new
   ============================================ */

.chat-page-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* ── Chat sidebar shell — added 24 Aug 2026 ──
   Local, per-device conversation list. No accounts, no server-side
   storage — matches the live privacy policy exactly. Desktop: fixed
   sidebar beside the chat. Mobile: sidebar collapses above the chat
   as a compact strip rather than an overlay, keeping the whole page
   reachable without JS-driven show/hide logic. */
.chat-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  min-height: 0;
  border-right: 1px solid #1a1a1f;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.85rem;
  overflow-y: auto;
}

.sidebar-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e1e28;
  border: 1px solid #2a2a35;
  color: #e8e8ec;
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sidebar-new-btn:hover {
  background: #26262f;
}

.sidebar-sessions-list {
  flex: 1;
  min-height: 0;
}

.sidebar-date-group {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #82828c;
  margin: 1rem 0.4rem 0.5rem;
}

.sidebar-date-group:first-child {
  margin-top: 0;
}

/* Sidebar session rows — redesigned 27 Aug 2026 to add per-session
   rename/delete directly in the list, matching how ChatGPT/Claude/
   Kimi's own sidebars work. Icons stay hidden until the row is
   hovered or focused, keeping the list visually quiet by default. */
.sidebar-session-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  margin-bottom: 0.2rem;
}

.sidebar-session-row:hover,
.sidebar-session-row:focus-within {
  background: #16161c;
}

.sidebar-session-row.active {
  background: #1a1a22;
}

.sidebar-session-item {
  flex: 1;
  display: block;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  color: #8a8a95;
  font-size: 0.85rem;
  padding: 0.55rem 0.4rem 0.55rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-session-row:hover .sidebar-session-item,
.sidebar-session-row:focus-within .sidebar-session-item {
  color: #b0b0c0;
}

.sidebar-session-row.active .sidebar-session-item {
  color: #d0d0e0;
}

.sidebar-session-item:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: -2px;
}

.sidebar-session-actions {
  display: flex;
  gap: 0.15rem;
  padding-right: 0.4rem;
  opacity: 0;
}

.sidebar-session-row:hover .sidebar-session-actions,
.sidebar-session-row:focus-within .sidebar-session-actions {
  opacity: 1;
}

.sidebar-session-action {
  background: none;
  border: none;
  color: #82828c;
  padding: 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-session-action:hover {
  color: #d0d0e0;
  background: #232330;
}

.sidebar-session-action-delete:hover {
  color: #e8873d;
}

.sidebar-session-action:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 1px;
}

.sidebar-empty {
  color: #82828c;
  font-size: 0.8rem;
  padding: 0.5rem 0.4rem;
}

/* Brand mark, moved into the sidebar 25 Aug 2026 — chat.html no longer
   has a separate header bar at all, matching familiar AI chat products
   where identity lives in the sidebar, not a marketing header above
   the whole page. */
.sidebar-brand {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #e8e8ec;
  margin-bottom: 1.25rem;
}

.sidebar-note {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #1a1a1f;
  font-size: 0.7rem;
  color: #82828c;
  line-height: 1.5;
}

/* Legal links, moved into the sidebar 25 Aug 2026 — replaces the
   full-width footer bar that used to sit below the input, freeing that
   space for the actual conversation. */
.sidebar-legal {
  font-size: 0.65rem;
  color: #82828c;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.sidebar-legal a {
  color: #8a8a95;
}

.sidebar-legal a:hover {
  color: #9090a0;
}

@media (max-width: 880px) {
  .chat-shell {
    flex-direction: column;
  }

  .chat-sidebar {
    width: 100%;
    max-height: 30vh;
    border-right: none;
    border-bottom: 1px solid #1a1a1f;
  }
}

.chat-page-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  position: relative;
}

.jump-to-latest {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #2a2a35;
  border: 1px solid #3a3a45;
  color: #e8e8ec;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.jump-to-latest:hover {
  background: #33333f;
}

.jump-to-latest:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
}

.chat-page-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a3a45 transparent;
}

.chat-page-messages::-webkit-scrollbar {
  width: 8px;
}

.chat-page-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-page-messages::-webkit-scrollbar-thumb {
  background-color: #3a3a45;
  border-radius: 8px;
}

.chat-page-messages::-webkit-scrollbar-thumb:hover {
  background-color: #4a4a55;
}

.chat-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #2a2a35 transparent;
}

.chat-sidebar::-webkit-scrollbar {
  width: 6px;
}

.chat-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.chat-sidebar::-webkit-scrollbar-thumb {
  background-color: #2a2a35;
  border-radius: 8px;
}

.message-wrapper {
  margin-bottom: 1.1rem;
  max-width: 75%;
}

.message-wrapper.user {
  margin-left: auto;
}

.message-wrapper.assistant {
  margin-right: auto;
  max-width: 100%;
}

.message-wrapper .message {
  margin-bottom: 0.25rem;
  max-width: 100%;
}

/* Message footer — redesigned 27 Aug 2026 to hold a timestamp plus
   whichever action buttons apply (Copy + Regenerate on the latest
   assistant reply, Edit on any user message). Hidden until the
   message is hovered or focused, same quiet treatment as before. */
.message-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.message-wrapper:hover .message-footer,
.message-footer:focus-within {
  opacity: 1;
}

.message-timestamp {
  font-size: 0.7rem;
  color: #82828c;
}

.message-action-btn {
  background: none;
  border: none;
  color: #82828c;
  font-size: 0.7rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.message-action-btn:hover {
  color: #9090a0;
}

.message-action-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 2px;
  border-radius: 4px;
}

.message-wrapper.user .message-footer {
  justify-content: flex-end;
}

/* Safe markdown rendering — added 27 Aug 2026. Assistant replies can
   now contain bold, italic, and bullet lists; user messages remain
   plain text always. Spacing kept tight since replies are short by
   design (REPLY LENGTH stays around 100-180 words). */
.message.assistant p {
  margin: 0 0 0.5rem;
}

.message.assistant p:last-child {
  margin-bottom: 0;
}

.message.assistant ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}

.message.assistant li {
  margin-bottom: 0.2rem;
}

.message.assistant strong {
  font-weight: 700;
  color: inherit;
}

.message.assistant em {
  font-style: italic;
}

/* Collapsible sidebar — added 27 Aug 2026, persisted per device via
   localStorage. Collapsing removes it from layout entirely rather
   than just hiding it, so the chat area genuinely gets the space back. */
.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sidebar-header-row .sidebar-brand {
  margin-bottom: 0;
}

.sidebar-toggle-btn,
.sidebar-show-btn {
  background: none;
  border: none;
  color: #82828c;
  padding: 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover,
.sidebar-show-btn:hover {
  color: #d0d0e0;
  background: #1a1a22;
}

.sidebar-toggle-btn:focus-visible,
.sidebar-show-btn:focus-visible {
  outline: 2px solid #a0a0ff;
  outline-offset: 1px;
}

.chat-sidebar.collapsed {
  display: none;
}

.sidebar-show-btn {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  background: #16161c;
  border: 1px solid #2a2a35;
}

.chat-shell.sidebar-collapsed .sidebar-show-btn {
  display: flex;
}

.chat-shell {
  position: relative;
}

@media (max-width: 880px) {
  /* No hover on touch devices — keep it always visible there instead
     of unreachable. */
  .message-copy-btn {
    opacity: 0.6;
  }
}

/* THE READING LINE — 16 September 2026. One quiet sentence above the
   answer, stating what the guide understood the man to be asking, so he
   can correct it. Deliberately quieter than the answer and in the same
   restrained, bordered language as citations: it is context, not
   content, and must never compete with the reply itself. */
.reading-line {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8f8f9a;
  margin: 0 0 0.45rem;
  padding: 0.1rem 0 0.1rem 0.7rem;
  border-left: 2px solid #2a2a35;
  max-width: 46rem;
}

.reading-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f6f7a;
  margin-bottom: 0.15rem;
}

@media (max-width: 640px) {
  .reading-line {
    font-size: 0.74rem;
  }
}

.citation-line {
  display: inline-block;
  font-size: 0.7rem;
  color: #82828c;
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.7rem;
  background: #16161c;
  border: 1px solid #232329;
  border-radius: 6px;
  line-height: 1.4;
}

/* Error message — added 27 Aug 2026. Previously had no distinct
   styling at all (neither calm nor alarming, just default assistant-
   bubble treatment). Deliberately kept in the site's own quiet, dark,
   bordered-box language rather than a red alert or system toast —
   consistent with how citations and other secondary information are
   already presented. */
.message.assistant.error {
  background: #16161c;
  border: 1px solid #2a2a35;
  border-left: 2px solid #e8873d;
  color: #b0b0c0;
}

.citation-link {
  color: #a0a0b0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.citation-link:hover {
  color: #e8e8ec;
}

@media (max-width: 640px) {
  #chat-input {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  .chat-page-container {
    padding: 1rem;
  }

  .chat-form {
    position: sticky;
    bottom: 0;
    background: #0c0c0e;
    padding-top: 0.75rem;
  }

  .chat-form button,
  #boundary-accept {
    min-height: 44px;
  }

  .chat-boundary {
    overflow-x: hidden;
  }
}

/* ============================================================
   Back mobile chat sidebar safeguard
   The sidebar contains saved conversations and legal links.
   On narrow screens it must never remain behind or overlap the
   chat surface. It is closed by default and opens only when the
   visitor uses the visible sidebar button.
   ============================================================ */

@media (max-width: 880px) {
  .chat-shell {
    position: relative;
    flex-direction: column;
  }

  .chat-sidebar {
    display: none;
    width: 100%;
    max-height: 55dvh;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid #1a1a1f;
    padding: 1rem 0.85rem;
    background: #0c0c0e;
    z-index: 10;
  }

  .chat-shell.sidebar-mobile-open .chat-sidebar {
    display: flex;
  }

  .sidebar-show-btn {
    display: flex;
  }

  .chat-shell.sidebar-mobile-open .sidebar-show-btn {
    display: none;
  }

  .chat-page-container {
    width: 100%;
    min-width: 0;
  }

  .sidebar-note,
  .sidebar-legal {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .chat-page-container {
    padding: 1rem;
  }
}
@media (max-width: 880px) {
  .chat-shell.sidebar-mobile-open .chat-sidebar {
    display: flex;
  }
}


/* ============================================================
   Legs Guide — chat starter prompts in the static invitation
   ============================================================ */
.invitation-starters {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.invitation-starters li {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
}

/* 18 September 2026. These were pills with an unstyled browser button
   inside them and no handler attached: they looked like choices and did
   nothing. They are now the way into the conversation. One column, one
   left edge, full width: on a phone the first three read as a rail rather
   than as three ragged pills with centred text underneath them. */
.invitation-starters li > button {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  margin: 0;
  padding: 0.85rem 2.1rem 0.85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  color: #e7e7ef;
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* The chevron does the work an arrow does on a door: it says this goes
   somewhere when you press it. */
.invitation-starters li > button::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(232, 135, 61, 0.75);
  border-bottom: 1.5px solid rgba(232, 135, 61, 0.75);
  transform: translateY(-50%) rotate(-45deg);
  transition: right 0.18s ease, border-color 0.18s ease;
}

.invitation-starters li > button:hover,
.invitation-starters li > button:focus-visible {
  background:
    linear-gradient(180deg, rgba(232, 135, 61, 0.12), rgba(232, 135, 61, 0.04));
  border-color: rgba(232, 135, 61, 0.42);
  transform: translateY(-1px);
}

.invitation-starters li > button:hover::after,
.invitation-starters li > button:focus-visible::after {
  right: 0.8rem;
  border-color: rgba(232, 135, 61, 1);
}

.invitation-starters li > button:active {
  transform: translateY(0);
}

/* Quieter than a suggestion: this one only unfolds the rest. It keeps the
   same left edge as everything above it — a centred link under a stack of
   left-aligned cards was the thing that looked unfinished. */
.invitation-starters .starter-more-item {
  margin: -0.1rem 0 0.15rem;
}

.invitation-starters .starter-more {
  border: 0;
  background: none;
  color: rgba(232, 135, 61, 0.9);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0.2rem;
  width: auto;
}

.invitation-starters .starter-more::after {
  content: none;
}

.invitation-starters .starter-more:hover,
.invitation-starters .starter-more:focus-visible {
  background: none;
  transform: none;
  color: #e8873d;
}

/* The way back. Sits directly above the composer so it is found in the
   same glance as the box it replaces. */
.back-to-starters {
  display: block;
  margin: 0 auto 0.6rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.72;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.back-to-starters:hover,
.back-to-starters:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.34);
}

/* The widening question. Same left edge, warmer surface, because it is the
   one starter that reaches past this guide. */
.invitation-starters .starter-wider-item {
  margin-top: 0.5rem;
}

.invitation-starters .starter-wider {
  border-color: rgba(232, 135, 61, 0.38);
  background:
    linear-gradient(180deg, rgba(232, 135, 61, 0.15), rgba(232, 135, 61, 0.05));
  color: #f3e5d8;
}

.invitation-starters .starter-wider:hover,
.invitation-starters .starter-wider:focus-visible {
  border-color: rgba(232, 135, 61, 0.72);
  background:
    linear-gradient(180deg, rgba(232, 135, 61, 0.22), rgba(232, 135, 61, 0.08));
}

/* The way out of the list: quieter than the suggestions above it, never
   hidden. */
.invitation-starters .starter-other-item {
  margin-top: 0.15rem;
}

.invitation-starters .starter-other {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
  background: none;
  color: #b9b9c8;
}

.invitation-starters .starter-other:hover,
.invitation-starters .starter-other:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  color: #e7e7ef;
}

@media (max-width: 600px) {
  .invitation-starters li > button {
    padding: 0.95rem 2.1rem 0.95rem 1.05rem;
  }
}

/* ── Definition lists, quoted scripts and ordered lists ──
   Added 3 September 2026. Promoted into the shared engine 6 September 2026. The glossary and
   the safety page use <dl>, the scripts page uses <blockquote>, and the
   adviser note uses <ol>; none had any styling in the inherited
   stylesheet and rendered as unstyled browser defaults. Colours reuse
   the existing palette exactly — no new tokens. */

.content-section dl {
  margin: 0 0 1rem;
  max-width: 65ch;
}

.content-section dt {
  font-weight: 600;
  color: #e0e0e8;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid #1a1a1f;
}

.content-section dl > dt:first-of-type {
  margin-top: 0.4rem;
  padding-top: 0;
  border-top: none;
}

.content-section dd {
  margin: 0.4rem 0 0;
  color: #b0b0c0;
  line-height: 1.65;
}

/* Lists carried no styling at all until the presentation pass of
   16 September 2026: nodes with long list-shaped pages were rendering
   browser-default bullets at default spacing, which read as unfinished
   next to the typography around them. */
.content-section ul,
.content-section ol {
  margin: 0 0 1.15rem;
  padding-left: 1.2rem;
  max-width: 65ch;
}

.content-section li {
  color: #c4c4d2;
  font-size: 1.02rem;
  line-height: 1.62;
  margin-bottom: 0.6rem;
  padding-left: 0.15rem;
}

.content-section li:last-child {
  margin-bottom: 0;
}

.content-section li::marker {
  color: #5f5f76;
}

.content-section li strong {
  color: #e8e8f0;
  font-weight: 600;
}

.content-section blockquote {
  margin: 1.1rem 0;
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 2px solid #e8873d;
  background: rgba(232, 135, 61, 0.04);
  max-width: 65ch;
}

.content-section blockquote p {
  margin-bottom: 0;
  color: #d0d0dc;
}

.content-section blockquote p + p {
  margin-top: 0.75rem;
}

.content-section ol {
  margin: 0 0 1rem 1.15rem;
  padding: 0;
  color: #b0b0c0;
  max-width: 65ch;
  line-height: 1.65;
}

.content-section ol li {
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.content-section ol li::marker {
  color: #82828c;
}

.content-section ol li:last-child {
  margin-bottom: 0;
}