/* GENERATED FROM design/brand.css by scripts/sync-brand.sh — DO NOT EDIT. */
/* =============================================================================
   MTD Gateway brand layer
   =============================================================================

   SINGLE SOURCE. Do not edit the copies. This file is copied verbatim to:

     app/src/brand.css                  (imported by app/src/index.css)
     web/src/static/css/brand.css       (linked by web/src/_includes/layouts/base.njk)

   by `scripts/sync-brand.sh`, which is run by hand before committing. Both
   copies are committed so each half of the repo still builds on its own and the
   deploy script needs no new step.

   WHAT THIS IS
   ------------
   govuk-frontend stays underneath, untouched, and keeps doing the work it is
   good at: component markup, form semantics, error summaries, the skip link,
   and above all the focus states. This layer only changes surface — colour,
   type, spacing and edges — so the service stops reading as a government site
   while every accessibility behaviour we inherited stays exactly where it was.

   Two rules held throughout:

     1. Nothing here touches :focus. The yellow focus box is the one thing on a
        GOV.UK component that must not be restyled, and every rule that could
        have caught it is written to exclude it.
     2. Every colour pair used for text was checked against WCAG AA (4.5:1 for
        body, 3:1 for large text and non-text). The values that failed are
        recorded in comments beside the ones that replaced them, so nobody
        "tidies" them back.

   The reference was The Mortgage Works (a Nationwide brand): deep brand band,
   warm cream and cool mist section bands, white cards with a tinted head, a
   serif display face over a humanist sans, and figures shown as a labelled row
   rather than a list. The STRUCTURE is borrowed. The palette is ours — our navy,
   not their green — because looking like a specific lender is not the goal, and
   nor is looking like HMRC.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Type
   -------------------------------------------------------------------------- */

/* GDS Transport is crown copyright and licensed only for real GOV.UK services,
   so govuk-frontend's font stack is remapped rather than used. Everything in
   govuk-frontend asks for "GDS Transport"; aliasing the name means one @font-face
   block restyles the entire Design System without touching a single component
   rule. Figtree (SIL OFL) stands in for Proxima Nova, which is what the
   reference site uses and which is commercially licensed — we cannot ship it.

   Both faces are variable and self-hosted: no Google Fonts request, so no
   third-party call on a page where someone is typing their income. */
@font-face {
  font-family: "GDS Transport";
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url("/static/fonts/figtree/figtree-variable.woff2") format("woff2");
}
/* The range above covers the weights govuk-frontend never asks for (500, 600).
   These two are not duplicates of it: govuk-frontend declares "GDS Transport" at
   exactly 400 and exactly 700, and a rule with an exact weight beats one with a
   range, so without these the browser goes looking for the crown font first —
   which this repo deliberately does not ship — and only falls back to Figtree
   after two 404s on every page load. Same family, same descriptors, declared
   later, so these replace govuk-frontend's outright. */
@font-face {
  font-family: "GDS Transport";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/static/fonts/figtree/figtree-variable.woff2") format("woff2");
}
@font-face {
  font-family: "GDS Transport";
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("/static/fonts/figtree/figtree-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url("/static/fonts/figtree/figtree-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: fallback;
  src: url("/static/fonts/lora/lora-variable.woff2") format("woff2");
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand. The navy was already the header and hero colour; it stays, and now
     it also carries the footer, the card heads and the dark section band, so
     one colour does the structural work instead of appearing once. */
  --brand-deep: #0b2d5c;
  --brand-deep-hover: #082347;
  --brand-deep-line: rgba(255, 255, 255, 0.28);

  /* Warm band. The reference uses cream to break a long white page into
     readable chapters; it is the single biggest reason their pages feel less
     clinical than stock GOV.UK. */
  --brand-cream: #fbf3e8;
  --brand-cream-line: #efe1cd;

  /* Cool band, for the second kind of break (and for panels that sit next to a
     cream one without fighting it). Tinted towards the navy, not towards grey. */
  --brand-mist: #e9eef3;
  --brand-mist-line: #d3dde6;

  /* Accent. Non-text only: #c4622d on white is 4.0:1, which fails AA for body
     text. --brand-accent-text is the darkened version for the rare case where
     the accent has to be a word rather than a rule or an icon. */
  --brand-accent: #c4622d;
  --brand-accent-text: #a34f20;

  /* Surfaces */
  --brand-card-bg: #ffffff;
  --brand-card-line: #e2e5e8;
  --brand-head-band: #f4f6f8;
  --brand-rule: #e8eaec;
  --brand-row-hover: #f6f8fa;

  /* Text. Body sits one step off pure black: #0b0c0c on white is 20:1 and reads
     as glare down a long page, while #383f43 is still 10.4:1. Headings stay
     pure black, so the hierarchy actually widens rather than flattening. */
  --brand-text: #383f43;
  --brand-heading: #0b0c0c;
  --brand-muted: #505a5f;

  /* Links. GOV.UK blue is replaced by our navy, which is 12.6:1 on white. The
     underline is never removed, so colour is not the only signal. */
  --brand-link: #0b3f7a;
  --brand-link-hover: #082347;

  --brand-radius: 8px;
  --brand-radius-sm: 4px;
}

/* -----------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */

/* govuk-frontend styles by class and sets no font-family on <body>, so any
   element that does not carry a Design System class — every .brand-* component
   in this file among them — inherits the browser default, which is a serif.
   That is why a figure row rendered in Times while the paragraph beside it did
   not. One declaration on the document fixes the whole class of bug. */
body,
.govuk-template__body {
  font-family: "GDS Transport", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--brand-text);
}

