/* 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 two marks from the brand sheet, redrawn as masks so they can be painted
     with currentColor instead of being shipped as two-toned pictures.

     --brandmark  the rounded square holding the aperture
     --submark    the step-up arrow, used where a round is nearly closed */
  --brandmark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Crect x='1.35' y='1.35' width='21.3' height='21.3' rx='6.2'/%3E%3Cpath d='M15.2 8.6a5.2 5.2 0 1 0 0 6.8'/%3E%3Ccircle cx='11.3' cy='12' r='1.85' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --submark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5 9 11l5 3.5 6-6.5 5 3.5 7-7.5'/%3E%3Cpath d='M29.5 4h5.5v5.5'/%3E%3C/svg%3E");

  --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: 500;
  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: 500;
  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-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 masthead is the top of the black shell: solid ink, edge to edge, with the
   page hanging underneath it. No rule is needed under a black band. */
.site-head {
  background: var(--shell);
  color: var(--shell-ink);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 66px;
}

/* The wordmark takes the wide end of the width axis and the headlines take the
   narrow end. Same file, opposite ends — which is what keeps a heavy logotype
   and a condensed headline from looking like two unrelated decisions. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 800;
  font-stretch: 115%;
  font-variation-settings: 'wdth' 115;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--shell-ink);
}

/* The brandmark, redrawn from the brand sheet as a mask rather than as a
   picture: painted with currentColor, it is white in the masthead and black
   wherever the page is light, from one definition. Swap the path for the real
   vector when there is one — nothing else has to change. */
.brand .mark {
  width: 27px;
  height: 27px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--brandmark) center / contain no-repeat;
  mask: var(--brandmark) center / contain no-repeat;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 78%;
  font-variation-settings: 'wdth' 78;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav a { color: var(--shell-ink-2); position: relative; padding: 4px 0; }
.nav a:hover { color: var(--shell-ink); }

/* The page you are on is marked with a rule under it, not with a heavier word:
   the row of capitals stays even and the marker is unmistakable. */
.nav a.on { color: var(--shell-ink); }

.nav a.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--mint);
}

.nav a.btn::after { display: none; }

#nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-left: 22px;
  border-left: 1px solid var(--shell-rule);
}

[dir="rtl"] #nav-auth {
  padding-left: 0;
  padding-right: 22px;
  border-left: 0;
  border-right: 1px solid var(--shell-rule);
}

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

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

/* ---- everything inside the black shell ----
   Collected here rather than scattered through the components, so the one thing
   worth checking — that nothing on the shell is written in mint's failing pair —
   can be checked by reading twenty lines. */

.site-head .btn:not(.ghost),
.site-foot .btn:not(.ghost),
.front .btn:not(.ghost) {
  background: var(--mint);
  border-color: var(--mint);
  color: #000;
}

.site-head .btn:hover,
.site-foot .btn:hover,
.front .btn:not(.ghost):hover { box-shadow: none; filter: brightness(1.08); }

.site-head .linklike { color: var(--shell-ink-2); }
.site-head .linklike:hover { color: var(--shell-ink); }

.site-head .lang-btn { color: var(--shell-ink-2); }
.site-head .lang-btn:hover { color: var(--shell-ink); border-color: var(--shell-rule); }

.site-head a:focus-visible,
.site-head button:focus-visible,
.site-foot a:focus-visible {
  outline-color: var(--mint);
  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; }

/* ---------- 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 band is the rest of the shell: the masthead does not stop, it keeps
   going for another screen and then the page cuts to white. One edge, not a
   header with a hero glued under it. */
.front {
  background: var(--shell);
  color: var(--shell-ink);
  padding: 76px 0 0;
}

/* Headline left, the numbers right, in the proportions a front page uses —
   deliberately not two halves. */
.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  padding-bottom: 66px;
}

.front h1 {
  font-size: clamp(3rem, 8.4vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.005em;
  /* Wide enough for text-wrap: balance to have a choice. Pinned tighter, the
     cap decided the breaks and balance had nothing left to do. */
  max-width: 13.5em;
  margin: 0 0 26px;
  color: var(--shell-ink);
  text-wrap: balance;
}

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

.front .btn.ghost {
  color: var(--shell-ink);
  border-color: var(--shell-rule);
}

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

.front a:focus-visible, .front button:focus-visible {
  outline-color: var(--mint);
  box-shadow: none;
}

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

/* The index box: the market in four lines, set like a price table. Mint does the
   writing here, which is the one place on the site it is allowed to. */
.index-box {
  border-top: 3px solid var(--mint);
  padding-top: 15px;
}

.index-box h2 {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 78%;
  font-variation-settings: 'wdth' 78;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 6px;
}

.index-box dl { margin: 0; }
.index-box .index-row dt { color: var(--shell-ink-2); }
.index-box .index-row dd { color: var(--shell-ink); }

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

.index-row:last-child { border-bottom: 0; }

.index-row dt {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.3;
}

.index-row dd {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
  white-space: nowrap;
}

.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; }

