/* AutoSpottr website.
   Components expanded from the design-system bundle into plain CSS. Every
   number here (type sizes, tracking, padding) comes from the component
   sources — monoType(size) is `size` px with `size * 0.14` tracking,
   displayType(size) is Archivo 600 at 100% width with `size * -0.04`,
   labelType(size) is Archivo 600 at 75% width with `size * 0.14`, uppercase. */

/* ---------------------------------------------------------------- page */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--as-paper);
  color: var(--as-ink1);
  font-family: var(--as-font-archivo);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--as-signal);
  color: var(--as-on-signal);
}

img {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- shell */

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--as-screen-inset);
  padding-right: var(--as-screen-inset);
  box-sizing: border-box;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--as-paper);
  border-bottom: 1px solid var(--as-line);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-space-md);
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--as-ink1);
}

.site-nav__logo {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  border-radius: 3px;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--as-space-lg);
  flex-wrap: wrap;
  font-family: var(--as-font-ibmplex-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav__links a {
  color: var(--as-ink1);
  text-decoration: none;
}

.site-nav__links a:hover {
  color: var(--as-signal);
}

.site-nav__links a[aria-current="page"],
.site-nav__links .is-current {
  color: var(--as-signal);
}

.site-footer {
  border-top: 1px solid var(--as-line);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--as-space-md);
  flex-wrap: wrap;
  padding-top: 24px;
  padding-bottom: 140px;
  font-family: var(--as-font-ibmplex-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--as-ink3);
}

.site-footer__links {
  display: flex;
  gap: var(--as-space-lg);
}

.site-footer a {
  color: var(--as-ink3);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--as-signal);
}

/* The edge melt: a blur that blooms at the bottom of the viewport while the
   page is moving and settles back to nothing when it stops. Driven by JS. */
.edge-melt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
  mask-image: linear-gradient(to top, black 30%, transparent 100%);
}

/* ---------------------------------------------------------------- type components */

/* Masthead — AUTOSPOTTR at a fixed 5px tracking, with the signal full stop. */
.as-masthead__accent,
.as-wordmark__accent {
  color: var(--as-signal);
}

.as-masthead__accent {
  letter-spacing: 0;
}

.as-wordmark {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: var(--wm-size, 24px);
  letter-spacing: calc(var(--wm-size, 24px) * -0.04);
  color: var(--as-fg);
}

/* MonoLabel — `label:` in muted mono, optional VALUE in semibold mono. */
.as-mono-label {
  gap: calc(var(--ml-size, 10px) * 0.5);
}

.as-mono-label__key,
.as-mono-label__value {
  font-family: var(--as-font-ibmplex-mono);
  font-size: var(--ml-size, 10px);
  letter-spacing: calc(var(--ml-size, 10px) * 0.14);
}

.as-mono-label__key {
  font-weight: 400;
  color: var(--as-muted);
}

.as-mono-label__value {
  font-weight: 600;
  color: var(--as-fg);
}

/* SectionHeader — display 16 uppercase, followed by the 7px signal square. */
.as-section-header__label {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 16px;
  letter-spacing: -0.64px;
  text-transform: uppercase;
  color: var(--as-fg);
}

/* IndexSlash — a zero-padded rank and a slash, the slash often in signal. */
.as-index-slash {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: var(--is-size, 44px);
  letter-spacing: calc(var(--is-size, 44px) * -0.04);
  gap: calc(var(--is-size, 44px) * 0.045);
  color: var(--as-muted);
}

.as-index-slash__slash {
  color: var(--as-signal);
}

/* TripletStrip — label over value, three across a rule. */
.as-triplet-strip__label {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 1.19px;
  text-transform: uppercase;
  color: var(--as-muted);
}

.as-triplet-strip__value {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--as-fg);
}

/* SpecChip */
.as-spec-chip {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.19px;
  text-transform: uppercase;
  color: var(--as-fg);
}

/* ---------------------------------------------------------------- controls */

.as-primary-button {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.61px;
  text-transform: uppercase;
  text-decoration: none;
}

.as-primary-button:hover {
  background: var(--as-signal-press);
}