/* Body copy, softened and held to a readable measure. The cap applies to
   paragraphs only — tables, figure rows and navigation need the full width. */
.govuk-body,
.govuk-body-m,
.govuk-body-s,
.govuk-body-l,
.govuk-list {
  color: var(--brand-text);
}
.govuk-body,
.govuk-body-m {
  max-width: 44em;
}

/* Headings keep govuk-frontend's sizes and spacing; only the colour and, for
   display headings, the family change. */
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-heading-s,
.govuk-fieldset__heading {
  color: var(--brand-heading);
}

/* The serif display face. Applied by opting in, not by tag: it belongs on
   marketing headlines and page titles, and would be wrong on a data screen —
   which is exactly how the reference site uses it (serif on the website, sans
   throughout the signed-in app). */
.brand-display {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-heading);
}
/* On the dark band the serif needs a touch less weight — a heavy serif reversed
   out of navy fills in and looks bolder than it is. */
.brand-band--deep .brand-display {
  font-weight: 500;
  color: #ffffff;
}

/* Links: navy, always underlined, thicker on hover rather than losing the rule.
   :focus is deliberately not mentioned anywhere in this block. */
.govuk-link,
.govuk-link:link,
.govuk-link:visited {
  color: var(--brand-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.govuk-link:hover:not(:focus) {
  color: var(--brand-link-hover);
  text-decoration-thickness: 3px;
}

/* Not every link in the app carries .govuk-link — a bare React <Link> is easy
   to write and renders with the browser's own blue-then-purple, which against
   the navy links beside it reads as a mistake rather than as "visited". Style
   unclassed links in the content area to match, without touching the ones that
   have deliberately been given a class. */
#main-content a:not([class]),
#main-content a[class=""] {
  color: var(--brand-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
#main-content a:not([class]):visited,
#main-content a[class=""]:visited {
  color: var(--brand-link);
}
#main-content a:not([class]):hover:not(:focus),
#main-content a[class=""]:hover:not(:focus) {
  color: var(--brand-link-hover);
  text-decoration-thickness: 3px;
}

/* -----------------------------------------------------------------------------
   4. Header, navigation, footer
   -------------------------------------------------------------------------- */

.govuk-header {
  background: var(--brand-deep);
  border-bottom: 0;
}
.govuk-header__logotype-text {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
}
.govuk-header__link--homepage,
.govuk-header__link--homepage:link,
.govuk-header__link--homepage:visited,
.govuk-header__link--homepage:active {
  color: #ffffff;
  text-decoration: none;
}
.govuk-header__link--homepage:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* The mark sits beside the wordmark, which is real text — so the image carries
   empty alt and a screen reader announces the name once, not twice. */
.app-header-mark {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -3px;
}

/* Service navigation. Two variants, as before: a light bar on inner pages and a
   brand bar that merges into the hero on the home page. The light bar is warmed
   from the old cold blue-grey to sit with the cream bands below it. */
.app-service-nav.govuk-service-navigation {
  background-color: #f7f5f1;
  border-bottom: 0;
}
.app-service-nav > .govuk-width-container {
  border-top: 1px solid #e3ded4;
  border-bottom: 1px solid #e3ded4;
}
.app-service-nav .govuk-service-navigation__link,
.app-service-nav .govuk-service-navigation__link:link,
.app-service-nav .govuk-service-navigation__link:visited {
  color: var(--brand-link);
}
.app-service-nav .govuk-service-navigation__item--active {
  border-color: var(--brand-accent);
}

.app-service-nav--brand.govuk-service-navigation {
  background-color: var(--brand-deep);
}
.app-service-nav--brand > .govuk-width-container {
  border-top-color: var(--brand-deep-line);
  border-bottom-color: var(--brand-deep-line);
}
.app-service-nav--brand .govuk-service-navigation__link,
.app-service-nav--brand .govuk-service-navigation__link:link,
.app-service-nav--brand .govuk-service-navigation__link:visited,
.app-service-nav--brand .govuk-service-navigation__link:hover:not(:focus) {
  color: #ffffff;
}
.app-service-nav--brand .govuk-service-navigation__item--active {
  border-color: var(--brand-accent);
}
.app-service-nav--brand .govuk-service-navigation__item--active .govuk-service-navigation__link {
  color: #ffffff;
}
/* The "Menu" toggle appears below 40em. govuk-frontend colours it with its link
   blue, which is 2.24:1 on our navy bar — effectively invisible on a phone.
   Everything else on this bar was already reversed; the toggle was missed. */
.app-service-nav--brand .govuk-service-navigation__toggle {
  color: #ffffff;
}
.app-service-nav--brand .govuk-service-navigation__toggle:hover:not(:focus) {
  color: #ffffff;
}
.app-service-nav--brand .govuk-service-navigation__toggle:focus:not(:focus-visible) {
  color: #ffffff;
}

/* Active item shows an accent underline. Keep the yellow focus box for keyboard
   users (:focus-visible) but drop it after a mouse click, so the active item is
   not marked yellow and accent at the same time. */
.govuk-service-navigation__link:focus:not(:focus-visible) {
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--brand-link);
}
.app-service-nav--brand .govuk-service-navigation__link:focus:not(:focus-visible) {
  color: #ffffff;
}
.govuk-service-navigation__item--active .govuk-service-navigation__link:focus:not(:focus-visible) {
  color: var(--brand-heading);
}

