@import url("tokens.css");

html { background: var(--jc-bg); }

body {
  background: var(--jc-bg);
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  -webkit-font-smoothing: antialiased;
}

:root {
  --accent-green:   var(--jc-accent);
  --base-primary:   var(--jc-accent);
  --text-dark:      var(--jc-text);
  --text-normal:    var(--jc-text);

  --font-font-sans:  var(--jc-font-sans);
  --font-geist-sans: var(--jc-font-sans);
  --font-inter:      var(--jc-font-sans);
  --font-loopet:     var(--jc-font-sans);
  --font-geist-mono: var(--jc-font-mono);

  --primitive-white-1000: var(--jc-ivory);

  --black-alpha-5:  var(--jc-text);
  --black-alpha-10: var(--jc-text);
  --black-alpha-20: var(--jc-text);
  --black-alpha-30: var(--jc-text);
  --black-alpha-40: var(--jc-text);
  --black-alpha-50: var(--jc-text-muted);
  --black-alpha-60: var(--jc-text-muted);
  --black-alpha-70: var(--jc-text-muted);
  --black-alpha-80: var(--jc-text-muted);

  --black-alpha-90: var(--jc-accent);
}

.bg-background, .bg-white, main.bg-background { background-color: var(--jc-bg); }

*, *::before, *::after { border-radius: 0; }
input, select, textarea, button { border-radius: 0; }

[class], [style], [id] { border-radius: 0; }

.jc-btn,
a.jc-btn,
button.jc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jc-space-2);
  min-height: var(--jc-btn-h);
  padding: 0 var(--jc-btn-pad-x);
  border: var(--jc-btn-border) solid var(--jc-jet-black);
  background: var(--jc-btn-primary-bg);
  color: var(--jc-btn-primary-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--jc-btn-ms) ease, box-shadow var(--jc-btn-ms) ease;
}

.jc-btn:hover {
  transform: translate(calc(var(--jc-btn-offset) * -1), calc(var(--jc-btn-offset) * -1));
  box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-jet-black);
}

.jc-btn--accent {
  background: var(--jc-btn-accent-bg);
  color: var(--jc-btn-accent-text);

  font-size: 19px;
  font-weight: 700;
  min-height: 48px;
}

.jc-btn--ghost {
  background: transparent;
  color: var(--jc-btn-ghost-text);
}
.jc-btn--ghost:hover {
  box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-accent);
}

.jc-btn--sm {
  min-height: var(--jc-btn-h-sm);
  padding: 0 var(--jc-btn-pad-x-sm);
  font-size: var(--jc-text-sm);
}

:is(a, button) > :is(span, button)[class*="rounded-["] {
  border-width: var(--jc-btn-border);
  border-color: var(--jc-jet-black);
  font-weight: 600;
  transition: transform var(--jc-btn-ms) ease, box-shadow var(--jc-btn-ms) ease;
}

:is(a, button):hover > :is(span, button)[class*="rounded-["] {
  transform: translate(calc(var(--jc-btn-offset) * -1), calc(var(--jc-btn-offset) * -1));
}

.bg-jevcha-brand-primary,
.bg-jevcha-bg-inverse,
.bg-jevcha-brand-primary :where(span, b, i, em, svg, button),
.bg-jevcha-bg-inverse :where(span, b, i, em, svg, button) {
  color: var(--jc-btn-primary-text);
}
.bg-jevcha-brand-primary :where(svg) { stroke: currentColor; }

:is(a, button) > :is(span, button)[class*="bg-jevcha-bg-surface"] {
  background-color: transparent;
  color: var(--jc-text);
}
:is(a, button):hover > :is(span, button)[class*="bg-jevcha-bg-surface"] {
  box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-accent);
}

[data-jc="cta-primary"][data-jc] > :is(span, button) {
  background-color: var(--jc-btn-accent-bg);
  color: var(--jc-btn-accent-text);
  border-color: var(--jc-jet-black);
  font-size: 19px;
  font-weight: 700;
  min-height: 48px;
}
[data-jc="cta-primary"] :where(span, b, i, em, button) {
  color: var(--jc-btn-accent-text);
  font-size: 19px;

  font-weight: 700;
}
[data-jc="cta-primary"][data-jc]:hover > :is(span, button) {
  background-color: var(--jc-btn-accent-bg);
  box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-jet-black);
}

@media (prefers-reduced-motion: reduce) {
  .jc-btn, :is(a, button) > :is(span, button)[class*="rounded-["] { transition: none; }
  :is(a, button):hover > :is(span, button)[class*="rounded-["] { transform: none; }
}

[class*="border-jevcha-border-default"],
[class*="border-jevcha-border-strong"],
[class*="border-[#2c363f]"] {
  border-color: var(--jc-jet-black);
}

hr { border: 0; border-top: var(--jc-hair) solid var(--jc-line); }

[class~="text-[rgba(0,0,0,0.9)]"],
[class~="text-[rgba(0,0,0,0.86)]"],
[class~="text-[rgba(0,0,0,0.75)]"]
  { color: var(--jc-text); }

[class~="text-[rgba(0,0,0,0.6)]"],
[class~="text-[rgba(0,0,0,0.4)]"]
  { color: var(--jc-text-muted); }

[class~="text-[rgba(135,119,0,0.9)]"] { color: var(--jc-accent-ink); }

