/* show-bot.ai: the stylesheet of the privacy and terms pages.
   The home page's fonts, served once from fonts/ (index.html keeps its own
   inline copies), its colours and its navy bands with the blue edge. No dark
   palette: index.html has none, so these pages render the pale palette in
   both modes, as the home page does. Nothing here is fetched from another host. */

@font-face{font-family:"Space Grotesk Variable";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/SpaceGrotesk-Variable.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-Regular.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-Medium.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-SemiBold.woff2) format("woff2");}

:root {
  --navy: #001224;
  --blue: #006BFF;
  --steel: #40546A;
  --pale: #F3F7FB;
  --white: #FFFFFF;
  --rule: rgba(64, 84, 106, 0.22);
  --on-navy-2: rgba(255, 255, 255, 0.74);
  --on-navy-rule: rgba(255, 255, 255, 0.18);

  --display: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;

  --band: clamp(76px, 11vh, 104px);
  --edge: 5px;                  /* blue rule where the navy bands meet the page */
  --measure: 42rem;             /* the text column */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pale); }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--pale); color: var(--navy);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

/* ---------- Dark bands, as on the home page, but in the flow ---------- */
.band {
  flex: none; min-height: var(--band);
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 14px clamp(18px, 4vw, 44px);
}
.band--top { border-bottom: var(--edge) solid var(--blue); }
.band--bottom { border-top: var(--edge) solid var(--blue); margin-top: auto; flex-wrap: wrap; }
.band a { color: inherit; text-decoration: none; }
.band a:hover { text-decoration: underline; text-underline-offset: 3px; }
.band__side { font: 500 clamp(16px, 1.45vw, 20px)/1.4 var(--sans); color: var(--on-navy-2); letter-spacing: 0.01em; }
.band__side--right { text-align: right; }
.wordmark { font: 500 clamp(22px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -0.015em; color: var(--white); }

.site-nav { display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 2.2vw, 26px); font: 500 clamp(14px, 1.15vw, 16px)/1.4 var(--sans); color: var(--on-navy-2); }
.site-nav a[aria-current="page"] { color: var(--white); }
.powered { font: 500 clamp(14px, 1.15vw, 16px)/1.4 var(--sans); color: var(--on-navy-2); }
.powered b { font-weight: 600; color: rgba(255, 255, 255, 0.92); }

/* ---------- The text ---------- */
.legal {
  width: 100%; max-width: calc(var(--measure) + 2 * clamp(16px, 4vw, 32px));
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) clamp(16px, 4vw, 32px) clamp(56px, 9vh, 96px);
}
.legal h1 { margin: 0 0 6px; font: 500 clamp(30px, 4.2vw, 42px)/1.12 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.legal .effective { margin: 0 0 36px; color: var(--steel); font-weight: 500; }
.legal h2 { margin: 40px 0 12px; padding-top: 22px; border-top: 1px solid var(--rule); font: 500 clamp(21px, 2.3vw, 26px)/1.25 var(--display); letter-spacing: -0.012em; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 1.35em; }
.legal li { margin: 0 0 8px; padding-left: 0.15em; }
.legal li::marker { color: var(--blue); }
.legal a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal strong { font-weight: 600; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .band { padding: 14px 16px; }
  .band__side { display: none; }
  .band--top { justify-content: center; }
  .powered { font-size: 13px; text-align: right; line-height: 1.25; max-width: 7.5em; }
  .legal { padding-top: 28px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --band: 52px; }
}