/*
  MemberSpark design system: tokens.
  Mirrors tokens.json: the two files carry the same values, and
  tests/design-system-check.ps1 holds them together. Change tokens.json first.

  Light is the default. A visitor whose system asks for dark gets dark,
  unless the page sets data-theme="light" on <html>. data-theme="dark"
  forces dark.
*/

:root {
  color-scheme: light dark;
  --ms-type-font-display: 'Bricolage Grotesque', Figtree, 'Segoe UI', system-ui, sans-serif;
  --ms-type-font-body: Figtree, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ms-type-size-sm: 0.875rem;
  --ms-type-size-base: 1rem;
  --ms-type-size-lg: 1.125rem;
  --ms-type-size-h3: 1.25rem;
  --ms-type-size-h2: 1.75rem;
  --ms-type-size-h1: 2.5rem;
  --ms-type-size-display: 3.25rem;
  --ms-type-line-height: 1.375;
  --ms-type-line-height-tight: 1.15;
  --ms-type-weight-regular: 400;
  --ms-type-weight-medium: 600;
  --ms-type-weight-bold: 700;
  --ms-type-weight-heavy: 800;
  --ms-space-1: 0.25rem;
  --ms-space-2: 0.5rem;
  --ms-space-3: 0.75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.5rem;
  --ms-space-6: 2rem;
  --ms-space-7: 3rem;
  --ms-space-8: 4rem;
  --ms-space-gutter: clamp(1.1rem, 4vw, 3rem);
  --ms-radius-sm: 10px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 16px;
  --ms-radius-xl: 18px;
  --ms-radius-pill: 999px;
  --ms-size-tap: 44px;
  --ms-size-header-row-min: 56px;
  --ms-size-header-row-max: 80px;
  --ms-size-icon: 24px;
  --ms-size-tile: 36px;
  --ms-size-reading: 46rem;
  --ms-size-page: 1180px;
  --ms-brand-name: "MemberSpark";
  --ms-brand-motto: "Crafted by makers, for makers.";
  --ms-brand-stripe-1: #a4bc45;
  --ms-brand-stripe-2: #00eeb9;
  --ms-brand-stripe-3: #07b9a7;
  --ms-brand-stripe-4: #372f8f;
  --ms-brand-stripe-5: #eb208c;
  --ms-brand-stripe-6: #f9552c;
  --ms-brand-stripe-7: #fa8c2e;

  --ms-color-page: #f3f4f8;
  --ms-color-surface: #ffffff;
  --ms-color-surface-muted: #eceef5;
  --ms-color-line: #dfe2ec;
  --ms-color-line-strong: #80859a;
  --ms-color-text: #15172a;
  --ms-color-text-muted: #4a4e66;
  --ms-color-link: #1d3a8a;
  --ms-color-link-hover: #0f2463;
  --ms-color-focus: #1d3a8a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #15172a;
  --ms-color-on-primary: #ffffff;
  --ms-color-danger: #b3261e;
  --ms-color-badge-paid-bg: #e3f4ea;
  --ms-color-badge-paid-fg: #17603c;
  --ms-color-badge-due-bg: #fff3dc;
  --ms-color-badge-due-fg: #7a4a00;
  --ms-color-badge-lapsed-bg: #fbe7e4;
  --ms-color-badge-lapsed-fg: #8f2a20;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(21, 23, 42, 0.06), 0 8px 24px rgba(21, 23, 42, 0.06);
  --ms-shadow-raised: 0 2px 4px rgba(21, 23, 42, 0.08), 0 12px 32px rgba(21, 23, 42, 0.12);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ms-color-page: #f3f4f8;
  --ms-color-surface: #ffffff;
  --ms-color-surface-muted: #eceef5;
  --ms-color-line: #dfe2ec;
  --ms-color-line-strong: #80859a;
  --ms-color-text: #15172a;
  --ms-color-text-muted: #4a4e66;
  --ms-color-link: #1d3a8a;
  --ms-color-link-hover: #0f2463;
  --ms-color-focus: #1d3a8a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #15172a;
  --ms-color-on-primary: #ffffff;
  --ms-color-danger: #b3261e;
  --ms-color-badge-paid-bg: #e3f4ea;
  --ms-color-badge-paid-fg: #17603c;
  --ms-color-badge-due-bg: #fff3dc;
  --ms-color-badge-due-fg: #7a4a00;
  --ms-color-badge-lapsed-bg: #fbe7e4;
  --ms-color-badge-lapsed-fg: #8f2a20;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(21, 23, 42, 0.06), 0 8px 24px rgba(21, 23, 42, 0.06);
  --ms-shadow-raised: 0 2px 4px rgba(21, 23, 42, 0.08), 0 12px 32px rgba(21, 23, 42, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ms-color-page: #10121f;
    --ms-color-surface: #1f2238;
    --ms-color-surface-muted: #262a45;
    --ms-color-line: #33375a;
    --ms-color-line-strong: #737793;
    --ms-color-text: #f3f4f8;
    --ms-color-text-muted: #9ea4c4;
    --ms-color-link: #9ec2ff;
    --ms-color-link-hover: #c7dbff;
    --ms-color-focus: #ffd27a;
    --ms-color-accent: #f5a623;
    --ms-color-on-accent: #15172a;
    --ms-color-primary: #f5a623;
    --ms-color-on-primary: #15172a;
    --ms-color-danger: #ff8a80;
    --ms-color-badge-paid-bg: #173d2a;
    --ms-color-badge-paid-fg: #8fe0b4;
    --ms-color-badge-due-bg: #45320a;
    --ms-color-badge-due-fg: #ffd27a;
    --ms-color-badge-lapsed-bg: #4d1f1a;
    --ms-color-badge-lapsed-fg: #ffb4a8;
    --ms-color-tile-gold: #f5a623;
    --ms-color-tile-blue: #7fb3ff;
    --ms-color-tile-violet: #c7a6ff;
    --ms-color-tile-green: #8fe0b4;
    --ms-color-tile-coral: #ff7a59;
    --ms-color-on-tile: #15172a;
    --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --ms-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ms-color-page: #10121f;
  --ms-color-surface: #1f2238;
  --ms-color-surface-muted: #262a45;
  --ms-color-line: #33375a;
  --ms-color-line-strong: #737793;
  --ms-color-text: #f3f4f8;
  --ms-color-text-muted: #9ea4c4;
  --ms-color-link: #9ec2ff;
  --ms-color-link-hover: #c7dbff;
  --ms-color-focus: #ffd27a;
  --ms-color-accent: #f5a623;
  --ms-color-on-accent: #15172a;
  --ms-color-primary: #f5a623;
  --ms-color-on-primary: #15172a;
  --ms-color-danger: #ff8a80;
  --ms-color-badge-paid-bg: #173d2a;
  --ms-color-badge-paid-fg: #8fe0b4;
  --ms-color-badge-due-bg: #45320a;
  --ms-color-badge-due-fg: #ffd27a;
  --ms-color-badge-lapsed-bg: #4d1f1a;
  --ms-color-badge-lapsed-fg: #ffb4a8;
  --ms-color-tile-gold: #f5a623;
  --ms-color-tile-blue: #7fb3ff;
  --ms-color-tile-violet: #c7a6ff;
  --ms-color-tile-green: #8fe0b4;
  --ms-color-tile-coral: #ff7a59;
  --ms-color-on-tile: #15172a;
  --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --ms-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* --- design/system/components.css, copied verbatim --- */

/*
  MemberSpark design system: components.
  Load tokens.css first. Every colour, size and font here comes from a --ms-
  token, so the light and dark themes need nothing of their own.
  tests/design-system-check.ps1 holds the 44px floor and the token-only rule.
*/

/* --- Page basics ----------------------------------------------------------- */
/* The text rhythm is stated once, here (site-standards, Room to tap and read, Rec 2).
   :where() keeps these base rules below any component rule. */

.ms-page {
  margin: 0;
  background: var(--ms-color-page);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-body);
  font-size: var(--ms-type-size-base);
  line-height: var(--ms-type-line-height);
}

:where(.ms-page) p {
  margin: 1em 0;
}

.ms-page h1,
.ms-page h2,
.ms-page h3 {
  font-family: var(--ms-type-font-display);
  line-height: var(--ms-type-line-height-tight);
  font-weight: var(--ms-type-weight-heavy);
}

.ms-page h1 { font-size: var(--ms-type-size-h1); margin: 0.2rem 0 1rem; }
.ms-page h2 { font-size: var(--ms-type-size-h2); margin: 1.8rem 0 0.7rem; }
.ms-page h3 { font-size: var(--ms-type-size-h3); margin: 0.7rem 0 0.2rem; }

:where(.ms-page) a {
  color: var(--ms-color-link);
}

:where(.ms-page) a:hover {
  color: var(--ms-color-link-hover);
}

.ms-wrap {
  max-width: var(--ms-size-page);
  margin: 0 auto;
  padding: 0 var(--ms-space-gutter);
}

.ms-reading {
  max-width: var(--ms-size-reading);
}

.ms-page :focus-visible {
  outline: 3px solid var(--ms-color-focus);
  outline-offset: 2px;
}

/* The four-point spark mark. It takes its colour from the accent. */
.ms-spark {
  width: 1.5em;
  height: 1.5em;
  color: var(--ms-color-accent);
  flex: none;
}

/* --- Header -------------------------------------------------------------- */
/*
  Desktop: one row, 56-80px. Brand left, tabs in words after it, then the
  right-hand group together with no gaps: Help door, dark toggle, account,
  settings. Phone: row 1 is the same minus the tabs; row 2 carries every tab.
  (site-standards, Header standard, The rows, defined.)
*/

.ms-header {
  background: var(--ms-color-surface);
  border-bottom: 1px solid var(--ms-color-line);
}

.ms-header__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--ms-size-header-row-min);
  max-height: var(--ms-size-header-row-max);
  max-width: var(--ms-size-page);
  margin: 0 auto;
  padding: 0 var(--ms-space-gutter);
}

