/* IdRa marketing site. Tokens come from tokens.css (an unchanged copy of brand/tokens.css). */
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  src: url("/atkinson-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono Variable";
  src: url("/atkinson-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --band-ink: var(--sidebar);
  --on-ink: #fff;
  --on-ink-muted: var(--ink-foreground);
  --plate: light-dark(#e8efed, #102327);
  --header-height: 4rem;
  --section: clamp(4rem, 9vw, 8rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 1.0625rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure,
pre,
fieldset {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.45rem + 4.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

main a:not(.button, .bento-item) {
  color: var(--primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.hero a:not(.button) {
  color: inherit;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-header :focus-visible,
.hero :focus-visible,
.band-ink :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--intaglio-light);
}

.wrap {
  width: min(100%, 78rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 30;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* Header: the app's navigation rail, laid sideways. Same ink on every page. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--band-ink);
  color: var(--on-ink);
  border-bottom: 1px solid light-dark(var(--ink-line), #1b444b);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: var(--header-height);
}

.logo {
  flex: none;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.nav-desktop > a,
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--on-ink-muted);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--duration-press),
    background-color var(--duration-press);
}

.nav-desktop > a:hover,
.menu > summary:hover,
.menu[open] > summary {
  color: var(--on-ink);
  background: light-dark(var(--ink-raised), #123c43);
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.chev {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--duration-ui) var(--ease-out);
}

[open] > summary .chev {
  transform: rotate(180deg);
}

.menu {
  position: relative;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: -0.5rem;
  width: min(44rem, 90vw);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 24px 60px -24px rgb(6 34 38 / 0.45);
  transform-origin: 3rem top;
  transition:
    opacity var(--duration-ui) var(--ease-out),
    transform var(--duration-ui) var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem;
}

.menu-grid a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--duration-press);
}

.menu-grid a:hover {
  background: var(--accent);
}

.menu-grid strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.menu-grid span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.menu-all {
  display: block;
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.menu-all:hover {
  text-decoration: underline;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.header-actions .button {
  padding: 0.5625rem 0.875rem;
  font-size: 0.9375rem;
}

.menu-mobile {
  display: none;
}

.menu-mobile > summary {
  width: 2.75rem;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
}

.menu-mobile svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.mobile-panel {
  position: fixed;
  inset: var(--header-height) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem) max(2rem, env(safe-area-inset-bottom));
  background: var(--band-ink);
  transition:
    opacity var(--duration-ui) var(--ease-out),
    transform var(--duration-ui) var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.mobile-panel a {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid light-dark(var(--ink-line), #1b444b);
}

.mobile-panel ul a {
  padding-left: 1rem;
  font-size: 1rem;
  color: var(--on-ink-muted);
}

/* Buttons: press answers immediately, and only with transform. */

.button {
  /* Not flex: the translate="no" span would become an item and lose the spaces around it. */
  display: inline-block;
  padding: 0.8125rem 1.25rem;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-press),
    border-color var(--duration-press),
    color var(--duration-press),
    transform var(--duration-press) var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover {
  background: color-mix(in oklab, var(--primary), black 14%);
}

.button-secondary {
  border-color: var(--input);
  color: var(--foreground);
}

.button-secondary:hover {
  background: var(--accent);
  border-color: var(--primary);
}

.button-on-ink {
  background: var(--intaglio-light);
  color: var(--sidebar-primary-foreground);
}

.button-on-ink:hover {
  background: #84d6dc;
}

.button-ghost {
  border-color: var(--on-ink-muted);
  color: var(--on-ink);
}

.button-ghost:hover {
  background: light-dark(var(--ink-raised), #123c43);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Stamps: the status badge, set as if inked on a document. */

.stamp {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-stamp);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.stamp-good {
  color: var(--success);
  background: var(--success-surface);
}

.stamp-warn {
  color: var(--warning);
  background: var(--warning-surface);
}

.stamp-bad {
  color: var(--destructive);
  background: var(--destructive-surface);
}

.stamp-plan {
  color: var(--info);
  background: var(--info-surface);
}

.stamp-muted {
  color: var(--muted-foreground);
  background: var(--muted);
}

/* Hero: ink, line-work once, and one document. */

.hero {
  position: relative;
  overflow: clip;
  background: var(--band-ink);
  color: var(--on-ink);
}

.rosette {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(38rem, 78vw, 80rem);
  aspect-ratio: 1;
  transform: translate(28%, -50%);
  opacity: 0.5;
  mask-image: linear-gradient(to right, transparent 8%, #000 42%);
  pointer-events: none;
}

.hero-product .rosette {
  width: clamp(32rem, 52vw, 52rem);
  transform: translate(38%, -50%);
  opacity: 0.3;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.hero-home .hero-grid {
  min-height: min(50rem, calc(100svh - var(--header-height)));
}

.hero-single {
  grid-template-columns: minmax(0, 52rem);
}

.hero-copy > p:not(.crumb) {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--on-ink-muted);
}

.hero-product h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.crumb {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: var(--on-ink-muted);
}

.hero-art .art,
.hero .terminal {
  box-shadow: 0 40px 80px -36px rgb(0 0 0 / 0.6);
}

/* The document. It tilts under a pointer, and its foil follows. */

.doc {
  --rx: 0deg;
  --ry: 0deg;
  --foil: 30%;
  position: relative;
  width: min(100%, 25rem);
  justify-self: end;
  padding: 1.5rem 1.5rem 1.25rem;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 48px 90px -36px rgb(0 0 0 / 0.7);
  transform: perspective(70rem) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 240ms var(--ease-out);
}

.doc-foil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    112deg,
    transparent calc(var(--foil) - 26%),
    color-mix(in oklab, var(--intaglio-light) 30%, transparent) calc(var(--foil) - 8%),
    color-mix(in oklab, var(--iris) 26%, transparent) var(--foil),
    transparent calc(var(--foil) + 22%)
  );
  opacity: 0.55;
  pointer-events: none;
  transition: background-position var(--duration-ui);
}

.doc-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.doc-mark {
  width: 1.75rem;
  height: 1.75rem;
}

.doc-steps {
  position: relative;
  display: grid;
  gap: 0.625rem;
  margin-block: 1.125rem;
  padding-block: 1.125rem;
  border-block: 1px solid var(--border);
}

.doc-steps li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.625rem;
  font-size: 0.9875rem;
  line-height: 1.4;
}

.tick {
  width: 1.125rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--success);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-stamp {
  position: relative;
  min-height: 2.5rem;
}

.doc-stamp .stamp {
  padding: 0.25rem 0.75rem;
  font-size: 1.0625rem;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.doc-mrz {
  position: relative;
  margin-top: 0.875rem;
}

.doc-mrz code {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--muted-foreground);
}

/* The one orchestrated moment: the checks run, then the stamp lands. */

@media (prefers-reduced-motion: no-preference) {
  .doc-steps li {
    animation: step-in 320ms var(--ease-out) both;
  }
  .doc-steps li:nth-child(1) {
    animation-delay: 350ms;
  }
  .doc-steps li:nth-child(2) {
    animation-delay: 550ms;
  }
  .doc-steps li:nth-child(3) {
    animation-delay: 750ms;
  }
  .doc-steps li:nth-child(4) {
    animation-delay: 950ms;
  }
  .doc-stamp .stamp {
    animation: stamp-in 260ms cubic-bezier(0.3, 1.3, 0.5, 1) 1250ms both;
  }
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(0.375rem);
  }
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(-7deg) scale(1.5);
  }
}

/* Standards strip */

.strip {
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* Sections */

.section {
  padding-block: var(--section);
}

.section + .section {
  padding-top: 0;
}

.section-head {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head p {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}

.band {
  padding-block: var(--section);
  background: var(--plate);
}

.band-ink {
  background: var(--band-ink);
  color: var(--on-ink);
}

.band-ink a:not(.button) {
  color: var(--intaglio-light);
}

.band-ink p {
  color: var(--on-ink-muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.split p {
  margin-top: 1rem;
  max-width: 34rem;
}

.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 6rem);
}

.two-up h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  margin-bottom: 1.25rem;
}

.two-up > div > p {
  color: var(--muted-foreground);
}

/* Decision explorer */

.explorer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--card);
}

.explorer-controls {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.explorer-controls fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.explorer-controls legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.explorer-controls label {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    background-color var(--duration-press),
    border-color var(--duration-press),
    transform var(--duration-press) var(--ease-out);
}

.explorer-controls label:hover {
  background: var(--accent);
}

.explorer-controls label:active {
  transform: scale(0.97);
}

.explorer-controls label:has(:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.explorer-controls label:has(:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.explorer-controls input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.explorer-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--band-ink);
  color: var(--on-ink);
}

.explorer-result output {
  display: block;
  min-height: 9rem;
}

.explorer-result .stamp {
  padding: 0.25rem 0.875rem;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.explorer-result p {
  margin-top: 1rem;
  color: var(--on-ink-muted);
}

.explorer-log {
  margin-top: auto !important;
  padding-top: 1rem;
  border-top: 1px solid light-dark(var(--ink-line), #1b444b);
}

.explorer-log span {
  display: block;
  font-size: 0.875rem;
}

.explorer-log code {
  color: var(--intaglio-light);
  overflow-wrap: anywhere;
}

.explorer-result .art-note {
  margin-top: 0;
  color: var(--on-ink-muted);
}

/* Bento */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.bento-item {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--card);
  text-decoration: none;
  transition:
    border-color var(--duration-ui),
    transform var(--duration-ui) var(--ease-out);
}

.bento-wide {
  grid-column: span 7;
}

.bento-item:hover {
  border-color: var(--primary);
}

.bento-item:active {
  transform: scale(0.995);
}

.bento-item p {
  margin-top: 0.5rem;
  max-width: 34rem;
  color: var(--muted-foreground);
}

.bento-item .art {
  border-color: transparent;
  background: var(--background);
}

.more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.75rem;
  font-weight: 600;
}

.more-link {
  margin-top: 1.5rem;
  font-weight: 600;
}

/* Diagrams */

.art {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--card);
  color: var(--card-foreground);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.art figcaption {
  margin-bottom: 0.875rem;
  font-weight: 600;
}

.art-note {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.art-tiles ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.art-tiles li {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  min-width: 0;
}

.tile-ring {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  border: 0.3rem solid var(--primary);
  border-radius: 50%;
}

.art-tiles strong {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

.art-tiles code {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.art-ladder ol {
  display: grid;
  gap: 0.375rem;
}

.art-ladder li {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  border-left: 0.25rem solid var(--primary);
  background: var(--card);
}

.art-ladder li:nth-child(1) {
  margin-right: 24%;
  border-left-color: var(--input);
}

.art-ladder li:nth-child(2) {
  margin-right: 12%;
}

.art-ladder li:nth-child(3) {
  background: var(--accent);
  color: var(--accent-foreground);
}

.art-ladder strong,
.art-life strong {
  display: block;
  font-weight: 600;
}

.art-ladder span {
  font-size: 0.875rem;
}

.art-life ol {
  display: grid;
  gap: 1rem;
}

.art-life li {
  position: relative;
  padding-left: 1.75rem;
}

.art-life li::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  border: 0.1875rem solid var(--primary);
  border-radius: 50%;
}

.art-life li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: -0.875rem;
  left: 0.375rem;
  width: 0.125rem;
  background: var(--border);
}

.art-life span {
  color: var(--muted-foreground);
}

.art-record dl > div {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.4375rem;
  border-bottom: 1px solid var(--border);
}

.art-record dt {
  color: var(--muted-foreground);
}

.art-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-foreground);
}

.art-logout .art-rule {
  margin: 0 0 0.75rem;
}

.art-rule span:not(.stamp) {
  font-weight: 600;
}

.art-rule code {
  overflow-wrap: anywhere;
}

.art-device ul li,
.art-logout ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding-block: 0.4375rem;
  border-bottom: 1px solid var(--border);
}

.art-token pre,
.terminal pre {
  overflow-x: auto;
  line-height: 1.6;
  tab-size: 2;
}

.art-token pre {
  padding: 0.875rem;
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.8125rem;
}

.art-tenants ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.art-tenants li {
  padding-inline: 0.75rem;
  min-width: 0;
}

.art-tenants li:first-child {
  padding-left: 0;
}

.art-tenants li:last-child {
  padding-right: 0;
}

.art-tenants li + li {
  border-left: 1px dashed var(--input);
}

.art-tenants code {
  display: block;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.art-tenants svg {
  width: 3.25rem;
  height: auto;
  margin-block: 0.625rem;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
}

.art-tenants span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted-foreground);
}

.terminal {
  overflow: hidden;
  border: 1px solid light-dark(var(--ink-line), #1b444b);
  border-radius: var(--radius-panel);
  background: #062226;
  color: #d5e6e6;
}

.terminal figcaption {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid light-dark(var(--ink-line), #1b444b);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-ink);
}

.terminal pre {
  padding: 1rem;
  font-size: 0.875rem;
}

/* Open source */

.open-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.open-split > div > p {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}

.facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--border);
}

.facts > div:last-child {
  border-bottom: 1px solid var(--border);
}

.facts dt {
  font-weight: 600;
}

.facts dd {
  color: var(--muted-foreground);
}

/* FAQ */

.faq {
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  position: relative;
  padding: 1.125rem 2.5rem 1.125rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform var(--duration-ui) var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(0.25rem) rotate(225deg);
}

.faq details > div {
  padding-bottom: 1.25rem;
  max-width: 48rem;
  color: var(--muted-foreground);
}

.faq-groups {
  display: grid;
  gap: 3.5rem;
}

.faq-groups h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}

/* Closing */

.closing {
  padding-block: var(--section);
  border-top: 1px solid var(--border);
  background: var(--card);
}

.closing p {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}

/* Product pages */

.feature-list {
  padding-block: clamp(1rem, 3vw, 2rem);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  scroll-margin-top: var(--header-height);
}

.feature + .feature {
  border-top: 1px solid var(--border);
}

.feature h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
}

.feature p {
  margin-top: 1rem;
  color: var(--muted-foreground);
}

.feature .more-link {
  color: inherit;
}

.ticks {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  border: 0.1875rem solid var(--primary);
  border-radius: 50%;
}

.plain {
  display: grid;
  gap: 0.75rem;
}

.plain li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--muted-foreground);
}

