/* Akatse — stylesheet.
 *
 * The look is borrowed from the financial press rather than from software: a
 * masthead over a heavy rule, a serif for anything that carries meaning, a
 * grotesque for the machinery around it, and rules instead of boxes wherever a
 * rule will do. Nothing is rounded much, nothing floats on a shadow, and no
 * panel is decorated for its own sake.
 *
 * Two typefaces, both served from this origin (see tools/fetch-fonts.js):
 *   Literata — headlines, prose, every figure. Variable optical size, so the
 *              same file is a text face at 16px and a display face at 76px.
 *   Archivo  — labels, tags, navigation, buttons. Everything that is interface
 *              rather than content.
 *
 * Sections below, in order: tokens · reset · furniture · masthead · buttons ·
 * home · directories · listing rows · profiles · forms · pricing · checkout ·
 * footer · responsive.
 */

/* ---------- tokens ---------- */

:root {
  /* ---- the brand, verbatim ----
     Three colours and no more: #000000, #7fc0a6, #ffffff.

     The one rule that governs all of them: MINT IS A SURFACE, NOT AN INK —
     except on black, where it is the ink. That is not a preference, it is
     arithmetic. Mint on white measures 2.10:1 and fails WCAG at every size;
     mint on black measures 9.99:1 and black on mint the same. So on a light
     page mint fills things (a bar, a chip, a chosen row) and black writes on
     it; on the black shell mint does the writing. Every use of mint in this
     file is one of those two. */
  --mint: #7fc0a6;

  /* ---- the light surface: where people read ---- */
  --paper: #ffffff;
  --paper-2: #f4f4f2;                     /* wells, hover, raised */
  --paper-3: #eaeae7;
  --ink: #000000;                         /* 21:1 */
  --ink-2: #333333;                       /* 12.6:1 */
  --ink-3: #666666;                       /* 5.74:1 — carries every small label */
  --rule: #dcdcda;
  --rule-2: #b4b4b0;

  /* ---- the black shell: masthead, front band, footer, calls to action ---- */
  --shell: #000000;
  --shell-ink: #ffffff;                   /* 21:1 */
  --shell-ink-2: #a8a8a8;                 /* 8.8:1 */
  --shell-rule: #2b2b2b;

  /* Interactive emphasis on the light surface is black, because mint cannot be
     text there. --accent stays as the name every component already uses. */
  --accent: #000000;
  --accent-ink: #ffffff;
  --accent-soft: var(--mint);

  /* Not a brand colour. A system colour, used in exactly one place — a form
     field that was filled in wrong — because "your email is malformed" has to
     be unmistakable and the palette has nothing spare to say it with. */
  --error: #c0271d;

  /* The marks, taken from the brand file itself rather than redrawn: the layers
     were read out of AKATSE LOGO.psb, composited to silhouettes and traced, so
     these are the shapes as drawn and not an approximation of them. Each is a
     single path, so it can be worn as a mask and painted with currentColor —
     mint on the masthead, ink on paper, white on the shell, one file each.

     --brandmark  the rounded square with the a cut out of it
     --logotype   AKA / TSE, stacked, as the primary lockup sets it
     --wordmark   akatse, on one line
     --submark    the step-up arrow, beside the front page's figures */
  --brandmark: url(/assets/brand/brandmark.svg);
  --logotype: url(/assets/brand/logotype.svg);
  --wordmark: url(/assets/brand/wordmark.svg);
  --submark: url(/assets/brand/submark.svg);

  --radius: 2px;
  --maxw: 1180px;

  /* A comfortable line, ~66 characters. Written in em rather than ch on
     purpose: ch is the width of the current font's zero, so a column measured
     in ch is a different width before and after the webfont lands — the
     paragraph rewraps and the page jumps, which is the one shift the metric
     overrides below cannot prevent. In em the box is fixed and only the letters
     inside it change. Every measure in this file is converted the same way. */
  --measure: 37.8em;

  /* ---- three voices, two files ----
     The brand book names a heavy display face and Impact. Impact cannot set a
     four-hundred-word company profile — one weight, no width, and it is a system
     font that half of Android does not have, so half of the visitors would see
     something else entirely. So the display role is built rather than borrowed:
     Archivo carries a width axis (62–125%), and at wdth 62 / wght 800 it is a
     condensed black — the same shape Impact is reached for. The interface face
     is that identical file at normal width. One download, two voices, related by
     construction.

     Literata stays, and only where reading and arithmetic happen: prose, every
     figure, and the name of every company and fund. A hard graphic shell over a
     serious reading face is a deliberate pairing, not a hedge — the shell is the
     brand talking, the serif is the directory doing its job. */
  --display: 'Archivo', 'Display Fallback', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Archivo', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Literata', 'Literata Fallback', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* One curve for everything that moves: quick to leave, slow to settle. The
     browser default (`ease`) is symmetrical, which is why default transitions
     feel like a mechanism rather than like a hand. */
  --ease: cubic-bezier(0.22, 0.61, 0.16, 1);

  color-scheme: light;
}

/* ---------- fallback metrics ----------
 *
 * Between the first paint and the moment a webfont lands, the page is set in
 * Georgia and Arial. Left alone, the swap re-flows every line — the jump people
 * see as "the site rearranging itself while it loads", and most of what a
 * Cumulative Layout Shift score is actually measuring on a text site.
 *
 * These two faces are Georgia and Arial rescaled to Literata's and Archivo's
 * own metrics: same advance width, same ascent, same descent. When the real
 * font arrives the letters change shape and nothing moves.
 *
 * The numbers are measured rather than guessed — a pangram rendered at 100px in
 * each face, compared. See README, "The typefaces".
 */

@font-face {
  font-family: 'Literata Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 102.04%;
  ascent-override: 115.65%;
  descent-override: 30.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 98.83%;
  ascent-override: 89.04%;
  descent-override: 21.25%;
  line-gap-override: 0%;
}

