/* Checkup legal pages (terms.html, privacy.html) and the 404 page.
 * Loads after tokens.css. 404.html also loads glass.css, which owns the [data-glass] card material.
 * Owner: legal agent (relaunch/CONTRACTS.md). Day only: a bright gray canvas, white glass, one lavender pill.
 * Colour (CONTEXT directive 10): Lavender --accent under BLACK text for the pill, link underlines and highlights;
 * Electric --accent-deep for the logo tile and accent text on white.
 * Terms and Privacy are CSS only (no scripts): the glass here is the CSS material, so it needs no compositor.
 */

/* Fallback face that keeps the H1 from shifting while Instrument Sans loads (BRIEF 1.2). */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 101%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  --legal-w: 760px;
  --legal-head: 56px;
  --legal-display: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  /* Brand springs (motion-kit.js values). Cubic fallbacks here, exact linear() springs below. */
  --legal-snap: var(--ease-snap, cubic-bezier(.2, 0, .12, 1));
  --legal-pill: var(--ease-pill, cubic-bezier(.25, .1, .2, 1.04));
  --legal-pop: var(--ease-pop, cubic-bezier(.34, 1.56, .64, 1));
  --legal-panel: var(--ease-panel, cubic-bezier(.3, 0, .18, 1.05));
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* snap 420/34, 0.49s */
    --legal-snap: linear(0, 0.045, 0.145, 0.271, 0.401, 0.524, 0.634, 0.726, 0.802, 0.862, 0.908, 0.942, 0.966, 0.983, 0.995, 1.002, 1.006, 1.008, 1.008, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1, 1, 1, 1);
    /* pill 320/24, 0.66s */
    --legal-pill: linear(0, 0.06, 0.197, 0.366, 0.535, 0.688, 0.814, 0.91, 0.978, 1.022, 1.046, 1.056, 1.056, 1.05, 1.041, 1.031, 1.022, 1.014, 1.008, 1.003, 1, 0.998, 0.997, 0.997, 0.997, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1, 1);
    /* pop 280/18, 0.85s */
    --legal-pop: linear(0, 0.086, 0.28, 0.511, 0.729, 0.906, 1.03, 1.102, 1.131, 1.129, 1.107, 1.078, 1.047, 1.021, 1.002, 0.99, 0.984, 0.982, 0.984, 0.988, 0.992, 0.996, 0.999, 1.001, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1, 1, 1);
    /* panel 170/22/1.2, 0.78s */
    --legal-panel: linear(0, 0.038, 0.127, 0.243, 0.368, 0.491, 0.604, 0.702, 0.785, 0.853, 0.906, 0.946, 0.975, 0.995, 1.009, 1.017, 1.02, 1.022, 1.021, 1.019, 1.016, 1.014, 1.011, 1.009, 1.006, 1.005, 1.003, 1.002, 1.001, 1.001, 1, 1, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--legal-head) + 2 * var(--margin, 16px)); }