.plain li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0.1875rem;
  width: 0.5rem;
  height: 2px;
  background: var(--input);
}

.ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}

.ledger h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-stamp);
  font-size: 0.9375rem;
  font-weight: 500;
}

.next-link {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.next-link a {
  display: block;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
}

.next-link span {
  display: block;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.next-link strong {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.next-link a:hover strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}

.index a {
  display: block;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
  color: inherit !important;
  text-decoration: none;
}

.index h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  transition: color var(--duration-press);
}

.index a:hover h2 {
  color: var(--primary);
}

.index p {
  margin-top: 0.25rem;
  color: var(--muted-foreground);
}

/* Tables */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--card);
}

.matrix {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.matrix th,
.matrix td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.matrix tbody th[scope="row"] {
  width: 32%;
  font-weight: 600;
}

.matrix td:nth-child(2) {
  white-space: nowrap;
}

.matrix .matrix-group th {
  padding-top: 1.25rem;
  background: var(--plate);
  font-size: 1rem;
  font-weight: 700;
}

.matrix tbody:last-child tr:last-child > * {
  border-bottom: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.legend .stamp {
  margin-right: 0.25rem;
}

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}

.steps li {
  counter-increment: step;
  padding-top: 1rem;
  border-top: 2px solid var(--primary);
}

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.steps p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.steps code {
  overflow-wrap: anywhere;
}

/* Security specifics */

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}