/* The display role needs its own stand-in. Archivo at wdth 62 is 14% narrower
   than Arial Narrow and 35% narrower than Arial, so borrowing the interface
   fallback would set every headline far too wide and re-flow it on the swap —
   which is the whole thing these faces exist to prevent. Arial Narrow first
   because it is closest; Impact behind it because the brand names it and it is
   on every Windows and every Mac. */
@font-face {
  font-family: 'Display Fallback';
  src: local('Arial Narrow'), local('Impact'), local('Haettenschweiler'),
       local('Liberation Sans Narrow'), local('DejaVu Sans Condensed');
  size-adjust: 86.17%;
  ascent-override: 102.13%;
  descent-override: 24.37%;
  line-gap-override: 0%;
}

/* Dark mode is not a second design here — it is the shell swallowing the page.
   The light surface becomes near-black, and mint stops being a fill and starts
   being the ink, which is the pairing the brand is built around anyway. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0a0a;
    --paper-2: #141414;
    --paper-3: #1c1c1c;
    --ink: #ffffff;
    --ink-2: #c4c4c4;
    --ink-3: #8f8f8f;                     /* 6.4:1 on #0a0a0a */
    --rule: #262626;
    --rule-2: #3d3d3d;

    --shell: #000000;
    --shell-ink: #ffffff;
    --shell-ink-2: #a8a8a8;
    --shell-rule: #2b2b2b;

    /* Here mint can write, so it takes over the emphasis it could not carry on
       white — the one place the two schemes genuinely differ. */
    --accent: var(--mint);
    --accent-ink: #000000;
    --accent-soft: var(--mint);

    --error: #ff6b5e;
    color-scheme: dark;
  }
}

/* ---------- reset ---------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  /* Quotation marks and hyphens hang into the margin instead of denting the
     left edge of a paragraph. Safari only for now, and invisible where it is
     not supported — which is the right kind of detail to add. */
  hanging-punctuation: first last;

  /* The scrollbar is furniture too. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  /* No -webkit-font-smoothing override. Forcing `antialiased` thins a serif on
     a light ground — it is a habit from dark UI, and this page is paper. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

/* Headings are the brand speaking: condensed, black, set in capitals. The width
   and weight are asked for by name rather than by keyword, because `font-stretch:
   condensed` would round to the nearest named width and lose the axis. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62;
  line-height: 0.94;
  letter-spacing: 0.002em;
  text-transform: uppercase;
  /* A headline is short enough for the browser to try every line break and pick
     the set with the evenest rag. No heading on this site ends in one word. */
  text-wrap: balance;
}

h1 { font-size: 3rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.15rem; letter-spacing: 0.02em; }

/* The exception, and it is a deliberate one: the name of a company or a fund is
   content, not chrome. It stays in the reading face and keeps its own
   capitalisation, so a listing reads as an entry in a directory rather than as
   another shouted headline. */
.card-body h3,
.rank-row h3,
.thesis h3,
.person .nm {
  font-family: var(--serif);
  font-weight: 600;
  font-stretch: 100%;
  font-variation-settings: 'opsz' 24;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;
}

/* Paragraphs are too long to balance, but `pretty` still costs the last few
   lines a second look and takes the widow off the end. */
p, li, dd, .tag-line, .deck { text-wrap: pretty; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* A ring, not an outline: the accent line with a soft halo behind it, so it
   reads on paper and on ink without hunting for contrast. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent-soft);
  border-radius: 1px;
}

img, svg { max-width: 100%; }
b, strong { font-weight: 600; }

::selection { background: var(--accent); color: var(--accent-ink); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- shared furniture ---------- */

.muted { color: var(--ink-3); }
.small { font-size: 0.82rem; }
.mono { font-family: var(--mono); font-size: 0.85em; letter-spacing: -0.01em; }

/* Every number on this site is set in the serif with tabular figures, so a
   column of them lines up and a changing figure does not shift the row. */
.fig {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 32;
}

/* The small tracked capitals that label everything. */
.kicker,
.section-label,
.eyebrow {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.section-label {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  margin-bottom: 18px;
}

/* Deck: the sentence under a headline. Serif, one size up from the body, and
   never wider than a comfortable line. */
.deck {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34.9em;
  font-variation-settings: 'opsz' 18;
}

/* An underline that draws itself, rather than one that is simply there. */
.link {
  color: inherit;
  background-image: linear-gradient(var(--mint), var(--mint));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  transition: background-size 0.18s var(--ease);
  padding-bottom: 1px;
}

.link:hover { background-size: 100% 100%; }

.link-arrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.18s var(--ease);
}

.link-arrow:hover::after { transform: translateX(3px); }

[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .link, .link-arrow::after { transition: none; }
}

/* ---------- skip link ----------
   Off screen until it is focused, then it is the first thing on the page. A
   keyboard visitor gets to the listings in one Tab instead of eleven. */

.skip {
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.16s var(--ease);
}

.skip:focus { transform: none; }

/* The target should not draw a focus ring of its own when the link jumps to it —
   the point is to move the caret, not to outline the whole page. */
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .skip { transition: none; }
}

/* ---------- prototype notice ---------- */

/* Mint doing the job it is best at: a full-width band that has to be noticed
   once and then dismissed. Black on mint is 9.99:1, so the notice is the most
   legible thing on the page as well as the loudest. Identical in both colour
   schemes — the brand does not have a night version. */
.proto-bar {
  background: var(--mint);
  color: #000;
  font-size: 0.78rem;
  line-height: 1.45;
}

.proto-bar .wrap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.proto-bar b {
  flex: none;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
}

.proto-bar p { margin: 0; }

.proto-bar button {
  margin-left: auto;
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: #000;
  opacity: 0.55;
  cursor: pointer;
}

.proto-bar button:hover { opacity: 1; }

