/* ============================================
   ZILICON — brand layer over the editorial
   grey/blue design system in site.css.
   Uses its tokens and conventions only.
   ============================================ */

/* ---- readability & density ----
   The build was tuned for a 1920px canvas. These pull the type scale
   down ~30% and tighten the vertical rhythm for everyday screens.
   Heading sizes are declared on `body` because the base sheet sets
   them on :root through nested var() chains. */
body {
  --_headings---heading-xl--font-size: 4.5em;
  --_headings---heading-l--font-size: 3.75em;
  --_headings---heading-m--font-size: 2.75em;
  --_headings---heading-s--font-size: 1.9em;

  --_layout---space--xs: 2vh;
  --_layout---space--s: 4vh;
  --_layout---space--regular: 6vh;
  --_layout---space--m: 10vh;
  --_layout---space--l: 14vh;
  --_layout---space--xl: 18vh;
  --_layout---space--xxl: 22vh;
}

@media screen and (max-width: 991px) {
  body {
    --_headings---heading-xl--font-size: 4em;
    --_headings---heading-l--font-size: 3.25em;
    --_headings---heading-m--font-size: 2.5em;
    --_headings---heading-s--font-size: 1.8em;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_headings---heading-xl--font-size: 3.5em;
    --_headings---heading-l--font-size: 2.9em;
    --_headings---heading-m--font-size: 2.25em;
    --_headings---heading-s--font-size: 1.7em;
  }
}

@media screen and (max-width: 479px) {
  body {
    --_headings---heading-xl--font-size: 3em;
    --_headings---heading-l--font-size: 2.5em;
    --_headings---heading-m--font-size: 2em;
    --_headings---heading-s--font-size: 1.6em;
  }
}

/* readable measure for long statements */
.text__component .heading-m { max-width: 52ch; }
.how__text .heading-m { max-width: 46ch; }
.system__chapter-headline .heading-m { max-width: 32ch; margin-left: auto; margin-right: auto; }
.pricing__headline .heading-m { max-width: 36ch; }

/* ---- wordmark (pixel grid, 51:13) ---- */
.chipline__logo,
.chipline__logo.is--footer { width: auto; }
.chipline__logo.is--nav { width: 7em; display: block; }
.chipline__logo.is--footer { width: 100%; max-width: 30em; display: block; }
.chipline__logo svg,
svg.chipline__logo { shape-rendering: crispEdges; }

@media screen and (max-width: 991px) {
  .chipline__logo.is--nav { width: 8.5em; }
}

/* ---- hero visual: a wafer of dies, drawn inline ---- */
.wafer {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--_theme---body-text);
}
.wafer__grid { stroke: var(--_theme---border); stroke-width: 1; opacity: 0.55; }
.wafer__edge { fill: none; stroke: var(--_theme---body-text); stroke-width: 1.5; }
.wafer__flat { stroke: var(--_theme---body-text); stroke-width: 1.5; }
.wafer__die { fill: var(--_colors---swatch--indigo); }
.wafer__die.is--steel { fill: var(--_colors---swatch--olive); }
.wafer__label {
  font-family: var(--_fonts---fonts--eyebrow);
  font-size: 22px;
  letter-spacing: 0.04em;
  fill: var(--_colors---swatch--off-white);
}
.wafer__die.is--steel + .wafer__label { fill: var(--_colors---swatch--black); }
.wafer__probe {
  fill: none;
  stroke: var(--_colors---swatch--black);
  stroke-width: 2;
  animation: wafer-probe 12s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wafer__probe { animation: none; }
}

/* ---- presets grid: three columns ---- */
.pricing__list { grid-template-columns: 1fr 1fr 1fr; }
.pricing__item + .pricing__item { margin-left: 2em; }
@media screen and (max-width: 991px) {
  .pricing__item + .pricing__item { margin-left: 0; }
}
.preset__components { text-align: right; max-width: 14ch; }

/* ---- faq: answers read as text, not display type ---- */
.faq .different__content-text .heading-m {
  font-size: 1.9em;
  line-height: 1.25;
  max-width: 48ch;
  text-indent: 0;
}
.faq .different__label .paragraph-m { max-width: 22ch; }

/* ---- nav: markets link keeps the docs slot ---- */
.nav-main__docs-link .paragraph-m { white-space: nowrap; }

/* ============================================
   inner pages (how it works, terms, privacy)
   ============================================ */
.page-intro { padding-top: 10vh; }
.page-intro .heading-l { max-width: 24ch; }
.page-intro__lede { max-width: 60ch; margin-top: 1.5em; }

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em 2em;
  align-items: start;
}
@media screen and (max-width: 767px) {
  .panel-grid { grid-template-columns: 1fr; }
}
.panel { border-top: 1px solid var(--_theme---body-text); padding-top: 1em; }
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  min-height: 3em;
}
.panel__body { margin-top: 0.75em; }
.panel__body p + p { margin-top: 0.75em; }
.panel__rows { margin-top: 0.75em; }
.panel__row {
  border-top: 1px solid var(--_theme---border);
  min-height: 3em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 0.4em 0;
}
.panel__row > :last-child { text-align: right; }
.panel__cta { margin-top: 2em; }

.prose { max-width: 64ch; }
.prose h2 { margin-top: 2.5em; }
.prose p, .prose li { margin-top: 0.75em; }
.prose ul { padding-left: 1.2em; list-style: square; }

.opacity-64 { opacity: 0.64; }

/* keep the wafer inside its band */
.unicorn-visual { overflow: hidden; }
.unicorn-visual__item { height: 100%; aspect-ratio: auto; }

.nav-main__signin .custom-paragraph { white-space: nowrap; }
@media screen and (max-width: 767px) { .wafer__label { font-size: 26px; } }

/* presets: even rows across the three columns, spaced weight figures */
.pricing__cost { gap: 0.3em; }
.pricing__details .pricing__row { min-height: 5.5em; }
.preset__components { max-width: 18ch; }