/*
 * Mutual Trust public site: page-layout glue only.
 * Everything visual comes from the Sectigo design system (/ds/css/index.css, loaded first):
 * tokens, element typography, .btn, .link, .card, .code-block, .admonition, .attr-label,
 * .breadcrumbs and .data-table. This file only arranges those pieces and uses semantic tokens;
 * it declares no colors of its own. Dark mode is the DS `dark` class on <html> (see /site.js).
 */

/* `hidden` must win over component display rules (e.g. .btn is inline-flex). */
[hidden] { display: none !important; }

html { scroll-padding-top: var(--spacing-2xl); }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
main:focus { outline: none; }

/* Anchors styled as DS buttons should not inherit the base link underline. */
a.btn { text-decoration: none; }

/* Inline code inside prose (the DS styles <code> only inside its components). */
:where(p, li, td, th, h1, h2, h3) > code {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-xs);
  background-color: var(--surface-muted-faint);
  overflow-wrap: anywhere;
}

/* ---- Layout primitives ---- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--spacing-lg);
}
@media (min-width: 768px) {
  .wrap { padding-inline: var(--spacing-xl); }
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
  gap: var(--spacing-xl);
}
.stack > * + * { margin-top: var(--spacing-lg); }
.measure > * { max-width: 72ch; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: var(--spacing-lg);
  top: var(--spacing-sm);
  z-index: 20;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  background-color: var(--surface-primary);
  color: var(--text-body-primary);
  box-shadow: var(--elevation-menu);
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* ---- Brand surfaces (header, footer) ----
 * Full-bleed brand band like the DS guide header and app shell mobile brand bar. `.inverted`
 * re-points the action tokens so buttons and links read on it. The DS focus color is blue, which
 * is too low-contrast on the brand surface, so the ring uses the fixed inverse text color here. */
.brand-surface {
  background-color: var(--surface-secondary-default);
  color: var(--text-body-primary-inverse-fixed);
  --border-focus: var(--text-body-primary-inverse-fixed);
}

/* ---- Header ---- */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md) var(--spacing-xl);
  min-height: 64px;
  padding-block: var(--spacing-md);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
  color: var(--text-body-primary-inverse-fixed);
  text-decoration: none;
}
.site-brand:hover { color: var(--text-body-primary-inverse-fixed); }
.site-brand__logo { height: 26px; width: auto; }
.site-brand__name {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  font-family: var(--font-family-display);
  font-size: 18px;
  font-weight: 600;
  line-height: var(--body-regular-line-height);
  white-space: nowrap;
}
.site-brand__name::before {
  content: "";
  width: var(--border-width-thin);
  height: var(--spacing-lg);
  border-radius: var(--radius-full);
  background: var(--icon-default-secondary);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-xl);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: 0;
  list-style: none;
}
.site-nav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}
.site-nav .link[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.theme-toggle .theme-toggle__light { display: none; }
:root.dark .theme-toggle .theme-toggle__light { display: block; }
:root.dark .theme-toggle .theme-toggle__dark { display: none; }

@media (max-width: 400px) {
  .site-brand__logo { height: 22px; }
  .site-brand__name { font-size: var(--body-regular-font-size); }
  .site-nav ul { gap: var(--spacing-sm) var(--spacing-md); }
}

/* ---- Sections ---- */
.section { padding-block: calc(var(--spacing-2xl) * 1.5); }
@media (min-width: 768px) {
  .section { padding-block: calc(var(--spacing-2xl) * 2); }
}
.section--muted {
  background-color: var(--surface-muted-faint);
  border-block: var(--border-width-thin) solid var(--border-default-subtle);
}
.section__intro { margin-bottom: var(--spacing-xl); }

/* ---- Hero ---- */
.hero h1 { max-width: 22ch; }
.hero__labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.hero__lede { max-width: 68ch; }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-block: var(--spacing-xl);
}
.fine-print {
  font-size: var(--body-small-font-size);
  line-height: var(--body-small-line-height);
  max-width: 72ch;
}