.ms-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-lg);
  font-weight: var(--ms-type-weight-heavy);
  text-decoration: none;
  min-width: 0;
}

/* On a narrow phone the name gives way, never the 44px buttons beside it. */
.ms-header__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-header__tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.ms-header__group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex: none;
}

/* Row 2 stands only on a phone, and carries the whole tab set. */
.ms-header__row--tabs {
  display: none;
}

@media (max-width: 40rem) {
  .ms-header__row .ms-header__tabs {
    display: none;
  }

  .ms-header__row--tabs {
    display: flex;
    overflow: hidden;
  }

  .ms-header__row--tabs .ms-header__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

.ms-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
  text-decoration: none;
}

.ms-tab:hover,
.ms-tab[aria-current="page"] {
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
}

/* An icon-only control: the Help door, the dark toggle, settings. A 20px
   Lucide drawing in a 44px circle. It carries a spoken name (aria-label). */
.ms-icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: var(--ms-size-tap);
  min-height: var(--ms-size-tap);
  padding: 0;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: transparent;
  color: var(--ms-color-text);
  cursor: pointer;
}

.ms-icon-btn:hover {
  background: var(--ms-color-surface-muted);
}

.ms-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* SVG ignores the hidden attribute unless a rule says so. A button holding
   several faces (the theme button) shows only the one not hidden. */
