/* ============================================================================
   GovTheme by Doghouse — brand.css
   The marketing brand layer: custom properties, layout utilities, buttons,
   masthead, footer, the install dialog and the customiser drawer, as the Figma
   marketing direction draws them.

   Loaded by index.html ahead of css/homepage.css, which adds the homepage's
   own reset and its section styling on top.

   Class-scoped on purpose. Every selector here is anchored on .hp-* or :root,
   so the sheet can be loaded beside the design system without its rules
   reaching kit markup and repainting the product being demonstrated. No bare
   element selectors, and nothing here reads a --gt-* token.
   scripts/check-brand-layer.mjs holds both of those.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Custom properties
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — Type — */
  --hp-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hp-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --hp-font-alt: 'Archivo', system-ui, sans-serif;

  /* Figma tracks every size at exactly -1% of its font-size, so one em-relative
     value covers the whole scale instead of eleven px values. */
  --hp-track: -0.01em;
  --hp-track-caps: 0.06em;

  /* — Palette (Figma) —
     This is NOT the design system's token palette. The marketing page runs its
     own editorial look: white, near-black ink, one red accent. The design
     system's own colours appear only in the hero cycle (below), where the
     point is to show them off. */
  --hp-ink: #211F1F;
  --hp-ink-soft: #4B5468;
  --hp-line: #D6DBE3;
  --hp-line-soft: #E5E8ED;
  --hp-surface: #FFFFFF;

  /* Two reds. #F42534 is the Figma accent and sits at 4.07:1 on white — fine
     as a large graphic or a big fill, below AA for anything at text size. The
     darkened pair carries every small/bold text use, inline link, badge fill
     and solid button so the page passes 4.5:1 throughout.
       --hp-accent       #F42534  4.07:1  graphics, rules, icon details only
       --hp-accent-text  #D0121F  5.54:1  text, links, badges, solid buttons */
  --hp-accent: #F42534;
  --hp-accent-text: #D0121F;
  --hp-accent-hover: #A50D18;

  /* — Design-system token values, mirrored —
     Copies of --gt-primary / --gt-accent / --gt-ink from css/tokens.css; the
     homepage never loads that file, so they are restated here. Keep in sync by
     hand if the design system's defaults ever move.
     Only --hp-token-accent is currently on the page: the hero's cycling word
     was retuned to start and finish on the marketing red (§6) and its third
     state is now a hand-picked blue, so the other two are held here for the
     next time the cycle's palette is worked on rather than being live. */
  --hp-token-primary: #17191F;   /* 17.6:1 on white */
  --hp-token-accent: #2A6FDB;    /* 4.78:1 on white, 4.42:1 on #F4F6FB */
  --hp-token-ink: #1B1F2A;       /* 15.9:1 on white */

  /* — Ground —
     The dotted paper the brand sits on. Custom properties rather than one
     rule, because the three surfaces that wear it cannot share a selector: the
     homepage puts it on bare <body> (css/homepage.css §2) and the showcase
     overrides the kit's token ground the same way (css/showcase.css), neither
     of which may live in a sheet the design system also loads. The values live
     here once; each surface applies them with a selector it is allowed to use.
     (In the Figma file the grid reads as 38.4px; 40px is the production-sane
     value.) */
  --hp-ground: #FFFFFF;
  --hp-ground-dots: radial-gradient(circle at 19px 19px, rgba(33, 31, 31, .10) 2px, transparent 0);
  --hp-ground-grid: 40px 40px;

  /* — Shape & elevation — */
  --hp-radius: 8px;
  --hp-radius-sm: 5px;
  --hp-radius-pill: 999px;
  /* The card treatment: a hard black rectangle offset behind a bordered white
     one. Drawn as a box-shadow so it costs no extra element and never falls
     out of sync with the card's own size. */
  --hp-offset: 8px 6px 0 0 var(--hp-ink);
  --hp-lift: 0 5px 14px rgba(0, 0, 0, .25);

  /* — Layout —
     The frame puts section content in a 1184px column (left 368 of 1920) and
     the masthead in a 1280px one (left 320). These are the CONTENT widths;
     the gutter is added on top so the column measures 1184 / 1280 exactly at
     wide viewports and collapses to padding below them. */
  --hp-maxw: 1184px;
  --hp-maxw-header: 1280px;
  /* The masthead's own column on every page, and the one the design system's
     card and the live preview's frame share (css/marketing-chrome.css). */
  --hp-maxw-shell: 1600px;
  /* The sticky masthead's height unfolded (§4: 20px padding either side of the
     52px button row), for what has to clear it: the preview frame, the design
     system's sidenav and its anchor offset. Folded it is a few px shorter. */
  --hp-masthead-h: 92px;
  --hp-gutter: 40px;
  --hp-section-py: 120px;

  /* — Motion — */
  --hp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Skip link + shared layout utilities
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--hp-ink);
  color: #FFFFFF;
  padding: 12px 22px;
  border-radius: var(--hp-radius);
  font-weight: 700;
  text-decoration: none;
  transition: top .16s var(--hp-ease);
}
.hp-skip:focus-visible { top: 16px; }

