/*
  managero.co.uk, the marketing site.

  Three rules from the brand document are load-bearing here and must not be
  "tidied":

    1. #71B869 is a FILL colour, not a text colour. It measures 2.4:1 on white,
       which is below the 4.5:1 minimum. Green TEXT is --green-700 #3B8334.
    2. THE BODY FACE IS THE READER'S OWN SYSTEM FACE, and NO WEBFONT IS LOADED
       AT ALL. This page was set in Inter, which is the single most
       recognisable signal of a landing page somebody generated; a system
       stack renders like the software the reader already has open, costs no
       bytes and cannot flash. Do not "upgrade" it back to a webfont, and in
       particular not to Geist, DM Sans, Manrope or Satoshi, which land in
       exactly the same place Inter did. The stack is deliberately the boring,
       universally installed one - system-ui, then Segoe UI, Roboto,
       Helvetica, Arial. If Arial renders for somebody, that is correct.
    3. THERE IS NO MONOSPACE FACE. Roboto Mono was self-hosted here for prices
       and readings until 2 September 2026, when Toby asked for ordinary type:
       a mono face on a marketing page reads as a developer aesthetic, and it
       cost a webfont to say something `font-variant-numeric: tabular-nums`
       says for free on the ordinary sans. Figures that must line up in a
       column use tabular-nums. Do not reintroduce a mono family or a
       @font-face block - THE SITE MUST LOAD ZERO WEBFONTS.

  Green is the ONLY accent hue. THE NEUTRALS ARE TRUE NEUTRALS - white, grey
  and neutral black, with no yellow in them. They were a warm paper off-white
  until 2 September 2026, when Toby asked for the page to be white rather than
  off-white and for the warmth to come out of the greys, the hairlines, the
  ink and the shadows with it. That is a decision, not an oversight: do not
  helpfully re-warm this palette. The page background is #ffffff.
*/

/* ---------- tokens ---------- */

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* TRUE NEUTRALS. Not one of these carries any yellow: every channel is
     equal, so the page reads white rather than like paper under a kitchen
     light. Toby chose this on 2 September 2026, replacing the warm off-white
     scale that used to live here. Where two surfaces have to be told apart,
     the difference is a neutral grey or a hairline - never warmth. */
  --paper: #ffffff; /* the page background, and the point of the request */
  --paper-2: #f6f6f6;
  --surface: #ffffff;
  --panel: #f0f0f0; /* the neutral grey the hero screenshot sits on */

  --ink: #1a1a1a;
  --ink-2: #3a3a3a;

  --slate-700: #6a6a6a; /* muted body text */
  --slate-300: #cccccc;
  --slate-200: #e4e4e4; /* hairlines */
  --slate-100: #ededed;
  --slate-50: #f6f6f6;

  --green-50: #edf5ea;
  --brand: #71B869; /* fills only */
  --green-700: #3b8334; /* green text and meaningful green icons */

  /* Neutral black, at exactly the opacities the warm-tinted versions used. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.035), 0 12px 32px rgba(0, 0, 0, 0.07);

  /* THERE IS NO --shadow-float AND NO COLOURED SHADOW. The screenshots used to
     hover over the page on a 70px blur and the buttons sat on a green glow.
     Both are template furniture. A screenshot gets a hairline border; a button
     gets a fill or a border. */

  --gutter: 20px;
  /* Retuned down to the app's scale — task P138-#70. */
  --radius-card: 6px;
  --r-sm: 4px;
  --r-lg: 8px;

  /* NO --r-pill. Buttons look like buttons here: 4px, not a lozenge. */
  --r-btn: 4px;

  --nav-h: 68px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 28px;
  }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap--wide {
  max-width: 74rem;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--green-700);
}

:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ORDINARY TRACKING ON HEADINGS. These ran to -0.035em until 2 September
   2026. Squeezed tracking on a big heading is the strongest "generated
   landing page" tell there is, and Toby asked for ordinary type, so every
   heading here sits at the face's normal spacing. There is no negative
   tracking anywhere in this stylesheet; do not reintroduce any. */