/* ---- How it works ---- */
.steps {
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li { counter-increment: step; display: flex; }
.steps .card__title::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  margin-right: var(--spacing-sm);
  border-radius: var(--radius-full);
  background-color: var(--surface-action-primary);
  color: var(--text-on-action-primary);
  font-family: var(--font-family-body);
  font-size: var(--body-small-font-size);
  line-height: 1;
}

/* ---- Check lists ---- */
.checklist { padding: 0; list-style: none; }
.checklist li {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}
.checklist li + li { margin-top: var(--body-regular-list-spacing); }
.checklist svg {
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-top: var(--spacing-xs);
  fill: currentColor;
  color: var(--icon-success-regular);
}

/* ---- Pricing ---- */
.plans { align-items: stretch; }
.plan { height: 100%; }
.plan .card__content { flex: 1; }
.plan__price {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: var(--heading-h3-font-size);
  line-height: var(--heading-h3-line-height);
  color: var(--text-heading-secondary);
}
.plan__price + .plan__price { font-size: var(--heading-h4-font-size); line-height: var(--heading-h4-line-height); }
.plan__unit {
  display: block;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body-subtle);
  font-size: var(--body-small-font-size);
  line-height: var(--body-small-line-height);
  color: var(--text-body-primary);
}
.plan ul { padding-left: var(--spacing-xl); }
.plan li + li { margin-top: var(--spacing-xs); }
.plan .card__footer { flex-wrap: wrap; justify-content: flex-start; }
/* Attribute labels are single-line tags in the DS; let the longer plan notes wrap at 320px. */
.plan .attr-label { height: auto; min-height: 24px; white-space: normal; text-align: left; }

/* ---- Prose (docs) ---- */
.doc { max-width: 860px; padding-block: var(--spacing-2xl) calc(var(--spacing-2xl) * 2); }
.doc .breadcrumbs { margin-bottom: var(--spacing-lg); }
.doc h2 {
  margin-top: var(--spacing-2xl);
  font-size: var(--heading-h3-font-size);
  line-height: var(--heading-h3-line-height);
}
.doc > :where(ul, ol):not(.doc-links) {
  padding-left: var(--spacing-xl);
  margin-bottom: var(--body-regular-paragraph-spacing);
}
.doc > :where(ul, ol) > li + li { margin-top: var(--body-regular-list-spacing); }
.doc .admonition,
.doc .code-block,
.doc .data-table { margin-block: var(--spacing-lg); }
.doc-links { padding: 0; list-style: none; }

/* ---- Data table, prose variant ----
 * The DS data table is an application grid (fixed layout, 1120px minimum, single-line cells with
 * ellipsis). Documentation tables hold sentences, so they keep the DS frame, header and row
 * styling but let cells wrap and size to content. */
.data-table--prose .data-table__table { min-width: 0; table-layout: auto; }
.data-table--prose .data-table__table th,
.data-table--prose .data-table__table td {
  height: auto;
  padding-block: var(--spacing-md);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.data-table--prose .data-table__table thead th { padding-block: var(--spacing-sm); }
.data-table--prose tbody th[scope="row"] {
  width: 30%;
  font-weight: var(--font-weight-body-strong);
  overflow-wrap: normal;
}
.data-table--wide .data-table__table { min-width: 640px; }
.data-table--wide .data-table__mono { white-space: nowrap; overflow-wrap: normal; }

/* ---- Footer ---- */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg) var(--spacing-xl);
  padding-block: var(--spacing-xl);
  font-size: var(--navigation-footer-link-font-size);
  line-height: var(--navigation-footer-link-line-height);
}
.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-lg);
}
.site-footer__brand img { height: 20px; width: auto; }
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: 0;
  list-style: none;
}
.site-footer__note {
  font-size: var(--body-small-font-size, 0.8125rem);
  letter-spacing: 0.01em;
  opacity: 0.68;
}