.hp-wrap {
  width: 100%;
  max-width: calc(var(--hp-maxw) + var(--hp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--hp-gutter);
}
/* The masthead, and the "your brand" row, both sit on the wider column. */
.hp-wrap--header { max-width: calc(var(--hp-maxw-header) + var(--hp-gutter) * 2); }

.hp-section { position: relative; padding-block: var(--hp-section-py); }

/* Section intro: eyebrow / heading / lead, centred or left as the comp calls. */
.hp-head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hp-head > * { max-width: 100%; }
.hp-head h2 { font-size: 48px; max-width: 960px; }
.hp-head .hp-lead { max-width: 700px; }

.hp-eyebrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--hp-track-caps);
  text-transform: uppercase;
  color: var(--hp-accent-text);
}

.hp-lead { font-size: 18px; line-height: 1.4; color: var(--hp-ink-soft); }

.hp-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Long-form document: terms.html, privacy.html ──
   The only brand surface that is mostly running text. These two pages load
   index.html's sheets, so <body> and the reset come from css/homepage.css §2;
   what is here is the long-form type that page has no use for, and the
   heading sizes clamp rather than taking a §9 entry. */
.hp-doc__head { display: flex; flex-direction: column; gap: 18px; }
.hp-doc__head h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: var(--hp-track);
  max-width: 20ch;
}

.hp-doc__head + .hp-prose { margin-top: 56px; }

.hp-prose { max-width: 72ch; font-size: 17px; line-height: 1.6; }
/* 44px above, 14px below: the gap has to read as belonging to what follows it,
   because these pages are scanned by heading before they are read. */
.hp-prose h2 {
  margin: 44px 0 14px;
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: var(--hp-track);
}
.hp-prose h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.hp-prose p { margin: 0 0 18px; }
.hp-prose ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.hp-prose ol { margin: 0 0 18px; padding-left: 22px; list-style: decimal; }
.hp-prose li p, .hp-prose li pre { margin-top: 10px; }
.hp-prose li { margin-bottom: 8px; }
.hp-prose li:last-child { margin-bottom: 0; }
.hp-prose > :first-child { margin-top: 0; }
.hp-prose > :last-child { margin-bottom: 0; }
/* Underlined, not merely coloured: a link inside a paragraph cannot be told
   from bold text by hue alone (WCAG 1.4.1). */
.hp-prose a { color: var(--hp-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.hp-prose a:hover { color: var(--hp-accent-hover); }
.hp-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: #F3F4F7;
  border-radius: var(--hp-radius-sm);
  padding: 1px 6px;
}
.hp-prose pre {
  margin: 0 0 18px;
  padding: 14px 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
  background: #F3F4F7;
  border-radius: var(--hp-radius-sm);
}
.hp-prose pre code { padding: 0; background: none; font-size: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Buttons, links and focus
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 34px;
  min-height: 44px;             /* WCAG 2.2 target size */
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: var(--hp-track);
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-lift);
  cursor: pointer;
  transition: transform .16s var(--hp-ease), background-color .16s var(--hp-ease), box-shadow .16s var(--hp-ease);
}
.hp-btn svg { flex: none; }
.hp-btn:hover { transform: translateY(-1px); }
.hp-btn:active { transform: translateY(0); }