h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: normal;
}

h1 {
  font-size: clamp(36px, 5.4vw, 54px);
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.05;
}

h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 700;
  letter-spacing: normal;
}

h3 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: normal;
}

p {
  margin: 0 0 18px;
}

@media (min-width: 720px) {
  body {
    font-size: 18px;
  }
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

/* ---------- sticky header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}

.site-header .wrap {
  max-width: 74rem;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--nav-h);
}

.logo {
  display: inline-flex;
  flex: 0 0 auto;
}

.logo img {
  width: 138px;
  height: auto;
  display: block;
}

/* Centre column of links, per the reference layout. */
.site-nav {
  display: none;
  gap: 30px;
  font-size: 15.5px;
  margin: 0 auto;
}

.site-nav a {
  color: var(--slate-700);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

/* Right-hand cluster: a quiet text link then the solid green pill. */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex: 0 0 auto;
}

.header-signin {
  display: none;
  color: var(--slate-700);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
}

.header-signin:hover {
  color: var(--ink);
}

@media (min-width: 900px) {
  .site-nav,
  .header-signin {
    display: flex;
  }
}

/* Narrow phones: shrink the header furniture so the logo, the pill CTA and the
   menu button all fit on one line. Measured at 390px, where the untuned sizes
   pushed the button off the right edge. */
@media (max-width: 559px) {
  .site-header .wrap {
    gap: 10px;
  }

  .logo img {
    width: 112px;
  }

  .header-right {
    gap: 10px;
  }

  .btn--sm {
    padding: 0 15px;
    font-size: 13.5px;
    min-height: 38px;
  }

  .nav-toggle {
    width: 38px;
    height: 38px;
  }
}

/* Very narrow phones (iPhone SE and similar, 320px). The 559px tuning above
   was measured at 390px and still left the header cluster 12px wider than the
   viewport here, which gave the whole page a horizontal scroll. Shrink the
   logo and the pill a little further so the row fits. */
@media (max-width: 359px) {
  .logo img {
    width: 96px;
  }

  .header-right {
    gap: 8px;
  }

  .btn--sm {
    padding: 0 11px;
    font-size: 13px;
  }

  .nav-toggle {
    width: 36px;
    height: 36px;
  }
}

/* ---------- mobile nav ---------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  display: block;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded='true'] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded='true'] .icon-close {
  display: block;
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--slate-200);
  background: var(--paper);
  padding: 10px var(--gutter) 22px;
}

.mobile-nav[data-open='true'] {
  display: block;
}

@media (min-width: 900px) {
  .mobile-nav[data-open='true'] {
    display: none;
  }
}

.mobile-nav a {
  display: block;
  padding: 13px 2px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--slate-200);
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

/* ---------- buttons ---------- */

/*
  A FLAT FILL AND A 5px RADIUS, and no shadow of any colour under it.

  This button used to be a lozenge sitting on 20px of green glow that grew to
  26px and lifted a pixel when you pointed at it. A coloured glow under a call
  to action is the most reliable tell there is that a page was assembled from
  a template, and there is nothing about keeping fridge records that wants a
  button to hover. Colour is the affordance; the fill is the button.

  Do not add box-shadow, transform or transition back to any of these rules.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-btn);
  background: var(--brand);
  color: #10240d;
  font-weight: 650;
  font-size: 16.5px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid #5da755;
  white-space: nowrap;
}

.btn:hover {
  background: #63ab5b;
  color: #10240d;
}

.btn--sm {
  /* 44px, not 42: this is the header "Book a demo" and it is tapped with a
     thumb far more often than it is clicked with a mouse (task P138-#119). */
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

/* The bordered one that sits beside the solid one. It is also what the header
   "Book a demo" uses: at £18.99 a month the nav does not need to shout. */
.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--slate-300);
}

.btn--ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--slate-700);
}

/* ---------- sections ---------- */

section {
  padding: 56px 0;
}

@media (min-width: 720px) {
  section {
    padding: 84px 0;
  }
}