/* The stock footer is GOV.UK light grey with a blue top border, so the page ends
   on someone else's brand. Match it to the header instead and let it carry some
   weight — it is the last thing on every page. */
.govuk-footer {
  background: var(--brand-deep);
  border-top: 0;
  color: #ffffff;
  padding-top: 40px;
  padding-bottom: 40px;
}
.govuk-footer__link,
.govuk-footer__link:link,
.govuk-footer__link:visited,
.govuk-footer__link:hover:not(:focus) {
  color: #ffffff;
}
.govuk-footer__link:focus {
  color: var(--brand-heading);
}
.govuk-footer__licence-description,
.govuk-footer__meta {
  color: #ffffff;
}
.app-footer-nav {
  margin-bottom: 15px;
}

/* -----------------------------------------------------------------------------
   5. Section bands
   -------------------------------------------------------------------------- */

/* A full-bleed horizontal band. The page is read as a stack of chapters rather
   than one continuous white scroll — the single change that does most to stop a
   long marketing page feeling like a form. Bands are edge to edge; the content
   inside still sits in a .govuk-width-container. */
.brand-band {
  padding: 50px 0;
}
.brand-band--tight {
  padding: 32px 0;
}
.brand-band--deep {
  background: var(--brand-deep);
  color: #ffffff;
}
.brand-band--cream {
  background: var(--brand-cream);
}
.brand-band--mist {
  background: var(--brand-mist);
}
.brand-band--white {
  background: #ffffff;
}

/* Text inside the dark band. Body copy reverses to white rather than to the
   softened grey, which would drop under 4.5:1 on navy. */
.brand-band--deep .govuk-body,
.brand-band--deep .govuk-body-m,
.brand-band--deep .govuk-body-s,
.brand-band--deep .govuk-body-l,
.brand-band--deep .govuk-list,
.brand-band--deep .govuk-heading-xl,
.brand-band--deep .govuk-heading-l,
.brand-band--deep .govuk-heading-m,
.brand-band--deep .govuk-heading-s {
  color: #ffffff;
}
.brand-band--deep .govuk-link,
.brand-band--deep .govuk-link:link,
.brand-band--deep .govuk-link:visited,
.brand-band--deep .govuk-link:hover:not(:focus) {
  color: #ffffff;
}

@media (min-width: 40.0625em) {
  .brand-band {
    padding: 70px 0;
  }
  .brand-band--tight {
    padding: 40px 0;
  }
}