[class~="border-[rgba(0,0,0,0.06)]"],
[class~="border-[rgba(0, 0, 0, 0.10)]"],
[class~="border-[rgba(0,0,0,0.12)]"]
  { border-color: var(--jc-line); }

[class~="to-[rgba(231,90,124,0.18)]"] { --tw-gradient-to: rgba(231,90,124,0.18); }

.text-black, .text-black\/90        { color: var(--jc-text); }
.text-black\/60, .text-black\/40    { color: var(--jc-text-muted); }
.text-white                         { color: var(--jc-dark-text); }
.text-primary                       { color: var(--jc-accent-ink); }
.border-black, .border-black\/10    { border-color: var(--jc-line); }

.bg-white, .bg-white\/60            { background-color: var(--jc-bg); }

[class~="bg-[#2c363f]"], [class~="bg-[#1e262d]"], [class~="bg-[#232c34]"] {
  color: var(--jc-dark-text);
}
[class~="bg-[#2c363f]"] :is(h1, h2, h3, h4, p, span, li, div, a, strong),
[class~="bg-[#1e262d]"] :is(h1, h2, h3, h4, p, span, li, div, a, strong) {
  color: var(--jc-dark-text);
}
[class~="bg-[#2c363f]"] :is(.text-black\/40, .text-black\/60, .text-jevcha-text-secondary,
                            .text-black-alpha-60) {
  color: var(--jc-dark-text-muted);
}

code, pre, kbd, samp, [data-jc="mono"] {
  font-family: var(--jc-font-mono);
  font-variant-numeric: tabular-nums;
}

[data-jc="label"] {
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text-muted);
}

h1, h2, h3, h4 {
  font-family: var(--jc-font-sans);
  letter-spacing: var(--jc-tracking-head);
  text-wrap: balance;
  color: var(--jc-text);
}
h1 { line-height: var(--jc-leading-tight); font-weight: 700; }
h2, h3 { line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }

p { text-wrap: pretty; }