.section--tint {
  background: var(--paper-2);
}

/*
  THE SHORT SECTION. One sentence, no heading, and a lot of air. It exists to
  break a page that would otherwise be six sections of exactly the same shape,
  which is what a template reads like. Adding a heading or a second paragraph
  here undoes the only thing it does.
*/
.section--line {
  padding: 34px 0 88px;
}

.section--line p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(21px, 2.9vw, 29px);
  line-height: 1.35;
  letter-spacing: normal;
  font-weight: 600;
}

@media (min-width: 720px) {
  .section--line {
    padding: 24px 0 116px;
  }
}

/* And the opposite: the section immediately after it runs two columns on a
   wide screen, so the page goes sparse, then dense, rather than even. */
.section--dense {
  padding-top: 48px;
}

@media (min-width: 900px) {
  .section--dense .points {
    columns: 2;
    column-gap: 48px;
  }

  .section--dense .points li {
    break-inside: avoid;
    margin-bottom: 30px;
  }
}

.lede {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--slate-700);
  max-width: 62ch;
}

.meta {
  font-size: 14.5px;
  color: var(--slate-700);
}

/* Kept as a hook for figures that must line up in a column. It is NOT a
   monospace face any more - the ordinary sans with tabular figures does the
   same job for zero bytes. See rule 3 at the top of this file. */
.mono {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid #dceed8;
  border-radius: var(--r-btn);
  padding: 7px 15px;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

/* ---------- hero ---------- */

.hero {
  padding-top: 44px;
  padding-bottom: 24px;
  overflow: hidden;
}

@media (min-width: 720px) {
  .hero {
    padding-top: 44px;
    padding-bottom: 40px;
  }
}

.hero .wrap {
  max-width: 74rem;
}

.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
    gap: 52px;
    /* TOP, NOT CENTRE. Centring the two columns would put a band of empty
       page above the H1 and push the headline down. Top alignment keeps the
       headline where a reader looks first and holds the shot level with it.
       (The right column used to be a stack — the laptop shot with a
       hazard-analysis crop beneath it — and was the taller of the two; the
       crop was removed on 3 September 2026 and top alignment still reads
       better than centring.) */
    align-items: start;
  }
}

.hero h1 {
  margin-bottom: 20px;
  text-wrap: balance;
}

/* The narrow measure belongs to the two-column hero only. On a single-column
   hero (compare, 404) it would leave a column of dead space to the right. */
.hero-grid .lede {
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-note {
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--slate-700);
}

/* ---------- the framed product shot ---------- */

/* The laptop shot of the signed plan, with the phone panel floated over its
   corner. A hazard-analysis crop used to stack beneath the laptop shot; it was
   removed on 3 September 2026. The phone is the only panel that floats. */
.shot {
  position: relative;
  display: grid;
  gap: 10px;
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  isolation: isolate;
}

/* Between the phone and the two-column hero the shot has the whole page width
   to itself, and left alone it would blow the stack up to a metre of
   screenshot. Hold it to a readable measure and centre it. */
@media (min-width: 560px) and (max-width: 999px) {
  .shot {
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (min-width: 1000px) {
  .shot {
    padding: 16px 20px;
  }
}

/*
  THE SCREENSHOT, AND NOTHING AROUND IT.

  There was a drawn browser bar above this image once, with three grey dots
  and app.managero.co.uk set in a mono pill. It was a picture of a browser
  wrapped around a picture of the product, and a reader who has used a browser
  gains nothing from being shown one. A real screenshot behind a hairline is
  more persuasive than a mounted one, so: 1px border, no shadow, no chrome.
  Do not add a frame back.
*/
.browser {
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--slate-300);
}

.browser img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  THE TWO SUPPORTING PANELS.

  They were text-and-icon chips once, and a chip that says "Opening checks"
  next to a picture of the product is decoration pretending to be evidence.
  It carries a REAL SCREENSHOT of the running app: the temperature screen,
  captured at a 390px phone viewport. A drawn interface here would be the exact
  tell this page exists to remove, so if this image is ever regenerated it must
  be regenerated by driving the app, never by hand.

  There was a second card (--a) holding the hazard analysis of one plan step,
  stacked under the big shot at the full width of the column. It was removed on
  3 September 2026. The phone (--b) is the only float card left, and it
  overlaps the big shot, as it always has.

  NO FRAME, NO SHADOW. A hairline border and nothing else. See .browser above.
*/
.float-card {
  position: absolute;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  padding: 8px 8px 2px;
}

.float-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--slate-200);
  border-radius: 2px;
}