/* -----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.brand-hero {
  background: var(--brand-deep);
  color: #ffffff;
  padding: 55px 0 60px;
}
.brand-hero__title {
  color: #ffffff;
  margin-bottom: 20px;
}
.brand-hero__lead {
  color: #ffffff;
  font-size: 1.375rem;
  line-height: 1.4;
  margin-bottom: 30px;
  max-width: 32em;
}
.brand-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
@media (min-width: 40.0625em) {
  .brand-hero {
    padding: 75px 0 80px;
  }
  .brand-hero__lead {
    font-size: 1.5rem;
  }
}

/* Legacy hero class kept as an alias: several pages and the React public layout
   still ship .app-hero, and a redesign that renders an unstyled band on one
   forgotten page is worse than a duplicated selector. */
.app-hero {
  background: var(--brand-deep);
  color: #ffffff;
  padding: 55px 0 60px;
  margin-bottom: 0;
}
.app-hero__title,
.app-hero__lead {
  color: #ffffff;
}
.app-hero__lead {
  font-size: 1.375rem;
  line-height: 1.4;
  margin-bottom: 30px;
  max-width: 32em;
}
.app-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

/* Pill buttons, flat. govuk-frontend draws a 2px "shadow" under a button to
   suggest a physical key; the reference drops it, and with rounded ends it
   reads as a smear rather than an edge. The hover and active states stay
   distinguishable by colour, and :focus is untouched. */
.govuk-button {
  border-radius: 999px;
  box-shadow: none;
  font-weight: 600;
  padding: 10px 24px;
}
.govuk-button:active {
  top: 0;
}

/* The :not() chain is four classes deep, which makes this rule specificity
   0,4,0 — higher than `.brand-hero__start.govuk-button` further down. Without
   the last three exclusions the navy default wins and every primary button on a
   navy band renders navy on navy: still legible, because the label is white,
   but the button itself disappears. Any new inverse variant must be excluded
   here too, or it will silently lose. */
.govuk-button:not(.govuk-button--secondary):not(.govuk-button--warning):not(.govuk-button--inverse):not(.brand-hero__start):not(.app-hero__start):not(.brand-button-inverse) {
  background-color: var(--brand-deep);
  color: #ffffff;
}
.govuk-button:not(.govuk-button--secondary):not(.govuk-button--warning):not(.govuk-button--inverse):not(.brand-hero__start):not(.app-hero__start):not(.brand-button-inverse):hover:not(:focus) {
  background-color: var(--brand-deep-hover);
  color: #ffffff;
}

/* Secondary becomes an outline pill rather than a grey slab, so an optional
   action stops looking like a lesser primary one. */
.govuk-button--secondary,
.govuk-button--secondary:link,
.govuk-button--secondary:visited {
  background-color: transparent;
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 2px var(--brand-deep);
}
.govuk-button--secondary:hover:not(:focus) {
  background-color: rgba(11, 45, 92, 0.08);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 2px var(--brand-deep);
}