.as-circle-button {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.57px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--as-fg);
  width: var(--cb-size, 84px);
  height: var(--cb-size, 84px);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- rarity */

/* Rarity is a surface, not a colour: daily sits in a recessed well, sport on
   card stock, performance gets the strong rule, exotic the ink panel, icon
   the signal block. */
.as-rarity-badge {
  font-family: var(--as-font-ibmplex-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 6px 10px;
  border-width: 1px;
}

.as-rarity-badge--small {
  font-size: 8.5px;
  letter-spacing: 1.105px;
  padding: 4px 7px;
}

.as-rarity-badge[data-rarity="well"] { color: var(--as-rarity-well-on); border-color: var(--as-rarity-well-edge); }
.as-rarity-badge[data-rarity="card"] { color: var(--as-rarity-card-on); border-color: var(--as-rarity-card-edge); }
.as-rarity-badge[data-rarity="ruled"] { color: var(--as-rarity-ruled-on); border-color: var(--as-rarity-ruled-edge); }
.as-rarity-badge[data-rarity="ink"] { color: var(--as-rarity-ink-on); border-color: var(--as-rarity-ink-edge); }
.as-rarity-badge[data-rarity="signal"] { color: var(--as-rarity-signal-on); border-color: var(--as-rarity-signal-edge); }

.as-rarity-fill[data-rarity="well"] { background: var(--as-rarity-well-fill); }
.as-rarity-fill[data-rarity="card"] { background: var(--as-rarity-card-fill); }
.as-rarity-fill[data-rarity="ruled"] { background: var(--as-rarity-ruled-fill); }
.as-rarity-fill[data-rarity="ink"] { background: var(--as-rarity-ink-fill); }
.as-rarity-fill[data-rarity="signal"] { background: var(--as-rarity-signal-fill); }

/* CarBanner ghost — the wordmark used as texture behind the hero. */
.as-car-banner__ghost {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: var(--ghost-size, 46px);
  letter-spacing: calc(var(--ghost-size, 46px) * -0.04);
  color: var(--as-rarity-ink-on);
}

/* ---------------------------------------------------------------- cards */

.as-spot-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--as-card);
  border-radius: var(--as-radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.05);
}

.as-spot-card__media {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.as-spot-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.as-spot-card__index {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22px;
  position: absolute;
  top: var(--as-space-sm);
  right: var(--as-space-sm);
  color: var(--as-ink2);
  background: var(--as-card);
  border-radius: 999px;
  padding: 4px 8px;
}

.as-spot-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--as-space-xs);
  padding: var(--as-space-md);
}

.as-spot-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.as-spot-card__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.as-spot-card__name {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--as-ink1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.as-spot-card__sub {
  font-family: var(--as-font-archivo);
  font-stretch: 100%;
  font-size: 14px;
  color: var(--as-ink2);
}

.as-spot-card__desc {
  font-family: var(--as-font-archivo);
  font-stretch: 100%;
  font-size: 13px;
  color: var(--as-ink2);
  margin: 0;
}

/* MiniCard — a fixed 108px column; the showcase shelf is built from these. */
.as-mini-card {
  display: flex;
  flex-direction: column;
  width: 108px;
  flex: none;
}

.as-mini-card__thumb {
  width: 108px;
  height: 76px;
  overflow: hidden;
  border-radius: var(--as-radius-tile);
}

.as-mini-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The empty well states its tier and nothing else — no fake photograph. */
.as-mini-card__placeholder {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 75%;
  font-size: 22px;
  letter-spacing: 3.08px;
  text-transform: uppercase;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--as-fg) 12%, transparent);
}

.as-mini-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--as-space-sm);
}