.ms-icon-btn svg[hidden] {
  display: none;
}


/* --- Buttons --------------------------------------------------------------- */
/* One filled primary per view. A danger button names what it destroys. */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-size-tap);
  padding: 0.65rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--ms-radius-pill);
  font: inherit;
  font-weight: var(--ms-type-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ms-btn:disabled,
.ms-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ms-btn--primary {
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
}

.ms-btn--primary:hover {
  box-shadow: var(--ms-shadow-raised);
}

.ms-btn--secondary {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-line-strong);
  color: var(--ms-color-text);
}

.ms-btn--secondary:hover {
  border-color: var(--ms-color-text);
}

.ms-btn--quiet {
  background: transparent;
  color: var(--ms-color-text);
}

.ms-btn--quiet:hover {
  background: var(--ms-color-surface-muted);
}

.ms-btn--danger {
  background: var(--ms-color-surface);
  border-color: var(--ms-color-danger);
  color: var(--ms-color-danger);
}

.ms-btn--danger:hover {
  background: var(--ms-color-danger);
  color: var(--ms-color-surface);
}

/* --- Cards ----------------------------------------------------------------- */

.ms-card {
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-space-5);
}

.ms-card--muted {
  background: var(--ms-color-surface-muted);
  box-shadow: none;
}