p > a:not([class]), li > a:not([class]) {
  color: var(--jc-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
p > a:not([class]):hover, li > a:not([class]):hover {
  color: var(--jc-ivory);
  background: var(--jc-accent);
  text-decoration: none;
}

.bg-jevcha-bg-page       { background-color: var(--jc-bg); }
.bg-jevcha-bg-subtle     { background-color: var(--jc-surface-sunk); }
.bg-jevcha-bg-inverse    { background-color: var(--jc-dark-bg); color: var(--jc-dark-text); }

.bg-jevcha-bg-surface    { background-color: var(--jc-bg); }
.bg-jevcha-brand-primary { background-color: var(--jc-btn-primary-bg); }
.bg-jevcha-brand-subtle  { background-color: var(--jc-dust-grey); }

.text-jevcha-text-primary   { color: var(--jc-text); }
.text-jevcha-text-secondary { color: var(--jc-text-muted); }
.text-jevcha-text-muted     { color: var(--jc-text-muted); }
.text-jevcha-text-inverse   { color: var(--jc-dark-text); }
.text-jevcha-brand-primary  { color: var(--jc-accent-ink); }

.border-jevcha-border-default { border-color: var(--jc-line); }
.border-jevcha-border-strong  { border-color: var(--jc-jet-black); }

.bg-jevcha-bg-inverse :where(p, span, li, h1, h2, h3, h4, div) { color: var(--jc-dark-text); }
.bg-jevcha-bg-inverse :where(.text-jevcha-text-secondary, .text-jevcha-text-muted) {
  color: var(--jc-dark-text-muted);
}
.bg-jevcha-bg-inverse :where(.text-jevcha-brand-primary) { color: var(--jc-dark-accent); }

header[class*="sticky"], [class*="sticky"][class*="top-0"] {
  top: 0;
  background-color: var(--jc-bg);
  border-bottom: var(--jc-hair) solid var(--jc-line);
}

.jc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.jc-logo svg { display: block; }
.jc-logo-word {
  font-family: var(--jc-font-mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--jc-text);
}

.bg-jevcha-bg-inverse .jc-logo-word,
[class~="bg-[#2c363f]"] .jc-logo-word { color: var(--jc-dark-text); }

.jc-kicker { display: none; }

img[data-original-src] {
  background: var(--jc-bg);
  border: var(--jc-rule) solid var(--jc-jet-black);
  object-fit: contain;
}

:focus-visible {
  outline: var(--jc-rule) solid var(--jc-jet-black);
  outline-offset: 3px;
}

div:empty:not([class*="border"]):not([class*="bg-"]) { display: none; }

[class*="min-h-[680px]"], [class*="min-h-[600px]"], [class*="min-h-[520px]"] { min-height: 0; }

[class*="skeleton"] { display: none; }

[class*="py-[104px]"], [class*="py-[100px]"], [class*="py-[120px]"] { padding-block: 72px; }
div[class*="mb-[80px]"], div[class*="mb-[100px]"] { margin-bottom: 48px; }

.jc-hero-code {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  border: var(--jc-rule) solid var(--jc-jet-black);
  margin: var(--jc-space-12) auto 0;
  max-width: 980px;
  text-align: left;
  background: var(--jc-jet-black);
}
.jc-hero-code figure { margin: 0; min-width: 0; }
.jc-hero-code figure + figure { border-left: var(--jc-rule) solid var(--jc-ink-soft); }

.jc-hero-code figcaption {
  display: flex;
  align-items: center;
  gap: var(--jc-space-3);
  padding: 11px var(--jc-space-4);
  border-bottom: var(--jc-rule) solid var(--jc-ink-soft);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jc-dust-grey);
}
.jc-hero-code figcaption b {

  background: var(--jc-accent-ink);
  color: var(--jc-ivory);
  padding: 3px 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.jc-hero-code figure + figure figcaption b { background: var(--jc-dry-sage); color: var(--jc-jet-black); }
.jc-hero-code figcaption span { text-transform: none; letter-spacing: 0.02em; }

.jc-hero-code pre {
  margin: 0;
  padding: var(--jc-space-4) var(--jc-space-5, 20px);
  overflow-x: auto;
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  line-height: 1.75;
  color: var(--jc-ivory);
  tab-size: 2;
}
.jc-hero-code pre i { color: var(--jc-dry-sage); font-style: normal; }
.jc-hero-code pre em { display: block; margin-top: var(--jc-space-3); color: var(--jc-dust-grey); font-style: normal; }

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding-block: 72px;
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:first-child {
  grid-column: 1 / -1;
  margin-bottom: var(--jc-space-8);
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--jc-space-4);
  padding: var(--jc-space-8);
  border: var(--jc-rule) solid var(--jc-jet-black);
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:nth-child(3) {
  border-left-width: 0;
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:not(:first-child) > * {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:not(:first-child) > * > :is(div, ul) {
  width: 100%;
  align-self: stretch;
}
[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) :is(ul, p, h3) {
  width: 100%;
  max-width: none;
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) li {
  margin-inline-start: 0;
  list-style: none;
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) ul {
  margin-top: var(--jc-space-5);
  gap: 0;
  list-style: none;
  padding-left: 0;
}
[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) li {
  padding: 11px 0;
  border-top: var(--jc-hair) solid var(--jc-line);
  font-size: var(--jc-text-sm);
}
[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) li:last-child {
  border-bottom: var(--jc-hair) solid var(--jc-line);
}

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) li::marker,
[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) li::before { content: none; }

[class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) a:last-child {
  margin-top: auto;
  padding-top: var(--jc-space-6);
  align-self: flex-start;
}

[class~="flex-col"][class*="rounded-"]:has([data-jc="compliance"]) {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  border: var(--jc-rule) solid var(--jc-jet-black);

  padding: 0;
}

[class*="h-[320px]"]:has([data-jc="compliance"]) {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: var(--jc-space-8);
  border-right: var(--jc-rule) solid var(--jc-jet-black);
}
[data-jc="compliance"] {
  font-size: var(--jc-text-4xl);
  line-height: 1.08;
  letter-spacing: var(--jc-tracking-head);
  font-weight: 700;
}

[class~="flex-col"][class*="rounded-"]:has([data-jc="compliance"]) > *:nth-child(2) {
  padding: var(--jc-space-8);
  justify-content: center;
}

[class~="flex-col"][class*="rounded-"]:has([data-jc="compliance"]) > *:nth-child(n+3) {
  display: none;
}

@media (max-width: 899px) {
  [class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) { grid-template-columns: 1fr; }
  [class*="max-w-[1280px]"]:has(> * > [data-jc="how"]) > *:nth-child(3) {
    border-left-width: var(--jc-rule);
    border-top-width: 0;
  }
  [class~="flex-col"][class*="rounded-"]:has([data-jc="compliance"]) {
    grid-template-columns: 1fr;
  }
  [class*="h-[320px]"]:has([data-jc="compliance"]) {
    border-right: 0;
    border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[id^="jc-"] { scroll-margin-top: var(--jc-anchor-offset); }

:is(h1, h2)[id^="jc-"]:target::after {
  content: "";
  display: block;
  width: 64px;
  height: var(--jc-rule);
  margin-top: 12px;
  background: var(--jc-accent);
}

.jc-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jc-nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--jc-btn-h-sm);
  padding: 0 14px;
  border-bottom: var(--jc-rule) solid transparent;
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--jc-btn-ms) ease, background-color var(--jc-btn-ms) ease;
}

.jc-nav-link:hover {
  border-bottom-color: var(--jc-accent);
  background-color: var(--jc-dust-grey);
}
.jc-nav-link:focus-visible { border-bottom-color: var(--jc-accent); }

@media (prefers-reduced-motion: reduce) { .jc-nav-link { transition: none; } }

.jc-nav-mobile { display: none; }
@media (max-width: 1023px) {
  .jc-nav-mobile {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 var(--jc-gutter) 6px;
    border-top: var(--jc-hair) solid var(--jc-line);
    scrollbar-width: none;
  }
  .jc-nav-mobile::-webkit-scrollbar { display: none; }
  .jc-nav-mobile .jc-nav-link { height: 38px; padding: 0 12px; }
  :root { --jc-anchor-offset: 118px; }
}

.jc-soon { cursor: not-allowed; }

.jc-soon > :is(span, button)[class*="inline-flex"]::after,
.jc-soon:not(:has(> :is(span, button)[class*="inline-flex"])):not(:has(> svg))::after {

  content: "SOON";
  margin-left: var(--jc-space-2);
  padding: 1px 4px;
  border: var(--jc-hair) solid currentColor;
  font-family: var(--jc-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}

.jc-soon > :is(span, button)[class*="inline-flex"] {
  max-width: 100%;
  height: auto;
  white-space: normal;
  flex-wrap: wrap;
  text-align: center;
}

.jc-soon:not(:has(> :is(span, button)[class*="inline-flex"])):not([data-jc="cta-primary"]) {
  text-decoration: underline dotted 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  opacity: 0.92;
}

footer .jc-soon:has(> svg) { color: var(--jc-line-firm); }

:is(a, button)[data-jc="cta-primary"]:not(:has(span, button)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--jc-btn-pad-x);
  border: var(--jc-btn-border) solid var(--jc-jet-black);
  background: var(--jc-btn-accent-bg);
  color: var(--jc-btn-accent-text);
  font-family: var(--jc-font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

a.jc-soon[data-jc-soon]:hover > :is(span, button)[class*="rounded-["] {
  transform: none;
  box-shadow: none;
}
a.jc-soon[data-jc-soon]:hover > :is(span, button)[class*="bg-jevcha-bg-surface"] { box-shadow: none; }

footer > div:has(> .jc-band) { flex-wrap: wrap; }
@media (min-width: 900px) {
  footer > div:has(> .jc-band) {
    flex-direction: row;
    align-items: flex-start;
    column-gap: var(--jc-space-12);
  }
  footer [class*="w-[280px]"] { flex: 0 0 260px; width: 260px; }
  footer .jc-foot-cols { flex: 1 1 0%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.jc-band {
  container-type: inline-size;
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--jc-space-8);
  padding-top: var(--jc-space-6);
  border-top: var(--jc-rule) solid var(--jc-jet-black);
  overflow: hidden;
}
.jc-band-art {
  margin: 0;

  --jc-band-pitch: 0.26;
  font-size: calc(100cqw / (var(--jc-band-cols) * var(--jc-band-pitch) * 1.02));
  letter-spacing: calc((var(--jc-band-pitch) - 0.6) * 1em);
  line-height: var(--jc-band-pitch);
  font-family: var(--jc-font-mono);
  font-weight: 700;
  white-space: pre;
  color: var(--jc-sage-deep);

}
.jc-band-note {
  margin: var(--jc-space-5) 0 0;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: 0.08em;
}
.jc-band-note span { padding: 0 8px; color: var(--jc-accent-ink); }

.jc-foot-note {
  margin: 0;
  max-width: 30ch;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-sm);
  line-height: var(--jc-leading-body);
}

footer .web\:w-\[280px\] { align-self: flex-start; }

.jc-page {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--jc-space-12) var(--jc-gutter) var(--jc-space-16);
  background: var(--jc-bg);
}

.jc-auth {
  display: grid;
  max-width: 1040px;
  margin: 0 auto;
  border: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-bg);
}
.jc-auth--single { max-width: 720px; }

@media (min-width: 900px) {
  .jc-auth { grid-template-columns: 5fr 7fr; }
  .jc-auth--single { grid-template-columns: 1fr; }
}

.jc-auth-aside {
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-5);
  padding: var(--jc-space-12) var(--jc-space-8);
  background: var(--jc-dark-bg);
  color: var(--jc-dark-text);
}
.jc-auth-main {
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-4);
  padding: var(--jc-space-12) var(--jc-space-8);
}

