/* Makings · Terms (/terms/), Privacy (/privacy/) and the Makings Standard Licence v1 (/licence/) · one stylesheet
   for the three pages and every width.

   The shell is the discovery page's, copied rule for rule: fonts, tokens, base, header, menu, footer.
   The text column is 760px at most, set on the page inset, like the discovery intro. Bands (mobile first):
     base        < 600px   compact header, 17px text
     600–999px             compact header, 18px text
     >= 1000px             desktop navigation
   Version and Effective lines come from the source text. The licence page adds a facts panel above the text.
   No global box-sizing reset. */

/* ---------- fonts (self-hosted; the builder supplies the files) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/assets/fonts/spline-sans-mono.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens (names follow design/handoff/tokens/tokens.css) ---------- */
:root {
  --mk-brand-ultramarine: #4436D9;
  --mk-brand-primary-deep: #2B1FA6;
  --mk-brand-cream: #FFF4C7;
  --mk-brand-ink: #202753;
  --mk-surface-canvas: #FFF8E8;
  --mk-surface-facts-panel: #FFFDF6;
  --mk-text-muted: #525777;
  --mk-line-essential: #525777;
  --mk-line-decorative-only: #C7C6BB;
  --mk-font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --mk-font-text: 'Figtree', system-ui, sans-serif;
  --mk-font-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --mk-dur-hover: 160ms;
  --mk-dur-overlay: 200ms;
  --mk-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Page inset, applied as padding-inline on the full-width header band, <main> and footer
     (so 100% is the page width): 16px at 320, 24px at 390, 48px from 768 to 1024, 68px at 1440,
     and above 1440 whatever centres a 1304px column. Linear in between. */
  --inset: max(
    16px,
    min(16px + (100% - 320px) * 8 / 70, 24px + (100% - 390px) * 24 / 378, 48px),
    48px + (100% - 1024px) * 20 / 416,
    (100% - 1304px) / 2
  );
}

/* ---------- base ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--mk-surface-canvas);
  color: var(--mk-brand-ink);
  font-family: var(--mk-font-text);
}
a {
  color: var(--mk-brand-ultramarine);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--mk-brand-ink);
}
:focus-visible {
  outline: 3px solid var(--mk-brand-ultramarine);
  outline-offset: 3px;
}
.mono {
  font-family: var(--mk-font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.tape {
  background-color: var(--mk-brand-cream);
  background-image: repeating-linear-gradient(135deg, rgba(32, 39, 83, .10) 0 2px, transparent 2px 7px);
}
/* Visually hidden but read by screen readers (the section h2s). clip-path hides it while overflow stays
   visible, so it is never "clipped text"; body-size text keeps its invisible one-line run well inside a
   320px page even under WCAG text-spacing overrides. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: visible;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  font-size: 16px;
  font-weight: 400;
}

/* Skip link: the first focusable element; visible only on focus (CMP-01). */
.skip-link {
  position: absolute;
  z-index: 30;
  top: 6px;
  left: var(--inset);
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--mk-brand-cream);
  border: 2px solid var(--mk-brand-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--mk-brand-ink);
}
.skip-link:hover {
  color: var(--mk-brand-ink);
}

/* ---------- shared bits: primary button, RESEARCH pill, "coming" tag ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 2px solid var(--mk-brand-ink);
  border-radius: 14px;
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--mk-dur-hover) var(--mk-ease), box-shadow var(--mk-dur-hover) var(--mk-ease);
}
.btn--primary,
.btn--primary:hover {
  background: var(--mk-brand-ultramarine);
  color: var(--mk-brand-cream);
  box-shadow: 4px 4px 0 var(--mk-brand-ink);
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mk-brand-ink);
}
.btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--mk-brand-ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.pill__icon {
  display: block;
  flex: 0 0 auto;
}

.tag-coming {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---------- site header ---------- */
/* The blue band is full-bleed; the cream card inside it holds the lockup and the navigation.
   Below 1000px the card is a grid: [lockup | Menu] on the first row, the open menu (#site-menu)
   on the second row, spanning the card (the nav is a subgrid so the menu can sit under the lockup). */
