/* ── Caryvane — the whole site's stylesheet ──────────────────────────────────
   This was inline in index.html while the site was one page. It is seven pages now, and
   seven inline copies would drift apart within a week, so it lives here: one file, served
   from the same origin (which `style-src 'self'` in nginx.conf already allows) and covered
   by the 30-day immutable rule on /assets/. */

/* A standalone page has to bring its own reset. */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; }

/* ── Tokens ────────────────────────────────────────────────────────────────
   One palette, navy, no light mode. #10162a is not a colour anybody chose by eye: it is the
   measured average of the border pixels of the hero artwork, so the image dissolves into the
   page instead of sitting on it as a rectangle with a visible edge.

   There is no @media (prefers-color-scheme) block and no [data-theme] block any more. With a
   single scheme there is nothing for them to override — and nothing for a theme toggle to
   toggle, which is why the toggle and its script are gone too. */
:root {
  --paper:     #10162a;
  /* Same colour as --paper, as components, for gradients that need to fade to it. A gradient
     to `transparent` fades through grey in some engines; a gradient to rgba(paper, 0) does
     not. Keep the two in step. */
  --paper-rgb: 16, 22, 42;

  --surface:   #18203a;
  --surface-2: #1e2745;
  --ink:       #eaf0f8;
  --ink-muted: #a6b8cd;
  --ink-faint: #7d8fa8;
  --rule:      #232d4a;
  --rule-firm: #35446a;

  /* The mark's sky rather than its steel: on navy the steel (#276084) is too close to the
     ground to carry a link or a heading. */
  --accent:      #6fcbec;
  --accent-soft: #17304b;
  --brass:       #d9b26a;
  --brass-soft:  #2b2416;

  /* The filled panel keeps the steel with white on it — it still reads as a distinct object
     against the navy, and white on #276084 is about 6.7:1. */
  --panel:        #276084;
  --panel-ink:    #ffffff;
  --panel-ink-2:  rgba(255,255,255,.80);
  --panel-rule:   rgba(255,255,255,.24);

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 36px -18px rgba(0,0,0,.8);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, ui-serif, Georgia, serif;
}
.mono, code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Emphasis is the accent, everywhere. It was ink-on-ink before, which meant the one word in
   a sentence worth noticing was distinguished only by weight. */
strong, b { color: var(--accent); font-weight: 600; }

/* For text a screen reader needs and the eye does not — the word behind a tick, mostly. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ────────────────────────────────────────────────────────────────
   The page fills the window rather than sitting in a fixed centre column. What is capped is
   the prose, not the container: a 200-character line is unreadable on any monitor, so the
   measure lives on the text blocks and the furniture — masthead, provider list, platform
   table — spans the full width. */
.wrap { width: 100%; margin: 0; padding: 0 clamp(20px, 4vw, 72px); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--paper); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
/* The mark carries the corner on its own now that the hero logo has gone, so it is sized to
   be seen rather than to sit politely beside the wordmark. */
.mark { display: block; flex: none; width: clamp(72px, 7vw, 112px); height: auto; }
.brand .name {
  display: block;
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1.1;
  font-family: "Avenir Next", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
}
.brand .by {
  display: block;
  font-size: 15px; color: var(--ink-muted); letter-spacing: 0;
  font-style: italic;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, ui-serif, Georgia, serif;
}
/* Sized against the mark beside it: at 15.5px the nav read as small print next to a 112px
   logo. It stays a clamp so six items still fit one line on a laptop before wrapping. */
nav.links {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(20px, 2vw, 32px); font-size: clamp(17px, 1.35vw, 20px);
}
nav.links a { color: var(--ink-muted); text-decoration: none; padding: 2px 0; }
nav.links a:hover { color: var(--accent); }
nav.links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* Which page you are on, now that there is more than one. */
nav.links a[aria-current="page"] {
  color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent);
}

/* ── Hero: the thesis, not a picture ─────────────────────────────────────
   It takes the whole first screen. `svh` rather than `vh` so a phone's collapsing address
   bar does not push the buttons under the fold; `vh` first as the fallback for anything
   that has not heard of it. */
section.hero {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 0 72px; border-bottom: 1px solid var(--rule);
  min-height: calc(100vh - 170px);
  min-height: calc(100svh - 170px);
}
/* Full-bleed again: the artwork covers the whole section rather than sitting on the right at
   its own size. That puts the neon back under the words, so the scrim comes back with it —
   angled to be near-opaque on the left where the copy is and to thin out to the right where
   the artwork should be seen.
   The tint is --paper rather than the near-black it used to be, so the hero's edges still
   dissolve into the navy page instead of banding against it. It fades to rgba(--paper-rgb, 0)
   rather than `transparent`, which fades through grey in some engines. */