.jc-auth-mark {
  margin: 0 0 var(--jc-space-2);
  color: var(--jc-dark-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  font-weight: 700;
  letter-spacing: var(--jc-tracking-mono);
}

.jc-auth-mark span { color: var(--jc-dark-accent); }

.jc-auth-mark--ink { color: var(--jc-text-muted); }
.jc-auth-mark--ink span { color: var(--jc-accent-ink); }

.jc-auth-aside-head {
  margin: 0;

  color: var(--jc-dark-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-3xl);
  font-weight: 700;
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  text-wrap: balance;
}
.jc-auth-aside-blurb {
  margin: 0;
  color: var(--jc-dark-text-muted);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}
.jc-auth-list {
  margin: var(--jc-space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--jc-hair) solid var(--jc-dark-line);
}
.jc-auth-list li {
  padding: var(--jc-space-3) 0;
  border-bottom: var(--jc-hair) solid var(--jc-dark-line);
  color: var(--jc-dark-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  line-height: 1.5;
}
.jc-auth-list li::before { content: "/ "; color: var(--jc-dark-accent); }

.jc-auth-head {
  margin: 0;
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-4xl);
  font-weight: 700;
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  color: var(--jc-text);
  text-wrap: balance;
}
.jc-auth-sub {
  margin: 0 0 var(--jc-space-4);
  max-width: 46ch;
  color: var(--jc-text-muted);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}

.jc-form { display: flex; flex-direction: column; gap: var(--jc-space-5); }
.jc-field { display: flex; flex-direction: column; gap: var(--jc-space-2); }
.jc-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--jc-space-3);
  color: var(--jc-text);
  font-size: var(--jc-text-sm);
  font-weight: 500;
}
.jc-field-hint {
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  font-weight: 400;
}
.jc-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--jc-space-4);
  border: var(--jc-rule) solid var(--jc-jet-black);

  background: var(--jc-surface-sunk);
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-base);
}
.jc-input::placeholder { color: var(--jc-text-muted); opacity: 1; }
.jc-input:focus { background: var(--jc-bg); }