.site-header {
  padding: 12px var(--inset) 18px;
  background: var(--mk-brand-ultramarine);
  border-bottom: 2px solid var(--mk-brand-ink);
}
.site-header__bar {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(60px, auto) auto;
  column-gap: 12px;
  padding: 0 11px 0 12px;
  background: var(--mk-surface-canvas);
  border: 2px solid var(--mk-brand-ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--mk-brand-primary-deep);
}
.site-header__home {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 135.75px;
  height: 31.5px;
}
.site-nav {
  grid-area: 1 / 1 / 3 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.site-nav__list {
  display: none;
}
/* Desktop section links (shown from 1000px). */
.site-nav__link,
.site-nav__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.site-nav__soon {
  color: var(--mk-text-muted);
}
.site-nav__link:hover {
  color: var(--mk-brand-ultramarine);
}
.site-nav__link[aria-current] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.site-header__cta {
  display: none;
}

/* Menu button (compact widths). site.js toggles aria-expanded here and `hidden` on #site-menu. */
.menu-toggle {
  grid-area: 1 / 2;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  border: 2px solid var(--mk-brand-ink);
  border-radius: 12px;
  background: var(--mk-brand-cream);
  color: var(--mk-brand-ink);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--mk-brand-ink);
  cursor: pointer;
  transition: background-color var(--mk-dur-overlay) var(--mk-ease), color var(--mk-dur-overlay) var(--mk-ease), box-shadow var(--mk-dur-overlay) var(--mk-ease), transform var(--mk-dur-overlay) var(--mk-ease);
}
.menu-toggle__icon {
  display: block;
  flex: 0 0 auto;
}
.menu-toggle__icon--close {
  display: none;
}
.menu-toggle[aria-expanded="true"] {
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

/* The one compact menu: closed = [hidden] (display:none); open = a panel under the header row,
   inside the card, as drawn on CMP-01 (public, compact, open). Targets are 50px; the last item
   is the "Get your agent ready" button. */
.site-menu {
  display: none;
}
.site-menu:not([hidden]) {
  grid-area: 2 / 1 / 3 / 3;
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 6px 0 16px;
  list-style: none;
  border-top: 1.5px solid var(--mk-line-essential);
  animation: site-menu-in var(--mk-dur-overlay) var(--mk-ease);
}
.site-menu > li {
  border-bottom: 1.5px solid var(--mk-line-decorative-only);
}
.site-menu > .site-menu__action {
  border-bottom: 0;
  padding-top: 16px;
}
.site-menu__link,
.site-menu__soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 6px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.site-menu__soon {
  color: var(--mk-text-muted);
}
.site-menu__link:hover {
  color: var(--mk-brand-ultramarine);
}
.site-menu__link[aria-current] {
  padding-left: 14px;
  box-shadow: inset 4px 0 0 var(--mk-brand-ultramarine);
  text-decoration-line: underline;
  text-decoration-color: var(--mk-brand-ultramarine);
  text-decoration-thickness: 3px;
  text-underline-offset: 9px;
}
.site-menu__cta {
  display: flex;
}
@keyframes site-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Below 375px the card stops 4px short of the inset on the right, so card plus shadow span the content
   width, as the landing's 320 board draws it (card 284px wide at 320). */
@media (max-width: 374.98px) {
  .site-header {
    padding-right: calc(var(--inset) + 4px);
  }
}

@media (min-width: 600px) {
  .site-header {
    padding-top: 20px;
    padding-bottom: 26px;
  }
  .site-header__bar {
    grid-template-rows: minmax(68px, auto) auto;
    column-gap: 16px;
    padding: 0 14px 0 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 0 var(--mk-brand-primary-deep);
  }
  .site-header__logo {
    width: 181px;
    height: 42px;
  }
}

/* Desktop navigation from 1000px: first as two rows (lockup + button, then the links),
   the pattern drawn on the landing at 1024. */
@media (min-width: 1000px) {
  .site-header__bar {
    grid-template-rows: minmax(68px, auto) minmax(48px, auto);
    column-gap: 0;
    padding: 0;
  }
  .site-header__home {
    margin-left: 22px;
  }
  .site-nav {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 22px;
    border-top: 1.5px solid var(--mk-line-essential);
  }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-toggle,
  .site-menu,
  .site-menu:not([hidden]) {
    display: none;
  }
  .site-header__cta {
    display: inline-flex;
    grid-area: 1 / 2;
    align-self: center;
    margin-right: 22px;
  }
}

/* 1000–1319: the two-row card also keeps the landing's 1024 geometry, 24px from the page edges (T-Landing-1024),
   so the header doesn't move when a visitor goes between the landing and this page. From 1320px both pages
   put the card on the page inset. */
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .site-header {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* One row from 1320px: the 1440 board. */
@media (min-width: 1320px) {
  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 0 12px 0 22px;
  }
  .site-header__home {
    margin-left: 0;
  }
  .site-nav {
    display: block;
    padding: 0;
    border-top: 0;
  }
  .site-header__cta {
    margin-right: 0;
  }
}

/* ---------- main: the legal text ---------- */
.page {
  --page-top: 24px;
  padding: var(--page-top) var(--inset) 64px;
}
.legal {
  max-width: 760px;
}
.page-title {
  margin: 8px 0 0;
  font-family: var(--mk-font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: 40px;
  line-height: 1.02;
  color: var(--mk-brand-ink);
  text-wrap: balance;
}
.legal__version,
.legal__effective {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mk-text-muted);
}
.legal__version {
  margin-top: 16px;
}
.legal__version + .legal__effective {
  margin-top: 2px;
}
/* The licence page: what the text is, above the text. */
.legal__facts {
  margin: 20px 0 0;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--mk-surface-facts-panel);
  border: 1.5px solid var(--mk-line-essential);
  border-radius: 16px;
  color: var(--mk-brand-ink);
}
.legal .legal__facts-lead {
  max-width: none;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.legal__nowrap {
  white-space: nowrap;
}
.legal__facts-list {
  margin: 12px 0 0;
}
.legal__facts-list dt {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-text-muted);
}
.legal__facts-list dt:first-child {
  margin-top: 0;
}
.legal__facts-list dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.legal__facts-list dd a {
  color: var(--mk-brand-ultramarine);
}
/* A preamble paragraph before the first section (the licence) starts at section distance. */
.legal .legal__head + p {
  margin-top: 32px;
}
.legal__section {
  margin-top: 40px;
  scroll-margin-top: 24px;
}
.legal__h2 {
  margin: 0;
  font-family: var(--mk-font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 26px;
  line-height: 1.15;
  color: var(--mk-brand-ink);
  text-wrap: balance;
}
.legal__h3 {
  margin: 28px 0 0;
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--mk-brand-ink);
}
.legal__h3-note {
  font-weight: 400;
}
.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.6;
}
.legal p {
  max-width: 68ch;
  margin: 14px 0 0;
}
.legal__list {
  max-width: 68ch;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.legal__list > li {
  position: relative;
  margin-top: 8px;
  padding-left: 26px;
}
.legal__list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.8em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--mk-brand-ultramarine);
  transform: translateY(-50%);
}
.legal__list .legal__list {
  margin-top: 6px;
}
.legal__list .legal__list > li::before {
  width: 6px;
  height: 6px;
  background: transparent;
  border: 1.5px solid var(--mk-brand-ultramarine);
}
.legal strong {
  font-weight: 700;
}
/* The footer link to the page you are on: underlined, as well as aria-current. */
.site-footer__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* ---------- main: 600px and up ---------- */
@media (min-width: 600px) {
  .page {
    --page-top: 32px;
    padding-bottom: 88px;
  }
  .page-title {
    margin-top: 10px;
    font-size: 56px;
  }
  .legal__version {
    margin-top: 20px;
  }
  .legal__facts {
    margin-top: 24px;
    padding: 18px 22px;
  }
  .legal__facts-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 8px;
    align-items: baseline;
    margin-top: 14px;
  }
  .legal__facts-list dt,
  .legal__facts-list dd {
    margin: 0;
  }
  .legal__section {
    margin-top: 48px;
  }
  .legal__h2 {
    font-size: 30px;
  }
  .legal p,
  .legal li {
    font-size: 18px;
  }
}

