/* /companies/case-study — template. Tokens only. noindex page. */

body.study-page {
  overflow-x: clip;
}

.study-page .page-intro,
.study-wrap {
  max-width: var(--w-measure);
}

.study-page h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-head);
  font-weight: var(--weight-ui);
  margin: 0;
}

.study-kicker {
  margin: 0 0 var(--space-2);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-xs);
}

.study-lead {
  margin: var(--space-4) 0 0;
  color: var(--ink-dim);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}

.study-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--example);
  border-radius: var(--radius-card);
  background: var(--example-bg);
  color: var(--example);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .study-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.study-point {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.study-point h2 {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tr-head);
}

.study-point p {
  margin: var(--space-2) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-section {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-margin-top: 96px;
}

.study-section h2 {
  margin: 0;
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-head);
  font-weight: var(--weight-ui);
}

.study-section .section-lead {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--ink-mute);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.study-field {
  margin: 0 0 var(--space-4);
}

.study-field:last-child {
  margin-bottom: 0;
}

.study-label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tr-head);
}

.study-page input,
.study-page textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--target);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  box-shadow: none;
}

.study-page textarea {
  min-height: 96px;
  resize: vertical;
}

.study-page input:focus,
.study-page input:focus-visible,
.study-page textarea:focus,
.study-page textarea:focus-visible,
.study-page button:focus-visible,
.study-page a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

.field-help {
  margin: var(--space-2) 0 0;
  color: var(--ink-mute);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.receipt-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.study-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.map {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.map th,
.map td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.map th {
  color: var(--ink-mute);
  font-weight: var(--weight-ui);
}

.map td:last-child,
.map th:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.study-field-after-map {
  margin-top: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
  .study-page input,
  .study-page textarea,
  .study-page .btn {
    transition: none;
  }
}

@media print {
  body.study-page {
    background: var(--surface);
  }
  .study-page .nav,
  .study-page .footer,
  .study-page .nav-scrim,
  .study-page .nav-sheet,
  .study-page .no-print {
    display: none !important;
  }
  .study-page .page {
    padding: 0;
  }
  .study-section {
    break-inside: avoid;
  }
}