/* ================================================================
     Automation Agency Directory: the sister of The MSP Register.

     This file is The MSP Register's stylesheet, verbatim, with one change:
     the accent is OurIdea purple where the register's is pink. Everything
     else - tokens, type, spacing, hairlines, the marks, the list, the forms,
     print - is shared, so the two sites read as one family and a fix to one
     is a fix to both. Keep it that way: edit provider/src/site.css and copy
     it here, do not fork it.

     Below the shared base is a second section for the components this site
     has and the register does not: the shortlist star, the template strip,
     the blueprints, the age check, the charts. Those are re-based on the
     shared tokens rather than carrying their own.
     ================================================================ */
  :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;

    /* This site's accent is violet where the register's is rose. #EC4899, the
       dot itself, sits at 3.5:1 and fails as text and as a button ground, so
       it stays where it belongs, in the mark.
       v3 tokens: violet-500 for fills and eyebrows, violet-600 for links
       and active states, violet-100 for the wash. */
    --accent:#7C3AED;
    --accent-ink:#51259D;
    --accent-wash:#F1EBFE;
    --accent-on:#FFFFFF;

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

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

    /* v3 geometry, 14 Sep 2026: 8 controls, 12 cards, 20 panels, 999 pills.
       One card shadow, one overlay shadow, nothing else. */
    --r-sm:8px;
    --r:12px;
    --r-lg:20px;
    --shadow:0 1px 3px rgba(0,0,0,.06);
    --shadow-overlay:0 12px 40px rgba(0,0,0,.14);

    --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;
    /* v3 dark ramp: ground-dark, dk-1 to dk-5. Accent text on dark uses the
       300 steps, because the 500/600 values fail AA on this ground. */
    --ground:#0C0A14;
    --surface:#17151F;
    --raised:#24212D;
    --ink:#F4F4F6;
    --body:#C7C7CC;
    --muted:#A3A1AD;
    --faint:#8E8E93;
    --hair:#3A3744;
    --hair-soft:#24212D;
    --land:#1F1F21;
    --land-line:#3A3744;
    --field-line:#6A6A6E;
    --accent:#B69CF7;
    --accent-ink:#B69CF7;
    --accent-wash:#2A1F4A;
    --accent-on:#1D1D1F;
    --good-ink:#5BD6A0;
    --good-wash:#12241C;
    --good-line:#22412F;
    --note-ink:#E5B155;
    --note-wash:#2A2113;
    --note-line:#453519;
    --shadow:0 1px 3px rgba(0,0,0,.5);
    --shadow-overlay:0 12px 40px rgba(0,0,0,.6);
  }

  *{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}
  /* Scoped to the header: this site also has breadcrumb and pager navs. */
  header nav{display:flex; gap:26px}
  header nav a{font-size:13px; color:var(--muted)}
  header nav a:hover{color:var(--ink)}
  header nav a[aria-current]{color:var(--ink); font-weight:500}
  @media (max-width:760px){ header 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 ---------- */
  #main{padding-top:0}
  #list{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 at badge size: one flat circle in the dot
     colour, no gradient, no glow. v3, 14 Sep 2026: the dot is the one object
     in the system at full chroma, and it is never a gradient. It carries a
     white glyph, not text, so the 3:1 icon floor is what applies and it is met. */
  .mark{
    width:18px; height:18px; border-radius:50%; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:#EC4899;
  }
  .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. */
  /* Flat since v3: Featured in violet-500, Active in the success green. Both
     clear 3:1 against white, the off-white ground and the dark ground. */
  .mark-feat{background:#7C3AED}
  .mark-live{width:15px; height:15px; background:#1A7F4B}
  .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}
  }


  /* ---------- 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:#5B21B6; --accent-ink:#4C1D95; --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. */
    header nav, .searchbox, .tabs, .more, .mapblock, .reset{display:none !important}
    /* That padding held the search field and the tabs, which are gone here. */
    #list{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:" (directory.ouridea.ai" 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, header nav a::after, .rowbtn::after, .crumb a::after, .crumbs a::after, .pg::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}

  /* ---------- the sister site, offered when a search finds nothing ------
     Same component on both sites, same words, opposite direction. It sits
     under the empty line rather than replacing it, because the person may
     simply have mistyped and the first useful advice is still to try again. */
  .crosslink{
    display:block; max-width:520px; margin:0 auto; padding:4px 24px 34px;
    text-align:center;
  }
  .crosslink p{margin:0 0 16px; font-size:15px; color:var(--muted); letter-spacing:-.015em}
  .crosslink .note{margin:14px 0 0; font-size:12.5px; color:var(--faint)}

  /* Shown only to somebody arriving from a completed checkout. */
  .paidnote{
    margin:26px 0 0; padding:18px 20px; border-radius:var(--r);
    background:var(--good-wash); border:1px solid var(--good-line);
  }
  .paidnote p{margin:0 0 8px; font-size:14.5px; color:var(--body); letter-spacing:-.015em}
  .paidnote p:last-child{margin-bottom:0}
  .paidnote strong{color:var(--good-ink)}

  /* The word next to the Featured star. The mark alone says "paid" only to
     somebody who has read the key, and a paid position that a visitor cannot
     identify as paid is the one thing this register must never ship. */
  .feattag{
    display:inline-block; margin-left:6px; vertical-align:1px;
    font-size:10.5px; font-weight:590; letter-spacing:.04em; text-transform:uppercase;
    color:var(--faint);
  }


/* ============================================================================
   DIRECTORY-ONLY COMPONENTS
   Everything above this line is shared with The MSP Register. Everything
   below is this site's own: re-based on the shared tokens, so a token change
   above reaches all of it.
   ========================================================================== */

  /* Inner pages: the register's inner hero, left-aligned, smaller heading.
     Same paddings as the register's own inner pages use. */
  .hero.small, .hero.tight{text-align:left; padding:44px 0 8px}
  .hero.small .lede, .hero.tight .lede{margin:0}
  .crumbs{margin:0 0 18px; font-size:13px; color:var(--faint); letter-spacing:-.01em; display:flex; gap:8px; flex-wrap:wrap}
  .crumbs a{color:var(--muted)}
  .crumbs a:hover{color:var(--ink)}
  .crumbs span[aria-current]{color:var(--ink); font-weight:500}

  /* Helpers the pages still use by these names. */
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .mono,.card-n{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .tiny{font-size:13px; color:var(--muted)}
  .eyebrow{display:none}
  .unstated{color:var(--faint); font-style:italic; font-size:.92em}
  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}
  h3{margin:0 0 7px; font-size:15px; font-weight:590; color:var(--ink); letter-spacing:-.02em}
  p{text-wrap:pretty}
  main > section, main > .panel{margin-top:44px}
  main > section:first-child, main > .hero{margin-top:0}
  ::selection{background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--ink)}
  /* The abi. gradient. v3 allows it on exactly two things: a 3px bar and a
     halo behind the dot. Here it is the 3px rules and the rank bar, nothing
     else. The dot colour is the mark's and is never a fill, so the saved-row
     tint, the pin and the chart hover use the accent instead. */
  :root{ --grad:linear-gradient(135deg,#a855f7,#ec4899); --dot:#EC4899; }

/* ---- fixture warning ----------------------------------------------------*/
.fixture-bar{
  background:var(--note-wash); color:var(--note-ink); border-bottom:1px solid var(--note-ink);
  font-size:13px; padding:10px 20px; text-align:center; font-weight:500;
}
.fixture-bar code{font-family:var(--mono); font-size:12px}


/* ---- pills --------------------------------------------------------------*/
.pill{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; font-weight:590;
  letter-spacing:.4px; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid transparent;
}
.pill.ok{color:var(--good-ink); background:var(--good-wash); border-color:color-mix(in srgb,var(--good-ink) 26%,transparent)}
.pill.warn{color:var(--note-ink); background:var(--note-wash); border-color:color-mix(in srgb,var(--note-ink) 34%,transparent)}
.pill.self{color:var(--accent); background:var(--accent-wash); border-color:color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---- honest block -------------------------------------------------------*/
.honest{
  border:1px solid var(--hair-soft); border-radius:var(--r);
  background:var(--surface); padding:26px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.honest h2{font-size:19px}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px}
.two h3{color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px}
.two p{font-size:14.5px}

/* ---- cards (category / location indexes) --------------------------------*/
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.cards.tight{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card a{
  display:flex; flex-direction:column; gap:7px; height:100%;
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:20px; text-decoration:none; color:inherit; transition:border-color .14s ease, transform .14s ease;
}
.card a:hover{border-color:var(--accent); transform:translateY(-1px)}
.card-n{
  font-size:12px; font-weight:500; color:var(--accent);
  background:var(--accent-wash); align-self:flex-start; padding:2px 8px; border-radius:5px;
}
.card h2{font-size:17px}
.card p{font-size:13.5px; color:var(--muted); line-height:1.55}

/* ---- profile ------------------------------------------------------------*/
.profile{
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:30px 32px; display:flex; flex-direction:column; gap:18px;
}
.p-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.p-head h1{font-size:clamp(24px,3.6vw,33px)}
.p-sub{font-size:14px; color:var(--muted); margin-top:5px}
h2.sec{
  font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid var(--hair-soft); padding-top:18px; margin-top:4px;
}
.alert{
  background:var(--note-wash); color:var(--note-ink); border-left:3px solid var(--note-ink);
  padding:12px 16px; border-radius:0 8px 8px 0; font-size:14px;
}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); border-radius:10px; overflow:hidden}
.facts > div{background:var(--raised); padding:14px 16px}
.facts > div.wide{grid-column:1/-1}
.facts dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.facts dd{margin:0; font-size:14.5px; color:var(--ink)}
.sics{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:14px}
.sics .mono{color:var(--accent); font-size:12.5px; margin-right:7px}
.prov{font-size:13px; color:var(--muted); line-height:1.6; max-width:78ch}
.ext::after{content:" ↗"; font-size:.85em}

.declared{
  border:1px solid var(--hair-soft); border-radius:10px; padding:22px 24px;
  display:flex; flex-direction:column; gap:11px; background:var(--raised);
}
.declared.empty-declared{border-style:dashed}
.declared-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.declared-head h2{font-size:17px}
.declared p{font-size:14.5px}
.declared-body{color:var(--body)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font-family:var(--mono); font-size:12px; color:var(--body);
  background:var(--surface); border:1px solid var(--hair-soft); padding:3px 9px; border-radius:6px;
}

/* ---- prose (about) ------------------------------------------------------*/
.prose{
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:34px 36px; max-width:74ch; display:flex; flex-direction:column; gap:14px;
}
.prose h1{font-size:clamp(26px,4vw,38px); margin-bottom:6px}
.prose h2{font-size:18px; margin-top:16px}
.prose ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:7px}
.prose li::marker{color:var(--accent)}

/* ---- abi. Clone panel: the second bold moment ---------------------------*/
.cta{
  position:relative; overflow:hidden;
  border:1px solid var(--hair-soft); border-radius:var(--r);
  background:var(--surface); padding:32px 34px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.cta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
}
.cta h2{font-size:23px; max-width:26ch}
.cta p{font-size:15px; max-width:64ch}
/* Solid purple, never a gradient. Gradient fills belong to the logo dot,
   headline accents and thin rules. #7C3AED carries white text at 5.70:1. */
.btn{
  display:inline-block; margin-top:8px; background:var(--accent); color:#fff;
  font-weight:590; font-size:14.5px; text-decoration:none;
  padding:11px 22px; border-radius:var(--r-sm); transition:opacity .15s ease;
}
.btn:hover{opacity:.88; color:#fff}


/* ==========================================================================
   Additions: shortlist, sort, freshness strip, insights, charts, pager
   ========================================================================== */

/* ---- shortlist star -----------------------------------------------------*/
/* The shortlist star sits beside the row, outside the link, so a tap on it
   never navigates. It is invisible until the row is hovered or the company is
   saved, because a column of forty greyed-out stars is chrome and the list is
   meant to read as names. Keyboard focus shows it too. */
.item{display:flex; align-items:center; gap:4px}
.item .rowbtn{flex:1 1 auto; min-width:0}
.star{
  flex:none; width:34px; height:34px; margin-right:6px; display:flex; align-items:center;
  justify-content:center; background:none; border:none; border-radius:10px; padding:0;
  color:var(--faint); cursor:pointer; opacity:0;
}
.item:hover .star, .item.is-saved .star, .star:focus-visible{opacity:1}
.star svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.star:hover{color:var(--accent); background:var(--raised)}
.item.is-saved .star{color:var(--accent)}
.item.is-saved .star svg{fill:currentColor; stroke:currentColor}
.tab.pin svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.tab.pin[aria-pressed="true"] svg, .tab.pin.has-any svg{fill:currentColor}
/* A row under keyboard focus rings the whole row, as the register does. */
.rowbtn:focus-visible{outline-offset:-3px; border-radius:0}
.count{margin:22px 2px 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--faint); text-align:center}
.pill.warn{display:inline-block; padding:3px 9px; border-radius:980px; font-size:11px; font-weight:590; letter-spacing:.02em; background:var(--note-wash); color:var(--note-ink); border:1px solid var(--note-line)}
.row.is-saved{background:color-mix(in srgb, var(--accent) 6%, var(--surface))}

.ghost.pin{display:inline-flex; align-items:center; gap:7px}
.ghost.pin svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.ghost.pin.has-any{color:var(--ink); border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.ghost.pin.has-any svg{fill:var(--accent); stroke:var(--accent)}
.ghost.pin[aria-pressed="true"]{
  color:#fff; background:var(--accent); border-color:var(--accent);
}
.ghost.pin[aria-pressed="true"] svg{fill:#fff; stroke:#fff}
.ghost.pin span{font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:12px}

/* ---- freshness strip / related ------------------------------------------*/
.strip{display:flex; flex-direction:column; gap:16px}
.strip-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.strip-head h2{font-size:20px; margin-top:3px}
.strip-more{font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; display:inline-block; padding:4px 0}
.strip-more::after{content:" →"}
.newest{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px;
}
.newest a{
  display:flex; flex-direction:column; gap:3px; height:100%;
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:9px;
  padding:13px 15px; text-decoration:none; color:inherit;
  border-left:3px solid var(--accent); transition:border-color .14s ease;
}
.newest a:hover{border-color:var(--accent)}
.n-name{font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35}
.newest a:hover .n-name{color:var(--accent)}
.n-meta{font-size:12.5px; color:var(--muted)}
.n-meta .mono{font-family:var(--mono); grid-template-columns:1fr 1fr; gap:12px}
.pg{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
  border:1px solid var(--hair-soft); border-radius:10px; padding:14px 16px; background:var(--surface);
  min-width:0; transition:border-color .14s ease;
}
.pg:hover{border-color:var(--accent)}
.pg span{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.pg strong{font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg.next{text-align:right}

/* ---- insights: stat tiles ----------------------------------------------*/
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.tile{
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:20px 22px; display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden;
}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); opacity:.55}
.tile-v{
  font-family:var(--sans); font-weight:640; font-size:30px; line-height:1.05;
  color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.tile-l{font-size:13.5px; font-weight:600; color:var(--body)}
.tile-n{font-size:12px; color:var(--muted)}

.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:20px}
.chartcard{gap:12px}
.lead-note{max-width:70ch}

/* ---- charts -------------------------------------------------------------*/
.chart{margin:6px 0 0; display:flex; flex-direction:column; gap:0}
.chart svg{width:100%; height:190px; display:block; overflow:visible}
.chart svg.chart-axis{height:18px}
.c-grid{stroke:var(--hair-soft); stroke-width:1; stroke-dasharray:2 4}
.c-axis{stroke:var(--hair-soft); stroke-width:1}
.c-fill{fill:var(--accent); transition:fill .12s ease}
.c-hit{fill:transparent}
.c-bar{cursor:default; outline:none}
.c-bar:hover .c-fill,.c-bar.is-on .c-fill,.c-bar:focus-visible .c-fill{fill:var(--accent)}
.c-bar:focus-visible .c-hit{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.c-val{
  font-family:var(--mono); font-size:11px; fill:var(--ink);
  font-variant-numeric:tabular-nums;
}
.c-tick{font-family:var(--mono); font-size:10px; fill:var(--muted)}
.c-tip{
  position:absolute; transform:translate(-50%,-100%); z-index:60; pointer-events:none;
  background:var(--ink); color:var(--ground); font-size:12px; font-weight:500;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
}

/* ---- ranked bars --------------------------------------------------------*/
.rank{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.rank-row{border-radius:6px}
.rank-row > *{
  display:grid; grid-template-columns:118px minmax(0,1fr) 44px; gap:12px;
  align-items:center; padding:5px 7px; text-decoration:none; color:inherit; border-radius:6px;
}
.rank-row a{color:inherit; text-decoration:none}
.rank-row a:hover{background:var(--accent-wash)}
.rank-label{
  font-size:13px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rank-row a:hover .rank-label{color:var(--accent)}
.rank-track{height:11px; background:var(--hair-soft); border-radius:3px; overflow:hidden}
.rank-fill{display:block; height:100%; background:var(--accent); border-radius:0 3px 3px 0}
.rank-row:first-child .rank-fill{background:var(--grad)}
.rank-val{
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  .row{grid-template-columns:26px minmax(0,1fr) auto; gap:6px 12px}
  .row-main{grid-column:2; grid-row:1}
  .row-status{grid-column:3; grid-row:1; justify-self:end}
  .row-loc{grid-column:2; grid-row:2}
  .row-inc{grid-column:3; grid-row:2; justify-self:end}
  .pager{grid-template-columns:1fr}
  .rank-row > *{grid-template-columns:96px minmax(0,1fr) 38px; gap:9px}
}

.preview-bar{background:var(--accent-wash); color:var(--accent); border-bottom-color:var(--hair-soft)}

/* ---- abi. Clone template chooser ---------------------------------------*/
.cta-q{font-size:14px; font-weight:600; color:var(--ink); margin-top:6px}
.tpls{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px}
.tpl{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:500;
  color:var(--ink); background:var(--raised);
  border:1px solid var(--hair-soft); border-radius:9px; padding:9px 15px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
.tpl:hover{
  color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-1px);
}
.tpl:first-child{border-color:rgba(168,85,247,.34)}
.cta .tiny a{font-weight:500}
@media (prefers-reduced-motion: reduce){ .tpl:hover{transform:none} }

/* ---- analytics consent --------------------------------------------------
   Bottom-anchored, dismissible, and never blocking: the directory is fully
   usable while it is on screen. A modal cookie wall would make declining
   harder than accepting, which is the thing regulators object to. */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  max-width:520px; margin-left:auto;
  background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:20px 22px; display:flex; flex-direction:column; gap:14px;
}
.consent[hidden]{display:none !important}
.consent p{font-size:13.5px; color:var(--body); line-height:1.6}
.consent .fw{color:var(--ink); font-weight:590; font-size:14.5px}
.consent-body{display:flex; flex-direction:column; gap:7px}
/* Equal visual weight: accept is not louder than decline. */
.consent-btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.consent-btns .ghost,.consent-btns .btn{margin-top:0; font-size:13.5px; padding:9px 18px}
#cookieSettings{font-size:13.5px}
@media (max-width:560px){
  .consent{left:10px; right:10px; bottom:10px; padding:18px}
  .consent-btns{justify-content:stretch}
  .consent-btns .ghost,.consent-btns .btn{flex:1; text-align:center}
}

/* ---- observed block -----------------------------------------------------
   Visually distinct from the self-declared block on purpose. These are three
   different kinds of statement and the reader has to be able to tell them
   apart at a glance: register fact, what we observed, what they told us. */
.observed{
  border:1px solid var(--hair-soft); border-left:3px solid var(--accent);
  border-radius:10px; padding:22px 24px; background:var(--raised);
  display:flex; flex-direction:column; gap:11px;
}
.observed p{font-size:14.5px}
.pill.obs{color:var(--accent); background:var(--accent-wash); border-color:rgba(168,85,247,.34)}

/* ---- blueprints ---------------------------------------------------------
   First-party editorial content, so it may look authored in a way the
   register pages must not: sectioned panels, a step list with mono system
   chips, and a provenance box that says whose model this is before anything
   else does. The manual chip is deliberately the odd one out — a dashed
   border where every real system is solid — because the manual steps are
   the point of the whole exercise. */
.prov{
  border:1px solid var(--hair-soft); border-left:3px solid var(--accent);
  border-radius:10px; padding:16px 20px; background:var(--raised);
}
.prov p{font-size:14px; color:var(--body); max-width:none}
.bp-sec{
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:24px 26px; gap:14px;
}
.bp-sec h2{font-size:19px}
.bp-sec .cards{margin-top:4px}
.card h3{font-size:17px; margin:0}
.bp-note{font-size:14px; color:var(--muted); max-width:70ch; line-height:1.6}
.bp-chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--accent); background:var(--accent-wash);
  padding:3px 9px; border-radius:6px; border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.bp-chip.manual{
  color:var(--muted); background:none; border:1px dashed var(--faint);
  text-transform:uppercase; letter-spacing:.4px; font-size:10px;
}
.bp-cat{font-size:13px; color:var(--muted)}
.bp-syslist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px 18px}
.bp-syslist li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--hair-soft)}
.bp-depts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.bp-depts li{font-size:14.5px; color:var(--body); padding:6px 0; border-bottom:1px solid var(--hair-soft); line-height:1.6}
.bp-depts li:last-child,.bp-syslist li:last-child{border-bottom:none}
.bp-dept{
  display:inline-block; min-width:150px; font-family:var(--mono);
  font-size:11px; font-weight:590; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.bp-exts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.bp-exts li{border:1px solid var(--hair-soft); border-radius:var(--r-sm); padding:14px 16px; background:var(--raised); font-size:14.5px; line-height:1.7}
/* No wash here: these pills sit on surface-2, where the tint pushed the
   label to 4.30:1. On the surface itself the same colour reads 4.73:1. */
.bp-exts .pill{color:var(--accent); background:none; border-color:color-mix(in srgb,var(--accent) 34%,transparent); margin-left:4px}
.bp-steps{
  list-style:none; margin:4px 0 0; padding:0;
  counter-reset:bpstep; display:flex; flex-direction:column;
}
.bp-steps li{
  counter-increment:bpstep;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 4px 12px 0; border-bottom:1px solid var(--hair-soft);
  position:relative;
}
.bp-steps li:last-child{border-bottom:none}
.bp-steps li::before{
  content:counter(bpstep, decimal-leading-zero);
  font-family:var(--mono); font-size:11px; font-weight:590;
  color:var(--faint); min-width:26px;
}
.bp-act{font-size:15px; font-weight:600; color:var(--ink); flex:1 1 auto}
@media (max-width:640px){
  .bp-sec{padding:18px 16px}
  .bp-dept{display:block; min-width:0; margin-bottom:2px}
}

/* ---- report table -------------------------------------------------------*/
.rpt-wrap{overflow-x:auto}
.rpt-table{width:100%; border-collapse:collapse; font-size:14.5px}
.rpt-table th{
  text-align:left; font-family:var(--mono); font-size:11px;
  font-weight:590; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:8px 14px 8px 0; border-bottom:1px solid var(--hair-soft);
}
.rpt-table td{
  padding:10px 14px 10px 0; border-bottom:1px solid var(--hair-soft);
  color:var(--body); font-variant-numeric:tabular-nums;
}
.rpt-table td:not(:first-child),.rpt-table th:not(:first-child){text-align:right}
.rpt-table tbody tr:last-child td{border-bottom:none}
/* Sector names are the only links in the report table, so they need a real
   hit box; the cell padding absorbs it without changing the row height. */
.rpt-table a{font-weight:600; display:inline-block; padding:3px 0}


/* ---- claim form ----------------------------------------------------------
   Deliberately plain. A form asking a stranger for their company details
   should look like a form, not a conversion funnel: no gradients, no
   reassurance badges, and every hint sitting under the field it explains
   rather than in a tooltip nobody opens. */
.claimform{display:flex; flex-direction:column; gap:22px; max-width:660px}
.claimform fieldset{border:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.radios{
  border:1px solid var(--hair-soft); border-radius:var(--r-sm);
  background:var(--raised); overflow:hidden; gap:0;
}
.radios label{
  padding:12px 14px; border-bottom:1px solid var(--hair-soft); margin:0;
  transition:background .12s ease;
}
.radios label:last-child{border-bottom:none}
.radios label:hover{background:var(--surface)}
/* The chosen option should be obvious without reading all four. */
.radios label:has(input:checked){background:var(--surface)}
.radios label:has(input:checked) span{color:var(--ink)}
.radios label:focus-within{background:var(--surface)}
.claimform legend{
  padding:0; font-family:var(--mono); font-size:11px; font-weight:590;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.radios{display:flex; flex-direction:column; gap:9px}
.radios label{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; cursor:pointer; padding:2px 0}
.radios input{margin-top:4px; accent-color:var(--accent); flex:none; width:16px; height:16px}
.radios b{color:var(--ink); font-weight:590}
.fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{display:flex; flex-direction:column; gap:7px; margin:0}
.field label{
  font-family:var(--mono); font-size:10.5px; font-weight:590;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.req{
  font-size:9.5px; letter-spacing:.08em; color:var(--accent);
  background:var(--accent-wash); padding:2px 6px; border-radius:4px; font-weight:590;
}
/* Scoped away from radios on purpose: a bare `.claimform input` rule sets
   width:100% at the same specificity as the radio rule above and, coming
   later, wins — which stretches each radio to the full form width and shunts
   its label off the end of the row. */
.claimform input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),.claimform textarea{
  font:inherit; font-size:15px; color:var(--ink); width:100%;
  background:var(--raised); border:1px solid var(--hair-soft);
  border-radius:var(--r-sm); padding:12px 14px; resize:vertical;
}
.claimform input::placeholder,.claimform textarea::placeholder{color:var(--faint)}
.radios label:focus-within span{color:var(--ink)}
.claimform input:not([type="radio"]):focus,.claimform textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.hint{font-size:12.5px; color:var(--faint); line-height:1.5; max-width:52ch}
.formfoot{border-top:1px solid var(--hair-soft); padding-top:16px; max-width:70ch}
/* Netlify's honeypot: hidden from people and from assistive technology, but
   present in the DOM for the bots that fill everything in. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:640px){
  .fieldrow{grid-template-columns:1fr; gap:20px}
  .claimform{gap:18px}
}
/* Needs to out-rank `.field label`, which sets the uppercase mono treatment
   for field labels: a sentence-long consent line set in 10px uppercase mono
   is close to unreadable. */
.claimform .checkline{display:flex; align-items:flex-start; gap:10px; cursor:pointer; text-transform:none; letter-spacing:0; font-family:inherit; font-size:14px; font-weight:400; color:var(--body)}
.claimform .checkline input{margin-top:3px; accent-color:var(--accent); flex:none; width:16px; height:16px}
.consent-line{border-top:1px solid var(--hair-soft); padding-top:16px}

/* ---- /check/ : company age check ----------------------------------------
   Everything here is token-driven, so the explicit dark toggle carries it
   without a second palette. The three age bands are deliberately not a
   decorative ramp: the newest band is the only one that gets --purple, the
   fill reserved for white text, because that band IS the finding. */
.ac-hero{padding:14px 0 6px}
.ac-hero h1{margin:6px 0 10px}
.ac-hero .lede strong{color:var(--ink)}

.ac-tool{
  background:var(--surface); border:1px solid var(--hair-soft); border-radius:var(--r);
  padding:22px; margin:20px 0 30px; box-shadow:var(--shadow);
}
.ac-label{
  display:block; font-family:var(--mono); font-size:11px;
  font-weight:590; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.ac-input{display:flex; gap:10px; flex-wrap:wrap}
.ac-input input{
  flex:1 1 260px; min-width:0; padding:12px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--ground); border:1px solid var(--hair);
  border-radius:var(--r-sm);
}
.ac-input input:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:transparent}
.ac-input button{
  flex:0 0 auto; padding:12px 22px; font:inherit; font-weight:600; cursor:pointer;
  color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:var(--r-sm);
}
.ac-input button:hover{filter:brightness(1.07)}
.ac-input button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ac-hint{font-size:13px; color:var(--muted); margin:9px 0 0}

.ac-out:not(:empty){margin-top:18px}
.ac-card{border:1px solid var(--hair-soft); border-radius:var(--r-sm); background:var(--ground); padding:18px}
.ac-example{
  font-family:var(--mono); font-size:10px; font-weight:590;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 8px;
}
.ac-verdict{font-size:17px; font-weight:590; color:var(--ink); margin:0 0 12px}
.ac-miss .ac-verdict{color:var(--body)}
.ac-facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 14px}
.ac-facts div{display:flex; flex-direction:column; gap:2px}
.ac-facts dt{
  font-family:var(--mono); font-size:10px; font-weight:590;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.ac-facts dd{margin:0; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.ac-place{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px}
.ac-place li{font-size:14.5px; color:var(--body)}
.ac-place b{color:var(--ink); font-variant-numeric:tabular-nums}
.ac-actions{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.ac-btn{
  display:inline-block; padding:9px 16px; border-radius:var(--r-sm); font-size:14px;
  font-weight:600; text-decoration:none; color:#fff; background:var(--accent); border:1px solid var(--accent);
}
.ac-btn:hover{filter:brightness(1.07); text-decoration:none}
.ac-btn.ac-ghost{color:var(--accent); background:transparent; border-color:var(--hair)}
.ac-btn.ac-ghost:hover{border-color:var(--accent); filter:none}

.ac-figures h2{margin-bottom:6px}
.ac-intro{color:var(--body); max-width:64ch; margin:0 0 22px}
.ac-sector{margin:0 0 26px}
.ac-sector figcaption{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:9px}
.ac-sector-name{font-weight:590; color:var(--ink); font-size:15.5px}
.ac-sic,.ac-total{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.ac-bar{display:flex; height:38px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--hair-soft)}
.ac-seg{display:flex; align-items:center; justify-content:center; min-width:0}
.ac-seg b{
  font-family:var(--mono); font-size:11.5px; font-weight:590;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ac-seg.ac-oldest{background:var(--raised)}
.ac-seg.ac-oldest b{color:var(--body)}
.ac-seg.ac-middle{background:var(--accent-wash)}
.ac-seg.ac-middle b{color:var(--accent)}
.ac-seg.ac-newest{background:var(--accent)}
.ac-seg.ac-newest b{color:#fff}
.ac-key{list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; margin:10px 0 0; padding:0}
.ac-key li{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--body)}
.ac-key b{color:var(--ink); font-variant-numeric:tabular-nums}
.ac-dot{width:11px; height:11px; border-radius:3px; flex:none; border:1px solid var(--hair-soft)}
.ac-dot.ac-oldest{background:var(--raised)}
.ac-dot.ac-middle{background:var(--accent-wash)}
.ac-dot.ac-newest{background:var(--accent); border-color:var(--accent)}

.ac-method h2{margin-bottom:14px}
.ac-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px}
.ac-cols h3{
  color:var(--muted); font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
}
.ac-cols p{font-size:14.5px; color:var(--body); margin:0}

@media (max-width:560px){
  .ac-tool{padding:16px}
  .ac-bar{height:34px}
  .ac-seg b{font-size:10px}
  .ac-input button{width:100%}
}

/* ---- /check/ : reproducible-query block ---------------------------------*/
.ac-repro{margin:34px 0}
.ac-repro h2{margin-bottom:10px}
.ac-repro p{color:var(--body); max-width:66ch}
.ac-repro pre{
  background:var(--raised); border:1px solid var(--hair-soft); border-radius:var(--r-sm);
  padding:14px 16px; overflow-x:auto; margin:14px 0;
}
.ac-repro pre code{font-family:var(--mono); font-size:12.5px; color:var(--ink)}
.ac-repro p code{background:var(--raised); padding:1px 5px; border-radius:4px; font-size:12.5px; font-family:var(--mono)}
.ac-warn{font-size:14.5px}
.ac-warn strong{color:var(--ink)}

  /* The register injects the cross-link only when a search is empty; this
     site renders it in the page and toggles the hidden attribute, and an
     author display rule would otherwise beat the attribute. */
  .crosslink[hidden], .empty[hidden], .count[hidden]{display:none}

/* ============================================================================
   NO BOXES
   The register draws nothing in a box: no card, no fill, no border round the
   outside, no shadow. A hairline above a thing is enough to say where it
   starts. The components below were written for the old site, which boxed
   everything, and this pass takes the boxes off them so the two sites read
   the same. It comes last on purpose, so it wins.
   ========================================================================== */

  /* header: the brand and a seven-item nav need to share the bar without
     colliding. The nav takes the right, wraps if it must, and the "by" line
     drops under the name on a narrow bar rather than crowding it. */
  .bar{gap:18px}
  .brand{flex:0 1 auto; min-width:0; flex-wrap:wrap; row-gap:0}
  header nav{margin-left:auto; gap:20px; flex-wrap:wrap; justify-content:flex-end; row-gap:4px}
  @media (max-width:1060px){ .brand .by{display:none} }
  @media (max-width:860px){ header nav{display:none} }

  /* the company page */
  .profile{background:none; border:none; box-shadow:none; border-radius:0; padding:0; margin-top:8px}
  .p-head{padding:0 0 10px; border:none; background:none; border-radius:0}
  .p-head h1{font-size:clamp(30px,4.4vw,44px); font-weight:640; letter-spacing:-.038em; line-height:1.05}
  .p-sub{font-size:15px; color:var(--muted); margin-top:8px; letter-spacing:-.015em}
  .sec{border:none; padding:0; margin-top:28px}
  .sec > h2, .profile h2{font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; font-family:var(--sans)}
  .facts{display:grid; grid-template-columns:1fr 1fr; gap:0 44px; background:none; border:none; border-radius:0; overflow:visible; margin-top:0}
  @media (max-width:560px){ .facts{grid-template-columns:1fr} }
  .facts > div{background:none; padding:15px 0; border-top:1px solid var(--hair-soft)}
  .facts > div.wide{grid-column:1/-1}
  .facts dt{font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint); margin:0; font-family:var(--sans)}
  .facts dd{margin:4px 0 0; font-size:15px; color:var(--ink); letter-spacing:-.015em}
  .facts dd.mono, .facts dd .mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px}
  .sics{font-size:14.5px}
  .sics .mono{color:var(--accent-ink); font-size:12.5px}
  .prov{background:none; border:none; border-left:none; border-radius:0; padding:15px 0 0; margin-top:18px; border-top:1px solid var(--hair-soft); font-size:13px; color:var(--faint); max-width:70ch}
  .prov a{color:var(--accent-ink)}
  .declared, .declared.empty-declared{
    background:none; border:none; border-radius:0; padding:22px 0 0; margin-top:28px;
    border-top:1px solid var(--hair-soft); box-shadow:none;
  }
  .declared-head h2, .declared h2{font-size:17px; font-weight:620; letter-spacing:-.028em; text-transform:none; color:var(--ink); margin:0 0 8px}
  .declared p{font-size:14.5px; color:var(--muted); line-height:1.55; max-width:70ch}
  .chip{background:var(--raised); border:1px solid transparent; border-radius:980px; color:var(--body); font-size:12.5px; padding:5px 11px}

  /* related companies and the pager: rows, not tiles */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:0 44px}
  .cards.tight{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
  .card{list-style:none}
  .card a, .card{
    display:block; padding:16px 0 15px; background:none; border:none; border-top:1px solid var(--hair-soft);
    border-radius:0; box-shadow:none; transform:none; color:inherit;
  }
  .card a:hover{border-color:var(--hair-soft); transform:none}
  .card a:hover h2, .card a:hover h3, .card a:hover .n-name{color:var(--accent-ink)}
  .card h2, .card h3{font-size:15.5px; font-weight:550; color:var(--ink); letter-spacing:-.02em; margin:0 0 3px; text-transform:none}
  .card p{font-size:12.5px; color:var(--faint); margin:0; letter-spacing:-.01em}
  .card-n{font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.02em}
  .pager{display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:8px}
  .pg{background:none; border:none; border-top:1px solid var(--hair-soft); border-radius:0; padding:16px 0; box-shadow:none}
  .pg:hover{border-color:var(--hair-soft)}
  .pg:hover strong{color:var(--accent-ink)}
  .pg span{font-family:var(--sans); font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint)}
  .pg strong{font-size:15px; font-weight:550; letter-spacing:-.02em; margin-top:3px; display:block}

  /* the freshness strip on the home page */
  .strip{padding-top:76px; gap:0}
  .strip-head{align-items:baseline; margin-bottom:6px}
  .strip-head h2{font-size:clamp(26px,3.4vw,34px); font-weight:620; letter-spacing:-.03em; margin:0}
  .strip-head .strip-more{font-size:13.5px; color:var(--accent-ink); display:inline; margin:0}
  .newest{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 44px; list-style:none; margin:0; padding:0}
  @media (max-width:820px){ .newest{grid-template-columns:1fr} }
  .newest li, .newest > a{border:none; border-radius:0; background:none; box-shadow:none; padding:0}
  .newest a{display:block; padding:16px 0 15px; border-top:1px solid var(--hair-soft); border-left:none; border-radius:0; background:none; box-shadow:none}
  .newest a:hover .n-name{color:var(--accent-ink)}
  .n-name{display:block; font-size:15.5px; font-weight:550; letter-spacing:-.02em; color:var(--ink)}
  .n-meta{display:block; font-size:12.5px; color:var(--faint); margin-top:2px}
  .n-meta .mono{font-size:12px}
  .strip > .tiny, .strip .tiny{margin-top:22px; font-size:13px; color:var(--faint)}

  /* "what this list is": a block with notes, as the register does it */
  .honest{background:none; border:none; border-radius:0; box-shadow:none; padding:76px 0 0; margin:0}
  .honest h2{font-size:clamp(26px,3.4vw,34px); font-weight:620; letter-spacing:-.03em; margin:0 0 26px; color:var(--ink)}
  .two{gap:26px 64px}
  .two h3{font-family:var(--sans); font-size:10.5px; font-weight:590; letter-spacing:.045em; text-transform:uppercase; color:var(--faint); margin:0 0 9px}
  .two p{font-size:14.5px; line-height:1.55; color:var(--muted); letter-spacing:-.012em}
  .honest > p{margin-top:26px; font-size:13.5px; color:var(--faint); max-width:74ch}

  /* the abi. Clone panel: the product's own gradient is allowed on its name
     and its buttons, and nowhere else. Under a hairline, not in a box. */
  .cta{background:none; border:none; border-radius:0; box-shadow:none; padding:76px 0 0; margin:0; overflow:visible}
  .cta::before{display:none}
  .cta h2{font-size:clamp(26px,3.4vw,34px); font-weight:620; letter-spacing:-.03em; margin:0 0 14px; max-width:none}
  .cta p{font-size:17px; color:var(--muted); letter-spacing:-.018em; max-width:64ch}
  .cta-q{font-size:12px; font-weight:590; letter-spacing:.01em; color:var(--faint); margin-top:26px}
  .tpls{gap:8px; margin:10px 0 18px}
  .tpl{
    background:var(--surface); border:1px solid var(--field-line); color:var(--ink); border-radius:980px;
    padding:9px 15px; font-size:13.5px; letter-spacing:-.012em; box-shadow:none;
  }
  .tpl:hover{border-color:var(--accent); background:var(--surface); transform:none; box-shadow:none}
  .tpl:first-child{border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink)}
  .cta .tiny{font-size:13px; color:var(--faint); max-width:64ch}
  .cta .tiny a{color:var(--accent-ink)}

  /* the observed block on a company page */
  .observed{background:none; border:none; border-radius:0; padding:22px 0 0; margin-top:28px; border-top:1px solid var(--hair-soft)}
  .obs{font-size:14.5px}

  /* crumbs on inner pages, same as the register's .crumb */
  .crumbs{margin:26px 0 0}

  /* the shortlist legend item uses the star, not an empty circle */
  .lg .mark.mark-star{background:var(--raised); box-shadow:none; color:var(--muted)}
  .lg .mark.mark-star svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round}

  /* fixture / preview bar is a dev-only strip; keep it thin and off-brand */
  .fixture-bar{background:var(--note-wash); color:var(--note-ink); border-bottom:1px solid var(--note-line); font-size:12.5px; padding:8px 24px; text-align:center}