/* ==========================================================================
   STEADYLINE design system
   One stylesheet. No build step, no framework, no external fonts.

   Contents
     1.  Design tokens (colour, type, space, radius, shadow, motion)
     2.  Reset and base elements
     3.  Layout primitives (container, section, stack, grid, prose)
     4.  Brand lockup (mark + wordmark)
     5.  Buttons
     6.  Forms
     7.  Cards
     8.  Status pills and badges
     9.  Navigation and header
     10. Footer
     11. Page furniture (hero, callout, steps, feature list, rate table, CTA)
     12. Brand reference page (swatches, specimens) - /brand only
     13. Utilities
     14. Print
     15. Reduced motion

   Naming: block__element--modifier. Everything here is reused by the
   customer portal at app.steadyline.org, so nothing is page-specific
   except section 12.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Every colour pair used for text or for a control boundary has been measured
   against WCAG 2.1; ratios are recorded in /brand.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Typeface -------------------------------------------------------- */
  /* System stack only: nothing to download, so the first paint is the only
     paint, even on an old handset with a bad connection. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Type scale ------------------------------------------------------
     Base is 18px. Nothing on the site is below 17px, including footnotes.
     Sized in rem so a reader who has enlarged their system text gets it. */
  --text-fine: 1.0625rem;  /* 17px - footnotes, hints, legal line */
  --text-body: 1.125rem;   /* 18px - default body copy */
  --text-lead: 1.3125rem;  /* 21px - standfirst, card lede */
  --text-h3: 1.375rem;     /* 22px */
  --text-h2: clamp(1.5rem, 1.24rem + 1.1vw, 1.875rem);      /* 24 -> 30px */
  --text-h1: clamp(2rem, 1.55rem + 2.1vw, 2.875rem);        /* 32 -> 46px */
  --text-display: clamp(2.25rem, 1.6rem + 3vw, 3.375rem);   /* 36 -> 54px */

  --lh-tight: 1.14;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;

  /* --- Spacing scale (4px base) ---------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Sizing ---------------------------------------------------------- */
  --tap-min: 2.75rem;        /* 44px, the accessibility floor */
  --control-height: 3rem;    /* 48px, what we actually ship */
  --measure: 36rem;          /* comfortable reading column */
  --container: 70rem;
  --container-narrow: 42rem;  /* ~69 characters at 18px: the legal pages */

  /* --- Radius ---------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* --- Border widths --------------------------------------------------- */
  --border-hairline: 1px;
  --border-control: 2px;

  --duration: 120ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);

  /* ======================================================================
     LIGHT THEME (default)
     Warm paper, not white; deep pine-teal, not startup blue.
     ====================================================================== */

  /* Surfaces */
  --color-canvas: #FBF9F5;         /* page */
  --color-surface: #FFFFFF;        /* cards, inputs */
  --color-sunken: #EDE8DE;         /* banded sections, footer */
  --color-surface-alt: #F2EEE6;    /* subtle inset */

  /* Ink */
  --color-ink: #1B1A17;            /* 16.55:1 on canvas */
  --color-ink-soft: #57534A;       /*  7.28:1 on canvas */
  --color-ink-faint: #6B6558;      /*  5.51:1 on canvas - hints only */

  /* Lines. --line and --line-strong are decorative only. Any boundary that
     identifies a control uses --line-control, which clears 3:1. */
  --color-line: #E3DCCF;
  --color-line-strong: #C2B9A6;
  --color-line-control: #7D766A;   /*  4.28:1 on canvas, 4.50:1 on surface */

  /* Brand */
  --color-brand: #0F5A54;          /*  7.65:1 on canvas */
  --color-brand-hover: #0B4741;
  --color-brand-ink: #FFFFFF;      /*  8.04:1 on brand */
  --color-brand-tint: #E3F0EE;
  --color-brand-line: #9CC6C1;   /* decorative card edge only, never a control */

  /* Warm secondary, used sparingly for emphasis, never for status */
  --color-accent: #8C3F1D;         /*  7.02:1 on canvas */
  --color-accent-tint: #F6E7DE;

  /* Status. Always paired with a shape and a word, never colour alone. */
  --color-ok: #196B4A;             /*  6.16:1 on canvas */
  --color-ok-tint: #E2F0E7;
  --color-warn: #8A5A00;           /*  5.64:1 on canvas */
  --color-warn-tint: #F7ECD6;
  --color-danger: #A32A1E;         /*  6.87:1 on canvas */
  --color-danger-hover: #8A2118;
  --color-danger-ink: #FFFFFF;     /*  7.22:1 on danger, 9.09:1 on hover */
  --color-danger-tint: #FAE6E3;
  --color-neutral-tint: #EDE8DE;
  --color-neutral-ink: #4A463D;    /*  7.70:1 on neutral tint */

  /* Focus. Maximum available contrast against every surface we ship,
     drawn outside the element so it never sits on a coloured fill. */
  --color-focus: #1B1A17;

  --shadow-1: 0 1px 2px rgba(27, 26, 23, 0.06),
              0 2px 8px rgba(27, 26, 23, 0.05);
  --shadow-2: 0 2px 4px rgba(27, 26, 23, 0.07),
              0 10px 26px rgba(27, 26, 23, 0.08);
}