.as-mini-card__model {
  font-family: var(--as-font-archivo);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 13px;
  color: var(--as-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.as-mini-card__make {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 75%;
  font-size: 8.5px;
  letter-spacing: 1.19px;
  text-transform: uppercase;
  color: var(--as-muted);
}

.as-mini-card__badge {
  margin-top: 4px;
}

.as-mini-card__year {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 75%;
  font-size: 8px;
  letter-spacing: 1.12px;
  color: var(--as-muted);
}

/* HairlineRow — a mono key, a rule above, the value pushed to the edge. */
.as-hairline-row {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  padding: 15px 0;
  border-top: 1px solid var(--as-rule);
}

.as-hairline-row__spacer {
  flex: 1;
}

.as-pro-badge {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 75%;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  color: var(--as-on-signal);
  background: var(--as-signal);
  border-radius: var(--as-radius-control);
  padding: 4.08px 8.16px;
}

/* ---------------------------------------------------------------- home */

.section {
  padding-top: 96px;
  padding-bottom: 96px;
}

.section[id] {
  scroll-margin-top: 72px;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero__art {
  position: absolute;
  inset: -20% 0 -8%;
  opacity: 0.35;
  will-change: transform;
}

.hero__inner {
  position: relative;
  padding-top: 110px;
  padding-bottom: 88px;
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(52px, 8vw, 108px);
  line-height: 0.98;
  letter-spacing: var(--as-tracking-display);
  margin: 24px 0 0;
  max-width: 12ch;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--as-muted);
  max-width: 52ch;
  margin: 24px 0 0;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--as-space-xl);
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero__stats {
  margin-top: 72px;
  max-width: 640px;
  border-top: 1px solid var(--as-rule);
  padding-top: 20px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--as-space-xl);
  margin-top: var(--as-space-xl);
}

.step {
  border-top: 1px solid var(--as-line-strong);
  padding-top: 20px;
}

.step__title {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 24px;
  letter-spacing: var(--as-tracking-heading);
  margin-top: 14px;
}

.step__body,
.tile__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--as-muted);
  margin: 8px 0 0;
}

.section__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--as-muted);
  max-width: 56ch;
  margin: 20px 0 0;
}

.ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(176px, 1fr));
  gap: var(--as-space-md);
  margin-top: var(--as-space-xl);
  overflow-x: auto;
  padding-bottom: var(--as-space-xs);
}

.tier-card {
  border-radius: var(--as-radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.10), 0 12px 32px rgba(20, 20, 18, 0.08);
}

.tier-card__media {
  position: relative;
  height: 190px;
}

.tier-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tier-card__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tier-card__name {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 20px;
  letter-spacing: var(--as-tracking-heading);
  line-height: 1;
}

.garage {
  background: var(--as-paper-sunken);
  border-top: 1px solid var(--as-line);
  border-bottom: 1px solid var(--as-line);
}

.garage__layout {
  display: flex;
  gap: var(--as-space-xxl);
  margin-top: var(--as-space-xl);
  flex-wrap: wrap;
  align-items: flex-start;
}

.garage__card {
  flex: 1 1 400px;
  max-width: 480px;
  will-change: transform;
}

.garage__aside {
  flex: 1 1 380px;
  min-width: 320px;
}

.garage__copy {
  font-size: 17px;
  line-height: 1.6;
  color: var(--as-muted);
  max-width: 48ch;
  margin: 0;
}

.garage__shelf {
  display: flex;
  gap: var(--as-space-md);
  margin-top: var(--as-space-xl);
  flex-wrap: wrap;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--as-space-md);
  margin-top: var(--as-space-xl);
}

.tile {
  border-radius: var(--as-radius-tile);
  padding: var(--as-space-lg);
}

.tile__title {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 22px;
  letter-spacing: var(--as-tracking-heading);
  margin-top: 12px;
}

.tile__body {
  font-size: 14.5px;
}

.pro-panel {
  border-radius: var(--as-radius-panel);
  padding: var(--as-space-xxl);
  display: flex;
  gap: var(--as-space-xxl);
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.10), 0 16px 40px rgba(20, 20, 18, 0.08);
}

.pro-panel__lead {
  flex: 1 1 320px;
  min-width: 280px;
}

.pro-panel__heading {
  display: flex;
  align-items: center;
  gap: var(--as-space-sm);
}

.pro-panel__title {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 40px;
  letter-spacing: var(--as-tracking-display);
}

.pro-panel__copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--as-muted);
  max-width: 44ch;
  margin: 16px 0 0;
}

.pro-panel__rows {
  flex: 1 1 380px;
  min-width: 300px;
}