.jc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--jc-space-3);
  color: var(--jc-text);
  font-size: var(--jc-text-sm);
  line-height: var(--jc-leading-body);
  cursor: pointer;
}
.jc-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--jc-accent);
}

.jc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jc-space-2);
  min-height: var(--jc-btn-h);
  padding: 0 var(--jc-btn-pad-x);
  border: var(--jc-btn-border) solid var(--jc-jet-black);
  background: var(--jc-btn-primary-bg);
  color: var(--jc-btn-primary-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-base);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--jc-btn-ms) ease, box-shadow var(--jc-btn-ms) ease;
}
.jc-action:hover {
  transform: translate(calc(var(--jc-btn-offset) * -1), calc(var(--jc-btn-offset) * -1));
  box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-jet-black);
}

.jc-action[data-jc="cta-primary"] {
  min-height: 48px;
  background: var(--jc-btn-accent-bg);
  color: var(--jc-btn-accent-text);
  font-size: 19px;
  font-weight: 700;
}
.jc-action--ghost { background: transparent; color: var(--jc-btn-ghost-text); }

.jc-action--ghost:hover { box-shadow: var(--jc-btn-shadow) var(--jc-btn-shadow) 0 var(--jc-jet-black); }
.jc-form .jc-action { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .jc-action { transition: none; }
  .jc-action:hover { transform: none; }
}

.jc-link { color: var(--jc-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.jc-link:hover { color: var(--jc-text); }

:is(.jc-note-box, .jc-empty) .jc-link {
  color: var(--jc-text);
  text-decoration-color: var(--jc-accent-ink);
}
:is(.jc-note-box, .jc-empty) .jc-link:hover {
  text-decoration-color: var(--jc-text);
}

.jc-auth-aside-right { margin: calc(var(--jc-space-3) * -1) 0 0; text-align: right; font-size: var(--jc-text-sm); }
.jc-auth-row { display: flex; flex-wrap: wrap; gap: var(--jc-space-4); margin: var(--jc-space-2) 0 0; }
.jc-auth-foot { margin: 0; color: var(--jc-text-muted); font-size: var(--jc-text-sm); }
.jc-note-box {
  padding: var(--jc-space-5);
  border: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-3);
}

.jc-note-box p {
  margin: 0;
  color: var(--jc-text);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}

.jc-dash {
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-8);
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
}
.jc-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--jc-space-6);
  padding-bottom: var(--jc-space-6);
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
}
.jc-dash-title {
  margin: 0;
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-4xl);
  font-weight: 700;
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  color: var(--jc-text);
}
.jc-dash-sub {
  margin: var(--jc-space-2) 0 0;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
}

.jc-tag {
  display: inline-block;
  margin-left: var(--jc-space-2);
  padding: 2px 8px;
  border: var(--jc-hair) solid currentColor;
  font-family: var(--jc-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jc-tag--soon {
  margin-left: 0;
  border-color: var(--jc-jet-black);
  background: var(--jc-jet-black);
  color: var(--jc-dark-text);
}

.jc-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--jc-rule) solid var(--jc-jet-black);
}
@media (min-width: 760px) { .jc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jc-stat { padding: var(--jc-space-6); border-bottom: var(--jc-rule) solid var(--jc-jet-black); }
.jc-stat:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .jc-stat { border-bottom: 0; border-right: var(--jc-rule) solid var(--jc-jet-black); }
  .jc-stat:last-child { border-right: 0; }
}
.jc-stat-label {
  margin: 0;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jc-stat-value {
  margin: var(--jc-space-2) 0;
  color: var(--jc-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-4xl);
  font-weight: 700;
  line-height: 1;
}
.jc-stat-note { margin: 0; color: var(--jc-text-muted); font-size: var(--jc-text-sm); line-height: 1.5; }

.jc-dash-block {
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-4);
  padding: var(--jc-space-8);
  border: var(--jc-rule) solid var(--jc-jet-black);
  min-width: 0;
}
.jc-dash-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jc-space-4);
}
.jc-dash-block h2 {
  margin: 0;
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-2xl);
  font-weight: 700;
  letter-spacing: var(--jc-tracking-head);
  color: var(--jc-text);
}
.jc-dash-block p {
  margin: 0;
  max-width: var(--jc-measure);
  color: var(--jc-text-muted);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}

.jc-key {
  margin: 0;
  padding: var(--jc-space-5);
  border: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
  color: var(--jc-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}
.jc-key--dark { background: var(--jc-dark-bg); color: var(--jc-dark-text); }

.jc-empty {
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-2);
  padding: var(--jc-space-8);
  border: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
  text-align: center;
  align-items: center;
}

.jc-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--jc-rule) solid var(--jc-jet-black);
}
@media (min-width: 760px) { .jc-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jc-tier { padding: var(--jc-space-8) var(--jc-space-6); border-bottom: var(--jc-rule) solid var(--jc-jet-black); }
.jc-tier:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .jc-tier { border-bottom: 0; border-right: var(--jc-rule) solid var(--jc-jet-black); }
  .jc-tier:last-child { border-right: 0; }
}
.jc-tier-amount {
  margin: 0;
  color: var(--jc-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-5xl);
  font-weight: 700;
  line-height: 1;
}
.jc-tier-solves {
  margin: var(--jc-space-3) 0 var(--jc-space-2);
  color: var(--jc-text);
  font-size: var(--jc-text-lg);
  font-weight: 600;
}
.jc-tier-note { margin: 0; color: var(--jc-text-muted); font-size: var(--jc-text-sm); line-height: 1.5; }
.jc-tier-foot {
  margin: 0;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  line-height: 1.6;
}