.hp-btn--dark { background: var(--hp-ink); color: #FFFFFF; }
.hp-btn--dark:hover { background: #373434; }

.hp-btn--white { background: #FFFFFF; color: var(--hp-ink); }
.hp-btn--white:hover { background: #F3F4F7; }

.hp-btn--red {
  background: var(--hp-accent-text);
  color: #FFFFFF;
  font-weight: 700;
  padding: 17px 28px;
  box-shadow: none;
}
.hp-btn--red:hover { background: var(--hp-accent-hover); }

/* The red arrow link under each "ways to ship" card. */
.hp-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hp-accent-text);
  text-decoration: none;
}
.hp-arrowlink svg { flex: none; transition: transform .16s var(--hp-ease); }
.hp-arrowlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-arrowlink:hover svg { transform: translateX(3px); }

/* The focus indicator for every brand control, on every surface. An outline
   rather than a box-shadow, for two reasons that only show up beside the
   design system: .hp-btn already spends its box-shadow on the lift, so a ring
   drawn with the same property is simply lost to it; and the kit's own
   :focus-visible ring is a box-shadow in --gt-* colours, which would repaint
   the brand's focus with the visitor's theme. Different properties cannot
   fight, so the outline composes with the lift and the box-shadow: none below
   takes the kit's themed ring off .hp-* markup.

   3px of ink with a 3px gap: 16:1 against the white and #FAFAFC grounds the
   brand puts controls on, and thicker than the 2px perimeter WCAG 2.2 Focus
   Appearance asks for. The same values css/homepage.css gives every control on
   index.html, so a control looks the same wherever it is used - and the
   homepage's own :focus-visible still adds the corner rounding there.
   The dark ground is handled where it occurs: the footer below, .hp-band--dark
   in css/homepage.css, the launcher tab in §7. */
.hp-skip:focus-visible,
.hp-btn:focus-visible,
.hp-arrowlink:focus-visible,
.hp-navtoggle:focus-visible,
.hp-header :focus-visible,
.hp-footer :focus-visible,
.hp-prose :focus-visible,
.hp-modal :focus-visible,
.hp-panel :focus-visible,
.hp-panel .gt-seg button:focus-visible,
.hp-panel .gt-palette button:focus-visible,
.hp-panel .gt-mini-select:focus-visible {
  outline: 3px solid var(--hp-ink);
  outline-offset: 3px;
  box-shadow: none;
}
/* The footer's ground is --hp-ink itself, so the ring above would be drawn in
   the colour it sits on. */
.hp-footer :focus-visible { outline-color: #FFFFFF; }
/* Restated, because the blanket none above would otherwise drop them for as
   long as the control is focused. */
.hp-btn:focus-visible { box-shadow: var(--hp-lift); }
.hp-btn--red:focus-visible { box-shadow: none; }
.hp-panel .gt-palette button:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }

/* The brand chrome is sticky or fixed, so it never scrolls under the masthead.
   The page's scroll margin (the kit's, homepage.css's, showcase.css's) would
   put it in the band the masthead covers, and focusing anything in it - the
   install dialog opening, or handing focus back to its trigger on close -
   would scroll the page up. */
.hp-header, .hp-header *,
.hp-modal, .hp-modal *,
.hp-panel, .hp-panel *,
.hp-panel__launch, .hp-panel__launch * { scroll-margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. Masthead
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 20px;
  /* Opaque, so the page does not show through as it scrolls underneath. */
  background-color: var(--hp-ground);
  /* The fold in §9 is keyed to this row's own width, not the viewport, so it
     answers to the space the row actually has: the customiser's 320px push
     pads <body>, the masthead with it, and the row folds correctly without a
     second breakpoint. Nothing inside
     the fold targets .hp-header itself, which it could not - an element is
     never matched by its own container query. */
  container: mast / inline-size;
  /* Stated, not inherited. Beside the design system this sheet loads over the
     kit, whose <body> carries the customiser's font and ink, so anything the
     masthead inherits would repaint with the theme underneath it. */
  font-family: var(--hp-font);
  letter-spacing: var(--hp-track);
  color: var(--hp-ink);
}
.hp-header__inner { display: flex; align-items: center; gap: 97px; }

.hp-logo { flex: none; display: block; }
.hp-logo img { width: 252px; height: auto; }

/* Centred between the logo and the CTA; the row's 97px gap is the least
   either side gets. */
.hp-nav { display: flex; align-items: center; gap: 50px; margin-inline: auto; }
.hp-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--hp-ink);
  text-decoration: none;
  white-space: nowrap;
}
.hp-nav a[aria-current='page'] { font-weight: 700; }
/* Outbound link. The arrow is decorative; the hidden text is what carries the
   warning, since target="_blank" with no cue is what WCAG 3.2.5 objects to.
   Nudged up a hair — the glyph's mass sits low in its box. */
