/* TrustHeader — trustheader.app.
 *
 * tokens.css holds the m7kni design system; this file is the only place that
 * composes it. No raw hex and no invented scale: if the system has a token,
 * use it. One literal is sanctioned by the design — #fff for text on the
 * accent fill, which is what --text-on-accent resolves to anyway.
 *
 * Every value below is transcribed from the frozen design,
 * MarketingPage.dc.html. Where the design wrote a rem value that a token
 * already names exactly (0.5rem = --radius-lg, 0.75rem = --radius-xl,
 * 1rem = --radius-2xl) the token is used, because the design was authored
 * against the same scale and a literal there would silently stop tracking it.
 *
 * The root here is 16px, which is what the tokens are authored against, so
 * --m7-root-basis stays at its default of 1. Do NOT add a basis declaration:
 * that correction exists for Material's 20px root, and applying it here would
 * shrink the whole type scale to 80%.
 *
 * tokens.css (base.css) already provides the border-box reset, body colour and
 * family, link colour and hover, :focus-visible, the press scale and the
 * transition set. Everything below is what it does not.
 */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── Page ─────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* base.css sets the family, colour and background but not this. */
body { margin: 0; }

/* The sticky header is 60px tall, so an anchor target landing flush to the top
   sits behind it. The design does not draw this; a page with in-page nav links
   needs it. */
#top,
#features,
#principles { scroll-margin-top: 60px; }

img { max-width: 100%; }

svg { display: block; }

.th-shell { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* tokens.css collapses animation and transition duration under
   prefers-reduced-motion. Smooth scrolling is neither, so it is switched off
   explicitly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Shared type ──────────────────────────────────────────────────────── */

.th-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.th-h2 {
  margin: 0.75rem 0 0;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-ink);
}

.th-lead {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink-faint);
}

/* The steps column sets its lead a size down — it sits in a narrow column
   beside the grid, not across the full shell. */
.th-lead--tight {
  max-width: none;
  font-size: 1rem;
  line-height: 1.65;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-xl);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.th-btn--quiet {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}

.th-btn--quiet:hover {
  border-color: var(--color-border-hover);
  color: var(--color-ink);
}

/* ── Header ───────────────────────────────────────────────────────────── */

.th-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  /* The one filter on this site. Never CSS-filter or invert the m7kni
     wordmark in the footer — inverting turns its jade dot pink. */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.th-header__inner {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.th-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.th-brand__mark {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.th-brand__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.th-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.th-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-light);
  text-decoration: none;
}

.th-nav__link:hover { color: var(--color-ink); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.th-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.th-hero__glow {
  position: absolute;
  top: -320px;
  right: -220px;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-subtle) 0%, transparent 70%);
  /* Decorative and larger than the viewport on a phone. The section clips it,
     but it must never become a scroll target or a pointer surface. */
  pointer-events: none;
}

.th-hero__inner {
  position: relative;
  padding-top: 88px;
  padding-bottom: 80px;
}

.th-rule {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
}

.th-rule__bar {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  display: block;
}

.th-rule__bar--accent  { background: var(--color-accent); }
.th-rule__bar--product { background: var(--color-accent-product); }
.th-rule__bar--chart   { background: var(--color-chart-2); }
.th-rule__bar--warn    { background: var(--color-warn); }

.th-hero__lockup {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.th-hero__mark {
  height: 52px;
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.th-hero__title {
  margin: 0;
  font-size: 60px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  max-width: 20ch;
}

.th-hero__lead {
  margin: 1.5rem 0 0;
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink-light);
}

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

/* ── Features ─────────────────────────────────────────────────────────── */

.th-features {
  background: var(--color-canvas);
  padding: 88px 0;
}

.th-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.th-card {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  box-shadow: var(--shadow-panel);
}

.th-card__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  display: block;
}

.th-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.th-card__mark {
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
}

.th-card__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.th-card__title {
  margin: 2px 0 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
}

.th-card__body {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ink-light);
}

.th-checks {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Each <li> is a flex row of exactly TWO children: the tick and a single
   text span. The markup must keep that span — a bare text node beside an
   inline <code> makes the code its own flex item, which then cannot shrink
   below its min-content (a URL has no break opportunity), so the card, its
   grid column and finally the page all overflow. That is not a styling
   nit: it took the whole page off the right edge of a phone. */
.th-checks li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-light);
}

.th-checks__tick {
  margin-top: 2px;
  flex-shrink: 0;
  display: flex;
}

/* min-width:0 defeats the flex item's automatic min-content floor, so the
   text can wrap instead of widening its container. */
.th-checks__text { min-width: 0; }