/* ==========================================================================
   DARK THEME
   Warm charcoal rather than pure black: less halation for older eyes.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #191714;
    --color-surface: #221F1B;
    --color-sunken: #141210;
    --color-surface-alt: #262219;

    --color-ink: #F4F1EA;          /* 15.86:1 on canvas */
    --color-ink-soft: #BDB5A6;     /*  8.79:1 on canvas */
    --color-ink-faint: #A9A192;    /*  6.98:1 on canvas */

    --color-line: #332E27;
    --color-line-strong: #4A443A;
    --color-line-control: #7A7365; /*  3.81:1 on canvas, 3.49:1 on surface */

    --color-brand: #74C9BE;        /*  9.23:1 on canvas */
    --color-brand-hover: #93D8CF;
    --color-brand-ink: #12211F;    /*  8.58:1 on brand */
    --color-brand-tint: #17342F;
    --color-brand-line: #2F5A54;

    --color-accent: #E39468;       /*  7.41:1 on canvas */
    --color-accent-tint: #33211A;

    --color-ok: #6FC08D;           /*  8.18:1 on canvas */
    --color-ok-tint: #14291D;
    --color-warn: #D7A64A;         /*  8.04:1 on canvas */
    --color-warn-tint: #2C2312;
    --color-danger: #F08A7C;       /*  7.35:1 on canvas */
    --color-danger-hover: #F5A79B;
    /* Dark mode inverts the danger button: the fill is light, so its text has
       to go dark. Hard-coding white here is the classic dark-mode failure. */
    --color-danger-ink: #2B120E;   /*  7.22:1 on danger, 9.10:1 on hover */
    --color-danger-tint: #311915;
    --color-neutral-tint: #2A2620;
    --color-neutral-ink: #CFC7B8;  /*  8.96:1 on neutral tint */

    --color-focus: #F4F1EA;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-snug); }
h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
h4 {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.35em; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-semibold); }

/* 1em, not the browser default: monospace otherwise renders at 13px, which
   would put it under the 17px floor this site holds itself to. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 1em;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.3em;
  overflow-wrap: break-word;
}

/* Links carry an underline everywhere in running text: colour is never the
   only thing that marks a link. */
a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--color-brand-hover); text-decoration-thickness: 0.14em; }

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--color-line);
  margin: var(--space-6) 0;
}

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

blockquote { margin: 0; }

abbr[title] { text-decoration-thickness: 0.08em; }

/* --- Focus -----------------------------------------------------------------
   The plain :focus rule ships first so browsers without :focus-visible (an
   old Android WebView, for instance) still show a ring. The second rule is
   dropped wholesale by those browsers because they cannot parse the
   selector, which is exactly the fallback we want. */

:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-brand-tint);
  color: var(--color-ink);
}

/* Skip link: first thing in the tab order on every page. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-control) solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* Visually hidden but announced. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
/* The narrow container IS the reading measure, so anything inside it that
   caps its own width would push the column off centre. */
.container--narrow { max-width: var(--container-narrow); }
.container--narrow .prose,
.container--narrow .lede,
.container--narrow .measure { max-width: none; }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--sunken {
  background: var(--color-sunken);
  border-block: var(--border-hairline) solid var(--color-line);
}

@media (min-width: 48rem) {
  .section { padding-block: var(--space-9); }
  .section--tight { padding-block: var(--space-8); }
}

/* Vertical rhythm helper: consistent gaps without margin collapse guesswork. */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-3); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-7); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 58rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 57.99rem) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Running text column, capped for readability. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }
.prose li { line-height: var(--lh-body); }

.eyebrow {
  font-size: var(--text-fine);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0;
}

.lede {
  font-size: var(--text-lead);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}

/* Utilities live at the end of the stylesheet, in section 13. */

/* ==========================================================================
   4. BRAND LOCKUP
   The mark is a rail: one unbroken level line with both ends turned down so
   it cannot shift. See /brand for the rationale.
   ========================================================================== */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  min-height: var(--tap-min);
}
.wordmark:hover { color: var(--color-ink); }

.wordmark__name {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.wordmark--sm { gap: var(--space-2); }
.wordmark--sm .wordmark__name { font-size: 1.1875rem; }

.mark { display: block; flex: none; }
.mark__tile { fill: var(--color-brand); }
.mark__rail {
  fill: none;
  stroke: var(--color-brand-ink);
  stroke-width: 5.5;
  stroke-linecap: round;
}
/* Knockout variant: mark drawn in ink on a transparent tile, for print and
   for anywhere the teal tile would fight the background. */
.mark--outline .mark__tile { fill: none; }
.mark--outline .mark__rail { stroke: var(--color-ink); }

/* ==========================================================================
   5. BUTTONS
   Three weights: primary (one per view), secondary, quiet.
   All are >= 48px tall and >= 44px wide, which is above the 44px floor.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-fine);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background-color var(--duration) var(--easing),
              border-color var(--duration) var(--easing),
              color var(--duration) var(--easing);
}

.btn--primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-ink);
}
.btn--primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-brand-ink);
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.btn--secondary:hover {
  background: var(--color-brand-tint);
  color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.btn--quiet {
  background: none;
  border-color: transparent;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
.btn--quiet:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-ink);
}
.btn--danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--color-danger-ink);
}

.btn--lg {
  min-height: 3.5rem;
  padding-inline: var(--space-6);
  font-size: var(--text-body);
}

.btn--block { display: flex; width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ==========================================================================
   6. FORMS
   Every control has a real <label>. Errors are announced in text as well as
   shown in colour, and are prefixed with a word, never just a red border.
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }

.label {
  font-size: var(--text-fine);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
}
.label__optional {
  font-weight: var(--fw-regular);
  color: var(--color-ink-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-control) solid var(--color-line-control);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--lh-snug);
}
.textarea { min-height: 7rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--space-7);
  /* Chevron drawn with borders so there is no image request. */
  background-image: none;
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.4rem;
  border-right: var(--border-control) solid var(--color-ink);
  border-bottom: var(--border-control) solid var(--color-ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--color-ink-faint); opacity: 1; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--color-ink-soft); }

.hint {
  font-size: var(--text-fine);
  color: var(--color-ink-faint);
  line-height: var(--lh-snug);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-fine);
  font-weight: var(--fw-semibold);
  color: var(--color-danger);
  line-height: var(--lh-snug);
}
/* The marker is a shape, and the message always begins with a word, so the
   error survives greyscale and colour blindness. */
