:root {
  color-scheme: dark;
  --paper: oklch(10% 0.008 105);
  --paper-deep: oklch(6% 0.006 105);
  --surface: oklch(15% 0.012 100);
  --ink: oklch(98% 0.006 100);
  --ink-soft: oklch(88% 0.014 102);
  --muted: oklch(74% 0.02 100);
  --gilt: oklch(86% 0.1 88);
  --focus: oklch(91% 0.13 96);
  --line: oklch(76% 0.04 100 / 28%);
  --font-display: Perpetua, 'Perpetua Titling MT', Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --gutter: clamp(1rem, 4.5vw, 4.5rem);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); font: 1.125rem/1.6 var(--font-display); -webkit-font-smoothing: antialiased; }
button,input { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
a:hover { color: var(--gilt); text-decoration-color: currentColor; }
button,a,input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
img { display: block; max-width: 100%; }
h1,h2,h3,p,figure,dl,dd { margin: 0; }
h1,h2,h3 { font-weight: 400; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(3.75rem, 7.3vw, 7.25rem); letter-spacing: -.05em; }
h2 { font-size: clamp(2.75rem, 4vw, 4rem); letter-spacing: -.025em; }
h3 { font-size: 2rem; }
p + p { margin-top: 1.2rem; }
.frame { max-width: 1440px; margin: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; z-index: 20; left: 1rem; top: -5rem; background: var(--gilt); color: var(--paper); padding: .5rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.15rem; text-decoration: none; }
.cross { color: var(--gilt); font-size: 1.6rem; }
nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
nav a { font-size: 1rem; text-decoration: none; padding-block: .6rem; }
nav [aria-current] { color: var(--gilt); text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; min-height: 775px; padding-block: 3rem; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 1rem; }
.hero h1 { margin-bottom: 1.65rem; }
.hero-sub { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ink-soft); }
.install { margin-top: 2.7rem; padding: .8rem .9rem .8rem 1.1rem; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; gap: 1rem; max-width: 36rem; }
.install code { font: .8rem/1.6 var(--font-mono); overflow-wrap: anywhere; }
.install button { margin-left: auto; flex-shrink: 0; border: 0; background: transparent; color: var(--gilt); font: .75rem var(--font-mono); min-height: 32px; }
.hero-note { max-width: 27rem; color: var(--muted); font-size: 1rem; }
.text-link { display: inline-block; color: var(--gilt); margin-top: 1.3rem; }
.hero-art { position: relative; height: 660px; width: 100%; max-width: 440px; justify-self: end; overflow: hidden; background: var(--paper-deep); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
#hero-live { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; }
.is-live #hero-live { opacity: 1; }
.hero-art figcaption { position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; padding: 2.5rem 1rem .7rem; background: linear-gradient(transparent, var(--paper-deep)); color: var(--ink-soft); font: .65rem/1.6 var(--font-mono); display: flex; justify-content: space-between; gap: .6rem; }
.spec { display: grid; grid-template-columns: 1fr 1.3fr 2.1fr; border-block: 1px solid var(--line); padding-block: 1.8rem; gap: 2rem; color: var(--ink-soft); font-size: 1rem; }
.spec > div + div { border-left: 1px solid var(--line); padding-left: 2rem; }
.section { padding-block: 6.5rem; border-bottom: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; }
.why-prose { max-width: 44rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.45; }
.why-prose p + p { margin-top: 1.7rem; }
.why-prose p:last-child { color: var(--gilt); }
.faq-item { display: grid; grid-template-columns: .95fr 1.35fr; gap: 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border: 0; padding-bottom: 0; }
.faq dt { font-size: 1.25rem; line-height: 1.3; }
.faq dd { color: var(--muted); line-height: 1.55; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.section-intro { color: var(--muted); }
.plans { display: grid; grid-template-columns: 1fr 1fr 1fr; border-block: 1px solid var(--line); }
.plan { padding: 2rem; display: flex; flex-direction: column; align-items: start; }
.plan:first-child { padding-left: 0; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan h3 { font-size: 2.6rem; }
.plan-price { margin-top: 1rem; font-size: 2.75rem; line-height: 1.1; }
.plan-price span { font-size: 1rem; color: var(--muted); letter-spacing: 0; }
.plan .allowance { margin-block: .7rem 2rem; }
.plan .button { margin-top: auto; width: 100%; }
.self-host p { margin-top: .9rem; color: var(--muted); }
.self-host a { margin-top: auto; font-size: 1rem; padding-top: 1.3rem; }
.button { padding: .8rem 1.2rem; min-height: 48px; border: 1px solid var(--gilt); background: var(--gilt); color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fine { font-size: .9rem; color: var(--muted); margin-top: 1rem; }
.fine + .fine { margin-top: .4rem; }
.retention { font-size: 1rem; border-left: 2px solid var(--gilt); padding-left: 1rem; margin-top: 2rem; max-width: 46rem; color: var(--ink-soft); }
.release-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.release-section h2 { font-size: 2.75rem; max-width: 25rem; }
label { display: block; font-size: 1rem; margin-bottom: .4rem; }
input:not([type=checkbox]) { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 0; padding: .75rem; min-height: 48px; }
input::placeholder { color: var(--muted); }
.email-row { display: flex; gap: .65rem; }
.email-row .button { white-space: nowrap; }
.status { font-size: .95rem; color: var(--gilt); min-height: 1.6em; margin-top: .6rem; }
.status[data-error=true] { color: oklch(83% 0.09 35); }
.site-footer { padding-block: 2.5rem; color: var(--muted); font-size: .95rem; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.footer-top > a { color: var(--gilt); font-size: 1.15rem; }
.art-credit { max-width: 52rem; font-size: .75rem; line-height: 1.6; }
dialog { position: fixed; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 2.5rem; width: min(560px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
dialog::backdrop { background: oklch(3% .006 100 / 86%); }
dialog h2 { font-size: 2.75rem; margin-block: .5rem 1rem; }
dialog form { margin-top: 1.5rem; }
dialog .button { width: 100%; }
.close-button { position: absolute; top: .5rem; right: .7rem; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.8rem; }
.text-button { display: inline-block; background: none; color: var(--gilt); border: 0; border-bottom: 1px solid var(--line); padding: .6rem 0; min-height: 44px; }
#new-key-panel { border-block: 1px solid var(--line); padding-block: 1.5rem; margin-top: 1rem; }
#new-key-panel h3 { font-size: 1.6rem; color: var(--gilt); }
.key-value { display: block; overflow-wrap: anywhere; margin-top: 1rem; font: .85rem/1.5 var(--font-mono); }
.checkbox-label { display: flex; align-items: start; gap: .7rem; margin-top: 1rem; }
input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--gilt); }
.document { max-width: 58rem; margin-inline: auto; padding-block: 5rem 6rem; }
.page-heading { margin-bottom: 3rem; }
.document h1 { font-size: clamp(3rem, 6vw, 5.75rem); }
.lede { font-size: 1.45rem; color: var(--ink-soft); margin-top: 1.5rem; }
.document section { margin-top: 3rem; }
.document h2 { font-size: 2.5rem; margin-bottom: 1.2rem; }
.document h3 { font-size: 1.65rem; margin-block: 2rem 1rem; }
.document p, .document li { max-width: 48rem; }
.document ul, .document ol { padding-left: 1.4rem; }
.document li + li { margin-top: .5rem; }
code { font-family: var(--font-mono); font-size: .8em; overflow-wrap: anywhere; }
pre { max-width: 100%; white-space: pre; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); padding: 1.3rem; font: .8rem/1.75 var(--font-mono); tab-size: 2; }
pre code { font-size: inherit; overflow-wrap: normal; }
#claude-code > pre { white-space: pre-wrap; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th,td { padding: .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { color: var(--gilt); font-weight: 400; }
.document .notice { border-left: 2px solid var(--gilt); padding: 1rem 1.5rem; background: var(--surface); }
.document dd { margin-bottom: 1rem; color: var(--muted); }
.document dt { color: var(--gilt); }
@media (min-width:1440px) { .frame { border-inline: 1px solid var(--line); } }
@media (max-width:900px) {
 .hero { grid-template-columns: 1.15fr 1fr; min-height: 660px; gap: 1rem; }
 .hero-art { height: 530px; }
 .split { grid-template-columns: .8fr 2fr; gap: 2rem; }
 .faq-item { grid-template-columns: 1fr; gap: .7rem; }
 .plan { padding: 1.5rem; }
 .release-section { gap: 2rem; }
 .email-row { flex-direction: column; }
}
@media (max-width:600px) {
 :root { --gutter: 1rem; }
 body { font-size: 1.0625rem; }
 .site-header { min-height: 95px; gap: .5rem; align-items: start; flex-direction: column; justify-content: center; padding-block: .75rem; }
 .brand { font-size: 1.05rem; }
 nav { gap: 1.4rem; }
 nav a { font-size: .9rem; padding-block: .25rem; }
 .hero { grid-template-columns: 1fr; padding-top: 2.5rem; padding-bottom: 2rem; gap: 2rem; }
 .hero-copy { padding-bottom: 0; }
 h1 { font-size: 4.35rem; }
 .hero h1 { margin-bottom: 1rem; }
 .hero-sub { font-size: 1.25rem; }
 .install { margin-top: 1.8rem; padding: .7rem; gap: .6rem; }
 .install code { font-size: .71rem; }
 .install button { font-size: .68rem; }
 .hero-art { width: 100%; max-width: none; height: 490px; }
 .hero-art img { object-position: center 36%; }
 .spec { grid-template-columns: 1fr; gap: 1rem; padding-block: 1.5rem; }
 .spec > div + div { border-left: 0; padding-left: 0; }
 .section { padding-block: 3.5rem; }
 .split { grid-template-columns: 1fr; gap: 2rem; }
 .why-prose { font-size: 1.5rem; }
 .section-heading { align-items: start; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
 .plans { grid-template-columns: 1fr; }
 .plan, .plan:first-child { padding: 1.75rem 0; }
 .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
 .plan .button { max-width: none; }
 .self-host a { margin-top: 1rem; }
 .release-section { grid-template-columns: 1fr; }
 .email-row { flex-direction: column; }
 .footer-top { align-items: start; flex-direction: column; gap: 1rem; }
 dialog { padding: 2.5rem 1.25rem 1.25rem; }
 .document { padding-block: 3rem 4rem; }
 .document h1 { font-size: 3.5rem; }
 .document h2 { font-size: 2rem; }
 pre { padding: 1rem; }
 th,td { padding: .7rem .5rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }

/* Follow-up disclosures stay beside the action they explain. */
.claude-setup { max-width: 36rem; margin-top: .75rem; font-size: 1rem; color: var(--ink-soft); }
.install-retention { max-width: 36rem; margin-block: .65rem 1.2rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
#copy-status:empty { min-height: 0; margin: 0; }
#pricing .section-heading h2 { max-width: 43rem; }
.agent-key-guide { font-size: 1rem; color: var(--ink-soft); padding-left: 1rem; border-left: 2px solid var(--gilt); }
.key-handoff { margin-top: 1.3rem; }
.key-handoff h3 { margin-bottom: .6rem; }
#billing-unavailable, #existing-subscription { margin-block: .8rem 1.2rem; padding: 1rem; border: 1px solid var(--gilt); }
#billing-unavailable a, #existing-subscription a { margin-top: 0; }
#credits th code { white-space: nowrap; }