/* ---------- main: 1000px and up ---------- */
@media (min-width: 1000px) {
  .page {
    --page-top: 40px;
    padding-bottom: 112px;
  }
  .page-title {
    margin-top: 12px;
    font-size: 64px;
  }
  .legal__section {
    margin-top: 56px;
  }
  .legal__h2 {
    font-size: 32px;
  }
}

/* ---------- site footer ---------- */
.site-footer {
  padding: 36px var(--inset) 30px;
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
}
.site-footer a {
  color: var(--mk-brand-cream);
}
.site-footer a:hover {
  color: #FFFFFF;
}
.site-footer :focus-visible {
  outline-color: var(--mk-brand-cream);
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-footer__logo {
  display: block;
  flex: 0 0 auto;
  width: 206.86px;
  height: 48px;
}
.site-footer__tagline {
  margin: 0;
  padding-left: 43.2px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  color: var(--mk-brand-cream);
}
.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link,
.site-footer__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}
.site-footer__soon {
  color: var(--mk-brand-cream);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding-top: 18px;
  border-top: 1.5px solid var(--mk-line-essential);
  font-family: var(--mk-font-text);
  font-size: 14px;
  line-height: 1.4;
  color: var(--mk-brand-cream);
}

@media (min-width: 600px) {
  .site-footer {
    padding-top: 44px;
    padding-bottom: 32px;
  }
  .site-footer__top {
    gap: 24px;
    margin-bottom: 36px;
  }
  .site-footer__logo {
    width: 241.33px;
    height: 56px;
  }
  .site-footer__tagline {
    padding-left: 50.4px;
    font-size: 14px;
  }
  .site-footer__list {
    gap: 4px 32px;
  }
  .site-footer__legal {
    padding-top: 20px;
  }
}

@media (min-width: 1000px) {
  .site-footer {
    padding-top: 52px;
    padding-bottom: 36px;
  }
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 44px;
  }
  .site-footer__list {
    gap: 4px 36px;
  }
  .site-footer__legal {
    padding-top: 22px;
  }
}

/* ---------- engines without subgrid (before late 2023): same header, simpler alignment ---------- */
@supports not (grid-template-columns: subgrid) {
  @media (max-width: 999.98px) {
    .site-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: flex-end;
    }
    .site-menu:not([hidden]) {
      flex: 0 0 100%;
    }
  }
}

/* ---------- reduced motion: no lift, no slide ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .menu-toggle {
    transition: none;
  }
  .btn--primary:hover,
  .btn--primary:active,
  .menu-toggle[aria-expanded="true"] {
    transform: none;
  }
  .site-menu:not([hidden]) {
    animation: none;
  }
}