.field-error::before {
  content: "";
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.16rem;
  border: var(--border-control) solid currentColor;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(currentColor, currentColor) center / 0.14rem 0.42rem no-repeat;
}

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea,
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  background: var(--color-danger-tint);
}

/* The row itself is the <label>, so the whole strip is the tap target rather
   than the box alone. Shipped as a 28px box inside a >=44px full-width row. */
label.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding-block: var(--space-3);
  line-height: var(--lh-snug);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  accent-color: var(--color-brand);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  padding: 0;
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
@media (min-width: 40rem) {
  .card { padding: var(--space-6); }
}

.card--flat { box-shadow: none; }
.card--sunken {
  background: var(--color-surface-alt);
  box-shadow: none;
  border-color: var(--color-line-strong);
}
.card--brand {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-line);
  box-shadow: none;
}
.card--raised { box-shadow: var(--shadow-2); }

.card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.card__meta {
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
}
.card > :last-child { margin-bottom: 0; }

/* ==========================================================================
   8. STATUS PILLS AND BADGES
   Colour is a reinforcement, never the message. Each state has its own
   shape marker and always carries a word.
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline) solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-fine);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.pill__dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: currentColor;
}

.pill--ok {
  color: var(--color-ok);
  background: var(--color-ok-tint);
}
.pill--ok .pill__dot { border-radius: var(--radius-pill); }

.pill--pending {
  color: var(--color-warn);
  background: var(--color-warn-tint);
}
/* Hollow ring: reads as "not finished yet" without relying on amber. */
.pill--pending .pill__dot {
  border-radius: var(--radius-pill);
  background: none;
  border: 0.2rem solid currentColor;
}

.pill--attention {
  color: var(--color-danger);
  background: var(--color-danger-tint);
}
/* Diamond. */
.pill--attention .pill__dot { transform: rotate(45deg); }

.pill--info {
  color: var(--color-brand);
  background: var(--color-brand-tint);
}
.pill--info .pill__dot { border-radius: 0.15rem; }

.pill--neutral {
  color: var(--color-neutral-ink);
  background: var(--color-neutral-tint);
}
.pill--neutral .pill__dot {
  border-radius: 0.15rem;
  background: none;
  border: 0.2rem solid currentColor;
}

/* Placeholder badge: used wherever a number on this site is not real yet. */
.badge-placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-control) dashed var(--color-warn);
  border-radius: var(--radius-sm);
  background: var(--color-warn-tint);
  color: var(--color-warn);
  font-size: var(--text-fine);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   9. NAVIGATION AND HEADER
   No JavaScript: the bar wraps onto extra rows on a narrow screen rather
   than hiding behind a menu button that has to be discovered.
   ========================================================================== */

.site-header {
  background: var(--color-canvas);
  border-bottom: var(--border-hairline) solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}

.site-nav { flex: 1 1 100%; order: 3; }
@media (min-width: 58rem) {
  .site-nav { flex: 1 1 auto; order: 0; }
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links li { margin: 0; }

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-fine);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover {
  color: var(--color-brand-hover);
  border-bottom-color: currentColor;
}
/* Current page is marked by weight and a rule, not by colour alone, and is
   also announced through aria-current in the markup. */
.nav-links a[aria-current="page"] {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  border-bottom-color: var(--color-brand);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
/* On a small handset the two entry points get their own full-width row
   rather than being crushed against the wordmark. */
@media (max-width: 26rem) {
  .nav-actions { flex: 1 1 100%; margin-left: 0; }
  .nav-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  flex: none;
  margin-top: var(--space-7);
  background: var(--color-sunken);
  border-top: var(--border-hairline) solid var(--color-line-strong);
  padding-block: var(--space-7) var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-fine);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin: 0; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-ink);
  font-size: var(--text-fine);
}

.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--color-line-strong);
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
}
.footer-legal a { color: var(--color-ink-soft); }

