/* ============================================================
   Simulacra — components: nav, footer, buttons, cards
   ============================================================ */

/* ============= site header ============= */
.site-header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 80;
  padding-block: 14px;
  background: linear-gradient(to bottom, rgba(7,9,15,0.78) 0%, rgba(7,9,15,0.55) 70%, transparent 100%);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: background 280ms, border-color 280ms;
}
.site-header.is-scrolled {
  background: rgba(7,9,15,0.92);
  border-block-end-color: var(--line-1);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--text-1);
}
.nav__logo svg { width: 26px; height: 26px; }
.nav__wordmark {
  display: block;
  height: 28px;
  width: auto;
  /* Suppress the alt-text fallback paint that flashes before the PNG
     decodes — browsers briefly render `alt="Simulacra"` as styled body
     text on cold cache. Zeroing the font and making the colour
     transparent means even that one-frame paint is invisible; the
     image itself draws normally over the empty box. */
  font-size: 0;
  color: transparent;
  line-height: 0;
}
.footer__glyph {
  width: 32px;
  height: 32px;
  display: block;
}
.footer__wordmark {
  height: 22px;
  width: auto;
  display: block;
  font-size: 0;
  color: transparent;
  line-height: 0;
}

.nav__list {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 4px;
  justify-content: center;
}
.nav__list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 15px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.003em;
  transition: color 160ms, background 160ms;
}
.nav__list a:hover { color: var(--text-1); background: var(--line-1); }
.nav__list a[aria-current="page"] { color: var(--text-1); background: var(--line-1); }

.nav__actions {
  display: flex; align-items: center; gap: 8px;
}

.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--line-2);
  width: 40px; height: 40px;
  border-radius: var(--r-2);
  color: var(--text-1);
  align-items: center; justify-content: center;
}

@media (max-width: 920px) {
  .nav__list { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ============= buttons ============= */
.btn {
  --btn-bg: white;
  --btn-fg: var(--ink-900);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background 160ms, color 160ms, border-color 160ms;
  position: relative;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 14px 22px; font-size: 15.5px; min-height: 54px; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-1);
  --btn-bd: var(--line-2);
}
.btn--ghost:hover { --btn-bd: var(--line-3); background: var(--line-1); }
.btn--brand {
  --btn-bg: white;
  --btn-fg: var(--ink-900);
}
.btn--brand-grad {
  background: var(--brand-grad);
  color: white;
  border: none;
  position: relative;
  z-index: 0;
}
.btn--brand-grad::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--brand-grad);
  filter: blur(14px);
  opacity: 0.55;
  z-index: -1;
  transition: opacity 200ms;
}
.btn--brand-grad:hover::before { opacity: 0.85; }

.btn .arrow {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-weight: 500;
  font-size: 14.5px;
  border-block-end: 1px solid var(--line-2);
  padding-block-end: 2px;
  transition: border-color 160ms, color 160ms;
}
.link-arrow:hover { border-color: var(--brand-1); color: white; }
.link-arrow .arrow { transition: transform 200ms var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(3px); }

.section--paper .link-arrow { color: var(--paper-ink); border-color: rgba(21,23,31,0.2); }
.section--paper .link-arrow:hover { color: var(--brand-2); border-color: var(--brand-2); }
.section--paper .tag {
  background: rgba(0,0,0,0.02);
  border-color: rgba(21,23,31,0.14);
  color: var(--paper-ink-2);
}

/* When dropped inline inside a lede paragraph, inherit the surrounding
   text size instead of using the component's standalone 14.5px so the
   link doesn't visibly shrink mid-sentence. */
.lede .link-arrow { font-size: inherit; }

/* ============= cards ============= */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900) 80%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 28px;
  overflow: hidden;
  transition: border-color 200ms, transform 200ms var(--ease-out);
}
.card:hover { border-color: var(--line-2); }
.card__title { margin-block-end: 8px; }
.card__body { color: var(--text-2); font-size: 17px; line-height: 1.55; }