/* ---------- masthead ---------- */

/* The top of a page is a masthead, not a header bar: a heavy rule, the edition
   line, the mark over white, and the sections ruled off underneath it. The black
   shell has moved: it is now the section you are standing in and the colophon
   that closes the page, and nothing else. */
.site-head { background: var(--paper); }

/* 4px above, 4px below the section bar. Everything between them is the identity
   talking; everything after them is the directory working. */
.site-head .top-rule { border-top: 4px solid var(--ink); }

.dateline { border-bottom: 1px solid var(--rule); }

.dateline .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 40px;
  font-family: var(--display);
  font-size: 0.63rem;
  font-weight: 700;
  font-stretch: 85%;
  font-variation-settings: 'wdth' 85;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dateline b { color: var(--ink); font-weight: 700; }
.dateline .ed-mid { letter-spacing: 0.2em; }
.dateline .ed-right { display: inline-flex; align-items: center; gap: 15px; }
.dateline .btn.sm { height: 26px; padding: 0 11px; font-size: 0.62rem; }

#nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline-start: 15px;
  border-inline-start: 1px solid var(--rule);
}

.nav-user {
  line-height: 1.15;
  display: inline-flex;
  flex-direction: column;
  max-width: 9.2em;
  overflow: hidden;
  color: var(--ink);
}

.nav-user i {
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  color: var(--ink-3);
}

/* ---- the lockup ----
   Both marks come out of the brand file itself, drawn as masks so one file
   paints mint here and black or white wherever else it is asked for. */
.masthead { text-align: center; padding: 17px 0 12px; }

.brand {
  display: inline-flex;
  align-items: center;
  /* A lockup does not mirror: in Arabic the row would otherwise put the
     logotype before the mark, which is a different logo. */
  direction: ltr;
  gap: 15px;
  color: var(--mint);
  line-height: 0;
}

.brand .mark,
.brand .type {
  display: block;
  flex: none;
  background: currentColor;
}

.brand .mark {
  height: 62px;
  aspect-ratio: 566 / 488;
  -webkit-mask: var(--brandmark) center / contain no-repeat;
  mask: var(--brandmark) center / contain no-repeat;
}

.brand .type {
  height: 56px;
  aspect-ratio: 791 / 439;
  -webkit-mask: var(--logotype) center / contain no-repeat;
  mask: var(--logotype) center / contain no-repeat;
}

.strap {
  text-align: center;
  font-size: 0.83rem;
  color: var(--ink-3);
  margin-top: 9px;
}

.strap b { color: var(--ink); font-weight: 600; }

/* ---- the section bar ----
   The only way between sections. Each one is a ruled cell; the one you are in is
   filled with ink, so the row of capitals stays even and the marker is
   unmistakable. */
.nav-bar {
  border-top: 1px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}

.nav-bar .wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
}

.nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 85%;
  font-variation-settings: 'wdth' 85;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav a {
  padding: 10px 26px;
  color: var(--ink);
  border-inline-end: 1px solid var(--rule);
  transition: background 0.18s var(--ease);
}

.nav a:first-child { border-inline-start: 1px solid var(--rule); }
/* Mint is a surface, so the ink on it is black in both schemes — inheriting
   --ink would write white on mint at 2.1:1 the moment the page went dark. */
.nav a:hover { background: var(--mint); color: #000; }
.nav a.on { background: var(--ink); color: var(--paper); }
.nav a:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; box-shadow: none; }

.linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
}

.linklike:hover { color: var(--ink); }
.linklike[disabled] { opacity: 0.55; cursor: default; }

/* ---------- one screen ----------
   Nothing scrolls a section into view: the masthead and the colophon are pinned
   and the section between them takes what is left. A long directory scrolls
   inside its own frame rather than taking the page with it. Below the breakpoint
   the shell unlocks and the page scrolls the ordinary way — the same 920px at
   which the filter bar stops docking, so the two never disagree. */
@media (min-width: 921px) {
  html, body { height: 100%; }

  body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .site-head, .site-foot, .proto-bar { flex: none; }

  #main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Two of the investor filters only mean something once a visitor has said which
   side of the table they are on: who a fund sells to and whether it backs
   software or hardware are the first things a founder screens on, and noise to
   somebody who is still reading. session.js puts data-own-category on <html>
   before the first paint, so these never flash in and out. */
html:not([data-own-category]) .signed-only { display: none; }

/* ---------- language picker ---------- */

#lang-picker { position: relative; display: inline-flex; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  padding: 5px 6px;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
}

.lang-btn:hover { color: var(--ink); border-color: var(--rule-2); }
.flag { display: block; border-radius: 1px; flex: none; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 30;
  margin: 0;
  padding: 5px;
  list-style: none;
  min-width: 196px;
  max-height: 62vh;
  overflow-y: auto;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
}

.lang-menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 1px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}

.lang-menu button:hover { background: var(--paper-3); }
.lang-menu button.on { color: var(--accent); font-weight: 600; }
.lang-menu .flag { margin-inline-end: 2px; }

/* ---------- signed-in personalisation ----------
   Once you have joined a side, the prompts aimed at that side come down: a
   founder is not told to browse companies or list a company. Set before first
   paint by session.js, so nothing appears and then vanishes. */

html[data-own-category="startups"] [data-category="startups"],
html[data-own-category="investors"] [data-category="investors"] {
  display: none !important;
}

/* With the primary hero button gone, promote the one that is left. */
html[data-own-category="startups"] .hero-actions .btn.ghost {
  background: var(--mint);
  border-color: var(--mint);
  color: #000;
}

/* One of the homepage's two columns is now hidden, so the other takes the
   width. Scoped to the homepage: the pricing page's columns have no side to
   them and would otherwise collapse for no reason once someone signs in. */
html[data-own-category] body[data-page="home"] .columns {
  grid-template-columns: 1fr;
  max-width: 35.5em;
}