.jc-legal {
  max-width: 72ch;
  margin: 0 auto;
}
.jc-legal-head {
  padding-bottom: var(--jc-space-8);
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
}
.jc-legal-title {
  margin: 0;
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-4xl);
  font-weight: 700;
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  text-wrap: balance;
}
.jc-legal-meta {
  margin: var(--jc-space-4) 0 0;
  color: var(--jc-text-muted);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jc-legal-lead {
  margin: var(--jc-space-5) 0 0;
  color: var(--jc-text);
  font-size: var(--jc-text-lg);
  line-height: var(--jc-leading-body);
}
.jc-legal-sec {
  padding-top: var(--jc-space-8);
  margin-top: var(--jc-space-8);
  border-top: var(--jc-hair) solid var(--jc-line);
}
.jc-legal-sec:first-of-type { border-top: 0; }
.jc-legal-h2 {
  display: flex;
  gap: var(--jc-space-4);
  margin: 0 0 var(--jc-space-4);
  color: var(--jc-text);
  font-family: var(--jc-font-sans);
  font-size: var(--jc-text-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.jc-legal-num {
  flex: 0 0 auto;
  min-width: 2.2ch;
  color: var(--jc-accent-ink);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-base);
  font-weight: 700;
}
@media (min-width: 900px) {
  .jc-legal-h2 { margin-left: -4.4ch; }
  .jc-legal-num { min-width: 4.4ch; }
}
.jc-legal-sec p {
  margin: 0 0 var(--jc-space-4);
  color: var(--jc-text);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}
.jc-legal-sec p:last-child { margin-bottom: 0; }
.jc-legal-list {
  margin: 0 0 var(--jc-space-4);
  padding: 0;
  list-style: none;
}
.jc-legal-list li {
  position: relative;
  padding-left: var(--jc-space-6);
  margin-bottom: var(--jc-space-3);
  color: var(--jc-text);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
}

.jc-legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--jc-sage-deep);
}
.jc-legal-list li:last-child { margin-bottom: 0; }

.jc-types {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jc-rule);
  margin: var(--jc-space-6) 0 0;
  padding: 0;
  list-style: none;
  background: var(--jc-jet-black);
  border: var(--jc-rule) solid var(--jc-jet-black);
}
@media (min-width: 760px) {
  .jc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jc-type {
  min-width: 0;
  padding: var(--jc-space-5) var(--jc-space-6);
  background: var(--jc-bg);
}
.jc-type-name {
  margin: 0;
  color: var(--jc-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.jc-type-note {
  margin: var(--jc-space-2) 0 0;
  color: var(--jc-text-muted);
  font-size: var(--jc-text-sm);
  line-height: 1.55;
}

:is([data-jc="cta-primary"], [data-jc="cta-secondary"])[data-jc] > :is(span, button) {
  font-size: 19px;

  font-weight: 700;
  min-width: 190px;
}

.jc-page:has(> .jc-docs) { max-width: 1400px; padding-top: var(--jc-space-8); }

.jc-docs {

  --jc-docs-stick: calc(69px + var(--jc-space-5));
  display: grid;

  grid-template-columns: 236px minmax(0, 752px) 204px;
  justify-content: center;
  column-gap: var(--jc-space-8);
  align-items: start;
}

.jc-docs-side {
  position: sticky;
  top: var(--jc-docs-stick);
  max-height: calc(100vh - var(--jc-docs-stick) - var(--jc-space-6));
  overflow-y: auto;
  padding-right: var(--jc-space-5);
  border-right: var(--jc-hair) solid var(--jc-line-firm);
}
.jc-docs-side-head {
  margin: 0 0 var(--jc-space-5);
  padding-bottom: var(--jc-space-3);
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  font-weight: 700;
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text);
}
.jc-docs-group {
  margin: var(--jc-space-5) 0 var(--jc-space-2);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text-muted);
}

.jc-docs-side-head + .jc-docs-group { margin-top: 0; }
.jc-docs-side-list { margin: 0; padding: 0; list-style: none; }
.jc-docs-link {
  display: block;
  padding: 5px var(--jc-space-3);
  border-left: var(--jc-rule) solid transparent;
  color: var(--jc-text);
  font-size: var(--jc-text-sm);
  line-height: 1.45;
  text-decoration: none;
}
.jc-docs-link:hover { background: var(--jc-surface-sunk); }

.jc-docs-link.is-here {
  border-left-color: var(--jc-accent-ink);
  background: var(--jc-surface-sunk);
  font-weight: 700;
}

:is(.jc-docs-side, .jc-docs-rail) {
  scrollbar-width: thin;
  scrollbar-color: var(--jc-line-firm) transparent;
}
:is(.jc-docs-side, .jc-docs-rail)::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.jc-docs-side, .jc-docs-rail)::-webkit-scrollbar-thumb { background: var(--jc-line-firm); }
:is(.jc-docs-side, .jc-docs-rail)::-webkit-scrollbar-track { background: transparent; }