.get {
  padding-top: 64px;
  padding-bottom: 96px;
  text-align: center;
}

.get__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--as-space-lg);
}

.get__note {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--as-muted);
}

.section--tight {
  padding-top: 32px;
}

/* Below the point where five tiers can sit side by side, the ladder becomes a
   strip you push sideways — the tiers stay in order, which is the whole point
   of a ladder, rather than reflowing into a grid that loses the sequence. */
@media (max-width: 900px) {
  .ladder {
    grid-auto-flow: column;
    grid-auto-columns: minmax(176px, 1fr);
    grid-template-columns: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .tier-card {
    scroll-snap-align: start;
  }
}

/* Phones and small tablets: the layout is already fluid, so this only pulls in
   the generous desktop spacing and releases the flex minimums that would
   otherwise hold a column wider than the screen. */
@media (max-width: 720px) {
  .site-nav__inner {
    gap: var(--as-space-xs);
  }

  .site-nav__links {
    gap: 14px;
    font-size: 10.5px;
  }

  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section--tight {
    padding-top: 24px;
  }

  .hero__inner {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .hero__stats {
    margin-top: 48px;
  }

  .hero__actions {
    gap: var(--as-space-lg);
    margin-top: 32px;
  }

  .garage__layout {
    gap: var(--as-space-xl);
  }

  /* flex-basis keeps these side by side on a wide screen; the min-width that
     protects them there has to go, or it outruns a 375px viewport. */
  .garage__aside,
  .pro-panel__lead,
  .pro-panel__rows {
    min-width: 0;
  }

  .pro-panel {
    padding: var(--as-space-lg);
    gap: var(--as-space-lg);
  }

  .get {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .legal {
    padding-top: 32px;
  }

  .privacy {
    padding-top: 40px;
  }

  .legal__meta {
    gap: var(--as-space-sm);
  }
}

@media (max-width: 420px) {
  .step-grid {
    gap: var(--as-space-lg);
  }

  .garage__shelf {
    gap: var(--as-space-sm);
  }

  /* Three 108px cards will not sit in a phone's width; two and a wrap is the
     honest arrangement, and the shelf reads as a shelf either way. */
  .garage__shelf .as-mini-card {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------- legal pages */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--as-screen-inset) 96px;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: var(--as-tracking-data);
}

.legal a {
  color: var(--as-signal);
  text-decoration: none;
}

.legal a:hover {
  color: var(--as-signal-press);
  text-decoration: underline;
}

.legal section[id] {
  scroll-margin-top: 80px;
  margin-bottom: var(--as-space-xxl);
}

.legal p {
  margin: 0 0 16px;
}

.legal__header {
  border-bottom: 1px solid var(--as-line-strong);
  padding-bottom: var(--as-space-lg);
  margin-bottom: var(--as-space-xl);
}

.legal__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--as-space-md);
  font-family: var(--as-font-ibmplex-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--as-tracking-mono);
  text-transform: uppercase;
  color: var(--as-signal);
}

.legal__eyebrow strong {
  font-weight: 600;
  font-size: 12px;
  color: var(--as-ink1);
}

.legal__eyebrow span {
  color: var(--as-ink3);
}

.legal__title {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(40px, 9vw, 68px);
  line-height: 0.98;
  letter-spacing: var(--as-tracking-display);
  text-transform: lowercase;
  margin: var(--as-space-lg) 0 var(--as-space-md);
}

.legal__standfirst {
  color: var(--as-ink2);
  font-size: 18px;
  max-width: 56ch;
  margin: 0;
}

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-space-lg);
  margin-top: var(--as-space-xl);
  padding-top: var(--as-space-md);
  border-top: 1px solid var(--as-line);
}

.legal__section-head {
  display: flex;
  gap: var(--as-space-md);
  align-items: baseline;
  border-top: 1px solid var(--as-line-strong);
  padding-top: var(--as-space-md);
  margin-bottom: var(--as-space-md);
}

.legal__section-num {
  font-family: var(--as-font-ibmplex-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--as-tracking-mono);
  color: var(--as-signal);
  flex: none;
  padding-top: 3px;
}