.hp-nav__ext svg { width: 14px; height: 14px; flex: none; transform: translateY(-1px); }

/* Hover/focus underline, drawn out from the centre. A pseudo-element rather
   than text-decoration so it can be animated, and red rather than ink so the
   accent gets one more small outing in the masthead. The focus ring in §3 is
   still the focus indicator — this only rides along with it.
   The offset is measured off the line box (1.4em) inside the tap target, not
   off the bottom of the box, so the rule sits ~4px under the text and stays
   there when the target grows to 48px in the collapsed nav. Finite: it is a
   transition, and it settles. */
.hp-nav a { position: relative; }
.hp-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc((100% - 1.4em) / 2 - 4px);
  height: 2px;
  background: var(--hp-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease-out;
}
.hp-nav a:hover::after,
.hp-nav a:focus-visible::after { transform: scaleX(1); }

.hp-header .hp-btn { flex: none; }

/* Nav toggle — only ever visible on narrow screens (see §9). */
.hp-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  color: var(--hp-ink);
  background: none;
  border: 1px solid var(--hp-ink);
  border-radius: var(--hp-radius);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Footer
   Not in the Figma frame. Carried over from the previous homepage, restyled
   onto the dark band the migration section already establishes.
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-footer {
  background: var(--hp-ink);
  color: rgba(255, 255, 255, .78);
  /* Stated for the same reason as the masthead in §4. */
  font-family: var(--hp-font);
  line-height: 1.4;
  letter-spacing: var(--hp-track);
}
.hp-footer__main {
  max-width: var(--hp-maxw);
  margin-inline: auto;
  padding: 72px var(--hp-gutter) 56px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.hp-footer__brand img { width: 220px; height: auto; margin-bottom: 20px; }
.hp-footer__main p { font-size: 16px; line-height: 1.5; max-width: 40ch; }
.hp-footer h2 { font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.04; letter-spacing: var(--hp-track-caps); text-transform: uppercase; color: #FFFFFF; margin-bottom: 16px; }
.hp-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hp-footer nav a,
.hp-footer nav button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-family: inherit;
  font-size: 16px;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.hp-footer nav a:hover,
.hp-footer nav button:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* Outbound link, same construction as .hp-nav__ext in §4: the arrow is
   decorative and the hidden text is what carries the warning. Sized off the
   16px footer text, and nudged up a hair because the glyph's mass sits low in
   its box. */
.hp-footer__ext { gap: 6px; }
.hp-footer__ext svg { width: 13px; height: 13px; flex: none; transform: translateY(-1px); }
.hp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
/* Legal links sit in the bottom band as a row, not as a fifth column —
   a two-link column would be mostly empty and shifts the grid. */
.hp-footer nav.hp-footer__legal { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.hp-footer__bottom-inner {
  max-width: var(--hp-maxw);
  margin-inline: auto;
  padding: 24px var(--hp-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Install modal
   One dialog for every surface, marked up by js/install-dialog.js. It only
   READS the saved preview config to report what it would package — it never
   applies it to the page it is opened from and never writes to it, which is
   why nothing below resolves a --gt-* token.
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  background: rgba(20, 18, 18, .62);
  opacity: 0;
  transition: opacity .2s var(--hp-ease);
}
.hp-modal.is-open { opacity: 1; }
.hp-modal[hidden] { display: none; }

.hp-modal__panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: #FFFFFF;
  border: 1px solid var(--hp-ink);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-offset);
  padding: 40px;
  transform: translateY(8px);
  transition: transform .2s var(--hp-ease);
  /* Stated for the same reason as the masthead in §4: beside the design system
     the dialog sits over the kit, whose <body> and headings carry the
     customiser's font and ink. The tool must not wear the theme it packages. */
  font-family: var(--hp-font);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: var(--hp-track);
  color: var(--hp-ink);
}
.hp-modal__panel h2 {
  font-family: inherit;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: var(--hp-track);
  color: var(--hp-ink);
  margin: 0;
}
.hp-modal.is-open .hp-modal__panel { transform: translateY(0); }

.hp-modal__close {
  position: absolute;
  right: 14px; top: 14px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--hp-radius);
  cursor: pointer;
  /* The homepage's reset neutralises every <button>; the kit's does not, so
     without this the close control wears the UA's bevel on the shared pages. */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.hp-modal__close:hover { background: #F3F4F7; }

.hp-modal__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; padding-right: 40px; }
.hp-modal__head h2 { font-size: 32px; }
.hp-modal__head p { font-size: 16px; line-height: 1.5; color: var(--hp-ink-soft); }

.hp-modal__nudge {
  display: flex;
  gap: 14px;
  padding: 16px;
  margin-bottom: 22px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  background: #FAFAFC;
}
.hp-modal__nudge[hidden] { display: none; }
.hp-modal__nudge strong { display: block; margin-bottom: 4px; }
.hp-modal__nudge p { font-size: 15px; line-height: 1.45; color: var(--hp-ink-soft); margin-bottom: 12px; }
.hp-modal__nudge a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 15px; font-weight: 700; color: var(--hp-accent-text); }
.hp-modal__nudge-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--hp-line);
  color: var(--hp-accent-text);
}
.hp-modal__nudge-icon svg { width: 17px; height: 17px; }

