/* The site chrome: masthead, menu, wrap, hero, cards, rail, footer.
 *
 * Lifted out of the hub page whole the day the hub became four pages. It was
 * one page's stylesheet and is now four pages' stylesheet, and the reason it
 * is a file rather than four copies is the same reason phone masks and the
 * card renderer are: the second copy is where the drift starts.
 *
 * Loaded after tokens.css, which owns colour, type and radius. Nothing here
 * declares a custom property — check_tool.py compares the properties in
 * tokens.css against Pencil'em's inlined copy, and a new one here would be
 * invisible to that check.
 *
 * A page adds its own <style> for what only it has. Anything two pages need
 * belongs here instead.
 */
  /* The hub: the home an agent lands on to reach a tool. It is deliberately
     tool-agnostic — a rail of categories over a card renderer, sane at one tool
     and at forty. Nothing about any individual tool's contents belongs here.

     The rail is the navigation. It sits on the page rather than folding into a
     corner, so every category is visible without a click and switching between
     them costs nothing.

     Every colour, face, and radius comes from tokens.css. */

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--surface); color: var(--ink);
    font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

  /* ============ MASTHEAD ============
     A navy pill floating over the page, which is the one structural device the
     brand is most recognisable for. */
  .mast { position: sticky; top: 0; z-index: 40; padding: 16px 0; background: var(--surface); }
  .mast-in {
    max-width: 1240px; margin: 0 auto;
    background: var(--accent-ink); border-radius: 100px;
    padding: 14px 18px 14px 30px;
    display: flex; align-items: center; gap: 18px;
  }
  .word {
    font-size: 23px; font-weight: 800; letter-spacing: -.035em;
    color: #FFFFFF; text-decoration: none; flex: none; white-space: nowrap;
  }
  /* The full stop is part of the mark, not punctuation. */
  .word .dot { color: var(--accent); }

  .mast nav { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
  .mast nav a {
    font-size: 15px; font-weight: 700; color: rgba(255,255,255,.82);
    text-decoration: none; white-space: nowrap;
  }
  .mast nav a:hover, .mast nav a[aria-current] { color: #FFFFFF; }

  /* The identity block comes from tokens.css, which colours it for a light
     page. On the navy bar it needs the reverse. */
  .mast .who { border-radius: 100px; padding: 3px 4px 3px 10px; }
  .mast a.who:hover { background: rgba(255,255,255,.12); }
  .mast .who-name { color: rgba(255,255,255,.9); font-size: 13px; }
  .mast a.who:hover .who-name { color: #FFFFFF; }
  .mast .who-dre { color: rgba(255,255,255,.6); }
  .mast .who-face { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); }
  .mast .who-mono { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }

  .btn {
    font-family: var(--sans); font-size: 14px; font-weight: 700;
    border-radius: 100px; padding: 10px 20px; cursor: pointer;
    border: 1.5px solid transparent; white-space: nowrap;
    text-decoration: none; display: inline-block;
    transition: background .14s, color .14s, border-color .14s;
  }
  .btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #FFFFFF; }
  .btn-ghost:hover { background: #FFFFFF; color: var(--accent-ink); border-color: #FFFFFF; }
  .btn-blue { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
  .btn-blue:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  /* ============ HERO ============
     Deliberately short. The rail below it is the reason anyone opens this page,
     so the headline states the place and gets out of the way. */
  .hero { padding: 46px 0 50px; }
  .greet {
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
    color: var(--accent); margin: 0 0 18px;
  }
  /* display:flex on this element would beat the [hidden] attribute the script
     toggles, so the greeting must not use it. */
  .hero h1 {
    font-size: 56px; line-height: 1.04; letter-spacing: -.035em;
    max-width: 18ch; color: var(--ink);
  }
  .hero h1 .blue { color: var(--accent); }
  .hero p {
    margin: 24px 0 0; font-size: 19px; color: var(--ink-2);
    max-width: 46ch; line-height: 1.5;
  }
  /* The hero carries no button. The rail below it is the page's one next step,
     and it is already on screen. */

  /* ============ TOOLS BAND ============ */
  .band { background: var(--ground); padding: 74px 0 90px; }

  /* Rail left, stage right. The rail column is fixed so the cards do not
     reflow when a category name is longer than the others. */
  .deck { display: grid; grid-template-columns: 306px minmax(0, 1fr); gap: 44px; }

  /* ---- the rail ---- */
  .rail {
    position: sticky; top: 88px; align-self: start;
    display: flex; flex-direction: column; gap: 8px;
  }
  .rail-item {
    display: flex; align-items: center; gap: 15px; width: 100%;
    padding: 13px 16px 13px 13px; text-align: left; cursor: pointer;
    font-family: var(--sans); border-radius: 16px;
    background: transparent; border: 1.5px solid transparent;
    transition: background .14s, border-color .14s, box-shadow .14s;
  }
  .rail-item:hover { background: var(--surface-2); }
  .rail-item[aria-selected="true"] {
    background: var(--surface); border-color: var(--line);
    box-shadow: var(--shadow);
  }
  /* A rounded tile rather than a bare glyph, so the rail reads as a set of
     objects and the selected one has something to fill. */
  .rail-ico {
    flex: none; width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--surface-3); color: var(--accent-ink);
    transition: background .14s, color .14s;
  }
  .rail-item[aria-selected="true"] .rail-ico {
    color: #FFFFFF; background: var(--accent-ink);
    background-image:
      radial-gradient(120% 100% at 78% 10%, rgba(24,99,220,.9), transparent 64%);
  }
  .rail-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
  .rail-name {
    font-size: 16.5px; font-weight: 800; letter-spacing: -.022em;
    color: var(--ink-2); line-height: 1.25;
  }
  .rail-item[aria-selected="true"] .rail-name { color: var(--ink); }
  .rail-sub {
    font-size: 11px; font-weight: 800; letter-spacing: .085em;
    text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
  }

  /* ---- the stage ---- */
  .panel { display: block; }
  /* display: on a toggled element beats the hidden attribute. */
  .panel[hidden] { display: none; }

  .sec-head { margin-bottom: 40px; }
  .eyebrow {
    font-size: 12.5px; font-weight: 800; letter-spacing: .11em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
  }
  .sec-head h2 { font-size: 44px; color: var(--accent-ink); line-height: 1.08; }
  .sec-head p { margin: 14px 0 0; font-size: 17px; color: var(--ink-2); max-width: 52ch; }

  .tools {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 34px 26px;
  }

  /* The card follows the shape of a property card: a picture area carrying a
     status pill and a name tab, then the detail set underneath it. There is no
     photography for a tool, so the picture area is a navy panel with the
     tool's glyph in it. */
  .card { display: flex; flex-direction: column; position: relative; }
  .shot {
    position: relative; border-radius: 14px; overflow: hidden;
    aspect-ratio: 16 / 10; background: var(--accent-ink);
    background-image:
      radial-gradient(120% 90% at 82% 8%, rgba(24,99,220,.85), transparent 62%),
      radial-gradient(90% 80% at 6% 96%, rgba(255,255,255,.12), transparent 60%);
    display: grid; place-items: center;
    transition: transform .2s ease;
  }
  .card:hover .shot { transform: translateY(-4px); }
  .shot .glyph { color: rgba(255,255,255,.92); display: block; }

  .badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--accent-soft); color: var(--accent-ink);
    font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 100px;
  }
  /* Opposite corner to the category badge, so the two never fight for the
     same space. Only ever on a card that is at rest — a live tool has
     nothing to say about itself.

     One word, not two. "Coming soon" measures 128px against a 258px card,
     which collides with the category badge on the longer ones and with the
     name tab if it is moved to the bottom. On a card that is visibly grey and
     visibly not a link, the second word was not carrying anything. */
  .soon {
    position: absolute; top: 14px; right: 14px;
    background: var(--surface); color: var(--ink-3);
    font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; padding: 7px 13px; border-radius: 100px;
  }

  /* The name tab sits in the bottom-left corner of the panel, black, reading
     as a label stuck onto the image. */
  .tab {
    position: absolute; left: 0; bottom: 0;
    background: #000000; color: #FFFFFF;
    font-size: 14px; font-weight: 700;
    padding: 11px 22px 11px 18px; border-top-right-radius: 18px;
  }

  .card h3 { font-size: 22px; margin-top: 18px; color: var(--ink); letter-spacing: -.025em; }
  .card h3 a { color: inherit; text-decoration: none; }
  /* The title link covers the card, so anywhere on it opens the tool. */
  .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card .desc { margin: 9px 0 0; font-size: 15px; color: var(--ink-2); }
  .card .meta {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px;
    font-size: 12px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink);
  }
  /* The separator trails its item rather than leading the next one. As a
     ::before it ends up at the start of a wrapped line, orphaned under the
     item it was meant to follow. */
  .card .meta span { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
  .card .meta span:not(:last-child)::after {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); display: block;
  }
  /* The link sits on the bottom of the card, not under whatever came
     before it. The cards in a row are the same height already, so the fact
     row wrapping to two lines on one of them and one on another was pushing
     its link 25px lower than its neighbours — a row of calls to action at
     four different heights, which is the first thing the eye picks up in a
     grid. `margin-top: auto` in a flex column puts every one of them on the
     same line, whatever is above it.

     The 16px is now a floor rather than the gap: on a card whose content
     already fills the height, it is what keeps the link off the copy. */
  .card .open {
    margin-top: auto; padding-top: 16px; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 800; color: var(--accent);
  }
  .card:hover .open .arw { transform: translateX(5px); }
  .open .arw { transition: transform .16s; }

  /* A card with no destination yet. It carries no copy about the state of the
     site — it simply sits quiet, unlit, and does not pretend to be a link. */
  .card.rest .shot {
    background: var(--surface-3); background-image: none;
  }
  .card.rest:hover .shot { transform: none; }
  .card.rest .shot .glyph { color: var(--ink-3); }
  .card.rest .badge { background: var(--surface); color: var(--ink-3); }
  .card.rest .tab { background: var(--ink-3); }
  .card.rest h3 { color: var(--ink-2); }
  .card.rest .meta { color: var(--ink-3); }
  .card.rest .meta span:not(:last-child)::after { background: var(--ink-3); }

  /* ---- the lane filter, in a category that has one ----
     Three lines of business, and an agent works one of them at a time.
     Chips rather than a select: three options are worth showing all at
     once, and a select would hide two of them behind a click. */
  .lanes {
    display: flex; flex-wrap: wrap; gap: 9px; margin: -18px 0 34px;
  }
  .lane {
    font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ink-2); background: var(--surface);
    border: 1.5px solid var(--line); border-radius: 999px;
    padding: 8px 17px; cursor: pointer;
  }
  .lane:hover { border-color: var(--ink-3); color: var(--ink); }
  .lane[aria-pressed="true"] {
    background: var(--accent-ink); border-color: var(--accent-ink); color: #FFFFFF;
  }

  /* The stage when a category has nothing in it yet. */
  .quiet {
    border: 1.5px dashed var(--line); border-radius: calc(var(--r) * 2);
    padding: 54px 40px; background: var(--surface);
    font-size: 16px; color: var(--ink-3); max-width: 52ch;
  }

  /* ============ FOOTER ============
     Filled by chrome.foot(): the wordmark, a page's own note if it has one,
     then the legal line. Both lines stack on the right. */
  footer { background: var(--accent-ink); color: #FFFFFF; padding: 54px 0 46px; }
  .foot-in { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
  footer .word { font-size: 30px; }
  .foot-lines {
    margin-left: auto; display: flex; flex-direction: column; gap: 6px;
    align-items: flex-end; text-align: right;
  }
  footer .note {
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.62); max-width: 42ch;
  }
  footer .legal {
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: rgba(255,255,255,.45);
  }

  /* ============ LIGHTBOX ============
     shared/lightbox.js. One box over a scrim; the page behind it does not
     scroll while it is up. */
  .lb-veil {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(0, 26, 114, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .lb-veil[hidden] { display: none; }
  .lb-box {
    position: relative; background: var(--surface); color: var(--ink);
    border-radius: 24px; box-shadow: var(--shadow);
    width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 30px 32px;
  }
  .lb-close {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    border-radius: 50%; border: 0; cursor: pointer;
    font: inherit; font-size: 24px; line-height: 1;
    background: var(--surface-2); color: var(--ink-2);
  }
  .lb-close:hover { background: var(--surface-3); color: var(--ink); }
  body.lb-open { overflow: hidden; }

  /* ============ DIRECTORY CARDS ============
     A vendor card: logo, kind pill, company, the person, two tappable lines,
     website. Drawn by shared/directory.js for the home page's partners and
     the whole directory on /contacts/. Moved here from the home page the day
     it stopped being the only page that drew one. */
  .partners { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dir { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .pt {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: calc(var(--r) * 2); padding: 18px 20px 17px;
    display: flex; flex-direction: column; text-align: left;
    font: inherit; color: inherit;
  }
  /* A card that opens a profile is a button, and it should feel like one. */
  .pt[role="button"] { cursor: pointer; transition: transform .16s, box-shadow .16s; }
  .pt[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .pt-top { position: relative; width: 100%; margin: 5px 0 18px; }
  /* contain, not cover: a wide wordmark and a square mark both have to sit
     in this box without being cropped, and a cropped logo is a vendor's
     brand handled carelessly. Initials when there is no logo. */
  .pt-logo {
    width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--r) * 2);
    object-fit: contain; padding: 16px; box-sizing: border-box;
    background: var(--surface-2); border: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: 800; letter-spacing: -.03em;
    color: var(--accent-ink);
  }
  /* The pill straddles the top edge of the logo panel. The white ring is
     what lets it cross from the card ground onto the panel and keep its shape. */
  .pt-kind {
    position: absolute; top: -11px; left: 10px; z-index: 1; white-space: nowrap;
    font-size: 10px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-soft); border-radius: 999px;
    box-shadow: 0 0 0 3px var(--surface);
    padding: 4.4px 10px 3.3px;
  }
  .pt-kind::after { content: ""; margin-right: -.1em; }
  .pt-co {
    font-size: 17.5px; font-weight: 800; letter-spacing: -.025em;
    color: var(--ink); line-height: 1.2;
  }
  .pt-who { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
  .pt-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
  .pt-lines a, .pt-lines span {
    font-size: 13.5px; color: var(--accent-ink); text-decoration: none;
    line-height: 1.45; overflow-wrap: break-word;
  }
  .pt-lines a:hover { text-decoration: underline; }
  .pt-site {
    margin-top: auto; padding-top: 12px; align-self: flex-start;
    font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none;
    overflow-wrap: break-word;
  }
  .pt-site:hover { text-decoration: underline; }
  .pt-retired { opacity: .55; }

  /* The full profile, in the lightbox. */
  .pv { display: flex; flex-direction: column; gap: 4px; }
  .pv .pt-top { margin: 0 0 20px; }
  .pv .pt-logo { aspect-ratio: 16 / 7; }
  .pv h2 { font-size: 26px; letter-spacing: -.03em; }
  .pv .pv-grp { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .pv dl { margin: 18px 0 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; }
  .pv dt { font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding-top: 2px; }
  .pv dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
  .pv dd a { color: var(--accent-ink); text-decoration: none; }
  .pv dd a:hover { text-decoration: underline; }
  .pv .pv-notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2); line-height: 1.5; white-space: pre-line; }

  @media (max-width: 1080px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 780px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .partners { grid-template-columns: 1fr; } .pv dl { grid-template-columns: 1fr; gap: 4px 0; } }

  /* ============ FILTERS ============
     The chip row plus a select and a search box, on a page that has them. */
  .filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0 0 24px; }
  .filters .spacer { flex: 1; }
  .filters select, .filters input[type="search"] {
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--line);
    border-radius: 999px; padding: 8px 15px;
  }
  .filters input[type="search"] { min-width: 220px; }
  .over {
    margin: 0 0 30px; padding: 12px 16px; border-radius: var(--r);
    background: var(--warn-soft); color: var(--warn);
    font-size: 13.5px; font-weight: 600; max-width: 62ch;
  }

  /* ============ EDITOR ============
     A form an admin fills in. Shared by every section of /admin/. */
  .editor {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: calc(var(--r) * 2); padding: 24px; margin-bottom: 30px;
  }
  .editor h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 16px; }
  .grid2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
  .fld label {
    display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    margin-bottom: 4px;
  }
  .fld input, .fld select, .fld textarea {
    width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 9px 11px; box-sizing: border-box;
  }
  .fld textarea { min-height: 66px; resize: vertical; }
  .fld select[multiple] { min-height: 120px; }
  .fld { margin-bottom: 12px; }
  .fld .hint { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
  .editor .row { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
  .editor .msg, .msg { font-size: 13.5px; font-weight: 600; }
  .msg.ok { color: var(--good); }
  .msg.bad { color: var(--bad); }
  .btn-ink { background: var(--accent-ink); color: #FFFFFF; border-color: var(--accent-ink); }
  .btn-ink:hover { background: var(--accent); border-color: var(--accent); }
  .btn-line { background: transparent; color: var(--ink-2); border-color: var(--line); }
  .btn-line:hover { color: var(--ink); border-color: var(--ink-3); }
  .btn-line.danger:hover { color: var(--bad); border-color: var(--bad); }
  .btn-sm { font-size: 12.5px; padding: 6px 13px; }
  @media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

  /* ============ ADMIN LISTS ============
     What is already in a table, one row each, with its actions. */
  .adm-list { display: flex; flex-direction: column; gap: 10px; }
  .adm-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: calc(var(--r) * 1.5); padding: 12px 16px;
  }
  .adm-row.off { opacity: .55; }
  .adm-row .t { flex: 1; min-width: 200px; }
  .adm-row .t b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
  .adm-row .t small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
  .adm-row .acts { display: flex; gap: 8px; }
  .adm-count { font-size: 13px; font-weight: 700; color: var(--ink-3); margin: 0 0 14px; }
  .adm-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) * 1.5); overflow: hidden; }
  .adm-table th, .adm-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
  .adm-table th { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
  .adm-table tr:last-child td { border-bottom: 0; }
  .adm-table select { font: inherit; font-size: 13.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .adm-table label { font-size: 13px; font-weight: 600; margin-right: 12px; white-space: nowrap; }
  .adm-table input[type="checkbox"] { accent-color: var(--accent); margin-right: 5px; }
  .adm-table .who-cell b { font-weight: 800; }
  .adm-table .who-cell small { display: block; color: var(--ink-3); font-size: 12.5px; }
  .notyou { max-width: 52ch; }

  @media (max-width: 1080px) {
    .deck { grid-template-columns: 258px minmax(0, 1fr); gap: 32px; }
    .rail-name { font-size: 15.5px; }
  }

  /* Under 900 the rail lies down into a scrolling strip above the cards. It
     stays on the page and stays one tap from every category. */
  @media (max-width: 900px) {
    .wrap { padding: 0 20px; }
    .mast nav { display: none; }
    .mast-in { padding: 12px 12px 12px 22px; }
    /* The rail is the reason the page exists, so on a phone the hero gives up
       most of its height to get the rail near the top. */
    .hero { padding: 34px 0 38px; }
    .hero h1 { font-size: 34px; letter-spacing: -.03em; max-width: none; }
    .hero p { font-size: 16px; margin-top: 14px; }
    .band { padding: 40px 0 56px; }

    .deck { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .rail {
      position: static; flex-direction: row; gap: 10px;
      overflow-x: auto; padding: 4px 20px 8px; margin: 0 -20px;
      scrollbar-width: none;
    }
    .rail::-webkit-scrollbar { display: none; }
    .rail-item { width: auto; flex: none; padding: 9px 18px 9px 9px; border-radius: 100px; }
    .rail-ico { width: 36px; height: 36px; border-radius: 10px; }
    .rail-ico svg { width: 19px; height: 19px; }
    .rail-sub { display: none; }
    .rail-name { white-space: nowrap; font-size: 15px; }

    .sec-head { margin-bottom: 28px; }
    .sec-head h2 { font-size: 31px; }
    .tools { grid-template-columns: 1fr; gap: 30px; }
    .quiet { padding: 38px 26px; }
    .foot-lines { margin-left: 0; align-items: flex-start; text-align: left; }
    .filters input[type="search"] { min-width: 0; width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============ THE HEADER MENU ============
   Four pages now, so the masthead carries where you are as well as who you
   are. Built by shared/nav.js so the list of pages exists once.

   The wordmark goes home. The rest are the site: Home, Tools, Prospect,
   Contacts. Tool pages are not in this list on purpose — a tool is pulled out
   of the drawer, used and closed, and putting the site menu on one would
   invite navigating away from work in progress.

   Scoped under .mast nav, not a bare .menu, because .mast nav already styles
   links for the navy bar and a flat .menu rule loses to it. The first draft
   did exactly that and shipped a white current-page label on a pale fill. */
.mast nav.menu { gap: 4px; margin-left: 18px; }
.mast nav.menu a {
  padding: 7px 14px; border-radius: 999px; letter-spacing: -.01em;
}
.mast nav.menu a:hover { background: rgba(255, 255, 255, .13); }
/* A white pill on navy: the one combination on this bar that cannot be
   misread, and it needs no colour of its own. */
.mast nav.menu a[aria-current="page"] {
  background: #FFFFFF; color: var(--accent-ink);
}

/* The masthead has to hold a wordmark, four links, an identity chip and a
   button. Below this the menu drops to its own line and scrolls sideways
   rather than wrapping into two rows of different heights. */
@media (max-width: 860px) {
  .mast-in { flex-wrap: wrap; padding-left: 22px; }
  .mast nav.menu {
    /* display, explicitly. The hub's original masthead nav is hidden below
       this width by a rule further up, and a rule that only sets order and
       width loses to it — the menu was simply absent on a phone and nothing
       in the source said so. Found by measuring the element, not by reading. */
    display: flex; order: 3; width: 100%; margin: 6px 0 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .mast nav.menu::-webkit-scrollbar { display: none; }
}