.float-card figcaption {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  padding: 8px 4px 6px;
}

/* THE PHONE BEZEL IS GONE. It was a black rounded rectangle drawn around a
   real 390px screenshot, which is a device frame, which is the same mistake
   the browser bar above was making. The screenshot stands on its own. */

.float-card--b {
  right: -8px;
  top: 26px;
  width: 128px;
}

/* The phone is taller than the laptop shot it sits beside, so it has to
   overhang somewhere. It overhangs the TOP — a phone lying across the corner
   of a sheet of paper, not on top of the words. Check this offset again if
   either panel changes proportion. */
@media (min-width: 1000px) {
  .float-card--b {
    right: -26px;
    top: -18px;
    width: 146px;
  }
}

/* Below 560px there is no room to float anything without sitting on the
   screenshot, so the phone stops floating too and the shot becomes one column:
   the laptop screen, then the phone. They are evidence, not ornament, so
   neither is dropped. The phone is held to a little over half
   the column — at full width a 390x780 capture would run the page on for
   another screen and a half on its own. */
@media (max-width: 559px) {
  .shot {
    gap: 12px;
    padding: 16px;
  }

  .float-card--b {
    position: static;
    width: 58%;
    justify-self: start;
  }
}

/* ---------- feature cards ---------- */

.cards {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  SIX COLUMNS, FOUR CARDS, THREE DIFFERENT WIDTHS. A row of three identical
  boxes is the single most recognisable shape a generated page has. The spans
  below (4, 2, 3, 3) are chosen so no two cards in a row are the same size and
  no row is a clean thirds split. Do not "tidy" this back to repeat(3, 1fr).
*/
@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
  }

  .card--lead {
    grid-column: span 4;
  }

  .card--narrow {
    grid-column: span 2;
  }

  .card--half {
    grid-column: span 3;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-card);
}

@media (min-width: 760px) {
  .card--lead {
    padding: 34px 32px 36px;
  }

  .card--lead h3 {
    font-size: 23px;
  }

  .card--lead p {
    font-size: 17px;
    max-width: 42ch;
  }
}

.card p {
  margin: 0;
  color: var(--slate-700);
  font-size: 16px;
}

/* The rounded-square pastel icon tile above each heading. */
.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--green-50);
  color: var(--green-700);
  margin-bottom: 18px;
}

.tile svg {
  display: block;
}

/* ---------- lists ---------- */

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

.points li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 26px;
}

.points li:last-child {
  margin-bottom: 0;
}

.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
}

.points p {
  margin: 0;
  color: var(--slate-700);
  font-size: 16px;
}

/* ---------- quote ---------- */

blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.45;
  letter-spacing: normal;
}

/* ---------- price ---------- */

.price {
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

/* The price, in the ordinary sans with tabular figures. It was set in Roboto
   Mono until 2 September 2026; a monospace price on a marketing page reads as
   a developer aesthetic. */
.price-figure {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  display: block;
  margin-bottom: 4px;
  letter-spacing: normal;
}

.price-rows {
  margin: 0 0 18px;
  padding: 0;
}

.price-rows div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--slate-200);
}

.price-rows div:last-child {
  border-bottom: 0;
}

.price-rows dt {
  margin: 0;
}

.price-rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- the status notice ---------- */

.notice {
  background: var(--green-50);
  border: 1px solid #dceed8;
  border-radius: var(--radius-card);
  padding: 24px;
  margin: 28px 0 0;
}