.hp-modal__config { margin-bottom: 24px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.hp-modal__config summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.hp-modal__config summary::-webkit-details-marker { display: none; }
/* The head of the same box on the success view, where there is nothing left to
   fold away. */
.hp-modal__config-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; font-weight: 700; }
.hp-modal__config-ico { flex: none; display: flex; color: var(--hp-accent-text); }
.hp-modal__chev { flex: none; transition: transform .18s var(--hp-ease); }
.hp-modal__config[open] .hp-modal__chev { transform: rotate(180deg); }
.hp-modal__state { margin-left: auto; font-weight: 400; font-size: 14px; color: var(--hp-ink-soft); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-pill);
  font-size: 13px;
  line-height: 1.4;
}
.hp-chip b { font-weight: 700; }
.hp-chip i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }

.hp-form { display: flex; flex-direction: column; gap: 18px; }
.hp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp-field { display: flex; flex-direction: column; gap: 6px; }
.hp-field > label { font-size: 15px; font-weight: 700; }
.hp-field > input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-sm);
  background: #FFFFFF;
  /* The homepage's reset hands form controls the page's type; the kit's leaves
     them on the UA's. Stated here so both surfaces read the same. */
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.hp-field > input:hover { border-color: var(--hp-ink-soft); }
.hp-field > input[aria-invalid='true'] { border-color: var(--hp-accent-text); border-width: 2px; }
.hp-req { color: var(--hp-accent-text); }
.hp-hint { font-size: 14px; color: var(--hp-ink-soft); }
.hp-err { font-size: 14px; font-weight: 700; color: var(--hp-accent-text); }
.hp-err[hidden] { display: none; }

/* Same story as .hp-modal__close: the UA's fieldset border and legend padding
   survive on the shared pages, where no reset takes them off. */
.hp-target { border: 0; padding: 0; margin: 0; min-width: 0; }
.hp-legend { font-size: 15px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.hp-choices { display: flex; flex-direction: column; gap: 10px; }
.hp-choice { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; min-height: 34px; cursor: pointer; }
.hp-choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hp-accent-text); }
/* Boxed target choice and a rule above the consents, mirroring the
   design-system dialog. */
.hp-target__options { padding: 14px 16px; background: #FAFAFC; border: 1px solid var(--hp-line); border-radius: var(--hp-radius-sm); }
.hp-consents { padding-top: 18px; border-top: 1px solid var(--hp-line-soft); }
.hp-consents .hp-choice { font-size: 14px; min-height: 24px; }
.hp-consents .hp-choice input { width: 18px; height: 18px; margin-top: 0; }

/* The reCAPTCHA disclosure's links. --hp-accent-text (5.5:1 on the white
   panel), never --hp-accent, which is 4.07:1 and fails AA at this size. */
.hp-hint a,
.hp-consents .hp-choice a { color: var(--hp-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* The alert is a rule-and-indent rather than a box: it appears between the
   consents and the submit button, where a filled panel would read as another
   question. */
.hp-modal__alert { border-left: 3px solid currentColor; padding-left: 12px; }
.hp-modal__submit { width: 100%; }
.hp-modal__foot { text-align: center; }

.hp-modal__success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hp-modal__success[hidden] { display: none; }
.hp-modal__success h2 { font-size: 30px; }
.hp-modal__success > p { font-size: 16px; line-height: 1.5; color: var(--hp-ink-soft); }
.hp-modal__success .hp-modal__config { align-self: stretch; margin-bottom: 0; }
.hp-modal__success-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #E8F3ED;
  color: #14623F;
}
.hp-modal__success-icon svg { width: 29px; height: 29px; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Customiser drawer
   The slide-out panel js/govtheme.js mounts on the design system and the live
   preview. It is the tool, not the theme: it edits the tokens the page around
   it renders with, so it wears the brand instead - which is also why nothing
   below resolves a --gt-* token and why the drawer no longer has to be pinned
   to the shipped defaults at runtime.

   Layout, transitions and the markup's shape are unchanged from the .gt-panel
   rules this replaces. What moved is colour, type and radii. The push/overlay
   mechanics - the body padding, the scrim, the launcher clearance kit
   containers need - stay in css/marketing-chrome.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.hp-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 88vw; z-index: 160;
  display: flex;
  flex-direction: column;
  background: var(--hp-surface);
  border-right: 1px solid var(--hp-line);
  box-shadow: 0 24px 60px -24px rgba(33, 31, 31, .34);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  /* Stated for the same reason as the masthead in §4, and here it is the whole
     point: on the demo the computed tokens land on <html>, so anything the
     drawer inherits follows the preview into Lora and dark ink. Every control
     inside restates its own size, so one declaration covers the subtree. */
  font-family: var(--hp-font);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: var(--hp-track);
  color: var(--hp-ink);
}
.hp-panel--collapsed {
  transform: translateX(-102%);
  /* The collapsed drawer's ~45 controls must leave the tab order and the
     accessibility tree, and visibility does both natively - no JS state to
     drift out of step with the class. Delayed by the slide's own duration on
     the way out so the panel is still painted while it travels, and restored
     with no delay on the way in (the 0s above). .hp-panel__launch is a sibling
     of the panel rather than a child, so it is not inside the hidden subtree. */
  visibility: hidden;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s .32s;
}

.hp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--hp-line); flex: 0 0 auto; }
.hp-panel__brand { display: flex; align-items: center; gap: 10px; }
.hp-panel__brand strong { display: block; font-size: 16px; font-weight: 900; line-height: 1.04; color: var(--hp-ink); }
.hp-panel__brand span { display: block; font-size: 11px; color: var(--hp-ink-soft); }
.hp-panel__head-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* Same story as .hp-modal__close in §6: the homepage's reset neutralises every
   <button>, the kit's only hands it the inherited font, so beside the design
   system these two wear the UA's bevel without the declarations below. */
.hp-panel__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--hp-radius-sm);
  padding: 0;
  border: 0;
  background: none;
  color: var(--hp-ink-soft);
  cursor: pointer;
}
.hp-panel__close:hover { background: #F3F4F7; color: var(--hp-ink); }

.hp-panel__reset {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-sm);
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: inherit;
  color: var(--hp-ink-soft);
  cursor: pointer;
}
.hp-panel__reset:hover { color: var(--hp-accent-text); border-color: var(--hp-accent-text); background: #FAFAFC; }
.hp-panel__reset svg { width: 14px; height: 14px; flex: 0 0 auto; }

.hp-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 16px; }
/* The brand's eyebrow treatment (§2), at the drawer's smaller scale and in
   ink rather than red so the red is kept for the reset and install actions. */
.hp-panel__section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--hp-track-caps);
  text-transform: uppercase;
  color: var(--hp-ink);
  margin: 22px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hp-line);
}
.hp-panel__group { margin-bottom: 14px; }
.hp-panel__label { font-size: 12px; font-weight: 700; color: var(--hp-ink); margin-bottom: 7px; }
.hp-panel__select { width: 100%; }
.hp-panel__color { display: flex; align-items: center; gap: 11px; }
.hp-panel__color input[type="color"] {
  width: 46px; height: 38px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-sm);
  background: none;
  cursor: pointer;
  padding: 3px;
  flex: 0 0 auto;
}
.hp-panel__hint { font-size: 11px; color: var(--hp-ink-soft); line-height: 1.35; }
.hp-panel__foot { flex: 0 0 auto; padding: 14px 16px; border-top: 1px solid var(--hp-line); display: flex; flex-direction: column; gap: 8px; background: #FAFAFC; }
/* The brand button at the drawer's scale: 18px type and a 34px inset are drawn
   for a 1184px column, not a 320px panel. */
.hp-panel__install { width: 100%; gap: 8px; padding: 12px 18px; font-size: 15px; font-weight: 700; }

/* ── The controls, scoped to the drawer ──
   The segmented control, the swatches and the mini select are defined on
   tokens in css/marketing-chrome.css and restyled here rather than redefined:
   only the properties that would otherwise resolve a --gt-* token are
   overridden, and only inside the panel, so the controls wear the brand like
   the rest of the drawer whatever theme the visitor picks. */
.hp-panel .gt-seg { background: #F3F4F7; border-radius: var(--hp-radius-sm); }
.hp-panel .gt-seg--wrap { flex-wrap: wrap; }
.hp-panel .gt-seg--wrap button { flex: 1 1 auto; justify-content: center; }
.hp-panel .gt-seg button { border-radius: 3px; font-size: 12px; font-weight: 700; color: var(--hp-ink-soft); }
.hp-panel .gt-seg button:hover { color: var(--hp-ink); }
/* White on --hp-ink is 16:1. */
.hp-panel .gt-seg button[aria-pressed="true"] { background: var(--hp-ink); color: #FFFFFF; box-shadow: none; }
.hp-panel .gt-palette { flex-wrap: wrap; }
.hp-panel .gt-palette button[aria-pressed="true"]::after { border-color: var(--hp-ink); }
/* background-color, not background: the shorthand would drop the chevron the
   base rule paints as a background-image. */
.hp-panel .gt-mini-select {
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius-sm);
  background-color: var(--hp-surface);
  color: var(--hp-ink);
  font-family: var(--hp-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--hp-track);
}

/* Launcher tab - the vertical tab on the left edge while the drawer is hidden.
   Black with a red cog: the tab has to read as belonging to the customiser
   rather than to whatever theme the page is wearing, which is why it is the
   one piece of brand chrome that is not on the brand's white ground. */
.hp-panel__launch {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 158; display: none;
  flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 13px;
  border: none;
  border-radius: 0 var(--hp-radius) var(--hp-radius) 0;
  background: #000000;
  color: #FFFFFF;
  font-family: var(--hp-font);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: var(--hp-track);
  cursor: pointer;
  box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .45);
  transition: padding .16s, background-color .16s, box-shadow .16s;
}
/* 5.2:1 on black - comfortably past the 3:1 non-text minimum. */
.hp-panel__launch svg { flex: 0 0 auto; stroke: var(--hp-accent); }
.hp-panel__launch-text { writing-mode: vertical-rl; }
.hp-panel--collapsed ~ .hp-panel__launch { display: inline-flex; }
.hp-panel__launch:hover { background: var(--hp-ink); padding-right: 17px; }
/* Inset and white, unlike every other control in §3: the tab sits half off the
   left edge of a page whose ground is the visitor's theme, so an ink ring
   outside it has no guaranteed contrast. White inside the black tab is 21:1
   whatever the page is wearing. */
.hp-panel__launch:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -4px; }
/* A red halo, three pulses after load, so a first-time visitor finds the
   customiser. Finite, and stopped by §10 under reduced motion. */
@keyframes hp-halo {
  from { box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .45), 0 0 0 0 rgba(244, 37, 52, .6); }
  to   { box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .45), 0 0 0 18px rgba(244, 37, 52, 0); }
}
.hp-panel--collapsed ~ .hp-panel__launch--halo { animation: hp-halo 1.4s ease-out 1s 3; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. Preview shell
   preview.html: the brand masthead, and under it the mock agency site in the
   same wide container the design system sits in. The frame fills the first
   viewport under the masthead (css/marketing-chrome.css), the visitor scrolls
   the site inside it, and the page scrolls on past it to the brand footer.

   The site sits in an <iframe>, not a <div>. An iframe is a real browsing
   context, so the site inside gets its own viewport: its @media queries answer
   to the frame's width, and because the frame is also its scrollport, the
   site's sticky header and side menu, its back-to-top, the ⌘K palette and the
   mobile drawer all work against it untouched - none of which a div could give
   them. The wrapper is also the page's theme scope, but only so the
   customiser's tokens land somewhere inert - custom properties do not cross
   into an iframe's document, and the site inside is themed by pushToPreview()
   and by its own read of shared localStorage instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The brand ground (§1) the masthead and the frame sit on. */
.hp-shell {
  background-color: var(--hp-ground);
  background-image: var(--hp-ground-dots);
  background-size: var(--hp-ground-grid);
}

/* ── The frame ──
   The same card the design system is laid out on (css/showcase.css). The
   drawer's Preview section sets the window's width; the ground shows either
   side when it is narrower than the column. */
.hp-preview__window {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-lift);
  background: #FFFFFF;
  transition: width .24s cubic-bezier(.4, 0, .2, 1);
}
.hp-preview__frame {
  display: block;
  width: calc(100% / var(--hp-zoom, 1));
  height: calc(100% / var(--hp-zoom, 1));
  border: 0;
  background: #FFFFFF;
  /* Zoom out: the frame is drawn larger and scaled back down to fit, so the
     site inside lays out at e.g. 125% of the window's width and shows more. */
  transform: scale(var(--hp-zoom, 1));
  transform-origin: 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. Responsive
   The comp is desktop-only at 1920. Everything below is derived: the section
   rhythm and gutters tighten, the nav folds into a disclosure, the footer
   collapses to two columns then one, and the dialog goes full-bleed.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  :root { --hp-section-py: 100px; }
}

/* Nav collapses to a toggle. The masthead needs ~1166px to lay out
   logo + four links + CTA in a row, and at this width the row is the header
   column: 1280 outer less the 40px gutters is 1200, with nothing in it able to
   give way. One pixel under and the CTA overflows rather than tightening up.
   Keyed to the masthead's own width (§4), not the window's, so the fold is
   right wherever the row is narrower than the window - a viewport query would
   only be right while the two coincide.
   Closed by default; the scripts only flip aria-expanded and the panel is
   styled off that, so what assistive tech is told and what the eye sees can't
   diverge. The breakpoint lives here and nowhere else - both scripts read the
   fold back out of the toggle's computed display. */
@container mast (max-width: 1280px) {
  .hp-navtoggle { display: flex; }
  .hp-header__inner { flex-wrap: wrap; gap: 20px; }
  .hp-nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline: 0;
    padding-top: 8px;
    border-top: 1px solid var(--hp-line);
  }
  .hp-nav a { min-height: 48px; }
  /* Links are full-width rows here so the whole row is a tap target, which
     makes a centre-out rule read as a divider rather than an underline.
     Plain text-decoration instead; the rows keep their width. */
  .hp-nav a::after { content: none; }
  .hp-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .hp-navtoggle[aria-expanded='false'] + .hp-nav { display: none; }
  .hp-header > .hp-wrap > .hp-header__inner > .hp-btn { display: none; }
}

@media (max-width: 1000px) {
  :root { --hp-section-py: 84px; --hp-gutter: 28px; }

  .hp-footer__main { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  :root { --hp-section-py: 64px; --hp-gutter: 20px; }

  /* css/homepage.css restates this alongside its own section headings; the copy
     here is what the shared pages get. */
  .hp-head h2 { font-size: clamp(30px, 7vw, 40px); }

  .hp-modal__head h2 { font-size: 26px; }

  .hp-footer__main { grid-template-columns: 1fr; padding-top: 56px; }
  .hp-footer__bottom-inner { flex-direction: column; align-items: flex-start; }

  .hp-modal { padding: 0; }
  .hp-modal__panel { max-width: none; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; padding: 28px 20px 48px; }
  .hp-form__row { grid-template-columns: 1fr; }

  .hp-panel { width: 300px; }
}

/* The tab is the only way into the drawer on every surface, so it stays at
   every width. A phone has no side room to clear it, so there it drops to
   the bottom corner as the cog alone, opposite the demo's back-to-top; its
   text stays as the accessible name. css/marketing-chrome.css drops the
   content clearance at the same width. */
@media (max-width: 720px) {
  .hp-panel__launch { top: auto; bottom: 16px; transform: none; padding: 12px; }
  .hp-panel__launch:hover { padding-right: 12px; }
  .hp-panel__launch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 420px) {
  :root { --hp-gutter: 16px; }
  .hp-logo img { width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. Motion
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* The nav underline still appears on hover/focus — it just doesn't grow. */
  .hp-nav a::after { transition: none; }

  .hp-btn, .hp-arrowlink svg, .hp-modal, .hp-modal__panel, .hp-modal__chev { transition: none; }
  .hp-btn:hover { transform: none; }
  .hp-panel__launch--halo, .hp-panel--collapsed ~ .hp-panel__launch--halo { animation: none; }
}