/* Brand: "Sage" (docs/design-today-progress.md, docs/design-prototypes/themes.html option A). Dark by default, light by choice.
   SF system font at normal width, 8pt grid, rounded sage sections, peach for warnings. No external fonts, images or requests. */
:root {
  color-scheme: dark;
  --bg: #0E1D16;
  --surface: #16291F;
  --ink: #E6F0E0;
  --text2: #9DB6A5;
  --text3: #8BA796;
  --accent: #BFE46E;
  --on-accent: #14402C;
  --warn: #F4A582;
  --line: #26392D;
  --mark-bg: #F2B34A;
  --mark-fg: #1A1200;
  --draft-bg: #4A2A1D;
  --draft-fg: #F9C9B0;
  /* orb palette (dust and mist): lime, mist, teal, amber, peach, cream */
  --o-lime: #BFE46E; --o-mist: #3FBF86; --o-teal: #2EAAAA; --o-amber: #F2B34A; --o-peach: #F27F62; --o-cream: #FFE9B8;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 24px; --r-sm: 16px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EDF3E6;
  --surface: #E1EBD8;
  --ink: #14402C;
  --text2: #4B6556;
  --text3: #4D6757;
  --accent: #0F7470;
  --on-accent: #FFFFFF;
  --warn: #A8481E;
  --line: #C9D8BF;
  --mark-bg: #FFD36B;
  --mark-fg: #2B1D00;
  --draft-bg: #F9DCCB;
  --draft-fg: #7A3112;
  --o-lime: #8DB83A; --o-mist: #2FA874; --o-teal: #1E8F8F; --o-amber: #D99A2B; --o-peach: #E0674A; --o-cream: #E3C27F;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }
.skip {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--bg);
  padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 0.5rem; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Headings: SF semibold at normal width; tight tracking only where the size is large */
h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: clamp(2rem, 7.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 5vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; margin: 3rem 0 0.5rem; }
h3 { font-size: 1.1875rem; line-height: 1.3; margin: 1.5rem 0 0.5rem; }
p, ul, ol, table, details { margin: 0 0 1rem; }
.lede { font-size: 1.1875rem; color: var(--text2); max-width: 36rem; }
.muted { color: var(--text2); }
.small { font-size: 0.9375rem; line-height: 1.45; color: var(--text3); }

header.site { padding: 1rem 0; border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.orb { flex: none; }
.c0 { fill: var(--o-lime); } .c1 { fill: var(--o-mist); } .c2 { fill: var(--o-teal); }
.c3 { fill: var(--o-amber); } .c4 { fill: var(--o-peach); } .c5 { fill: var(--o-cream); }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; }
nav a { color: var(--text2); display: inline-block; padding: 0.5rem 0; text-decoration: none; }
nav a:hover { color: var(--ink); text-decoration: underline; }
nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Theme switch: only shown when JavaScript can make it work */
.theme-switch { display: none; padding: 0.25rem; gap: 0.25rem; border-radius: 999px; background: var(--surface); }
html[data-js] .theme-switch { display: inline-flex; }
.theme-switch button {
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--text2); background: none; border: 0;
  padding: 0.25rem 0.75rem; min-height: 2rem; border-radius: 999px; cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

main { padding: 2rem 0 3rem; }
.hero { padding: 0.5rem 0 1rem; }
.hero-orb { position: relative; width: min(100%, 15rem); aspect-ratio: 1; margin: 0 auto 1rem; }
.hero-orb svg, .hero-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-orb canvas { opacity: 0; }
.hero-orb.live canvas { opacity: 1; }
.hero-orb.live svg { opacity: 0; }
.s0 { stop-color: var(--o-lime); } .s1 { stop-color: var(--o-mist); } .s2 { stop-color: var(--o-teal); }
.s3 { stop-color: var(--o-amber); } .s4 { stop-color: var(--o-peach); } .s5 { stop-color: var(--o-cream); }
.hero h1 { text-align: center; margin-bottom: 1rem; }
.defn { font-size: 1.1875rem; color: var(--text2); max-width: 38rem; margin-left: auto; margin-right: auto; }
.defn strong { color: var(--ink); font-weight: 600; }
.cta { text-align: center; margin: 1.5rem 0 1rem; }
.hero .small { text-align: center; margin-bottom: 0.5rem; }
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; min-height: 3rem;
}
.btn:hover { filter: brightness(1.08); text-decoration: underline; }

/* The user's own words, quoted: the example sentence under the hero */
.words { background: var(--surface); border-radius: var(--r); padding: 1.5rem; margin: 2rem 0 0.5rem; font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; }
.ul { box-shadow: inset 0 -0.35em 0 color-mix(in srgb, var(--accent) 38%, transparent); }
.said { font-size: 0.9375rem; color: var(--text3); margin: 0 0 1rem; }