.legal h2 {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(22px, 4vw, 27px);
  letter-spacing: var(--as-tracking-heading);
  line-height: 1.12;
  margin: 0;
}

.legal h3 {
  font-family: var(--as-font-ibmplex-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--as-tracking-mono);
  text-transform: uppercase;
  color: var(--as-ink2);
  margin: var(--as-space-lg) 0 var(--as-space-xs);
}

/* Contents — two columns that collapse to one on a narrow screen. */
.legal__toc-label {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 10px;
  letter-spacing: var(--as-tracking-mono);
  text-transform: uppercase;
  color: var(--as-ink3);
  margin-bottom: var(--as-space-md);
}

.legal__toc {
  margin-top: var(--as-space-xl);
  margin-bottom: var(--as-space-huge);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--as-space-xl);
}

.toc-list li {
  break-inside: avoid;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-left: 0;
}

.toc-list span {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 12px;
  color: var(--as-signal);
  flex: none;
}

.toc-list a {
  color: var(--as-ink1);
  font-size: 15px;
}

@media (max-width: 560px) {
  .toc-list { columns: 1; }
}

/* Terms sets its list items with an em dash in the signal colour. */
.tos ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.tos li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.tos li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--as-signal);
  font-family: var(--as-font-ibmplex-mono);
}

.tos .toc-list li::before {
  content: none;
}

.legal__table-scroll {
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--as-space-md) 0;
  font-family: var(--as-font-ibmplex-mono);
  font-size: 13px;
  min-width: 420px;
}

.legal th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--as-line-strong);
  font-size: 10px;
  letter-spacing: var(--as-tracking-mono);
  text-transform: uppercase;
  color: var(--as-ink3);
}

.legal td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--as-line);
}

.legal td.price {
  color: var(--as-signal);
}

/* A pulled-out note on the ink panel — one per page, per the system. */
.legal__note {
  border-radius: var(--as-radius-card);
  padding: var(--as-space-xl);
  margin: var(--as-space-lg) 0;
}

.legal__note-label {
  display: block;
  font-family: var(--as-font-ibmplex-mono);
  font-size: 10px;
  letter-spacing: var(--as-tracking-mono);
  text-transform: uppercase;
  color: var(--as-signal);
  margin-bottom: var(--as-space-sm);
}

.legal__note p {
  color: var(--as-muted);
  margin: 0 0 8px;
}

.legal__note p:last-child {
  margin: 0;
}

.legal__note strong {
  color: var(--as-fg);
}

/* Privacy uses a softer measure and plain bulleted lists. */
.privacy {
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: normal;
  padding-top: 64px;
}

.privacy .legal__header {
  border-bottom: 1px solid var(--as-line);
  padding-bottom: 28px;
  margin-bottom: 36px;
}

.privacy h1 {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--as-tracking-display);
  margin: 14px 0;
}

.privacy__dates {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--as-ink2);
  margin: 0;
}

.privacy__intro {
  font-size: 17px;
  margin: 28px 0 0;
}

.privacy__intro + .privacy__intro {
  margin: 14px 0 0;
}

.privacy h2 {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 22px;
  letter-spacing: var(--as-tracking-heading);
  margin: 44px 0 12px;
}

.privacy h3 {
  font-family: var(--as-font-archivo);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin: 26px 0 6px;
}

.privacy ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.privacy li {
  margin-bottom: 8px;
}

.privacy li:last-child {
  margin-bottom: 0;
}

.privacy__summary {
  border-radius: var(--as-radius-panel);
  padding: 24px 26px;
  margin: 28px 0;
  box-shadow: 0 1px 2px rgba(20, 20, 18, 0.10), 0 12px 32px rgba(20, 20, 18, 0.08);
}

.privacy__summary h2 {
  font-size: 22px;
  margin: 0 0 12px;
}

.privacy__summary ul {
  margin: 0;
}

.privacy__contact {
  line-height: 2;
}

.privacy__contact span {
  display: inline-block;
  font-family: var(--as-font-ibmplex-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--as-signal);
  border: 1px dashed var(--as-signal);
  border-radius: var(--as-radius-control);
  padding: 1px 7px;
}