:root {
    --navy: #0c2138;
    --ink: #1f2a37;
    --muted: #5b6673;
    --rule: #e3e6ea;
    --paper: #ffffff;
    --wash: #f6f7f8;
    --amber: #F8B050;           /* the brand gold: buttons, bars, dividers, dots and rules; never text on a light background (1.9:1 on white) */
    --amber-dark: #0C2138;      /* what used to be amber text: navy on white and on every tint (gold palette, November 5, 2026) */
    --amber-text: #0C2138;
    --pole-right: #A76207;      /* bronze, 4.8:1 on white: the colour of the right-hand statements of the assessment, and of nothing else as text (4.3:1 on --tint, so never there) */
    --field-border: #7d8995;
    --cta: #F8B050;             /* fill behind navy lettering on the main button, flags and pills: navy on it 8.8:1 */
    --cta-hover: #F69E27;       /* navy on it 7.6:1 */
    --on-cta: #0C2138;
    --focus-ring: #0C2138;      /* gold is 1.9:1 on white, so the light focus ring is navy; dark mode uses #FAC37A */
    --bar-left: #2f5b9a;
    --bar-right: #F8B050;
    --ideal: #207a4e;           /* darkened from #2a8a5a: green text passes 4.5:1 on white and on its wash */
    --ideal-wash: #eef8f1;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--paper); color: var(--ink); }
  body { font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; }
  .wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; }
  h1, h2, h3 { color: var(--navy); font-weight: 600; line-height: 1.2; margin: 0 0 12px; }
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
  h3 { font-size: 19px; margin-top: 28px; }
  p { margin: 0 0 14px; }
  .sub { color: var(--muted); font-size: 15px; }
  .hidden { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main:focus, h1:focus { outline: none; }
  .logos { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; }
  .logos img { max-height: 56px; max-width: 220px; height: auto; width: auto; }
  /* Our wordmark: up to 360px wide (72% of the header on phones), ratio kept, centred with any client logo beside it. */
  .logos > img:first-child { width: 360px; max-width: 100%; max-height: none; min-width: 0; height: auto; }
  @media (max-width: 599px) { .logos > img:first-child { width: 72%; } }
  .logos .sep { width: 1px; height: 40px; background: var(--rule); }
  .meta { font-size: 14px; color: var(--muted); font-family: Arial, Helvetica, sans-serif; margin: -8px 0 10px; }
  .meta:empty { display: none; }
  .tag { font-style: italic; font-size: 19px; color: var(--muted); margin-bottom: 20px; }

  /* Buttons */
  .btn { font: inherit; font-size: 16px; border: 0; border-radius: 4px; padding: 12px 22px; cursor: pointer; text-decoration: none; display: inline-block; line-height: normal; }
  .btn.primary { background: var(--cta); color: var(--on-cta); }
  .btn.primary:hover { background: var(--cta-hover); }
  .btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--rule); }
  @media (max-width: 700px), (pointer: coarse) {
    .btn, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
    .check { min-height: 44px; align-items: center; }
  }
  .btn:disabled { opacity: .5; cursor: default; }
  .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; }

  /* Form fields */
  label { display: block; font-size: 15px; color: var(--navy); margin: 14px 0 6px; }
  input[type=text], input[type=email], select, textarea {
    width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--field-border, #c9ced4); border-radius: 4px; background: var(--surface, #fff);
  }
  textarea { min-height: 120px; resize: vertical; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
  .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; }
  .check input { margin-top: 5px; }
  .check span { font-size: 15px; }
  .note { font-size: 13px; color: var(--muted); margin: 6px 0 0 26px; }
  .error { color: var(--danger-text, #b4231f); font-size: 15px; margin-top: 12px; }
  .optional { color: var(--muted); font-weight: normal; }

  /* Question items */
  .progress { font-size: 13px; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
  .poles { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
  .item { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); }
  .item:last-of-type { border-bottom: 1px solid var(--rule); }
  .item .l { text-align: right; color: #0C2138; font-size: 15px; }
  .item .r { text-align: left; color: var(--pole-right); font-size: 15px; }
  .scale { display: flex; gap: 10px; width: 178px; justify-content: space-between; align-items: center; }
  .scalehead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; margin-bottom: 4px; }
  .heads { display: flex; justify-content: space-between; width: 178px; font-size: 12px; line-height: 1.25; font-family: Arial, Helvetica, sans-serif; }
  .heads span { max-width: 48%; }
  .heads span:first-child { color: #0C2138; text-align: left; }
  .heads span:last-child { color: var(--pole-right); text-align: right; }
  .scale label { margin: 0; cursor: pointer; }
  .scale input { position: absolute; opacity: 0; width: 0; height: 0; }
  .scale .dot { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--field-border); background: #fff; transition: transform .12s; }
  .scale label:nth-child(1) .dot, .scale label:nth-child(5) .dot { width: 30px; height: 30px; }
  .scale label:hover .dot { border-color: var(--navy); }
  .scale input:checked + .dot { background: var(--navy); border-color: var(--navy); transform: scale(1.08); }
  .scale input:focus-visible + .dot { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .item.missing .dot { border-color: #b4231f; }
  @media (max-width: 560px) {
    /* Phone: the original row, the two statements either side of the five circles. Each circle's tap target is
       at least 24 px wide (the scale is 134 px, so about 27 px each) and 44 px tall; the circles stay the size they were. */
    .item { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 14px 0; }
    .item .l, .item .r { font-size: 14px; line-height: 1.35; }
    .scale { width: 134px; gap: 0; }
    .scale label { flex: 1 1 0; min-width: 24px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .scale .dot { width: 22px; height: 22px; border-width: 2px; }
    .scale label:nth-child(1) .dot, .scale label:nth-child(5) .dot { width: 24px; height: 24px; }
    .heads { width: 134px; font-size: 11px; }
    .check input { width: 20px; height: 20px; margin-top: 0; }
    .wrap { padding: 20px 12px 40px; }
  }

  /* Results */
  .intro-line { color: var(--muted); font-size: 15px; margin: 24px 0 16px; }
  .card { margin: 0 0 28px; }
  .card h3 { margin-top: 0; }
  .labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  .bar { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--bar-left), #c9c6c0 50%, var(--bar-right)); margin: 10px 0 30px; }
  .marker { position: absolute; top: 50%; width: 36px; height: 36px; margin-left: -18px; transform: translateY(-50%); border-radius: 50%; background: var(--surface, #fff); border: 3px solid var(--navy); font-size: 12px; font-weight: 700; color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; }
  .ideal { position: absolute; top: 100%; margin-top: 4px; transform: translateX(-50%); font-size: 12px; color: var(--ideal); white-space: nowrap; font-family: Arial, Helvetica, sans-serif; }
  .ideal.edge { transform: none; }
  .ideal.edge::before { margin-left: 0; }
  .ideal::before { content: ""; display: block; width: 2px; height: 10px; background: var(--ideal); margin: 0 auto 2px; }
  .cardbox { background: var(--ideal-wash); border-left: 3px solid var(--ideal); padding: 12px 16px; border-radius: 0 4px 4px 0; }
  .cardbox .lbl { font-size: 13px; color: var(--amber-dark); margin-bottom: 4px; font-family: Arial, Helvetica, sans-serif; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
  .actions .btn { flex: 1 1 220px; text-align: center; }
  .actions .copied, .actions .pdfnote { flex-basis: 100%; }
  .closing { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 12px; }
  .cta { background: var(--wash); padding: 18px 20px; border-radius: 4px; margin-top: 18px; }
  .cta a { color: var(--navy); }
  .copied { font-size: 14px; color: var(--ideal); align-self: center; }
  .loading { color: var(--muted); padding: 40px 0; }
  .printlink { display: none; font-size: 12px; color: var(--muted); word-break: break-all; margin-top: 24px; }
  .report { border-top: 3px solid var(--navy); margin-top: 40px; padding-top: 20px; }
  .report h2 { margin-top: 36px; }
  .report .dimlabel { color: var(--amber-dark); font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: -6px 0 12px; }
  .report ul { margin: 0 0 14px 20px; padding: 0; }
  .report li { margin-bottom: 8px; }
  .reflect { background: var(--wash); padding: 12px 16px; border-radius: 4px; font-style: italic; }
  .glance { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 15px; }
  .glance th { text-align: left; color: var(--muted); font-weight: normal; font-size: 13px; border-bottom: 1px solid var(--rule); padding: 6px 8px; font-family: Arial, Helvetica, sans-serif; }
  .glance td { padding: 8px; border-bottom: 1px solid var(--rule); }
  .glance td:last-child, .glance th:last-child { text-align: right; font-family: Arial, Helvetica, sans-serif; }
  .plan { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
  .plan td { border: 1px solid var(--rule); padding: 10px 12px; vertical-align: top; font-size: 15px; }
  .plan td:first-child { width: 48%; color: var(--navy); }
  .plan td:last-child { height: 56px; }
  .chapter { font-size: 14px; color: var(--muted); }

  /* PDF document (corporate tier). Built off-screen and rendered by html2pdf. */
  #pdfhost { position: absolute; left: -20000px; top: 0; width: 7.3in; }
  .pdf { width: 7.3in; font-size: 10.5pt; line-height: 1.5; color: var(--ink); background: #fff; }
  .pdf h1 { font-size: 26pt; margin-bottom: 10pt; }
  .pdf h2 { font-size: 19pt; margin-bottom: 10pt; }
  .pdf h3 { font-size: 13pt; margin-top: 14pt; margin-bottom: 8pt; }
  .pdf p { margin-bottom: 8pt; }
  .pdf .pg { height: 936px; overflow: hidden; margin: 0; padding-top: 1px; }
  .pdf .keep { page-break-inside: avoid; break-inside: avoid; }
  .pdf .cover { height: 936px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
  .pdf .cover .logos { margin-bottom: 0; }
  .pdf .cover .logos img { max-height: 54px; max-width: 200px; width: auto; }
  .pdf .wordmark { font-size: 22pt; color: var(--navy); letter-spacing: .01em; }
  .pdf .wordmark b { font-weight: 700; }
  .pdf .cover .mid { padding-top: .3in; }
  .pdf .cover .kicker { font-family: Arial, Helvetica, sans-serif; font-size: 10.5pt; letter-spacing: .08em; color: var(--amber-dark); margin-bottom: 14pt; }
  .pdf .cover h1 { font-size: 34pt; line-height: 1.12; margin-bottom: 26pt; max-width: 6in; }
  .pdf .cover .rule { width: 1.2in; height: 3px; background: var(--amber); margin-bottom: 26pt; }
  .pdf .cover .for { font-size: 13pt; color: var(--muted); margin-bottom: 4pt; }
  .pdf .cover .name { font-size: 22pt; color: var(--navy); margin-bottom: 18pt; }
  .pdf .cover .meta { font-size: 11pt; margin: 0 0 3pt; font-family: Arial, Helvetica, sans-serif; }
  .pdf .cover .foot { border-top: 1px solid var(--rule); padding-top: 10pt; font-size: 9.5pt; color: var(--muted); font-family: Arial, Helvetica, sans-serif; line-height: 1.45; }
  .pdf .section-kicker { font-family: Arial, Helvetica, sans-serif; font-size: 9.5pt; letter-spacing: .08em; color: var(--amber-dark); margin-bottom: 6pt; }
  .pdf .meta { margin: -4pt 0 12pt; font-size: 10pt; }
  .pdf .tag { font-size: 14pt; margin-bottom: 14pt; }
  .pdf .card { margin-bottom: 8pt; }
  .pdf .card h3 { font-size: 12pt; margin-top: 0; margin-bottom: 4pt; }
  .pdf .labels { font-size: 9.5pt; }
  .pdf .bar { height: 10px; margin: 6px 0 34px; }
  .pdf .marker { width: 30px; height: 30px; margin-left: -15px; font-size: 10px; border-width: 2px; }
  .pdf .ideal { font-size: 9.5pt; }
  .pdf .cardbox { padding: 5pt 10pt; font-size: 9.5pt; line-height: 1.35; }
  .pdf .intro-line { margin: 4pt 0 10pt; }
  .pdf .cardbox .lbl { font-size: 9.5pt; }
  .pdf .dimlabel { font-size: 10pt; margin: -4pt 0 8pt; }
  .pdf ul { margin: 0 0 10pt 18pt; padding: 0; }
  .pdf li { margin-bottom: 4pt; }
  .pdf .reflect { padding: 8pt 11pt; }
  .pdf .glance { font-size: 10.5pt; }
  .pdf .scorekey { font-size: 9.5pt; margin-bottom: 14pt; }
  .pdf .scorekey td, .pdf .scorekey th { padding: 4pt 6pt; }
  .scorekey { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 22px; }
  .scorekey th { text-align: left; color: var(--muted); font-weight: normal; font-size: 13px; border-bottom: 1px solid var(--rule); padding: 6px 8px; font-family: Arial, Helvetica, sans-serif; }
  .scorekey td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .scorekey td:first-child { color: var(--amber-dark); font-family: Arial, Helvetica, sans-serif; font-size: 13px; white-space: nowrap; }
  .scorekey td:nth-child(2) { white-space: nowrap; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
  .pdf .glance th, .pdf .glance td { padding: 5pt 6pt; }
  .pdf .plan td { font-size: 10pt; padding: 6pt 8pt; }
  .pdf .plan td:last-child { height: 34pt; }
  .pdf .sub { font-size: 10pt; }
  .pdf .chapter { font-size: 9.5pt; }
  .pdf .printlink { display: block; font-size: 9pt; margin-top: 14pt; }
  .pdfnote { font-size: 14px; color: var(--muted); align-self: center; }
  /* How you compare */
  .cmp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
  .cmp-tabs button { font: 14px Arial, Helvetica, sans-serif; border: 1px solid var(--rule); background: var(--surface, #fff); color: var(--navy); padding: 8px 14px; border-radius: 20px; cursor: pointer; }
  .cmp-tabs button.on { background: var(--fill, var(--navy)); border-color: var(--fill, var(--navy)); color: #fff; }
  .cmp-n { font: 13px Arial, Helvetica, sans-serif; color: var(--muted); margin-bottom: 18px; }
  .cmp-dim { margin: 0 0 22px; }
  .cmp-dim h3 { margin: 0 0 6px; }
  .band { position: relative; display: flex; height: 22px; border-radius: 4px; overflow: hidden; margin: 0 0 8px; }
  .band span { display: block; height: 100%; }
  .band .b1 { background: #2f5b9a; } .band .b2 { background: #8fa6cc; } .band .b3 { background: #2a8a5a; } .band .b4 { background: #FBD5A2; } .band .b5 { background: #F8B050; }
  .bandwrap { position: relative; padding-top: 26px; }
  .you { position: absolute; top: 0; transform: translateX(-50%); font: 700 11px Arial, Helvetica, sans-serif; color: var(--navy); white-space: nowrap; }
  .you::after { content: ""; display: block; width: 0; height: 0; margin: 2px auto 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--navy); }
  .bandlabels { display: flex; justify-content: space-between; font: 12px Arial, Helvetica, sans-serif; color: var(--muted); margin-bottom: 6px; }
  .cmp-legend { font: 12px Arial, Helvetica, sans-serif; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .cmp-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .cmp-dim details { margin-top: 8px; }
  .cmp-dim summary { cursor: pointer; font: 14px Arial, Helvetica, sans-serif; color: var(--amber-dark); }
  .cmp-dim details p { margin: 10px 0 0; }
  .cmp-dim details b { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
  .pdf .cmp-dim { margin: 0 0 7pt; } .pdf .cmp-dim h3 { font-size: 10.5pt; margin: 0 0 1pt; }
  .pdf .band { height: 11px; margin: 0 0 3px; } .pdf .bandwrap { padding-top: 17px; } .pdf .you { font-size: 9px; } .pdf .bandlabels { font-size: 9pt; margin-bottom: 3pt; }
  .pdf .leanblock { margin: 0 0 10pt; } .pdf .leanblock h3 { font-size: 11pt; margin: 10pt 0 4pt; } .pdf .leanblock p { font-size: 9.5pt; line-height: 1.45; margin: 0 0 5pt; } .pdf .leanblock b { font-family: Arial, Helvetica, sans-serif; font-size: 8.5pt; }
  .pdf .cmp-n { font-size: 9pt; margin-bottom: 6pt; } .pdf .cmp-legend { font-size: 8.5pt; margin-bottom: 6pt; } .pdf .cmp-dim p { font-size: 9pt; margin: 0; line-height: 1.4; }
  /* Open the app (results page; never printed). */
  .app-banner { border: 1px solid #FBD5A2; border-left: 4px solid var(--amber); background: #fffaf5; border-radius: 0 6px 6px 0; padding: 16px 20px; margin: 0 0 24px; }
  .app-banner p { margin: 0 0 6px; font-size: 16px; }
  .app-banner .app-banner-title { font-size: 19px; font-weight: 600; color: var(--navy); }
  .open-app { margin: 14px 0 18px; }
  .app-banner .open-app { margin: 12px 0 0; }
  @media print {
    .app-banner, .open-app { display: none !important; }
    .report h2 { page-break-before: always; }
    .actions, .nav, .btn { display: none !important; }
    .printlink { display: block; }
    .bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { font-size: 13px; }
    #pdfhost { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }