/* THE SHARED LOOK OF THE DRSAAS SEARCH PAGES (new on 2026-10-20, job
   two-seo-long-tail-pages-go-live-on-drsaas-co-uk-and-search-console-is-nagged,
   from Pete at 20:21: "SEO page looks good. Please build two of those now, get
   them on the website.")

   EVERY RULE AND EVERY TOKEN IN HERE IS COPIED UNCHANGED FROM
   public/invoicing.html, which is the shell the search pages share: the same
   colours in light and dark, the same header bar and wordmark, the same amber
   call to action, the same footer. invoicing.html keeps its own copy inline
   and is not touched by this job, so the two files are compared by eye when
   either changes.

   IT IS A FILE AND NOT AN INLINE BLOCK FOR ONE REASON: a brand token is a CSS
   custom property, which is two hyphens, and this job's checker
   (tests/test-two-seo-long-tail-pages-go-live-on-drsaas-co-uk-and-search-console-is-nagged.py)
   forbids a double hyphen anywhere in either page's HTML, in Pete's no long
   dashes rule. The tokens live here, the pages stay clean, and both pages read
   one stylesheet instead of two copies drifting apart.

   The extra rules at the foot are the ones the two new pages need and
   invoicing.html has no use for: the worked example table on the CIS page and
   the what to look for list. */
  :root {
    --bg: #F6F8FB; --bg-2: #EEF3F8; --surface: #FFFFFF; --ink: #0E2136;
    --brand: #123A5E; --amber: #F4A300; --amber-ink: #8A5A00; --green: #1FA45A;
    --muted: #566579; --line: #E1E8F0;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #08151F; --bg-2: #0C1E2C; --surface: #0F2434; --ink: #EAF2FA;
            --brand: #9FC4E4; --amber: #FFB733; --amber-ink: #FFC968;
            --muted: #A7BACC; --line: #1C3346; }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
         line-height: 1.55; font-size: 16.5px; }
  a { color: var(--brand); }
  .wrap { max-width: 680px; margin: 0 auto; padding: 0 15px; }
  header { border-bottom: 1px solid var(--line); background: var(--surface); }
  /* The vertical padding only. A 'padding: 9px 0' shorthand here would replace the
     15px side padding .wrap gives every row, and on a phone that pushed the wordmark
     and the Start free link flat against both edges of the screen (seen in the phone
     pictures for this job on 2026-10-16, before anybody showed it to a customer). */
  .bar { display: flex; align-items: center; justify-content: space-between;
         padding-top: 9px; padding-bottom: 9px; }
  .wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
              font-size: 19px; color: var(--brand); text-decoration: none; letter-spacing: -0.2px; }
  .wordmark span { color: var(--amber-ink); }
  .wordmark svg { width: 24px; height: 24px; color: var(--amber); }
  .bar .go { font-size: 14.5px; font-weight: 700; color: var(--brand); text-decoration: none;
             border: 1.5px solid var(--amber); border-radius: 999px; padding: 8px 14px; }
  h1 { font-size: 27px; line-height: 1.18; margin: 18px 0 8px; color: var(--brand); letter-spacing: -0.4px; }
  h2 { font-size: 20px; line-height: 1.25; margin: 26px 0 8px; color: var(--brand); }
  p { margin: 0 0 11px; }
  .label { font-family: var(--mono); font-size: 12px; text-transform: uppercase;
           letter-spacing: 1.2px; color: var(--amber-ink); margin: 14px 0 0; }
  .lead { font-size: 18px; }
  .clock { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--amber);
           border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
  .clock p { margin: 0 0 7px; }
  .clock p:last-child { margin: 0; }
  /* NOT THE CODE FONT. The cold reviewer, 2026-10-16: in a monospace face the
     working hours read as an error message rather than as part of the page. */
  .clock b { color: var(--amber-ink); font-size: 16px; }
  .shout { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
           padding: 14px; margin: 16px 0; font-size: 17px; font-weight: 700; color: var(--brand); }
  ul.plain { margin: 0 0 11px; padding-left: 20px; }
  ul.plain li { margin-bottom: 6px; }
  .cta { display: block; text-align: center; background: var(--amber); color: #2A1B00;
         font-weight: 800; font-size: 17px; text-decoration: none; padding: 14px;
         border-radius: 12px; margin: 16px 0 8px; }
  .quiet-cta { display: block; text-align: center; font-weight: 700; color: var(--brand);
               text-decoration: none; padding: 10px; }
  /* THE PRICE IS NOT SMALL PRINT. The cold reviewer, 2026-10-16: the most
     important sentence for a suspicious reader was the smallest and palest
     thing on the screen. Same size as the body, same ink. */
  .fine { font-size: 15px; color: var(--ink); }
  .next { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
  .next a { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
            padding: 11px 13px; text-decoration: none; font-weight: 700; color: var(--brand); }
  .next a b { display: block; font-weight: 500; font-size: 14.5px; color: var(--muted); }
  footer { border-top: 1px solid var(--line); margin-top: 26px; padding: 14px 0 30px;
           font-size: 14px; color: var(--muted); }
  footer a { color: var(--muted); display: inline-block; padding: 7px 2px; }
  footer p { margin-bottom: 4px; }

/* THE WORKED EXAMPLE, used by the CIS page: a money line reads as a row, with
   the figure hard right so the column of figures lines up on a phone. */
table.sums { width: 100%; border-collapse: collapse; margin: 6px 0 12px;
             background: var(--surface); border: 1px solid var(--line);
             border-radius: 12px; overflow: hidden; }
table.sums th, table.sums td { text-align: left; padding: 9px 12px; font-size: 15.5px;
             border-bottom: 1px solid var(--line); }
table.sums th { font-weight: 700; color: var(--brand); }
table.sums td.figure, table.sums th.figure { text-align: right; white-space: nowrap; }
table.sums tr:last-child th, table.sums tr:last-child td { border-bottom: 0; font-weight: 800; }
/* THE CAPTION IS A HEADING, NOT A WHISPER. The cold reviewer on this job's
   phone pictures, 2026-10-20: the caption over the worked example was "the
   hardest line on the page to read, in both light and dark" at 13px in the
   muted ink. Body ink, nearly body size. */
table.sums caption { caption-side: top; text-align: left; font-size: 14.5px; color: var(--ink);
             padding: 0 0 6px; }
/* THE QUIET LINE UNDER THE AMBER BUTTON. .quiet-cta is a link class and it
   paints its text bold in the brand ink, which turned a tax disclaimer into
   the loudest sentence on the page. This one is plain, centred and calm. */
p.under-the-button { text-align: center; font-size: 15px; color: var(--muted); margin: 8px 0 0; }
/* A CHECKLIST, where the thing to look for is read before the reason. */
ul.look { margin: 0 0 11px; padding-left: 20px; }
ul.look li { margin-bottom: 8px; }
ul.look li b { color: var(--brand); }