/* --- Fields ---------------------------------------------------------------- */
/* A field's error stands beside that field, in plain words. */

.ms-field {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.ms-label {
  font-weight: var(--ms-type-weight-medium);
}

.ms-input {
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-3);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  font: inherit;
}

textarea.ms-input {
  padding: var(--ms-space-3);
}

.ms-input[aria-invalid="true"] {
  border-color: var(--ms-color-danger);
}

.ms-hint {
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
}

.ms-error {
  color: var(--ms-color-danger);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-medium);
}

/* --- Badges ---------------------------------------------------------------- */

.ms-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: var(--ms-radius-pill);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-bold);
  white-space: nowrap;
}

.ms-badge--paid {
  background: var(--ms-color-badge-paid-bg);
  color: var(--ms-color-badge-paid-fg);
}

.ms-badge--due {
  background: var(--ms-color-badge-due-bg);
  color: var(--ms-color-badge-due-fg);
}

.ms-badge--lapsed {
  background: var(--ms-color-badge-lapsed-bg);
  color: var(--ms-color-badge-lapsed-fg);
}

/* --- Tables ---------------------------------------------------------------- */

.ms-table {
  width: 100%;
  border-collapse: collapse;
}

.ms-table th {
  padding: var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-line);
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-medium);
  text-align: left;
}

.ms-table td {
  padding: var(--ms-space-3) var(--ms-space-2);
  border-bottom: 1px solid var(--ms-color-line);
}

.ms-table tr:last-child td {
  border-bottom: 0;
}

/* A list of people shows 10 at a time; Show all renders the whole list
   (site-standards, Room to tap and read, Rec 5). */
.ms-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ms-size-tap);
  border: 0;
  border-top: 1px solid var(--ms-color-line);
  background: transparent;
  color: var(--ms-color-link);
  font: inherit;
  font-weight: var(--ms-type-weight-bold);
  cursor: pointer;
}

.ms-show-all:hover {
  background: var(--ms-color-surface-muted);
}

/* --- Product tiles ----------------------------------------------------------- */

.ms-tile {
  display: inline-grid;
  place-items: center;
  width: var(--ms-size-tile);
  height: var(--ms-size-tile);
  flex: none;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-color-tile-gold);
  color: var(--ms-color-on-tile);
  font-weight: var(--ms-type-weight-heavy);
}

.ms-tile--blue { background: var(--ms-color-tile-blue); }
.ms-tile--violet { background: var(--ms-color-tile-violet); }
.ms-tile--green { background: var(--ms-color-tile-green); }
.ms-tile--coral { background: var(--ms-color-tile-coral); }

/* --- Footer closing block ---------------------------------------------------- */
/*
  The site's link line, the seven-stripe bar, then three lines:
  <Product> (c) <year> / By MemberSpark [flag], a BC non-profit / the motto.
  The motto comes from --ms-brand-motto, so it is changed in one place.
  The flag is an SVG at text height, never an emoji.
  (site-standards, Site footer standard.)
*/

.ms-footer {
  padding: var(--ms-space-6) 0 var(--ms-space-7);
  color: var(--ms-color-text-muted);
}

.ms-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ms-space-2);
  margin: 0 0 var(--ms-space-4);
  padding: 0;
  list-style: none;
}

.ms-footer__links li + li::before {
  content: "\00b7";
  margin-right: var(--ms-space-2);
}

.ms-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text-muted);
}

.ms-footer__bar {
  height: 6px;
  margin-bottom: var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  background: linear-gradient(90deg,
    var(--ms-brand-stripe-1) 0 14.29%,
    var(--ms-brand-stripe-2) 14.29% 28.57%,
    var(--ms-brand-stripe-3) 28.57% 42.86%,
    var(--ms-brand-stripe-4) 42.86% 57.14%,
    var(--ms-brand-stripe-5) 57.14% 71.43%,
    var(--ms-brand-stripe-6) 71.43% 85.71%,
    var(--ms-brand-stripe-7) 85.71% 100%);
}

.ms-footer__closing {
  display: grid;
  gap: 0;
  margin: 0;
}