.spec > div {
  padding-block: 1.25rem;
  border-top: 1px solid var(--border);
}

.spec dt {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.spec dd {
  margin-top: 0.375rem;
  color: var(--muted-foreground);
}

/* Pricing */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--card);
}

.price-lead {
  border-color: var(--primary);
}

.price h2 {
  font-size: 1.3125rem;
  letter-spacing: -0.014em;
}

.price-tag {
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--primary);
}

.price p:not(.price-tag) {
  flex: 1;
  color: var(--muted-foreground);
}

/* Footer: ink again, so the page closes the way it opened. */

.site-footer {
  padding-block: clamp(3rem, 6vw, 5rem) max(2rem, env(safe-area-inset-bottom));
  background: var(--band-ink);
  color: var(--on-ink-muted);
  font-size: 0.9375rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.footer-brand p {
  margin-top: 1rem;
  max-width: 16rem;
}

.site-footer h2 {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--on-ink);
}

.site-footer ul {
  display: grid;
  gap: 0.25rem;
}

.site-footer ul a {
  display: inline-block;
  padding-block: 0.1875rem;
  text-decoration: none;
}

.site-footer ul a:hover {
  color: var(--on-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid light-dark(var(--ink-line), #1b444b);
  font-size: 0.875rem;
}

/* Theme: native radios, so arrow keys work. Starts hidden; theme.js reveals it. */

.theme-switcher[hidden] {
  display: none;
}

.theme-switcher {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.125rem;
  border: 1px solid var(--on-ink-muted);
  border-radius: var(--radius);
}

.theme-switcher label {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 0.125rem);
  cursor: pointer;
}

.theme-switcher label:hover {
  color: var(--on-ink);
}

.theme-switcher label:has(:checked) {
  background: var(--intaglio-light);
  color: var(--sidebar-primary-foreground);
}

.theme-switcher label:has(:focus-visible) {
  outline: 2px solid var(--intaglio-light);
  outline-offset: 2px;
}

.theme-switcher input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.theme-switcher svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .doc,
  .bento-item,
  .chev,
  .menu-panel,
  .mobile-panel,
  .explorer-controls label,
  .faq summary::after {
    transition: none;
  }
}

