/* Manifold.md — homepage styles
   Editorial Medium-style serif body, Inter for UI, JetBrains Mono for code.
   Neutrals 95% of the page. Color in two places only:
   (a) the diagrams (brand strokes), (b) the two rainbow CTAs.
*/

:root {
  --ink: #0E0E0C;
  --paper: #FAFAF7;
  --graphite: #5A5A57;
  --hairline: rgba(14, 14, 12, 0.12);
  --hairline-strong: rgba(14, 14, 12, 0.22);

  --serif: "Source Serif 4", "Source Serif Pro", "GT Super Text",
           "Iowan Old Style", "Charter", Georgia, serif;
  --serif-display: "Source Serif 4", "Source Serif Pro", "GT Super Display",
                   "Iowan Old Style", "Charter", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --dash-speed: 2.5s;
  --rainbow-speed: 10s;

  --col-text: 680px;
  --col-diagram: 960px;
  --col-grid: 720px;
  /* Widest measure — the homepage hero band and the nav that must align to it.
     Content width, so it nests inside .page's 24px inset without doubling it. */
  --col-wide: 1192px;
}

html, body {
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

body.dark {
  --ink: #E5E2DA;
  --paper: #0E0E0C;
  --graphite: #9A9893;
  --hairline: rgba(229, 226, 218, 0.14);
  --hairline-strong: rgba(229, 226, 218, 0.26);
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

/* ─── Page chrome ─────────────────────────────────────────────────────────── */

.page {
  min-height: 100vh;
  padding: 0 24px;
  opacity: 0;
  animation: page-fade 280ms ease-out 60ms forwards;
}

@keyframes page-fade {
  to { opacity: 1; }
}

.shell {
  max-width: var(--col-diagram);
  margin: 0 auto;
}

/* Content columns are centred in their .shell so their edges line up with the
   hr.rule separators, which have always been margin: 0 auto at --col-text. */
.col-text { max-width: var(--col-text); margin-inline: auto; }
.col-grid { max-width: var(--col-grid); margin-inline: auto; }
.col-diagram { max-width: var(--col-diagram); margin-inline: auto; }

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 32px 0 0;
  max-width: var(--col-diagram);
  margin: 0 auto;
}

/* Homepage only: share the hero band's measure so the wordmark lines up with the
   headline and the links with the diagram's right edge, at every viewport.
   Pricing/Brand keep the --col-diagram nav that matches their .shell sections. */
.nav-wide {
  max-width: var(--col-wide);
}

.wordmark {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark .ext {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 17px;
  margin-left: 1px;
  color: var(--ink);
  opacity: 0.85;
}

.nav-link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--graphite);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.nav-link:hover { color: var(--ink); border-color: var(--ink); }

/* ─── Section rhythm ──────────────────────────────────────────────────────── */

section { padding: 48px 0; }

@media (max-width: 720px) {
  section { padding: 36px 0; }
}

.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  max-width: var(--col-text);
  margin: 0 auto;
}

.section-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--graphite);
  margin: 0 0 18px;
}
.section-label .em {
  text-transform: none;
  letter-spacing: 0;
  color: var(--graphite);
  font-weight: 400;
}

h1.hero {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 32px 0 24px;
  text-wrap: balance;
}

h2.head {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}

.sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 0 0 36px;
  max-width: var(--col-text);
  text-wrap: pretty;
}

p.body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.4em;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  p.body { font-size: 17px; }
}

p.body em, p.body i { font-style: italic; }
p.body strong { font-weight: 600; }

.body-note {
  font-style: italic;
  color: var(--graphite);
  font-size: 17px;
}