/* ==========================================================================
   11. PAGE FURNITURE
   ========================================================================== */

.hero { padding-block: var(--space-8) var(--space-7); }
@media (min-width: 48rem) {
  .hero { padding-block: var(--space-9) var(--space-8); }
}
.hero__title {
  font-size: var(--text-display);
  margin-block: var(--space-4) var(--space-5);
  max-width: 18ch;
}
.hero__lede { font-size: var(--text-lead); }

.page-head { padding-block: var(--space-7) var(--space-6); }
.page-head h1 { margin-bottom: var(--space-3); }

/* Callout: an aside that must be read. Carries a heading word, so the
   colour is redundant. */
.callout {
  border: var(--border-control) solid var(--color-line-strong);
  border-left-width: 6px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
}
.callout__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
.callout--warn {
  border-color: var(--color-warn);
  background: var(--color-warn-tint);
  color: var(--color-ink);
}
.callout--warn .callout__title { color: var(--color-warn); }
.callout--urgent {
  border-color: var(--color-danger);
  background: var(--color-danger-tint);
  color: var(--color-ink);
}
.callout--urgent .callout__title { color: var(--color-danger); }
.callout--brand {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}
.callout--brand .callout__title { color: var(--color-brand); }
.callout > :last-child { margin-bottom: 0; }

/* Numbered steps. The number is a real ordered-list value so it is read out
   correctly, and it is drawn large because the audience is scanning. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-brand-ink);
  font-size: var(--text-lead);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.steps h3 { margin-bottom: var(--space-2); }

/* Checklist with a drawn tick, so the meaning does not depend on a glyph
   font being present. */
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-3);
}
.list-plain > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5rem;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 3px solid var(--color-brand);
  border-bottom: 3px solid var(--color-brand);
  transform: rotate(-45deg);
}
/* Negative variant: a drawn cross, for "what she will not do". */
.list-plain--no > li::before {
  width: 0.9rem;
  height: 0.9rem;
  top: 0.45rem;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent 43%, var(--color-accent) 43%, var(--color-accent) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--color-accent) 43%, var(--color-accent) 57%, transparent 57%);
}

/* Rate table used on /pricing. Becomes stacked rows on a narrow screen so
   nothing is squeezed below 17px. */
.rate-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.rate-table caption {
  text-align: left;
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
  padding-bottom: var(--space-3);
}
.rate-table th,
.rate-table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-line-strong);
  vertical-align: top;
}
.rate-table thead th {
  font-size: var(--text-fine);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  border-bottom-width: 2px;
}
.rate-table tbody th { font-weight: var(--fw-semibold); }
.rate-table td:last-child, .rate-table th:last-child { padding-right: 0; }
.rate-table td:first-child, .rate-table th:first-child { padding-left: 0; }

@media (max-width: 39.99rem) {
  .rate-table, .rate-table tbody, .rate-table tr, .rate-table td, .rate-table th {
    display: block;
  }
  .rate-table thead { display: none; }
  .rate-table tr {
    padding-block: var(--space-4);
    border-bottom: var(--border-hairline) solid var(--color-line-strong);
  }
  .rate-table th, .rate-table td {
    border: 0;
    padding: 0 0 var(--space-2);
  }
}

/* Key/value list, used for the definitions on /pricing and /how-it-works. */
.kv { margin: 0; }
.kv dt {
  font-weight: var(--fw-semibold);
  margin-top: var(--space-5);
}
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: var(--space-2) 0 0; color: var(--color-ink-soft); }

/* Quoted example of what Maya says on a call. */
.quote {
  border-left: 6px solid var(--color-brand);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5);
  font-size: var(--text-lead);
  line-height: var(--lh-snug);
}
.quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-fine);
  font-style: normal;
  color: var(--color-ink-soft);
}

