/* Site-level styles. Everything here builds on the design system's tokens and
   components; no raw colour, size or radius values. If a rule here starts to
   look like a component the whole site reuses, it belongs in the design system
   (design-system/bundle.css) instead. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 17px/27px var(--font-sans);
  background: var(--surface);
  color: var(--ink);
}

img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--space-1); }

/* Skip link: visible only once focused. */
.cs-skip {
  position: absolute; left: var(--space-4); top: var(--space-4);
  transform: translateY(-200%);
  z-index: 10;
  background: var(--surface-raised); color: var(--brand-text);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--line);
  font: 600 17px/24px var(--font-sans); text-decoration: none;
}
.cs-skip:focus { transform: translateY(0); }

.cs-header { z-index: 5; }

/* Mobile menu. The nav collapses below 900px; the primary button stays put. */
.cs-menu-btn {
  display: none;
  align-items: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-4);
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: 600 17px/24px var(--font-sans); cursor: pointer;
}
.cs-header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Above 900px the panel is transparent to layout, so the system's .cs-nav rule
   (margin-inline: auto) centres the links in the header row as designed. The
   [hidden] attribute the menu button toggles is overridden here, so the links
   are always visible on desktop whatever state the button was left in. */
@media (min-width: 901px) {
  .cs-nav-panel, .cs-nav-panel[hidden] { display: contents; }
}