/* Sage sections: rounded surface, no hairline boxes inside boxes */
.card { background: var(--surface); border-radius: var(--r); padding: 1.5rem 1.5rem 0.5rem; margin: 0 0 1rem; }
.card h3 { margin-top: 0; }
.steps { list-style: none; padding: 0; display: grid; gap: 0.5rem; counter-reset: step; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; background: var(--surface); border-radius: var(--r-sm); counter-increment: step; }
.steps li > div { flex: 1; }
.steps li::before {
  content: counter(step); flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 600; display: grid; place-items: center; font-size: 0.9375rem;
}
.plans { display: grid; gap: 0 1rem; }
@media (min-width: 36rem) { .plans { grid-template-columns: 1fr 1fr; } }
.price { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin: 0.25rem 0 0.5rem; color: var(--ink); }
.price .small { font-weight: 400; letter-spacing: 0; }

/* The name: the Socrates story */
.name-story { background: var(--surface); border-radius: var(--r); padding: 1.5rem; margin: 0 0 1rem; }
.name-story p { font-size: 1.1875rem; line-height: 1.5; max-width: 36rem; }
.name-story p:last-child { margin-bottom: 0; }
.name-story .etym { font-size: 0.9375rem; color: var(--text2); }
.name-story .sign { color: var(--ink); font-weight: 600; }

details { background: var(--surface); border-radius: var(--r-sm); padding: 0 1.25rem; margin: 0 0 0.5rem; }
summary { cursor: pointer; padding: 1rem 0; font-weight: 600; }
details[open] summary { margin-bottom: 0.25rem; color: var(--accent); }

/* Legal documents */
.legal table { display: block; overflow-x: auto; border-collapse: collapse; max-width: 100%; }
.legal th, .legal td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; min-width: 8rem; font-size: 0.9375rem; }
.legal th { border-bottom: 2px solid var(--ink); }
.legal blockquote { margin: 0 0 1.25rem; padding: 0.5rem 0 0.5rem 1rem; border-left: 4px solid var(--mark-bg); }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.legal code { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
.legal { overflow-wrap: break-word; }

/* Placeholders must be impossible to miss */
mark.ph {
  background: var(--mark-bg); color: var(--mark-fg);
  padding: 0.05em 0.3em; border-radius: 0.25em; font-weight: 600;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  outline: 2px dashed var(--mark-fg); outline-offset: 0;
}
.draft-banner {
  background: var(--draft-bg); color: var(--draft-fg); text-align: center;
  padding: 0.75rem 1.25rem; font-weight: 600;
  border-bottom: 2px solid var(--warn);
}

footer.site { padding: 2rem 0 2.5rem; color: var(--text2); font-size: 0.9375rem; border-top: 1px solid var(--line); }
footer.site ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0; margin: 0 0 0.5rem; }
footer.site a { display: inline-block; padding: 0.5rem 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.internal { border: 2px dashed var(--warn); border-radius: var(--r-sm); padding: 0.5rem 1.25rem 0.25rem; margin-top: 2rem; }
.internal-label { font-weight: 600; color: var(--warn); }

/* SEO/AEO additions */
.meta { font-size: 0.9375rem; color: var(--text3); margin: 0 0 1.25rem; }
.crumbs { font-size: 0.9375rem; margin: 0 0 1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; color: var(--text3); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.answer { border-left: 4px solid var(--accent); padding: 0.25rem 0 0.25rem 1.25rem; margin: 0 0 1.5rem; }
.answer p:first-child { font-size: 1.125rem; }
.grid { display: grid; gap: 0 1rem; margin: 0 0 1rem; }
@media (min-width: 36rem) { .grid.two { grid-template-columns: 1fr 1fr; } }
.tablewrap { overflow-x: auto; margin: 0 0 1rem; border-radius: var(--r-sm); }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.tablewrap caption { text-align: left; font-size: 0.9375rem; color: var(--text3); padding-bottom: 0.5rem; }
.tablewrap th, .tablewrap td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; font-size: 0.9375rem; }
.tablewrap thead th { border-bottom: 2px solid var(--ink); }
.tablewrap tbody th { font-weight: 600; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--accent); border-radius: 999px; padding: 0 0.5rem; color: var(--accent); }
.unverified { font-style: italic; }
.sources li { overflow-wrap: anywhere; }
.faq h3 { margin-top: 1.5rem; }
blockquote.ex { margin: 0 0 1rem; padding: 0.25rem 0 0.25rem 1rem; border-left: 4px solid var(--accent); }
blockquote.ex p { margin: 0.25rem 0; }