/* sastra.cloud — same family as the app: warm paper, indigo ink, one orange action. */
:root {
  --paper: oklch(0.982 0.008 83);
  --paper-2: oklch(0.955 0.012 83);
  --paper-3: oklch(0.925 0.016 83);
  --ink: oklch(0.22 0.035 292);
  --ink-2: oklch(0.42 0.04 292);
  --ink-3: oklch(0.55 0.035 292);
  --rule: oklch(0.86 0.02 83);
  --rule-2: oklch(0.78 0.024 83);
  --violet: oklch(0.36 0.09 292);
  --violet-2: oklch(0.90 0.04 292);
  --orange: oklch(0.61 0.17 40);
  --orange-2: oklch(0.55 0.16 40);
  --coral: oklch(0.69 0.14 35);
  --coral-2: oklch(0.93 0.04 39);
  --green: oklch(0.55 0.13 152);
  --red: oklch(0.58 0.19 27);
  --action: var(--orange);
  --action-hover: var(--orange-2);
  --action-ink: oklch(0.985 0.006 83);

  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px;
  --measure: 62ch;
  --wrap: 72rem;
  --radius: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.19 0.035 292);
    --paper-2: oklch(0.23 0.035 292);
    --paper-3: oklch(0.27 0.035 292);
    --ink: oklch(0.965 0.008 83);
    --ink-2: oklch(0.82 0.02 83);
    --ink-3: oklch(0.68 0.025 83);
    --rule: oklch(0.32 0.035 292);
    --rule-2: oklch(0.4 0.035 292);
    --violet: oklch(0.82 0.06 292);
    --violet-2: oklch(0.30 0.06 292);
    --coral-2: oklch(0.32 0.05 39);
    --action: var(--coral);
    --action-hover: oklch(0.74 0.13 35);
    --action-ink: oklch(0.17 0.035 292);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
/* Paper grain: barely there, keeps large surfaces from feeling flat. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) { body::before { opacity: 0.07; } }
body > * { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; font-variation-settings: "SOFT" 40, "opsz" 72; }
h1 { font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); line-height: 1.12; }
h3 { font-size: var(--text-lg); line-height: 1.25; font-variation-settings: "SOFT" 40, "opsz" 24; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-lg); }
a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 0.18em; transition: text-decoration-color 150ms var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
em { font-family: var(--font-display); font-style: italic; font-variation-settings: "SOFT" 60, "opsz" 72; }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 4px; font-variant-ligatures: none; }
pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-lg) var(--space-xl); white-space: pre-wrap; word-break: break-all; font-size: var(--text-sm); line-height: 1.55; margin: 0; }
pre code { background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { width: min(100% - 2 * var(--space-xl), var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 2 * var(--space-3xl), var(--wrap)); } }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); background: color-mix(in oklch, var(--paper) 92%, transparent); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand img { display: block; }
.nav nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-sm); }
.nav nav a { text-decoration: none; color: var(--ink-2); padding: 10px 0; white-space: nowrap; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--ink); }
.nav nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--action); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
.nav nav a.button { padding: 10px 18px; color: var(--action-ink); }
.nav nav .pill { display: none; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 999px; padding: 4px 10px; }
@media (min-width: 900px) { .nav nav .pill { display: inline-block; } }
.nav nav .quiet { display: none; }
@media (min-width: 900px) { .nav nav .quiet { display: inline; } }
@media (max-width: 640px) { .nav nav { gap: var(--space-md); } .nav nav a:not(.button):not([data-path]) { display: none; } .nav nav a.button { padding: 8px 14px; min-height: 40px; } .brand span { display: none; } }
@media (max-width: 380px) { .nav nav a[data-path="/self-hosting"] { display: none; } }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--action); color: var(--action-ink) !important; font-weight: 600; text-decoration: none !important; border: 1px solid transparent; transition: background-color 150ms var(--ease-out), transform 150ms var(--ease-out); white-space: nowrap; }
.button:hover { background: var(--action-hover); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button.secondary { background: transparent; color: var(--ink) !important; border-color: var(--rule-2); }
.button.secondary:hover { background: var(--paper-2); }
.button.large { padding: 14px 24px; font-size: var(--text-base); }
@media (hover: none) { .button:hover { transform: none; } }

/* Sections */
section { padding-block: var(--space-4xl); }
@media (min-width: 900px) { section { padding-block: var(--space-5xl); } }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 600; margin-bottom: var(--space-lg); }
.lede { font-size: var(--text-lg); line-height: 1.45; color: var(--ink-2); margin-top: var(--space-xl); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Hero */
.hero { padding-block: var(--space-3xl) var(--space-4xl); }
.hero-grid { display: grid; gap: var(--space-3xl); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 7fr 6fr; gap: var(--space-4xl); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); align-items: center; }
.hero-note { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--space-lg); }
.reveal { opacity: 0; transform: translateY(10px); animation: reveal 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: fade 200ms var(--ease-out) forwards; transform: none; } @keyframes fade { to { opacity: 1; } } }

