/* ============================================================
   Precise Impact AI: the site's stylesheet (APP-662).
   GENERATED by scripts/build-styles.mjs from
   design/brands/precise-impact-ai/tokens.json. Do not edit by hand:
   change the design system, copy its tokens.json in, and run
   npm run build:styles. tests/build-styles.test.ts fails if this file
   and the script's output differ.
   Design system version 1.
   ============================================================ */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---- Colour ---- */
  --pi-canvas: #F5F7FB; /* App and admin page background behind white cards. Pale cool grey, never pure grey. */
  --pi-surface: #FFFFFF; /* Default ground for the website, cards, forms, navigation, dialogs, documents and slides. */
  --pi-surface-subtle: #EDF2FF; /* Pale blue for selected rows, supporting panels, callouts and Grow/Organise tints. Text on it: `text` or `action`. */
  --pi-text: #14243D; /* Navy. All headings and body copy on `surface`, `canvas` and `surface-subtle` (15.6:1 on white). Also the ground of dark statement slides. */
  --pi-text-secondary: #52627A; /* Supporting copy, captions, helper text, table headers on `surface` and `canvas` (5.8:1 on canvas). */
  --pi-border: #DDE4EF; /* Decorative dividers and card outlines only. Never the only boundary of a control (too faint). */
  --pi-control-border: #8796AB; /* Visible boundaries of inputs, secondary buttons and checkboxes (3.0:1 on white). */
  --pi-action: #2455D6; /* Primary buttons, links, active navigation, Grow and Organise. White text on it reads 6.3:1. */
  --pi-action-hover: #1B43B4; /* Primary button hover. */
  --pi-action-pressed: #173995; /* Primary button pressed. */
  --pi-on-action: #FFFFFF; /* Text and icons on `action`, `action-hover`, `action-pressed`, `violet` and `text` grounds. */
  --pi-violet: #6546B8; /* Eyebrow labels, Run and Systemise, handout and appendix primary colour. Text on `surface` or `violet-bg` (5.9:1). */
  --pi-violet-bg: #F1EDFB; /* Pale violet for Run/Systemise tints, handout callouts and violet tags. */
  --pi-focus: var(--pi-violet); /* Keyboard focus ring: 3px solid outline, 3px offset, on every interactive element. */
  --pi-brand-cyan: #00C3FF; /* Identity cyan. Start of the brand gradient, eyebrows on navy statement slides. Decorative on white: never small text on a light ground. */
  --pi-brand-periwinkle: #6F78FF; /* Identity periwinkle. End of the brand gradient. Decorative only. */
  --pi-accent-cyan: #009CC0; /* Darker cyan for small decorative marks on white (icons, sparkles). Not for body text. */
  --pi-handout-violet-light: #B19CF5; /* Start of the violet handout bar (gradient to `violet`). Decorative only. */
  --pi-statement-muted: #C9D6EA; /* Secondary copy on navy statement slides and dark bands (on `text` ground). */
  --pi-success: #146B4D; /* Success text and icons; Invent and Optimise. Reads on `surface` and `success-bg`. */
  --pi-success-bg: #EAF6EF; /* Success background; Invent/Optimise tints; 'what we decided' cards. */
  --pi-warning: #855115; /* Warning text and icons on `warning-bg`; 'what changed our mind' cards; inline instructions for staff. */
  --pi-warning-bg: #FFF5E4; /* Warning background. */
  --pi-error: #AB3043; /* Error text, invalid input borders and the crossed-out price line. */
  --pi-error-bg: #FFF0F2; /* Error background. */
  --pi-info: #254C93; /* Information text on `info-bg`. */
  --pi-info-bg: #F0F5FF; /* Information background, notes and blockquotes. */
  --pi-neutral: #52627A; /* Neutral status text on `neutral-bg`. */
  --pi-neutral-bg: #EFF2F7; /* Neutral status background. */
  --pi-disabled-text: #647187; /* Inactive labels. Pair with an explanation where needed. */
  --pi-disabled-bg: #EEF1F6; /* Inactive control fill. */
  --pi-disabled-border: #CCD5E2; /* Inactive control boundary. */
  --pi-chart-primary: var(--pi-action); /* First data series. */
  --pi-chart-secondary: var(--pi-violet); /* Second data series. */
  --pi-chart-tertiary: var(--pi-success); /* Third data series. */
  --pi-chart-muted: #CCDAF8; /* Context bars; always with readable values or a table beside them. */
  --pi-grow: var(--pi-action); /* Grow road and Organise phase: labels, borders, arrows. Tint: `grow-bg`. */
  --pi-grow-bg: var(--pi-surface-subtle); /* Grow / Organise card tint. */
  --pi-run: var(--pi-violet); /* Run road and Systemise phase. Tint: `run-bg`. */
  --pi-run-bg: var(--pi-violet-bg); /* Run / Systemise card tint. */
  --pi-invent: var(--pi-success); /* Invent road and Optimise phase. Tint: `invent-bg`. */
  --pi-invent-bg: var(--pi-success-bg); /* Invent / Optimise card tint. */

  /* ---- Type ---- */
  --pi-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pi-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pi-display-size: 56px;
  --pi-display-line: 1.05;
  --pi-display-weight: 600;
  --pi-display-tracking: -0.035em;
  --pi-h1-size: 32px;
  --pi-h1-line: 1.2;
  --pi-h1-weight: 600;
  --pi-h1-tracking: -0.02em;
  --pi-h2-size: 24px;
  --pi-h2-line: 1.2;
  --pi-h2-weight: 600;
  --pi-h3-size: 18px;
  --pi-h3-line: 1.3;
  --pi-h3-weight: 600;
  --pi-body-size: 16px;
  --pi-body-line: 1.55;
  --pi-body-weight: 400;
  --pi-body-strong-size: 16px;
  --pi-body-strong-line: 1.55;
  --pi-body-strong-weight: 600;
  --pi-small-size: 13px;
  --pi-small-line: 1.45;
  --pi-small-weight: 400;
  --pi-eyebrow-size: 12px;
  --pi-eyebrow-line: 1.3;
  --pi-eyebrow-weight: 700;
  --pi-eyebrow-tracking: 0.08em;

  /* ---- Space, shape and depth ---- */
  --pi-space-4: 4px; /* Icon-to-label gaps, tag padding. */
  --pi-space-8: 8px; /* Tight stacks, button icon gap. */
  --pi-space-12: 12px; /* Input padding, list gaps. */
  --pi-space-16: 16px; /* Default gap; phone side gutter. */
  --pi-space-24: 24px; /* Card padding, gaps between cards. */
  --pi-space-32: 32px; /* Section padding inside panels; desktop gutter. */
  --pi-space-48: 48px; /* Between page sections. */
  --pi-space-64: 64px; /* Large section breaks. */
  --pi-space-96: 96px; /* Hero spacing on the website. */
  --pi-radius-tag: 6px; /* Tags and segmented options. */
  --pi-radius-control: 8px; /* Buttons, inputs, code blocks. */
  --pi-radius-card: 12px; /* Cards, panels, slide cards, callouts. */
  --pi-radius-dialog: 16px; /* Dialogs and large feature panels. */
  --pi-radius-pill: 999px; /* Stage pills, badges, loop steps. */
  --pi-shadow-small: 0 1px 3px #14243D12; /* Resting cards that need lifting off `canvas`. */
  --pi-shadow-medium: 0 4px 12px #14243D12; /* Hovered cards, dropdowns. */
  --pi-shadow-overlay: 0 16px 64px #14243D20, 0 3px 10px #14243D0D; /* Dialogs and popovers only. */
}

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