@media (max-width: 900px) {
  .cs-menu-btn { display: inline-flex; }
  .cs-header-row { flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
  .cs-logo { order: 1; }
  .cs-header-actions { order: 2; }
  .cs-nav-panel { order: 3; flex-basis: 100%; }
  .cs-nav-panel[hidden] { display: none; }
  .cs-nav-panel .cs-nav {
    display: flex; flex-direction: column; gap: var(--space-4);
    margin-inline: 0;
    padding-bottom: var(--space-4);
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
  }
  .cs-nav-panel .cs-nav a { display: block; }
}

/* The Logos README: the header carries the one-line logo, and the mark alone
   below 480px, where the wordmark would push the call to action onto a second
   row of a sticky header. */
/* Both selectors carry the element to outrank the system's `.cs-logo img`. */
.cs-logo img.cs-logo-mark { display: none; }

@media (max-width: 480px) {
  .cs-logo img.cs-logo-full { display: none; }
  .cs-logo img.cs-logo-mark { display: block; height: 40px; width: auto; }
  .cs-menu-btn { padding-inline: var(--space-3); }
  .cs-header-row { gap: var(--space-3); }
}

/* Below 480px the system makes buttons full width; keep the header button inline
   so the logo and the call to action still share one row. */
.cs-header .cs-btn { width: auto; }

/* Prose blocks: the explanatory paragraph, policy pages, article bodies. */
.cs-prose { max-width: 65ch; }
.cs-prose p { margin: 0 0 var(--space-5); }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose h3 { margin: var(--space-6) 0 var(--space-3); }
.cs-prose ul { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.cs-prose li { margin-bottom: var(--space-2); }

.cs-measure { max-width: 58ch; }

/* Value column: a 32px accent icon, a heading, one sentence. Three per page. */
.cs-value h3 { margin: var(--space-4) 0 var(--space-3); }
.cs-value p { margin: 0; }

/* Section intro sitting between a display-2 and the content below it. */
.cs-section-intro { max-width: 65ch; margin: calc(var(--space-6) * -1) 0 var(--space-6); }

/* The one centred section on a page: the final call to action. */
.cs-final { text-align: center; }
.cs-final .cs-btn-row { justify-content: center; }
.cs-final p { margin: 0 auto var(--space-6); max-width: 58ch; }

/* "Part of Cake Accounting", in the header strip and the footer column. */
.cs-parent { margin: var(--space-3) 0 0; color: var(--on-maroon-muted); }
.cs-parent a { color: var(--on-maroon); }

/* FAQ, built on <details> so it works without JavaScript. */
.cs-faq { border-top: 1px solid var(--line); }
.cs-faq details { border-bottom: 1px solid var(--line); }
.cs-faq summary {
  cursor: pointer; list-style: none;
  padding: var(--space-5) var(--space-6) var(--space-5) 0;
  position: relative; color: var(--ink-heading);
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after {
  content: "+";
  position: absolute; right: 0; top: var(--space-5);
  font: 400 24px/30px var(--font-sans); color: var(--accent);
}
.cs-faq details[open] summary::after { content: "\2212"; }
.cs-faq details > p { margin: 0 0 var(--space-5); max-width: 65ch; }

/* Guardrails table: what we say, what we never say. */
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th, .cs-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.cs-table th { color: var(--ink-heading); font: 600 14px/21px var(--font-sans); }
.cs-table td:first-child { color: var(--success); }
.cs-table td:last-child { color: var(--ink-muted); }

/* The disclaimer that closes every page, article, email and PDF. */
.cs-disclaimer { margin: 0; color: var(--on-maroon-muted); max-width: 75ch; }

.cs-note { color: var(--ink-muted); }

/* Contact and resource cards reuse the system's card treatment. */
.cs-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.cs-card h3 { margin: 0; }
.cs-card p { margin: 0; color: var(--ink); }
.cs-card .cs-link { margin-top: auto; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Header logo per theme.
   The maroon logo reads at about 1.4:1 on the dark theme's surface-raised, so
   the dark header uses the white logo the Logos README approves for dark
   grounds. That file is the two-line primary: the design system has no one-line
   white variant yet, which is the only reason the dark header logo is stacked.
   Recolouring the maroon file is not an option — the Logos rules forbid it.
   Both selectors carry the element to outrank the system's `.cs-logo img`. */
.cs-logo img.cs-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-logo img.cs-logo-full { display: none; }
  :root:not([data-theme="light"]) .cs-logo img.cs-logo-dark { display: block; }
}

:root[data-theme="dark"] .cs-logo img.cs-logo-full { display: none; }
:root[data-theme="dark"] .cs-logo img.cs-logo-dark { display: block; }

/* Below 480px the mark alone stands in for both themes. */
@media (max-width: 480px) {
  .cs-logo img.cs-logo-dark { display: none; }
  :root:not([data-theme="light"]) .cs-logo img.cs-logo-dark,
  :root[data-theme="dark"] .cs-logo img.cs-logo-dark { display: none; }
}

/* Nav labels are short; never break one across two lines. */
.cs-nav a { white-space: nowrap; }

/* Pricing card service-level choice.
   The PricingCard README: each card shows the Annual fee with the Year-round
   option pre-selected and flagged "Most trustees choose this". The radio is
   checked in the markup and the headline price is the Year-round figure, so a
   reader with no JavaScript still sees the correct default and both options. */
.cs-price-options {
  margin: 0; padding: var(--space-3) 0 0;
  border: 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cs-price-options legend { padding: 0; color: var(--ink-muted); }

.cs-price-option {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cs-price-option:hover { background: var(--brand-soft); }
.cs-price-option input {
  flex: none; width: 18px; height: 18px; margin: 3px 0 0;
  accent-color: var(--brand); cursor: pointer;
}
.cs-price-option span { color: var(--ink); }

/* The flag on the pre-selected option. brand-soft tinted, brand-text on it. */
.cs-price-flag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-text);
  font: 600 13px/16px var(--font-sans);
  white-space: nowrap;
}

/* "Cards in a row share edges, padding and baselines" (README, Layout). The
   tier descriptions run two or three lines, which pushes everything below them
   out of step, so hold the description to three of its own lines. `lh` derives
   from the type rather than a magic number; without support the cards simply
   size to content as before. */
@supports (min-height: 1lh) {
  @media (min-width: 769px) {
    .cs-price-card > p { min-height: 3lh; }
  }
}

/* The consent line sits on maroon-deep, so its link follows the footer's
   treatment rather than .cs-link, which is brand-text on a light ground. */
.cs-consent a { color: var(--on-maroon); text-decoration: underline; text-underline-offset: 3px; }
.cs-consent a:hover { color: var(--brand-on-maroon); }

/* Honeypot. Off-canvas rather than display:none, because some bots skip fields
   that are plainly hidden. Never focusable: the field carries tabindex="-1" and
   its wrapper is aria-hidden, so nobody using the site can reach it. */
.cs-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}