/* End-of-page call to action. */
.cta-band {
  background: var(--color-brand);
  color: var(--color-brand-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
}
@media (min-width: 40rem) {
  .cta-band { padding: var(--space-8) var(--space-7); }
}
.cta-band h2 { color: var(--color-brand-ink); }
.cta-band p { color: var(--color-brand-ink); }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--primary {
  background: var(--color-brand-ink);
  border-color: var(--color-brand-ink);
  color: var(--color-brand);
}
.cta-band .btn--primary:hover {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-tint);
  color: var(--color-brand-hover);
}
.cta-band .btn--secondary {
  background: transparent;
  border-color: var(--color-brand-ink);
  color: var(--color-brand-ink);
}
.cta-band .btn--secondary:hover {
  background: var(--color-brand-hover);
  color: var(--color-brand-ink);
  border-color: var(--color-brand-ink);
}
/* On this dark panel the standard ink focus ring would disappear. */
.cta-band :focus { outline-color: var(--color-brand-ink); }
.cta-band :focus-visible { outline-color: var(--color-brand-ink); }

/* ==========================================================================
   12. BRAND REFERENCE PAGE
   Only used by /brand. Kept here so every page still ships one stylesheet.
   ========================================================================== */

.swatch-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.swatch {
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.swatch__chip {
  height: 5rem;
  border-bottom: var(--border-hairline) solid var(--color-line-strong);
}
.swatch__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.swatch__name {
  font-weight: var(--fw-semibold);
  font-size: var(--text-fine);
  display: block;
}
.swatch__token,
.swatch__ratio {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
  word-break: break-all;
}

.chip-canvas       { background: var(--color-canvas); }
.chip-surface      { background: var(--color-surface); }
.chip-sunken       { background: var(--color-sunken); }
.chip-surface-alt  { background: var(--color-surface-alt); }
.chip-ink          { background: var(--color-ink); }
.chip-ink-soft     { background: var(--color-ink-soft); }
.chip-ink-faint    { background: var(--color-ink-faint); }
.chip-line         { background: var(--color-line); }
.chip-line-strong  { background: var(--color-line-strong); }
.chip-line-control { background: var(--color-line-control); }
.chip-brand        { background: var(--color-brand); }
.chip-brand-hover  { background: var(--color-brand-hover); }
.chip-brand-tint   { background: var(--color-brand-tint); }
.chip-accent       { background: var(--color-accent); }
.chip-accent-tint  { background: var(--color-accent-tint); }
.chip-ok           { background: var(--color-ok); }
.chip-warn         { background: var(--color-warn); }
.chip-danger       { background: var(--color-danger); }
.chip-neutral      { background: var(--color-neutral-tint); }

.specimen {
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
}
.specimen + .specimen { margin-top: var(--space-4); }
.specimen__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}
.specimen__sample { display: block; letter-spacing: var(--tracking-tight); }
.sz-fine    { font-size: var(--text-fine); }
.sz-body    { font-size: var(--text-body); }
.sz-lead    { font-size: var(--text-lead); }
.sz-h3      { font-size: var(--text-h3); font-weight: var(--fw-semibold); }
.sz-h2      { font-size: var(--text-h2); font-weight: var(--fw-bold); }
.sz-h1      { font-size: var(--text-h1); font-weight: var(--fw-bold); }
.sz-display { font-size: var(--text-display); font-weight: var(--fw-bold); }

.space-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}
.space-row__bar { height: 1rem; background: var(--color-brand); border-radius: 2px; }
.space-row__label { font-family: var(--font-mono); font-size: var(--text-fine); }
.sp-1 { width: var(--space-1); } .sp-2 { width: var(--space-2); }
.sp-3 { width: var(--space-3); } .sp-4 { width: var(--space-4); }
.sp-5 { width: var(--space-5); } .sp-6 { width: var(--space-6); }
.sp-7 { width: var(--space-7); } .sp-8 { width: var(--space-8); }
.sp-9 { width: var(--space-9); } .sp-10 { width: var(--space-10); }

/* Forced-theme panels so both logo lock-ups can be seen side by side
   regardless of which theme the viewer is in. */