.notice h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---------- footer ----------

   A DARK BAND, and the only dark thing on the site. It ends a long light page
   the way a full stop ends a sentence; without it the last section just stops.

   THE COLUMNS ARE BUILT FROM PAGES THAT EXIST. There are six pages here, plus
   the app login and one mailto. A four-column footer padded out with
   Integrations, Security and Resources would need five destinations that are
   not built, and a footer link that 404s is a worse signal than a short
   footer. Two columns, every href resolving.
*/

.site-footer {
  background: #1a1a1a;
  color: #a8a8a8;
  font-size: 15px;
  padding: 56px 0 0;
}

.site-footer .wrap {
  max-width: 74rem;
}

.footer-grid {
  display: grid;
  gap: 36px 28px;
  padding-bottom: 44px;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The brand block is wider than a link column, and the form is wider than
   both. Four equal columns would be the template shape again. */
@media (min-width: 1020px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: 40px;
  }
}

.footer-brand img {
  display: block;
  width: 152px;
  height: auto;
  margin-bottom: 16px;
}

.footer-brand p {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
  color: #939393;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
}

.site-footer h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  color: #f5f5f5;
  margin: 0 0 6px;
}

.site-footer a {
  color: #a8a8a8;
  text-decoration: none;
}

.site-footer a:hover {
  color: #f5f5f5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-form p {
  margin: 0 0 14px;
  max-width: 34ch;
  line-height: 1.55;
  color: #939393;
}

/* Input and button share one shell. Squared off, like the buttons. */
.footer-form form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: var(--r-btn);
  padding: 5px 5px 5px 14px;
  max-width: 340px;
}

.footer-form input[type='email'] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 10px 0;
}

.footer-form input[type='email']::placeholder {
  color: #898989;
}

.footer-form input[type='email']:focus {
  outline: none;
}

/* An OUTLINE, not a green box-shadow. Same reason as the buttons: there is no
   coloured shadow anywhere on this site. This one still has to be visible, so
   it is drawn rather than deleted. */
.footer-form form:focus-within {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
}

.footer-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px, not 40 (task P138-#119). This is the only control in the footer
     and it is the send button for the one form on the page. */
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 3px;
  background: var(--brand);
  color: #10240d;
  cursor: pointer;
}

.footer-form button:hover {
  background: #63ab5b;
}

.footer-form-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #848484;
}

.footer-form-note a {
  color: #848484;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-base {
  border-top: 1px solid rgba(245, 245, 245, 0.12);
  padding-top: 22px;
  padding-bottom: 34px;
  font-size: 13.5px;
  color: #848484;
}

.footer-base p {
  margin: 0 0 8px;
  max-width: 78ch;
}

.footer-base p:last-child {
  margin-bottom: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* THUMB-SIZED FOOTER LINKS ON PHONES (task P138-#119).

   The footer nav links render 26px tall. The 11px column gap made them LOOK
   separated, but a gap is not a hit area: the tappable box was 26px against
   the 44px a thumb needs, so neighbouring links sat 37px apart and the wrong
   one was easy to hit. The gap moves into the links themselves, which leaves
   the footer looking almost identical and makes every link 44px to tap. */
@media (max-width: 899px) {
  .footer-col {
    gap: 0;
  }

  .footer-col h2 {
    margin-bottom: 12px;
  }

  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- the questions page ---------- */

/*
  A definition list, not a set of collapsed accordions. Every answer on /faq
  is short enough to read at a glance, and hiding ten short answers behind ten
  taps buys nothing on a phone and costs the page its plain-text weight in
  search. It also means Ctrl+F finds an answer, which is how somebody
  comparing two products actually reads a page like this.
*/
.faq-head {
  padding-bottom: 0;
}

.faq {
  margin: 0;
  max-width: 68ch;
}

.faq dt {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}

.faq dd {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--ink-2, inherit);
}

.faq dd + dt {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.1));
}

@media (min-width: 720px) {
  .faq dd + dt {
    margin-top: 46px;
    padding-top: 42px;
  }
}