/* Inline links inside body copy */
.body a, p.body a {
  border-bottom: 1px solid rgba(14, 14, 12, 0.4);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
body.dark .body a, body.dark p.body a {
  border-bottom-color: rgba(229, 226, 218, 0.5);
}
.body a:hover, p.body a:hover { border-bottom-color: currentColor; }

/* ─── Rainbow CTA & secondary CTAs ────────────────────────────────────────── */

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: var(--cta-border, 3px) solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(90deg,
      #FBBF24 0%,
      #F472B6 25%,
      #A78BFA 50%,
      #60A5FA 75%,
      #FBBF24 100%) border-box;
  background-size: 300% 100%;
  animation: gradient-flow var(--rainbow-speed) ease infinite;
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  padding: 12px 24px 12px 26px;
  cursor: pointer;
  box-shadow: 0 0 32px rgba(247, 178, 103, 0.12);
  transition: box-shadow .4s ease, animation-duration .4s ease;
}
.cta-primary:hover {
  animation-duration: calc(var(--rainbow-speed) * 0.6);
  box-shadow: 0 0 44px rgba(247, 178, 103, 0.22);
}
.cta-primary .arrow {
  font-family: var(--sans);
  font-size: 15px;
  opacity: 0.95;
}

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Rainbow text — same palette as the CTA. Easter egg, used sparingly. */
.rainbow-text {
  background: linear-gradient(90deg,
    #FBBF24 0%,
    #F472B6 25%,
    #A78BFA 50%,
    #60A5FA 75%,
    #FBBF24 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-flow var(--rainbow-speed) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rainbow-text { animation: none; }
}

/* Quiet CTA — solid Ink, no animation. Used on non-recommended plans. */
.cta-quiet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cta-quiet:hover { background: var(--ink); color: var(--paper); }
.cta-quiet .arrow { font-size: 14px; opacity: 0.85; }

.cta-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--graphite);
  line-height: 1.7;
}
.cta-meta a {
  border-bottom: 1px solid rgba(0,0,0,0.18);
  padding-bottom: 1px;
}
body.dark .cta-meta a { border-bottom-color: rgba(229,226,218,0.3); }

/* ─── Diagrams: dashed-line flow ──────────────────────────────────────────── */

.flow-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  animation: flow var(--dash-speed) linear infinite;
}

.flow-line.thick { stroke-width: 1.75; }

@keyframes flow {
  to { stroke-dashoffset: -20; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line { stroke-dasharray: 0; animation: none; opacity: .55; }
  .cta-primary { animation: none;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      linear-gradient(90deg, #A78BFA, #60A5FA) border-box;
  }
}

.diagram {
  margin: 28px 0;
  max-width: var(--col-diagram);
  position: relative;
}

.diagram-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--graphite);
  text-align: left;
  margin-top: 22px;
}

/* Node bubble for Manifold / Claude / center labels */
.node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.node.lg { padding: 12px 22px; font-size: 22px; }
.node .ext {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  margin-left: 1px;
  opacity: .8;
  display: inline-block;
  transform: translateY(-1px);
}
.node.lg .ext { font-size: 14px; transform: translateY(-2px); }

/* Source swatch (abstract stand-in — used as fallback when no logo SVG) */
.src {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--graphite);
  user-select: none;
}
.src .swatch {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.src.dot .swatch { border-radius: 999px; }

/* Real brand-logo image — sits transparent, no chrome, no container */
.logo-img {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.src .logo-img { width: 28px; height: 28px; }

.src .name {
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.src.compact .name {
  font-size: 11px;
}

/* ─── Q&A blocks ──────────────────────────────────────────────────────────── */

.qa-group {
  margin: 0 0 56px;
}
.qa-group:last-child { margin-bottom: 0; }

.qa-group .section-label { margin-bottom: 28px; }

.qa {
  margin: 0 0 28px;
  padding-left: 16px;
  border-left: 2px solid var(--accent, rgba(14,14,12,0.3));
}
.qa:last-child { margin-bottom: 0; }
.qa .q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.qa .a {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--graphite);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
body.dark .qa .a { color: #B8B5AE; }

.qa .a .cite {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--graphite);
  opacity: 0.75;
  font-style: italic;
  display: block;
  margin-top: 6px;
}

/* ─── Sources grid ────────────────────────────────────────────────────────── */

.sources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 28px;
  margin: 24px 0 28px;
}
@media (max-width: 640px) {
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
}
.src-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}
.src-pill .swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.src-pill .pill-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
body.dark .src-pill { color: var(--ink); }

/* ─── How-it-works numbered list ──────────────────────────────────────────── */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  margin: 0 0 32px;
  align-items: baseline;
}
.steps li::before {
  content: counter(step);
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.85;
}
.steps li p {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.steps li p strong { font-weight: 600; }

/* ─── Sources mono grid (fallback list of names only) ─────────────────────── */
.src-names {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  margin: 24px 0;
}

/* ─── Final CTA / colophon ────────────────────────────────────────────────── */

.final-cta {
  text-align: center;
  padding: 72px 0 80px;
}
.final-cta h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 36px;
  color: var(--ink);
  text-wrap: balance;
}
.final-cta .cta-meta { margin-top: 22px; }