/* On the dark band the outline reverses. */
.brand-band--deep .govuk-button--secondary,
.brand-hero .govuk-button--secondary,
.app-hero .govuk-button--secondary,
.brand-band--deep .govuk-button--secondary:link,
.brand-hero .govuk-button--secondary:link,
.app-hero .govuk-button--secondary:link,
.brand-band--deep .govuk-button--secondary:visited,
.brand-hero .govuk-button--secondary:visited,
.app-hero .govuk-button--secondary:visited {
  background-color: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
}
.brand-band--deep .govuk-button--secondary:hover:not(:focus),
.brand-hero .govuk-button--secondary:hover:not(:focus),
.app-hero .govuk-button--secondary:hover:not(:focus) {
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* The primary action on a dark band inverts to a white pill. */
.brand-hero__start.govuk-button,
.app-hero__start.govuk-button,
.brand-button-inverse.govuk-button {
  background: #ffffff;
  color: var(--brand-deep);
  box-shadow: none;
}
/* govuk-frontend's start button draws its chevron with `fill: currentColor`
   only when told to; on white it must take the navy. */
.brand-hero__start .govuk-button__start-icon,
.app-hero__start .govuk-button__start-icon,
.brand-button-inverse .govuk-button__start-icon {
  fill: currentColor;
}
.brand-hero__start.govuk-button:hover:not(:focus),
.app-hero__start.govuk-button:hover:not(:focus),
.brand-button-inverse.govuk-button:hover:not(:focus) {
  background: #e8edf2;
  color: var(--brand-deep);
}
.brand-hero__start .govuk-button__start-icon,
.app-hero__start .govuk-button__start-icon {
  fill: currentColor;
}

/* The old bespoke sign-in button in the hero is now just a secondary button;
   the rule survives so the existing class keeps working. */
.brand-hero__signin.govuk-button,
.app-hero__signin.govuk-button,
.brand-hero__signin.govuk-button:link,
.app-hero__signin.govuk-button:link,
.brand-hero__signin.govuk-button:visited,
.app-hero__signin.govuk-button:visited {
  background: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 2px #ffffff;
}
.brand-hero__signin.govuk-button:hover:not(:focus),
.app-hero__signin.govuk-button:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* -----------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

/* One block of related content. Stock GOV.UK stacks a heading, a table and
   another heading straight onto white with heavy rules between, which on a
   bookkeeping screen reads as one undivided wall. */
.brand-card {
  background: var(--brand-card-bg);
  border: 1px solid var(--brand-card-line);
  border-radius: var(--brand-radius);
  margin-bottom: 25px;
}
.brand-card__head {
  background: var(--brand-head-band);
  border-bottom: 1px solid var(--brand-card-line);
  border-radius: calc(var(--brand-radius) - 1px) calc(var(--brand-radius) - 1px) 0 0;
  padding: 16px 25px;
}
/* The head band carries the section title, so the heading inside it drops its
   own bottom margin rather than padding the band out. */
.brand-card__head > :last-child {
  margin-bottom: 0;
}
.brand-card__body {
  padding: 25px;
}
/* A body that is nothing but a table: the table draws its own gutters and its
   last row supplies the bottom edge, so this padding would double up. */
.brand-card__body--table {
  padding: 0;
}
/* A card whose head is the brand colour — used where the card is a result or a
   record rather than a section of a page. */
.brand-card--feature .brand-card__head {
  background: var(--brand-deep);
  border-bottom: 0;
  color: #ffffff;
}
.brand-card--feature .brand-card__head .govuk-heading-m,
.brand-card--feature .brand-card__head .govuk-heading-s,
.brand-card--feature .brand-card__head .govuk-body,
.brand-card--feature .brand-card__head .govuk-body-s {
  color: #ffffff;
}
/* Cards sitting in a row on a marketing page. */
.brand-card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 40.0625em) {
  .brand-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* In a grid the cards must finish level, whatever their content. */
.brand-card-grid .brand-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  /* A grid item defaults to min-width:auto, which is its content's minimum —
     so a wide button or an unbreakable string makes the column wider than its
     track and the whole document scrolls sideways at 320px. This is what broke
     WCAG 1.4.10 reflow on the pricing page. */
  min-width: 0;
}
/* Same reason, one level down: the card's own children must not set the floor. */
.brand-card__head,
.brand-card__body {
  min-width: 0;
  overflow-wrap: break-word;
}
/* A pill button's generous horizontal padding is what pushes a narrow column
   over. On a phone a full-width button is the better shape anyway. */
@media (max-width: 40.0625em) {
  .brand-card-grid .govuk-button {
    width: 100%;
  }
}
.brand-card-grid .brand-card__body {
  flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   9. Figure rows
   -------------------------------------------------------------------------- */

/* A row of labelled figures: small quiet label, large value beneath, thin
   dividers between. Replaces a summary list wherever the point is to compare
   several numbers at a glance rather than read them one at a time. Wraps to a
   stack rather than scrolling. */
.brand-stats {
  display: flex;
  flex-wrap: wrap;
  background: var(--brand-cream);
  border: 1px solid var(--brand-cream-line);
  border-radius: var(--brand-radius);
  margin: 0 0 25px;
}
.brand-stat {
  flex: 1 1 11rem;
  padding: 20px 25px;
  border-left: 1px solid var(--brand-cream-line);
}
/* The divider belongs between figures, not down the outside edge. */
.brand-stat:first-child {
  border-left: 0;
}
.brand-stat__label {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--brand-muted);
  margin: 0 0 6px;
}
.brand-stat__value {
  display: block;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand-heading);
  /* A dd carries a 40px browser indent that govuk-frontend only resets on its
     own summary list. */
  margin: 0;
  /* Figures in a row must line up digit for digit or the eye cannot compare
     them; both faces default to proportional numerals. */
  font-variant-numeric: tabular-nums;
}
/* Inside a card, or on a band that already supplies colour, the strip drops its
   own background and becomes plain dividers. */
.brand-card .brand-stats,
.brand-band--cream .brand-stats {
  background: transparent;
  border: 0;
  margin-bottom: 0;
}

/* Below the first wrap the left borders land mid-row and read as mistakes;
   stack the dividers horizontally instead. */
@media (max-width: 40.0625em) {
  .brand-stat {
    flex-basis: 100%;
    border-left: 0;
    border-top: 1px solid var(--brand-cream-line);
  }
  .brand-stat:first-child {
    border-top: 0;
  }
}