/* ---------- ranked list (front page) ---------- */

.ranked {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rank;
}

.rank-row {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 168px;
  gap: 22px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.rank-row::before {
  content: counter(rank, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--rule-2);
  line-height: 1.2;
}

.rank-row:hover::before { color: var(--ink); }

.rank-row h3 { font-size: 1.22rem; margin-bottom: 3px; }
.rank-row h3 a:hover { color: var(--accent); }

.rank-row .tag-line {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin-bottom: 9px;
  max-width: 29.8em;
}

.rank-figure { text-align: end; }

.rank-figure .amount { font-size: 1.3rem; display: block; line-height: 1.1; }

.rank-figure .pct {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 5px;
}

.rank-figure .pct.hot { color: var(--ink); font-weight: 700; }

.rank-figure .pct.hot::before {
  content: "";
  width: 26px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--submark) center / contain no-repeat;
  mask: var(--submark) center / contain no-repeat;
}

/* ---------- thesis cards (front page, investor side) ---------- */

.thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Loading and failure messages are one message, not the first of three. */
.thesis-grid .empty { grid-column: 1 / -1; }

.thesis {
  padding: 26px 26px 26px 0;
  border-inline-end: 1px solid var(--rule);
}

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

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

/* The one-liner reads as something the firm said, because it is: full ink,
   larger than the facts under it, and hung off an opening mark. (No italic —
   that would be a whole extra font file for three lines on one page.) */
.thesis .quote {
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
  padding-inline-start: 15px;
  position: relative;
  font-variation-settings: 'opsz' 16;
}

.thesis .quote::before {
  content: "“";
  position: absolute;
  inset-inline-start: -2px;
  top: -0.14em;
  font-size: 1.5em;
  line-height: 1;
  color: var(--rule-2);
}

.micro { margin: 0; display: grid; gap: 0; }

.micro-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.79rem;
}

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

/* ---------- 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: 66px;
  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-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: 500;
  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: 500;
  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; }

/* 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-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);
}

.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-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: 500;
  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-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: 92px;
}

.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: 500;
  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-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-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: 500;
  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: 500;
  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: 500;
  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; }

/* ---------- footer ---------- */

/* The shell closes the page the way it opened it. The step-up arrow from the
   brand sheet sits above the rule — the only ornament on the site, and it is
   there because a directory of rounds being raised is what it draws. */
.site-foot {
  background: var(--shell);
  color: var(--shell-ink-2);
  margin-top: 24px;
  padding: 34px 0 46px;
  font-size: 0.8rem;
}

.site-foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

.site-foot .wrap::before {
  content: "";
  flex: 1 0 100%;
  height: 20px;
  margin-bottom: 24px;
  background: var(--mint);
  -webkit-mask: var(--submark) left center / auto 100% no-repeat;
  mask: var(--submark) left center / auto 100% no-repeat;
}

[dir="rtl"] .site-foot .wrap::before {
  -webkit-mask-position: right center;
  mask-position: right center;
  transform: scaleX(-1);
}

.site-foot nav {
  display: flex;
  gap: 22px;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 78%;
  font-variation-settings: 'wdth' 78;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-foot a:hover { color: var(--shell-ink); }

/* ---------- 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"] .brand { margin-right: 0; margin-left: auto; }
[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) {
  .site-head .wrap {
    flex-wrap: wrap;
    height: auto;
    padding-top: 13px;
    padding-bottom: 11px;
    row-gap: 11px;
    gap: 14px;
  }

  .nav { width: 100%; gap: 18px; }
  #nav-auth { margin-inline-start: auto; }
  .nav a { white-space: nowrap; }

  /* 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 { gap: 13px; font-size: 0.68rem; letter-spacing: 0.08em; }
  #nav-auth { gap: 12px; padding-inline-start: 12px; }
  .btn { height: 40px; padding: 0 16px; }
  .btn.sm { padding: 0 10px; }

  .front { padding-top: 44px; }
  .front-grid { padding-bottom: 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) {
  .nav { flex-wrap: wrap; row-gap: 0; gap: 16px; }

  #nav-auth {
    width: 100%;
    justify-content: space-between;
    margin-inline-start: 0;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 440px) {
  .nav { gap: 12px; }
  .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; }
}