/* ================================================================
     Provider Register: UK managed IT and cybersecurity providers.

     Palette is near-monochrome on an off-white ground, with a single
     accent carried over from OurIdea. Type is the system stack, which
     renders as SF on Apple hardware, so the page is genuinely set in
     the typeface it is styled after rather than an approximation.
     ================================================================ */
  :root{
    color-scheme: light;
    --ground:#FBFBFD;
    --surface:#FFFFFF;
    --raised:#F5F5F7;
    --ink:#1D1D1F;
    --body:#424245;
    /* The grey ramp is set by the contrast floor, not by taste. #86868B, the
       obvious faint grey in this palette, measures 3.33:1 on the raised fill
       and 3.62:1 on white, so every 11 to 13px label set in it failed AA.
       Faint drops to the old muted value and muted drops a step below it, so
       the two-tier hierarchy survives and both tiers clear 4.5:1 everywhere. */
    --muted:#5A5A5F;
    --faint:#6E6E73;
    --hair:#D2D2D7;
    --hair-soft:#E8E8ED;

    /* The map draws its own land now, so land needs a fill: a warm grey a
       shade off the paper, with a hairline for the borders between countries.
       The sea has no token because the sea is the page ground. */
    --land:#E7E2D8;
    --land-line:#C2B9A7;

    /* The selects and the form fields sit about 1.03:1 from the ground, so
       without a line their hit area is invisible. This is the one hairline
       on the site that has to carry 3:1, because it is what tells you a
       control is there at all. It measures 3.44:1 on the field fill. The
       search field is the deliberate exception, and says so where it is set. */
    --field-line:#8A8A8F;

    /* The accent is the pink end of the abi. wordmark gradient, pulled down
       until it clears 4.5:1 both ways: as text on the ground, and as the
       ground under the white text on a button. #EC4899 itself sits at 3.5:1
       and fails both, so it stays where it belongs, in the mark. */
    --accent:#C72876;
    --accent-ink:#A31459;
    --accent-wash:#FBE9F2;
    --accent-on:#FFFFFF;

    --good-ink:#1D6B4F;
    --good-wash:#E6F4EE;
    --good-line:#B9DECC;

    --note-ink:#8A5A00;
    --note-wash:#FDF3E0;
    --note-line:#F0DCB4;

    --r-sm:9px;
    --r:13px;
    --r-lg:20px;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.05);

    --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
           "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }
  /* There is no prefers-color-scheme block, and that is deliberate. The page
     is light for everybody, including a visitor whose phone is set to dark,
     because a register read on a phone in a meeting has to look the same as
     the one the owner is looking at on a laptop. color-scheme:light on :root
     above carries that through to the select popups, the search field's clear
     button, the caret and the scrollbars, which are the parts a page cannot
     restyle and which otherwise render dark under a dark system setting.

     The dark palette below is kept, and applies only when something sets
     data-theme="dark" on the html element. Nothing does today. It is here so a
     manual toggle can be added later without redoing any of this work. */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --ground:#000000;
    --surface:#1C1C1E;
    --raised:#2C2C2E;
    --ink:#F5F5F7;
    --body:#C7C7CC;
    --muted:#98989D;
    --faint:#8E8E93;
    --hair:#38383A;
    --hair-soft:#2C2C2E;
    --land:#1F1F21;
    --land-line:#3A3A3C;
    --field-line:#6A6A6E;
    --accent:#F06CAD;
    --accent-ink:#F58CBE;
    --accent-wash:#331725;
    --accent-on:#1D1D1F;
    --good-ink:#5BD6A0;
    --good-wash:#12241C;
    --good-line:#22412F;
    --note-ink:#E5B155;
    --note-wash:#2A2113;
    --note-line:#453519;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--ground); color:var(--body);
    font-family:var(--sans); font-size:17px; line-height:1.47059;
    letter-spacing:-.022em; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
  .wrap{max-width:1000px; margin:0 auto; padding:0 24px}

  /* ---------- header -------------------------------------------- */
  header{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--hair-soft);
  }
  .bar{display:flex; align-items:center; justify-content:space-between; height:52px}
  .brand{display:flex; align-items:baseline; gap:9px}
  .brand .name{font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.03em}
  .brand .by{font-size:12px; color:var(--faint)}
  .brand .by b{color:var(--muted); font-weight:500}
  nav{display:flex; gap:26px}
  nav a{font-size:13px; color:var(--muted)}
  nav a:hover{color:var(--ink)}
  nav a[aria-current]{color:var(--ink); font-weight:500}
  @media (max-width:760px){ nav{display:none} }

  /* ---------- hero ----------------------------------------------
     The reference for this page is a single prominent search field with a
     great deal of air around it, so the hero is spaced to give the field room
     rather than sized to fit as much as possible above the fold.          */
  .hero{padding:72px 0 40px; text-align:center}
  /* The home hero lost its kicker line, and the space did not go with it: the
     H1 starts higher and every gap below it grows, so the block is taller
     overall and reads as air around one big sentence rather than as a gap
     where a label used to be. */
  .hero-home{padding:84px 0 12px}
  @media (max-width:760px){ .hero-home{padding:52px 0 4px} }

  /* A breadcrumb, on the company page only. It used to be the pink uppercase
     kicker, which put the loudest colour on the page above every company
     name. */
  .crumb{margin:0 0 18px; font-size:13px; color:var(--faint); letter-spacing:-.01em}
  .crumb a{color:var(--muted)}
  .crumb a:hover{color:var(--ink)}

  h1{
    margin:0 0 22px; color:var(--ink); font-weight:640;
    font-size:clamp(40px, 7.4vw, 80px); line-height:1.02; letter-spacing:-.042em;
    text-wrap:balance;
  }
  /* Tight tracking is a display setting, and it closes small type up until it
     is hard to read, so the smaller the H1 gets the more of it comes back. */
  @media (max-width:760px){ h1{letter-spacing:-.032em; line-height:1.06} }
  /* The full size is the home page's. An inner page is somewhere you arrived
     on purpose, and a one-word heading like Privacy set at eighty pixels is
     shouting a word nobody needed shouted. */
  .hero:not(.hero-home) h1{font-size:clamp(34px, 5.2vw, 58px); letter-spacing:-.038em}
  .lede{
    margin:0 auto; max-width:58ch; font-size:19px; line-height:1.45;
    color:var(--muted); letter-spacing:-.02em; text-wrap:pretty;
  }
  .stamp{
    margin:24px 0 0; font-family:var(--mono); font-size:11.5px;
    letter-spacing:.02em; color:var(--faint);
  }

  /* ---------- the search field ----------------------------------
     One control, and it is the only one on the page drawn at this weight.
     Everything else that filters the register is deliberately quieter than
     this, because a row of four equal boxes made the page read as a form to
     be completed rather than a register to be searched.                   */
  /* Same rule the map follows: the list is the page and these are additions.
     All three filter a file the browser fetches, so without JavaScript they
     are controls that accept input and do nothing, and a dead search field
     at this size is a worse answer than no search field. The server-rendered
     rows and the per-company pages are unaffected either way. */
  .searchbox, .tabs, .more{display:none}
  .js .searchbox{display:block}
  .js .tabs{display:flex}
  .js .more{display:block}
  .searchbox{position:relative; max-width:640px; margin:52px auto 0}
  .searchicon{
    position:absolute; left:22px; top:50%; width:19px; height:19px;
    margin-top:-9.5px; color:var(--faint); pointer-events:none;
  }
  /* Deliberately almost no boundary: a hairline at 1.51:1 on its own fill,
     under the 3:1 a control's border is normally held to. What identifies it
     instead is everything else about it. It is a search field the width of the
     hero with a magnifier in it at 4.5:1 and a full sentence of placeholder
     text, lifted off the ground by a shadow, and it is the only interactive
     thing in that part of the page. The focus ring is untouched and still
     draws at full accent weight. */
  .bigfield{
    width:100%; padding:20px 22px 20px 52px; font:inherit; font-size:18px;
    letter-spacing:-.02em; color:var(--ink); background:var(--surface);
    border:1px solid var(--hair); border-radius:16px; appearance:none;
    box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.055);
  }
  .bigfield::placeholder{color:var(--faint)}
  .bigfield:focus{border-color:var(--accent)}
  @media (max-width:480px){
    .bigfield{padding:16px 16px 16px 46px; font-size:16.5px}
    .searchicon{left:18px}
  }

  /* ---------- tabs and the filters that hide behind them ---------- */
  #register{padding-top:56px; scroll-margin-top:60px}
  .tabs{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap}
  .tab{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    padding:8px 15px; border-radius:980px; font-size:13.5px; letter-spacing:-.01em;
    color:var(--muted); background:transparent; border:1px solid transparent;
    font-family:inherit;
  }
  .tab:hover{color:var(--ink); background:var(--raised)}
  .tab[aria-pressed="true"]{background:var(--accent-wash); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
  .tab .n{font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.8}
  .tab .mark{width:15px; height:15px}
  .tab .mark svg{width:9px; height:9px}
  .more-rows{border-color:var(--hair); color:var(--body)}

  .more{margin:10px 0 0; text-align:center}
  .more summary{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    list-style:none; font-size:13px; color:var(--faint); padding:6px 10px;
    border-radius:980px;
  }
  .more summary::-webkit-details-marker{display:none}
  /* The caret is drawn rather than borrowed from the default marker, because
     the default sits outside the summary box and cannot be centred with it. */
  .more summary::after{
    content:""; width:5px; height:5px; margin-top:-3px; border-right:1.4px solid currentColor;
    border-bottom:1.4px solid currentColor; transform:rotate(45deg);
  }
  .more[open] summary::after{margin-top:1px; transform:rotate(-135deg)}
  .more summary:hover{color:var(--ink); background:var(--raised)}
  .morefields{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
    align-items:end; max-width:760px; margin:16px auto 0; text-align:left;
  }
  @media (max-width:700px){ .morefields{grid-template-columns:1fr} }
  .lab{display:block; font-size:12px; font-weight:590; letter-spacing:.01em; color:var(--faint)}
  .lab .field, .lab .hint{margin-top:6px}
  .lab .opt{font-weight:450; text-transform:none; letter-spacing:0}
  /* The one place a border stays at full strength. A field is a control, and
     the boundary of a control is what tells somebody there is something to
     type in, so it holds the 3:1 line the rest of the page no longer draws. */
  .field{
    width:100%; padding:11px 14px; font:inherit; font-size:15px; letter-spacing:-.01em;
    color:var(--ink); background:var(--surface); border:1px solid var(--field-line);
    border-radius:var(--r-sm); appearance:none;
    /* If option text ever outruns its track on a system with wider metrics,
       an ellipsis says so rather than hiding the last word under the arrow. */
    text-overflow:ellipsis;
  }
  .field::placeholder{color:var(--faint)}
  .field:focus{border-color:var(--accent)}
  select.field{
    cursor:pointer; padding-right:34px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  }
  .reset{background:none; border:none; font:inherit; font-size:13.5px; color:var(--faint); cursor:pointer; padding:11px 4px; text-align:left}
  .reset:hover{color:var(--accent-ink)}
  .morefields .reset{grid-column:1/-1; justify-self:start}

  /* ---------- the list ------------------------------------------
     One row is a name, one line and one signal. Town, year and accounts band
     used to be three columns of one short value each; folded into the line
     they cost one row of height instead of four columns of chrome, and the
     eye runs down the names rather than across a grid.                    */
  /* No panel. The list is rows on the page ground, separated by one hairline
     each and nothing else: no fill, no border round the outside, no radius, no
     shadow. The rules run twelve pixels wider than the text on both sides, so
     the names sit on the same left edge as every other line of the page and
     the hover band still has somewhere to go. */
  .panel{margin:18px -12px 0; border-bottom:1px solid var(--hair-soft)}
  .item{border-top:1px solid var(--hair-soft)}
  .rowbtn{
    display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:15px;
    align-items:center; width:100%; background:none; border:none; font:inherit;
    color:inherit; text-align:left; cursor:pointer; padding:18px 12px;
  }
  .rowbtn:hover{background:color-mix(in srgb, var(--accent) 3%, transparent)}
  .rowbtn:focus-visible{outline-offset:-3px; border-radius:0}
  /* The monogram is the slot a Profile customer's logo goes in. Until then it
     is the first letter, which gives the column a rhythm to scan down without
     putting a number there: a numbered list on a register that refuses to
     rank anybody would be read as a ranking. */
  .glyph{
    width:34px; height:34px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--raised);
    color:var(--muted); font-size:14px; font-weight:590; letter-spacing:0;
  }
  .whotext{min-width:0}
  /* Text flow, not a flex row. As a flex row with wrapping, a name long
     enough to wrap at 360 pushed the mark onto a line of its own between the
     name and the line under it, where it read as a third item rather than as
     something belonging to the name. Inline, it hugs the last word. */
  .nameline{display:block}
  .nm{font-size:16px; font-weight:550; color:var(--ink); letter-spacing:-.018em}
  .nameline .mark{vertical-align:-4px; margin-left:7px}
  .sub{
    display:block; font-size:12.5px; color:var(--faint); margin-top:2px;
    letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sig{display:flex; align-items:center; justify-content:flex-end; flex:none}

  /* The mark is the abi. full stop: same circle, same gradient, at badge size. */
  .mark{
    width:18px; height:18px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #A855F7, #EC4899);
    box-shadow:0 1px 3px rgba(236,72,153,.32);
  }
  .mark svg{width:11px; height:11px; display:block}
  .mark-lg{width:32px; height:32px; border-radius:50%}
  .mark-lg svg{width:18px; height:18px}
  /* Featured and Active were mixed at the pale end of their hues, where the
     white glyph fell to 1.4:1 and the circle itself sat at 1.3:1 against the
     off-white ground, so the Active mark was invisible in light mode. Both
     gradients are deepened to the lightest tone that still clears 3:1 against
     white, the off-white ground and the black ground, which is as light as
     "lighter violet to blue" and "light green" can be and still be seen. */
  .mark-feat{background:linear-gradient(135deg, #9773F0, #4189D6); box-shadow:0 1px 3px rgba(65,137,214,.22)}
  .mark-live{width:15px; height:15px; background:linear-gradient(135deg, #2A9C6E, #16855A); box-shadow:none}
  .mark-live svg{width:7px; height:7px}

  .legend{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 26px; margin:34px 2px 0}
  @media (max-width:760px){ .legend{grid-template-columns:1fr} }
  .lg b{font-weight:590; color:var(--body)}
  .lg{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--faint);
    letter-spacing:-.01em; line-height:1.45; text-wrap:pretty}
  .lg .mark{margin-top:1px}

  /* The register facts were in a bordered card. They are the page now: a
     two-column run of label and value with one hairline between rows, which is
     the same separator the list uses and the only one on the page. */
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:26px}
  .facts > div{padding:15px 0; border-top:1px solid var(--hair-soft)}
  @media (max-width:560px){ .facts{grid-template-columns:1fr; gap:0} }
  .k{font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint); margin:0}
  .v{font-size:15px; color:var(--ink); margin:4px 0 0; letter-spacing:-.015em}
  /* The company number is wrapped in a span inside the value, so the mono rule
     has to reach the child as well as the paragraph. It only ever matched the
     paragraph before, which is why every registration number on the site was
     set in the body face. */
  .v.mono, .v .mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px}
  .btn{
    display:inline-block; padding:11px 22px; border-radius:980px; font-size:14.5px; font-weight:520;
    letter-spacing:-.015em; background:var(--accent); color:var(--accent-on); border:1px solid var(--accent);
  }
  .btn:hover{filter:brightness(1.08)}
  .btn.quiet{background:transparent; color:var(--accent-ink); border-color:var(--field-line)}
  .btn.quiet:hover{border-color:var(--accent); filter:none}
  .empty{padding:44px 12px; text-align:center; color:var(--faint); font-size:15px}

  /* ---------- sections ------------------------------------------ */
  section.block{padding:76px 0 0}
  .block h2{
    margin:0 0 12px; font-size:clamp(26px,3.4vw,34px); font-weight:620; color:var(--ink);
    letter-spacing:-.03em; line-height:1.12; text-wrap:balance;
  }
  .block .intro{margin:0 0 34px; max-width:64ch; font-size:17px; color:var(--muted); letter-spacing:-.018em}

  /* Three tiers, no cards. Each one is a column under its own hairline, which
     is enough to say where one stops and the next starts. Nothing here is a
     box, so nothing here can be mistaken for a box that is being sold. */
  .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px}
  @media (max-width:820px){ .tiers{grid-template-columns:1fr; gap:0} }
  .tier{
    padding:22px 0 8px; display:flex; flex-direction:column;
    border-top:1px solid var(--hair-soft);
  }
  .tier .tname{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin:0}
  .tier .tnote{font-size:12.5px; color:var(--faint); margin:3px 0 0; letter-spacing:-.01em}
  .tier .cost{margin:18px 0 20px; font-size:34px; font-weight:620; color:var(--ink); letter-spacing:-.035em}
  .tier .cost em{font-style:normal; font-size:14px; font-weight:450; color:var(--faint); letter-spacing:-.01em}
  .tier ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:9px}
  .tier li{font-size:13.5px; color:var(--body); padding-left:20px; position:relative; letter-spacing:-.012em; line-height:1.45}
  .tier li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-size:12px}
  .tier .cta{margin-top:auto}

  .notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:26px}
  .notes h3{margin:0 0 7px; font-size:14px; font-weight:590; color:var(--ink); letter-spacing:-.02em}
  .notes p{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); letter-spacing:-.012em}

  /* Six cards at a 230px minimum land as three tight columns on a desktop and
     read as a grid of blocks rather than as six separate points. Raising the
     minimum to 340px gives two columns and the room for the sentences to be
     read one at a time. */
  .notes.airy{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:44px 64px}
  .notes.airy h3{font-size:15px; margin-bottom:9px}
  .notes.airy p{font-size:14px; line-height:1.6; max-width:52ch}

  /* ---------- pricing ---------------------------------------------------
     Checked is free and cannot be bought, so it is deliberately not one of
     the price cards. A £0 card in a row of three reads as the cheap tier,
     which is the one thing this mark must never look like.               */
  .checkband{
    display:flex; align-items:flex-start; gap:18px; padding:0;
  }
  .checkband h2{margin:0 0 8px; font-size:clamp(19px,2.4vw,23px); font-weight:620; color:var(--ink); letter-spacing:-.028em; line-height:1.2}
  .checkband p{margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); letter-spacing:-.015em; max-width:70ch}
  .checkband .mark{margin-top:3px}
  @media (max-width:560px){ .checkband{flex-direction:column; gap:14px} }
  .finenote{margin:22px 2px 0; font-size:13px; color:var(--faint); letter-spacing:-.012em; max-width:74ch; line-height:1.55}

  /* ---------- outbound cards --------------------------------------------- */
  .links{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:0 44px}
  .linkcard{
    display:block; padding:22px 0 20px; border-top:1px solid var(--hair-soft);
  }
  .linkcard:hover .lname{color:var(--accent-ink)}
  .linkcard p{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); letter-spacing:-.012em}
  .lname{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin:0 0 10px !important; font-size:17px; font-weight:620; color:var(--ink);
    letter-spacing:-.028em;
  }
  .lname .arw{color:var(--accent); font-size:18px; line-height:1}
  .lurl{margin-top:14px !important; font-family:var(--mono); font-size:11.5px; color:var(--accent-ink) !important; letter-spacing:.01em}

  /* ---------- the request form -------------------------------------------
     The two gates sit beside the form rather than above it, so the thing a
     sender is agreeing to is on screen at the moment they press Send.     */
  .formgrid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:56px; align-items:start}
  /* A grid child defaults to min-content width, which a long placeholder or a
     file input's own button is enough to push past the track. */
  .formmain{min-width:0}
  @media (max-width:900px){ .formgrid{grid-template-columns:1fr; gap:44px} }
  .reqnote{margin:-22px 0 0; font-size:13px; color:var(--faint); letter-spacing:-.012em}
  .form{display:flex; flex-direction:column; gap:20px; margin-top:22px}
  .tier h3.tname{margin:0}
  .linkcard h3.lname{margin:0 0 10px}
  .frow{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  @media (max-width:560px){ .frow{grid-template-columns:1fr} }
  .hint{display:block; margin-top:6px; font-size:12px; font-weight:450; line-height:1.45; color:var(--faint); letter-spacing:-.01em}
  .hint a{color:var(--accent-ink); font-weight:550}
  .opt{color:var(--faint); font-weight:450}
  textarea.field{min-height:96px; resize:vertical; line-height:1.5}
  /* A file input cannot be restyled through the shared .field rule: appearance
     none removes the button and leaves nothing to press. */
  .field.file{
    appearance:auto; padding:9px 12px; font-size:13.5px; cursor:pointer;
    background:var(--raised); color:var(--body);
  }
  .field.file::file-selector-button{
    font:inherit; font-size:13px; margin-right:12px; padding:6px 13px; cursor:pointer;
    color:var(--ink); background:var(--surface); border:1px solid var(--field-line);
    border-radius:980px;
  }
  /* The honeypot exists for something that reads markup, not for anybody who
     reads the page, so it is removed from the layout entirely. */
  /* The one checkbox on the site. It is left at the browser's own size and
     colour rather than redrawn, because a hand-built checkbox is the control
     most likely to be the one a person cannot tell the state of. */
  .check{
    display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px;
    align-items:start; font-size:13.5px; line-height:1.5; color:var(--body);
    letter-spacing:-.012em; cursor:pointer; max-width:64ch;
  }
  .check input{width:17px; height:17px; margin:1px 0 0; accent-color:var(--accent); cursor:pointer}
  .check .hint{margin-top:5px}

  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .factions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
  .factions .hint{margin-top:0}

  /* The two gates used to sit in a card beside the form. They still sit beside
     it, under a hairline, because what a sender is agreeing to should be on
     screen when they press Send whether or not it is in a box. */
  .formside{padding:22px 0 0; border-top:1px solid var(--hair-soft)}
  .sideh{margin:0 0 8px; font-size:17px; font-weight:620; color:var(--ink); letter-spacing:-.028em}
  .sidenote{margin:0 0 22px; font-size:13px; line-height:1.5; color:var(--faint); letter-spacing:-.012em}
  .gate{margin-bottom:22px}
  .gnum{margin:0 0 5px; font-size:10.5px; font-weight:590; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
  .gate h3{margin:0 0 6px; font-size:14px; font-weight:590; color:var(--ink); letter-spacing:-.02em}
  .gate p{margin:0; font-size:13px; line-height:1.55; color:var(--muted); letter-spacing:-.012em}
  .gate a{color:var(--accent-ink); font-weight:550}

  footer b{color:var(--muted); font-weight:550}

  /* Transitions were already cut, but the details panel and any smooth
     scrolling are motion too, so the whole surface is stilled. */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
      transition:none !important; animation:none !important; scroll-behavior:auto !important;
    }
    html{scroll-behavior:auto !important}
  }


  /* ---------- map ------------------------------------------------------
     Progressive enhancement: the list is the page, the map is an addition.
     Without JavaScript the map block never appears and nothing is lost.   */
  .mapwrap{display:none; margin:0 0 12px}
  .js .mapwrap{display:block}
  /* Without JavaScript the map block hides itself, and its heading and intro
     would then introduce nothing. The whole section goes with it. */
  .mapblock{display:none}
  .js .mapblock{display:block}
  /* No frame, no radius, no shadow and no fill. There are no tiles behind the
     map any more, so there is nothing to contain: the sea is the page ground,
     the land is a shape drawn on it, and the whole thing reads as a drawing
     sitting in the whitespace rather than as a window cut into the page. */
  #map{height:520px; background:transparent}
  @media (max-width:760px){ #map{height:360px} }
  .mapnote{margin:14px 2px 0; font-size:12px; color:var(--faint); letter-spacing:-.01em; max-width:70ch}
  .leaflet-container{font-family:var(--sans) !important; background:transparent !important}
  /* There is no tile provider and the country outlines are public domain, so
     nothing is owed and there is no attribution control to style. This rule
     only guards against Leaflet adding one back. */
  .leaflet-control-attribution{display:none !important}
  .leaflet-popup-content-wrapper{
    border-radius:var(--r) !important; box-shadow:var(--shadow) !important;
    background:var(--surface) !important; color:var(--body) !important;
  }
  .leaflet-popup-tip{background:var(--surface) !important}
  .leaflet-popup-content{margin:12px 14px !important; font-size:13.5px !important; letter-spacing:-.01em}
  .pop-nm{display:block; font-weight:600; color:var(--ink); font-size:14.5px; margin-bottom:2px}
  .pop-meta{display:block; color:var(--faint); font-size:12px; margin-bottom:8px}
  .pop-link{color:var(--accent-ink); font-weight:550}
  .cluster{
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent) 22%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    /* A white halo keeps the number legible when two bubbles still touch. */
    box-shadow:0 0 0 2px var(--surface);
    color:var(--accent-ink); border-radius:50%; font-size:12px; font-weight:600;
    letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  }
  /* While Leaflet is on its way the space says so, quietly, instead of
     sitting empty. Leaflet replaces it the moment it draws. */
  #map:empty::before{
    content:"Drawing the map"; display:flex; align-items:center; justify-content:center;
    height:100%; color:var(--faint); font-size:13px; letter-spacing:-.01em;
  }

  /* ---------- footer ---------------------------------------------------- */
  footer{
    margin-top:88px; padding:0 24px 64px; border-top:none;
    font-size:12.5px; color:var(--faint); letter-spacing:-.01em; line-height:1.6;
  }
  footer p{margin:0 0 6px}
  footer a{color:var(--accent-ink)}

  /* The four sites next door. One line each saying what the thing is, because
     four names in a row is a link dump and a link dump is what a footer looks
     like when nobody wrote it. */
  .offsite{
    border-top:1px solid var(--hair-soft); padding:30px 0 26px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr));
    gap:22px 34px;
  }
  .offsite .oh{
    grid-column:1/-1; margin:0 0 2px; font-size:10.5px; font-weight:590;
    letter-spacing:.045em; text-transform:uppercase; color:var(--faint);
  }
  .offsite p{margin:0; font-size:12.5px; line-height:1.55; color:var(--faint); text-wrap:pretty}
  .offsite .on{display:block; font-size:14px; font-weight:590; color:var(--ink); letter-spacing:-.02em; margin-bottom:3px}
  .offsite a{color:inherit}
  .offsite a:hover .on{color:var(--accent-ink)}
  .footnotes{border-top:1px solid var(--hair-soft); padding-top:26px}
  .brand a{display:inline-flex; align-items:baseline}
  .empty{padding:40px 12px; text-align:center; color:var(--faint); font-size:14px}

  /* ---------- coverage statement ---------------------------------------- */
  /* Out of its box and back into the page. It is the most important paragraph
     on the home page, so it is set as prose at reading size rather than
     boxed off as a notice, which is how a page tells you to skip something. */
  .coverage{
    max-width:70ch; margin:18px 0 0; padding:0;
    font-size:17px; line-height:1.55;
    color:var(--muted); letter-spacing:-.018em; text-align:left; text-wrap:pretty;
  }
  .coverage b{color:var(--ink); font-weight:590}
  .coverage a{color:var(--accent-ink); font-weight:550}

  /* ---------- print -----------------------------------------------------
     People print a company entry to take into a meeting, so the sheet has to
     stand on its own: the facts, the marks and the date retrieved, with the
     controls and the map gone because neither survives paper. The marks are
     forced to print their colour, because a mark that drops out takes the
     one thing the page is for with it.                                     */
  @media print{
    :root{
      color-scheme:light;
      --ground:#FFFFFF; --surface:#FFFFFF; --raised:#FFFFFF;
      --ink:#000000; --body:#1A1A1A; --muted:#333333; --faint:#444444;
      --hair:#999999; --hair-soft:#BBBBBB; --field-line:#999999;
      --accent:#96114F; --accent-ink:#6B0B3A; --accent-wash:#FFFFFF; --accent-on:#FFFFFF;
      --shadow:none;
    }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
    body{background:#fff; font-size:11pt; line-height:1.4}
    .wrap{max-width:none; padding:0}

    /* Nothing here does anything on paper. */
    nav, .searchbox, .tabs, .more, .mapblock, .reset{display:none !important}
    /* That padding held the search field and the tabs, which are gone here. */
    #register{padding-top:0}

    /* The masthead stays, so a sheet handed round a meeting says where it came
       from, but sticky and blurred both misbehave in print layout. */
    header{position:static; background:none; border-bottom:1pt solid var(--hair);
           backdrop-filter:none; -webkit-backdrop-filter:none}
    .bar{height:auto; padding-bottom:8pt}

    .hero{padding:0 0 12pt; text-align:left}
    h1{font-size:20pt; line-height:1.15}
    .lede{font-size:11pt; max-width:none}
    .stamp{margin-top:8pt}
    .coverage{max-width:none; margin:8pt 0 0; padding:0; font-size:11pt}
    section.block{padding:16pt 0 0}
    .block h2{font-size:14pt}
    .block .intro{font-size:11pt}
    .notes h3{font-size:11pt}
    /* On paper the hairlines are all that separate anything, so they are the
       one thing that has to survive a printer's light-grey handling. */
    .item, .tier, .facts > div, .linkcard, .formside, .offsite{border-color:var(--hair)}

    /* An entry split across a page fold is the one thing worth guarding. */
    .item, .tier, .notes > div, .facts > div, .lg{break-inside:avoid; page-break-inside:avoid}
    h1, h2, h3{break-after:avoid; page-break-after:avoid}

    /* On paper a link cannot be followed, so the address has to be on the page. */
    a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:var(--muted); word-break:break-all}
    a[href^="/"]::after{content:" (mspregister.com" attr(href) ")"; font-size:9pt; color:var(--muted)}
    /* A URL under all fifty-seven rows doubles the sheet's length and says
       nothing the company number does not, so only prose links carry one. */
    .brand a::after, nav a::after, .rowbtn::after, .crumb a::after{content:"" !important}

    /* A row is a name and one line now, so it prints as one without help.
       The monogram is a placeholder for a logo and says nothing on paper. */
    .rowbtn{padding:8pt 0; gap:10pt; grid-template-columns:minmax(0,1fr) auto}
    .item{margin:0}
    .glyph{display:none}
    .sub{white-space:normal}

    /* On paper a details panel that happens to be shut takes its contents
       with it, so the filters are hidden outright rather than left to chance. */
    .legend{margin-top:12pt}

    footer{margin-top:16pt; padding:8pt 0 0}
    .offsite{padding:8pt 0; gap:6pt 20pt}
  }

  /* ---------- skip link and visually hidden text ------------------------
     The register column shows a mark and nothing else, so the word has to
     exist for anyone who cannot see the colour or the glyph.              */
  .vh{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .skip{
    position:absolute; left:-9999px; top:0; z-index:60;
    background:var(--surface); color:var(--ink); border:1px solid var(--hair);
    border-radius:var(--r-sm); padding:10px 16px; font-size:14px; font-weight:550;
  }
  .skip:focus{left:12px; top:12px}