body {
  margin: 0;
  background: var(--pi-surface);
  color: var(--pi-text);
  font-family: var(--pi-font-body);
  font-size: var(--pi-body-size);
  line-height: var(--pi-body-line);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--pi-font-display);
  color: var(--pi-text);
  font-weight: var(--pi-h1-weight);
  line-height: var(--pi-h1-line);
  margin: 0 0 var(--pi-space-12);
}
h1 { font-size: var(--pi-h1-size); letter-spacing: var(--pi-h1-tracking); }
h2 { font-size: var(--pi-h2-size); line-height: var(--pi-h2-line); }
h3 { font-size: var(--pi-h3-size); line-height: var(--pi-h3-line); }
h4 { font-size: var(--pi-body-size); line-height: var(--pi-h3-line); }

p { margin: 0 0 var(--pi-space-12); max-width: 68ch; }
small, .small { font-size: var(--pi-small-size); line-height: var(--pi-small-line); color: var(--pi-text-secondary); }
a { color: var(--pi-action); }
a:hover { color: var(--pi-action-hover); }
b, strong { font-weight: var(--pi-body-strong-weight); }

ul, ol { padding-left: var(--pi-space-24); max-width: 66ch; }
li { margin-bottom: var(--pi-space-4); }
li::marker { color: var(--pi-text-secondary); }