.th-checks code {
  font-size: 0.8125rem;
  color: var(--color-ink);
  /* A path or a method+path has no natural break opportunity. Without this it
     sets its own container's minimum width. */
  overflow-wrap: anywhere;
}

/* Per-card accent. The three colours are the first three bars of the hero
   rule, in order — the rule is what tells you these are a set. */
.th-card--accent  .th-card__rule   { background: var(--color-accent); }
.th-card--accent  .th-card__mark   { background: var(--color-accent-light); color: var(--color-accent); }
.th-card--accent  .th-checks__tick { color: var(--color-accent); }

.th-card--product .th-card__rule   { background: var(--color-accent-product); }
.th-card--product .th-card__mark   { background: var(--color-accent-product-light); color: var(--color-accent-product); }
.th-card--product .th-checks__tick { color: var(--color-accent-product); }

/* chart-2 has no -light companion in the system, so the design mixes its own
   tint at the same 14% the step marks use. Do not substitute a token that
   does not exist. */
.th-card--chart   .th-card__rule   { background: var(--color-chart-2); }
.th-card--chart   .th-card__mark   { background: color-mix(in oklab, var(--color-chart-2) 14%, transparent); color: var(--color-chart-2); }
.th-card--chart   .th-checks__tick { color: var(--color-chart-2); }

/* ── Steps ────────────────────────────────────────────────────────────── */

.th-steps {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 88px 0;
}

.th-steps__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: start;
}

.th-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* The design writes both of these tracks as auto-fit minmax(320px, 1fr), which
   splits the shell evenly and leaves the right column ~530px — enough for two
   220px step cards, not three. The section is called "Three steps" and is
   drawn as a row of three, so the even split is not what it means.
   Constraining the text column to 300px leaves 724px, which fits three 220px
   cards and their two 20px gaps with room to spare. Only above 1024px: below
   that the auto-fit stack is right. */
@media (min-width: 1024px) {
  .th-steps__inner { grid-template-columns: minmax(260px, 300px) 1fr; }
}

.th-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-panel);
}

.th-step__mark {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}

.th-step__title {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.th-step__body {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-ink-faint);
}

.th-step--accent  .th-step__mark { background: color-mix(in oklab, var(--color-accent) 14%, transparent);         color: var(--color-accent); }
.th-step--product .th-step__mark { background: color-mix(in oklab, var(--color-accent-product) 14%, transparent); color: var(--color-accent-product); }
.th-step--chart   .th-step__mark { background: color-mix(in oklab, var(--color-chart-2) 14%, transparent);        color: var(--color-chart-2); }

/* ── Status band ──────────────────────────────────────────────────────── */

.th-status {
  background: var(--color-canvas);
  padding: 72px 0;
}

.th-status__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--color-accent-subtle);
  border: 1px solid color-mix(in oklab, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-2xl);
  padding: 2.25rem;
}

.th-status__title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-ink);
}

.th-status__body {
  margin: 8px 0 0;
  font-size: 1rem;
  color: var(--color-ink-light);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.th-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.th-footer__inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.th-footer__wordmark {
  height: 17px;
  width: auto;
  display: block;
}

.th-footer__legal {
  margin: 0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-muted);
}

/* ── Narrow viewports ─────────────────────────────────────────────────── */

/* The design is drawn at one desktop width and does not specify a phone
   layout. Only two things actually break below ~600px: the 60px display title,
   which overflows, and the 88px section rhythm, which wastes a third of a
   phone screen. Nothing else is changed — the grids are all auto-fit and
   collapse on their own. */
@media (max-width: 640px) {
  /* Both grids are auto-fit minmax(320px, 1fr) per the design. The shell eats
     48px of padding, so the track still fits at 390px but NOT at 320–367px,
     where auto-fit has nothing narrower to fall back to and the page gains a
     horizontal scrollbar. Verified at 320px and 390px: scrollWidth equals
     clientWidth at both with this rule, and only at 390px without it. */
  .th-cards,
  .th-steps__inner,
  .th-steps__grid { grid-template-columns: 1fr; }

  .th-hero__title { font-size: 40px; }
  .th-hero__mark { height: 44px; width: 44px; }
  .th-hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .th-features,
  .th-steps { padding: 56px 0; }
  .th-status { padding: 48px 0; }
  .th-h2 { font-size: 1.875rem; }
  .th-card { padding: 1.5rem; }
  .th-status__band { padding: 1.75rem; }
}

/* The nav is two text links. Below the point where they collide with the
   wordmark they simply drop; there is no menu to build. */
@media (max-width: 380px) {
  .th-nav { display: none; }
}