/* Fleet design system — tokens.
   A site may override --ds-action and --ds-canvas. Do not invent a new scale. */

:root {
  --ds-canvas: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-ink: #1d1d1f;
  --ds-muted: #6e6e73;
  --ds-line: #d2d2d7;
  --ds-action: #0071e3;
  --ds-action-hover: #0077ed;
  --ds-focus: #0071e3;
  --ds-danger: #b42318;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 80px;

  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --ds-text: 17px;
  --ds-text-sm: 12px;
  --ds-title: clamp(28px, 4vw, 40px);
  --ds-display: clamp(40px, 7vw, 64px);
  --ds-leading: 1.47;
  --ds-track: -0.022em;

  --ds-nav-h: 48px;
  --ds-radius-control: 12px;
  --ds-radius-pill: 980px;
  --ds-measure: 40rem;
  --ds-page: 980px;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root {
  --ds-canvas: #f2f5f3;
  --ds-action: #0e5c5a;
}

/* Fleet design system — components. Mobile first. */

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--ds-canvas); overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--ds-canvas);
  background-image: radial-gradient(120% 42% at 50% -18%, rgba(255, 255, 255, 0.75), transparent 68%);
  background-image: radial-gradient(120% 42% at 50% -18%, color-mix(in srgb, #fff 88%, var(--ds-action)), transparent 68%);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: var(--ds-text);
  line-height: var(--ds-leading);
  letter-spacing: -0.012em;
  overflow-x: clip;
}

body::before,
body::after { content: none; display: none; }

.skip {
  position: absolute;
  left: var(--ds-space-4);
  top: -4rem;
  background: var(--ds-ink);
  color: var(--ds-surface);
  padding: var(--ds-space-2) var(--ds-space-3);
}
.skip:focus { top: var(--ds-space-2); z-index: 30; }

.wrap {
  width: min(var(--ds-page), 100%);
  margin-inline: auto;
  padding-inline: 20px;
}

header.top {
  position: sticky;
  top: var(--ds-space-2);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-4);
  width: 100%;
  min-height: var(--ds-nav-h);
  margin: var(--ds-space-2) 0 0;
  padding: var(--ds-space-1) var(--ds-space-4);
}

.mark {
  margin-right: auto;
  color: var(--ds-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mark span { color: var(--ds-ink); }

header.top nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  gap: 2px 16px;
}
header.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
  text-decoration: none;
}
header.top nav a[aria-current="page"] { opacity: 0.56; }

h1, h2, h3 { font-weight: 600; letter-spacing: var(--ds-track); line-height: 1.07; color: var(--ds-ink); }
h1 { margin: 0 0 12px; font-size: var(--ds-display); }
h2 { margin: 0 0 12px; font-size: var(--ds-title); }
h3 { margin: 0 0 4px; font-size: 21px; }
h1, .lede, p { overflow-wrap: break-word; }
p, li { color: var(--ds-muted); max-width: min(var(--ds-measure), 100%); }
a { color: var(--ds-action); }
.eyebrow, .kicker { display: none; }

.hero {
  display: grid;
  gap: var(--ds-space-7);
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-4);
}
.lede { margin: 0 0 var(--ds-space-5); font-size: 19px; }

.btn, button.btn, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-action);
  color: #fff;
  font: inherit;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.btn:hover, button.btn:hover, button[type="submit"]:hover {
  background: var(--ds-action);
  background: color-mix(in srgb, var(--ds-action) 84%, #fff);
  color: #fff;
}
.btn.quiet {
  background: transparent;
  color: var(--ds-action);
  box-shadow: inset 0 0 0 1px var(--ds-action);
}
.btn.quiet:hover {
  background: transparent;
  color: var(--ds-action);
}

.pad {
  padding: 8px 8px 12px;
}
.pad-head, .pad-foot {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}
.task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--ds-line);
}
.task button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  cursor: pointer;
}
.task p {
  margin: 0;
  color: var(--ds-ink);
  font-size: 17px;
  position: relative;
}
.task.done p { color: var(--ds-muted); }
.strike-svg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 92%;
  height: 10px;
  transform: translateY(-50%);
  overflow: visible;
}
.strike-svg path {
  fill: none;
  stroke: var(--ds-danger);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
}

.band {
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-4);
}
.split { display: grid; gap: var(--ds-space-5); }
.refuses { list-style: none; margin: 0; padding: 0; }
.refuses li { padding: var(--ds-space-4) 0; border-bottom: 1px solid var(--ds-line); }
.notes a.note {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--ds-line);
  color: var(--ds-ink);
  text-decoration: none;
}
.notes a.note time { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.notes a.note strong { font-weight: 600; }

footer.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-top: var(--ds-space-6);
  padding: 22px 0 40px;
  border-top: 1px solid var(--ds-line);
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}
footer.foot a { color: var(--ds-muted); font-size: var(--ds-text-sm); }

form { display: grid; gap: 12px; max-width: 32rem; }
label { display: grid; gap: 6px; color: var(--ds-ink); font-size: var(--ds-text-sm); }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--ds-radius-control);
  background: rgba(255, 255, 255, 0.88);
  background: color-mix(in srgb, var(--ds-surface) 88%, transparent);
  color: var(--ds-ink);
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 58%, var(--ds-line));
}
textarea { min-height: 140px; resize: vertical; }

:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; }

/* Liquid glass. One shared blur and one 1px edge, on the shell only. */

header.top,
.hero,
.band,
.pad {
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-color: color-mix(in srgb, #fff 74%, var(--ds-line));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
  background: color-mix(in srgb, var(--ds-surface) 64%, transparent);
  background-clip: padding-box;
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

header.top {
  background: rgba(242, 245, 243, 0.74);
  background: color-mix(in srgb, var(--ds-canvas) 74%, transparent);
}

.hero img,
article img {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 16px;
}

article img { margin: var(--ds-space-5) 0; }

@media (min-width: 760px) {
  header.top { padding-inline: var(--ds-space-5); }
  header.top nav { flex: 0 1 auto; }
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    padding: var(--ds-space-6) var(--ds-space-5);
  }
  .band { padding: var(--ds-space-6) var(--ds-space-5); }
  .split { grid-template-columns: 0.8fr 1.2fr; gap: var(--ds-space-7); align-items: start; }
  .btn, button.btn, button[type="submit"] { width: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="ok"] .hero { animation: ds-rise 0.80s var(--ds-ease) both; }
}

@keyframes ds-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

html[data-motion="reduce"] .hero { animation: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top,
  .hero,
  .band,
  .pad {
    background: var(--ds-surface);
  }

  header.top { background: var(--ds-canvas); }
}

/* Legal documents use the existing reading measure and retain mobile wrapping. */
.legal-copy h2{margin-top:2rem}.legal-copy li{margin-block:.6rem}.legal-copy a{overflow-wrap:anywhere}.legal-updated{opacity:.7}.foot-links{display:flex;flex-wrap:wrap;gap:.65rem 1.1rem}