.ms-footer__closing p {
  margin: 0;
}

.ms-footer__closing a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  color: var(--ms-color-link);
}

.ms-footer__product {
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
}

.ms-footer__flag {
  width: auto;
  height: 1em;
  margin-left: 0.25em;
  vertical-align: -0.125em;
}

.ms-footer__motto::before {
  content: var(--ms-brand-motto);
}

/* A centred site centres the block; a left-aligned site leaves it left. */
.ms-footer--center {
  text-align: center;
}

.ms-footer--center .ms-footer__links {
  justify-content: center;
}


/*
  MemberSpark public site styles.
  Everything above this block is the design system, copied verbatim from
  design/system in this repo: tokens.css, then components.css. Refreshing
  the system is copying those two files again; the styles below use only
  --ms-* tokens and system classes, so they take the new skin without a
  rebuild. Page basics (background, text, links, headings, focus) come
  from .ms-page in the components layer; each page puts class="ms-page"
  on its <body>.
*/

/* The colour bar's stripes are the design system's brand stripes:
   --ms-brand-stripe-1..7 in the token layer above. */

* { box-sizing: border-box; }

/* Body and link basics come from .ms-page in the components layer. */

.page {
  max-width: var(--ms-size-page);
  margin: 0 auto;
  padding: var(--ms-space-5) var(--ms-space-gutter) var(--ms-space-7);
}

/* Header: the design system's .ms-header stands on every page (markup in
   the pages). The furniture pass replaced the old .site-header/.site-nav
   word row with it: tabs after the brand, the right-side group with the
   Pilot tag, the theme toggle and the account door. */

/* Home head: mission and tagline */
.hero { padding: var(--ms-space-6) 0 var(--ms-space-5); }
.hero .tagline {
  font-weight: var(--ms-type-weight-medium);
  color: var(--ms-color-text-muted);
  margin: 0 0 var(--ms-space-3);
}
.hero h1 {
  font-family: var(--ms-type-font-display);
  font-size: clamp(var(--ms-type-size-h2), 5vw, var(--ms-type-size-h1));
  line-height: var(--ms-type-line-height-tight);
  font-weight: var(--ms-type-weight-heavy);
  margin: 0;
  max-width: 22em;
  text-wrap: balance;
}

/* One account */
.one-account {
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-space-6);
  margin: var(--ms-space-5) 0 var(--ms-space-7);
}
.one-account h2 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h2);
  line-height: var(--ms-type-line-height-tight);
  margin: 0 0 var(--ms-space-3);
}
.one-account p { max-width: var(--ms-size-reading); margin: 0 0 var(--ms-space-4); }
/* The Sparks diagram is its own piece, still to be drawn: MemberSpark
   at the centre, a lightning bolt (a Spark) to each service that signs in
   (groundwork.md, section g). It carries no box of its own until then. */
.sparks-home { margin: var(--ms-space-4) 0; }
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ms-space-5);
  margin-top: var(--ms-space-5);
}
.benefits h3 {
  font-size: var(--ms-type-size-lg);
  margin: 0 0 var(--ms-space-2);
}
.benefits p { margin: 0; color: var(--ms-color-text-muted); }

/* Apps */
.apps-group { margin: 0 0 var(--ms-space-7); }
.apps-group > h2 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  margin: 0 0 var(--ms-space-4);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--ms-space-4);
}
.tile {
  display: block;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-card);
  padding: var(--ms-space-4) var(--ms-space-5);
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text);
  text-decoration: none;
}
.tile:hover { border-color: var(--ms-color-line-strong); }
.tile .chip {
  display: block;
  width: var(--ms-size-tile);
  height: 6px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-tile-gold);
  margin-bottom: var(--ms-space-3);
}
.tile.c-blue .chip { background: var(--ms-color-tile-blue); }
.tile.c-violet .chip { background: var(--ms-color-tile-violet); }
.tile.c-green .chip { background: var(--ms-color-tile-green); }
.tile.c-coral .chip { background: var(--ms-color-tile-coral); }
.tile h3 { font-size: var(--ms-type-size-lg); margin: 0 0 var(--ms-space-1); }
.tile p { margin: 0; color: var(--ms-color-text-muted); font-size: var(--ms-type-size-base); }