.card--feature {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,45,117,0.15), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(92,61,255,0.18), transparent 50%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border-color: var(--line-2);
}

/* Feature cards that wrap their CTA in a paragraph (platform-page top
   grid) align the link to the bottom-right of the card so a row of
   cards with uneven body lengths still bottom-anchors its CTAs. */
.card--feature:has(> p > .link-arrow) {
  display: flex;
  flex-direction: column;
}
.card--feature:has(> p > .link-arrow) > p:last-child {
  margin-top: auto;
  text-align: right;
}

.card--with-link {
  display: flex;
  flex-direction: column;
}
.card-linkout {
  margin: 0;
}
.card--with-link .card-linkout {
  margin: auto 0 0;
  padding-block-start: 16px;
  text-align: right;
}
.card-linkout .link-arrow {
  display: inline-flex;
}

.paper-inline-link {
  color: var(--paper-ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(21,23,31,0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 160ms, text-decoration-color 160ms;
}
.paper-inline-link:hover {
  color: var(--brand-2);
  text-decoration-color: var(--brand-2);
}

/* spec card — for validation metrics. Numeric values centred so a row of
   metric cards reads as a strip of numbers, not a column-aligned table. */
.spec {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 26px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.spec::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.spec__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.spec__value {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144, "wght" 460;
  color: var(--text-1);
  display: block;
  margin-block: 6px;
}
.spec__caption { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.spec__sub { color: var(--text-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 1.5; }

/* badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--line-1);
  border: 1px solid var(--line-1);
}
.badge--accent { color: var(--accent); border-color: rgba(78,224,224,0.32); background: var(--accent-soft); }
.badge--brand { color: white; background: var(--brand-grad); border: 0; }
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78,224,224,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(78,224,224,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,224,224,0); }
}

/* eyebrow tags row */
.tag-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag {
  display: inline-flex;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--text-2);
  background: rgba(255,255,255,0.02);
}

/* compliance bar */
.compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compliance__item { display: inline-flex; align-items: center; gap: 8px; }
.compliance__item::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px rgba(107, 230, 166, 0.4);
}

/* ============= guardrail block ============= */
.guardrail {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 22px;
  padding: 24px 28px;
  background:
    linear-gradient(180deg, rgba(255,45,117,0.05), transparent 80%),
    var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
}
.guardrail__bar {
  background: var(--brand-grad);
  border-radius: 3px;
}
.guardrail > div { display: flex; flex-direction: column; }
.guardrail h3 { margin-bottom: 8px; }
.guardrail ul { margin: 0; padding-left: 1em; color: var(--text-2); }
.guardrail li { padding-block: 6px; }
.guardrail li::marker { color: var(--brand-1); }
.guardrail__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  transition: color 160ms;
}
.guardrail__link:hover { color: var(--brand-1); }
.guardrail__link .arrow { transition: transform 200ms var(--ease-out); }
.guardrail__link:hover .arrow { transform: translateX(3px); }

/* ============= site footer ============= */
.site-footer {
  background: var(--ink-1000);
  border-block-start: 1px solid var(--line-1);
  padding-block: 64px 32px;
  color: var(--text-3);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding-block: 6px; }
.footer-col a {
  color: var(--text-2);
  transition: color 160ms;
}
.footer-col a:hover { color: var(--text-1); }
.footer-brand p {
  color: var(--text-3);
  margin-block-start: 14px;
  max-width: 30ch;
  line-height: 1.55;
}

.footer-bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-block-start: 56px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-4);
}
.footer-legal {
  list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0;
}
.footer-legal a { color: var(--text-3); }
.footer-legal a:hover { color: var(--text-1); }