body.legal, body.nf-page { min-height: 100vh; min-height: 100dvh; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the shell */
.legal-shell {
  width: 100%;
  max-width: calc(var(--legal-w) + 2 * var(--margin));
  margin: 0 auto;
  padding: var(--margin);
  padding-top: max(var(--margin), env(safe-area-inset-top));
  padding-bottom: max(var(--margin), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

/* ------------------------------------------------------------------ CSS liquid glass (Frost grade, BRAND 5.1)
   A calm frosted core, a lit rim facing --light-angle (top-left key light), a bevel band and the contact shadow.
   The rim and the bevel sit on z-index -1 inside an isolated surface: above the tint, under the text. */
.legal-glass {
  --tint: .72;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-panel);
  background-color: rgba(255, 255, 255, var(--tint));
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(13, 13, 13, .05),
    0 1px 2px rgba(0, 0, 0, .06),
    0 18px 40px -18px rgba(0, 0, 0, .24);
}
.legal-glass::before,
.legal-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
/* Rim: a 1px conic ring, bright toward the key light, a faint ink edge on the far side. */
.legal-glass::before {
  padding: 1px;
  background: conic-gradient(from calc(var(--light-angle, 225deg) + 90deg),
    rgba(255, 255, 255, 1) 0deg,
    rgba(255, 255, 255, .55) 70deg,
    rgba(13, 13, 13, .07) 150deg,
    rgba(13, 13, 13, .10) 180deg,
    rgba(13, 13, 13, .07) 210deg,
    rgba(255, 255, 255, .55) 290deg,
    rgba(255, 255, 255, 1) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Bevel band: light caught on the near edge, a soft thickness shade along the far edge. */
.legal-glass::after {
  box-shadow:
    inset 10px 10px 18px -14px rgba(255, 255, 255, .9),
    inset 0 -12px 18px -16px rgba(13, 13, 13, .14),
    inset -10px 0 18px -16px rgba(13, 13, 13, .06);
}

/* ------------------------------------------------------------------ header bar */
.legal-header {
  --tint: .76;
  position: sticky;
  top: max(var(--margin), env(safe-area-inset-top));
  z-index: 2;
  height: var(--legal-head);
  padding: 10px 10px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.legal-header__end { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Primary lockup: tile 1.45x the wordmark, 0.36em gap (BRAND 2.3). */
.legal-lockup {
  --wm: 17px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wm) * .36);
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  flex: none;
}
.legal-mark {
  display: block;
  width: calc(var(--wm) * 1.47);
  height: calc(var(--wm) * 1.47);
  flex: none;
  overflow: visible;
  transform-origin: 50% 100%;
}
/* The logo tile is always Electric (the deep tone), never the lavender UI accent. */
.legal-mark [fill="#8400FF"] { fill: var(--accent-deep, #8400FF); }
.legal-mark [stroke="#8400FF"] { stroke: var(--accent-deep, #8400FF); }
@supports (color: color(display-p3 0 0 0)) {
  @media (color-gamut: p3) {
    .legal-mark [fill="#8400FF"] { fill: color(display-p3 .52 0 1); }
  }
}
/* the drawn wordmark (an SVG, BRAND §2.3): 1.13x the size, so its x-height sits centred on the tile */
.legal-wordmark { display: block; height: calc(var(--wm) * 1.13); width: calc(var(--wm) * 4.4); fill: currentColor; flex: none; overflow: visible; }
.legal-mark .mark__pad { transform-box: fill-box; transform-origin: 50% 100%; }

/* Reading progress: a 2px ink bar along the top edge of the viewport. CSS scroll timeline only. */
.legal-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .legal-progress {
    display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px;
    background: var(--ink); transform-origin: 0 50%; pointer-events: none;
    animation: legal-progress linear both; animation-timeline: scroll(root block);
  }
}
@keyframes legal-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.legal-pill--back { padding: 6px 12px 6px 8px; }
/* the 404's Motion toggle: the home page's text toggle (panels take "Motion on · off"; bars take the pause pill) */
.nf-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: stretch; }
.nf-motion {
  position: relative; flex: none; border: 0; background: none; padding: 2px 0; border-radius: 6px; cursor: pointer;
  font: 400 14px/20px var(--font-sans); color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.nf-motion::after { content: ""; position: absolute; inset: -12px -8px; }
.nf-motion:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nf-motion .mt { text-decoration: none; opacity: .72; transition: opacity .2s; }
.nf-motion[aria-pressed="true"] .mt--on, .nf-motion[aria-pressed="false"] .mt--off { text-decoration: underline 1px; text-underline-offset: 3px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-motion[aria-pressed] .mt--on { text-decoration: none; opacity: .6; }
  .nf-motion[aria-pressed] .mt--off { text-decoration: underline 1px; text-underline-offset: 3px; opacity: 1; }
}

/* ------------------------------------------------------------------ pills */
.legal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 6px 8px 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-pill);
  line-height: 20px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-pill, .66s) var(--legal-pill), box-shadow .28s ease;
}
.legal-pill__label { display: block; }
.legal-pill__ico { width: 20px; height: 20px; flex: none; display: block; overflow: visible; }
.legal-pill--accent {
  background: var(--accent-fill, #B4A0FF);
  color: var(--accent-ink, #0D0D0D);
  box-shadow: var(--shadow-pill);
  transition: transform var(--dur-pill, .66s) var(--legal-pill), box-shadow .28s ease, background-color .18s ease;
}
.legal-pill--accent:active { background: var(--accent-press, #9F88F5); }
.legal-pill:active { transform: scale(.94); transition: transform 90ms cubic-bezier(.33, 1, .68, 1); }
/* Ink ring with a 2px canvas gap on Electric (BRIEF 9.1). */
.legal-pill--accent:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--canvas), var(--shadow-pill); }

/* ------------------------------------------------------------------ dashed mono chip */
.legal-chip,
.legal-doc .legal-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 5px 10px;
  border: 1px dashed var(--dash);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-chip);
  line-height: 1.25;
  font-weight: 400;
  font-stretch: 87.5%;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ the reading panel */
.legal-doc {
  --tint: .86;
  padding: 36px 48px 48px;
  min-width: 0;
}
.legal-doc h1 {
  margin: 22px 0 10px;
  font-family: var(--legal-display);
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1.04;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.legal-doc .legal-updated {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 32px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  font-stretch: 96%;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.legal-num {
  flex: none;
  min-width: 2.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 26px;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.legal-doc p,
.legal-doc li {
  margin: 0 0 14px;
  max-width: 66ch;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  text-wrap: pretty;
}
.legal-doc ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal-doc li { position: relative; margin-bottom: 8px; padding-left: 22px; }
.legal-doc li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.legal-doc strong { font-weight: 500; }
/* Links: ink text on a lavender underline; hover turns the text Electric (accent text on white, 6.1:1). */
.legal-doc a,
.legal-footer a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent, #B4A0FF);
  text-decoration-skip-ink: auto;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.legal-doc a:hover,
.legal-footer a:hover { color: var(--accent-deep, #8400FF); text-decoration-color: var(--accent-deep, #8400FF); }

/* Official Rules: an open slot. Dashed means pending (BRAND 7.5). */
.legal-rules {
  margin-top: 36px;
  padding: 20px 20px 6px;
  border: 1px dashed var(--dash);
  border-radius: var(--radius-row);
  background: var(--fill);
  scroll-margin-top: calc(var(--legal-head) + 2 * var(--margin) + 8px);
}
.legal-doc .legal-rules h2 {
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
}
.legal-rules:target {
  border-color: var(--accent-press, #9F88F5);
  box-shadow: 0 0 0 4px var(--accent-glow, rgba(180, 160, 255, .45)), 0 10px 30px -12px var(--accent-glow, rgba(180, 160, 255, .45));
}

/* ------------------------------------------------------------------ footer card */
.legal-footer {
  --tint: .72;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.legal-disclaimer {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-inner);
  background: var(--fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(13, 13, 13, .04);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-3);
}
.legal-footer .legal-disclaimer a { color: var(--ink); }
.legal-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 2px 4px 2px;
  font-size: 14px;
  line-height: 20px;
}
.legal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 32px; }
.legal-nav a[aria-current="page"] { text-decoration-color: var(--accent-deep, #8400FF); }
.legal-nav .sep { color: var(--ink); opacity: .45; }
.legal-copy { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 404 */
.nf {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(48px, 17vh, 168px) var(--margin) var(--margin);
}
.nf-card {
  width: min(100%, 420px);
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
}
.nf-card .legal-lockup { margin-left: -2px; }
.nf-title {
  margin: 56px 0 10px;
  font-family: var(--legal-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.nf-body {
  margin: 0 0 28px;
  font-size: var(--fs-intro);
  line-height: 28px;
  color: var(--ink);
}
.nf-pill {
  height: 48px;
  padding: 0 12px 0 18px;
  gap: 10px;
}

/* ------------------------------------------------------------------ motion (springs; nothing hides text) */
@media (prefers-reduced-motion: no-preference) {
  /* Panels settle up into place on load. Transform only: the text is there at first paint. */
  .legal-rise { animation: legal-rise var(--dur-panel, .78s) var(--legal-panel) both; }
  .legal-rise--1 { animation-delay: 50ms; }
  .legal-rise--2 { animation-delay: 100ms; }

  /* The mark lands (BRAND 2.5): a 10px drop on the gravity ease, the impact squash, a spring.pop settle. */
  .legal-mark { animation: legal-land 1.13s both; animation-delay: .12s; }

  @media (hover: hover) and (pointer: fine) {
    .legal-pill--accent:hover {
      transform: translateY(-1px);
      background: var(--accent-bright, #C9B8FF);
      box-shadow: 0 1px 2px rgba(13, 13, 13, .12), 0 14px 28px -10px rgba(132, 96, 255, .62), 0 0 0 4px var(--accent-glow, rgba(180, 160, 255, .45));
    }
    .legal-pill--accent:active { background: var(--accent-press, #9F88F5); }
    .legal-pill:active { transform: scale(.94); }
    /* Clench on hover or focus: the fist presses 16u into the controller, which gives under it, and both spring home (BRAND 2.5). */
    .legal-lockup:hover .mark__fist,
    .legal-lockup:focus-visible .mark__fist { animation: legal-clench .72s both; }
    .legal-lockup:hover .mark__pad,
    .legal-lockup:focus-visible .mark__pad { animation: legal-give .72s both; }
    .legal-lockup:active .legal-mark { transform: scale(.94); transition: transform 90ms cubic-bezier(.33, 1, .68, 1); }
  }
  .legal-lockup .legal-mark { transition: transform var(--dur-snap, .49s) var(--legal-snap); }
}

@keyframes legal-rise { from { transform: translateY(14px); } }
@keyframes legal-land {
  0%   { transform: translateY(-10px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  19.5% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  24.8% { transform: translateY(0) scale(1.10, .88); animation-timing-function: var(--legal-pop); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes legal-clench {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  17% { transform: translateY(16px); animation-timing-function: var(--legal-pop); }
  100% { transform: translateY(0); }
}
@keyframes legal-give {
  0% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  17% { transform: scale(1.015, .97); animation-timing-function: var(--legal-pop); }
  100% { transform: scale(1, 1); }
}

/* ------------------------------------------------------------------ tablet and mobile */
@media (max-width: 767px) {
  :root { --legal-head: 52px; }
  html { scroll-padding-top: calc(52px + 20px); }
  .legal-shell { padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); gap: 8px; }
  .legal-header { top: max(8px, env(safe-area-inset-top)); padding: 8px 8px 8px 14px; gap: 8px; }
  .legal-header__end { gap: 10px; }
  .legal-pill { position: relative; }
  .legal-header .legal-pill { padding: 6px 6px 6px 12px; font-size: 14px; }
  .legal-pill::after { content: ""; position: absolute; inset: -4px -2px; }   /* 44px hit target */
  .legal-doc { padding: 24px 20px 28px; }
  .legal-doc h1 { margin-top: 18px; }
  .legal-doc h2 { margin-top: 26px; padding-top: 22px; font-size: 19px; }
  .legal-doc p, .legal-doc li { font-size: 16px; line-height: 25px; }
  .legal-doc .legal-chip { white-space: normal; border-radius: 12px; text-wrap: balance; }
  .legal-rules { padding: 16px 16px 4px; }
  .legal-footer { padding: 10px; }
  .legal-footer__row { padding: 0 6px 2px; }
  .legal-nav a { min-height: 44px; }

  .nf { padding-top: clamp(40px, 12vh, 120px); }
  .nf-card { padding: 20px 22px 24px; }
  .nf-title { margin-top: 44px; font-size: 44px; }
  .nf-pill { height: 52px; }
}
@media (max-width: 379px) {
  .legal-header .legal-wordmark { display: none; }
}

/* ------------------------------------------------------------------ less transparency, more contrast: solid white, 1px ink edge */
@media (prefers-reduced-transparency: reduce) {
  .legal-glass { background-color: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ink); }
  .legal-glass::before, .legal-glass::after { display: none; }
}
@media (prefers-contrast: more) {
  .legal-glass { background-color: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ink); }
  .legal-glass::before, .legal-glass::after { display: none; }
  .legal-doc a, .legal-footer a { text-decoration-color: var(--ink); }
}

/* ------------------------------------------------------------------ print: the document only */
@media print {
  html, body.legal { background: #FFFFFF; }
  .legal-shell { max-width: none; padding: 0; }
  .legal-header { position: static; height: auto; padding: 0 0 12px; }
  .legal-header__end { display: none; }
  .legal-glass { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .legal-glass::before, .legal-glass::after { display: none; }
  .legal-doc { padding: 0; }
  .legal-doc p, .legal-doc li { max-width: none; font-size: 11pt; line-height: 1.5; }
  .legal-doc h2 { break-after: avoid; }
  .legal-rise, .legal-mark { animation: none; }
  .legal-footer { padding: 12px 0 0; }
}

/* round 2 (brand review): the pre-launch note is a plain mono caption, not a dashed chip that wraps into a box */
.legal-note,
.legal-doc .legal-note {
  margin: 0; max-width: 60ch; font: 400 12px/1.4 var(--font-mono); font-stretch: 87.5%; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3);
}