html[data-own-category] body[data-page="home"] .columns > div {
  border: 0;
  padding-inline: 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  /* Between the wordmark's width and the headlines': wide enough to read at
     12px, condensed enough to belong to the same family of shapes. */
  font-family: var(--display);
  font-size: 0.79rem;
  font-weight: 700;
  font-stretch: 85%;
  font-variation-settings: 'wdth' 85;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}

/* The lift is skipped while the button is focused, because both effects are
   box-shadow and the hover rule would otherwise erase the focus ring for anyone
   whose pointer happens to be over the control they just tabbed to. */
.btn:hover { transform: translateY(-1px); }
.btn:hover:not(:focus-visible) { box-shadow: 0 3px 0 var(--accent-soft); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}

.btn.ghost:hover { border-color: var(--ink); }
.btn.ghost:hover:not(:focus-visible) { box-shadow: 0 3px 0 var(--rule); }

.btn.sm {
  height: 32px;
  padding: 0 13px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- home: the front page ---------- */

/* The front page is one screen and no more: the case on the left, the day's
   figures on the right, and every other section behind its own cell in the bar.
   Nothing is stacked underneath it to scroll down to. */
.front { display: flex; min-height: 100%; }

.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  flex: 1;
  padding-block: 26px;
}

.front-grid > div { padding-inline-end: 44px; }

.front h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.3rem);
  line-height: 0.92;
  max-width: 11.5em;
  margin: 0 0 22px;
  text-wrap: balance;
}

.front .deck { margin-bottom: 30px; max-width: 30.1em; color: var(--ink-2); }

/* The index: the market in six lines, set like a price table. Ruled off from the
   case beside it rather than boxed. */
.index-box {
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 44px;
}

.index-box h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.index-box dl { margin: 0; }

.index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.index-row:last-child { border-bottom: 0; }
.index-row dt { font-size: 0.76rem; color: var(--ink-3); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--sans); }
.index-row dd { margin: 0; font-size: 1.35rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The step-up arrow closes the column, where the brand sheet puts it: beside a
   number that is going up, and nowhere decorative. */
.index-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.45;
}

.index-note::before {
  content: "";
  flex: none;
  width: 86px;
  aspect-ratio: 381 / 130;
  background: var(--ink);
  -webkit-mask: var(--submark) center / contain no-repeat;
  mask: var(--submark) center / contain no-repeat;
}

[dir="rtl"] .index-note::before { transform: scaleX(-1); }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.section { padding: 60px 0; }
.section + .section { border-top: 1px solid var(--rule); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}

.section-head h2 { font-size: 1.7rem; }

/* The urgent section gets the red rule; nothing else on the site does. */
.section-head.urgent { border-bottom-color: var(--mint); border-bottom-width: 3px; }

/* ---------- two editorial columns ---------- */

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.columns > div { padding-inline-end: 44px; }

.columns > div + div {
  padding-inline: 44px 0;
  border-inline-start: 1px solid var(--rule);
}

.columns h3 { font-size: 1.3rem; margin-bottom: 16px; }

/* Numbered like a leader column: the figure hangs in the margin in the serif,
   the sentence keeps its own left edge. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 26px;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 34px;
  padding-bottom: 14px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: 'wdth' 62;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- directory: head and filters ---------- */

.page-head { padding: 46px 0 24px; }

.page-head h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-bottom: 12px;
  letter-spacing: -0.028em;
}

.page-head .deck,
.page-head p { color: var(--ink-2); max-width: 35.5em; }

.filters {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0 0 14px;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
}

/* The search line is the width of the page and set in the serif: it is the
   first thing anyone does here, so it is allowed to look like the headline of
   the tool rather than like a widget. */
.filter-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule);
}

.filter-search svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}

/* Typed as prose, not into a box. The rule under the whole line is the field;
   the input itself carries no chrome of its own. (The type selector is there to
   beat the shared input styling further down the file.) */
.filter-search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  height: auto;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  font-variation-settings: 'opsz' 18;
  color: var(--ink);
}

.filter-search input[type="text"]:hover { border: 0; }
.filter-search input::placeholder { color: var(--ink-3); opacity: 1; }
.filter-search input:focus-visible { outline-offset: 5px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: 14px;
}

/* Selects with the browser's chrome taken off: a word, a caret, and a rule that
   appears when the value stops being the default. Five identical grey boxes in
   a row is the look of a form that nobody designed. */
.filters select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  padding: 3px 20px 3px 0;
  height: auto;
  max-width: 190px;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23736c5e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 9px;
}

[dir="rtl"] .filters select {
  padding: 3px 0 3px 20px;
  background-position: left 2px center;
}

.filters select:hover { color: var(--ink); border-bottom-color: var(--rule-2); }

/* A filter that is doing something says so. */
.filters select.set {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.count {
  margin-inline-start: auto;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: none;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-2);
}

.chip-toggle:hover { border-color: var(--ink); color: var(--ink); }

.chip-toggle[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: #000;
}

.filters .linklike {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--mint);
}

/* ---------- the Monday email ---------- */

.digest-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}

.digest-bar > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.digest-bar b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  font-variation-settings: 'opsz' 18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.digest-bar span { font-size: 0.76rem; color: var(--ink-3); }
.digest-bar .btn { margin-inline-start: auto; flex: none; }

.digest-panel {
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 22px 24px 24px;
  margin: 0 0 4px;
  max-width: 580px;
}

.digest-panel h3 { margin-bottom: 8px; }

.digest-form { display: flex; gap: 10px; margin: 18px 0 0; }
.digest-form input { flex: 1 1 auto; min-width: 0; }
.digest-form .btn { flex: none; }
.digest-note { margin-top: 14px; }

/* ---------- listing rows ---------- */

.cards { border-bottom: 1px solid var(--rule); }

.card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 200px;
  gap: 20px;
  padding: 20px 0;
  align-items: start;
  border-top: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
}