/* -----------------------------------------------------------------------------
   10. Action rows
   -------------------------------------------------------------------------- */

/* A list of onward links as full-width rows with a chevron, instead of a column
   of buttons or a paragraph of links. Reads as a menu and costs one line each. */
.brand-actions {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}
.brand-actions__item {
  border-bottom: 1px solid var(--brand-rule);
  margin: 0;
}
.brand-actions__item:first-child {
  border-top: 1px solid var(--brand-rule);
}
.brand-actions__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.brand-actions__link:hover {
  text-decoration-thickness: 3px;
}
/* The chevron is decoration beside a link that already says where it goes, so
   it is hidden from assistive technology rather than announced as a character. */
.brand-actions__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 4px;
}

/* -----------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */

/* Scoped to cards, so a bare govuk-table anywhere this redesign has not reached
   still renders as govuk-frontend intends rather than half-restyled. */
.brand-card .govuk-table {
  margin-bottom: 0;
}
/* govuk-frontend zeroes the left padding on cells so a table aligns to the page
   text. Inside a card the content would hug the border, so put the gutter back. */
.brand-card .govuk-table__cell,
.brand-card .govuk-table__header {
  padding-left: 25px;
}
.brand-card .govuk-table__cell:last-child,
.brand-card .govuk-table__header:last-child {
  padding-right: 25px;
}

/* On a phone that 25px gutter on each side is 50px taken out of 320, which is
   enough on its own to push a plain two-column table past the viewport and
   break WCAG 1.4.10 reflow — the profit and loss tables did exactly that. The
   card still needs some inset, just less of it. */
@media (max-width: 40.0625em) {
  .brand-card .govuk-table__cell,
  .brand-card .govuk-table__header {
    padding-left: 12px;
  }
  .brand-card .govuk-table__cell:last-child,
  .brand-card .govuk-table__header:last-child {
    padding-right: 12px;
  }
  .brand-card__body {
    padding: 18px;
  }
  .brand-card__head {
    padding: 14px 18px;
  }
}

/* The column-header row becomes a quiet band instead of a heavy black rule, the
   same device as the card head — so a table with its own headers reads as one
   object and not two stacked ones. */
.brand-card .govuk-table__head .govuk-table__row {
  background: var(--brand-head-band);
}
.brand-card .govuk-table__head .govuk-table__header {
  border-bottom: 1px solid var(--brand-card-line);
}
/* A card head directly above the column headers would give two grey bands in a
   row; the band belongs to whichever comes first. */
.brand-card__head + .brand-card__body--table .govuk-table__head .govuk-table__row {
  background: transparent;
}

/* Row rules at govuk-frontend's #b1b4b6 are as dark as the text on a dense
   table and turn it into a grid. Lighten them, and drop the one under the last
   row so the card border is the only edge. */
.brand-card .govuk-table__body .govuk-table__cell,
.brand-card .govuk-table__body .govuk-table__header {
  border-bottom: 1px solid var(--brand-rule);
}
.brand-card .govuk-table__body .govuk-table__row:last-child .govuk-table__cell,
.brand-card .govuk-table__body .govuk-table__row:last-child .govuk-table__header {
  border-bottom: 0;
}

/* Money and dates align on the digit. Without this a column of amounts in a
   proportional face is ragged and cannot be compared down the column. This one
   is global: a ragged figure column is wrong wherever it appears. */
.govuk-table__cell--numeric,
.govuk-table__header--numeric {
  font-variant-numeric: tabular-nums;
}

/* Tracking a row across a wide, horizontally scrolling table is the main
   complaint with these screens. Hover and keyboard focus both tint the row. */
.brand-card .govuk-table__body .govuk-table__row:hover,
.brand-card .govuk-table__body .govuk-table__row:focus-within {
  background: var(--brand-row-hover);
}
/* Rows that are deliberately dimmed or tinted keep their own meaning. */
.brand-card .govuk-table__body .app-row-excluded:hover {
  background: transparent;
}

/* Wide tables scroll horizontally rather than forcing the page to. Data tables
   are exempt from WCAG 1.4.10 reflow because they need two-dimensional layout,
   but the page itself must still not scroll at 320px. position is not
   decoration: without a containing block the widest table pushes the document
   wide anyway, even though this container scrolls correctly. */
.app-table-scroll {
  overflow-x: auto;
  position: relative;
}
/* Flush inside a card, the scroll container's corners must be clipped or the
   last row squares off the card. */
.brand-card .app-table-scroll {
  border-radius: 0 0 calc(var(--brand-radius) - 1px) calc(var(--brand-radius) - 1px);
}

