@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&display=swap");

:root {
  color-scheme: light;
  --paper: #f5f4ef;
  --paper-bright: #fbfaf6;
  --ink: #11120f;
  --muted: #686962;
  --faint: #a2a39c;
  --line: #d9d8d1;
  --accent: #0d9f79;
  --accent-soft: #dcefe8;
  --dark: #111310;
  --dark-soft: #1a1d19;
  --dark-line: #33362f;
  --max: 1240px;
  --pad: clamp(24px, 5vw, 72px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }

/* The product UI uses Orbitron for the CEX lettering. Keep it confined to
   intentional brand moments so the site retains its editorial readability. */
.cex-wordmark {
  font-family: "Orbitron", "Chakra Petch", ui-sans-serif, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
}

.cex-wordmark-inline {
  display: inline-block;
  padding-left: .06em;
  letter-spacing: .1em;
}

.cex-wordmark-heading { letter-spacing: .14em; }
.cex-wordmark-display { letter-spacing: .16em; }
.cex-wordmark-runtime { letter-spacing: .22em; text-indent: .22em; }
.cex-wordmark-footer { letter-spacing: .24em; text-indent: .24em; }
.cex-wordmark-legal { letter-spacing: .08em; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon-apple { -webkit-mask-image: url("./assets/icon-apple.svg"); mask-image: url("./assets/icon-apple.svg"); }
.icon-linux { -webkit-mask-image: url("./assets/icon-linux.svg"); mask-image: url("./assets/icon-linux.svg"); }
.icon-windows { -webkit-mask-image: url("./assets/icon-windows.svg"); mask-image: url("./assets/icon-windows.svg"); }
.icon-github { -webkit-mask-image: url("./assets/icon-github.svg"); mask-image: url("./assets/icon-github.svg"); }
.icon-mail { -webkit-mask-image: url("./assets/icon-mail.svg"); mask-image: url("./assets/icon-mail.svg"); }
.icon-discord { -webkit-mask-image: url("./assets/icon-discord.svg"); mask-image: url("./assets/icon-discord.svg"); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--dark);
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

.section-shell {
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding-inline: var(--pad);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(16px);
  transition: border-color 180ms ease, background 180ms ease;
}

.site-header.scrolled { border-color: var(--line); }

.brand { position: relative; z-index: 102; display: inline-flex; align-items: center; gap: 11px; }
.brand img { width: 34px; height: 34px; }

.brand-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: clamp(22px, 2.5vw, 40px); }

.site-nav a {
  color: #393a35;
  font-size: 13px;
  font-weight: 620;
  transition: color 160ms ease;
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }

.site-nav .nav-github {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.nav-github .icon { width: 13px; height: 13px; }

.menu-button { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr);
  align-items: center;
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  min-height: min(810px, calc(100svh - 78px));
  margin-inline: auto;
  padding: clamp(72px, 9vw, 128px) 0 clamp(90px, 10vw, 142px);
  gap: clamp(40px, 7vw, 112px);
}

.eyebrow, .section-index {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }

.hero h1 {
  margin: 0;
  font-size: clamp(60px, 7.4vw, 112px);
  font-weight: 680;
  letter-spacing: -.075em;
  line-height: .91;
}

.hero h1 em { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }

.hero-lede {
  max-width: 650px;
  margin: 38px 0 0;
  color: #4c4d47;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.55;
  letter-spacing: -.018em;
}

.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 42px; }

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 720;
  transition: transform 170ms ease, background 170ms ease, border-color 170ms ease, color 170ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--dark); color: white; }
.button-dark:hover { background: var(--accent); }

.text-link { color: #363732; font-size: 14px; font-weight: 650; }
.text-link span { display: inline-block; margin-left: 4px; transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(5px); }

.hero-note { margin: 21px 0 0; color: var(--faint); font-size: 11px; letter-spacing: .04em; }

.hero-object {
  position: relative;
  contain: layout paint;
  overflow: hidden;
  aspect-ratio: 1;
  width: min(100%, 520px);
  margin-inline: auto;
}

.hero-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 184px;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 36px;
  background: var(--dark);
  box-shadow: 0 26px 70px rgba(19, 23, 19, .16);
}