.cards .card:first-child { border-top: 0; }

/* The hover is a bleed into the margins rather than a coloured box: the row
   lights up, the grid it sits in does not move. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity 0.14s var(--ease);
  z-index: -1;
}

.card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::before { transition: none; }
}

/* Initials on a hairline square, not a filled chip. */
.avatar {
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: none;
  flex: none;
}

.card:hover .avatar { border-color: var(--ink); color: var(--ink); }

.card-body h3 { font-size: 1.16rem; margin-bottom: 3px; }
.card-body h3 a:hover { color: var(--accent); }

.card-body .tag-line {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin-bottom: 10px;
  max-width: 32.1em;
}

/* The meta line: one flag in colour, then plain words with hairline dots
   between them. A row of identical grey pills is the thing being avoided. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.meta .flag-tag {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--mint);
  color: #000;
  border-radius: var(--radius);
  padding: 2px 8px;
  font-size: 0.65rem;
}

.meta .bit { position: relative; padding-inline-end: 10px; }

.meta .bit::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--rule-2);
}

.meta .bit:last-child { padding-inline-end: 0; }
.meta .bit:last-child::after { display: none; }

/* The founders, on the card. Set in the reading serif rather than in the
   interface sans, because this is the one line on the row that is meant to be
   read as a sentence about people instead of scanned as a field. */
.founders {
  margin-top: 9px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.founders .who { display: inline-block; max-width: 34em; }
.founders .who b { font-weight: 600; color: var(--ink); }

.founders .cred {
  color: var(--ink-3);
  /* Long enough to say what somebody did, short enough that two of them do not
     push the round out of the row. */
  display: inline;
}

/* Who is in the round, under the bar that says how full it is. Small, tracked,
   and the same size as the label above it: this is a footnote to the money, not
   a competing headline. */
.round-line {
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

/* A round with nobody leading it is not a failure — for an angel who can lead,
   it is the only kind worth opening. Marked, not hidden. */
.round-line.unled { color: var(--ink-2); }

.unled-note { color: var(--ink-2); }
.round-line.unled::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-inline-end: 6px;
  vertical-align: 1px;
}

/* Kept so a stray .tag in generated markup still looks deliberate. */
.tag {
  font-size: 0.72rem;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1px 7px;
}

.tag.solid {
  border-color: transparent;
  background: var(--mint);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

/* Figure first, then the control that acts on it — side by side, so the star
   sits level with the name it saves rather than orphaned below a progress
   rule. */
.card-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  text-align: end;
}

.card-side .ask-block { flex: 1 1 auto; min-width: 0; }
.card-side .star { flex: none; }

.ask { font-size: 1.28rem; line-height: 1.1; display: block; }

.ask-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

/* A round's progress, as a rule that fills. Red once it is nearly gone: the one
   place on the page where a colour means "hurry". */
.bar {
  height: 3px;
  background: var(--rule);
  overflow: hidden;
  margin-top: 9px;
}

.bar i { display: block; height: 100%; background: var(--mint); }
/* Mint is progress. Black is a round that is nearly gone — the heaviest mark
   the palette has, and it reads as sealed rather than as merely further along. */
.bar.hot i { background: var(--ink); }

.star {
  border: 1px solid var(--rule-2);
  background: none;
  color: var(--ink-3);
  border-radius: var(--radius);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
  padding: 0;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}

.star:hover { border-color: var(--ink); color: var(--ink); }
.star[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #000; }

/* Signed out the star still invites a click — it just explains itself. */
.star[data-locked] { opacity: 0.5; }
.star[data-locked]:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .star { transition: none; } }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 26px;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 14px 13px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.toast.in { opacity: 1; transform: translateY(0); }

.toast .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.toast .btn:hover { box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

.empty {
  padding: 64px 20px;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  font-variation-settings: 'opsz' 18;
}

.empty p { margin-bottom: 16px; }

/* The way out of an empty result has to look like something you can press. */
.empty .linklike {
  font-family: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty .linklike:hover { color: var(--ink); }

/* ---------- profiles ---------- */

.back {
  display: inline-block;
  margin: 26px 0 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The arrow is drawn here rather than written into ten translations, which also
   turns it round on its own in Arabic. */
.back::before { content: "←"; margin-inline-end: 8px; }
[dir="rtl"] .back::before { content: "→"; }

.back:hover { color: var(--ink); }

.detail { padding: 0 0 80px; }

/* The masthead of a profile: kicker, headline, deck, byline — the order a
   newspaper puts them in, running the full width before the page splits. */
.profile-head {
  padding: 30px 0 26px;
  border-bottom: 2px solid var(--ink);
}

.profile-head .kicker {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 9px;
  background: var(--mint);
  color: #000;
  letter-spacing: 0.12em;
}

.profile-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  max-width: 10.8em;
  text-wrap: balance;
}

.profile-head .deck { max-width: 32.5em; margin-bottom: 18px; }

.byline {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.byline span { position: relative; padding-inline-end: 14px; }

.byline span::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--rule-2);
}

.byline span:last-child { padding-inline-end: 0; }
.byline span:last-child::after { display: none; }

/* Four figures across, divided by rules only. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}

.figures > div {
  padding: 22px 22px 24px 0;
  border-inline-end: 1px solid var(--rule);
}

.figures > div:last-child { border-inline-end: 0; }
.figures > div + div { padding-inline-start: 22px; }

.figures .v { font-size: 1.55rem; line-height: 1.15; display: block; }

.figures .k {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The pitch strip: five panels in the shape every company gets, sitting under
   the figures and above the prose. Set in the reading serif at body size — this
   is meant to be read straight through in one pass, not scanned as a table. */
.pitch { border-bottom: 1px solid var(--rule); padding-bottom: 22px; }

.pitch-h {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 14px;
}

.pitch-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.pitch-strip .panel {
  padding-inline-end: 20px;
  border-inline-end: 1px solid var(--rule);
}

.pitch-strip .panel:last-child { border-inline-end: 0; padding-inline-end: 0; }
.pitch-strip .panel + .panel { padding-inline-start: 20px; }

.pitch-strip .k {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.pitch-strip .panel p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.pitch-foot { margin-top: 18px; }
.pitch-foot .muted { font-family: var(--sans); font-size: 0.72rem; }

/* Five columns of prose stop being readable long before the page stops being
   wide, so they fold to two and then to one. */
@media (max-width: 1080px) {
  .pitch-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .pitch-strip .panel:nth-child(2n) { border-inline-end: 0; padding-inline-end: 0; }
  .pitch-strip .panel:nth-child(2n+1) { padding-inline-start: 0; }
}

@media (max-width: 620px) {
  .pitch-strip { grid-template-columns: 1fr; }
  .pitch-strip .panel,
  .pitch-strip .panel + .panel {
    border-inline-end: 0;
    padding-inline: 0;
  }
}

.profile-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 64px;
  align-items: start;
  padding-top: 40px;
}

.prose { max-width: var(--measure); }

.prose h2 {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 36px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.prose p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink-2);
  font-variation-settings: 'opsz' 14;
}

/* The first paragraph of a profile is set a shade larger and darker, the way a
   standfirst is. */
.prose > h2:first-child + p { font-size: 1.12rem; color: var(--ink); }

.people { display: grid; gap: 18px; margin-top: 6px; }

.person {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.person .avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 0.78rem; }

.person .nm {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  font-variation-settings: 'opsz' 18;
}

.person .rl {
  font-family: var(--sans);
  color: var(--ink-3);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}

.person p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 6px 0 0;
  font-variation-settings: 'opsz' 14;
}