/* -----------------------------------------------------------------------------
   12. Panels, insets and tags
   -------------------------------------------------------------------------- */

/* Inset text loses GOV.UK's grey left bar for a cream panel — the same device
   as the figure strip, so "here is something set apart" looks the same wherever
   it appears. */
.govuk-inset-text {
  background: var(--brand-cream);
  border-left: 4px solid var(--brand-accent);
  border-radius: 0 var(--brand-radius-sm) var(--brand-radius-sm) 0;
  padding: 18px 20px;
}
/* On a cream band the panel would vanish, so it goes white there instead. */
.brand-band--cream .govuk-inset-text {
  background: #ffffff;
}

.govuk-panel--confirmation {
  background: var(--brand-deep);
  border-radius: var(--brand-radius);
}

/* Notification banners take the brand colour rather than GOV.UK blue.
   govuk-frontend draws a 5px border in that colour AND fills the header with it,
   so rounding both left a curve on the header sitting inside a curve on the
   border, with a square bottom under it — a visible double edge. The banner
   alone is rounded, all four corners, and clips its own header instead. */
.govuk-notification-banner {
  border-color: var(--brand-deep);
  border-radius: var(--brand-radius);
  overflow: hidden;
}
.govuk-notification-banner__header {
  background: var(--brand-deep);
  border-bottom-color: var(--brand-deep);
  border-radius: 0;
}

/* Tags keep GOV.UK's colour semantics — green means done, red means a problem,
   and relearning that costs the user more than a tidier palette gains. Only the
   shape changes. */
.govuk-tag {
  border-radius: 999px;
}
/* GOV.UK caps tags at 160px (they are meant to be short); ours carry fuller
   labels ("Awaiting acceptance", "Possible duplicate"), so let the background
   cover the whole label. */
.govuk-table .govuk-tag,
.brand-card .govuk-tag {
  max-width: none;
}

/* -----------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

/* Inputs keep govuk-frontend's 2px border — a form field whose edge is faint is
   an accessibility problem, not a style choice — and gain only a corner radius
   and the brand colour on the border. */
.govuk-input,
.govuk-select,
.govuk-textarea {
  border-radius: var(--brand-radius-sm);
}
.govuk-input:hover,
.govuk-select:hover,
.govuk-textarea:hover {
  border-color: var(--brand-deep);
}
.govuk-fieldset__legend,
.govuk-label {
  color: var(--brand-heading);
}
.govuk-hint {
  color: var(--brand-muted);
}
/* A details disclosure is how a caveat on a figure is offered without tripling
   the text on screen. */
.govuk-details__summary-text {
  color: var(--brand-link);
}

/* -----------------------------------------------------------------------------
   14. Prose (markdown output)
   -------------------------------------------------------------------------- */

/* Markdown produces unclassed elements and the Design System styles by class,
   not by tag — so a bare <p> renders in the browser default serif and a bare
   <table> renders unstyled. These rules restate the typography for plain markup.
   The family resolves through the same "GDS Transport" alias remapped above. */
.app-prose {
  font-family: "GDS Transport", arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--brand-text);
  max-width: 42em;
}
.app-prose p,
.app-prose li {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}
.app-prose p {
  margin: 0 0 15px;
}
.app-prose h2,
.app-prose h3 {
  color: var(--brand-heading);
  font-weight: 700;
}
.app-prose h2 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 35px 0 15px;
}
.app-prose h3 {
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 28px 0 10px;
}
.app-prose ul,
.app-prose ol {
  margin: 0 0 15px;
  padding-left: 20px;
}
.app-prose li {
  margin-bottom: 8px;
}
.app-prose a {
  color: var(--brand-link);
  text-underline-offset: 0.15em;
}
.app-prose a:visited {
  color: var(--brand-link);
}
.app-prose strong {
  font-weight: 700;
}
.app-prose table {
  width: 100%;
  margin: 0 0 20px;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.4;
}
.app-prose caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 10px;
}
.app-prose th,
.app-prose td {
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--brand-rule);
  text-align: left;
  vertical-align: top;
}
.app-prose th {
  font-weight: 700;
  color: var(--brand-heading);
}
.app-prose td:last-child,
.app-prose th:last-child {
  padding-right: 0;
}

@media (min-width: 40.0625em) {
  .app-prose p,
  .app-prose li,
  .app-prose table {
    font-size: 1.1875rem;
    line-height: 1.55;
  }
  .app-prose p { margin-bottom: 20px; }
  .app-prose h2 { font-size: 1.8125rem; line-height: 1.15; margin: 45px 0 20px; }
  .app-prose h3 { font-size: 1.3125rem; line-height: 1.2; margin: 32px 0 15px; }
  .app-prose ul, .app-prose ol { margin-bottom: 20px; padding-left: 25px; }
}