code { font-family: var(--pi-font-mono); font-size: .88em;
       background: var(--pi-canvas); padding: 2px 6px; border-radius: var(--pi-radius-tag); }

::selection { background: var(--pi-surface-subtle); color: var(--pi-text); }

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

.hr { border: none; border-top: 1px solid var(--pi-border); margin: var(--pi-space-32) 0; }

.eyebrow { font-size: var(--pi-eyebrow-size); font-weight: var(--pi-eyebrow-weight); line-height: var(--pi-eyebrow-line);
           letter-spacing: var(--pi-eyebrow-tracking); text-transform: uppercase; color: var(--pi-violet); margin: 0 0 var(--pi-space-8); }

/* ============================================================
   Buttons and tags
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pi-space-8);
  min-height: 42px; padding: 10px 18px; border: 1px solid var(--pi-control-border);
  border-radius: var(--pi-radius-control); background: var(--pi-surface); color: var(--pi-text);
  font-family: var(--pi-font-body); font-weight: var(--pi-body-strong-weight); font-size: var(--pi-body-size); line-height: 1.3;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--pi-canvas); }
.btn-primary { background: var(--pi-action); border-color: var(--pi-action); color: var(--pi-on-action); }
.btn-primary:hover { background: var(--pi-action-hover); border-color: var(--pi-action-hover); color: var(--pi-on-action); }
.btn-primary:active { background: var(--pi-action-pressed); border-color: var(--pi-action-pressed); }

.btn-secondary { color: var(--pi-action); }
.btn-secondary:hover { color: var(--pi-action-hover); background: var(--pi-surface-subtle); }
.btn-secondary:active { background: var(--pi-surface-subtle); border-color: var(--pi-action); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--pi-action); }
.btn-ghost:hover { background: var(--pi-surface-subtle); color: var(--pi-action-hover); }
.btn-ghost:active { background: var(--pi-surface-subtle); }

.btn-icon { padding: 10px; width: 44px; height: 44px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--pi-disabled-bg); border-color: var(--pi-disabled-border);
                                            color: var(--pi-disabled-text); cursor: not-allowed; pointer-events: none; }

.tag { display: inline-block; font-family: var(--pi-font-body); font-size: var(--pi-small-size); font-weight: var(--pi-body-strong-weight);
       line-height: 1.4; padding: 4px 10px; border-radius: var(--pi-radius-tag); margin-right: var(--pi-space-4); }
.tag-accent    { background: var(--pi-violet-bg); color: var(--pi-violet); }
.tag-accent-2  { background: var(--pi-surface-subtle); color: var(--pi-action); }
.tag-neutral   { background: var(--pi-neutral-bg); color: var(--pi-neutral); }
.tag-outline   { background: none; border: 1px solid var(--pi-control-border); color: var(--pi-text-secondary); }
.tag-success   { background: var(--pi-success-bg); color: var(--pi-success); }
.tag-warning   { background: var(--pi-warning-bg); color: var(--pi-warning); }
.tag-error     { background: var(--pi-error-bg); color: var(--pi-error); }

/* Proposal module tags */
.tag-included { background: var(--pi-text); color: var(--pi-on-action); }
.tag-optional { background: var(--pi-violet-bg); color: var(--pi-violet); }
.tag-not      { background: var(--pi-neutral-bg); color: var(--pi-neutral); }