.theme-panel {
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
/* These panels force a whole theme, not just two tokens: anything inside them
   that reaches for a surface or a line token has to get the forced theme's
   value, or a code chip ends up with the other theme's background. */
.theme-panel--light {
  background: #FBF9F5;
  color: #1B1A17;
  --color-canvas: #FBF9F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2EEE6;
  --color-sunken: #EDE8DE;
  --color-brand: #0F5A54;
  --color-brand-ink: #FFFFFF;
  --color-ink: #1B1A17;
  --color-ink-soft: #57534A;
  --color-line: #E3DCCF;
  --color-line-strong: #C2B9A6;
}
.theme-panel--dark {
  background: #191714;
  color: #F4F1EA;
  --color-canvas: #191714;
  --color-surface: #221F1B;
  --color-surface-alt: #262219;
  --color-sunken: #141210;
  --color-brand: #74C9BE;
  --color-brand-ink: #12211F;
  --color-ink: #F4F1EA;
  --color-ink-soft: #BDB5A6;
  --color-line: #332E27;
  --color-line-strong: #4A443A;
}
.theme-panel .wordmark { color: inherit; }
.theme-panel__caption {
  font-size: var(--text-fine);
  color: inherit;
  opacity: 0.85;
}

.do-dont { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .do-dont { grid-template-columns: 1fr 1fr; } }
.do-dont__col { border-radius: var(--radius-md); padding: var(--space-5); }
.do-dont__col--do {
  background: var(--color-ok-tint);
  border: var(--border-hairline) solid var(--color-ok);
}
.do-dont__col--dont {
  background: var(--color-danger-tint);
  border: var(--border-hairline) solid var(--color-danger);
}
.do-dont h3 { margin-bottom: var(--space-3); }

/* The wordmark as a single self-contained SVG asset. The letterforms are set
   in the system stack rather than converted to paths so the lockup stays live
   text: selectable, translatable, and free to load. overflow is visible so a
   platform whose system face runs wide is never clipped. */
.wordmark-asset { overflow: visible; height: auto; }
.wordmark-asset__text {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  fill: var(--color-ink);
}

.mark-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
}
.mark-sizes figure { margin: 0; text-align: center; }
.mark-sizes figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--color-ink-soft);
}

.token-note {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  background: var(--color-surface-alt);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* ==========================================================================
   13. UTILITIES
   Last on purpose. Several components zero their own margins, so a utility
   declared earlier would silently lose to them at equal specificity.
   Deliberately few: the scale does the work, and no page carries a style
   attribute, which is what lets the Content-Security-Policy stay strict.
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.measure { max-width: var(--measure); }
.center { text-align: center; }
.text-fine { font-size: var(--text-fine); }
.text-soft { color: var(--color-ink-soft); }

/* ==========================================================================
   14. PRINT
   A pharmacy may print or fax a page. Force the light palette, drop the
   furniture, and expose link targets.
   ========================================================================== */

@media print {
  :root {
    --color-canvas: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-sunken: #FFFFFF;
    --color-surface-alt: #FFFFFF;
    --color-ink: #000000;
    --color-ink-soft: #222222;
    --color-ink-faint: #333333;
    --color-line: #999999;
    --color-line-strong: #666666;
    --color-line-control: #000000;
    --color-brand: #000000;
    --color-brand-ink: #FFFFFF;
    --color-brand-tint: #FFFFFF;
    --shadow-1: none;
    --shadow-2: none;
  }
  body { font-size: 12pt; }
  .site-header,
  .site-footer,
  .cta-band,
  .nav-actions,
  .skip-link { display: none !important; }
  .card, .callout, .quote { border: 1pt solid #666666; break-inside: avoid; }
  .prose a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .prose a[href^="#"]::after,
  .prose a[href^="mailto:"]::after { content: ""; }
  h1, h2, h3 { break-after: avoid; }
}

/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}