/* -----------------------------------------------------------------------------
   15. Layout odds and ends
   -------------------------------------------------------------------------- */

/* Wider than the GOV.UK default (960px) so wide tables like the transactions
   list have room and the date column stays on one line. */
.govuk-width-container {
  max-width: 1100px;
}

/* Focus lands here from the skip link and on every route change. The container
   is not keyboard reachable in its own right, so GOV.UK suppresses the outline
   on skip-link targets too — showing one would be noise, not a focus cue. */
#main-content:focus {
  outline: none;
}

/* A page whose content sits directly on a band needs no extra top padding of
   its own; a page that does not use bands keeps govuk-frontend's spacing. */
.brand-page-bands .govuk-main-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
   16. Action menu
   -------------------------------------------------------------------------- */

/* The disclosure button plus panel behind app/src/components/ActionMenu.tsx.
   Replaces a row of three or four buttons in a table cell, and the loose links
   that used to sit in the header. */
.app-menu {
  position: relative;
  display: inline-block;
}

.app-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--brand-deep);
  border-radius: 999px;
  color: var(--brand-deep);
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 8px 16px;
  cursor: pointer;
}
.app-menu__trigger:hover:not(:focus) {
  background: rgba(11, 45, 92, 0.08);
}
/* The caret is decoration next to a button that already names itself. */
.app-menu__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.app-menu__caret--up {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* On the navy header the trigger reverses. */
.app-menu--inverse .app-menu__trigger {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.app-menu--inverse .app-menu__trigger:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.14);
}

/* Fixed, not absolute, and positioned from JavaScript: an absolutely positioned
   panel is clipped by any ancestor with overflow, and the clients table needs a
   horizontal scroll container to survive 320px. Top/left/right come from the
   component. */
.app-menu__panel {
  position: fixed;
  z-index: 100;
  min-width: 15rem;
  background: #ffffff;
  border: 1px solid var(--brand-card-line);
  border-radius: var(--brand-radius);
  /* The only shadow in the design. A panel that floats over the page is the one
     place where a border alone does not say "this is above everything else". */
  box-shadow: 0 6px 20px rgba(11, 45, 92, 0.16);
  padding: 6px 0;
}

.app-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-menu__item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 18px;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--brand-heading);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.app-menu__item:hover:not(:focus) {
  background: var(--brand-row-hover);
  color: var(--brand-heading);
  text-decoration: none;
}
.app-menu__item:visited {
  color: var(--brand-heading);
}
.app-menu__item:disabled {
  color: #6f777b;
  cursor: default;
}
.app-menu__item:disabled:hover {
  background: none;
}
/* Removing a client is not undoable from here, so it is coloured like the
   error text elsewhere rather than sitting level with "Check authorisation". */
.app-menu__item--destructive {
  color: #d4351c;
}
.app-menu__item--destructive:hover:not(:focus) {
  color: #942514;
}

/* A line of context, not a choice: who you are signed in as, which client you
   are acting for. */
.app-menu__text {
  padding: 10px 18px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--brand-muted);
  white-space: nowrap;
}
.app-menu__text strong {
  display: block;
  font-size: 1rem;
  color: var(--brand-heading);
}

.app-menu__separator {
  height: 1px;
  background: var(--brand-rule);
  margin: 6px 0;
}

.govuk-table__cell .app-menu {
  vertical-align: middle;
}

/* The circled initial beside the account control, mirroring the person icon the
   reference site uses. Decoration: the trigger is labelled "Account" in text. */
.app-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.app-menu:not(.app-menu--inverse) .app-menu__avatar {
  background: rgba(11, 45, 92, 0.1);
}

/* A trigger whose only label is visually hidden — a row's actions button. The
   caret is the whole control, so it needs to stay a comfortable tap target:
   24px of caret in a 44px button rather than a 16px dot. */
.app-menu__trigger--compact {
  padding: 10px 14px;
  min-height: 44px;
}

/* Below 40em the account control keeps the initial and drops the word, which is
   what stops the header wrapping onto a third line on a phone. */
@media (max-width: 40.0625em) {
  .app-menu__trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* A panel anchored to a trigger near the right edge still has to fit: cap it
     to the viewport rather than letting it push the document sideways. */
  .app-menu__panel {
    max-width: calc(100vw - 32px);
  }
  .app-menu__item,
  .app-menu__text {
    white-space: normal;
  }
}