/* ============================================================
   Surfaces: panels, notes, cards
   ============================================================ */
.panel { background: var(--pi-surface-subtle); border-radius: var(--pi-radius-card); padding: var(--pi-space-16) var(--pi-space-24); }

.note { background: var(--pi-surface-subtle); border-left: 5px solid var(--pi-action);
        padding: var(--pi-space-16) 20px; border-radius: var(--pi-radius-card); }

.card { background: var(--pi-surface); border: 1px solid var(--pi-border);
        border-radius: var(--pi-radius-card); padding: var(--pi-space-24); }
.card-kicker { font-size: var(--pi-eyebrow-size); font-weight: var(--pi-eyebrow-weight); line-height: var(--pi-eyebrow-line);
               letter-spacing: var(--pi-eyebrow-tracking); text-transform: uppercase; color: var(--pi-violet); margin: 0 0 var(--pi-space-8); }
.card-title  { font-family: var(--pi-font-display); font-weight: var(--pi-h3-weight); font-size: var(--pi-h3-size);
               line-height: var(--pi-h3-line); color: var(--pi-text); margin: 0 0 var(--pi-space-8); }
.card-body   { margin: 0 0 var(--pi-space-12); }
.card-meta   { font-size: var(--pi-small-size); color: var(--pi-text-secondary); margin: 0; }
.elev-sm { box-shadow: var(--pi-shadow-small); }
.elev-md { box-shadow: var(--pi-shadow-medium); }
.elev-lg { box-shadow: var(--pi-shadow-medium); }

/* A dark statement band: navy ground, white type, kept rare. */
.dark { background: var(--pi-text); color: var(--pi-on-action); padding: var(--pi-space-32); border-radius: var(--pi-radius-card); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--pi-on-action); }
.dark p { color: var(--pi-statement-muted); }
.dark .eyebrow, .dark .card-kicker { color: var(--pi-brand-cyan); }
.dark a:not(.btn) { color: var(--pi-on-action); }
.dark .tag-accent-2 { background: transparent; border: 1px solid var(--pi-brand-cyan); color: var(--pi-brand-cyan); }
.dark .tag-outline { border-color: var(--pi-statement-muted); color: var(--pi-on-action); }
.dark .btn-secondary, .dark .btn-ghost { background: transparent; color: var(--pi-on-action); border-color: var(--pi-on-action); }
.dark .btn-ghost { border-color: transparent; }

/* ============================================================
   Table
   ============================================================ */
.table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table th, .table td { padding: var(--pi-space-12) var(--pi-space-16); border-bottom: 1px solid var(--pi-border); text-align: left; }
.table th { background: var(--pi-canvas); color: var(--pi-text-secondary); font-weight: var(--pi-body-strong-weight); }
.table tr.total td { background: var(--pi-surface-subtle); font-weight: var(--pi-body-strong-weight); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Forms
   ============================================================ */
.field { display: block; margin-bottom: var(--pi-space-16); max-width: 420px; }
.field > label { display: block; font-size: 15px; font-weight: var(--pi-body-strong-weight); color: var(--pi-text);
                 margin-bottom: 6px; }
.input { width: 100%; min-height: 42px; font-family: var(--pi-font-body); font-size: var(--pi-body-size); line-height: 1.4;
         color: var(--pi-text); background: var(--pi-surface); border: 1px solid var(--pi-control-border);
         border-radius: var(--pi-radius-control); padding: 10px var(--pi-space-12); }
.input::placeholder { color: var(--pi-text-secondary); }
.input:hover { border-color: var(--pi-text-secondary); }
.input[aria-invalid="true"] { border-color: var(--pi-error); }
.input:disabled { background: var(--pi-disabled-bg); border-color: var(--pi-disabled-border); color: var(--pi-disabled-text); }

.radio { display: flex; align-items: center; gap: var(--pi-space-8); cursor: pointer; margin-bottom: var(--pi-space-8); }
.radio input { position: absolute; opacity: 0; }
.radio .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pi-control-border);
              display: grid; place-items: center; flex: none; }