.hero-mark img {
  display: block;
  width: 124px;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-one { width: 70%; aspect-ratio: 1; }
.orbit-two { width: 100%; aspect-ratio: 1; border-style: dashed; animation: slow-spin 36s linear infinite; }

.orbit-label {
  position: absolute;
  z-index: 3;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-bright);
  color: #555650;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(18, 20, 17, .05);
}

.label-memory { top: 8%; left: 14%; }
.label-tools { top: 25%; right: -1%; }
.label-skills { bottom: 18%; right: 6%; }
.label-policies { bottom: 6%; left: 10%; }

.hero-signal { position: absolute; top: 49%; left: -1%; display: flex; align-items: center; gap: 5px; height: 28px; }
.hero-signal span { width: 3px; height: 7px; border-radius: 5px; background: var(--accent); animation: signal 1.4s ease-in-out infinite; }
.hero-signal span:nth-child(2) { animation-delay: 100ms; }
.hero-signal span:nth-child(3) { animation-delay: 200ms; }
.hero-signal span:nth-child(4) { animation-delay: 300ms; }
.hero-signal span:nth-child(5) { animation-delay: 400ms; }

@keyframes slow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes signal { 0%, 100% { height: 7px; opacity: .45; } 50% { height: 25px; opacity: 1; } }

.statement {
  display: grid;
  grid-template-columns: 1fr 3fr;
  padding-block: clamp(90px, 11vw, 160px);
  border-top: 1px solid var(--line);
}

.statement h2, .section-heading h2, .model-copy h2, .download-copy h2, .feedback-copy h2 {
  margin: 0;
  font-size: clamp(42px, 5.1vw, 76px);
  font-weight: 620;
  letter-spacing: -.06em;
  line-height: 1.02;
}

.statement > div > p {
  max-width: 760px;
  margin: 34px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.7;
}

.system-section { padding: clamp(92px, 10vw, 152px) 0; background: var(--paper-bright); }

.section-heading { display: grid; grid-template-columns: 1fr 3fr; margin-bottom: 64px; }
.section-heading > div > p { margin: 20px 0 0; color: var(--muted); font-size: 17px; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }

.capability {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: clamp(27px, 3vw, 42px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 180ms ease;
}

.capability:hover { background: white; }
.capability-featured { grid-row: span 2; min-height: 640px; background: var(--accent-soft); }
.capability-featured:hover { background: #d3ebe2; }

.capability-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.capability-state { color: var(--accent); font-weight: 750; }
.capability-icon { color: var(--accent); font-size: 20px; line-height: 1; }

.capability h3 { margin: auto 0 14px; font-size: clamp(23px, 2vw, 30px); font-weight: 630; letter-spacing: -.04em; line-height: 1.15; }
.capability p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.memory-visual { position: relative; width: min(82%, 300px); aspect-ratio: 1; margin: 40px auto 28px; }
.memory-core { position: absolute; inset: 37%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 13px rgba(13,159,121,.12), 0 0 0 28px rgba(13,159,121,.06); }
.memory-line { position: absolute; border: 1px solid rgba(13, 126, 98, .34); border-radius: 50%; }
.line-a { inset: 8%; }
.line-b { inset: 19%; border-style: dashed; }
.line-c { top: 5%; left: 48%; width: 1px; height: 90%; border: 0; background: rgba(13, 126, 98, .26); }
.line-d { top: 48%; left: 5%; width: 90%; height: 1px; border: 0; background: rgba(13, 126, 98, .26); }

.model-section {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(70px, 9vw, 140px);
  padding-block: clamp(110px, 12vw, 184px);
}

.model-copy > p:not(.section-index) { margin: 29px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.plain-list { padding: 0; margin: 38px 0 0; list-style: none; border-top: 1px solid var(--line); }
.plain-list li { display: flex; gap: 17px; padding: 16px 0; border-bottom: 1px solid var(--line); color: #343530; font-size: 14px; }
.plain-list span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.runtime-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto 44px auto 44px auto;
  max-width: 540px;
  margin-inline: auto;
}

.diagram-node, .diagram-runtime, .diagram-models { grid-column: 2; }
.diagram-node { display: flex; align-items: center; justify-content: center; width: 90px; height: 46px; margin-inline: auto; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-bright); font-size: 12px; font-weight: 750; }
.diagram-line { grid-column: 2; position: relative; width: 1px; height: 44px; margin-inline: auto; background: var(--line); overflow: hidden; }
.diagram-line i { position: absolute; top: -12px; left: 0; width: 1px; height: 12px; background: var(--accent); animation: travel 2.2s ease-in-out infinite; }
.line-one { grid-row: 2; }
.line-two { grid-row: 4; }
.line-two i { animation-delay: 1.1s; }
@keyframes travel { 0% { transform: translateY(0); } 80%, 100% { transform: translateY(58px); } }

.diagram-runtime {
  grid-row: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 26px;
  border-radius: 6px;
  background: var(--dark);
  color: white;
  box-shadow: 0 24px 70px rgba(18, 20, 17, .13);
}
.diagram-runtime img { grid-row: span 2; width: 54px; }
.diagram-runtime strong { font-size: 18px; letter-spacing: .22em; }
.runtime-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.runtime-parts span { padding: 4px 8px; border: 1px solid var(--dark-line); border-radius: 999px; color: #aeb2a9; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

.diagram-models { grid-row: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.diagram-models span { padding: 14px 8px; border: 1px solid var(--line); background: var(--paper-bright); text-align: center; color: #50514c; font-size: 10px; font-weight: 680; }

.principle-strip { padding-block: 80px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(44px, 7vw, 100px); }
.principle-mark { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 10px; font-weight: 800; }
.principle-grid h3 { margin: 27px 0 12px; font-size: 20px; letter-spacing: -.03em; }
.principle-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.download-section { padding-block: clamp(100px, 11vw, 160px); background: var(--dark); color: white; }
.download-inner { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: clamp(70px, 9vw, 140px); }
.download-inner > *, .model-section > *, .feedback-section > * { min-width: 0; }
.section-index-light { color: #8c9187; }
.download-copy > p:not(.section-index) { max-width: 480px; margin: 28px 0 0; color: #aeb2aa; line-height: 1.7; }

.download-picker { border: 1px solid var(--dark-line); background: #151713; }
.os-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--dark-line); }
.os-tabs button { display: flex; min-height: 76px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 12px 10px; border: 0; border-right: 1px solid var(--dark-line); background: transparent; color: #777c73; cursor: pointer; font-size: 11px; font-weight: 700; transition: color 160ms ease, background 160ms ease; }
.os-tabs button:last-child { border-right: 0; }
.os-tabs button[aria-selected="true"] { background: #20231e; color: white; box-shadow: inset 0 -2px var(--accent); }
.os-tabs button:hover { color: #c9cdc5; }
.os-tabs button .icon { width: 20px; height: 20px; }

.os-panel { min-height: 410px; padding: clamp(26px, 3vw, 40px); }
.release-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.release-heading h3 { margin: 12px 0 0; font-size: 29px; letter-spacing: -.04em; }
.release-version { color: #777c73; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.release-status { display: flex; align-items: center; gap: 7px; color: #63d8b2; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.release-status i { width: 6px; height: 6px; border-radius: 50%; background: #50cca5; box-shadow: 0 0 0 5px rgba(80, 204, 165, .1); }
.release-status-pending { color: #c4b277; }
.release-status-pending i { background: #bca85f; box-shadow: 0 0 0 5px rgba(188, 168, 95, .1); }
.os-panel > p { margin: 24px 0; color: #aeb2aa; line-height: 1.65; }
.release-pending-note { display: inline-flex; align-items: center; gap: 8px; color: #aaa381; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.release-pending-note i { width: 6px; height: 6px; border-radius: 50%; background: #bca85f; }
.download-metric { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -4px 0 22px; padding: 13px 14px; border: 1px solid #292c27; background: #10120f; }
.download-metric-value { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
.download-metric-value strong { color: #f3f5ef; font-size: 22px; line-height: 1; letter-spacing: -.04em; }
.download-metric-value span { color: #aeb2aa; font-size: 11px; font-weight: 650; }
.download-metric > small { flex: 0 1 230px; margin: 0; color: #747970; text-align: right; font-size: 9px; line-height: 1.45; }
.download-metric[data-state="connecting"] .download-metric-value strong { animation: metric-pulse 1.2s ease-in-out infinite; }
.download-metric[data-state="unavailable"] { border-style: dashed; }
.download-metric-light { margin: 24px 0 30px; border-color: var(--line); background: #f7f6f1; }
.download-metric-light .download-metric-value strong { color: var(--ink); }
.download-metric-light .download-metric-value span { color: var(--muted); }
.download-metric-light > small { color: #7a7c75; }
@keyframes metric-pulse { 50% { opacity: .42; } }
.download-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.download-actions .is-disabled { opacity: .56; cursor: not-allowed; user-select: none; }
.button-light { background: white; color: var(--dark); }
.button-light:hover { background: var(--accent); color: white; }
.button-outline-light { border-color: #3a3e37; color: #dde0d8; }
.button-outline-light:hover { border-color: #6b7165; background: #22251f; }

.install-command { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 13px 14px; border: 1px solid #292c27; background: #10120f; }
.install-command code { min-width: 0; overflow: hidden; color: #959a91; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.install-command button { flex: 0 0 auto; padding: 4px 7px; border: 0; background: transparent; color: #60d0ab; cursor: pointer; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.os-panel small { display: block; margin-top: 21px; color: #62675f; font-size: 10px; line-height: 1.55; }

.feedback-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(70px, 10vw, 160px); padding-block: clamp(110px, 12vw, 184px); }
.feedback-copy > p:not(.section-index) { max-width: 570px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.contact-list { border-top: 1px solid var(--line); }
.contact-list > a, .contact-list > .contact-pending { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; padding: 16px 3px; border-bottom: 1px solid var(--line); }
.contact-list > a { transition: padding 180ms ease, color 180ms ease; }
.contact-list > a:hover { padding-inline: 10px; color: var(--accent); }
.contact-leading { display: flex; min-width: 0; align-items: center; gap: 15px; }
.contact-symbol { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #30312d; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; }
.contact-symbol .icon { width: 17px; height: 17px; }
.contact-list > a:hover .contact-symbol { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.contact-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.contact-list b { font-size: 15px; }
.contact-list small { color: var(--muted); font-size: 12px; }
.contact-arrow { font-style: normal; font-size: 16px; }
.contact-pending { color: #8c8d86; }
.contact-pending .contact-symbol { color: #8c8d86; }
.contact-status { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #85867f; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

.support-section { scroll-margin-top: 88px; padding-bottom: clamp(100px, 11vw, 168px); }
.support-panel {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: center;
  padding: clamp(44px, 6.5vw, 84px);
  border: 1px solid #292d27;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(13, 159, 121, .16), transparent 34%),
    linear-gradient(135deg, #151814, #0f110e 72%);
  color: #f6f7f3;
  box-shadow: 0 34px 90px rgba(17, 18, 15, .18);
}
.support-copy .section-index { color: #65d7b3; }
.support-copy h2 { max-width: 620px; margin: 34px 0 0; font-size: clamp(48px, 5.5vw, 76px); font-weight: 620; letter-spacing: -.065em; line-height: .98; }
.support-copy h2 em { color: #61d7b1; font-family: Georgia, serif; font-weight: 400; }
.support-copy > p:not(.section-index) { max-width: 600px; margin: 27px 0 0; color: #a9aea5; font-size: 16px; line-height: 1.72; }
.support-principles { display: grid; gap: 11px; margin: 30px 0 24px; }
.support-principles span { display: flex; align-items: center; gap: 11px; color: #d8dbd4; font-size: 12px; }
.support-principles i { width: 25px; height: 25px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #38413a; border-radius: 8px; color: #61d7b1; background: #19231e; font: normal 8px/1 "SFMono-Regular", Consolas, monospace; }
.support-copy > small { display: block; max-width: 520px; color: #666c64; font-size: 10px; line-height: 1.55; }

.support-checkout { min-width: 0; padding: 21px; border: 1px solid #d8d9d2; border-radius: 18px; background: #f8f7f2; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .26); }
.support-checkout > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.support-checkout > header > div { display: grid; gap: 4px; }
.support-checkout > header span { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.support-checkout > header strong { font-size: 16px; }
.support-checkout > header small { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font: 8px/1 "SFMono-Regular", Consolas, monospace; }
.support-cadence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-bottom: 11px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: #eeede7; }
.support-cadence button { min-height: 38px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.support-cadence button.selected { color: var(--ink); background: white; box-shadow: 0 4px 14px rgba(17, 18, 15, .09); }
.support-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.support-amounts button { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; cursor: pointer; font-size: 12px; font-weight: 700; }
.support-amounts button:hover { border-color: #8fcdb8; }
.support-amounts button.selected { border-color: var(--accent); color: #087a5d; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(13, 159, 121, .12); }
.support-custom { display: grid; gap: 7px; margin-top: 11px; }
.support-custom[hidden] { display: none; }
.support-custom > span:first-child { color: var(--muted); font-size: 10px; font-weight: 650; }
.support-custom > span:last-child { height: 44px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; border: 1px solid var(--accent); border-radius: 10px; background: white; }
.support-custom b { color: var(--accent); text-align: right; font-size: 12px; }
.support-custom input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 10px 0 5px; color: var(--ink); background: transparent; font-size: 13px; font-weight: 700; }
.support-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 16px 0 12px; padding-top: 15px; border-top: 1px solid var(--line); }
.support-summary span { color: var(--muted); font-size: 11px; }
.support-summary strong { font-size: 14px; }
.support-action { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; background: var(--accent); color: white; font-size: 12px; font-weight: 750; transition: background 160ms ease, transform 160ms ease; }
.support-action:not([aria-disabled="true"]):hover { background: #0b8b6b; transform: translateY(-1px); }
.support-action[aria-disabled="true"] { border: 1px solid var(--line); color: #9a9b94; background: #ecebe5; cursor: not-allowed; }
.support-checkout-note { margin: 9px 4px 0; color: var(--faint); font-size: 9px; line-height: 1.45; text-align: center; }

.site-footer { padding-block: 76px 28px; background: var(--dark); color: #f4f5f0; }
.footer-main { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(620px, 1.8fr); gap: clamp(70px, 10vw, 150px); }
.footer-intro { max-width: 310px; }
.footer-brand { display: inline-flex; align-items: center; gap: 13px; }
.footer-brand > span { display: flex; flex-direction: column; gap: 2px; }
.footer-brand strong { font-size: 15px; }
.footer-brand small { color: #878c82; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.footer-intro > p { margin: 26px 0 17px; color: #a7aca2; font-size: 13px; line-height: 1.7; }
.footer-contact { color: #61d7b1; font-size: 12px; }
.footer-contact:hover { color: white; }
.footer-directory { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: clamp(28px, 4vw, 62px); }
.footer-group { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; }
.footer-group h2 { margin: 0 0 8px; color: #72776f; font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.footer-group a, .footer-pending { color: #c2c6bd; font-size: 12px; line-height: 1.4; }
.footer-group a { transition: color 150ms ease, transform 150ms ease; }
.footer-group a:hover { color: white; transform: translateX(2px); }
.footer-pending { display: inline-flex; align-items: center; gap: 6px; color: #62675f; }
.footer-pending .icon { width: 12px; height: 12px; }
.footer-pending small { padding: 2px 5px; border: 1px solid #3b3e38; border-radius: 999px; font-size: 7px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 68px; padding-top: 24px; border-top: 1px solid #2c2f2a; color: #6f746b; font-size: 10px; }
.footer-bottom > p { margin: 0; font-family: Georgia, serif; font-size: 14px; font-style: italic; }
.footer-bottom > div { display: flex; gap: 24px; }

/* Editorial support pages */
.content-page main { padding-top: 80px; }
.content-hero { padding-block: clamp(90px, 10vw, 145px) clamp(70px, 8vw, 110px); border-bottom: 1px solid var(--line); }
.content-hero-inner { display: grid; grid-template-columns: .45fr 1.55fr; gap: clamp(40px, 9vw, 130px); }
.content-hero h1 { max-width: 900px; margin: 0; font-size: clamp(54px, 7.5vw, 104px); font-weight: 650; letter-spacing: -.07em; line-height: .92; }
.content-hero h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.content-hero .content-lede { max-width: 720px; margin: 34px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 22px); line-height: 1.65; }
.content-body { display: grid; grid-template-columns: minmax(170px, .42fr) minmax(0, 1.58fr); gap: clamp(50px, 9vw, 130px); padding-block: clamp(70px, 9vw, 130px); }
.content-toc { position: sticky; top: 112px; align-self: start; display: flex; flex-direction: column; gap: 10px; }
.content-toc span { margin-bottom: 9px; color: var(--faint); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.content-toc a { color: var(--muted); font-size: 12px; }
.content-toc a:hover { color: var(--accent); }
.content-prose { min-width: 0; max-width: 850px; }
.content-prose section { padding: 0 0 68px; scroll-margin-top: 110px; }
.content-prose section + section { padding-top: 68px; border-top: 1px solid var(--line); }
.content-prose h2 { margin: 0 0 22px; font-size: clamp(31px, 4vw, 48px); font-weight: 640; letter-spacing: -.05em; line-height: 1.05; }
.content-prose h3 { margin: 32px 0 12px; font-size: 18px; letter-spacing: -.02em; }
.content-prose p, .content-prose li { color: #555650; font-size: 15px; line-height: 1.75; }
.content-prose p { margin: 0 0 18px; }
.content-prose ul, .content-prose ol { margin: 18px 0 0; padding-left: 20px; }
.content-prose li + li { margin-top: 8px; }
.content-prose a { color: #087d60; text-decoration: underline; text-underline-offset: 3px; }
.content-callout { margin: 30px 0; padding: 24px 26px; border-left: 3px solid var(--accent); background: var(--paper-bright); }
.content-callout strong { display: block; margin-bottom: 7px; }
.content-callout p:last-child { margin-bottom: 0; }
.command-block, .checksum { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0; padding: 15px 17px; overflow-x: auto; border: 1px solid var(--line); background: var(--paper-bright); }
.command-block code, .checksum code { color: #42433e; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; white-space: nowrap; }
.release-card { margin: 28px 0; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); background: var(--paper-bright); }
.release-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.release-card h3 { margin: 0; font-size: 26px; }
.meta-label, .status-pill { display: inline-flex; align-items: center; color: var(--accent); font-size: 9px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.status-pill { padding: 5px 8px; border: 1px solid #a8d5c7; border-radius: 999px; }
.status-pill.planned { border-color: #d4c792; color: #88762f; }
.status-pill.exploring { border-color: var(--line); color: var(--muted); }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0; }
.fact-card { padding: 22px; border: 1px solid var(--line); background: var(--paper-bright); }
.fact-card strong { display: block; margin-bottom: 7px; font-size: 15px; }
.fact-card span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.page-updated { color: var(--faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.reveal { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 1100px) {
  .support-panel { grid-template-columns: 1fr; }
  .support-checkout { width: min(100%, 620px); }
  .footer-main { grid-template-columns: 1fr; }
  .footer-intro { max-width: 470px; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 760px; }
  .hero-object { width: min(82vw, 500px); }
  .statement, .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-featured { grid-row: span 1; grid-column: span 2; min-height: 520px; }
  .memory-visual { width: min(46%, 270px); }
  .model-section, .download-inner, .feedback-section { grid-template-columns: 1fr; }
  .runtime-diagram { width: min(100%, 580px); margin-top: 20px; }
  .download-copy { max-width: 650px; }
  .download-picker { width: min(100%, 720px); }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }
  .site-header { position: fixed; inset: 0 0 auto; width: 100%; height: 68px; backdrop-filter: none; }
  main { padding-top: 68px; }
  .menu-button { position: relative; z-index: 102; display: grid; width: 42px; height: 42px; place-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; }
  .menu-button span { display: block; width: 16px; height: 1px; background: var(--ink); transition: transform 160ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; z-index: 101; display: flex; max-width: 100vw; align-items: flex-start; flex-direction: column; gap: 0; overflow-x: hidden; padding: 110px var(--pad) 30px; background: #f5f4ef; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 180ms ease; }
  .site-nav.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav a { width: 100%; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 21px; letter-spacing: -.02em; }
  .site-nav .nav-github { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--line); text-align: center; font-size: 14px; }
  .hero { padding-top: 66px; gap: 72px; }
  .hero h1 { font-size: clamp(53px, 16vw, 80px); }
  .hero-lede { margin-top: 28px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-object { width: min(92vw, 440px); }
  .hero-mark { width: 142px; border-radius: 29px; }
  .hero-mark img { width: 94px; }
  .orbit-label { font-size: 9px; }
  .statement, .system-section, .model-section, .feedback-section { padding-block: 90px; }
  .statement h2, .section-heading h2, .model-copy h2, .download-copy h2, .feedback-copy h2 { font-size: clamp(40px, 12vw, 58px); }
  .capability-grid { grid-template-columns: 1fr; }
  .capability, .capability-featured { grid-column: auto; min-height: 300px; }
  .capability-featured { min-height: 500px; }
  .memory-visual { width: min(74%, 270px); }
  .principle-grid { grid-template-columns: 1fr; }
  .download-section { padding-block: 90px; }
  .download-picker { min-width: 0; max-width: 100%; }
  .release-heading { align-items: flex-start; flex-direction: column-reverse; gap: 14px; }
  .download-actions { flex-direction: column; }
  .download-actions .button { width: 100%; }
  .download-metric { align-items: flex-start; flex-direction: column; gap: 7px; }
  .download-metric > small { flex-basis: auto; text-align: left; }
  .support-section { padding-bottom: 90px; }
  .support-panel { gap: 40px; padding: 30px 22px; border-radius: 20px; }
  .support-copy h2 { margin-top: 24px; font-size: clamp(44px, 13vw, 62px); }
  .support-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 1fr; }
  .footer-intro { max-width: 440px; }
  .footer-directory { grid-template-columns: repeat(2, 1fr); }
  .content-page main { padding-top: 68px; }
  .content-hero-inner, .content-body { grid-template-columns: 1fr; }
  .content-toc { position: static; display: none; }
  .content-hero h1 { font-size: clamp(50px, 16vw, 76px); }
  .fact-grid { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .brand-name { font-size: 17px; }
  .hero-note { line-height: 1.7; }
  .hero-object { width: min(80vw, 380px); }
  .orbit-label { padding: 5px 8px; }
  .label-tools { right: -3%; }
  .runtime-diagram { grid-template-columns: 24px 1fr; }
  .diagram-runtime { grid-template-columns: 1fr; text-align: center; }
  .diagram-runtime img { grid-row: auto; margin-inline: auto; }
  .runtime-parts { justify-content: center; }
  .diagram-models { grid-template-columns: 1fr; }
  .os-tabs button { padding-inline: 4px; }
  .os-panel { padding: 23px 18px; }
  .install-command { align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}