section.hero {
  background-image:
    linear-gradient(100deg,
      rgba(var(--paper-rgb), .95) 0%,
      rgba(var(--paper-rgb), .88) 34%,
      rgba(var(--paper-rgb), .58) 56%,
      rgba(var(--paper-rgb), .26) 78%,
      rgba(var(--paper-rgb), .16) 100%),
    url("hero-flying-data.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
/* Narrow: the crop runs the other way, so the scrim is turned through ninety degrees and the
   focal point held off-centre. */
@media (max-width: 820px) {
  section.hero {
    background-image:
      linear-gradient(172deg,
        rgba(var(--paper-rgb), .94) 0%,
        rgba(var(--paper-rgb), .86) 46%,
        rgba(var(--paper-rgb), .52) 78%,
        rgba(var(--paper-rgb), .34) 100%),
      url("hero-flying-data.webp");
    background-position: 72% center;
  }
}

.kicker {
  /* Was 12px uppercase tracked-out small caps, which read as a label rather than a claim.
     It is the sentence that says what the product is, so it is set like one — same family
     as the body text, just larger and in the accent. */
  font-size: clamp(21px, 2.4vw, 30px);
  letter-spacing: 0; text-transform: none; line-height: 1.3;
  color: var(--accent); font-weight: 600; margin: 0 0 20px;
}
h1 {
  font-size: clamp(40px, 6.6vw, 76px);
  line-height: 1.03; letter-spacing: -.02em; font-weight: 400;
  margin: 0 0 26px; max-width: 18ch; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--accent); }
.lede {
  font-size: 20px; line-height: 1.55; color: var(--ink-muted);
  max-width: 60ch; margin: 0 0 34px;
}

.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 3px;
  font-size: 15px; font-weight: 550; text-decoration: none;
  border: 1px solid transparent;
}
.btn.primary { background: var(--accent); color: var(--paper); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: var(--rule-firm); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.big { font-size: 17px; padding: 15px 30px; }

/* ── Section furniture ─────────────────────────────────────────────────── */
section.band { padding: 68px 0; border-bottom: 1px solid var(--rule); }
section.band.last { border-bottom: none; }
/* Was 11px mono, uppercase, tracked out — a label in a different typeface from every other
   word on the site. It is set like the front page's kicker now: the body face, sentence case,
   large enough to read as a line rather than a tag. */
.eyebrow {
  font-family: inherit;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: 0; text-transform: none; line-height: 1.35;
  color: var(--accent); font-weight: 600; margin: 0 0 14px;
}
h2 {
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12;
  letter-spacing: -.018em; font-weight: 400; margin: 0 0 18px;
  max-width: 22ch; text-wrap: balance;
}
.intro { font-size: 17.5px; color: var(--ink-muted); max-width: 66ch; margin: 0 0 40px; }

/* The head of a subpage: same shape as a band, without a rule above it. */
section.pagehead { padding: 56px 0 40px; }
section.pagehead h1 { font-size: clamp(34px, 5vw, 58px); max-width: 22ch; margin-bottom: 20px; }
/* A band straight after a page heading is the same thought continuing, so it does not get the
   full 68px it would get between two unrelated sections. */
section.pagehead + section.band { padding-top: 12px; }

/* Copy on the left, the thing it describes on the right, both starting at the same line. For
   a page whose content is one long list, this beats stacking: the list is taller than the
   paragraph, so under it the page has an empty right half and then an empty left half.
   `align-items: start` is what puts the two tops level; without it the shorter column
   stretches and its content centres against the taller one. */
.splitcols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 30px 64px; align-items: start;
  padding-bottom: 80px;
}
@media (max-width: 960px) { .splitcols { grid-template-columns: 1fr; gap: 44px; } }

/* ── Drop-downs: what it does ───────────────────────────────────────────
   Six capabilities, each a paragraph and a list. All open at once it was a wall; collapsed,
   a visitor sees the six headings at a glance and opens the one they came for. <details>
   rather than scripted panels, so it still works with JavaScript off. */
.drops { border-top: 1px solid var(--rule-firm); }
.drop { border-bottom: 1px solid var(--rule); }
.drop > summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  display: flex; align-items: center; gap: 14px;
}
.drop > summary::-webkit-details-marker { display: none; }
/* An icon for what the row is about, rather than a plus repeated six times. Inline SVG, so
   it inherits the accent and costs no request — and `img-src 'self'` never comes into it. */