.radio input:checked + .dot { border-color: var(--pi-action); }
.radio input:checked + .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pi-action); }
.radio input:focus-visible + .dot { outline: 3px solid var(--pi-focus); outline-offset: 3px; }

.seg { display: inline-flex; background: var(--pi-surface-subtle); border-radius: var(--pi-radius-control); padding: var(--pi-space-4); }
.seg-opt { font-family: var(--pi-font-body); font-weight: var(--pi-body-strong-weight); font-size: 14px; padding: 7px 18px;
           border-radius: var(--pi-radius-tag); border: none; background: none; color: var(--pi-action); cursor: pointer; }
.seg-opt[aria-selected="true"] { background: var(--pi-surface); color: var(--pi-text); box-shadow: var(--pi-shadow-small); }

/* ============================================================
   Navigation: the white wordmark on a navy bar. Ashley kept the dark bar
   (28 September 2026): the navy wordmark got lost on white. Navy is the
   brand book's ground for the white wordmark, as on statement bands.
   ============================================================ */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--pi-space-24);
       background: var(--pi-text); color: var(--pi-on-action);
       padding: var(--pi-space-12) var(--pi-space-24); }
.nav-brand { font-family: var(--pi-font-display); font-weight: var(--pi-h3-weight); font-size: 20px; color: var(--pi-on-action); text-decoration: none; }
.nav a { color: var(--pi-on-action); text-decoration: none; font-size: 15px; margin-left: var(--pi-space-16); }
.nav a:hover { color: var(--pi-statement-muted); }

/* Document furniture */
.docbar { display: flex; justify-content: space-between; background: var(--pi-text);
          color: var(--pi-on-action); padding: 10px var(--pi-space-24); font-size: var(--pi-eyebrow-size); font-weight: var(--pi-eyebrow-weight);
          letter-spacing: var(--pi-eyebrow-tracking); text-transform: uppercase; }
.docfoot { display: flex; justify-content: space-between; border-top: 1px solid var(--pi-border);
           padding: var(--pi-space-8) var(--pi-space-24); font-size: 11px; color: var(--pi-text-secondary); }

/* ============================================================
   Dialog
   ============================================================ */
.dialog-backdrop { position: relative; background: color-mix(in srgb, var(--pi-text) 45%, transparent); padding: var(--pi-space-48);
                   border-radius: var(--pi-radius-card); display: grid; place-items: center; }
.dialog { background: var(--pi-surface); border-radius: var(--pi-radius-dialog); box-shadow: var(--pi-shadow-overlay);
          padding: var(--pi-space-24); max-width: 420px; width: 100%; }
.dialog-title { font-family: var(--pi-font-display); font-weight: var(--pi-h2-weight); font-size: var(--pi-h2-size);
                color: var(--pi-text); margin: 0 0 var(--pi-space-8); }
.dialog-body { margin: 0 0 var(--pi-space-16); }
.dialog-actions { display: flex; gap: var(--pi-space-8); justify-content: flex-end; }

/* ============================================================
   Imagery
   ============================================================ */
.photo { display: block; border-radius: var(--pi-radius-card); overflow: hidden; }
.photo img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}