.colophon {
  border-top: 1px solid var(--hairline);
  padding: 48px 0 64px;
  font-family: var(--mono);
  font-style: italic;
  font-size: 12px;
  line-height: 1.9;
  color: var(--graphite);
  opacity: 0.85;
  max-width: var(--col-text);
  margin: 0 auto;
}
.colophon .colo-line { display: block; }
.colophon .toggle {
  display: inline-block;
  margin-top: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  cursor: pointer;
  font-style: normal;
}
body.dark .colophon .toggle { border-bottom-color: rgba(229,226,218,0.3); }

/* ─── Hero side-by-side on wide screens ───────────────────────────────────── */

.hero-section {
  max-width: var(--col-wide);
  margin: 0 auto;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

.hero-layout .hero-text { max-width: var(--col-text); }

.hero-layout .hero-diagram-slot { width: 100%; }
.hero-layout .hero-diagram-slot .diagram { margin: 0; }

@media (min-width: 1080px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
  }
  .hero-layout .hero-text { max-width: 540px; }
  /* Diagram on the right takes a snug aspect that fits in the hero band */
  .hero-layout .hero-diagram-slot .diagram { max-width: 100%; }
}

/* ─── Speech bubble line icon for diagram 3 ───────────────────────────────── */
.bubble-icon {
  width: 28px;
  height: 28px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Pricing page ────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 24px 0 32px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) {
  .plans { grid-template-columns: 1fr; }
}
.plan {
  padding: 20px 28px 24px 0;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan:nth-child(2) { padding-left: 28px; }
.plan:nth-child(3) { padding-left: 28px; border-right: 0; padding-right: 0; }
@media (max-width: 880px) {
  .plan { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 20px 0 24px !important; }
  .plan:last-child { border-bottom: 0; }
}

.plan-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite);
  margin: 0;
}
.plan-price {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.plan-price .unit {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--graphite);
  letter-spacing: 0;
  margin-left: 4px;
}
.plan-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--graphite);
  margin: 0 0 4px;
}
.plan-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.plan .cta-primary, .plan .cta-quiet {
  margin-top: auto;
  align-self: flex-start;
}

/* "How pricing works" mono table — no checkmarks/crosses, just two columns */
.pricing-table {
  margin: 8px 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
}
.pricing-table .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.pricing-table .row .lbl {
  color: var(--graphite);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pricing-table .row .val { color: var(--ink); }
@media (max-width: 640px) {
  .pricing-table .row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
}

.faq {
  margin: 16px auto 0;
}
.faq .faq-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.faq .faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq .faq-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.4;
  text-wrap: pretty;
}
.faq .faq-a {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.82;
  margin: 0;
  text-wrap: pretty;
}

/* ─── System-notes page ───────────────────────────────────────────────────── */

.sys-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.sys-grid:first-of-type { border-top: 1px solid var(--hairline); }
.sys-grid .sys-key {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-top: 4px;
}
.sys-grid .sys-val {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
}
.sys-grid .sys-val p { margin: 0 0 8px; }
.sys-grid .sys-val p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .sys-grid { grid-template-columns: 1fr; gap: 8px; }
}

.swatch-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0;
}
.swatch-row .sw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 120px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--graphite);
}
.swatch-row .sw .chip {
  height: 56px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
}
.swatch-row .sw .name { color: var(--ink); font-size: 12px; }

.type-sample {
  margin: 4px auto 0;
}
.type-sample .row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed var(--hairline);
}
.type-sample .row:first-child { border-top: 0; }
.type-sample .row .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}

.brand-table {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  margin: 0;
}
.brand-table .row {
  display: grid;
  grid-template-columns: 28px 1fr 120px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
}
.brand-table .row:last-child { border-bottom: 0; }
.brand-table .chip {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  margin: 0 5px;
}
.brand-table .hex { color: var(--graphite); text-align: right; }

/* Nav with two links */
.nav-links {
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.nav-links .nav-link.active {
  color: var(--ink);
  border-color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Small-screen repairs. The hero arc packs eight source marks across the full
   width; below ~640px their labels collide into an unreadable run, so the marks
   speak for themselves and the caption underneath carries the explanation.
   The top nav also needs to wrap rather than crush the wordmark.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 16px;
  }

  .nav-links {
    flex-basis: 100%;
  }

  .diagram .src .name {
    display: none;
  }

  .diagram .src.compact {
    gap: 0;
  }
}