/* ---------- fact box (profile aside, checkout summary) ---------- */

.aside {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  position: sticky;
  top: 22px;
}

.aside-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.aside-head .ask { font-size: 2rem; }

/* A cheque size is a range, not a single figure, so it is given the room a
   sentence needs rather than the size a headline number gets. */
.aside-head .ask.range { font-size: 1.3rem; }

.aside .bar { margin: 10px 0 20px; }
.aside dl { margin: 0 0 22px; }

.aside .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.83rem;
}

.aside .row:last-of-type { border-bottom: 0; }
.aside .row dt { color: var(--ink-3); flex: none; }

.aside .row dd {
  margin: 0;
  text-align: end;
  font-weight: 500;
  color: var(--ink);
}

.aside-title { margin-bottom: 14px; }

.aside .btn { width: 100%; }

.aside .note {
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-top: 12px;
  text-align: center;
  line-height: 1.45;
}

/* ---------- forms ---------- */

.form { max-width: 640px; padding: 8px 0 88px; }
.form.narrow { max-width: 420px; }

.alt-action {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.alt-action a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* The two role choices on the sign-in page. */
.pick {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}

/* The heavy rule opens the group. The "carry on where you left off" card is
   hidden for most visitors, so the one after it has to be able to take over. */
.pick:first-child,
.pick[hidden] + .pick { border-top: 2px solid var(--ink); }
.pick h3 { margin-bottom: 6px; }
.pick p { margin-bottom: 16px; }

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}

.field .hint {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
textarea {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  padding: 0 12px;
  height: 42px;
}

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-bottom-color: var(--accent); }

/* The same caret the filter bar draws, so a dropdown looks like one thing on
   this site rather than two. */
.field select,
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23736c5e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 10px;
}

[dir="rtl"] .field select,
[dir="rtl"] .form select { background-position: left 13px center; }

textarea {
  padding: 11px 12px;
  height: auto;
  line-height: 1.55;
  resize: vertical;
}

.field input,
.field select,
.field textarea { width: 100%; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* A note in the margin voice: rule above, small type, no box. */
.form-note {
  border-top: 2px solid var(--ink);
  padding: 14px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 32px;
}

.status {
  margin-top: 18px;
  font-size: 0.88rem;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-2);
  border-inline-start: 3px solid var(--ink-3);
  background: var(--paper-2);
}

.status.ok { border-inline-start-color: var(--accent); color: var(--accent); }
.status.err { border-inline-start-color: var(--error); color: var(--error); }

.check-row { display: flex; flex-wrap: wrap; gap: 8px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 8px 13px;
  font-size: 0.85rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 0;
  color: var(--ink);
}

.check input { accent-color: var(--accent); margin: 0; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.side-fields { border: 0; padding: 0; margin: 0; min-width: 0; }

/* The gate that stands in for the form when nobody is signed in. */
.gate {
  border-top: 2px solid var(--ink);
  padding: 26px 0 0;
  max-width: 620px;
  margin: 8px 0 88px;
}

.gate h2 { margin-bottom: 12px; }
.gate p { color: var(--ink-2); max-width: 33.2em; }
.gate .hero-actions { margin-top: 22px; }

/* ---------- pricing ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.plan {
  position: relative;
  padding: 30px 26px 30px 0;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--rule);
}

.plan:last-child { border-inline-end: 0; }
.plan + .plan { padding-inline-start: 26px; }

/* The recommended column is marked by a rule across the top of it, the way a
   table marks a row, not by a badge floating off a card. */
.plan.best::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 0;
  height: 4px;
  background: var(--mint);
}