/* Drawn product scenes (inline SVG uses these vars) */
.scene { width: 100%; height: auto; display: block; }
.scene .card { fill: var(--paper); stroke: var(--rule-2); }
.scene .card-2 { fill: var(--paper-2); stroke: var(--rule-2); }
.scene .line { fill: var(--rule-2); }
.scene .line-2 { fill: var(--ink-3); }
.scene .ink { fill: var(--ink); }
.scene .ink-2 { fill: var(--ink-2); }
.scene .violet { fill: var(--violet); }
.scene .violet-2 { fill: var(--violet-2); }
.scene .orange { fill: var(--action); }
.scene .coral-2 { fill: var(--coral-2); }
.scene .green { fill: var(--green); }
.scene .red { fill: var(--red); }
.scene .paper { fill: var(--paper); }
.scene text { font-family: var(--font-body); fill: var(--ink); }
.scene .label { font-size: 10px; fill: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.scene .title { font-size: 13px; font-weight: 500; }
.scene .small { font-size: 11px; fill: var(--ink-2); }
.scene .mono { font-family: var(--font-mono); font-size: 11px; }

/* Feature rows: alternating text and scene, no cards */
.feature { display: grid; gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl); }
.feature + .feature { border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .feature { grid-template-columns: 5fr 7fr; gap: var(--space-4xl); } .feature.flip > :first-child { order: 2; } }
.feature .num { font-family: var(--font-display); font-variation-settings: "SOFT" 80, "opsz" 144; font-size: 3rem; line-height: 1; color: var(--rule-2); margin-bottom: var(--space-lg); }
.feature h2 { margin-bottom: var(--space-lg); }
.feature ul { margin: var(--space-lg) 0 0; padding-left: 1.2em; color: var(--ink-2); max-width: var(--measure); }
.feature li + li { margin-top: var(--space-xs); }

/* Pricing block */
.plan { display: grid; gap: var(--space-2xl); border: 1px solid var(--rule-2); border-radius: 16px; padding: var(--space-2xl); background: var(--paper); }
@media (min-width: 900px) { .plan { grid-template-columns: 1fr 1fr; padding: var(--space-3xl); } }
.price { font-family: var(--font-display); font-variation-settings: "SOFT" 60, "opsz" 144; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.price small { font-family: var(--font-body); font-size: var(--text-base); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.per { color: var(--ink-3); font-size: var(--text-sm); margin-top: var(--space-sm); }
.includes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.includes li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-md); align-items: start; }
.includes svg { width: 18px; height: 18px; margin-top: 4px; color: var(--green); }
.billing { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: var(--space-xl); }
.billing input { position: absolute; opacity: 0; pointer-events: none; }
.billing label { padding: 6px 14px; border-radius: 999px; font-size: var(--text-sm); cursor: pointer; color: var(--ink-2); transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.billing input:checked + label { background: var(--ink); color: var(--paper); }
.billing input:focus-visible + label { outline: 2px solid var(--coral); outline-offset: 2px; }
.pricing:has(#yearly:checked) [data-when="monthly"], .pricing:has(#monthly:checked) [data-when="yearly"] { display: none; }
.notes { display: grid; gap: var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 720px) { .notes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.notes h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-xs); font-variation-settings: normal; }
.notes p { color: var(--ink-2); font-size: var(--text-sm); }

/* Strip (open source) */
.strip { background: var(--violet); color: oklch(0.96 0.01 83); }
@media (prefers-color-scheme: dark) { .strip { background: var(--paper-2); color: var(--ink); } }
.strip .wrap { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .strip .wrap { grid-template-columns: 1fr auto; } }
.strip p { color: inherit; opacity: 0.88; }
.strip .button.secondary { color: inherit !important; border-color: color-mix(in oklch, currentColor 40%, transparent); }
.strip .button.secondary:hover { background: color-mix(in oklch, currentColor 12%, transparent); }

/* Prose pages (legal, self-hosting) */
.prose { max-width: var(--measure); }
.prose h1 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-3xl); margin-bottom: var(--space-md); }
.prose h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-variation-settings: normal; }
.prose ul, .prose ol { padding-left: 1.3em; margin: var(--space-lg) 0; }
.prose li + li { margin-top: var(--space-sm); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin: var(--space-xl) 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink-2); }
.meta { color: var(--ink-3); font-size: var(--text-sm); margin-bottom: var(--space-2xl); }
.draft { display: inline-flex; gap: 8px; align-items: center; background: var(--coral-2); color: var(--ink); border-radius: 8px; padding: 10px 14px; font-size: var(--text-sm); margin-bottom: var(--space-2xl); }
.draft b { font-weight: 600; }
.paths { display: grid; gap: var(--space-2xl); margin-top: var(--space-3xl); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.paths article { padding-top: var(--space-lg); border-top: 2px solid var(--ink); }
.paths h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.paths p { color: var(--ink-2); font-size: var(--text-sm); }
.paths a.more { display: inline-block; margin-top: var(--space-md); font-weight: 500; }
.faq details { border-top: 1px solid var(--rule); padding: var(--space-lg) 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--space-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-family: var(--font-display); font-size: 1.4em; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--space-md); color: var(--ink-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--space-4xl); padding-block: var(--space-3xl) var(--space-xl); font-size: var(--text-sm); }
.foot { display: grid; gap: var(--space-2xl); }
@media (min-width: 720px) { .foot { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-brand p { color: var(--ink-2); margin-top: var(--space-md); max-width: 36ch; }
.foot-col { display: grid; gap: var(--space-sm); align-content: start; }
.foot-col h2 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-variation-settings: normal; margin-bottom: var(--space-xs); }
.foot-col a { text-decoration: none; color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule); color: var(--ink-3); font-size: var(--text-xs); }
.origin { background: var(--paper-2); }
.origin .wrap { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .origin .wrap { grid-template-columns: 1fr 2fr; } }