.dicon {
  flex: none; width: 22px; height: 22px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The open/closed marker, now at the right-hand edge: the icon has the left, and a row you
   scan by its title reads better ending in the control than beginning with it. */
.dmark {
  flex: none; color: var(--accent); font-weight: 600; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px;
  line-height: 1; width: 1.2em;
}
.dmark::before { content: "+"; }
.drop[open] .dmark::before { content: "\2013"; }
.drop > summary:hover h3, .drop > summary:hover .dmark { color: var(--accent); }
.drop > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* margin-right:auto is what pushes .dmark to the far edge — the title takes the slack. */
.drop h3 {
  font-size: clamp(21px, 2.4vw, 27px); font-weight: 400; letter-spacing: -.015em;
  margin: 0 auto 0 0;
}
.drop .body { padding: 0 0 28px 36px; }
.drop .body p { font-size: 16.5px; color: var(--ink-muted); margin: 0 0 18px; max-width: 66ch; }
.drop .body ul { columns: 2; column-gap: 48px; font-size: 15.5px; }
@media (max-width: 900px) { .drop .body ul { columns: 1; } .drop .body { padding-left: 0; } }
/* In a two-column page the drop-downs only have half the width, which is not enough for two
   columns of bullets. The media query above cannot catch this — it measures the viewport,
   and the viewport is wide; it is the column that is narrow. */
.splitcols .drop .body ul { columns: 1; }
.drop .body li {
  padding: 5px 0 5px 18px; position: relative; color: var(--ink-muted); break-inside: avoid;
}
.drop .body li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ── Providers: a list, not a grid ──────────────────────────────────────
   Eleven names in a grid of tiles read as a logo wall, and set the type in a different face
   from the rest of the site. As rows they read as what they are — a list of things a job
   can point at — in the same font as everything else. */
.providerlist {
  background: var(--panel); color: var(--panel-ink);
  border-radius: 4px; padding: 6px 28px; box-shadow: var(--shadow);
}
.providerlist li {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 15px 2px; border-bottom: 1px solid var(--panel-rule);
}
.providerlist li:last-child { border-bottom: none; }
.providerlist .n {
  display: flex; align-items: center; gap: 13px;
  font-size: 18px; font-weight: 600; color: var(--panel-ink);
}
/* A mark for the kind of thing each one is — a bucket, a container, a padlock, a folder —
   rather than anybody's logo. The names on this page are used descriptively, as the README
   says, and drawing eleven trademarks would undo exactly that. */
.picon {
  flex: none; width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.providerlist .t { font-size: 16px; color: var(--panel-ink-2); text-align: right; }
@media (max-width: 560px) {
  .providerlist li { flex-direction: column; gap: 2px; }
  .providerlist .t { text-align: left; }
}

/* ── Platform table ────────────────────────────────────────────────────
   The box is the accent now rather than a hairline grey, so the one table on the site reads
   as a deliberate object. */
.tablewrap {
  overflow-x: auto; border: 2px solid var(--accent); border-radius: 4px;
  background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
th {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); font-weight: 600; background: var(--accent);
  border-bottom: none;
}
tr:last-child td { border-bottom: none; }
td.plat { font-weight: 600; }
td .note { display: block; font-size: 13.5px; color: var(--ink-faint); margin-top: 3px; }
/* A tick, not the word "Yes". The word is still there for a screen reader, in .sr-only. */
.tick { color: var(--accent); font-size: 22px; line-height: 1; font-weight: 700; }
.partial { color: var(--brass); font-weight: 600; }

/* ── Plain bulleted list, for the console page ─────────────────────────
   These bullets were four <li> elements carrying six inline style declarations each. Same
   result, in the stylesheet where it belongs. */
/* Four lines are the whole of the right-hand column on that page, so they are set at 20px
   rather than 16.5 — at body size they read as a footnote to the paragraph beside them
   instead of as the substance of the page. */
.bullets { font-size: 20px; color: var(--ink-muted); max-width: 66ch; }
.bullets li { display: flex; align-items: flex-start; gap: 13px; padding: 10px 0; }
/* A wing off the mark rather than a round dot. Inline SVG filled with the accent — the
   logo's own wings are 68 gradient paths at 1024px, which neither scales down to 20px nor
   takes a theme colour, so this is drawn to match rather than lifted. */
/* 3:2, because it is a pair spread wide rather than one wing. */
.wing {
  flex: none; width: 27px; height: 18px; margin-top: 7px;
  fill: var(--accent); stroke: none;
}

/* ── Questions ─────────────────────────────────────────────────────────── */
.faqs { border-top: 1px solid var(--rule); max-width: 82ch; }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 17px 0; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--accent); font-weight: 600; flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
}
.faq[open] summary::before { content: "\2013"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq h3 { font-size: 17.5px; font-weight: 500; letter-spacing: -.008em; margin: 0; display: inline; }
.faq p { margin: 0 0 20px 24px; color: var(--ink-muted); font-size: 16px; max-width: 70ch; }

/* ── Contact ───────────────────────────────────────────────────────────
   The address used to be a 15px line in a footer column, which is where contact details go
   to be ignored. It is a panel now — on the front page and on a page of its own — and the
   address is the largest thing on it. */
.contactcard {
  border: 2px solid var(--accent); border-radius: 6px;
  background: var(--accent-soft); padding: clamp(28px, 4.5vw, 56px);
  max-width: 900px;
}
.contactcard .h {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; letter-spacing: -.018em;
  margin: 0 0 12px; max-width: 22ch;
}
.contactcard p { font-size: 17.5px; color: var(--ink-muted); max-width: 60ch; margin: 0 0 26px; }
.contactcard .label {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 6px; font-weight: 600;
}
.bigmail {
  display: inline-block; font-size: clamp(24px, 3.6vw, 40px); font-weight: 600;
  color: var(--accent); text-decoration: none; letter-spacing: -.02em;
  line-height: 1.2; word-break: break-word; margin: 0 0 26px;
  border-bottom: 2px solid transparent;
}
.bigmail:hover { border-bottom-color: var(--accent); }
.bigmail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── Booking form ───────────────────────────────────────────────────────
   The one place on the site that asks the visitor for something, so it is set as a panel with a
   measure of its own rather than running the full width like the rest of the furniture. */
.booking { max-width: 720px; }
.booking .intro { margin-bottom: 28px; }
.field { margin: 0 0 18px; }
.field label {
  display: block; font-size: 14px; color: var(--ink-muted); margin: 0 0 6px; font-weight: 600;
}
.field .opt { color: var(--ink-faint); font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 4px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* The honeypot: off-screen rather than display:none, because some bots skip hidden inputs but
   almost all of them fill anything they can reach. Never announced to a screen reader either. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#bookform button[type="submit"] { cursor: pointer; border: 0; margin-top: 4px; }
#bookform button[disabled] { opacity: .6; cursor: default; }
.formnote { margin: 14px 0 0; font-size: 15px; min-height: 1.4em; color: var(--ink-muted); }
.formnote.ok  { color: var(--accent); font-weight: 600; }
.formnote.err { color: var(--brass); font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer.foot { padding: 52px 0 72px; border-top: 1px solid var(--rule); }
/* The columns sit together on the left rather than being pushed to opposite edges.
   space-between on a full-width footer with only two columns threw 'Platforms' against
   the right-hand margin, a screen away from the thing it belongs with. */
.footgrid {
  display: flex; justify-content: flex-start; flex-wrap: wrap;
  gap: 32px clamp(56px, 9vw, 130px);
}
/* Keyed off .footgrid as well as .foot, because the contact page uses the same three-column
   block above the real footer and it should not be styled differently there. */
.foot h4, .footgrid h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; font-weight: 600; }
.foot p, .foot a, .footgrid p, .footgrid a { font-size: 15.5px; color: var(--ink-muted); margin: 0 0 6px; text-decoration: none; display: block; }
.foot a:hover, .footgrid a:hover { color: var(--accent); }
.footgrid p a { display: inline; color: var(--accent); border-bottom: 1px solid var(--rule-firm); }
.footgrid p a:hover { border-bottom-color: var(--accent); }
/* The footer's own address is set up rather than down: it is the reason someone scrolled. */
.foot .footmail, .footgrid .footmail { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; color: var(--accent); margin-bottom: 8px; border-bottom: none; }
.foot .footmail:hover, .footgrid .footmail:hover { text-decoration: underline; }
.colophon { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-faint); }
.colophon a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--rule-firm); display: inline; }
.colophon a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.colophon a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Cookie consent (assets/consent.js) ──────────────────────────────────────
   Analytics is not loaded until this is answered, so the banner is the whole mechanism. Bottom
   of the viewport, never covering the primary content, dismissible by either answer. */
#cv-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 560px; margin: 0 auto; padding: 16px 18px;
  background: var(--surface, #18203a); color: var(--ink, #eaf0f8);
  border: 1px solid var(--rule-firm, #35446a); border-radius: 10px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.55); font-size: 14.5px; line-height: 1.5;
}
#cv-consent p { margin: 0 0 12px; }
#cv-consent a { color: var(--accent, #6fcbec); text-decoration: underline; }
.cv-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#cv-consent button {
  font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--accent, #6fcbec);
}
.cv-consent-allow { background: var(--accent, #6fcbec); color: #10162a; }
.cv-consent-deny  { background: transparent; color: var(--ink, #eaf0f8); border-color: var(--rule-firm, #35446a) !important; }
#cv-consent button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Legal pages: long-form reading ─────────────────────────────────────── */
.legal { max-width: 72ch; padding-bottom: 40px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { text-decoration: underline; }