.plan-flag {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.plan h3 { margin-bottom: 14px; }

.plan-price {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variation-settings: 'opsz' 60;
}

.plan-per {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 8px 0 14px;
}

/* The offer price is the one number on the page that is not the price, so it
   is the one thing wearing the brand colour: mint behind, black on top. */
.plan-offer {
  /* The column is a flex column, so an inline-block child still stretches to
     its width unless it is told not to. A chip that spans the column reads as
     a banner, not as a price. */
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 3px 8px;
  background: var(--mint);
  color: #000;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.plan p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-variation-settings: 'opsz' 14;
}

.plan .btn { margin-top: auto; }

/* The launch offer, above the plans. */
.launch-offer {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 3px solid var(--mint);
  padding: 14px 0 20px;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.launch-offer p { margin: 0; flex: 1 1 260px; }
.launch-offer .small { display: block; margin-top: 5px; color: var(--ink-3); }

.offer-tag {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--mint);
  color: #000;
  padding: 3px 9px;
  white-space: nowrap;
}

.digest-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 44px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding: 30px 0 0;
}

.digest-plan h3 { margin-bottom: 12px; }

.digest-plan p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-variation-settings: 'opsz' 14;
}

.digest-plan-side {
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 44px;
}

.digest-plan-side .btn { width: 100%; margin-top: 14px; }

/* Shows a draft listing the way it will sit in the directory. */
.preview-frame {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.preview-frame .card { border-top: 0; }
.preview-frame .card::before { display: none; }

/* ---------- checkout ---------- */

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 60px;
  align-items: start;
  padding-bottom: 88px;
}

.plan-picker { display: grid; margin-bottom: 38px; border-top: 1px solid var(--rule); }

.plan-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--rule);
  padding: 14px 4px;
  cursor: pointer;
}

.plan-option:hover { background: var(--paper-2); }
.plan-option.on { background: var(--accent-soft); }

.plan-option input {
  margin: 0;
  accent-color: var(--accent);
  grid-column: 1;
  grid-row: 1 / span 2;
}

.plan-option-name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  font-variation-settings: 'opsz' 18;
}

.plan-option-meta { grid-column: 2; grid-row: 2; color: var(--ink-3); font-size: 0.78rem; }

.plan-option-price {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* A picture of a payment step. There are no inputs here by design — nowhere on
   this site can a card number be entered, and nothing is charged. */
.pay-mock {
  border-top: 1px solid var(--rule);
  opacity: 0.65;
  user-select: none;
}

.pay-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.86rem;
}

.pay-row span { color: var(--ink-3); }
.pay-row b { font-weight: 500; font-variant-numeric: tabular-nums; }

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0 8px;
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}

.total b {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}

.total s { color: var(--ink-3); font-weight: 400; font-size: 1rem; margin-inline-end: 8px; }

.done {
  max-width: 560px;
  margin: 0 auto;
  padding: 64px 0 96px;
  text-align: center;
}

.done-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--mint);
  color: #000;
  font-size: 1.4rem;
  line-height: 48px;
}

.done h1 { font-size: 2.6rem; margin-bottom: 14px; }
.done .deck { color: var(--ink-2); margin: 0 auto 30px; }

.done-facts {
  text-align: start;
  border-top: 2px solid var(--ink);
  margin: 0 0 32px;
}

.done-facts .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.done-facts dt { color: var(--ink-3); }
.done-facts dd { margin: 0; font-weight: 500; }

/* ---------- colophon ---------- */

/* The page closes on ink, the way it opened on a rule. The wordmark is the same
   file as the masthead lockup, painted mint instead of black. */
.site-foot {
  background: var(--shell);
  color: var(--shell-ink-2);
  font-size: 0.78rem;
}

.site-foot .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 48px;
  padding-block: 11px;
}

.site-foot .word {
  width: 74px;
  aspect-ratio: 573 / 137;
  flex: none;
  background: var(--mint);
  -webkit-mask: var(--wordmark) center / contain no-repeat;
  mask: var(--wordmark) center / contain no-repeat;
}

.site-foot .colophon-line b { color: var(--mint); font-weight: 600; }

.site-foot a:hover { color: var(--mint); }
.site-foot a:focus-visible { outline-color: var(--mint); box-shadow: none; }

/* ---------- right-to-left ---------- */

/* Almost everything mirrors on its own: the layout is written in logical
   properties, so these are the two places that still name a physical side. */
[dir="rtl"] .proto-bar button { margin-left: 0; margin-right: auto; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .front-grid { grid-template-columns: 1fr; gap: 40px; }
  .index-box { max-width: 460px; }
  .profile-cols { grid-template-columns: 1fr; gap: 40px; }
  .aside { position: static; }
  .checkout-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis { border-inline-end: 0; border-bottom: 1px solid var(--rule); padding: 22px 0; }
  .thesis + .thesis { padding-inline-start: 0; }
  .thesis:last-child { border-bottom: 0; }

  .columns { grid-template-columns: 1fr; }
  .columns > div { padding: 0 0 28px; }
  .columns > div + div { padding: 28px 0 0; border-inline-start: 0; border-top: 1px solid var(--rule); }

  .plan-grid { grid-template-columns: 1fr; }
  .plan { border-inline-end: 0; border-bottom: 1px solid var(--rule); padding: 26px 0; }
  .plan + .plan { padding-inline-start: 0; }

  .figures { grid-template-columns: 1fr 1fr; }
  .figures > div { padding-inline: 0 22px; }
  .figures > div:nth-child(2n) { border-inline-end: 0; padding-inline-start: 22px; }
  .figures > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

  .digest-plan { grid-template-columns: 1fr; gap: 26px; }
  .digest-plan-side { border-inline-start: 0; border-top: 1px solid var(--rule); padding: 22px 0 0; }
}

/* Set in tracked capitals the navigation is wider than it used to be, and the
   longest label is not the English one. Rather than shrink it until it is
   unreadable, the masthead becomes two rows: the wordmark over the row of
   sections, which is what a printed masthead does anyway. */
@media (max-width: 920px) {
  .masthead { padding: 13px 0 10px; }
  .brand { gap: 12px; }
  .brand .mark { height: 46px; }
  .brand .type { height: 42px; }
  .nav a { padding: 9px 17px; white-space: nowrap; }
  .front-grid > div { padding-inline-end: 0; }
  .index-box { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--rule); padding-top: 22px; }

  /* A two-row masthead is no longer 66px tall, so the filter bar stops trying
     to dock under it and simply scrolls away with the page. */
  .filters { position: static; }
}

