@font-face {
  font-family: "NeueBit";
  src: url("themes/fonts/PPNeueBit-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mondwest";
  src: url("themes/fonts/PPMondwest-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f1f0eb;
  --white: #fafaf7;
  --fog: #e5e4df;
  --line: #c8c7c0;
  --ink: #0b0b0a;
  --muted: #62625d;
  --acid: #e8ff45;
  --font-pixel: "NeueBit", "Courier New", monospace;
  --font-editorial: "Mondwest", Georgia, serif;
  --font-reading: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--paper); color: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-reading); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }

.terms-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 80px;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 240, 235, .96);
  backdrop-filter: blur(14px);
}

.terms-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 28px;
}

.terms-wordmark {
  width: max-content;
  font: 700 35px/.8 var(--font-pixel);
  letter-spacing: -.025em;
  text-decoration: none;
}

.terms-nav__links { display: flex; gap: 30px; }
.terms-nav__links a,
.terms-nav__back,
.terms-footer a { font: 700 17px/1 var(--font-pixel); letter-spacing: .025em; text-decoration: none; text-transform: uppercase; }
.terms-nav__back { display: grid; grid-template-columns: 1fr 46px; justify-self: end; min-width: 180px; height: 46px; color: var(--white); background: var(--ink); line-height: 46px; }
.terms-nav__back span:first-child { padding-left: 18px; }
.terms-nav__back span:last-child { color: var(--ink); background: var(--acid); text-align: center; }

main { width: min(1320px, calc(100% - 56px)); margin: 0 auto; }
.terms-hero { max-width: 1120px; padding: clamp(92px, 11vw, 165px) 0 clamp(80px, 9vw, 130px); }
.terms-eyebrow { display: inline-block; margin: 0 0 34px; padding: 7px 10px 5px; background: var(--acid); font: 700 17px/1 var(--font-pixel); letter-spacing: .055em; }
.terms-hero h1 { max-width: 970px; margin: 0; font: 400 clamp(72px, 8.5vw, 132px)/.82 var(--font-editorial); letter-spacing: -.05em; }
.terms-lede { max-width: 750px; margin: 46px 0 0; font-size: clamp(22px, 2vw, 29px); line-height: 1.35; }
.terms-scope { max-width: 850px; margin: 44px 0 0; padding: 20px 22px; border: 1px solid var(--ink); font-size: 17px; line-height: 1.45; }

.terms-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 2fr); gap: clamp(60px, 9vw, 150px); padding: 0 0 130px; border-top: 1px solid var(--ink); }
.terms-index { position: sticky; top: 112px; align-self: start; padding-top: 42px; }
.terms-index > p { margin: 0 0 28px; font: 700 16px/1 var(--font-pixel); letter-spacing: .055em; }
.terms-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.terms-index li { border-bottom: 1px solid var(--line); }
.terms-index a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 15px 0; font-size: 14px; line-height: 1.2; text-decoration: none; }
.terms-index a span { font: 700 15px/1 var(--font-pixel); }

.terms-copy section { position: relative; padding: 52px 0 64px 96px; border-bottom: 1px solid var(--ink); }
.terms-copy section:first-child { padding-top: 48px; }
.terms-number { position: absolute; top: 55px; left: 0; margin: 0; color: var(--muted); font: 700 18px/1 var(--font-pixel); }
.terms-copy section:first-child .terms-number { top: 51px; }
.terms-copy h2 { margin: 0 0 30px; font: 400 clamp(42px, 4.2vw, 66px)/.9 var(--font-editorial); letter-spacing: -.035em; }
.terms-copy section > p:not(.terms-number) { max-width: 760px; margin: 0; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; }
.terms-copy section > p:not(.terms-number) + p { margin-top: 20px; }
.terms-copy a { font-weight: 700; }

.terms-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 24px; padding: 38px 28px 34px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--white); }
.terms-footer p { margin: 0; color: #bfbfba; font-size: 14px; text-align: center; }
.terms-footer > a:last-child { justify-self: end; }

@media (max-width: 800px) {
  html { scroll-padding-top: 92px; }
  .terms-header { height: 72px; }
  .terms-nav { grid-template-columns: 1fr auto; padding: 0 14px; }
  .terms-wordmark { font-size: 31px; }
  .terms-nav__links { display: none; }
  .terms-nav__back { min-width: 154px; height: 44px; font-size: 15px; line-height: 44px; }
  .terms-nav__back span:first-child { padding-left: 14px; }
  main { width: calc(100% - 28px); }
  .terms-hero { padding: 74px 0 72px; }
  .terms-eyebrow { margin-bottom: 28px; }
  .terms-hero h1 { font-size: clamp(62px, 19vw, 88px); }
  .terms-lede { margin-top: 32px; font-size: 20px; }
  .terms-scope { margin-top: 34px; padding: 16px; font-size: 15px; }
  .terms-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 80px; }
  .terms-index { position: static; padding: 30px 0 22px; border-bottom: 1px solid var(--ink); }
  .terms-index > p { margin-bottom: 18px; }
  .terms-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms-index li:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--line); }
  .terms-index li:nth-child(even) { padding-left: 12px; }
  .terms-index a { grid-template-columns: 30px 1fr; font-size: 12px; }
  .terms-copy section,
  .terms-copy section:first-child { padding: 42px 0 48px; }
  .terms-number,
  .terms-copy section:first-child .terms-number { position: static; margin-bottom: 18px; }
  .terms-copy h2 { margin-bottom: 24px; font-size: 42px; }
  .terms-copy section > p:not(.terms-number) { font-size: 17px; }
  .terms-footer { grid-template-columns: 1fr; align-items: start; padding: 30px 16px; }
  .terms-footer p { text-align: left; }
  .terms-footer > a:last-child { justify-self: start; }
}