/* Responsive */

@media (max-width: 75rem) {
  .nav-desktop > a[href="/okta-compatibility"] {
    display: none;
  }
}

@media (max-width: 64rem) {
  .nav-desktop {
    display: none;
  }
  .menu-mobile {
    display: block;
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 56rem) {
  .hero-grid,
  .split,
  .open-split,
  .two-up,
  .explorer-grid,
  .feature,
  .ledger,
  .index,
  .spec,
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-home .hero-grid {
    min-height: 0;
  }
  .doc {
    justify-self: start;
  }
  .rosette {
    top: 26rem;
    width: 44rem;
    transform: translate(35%, -50%);
    opacity: 0.3;
  }
  .hero-product .rosette {
    top: 50%;
    width: 36rem;
    transform: translate(45%, -50%);
  }
  .bento-item,
  .bento-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 34rem) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .art-tiles ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .actions .button {
    flex: 1 1 100%;
  }
  .header-actions .button {
    padding-inline: 0.75rem;
    font-size: 0.875rem;
  }
  .art-tenants ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .art-tenants li,
  .art-tenants li:first-child,
  .art-tenants li:last-child {
    padding-inline: 0;
  }
  .art-tenants li + li {
    border-left: 0;
    border-top: 1px dashed var(--input);
    padding-top: 0.75rem;
  }
}

@media (max-width: 22.5rem) {
  .header-actions .button {
    display: none;
  }
}