/* ============= utility ============= */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 881px) and (max-width: 1100px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

.stack-md > * + * { margin-block-start: 16px; }
.stack-lg > * + * { margin-block-start: 28px; }
.stack-xl > * + * { margin-block-start: 56px; }
.stack-2xl > * + * { margin-block-start: 96px; }

.section-head {
  display: grid; gap: 18px;
  margin-block-end: clamp(40px, 6vh, 72px);
}
/* Display heading spans the section. text-wrap: balance distributes lines
   evenly without an artificial ch-based cap. The lede stays at reading width. */
.section-head > .display-2,
.section-head > h2 { text-wrap: balance; }
.section-head > .eyebrow,
.section-head > .lede   { max-width: 76ch; }
.section-head > .lede   { text-wrap: pretty; }
.section-head--center { margin-inline: auto; text-align: center; max-width: 76ch; }
.section-head--center .eyebrow { justify-self: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center > .display-2,
.section-head--center > h2 { margin-inline: auto; }

.section-head--row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  max-width: none;
  gap: 32px;
}
@media (max-width: 720px) { .section-head--row { grid-template-columns: 1fr; } }

/* ============= legal / trust pages ============= */
.legal {
  max-width: 76ch;
  margin-inline: auto;
}
.legal--wide {
  max-width: 980px;
}
.legal h2 {
  margin-block: 56px 14px;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.015em;
}
.legal h3 {
  margin-block: 28px 8px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
}
.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
}
.legal ul,
.legal ol {
  padding-inline-start: 1.2em;
}
.legal li + li {
  margin-block-start: 8px;
}
.legal a {
  color: var(--text-1);
  border-block-end: 1px solid var(--brand-1);
  padding-block-end: 1px;
}
.legal .mono-tag {
  display: inline-block;
  margin-block-end: 24px;
}
.legal-callout {
  margin-block: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.035);
}
.legal-callout p {
  margin: 0;
}
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block: 24px;
}
.legal-card {
  padding: 22px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background: var(--ink-800);
}
.legal-card h3 {
  margin-block-start: 0;
}
.legal-card p:last-child,
.legal-card ul:last-child {
  margin-block-end: 0;
}
.legal-table-wrap {
  margin-block: 24px;
  overflow-x: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.02);
}
.legal-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border-block-start: 1px solid var(--line-1);
  vertical-align: top;
  text-align: left;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}
.legal-table th {
  border-block-start: 0;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.035);
}
.legal-table td:first-child {
  color: var(--text-1);
  font-weight: 600;
}
.legal-table__step {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  column-gap: 0.45em;
  align-items: start;
}
.legal-table__step-num {
  font-variant-numeric: tabular-nums;
}
.legal-table--steps th:nth-child(2),
.legal-table--steps td:nth-child(2) {
  padding-inline-start: 22px;
}
.legal-note {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}
/* Paper-section overrides: legal-table is built for dark sections.
   In paper sections, match the visual treatment of paper cards (warm
   off-white linear with subtle cyan + magenta radial accents + soft lift
   shadow) so the table reads as part of the same family. Also span the
   full container width — the default .legal--wide 980px constraint
   leaves the table off-center relative to its section-head. */
.section--paper .legal--wide { max-width: none; }
.section--paper .legal-table-wrap {
  border-color: var(--paper-200);
  background:
    radial-gradient(70% 90% at 18% 0%, rgba(78,224,224,0.07), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(255,45,117,0.04), transparent 60%),
    linear-gradient(180deg, #FEFCF7, #F6F2E9);
  box-shadow: 0 8px 28px rgba(21,23,31,0.04);
}
.section--paper .legal-table th,
.section--paper .legal-table td {
  border-block-start-color: rgba(21,23,31,0.10);
  color: var(--paper-ink-2);
}
.section--paper .legal-table th {
  color: var(--paper-ink);
  background: var(--paper-100);
}
.section--paper .legal-table td:first-child { color: var(--paper-ink); }
@media (max-width: 760px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }
}

/* asterisk */
.asterisk { color: var(--brand-1); font-weight: 600; }