.jc-docs-main { min-width: 0; }

.jc-docs-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jc-space-2);
  margin: 0 0 var(--jc-space-3);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  color: var(--jc-text-muted);
}
.jc-docs-crumb a { color: var(--jc-text-muted); text-decoration: none; }
.jc-docs-crumb a:hover { color: var(--jc-text); text-decoration: underline; }
.jc-docs-crumb span[aria-hidden] { color: var(--jc-line-firm); }

.jc-docs-title {
  margin: 0 0 var(--jc-space-3);
  font-size: var(--jc-text-4xl);
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  color: var(--jc-text);
}
.jc-docs-lead {
  margin: 0 0 var(--jc-space-8);
  padding-bottom: var(--jc-space-6);
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  font-size: var(--jc-text-lg);
  line-height: var(--jc-leading-body);
  color: var(--jc-text-muted);
}

.jc-docs-sec { margin: 0 0 var(--jc-space-12); }
.jc-docs-h2 {
  margin: 0 0 var(--jc-space-4);
  font-size: var(--jc-text-2xl);
  line-height: var(--jc-leading-tight);
  letter-spacing: var(--jc-tracking-head);
  color: var(--jc-text);
}
.jc-docs-h3 {
  margin: var(--jc-space-8) 0 var(--jc-space-3);
  font-size: var(--jc-text-lg);
  line-height: var(--jc-leading-tight);
  color: var(--jc-text);
}
.jc-docs-p {
  margin: 0 0 var(--jc-space-4);
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
  color: var(--jc-text);
}

.jc-docs-list, .jc-docs-steps {
  margin: 0 0 var(--jc-space-5);
  padding: 0;
  list-style: none;
  font-size: var(--jc-text-base);
  line-height: var(--jc-leading-body);
  color: var(--jc-text);
}
.jc-docs-list > li, .jc-docs-steps > li {
  position: relative;
  padding-left: var(--jc-space-6);
  margin-bottom: var(--jc-space-2);
}

.jc-docs-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--jc-accent-ink);
}
.jc-docs-steps { counter-reset: jcstep; }
.jc-docs-steps > li { counter-increment: jcstep; padding-left: var(--jc-space-8); }
.jc-docs-steps > li::before {
  content: counter(jcstep);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: var(--jc-hair) solid var(--jc-jet-black);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  font-weight: 700;
  color: var(--jc-text);
}

.jc-docs-stamp {
  margin: var(--jc-space-8) 0 0;
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  color: var(--jc-text-muted);
}

.jc-kbd {
  padding: 1px 5px;
  border: var(--jc-hair) solid var(--jc-line-firm);
  background: var(--jc-surface-sunk);
  font-family: var(--jc-font-mono);
  font-size: 0.86em;
  color: var(--jc-text);
  overflow-wrap: anywhere;
}

.jc-code { margin: 0 0 var(--jc-space-6); border: var(--jc-rule) solid var(--jc-jet-black); }
.jc-code-head {
  display: flex;
  align-items: center;
  gap: var(--jc-space-3);
  margin: 0;
  padding: var(--jc-space-2) var(--jc-space-4);
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  color: var(--jc-text);
}
.jc-verb {

  padding: 2px 7px;
  background: var(--jc-accent-ink);
  color: var(--jc-ivory);
  font-weight: 700;
}
.jc-code-path { overflow-wrap: anywhere; }
.jc-code-lang { text-transform: uppercase; color: var(--jc-text-muted); }

.jc-pre {
  margin: 0;
  padding: var(--jc-space-4);
  overflow-x: auto;
  background: var(--jc-dark-bg);
  color: var(--jc-dark-text);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-sm);
  line-height: 1.7;
  tab-size: 2;
}
.jc-pre code { font: inherit; color: inherit; background: none; }

.jc-tabs { margin: 0 0 var(--jc-space-6); border: var(--jc-rule) solid var(--jc-jet-black); }
.jc-tab-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jc-tab-bar {
  display: flex;
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
}
.jc-tab-label {
  padding: var(--jc-space-2) var(--jc-space-4);
  border-right: var(--jc-hair) solid var(--jc-line-firm);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  color: var(--jc-text-muted);
  cursor: pointer;
  user-select: none;
}
.jc-tab-label:hover { background: var(--jc-bg); color: var(--jc-text); }
.jc-tab-panel { display: none; }

.jc-tab-in-0:checked ~ .jc-tab-bar .jc-tab-label-0,
.jc-tab-in-1:checked ~ .jc-tab-bar .jc-tab-label-1 {
  background: var(--jc-bg);
  color: var(--jc-text);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 var(--jc-accent-ink);
}
.jc-tab-in-0:checked ~ .jc-tab-panel-0,
.jc-tab-in-1:checked ~ .jc-tab-panel-1 { display: block; }

.jc-tab-in-0:focus-visible ~ .jc-tab-bar .jc-tab-label-0,
.jc-tab-in-1:focus-visible ~ .jc-tab-bar .jc-tab-label-1 {
  outline: var(--jc-rule) solid var(--jc-accent-ink);
  outline-offset: -2px;
}