@media (max-width: 680px) {
  .wrap { padding: 0 20px; }
  .nav { font-size: 0.66rem; letter-spacing: 0.1em; }
  .nav a { padding: 8px 12px; }
  .dateline .ed-mid { display: none; }
  #nav-auth { gap: 12px; padding-inline-start: 12px; }
  .btn { height: 40px; padding: 0 16px; }
  .btn.sm { padding: 0 10px; }

  .front-grid { padding-block: 30px 40px; }
  .section { padding: 42px 0; }

  /* The figure column has nowhere to go beside the name, so it drops under it
     and lies down: amount and label on one line, the progress rule below. */
  .rank-row { grid-template-columns: 26px minmax(0, 1fr); gap: 14px; }
  .rank-figure { grid-column: 2; text-align: start; padding-top: 4px; }
  .rank-figure .amount { display: inline; }
  .rank-figure .pct { display: inline; margin: 0 0 0 10px; }
  .rank-row .bar { max-width: 180px; }

  .card { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .avatar { width: 40px; height: 40px; }

  .card-side {
    grid-column: 2;
    align-items: flex-start;
    justify-content: space-between;
    text-align: start;
    gap: 14px;
    width: 100%;
    padding-top: 4px;
  }

  .card-side .ask { display: inline; }
  .card-side .ask-label { display: inline; margin: 0 0 0 8px; }
  .card-side .bar { max-width: 180px; }

  /* Thumbs are not mouse pointers. */
  .star { width: 36px; height: 36px; }

  /* A 66-character measure becomes a 34-character one on a phone, which is
     where German and Lithuanian compounds start tearing holes in the rag.
     i18n.js keeps <html lang> current, so the browser hyphenates by the right
     dictionary. */
  .prose p,
  .deck,
  .plan p,
  .digest-plan p { hyphens: auto; }

  .filter-search input { font-size: 1.05rem; }
  .filter-row { gap: 10px 16px; }
  .field-row { grid-template-columns: 1fr; }
  .done h1 { font-size: 2rem; }
}

/* On a phone the sections and the account links cannot share a line without one
   of them being cut off, and neither is worth hiding. So they take a line each:
   sections and language above, sign in and sign up across the width below. */
@media (max-width: 520px) {
  .dateline .wrap { flex-wrap: wrap; row-gap: 7px; padding-top: 7px; padding-bottom: 7px; }
  .dateline .edition { order: 1; }
  .dateline .ed-right { order: 2; margin-inline-start: auto; }
  .nav a { padding: 8px 10px; }
}

@media (max-width: 440px) {
  .nav a { padding: 7px 8px; letter-spacing: 0.06em; }
  .proto-bar { position: relative; }

  .proto-bar .wrap { flex-wrap: wrap; row-gap: 4px; padding-inline-end: 34px; }
  .proto-bar button { margin: 0; position: absolute; inset-inline-end: 18px; top: 8px; }

  .digest-bar { flex-wrap: wrap; }
  .digest-bar .btn { margin-inline-start: 0; width: 100%; }
  .digest-form { flex-direction: column; }
  .digest-form .btn { width: 100%; }
}

/* ---------- print ----------
   A fund partner who is interested in a company prints the profile and takes it
   into a Monday meeting. That is the one moment this site is genuinely paper, so
   it is worth a few lines: the furniture goes, the type turns black on white,
   links stop being invisible, and the fact box lands under the prose instead of
   trying to hold a column of its own on a sheet of A4. */

@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --paper-3: #fff;
    --ink: #000;
    --ink-2: #1a1a1a;
    --ink-3: #555;
    --rule: #bbb;
    --rule-2: #999;
    --accent: #000;
    /* Mint prints as a pale wash on most office printers and disappears on a
       mono one, so on paper the fills become a light grey the ink still reads
       against. The rule survives the medium: fill, never write. */
    --mint: #d8d8d8;
  }

  .proto-bar,
  .site-head,
  .site-foot,
  .filters,
  .digest-bar,
  .digest-panel,
  .back,
  .star,
  .toast,
  .aside .btn,
  .hero-actions { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .detail { padding: 0; }

  .profile-cols { display: block; }
  .prose { max-width: none; }

  .aside {
    position: static;
    margin-top: 28px;
    break-inside: avoid;
  }

  /* A profile should not break across a page in the middle of a founder. */
  .person,
  .figures,
  .card,
  .rank-row { break-inside: avoid; }

  /* On paper an underline is the only thing a link has left, and the address is
     worth carrying over — this is a directory of people to contact. */
  .prose a,
  .aside a { text-decoration: underline; }
  .aside .row a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ---------- one-off spacing ----------
   These used to be style="" attributes. The Content-Security-Policy refuses
   inline styles (an injected style attribute can redraw a page into a phishing
   form), so each one lives here instead. !important because that is exactly the
   weight an inline style had: moving it here changes nothing on screen. */
.hp { position: absolute !important; left: -9999px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-18 { margin-top: 18px !important; }
.mt-56 { margin-top: 56px !important; }
.mb-18 { margin-bottom: 18px !important; }
.pt-26 { padding-top: 26px !important; }
.m-under-preview { margin: 8px 0 34px !important; }
.m-under-total { margin: 0 0 16px !important; }
.m-footnote { max-width: 620px !important; margin: 48px 0 88px !important; }
.done-preview { text-align: start !important; margin-bottom: 28px !important; }
.actions-center { justify-content: center !important; }

/* Turnstile, the check that a form is sent by a person. Usually invisible; when
   Cloudflare does want a click, the box sits here. */
.human-check { margin: 12px 0 0; min-height: 0; }
.human-check:empty { display: none; }