/* The SPA typeface, on the same stable same-origin URLs the SPA build
       copies verbatim from `frontend/public/fonts/`. Only the two latin
       subsets: these pages are FR/NL/DE/EN and never need Cyrillic or Greek,
       and a public page a crawler fetches a million times should not pull
       130 KB it cannot render a glyph from. `swap` so the text paints in the
       fallback rather than waiting. */
    @font-face {
      font-family: "Inter Tight Variable";
      font-style: normal;
      font-display: swap;
      font-weight: 100 900;
      src: url(/fonts/inter-tight-latin-wght-normal.woff2) format("woff2-variations");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Inter Tight Variable";
      font-style: normal;
      font-display: swap;
      font-weight: 100 900;
      src: url(/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2-variations");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
    }
    /* Exact SPA design tokens (frontend/src/index.css) so the fiche and the
       app share one look: --accent = --primary, --ink = --foreground,
       --line = --border, --bg = --background, --bg-soft = --muted, … */
    /* Same palette as the app (frontend/src/index.css). These pages are the
       first thing a visitor from Google sees, and they were still painted in
       the old teal on the old greys: the fiche and the product looked like two
       different companies. Kept as literals rather than imported because this
       page is server-rendered and must not wait on a stylesheet. */
    :root {
      --accent: #26785d;
      --accent-hover: #1c5a46;
      --ink: #0d131c;
      --ink-soft: #46536a;
      --ink-faint: #6b7a93;
      --line: #e4e8f0;
      --line-soft: #eef2f8;
      --bg: #f5f7fb;
      --bg-soft: #ebeff6;
      --card: #ffffff;
      --header-bg: rgba(245, 247, 251, .95);
      --red: #a8202b;
      --red-soft: #fbe0e1;
      --green: #10704f;
      --brand-a: #0a9e81;
      --brand-b: #098e95;
      /* Body copy on long reads: a notch softer than --ink, darker than
         --ink-soft, so a paragraph reads as text rather than as a caption. */
      --ink-body: #283548;
      /* One radius, the app's (`--radius: 0.25rem`, which its `rounded-lg`
         also resolves to): controls, cards, tables and illustrations alike.
         The public pages used to round containers at 8px and illustrations
         at 12px, which is what made them read as a template sitting in
         front of the product rather than as the product. The three names
         stay so the call sites keep saying what they round. */
      --r: 4px;
      --r-card: 4px;
      --r-lg: 4px;
      /* The side gutter of every row: header, content and footer share it,
         so the logo, the h1 and the footer columns start on one line. */
      --gutter: 24px;
      /* The header row: 10px + the 48px logo + 10px + its bottom rule. The
         mobile panel hangs off it, so the two have to agree to the pixel. */
      --header-h: 69px;
      color-scheme: light;
    }
    /* ── Header dropdown menu (language) ── */
    .dd { position: relative; }
    .dd-menu {
      display: none; position: absolute; right: 0; top: calc(100% + 6px);
      background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
      min-width: 170px; padding: 4px; z-index: 60;
      box-shadow: 0 12px 32px rgba(13, 19, 28, .08);
    }
    .dd.open .dd-menu { display: block; }
    .dd-menu a, .dd-menu button {
      display: flex; align-items: center; gap: 8px; width: 100%;
      padding: 8px 10px; border-radius: 4px; font-size: 14px; font-weight: 500;
      color: var(--ink); background: none; border: none; cursor: pointer;
      font-family: inherit; text-align: left;
    }
    .dd-menu a:hover, .dd-menu button:hover { background: var(--bg-soft); }
    .dd-menu .is-current { font-weight: 700; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      font-family: "Inter Tight Variable", ui-sans-serif, system-ui, sans-serif;
      color: var(--ink);
      background: var(--bg);
      font-size: 15px;
      line-height: 1.55;
      /* Sticky footer: short pages (signup wall, 404) keep it at the bottom. */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    main { flex: 1; }
    a { color: inherit; text-decoration: none; }
    /* One width everywhere: the SPA's max-w-6xl, header and content aligned. */
    .container { max-width: 1152px; margin: 0 auto; padding: 0 var(--gutter); }
    @media (max-width: 639px) { :root { --gutter: 20px; } }

    /* ── Header ── */
    .site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
    /* The header row is the content row: same max width, same gutter. It used
       to be an unpadded 1152px box, so the "Get started" button stuck out
       24px past the right edge of every card below it. */
    .site-header .container { padding-top: 10px; padding-bottom: 10px; }
    /* The logo artwork carries 18px of air left of its first dot; pulling it
       back puts the visible mark on the same line as the h1. */
    .site-logo { display: flex; align-items: center; margin-left: -18px; flex: none; }
    .brand { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
    .brand span { color: var(--accent); }
    .site-nav { display: flex; align-items: center; gap: 6px; font-size: 14px; }
    .site-nav a { padding: 7px 12px; border-radius: 4px; color: var(--ink-soft); font-weight: 500; }
    .site-nav a:hover { background: var(--line-soft); color: var(--ink); }
    .btn {
      display: inline-block; padding: 9px 16px; border-radius: var(--r);
      font-weight: 600; font-size: 14px; border: 1px solid transparent;
      cursor: pointer; text-align: center;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
    .btn-ghost:hover { border-color: var(--ink-faint); }
    .btn-lg { padding: 12px 22px; font-size: 15px; }
    .btn-sm {
      height: 32px; padding: 0 12px; font-size: 14px; font-weight: 500;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .nav-login {
      display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
      border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--ink);
    }
    .nav-login:hover { background: var(--bg-soft); }

    /* ── Page header ── */
    .page-head { padding: 32px 0 24px; }
    .page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .company-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .company-logo {
      width: 52px; height: 52px; border-radius: var(--r-card); border: 1px solid var(--line);
      background: #fff; object-fit: contain; padding: 4px; flex: none;
    }
    .company-logo-placeholder {
      width: 52px; height: 52px; border-radius: var(--r-card); border: 1px solid var(--line);
      background: var(--bg-soft); color: var(--ink-faint); flex: none;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 20px;
    }
    h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
    /* The hub pages (directory, province, city, activity) open on the same
       scale as the marketing page heads (.mk-hero-page h1 and .mk-lead in
       _marketing_styles.html) rather than on the fiche's. Change them together. */
    .page-head-hub h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -0.022em; max-width: 24ch; }
    .page-head-hub .dir-lead { font-size: 18px; max-width: 60ch; margin-top: 18px; }
    /* The /directory hub carries a drawing beside its heading, like the
       marketing page heads (.mk-hero-split), and drops it once the head is
       one column. */
    .page-head-split {
      display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: 56px; align-items: center;
    }
    .page-head-illus { display: block; width: 100%; max-width: 440px; height: auto; max-height: 320px; object-fit: contain; justify-self: center; }
    @media (max-width: 900px) {
      .page-head-split { grid-template-columns: minmax(0, 1fr); }
      .page-head-illus { display: none; }
    }
    @media (max-width: 640px) {
      .company-title { align-items: flex-start; }
      .company-logo, .company-logo-placeholder { width: 44px; height: 44px; }
      h1 { font-size: 24px; }
      .page-head-hub .dir-lead { font-size: 16px; }
      /* The seat wraps under the number here, and the separator was left
         dangling at the end of the first line. */
      .company-sub .dot { display: none; }
    }
    h1 .form { color: var(--ink-faint); font-weight: 500; font-size: 17px; margin-left: 2px; }
    .company-aka {
      margin-top: 3px; color: var(--ink-soft); font-size: 14px;
      max-width: 70ch; overflow: hidden; display: -webkit-box;
      -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    }
    .company-aka .aka-more { color: var(--ink-faint); white-space: nowrap; }
    .company-lead { margin: 14px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
    .company-asof { margin: 6px 0 0; color: var(--ink-faint); font-size: 13px; }
    .company-sub { margin-top: 5px; color: var(--ink-soft); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
    .company-sub .dot { color: var(--ink-faint); font-size: 9px; }

    .badge {
      display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
      font-weight: 600; padding: 3px 10px; border-radius: 3px;
    }
    .badge .pip { width: 8px; height: 8px; border-radius: 3px; }
    .badge-green { background: #f0fdf4; color: #15803d; }
    .badge-green .pip { background: var(--green); }
    .badge-red { background: var(--red-soft); color: var(--red); }
    .badge-red .pip { background: var(--red); }
    .badge-amber { background: #fffbeb; color: #b45309; }
    .badge-amber .pip { background: #f59e0b; }
.badge-slate { background: #f1f5f9; color: #475569; }
.badge-slate .pip { background: #94a3b8; }

    /* ── Layout ── */
    .grid-main { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
    @media (max-width: 860px) { .grid-main { grid-template-columns: 1fr; } }
    /* Overview: the facts and the figures on the left, the rating on the
       right - the same split as the signed-in fiche. */
    .overview-grid {
      display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: 20px; align-items: start;
    }
    @media (max-width: 1000px) { .overview-grid { grid-template-columns: 1fr; } }
    .overview-col { display: flex; flex-direction: column; gap: 24px; }
    .overview-col > section { margin: 0; }
    section { margin: 32px 0; }
    h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 14px; }

    .card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; background: var(--card); }
    .card + .card { margin-top: 14px; }
    .card h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

    .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
    @media (max-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
    .fact .k { color: var(--ink-soft); font-size: 14px; }
    .fact .v { font-weight: 500; font-size: 14px; margin-top: 2px; }
    .fact-wide { grid-column: 1 / -1; }
.fact .note { color: var(--ink-soft); font-size: 12px; font-weight: 400; margin-top: 2px; }

    /* NACE list: code chip plus label, as on the signed-in fiche. */
    .nace-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .nace-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
    .nace-code {
      flex: none; border-radius: 3px; background: var(--bg-soft); padding: 2px 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
      color: var(--ink-soft);
    }
    .nace-row span:last-child { color: var(--ink-soft); }

    /* Financial estimate: the signed-in score card drawn in
       /grades/grade-<letter>.svg, the company's real letter and band sharp,
       the probability and the indicators blurred inside the image, with room
       under it for the call to action that unlocks them. */
    .overview-single { grid-template-columns: minmax(0, 1fr); }
    .score-teaser { padding: 20px 20px 96px; }
    .score-grade-img { display: block; width: 100%; height: auto; }
    /* The rating teaser keeps its shape readable and lets the call to action
       sit at the bottom: a card washed out end to end reads as an empty box,
       not as the rating the visitor came for. */
    .preview-score { min-height: 0; }
    .preview-score .preview-lock {
      padding: 18px;
      background: linear-gradient(to bottom, transparent 40%, var(--card) 78%);
    }

    /* ── Tables ── */
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
    thead th { color: var(--ink-soft); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--line); }
    td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    tbody tr:last-child td { border-bottom: none; }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
    .table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 18px; }
    .hint { display: inline; margin-left: 5px; }
    .hint summary { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); font: italic 600 10px/1 Georgia, serif; cursor: pointer; list-style: none; vertical-align: 1px; }
    .hint summary::-webkit-details-marker { display: none; }
    .hint summary:hover, .hint[open] summary { color: var(--ink); border-color: var(--ink-soft); }
    .hint-text { display: block; max-width: 34ch; margin-top: 4px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; white-space: normal; }

    /* ── Directory (/directory and its facets) ── */
    .dir-lead { color: var(--ink-soft); font-size: 17px; line-height: 1.6; max-width: 62ch; margin-top: 12px; text-wrap: pretty; }
    .dir-grid {
      display: grid; gap: 6px 18px;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .dir-grid a {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
      padding: 7px 10px; border-radius: var(--r); font-size: 14px;
    }
    .dir-grid a:hover { background: var(--bg-soft); }
    .dir-grid .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-grid .ct { color: var(--ink-faint); font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
    /* The facet grids sit on a card so the page reads as panels rather than
       as text floating on the page background. */
    .dir-card .dir-region { margin-bottom: 18px; }
    .dir-card .dir-region:last-child { margin-bottom: 0; }
    .dir-card .dir-region h3 { padding: 0 10px; }
    .dir-region { margin-bottom: 22px; }
    .dir-region h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
    .dir-crumbs { font-size: 13px; color: var(--ink-faint); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
    .dir-crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
    .dir-crumbs a:hover { color: var(--ink); }
    .dir-name { font-weight: 500; }
    .dir-name:hover { text-decoration: underline; text-underline-offset: 3px; }
    .dir-kbo { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
    .dir-note { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
    /* The one empty state, matching the app: a dashed frame, an icon, one
       sentence. It REPLACES the card it would have sat in, so a page with
       nothing to show still reads as a deliberate answer rather than as a
       block that failed to render. */
    .empty-state {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      border: 1px dashed var(--line); border-radius: var(--r-card);
      padding: 64px 24px; text-align: center;
    }
    .empty-state svg { width: 32px; height: 32px; color: var(--ink-faint); }
    .empty-state p { max-width: 65ch; font-size: 14px; color: var(--ink-faint); }
    .dir-pager {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      margin-top: 16px; font-size: 14px;
    }
    .dir-pager .pos { color: var(--ink-faint); font-size: 13px; }
    @media (max-width: 640px) {
      .dir-seat { display: none; }
    }

    /* ── Locked widgets ── */
    .locked { position: relative; overflow: hidden; }
    .locked-blur {
      filter: blur(6px); user-select: none; pointer-events: none; opacity: .7;
      font-weight: 700; font-size: 22px; padding: 8px 0; text-align: center;
    }
    .locked-note { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
    .locked-note strong { color: var(--ink); }
    .lock-ico { color: var(--ink-faint); font-size: 13px; float: right; }
    .locked .btn { margin-top: 12px; width: 100%; }

    /* ── Tabbed company sections (pure-CSS, no-JS). The free "Overview" tab is
       checked by default so its content is always in the DOM for crawlers;
       locked tabs show a drawing of what they hold behind a CTA. ── */
    .ctabs { margin-top: 8px; }
    .ctabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .ctab-bar {
      display: flex; gap: 2px; border-bottom: 1px solid var(--line);
      overflow-x: auto; scrollbar-width: none;
    }
    .ctab-bar::-webkit-scrollbar { display: none; }
    .ctab {
      display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
      padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
      border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
      transition: color .15s;
    }
    .ctab:hover { color: var(--ink); }
    .ctab .lk { color: var(--ink-faint); flex: none; }
    .ctab-panel { display: none; padding-top: 22px; }
    /* The panel already spaces itself; a `section` inside it would add its own
       26px on top and push the "Similar" tab a notch below every other one. */
    .ctab-panel > section { margin: 0; }
    #ct-overview:checked  ~ .ctab-bar label[for="ct-overview"],
    #ct-history:checked   ~ .ctab-bar label[for="ct-history"],
    #ct-directors:checked ~ .ctab-bar label[for="ct-directors"],
    #ct-links:checked     ~ .ctab-bar label[for="ct-links"],
    #ct-similar:checked   ~ .ctab-bar label[for="ct-similar"] {
      color: var(--ink); border-bottom-color: var(--accent);
    }
    #ct-overview:checked  ~ .ctab-panel.p-overview,
    #ct-history:checked   ~ .ctab-panel.p-history,
    #ct-directors:checked ~ .ctab-panel.p-directors,
    #ct-links:checked     ~ .ctab-panel.p-links,
    #ct-similar:checked   ~ .ctab-panel.p-similar { display: block; }

    /* Locked preview: a drawing behind the call to action. */
    .preview {
      position: relative; border: 1px solid var(--line); border-radius: var(--r-card);
      overflow: hidden; background: var(--card); min-height: 300px;
    }
    .preview-blur {
      user-select: none; pointer-events: none; padding: 22px 18px 30px;
    }
    /* Out of focus on purpose: the drawing says "there is a record here", the
       count over it says how much, and the count is what sells the account. */
    .preview-blur .fi { filter: blur(2.5px); opacity: .7; }
    .preview-cap {
      position: absolute; top: 10px; right: 10px; z-index: 2;
      font-size: 11px; color: var(--ink-faint); background: var(--bg-soft);
      border: 1px solid var(--line); border-radius: 3px; padding: 2px 10px; white-space: nowrap;
    }
    .preview-lock {
      position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end; gap: 6px; text-align: center;
      padding: 22px 18px;
      background: linear-gradient(to bottom, transparent 10%, var(--card) 55%);
    }
    .preview-lock .t { font-weight: 600; font-size: 16px; }
    .preview-lock .s { color: var(--ink-soft); font-size: 13px; max-width: 360px; }
    /* The locked tabs lead with their count; the rating card keeps its sentence. */
    .preview:not(.preview-score) .preview-lock {
      justify-content: center; padding-top: 90px;
      background: linear-gradient(to bottom, transparent 15%,
        color-mix(in srgb, var(--card) 80%, transparent) 50%, var(--card) 88%);
    }
    .preview:not(.preview-score) .preview-lock .t { font-size: 18px; }
    .preview:not(.preview-score) .preview-lock .s { font-size: 15px; max-width: 440px; }
    .preview:not(.preview-score) .preview-lock .s strong {
      display: block; margin-bottom: 4px; color: var(--accent);
      font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
      font-variant-numeric: tabular-nums;
    }
    .preview-lock .btn { margin-top: 6px; }
    .preview .pub-list, .preview table { margin: 0; }

    /* Drawings behind the locked tabs (`_fiche_illus.html`): shapes in the
       page tokens, no text, so nothing invented is indexed on a real company. */
    .fi { display: block; width: 100%; height: auto; }
    .fi-card { fill: var(--card); stroke: var(--line); stroke-width: 1.2; }
    .fi-sk { fill: var(--line); }
    .fi-sk-soft { fill: var(--line-soft); }
    .fi-track { fill: var(--bg-soft); }
    .fi-rail { fill: none; stroke: var(--line); stroke-width: 1.5; }
    .fi-today { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 4; }
    .fi-on { fill: var(--card); }
    .fi-on-soft { fill: color-mix(in srgb, var(--card) 38%, transparent); }
    .fi-accent { fill: var(--accent); }
    .fi-teal { fill: var(--brand-a); }
    .fi-cyan { fill: var(--brand-b); }
    .fi-slate { fill: var(--ink-faint); }
    .fi-red { fill: var(--red); }
    .fi-accent-soft { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
    .fi-teal-soft { fill: color-mix(in srgb, var(--brand-a) 14%, transparent); }
    .fi-cyan-soft { fill: color-mix(in srgb, var(--brand-b) 14%, transparent); }
    .fi-slate-soft { fill: color-mix(in srgb, var(--ink-faint) 15%, transparent); }
    .fi-red-soft { fill: color-mix(in srgb, var(--red) 12%, transparent); }
    .fi-accent-mid { fill: color-mix(in srgb, var(--accent) 45%, transparent); }
    .fi-teal-mid { fill: color-mix(in srgb, var(--brand-a) 45%, transparent); }
    .fi-cyan-mid { fill: color-mix(in srgb, var(--brand-b) 45%, transparent); }
    .fi-slate-mid { fill: color-mix(in srgb, var(--ink-faint) 45%, transparent); }
    .fi-red-mid { fill: color-mix(in srgb, var(--red) 45%, transparent); }
    .fi-glyph { fill: none; stroke: var(--card); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    /* Year-on-year change under a key figure. */
    td .delta {
      display: block; font-size: 11px; color: var(--ink-faint);
      font-variant-numeric: tabular-nums; margin-top: 1px;
    }
    /* What the Links tab holds, counted. */
    .lock-kinds {
      list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
      gap: 6px; margin: 2px 0 0; padding: 0;
    }
    .lock-kinds li {
      font-size: 12px; color: var(--ink-soft); background: var(--bg-soft);
      border: 1px solid var(--line); border-radius: var(--r); padding: 2px 8px;
    }
    .lock-kinds b { color: var(--ink); font-weight: 600; }

    /* The watch: what a reader of ONE company comes back for. */
    .watch-card {
      border: 1px solid var(--line); border-left: 3px solid var(--accent);
      border-radius: var(--r-card); background: var(--card); padding: 18px 20px;
    }
    .watch-card .t { font-weight: 600; font-size: 16px; margin: 0; }
    .watch-card .s { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
    .watch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
    .watch-plans { font-size: 14px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

    /* ── Publications ── */
    .pub-list { list-style: none; }
    .pub-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
    .pub-list li:last-child { border-bottom: none; }
    .pub-date { color: var(--ink-soft); font-size: 13px; white-space: nowrap; min-width: 86px; font-variant-numeric: tabular-nums; }
    .pub-flag { color: var(--red); font-weight: 600; font-size: 12px; }
    /* Language codes rather than flags: a flag is a country, not a language. */
    .lang-code { display: inline-block; min-width: 1.6em; font-size: 11px; font-weight: 600; letter-spacing: .04em; }

    /* ── FAQ ──
       Flat on purpose: the answers are two lines each, so an accordion would
       hide them behind a click for no gain. Question in ink, answer in the
       soft ramp, one card, everything readable at a glance. */
    .faq-flat { display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.55; }
    .faq-flat p { margin: 0; }
    .faq-flat b { font-weight: 600; }
    .faq-flat .a { color: var(--ink-soft); }

    /* ── Similar companies (free) ── */
    .peers-note { color: var(--ink-soft); font-size: 14px; margin-bottom: 10px; }
    td.town { color: var(--ink-faint); font-size: 13px; white-space: nowrap; }
    .peers-more { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
    .peers-more a {
      font-size: 14px; color: var(--accent); text-decoration: underline;
      text-underline-offset: 3px;
    }
    .dir-card { padding: 8px; }

    /* ── CTA banner ── */
    .cta-banner {
      border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px;
      display: flex; justify-content: space-between; align-items: center; gap: 24px;
      background:
        radial-gradient(closest-side, rgba(5,150,105,.07), transparent) 110% 50% / 60% 200% no-repeat,
        var(--card);
      flex-wrap: wrap;
    }
    .cta-banner .t { font-size: 20px; font-weight: 700; max-width: 640px; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
    @media (max-width: 640px) { .cta-banner { padding: 24px; } .cta-banner .btn { width: 100%; } }
    .cta-banner .s { color: var(--ink-soft); margin-top: 6px; font-size: 14px; }

    /* ── Wall ── */
    .wall {
      border: 1px solid var(--line); border-radius: var(--r-card); padding: 48px 32px;
      text-align: center; max-width: 560px; margin: 48px auto; background: var(--card);
    }
    .wall .ico { font-size: 34px; }
    .wall-illus { display: block; height: 140px; width: auto; max-width: 100%; margin: 0 auto 12px; }
    .wall h1 { font-size: 22px; margin-top: 12px; }
    .wall p { color: var(--ink-soft); margin-top: 10px; }
    .wall .btn { margin-top: 20px; }

    /* ── Sources / footer ── */
    .sources { list-style: none; font-size: 14px; }
    .sources li { padding: 4px 0; }
    .sources a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
    .sources a:hover { text-decoration-color: var(--ink-faint); }
    /* The footer is a sitemap, not a strip of links: six labelled columns so
       a reader landing on a fiche from a search engine can see what the rest
       of the site holds, then one bottom line for the brand and the
       registers the data comes from. It sits on the content grid (1152px,
       same gutter), so its first column starts under the h1. Mirrored by the
       SPA footer (Common/Footer.tsx). */
    .site-footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 40px 0 24px; background: var(--card); color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
    .footer-grid {
      display: grid; gap: 28px 24px; align-items: start;
      grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    }
    .footer-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .footer-grid b { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
    .footer-grid a { width: fit-content; }
    .site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .footer-bottom {
      display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
      gap: 8px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line-soft);
    }
    .footer-bottom .wordmark { font-size: 15px; margin-right: 8px; }
    .footer-sources b { color: var(--ink); font-weight: 600; }
    /* The wordmark is a logotype, so it keeps the identity ramp the SPA uses
       for `.text-gradient-brand` (brighter than the button level). */
    .wordmark {
      font-weight: 700; letter-spacing: -0.01em; color: var(--brand-a);
      background: linear-gradient(100deg, var(--brand-a), var(--brand-b));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ── Shared SiteHeader look (mirrors the SPA marketing header) ── */
    .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); background: var(--header-bg); }
    .nav-links { display: flex; align-items: center; gap: 4px; font-size: 14px; }
    .nav-links a {
      padding: 8px 12px; border-radius: var(--r); color: var(--ink); font-weight: 500;
      line-height: 20px;
    }
    .nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
    .nav-dd-toggle {
      display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 12px;
      border-radius: var(--r); border: none; background: none; cursor: pointer;
      font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ink);
    }
    .nav-dd-toggle:hover, .dd-nav.open .nav-dd-toggle { background: var(--bg-soft); }
    .nav-dd-toggle svg { color: var(--ink-faint); }
    /* The navigation menus open under their button, flush against it so the
       pointer never crosses a gap that would close them on hover. */
    .dd-nav .dd-menu { left: 0; right: auto; top: 100%; min-width: 230px; }
    .dd-nav .dd-menu a { padding: 8px 10px; border-radius: var(--r); }
    @media (hover: hover) and (min-width: 1024px) {
      .dd-nav:hover .dd-menu, .dd-nav:focus-within .dd-menu { display: block; }
    }
    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: var(--r); border: none;
      background: transparent; color: var(--ink-soft); cursor: pointer;
    }
    .icon-btn:hover { background: var(--bg-soft); color: var(--ink); }
    .icon-btn-outline { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
    .icon-btn-outline:hover { background: var(--bg-soft); }
    .desktop-only { display: flex; align-items: center; gap: 6px; }
    .mobile-only { display: none; }
    @media (max-width: 1023px) {
      .nav-links { display: none; }
      .mobile-only { display: inline-flex; }
    }
    @media (max-width: 767px) {
      .desktop-only { display: none; }
    }

    /* ── Search modal ── */
    .search-overlay {
      position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.45);
      display: none; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px;
    }
    .search-overlay.open { display: flex; }
    .search-box {
      background: var(--card); border-radius: var(--r-card); width: 100%; max-width: 520px;
      border: 1px solid var(--line); overflow: hidden; box-shadow: 0 24px 48px rgba(13, 19, 28, .16);
    }
    .search-box .row { position: relative; border-bottom: 1px solid var(--line); }
    .search-box input {
      width: 100%; border: none; outline: none; font: inherit; font-size: 14px;
      padding: 14px 16px 14px 44px; background: transparent;
    }
    .search-box .row svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }
    .search-results { list-style: none; max-height: 320px; overflow: auto; padding: 4px 0; }
    .search-results a {
      display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px;
    }
    .search-results a:hover { background: var(--bg-soft); }
    .search-results .nm { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .search-results .aux { color: var(--ink-faint); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
    /* The company's own mark, or a monogram on a colour derived from its name
       (window.Addrly in base.html, the same palette and the same hash as the
       signed-in app, so a company wears one colour across the site). Fixed
       size and `flex: none` on both, so a list where only some companies have
       a logo keeps every name starting on the same line. */
    .res-logo {
      width: 24px; height: 24px; flex: none; border-radius: var(--r);
      object-fit: contain; background: var(--bg-soft);
    }
    .res-monogram {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff;
    }
    .search-empty { padding: 14px 16px; font-size: 14px; color: var(--ink-soft); display: none; }

    /* ── Mobile menu ──
       A full-height panel under the header: the list scrolls on its own and
       the two calls to action sit in a bar pinned at the bottom. They used to
       be the last two entries of a twenty-entry list, below the fold on every
       phone, and the one that mattered was drawn as a plain menu link. */
    .mobile-menu {
      display: none; flex-direction: column;
      position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 39;
      border-top: 1px solid var(--line); background: var(--card);
    }
    .mobile-menu.open { display: flex; }
    /* A menu left open while the window grows must not survive the breakpoint. */
    @media (min-width: 1024px) { .mobile-menu.open { display: none; } }
    .mm-scroll {
      flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch; padding: 6px var(--gutter) 18px;
    }
    /* Scoped to the scrolling list, never to `.mobile-menu` as a whole: an
       element selector plus a class outranks `.btn-primary`, so the call to
       action at the bottom was drawn with the menu's ink instead of white. */
    .mm-scroll a {
      display: block; padding: 11px 10px; border-radius: var(--r);
      font-size: 15px; font-weight: 500; color: var(--ink);
    }
    .mm-scroll a:hover, .mm-scroll a:active { background: var(--bg-soft); }
    .mm-head {
      margin: 16px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
      text-transform: uppercase; color: var(--ink-faint);
    }
    .mm-scroll > .mm-head:first-child { margin-top: 4px; }
    .mm-group { margin-left: 10px; padding-left: 6px; border-left: 1px solid var(--line-soft); }
    .mm-top { font-weight: 600; }
    .mm-cta {
      flex: none; display: flex; gap: 10px;
      border-top: 1px solid var(--line); background: var(--card);
      padding: 12px var(--gutter);
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    /* Two equal buttons, and one full-width button when the visitor is signed
       in and "Get started" is taken out. */
    .mm-cta .btn {
      flex: 1 1 0; display: flex; align-items: center; justify-content: center;
      height: 46px; font-size: 15px;
    }
    #menu-toggle .ic-close { display: none; }
    #menu-toggle[aria-expanded="true"] .ic-open { display: none; }
    #menu-toggle[aria-expanded="true"] .ic-close { display: block; }