.jc-table-wrap { margin: 0 0 var(--jc-space-6); overflow-x: auto; border: var(--jc-rule) solid var(--jc-jet-black); }
.jc-table { width: 100%; border-collapse: collapse; font-size: var(--jc-text-sm); }
.jc-table th, .jc-table td {
  padding: var(--jc-space-3) var(--jc-space-4);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.jc-table thead th {
  border-bottom: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface-sunk);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  font-weight: 700;
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text);
  white-space: nowrap;
}
.jc-table tbody tr + tr > * { border-top: var(--jc-hair) solid var(--jc-line); }
.jc-table tbody th[scope="row"] { font-weight: 400; white-space: nowrap; color: var(--jc-text); }
.jc-table td { color: var(--jc-text); }

.jc-callout {
  margin: 0 0 var(--jc-space-6);
  padding: var(--jc-space-4) var(--jc-space-5);
  border-left: 4px solid var(--jc-line-firm);
  background: var(--jc-surface-sunk);
}
.jc-callout-head {
  margin: 0 0 var(--jc-space-1);
  font-size: var(--jc-text-sm);
  font-weight: 700;
  color: var(--jc-text);
}
.jc-callout-body {
  margin: 0;
  font-size: var(--jc-text-sm);
  line-height: var(--jc-leading-body);
  color: var(--jc-text);
}

.jc-callout-note { border-left-color: var(--jc-line-firm); }
.jc-callout-tip { border-left-color: var(--jc-sage-ink); }
.jc-callout-warn { border-left-color: var(--jc-accent-ink); }

.jc-callout .jc-link, .jc-table .jc-link {
  color: var(--jc-text);
  text-decoration-color: var(--jc-accent-ink);
}

.jc-docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jc-space-4);
  margin: var(--jc-space-12) 0 0;
  padding-top: var(--jc-space-8);
  border-top: var(--jc-rule) solid var(--jc-jet-black);
}
.jc-pager {
  display: block;
  padding: var(--jc-space-4) var(--jc-space-5);
  border: var(--jc-rule) solid var(--jc-jet-black);
  background: var(--jc-surface);
  color: var(--jc-text);
  text-decoration: none;

  transition: transform var(--jc-btn-ms) ease, box-shadow var(--jc-btn-ms) ease;
}
.jc-pager:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 var(--jc-jet-black);
}
.jc-pager-next { grid-column: 2; text-align: right; }
.jc-pager-prev:only-child { grid-column: 1; }
.jc-pager-dir {
  display: block;
  margin-bottom: 2px;
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text-muted);
}
.jc-pager-name { display: block; font-size: var(--jc-text-base); font-weight: 700; }

.jc-docs-rail {
  position: sticky;
  top: var(--jc-docs-stick);
  max-height: calc(100vh - var(--jc-docs-stick) - var(--jc-space-6));
  overflow-y: auto;
  padding-left: var(--jc-space-5);
  border-left: var(--jc-hair) solid var(--jc-line-firm);
}
.jc-docs-rail-head {
  margin: 0 0 var(--jc-space-3);
  font-family: var(--jc-font-mono);
  font-size: var(--jc-text-xs);
  letter-spacing: var(--jc-tracking-mono);
  text-transform: uppercase;
  color: var(--jc-text-muted);
}
.jc-docs-rail-list { margin: 0; padding: 0; list-style: none; }
.jc-rail-link {
  display: block;
  padding: 3px 0;
  color: var(--jc-text-muted);
  font-size: var(--jc-text-sm);
  line-height: 1.45;
  text-decoration: none;
}
.jc-rail-link:hover { color: var(--jc-text); text-decoration: underline; }

@media (max-width: 1180px) {
  .jc-docs { grid-template-columns: 220px minmax(0, 1fr); }
  .jc-docs-rail { display: none; }
}

@media (max-width: 900px) {

  .jc-docs { grid-template-columns: minmax(0, 1fr); row-gap: var(--jc-space-6); }
  .jc-docs-side {
    position: static;
    max-height: none;
    display: flex;
    align-items: center;
    gap: var(--jc-space-2);
    padding: 0 0 var(--jc-space-3);
    border-right: 0;
    border-bottom: var(--jc-rule) solid var(--jc-jet-black);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .jc-docs-side-head, .jc-docs-group { display: none; }
  .jc-docs-side-list { display: flex; gap: var(--jc-space-2); }
  .jc-docs-link {
    white-space: nowrap;
    border-left: 0;
    border-bottom: var(--jc-rule) solid transparent;
    padding: var(--jc-space-2) var(--jc-space-3);
  }
  .jc-docs-link.is-here { border-bottom-color: var(--jc-accent-ink); }
  .jc-docs-title { font-size: var(--jc-text-3xl); }
  .jc-docs-pager { grid-template-columns: minmax(0, 1fr); }
  .jc-pager-next { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .jc-pager { transition: none; }
  .jc-pager:hover { transform: none; }
}

@media (hover: none) {
  :is(.jc-btn, .jc-action, .jc-pager):hover,
  :is(a, button):hover > :is(span, button)[class*="rounded-["] { transform: none; }
}

:is(.jc-btn, .jc-action, .jc-pager):active {
  transform: translate(0, 0);
  box-shadow: none;
}
:is(a, button):active > :is(span, button)[class*="rounded-["] {
  transform: translate(0, 0);
  box-shadow: none;
}
:is([data-jc="cta-primary"], [data-jc="cta-secondary"])[data-jc]:active > :is(span, button) {
  transform: translate(0, 0);
  box-shadow: none;
}