.pointer { color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-6); }

/* About */
.about h1 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h1);
  line-height: var(--ms-type-line-height-tight);
  margin: var(--ms-space-5) 0 var(--ms-space-2);
}
.about .name {
  font-family: var(--ms-type-font-display);
  font-weight: var(--ms-type-weight-heavy);
  font-size: var(--ms-type-size-h3);
  margin: var(--ms-space-5) 0 0;
}
.about .tagline { color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-4); }
.about p { max-width: var(--ms-size-reading); }
.about h2 {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h2);
  margin: var(--ms-space-7) 0 var(--ms-space-3);
}
.about h3 {
  font-size: var(--ms-type-size-lg);
  margin: var(--ms-space-5) 0 var(--ms-space-2);
}
.about .prop { margin: 0 0 var(--ms-space-3); max-width: var(--ms-size-reading); }
.about .prop a { font-weight: var(--ms-type-weight-medium); }
.about .flag { height: 1.05em; width: auto; vertical-align: -0.15em; }
.draft-note {
  background: var(--ms-color-surface-muted);
  border-radius: var(--ms-radius-md);
  padding: var(--ms-space-3) var(--ms-space-4);
}

.breadcrumbs {
  font-size: .9rem;
  margin: .2rem 0 .6rem;
  color: var(--ms-color-text-muted);
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 .2rem;
}
.last-updated {
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
  margin: 0 0 var(--ms-space-3);
}

/* Footer */
.site-footer {
  margin-top: var(--ms-space-7);
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-sm);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--ms-space-5); margin-bottom: var(--ms-space-4); }
.footer-links a { color: var(--ms-color-text); text-decoration: none; font-weight: var(--ms-type-weight-medium); }
.footer-links a:hover { text-decoration: underline; }
.site-footer p { margin: var(--ms-space-2) 0; }
.colour-bar {
  display: flex;
  height: 8px;
  border-radius: var(--ms-radius-pill);
  overflow: hidden;
  margin: var(--ms-space-5) 0 var(--ms-space-4);
}
.colour-bar span { flex: 1; }
.colour-bar .b1 { background: var(--ms-brand-stripe-1); }
.colour-bar .b2 { background: var(--ms-brand-stripe-2); }
.colour-bar .b3 { background: var(--ms-brand-stripe-3); }
.colour-bar .b4 { background: var(--ms-brand-stripe-4); }
.colour-bar .b5 { background: var(--ms-brand-stripe-5); }
.colour-bar .b6 { background: var(--ms-brand-stripe-6); }
.colour-bar .b7 { background: var(--ms-brand-stripe-7); }
.closing .product-line { font-weight: var(--ms-type-weight-bold); color: var(--ms-color-text); }

/* --- Furniture pass (MemberSpark #45; audit #50 tap floor) -----------------
   The header sticks. On a phone the system's second tab row wraps past the
   component's 80px row cap with this site's five tabs, so the cap lifts
   there. The Pilot warning tag stands beside the dark toggle, in the
   system's warning (badge-due) colours, as a 44px target like the buttons
   beside it. Footer links meet the 44px tap floor. */

.ms-header { position: sticky; top: 0; z-index: 20; }

@media (max-width: 40rem) {
  .ms-header__row--tabs { max-height: none; }
}

.pilot-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-3);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-badge-due-bg);
  color: var(--ms-color-badge-due-fg);
  font-size: var(--ms-type-size-sm);
  font-weight: var(--ms-type-weight-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.pilot-tag:hover { text-decoration: underline; }

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}
.site-footer p a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}

/* Feedback form: the fields, button and error text are the system's
   .ms-field/.ms-input/.ms-btn/.ms-error; only the trap and the status
   line are the site's own. */
.feedback-form { max-width: var(--ms-size-reading); }
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status { min-height: 1.4em; font-weight: var(--ms-type-weight-medium); }
.form-status.err { color: var(--ms-color-danger); }

/* Settings: the theme choice is three real buttons; the pressed one
   carries the primary colours. */
.theme-choices { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); }
.theme-choices [aria-pressed="true"] {
  background: var(--ms-color-primary);
  color: var(--ms-color-on-primary);
  border-color: transparent;
}